/* themes.css — Expressive moods that reshape the entire site feel. Triggered by data-mood / data-density / data-typeset on . */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=JetBrains+Mono:wght@400;500;600&display=swap'); /* ---------- DENSITY ---------- */ html[data-density="airy"] { --section-pad-y: 144px; --hero-pad-y: 200px; --gap: 32px; --type-scale: 1.08; } html[data-density="standard"] { --section-pad-y: 96px; --hero-pad-y: 168px; --gap: 24px; --type-scale: 1; } html[data-density="compact"] { --section-pad-y: 64px; --hero-pad-y: 120px; --gap: 16px; --type-scale: 0.88; } html[data-density] section { padding-top: var(--section-pad-y); padding-bottom: var(--section-pad-y); } html[data-density] .hero { padding-top: var(--hero-pad-y); padding-bottom: calc(var(--section-pad-y) + 24px); } html[data-density] .two-col, html[data-density] .bento, html[data-density] .steps, html[data-density] .tgrid { gap: var(--gap); } html[data-density] h1 { font-size: calc(72px * var(--type-scale)); } html[data-density] h2 { font-size: calc(56px * var(--type-scale)); } html[data-density] .hero p.lead { font-size: calc(20px * var(--type-scale)); } /* ---------- TYPESET ---------- */ html[data-typeset="editorial"] body { font-family: 'Inter', sans-serif; } html[data-typeset="editorial"] h1, html[data-typeset="editorial"] h2, html[data-typeset="editorial"] h3, html[data-typeset="editorial"] .step-name, html[data-typeset="editorial"] .case h3, html[data-typeset="editorial"] .feature h3 { font-family: 'Fraunces', 'Times New Roman', serif !important; font-weight: 400 !important; letter-spacing: -0.02em !important; font-variation-settings: "opsz" 96, "SOFT" 100; } html[data-typeset="editorial"] h1 em, html[data-typeset="editorial"] h2 em { font-style: italic; font-weight: 500; } html[data-typeset="editorial"] .eyebrow { font-family: 'Inter', monospace; text-transform: uppercase; letter-spacing: 0.12em; font-size: 11px; } html[data-typeset="mono"] body, html[data-typeset="mono"] h1, html[data-typeset="mono"] h2, html[data-typeset="mono"] h3, html[data-typeset="mono"] .nav-links a, html[data-typeset="mono"] .btn, html[data-typeset="mono"] .step-name, html[data-typeset="mono"] .case h3, html[data-typeset="mono"] .feature h3, html[data-typeset="mono"] .card h3, html[data-typeset="mono"] .metric .num { font-family: 'JetBrains Mono', 'Geist Mono', monospace !important; } html[data-typeset="mono"] h1 { letter-spacing: -0.04em !important; font-weight: 500 !important; } html[data-typeset="mono"] h2 { letter-spacing: -0.04em !important; font-weight: 500 !important; } html[data-typeset="mono"] .nav-links a { text-transform: lowercase; font-size: 13px; } /* ---------- MOOD: STUDIO (default) — no overrides ---------- */ /* ---------- MOOD: EDITORIAL — warm cream + serif soul ---------- */ html[data-mood="editorial"] { --bg: #F5EFE6; --bg-tint: #EDE5D6; --bg-line: #E0D6C2; --dark: #2A2419; --dark-2: #1F1A12; --dark-3: #2F2920; --black: #15110A; --text-light: #FAF6EE; --accent: #B5552A; } html[data-mood="editorial"] body { background: var(--bg); color: var(--dark); } html[data-mood="editorial"] .header { background: rgba(245, 239, 230, 0.85); } html[data-mood="editorial"] section.dark { background: #1A1610; color: #FAF6EE; } html[data-mood="editorial"] .problem-list, html[data-mood="editorial"] .solution-list, html[data-mood="editorial"] .card, html[data-mood="editorial"] .step, html[data-mood="editorial"] .case, html[data-mood="editorial"] .faq-item { background: #EDE5D6; border-color: #E0D6C2; } html[data-mood="editorial"] .chat-bubble, html[data-mood="editorial"] .chat-input, html[data-mood="editorial"] .workflow-item, html[data-mood="editorial"] .crm-step, html[data-mood="editorial"] .tl-row, html[data-mood="editorial"] .gen-card, html[data-mood="editorial"] .gen-pills > div, html[data-mood="editorial"] .case-image { background: #FAF6EE; border-color: #E0D6C2; } html[data-mood="editorial"] .eyebrow { background: #EDE5D6; border-color: #E0D6C2; color: #B5552A; } html[data-mood="editorial"] .eyebrow.dark { background: #2F2920; border-color: #2F2920; color: #F5EFE6; } html[data-mood="editorial"] .btn-grey { background: #E0D6C2; border-color: #E0D6C2; } html[data-mood="editorial"] .btn-dark { background: #2A2419; } html[data-mood="editorial"] .cta-card { background: #2A2419; } html[data-mood="editorial"] .footer { background: #1A1610; } html[data-mood="editorial"] .feature { border-color: rgba(255,255,255,0.10); } html[data-mood="editorial"] .t { background: #2F2920; border-color: rgba(245,239,230,0.10); } /* ---------- MOOD: BRUTALIST — sharp corners, heavy borders, no rounding ---------- */ html[data-mood="brutalist"] { --bg: #FFFFFF; --bg-tint: #FFFFFF; --bg-line: #000000; --dark: #000000; --dark-2: #000000; --dark-3: #111111; --black: #000000; --accent: #FF3300; } html[data-mood="brutalist"] body { background: #FFFFFF; color: #000000; } html[data-mood="brutalist"] * { border-radius: 0 !important; } html[data-mood="brutalist"] .header { background: #FFFFFF; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 2px solid #000; } html[data-mood="brutalist"] section.dark { background: #000000; } html[data-mood="brutalist"] .problem-list, html[data-mood="brutalist"] .solution-list, html[data-mood="brutalist"] .card, html[data-mood="brutalist"] .step, html[data-mood="brutalist"] .case, html[data-mood="brutalist"] .faq-item, html[data-mood="brutalist"] .feature, html[data-mood="brutalist"] .t { background: #FFFFFF !important; border: 2px solid #000000 !important; box-shadow: 6px 6px 0 #000; } html[data-mood="brutalist"] section.dark .feature, html[data-mood="brutalist"] section.dark .t { background: #000 !important; border-color: #FFF !important; box-shadow: 6px 6px 0 var(--accent); color: #FFF; } html[data-mood="brutalist"] section.dark .feature h3, html[data-mood="brutalist"] section.dark .t blockquote, html[data-mood="brutalist"] section.dark .who-name { color: #FFF; } html[data-mood="brutalist"] .eyebrow { background: #FFF; border: 2px solid #000; color: #000; } html[data-mood="brutalist"] .eyebrow.dark { background: #000; color: #FFF; border-color: #FFF; } html[data-mood="brutalist"] .btn { border: 2px solid #000 !important; box-shadow: 4px 4px 0 #000; } html[data-mood="brutalist"] .btn-grey { background: var(--accent); color: #FFF; } html[data-mood="brutalist"] .btn-dark { background: #000; box-shadow: 4px 4px 0 var(--accent); } html[data-mood="brutalist"] .chat-bubble, html[data-mood="brutalist"] .chat-input, html[data-mood="brutalist"] .workflow-item, html[data-mood="brutalist"] .crm-step, html[data-mood="brutalist"] .tl-row, html[data-mood="brutalist"] .gen-card, html[data-mood="brutalist"] .gen-pills > div { border: 2px solid #000 !important; box-shadow: 3px 3px 0 #000; } html[data-mood="brutalist"] .step:nth-child(1), html[data-mood="brutalist"] .step:nth-child(3) { transform: none !important; } html[data-mood="brutalist"] .feature-icon { color: var(--accent) !important; } html[data-mood="brutalist"] .cta-card { background: var(--accent); border: 2px solid #000; } html[data-mood="brutalist"] .cta-card h2, html[data-mood="brutalist"] .cta-card p { color: #000; } html[data-mood="brutalist"] .cta-card .eyebrow.dark { background: #000; color: #FFF; } html[data-mood="brutalist"] .footer { background: #000; border-top: 6px solid var(--accent); } /* ---------- MOOD: MIDNIGHT — full dark with neon glow ---------- */ html[data-mood="midnight"] { --bg: #0A0A0F; --bg-tint: #15151E; --bg-line: #1F1F2E; --dark: #ECECF5; --dark-2: #FFFFFF; --dark-3: #232336; --black: #FFFFFF; --text-light: #0A0A0F; --accent: #00FFA3; } html[data-mood="midnight"] body { background: var(--bg); color: var(--dark); } html[data-mood="midnight"] .header { background: rgba(10, 10, 15, 0.75); } html[data-mood="midnight"] section.dark { background: #050507; } html[data-mood="midnight"] .problem-list, html[data-mood="midnight"] .solution-list, html[data-mood="midnight"] .card, html[data-mood="midnight"] .step, html[data-mood="midnight"] .case, html[data-mood="midnight"] .faq-item { background: #15151E; border-color: #1F1F2E; color: var(--dark); } html[data-mood="midnight"] .chat-bubble, html[data-mood="midnight"] .chat-input, html[data-mood="midnight"] .workflow-item, html[data-mood="midnight"] .crm-step, html[data-mood="midnight"] .tl-row, html[data-mood="midnight"] .gen-card, html[data-mood="midnight"] .gen-pills > div { background: #0A0A0F; border-color: #1F1F2E; color: var(--dark); } html[data-mood="midnight"] .case-image { background: #0A0A0F; } html[data-mood="midnight"] .eyebrow { background: #15151E; border-color: #1F1F2E; color: var(--accent); } html[data-mood="midnight"] .eyebrow.dark { background: #1F1F2E; border-color: var(--accent); color: var(--accent); } html[data-mood="midnight"] .btn-grey { background: #232336; color: var(--dark); border-color: #2A2A40; } html[data-mood="midnight"] .btn-dark { background: var(--accent); color: #050507; box-shadow: 0 0 32px rgba(0, 255, 163, 0.4); } html[data-mood="midnight"] .btn-dark .avatar-pill { filter: grayscale(1) brightness(0.4); } html[data-mood="midnight"] .feature-icon { color: var(--accent) !important; filter: drop-shadow(0 0 8px rgba(0, 255, 163, 0.6)); } html[data-mood="midnight"] .feature { border-color: rgba(255,255,255,0.08); } html[data-mood="midnight"] .step .step-num, html[data-mood="midnight"] .step .step-name, html[data-mood="midnight"] .case h3, html[data-mood="midnight"] .card h3, html[data-mood="midnight"] .metric .num { color: var(--dark) !important; } html[data-mood="midnight"] .case-eyebrow { background: #15151E; border-color: #1F1F2E; color: var(--accent); } html[data-mood="midnight"] .t { background: #15151E; border-color: rgba(255,255,255,0.08); } html[data-mood="midnight"] .cta-card { background: linear-gradient(135deg, #0F0F18 0%, #1A1A2E 100%); border: 1px solid rgba(0, 255, 163, 0.2); box-shadow: 0 0 64px rgba(0, 255, 163, 0.15); } html[data-mood="midnight"] .cta-card .btn-grey { background: var(--accent); color: #050507; } html[data-mood="midnight"] .footer { background: #050507; } html[data-mood="midnight"] .solution-list .mark { background: var(--accent); } html[data-mood="midnight"] .solution-list .mark svg { stroke: #050507; } html[data-mood="midnight"] .problem-list .mark { background: #2A2A40; } html[data-mood="midnight"] .logo-marks span, html[data-mood="midnight"] .logo-text { color: var(--dark); } html[data-mood="midnight"] .logo-img:not([src*="white"]) { filter: invert(1); } html[data-mood="midnight"] .ticker-item img { filter: invert(1) brightness(2); opacity: 0.7; } /* ============================================================ THEMES MOBILE PATCH — append to the bottom of themes.css Fixes 6 bugs: specificity overrides + brutalist shadow overflow ============================================================ */ /* ---------------------------------------------------------- BUG 1 & 2 & 3: DENSITY THEME SPECIFICITY FIX Problem: `html[data-density] section` has specificity 0,1,0,1 which beats the plain `section` rules in media queries (0,0,0,1). This means density themes silently override ALL mobile padding and font-size reductions in styles.css. Fix: Re-assert the correct mobile values inside media queries using the same html[data-density] selector so specificity matches. ---------------------------------------------------------- */ @media (max-width: 960px) { html[data-density] section { padding-top: 72px; padding-bottom: 72px; } html[data-density] .hero { padding-top: 130px; padding-bottom: 80px; } html[data-density] .cta-section { padding-top: 72px; padding-bottom: 72px; } html[data-density] h1 { font-size: 48px; letter-spacing: -2px; } html[data-density] h2 { font-size: 40px; letter-spacing: -1.8px; } html[data-density] .hero p.lead { font-size: 17px; line-height: 26px; } } @media (max-width: 600px) { html[data-density] section { padding-top: 56px; padding-bottom: 56px; } html[data-density] .hero { padding-top: 110px; padding-bottom: 64px; } html[data-density] .cta-section { padding-top: 48px; padding-bottom: 48px; } html[data-density] h1 { font-size: 36px; letter-spacing: -1.6px; } html[data-density] h2 { font-size: 32px; letter-spacing: -1.4px; } html[data-density] .hero p.lead { font-size: 16px; line-height: 24px; } } @media (max-width: 400px) { html[data-density] h1 { font-size: 28px; letter-spacing: -1.2px; } html[data-density] h2 { font-size: 26px; letter-spacing: -1.1px; } } /* ---------------------------------------------------------- BUG 4: TYPESET THEME !important SPECIFICITY FIX Problem: html[data-typeset="mono"] uses !important on h1/h2 which beats every media query regardless of specificity. Mobile font scaling is completely skipped when mono is active. Fix: Match with !important inside mobile media queries. ---------------------------------------------------------- */ @media (max-width: 960px) { html[data-typeset="mono"] h1, html[data-typeset="editorial"] h1 { font-size: 48px !important; letter-spacing: -2px !important; } html[data-typeset="mono"] h2, html[data-typeset="editorial"] h2 { font-size: 40px !important; letter-spacing: -1.8px !important; } } @media (max-width: 600px) { html[data-typeset="mono"] h1, html[data-typeset="editorial"] h1 { font-size: 36px !important; letter-spacing: -1.6px !important; } html[data-typeset="mono"] h2, html[data-typeset="editorial"] h2 { font-size: 32px !important; letter-spacing: -1.4px !important; } } @media (max-width: 400px) { html[data-typeset="mono"] h1, html[data-typeset="editorial"] h1 { font-size: 28px !important; } html[data-typeset="mono"] h2, html[data-typeset="editorial"] h2 { font-size: 26px !important; } } /* ---------------------------------------------------------- BUG 5 & 6: BRUTALIST SHADOW OVERFLOW Problem: box-shadow: 6px 6px 0 #000 on every card/step/case extends 6px beyond the right edge of each element. body has overflow-x: hidden but inner scrollable containers don't, which can produce horizontal scroll in some browsers/WebViews. Fix: Reduce shadow offset on mobile so it stays safely inset. ---------------------------------------------------------- */ @media (max-width: 960px) { html[data-mood="brutalist"] .card, html[data-mood="brutalist"] .step, html[data-mood="brutalist"] .case, html[data-mood="brutalist"] .faq-item, html[data-mood="brutalist"] .feature, html[data-mood="brutalist"] .t { box-shadow: 4px 4px 0 #000 !important; } html[data-mood="brutalist"] .btn { box-shadow: 3px 3px 0 #000 !important; } } @media (max-width: 600px) { html[data-mood="brutalist"] .card, html[data-mood="brutalist"] .step, html[data-mood="brutalist"] .case, html[data-mood="brutalist"] .faq-item, html[data-mood="brutalist"] .feature, html[data-mood="brutalist"] .t { box-shadow: 3px 3px 0 #000 !important; } html[data-mood="brutalist"] .btn { box-shadow: 2px 2px 0 #000 !important; } /* Brutalist dark section cards need white shadow override */ html[data-mood="brutalist"] section.dark .feature, html[data-mood="brutalist"] section.dark .t { box-shadow: 3px 3px 0 var(--accent) !important; } }