/* ========================================================================== TALENT EXPERT — Shared Design System Bridging Rural Talent with Business Growth Brand palette: Orange #F26F21 · Charcoal #1A1A1A · Grey #8C8C8C (no navy) ========================================================================== */ *,*::before,*::after{margin:0;padding:0;box-sizing:border-box} :root{ /* ===== Official Talent Expert palette — Orange + Charcoal + Grey only ===== */ /* Surfaces */ --paper:#FFFFFF; --paper2:#F4F2F0; --mist:#F4F2F0; --orange-wash:#FDEDE1; /* Ink (charcoal / grey) */ --ink:#1A1A1A; --ink2:#4A4A4A; --ink3:#8C8C8C; --hair:rgba(26,26,26,.10); /* Brand */ --orange:#F26F21; --orange-soft:#F9A56A; --orange-t:rgba(242,111,33,.10); --orange-t2:rgba(242,111,33,.16); --charcoal:#1A1A1A; --charcoal-soft:#4A4A4A; --grey:#8C8C8C; /* legacy aliases → remapped to new palette so existing markup restyles automatically (NO navy) */ --blue:#1A1A1A; --blue-soft:#4A4A4A; --blue-t:rgba(26,26,26,.07); --steel:#8C8C8C; --steel-t:rgba(140,140,140,.14); --green:#8C8C8C; --green-t:rgba(140,140,140,.12); --amber:#F26F21; /* Portal accents (set per ) */ --accent:var(--orange); --accent-t:var(--orange-t); --accent-t2:var(--orange-t2); /* Glass */ --glass:rgba(255,255,255,.55); --glass2:rgba(255,255,255,.72); /* Shadow */ --sh-s:0 10px 30px -18px rgba(36,48,64,.28); --sh-m:0 26px 60px -34px rgba(36,48,64,.40); /* Radius / layout */ --r:20px; --r-lg:28px; --r-xl:36px; --maxw:1340px; --ease:cubic-bezier(.22,.61,.36,1); } /* Portal theming */ body[data-portal="employer"]{--accent:var(--blue);--accent-t:var(--blue-t);--accent-t2:rgba(26,60,107,.18)} body[data-portal="seeker"]{--accent:var(--orange);--accent-t:var(--orange-t);--accent-t2:var(--orange-t2)} /* scroll-behavior:auto (NOT smooth): a native smooth-scroll to a #hash animates the browser THROUGH every pinned storytelling section (esp. on cross-page load before Lenis initialises) = rapid animation playback. All anchor nav goes through main.js's instant jump (Lenis immediate / instant window.scrollTo) instead. */ html{scroll-behavior:auto;font-size:16px; /* One flat milky-white canvas site-wide — a clean editorial surface with only the faintest warmth (no gradient, no beige/yellow cast). Cards/shadows/accents are unchanged. */ background:#FCFCFA; /* Always reserve the scrollbar's space so locking scroll (overflow:hidden) when a modal opens never removes it — no horizontal shift of content or the fixed navbar, no scrollbar flicker. (macOS/iOS use overlay scrollbars with zero width, so this is a no-op there.) */ scrollbar-gutter:stable} body{font-family:'Inter',sans-serif;color:var(--ink2);background:transparent;line-height:1.72;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden} /* Pin wrappers (JS injects them into pinned chapters). Structure: .te-fit-outer > .te-fit > [ heading (fixed) ] [ .te-scroll-win > .te-scroll-inner (scrolls) ] Nothing is ever scaled — for tall chapters the heading stays put and .te-scroll-inner translates up inside the clipped .te-scroll-win, revealing the lower content (Apple-style sticky heading). */ .te-fit-outer{ width:100%; flex-shrink:0; } .te-fit{ width:100%; } /* the fixed heading wrapper mimics .wrap so the title keeps its original centring + side padding */ .te-head{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 26px; box-sizing:border-box; } .te-scroll-win{ width:100%; } /* JS sets a fixed height + overflow:hidden when the content is taller */ .te-scroll-inner{ width:100%; will-change:transform; } /* Inside the scroll window the content grids centre themselves (their own max-width + margin:auto), so a wrapping .wrap must NOT re-constrain them asymmetrically — otherwise a grid wider than the wrap's content box gets pushed off-centre. Let the grids own the centring for symmetric margins. */ .te-scroll-inner > .wrap, .te-scroll-inner .wrap{ max-width:none; width:100%; padding-left:0; padding-right:0; margin-left:auto; margin-right:auto; } /* ---- NATIVE STICKY chapter pin (JS injects .te-stick and adds .te-sticky) ---- The chapter rests via the browser's own position:sticky — handled on the compositor, so it eases to a stop and releases with NO snap (a JS pin freezes instantly, which is felt as a hard "fast lock"). The section becomes a plain tall block that gives the sticky child room; the child carries the chapter's real layout (flex + navbar-clearance padding, set inline). */ /* A chapter declared `collapse:true` carries less than a screen of content (JS adds .te-short): drop the forced full-screen height so the content isn't stranded in a sea of blank. Such a chapter also skips the pin — a pinned section always leaves its own leftover area on screen, so short + pinned inevitably means blank. Zero-blank and pinned are mutually exclusive here. */ .te-short{ min-height:0 !important; } .te-sticky{ display:block !important; min-height:0 !important; padding-top:0 !important; padding-bottom:0 !important; /* the section is now 100vh + hold tall — its background moves to .te-stick (one screen) so a coloured chapter never paints a tall empty band behind the hold distance */ background:none !important; } .te-sticky > .te-stick{ position:-webkit-sticky; position:sticky; top:0; min-height:100vh; box-sizing:border-box; width:100%; } /* Anti-FOUT: hold the page hidden until the web fonts have rendered, then show the fully styled page INSTANTLY (no fade) — so a hard refresh never shows the fallback font first (an inline script toggles html.fonts-loading and removes it on document.fonts.ready, with a timeout fallback so the page always reveals even if fonts fail to load). The gate is kept to prevent a font flash, but it pops in with no fade-in animation. */ html.fonts-loading body{opacity:0} body{transition:none} h1,h2,h3,h4,h5{font-family:'Plus Jakarta Sans',sans-serif;color:var(--ink);line-height:1.08;font-weight:300;letter-spacing:-.01em;text-wrap:balance;hyphens:none;overflow-wrap:break-word} a{text-decoration:none;color:inherit} img,svg{max-width:100%;display:block} ul{list-style:none} strong,b{color:var(--ink);font-weight:600} /* Typographic rhythm: comfortable measure, no orphans, no hyphenation */ p{text-wrap:pretty;hyphens:none;max-width:68ch} li{text-wrap:pretty} .lead{text-wrap:balance;hyphens:none} .sec-head.center p,.sec-head.center .lead{margin-left:auto;margin-right:auto} /* keep meaningful phrases intact */ .nb{white-space:nowrap} ::selection{background:var(--accent-t2);color:var(--ink)} :focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px} /* ---- Scroll-linked progress indicator (top hairline, fills with scroll) ---- */ .scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:200;pointer-events:none} .scroll-progress span{display:block;height:100%;transform-origin:0 50%;transform:scaleX(var(--sp,0)); background:linear-gradient(90deg,var(--orange),var(--orange-soft))} /* ---- Lenis smooth scroll (recommended housekeeping; inert on pages without Lenis) ---- */ html.lenis,html.lenis body{height:auto} .lenis.lenis-smooth{scroll-behavior:auto !important} .lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain} /* NB: no `.lenis-stopped{overflow:hidden}` — that hid the scrollbar whenever a custom dropdown pins the page (lenis.stop), shifting the layout ("shake"). Lenis still blocks wheel/touch while stopped, so the page stays pinned. */ /* Global cursor spotlight: REMOVED site-wide (was .cursor-glow, injected by main.js). */ .wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px} .section{padding:104px 0;position:relative} .section.tight{padding:72px 0} .section.alt{background:var(--paper2)} .eyebrow{font-family:'Inter';font-size:12.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);display:inline-flex;align-items:center;gap:11px;margin-bottom:20px} .eyebrow::before{content:"";width:24px;height:1.5px;background:var(--accent);border-radius:2px} /* Global heading scale — Business Owners hero is the master reference: confident Fraunces (weight 400 base, 600 emphasis), editorial size (not oversized/thin), balanced wrapping. */ .display{font-size:clamp(1.95rem,4.6vw,3.7rem);font-weight:600;line-height:1.07;letter-spacing:-.022em;color:var(--ink);overflow-wrap:break-word;text-wrap:balance} .display em{font-style:normal;font-weight:800;color:var(--ink)} h2.title{font-size:clamp(1.6rem,3.4vw,2.8rem);font-weight:600;line-height:1.12;letter-spacing:-.017em;overflow-wrap:break-word;text-wrap:balance} h2.title b{font-weight:800;color:var(--ink)} h2.title em{font-style:italic;font-weight:400;color:var(--ink)} .lead{font-size:clamp(1.02rem,1.4vw,1.18rem);color:var(--ink2);max-width:58ch} .sec-head{max-width:760px;margin-bottom:52px} .sec-head.center{margin-left:auto;margin-right:auto;text-align:center} .sec-head.center .eyebrow{justify-content:center} .sec-head.center .lead{margin-left:auto;margin-right:auto} /* form-intro line on ONE centred line: widen the sec-head + lift the 58ch cap (wraps on mobile). margin-top adds clear breathing room between the heading and this intro line. */ .sec-head.center .lead.lead-wide{ max-width:none; margin-top:26px; } @media(min-width:901px){ body[data-page="employers"] #contact .sec-head, body[data-page="job-seekers"] #register .sec-head{ max-width:1040px; } .sec-head.center .lead.lead-wide{ white-space:nowrap; font-size:1rem; } } .mark{position:relative;white-space:nowrap;color:var(--accent);font-weight:500} .mark svg{position:absolute;left:-2%;bottom:-10px;width:104%;height:14px;stroke:var(--accent);fill:none;stroke-width:3;stroke-linecap:round;stroke-dasharray:400;stroke-dashoffset:400;animation:draw 1.2s .5s var(--ease) forwards} @keyframes draw{to{stroke-dashoffset:0}} /* Icon system */ .ic{width:1em;height:1em;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;display:block} .chip{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;font-size:28px;flex:none} .chip.o{background:var(--orange-t);color:var(--orange)} .chip.b{background:var(--blue-t);color:var(--blue)} .chip.g{background:var(--steel-t);color:var(--steel)} .chip.a{background:rgba(207,131,49,.14);color:var(--amber)} /* Buttons */ .btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:.96rem;padding:14px 26px;border-radius:100px;cursor:pointer;transition:transform .4s var(--ease),box-shadow .4s var(--ease),background .3s;border:1px solid transparent;font-family:inherit} .btn .ic{width:18px;height:18px;transition:transform .4s var(--ease)} .btn:hover .ic{transform:translateX(4px)} .btn-orange{background:var(--orange);color:#fff;box-shadow:0 14px 30px -14px rgba(232,119,34,.6)} .btn-orange:hover{transform:translateY(-2px);box-shadow:0 20px 40px -14px rgba(232,119,34,.7)} .btn-blue{background:var(--blue);color:#fff;box-shadow:0 14px 30px -14px rgba(26,60,107,.6)} .btn-blue:hover{transform:translateY(-2px);box-shadow:0 20px 40px -14px rgba(26,60,107,.7)} .btn-accent{background:var(--accent);color:#fff;box-shadow:0 14px 30px -14px rgba(0,0,0,.35)} .btn-accent:hover{transform:translateY(-2px)} .btn-ghost{background:var(--glass);color:var(--ink);border-color:var(--hair);backdrop-filter:blur(10px)} .btn-ghost:hover{transform:translateY(-2px);background:var(--glass2)} .btn-white{background:#fff;color:var(--ink)} .btn-white:hover{transform:translateY(-2px)} .btn.lg{padding:16px 30px;font-size:1rem} /* ============ NAV + MEGA MENU ============ */ /* Full-width frosted "veil" pinned flush to the very top of the viewport, sitting just BEHIND the floating pill (z:99 < nav z:100). It seals the open band above/around the pill so page content fades out as it approaches the top instead of blinking through the gap. Masked to fade to nothing at its lower edge (no hard seam). Pure CSS → every page. */ body::before{content:"";position:fixed;top:0;left:0;right:0;height:96px;z-index:99;pointer-events:none; background:linear-gradient(to bottom,rgba(252,251,249,.82) 0%,rgba(252,251,249,.58) 44%,rgba(252,251,249,0) 100%); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 54%,transparent 100%); mask-image:linear-gradient(to bottom,#000 0%,#000 54%,transparent 100%)} /* Centred on the pixel grid via auto margins (NOT translateX(-50%), whose half-width offset lands on a fractional pixel and makes the pill's backdrop-filter bleed/flicker on scroll). */ header.nav{position:fixed;top:16px;left:0;right:0;margin-left:auto;margin-right:auto;z-index:100;width:calc(100% - 34px);max-width:var(--maxw);transition:top .4s var(--ease)} .nav-inner{display:flex;align-items:center;justify-content:space-between;padding:10px 12px 10px 20px;border-radius:100px;background:var(--glass);backdrop-filter:blur(18px) saturate(1.4);border:1px solid rgba(255,255,255,.6);box-shadow:var(--sh-s)} .nav.scrolled .nav-inner{background:var(--glass2)} .nav-logo img{height:40px;width:auto} .nav-menu{display:flex;gap:2px;align-items:center} .nav-item{position:relative} .nav-item>a{display:inline-flex;align-items:center;gap:6px;font-size:.92rem;font-weight:600;color:var(--ink2);padding:9px 15px;border-radius:100px;transition:.3s;cursor:pointer} .nav-item>a:hover,.nav-item>a[aria-current="page"]{color:var(--ink);background:rgba(255,255,255,.6)} .nav-item>a .caret{width:13px;height:13px;transition:transform .3s} .nav-item:hover>a .caret{transform:rotate(180deg)} /* Mega panel */ .mega{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%) translateY(8px);min-width:520px;background:#fdfcfa;border:1px solid var(--hair);border-radius:var(--r-lg);box-shadow:var(--sh-m);padding:18px;opacity:0;visibility:hidden;transition:none;display:grid;grid-template-columns:1fr 1fr;gap:8px} /* invisible hover bridge — fills the gap between the nav link and the panel so moving the cursor down into the menu never breaks :hover (the panel stops vanishing mid-reach) */ .mega::before{content:"";position:absolute;left:0;right:0;top:-18px;height:18px} /* fade + rise IN on hover; close INSTANTLY on leave (transition:none in the base rule) so switching between nav items never shows two panels at once */ .nav-item:hover .mega,.nav-item:focus-within .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);transition:opacity .22s var(--ease),transform .22s var(--ease)} /* after an in-page jump the panel is force-dismissed (JS adds this) until the pointer leaves the nav item and returns — beats the :hover/:focus-within open rule by coming later at equal specificity */ .nav-item.mega-dismissed .mega{opacity:0;visibility:hidden;transform:translateX(-50%) translateY(8px);transition:none} .mega-link{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:16px;transition:background .25s} .mega-link:hover{background:var(--accent-t)} .mega-link .chip{width:40px;height:40px;font-size:20px;border-radius:12px} .mega-link h5{font-family:'Inter';font-size:.92rem;font-weight:700;color:var(--ink);margin-bottom:2px} .mega-link p{font-size:.8rem;color:var(--ink3);line-height:1.4} .mega.single{grid-template-columns:1fr;min-width:300px} .nav-cta{display:flex;align-items:center;gap:8px} .nav-cta .btn{padding:11px 20px;font-size:.9rem} .burger{display:none;width:44px;height:44px;border-radius:100px;background:rgba(255,255,255,.6);border:none;cursor:pointer;place-items:center} .burger span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;position:relative} .burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--ink);border-radius:2px} .burger span::before{top:-6px}.burger span::after{top:6px} /* Mobile nav */ .mnav{position:fixed;inset:0;z-index:120;background:rgba(252,251,249,.98);backdrop-filter:blur(20px);display:flex;flex-direction:column;padding:90px 26px calc(34px + env(safe-area-inset-bottom));gap:0;opacity:0;pointer-events:none;transition:.4s;overflow-y:auto} .mnav.open{opacity:1;pointer-events:auto} /* Top-level items: larger + semibold, separated by a hairline */ .mnav>a{font-family:'Plus Jakarta Sans',sans-serif;font-size:1.34rem;font-weight:600;color:var(--ink);padding:13px 2px;border-bottom:1px solid var(--hair);line-height:1.15} /* A parent that is immediately followed by its children flows straight into them — no divider */ .mnav>a:has(+ a.sub){border-bottom:none;padding-bottom:5px} /* Child (submenu) items: smaller, medium weight, indented, with a nesting rail so they read as children of the parent above; tight, consistent spacing between them. */ .mnav a.sub{font-family:'Inter',sans-serif;font-size:1.02rem;font-weight:500;color:var(--ink2);padding:8px 2px 8px 30px;border-bottom:none;position:relative;line-height:1.2} .mnav a.sub::before{content:"";position:absolute;left:12px;top:6px;bottom:6px;width:2px;border-radius:2px;background:var(--orange-t2)} /* The last child in a group closes it with the hairline divider */ .mnav a.sub:has(+ a:not(.sub)){border-bottom:1px solid var(--hair);padding-bottom:13px} /* Bottom CTA buttons — two balanced pills. Scoping the base rule to .mnav>a already frees these (they're inside .m-cta), but pin the button styling explicitly so the labels always show and both stay equal height / width across 320–430px. */ .mnav .m-cta{display:flex;gap:12px;justify-content:center;align-items:stretch;margin-top:28px;padding-top:24px;border-top:1px solid var(--hair)} .mnav .m-cta .btn{flex:1 1 0;min-width:0;border-bottom:none;min-height:54px;padding:15px 12px;font-size:clamp(.85rem,3.6vw,1rem);line-height:1;white-space:nowrap;text-align:center;justify-content:center;color:#fff} .mnav-close{position:absolute;top:26px;right:26px;display:grid} /* ============ REVEAL ============ */ /* Fade-in-on-scroll removed site-wide: reveal elements are always fully visible, no fade, no slide-up. (The JS IntersectionObserver still toggles .in but it has no visual effect now.) */ .reveal,.reveal.in{opacity:1;transform:none;transition:none} /* ============ HERO ============ */ .hero{padding:150px 0 90px;position:relative;overflow:hidden;background:radial-gradient(1200px 600px at 78% 8%,var(--mist),transparent 60%),radial-gradient(900px 500px at 8% 90%,var(--green-t),transparent 60%)} .hero.employer{background:radial-gradient(1200px 600px at 80% 0%,var(--blue-t),transparent 62%),radial-gradient(800px 500px at 5% 100%,var(--mist),transparent 60%)} .hero.seeker{background:radial-gradient(1200px 600px at 80% 0%,var(--orange-t),transparent 62%),radial-gradient(800px 500px at 5% 100%,var(--green-t),transparent 60%)} /* Legal pages (Privacy / Terms): one flat milky-white canvas top to bottom — drop the hero's tinted gradient so the whole page is uniform #FCFCFA. */ body[data-page="legal"] .hero{ background:#FCFCFA; } body[data-page="legal"] .section.alt{ background:#FCFCFA; } .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center} .hero-badge{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:700;letter-spacing:.03em;color:var(--blue);background:var(--glass2);border:1px solid var(--hair);padding:7px 15px;border-radius:100px;margin-bottom:24px;backdrop-filter:blur(8px);max-width:100%} .hero-badge .ic{width:15px;height:15px;flex:none} .hero h1{margin-bottom:22px} .hero .sub{font-size:1.18rem;max-width:48ch;margin-bottom:14px} .rhythm{font-family:'Plus Jakarta Sans';font-style:italic;font-size:1.25rem;color:var(--ink);margin-bottom:30px} .rhythm span{color:var(--accent)} .hero-actions{display:flex;gap:14px;flex-wrap:wrap} /* (bg-doodle backgrounds removed site-wide — keeping only the footer illustration + soft gradients) */ .s-o{stroke:var(--orange)} .s-b{stroke:var(--blue)} .s-g{stroke:var(--green)} .s-a{stroke:var(--amber)} .section>.wrap,.hero>.wrap{position:relative;z-index:2} /* ============ TRUST / STAT BAR ============ */ .stat-dash{display:grid;grid-template-columns:repeat(2,1fr);gap:16px} .stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .stat-card{position:relative;padding:24px;border-radius:var(--r);background:var(--glass2);border:1px solid rgba(255,255,255,.7);box-shadow:var(--sh-s);backdrop-filter:blur(14px);overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease)} .stat-card:hover{transform:translateY(-4px);box-shadow:var(--sh-m)} .stat-badge{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;margin-bottom:16px;transition:transform .5s var(--ease)} .stat-card:hover .stat-badge{transform:scale(1.06)} .stat-badge .ic{width:28px;height:28px} .stat-num{font-family:'Plus Jakarta Sans';font-size:2.3rem;font-weight:500;color:var(--ink);line-height:1} .stat-lab{font-size:.86rem;color:var(--ink2);margin-top:4px} .stat-card.c-o .stat-badge{background:var(--orange-t)} .stat-card.c-o .stat-badge .ic{color:var(--orange)} .stat-card.c-b .stat-badge{background:var(--blue-t)} .stat-card.c-b .stat-badge .ic{color:var(--blue)} .stat-card.c-g .stat-badge{background:var(--green-t)} .stat-card.c-g .stat-badge .ic{color:var(--green)} .stat-card.c-a .stat-badge{background:rgba(232,168,58,.16)} .stat-card.c-a .stat-badge .ic{color:var(--amber)} /* ============ GENERIC CARD GRID ============ */ .card{background:var(--glass2);border:1px solid rgba(255,255,255,.7);border-radius:var(--r-lg);box-shadow:var(--sh-s);backdrop-filter:blur(12px);transition:transform .5s var(--ease),box-shadow .5s var(--ease)} .card:hover{transform:translateY(-6px);box-shadow:var(--sh-m)} .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:20px} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .feat-card{padding:32px 28px} .feat-card h3{font-size:1.35rem;font-weight:500;margin:16px 0 8px} .feat-card p{font-size:.96rem} .feat-card .num{font-family:'Plus Jakarta Sans';font-size:.95rem;color:var(--accent);font-weight:500;letter-spacing:.05em;margin-bottom:10px} /* Who-we-are two column */ .split{display:grid;grid-template-columns:1fr 1.15fr;gap:56px;align-items:start} .split .body p{margin-bottom:16px} /* DDD flow (Discover Develop Sustain) */ .ddd{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;position:relative} .ddd .card{padding:32px 28px;text-align:center} .ddd .chip{margin:0 auto 16px} .ddd h3{font-size:1.4rem;font-weight:500;margin-bottom:8px} .ddd-arrow{position:absolute;top:56px;font-size:1.4rem;color:var(--ink3);z-index:3} /* ============ AUDIENCE TILES ============ */ .aud-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px} .aud-card{position:relative;padding:44px 40px;border-radius:var(--r-lg);background:var(--glass);border:1px solid rgba(255,255,255,.6);backdrop-filter:blur(12px);overflow:hidden;transition:transform .5s var(--ease),box-shadow .5s var(--ease);display:flex;flex-direction:column} .aud-card::before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,transparent,var(--tint,var(--blue-t)));opacity:0;transition:.5s} .aud-card:hover{transform:translateY(-6px);box-shadow:var(--sh-m)} .aud-card:hover::before{opacity:1} .aud-card.biz{--tint:var(--blue-t)} .aud-card.job{--tint:var(--orange-t)} .aud-card h3{font-size:1.7rem;font-weight:400;margin:18px 0 10px} .aud-card p{margin-bottom:22px} .aud-card .checks{display:flex;flex-direction:column;gap:8px;margin-top:auto} .aud-card .checks span{display:flex;align-items:center;gap:9px;font-size:.9rem;color:var(--ink2)} .aud-card .checks .ic{width:17px;height:17px;flex:none} .aud-card.biz .checks .ic{color:var(--blue)} .aud-card.job .checks .ic{color:var(--orange)} /* ============ VALUES ROADMAP ============ */ .road{position:relative;padding:40px 0} .road-line{position:absolute;top:50%;left:0;width:100%;height:40px;transform:translateY(-50%);overflow:visible;z-index:0} .road-track{fill:none;stroke:var(--hair);stroke-width:2.5;stroke-dasharray:6 7} .road-row{display:grid;grid-template-columns:repeat(7,1fr);gap:14px;position:relative;z-index:1;min-height:560px} .road-item{position:relative;height:560px} .road-card{position:absolute;left:0;right:0;background:var(--glass2);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.7);border-radius:var(--r-lg);box-shadow:var(--sh-s);padding:20px 15px;text-align:center;transition:transform .4s var(--ease),box-shadow .4s var(--ease);z-index:2} .road-item.up .road-card{bottom:calc(50% + 52px)} .road-item.down .road-card{top:calc(50% + 52px)} .road-card:hover,.road-card.open{box-shadow:var(--sh-m);z-index:5} .road-card .chip{width:46px;height:46px;font-size:22px;margin:0 auto 12px} .road-card h4{font-size:.98rem;font-weight:600;line-height:1.25} .road-desc{max-height:0;opacity:0;overflow:hidden;transition:max-height .45s var(--ease),opacity .4s var(--ease),margin .45s var(--ease)} .road-card:hover .road-desc,.road-card.open .road-desc{max-height:200px;opacity:1;margin-top:10px} .road-desc p{font-size:.82rem;color:var(--ink2);line-height:1.5} .road-stem{position:absolute;left:50%;width:2px;background:var(--hair);transform:translateX(-50%);height:44px} .road-item.up .road-stem{bottom:calc(50% + 8px)} .road-item.down .road-stem{top:calc(50% + 8px)} .road-node{position:absolute;left:50%;top:50%;width:16px;height:16px;border-radius:50%;background:var(--paper2);border:3px solid var(--accent);transform:translate(-50%,-50%);box-shadow:0 0 0 4px var(--paper2);transition:transform .4s var(--ease),background .4s;z-index:3} .road-item:hover .road-node,.road-item.open .road-node{transform:translate(-50%,-50%) scale(1.25);background:var(--accent)} /* ============ SERVICES RADIAL ============ */ .svc-float{position:relative;min-height:520px;display:grid;place-items:center} .svc-center{max-width:480px;text-align:center;position:relative;z-index:3} .svc-orbit{position:absolute;inset:0;z-index:2;pointer-events:none} .svc-node{position:absolute;display:flex;flex-direction:column;align-items:center;gap:10px;width:150px;text-align:center;pointer-events:auto;animation:svcFloat var(--dur,6s) ease-in-out infinite} .svc-node .chip{width:64px;height:64px;font-size:30px;border-radius:20px;box-shadow:var(--sh-s);transition:transform .4s var(--ease),box-shadow .4s var(--ease)} .svc-node:hover .chip{transform:scale(1.12);box-shadow:var(--sh-m)} .svc-lbl{font-size:.9rem;font-weight:600;color:var(--ink);line-height:1.3} .svc-node.n1{top:4%;left:6%} .svc-node.n2{top:0;right:6%} .svc-node.n3{top:42%;left:-1%} .svc-node.n4{top:42%;right:-1%} .svc-node.n5{bottom:2%;left:12%} .svc-node.n6{bottom:0;right:12%} @keyframes svcFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}} /* ============ PROBLEM / SOLUTION ============ */ .prob-list{display:grid;gap:14px;max-width:900px;margin:0 auto} .prob{display:flex;align-items:center;gap:18px;padding:20px 24px;border-radius:var(--r);background:var(--glass2);border:1px solid rgba(255,255,255,.7);backdrop-filter:blur(10px);box-shadow:var(--sh-s);cursor:default;transition:transform .4s var(--ease)} .prob:hover{transform:translateX(6px)} .prob-state{width:40px;height:40px;border-radius:12px;flex:none;display:grid;place-items:center;position:relative;background:var(--orange-t);transition:background .5s} .prob-state .ic{width:20px;height:20px;position:absolute;transition:.45s var(--ease)} .prob-state .x{color:var(--orange);opacity:1} .prob-state .v{color:var(--green);opacity:0;transform:scale(.4)} .prob:hover .prob-state{background:var(--green-t)} .prob:hover .prob-state .x{opacity:0;transform:scale(.4)} .prob:hover .prob-state .v{opacity:1;transform:scale(1)} .prob-txt{flex:1} .prob-txt .q{color:var(--ink);font-weight:600;transition:.4s} .prob-txt .a{font-size:.9rem;max-height:0;opacity:0;overflow:hidden;transition:.5s var(--ease)} .prob:hover .a{max-height:80px;opacity:1;margin-top:4px} .prob .tag{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3);transition:.4s;flex:none} .prob:hover .tag{color:var(--green)} /* ============ TIMELINE (process / journey) ============ */ .timeline{max-width:900px;margin:0 auto;position:relative} .timeline::before{content:"";position:absolute;left:31px;top:20px;bottom:20px;width:2px;background:linear-gradient(var(--orange),var(--green));opacity:.35} .tl-step{position:relative;display:grid;grid-template-columns:64px 1fr;gap:24px;padding:16px 0} .tl-num{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;font-family:'Plus Jakarta Sans';font-size:1.5rem;font-weight:500;color:#fff;background:var(--accent);box-shadow:var(--sh-s);z-index:1;position:relative} .tl-body{padding-top:6px} .tl-body h3{font-size:1.3rem;font-weight:500;margin-bottom:6px} .tl-body p{font-size:.98rem} .tl-step.reveal{transform:translateY(24px)} /* ============ HIRING MODELS SWITCH ============ */ .hm-switch{display:inline-flex;gap:4px;padding:5px;border-radius:100px;background:var(--glass2);border:1px solid var(--hair);margin:0 auto 32px;backdrop-filter:blur(10px)} .hm-switch button{border:none;background:transparent;font-family:'Inter';font-weight:600;font-size:.92rem;color:var(--ink2);padding:11px 24px;border-radius:100px;cursor:pointer;transition:.35s} .hm-switch button.on{background:var(--accent);color:#fff} .hm-panel{max-width:900px;margin:0 auto;position:relative;display:grid} .hm-face{grid-area:1/1;padding:40px;border-radius:var(--r-lg);background:var(--glass2);border:1px solid rgba(255,255,255,.7);backdrop-filter:blur(14px);box-shadow:var(--sh-m);opacity:0;transform:translateY(12px);pointer-events:none;transition:opacity .45s var(--ease),transform .45s var(--ease);visibility:hidden} .hm-face.on{opacity:1;transform:none;pointer-events:auto;visibility:visible;position:relative} .hm-face .chip{margin-bottom:18px} .hm-face h3{font-size:1.7rem;font-weight:400;margin-bottom:6px} .hm-face .tagline{font-family:'Plus Jakarta Sans';font-style:italic;color:var(--accent);margin-bottom:16px} .hm-face ul{display:grid;gap:12px;margin-top:20px} .hm-face li{display:flex;gap:12px;align-items:flex-start;font-size:.96rem} .hm-face li .ic{width:18px;height:18px;color:var(--green);flex:none;margin-top:5px} .hm-face li b{display:block} .hm-best{margin-top:22px;font-family:'Plus Jakarta Sans';font-style:italic;color:var(--ink2);font-size:.95rem} /* Two-column comparison (side by side, no switch) */ /* ============ HIRING MODELS — premium two-panel comparison ============ Each panel carries its own accent identity via --m: Model 01 = teal/blue, Model 02 = brand orange. Everything inside pulls from --m so the panel reads as one cohesive, vibrant unit — chip, timeline, hovers, and Best-for callout. */ /* Two hiring-model columns must be EQUAL height so the "Best for" callouts align on one baseline (align-items:stretch), never centred independently. Each column is a flex column and the callout is pushed to the bottom (margin-top:auto). */ .compare{display:grid;grid-template-columns:1fr 1fr;gap:26px;align-items:stretch} .compare .col.a{ --m:#333333; --m2:#616161; --m-t:rgba(26,26,26,.045); --m-t2:rgba(26,26,26,.08); --m-bd:rgba(26,26,26,.14); --m-glow:rgba(26,26,26,.26); } .compare .col.b{ --m:#F26F21; --m2:#F9A56A; --m-t:rgba(242,111,33,.07); --m-t2:rgba(242,111,33,.14); --m-bd:rgba(242,111,33,.22); --m-glow:rgba(242,111,33,.34); } .compare .col{ position:relative; display:flex; flex-direction:column; padding:38px 34px 34px; border-radius:22px; overflow:hidden; background:linear-gradient(180deg,var(--m-t),#ffffff 42%); border:1px solid var(--m-bd); box-shadow:0 30px 60px -42px var(--m-glow), 0 6px 22px -18px rgba(20,24,31,.22); transition:transform .3s var(--ease), box-shadow .3s var(--ease); } @media(hover:hover){ .compare .col:hover{ transform:translateY(-4px); box-shadow:0 46px 84px -46px var(--m-glow), 0 12px 30px -20px rgba(20,24,31,.28); } } /* gradient identity bar along the top edge + faint oversized model number */ .compare .col::before{ content:""; position:absolute; inset:0 0 auto 0; height:4px; background:linear-gradient(90deg,var(--m),var(--m2)); } .compare .col-no{ position:absolute; top:16px; right:22px; font-family:'Plus Jakarta Sans',sans-serif; font-weight:800; font-size:3.4rem; line-height:1; letter-spacing:-.03em; color:var(--m); opacity:.14; pointer-events:none; } .compare .col .chip{ background:var(--m-t2); color:var(--m); box-shadow:0 8px 18px -8px var(--m-glow); } /* typography hierarchy */ .compare h3{ font-size:1.4rem; font-weight:700; color:var(--ink); margin-bottom:5px; letter-spacing:-.012em; line-height:1.2; } .compare .tagline{ font-family:'Plus Jakarta Sans',sans-serif; font-style:normal; font-weight:600; color:var(--m); margin-bottom:14px; font-size:.98rem; } .compare .col > p:not(.best){ color:var(--ink2); line-height:1.62; font-size:.96rem; } /* feature list → a vibrant accent timeline (connecting line + filled nodes) */ .compare ul{ position:relative; display:grid; gap:4px; margin-top:22px; padding:0; list-style:none; } .compare ul::before{ content:""; position:absolute; left:15px; top:16px; bottom:16px; width:2.5px; border-radius:3px; background:linear-gradient(180deg,var(--m),var(--m2) 55%,transparent); opacity:.45; } .compare li{ position:relative; display:block; padding:11px 12px 11px 46px; border-radius:13px; font-size:.92rem; transition:background .26s var(--ease), transform .26s var(--ease); } .compare li .ic{ position:absolute; left:2px; top:10px; width:30px; height:30px; padding:7px; border-radius:50%; margin:0; color:#fff; background:linear-gradient(140deg,var(--m),var(--m2)); box-shadow:0 6px 14px -4px var(--m-glow); transition:transform .26s var(--btr), box-shadow .26s var(--ease); } .compare li b{ color:var(--ink); font-weight:700; font-size:.98rem; letter-spacing:-.005em; } .compare li span{ color:var(--ink2); line-height:1.55; } @media(hover:hover){ .compare li:hover{ background:var(--m-t); transform:translateX(5px); } .compare li:hover .ic{ transform:scale(1.14); box-shadow:0 10px 20px -4px var(--m-glow); } } /* Best-for → premium accent callout */ .compare .best{ display:flex; gap:13px; align-items:flex-start; margin-top:auto; padding:16px 18px; border-radius:16px; background:linear-gradient(120deg,var(--m-t2),var(--m-t)); border:1px solid var(--m-bd); border-left:4px solid var(--m); box-shadow:0 12px 26px -20px var(--m-glow); font-style:normal; font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; color:var(--ink); font-size:1rem; line-height:1.5; } .compare .best .best-ic{ flex:none; width:24px; height:24px; color:var(--m); margin-top:1px; } .compare .best strong{ color:var(--m); font-weight:800; } /* let the two cards use a little more of the side space (subtle desktop breakout) */ @media(min-width:901px){ .compare{ width:calc(100% + 44px); margin-left:-22px; margin-right:-22px; } } /* ============ INDUSTRIES ============ */ .ind-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .ind-card{padding:28px 24px;text-align:left} .ind-card .chip{margin-bottom:16px} .ind-card h3{font-size:1.15rem;font-weight:600;font-family:'Inter';margin-bottom:8px} .ind-card p{font-size:.88rem;color:var(--ink2)} .marquee{position:relative;overflow:hidden;padding:14px 0;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .marquee-row{display:flex;gap:16px;width:max-content;animation:scroll 34s linear infinite} .marquee:hover .marquee-row{animation-play-state:paused} @keyframes scroll{to{transform:translateX(-50%)}} .ind-chip{display:flex;align-items:center;gap:12px;padding:16px 26px;border-radius:100px;background:var(--glass2);border:1px solid rgba(255,255,255,.7);backdrop-filter:blur(10px);box-shadow:var(--sh-s);white-space:nowrap;transition:transform .35s var(--ease),background .35s} .ind-chip:hover{transform:scale(1.05);background:#fff} .ind-chip .ic{width:24px;height:24px} .ind-chip span{font-weight:600;color:var(--ink)} /* ============ DATA TABLE (services / job categories) ============ */ .tbl-wrap{overflow-x:auto;border-radius:var(--r-lg);box-shadow:var(--sh-s);border:1px solid var(--hair)} table.data{width:100%;border-collapse:collapse;min-width:640px;background:var(--glass2);backdrop-filter:blur(10px)} table.data th{background:var(--blue);color:#fff;font-family:'Inter';font-weight:600;font-size:.86rem;text-align:left;padding:16px 20px;letter-spacing:.02em} table.data td{padding:16px 20px;border-top:1px solid var(--hair);font-size:.92rem;vertical-align:top} table.data tr:nth-child(even) td{background:rgba(246,243,238,.5)} table.data tbody tr{transition:background .25s var(--ease)} table.data tbody tr:hover td{background:var(--accent-t)} table.data td strong{color:var(--ink)} /* ============ TESTIMONIALS ============ */ .tst-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .tst-card{padding:30px;border-left:4px solid var(--accent);display:flex;flex-direction:column} .tst-card .q{font-family:'Plus Jakarta Sans';font-style:italic;font-size:1.02rem;color:var(--ink);line-height:1.5;margin-bottom:16px} /* Editorial attribution: name (emphasis) → role (secondary) → subtle metadata, pinned to the card foot so footers align across cards regardless of quote length. */ .tst-card cite{font-style:normal;display:block;margin-top:auto;padding-top:18px} .tst-card .tst-name{display:block;font-family:'Plus Jakarta Sans',sans-serif;font-weight:600;font-size:1.02rem;color:var(--ink);letter-spacing:-.01em;line-height:1.2} .tst-card .tst-role{display:block;font-size:.83rem;color:var(--ink2);margin-top:4px} .tst-card .tst-meta{display:block;font-size:.72rem;color:var(--ink3);margin-top:7px;letter-spacing:.06em;text-transform:uppercase;font-weight:600} .tst-card .stars{color:var(--amber);display:flex;gap:2px;margin-bottom:14px} .tst-card .stars .ic{width:16px;height:16px;fill:var(--amber)} /* ============ FAQ ACCORDION ============ */ .faq{max-width:840px;margin:0 auto;display:grid;gap:12px} .faq-item{background:var(--glass2);border:1px solid rgba(255,255,255,.7);border-radius:var(--r);box-shadow:var(--sh-s);overflow:hidden;transition:box-shadow .4s} .faq-item.open{box-shadow:var(--sh-m)} .faq-q{width:100%;text-align:left;background:none;border:none;font-family:'Inter';font-weight:600;font-size:1.02rem;color:var(--ink);padding:22px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;cursor:pointer} .faq-q .pm{width:26px;height:26px;flex:none;border-radius:50%;background:var(--accent-t);color:var(--accent);display:grid;place-items:center;transition:transform .4s var(--ease)} .faq-q .pm .ic{width:15px;height:15px} .faq-item.open .faq-q .pm{transform:rotate(45deg)} .faq-a{max-height:0;overflow:hidden;transition:max-height .32s var(--ease)} .faq-a p{padding:0 24px 22px;font-size:.96rem;color:var(--ink2)} /* ============ CAREER TIPS ============ */ .tips-hero{background:linear-gradient(135deg,var(--orange),#d85f16);color:#fff;padding:40px;border-radius:var(--r-lg);box-shadow:var(--sh-m)} .tips-hero .kick{font-size:.82rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.85;margin-bottom:10px} .tips-hero h1,.tips-hero h2{color:#fff;font-size:clamp(1.6rem,3vw,2.4rem);font-weight:400} .tip{display:grid;grid-template-columns:80px 1fr;gap:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-s);border:1px solid var(--hair);background:var(--glass2)} .tip-num{background:var(--green);color:#fff;display:grid;place-items:center;font-family:'Plus Jakarta Sans';font-size:1.8rem;font-weight:500} .tip-body{padding:26px 30px} .tip-body h3{font-family:'Inter';font-size:1.15rem;font-weight:700;color:var(--ink);letter-spacing:.02em;text-transform:uppercase;font-size:.9rem;margin-bottom:6px} .tip-body .sub{font-family:'Plus Jakarta Sans';font-size:1.25rem;color:var(--ink);margin-bottom:14px} .tip-body ul{display:grid;gap:8px;margin-bottom:14px} .tip-body li{display:flex;gap:10px;font-size:.95rem} .tip-body li::before{content:"•";color:var(--green);font-weight:700} .tip-take{font-family:'Plus Jakarta Sans';font-style:italic;color:var(--green);font-weight:500} /* ============ QUOTE BAND ============ */ .quote-band{padding:120px 0;text-align:center;background:radial-gradient(800px 400px at 50% 0%,var(--green-t),transparent 65%)} .quote-inner{max-width:860px;margin:0 auto} .quote-mark{font-family:'Plus Jakarta Sans';font-size:5rem;color:var(--green);line-height:.4;display:block} .quote-inner blockquote{font-family:'Plus Jakarta Sans';font-size:clamp(1.4rem,2.6vw,2.05rem);font-weight:300;color:var(--ink);line-height:1.42;margin:20px 0 24px} .quote-inner blockquote em{font-style:italic;color:var(--green)} .quote-inner cite{font-style:normal;font-size:.9rem;color:var(--ink2);font-weight:600} /* ---- Founder's Message: premium two-column editorial (message left, signature panel right). Signature card is vertically centered against the message block (align-items:center). ---- */ .founder-grid{ display:grid; grid-template-columns:1.9fr 1fr; gap:60px; align-items:center; max-width:1200px; margin:0 auto; text-align:left; } .founder-msg{ position:relative; } .founder-msg .quote-mark{ font-size:4.4rem; color:var(--orange); opacity:.85; line-height:.5; margin-bottom:10px; } .founder-title{ font-family:'Inter',sans-serif; font-size:.78rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--ink3); margin:0 0 22px; display:flex; align-items:center; gap:12px; } .founder-title::before{ content:""; width:26px; height:1.5px; background:var(--orange); border-radius:2px; } /* natural left-aligned editorial measure (~62ch) — text wraps by itself, no manual line breaks, no justification, so it stays correct at any font width */ .founder-msg blockquote{ font-family:'Plus Jakarta Sans',sans-serif; font-style:italic; font-weight:340; font-size:1.42rem; line-height:1.62; letter-spacing:-.005em; color:var(--ink); margin:0; max-width:62ch; text-align:left; text-wrap:pretty; } .founder-msg blockquote em{ font-style:italic; color:var(--orange); } /* signature panel — stacked hierarchy, thin dividers, subtle orange accents */ .founder-sig{ text-align:center; padding:34px 28px; border:1px solid var(--hair); border-radius:18px; background:var(--glass); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); box-shadow:var(--sh-s); } .sig-name{ font-family:'Plus Jakarta Sans',sans-serif; font-size:1.55rem; font-weight:400; color:var(--ink); line-height:1.1; } .sig-org{ font-family:'Inter',sans-serif; font-size:.82rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--orange); margin-top:7px; } .sig-div{ width:44px; height:1px; background:var(--hair); margin:20px auto; } .sig-roles{ display:flex; flex-direction:column; gap:9px; } .sig-roles span{ font-family:'Inter',sans-serif; font-size:1rem; color:var(--ink2); letter-spacing:.01em; } .sig-exp{ font-family:'Plus Jakarta Sans',sans-serif; font-style:italic; font-size:1.08rem; color:var(--ink); } @media(max-width:900px){ .founder-grid{ grid-template-columns:1fr; gap:32px; } .founder-msg blockquote{ font-size:1.24rem; } } /* ============ CTA BAND ============ */ .cta{padding:96px 0} .cta-inner{max-width:940px;margin:0 auto;text-align:center;padding:56px;border-radius:var(--r-xl);background:linear-gradient(135deg,#242424,#131313);color:#fff;box-shadow:var(--sh-m);position:relative;overflow:hidden} .cta-inner h2{color:#fff;font-size:clamp(1.8rem,3.4vw,2.7rem);font-weight:300;margin-bottom:12px} /* margin:0 auto centres the block — the global p{max-width:68ch} otherwise pins it left of centre inside the text-align:center card (the h2 has no such cap, so it looked centred). */ .cta-inner p{color:rgba(255,255,255,.82);max-width:60ch;margin:0 auto 28px;text-wrap:balance} .cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} .cta-glow{position:absolute;width:320px;height:320px;border-radius:50%;background:radial-gradient(var(--orange-t2),transparent 70%);filter:blur(20px)} /* Kill the blue/grey mobile tap-flash (WebKit highlight) on every interactive control — this is what made the FAQ buttons and dropdown triggers flash a colour on first touch. */ a, button, input, select, textarea, label, summary, [role="button"], .faq-q, .sel-trigger, .sel-opt{ -webkit-tap-highlight-color:transparent; } /* Native popup, all forms). The native