/* === BLOCKS — Esthé Nirvâna === BEM-achtig: .block, .block__element, .block--modifier. Elk blok kopieerbaar naar andere pagina. */ /* ========================================================================== NAV (block--nav) ========================================================================== */ .site-nav { position: sticky; top: 0; z-index: 100; height: var(--nav-height-desktop); background: var(--nav-bg-alpha); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--color-divider); transform: translateY(0); transition: transform var(--transition-nav), background var(--transition-interactive); will-change: transform; } .site-nav[data-hidden="true"] { transform: translateY(-100%); } @media (max-width: 768px) { .site-nav { height: var(--nav-height-mobile); } } /* HARD: container in nav krijgt height:100% — anders krijgt .site-nav__inner (height:100%) intrinsic-height en align-items:center pakt content-midden i.p.v. nav-midden. Zonder deze regel plakken brand/links/CTA bovenaan de 72px nav (3.9 regel 11). */ .site-nav > .container { height: 100%; } .site-nav__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: var(--space-6); } .site-nav__brand { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text); text-decoration: none; font-family: var(--font-display); font-size: var(--text-lg); letter-spacing: 0.01em; line-height: 1; flex-shrink: 0; } .site-nav__brand:hover { text-decoration: none; color: var(--color-primary); } .site-nav__brand-mark { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; color: var(--color-primary); flex-shrink: 0; } .site-nav__links { display: flex; gap: var(--space-8); list-style: none; align-items: center; } .site-nav__links a { position: relative; text-decoration: none; color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 500; padding-block: var(--space-2); transition: color var(--transition-interactive); } .site-nav__links a:hover { color: var(--color-text); } .site-nav__links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--color-primary); transform: scaleX(0); transform-origin: left; transition: transform var(--transition-interactive); } .site-nav__links a:hover::after, .site-nav__links a[aria-current="page"]::after { transform: scaleX(1); } .site-nav__actions { display: inline-flex; gap: var(--space-2); align-items: center; } .theme-toggle { width: 44px; height: 44px; padding: var(--space-2); color: var(--color-text-muted); border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; transition: color var(--transition-interactive), background var(--transition-interactive); } .theme-toggle:hover { color: var(--color-text); background: var(--color-surface-offset); } .theme-toggle:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .theme-toggle .icon-moon { display: none; } [data-theme="dark"] .theme-toggle .icon-sun { display: none; } [data-theme="dark"] .theme-toggle .icon-moon { display: inline-block; } .hamburger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; color: var(--color-text); border-radius: var(--radius-md); transition: background var(--transition-interactive); } .hamburger:hover { background: var(--color-surface-offset); } .hamburger:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* Drawer staat OP BODY-niveau (niet in .site-nav) omdat .site-nav's transform een containing block wordt. Zie index.html — .nav-drawer is direct kind van . */ .nav-drawer { display: none; position: fixed; inset: var(--nav-height-mobile) 0 0 0; background: var(--color-surface); z-index: 99; padding: var(--space-8) var(--space-6); overflow-y: auto; } @media (min-width: 769px) { .nav-drawer { display: none !important; } } body[data-drawer-open="true"] { overflow: hidden; } body[data-drawer-open="true"] .nav-drawer { display: block; } .nav-drawer .site-nav__links { flex-direction: column; gap: var(--space-6); align-items: flex-start; } .nav-drawer .site-nav__links a { font-size: var(--text-lg); font-family: var(--font-display); } .nav-drawer__cta { margin-top: var(--space-8); display: flex; flex-direction: column; gap: var(--space-3); } @media (max-width: 768px) { .site-nav__links.desktop-only { display: none; } .hamburger { display: inline-flex; } .site-nav__brand { font-size: var(--text-base); } .site-nav__cta-desktop { display: none; } } /* ========================================================================== HERO (block--hero) ========================================================================== */ .block--hero { padding-block: clamp(var(--space-16), 10vw, var(--space-24)); } .hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(var(--space-8), 6vw, var(--space-16)); align-items: center; } .hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-6); } .hero__title { font-size: clamp(2.25rem, 1.4rem + 3.5vw, 4.5rem); line-height: 1.05; margin: 0; } .hero__title em { font-style: italic; color: var(--color-primary); } .hero__lead { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 42ch; line-height: 1.55; } .hero__ctas { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; } .hero__meta { display: flex; align-items: center; gap: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-divider); margin-top: var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); flex-wrap: wrap; } .hero__meta strong { color: var(--color-text); font-weight: 600; } .hero__meta-divider { color: var(--color-text-faint); } .hero__visual { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-2xl); box-shadow: var(--shadow-lg); background: var(--color-surface-offset); } .hero__visual img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; } .hero__visual-badge { position: absolute; bottom: var(--space-4); left: var(--space-4); right: var(--space-4); background: var(--nav-bg-alpha); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); font-size: var(--text-xs); color: var(--color-text); display: flex; align-items: center; gap: var(--space-3); } .hero__visual-badge strong { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 400; } @media (max-width: 900px) { .hero { grid-template-columns: 1fr; gap: var(--space-10); } .hero__text { order: 1; align-items: flex-start; } .hero__visual { order: 2; max-width: 480px; margin-inline: auto; width: 100%; } } /* Hero meta — voorkom orphan divider bij wrap */ .hero__meta > span { white-space: nowrap; } /* ========================================================================== INTRO (block--intro) ========================================================================== */ .block--intro { padding-block: clamp(var(--space-16), 8vw, var(--space-20)); } .intro-quote { max-width: 780px; margin-inline: auto; text-align: center; display: flex; flex-direction: column; gap: var(--space-6); align-items: center; } .intro-quote__mark { font-family: var(--font-display); font-size: clamp(4rem, 8vw, 6rem); line-height: 0.8; color: var(--color-primary); opacity: 0.35; } .intro-quote__text { font-family: var(--font-display); font-size: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); line-height: 1.4; color: var(--color-text); font-style: italic; } .intro-quote__sign { font-size: var(--text-sm); color: var(--color-text-muted); letter-spacing: 0.08em; text-transform: uppercase; } /* ========================================================================== BEHANDELINGEN (block--treatments) ========================================================================== */ /* Grid: 3 kolommen desktop, 2 tablet, 1 mobiel. Cards vullen container-breedte. */ .treatments-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } @media (max-width: 900px) { .treatments-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .treatments-grid { grid-template-columns: 1fr; } } .treatment-card { background: var(--color-surface-2); border-radius: var(--radius-xl); padding: var(--space-6) var(--space-6) var(--space-8); border: 1px solid color-mix(in oklab, var(--color-text) 8%, transparent); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--space-4); transition: box-shadow var(--transition-interactive), transform var(--transition-interactive), border-color var(--transition-interactive); position: relative; overflow: hidden; /* nodig voor edge-to-edge media met border-radius */ } /* Media-zone bovenaan treatment-card. Negatieve margins → edge-to-edge tot rand card. Aspect 4:3 (matcht 4b image-generation ratio). Placeholder-tint uit surface-offset zodat card niet leeg oogt tijdens image-load (loading="lazy"). */ .treatment-card__media { margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-2); aspect-ratio: 4 / 3; background: var(--color-surface-offset); overflow: hidden; } .treatment-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform var(--transition-reveal); } .treatment-card:hover .treatment-card__media img { transform: scale(1.02); } /* Op featured card: gradient overlay bovenop foto zodat de lila-tint zichtbaar blijft en de "Meest gekozen" flag rechtsboven leesbaar tegen foto ipv card-background. */ .treatment-card--featured .treatment-card__media { position: relative; } .treatment-card--featured .treatment-card__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in oklab, var(--color-primary-highlight) 55%, transparent) 0%, transparent 60%); pointer-events: none; } [data-theme="dark"] .treatment-card { border-color: var(--color-divider); } .treatment-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .treatment-card--featured { border-color: color-mix(in oklab, var(--color-primary) 40%, transparent); background: linear-gradient(180deg, var(--color-primary-highlight) 0%, var(--color-surface-2) 55%); box-shadow: var(--shadow-md); } .treatment-card--featured::before { content: 'Meest gekozen'; position: absolute; top: var(--space-3); right: var(--space-4); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primary); background: var(--color-surface-2); padding: var(--space-1) var(--space-3); border-radius: var(--radius-full); border: 1px solid color-mix(in oklab, var(--color-primary) 30%, transparent); } .treatment-card__icon { width: 40px; height: 40px; color: var(--color-primary); display: inline-flex; align-items: center; justify-content: center; } .treatment-card__title { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-text); margin: 0; } .treatment-card__duration { font-size: var(--text-xs); color: var(--color-text-muted); letter-spacing: 0.06em; text-transform: uppercase; } .treatment-card__desc { color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.6; flex: 1; } /* 3.4.2 — footer plakt aan onderkant (margin-top:auto), kolom met 3 slots: price-value, price-note (variant/uitleg), card-tag (karakteristiek/korting). Was voorheen flex-row met space-between → bij-tekst plakte rechts naast prijs, layout brak. Nu vertical stack: hoofdprijs bovenaan, muted note eronder, subtiele pill gecentreerd onder. */ .treatment-card__price { margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--color-divider); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); } .treatment-card__price-value { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-primary); font-weight: 400; line-height: 1.1; } .treatment-card__price-note { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.4; } /* Als er GEEN price-note is, injecteer een onzichtbare regel met dezelfde hoogte — zo staan alle price-values in dezelfde rij op EXACT dezelfde baseline, ongeacht content. */ .treatment-card__price:not(:has(.treatment-card__price-note))::after { content: '\00a0'; display: block; font-size: var(--text-xs); line-height: 1.4; color: transparent; pointer-events: none; } /* Card-tag — subtiele pill overlay ONDERAAN de foto in de media-zone. Positie: absoluut binnen .treatment-card__media, gecentreerd, ~4px van onderkant foto. Look: wit-transparant met accent-tekst voor contrast op elke foto-region. */ .card-tag { padding: var(--space-1) var(--space-3); background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--color-primary); border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); } /* Pill in media-zone: overlay onderaan foto, gecentreerd */ .treatment-card__media { position: relative; } .treatment-card__media .card-tag { position: absolute; bottom: var(--space-3); left: 50%; transform: translateX(-50%); z-index: 3; } .treatments-footer { margin-top: var(--space-10); padding-top: var(--space-8); border-top: 1px solid var(--color-divider); display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; } /* ========================================================================== ABOUT (block--about) ========================================================================== */ .about { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(var(--space-8), 6vw, var(--space-16)); align-items: center; } .about__visual { aspect-ratio: 3 / 4; border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-md); } .about__visual img { width: 100%; height: 100%; object-fit: cover; } .about__text { display: flex; flex-direction: column; gap: var(--space-4); } .about__credentials { margin-top: var(--space-4); display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3) var(--space-6); list-style: none; padding: 0; } .about__credentials li { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) 0; border-top: 1px solid var(--color-divider); color: var(--color-text-muted); font-size: var(--text-sm); } .about__credentials li strong { color: var(--color-text); font-weight: 600; display: block; } .about__credentials li svg { color: var(--color-primary); flex-shrink: 0; margin-top: 2px; } @media (max-width: 900px) { .about { grid-template-columns: 1fr; } .about__visual { max-width: 420px; margin-inline: auto; width: 100%; } } /* ========================================================================== ONCOLOGY (block--oncology) ========================================================================== */ .oncology { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(var(--space-8), 6vw, var(--space-16)); align-items: center; } .oncology__text { display: flex; flex-direction: column; gap: var(--space-4); } .oncology__visual { aspect-ratio: 4 / 5; border-radius: var(--radius-2xl); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--color-surface-offset); position: relative; } .oncology__visual img { width: 100%; height: 100%; object-fit: cover; } .oncology__partners { display: flex; align-items: center; gap: var(--space-6) var(--space-8); padding: var(--space-4) 0; border-top: 1px solid var(--color-divider); border-bottom: 1px solid var(--color-divider); margin-block: var(--space-4); flex-wrap: wrap; } .oncology__partner { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs); color: var(--color-text-muted); letter-spacing: 0.06em; text-transform: uppercase; } .oncology__partner img { height: 40px; width: auto; } .oncology__partner strong { color: var(--color-text); font-weight: 600; letter-spacing: 0.04em; } @media (max-width: 900px) { .oncology { grid-template-columns: 1fr; } .oncology__visual { order: -1; max-width: 420px; margin-inline: auto; width: 100%; } } /* ========================================================================== PRODUCTS (block--products) ========================================================================== */ /* 2 productlijnen — 2 kolommen desktop, 1 op mobiel. */ .products-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } @media (max-width: 700px) { .products-grid { grid-template-columns: 1fr; } } .product-card { background: var(--color-surface-2); border-radius: var(--radius-xl); padding: var(--space-8); border: 1px solid color-mix(in oklab, var(--color-text) 8%, transparent); display: flex; flex-direction: column; gap: var(--space-4); transition: box-shadow var(--transition-interactive), transform var(--transition-interactive); box-shadow: var(--shadow-sm); } [data-theme="dark"] .product-card { border-color: var(--color-divider); } .product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .product-card__brand { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-text); margin: 0; } .product-card__tagline { color: var(--color-primary); font-size: var(--text-xs); letter-spacing: 0.1em; text-transform: uppercase; margin: 0; } .product-card__desc { color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.6; flex: 1; } .product-card__cta { margin-top: var(--space-2); align-self: flex-start; } /* ========================================================================== REVIEWS (block--reviews) ========================================================================== */ .reviews-header { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-6); margin-bottom: var(--space-10); } .reviews-summary { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); padding: var(--space-3) var(--space-5); background: var(--color-surface-2); border-radius: var(--radius-full); border: 1px solid var(--color-divider); } .reviews-summary strong { color: var(--color-text); font-weight: 600; } .stars { --rating: 5; position: relative; display: inline-block; color: color-mix(in oklab, var(--color-text-faint) 40%, transparent); letter-spacing: 2px; font-size: var(--text-lg); line-height: 1; font-family: system-ui, sans-serif; } .stars::before { content: '★★★★★'; position: absolute; inset: 0; overflow: hidden; width: calc(var(--rating) / 5 * 100%); color: #E8A317; letter-spacing: 2px; white-space: nowrap; } /* 3 reviews — 3 kolommen desktop, 1 mobiel. */ .reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } @media (max-width: 900px) { .reviews-grid { grid-template-columns: 1fr; } } .review-card { background: var(--color-surface-2); border-radius: var(--radius-xl); padding: var(--space-6); border: 1px solid color-mix(in oklab, var(--color-text) 8%, transparent); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: var(--space-3); } [data-theme="dark"] .review-card { border-color: var(--color-divider); } .review-card .stars { font-size: var(--text-base); } .review-card__quote { color: var(--color-text); line-height: 1.6; font-family: var(--font-display); font-size: var(--text-base); font-style: italic; flex: 1; } .review-card__quote--empty { color: var(--color-text-muted); font-style: italic; font-size: var(--text-sm); } .review-card__meta { display: flex; align-items: center; gap: var(--space-3); margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--color-divider); font-size: var(--text-sm); } .review-card__avatar { width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--color-primary-highlight); color: var(--color-primary); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; flex-shrink: 0; font-family: var(--font-body); } .review-card__author { font-weight: 600; color: var(--color-text); } .review-card__date { color: var(--color-text-faint); font-size: var(--text-xs); } .reviews-footer { margin-top: var(--space-10); text-align: center; } /* ========================================================================== CTA BAND (block--cta-band) ========================================================================== */ .cta-band { background: var(--color-primary); color: var(--color-text-inverse); padding-block: clamp(var(--space-16), 8vw, var(--space-20)); text-align: center; position: relative; overflow: hidden; } .cta-band::before, .cta-band::after { content: ''; position: absolute; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, color-mix(in oklab, white 15%, transparent) 0%, transparent 65%); pointer-events: none; } .cta-band::before { top: -160px; left: -120px; } .cta-band::after { bottom: -200px; right: -140px; } .cta-band__inner { position: relative; max-width: 720px; margin-inline: auto; display: flex; flex-direction: column; align-items: center; gap: var(--space-6); } .cta-band__eyebrow { color: color-mix(in oklab, var(--color-text-inverse) 85%, transparent); font-family: var(--font-body); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; } .cta-band__title { color: var(--color-text-inverse); font-size: clamp(2rem, 1.2rem + 2.5vw, 3.25rem); line-height: 1.15; } .cta-band__lead { color: color-mix(in oklab, var(--color-text-inverse) 82%, transparent); font-size: var(--text-lg); max-width: 48ch; line-height: 1.5; } .cta-band__ctas { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; } .cta-band a.link-inverse { color: var(--color-text-inverse); text-decoration: underline; text-underline-offset: 4px; } /* ========================================================================== FAQ (block--faq) ========================================================================== */ .faq-list { display: flex; flex-direction: column; border-top: 1px solid var(--color-divider); } .faq-item { border-bottom: 1px solid var(--color-divider); } .faq-item__question { width: 100%; text-align: left; font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-text); display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); cursor: pointer; padding: var(--space-5) 0; transition: color var(--transition-interactive); } .faq-item__question:hover { color: var(--color-primary); } .faq-item__icon { transition: transform var(--transition-interactive); flex-shrink: 0; color: var(--color-primary); } .faq-item__answer { max-height: 0; overflow: hidden; color: var(--color-text-muted); line-height: 1.7; transition: max-height var(--transition-interactive), padding var(--transition-interactive); } .faq-item.is-open .faq-item__answer { max-height: 800px; padding-bottom: var(--space-5); } .faq-item.is-open .faq-item__icon { transform: rotate(45deg); } /* ========================================================================== CONTACT (block--contact) ========================================================================== */ .contact { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(var(--space-8), 6vw, var(--space-16)); align-items: start; } .contact__info { display: flex; flex-direction: column; gap: var(--space-6); } /* Contact-sectie heeft crème bg-base — transparant outline-knop verdwijnt visueel tot hover. Explicit witte surface + paarse border → altijd zichtbaar. */ .contact .btn-outline { background: var(--color-surface-2); border-color: var(--color-primary); color: var(--color-primary); } .contact .btn-outline:hover { background: var(--color-primary-highlight); border-color: var(--color-primary); color: var(--color-primary); } .contact__group { display: flex; flex-direction: column; gap: var(--space-2); } .contact__group h3 { font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-primary); letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; margin: 0; } .contact__group p, .contact__group a { font-size: var(--text-base); color: var(--color-text); line-height: 1.5; text-decoration: none; } .contact__group a:hover { color: var(--color-primary); text-decoration: underline; } .contact__hours { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-6); font-size: var(--text-base); } .contact__hours dt { color: var(--color-text-muted); font-weight: 500; } .contact__hours dd { color: var(--color-text); } .contact__hours dd.closed { color: var(--color-text-faint); font-style: italic; } .contact__map { aspect-ratio: 4 / 5; border-radius: var(--radius-2xl); overflow: hidden; border: 1px solid var(--color-divider); min-height: 380px; box-shadow: var(--shadow-md); } .contact__map iframe { width: 100%; height: 100%; border: 0; display: block; } @media (max-width: 900px) { .contact { grid-template-columns: 1fr; } .contact__map { aspect-ratio: 4 / 3; min-height: 320px; } } /* ========================================================================== FOOTER (block--footer) ========================================================================== */ .site-footer { background: var(--footer-bg); color: color-mix(in oklab, #FDF9F1 80%, transparent); padding-block: var(--space-16) var(--space-8); } .site-footer a { color: color-mix(in oklab, #FDF9F1 85%, transparent); text-decoration: none; } .site-footer a:hover { color: #FDF9F1; text-decoration: underline; } .site-footer h4 { font-family: var(--font-body); font-size: var(--text-xs); color: #FDF9F1; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; margin-bottom: var(--space-4); } .footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--space-10); padding-bottom: var(--space-12); border-bottom: 1px solid color-mix(in oklab, #FDF9F1 15%, transparent); } .footer-col { display: flex; flex-direction: column; gap: var(--space-3); } .footer-col p, .footer-col a { font-size: var(--text-sm); line-height: 1.6; } .footer-brand { font-family: var(--font-display); font-size: var(--text-xl); color: #FDF9F1; margin-bottom: var(--space-2); display: inline-flex; align-items: center; gap: var(--space-2); } .footer-badge { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: color-mix(in oklab, #FDF9F1 8%, transparent); border-radius: var(--radius-full); font-size: var(--text-xs); margin-top: var(--space-2); align-self: flex-start; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-6); font-size: var(--text-xs); color: color-mix(in oklab, #FDF9F1 60%, transparent); flex-wrap: wrap; gap: var(--space-3); } .footer-bottom__legal { display: flex; gap: var(--space-4); flex-wrap: wrap; } @media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-8); } } @media (max-width: 540px) { .footer-grid { grid-template-columns: 1fr; } } /* ========================================================================== FLOATING REVIEW CTA ========================================================================== */ .review-fab { position: fixed; right: clamp(var(--space-3), 3vw, var(--space-6)); bottom: clamp(var(--space-3), 3vw, var(--space-6)); z-index: 90; display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-text-inverse); font-size: var(--text-sm); font-weight: 600; text-decoration: none; box-shadow: var(--shadow-lg); min-height: 48px; transition: background var(--transition-interactive), transform var(--transition-interactive), box-shadow var(--transition-interactive); } .review-fab:hover { background: var(--color-primary-hover); transform: translateY(-2px); box-shadow: 0 20px 44px rgba(40, 33, 48, 0.22); color: var(--color-text-inverse); text-decoration: none; } .review-fab .stars { color: color-mix(in oklab, white 25%, transparent); font-size: var(--text-sm); letter-spacing: 1px; } .review-fab .stars::before { color: #FFD35A; } @media (max-width: 480px) { .review-fab__label { display: none; } .review-fab { padding: var(--space-3) var(--space-4); } } @media print { .review-fab { display: none; } }