/* ============================================================================= HOMEPAGE (Phase 2) — promoted to "/" on 2026-07-25, replacing the sitemap homepage. The old copy lives on at "/guide". Scoped entirely under `.frhome` (plus `body.fh-skin` for the page ground and the `.fr-spoilers-*` state classes on ), so it is inert on every other page in the site. Built from the parts the rest of the site already uses, so this reads as the same site as the redesigned /episode page: · the dark ground + 3px accent rule of the navbar and footer · the Massive Dynamic ink/body/muted/line palette and Futura display face · the five bright verse accents from the navbar mega-menu markers ============================================================================= */ body.fh-skin { background-color: #fff; font-family: Helvetica, Arial, "Helvetica Neue", sans-serif; } .frhome { /* Massive Dynamic palette (public/css/massive-dynamic.css) */ --fh-ink: #2a3540; --fh-body: #3c4a57; --fh-muted: #6b7a86; --fh-line: #d3dfea; --fh-accent: #0056b7; --fh-accent-lit: #4d9de0; --fh-display: "Futura", "Century Gothic", "Twentieth Century", "Avant Garde", system-ui, sans-serif; color: var(--fh-ink); } .frhome a { text-decoration: none } /* ================================================================= * | SPOILER STATE | | Three states, driven by a class the inline script puts on | from localStorage.fringeSpoilers: | | (no class) undecided — full curtain, safe copy | .fr-spoilers-shown finished — everything visible | .fr-spoilers-hidden mid-watch — compact notice, safe copy | | The SAFE state is the default in plain CSS, so JS-off, cold loads | and the moment before hydration all protect a first-time viewer. | Nothing here hides content the server didn't also intend to hide — | it's spoiler courtesy, not access control. * ================================================================= */ /* Safe-vs-spoiler copy pairs (the grid legend, the feature tiles). All four carry the extra `.frhome` so they out-specify the component's own `display` — `.frhome-features { display: grid }` is declared further down this file and would otherwise win the tie on source order and leak the spoiler set. */ .frhome .frhome-spoiler-only { display: none } .fr-spoilers-shown .frhome .frhome-spoiler-only { display: block } .fr-spoilers-shown .frhome .frhome-features.frhome-spoiler-only { display: grid } .fr-spoilers-shown .frhome .frhome-safe { display: none } .frhome-cards-wrap { position: relative } /* SAFE DEFAULT — the whole strip ships blurred, so an undecided reader, a JS-off reader, and the pre-hydration moment of every state are all protected. The `shown` state and the JS per-card gate only ever REMOVE blur. `filter` on the grid rather than a cover over it, so nothing is readable by squinting past an overlay, and the shape of what's hidden still shows through. */ .frhome-cards { filter: blur(14px) saturate(0.6); opacity: 0.5; pointer-events: none; user-select: none; transition: filter 0.25s ease, opacity 0.25s ease; } .fr-spoilers-shown .frhome-cards { filter: none; opacity: 1; pointer-events: auto; user-select: auto; } /* Declared first-time viewer (watched nothing, data-fr-watched="0"): collapse the strip — no point reserving three cards' worth of blurred height they've asked not to see — and show the compact notice instead. A MID-WATCH reader (position 1..99) keeps the strip; see the per-card gate below. */ html[data-fr-watched="0"] .frhome-cards-wrap { min-height: 0 } html[data-fr-watched="0"] .frhome-cards { display: none } /* MID-WATCH per-card gate. JS tags each card against the reader's position, then marks the strip `.is-gated` — at which point the whole-strip blur gives way to PER-CARD blur: cards up to where they've watched are legible, everything past stays blurred and unclickable. Gated only once JS has run, so the safe default above still covers the pre-hydration flash. */ .frhome-cards.is-gated { filter: none; opacity: 1; pointer-events: auto; user-select: auto; } .frhome-cards.is-gated .frhome-card--locked { pointer-events: none; cursor: default; position: relative; } /* Blur the card's contents but NOT the lock badge (a sibling), so it stays crisp. */ .frhome-cards.is-gated .frhome-card--locked > :not(.frhome-card__lock) { filter: blur(14px) saturate(0.6); opacity: 0.55; user-select: none; } /* The crisp "locked" affordance, so a blurred card reads as withheld, not broken. */ .frhome-card__lock { display: none } .frhome-cards.is-gated .frhome-card--locked .frhome-card__lock { display: flex; position: absolute; inset: 0; z-index: 2; align-items: center; justify-content: center; color: var(--fh-ink); font-size: 1.4rem; opacity: 0.7; pointer-events: none; } /* Shuffle makes sense once ANY card is legible — the shown state, and mid-watch (but not the first-timer, who has none). "Hide spoilers" only once everything is showing. */ .frhome-shuffle, .frhome-recover { display: none } .fr-spoilers-shown .frhome-shuffle { display: inline-block } html.fr-spoilers-hidden:not([data-fr-watched="0"]) .frhome-shuffle { display: inline-block } .fr-spoilers-shown .frhome-recover { display: inline-block } .frhome-discover-tools { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap } /* Mid-watch footnote (position 1..99): explains the blurred cards and offers the settings gear. Not a spoiler, so a pre-JS flash is harmless — pure CSS. */ .frhome-cards-note { display: none } html.fr-spoilers-hidden:not([data-fr-watched="0"]) .frhome-cards-note { display: block; margin: 1.1rem 0 0; font-size: 0.9rem; line-height: 1.55; color: var(--fh-muted); } .frhome-cards-note__link { border: 0; background: none; padding: 0; font: inherit; color: var(--fh-accent); text-decoration: underline; cursor: pointer; } /* --- the curtain ---------------------------------------------------------- */ .frhome-curtain { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem 1.5rem; border: 1px solid var(--fh-line); border-radius: 4px; background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } .fr-spoilers-shown .frhome-curtain { display: none } /* The full curtain is off in every hidden state; the compact variant replaces it ONLY for the declared first-timer (watched nothing). A mid-watch reader gets the per-card strip + footnote instead, not this notice. */ .frhome-curtain--compact { display: none } .fr-spoilers-hidden .frhome-curtain { display: none } html[data-fr-watched="0"] .frhome-curtain--compact { display: flex; position: static; padding: 1.15rem 1.25rem; background: #f6f9fc; -webkit-backdrop-filter: none; backdrop-filter: none; } .frhome-curtain__eyebrow { font-family: var(--fh-display); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--fh-muted); margin: 0 0 0.9rem; } .frhome-curtain__eyebrow i { margin-right: 0.4rem } .frhome-curtain__lead { max-width: 34rem; margin: 0 0 0.5rem; font-size: 1rem; line-height: 1.6; color: var(--fh-body); } .frhome-curtain__warn { margin: 0 0 1.4rem; font-family: var(--fh-display); font-size: 0.95rem; font-weight: 600; letter-spacing: 0.02em; color: var(--fh-ink); } .frhome-curtain__actions { display: flex; gap: 0.7rem; flex-wrap: wrap; justify-content: center } .frhome-curtain__btn { font-family: var(--fh-display); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; padding: 0.7rem 1.2rem; border-radius: 3px; border: 1px solid var(--fh-line); background: #fff; color: var(--fh-body); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; } .frhome-curtain__btn:hover { border-color: var(--fh-muted) } .frhome-curtain__btn--go { border-color: var(--fh-accent); background: var(--fh-accent); color: #fff; } .frhome-curtain__btn--go:hover { background: #00448f; border-color: #00448f } .frhome-curtain__link { border: 0; background: none; padding: 0; font: inherit; color: var(--fh-accent); text-decoration: underline; cursor: pointer; } .frhome-recover { font-family: var(--fh-display); font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--fh-muted); background: transparent; border: 1px solid var(--fh-line); border-radius: 3px; padding: 0.6rem 0.9rem; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; } .frhome-recover:hover { color: var(--fh-ink); border-color: var(--fh-muted) } .frhome-recover i { margin-right: 0.35rem } @media (prefers-reduced-motion: reduce) { .frhome-cards { transition: none } } /* ================================================================= * | HERO * ================================================================= */ .frhome-hero { position: relative; isolation: isolate; margin-top: 57px; /* navbar is .fixed-top; body has no offset */ padding: 4.5rem 0 0; overflow: hidden; background: radial-gradient(120% 130% at 15% 0%, #1d2836 0%, #12161d 55%, #0d1014 100%); color: #e8edf3; } /* --- the arc diagram ------------------------------------------------------ Sits behind the copy, anchored to the hero's bottom edge, scaled uniformly (height:auto) so the 100 nodes stay circles. Masked out at the top so the tall cross-season arcs dissolve rather than colliding with the headline. */ .frhome-hero__arc { position: absolute; inset: auto 0 0 0; z-index: -1; line-height: 0; opacity: 0.85; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 45%, #000 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 45%, #000 100%); } .frhome-hero__arc svg { width: 100%; height: auto; display: block } .frhome-arc { fill: none; stroke: rgba(120, 176, 232, 0.22); stroke-width: 1; vector-effect: non-scaling-stroke; } /* A connection that reaches most of the way across the run is the site's entire argument — those get drawn brighter. */ .frhome-arc.is-far { stroke: rgba(150, 205, 255, 0.42) } .frhome-arc-baseline { stroke: rgba(160, 190, 220, 0.28); stroke-width: 1; vector-effect: non-scaling-stroke } .frhome-arc-tick { stroke: rgba(190, 215, 240, 0.5); stroke-width: 1; vector-effect: non-scaling-stroke } .frhome-arc-node { opacity: 0.9 } /* Bottom padding has to clear the arc's node line, which sits just above the hero's bottom edge (baseline 244 of the 260-unit viewBox). */ .frhome-hero__body { position: relative; padding-bottom: 4.25rem } .frhome-kicker { font-family: var(--fh-display); font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3em; color: var(--fh-accent-lit); margin: 0 0 0.9rem; } .frhome-kicker a { color: inherit } .frhome-kicker a:hover { color: #fff } .frhome-title { font-family: "Montserrat", var(--fh-display); font-weight: 700; font-size: clamp(2.4rem, 5.6vw, 4.25rem); line-height: 1.03; letter-spacing: 0.03em; text-transform: uppercase; margin: 0 0 1.1rem; } /* fringeshadownav is a light-on-light letterpress; it needs an explicit fill to survive on a dark ground (same fix as the navbar brand and the footer wordmark). */ .frhome .fringeshadownav { color: #ece8df; -webkit-text-fill-color: #ece8df } .frhome-lead { max-width: 46rem; font-size: clamp(1.02rem, 1.35vw, 1.2rem); line-height: 1.6; color: rgba(232, 237, 243, 0.78); margin: 0 0 2.2rem; } .frhome-lead--sm { font-size: 1rem; margin-top: -1.2rem } .frhome-lead a { color: var(--fh-accent-lit); border-bottom: 1px solid rgba(77, 157, 224, 0.4) } .frhome-lead a:hover { color: #fff; border-bottom-color: #fff } /* --- the two doors ------------------------------------------------------- The one decision a visitor actually has to make on arrival: are you about to be spoiled or not. Everything else on the page is browsing. */ .frhome-doors { display: grid; /* Capped at 360 (was 380) so THREE doors fit the ~1130px container at 1280px (3 x 360 + 2 x 16 gap = 1112). auto-fit collapses the empty track when the middle door is JS-gated off, so the no-JS two-door fallback stays clean. */ grid-template-columns: repeat(auto-fit, minmax(270px, 360px)); gap: 1rem; margin-bottom: 2rem; } /* The doors stay translucent so the arc diagram runs behind them, but the wash is DARK, not light: the arcs are pale strokes on a dark ground and the label text is white, so lightening the panel (the obvious "more opaque") closes the contrast gap instead of opening it. A dark scrim dims the arcs and pushes white text further away from them at the same time. The blur is doing as much work as the alpha — it softens the 1px stroke edges exactly where they cut through letterforms, while the arcs still read as arcs. */ .frhome-doors { /* ONE DIAL for how much the doors dim the arcs behind them. Raise it if the labels still fight the diagram, lower it to let more of the arcs through. At 0.44 the worst-case text contrast (the note line, under a bright cross-season arc) is 4.97:1 — just over AA — and the arcs keep about 40% of the contrast they have in the open. Below ~0.40 the note line drops under AA. */ --fh-door-scrim: 0.44; } .frhome-door { display: block; padding: 1.15rem 1.35rem 1.25rem; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 4px; background: rgba(9, 13, 18, var(--fh-door-scrim)); -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease; } .frhome-door:hover { border-color: rgba(var(--frnav-accent, 115, 159, 199), 0.85); background: rgba(16, 26, 40, calc(var(--fh-door-scrim) + 0.06)); transform: translateY(-2px); } .frhome-door--primary { border-color: rgba(77, 157, 224, 0.55); /* Same scrim depth, tinted toward the accent so it still reads as the primary. */ background: rgba(14, 34, 58, calc(var(--fh-door-scrim) + 0.04)); } .frhome-door--primary:hover { background: rgba(18, 44, 74, calc(var(--fh-door-scrim) + 0.1)) } /* Without backdrop-filter the strokes stay crisp under the panel, so the scrim has to carry the whole job on its own. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .frhome-doors { --fh-door-scrim: 0.58 } } .frhome-door__eyebrow { display: block; font-family: var(--fh-display); font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.22em; /* Lighter than --fh-accent-lit (#4d9de0), which is a mid blue sitting on a dark panel that a pale-blue arc can pass straight through — at 0.68rem that fell under AA. Same hue, enough lift to clear it in the worst case. */ color: #a3cbf0; margin-bottom: 0.4rem; } .frhome-door__label { display: block; font-family: "Montserrat", var(--fh-display); font-weight: 700; font-size: 1.16rem; color: #fff; margin-bottom: 0.35rem; } .frhome-door__label i { font-size: 0.85em; margin-left: 0.3rem; transition: transform 0.16s ease } .frhome-door:hover .frhome-door__label i { transform: translateX(3px) } /* The middle door is a