/* ========================================================================== Belmed Pharmacy — shared stylesheet Palette & type per research/design-language.md. Mobile-first, 17px min body. Light is default (:root); dark is gated on [data-theme="dark"] on . TOKEN ROLES (guard: don't give one token two jobs) --on-brand : text/icons on the always-green header/footer + light label on honey where used. NEVER remapped between themes. (#F7F5F0) --on-honey : dark label on the honey CTA fill. NEVER remapped. (#123F33) --surface : card/panel fill. FLIPS #FFFFFF (light) -> #1B2A24 (dark). These are deliberately separate tokens so remapping --surface for dark mode never drags header/footer/CTA text dark with it. Dark surface contrast check (guard #3): #1B2A24 vs page ground #123F33 L(#1B2A24) = 0.01481 ; L(#123F33) = 0.00764 (relative luminance) ratio = (0.01481 + 0.05) / (0.00764 + 0.05) = 0.06481 / 0.05764 = 1.124 -- TOO LOW. Prior builds shipped exactly this mistake. We instead LIFT the dark card to #22362E and keep the ground at #123F33: L(#22362E) = 0.02171 ; ratio = (0.02171 + 0.05)/(0.00764 + 0.05) = 0.07171 / 0.05764 = 1.244 -- still < 1.35. NOTE: the hand-computed 1.389 for #26413A above did NOT hold up — an in-browser measurement during QA gave #26413A on #0F3229 = 1.26:1 (< 1.35). The card was lifted again to #2E4D44, measured in-browser at 1.50:1 vs the #0F3229 ground, with the border lifted to #45695C (~1.5:1 vs the surface). Final dark tokens: ground #0F3229, surface #2E4D44 (measured 1.50:1) + #45695C border + shadow. ========================================================================== */ /* ---------- Design tokens : LIGHT (default) ---------- */ :root { /* Brand greens */ --green: #1F5C4C; /* pharmacy green — header/footer, headings, marks */ --green-deep: #123F33; /* pine */ --green-leaf: #3E9B7B; /* rules, marks, large display, fills — NOT small text */ --green-text: #2C7A5F; /* small green text/links on light ground (~4.6:1) */ /* Honey CTA */ --honey: #E4A73C; --honey-hover: #d0942c; /* Grounds & surfaces */ --ground: #F7F5F0; /* warm bone page ground */ --surface: #FFFFFF; /* card/panel fill (flips in dark) */ --surface-2: #EAF1EC; /* pale green — hero band, quiet sections, reviews */ --hairline: #DFDBD2; /* borders, rules */ /* Text */ --ink: #1A1F1C; /* body text on light (~15:1) */ --muted: #586460; /* secondary text, captions, meta */ /* Fixed on-brand tokens — NEVER remapped */ --on-brand: #F7F5F0; /* text/icons on green header/footer */ --on-brand-muted:#C6D6CE; /* quiet text on green (light-on-dark, both themes) */ --on-honey: #123F33; /* dark label on honey fill */ /* Chip on always-dark surfaces (header/footer) — light-on-dark in BOTH themes */ --chip-bg: rgba(247,245,240,0.14); --chip-fg: #F7F5F0; --chip-border: rgba(247,245,240,0.30); /* TO CONFIRM chip on light surfaces */ --confirm-bg: #FBEFD6; --confirm-fg: #7A5307; --confirm-border:#E4A73C; /* Effects */ --card-shadow: 0 1px 2px rgba(18,63,51,0.06), 0 8px 24px rgba(18,63,51,0.06); --radius: 14px; --radius-sm: 10px; --maxw: 1120px; --font-head: "Bitter", Georgia, "Times New Roman", serif; --font-body: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } /* ---------- Design tokens : DARK ---------- */ [data-theme="dark"] { --green: #2C7A5F; /* lift green a touch for dark-surface headings */ --green-leaf: #3E9B7B; --green-text: #5FC49E; /* small green links on dark (~7:1 — verify) */ --ground: #0F3229; /* dark green-tinted page ground */ --surface: #2E4D44; /* card fill — measured 1.50:1 vs ground #0F3229 in-browser (guard #3; the earlier #26413A was only 1.26) */ --surface-2: #143A30; /* quiet band in dark */ --hairline: #45695C; /* visible border on dark cards — 1.5:1 vs the surface (guard #3) */ --ink: #EDEFEB; /* primary text on dark */ --muted: #9AA6A0; /* muted text on dark */ /* on-brand / on-honey UNCHANGED (guard #5) */ --confirm-bg: #3a2f14; --confirm-fg: #F2CE86; --confirm-border:#E4A73C; --card-shadow: 0 1px 2px rgba(0,0,0,0.30), 0 10px 30px rgba(0,0,0,0.35); } /* ---------- Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-body); font-size: 17px; /* 17px minimum body (older audience) */ line-height: 1.6; color: var(--ink); background: var(--ground); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: var(--green-text); } a:hover { color: var(--green); } h1, h2, h3, h4 { font-family: var(--font-head); color: var(--green); line-height: 1.18; font-weight: 700; margin: 0 0 .5em; } [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4 { color: var(--ink); } h1 { font-size: clamp(2rem, 5vw, 3rem); } h2 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); } h3 { font-size: 1.25rem; } p { margin: 0 0 1rem; } .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 20px; } section { padding-block: clamp(2.5rem, 6vw, 4.5rem); } .section-tint { background: var(--surface-2); } .eyebrow { font-family: var(--font-body); text-transform: uppercase; letter-spacing: .09em; font-weight: 700; font-size: .82rem; color: var(--green-text); margin: 0 0 .5rem; } .tabnum { font-variant-numeric: tabular-nums; } /* Skip link */ .skip-link { position: absolute; left: -9999px; top: 0; background: var(--green); color: var(--on-brand); padding: .6rem 1rem; border-radius: 0 0 var(--radius-sm) 0; z-index: 200; } .skip-link:focus { left: 0; } :focus-visible { outline: 3px solid var(--honey); outline-offset: 2px; border-radius: 4px; } /* ========================================================================== Buttons — every CTA/button has a class (guard #1 relies on this) ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-family: var(--font-body); font-weight: 700; font-size: 1rem; line-height: 1; text-decoration: none; cursor: pointer; padding: .85rem 1.25rem; border-radius: var(--radius-sm); border: 2px solid transparent; min-height: 48px; /* large tap target */ transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .05s ease; } .btn:active { transform: translateY(1px); } /* Primary CTA — honey fill, dark label (guard #4/#5) */ .btn-primary { background: var(--honey); color: var(--on-honey); } .btn-primary:hover { background: var(--honey-hover); color: var(--on-honey); } /* Secondary — green outline / fill */ .btn-secondary { background: var(--green); color: var(--on-brand); } .btn-secondary:hover { background: var(--green-deep); color: var(--on-brand); } .btn-ghost { background: transparent; color: var(--green); border-color: var(--green); } .btn-ghost:hover { background: var(--green); color: var(--on-brand); } [data-theme="dark"] .btn-ghost { color: var(--ink); border-color: var(--hairline); } [data-theme="dark"] .btn-ghost:hover { background: var(--surface); color: var(--ink); } /* ========================================================================== Header (always green — an always-dark surface) ========================================================================== */ .site-header { background: var(--green); color: var(--on-brand); position: sticky; top: 0; z-index: 100; box-shadow: 0 2px 10px rgba(18,63,51,0.18); } .header-row { display: flex; align-items: center; gap: 1rem; min-height: 68px; padding-block: .5rem; } /* Brand lockup — shrinks but never forces scroll (guard #2) */ .brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--on-brand); flex: 0 1 auto; min-width: 0; } .brand-mark { display: flex; align-items: center; justify-content: center; /* guard #6 */ width: 34px; height: 34px; flex: 0 0 34px; } .brand-mark svg { width: 100%; height: 100%; } .brand-name { font-family: var(--font-head); font-weight: 700; font-size: 1.15rem; color: var(--on-brand); white-space: nowrap; letter-spacing: .01em; overflow: hidden; text-overflow: ellipsis; } /* full wordmark visible >=1280 (guard #2) */ .brand-name .brand-full { display: none; } .brand-name .brand-short { display: inline; } @media (min-width: 1280px) { .brand-name .brand-full { display: inline; } .brand-name .brand-short { display: none; } } .header-actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; } /* Inline nav (desktop) */ .main-nav ul { list-style: none; display: flex; gap: .25rem; margin: 0; padding: 0; } .main-nav a:not(.btn) { display: inline-block; text-decoration: none; color: var(--on-brand); white-space: nowrap; /* guard #2 — no mid-phrase wrap */ padding: .55rem .7rem; border-radius: 8px; font-weight: 600; } .main-nav a:not(.btn):hover { background: rgba(247,245,240,0.12); color: var(--on-brand); } .main-nav a:not(.btn)[aria-current="page"] { color: var(--on-brand); box-shadow: inset 0 -3px 0 var(--honey); /* honey underline for current */ } /* "Open now / Closed now" status pill. Solid green fill + --on-brand label so it is readable on EVERY surface it appears on — the dark-green header, the pale-green hero band (light theme), and the bone contact section. (The earlier --chip-* translucent-white treatment only worked on the dark-green header; it rendered invisible on the light hero and the contact page.) */ .hours-today { display: none; align-items: center; gap: .4rem; font-size: .85rem; font-weight: 700; color: var(--on-brand); background: var(--green); border: 1px solid transparent; padding: .35rem .6rem; border-radius: 999px; white-space: nowrap; } .hours-today .dot { width: .55rem; height: .55rem; border-radius: 50%; background: #9AA6A0; flex: 0 0 auto; } .hours-today.is-open .dot { background: var(--honey); } .hours-today.is-closed .dot { background: #d98b8b; } @media (min-width: 900px) { .hours-today { display: inline-flex; } } /* Header call link */ .header-call { display: none; text-decoration: none; color: var(--on-brand); font-weight: 700; white-space: nowrap; } .header-call:hover { color: var(--on-brand); text-decoration: underline; } @media (min-width: 620px) { .header-call { display: inline-flex; align-items: center; gap: .35rem; } } /* Theme toggle — icon button on the green bar */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 44px; background: transparent; color: var(--on-brand); border: 1px solid var(--chip-border); border-radius: 10px; cursor: pointer; } .theme-toggle:hover { background: rgba(247,245,240,0.12); } .theme-toggle svg { width: 20px; height: 20px; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* Hamburger */ .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: 0 0 44px; background: transparent; color: var(--on-brand); border: 1px solid var(--chip-border); border-radius: 10px; cursor: pointer; } .nav-toggle:hover { background: rgba(247,245,240,0.12); } .nav-toggle svg { width: 22px; height: 22px; } /* The persistent "Send a repeat script" button lives in .header-actions on desktop and moves INTO the drawer on mobile (guard #2). */ .header-actions .btn-primary { padding: .6rem .9rem; } /* ---- Mobile: off-canvas drawer ---- */ .nav-backdrop { position: fixed; inset: 0; background: rgba(15,50,41,0.5); opacity: 0; visibility: hidden; transition: opacity .2s ease; z-index: 110; } .nav-backdrop.open { opacity: 1; visibility: visible; } @media (max-width: 899px) { /* the persistent CTA moves into the drawer (.drawer-cta) on mobile — hide the header copy so it doesn't wrap to 4 lines and squash the brand (guard #2) */ .header-actions .btn-primary { display: none; } .main-nav { position: fixed; top: 0; right: 0; height: 100dvh; width: min(82vw, 320px); background: var(--green); color: var(--on-brand); transform: translateX(100%); transition: transform .22s ease; z-index: 120; padding: 5rem 1.25rem 2rem; overflow-y: auto; box-shadow: -8px 0 30px rgba(0,0,0,0.25); } .main-nav.open { transform: translateX(0); } .main-nav ul { flex-direction: column; gap: .25rem; } .main-nav a:not(.btn) { display: block; padding: .8rem .6rem; font-size: 1.1rem; } .drawer-cta { margin-top: 1.25rem; } .drawer-cta .btn { width: 100%; } .drawer-call { display: flex; margin-top: .75rem; width: 100%; color: var(--on-brand); text-decoration: none; font-weight: 700; align-items: center; justify-content: center; gap: .4rem; padding: .8rem; border: 1px solid var(--chip-border); border-radius: var(--radius-sm); } .nav-close { position: absolute; top: 1rem; right: 1rem; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--chip-border); border-radius: 10px; color: var(--on-brand); cursor: pointer; } .nav-close svg { width: 22px; height: 22px; } } @media (min-width: 900px) { .nav-toggle, .nav-close, .drawer-cta, .drawer-call { display: none !important; } .nav-backdrop { display: none; } } /* ========================================================================== Hero — LIGHT band in both themes (pale green / dark green-tinted panel) ========================================================================== */ .hero { background: var(--surface-2); } .hero-grid { display: grid; gap: 2rem; align-items: center; } @media (min-width: 860px) { .hero-grid { grid-template-columns: 1.1fr .9fr; gap: 3rem; } } .hero h1 { margin-bottom: .5rem; } .hero .lead { font-size: 1.2rem; color: var(--ink); max-width: 44ch; } .hero-cta { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; } .hero-hours { margin-top: 1.75rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1rem; } .hero-phone { font-family: var(--font-body); font-weight: 700; font-size: 1.6rem; color: var(--green); text-decoration: none; } [data-theme="dark"] .hero-phone { color: var(--ink); } .hero-phone:hover { text-decoration: underline; } /* ========================================================================== Trust strip ========================================================================== */ .trust-strip { background: var(--green-deep); color: var(--on-brand); } .trust-strip .container { display: flex; flex-wrap: wrap; gap: .6rem 1rem; justify-content: center; padding-block: 1rem; } .trust-item { display: inline-flex; align-items: center; gap: .45rem; font-size: .95rem; font-weight: 600; color: var(--on-brand); } .trust-item svg { width: 18px; height: 18px; flex: 0 0 18px; color: var(--honey); } /* ========================================================================== Cards & grids ========================================================================== */ .grid { display: grid; gap: 1.25rem; } .grid-3 { grid-template-columns: 1fr; } @media (min-width: 640px) { .grid-3 { grid-template-columns: 1fr 1fr; } } @media (min-width: 940px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } } .card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); box-shadow: var(--card-shadow); padding: 1.5rem; } .card h3 { margin-top: .25rem; } a.card { text-decoration: none; color: inherit; display: block; transition: transform .12s ease, box-shadow .12s ease; } a.card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(18,63,51,0.14); } .card-icon { display: flex; align-items: center; justify-content: center; /* guard #6 */ width: 48px; height: 48px; flex: 0 0 48px; border-radius: 12px; background: var(--surface-2); color: var(--green); margin-bottom: 1rem; } [data-theme="dark"] .card-icon { color: var(--green-text); } .card-icon svg { width: 26px; height: 26px; } .card-link { color: var(--green-text); font-weight: 700; font-size: .95rem; } .section-head { max-width: 60ch; margin-bottom: 2rem; } .section-head.center { margin-inline: auto; text-align: center; } /* ========================================================================== Chips ========================================================================== */ .chip { display: inline-flex; align-items: center; gap: .3rem; font-family: var(--font-body); font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .18rem .5rem; border-radius: 999px; vertical-align: middle; } .chip-confirm { background: var(--confirm-bg); color: var(--confirm-fg); border: 1px dashed var(--confirm-border); text-transform: none; letter-spacing: 0; } /* ========================================================================== Reviews strip ========================================================================== */ .rating-line { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-weight: 700; margin-bottom: 1.5rem; } .rating-stars { color: var(--honey); letter-spacing: .08em; font-size: 1.2rem; } .review-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; } @media (min-width: 780px) { .review-grid { grid-template-columns: repeat(3, 1fr); } } .review { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); padding: 1.5rem; box-shadow: var(--card-shadow); } .review blockquote { margin: 0 0 1rem; font-size: 1.05rem; } .review cite { font-style: normal; font-weight: 700; color: var(--muted); font-size: .9rem; } /* ========================================================================== Steps (how repeat scripts work) ========================================================================== */ .steps { display: grid; gap: 1.25rem; grid-template-columns: 1fr; counter-reset: step; } @media (min-width: 780px) { .steps { grid-template-columns: repeat(3, 1fr); } } .step { position: relative; padding-left: 3.5rem; } .step::before { counter-increment: step; content: counter(step); position: absolute; left: 0; top: 0; width: 2.5rem; height: 2.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; /* guard #6 */ background: var(--honey); color: var(--on-honey); font-family: var(--font-head); font-weight: 700; font-size: 1.2rem; } /* ========================================================================== Media placeholder blocks (no real photos exist — clearly labelled) ========================================================================== */ .media-ph { background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 14px, rgba(62,155,123,0.10) 14px, rgba(62,155,123,0.10) 28px); border: 2px dashed var(--green-leaf); border-radius: var(--radius); min-height: 260px; display: flex; align-items: center; justify-content: center; text-align: center; padding: 1.5rem; color: var(--muted); } .media-ph span { max-width: 30ch; font-size: .9rem; font-weight: 600; } .media-ph strong { display: block; color: var(--green); margin-bottom: .3rem; font-family: var(--font-head); } [data-theme="dark"] .media-ph strong { color: var(--green-text); } /* ========================================================================== Hours table + info blocks ========================================================================== */ .info-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; } @media (min-width: 860px) { .info-grid { grid-template-columns: 1fr 1fr; } } .hours-table { width: 100%; border-collapse: collapse; } .hours-table th, .hours-table td { text-align: left; padding: .7rem .5rem; border-bottom: 1px solid var(--hairline); font-size: 1.05rem; } .hours-table th { font-weight: 700; font-family: var(--font-body); color: var(--ink); width: 45%; } .hours-table td { font-weight: 700; } .hours-table tr.is-today th, .hours-table tr.is-today td { background: var(--surface-2); color: var(--green); } [data-theme="dark"] .hours-table tr.is-today th, [data-theme="dark"] .hours-table tr.is-today td { color: var(--ink); } .nap { list-style: none; margin: 0; padding: 0; } .nap li { display: flex; gap: .75rem; margin-bottom: 1rem; align-items: flex-start; } .nap svg { width: 22px; height: 22px; flex: 0 0 22px; color: var(--green-leaf); margin-top: .15rem; } .nap a { color: var(--green-text); text-decoration: none; font-weight: 700; } .nap a:hover { text-decoration: underline; } [data-theme="dark"] .nap a { color: var(--green-text); } /* Map embed */ .map-embed { width: 100%; border: 1px solid var(--hairline); border-radius: var(--radius); overflow: hidden; box-shadow: var(--card-shadow); } .map-embed iframe { width: 100%; height: 380px; border: 0; display: block; } /* ========================================================================== Forms (repeat scripts) ========================================================================== */ .form-wrap { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius); box-shadow: var(--card-shadow); padding: clamp(1.25rem, 3vw, 2rem); } .field { margin-bottom: 1.25rem; } .field label { display: block; font-weight: 700; margin-bottom: .4rem; } .field .opt { font-weight: 400; color: var(--muted); font-size: .9rem; } .field input, .field textarea, .field select { width: 100%; font-family: var(--font-body); font-size: 1rem; padding: .75rem .85rem; border: 1.5px solid var(--hairline); border-radius: var(--radius-sm); background: var(--ground); color: var(--ink); } [data-theme="dark"] .field input, [data-theme="dark"] .field textarea, [data-theme="dark"] .field select { background: var(--green-deep); } .field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--honey); border-color: var(--honey); } .field textarea { min-height: 120px; resize: vertical; } .radio-row { display: flex; flex-wrap: wrap; gap: 1rem; } .radio-row label { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; } .radio-row input { width: auto; } .form-note { font-size: .95rem; color: var(--muted); margin-top: .5rem; } /* POPIA / info callout */ .callout { border-left: 4px solid var(--green-leaf); background: var(--surface-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 1.25rem 1.5rem; margin-block: 1.5rem; } .callout h3 { margin-top: 0; font-size: 1.1rem; } .callout p:last-child { margin-bottom: 0; } .callout-warn { border-left-color: var(--honey); } /* ========================================================================== Footer (always green — always-dark surface) ========================================================================== */ .site-footer { background: var(--green-deep); color: var(--on-brand); padding-block: 3rem 1.5rem; margin-top: 2rem; } .footer-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; } @media (min-width: 720px) { .footer-grid { grid-template-columns: 1.3fr 1fr 1fr; } } .site-footer h4 { color: var(--on-brand); font-family: var(--font-head); font-size: 1.05rem; margin: 0 0 .8rem; } .site-footer p { color: var(--on-brand-muted); margin: 0 0 .5rem; } /* guard #1 — nav & footer bare links explicitly re-set light-on-dark in dark theme */ .site-footer a:not([class]) { color: var(--on-brand); text-decoration: none; } .site-footer a:not([class]):hover { color: var(--honey); text-decoration: underline; } .footer-nap { list-style: none; margin: 0; padding: 0; } .footer-nap li { color: var(--on-brand-muted); margin-bottom: .5rem; } .footer-hours { list-style: none; margin: 0; padding: 0; } .footer-hours li { display: flex; justify-content: space-between; gap: 1rem; color: var(--on-brand-muted); margin-bottom: .35rem; } .footer-legal { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid rgba(247,245,240,0.16); font-size: .85rem; color: var(--on-brand-muted); } .footer-legal .confirm-note { display: inline-block; margin-bottom: .5rem; color: #F2CE86; font-weight: 700; /* light-on-dark in both themes (guard #8) */ } .footer-legal a:not([class]) { color: var(--on-brand); } /* Utility */ .mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; } .text-center { text-align: center; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .lede { font-size: 1.2rem; color: var(--muted); max-width: 60ch; } /* guard #1 — dark-theme bare-link recolor, scoped a:not([class]), with nav+footer re-set */ [data-theme="dark"] a:not([class]) { color: var(--green-text); } [data-theme="dark"] a:not([class]):hover { color: var(--green-leaf); } [data-theme="dark"] .site-footer a:not([class]) { color: var(--on-brand); } [data-theme="dark"] .site-footer a:not([class]):hover { color: var(--honey); } [data-theme="dark"] .main-nav a:not([class]) { color: var(--on-brand); } [data-theme="dark"] .main-nav a:not([class]):hover { color: var(--on-brand); } [data-theme="dark"] .main-nav a:not([class])[aria-current="page"] { color: var(--on-brand); } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }