/* ========================================================= FILE: theme-consume.css PURPOSE: Apply Theme Studio variables to common UI elements. VERSION: Phase X+22 — Tokenized footer & dropdown (theme-ready) ========================================================= */ /* ========================= THEME TOKEN LAYER (fallbacks) Components must only use these tokens. ========================= */ :root { /* Brand & primaries */ --brand: #003f47; /* Darker brand (DB: IonaBlue) */ --primary: #004f5a; /* Primary, slightly lighter */ --on_primary: #ffffff; --navbar_bg: var(--header_bg, #004f5a); --on_navbar: var(--on_header, #ffffff); /* Neutrals */ --color_bg: #ffffff; --color_surface: #f6f7f9; --color_border: #dadde2; --color_text: #0b1324; --color_text_muted: #556070; /* Accents */ --secondary: #e8eef1; --on_secondary: #0b1324; --accent: #1aa3ff; /* Chips */ --chip-bg: #e6f4ff; --chip-text: #075985; /* Radii & focus */ --radius-md: 10px; --radius-lg: 12px; --focus-ring: color-mix(in oklab, var(--primary) 20%, transparent); --focus-border: color-mix(in oklab, var(--primary) 55%, transparent); --focus-outline: color-mix(in oklab, var(--primary) 60%, transparent); /* Header / Navbar / Footer defaults */ --header_bg: var(--brand); /* header tracks brand */ --on_header: #ffffff; --navbar_bg: var(--primary); /* navbar tracks primary */ --on_navbar: var(--on_primary); --footer_bg: var(--brand); --on_footer: var(--on_primary); /* Inputs */ --field_surface: var(--color_surface); /* Search field fallbacks (over dark header) */ --search_bg: rgba(255, 255, 255, 0.16); --on_search: var(--on_primary); --search_placeholder: rgba(255, 255, 255, 0.7); --search_border: rgba(255, 255, 255, 0.35); } /* ========================================================= THEME MAPS Usage: (preferred) ========================================================= */ /* ---------- Ionablue (light) ---------- */ html[data-theme="ionablue"], :root[data-theme-id="ionablue"] { color-scheme: light; --brand: #003f47; /* DB brand */ --primary: #004f5a; /* primary */ --on_primary: #ffffff; --color_bg: #ffffff; --color_surface: #f6f7f9; --color_border: #dadde2; --color_text: #0b1324; --color_text_muted: #556070; --secondary: #e8eef1; --on_secondary: #0b1324; --accent: #1aa3ff; /* Header / Navbar / Footer */ --header_bg: var(--brand); --on_header: #ffffff; --navbar_bg: var(--primary); --on_navbar: var(--on_primary); --footer_bg: var(--brand); --on_footer: var(--on_primary); /* Search field in header: chip-style */ --search_bg: #ffffff; --on_search: var(--color_text); --search_placeholder: var(--color_text_muted); --search_border: color-mix(in oklab, var(--primary) 30%, transparent); --field_surface: var(--color_surface); } /* ---------- Deep Ocean (light) ---------- */ :root[data-theme-id="deep-ocean"] { color-scheme: light; /* Deep teal/blue palette */ --brand: #083344; /* deep ocean brand */ --primary: #0f4c5c; /* lighter than brand for nav/buttons */ --on_primary: #ffffff; --color_bg: #ffffff; --color_surface: #f3f6f8; --color_border: #d3dde3; --color_text: #0b1324; --color_text_muted: #556070; --secondary: #e8eef1; --on_secondary: #0b1324; --accent: #00a3c4; /* Header / Navbar / Footer */ --header_bg: var(--brand); --on_header: #ffffff; --navbar_bg: var(--primary); --on_navbar: var(--on_primary); --footer_bg: var(--brand); --on_footer: var(--on_primary); --search_bg: #ffffff; --on_search: var(--color_text); --search_placeholder: var(--color_text_muted); --search_border: color-mix(in oklab, var(--primary) 30%, transparent); } /* ---------- IonaBlue (dark variant id) ---------- */ :root[data-theme-id="ionablue-dark"] { /* brand/primary hues same family; dark mode colors come from html[data-theme="dark"] */ --brand: #004f5a; --primary: #004f5a; --on_primary: #ffffff; } /* ---------- Deep Ocean (dark variant id) ---------- */ :root[data-theme-id="deep-ocean-dark"] { --brand: #083344; --primary: #0f4c5c; --on_primary: #ffffff; } /* ========================================================= Footer ========================================================= */ footer { background-color: var(--footer_bg); color: var(--on_footer); padding: 2rem; text-align: center; } footer a { color: var(--on_footer); text-decoration: underline; } footer a:hover { color: var(--accent); } /* ========================================================= Account dropdown ========================================================= */ .account-dropdown { background-color: var(--primary); color: var(--on_primary); border: 1px solid var(--color_border); } .account-dropdown a { display: block; padding: 0.75rem 1rem; color: var(--on_primary); text-decoration: none; } .account-dropdown a:hover { background-color: var(--brand); /* variant: slightly darker */ color: var(--on_primary); } /* ---------- Dark ---------- */ html[data-theme="dark"] { color-scheme: dark; --brand: #004f5a; /* keep brand hue */ --primary: var(--brand); --on_primary: #ffffff; --color_bg: #0b1324; /* page background */ --color_surface: #1f2937; /* panel tone */ --color_border: #24313f; --color_text: #f3f4f6; --color_text_muted: #cbd5e1; --secondary: #111827; --on_secondary: #f3f4f6; --accent: #60a5fa; /* Header / Navbar / Footer (navbar lighter than header for separation) */ --header_bg: var(--brand); --on_header: #ffffff; --navbar_bg: color-mix(in oklab, var(--brand) 75%, white 25%); --on_navbar: #ffffff; /* Footer can remain brand for a strong base */ --footer_bg: var(--brand); --on_footer: #ffffff; /* Inputs slightly lighter than panels without changing global surface */ --field_surface: color-mix(in oklab, var(--color_surface) 82%, white 18%); /* Search field readable on dark header */ --search_bg: rgba(255, 255, 255, 0.16); --on_search: var(--on_primary); /* Increased opacity for better readability (was 0.70) */ --search_placeholder: rgba(255, 255, 255, 0.86); --search_border: rgba(255, 255, 255, 0.42); } /* Provide a color-scheme hint when not in dark */ html:not([data-theme="dark"]) { color-scheme: light; } /* ========================================================= GLOBAL BASE ========================================================= */ html, body { background: var(--color_bg); color: var(--color_text); } /* Links */ a { color: var(--primary); text-decoration-color: color-mix(in oklab, var(--primary) 50%, transparent); text-underline-offset: 2px; } a:hover { opacity: 0.9; } /* ========================================================= BUTTONS ========================================================= */ .button, .btn, .button-primary, .contact-button { background: var(--primary); color: var(--on_primary); border: 1px solid transparent; border-radius: var(--radius-md); padding: 10px 14px; cursor: pointer; } .button:hover, .btn:hover, .button-primary:hover, .contact-button:hover { background: color-mix(in oklab, var(--primary) 90%, black 10%); } .button-secondary, .btn-secondary { background: var(--secondary); color: var(--color_text); border: 1px solid var(--color_border); border-radius: var(--radius-md); padding: 10px 14px; } .button-ghost, .btn-ghost, .btn-outline { background: transparent; color: var(--primary); border: 1px solid var(--primary); border-radius: var(--radius-md); padding: 10px 14px; } .button-ghost:hover, .btn-ghost:hover, .btn-outline:hover { background: color-mix(in oklab, var(--primary) 10%, transparent); } /* Header/nav action buttons — dark-mode soft background only */ html[data-theme="dark"] .search-btn, html[data-theme="dark"] .nav-auth-btn, html[data-theme="dark"] .cart-btn, html[data-theme="dark"] a[onclick*="Cart.openDrawer"] { background: transparent; color: var(--on_header); border: 1px solid currentColor; border-radius: var(--radius-md); padding: 6px 10px; } /* ========================================================= FOCUS ========================================================= */ .button:focus-visible, .btn:focus-visible, a:focus-visible { outline: 2px solid var(--focus-outline); outline-offset: 2px; } /* ========================================================= SURFACES / PANELS ========================================================= */ .card, .panel, .surface, .box { background: var(--color_surface); border: 1px solid var(--color_border); border-radius: var(--radius-lg); } /* ========================================================= TEXT ========================================================= */ h1, h2, h3, h4, h5, h6 { color: var(--color_text); } .muted, .text-muted, .subtle { color: var(--color_text_muted); } /* ========================================================= CHIPS ========================================================= */ .badge, .chip, .tag { background: var(--chip-bg); color: var(--chip-text); border-radius: 999px; padding: 4px 8px; } /* ========================================================= FORMS (generic) ========================================================= */ input, select, textarea { background: var(--color_bg); color: var(--color_text); border: 1px solid var(--color_border); border-radius: 8px; padding: 8px 10px; } input::placeholder, textarea::placeholder { color: var(--color_text_muted); } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-color: var(--focus-border); box-shadow: 0 0 0 3px var(--focus-ring); } /* Utility to force panel tone */ .form-control { background: var(--color_surface) !important; } /* ========================================================= STORE BLOCKS ========================================================= */ .store-info-box { display: flex; gap: 16px; padding: 16px; background: var(--color_surface); border: 1px solid var(--color_border); border-radius: var(--radius-lg); } html[data-theme="dark"] .store-info-box { background: color-mix( in oklab, var(--color_surface) 85%, var(--color_bg) 15% ); } .store-info-image { width: 72px; height: 72px; object-fit: cover; border-radius: 10px; border: 1px solid var(--color_border); } .store-info-text h3 { margin: 0 0 6px; color: var(--color_text); } .store-info-text p { margin: 0; color: var(--color_text_muted); } /* Wrapper behind info boxes — avoid bright white in dark mode */ html[data-theme="dark"] .store-info-section-wrapper { background: var(--color_bg) !important; border: 1px solid var(--color_border); border-radius: var(--radius-lg); padding: 12px; } /* ========================================================= HEADER & NAVBAR (use tokens) ========================================================= */ .top-header-bar, .header-bar, .site-header { background: var(--header_bg, var(--primary)); color: var(--on_header, #fff); border-bottom: 1px solid color-mix(in oklab, var(--header_bg, var(--primary)) 85%, black 15%); } .store-navbar, .navbar, .site-nav, nav[role="navigation"] { background: var(--navbar_bg, var(--header_bg, #004f5a)); color: var(--on_navbar, var(--on_primary)); border-bottom: 1px solid var(--color_border); } /* Navbar links inherit nav text color */ .store-navbar a, .navbar a, .site-nav a { color: var(--on_navbar, var(--on_primary)); text-decoration: none; } .store-navbar a:hover, .navbar a:hover, .site-nav a:hover { text-decoration: underline; text-underline-offset: 2px; } /* ========================================================= CONTACT FORM (container darker than fields) ========================================================= */ .contact-form { display: flex; flex-direction: column; gap: 16px; background: color-mix( in oklab, var(--color_surface) 85%, var(--color_bg) 15% ); border: 1px solid var(--color_border); border-radius: var(--radius-lg); padding: 20px; max-width: 720px; } .contact-form label { font-weight: 600; color: var(--color_text); } .contact-form :is(input, select, textarea) { background: var(--field_surface, var(--color_surface)) !important; color: var(--color_text); border: 1px solid var(--color_border); } /* ========================================================= FAQ LIST ========================================================= */ .faq-list { list-style: none; margin: 0; padding: 0; background: var(--color_surface); border: 1px solid var(--color_border); border-radius: var(--radius-lg); } .faq-list li { padding: 12px 14px; color: var(--color_text); border-top: 1px solid var(--color_border); } .faq-list li:first-child { border-top: 0; } /* ========================================================= AUTH / CREATE ACCOUNT ========================================================= */ /* Container — slightly darker than fields (supports --container_surface) */ :is( .auth-form, form[action*="/store/create-account"], form[action*="/store/make-account"] ) { --_container_fallback: color-mix( in oklab, var(--color_surface) 85%, var(--color_bg) 15% ); background: var(--container_surface, var(--_container_fallback)); border: 1px solid var(--color_border); border-radius: var(--radius-lg); padding: 20px; } /* Fields — panel tone (or lighter via --field_surface) */ :is( .auth-form, form[action*="/store/create-account"], form[action*="/store/make-account"] ) :is(input, select, textarea) { background: var(--field_surface, var(--color_surface)) !important; color: var(--color_text); border: 1px solid var(--color_border); } /* Titles: match normal text color */ :is( .store-info-box, .store-info-text, .auth-form, form[action*="/store/make-account"], #make-account-form ) :is(h1, h2) { color: var(--color_text) !important; } /* Explicit targets (safety net for stray fields) */ #first_name, #last_name, #confirm_password, #email, #password, #contact-name, #contact-email, #contact-message { background: var(--field_surface, var(--color_surface)) !important; color: var(--color_text); border: 1px solid var(--color_border); } #first_name::placeholder, #last_name::placeholder, #confirm_password::placeholder, #email::placeholder, #password::placeholder, #contact-name::placeholder, #contact-email::placeholder, #contact-message::placeholder { color: var(--color_text_muted); } /* Autofill fix for panel-toned fields */ :is( .auth-form, form[action*="/store/create-account"], form[action*="/store/make-account"] ) input:-webkit-autofill, #first_name:-webkit-autofill, #last_name:-webkit-autofill, #confirm_password:-webkit-autofill, #email:-webkit-autofill, #password:-webkit-autofill, #contact-name:-webkit-autofill, #contact-email:-webkit-autofill { box-shadow: 0 0 0 1000px var(--field_surface, var(--color_surface)) inset; -webkit-text-fill-color: var(--color_text); transition: background-color 9999s ease-out 0s; } /* Focus ring on panel-toned inputs */ :is( .auth-form, form[action*="/store/create-account"], form[action*="/store/make-account"] ) :is(input, select, textarea):focus-visible, #first_name:focus-visible, #last_name:focus-visible, #confirm_password:focus-visible, #email:focus-visible, #password:focus-visible, #contact-name:focus-visible, #contact-email:focus-visible { outline: none; border-color: var(--focus-border); box-shadow: 0 0 0 3px var(--focus-ring); } /* ========================================================= ACCESSIBILITY & MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } @media (forced-colors: active) { .btn, .button, .button-primary, .button-secondary, .btn-outline, .btn-ghost { forced-color-adjust: none; } } /* ========================================================= HEADER SEARCH (explicit use of search tokens) ========================================================= */ /* Keep header search explicitly on header tone but readable */ .header-search input[type="text"], .header-search input[type="search"] { background-color: var(--search_bg); color: var(--on_search); border: 1px solid var(--search_border); } .header-search input::placeholder { color: var(--search_placeholder); } /* Stronger placeholder contrast overrides for dark themes. Some environments cache older CSS tokens; this ensures immediate visual change. */ html[data-theme="dark"] .header-search input::placeholder, :root[data-theme-id$="-dark"] .header-search input::placeholder { color: var(--on_header, #ffffff) !important; /* elevate to near full white */ opacity: 0.95; /* keep slight distinction from actual input text */ } /* === Footer: beat framework rules & strip gradients === */ html[data-theme] footer, html[data-theme] .site-footer, html[data-theme="ionablue"] footer, html[data-theme="ionablue"] .site-footer { background: none; /* kill any gradient/image */ background-color: var(--footer_bg); /* token */ color: var(--on_footer); } html[data-theme] footer a, html[data-theme] .site-footer a { color: var(--on_footer); text-decoration: underline; } html[data-theme] footer a:hover, html[data-theme] .site-footer a:hover { color: var(--accent); } /* === Account dropdown items: force light Ionablue chips, darker on hover === */ /* kill any framework white backgrounds */ html[data-theme] #account-menu, html[data-theme] #account-menu > li { background: transparent !important; } /* the item boxes themselves */ html[data-theme] #account-menu > li > a { display: block; margin: 4px 6px; padding: 0.75rem 1rem; text-decoration: none; /* text + chip background */ color: var(--on_primary) !important; background: none !important; /* reset gradients */ background-color: color-mix( in oklab, var(--primary) 60%, white ) !important; /* lighter Ionablue */ /* subtle separation */ border-radius: 8px; border: 1px solid color-mix(in oklab, var(--primary) 40%, black) !important; } /* hover → darker Ionablue */ html[data-theme] #account-menu > li > a:hover, html[data-theme] #account-menu > li > a:focus { background-color: color-mix(in oklab, var(--primary) 80%, black) !important; color: var(--on_primary) !important; border-color: color-mix(in oklab, var(--primary) 50%, black) !important; }