/* ============================================================================ DraftRoom Design System · v1 (D4 "Synthesis") Single source of truth for the redesign. Light-first with a full dark theme. Drop this in, add class="dark" to for dark mode (see SPEC in README). Font: Geist + Geist Mono (load from Google Fonts — see README). ============================================================================ */ /* ---------------------------------------------------------------------------- 1. TOKENS ---------------------------------------------------------------------------- */ :root{ /* ink / text */ --ink:#15130E; /* primary text */ --ink2:#48453c; /* secondary text / lede */ --muted:#8a877e; /* tertiary / captions / mono */ /* surfaces */ --bg:#ffffff; /* page background */ --soft:#F7F5F0; /* subtle fill (hover rows) */ --card:#FBFAF6; /* raised card background */ /* lines */ --line:#EBE7DE; /* hairline dividers */ --line2:#ddd9cf; /* stronger borders / inputs */ /* brand accent — amber, used ONLY on actions & punctuation */ --accent:#EF9F08; --accentink:#241700;/* text on amber */ /* semantic (right/wrong reveals) */ --green:#1F8A4C; --greenbg:#EAF6EE; --red:#C4452F; --redbg:#FBEDEA; /* type */ --mono:'Geist Mono',ui-monospace,SFMono-Regular,Menlo,monospace; --sans:'Geist',-apple-system,system-ui,sans-serif; /* layout */ --maxw:1140px; /* radii */ --r-sm:9px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-pill:100px; /* shadow (card lift) */ --shadow-card:0 1px 2px rgba(20,16,8,.04), 0 26px 60px -34px rgba(20,16,8,.28); } html.dark{ --ink:#F4F2EA; --ink2:#c8c4bb; --muted:#928f86; --bg:#0D0C08; --soft:#141209; --card:#15140E; --line:#23211A; --line2:#2e2c22; --accent:#F6AE1E; /* slightly brighter amber on dark */ --green:#5FD18A; --greenbg:#11251A; --red:#F08A74; --redbg:#2A1410; --shadow-card:0 30px 70px -36px rgba(0,0,0,.9); } /* ---------------------------------------------------------------------------- 2. BASE ---------------------------------------------------------------------------- */ *{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{ background:var(--bg); color:var(--ink); line-height:1.5; font-family:var(--sans); -webkit-font-smoothing:antialiased; overflow-x:hidden; } a{color:inherit;text-decoration:none} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,5vw,44px)} /* type helpers */ .mono{font-family:var(--mono)} .kick{font-size:12px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--accent)} .idx{font-family:var(--mono);font-size:12px;color:var(--muted);letter-spacing:.05em} .dot{color:var(--accent)} /* the amber period after wordmark */ /* ---------------------------------------------------------------------------- 3. NAV (shared across every page) ---------------------------------------------------------------------------- */ .nav{ position:sticky;top:0;z-index:40; background:color-mix(in srgb,var(--bg) 86%,transparent); backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--line); } .nav-in{display:flex;align-items:center;justify-content:space-between;height:64px} @media(min-width:720px){.nav-in{height:78px}} .brand{font-size:20px;font-weight:700;letter-spacing:-.03em} .brand i{color:var(--accent);font-style:normal} .nav-right{display:flex;align-items:center;gap:clamp(14px,2.4vw,30px)} .links{display:none;align-items:center;gap:30px} .links a{color:var(--muted);font-size:14.5px;font-weight:450} .links a:hover{color:var(--ink)} @media(min-width:860px){.links{display:flex}} /* text links: desktop only */ .navcta{background:var(--accent);color:var(--accentink);font-size:13.5px;font-weight:600; padding:10px 16px;border-radius:var(--r-sm);white-space:nowrap} .navcta:hover{filter:brightness(1.05)} .toggle{width:38px;height:38px;flex:0 0 auto;border:1px solid var(--line2);border-radius:var(--r-sm); background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink)} .toggle:hover{border-color:var(--ink)} .toggle .moon{display:block} .toggle .sun{display:none} html.dark .toggle .moon{display:none} html.dark .toggle .sun{display:block} /* ---------------------------------------------------------------------------- 4. BUTTONS ---------------------------------------------------------------------------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px; background:var(--accent);color:var(--accentink);font-size:16.5px;font-weight:600; padding:16px 30px;border-radius:var(--r-md);cursor:pointer;border:none; font-family:inherit;transition:transform .12s,filter .12s} .btn:hover{transform:translateY(-2px);filter:brightness(1.04)} .btn--ghost{background:transparent;color:var(--ink);border:1px solid var(--line2)} .btn--ghost:hover{border-color:var(--ink);filter:none;transform:none} .btn--block{width:100%;max-width:340px} @media(min-width:520px){.btn--block{width:auto}} /* ---------------------------------------------------------------------------- 5. SECTION HEADERS ---------------------------------------------------------------------------- */ .sec{padding-top:clamp(40px,7vw,66px)} .sechead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px; border-top:1px solid var(--line);padding-top:clamp(28px,5vw,48px);margin-bottom:clamp(22px,3.5vw,30px)} .sec h2{font-size:clamp(28px,5.5vw,38px);font-weight:700;letter-spacing:-.035em;margin-top:8px} .sec .sub{font-size:15px;color:var(--muted);margin-top:8px;max-width:520px} .seelink{font-family:var(--mono);font-size:12.5px;font-weight:500;color:var(--ink);white-space:nowrap;padding-bottom:4px} .seelink .ar{color:var(--accent)} .seelink:hover{color:var(--accent)} /* ---------------------------------------------------------------------------- 6. CARDS (games / generic raised tiles) ---------------------------------------------------------------------------- */ .grid{display:grid;grid-template-columns:1fr;gap:12px} @media(min-width:560px){.grid{grid-template-columns:repeat(2,1fr);gap:14px}} @media(min-width:880px){.grid{grid-template-columns:repeat(3,1fr)}} .gc{background:var(--card);border:1px solid var(--line2);border-radius:var(--r-lg); padding:22px 20px 18px;display:flex;flex-direction:column;min-height:178px;cursor:pointer; transition:border-color .15s,transform .12s} @media(hover:hover){.gc:hover{border-color:var(--accent);transform:translateY(-2px)}} .gc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px} .gc-top .e{font-size:24px} .gpill{font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.08em;color:var(--ink2); border:1px solid var(--line2);border-radius:var(--r-pill);padding:3px 9px} .gc h4{font-size:18.5px;font-weight:600;letter-spacing:-.015em;margin-bottom:8px} .gc p{font-size:13.5px;color:var(--muted);line-height:1.5;flex:1} .gc .go{font-family:var(--mono);font-size:12px;font-weight:500;margin-top:16px;color:var(--ink)} .gc .go .ar{color:var(--accent)} .gc.soon{opacity:.6;cursor:default} @media(hover:hover){.gc.soon:hover{border-color:var(--line2);transform:none}} /* ---------------------------------------------------------------------------- 7. LIST TABLE (ranked rows) ---------------------------------------------------------------------------- */ .table{background:var(--bg);border:1px solid var(--line2);border-radius:var(--r-lg);overflow:hidden} .tr{display:flex;align-items:center;gap:clamp(12px,2.5vw,18px);padding:16px clamp(16px,3vw,22px); border-bottom:1px solid var(--line);cursor:pointer;transition:background .15s} .tr:last-child{border-bottom:none} @media(hover:hover){.tr:hover{background:var(--soft)}} .tr .rk{font-family:var(--mono);font-size:14px;color:var(--accent);width:26px;flex:0 0 auto} .tr .lt{font-size:clamp(14.5px,3vw,15.5px);font-weight:500;letter-spacing:-.01em} .tr .ls{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:3px;letter-spacing:.03em} .tr .act{margin-left:auto;font-family:var(--mono);font-size:11.5px;font-weight:500;color:var(--muted);white-space:nowrap} @media(hover:hover){.tr:hover .act{color:var(--ink)}} /* ---------------------------------------------------------------------------- 8. MATCHUP / PICK CARD ("pick who did more" — the warm-up + Streak rounds) ---------------------------------------------------------------------------- */ .mc{background:var(--card);border:1px solid var(--line2);border-radius:var(--r-xl); padding:clamp(18px,4vw,26px);box-shadow:var(--shadow-card)} .mc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px} .mc-head .lab{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:var(--ink2);white-space:nowrap} .mc-head .badge{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.06em;color:var(--muted)} .q{font-size:clamp(18px,4.2vw,21px);font-weight:600;letter-spacing:-.02em;text-align:center;margin-bottom:18px;line-height:1.3} .q .st{color:var(--accent)} .vs{display:grid;grid-template-columns:1fr 34px 1fr;gap:8px;align-items:stretch} @media(min-width:420px){.vs{grid-template-columns:1fr 38px 1fr;gap:10px}} .pick{background:var(--bg);border:1.5px solid var(--line2);border-radius:var(--r-lg);padding:18px 12px; text-align:center;cursor:pointer;transition:border-color .12s,transform .1s,background .15s; display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:148px} .pick:hover{border-color:var(--accent)} @media(hover:hover){.pick:hover{transform:translateY(-2px)}} .pick .e{font-size:24px} .pick .nm{font-size:clamp(14.5px,3.4vw,16.5px);font-weight:600;letter-spacing:-.01em;margin-top:10px} .pick .sb{font-family:var(--mono);font-size:11px;color:var(--muted);margin-top:5px;letter-spacing:.02em} /* the stat value is hidden until a pick is made, then revealed (add .reveal to .pick) */ .pick .val{font-family:var(--mono);font-size:22px;font-weight:500;margin-top:0;max-height:0;opacity:0; overflow:hidden;transition:max-height .3s,opacity .3s,margin .3s} .pick.reveal .val{max-height:40px;opacity:1;margin-top:12px} .pick.correct{border-color:var(--green);background:var(--greenbg)} .pick.correct .val{color:var(--green)} .pick.wrong{border-color:var(--red);background:var(--redbg)} .pick.wrong .val{color:var(--red)} .pick.dim{opacity:.55} .pick.locked{cursor:default} @media(hover:hover){.pick.locked:hover{transform:none;border-color:var(--line2)}} .pick.locked.correct:hover{border-color:var(--green)} .pick.locked.wrong:hover{border-color:var(--red)} .mid{display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-weight:500;color:var(--muted);font-size:13px} /* ---------------------------------------------------------------------------- 9. EMAIL CAPTURE STRIP (quiet, not a hero) ---------------------------------------------------------------------------- */ .cap{margin-top:clamp(44px,7vw,60px);border-top:1px solid var(--line);padding:26px 0; display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap} .cap .t{font-size:15px;font-weight:500;max-width:520px} .cap .t span{color:var(--muted);font-weight:400} .capform{display:flex;gap:9px;flex:1;min-width:min(100%,280px);max-width:420px} .capform input{flex:1;min-width:0;background:var(--soft);border:1px solid var(--line2);border-radius:var(--r-md); padding:12px 14px;font-size:15px;font-family:inherit;color:var(--ink)} .capform input::placeholder{color:var(--muted)} .capform button{flex:0 0 auto;background:transparent;color:var(--ink);border:1px solid var(--line2); border-radius:var(--r-md);padding:12px 18px;font-size:14px;font-weight:500;cursor:pointer; font-family:inherit;white-space:nowrap} .capform button:hover{border-color:var(--ink)} /* ---------------------------------------------------------------------------- 10. FOOTER (shared) ---------------------------------------------------------------------------- */ .foot{margin-top:20px;padding:34px 0 calc(40px + env(safe-area-inset-bottom));border-top:1px solid var(--line); display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-direction:column} @media(min-width:760px){.foot{flex-direction:row;gap:40px}} .foot .fb{font-size:17px;font-weight:700;letter-spacing:-.03em} .foot .fb i{color:var(--accent);font-style:normal} .foot p{font-size:11.5px;color:var(--muted);line-height:1.7;max-width:560px} @media(min-width:760px){.foot p{text-align:right}} .foot a{color:var(--muted);border-bottom:1px solid var(--line2)} .foot a:hover{color:var(--ink)} /* ---------------------------------------------------------------------------- 11. MOTION ---------------------------------------------------------------------------- */ @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} } /* ---------------------------------------------------------------------------- 12. ANCHOR OFFSET — keep section headings clear of the sticky nav on jump ---------------------------------------------------------------------------- */ .sec, [id]{scroll-margin-top:90px}