/* ============================================================ HERZRAUM — Studio für Yoga & Kosmetik Shared design system ============================================================ */ /* ---- Palettes (switchable via [data-palette] on ) ---- */ :root, :root[data-palette="salbei"]{ --bg: #FAF6EF; /* warmes Naturweiß */ --bg-alt: #F5F1E9; /* sehr dezentes Beige */ --bg-deep: #F2EDE3; --surface: #FFFFFF; --sage: #7C8A6B; /* sanftes Grün */ --sage-deep: #5C6A4C; --rose: #C2998E; /* Kosmetik-Akzent */ --rose-deep: #A0746A; --ink: #383630; --ink-soft: #54514a; --muted: #847f73; --line: rgba(56,54,47,.13); --line-soft: rgba(56,54,47,.07); } :root[data-palette="rose"]{ --bg: #FBF4EF; --bg-alt: #F3E7DF; --bg-deep: #EFDCD2; --surface: #FFFFFF; --sage: #A98072; /* warmes Terracotta-Rosé führend */ --sage-deep: #8A6155; --rose: #B98477; --rose-deep: #97604F; --ink: #3B342F; --ink-soft: #5a4f48; --muted: #8b7d73; --line: rgba(59,52,47,.13); --line-soft: rgba(59,52,47,.07); } :root[data-palette="eukalyptus"]{ --bg: #F4F6F2; /* kühleres Off-White */ --bg-alt: #E6ECE3; --bg-deep: #DCE5D8; --surface: #FFFFFF; --sage: #6E8576; /* Eukalyptus-Grün */ --sage-deep: #4E6557; --rose: #B0938C; --rose-deep: #8E6E66; --ink: #2F3531; --ink-soft: #4a534d; --muted: #79827b; --line: rgba(47,53,49,.13); --line-soft: rgba(47,53,49,.07); } /* ---- Fonts (switchable via [data-font]) ---- */ :root{ --font-display: "Cormorant Garamond", Georgia, serif; --font-body: "Mulish", system-ui, sans-serif; --max: 1180px; --pad: clamp(20px, 5vw, 64px); } :root[data-font="schlicht"]{ --font-display: "Marcellus", Georgia, serif; } /* ============================================================ */ *{ box-sizing:border-box; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body{ margin:0; font-family:var(--font-body); font-weight:400; color:var(--ink); background:var(--bg); line-height:1.7; font-size:17px; letter-spacing:.005em; -webkit-font-smoothing:antialiased; } img{ display:block; max-width:100%; } a{ color:inherit; text-decoration:none; } h1,h2,h3,h4{ font-family:var(--font-display); font-weight:500; line-height:1.08; letter-spacing:.005em; margin:0; color:var(--ink); } h1{ font-size:clamp(2.6rem, 6vw, 4.6rem); font-weight:400; } h2{ font-size:clamp(2rem, 4vw, 3rem); font-weight:400; } h3{ font-size:clamp(1.35rem, 2.4vw, 1.85rem); } p{ margin:0 0 1em; color:var(--ink-soft); text-wrap:pretty; } .eyebrow{ font-family:var(--font-body); font-size:.72rem; font-weight:700; letter-spacing:.28em; text-transform:uppercase; color:var(--sage-deep); margin:0 0 1.1rem; } .eyebrow.rose{ color:var(--rose-deep); } .lead{ font-size:1.18rem; color:var(--ink-soft); line-height:1.65; } .section-sub{ max-width:46ch; color:var(--muted); } .wrap{ max-width:var(--max); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); } section{ padding:clamp(56px, 9vw, 120px) 0; } .tight{ padding-top:0; } /* ---- Buttons ---- */ .btn{ display:inline-flex; align-items:center; gap:.55em; font-family:var(--font-body); font-weight:700; font-size:.88rem; letter-spacing:.04em; padding:.9em 1.7em; border-radius:999px; border:1.5px solid var(--sage-deep); cursor:pointer; transition:all .22s ease; background:color-mix(in srgb, var(--sage) 14%, white); color:var(--ink); line-height:1; } .btn:hover{ background:var(--sage-deep); color:#fff; border-color:var(--sage-deep); transform:translateY(-2px); } .btn .arr{ transition:transform .22s ease; } .btn:hover .arr{ transform:translateX(4px); } /* Ghost: outlined, klar auf hellem Hintergrund */ .btn--ghost{ background:transparent; color:var(--ink); border-color:var(--ink-soft); } .btn--ghost:hover{ background:var(--ink); color:#fff; border-color:var(--ink); } /* Light: für dunkle Hintergründe (CTA-Band) — weiß mit dunklem Text */ .btn--light{ background:#fff; color:var(--ink); border-color:transparent; } .btn--light:hover{ background:rgba(255,255,255,.9); transform:translateY(-2px); } /* Rose: Kosmetik-Akzent — dunkelrose, weißer Text (Kontrast 5:1 ✓) */ .btn--rose{ background:var(--rose-deep); color:#fff; border-color:var(--rose-deep); } .btn--rose:hover{ background:#8A5E55; border-color:#8A5E55; } .link-arrow{ font-weight:600; font-size:.9rem; letter-spacing:.03em; color:var(--sage-deep); display:inline-flex; align-items:center; gap:.4em; transition:gap .2s ease; } .link-arrow:hover{ gap:.7em; } .link-arrow.rose{ color:var(--rose-deep); } /* ============================================================ HEADER ============================================================ */ .site-head{ position:sticky; top:0; z-index:60; background:color-mix(in srgb, var(--bg) 92%, transparent); -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px); border-bottom:1px solid transparent; transition:border-color .3s, box-shadow .3s; } .site-head.scrolled{ border-color:var(--line); box-shadow:0 4px 24px -10px rgba(56,54,47,.22); } .head-inner{ max-width:var(--max); margin:0 auto; padding:16px var(--pad); display:flex; align-items:center; justify-content:space-between; gap:24px; } /* Brand */ .brand{ display:flex; align-items:center; gap:13px; } .brand .mark{ width:38px; height:34px; color:var(--sage-deep); flex:none; } .brand .mark path{ fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; } .brand .wordmark{ line-height:1; } .brand .wordmark b{ font-family:var(--font-display); font-weight:500; font-size:1.45rem; letter-spacing:.04em; display:block; color:var(--ink); } .brand .wordmark span{ font-size:.58rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); } /* Desktop nav */ .nav{ display:flex; align-items:center; gap:2px; } .nav a{ font-family:var(--font-body); font-size:.75rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); position:relative; padding:6px 12px; border-radius:6px; transition:color .2s, background .2s; } .nav a:hover{ color:var(--ink); background:var(--bg-alt); } .nav a.active{ color:var(--ink); background:var(--bg-deep); } .nav a.active::after{ content:""; position:absolute; left:12px; right:12px; bottom:1px; height:2px; background:var(--sage-deep); border-radius:2px; } .head-cta{ display:flex; align-items:center; gap:12px; } /* Burger */ .burger{ display:none; width:44px; height:44px; border:1.5px solid var(--line); border-radius:10px; background:var(--surface); cursor:pointer; align-items:center; justify-content:center; flex-direction:column; gap:5px; transition:border-color .2s, box-shadow .2s; } .burger:hover{ border-color:var(--sage-deep); box-shadow:0 2px 8px -3px rgba(56,54,47,.18); } .burger span{ display:block; width:20px; height:2px; background:var(--ink); border-radius:2px; transition:.3s; } .burger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .burger.open span:nth-child(2){ opacity:0; transform:scaleX(0); } .burger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } /* Mobile nav drawer */ .mobile-nav{ display:none; } @media (max-width:900px){ .nav, .head-cta .btn{ display:none; } .burger{ display:flex; } .mobile-nav{ display:block; position:fixed; inset:0 0 0 auto; width:min(78vw, 320px); background:var(--bg); z-index:70; transform:translateX(100%); transition:transform .32s cubic-bezier(.4,0,.2,1); box-shadow:-24px 0 64px -24px rgba(40,38,32,.38); overflow-y:auto; padding:0; } .mobile-nav.open{ transform:translateX(0); } /* Nav links */ .mobile-nav a{ display:flex; align-items:center; font-family:var(--font-body); font-size:.82rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:16px 28px; color:var(--muted); border-bottom:1px solid var(--line-soft); transition:color .15s, background .15s; } .mobile-nav a:hover{ color:var(--ink); background:var(--bg-alt); } .mobile-nav a.active{ color:var(--ink); background:var(--bg-deep); border-left:3px solid var(--sage-deep); padding-left:25px; } .mobile-nav a:last-of-type{ border-bottom:0; } /* CTA button in mobile drawer — Farben explizit zurücksetzen */ .mobile-nav .btn{ display:flex; margin:20px 28px 28px; width:calc(100% - 56px); justify-content:center; background:color-mix(in srgb, var(--sage) 14%, white); color:var(--ink); border-color:var(--sage-deep); text-transform:none; letter-spacing:.04em; font-size:.88rem; padding:.9em 1.7em; border-bottom:1.5px solid var(--sage-deep); } .mobile-nav .btn:hover{ background:var(--sage-deep); color:#fff; } /* Top spacer (accounts for sticky header height) */ .mobile-nav::before{ content:""; display:block; height:72px; background:color-mix(in srgb, var(--bg) 96%, transparent); border-bottom:1px solid var(--line-soft); } .scrim{ position:fixed; inset:0; background:rgba(40,38,32,.38); z-index:69; opacity:0; pointer-events:none; transition:opacity .3s; } .scrim.open{ opacity:1; pointer-events:auto; } } /* ============================================================ HERO ============================================================ */ .hero{ position:relative; padding:0; } .hero h1 .accent{ font-style:italic; } .hero-lead{ font-size:clamp(1.05rem,1.6vw,1.3rem); max-width:54ch; margin:.4rem auto 0; } /* ---- Two large clickable panels ---- */ .hero-panels{ display:grid; grid-template-columns:1fr 1fr; } .hero-panel{ position:relative; overflow:hidden; isolation:isolate; color:#fff; display:flex; flex-direction:column; justify-content:flex-end; text-align:left; min-height:clamp(560px,90vh,880px); text-decoration:none; } .hero-panel img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .8s cubic-bezier(.2,.7,.2,1); } .hero-panel::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(34,33,28,.12) 0%, rgba(34,33,28,.30) 45%, rgba(34,33,28,.86) 100%); } .hero-panel:hover img{ transform:scale(1.06); } .hero-panel .hp-body{ padding:clamp(34px,4vw,72px); max-width:560px; } .hero-panel .hp-tag{ font-family:var(--font-body); font-size:.74rem; font-weight:700; letter-spacing:.28em; text-transform:uppercase; color:rgba(255,255,255,.92); display:inline-block; margin-bottom:1.1rem; padding-bottom:1.1rem; border-bottom:1px solid rgba(255,255,255,.32); } .hero-panel h2{ color:#fff; font-size:clamp(2.4rem,3.9vw,3.7rem); font-weight:400; line-height:1.03; margin-bottom:.65rem; } .hero-panel p{ color:rgba(255,255,255,.9); max-width:36ch; font-size:1.06rem; margin-bottom:1.7rem; } .hero-panel .hp-cta{ display:inline-flex; align-items:center; gap:.6em; font-family:var(--font-body); font-weight:600; font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; padding:.95em 1.8em; border-radius:999px; border:1.5px solid rgba(255,255,255,.7); color:#fff; transition:all .3s ease; } .hero-panel .hp-cta .arr{ transition:transform .25s ease; } .hero-panel:hover .hp-cta{ background:#fff; color:var(--ink); border-color:#fff; } .hero-panel:hover .hp-cta .arr{ transform:translateX(4px); } /* divider between panels */ .hero-panel + .hero-panel{ box-shadow:-1px 0 0 rgba(255,255,255,.4); } /* order follows tweak */ .hero-panel.kosmetik{ order:2; } .hero-panel.yoga{ order:1; } :root[data-order="kosmetik"] .hero-panel.kosmetik{ order:1; } :root[data-order="kosmetik"] .hero-panel.yoga{ order:2; } /* zweispaltig variant = gerahmte Panels mit Abstand */ :root[data-hero="zweispaltig"] .hero-panels{ gap:clamp(14px,1.6vw,22px); padding:clamp(14px,1.6vw,22px); background:var(--bg); } :root[data-hero="zweispaltig"] .hero-panel{ border-radius:12px; min-height:clamp(520px,82vh,820px); } :root[data-hero="zweispaltig"] .hero-panel + .hero-panel{ box-shadow:none; } @media (max-width:760px){ .hero-panels{ grid-template-columns:1fr; } .hero-panel{ min-height:clamp(440px,62vh,560px); } .hero-panel + .hero-panel{ box-shadow:0 -1px 0 rgba(255,255,255,.4); } :root[data-hero="zweispaltig"] .hero-panel + .hero-panel{ box-shadow:none; } } /* ============================================================ "Dein Raum zum Ankommen" — Werte ============================================================ */ .values{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-soft); border-block:1px solid var(--line-soft); margin-top:clamp(40px,6vw,70px); } .values .val{ background:var(--bg); padding:clamp(24px,3vw,38px) clamp(18px,2.2vw,30px); } .values .val .n{ font-family:var(--font-display); font-size:1.1rem; color:var(--sage-deep); display:block; margin-bottom:.5rem; } .values .val h4{ font-size:1.3rem; font-weight:500; margin-bottom:.3rem; } .values .val p{ font-size:.92rem; margin:0; color:var(--muted); } @media (max-width:760px){ .values{ grid-template-columns:1fr 1fr; } } /* ============================================================ TWO WORLDS — Yoga & Kosmetik (equal) ============================================================ */ .section-head{ max-width:640px; margin-bottom:clamp(34px,4vw,56px); } .section-head.center{ margin-inline:auto; text-align:center; } .worlds{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.4vw,30px); } .worlds .world.kosmetik{ order:2; } .worlds .world.yoga{ order:1; } :root[data-order="kosmetik"] .worlds .world.kosmetik{ order:1; } :root[data-order="kosmetik"] .worlds .world.yoga{ order:2; } .world{ position:relative; border-radius:10px; overflow:hidden; min-height:clamp(420px,46vw,560px); display:flex; align-items:flex-end; color:#fff; isolation:isolate; } .world img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform .8s cubic-bezier(.2,.7,.2,1); } .world::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(34,33,28,0) 30%, rgba(34,33,28,.82) 100%); } .world:hover img{ transform:scale(1.05); } .world .world-body{ padding:clamp(28px,3.4vw,46px); } .world .tag{ font-size:.72rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.85); display:block; margin-bottom:.7rem; } .world h3{ color:#fff; font-size:clamp(1.9rem,3vw,2.6rem); font-weight:400; margin-bottom:.5rem; } .world p{ color:rgba(255,255,255,.86); max-width:38ch; font-size:.98rem; } .world .link-arrow{ color:#fff; } @media (max-width:760px){ .worlds{ grid-template-columns:1fr; } } /* ============================================================ HIGHLIGHT BOX ============================================================ */ .highlight{ background:var(--bg-alt); } .highlight .hl-inner{ display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(28px,5vw,70px); align-items:center; } .highlight .hl-figure{ border-radius:8px; overflow:hidden; box-shadow:0 28px 56px -32px rgba(56,54,47,.55); } .highlight .hl-figure img{ width:100%; height:clamp(300px,38vw,440px); object-fit:cover; } .highlight .badge-num{ font-family:var(--font-display); font-size:clamp(3.4rem,7vw,5.5rem); color:var(--sage); line-height:.9; display:block; } .highlight ul{ list-style:none; padding:0; margin:1.4rem 0 0; display:flex; flex-direction:column; gap:.7rem; } .highlight li{ padding-left:1.7rem; position:relative; color:var(--ink-soft); } .highlight li::before{ content:""; position:absolute; left:0; top:.62em; width:9px; height:9px; border-radius:50%; border:1.5px solid var(--sage-deep); } @media (max-width:760px){ .highlight .hl-inner{ grid-template-columns:1fr; } .highlight .hl-figure{ order:-1; } } /* ============================================================ CARD GRIDS (Kurse / Kosmetik) ============================================================ */ .world-sections .ws-kosmetik{ order:2; } .world-sections .ws-yoga{ order:1; } :root[data-order="kosmetik"] .world-sections .ws-kosmetik{ order:1; } :root[data-order="kosmetik"] .world-sections .ws-yoga{ order:2; } .world-sections{ display:flex; flex-direction:column; } .card-grid{ display:grid; gap:clamp(16px,2vw,24px); } .card-grid.cols-4{ grid-template-columns:repeat(4,1fr); } .card-grid.cols-3{ grid-template-columns:repeat(3,1fr); } @media (max-width:980px){ .card-grid.cols-4{ grid-template-columns:1fr 1fr; } .card-grid.cols-3{ grid-template-columns:1fr 1fr; } } @media (max-width:600px){ .card-grid.cols-4, .card-grid.cols-3{ grid-template-columns:1fr; } } .card{ background:var(--surface); border-radius:9px; overflow:hidden; box-shadow:0 2px 14px -6px rgba(56,54,47,.18); transition:transform .3s ease, box-shadow .3s ease; display:flex; flex-direction:column; } .card:hover{ transform:translateY(-5px); box-shadow:0 24px 44px -22px rgba(56,54,47,.42); } .card .card-img{ aspect-ratio:4/3; overflow:hidden; } .card .card-img img{ width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.2,1); } .card:hover .card-img img{ transform:scale(1.06); } .card .card-body{ padding:clamp(18px,1.8vw,26px); display:flex; flex-direction:column; gap:.5rem; flex:1; } .card .when{ font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--sage-deep); } .card.rose .when{ color:var(--rose-deep); } .card h3{ font-size:1.4rem; font-weight:500; } .card p{ font-size:.92rem; color:var(--muted); margin:0; flex:1; } .card .card-foot{ margin-top:.6rem; } /* ============================================================ WOCHENPLAN ============================================================ */ .plan{ background:var(--sage-deep); color:#fff; } .plan .eyebrow{ color:#dfe6d3; } .plan h2{ color:#fff; } .plan p{ color:rgba(255,255,255,.78); } .plan-table{ margin-top:clamp(28px,4vw,44px); border-top:1px solid rgba(255,255,255,.18); } .plan-row{ display:grid; grid-template-columns:160px 1fr; gap:24px; padding:18px 0; border-bottom:1px solid rgba(255,255,255,.13); align-items:baseline; } .plan-row .day{ font-family:var(--font-display); font-size:1.5rem; font-weight:400; } .plan-row .courses{ display:flex; flex-wrap:wrap; gap:8px 10px; } .plan-row .chip{ font-size:.82rem; font-weight:600; letter-spacing:.02em; padding:.4em 1em; border:1px solid rgba(255,255,255,.32); border-radius:999px; color:#fff; } .plan-note{ margin-top:1.6rem; font-size:.86rem; color:rgba(255,255,255,.6); } @media (max-width:620px){ .plan-row{ grid-template-columns:1fr; gap:10px; } } /* ============================================================ PREIS-TEASER ============================================================ */ .price-teaser .pt-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,26px); margin-bottom:2.4rem; } .price-card{ border:1px solid var(--line); border-radius:9px; padding:clamp(24px,3vw,36px); background:var(--surface); } .price-card .pc-label{ font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); } .price-card .pc-amount{ font-family:var(--font-display); font-size:clamp(2.4rem,4vw,3.2rem); color:var(--ink); margin:.3rem 0; line-height:1; } .price-card .pc-amount small{ font-size:1.1rem; color:var(--muted); } .price-card .pc-note{ font-size:.88rem; color:var(--muted); margin:0; } @media (max-width:760px){ .price-teaser .pt-grid{ grid-template-columns:1fr; } } /* full price tables (preise.html) */ .price-block{ margin-bottom:clamp(36px,5vw,60px); } .price-list{ border-top:1px solid var(--line); } .price-line{ display:flex; justify-content:space-between; align-items:baseline; gap:20px; padding:15px 0; border-bottom:1px solid var(--line-soft); } .price-line .pl-name{ font-weight:600; } .price-line .pl-name span{ display:block; font-weight:400; font-size:.86rem; color:var(--muted); margin-top:2px; } .price-line .pl-price{ font-family:var(--font-display); font-size:1.4rem; white-space:nowrap; color:var(--ink); } /* ============================================================ ÜBER MICH ============================================================ */ .about{ background:var(--bg-alt); } .about .about-inner{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(30px,5vw,70px); align-items:center; } .about .about-figure{ border-radius:8px; overflow:hidden; box-shadow:0 30px 60px -34px rgba(56,54,47,.55); } .about .about-figure img{ width:100%; height:clamp(360px,44vw,520px); object-fit:cover; } .about .quote{ font-family:var(--font-display); font-size:clamp(1.5rem,2.6vw,2.1rem); font-weight:400; font-style:italic; line-height:1.3; color:var(--ink); margin:0 0 1.4rem; } .about .creds{ list-style:none; padding:0; margin:1.6rem 0 0; display:flex; flex-wrap:wrap; gap:8px; } .about .creds li{ font-size:.82rem; font-weight:600; letter-spacing:.02em; padding:.45em 1.05em; border:1px solid var(--line); border-radius:999px; color:var(--ink-soft); background:var(--surface); } @media (max-width:820px){ .about .about-inner{ grid-template-columns:1fr; } .about .about-figure{ order:-1; } } /* ============================================================ FEATURE / Shavasana & Sommer ============================================================ */ .feature{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(18px,2.4vw,30px); } .feature-box{ border-radius:10px; padding:clamp(30px,4vw,52px); color:#fff; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; min-height:clamp(320px,38vw,440px); } .feature-box img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; } .feature-box::after{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(34,33,28,.25), rgba(34,33,28,.82)); } .feature-box .eyebrow{ color:#e9e1cf; } .feature-box h3{ color:#fff; font-size:clamp(1.8rem,2.8vw,2.4rem); font-weight:400; margin-bottom:.5rem; } .feature-box p{ color:rgba(255,255,255,.88); margin:0; } @media (max-width:760px){ .feature{ grid-template-columns:1fr; } } /* ============================================================ CTA BAND ============================================================ */ .cta-band{ background:var(--ink); color:#fff; text-align:center; } .cta-band h2{ color:#fff; max-width:18ch; margin:0 auto .5rem; } .cta-band p{ color:rgba(255,255,255,.72); max-width:42ch; margin:0 auto 2rem; } .cta-band .ank{ font-family:var(--font-display); font-style:italic; } .cta-band .btn--light{ } /* ============================================================ FOOTER ============================================================ */ .site-foot{ background:var(--bg-deep); padding:clamp(56px,7vw,88px) 0 36px; } .foot-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:clamp(28px,4vw,56px); padding-bottom:48px; border-bottom:1px solid var(--line); } .foot-brand .mark{ width:48px; height:42px; color:var(--sage-deep); margin-bottom:14px; } .foot-brand .mark path{ fill:none; stroke:currentColor; stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; } .foot-brand b{ font-family:var(--font-display); font-size:1.7rem; font-weight:500; letter-spacing:.04em; display:block; } .foot-brand p{ max-width:34ch; color:var(--muted); font-size:.94rem; margin-top:.6rem; } .foot-col h5{ font-size:.74rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin:0 0 1.1rem; font-family:var(--font-body); } .foot-col ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:.6rem; } .foot-col a, .foot-col li{ color:var(--ink-soft); font-size:.94rem; } .foot-col a:hover{ color:var(--sage-deep); } .foot-note{ font-size:.8rem; color:var(--muted); } .foot-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:14px; padding-top:28px; font-size:.82rem; color:var(--muted); } .foot-bottom .legal{ display:flex; gap:20px; flex-wrap:wrap; } .placeholder-pill{ display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--rose-deep); background:color-mix(in srgb, var(--rose) 22%, transparent); padding:.2em .7em; border-radius:999px; margin-left:.5em; vertical-align:middle; } @media (max-width:760px){ .foot-top{ grid-template-columns:1fr 1fr; } .foot-brand{ grid-column:1/-1; } } /* ============================================================ PAGE HEADER (subpages) ============================================================ */ .page-hero{ padding:clamp(120px,16vw,180px) 0 clamp(40px,6vw,72px); background:var(--bg-alt); border-bottom:1px solid var(--line-soft); } .page-hero .eyebrow{ margin-bottom:.8rem; } .page-hero h1{ font-size:clamp(2.6rem,5.5vw,4rem); } .page-hero p{ max-width:52ch; margin-top:1rem; font-size:1.12rem; } /* contact */ .contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,64px); } @media (max-width:820px){ .contact-grid{ grid-template-columns:1fr; } } .contact-info{ display:flex; flex-direction:column; gap:1.6rem; } .contact-info .ci{ display:flex; flex-direction:column; gap:.2rem; } .contact-info .ci .lbl{ font-size:.74rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); } .contact-info .ci .val{ font-family:var(--font-display); font-size:1.5rem; color:var(--ink); } .form{ display:flex; flex-direction:column; gap:1rem; background:var(--surface); padding:clamp(26px,3vw,40px); border-radius:10px; border:1px solid var(--line); } .form label{ font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin-bottom:.35rem; display:block; } .form input, .form textarea, .form select{ width:100%; font-family:var(--font-body); font-size:1rem; padding:.8em 1em; border:1px solid var(--line); border-radius:7px; background:var(--bg); color:var(--ink); } .form input:focus, .form textarea:focus, .form select:focus{ outline:none; border-color:var(--sage-deep); } .form .btn{ align-self:flex-start; margin-top:.4rem; } .hours{ list-style:none; padding:0; margin:0; border-top:1px solid var(--line); } .hours li{ display:flex; justify-content:space-between; padding:11px 0; border-bottom:1px solid var(--line-soft); font-size:.96rem; } .hours li span:first-child{ color:var(--ink-soft); font-weight:600; } .hours li span:last-child{ color:var(--muted); } /* prose */ .prose{ max-width:62ch; } .prose p{ font-size:1.08rem; } .prose h3{ margin:2rem 0 .6rem; } /* ============================================================ TWEAKS PANEL (vanilla) ============================================================ */ #twk{ position:fixed; right:16px; bottom:16px; z-index:2147483646; width:264px; background:rgba(250,247,239,.82); -webkit-backdrop-filter:blur(22px) saturate(150%); backdrop-filter:blur(22px) saturate(150%); border:.5px solid rgba(255,255,255,.7); border-radius:14px; box-shadow:0 12px 40px rgba(56,54,47,.22); color:var(--ink); font-family:var(--font-body); font-size:12px; display:none; flex-direction:column; overflow:hidden; } #twk.show{ display:flex; } #twk .twk-hd{ display:flex; align-items:center; justify-content:space-between; padding:11px 10px 11px 15px; cursor:move; } #twk .twk-hd b{ font-size:12.5px; font-weight:700; letter-spacing:.02em; } #twk .twk-x{ border:0; background:transparent; color:rgba(56,54,47,.5); width:24px; height:24px; border-radius:7px; cursor:pointer; font-size:15px; line-height:1; } #twk .twk-x:hover{ background:rgba(0,0,0,.06); color:var(--ink); } #twk .twk-body{ padding:4px 15px 16px; display:flex; flex-direction:column; gap:13px; } #twk .sect{ font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(56,54,47,.42); margin-top:6px; } #twk .sect:first-child{ margin-top:0; } #twk .seg{ display:flex; padding:2px; border-radius:9px; background:rgba(56,54,47,.08); gap:2px; } #twk .seg button{ flex:1; border:0; background:transparent; color:var(--ink-soft); font:inherit; font-weight:600; padding:6px 4px; border-radius:7px; cursor:pointer; line-height:1.15; transition:.15s; } #twk .seg button.on{ background:#fff; color:var(--ink); box-shadow:0 1px 3px rgba(0,0,0,.12); } #twk .swatches{ display:flex; gap:8px; } #twk .sw{ flex:1; height:34px; border-radius:8px; cursor:pointer; border:2px solid transparent; position:relative; display:flex; overflow:hidden; } #twk .sw.on{ border-color:var(--ink); } #twk .sw i{ flex:1; } #twk .lbl-row{ display:flex; flex-direction:column; gap:6px; }