/* ══════════════════════════════════════════════════════════════════════ Nebryx — SITE.CSS The marketing surface: landing + the two entrances (/employer, /candidate). Layered ON TOP of app.css, which owns the product UI. This file never restyles a product component; it adds the marketing vocabulary and scopes all of it under `body.nx` so the two can never collide. ── The one idea worth knowing ────────────────────────────────────── Everything audience-specific reads from ONE variable, --acc. Set it on , override it on a section, and the whole subtree — buttons, icons, rules, glows, focus rings — retunes. No `.is-employer` variants of anything, anywhere. Two temperatures: employer → cool indigo (authority, procurement, budget) candidate → warm teal (the existing brand accent, human side) ── Contents ──────────────────────────────────────────────────────── 1. Tokens + audience accents + dark mode 2. Motion primitives (reveal, stagger) — all reduced-motion gated 3. Icons 4. Nav: bar, mega-menu, split login, mobile drawer 5. Audience toggle 6. Hero 7. Marquee 8. Steps + pinned scrub media 9. Showcase 10. Cards / resources 11. CTA band 12. Footer 13. Responsive ══════════════════════════════════════════════════════════════════════ */ /* ══ 1. TOKENS ══════════════════════════════════════════════════════ */ /* Nav height lives on :root, not on body.nx, because needs it too: scroll-padding-top is what stops an in-page anchor from landing behind the fixed bar, and it can only be set on the scroll container. A custom property declared on cannot be read by its own parent. */ :root{ --nav:96px; /* nav height over the hero */ --nav-sm:80px; /* …after it shrinks */ } /* Marketing pages only — app.css keeps its own --nav-h for the product shell, whose bar is a different height. */ html:has(body.nx){scroll-padding-top:calc(var(--nav-sm) + 18px);} body.nx{ /* neutral base — deliberately cooler than app.css so accents sing */ --ink:#0b1120; --ink-2:#1e293b; --mu:#5a6779; --dim:#94a3b8; --paper:#ffffff; --paper-2:#f7f9fb; --paper-3:#eef2f7; --edge:#e3e9f0; /* 1px hairline */ --edge-soft:#eef2f7; /* the two temperatures. The -lt pair is the accent as it must appear ON a dark surface: the base indigo sits at ~3:1 against the solid nav and reads as muddy, so anything that lands on dark reaches for -lt instead of -2. */ --employer:#4f46e5; --employer-2:#6366f1; --employer-soft:#eef0fe; --employer-lt:#a5b4fc; --candidate:#0d9488; --candidate-2:#14b8a6; --candidate-soft:#e6f7f4; --candidate-lt:#5eead4; /* active accent — overridden per audience + per section */ --acc:var(--employer); --acc-2:var(--employer-2); --acc-soft:var(--employer-soft); --acc-lt:var(--employer-lt); /* the solid nav's own ground — a true neutral black. Not --ink (#0b1120), which is a navy: against the white page it reads blue, and next to the mint logo it pushes the whole bar cold. */ --nav-ink:#121212; /* ── brand green ────────────────────────────────────────────────── One action colour for the whole site: the logo's accent letter and every filled button. It sits OUTSIDE the audience system on purpose — the two path temperatures still tint their own sections, but the thing you click is the same colour on every page, which is what makes a brand colour a brand colour. It ships as a PAIR because a mint this bright cannot do both jobs. --brand is a fill: gorgeous behind dark text, and about 1.7:1 as text on white, i.e. unreadable. --brand-dp is the same hue pushed down until it clears 3:1 on paper, so anything drawn AS the colour (the logo's x on a light bar) uses that instead. Reaching for --brand there would leave the letter a pale smear on white. */ --brand:#2fe39b; /* fills, and anything sitting on dark */ --brand-2:#22cf8b; /* the fill, pressed */ --brand-dp:#0b9a68; /* the green made legible ON light */ --brand-ink:#04231a; /* the label ON a brand fill — never #fff */ --brand-soft:#e7fbf2; /* The wordmark at rest. A slate charcoal, not --ink (#0b1120): at logo weight the near-black navy reads heavier and colder than the mark wants, and the reference render is plainly a soft dark grey. */ --mark:#363c47; --r-xs:8px; --r-sm:12px; --r:16px; --r-lg:22px; --r-xl:30px; /* soft layered shadows — two-part: contact + ambient */ --sh-1:0 1px 2px rgba(11,17,32,.04), 0 4px 12px rgba(11,17,32,.04); --sh-2:0 2px 4px rgba(11,17,32,.05), 0 12px 28px rgba(11,17,32,.07); --sh-3:0 4px 8px rgba(11,17,32,.06), 0 24px 56px rgba(11,17,32,.10); /* --nav / --nav-sm now live on :root (below) so that html can read them for scroll-padding — a custom property set on is invisible to its own parent. body.nx inherits them either way. */ --gut:clamp(20px,4.2vw,60px); --max:1280px; --ease:cubic-bezier(.16,.84,.28,1); /* Type and control radius now live in app.css so the product pages share them — a different typeface either side of the sign-in page reads as two different companies. Nothing to override here. */ background:var(--paper); color:var(--ink); font-family:var(--sans); font-optical-sizing:auto; } body.nx[data-audience="employer"] { --acc:var(--employer); --acc-2:var(--employer-2); --acc-soft:var(--employer-soft); --acc-lt:var(--employer-lt); } body.nx[data-audience="candidate"]{ --acc:var(--candidate); --acc-2:var(--candidate-2); --acc-soft:var(--candidate-soft); --acc-lt:var(--candidate-lt); } /* Section-level accent overrides — a client section stays cool even while the candidate path is active, so the mirrored pair below the fold always reads as two distinct territories. */ body.nx .acc-employer { --acc:var(--employer); --acc-2:var(--employer-2); --acc-soft:var(--employer-soft); --acc-lt:var(--employer-lt); } body.nx .acc-candidate{ --acc:var(--candidate); --acc-2:var(--candidate-2); --acc-soft:var(--candidate-soft); --acc-lt:var(--candidate-lt); } /* ── dark ── Opt-in only. Light is the default everywhere, so this no longer keys off the OS preference — it needs an explicit html[data-theme="dark"], which only the HR dashboard sets, on itself. Keeping the palette costs nothing and means a future theme switch is one attribute, not a re-derivation. */ :root[data-theme="dark"] body.nx{ color-scheme:dark; --ink:#f1f5f9; --ink-2:#cbd5e1; --mu:#94a3b8; --dim:#64748b; --paper:#0b1120; --paper-2:#111827; --paper-3:#182236; --edge:#1e293b; --edge-soft:#172033; --employer-soft:#1b1f43; --candidate-soft:#0d2b2a; --employer:#818cf8; --employer-2:#a5b4fc; --candidate:#2dd4bf; --candidate-2:#5eead4; --sh-1:0 1px 2px rgba(0,0,0,.4), 0 4px 12px rgba(0,0,0,.3); --sh-2:0 2px 4px rgba(0,0,0,.45),0 12px 28px rgba(0,0,0,.38); --sh-3:0 4px 8px rgba(0,0,0,.5), 0 24px 56px rgba(0,0,0,.45); } /* Selection stays the classic browser blue rather than the section accent. Tying it to --acc meant the highlight changed colour halfway down a dark page, and on the mint sections it read as a marker pen through the text instead of as a selection. Blue is the one highlight everybody parses without thinking. */ body.nx ::selection{background:#3297fd;color:#fff;} body.nx :focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:4px;} /* [hidden] is a UA rule (display:none) and loses to any class that sets display — .btn is inline-flex, so a hidden button would still show. State beats layout: make the attribute authoritative. */ body.nx [hidden]{display:none !important;} /* type Space Grotesk is drawn with its display spacing already built in — hackajob sets letter-spacing:normal even at 80px. Piling negative tracking on top (as a Helvetica-ish face needs) closes the counters and kills the thing you picked it for, so tracking stays at zero and only the very largest size gets a hair of tightening. */ body.nx h1,body.nx h2,body.nx h3,body.nx h4{ color:var(--ink);letter-spacing:normal;line-height:1.1; font-weight:700;text-wrap:balance; } body.nx h1{font-size:clamp(38px,6.4vw,76px);letter-spacing:-.01em;line-height:1.08;} body.nx h2{font-size:clamp(28px,4.2vw,50px);} body.nx h3{font-size:clamp(19px,2.2vw,26px);} body.nx h4{font-size:17px;font-weight:600;} body.nx p{text-wrap:pretty;} body.nx .lead{font-size:clamp(16px,1.5vw,19px);line-height:1.62;color:var(--mu);max-width:60ch;} body.nx .sm{font-size:14.5px;line-height:1.6;color:var(--mu);} body.nx .eyebrow{ display:inline-flex;align-items:center;gap:9px; font-size:11.5px;font-weight:700;letter-spacing:1.6px; text-transform:uppercase;color:var(--acc); } body.nx .eyebrow::before{content:'';width:20px;height:1.5px;background:currentColor;border-radius:2px;} body.nx .wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut);} body.nx .sec{padding:clamp(64px,9vw,124px) 0;position:relative;} body.nx .sec-tint{background:var(--paper-2);} body.nx .sec-head{max-width:680px;margin-bottom:clamp(40px,6vw,68px);} body.nx .sec-head.center{margin-inline:auto;text-align:center;} /* .lead carries its own 60ch measure, which without this sits flush left inside the centred head — centred text above a left-anchored paragraph. Saves an inline margin-inline:auto at every call site. */ body.nx .sec-head.center .lead{margin-inline:auto;} body.nx .sec-head h2{margin:14px 0 16px;} body.nx .rule{height:1px;background:var(--edge);border:0;} /* buttons — pill, restrained */ body.nx .btn{ display:inline-flex;align-items:center;justify-content:center;gap:9px; padding:13px 24px;border-radius:999px;cursor:pointer; font-size:15px;font-weight:600;letter-spacing:normal;white-space:nowrap; border:1.5px solid var(--edge);background:var(--paper);color:var(--ink); transition:background .18s var(--ease),border-color .18s var(--ease), color .18s var(--ease),box-shadow .22s var(--ease),transform .18s var(--ease); } /* Secondary buttons fill dark on hover rather than tinting grey. Next to a green primary the pair then reads as two solid buttons, which is what the reference does — a barely-shifted grey outline looks like nothing happened. Placed BEFORE the variants below so each of them (primary, ghost, pass) still overrides it at equal specificity by source order. */ body.nx .btn:hover{background:var(--ink);border-color:var(--ink);color:var(--paper);} /* Dark label, not white. White on this mint is ~1.7:1 and illegible; the near-black reads at well over 10:1 and is what the reference does too. */ body.nx .btn-primary{background:var(--brand);border-color:var(--brand);color:var(--brand-ink);} body.nx .btn-primary:hover{ background:var(--brand-2);border-color:var(--brand-2);color:var(--brand-ink); box-shadow:0 10px 26px color-mix(in srgb,var(--brand) 40%,transparent); transform:translateY(-1px); } body.nx .btn-ghost{background:transparent;border-color:transparent;color:var(--mu);} /* border-color is restated for the same reason as the label above: .btn:hover now darkens the border, and a ghost button must stay borderless in both states or the nav's "Log in" sprouts an outline on hover. */ body.nx .btn-ghost:hover{background:var(--paper-2);border-color:transparent;color:var(--ink);} body.nx .btn-sm{padding:9px 17px;font-size:14px;} body.nx .btn .ico{width:18px;height:18px;} /* ══ 2. MOTION PRIMITIVES ═══════════════════════════════════════════ */ /* Default state is VISIBLE. JS adds .motion to only when motion is allowed, and only then does anything start hidden — so no-JS and reduced-motion users can never end up staring at a blank page. */ html.motion body.nx [data-reveal]{ opacity:0;transform:translateY(24px); transition:opacity .78s var(--ease) var(--d,0ms), transform .78s var(--ease) var(--d,0ms); will-change:opacity,transform; } html.motion body.nx [data-reveal].in{opacity:1;transform:none;} /* hero headline: per-word rise */ html.motion body.nx .word{ display:inline-block;opacity:0;transform:translateY(.5em) rotate(1.2deg); transition:opacity .82s var(--ease) var(--d,0ms),transform .82s var(--ease) var(--d,0ms); } html.motion body.nx .lit .word{opacity:1;transform:none;} @media (prefers-reduced-motion:reduce){ body.nx *,body.nx *::before,body.nx *::after{ animation-duration:.01ms !important;animation-iteration-count:1 !important; transition-duration:.01ms !important;scroll-behavior:auto !important; } } /* ══ 3. ICONS ═══════════════════════════════════════════════════════ */ body.nx .ico{ width:24px;height:24px;flex:none;display:block; color:inherit;vector-effect:non-scaling-stroke; } body.nx .ico-sm{width:18px;height:18px;} body.nx .ico-lg{width:32px;height:32px;} /* the standard icon plate — square, soft, accent-tinted */ body.nx .ico-plate{ width:48px;height:48px;border-radius:14px;flex:none; display:grid;place-items:center; background:var(--acc-soft);color:var(--acc); border:1px solid color-mix(in srgb,var(--acc) 16%,transparent); } body.nx .ico-plate-sm{width:38px;height:38px;border-radius:11px;} body.nx .ico-plate-lg{width:60px;height:60px;border-radius:18px;} body.nx .ico-plate-lg .ico{width:28px;height:28px;} /* Outlined variant: a hairline tile on the card's own ground, with only the glyph carrying the accent. The filled plate is right when the tile is the focal point; in a three-card row it is not, and three tinted blocks compete with the headings for the first look. */ body.nx .plate-quiet{ background:var(--paper); border-color:var(--edge); color:var(--acc); } /* ══ 4. NAV ═════════════════════════════════════════════════════════ */ /* Two states, and the swap between them is done with FOUR local tokens rather than a parallel set of `.is-solid .thing` rules. Every control in the bar already reads --nav-fg / --nav-mark, so flipping the bar's ground is a four-line override and nothing can be left behind in the old colour when a control is added later. The tokens stop at the bar. The dropdown panels are children of .nav but deliberately keep the page palette — a dark bar with a light sheet under it is the reference's behaviour, and re-tinting --ink here would drag every panel link dark along with it. */ body.nx .nav{ --nav-fg:var(--ink-2); --nav-mark:var(--mark); /* the mark is ONE colour now — see .wordmark */ position:fixed;inset:0 0 auto 0;z-index:200;height:var(--nav); display:flex;align-items:center; background:transparent;border-bottom:1px solid transparent; transition:height .32s var(--ease),background .32s var(--ease), border-color .32s var(--ease),box-shadow .32s var(--ease), backdrop-filter .32s var(--ease); } body.nx .nav.is-solid{ --nav-fg:#e8edf6; --nav-mark:var(--brand); /* on the dark bar the whole mark goes mint */ height:var(--nav-sm); background:var(--nav-ink); border-bottom-color:rgba(255,255,255,.09); box-shadow:0 10px 34px rgba(11,17,32,.30); } body.nx .nav-in{ width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut); display:flex;align-items:center;gap:10px; } /* Everything but the wordmark rides to the right edge. Done with `order` so the SOURCE keeps reading wordmark → menus → login → CTA, which is the order a keyboard and a screen reader want; only the spacer moves. */ body.nx .nav-spacer{order:1;} body.nx .mega{order:2;} body.nx .nav-right{order:3;} body.nx .burger{order:4;} /* Wordmark. The supplied artwork, not a drawing of it — two files, one per state, cropped to their ink so they share an aspect ratio and overlay exactly (2.980 vs 2.972, a 0.3% difference nobody can see). Both are stacked in the SAME grid cell rather than one being display:none. That is what allows a cross-fade between the two states, and it also means the box never collapses mid-transition — swapping display would snap the nav's width as the mark changed. Sized by HEIGHT; width follows. */ body.nx .wordmark{ display:inline-grid;align-items:center;margin-right:8px; } body.nx .wordmark img{ grid-area:1/1; display:block;height:58px;width:auto; transition:opacity .32s var(--ease),height .32s var(--ease); } body.nx .wordmark .wm-alt{opacity:0;} /* mint: hidden over the hero */ /* The mark shrinks with the bar, so the two scale together instead of the logo suddenly looking oversized in the shorter bar. */ body.nx .nav.is-solid .wordmark img{height:48px;} body.nx .nav.is-solid .wordmark .wm-rest{opacity:0;} body.nx .nav.is-solid .wordmark .wm-alt{opacity:1;} /* The footer mark sits on white, so it is the dark file only. */ body.nx .foot-mark img{display:block;height:68px;width:auto;} /* ── mega menu ──────────────────────────────────────────────────── A wide sheet that drops flush from the bar and runs to the right edge of the window, rather than a small box tethered under its trigger. Plain text links, generously spaced, a hairline, then one CTA row — the panel sells by being easy to read, not by decorating every row with an icon. Anchoring: .mega-item is intentionally STATIC so the absolutely positioned panel resolves against .nav (which is fixed, and so is its own containing block). That gives `right:0` = window edge and `top:100%` = the bar's bottom for free — including while the bar animates its height on scroll, with no second rule to keep in sync. */ body.nx .mega{display:flex;align-items:center;gap:10px;} body.nx .mega-item{position:static;} body.nx .mega-btn{ display:inline-flex;align-items:center;gap:6px;padding:9px 14px; border:0;background:none;cursor:pointer;border-radius:10px; font-size:15px;font-weight:550;color:var(--nav-fg); transition:background .16s,color .32s var(--ease); } /* No plate. The panel dropping open is already an unmistakable state change, and a filled pill behind the trigger draws a hard-edged box against the bar that competes with the sheet below it. Colour alone carries hover; the chevron rotation carries open. */ body.nx .mega-btn:hover,body.nx .mega-item.open .mega-btn{ background:transparent;color:var(--nav-mark); } body.nx .mega-btn .ico{width:16px;height:16px;transition:transform .24s var(--ease);} body.nx .mega-item.open .mega-btn .ico{transform:rotate(180deg);} body.nx .mega-panel{ position:absolute;top:100%;left:auto;z-index:210; /* Stops at the content container's edge rather than bleeding off the window — on a wide monitor a full-bleed sheet reads as a broken overlay rather than a menu. Falls back to the page gutter once the window is narrower than the container. */ right:max(var(--gut),(100vw - var(--max))/2); width:min(1000px,calc(100vw - var(--gut)*2)); padding:44px clamp(32px,4.4vw,56px) 38px; border-radius:0 0 var(--r-lg) var(--r-lg); background:var(--paper); border:1px solid var(--edge);border-top:0; box-shadow:var(--sh-3); opacity:0;visibility:hidden;transform:translateY(-10px); transition:opacity .22s var(--ease),transform .22s var(--ease),visibility 0s .22s; } body.nx .mega-item.open .mega-panel{ opacity:1;visibility:visible;transform:none;transition-delay:0s; } /* Both panels occupy the same slot, so fading one out while the other fades in renders two sets of links on top of each other. Sliding straight from one trigger to the next cuts instead. The login dropdown is a [data-menu] too, and the JS closes it through the same path — so it needs the same rule, or moving from Log in to a mega trigger ghosts the sign-in links over the panel. */ body.nx .mega-item.snap .mega-panel, body.nx .login-split.snap .login-panel{transition:none;} /* three explicit columns, so the fill order is ours to choose rather than whatever grid auto-flow decides when the counts are uneven */ body.nx .mega-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:0 clamp(24px,3vw,48px);} /* MEASURED on hackajob's .megamenu__column: the heading is 22/500 at line-height 1.2, every link is 18/500 at 1.2, and the rhythm is a flat 40px — head to first item and between every item after it, carried on the list items rather than as a container gap. */ body.nx .mega-col{display:grid;gap:40px;align-content:start;} body.nx .mega-col a{ font-size:18px;font-weight:500;line-height:1.2;color:var(--ink); justify-self:start;position:relative;transition:color .16s; } /* underline grows from the left instead of a background swatch — keeps the panel as quiet as the reference */ body.nx .mega-col a::after{ content:'';position:absolute;left:0;right:0;bottom:-5px;height:1.5px; background:currentColor;border-radius:2px; transform:scaleX(0);transform-origin:left; transition:transform .24s var(--ease); } body.nx .mega-col a:hover{color:var(--acc);} body.nx .mega-col a:hover::after, body.nx .mega-col a:focus-visible::after{transform:scaleX(1);} body.nx .mega-foot{ display:flex;align-items:center;justify-content:space-between;gap:24px; margin-top:clamp(28px,3.4vw,42px);padding-top:clamp(22px,2.6vw,30px); border-top:1px solid var(--edge); } body.nx .mega-foot b{font-size:clamp(18px,1.7vw,22px);font-weight:500;color:var(--ink);} body.nx .nav-spacer{flex:1;} body.nx .nav-right{display:flex;align-items:center;gap:8px;} /* split login */ /* Log in behaves exactly like the mega menus now: the panel drops flush from the BAR rather than floating under its button, the trigger takes the same open-state treatment, and the links use the same underline. Same anchoring trick — .login-split is static, so the absolutely positioned panel resolves against .nav (fixed, therefore its own containing block). top:100% is the bar's bottom edge for free, and it keeps following while the bar shrinks on scroll. */ body.nx .login-split{position:static;} /* trigger: matches .mega-btn's hover/open states, chevron included */ body.nx .nav-right .btn-ghost{color:var(--nav-fg);transition:background .16s,color .32s var(--ease);} body.nx .nav-right .btn-ghost:hover, body.nx .login-split.open > .btn{background:transparent;color:var(--nav-mark);} body.nx .login-split > .btn .ico{transition:transform .24s var(--ease);} body.nx .login-split.open > .btn .ico{transform:rotate(180deg);} /* Signed in, the whole right-hand side collapses to one word. The pair it replaces — a Log in menu and a Create-a-profile pill — are both offers to do something already done, and a filled CTA aimed at an existing account is the nav shouting at the person who already said yes. Set as a plain link at .mega-btn's weight so it reads as the last item in the menu row rather than as a button parked beside it. */ body.nx .nav-dash{ padding:9px 14px;border-radius:10px; font-size:15px;font-weight:550;color:var(--nav-fg); transition:color .32s var(--ease); } body.nx .nav-dash:hover{color:var(--nav-mark);} body.nx .login-panel{ position:absolute;top:100%;left:auto;z-index:210; right:max(var(--gut),(100vw - var(--max))/2); width:238px;padding:14px 18px;text-align:center; border-radius:0 0 var(--r-lg) var(--r-lg); background:var(--paper); border:1px solid var(--edge);border-top:0; box-shadow:var(--sh-3); opacity:0;visibility:hidden;transform:translateY(-10px); transition:opacity .22s var(--ease),transform .22s var(--ease),visibility 0s .22s; } body.nx .login-split.open .login-panel{ opacity:1;visibility:visible;transform:none;transition-delay:0s; } body.nx .login-panel a{ display:block;padding:15px 8px; font-size:17px;font-weight:500;color:var(--ink); position:relative;transition:color .16s; } /* the mega panels' grow-from-left underline, not a background swatch */ body.nx .login-panel a::after{ content:'';position:absolute;left:8px;right:8px;bottom:8px;height:1.5px; background:currentColor;border-radius:2px; transform:scaleX(0);transform-origin:left; transition:transform .24s var(--ease); } body.nx .login-panel a:hover::after, body.nx .login-panel a:focus-visible::after{transform:scaleX(1);} body.nx .login-panel a.c-employer:hover{color:var(--employer);} body.nx .login-panel a.c-candidate:hover{color:var(--candidate);} /* burger + drawer */ body.nx .burger{ display:none;width:42px;height:42px;border-radius:12px;place-items:center; border:1px solid var(--edge);background:transparent;color:var(--nav-mark);cursor:pointer; transition:color .32s var(--ease),border-color .32s var(--ease); } body.nx .nav.is-solid .burger{border-color:rgba(255,255,255,.18);} body.nx .drawer{ position:fixed;inset:0;z-index:300;display:none; background:var(--paper);padding:calc(var(--nav-sm) + 20px) var(--gut) 40px; overflow-y:auto;overscroll-behavior:contain; } body.nx .drawer.open{display:block;} body.nx .drawer-close{position:absolute;top:14px;right:var(--gut); width:42px;height:42px;border-radius:12px;display:grid;place-items:center; border:1px solid var(--edge);background:var(--paper);color:var(--ink);cursor:pointer;} body.nx .drawer h5{font-size:11px;letter-spacing:1.4px;text-transform:uppercase; color:var(--dim);margin:26px 0 8px;} body.nx .drawer a{display:block;padding:13px 0;font-size:17px;font-weight:550; border-bottom:1px solid var(--edge-soft);} body.nx .drawer .btn{width:100%;margin-top:12px;} /* Was `body.nx body.nav-locked` — a body inside a body, which never matches, so the drawer never actually locked the page behind it. */ body.nx.nav-locked{overflow:hidden;} /* ══ 5. AUDIENCE TOGGLE ═════════════════════════════════════════════ */ body.nx .toggle{ display:inline-flex;padding:4px;gap:4px;border-radius:999px; background:var(--paper-2);border:1px solid var(--edge); box-shadow:inset 0 1px 2px rgba(11,17,32,.03); } /* Two forms of the same control: buttons on the landing (they retune the page in place) and links on the entrances (they navigate between the two routes). Identical to look at, so the control reads as persistent even though its mechanics change. */ body.nx .toggle button,body.nx .toggle a{ display:inline-flex;align-items:center;gap:8px; padding:10px 20px;border:0;border-radius:999px;cursor:pointer; background:transparent;color:var(--mu); font-size:14.5px;font-weight:600;letter-spacing:normal; transition:background .32s var(--ease),color .32s var(--ease),box-shadow .32s var(--ease); } body.nx .toggle button .ico,body.nx .toggle a .ico{width:18px;height:18px;} body.nx .toggle button[aria-selected="true"], body.nx .toggle a[aria-current="page"]{ background:var(--paper);color:var(--ink);box-shadow:var(--sh-1); } body.nx .toggle button[aria-selected="true"] .ico, body.nx .toggle a[aria-current="page"] .ico{color:var(--acc);} body.nx .toggle a:not([aria-current="page"]):hover{color:var(--ink);} body.nx .toggle-sm button,body.nx .toggle-sm a{padding:7px 14px;font-size:13.5px;} body.nx .toggle-sm button .ico,body.nx .toggle-sm a .ico{width:16px;height:16px;} /* The two path sections, in a fixed order set by the markup. This was a reorderable region — the `.swapping` fade and the `order` juggling that went with it are gone along with the reorder itself. */ body.nx .paths{display:flex;flex-direction:column;} /* Per-audience hero framing. Both blocks ship in the markup; only the active one occupies layout, so switching cannot reflow anything above it and the headline keeps its (no textContent surgery). */ body.nx [data-hero]{display:none;} body.nx[data-audience="employer"] [data-hero="employer"], body.nx[data-audience="candidate"] [data-hero="candidate"]{display:block;} html.motion body.nx [data-hero]{animation:nx-fade .4s var(--ease) both;} @keyframes nx-fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* ══ 6. HERO ════════════════════════════════════════════════════════ */ body.nx .hero{ position:relative;isolation:isolate;overflow:hidden; padding:calc(var(--nav) + clamp(56px,8vw,104px)) 0 clamp(56px,8vw,96px); } /* gradient mesh — three blooms that retint with the active accent */ body.nx .hero-bg{ position:absolute;inset:-20% 0 -10%;z-index:-1;pointer-events:none; background: radial-gradient(760px 480px at 14% 6%, color-mix(in srgb,var(--acc) 20%,transparent), transparent 62%), radial-gradient(680px 460px at 88% 0%, color-mix(in srgb,var(--acc-2) 15%,transparent), transparent 60%), radial-gradient(900px 560px at 50% 108%, var(--acc-soft), transparent 58%); transition:background 1s var(--ease); will-change:transform; } /* faint grid so the mesh has something to sit on */ body.nx .hero::before{ content:'';position:absolute;inset:0;z-index:-1;pointer-events:none; background-image:linear-gradient(var(--edge-soft) 1px,transparent 1px), linear-gradient(90deg,var(--edge-soft) 1px,transparent 1px); background-size:72px 72px; mask-image:radial-gradient(720px 420px at 50% 30%,#000,transparent 75%); -webkit-mask-image:radial-gradient(720px 420px at 50% 30%,#000,transparent 75%); opacity:.6; } body.nx .hero-in{position:relative;max-width:940px;margin-inline:auto;text-align:center;} body.nx .hero h1{margin:26px auto 20px;max-width:15ch;} body.nx .hero h1 em{ font-style:normal; background:linear-gradient(100deg,var(--acc),var(--acc-2) 60%,var(--acc)); -webkit-background-clip:text;background-clip:text;color:transparent; } /* The word-splitter wraps each word in an inline-block, and an inline-block child is its own box — the parent's background-clip:text no longer paints through it, so the text renders transparent on transparent (i.e. invisible). Re-apply the gradient per word. */ body.nx .hero h1 em .word{ background:linear-gradient(100deg,var(--acc),var(--acc-2) 70%,var(--acc)); -webkit-background-clip:text;background-clip:text;color:transparent; } body.nx .hero .lead{margin:0 auto 34px;max-width:56ch;} body.nx .hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:44px;} body.nx .hero-cta .btn{padding:15px 30px;font-size:15.5px;} /* stat strip */ body.nx .stats{ display:grid;grid-template-columns:repeat(3,1fr); max-width:760px;margin-inline:auto; border:1px solid var(--edge);border-radius:var(--r-lg); background:color-mix(in srgb,var(--paper) 76%,transparent); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); box-shadow:var(--sh-1);overflow:hidden; } body.nx .stats div{padding:22px 18px;text-align:center;border-right:1px solid var(--edge);} body.nx .stats div:last-child{border-right:0;} body.nx .stats b{ display:block;font-size:clamp(28px,3.6vw,40px);font-weight:700; letter-spacing:normal;color:var(--ink);line-height:1; font-variant-numeric:tabular-nums; } body.nx .stats b .u{color:var(--acc);} body.nx .stats span{display:block;margin-top:7px;font-size:13px;color:var(--mu);line-height:1.4;} /* badge */ body.nx .badge{ display:inline-flex;align-items:center;gap:9px;padding:6px 16px 6px 7px; border-radius:999px;background:var(--paper);border:1px solid var(--edge); box-shadow:var(--sh-1);font-size:13.5px;color:var(--mu); } body.nx .badge b{ padding:3px 10px;border-radius:999px;background:var(--acc-soft);color:var(--acc); font-size:10.5px;font-weight:700;letter-spacing:1.1px;text-transform:uppercase; } /* ══ 7. MARQUEE ═════════════════════════════════════════════════════ */ body.nx .proof{padding:44px 0;border-block:1px solid var(--edge);background:var(--paper);} body.nx .proof p{text-align:center;font-size:13.5px;color:var(--mu);margin-bottom:26px;} /* Wide edge fade. The reference ramps a logo from invisible to solid over roughly a fifth of the strip, so names dissolve rather than getting clipped at a hard edge — that long dissolve is most of what makes the motion read as continuous instead of as a list sliding under a window. 8% was too tight to see: a logo went from cut-off to opaque inside its own width. */ body.nx .marquee{ position:relative;overflow:hidden; --fade:20%; mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent); -webkit-mask-image:linear-gradient(90deg,transparent,#000 var(--fade),#000 calc(100% - var(--fade)),transparent); } /* On a phone a 20% ramp either side leaves almost nothing solid in the middle, so the fade tightens as the strip narrows. */ @media (max-width:700px){ body.nx .marquee{--fade:12%;} } body.nx .marquee-track{display:flex;width:max-content;} html.motion body.nx .marquee-track{animation:nx-marquee var(--speed,42s) linear infinite;} body.nx .marquee:hover .marquee-track, body.nx .marquee:focus-within .marquee-track{animation-play-state:paused;} /* Track holds the list twice; -50% lands exactly on the seam. */ @keyframes nx-marquee{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}} body.nx .marquee-track ul{ display:flex;align-items:center;gap:clamp(38px,6vw,76px); padding-right:clamp(38px,6vw,76px);list-style:none;margin:0; } /* Logo lockups: a filled mark beside a wordmark, the way a real client strip is built. One uniform grey for the whole row — a client strip is a list of names, and letting eight brand colours in turns the quietest band on the page into the loudest. Colour arrives on hover. */ body.nx .marquee-track li{ color:var(--dim);white-space:nowrap; opacity:.9;transition:color .2s,opacity .2s; } body.nx .marquee-track li:hover{color:var(--ink-2);opacity:1;} body.nx .lockup{display:inline-flex;align-items:center;gap:10px;} /* Sized off the cap height of the name beside it, so mark and word look like one object rather than an icon with a caption. */ body.nx .lk-mark{width:26px;height:26px;flex:none;fill:currentColor;} body.nx .lk-name{ font-size:20px;font-weight:600;letter-spacing:normal;line-height:1; } /* Per-brand typographic variation. Without it eight names in one weight read as a menu, not as eight different companies' logos — that sameness is the giveaway that a strip is placeholder text. */ body.nx .lk-strong .lk-name{font-weight:700;letter-spacing:-.02em;} body.nx .lk-light .lk-name{font-weight:400;font-size:21px;} body.nx .lk-wide .lk-name{font-weight:500;letter-spacing:.14em;} body.nx .lk-caps .lk-name{font-weight:700;text-transform:uppercase;font-size:17px;letter-spacing:.06em;} /* ══ 8. STEPS + PINNED MEDIA ════════════════════════════════════════ */ body.nx .pinned{ display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(32px,5vw,80px);align-items:start; } body.nx .pinned.mirror{direction:rtl;} body.nx .pinned.mirror>*{direction:ltr;} body.nx .steps{display:flex;flex-direction:column;gap:8px;} body.nx .step{ position:relative;display:grid;grid-template-columns:auto 1fr;gap:18px; padding:22px 22px 22px 20px;border-radius:var(--r); border:1px solid transparent; transition:background .4s var(--ease),border-color .4s var(--ease),box-shadow .4s var(--ease); } body.nx .step.on{ background:var(--paper);border-color:var(--edge);box-shadow:var(--sh-1); } body.nx .step-n{ width:40px;height:40px;border-radius:12px;display:grid;place-items:center; font-size:14px;font-weight:700;font-variant-numeric:tabular-nums; background:var(--paper-3);color:var(--dim); border:1px solid var(--edge); transition:background .4s var(--ease),color .4s var(--ease),border-color .4s var(--ease); } body.nx .step.on .step-n{background:var(--acc);color:#fff;border-color:var(--acc);} body.nx .step h3{margin-bottom:7px;font-size:20px;} body.nx .step p{font-size:14.5px;line-height:1.62;color:var(--mu);} body.nx .step ul{margin:12px 0 0;padding:0;list-style:none;display:grid;gap:7px;} body.nx .step li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;color:var(--mu);} body.nx .step li .ico{width:16px;height:16px;color:var(--acc);margin-top:2px;} /* progress rail — fills as the steps scrub past */ body.nx .rail{ position:absolute;left:0;top:0;bottom:0;width:2px;border-radius:2px; background:var(--edge);overflow:hidden; } body.nx .rail i{ display:block;width:100%;height:var(--p,0%);background:var(--acc); border-radius:2px;transition:height .18s linear; } /* the pinned column */ body.nx .pin-media{ position:sticky;top:calc(var(--nav-sm) + 28px); border-radius:var(--r-lg);overflow:hidden; border:1px solid var(--edge);background:var(--paper);box-shadow:var(--sh-2); } body.nx .pin-stage{position:relative;aspect-ratio:4/3.15;background:var(--paper-2);} body.nx .pin-state{ position:absolute;inset:0;padding:clamp(18px,2.6vw,30px); display:flex;flex-direction:column;gap:12px; opacity:0;transform:scale(.985); transition:opacity .5s var(--ease),transform .5s var(--ease); } body.nx .pin-state.on{opacity:1;transform:none;} body.nx .pin-bar{ display:flex;align-items:center;gap:8px;padding:11px 14px; border-bottom:1px solid var(--edge);background:var(--paper); } body.nx .pin-bar i{width:10px;height:10px;border-radius:999px;background:var(--paper-3);display:block;} body.nx .pin-bar span{ margin-left:8px;font-size:12px;color:var(--dim); padding:4px 12px;border-radius:999px;background:var(--paper-2);border:1px solid var(--edge); } /* mock UI atoms used inside the stage */ body.nx .m-card{ background:var(--paper);border:1px solid var(--edge);border-radius:14px; padding:15px 16px;box-shadow:var(--sh-1); } body.nx .m-row{display:flex;align-items:center;gap:12px;} body.nx .m-av{ width:36px;height:36px;border-radius:999px;flex:none;display:grid;place-items:center; background:var(--acc-soft);color:var(--acc);font-size:13px;font-weight:700; } body.nx .m-t{font-size:14px;font-weight:650;color:var(--ink);} body.nx .m-s{font-size:12px;color:var(--mu);margin-top:1px;} body.nx .m-score{margin-left:auto;font-size:20px;font-weight:700;color:var(--acc); font-variant-numeric:tabular-nums;letter-spacing:normal;} body.nx .m-bars{display:grid;gap:9px;margin-top:14px;} body.nx .m-bar{display:grid;grid-template-columns:74px 1fr 30px;align-items:center;gap:11px; font-size:12px;color:var(--mu);} body.nx .m-track{height:7px;border-radius:99px;background:var(--paper-3);overflow:hidden;} body.nx .m-fill{height:100%;border-radius:99px;background:var(--acc); transition:width .9s var(--ease);} body.nx .m-bar b{text-align:right;color:var(--ink);font-weight:650;font-variant-numeric:tabular-nums;} body.nx .m-line{height:9px;border-radius:99px;background:var(--paper-3);} body.nx .m-chip{ display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px; background:var(--acc-soft);color:var(--acc);font-size:12px;font-weight:600; } body.nx .m-chip .ico{width:15px;height:15px;} /* ══ 9. SHOWCASE ════════════════════════════════════════════════════ */ body.nx .showcase{ display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(34px,5vw,74px);align-items:center; } body.nx .device{ position:relative;border-radius:var(--r-xl);padding:12px; background:linear-gradient(150deg,color-mix(in srgb,var(--acc) 24%,transparent),transparent 55%),var(--paper-2); border:1px solid var(--edge);box-shadow:var(--sh-3); } body.nx .device-screen{ border-radius:calc(var(--r-xl) - 12px);overflow:hidden; background:var(--paper);border:1px solid var(--edge); } body.nx .device-body{padding:18px;display:grid;gap:11px;} body.nx .callouts{display:grid;gap:14px;margin-top:34px;} body.nx .callout{ display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center; padding:20px 22px;border-radius:var(--r); background:var(--paper);border:1px solid var(--edge);box-shadow:var(--sh-1); } body.nx .callout b{ display:block;font-size:clamp(26px,3vw,34px);font-weight:700;letter-spacing:normal; color:var(--ink);line-height:1;font-variant-numeric:tabular-nums; } body.nx .callout b .u{color:var(--acc);} body.nx .callout span{display:block;font-size:13.5px;color:var(--mu);margin-top:5px;} /* ══ 10. CARDS ══════════════════════════════════════════════════════ */ body.nx .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;} body.nx .card-x{ display:flex;flex-direction:column;padding:30px 28px;border-radius:var(--r-lg); background:var(--paper);border:1px solid var(--edge);box-shadow:var(--sh-1); transform-style:preserve-3d; transition:box-shadow .32s var(--ease),border-color .32s var(--ease),transform .32s var(--ease); } body.nx .card-x:hover{box-shadow:var(--sh-3);border-color:color-mix(in srgb,var(--acc) 30%,var(--edge));} body.nx .card-x>*{transform:translateZ(24px);} body.nx .card-x h4{margin:20px 0 9px;font-size:19px;} body.nx .card-x p{font-size:14px;line-height:1.62;color:var(--mu);flex:1;margin-bottom:22px;} /* The card closes on a real bordered button rather than an arrow link. `align-self` keeps it at its own width instead of stretching across the card — a full-width button in a three-up row reads as the primary action of the page, which it is not. `margin-top:auto` is what lines the three buttons up with each other when the copy runs to different lengths. */ body.nx .card-x .btn{align-self:flex-start;margin-top:auto;} body.nx .card-x .tagx{ align-self:flex-start;padding:4px 11px;border-radius:999px; background:var(--acc-soft);color:var(--acc); font-size:10.5px;font-weight:700;letter-spacing:.9px;text-transform:uppercase; } body.nx .card-x .go{ display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;color:var(--acc); } body.nx .card-x .go .ico{width:18px;height:18px;transition:transform .24s var(--ease);} body.nx .card-x:hover .go .ico{transform:translateX(4px);} /* value grid (entrances) */ body.nx .vgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;} /* Exactly four items go to a single four-up row. At three columns the fourth drops alone onto a second row, and a lone card under a full row reads as something that failed to load rather than as the fourth of four. Counts of 3 and 6 already divide evenly, so they keep three. Browsers without :has() simply ignore this and get today's layout. */ body.nx .vgrid:has(> .vitem:nth-child(4):last-child){grid-template-columns:repeat(4,1fr);} body.nx .vitem{ padding:26px 24px;border-radius:var(--r); background:var(--paper);border:1px solid var(--edge);box-shadow:var(--sh-1); } body.nx .vitem h4{margin:16px 0 8px;} body.nx .vitem p{font-size:14px;line-height:1.6;color:var(--mu);} /* faq */ body.nx .faq{border-top:1px solid var(--edge);max-width:820px;} body.nx .faq details{border-bottom:1px solid var(--edge);} body.nx .faq summary{ display:flex;align-items:center;justify-content:space-between;gap:18px; padding:20px 2px;cursor:pointer;list-style:none; font-size:17px;font-weight:600;color:var(--ink); } body.nx .faq summary::-webkit-details-marker{display:none;} /* Same rule as .accordion above: the marker carries the state, the type stays one colour. */ body.nx .faq .pm{ width:28px;height:28px;flex:none;border-radius:999px;display:grid;place-items:center; border:1px solid var(--edge);color:var(--mu); transition:transform .26s var(--ease),background .26s,color .18s; } body.nx .faq summary:hover .pm{color:var(--ink);} body.nx .faq details[open] .pm{transform:rotate(45deg);background:var(--paper-3);color:var(--ink);} body.nx .faq details p{padding:0 2px 22px;font-size:14.5px;line-height:1.65;color:var(--mu);max-width:62ch;} /* ══ 11. CTA BAND ═══════════════════════════════════════════════════ A white card inside a thick gradient rule. The border is painted with two backgrounds and two clip boxes — the flat one fills the padding-box (the card face), the gradient fills the border-box, and the transparent border lets the gradient show only in the ring. One element, no wrapper div, and the radius stays continuous because a border curves with it. `background-clip` is the whole trick: without the padding-box layer the gradient would sit behind the text too. */ body.nx .band{ --band-ring:6px; position:relative;border-radius:clamp(28px,3.2vw,44px); /* Shallow on purpose. The reference card is close to 3:1, and the deep padding that suits a full-width section makes a bordered card read as a box with a lot of nothing in it. */ padding:clamp(44px,5.4vw,64px) clamp(24px,4vw,64px);text-align:center; border:var(--band-ring) solid transparent; background: linear-gradient(var(--paper),var(--paper)) padding-box, /* The pale stop near the middle is doing real work: a ring that stays saturated the whole way round draws a hard racetrack and pulls the eye around the edge instead of into the card. Letting it wash out where the headline sits keeps the colour at the corners. */ linear-gradient(100deg, #2dd4bf 0%, #4f8ef7 15%, #e8edf4 38%, #ecf0f5 58%, #c9b6f8 82%, #9061f9 100%) border-box; box-shadow:var(--sh-2); } /* Aria's mark, centred above the headline. It reuses the standard icon plate rather than inventing a third avatar treatment — same tile as the cards, only centred. */ body.nx .band-avatar{margin:0 auto 24px;} /* Wide enough that the only line break is the authored
before the agent's name. A tighter measure re-wraps the first line and the name stops reading as its own beat. */ body.nx .band h2{max-width:34ch;margin:0 auto 18px;} /* The agent's name in the brand green running to blue — the same sweep the ring opens with, so the card reads as one object rather than a frame with unrelated text inside. */ body.nx .band h2 em{ font-style:normal; background:linear-gradient(95deg,#22c07f,#3b82f6); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } body.nx .band .lead{margin:0 auto 32px;max-width:64ch;} body.nx .band-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;} /* ══ 12. FOOTER ═════════════════════════════════════════════════════ */ /* Quiet by design: no tinted ground, no divider rules, no bottom bar. The footer separates from the page by whitespace alone — every hairline that was in here previously was drawing a box around content that is already obviously a footer. */ /* One full-bleed rule closes the page and opens the footer. It sits on the footer rather than on the last section so it lands in the same place no matter which section a page happens to end on, and it runs edge to edge because .foot is full-width — putting it inside .wrap would stop it at the content column and read as a divider between two blocks instead of the boundary of the page. Everything inside the footer stays ruleless. */ /* Measured off hackajob's live footer at a 1440 viewport, not sampled from a screenshot: footer border-top 4px solid #000, white, padding 50px 0 .footer__inner full-bleed, 15px gutters (their max-width is 2560) .footer__logo 216x46, 40px of air beneath .footer__row flex, three columns at exactly 33.3333%, bottom- aligned so the socials land on the row's baseline .footer__link 18px / 36px / weight 300 / #656565 / no underline .footer__office 18px / 24px / weight 300, 22.5px apart .footer__social flex-end, 45px circles, 2px border, 9px apart The rule that closes the page is theirs too — 4px, not the hairline we had. The dark variant keeps every measurement and moves only the ink. */ body.nx .foot{ --foot-ink:#656565; background:#fff; border-top:4px solid #000; padding:50px 0; } /* Their footer runs edge to edge while the pages above it stay in a column, so the 15px gutter is the whole inset. Ours has to opt out of .wrap's max-width to land in the same place. */ body.nx .foot > .wrap{max-width:none;padding:0 15px;} body.nx .foot-mark{display:block;margin:0 0 40px;} body.nx .foot-mark img{display:block;height:46px;width:auto;} /* Columns stretch so their content starts at the top of the row, as the reference's address stack does. Only the socials opt out and drop to the baseline — align-self:flex-end shrinks that one column to its own height, which is what puts the icons on the bottom-right corner. */ body.nx .foot-grid{display:flex;align-items:stretch;gap:0;} body.nx .foot-grid > *{flex:0 0 33.3333%;min-width:0;} body.nx .foot-grid .socials{align-self:flex-end;} body.nx .foot ul{list-style:none;display:block;margin:0;padding:0;} body.nx .foot li{line-height:36px;} body.nx .foot li a{ font-size:18px;line-height:36px;font-weight:300; color:var(--foot-ink);text-decoration:none;transition:color .15s; } body.nx .foot li a:hover{color:#1c1c1c;text-decoration:underline;} body.nx .foot-contact address, body.nx .foot-copy{ font-style:normal;font-size:18px;line-height:24px;font-weight:300; color:var(--foot-ink);margin:0 0 22.5px; } body.nx .foot-copy{margin-bottom:0;} /* Borderless, at the foot of the link column like the reference's lone globe. The language name stays visible — a bare globe gives no clue which language is currently active. */ body.nx .locale{ display:inline-flex;align-items:center;gap:8px;margin-top:10px; color:var(--foot-ink);font-size:18px;font-weight:300;cursor:pointer; } body.nx .locale .ico{width:19px;height:19px;} /* The markup has carried this class since the first build but it was never defined, so "Language" printed next to the globe instead of being read only by assistive tech. */ body.nx .visually-hidden-label{ position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0; } body.nx .locale select{border:0;background:none;font:inherit;color:inherit;cursor:pointer;} body.nx .socials{display:flex;justify-content:flex-end;gap:9px;margin-bottom:18px;} body.nx .socials a{ width:45px;height:45px;display:grid;place-items:center; border:2px solid var(--foot-ink);background:none;color:var(--foot-ink); transition:color .16s,border-color .16s; } body.nx .socials a:hover{color:#1c1c1c;border-color:#1c1c1c;} /* skip link */ body.nx .skip{ position:absolute;left:-9999px;top:8px;z-index:400;padding:12px 20px; background:var(--acc);color:#fff;border-radius:999px;font-weight:600; } body.nx .skip:focus{left:var(--gut);} /* ══ 13. RESPONSIVE ═════════════════════════════════════════════════ */ @media (max-width:1080px){ /* Socials drop out of the row and sit under the addresses rather than being squeezed into a third track that has no room left. */ body.nx .foot-grid{flex-wrap:wrap;row-gap:40px;} body.nx .foot-grid > *{flex:0 0 50%;} body.nx .foot-grid .socials{justify-content:flex-start;} } @media (max-width:960px){ body.nx .mega,body.nx .nav-right .login-split, body.nx .nav-right .btn-primary{display:none;} body.nx .burger{display:grid;} body.nx .nav-spacer{flex:1;} body.nx .pinned{grid-template-columns:1fr;} body.nx .pinned.mirror{direction:ltr;} body.nx .pin-media{position:relative;top:0;order:-1;margin-bottom:26px;} body.nx .showcase{grid-template-columns:1fr;} body.nx .cards,body.nx .vgrid{grid-template-columns:1fr 1fr;} } @media (max-width:640px){ /* The taller desktop bar eats too much of a phone screen, so both states come back down together — keeping the pair in step, or the mark jumps size on scroll. */ :root{--nav:72px;--nav-sm:64px;} body.nx .wordmark img{height:40px;} body.nx .nav.is-solid .wordmark img{height:34px;} body.nx .stats{grid-template-columns:1fr;} body.nx .stats div{border-right:0;border-bottom:1px solid var(--edge);} body.nx .stats div:last-child{border-bottom:0;} body.nx .cards,body.nx .vgrid{grid-template-columns:1fr;} body.nx .foot-grid > *{flex:0 0 100%;} body.nx .hero-cta{flex-direction:column;align-items:stretch;} body.nx .hero-cta .btn{width:100%;} body.nx .toggle{width:100%;} body.nx .toggle button{flex:1;justify-content:center;padding:11px 12px;} body.nx .m-bar{grid-template-columns:62px 1fr 26px;} } /* ══ 14. SUB-PAGES ══════════════════════════════════════════════════ The entrance pages own the big cinematic hero; the pages hanging off the menu are reference material, so they get a compact head and lean on tables and prose instead. Everything below still reads --acc, so a jobseeker page is teal and an employer page indigo with no variants. */ body.nx .hero-sm{padding:calc(var(--nav) + clamp(38px,5vw,64px)) 0 clamp(34px,4.4vw,56px);} body.nx .hero-sm h1{font-size:clamp(32px,4.8vw,58px);} /* standalone check list (the one inside .step is scoped to it) */ body.nx .checks{margin:14px 0 0;padding:0;list-style:none;display:grid;gap:8px;} body.nx .checks li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--mu);line-height:1.55;} body.nx .checks li .ico{width:17px;height:17px;color:var(--acc);margin-top:2px;flex:none;} /* data table — salary bands, stage breakdowns. Scrolls in its own box rather than pushing the page sideways on a phone. */ body.nx .tbl-wrap{overflow-x:auto;border:1px solid var(--edge);border-radius:var(--r);background:var(--paper);} body.nx .tbl{width:100%;border-collapse:collapse;min-width:560px;font-size:14.5px;} body.nx .tbl th,body.nx .tbl td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--edge-soft);} body.nx .tbl th{ font-size:11.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase; color:var(--dim);background:var(--paper-2);white-space:nowrap; } body.nx .tbl tr:last-child td{border-bottom:0;} body.nx .tbl td b{color:var(--ink);font-weight:600;} body.nx .tbl .num{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink);font-weight:600;} /* prose — blog bodies and long-form guidance */ body.nx .prose{max-width:68ch;} body.nx .prose h3{margin:38px 0 12px;} body.nx .prose p{margin:0 0 16px;font-size:16.5px;line-height:1.7;color:var(--mu);} body.nx .prose p b,body.nx .prose strong{color:var(--ink);font-weight:600;} /* pricing */ body.nx .plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px;} body.nx .plan{ display:flex;flex-direction:column;gap:14px;padding:28px; border:1px solid var(--edge);border-radius:var(--r-lg);background:var(--paper); box-shadow:var(--sh-1); } body.nx .plan.feature{border-color:var(--acc);box-shadow:var(--sh-2);} /* The cap is 36px, not 42px, because the cap has to fit the longest price on the row rather than the shortest. A column is ~217px inside its padding, and at 42px "Договорная" needs 250px: it overflowed the card and "Бесплатно / всегда" wrapped to two lines, which pushed that card's feature list out of step with the others. Every price is the same size either way — this is the size at which they all look it. */ body.nx .plan .price{font-size:clamp(26px,2.4vw,30px);font-weight:700;color:var(--ink); line-height:1;white-space:nowrap;} body.nx .plan .price small{font-size:14px;font-weight:500;color:var(--mu);margin-left:4px;} body.nx .plan .btn{margin-top:auto;} /* ══ 15. MEGA PANEL — GROUPED VARIANT ═══════════════════════════════ The employer panel is a different animal from the jobseeker one: four titled groups, and the lead group carries rich items (icon tile + name + one line of what it is) rather than bare links. Both variants share .mega-panel, so the open/close/keyboard logic is untouched. */ body.nx .mega-cols.cols-4{ grid-template-columns:1.55fr 1fr 1fr 1fr; gap:0 clamp(20px,2.4vw,40px); } body.nx .mega-col h5{ font-size:22px;font-weight:500;line-height:1.2;color:var(--ink); margin:0;letter-spacing:normal; } body.nx .mega-rich{display:flex;gap:14px;align-items:flex-start;} /* When the tile holds Aria's portrait it drops the gradient and clips the image; the neighbouring Talent-intelligence tile still gets the tinted plate and its glyph. Keeping the rounded-SQUARE shape is deliberate — the shape belongs to the menu row, the content belongs to Aria, and a lone circle beside a squircle would break the row. */ body.nx .mega-rich .tile:has(img){background:none;border:0;overflow:hidden;} body.nx .mega-rich .tile img{width:100%;height:100%;object-fit:cover;display:block;} body.nx .mega-rich .tile{ flex:none;width:46px;height:46px;border-radius:13px; display:grid;place-items:center;color:var(--acc); background:linear-gradient(150deg,var(--acc-soft),color-mix(in srgb,var(--acc) 20%,transparent)); border:1px solid color-mix(in srgb,var(--acc) 20%,transparent); transition:transform .22s var(--ease),box-shadow .22s var(--ease); } body.nx .mega-rich .tile .ico{width:22px;height:22px;} body.nx .mega-rich b{display:block;font-size:16px;font-weight:600;color:var(--ink);} body.nx .mega-rich span{ display:block;font-size:14px;color:var(--mu);margin-top:3px;line-height:1.45; } /* The rich rows are whole-block targets, so the underline used on bare links would be wrong here — lift the tile instead. */ body.nx .mega-rich::after{display:none;} body.nx .mega-rich:hover{color:inherit;} body.nx .mega-rich:hover b{color:var(--acc);} body.nx .mega-rich:hover .tile{ transform:translateY(-2px); box-shadow:0 8px 20px color-mix(in srgb,var(--acc) 26%,transparent); } @media (max-width:1100px){ body.nx .mega-cols.cols-4{grid-template-columns:1.4fr 1fr 1fr;} body.nx .mega-cols.cols-4 .mega-col:last-child{grid-column:2 / -1;} } /* ══ 16. SQUARED CONTROLS ═══════════════════════════════════════════ Every interactive control drops the pill for a squared corner, per the reference. One token so the whole set moves together — set --r-btn to 0 for hard corners, or back to 999px to undo. Scope note: this squares CONTROLS (things you press), not the decorative pills — status chips, tags and the score badges stay rounded, because they are labels and squaring them would make them read as buttons. */ body.nx .btn, body.nx .skip, body.nx .locale, body.nx .burger, body.nx .drawer-close{border-radius:var(--r-btn);} /* app.css re-pills the nav buttons; this is the marketing surface, so it wins here without touching the product pages. */ body.nx .nav-right .btn{border-radius:var(--r-btn);} body.nx .toggle{border-radius:calc(var(--r-btn) + 3px);} body.nx .toggle button,body.nx .toggle a{border-radius:calc(var(--r-btn) - 2px);} /* The socials are the one exception to the squared set: the reference draws them as circles, and they are icon links rather than controls you press. */ body.nx .socials a{border-radius:999px;} /* ══ 18. SCROLL-LINKED MOTION ═══════════════════════════════════════ CSS scroll-driven animations: the progress of each effect is tied to where the element sits in the viewport, so it tracks the scrollbar exactly and reverses when you scroll back up. This is deliberately NOT the old wheel-lerp. Nothing here intercepts input or moves the page — the browser scrolls at whatever speed the reader's hardware and OS settings say, and these animations just read that position. Zero scroll listeners, zero rAF loops; it runs on the compositor. Gated three ways: @supports → browsers without scroll timelines get nothing html.motion → set only after the reduced-motion check so the fallback everywhere else is a fully readable static page. */ @supports (animation-timeline: view()) { /* ── rise: enters as it crosses the lower third, settles by mid-screen. Range ends at cover 42% so the element is fully resolved while it is still being read, not still animating under the reader's eye. ── */ html.motion [data-scroll-fx="rise"]{ animation:nx-rise linear both; animation-timeline:view(block); animation-range:entry 8% cover 42%; } @keyframes nx-rise{ from{opacity:0;transform:translateY(34px) scale(.985)} to {opacity:1;transform:none} } /* ── zoom: media resolves from a slight overscale. Reads as the shot settling into place rather than sliding around. ── */ html.motion [data-scroll-fx="zoom"]{ animation:nx-zoom linear both; animation-timeline:view(block); animation-range:entry 0% cover 55%; } @keyframes nx-zoom{ from{opacity:.4;transform:scale(1.06)} to {opacity:1;transform:none} } /* ── drift: continuous parallax across the element's whole pass, for decorative layers only. Never put text in one — it moves the entire time it is on screen. ── */ html.motion [data-scroll-fx="drift"]{ animation:nx-drift linear both; animation-timeline:view(block); animation-range:cover 0% cover 100%; } @keyframes nx-drift{ from{transform:translateY(-22px)} to {transform:translateY(22px)} } /* A `sink` effect (section head receding on exit) was here and is removed. With animation-range on the exit phase plus fill:both, a tall viewport leaves the element already past the range start, so it resolves to the `to` keyframe — opacity 0 — while the heading is still fully on screen. Verified: two headings on /customers were invisible in view. An effect that can hide readable text is not worth a flourish, so it is gone rather than tuned. The lesson generalises: only animate opacity toward 1 on anything containing text, never away from it. `rise` and `zoom` both end at fully-visible, which is why they are safe. */ } /* Reduced motion: strip every one of them. */ @media (prefers-reduced-motion:reduce){ [data-scroll-fx]{animation:none !important;opacity:1 !important;transform:none !important;} } /* ══ 19. HERO — CENTRED VARIANT ═════════════════════════════════════ One headline for both audiences, with the path choice made by the two buttons underneath rather than by a segmented control above. The buttons are still the audience switch: choosing one retunes --acc and reorders the sections below. */ body.nx .hero-centred{ display:flex;flex-direction:column;align-items:center;text-align:center; } body.nx .hero-centred h1{max-width:16ch;margin:0 0 22px;} body.nx .hero-centred .lead{max-width:56ch;margin:0 auto 34px;} /* NEW: Meet Aria */ body.nx .hero-badge{ display:inline-flex;align-items:center;gap:10px; padding:7px 18px 7px 7px;margin-bottom:clamp(24px,3vw,38px); border-radius:999px; /* a label, not a control */ background:var(--paper);border:1px solid var(--edge); box-shadow:var(--sh-1); font-size:15px;font-weight:500;color:var(--ink); transition:box-shadow .22s var(--ease),transform .22s var(--ease),border-color .18s; } body.nx .hero-badge:hover{ transform:translateY(-1px);box-shadow:var(--sh-2);border-color:var(--dim); } body.nx .hero-badge b{color:var(--acc);font-weight:700;} body.nx .hero-badge .avatar{ width:30px;height:30px;border-radius:999px;flex:none; display:grid;place-items:center;color:#fff; background:linear-gradient(150deg,var(--acc-2),var(--acc)); } body.nx .hero-badge .avatar .ico{width:17px;height:17px;} /* the two paths */ body.nx .hero-paths{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;} body.nx .hero-paths .btn{min-width:168px;} /* The unchosen side must still read as a real option, so it keeps a full border rather than fading to a ghost. */ body.nx .hero-paths .btn[aria-selected="false"]{ background:var(--paper);border-color:var(--ink-2);color:var(--ink); } /* Same dark fill as every other secondary button. This selector outranks the generic .btn:hover, so it has to restate it or the hero would be the one place the new hover does not happen. */ body.nx .hero-paths .btn[aria-selected="false"]:hover{ background:var(--ink);border-color:var(--ink);color:var(--paper); } /* Selected takes the brand fill like every other primary button. The chosen path is already signalled by fill-vs-outline here and by the whole page below retuning to that temperature, so this does not need to carry the accent as well — and one indigo button in a green button system reads as a mistake, not as meaning. */ body.nx .hero-paths .btn[aria-selected="true"]{ background:var(--brand);border-color:var(--brand);color:var(--brand-ink); } /* proof strip — one pill, three checks */ body.nx .proof-pill{ display:flex;flex-wrap:wrap;justify-content:center;align-items:center; gap:6px clamp(14px,2vw,26px); margin-top:clamp(28px,3.4vw,44px);padding:10px 22px; border-radius:999px;background:var(--paper);border:1px solid var(--edge); box-shadow:var(--sh-1); } body.nx .proof-pill span{ display:inline-flex;align-items:center;gap:8px; font-size:13.5px;font-weight:500;color:var(--mu);white-space:nowrap; } body.nx .proof-pill .ico{width:15px;height:15px;color:var(--acc);} @media (max-width:640px){ body.nx .proof-pill{border-radius:var(--r-lg);padding:14px 18px;} body.nx .hero-paths .btn{min-width:0;flex:1 1 auto;} } /* ══ 20. THE TOUR ═══════════════════════════════════════════════════ A gradient-framed player. The border runs teal → indigo: the two audience temperatures meeting, which is the product's whole premise, so the frame carries meaning rather than just colour. Built as padding on the outer element with the gradient as its background, and an opaque inner — a real gradient border, not four borders faked with pseudo-elements, so it survives any radius. */ body.nx .tour-sec{padding-top:0;} body.nx .tour-frame{ padding:3px;border-radius:calc(var(--r-xl) + 3px); background:linear-gradient(120deg,var(--candidate) 0%,var(--candidate-2) 22%,var(--employer-2) 72%,var(--employer) 100%); box-shadow:var(--sh-3); } body.nx .tour-inner{ position:relative;border-radius:var(--r-xl);overflow:hidden; background:var(--paper-2); aspect-ratio:16/9; display:grid;place-items:center; } /* The still is the product, scaled to sit inside the frame. Replaced wholesale the moment a real