/* ========================================================================== main.css — ALP Theme base styles Design tokens, typography, resets, utility classes Mirrors alp-system.jsx token values exactly. ========================================================================== */ /* ── Design tokens ──────────────────────────────────────────────────────── Keep in sync with alp-theme.yaml accent_color and background_style. The Twig base template injects --alp-accent from config at runtime. ─────────────────────────────────────────────────────────────────────── */ :root { --alp-navy: #0F2540; --alp-bronze: #B08456; /* default accent — overridden by theme config */ --alp-slate: #2C4A6B; --alp-walnut: #6B5544; --alp-steel: #8A8378; --alp-stone: #A8A39B; --alp-charcoal: #1F1F1F; --alp-cream: #F7F6F2; --alp-mist: #E5E3DE; --alp-white: #FFFFFF; /* Semantic status — error / warning / success only; never decorative */ --alp-brick: #7B3535; --alp-amber: #8C6020; --alp-moss: #3D5C3A; /* Semantic aliases — change accent via JS/Twig at runtime */ --alp-accent: var(--alp-bronze); --alp-bg: var(--alp-cream); /* cream | white — set by body class */ } /* ── Resets ───────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 16px; -webkit-text-size-adjust: 100%; } body { margin: 0; padding: 0; background-color: var(--alp-bg); font-family: Inter, "IBM Plex Sans", system-ui, sans-serif; color: var(--alp-charcoal); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv11"; } /* Background style variants — set on by Twig based on theme config */ body.bg-cream { --alp-bg: var(--alp-cream); background-color: var(--alp-cream); } body.bg-white { --alp-bg: var(--alp-white); background-color: var(--alp-white); } p { margin: 0; } h1, h2, h3, h4 { margin: 0; font-weight: 500; letter-spacing: -0.01em; line-height: 1.18; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } img { max-width: 100%; height: auto; display: block; } /* ── Typography scale ─────────────────────────────────────────────────── */ .alp-mono { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-feature-settings: normal; } .alp-meta { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--alp-steel); font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 400; } .alp-body { font-size: 15px; line-height: 1.6; color: var(--alp-charcoal); } .alp-body-sm { font-size: 13px; line-height: 1.55; color: var(--alp-charcoal); } .alp-label { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--alp-charcoal); font-weight: 500; } .alp-quiet { color: var(--alp-steel); } /* ── Dividers ─────────────────────────────────────────────────────────── */ .alp-rule { background: var(--alp-mist); height: 1px; width: 100%; border: none; } .alp-rule-strong { background: var(--alp-charcoal); height: 1px; width: 100%; opacity: 0.85; border: none; } .alp-hairline { background: var(--alp-accent); height: 1px; } /* ── Live pulse dot ───────────────────────────────────────────────────── */ .alp-pulse-dot { display: inline-block; width: 6px; height: 6px; background: var(--alp-accent); border-radius: 50%; animation: alp-pulse 2.6s infinite; flex-shrink: 0; } /* ── Ticker inline (header) ───────────────────────────────────────────── */ .alp-ack-ticker { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--alp-charcoal); font-family: "JetBrains Mono", monospace; } /* ── Layout helpers ───────────────────────────────────────────────────── */ #main-content { max-width: 1280px; margin: 0 auto; } .alp-container { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 56px; } @media (max-width: 768px) { .alp-container { padding-inline: 20px; } } .alp-section { padding-block: 68px; } .alp-section--sm { padding-block: 44px; } @media (max-width: 768px) { .alp-section { padding-block: 36px; } .alp-section--sm { padding-block: 24px; } } /* ── Grid helpers ─────────────────────────────────────────────────────── */ .alp-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px; } .alp-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; } .alp-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; } .alp-grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; } @media (max-width: 768px) { .alp-grid-2, .alp-grid-3, .alp-grid-4, .alp-grid-5 { grid-template-columns: 1fr; gap: 24px; } } /* ── Visibility helpers ───────────────────────────────────────────────── */ .alp-hide-mobile { display: block; } .alp-show-mobile { display: none; } @media (max-width: 768px) { .alp-hide-mobile { display: none; } .alp-show-mobile { display: block; } } /* ── Keyframes ────────────────────────────────────────────────────────── */ @keyframes alp-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }