/* ========================================================================== FileRanger — marketing site Token names follow the design handoff §10.3 (Color system). ========================================================================== */ :root { /* Brand palette — handoff §10.3 */ --fr-night: #071629; --fr-deep-blue: #0E2A49; --fr-slate-blue: #224268; --fr-steel: #9DA6B0; --fr-silver: #D6D9DC; --fr-parchment: #F4E7CF; --fr-ranger-amber: #D67A22; --fr-sunset-gold: #F4B44D; --fr-saddle: #6E3A18; /* Supporting values used by this page */ --fr-gold-hi: #F8C972; --fr-border: #12304f; --fr-row: #0B2340; --fr-row-line: #16344f; --fr-abyss: #050f1d; --fr-muted: #5c6b7d; --fr-cta-glow: #21456e; --fr-ui-blue: #4CC2FF; /* the app's own accent — filter chips, checkboxes */ /* Color tags */ --tag-red: #E5484D; --tag-orange: #E8843C; --tag-yellow: #F4C93C; --tag-green: #46A758; --tag-blue: #4C9DE8; --tag-purple: #8E6AD0; --tag-gray: #8B9096; /* Motion. Single source of truth for the Quick Look demo loop — the popup and the Space key both read this, so they stay locked to each other. Change it here, not on the individual animations, or they drift apart. */ --ql-loop: 5s; /* Type */ --font-slab: 'Roboto Slab', serif; --font-sans: 'Noto Sans', system-ui, sans-serif; --font-mono: ui-monospace, monospace; /* ---------- Responsive scale ---------- Three tokens carry almost all of this site's responsiveness, which is why there are so few media queries below. Each interpolates continuously from the 320px floor to the design's authored desktop value and then stops, so every width in between is composed rather than being a breakpoint's nearest neighbour — and every width at or above 1280px is pixel-identical to the original desktop build. --gutter 16px @320 -> 32px @1280+ (the authored page gutter) --section-y 56px @320 -> 120px @1280+ (the authored section rhythm) --shell the 1240px content shell, unchanged env(safe-area-inset-*) is folded in at the edges rather than here, so a notched phone in landscape widens the gutter without also inflating the vertical rhythm. */ --gutter: clamp(1rem, 0.5rem + 2.5vw, 2rem); --gutter-l: max(var(--gutter), env(safe-area-inset-left)); --gutter-r: max(var(--gutter), env(safe-area-inset-right)); --section-y: clamp(3.5rem, 2rem + 7.5vw, 7.5rem); --shell: 1240px; --nav-h: 68px; } /* ---------- Base ---------- */ html { /* scroll-padding keeps an anchored heading clear of the sticky bar rather than landing underneath it. Tracks --nav-h so it stays correct when the bar shortens on small screens. */ scroll-padding-top: calc(var(--nav-h) + 1rem); } /* Smooth scrolling is motion, and it is motion the visitor did not ask for on every in-page jump. Gated rather than global. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; background: var(--fr-night); color: var(--fr-silver); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; /* clip, not hidden. `overflow-x: hidden` forces the block axis to `auto`, which makes a scroll container and breaks position:sticky on the nav in some engines; `clip` clips without creating one. This is a backstop, not the fix — every element that deliberately breaks its bounds (the characters, the roadrunner's run, the CTA artwork) is clipped by its own section, so nothing relies on this rule. */ overflow-x: clip; } a { color: var(--fr-sunset-gold); text-decoration: none; } a:hover { color: var(--fr-gold-hi); } img { max-width: 100%; } ::selection { background: var(--fr-ranger-amber); color: var(--fr-night); } /* ---------- Shared type ---------- */ .eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fr-sunset-gold); } /* Heading scale. The vw terms were re-anchored so each size reaches its authored desktop maximum at exactly 1280px and holds there — the previous `Xvw` forms kept growing to 1440px+ and, more importantly, bottomed out at minimums (30/34/38px) that overflowed a 320px screen. The hierarchy between the three steps is preserved at every width, not just at the extremes. */ .h2 { font-family: var(--font-slab); font-weight: 700; font-size: clamp(1.625rem, 1.19rem + 2.17vw, 2.625rem); line-height: 1.1; margin: 0; color: var(--fr-parchment); } .h2--lg { font-size: clamp(1.75rem, 1.19rem + 2.8vw, 3rem); } .h2--cta { font-weight: 800; font-size: clamp(1.9rem, 1.24rem + 3.3vw, 3.5rem); line-height: 1.05; } .balance { text-wrap: balance; } .hl { color: var(--fr-parchment); } .code { font-family: var(--font-mono); background: var(--fr-deep-blue); padding: 1px 6px; border-radius: 4px; color: var(--fr-sunset-gold); } /* ---------- Layout ---------- */ .container { max-width: var(--shell); margin: 0 auto; padding: var(--section-y) var(--gutter-r) var(--section-y) var(--gutter-l); } .container--narrow { max-width: 860px; } .container--mid { max-width: 1000px; } .container--flush-top { padding-top: 0; } /* Every section clips its own overflow. The characters, the roadrunner's run and the CTA artwork are all authored to break their bounds, and each needs the section it lives in to be the thing that contains it — relying on a document-level clip would mean any one of them could reintroduce a page-wide horizontal scrollbar. `clip` over `hidden` so none of these become scroll containers (which would break the sticky nav's ancestor chain and swallow scroll anchoring). */ .section, .section--deep, .section--privacy, .section--brand, .cta, .trust, .hero { overflow-x: clip; } .section { background: var(--fr-night); overflow: hidden; } .section--deep { background: var(--fr-deep-blue); border-top: 1px solid var(--fr-border); border-bottom: 1px solid var(--fr-border); } .section--privacy{ background: linear-gradient(180deg, var(--fr-deep-blue) 0%, var(--fr-night) 100%); border-top: 1px solid var(--fr-border); } /* ---------- Buttons & links ---------- */ /* An angle has to be a registered property to be animatable — a plain custom property is just a token to the interpolator, so the gradient would jump rather than sweep. */ @property --gold-angle { syntax: ''; initial-value: 0deg; inherits: false; } /* The gradient's centre point drifts as well as rotating. Registered for the same reason as the angle: unregistered properties don't interpolate. */ @property --gold-x { syntax: ''; initial-value: 50%; inherits: false; } @property --gold-y { syntax: ''; initial-value: 50%; inherits: false; } /* Flat amber text button — the original style, now used only by the nav, where the artwork button's detail doesn't survive at 68px bar height. The gold stroke is a two-layer background rather than a bordered pseudo- element: the fill is painted to padding-box and the conic gradient to border-box, so the gradient shows only in the 2px border ring. Rotating --gold-angle sweeps the highlights round the edge. The `0deg` fallback inside var() matters — without @property support the declaration would be invalid at computed-value time and the button would lose its background entirely, not just its animation. */ .btn { position: relative; /* anchors the hover shine — see the card-hover block */ --btn-fill: var(--fr-ranger-amber); border: var(--gold-stroke, 2px) solid transparent; background: linear-gradient(var(--btn-fill) 0 0) padding-box, /* Four highlights instead of two — the dark/mid/bright/mid/dark run now repeats every 90deg rather than every 180deg. The bright and mid tones alternate slightly between cycles so the ring doesn't read as a mechanical repeat as it turns. */ conic-gradient(from var(--gold-angle, 0deg) at var(--gold-x, 50%) var(--gold-y, 50%), #7A4E14 0deg, #D9A24A 19deg, #FFF3D0 34deg, #D9A24A 49deg, #7A4E14 70deg, #7A4E14 90deg, #C9922F 109deg, #FFE9A8 124deg, #C9922F 139deg, #7A4E14 160deg, #7A4E14 180deg, #D9A24A 199deg, #FFF3D0 214deg, #D9A24A 229deg, #7A4E14 250deg, #7A4E14 270deg, #C9922F 289deg, #FFE9A8 304deg, #C9922F 319deg, #7A4E14 340deg, #7A4E14 360deg) border-box; color: var(--fr-night); font-weight: 700; border-radius: 10px; white-space: nowrap; } /* Only the fill changes on hover; swapping `background` wholesale here would drop the gradient layer and take the stroke with it. */ .btn:hover { --btn-fill: var(--fr-sunset-gold); color: var(--fr-night); } @keyframes gold-spin { to { --gold-angle: 360deg; } } /* Each axis sweeps back and forth on its own clock. */ @keyframes gold-drift-x { 0%, 100% { --gold-x: 20%; } 50% { --gold-x: 80%; } } @keyframes gold-drift-y { 0%, 100% { --gold-y: 12%; } 50% { --gold-y: 88%; } } /* The three durations are deliberately incommensurate — 6s / 7.3s / 11.1s. CSS has no random(), but periods that share no common multiple produce a combined path that doesn't visibly repeat (these realign only after ~40 minutes), which reads as random rather than as a loop. Rounding them to 6/8/12 would resync every 24s and the pattern would become obvious. */ @media (prefers-reduced-motion: no-preference) { .btn { animation: gold-spin var(--gold-spin, 6s) linear infinite, gold-drift-x var(--gold-drift-x, 7.15s) ease-in-out infinite, gold-drift-y var(--gold-drift-y, 10.04s) ease-in-out infinite; } } .btn--sm { font-size: 15px; padding: 10px 20px; border-radius: 8px; } /* Image-based download button, used by the hero and final CTA. The label is baked into the artwork, so the real text stays in the DOM but visually hidden: that keeps the accessible name, keeps the link findable in a screen reader's link list, and leaves something readable if the image fails. */ .btn-dl { position: relative; /* anchors the hover shine — see the shine block */ display: block; width: var(--btn-dl-w, 260px); aspect-ratio: 260 / 81; flex-shrink: 0; background: url('assets/images/btn-download.png') center / 100% 100% no-repeat; } .btn-dl:hover { background-image: url('assets/images/btn-download-hover.png'); } /* The shine band gets masked to the button artwork's own alpha. This button's rounded corners are painted into the PNG rather than set in CSS, so there's no border-radius for the band to inherit — unmasked it would spill square corners into the transparent ones and show shine outside the button edge. Masking with the same image clips it to the exact silhouette, no radius to guess and nothing to re-tune if the artwork changes shape. */ .btn-dl::after { -webkit-mask: url('assets/images/btn-download.png') center / 100% 100% no-repeat; mask: url('assets/images/btn-download.png') center / 100% 100% no-repeat; } .btn-dl--md { --btn-dl-w: 232px; } .btn-dl--lg { --btn-dl-w: 260px; margin-top: 6px; } /* Off-screen but still announced. clip-path over display:none/visibility so screen readers keep reading it. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .link-arrow { color: var(--fr-sunset-gold); font-weight: 600; font-size: 16px; padding: 15px 12px; } .link-arrow:hover { color: var(--fr-gold-hi); } /* ---------- Sticky nav ---------- */ .nav { position: sticky; top: 0; z-index: 100; background: rgba(7, 22, 41, 0.88); backdrop-filter: blur(12px); border-bottom: 1px solid var(--fr-slate-blue); } .nav__inner { max-width: var(--shell); margin: 0 auto; padding-inline: var(--gutter-l) var(--gutter-r); height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; } .nav__brand { display: flex; align-items: center; gap: 12px; color: var(--fr-silver); min-width: 0; } .nav__logo { border-radius: 8px; display: block; flex-shrink: 0; } .nav__wordmark { font-family: var(--font-slab); font-weight: 700; font-size: 20px; letter-spacing: 0.01em; color: var(--fr-parchment); } .nav__links { display: flex; align-items: center; gap: 28px; font-size: 15px; font-weight: 500; } .nav__link { color: var(--fr-steel); } .nav__link:hover { color: var(--fr-parchment); } /* ---------- Hamburger navigation (everything below 1024px) ---------- One DOM for both modes. The same .nav__menu holds the same links and the same CTA at every width; only its box changes. Above 1024px it is `display: contents`, so .nav__links and the button are laid out as direct flex children of .nav__inner exactly as they were before this drawer existed — which is why the desktop bar is byte-for-byte the original. Below 1024px the same element becomes a drawer. A duplicated mobile menu would have been simpler to style and worse in every other way: two copies of every link in the accessibility tree, two sets of ids to keep unique, and an open/closed state to keep in sync. */ /* No-JS baseline. The toggle is a control we cannot operate without the script, so it stays hidden until the script announces itself; the menu is meanwhile a plain wrapping row of links, which is usable at every width even if it is not pretty. `.has-js-nav` is set by assets/js/nav.js. */ .nav__toggle, .nav__scrim { display: none; } @media (max-width: 63.99rem) { .nav__inner { flex-wrap: wrap; height: auto; padding-block: 10px; row-gap: 10px; } .nav__menu { display: flex; align-items: center; gap: 12px 24px; flex-wrap: wrap; } } .has-js-nav .nav__toggle { /* 44x44 hit area around a 20px glyph — the target is the button, not the bars. Negative margin keeps the enlarged box from pushing the bar taller than its 68px. */ width: 44px; height: 44px; margin-right: -10px; display: grid; place-items: center; flex-shrink: 0; padding: 0; border: 1px solid transparent; border-radius: 10px; background: none; color: var(--fr-parchment); cursor: pointer; } .nav__toggle:hover { border-color: var(--fr-slate-blue); } .nav__toggle-box { width: 20px; height: 14px; position: relative; display: block; } .nav__bar { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor; } .nav__bar:nth-child(1) { top: 0; } .nav__bar:nth-child(2) { top: 6px; } .nav__bar:nth-child(3) { top: 12px; } /* Bars fold into a cross. The outer two rotate about the middle bar's line, so they converge on the centre rather than pivoting in place. */ .nav__toggle[aria-expanded='true'] .nav__bar:nth-child(1) { top: 6px; transform: rotate(45deg); } .nav__toggle[aria-expanded='true'] .nav__bar:nth-child(2) { opacity: 0; } .nav__toggle[aria-expanded='true'] .nav__bar:nth-child(3) { top: 6px; transform: rotate(-45deg); } @media (prefers-reduced-motion: no-preference) { .nav__bar { transition: transform 220ms ease, top 220ms ease, opacity 140ms linear; } } /* The drawer itself. Only below the desktop navigation breakpoint, and only once the script is present to open it. */ @media (max-width: 63.99rem) { .has-js-nav .nav__inner { flex-wrap: nowrap; height: var(--nav-h); padding-block: 0; } .has-js-nav .nav__menu { position: fixed; /* Positioned against .nav, NOT the viewport. .nav carries backdrop-filter: blur(12px), and any backdrop-filter other than `none` makes an element the containing block for its fixed-position descendants — so `inset: 68px 0 0 0` resolved against a 68px-tall bar and collapsed this panel to 44px. Anchoring to `top: 100%` (the bar's own bottom edge) and giving it an explicit height sizes it correctly without touching the bar's blur, which is part of the design. .nav is sticky at top:0, so the panel stays pinned under it at any scroll position. */ top: 100%; right: 0; left: auto; width: min(22rem, 100%); /* dvh so the panel ends at the true bottom edge rather than under the mobile browser's collapsing toolbar. */ height: calc(100dvh - var(--nav-h)); z-index: 99; display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 1.25rem max(1.25rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) 1.25rem; /* This stylesheet has no global box-sizing reset, and the desktop build is authored against content-box — so it is set here rather than globally, where it would silently re-measure every padded box on the page. Without it the drawer's 20px padding and 1px border land OUTSIDE its 22rem width and push 41px past the viewport. */ box-sizing: border-box; background: var(--fr-night); border-left: 1px solid var(--fr-slate-blue); box-shadow: -24px 0 60px rgba(0, 0, 0, 0.5); overflow-y: auto; overscroll-behavior: contain; /* Closed state. The reveal is a clip-path wipe rather than a translateX(100%) park, because the panel is position:fixed and a fixed element sitting outside the viewport still counts toward the document's scrollable width — measured, it added 388px of horizontal overflow at every width below 1024px, which is exactly the page-level scrollbar this whole exercise is meant to eliminate. Clipping reveals the same left-to-right slide without the box ever leaving the screen. visibility (not display:none) so the panel remains a transition target; it is out of the tab order and the accessibility tree either way. */ visibility: hidden; opacity: 0; clip-path: inset(0 0 0 100%); } .has-js-nav .nav__menu[data-open] { visibility: visible; opacity: 1; clip-path: inset(0); } @media (prefers-reduced-motion: no-preference) { .has-js-nav .nav__menu { transition: clip-path 260ms cubic-bezier(0.32, 0.72, 0, 1), opacity 180ms linear, visibility 0s linear 260ms; } .has-js-nav .nav__menu[data-open] { transition-delay: 0s; } } .has-js-nav .nav__links { display: flex; flex-direction: column; align-items: stretch; gap: 2px; font-size: 1rem; } /* Full-width rows at 48px tall. The link is the target, not the word. */ .has-js-nav .nav__link { display: flex; align-items: center; min-height: 48px; padding: 0 0.75rem; border-radius: 10px; color: var(--fr-silver); } .has-js-nav .nav__link:hover { background: var(--fr-deep-blue); color: var(--fr-parchment); } .has-js-nav .nav__cta { margin-top: 0.85rem; text-align: center; padding: 14px 20px; font-size: 1rem; } /* Scrim. Sits under the drawer and over the page, and is what makes an outside tap close the menu. */ .has-js-nav .nav__scrim { display: block; position: fixed; /* Same containing-block caveat as the panel above. */ top: 100%; left: 0; right: 0; height: 100dvh; z-index: 98; background: rgba(5, 15, 29, 0.6); backdrop-filter: blur(2px); border: 0; padding: 0; opacity: 0; visibility: hidden; } .has-js-nav .nav__scrim[data-open] { opacity: 1; visibility: visible; } @media (prefers-reduced-motion: no-preference) { .has-js-nav .nav__scrim { transition: opacity 200ms linear, visibility 0s linear 200ms; } .has-js-nav .nav__scrim[data-open] { transition-delay: 0s; } } } /* Desktop navigation returns at 1024px. This boundary is set by the project, not by the content: the bar itself fits comfortably from about 780px up (wordmark + five links + button measure ~700px against a 1024px shell), so 1024 is a deliberate choice to keep portrait tablets and phones on the drawer rather than the width at which the row would break. Note this is the only breakpoint in the stylesheet at 64rem that is about navigation; the feature and hero splits share the value by coincidence, not because they are related. */ @media (min-width: 64rem) { /* Matched on .has-js-nav so this outranks the drawer rules, which are themselves scoped to it — a media query adds no specificity of its own. */ .has-js-nav .nav__toggle, .has-js-nav .nav__scrim, .nav__toggle, .nav__scrim { display: none; } /* display:contents dissolves the wrapper, restoring the original brand | links | button flex row exactly. */ .nav__menu { display: contents; } } /* Locked while the drawer is open. Applied to by the nav script; scroll position is preserved because the element keeps its box and only stops scrolling. */ .has-nav-open { overflow: hidden; } /* ---------- Parallax header ---------- Ten registered 1728x1013 plates: six scene plates plus four lens-flare ghosts. Depth is expressed as --drift: deeper planes lag further behind the scroll, near planes outrun it. Driven by a scroll-progress timeline, so no JavaScript. Browsers without scroll-driven animation support simply render the composed scene, static. */ .hdr { position: relative; width: 100%; aspect-ratio: 1728 / 1013; /* min-height: 420px; */ max-height: 92svh; overflow: hidden; background: var(--fr-night); /* Required, not cosmetic. The flare plates use mix-blend-mode: screen, and an un-isolated blend group blends against everything behind it — which promotes this whole section above the sticky nav's stacking context and paints the mobile drawer underneath the artwork. Isolating confines the blend to this section, which is where every plate the flares are meant to composite against already lives, so the header is pixel-identical. */ isolation: isolate; } .hdr__layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* --- Per-plate composition knobs. Neutral here; override per layer below. --- --x / --y nudge the plate. % resolves against the plate's own box (--x against width, --y against height); px also works. --scale per-plate zoom. Values >1 also buy headroom for --drift: a plate needs roughly (scale - 1) / 2 of slack per edge. --origin the point --scale grows from, and --drift pivots around. --pos object-fit crop anchor — reframes inside the box without moving the box, so it never exposes an edge. --drift travel across the scroll range. Positive lags behind the scroll (reads as distant), negative outruns it (reads near). */ --x: 0%; --y: 0%; --scale: 1; --origin: 50% 50%; --pos: center 30%; --drift: 0%; object-position: var(--pos); transform-origin: var(--origin); transform: translate3d(var(--x), var(--y), 0) scale(var(--scale)); pointer-events: none; } /* Each plate's full state on one line, near-to-far. */ .hdr__layer--sky { --x: 0%; --y: 0%; --scale: 1; --drift: 50%; } .hdr__layer--far { --x: 0%; --y: 10%; --scale: 1; --drift: 40%; } .hdr__layer--mesa { --x: 0%; --y: 10%; --scale: 1; --drift: 30%; } .hdr__layer--scene { --x: 0%; --y: 10%; --scale: 1; --drift: -12%; } .hdr__layer--mark { --x: 0%; --y: 13%; --scale: 0.95; --drift: -50%; } .hdr__layer--sign { --x: 0%; --y: 12%; --scale: 1; --drift: -20%; } /* Lens-flare ghosts. These plates are black-backed JPEGs with no alpha, so they composite additively: `screen` drops the black to nothing and keeps only the ghost. They sit above the scene because a flare is an artefact of the lens, in front of everything it photographs. Same knobs as any other plate, plus --alpha to dial each ghost back independently. Ordered by distance from the sun along the flare axis: 1 nearest, 4 furthest. */ .hdr__flare { mix-blend-mode: screen; opacity: var(--alpha, 1); } .hdr__flare--1 { --x: 0%; --y: 0%; --scale: 1; --alpha: 0.9; --drift: 55%; } .hdr__flare--2 { --x: 0%; --y: 0%; --scale: 1; --alpha: 0.7; --drift: 65%; } .hdr__flare--3 { --x: 0%; --y: 0%; --scale: 1; --alpha: 0.8; --drift: 70%; } .hdr__flare--4 { --x: 0%; --y: 0%; --scale: 1; --alpha: 0.8; --drift: 80%; } /* The drift is added to --y, so a plate's authored position is its start point rather than being overwritten when the animation takes over. */ @keyframes hdr-drift { to { transform: translate3d(var(--x), calc(var(--y) + var(--drift)), 0) scale(var(--scale)); } } @media (prefers-reduced-motion: no-preference) { .hdr__layer { will-change: transform; animation: hdr-drift linear both; animation-timeline: scroll(root block); animation-range: 0 100vh; } } /* three.js dust particle canvas — rendered above the stampede scene layer but below the foreground mark/sign layers in DOM order. Fills the header band; pointer-events disabled so it never blocks clicks. */ .hdr__dust { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: block; } /* Melts the bottom of the artwork into the hero below. */ .hdr__veil { position: absolute; inset: auto 0 0; height: 22%; background: linear-gradient(180deg, rgba(7, 22, 41, 0) 0%, rgba(7, 22, 41, 0.55) 62%, var(--fr-night) 100%); pointer-events: none; } /* The plate is a 1.71:1 landscape composition. Left alone at 375px it would be 220px tall — a letterbox strip. min-height forces it back to a usable band and object-fit crops into the artwork instead of shrinking it, with --pos walking the crop toward the rider so the subject survives the trim. svh, not vh: with vh the band is sized for the *collapsed* browser chrome and jumps on first scroll as the toolbar retracts. */ @media (max-width: 47.99rem) { .hdr { min-height: 21.25rem; max-height: 70svh; } .hdr__layer { --pos: 32% 32%; } } @media (max-width: 30rem) { .hdr { min-height: 17.5rem; } .hdr__layer { --pos: 34% 34%; } } /* ---------- Hero ---------- */ .hero { /* Glow centred on the screenshot's bottom edge. .hero__media is align-self:end and .hero__shot drops its bottom border/radius, so the image's bottom edge and the section's bottom edge are the same line — hence --glow-y: 100%. */ --glow-x: 75%; --glow-y: 100%; --glow-w: 1100px; --glow-h: 600px; background: radial-gradient(var(--glow-w) var(--glow-h) at var(--glow-x) var(--glow-y), var(--fr-deep-blue) 0%, var(--fr-night) 65%); border-bottom: 1px solid var(--fr-border); } /* Single column by default; the 5fr/7fr split returns at 64rem, which is the first width where the copy column is still wide enough to hold a readable measure beside the screenshot. Below that the two would each be starved. */ .hero__inner { max-width: var(--shell); margin: 0 auto; padding: clamp(2.5rem, 1.333rem + 5.833vw, 6rem) var(--gutter-r) 0 var(--gutter-l); display: grid; gap: clamp(2rem, 1.5rem + 2.5vw, 3.5rem); align-items: center; } .hero__copy { display: flex; flex-direction: column; gap: 22px; padding-bottom: clamp(2.5rem, 1.333rem + 5.833vw, 6rem); } .hero__title { font-family: var(--font-slab); font-weight: 800; /* 34px at 320 rather than the old 44px floor, which pushed "exists." past the edge on a 320px screen. Still reaches the authored 68px at 1280. */ font-size: clamp(2.125rem, 1.28rem + 4.2vw, 4.25rem); line-height: 1.03; margin: 0; color: var(--fr-parchment); text-wrap: balance; } .hero__sub { font-size: clamp(1.0625rem, 1rem + 0.3125vw, 1.25rem); line-height: 1.55; color: var(--fr-steel); margin: 0; max-width: 46ch; text-wrap: pretty; } @media (min-width: 64rem) { .hero__inner { grid-template-columns: 5fr 7fr; } } .hero__actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 8px; } .hero__trust { font-size: 14px; color: var(--fr-steel); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .hero__sep { color: var(--fr-slate-blue); } .hero__media { align-self: end; position: relative; } .hero__shot { display: block; width: 100%; /* Same trap .shot documents below: the width/height attributes that reserve this image's box (and keep it out of the CLS budget) also supply a presentational height hint, which wins over `width: 100%` alone and renders the shot at its literal pixel height. */ height: auto; border-radius: 12px 12px 0 0; border: 1px solid var(--fr-slate-blue); border-bottom: none; box-shadow: 0 -12px 80px rgba(244, 180, 77, 0.12), 0 24px 64px rgba(0, 0, 0, 0.5); } /* ---------- Trust strip ---------- */ .trust { background: var(--fr-deep-blue); border-bottom: 1px solid var(--fr-border); } .trust__inner { max-width: 1240px; margin: 0 auto; padding: 22px var(--gutter-r) 22px var(--gutter-l); display: flex; justify-content: center; gap: 12px clamp(1.25rem, 0.833rem + 2.083vw, 2.5rem); flex-wrap: wrap; font-size: 14px; font-weight: 600; color: var(--fr-silver); } .trust__item { display: flex; align-items: center; gap: 8px; } .trust__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fr-sunset-gold); display: inline-block; } /* ---------- Problem ---------- */ .problem { text-align: center; display: flex; flex-direction: column; gap: 24px; align-items: center; /* force GPU compositing so the magnifier doesn't flicker */ } /* Two-line lockup: an exasperated amber "Windows!" over the complaint itself. The heading shrinks to the width of its long line and centres as a block, which is what lets the kicker sit flush against that line's left edge — centring the kicker as text instead would strand it over the middle of the line and break the read. On narrow viewports max-width hands wrapping back to the normal centred flow. */ .problem__head { width: fit-content; max-width: 100%; text-align: left; transform: rotate(1.25deg) } .problem__kicker { display: block; font-size: 0.8em; line-height: 1.05; color: var(--fr-ranger-amber); transform: rotate(-3deg) translateY(-0.5em); } /* The lockup is a rotated fit-content block, so its corners swing wider than its box — at 320px that is enough to push a page-level scrollbar. Below 48rem it returns to ordinary centred flow and the tilts come off: the kicker's -3deg over a wrapped two-line heading reads as a mistake rather than a flourish. */ @media (max-width: 47.99rem) { .problem__head { text-align: center; width: auto; transform: none; } .problem__kicker { transform: translateY(-0.15em); } } .problem__lede { font-size: 19px; line-height: 1.6; color: var(--fr-steel); margin: 0; max-width: 62ch; text-wrap: pretty; } /* Intrinsic, not counted. `auto-fit` + `minmax(min(100%, X), 1fr)` reflows on the space actually available instead of on a device guess, so there is no breakpoint here at all: two columns wherever two fit, one where they don't. min(100%, X) is what stops the track floor from overflowing a viewport narrower than X — a bare minmax(18rem, 1fr) blows out at 320px. Verified to still resolve to exactly 2 columns in the 796px narrow shell. */ .problem__grid { position: relative; /* anchor for the magnifier below */ display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 20px; margin-top: 16px; text-align: left; width: 100%; } /* Magnifier resting on its mound, straddling the grid's bottom edge. Absolutely positioned, so it drops out of grid flow rather than becoming a fifth cell. top:100% puts its top on that edge; the translate then lifts it back up by a share of its own height, which is what makes it overlap rather than hang. The PNG is padded (T33/B33 of 300), so the mound sits higher than the box. */ .problem__lens { position: absolute; left: 50%; top: 100%; width: var(--lens-width, 23%); height: auto; transform: translate(-50%, var(--lens-lift, -32%)); pointer-events: none; /* Above the cards even when one of them is raised on hover — without this the lens loses the overlap the moment card 3 or 4 is picked up. */ z-index: 3; } /* Thumbs-down marker sits in the card's left gutter. The icon is absolutely positioned and the text is inset by padding, rather than the icon sitting inline — that way a card wrapping to two lines aligns its second line under the text instead of sliding back under the icon. */ .problem__card { position: relative; background: var(--fr-deep-blue); border: 1px solid var(--fr-slate-blue); border-radius: 10px; padding: 18px 20px 18px calc(20px + var(--thumb-size, 36px) + var(--thumb-gap, 18px)); font-size: 15px; line-height: 1.5; color: var(--fr-silver); } /* top: 18px card padding + 0.15em, which centres an 18px icon in the 22.5px line box (15px x 1.5) so it holds the first line when the text wraps. */ .problem__card::before { content: ''; position: absolute; left: 20px; top: calc(24px + 0.15em); width: var(--thumb-size, 32px); height: var(--thumb-size, 32px); background: url('assets/thumb_down.svg') center / contain no-repeat; } /* ---------- Mechanism / three steps ---------- */ .how { display: flex; flex-direction: column; gap: 56px; align-items: center; } .how__head { text-align: center; max-width: 760px; display: flex; flex-direction: column; gap: 20px; } .how__lede { font-size: 18px; line-height: 1.6; color: var(--fr-steel); margin: 0; text-wrap: pretty; } /* margin-top buys the room the icons overhang into — they're lifted out of the cards, so without it they'd collide with the lede above. */ /* Three cards, but expressed intrinsically — with only three items, auto-fit collapses any surplus track to zero and the 1fr floors let the three stretch to fill the row, so the desktop result is identical to `1fr 1fr 1fr`. The icons overhang the card tops, so the clearance has to shrink with the cards or it leaves a hole above a stacked column. */ .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: 24px; width: 100%; margin-top: var(--step-icon-clearance, clamp(3.25rem, 1.5rem + 5vw, 5rem)); } .step { position: relative; /* containing block for the overhanging icon */ background: var(--fr-night); border: 1px solid var(--fr-slate-blue); border-radius: 12px; padding: 32px 28px; display: flex; flex-direction: column; gap: 12px; user-select: none; } /* Icons straddle the card's top edge — centred, sized against the card so they scale with it, and lifted so most of each sits above the card. Positioned rather than in flow, which keeps them out of the text stack: the number sits at the left, clear of the icon's centred footprint. */ .step__icon { /* Local alias so the shared hover rule can rebuild this transform without knowing which card type it is. */ --lift: var(--step-icon-lift, -58%); position: absolute; left: 50%; top: 0; width: var(--step-icon, 45%); height: auto; transform: translate(-50%, var(--lift)); pointer-events: none; /* drop-shadow, not box-shadow — these are cutout PNGs, so the shadow has to follow each icon's alpha silhouette rather than its rectangular box. Two passes: a faint close one for contact, a wide diffuse one for the soft falloff. Stacking them reads softer than a single large blur. */ filter: drop-shadow(0 var(--icon-shadow-near-y, 6px) var(--icon-shadow-near-blur, 10px) rgba(0, 0, 0, var(--icon-shadow-near-alpha, 0.28))) drop-shadow(0 var(--icon-shadow-far-y, 22px) var(--icon-shadow-far-blur, 30px) rgba(0, 0, 0, var(--icon-shadow-far-alpha, 0.4))); } .step__num { font-family: var(--font-slab); font-weight: 800; font-size: 40px; color: var(--fr-ranger-amber); line-height: 1; } .step__title { font-weight: 700; font-size: 18px; color: var(--fr-parchment); } .step__body { margin: 0; font-size: 15px; line-height: 1.55; color: var(--fr-steel); } /* ---------- Hover shine + icon pop (step cards, format cards, nav button) ---------- One definition serving both. Each icon declares a --lift alias for its own offset, which is what lets the hover rule rebuild the transform without caring which card it is. Whole effect is gated on prefers-reduced-motion, so a visitor who asked for less movement gets a static card, not a damped one. */ @media (prefers-reduced-motion: no-preference) { /* Card pop. 5% on the box itself, compounding with the icon's own scale so the icon still leads and the card follows underneath it. Deliberately no z-index: a 5% grow adds ~9px per side to a step card against a 24px gutter, and ~6px to a format card against a 20px one, so neither ever reaches its neighbour — raising one would only buy a paint-order flicker on the way back down. */ .step, .format { transition: transform var(--card-pop-dur, 220ms) var(--pop-ease, cubic-bezier(0.34, 1.56, 0.64, 1)); } .step:hover, .format:hover { transform: scale(var(--card-pop, 1.05)); } /* Download button. Same 5% and same curve as the cards, so the page has one hover vocabulary. The shine ::after is a child, so it scales with the button and stays registered to the artwork it's masked against. */ .btn-dl { transition: transform var(--card-pop-dur, 220ms) var(--pop-ease, cubic-bezier(0.34, 1.56, 0.64, 1)); } .btn-dl:hover { transform: scale(var(--btn-dl-pop, 1.05)); } /* Problem cards get the same pop plus a tilt. CSS has no random(), so the scatter is authored: a fixed angle per card, mixed in sign and magnitude across the ±3deg range so the four don't read as a mechanical alternation. Tune any one of them on its own. These do need a z-index, unlike the step and format cards. Two columns at the narrow measure leave a 14px gutter, and rotating a wide short box swings its corners out far enough to close most of that — so a lifted card can meet its neighbour and has to be the one on top. The z-index change is delayed by the pop duration on the way back down, which keeps the card above its neighbour until it has finished settling instead of dropping behind mid-animation. */ .problem__card { --card-tilt: 0deg; transition: transform var(--card-pop-dur, 220ms) var(--pop-ease, cubic-bezier(0.34, 1.56, 0.64, 1)), z-index 0s linear var(--card-pop-dur, 220ms); } .problem__card:nth-child(1) { --card-tilt: -2.2deg; } .problem__card:nth-child(2) { --card-tilt: 3deg; } .problem__card:nth-child(3) { --card-tilt: -3deg; } .problem__card:nth-child(4) { --card-tilt: 1.7deg; } .problem__card:hover { transform: rotate(var(--card-tilt)) scale(var(--card-pop, 1.05)); z-index: 2; transition: transform var(--card-pop-dur, 220ms) var(--pop-ease, cubic-bezier(0.34, 1.56, 0.64, 1)), z-index 0s; } /* Thumb pop, on the same timing as the step and format icons so every card on the page snaps the same way. It compounds with the card's own scale, which is the point — the icon leads and the card follows. Grown from its centre, which walks the left edge in from 20px to ~17px: still clear of the card border, and the text is inset past the icon by padding so it cannot be reached. */ .problem__card::before { transition: transform var(--pop-dur, 180ms) var(--pop-ease, cubic-bezier(0.34, 1.56, 0.64, 1)); } .problem__card:hover::before { transform: scale(var(--thumb-pop, 1.5)); } /* Toolbox cards press in rather than out — 10% down. Same overshooting curve as everything else on the page, which on a shrink dips a little past 0.9 and settles back: the squash that makes it read as a press instead of a fade. Shrinking can't reach a neighbour, so no z-index here. */ .tool { transition: transform var(--card-pop-dur, 220ms) var(--pop-ease, cubic-bezier(0.34, 1.56, 0.64, 1)); user-select: none; /* prevents a text selection highlight from appearing on the card when the user clicks it */ } .tool:hover { transform: scale(var(--tool-press, 0.95)); } /* Icon pop. The transition sits on the base rule, not on :hover, so it eases back out as well as in. The curve overshoots slightly past 1 — that tiny bounce is what makes it read as a snap rather than a slide. */ .step__icon, .format__icon { transition: transform var(--pop-dur, 180ms) var(--pop-ease, cubic-bezier(0.34, 1.56, 0.64, 1)); z-index: 5; /* above the card border when it pops, and above the shine */ } .step:hover .step__icon, .format:hover .format__icon { transform: translate(-50%, var(--lift)) scale(var(--icon-pop, 1.2)); } /* Diagonal shine. Hard stops — the color repeats at the same position rather than ramping — so the band has crisp edges instead of a soft feather. It sweeps by animating background-position, not transform: neither card can use overflow:hidden to contain a moving child, because the icons overhang the top edge on purpose and would be clipped. A background is clipped to the element's own rounded box for free, so the band stays inside the card. */ .step::after, .format::after, .btn::after, .btn-dl::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background-image: linear-gradient(115deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, var(--shine-alpha, 0.15)) 40%, rgba(255, 255, 255, var(--shine-alpha, 0.15)) 47%, rgba(255, 255, 255, 0) 47%); background-size: 300% 100%; background-repeat: no-repeat; /* Band parked off the left edge. */ background-position: 100% 0; opacity: 0; } /* Transition lives only on :hover, so leaving the card snaps the band back instantly instead of reversing it — the next hover always starts clean. */ .step:hover::after, .format:hover::after, .btn:hover::after, .btn-dl:hover::after { opacity: 1; background-position: -50% 0; transition: background-position var(--shine-dur, 1s) ease-out, opacity 100ms linear; } } /* ---------- Feature splits ---------- */ /* Stacked below 64rem. The asymmetric 5/7 split can't be expressed intrinsically the way the card grids can, and squeezing it into a portrait tablet leaves the copy at roughly 300px — narrower than the screenshot's own UI text. So the split waits until there is genuinely room for both. Source order already puts the copy first in half these blocks and the media first in the other half. When stacked that alternation is what the reader gets, which is the correct reading order in both cases: `--media-first` sections lead with the screenshot the copy then explains. No CSS reordering, so DOM order and visual order stay identical for keyboard users. */ .feature { display: grid; gap: clamp(1.75rem, 1rem + 2.5vw, 2.125rem); align-items: center; } @media (min-width: 64rem) { .feature--text-first { grid-template-columns: 5fr 7fr; } .feature--media-first { grid-template-columns: 7fr 5fr; } } .feature__copy { display: flex; flex-direction: column; gap: 18px; } .feature__body { font-size: 17px; line-height: 1.6; color: var(--fr-steel); margin: 0; text-wrap: pretty; } .feature__note { font-size: 15px; line-height: 1.6; color: var(--fr-steel); margin: 0; } .feature__fineprint { font-size: 14px; line-height: 1.5; color: var(--fr-steel); margin: 0; } /* Checkbox markers instead of bullets. Drawn as a ::before rather than list-style-image, which gives no control over size or vertical alignment — the icon needs both to sit on the text baseline properly. The left padding moves from the

, so the marker can be absolutely positioned against the item it belongs to and wrapped lines align under the text rather than under the icon. */ .feature__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--fr-silver); } .feature__list li { position: relative; padding-left: var(--check-gap, 28px); } /* top: 0.15em centres an 18px icon in the 22.5px line box (15px x 1.5), so it sits on the first line even when the item wraps. */ .feature__list li::before { content: ''; position: absolute; left: 0; top: 0.15em; width: var(--check-size, 18px); height: var(--check-size, 18px); background: url('assets/checkbox.svg') center / contain no-repeat; } .feature__list--spaced { margin: 8px 0 0; } /* Positioning context for props that overlap a feature screenshot. .shot has no overflow clip, so a prop can hang past the screenshot's edges freely. */ .feature__media { position: relative; } /* Saguaro standing at the screenshot's right edge — offsets are proportional to the screenshot, so it holds its placement as the shot resizes. Negative right and bottom let the arm and the rocky base break out past the frame. */ /* Now a VP9 WebM with an alpha channel, so it still composites as a cutout rather than a rectangle. display:block matters here in a way it didn't for the : a video is inline by default and would pick up descender space under its baseline. The width/height attributes supply the aspect ratio so the box is reserved before metadata arrives. */ .feature__cactus { position: absolute; right: var(--cactus-right, -35%); bottom: var(--cactus-bottom, -13%); width: var(--cactus-width, 50%); height: auto; display: block; overflow: hidden; pointer-events: none; } /* Hare and tortoise flanking the indexing screenshot. Both sit on the same ground line, so they share a --creature-bottom rather than each carrying its own — nudging one keeps them standing on the same plane as the other. */ .feature__rabbit, .feature__tortoise { position: absolute; bottom: var(--creature-bottom, -23%); height: auto; pointer-events: none; } /* The rabbit webm is authored unlike every other character. Rather than a tight cutout it's a 736x736 STAGE: the hare runs across it toward the camera, so it changes scale dramatically through the loop — roughly 150px to 500px on screen at these settings. That means it can't be size-matched to the still the way the other swaps were; matching any one frame guarantees mismatching the rest. These values frame the stage over the screenshot's lower left so the run reads well across the whole cycle, rather than pinning one pose. The trim comes off --creature-bottom rather than replacing it, so nudging the shared value still moves the hare and the tortoise together. */ .feature__rabbit.is-motion { left: var(--rabbit-left, -30%); width: var(--rabbit-width, 55%); bottom: calc(var(--creature-bottom, -20%) - var(--rabbit-pad-trim, 7%)); display: block; /* a