/* ============================================================ * * DIVERGENT KIND – tweaks.css * Shared, cross-page in-design controls applied via classes / * data-attrs on by chrome.js (persisted to localStorage): * - data-hero="A|B|C" homepage hero direction * - .font-sora swap Anton display → Sora (tech-restraint) * - .hide-bandstates hide the qualitative band-state words on the Lens * - .no-ticker freeze the metabar ticker * Plus the floating Tweaks panel (vanilla, brand-styled). * ============================================================ */ /* ─── Hero direction switch ──────────────────────────── */ .hero-variant { display: none; } html[data-hero="A"] .hero-variant[data-hero="A"], html[data-hero="B"] .hero-variant[data-hero="B"], html[data-hero="C"] .hero-variant[data-hero="C"] { display: block; } html:not([data-hero]) .hero-variant[data-hero="A"] { display: block; } /* ─── Band-state visibility (Lens / Snapshot) ────────── */ html.hide-bandstates .band-state { display: none !important; } /* ─── Metabar ticker freeze ──────────────────────────── */ html.no-ticker .metabar-track { animation: none !important; transform: none !important; } /* ─── Display-font swap: Anton → Sora ────────────────── * * site.css hard-codes font-weight:400 on every display class * (correct for single-weight Anton). Sora needs real weight to * read as display, so bump it in one place when .font-sora is on. */ html.font-sora { --font-display: 'Sora', system-ui, sans-serif; } html.font-sora :is( h1, h2, h3, h4, .h, .hero-h, .dk-h1, .dk-h2, .dk-h3, .dk-h4, .dk-wordmark, .dk-numeral, .btn, .dk-btn, .brand b, .nav-links a.btn, .block-t, .block-n, .domain-t, .domains-cap, .lc-t, .pstep b, .tier-t, .pcard-t, .pcard-n, .principle b, .fstat .n, .citation .m, .art-t, .boundary p, .foot-manifesto, .matrix-cond h4, .gap-lead, .seg-card b, .voice .vq, .sub-h, .tax-fig, .prereq-stat, .snap-q, .snap-result .rt, .dim b, .chain-end b, .deliv b, .week b, .pathway .step, .founder-line .more, .onramp-l .more, .entry-l h3, .article-title, .article-body h2, .article-body .apq, .founder-name, .pull p, .reading a, .author-card b, .std-tier-t, .code-item b, .talk-row b, .thesis-h, .lensrow-t, .standard-h ) { font-weight: 700; letter-spacing: -0.004em; line-height: 1.02; } /* a touch heavier + tighter for the biggest editorial display sizes */ html.font-sora :is(.h-xl, .hero-h, .dk-h1, .founder-name, .article-title, .thesis-h) { font-weight: 800; line-height: 0.98; } /* Anton is condensed; Sora is wider – pull the giants down a touch so they don't overrun */ html.font-sora .h-xl { font-size: clamp(40px, 5.8vw, 80px); } html.font-sora .hero-h { font-size: clamp(38px, 4.4vw, 62px); } html.font-sora .founder-name { font-size: clamp(42px, 5.2vw, 74px); } /* ============================================================ * * THE TWEAKS PANEL (vanilla, injected by chrome.js) * ============================================================ */ .dk-tweaks { position: fixed; right: 20px; bottom: 20px; z-index: 9000; width: 290px; max-width: calc(100vw - 32px); background: var(--ink); color: var(--canvas); border: 2px solid var(--ink); box-shadow: 8px 8px 0 0 var(--ember); display: none; font-family: var(--font-body); } .dk-tweaks.open { display: block; } .foot-cols--3 { grid-template-columns: repeat(3, 1fr); gap: 24px; } @media (max-width: 680px) { .foot-cols--3 { grid-template-columns: 1fr; } } .dk-tweaks-bar { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 2px solid rgba(232,211,173,0.3); cursor: grab; user-select: none; } .dk-tweaks-bar.drag { cursor: grabbing; } .dk-tweaks-bar b { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ember); font-weight: 500; } .dk-tweaks-x { background: none; border: 0; color: rgba(232,211,173,0.7); cursor: pointer; font-size: 18px; line-height: 1; padding: 2px 4px; font-family: var(--font-mono); } .dk-tweaks-x:hover { color: var(--ember); } .dk-tweaks-body { padding: 16px 14px 18px; display: grid; gap: 18px; } .dk-tw-row { display: grid; gap: 8px; } .dk-tw-row > label { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(232,211,173,0.6); } .dk-seg { display: flex; border: 2px solid rgba(232,211,173,0.4); } .dk-seg button { flex: 1; background: transparent; border: 0; cursor: pointer; color: rgba(232,211,173,0.78); padding: 9px 6px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; border-right: 2px solid rgba(232,211,173,0.4); transition: background-color .12s, color .12s; } .dk-seg button:last-child { border-right: 0; } .dk-seg button:hover { color: var(--canvas); } .dk-seg button.on { background: var(--ember); color: var(--ink); } .dk-tw-note { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(232,211,173,0.4); margin-top: 2px; } @media (prefers-reduced-motion: reduce) { .dk-seg button { transition: none; } } /* ============================================================ * * MOBILE RESPONSIVE — additional refinements (v1, 5 Jun 2026) * Targets <480px viewports. Site already collapses grids and hides * inline nav at <1024px; these rules tighten typography, padding, * forms, button rows, and stat/dim cards for thumb-reach widths. * ============================================================ */ @media (max-width: 480px) { /* Display typography scales tighter on narrow screens */ .h-xl { font-size: clamp(36px, 9vw, 44px); line-height: 0.96; } .h-lg { font-size: clamp(28px, 7vw, 36px); line-height: 1.0; } .h-md { font-size: clamp(22px, 5.5vw, 28px); } .h-sm { font-size: clamp(18px, 4.5vw, 22px); } .lead { font-size: 16px; line-height: 1.6; } /* Article template: tighter padding, smaller display sizes */ .article { padding: 36px 18px 0; max-width: 100%; } .article-title { font-size: clamp(32px, 8.5vw, 44px); line-height: 0.98; } .article-deck { font-size: 16px; line-height: 1.55; } .article-body { font-size: 16px; line-height: 1.7; } .article-body h2 { font-size: 22px; margin-top: 26px; } .article-body .apq { font-size: 18px; padding: 18px 20px; line-height: 1.4; } .article-hero { padding: 28px 0; } .article-hero-inner svg { width: 88px; height: 88px; } /* Wrap + section padding tightens */ .wrap { padding: 0 18px; } .sec { padding: 60px 0; } .sec-sm { padding: 40px 0; } /* Button rows: stack full-width for thumb reach */ .btn-row { gap: 12px; flex-direction: column; align-items: stretch; } .btn-row .btn { width: 100%; text-align: center; justify-content: center; } .btn-row .hero-textlink { text-align: center; padding: 6px 0; } /* Form fields full-width, 16px to suppress iOS zoom */ .field input, .field textarea, .field select { width: 100%; font-size: 16px; box-sizing: border-box; } .brief { padding: 22px 18px; } .brief .btn-row { margin-top: 20px; } /* Dimensions grid stacks; chips render slightly smaller */ .dims { grid-template-columns: 1fr; gap: 12px; } .dim { padding: 18px 16px; } .dim b { font-size: 18px; } .chip { padding: 6px 10px; font-size: 10.5px; } .offer-chips { gap: 8px; margin-top: 24px; } /* Nav padding tighter */ .nav-in { padding: 12px 18px; gap: 12px; } .brand b { font-size: 15px; letter-spacing: 0.12em; } /* Process / tier cards padding */ .pcard, .tier { padding: 20px 18px; } .pcard-n, .tier-k { font-size: 36px; } .pcard-t, .tier-t { font-size: 18px; } /* Footer scales for narrow widths */ .foot { padding: 48px 0 32px; } .foot-manifesto { font-size: clamp(20px, 5.5vw, 26px); } .foot-watermark { font-size: 11px; line-height: 1.55; } .foot-meta { font-size: 11px; } } /* Stats / numbers grid collapses harder at sub-460px */ @media (max-width: 460px) { .stats, .numbers { grid-template-columns: 1fr; gap: 18px; } } /* Metabar ticker padding tighter on phones (still scrolls) */ @media (max-width: 480px) { .metabar { font-size: 9.5px; letter-spacing: 0.14em; } .metabar-track span { padding: 0 18px; } .metabar-track span::before { margin-right: 18px; } } /* Horizontal scroll guard — anything fixed-width-leaky on a phone */ @media (max-width: 480px) { html, body { overflow-x: hidden; } img, svg, video { max-width: 100%; height: auto; } } /* ============================================================ * * MOBILE RESPONSIVE — v2 fixes (5 Jun 2026) * From eyeball review on iPhone preview: * - Header CTA was overlapping the brand wordmark at ~390px * - Vantage chips and other chip rows ragged-left at flex-start * - YOUR KEY persistent pill (.dk-vt-mod) needed more room * ============================================================ */ /* Hide brand wordmark below 420px — keep the sigil; gives the CTA * room without truncating its label. The brand link itself stays * clickable through the sigil. */ @media (max-width: 420px) { .brand b { display: none; } .nav-in { gap: 8px; padding: 10px 14px; } .nav-links .btn--sm { padding: 9px 12px; font-size: 12px; letter-spacing: 0.1em; } } /* Centered + locked module alignment on mobile: * btn-row, chip groups, vantage chips, offer-chips all centre on * <=480px so single-row remainders sit visually anchored, not * ragged-left. The btn-row column-stack from v1 stays. */ @media (max-width: 480px) { .btn-row { justify-content: center; } .chips { justify-content: center; } .offer-chips { justify-content: center; } .vt-chips { justify-content: center; } .ledger-head { justify-content: center; } .cta-block { text-align: center; } } /* Vantage chips: slightly tighter at narrow widths so two-per-row * holds longer before wrapping awkwardly */ @media (max-width: 480px) { .vt-chip { padding: 10px 12px; font-size: 10.5px; letter-spacing: 0.07em; } .vt-chips { gap: 8px; margin: 20px 0 8px; } } /* YOUR KEY persistent pill (.dk-vt-mod) — smaller and tighter on * very narrow widths so it doesn't sit over body copy. */ @media (max-width: 480px) { .dk-vt-mod { right: 8px !important; bottom: 8px !important; } .dk-vt-mod .vtm-key { padding: 6px 9px !important; font-size: 9.5px !important; letter-spacing: 0.06em !important; } } /* Article hero on mobile — center text content for consistency */ @media (max-width: 480px) { .article-head { text-align: center; } .article-deck { margin-left: auto; margin-right: auto; } .article-byline { justify-content: center; flex-wrap: wrap; gap: 12px; } .article-attr { text-align: center; } } /* Cta-block, hero variants and other big-feature blocks — visually * anchor by centering inline blocks on mobile */ @media (max-width: 480px) { .offer-hero, .hero, .hero-variant { text-align: left; } /* keep hero left-aligned for reading rhythm */ .offer-hero .h-xl, .offer-hero .lead { max-width: 100%; } } /* ============================================================ * * MOBILE RESPONSIVE — v4 fixes (5 Jun 2026) * Reverts v3 shadow reductions — brutalist 12px shadows are kept. * What changes instead: * 1. Nav bar stacks brand + CTA vertically, centred, so the * header reads as one centred unit instead of opposite-edge * anchored. * 2. .heroC-r padding reduced on mobile so the hero-geo aside * fills the wrap to the same width as modules below — square * shape, full brutalist character, visually consistent. * 3. Hero geometry aside no longer constrained by max-width — * reverts to original full-width-within-wrap behaviour. * 4. Section-level overflow safety stays so shadows clip rather * than scroll. * ============================================================ */ @media (max-width: 480px) { /* Stack nav vertically, centred — brand on top, CTA below */ .nav-in { flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 12px 22px; } .brand { justify-content: center; } /* heroC-r container: reduce inner padding so the geometry aside * fills the wrap content area at full width like the band-ink * modules below it. The 12px box-shadow stays. */ .heroC-r { padding: 20px 18px !important; } /* heroC-l: matching padding so left + right columns balance */ .heroC-l { padding: 0 !important; } /* Section-band right-edge: ensure band-ink sections don't carry * their own extension past the viewport */ .band-ink, .sec { overflow: hidden; } } /* ============================================================ * * MOBILE RESPONSIVE — v6 (5 Jun 2026) * Replaces v5's per-module max-width constraints with a single * change at the wrap level: asymmetric padding (12 left / 24 * right) shifts the wrap content area slightly left, leaving 12px * on the right of the wrap content edge for the brutalist offset * shadow. Result: every module (and its 12px shadow) sits within * symmetric 12px viewport buffers — visually centred without * resizing any module. * ============================================================ */ @media (max-width: 480px) { .wrap { padding-left: 12px !important; padding-right: 24px !important; } /* Stretched CTAs in column-stack btn-rows: keep centred + capped * so the 6px button shadow fits within the wrap content area */ .btn-row { align-items: center !important; } .btn-row .btn { width: 100% !important; max-width: 460px; margin-left: auto !important; margin-right: auto !important; } .btn-row .hero-textlink { width: 100% !important; max-width: 460px; margin-left: auto !important; margin-right: auto !important; text-align: center; } }