/* ============================================================ WeatherWindow.AI — Articles · "Ocean-Instrument Editorial" re-skin Loaded LAST (after foundation → splash → articles). Re-maps the foundation design tokens to the bronze/deep-ocean palette and swaps the display face to Fraunces so the /articles surface reads native to the redesigned homepage. Structure/HTML untouched. ============================================================ */ /* Prelaunch / launch CTA gating. Mirrors css/site.css on the homepage: article pages load this file (not site.css), so the visibility rules must live here too. The inline `window.PRELAUNCH` flag in each article sets html.prelaunch before first paint, so during the bridge the launch-mode CTAs ("Start free" / "Sign in") are hidden and the prelaunch "Get early access" → /#waitlist CTA shows instead — matching the homepage nav + footer. */ html:not(.prelaunch) .prelaunch-only { display: none !important; } html.prelaunch .launch-only { display: none !important; } /* Display face (matches the homepage tokens.css). */ @font-face { font-family: 'Fraunces'; src: url('fonts/Fraunces-Variable.woff2') format('woff2-variations'), url('fonts/Fraunces-Variable.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Oswald'; src: url('fonts/Oswald-Variable.woff2') format('woff2-variations'), url('fonts/Oswald-Variable.woff2') format('woff2'); font-weight: 200 700; font-style: normal; font-display: swap; } /* ---- Token remap: old cyan-on-navy → bronze-on-deep-ocean ---- */ :root { --bg: #06121f; --bg-2: #0a1e33; --surface: #0c2138; --surface-2: #103055; --border: rgba(206,222,240,.16); --border-dim: rgba(206,222,240,.09); --border-mid: rgba(206,222,240,.24); --accent: #d99f52; --accent-2: #eec079; --accent-wash: rgba(217,159,82,.12); --accent-bg: rgba(217,159,82,.08); /* Idle card/table borders stay neutral; brass is reserved for hover + accents. */ --accent-border: rgba(206,222,240,.16); --success: #3ec08c; --success-bg: rgba(62,192,140,.13); --success-border: rgba(62,192,140,.42); --warning: #f0b53f; --warning-bg: rgba(240,181,63,.13); --warning-border: rgba(240,181,63,.42); --danger: #e35560; --danger-bg: rgba(227,85,96,.13); --danger-border: rgba(227,85,96,.44); --text: #f0f5f8; --text-dim: #bfd0dd; --text-dark: #61798c; --text-on-accent:#1a1206; --brand-gold: #eec079; --shadow: 0 14px 44px -16px rgba(0,4,14,.7); --shadow-lg: 0 34px 90px -28px rgba(0,4,16,.82); /* Bronze ambient wash for the page background glow. */ --ambient-glow-accent: rgba(217,159,82,.10); --ambient-glow-success: rgba(217,159,82,.04); --serif-display: 'Oswald', 'Arial Narrow', Arial, sans-serif; } /* ---- Editorial display type on the article headings ---- */ .guide-hero h1, .guide-main h1 { font-family: var(--serif-display); font-weight: 400; letter-spacing: -.02em; line-height: 1.05; } .guide-main h2, .guide-section h2 { font-family: var(--serif-display); font-weight: 400; letter-spacing: -.012em; } .guide-card h3, .guide-card h3 a { font-family: var(--serif-display); font-weight: 500; } /* The two-way contrast columns are the only in-article headings left after the card tiles were retired (2026-08-04) — keep them on the display face so they match the hub cards. The .guide-point-label / .guide-calls dt lead-ins stay sans: they sit inline within body text, not above it, and Oswald at label size reads as a heading and re-fragments the list. */ .guide-contrast h3 { font-family: var(--serif-display); font-weight: 500; } /* NOTE: `.guide-eyebrow { display: none }` lived here from 2026-07-06 until 2026-08-04, hiding eyebrows that were still in the markup. The markup and the base rule are both gone now, so there is nothing left to hide. */ /* ---- Primary button: gradient brass to match the homepage CTA ---- */ .dir-a .btn-primary, .guide-main .btn-primary { background: linear-gradient(180deg, var(--accent-2), var(--accent)); color: var(--text-on-accent); border-color: var(--accent); } .dir-a .btn-primary:hover, .guide-main .btn-primary:hover { background: linear-gradient(180deg, #f4cf94, var(--accent-2)); } /* ---- Header: the homepage site-nav, ported onto the article shell ---- Bleeds the frosted bar all the way to the viewport edges (not just the shell's --s-8 pad) so the sticky bg never shows a seam against the shell's 1280px max-width on wider viewports, centers content to the same 1200px column, and mirrors the homepage's brass underline links + text "Sign in" + gradient "Start free". */ .site-nav { position: sticky; top: 0; z-index: 60; width: 100vw; margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); border-bottom: 1px solid transparent; transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease; } .site-nav.is-stuck { /* Fully opaque so a hero photo scrolling under the sticky bar is clipped cleanly instead of bleeding through the frosted glass (2026-08-17). */ background: rgb(6,18,31); backdrop-filter: blur(14px) saturate(1.2); border-bottom-color: var(--border-dim); } .site-nav .nav-inner { width: min(100% - 3rem, 1200px); margin-inline: auto; display: flex; align-items: center; gap: 1.5rem; padding-block: 1.05rem; } .site-nav .brand img { height: 80px; width: auto; } .site-nav .btn-primary { padding: .82rem 1.5rem; font-size: .95rem; line-height: 1; min-height: 0; } .site-nav .nav-links { display: flex; gap: 1.9rem; margin: 0 auto; list-style: none; padding: 0; } .site-nav .nav-links a { font-size: .9rem; color: var(--text-dim); font-weight: 500; letter-spacing: .01em; position: relative; padding-block: .3rem; transition: color .2s; text-decoration: none; } .site-nav .nav-links a::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 1px; background: var(--accent); transition: right .25s ease; } .site-nav .nav-links a:hover { color: var(--text); } .site-nav .nav-links a:hover::after { right: 0; } .site-nav .nav-cta { display: flex; align-items: center; gap: .8rem; } .site-nav .nav-signin { font-size: .9rem; font-weight: 600; color: var(--text); padding: .5rem .3rem; text-decoration: none; } .site-nav .nav-signin:hover { color: var(--accent-2); } /* flex-shrink:0 on both — the brand and the toggle are the two flex children that must never be squeezed (a squeezed brand distorts the lockup; a squeezed toggle collapses its svg to 0 and the button renders empty). Same contract as the homepage nav in site.css. */ .site-nav .brand { flex-shrink: 0; } .site-nav .nav-toggle { display: none; flex-shrink: 0; background: none; border: 1px solid var(--border); border-radius: var(--radius); padding: .5rem; cursor: pointer; } .site-nav .nav-toggle svg { width: 20px; height: 20px; stroke: var(--text); flex-shrink: 0; } /* Mobile nav row budget (measured 2026-07-30, /device-optimization sweep). A 48px-tall lockup is 217px wide; with the CTA and toggle beside it the row measured 431px against a 327px container at 375px, putting the hamburger entirely off-screen at EVERY viewport <= 455px — and since .nav-links are display:none here, that left no route to navigation at all on a phone. Resolved by hiding the inline CTA below (so the hamburger carries navigation on mobile), which leaves the 48px lockup ample headroom. */ @media (max-width: 900px) { .site-nav .brand img { height: 48px; } .site-nav .nav-links, .site-nav .nav-signin { display: none; } .site-nav .nav-toggle { display: inline-flex; } /* The article nav lacks the homepage's launch-only/prelaunch-only CTA gating, so an always-on "Start free" button rode alongside the wide wordmark logo + hamburger and pushed the nav row past a ~375px viewport (horizontal page scroll). The hamburger carries navigation on mobile — drop the inline CTA. */ .site-nav .nav-cta .btn-primary { display: none; } /* Desktop right-aligns the CTA via .nav-links { margin: 0 auto }, which is display:none here — without its own auto margin the (now CTA-less) .nav-cta packs left against the brand and the hamburger sits mid-row. */ .site-nav .nav-cta { margin-left: auto; } .site-nav.nav-open .nav-links { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; background: var(--bg-2); border-bottom: 1px solid var(--border-dim); padding: .5rem 1.25rem 1rem; } .site-nav.nav-open .nav-links a { padding: .85rem 0; border-bottom: 1px solid var(--border-dim); } } @media (max-width: 560px) { /* Shrink the wordmark on the narrowest phones (aspect-preserving, matching the homepage's smaller mobile logo) so it keeps headroom beside the hamburger. */ .site-nav .brand img { height: 40px; } } /* Footer logo sized to match the homepage (desktop). */ .dir-a-footer .col .dir-a-brand img { height: 68px; } /* Fourth footer column ("Get started") added to match the homepage's .site-footer — was a 3-col grid (brand, Product, Company). Scoped to >760px: unscoped, this same-specificity rule loaded AFTER styles-splash.css's mobile collapse (§6.18 `@media (max-width:760px) .dir-a-footer { grid-template-columns: 1fr }`) and defeated it, forcing 4 cramped tracks at ~375px whose column content overflowed the cells and pushed the page into horizontal scroll. */ @media (min-width: 761px) { .dir-a-footer { grid-template-columns: 2fr 1fr 1fr 1fr; } } @media (max-width: 760px) { /* Reassert the single-column collapse past the 4-col rule + bound the wordmark so neither the grid nor the logo can extend past a phone viewport. */ .dir-a-footer { grid-template-columns: 1fr; } .dir-a-footer .col .dir-a-brand img { height: auto; max-width: 100%; } } /* DESIGN_SYSTEM.md §3.1.10 — nothing interactive renders below 44px in a touch context. The hamburger measured 38x38 (.5rem padding + 20px svg + 1px border). Grown via min-height/min-width so the icon stays 20px. */ @media (pointer: coarse) { .site-nav .nav-toggle { min-height: 44px; min-width: 44px; align-items: center; justify-content: center; } } /* Two columns at tablet portrait: the 4-column track set above still overran the shell by 3px at 768px and clipped the last column's heading. */ @media (min-width: 761px) and (max-width: 900px) { .dir-a-footer { grid-template-columns: 1fr 1fr; } } /* ---- FAQ: mirror the homepage accordion, collapsed by default ---- Articles ship folded (always-open) .guide-faq-item divs; those are converted to

and styled here to match the index .faq exactly (panel card, bold paper question, brass "+" marker that rotates to × on open, dim answer body). Higher-specificity than the legacy .guide-faq rules. */ .guide-faq { margin-top: var(--s-8); display: grid; gap: .8rem; } .guide-faq .faq { margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); overflow: hidden; transition: border-color .2s; } .guide-faq .faq:hover { border-color: rgba(217,159,82,.30); } .guide-faq .faq[open] { border-color: rgba(217,159,82,.30); } .guide-faq .faq summary:hover { color: var(--accent-2); } .guide-faq .faq summary { list-style: none; cursor: pointer; margin: 0; padding: 1.15rem 1.4rem; display: flex; justify-content: space-between; gap: 1rem; font-family: var(--font-sans); font-weight: 600; color: var(--text); font-size: 1rem; line-height: 1.4; transition: color .2s ease; } .guide-faq .faq[open] summary { margin-bottom: 0; } .guide-faq .faq summary::-webkit-details-marker { display: none; } .guide-faq .faq summary::after { content: "+"; font-family: var(--font-mono); color: var(--accent); font-size: 1.3rem; line-height: 1; transition: transform .2s; flex: none; } .guide-faq .faq[open] summary::after { transform: rotate(45deg); } .guide-faq .faq p { margin: 0; padding: 0 1.4rem 1.3rem; color: #89a1b5; font-size: .94rem; line-height: 1.65; } /* ---- Background: migrate the homepage page-atmos + grain system ---- Repurpose the article surface's two existing background layers so the deep-ocean gradient + warm horizon glow + film grain match the index page exactly. Fixed + negative z so they sit behind all content, like the home. The .dir-a wrapper MUST be transparent — an opaque background on it paints over the negative-z fixed layers; the ink base comes from body (the canvas). */ body { background: var(--bg); } .dir-a { background: transparent; } .dir-a-bg { position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: 1; background: radial-gradient(120% 90% at 50% -10%, #0c2340 0%, rgba(12,35,64,0) 55%), radial-gradient(90% 60% at 85% 8%, rgba(217,159,82,.10) 0%, rgba(217,159,82,0) 60%), linear-gradient(180deg, #06121f 0%, #040e1a 100%); } .dir-a-grid { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E"); background-size: 140px 140px; mask-image: none; -webkit-mask-image: none; }