/* ============================================================ Harmónia és Vitalitás — massage & movement rehab Calm, spa-like. Palette + type driven by CSS variables so the Tweaks panel can switch whole aesthetic directions. ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* default = Sage direction */ --bg: #f4f1ea; --bg-2: #ece7db; --surface: #fbf9f4; --ink: #23271f; --ink-soft: #6c6f62; --ink-faint: #9a9c8f; --forest: #3a473a; --forest-d: #2c372c; --accent: #8a9a7b; --accent-d: #6f8062; --sand: #c8b894; --leaf: #7f8c54; --line: #ddd7c8; --line-soft: #e7e2d5; --on-dark: #f4f1ea; --font-display: "Hanken Grotesk", system-ui, sans-serif; --font-body: "Hanken Grotesk", system-ui, sans-serif; --display-weight: 600; --display-tracking: -0.02em; --display-style: normal; --maxw: 1180px; --radius: 4px; --radius-lg: 8px; } /* ---------- Palette: Clay (warm) ---------- */ html[data-palette="clay"] { --bg: #f3eee6; --bg-2: #e9e0d2; --surface: #fbf7f0; --ink: #2b231c; --ink-soft: #756656; --ink-faint: #a3927f; --forest: #6b4f3a; --forest-d: #543c2b; --accent: #c08f5e; --accent-d: #a5774a; --sand: #ddc7a6; --leaf: #8a9a5e; --line: #e2d6c4; --line-soft: #ece3d6; --on-dark: #f6f0e6; } /* ---------- Palette: Mist (cool blue-green) ---------- */ html[data-palette="mist"] { --bg: #edf0f0; --bg-2: #dfe6e6; --surface: #f7faf9; --ink: #1f2a2c; --ink-soft: #5d6c6d; --ink-faint: #8ea0a0; --forest: #2f4858; --forest-d: #243845; --accent: #5b8a8c; --accent-d: #477173; --sand: #b6c9c5; --leaf: #5b8a8c; --line: #d3dcdb; --line-soft: #e0e7e6; --on-dark: #eef3f2; } /* ---------- Type variants ---------- */ html[data-type="schibsted"] { --font-display: "Schibsted Grotesk", system-ui, sans-serif; --font-body: "Schibsted Grotesk", system-ui, sans-serif; --display-weight: 600; --display-tracking: -0.025em; --display-style: normal; } html[data-type="serif"] { --font-display: "Newsreader", Georgia, serif; --font-body: "Hanken Grotesk", system-ui, sans-serif; --display-weight: 400; --display-tracking: -0.005em; --display-style: italic; } /* ============================================================ */ html { scroll-behavior: smooth; /* iOS Safari only propagates horizontal-overflow clipping from the ROOT element to the viewport (not from ), so the clip must live here. `clip` (not `hidden`) avoids creating a scroll container, so the sticky nav keeps working. */ overflow-x: clip; } body { font-family: var(--font-body); background: var(--bg); color: var(--ink); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* guard: decorative sprigs bleed past section edges; never let them create a horizontal scrollbar. `clip` doesn't create a scroll container, so the sticky nav keeps working. */ overflow-x: clip; } h1, h2, h3, .display { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: var(--display-tracking); font-style: var(--display-style); line-height: 1.08; color: var(--ink); text-wrap: balance; } a { color: inherit; text-decoration: none; } img { display: block; max-width: 100%; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; } .kicker { font-family: var(--font-body); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.22em; color: var(--accent-d); } .section { padding: 120px 0; } .section-head { max-width: 60ch; } .eyebrow-row { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; } .eyebrow-row .rule { height: 1px; width: 48px; background: var(--accent); opacity: 0.6; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-body); font-size: 15px; font-weight: 600; padding: 14px 26px; border-radius: 100px; border: 1px solid transparent; cursor: pointer; transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease; letter-spacing: 0.01em; } .btn-primary { background: var(--forest); color: var(--on-dark); } .btn-primary:hover { background: var(--forest-d); transform: translateY(-2px); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn-ghost:hover { border-color: var(--forest); transform: translateY(-2px); } .btn-block { width: 100%; justify-content: center; } .btn .arrow { transition: transform .18s ease; } .btn:hover .arrow { transform: translateX(3px); } /* ---------- placeholder imagery ---------- */ .ph { position: relative; background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--accent) 16%, var(--surface)) 0 14px, color-mix(in oklab, var(--accent) 7%, var(--surface)) 14px 28px); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; display: flex; align-items: flex-end; } .ph::after { content: attr(data-label); font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; letter-spacing: 0.06em; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line); border-radius: 100px; padding: 5px 11px; margin: 16px; } /* ============================================================ NAV ============================================================ */ .nav { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--bg) 82%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color .3s, background .3s; } .nav.scrolled { border-bottom-color: var(--line); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 76px; } .brand { display: flex; align-items: center; gap: 12px; } .brand-mark { width: 36px; height: 36px; border-radius: 50%; background: radial-gradient(circle at 32% 30%, var(--accent), var(--forest)); flex: none; } .brand-text { display: flex; flex-direction: column; line-height: 1.1; } .brand-name { font-family: var(--font-display); font-weight: 600; font-size: 15px; letter-spacing: -0.01em; font-style: normal; white-space: nowrap; } .brand-sub { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; } .nav-links { display: flex; align-items: center; gap: 28px; } .nav-links a { font-size: 14.5px; color: var(--ink-soft); transition: color .18s; } .nav-links a:hover { color: var(--ink); } .nav-cta { display: flex; align-items: center; gap: 18px; } .nav-phone { font-size: 14.5px; font-weight: 600; color: var(--ink); white-space: nowrap; } @media (max-width: 1040px) { .nav-links { display: none; } .nav-phone { display: none; } } /* let the brand shrink so the CTA never gets pushed off-screen */ .brand { min-width: 0; } .brand-text { min-width: 0; } .nav-cta { flex: none; } @media (max-width: 560px) { .wrap { padding: 0 18px; } .nav-inner { height: 64px; gap: 12px; } .brand { gap: 9px; } .brand-logo-box { width: 38px; height: 38px; } .brand-logo { height: 40px; } .brand-name { font-size: 13.5px; white-space: normal; line-height: 1.15; } .brand-sub { display: none; } .nav-cta { gap: 10px; } .nav-cta .btn-primary { padding: 10px 16px; font-size: 13.5px; } } /* ============================================================ HERO ============================================================ */ .hero { padding: 70px 0 90px; overflow: hidden; } .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center; } .hero h1 { font-size: clamp(40px, 5.4vw, 70px); margin: 20px 0 24px; } .hero .lede { font-size: 19px; color: var(--ink-soft); max-width: 46ch; } .hero-actions { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; } .hero-trust { display: flex; align-items: center; gap: 18px; margin-top: 40px; } .stars { color: var(--sand); letter-spacing: 2px; font-size: 16px; } .trust-text { font-size: 14px; color: var(--ink-soft); } .trust-text b { color: var(--ink); font-weight: 600; } .hero-divider { width: 1px; height: 34px; background: var(--line); } .hero-media { position: relative; } .hero-media .ph { aspect-ratio: 4/5; } .hero-badge { position: absolute; left: -28px; bottom: 40px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px 22px; box-shadow: 0 30px 60px -40px rgba(30,30,20,0.5); max-width: 230px; } .hero-badge .num { font-family: var(--font-display); font-size: 30px; font-weight: 600; font-style: normal; } .hero-badge .lbl { font-size: 13px; color: var(--ink-soft); margin-top: 2px; } @media (max-width: 860px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } .hero-media { order: -1; } .hero-media .ph { aspect-ratio: 16/11; } .hero-badge { display: none; } } /* ============================================================ ABOUT ============================================================ */ .about { background: var(--bg-2); } .about-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 64px; align-items: center; } .about h2 { font-size: clamp(30px, 3.6vw, 44px); margin: 20px 0 22px; } .about p { color: var(--ink-soft); font-size: 17px; margin-bottom: 18px; max-width: 56ch; } .about-media .ph { aspect-ratio: 5/6; } .about-stats { display: flex; gap: 40px; margin-top: 30px; } .about-stat .num { font-family: var(--font-display); font-size: 36px; font-weight: 600; font-style: normal; color: var(--forest); } .about-stat .lbl { font-size: 13.5px; color: var(--ink-soft); margin-top: 2px; } .about-quote { border-left: 2px solid var(--accent); padding-left: 20px; margin-top: 30px; font-style: italic; color: var(--ink); font-size: 17px; max-width: 50ch; } @media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; gap: 40px; } .about-media { order: -1; } .about-media .ph { aspect-ratio: 16/11; } } /* ============================================================ SERVICES ============================================================ */ .svc-group-title { display: flex; align-items: baseline; gap: 16px; margin: 64px 0 28px; } .svc-group-title:first-of-type { margin-top: 48px; } .svc-group-title h3 { font-size: 22px; font-weight: 600; } .svc-group-title .count { font-size: 13px; color: var(--ink-faint); letter-spacing: 0.04em; } .svc-group-title .line { flex: 1; height: 1px; background: var(--line); } .svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .svc-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 32px; display: flex; flex-direction: column; gap: 14px; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .svc-card:hover { transform: translateY(-3px); box-shadow: 0 30px 60px -48px rgba(30,30,20,0.5); border-color: var(--accent); } .svc-num { font-family: ui-monospace, monospace; font-size: 12px; color: var(--accent-d); letter-spacing: 0.1em; } .svc-card h4 { font-family: var(--font-display); font-size: 23px; font-weight: 600; font-style: normal; letter-spacing: -0.01em; } .svc-card p { font-size: 15px; color: var(--ink-soft); line-height: 1.65; } @media (max-width: 760px) { .svc-grid { grid-template-columns: 1fr; } } /* ============================================================ PRICING ============================================================ */ .pricing { background: var(--forest); color: var(--on-dark); } .pricing .kicker { color: color-mix(in oklab, var(--sand) 90%, white); } .pricing h2 { color: var(--on-dark); font-size: clamp(30px, 3.6vw, 44px); margin: 20px 0; } .pricing .section-head p { color: color-mix(in oklab, var(--on-dark) 75%, transparent); font-size: 17px; } .price-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 56px; } .price-col-head { display: flex; align-items: baseline; gap: 14px; margin-bottom: 22px; } .price-col-head h3 { color: var(--on-dark); font-size: 15px; text-transform: uppercase; letter-spacing: 0.2em; font-weight: 600; } .price-col-head .line { flex: 1; height: 1px; background: color-mix(in oklab, var(--on-dark) 25%, transparent); } .price-card { background: color-mix(in oklab, var(--on-dark) 7%, transparent); border: 1px solid color-mix(in oklab, var(--on-dark) 16%, transparent); border-radius: var(--radius-lg); padding: 26px 28px; margin-bottom: 18px; } .price-card .pc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 6px; } .price-card h4 { font-family: var(--font-display); color: var(--on-dark); font-size: 20px; font-weight: 600; font-style: normal; } .price-card .pc-tag { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sand); white-space: nowrap; } .price-rows { margin-top: 14px; } .price-row { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-top: 1px solid color-mix(in oklab, var(--on-dark) 14%, transparent); } .price-row .dur { font-size: 15px; color: color-mix(in oklab, var(--on-dark) 82%, transparent); } .price-row .amt { font-family: var(--font-display); font-size: 17px; font-weight: 600; font-style: normal; color: var(--on-dark); } .price-note { font-size: 13px; color: color-mix(in oklab, var(--on-dark) 60%, transparent); margin-top: 8px; } .price-foot { margin-top: 14px; } .price-cta { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--sand); } .price-cta:hover { color: var(--on-dark); } @media (max-width: 760px) { .price-cols { grid-template-columns: 1fr; gap: 8px; } } /* ============================================================ REVIEWS ============================================================ */ .reviews-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; } .google-badge { display: flex; align-items: center; gap: 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px 24px; } .google-badge .g-score { font-family: var(--font-display); font-size: 40px; font-weight: 600; font-style: normal; line-height: 1; } .google-badge .g-meta { font-size: 13px; color: var(--ink-soft); } .google-badge .g-meta .stars { font-size: 14px; display: block; margin-bottom: 3px; } .review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 52px; } .review-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px; display: flex; flex-direction: column; gap: 16px; } .review-card .stars { font-size: 15px; } .review-card .quote { font-size: 16px; line-height: 1.65; color: var(--ink); flex: 1; } .review-author { display: flex; align-items: center; gap: 12px; } .review-avatar { width: 40px; height: 40px; border-radius: 50%; background: color-mix(in oklab, var(--accent) 40%, var(--surface)); display: flex; align-items: center; justify-content: center; font-weight: 600; color: var(--forest-d); font-size: 15px; } .review-author .ra-name { font-size: 14.5px; font-weight: 600; } .review-author .ra-meta { font-size: 12.5px; color: var(--ink-faint); } @media (max-width: 860px) { .review-grid { grid-template-columns: 1fr; } } /* ============================================================ BOOKING / CONTACT ============================================================ */ .booking { background: var(--bg-2); } .booking-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; } .booking h2 { font-size: clamp(30px, 3.6vw, 44px); margin: 20px 0 18px; } .booking .intro { color: var(--ink-soft); font-size: 17px; max-width: 46ch; margin-bottom: 36px; } .form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 36px; } .field { margin-bottom: 20px; } .field label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; color: var(--ink); letter-spacing: 0.01em; } .field input, .field select, .field textarea { width: 100%; font-family: var(--font-body); font-size: 15px; padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); color: var(--ink); transition: border-color .18s, box-shadow .18s; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent); } .field textarea { resize: vertical; min-height: 92px; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-success { display: none; text-align: center; padding: 40px 20px; } .form-success.show { display: block; } .form-success .check { width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: var(--surface); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; font-size: 26px; } .form-success h3 { font-size: 24px; margin-bottom: 8px; font-style: normal; } .form-success p { color: var(--ink-soft); } .contact-list { display: flex; flex-direction: column; gap: 4px; } .contact-item { display: flex; gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--line); } .contact-item:last-child { border-bottom: none; } .contact-item .ci-icon { width: 38px; height: 38px; flex: none; border-radius: 50%; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--accent-d); } .contact-item .ci-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-faint); margin-bottom: 4px; } .contact-item .ci-value { font-size: 15.5px; color: var(--ink); line-height: 1.5; } .contact-item .ci-value a:hover { color: var(--accent-d); } .map-ph { margin-top: 24px; height: 180px; border-radius: var(--radius-lg); } @media (max-width: 860px) { .booking-grid { grid-template-columns: 1fr; gap: 40px; } .field-row { grid-template-columns: 1fr; } } /* ============================================================ FOOTER ============================================================ */ .footer { background: var(--forest-d); color: color-mix(in oklab, var(--on-dark) 80%, transparent); padding: 64px 0 40px; } .footer-top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding-bottom: 40px; border-bottom: 1px solid color-mix(in oklab, var(--on-dark) 16%, transparent); } .footer .brand-name, .footer .brand-sub { color: var(--on-dark); } .footer .brand-sub { color: color-mix(in oklab, var(--on-dark) 60%, transparent); } .footer-col h5 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em; color: color-mix(in oklab, var(--on-dark) 55%, transparent); margin-bottom: 14px; } .footer-col p, .footer-col a { font-size: 14.5px; line-height: 1.8; color: color-mix(in oklab, var(--on-dark) 82%, transparent); display: block; } .footer-col a:hover { color: var(--on-dark); } .footer-cols { display: flex; gap: 64px; flex-wrap: wrap; } .footer-bottom { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-top: 28px; font-size: 13px; color: color-mix(in oklab, var(--on-dark) 55%, transparent); } /* ============================================================ BOTANICAL MOTIFS — eucalyptus sprigs + photo frames ============================================================ */ .bot-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; } .sprig { color: var(--leaf); pointer-events: none; display: block; } .brand-logo-box { width: 44px; height: 44px; overflow: hidden; display: flex; align-items: center; justify-content: center; flex: none; } .brand-logo { height: 46px; width: auto; max-width: none; } /* hero */ .hero-copy, .hero-media { position: relative; z-index: 1; } .hero-sprig { position: absolute; top: -38px; right: -46px; width: 230px; opacity: 0.16; transform: rotate(14deg); z-index: 0; } /* eyebrow leaf accent */ .eyebrow-row .leaf-mark { width: 15px; height: 32px; flex: none; opacity: 0.85; } /* photo frames */ .img-frame { position: relative; border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(160deg, color-mix(in oklab, var(--accent) 16%, var(--surface)), var(--surface)); } .img-frame img { width: 100%; height: 100%; object-fit: cover; display: block; } .hero-media .img-frame { aspect-ratio: 4/5; } .about-media .img-frame { aspect-ratio: 5/6; } .about-media .img-frame img { object-position: center 18%; } @media (max-width: 860px) { .hero-media .img-frame { aspect-ratio: 16/11; } /* Titanilla's portrait: keep a tall frame and anchor to the top so her head is never cropped (a short landscape crop sliced through it). */ .about-media .img-frame { aspect-ratio: 4/5; max-width: 360px; margin: 0 auto; } .about-media .img-frame img { object-position: center top; } } /* about portrait sprig accent */ .about-media { position: relative; } .about-sprig { position: absolute; bottom: -22px; left: -28px; width: 124px; opacity: 0.92; z-index: 2; transform: rotate(-6deg); } /* service card corner sprig */ .svc-card { position: relative; overflow: hidden; } .svc-card .card-sprig { position: absolute; top: -22px; right: -26px; width: 92px; opacity: 0.10; transform: rotate(6deg); transition: opacity .3s ease, transform .3s ease; } .svc-card:hover .card-sprig { opacity: 0.28; transform: rotate(-6deg); } /* pricing corner sprigs (on dark) */ .pricing { position: relative; overflow: hidden; } .price-sprig { position: absolute; width: 230px; opacity: 0.13; color: var(--on-dark); z-index: 0; } .price-sprig.tl { top: -48px; left: -56px; transform: rotate(-158deg); } .price-sprig.br { bottom: -56px; right: -48px; transform: rotate(22deg); } .pricing .wrap { position: relative; z-index: 1; } /* booking heading sprig */ .booking { position: relative; overflow: hidden; } .booking-sprig { position: absolute; top: -30px; right: -30px; width: 150px; opacity: 0.14; transform: rotate(150deg); z-index: 0; } .booking .wrap { position: relative; z-index: 1; } /* ============================================================ */ /* entrance — content is ALWAYS visible; only a gentle transform animates, no fill-mode, so a throttled/frozen preview can never leave anything hidden */ /* The hidden state IS the base state, so adding `.in` transitions FROM here — no snap-to-start jump. (The old version animated from an opacity:1 base, which made elements pop down then crawl back up.) */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); } .reveal.in { opacity: 1; transform: none; } /* Safety nets so content is never stuck hidden: when JS is unavailable, or the user prefers reduced motion, show everything immediately. */ @media (scripting: none) { .reveal { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .reveal, .reveal.in { opacity: 1; transform: none; transition: none; } } /* Touch devices: drop the sticky-nav backdrop blur, which repaints every scroll frame and stutters on phones. (The reveal now transitions from a hidden base state, so it no longer snaps/jumps and is fine to keep.) */ @media (hover: none) { .nav { -webkit-backdrop-filter: none; backdrop-filter: none; background: color-mix(in oklab, var(--bg) 93%, transparent); } } /* ============================================================ GDPR — consent checkbox, privacy banner & legal pages ============================================================ */ /* --- booking-form consent --- */ .consent { display: flex; align-items: flex-start; gap: 11px; margin: 4px 0 22px; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); } .consent input[type="checkbox"] { width: 18px; height: 18px; flex: none; margin-top: 1px; accent-color: var(--forest); cursor: pointer; } .consent label { cursor: pointer; } .consent a { color: var(--accent-d); text-decoration: underline; text-underline-offset: 2px; } .consent a:hover { color: var(--forest); } .field-note { font-size: 12.5px; color: var(--ink-faint); margin-top: -10px; margin-bottom: 20px; } /* --- privacy / cookie banner --- */ .privacy-banner { position: fixed; left: 16px; right: 16px; z-index: 200; /* keep clear of the iPhone home indicator / safe area */ bottom: max(16px, env(safe-area-inset-bottom)); max-width: 720px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 30px 70px -34px rgba(30,30,20,0.55); padding: 22px 24px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; transform: translateY(140%); transition: transform .4s cubic-bezier(.22,.61,.36,1); } .privacy-banner.show { transform: translateY(0); } .privacy-banner p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; flex: 1 1 320px; margin: 0; } .privacy-banner p b { color: var(--ink); font-weight: 600; } .privacy-banner a { color: var(--accent-d); text-decoration: underline; text-underline-offset: 2px; } .privacy-banner .pb-actions { display: flex; gap: 10px; flex: none; } .privacy-banner .btn { padding: 11px 22px; font-size: 14px; } @media (max-width: 560px) { .privacy-banner { padding: 18px; } .privacy-banner .pb-actions { width: 100%; } .privacy-banner .pb-actions .btn { flex: 1; justify-content: center; } } /* --- legal / policy pages (adatvedelem.html, impresszum.html) --- */ .legal { padding: 64px 0 96px; } .legal .wrap { max-width: 820px; } .legal .back-link { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--accent-d); margin-bottom: 28px; } .legal .back-link:hover { color: var(--forest); } .legal h1 { font-size: clamp(30px, 4vw, 44px); margin-bottom: 10px; } .legal .updated { font-size: 13.5px; color: var(--ink-faint); margin-bottom: 8px; } .legal h2 { font-size: 21px; margin: 40px 0 14px; padding-top: 28px; border-top: 1px solid var(--line); } .legal h2:first-of-type { border-top: none; padding-top: 0; } .legal h3 { font-size: 16px; margin: 22px 0 8px; } .legal p, .legal li { font-size: 15.5px; color: var(--ink-soft); line-height: 1.7; margin-bottom: 12px; } .legal ul { padding-left: 22px; margin-bottom: 12px; } .legal li { margin-bottom: 7px; } .legal a { color: var(--accent-d); text-decoration: underline; text-underline-offset: 2px; } .legal a:hover { color: var(--forest); } .legal strong { color: var(--ink); font-weight: 600; } /* table can be wider than a phone; give it its own swipeable scroll area (an independent scroll container still works under the root's overflow clip) */ .legal .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 14px 0 20px; border-radius: var(--radius); } .legal .data-table { width: 100%; border-collapse: collapse; font-size: 14.5px; } .legal .table-scroll .data-table { margin: 0; min-width: 580px; } .legal .data-table th, .legal .data-table td { text-align: left; padding: 12px 14px; border: 1px solid var(--line); vertical-align: top; color: var(--ink-soft); } .legal .data-table th { background: var(--bg-2); color: var(--ink); font-weight: 600; } .legal .callout { background: var(--bg-2); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: var(--radius); padding: 16px 18px; margin: 18px 0; font-size: 14.5px; color: var(--ink-soft); }