/* ============================================================================ Level Up Hobbies :: Roll For Adventure tokens.css -- Phase 3. Build this BEFORE any layout CSS. Nothing else. Sources: roll-for-adventure/clone/assets/css/styles.css (:root) live leveluphobbies.com styles.css (:root, via 04-brand/AESTHETIC.md) Six values are byte-identical across both systems. That is why this migration is cheap: color survives the pivot, typography and devices do not. ============================================================================ */ :root{ /* --- NAVY ---------------------------------------------------------------- Identical in both systems. RFA name on the left, live name in the comment. */ --navy-950:#03081c; /* live --ink-3 IDENTICAL. page base */ --navy-900:#061336; /* live --ink-2 IDENTICAL. hero base, community */ --navy-850:#0a1f4d; /* live --ink IDENTICAL. nav bar, cards, borders */ --navy-hover:#123061; /* RFA only. dropdown hover */ /* --- GOLD ---------------------------------------------------------------- Identical in both systems. Gold is CTA and ornament. Never an accent. */ --gold:#ffc93c; /* live --yellow IDENTICAL. primary */ --gold-bright:#ffd86b; /* live --yellow-3 IDENTICAL. hover / lift */ --gold-soft:#ffb800; /* live --yellow-2 IDENTICAL. hex gradient top */ --bronze:#b8901f; /* RFA only. hairline borders, hex gradient bottom */ --bronze-dim:#7f6417; /* RFA only. sold-out, dimmed states */ /* --- PAPER --------------------------------------------------------------- NOT identical. RFA papers are cooler and darker than live's. RFA wins: the brief's own words. Do not import live's warmer papers. */ --cream:#e7d9c5; /* body text on dark */ --cream-2:#f3ece0; /* near-white headings on dark */ --paper:#ebe0cb; /* the cream section ground */ /* --- EMBER (NEW) --------------------------------------------------------- RFA has NO red. Its only reds are form-error states. But 49 headlines are "plain text + accent" and live paints in --red #E53935. Mapping to gold collapses the accent into the CTA color and kills the two-colour headline system that carries the whole voice. Not foreign: RFA's own D&D hex fills with rgba(190,60,45,.7). The ember is the torch that tile is lit by. DISCIPLINE: ember is ONLY ever and the low-seat warning. Never a button. Never a rule. Never a border. That is what makes it work. */ --ember:#C0392B; /* on cream ground */ --ember-lift:#E8563F; /* on navy ground, holds large-text contrast */ --page-accent:var(--ember); /* page_character.accent_color may override */ /* --- COMMERCE STATES (NEW) ----------------------------------------------- Scarcity is the mechanic that converts a $10 seat into a $150/mo membership. Sold out is DIMMED, not shouted. Restraint. */ --seat-open:var(--gold); /* "4 seats left" */ --seat-low:var(--ember-lift); /* 2 or fewer */ --seat-out:var(--bronze-dim); /* sold out */ /* --- FORM STATES --------------------------------------------------------- Carried from RFA verbatim. These are the ONLY other reds in the system. */ --err:#d9534f; --err-text:#e88b87; --ok-text:#67c98a; /* --- TYPE ---------------------------------------------------------------- Three faces, three jobs. Ship THREE files, not seven: RFA's four Mulish woff2 are byte-identical (md5 50220d00...) and its two Cinzel are too (md5 e7ed1ab7...). They are variable fonts re-declared per weight. About 116KB of pure duplicate, all eager-loaded. Fix while porting. */ --ff-display:'Cinzel', Georgia, 'Times New Roman', serif; --ff-body:'Mulish', 'Segoe UI', system-ui, sans-serif; --ff-script:'Dancing Script', 'Segoe Script', cursive; /* ONE use, site-wide */ /* Display scale. Bowlby One's job (ultra-heavy poster) has no Cinzel equivalent, so scale does the work instead. luh-hero already carries h1_row1_big:false / h1_row2_big:true / h1_row3_big:false / h1_row4_big:true. The alternation is ALREADY IN THE DATA. Map _big straight onto these. */ --fs-display-big:clamp(42px, 5.1vw, 74px); /* _big: true */ --fs-display-sm:clamp(24px, 3.05vw, 44px); /* _big: false */ --fs-h2:clamp(28px, 3vw, 42px); --fs-h3:clamp(15px, 1.15vw, 18px); --lh-display:1.02; /* --- LAYOUT -------------------------------------------------------------- 1600 keeps content in 90%+ of a 1440 viewport (1360/1440 = 94%). wrap-prose is a MEASURE constraint for legal/FAQ body, not a layout collapse. Both are correct at the same time. */ --maxw:1600px; --wrap-prose:720px; --pad:40px; /* --- VERTICAL RHYTHM: THREE TIERS ONLY ----------------------------------- The RFA build shipped five (hero 94/158, choose 130/44, community 92, events 60/40, quest 34) and the quest section reads visibly squeezed. Do not add a fourth. */ --pad-hero:clamp(96px, 10vw, 150px); /* home hero only */ --pad-chapter:clamp(72px, 8vw, 112px); /* major sections */ --pad-inner:clamp(48px, 5.5vw, 80px); /* page headers, minor strips */ /* --- SHAPE + MOTION ------------------------------------------------------ */ --radius:4px; --radius-card:6px; --radius-panel:8px; --hair:1px; /* borders are gold or bronze, never grey */ --ease:cubic-bezier(.4,.2,.2,1); /* --- THE RIP ------------------------------------------------------------- RFA's signature transition. The tile is an alpha mask applied to the CREAM section itself, which is pulled up under the hero, so the visible teeth ARE the real section background. Seamless by construction, no colour match. BUDGET: maximum 3 per page. Fires ONLY on navy -> cream, downward. It is the "opening the book" gesture. Legal pages get zero. */ --rip-tile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 84' preserveAspectRatio='none'%3E%3Cpath d='M0,84L0,38L40,51L71,49L103,70L120,63L136,50L168,66L185,42L200,44L238,39L267,41L289,32L323,42L346,40L372,56L413,70L452,29L469,43L492,32L533,46L554,60L574,46L594,49L627,34L647,16L671,38L696,30L714,29L736,22L759,30L780,19L808,29L838,30L857,32L879,19L920,9L951,21L967,32L1001,27L1032,37L1066,43L1097,62L1119,64L1135,52L1151,49L1182,46L1200,38L1200,84Z' fill='%23000'/%3E%3C/svg%3E"); --rip-w:1200px; /* fixed px so the teeth never condense */ --rip-h:84px; } /* Wide-gamut restatement. Same normalized components, for P3 displays (Safari). */ @supports (color:color(display-p3 1 1 1)){ @media (color-gamut:p3){ :root{ --gold:color(display-p3 1 0.788 0.235); --gold-bright:color(display-p3 1 0.847 0.42); --gold-soft:color(display-p3 1 0.722 0); --bronze:color(display-p3 0.722 0.565 0.122); --ember:color(display-p3 0.71 0.208 0.153); --ember-lift:color(display-p3 0.882 0.322 0.235); } } } @media (max-width:620px){ :root{ --pad:18px; --rip-w:780px; --rip-h:54px; } } /* ============================================================================ DELETED from RFA on purpose. Do not re-add. --navy-920:#061336 duplicate of --navy-900 --navy-800:#0e2856 declared twice, used zero times --navy-card:#0a1f4d duplicate of --navy-850 --paper-2:#e2d4bd used zero times --ink:#123061 collides with live's --ink meaning (navy #0A1F4D). Renamed --navy-hover to kill the ambiguity. --ink-soft:#2b3d68 used zero times NOT carried from live. Do not re-add. --red:#E53935 superseded by --ember (tuned for RFA's grounds) --cream:#F2EBD8 live's papers are warmer. RFA's win. --paper:#FFF8E5 --line:#0A1F4D == --navy-850. Borders are gold/bronze here, not ink. --ff-chunk (Bowlby One), --ff-dis (Bricolage), --ff (DM Sans), --ff-mono (JetBrains Mono) -- the whole live type system is replaced. ============================================================================ */