/* ===================================================== Follower Hub — SMM panel layer Extends the Tech Designer design system (style.css). Navy #04107C + Amber #F59E0B, same tokens, same rhythm. ===================================================== */ :root{ --fh-navy:#04107C; --fh-navy-2:#0a1ba8; --fh-navy-3:#020a5a; --fh-amber:#F59E0B; --fh-ink:#0f172a; --fh-muted:#64748b; --fh-line:#e2e8f0; --fh-soft:#f8fafc; --fh-radius:5px; --fh-shadow:0 10px 30px -12px rgba(4,16,124,.18); --fh-shadow-lg:0 24px 60px -24px rgba(4,16,124,.32); } /* ============ Balance chip in the header ============ */ .fh-balance-chip{ display:inline-flex;align-items:center;gap:7px; background:linear-gradient(135deg,#ecfdf5,#d1fae5); color:#065f46!important;border:1px solid #a7f3d0; padding:8px 14px;border-radius:5px;font-weight:700;font-size:14px; transition:.2s;white-space:nowrap; } .fh-balance-chip:hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(16,185,129,.28);color:#065f46!important} .fh-balance-chip i{font-size:15px} /* Smooth anchor scrolling; the reduced-motion block at the bottom turns it off again for anyone who has asked for less movement. */ html{scroll-behavior:smooth} /* Nothing should ever push the page sideways. clip, not hidden: hidden turns the element into a scroll container and every position:sticky inside it (the policy sidebar, the price-list table header) silently stops working. */ html,body{overflow-x:clip} /* AOS holds [data-aos] at opacity 0 until its script reveals them. The layout sets .no-aos when that script is missing, so the content comes back instead of the page staying half empty. */ html.no-aos [data-aos]{opacity:1!important;transform:none!important} /* ============ Hero ============ */ /* Five tinted pools over the navy base rather than one flat wash — amber and violet up top, cyan and pink along the bottom. Every hero on the site picks this up; the home page layers the animated aurora on top of it. */ .fh-hero{ position:relative;overflow:hidden;isolation:isolate; background: radial-gradient(900px 420px at 6% -14%, rgba(245,158,11,.24), transparent 60%), radial-gradient(780px 400px at 80% -8%, rgba(139, 92,246,.32), transparent 62%), radial-gradient(820px 460px at 98% 74%, rgba(34,211,238,.20), transparent 60%), radial-gradient(700px 400px at 22% 112%, rgba(236, 72,153,.20), transparent 62%), linear-gradient(135deg,#0A1170 0%, var(--fh-navy) 46%, #060B33 100%); color:#fff;padding:88px 0 108px; } .fh-hero h1,.fh-hero h2{color:#fff} .fh-hero .lead{color:rgba(255,255,255,.86);font-size:18px;max-width:620px} .fh-hero-badge{ display:inline-flex;align-items:center;gap:8px; background:rgba(245,158,11,.16);border:1px solid rgba(245,158,11,.42); color:#fcd34d;padding:7px 16px;border-radius:5px; font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase; margin-bottom:18px; } .fh-hero-badge .dot{width:7px;height:7px;border-radius:50%;background:#34d399;box-shadow:0 0 0 4px rgba(52,211,153,.22)} .fh-hero-stats{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px} .fh-hero-stat{ background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16); border-radius:var(--fh-radius);padding:14px 20px;min-width:132px; } .fh-hero-stat b{display:block;font-size:24px;font-weight:800;color:#fff;line-height:1.15} .fh-hero-stat span{font-size:12.5px;color:rgba(255,255,255,.68);text-transform:uppercase;letter-spacing:.06em} /* Wave separator, matching the Tech Designer hero recipe */ .fh-wave{display:block;width:100%;height:auto;margin-top:-1px} /* Soft moving glow behind the hero — pure CSS, no image weight */ .fh-hero:before{ content:'';position:absolute;width:620px;height:620px;border-radius:50%; top:-260px;right:-160px;pointer-events:none; background:radial-gradient(circle, rgba(245,158,11,.22), transparent 62%); animation:fhFloat 14s ease-in-out infinite; } .fh-hero:after{ content:'';position:absolute;width:520px;height:520px;border-radius:50%; bottom:-280px;left:-140px;pointer-events:none; background:radial-gradient(circle, rgba(56,189,248,.16), transparent 62%); animation:fhFloat 18s ease-in-out infinite reverse; } .fh-hero > .container{position:relative;z-index:3} @keyframes fhFloat{ 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-26px,26px) scale(1.07)} } /* ============ Search autocomplete ============ */ .fh-ac{position:relative} .fh-ac-panel{ position:absolute;z-index:60;top:calc(100% + 6px);left:0;right:0; max-height:min(62vh,420px);overflow-y:auto; background:#fff;border:1px solid var(--fh-line);border-radius:var(--fh-radius); box-shadow:0 18px 42px rgba(4,16,124,.16);padding:6px; } .fh-ac-head{ padding:8px 10px 5px;font-size:10.5px;font-weight:700; text-transform:uppercase;letter-spacing:.07em;color:var(--fh-muted); } .fh-ac-item{ display:flex;align-items:center;gap:10px; padding:9px 10px;border-radius:var(--fh-radius); color:var(--fh-ink);text-decoration:none; } .fh-ac-item > i{font-size:17px;flex:0 0 20px;text-align:center} .fh-ac-item .nm{ flex:1 1 auto;min-width:0;font-size:14px;font-weight:600;line-height:1.3; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .fh-ac-item .nm small{ display:block;font-weight:500;font-size:12px;color:var(--fh-muted); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .fh-ac-item .meta{flex:0 0 auto;font-size:13px;font-weight:700;color:var(--fh-navy)} .fh-ac-item mark{background:rgba(245,158,11,.28);color:inherit;padding:0;border-radius:2px} .fh-ac-item:hover,.fh-ac-item.is-cursor{background:var(--fh-soft);color:var(--fh-ink)} .fh-ac-empty{padding:16px 12px;font-size:13.5px;color:var(--fh-muted);text-align:center} /* ============ Currency switcher ============ */ /* Every control in the header action strip is exactly as tall as its neighbours. Each button is otherwise sized by its own line box, so the one holding a flag image ends up a few pixels shorter than the ones holding only text — invisible alone, obvious in a row. The strip stretches its children instead of centring them, so they all take the height of the tallest, and the dropdown becomes a flex box of its own so its button can fill it. Matching by construction rather than by a number that would need re-tuning the next time a font size or padding changes. */ .td-actions{--fh-ctl-h:40px;align-items:stretch} .td-actions > .btn, .td-actions > .dropdown > .btn, .td-actions .fh-balance-chip{min-height:var(--fh-ctl-h)} .td-actions > .dropdown{display:flex} .td-actions > .dropdown > .btn{height:100%;white-space:nowrap} /* Styled in full rather than leaning on .btn-outline. That class lives in the public stylesheet, which the admin layout does not load — over there the button fell back to bare text with a caret. These rules are in smm.css, which both sides load, so the control looks the same in both. */ .fh-currency-toggle{ display:inline-flex;align-items:center;gap:8px; padding:0 12px;height:40px; background:#fff;border:1px solid var(--fh-line);border-radius:var(--fh-radius); color:var(--fh-navy);font-size:13.5px;font-weight:700;line-height:1; letter-spacing:.02em;cursor:pointer; transition:border-color .15s,box-shadow .15s,background .15s; } .fh-currency-toggle:hover, .fh-currency-toggle:focus-visible, .fh-currency-toggle[aria-expanded="true"]{ background:#fff;color:var(--fh-navy); border-color:var(--fh-navy);box-shadow:0 0 0 3px rgba(4,16,124,.08); } .fh-currency-toggle.dropdown-toggle::after{ margin-left:1px;border-top-color:var(--fh-muted); } .fh-currency-menu{ max-height:340px;overflow-y:auto;padding:6px;min-width:250px; } .fh-currency-menu .dropdown-item{ display:flex;align-items:center;gap:9px; padding:8px 10px;border-radius:var(--fh-radius); } .fh-currency-menu .dropdown-item b{font-size:13.5px;min-width:34px} .fh-currency-menu .dropdown-item .sym{color:var(--fh-muted);font-size:13px;min-width:26px} .fh-currency-menu .dropdown-item .nm{ color:var(--fh-muted);font-size:13px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .fh-currency-menu .dropdown-item.is-active{background:var(--fh-navy);color:#fff} .fh-currency-menu .dropdown-item.is-active .sym, .fh-currency-menu .dropdown-item.is-active .nm{color:rgba(255,255,255,.72)} /* ============ Policy sidebar ============ */ .fh-sidenav{ display:flex;flex-direction:column;gap:4px; padding:14px;background:#fff;border:1px solid var(--fh-line); border-radius:var(--fh-radius); /* Follows the reader down a long policy. */ position:sticky;top:88px; } .fh-sidenav-title{ padding:4px 10px 10px;font-size:11.5px;font-weight:700; text-transform:uppercase;letter-spacing:.07em;color:var(--fh-muted); } .fh-sidenav a{ display:flex;align-items:center;justify-content:space-between;gap:8px; padding:10px 12px;border-radius:var(--fh-radius); color:var(--fh-navy);font-size:14px;font-weight:600;text-decoration:none; transition:background .15s,color .15s; } .fh-sidenav a i{font-size:11px;opacity:.4} .fh-sidenav a:hover{background:var(--fh-soft)} .fh-sidenav a.is-active{background:var(--fh-navy);color:#fff} .fh-sidenav a.is-active i{opacity:.85} /* Below lg it becomes a horizontal row of pills above the text, so the reader is not scrolling past a stack of links to reach the page they asked for. */ @media (max-width:991.98px){ .fh-sidenav{ position:static;flex-direction:row;gap:8px; overflow-x:auto;padding:10px; /* Momentum scroll on iOS without a visible scrollbar on desktop-class touch devices. */ -webkit-overflow-scrolling:touch;scrollbar-width:none; } .fh-sidenav::-webkit-scrollbar{display:none} .fh-sidenav-title{display:none} .fh-sidenav a{white-space:nowrap;padding:8px 14px;background:var(--fh-soft)} .fh-sidenav a i{display:none} } /* Long policy text reads better with a little more air than the base card. */ .fh-legal h3{font-size:17px;margin:26px 0 10px;color:var(--fh-navy)} .fh-legal h3:first-child{margin-top:0} .fh-legal p,.fh-legal li{line-height:1.75} .fh-legal ul{margin-bottom:16px} .fh-legal li{margin-bottom:6px} .fh-legal .lead{ font-size:15.5px;color:var(--fh-muted); padding-bottom:16px;margin-bottom:4px;border-bottom:1px solid var(--fh-line); } /* ============ Inner page hero ============ Every page below the home page uses , so this is the one place their proportions are set. */ .fh-hero-page{padding:66px 0 78px} .fh-hero-page.is-compact{padding:52px 0 64px} .fh-hero-page h1{font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.2;margin:0 0 10px} .fh-hero-page .lead{margin:0} .fh-hero-page .fh-hero-stats{margin-top:0} @media (max-width:991.98px){ .fh-hero-page{padding:46px 0 58px} .fh-hero-page.is-compact{padding:38px 0 50px} .fh-hero-aside{text-align:left!important} } /* Fact chips under a detail-page heading — rate, limits, capabilities. */ .fh-hero-meta{display:flex;flex-wrap:wrap;gap:8px;margin:0} .fh-hero-meta span{ display:inline-flex;align-items:center;gap:6px; padding:6px 12px;border-radius:var(--fh-radius); background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.9);font-size:13px;font-weight:600; } .fh-hero-meta i{font-size:13px;color:#fcd34d} /* Breadcrumb. Was eleven copies of the same inline colours before the hero became a component. */ .fh-crumbs{ display:flex;flex-wrap:wrap;align-items:center;gap:8px; margin-bottom:16px;font-size:13.5px; } .fh-crumbs a{color:rgba(255,255,255,.72);text-decoration:none;transition:color .15s} .fh-crumbs a:hover{color:#fff;text-decoration:underline} .fh-crumbs > span{color:#fcd34d;font-weight:600} .fh-crumbs i{font-size:9px;color:rgba(255,255,255,.38)} /* ============ Hero: aurora, floaters, marquee ============ Three decorative layers, all aria-hidden and pointer-events:none, sitting below the content. Everything is transform/opacity only so it stays on the compositor and never triggers layout. */ /* 1. Drifting colour pools. Blurred heavily and screen-blended so they read as light rather than as shapes. */ /* No filter:blur() and no mix-blend-mode here on purpose. Both were in the first version and both were a mistake: a blur across a layer this size is re-rasterised every frame while the blobs move, and screen-blending five children forces the whole stack into its own compositing group on top of that. The gradients already fade to transparent, so they look near enough identical without either, and the animation drops to pure compositing. */ .fh-aurora{ position:absolute;inset:-12%;z-index:0;pointer-events:none;opacity:.85; } .fh-aurora span{ position:absolute;border-radius:50%; animation:fhAurora 22s ease-in-out infinite; } .fh-aurora .b1{width:38vw;height:38vw;left:-6%;top:-12%; background:radial-gradient(circle,rgba(245,158,11,.55),transparent 66%)} .fh-aurora .b2{width:34vw;height:34vw;right:-8%;top:-10%;animation-duration:27s;animation-direction:reverse; background:radial-gradient(circle,rgba(139,92,246,.55),transparent 66%)} .fh-aurora .b3{width:30vw;height:30vw;right:14%;bottom:-18%;animation-duration:19s; background:radial-gradient(circle,rgba(34,211,238,.46),transparent 66%)} .fh-aurora .b4{width:26vw;height:26vw;left:18%;bottom:-16%;animation-duration:25s;animation-direction:reverse; background:radial-gradient(circle,rgba(236,72,153,.42),transparent 66%)} .fh-aurora .b5{width:22vw;height:22vw;left:44%;top:6%;animation-duration:31s; background:radial-gradient(circle,rgba(16,185,129,.38),transparent 66%)} @keyframes fhAurora{ 0%,100%{transform:translate3d(0,0,0) scale(1)} 34% {transform:translate3d(4vw,3vh,0) scale(1.16)} 67% {transform:translate3d(-3vw,-2vh,0) scale(.9)} } /* 2. Faint graph paper, masked to fade out before it reaches the edges. */ .fh-grid-lines{ position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.6; background-image: linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px), linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px); background-size:64px 64px; -webkit-mask-image:radial-gradient(ellipse 78% 68% at 50% 42%,#000 28%,transparent 78%); mask-image:radial-gradient(ellipse 78% 68% at 50% 42%,#000 28%,transparent 78%); } /* 3. Platform badges orbiting slowly in the background. The wrapper drifts and the tile inside rotates — two elements because a single one cannot run two transform animations at once (the later rule simply wins). */ .fh-floaters{position:absolute;inset:0;z-index:1;pointer-events:none} .fh-float{ position:absolute;left:var(--x);top:var(--y); animation:fhDrift var(--t,18s) ease-in-out infinite; animation-delay:var(--d,0s); } .fh-float i{ display:flex;align-items:center;justify-content:center; width:var(--sz,52px);height:var(--sz,52px);font-size:calc(var(--sz,52px)*.42); border-radius:50%;color:var(--c,#fff); background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18); box-shadow:0 10px 30px rgba(3,7,45,.45), inset 0 1px 0 rgba(255,255,255,.22); opacity:.5; animation:fhSpin calc(var(--t,18s)*2.6) linear infinite; } @keyframes fhDrift{ 0%,100%{transform:translate3d(0,0,0)} 50% {transform:translate3d(var(--dx,16px),var(--dy,-24px),0)} } @keyframes fhSpin{ to{transform:rotate(360deg)} } /* 4. The running platform strip along the bottom of the hero. The track holds the same list twice, so translating it exactly -50% loops seamlessly — which is why the items carry margin-right instead of the track carrying gap: a gap would add one extra space that -50% does not account for. */ .fh-marquee{ position:relative;z-index:2;margin-top:58px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent); } .fh-marquee-track{ display:flex;width:max-content; animation:fhRun 38s linear infinite; will-change:transform; } .fh-marquee:hover .fh-marquee-track{animation-play-state:paused} .fh-marquee-item{ display:inline-flex;align-items:center;gap:9px;white-space:nowrap; margin-right:14px;padding:10px 18px;border-radius:var(--fh-radius); background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16); color:rgba(255,255,255,.92);font-size:13.5px;font-weight:600; } .fh-marquee-item i{font-size:18px;color:var(--c,#fff)} .fh-marquee-item small{color:rgba(255,255,255,.55);font-weight:500} @keyframes fhRun{ to{transform:translate3d(-50%,0,0)} } /* ============ Closing call to action ============ A contained panel, not a full-width band. Full-bleed navy here butted straight against the navy footer and the two merged into one slab. */ .fh-cta{ position:relative;overflow:hidden;isolation:isolate; border-radius:var(--fh-radius);padding:58px 24px;text-align:center;color:#fff; background: radial-gradient(620px 320px at 10% -10%, rgba(245,158,11,.26), transparent 62%), radial-gradient(540px 300px at 90% 110%, rgba(139, 92,246,.32), transparent 62%), linear-gradient(135deg,#0A1170 0%, var(--fh-navy) 52%, #060B33 100%); box-shadow:0 22px 48px rgba(4,16,124,.22); } .fh-cta:before{ content:'';position:absolute;width:420px;height:420px;border-radius:50%; top:-210px;right:-130px;pointer-events:none;z-index:0; background:radial-gradient(circle,rgba(245,158,11,.24),transparent 62%); animation:fhFloat 16s ease-in-out infinite; } .fh-cta-inner{position:relative;z-index:2;max-width:640px;margin:0 auto} .fh-cta h2{color:#fff;margin:0 0 12px} .fh-cta p{color:rgba(255,255,255,.86);font-size:16.5px;margin:0 0 26px} @media (max-width:575.98px){ .fh-cta{padding:40px 18px} } /* ============ Carousel pre-init widths ============ Swiper's own CSS makes every slide 100% wide, and only the JS narrows them to slidesPerView. So a row meant to show six cards paints as one full-width card and then snaps — the visible reflow on this page. These match the breakpoints in the Swiper configs exactly; Swiper overwrites them with an inline width the instant it takes over, so they only ever govern the gap between first paint and init. Change one, change the other. */ .fh-platform-slider .swiper-slide{width:50%} @media (min-width:576px){ .fh-platform-slider .swiper-slide{width:33.3333%} } @media (min-width:768px){ .fh-platform-slider .swiper-slide{width:25%} } @media (min-width:992px){ .fh-platform-slider .swiper-slide{width:20%} } @media (min-width:1200px){ .fh-platform-slider .swiper-slide{width:16.6666%} } .fh-review-slider .swiper-slide{width:100%} @media (min-width:576px){ .fh-review-slider .swiper-slide{width:50%} } @media (min-width:992px){ .fh-review-slider .swiper-slide{width:33.3333%} } /* ============ Review slider ============ Slides are stretched to a common height so the row of cards lines up even when one quote runs shorter than the others. */ .fh-review-slider{position:relative} .fh-review-slider .swiper{overflow:hidden;padding:6px 2px 2px} .fh-review-slider .fh-slider-nav{justify-content:center} .fh-review-slider .swiper-slide{height:auto} .fh-review{ display:flex;flex-direction:column;gap:14px;height:100%;margin:0; padding:22px;background:#fff;border:1px solid var(--fh-line); border-radius:var(--fh-radius); transition:box-shadow .25s,border-color .25s,transform .25s; } .fh-review:hover{ border-color:rgba(4,16,124,.22);box-shadow:0 12px 28px rgba(4,16,124,.09); transform:translateY(-2px); } .fh-review-stars{color:var(--fh-amber);font-size:14px;letter-spacing:1px;line-height:1} .fh-review blockquote{ margin:0;color:var(--fh-muted);font-size:14.5px;line-height:1.65; /* Pushes the attribution to the bottom, so every card's footer aligns. */ flex:1 1 auto; } .fh-review figcaption{ display:flex;align-items:center;gap:11px; padding-top:14px;border-top:1px solid var(--fh-line); } .fh-review-avatar{ flex:0 0 40px;width:40px;height:40px;border-radius:var(--fh-radius); display:flex;align-items:center;justify-content:center; background:var(--fh-navy);color:#fff;font-weight:700;font-size:16px; } .fh-review-who{display:block;min-width:0} .fh-review-who b{display:block;font-size:14.5px;color:var(--fh-navy)} .fh-review-who small{ display:block;font-size:12.5px;color:var(--fh-muted); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } /* ============ Best-selling: card layout for small screens ============ The desktop table has six columns; below lg it is replaced by these, so the same data is readable without a sideways scroll. Built from s because the whole card is one and a block element inside an anchor is legal but these need no extra semantics. */ .fh-svc-cards{display:grid;gap:12px} @media (min-width:576px){ .fh-svc-cards{grid-template-columns:repeat(2,1fr)} } .fh-svc-card{ display:flex;flex-direction:column;gap:14px; padding:16px;border:1px solid var(--fh-line);border-radius:var(--fh-radius); background:#fff;color:inherit;text-decoration:none; transition:transform .2s,box-shadow .2s,border-color .2s; } .fh-svc-card:active{transform:scale(.99)} .fh-svc-card:hover{ border-color:rgba(4,16,124,.28);box-shadow:0 10px 26px rgba(4,16,124,.10); transform:translateY(-2px);color:inherit; } .fh-svc-top{display:flex;align-items:flex-start;gap:12px} .fh-svc-ic{ flex:0 0 42px;width:42px;height:42px;border-radius:var(--fh-radius); display:flex;align-items:center;justify-content:center;font-size:20px; background:var(--fh-soft);border:1px solid var(--fh-line); } .fh-svc-head{display:block;min-width:0} .fh-svc-head b{ /* Supplier names run long — clamp to two lines, then ellipsis. */ display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; font-size:14.5px;line-height:1.35;color:var(--fh-navy);font-weight:700; } .fh-svc-head small{display:block;color:var(--fh-muted);font-size:12px;margin-top:3px} .fh-svc-meta{ display:grid;grid-template-columns:repeat(3,1fr);gap:8px; padding:11px 0;border-top:1px solid var(--fh-line);border-bottom:1px solid var(--fh-line); } .fh-svc-meta > span{display:block;min-width:0} .fh-svc-meta small{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--fh-muted)} .fh-svc-meta b{display:block;font-size:14px;color:var(--fh-navy);margin-top:2px;white-space:nowrap; overflow:hidden;text-overflow:ellipsis} .fh-svc-meta .fh-svc-rate{color:var(--fh-amber-ink,#B45309);font-weight:800} /* Middle column centred, last right-aligned, so the three read as a row of figures rather than three left-flush blocks. */ .fh-svc-meta > span:nth-child(2){text-align:center} .fh-svc-meta > span:nth-child(3){text-align:right} .fh-svc-cta{ display:flex;align-items:center;justify-content:center;gap:7px; padding:10px 14px;border-radius:var(--fh-radius); background:var(--fh-navy);color:#fff;font-weight:700;font-size:13.5px; transition:background .2s; } .fh-svc-card:hover .fh-svc-cta{background:var(--fh-navy-3,#0A1170)} /* The running strip supplies the breathing room the padding used to. */ .fh-hero-home{padding-bottom:36px} /* Headline accent as a gradient rather than flat amber. background-clip:text needs a transparent fill, so the colour has to be cleared explicitly. */ .fh-slide h1 .text-amber,.fh-slide h2 .text-amber{ background:linear-gradient(100deg,#FCD34D 0%,var(--fh-amber) 42%,#FB7185 100%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } /* Stat tiles: a coloured hairline on top and a lift on hover, so the row reads as four cards rather than four grey boxes. */ .fh-hero-stat{position:relative;overflow:hidden;transition:transform .25s,border-color .25s,background .25s} .fh-hero-stat:before{ content:'';position:absolute;top:0;left:0;right:0;height:2px; background:linear-gradient(90deg,var(--fh-amber),#FB7185,#34D399,#38BDF8); opacity:.85; } .fh-hero-stat:hover{ transform:translateY(-3px); background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.3); } /* Blurring a layer this large is the one genuinely expensive thing here, so thin it out on phones and drop it entirely for anyone who asked for less motion. */ @media (max-width:767.98px){ .fh-aurora{opacity:.7} .fh-aurora .b4,.fh-aurora .b5{display:none} /* Phones are where the continuous animation costs most and the badges are least visible — the layer stays for depth, the movement stops. */ .fh-float,.fh-float i{animation:none} .fh-marquee{margin-top:40px} } @media (prefers-reduced-motion:reduce){ .fh-aurora span,.fh-float,.fh-float i,.fh-marquee-track, .fh-hero:before,.fh-hero:after{animation:none!important} .fh-floaters{opacity:.7} html{scroll-behavior:auto} } /* ============ Hero slider ============ */ .fh-slider{position:relative} .fh-slider .swiper{overflow:hidden} .fh-slide{min-height:330px;display:flex!important;flex-direction:column;justify-content:center} @media (max-width:991.98px){ .fh-slide{min-height:auto;padding-bottom:8px} } .fh-slide h1,.fh-slide h2{color:#fff;font-size:clamp(1.85rem,3.6vw,2.9rem);margin-bottom:14px;line-height:1.18} .fh-slide p{color:rgba(255,255,255,.86);font-size:17px;max-width:560px;margin-bottom:22px} /* Dots + arrows */ .fh-slider-nav{display:flex;align-items:center;gap:14px;margin-top:26px} /* Swiper's own pagination CSS forces width:100% and absolute positioning on the element it is bound to, which stretches the dots and shoves the next arrow to the far edge. Pin it back to an inline row. */ .fh-dots{ display:flex;gap:8px; position:static!important;width:auto!important;left:auto!important; bottom:auto!important;transform:none!important; } .fh-dots .swiper-pagination-bullet{ width:9px;height:9px;border-radius:5px;background:rgba(255,255,255,.35);opacity:1; transition:width .3s,background .3s;margin:0!important; } .fh-dots .swiper-pagination-bullet-active{width:30px;background:var(--fh-amber)} .fh-arrow{ width:38px;height:38px;border-radius:50%;flex:0 0 38px; border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08); color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer; transition:.2s;font-size:15px; } .fh-arrow:hover{background:var(--fh-amber);border-color:var(--fh-amber);color:var(--fh-navy)} /* Same controls on a light background (the platform carousel). */ .fh-arrow.dark{border-color:var(--fh-line);background:#fff;color:var(--fh-navy)} .fh-arrow.dark:hover{background:var(--fh-navy);border-color:var(--fh-navy);color:#fff} .fh-dots.dark .swiper-pagination-bullet{background:#cbd5e1} .fh-dots.dark .swiper-pagination-bullet-active{background:var(--fh-navy)} /* ============ Platform carousel ============ */ .fh-platform-slider .swiper{overflow:hidden;padding:6px 2px 2px} .fh-platform-slider .fh-slider-nav{justify-content:center} /* Equal-height cards regardless of how long a platform name wraps. */ .fh-platform-slider .swiper-slide{height:auto} .fh-platform-slider .swiper-slide .fh-platform{height:100%} /* ============ Hero auth card ============ */ .fh-auth-card{ background:#fff;border-radius:5px;padding:28px; box-shadow:0 30px 70px -28px rgba(2,10,90,.65); color:var(--fh-ink); } .fh-auth-card h3{font-size:20px;margin-bottom:4px} .fh-auth-card .sub{color:var(--fh-muted);font-size:13.5px;margin-bottom:20px} .fh-auth-card .form-group{margin-bottom:14px} .fh-auth-divider{ display:flex;align-items:center;gap:12px;margin:18px 0; color:var(--fh-muted);font-size:12.5px; } .fh-auth-divider:before,.fh-auth-divider:after{content:'';flex:1;height:1px;background:var(--fh-line)} .fh-google-btn{ display:flex;align-items:center;justify-content:center;gap:10px;width:100%; border:1px solid var(--fh-line);background:#fff;border-radius:5px; padding:11px 16px;font-weight:600;font-size:14.5px;color:var(--fh-ink)!important;transition:.2s; } .fh-google-btn:hover{border-color:var(--fh-navy);background:var(--fh-soft);color:var(--fh-navy)!important} .fh-auth-foot{text-align:center;font-size:13.5px;color:var(--fh-muted);margin:16px 0 0} /* Password reveal toggle */ .fh-pw{position:relative} .fh-pw .fh-input{padding-right:44px} .fh-pw button{ position:absolute;right:6px;top:50%;transform:translateY(-50%); border:0;background:transparent;color:var(--fh-muted);cursor:pointer; padding:6px 10px;font-size:15px;line-height:1; } .fh-pw button:hover{color:var(--fh-navy)} /* Logged-in variant of the hero card */ .fh-account-card .bal{ background:linear-gradient(135deg,var(--fh-navy),var(--fh-navy-2)); color:#fff;border-radius:var(--fh-radius);padding:16px 18px;margin-bottom:16px; } .fh-account-card .bal small{display:block;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.62)} .fh-account-card .bal b{display:block;font-size:27px;font-weight:800;line-height:1.25} /* ============ Trust strip under the hero ============ */ .fh-trust{ display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px; background:#fff;border:1px solid var(--fh-line);border-radius:var(--fh-radius); padding:20px;box-shadow:var(--fh-shadow);margin-top:-44px;position:relative;z-index:5; } .fh-trust-item{display:flex;gap:12px;align-items:center} .fh-trust-item .ic{ width:42px;height:42px;flex:0 0 42px;border-radius:5px; background:rgba(4,16,124,.08);color:var(--fh-navy); display:flex;align-items:center;justify-content:center;font-size:19px; } .fh-trust-item b{display:block;font-size:15px;line-height:1.3} .fh-trust-item small{color:var(--fh-muted);font-size:12.5px} /* ============ Section eyebrow + richer headings ============ */ .fh-eyebrow{ display:inline-flex;align-items:center;gap:7px; background:var(--td-amber-soft,#fef3c7);color:#92400e; padding:6px 16px;border-radius:5px;font-size:12.5px;font-weight:700; letter-spacing:.05em;text-transform:uppercase;margin-bottom:12px; } .fh-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--fh-amber)} /* Quick-order card floating in the hero */ .fh-hero-card{ background:#fff;border-radius:5px;padding:26px; box-shadow:0 30px 70px -28px rgba(2,10,90,.65); color:var(--fh-ink); } .fh-hero-card h3{font-size:19px;margin-bottom:4px} .fh-hero-card .sub{color:var(--fh-muted);font-size:13.5px;margin-bottom:18px} /* ============ Platform tiles ============ */ .fh-platform-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:16px} .fh-platform{ display:block;background:#fff;border:1px solid var(--fh-line);border-radius:var(--fh-radius); padding:22px 18px;text-align:center;transition:.25s;position:relative;overflow:hidden; } .fh-platform:before{ content:'';position:absolute;inset:0 0 auto;height:3px; background:var(--pf,var(--fh-navy));opacity:0;transition:.25s; } .fh-platform:hover{transform:translateY(-6px);box-shadow:var(--fh-shadow-lg);border-color:transparent} .fh-platform:hover:before{opacity:1} .fh-platform-icon{ width:56px;height:56px;border-radius:5px;margin:0 auto 12px; display:flex;align-items:center;justify-content:center;font-size:26px;color:#fff; background:var(--pf,var(--fh-navy));box-shadow:0 10px 22px -8px var(--pf,var(--fh-navy)); } .fh-platform.is-active{border-color:var(--pf,var(--fh-navy));box-shadow:var(--fh-shadow-lg)} .fh-platform.is-active:before{opacity:1} .fh-platform h6{margin:0 0 4px;font-size:15.5px;font-weight:700;color:var(--fh-ink)} .fh-platform small{color:var(--fh-muted);font-size:12.5px;display:block} .fh-platform .from{margin-top:8px;font-weight:800;color:var(--fh-navy);font-size:14px} /* ============ Price table ============ */ .fh-toolbar{ background:#fff;border:1px solid var(--fh-line);border-radius:var(--fh-radius); padding:16px;box-shadow:var(--fh-shadow);margin-bottom:22px; } .fh-chip-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin} .fh-chip{ display:inline-flex;align-items:center;gap:7px;white-space:nowrap; padding:8px 15px;border-radius:5px;font-size:13.5px;font-weight:600; border:1px solid var(--fh-line);background:#fff;color:var(--fh-ink)!important;transition:.2s; } .fh-chip:hover{border-color:var(--fh-navy);color:var(--fh-navy)!important} .fh-chip.active{background:var(--fh-navy);border-color:var(--fh-navy);color:#fff!important} .fh-table-wrap{ background:#fff;border:1px solid var(--fh-line);border-radius:var(--fh-radius); box-shadow:var(--fh-shadow);overflow:hidden; } /* The catalogue is wide; let the table scroll inside its own box rather than pushing the page sideways. Capped height keeps the header in view on the 1,000-row price list without the page growing to absurd length. */ .fh-table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch} .fh-table-scroll.is-tall{max-height:74vh;overflow-y:auto} .fh-table-scroll.is-tall thead th{position:sticky;top:0;z-index:3} /* Solid, not the translucent gradient — a sticky row must hide what scrolls under it. */ .fh-table-scroll.is-tall .fh-cat-row td{position:sticky;top:40px;z-index:2;background:#eef1ff} .fh-table{width:100%;border-collapse:collapse;min-width:820px;margin:0} .fh-table thead th{ background:var(--fh-soft);color:var(--fh-muted); font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase; padding:13px 16px;text-align:left;border-bottom:1px solid var(--fh-line);white-space:nowrap; } .fh-table tbody td{padding:14px 16px;border-bottom:1px solid #f1f5f9;font-size:14px;vertical-align:middle} .fh-table tbody tr:last-child td{border-bottom:0} .fh-table tbody tr:hover{background:#fafbff} .fh-table .fh-id{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;color:var(--fh-muted)} .fh-table .fh-name{font-weight:600;color:var(--fh-ink);max-width:460px;line-height:1.4} .fh-table .fh-rate{font-weight:800;color:var(--fh-navy);white-space:nowrap} .fh-table .fh-num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums} .fh-cat-row td{ background:linear-gradient(90deg,rgba(4,16,124,.055),transparent); font-weight:700;color:var(--fh-navy);font-size:13.5px; text-transform:none;letter-spacing:0;padding:11px 16px; } /* Capability pills (refill / cancel / drip) */ .fh-pill{ display:inline-flex;align-items:center;gap:4px; padding:3px 9px;border-radius:5px;font-size:11px;font-weight:700; background:var(--fh-soft);color:var(--fh-muted);border:1px solid var(--fh-line); } .fh-pill.on{background:#ecfdf5;color:#047857;border-color:#a7f3d0} .fh-pill.off{opacity:.5} /* ============ Empty state ============ */ .fh-empty{text-align:center;padding:64px 20px;color:var(--fh-muted)} .fh-empty i{font-size:52px;color:#cbd5e1;display:block;margin-bottom:14px} .fh-empty h5{color:var(--fh-ink);font-weight:700;margin-bottom:6px} /* ===================================================== Dashboard shell ===================================================== */ .fh-shell{display:flex;min-height:calc(100vh - 70px);background:var(--fh-soft)} .fh-side{ width:262px;flex:0 0 262px;background:#fff;border-right:1px solid var(--fh-line); padding:20px 14px 32px;position:sticky;top:0;height:100vh;overflow-y:auto; } .fh-side-brand{display:flex;align-items:center;gap:10px;padding:4px 8px 18px;text-decoration:none} .fh-side-brand .mark{ width:38px;height:38px;border-radius:5px;color:#fff;font-weight:800;font-size:18px; background:linear-gradient(135deg,var(--fh-navy),var(--fh-navy-2)); display:flex;align-items:center;justify-content:center; } .fh-side-brand .name{font-weight:800;font-size:18px;color:var(--fh-navy)} .fh-side-brand .name span{color:var(--fh-amber)} .fh-side-balance{ background:linear-gradient(135deg,var(--fh-navy) 0%,var(--fh-navy-2) 100%); border-radius:var(--fh-radius);padding:16px 18px;color:#fff;margin-bottom:18px; box-shadow:0 14px 30px -14px rgba(4,16,124,.7); } .fh-side-balance small{display:block;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;color:rgba(255,255,255,.62)} .fh-side-balance b{display:block;font-size:26px;font-weight:800;line-height:1.25;margin:2px 0 10px} .fh-side-balance .btn{width:100%} .fh-side-label{ font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase; color:#94a3b8;padding:16px 10px 7px; } .fh-side-nav{display:flex;flex-direction:column;gap:2px} .fh-side-nav a{ display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:5px; color:var(--fh-ink);font-weight:500;font-size:14.5px;transition:.16s; } .fh-side-nav a i{font-size:17px;width:20px;text-align:center;color:var(--fh-muted);transition:.16s} .fh-side-nav a:hover{background:var(--fh-soft);color:var(--fh-navy)} .fh-side-nav a:hover i{color:var(--fh-navy)} .fh-side-nav a.active{background:var(--fh-navy);color:#fff} .fh-side-nav a.active i{color:#fff} .fh-side-nav a .count{ margin-left:auto;background:var(--fh-amber);color:var(--fh-navy); font-size:11px;font-weight:800;border-radius:5px;padding:1px 8px; } .fh-main{flex:1;min-width:0;padding:26px 28px 60px} .fh-page-head{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-bottom:22px} .fh-page-head h1{font-size:25px;margin:0 0 3px} .fh-page-head p{margin:0;color:var(--fh-muted);font-size:14px} /* Mobile: sidebar becomes a slide-in drawer */ .fh-side-toggle{display:none} @media (max-width:991.98px){ .fh-side{ position:fixed;top:0;left:0;bottom:0;z-index:1080; transform:translateX(-100%);transition:transform .28s ease; box-shadow:20px 0 60px rgba(4,16,124,.18); } .fh-shell.open .fh-side{transform:translateX(0)} .fh-main{padding:18px 16px 60px} .fh-side-toggle{ display:inline-flex;align-items:center;justify-content:center;gap:8px; background:var(--fh-navy);color:#fff;border:0;border-radius:5px; padding:9px 16px;font-weight:600;font-size:14px;margin-bottom:16px; } .fh-side-scrim{ display:none;position:fixed;inset:0;background:rgba(2,10,90,.45);z-index:1070; } .fh-shell.open .fh-side-scrim{display:block} } /* ============ Stat cards ============ */ .fh-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));gap:16px;margin-bottom:24px} .fh-stat{ background:#fff;border:1px solid var(--fh-line);border-radius:var(--fh-radius); padding:18px 20px;box-shadow:var(--fh-shadow);position:relative;overflow:hidden; } .fh-stat .ic{ width:42px;height:42px;border-radius:5px;display:flex;align-items:center;justify-content:center; font-size:19px;margin-bottom:12px; } .fh-stat .ic.navy{background:rgba(4,16,124,.1);color:var(--fh-navy)} .fh-stat .ic.amber{background:rgba(245,158,11,.14);color:#b45309} .fh-stat .ic.green{background:#ecfdf5;color:#047857} .fh-stat .ic.red{background:#fef2f2;color:#b91c1c} .fh-stat .ic.slate{background:#f1f5f9;color:#475569} .fh-stat b{display:block;font-size:24px;font-weight:800;color:var(--fh-ink);line-height:1.2} .fh-stat span{font-size:12.5px;color:var(--fh-muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600} /* ============ Cards / panels ============ */ .fh-card{ background:#fff;border:1px solid var(--fh-line);border-radius:var(--fh-radius); box-shadow:var(--fh-shadow);margin-bottom:22px; } .fh-card-head{ display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap; padding:16px 20px;border-bottom:1px solid var(--fh-line); } .fh-card-head h5{margin:0;font-size:16px;font-weight:700} .fh-card-head p{margin:2px 0 0;font-size:13px;color:var(--fh-muted)} .fh-card-body{padding:20px} .fh-card-body.tight{padding:0} /* ============ Forms ============ */ .fh-label{display:block;font-weight:600;font-size:13.5px;color:var(--fh-ink);margin-bottom:6px} .fh-label .req{color:#ef4444} .fh-input,.fh-select,.fh-textarea{ width:100%;padding:11px 14px;border:1px solid var(--fh-line);border-radius:5px; font-size:14.5px;color:var(--fh-ink);background:#fff;transition:.18s;font-family:inherit; } /* Bootstrap's .input-group is a flex row that wraps, and it only un-wraps the controls it knows by name — .form-control and .form-select. An fh-input inside one keeps width:100% and drops onto its own line under the prefix, which is what "$" above the amount box was. */ .input-group > .fh-input, .input-group > .fh-select{flex:1 1 auto;width:1%;min-width:0} .fh-input:focus,.fh-select:focus,.fh-textarea:focus{ outline:0;border-color:var(--fh-navy);box-shadow:0 0 0 3px rgba(4,16,124,.1); } .fh-textarea{min-height:120px;resize:vertical} .fh-input::placeholder,.fh-textarea::placeholder{color:#9aa3b2;opacity:1} /* intl-tel-input wraps the field in its own container. These line the country selector up with the .fh-input box rather than Bootstrap's .form-control, which is the only reason the two look like one control. */ .iti--separate-dial-code .fh-input{border-top-left-radius:0;border-bottom-left-radius:0} .iti__country-container + .fh-input{padding-left:96px} .iti .iti__selected-country{ border:1px solid var(--fh-line);border-right:0;border-radius:5px 0 0 5px; background:var(--fh-soft); } .iti__country-list{border-radius:5px;font-size:14px} .fh-help{font-size:12.5px;color:var(--fh-muted);margin-top:5px} .fh-error{font-size:12.5px;color:#dc2626;margin-top:5px;font-weight:500} /* Live charge summary on the order form */ .fh-charge{ background:linear-gradient(135deg,#f8fafc,#eef2ff); border:1px dashed #c7d2fe;border-radius:var(--fh-radius);padding:16px 18px; } .fh-charge-row{display:flex;align-items:center;justify-content:space-between;font-size:14px;padding:4px 0;color:var(--fh-muted)} .fh-charge-row.total{ border-top:1px solid #c7d2fe;margin-top:8px;padding-top:11px; font-size:19px;font-weight:800;color:var(--fh-navy); } /* ============ Status badges ============ */ .fh-badge{ display:inline-flex;align-items:center;gap:5px; padding:4px 11px;border-radius:5px;font-size:12px;font-weight:700;white-space:nowrap; } .fh-badge-success{background:#ecfdf5;color:#047857} .fh-badge-warning{background:#fffbeb;color:#b45309} .fh-badge-info{background:#eff6ff;color:#1d4ed8} .fh-badge-danger{background:#fef2f2;color:#b91c1c} .fh-badge-secondary{background:#f1f5f9;color:#475569} /* ============ Progress ============ */ .fh-progress{height:7px;border-radius:5px;background:#e2e8f0;overflow:hidden} .fh-progress > span{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,var(--fh-navy),var(--fh-navy-2));transition:width .4s} .fh-progress.done > span{background:linear-gradient(90deg,#10b981,#34d399)} /* ============ Payment method picker ============ */ .fh-methods{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px} .fh-method{cursor:pointer;margin:0} .fh-method input{position:absolute;opacity:0;pointer-events:none} .fh-method-box{ /* display:block is load-bearing. This is a , and it holds a and a that are themselves block — an inline box split by block children renders as several broken border fragments instead of one card. */ display:block; border:2px solid var(--fh-line);border-radius:var(--fh-radius);padding:16px 14px; text-align:center;transition:.2s;height:100%;background:#fff; } .fh-method-box img{height:26px;width:auto;margin-bottom:9px;object-fit:contain} /* Card payments show the schemes (Visa/Mastercard/Amex) rather than the processor name — that is what customers actually recognise. */ .fh-method-logos{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;min-height:26px;margin-bottom:9px} .fh-method-logos img{height:22px;margin-bottom:0} .fh-method-box b{display:block;font-size:13.5px;color:var(--fh-ink)} .fh-method-box small{font-size:11.5px;color:var(--fh-muted)} .fh-method:hover .fh-method-box{border-color:#c7d2fe} .fh-method input:checked + .fh-method-box{ border-color:var(--fh-navy);background:#f5f7ff;box-shadow:0 0 0 3px rgba(4,16,124,.08); } /* Amount quick-picks */ .fh-amounts{display:flex;flex-wrap:wrap;gap:8px} .fh-amount{ border:1px solid var(--fh-line);background:#fff;border-radius:5px; padding:8px 16px;font-weight:700;font-size:14px;color:var(--fh-navy);cursor:pointer;transition:.18s; } .fh-amount:hover{border-color:var(--fh-navy);background:#f5f7ff} /* ============ Ledger rows ============ */ .fh-ledger{display:flex;align-items:center;gap:14px;padding:13px 20px;border-bottom:1px solid #f1f5f9} .fh-ledger:last-child{border-bottom:0} .fh-ledger .ic{ width:38px;height:38px;flex:0 0 38px;border-radius:5px; display:flex;align-items:center;justify-content:center;font-size:16px; } .fh-ledger .ic.credit{background:#ecfdf5;color:#047857} .fh-ledger .ic.debit{background:#fef2f2;color:#b91c1c} .fh-ledger .meta{flex:1;min-width:0} .fh-ledger .meta b{display:block;font-size:14px;font-weight:600;color:var(--fh-ink)} .fh-ledger .meta small{color:var(--fh-muted);font-size:12.5px} .fh-ledger .amt{font-weight:800;font-size:15px;white-space:nowrap;font-variant-numeric:tabular-nums} .fh-ledger .amt.credit{color:#047857} .fh-ledger .amt.debit{color:#b91c1c} /* ============ Copy-to-clipboard field ============ */ .fh-copy{display:flex;align-items:stretch;border:1px solid var(--fh-line);border-radius:5px;overflow:hidden;background:#fff} .fh-copy input{ flex:1;min-width:0;border:0;padding:11px 14px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:13.5px;color:var(--fh-ink);background:transparent; } .fh-copy input:focus{outline:0} .fh-copy button{border:0;border-left:1px solid var(--fh-line);background:var(--fh-soft);padding:0 18px;font-weight:600;color:var(--fh-navy);cursor:pointer;transition:.18s} .fh-copy button:hover{background:var(--fh-navy);color:#fff} /* ============ Steps (how it works) ============ */ .fh-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px} .fh-step{background:#fff;border:1px solid var(--fh-line);border-radius:var(--fh-radius);padding:26px 22px;position:relative;transition:.25s} .fh-step:hover{transform:translateY(-5px);box-shadow:var(--fh-shadow-lg)} .fh-step .n{ width:44px;height:44px;border-radius:5px;display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,var(--fh-navy),var(--fh-navy-2));color:#fff;font-weight:800;font-size:18px; margin-bottom:14px;box-shadow:0 10px 22px -10px var(--fh-navy); } .fh-step h5{font-size:16.5px;margin-bottom:6px} .fh-step p{color:var(--fh-muted);font-size:14px;margin:0} /* ============ Feature strip ============ */ .fh-features{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px} .fh-feature{display:flex;gap:14px;align-items:flex-start} .fh-feature .ic{ width:44px;height:44px;flex:0 0 44px;border-radius:5px; background:rgba(245,158,11,.14);color:#b45309; display:flex;align-items:center;justify-content:center;font-size:20px; } .fh-feature h6{margin:0 0 4px;font-size:15.5px;font-weight:700} .fh-feature p{margin:0;color:var(--fh-muted);font-size:13.5px;line-height:1.55} /* ============ Mass-order result rows ============ */ .fh-result{display:flex;gap:12px;padding:11px 16px;border-bottom:1px solid #f1f5f9;font-size:13.5px;align-items:flex-start} .fh-result:last-child{border-bottom:0} .fh-result .n{font-weight:700;color:var(--fh-muted);min-width:34px} .fh-result .in{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;color:var(--fh-muted);word-break:break-all} .fh-result.ok{background:#f6fefb} .fh-result.bad{background:#fffafa} /* ============ Auth split card ============ */ .fh-auth-aside{ background: radial-gradient(700px 320px at 20% 0%, rgba(245,158,11,.2), transparent 60%), linear-gradient(160deg,var(--fh-navy-3),var(--fh-navy) 60%,var(--fh-navy-2)); color:#fff;border-radius:var(--fh-radius);padding:36px 32px;height:100%; } .fh-auth-aside h3{color:#fff;font-size:23px} .fh-auth-aside li{display:flex;gap:11px;align-items:flex-start;margin-bottom:13px;color:rgba(255,255,255,.85);font-size:14.5px} .fh-auth-aside li i{color:#fcd34d;font-size:17px;margin-top:1px} @media (max-width:575.98px){ .fh-hero{padding:60px 0 78px} .fh-hero-stat{flex:1 1 calc(50% - 7px);min-width:0} .fh-stat b{font-size:21px} } /* ============ Tables on small screens ============ Seven columns cannot fit a 360px screen, and a sideways scroll is a scroll most people never discover. Below md every row becomes a card and every cell a label/value line. The labels come from each table's own , stamped onto the cells by partials/responsive-tables — doing it there rather than by hand means this works on all of them, including the admin tables, without touching 30 views and quietly missing one. A cell whose column has no heading (checkboxes, action buttons) gets no label and simply spans the card. This block lives at the very end of the file on purpose. It has to override the base table rules above — .fh-table carries min-width:820px so the catalogue can scroll sideways on a desktop — and equal-specificity rules are settled by source order. Sitting earlier, it lost, the cards stayed 820px wide, and every value was pushed off the right of the screen. */ @media (max-width:767.98px){ .fh-table,.fh-table tbody,.fh-table tr,.fh-table td, .table:not(.table-keep),.table:not(.table-keep) tbody, .table:not(.table-keep) tr,.table:not(.table-keep) td{ display:block;width:auto; } /* The whole point: without this the card is wider than the phone. */ .fh-table,.table:not(.table-keep){min-width:0;max-width:100%} .fh-table thead,.table:not(.table-keep) thead{display:none} /* The wrapper's border and shadow framed a table. Now that the rows are cards with their own borders, a box around them is one border too many. */ .fh-table-wrap{background:transparent;border:0;box-shadow:none;overflow:visible} .fh-table-scroll,.fh-table-scroll.is-tall{max-height:none;overflow:visible} .table-responsive{overflow:visible} /* Flex column rather than plain blocks purely so the title cell can be pulled to the top with order, wherever it sits in the markup. */ .fh-table tbody tr,.table:not(.table-keep) tbody tr{ display:flex;flex-direction:column; background:#fff;border:1px solid var(--fh-line);border-radius:var(--fh-radius); padding:12px 14px;margin-bottom:10px; } .fh-table tbody tr:hover{background:#fff} .fh-table td.fh-cell-full,.table td.fh-cell-full{ order:-1;padding:0 0 8px;border:0;text-align:left; font-size:14.5px;font-weight:700;line-height:1.35; } .fh-table td.fh-cell-full .fh-name{max-width:none;font-size:14.5px} .fh-table td.fh-cell-full a{color:var(--fh-navy)} .fh-table td.fh-cell-full small{display:block;font-weight:500;font-size:12px} /* Labelled cells: name on the left, value on the right. */ .fh-table td[data-label],.table:not(.table-keep) td[data-label]{ display:flex;align-items:baseline;justify-content:space-between;gap:14px; padding:5px 0;border:0;text-align:right; } .fh-table td[data-label]::before,.table:not(.table-keep) td[data-label]::before{ content:attr(data-label); flex:0 0 auto;text-align:left;white-space:nowrap; font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em; color:var(--fh-muted); } /* Unlabelled cells — the service name, the action button, a colspan banner — take the full width of the card. */ .fh-table td:not([data-label]),.table:not(.table-keep) td:not([data-label]){ padding:4px 0;border:0;text-align:left; } .fh-table td:not([data-label]) .btn, .table:not(.table-keep) td:not([data-label]) .btn{width:100%;margin-top:6px} .fh-table td[data-label] .btn{width:auto} /* Category banner rows inside the price list. */ .fh-table tr.fh-cat-row{ display:block;background:var(--fh-soft);padding:9px 14px; border-color:var(--fh-line); } .fh-table tr.fh-cat-row td{padding:0;text-align:left;background:none;position:static} /* Empty state keeps its own centred layout. */ .fh-table td .fh-empty{padding:22px 6px} /* Admin rows carry a checkbox in the first column; it should not sit alone on its own line above the record it selects. */ .table:not(.table-keep) td:has(> .row-check){ display:inline-block;width:auto;padding-right:10px; } } /* ============ How it works: step rail ============ A numbered rail rather than four stacked cards. The rail is drawn on the
  • as a pseudo-element rather than a border on the list, so the last step can stop the line at its own node instead of running past it. */ .fh-guide{list-style:none;margin:0;padding:0;counter-reset:fhstep} .fh-guide-step{position:relative;display:flex;gap:20px;padding-bottom:34px} .fh-guide-step:last-child{padding-bottom:0} .fh-guide-step::before{ content:'';position:absolute;left:27px;top:56px;bottom:0;width:2px; background:linear-gradient(180deg,var(--fh-line),rgba(4,16,124,.06)); } .fh-guide-step:last-child::before{display:none} .fh-guide-node{ position:relative;z-index:1;flex:0 0 56px;width:56px;height:56px; display:flex;align-items:center;justify-content:center; border-radius:var(--fh-radius);color:#fff;font-size:22px; background:linear-gradient(135deg,var(--fh-navy),var(--fh-navy-2)); box-shadow:0 10px 24px rgba(4,16,124,.24); } .fh-guide-node b{ position:absolute;right:-7px;top:-7px; width:24px;height:24px;border-radius:50%; display:flex;align-items:center;justify-content:center; background:var(--fh-amber);color:var(--fh-navy); font-size:12px;font-weight:800;border:2px solid #fff; } .fh-guide-body{flex:1 1 auto;min-width:0;padding-top:2px} .fh-guide-body h3{font-size:19px;margin:0 0 8px;color:var(--fh-navy)} .fh-guide-body > p{color:var(--fh-muted);margin:0;line-height:1.7} /* The little screenshots-in-CSS beside each step. */ .fh-guide-visual{margin-top:16px} .fh-mock{ display:flex;flex-direction:column;gap:8px; padding:16px;border:1px solid var(--fh-line);border-radius:var(--fh-radius); background:var(--fh-soft);max-width:420px; } .fh-mock-btn{ display:flex;align-items:center;justify-content:center;gap:8px; padding:9px 14px;border-radius:var(--fh-radius); font-size:13px;font-weight:700; } .fh-mock-btn.google{background:#fff;border:1px solid var(--fh-line);color:var(--fh-ink)} .fh-mock-btn.amber{background:var(--fh-amber);color:var(--fh-navy)} .fh-mock-or{text-align:center;font-size:11px;color:var(--fh-muted);text-transform:uppercase;letter-spacing:.08em} .fh-mock-field{ padding:9px 12px;border-radius:var(--fh-radius); background:#fff;border:1px solid var(--fh-line); font-size:13px;color:var(--fh-muted); } .fh-mock-pay{flex-direction:row;align-items:center;flex-wrap:wrap;gap:10px} .fh-mock-amount{font-size:20px;font-weight:800;color:var(--fh-navy)} .fh-mock-amount.alt{color:var(--fh-amber-ink,#B45309)} .fh-mock-pay > i{color:var(--fh-muted)} .fh-mock-logos{display:flex;align-items:center;gap:10px;flex-wrap:wrap;width:100%} .fh-mock-logos img{height:18px} .fh-mock-row{display:flex;align-items:baseline;justify-content:space-between;gap:14px} .fh-mock-row small{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--fh-muted)} .fh-mock-row b{font-size:13.5px;color:var(--fh-navy);text-align:right;min-width:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .fh-mock-row.total{border-top:1px solid var(--fh-line);padding-top:9px;margin-top:2px} .fh-mock-row.total b{font-size:17px;font-weight:800} .fh-mock-bar{display:block;height:8px;border-radius:5px;background:#e2e8f0;overflow:hidden} .fh-mock-bar i{display:block;height:100%;border-radius:5px; background:linear-gradient(90deg,var(--fh-navy),#3b82f6)} .fh-mock-status{ align-self:flex-start;padding:4px 12px;border-radius:var(--fh-radius); background:rgba(59,130,246,.14);color:#1d4ed8;font-size:12px;font-weight:700; } /* ============ How it works: order flow ============ */ .fh-flow{display:flex;flex-direction:column;gap:22px} .fh-flow-main,.fh-flow-branch{display:flex;align-items:stretch;flex-wrap:wrap;gap:10px} .fh-flow-branches{display:grid;gap:14px} @media (min-width:992px){ .fh-flow-branches{grid-template-columns:repeat(3,1fr)} } .fh-flow-node{ flex:1 1 190px;display:flex;flex-direction:column;gap:2px; padding:14px 16px;border-radius:var(--fh-radius); background:#fff;border:1px solid var(--fh-line); font-size:14px;font-weight:700;color:var(--fh-navy); } .fh-flow-node i{font-size:18px;margin-bottom:4px;color:var(--fh-navy)} .fh-flow-node small{font-size:12px;font-weight:500;color:var(--fh-muted);line-height:1.45} .fh-flow-node.start{border-color:rgba(4,16,124,.3)} .fh-flow-node.done i{color:#059669} .fh-flow-node.done {border-color:rgba(5,150,105,.35);background:rgba(16,185,129,.06)} .fh-flow-node.warn i{color:#d97706} .fh-flow-node.bad i{color:#dc2626} .fh-flow-node.info i{color:#2563eb} .fh-flow-node.money {border-color:rgba(245,158,11,.45);background:rgba(245,158,11,.08)} .fh-flow-node.money i{color:#B45309} /* The connector. A chevron drawn from borders, rotated — it points right in a row and down once the row wraps to a stack. */ .fh-flow-arrow{ flex:0 0 22px;align-self:center; width:22px;height:22px;display:flex;align-items:center;justify-content:center; } .fh-flow-arrow::after{ content:'';width:9px;height:9px; border-right:2px solid var(--fh-line);border-bottom:2px solid var(--fh-line); transform:rotate(-45deg); } @media (max-width:767.98px){ .fh-flow-main,.fh-flow-branch{flex-direction:column;gap:8px} .fh-flow-arrow{align-self:center;height:18px} .fh-flow-arrow::after{transform:rotate(45deg)} } .fh-flow-note{ display:flex;gap:10px;align-items:flex-start;margin:0; padding:14px 16px;border-radius:var(--fh-radius); background:#fff;border:1px dashed var(--fh-line); font-size:13.5px;color:var(--fh-muted);line-height:1.65; } .fh-flow-note i{color:#059669;font-size:17px;margin-top:1px} @media (max-width:575.98px){ .fh-guide-step{gap:14px} .fh-guide-step::before{left:23px} .fh-guide-node{flex:0 0 48px;width:48px;height:48px;font-size:19px} .fh-guide-body h3{font-size:17px} } /* ============ Portal top bar ============ The same bar Tech Designer's admin uses: sticky white strip, menu toggle, search, then the account controls on the right. It is a child of .fh-main, so the padding moves off .fh-main and onto .fh-main-inner — otherwise the bar would sit inset from the edges and the sticky white strip would show the page scrolling past on either side. */ /* Scoped to the shell that actually has a top bar. Stripping the padding from every .fh-main put the customer dashboard's content hard against the sidebar — that layout has no .fh-main-inner to move the padding onto. */ .fh-main.has-topbar{padding:0} .fh-main-inner{padding:26px 28px 60px} .fh-topbar{ position:sticky;top:0;z-index:1020; display:flex;align-items:center;gap:10px; height:64px;padding:0 24px; background:#fff;border-bottom:1px solid var(--fh-line); box-shadow:0 1px 2px rgba(4,16,124,.05); } .fh-toggler{ display:none;background:none;border:0;font-size:23px; color:var(--fh-navy);cursor:pointer;padding:0;margin-right:6px; } .fh-topsearch{flex:1 1 auto;max-width:380px;position:relative} .fh-topsearch input{ width:100%;height:40px;padding:0 14px 0 38px; border:1px solid var(--fh-line);border-radius:var(--fh-radius); background:var(--fh-soft);font-size:14px;outline:0;font-family:inherit; } .fh-topsearch input:focus{ border-color:var(--fh-navy);background:#fff; box-shadow:0 0 0 3px rgba(4,16,124,.08); } .fh-topsearch i{position:absolute;left:13px;top:11px;color:var(--fh-muted);font-size:17px} .fh-topbar-end{margin-left:auto;display:flex;align-items:center;gap:8px} .fh-icon-btn{ width:40px;height:40px;border-radius:var(--fh-radius);border:0;background:transparent; display:inline-flex;align-items:center;justify-content:center; color:var(--fh-ink);font-size:18px;position:relative;cursor:pointer; transition:background .15s,color .15s;text-decoration:none; } .fh-icon-btn:hover{background:var(--fh-soft);color:var(--fh-navy)} .fh-icon-btn .badge{ position:absolute;top:3px;right:3px; font-size:10px;padding:2px 5px;line-height:1;border-radius:10px; background:#dc2626;color:#fff; } .fh-user{ display:flex;align-items:center;gap:9px; padding:5px 10px 5px 5px;border:0;background:transparent; border-radius:var(--fh-radius);cursor:pointer; } .fh-user:hover{background:var(--fh-soft)} .fh-user .avatar{ width:34px;height:34px;border-radius:50%;flex:0 0 34px; display:flex;align-items:center;justify-content:center; background:var(--fh-navy);color:#fff;font-weight:700;font-size:15px; } .fh-user .meta{line-height:1.2;text-align:left} .fh-user .meta strong{display:block;font-size:13px;color:var(--fh-ink)} .fh-user .meta span{font-size:11px;color:var(--fh-muted)} .fh-user.dropdown-toggle::after{margin-left:2px;color:var(--fh-muted)} .fh-topbar .fh-balance-chip{margin:0} .fh-topbar .fh-currency-toggle{min-height:40px} @media (max-width:991.98px){ .fh-toggler{display:inline-flex} .fh-topbar{padding:0 14px} /* The sidebar has its own toggle inside the drawer; this one replaces the old standalone button that used to sit above the page content. */ .fh-side-toggle{display:none!important} } @media (max-width:767.98px){ .fh-topsearch{display:none} .fh-main-inner{padding:18px 16px 60px} } @media (max-width:575.98px){ .fh-topbar{gap:6px} .fh-topbar .fh-icon-btn{width:36px} } /* The compact currency control in the mobile icon strip. Wider than the 40px icons beside it because it carries a flag and a three-letter code, but the same height so the row stays level. White rather than filled: it is a selector showing the current state, not an action, and the two filled icons next to it are the actions. */ .td-mobile-currency{ width:auto!important;gap:6px;padding:0 12px; background:#fff;color:var(--fh-navy);border:1px solid var(--fh-line); font-size:12.5px;font-weight:700;letter-spacing:.02em; } .td-mobile-currency:hover,.td-mobile-currency:focus, .td-mobile-currency[aria-expanded="true"]{ background:#fff;color:var(--fh-navy);border-color:var(--fh-navy); } .td-mobile-currency .code{line-height:1} .td-mobile-currency::after{display:none} /* ============ Scrollbars ============ Thin, in the brand navy, everywhere — the page, the sidebar, the currency menu, the table scrollers. Both syntaxes are needed and they are not interchangeable: Firefox reads scrollbar-width/scrollbar-color, WebKit and Blink read ::-webkit-scrollbar and ignore the standard properties. The elements that deliberately hide their scrollbar (the policy pill row, the chip rows) set their own rules on a more specific selector, so they are unaffected. */ /* scrollbar-width has to be set on every element, not just html. scrollbar-COLOR inherits; scrollbar-WIDTH does not. Setting only the pair on tinted every scrollbar on the page navy while leaving them all at the native width — and worse, in current Chrome the mere presence of scrollbar-color makes it ignore the ::-webkit-scrollbar rules below, so the fallback could not narrow them either. Both properties, universal selector. */ html,body,*{ scrollbar-width:thin; scrollbar-color:rgba(4,16,124,.45) transparent; } *::-webkit-scrollbar{width:6px;height:6px} *::-webkit-scrollbar-track{background:transparent} *::-webkit-scrollbar-thumb{ background:rgba(4,16,124,.35); border-radius:5px; } *::-webkit-scrollbar-thumb:hover{background:rgba(4,16,124,.6)} /* The corner where a horizontal and a vertical bar meet, otherwise a grey box. */ *::-webkit-scrollbar-corner{background:transparent} /* Plain tick list used on the About page's do / don't columns. */ .fh-list{list-style:none;margin:0;padding:0} .fh-list li{ position:relative;padding:0 0 11px 22px; color:var(--fh-muted);font-size:14.5px;line-height:1.65; } .fh-list li:last-child{padding-bottom:0} .fh-list li::before{ content:'';position:absolute;left:2px;top:9px; width:6px;height:6px;border-radius:50%;background:var(--fh-amber); } /* ============ Sidebar brand ============ Pinned to the top of the sidebar and lined up with the top bar: same 64px height, same bottom border, so the two read as one continuous strip across the window instead of the logo drifting up as the nav scrolls. The sidebar's own padding moves onto the nav below it — with padding on the sidebar the sticky brand would stop 20px down and the nav would scroll visibly through the gap above it. */ .fh-side{padding:0 0 32px} .fh-side-brand{ position:sticky;top:0;z-index:2; height:64px;padding:0 16px;margin-bottom:14px; background:#fff;border-bottom:1px solid var(--fh-line); } .fh-side-label,.fh-side-nav,.fh-side-balance{margin-left:14px;margin-right:14px} /* ============ "How we work" cards ============ A fixed three-column grid rather than the auto-fit .fh-features list, which laid six items out five-across and left one orphan on a second row in columns too narrow to read. */ .fh-why{display:grid;gap:18px;grid-template-columns:1fr} @media (min-width:576px){ .fh-why{grid-template-columns:repeat(2,1fr)} } @media (min-width:992px){ .fh-why{grid-template-columns:repeat(3,1fr)} } .fh-why-card{ background:#fff;border:1px solid var(--fh-line);border-radius:var(--fh-radius); padding:24px 22px; transition:transform .22s,box-shadow .22s,border-color .22s; } .fh-why-card:hover{ transform:translateY(-3px);border-color:rgba(4,16,124,.22); box-shadow:0 14px 32px rgba(4,16,124,.10); } .fh-why-card .ic{ width:46px;height:46px;border-radius:var(--fh-radius); display:flex;align-items:center;justify-content:center;font-size:21px; background:rgba(4,16,124,.07);color:var(--fh-navy);margin-bottom:15px; } .fh-why-card:nth-child(3n-1) .ic{background:rgba(245,158,11,.15);color:#B45309} .fh-why-card:nth-child(3n) .ic{background:rgba(16,185,129,.13);color:#047857} .fh-why-card h5{font-size:17px;margin:0 0 8px;color:var(--fh-navy)} .fh-why-card p{margin:0;color:var(--fh-muted);font-size:14.5px;line-height:1.7} /* Logout row in the sidebar. A class, not an inline "all:unset" blob — that reset box-sizing to content-box as well, so width:100% plus the padding overflowed the sidebar and gave it a horizontal scrollbar. */ .fh-side-logout{ display:flex;align-items:center;gap:11px;width:100%;box-sizing:border-box; padding:10px 12px;border:0;border-radius:var(--fh-radius); background:transparent;color:#b91c1c; font:inherit;font-weight:500;font-size:14.5px;text-align:left;cursor:pointer; } .fh-side-logout:hover{background:rgba(220,38,38,.08)} .fh-side-logout i{font-size:17px;width:20px;text-align:center;flex:0 0 20px} /* Nothing in the sidebar may push it sideways. Any child that overflows should be fixed at the source, but the sidebar itself is not a horizontal scroller. */ .fh-side{overflow-x:hidden} .fh-side-nav a{min-width:0} /* The customer sidebar has no brand of its own — it sits under the public header — so it needs the top padding back that the sticky admin brand otherwise provided. */ .fh-side.is-under-header{padding-top:18px} /* ============ Customer page header ============ Same navy panel the admin pages use. Restyled here rather than swapping the markup in fifteen views: every customer page already renders .fh-page-head with a title, a sub-line and optional actions, which is exactly the shape the admin component produces. */ .fh-page-head{ position:relative;overflow:hidden; display:flex;justify-content:space-between;align-items:center; flex-wrap:wrap;gap:14px; padding:24px 28px;margin-bottom:24px;border-radius:var(--fh-radius); background:linear-gradient(135deg,var(--fh-navy) 0%,var(--fh-navy-2) 100%); color:#fff;box-shadow:0 8px 24px rgba(4,16,124,.18); } .fh-page-head::before{ content:"";position:absolute;width:280px;height:280px;border-radius:50%; top:-120px;right:-60px;pointer-events:none; background:radial-gradient(circle,rgba(245,158,11,.2) 0%,transparent 70%); } .fh-page-head::after{ content:"";position:absolute;width:200px;height:200px;border-radius:50%; bottom:-100px;left:30%;pointer-events:none; background:radial-gradient(circle,rgba(255,255,255,.06) 0%,transparent 70%); } .fh-page-head > *{position:relative;z-index:2;min-width:0} .fh-page-head h1{font-size:24px;font-weight:700;margin:0 0 5px;color:#fff;letter-spacing:-.2px;line-height:1.2} .fh-page-head p{margin:0;color:rgba(255,255,255,.75);font-size:13.5px} /* Buttons sitting on the navy: outline styles built for a white background would be invisible here. */ .fh-page-head .btn{ background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.35); font-weight:600; } .fh-page-head .btn:hover{background:#fff;color:var(--fh-navy);border-color:#fff} .fh-page-head .btn-amber{background:var(--fh-amber);color:var(--fh-navy);border-color:var(--fh-amber)} .fh-page-head .btn-amber:hover{background:#fff;border-color:#fff} @media (max-width:575.98px){ .fh-page-head{padding:18px 18px;gap:10px} .fh-page-head h1{font-size:20px} } /* ============ Searchable select ============ The native