/*
Theme Name: Long Better Life Child
Theme URI: https://long-better-life.de
Description: Child-Theme für Storefront, angeglichen an das Design der Astro-Hauptseite (long-better-life.de). Überträgt Farben, Schrift (Geist, selbst gehostet), Header/Footer-Optik, Buttons und WooCommerce-Anpassungen.
Author: Long Better Life
Template: storefront
Version: 1.0.0
Text Domain: long-better-life-child
*/
/* ============================================================
1) SCHRIFT — Geist, self-hosted (identisch zur Astro-Seite)
============================================================ */
@font-face {
font-family: 'Geist';
src: url('fonts/geist-latin-wght-normal.woff2') format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Geist Mono';
src: url('fonts/geist-mono-latin-wght-normal.woff2') format('woff2');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
/* ============================================================
2) DESIGN-TOKENS — exakt aus der Astro-Seite (global.css)
============================================================ */
:root {
--navy: #0B2545;
--teal: #0E7C7B;
--teal-light: #3FBFBB;
--off-white: #F6F8F8;
--ink: #1F2D3D;
--paper: #FFFFFF;
--label-belegt: #0E7C7B;
--label-hinweise: #B8860B;
--label-experimentell: #C2591F;
--label-meinung: #64748B;
--border: rgba(11, 37, 69, 0.12);
--shadow: 0 1px 2px rgba(11, 37, 69, 0.04), 0 8px 24px rgba(11, 37, 69, 0.06);
--font: 'Geist', system-ui, -apple-system, Segoe UI, Arial, sans-serif;
--font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
--maxw: 1120px;
--readw: 720px;
/* WooCommerce nutzt diese Storefront-Variable für Akzentfarben */
--storefront-accent: var(--teal);
}
code, pre, kbd, samp { font-family: var(--font-mono); }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
font-family: var(--font) !important;
color: var(--ink);
background: var(--off-white);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, h6 {
color: var(--navy) !important;
line-height: 1.2;
letter-spacing: -0.02em;
font-weight: 800 !important;
font-family: var(--font) !important;
}
h1 { font-size: clamp(2rem, 5vw, 3.1rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-top: 1.4em; }
h3 { font-size: 1.25rem; margin-top: 1.2em; }
a { color: var(--teal); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--navy); }
p { margin: 1em 0; }
img { max-width: 100%; height: auto; }
.eyebrow,
.lbl-eyebrow {
font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--teal); margin: 0 0 0.5rem; display: block;
}
/* ============================================================
3) BUTTONS — Pill-Form wie auf der Astro-Seite
============================================================ */
.btn,
a.button,
button.button,
.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce #respond input#submit,
.woocommerce input.button {
display: inline-flex !important;
align-items: center;
gap: 0.5rem;
background: var(--teal) !important;
color: #fff !important;
font-weight: 600 !important;
font-size: 0.95rem;
padding: 0.7rem 1.4rem !important;
border-radius: 999px !important;
border: none !important;
text-decoration: none !important;
transition: background 0.15s ease, transform 0.15s ease;
font-family: var(--font);
}
.btn:hover, a.button:hover, button.button:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover,
.woocommerce #respond input#submit:hover {
background: var(--navy) !important;
color: #fff !important;
transform: translateY(-1px);
}
.btn--ghost,
.woocommerce a.button.alt.wc-forward,
a.button.wp-element-button.outline {
background: transparent !important;
color: var(--navy) !important;
border: 1px solid var(--border) !important;
}
/* ============================================================
4) HEADER — Logo, Marke, Navigation
(Storefront-Selektoren; bei anderem Theme ggf. anpassen)
============================================================ */
.site-header,
#masthead {
background: var(--paper) !important;
border-bottom: 1px solid var(--border);
}
.site-branding .site-title a,
.site-title a {
font-weight: 800 !important;
color: var(--navy) !important;
font-size: 1.05rem;
letter-spacing: -0.02em;
font-family: var(--font);
}
.site-description {
font-size: 0.72rem !important;
color: var(--teal) !important;
font-weight: 500;
letter-spacing: 0.02em;
}
.main-navigation ul li a,
#site-navigation a {
color: var(--ink) !important;
font-size: 0.92rem;
font-weight: 500;
font-family: var(--font);
}
.main-navigation ul li a:hover,
.main-navigation ul li.current-menu-item a {
color: var(--teal) !important;
}
/* ============================================================
5) FOOTER — Navy-Hintergrund wie auf der Astro-Seite
============================================================ */
#colophon,
.site-footer {
background: var(--navy) !important;
color: rgba(255,255,255,0.82) !important;
margin-top: 4rem;
}
#colophon a, .site-footer a {
color: rgba(255,255,255,0.82) !important;
text-decoration: none;
}
#colophon a:hover, .site-footer a:hover {
color: var(--teal-light) !important;
}
#colophon .site-info,
.site-footer .site-info {
border-top: 1px solid rgba(255,255,255,0.14);
font-size: 0.8rem;
color: rgba(255,255,255,0.6) !important;
}
/* ============================================================
6) EVIDENZ-LABEL — Nachbau der Astro-Komponente
Nutzung im WP-Editor als HTML-Block:
Belegt
(Varianten: ev--belegt / ev--hinweise / ev--experimentell / ev--meinung)
============================================================ */
.ev {
display: inline-flex; align-items: center; gap: 0.4rem;
padding: 0.2rem 0.6rem 0.2rem 0.45rem;
border-radius: 999px;
font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em;
white-space: nowrap; line-height: 1.6;
}
.ev--belegt { color: var(--label-belegt); background: color-mix(in srgb, var(--label-belegt) 8%, white); border: 1px solid color-mix(in srgb, var(--label-belegt) 35%, transparent); }
.ev--hinweise { color: var(--label-hinweise); background: color-mix(in srgb, var(--label-hinweise) 8%, white); border: 1px solid color-mix(in srgb, var(--label-hinweise) 35%, transparent); }
.ev--experimentell { color: var(--label-experimentell); background: color-mix(in srgb, var(--label-experimentell) 8%, white); border: 1px solid color-mix(in srgb, var(--label-experimentell) 35%, transparent); }
.ev--meinung { color: var(--label-meinung); background: color-mix(in srgb, var(--label-meinung) 8%, white); border: 1px solid color-mix(in srgb, var(--label-meinung) 35%, transparent); }
/* ============================================================
7) INFO-BOXEN — Nachbau von Callout.astro
Nutzung: Das Wichtigste in Kürze
...