/* ============================================================ Betihuti scroll-cinematic — warm cream theme ============================================================ */ :root { --paper: #fbf7ef; --surface: #fffdf8; --ink: #16211f; --ink-2: #3d4a47; --muted: #61706c; --teal: #1f5a43; --teal-ink: #17362b; --mint: #e7f0ea; --gold: #f2b705; --lavender: #8b7bd8; --coral: #e36f55; --line: #e6ddcd; /* Clash Display + Satoshi (Fontshare) — var names kept for call sites */ --serif: "Clash Display", "Fraunces", Georgia, sans-serif; --sans: "Satoshi", "Inter", system-ui, sans-serif; --shadow: 0 8px 44px rgba(20, 30, 28, 0.09); } /* Hebrew had no font of its own here, and never had one. * * Clash Display and Satoshi are both self-hosted Latin-only faces * (fonts/fonts.css), so every Hebrew word fell through the entire stack to the * generic default - measured at 228.31px for "בטיחותי", exactly the width of * bare `sans-serif`, versus 209.5px in Heebo. The face Michael disliked was * therefore never chosen; it was whatever the OS happened to supply. * * Reuse the app's Hebrew face rather than loading a second one: --font-hebrew * is Heebo, already loaded by next/font in app/layout.tsx and inherited here * because the landing renders inside that same . This costs no extra * request and keeps the landing and the product reading identically, which is * what app/globals.css already does for lang="he". * * Scoped to :lang(he), not [dir="rtl"]: Heebo carries no Arabic glyphs, so * claiming it for Arabic would assert a fix that does not exist. * * Headlines use Secular One (Michael's pick from the options sheet); body copy * stays Heebo. Not a compromise - Secular One ships a SINGLE weight, so a * headline asking for 600 would get a synthesised faux-bold, and a display face * is tiring at paragraph settings. Both variables come from next/font in * app/layout.tsx and are inherited here. */ :root:lang(he) { --serif: var(--font-hebrew-display), "Secular One", var(--font-hebrew), sans-serif; --sans: var(--font-hebrew), "Heebo", system-ui, sans-serif; } /* Secular One has one weight. Asking for 600/700 here would make the browser smear a fake bold over a face that is already display-weight. */ :root:lang(he) .hero-copy h1, :root:lang(he) .line, :root:lang(he) .scene-copy h2, :root:lang(he) .journey-copy h3 { font-weight: 400; } .landing-page, .landing-page * { margin: 0; padding: 0; box-sizing: border-box; } html { scrollbar-width: none; } html::-webkit-scrollbar { display: none; } /* A hard fling at the end of a 23,000px page rubber-bands far past the footer on iOS, and the bounce parks a screenful of empty paper under it. */ html, body { overscroll-behavior-y: none; } body { background: radial-gradient(720px 360px at 20% -6%, rgba(31,90,67,0.10), transparent), radial-gradient(560px 300px at 84% 4%, rgba(242,183,5,0.09), transparent), var(--paper); color: var(--ink); font-family: var(--sans); overflow-x: hidden; } /* dot-grid texture */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(rgba(22,33,31,0.10) 1px, transparent 1px); background-size: 24px 24px; mask-image: radial-gradient(640px 420px at 22% 30%, black, transparent 75%); opacity: 0.5; } /* ---------- Preloader ---------- */ .preloader { position: fixed; inset: 0; z-index: 100; display: grid; place-content: center; justify-items: center; gap: 18px; background: var(--paper); transition: transform 0.9s cubic-bezier(0.76, 0, 0.24, 1); } .preloader.done { transform: translateY(-100%); pointer-events: none; } .preloader-mark { height: 60px; } /* Blueprint ring (oryzo-style drawn preloader): the teal arc draws with REAL frame-load progress; the dashed gold ring slowly rotates like a schematic. */ .preloader-hub { position: relative; width: 184px; height: 184px; display: grid; place-items: center; } .preloader-hub svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .preloader-hub .ring-track { fill: none; stroke: rgba(22,33,31,0.08); stroke-width: 2.4; } .preloader-hub .ring-val { fill: none; stroke: var(--teal); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 339.3; stroke-dashoffset: 339.3; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 0.25s linear; } .preloader-hub .ring-dash { fill: none; stroke: rgba(242,183,5,0.6); stroke-width: 1.8; stroke-dasharray: 2 7; animation: ringspin 10s linear infinite; transform-origin: 50% 50%; } @keyframes ringspin { to { transform: rotate(360deg); } } .preloader-mascot { height: 130px; animation: bob 2.4s ease-in-out infinite; } .preloader-count { font-family: var(--serif); font-size: 2.75rem; color: var(--teal-ink); font-variant-numeric: tabular-nums; } .preloader-bar { width: 300px; height: 4px; background: var(--line); border-radius: 4px; overflow: hidden; } .preloader-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--teal), var(--gold)); } /* ---------- Match Progress Rail ---------- */ .match-rail { position: fixed; right: 12px; top: 50%; transform: translateY(-50%); z-index: 40; display: grid; place-items: center; width: 82px; height: 82px; border-radius: 999px; background: rgba(251,247,239,0.70); border: 1px solid rgba(230,221,205,0.82); box-shadow: 0 8px 26px rgba(20,30,28,0.08); pointer-events: none; } .match-rail svg { width: 82px; height: 82px; transform: rotate(-90deg); } .match-rail-track { fill: none; stroke: rgba(230,221,205,0.92); stroke-width: 6; } .match-rail-val { fill: none; stroke: var(--teal); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 213.6; stroke-dashoffset: 213.6; transition: stroke-dashoffset 0.18s linear; } .match-rail-label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.05; } .match-rail-label b { display: block; font-size: 1.05rem; font-weight: 900; color: var(--teal-ink); font-variant-numeric: tabular-nums; } .match-rail-label span { display: block; margin-top: 4px; font-size: 0.52rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .match-rail.match-rail-complete { background: rgba(227,241,238,0.82); border-color: rgba(180,215,208,0.9); } /* ---------- Buttons / chips ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 24px; border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 0.95rem; transition: transform 0.25s, box-shadow 0.25s; will-change: transform; } .btn-sm { padding: 9px 18px; font-size: 0.85rem; } .btn-lg { padding: 16px 30px; font-size: 1.05rem; } .btn-teal { background: var(--teal); color: #fff; box-shadow: 0 6px 22px rgba(31,90,67,0.35); position: relative; overflow: hidden; } .btn-teal::after { /* shimmer */ content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%); transform: translateX(-100%); animation: shimmer 3.2s ease-in-out infinite; } @keyframes shimmer { 0%, 60% { transform: translateX(-100%);} 100% { transform: translateX(100%);} } .btn-ghost { background: rgba(255,253,248,0.8); color: var(--teal-ink); border: 1px solid var(--line); } .btn-ink { background: var(--ink); color: var(--paper); } .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(20,30,28,0.18); } .btn-arrow { transition: transform 0.25s; } .btn:hover .btn-arrow { transform: translateX(3px); } .chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: rgba(255,255,255,0.72); padding: 7px 13px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; color: var(--muted); box-shadow: 0 2px 10px rgba(20,30,28,0.05); } .chip-teal { background: var(--mint); color: var(--teal-ink); border-color: #b9d2c2; } .chip-lav { background: #efeafd; color: #4c3fa8; border-color: #d8cff5; } /* ---------- Scrub sections ---------- */ .scrub { position: relative; z-index: 1; } /* One continuous authored safety story. The four production anchors are cross-dissolved by the scrub engine and can later accept interpolated segments without changing this scroll geometry. */ .hero-scrub.film { height: 1780vh; } /* * The first paint only needs the hero. Let Chromium skip style, layout and * paint work for the below-the-fold chapters until they approach the * viewport. Their outer geometry remains explicit, so scroll length and every * sticky/scrub calculation stay unchanged when a chapter becomes relevant. */ .journey, .facts, .employers, .closing { content-visibility: auto; } /* oryzo-style sideways journey gallery: pinned viewport + flex track, scroll progress slides the stills horizontally (eased in site.js) */ /* colour journey: the gallery chamber deepens from paper into mint as you traverse it, handing off cleanly to the dark employers band */ .journey { position: relative; z-index: 2; height: 340vh; background: linear-gradient(180deg, var(--paper) 0%, #f3ede0 30%, #eaf1ec 70%, var(--mint) 100%); } .journey-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; align-content: center; gap: 18px; grid-template-columns: minmax(0, 1fr); } /* single-line label sits right above the track; the pair centers together */ .journey-head { text-align: center; padding: 0 22px; } .journey-head .eyebrow { margin-bottom: 0; } .journey-track { display: flex; gap: 2.5vw; width: max-content; padding: 0 7vw; will-change: transform; /* The rail follows the document's reading direction, and that is the ONLY thing that flips: site.js derives its travel range from the resulting offsetLeft values, so laying the cards out the other way reverses the sweep without any change to the script. LTR puts card one at the physical left and travels left; the [dir="rtl"] rule below puts it at the right and travels right. */ direction: ltr; } .journey-card { flex: 0 0 min(80vw, 1400px); margin: 0; position: relative; border-radius: 26px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); } [dir="rtl"] .journey-track { /* Card one belongs at the physical RIGHT in Hebrew and Arabic, so the flex rail itself must lay out RTL. This rule used to inherit the base direction:ltr, which left card one physically leftmost. site.js then computed a travel range of +88px -> -4851px: still leftward, so the gallery swept left-to-right in RTL exactly as it does in English, differing only by an 88px start offset. Laying the rail out RTL makes the same script compute -4763px -> 0, sweeping right, with card one flush to the right edge and card five to the left. */ direction: rtl; /* Must stay PHYSICAL left: the sticky parent is an RTL grid, so its max-content child would otherwise anchor its right edge, and site.js assumes the track's box starts at the section's left edge. */ justify-self: left; } [dir="rtl"] .journey-card { direction: rtl; } .journey-card { background: radial-gradient(circle at 70% 30%, rgba(242,183,5,0.22), transparent 28%), radial-gradient(circle at 32% 72%, rgba(31,90,67,0.22), transparent 32%), linear-gradient(135deg, #fffdf8, #e8f0eb); } .journey-card:nth-child(even) { background: radial-gradient(circle at 28% 28%, rgba(138,112,196,0.18), transparent 28%), radial-gradient(circle at 72% 72%, rgba(31,90,67,0.2), transparent 32%), linear-gradient(135deg, #f5f1e8, #eef4f1); } .journey-visual { position: relative; min-height: 64vh; overflow: hidden; display: grid; align-items: stretch; isolation: isolate; } .journey-art { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(0.22,1,0.36,1); } .journey-card:hover .journey-art { transform: scale(1.025); } .journey-visual::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(251,247,239,0.98) 0%, rgba(251,247,239,0.92) 36%, rgba(251,247,239,0.32) 58%, transparent 76%); } .journey-card:nth-child(even) .journey-visual::after { background: linear-gradient(270deg, rgba(251,247,239,0.98) 0%, rgba(251,247,239,0.92) 36%, rgba(251,247,239,0.32) 58%, transparent 76%); } .journey-copy { align-self: center; justify-self: left; width: min(50%, 620px); padding: clamp(42px, 6vw, 96px); text-align: start; } .journey-card:nth-child(even) .journey-copy { justify-self: right; } .journey-copy > span { display: grid; width: 74px; height: 74px; place-items: center; border: 1px solid rgba(31,90,67,0.24); border-radius: 24px; background: rgba(255,253,248,0.72); box-shadow: var(--shadow); color: var(--teal); font-size: 2rem; font-weight: 900; } .journey-copy > .journey-info::before { content: "i"; } .journey-copy h3 { margin-top: 16px; max-width: 22ch; font-family: var(--serif); font-size: clamp(2rem, 4vw, 4.2rem); line-height: 1; color: var(--ink); } .journey-copy p { margin-top: 16px; max-width: 48ch; color: var(--muted); font-size: clamp(1rem, 1.4vw, 1.3rem); line-height: 1.6; } .journey-card-mascot .journey-visual { background: radial-gradient(circle at 70% 36%, rgba(242,183,5,0.25), transparent 30%), linear-gradient(135deg, #fffdf8, #e4eee8); } .journey-card-mascot .journey-art-mascot { inset: auto 7% -10% auto; z-index: -1; width: auto; height: 108%; object-fit: contain; } .journey-card figcaption { position: absolute; inset-inline-start: 18px; bottom: 16px; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; background: rgba(255,253,248,0.94); border: 1px solid var(--line); font-size: 0.72rem; font-weight: 900; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal-ink); } .journey-card figcaption::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 5px rgba(242,183,5,0.14); } .sticky { position: sticky; top: 0; height: 100vh; width: 100%; overflow: hidden; display: grid; place-items: center; } .scrub canvas { position: absolute; inset: 0; width: 100%; height: 100%; } .stage-grade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(251,247,239,0.55) 0%, transparent 22%, transparent 74%, rgba(251,247,239,0.85) 100%); } /* Safety-v2 anchors are composited onto the exact page paper. Keep that field untouched so the canvas disappears into the page instead of reading as a placed photograph; copy sits in authored negative space. */ .hero-scrub .stage-grade { background: none !important; } .hero-scrub canvas { filter: none; } /* hero copy sits left over the canvas */ .hero-copy { position: relative; z-index: 10; max-width: 1120px; width: 100%; padding: 0 48px; margin-top: -4vh; opacity: var(--hero-intro-alpha, 1); transform: translateY(var(--hero-intro-y, 0px)); transition: opacity 0.12s linear; } .hero-brand-lockup { display: block; width: clamp(84px, 8.5vw, 126px); height: auto; margin-bottom: 18px; filter: drop-shadow(0 12px 24px rgba(20,30,28,0.12)); } .hero-h1, .hero-sub { margin-inline-end: auto; } .hero-scrub.chapter-active .hero-copy { opacity: 0; pointer-events: none; } .hero-h1 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.015em; /* capped so the headline never runs under the match cards in the frame */ font-size: clamp(2.4rem, 4.5vw, 3.9rem); line-height: 1.05; color: var(--ink); max-width: 12ch; } .aurora { background: linear-gradient(90deg, var(--teal), var(--gold), var(--teal)); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: aurora 7s ease-in-out infinite; } @keyframes aurora { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } .split .ch { display: inline-block; opacity: 0; transform: translateY(26px); filter: blur(6px); } .split.go .ch { animation: chIn 0.6s cubic-bezier(0.22,1,0.36,1) forwards; } @keyframes chIn { to { opacity: 1; transform: none; filter: none; } } .hero-sub { margin-top: 22px; max-width: 520px; font-size: 1.06rem; line-height: 1.75; color: var(--ink-2); } .hero-rotate { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px; font-size: 1.05rem; font-weight: 700; color: var(--ink-2); } .hero-rotate span { color: var(--teal-ink); min-width: 12ch; } .hero-ctas { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px; } .btn-tour { padding-left: 16px; } .play-dot { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--teal); color: #fff; font-size: 0.66rem; line-height: 1; } .scroll-hint { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 10; font-size: 11px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted); animation: bob 1.9s ease-in-out infinite; transition: opacity 0.4s; } @keyframes bob { 0%,100% { transform: translateX(-50%) translateY(0);} 50% { transform: translateX(-50%) translateY(6px);} } /* overlay lines on scrubs */ /* full-bleed overlay: lines position against the viewport-wide stage, so 7vw side anchors and 50% centering mean the same thing in every scrub */ .overlay { position: absolute; inset: 0; z-index: 10; text-align: center; pointer-events: none; } .overlay-left { text-align: left; } .line { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: max-content; max-width: 82vw; font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; font-size: clamp(1.9rem, 4vw, 3.4rem); color: var(--ink); text-shadow: 0 2px 24px rgba(251,247,239,0.9); opacity: 0; will-change: opacity, transform; } .overlay-left .line { left: 8vw; transform: translate(0, -50%); text-align: left; } /* per-line sides for the one-shot: copy sits opposite the walking subject */ .line.line-left { left: 7vw; right: auto; transform: translate(0, -50%); text-align: left; } .line.line-right { left: auto; right: 7vw; transform: translate(0, -50%); text-align: right; } /* scene copy blocks — label + headline + support line in the empty area, fade/blur scrubbed by the engine like .line */ .scene-copy { position: absolute; top: 50%; max-width: 38ch; opacity: 0; will-change: opacity, transform; } .scene-copy.line-left { left: 8vw; right: auto; text-align: left; } /* right-ANCHORED but the English text itself stays left-aligned */ .scene-copy.line-right { left: auto; right: 8vw; text-align: left; } [dir="rtl"] .hero-copy { text-align: right; } /* The canvas is NOT mirrored for RTL any more. `transform: scaleX(-1)` used to flip it so the cast landed opposite the copy, but mirroring a raster reverses everything baked into it: the "100%" dial in k4 rendered as "%001", and every check mark on the helmets, vests and checklists pointed the wrong way. scrub-config.js now loads a purpose-composed landscape-rtl/ set instead, where the cast was MOVED rather than flipped, so Hebrew and Arabic read correctly. */ [dir="rtl"] .hero-scrub .stage-grade { background: none !important; } [dir="rtl"] .scene-copy.line-left { left: auto; right: 8vw; text-align: right; } [dir="rtl"] .scene-copy.line-right { left: 8vw; right: auto; text-align: right; } /* editorial accent spine: a teal→gold hairline down each block's left edge with the chapter dot sitting on it — echoes the page's timeline spine */ .scene-copy:not(.sc-panel) { padding-left: 22px; } .scene-copy:not(.sc-panel)::before { content: ""; position: absolute; left: 0; top: 15px; bottom: 8px; width: 3px; border-radius: 3px; opacity: 0.8; background: linear-gradient(180deg, var(--teal), var(--gold)); } .scene-copy:not(.sc-panel)::after { content: ""; position: absolute; left: -3.5px; top: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 5px rgba(242,183,5,0.14); } [dir="rtl"] .scene-copy:not(.sc-panel) { padding-left: 0; padding-right: 22px; } [dir="rtl"] .scene-copy:not(.sc-panel)::before { left: auto; right: 0; } [dir="rtl"] .scene-copy:not(.sc-panel)::after { left: auto; right: -3.5px; } .scene-copy .sc-label { display: inline-flex; align-items: center; gap: 7px; width: fit-content; padding: 0; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.18em; text-transform: uppercase; color: var(--teal); margin-bottom: 14px; text-shadow: 0 1px 18px rgba(251,247,239,0.96); } .scene-copy h2 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.02em; font-size: clamp(1.9rem, 3.4vw, 3.05rem); color: var(--ink); line-height: 1.04; margin-bottom: 12px; text-wrap: balance; text-shadow: 0 2px 24px rgba(251, 247, 239, 0.96), 0 1px 1px rgba(255,255,255,0.7); } .scene-copy p:not(.sc-label) { max-width: 28ch; font-size: 1.02rem; line-height: 1.58; color: var(--ink-2); text-shadow: 0 1px 16px rgba(251, 247, 239, 0.98); } /* aurora over pale film frames: deeper stops than the hero's, and no inherited paper-glow shadow — it reads as washed-out embossing behind gradient-clipped text */ .scene-copy .aurora { background-image: linear-gradient(90deg, var(--teal-ink), #a06f14, var(--teal-ink)); text-shadow: none; } /* the old "Three steps" band lives here now — a step badge on the chapter label, and the trust signals as chips under the relevant scene copy */ .scene-copy .sc-step { padding: 3px 9px; border-radius: 999px; background: var(--mint); color: var(--teal-ink); font-size: 0.6rem; font-weight: 900; letter-spacing: 0.12em; border: 1px solid #b9d2c2; } .scene-copy .sc-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; } .scene-copy .sc-chips span { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,253,248,0.85); color: var(--ink); padding: 6px 11px; font-size: 0.72rem; font-weight: 800; box-shadow: 0 2px 10px rgba(20,30,28,0.06); } .scene-copy .sc-chips span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); box-shadow: 0 0 0 4px rgba(31,90,67,0.11); } @media (max-width: 1100px) { .scene-copy { max-width: min(34ch, 44vw); } .scene-copy.line-left { left: max(24px, 5vw); } .scene-copy.line-right { right: max(24px, 5vw); } .scene-copy h2 { font-size: clamp(1.55rem, 4.25vw, 2.45rem); } .scene-copy p:not(.sc-label) { max-width: 28ch; } .scene-copy[data-still="0.75"].line-right { top: 43%; max-width: min(30ch, 40vw); } .closing-mascot { height: min(210px, 26vh); right: 14px; bottom: -16px; } } /* scrub progress hairline */ .progress { position: absolute; left: 28px; right: 28px; bottom: 46px; height: 2px; background: rgba(22,33,31,0.10); z-index: 9; border-radius: 2px; } .progress-fill { height: 100%; width: 0%; border-radius: 2px; background: linear-gradient(90deg, var(--teal), var(--gold)); } /* ---------- Logo cloud (ported from the candidate homepage) ---------- */ /* blends into the paper instead of sitting as a white strip */ .logo-cloud { position: relative; z-index: 2; padding: 30px 0 26px; background: var(--paper); border-bottom: 1px solid rgba(230,221,205,0.55); } .logo-cloud-label { text-align: center; margin-bottom: 18px; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); opacity: 0.8; } .marquee { overflow: hidden; position: relative; z-index: 2; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); } .marquee-track { display: flex; white-space: nowrap; width: max-content; animation: marquee 46s linear infinite; } .marquee:hover .marquee-track { animation-play-state: paused; } @keyframes marquee { to { transform: translateX(-50%); } } .logo-row { display: inline-flex; align-items: center; gap: 3rem; padding-right: 3rem; } .logo-row .brand { display: inline-flex; align-items: center; gap: 10px; font-style: normal; font-size: 1rem; font-weight: 700; color: var(--muted); transition: color 0.2s; } .logo-row .brand img { width: 24px; height: 24px; opacity: 0.5; filter: grayscale(1); transition: opacity 0.2s, filter 0.2s; } .logo-row .brand:hover { color: var(--ink); } .logo-row .brand:hover img { opacity: 1; filter: none; } .text-link { color: var(--teal-ink); font-size: 0.9rem; font-weight: 800; text-decoration: none; transition: color 0.25s; } .text-link:hover { color: var(--ink); } .trust-link { margin-top: 14px; font-size: 0.88rem; color: var(--muted); } /* ---------- Bands / sections ---------- */ .band { position: relative; z-index: 2; max-width: 1120px; margin: 0 auto; padding: 110px 48px; } .eyebrow { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--teal); margin-bottom: 12px; } .h2 { font-family: var(--serif); font-weight: 600; font-size: clamp(1.9rem, 3.6vw, 3rem); letter-spacing: -0.01em; line-height: 1.1; max-width: 22ch; } /* ---------- Evidence pieces (embedded in the film) ---------- */ .caption-card { margin-top: 34px; border: 1px solid var(--line); border-radius: 18px; background: rgba(251,247,239,0.72); padding: 18px; } /* live-caption quote inside chapter 04's scene copy */ .scene-copy .sc-quote { margin-top: 16px; padding: 14px 16px; max-width: 36ch; background: rgba(255,253,248,0.88); } .scene-copy .sc-quote p { font-size: 0.88rem; } /* page-centered block (engine keeps the -50% x correction) */ .scene-copy.sc-center { left: 50%; text-align: left; } /* old-way / new-way comparison beats in the film's final walk — open typography, struck-out pains then teal-checked wins */ .scene-copy .sc-list { list-style: none; display: grid; gap: 11px; margin-top: 4px; } .scene-copy .sc-list + .sc-list { margin-top: 15px; } .scene-copy .sc-list li { display: flex; align-items: center; gap: 11px; font-size: 1.02rem; font-weight: 700; color: var(--ink-2); text-shadow: 0 1px 16px rgba(251,247,239,0.98); } .scene-copy .sc-list li::before { content: "✕"; display: grid; place-items: center; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; font-size: 0.64rem; font-weight: 900; background: rgba(227,111,85,0.16); color: var(--coral); } .scene-copy .sc-list.sc-old li { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(97,112,108,0.55); } .scene-copy .sc-list.sc-new li { color: var(--ink); } .scene-copy .sc-list.sc-new li::before { content: "✓"; background: var(--teal); color: #fff; } .caption-card span, .mini-kicker, .rescore-label { display: block; font-size: 0.66rem; font-weight: 900; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .caption-card p { margin-top: 8px; color: var(--ink); line-height: 1.6; font-size: 0.95rem; } /* trust */ .trust-grid { margin-top: 40px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .tcard { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 26px; box-shadow: var(--shadow); } .tcard h3 { font-size: 1.02rem; margin-bottom: 8px; } .tcard p { font-size: 0.9rem; line-height: 1.6; color: var(--muted); } .beti-chip { margin-top: 30px; display: inline-flex; align-items: center; gap: 12px; background: var(--mint); border: 1px solid #b9d2c2; border-radius: 999px; padding: 10px 20px 10px 10px; font-size: 0.9rem; color: var(--teal-ink); } .beti-chip img { height: 40px; width: 40px; border-radius: 50%; object-fit: cover; } /* companions */ .companion { position: absolute; height: 150px; z-index: 3; filter: drop-shadow(0 10px 24px rgba(20,30,28,0.18)); } .companion-cheer { right: 20px; top: -66px; transform: rotate(6deg); } .companion-magnify { right: 34px; top: 60px; height: 130px; transform: rotate(-5deg); } /* ---------- Facts — oryzo-style motion cards ---------- */ .facts { position: relative; z-index: 2; /* Start a clear step deeper than the pale mint the journey ends on, so this "Why it works" band reads as its own segment rather than blending in. */ background: linear-gradient(180deg, #cfe8e0 0%, var(--paper) 52%); border-top: 1px solid rgba(31,90,67, 0.24); box-shadow: inset 0 18px 32px -22px rgba(15, 92, 80, 0.42); padding: 84px max(4vw, 24px) 104px; } .facts-head { max-width: 1260px; margin: 0 auto 46px; text-align: center; } .facts-head .h2 { margin: 10px auto 0; max-width: 22ch; } .facts-grid { max-width: 1260px; margin: 0 auto; display: grid; grid-template-columns: 0.92fr 1.04fr 1.04fr; gap: 18px; align-items: stretch; } .fact-card { position: relative; overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 26px; background: var(--surface); box-shadow: var(--shadow); padding: 34px 30px; min-height: 420px; } .fact-title { font-family: var(--serif); font-weight: 600; letter-spacing: -0.01em; font-size: 1.55rem; line-height: 1.12; max-width: 16ch; } .fact-copy { margin-top: auto; padding-top: 22px; color: var(--muted); font-size: 0.95rem; line-height: 1.65; max-width: 34ch; } .fact-dark { background: #14201d; border-color: rgba(251,247,239,0.12); color: var(--paper); } .fact-dark .fact-copy { color: rgba(251,247,239,0.75); } /* the hero numeral: stamps up on reveal, gradient like the film credits */ .fact-big { margin-top: 28px; font-family: var(--serif); font-weight: 700; line-height: 0.9; font-size: clamp(4.6rem, 6.6vw, 6.6rem); letter-spacing: -0.02em; background: linear-gradient(100deg, #f7d85b, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; translate: 0 26px; opacity: 0; transition: translate 0.8s cubic-bezier(0.22,1,0.36,1) 0.25s, opacity 0.6s ease 0.25s; } .fact-card.in .fact-big { translate: 0 0; opacity: 1; } .fact-big em { font-style: normal; font-size: 0.42em; letter-spacing: 0; margin-left: 0.08em; } /* live voice equalizer — the interview starts the moment you apply */ .fact-eq { display: flex; align-items: flex-end; gap: 5px; height: 44px; margin-top: 18px; } .fact-eq i { width: 5px; border-radius: 3px; background: linear-gradient(180deg, #f7d85b, var(--teal)); transform-origin: bottom; animation: eq 1.2s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -0.13s); } .fact-eq i:nth-child(3n) { height: 100%; } .fact-eq i:nth-child(3n+1) { height: 62%; } .fact-eq i:nth-child(3n+2) { height: 82%; } @keyframes eq { 0%, 100% { transform: scaleY(0.22); } 50% { transform: scaleY(1); } } /* animated 100% ring — draws when the card reveals */ .fact-ring { position: relative; display: grid; place-items: center; margin: 26px auto 0; } .fact-ring svg { width: 176px; height: 176px; transform: rotate(-90deg); } .fr-track { fill: none; stroke: rgba(22,33,31,0.08); stroke-width: 10; } /* rotating schematic dash — same motif as the preloader ring */ .fr-dash { fill: none; stroke: rgba(242,183,5,0.55); stroke-width: 1.5; stroke-dasharray: 2 7; animation: ringspin 12s linear infinite; transform-origin: 50% 50%; } .fr-val { fill: none; stroke-width: 10; stroke-linecap: round; stroke-dasharray: 326.7; stroke-dashoffset: 326.7; transition: stroke-dashoffset 1.5s cubic-bezier(0.22,1,0.36,1) 0.35s; } .fact-card.in .fr-val { stroke-dashoffset: 0; } .fr-center { position: absolute; display: grid; justify-items: center; row-gap: 1px; } .fact-ring b { font-family: var(--serif); font-weight: 700; font-size: 2.1rem; color: var(--teal-ink); } .fr-center i { font-style: normal; font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } /* floating role pills orbit (the oryzo power-draw card) */ .fact-orbit { position: relative; height: 236px; margin-top: 18px; } .orbit-ring { position: absolute; inset: 0; margin: auto; border-radius: 50%; border: 1.5px dashed rgba(15,92,80,0.28); animation: ringspin 46s linear infinite; } .orbit-ring.r1 { width: 216px; height: 216px; } .orbit-ring.r2 { width: 138px; height: 138px; animation-direction: reverse; animation-duration: 30s; } /* the evidence core every role is scored from */ .orbit-core { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border-radius: 50%; filter: drop-shadow(0 10px 22px rgba(31,90,67,0.35)); animation: corePulse 3s ease-in-out infinite; } @keyframes corePulse { 50% { scale: 1.09; } } .fact-orbit span { position: absolute; white-space: nowrap; padding: 9px 14px; border-radius: 999px; background: var(--ink); color: var(--paper); font-size: 0.76rem; font-weight: 800; box-shadow: 0 12px 26px rgba(20,30,28,0.2); animation: orbFloat 3.4s ease-in-out infinite; animation-delay: var(--d, 0s); /* matches "arrive": springy staggered pop-in, then the idle float */ scale: 0; transition: scale 0.65s cubic-bezier(0.34,1.56,0.64,1); transition-delay: calc(var(--d, 0s) * 0.22 + 0.3s); } .fact-card.in .fact-orbit span { scale: 1; } @keyframes orbFloat { 50% { translate: 0 -8px; } } .fact-orbit span:nth-of-type(1) { left: 50%; top: 4px; transform: translateX(-50%); } .fact-orbit span:nth-of-type(2) { right: 5%; top: 56px; } .fact-orbit span:nth-of-type(3) { left: 7%; top: 100px; } .fact-orbit span:nth-of-type(4) { right: 9%; top: 146px; } .fact-orbit span:nth-of-type(5) { left: 22%; bottom: 2px; } /* employers — FULL-BLEED dark "hiring console" band */ .employers { max-width: none; padding: 0; } .employers-card { position: relative; overflow: hidden; /* own compositor layer: the vw/vh gradients + masked dot grid otherwise re-rasterize on every scroll frame (the flickering top strip) */ transform: translateZ(0); will-change: transform; padding: 120px max(6vw, 32px); background: radial-gradient(56vw 60vh at 84% 8%, rgba(31,90,67,0.38), transparent 70%), radial-gradient(44vw 50vh at 4% 100%, rgba(242,183,5,0.18), transparent 70%), #14201d; } .employers-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(251,247,239,0.13) 1px, transparent 1px); background-size: 22px 22px; mask-image: radial-gradient(60vw 70vh at 74% 30%, black, transparent 76%); } .employers-card::after { content: "EVIDENCE"; position: absolute; left: -1vw; bottom: -0.13em; font-family: var(--serif); font-weight: 700; line-height: 0.8; font-size: clamp(5rem, 15.5vw, 15rem); letter-spacing: 0.01em; color: rgba(251,247,239,0.05); pointer-events: none; white-space: nowrap; } .employers-inner { position: relative; z-index: 1; max-width: 1260px; margin: 0 auto; display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 60px; align-items: center; } .employers-copy { position: relative; z-index: 1; } .employers .eyebrow { color: #7fc6b9; } .employers .h2 { color: var(--paper); } .employers-points { list-style: none; margin: 24px 0 32px; display: grid; gap: 12px; } .employers-points li { display: flex; gap: 11px; align-items: center; color: rgba(251,247,239,0.85); font-size: 1rem; font-weight: 600; } .employers-points li::before { content: "✓"; display: grid; place-items: center; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: rgba(31,90,67,0.4); color: #f7d85b; font-size: 0.68rem; font-weight: 900; } .employers-ctas { display: flex; gap: 12px; flex-wrap: wrap; } .btn-paper { background: var(--paper); color: var(--ink); } .btn-ghost-dark { background: transparent; color: var(--paper); border: 1px solid rgba(251,247,239,0.3); } /* mock pipeline panel — the employer's view of interviewed candidates */ .employers-panel { position: relative; z-index: 1; display: grid; gap: 10px; border-radius: 22px; padding: 20px; background: rgba(251,247,239,0.08); /* no backdrop-filter: scroll flicker */ border: 1px solid rgba(251,247,239,0.14); box-shadow: 0 24px 60px rgba(0,0,0,0.3); } .ep-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 4px; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.13em; text-transform: uppercase; color: rgba(251,247,239,0.6); } .ep-live { color: #f7d85b; letter-spacing: 0.06em; } .ep-row { display: flex; align-items: center; gap: 12px; background: rgba(251,247,239,0.07); border: 1px solid rgba(251,247,239,0.1); border-radius: 14px; padding: 12px 14px; } .ep-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 12px; background: var(--teal); color: #fff; font-size: 0.72rem; font-weight: 900; } .ep-row > div { flex: 1; min-width: 0; display: grid; } .ep-row b { color: var(--paper); font-size: 0.92rem; } .ep-row i { font-style: normal; color: rgba(251,247,239,0.55); font-size: 0.76rem; } .ep-row em { font-style: normal; font-family: var(--serif); font-weight: 700; font-size: 1.35rem; background: linear-gradient(90deg, #f7d85b, var(--gold)); -webkit-background-clip: text; background-clip: text; color: transparent; } .ep-foot { margin-top: 2px; text-align: center; font-size: 0.72rem; color: rgba(251,247,239,0.5); } /* closing */ /* closing — FULL-BLEED centered finale: copy centered, mascot watches from the right edge (bottom-anchored, slightly cropped by the card) */ .closing { max-width: none; padding: 0; } .closing-card { position: relative; text-align: center; background: radial-gradient(60vw 60vh at 78% 110%, rgba(31,90,67,0.14), transparent 72%), radial-gradient(40vw 40vh at 8% 0%, rgba(242,183,5,0.10), transparent 70%), var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 60px max(6vw, 24px) 48px; /* Keep the final CTA + footer taller than the viewport at max scroll, so the previous dark employers band never peeks above the closing section. */ min-height: max(500px, calc(100svh - 260px)); display: grid; align-items: center; overflow: hidden; } .closing-inner { max-width: 760px; margin: 0 auto; } .closing-mascot { position: absolute; right: max(4.5vw, 26px); bottom: -26px; height: min(300px, 34vh); rotate: -6deg; /* individual property so the bounce transform composes */ cursor: pointer; transition: transform 0.3s; filter: drop-shadow(0 22px 40px rgba(20,30,28,0.16)); } .closing-mascot.bounce { animation: bounce 0.55s cubic-bezier(0.28, 2.2, 0.5, 1); } @keyframes bounce { 0% { transform: scale(1);} 40% { transform: scale(1.14) translateY(-14px);} 100% { transform: scale(1);} } .closing-card .h2 { margin: 0 auto 14px; } .closing-copy .h2 { margin-bottom: 16px; } .closing-card p:not(.trust-link) { color: var(--muted); max-width: 46ch; margin: 0 auto 28px; } .closing-pills { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } /* border-beam — retired: rendered as a glitchy vertical stripe on some GPUs; the cursor spotlight replaces it on the closing card */ .beam { display: none; } .beam::before { content: ""; position: absolute; width: 220px; height: 3px; top: 0; left: -220px; background: linear-gradient(90deg, transparent, var(--teal), var(--gold), transparent); animation: beam 7s linear infinite; } @keyframes beam { 0% { top: 0; left: -220px; } 24% { top: 0; left: 100%; } 25% { top: -3px; left: calc(100% - 3px); transform: rotate(90deg); transform-origin: top left; } 49% { top: 100%; left: calc(100% - 3px); transform: rotate(90deg); } 50% { top: calc(100% - 3px); left: 100%; transform: rotate(180deg); } 74% { top: calc(100% - 3px); left: -220px; transform: rotate(180deg); } 75% { top: 100%; left: 0; transform: rotate(270deg); } 100% { top: -220px; left: 0; transform: rotate(270deg); } } /* ---------- Reveals + counters ---------- */ /* Oryzo-style text transitions: fade + rise + blur-dissolve, staggered per sibling (--i set by site.js). Bidirectional — leaving the viewport plays the same transition in reverse. */ .reveal { opacity: 0; transform: translateY(26px); filter: blur(8px); transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1), filter 0.7s cubic-bezier(0.22,1,0.36,1); transition-delay: calc(var(--i, 0) * 90ms); } .reveal.in { opacity: 1; transform: none; filter: none; } /* Masked line reveal for band headings (oryzo signature): the heading slides up out of an overflow-hidden mask instead of fading. site.js wraps .h2.reveal / .eyebrow.reveal content and adds .masked. */ .reveal.masked { opacity: 1; transform: none; filter: none; } .mask-line { display: block; overflow: hidden; } .mask-line .mask-inner { display: block; transform: translateY(115%); transition: transform 0.8s cubic-bezier(0.22,1,0.36,1); transition-delay: inherit; } .reveal.in .mask-line .mask-inner { transform: none; } /* Width-wipe reveal (oryzo clipper): the card is revealed by un-clipping it left→right instead of fading. Overrides the blur-dissolve on elements that also carry .reveal. Demo section: trust cards. */ .reveal.wipe { opacity: 1; transform: none; filter: none; clip-path: inset(0 100% 0 0 round 20px); transition: clip-path 0.9s cubic-bezier(0.22,1,0.36,1); transition-delay: calc(var(--i, 0) * 120ms); } .reveal.wipe.in { clip-path: inset(0 0 0 0 round 20px); } /* Springy hover (oryzo's playful bezier) + glow intensify on primary CTA */ .chip { transition: transform 0.5s cubic-bezier(0.3,0,0.66,-0.3); } .chip:hover { transform: translateY(-3px); } .btn-teal:hover { box-shadow: 0 10px 34px rgba(31,90,67,0.5); } /* Moving vertical timeline spine (Wise/Apollo pattern, scroll-drawn). Fades away while a film section is pinned — it threads the chapters BETWEEN scenes instead of slicing through them. */ /* tilt cards get perspective from JS */ .tilt { transform-style: preserve-3d; will-change: transform; } /* ---------- Sampler batch 2 (oryzo / anime.js ports) ---------- */ /* 11 · scramble-decode eyebrows — keep line height while glyphs cycle */ .eyebrow .scramble { display: inline-block; min-height: 1em; min-width: 1ch; } /* 12 · odometer stat digits — per-digit columns rolling through 0-9 */ .stat-num .odo-col { display: inline-block; overflow: hidden; height: 1em; line-height: 1; vertical-align: baseline; } .stat-num .odo-stack { display: inline-block; white-space: pre-line; line-height: 1; transform: translateY(0); transition: transform 1.1s cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; } /* 13 · velocity-skew marquee — transform set from JS each frame */ .marquee { will-change: transform; } /* 14 · cursor spotlight on the closing card */ .closing-card.spotlight::after { content: ""; position: absolute; inset: 0; border-radius: 30px; pointer-events: none; opacity: 0; transition: opacity 0.45s; background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(242,183,5, 0.14), rgba(31,90,67, 0.06) 45%, transparent 70%); } .closing-card.spotlight.spot-on::after { opacity: 1; } /* 15 · dot-grid ripple behind the stats band */ .stats-band { position: relative; } .stats-band .stats { position: relative; z-index: 1; } .dot-grid { position: absolute; inset: 10% 6%; z-index: 0; pointer-events: none; display: grid; grid-template-columns: repeat(13, 1fr); place-items: center; } .dot-grid span { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); opacity: 0; transform: scale(0); transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s; } .dot-grid.in span { opacity: 0.16; transform: scale(1); } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; filter: none; transition: none; } .mask-line .mask-inner { transform: none; transition: none; } .reveal.wipe { clip-path: none; transition: none; } .chip { transition: none; } .scroll-hint, .preloader-mascot, .marquee-track, .btn-teal::after, .beam::before, .aurora, .ring-dash, .fact-orbit span { animation: none; } .fr-val { transition: none; stroke-dashoffset: 0; } .fact-big { transition: none; translate: 0 0; opacity: 1; } .fact-orbit span { transition: none; scale: 1; } .fact-eq i, .fr-dash, .orbit-ring, .orbit-core { animation: none; } .split .ch { opacity: 1; transform: none; filter: none; } .marquee { transform: none; } .dot-grid span { opacity: 0.16; transform: none; transition: none; } .closing-card.spotlight::after { display: none; } .journey-card:hover .journey-art { transform: none; } } /* WCAG 2.4.13 focus appearance — brand ring on every interactive element */ .btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 999px; } /* ---------- Mobile ---------- */ @media (max-width: 760px) { .hero-copy { padding: 0 22px; text-align: center; } .hero-h1 { margin: 0 auto; } .hero-sub { margin-left: auto; margin-right: auto; } .hero-rotate { justify-content: center; } .hero-ctas { justify-content: center; } .match-rail { display: none; } .band { padding-left: 22px; padding-right: 22px; } .band { padding-top: 70px; padding-bottom: 70px; } .scene-copy .sc-quote { max-width: 26ch; } .rematch-grid { grid-template-columns: 1fr; } .journey { height: 260vh; } .facts { padding: 64px 22px 72px; } .facts-grid { grid-template-columns: 1fr; } .fact-card { min-height: 340px; } .journey-track { padding: 0 8vw; gap: 4vw; } .journey-card { flex-basis: 84vw; } /* svh, not vh: the pinned stage must fit the viewport the phone actually shows (toolbars visible), or its lower band hides behind the chrome and the card floats in dead space. A 46vh card left ~250px empty above AND below it — that emptiness is what you see once the sweep finishes. */ .journey-sticky { height: 100svh; gap: 12px; } .journey-visual { min-height: min(66svh, 620px); } .journey-copy { align-self: end; width: 100%; padding: 90px 24px 56px; } .journey-visual::after, .journey-card:nth-child(even) .journey-visual::after { background: linear-gradient(0deg, rgba(251,247,239,0.98) 0%, rgba(251,247,239,0.92) 42%, rgba(251,247,239,0.18) 74%, transparent 100%); } .journey-copy > span { width: 52px; height: 52px; border-radius: 17px; font-size: 1.4rem; } .journey-copy h3 { font-size: clamp(1.65rem, 7vw, 2.2rem); } .journey-copy p { font-size: 0.94rem; line-height: 1.5; } .journey-card-mascot .journey-art-mascot { height: 88%; right: 4%; bottom: 16%; } .companion { height: 100px; } .companion-cheer { top: -46px; right: 8px; } .overlay-left .line { left: 22px; max-width: 88vw; } .line.line-left { left: 22px; max-width: 88vw; } .line.line-right { right: 22px; max-width: 88vw; } .scene-copy.line-left, .scene-copy.line-right { max-width: min(290px, 44vw); } .scene-copy.line-left { left: 22px; right: auto; text-align: left; } .scene-copy.line-right { left: auto; right: 22px; text-align: left; } .scene-copy .sc-label { font-size: 0.64rem; letter-spacing: 0.14em; margin-bottom: 10px; } .scene-copy h2 { font-size: clamp(1.28rem, 5.4vw, 1.7rem); line-height: 1.06; } .scene-copy p:not(.sc-label) { max-width: 25ch; font-size: 0.88rem; line-height: 1.48; } .scene-copy .sc-step { font-size: 0.54rem; padding: 2px 7px; } .scene-copy .sc-chips { gap: 5px; margin-top: 10px; } .scene-copy .sc-chips span { padding: 4px 9px; font-size: 0.64rem; } .employers-card { padding: 76px 22px; } .employers-inner { grid-template-columns: 1fr; gap: 36px; } .closing-card { padding: 64px 22px 56px; } .closing-card { padding-bottom: 150px; } .closing-mascot { height: 140px; right: 50%; translate: 50% 0; rotate: -4deg; bottom: -10px; } .beam { display: none; } /* centered mobile hero copy needs a vertical paper fade, not the desktop left-anchored one, to stay legible over bright frames */ .hero-scrub .stage-grade { background: linear-gradient(180deg, rgba(251,247,239,0.94) 0%, rgba(251,247,239,0.78) 34%, rgba(251,247,239,0.28) 55%, rgba(251,247,239,0) 70%), linear-gradient(180deg, transparent 74%, rgba(251,247,239,0.85) 100%); } } @media (max-aspect-ratio: 11/10) { .scene-copy, .scene-copy.line-left, .scene-copy.line-right, .scene-copy[data-still="0.75"].line-right { top: 70%; left: 24px; right: 24px; max-width: min(38ch, calc(100vw - 48px)); text-align: center; } .scene-copy .sc-label, .scene-copy.line-right .sc-label, .scene-copy.line-left .sc-label { margin-left: auto; margin-right: auto; } .scene-copy p:not(.sc-label), .scene-copy.line-right p:not(.sc-label), .scene-copy.line-left p:not(.sc-label) { margin-left: auto; margin-right: auto; } .scene-copy h2 { font-size: clamp(1.55rem, 5.4vw, 2.35rem); } [dir="rtl"] .scene-copy, [dir="rtl"] .scene-copy.line-left, [dir="rtl"] .scene-copy.line-right, [dir="rtl"] .scene-copy[data-still="0.75"].line-right { left: 24px; right: 24px; text-align: center; } } @media (max-width: 520px) and (max-aspect-ratio: 11/10) { .scene-copy, .scene-copy.line-left, .scene-copy.line-right, .scene-copy[data-still="0.75"].line-right { top: 73%; left: 18px; right: 18px; max-width: calc(100vw - 36px); } .scene-copy h2 { font-size: clamp(1.35rem, 6.4vw, 1.85rem); } .scene-copy p:not(.sc-label) { font-size: 0.9rem; } [dir="rtl"] .scene-copy, [dir="rtl"] .scene-copy.line-left, [dir="rtl"] .scene-copy.line-right, [dir="rtl"] .scene-copy[data-still="0.75"].line-right { left: 18px; right: 18px; } } /* ============ PORTRAIT FILM (viewport aspect < 0.8) ============ The 9:16 frames (frames/p*) compose the subject in the upper two-thirds and reserve a clean lower third for text — so the hero intro moves into that zone and the heavy legibility wash goes away: the film shows vivid. Boundary matches scrub-config.js's film selector (aspect < 0.8). */ @media (max-aspect-ratio: 4/5) { .hero-scrub .stage-grade { background: linear-gradient(180deg, transparent 0%, transparent 80%, rgba(251,247,239,0.5) 100%); } [dir="rtl"] .hero-scrub .stage-grade { background: linear-gradient(180deg, transparent 0%, transparent 80%, rgba(251,247,239,0.5) 100%); } /* The film's .sticky is 100vh = the LARGE viewport, so on a phone its lower band hides behind the browser's bottom toolbar. (100lvh - 100dvh) is that toolbar's live height: adding it keeps the copy above the chrome instead of underneath it. It collapses to 0 wherever there is no toolbar. */ .hero-copy { position: absolute; left: 0; right: 0; bottom: max(14vh, calc(3vh + (100lvh - 100dvh))); margin-top: 0; padding: 0 22px; text-align: center; max-width: none; } .hero-h1 { font-size: clamp(1.8rem, 7.8vw, 2.4rem); max-width: none; margin: 0 auto; } .hero-sub { margin: 12px auto 0; font-size: 0.95rem; line-height: 1.55; max-width: 34ch; } .hero-rotate { margin-top: 10px; font-size: 0.95rem; justify-content: center; } .hero-ctas { margin-top: 16px; justify-content: center; } /* Chapter copy floats as a vertically-centered frosted glass card over the FULL-SCREEN film: the blur carries legibility wherever the video's props move, so nothing needs cropping or reserved bands. */ #hero-scrub .scene-copy, #hero-scrub .scene-copy.line-left, #hero-scrub .scene-copy.line-right, #hero-scrub .scene-copy[data-still="0.75"].line-right { top: 72%; } #hero-scrub .scene-copy, #hero-scrub .scene-copy.line-left, #hero-scrub .scene-copy.line-right { background: rgba(251, 247, 239, 0.78); -webkit-backdrop-filter: blur(16px) saturate(1.05); backdrop-filter: blur(16px) saturate(1.05); border-radius: 22px; padding: 18px 20px 20px; box-shadow: 0 14px 44px rgba(15, 26, 22, 0.07); } } /* True phones: the CTAs stack (tall block) AND the narrow viewport crops the 9:16 film harder, pushing the subject's feet lower — so the headline has to sit low or it lands on her shoes. Wider portrait windows have an inline, shorter block over a less-cropped frame, and can ride up under her legs. */ @media (max-aspect-ratio: 4/5) and (max-width: 440px) { .hero-copy { bottom: max(9vh, calc(1vh + (100lvh - 100dvh))); } /* Stacked CTAs make the block ~55px taller than the cream band under her feet can hold once the toolbar takes its share. One row buys that back. */ .hero-ctas { flex-wrap: nowrap; gap: 8px; margin-top: 14px; } .hero-ctas .btn { padding: 12px 14px; font-size: 0.85rem; white-space: nowrap; } .hero-ctas .btn-tour { padding-left: 10px; gap: 6px; } .hero-sub { max-width: 32ch; } } /* ============================================================ Ambient safety decor ============================================================ Michael liked the pale mint corner circle in the hero and asked for more of that language in other colours, plus motifs that read as safety. Two rules keep it texture rather than clutter: 1. Colours come from the palette that already exists. --lavender was defined and used ZERO times and --coral exactly once, so the accents were already declared and simply never spent - no new brand colours were invented. 2. Everything is decorative: drawn with pseudo-elements so the markup gains no elements for a screen reader to announce, held at z-index:-1 inside each section's own stacking context (above the section background, behind every word), and never taking a pointer event. ORB and MOTIF are deliberately separate elements. Combining them put a large shield in the middle of a corner-clipped circle, which read as a sticker half-fallen off the page. The orb bleeds off the edge like the hero circle; the motif sits fully inside, small and faint. */ .facts::before, .facts::after, .closing::before, .closing::after, .journey::before, .employers::before { content: ""; position: absolute; z-index: -1; pointer-events: none; } /* --- orbs: soft, edge-bleeding, one per section --------------------------- */ .facts::before, .closing::before, .journey::before { border-radius: 50%; aspect-ratio: 1; } .facts::before { /* lavender - the palette's unspent accent */ inset-inline-end: -8vw; top: 6%; width: min(420px, 40vw); background: radial-gradient(circle at 45% 42%, rgba(139,123,216,0.22), transparent 66%); } .closing::before { /* coral, mirrored so the eye crosses over */ inset-inline-start: -7vw; top: 10%; width: min(380px, 36vw); background: radial-gradient(circle at 52% 45%, rgba(227,111,85,0.20), transparent 66%); } .journey::before { /* teal, quietest section keeps the quietest orb */ inset-inline-end: -5vw; top: 5%; width: min(300px, 28vw); background: radial-gradient(circle at 50% 45%, rgba(31,90,67,0.14), transparent 68%); } /* --- motifs: safety outlines, fully inside, watermark strength ------------ */ .facts::after, .closing::after, .employers::before { background-repeat: no-repeat; background-position: center; background-size: contain; width: min(120px, 11vw); aspect-ratio: 1; } .facts::after { /* shield + check */ inset-inline-start: 5vw; bottom: 12%; opacity: 0.20; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 6 54 14v18c0 14-10 22-22 26-12-4-22-12-22-26V14z' fill='none' stroke='%238b7bd8' stroke-width='2.5'/%3E%3Cpath d='M22 32l7 7 14-14' fill='none' stroke='%238b7bd8' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .closing::after { /* traffic cone */ inset-inline-end: 6vw; bottom: 14%; opacity: 0.18; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 12 50 50H14z' fill='none' stroke='%23e36f55' stroke-width='2.5' stroke-linejoin='round'/%3E%3Cpath d='M24 34h16M21 42h22' stroke='%23e36f55' stroke-width='2.5' stroke-linecap='round'/%3E%3Crect x='8' y='50' width='48' height='6' rx='3' fill='none' stroke='%23e36f55' stroke-width='2.5'/%3E%3C/svg%3E"); } .employers::before { /* warning triangle - the band is dark, so a line motif rather than an orb, which would read as a smudge on that ground */ inset-inline-start: 6vw; top: 12%; opacity: 0.14; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M32 10 58 54H6z' fill='none' stroke='%23f2b705' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M32 26v13M32 45v2.5' stroke='%23f2b705' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E"); } /* Narrow screens have no room to spare: keep the orbs, drop the motifs, so the decor never crowds the copy it is meant to frame. */ @media (max-width: 720px) { .facts::after, .closing::after, .employers::before { display: none; } }