/* ============================================================ Theme engine — overrides shared --dm-* vars per data-theme. default === :root (layout.css); no block needed for it. Exact hex verified against each reference site (see plan). ============================================================ */ /* Palette blocks match both :root (set early by the no-flash snippet in ) and body (set by theme-switcher.js) so non-default themes paint correctly on first render — no purple flash. */ /* Hexes extracted from each reference site's live CSS (Phase 2). --dm-terracotta is the CTA/accent driver; --dm-accent-mid is each theme's secondary accent. */ /* ---- odhomz (pink) — wp2022/odhomz ---- */ :root[data-theme="odhomz"], body[data-theme="odhomz"] { --dm-teal: #CD5A91; --dm-teal-deep: #942D5E; --dm-terracotta: #CD5A91; --dm-terracotta-deep: #942D5E; --dm-lime: #CD5A91; --dm-lime-deep: #942D5E; --dm-indigo: #942D5E; --dm-sage: #EAC4D6; --dm-sand: #F6F2EF; --dm-sand-2: #EAD9E1; --dm-accent-glow: rgba(205,90,145,.5); --dm-accent-soft: #F6F2EF; --dm-accent-mid: #F78FB3; --dm-hero-overlay: 0, 0, 0; } /* ---- odhomz21 (pink primary + teal accent) — wp2022/odhomz/home-layout21. Reference-accurate: same pink as odhomz but cool blue-grey panels + a teal accent; differs from odhomz by LAYOUT, not colour. */ :root[data-theme="odhomz21"], body[data-theme="odhomz21"] { --dm-teal: #CD5A91; --dm-teal-deep: #942D5E; --dm-terracotta: #CD5A91; --dm-terracotta-deep: #942D5E; --dm-lime: #CD5A91; --dm-lime-deep: #942D5E; --dm-indigo: #942D5E; --dm-sage: #BFE6DC; --dm-sand: #FBF4F8; --dm-sand-2: #EFD9E4; --dm-accent-glow: rgba(205,90,145,.5); --dm-accent-soft: #FBF4F8; --dm-accent-mid: #21C2AB; --dm-hero-overlay: 0, 0, 0; } /* ---- odhomz23 (orange-red + hot pink) — wp2022/odhomz/home-layout23 ---- */ :root[data-theme="odhomz23"], body[data-theme="odhomz23"] { --dm-teal: #F94D1C; --dm-teal-deep: #C03210; --dm-terracotta: #F94D1C; --dm-terracotta-deep: #C03210; --dm-lime: #F94D1C; --dm-lime-deep: #C03210; --dm-indigo: #104548; --dm-sage: #FBD0C2; --dm-sand: #ECF0F4; --dm-sand-2: #D6DEE6; --dm-accent-glow: rgba(249,77,28,.5); --dm-accent-soft: #ECF0F4; --dm-accent-mid: #F2295B; --dm-hero-overlay: 0, 0, 0; } /* ---- senion4 (blue + teal-green) — wp2022/senion/home-layout4. Palette matched to the reference swatches: blue #4F86EF primary, teal-green #22C3A6 secondary, deep navy #1C2A4A, slate + light blues. ---- */ :root[data-theme="senion4"], body[data-theme="senion4"] { --dm-teal: #4F86EF; --dm-teal-deep: #3A6FD0; --dm-terracotta: #4F86EF; --dm-terracotta-deep: #3A6FD0; --dm-lime: #4F86EF; --dm-lime-deep: #3A6FD0; --dm-indigo: #1C2A4A; --dm-sage: #AFC9EC; --dm-sand: #F3F7FC; --dm-sand-2: #D6E2F2; --dm-accent-glow: rgba(79,134,239,.45); --dm-accent-soft: #EDF3FC; --dm-accent-mid: #22C3A6; --dm-hero-overlay: 0, 0, 0; } /* ---- senion5 (blue + navy) — wp2022/senion/home-layout5 ---- */ :root[data-theme="senion5"], body[data-theme="senion5"] { --dm-teal: #508AF2; --dm-teal-deep: #1C294B; --dm-terracotta: #508AF2; --dm-terracotta-deep: #1C294B; --dm-lime: #508AF2; --dm-lime-deep: #1C294B; --dm-indigo: #1C294B; --dm-sage: #B9D2F8; --dm-sand: #FBFBFB; --dm-sand-2: #E6ECF5; --dm-accent-glow: rgba(80,138,242,.45); --dm-accent-soft: #EEF2FB; --dm-accent-mid: #21325E; --dm-hero-overlay: 0, 0, 0; } /* ---- odhomz8 (teal + orange) — wp2022/odhomz/home-layout8. Teal primary + orange secondary accent on a warm-cream canvas, dark-plum text. Full-photo centered hero. ---- */ :root[data-theme="odhomz8"], body[data-theme="odhomz8"] { --dm-teal: #17B3A0; --dm-teal-deep: #0E8578; --dm-terracotta: #17B3A0; --dm-terracotta-deep: #0E8578; --dm-lime: #17B3A0; --dm-lime-deep: #0E8578; --dm-indigo: #32262C; --dm-sage: #BEE7E1; --dm-sand: #F6F2EF; --dm-sand-2: #E7DED8; --dm-accent-glow: rgba(23,179,160,.45); --dm-accent-soft: #EAF7F4; --dm-accent-mid: #F94D1C; --dm-hero-overlay: 0, 0, 0; } /* ---- Homepage variant visibility (Task 5+) ---- */ [data-home-variant] { display: none; } body[data-theme="default"] [data-home-variant="default"], body:not([data-theme]) [data-home-variant="default"], body[data-theme="odhomz"] [data-home-variant="odhomz"], body[data-theme="odhomz21"] [data-home-variant="odhomz21"], body[data-theme="odhomz23"] [data-home-variant="odhomz23"], body[data-theme="senion4"] [data-home-variant="senion4"], body[data-theme="senion5"] [data-home-variant="senion5"], body[data-theme="odhomz8"] [data-home-variant="odhomz8"] { display: block; } /* ---- Floating theme picker ---- */ .dm-theme-fab { position: fixed; right: 18px; bottom: 84px; z-index: 1200; } .dm-theme-fab__btn { width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer; background: var(--dm-terracotta); color: #fff; font-size: 18px; box-shadow: var(--dm-shadow-md); display: grid; place-items: center; transition: transform .2s ease; } .dm-theme-fab__btn:hover { transform: translateY(-2px) rotate(8deg); } .dm-theme-panel { position: absolute; right: 0; bottom: 60px; width: 230px; background: #fff; border: 1px solid var(--dm-sand-2); border-radius: 14px; box-shadow: var(--dm-shadow-lg); padding: 12px; display: grid; gap: 6px; } .dm-theme-panel[hidden] { display: none; } .dm-theme-panel__title { margin: 2px 4px 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--dm-muted); } .dm-theme-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 1px solid transparent; border-radius: 10px; background: transparent; cursor: pointer; font-size: 14px; color: var(--dm-ink); text-align: left; } .dm-theme-opt:hover { background: var(--dm-sand); } .dm-theme-opt[aria-pressed="true"] { border-color: var(--dm-terracotta); background: var(--dm-accent-soft); font-weight: 600; } .dm-theme-sw { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(255,255,255,.6); flex: 0 0 auto; } @media (max-width: 640px) { .dm-theme-fab { right: 12px; bottom: 74px; } } /* ---- List-page themed banner visibility ---- */ [data-theme-shell] { display: none; } body[data-theme="default"] [data-theme-shell="default"], body:not([data-theme]) [data-theme-shell="default"], body[data-theme="odhomz"] [data-theme-shell="odhomz"], body[data-theme="odhomz21"] [data-theme-shell="odhomz21"], body[data-theme="odhomz23"] [data-theme-shell="odhomz23"], body[data-theme="senion4"] [data-theme-shell="senion4"], body[data-theme="senion5"] [data-theme-shell="senion5"], body[data-theme="odhomz8"] [data-theme-shell="odhomz8"] { display: block; }