/* ========================================================================== SHAPE NAILS — Stuttgart-Mitte · Vorschau / Design-Entwurf (Gmax Media) ========================================================================== Reference bar : townhouse.co.uk (spaced-caps editorial, mono + ONE blush, square buttons, asymmetric destination geometry) with the warm-cream mood of the studio's real interior. Type : Italiana (elegant high-contrast titling serif) + Jost (spaced-caps labels + body) — exactly TWO families, both self-hosted (no CDN, strict-CSP safe). Italiana has no italic cut, so display accent words are set UPRIGHT in blush (not faux-italic). Palette : warm cream ground + charcoal ink + exactly ONE blush accent (#F2AB9B, matches the studio's pink neon). Mono elsewhere. Scroll moments: (1) sticky-crossfade price-menu · (2) reveal masonry · (3) reveal-on-scroll across every section — proven mechanics. Paths : all relative (./), self-hosted assets, strict-CSP safe. ========================================================================== */ /* ===== Self-hosted fonts (woff2 in ./fonts, no CDN) ===== */ @font-face{ font-family:'Italiana'; font-style:normal; font-weight:400; font-display:swap; src:url('./fonts/italiana-v21-latin-regular.woff2') format('woff2'); } @font-face{ font-family:'Jost'; font-style:normal; font-weight:400; font-display:swap; src:url('./fonts/jost-v20-latin_latin-ext-regular.woff2') format('woff2'); } @font-face{ font-family:'Jost'; font-style:normal; font-weight:500; font-display:swap; src:url('./fonts/jost-v20-latin_latin-ext-500.woff2') format('woff2'); } @font-face{ font-family:'Jost'; font-style:normal; font-weight:600; font-display:swap; src:url('./fonts/jost-v20-latin_latin-ext-600.woff2') format('woff2'); } @font-face{ font-family:'Jost'; font-style:normal; font-weight:700; font-display:swap; src:url('./fonts/jost-v20-latin_latin-ext-700.woff2') format('woff2'); } /* ===== Tokens ===== */ :root{ --ink:#211F1B; /* charcoal ink */ --ink-2:#3A362F; --body:#55514A; /* body copy */ --muted:#8B857A; /* meta / captions */ --cream:#FBF8F2; /* warm cream ground (authentic to the real studio) */ --cream-2:#F4EEE3; /* elevated surface */ --cream-3:#EBE3D4; /* image placeholder */ --white:#FFFFFF; --line:#E6DFD1; /* hairline */ --line-2:#D8CFBC; --blush:#F2AB9B; /* THE single accent — matches the studio pink neon */ --blush-deep:#D98873; /* accent text on cream (contrast) */ --blush-soft:rgba(242,171,155,0.16); --font-display:'Italiana', Georgia, 'Times New Roman', serif; --font-sans:'Jost', system-ui, -apple-system, 'Segoe UI', sans-serif; /* loader tokens (mirrored inline in for first paint) */ --display:'Italiana', Georgia, serif; --accent:#F2AB9B; --ld-bg:#FBF8F2; --ld-fg:#211F1B; --container:1240px; --gutter:clamp(20px,5vw,64px); --section-y:clamp(54px,7vw,104px); --gutter-pin:clamp(12px,1.6vw,20px); --radius-img:12px; --header-h:74px; --ease:cubic-bezier(.22,.7,.24,1); --shadow:0 24px 60px -30px rgba(33,31,27,0.30); } /* ===== Reset / base ===== */ *,*::before,*::after{ box-sizing:border-box; } [hidden]{ display:none !important; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 12px); } body{ margin:0; font-family:var(--font-sans); font-size:16px; font-weight:400; line-height:1.7; color:var(--body); background:var(--cream); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img,video{ max-width:100%; display:block; } picture{ display:block; } a{ color:inherit; text-decoration:none; } button{ font-family:inherit; cursor:pointer; } :focus-visible{ outline:2px solid var(--blush-deep); outline-offset:3px; } ::selection{ background:var(--blush); color:var(--ink); } .container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); } .skip-link{ position:absolute; left:-999px; top:0; z-index:200; background:var(--ink); color:var(--cream); padding:12px 18px; font-size:13px; } .skip-link:focus{ left:12px; top:12px; } /* ===== Loading screen ===== */ #ld{ position:fixed; inset:0; z-index:9999; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.4rem; background:var(--ld-bg); transition:opacity .5s var(--ease); } #ld.done{ opacity:0; pointer-events:none; } .ld-mark{ font-family:var(--display); font-weight:400; font-size:clamp(2.2rem,8vw,3.4rem); letter-spacing:.01em; color:var(--ld-fg); opacity:0; transform:translateY(8px); animation:ldm .6s .05s var(--ease) forwards; } .ld-mark span{ color:var(--accent); } .ld-bar{ width:min(180px,44vw); height:2px; background:rgba(33,31,27,.10); overflow:hidden; } .ld-bar i{ display:block; height:100%; width:40%; background:var(--accent); animation:ldb 1s var(--ease) infinite; } @keyframes ldm{ to{ opacity:1; transform:none; } } @keyframes ldb{ 0%{ transform:translateX(-100%);} 100%{ transform:translateX(350%);} } /* ===== Shared editorial primitives ===== */ .eyebrow{ display:inline-flex; align-items:center; gap:13px; font-family:var(--font-sans); font-size:11px; font-weight:600; letter-spacing:.32em; text-transform:uppercase; color:var(--ink); margin:0 0 20px; } .eyebrow::before{ content:""; width:30px; height:1px; background:var(--blush); } .eyebrow .num{ color:var(--blush-deep); font-weight:700; letter-spacing:.12em; } .display{ font-family:var(--display); font-weight:400; color:var(--ink); font-size:clamp(33px,4.7vw,60px); line-height:1.04; letter-spacing:.006em; margin:0 0 20px; } .display em{ font-style:normal; font-weight:400; color:var(--blush); } .lede{ font-size:clamp(16px,1.35vw,18px); color:var(--body); max-width:52ch; margin:0; } .section{ padding:var(--section-y) 0; position:relative; } .section-head{ max-width:640px; margin:0 0 clamp(26px,4vw,44px); } .section-head.center{ margin-inline:auto; text-align:center; } .section-head.center .eyebrow{ justify-content:center; } .section-head .lede{ margin-top:6px; } /* ===== Buttons — SQUARE (radius 0), blush fill (Townhouse) ===== */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:15px 26px; border:1px solid transparent; border-radius:0; font-family:var(--font-sans); font-size:11.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; white-space:nowrap; transition:background .28s var(--ease), color .28s var(--ease), border-color .28s var(--ease), transform .28s var(--ease); } .btn-lg{ padding:18px 34px; } .btn-primary{ background:var(--blush); color:var(--ink); } .btn-primary:hover{ background:var(--ink); color:var(--cream); transform:translateY(-1px); } .btn-outline{ background:transparent; color:var(--ink); border-color:var(--ink); } .btn-outline:hover{ background:var(--ink); color:var(--cream); } .btn-outline-light{ background:transparent; color:var(--ink); border-color:var(--line-2); } .btn-outline-light:hover{ border-color:var(--ink); } .link-arrow{ display:inline-flex; align-items:center; gap:9px; font-size:11.5px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--ink); padding-bottom:6px; border-bottom:1px solid var(--line-2); transition:gap .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease); } .link-arrow::after{ content:"→"; transition:transform .3s var(--ease); } .link-arrow:hover{ gap:15px; color:var(--blush-deep); border-color:var(--blush); } .link-arrow:hover::after{ transform:translateX(3px); } /* ===== Header / nav ===== */ .site-header{ position:fixed; inset:0 0 auto 0; z-index:80; height:var(--header-h); display:flex; align-items:center; background:rgba(251,248,242,0); border-bottom:1px solid transparent; transition:background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s var(--ease); } .site-header.is-scrolled{ background:rgba(251,248,242,.9); backdrop-filter:blur(10px); border-bottom-color:var(--line); } .header-inner{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); display:flex; align-items:center; gap:28px; } /* ===== Typografischer Wordmark (Platzhalter, leicht auszutauschen) ===== */ .brand{ display:inline-flex; align-items:center; color:var(--ink); } .wordmark{ font-family:var(--display); font-weight:400; font-size:25px; line-height:1; letter-spacing:.05em; color:var(--ink); } .wordmark em{ font-style:normal; font-weight:400; color:var(--blush); } .main-nav{ margin-left:auto; } .main-nav ul{ display:flex; gap:34px; list-style:none; margin:0; padding:0; } .main-nav a{ position:relative; font-size:13px; font-weight:500; letter-spacing:.01em; color:var(--ink-2); padding-bottom:4px; transition:color .25s var(--ease); } .main-nav a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--blush); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease); } .main-nav a:hover{ color:var(--ink); } .main-nav a:hover::after{ transform:scaleX(1); } .header-cta{ display:flex; align-items:center; gap:16px; } .header-cta .btn{ padding:11px 20px; letter-spacing:.14em; } .nav-toggle{ display:none; width:42px; height:42px; align-items:center; justify-content:center; background:transparent; border:1px solid var(--line-2); color:var(--ink); } .nav-toggle svg{ width:22px; height:22px; } .nav-toggle .icon-close{ display:none; } /* ===== HERO — CENTERED text over a soft looping nail video, LIGHT wash (no heavy scrim) ===== */ .hero{ position:relative; min-height:100svh; display:flex; align-items:center; justify-content:center; text-align:center; overflow:hidden; isolation:isolate; } .hero-media{ position:absolute; inset:0; z-index:0; } .hero-media video,.hero-media img{ width:100%; height:100%; object-fit:cover; object-position:center; } /* Light editorial wash — just enough cream to keep the charcoal headline legible over the bright nail clip. A gentle centre glow lifts the text, NO dark scrim. */ .hero-media::after{ content:""; position:absolute; inset:0; background: radial-gradient(120% 90% at 50% 46%, rgba(251,248,242,.86) 0%, rgba(251,248,242,.64) 34%, rgba(251,248,242,.40) 60%, rgba(251,248,242,.30) 100%), linear-gradient(to bottom, rgba(251,248,242,.42) 0%, rgba(251,248,242,0) 26%, rgba(251,248,242,0) 72%, rgba(251,248,242,.58) 100%); } .hero .container{ position:relative; z-index:2; padding-top:calc(var(--header-h) + 40px); padding-bottom:clamp(48px,8vh,96px); } .hero-inner{ max-width:940px; margin-inline:auto; } .hero h1{ font-family:var(--display); font-weight:400; color:var(--ink); font-size:clamp(44px,6.5vw,88px); line-height:1.02; letter-spacing:.004em; margin:0 auto; max-width:15ch; } .hero h1 em{ font-style:normal; font-weight:400; color:var(--blush); } .hero-sub{ font-size:clamp(16px,1.5vw,20px); color:var(--ink-2); max-width:52ch; margin:24px auto 24px; line-height:1.6; } .hero-rating{ display:inline-flex; align-items:center; gap:9px; font-size:13px; font-weight:600; letter-spacing:.04em; color:var(--ink-2); margin-bottom:30px; } .hero-rating svg{ width:16px; height:16px; color:var(--blush-deep); } .hero-rating strong{ color:var(--ink); font-weight:700; } .hero-actions{ display:flex; flex-wrap:wrap; gap:14px; justify-content:center; } .hero-addr{ display:inline-flex; align-items:center; gap:9px; margin-top:30px; font-size:12.5px; font-weight:500; letter-spacing:.02em; color:var(--ink-2); } .hero-addr svg{ width:16px; height:16px; color:var(--blush-deep); flex:none; } .hero-addr:hover{ color:var(--blush-deep); } /* ===== DESTINATION TRIPTYCH — asymmetric primary geometry ===== */ .triptych-sec{ background:var(--cream); } .triptych{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.4vw,34px); align-items:start; } .tri-panel{ position:relative; display:block; color:var(--ink); } /* Off-grid crops: each panel a different aspect + vertical offset → breaks the centered-symmetric template smell (passes the greyscale wireframe test). */ .tri-panel:nth-child(1){ margin-top:0; } .tri-panel:nth-child(2){ margin-top:clamp(28px,5vw,72px); } .tri-panel:nth-child(3){ margin-top:clamp(10px,2vw,28px); } .tri-figure{ position:relative; overflow:hidden; background:var(--cream-3); } .tri-panel:nth-child(1) .tri-figure{ aspect-ratio:4/5; } .tri-panel:nth-child(2) .tri-figure{ aspect-ratio:3/4; } .tri-panel:nth-child(3) .tri-figure{ aspect-ratio:5/6; } .tri-figure img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); } .tri-panel:hover .tri-figure img{ transform:scale(1.05); } .tri-index{ position:absolute; top:14px; left:14px; z-index:2; font-family:var(--font-sans); font-size:11px; font-weight:600; letter-spacing:.28em; color:var(--white); text-shadow:0 1px 8px rgba(0,0,0,.4); } .tri-label{ display:block; margin:18px 0 8px; font-family:var(--font-sans); font-size:11px; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--blush-deep); } .tri-panel h3{ font-family:var(--display); font-weight:400; font-size:clamp(22px,2.4vw,30px); line-height:1.1; margin:0 0 10px; color:var(--ink); } .tri-panel p{ margin:0; font-size:14.5px; color:var(--body); max-width:34ch; } /* ===== EFFECT 1 — Sticky-crossfade split price-menu ===== */ .preis{ background:var(--cream-2); } .menu-section__grid{ display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(36px,6vw,84px); align-items:start; } .menu-image{ position:sticky; top:calc(var(--header-h) + 26px); aspect-ratio:4/5; overflow:hidden; background:var(--cream-3); box-shadow:var(--shadow); isolation:isolate; } .menu-image__layer{ position:absolute; inset:0; background-position:center; background-size:cover; background-repeat:no-repeat; transition:opacity .55s var(--ease); will-change:opacity; } .menu-image__layer.is-out{ opacity:0; } .menu-image__caption{ position:absolute; left:14px; bottom:14px; z-index:2; display:inline-flex; align-items:center; gap:10px; padding:8px 15px; background:rgba(251,248,242,.94); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); font-family:var(--font-sans); font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--ink); } .menu-col .eyebrow{ margin-bottom:16px; } .menu-col .display{ font-size:clamp(33px,3.9vw,52px); } .menu-note{ font-size:14px; color:var(--body); margin:0 0 26px; max-width:44ch; } .menu-list__tabs{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px; } .menu-filter{ background:var(--white); border:1px solid var(--line-2); color:var(--ink); border-radius:0; padding:9px 16px; font-family:var(--font-sans); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; transition:all .2s var(--ease); } .menu-filter:hover{ border-color:var(--ink); } .menu-filter.is-active{ background:var(--ink); color:var(--cream); border-color:var(--ink); } .menu-list__group.is-hidden{ display:none; } .menu-list[data-active]:not([data-active="all"]) .menu-list__group{ display:none; } .menu-list[data-active]:not([data-active="all"]) .menu-list__group.is-active{ display:block; } .menu-list[data-active]:not([data-active="all"]) .menu-list__cat{ display:none; } .menu-list__cat{ font-family:var(--font-sans); font-size:11px; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--muted); margin:26px 0 6px; } .menu-list__group:first-child .menu-list__cat{ margin-top:0; } .menu-list__row{ position:relative; display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:6px 18px; padding:15px 14px; margin:0 -14px; border-bottom:1px dashed var(--line); cursor:default; transition:background .25s var(--ease); } .menu-list__row:hover{ background:var(--white); } .menu-list__row::after{ content:""; position:absolute; left:14px; right:14px; bottom:-1px; height:1px; background:var(--blush); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease); } .menu-list__row:hover::after{ transform:scaleX(1); } .menu-row-name{ font-family:var(--display); font-size:clamp(19px,2vw,24px); color:var(--ink); letter-spacing:.008em; } .menu-row-price{ font-family:var(--font-sans); font-size:14px; font-weight:600; letter-spacing:.04em; color:var(--blush-deep); white-space:nowrap; } .menu-foot{ font-size:13px; color:var(--muted); margin:24px 0 0; } .menu-cta{ margin-top:26px; display:flex; flex-wrap:wrap; gap:14px; } /* ===== BLUSH BAND — brand statement ===== */ .blush-band{ background:var(--blush); } .blush-band .container{ text-align:center; padding-block:clamp(56px,8vw,104px); } .blush-band .eyebrow{ color:var(--ink); justify-content:center; } .blush-band .eyebrow::before{ background:var(--ink); } .blush-band .eyebrow .num{ color:var(--ink); } .blush-band .display{ color:var(--ink); margin-inline:auto; max-width:16ch; } .blush-band .display em{ color:var(--white); } .blush-band p{ color:var(--ink-2); font-size:clamp(16px,1.7vw,20px); max-width:52ch; margin:16px auto 28px; } .blush-band .btn-primary{ background:var(--ink); color:var(--cream); } .blush-band .btn-primary:hover{ background:var(--white); color:var(--ink); } /* ===== EFFECT 2 — Reveal-on-scroll masonry lookbook ===== */ .lookbook{ background:var(--cream); } .lookbook__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-bottom:clamp(30px,4vw,48px); } .beispiel-pill{ display:inline-flex; align-items:center; gap:8px; padding:8px 16px; background:var(--white); border:1px solid var(--line-2); border-radius:999px; font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); } .beispiel-pill::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--blush); } .masonry{ column-count:4; column-gap:var(--gutter-pin); } @media (max-width:1100px){ .masonry{ column-count:3; } } @media (max-width:760px){ .masonry{ column-count:2; column-gap:8px; } } .pin{ position:relative; display:block; margin:0 0 var(--gutter-pin); overflow:hidden; background:var(--cream-3); border-radius:var(--radius-img); break-inside:avoid; isolation:isolate; } .pin img{ width:100%; height:auto; display:block; transition:transform .7s var(--ease); } .pin::after{ content:""; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 1px rgba(33,31,27,.06); pointer-events:none; } .pin:hover img{ transform:scale(1.05); } .pin figcaption{ position:absolute; left:12px; bottom:12px; z-index:2; padding:7px 14px; background:rgba(251,248,242,.94); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-radius:999px; font-size:10px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--ink); opacity:0; transform:translateY(6px); transition:.25s var(--ease); pointer-events:none; } .pin:hover figcaption{ opacity:1; transform:none; } @media (hover:none){ .pin figcaption{ opacity:1; transform:none; } } .lookbook-note{ margin:clamp(24px,3vw,36px) 0 0; font-size:13px; color:var(--muted); max-width:60ch; } /* ===== Gallery tiles are clickable — cursor + soft "Ansehen" hover cue ===== */ .pin--clickable{ cursor:pointer; } .pin--clickable:focus-visible{ outline:2px solid var(--blush-deep); outline-offset:3px; } .pin__cue{ position:absolute; top:12px; right:12px; z-index:2; display:inline-flex; align-items:center; gap:7px; padding:7px 13px; background:rgba(33,31,27,.86); color:var(--cream); border-radius:999px; font-family:var(--font-sans); font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; opacity:0; transform:translateY(-6px); transition:.25s var(--ease); pointer-events:none; } .pin__cue svg{ width:12px; height:12px; } .pin--clickable:hover .pin__cue, .pin--clickable:focus-visible .pin__cue{ opacity:1; transform:none; } @media (hover:none){ .pin__cue{ opacity:1; transform:none; } } /* ===== Lightbox — click a look, see it larger with its type ===== */ .lb{ position:fixed; inset:0; z-index:120; display:flex; align-items:center; justify-content:center; padding:clamp(14px,3vw,44px); } .lb[hidden]{ display:none; } .lb__backdrop{ position:absolute; inset:0; background:rgba(40,36,30,.66); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); opacity:0; transition:opacity .3s var(--ease); } .lb.is-open .lb__backdrop{ opacity:1; } .lb__dialog{ position:relative; z-index:1; display:flex; flex-direction:column; max-width:min(1040px,100%); max-height:100%; opacity:0; transform:translateY(10px) scale(.985); transition:opacity .3s var(--ease), transform .3s var(--ease); } .lb.is-open .lb__dialog{ opacity:1; transform:none; } .lb__figure{ margin:0; background:var(--cream-3); overflow:hidden; border-radius:var(--radius-img) var(--radius-img) 0 0; box-shadow:var(--shadow); display:flex; align-items:center; justify-content:center; min-height:0; } .lb__img{ display:block; width:auto; height:auto; max-width:100%; max-height:min(72vh, calc(100dvh - 190px)); object-fit:contain; } .lb__bar{ display:flex; align-items:center; justify-content:space-between; gap:18px 24px; flex-wrap:wrap; padding:16px clamp(16px,2.2vw,26px); background:var(--cream); border-radius:0 0 var(--radius-img) var(--radius-img); } .lb__labels{ display:flex; flex-direction:column; gap:5px; min-width:0; } .lb__mark{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-sans); font-size:10px; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--blush-deep); } .lb__mark::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--blush); flex:none; } .lb__mark--real{ color:var(--ink-2); } .lb__mark--real::before{ background:var(--ink); } .lb__type{ font-family:var(--display); font-size:clamp(22px,3vw,32px); line-height:1.05; color:var(--ink); letter-spacing:.006em; } .lb__book{ flex:none; } /* controls anchor to the overlay edges (viewport) so they stay thumb-reachable */ .lb__ctl{ position:absolute; z-index:3; width:48px; height:48px; display:inline-flex; align-items:center; justify-content:center; background:rgba(251,248,242,.94); border:1px solid var(--line-2); color:var(--ink); border-radius:0; transition:background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); } .lb__ctl:hover{ background:var(--ink); color:var(--cream); border-color:var(--ink); } .lb__ctl svg{ width:22px; height:22px; } .lb__close{ top:clamp(10px,2.2vw,22px); right:clamp(10px,2.2vw,22px); } .lb__prev{ left:clamp(8px,2vw,22px); top:50%; transform:translateY(-50%); } .lb__next{ right:clamp(8px,2vw,22px); top:50%; transform:translateY(-50%); } @media (max-width:600px){ .lb{ padding:0; } .lb__dialog{ width:100%; height:100%; max-height:100%; justify-content:center; } .lb__figure{ border-radius:0; box-shadow:none; } .lb__img{ max-height:calc(100dvh - 168px); } .lb__bar{ border-radius:0; padding-bottom:calc(16px + env(safe-area-inset-bottom)); } .lb__prev{ left:10px; } .lb__next{ right:10px; } .lb__close{ top:10px; right:10px; } } @media (prefers-reduced-motion:reduce){ .lb__backdrop,.lb__dialog{ transition:none; } } /* ===== STUDIO / ÜBER — real interior photos as the feature (image-led band) ===== */ .studio{ background:var(--cream); } /* Full-width two-photo band: the real studio shots lead, large + balanced */ .studio-photos{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1.8vw,22px); margin-bottom:clamp(30px,4.6vw,62px); } .studio-photos figure{ margin:0; position:relative; overflow:hidden; background:var(--cream-3); aspect-ratio:4/5; } .studio-photos figure:nth-child(2){ margin-top:clamp(20px,3.6vw,56px); } /* editorial offset (geometry, not paint) */ .studio-photos img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); } .studio-photos figure:hover img{ transform:scale(1.04); } .studio-photos figcaption{ position:absolute; left:12px; bottom:12px; padding:6px 12px; background:rgba(251,248,242,.92); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); } /* Copy sits below the band at a balanced weight: intro | facts+Lina */ .studio-copy{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,72px); align-items:start; } .studio-h{ font-family:var(--display); font-weight:400; color:var(--ink); font-size:clamp(28px,3.6vw,46px); line-height:1.05; letter-spacing:.006em; margin:0 0 18px; } .studio-h em{ font-style:normal; font-weight:400; color:var(--blush); } .studio-intro p{ margin:0 0 16px; color:var(--body); } .studio-intro p:last-child{ margin-bottom:0; } .studio-facts{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 22px; } .studio-fact{ display:inline-flex; align-items:center; gap:8px; padding:9px 14px; background:var(--white); border:1px solid var(--line); font-size:12px; font-weight:500; letter-spacing:.02em; color:var(--ink-2); } .studio-fact svg{ width:15px; height:15px; color:var(--blush-deep); flex:none; } .lina-line{ display:flex; gap:14px; align-items:flex-start; padding:20px; background:var(--cream-2); border-left:2px solid var(--blush); } .lina-badge{ flex:none; width:40px; height:40px; display:grid; place-items:center; border-radius:50%; background:var(--blush); color:var(--ink); font-family:var(--display); font-size:22px; } .lina-line .l-txt{ font-size:14.5px; color:var(--body); } .lina-line strong{ color:var(--ink); font-weight:600; } /* ===== TESTIMONIALS — Treatwell (trust as design content) ===== */ .reviews{ background:var(--cream-2); } .review-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2vw,26px); } .review-card{ margin:0; padding:32px 28px; background:var(--white); border:1px solid var(--line); display:flex; flex-direction:column; } .review-stars{ display:inline-flex; gap:3px; margin-bottom:16px; color:var(--blush-deep); } .review-stars svg{ width:16px; height:16px; } .review-card p{ font-family:var(--display); font-size:21px; line-height:1.45; color:var(--ink); margin:0 0 20px; flex:1; letter-spacing:.004em; } .review-attr{ font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); } .review-attr strong{ color:var(--ink); font-weight:700; } /* ===== FAQ ===== */ .faq{ max-width:800px; } .faq-item{ border-bottom:1px solid var(--line); } .faq-q{ width:100%; text-align:left; background:transparent; border:0; padding:22px 40px 22px 0; position:relative; font-family:var(--display); font-size:clamp(19px,2.1vw,25px); color:var(--ink); letter-spacing:.006em; } .faq-q::after{ content:"+"; position:absolute; right:4px; top:50%; transform:translateY(-50%); font-family:var(--font-sans); font-size:22px; color:var(--blush-deep); transition:transform .3s var(--ease); } .faq-q[aria-expanded="true"]::after{ transform:translateY(-50%) rotate(45deg); } .faq-a{ max-height:0; overflow:hidden; transition:max-height .4s var(--ease); } .faq-a p{ margin:0 0 22px; color:var(--body); max-width:64ch; } /* ===== STANDORT — self-contained map card + hours (no booking form) ===== */ .todo{ display:inline-block; color:var(--blush-deep); font-weight:600; background:var(--blush-soft); padding:1px 7px; font-size:12.5px; letter-spacing:.02em; } .standort-grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(20px,3vw,32px); align-items:stretch; } .map-card{ background:var(--cream-2); border:1px solid var(--line); display:flex; flex-direction:column; overflow:hidden; } .map-visual{ position:relative; display:block; aspect-ratio:16/9; overflow:hidden; background:var(--cream-2); } .map-svg{ width:100%; height:100%; display:block; transition:transform .6s var(--ease); } .map-visual:hover .map-svg{ transform:scale(1.03); } .map-open{ position:absolute; left:14px; bottom:14px; display:inline-flex; align-items:center; gap:8px; padding:9px 15px; background:var(--ink); color:var(--cream); font-family:var(--font-sans); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; } .map-meta{ padding:clamp(22px,2.4vw,30px); border-top:1px solid var(--line); } .map-addr{ margin:0 0 6px; font-family:var(--display); font-size:clamp(17px,1.8vw,21px); line-height:1.35; color:var(--ink); } .map-sub{ margin:0 0 18px; font-size:13px; color:var(--muted); letter-spacing:.02em; } .hours-card{ padding:clamp(28px,3vw,40px); background:var(--cream-2); border:1px solid var(--line); } .hours-card h3{ font-family:var(--display); font-weight:400; font-size:clamp(22px,2.3vw,28px); color:var(--ink); margin:0 0 20px; } .hours-list{ display:grid; gap:0; } .hours-row{ display:flex; justify-content:space-between; padding:12px 0; border-bottom:1px solid var(--line); font-size:14.5px; } .hours-row:last-child{ border-bottom:0; } .hours-row .h-day{ color:var(--ink-2); } .hours-row .h-time{ font-family:var(--display); color:var(--ink); letter-spacing:.01em; } .hours-row.closed .h-time{ color:var(--muted); font-style:normal; font-family:var(--font-sans); font-size:13px; letter-spacing:.04em; } .hours-note{ margin:16px 0 0; font-size:12px; color:var(--muted); line-height:1.6; } /* ===== FOOTER ===== */ .site-footer{ background:var(--ink); color:var(--cream); padding:clamp(56px,7vw,88px) 0 32px; } .footer-top{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid rgba(251,248,242,.14); } .footer-brand .brand{ color:var(--cream); } .footer-brand .wordmark{ color:var(--cream); font-size:26px; } .footer-brand .wordmark em{ color:var(--blush); } .footer-brand small{ color:rgba(251,248,242,.6); } .footer-brand p{ margin:16px 0 0; color:rgba(251,248,242,.66); font-size:14px; max-width:38ch; } .footer-col h4{ font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--blush); margin:0 0 16px; } .footer-col ul{ list-style:none; margin:0; padding:0; } .footer-col li{ margin-bottom:10px; font-size:14px; color:rgba(251,248,242,.72); } .footer-col a:hover{ color:var(--blush); } .footer-note{ margin:26px 0 0; font-size:12px; line-height:1.7; color:rgba(251,248,242,.5); max-width:88ch; } .footer-bottom{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-top:26px; font-size:12px; color:rgba(251,248,242,.5); } .footer-preview{ display:inline-flex; align-items:center; gap:7px; } .footer-preview svg{ color:var(--blush); } /* ===== Mobile sticky booking bar ===== */ .mobile-bar{ position:fixed; left:0; right:0; bottom:0; z-index:70; display:none; gap:10px; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); background:rgba(251,248,242,.96); backdrop-filter:blur(10px); border-top:1px solid var(--line); transform:translateY(120%); transition:transform .35s var(--ease); } .mobile-bar .btn{ flex:1; } body.is-past-hero .mobile-bar{ transform:none; } /* ===== Reveal (every section gently comes up on scroll) ===== */ .reveal{ opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease), transform .9s var(--ease); } .reveal.is-in{ opacity:1; transform:none; } /* subtle stagger inside grouped reveals */ .review-grid .reveal:nth-child(2){ transition-delay:.09s; } .review-grid .reveal:nth-child(3){ transition-delay:.18s; } .faq .faq-item.reveal:nth-child(2){ transition-delay:.05s; } .faq .faq-item.reveal:nth-child(3){ transition-delay:.10s; } .faq .faq-item.reveal:nth-child(4){ transition-delay:.15s; } .faq .faq-item.reveal:nth-child(5){ transition-delay:.20s; } .studio-copy .studio-aside.reveal{ transition-delay:.08s; } /* ===== Legal / simple pages (impressum · datenschutz · agb) ===== */ .legal-header{ position:static; height:auto; padding:16px 0; background:var(--cream); border-bottom:1px solid var(--line); } .legal-header .header-inner{ justify-content:space-between; } .legal-back{ font-size:11px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--ink); } .legal-back:hover{ color:var(--blush-deep); } .legal-main{ padding:clamp(48px,7vw,84px) 0 80px; } .legal-content{ width:100%; max-width:820px; margin-inline:auto; padding-inline:var(--gutter); } .legal-content h1{ font-family:var(--display); font-weight:400; font-size:clamp(34px,5vw,54px); color:var(--ink); margin:0 0 18px; } .legal-content h2{ font-family:var(--display); font-weight:400; font-size:clamp(21px,3vw,28px); color:var(--ink); margin:38px 0 10px; } .legal-content p, .legal-content li{ color:var(--body); font-size:15px; } .legal-content a{ color:var(--blush-deep); border-bottom:1px solid var(--blush); } .legal-note{ padding:16px 18px; background:var(--blush-soft); border-left:2px solid var(--blush); font-size:14px; } .legal-note em{ color:var(--blush-deep); font-style:normal; font-weight:600; } .legal-updated{ margin-top:40px; font-size:12px; color:var(--muted); } .legal-foot{ background:var(--ink); color:rgba(251,248,242,.6); padding:26px 0; } .legal-foot-inner{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:12px; } .legal-foot a{ color:rgba(251,248,242,.7); margin-left:16px; } .legal-foot a:first-child{ margin-left:0; } .legal-foot a:hover{ color:var(--blush); } /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width:980px){ .main-nav{ position:fixed; inset:var(--header-h) 0 auto 0; background:var(--cream); border-bottom:1px solid var(--line); transform:translateY(-8px); opacity:0; pointer-events:none; transition:.28s var(--ease); } .main-nav.is-open{ transform:none; opacity:1; pointer-events:auto; } .main-nav ul{ flex-direction:column; gap:0; padding:8px var(--gutter) 20px; } .main-nav li{ border-bottom:1px solid var(--line); } .main-nav a{ display:block; padding:16px 0; } .nav-toggle{ display:inline-flex; } .header-rating{ display:none; } .header-cta .btn{ display:none; } .nav-toggle.is-open .icon-open{ display:none; } .nav-toggle.is-open .icon-close{ display:block; } .studio-copy{ grid-template-columns:1fr; gap:26px; } .menu-section__grid{ grid-template-columns:1fr; gap:30px; } .menu-image{ position:relative; top:0; aspect-ratio:16/11; } .footer-top{ grid-template-columns:1fr 1fr; } } @media (max-width:820px){ .triptych{ grid-template-columns:1fr; gap:34px; } .tri-panel:nth-child(n){ margin-top:0; } .tri-panel:nth-child(n) .tri-figure{ aspect-ratio:16/11; } .review-grid{ grid-template-columns:1fr; } .standort-grid{ grid-template-columns:1fr; } .mobile-bar{ display:flex; } body{ padding-bottom:0; } } @media (max-width:560px){ :root{ --header-h:64px; } .studio-photos{ grid-template-columns:1fr; } .studio-photos figure:nth-child(2){ margin-top:0; } .footer-top{ grid-template-columns:1fr; gap:28px; } .footer-bottom{ flex-direction:column; align-items:flex-start; } .hero h1{ font-size:clamp(36px,11vw,62px); } } /* ===== Reduced motion ===== */ @media (prefers-reduced-motion:reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } .reveal{ opacity:1; transform:none; } }