/* ============================================================ INCREDIBLE KARNATAKA — V2 | theme.css Worldwide Media Corporation Group, USA THE COLOUR SYSTEM. Load this LAST, after every other stylesheet, on every page. It defines one set of tokens and swaps their values for dark mode. Nothing else needs to know which theme is active. LIGHT IS THE DEFAULT, ALWAYS. The operating system's dark setting is deliberately ignored — the site only goes dark when the reader presses the toggle in the nav. no attribute on light data-theme="dark" dark (set by the toggle only) The choice is saved in localStorage under "ikm_theme". RULE: never hardcode a colour again. Use the tokens below. ============================================================ */ /* ===== LIGHT (default) ===== */ :root{ --bg: #ffffff; /* page background */ --bg-alt: #faf8f5; /* alternating section background */ --bg-alt2: #f5f2ee; /* second alternating background */ --surface: #ffffff; /* cards, panels, form fields */ --band: #1a1420; /* deliberately dark bands */ --ink: #1a1420; /* headlines and primary text */ --ink-soft: #3a2e48; --body: #3c3646; /* article body copy */ --muted: #6a6470; /* decks and standfirsts */ --meta: #767676; /* bylines, dates, captions */ --on-gold: #1a1420; /* text sitting ON a gold background */ --on-band: #ffffff; /* text sitting ON a dark band */ --line: #e8e4de; /* rules and borders */ --line-soft: #f2efea; --gold: #96681c; /* AA on light — 4.89:1 */ --gold-bright:#ce9744; /* the brand gold, for dark grounds */ --ph: #000000; /* image placeholder */ --pearl: #faf8f5; /* legacy token used by site-core.css */ --mist: #f5f0fa; --btn-bg: #1a1420; /* solid button ground */ --btn-fg: #ffffff; /* solid button text */ --btn-hover: #96681c; --shadow: rgba(26,20,32,.12); color-scheme: light; } /* ===== DARK — only when the reader turns it on ===== */ :root[data-theme="dark"]{ --bg: #121212; --bg-alt: #181818; --bg-alt2: #1c1c1c; --surface: #1e1e1e; --band: #242424; --ink: #ececec; --ink-soft: #d0d0d0; --body: #c8c8c8; --muted: #a0a0a0; --meta: #909090; --on-gold: #121212; --on-band: #ececec; --line: #2e2e2e; --line-soft: #262626; --gold: #d9a441; --gold-bright:#d9a441; --ph: #000000; --pearl: #121212; --mist: #181818; --btn-bg: #d9a441; --btn-fg: #121212; --btn-hover: #e8bc6a; --shadow: rgba(0,0,0,.6); color-scheme: dark; } /* ===== BASE ===== */ body{background:var(--bg);color:var(--ink);} /* The footer is a deliberately dark slab. It used to be painted with --ink, which is near-white in dark mode, so the whole footer inverted to a pale block with pale text on every page. It follows the band tokens now: identical in light, correctly dark in dark. */ .ftr{background:var(--band) !important;color:var(--on-band);} /* Dark bands keep the bright gold whichever theme is active. */ .ftr,.b-promo,.b-duo .tall,.distribution-section,.subscribe-band, .quote-section,.marquee-band,.hero-copy,.gcap,.gtile,.trv-hero .plate{ --gold:var(--gold-bright); } /* ===== ELEMENTS THAT MUST FLIP ===== */ .anav,nav#mainNav,.nav-bottom,.mega-menu,#fullMenu,#searchOverlay{ background:var(--surface);border-color:var(--line); } .anav{border-bottom:1px solid var(--line);} .rn-card,.gsp-c,.price-card,.form-card,.info-card,.ls-side,.sb-sub, .next-inner,.search-state,.her-plate{ background:var(--surface);border-color:var(--line); } .fld input,.fld select,.fld textarea{background:var(--surface);color:var(--ink);border-color:var(--line);} .fld input::placeholder,.fld textarea::placeholder,.search-box input::placeholder{color:var(--meta);} .search-box{border-color:var(--ink);} .search-box input{color:var(--ink);} /* text on a gold ground stays dark in both themes */ .btn-solid:hover,.btn-line:hover,.sb-sub a:hover,.ls-all:hover, .search-box button:hover,.b-promo .btn:hover,.ftr-news button, .ftr-social a:hover,.gtag,.trv-c .idx{ color:var(--on-gold); } /* ===== DARK-ONLY CORRECTIONS ===== */ :root[data-theme="dark"] .ts-track{background:#3a3a3a;} :root[data-theme="dark"] .ts-thumb{left:24px;} :root[data-theme="dark"] nav svg circle, :root[data-theme="dark"] nav svg path, :root[data-theme="dark"] .anav svg circle, :root[data-theme="dark"] .anav svg path{stroke:var(--ink);} :root[data-theme="dark"] .menu-btn, :root[data-theme="dark"] .fm-close, :root[data-theme="dark"] .sbtn, :root[data-theme="dark"] .fsb{color:var(--ink);} :root[data-theme="dark"] .sbtn, :root[data-theme="dark"] .fsb{background:var(--surface);border-color:var(--line);} :root[data-theme="dark"] .nav-logo p, :root[data-theme="dark"] .anav-back{color:var(--meta);} /* ===== THE TOGGLE ===== */ .theme-switch{background:none;border:none;cursor:pointer;padding:0; display:inline-flex;align-items:center;vertical-align:middle;} .ts-track{width:46px;height:24px;border-radius:12px;background:#e3dfe8;position:relative; display:inline-block;transition:background .25s;} .ts-thumb{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%; background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.35);transition:left .25s; display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--gold);} /* ===== PLACEHOLDERS ===== Kept black in both themes so the reserved boxes read the same way. */ .ph,.img{background:var(--ph) !important;} /* ===== SOLID BUTTONS ===== In light mode these are ink on white; in dark mode the ink ground would collapse into the page, so they invert to gold with dark text. */ .sb-sub a,.ls-all,.btn-solid,.search-box button,.toast,.ftr-news button{ background:var(--btn-bg);color:var(--btn-fg); } .btn-line{border-color:var(--btn-bg);color:var(--ink);} .btn-line:hover{background:var(--btn-bg);color:var(--btn-fg);} .sb-sub a:hover,.ls-all:hover,.btn-solid:hover,.search-box button:hover, .ftr-news button:hover{background:var(--btn-hover);color:var(--on-gold);} .search-box{border-color:var(--btn-bg);} .rn-h{border-bottom-color:var(--ink);} /* nav Subscribe button follows the solid-button tokens */ .subscribe-btn{background:var(--btn-bg) !important;color:var(--btn-fg) !important;} .subscribe-btn:hover{background:var(--btn-hover) !important;color:var(--on-gold) !important;}