/* --------------------------------------------------------------------------- CONTENT PAGES — /faq and /about. The design is ported from the SINAIQ pages (sinaiq.com/faq, /about), which are Next.js + Tailwind + Radix + framer-motion. Nothing came across as code: this site has no build step, so the port is design-to-vanilla, the same move src/cinematic.css documents for the 21st.dev hero. What carried over is the one idea those pages are built on — big uppercase type sitting at ~18% white until it is opened or reached, then igniting to full. Recoloured to HYREN: brand red #FF2233 replaces SINAIQ's purple/pink/ orange shimmer, Anton replaces Inter for display, and the micro-labels take the mono voice the rest of this site already uses. Radix's accordion is a native

here, so the FAQ opens, keyboard-navigates and deep-links with no JavaScript at all. src/pages.js only adds the height transition and the one-open-at-a-time behaviour. --------------------------------------------------------------------------- */ /* Declared here, not pulled from cinematic.css: these pages load none of the film's stylesheets, and Anton is the one thing they need from it. Same woff2, same unicode-range — the browser reuses the already-cached file. */ @font-face { font-family: 'Anton'; src: url('../vendor/fonts/Anton-latin.woff2') format('woff2'), url('../vendor/fonts/Anton.ttf') format('truetype'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; font-display: swap; } :root { --red: #FF2233; --red-deep: #7A0F18; --ink: #060607; --fg: #F5F5F7; --muted: rgba(245, 245, 247, 0.55); --dim: rgba(245, 245, 247, 0.18); --line: rgba(255, 255, 255, 0.09); --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, Menlo, monospace; --display: 'Anton', 'Helvetica Neue', Impact, sans-serif; } * { margin: 0; padding: 0; box-sizing: border-box; } html { background: var(--ink); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Deep links from the footer and the FAQ's own #hash anchors must not land behind the floating nav. */ scroll-padding-top: calc(var(--nav-h) + 18px); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { background: var(--ink); color: var(--fg); font-family: var(--sans); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; /* clip, not hidden: `hidden` on makes position:sticky stop sticking in Chromium, which would kill the timeline rail. */ overflow-x: clip; } @supports not (overflow: clip) { body { overflow-x: hidden; } } a { color: var(--red); } .display { font-family: var(--display); font-weight: 400; letter-spacing: -0.015em; text-transform: uppercase; /* Anton's caps slice at the baseline below ~1.05. */ line-height: 1.05; } /* A visible focus ring everywhere, in brand red, since the default UA ring is invisible against near-black. */ :focus-visible { outline: 2px solid rgba(255, 34, 51, .75); outline-offset: 4px; border-radius: 3px; } .skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: 10px; background: var(--red); color: #fff; font: 700 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; transition: top .18s ease; } .skip-link:focus { top: 12px; } /* =========================================================================== PAGE HEAD =========================================================================== */ .page { position: relative; width: min(100%, 1180px); margin-inline: auto; padding: calc(var(--nav-h) + 46px) clamp(20px, 5vw, 56px) 0; } .page-head { padding: clamp(34px, 7vw, 82px) 0 clamp(30px, 5vw, 54px); } .eyebrow { display: block; margin-bottom: 18px; color: var(--red); font: 700 10px/1 var(--mono); letter-spacing: .26em; text-transform: uppercase; } .page-head h1 { font-family: var(--display); font-weight: 400; font-size: clamp(2.6rem, 8.5vw, 6.2rem); line-height: 0.95; letter-spacing: -0.025em; text-transform: uppercase; } .page-lede { max-width: 46ch; margin-top: 22px; color: var(--muted); font-size: clamp(1rem, 1.5vw, 1.2rem); line-height: 1.6; } .page-lede a { text-decoration: none; border-bottom: 1px solid rgba(255,34,51,.4); } .page-lede a:hover { border-bottom-color: var(--red); } /* One continuous rule, red for its first stretch then blended into a hairline — the same edge the footer draws, so the page opens and closes on it. */ .rule { position: relative; height: 1px; border: 0; background: linear-gradient(90deg, var(--red) 0, var(--red) clamp(76px, 12vw, 180px), rgba(255, 255, 255, .10) calc(clamp(76px, 12vw, 180px) + 150px), rgba(255, 255, 255, .10) 100%); } /* =========================================================================== FAQ — nested

. Category holds questions; both dim until opened. =========================================================================== */ .faq { padding-bottom: clamp(50px, 8vw, 96px); } .faq-cat, .faq-q { border-bottom: 1px solid var(--line); } .faq-cat:last-of-type { border-bottom: 0; } .faq-q:last-of-type { border-bottom: 0; } .faq summary { display: flex; align-items: flex-start; gap: 16px; cursor: pointer; list-style: none; transition: color .22s ease; } .faq summary::-webkit-details-marker { display: none; } .faq summary::marker { content: ""; } .faq summary:focus-visible { outline-offset: -3px; } /* -- category level -- */ .faq-cat > summary { padding: clamp(16px, 2.4vw, 26px) 0; color: var(--dim); } /* Same reason as .tl-card: a tapped summary keeps :hover until the next tap, so on a phone a closed question sits half-lit next to the open one. */ @media (hover: hover) { .faq-cat > summary:hover { color: rgba(245, 245, 247, .42); } } .faq-cat[open] > summary { color: var(--fg); } .faq-cat > summary h2 { font-family: var(--display); font-weight: 400; font-size: clamp(2rem, 6vw, 4.25rem); line-height: 1.02; letter-spacing: -0.02em; text-transform: uppercase; } /* A hairline that grows out of the left edge as the category opens: the only affordance in place of the chevron the SINAIQ original hides. */ .faq-cat > summary::before { content: ""; flex: 0 0 auto; align-self: center; width: 0; height: 2px; background: var(--red); transition: width .3s ease; } .faq-cat[open] > summary::before { width: clamp(18px, 3vw, 40px); } /* -- question level -- */ .faq-body { padding-left: clamp(0px, 3vw, 54px); } .faq-q > summary { padding: clamp(12px, 1.6vw, 18px) 0; color: var(--dim); } @media (hover: hover) { .faq-q > summary:hover { color: rgba(245, 245, 247, .42); } } .faq-q[open] > summary { color: var(--fg); } /* Fixed width, not intrinsic: the answer below is indented by this plus the flex gap, so a number that sized itself to its own glyphs would leave the answer a few pixels off the question it belongs to. */ .faq-num { flex: 0 0 20px; padding-top: .45em; color: rgba(245, 245, 247, .26); font: 700 10px/1 var(--mono); letter-spacing: .18em; } .faq-q[open] .faq-num { color: var(--red); } .faq-q > summary h3 { font-family: var(--display); font-weight: 400; font-size: clamp(1.3rem, 3.4vw, 2.5rem); line-height: 1.06; letter-spacing: -0.015em; text-transform: uppercase; } .faq-a { max-width: 66ch; padding: 0 0 clamp(20px, 2.6vw, 30px) calc(20px + 16px); color: var(--muted); font-size: clamp(.95rem, 1.15vw, 1.05rem); } .faq-a > * + * { margin-top: 12px; } .faq-a ul { padding-left: 20px; } .faq-a li + li { margin-top: 6px; } .faq-a b, .faq-a strong { color: rgba(245, 245, 247, .82); font-weight: 600; } .faq-a a { text-decoration: none; border-bottom: 1px solid rgba(255, 34, 51, .4); } .faq-a a:hover { border-bottom-color: var(--red); } /* The clause each answer is bound to. An answer that drifts from the policy is a bug, and this is where a reader checks. */ .faq-src { display: inline-block; margin-top: 4px; color: rgba(245, 245, 247, .34); font: 700 9px/1.6 var(--mono); letter-spacing: .16em; text-transform: uppercase; } .faq-src a { color: inherit; border-bottom-color: rgba(255, 255, 255, .18); } .faq-src a:hover { color: var(--fg); border-bottom-color: var(--red); } @media (max-width: 620px) { .faq-a { padding-left: 0; } .faq summary { gap: 12px; } } /* =========================================================================== TIMELINE — /about. A rail whose fill tracks scroll; each chapter ignites when the fill reaches its dot. =========================================================================== */ .tl { position: relative; padding-bottom: clamp(50px, 8vw, 110px); } /* The unlit rail, faded out at both ends so it has no hard start or stop. */ .tl-rail { position: absolute; top: 0; left: 19px; width: 2px; background: rgba(255, 255, 255, .12); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 7%, #000 93%, transparent 100%); } /* Height is written by src/pages.js. With JavaScript off the fill stays at 0 and every chapter renders in its lit state instead — see .tl-item defaults. */ .tl-fill { position: absolute; /* Longhands, not `inset:` — that shorthand is Chromium 87 and this site is gated at 79 (see test/test_compat.py). Dropped, the fill would be unpositioned and the rail would never appear to fill. */ top: 0; right: 0; left: 0; height: 0; border-radius: 2px; background: linear-gradient(to bottom, var(--red-deep), var(--red)); } .tl-item { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: clamp(20px, 4vw, 56px); padding-top: clamp(46px, 9vw, 128px); } .tl-item:first-child { padding-top: clamp(26px, 4vw, 56px); } .tl-head { position: sticky; top: calc(var(--nav-h) + 30px); align-self: start; display: flex; align-items: center; gap: 20px; /* Above the rail, so the dot's black disc masks the line behind it. */ z-index: 2; } .tl-dot { position: relative; flex: 0 0 auto; width: 40px; height: 40px; margin-left: 0; border-radius: 50%; background: var(--ink); display: flex; align-items: center; justify-content: center; } .tl-dot::after { content: ""; width: 14px; height: 14px; border-radius: 50%; background: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .22); transition: background-color .35s ease, border-color .35s ease, box-shadow .35s ease; } .tl-title { font-family: var(--display); font-weight: 400; font-size: clamp(1.5rem, 3.6vw, 3rem); line-height: 1.04; letter-spacing: -0.02em; text-transform: uppercase; color: var(--dim); transition: color .35s ease; } /* Lit. `html.tl-js` is set by src/pages.js at boot: without it — no JS, or the script failed — every chapter renders lit, because a page whose headings are all at 18% white is unreadable. Progressive enhancement, not decoration. */ .tl-item.is-on .tl-dot::after, html:not(.tl-js) .tl-dot::after { background: var(--red); border-color: var(--red); box-shadow: 0 0 0 4px rgba(255, 34, 51, .16), 0 0 18px rgba(255, 34, 51, .55); } .tl-item.is-on .tl-title, html:not(.tl-js) .tl-title { color: var(--fg); } .tl-body { padding-top: 4px; min-width: 0; } /* -- content primitives, shared by every chapter -- */ .tl-lead { max-width: 30ch; color: rgba(245, 245, 247, .88); font-size: clamp(1.2rem, 2.5vw, 2rem); font-weight: 600; line-height: 1.22; letter-spacing: -0.015em; text-transform: uppercase; } .tl-body > * + * { margin-top: clamp(20px, 2.6vw, 34px); } .tl-note { max-width: 60ch; color: var(--muted); } .tl-note a { text-decoration: none; border-bottom: 1px solid rgba(255, 34, 51, .4); } .tl-note a:hover { border-bottom-color: var(--red); } /* A quiet stack of statements behind one hairline. */ .tl-list { display: grid; gap: 14px; max-width: 56ch; padding-left: clamp(16px, 2vw, 24px); border-left: 2px solid var(--line); list-style: none; } .tl-list li { color: rgba(245, 245, 247, .45); font-size: clamp(1rem, 1.5vw, 1.25rem); font-weight: 600; line-height: 1.35; text-transform: uppercase; } /* The numbered steps of the engine: a red edge that brightens on hover. */ .tl-steps { display: grid; gap: 14px; } .tl-step { padding: 4px 0 4px clamp(16px, 2vw, 24px); border-left: 2px solid rgba(255, 34, 51, .38); transition: border-color .25s ease; } /* Hover-gated: these blocks are not interactive, so on a touchscreen the state just sticks to whatever the finger brushed on the way past and stays lit until something else is tapped. A phone should never show it. */ @media (hover: hover) { .tl-step:hover { border-left-color: var(--red); } } .tl-step-k { display: block; margin-bottom: 5px; color: rgba(245, 245, 247, .3); font: 700 9.5px/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; } .tl-step-t { color: rgba(245, 245, 247, .82); font-size: clamp(1.1rem, 2vw, 1.6rem); font-weight: 600; line-height: 1.2; text-transform: uppercase; } .tl-step-d { margin-top: 4px; color: var(--muted); font-size: .95rem; } .tl-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .tl-card { padding: clamp(16px, 2vw, 22px); border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, .015); transition: border-color .25s ease, background-color .25s ease; } @media (hover: hover) { .tl-card:hover { border-color: rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .035); } } .tl-card-t { color: rgba(245, 245, 247, .82); font-size: clamp(1rem, 1.5vw, 1.2rem); font-weight: 600; line-height: 1.25; text-transform: uppercase; } .tl-card-d { margin-top: 7px; color: var(--muted); font-size: .93rem; line-height: 1.55; } @media (max-width: 620px) { .tl-cards { grid-template-columns: minmax(0, 1fr); } } .tl-numbered { display: grid; gap: 16px; list-style: none; } .tl-numbered li { display: flex; align-items: flex-start; gap: 16px; } .tl-numbered .n { flex: 0 0 auto; padding-top: .3em; color: rgba(245, 245, 247, .22); font-family: var(--display); font-size: clamp(1.1rem, 2.2vw, 1.8rem); line-height: 1; } .tl-numbered p { color: rgba(245, 245, 247, .55); font-size: clamp(1rem, 1.5vw, 1.25rem); font-weight: 600; line-height: 1.3; text-transform: uppercase; } .tl-numbered .sub { margin-top: 5px; font-weight: 400; text-transform: none; color: var(--muted); font-size: .93rem; } .tl-quote { max-width: 44ch; padding: clamp(18px, 2.4vw, 26px) clamp(18px, 2.4vw, 28px); border: 1px solid var(--line); border-left: 2px solid var(--red); border-radius: 0 14px 14px 0; background: linear-gradient(120deg, rgba(122, 15, 24, .13), transparent 70%); color: rgba(245, 245, 247, .88); font-size: clamp(1.02rem, 1.6vw, 1.3rem); line-height: 1.45; } .tl-quote cite { display: block; margin-top: 12px; color: rgba(245, 245, 247, .34); font: 700 9px/1.6 var(--mono); font-style: normal; letter-spacing: .18em; text-transform: uppercase; } /* Timeline goes single-column below the tablet breakpoint: a 330px rail column plus a body column cannot both hold their type. The rail stays, so the chapter still lights as it is reached. */ @media (max-width: 860px) { .tl-item { grid-template-columns: minmax(0, 1fr); gap: 18px; } .tl-head { position: static; } .tl-body { padding-left: 60px; } } @media (max-width: 620px) { .tl-body { padding-left: 0; } .tl-dot { width: 34px; height: 34px; } .tl-rail { left: 16px; } .tl-head { gap: 14px; } } /* =========================================================================== CLOSING CTA — shared by both pages, sits above the footer. =========================================================================== */ .close-cta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px clamp(16px, 3vw, 30px); padding: clamp(30px, 4.5vw, 54px) 0 clamp(42px, 6vw, 76px); } .close-cta p { color: var(--muted); max-width: 52ch; } .close-cta a { text-decoration: none; border-bottom: 1px solid rgba(255, 34, 51, .4); } .close-cta a:hover { border-bottom-color: var(--red); } /* =========================================================================== SHORT VIEWPORTS — a phone held landscape is ~390px tall, and a split-screen pane can be 420. Every size above is driven by vw and by fixed padding, so a wide-but-short screen renders type meant for a desktop into a third of the height: measured at 844x390 the first line of copy started 46% down the page and the headline filled the rest, so the whole first screen was chrome and one heading. cinematic.css carries the same block for the film, for the same reason. Nothing taller than 540px is touched, so the desktop and portrait-phone reference layouts are untouched. =========================================================================== */ @media (max-height: 540px) { .page { padding-top: calc(var(--nav-h) + 12px); } .page-head { padding: 18px 0 20px; } .eyebrow { margin-bottom: 10px; } /* Sized by the HEIGHT, as the film does — vw alone is what put a 71px headline on a 390px-tall screen. */ .page-head h1 { font-size: clamp(1.6rem, 8.5vh, 2.9rem); } .page-lede { margin-top: 12px; font-size: .95rem; line-height: 1.5; } .faq-cat > summary { padding: 12px 0; } .faq-cat > summary h2 { font-size: clamp(1.5rem, 7.5vh, 2.6rem); } .faq-q > summary { padding: 9px 0; } .faq-q > summary h3 { font-size: clamp(1.1rem, 5.5vh, 1.9rem); } .tl-item { padding-top: clamp(28px, 7vh, 54px); } .tl-item:first-child { padding-top: 18px; } .tl-title { font-size: clamp(1.3rem, 7vh, 2.2rem); } .tl-lead { font-size: clamp(1.05rem, 5.5vh, 1.5rem); } .tl-head { top: calc(var(--nav-h) + 12px); } .close-cta { padding: 20px 0 30px; } } /* =========================================================================== REVEAL — the framer-motion whileInView stagger, as one class toggled by an IntersectionObserver. `html.rv-js` gates it for the same reason .tl-js does: with no JavaScript nothing is ever un-hidden, so nothing may start hidden. =========================================================================== */ html.rv-js .rv { opacity: 0; transform: translateY(18px); } html.rv-js .rv.is-in { opacity: 1; transform: none; transition: opacity .55s ease, transform .55s cubic-bezier(.22, .61, .36, 1); } @media (prefers-reduced-motion: reduce) { html.rv-js .rv { opacity: 1; transform: none; } html.rv-js .rv.is-in { transition: none; } .nav, .nav-link, .tl-dot::after, .tl-title, .faq summary, .faq-cat > summary::before, .tl-step, .tl-card { transition: none; } }