/* ========================================================================== THEME — LIGHT (baulig-structure rebuild) Loaded AFTER styles.css on migrated pages (/, /apply, /thank-you, /vsl, /impressum, /datenschutz). Pages opt in via . Non-migrated pages (regentis, lifeos, results, …) keep the dark theme. Token decisions: - CTA green #00872B — darkest step of brand #00FF41 that passes WCAG AA (4.67:1 against white text). Pure #00FF41 appears ONLY on dark surfaces. - Light-first: #FFFFFF base, #FAFAF8 alternating sections, ink #0D0D0D, muted #5A5A5A. One dark band per page max. ========================================================================== */ body.theme-light { /* Palette overrides */ --color-bg: #FFFFFF; --color-surface: #FAFAF8; --color-surface-alt: #F3F3EF; --color-border: #E6E6E1; --color-border-bright: #D8D8D2; --color-accent: #00872B; /* AA-safe CTA green on white */ --color-accent-dim: #006B22; --color-accent-bright: #00FF41; /* dark surfaces only */ --color-accent-glow: rgba(0, 135, 43, 0.12); --color-text-primary: #0D0D0D; --color-text-secondary: #5A5A5A; --color-text-muted: #8A8A8A; /* Layout — reference grid */ --container-max: 1140px; /* Kill the dark-theme glow language */ --glow-accent: 0 0 0 1px var(--color-border-bright); background: var(--color-bg); color: var(--color-text-primary); } /* Dark band inside a light page — re-establish dark tokens locally. */ .theme-light .band-dark { --color-bg: #0D0D0D; --color-surface: #141414; --color-border: #1F1F1F; --color-accent: #00FF41; --color-accent-dim: #00CC33; --color-text-primary: #F0F0F0; --color-text-secondary: #9A9A9A; background: var(--color-bg); color: var(--color-text-primary); } /* ---------- Header (light, sticky) -------------------------------------- */ .theme-light .site-header { position: sticky; top: 0; z-index: var(--z-nav); background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-border); } .theme-light .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); min-height: 72px; } /* Company lockup: MC monogram + spaced wordmark. The monogram PNGs are pre-extracted on transparent (scripts/process-brand.mjs) — ink variant on light chrome, white variant on the dark band. */ .theme-light .brand-lockup { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--color-text-primary); } .theme-light .brand-lockup img { width: 38px; height: 38px; display: block; } .theme-light .brand-lockup__name { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.22em; line-height: 1.3; text-transform: uppercase; white-space: nowrap; } @media (max-width: 480px) { .theme-light .brand-lockup__name { display: none; } /* monogram carries it */ } .theme-light .nav { display: flex; align-items: center; gap: var(--sp-5); } .theme-light .nav__link { font-family: var(--font-body); font-size: var(--fs-small); font-weight: 500; color: var(--color-text-secondary); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); } .theme-light .nav__link:hover, .theme-light .nav__link:focus-visible { color: var(--color-text-primary); } @media (max-width: 720px) { .theme-light .nav__link { display: none; } /* keep logo + CTA on mobile */ } /* ---------- Buttons ------------------------------------------------------ */ .theme-light .btn-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 14px 28px; border: 0; border-radius: 6px; background: var(--color-accent); color: #FFFFFF; font-family: var(--font-body); font-size: 1rem; font-weight: 600; letter-spacing: 0.01em; text-decoration: none; cursor: pointer; transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); } .theme-light .btn-cta:hover { background: var(--color-accent-dim); } .theme-light .btn-cta:active { transform: translateY(1px); } .theme-light .btn-cta:focus-visible { outline: 2px solid var(--color-text-primary); outline-offset: 3px; } .theme-light .btn-cta--compact { min-height: 42px; padding: 10px 18px; font-size: var(--fs-small); } /* On the dark band the CTA flips to bright-green-on-dark with ink text (AAA). */ .theme-light .band-dark .btn-cta { background: var(--color-accent-bright); color: #0D0D0D; } .theme-light .band-dark .btn-cta:hover { background: #33FF67; } /* ---------- CTA block (button + trust line, repeated per section) ------- */ .theme-light .cta-block { display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); text-align: center; } .theme-light .cta-block--left { align-items: flex-start; text-align: left; } .theme-light .cta-trust { font-size: var(--fs-small); color: var(--color-text-secondary); max-width: 52ch; margin: 0; } .theme-light .cta-trust::before { content: "✓ "; color: var(--color-accent); font-weight: 700; } .theme-light .band-dark .cta-trust { color: var(--color-text-secondary); } /* ---------- Section primitives ------------------------------------------ */ .theme-light .section { padding: clamp(64px, 9vw, 112px) 0; } .theme-light .section--alt { background: var(--color-surface); } .theme-light .section-eyebrow { display: inline-block; font-family: var(--font-body); font-size: var(--fs-caption); font-weight: 600; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--color-accent); margin-bottom: var(--sp-4); } .theme-light .band-dark .section-eyebrow { color: var(--color-accent); } .theme-light .section-title { font-family: var(--font-display); font-size: clamp(2.25rem, 4.5vw, 3.25rem); line-height: 1.02; letter-spacing: var(--ls-display); text-transform: uppercase; margin: 0 0 var(--sp-5); } .theme-light .section-lead { font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--color-text-secondary); max-width: 64ch; margin: 0 0 var(--sp-6); } .theme-light .section-head--center { text-align: center; } .theme-light .section-head--center .section-lead { margin-inline: auto; } /* ---------- Photo slots (founder shots arrive later) --------------------- */ /* Slots ship with .is-empty and stay INVISIBLE until their asset exists. Drop the file into /assets/images/founder/ with the exact filename and the slot renders automatically (the inline page script removes .is-empty on image load) — no placeholder patterns or dev labels ever reach prod. */ .theme-light .photo-slot { position: relative; width: 100%; border-radius: 8px; overflow: hidden; border: 1px solid var(--color-border); background: var(--color-surface); } .theme-light .photo-slot--4x5 { aspect-ratio: 4 / 5; } .theme-light .photo-slot--16x9 { aspect-ratio: 16 / 9; } .theme-light .photo-slot--3x2 { aspect-ratio: 3 / 2; } .theme-light .photo-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .theme-light .photo-slot.is-empty { display: none; } /* ---------- Footer (slim, professional) ---------------------------------- */ .theme-light .footer-slim { background: var(--color-surface); border-top: 1px solid var(--color-border); padding: var(--sp-8) 0 var(--sp-6); font-size: var(--fs-small); color: var(--color-text-secondary); } .theme-light .footer-slim__grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--sp-6); margin-bottom: var(--sp-7); } @media (max-width: 860px) { .theme-light .footer-slim__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .theme-light .footer-slim__grid { grid-template-columns: 1fr; } } .theme-light .footer-slim__positioning { margin: var(--sp-4) 0 0; max-width: 36ch; } .theme-light .footer-slim__col-title { font-family: var(--font-body); font-size: var(--fs-caption); font-weight: 600; letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--color-text-primary); margin: 0 0 var(--sp-4); } .theme-light .footer-slim ul { list-style: none; margin: 0; padding: 0; } .theme-light .footer-slim li { margin-bottom: var(--sp-3); } .theme-light .footer-slim a { color: var(--color-text-secondary); text-decoration: none; } .theme-light .footer-slim a:hover { color: var(--color-text-primary); } .theme-light .footer-slim__legalrow { border-top: 1px solid var(--color-border); padding-top: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); } .theme-light .footer-slim__disclaimer { margin: 0; max-width: 88ch; font-size: var(--fs-caption); color: var(--color-text-muted); } /* ---------- Consent banner on light pages -------------------------------- */ .theme-light .consent { background: #FFFFFF; border: 1px solid var(--color-border-bright); box-shadow: 0 8px 32px rgba(13, 13, 13, 0.10); color: var(--color-text-primary); } .theme-light .consent a { color: var(--color-accent); } /* ---------- Checkmark list (shared) -------------------------------------- */ .theme-light .checklist { list-style: none; margin: 0; padding: 0; } .theme-light .checklist li { position: relative; padding-left: 34px; margin-bottom: var(--sp-4); line-height: var(--lh-body); } .theme-light .checklist .checklist__icon { position: absolute; left: 0; top: 2px; width: 22px; height: 22px; color: var(--color-accent); } /* ---------- Reduced motion ----------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .theme-light .btn-cta { transition: none; } }