/* ============================================================= v2.css — Marketing-v2-aligned styling for the app preview. Activated by adding the `v2` class to a container element: - In app.html the class is on (set by ?v2=1 URL param, settings toggle, or hard-coded as default). - In resources.html the class is on the iPhone preview container (.iphone) so v2 styling only affects the preview, not the surrounding Manager UI. All selectors are scoped to `.v2 …` so default styling outside the activation point stays untouched. Source of truth for tokens: public/marketing-v2/marketing.css ============================================================= */ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Jost:wght@400;500;600;700&display=swap'); .v2 { /* Color palette (mirrors marketing-v2 :root) */ --sg-orange: #FF882F; --sg-orange-deep: #C85E10; --sg-blue: #00BBE8; --sg-dt: #2B4051; --sg-bg: #F4F4F4; --sg-panel: #F5F7F9; --sg-ink: #111111; --sg-body: #333333; --sg-muted: #475569; --sg-quiet: #94A3B8; --sg-line: #E5E5E5; --sg-line-strong: #CBD5E1; --sg-success: #2E8B4A; --sg-success-deep: #1F6B36; --sg-danger: #D32F2F; /* Font tokens */ --sg-font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; --sg-font-display: 'Manrope', system-ui, sans-serif; --sg-font-logo: 'Jost', 'Futura PT', 'Futura', 'Avenir Next', sans-serif; font-family: var(--sg-font-body); color: var(--sg-ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Make EVERY descendant use Manrope by default. Specific components below may set heavier weights or display font, but all inherit the family. */ .v2 *:not(.material-icons-outlined):not(.material-icons):not(.material-symbols-outlined) { font-family: var(--sg-font-body); } /* ---------- Headings ---------- */ .v2 h1, .v2 h2, .v2 h3, .v2 h4, .v2 .topic-h, .v2 .resource-heading { font-family: var(--sg-font-display); font-weight: 800; letter-spacing: -0.02em; color: var(--sg-ink); text-wrap: balance; } /* Section heading inside the topic content area — keep prominent but trim vertical space so it doesn't dominate the page. */ .v2 main h2, .v2 main h3, .v2 .resource-heading { font-size: 26px; line-height: 1.15; margin: 8px 0 12px; } /* ---------- Body text ---------- */ .v2 .resource-text { color: var(--sg-body); font-family: var(--sg-font-body); } .v2 .resource-text p { font-size: 16px; line-height: 1.55; color: var(--sg-body); text-wrap: pretty; margin: 10px 0; } .v2 .resource-text strong { color: var(--sg-ink); font-weight: 700; } /* ---------- Image captions ---------- */ .v2 .image-caption, .v2 figcaption { font-family: var(--sg-font-body); font-size: 13px; color: var(--sg-muted); line-height: 1.45; font-style: normal; margin-top: 8px; } /* ---------- Bulleted variants (checkmark / arrows) — keep glyphs but adjust spacing ---------- */ .v2 .resource-text ul.bullet-check li, .v2 .resource-text ul.bullet-arrows li { font-size: 16px; line-height: 1.5; } /* ---------- Tables (oil-color comparison style) ---------- */ .v2 .resource-text table td { font-size: 15.5px; line-height: 1.5; color: var(--sg-body); } .v2 .resource-text table tr + tr td { border-top: 1px solid var(--sg-line); } /* ---------- Continue / Previous buttons (.button.button-next / .button-prev) Keep the app's existing colors (CONTINUE green, PREVIOUS dark slate) — v2 only adjusts typography, rounding, and padding for a marketing feel. */ .v2 button.button, .v2 button.button-next, .v2 button.button-prev { font-family: var(--sg-font-display); font-weight: 800; letter-spacing: 0.02em; border-radius: 12px; padding: 18px 26px; font-size: 14px; transition: filter 180ms; } .v2 button.button-next:hover, .v2 button.button-prev:hover { filter: brightness(1.06); } /* ---------- Image rounding ---------- */ .v2 main img, .v2 .resource-image img, .v2 .resource-text table td img { border-radius: 14px; } /* Smaller rounding for the table drop thumbnails (they're tiny) */ .v2 .resource-text table td img { border-radius: 10px; } /* ---------- Header (DriveTrak bar) — keep brand mark but match logo font ---------- */ .v2 .app-header-brand, .v2 .app-header h1 { font-family: var(--sg-font-logo); font-weight: 600; letter-spacing: -0.005em; } /* ---------- Breadcrumb bar ---------- */ .v2 .app-breadcrumb-bar { font-family: var(--sg-font-body); font-weight: 500; letter-spacing: 0.01em; } /* ---------- Footer nav (Home/Lessons/Scheduler/Notifications) ---------- */ .v2 .app-footer-nav, .v2 .app-footer-nav .nav-label { font-family: var(--sg-font-body); font-weight: 600; font-size: 12px; letter-spacing: 0.02em; } /* ---------- Question component (inline QUESTION) ---------- Mirrors marketing-v2 .sg-qz pattern (see marketing.css line 656+): compact white-bg options that shift to green (correct) / red (wrong) border + tint after submit. Custom check / X badges in place of native radios. Feedback block uses left-border accent + tinted bg. */ .v2 .resource-question { margin: 16px 0; } .v2 .question-card { display: flex; flex-direction: column; gap: 10px; background: #fff; border: 1px solid var(--sg-line); border-radius: 16px; padding: 18px; } .v2 .question-card > p:first-child { font-family: var(--sg-font-display); font-weight: 700; font-size: 16px; color: var(--sg-ink); line-height: 1.3; letter-spacing: -0.01em; margin: 0; /* No text-wrap: balance — let the prompt use the full card width */ } /* Multiple-choice answer list. Scoped with :not(.fitb-dropdown-list) so the FITB dropdown's