/* ════════════════════════════════════════════════════════════════════ TGP / TOGOPEPTIDE — Editorial Redesign System ════════════════════════════════════════════════════════════════════ Filosofie: papier (niet scherm) · één rood (heilig) · zwart als materiaal (niet sfeer) · silver foil voor identiteit. Aesop / Le Labo / Byredo / Dieter Rams / Kinfolk-niveau. Geladen NA bestaande stylesheets — overschrijft de oude tokens waar nodig. Eenvoudig terug te rollen door deze file uit de te halen. Fase 1: variabelen + fonts + body reset. Fasen 2-8: componenten, secties, polish (nog te bouwen). ════════════════════════════════════════════════════════════════════ */ /* ── Google Fonts: EB Garamond (display) + Inter (UI) ──────────── */ @import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500;600&family=Inter:wght@400;500;600&display=swap'); /* ════════════════════════════════════════════════════════════════════ 1. KLEURENSYSTEEM ════════════════════════════════════════════════════════════════════ */ :root { /* === SURFACE / BACKGROUND === */ --tgp-paper: #F6F4EF; /* hoofdachtergrond — warme off-white */ --tgp-paper-deep: #EFEBE3; /* secundaire achtergrond, sectie-divider */ --tgp-paper-soft: #FAF8F4; /* lichtste vlak, voor cards-op-papier */ /* === INK / OBJECT === */ --tgp-ink: #0E0E0E; /* card-zwart, doos-zwart */ --tgp-ink-deep: #050505; /* footer + diepste vlakken */ --tgp-ink-soft: #1A1A1A; /* ink-on-ink elevation */ /* === TEXT === */ --tgp-text: #161616; /* body op papier */ --tgp-text-muted: #5A574F; /* meta, captions, labels */ --tgp-text-faint: #8B8780; /* placeholders, disabled */ --tgp-text-on-ink: #F2EFE8; /* text op zwarte cards */ --tgp-text-on-ink-mut: #9A958B; /* muted op zwarte cards */ /* === SILVER (foil simulatie) === */ --tgp-silver-1: #C8C6C2; --tgp-silver-2: #E6E4DF; --tgp-silver-3: #A8A6A2; --tgp-silver-grad: linear-gradient(135deg, var(--tgp-silver-3) 0%, var(--tgp-silver-2) 45%, var(--tgp-silver-1) 100%); /* === ACCENT (rood = heilig) === */ --tgp-red: #B8252F; /* primaire TGP-rood, identiek aan vial cap */ --tgp-red-deep: #921C24; /* hover / pressed */ --tgp-red-line: #C8102E; /* dunne hairline accent (auth-card lijn) */ /* === STRUCTUUR === */ --tgp-line: #DCD7CB; /* hairline borders op papier */ --tgp-line-soft: #E6E1D5; /* nog subtieler */ --tgp-line-on-ink: #2A2826; /* hairlines op zwarte cards */ /* === SHADOWS (natuurlijk licht, niet game-UI) === */ --tgp-shadow-sm: 0 1px 2px rgba(20,18,12,0.04), 0 1px 1px rgba(20,18,12,0.03); --tgp-shadow-md: 0 6px 16px rgba(20,18,12,0.06), 0 2px 4px rgba(20,18,12,0.04); --tgp-shadow-lg: 0 22px 48px rgba(20,18,12,0.10), 0 8px 16px rgba(20,18,12,0.06); --tgp-shadow-product: 0 30px 60px rgba(20,18,12,0.12), 0 12px 24px rgba(20,18,12,0.08); /* ════════════════════════════════════════════════════════════ 2. TYPOGRAFIE — fluid type scale ════════════════════════════════════════════════════════════ */ --t-display: clamp(2.75rem, 5.5vw + 1rem, 5.25rem); --t-h1: clamp(2.25rem, 4vw + 1rem, 3.75rem); --t-h2: clamp(1.75rem, 2.5vw + 1rem, 2.5rem); --t-h3: clamp(1.25rem, 1.5vw + 0.75rem, 1.625rem); --t-lead: clamp(1.125rem, 0.5vw + 1rem, 1.25rem); --t-body: 1rem; --t-meta: 0.875rem; --t-micro: 0.75rem; --t-eyebrow: 0.6875rem; /* ════════════════════════════════════════════════════════════ 3. SPACING — 8px-basis-grid ════════════════════════════════════════════════════════════ */ --s-1: 0.25rem; /* 4px */ --s-2: 0.5rem; /* 8 */ --s-3: 0.75rem; /* 12 */ --s-4: 1rem; /* 16 */ --s-5: 1.5rem; /* 24 */ --s-6: 2rem; /* 32 */ --s-7: 3rem; /* 48 */ --s-8: 4rem; /* 64 */ --s-9: 6rem; /* 96 */ --s-10: 8rem; /* 128 */ --s-11: 10rem; /* 160 — sectie-padding desktop */ /* ════════════════════════════════════════════════════════════ 4. RADIUS ════════════════════════════════════════════════════════════ */ --r-sm: 6px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px; --r-pill: 999px; /* ════════════════════════════════════════════════════════════ 5. MOTION — globale easing ════════════════════════════════════════════════════════════ */ --ease-tgp: cubic-bezier(.2, .7, .2, 1); /* ════════════════════════════════════════════════════════════ 6. RESPONSIVE BREAKPOINTS (informatief — gebruik in @media) ════════════════════════════════════════════════════════════ */ --bp-sm: 640px; --bp-md: 840px; --bp-lg: 1080px; --bp-xl: 1280px; } /* ════════════════════════════════════════════════════════════════════ 7. BODY RESET — Fase 1 stap 3 "Reset basale body { background, color, font-family }" Dit is het eerste zichtbare effect. De pagina-achtergrond gaat van pikzwart naar warm off-white papier. Body-tekst wordt near-black (#161616). Inter wordt het nieuwe UI-font. Cards / componenten / header / footer hebben nog hun OUDE styling — die worden in fase 2-8 één voor één overgenomen door TGP-componenten. Tijdens fase 1 verwacht je: paper-bg + dark text op de body, maar de bestaande zwarte cards / dark drawers / header blijven nog zoals ze zijn. Dat is bedoeld — we bouwen gefaseerd. ════════════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════════════════ LIGHT MODE — full theme swap via [data-theme="light"] on Strategy: when light mode is active, we OVERRIDE the legacy --color-* tokens (used everywhere in shell.css/glowup.css/etc) with TGP-equivalent light values. The whole cascade then automatically renders light without touching individual files. Default state (no [data-theme] attr) = dark, exactly as live site. ════════════════════════════════════════════════════════════════════ */ html[data-theme="light"] { /* Surfaces — page is paper, cards & elevated surfaces are paper-soft */ --color-bg: #F6F4EF; --color-bg-elevated: #FAF8F4; --color-surface: #FAF8F4; --color-surface-raised:#FFFFFF; /* Borders — near-black hairlines, soft default */ --color-border: rgba(10, 10, 12, 0.10); --color-border-strong: rgba(10, 10, 12, 0.22); --color-border-accent: rgba(184, 37, 47, 0.45); /* Text — high contrast on paper */ --color-text: #161616; --color-text-soft: #3a3a3f; --color-text-muted: #5A574F; --color-text-faint: #8B8780; /* Accent — TGP red, calibrated for light bg */ --color-accent: #B8252F; --color-accent-hover: #921C24; --color-accent-soft: rgba(184, 37, 47, 0.10); --color-accent-glow: rgba(184, 37, 47, 0.28); --color-accent-text: #B8252F; /* still has 4.7:1 on white */ /* Soft shadows on light bg */ --shadow-xs: 0 1px 2px rgba(20,18,12,0.04), 0 1px 1px rgba(20,18,12,0.03); --shadow-sm: 0 3px 8px rgba(20,18,12,0.06), 0 1px 2px rgba(20,18,12,0.04); --shadow-md: 0 10px 28px rgba(20,18,12,0.10), 0 3px 6px rgba(20,18,12,0.06); --shadow-lg: 0 24px 56px rgba(20,18,12,0.14), 0 8px 16px rgba(20,18,12,0.08); --shadow-glow: 0 0 0 1px var(--color-border-accent), 0 14px 40px var(--color-accent-glow); } html[data-theme="light"] body { background: var(--color-bg); color: var(--color-text); } /* Card children inherit color from card root — only for non-product cards. Product cards (.card--interactive / .card--media) have their own color pinning in Section 54 universal rules. */ html[data-theme="light"] .card:not(.card--interactive):not(.card--media) *, html[data-theme="light"] .card:not(.card--interactive):not(.card--media) .card__title, html[data-theme="light"] .card:not(.card--interactive):not(.card--media) .card__body-text { color: inherit; } /* Sticky bars / floating UI that had hardcoded dark backgrounds need light-mode treatment to stay readable */ html[data-theme="light"] .sticky-bar { background: rgba(255, 255, 255, 0.95); border-top: 1px solid var(--color-border); color: var(--color-text); } html[data-theme="light"] .sticky-bar__name { color: var(--color-text); } html[data-theme="light"] .sticky-bar__variant { color: var(--color-text-muted); } html[data-theme="light"] .sticky-bar__price { color: var(--color-text); } /* Lightbox/modal backdrops can stay dark — that's correct overlay UX */ /* Cookie banner / age gate — light variant */ html[data-theme="light"] .cookie-banner, html[data-theme="light"] .age-gate__panel { background: #ffffff; color: var(--color-text); border: 2px solid var(--color-text); } /* Toast confirmation pills */ html[data-theme="light"] #togo-anchor-toast { background: rgba(20, 20, 24, 0.96); color: #fff; border: 1px solid rgba(255, 255, 255, 0.12); } /* Reading-progress bar uses accent — already token-driven */ html[data-theme="light"] #togo-pdp-progress, html[data-theme="light"] #togo-reading-progress { background: linear-gradient(90deg, var(--color-accent), #e0303a); } /* Back-to-top + compare-toggle + wishlist heart — invert for light bg */ html[data-theme="light"] #togo-pdp-totop, html[data-theme="light"] #togo-reading-totop { background: rgba(255, 255, 255, 0.95); border: 1.5px solid var(--color-text); color: var(--color-text); } /* Wishlist heart — same in both modes (sits on black product card) */ html[data-theme="light"] .togo-wishlist-heart { /* keep dark-mode treatment — heart sits on black card in BOTH modes */ } html[data-theme="light"] .togo-compare-toggle { background: rgba(255, 255, 255, 0.95); border: 1.5px solid var(--color-text); color: var(--color-text); } html[data-theme="light"] .togo-compare-toggle[data-on] { background: var(--color-accent); border-color: var(--color-accent); color: #fff; } /* Search overlay panel — keep dark in BOTH modes (overlay with backdrop). Per user: "alle icoontjes + mini icoontjes de kleuren geven die ze ook hebben op de donkere pagina". So no light-mode override here. */ /* TOC sidebar */ html[data-theme="light"] #togo-toc { background: rgba(255, 255, 255, 0.92); border: 1px solid var(--color-border-strong); color: var(--color-text); } html[data-theme="light"] .togo-toc__link { color: var(--color-text-soft); } html[data-theme="light"] .togo-toc__link.is-active { background: var(--color-accent-soft); color: var(--color-text); } /* Cart-resume banner */ html[data-theme="light"] .togo-cart-resume { background: linear-gradient(90deg, color-mix(in srgb, var(--color-red-700) 10%, transparent), color-mix(in srgb, var(--color-red-700) 4%, transparent)); border-bottom: 2px solid var(--color-text); color: var(--color-text); } /* PWA install prompt */ html[data-theme="light"] #togo-pwa-install { background: #ffffff; border: 1.5px solid var(--color-text); color: var(--color-text); } /* Compare bar */ html[data-theme="light"] #togo-compare-footer { background: #ffffff; border: 1.5px solid var(--color-text); } /* Form inputs */ html[data-theme="light"] input, html[data-theme="light"] textarea, html[data-theme="light"] select { color: var(--color-text); background: #ffffff; border-color: var(--color-border-strong); } html[data-theme="light"] input::placeholder, html[data-theme="light"] textarea::placeholder { color: var(--color-text-muted); } /* Header glass when scrolled — adapt for light */ html[data-theme="light"] .site-header { background: rgba(246, 244, 239, 0.92); -webkit-backdrop-filter: blur(8px) saturate(140%); backdrop-filter: blur(8px) saturate(140%); color: var(--color-text); } html[data-theme="light"] .site-header * { color: inherit; } html[data-theme="light"] .site-header a { color: var(--color-text); } /* Footer stays dark even in light mode — it's the "anchor" panel */ /* (no override → footer keeps its dark site-footer styling, which is actually what the TGP design intends: light page, dark footer-anchor) */ /* Trust bar at top */ html[data-theme="light"] .trust-bar { background: var(--color-bg-elevated); color: var(--color-text-muted); border-bottom: 1px solid var(--color-border); } /* Standalone styleguide / preview-home pages: always light */ body[data-page="styleguide"], body[data-page="preview-home"], .sg-nav { background: var(--tgp-paper); color: var(--tgp-text); font-family: 'Inter', sans-serif; } /* ────────────────────────────────────────────────────────────── 46. THEME TOGGLE — header-mounted icon button (modern pattern) ────────────────────────────────────────────────────────────── */ #togo-theme-toggle.togo-theme-toggle--header { position: relative; right: auto; bottom: auto; margin-left: 8px; width: 38px; height: 38px; padding: 0; display: inline-grid; place-items: center; background: transparent; border: 1px solid var(--color-border, rgba(255,255,255,0.10)); border-radius: 50%; color: var(--color-text, #e9e9ec); cursor: pointer; transition: background 160ms ease, border-color 160ms ease, transform 160ms ease, color 160ms ease; flex-shrink: 0; } #togo-theme-toggle.togo-theme-toggle--header:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.20); color: #fff; transform: none; } #togo-theme-toggle.togo-theme-toggle--header:focus-visible { outline: 2px solid var(--color-accent, #e01b1b); outline-offset: 2px; } #togo-theme-toggle.togo-theme-toggle--header .togo-theme-toggle__icon { width: 18px; height: 18px; } html[data-theme="light"] #togo-theme-toggle.togo-theme-toggle--header { border-color: rgba(0,0,0,0.12); color: var(--color-text, #1a1a1a); } html[data-theme="light"] #togo-theme-toggle.togo-theme-toggle--header:hover { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.24); } /* Icon swap stays the same — moon shown in dark, sun shown in light */ /* Legacy floating fallback (only kicks in if JS injects without --header class) */ #togo-theme-toggle:not(.togo-theme-toggle--header) { position: fixed; right: 18px; bottom: 138px; z-index: 86; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 12px; background: rgba(20, 20, 24, 0.92); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--radius-pill); color: #fff; font-family: 'Inter', sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; cursor: pointer; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); transition: background 200ms ease, border-color 200ms ease, transform 200ms ease, color 200ms ease; } #togo-theme-toggle:hover { background: rgba(20, 20, 24, 1); transform: translateY(-1px); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4); } #togo-theme-toggle:active { transform: translateY(0); } .togo-theme-toggle__icon { width: 16px; height: 16px; flex-shrink: 0; transition: opacity 250ms ease, transform 350ms ease; } .togo-theme-toggle__icon--moon { opacity: 1; } .togo-theme-toggle__icon--sun { opacity: 0; position: absolute; left: 12px; top: 50%; transform: translateY(-50%) rotate(-90deg); } /* In light mode: show sun, hide moon */ html[data-theme="light"] .togo-theme-toggle__icon--moon { opacity: 0; transform: rotate(90deg); } html[data-theme="light"] .togo-theme-toggle__icon--sun { opacity: 1; transform: translateY(-50%) rotate(0deg); } html[data-theme="light"] #togo-theme-toggle { background: rgba(255, 255, 255, 0.95); border-color: var(--color-text); color: var(--color-text); box-shadow: var(--shadow-md); } @media (max-width: 720px) { #togo-theme-toggle { right: 14px; bottom: 130px; padding: 8px 12px 8px 10px; font-size: 12px; } } /* Skip in print */ @media print { #togo-theme-toggle { display: none !important; } } /* ════════════════════════════════════════════════════════════════════ FASE 2 — Component bibliotheek Buttons · Cards · Inputs · Badges · Silver foil logo treatment ════════════════════════════════════════════════════════════════════ */ /* ────────────────────────────────────────────────────────────── 8. CONTAINERS ────────────────────────────────────────────────────────────── */ .tgp-container { max-width: 1240px; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 2.5rem); } .tgp-container--narrow { max-width: 880px; } .tgp-container--wide { max-width: 1440px; } /* Generic section padding (fluid) */ .tgp-section { padding-block: var(--s-8); } @media (min-width: 840px) { .tgp-section { padding-block: var(--s-9); } } @media (min-width: 1080px) { .tgp-section { padding-block: var(--s-11); } } /* ────────────────────────────────────────────────────────────── 9. TYPOGRAPHY HELPERS ────────────────────────────────────────────────────────────── */ .tgp-eyebrow { display: inline-block; font-family: 'Inter', sans-serif; font-weight: 600; font-size: var(--t-eyebrow); letter-spacing: 0.18em; line-height: 1; text-transform: uppercase; color: var(--tgp-text-muted); margin: 0 0 var(--s-3); } .tgp-eyebrow--red { color: var(--tgp-red); } .tgp-eyebrow--on-ink { color: var(--tgp-text-on-ink-mut); } .tgp-display { font-family: 'EB Garamond', Georgia, serif; font-weight: 500; font-size: var(--t-display); letter-spacing: -0.02em; line-height: 1.04; margin: 0 0 var(--s-5); color: var(--tgp-text); } .tgp-h1 { font-family: 'EB Garamond', Georgia, serif; font-weight: 500; font-size: var(--t-h1); letter-spacing: -0.015em; line-height: 1.08; margin: 0 0 var(--s-4); color: var(--tgp-text); } .tgp-h2 { font-family: 'EB Garamond', Georgia, serif; font-weight: 500; font-size: var(--t-h2); letter-spacing: -0.01em; line-height: 1.15; margin: 0 0 var(--s-4); color: var(--tgp-text); } .tgp-h3 { font-family: 'Inter', sans-serif; font-weight: 600; font-size: var(--t-h3); letter-spacing: -0.005em; line-height: 1.25; margin: 0 0 var(--s-3); color: var(--tgp-text); } .tgp-lead { font-family: 'EB Garamond', Georgia, serif; font-weight: 400; font-size: var(--t-lead); line-height: 1.55; color: var(--tgp-text); max-width: 60ch; margin: 0 0 var(--s-5); } .tgp-body { font-family: 'Inter', sans-serif; font-weight: 400; font-size: var(--t-body); line-height: 1.65; color: var(--tgp-text); } .tgp-meta { font-family: 'Inter', sans-serif; font-weight: 400; font-size: var(--t-meta); line-height: 1.5; color: var(--tgp-text-muted); } .tgp-micro { font-family: 'Inter', sans-serif; font-weight: 500; font-size: var(--t-micro); letter-spacing: 0.16em; line-height: 1; text-transform: uppercase; color: var(--tgp-text-muted); } /* On-ink variants (dark cards) */ .card-ink .tgp-display, .card-ink .tgp-h1, .card-ink .tgp-h2, .card-ink .tgp-h3, .card-ink .tgp-lead, .card-ink .tgp-body { color: var(--tgp-text-on-ink); } .card-ink .tgp-meta, .card-ink .tgp-micro { color: var(--tgp-text-on-ink-mut); } /* ────────────────────────────────────────────────────────────── 10. BUTTONS ────────────────────────────────────────────────────────────── */ .btn-primary, .btn-secondary, .btn-red { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); border-radius: var(--r-md); padding: 0.95rem 1.75rem; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.9375rem; line-height: 1; letter-spacing: 0.04em; cursor: pointer; text-decoration: none; transition: transform .25s var(--ease-tgp), background .25s var(--ease-tgp), color .25s var(--ease-tgp), border-color .25s var(--ease-tgp), box-shadow .25s var(--ease-tgp); } /* Primary — voor main CTA */ .btn-primary { background: var(--tgp-ink); color: var(--tgp-text-on-ink); border: 1px solid var(--tgp-ink); box-shadow: var(--tgp-shadow-sm); } .btn-primary:hover { background: var(--tgp-ink-soft); border-color: var(--tgp-ink-soft); transform: translateY(-1px); box-shadow: var(--tgp-shadow-md); color: var(--tgp-text-on-ink); } .btn-primary:active { transform: translateY(0); } /* Secondary — outline op papier */ .btn-secondary { background: transparent; color: var(--tgp-text); border: 1px solid var(--tgp-text); } .btn-secondary:hover { background: var(--tgp-text); color: var(--tgp-text-on-ink); } /* Ghost / tertiary — text-link met underline */ .btn-ghost { display: inline-flex; align-items: center; gap: var(--s-2); background: transparent; color: var(--tgp-text); padding: 0.5rem 0; border: none; border-bottom: 1px solid currentColor; border-radius: 0; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.9375rem; line-height: 1.2; letter-spacing: 0.02em; text-decoration: none; cursor: pointer; transition: color .25s var(--ease-tgp), border-color .25s var(--ease-tgp); } .btn-ghost:hover { color: var(--tgp-red); border-bottom-color: var(--tgp-red); } /* Red CTA — heel zeldzaam, alleen voor de iconische "Open the Stack" type */ .btn-red { background: var(--tgp-red); color: #ffffff; border: 1px solid var(--tgp-red); box-shadow: var(--tgp-shadow-sm); } .btn-red:hover { background: var(--tgp-red-deep); border-color: var(--tgp-red-deep); transform: translateY(-1px); box-shadow: var(--tgp-shadow-md); color: #ffffff; } /* On-ink variant — "secondary" knop binnen een zwarte card */ .card-ink .btn-secondary { color: var(--tgp-text-on-ink); border-color: var(--tgp-text-on-ink); } .card-ink .btn-secondary:hover { background: var(--tgp-text-on-ink); color: var(--tgp-ink); } .card-ink .btn-ghost { color: var(--tgp-text-on-ink); } .card-ink .btn-ghost:hover { color: var(--tgp-red-line); border-bottom-color: var(--tgp-red-line); } /* Disabled state */ .btn-primary:disabled, .btn-secondary:disabled, .btn-red:disabled, .btn-ghost:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; } /* ────────────────────────────────────────────────────────────── 11. CARDS ────────────────────────────────────────────────────────────── */ /* Type A — White card (op papier) */ .card-paper { background: var(--tgp-paper-soft); border: 1px solid var(--tgp-line); border-radius: var(--r-lg); padding: var(--s-6); box-shadow: var(--tgp-shadow-sm); transition: box-shadow .35s var(--ease-tgp), transform .35s var(--ease-tgp); color: var(--tgp-text); } .card-paper:hover { box-shadow: var(--tgp-shadow-md); transform: translateY(-2px); } /* Type B — Black card (object op papier) */ .card-ink { background: var(--tgp-ink); color: var(--tgp-text-on-ink); border: 1px solid var(--tgp-line-on-ink); border-radius: var(--r-lg); padding: var(--s-7); box-shadow: var(--tgp-shadow-product); position: relative; overflow: hidden; } /* Optional: rode hairline aan top, zoals authenticity card */ .card-ink--accent::before { content: ''; position: absolute; top: 0; left: var(--s-7); right: var(--s-7); height: 1px; background: var(--tgp-red-line); } /* Type C — Product card (vial-card) */ .card-product { background: var(--tgp-paper-soft); border: 1px solid var(--tgp-line); border-radius: var(--r-lg); padding: var(--s-6) var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); transition: all .4s cubic-bezier(.2, .7, .2, 1); color: var(--tgp-text); text-decoration: none; } .card-product:hover { border-color: var(--tgp-text); box-shadow: var(--tgp-shadow-product); transform: translateY(-3px); } .card-product .vial-image { aspect-ratio: 4 / 5; background: var(--tgp-paper-deep); border-radius: var(--r-md); display: grid; place-items: center; overflow: hidden; } .card-product .vial-image img { width: 60%; height: auto; object-fit: contain; transition: transform .45s var(--ease-tgp), filter .45s var(--ease-tgp); } .card-product:hover .vial-image img { transform: scale(1.04); filter: brightness(1.02); } .card-product .product-eyebrow { font-family: 'Inter', sans-serif; font-weight: 600; font-size: var(--t-eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: var(--tgp-text-muted); margin: 0; } .card-product .product-title { font-family: 'Inter', sans-serif; font-weight: 600; font-size: var(--t-h3); color: var(--tgp-text); margin: 0; } .card-product .product-meta { font-family: 'Inter', sans-serif; font-weight: 400; font-size: var(--t-meta); color: var(--tgp-text-muted); margin: 0; } /* ────────────────────────────────────────────────────────────── 12. INPUTS & FORMS ────────────────────────────────────────────────────────────── */ .tgp-input { background: var(--tgp-paper-soft); border: 1px solid var(--tgp-line); border-radius: var(--r-md); padding: 0.85rem 1rem; font-family: 'Inter', sans-serif; font-weight: 400; font-size: var(--t-body); line-height: 1.4; color: var(--tgp-text); width: 100%; transition: border-color .2s var(--ease-tgp), box-shadow .2s var(--ease-tgp); } .tgp-input::placeholder { color: var(--tgp-text-faint); } .tgp-input:focus { outline: none; border-color: var(--tgp-text); box-shadow: 0 0 0 3px rgba(14, 14, 14, 0.08); } .tgp-input:disabled { opacity: 0.5; cursor: not-allowed; } .tgp-label { display: block; font-family: 'Inter', sans-serif; font-weight: 500; font-size: var(--t-meta); color: var(--tgp-text); margin-bottom: var(--s-2); } .tgp-helper { display: block; font-family: 'Inter', sans-serif; font-size: var(--t-micro); color: var(--tgp-text-muted); margin-top: var(--s-2); } /* ────────────────────────────────────────────────────────────── 13. BADGES & CHIPS ────────────────────────────────────────────────────────────── */ .tgp-badge { display: inline-flex; align-items: center; gap: var(--s-2); font-family: 'Inter', sans-serif; font-weight: 600; font-size: var(--t-eyebrow); letter-spacing: 0.18em; line-height: 1; text-transform: uppercase; padding: 0.4rem 0.7rem; border-radius: var(--r-pill); background: var(--tgp-paper-deep); color: var(--tgp-text-muted); border: 1px solid var(--tgp-line); } .tgp-badge--red { background: var(--tgp-red); color: #ffffff; border: 1px solid var(--tgp-red); } .tgp-badge--ink { background: var(--tgp-ink); color: var(--tgp-text-on-ink); border: 1px solid var(--tgp-ink); } .tgp-badge--paper { background: var(--tgp-paper-soft); color: var(--tgp-text); border: 1px solid var(--tgp-line); } /* ────────────────────────────────────────────────────────────── 14. SILVER FOIL LOGO TREATMENT ────────────────────────────────────────────────────────────── */ .tgp-logo-silver { background: var(--tgp-silver-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-family: 'EB Garamond', Georgia, serif; font-weight: 600; letter-spacing: 0.02em; } /* For SVG-based silver-foil — append */ /* ────────────────────────────────────────────────────────────── 15. HAIRLINE DIVIDERS ────────────────────────────────────────────────────────────── */ .tgp-hairline { display: block; height: 1px; width: 100%; background: var(--tgp-line); border: 0; margin: 0; } .tgp-hairline--strong { background: var(--tgp-text); } .tgp-hairline--red { background: var(--tgp-red-line); } .tgp-hairline--on-ink { background: var(--tgp-line-on-ink); } /* ────────────────────────────────────────────────────────────── 16. FOCUS RING (a11y) ────────────────────────────────────────────────────────────── */ .tgp-container :focus-visible, .styleguide :focus-visible, .btn-primary:focus-visible, .btn-secondary:focus-visible, .btn-red:focus-visible, .btn-ghost:focus-visible, .card-product:focus-visible { outline: 3px solid color-mix(in srgb, var(--color-red-700) 35%, transparent); outline-offset: 3px; } /* ────────────────────────────────────────────────────────────── 17. REVEAL-ON-SCROLL (motion) ────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: no-preference) { .tgp-reveal { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease-tgp), transform .8s var(--ease-tgp); } .tgp-reveal.is-visible { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .tgp-reveal { opacity: 1; transform: none; } } /* ════════════════════════════════════════════════════════════════════ FASE 2 — QUANTUM UPGRADES Engineering depth, brand-specific molecules, premium micro-effects. Things no other design system has out of the box. ════════════════════════════════════════════════════════════════════ */ /* ────────────────────────────────────────────────────────────── 18. @PROPERTY — registered custom properties for animation ────────────────────────────────────────────────────────────── Standard CSS variables can't be animated directly with transitions. With @property we register the type, so browsers can interpolate between values. Used for the foil-shimmer angle below. */ @property --foil-angle { syntax: ''; initial-value: 135deg; inherits: false; } @property --foil-pos { syntax: ''; initial-value: 0%; inherits: false; } /* ────────────────────────────────────────────────────────────── 19. SILVER FOIL — animated shimmer sweep on hover ────────────────────────────────────────────────────────────── When you hover a `.tgp-foil` element, a moving highlight sweeps across like real hot-foil-stamping under a moving light source. No JavaScript. Falls back gracefully on browsers without @property (Firefox <128) by staying on the static gradient. */ .tgp-foil { background: linear-gradient( var(--foil-angle, 135deg), var(--tgp-silver-3) 0%, var(--tgp-silver-3) calc(var(--foil-pos, 0%) - 20%), var(--tgp-silver-2) var(--foil-pos, 0%), var(--tgp-silver-1) calc(var(--foil-pos, 0%) + 20%), var(--tgp-silver-3) 100% ); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; font-family: 'EB Garamond', Georgia, serif; font-weight: 600; letter-spacing: 0.02em; transition: --foil-pos 1.4s var(--ease-tgp), --foil-angle .9s var(--ease-tgp); will-change: --foil-pos; } .tgp-foil:hover { --foil-pos: 120%; --foil-angle: 145deg; } @media (prefers-reduced-motion: reduce) { .tgp-foil { transition: none; } } /* ────────────────────────────────────────────────────────────── 20. EDITORIAL TYPOGRAPHY — ligatures, figures, hanging quotes ────────────────────────────────────────────────────────────── Real magazine-grade typesetting. Most websites skip these. */ body { /* Ligatures + contextual alternates + kerning + old-style figures for body. Inter has these. Falls back gracefully. */ font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1; font-variant-ligatures: common-ligatures contextual; font-optical-sizing: auto; text-rendering: optimizeLegibility; } .tgp-display, .tgp-h1, .tgp-h2, .tgp-lead { /* Tabular figures off (proportional looks better in display). Diagonal fractions on for any ½ ¼ that appear. */ font-feature-settings: 'kern' 1, 'liga' 1, 'dlig' 1, 'frac' 1; font-variant-numeric: proportional-nums; } .tgp-meta, .tgp-micro, .tgp-batch-id, .tgp-spec-row__value { /* Tabular figures for data — columns line up vertically */ font-variant-numeric: tabular-nums; } /* Hanging punctuation — opening quotes hang outside the column. Editorial-grade. Apple's spec pages use this. */ .tgp-quote { hanging-punctuation: first last; -webkit-hyphens: auto; hyphens: auto; } /* Pull-quote (magazine style) */ .tgp-pull-quote { font-family: 'EB Garamond', Georgia, serif; font-weight: 400; font-style: italic; font-size: clamp(1.5rem, 2.5vw + 1rem, 2.25rem); line-height: 1.3; color: var(--tgp-text); border-inline-start: 2px solid var(--tgp-red); padding-inline-start: var(--s-5); margin: var(--s-7) 0; max-width: 50ch; hanging-punctuation: first; text-wrap: pretty; } .tgp-pull-quote::before { content: '"'; } .tgp-pull-quote::after { content: '"'; } .tgp-pull-quote cite { display: block; margin-top: var(--s-3); font-style: normal; font-family: 'Inter', sans-serif; font-size: var(--t-meta); font-weight: 500; color: var(--tgp-text-muted); letter-spacing: 0.04em; } /* Drop cap — first paragraph of articles */ .tgp-drop-cap::first-letter { font-family: 'EB Garamond', Georgia, serif; font-weight: 500; float: inline-start; font-size: 4.5em; line-height: 0.85; margin-inline-end: var(--s-3); margin-block-start: 0.05em; color: var(--tgp-text); } /* ────────────────────────────────────────────────────────────── 21. BRAND MOLECULES — composed components specific to TGP ────────────────────────────────────────────────────────────── These are not generic "buttons + cards". These are PEPTIDE-RESEARCH specific atoms. No other design system has these. */ /* 21a. BATCH-ID DISPLAY — printed lab-label style */ .tgp-batch-id { display: inline-flex; align-items: center; gap: var(--s-2); font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: var(--t-micro); letter-spacing: 0.12em; color: var(--tgp-text-muted); text-transform: uppercase; } .tgp-batch-id::before { content: ''; display: inline-block; width: 6px; height: 6px; background: var(--tgp-red); border-radius: 50%; } .card-ink .tgp-batch-id { color: var(--tgp-text-on-ink-mut); } /* 21b. PURITY METER — HPLC purity bar visualization */ .tgp-purity-meter { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s-3); align-items: center; font-family: 'Inter', sans-serif; font-size: var(--t-meta); color: var(--tgp-text); max-width: 360px; } .tgp-purity-meter__label { font-weight: 500; letter-spacing: 0.02em; } .tgp-purity-meter__track { height: 4px; background: var(--tgp-line); border-radius: var(--r-pill); overflow: hidden; position: relative; } .tgp-purity-meter__fill { height: 100%; background: var(--tgp-text); border-radius: var(--r-pill); width: var(--purity, 99%); transition: width 1.2s var(--ease-tgp); } .tgp-purity-meter__value { font-family: ui-monospace, monospace; font-weight: 500; font-variant-numeric: tabular-nums; font-size: var(--t-meta); } .card-ink .tgp-purity-meter, .card-ink .tgp-purity-meter__value { color: var(--tgp-text-on-ink); } .card-ink .tgp-purity-meter__track { background: var(--tgp-line-on-ink); } .card-ink .tgp-purity-meter__fill { background: var(--tgp-text-on-ink); } /* 21c. SPEC-ROW — like a printed spec-sheet line */ .tgp-spec-row { display: grid; grid-template-columns: minmax(120px, 30%) 1fr; align-items: baseline; gap: var(--s-4); padding-block: var(--s-3); border-bottom: 1px solid var(--tgp-line); font-family: 'Inter', sans-serif; font-size: var(--t-meta); } .tgp-spec-row:last-child { border-bottom: 0; } .tgp-spec-row__label { color: var(--tgp-text-muted); letter-spacing: 0.04em; font-size: var(--t-micro); text-transform: uppercase; font-weight: 600; } .tgp-spec-row__value { color: var(--tgp-text); font-family: ui-monospace, 'SF Mono', monospace; font-weight: 500; font-variant-numeric: tabular-nums; word-break: break-word; } .card-ink .tgp-spec-row { border-bottom-color: var(--tgp-line-on-ink); } .card-ink .tgp-spec-row__label { color: var(--tgp-text-on-ink-mut); } .card-ink .tgp-spec-row__value { color: var(--tgp-text-on-ink); } /* 21d. LAB-TAG — small monospace pill, like equipment labels */ .tgp-lab-tag { display: inline-flex; align-items: center; gap: var(--s-2); padding: 4px 10px; font-family: ui-monospace, 'SF Mono', monospace; font-size: var(--t-micro); font-weight: 500; letter-spacing: 0.04em; color: var(--tgp-text-muted); background: var(--tgp-paper-deep); border: 1px solid var(--tgp-line); border-radius: var(--r-sm); } .tgp-lab-tag::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: currentColor; } .tgp-lab-tag--ok { color: #1f7a44; border-color: #1f7a44; } .tgp-lab-tag--warn { color: #a8651a; border-color: #a8651a; } /* 21e. AUTHENTICITY STRIP — the iconic red hairline + corner ticks */ .tgp-authenticity { position: relative; padding: var(--s-6) var(--s-7); background: var(--tgp-ink); color: var(--tgp-text-on-ink); border-radius: var(--r-md); } .tgp-authenticity::before { content: ''; position: absolute; top: 0; left: var(--s-7); right: var(--s-7); height: 1px; background: var(--tgp-red-line); } .tgp-authenticity::after { content: ''; position: absolute; top: var(--s-3); right: var(--s-3); width: 8px; height: 8px; border-top: 1px solid var(--tgp-red-line); border-right: 1px solid var(--tgp-red-line); } /* 21f. MOLECULAR FORMULA — for compound names with subscripts */ .tgp-formula { font-family: 'EB Garamond', Georgia, serif; font-weight: 500; font-size: var(--t-h3); color: var(--tgp-text); letter-spacing: 0.01em; } .tgp-formula sub { font-size: 0.65em; vertical-align: baseline; position: relative; bottom: -0.2em; font-weight: 400; } /* 21g. FIGURE / CAPTION — editorial picture treatment */ .tgp-figure { margin: 0; display: flex; flex-direction: column; gap: var(--s-3); } .tgp-figure__media { border-radius: var(--r-lg); overflow: hidden; background: var(--tgp-paper-deep); border: 1px solid var(--tgp-line); } .tgp-figure__media img, .tgp-figure__media picture { display: block; width: 100%; height: auto; } .tgp-figure__caption { font-family: 'EB Garamond', Georgia, serif; font-style: italic; font-size: var(--t-meta); color: var(--tgp-text-muted); line-height: 1.5; max-width: 60ch; } .tgp-figure__caption strong { font-style: normal; font-weight: 500; color: var(--tgp-text); letter-spacing: 0.04em; font-size: var(--t-micro); text-transform: uppercase; display: block; margin-bottom: 4px; } /* ────────────────────────────────────────────────────────────── 22. CONTAINER QUERIES — cards adapt to their slot, not viewport ────────────────────────────────────────────────────────────── Modern responsive: a card in a 2-column grid on desktop becomes compact regardless of viewport. Drops if container queries unsupported. */ .card-product { container-type: inline-size; } @container (max-width: 280px) { .card-product .product-meta { display: none; } .card-product { padding: var(--s-5) var(--s-4); gap: var(--s-3); } } /* ────────────────────────────────────────────────────────────── 23. SKELETON — editorial-grade loading state ────────────────────────────────────────────────────────────── Most "skeleton" components use a generic grey box. Ours uses paper-tones with a subtle shimmer that respects the brand. */ .tgp-skel { position: relative; background: var(--tgp-paper-deep); border-radius: var(--r-sm); overflow: hidden; color: transparent; } .tgp-skel::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.55) 50%, transparent 100% ); animation: tgp-skel-shimmer 1.6s var(--ease-tgp) infinite; } @keyframes tgp-skel-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .tgp-skel--text { height: 1em; width: 100%; border-radius: var(--radius-xs); } .tgp-skel--title { height: 1.6em; width: 60%; border-radius: var(--radius-sm); } .tgp-skel--block { aspect-ratio: 4/5; width: 100%; border-radius: var(--r-md); } @media (prefers-reduced-motion: reduce) { .tgp-skel::after { animation: none; } } /* ────────────────────────────────────────────────────────────── 24. EMPTY-STATE — when there's nothing to show ────────────────────────────────────────────────────────────── */ .tgp-empty { text-align: center; padding: var(--s-9) var(--s-5); background: var(--tgp-paper-soft); border: 1px dashed var(--tgp-line); border-radius: var(--r-lg); } .tgp-empty__icon { width: 48px; height: 48px; margin: 0 auto var(--s-4); color: var(--tgp-text-muted); opacity: 0.5; } .tgp-empty__title { font-family: 'EB Garamond', Georgia, serif; font-weight: 500; font-size: var(--t-h3); color: var(--tgp-text); margin: 0 0 var(--s-2); } .tgp-empty__lead { font-family: 'EB Garamond', Georgia, serif; color: var(--tgp-text-muted); margin: 0 0 var(--s-5); max-width: 50ch; margin-inline: auto; } /* ────────────────────────────────────────────────────────────── 25. COMPOSABLE FOCUS RING — per-component override ────────────────────────────────────────────────────────────── Set --tgp-focus on any element to change its focus ring color without rewriting the rule. */ :where(button, a, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--tgp-focus, rgba(184, 37, 47, 0.35)); outline-offset: 3px; border-radius: inherit; } .card-ink { --tgp-focus: rgba(255, 255, 255, 0.4); } /* ────────────────────────────────────────────────────────────── 26. MOTION LIBRARY — small set of named animations ────────────────────────────────────────────────────────────── */ /* Card "lifts off paper" — subtle 3D tilt on hover */ .tgp-tilt { transition: transform .35s var(--ease-tgp), box-shadow .35s var(--ease-tgp); transform-style: preserve-3d; } .tgp-tilt:hover { transform: perspective(1200px) rotateX(0.4deg) rotateY(-0.4deg) translateY(-2px); } /* Staggered reveal — apply to a parent, children fade in sequence */ .tgp-stagger > * { opacity: 0; transform: translateY(12px); transition: opacity .7s var(--ease-tgp), transform .7s var(--ease-tgp); transition-delay: calc(var(--i, 0) * 80ms); } .tgp-stagger.is-visible > * { opacity: 1; transform: translateY(0); } /* Magnetic hover — for primary buttons (subtle) */ .tgp-magnetic { transition: transform .25s var(--ease-tgp); } .tgp-magnetic:hover { transform: translateY(-2px) scale(1.015); } @media (prefers-reduced-motion: reduce) { .tgp-tilt, .tgp-stagger > *, .tgp-magnetic { transition: none; transform: none; } } /* ────────────────────────────────────────────────────────────── 27. ACCESSIBILITY DEEP-DIVES ────────────────────────────────────────────────────────────── */ /* High-contrast (Windows / forced-colors) */ @media (forced-colors: active) { .card-paper, .card-ink, .card-product { border-width: 2px; } .btn-primary, .btn-secondary, .btn-red { border-width: 2px; } .tgp-foil { -webkit-text-fill-color: CanvasText !important; } } /* User prefers more contrast */ @media (prefers-contrast: more) { :root { --tgp-text-muted: #3a3a3a; --tgp-line: rgba(0, 0, 0, 0.30); } } /* Reduced data — hide decorative shimmer/animations */ @media (prefers-reduced-data: reduce) { .tgp-skel::after { animation: none; } .tgp-foil { transition: none; } } /* Touch target minimum 44x44 for buttons */ .btn-primary, .btn-secondary, .btn-red, .btn-ghost { min-height: 44px; } /* ────────────────────────────────────────────────────────────── 28. PRINT STYLESHEET — research-grade printable spec sheets ────────────────────────────────────────────────────────────── Customers PRINT product detail pages to take to the lab. This makes those prints look like real spec sheets. */ @media print { body { background: #ffffff !important; color: #000 !important; font-size: 10.5pt; line-height: 1.4; } .site-header, .site-footer, .sticky-bar, .togo-search-overlay, #togo-toc, #togo-pdp-totop, #togo-reading-totop, #togo-pwa-install, #togo-compare-footer, .togo-cart-resume, .cookie-banner, .age-gate, .nav-cart, .nav-account, .nav-wishlist, .nav-shop, body::before, [data-no-print] { display: none !important; } .card-ink { background: #fff !important; color: #000 !important; border: 1.5px solid #000 !important; } .card-ink * { color: #000 !important; } .card-paper, .card-product { box-shadow: none !important; border-color: #000 !important; } .tgp-batch-id, .tgp-spec-row, .tgp-lab-tag { color: #000 !important; border-color: #555 !important; } a { color: #000 !important; text-decoration: underline; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; } .tgp-display, .tgp-h1, .tgp-h2 { page-break-after: avoid; } .card-paper, .card-ink, .tgp-figure { page-break-inside: avoid; } } /* ────────────────────────────────────────────────────────────── 29. UTILITY: VERTICAL RHYTHM (8pt grid) ────────────────────────────────────────────────────────────── */ .tgp-stack-3 > * + * { margin-top: var(--s-3); } .tgp-stack-4 > * + * { margin-top: var(--s-4); } .tgp-stack-5 > * + * { margin-top: var(--s-5); } .tgp-stack-6 > * + * { margin-top: var(--s-6); } .tgp-stack-7 > * + * { margin-top: var(--s-7); } /* ════════════════════════════════════════════════════════════════════ FASE 3 — HEADER + FOOTER Strategie: bestaande chrome verbergen, nieuwe TGP-chrome via JS injecteren bovenaan en onderaan de body. Bestaande functionaliteit (cart drawer, search overlay, lang switcher) blijft draaien — het nieuwe icoon-rij forwardt clicks naar de verborgen triggers. ════════════════════════════════════════════════════════════════════ */ /* ────────────────────────────────────────────────────────────── 30. HIDE LEGACY CHROME (only on pages where TGP chrome is mounted) ────────────────────────────────────────────────────────────── We hide the original .site-header / .trust-bar / .site-footer ONLY when [data-tgp-chrome="active"] is set on . Keeps cart-drawer / search-overlay / language-banner / cookie-banner alive, those are children of body but separate from the chrome. */ body[data-tgp-chrome="active"] > .trust-bar, body[data-tgp-chrome="active"] > .app-shell > .trust-bar, body[data-tgp-chrome="active"] .site-header, body[data-tgp-chrome="active"] .site-footer { display: none; } /* ────────────────────────────────────────────────────────────── 31. TGP HEADER — sticky, blur on scroll, silver-foil-ready ────────────────────────────────────────────────────────────── */ .tgp-header { position: sticky; top: 0; z-index: var(--z-header, 100); background: var(--tgp-paper); border-bottom: 1px solid transparent; transition: background .25s var(--ease-tgp), border-color .25s var(--ease-tgp), box-shadow .25s var(--ease-tgp), backdrop-filter .25s var(--ease-tgp); } .tgp-header.is-scrolled { background: rgba(246, 244, 239, 0.85); -webkit-backdrop-filter: blur(8px) saturate(140%); backdrop-filter: blur(8px) saturate(140%); border-bottom-color: var(--tgp-line); box-shadow: 0 1px 0 0 transparent, var(--tgp-shadow-sm); } .tgp-header__inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-5); height: 76px; } @media (max-width: 1079px) { .tgp-header__inner { height: 64px; } } /* Brand */ .tgp-header__brand { display: inline-flex; align-items: center; gap: var(--s-3); text-decoration: none; color: var(--tgp-ink); font-family: 'EB Garamond', Georgia, serif; font-weight: 600; font-size: 1.5rem; letter-spacing: 0.04em; line-height: 1; } .tgp-header__brand svg { height: 28px; width: auto; display: block; } .tgp-header__brand-tag { font-family: 'Inter', sans-serif; font-size: var(--t-micro); font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tgp-text-muted); border-left: 1px solid var(--tgp-line); padding-left: var(--s-3); } @media (max-width: 700px) { .tgp-header__brand-tag { display: none; } } /* Nav */ .tgp-header__nav { display: flex; align-items: center; justify-content: center; gap: var(--s-6); list-style: none; padding: 0; margin: 0; } @media (max-width: 1079px) { .tgp-header__nav { display: none; } } .tgp-header__nav a { position: relative; display: inline-block; padding: 6px 0; color: var(--tgp-text); font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.9375rem; letter-spacing: 0.02em; text-decoration: none; transition: color .25s var(--ease-tgp); } .tgp-header__nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--tgp-red); transform: scaleX(0); transform-origin: left center; transition: transform .25s var(--ease-tgp); } .tgp-header__nav a:hover, .tgp-header__nav a[aria-current="page"] { color: var(--tgp-red); } .tgp-header__nav a:hover::after, .tgp-header__nav a[aria-current="page"]::after { transform: scaleX(1); } /* Action icons (search, wishlist, cart) */ .tgp-header__actions { display: flex; align-items: center; gap: var(--s-3); } .tgp-header__icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: transparent; border: 0; border-radius: var(--r-md); color: var(--tgp-text); cursor: pointer; text-decoration: none; transition: background .2s var(--ease-tgp), color .2s var(--ease-tgp); } .tgp-header__icon:hover { background: var(--tgp-paper-deep); color: var(--tgp-red); } .tgp-header__icon svg { width: 20px; height: 20px; stroke-width: 1.5; } .tgp-header__icon-badge { position: absolute; top: 4px; right: 4px; min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex; align-items: center; justify-content: center; background: var(--tgp-red); color: #fff; font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: 0; border-radius: var(--r-pill); border: 2px solid var(--tgp-paper); } .tgp-header__icon-badge[hidden] { display: none; } /* Hamburger (mobile) */ .tgp-header__hamburger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; background: transparent; border: 0; cursor: pointer; color: var(--tgp-text); border-radius: var(--r-md); } .tgp-header__hamburger:hover { background: var(--tgp-paper-deep); } .tgp-header__hamburger svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.5; fill: none; } @media (max-width: 1079px) { .tgp-header__hamburger { display: inline-flex; } } /* ────────────────────────────────────────────────────────────── 32. TGP MOBILE DRAWER — slide-in from right ────────────────────────────────────────────────────────────── */ .tgp-drawer-backdrop { position: fixed; inset: 0; z-index: 90; background: rgba(20, 18, 12, 0.45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; pointer-events: none; transition: opacity .3s var(--ease-tgp); } .tgp-drawer-backdrop.is-open { opacity: 1; pointer-events: auto; } .tgp-drawer { position: fixed; top: 0; right: 0; width: min(420px, 90vw); height: 100dvh; z-index: 95; background: var(--tgp-paper-soft); border-left: 1px solid var(--tgp-line); box-shadow: var(--tgp-shadow-lg); transform: translateX(110%); transition: transform .35s var(--ease-tgp); display: flex; flex-direction: column; overflow-y: auto; } .tgp-drawer.is-open { transform: translateX(0); } .tgp-drawer__head { display: flex; align-items: center; justify-content: space-between; padding: var(--s-5) var(--s-6); border-bottom: 1px solid var(--tgp-line); } .tgp-drawer__close { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 0; cursor: pointer; color: var(--tgp-text); border-radius: var(--r-md); } .tgp-drawer__close:hover { background: var(--tgp-paper-deep); } .tgp-drawer__close svg { width: 22px; height: 22px; stroke-width: 1.5; } .tgp-drawer__nav { display: flex; flex-direction: column; list-style: none; padding: var(--s-5) 0; margin: 0; } .tgp-drawer__nav a { display: block; padding: var(--s-4) var(--s-6); font-family: 'EB Garamond', Georgia, serif; font-weight: 500; font-size: 1.5rem; color: var(--tgp-text); text-decoration: none; border-bottom: 1px solid var(--tgp-line-soft); transition: color .2s var(--ease-tgp), background .2s var(--ease-tgp); } .tgp-drawer__nav a:hover { color: var(--tgp-red); background: var(--tgp-paper-deep); } .tgp-drawer__foot { padding: var(--s-6); margin-top: auto; border-top: 1px solid var(--tgp-line); font-family: 'Inter', sans-serif; font-size: var(--t-micro); color: var(--tgp-text-muted); letter-spacing: 0.06em; } /* ────────────────────────────────────────────────────────────── 33. TGP UTILITY-STRIP (replaces old trust-bar) ────────────────────────────────────────────────────────────── */ .tgp-utility { background: var(--tgp-paper-deep); border-bottom: 1px solid var(--tgp-line); font-family: 'Inter', sans-serif; font-size: var(--t-micro); letter-spacing: 0.08em; color: var(--tgp-text-muted); } .tgp-utility__inner { height: 36px; display: flex; align-items: center; justify-content: center; gap: var(--s-5); flex-wrap: wrap; padding-block: 6px; } .tgp-utility__sep { display: inline-block; width: 1px; height: 12px; background: var(--tgp-line); } @media (max-width: 640px) { .tgp-utility__inner { gap: var(--s-3); } .tgp-utility__sep { display: none; } } /* ────────────────────────────────────────────────────────────── 34. TGP FOOTER — black anchor with silver foil + 4 columns ────────────────────────────────────────────────────────────── */ .tgp-footer { background: var(--tgp-ink-deep); color: var(--tgp-text-on-ink-mut); font-family: 'Inter', sans-serif; } .tgp-footer__top { padding-block: var(--s-9); } .tgp-footer__brand-row { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: var(--s-7); padding-bottom: var(--s-7); border-bottom: 1px solid var(--tgp-line-on-ink); margin-bottom: var(--s-7); } @media (max-width: 720px) { .tgp-footer__brand-row { grid-template-columns: 1fr; gap: var(--s-5); align-items: start; } } .tgp-footer__brand { font-family: 'EB Garamond', Georgia, serif; font-weight: 600; font-size: 2.5rem; letter-spacing: 0.04em; line-height: 1; } .tgp-footer__lead { font-family: 'EB Garamond', Georgia, serif; font-weight: 400; font-size: var(--t-lead); line-height: 1.5; color: var(--tgp-text-on-ink); max-width: 50ch; margin: 0; } .tgp-footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); } @media (max-width: 840px) { .tgp-footer__cols { grid-template-columns: repeat(2, 1fr); gap: var(--s-7); } } @media (max-width: 480px) { .tgp-footer__cols { grid-template-columns: 1fr; gap: var(--s-5); } } .tgp-footer__col-title { font-family: 'Inter', sans-serif; font-weight: 600; font-size: var(--t-eyebrow); letter-spacing: 0.18em; line-height: 1; text-transform: uppercase; color: var(--tgp-text-on-ink); margin: 0 0 var(--s-4); } .tgp-footer__links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-3); } .tgp-footer__links a { color: var(--tgp-text-on-ink-mut); text-decoration: none; font-size: var(--t-meta); font-weight: 400; transition: color .2s var(--ease-tgp); } .tgp-footer__links a:hover { color: var(--tgp-text-on-ink); } /* Bottom row */ .tgp-footer__bottom { border-top: 1px solid var(--tgp-line-on-ink); padding-block: var(--s-5); } .tgp-footer__bottom-inner { display: flex; justify-content: space-between; align-items: center; gap: var(--s-5); flex-wrap: wrap; } .tgp-footer__legal { font-family: 'Inter', sans-serif; font-size: var(--t-micro); letter-spacing: 0.06em; color: var(--tgp-text-on-ink-mut); } .tgp-footer__legal strong { color: var(--tgp-text-on-ink); font-weight: 500; } /* Payment-method icons in footer (silver, not color) */ .tgp-footer__payments { display: flex; align-items: center; gap: var(--s-3); list-style: none; padding: 0; margin: 0; } .tgp-footer__payment { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; background: var(--tgp-silver-grad); background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent; border: 1px solid var(--tgp-line-on-ink); border-radius: var(--r-sm); font-family: 'Inter', sans-serif; font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } @supports not (-webkit-background-clip: text) { .tgp-footer__payment { color: var(--tgp-silver-2); -webkit-text-fill-color: initial; } } /* ════════════════════════════════════════════════════════════════════ FASE 4-7 — HOMEPAGE SECTIONS Hero · Editorial split · Stats · Categories · Featured · Trust · Process · Stack · FAQ · Newsletter ════════════════════════════════════════════════════════════════════ */ /* ────────────────────────────────────────────────────────────── 35. HERO — sectie 7.3 · 60/40 editorial split ────────────────────────────────────────────────────────────── */ .tgp-hero { display: grid; gap: var(--s-7); grid-template-columns: 1fr; align-items: center; } @media (min-width: 1080px) { .tgp-hero { grid-template-columns: 1.5fr 1fr; gap: var(--s-8); } } .tgp-hero__copy { max-width: 60ch; } .tgp-hero__actions { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; margin-top: var(--s-6); } .tgp-hero__media { display: flex; flex-direction: column; gap: var(--s-4); } .tgp-hero__media .card-ink { aspect-ratio: 5/6; display: grid; place-items: center; padding: var(--s-7); } .tgp-hero__media .card-ink picture, .tgp-hero__media .card-ink img { max-width: 80%; height: auto; filter: drop-shadow(0 18px 30px rgba(0,0,0,.55)); } .tgp-hero__meta { display: flex; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; padding-top: var(--s-3); border-top: 1px solid var(--tgp-line); } /* ────────────────────────────────────────────────────────────── 36. EDITORIAL SPLIT — sectie 7.4 ────────────────────────────────────────────────────────────── */ .tgp-split { display: grid; gap: var(--s-7); grid-template-columns: 1fr; align-items: center; } @media (min-width: 1080px) { .tgp-split { grid-template-columns: 1fr 1fr; gap: var(--s-8); } } /* ────────────────────────────────────────────────────────────── 37. STATS STRIP — sectie 7.5 ────────────────────────────────────────────────────────────── */ .tgp-stats { display: grid; grid-template-columns: repeat(4, 1fr); padding: var(--s-7) var(--s-6); } @media (max-width: 840px) { .tgp-stats { grid-template-columns: repeat(2, 1fr); gap: var(--s-6); padding: var(--s-6) var(--s-5); } } @media (max-width: 480px) { .tgp-stats { grid-template-columns: 1fr; gap: var(--s-5); } } .tgp-stat { display: flex; flex-direction: column; gap: var(--s-2); padding-inline: var(--s-5); border-inline-end: 1px solid var(--tgp-line); text-align: center; } .tgp-stat:last-child { border-inline-end: 0; } @media (max-width: 840px) { .tgp-stat { border-inline-end: 0; padding-inline: var(--s-3); } } .tgp-stat__value { font-family: 'EB Garamond', Georgia, serif; font-weight: 500; font-size: var(--t-h1); line-height: 1; color: var(--tgp-text); letter-spacing: -0.02em; } .tgp-stat__label { margin: 0; } .tgp-stat__sub { margin: 0; color: var(--tgp-text-muted); } /* ────────────────────────────────────────────────────────────── 38. CATEGORY GRID — sectie 7.6 · 4×2 met asymmetric empty cell ────────────────────────────────────────────────────────────── */ .tgp-cat-grid { display: grid; gap: var(--s-4); grid-template-columns: 1fr; } @media (min-width: 640px) { .tgp-cat-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1080px) { .tgp-cat-grid { grid-template-columns: repeat(4, 1fr); } } /* ────────────────────────────────────────────────────────────── 39. FEATURED LIST — sectie 7.7 · centered horizontal rows ────────────────────────────────────────────────────────────── */ .tgp-feature-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--tgp-line); } .tgp-feature-list li { border-bottom: 1px solid var(--tgp-line); } .tgp-feature-row { display: grid; grid-template-columns: 100px 1fr auto; gap: var(--s-5); align-items: center; padding: var(--s-5) var(--s-4); text-decoration: none; color: var(--tgp-text); transition: background .25s var(--ease-tgp); } .tgp-feature-row:hover { background: var(--tgp-paper-soft); } .tgp-feature-row__thumb { width: 100px; aspect-ratio: 1; background: var(--tgp-paper-deep); border-radius: var(--r-md); display: grid; place-items: center; overflow: hidden; } .tgp-feature-row__thumb img, .tgp-feature-row__thumb picture { width: 70%; height: auto; } .tgp-feature-row__body { min-width: 0; } .tgp-feature-row__body .tgp-badge { margin-bottom: var(--s-2); } .tgp-feature-row__title { font-family: 'EB Garamond', Georgia, serif; font-weight: 500; font-size: var(--t-h3); letter-spacing: -0.005em; margin: 0 0 var(--s-1); color: var(--tgp-text); } .tgp-feature-row__cta { font-family: 'Inter', sans-serif; font-weight: 500; font-size: var(--t-meta); color: var(--tgp-text); letter-spacing: 0.04em; white-space: nowrap; transition: transform .25s var(--ease-tgp); } .tgp-feature-row:hover .tgp-feature-row__cta { transform: translateX(4px); color: var(--tgp-red); } @media (max-width: 640px) { .tgp-feature-row { grid-template-columns: 72px 1fr; gap: var(--s-3); } .tgp-feature-row__thumb { width: 72px; } .tgp-feature-row__cta { display: none; } } /* ────────────────────────────────────────────────────────────── 40. TRUST GRID — sectie 7.8 · 4 cols inside card-ink--accent ────────────────────────────────────────────────────────────── */ .tgp-trust { padding: var(--s-9) var(--s-7); } .tgp-trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; } @media (max-width: 840px) { .tgp-trust__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-7); } } @media (max-width: 480px) { .tgp-trust__grid { grid-template-columns: 1fr; gap: var(--s-7); } } .tgp-trust__col { padding-inline: var(--s-5); border-inline-end: 1px solid var(--tgp-line-on-ink); text-align: left; } .tgp-trust__col:last-child { border-inline-end: 0; } @media (max-width: 840px) { .tgp-trust__col { border-inline-end: 0; padding-inline: 0; } } .tgp-trust__icon { width: 32px; height: 32px; margin-bottom: var(--s-4); } .tgp-trust__col h3 { color: var(--tgp-text-on-ink); } .tgp-trust__col p { color: var(--tgp-text-on-ink-mut); } /* ────────────────────────────────────────────────────────────── 41. PROCESS — sectie 7.9 · 4-step flow with arrows ────────────────────────────────────────────────────────────── */ .tgp-process { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: var(--s-4); align-items: stretch; } @media (max-width: 1079px) { .tgp-process { grid-template-columns: 1fr; gap: var(--s-3); } .tgp-process__arrow { transform: rotate(90deg); justify-self: center; width: 32px; } } .tgp-process__step { background: var(--tgp-paper-soft); border: 1px solid var(--tgp-line); border-radius: var(--r-lg); padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3); box-shadow: var(--tgp-shadow-sm); transition: transform .35s var(--ease-tgp), box-shadow .35s var(--ease-tgp); } .tgp-process__step:hover { transform: translateY(-2px); box-shadow: var(--tgp-shadow-md); } .tgp-process__num { font-family: 'EB Garamond', Georgia, serif; font-weight: 500; font-size: var(--t-h2); color: var(--tgp-text-muted); line-height: 1; } .tgp-process__step h3 { margin: 0; } .tgp-process__step p { margin: 0; color: var(--tgp-text-muted); } .tgp-process__arrow { align-self: center; width: 64px; height: 16px; color: var(--tgp-text-muted); flex-shrink: 0; } /* ────────────────────────────────────────────────────────────── 42. FAQ — sectie 7.11 · hairline-only accordion ────────────────────────────────────────────────────────────── */ .tgp-faq { border-top: 1px solid var(--tgp-line); } .tgp-faq__item { border-bottom: 1px solid var(--tgp-line); padding-block: var(--s-4); } .tgp-faq__q { list-style: none; cursor: pointer; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); font-family: 'Inter', sans-serif; font-weight: 500; font-size: var(--t-h3); line-height: 1.35; color: var(--tgp-text); padding: var(--s-3) 0; transition: color .2s var(--ease-tgp); } .tgp-faq__q::-webkit-details-marker { display: none; } .tgp-faq__q::after { content: '+'; font-family: 'EB Garamond', Georgia, serif; font-size: 1.5em; font-weight: 400; line-height: 1; color: var(--tgp-text-muted); transition: transform .3s var(--ease-tgp), color .2s var(--ease-tgp); flex-shrink: 0; margin-top: 4px; } .tgp-faq__item[open] > .tgp-faq__q { color: var(--tgp-red); } .tgp-faq__item[open] > .tgp-faq__q::after { transform: rotate(45deg); color: var(--tgp-red); } .tgp-faq__a { padding: 0 0 var(--s-3); max-width: 60ch; } .tgp-faq__a p { font-family: 'EB Garamond', Georgia, serif; font-weight: 400; font-size: var(--t-lead); line-height: 1.7; color: var(--tgp-text-muted); margin: var(--s-3) 0 0; } /* ────────────────────────────────────────────────────────────── 43. NEWSLETTER — sectie 7.12 ────────────────────────────────────────────────────────────── */ .tgp-newsletter { display: flex; flex-direction: column; gap: var(--s-2); max-width: 540px; margin: 0 auto; text-align: left; } .tgp-newsletter__row { display: grid; grid-template-columns: 1fr auto; gap: var(--s-3); align-items: stretch; } .tgp-newsletter__row .tgp-input { height: 100%; } .tgp-newsletter__row .btn-primary { white-space: nowrap; } @media (max-width: 480px) { .tgp-newsletter__row { grid-template-columns: 1fr; } } /* ════════════════════════════════════════════════════════════════════ FASE 4 (UPGRADED) — MEGA MENU + SUPER FOOTER ════════════════════════════════════════════════════════════════════ */ /* ────────────────────────────────────────────────────────────── 44. MEGA MENU ────────────────────────────────────────────────────────────── Nav items met data-mega open een full-width panel onder de header. Pure CSS via `:hover` op desktop, JS-toggle voor mobile/keyboard. */ .tgp-header { /* container voor mega-panels */ --mega-bg: #ffffff; } .tgp-header__nav { position: relative; } .tgp-nav-item { position: relative; } .tgp-nav-item__trigger { background: none; border: 0; padding: 6px 0; margin: 0; cursor: pointer; font-family: 'Inter', sans-serif; font-weight: 500; font-size: 0.9375rem; letter-spacing: 0.02em; color: var(--tgp-text); display: inline-flex; align-items: center; gap: 6px; position: relative; transition: color .25s var(--ease-tgp); } .tgp-nav-item__trigger::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--tgp-red); transform: scaleX(0); transform-origin: left center; transition: transform .25s var(--ease-tgp); } .tgp-nav-item__trigger:hover, .tgp-nav-item[data-open="true"] > .tgp-nav-item__trigger { color: var(--tgp-red); } .tgp-nav-item__trigger:hover::after, .tgp-nav-item[data-open="true"] > .tgp-nav-item__trigger::after { transform: scaleX(1); } .tgp-nav-item__chev { width: 10px; height: 10px; stroke: currentColor; stroke-width: 1.8; fill: none; transition: transform .25s var(--ease-tgp); } .tgp-nav-item[data-open="true"] .tgp-nav-item__chev { transform: rotate(180deg); } /* Full-width mega-panel — slides down from header, paper-bg with hairline */ .tgp-mega-panel { position: absolute; top: 100%; left: 0; right: 0; z-index: 90; background: var(--mega-bg); border-top: 1px solid var(--tgp-line); border-bottom: 1px solid var(--tgp-line); box-shadow: 0 24px 48px -16px rgba(20,18,12,0.12); opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity .3s var(--ease-tgp), transform .3s var(--ease-tgp); } .tgp-nav-item[data-open="true"] .tgp-mega-panel, .tgp-nav-item:hover .tgp-mega-panel, .tgp-nav-item:focus-within .tgp-mega-panel { opacity: 1; pointer-events: auto; transform: translateY(0); } .tgp-mega-panel__inner { display: grid; grid-template-columns: 1fr 1fr 1fr 1.2fr; gap: var(--s-7); padding: var(--s-7) 0; align-items: start; } @media (max-width: 1079px) { .tgp-mega-panel { display: none; } /* mobile uses drawer */ } .tgp-mega-col__title { font-family: 'Inter', sans-serif; font-weight: 600; font-size: var(--t-eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: var(--tgp-text-muted); margin: 0 0 var(--s-4); } .tgp-mega-col__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-3); } .tgp-mega-col__list a { font-family: 'Inter', sans-serif; font-weight: 500; font-size: var(--t-meta); color: var(--tgp-text); text-decoration: none; display: inline-flex; align-items: center; gap: var(--s-2); transition: color .2s var(--ease-tgp), transform .2s var(--ease-tgp); } .tgp-mega-col__list a:hover { color: var(--tgp-red); transform: translateX(2px); } .tgp-mega-col__list a small { font-weight: 400; font-size: var(--t-micro); color: var(--tgp-text-muted); } /* Mega menu featured card (right column, the "highlight" tile) */ .tgp-mega-feature { background: var(--tgp-paper-deep); border: 1px solid var(--tgp-line); border-radius: var(--r-lg); overflow: hidden; text-decoration: none; color: var(--tgp-text); display: flex; flex-direction: column; transition: border-color .25s var(--ease-tgp), transform .25s var(--ease-tgp); } .tgp-mega-feature:hover { border-color: var(--tgp-text); transform: translateY(-2px); } .tgp-mega-feature__media { aspect-ratio: 4/3; background: #ffffff; display: grid; place-items: center; } .tgp-mega-feature__media img { width: 60%; height: auto; } .tgp-mega-feature__body { padding: var(--s-4); } .tgp-mega-feature__eyebrow { font-family: 'Inter', sans-serif; font-weight: 600; font-size: var(--t-eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: var(--tgp-red); margin: 0 0 4px; } .tgp-mega-feature__title { font-family: 'EB Garamond', Georgia, serif; font-weight: 500; font-size: var(--t-h3); color: var(--tgp-text); margin: 0 0 4px; } .tgp-mega-feature__meta { font-family: 'Inter', sans-serif; font-size: var(--t-meta); color: var(--tgp-text-muted); margin: 0; } /* ────────────────────────────────────────────────────────────── 45. SUPER FOOTER — richer than the basic 4-col ────────────────────────────────────────────────────────────── Trust strip + brand row + 5 link cols + newsletter inset + social + bottom row */ .tgp-superfooter { background: var(--tgp-ink-deep); color: var(--tgp-text-on-ink-mut); } /* Trust strip at top of footer */ .tgp-superfooter__trust { border-bottom: 1px solid var(--tgp-line-on-ink); padding-block: var(--s-6); } .tgp-trust-strip { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-5); list-style: none; padding: 0; margin: 0; } @media (max-width: 1079px) { .tgp-trust-strip { grid-template-columns: repeat(2, 1fr); gap: var(--s-5); } } @media (max-width: 480px) { .tgp-trust-strip { grid-template-columns: 1fr; } } .tgp-trust-item { display: flex; align-items: center; gap: var(--s-3); font-family: 'Inter', sans-serif; font-size: var(--t-meta); color: var(--tgp-text-on-ink-mut); } .tgp-trust-item strong { display: block; color: var(--tgp-text-on-ink); font-weight: 500; letter-spacing: 0.02em; margin-bottom: 2px; } .tgp-trust-item__icon { width: 24px; height: 24px; flex-shrink: 0; } /* Brand row + content */ .tgp-superfooter__main { padding-block: var(--s-9); } .tgp-superfooter__brand-row { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: var(--s-7); padding-bottom: var(--s-7); border-bottom: 1px solid var(--tgp-line-on-ink); margin-bottom: var(--s-7); } @media (max-width: 1079px) { .tgp-superfooter__brand-row { grid-template-columns: 1fr; gap: var(--s-5); align-items: start; } } .tgp-superfooter__quote { font-family: 'EB Garamond', Georgia, serif; font-weight: 400; font-style: italic; font-size: var(--t-lead); line-height: 1.5; color: var(--tgp-text-on-ink); max-width: 50ch; margin: 0; padding-inline-start: var(--s-4); border-inline-start: 2px solid var(--tgp-red); } .tgp-superfooter__social { display: flex; gap: var(--s-3); list-style: none; margin: 0; padding: 0; } .tgp-superfooter__social a { width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--tgp-line-on-ink); border-radius: 50%; color: var(--tgp-text-on-ink-mut); transition: color .2s var(--ease-tgp), border-color .2s var(--ease-tgp); } .tgp-superfooter__social a:hover { color: var(--tgp-text-on-ink); border-color: var(--tgp-text-on-ink); } .tgp-superfooter__social svg { width: 18px; height: 18px; } /* 5 link cols + 1 newsletter col */ .tgp-superfooter__cols { display: grid; grid-template-columns: repeat(5, 1fr) 1.5fr; gap: var(--s-6); } @media (max-width: 1079px) { .tgp-superfooter__cols { grid-template-columns: repeat(3, 1fr); gap: var(--s-7); } } @media (max-width: 640px) { .tgp-superfooter__cols { grid-template-columns: repeat(2, 1fr); gap: var(--s-6); } } @media (max-width: 420px) { .tgp-superfooter__cols { grid-template-columns: 1fr; gap: var(--s-5); } } .tgp-superfooter__col-title { font-family: 'Inter', sans-serif; font-weight: 600; font-size: var(--t-eyebrow); letter-spacing: 0.18em; text-transform: uppercase; color: var(--tgp-text-on-ink); margin: 0 0 var(--s-4); } .tgp-superfooter__links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-3); } .tgp-superfooter__links a { color: var(--tgp-text-on-ink-mut); text-decoration: none; font-size: var(--t-meta); transition: color .2s var(--ease-tgp); } .tgp-superfooter__links a:hover { color: var(--tgp-text-on-ink); } /* Newsletter inset (col 6) */ .tgp-superfooter__newsletter { background: rgba(255,255,255,0.03); border: 1px solid var(--tgp-line-on-ink); border-radius: var(--r-md); padding: var(--s-5); } .tgp-superfooter__newsletter h3 { font-family: 'EB Garamond', Georgia, serif; font-weight: 500; font-size: var(--t-h3); color: var(--tgp-text-on-ink); margin: 0 0 var(--s-2); } .tgp-superfooter__newsletter p { font-size: var(--t-meta); color: var(--tgp-text-on-ink-mut); margin: 0 0 var(--s-4); line-height: 1.5; } .tgp-superfooter__newsletter .tgp-input { background: rgba(255,255,255,0.06); border-color: var(--tgp-line-on-ink); color: var(--tgp-text-on-ink); width: 100%; margin-bottom: var(--s-3); } .tgp-superfooter__newsletter .tgp-input::placeholder { color: var(--tgp-text-on-ink-mut); } .tgp-superfooter__newsletter .tgp-input:focus { border-color: var(--tgp-text-on-ink); box-shadow: 0 0 0 3px rgba(255,255,255,0.08); } /* Bottom row */ .tgp-superfooter__bottom { border-top: 1px solid var(--tgp-line-on-ink); padding-block: var(--s-5); } .tgp-superfooter__bottom-inner { display: flex; justify-content: space-between; align-items: center; gap: var(--s-5); flex-wrap: wrap; } .tgp-superfooter__legal { font-family: 'Inter', sans-serif; font-size: var(--t-micro); letter-spacing: 0.06em; color: var(--tgp-text-on-ink-mut); margin: 0; } .tgp-superfooter__legal strong { color: var(--tgp-text-on-ink); font-weight: 500; } .tgp-superfooter__payments { display: flex; align-items: center; gap: var(--s-2); list-style: none; padding: 0; margin: 0; } .tgp-superfooter__payment { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; background: var(--tgp-silver-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; border: 1px solid var(--tgp-line-on-ink); border-radius: var(--r-sm); font-family: 'Inter', sans-serif; font-size: 9.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } /* ════════════════════════════════════════════════════════════════════ 47. LIGHT MODE — flip all hardcoded white text to dark ════════════════════════════════════════════════════════════════════ Auto-generated from audit of legacy CSS files. Each selector that had `color: #fff` hardcoded gets a light-mode override that uses the token (which resolves to dark in light mode). Selectors that intentionally keep white (red CTAs, badges, footer) are excluded — they appear on red/dark backgrounds and need to stay white. */ html[data-theme="light"] #togo-anchor-toast, html[data-theme="light"] #togo-reading-totop:hover, html[data-theme="light"] .acct-action-tile__title, html[data-theme="light"] .acct-hero__greeting strong, html[data-theme="light"] .acct-hero__signout:hover, html[data-theme="light"] .acct-hero__welcome, html[data-theme="light"] .acct-order-action--primary, html[data-theme="light"] .acct-order-action--primary:hover, html[data-theme="light"] .acct-order-action:hover, html[data-theme="light"] .acct-order-card__total, html[data-theme="light"] .acct-pref__name, html[data-theme="light"] .acct-section-head__title, html[data-theme="light"] .acct-stat__value, html[data-theme="light"] .admin-action-tile__title, html[data-theme="light"] .admin-alert__text strong, html[data-theme="light"] .admin-alerts__title, html[data-theme="light"] .admin-feed__text strong, html[data-theme="light"] .admin-hero__greeting strong, html[data-theme="light"] .admin-hero__period-tab.is-active, html[data-theme="light"] .admin-hero__revenue-main, html[data-theme="light"] .admin-obs-card__value, html[data-theme="light"] .admin-section-head__title, html[data-theme="light"] .age-gate__body strong, html[data-theme="light"] .age-gate__btn--primary, html[data-theme="light"] .age-gate__btn--secondary:hover, html[data-theme="light"] .age-gate__legal a:hover, html[data-theme="light"] .age-gate__title, html[data-theme="light"] .announcement-bar a, html[data-theme="light"] .announcement-bar strong, html[data-theme="light"] .announcement-bar__close:hover, html[data-theme="light"] .article-body a:hover, html[data-theme="light"] .article-body h2, html[data-theme="light"] .article-body h3, html[data-theme="light"] .article-body strong, html[data-theme="light"] .article-byline__author, html[data-theme="light"] .article-byline__author-avatar, html[data-theme="light"] .article-compare td:first-child, html[data-theme="light"] .article-compare th:first-child, html[data-theme="light"] .article-compare__num, html[data-theme="light"] .article-meta-top a:hover, html[data-theme="light"] .article-references__title, html[data-theme="light"] .article-title, html[data-theme="light"] .badge-sale, html[data-theme="light"] .blog-card__cover-icon, html[data-theme="light"] .blog-card__title, html[data-theme="light"] .blog-hub-hero__title, html[data-theme="light"] .brand, html[data-theme="light"] .brand-reset, html[data-theme="light"] .btn--destructive, html[data-theme="light"] .buy-btn, html[data-theme="light"] .cart-floater, html[data-theme="light"] .cat-hero__breadcrumb a:hover, html[data-theme="light"] .cat-hero__title, html[data-theme="light"] .cat-quick-filter.is-active, html[data-theme="light"] .cat-quick-filter:hover, html[data-theme="light"] .cat-section-head__count strong, html[data-theme="light"] .cat-section-head__title, html[data-theme="light"] .cat-stat__value, html[data-theme="light"] .catalog-price, html[data-theme="light"] .category-focus-card, html[data-theme="light"] .category-top-picks .card:first-child::after, html[data-theme="light"] .checkout-intent-box input, html[data-theme="light"] .compound-compare-table .ccmp-cta, html[data-theme="light"] .cookie-banner__body a, html[data-theme="light"] .cookie-banner__btn--customize:hover, html[data-theme="light"] .cookie-banner__btn--reject, html[data-theme="light"] .cookie-banner__category-name, html[data-theme="light"] .cookie-banner__title, html[data-theme="light"] .featured-card::before, html[data-theme="light"] .footer-cookies-link:hover, html[data-theme="light"] .footer-stats strong, html[data-theme="light"] .footer-trust__item strong, html[data-theme="light"] .hero__trust li strong, html[data-theme="light"] .jump-chip, html[data-theme="light"] .kbd, html[data-theme="light"] .kpi-card__value, html[data-theme="light"] .lang-banner__close:hover, html[data-theme="light"] .lang-banner__text strong, html[data-theme="light"] .live-price, html[data-theme="light"] .menu-toggle, html[data-theme="light"] .nav-cart__badge, html[data-theme="light"] .nav-wishlist__badge, html[data-theme="light"] .pay-eta strong, html[data-theme="light"] .pay-line__name, html[data-theme="light"] .pay-line__price, html[data-theme="light"] .pay-line__qty button:hover, html[data-theme="light"] .pay-line__qty input, html[data-theme="light"] .pay-sticky-cta__btn, html[data-theme="light"] .pay-sticky-cta__total-value, html[data-theme="light"] .pay-summary__consent a, html[data-theme="light"] .pay-trust-strip li strong, html[data-theme="light"] .research-banner strong, html[data-theme="light"] .research-banner__close:hover, html[data-theme="light"] .roadmap-step, html[data-theme="light"] .shop-chip:hover, html[data-theme="light"] .shop-density button.is-active, html[data-theme="light"] .shop-drawer__close:hover, html[data-theme="light"] .shop-drawer__title, html[data-theme="light"] .shop-empty__title, html[data-theme="light"] .shop-filters__option:hover, html[data-theme="light"] .shop-mobile-filter-btn, html[data-theme="light"] .shop-quick-filter[aria-pressed="true"], html[data-theme="light"] .shop-search input, html[data-theme="light"] .shop-sort, html[data-theme="light"] .shop-toolbar__count strong, html[data-theme="light"] .site-header__search:hover, html[data-theme="light"] .site-nav-reset a:hover, html[data-theme="light"] .skip-to-content, html[data-theme="light"] .sticky-cta a, html[data-theme="light"] .togo-404-suggest__label, html[data-theme="light"] .togo-cart-resume__close:hover, html[data-theme="light"] .togo-cart-resume__copy strong, html[data-theme="light"] .togo-cart-resume__cta, html[data-theme="light"] .togo-compare-footer__chip button:hover, html[data-theme="light"] .togo-compare-footer__clear:hover, html[data-theme="light"] .togo-compare-footer__cta, html[data-theme="light"] .togo-compare-footer__title, html[data-theme="light"] .togo-compare-toggle:focus-visible, html[data-theme="light"] .togo-compare-toggle[data-on] .togo-compare-toggle__check, html[data-theme="light"] .togo-lightbox__close, html[data-theme="light"] .togo-pwa-install__close:hover, html[data-theme="light"] .togo-pwa-install__copy strong, html[data-theme="light"] .togo-pwa-install__cta, html[data-theme="light"] .togo-shell-brand, html[data-theme="light"] .togo-shell-nav a:hover, html[data-theme="light"] .togo-shell-toggle, html[data-theme="light"] .togo-toc__link.is-active, html[data-theme="light"] .togo-toc__link:hover, html[data-theme="light"] .urgency-box, html[data-theme="light"] ::selection { color: var(--color-text); } /* ════════════════════════════════════════════════════════════════════ 48. LIGHT MODE — KWALITEITS PATCHES (gevonden via gebruikerstest) ════════════════════════════════════════════════════════════════════ De auto-gegenereerde overrides pakten 138 CSS-regels, maar misten een aantal high-traffic elementen. Onderstaande blok lost dat op + tilt cards naar "quantum"-niveau in light mode. */ /* ── Trust bar (top strip) + announcement bar (JS-injected) ─── */ html[data-theme="light"] .trust-bar, html[data-theme="light"] .announcement-bar, html[data-theme="light"] .header-announcement { background: var(--color-bg-elevated) !important; color: var(--color-text-soft) !important; border-bottom: 1px solid var(--color-border) !important; } html[data-theme="light"] .trust-bar *, html[data-theme="light"] .trust-bar__item, html[data-theme="light"] .announcement-bar *, html[data-theme="light"] .header-announcement * { color: var(--color-text-soft) !important; } html[data-theme="light"] .trust-bar strong, html[data-theme="light"] .announcement-bar strong, html[data-theme="light"] .trust-bar a, html[data-theme="light"] .announcement-bar a { color: var(--color-text) !important; } /* ── Hero — full text flip + accent eyebrow ─────────────────── */ html[data-theme="light"] .hero, html[data-theme="light"] .hero--aurora { background: radial-gradient(circle at 50% -10%, color-mix(in srgb, var(--color-red-700) 8%, transparent), transparent 55%), var(--color-bg) !important; color: var(--color-text); } html[data-theme="light"] .hero__eyebrow { color: var(--color-accent) !important; } html[data-theme="light"] .hero__eyebrow-dot { background: var(--color-accent) !important; } html[data-theme="light"] .hero__title { color: var(--color-text) !important; } html[data-theme="light"] .hero__title-em { color: var(--color-accent) !important; } html[data-theme="light"] .hero__lead { color: var(--color-text-soft) !important; } html[data-theme="light"] .hero__trust li { background: var(--color-bg-elevated) !important; border: 1px solid var(--color-border) !important; color: var(--color-text-soft) !important; } html[data-theme="light"] .hero__trust li *, html[data-theme="light"] .hero__trust svg { color: var(--color-text-soft) !important; } html[data-theme="light"] .hero__trust strong { color: var(--color-text) !important; } /* ── Content cards — paper white (NIET product cards) ────── */ /* Only generic .card without product-modifiers gets paper styling. .card--interactive and .card--media (product/category cards) inherit the universal black-with-red-border treatment from Section 54. */ html[data-theme="light"] .card:not(.card--interactive):not(.card--media), html[data-theme="light"] .card--feature, html[data-theme="light"] .card--raised { background: #ffffff !important; border: 1.5px solid #1a1a1f !important; border-radius: var(--radius-14); box-shadow: 0 1px 2px rgba(20, 18, 12, 0.04), 0 1px 1px rgba(20, 18, 12, 0.03) !important; } html[data-theme="light"] .card:not(.card--interactive):not(.card--media) .card__title, html[data-theme="light"] .card--feature .card__title, html[data-theme="light"] .card--raised .card__title { color: var(--color-text) !important; } html[data-theme="light"] .card:not(.card--interactive):not(.card--media) .card__body-text, html[data-theme="light"] .card--feature .card__body-text { color: var(--color-text-muted) !important; } html[data-theme="light"] .card:not(.card--interactive):not(.card--media) .card__eyebrow, html[data-theme="light"] .card--feature .card__eyebrow { color: var(--color-accent-vivid) !important; font-weight: 700 !important; letter-spacing: 0.14em !important; text-transform: uppercase; } /* ── Section header pattern (eyebrow + title) ───────────────── */ html[data-theme="light"] .section__eyebrow { color: var(--color-accent) !important; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } html[data-theme="light"] .section__title { color: var(--color-text) !important; } html[data-theme="light"] .section__lead { color: var(--color-text-soft) !important; } /* ── "Built for serious research" / process steps ───────────── */ html[data-theme="light"] .feature, html[data-theme="light"] .why-item, html[data-theme="light"] .how-step, html[data-theme="light"] .feature-card, html[data-theme="light"] .step-card { background: #ffffff !important; border: 1.5px solid #1a1a1f !important; color: var(--color-text) !important; box-shadow: 0 1px 2px rgba(20,18,12,0.04), 0 1px 1px rgba(20,18,12,0.03) !important; } html[data-theme="light"] .feature *, html[data-theme="light"] .why-item *, html[data-theme="light"] .how-step *, html[data-theme="light"] .feature-card *, html[data-theme="light"] .step-card * { color: inherit; } html[data-theme="light"] .feature h3, html[data-theme="light"] .feature__title, html[data-theme="light"] .why-item h3, html[data-theme="light"] .how-step h3 { color: var(--color-text) !important; } html[data-theme="light"] .feature p, html[data-theme="light"] .why-item p, html[data-theme="light"] .how-step p { color: var(--color-text-muted) !important; } /* ── FOOTER — KEEP DARK + sterke contrast in light mode ─────── */ html[data-theme="light"] .site-footer { background: #050505 !important; color: #c8c4ba !important; border-top: 0 !important; } html[data-theme="light"] .site-footer * { color: inherit; } html[data-theme="light"] .site-footer h2, html[data-theme="light"] .site-footer h3, html[data-theme="light"] .site-footer h4, html[data-theme="light"] .site-footer__heading, html[data-theme="light"] .site-footer strong, html[data-theme="light"] .site-footer__brand { color: #f2efe8 !important; font-weight: 600; } html[data-theme="light"] .site-footer a { color: #c8c4ba !important; text-decoration: none; transition: color .2s ease; } html[data-theme="light"] .site-footer a:hover { color: #ffffff !important; } html[data-theme="light"] .site-footer p, html[data-theme="light"] .site-footer li, html[data-theme="light"] .site-footer span { color: #c8c4ba !important; } html[data-theme="light"] .site-footer__tagline { color: #9a958b !important; } html[data-theme="light"] .site-footer hr, html[data-theme="light"] .site-footer__bottom { border-color: rgba(255, 255, 255, 0.08) !important; } html[data-theme="light"] .site-footer .footer-trust__item, html[data-theme="light"] .site-footer .footer-payment__method:not(.footer-payment__method--ideal):not(.footer-payment__method--mollie):not(.footer-payment__method--ssl) { color: #c8c4ba !important; border-color: rgba(255, 255, 255, 0.12) !important; background: rgba(255, 255, 255, 0.03) !important; } /* Keep semantic colors on named payment chips */ html[data-theme="light"] .site-footer .footer-payment__method--ideal { color: #ff5fa6 !important; border-color: rgba(255, 95, 166, 0.36) !important; background: rgba(255, 95, 166, 0.08) !important; } html[data-theme="light"] .site-footer .footer-payment__method--mollie { color: #4cf0bd !important; border-color: rgba(76, 240, 189, 0.32) !important; background: rgba(76, 240, 189, 0.08) !important; } html[data-theme="light"] .site-footer .footer-payment__method--ssl { color: #6ee7a4 !important; border-color: rgba(110, 231, 164, 0.32) !important; background: rgba(110, 231, 164, 0.08) !important; } html[data-theme="light"] .site-footer .footer-payment__method--ssl svg { color: #6ee7a4 !important; } html[data-theme="light"] .site-footer .footer-trust__item strong { color: #f2efe8 !important; } html[data-theme="light"] .site-footer .newsletter-form__input, html[data-theme="light"] .site-footer input[type="email"] { background: rgba(255, 255, 255, 0.06) !important; border-color: rgba(255, 255, 255, 0.18) !important; color: #f2efe8 !important; } html[data-theme="light"] .site-footer input::placeholder { color: #9a958b !important; } html[data-theme="light"] .site-footer .newsletter-form__submit { background: #ffffff !important; color: #050505 !important; border-color: #ffffff !important; } html[data-theme="light"] .site-footer__signature, html[data-theme="light"] .site-footer__copyright, html[data-theme="light"] .footer-stats { color: #9a958b !important; } /* ── Section backgrounds + alternating bands ───────────────── */ html[data-theme="light"] .section--surface { background: var(--color-bg-elevated) !important; border-block: 1px solid var(--color-border) !important; } /* ── Stack-CTA / featured-stack panel ──────────────────────── */ html[data-theme="light"] .stack-cta { background: radial-gradient(circle at 85% 0%, color-mix(in srgb, var(--color-red-700) 14%, transparent), transparent 60%), var(--color-surface-raised) !important; border: 1.5px solid var(--color-border-strong) !important; color: var(--color-text) !important; } html[data-theme="light"] .stack-cta * { color: inherit; } html[data-theme="light"] .stack-cta__title, html[data-theme="light"] .stack-cta__lead { color: var(--color-text) !important; } html[data-theme="light"] .stack-cta__eyebrow { color: var(--color-accent) !important; } html[data-theme="light"] .stack-cta__lead { color: var(--color-text-soft) !important; } /* compound-hero__media is universal in Section 54 — no light override here */ /* ── Buttons — keep VIVID RED brand on .btn--primary (natural state) ─── */ html[data-theme="light"] .btn--primary, html[data-theme="light"] .btn-primary { background: var(--color-accent-vivid); color: #ffffff; border: 1.5px solid var(--color-accent-vivid); font-weight: 700; box-shadow: 0 6px 18px color-mix(in srgb, var(--color-red-700) 32%, transparent); } html[data-theme="light"] .btn--primary *, html[data-theme="light"] .btn-primary * { color: #ffffff; } html[data-theme="light"] .btn--primary:hover, html[data-theme="light"] .btn-primary:hover { background: var(--color-accent-deep); border-color: var(--color-accent-deep); color: #ffffff; box-shadow: 0 10px 26px color-mix(in srgb, var(--color-red-700) 44%, transparent) !important; transform: translateY(-1px); } html[data-theme="light"] .btn--primary:hover *, html[data-theme="light"] .btn-primary:hover * { color: #ffffff; } html[data-theme="light"] .btn--secondary { background: transparent !important; color: var(--color-text) !important; border-color: var(--color-text) !important; } html[data-theme="light"] .btn--secondary:hover { background: var(--color-text) !important; color: var(--color-bg) !important; } html[data-theme="light"] .btn--ghost { background: transparent !important; color: var(--color-text-soft) !important; } html[data-theme="light"] .btn--ghost:hover { color: var(--color-accent) !important; } /* ════════════════════════════════════════════════════════════════════ 49. LIGHT MODE — VEL-ROOD ESCALATIE + HERO AURORA OVERRIDE ════════════════════════════════════════════════════════════════════ Brief: alles wat zwak/roze rood is moet VIVID, mooi, vel rood worden — geen gewassen pink op wit. En de hero MOET leesbaar. De hero__bg in glowup.css is hard-coded #050505 met !important text kleuren — daarom doorbreekt licht-mode niet vanzelf. Hier overschrijven we agressief en pinnen we vivid red als brand-dominator. */ /* ── Vivid-red token swap (override accent-soft die 10% rgba was) ── */ html[data-theme="light"] { /* Sterker tinted accent — roze 0.10 wordt nu saturated 0.16 */ --color-accent-soft: rgba(184, 37, 47, 0.16); --color-accent-glow: rgba(184, 37, 47, 0.42); /* Brand-dominant vivid red (same as TGP red, but used for fills/text) */ --color-accent-vivid: #B8252F; --color-accent-deep: #8C161E; } /* ── HERO — aurora bg in light mode (overrule glowup.css #050505) ── */ html[data-theme="light"] .hero, html[data-theme="light"] .hero--aurora, html[data-theme="light"] section.hero { background: radial-gradient(ellipse 70% 50% at 75% 0%, color-mix(in srgb, var(--color-red-700) 18%, transparent), transparent 60%), radial-gradient(ellipse 60% 50% at 25% -10%, color-mix(in srgb, var(--color-red-700) 14%, transparent), transparent 55%), var(--color-bg) !important; } html[data-theme="light"] .hero--aurora .hero__bg, html[data-theme="light"] .hero .hero__bg { background: radial-gradient(ellipse 70% 50% at 75% 0%, color-mix(in srgb, var(--color-red-700) 20%, transparent), transparent 60%), radial-gradient(ellipse 60% 50% at 25% -10%, color-mix(in srgb, var(--color-red-700) 16%, transparent), transparent 55%), linear-gradient(180deg, color-mix(in srgb, var(--color-red-700) 6%, transparent) 0%, transparent 50%), var(--color-bg) !important; } html[data-theme="light"] .hero--aurora .hero__bg::before, html[data-theme="light"] .hero .hero__bg::before { background: radial-gradient(circle at 50% 50%, transparent 0%, rgba(255, 255, 255, 0.30) 100%) !important; } /* ── HERO TEXT — force-readable, vivid-red emphasis ─────────────── */ html[data-theme="light"] .hero__eyebrow, html[data-theme="light"] .hero .section__eyebrow { color: var(--color-accent-vivid) !important; font-weight: 700 !important; letter-spacing: 0.16em !important; text-shadow: none !important; } html[data-theme="light"] .hero__eyebrow-dot { background: var(--color-accent-vivid) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-red-700) 20%, transparent), 0 0 18px color-mix(in srgb, var(--color-red-700) 55%, transparent) !important; } html[data-theme="light"] .hero__title { color: var(--color-text) !important; text-shadow: none !important; } /* hero__title-em was a gradient (white→red→white) — INVISIBLE op wit. Maak het een solide vivid red zonder gradient/animatie. */ html[data-theme="light"] .hero__title-em { background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; -webkit-text-fill-color: var(--color-accent-vivid) !important; color: var(--color-accent-vivid) !important; animation: none !important; font-weight: 700; } html[data-theme="light"] .hero__lead { color: var(--color-text-soft) !important; text-shadow: none !important; } html[data-theme="light"] .hero__trust { color: var(--color-text-soft) !important; } html[data-theme="light"] .hero__trust li { background: rgba(255, 255, 255, 0.85) !important; border: 1px solid rgba(10, 10, 12, 0.16) !important; color: var(--color-text) !important; box-shadow: 0 1px 2px rgba(20, 18, 12, 0.04); } html[data-theme="light"] .hero__trust li:hover { background: #ffffff !important; border-color: color-mix(in srgb, var(--color-red-700) 45%, transparent) !important; } html[data-theme="light"] .hero__trust li svg { color: var(--color-accent-vivid); opacity: 1 !important; } html[data-theme="light"] .hero__trust li strong { color: var(--color-text); font-weight: 700; } /* ── BUTTONS — Fat-Loss Stack CTA als VIVID-RED filled ─────────── */ /* Primary stays dark (high-contrast on paper). Secondary CTA naast primary (zoals "Fat-Loss Stack from €49") wordt VIVID RED zodat het echt opvalt als tweede actie — ipv flauwe outline. */ html[data-theme="light"] .hero__actions .btn--secondary, html[data-theme="light"] .btn--secondary.btn--lg { background: var(--color-accent-vivid) !important; color: #ffffff !important; border-color: var(--color-accent-vivid) !important; font-weight: 600; box-shadow: 0 6px 18px color-mix(in srgb, var(--color-red-700) 32%, transparent), 0 1px 2px color-mix(in srgb, var(--color-red-700) 18%, transparent); } html[data-theme="light"] .hero__actions .btn--secondary:hover, html[data-theme="light"] .btn--secondary.btn--lg:hover { background: var(--color-accent-deep) !important; border-color: var(--color-accent-deep) !important; color: #ffffff !important; box-shadow: 0 10px 26px color-mix(in srgb, var(--color-red-700) 40%, transparent), 0 2px 4px color-mix(in srgb, var(--color-red-700) 22%, transparent); transform: translateY(-1px); } /* ── Eyebrows / kicker labels — overal vivid red (geen pink) ────── */ html[data-theme="light"] .section__eyebrow, html[data-theme="light"] .card__eyebrow, html[data-theme="light"] .stack-cta__eyebrow, html[data-theme="light"] .compound-hero__eyebrow, html[data-theme="light"] .tgp-eyebrow, html[data-theme="light"] .tgp-eyebrow--red, html[data-theme="light"] .eyebrow { color: var(--color-accent-vivid); font-weight: 700 !important; letter-spacing: 0.14em; text-transform: uppercase; } /* ── Pink/weak-red badges → VIVID red filled ────────────────────── */ html[data-theme="light"] .badge--accent, html[data-theme="light"] .tgp-badge--red, html[data-theme="light"] .badge--red, html[data-theme="light"] .badge--featured, html[data-theme="light"] .badge--bestseller, html[data-theme="light"] .badge--hot, html[data-theme="light"] .badge--new, html[data-theme="light"] .pill--accent, html[data-theme="light"] .ribbon, html[data-theme="light"] .ribbon--accent { background: var(--color-accent-vivid) !important; color: #ffffff !important; border-color: var(--color-accent-vivid) !important; font-weight: 600; } /* ── Tinted accent-bg surfaces (10% pink) → 16% saturated red ──── */ html[data-theme="light"] .accent-tint, html[data-theme="light"] .surface--accent-soft, html[data-theme="light"] .alert--accent, html[data-theme="light"] .callout--accent, html[data-theme="light"] .info-bar--accent { background: var(--color-accent-soft) !important; border: 1px solid color-mix(in srgb, var(--color-red-700) 32%, transparent) !important; color: var(--color-text) !important; } /* ── Accent text-only links/labels — gebruik vivid niet pastel ─── */ html[data-theme="light"] a.text-accent, html[data-theme="light"] .text-accent, html[data-theme="light"] .link--accent, html[data-theme="light"] .price--accent, html[data-theme="light"] .price--sale, html[data-theme="light"] .stat__value--accent { color: var(--color-accent-vivid) !important; font-weight: 600; } /* ── Borders die "pink-ish" waren → vivid hairline ─────────────── */ html[data-theme="light"] .card.is-featured, html[data-theme="light"] .card--featured, html[data-theme="light"] .compound-card.is-bestseller { border-color: var(--color-accent-vivid) !important; border-width: 1.5px !important; box-shadow: 0 2px 6px rgba(20, 18, 12, 0.06), 0 0 0 1px color-mix(in srgb, var(--color-red-700) 12%, transparent) !important; } /* ── Mobile: hero typography moet niet kleiner door dark-mode-only !important ── */ @media (max-width: 640px) { html[data-theme="light"] .hero--aurora { padding: 60px 0 48px; } html[data-theme="light"] .hero__title-em { color: var(--color-accent-vivid) !important; } } /* ════════════════════════════════════════════════════════════════════ 50. LIGHT MODE — NAV/HEADER + UNIFIED HOVER SYSTEM ════════════════════════════════════════════════════════════════════ Strategy: één coherent hover-gedrag site-wide → "rust → vivid red". Resting states zijn rustig (paper + dark text). Hover = brand-dominant vivid red (border / icon / label flippen). Geen pink-was, geen flat transitions. Scoped to [data-theme="light"]. */ /* ── Header — paper bg met subtle warm-glass i.p.v. zwart ─────── */ html[data-theme="light"] .site-header { background: rgba(246, 244, 239, 0.86) !important; backdrop-filter: saturate(140%) blur(12px) !important; -webkit-backdrop-filter: saturate(140%) blur(12px) !important; border-bottom: 1px solid rgba(10, 10, 12, 0.10) !important; } html[data-theme="light"] .site-header.is-scrolled { background: rgba(246, 244, 239, 0.96) !important; border-bottom-color: rgba(10, 10, 12, 0.16) !important; box-shadow: 0 4px 20px -8px rgba(20, 18, 12, 0.10) !important; } html[data-theme="light"] .site-header.is-hidden { /* keep transform; nothing else */ } /* ── Brand wordmark + logo ─────────────────────────────────────── */ html[data-theme="light"] .site-header__brand { color: var(--color-text) !important; } html[data-theme="light"] .site-header__brand:hover { color: var(--color-accent-vivid) !important; } /* ── Nav links (Catalog / Research / About) — desktop ─────────── */ html[data-theme="light"] .site-header__nav a { color: var(--color-text-soft) !important; position: relative; transition: color 180ms cubic-bezier(.2,.7,.2,1); } html[data-theme="light"] .site-header__nav a:hover { color: var(--color-accent-vivid) !important; } html[data-theme="light"] .site-header__nav a[aria-current="page"]:not(.btn) { color: var(--color-accent-vivid) !important; font-weight: 600; } /* Subtiele rode underline op hover als premium tell */ html[data-theme="light"] .site-header__nav > a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--color-accent-vivid); transform: scaleX(0); transform-origin: center; transition: transform 220ms cubic-bezier(.2,.7,.2,1); } html[data-theme="light"] .site-header__nav > a:not(.btn):hover::after, html[data-theme="light"] .site-header__nav > a:not(.btn)[aria-current="page"]::after { transform: scaleX(1); } /* Mobile drawer: laat underline weg, gebruik border + bg-tint hover */ @media (max-width: 767px) { html[data-theme="light"] .site-header__nav { background: var(--color-bg) !important; } html[data-theme="light"] .site-header__nav a { border-bottom-color: rgba(10, 10, 12, 0.08) !important; } html[data-theme="light"] .site-header__nav a::after { display: none; } html[data-theme="light"] .site-header__nav a:hover { background: var(--color-accent-soft) !important; padding-inline: var(--space-3) !important; margin-inline: calc(var(--space-3) * -1) !important; border-radius: var(--radius-8); } } /* ── Mega-menu trigger (Catalog / Research dropdown) ──────────── */ html[data-theme="light"] .nav-shop__trigger { color: var(--color-text-soft) !important; } /* Hover krijgt darker text — geen accent (anders niet te onderscheiden van current-page indicator). */ html[data-theme="light"] .nav-shop__trigger:hover { color: var(--color-text) !important; } /* Expanded krijgt GEEN aparte kleur — alleen chevron rotate signaleert open. Voorkomt dat expanded trigger eruitziet als current-page trigger. */ html[data-theme="light"] .nav-shop__trigger[aria-expanded="true"]:not([aria-current="page"]) { color: var(--color-text-soft) !important; } /* Current-page = accent rood — duidelijk uniek visueel signaal. */ html[data-theme="light"] .nav-shop__trigger[aria-current="page"], html[data-theme="light"] .nav-shop__trigger[aria-current="page"]:hover, html[data-theme="light"] .nav-shop__trigger[aria-current="page"][aria-expanded="true"] { color: var(--color-accent-vivid) !important; } html[data-theme="light"] .nav-shop__chevron { color: currentColor; } /* ── Mega-menu PANEL — wit op paper met red-ring on focus ──── */ html[data-theme="light"] .nav-shop__panel { background: #ffffff !important; border: 1px solid rgba(10, 10, 12, 0.10) !important; box-shadow: 0 24px 56px rgba(20, 18, 12, 0.14), 0 8px 16px rgba(20, 18, 12, 0.08) !important; } /* ── Shop-cards inside mega-menu — quantum hover ──────────── */ html[data-theme="light"] .shop-card { background: #ffffff !important; border: 1.5px solid rgba(10, 10, 12, 0.12) !important; color: var(--color-text) !important; transition: transform .28s cubic-bezier(.2,.7,.2,1), border-color .22s cubic-bezier(.2,.7,.2,1), box-shadow .28s cubic-bezier(.2,.7,.2,1), background .22s cubic-bezier(.2,.7,.2,1); } html[data-theme="light"] .shop-card:hover, html[data-theme="light"] .shop-card:focus-visible { background: #ffffff !important; border-color: var(--color-accent-vivid) !important; box-shadow: 0 12px 28px rgba(20, 18, 12, 0.10), 0 0 0 1px color-mix(in srgb, var(--color-red-700) 18%, transparent) !important; transform: translateY(-2px); } html[data-theme="light"] .shop-card:hover .shop-card__label, html[data-theme="light"] .shop-card:focus-visible .shop-card__label { color: var(--color-accent-vivid) !important; } html[data-theme="light"] .shop-card__label { color: var(--color-text) !important; } html[data-theme="light"] .shop-card__lead { color: var(--color-text-muted) !important; } html[data-theme="light"] .shop-card--primary { background: linear-gradient(135deg, color-mix(in srgb, var(--color-red-700) 8%, transparent), color-mix(in srgb, var(--color-red-700) 4%, transparent)) !important; border-color: color-mix(in srgb, var(--color-red-700) 32%, transparent) !important; } html[data-theme="light"] .shop-card--primary .shop-card__label { color: var(--color-accent-vivid) !important; } /* ── Icon buttons (search / cart / account / wishlist / toggle) ─────── */ html[data-theme="light"] .nav-search__trigger, html[data-theme="light"] .nav-cart__trigger, html[data-theme="light"] .nav-account__trigger, html[data-theme="light"] .nav-wishlist, html[data-theme="light"] .site-header__toggle { background: rgba(255, 255, 255, 0.6) !important; border: 1px solid rgba(10, 10, 12, 0.14) !important; color: var(--color-text) !important; transition: background 180ms cubic-bezier(.2,.7,.2,1), border-color 180ms cubic-bezier(.2,.7,.2,1), color 180ms cubic-bezier(.2,.7,.2,1), transform 180ms cubic-bezier(.2,.7,.2,1); } html[data-theme="light"] .nav-search__trigger:hover, html[data-theme="light"] .nav-cart__trigger:hover, html[data-theme="light"] .nav-account__trigger:hover, html[data-theme="light"] .nav-wishlist:hover, html[data-theme="light"] .site-header__toggle:hover, html[data-theme="light"] .nav-search[data-open="true"] .nav-search__trigger, html[data-theme="light"] .nav-cart[data-open="true"] .nav-cart__trigger, html[data-theme="light"] .nav-account[data-open="true"] .nav-account__trigger, html[data-theme="light"] .site-header__toggle[aria-expanded="true"] { background: var(--color-accent-soft) !important; border-color: var(--color-accent-vivid) !important; color: var(--color-accent-vivid) !important; } /* Cart count pill — vivid red badge */ html[data-theme="light"] .nav-cart__count, html[data-theme="light"] [data-cart-count] { background: var(--color-accent-vivid) !important; color: #ffffff !important; border-color: var(--color-accent-vivid) !important; } /* ── Search panel (live filter) ─────────────────────────── */ html[data-theme="light"] .nav-search__panel { background: #ffffff !important; border: 1px solid rgba(10, 10, 12, 0.10) !important; box-shadow: 0 24px 56px rgba(20, 18, 12, 0.14), 0 8px 16px rgba(20, 18, 12, 0.08) !important; } html[data-theme="light"] .nav-search__input { background: var(--color-bg) !important; border-color: rgba(10, 10, 12, 0.14) !important; color: var(--color-text) !important; } html[data-theme="light"] .nav-search__input:focus { border-color: var(--color-accent-vivid) !important; outline: 0; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-red-700) 18%, transparent) !important; } html[data-theme="light"] .nav-search__input::placeholder { color: var(--color-text-faint) !important; } html[data-theme="light"] .nav-search__result { color: var(--color-text) !important; } html[data-theme="light"] .nav-search__result:hover, html[data-theme="light"] .nav-search__result:focus-visible { background: var(--color-accent-soft) !important; color: var(--color-text) !important; } html[data-theme="light"] .nav-search__result-name { color: var(--color-text) !important; } html[data-theme="light"] .nav-search__result-meta { color: var(--color-text-muted) !important; } /* ── Announcement bar — vivid red strip in light mode (premium) ── */ html[data-theme="light"] .announcement-bar { background: linear-gradient(90deg, var(--color-accent-vivid), var(--color-accent-deep)) !important; color: #ffffff !important; border-bottom: 0 !important; } html[data-theme="light"] .announcement-bar *, html[data-theme="light"] .announcement-bar a { color: #ffffff !important; } html[data-theme="light"] .announcement-bar strong { color: #ffffff !important; font-weight: 700; } html[data-theme="light"] .announcement-bar__close { color: rgba(255, 255, 255, 0.85) !important; } html[data-theme="light"] .announcement-bar__close:hover { color: #ffffff !important; } /* ════════════════════════════════════════════════════════════ UNIVERSAL HOVER SYSTEM (site-wide, niet alleen nav) ════════════════════════════════════════════════════════════ */ /* All body links — hover wordt vivid red */ html[data-theme="light"] a { transition: color 180ms cubic-bezier(.2,.7,.2,1); } html[data-theme="light"] main a:not(.btn):not(.card):not(.shop-card):not(.nav-search__result):not(.site-header__brand):not(.site-footer a):not(.compound-card):not(.category-card):hover { color: var(--color-accent-vivid) !important; text-decoration-color: var(--color-accent-vivid); } /* Buttons — coherent treatment site-wide */ html[data-theme="light"] .btn { transition: background 200ms cubic-bezier(.2,.7,.2,1), border-color 200ms cubic-bezier(.2,.7,.2,1), color 200ms cubic-bezier(.2,.7,.2,1), transform 200ms cubic-bezier(.2,.7,.2,1), box-shadow 240ms cubic-bezier(.2,.7,.2,1); } html[data-theme="light"] .btn:hover { transform: translateY(-1px); } html[data-theme="light"] .btn--primary:hover { background: var(--color-accent-vivid); border-color: var(--color-accent-vivid); color: #ffffff; box-shadow: 0 8px 22px color-mix(in srgb, var(--color-red-700) 32%, transparent) !important; } /* Compound + category cards (catalog) — premium hover */ html[data-theme="light"] .compound-card, html[data-theme="light"] .category-card, html[data-theme="light"] .product-card { background: #ffffff !important; border: 1.5px solid rgba(10, 10, 12, 0.12) !important; color: var(--color-text); transition: transform .32s cubic-bezier(.2,.7,.2,1), border-color .22s cubic-bezier(.2,.7,.2,1), box-shadow .32s cubic-bezier(.2,.7,.2,1); } html[data-theme="light"] .compound-card:hover, html[data-theme="light"] .category-card:hover, html[data-theme="light"] .product-card:hover { border-color: var(--color-accent-vivid) !important; box-shadow: 0 16px 38px rgba(20, 18, 12, 0.12), 0 0 0 1px color-mix(in srgb, var(--color-red-700) 16%, transparent) !important; transform: translateY(-3px); } html[data-theme="light"] .compound-card:hover .compound-card__name, html[data-theme="light"] .category-card:hover .category-card__title, html[data-theme="light"] .product-card:hover .product-card__title { color: var(--color-accent-vivid) !important; } /* Form inputs — red focus ring everywhere */ html[data-theme="light"] input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):focus, html[data-theme="light"] textarea:focus, html[data-theme="light"] select:focus { outline: 0 !important; border-color: var(--color-accent-vivid) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-red-700) 18%, transparent) !important; } /* Footer — link hover wordt warm wit/red i.p.v. flat */ html[data-theme="light"] .site-footer a:hover { color: #ffffff !important; text-shadow: 0 0 14px rgba(255, 255, 255, 0.12); } html[data-theme="light"] .site-footer__heading[aria-expanded="true"], html[data-theme="light"] .site-footer__heading:hover { color: #ffffff !important; } /* Theme-toggle button (the floater itself) — leesbaar in light */ html[data-theme="light"] #togo-theme-toggle { background: #ffffff !important; border: 1.5px solid rgba(10, 10, 12, 0.18) !important; color: var(--color-text) !important; box-shadow: 0 6px 18px rgba(20, 18, 12, 0.10); } html[data-theme="light"] #togo-theme-toggle:hover { border-color: var(--color-accent-vivid) !important; color: var(--color-accent-vivid) !important; } /* ════════════════════════════════════════════════════════════════════ 51. LIGHT MODE — NUCLEAR COMPREHENSIVE FIX ════════════════════════════════════════════════════════════════════ Strategie: 20-plannen brief uitgevoerd in één samenhangend block. - Product cards INVERTED (black-on-paper, red border) - Filter sidebar volledig herzien - Globe/lang switcher inline-styles overruled - Checkout CTA bulletproof - Badge color matrix met VIVID filled colors (geen pastel) - Footer semantic colors retained - Stock indicators semantic - Cookie banner / modal / drawer / toast — paper variants - Plus catch-all safety net voor hardcoded white text. */ /* ── Filter sidebar (shop-filters) — paper bg + dark text ──── */ html[data-theme="light"] .shop-filters { background: #ffffff !important; border: 1.5px solid rgba(10, 10, 12, 0.10) !important; box-shadow: 0 2px 6px rgba(20, 18, 12, 0.04); } html[data-theme="light"] .shop-filters__group { border-bottom-color: rgba(10, 10, 12, 0.08) !important; } html[data-theme="light"] .shop-filters__label { color: var(--color-text) !important; font-weight: 700 !important; } html[data-theme="light"] .shop-filters__option { color: var(--color-text-soft) !important; } html[data-theme="light"] .shop-filters__option:hover { color: var(--color-accent-vivid) !important; } html[data-theme="light"] .shop-filters__option input { accent-color: var(--color-accent-vivid) !important; } html[data-theme="light"] .shop-filters__count { color: var(--color-text-faint) !important; } html[data-theme="light"] .shop-filters__clear { background: transparent !important; border: 1.5px solid rgba(10, 10, 12, 0.18) !important; color: var(--color-text) !important; } html[data-theme="light"] .shop-filters__clear:hover { border-color: var(--color-accent-vivid) !important; color: var(--color-accent-vivid) !important; background: color-mix(in srgb, var(--color-red-700) 6%, transparent) !important; } /* ── Shop toolbar (count / search / sort / density) ────────── */ html[data-theme="light"] .shop-toolbar__count { color: var(--color-text-soft) !important; } html[data-theme="light"] .shop-toolbar__count strong { color: var(--color-text) !important; } html[data-theme="light"] .shop-search input { background: #ffffff !important; border: 1.5px solid rgba(10, 10, 12, 0.14) !important; color: var(--color-text) !important; } html[data-theme="light"] .shop-search input::placeholder { color: var(--color-text-faint) !important; } html[data-theme="light"] .shop-search input:focus { border-color: var(--color-accent-vivid) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-red-700) 18%, transparent) !important; } html[data-theme="light"] .shop-search svg { color: var(--color-text-muted) !important; } html[data-theme="light"] .shop-sort { background: #ffffff !important; border: 1.5px solid rgba(10, 10, 12, 0.14) !important; color: var(--color-text) !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23161616' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 10px center !important; } html[data-theme="light"] .shop-sort:hover { border-color: var(--color-accent-vivid) !important; color: var(--color-accent-vivid) !important; } html[data-theme="light"] .shop-density { background: #ffffff !important; border: 1.5px solid rgba(10, 10, 12, 0.14) !important; } html[data-theme="light"] .shop-density button { color: var(--color-text-soft) !important; } html[data-theme="light"] .shop-density button.is-active { background: var(--color-accent-soft) !important; color: var(--color-accent-vivid) !important; } html[data-theme="light"] .shop-density button:hover:not(.is-active) { color: var(--color-text) !important; } html[data-theme="light"] .shop-mobile-filter-btn { background: #ffffff !important; border: 1.5px solid rgba(10, 10, 12, 0.18) !important; color: var(--color-text) !important; } html[data-theme="light"] .shop-mobile-filter-btn:hover { border-color: var(--color-accent-vivid) !important; color: var(--color-accent-vivid) !important; } /* ── Quick-filter chips (top of catalog) ───────────────────── */ html[data-theme="light"] .shop-quick-filter, html[data-theme="light"] .cat-quick-filter { background: #ffffff !important; border: 1.5px solid rgba(10, 10, 12, 0.14) !important; color: var(--color-text) !important; transition: all 180ms cubic-bezier(.2,.7,.2,1); } html[data-theme="light"] .shop-quick-filter:hover, html[data-theme="light"] .cat-quick-filter:hover { border-color: var(--color-accent-vivid) !important; color: var(--color-accent-vivid) !important; } html[data-theme="light"] .shop-quick-filter[aria-pressed="true"], html[data-theme="light"] .cat-quick-filter[aria-pressed="true"] { background: var(--color-text) !important; color: var(--color-bg) !important; border-color: var(--color-text) !important; } /* ════════════════════════════════════════════════════════════ PRODUCT CARDS — INVERTED (black-on-paper, red border) Per brief: zwart filled cards, rode rand, vult de pagina. ════════════════════════════════════════════════════════════ */ html[data-theme="light"] .compound-card, html[data-theme="light"] .category-card, html[data-theme="light"] .product-card, html[data-theme="light"] .featured-card, html[data-theme="light"] .stack-card, html[data-theme="light"] .tier-card { background: #0a0a0d !important; border: var(--tgp-card-border-width) solid var(--tgp-card-border) !important; color: #f2efe8 !important; box-shadow: 0 2px 6px rgba(20, 18, 12, 0.06), 0 0 0 1px color-mix(in srgb, var(--color-red-700) 8%, transparent) !important; transition: transform .32s cubic-bezier(.2,.7,.2,1), border-color .22s cubic-bezier(.2,.7,.2,1), box-shadow .32s cubic-bezier(.2,.7,.2,1); } /* All inner text inherits to white-cream */ html[data-theme="light"] .compound-card *:not(.badge):not(.tgp-badge):not([class*="badge--"]), html[data-theme="light"] .category-card *:not(.badge):not(.tgp-badge):not([class*="badge--"]), html[data-theme="light"] .product-card *:not(.badge):not(.tgp-badge):not([class*="badge--"]), html[data-theme="light"] .featured-card *:not(.badge):not(.tgp-badge):not([class*="badge--"]), html[data-theme="light"] .stack-card *:not(.badge):not(.tgp-badge):not([class*="badge--"]), html[data-theme="light"] .tier-card *:not(.badge):not(.tgp-badge):not([class*="badge--"]) { color: inherit; } /* Card structural elements */ html[data-theme="light"] .compound-card__name, html[data-theme="light"] .product-card__title, html[data-theme="light"] .category-card__title, html[data-theme="light"] .tier-card__title { color: #ffffff !important; font-weight: 600; } html[data-theme="light"] .compound-card__cat, html[data-theme="light"] .compound-card__desc, html[data-theme="light"] .product-card__meta, html[data-theme="light"] .tier-card__body, html[data-theme="light"] .tier-card__items { color: #c8c4ba !important; } html[data-theme="light"] .compound-card__price, html[data-theme="light"] .product-card__price, html[data-theme="light"] .tier-card__price { color: #ffffff !important; font-weight: 600; } html[data-theme="light"] .tier-card__eyebrow, html[data-theme="light"] .compound-card__eyebrow, html[data-theme="light"] .card__eyebrow { color: var(--color-accent-vivid) !important; } html[data-theme="light"] .tier-card__price-strike { color: rgba(255, 255, 255, 0.4) !important; text-decoration-color: rgba(255, 255, 255, 0.5); } /* tier-card__save handled universally in Section 59 (solid green + white) */ html[data-theme="light"] .tier-card__price-note { color: #9a958b !important; } /* Card media — keep imagery on white-tinted bg INSIDE black card for product pop */ html[data-theme="light"] .compound-card__media, html[data-theme="light"] .product-card__media, html[data-theme="light"] .tier-card__media { background: #f4f1ec !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; } /* Hover lift + brighter red border */ html[data-theme="light"] .compound-card:hover, html[data-theme="light"] .category-card:hover, html[data-theme="light"] .product-card:hover, html[data-theme="light"] .featured-card:hover, html[data-theme="light"] .stack-card:hover, html[data-theme="light"] .tier-card:hover { border-color: var(--color-accent-vivid) !important; border-width: 2px !important; box-shadow: 0 16px 38px rgba(20, 18, 12, 0.20), 0 0 0 1px color-mix(in srgb, var(--color-red-700) 32%, transparent) !important; transform: translateY(-3px) !important; } /* Tier-card selected state — radio:checked */ html[data-theme="light"] .tier-card:has(input:checked) { border-color: var(--color-accent-vivid) !important; border-width: 2px !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-red-700) 20%, transparent), 0 18px 42px rgba(20, 18, 12, 0.26) !important; } html[data-theme="light"] .tier-card__check { color: var(--color-accent-vivid) !important; } /* Override the earlier "all cards = white" rule from Section 48 for product-class cards specifically (inverted now) */ html[data-theme="light"] .card.compound-card, html[data-theme="light"] .card.product-card, html[data-theme="light"] .card.category-card { background: #0a0a0d !important; border-color: color-mix(in srgb, var(--color-red-700) 55%, transparent) !important; } /* ════════════════════════════════════════════════════════════ BADGE COLOR MATRIX — vivid filled (geen pastel-was) ════════════════════════════════════════════════════════════ */ /* On a black product card OR on white page: badge stays saturated. */ html[data-theme="light"] .badge--bestseller, html[data-theme="light"] .tgp-badge--red, html[data-theme="light"] .badge--sale-red, html[data-theme="light"] .ribbon--bestseller { background: var(--color-accent-vivid) !important; color: #ffffff !important; border: 1px solid var(--color-accent-vivid) !important; font-weight: 700 !important; box-shadow: 0 2px 6px color-mix(in srgb, var(--color-red-700) 32%, transparent); } html[data-theme="light"] .badge--new { background: #2563eb !important; color: #ffffff !important; border: 1px solid #2563eb !important; font-weight: 700 !important; box-shadow: 0 2px 6px rgba(37, 99, 235, 0.30); } html[data-theme="light"] .badge--sale { background: #16a34a !important; color: #ffffff !important; border: 1px solid #16a34a !important; font-weight: 700 !important; box-shadow: 0 2px 6px rgba(22, 163, 74, 0.30); } html[data-theme="light"] .badge--premium { background: linear-gradient(135deg, #d4a017, #b8851a) !important; color: #ffffff !important; border: 1px solid #b8851a !important; font-weight: 700 !important; box-shadow: 0 2px 6px rgba(212, 160, 23, 0.32); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); } html[data-theme="light"] .badge--low-stock { background: #ea580c !important; color: #ffffff !important; border: 1px solid #ea580c !important; font-weight: 700 !important; box-shadow: 0 2px 6px rgba(234, 88, 12, 0.30); } html[data-theme="light"] .badge--neutral, html[data-theme="light"] .tgp-badge--paper { background: #ffffff; color: var(--color-text); border: 1px solid rgba(10, 10, 12, 0.18); font-weight: 600 !important; } html[data-theme="light"] .tgp-badge--ink { background: var(--color-text); color: var(--color-bg); border: 1px solid var(--color-text); font-weight: 600 !important; } /* ── Quick-filter dot indicators (kleurcoded) ─────────────── */ html[data-theme="light"] .shop-quick-filter__dot--green { background: #16a34a !important; } html[data-theme="light"] .shop-quick-filter__dot--blue { background: #2563eb !important; } html[data-theme="light"] .shop-quick-filter__dot--accent{ background: var(--color-accent-vivid) !important; } /* ── Stock indicators — semantic colors retained ──────────── */ html[data-theme="light"] .togo-stock--in-stock, html[data-theme="light"] .stock--in-stock { background: rgba(22, 163, 74, 0.10) !important; color: #15803d !important; border: 1px solid rgba(22, 163, 74, 0.32) !important; } html[data-theme="light"] .togo-stock--fresh-batch, html[data-theme="light"] .stock--fresh-batch { background: rgba(245, 158, 11, 0.12) !important; color: #b45309 !important; border: 1px solid rgba(245, 158, 11, 0.36) !important; } html[data-theme="light"] .togo-stock--low-stock, html[data-theme="light"] .stock--low-stock { background: rgba(234, 88, 12, 0.12) !important; color: #c2410c !important; border: 1px solid rgba(234, 88, 12, 0.36) !important; } html[data-theme="light"] .togo-stock--out-of-stock, html[data-theme="light"] .stock--out-of-stock { background: color-mix(in srgb, var(--color-red-700) 10%, transparent) !important; color: var(--color-accent-deep) !important; border: 1px solid color-mix(in srgb, var(--color-red-700) 36%, transparent) !important; } /* ════════════════════════════════════════════════════════════ GLOBE / LANGUAGE SWITCHER — overrule inline JS styles ════════════════════════════════════════════════════════════ */ html[data-theme="light"] #togo-lang-switcher-btn { background: rgba(255, 255, 255, 0.85) !important; border: 1.5px solid rgba(10, 10, 12, 0.16) !important; color: var(--color-accent-vivid) !important; transition: background 180ms cubic-bezier(.2,.7,.2,1), border-color 180ms cubic-bezier(.2,.7,.2,1), color 180ms cubic-bezier(.2,.7,.2,1); } html[data-theme="light"] #togo-lang-switcher-btn:hover, html[data-theme="light"] #togo-lang-switcher-btn[aria-expanded="true"] { background: var(--color-accent-soft) !important; border-color: var(--color-accent-vivid) !important; color: var(--color-accent-vivid) !important; } html[data-theme="light"] #togo-lang-switcher-panel { background: #ffffff !important; border: 1px solid rgba(10, 10, 12, 0.10) !important; box-shadow: 0 24px 56px rgba(20, 18, 12, 0.16), 0 8px 16px rgba(20, 18, 12, 0.08) !important; } html[data-theme="light"] #togo-lang-switcher-panel button, html[data-theme="light"] #togo-lang-switcher-panel a { color: var(--color-text) !important; background: transparent !important; } html[data-theme="light"] #togo-lang-switcher-panel button:hover, html[data-theme="light"] #togo-lang-switcher-panel a:hover { background: var(--color-accent-soft) !important; color: var(--color-accent-vivid) !important; } html[data-theme="light"] #togo-lang-banner { background: #ffffff !important; color: var(--color-text) !important; border: 1px solid rgba(10, 10, 12, 0.10) !important; } html[data-theme="light"] #togo-lang-banner button { color: var(--color-text) !important; } /* ════════════════════════════════════════════════════════════ CHECKOUT CTA — bulletproof black-filled, red-on-hover ════════════════════════════════════════════════════════════ */ html[data-theme="light"] #fatloss-checkout-btn, html[data-theme="light"] .btn--primary.btn--lg.btn--block, html[data-theme="light"] button[type="submit"].btn--primary { background: #0a0a0d !important; color: #ffffff !important; border: 1.5px solid #0a0a0d !important; font-weight: 700 !important; letter-spacing: 0.02em; box-shadow: 0 8px 22px rgba(20, 18, 12, 0.18); } html[data-theme="light"] #fatloss-checkout-btn *, html[data-theme="light"] .btn--primary.btn--lg.btn--block *, html[data-theme="light"] button[type="submit"].btn--primary * { color: #ffffff !important; } html[data-theme="light"] #fatloss-checkout-btn:hover, html[data-theme="light"] .btn--primary.btn--lg.btn--block:hover, html[data-theme="light"] button[type="submit"].btn--primary:hover { background: var(--color-accent-vivid) !important; border-color: var(--color-accent-vivid) !important; color: #ffffff !important; box-shadow: 0 12px 32px color-mix(in srgb, var(--color-red-700) 40%, transparent) !important; transform: translateY(-1px); } html[data-theme="light"] #fatloss-checkout-btn:hover *, html[data-theme="light"] .btn--primary.btn--lg.btn--block:hover *, html[data-theme="light"] button[type="submit"].btn--primary:hover * { color: #ffffff !important; } /* Checkout summary card structure */ html[data-theme="light"] .checkout-summary { background: var(--color-bg-elevated) !important; border: 1px solid rgba(10, 10, 12, 0.10) !important; } html[data-theme="light"] .checkout-summary__label { color: var(--color-text-muted) !important; } html[data-theme="light"] .checkout-summary__name, html[data-theme="light"] .checkout-summary__price { color: var(--color-text) !important; } html[data-theme="light"] .checkout-form__note, html[data-theme="light"] .checkout-form__legal { color: var(--color-text-muted) !important; } /* ════════════════════════════════════════════════════════════ PERIPHERAL UI: cookie banner / toast / modal / drawer / compare ════════════════════════════════════════════════════════════ */ /* Cookie consent banner */ html[data-theme="light"] .cookie-banner, html[data-theme="light"] #togo-cookie-banner, html[data-theme="light"] .compliance-banner { background: #ffffff !important; color: var(--color-text) !important; border: 1px solid rgba(10, 10, 12, 0.14) !important; box-shadow: 0 -10px 32px rgba(20, 18, 12, 0.10) !important; } html[data-theme="light"] .cookie-banner *, html[data-theme="light"] #togo-cookie-banner *, html[data-theme="light"] .compliance-banner * { color: inherit; } /* Toast / snackbar */ html[data-theme="light"] .toast, html[data-theme="light"] .togo-toast, html[data-theme="light"] .snackbar { background: #ffffff !important; color: var(--color-text) !important; border: 1.5px solid var(--color-accent-vivid) !important; box-shadow: 0 12px 28px rgba(20, 18, 12, 0.14) !important; } /* Modal / dialog */ html[data-theme="light"] dialog, html[data-theme="light"] .modal, html[data-theme="light"] .togo-modal { background: #ffffff !important; color: var(--color-text) !important; border: 1px solid rgba(10, 10, 12, 0.14) !important; } html[data-theme="light"] dialog::backdrop, html[data-theme="light"] .modal__backdrop { background: rgba(20, 18, 12, 0.40) !important; } /* Compare drawer + footer */ html[data-theme="light"] #togo-compare-footer, html[data-theme="light"] .compare-bar { background: rgba(255, 255, 255, 0.96) !important; color: var(--color-text) !important; border-top: 1.5px solid rgba(10, 10, 12, 0.14) !important; } html[data-theme="light"] #togo-compare-footer *, html[data-theme="light"] .compare-bar * { color: inherit; } /* ════════════════════════════════════════════════════════════ SAFETY NET — catch hardcoded white-on-white antipatterns ════════════════════════════════════════════════════════════ */ /* Any element on the page (outside footer/dark-cards) that has `color:#cbd5e1` etc. — this is impossible to enumerate fully, so we provide per-section paper text whenever we know context. The product-card overrides above + filter-sidebar already cover the biggest sources. Below we add common breadcrumb/meta classes that tend to use "muted light text" in dark mode. */ html[data-theme="light"] body :not(.site-footer):not(.compound-card):not(.product-card):not(.category-card):not(.tier-card):not(.featured-card):not(.stack-card):not(#togo-compare-footer) > .text-muted, html[data-theme="light"] body :not(.site-footer) > .meta, html[data-theme="light"] body :not(.site-footer) > .breadcrumb, html[data-theme="light"] body :not(.site-footer) > .breadcrumbs, html[data-theme="light"] body :not(.site-footer) > .crumb { color: var(--color-text-muted) !important; } /* ════════════════════════════════════════════════════════════════════ 52. LIGHT MODE — REAL-CLASS COVERAGE (THE BIG ONE) ════════════════════════════════════════════════════════════════════ Discovery: shop product cards = .card.card--interactive.card--media (NIET .compound-card). Sections 48/51 misten de juiste selectors. Hier hit ik de échte markup: inverted product cards, cat-hero (live live category page), breadcrumbs, variant-chips, compound-compare, stacks-hero (inline styles), stack-card, stack-compare. */ /* ════════════════════════════════════════════════════════════ PRODUCT CARDS — inverted (override Section 48 .card defaults) ════════════════════════════════════════════════════════════ */ /* Higher-specificity selector beats Section 48's plain .card rule */ html[data-theme="light"] a.card.card--media, html[data-theme="light"] a.card.card--interactive.card--media, html[data-theme="light"] .shop-grid a.card, html[data-theme="light"] .shop-grid > a { background: #0a0a0d !important; border: var(--tgp-card-border-width) solid var(--tgp-card-border) !important; color: #f2efe8 !important; box-shadow: 0 2px 6px rgba(20, 18, 12, 0.10), 0 0 0 1px color-mix(in srgb, var(--color-red-700) 20%, transparent) !important; } html[data-theme="light"] a.card.card--media .card__title, html[data-theme="light"] .shop-grid a.card .card__title { color: #ffffff !important; font-weight: 600; } html[data-theme="light"] a.card.card--media .card__body p.card__eyebrow, html[data-theme="light"] .shop-grid a.card .card__body p.card__eyebrow, html[data-theme="light"] a.card.card--media .card__eyebrow, html[data-theme="light"] .shop-grid a.card .card__eyebrow { color: var(--tgp-brand-red) !important; font-weight: 700 !important; letter-spacing: 0.10em !important; text-transform: uppercase; } html[data-theme="light"] a.card.card--media .card__body-text, html[data-theme="light"] .shop-grid a.card .card__body-text, html[data-theme="light"] a.card.card--media .card__body p:not(.card__eyebrow) { color: #c8c4ba !important; } /* card__media bg now universally dark gradient — see Section 54 base. */ /* Hover: vivid red border, lift, deeper shadow */ html[data-theme="light"] a.card.card--media:hover, html[data-theme="light"] .shop-grid a.card:hover { background: #0a0a0d !important; border-color: var(--color-accent-vivid) !important; box-shadow: 0 18px 42px rgba(20, 18, 12, 0.20), 0 0 0 2px color-mix(in srgb, var(--color-red-700) 36%, transparent) !important; transform: translateY(-3px); } /* ════════════════════════════════════════════════════════════ CATEGORY HERO (cat-hero) — paper aurora + dark text Hardcoded #0a0a0c bg in category-glowup.css overruled here. ════════════════════════════════════════════════════════════ */ html[data-theme="light"] .cat-hero { background: #ffffff !important; border: 1.5px solid rgba(10, 10, 12, 0.10) !important; background-image: radial-gradient(ellipse 60% 50% at 78% -10%, color-mix(in srgb, var(--color-red-700) 16%, transparent), transparent 60%), radial-gradient(ellipse 50% 45% at 18% -15%, color-mix(in srgb, var(--color-red-700) 12%, transparent), transparent 55%), linear-gradient(180deg, color-mix(in srgb, var(--color-red-700) 4%, transparent) 0%, transparent 55%) !important; box-shadow: 0 2px 6px rgba(20, 18, 12, 0.04); } /* Breadcrumb inside cat-hero (and same pattern site-wide) */ html[data-theme="light"] .cat-hero__breadcrumb { color: var(--color-text-muted) !important; } html[data-theme="light"] .cat-hero__breadcrumb a { color: var(--color-text-soft) !important; } html[data-theme="light"] .cat-hero__breadcrumb a:hover { color: var(--color-accent-vivid) !important; } html[data-theme="light"] .cat-hero__breadcrumb__sep { color: var(--color-text-faint) !important; } html[data-theme="light"] .cat-hero__eyebrow { color: var(--color-accent-vivid) !important; } html[data-theme="light"] .cat-hero__title { color: var(--color-text) !important; } html[data-theme="light"] .cat-hero__lead { color: var(--color-text-soft) !important; } html[data-theme="light"] .cat-stat { background: rgba(255, 255, 255, 0.85) !important; border: 1px solid rgba(10, 10, 12, 0.10) !important; box-shadow: 0 1px 2px rgba(20, 18, 12, 0.03); } html[data-theme="light"] .cat-stat__label { color: var(--color-text-muted) !important; } html[data-theme="light"] .cat-stat__value { color: var(--color-text) !important; } /* Make the value pop with vivid red for the most important stat */ html[data-theme="light"] .cat-hero__stats .cat-stat:first-child .cat-stat__value { color: var(--color-accent-vivid) !important; } html[data-theme="light"] .cat-stat__sub { color: var(--color-text-muted) !important; } html[data-theme="light"] .cat-quick-filters__label { color: var(--color-text-muted) !important; } html[data-theme="light"] .cat-quick-filter { background: #ffffff !important; border: 1.5px solid rgba(10, 10, 12, 0.14) !important; color: var(--color-text) !important; } html[data-theme="light"] .cat-quick-filter:hover { border-color: var(--color-accent-vivid) !important; color: var(--color-accent-vivid) !important; } html[data-theme="light"] .cat-quick-filter.is-active { background: var(--color-accent-vivid) !important; border-color: var(--color-accent-vivid) !important; color: #ffffff !important; } html[data-theme="light"] .cat-quick-filter.is-active::before { color: #ffffff !important; } html[data-theme="light"] .cat-section-head__title { color: var(--color-text) !important; } html[data-theme="light"] .cat-section-head__bar { background: linear-gradient(90deg, rgba(10, 10, 12, 0.12), transparent) !important; } /* ════════════════════════════════════════════════════════════ BREADCRUMBS site-wide (.breadcrumb) ════════════════════════════════════════════════════════════ */ html[data-theme="light"] .breadcrumb { color: var(--color-text-muted) !important; } html[data-theme="light"] .breadcrumb a { color: var(--color-text-soft) !important; text-decoration: none; } html[data-theme="light"] .breadcrumb a:hover { color: var(--color-accent-vivid) !important; } html[data-theme="light"] .breadcrumb__sep { color: var(--color-text-faint) !important; } html[data-theme="light"] .breadcrumb__current { color: var(--color-text) !important; font-weight: 500; } /* ════════════════════════════════════════════════════════════ COMPOUND HERO (PDP) — black filled media with red border Per ops: bij zwart wel een goeie overloop, bij wit niet. ════════════════════════════════════════════════════════════ */ /* compound-hero__media + __badge handled universally in Sections 54 + 57 */ /* ════════════════════════════════════════════════════════════ VARIANT CHIPS PDP — universal layout + colors (BOTH MODES) Per ops: consistency in dark + light. Same layout same colors. ════════════════════════════════════════════════════════════ */ .variant-chip__label { display: flex; flex-direction: column; align-items: stretch; justify-content: center; padding: 10px 14px; min-height: 64px; min-width: 96px; gap: 4px; text-align: left; background: #0a0a0d; border: 1.5px solid color-mix(in srgb, var(--color-red-700) 40%, transparent); color: #f2efe8; } .variant-chip:hover .variant-chip__label { border-color: var(--tgp-brand-red); color: #ffffff; background: #0a0a0d; } .variant-chip input:checked + .variant-chip__label { background: var(--tgp-brand-red); border-color: var(--tgp-brand-red); color: #ffffff; box-shadow: 0 6px 18px var(--tgp-brand-glow); } .variant-chip__row { display: flex; align-items: center; gap: 10px; width: 100%; justify-content: space-between; } .variant-chip__row--top { font-size: 14px; font-weight: 700; } .variant-chip__row--bottom { font-size: 11.5px; font-weight: 500; margin-top: 2px; } .variant-chip__size { font-weight: 700; white-space: nowrap; } .variant-chip__per-unit { font-variant-numeric: tabular-nums; white-space: nowrap; } /* Universal best-deal sub-chip (gold gradient, same in both modes) */ .variant-chip__best { background: linear-gradient(135deg, #d4a017, #b8851a); color: #ffffff; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18); box-shadow: 0 2px 6px rgba(212, 160, 23, 0.32); } /* Universal low-stock sub-chip (orange tint, same in both modes) */ .variant-chip__low { background: rgba(234, 88, 12, 0.16); color: #fb923c; border: 1px solid rgba(234, 88, 12, 0.40); padding: 2px 8px; border-radius: var(--radius-pill); font-size: 10px; font-weight: 700; letter-spacing: 0.04em; } /* Universal text colors inside chip (same on dark + light bg) */ .variant-chip__size { color: #ffffff; } .variant-chip__per-unit { color: #c8c4ba; } .variant-chip input:checked + .variant-chip__label .variant-chip__per-unit, .variant-chip input:checked + .variant-chip__label .variant-chip__size { color: #ffffff; } /* ════════════════════════════════════════════════════════════ COMPOUND COMPARE TABLE — uses tokens, but pin contrast ════════════════════════════════════════════════════════════ */ html[data-theme="light"] .compound-compare-wrap { background: #ffffff !important; border: 1.5px solid rgba(10, 10, 12, 0.10) !important; box-shadow: 0 2px 6px rgba(20, 18, 12, 0.04); } html[data-theme="light"] .compound-compare-table { color: var(--color-text) !important; } html[data-theme="light"] .compound-compare-table thead th { background: var(--color-bg-elevated) !important; color: var(--color-text) !important; border-bottom-color: rgba(10, 10, 12, 0.12) !important; } html[data-theme="light"] .compound-compare-table thead th:first-child { color: var(--color-text-muted) !important; } html[data-theme="light"] .compound-compare-table thead th.is-current { background: color-mix(in srgb, var(--color-red-700) 8%, transparent) !important; border-bottom-color: color-mix(in srgb, var(--color-red-700) 45%, transparent) !important; } html[data-theme="light"] .compound-compare-table thead th.is-current::before { color: var(--color-accent-vivid) !important; } html[data-theme="light"] .compound-compare-table tbody th { background: var(--color-bg-elevated) !important; color: var(--color-text-muted) !important; border-right-color: rgba(10, 10, 12, 0.10) !important; } html[data-theme="light"] .compound-compare-table tbody td { color: var(--color-text) !important; border-bottom-color: rgba(10, 10, 12, 0.06) !important; } html[data-theme="light"] .compound-compare-table tbody td.is-current { background: color-mix(in srgb, var(--color-red-700) 5%, transparent) !important; } html[data-theme="light"] .compound-compare-table .ccmp-name { color: var(--color-text) !important; } html[data-theme="light"] .compound-compare-table .ccmp-name:hover { color: var(--color-accent-vivid) !important; } html[data-theme="light"] .compound-compare-table .ccmp-stock--green { background: rgba(22, 163, 74, 0.10) !important; color: #15803d !important; } /* ════════════════════════════════════════════════════════════ STACKS PAGE — inline styles overruled stacks-hero / stack-card / stack-compare are