/* ================================================================ BatteryArchive — Brand Theme & Design System ticket 010: CSS custom properties, layout, typography, components ================================================================ */ /* ---------------------------------------------------------------- Design tokens ---------------------------------------------------------------- */ :root { /* Colour palette */ --c-bg: #0d1117; /* page background — deep navy */ --c-surface: #161b22; /* card / section surface */ --c-surface-alt: #1c2128; /* slightly lifted surface */ --c-border: #30363d; /* subtle borders */ --c-text: #e6edf3; /* primary text */ --c-text-muted: #8b949e; /* secondary / meta text */ --c-accent: #58a6ff; /* interactive blue (links, focus rings) */ --c-accent-hover: #79c0ff; --c-brand: #f0b429; /* battery-yellow brand highlight */ --c-brand-dark: #c98f00; --c-success: #3fb950; --c-error: #f85149; /* Component colours (dark) */ --c-header-bg: rgba(13, 17, 23, 0.85); --c-hero-glow: rgba(88, 166, 255, 0.08); --c-btn-text: #0d1117; /* Chart accent palette — passed to Superset theme config (ticket 029) */ --chart-1: #58a6ff; --chart-2: #f0b429; --chart-3: #3fb950; --chart-4: #ff7b72; --chart-5: #d2a8ff; --chart-6: #79c0ff; /* Typography */ --font-sans: "Inter", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", "Fira Code", ui-monospace, monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; --text-3xl: 1.875rem; --text-4xl: 2.25rem; --leading: 1.6; /* Spacing scale */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem; /* Layout */ --max-width: 1280px; --radius: 6px; --radius-lg: 12px; /* Transitions */ --transition: 150ms ease; } /* ---------------------------------------------------------------- Light mode colour overrides (ticket 048) Toggle by setting data-theme="light" on . Only colour tokens change; spacing, typography, and layout are shared. ---------------------------------------------------------------- */ [data-theme="light"] { /* Colour palette */ --c-bg: #ffffff; --c-surface: #f6f8fa; --c-surface-alt: #eaeef2; --c-border: #d0d7de; --c-text: #1f2328; --c-text-muted: #656d76; --c-accent: #0969da; --c-accent-hover: #0550ae; --c-brand: #d4940c; --c-brand-dark: #b07d02; --c-success: #1a7f37; --c-error: #cf222e; /* Component colours (light) */ --c-header-bg: rgba(255, 255, 255, 0.6); --c-hero-glow: rgba(9, 105, 218, 0.06); --c-btn-text: #1f2328; /* Chart accent palette — slightly deeper for white backgrounds */ --chart-1: #0969da; --chart-2: #d4940c; --chart-3: #1a7f37; --chart-4: #cf222e; --chart-5: #8250df; --chart-6: #0550ae; } /* ---------------------------------------------------------------- Base ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading); background-color: var(--c-bg); color: var(--c-text); min-height: 100vh; } a { color: var(--c-accent); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--c-accent-hover); } h1, h2, h3, h4 { line-height: 1.25; font-weight: 700; letter-spacing: -0.01em; } h1 { font-size: var(--text-4xl); } h2 { font-size: var(--text-3xl); } h3 { font-size: var(--text-2xl); } h4 { font-size: var(--text-xl); } p { max-width: 68ch; } /* ---------------------------------------------------------------- Layout helpers ---------------------------------------------------------------- */ .inner { width: 100%; max-width: var(--max-width); margin-inline: auto; padding-inline: var(--space-6); } /* ---------------------------------------------------------------- Header ---------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; background-color: var(--c-header-bg); backdrop-filter: blur(12px); border-bottom: 1px solid var(--c-border); } .header-inner { display: flex; align-items: center; justify-content: space-between; max-width: var(--max-width); margin-inline: auto; padding: var(--space-4) var(--space-6); } .logo { display: flex; align-items: center; gap: var(--space-2); color: var(--c-text); font-weight: 700; font-size: var(--text-lg); } .logo:hover { color: var(--c-brand); } .logo-mark { font-size: var(--text-2xl); color: var(--c-brand); } .site-nav { display: flex; gap: var(--space-6); font-size: var(--text-sm); font-weight: 500; color: var(--c-text-muted); } .site-nav a:hover { color: var(--c-text); } .site-nav a[aria-current="page"] { color: var(--c-text); } /* ---------------------------------------------------------------- Theme toggle button (ticket 050) ---------------------------------------------------------------- */ .theme-toggle { display: flex; align-items: center; justify-content: center; background: none; border: 1px solid var(--c-border); border-radius: var(--radius); padding: var(--space-2); color: var(--c-text-muted); cursor: pointer; transition: color var(--transition), border-color var(--transition); margin-left: var(--space-4); flex-shrink: 0; } .theme-toggle:hover { color: var(--c-text); border-color: var(--c-text-muted); } .hidden { display: none !important; } /* ---------------------------------------------------------------- Hero ---------------------------------------------------------------- */ .hero { padding: var(--space-24) var(--space-6); text-align: center; background: radial-gradient(ellipse 80% 60% at 50% 0%, var(--c-hero-glow) 0%, transparent 70%), var(--c-bg); } .hero-inner { max-width: var(--max-width); margin-inline: auto; } .hero h1 { margin-bottom: var(--space-4); background: linear-gradient(135deg, var(--c-text) 40%, var(--c-brand)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-sub { font-size: var(--text-lg); color: var(--c-text-muted); max-width: 56ch; margin-inline: auto; } /* ---------------------------------------------------------------- Dashboards section (containers added in ticket 011) ---------------------------------------------------------------- */ .dashboards-section { padding: var(--space-16) var(--space-6); max-width: var(--max-width); margin-inline: auto; } .section-header { margin-bottom: var(--space-8); } .section-header h2 { margin-bottom: var(--space-2); } .section-header p { color: var(--c-text-muted); } /* ---------------------------------------------------------------- CTA button ---------------------------------------------------------------- */ .cta-btn { display: inline-block; margin-top: var(--space-6); padding: var(--space-3) var(--space-8); background-color: var(--c-brand); color: var(--c-btn-text); font-weight: 700; font-size: var(--text-base); border-radius: var(--radius); transition: background-color var(--transition), transform var(--transition); text-decoration: none; } .cta-btn:hover { background-color: var(--c-brand-dark); color: var(--c-btn-text); transform: translateY(-1px); } /* ---------------------------------------------------------------- Landing page content sections ---------------------------------------------------------------- */ .content-section { padding: var(--space-16) var(--space-6); } .content-inner { max-width: var(--max-width); margin-inline: auto; } .content-inner h2 { margin-bottom: var(--space-4); } .content-copy { color: var(--c-text-muted); margin-bottom: var(--space-4); max-width: 68ch; } .content-copy:last-of-type { margin-bottom: var(--space-6); } .content-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-2); padding: 0; max-width: 68ch; } .content-list li { color: var(--c-text-muted); font-size: var(--text-sm); padding-left: var(--space-6); position: relative; } .content-list li::before { content: "\2022"; position: absolute; left: 0; color: var(--c-brand); font-size: var(--text-xs); top: 0.15em; } /* ---------------------------------------------------------------- About (landing page) ---------------------------------------------------------------- */ .about-section { background-color: var(--c-surface); border-top: 1px solid var(--c-border); border-bottom: 1px solid var(--c-border); } .feature-list { } .feature-list li::before { content: "⚡"; } /* ---------------------------------------------------------------- Studies section ---------------------------------------------------------------- */ .studies-section { background-color: var(--c-surface); border-bottom: 1px solid var(--c-border); } .conduct-list { margin-bottom: var(--space-6); } .studies-list { display: flex; flex-direction: column; gap: var(--space-4); text-align: left; } .study-card { background-color: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); padding: var(--space-6); transition: border-color var(--transition); } .study-card:hover { border-color: var(--c-accent); } .study-card h3 { margin-bottom: var(--space-3); } .study-card p { color: var(--c-text-muted); font-size: var(--text-sm); max-width: none; } .study-card p + p { margin-top: var(--space-3); } /* ---------------------------------------------------------------- CTA banner section ---------------------------------------------------------------- */ .cta-section { background-color: var(--c-surface-alt); border-top: 1px solid var(--c-border); padding: var(--space-16) var(--space-6); text-align: center; } .cta-inner { max-width: 56ch; margin-inline: auto; } .cta-inner h2 { margin-bottom: var(--space-3); } .cta-inner p { color: var(--c-text-muted); margin-bottom: 0; } /* ---------------------------------------------------------------- Footer ---------------------------------------------------------------- */ .site-footer { padding: var(--space-8) var(--space-6); border-top: 1px solid var(--c-border); text-align: center; } .footer-inner { max-width: var(--max-width); margin-inline: auto; } .site-footer p { font-size: var(--text-sm); color: var(--c-text-muted); } /* ---------------------------------------------------------------- Dashboard grid & cards (ticket 011) ---------------------------------------------------------------- */ .dashboard-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-8); } .dashboard-card { background-color: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius-lg); overflow: visible; } .card-header { padding: var(--space-6); border-bottom: 1px solid var(--c-border); } .card-header h3 { margin-bottom: var(--space-1); } .card-desc { font-size: var(--text-sm); color: var(--c-text-muted); } /* Give the embed a bounded viewport and let the page scroll that viewport. */ .embed-container { width: 100%; height: 70vh; max-height: 900px; min-height: 560px; position: relative; overflow: auto; -webkit-overflow-scrolling: touch; } /* Superset SDK injects an