/* ============================================================ DRAFTRESEARCH.COM — DESIGN TOKENS Single source of truth for colors, typography, and spacing. Link this file in every page BEFORE page-specific styles. ============================================================ */ /* --- RESET ------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} /* --- COLOR PALETTE ----------------------------------------- */ :root{ /* Navy / Dark */ --navy: #0a1628; --navy-deep: #070e1a; --navy-mid: #243552; --navy-light: #2E4268; /* Slate / Gray */ --slate: #6B7A90; --slate-mid: #8A97AB; --slate-light: #B4BDC9; --slate-pale: #E8ECF1; /* Neutrals */ --off: #EAECF0; --white: #F5F7FA; --pure: #fafafa; --ink: #1B2A45; /* Transparency / Borders */ --ghost: rgba(255,255,255,0.06); --rule: rgba(255,255,255,0.08); --rule-light: rgba(27,42,69,0.10); /* Accent */ --accent: #4a8ec7; --accent-dim: rgba(74,142,199,0.10); --accent-glow: rgba(74,142,199,0.18); /* Status */ --green: #28b463; --green-dim: rgba(40,180,99,0.10); --gold: #c9a84c; --gold-dim: rgba(201,168,76,0.08); --red: #d94535; --red-dim: rgba(217,69,53,0.08); /* Tier palette — locked site-wide. Elite=Gold · Top Line/Pair/No.1=Navy · descending slates below. Solid saturated fills + high-contrast text for crisp rendering at small sizes. */ --tier-elite-bg: #c9a84c; --tier-elite-border: #9a7d26; --tier-elite-text: #1a1404; --tier-top-bg: #0a1628; --tier-top-border: #000814; --tier-top-text: #f5f7fa; --tier-second-bg: #475569; --tier-second-border:#2c3a4d; --tier-second-text: #f5f7fa; --tier-third-bg: #8a97ab; --tier-third-border: #6b7a90; --tier-third-text: #0a1628; --tier-depth-bg: #d0d7e0; --tier-depth-border: #b4bdc9; --tier-depth-text: #0a1628; --tier-dnp-bg: #f3f5f8; --tier-dnp-border: rgba(27,42,69,0.10); --tier-dnp-text: #8a97ab; /* Text on dark backgrounds */ --text-hi: #F5F7FA; --text-mid: #B4BDC9; --text-dim: #8A97AB; --text-ghost: #6B7A90; /* Dark-mode surfaces (ReDraft "room" theme) */ --room-bg: #070e1a; --room-surface: #0c1828; --room-card: #142236; --room-card-hover: #1c2d44; --room-border: rgba(180,189,201,0.10); --room-border-hi: rgba(180,189,201,0.18); --gray-accent: #8A97AB; --gray-surface: #1a2d48; } /* --- TYPOGRAPHY -------------------------------------------- */ /* Font stack */ body{ font-family:'Barlow',sans-serif; background:var(--pure); color:var(--ink); line-height:1.5; -webkit-font-smoothing:antialiased; } a{color:inherit;text-decoration:none} /* Type scale (reference classes — use directly or as guidance) ----------------------------------------------------------- */ /* Display — Barlow Condensed 800-900 */ .t-display-xl { font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:88px; line-height:.9; letter-spacing:-.02em } .t-display-lg { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:56px; line-height:.93; letter-spacing:-.01em } .t-display-md { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:44px; line-height:.93; letter-spacing:-.01em } /* Headings — Barlow Condensed 700-800 */ .t-heading-lg { font-family:'Barlow Condensed',sans-serif; font-weight:800; font-size:28px; line-height:1 } .t-heading-md { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:22px; line-height:1.1 } .t-heading-sm { font-family:'Barlow Condensed',sans-serif; font-weight:700; font-size:18px; line-height:1.15 } /* Body — Barlow 400-600 */ .t-body-lg { font-family:'Barlow',sans-serif; font-weight:400; font-size:15px; line-height:1.6 } .t-body { font-family:'Barlow',sans-serif; font-weight:400; font-size:14px; line-height:1.5 } .t-body-sm { font-family:'Barlow',sans-serif; font-weight:500; font-size:13px; line-height:1.4 } /* Mono labels — DM Mono */ .t-label-lg { font-family:'DM Mono',monospace; font-weight:400; font-size:12px; letter-spacing:.06em } .t-label { font-family:'DM Mono',monospace; font-weight:400; font-size:10px; letter-spacing:.14em; text-transform:uppercase } .t-label-sm { font-family:'DM Mono',monospace; font-weight:400; font-size:9px; letter-spacing:.14em; text-transform:uppercase } .t-label-xs { font-family:'DM Mono',monospace; font-weight:400; font-size:8px; letter-spacing:.10em; text-transform:uppercase } .t-data { font-family:'DM Mono',monospace; font-weight:400; font-size:11px; letter-spacing:.04em } /* --- SPACING SCALE ----------------------------------------- */ :root{ --sp-xs: 4px; --sp-sm: 8px; --sp-md: 16px; --sp-lg: 24px; --sp-xl: 32px; --sp-2xl: 48px; --sp-3xl: 64px; } /* --- RADIUS ------------------------------------------------ */ :root{ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 16px; --radius-full:9999px; } /* --- TRANSITIONS ------------------------------------------- */ :root{ --ease-fast: .15s ease; --ease: .22s ease; --ease-slow: .4s ease; } /* --- NAV (shared across all pages) ------------------------- */ .nav{ position:fixed;top:0;left:0;right:0;z-index:200; background:var(--navy);height:72px; display:flex;align-items:center;padding:0 max(var(--sp-xl),env(safe-area-inset-left)) 0 max(var(--sp-xl),env(safe-area-inset-right)); border-bottom:1px solid rgba(255,255,255,0.07); transition:box-shadow .3s; } .nav.scrolled{box-shadow:0 2px 20px rgba(0,0,0,.3)} .nav-logo{display:flex;align-items:center;gap:12px;flex-shrink:0;text-decoration:none} .nav-badge{ width:42px;height:42px;border-radius:var(--radius-full); border:2.5px solid var(--gold); display:flex;align-items:center;justify-content:center; font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px; letter-spacing:.05em;color:var(--gold); } .nav-wordmark{display:flex;flex-direction:column;line-height:1.15} .nav-wordmark span{ font-family:'Barlow Condensed',sans-serif;font-weight:700; font-size:13px;letter-spacing:.12em;text-transform:uppercase; color:rgba(255,255,255,0.8); } .nav-divider{width:1px;height:28px;background:rgba(255,255,255,0.1);flex-shrink:0;margin:0 var(--sp-sm)} .nav-links{display:flex;align-items:stretch;flex:1;opacity:0;transition:opacity .15s} .fonts-loaded .nav-links{opacity:1} .nav-link{ font-family:'Barlow',sans-serif;font-weight:500;font-size:14px; color:rgba(255,255,255,0.5);letter-spacing:.02em; padding:0 20px;height:72px;display:flex;align-items:center; transition:color var(--ease-fast);white-space:nowrap;cursor:pointer;text-decoration:none; } .nav-icon{height:30px;width:auto;vertical-align:middle;margin-right:7px;filter:brightness(2) saturate(0);opacity:.35;transition:opacity .25s,filter .25s} .nav-link:hover .nav-icon{filter:brightness(1.3) saturate(1.2);opacity:1} .nav-link:hover{color:white} .nav-link.active{color:white;font-weight:600;box-shadow:inset 0 -2px 0 rgba(255,255,255,.35)} .nav-link.active .nav-icon{opacity:.7} .nav-cta{ margin-left:auto;color:var(--pure); background:transparent; font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px; letter-spacing:.08em;padding:9px 18px 9px 14px; border-radius:5px;border:1px solid rgba(201,168,76,.55);cursor:pointer;overflow:hidden; transition:transform .18s ease,box-shadow .22s ease,border-color .22s ease,color .22s ease,background .22s ease; white-space:nowrap;flex-shrink:0;text-decoration:none; display:inline-flex;align-items:center;gap:14px;position:relative; } .nav-cta:hover{ background:rgba(201,168,76,.08); border-color:rgba(201,168,76,.9); color:var(--gold); transform:translateY(-1px); box-shadow:0 0 16px rgba(201,168,76,.18); } @property --cta-angle{syntax:'';initial-value:0deg;inherits:false} .nav-cta::after{ content:'';position:absolute;inset:-1px;border-radius:6px; background:conic-gradient(from var(--cta-angle),transparent 0%,transparent 78%,rgba(201,168,76,.65) 86%,rgba(255,255,255,.45) 89%,rgba(201,168,76,.65) 92%,transparent 100%); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor;mask-composite:exclude; padding:1.5px;pointer-events:none;opacity:0; --cta-angle:0deg; animation:ctaBorderShine 14s linear infinite; } @keyframes ctaBorderShine{ 0%,70%{opacity:0;--cta-angle:0deg} 74%{opacity:1;--cta-angle:0deg} 94%{opacity:1;--cta-angle:360deg} 97%,100%{opacity:0;--cta-angle:360deg} } .nav-cta:active{transform:translateY(0);box-shadow:inset 0 2px 4px rgba(0,0,0,.35),0 0 0 1px rgba(10,22,40,.4)} .nav-cta .nav-icon{filter:none;opacity:1;margin:0;height:20px} .page{padding-top:72px} /* --- BUTTONS ----------------------------------------------- */ .btn-primary{ background:var(--navy);color:var(--pure); font-family:'Barlow',sans-serif;font-weight:700;font-size:13px; letter-spacing:.03em;padding:13px 28px;border-radius:var(--radius-sm); border:none;cursor:pointer;transition:background var(--ease-fast);display:inline-block; } .btn-primary:hover{background:var(--navy-light)} .btn-secondary{ background:transparent;color:var(--navy); font-family:'Barlow',sans-serif;font-weight:500;font-size:13px; padding:12px 28px;border-radius:var(--radius-sm); border:1px solid var(--slate-light);cursor:pointer; transition:border-color var(--ease-fast),background var(--ease-fast);display:inline-block; } .btn-secondary:hover{border-color:var(--navy);background:var(--slate-pale)} /* --- FOOTER (shared across all pages) ------------------------ */ .footer{background:var(--navy-deep);padding:32px 32px calc(12px + env(safe-area-inset-bottom,0px));padding-left:max(32px,env(safe-area-inset-left));padding-right:max(32px,env(safe-area-inset-right))} .footer-inner{max-width:1200px;margin:0 auto} .footer-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:40px;padding-bottom:14px;border-bottom:1px solid var(--rule);margin-bottom:0} .footer-badge{width:32px;height:32px;border-radius:50%;border:2px solid var(--gold);display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;color:var(--gold);margin-bottom:10px} .footer-name{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--pure);margin-bottom:3px} .footer-tag{font-family:'DM Mono',monospace;font-size:9px;color:var(--slate)} .footer-sub{font-family:'DM Mono',monospace;font-size:8px;color:var(--slate);opacity:.5;margin-top:2px} .footer-col h4{font-family:'DM Mono',monospace;font-size:9px;letter-spacing:.18em;text-transform:uppercase;color:var(--slate);margin-bottom:10px} .footer-col ul{list-style:none} .footer-col li{margin-bottom:5px} .footer-col a{font-size:12px;color:var(--slate-mid);transition:color .2s;text-decoration:none;line-height:1.3} .footer-col a:hover{color:var(--pure)} .footer-col a img.footer-icon{display:none} .footer-bottom{text-align:center;padding-top:10px} .footer-bottom p{font-family:'DM Mono',monospace;font-size:9px;color:var(--slate);letter-spacing:.05em} @media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;gap:24px}.footer{padding:28px 20px 12px}} @media(max-width:768px){.footer-grid{grid-template-columns:1fr 1fr;gap:14px}.footer-grid>:nth-child(2){order:2}.footer-grid>:nth-child(3){order:1}.footer-col li{margin-bottom:4px}.footer-col h4{margin-bottom:6px;font-size:8px}.footer-col a{font-size:11px}.footer-badge{width:26px;height:26px;font-size:10px;margin-bottom:6px}.footer-name{font-size:11px}.footer-tag,.footer-sub{font-size:8px}} @media(max-width:480px){.footer-grid{grid-template-columns:1fr 1fr;gap:10px}.footer{padding:16px 16px 8px}.footer-col li{margin-bottom:2px}.footer-col a{font-size:10px}} /* --- MOBILE NAV -------------------------------------------- */ .nav-burger{display:none;border:none;background:none;cursor:pointer;padding:8px;margin-left:auto;flex-shrink:0} .nav-burger span{display:block;width:20px;height:2px;background:rgba(255,255,255,0.7);margin:4px 0;transition:all .2s ease;border-radius:1px} .nav-burger.open span:nth-child(1){transform:rotate(45deg) translate(3px,4px)} .nav-burger.open span:nth-child(2){opacity:0} .nav-burger.open span:nth-child(3){transform:rotate(-45deg) translate(3px,-4px)} .nav-drawer{display:none;position:fixed;top:72px;left:0;right:0;bottom:0;z-index:199;background:var(--navy); flex-direction:column;padding:24px;padding-bottom:max(24px,env(safe-area-inset-bottom));padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right));opacity:0;transform:translateY(-8px);transition:opacity .25s ease,transform .25s ease} .nav-drawer.open{display:flex;opacity:1;transform:translateY(0)} .nav-drawer a{font-family:'Barlow',sans-serif;font-weight:500;font-size:16px;color:rgba(255,255,255,0.7); padding:14px 0;border-bottom:1px solid rgba(255,255,255,0.06);transition:color .15s;text-decoration:none} .nav-drawer a:hover,.nav-drawer a:active{color:white} .nav-drawer a:last-child{border-bottom:none} .nav-drawer .nav-drawer-cta{margin-top:20px;background:var(--pure);color:var(--navy);font-family:'Barlow Condensed',sans-serif; font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;padding:14px;border-radius:var(--radius-sm); text-align:center;border-bottom:none} /* --- RESPONSIVE -------------------------------------------- */ @media(max-width:1100px){ .nav-link{padding:0 12px;font-size:13px} .nav-icon{height:24px;margin-right:5px} .nav-cta{font-size:12px;padding:8px 16px} } @media(max-width:900px){ .nav-links{display:none} .nav-cta{display:none} .nav-burger{display:block} .nav{padding:0 var(--sp-md)} } @media(max-width:768px){ .nav{height:56px;padding:0 max(12px,env(safe-area-inset-left)) 0 max(12px,env(safe-area-inset-right))} .nav-badge{width:34px;height:34px;font-size:11px} .nav-wordmark span{font-size:11px} .nav-drawer{top:56px} .nav-drawer a{font-size:15px;padding:12px 0;min-height:44px;display:flex;align-items:center} .footer-col a{display:inline-flex;align-items:center} .page{padding-top:56px} } /* v3 */