/* ============================================================= Glassmap — Colors, Type & Core Design Tokens ============================================================= */ /* Google Fonts import (Plus Jakarta Sans + DM Mono). If you prefer self-hosting, see /fonts and swap this for @font-face rules. */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=DM+Mono:wght@400;500&display=swap'); :root { /* ---------- Brand palette --------------------------------- */ --gm-teal-1: #6ECFCA; /* light teal — hovers, tints */ --gm-teal-2: #48B5AF; /* core teal — Practice actions, logo base */ --gm-blue-1: #7B9EE8; /* light blue — hovers, tints */ --gm-blue-2: #5B7BD4; /* core blue — Learning actions, logo middle */ --gm-purple-1: #A87ED6; /* light purple */ --gm-purple-2: #8F60C0; /* core purple — accents, logo top */ --gm-yellow-1: #F4C567; /* light amber — Networking light */ --gm-yellow-2: #E8A832; /* core amber — Networking actions */ /* ---------- Ink / neutrals -------------------------------- */ --gm-ink-1: #1C2B3A; /* primary text, deepest ink */ --gm-ink-2: #2E3F52; /* secondary ink */ --gm-muted: #6B7E93; /* mid-tone, labels, captions */ --gm-muted-soft: #9AA8BA; /* softer mid tone */ --gm-hairline: #E4EAF2; /* dividers / 1px borders on solid surface */ --gm-paper: #F7F9FC; /* app background */ --gm-paper-2: #EEF2F8; /* alt background */ --gm-white: #FFFFFF; /* ---------- Semantic action colors (Glassmap taxonomy) ---- */ --gm-learning: var(--gm-blue-2); --gm-learning-tint: rgba(91, 123, 212, 0.10); --gm-practice: var(--gm-teal-2); --gm-practice-tint: rgba(72, 181, 175, 0.10); --gm-networking: var(--gm-yellow-2); --gm-networking-tint: rgba(232, 168, 50, 0.12); --gm-accent: var(--gm-purple-2); --gm-accent-tint: rgba(143, 96, 192, 0.10); --gm-success: #3BB273; --gm-danger: #E4606D; --gm-warning: var(--gm-yellow-2); --gm-info: var(--gm-blue-2); /* ---------- Foreground / surface tokens ------------------- */ --fg-1: var(--gm-ink-1); --fg-2: var(--gm-ink-2); --fg-muted: var(--gm-muted); --fg-on-accent: #FFFFFF; --bg-app: var(--gm-paper); --bg-surface: #FFFFFF; --bg-sunken: var(--gm-paper-2); /* ---------- Signature gradients --------------------------- */ /* The 135° teal → blue → purple sweep. */ --gm-gradient: linear-gradient(135deg, #6ECFCA 0%, #5B7BD4 52%, #8F60C0 100%); --gm-gradient-strong: linear-gradient(135deg, #48B5AF 0%, #5B7BD4 50%, #8F60C0 100%); /* Soft 10% overlay used as background wash behind panels. */ --gm-gradient-wash: linear-gradient(135deg, rgba(110,207,202,0.10) 0%, rgba(123,158,232,0.10) 50%, rgba(168,126,214,0.10) 100%); /* Per-action vertical gradients (used on 5px focus-card accent bars). */ --gm-grad-learning: linear-gradient(180deg, #7B9EE8 0%, #5B7BD4 100%); --gm-grad-practice: linear-gradient(180deg, #6ECFCA 0%, #48B5AF 100%); --gm-grad-networking: linear-gradient(180deg, #F4C567 0%, #E8A832 100%); /* ---------- Glass surface ---------------------------------- */ --glass-bg: rgba(255, 255, 255, 0.62); --glass-bg-strong: rgba(255, 255, 255, 0.78); --glass-border: rgba(255, 255, 255, 0.45); --glass-blur: 24px; --glass-shadow: 0 8px 32px rgba(28, 43, 58, 0.08), 0 1px 2px rgba(28, 43, 58, 0.04); --glass-shadow-lg: 0 20px 60px rgba(28, 43, 58, 0.12), 0 2px 6px rgba(28, 43, 58, 0.05); --glass-hover-shadow: 0 14px 40px rgba(91, 123, 212, 0.18), 0 2px 6px rgba(28, 43, 58, 0.06); /* 1px top-edge gradient highlight (transparent → white → transparent). Apply as a ::before element on panels. */ --glass-edge: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0) 100%); /* ---------- Radii ---------------------------------------- */ --r-xs: 6px; --r-sm: 8px; /* buttons (7–10) */ --r-md: 12px; /* inner chips / inputs */ --r-lg: 20px; /* panels, pills, cards */ --r-pill: 999px; /* ---------- Spacing (4px base) --------------------------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; /* ---------- Borders -------------------------------------- */ --border-hairline: 1px solid var(--gm-hairline); --border-glass: 1px solid var(--glass-border); --border-dashed-add: 1.5px dashed rgba(91, 123, 212, 0.30); --border-selected: 1.5px solid var(--gm-blue-2); --border-current: 1.5px solid var(--gm-teal-2); /* ---------- Motion --------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --t-fast: 140ms; --t-base: 220ms; --t-slow: 360ms; /* ---------- Typography ----------------------------------- */ --font-sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-mono: 'DM Mono', ui-monospace, SFMono-Regular, 'Menlo', monospace; /* Scale (rem-based, 16px root) */ --fs-display: 56px; --lh-display: 1.04; --ls-display: -0.04em; --fs-h1: 40px; --lh-h1: 1.08; --ls-h1: -0.035em; --fs-h2: 30px; --lh-h2: 1.14; --ls-h2: -0.03em; --fs-h3: 22px; --lh-h3: 1.25; --ls-h3: -0.02em; --fs-h4: 17px; --lh-h4: 1.35; --ls-h4: -0.01em; --fs-body: 15px; --lh-body: 1.55; --ls-body: 0em; --fs-small: 13px; --lh-small: 1.5; --fs-label: 11px; --lh-label: 1.2; --ls-label: 0.12em; --fs-mono: 13px; --lh-mono: 1.4; } /* ============================================================= Base element defaults ============================================================= */ html, body { font-family: var(--font-sans); color: var(--fg-1); background: var(--bg-app); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, .h1 { font: 800 var(--fs-h1)/var(--lh-h1) var(--font-sans); letter-spacing: var(--ls-h1); color: var(--fg-1); margin: 0; } h2, .h2 { font: 800 var(--fs-h2)/var(--lh-h2) var(--font-sans); letter-spacing: var(--ls-h2); color: var(--fg-1); margin: 0; } h3, .h3 { font: 700 var(--fs-h3)/var(--lh-h3) var(--font-sans); letter-spacing: var(--ls-h3); color: var(--fg-1); margin: 0; } h4, .h4 { font: 700 var(--fs-h4)/var(--lh-h4) var(--font-sans); letter-spacing: var(--ls-h4); color: var(--fg-1); margin: 0; } .display { font: 800 var(--fs-display)/var(--lh-display) var(--font-sans); letter-spacing: var(--ls-display); color: var(--fg-1); } p, .body { font: 400 var(--fs-body)/var(--lh-body) var(--font-sans); color: var(--fg-2); margin: 0; } small, .small { font: 400 var(--fs-small)/var(--lh-small) var(--font-sans); color: var(--fg-muted); } .label, .eyebrow { font: 600 var(--fs-label)/var(--lh-label) var(--font-sans); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--fg-muted); } .mono, code, kbd { font: 400 var(--fs-mono)/var(--lh-mono) var(--font-mono); color: var(--fg-2); font-variant-numeric: tabular-nums; } /* Gradient text utility — teal → blue → purple */ .gm-gradient-text { background: var(--gm-gradient-strong); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Short gradient line prefix for section labels */ .gm-label-prefix::before { content: ""; display: inline-block; width: 18px; height: 2px; vertical-align: middle; margin-right: 8px; background: var(--gm-gradient-strong); border-radius: 2px; } /* ============================================================= Glass panel — core component primitive ============================================================= */ .glass { position: relative; background: var(--glass-bg); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(140%); backdrop-filter: blur(var(--glass-blur)) saturate(140%); border: var(--border-glass); border-radius: var(--r-lg); box-shadow: var(--glass-shadow); } .glass::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: var(--glass-edge); border-top-left-radius: var(--r-lg); border-top-right-radius: var(--r-lg); pointer-events: none; }