/* ========================================================================== theme.css — LP color theme layer Source of truth: "Template colors.pdf" (designer spec) HOW TO SWITCH THEME ------------------- Set the attribute on : Available: green (default) | purple | gold | blue | red | pink | platinum | orange NOTES ----- * This file must load AFTER step2-template.css so it wins the cascade. * --t-main-rgb holds a space-separated RGB triplet so opacity variants (button shadow @50%, doctor card bg @10%) can derive from the main color. * Universal tokens (--u-*) are identical across all themes per the spec. ========================================================================== */ /* ---------- Universal: identical in every theme ---------- */ :root { --u-header-text: #1F2937; /* spec left the value blank; keeps template's existing heading color */ --u-body-text: #828282; --u-btn-text: #FFFFFF; --u-disclaimer: #545454; --u-footer-body: #CECEC8; --u-footer-menu-hover: #FFFFFF; --u-white-bg: #FFFFFF; --u-red-card: #FFE9E8; --u-red-card-border: #FFA09B; --u-green-card: #F9FFF7; --u-green-card-border: #95BF83; --u-review-card-bg: #FAFAFA; --u-review-card-border: #E9E9E9; --u-compare-card: #F4F4F4; --u-dark-header: #FBFAFF; --u-dark-body: #DDDDDD; } /* ---------- GREEN (default) ---------- */ :root, [data-theme="green"] { --t-main: #0F8A5F; --t-main-rgb: 15 138 95; --t-btn: #0F8A5F; --t-btn-hover: #08704C; --t-subtle-bg: #F5FBF8; --t-marquee-bg: #0B5E46; --t-border: #D8E9E1; --t-dark-bg: #032119; --t-dark-highlight: #18CC8D; --t-faq-hover: #E3F4EC; --t-footer-bg: #021611; --t-footer-btn-bg: #04382B; --t-footer-btn-border:#0F8A5F; --t-footer-btn-text: #14AD77; --t-footer-header: #0F8A5F; } /* ---------- PURPLE ---------- */ [data-theme="purple"] { --t-main: #5B32C9; --t-main-rgb: 91 50 201; --t-btn: #5B32C9; --t-btn-hover: #4B29AA; --t-subtle-bg: #FBFAFF; --t-marquee-bg: #391C89; --t-border: #D6D6FF; --t-dark-bg: #120826; --t-dark-highlight: #9068FF; --t-faq-hover: #F0F3FA; --t-footer-bg: #09001C; --t-footer-btn-bg: #19053D; --t-footer-btn-border:#5B32C9; --t-footer-btn-text: #825BEF; --t-footer-header: #5B32C9; } /* ---------- GOLD ---------- */ [data-theme="gold"] { --t-main: #D4B46A; --t-main-rgb: 212 180 106; --t-btn: #D4B46A; --t-btn-hover: #C4A660; --t-subtle-bg: #FFFCF7; --t-marquee-bg: #A88437; --t-border: #FFF4E0; --t-dark-bg: #211703; --t-dark-highlight: #FFE9B7; --t-faq-hover: #FFF9ED; --t-footer-bg: #211700; --t-footer-btn-bg: #382805; --t-footer-btn-border:#AA8D49; --t-footer-btn-text: #D4B46A; --t-footer-header: #D4B46A; } /* ---------- BLUE ---------- */ [data-theme="blue"] { --t-main: #2F7FD8; --t-main-rgb: 47 127 216; --t-btn: #2F7FD8; --t-btn-hover: #286BB7; --t-subtle-bg: #F9FBFF; --t-marquee-bg: #205A9B; --t-border: #D6E9FF; --t-dark-bg: #061221; --t-dark-highlight: #7FBBFF; --t-faq-hover: #EAF4FF; --t-footer-bg: #010B16; --t-footer-btn-bg: #041E3D; --t-footer-btn-border:#2160A8; --t-footer-btn-text: #2F7FD8; --t-footer-header: #2F7FD8; } /* ---------- RED ---------- */ [data-theme="red"] { --t-main: #C84A4A; --t-main-rgb: 200 74 74; --t-btn: #C84A4A; --t-btn-hover: #AF3F3F; --t-subtle-bg: #FFF4F4; --t-marquee-bg: #8E2F2F; --t-border: #FFD3D3; --t-dark-bg: #540909; --t-dark-highlight: #FF8484; --t-faq-hover: #FFEAEA; --t-footer-bg: #1E060F; --t-footer-btn-bg: #470707; --t-footer-btn-border:#C84A4A; --t-footer-btn-text: #FC7171; --t-footer-header: #C84A4A; } /* ---------- PINK ---------- */ [data-theme="pink"] { --t-main: #D7A5B6; --t-main-rgb: 215 165 182; --t-btn: #D7A5B6; --t-btn-hover: #BF91A0; --t-subtle-bg: #FFF7F9; --t-marquee-bg: #AD7487; --t-border: #FFE5EE; --t-dark-bg: #3A091A; --t-dark-highlight: #E2AEC0; --t-faq-hover: #FFEDF3; --t-footer-bg: #171214; --t-footer-btn-bg: #2D1B22; --t-footer-btn-border:#A8687D; --t-footer-btn-text: #D7A5B6; --t-footer-header: #EA8FAD; } /* ---------- PLATINUM ---------- */ [data-theme="platinum"] { --t-main: #B5B1AA; --t-main-rgb: 181 177 170; --t-btn: #B5B1AA; --t-btn-hover: #AAA7A2; --t-subtle-bg: #FCFCFB; --t-marquee-bg: #7C7872; --t-border: #ECEAE7; --t-dark-bg: #242321; --t-dark-highlight: #B5B1AA; --t-faq-hover: #F6F5F3; --t-footer-bg: #141413; --t-footer-btn-bg: #282726; --t-footer-btn-border:#72706D; --t-footer-btn-text: #B5B2AF; --t-footer-header: #B5B1AA; } /* ---------- ORANGE ---------- */ [data-theme="orange"] { --t-main: #D89A63; --t-main-rgb: 216 154 99; --t-btn: #D89A63; --t-btn-hover: #C3844D; --t-subtle-bg: #FEFBF8; --t-marquee-bg: #9A6A3E; --t-border: #F2E8DD; --t-dark-bg: #2C2016; --t-dark-highlight: #EDC59A; --t-faq-hover: #FCF3EB; --t-footer-bg: #18110B; --t-footer-btn-bg: #3D2B1A; --t-footer-btn-border:#B57E4F; --t-footer-btn-text: #E7BC8D; --t-footer-header: #D89A63; } /* ========================================================================== Derived tokens — computed from the active theme, never hand-edited per theme ========================================================================== */ :root { /* Doctor / expert quote card: main color @ 10% opacity (spec) */ --t-doctor-card-bg: rgb(var(--t-main-rgb) / 0.10); /* Primary button shadow: main color @ 50%, 0 distance, 20 blur (spec) */ --t-btn-shadow: 0 0 20px rgb(var(--t-main-rgb) / 0.5); --t-btn-shadow-hover: 0 0 30px rgb(var(--t-main-rgb) / 0.6); /* Secondary button: transparent bg, main-colored border + text, fills with main color on hover. Spec lists hover text as the main color for every non-green theme, which would render the label invisible against the main-color fill, so button text white is used instead. */ --t-sec-btn-bg: transparent; --t-sec-btn-border: var(--t-main); --t-sec-btn-text: var(--t-main); --t-sec-btn-hover-bg: var(--t-main); --t-sec-btn-hover-text: var(--u-btn-text); } /* ========================================================================== Bridge — remaps the template's pre-existing --brand* variables onto the theme tokens, so every existing var() consumer follows the active theme without being touched individually. ========================================================================== */ :root { --brand: var(--t-main); --brand-hover: var(--t-btn-hover); --brand-light: var(--t-subtle-bg); --brand-banner-bg: var(--t-subtle-bg); --brand-quote-bg: var(--t-doctor-card-bg); --brand-border-color: var(--t-border); --brand-fore-color: var(--t-footer-btn-text); --border-soft: var(--t-border); --page-light: var(--u-dark-header); --page-dark: var(--t-dark-bg); --text-brand-light: var(--t-dark-highlight); --text-heading: var(--u-header-text); --text-body: var(--u-body-text); --hvr-shadow: var(--t-btn-shadow-hover); --shadow: var(--t-btn-shadow); } /* ========================================================================== FAQ hover — the template had no faq hover background; spec defines one. ========================================================================== */ .faq-item__question:hover { background-color: var(--t-faq-hover); }