/* Self-hosted Nunito (variable weight) — no external font CDN, no render block. */ @font-face { font-family: 'Nunito'; font-style: normal; font-weight: 200 1000; font-display: swap; src: url('../fonts/nunito-var.woff2') format('woff2'); } /* Agentic podcast — brand layer on top of gipity-theme.css. Palette recreates the Episode 01 thumbnail: deep-space navy, starfield, ice-cyan glow, HUD bracket frames. Tokens are overridden here so every Water.css element picks up the brand automatically. */ :root { --primary: #5fb3ff; --primary-hover: color-mix(in srgb, var(--primary) 78%, white); --surface: #0e1c33; --surface-alt: #0a1526; --text-muted: #8fa9c9; --background-body: #060d1a; --text-main: #dbe7f4; --text-bright: #ffffff; --links: #8ecbff; --focus: color-mix(in srgb, var(--primary) 60%, transparent); --border: #21395e; --button-base: var(--primary); --button-hover: var(--primary-hover); --selection: color-mix(in srgb, var(--primary) 40%, transparent); --code: color-mix(in srgb, var(--primary) 55%, white); --scrollbar-thumb: #21395e; --scrollbar-thumb-hover: #2e4d7d; --shadow: 0 4px 24px rgba(0, 0, 0, 0.45); /* Brand-only extras */ --frame: #3d6394; /* HUD bracket lines */ --glow: rgba(143, 200, 255, 0.35); --font-display: 'Nunito', system-ui, sans-serif; } html { scroll-behavior: smooth; } /* Full-bleed layout: Water.css constrains ; this page manages its own containers via .wrap so sections can span the viewport. */ body { max-width: none; margin: 0; padding: 0; background: radial-gradient(ellipse 90% 60% at 50% 0%, #12233f 0%, transparent 60%), var(--background-body); } .wrap { max-width: 1060px; margin: 0 auto; padding-left: var(--space-lg); padding-right: var(--space-lg); } /* Starfield canvas sits behind everything */ #starfield { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; } /* ── HUD bracket frame (corner brackets like the show thumbnail) ── */ .hud-frame { position: relative; background: linear-gradient(var(--frame) 0 0) top left / 26px 2px, linear-gradient(var(--frame) 0 0) top left / 2px 26px, linear-gradient(var(--frame) 0 0) top right / 26px 2px, linear-gradient(var(--frame) 0 0) top right / 2px 26px, linear-gradient(var(--frame) 0 0) bottom left / 26px 2px, linear-gradient(var(--frame) 0 0) bottom left / 2px 26px, linear-gradient(var(--frame) 0 0) bottom right / 26px 2px, linear-gradient(var(--frame) 0 0) bottom right / 2px 26px; background-repeat: no-repeat; padding: var(--space-lg); } /* ── Header ── */ .site-header { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--background-body) 82%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid color-mix(in srgb, var(--border) 60%, transparent); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding-top: var(--space-sm); padding-bottom: var(--space-sm); } .brand { display: inline-flex; align-items: center; gap: var(--space-sm); text-decoration: none; color: var(--text-bright); } .brand-mark { width: 34px; height: 34px; color: var(--primary); filter: drop-shadow(0 0 6px var(--glow)); } .brand-name { font-family: var(--font-display); font-weight: 800; font-size: var(--text-lg); color: var(--text-bright); } .site-nav { display: flex; align-items: center; gap: var(--space-md); } .site-nav a { color: var(--text-main); text-decoration: none; font-size: var(--text-sm); letter-spacing: 0.04em; } .site-nav a:hover { color: var(--primary-hover); } .nav-cta { border: 1px solid var(--frame); border-radius: 999px; padding: var(--space-xs) var(--space-md); color: var(--text-bright); } /* Theme cycle button — intentionally plain so every theme restyles it */ .theme-btn { background: none; border: 1px dashed var(--frame); border-radius: 999px; color: var(--text-main); font-size: var(--text-sm); font-weight: 400; padding: var(--space-xs) var(--space-md); cursor: pointer; } .theme-btn:hover { background: none; border-color: var(--primary); color: var(--text-bright); } .nav-cta:hover { border-color: var(--primary); box-shadow: 0 0 12px var(--glow); } /* ── Hero ── */ .hero { text-align: center; padding: var(--space-xl) 0; } .hero-card { display: inline-block; padding: var(--space-lg) var(--space-xl); margin-bottom: var(--space-lg); } .logo-mark { width: 72px; height: 72px; color: #cfe8ff; filter: drop-shadow(0 0 10px var(--glow)); } .wordmark { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.6rem, 7vw, 4rem); margin: 0; color: var(--text-bright); text-shadow: 0 0 24px var(--glow); } .kicker { margin: var(--space-xs) 0 0; font-size: var(--text-sm); letter-spacing: 0.4em; color: var(--primary); text-transform: uppercase; } .hero-tagline { max-width: 640px; margin: 0 auto var(--space-sm); font-size: var(--text-lg); color: var(--text-main); } .hero-hosts { margin: 0 auto var(--space-lg); color: var(--text-muted); font-size: var(--text-sm); } .hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-md); } /* Anchor buttons (Water only styles