/* ========================================================================== THEME — That AI Guy Promo Page ========================================================================== 1. Font (Fredoka via Google Fonts) 2. Theme tokens — light / dark (via prefers-color-scheme) 3. Global type overrides 3a. Background decorators (mobile only) 4. Hide default header 5. Promo page — global layout 6. Section: Intro (logo float + text wrap) 7. Section: Features (text left, phone + bubbles right) 8. Section: Roast (phones left, text right) 9. Section: Reviews / Slider 10. Section: Sign-off 11. Section: Download 12. Bottom navigation — Liquid Glass 13. Theme toggle button ========================================================================== */ /* ========================================================================== Imports ========================================================================== */ @import url("svg-variables.css"); @import url("stars.css"); @import url("slider.css"); @import url("reviews.css"); @import url("speech-bubbles.css"); @import url("codewall.css"); @import url("top-bg-fx.css"); @import url("iphone.css"); @import url("scissors.css"); @import url("qr.css"); /* ========================================================================== 1. Font ========================================================================== */ /* Fredoka variable (300–700) loaded via Google Fonts in HTML */ /* ========================================================================== 2. Theme tokens ========================================================================== */ :root { --font-body: 'Trebuchet MS', 'Palatino', 'Baskerville', sans-serif; --font-heading: 'Gill Sans', Verdana, Arial, sans-serif; --font-brand: 'Fredoka', Verdana, Arial, sans-serif; --font-custom1: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; --font-custom2: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; --font-custom3: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } :root { /* Colour */ --color-tg: #045ada; --color-bg: #ffffff; --color-surface: #f2f4f7; --color-border: #dde1ea; --color-text: #1d1f24; --color-text-muted: #5a6375; --color-btn-primary-bg: #a1b1ca; --color-btn-primary-text: #1d1f24; --color-btn-secondary-bg: #3e3b1b; --color-btn-secondary-text: #a1b1ca; --color-focus: #4a7fcb; --color-alert-info-bg: #eaf2ff; --color-alert-info-text: #1d3a6b; --color-alert-success-bg: #e8f9ef; --color-alert-success-text: #1a5c35; --color-alert-warning-bg: #fff8e6; --color-alert-warning-text: #6b4800; --color-alert-error-bg: #ffeaea; --color-alert-error-text: #6b1a1a; --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.08); --shadow-md: 0 4px 12px rgb(0 0 0 / 0.1); --shadow-lg: 0 8px 24px rgb(0 0 0 / 0.14); /* Stars */ --color-star-active: #a1b1ca; --color-star-inactive: #5a6375; /* Navigation */ --nav-glass-bg: rgba(255, 255, 255, 0.40); --nav-glass-border: rgba(255, 255, 255, 0.65); --nav-glass-shadow: rgba(0, 0, 0, 0.14); --nav-glass-highlight: rgba(255, 255, 255, 0.85); --nav-active-bg: rgba(255, 255, 255, 0.45); --nav-active-glow: rgba(200, 220, 255, 0.7); --nav-text: #1d1f24; --toggle-bg: rgba(0, 0, 0, 0.08); --toggle-border: rgba(0, 0, 0, 0.12); --text-gradient: radial-gradient(circle at 100% 30%, rgba(22, 65, 255, 0.8), rgba(31, 81, 196, 0.2) 80%), radial-gradient(circle at 100% 40%, rgba(20, 114, 255, 0.8), rgba(60, 190, 246, 0.1) 50%), radial-gradient(circle at 55% 300%, rgba(20,25,250,.87), rgba(70, 155, 230, 0.5) 80%), radial-gradient(circle at 50% 50%, rgba(22, 5, 119, 0.87), rgba(25, 36, 111, 0.5) 80%), radial-gradient(circle at 20% 100%, rgba(71, 175, 240, 0.95), rgba(200,222,255,.70) 90%); } @media (prefers-color-scheme: dark) { :root { /* Colour */ --color-bg: #0b0d10; --color-tg: #3a7abf; --color-surface: #1a1d28; --color-border: #2c3044; --color-text: #a1b1ca; --color-text-muted: #6b7a94; --color-btn-primary-bg: #1d1f24; --color-btn-primary-text: #a1b1ca; --color-btn-secondary-bg: #ebe6b7; --color-btn-secondary-text: #1d1f24; --color-focus: #7aaff0; --color-alert-info-bg: #1a2540; --color-alert-info-text: #90b8f0; --color-alert-success-bg: #152a1e; --color-alert-success-text: #7fcfa0; --color-alert-warning-bg: #2a2005; --color-alert-warning-text: #d4a845; --color-alert-error-bg: #2a0f0f; --color-alert-error-text: #d48080; --shadow-sm: 0 1px 3px rgb(0 0 0 / 0.3); --shadow-md: 0 4px 12px rgb(0 0 0 / 0.4); --shadow-lg: 0 8px 24px rgb(0 0 0 / 0.5); /* Stars */ --color-star-active: #a1b1ca; --color-star-inactive: #6b7a94; /* Navigation */ --nav-glass-bg: rgba(15, 18, 28, 0.65); --nav-glass-border: rgba(255, 255, 255, 0.12); --nav-glass-shadow: rgba(0, 0, 0, 0.55); --nav-glass-highlight: rgba(255, 255, 255, 0.10); --nav-active-bg: rgba(255, 255, 255, 0.14); --nav-active-glow: rgba(80, 140, 255, 0.50); --nav-text: #a1b1ca; --toggle-bg: rgba(255, 255, 255, 0.10); --toggle-border: rgba(255, 255, 255, 0.15); --text-gradient: radial-gradient(circle at 100% 30%, rgba(100, 150, 255, 0.95), rgba(150, 190, 255, 0.40) 80%), radial-gradient(circle at 100% 40%, rgba(80, 180, 255, 0.90), rgba(140, 220, 255, 0.30) 50%), radial-gradient(circle at 55% 300%, rgba(90, 120, 255, 0.90), rgba(120, 180, 255, 0.50) 80%), radial-gradient(circle at 50% 50%, rgba(140, 80, 255, 0.85), rgba(170, 140, 255, 0.50) 80%), radial-gradient(circle at 20% 100%, rgba(100, 210, 255, 0.95), rgba(200, 235, 255, 0.80) 90%); } } /* ========================================================================== 3. Global type overrides ========================================================================== */ html { background-color: var(--color-bg); color: var(--color-text); transition: background-color 0.3s ease, color 0.3s ease; font-family: var(--font-body); letter-spacing: var(--letter-space); line-height: var(--line-height-body); font-weight: var(--font-weight-body); } /* Mobile: fixed font sizes — base for all inherited elements */ body { font-size: var(--font-size-lg); /* Top padding creates the stage for the fixed logo circle peeking from top */ padding-top: 5rem; /* Extra bottom padding so content clears the fixed nav */ padding-bottom: calc(14rem + env(safe-area-inset-bottom, 0px)); } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--font-weight-heading); line-height: var(--line-height-heading); } h1 { font-size: var(--font-size-xl); } h2, h3, h4 { font-size: var(--font-size-lg); } h5, h6 { font-size: var(--font-size-base); } p { font-size: var(--font-size-base); font-weight: var(--font-weight-body); margin: 0; } /* Desktop: fluid font sizes — scale from mobile base → proportional max at 1280px. Formula: clamp(mobile-rem, linear-interp(768px→1280px), max-rem) Linear form: calc(b + m*vw) avoids mixed rem/px division in calc. Exceptions (badges, reviews, stars) are pinned in their own stylesheets. */ @media (width >= 76.8rem) { body { /* 1.2rem → 2rem */ font-size: clamp(var(--font-size-base), -1.77rem + 3.9vw, var(--font-size-lg)); } h1 { /* 1.5rem → 2.5rem */ font-size: clamp(var(--font-size-xl), -1.77rem + 3.9vw, var(--font-size-2xl)); } h2, h3, h4 { /* 1.333rem → 2.2rem */ font-size: clamp(var(--font-size-base), -1.77rem + 3.9vw, var(--font-size-xl)); } h5, h6 { /* 1.25rem → 2rem */ font-size: clamp(var(--font-size-base), -1.77rem + 3.9vw, var(--font-size-lg)); } p { /* 1.2rem → 2rem */ font-size: clamp(var(--font-size-base), -1.77rem + 3.9vw, var(--font-size-lg)); } } .promo-text p { max-width: none; /* override global.css 65ch prose cap */ } .promo-text p + p { margin-top: 3rem; } .promo-text p span { background: var(--text-gradient); background-clip: text; color: transparent; font-family: var(--font-custom1); font-size: 110%; letter-spacing: var(--letter-space-sm); line-height: 1; mix-blend-mode: plus-lighter; } .promo-text span > strong { font-family: var(--font-custom2); font-size: 130%; letter-spacing: 0.05rem; } .promo-text span > strong > span { font-size: 120%; font-family: var(--font-custom3); } .promo-text em { background-image: var(--thataiguySVG); background-position: 0 0; background-repeat: no-repeat; background-size: contain; color: var(--color-bg); display: inline-block; font-size: 0; height: 3.5rem; margin-bottom: -2.5rem; position: relative; top: -2.5rem; width: 7.5rem; } .promo-text em.taig-lg { height: 7rem; margin-bottom: -3.3rem; top: -3.3rem; width: 15rem; } .promo-text ul, .promo-ksps ul { filter: brightness(0.6); list-style: none; } @media (prefers-color-scheme: dark) { .promo-text ul, .promo-ksps ul { filter: brightness(1); } } .promo-ksps ul li { margin-bottom: 0.33em; letter-spacing: var(--letter-space-sm); line-height: var(--line-height-body); font-size: var(--font-size-base); } /* h1 in promo-signature: visually matches the old