/* ============================================================
FORSIDE ("Nærvær") · front-page.php
------------------------------------------------------------
Loads AFTER zency-design-system.css (tokens/.z-*) and behandling.css
(reused .zb-hero / .zb-trust / .zb-trustpilot components). This file only
owns the forside-unique sections (.zf-*). The header lives in
zency-header.css (already live) and is NOT restyled here.
Dynamic sections are real shortcodes rendered by front-page.php:
hero search + [zency_location_filter], reviews [brb_collection],
guide [zency_guide], map [zency_map_v2]. Those bring their own CSS —
we only style the section frame around them.
============================================================ */
/* Link reset for forside content (cards/links wrap real s). Scoped to the
forside main so it never leaks into shortcode output styling. Buttons are real
s too, so exclude .zf-btn from the COLOR reset — otherwise color:inherit
(specificity 0,1,1) beats the .zf-btn--olive/-ghost white (0,1,0) and repaints
the button text with the parent's colour (e.g. the dark band/panel's mint).
Buttons still get text-decoration:none. */
.zf-front a { text-decoration: none; }
.zf-front a:not(.zf-btn) { color: inherit; }
/* Eyebrow (uppercase kicker — the one allowed uppercase, brand §13) */
.zf-eyebrow {
font-family: var(--font-dosis);
font-weight: 700;
font-size: 0.8rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-sage-500);
display: block;
}
.zf-wrap {
max-width: 1200px;
margin: 0 auto;
padding-inline: clamp(16px, 4vw, 40px);
}
/* ---- Section rhythm ---- */
.zf-section { padding-block: clamp(2.75rem, 6vw, 5rem); }
.zf-section--tight { padding-block: clamp(2rem, 4vw, 3.5rem); }
.zf-section__head { max-width: 760px; margin: 0 auto clamp(1.75rem, 3vw, 2.5rem); text-align: center; }
.zf-section__head .zf-eyebrow { margin-bottom: 0.6rem; }
.zf-section__sub {
font-family: var(--font-source);
font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.18rem);
line-height: 1.6;
color: var(--color-ink-soft);
margin: 0.9rem 0 0;
text-wrap: pretty;
}
/* =========== HERO — reused verbatim from the behandling template
(.zb-hero, .zb-hero__scrim, .zb-hero__inner, .zb-hero__h1/.z-h1,
.zb-hero__filter, .zb-trustpilot). Styling lives in behandling.css.
Forside hero: a touch wider than behandling's 48rem so the longer H1 balances
onto two lines ("Book massage i hele Danmark" / "- 120+ uddannede massører").
Scoped to the forside — the shared behandling.css stays untouched. */
.zf-hero-home .zb-hero__inner { max-width: 52rem; }
.zf-hero-home .zb-hero__filter {
max-width: 40rem;
box-shadow: 0 22px 48px -20px rgba(0, 0, 0, 0.5);
}
/* =========== REVIEWS ([brb_collection]) =========== */
.zf-reviews { background: var(--color-cream); }
/* =========== POPULÆRE BEHANDLINGER =========== */
.zf-treatment-grid {
display: grid;
gap: clamp(0.7rem, 2vw, 1.5rem);
grid-template-columns: repeat(2, 1fr); /* 2 columns on mobile */
}
@media (min-width: 960px) { .zf-treatment-grid { grid-template-columns: repeat(3, 1fr); } }
.zf-tcard {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--color-line);
border-radius: 1.25rem;
overflow: hidden;
box-shadow: 0 12px 32px -22px rgba(68, 103, 91, 0.35);
transition: transform 0.2s var(--ease-out-soft), box-shadow 0.2s var(--ease-out-soft);
}
.zf-tcard:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -22px rgba(68, 103, 91, 0.45); }
.zf-tcard__img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.zf-tcard__body { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.2rem 1.4rem 1.5rem; flex: 1; }
.zf-tcard__title {
font-family: var(--font-merriweather);
font-weight: 400;
font-size: 1.4118rem;
line-height: 1.25;
color: var(--color-forest);
margin: 0;
text-wrap: balance;
/* NO auto-hyphenation: on real browsers with the da dictionary it splits words
like "Fysiurgisk" unnecessarily. Long single-word compounds break only at the
soft hyphens baked into the markup (Bindevævsmassage …); two-word titles
wrap at the space. Nothing breaks mid-word. */
-webkit-hyphens: manual;
hyphens: manual;
}
/* Two uniform lines across all cards: "Find en" (lead) / "XX-massør →" (main). */
.zf-tcard__link {
margin-top: auto;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1px;
font-family: var(--font-dosis);
font-weight: 700;
letter-spacing: 0.3px;
line-height: 1.3;
color: var(--color-sage-600);
transition: color 0.2s;
}
.zf-tcard__link-main {
display: inline-flex;
align-items: center;
gap: 0.4rem;
transition: gap 0.2s var(--ease-out-soft);
}
.zf-tcard:hover .zf-tcard__link { color: var(--color-sage-700); }
.zf-tcard:hover .zf-tcard__link-main { gap: 0.7rem; }
.zf-tcard__link svg { width: 15px; height: 15px; flex-shrink: 0; }
/* Tighten cards when they sit two-up on small phones (placed after the base
rules so the smaller title size actually wins on source order). */
@media (max-width: 520px) {
.zf-tcard__body { padding: 0.85rem 0.9rem 1.1rem; gap: 0.5rem; }
.zf-tcard__title { font-size: 1rem; line-height: 1.2; }
.zf-tcard__link { font-size: 0.8rem; }
}
/* =========== BAND ("Fandt du ikke det du søgte?" + gavekort) =========== */
.zf-band {
background: linear-gradient(160deg, #5b746f 0%, #2f3b39 100%);
border-radius: var(--radius-2xl);
padding: clamp(1.9rem, 1.4rem + 2.5vw, 3rem);
color: var(--color-mint-soft);
text-align: center;
margin-top: clamp(2rem, 4vw, 3rem);
}
.zf-band h2 {
font-family: var(--font-merriweather);
font-weight: 400;
font-size: clamp(1.6rem, 1.35rem + 1vw, 2rem);
letter-spacing: 0.6px;
color: #fff;
margin: 0 0 0.7rem;
text-wrap: balance;
}
.zf-band p {
font-family: var(--font-source);
font-size: 1.05rem;
line-height: 1.6;
color: var(--color-mint-soft);
margin: 0 auto 0.6rem;
max-width: 620px;
text-wrap: pretty;
}
.zf-band__actions {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
justify-content: center;
margin-top: 1.4rem;
}
/* Buttons reused across the forside */
.zf-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
font-family: var(--font-dosis);
font-weight: 700;
letter-spacing: 0.5px;
text-transform: none;
border-radius: 9999px;
padding: 0.85rem 1.9rem;
cursor: pointer;
transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}
.zf-btn--olive { background: var(--color-olive); color: #fff; border: 1px solid var(--color-olive); }
.zf-btn--olive:hover { background: var(--color-olive-dark); border-color: var(--color-olive-dark); transform: translateY(-1px); }
.zf-btn--ghost { background: transparent; border: 1.5px solid rgba(216, 236, 224, 0.45); color: #fff; }
.zf-btn--ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--color-mint); color: #fff; }
.zf-btn--sage-outline { background: transparent; border: 1.5px solid var(--color-sage-400); color: var(--color-sage-700); }
.zf-btn--sage-outline:hover { background: var(--color-sage-500); border-color: var(--color-sage-500); color: #fff; }
/* Keep white button text on hover everywhere — including inside .zency-article,
whose `a:hover` (olive, specificity 0,2,1) would otherwise repaint it. The
article-scoped selector out-specifies that rule; the plain .zf-btn:hover covers
buttons elsewhere (notably --olive:hover, which never re-declares its colour). */
.zf-btn:hover,
.zency-article a.zf-btn:hover { color: #fff; }
/* =========== MASSAGEGUIDE ([zency_guide]) =========== */
.zf-guide__embed { max-width: 860px; margin: 0 auto; }
/* =========== COVERAGE MAP ([zency_map_v2] in the SEO media-split) =========== */
.zf-map-embed { border-radius: 1.25rem; overflow: hidden; box-shadow: 0 18px 40px -18px rgba(20, 48, 42, 0.35); }
.zf-map-embed > * { display: block; }
/* =========== GARANTI + COUNTER =========== */
.zf-guarantee__panel {
background: linear-gradient(160deg, #5b746f 0%, #2f3b39 100%);
border-radius: var(--radius-2xl);
padding: clamp(2rem, 4vw, 3.5rem);
color: var(--color-mint-soft);
display: grid;
gap: clamp(1.5rem, 3vw, 2.5rem);
align-items: center;
}
@media (min-width: 900px) { .zf-guarantee__panel { grid-template-columns: 1.45fr 1fr; } }
.zf-guarantee h2 {
font-family: var(--font-merriweather);
font-weight: 400;
font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.1rem);
letter-spacing: 0.6px;
color: #fff;
margin: 0 0 1rem;
text-wrap: balance;
}
.zf-guarantee p {
font-family: var(--font-source);
font-size: 1.05rem;
line-height: 1.65;
color: var(--color-mint-soft);
margin: 0 0 0.9rem;
}
.zf-guarantee__cta { margin-top: 0.6rem; }
.zf-counter {
text-align: center;
border-left: 1px solid rgba(216, 236, 224, 0.18);
padding-left: clamp(1.5rem, 3vw, 2.5rem);
}
@media (max-width: 899px) { .zf-counter { border-left: none; padding-left: 0; border-top: 1px solid rgba(216, 236, 224, 0.18); padding-top: 1.75rem; } }
.zf-counter__num {
font-family: var(--font-dosis);
font-weight: 700;
font-size: clamp(3.6rem, 8vw, 5.5rem);
line-height: 1;
color: #fff; /* white, not gold — keeps the olive book-CTA as the sole accent (brand §13) */
}
.zf-counter__label {
font-family: var(--font-source);
font-size: 1rem;
line-height: 1.5;
color: var(--color-mint-soft);
margin: 0.6rem auto 0;
max-width: 260px;
}
/* =========== "Er du behandler?" (reuses .z-callout) =========== */
.zency-article .zf-recruit-callout { max-width: 780px; margin-inline: auto; align-items: center; }
.zf-recruit-callout__body {
flex: 1;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.6rem 1.5rem;
}
.zency-article .zf-recruit-callout__body p { font-size: 1.05rem; }
@media (max-width: 560px) {
/* Two natural lines on mobile: "Er du behandler?" / "Bliv en del af Zency." */
.zf-recruit-callout__body p strong { display: block; }
}
/* Buttons inside .zency-article must not inherit the article's underlined link style */
.zency-article a.zf-btn { text-decoration: none; }
/* Media-split heading sits flush to the top of its column (not a direct
.zency-article child, so the first-child margin reset doesn't reach it). */
.zency-article .z-media-split h2 { margin-top: 0; }
/* =========== LOKATIONER =========== */
.zf-locations { background: linear-gradient(165deg, var(--color-sage-50) 0%, var(--color-mint-soft) 100%); }
.zf-loc-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; margin: 0 0 clamp(1.75rem, 3vw, 2.5rem); }
.zf-loc-tab {
min-width: 130px;
padding: 0.55rem 1.6rem;
font-family: var(--font-dosis);
font-weight: 600;
font-size: 0.95rem;
color: var(--color-sage-700);
background: #fff;
border: 1px solid var(--color-sage-300);
border-radius: 9999px;
cursor: pointer;
transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.zf-loc-tab:hover { border-color: var(--color-sage-500); }
.zf-loc-tab[aria-selected="true"] { color: #fff; background: var(--color-sage-500); border-color: var(--color-sage-500); }
@media (max-width: 520px) {
/* Smaller tabs so Jylland / Fyn / Sjælland fit on one row */
.zf-loc-tabs { flex-wrap: nowrap; gap: 0.4rem; }
.zf-loc-tab {
flex: 1 1 0;
min-width: 0;
padding: 0.5rem 0.5rem;
font-size: 0.82rem;
}
}
.zf-loc-panel[hidden] { display: none; }
.zf-loc-panel__title {
font-family: var(--font-merriweather);
font-weight: 300;
font-size: 1.4118rem;
letter-spacing: 0.6px;
color: var(--color-sage-700);
margin: 0 0 1rem;
text-align: center;
}
/* Fixed column count so EVERY region tab shows the same grid regardless of how
many cities it holds: 4 columns on desktop, 2 on mobile. Row flow (the default)
fills left-to-right across the fixed columns, so the alphabetical list now reads
row-major (previously column-major top-to-bottom). auto-sized columns +
justify-content:center keep the whole group genuinely centred — equal-width 1fr
columns would stretch and make the links hug the left of each wide column. The
15px margin-right on the grid itself (desktop only) nudges the whole block so it
reads a touch more centred; reset to auto on mobile. */
.zf-city-grid {
display: grid;
grid-template-columns: repeat(4, auto);
justify-content: center;
column-gap: clamp(1.25rem, 4vw, 3.5rem);
row-gap: 2px;
max-width: 1040px;
margin: 0 15px 0 auto;
}
@media (max-width: 620px) {
.zf-city-grid { grid-template-columns: repeat(2, auto); column-gap: clamp(1rem, 6vw, 2rem); margin-right: auto; }
.zf-city-grid a { font-size: 0.85rem; gap: 5px; }
}
.zf-city-grid a {
display: flex;
align-items: center;
gap: 8px;
padding: 4px 0;
font-family: var(--font-source);
font-size: 1rem;
color: var(--color-ink-soft);
transition: color 0.15s;
}
.zf-city-grid a::before {
content: '';
display: inline-block;
width: 0.7em; height: 0.7em;
flex-shrink: 0;
background-color: var(--color-sage-500);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z'/%3E%3C/svg%3E");
-webkit-mask-size: contain; mask-size: contain;
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.zf-city-grid a:hover { color: var(--color-sage-700); }
.zf-loc-note { text-align: center; margin-top: 1.5rem; color: var(--color-ink-soft); }
/* =========== MOBIL: mindre centreret tekst ===========
Centreret brødtekst mister sin effekt på en smal skærm. På telefoner
venstrestiller vi de tekst-tunge blokke — sektionsheads (eyebrow + overskrift
+ den beskrivende under-tekst) og lokationstitlerne — og beholder KUN
centrering de få steder hvor det er et bevidst, fokalt moment: hero'en,
tal-tælleren, guiden og det mørke cross-sell-band. Placeret til sidst så de
vinder på kildeorden. NB: den dekorative streg under .z-section-h2--center
skal også rykkes til venstre. */
@media (max-width: 600px) {
.zf-section__head { text-align: left; }
.zf-section__head .z-section-h2--center { text-align: left; }
.zf-section__head .z-section-h2--center::after { left: 0; transform: none; }
.zf-loc-panel__title { text-align: left; }
}