/* ===========================================================
CompareFrog — Human Premium 2026 · Claim: Choose Smarter.
Design direction: clean, premium, human, product-near. Explicitly NOT
a cyberpunk/AI-demo/gaming/SaaS-dashboard look — no neon glows, no HUD
panels, no dark base, no gradient tech-glow, no monospace "terminal" UI.
Design token system:
Colors:
--frog: #159A5B (confident brand green — the ONE accent color)
--frog-deep: #0E7A47 (hover/pressed state, headline accent)
--frog-tint: #EAF6EE (soft green background wash — used sparingly)
--ink: #12151A (primary text — near-black, not pure black)
--slate: #5B6570 (secondary text — muted grey)
--paper: #FFFFFF (page base — white)
--paper-alt: #F6F5F1 (soft off-white/beige section + image-slot bg)
--line: rgba(18,21,26,.09) (hairline border on light surfaces)
Contrast: --frog/--frog-deep as text/icon/border on white → always
high contrast. --frog as a filled button background pairs with white
text (verified WCAG AA for the weights used).
Type: single system-font stack for display + body. No external font
dependency, no monospace UI font — normal case, readable navigation.
Layout: unchanged wrap/gutter/component structure (header/hero/
verticals/section/footer) — fully repainted for a light, calm,
product-forward premium-consumer feel.
Signature elements: a small reduced frog mark in the header (never a
large hero image); the frog-tongue CTA micro-interaction, recolored
and toned down; a small "Frog Tipp" guide component used sparingly.
=========================================================== */
:root {
--frog: #159a5b;
--frog-deep: #0e7a47;
--frog-tint: #eaf6ee;
--frog-tint-2: #dcf0e3;
--ink: #12151a;
--slate: #5b6570;
--slate-light: #8a939c;
--paper: #ffffff;
--paper-alt: #f6f5f1;
--line: rgba(18, 21, 26, 0.09);
--line-soft: rgba(18, 21, 26, 0.06);
/* Fixed 1360px up to laptop widths; grows gently on genuinely large
desktops so full-width sections read as broad, designed surfaces
instead of a fixed-width island with huge dead margins — capped at
1680px so it never turns into an 1800px+ text block. Reading text
stays narrow regardless (own ch-based max-width nested inside .wrap),
only the structural/grid surface widens. */
--max: clamp(1360px, calc(1000px + 25vw), 1680px);
--gutter: clamp(20px, 4vw, 48px);
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 22px;
--radius-pill: 999px;
--shadow-sm: 0 1px 2px rgba(18, 21, 26, 0.06);
--shadow-md: 0 14px 32px rgba(18, 21, 26, 0.08);
--shadow-lg: 0 22px 48px rgba(18, 21, 26, 0.1);
--font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
--font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", system-ui, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
* { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.55;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
a:focus-visible,
button:focus-visible,
input:focus-visible {
outline: 2px solid var(--frog);
outline-offset: 3px;
}
.wrap {
max-width: var(--max);
margin: 0 auto;
padding: 0 var(--gutter);
}
/* ---------- Header ---------- */
.site-header {
border-bottom: 1px solid var(--line);
position: sticky;
top: 0;
background: rgba(255, 255, 255, 0.92);
backdrop-filter: saturate(160%) blur(10px);
z-index: 20;
}
.site-header .wrap {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 8px 16px;
height: auto;
padding-top: 14px;
padding-bottom: 14px;
}
.logo {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.05rem;
letter-spacing: -0.01em;
text-decoration: none;
color: var(--ink);
display: flex;
align-items: center;
gap: 9px;
}
.logo .mark {
width: 28px;
height: 28px;
flex: none;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px;
border-radius: 50%;
background: var(--frog-tint);
transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.logo:hover .mark { transform: scale(1.08) rotate(-4deg); }
.logo .mark svg { width: 100%; height: 100%; }
.logo .mark .fm-body { fill: var(--frog); }
.logo .mark .fm-eye { fill: #ffffff; }
.logo .mark .fm-pupil { fill: var(--frog-deep); }
.logo-claim {
color: var(--slate);
font-weight: 400;
margin-left: 8px;
font-size: 0.85rem;
}
@media (max-width: 560px) {
.logo-claim { display: none; }
}
/* ---------- Mobile nav toggle (checkbox hack — zero JavaScript) ----------
Below 900px the nav collapses into a dropdown panel controlled by a
visually-hidden checkbox + label; at 900px+ both are hidden and nav.primary
reverts to the inline grouped-pill layout, unchanged from before. */
.nav-toggle-checkbox {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
opacity: 0;
}
.nav-toggle-btn {
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
width: 42px;
height: 42px;
flex: none;
border-radius: var(--radius-md);
cursor: pointer;
transition: background 0.2s ease;
}
.nav-toggle-btn:hover { background: var(--paper-alt); }
.nav-toggle-btn span {
display: block;
width: 20px;
height: 2px;
border-radius: 2px;
background: var(--ink);
transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-toggle-checkbox:checked ~ .nav-toggle-btn span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle-checkbox:checked ~ .nav-toggle-btn span:nth-child(2) { opacity: 0; }
.nav-toggle-checkbox:checked ~ .nav-toggle-btn span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
nav.primary {
display: none;
flex-direction: column;
align-items: stretch;
gap: 3px;
font-size: 0.92rem;
background: var(--paper-alt);
border: 1px solid var(--line-soft);
border-radius: var(--radius-lg);
padding: 6px;
box-shadow: inset 0 0 0 1px rgba(18, 21, 26, 0.03);
width: 100%;
margin-top: 10px;
order: 3;
}
.nav-toggle-checkbox:checked ~ nav.primary { display: flex; }
nav.primary a {
text-decoration: none;
font-weight: 600;
color: var(--slate);
border-radius: var(--radius-md);
padding: 12px 16px;
transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
nav.primary a:hover,
nav.primary a[aria-current="page"] {
color: var(--frog-deep);
background: #ffffff;
box-shadow: var(--shadow-sm);
}
/* .nav-item wraps each top-level link (+ optional desktop dropdown panel).
display:contents below 900px makes the wrapper invisible to layout, so
the existing mobile hamburger panel keeps seeing a flat row of flex
items — zero visual/behavioural change to the mobile menu. .nav-drop
(the desktop-only dropdown panel) is hidden outright on mobile. */
.nav-item { display: contents; }
.nav-drop { display: none; }
@media (min-width: 900px) {
.site-header .wrap { height: 64px; padding-top: 0; padding-bottom: 0; flex-wrap: nowrap; }
.logo { font-size: 1.12rem; gap: 10px; }
.logo .mark { width: 30px; height: 30px; }
.nav-toggle-checkbox,
.nav-toggle-btn { display: none; }
nav.primary {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
width: auto;
margin-top: 0;
order: 0;
gap: 2px;
font-size: 0.95rem;
padding: 0;
background: none;
border: none;
border-radius: 0;
box-shadow: none;
}
/* Quiet text navigation: no pill/capsule container, just calm links with
a thin underline indicator instead of a filled hover background. */
.nav-item { display: block; position: relative; }
.nav-item.has-drop { padding-bottom: 14px; margin-bottom: -14px; }
nav.primary a {
position: relative;
padding: 10px 14px;
border-radius: var(--radius-sm);
}
nav.primary a::after {
content: "";
position: absolute;
left: 14px;
right: 14px;
bottom: 6px;
height: 2px;
border-radius: 2px;
background: var(--frog);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.2s ease;
}
nav.primary a:hover,
nav.primary a[aria-current="page"] {
background: none;
box-shadow: none;
}
nav.primary a:hover::after,
nav.primary a[aria-current="page"]::after {
transform: scaleX(1);
}
/* ---------- Desktop dropdown / mega-menu (principle only, not an Apple
copy): a small, calm panel that fades and slides softly in under the
trigger link. Opens on :hover AND :focus-within (keyboard tabbing),
so no JS is required for the open/close mechanic itself — only
Escape-to-close needs a tiny script (see base_template in build.py).
Content is restricted to real, published links; categories without an
article yet show a muted note instead of a fake sub-page (see NAV in
build.py). padding-bottom/margin-bottom above bridges the visual gap
between trigger and panel so the hover area never has a gap to slip
through. */
.nav-drop {
display: block;
position: absolute;
top: calc(100% + 14px);
left: 0;
width: max-content;
min-width: 220px;
max-width: 300px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: 6px;
opacity: 0;
visibility: hidden;
transform: translateY(-6px);
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
z-index: 30;
}
.nav-drop--right { left: auto; right: 0; }
.nav-item.has-drop:hover .nav-drop,
.nav-item.has-drop:focus-within .nav-drop {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nav-drop-inner { padding: 10px 12px; }
.nav-drop-eyebrow {
display: block;
font-weight: 700;
font-size: 0.72rem;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--slate-light);
margin-bottom: 8px;
}
.nav-drop-link {
display: block;
font-weight: 600;
font-size: 0.92rem;
color: var(--ink);
text-decoration: none;
padding: 8px 10px;
margin: 0 -10px;
border-radius: var(--radius-sm);
transition: background 0.15s ease, color 0.15s ease;
}
.nav-drop-link:hover { background: var(--frog-tint); color: var(--frog-deep); }
.nav-drop-note {
margin: 0 0 10px;
font-size: 0.86rem;
color: var(--slate);
font-style: italic;
}
.nav-drop-all {
display: block;
margin-top: 8px;
padding-top: 10px;
border-top: 1px solid var(--line);
font-weight: 700;
font-size: 0.82rem;
color: var(--frog-deep);
text-decoration: none;
}
.nav-drop-all:hover { color: var(--frog); }
}
/* ---------- Eyebrow / badge ---------- */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
font-weight: 700;
font-size: 0.82rem;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--frog-deep);
background: var(--frog-tint);
border-radius: var(--radius-pill);
padding: 7px 14px 7px 11px;
margin-bottom: 16px;
}
.eyebrow::before {
content: "";
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--frog);
display: inline-block;
}
/* ---------- Hero ---------- */
.hero {
position: relative;
overflow: hidden;
padding: clamp(56px, 8vw, 100px) 0 clamp(48px, 6vw, 72px);
border-bottom: 1px solid var(--line);
background: var(--paper);
}
@media (max-width: 700px) {
.hero { padding: 36px 0 28px; }
}
.hero::before {
content: "";
position: absolute;
top: -220px;
right: -160px;
width: 620px;
height: 620px;
background: radial-gradient(circle, var(--frog-tint) 0%, rgba(234, 246, 238, 0) 70%);
pointer-events: none;
z-index: 0;
}
.hero .wrap { position: relative; z-index: 1; }
/* Desktop-only: a calm off-white surface (same --paper-alt token already
used for footer/section--tint) instead of pure white, so the hero reads
as one of several large designed bands rather than blending into the
page's white background — the "full-width section, centered content"
pattern applied to the very first thing a visitor sees. Scoped to
≥900px only; mobile/tablet hero stays exactly as before. */
@media (min-width: 900px) {
.hero { background: var(--paper-alt); }
}
/* On genuinely large desktops the hero gets more vertical air and a
bigger (still very soft) decorative wash, so it visibly gains presence
at 1920px/2560px instead of just sitting inside a wider wrap. */
@media (min-width: 1600px) {
.hero { padding-top: 128px; padding-bottom: 88px; }
.hero::before { width: 900px; height: 900px; top: -300px; right: -220px; }
}
/* ---------- Home flow (mobile-first content order via grid-template-areas) ----------
Mobile: hero text -> category photos -> discover chips -> highlight widgets, so the
visual category entry points appear right after the hero instead of after a run of
text/widget blocks. Desktop keeps today's arrangement (hero text + highlights side by
side, then chips, then categories) unchanged — only the *mobile* order differs. */
.home-flow {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"hero"
"categories"
"discover"
"highlights";
row-gap: clamp(40px, 7vw, 56px);
}
@media (max-width: 700px) {
.home-flow { row-gap: 32px; }
}
.hf-hero { grid-area: hero; }
/* min-width:0 (not the auto default) so this grid item can shrink to its
track's actual width instead of ballooning to its content's min-content
size — the same class of bug the hero-highlights row hit earlier: below
700px .grid3 becomes a flex row of flex-shrink:0 cards, whose combined
width is the row's min-content, and without this override that min-content
would drag .hf-categories (a grid item of .home-flow) wider than the
viewport instead of scrolling internally. */
.hf-categories { grid-area: categories; min-width: 0; }
.hf-discover { grid-area: discover; }
.hf-highlights { grid-area: highlights; }
@media (min-width: 980px) {
.home-flow {
grid-template-columns: 1.15fr 1fr;
grid-template-areas:
"hero highlights"
"discover discover"
"categories categories";
column-gap: clamp(28px, 5vw, 56px);
row-gap: clamp(48px, 6vw, 72px);
align-items: center;
}
}
.hero-content {
max-width: 600px;
animation: fade-up 0.6s cubic-bezier(0.2, 0.7, 0.3, 1) both;
}
@keyframes fade-up {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: translateY(0); }
}
/* ---------- Hero highlights ("Neu bei CompareFrog" / Frog Tipp / Deals-Struktur) ----------
Bento-Komposition mit drei unterschiedlichen Karten-Typen, keine Kategorie-Dopplung mit
dem Bereich weiter unten. data-hl-* Attribute markieren Stellen für spätere dynamische
Befüllung (z. B. echte Deal-Daten) — aktuell rein statisch, kein JS nötig. */
.hero-highlights {
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 14px;
width: 100%;
max-width: 440px;
aspect-ratio: 1 / 1;
justify-self: end;
animation: fade-up 0.7s cubic-bezier(0.2, 0.7, 0.3, 1) 0.1s both;
}
/* A touch more air for the highlight cards on genuinely large desktops —
left untouched at laptop widths (980–1400px), where 440px already balances
well against the hero text column. */
@media (min-width: 1400px) {
.hero-highlights { max-width: 480px; }
}
/* These two overrides must stay AFTER the unconditional .hero-highlights rule
above — same selector specificity, so source order decides the cascade.
Placed before it (as they were previously), the unconditional rule's
display:grid/aspect-ratio:1/1/justify-self:end silently won at every
viewport width and the mobile stacked layout below never actually applied,
which is what let the 2x2 bento grid overflow the mobile card column. */
@media (max-width: 980px) {
.hero-highlights { max-width: 480px; justify-self: center; margin-top: 8px; }
}
/* Below ~600px the 2x2 bento grid's fixed square aspect-ratio no longer
gives "Frog Tipp"/"Deals" enough cell height for their text — stack the
three highlight cards full-width instead, each sized to its own content. */
@media (max-width: 600px) {
.hero-highlights {
display: flex;
flex-direction: column;
aspect-ratio: auto;
width: 100%;
max-width: 480px;
gap: 10px;
margin-top: 20px;
}
}
.hl-card {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
border-radius: var(--radius-lg);
padding: 16px;
text-decoration: none;
color: var(--ink);
background: var(--paper);
border: 1px solid var(--line);
box-shadow: var(--shadow-sm);
transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
@media (hover: hover) and (pointer: fine) {
a.hl-card:hover {
box-shadow: var(--shadow-md);
border-color: rgba(18, 21, 26, 0.16);
transform: translateY(-3px);
}
}
.hl-card--feed { grid-column: 1 / 2; grid-row: 1 / 3; }
.hl-card--tip {
grid-column: 2 / 3;
grid-row: 1 / 2;
background: var(--frog-tint);
border-color: var(--frog-tint-2);
}
.hl-card--deals {
grid-column: 2 / 3;
grid-row: 2 / 3;
background: var(--paper-alt);
}
.hl-icon,
.hl-frog {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
background: #ffffff;
box-shadow: var(--shadow-sm);
margin-bottom: 12px;
flex: none;
}
.hl-icon { color: var(--frog-deep); }
.hl-card--feed .hl-icon { color: #2c5aa0; background: #eaf1fb; }
.hl-card--deals .hl-icon { color: var(--slate); }
.hl-icon svg { width: 18px; height: 18px; }
.hl-frog svg { width: 22px; height: 14px; }
.hl-frog .fm-body { fill: var(--frog); }
.hl-frog .fm-eye { fill: #ffffff; }
.hl-frog .fm-pupil { fill: var(--frog-deep); }
.hl-label {
font-weight: 700;
font-size: 0.72rem;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--frog-deep);
margin-bottom: 6px;
}
.hl-card--deals .hl-label { color: var(--slate); }
.hl-title {
font-weight: 700;
font-size: 0.98rem;
line-height: 1.32;
color: var(--ink);
}
.hl-text {
margin: 0;
font-size: 0.85rem;
line-height: 1.42;
color: var(--ink);
}
.hl-card--deals .hl-text { color: var(--slate-light); font-style: italic; }
/* Below 600px the highlight zone now sits after the visual category cards
(see .home-flow), i.e. it reads as secondary/informational — so give each
card a compact horizontal "mini-card" layout (icon left, text right)
instead of the taller icon-on-top block used in the 2-column bento grid. */
@media (max-width: 600px) {
.hl-card {
display: grid;
grid-template-columns: 30px 1fr;
column-gap: 10px;
row-gap: 2px;
align-items: start;
padding: 11px 13px;
}
.hl-card .hl-icon,
.hl-card .hl-frog {
grid-row: 1 / 3;
margin-bottom: 0;
}
.hl-card .hl-label { margin-bottom: 0; }
}
.hero h1 {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(2.6rem, 6.5vw, 4.4rem);
line-height: 1.02;
letter-spacing: -0.03em;
margin: 0 0 18px;
color: var(--ink);
}
.hero h1 .accent { color: var(--frog); }
.hero p.lede {
font-size: clamp(1.05rem, 1.6vw, 1.25rem);
color: var(--slate);
max-width: 52ch;
margin: 0 0 28px;
}
.hero-actions {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 22px;
}
.hero-trust-link {
font-weight: 600;
font-size: 0.92rem;
color: var(--frog-deep);
text-decoration: none;
border-bottom: 1px solid rgba(14, 122, 71, 0.35);
padding-bottom: 1px;
transition: border-color 0.15s ease;
}
.hero-trust-link:hover { border-color: var(--frog-deep); }
@media (max-width: 600px) {
/* Keep the trust link present but visually de-emphasized on mobile, so it
doesn't compete with the primary CTA right below the headline. */
.hero-trust-link { font-size: 0.8rem; }
}
/* ---------- Discovery chips ----------
.discover-section is now a grid-area child of .home-flow (see above) rather
than its own full-bleed section — spacing between areas comes from
.home-flow's row-gap, so no extra section padding/border here. */
.discover-section { padding: 0; border-bottom: none; }
.hf-discover h2 {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(1.6rem, 2.6vw, 2.2rem);
letter-spacing: -0.015em;
margin: 0 0 26px;
color: var(--ink);
}
.chip-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.chip {
display: inline-flex;
align-items: center;
font-weight: 600;
font-size: 0.94rem;
text-decoration: none;
color: var(--ink);
background: var(--paper);
border: 1.5px solid var(--line);
border-radius: var(--radius-pill);
padding: 11px 22px;
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.chip:hover {
background: var(--frog-tint);
color: var(--frog-deep);
border-color: var(--frog-tint-2);
transform: translateY(-1px);
}
/* ---------- Buttons ---------- */
.btn {
display: inline-flex;
align-items: center;
gap: 10px;
font-weight: 700;
font-size: 0.95rem;
text-decoration: none;
padding: 14px 26px;
border: 1.5px solid var(--line);
border-radius: var(--radius-pill);
color: var(--ink);
background: var(--paper);
transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.btn:hover {
border-color: var(--frog);
color: var(--frog-deep);
box-shadow: var(--shadow-sm);
transform: translateY(-1px);
}
.btn.primary {
background: var(--frog);
border: none;
color: #ffffff;
box-shadow: var(--shadow-sm);
}
.btn.primary:hover {
background: var(--frog-deep);
color: #ffffff;
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
/* ---------- Frog CTA micro-interaction (pure CSS, never blocks the link) ----------
The tag navigates immediately on click/tap regardless of animation state —
there is no JavaScript involved, so nothing can delay or intercept the click.
The tongue/eye motion is purely decorative and triggers on :hover/:focus-visible. */
.frog-cta { gap: 12px; }
.frog-icon { display: inline-flex; }
.frog-icon svg { overflow: visible; }
.frog-icon .frog-body { fill: var(--paper-alt); }
.btn.primary .frog-icon .frog-body { fill: rgba(255, 255, 255, 0.2); }
.frog-icon .frog-eye { fill: var(--ink); }
.btn.primary .frog-icon .frog-eye { fill: #ffffff; }
.frog-icon .frog-pupil { fill: var(--frog); }
.btn.primary .frog-icon .frog-pupil { fill: var(--frog-deep); }
.frog-icon .frog-target { fill: var(--frog); }
.btn.primary .frog-icon .frog-target { fill: #ffffff; }
.frog-icon .frog-tongue {
stroke: var(--frog);
fill: none;
stroke-dasharray: 16;
stroke-dashoffset: 16;
transition: stroke-dashoffset 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn.primary .frog-icon .frog-tongue { stroke: #ffffff; }
.frog-cta:hover .frog-icon .frog-tongue,
.frog-cta:focus-visible .frog-icon .frog-tongue {
stroke-dashoffset: 0;
}
@media (prefers-reduced-motion: reduce) {
.frog-icon .frog-tongue { transition: none; }
}
/* ---------- Frog Tip (small guide component — used sparingly) ---------- */
.frog-tip {
display: flex;
align-items: flex-start;
gap: 14px;
background: var(--frog-tint);
border-radius: var(--radius-md);
padding: 16px 20px;
margin: 24px 0;
max-width: 68ch;
}
@media (max-width: 700px) {
.frog-tip { padding: 12px 14px; gap: 10px; margin: 14px 0 0; }
.frog-tip-icon { width: 26px; height: 26px; }
.frog-tip p { font-size: 0.88rem; }
}
.frog-tip-icon {
flex: none;
width: 30px;
height: 30px;
border-radius: 50%;
background: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
}
.frog-tip-icon .fm-body { fill: var(--frog); }
.frog-tip-icon .fm-eye { fill: #ffffff; }
.frog-tip-icon .fm-pupil { fill: var(--frog-deep); }
.frog-tip-label {
display: block;
font-weight: 700;
font-size: 0.8rem;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--frog-deep);
margin-bottom: 4px;
}
.frog-tip p { margin: 0; color: var(--ink); font-size: 0.95rem; }
/* ---------- Vertical cards (homepage 3-up) ---------- */
/* .verticals is now a grid-area child of .home-flow (see .hf-categories
above) rather than its own full-bleed section — spacing comes from
.home-flow's row-gap, so no extra section padding/border here. */
.verticals {
padding: 0;
border-bottom: none;
}
.verticals .grid3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
@media (max-width: 860px) {
.verticals .grid3 { grid-template-columns: 1fr; }
}
.vcard {
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: 24px 24px 32px;
text-decoration: none;
color: var(--ink);
min-height: 280px;
display: flex;
flex-direction: column;
justify-content: space-between;
transition: box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.35s ease;
}
@media (hover: hover) and (pointer: fine) {
.vcard:hover {
box-shadow: 0 28px 56px rgba(18, 21, 26, 0.14), 0 8px 20px rgba(18, 21, 26, 0.07);
border-color: rgba(18, 21, 26, 0.14);
transform: translateY(-6px);
}
.vcard:hover .vcard-img { transform: scale(1.06); }
.vcard:hover .go { transform: translateX(4px); }
}
.vcard-visual {
display: block;
position: relative;
width: 100%;
aspect-ratio: 16 / 11;
border-radius: var(--radius-md);
overflow: hidden;
margin-bottom: 20px;
background: linear-gradient(150deg, var(--accent-tint, var(--paper-alt)) 0%, var(--accent-tint-2, var(--paper-alt)) 100%);
box-shadow: inset 0 0 0 1px rgba(18, 21, 26, 0.06);
}
/* Real local product/editorial photography (src/assets/categories/*.png,
copied to public/assets/categories/ at build time). The gradient above
shows through while the image loads and acts as a graceful fallback if
a category photo is not yet supplied. */
.vcard-img {
position: absolute;
inset: 0;
z-index: 1;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Mobile/tablet panel ratio: intentionally a bit flatter than desktop's
16:11 so the card is more compact (shorter scroll on mobile). The source
photos are ~1512x1040 (≈ 16:11.03), so 3:2 stays very close to their real
ratio — only a small top/bottom crop, never left/right — meaning the
per-category object-position values below stay effective and safe at
every width from 320px up to this 860px breakpoint. */
@media (max-width: 860px) {
.vcard-visual { aspect-ratio: 3 / 2; }
.vcard--hockey .vcard-img { object-position: 35% 85%; }
.vcard--mtb .vcard-img { object-position: 5% 60%; }
.vcard--grooming .vcard-img { object-position: 90% 65%; }
.vcard--yoga .vcard-img { object-position: 50% 40%; }
}
/* ---------- Mobile category swipe slider (<=700px) ----------
Below 700px the three category cards no longer stack full-height one
under another (which was the single biggest contributor to mobile scroll
length) — instead .grid3 becomes a horizontally swipeable, scroll-snapped
row: one card in focus, the next card peeking at the edge as a "there's
more" cue. Pure CSS scroll-snap, no JS needed for the scrolling itself
(see the small IntersectionObserver in pages.py that only drives the dot
indicator below the row). The row stays fully inside .wrap's existing
padding (no negative-margin breakout) so the already-verified "card never
overflows the viewport" geometry from the previous pass can't regress. */
@media (max-width: 700px) {
.verticals .grid3 {
display: flex;
grid-template-columns: none;
overflow-x: auto;
overflow-y: visible;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
gap: 14px;
padding-bottom: 4px;
scrollbar-width: none;
-ms-overflow-style: none;
}
.verticals .grid3::-webkit-scrollbar { display: none; }
.vcard {
flex: 0 0 84%;
min-width: 0;
max-width: 380px;
scroll-snap-align: start;
scroll-snap-stop: always;
padding: 18px 18px 22px;
min-height: 0;
}
.vcard-visual { margin-bottom: 14px; }
.vcard h3 { font-size: 1.3rem; margin-bottom: 6px; }
.vcard p { font-size: 0.92rem; }
.vcard .go { margin-top: 14px; }
}
/* Position indicator dots for the swipe row — hidden whenever the row isn't
a slider (tablet/desktop keep the plain grid, no dots needed there). */
.vcard-dots {
display: none;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: 4px;
}
.vcard-dot {
width: 16px;
height: 4px;
border-radius: var(--radius-pill);
background: var(--line);
transition: background-color 0.25s ease, width 0.25s ease;
}
.vcard-dot.is-active { width: 28px; background: var(--frog); }
@media (max-width: 700px) {
.vcard-dots { display: flex; }
}
.vcard-visual::before {
content: "";
position: absolute;
inset: 0;
z-index: 2;
background: linear-gradient(to top, rgba(10, 12, 14, 0.14), transparent 45%);
pointer-events: none;
}
.vcard-visual::after {
content: "";
position: absolute;
inset: 0;
z-index: 3;
background: var(--accent-tint, transparent);
mix-blend-mode: multiply;
opacity: 0.15;
pointer-events: none;
}
.vcard--hockey { --accent-tint: #eaf1fb; --accent-tint-2: #d3e3f7; }
.vcard--mtb { --accent-tint: var(--frog-tint); --accent-tint-2: var(--frog-tint-2); }
.vcard--grooming { --accent-tint: #f7f1e7; --accent-tint-2: #eee2cc; }
.vcard--yoga { --accent-tint: #f1eef9; --accent-tint-2: #e3dcf3; }
.vcard h3 {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.5rem;
letter-spacing: -0.01em;
margin: 0 0 8px;
}
.vcard p { color: var(--slate); margin: 0; font-size: 0.96rem; }
.vcard .go {
display: inline-block;
font-weight: 700;
font-size: 0.88rem;
margin-top: 22px;
color: var(--frog-deep);
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
@media (min-width: 900px) {
.verticals .grid3 { gap: 28px; }
.vcard { padding: 28px 28px 38px; min-height: 340px; }
.vcard h3 { font-size: 1.7rem; }
}
@media (min-width: 1600px) {
.verticals .grid3 { gap: 32px; }
}
/* ---------- Generic section ---------- */
.section { padding: clamp(48px, 5vw, 64px) 0; border-bottom: 1px solid var(--line); }
@media (max-width: 700px) {
.section { padding: 32px 0; }
}
.section h2 {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(1.6rem, 2.6vw, 2.2rem);
letter-spacing: -0.015em;
margin: 0 0 26px;
color: var(--ink);
}
.section:last-of-type,
main > .section:last-child { border-bottom: none; }
/* Opt-in, used sparingly (currently only the homepage trust section) for a
very subtle full-bleed background shift — calm visual rhythm instead of
"cards on endless white", without touching every .section site-wide. */
.section--tint { background: var(--paper-alt); }
/* ---------- Feed card ("Aktuell bei CompareFrog") ---------- */
.feed-card {
display: block;
max-width: 62ch;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
padding: 30px 32px;
text-decoration: none;
color: var(--ink);
transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
@media (max-width: 480px) {
.feed-card { padding: 22px 20px; }
}
.feed-card:hover {
border-color: rgba(18, 21, 26, 0.14);
box-shadow: var(--shadow-md);
transform: translateY(-3px);
}
.feed-tag {
font-weight: 700;
font-size: 0.8rem;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--frog-deep);
}
.feed-card h3 {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.35rem;
letter-spacing: -0.01em;
margin: 12px 0 8px;
}
.feed-card p { color: var(--slate); margin: 0; font-size: 0.96rem; }
.feed-card .go {
font-weight: 700;
font-size: 0.88rem;
margin-top: 18px;
display: inline-block;
color: var(--frog-deep);
}
/* ---------- Trust grid ---------- */
.trust-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
margin-top: 8px;
}
@media (max-width: 900px) {
.trust-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
.trust-grid { grid-template-columns: 1fr; }
}
.trust-item {
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
padding: 20px 20px 22px;
}
.trust-item .trust-icon {
display: inline-flex;
color: var(--frog);
margin-bottom: 12px;
}
.trust-item .trust-icon svg { width: 22px; height: 22px; }
.trust-item h3 {
font-weight: 700;
font-size: 0.92rem;
color: var(--ink);
margin: 0 0 8px;
}
.trust-item p {
color: var(--slate);
font-size: 0.89rem;
margin: 0;
line-height: 1.5;
}
.trust-item p a { color: var(--frog-deep); text-decoration: underline; }
/* ---------- Article list ---------- */
.article-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.article-row {
display: grid;
grid-template-columns: 1fr auto;
gap: 16px;
padding: 22px 0;
border-bottom: 1px solid var(--line);
text-decoration: none;
color: var(--ink);
align-items: baseline;
}
.article-row:hover .title { color: var(--frog-deep); }
.article-row .title {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.15rem;
transition: color 0.15s ease;
}
.article-row .meta {
font-size: 0.82rem;
color: var(--slate);
}
.empty-note {
padding: 26px 0;
color: var(--slate);
font-size: 0.95rem;
border-top: 1px solid var(--line);
}
/* ---------- Article page ---------- */
.article-head { padding: clamp(40px, 6vw, 64px) 0 20px; border-bottom: 1px solid var(--line); }
.article-head h1 {
font-family: var(--font-display);
font-weight: 800;
font-size: clamp(1.9rem, 4vw, 2.7rem);
letter-spacing: -0.02em;
line-height: 1.08;
margin: 0 0 18px;
max-width: 20ch;
color: var(--ink);
}
.article-head .lede { color: var(--slate); font-size: 1.05rem; max-width: 62ch; }
.disclosure {
font-size: 0.85rem;
color: var(--ink);
background: var(--frog-tint);
border-left: 3px solid var(--frog);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
padding: 12px 16px;
margin: 24px 0 0;
max-width: 62ch;
}
.article-body { padding: clamp(32px, 5vw, 52px) 0; max-width: 74ch; }
.article-body h2 {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.4rem;
letter-spacing: -0.01em;
margin: 2.2em 0 0.7em;
color: var(--ink);
}
.article-body h2:first-child { margin-top: 0; }
.article-body p { margin: 0 0 1.2em; }
.article-body ul, .article-body ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.article-body li { margin-bottom: 0.4em; }
.article-body table {
width: 100%;
border-collapse: collapse;
margin: 1.6em 0;
font-size: 0.95rem;
}
.article-body th, .article-body td {
border: 1px solid var(--line);
padding: 10px 12px;
text-align: left;
vertical-align: top;
}
.article-body th { background: var(--paper-alt); font-weight: 700; font-size: 0.85rem; color: var(--ink); }
.article-body .faq dt { font-family: var(--font-display); font-weight: 700; margin-top: 1.4em; color: var(--ink); }
.article-body .faq dd { margin: 0.4em 0 0; color: var(--slate); }
.pending-note {
font-size: 0.82rem;
font-weight: 600;
color: var(--frog-deep);
border: 1px dashed rgba(14, 122, 71, 0.4);
border-radius: var(--radius-sm);
padding: 8px 10px;
display: inline-block;
}
/* ---------- Legal / plain pages ---------- */
.plain { max-width: 72ch; padding: clamp(40px, 6vw, 70px) 0; }
.plain h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.8rem, 4vw, 2.4rem); margin-bottom: 0.6em; color: var(--ink); }
.plain h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; margin: 1.8em 0 0.5em; color: var(--ink); }
.plain p, .plain li { color: var(--ink); }
.plain a.mail { color: var(--frog-deep); text-decoration: underline; }
/* ---------- Footer ---------- */
footer.site-footer {
background: var(--paper-alt);
border-top: 1px solid var(--line);
padding: 44px 0 50px;
margin-top: 40px;
}
footer .wrap {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 24px;
font-size: 0.9rem;
}
@media (max-width: 700px) {
footer.site-footer { padding: 32px 0 36px; margin-top: 28px; }
footer .wrap { grid-template-columns: 1fr; gap: 20px; }
.legal-line { margin-top: 22px; padding-top: 14px; }
}
footer .col h4 {
font-weight: 700;
font-size: 0.8rem;
letter-spacing: 0.02em;
color: var(--ink);
margin: 0 0 12px;
}
footer a { text-decoration: none; color: var(--slate); display: inline-block; padding: 3px 0; }
footer a:hover { color: var(--frog-deep); }
footer .col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
footer p { color: var(--slate); margin: 0; }
.legal-line {
font-size: 0.8rem;
color: var(--slate-light);
margin-top: 32px;
border-top: 1px solid var(--line);
padding-top: 18px;
}
/* ---------- Skip link ---------- */
.skip-link {
position: absolute;
left: -999px;
top: 0;
background: var(--ink);
color: #ffffff;
padding: 10px 16px;
z-index: 100;
}
.skip-link:focus { left: 10px; top: 10px; }