/* ============================================================================ FORGE DESIGN TOKENS -- single source of truth ---------------------------------------------------------------------------- Every page (marketing, console, inner pages, generated client sites) loads this FIRST. styles.css, ecosystem.css, inner-pages.css, and console.html inline blocks all *consume* these tokens. They no longer redefine them. Adding a new color, font, radius, or spacing rule? Add it here. Anywhere else is drift, and drift is what made the brand feel fragmented. ============================================================================ */ :root { /* === COLOR / SURFACE ====================================================== */ --bg: #050508; /* page background */ --surface: #0c0c12; /* primary card */ --surface-2: #141420; /* nested card / table row */ --surface-3: #08080d; /* bottom of vertical-gradient cards */ --border: rgba(255,255,255,0.06); --border-soft: rgba(255,255,255,0.04); --border-hard: rgba(255,255,255,0.10); --shadow-card: 0 24px 60px rgba(0,0,0,0.45); /* === TEXT ================================================================ */ --text: #ece9e2; /* primary copy + headlines */ --text-soft: #b8b5ac; /* secondary copy */ --text-dim: #8a8780; /* tertiary / labels (single canonical value) */ --text-faint: #6a6960; /* timestamps / captions */ --text-ghost: #3a3a40; /* watermarks / outer brand line */ /* === BRAND ACCENT (Forge lime) ========================================== */ --accent: #c4f43b; --accent-dark: #b5e332; --accent-light: #d9ff7a; --accent-glow: rgba(196,244,59,0.12); --accent-soft: rgba(196,244,59,0.06); --accent-line: rgba(196,244,59,0.18); /* === PRODUCT ACCENT EXTENSIONS (used by ecosystem cards / icons) ========= */ --ember: #ff6b4a; --ember-glow: rgba(255,107,74,0.12); --blue: #4a9eff; --blue-glow: rgba(74,158,255,0.12); --purple: #a855f7; --purple-glow: rgba(168,85,247,0.12); --cyan: #22d3ee; --cyan-glow: rgba(34,211,238,0.12); --gold: #f59e0b; --gold-glow: rgba(245,158,11,0.12); /* Shield = canonical accent. Aliases kept so legacy selectors still resolve. */ --shield: var(--accent); --shield-glow: rgba(196,244,59,0.10); /* === STATUS COLORS ====================================================== */ --success: #4ade80; --success-soft: rgba(74,222,128,0.10); --warning: #fbbf24; --warning-soft: rgba(251,191,36,0.10); --danger: #f87171; --danger-soft: rgba(248,113,113,0.10); --info: #60a5fa; --info-soft: rgba(96,165,250,0.10); /* === TYPOGRAPHY STACKS ================================================== */ --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif; --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --mono: 'JetBrains Mono', 'SF Mono', 'Courier New', monospace; /* Type scale (clamp() for responsive headlines) */ --fs-display: clamp(2.6rem, 5.4vw, 4.8rem); --fs-h1: clamp(2rem, 3.6vw, 3rem); --fs-h2: clamp(1.5rem, 2.6vw, 2rem); --fs-h3: 1.3rem; --fs-body: 1rem; --fs-body-sm: 0.92rem; --fs-caption: 0.78rem; --fs-mono-sm: 0.72rem; --fs-mono-xs: 0.66rem; --lh-tight: 1.1; --lh-snug: 1.3; --lh-body: 1.6; --lh-loose: 1.75; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.08em; --tracking-mono: 0.14em; --tracking-mono-lg: 0.18em; /* === SPACING SCALE ====================================================== */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px; --sp-32: 128px; /* === RADIUS ============================================================== */ --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-2xl: 28px; --r-pill: 100px; /* canonical pill button radius */ /* === MOTION ============================================================== */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --dur-fast: 0.18s; --dur: 0.32s; --dur-slow: 0.6s; /* === BUTTON CANONICAL STYLE (CTA pill) =================================== */ /* Apply by combining these tokens. Buttons that hand-roll their own values should be migrated. */ --btn-padding: 16px 38px; --btn-radius: var(--r-pill); --btn-font: var(--mono); --btn-fs: 0.78rem; --btn-tracking: var(--tracking-mono-lg); --btn-weight: 600; --btn-bg-primary: var(--accent); --btn-fg-primary: var(--bg); --btn-bg-ghost: transparent; --btn-fg-ghost: var(--text); --btn-border-ghost: 1px solid var(--border-hard); } /* ============================================================================ NARROW-VIEWPORT SAFETY NET Universal floor for every page so a Galaxy Z Flip 6 cover screen (~344x882) never produces horizontal scroll, broken images, or off-canvas content. Per-page CSS can still override; this is the floor. ============================================================================ */ html, body { max-width: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* overflow-x:clip only at narrow viewports. Setting it at desktop scope broke position:sticky scroll-pinned animations on the homepage because it makes a containing block and changes the sticky sibling's reference frame. Reverting to mobile-only -- desktop never had the horizontal-scroll problem the safety net was created for. */ @media (max-width: 540px) { html, body { overflow-x: clip; } } /* ============================================================================ FORGE GREEN ALWAYS Brand-color discipline. Every dot, every accent, every "color variant" the marketing surface uses resolves to the Forge lime palette. This is the single source of truth -- if a page has its own !important on a dot color, it must explicitly be one of the four lime variants below. ============================================================================ */ :root { --lime-bright: #d3ff63; --lime: #c4f43b; --lime-mid: #aedb2f; --lime-deep: #8ab31b; } /* Footer + brand accent dots (used in homepage marquee, footer product links) */ .dot-accent, .dot-blue, .dot-ember, .dot-cyan, .dot-purple, .dot-white, .dot-green, .dot-shield, .dot-gold, .pmi-dot, .pmi-dot.blue, .pmi-dot.ember, .pmi-dot.cyan, .pmi-dot.purple, .pmi-dot.green, .pmi-dot.gold, .badge-dot, .badge-dot.dot-green, .badge-dot.dot-blue, .badge-dot.dot-ember, .badge-dot.dot-cyan, .badge-dot.dot-purple, .badge-dot.dot-shield, .prod-dot, .prod-dot.dot-accent, .prod-dot.dot-blue, .prod-dot.dot-ember, .prod-dot.dot-cyan, .prod-dot.dot-purple, .ft-product-dot, .ft-product-dot.dot-accent, .ft-product-dot.dot-blue, .ft-product-dot.dot-ember, .ft-product-dot.dot-cyan, .ft-product-dot.dot-purple, .ft-product-dot.dot-white { background: var(--lime) !important; box-shadow: 0 0 8px rgba(196,244,59,0.55) !important; opacity: 1 !important; } /* Brighter lime for the hero "primary" pulse dot */ .hero-ecosystem-badge .dot, .hero-badge .dot { background: var(--lime) !important; box-shadow: 0 0 12px rgba(196,244,59,0.85) !important; } /* Per-page suite-dot strips (voice.html, partners.html) - five greens with subtle tonal variation so the dots remain readable as five distinct pips without breaking brand. */ .hero-suite-dots span, .pt-suite-dots span { background: var(--lime) !important; box-shadow: 0 0 8px rgba(196,244,59,0.65) !important; } .hero-suite-dots span:nth-child(1), .pt-suite-dots span:nth-child(1) { background: var(--lime-bright) !important; } .hero-suite-dots span:nth-child(2), .pt-suite-dots span:nth-child(2) { background: var(--lime) !important; } .hero-suite-dots span:nth-child(3), .pt-suite-dots span:nth-child(3) { background: var(--lime) !important; } .hero-suite-dots span:nth-child(4), .pt-suite-dots span:nth-child(4) { background: var(--lime-mid) !important; } .hero-suite-dots span:nth-child(5), .pt-suite-dots span:nth-child(5) { background: var(--lime-deep) !important; } img, video, iframe, svg { max-width: 100%; height: auto; } pre, code, kbd, samp { white-space: pre-wrap; word-break: break-word; } @media (max-width: 480px) { /* Anything fixed-width over the viewport gets neutralized */ *, *::before, *::after { max-width: 100vw; } /* Long words wrap instead of forcing horizontal scroll */ h1, h2, h3, h4, p, li, td, span { overflow-wrap: anywhere; word-wrap: break-word; } /* Default desktop side-padding tightened */ body { font-size: 15px; } } /* Sub-iPhone-SE (Z Flip cover, Galaxy A series) */ @media (max-width: 380px) { body { font-size: 14px; } }