/* ========================================================================== WARD AGENTIC RESEARCH AND DEVELOPMENT (W.A.R.D.) — NORDIC GLACIER DESIGN SYSTEM ========================================================================== */ /* NOTE: Google Fonts (Inter, JetBrains Mono, Plus Jakarta Sans) are loaded via tags in HTML for better performance. Do NOT add @import here. */ :root { /* Color Palette — Nordic Glacier */ --bg-core: #09111e; --bg-surface: #0f172a; --bg-surface-elevated: #162238; --bg-card: #0f172a; --bg-card-hover: #131d35; --bg-subtle: #1e2d44; --color-white: #ffffff; --color-silver-light: #f8fafc; --color-silver: #f1f5f9; --color-gray-light: #e2e8f0; --color-gray: #cbd5e1; --color-gray-muted: #94a3b8; --color-gray-dark: #334155; --color-charcoal: #0f172a; --color-black: #000000; /* Frost Cyan & Glacier Sapphire */ --accent-slate: #38bdf8; --accent-slate-dim: #0284c7; --accent-slate-subtle: rgba(56, 189, 248, 0.15); --accent-slate-border: rgba(56, 189, 248, 0.35); --accent-olive: #f43f5e; --accent-olive-dim: #e11d48; --accent-olive-subtle: rgba(244, 63, 94, 0.15); --accent-olive-border: rgba(244, 63, 94, 0.35); --accent-steel: #0ea5e9; --accent-steel-dim: #0284c7; --accent-steel-subtle: rgba(14, 165, 233, 0.15); --accent-steel-border: rgba(14, 165, 233, 0.35); --accent-steel-light: #7dd3fc; --accent-rust: #38bdf8; --accent-rust-dim: #0284c7; --accent-rust-subtle: rgba(56, 189, 248, 0.15); --accent-rust-border: rgba(56, 189, 248, 0.35); --accent-rust-light: #bae6fd; /* Header & Footer styling — Unified Sleek Dark Theme Palette */ --nav-bg: rgba(19, 28, 46, 0.92); --nav-scrolled-bg: rgba(22, 34, 56, 0.97); --nav-border: rgba(255, 255, 255, 0.10); --nav-text: #cbd5e1; --nav-text-hover: #ffffff; --nav-indicator: #38bdf8; --brand-filter: none; --footer-bg: #131c2e; --footer-border: rgba(255, 255, 255, 0.10); --footer-title: #f8fafc; --footer-text: #cbd5e1; --footer-text-muted: #64748b; --footer-link: #94a3b8; --footer-link-hover: #38bdf8; /* Typography Colors — Softened for Zero-Halation Reading Comfort */ --text-primary: #e2e8f0; --text-secondary: #94a3b8; --text-muted: #64748b; --text-heading: #f8fafc; --text-dim: #0284c7; --text-inverse: #09111e; /* Borders */ --border-subtle: #1c2a3e; --border-medium: #283c58; --border-strong: #3b557b; --border-active: #38bdf8; /* Typography Families */ --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace; /* Layout Constants */ --container-max: 1320px; --header-height: 94px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; } /* ========================================================================== RESET & BASE ========================================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; color-scheme: dark; background-color: var(--bg-core); font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } section[id], .download-card, .hero-carousel-container, [id^="dev-"], [id^="dl-"], [id^="card-"] { scroll-margin-top: 90px; } body { font-family: var(--font-body); background-color: var(--bg-core); color: var(--text-primary); line-height: 1.65; overflow-x: hidden; position: relative; } /* Custom Minimalist Scrollbar */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--bg-core); } ::-webkit-scrollbar-thumb { background: var(--border-medium); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--border-strong); } a { color: inherit; text-decoration: none; transition: color 0.15s ease, border-color 0.15s ease; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; line-height: 1.25; letter-spacing: -0.025em; color: var(--text-heading); } code, pre { font-family: var(--font-mono); } .container { max-width: var(--container-max); margin: 0 auto; padding: 0 24px; } .section-spacing { padding: 64px 0; position: relative; } /* Full-page Kinetic Grid Backdrop */ .kinetic-grid-canvas { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 0; pointer-events: none; } .content-wrapper, .site-wrapper { position: relative; z-index: 1; background: transparent; } /* ========================================================================== NAVIGATION BAR ========================================================================== */ .navbar { position: sticky; top: 0; left: 0; right: 0; height: var(--header-height); background: var(--nav-bg); border-bottom: 1px solid var(--nav-border); z-index: 1000; transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease; } .navbar.scrolled { background: var(--nav-scrolled-bg); border-bottom-color: var(--nav-border); } .navbar.nav-hidden { transform: translateY(-100%); opacity: 0; pointer-events: none; } .nav-container { display: flex; align-items: center; justify-content: space-between; height: 100%; } .brand-group { display: flex; align-items: center; text-decoration: none; transition: all 0.2s ease; } .brand-group:hover { transform: translateY(-1px); } .brand-logo-img { height: 56px; width: auto; max-width: 380px; object-fit: contain; display: block; transition: transform 0.2s ease, filter 0.2s ease; filter: var(--brand-filter); } .brand-logo-img:hover { transform: scale(1.02); } .nav-links { display: flex; align-items: center; gap: 32px; list-style: none; } .nav-item a { font-size: 0.92rem; font-weight: 650; color: var(--nav-text); position: relative; padding: 6px 0; transition: color 0.15s ease; letter-spacing: -0.01em; } .nav-item a:hover, .nav-item.active a { color: var(--nav-text-hover); font-weight: 750; } .nav-item a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0%; height: 2.5px; background: var(--nav-indicator); border-radius: 2px; box-shadow: 0 0 8px rgba(56, 189, 248, 0.6); transition: width 0.2s ease; } .nav-item a:hover::after, .nav-item.active a::after { width: 100%; } .nav-actions { display: flex; align-items: center; gap: 16px; } .mobile-menu-btn { display: none; background: rgba(255, 255, 255, 0.3); border: 1px solid rgba(2, 132, 199, 0.6); color: var(--nav-text); padding: 8px 14px; border-radius: var(--radius-sm); cursor: pointer; font-size: 1.2rem; font-weight: 700; transition: background 0.15s ease; } .mobile-menu-btn:hover { background: rgba(255, 255, 255, 0.5); } /* ========================================================================== HERO SECTION ========================================================================== */ .hero-section { padding: 72px 0 48px; position: relative; } .hero-grid { display: grid; grid-template-columns: 1fr 1.08fr; gap: 48px; align-items: center; } .hero-title { font-size: clamp(2.4rem, 4.4vw, 3.6rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.15; margin-bottom: 24px; color: #FFFFFF; } .text-slate { color: var(--accent-slate); } .text-rust { color: var(--accent-rust); } .text-gradient-gitlab { background: linear-gradient(135deg, #cb4b16 0%, #dc322f 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .hero-lead { font-size: 1.12rem; color: var(--text-secondary); margin-bottom: 40px; max-width: 640px; line-height: 1.7; } .hero-lead strong { color: #FFFFFF; font-weight: 600; } .hero-cta-group { display: flex; flex-wrap: wrap; gap: 16px; } /* ========================================================================== TELEMETRY HUD / LAB STATS BAR ========================================================================== */ .telemetry-bar { background: rgba(19, 19, 23, 0.75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--border-medium); border-radius: var(--radius-md); padding: 32px 36px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 60px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4); } .telemetry-item { display: flex; flex-direction: column; gap: 8px; position: relative; } .telemetry-item:not(:last-child)::after { content: ''; position: absolute; right: -16px; top: 15%; height: 70%; width: 1px; background: var(--border-subtle); } .telemetry-label { font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); } .telemetry-value { font-family: var(--font-display); font-size: 2.1rem; font-weight: 800; letter-spacing: -0.03em; color: #FFFFFF; } .telemetry-item:nth-child(1) .telemetry-value { color: var(--accent-rust); } .telemetry-item:nth-child(2) .telemetry-value { color: var(--accent-rust-light); } .telemetry-item:nth-child(3) .telemetry-value { color: var(--accent-olive); } .telemetry-item:nth-child(4) .telemetry-value { color: var(--accent-steel-light); } .telemetry-subtext { font-size: 0.76rem; color: var(--color-gray); font-family: var(--font-mono); line-height: 1.4; } /* ========================================================================== SECTION HEADERS ========================================================================== */ .section-header { text-align: left; max-width: 860px; margin-bottom: 36px; } .section-tag { font-family: var(--font-sans); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-rust); background: rgba(224, 86, 56, 0.1); border: 1px solid rgba(224, 86, 56, 0.28); border-radius: 9999px; padding: 4px 14px; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; margin-bottom: 12px; } .section-heading { font-size: clamp(2rem, 3vw, 2.6rem); font-weight: 800; margin-bottom: 14px; color: #FFFFFF; } .section-subtext { font-size: 1.05rem; color: var(--text-secondary); line-height: 1.6; } /* ========================================================================== RESPONSIVE MEDIA QUERIES ========================================================================== */ @media (max-width: 1024px) { .hero-grid { grid-template-columns: 1fr; } .telemetry-bar { grid-template-columns: repeat(2, 1fr); } .telemetry-item:nth-child(2)::after { display: none; } } @media (max-width: 768px) { .nav-links { display: none; } /* Mobile menu open state — toggled by JS via classList */ .nav-links.nav-links--open { display: flex; flex-direction: column; position: absolute; top: var(--header-height); left: 0; right: 0; background: var(--nav-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding: 24px; border-bottom: 1px solid var(--nav-border); z-index: 999; gap: 8px; } .mobile-menu-btn { display: block; } .telemetry-bar { grid-template-columns: 1fr; padding: 20px; } .telemetry-item::after { display: none !important; } .hero-section { padding: 48px 0 32px; } .section-header { margin-bottom: 24px; } .section-spacing { padding: 44px 0; } }