/* ============================================================ 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: #f9f9f9; --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: #d4a028; --gold-dim: rgba(212,160,40,0.08); --red: #d94535; --red-dim: rgba(217,69,53,0.08); /* 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:69px; display:flex;align-items:center;padding:0 var(--sp-xl); 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:10px;flex-shrink:0;text-decoration:none} .nav-badge{ width:32px;height:32px;border-radius:var(--radius-full); border:1.5px solid rgba(255,255,255,0.3); display:flex;align-items:center;justify-content:center; font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:11px; letter-spacing:.05em;color:rgba(255,255,255,0.8); } .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:10.5px;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-xs)} .nav-links{display:flex;align-items:stretch;flex:1} .nav-link{ font-family:'Barlow',sans-serif;font-weight:500;font-size:13px; color:rgba(255,255,255,0.5);letter-spacing:.02em; padding:0 18px;height:69px;display:flex;align-items:center; transition:color var(--ease-fast);white-space:nowrap;cursor:pointer;text-decoration:none; } .nav-link:hover{color:white} .nav-link.active{color:white;font-weight:600;border-bottom:2px solid white;padding-bottom:2px} .nav-cta{ margin-left:auto;background:var(--pure);color:var(--navy); font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12px; letter-spacing:.08em;text-transform:uppercase;padding:var(--sp-sm) 20px; border-radius:var(--radius-sm);border:none;cursor:pointer; transition:all .25s;white-space:nowrap;flex-shrink:0;text-decoration:none; } .nav-cta:hover{background:#fff;box-shadow:0 0 16px rgba(255,255,255,0.15);transform:translateY(-1px)} .page{padding-top:69px} /* --- 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 ------------------------------------------------ */ .site-footer{ background:var(--navy);padding:28px var(--sp-xl); border-top:1px solid rgba(255,255,255,0.07); } .site-footer-inner{ max-width:1400px;margin:0 auto; display:flex;align-items:center;justify-content:space-between; gap:var(--sp-md);flex-wrap:wrap; } .site-footer-left{ font-family:'DM Mono',monospace;font-size:9px; letter-spacing:.08em;color:var(--text-ghost);line-height:1.6; } .site-footer-right{ font-family:'DM Mono',monospace;font-size:9px; letter-spacing:.06em;color:var(--text-ghost);text-align:right; } /* --- RESPONSIVE -------------------------------------------- */ @media(max-width:900px){ .nav-links{display:none} .nav{padding:0 var(--sp-md)} }