/* ========================================================================== Regimen Health GmbH — site styles Plain CSS. Light/dark aware. Bilingual toggle is pure CSS (see "language"). ========================================================================== */ :root { --bg: #f4f6f8; --surface: #ffffff; --surface-2: #eef2f6; --text: #0f1b2d; --muted: #586071; --border: #e4e9f0; --brand: #0f7d6b; --brand-2: #0a5e50; --brand-soft: #e3f3ef; --ring: rgba(15, 125, 107, 0.30); --shadow: 0 14px 34px rgba(2, 6, 23, 0.08); --shadow-sm: 0 1px 2px rgba(2, 6, 23, 0.06); --radius: 16px; --radius-sm: 10px; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; color-scheme: light dark; } @media (prefers-color-scheme: dark) { :root { --bg: #0a0f1a; --surface: #111a2b; --surface-2: #16223a; --text: #e8edf5; --muted: #9aa6b8; --border: #212d45; --brand: #2bb89f; --brand-2: #52ccb4; --brand-soft: #10302a; --ring: rgba(43, 184, 159, 0.35); --shadow: 0 16px 40px rgba(0, 0, 0, 0.55); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); } } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--brand); text-decoration: none; } a:hover { text-decoration: underline; } .container { width: min(1100px, 100% - 3rem); margin-inline: auto; } /* -------------------------------------------------------------------------- Language toggle — pure CSS Two radios sit at the top of , before .site. Selecting "DE" hides every .lang-en element and reveals every .lang-de element. `display:revert` restores each element's natural display (span->inline, p->block, li->list). -------------------------------------------------------------------------- */ .lang-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .lang-de { display: none; } #to-de:checked ~ .site .lang-en { display: none; } #to-de:checked ~ .site .lang-de { display: revert; } /* -------------------------------------------------------------------------- Header -------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 10; background: var(--surface); background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: saturate(140%) blur(8px); border-bottom: 1px solid var(--border); } .site-header .container { display: flex; align-items: center; gap: 1rem; min-height: 64px; } .brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--text); font-weight: 600; } .brand:hover { text-decoration: none; } .brand-mark { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: var(--brand); color: #fff; font-weight: 800; font-size: 1.05rem; } .brand-name { letter-spacing: 0.01em; } .brand-name strong { color: var(--brand); } .main-nav { margin-left: auto; display: flex; align-items: center; gap: 1.4rem; } .main-nav .links { display: flex; gap: 1.4rem; } .main-nav .links a { color: var(--muted); font-size: 0.95rem; font-weight: 500; } .main-nav .links a:hover { color: var(--text); text-decoration: none; } .lang-toggle { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 999px; padding: 2px; background: var(--surface); } .lang-toggle label { cursor: pointer; font-size: 0.8rem; font-weight: 600; color: var(--muted); padding: 0.25rem 0.6rem; border-radius: 999px; line-height: 1; } #to-en:checked ~ .site label[for="to-en"], #to-de:checked ~ .site label[for="to-de"] { background: var(--brand); color: #fff; } .lang-radio:focus-visible ~ .site .lang-toggle { outline: 2px solid var(--ring); outline-offset: 2px; } /* -------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */ .hero { padding: 5rem 0 4rem; background: radial-gradient(120% 120% at 50% -20%, var(--brand-soft), transparent 60%); text-align: center; } .eyebrow { display: inline-block; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand); background: var(--brand-soft); padding: 0.35rem 0.75rem; border-radius: 999px; margin-bottom: 1.2rem; } .hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.1; letter-spacing: -0.02em; margin: 0 auto 1rem; max-width: 20ch; } .hero .lead { font-size: clamp(1.05rem, 2.2vw, 1.25rem); color: var(--muted); max-width: 62ch; margin: 0 auto 2rem; } .cta-row { margin: 2rem 0 0; display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center; } .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.8rem 1.3rem; border-radius: 999px; font-weight: 600; font-size: 1rem; border: 1px solid transparent; cursor: pointer; transition: transform 0.05s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .btn:hover { text-decoration: none; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--brand); color: #fff; } .btn-primary:hover { background: var(--brand-2); } .btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border); } .btn-ghost:hover { border-color: var(--brand); color: var(--brand); } /* -------------------------------------------------------------------------- Generic sections -------------------------------------------------------------------------- */ section { padding: 4rem 0; } .section-head { margin: 0 0 2.2rem; } .section-head .eyebrow { margin-bottom: 0.9rem; } h2 { font-size: clamp(1.6rem, 3.5vw, 2.2rem); line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 0.6rem; } .section-head p { color: var(--muted); font-size: 1.1rem; margin: 0; } .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.6rem; box-shadow: var(--shadow-sm); } .card .ic { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); margin-bottom: 1rem; } .card .ic svg { width: 22px; height: 22px; } .card h3 { margin: 0.2rem 0 0.4rem; font-size: 1.15rem; } .card p { margin: 0; color: var(--muted); } /* -------------------------------------------------------------------------- Product spotlight -------------------------------------------------------------------------- */ .product-panel { background: var(--surface); border: 1px solid var(--border); border-radius: calc(var(--radius) + 4px); box-shadow: var(--shadow); padding: clamp(1.5rem, 4vw, 3rem); } .product-panel h2 { margin-top: 0.4rem; } .product-panel .lead { color: var(--muted); font-size: 1.1rem; max-width: 70ch; margin: 0 0 0.5rem; } /* One grid holds both the program pillars and the outcome stats. */ .product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1rem; margin: 2rem 0 0; } .pillar { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1rem 1.1rem; } .pillar b { display: block; margin-bottom: 0.2rem; } .pillar > span { display: block; color: var(--muted); font-size: 0.95rem; } .stat { text-align: center; padding: 1.2rem; background: var(--brand-soft); border-radius: var(--radius-sm); display: flex; flex-direction: column; justify-content: center; } .stat .num { font-size: 2rem; font-weight: 800; color: var(--brand); line-height: 1; } .stat .lbl { color: var(--muted); font-size: 0.9rem; margin-top: 0.4rem; display: block; } .disclaimer { font-size: 0.85rem; color: var(--muted); margin: 1.6rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--border); } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--border); padding: 2rem 0; color: var(--muted); } .site-footer .container { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; align-items: center; justify-content: space-between; } .site-footer .copyright { font-size: 0.9rem; } .footer-links { display: flex; flex-wrap: wrap; gap: 1.4rem; } .footer-links a { color: var(--muted); font-size: 0.9rem; } .footer-links a:hover { color: var(--text); text-decoration: none; } /* -------------------------------------------------------------------------- Impressum page -------------------------------------------------------------------------- */ .legal { padding: 3rem 0 4rem; } .legal .card { max-width: 680px; margin-inline: auto; padding: 2.4rem; } .legal section { padding: 0; } .legal h1 { margin: 0 0 1.5rem; font-size: 1.8rem; letter-spacing: 0.02em; border-bottom: 1px solid var(--border); padding-bottom: 0.75rem; } .legal h2 { font-size: 1.05rem; margin: 1.6rem 0 0.3rem; } .legal p { margin: 0.15rem 0; } .legal .lead-note { color: var(--muted); font-size: 0.95rem; margin-bottom: 1.5rem; } .back-link { display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: 1.4rem; color: var(--muted); font-size: 0.95rem; } /* -------------------------------------------------------------------------- Responsive -------------------------------------------------------------------------- */ @media (max-width: 680px) { .main-nav .links { display: none; } section { padding: 3rem 0; } .hero { padding: 3.5rem 0 3rem; } }