/* ========================================================= VÅRGÅRDA HÄLSOCENTER — Design System Black · Orange · White. Condensed display + clean body. ========================================================= */ /* Fonts are loaded via in each page's , not @import — an @import here can't start downloading until this file has been fetched and parsed. */ :root{ /* Surfaces — warm-neutral blacks */ --ink: #0a0a0b; --ink-1: #100f11; --ink-2: #16151800; --surface: #141315; --surface-2: #1b1a1d; --surface-3: #232125; /* Brand */ --orange: #E87A1E; --orange-bright:#FF8A2A; --orange-deep: #B85E12; --orange-glow: rgba(232,122,30,.30); /* Text */ --white: #ffffff; --fg: #f4f2f0; --muted: rgba(244,242,240,.62); --muted-2: rgba(244,242,240,.40); /* Lines */ --line: rgba(255,255,255,.09); --line-2: rgba(255,255,255,.16); --font-display: 'Oswald', 'Arial Narrow', sans-serif; --font-body: 'Hanken Grotesk', system-ui, sans-serif; --maxw: 1240px; --gut: clamp(20px, 5vw, 80px); --radius: 4px; --radius-lg: 8px; /* Nav height is derived, not hardcoded — the header sizes itself to the logo and --nav-h just mirrors it so the hero/pagehead can offset correctly. */ --logo-h: 80px; --nav-pad-t: 26px; --nav-pad-b: 26px; --nav-h: calc(var(--logo-h) + var(--nav-pad-t) + var(--nav-pad-b)); } *{ box-sizing:border-box; margin:0; padding:0; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } body{ background:var(--ink); color:var(--fg); font-family:var(--font-body); font-size:17px; line-height:1.65; font-weight:400; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{ display:block; max-width:100%; } a{ color:inherit; text-decoration:none; } button{ font-family:inherit; cursor:pointer; } ::selection{ background:var(--orange); color:#000; } /* ------------------ Typography ------------------ */ h1,h2,h3,h4,.display{ font-family:var(--font-display); font-weight:700; line-height:0.98; letter-spacing:-0.01em; text-transform:uppercase; } h1{ font-size:clamp(42px, 7.4vw, 104px); } h2{ font-size:clamp(30px, 4.6vw, 60px); line-height:1.0; } h3{ font-size:clamp(21px, 2.4vw, 30px); } p{ text-wrap:pretty; } .lead{ font-size:clamp(18px,1.5vw,21px); color:var(--muted); line-height:1.6; } .eyebrow{ font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.22em; font-size:13px; color:var(--orange); display:inline-flex; align-items:center; gap:12px; } .eyebrow::before{ content:""; width:26px; height:2px; background:var(--orange); display:inline-block; } .eyebrow.center::after{ content:""; width:26px; height:2px; background:var(--orange); display:inline-block; } .eyebrow.no-rule::before{ display:none; } .orange{ color:var(--orange); } .muted{ color:var(--muted); } /* ------------------ Layout ------------------ */ .wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gut); } .section{ padding-block:clamp(72px, 11vw, 150px); } .section.tight{ padding-block:clamp(54px,7vw,90px); } .center{ text-align:center; } .stack-sm > * + *{ margin-top:14px; } .section-head{ max-width:740px; } .section-head.center{ margin-inline:auto; } .section-head h2{ margin-top:18px; } .section-head p{ margin-top:22px; } /* ------------------ Buttons ------------------ */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.06em; font-size:15px; padding:15px 28px; border-radius:var(--radius); border:1px solid transparent; transition:.2s ease; white-space:nowrap; } .btn svg{ width:18px; height:18px; } .btn-primary{ background:var(--orange); color:#0a0a0b; } .btn-primary:hover{ background:var(--orange-bright); transform:translateY(-2px); box-shadow:0 12px 30px -10px var(--orange-glow); } .btn-ghost{ background:transparent; color:var(--fg); border-color:var(--line-2); } .btn-ghost:hover{ border-color:var(--orange); color:var(--orange); } .btn-dark{ background:rgba(255,255,255,.06); color:var(--fg); border-color:var(--line); } .btn-dark:hover{ background:rgba(255,255,255,.1); } .btn-lg{ padding:18px 36px; font-size:16px; } .btn-block{ width:100%; } /* ------------------ Nav ------------------ */ .nav{ position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; transition:background .3s ease, border-color .3s ease, backdrop-filter .3s; border-bottom:1px solid transparent; } .nav.scrolled{ background:rgba(10,10,11,.82); backdrop-filter:blur(14px) saturate(140%); border-bottom-color:var(--line); /* compact once you leave the top — 132px of fixed header is a lot to carry */ --logo-h:54px; --nav-pad-t:12px; --nav-pad-b:12px; } /* padding sits on the row, not on .brand — so align-items:center lines the links up with the middle of the logo rather than the middle of a padded box */ .nav .wrap{ width:100%; display:flex; align-items:center; gap:28px; padding-top:var(--nav-pad-t); padding-bottom:var(--nav-pad-b); transition:padding .3s ease; } .brand{ display:flex; align-items:center; flex-shrink:0; } .brand img{ height:var(--logo-h); width:auto; transition:height .3s ease; } .nav-links{ display:flex; align-items:center; gap:34px; margin-left:auto; } .nav-links a{ font-family:var(--font-display); font-weight:500; text-transform:uppercase; letter-spacing:.07em; font-size:15.5px; color:var(--fg); opacity:.82; transition:.18s; position:relative; padding-block:6px; } .nav-links a:hover{ opacity:1; color:var(--orange); } .nav-links a.active{ opacity:1; } .nav-links a.active::after{ content:""; position:absolute; left:0; bottom:-2px; height:2px; width:100%; background:var(--orange); } .nav-links a.ext::after{ content:"↗"; font-size:11px; margin-left:3px; opacity:.6; vertical-align:super; } .nav-cta{ display:flex; align-items:center; gap:14px; } .nav-toggle{ display:none; background:none; border:0; color:var(--fg); padding:8px; } .nav-toggle svg{ width:28px; height:28px; } /* mobile drawer */ .drawer{ position:fixed; inset:0; z-index:120; background:rgba(8,8,9,.97); backdrop-filter:blur(8px); display:flex; flex-direction:column; padding:26px var(--gut); transform:translateX(100%); transition:transform .35s cubic-bezier(.4,0,.2,1); visibility:hidden; } .drawer.open{ transform:translateX(0); visibility:visible; } .drawer-top{ display:flex; align-items:center; justify-content:space-between; } .drawer-top img{ height:36px; } .drawer-close{ background:none; border:0; color:var(--fg); padding:8px; } .drawer-close svg{ width:30px; height:30px; } .drawer-links{ display:flex; flex-direction:column; gap:6px; margin-top:48px; } .drawer-links a{ font-family:var(--font-display); text-transform:uppercase; font-weight:600; font-size:34px; letter-spacing:.01em; padding:10px 0; border-bottom:1px solid var(--line); } .drawer-links a:active{ color:var(--orange); } .drawer .btn{ margin-top:32px; } /* ------------------ Hero ------------------ */ .hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; padding-top:var(--nav-h); overflow:hidden; } .hero-bg{ position:absolute; inset:0; z-index:0; } .hero-bg img, .hero-bg video{ width:100%; height:100%; object-fit:cover; object-position:center; } .hero-bg::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(10,10,11,.55) 0%, rgba(10,10,11,.2) 35%, rgba(10,10,11,.75) 78%, var(--ink) 100%), radial-gradient(70% 60% at 18% 75%, var(--orange-glow), transparent 60%); } /* no max-width here — it would override .wrap's and knock the hero text out of alignment with the logo above it */ .hero-inner{ position:relative; z-index:2; padding-bottom:clamp(56px,8vw,110px); } .hero h1{ margin-top:22px; font-size:clamp(34px,4.6vw,66px); line-height:1.06; } /* padding+negative margin gives the mask room for umlauts (TRÄNA) without shifting layout */ .hero h1 .ln{ display:block; overflow:hidden; padding-top:.08em; margin-top:-.08em; } .hero h1 .ln-i{ display:block; } .hero .lead{ margin-top:26px; max-width:640px; color:rgba(244,242,240,.78); } .hero-actions{ display:flex; gap:14px; margin-top:36px; flex-wrap:wrap; } /* the backdrop is moving video — a fully transparent button can land on a bright frame, so give it its own base rather than trusting the footage */ .hero .btn-ghost{ background:rgba(10,10,11,.42); backdrop-filter:blur(6px); } .hero .btn-ghost:hover{ background:rgba(10,10,11,.6); } .scroll-cue{ position:absolute; bottom:26px; left:50%; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:8px; font-family:var(--font-display); font-size:11px; letter-spacing:.25em; text-transform:uppercase; color:var(--muted-2); } .scroll-cue .line{ width:1px; height:42px; background:linear-gradient(var(--orange),transparent); } /* ------------------ Info / hours bar ------------------ */ .hoursbar{ background:var(--orange); color:#0a0a0b; } .hoursbar .wrap{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 40px; padding-block:18px; } .hoursbar .hb-item{ display:flex; align-items:center; gap:12px; font-weight:600; } .hoursbar .hb-item svg{ width:20px; height:20px; flex-shrink:0; } .hoursbar .hb-label{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.08em; font-size:14px; } .hoursbar .hb-val{ font-family:var(--font-body); font-weight:700; font-size:15.5px; } .hoursbar .hb-sep{ width:1px; align-self:stretch; background:rgba(0,0,0,.18); } .hoursbar .hb-big{ margin-left:auto; font-family:var(--font-display); font-weight:700; text-transform:uppercase; font-size:18px; } /* ------------------ About / feature ------------------ */ .split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(36px,5vw,84px); align-items:center; } .split.rev{ direction:rtl; } .split.rev > *{ direction:ltr; } .media{ position:relative; border-radius:var(--radius-lg); overflow:hidden; } .media img{ width:100%; height:100%; object-fit:cover; aspect-ratio:4/5; } .media.wide img{ aspect-ratio:5/4; } .media .tag{ position:absolute; left:18px; bottom:18px; z-index:2; background:rgba(10,10,11,.7); backdrop-filter:blur(6px); border:1px solid var(--line-2); padding:9px 16px; border-radius:var(--radius); font-family:var(--font-display); text-transform:uppercase; letter-spacing:.1em; font-size:12px; } .media-frame{ position:relative; } .media-frame::before{ content:""; position:absolute; inset:-14px -14px 14px 14px; border:1px solid var(--line); border-radius:var(--radius-lg); z-index:-1; } .features{ display:flex; flex-direction:column; gap:8px; margin-top:36px; } .feature{ display:flex; gap:20px; padding:22px 0; border-top:1px solid var(--line); } .feature:last-child{ border-bottom:1px solid var(--line); } .feature .ic{ width:50px; height:50px; flex-shrink:0; border-radius:var(--radius); background:rgba(232,122,30,.12); border:1px solid rgba(232,122,30,.3); display:grid; place-items:center; color:var(--orange); } .feature .ic svg{ width:24px; height:24px; } .feature h3{ font-size:20px; } .feature p{ color:var(--muted); font-size:15.5px; margin-top:6px; } /* ------------------ Stats band ------------------ */ .stats{ border-block:1px solid var(--line); background:var(--ink-1); } .stats .wrap{ display:grid; grid-template-columns:repeat(4,1fr); } .stat{ padding:clamp(34px,5vw,56px) 28px; text-align:center; border-left:1px solid var(--line); } .stat:first-child{ border-left:0; } .stat .num{ font-family:var(--font-display); font-weight:700; font-size:clamp(40px,5vw,64px); line-height:1; color:var(--white); } .stat .num .u{ color:var(--orange); } .stat .lbl{ margin-top:12px; font-size:13.5px; letter-spacing:.04em; color:var(--muted); text-transform:uppercase; font-family:var(--font-display); font-weight:500; } /* ------------------ Price list ------------------ */ .pricelist{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(28px,3.2vw,44px) clamp(22px,2.6vw,38px); align-items:start; margin-top:clamp(42px,5vw,64px); } .pcat-name{ text-align:center; color:var(--white); letter-spacing:.05em; font-size:clamp(22px,2.2vw,29px); margin-bottom:16px; transition:color .25s ease; } .pcat-card{ background:var(--surface-2); border:1px solid var(--line); border-radius:16px; padding:clamp(6px,1vw,10px) clamp(20px,2.4vw,30px); position:relative; transition:border-color .28s ease, transform .28s ease, box-shadow .28s ease; } /* hovering anywhere on the block — title included — lights the card up */ .pcat:hover .pcat-card{ border-color:rgba(232,122,30,.45); transform:translateY(-3px); box-shadow:0 24px 50px -30px var(--orange-glow); } .pcat:hover .pcat-name{ color:var(--orange); } /* grid (not flex) so a long label wraps instead of colliding with the price */ .prow{ display:grid; grid-template-columns:1fr auto; gap:10px 18px; align-items:baseline; padding-block:clamp(13px,1.5vw,17px); } .prow + .prow{ border-top:1px solid var(--line); } .prow-label{ font-family:var(--font-display); font-weight:600; text-transform:uppercase; letter-spacing:.03em; line-height:1.2; font-size:clamp(15px,1.5vw,18px); color:var(--fg); } .prow-price{ font-family:var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:.01em; line-height:1.1; font-variant-numeric:tabular-nums; font-size:clamp(19px,2vw,25px); color:var(--orange); text-align:right; } .pricelist-foot{ margin-top:clamp(38px,4.5vw,58px); text-align:center; } .pricelist-foot .btn{ margin-bottom:20px; } .pricelist-foot p{ color:var(--muted); font-size:14.5px; max-width:620px; margin-inline:auto; } /* ------------------ Facilities ------------------ */ .facgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:56px; } .fac{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px; transition:.22s ease; min-height:172px; display:flex; flex-direction:column; } .fac:hover{ border-color:rgba(232,122,30,.4); background:var(--surface-2); } .fac .ic{ color:var(--orange); margin-bottom:auto; } .fac .ic svg{ width:30px; height:30px; } .fac h3{ font-size:21px; margin-top:24px; } .fac p{ color:var(--muted); font-size:14.5px; margin-top:8px; } .fac.photo{ padding:0; overflow:hidden; position:relative; min-height:230px; justify-content:flex-end; } .fac.photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transition:.4s; } .fac.photo:hover img{ transform:scale(1.05); } .fac.photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(8,8,9,.92),transparent 70%); z-index:1; } .fac.photo .inner{ position:relative; z-index:2; padding:26px; } .fac.photo h3{ margin:0; } .fac.photo p{ margin-top:4px; } /* ------------------ Gallery ------------------ */ .gallery{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:200px; grid-auto-flow:dense; gap:14px; margin-top:52px; } .gtile{ position:relative; overflow:hidden; border-radius:var(--radius); cursor:pointer; background:var(--surface); } .gtile img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; } .gtile:hover img{ transform:scale(1.06); } .gtile::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg,rgba(8,8,9,.5),transparent 55%); opacity:0; transition:.3s; } .gtile:hover::after{ opacity:1; } .gtile .expand{ position:absolute; right:14px; bottom:14px; z-index:2; color:#fff; opacity:0; transform:translateY(6px); transition:.3s; } .gtile:hover .expand{ opacity:1; transform:translateY(0); } .gtile .expand svg{ width:22px; height:22px; } .g-wide{ grid-column:span 2; } .g-tall{ grid-row:span 2; } /* lightbox */ .lightbox{ position:fixed; inset:0; z-index:200; background:rgba(6,6,7,.94); display:none; align-items:center; justify-content:center; padding:30px; } .lightbox.open{ display:flex; } .lightbox img{ max-width:92vw; max-height:88vh; border-radius:var(--radius); object-fit:contain; } .lightbox .lb-close{ position:absolute; top:22px; right:26px; background:none; border:0; color:#fff; } .lightbox .lb-close svg{ width:34px; height:34px; } .lightbox .lb-nav{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,.08); border:1px solid var(--line-2); color:#fff; width:52px; height:52px; border-radius:50%; display:grid; place-items:center; } .lightbox .lb-nav:hover{ background:var(--orange); color:#000; } .lightbox .lb-prev{ left:22px; } .lightbox .lb-next{ right:22px; } .lightbox .lb-nav svg{ width:24px; height:24px; } /* ------------------ Instagram ------------------ */ .ig{ background:var(--ink-1); border-top:1px solid var(--line); } .ig-head{ display:flex; align-items:flex-end; justify-content:space-between; flex-wrap:wrap; gap:20px; } .ig-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:44px; } .ig-tile{ position:relative; aspect-ratio:1; overflow:hidden; border-radius:var(--radius); } .ig-tile img{ width:100%; height:100%; object-fit:cover; transition:.45s; filter:grayscale(.15); } .ig-tile:hover img{ transform:scale(1.07); filter:grayscale(0); } .ig-tile::after{ content:""; position:absolute; inset:0; background:var(--orange); opacity:0; mix-blend-mode:overlay; transition:.3s; } .ig-tile:hover::after{ opacity:.35; } .ig-tile .ig-ic{ position:absolute; inset:0; display:grid; place-items:center; color:#fff; opacity:0; transition:.3s; z-index:2; } .ig-tile:hover .ig-ic{ opacity:1; } .ig-tile .ig-ic svg{ width:30px; height:30px; } /* ------------------ Contact ------------------ */ .contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,70px); align-items:start; } .contact-list{ display:flex; flex-direction:column; gap:4px; margin-top:34px; } .cline{ display:flex; gap:18px; padding:22px 0; border-top:1px solid var(--line); align-items:flex-start; } .cline:last-child{ border-bottom:1px solid var(--line); } .cline .ic{ color:var(--orange); flex-shrink:0; margin-top:2px; } .cline .ic svg{ width:24px; height:24px; } .cline .ck{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.1em; font-size:12.5px; color:var(--muted-2); } .cline .cv{ font-size:18px; font-weight:500; margin-top:3px; } .cline a.cv:hover{ color:var(--orange); } .map{ position:relative; border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--line); min-height:340px; background:var(--surface); } .map iframe{ width:100%; height:100%; min-height:340px; border:0; filter:grayscale(.4) invert(.9) contrast(.9) hue-rotate(180deg); } /* forms */ .field{ margin-bottom:18px; } .field label{ display:block; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.08em; font-size:12.5px; color:var(--muted); margin-bottom:9px; } .field input, .field textarea, .field select{ width:100%; background:var(--surface); border:1px solid var(--line-2); border-radius:var(--radius); color:var(--fg); font-family:var(--font-body); font-size:16px; padding:14px 16px; transition:.18s; } .field input:focus, .field textarea:focus, .field select:focus{ outline:none; border-color:var(--orange); background:var(--surface-2); } .field textarea{ resize:vertical; min-height:140px; } .field .err{ color:#ff7a6b; font-size:13px; margin-top:6px; display:none; } .field.invalid input, .field.invalid textarea{ border-color:#ff7a6b; } .field.invalid .err{ display:block; } .form-note{ font-size:14px; color:var(--muted); margin-top:10px; } .form-success{ display:none; background:rgba(232,122,30,.1); border:1px solid rgba(232,122,30,.4); border-radius:var(--radius); padding:18px 20px; color:var(--fg); margin-top:8px; } .form-success.show{ display:block; } /* ------------------ FAQ ------------------ */ .faq{ max-width:840px; margin-top:48px; } .faq-item{ border-top:1px solid var(--line); } .faq-item:last-child{ border-bottom:1px solid var(--line); } .faq-q{ width:100%; background:none; border:0; color:var(--fg); text-align:left; display:flex; justify-content:space-between; align-items:center; gap:20px; padding:26px 0; font-family:var(--font-display); text-transform:uppercase; letter-spacing:.02em; font-size:clamp(18px,2vw,23px); } .faq-q .pm{ flex-shrink:0; width:30px; height:30px; border:1px solid var(--line-2); border-radius:50%; display:grid; place-items:center; transition:.25s; } .faq-q .pm svg{ width:16px; height:16px; transition:.25s; } .faq-item.open .pm{ background:var(--orange); border-color:var(--orange); color:#000; } .faq-item.open .pm svg{ transform:rotate(45deg); } .faq-a{ max-height:0; overflow:hidden; transition:max-height .35s ease; } .faq-a p{ color:var(--muted); padding-bottom:26px; max-width:680px; } /* ------------------ Page header (inner pages) ------------------ */ .pagehead{ position:relative; padding-top:calc(var(--nav-h) + clamp(60px,9vw,120px)); padding-bottom:clamp(46px,6vw,80px); overflow:hidden; border-bottom:1px solid var(--line); } .pagehead .bg{ position:absolute; inset:0; z-index:0; } .pagehead .bg img{ width:100%; height:100%; object-fit:cover; opacity:.28; } .pagehead .bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,10,11,.6),var(--ink)); } .pagehead .wrap{ position:relative; z-index:2; } .pagehead h1{ font-size:clamp(40px,6.5vw,84px); margin-top:18px; } .pagehead p{ margin-top:20px; max-width:620px; } .crumb{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.12em; font-size:12.5px; color:var(--muted-2); } .crumb a:hover{ color:var(--orange); } /* ------------------ Team ------------------ */ .team{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:52px; } .member .ph{ aspect-ratio:3/4; border-radius:var(--radius-lg); overflow:hidden; background:var(--surface); position:relative; border:1px solid var(--line); } .member .ph .ph-fill{ position:absolute; inset:0; display:grid; place-items:center; color:var(--muted-2); background:repeating-linear-gradient(135deg,var(--surface),var(--surface) 12px,var(--surface-2) 12px,var(--surface-2) 24px); } .member .ph .ph-fill svg{ width:54px; height:54px; opacity:.5; } .member .ph .ph-fill .cap{ position:absolute; bottom:14px; font-family:'Courier New',monospace; font-size:11px; letter-spacing:.05em; color:var(--muted-2); } .member h3{ font-size:19px; margin-top:16px; } .member .role{ color:var(--orange); font-family:var(--font-display); text-transform:uppercase; letter-spacing:.08em; font-size:12.5px; margin-top:4px; } /* ------------------ CTA band ------------------ */ .ctaband{ position:relative; overflow:hidden; border-block:1px solid var(--line); } .ctaband .bg{ position:absolute; inset:0; z-index:0; } .ctaband .bg img{ width:100%; height:100%; object-fit:cover; opacity:.22; } .ctaband .bg::after{ content:""; position:absolute; inset:0; background:radial-gradient(60% 100% at 50% 100%, var(--orange-glow), transparent 65%), rgba(10,10,11,.6); } .ctaband .wrap{ position:relative; z-index:2; text-align:center; padding-block:clamp(70px,10vw,130px); } .ctaband h2{ max-width:840px; margin:18px auto 0; } .ctaband .btn{ margin-top:34px; } /* ------------------ Footer ------------------ */ .footer{ background:var(--ink-1); border-top:1px solid var(--line); padding-top:clamp(56px,7vw,88px); } .footer-top{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:56px; } .footer .f-brand img{ height:46px; } .footer .f-brand p{ color:var(--muted); font-size:14.5px; margin-top:20px; max-width:280px; } .footer .f-col h4{ font-family:var(--font-display); text-transform:uppercase; letter-spacing:.08em; font-size:13px; color:var(--muted-2); margin-bottom:18px; } .footer .f-col a, .footer .f-col p{ display:block; color:var(--muted); font-size:15px; margin-bottom:11px; transition:.16s; } .footer .f-col a:hover{ color:var(--orange); } .socials{ display:flex; gap:12px; margin-top:20px; } .socials a{ width:42px; height:42px; border:1px solid var(--line-2); border-radius:50%; display:grid; place-items:center; color:var(--fg); transition:.2s; } .socials a:hover{ background:var(--orange); border-color:var(--orange); color:#000; } .socials svg{ width:19px; height:19px; } .footer-bottom{ border-top:1px solid var(--line); padding-block:26px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:13.5px; color:var(--muted-2); } .footer-bottom a:hover{ color:var(--orange); } /* ------------------ Reveal animation (progressive enhancement) ------------------ */ .js [data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1); } .js [data-reveal].in{ opacity:1; transform:none; } [data-reveal-d="1"]{ transition-delay:.08s; } [data-reveal-d="2"]{ transition-delay:.16s; } [data-reveal-d="3"]{ transition-delay:.24s; } [data-reveal-d="4"]{ transition-delay:.32s; } /* hero headline: line-mask reveal instead of the generic fade-up */ .js .hero h1[data-reveal]{ opacity:1; transform:none; transition:none; } .js .hero h1 .ln-i{ transform:translateY(105%); transition:transform .68s cubic-bezier(.16,.84,.28,1); } .js .hero h1.in .ln-i{ transform:translateY(0); } .js .hero h1 .ln:nth-child(2) .ln-i{ transition-delay:.11s; } @media (prefers-reduced-motion: reduce){ .js [data-reveal]{ opacity:1; transform:none; transition:none; } .brand img, .nav .wrap{ transition:none; } .pcat-card{ transition:none; } .pcat:hover .pcat-card{ transform:none; } .pcat-name{ transition:none; } .js .hero h1 .ln-i{ transform:none; transition:none; } html{ scroll-behavior:auto; } } /* ------------------ Responsive ------------------ */ @media (max-width:1040px){ .footer-top{ grid-template-columns:1fr 1fr; gap:34px; } .footer .f-brand{ grid-column:1 / -1; } .gallery{ grid-template-columns:repeat(3,1fr); } } @media (max-width:900px){ /* --nav-h follows automatically, so hero/pagehead offsets stay correct */ :root{ --logo-h:56px; --nav-pad-t:16px; --nav-pad-b:16px; } .nav.scrolled{ --logo-h:46px; --nav-pad-t:10px; --nav-pad-b:10px; } .nav-links{ display:none; } .nav-cta .btn-ghost{ display:none; } .nav-toggle{ display:inline-flex; margin-left:auto; } .split{ grid-template-columns:1fr; gap:40px; } .split.rev{ direction:ltr; } .media img{ aspect-ratio:16/11; } .pricelist{ grid-template-columns:1fr; max-width:520px; margin-inline:auto; } .facgrid{ grid-template-columns:1fr 1fr; } .stats .wrap{ grid-template-columns:1fr 1fr; } .stat:nth-child(odd){ border-left:0; } .stat:nth-child(n+3){ border-top:1px solid var(--line); } .contact-grid{ grid-template-columns:1fr; } .team{ grid-template-columns:1fr 1fr; } .ig-grid{ grid-template-columns:1fr 1fr; } } @media (max-width:560px){ body{ font-size:16px; } .gallery{ grid-template-columns:1fr 1fr; grid-auto-rows:150px; } .facgrid{ grid-template-columns:1fr; } .hoursbar .hb-big{ margin-left:0; flex-basis:100%; } .hoursbar .hb-sep{ display:none; } .footer-top{ grid-template-columns:1fr; } .pcat-card{ padding-inline:18px; } /* logo + CTA + burger overflows a narrow phone — CTA already lives in the drawer */ .nav-cta .btn-primary{ display:none; } }