/* ============================================================================ bragi.build — PORTABLE DESIGN SYSTEM (shared, structural, neutral-dark) ---------------------------------------------------------------------------- ONE stylesheet imported by every site under bragi.build. It defines: 1. TOKENS — CSS custom properties (color / space / type / radius / motion) 2. RESET — minimal, predictable base element styles 3. COMPONENTS — reusable: .site-header / .nav, .card, .btn, .footer, code ---------------------------------------------------------------------------- THEMING CONTRACT The shared layer is NEUTRAL-DARK and accent-agnostic. Each site supplies its OWN accent by overriding these tokens in its page or site stylesheet: --accent primary accent (links, focus, headings highlight) --accent-2 secondary accent (gradient end / hover) --accent-grad a ready-made gradient using the two accents Everything else (surfaces, text, borders, spacing) stays shared so sites feel like one family. Aries overrides accent → warm-orange→cool-blue (from its mark); the apex holding page uses a cooler neutral steel accent. ========================================================================== */ :root { /* ---- COLOR: structural neutral-dark (matches the near-black asset field) ---- */ --bg: #0b0d12; /* page background — near-black navy, ~ the logo field */ --bg-elev: #0f1218; /* slightly raised background bands */ --surface: #14171f; /* cards / panels */ --surface-2: #1b1f2a; /* nested surfaces / code blocks */ --border: #262b37; /* hairline borders */ --border-soft: #1d212b; /* softer dividers */ --text: #e7ebf2; /* primary text */ --text-dim: #aab2c2; /* secondary text */ --text-faint: #717a8c; /* tertiary / captions */ --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 30px rgba(0,0,0,.35); /* ---- ACCENT: neutral default; sites override ---- */ --accent: #5b8def; --accent-2: #7aa7f3; --accent-grad: linear-gradient(135deg, var(--accent), var(--accent-2)); --accent-tint: color-mix(in srgb, var(--accent) 16%, transparent); /* ---- TYPE: system + mono stacks, fluid scale ---- */ --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, Consolas, "Liberation Mono", monospace; --fs-xs: .8125rem; --fs-sm: .9375rem; --fs-base: 1.0625rem; --fs-lg: 1.25rem; --fs-xl: 1.75rem; --fs-2xl: clamp(2.1rem, 1.4rem + 2.6vw, 3.4rem); --fs-3xl: clamp(2.8rem, 1.8rem + 4vw, 4.8rem); --lh-tight: 1.12; --lh-body: 1.62; /* ---- SPACE: 4px base scale ---- */ --sp-1: .25rem; --sp-2: .5rem; --sp-3: .75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --sp-10: 8rem; /* ---- RADIUS / LAYOUT / MOTION ---- */ --radius-sm: 6px; --radius: 10px; --radius-lg: 16px; --radius-pill: 999px; --maxw: 1080px; --ease: cubic-bezier(.4, 0, .2, 1); --dur: .18s; } /* ----------------------------------- RESET ----------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { background: var(--bg); color: var(--text); font: 400 var(--fs-base)/var(--lh-body) var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; } img, svg { display: block; max-width: 100%; } a { color: var(--accent); text-decoration: none; transition: color var(--dur) var(--ease); } a:hover { color: var(--accent-2); } h1, h2, h3 { line-height: var(--lh-tight); letter-spacing: -.02em; font-weight: 650; } ::selection { background: var(--accent-tint); color: var(--text); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-sm); } /* --------------------------------- LAYOUT ------------------------------------ */ .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--sp-5); } .section { padding-block: var(--sp-9); } .section + .section { border-top: 1px solid var(--border-soft); } .eyebrow { font: 600 var(--fs-xs)/1 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); margin-bottom: var(--sp-4); } .lead { font-size: var(--fs-lg); color: var(--text-dim); max-width: 60ch; } .muted { color: var(--text-faint); } .grad-text { background: var(--accent-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ------------------------------ COMPONENT: header/nav ------------------------ */ .site-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--border-soft); } .nav { display: flex; align-items: center; gap: var(--sp-5); height: 60px; } .nav .brand { display: flex; align-items: center; gap: var(--sp-3); font-weight: 650; letter-spacing: -.01em; color: var(--text); } .nav .brand .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent-grad); box-shadow: 0 0 12px var(--accent); } .nav .spacer { flex: 1; } .nav a.navlink { color: var(--text-dim); font-size: var(--fs-sm); font-weight: 500; } .nav a.navlink:hover { color: var(--text); } /* ------------------------------ COMPONENT: buttons --------------------------- */ .btn { display: inline-flex; align-items: center; gap: var(--sp-2); padding: .6rem 1.05rem; border-radius: var(--radius); font: 600 var(--fs-sm)/1 var(--font-sans); border: 1px solid transparent; cursor: pointer; transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease); } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent-grad); color: #08090d; } .btn-primary:hover { color: #08090d; filter: brightness(1.06); } .btn-ghost { border-color: var(--border); color: var(--text); background: var(--surface); } .btn-ghost:hover { border-color: var(--accent); color: var(--text); } /* ------------------------------ COMPONENT: card ------------------------------ */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-5); transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease); } .card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); } .card h3 { font-size: var(--fs-lg); margin-bottom: var(--sp-2); } .card p { color: var(--text-dim); font-size: var(--fs-sm); } .card .tag { display: inline-block; font: 600 var(--fs-xs)/1 var(--font-mono); color: var(--accent); background: var(--accent-tint); padding: .3rem .5rem; border-radius: var(--radius-sm); margin-bottom: var(--sp-3); } .grid { display: grid; gap: var(--sp-4); } .grid-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .grid-3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } /* ------------------------------ COMPONENT: code ------------------------------ */ code { font-family: var(--font-mono); font-size: .92em; background: var(--surface-2); padding: .15em .4em; border-radius: 5px; color: #cdd6e6; } pre { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-4) var(--sp-5); overflow-x: auto; font-size: var(--fs-sm); line-height: 1.6; position: relative; } pre code { background: none; padding: 0; color: #d7deec; } pre .c { color: var(--text-faint); } /* comment */ pre .k { color: var(--accent-2); } /* keyword / flag */ .codecard { display: grid; gap: var(--sp-2); } .codecard .label { font: 600 var(--fs-xs)/1 var(--font-mono); letter-spacing: .08em; color: var(--text-faint); text-transform: uppercase; } /* ------------------------------ COMPONENT: footer ---------------------------- */ .footer { border-top: 1px solid var(--border-soft); padding-block: var(--sp-7); color: var(--text-faint); font-size: var(--fs-sm); } .footer .wrap { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; } .footer .spacer { flex: 1; } .footer a { color: var(--text-dim); } .footer a:hover { color: var(--text); } /* --------------------------------- MOTION ------------------------------------ */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto; } }