/* ============================================================ template-03-skincare-cool — Aria Skincare — Cool Clinical Niche: Skincare Per-template theme override. AUTO-GENERATED by scaffold-template.mjs from seed.json — DO NOT hand-edit (changes will be overwritten on next scaffold run; edit seed.brand.palette / brand.fonts / variantAxes.stylePack instead). Loaded AFTER all design-system stylesheets per the README cascade order: reset.css -> fonts.css -> base.css -> components.css -> utilities.css -> THIS FILE. Banned: rewriting component classes, adding new utilities, hex literals outside :root. ============================================================ */ /* === STANZA A — canonical 12-slot palette (sourced from seed.brand.palette) === * B14.1 expanded from 11 to 12 slots: --color-on-primary is the contrast text * color for surfaces painted with --color-primary (.btn-primary, .badge-primary, * .skip-link, .status-pill-active, etc.). Defaults to #FFFFFF on dark primaries * (luminance < 0.5) and #1A1A1A on the rare light primary. seed.brand.palette. * on_primary overrides the auto-derived value when needed. */ :root { --color-primary: #336A6F; --color-primary-hover: #2F6367; --color-on-primary: #FFFFFF; --color-accent: #E8B4B8; --color-accent-hover: #D69499; --color-bg: #F7FAFA; --color-bg-elevated: #FFFFFF; --color-bg-subtle: #EDF3F3; --color-text: #1F2E30; --color-text-secondary: #4A5C5F; --color-text-tertiary: #7A8B8E; --color-border: #DDE6E7; } /* === STANZA B — font family pair (sourced from seed.brand.fonts) === */ :root { --font-display: 'DM Serif Display', Georgia, serif; --font-body: 'DM Sans', Georgia, serif; /* Density default — medium (Style Pack admin toggle can override at runtime) */ --density: 1; } /* === STANZA C — style pack default activation (sourced from seed.variantAxes.stylePack) === * Canonical [data-style-pack="minimal"] block lives in _design-system/base.css — * this file documents which style-pack this template opts into. MfstApp.variant.applyToHtml() * writes data-style-pack="minimal" on from variantAxes (scripts-tail.html * partial) before first paint, so all base.css [data-style-pack="minimal"] * rules activate at load time without flash. Valid enum: soft | bold | minimal | editorial. */ /* === Per-template decorative extras ============================ */ /* --- Hero readability fix (contrast P1) --------------------------- * variantAxes.heroLayout = "fullbleed" makes app.js write * data-hero-layout="fullbleed" on , which activates the base.css * rule that paints hero text white (--color-bg-elevated) for an * image-backed hero with a dark scrim. This template's hero markup is * the LIGHT split layout (.hero-warm + .hero-split-50) with NO * .hero__media-bg image and NO dark scrim — so the white heading + * subtext rendered nearly invisible on the pale --color-bg surface. * base.css explicitly invites a theme.css override here, so we restore * the brand dark text colors on the light surface: * #1F2E30 on #F7FAFA ≈ 13.6:1 (heading large-text AA needs ≥3:1) * #4A5C5F on #F7FAFA ≈ 7.1:1 (body text AA needs ≥4.5:1) * Both comfortably pass WCAG AA. */ :root[data-hero-layout="fullbleed"] .hero { color: var(--color-text); } :root[data-hero-layout="fullbleed"] .hero .hero-title { color: var(--color-text); } :root[data-hero-layout="fullbleed"] .hero .hero-subtitle { color: var(--color-text-secondary); opacity: 1; } /* Alpine x-cloak FOUC guard — mirror of canonical _design-system/base.css rule * for the safety-net case where a future variant customizes its base cascade. */ [x-cloak] { display: none !important; } /* Hero contrast hard-fix (round 5, browser-verified) — fullbleed flag set but hero bg is LIGHT */ :root[data-hero-layout="fullbleed"] .hero, :root[data-hero-layout="fullbleed"] .hero .hero-title { color: var(--color-text) !important; } :root[data-hero-layout="fullbleed"] .hero .hero-subtitle { color: var(--color-text-secondary) !important; opacity: 1 !important; }