/* ============================================================ AURA MEDICAL SPA — luxury aesthetic-medicine landing page ============================================================ */ /* ---- Tokens ---- */ :root{ --ink: #16130F; /* warm near-black charcoal */ --ink-2: #1F1B16; /* slightly lifted charcoal */ --ink-3: #2A251E; /* card on dark */ --cream: #F5F5F0; /* primary cream */ --paper: #FAF8F3; /* softer warm paper */ --paper-2: #EFEBE2; /* muted editorial tone */ --stone: #8A8378; /* greige secondary text */ --stone-2: #B8B1A4; /* lighter greige (on dark) */ --line-dark: rgba(245,245,240,.14); --line-light: rgba(22,19,15,.12); /* gold — tweakable */ --gold: #B89B6E; --gold-soft: #CDB78F; --gold-alpha: .55; /* hairline strength, overridden by data-gold */ --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif; --font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif; --maxw: 1240px; --gutter: clamp(20px, 5vw, 64px); --ease: cubic-bezier(.22,.61,.36,1); } /* gold intensity presets (set via data-gold on ) */ html[data-gold="whisper"] { --gold-alpha:.32; } html[data-gold="balanced"] { --gold-alpha:.55; } html[data-gold="present"] { --gold-alpha:.9; } *{ box-sizing:border-box; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; background:var(--ink); /* canvas/overscroll never flashes white */ color-scheme:light; scrollbar-width:thin; /* Firefox */ scrollbar-color:var(--stone) transparent; } /* themed scrollbar so the right edge never reads as a stray white strip (WebKit) */ ::-webkit-scrollbar{ width:10px; height:10px; } ::-webkit-scrollbar-track{ background:transparent; } ::-webkit-scrollbar-thumb{ background:rgba(138,131,120,.5); border:2px solid transparent; background-clip:content-box; border-radius:8px; } ::-webkit-scrollbar-thumb:hover{ background:rgba(138,131,120,.8); background-clip:content-box; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } } body{ margin:0; font-family:var(--font-sans); color:var(--ink); background:var(--cream); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-size:16px; line-height:1.6; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } .wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); } /* ---- Type helpers ---- */ .eyebrow{ font-family:var(--font-sans); font-size:11.5px; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--gold); display:inline-flex; align-items:center; gap:.8em; } .eyebrow::before{ content:""; width:26px; height:1px; background:var(--gold); opacity:var(--gold-alpha); } .eyebrow.center::after{ content:""; width:26px; height:1px; background:var(--gold); opacity:var(--gold-alpha); } .display{ font-family:var(--font-display); font-weight:500; line-height:1.08; letter-spacing:-.005em; font-size:clamp(38px, 5.2vw, 72px); margin:0; } .display .it{ font-style:italic; font-weight:400; } h2.section-title{ font-family:var(--font-display); font-weight:500; line-height:1.1; font-size:clamp(34px, 4.4vw, 58px); letter-spacing:-.01em; margin:.35em 0 0; } .lead{ font-size:clamp(16px,1.5vw,19px); line-height:1.7; color:var(--stone); max-width:54ch; } .on-dark .lead{ color:var(--stone-2); } /* ---- Buttons ---- */ .btn{ --bg:var(--ink); --fg:var(--cream); --bd:var(--ink); display:inline-flex; align-items:center; justify-content:center; gap:.7em; font-family:var(--font-sans); font-size:13px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; padding:18px 30px; border:1px solid var(--bd); background:var(--bg); color:var(--fg); cursor:pointer; border-radius:0; transition:transform .5s var(--ease), background .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease); position:relative; overflow:hidden; } .btn .arr{ transition:transform .5s var(--ease); } .btn:hover .arr{ transform:translateX(4px); } .btn--primary{ --bg:var(--gold); --fg:#1a160f; --bd:var(--gold); } .btn--primary:hover{ --bg:#caac7c; --bd:#caac7c; } .btn--solid-cream{ --bg:var(--cream); --fg:var(--ink); --bd:var(--cream); } .btn--solid-cream:hover{ --bg:#fffefb; --bd:#fffefb; } .btn--ghost{ --bg:transparent; --fg:var(--ink); --bd:rgba(22,19,15,.28); } .btn--ghost:hover{ --bg:var(--ink); --fg:var(--cream); --bd:var(--ink); } .on-dark .btn--ghost{ --fg:var(--cream); --bd:rgba(245,245,240,.32); } .on-dark .btn--ghost:hover{ --bg:var(--cream); --fg:var(--ink); --bd:var(--cream); } /* ---- Placeholder imagery ---- */ .ph{ position:relative; overflow:hidden; background:var(--paper-2); background-image: repeating-linear-gradient(135deg, rgba(22,19,15,.045) 0 2px, transparent 2px 11px); display:flex; align-items:flex-end; isolation:isolate; } .ph.dark{ background:#211d17; background-image: repeating-linear-gradient(135deg, rgba(245,245,240,.05) 0 2px, transparent 2px 11px); } .ph .ph-tag{ font-family:ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size:10.5px; letter-spacing:.06em; color:var(--stone); background:rgba(250,248,243,.86); backdrop-filter:blur(2px); padding:7px 11px; margin:14px; border:1px solid var(--line-light); } .ph.dark .ph-tag{ color:var(--stone-2); background:rgba(20,18,14,.72); border-color:var(--line-dark); } /* filled with a real image */ .ph.has-img{ background-size:cover; background-position:center; background-repeat:no-repeat; } .ph.has-img .ph-tag{ display:none; } /* user-fillable image slot (drag a real photo in); generated art shows as background until filled */ .media-slot{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:0; background-size:cover; background-position:center; background-repeat:no-repeat; } /* ============================================================ NAV ============================================================ */ .nav{ position:fixed; top:0; left:0; right:0; z-index:60; transition:background .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease); border-bottom:1px solid transparent; } .nav__inner{ max-width:var(--maxw); margin-inline:auto; padding:22px var(--gutter); display:flex; align-items:center; justify-content:flex-start; gap:24px; transition:padding .5s var(--ease); } .brand{ display:flex; align-items:baseline; gap:10px; color:var(--cream); transition:color .4s var(--ease); } .brand .mark{ font-family:var(--font-sans); font-weight:700; letter-spacing:.42em; font-size:16px; text-transform:uppercase; padding-left:.42em; } .brand .sub{ font-family:var(--font-sans); font-size:9.5px; letter-spacing:.34em; text-transform:uppercase; color:var(--gold); font-weight:600; } .nav__links{ display:flex; align-items:center; gap:34px; list-style:none; margin:0; padding:0; } .nav__links a{ font-size:12.5px; font-weight:500; letter-spacing:.06em; color:var(--cream); position:relative; padding:6px 0; transition:color .4s var(--ease), opacity .4s var(--ease); opacity:.82; } .nav__links a::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--gold); transition:width .45s var(--ease); } .nav__links a:hover{ opacity:1; } .nav__links a:hover::after{ width:100%; } .nav__cta{ display:flex; align-items:center; gap:18px; margin-left:auto; } .nav .btn{ padding:13px 22px; font-size:11.5px; } .nav .btn--ghost{ --fg:var(--cream); --bd:rgba(245,245,240,.32); } .nav .btn--ghost:hover{ --bg:var(--cream); --fg:var(--ink); --bd:var(--cream); } /* scrolled state -> solid cream */ .nav.scrolled{ background:rgba(250,248,243,.92); backdrop-filter:blur(14px) saturate(1.2); border-color:var(--line-light); box-shadow:0 1px 30px rgba(22,19,15,.06); } .nav.scrolled .nav__inner{ padding-top:15px; padding-bottom:15px; } .nav.scrolled .brand{ color:var(--ink); } .nav.scrolled .nav__links a{ color:var(--ink); } .nav.scrolled .btn--ghost{ --fg:var(--ink); --bd:rgba(22,19,15,.28); } .nav.scrolled .btn--ghost:hover{ --bg:var(--ink); --fg:var(--cream); } .nav__burger{ display:none; background:none; border:0; cursor:pointer; padding:8px; } .nav__burger span{ display:block; width:24px; height:1.5px; background:currentColor; margin:5px 0; transition:.4s var(--ease); } .nav.scrolled .nav__burger{ color:var(--ink); } .nav__burger{ color:var(--cream); } /* overlay-only header (logo + close) — hidden on desktop, shown in mobile menu */ .nav__overlay-top{ display:none; } .nav__close{ background:none; border:0; color:var(--cream); cursor:pointer; padding:8px; line-height:0; } .nav__close svg{ width:30px; height:30px; display:block; } /* ============================================================ HERO ============================================================ */ .hero{ background:var(--ink); color:var(--cream); position:relative; overflow:hidden; } .hero__grid{ max-width:var(--maxw); margin-inline:auto; display:grid; grid-template-columns:1.05fr .95fr; min-height:100svh; align-items:stretch; } .hero__copy{ padding:150px var(--gutter) 90px; display:flex; flex-direction:column; justify-content:center; gap:30px; max-width:680px; } .hero__copy .display{ color:var(--cream); line-height:1.12; padding-bottom:.34em; } .hero__media{ position:relative; } .hero__media .ph{ position:absolute; inset:0; height:100%; } .hero__media::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(100deg, var(--ink) 0%, rgba(22,19,15,.55) 16%, rgba(22,19,15,0) 42%); } .hero__ctas{ display:flex; gap:16px; flex-wrap:wrap; margin-top:6px; } .hero__meta{ display:flex; gap:40px; margin-top:18px; padding-top:30px; border-top:1px solid var(--line-dark); } .hero__meta .stat .n{ font-family:var(--font-display); font-size:34px; line-height:1; color:var(--cream); } .hero__meta .stat .l{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--stone-2); margin-top:8px; } .hero__scroll{ position:absolute; left:max(var(--gutter), calc(50% - var(--maxw)/2 + var(--gutter))); bottom:26px; z-index:3; font-size:10.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--stone-2); display:flex; align-items:center; gap:12px; } .hero__scroll .ln{ width:46px; height:1px; background:var(--gold); opacity:.6; transform-origin:left; animation:scrollLn 2.6s var(--ease) infinite; } @keyframes scrollLn{ 0%,100%{ transform:scaleX(.4); opacity:.3 } 50%{ transform:scaleX(1); opacity:.8 } } @media (prefers-reduced-motion: reduce){ .hero__scroll .ln{ animation:none; } } /* ============================================================ TRUST BAND ============================================================ */ .trust{ background:var(--paper); border-bottom:1px solid var(--line-light); } .trust__inner{ max-width:var(--maxw); margin-inline:auto; display:flex; align-items:center; justify-content:space-between; gap:30px; padding:34px var(--gutter); flex-wrap:wrap; } .trust__item{ display:flex; align-items:center; gap:14px; flex:1; min-width:220px; } .trust__item .ic{ width:34px; height:34px; flex:none; color:var(--gold); } .trust__item .tx b{ display:block; font-family:var(--font-display); font-size:21px; font-weight:600; line-height:1; } .trust__item .tx span{ display:block; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--stone); margin-top:6px; } .trust__sep{ width:1px; align-self:stretch; background:var(--line-light); } /* ============================================================ SECTION SCAFFOLD ============================================================ */ .section{ padding:clamp(80px,9vw,140px) 0; } .section.dark{ background:var(--ink); color:var(--cream); } .section.paper{ background:var(--paper); } .section-head{ max-width:640px; } .section-head.center{ margin-inline:auto; text-align:center; } .section-head .lead{ margin-top:22px; } .section-head.center .eyebrow{ justify-content:center; } /* ---- Treatments ---- */ .treat__head{ display:flex; align-items:flex-end; justify-content:space-between; gap:30px; flex-wrap:wrap; margin-bottom:56px; } .treat__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; } .card{ position:relative; background:var(--paper); border:1px solid var(--line-light); display:flex; flex-direction:column; overflow:hidden; transition:transform .6s var(--ease), box-shadow .6s var(--ease), border-color .6s var(--ease); } .card:hover{ transform:translateY(-6px); box-shadow:0 30px 60px -28px rgba(22,19,15,.32); border-color:rgba(184,155,110,.5); } .card__media{ aspect-ratio:4/3.2; position:relative; overflow:hidden; } .card__media .ph, .card__media .media-slot{ position:absolute; inset:0; height:100%; transition:transform 1.1s var(--ease); } .card:hover .card__media .ph, .card:hover .card__media .media-slot{ transform:scale(1.06); } .card__index{ position:absolute; top:14px; left:16px; z-index:2; font-family:var(--font-display); font-size:14px; color:var(--cream); letter-spacing:.05em; background:rgba(22,19,15,.5); backdrop-filter:blur(3px); width:34px; height:34px; display:flex; align-items:center; justify-content:center; border:1px solid rgba(245,245,240,.3); } .card__body{ padding:30px 28px 32px; display:flex; flex-direction:column; flex:1; } .card__cat{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--gold); } .card__title{ font-family:var(--font-display); font-size:27px; font-weight:600; line-height:1.1; margin:12px 0 0; } .card__desc{ font-size:14.5px; color:var(--stone); line-height:1.65; margin:14px 0 0; } .card__foot{ margin-top:auto; padding-top:24px; display:flex; align-items:flex-end; justify-content:space-between; gap:16px; } .card__price .from{ display:block; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--stone); } .card__price .amt{ font-family:var(--font-display); font-size:26px; font-weight:600; line-height:1; margin-top:5px; } .card__link{ font-size:12px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; display:inline-flex; align-items:center; gap:8px; color:var(--ink); border-bottom:1px solid transparent; padding-bottom:4px; transition:border-color .4s var(--ease), gap .4s var(--ease); } .card__link:hover{ border-color:var(--gold); gap:12px; } .card__link .arr{ color:var(--gold); } /* hover reveal: subtle gold rule grows under title */ .card__title-wrap{ position:relative; } .card__title-wrap::after{ content:""; position:absolute; left:0; bottom:-12px; height:1px; width:34px; background:var(--gold); opacity:var(--gold-alpha); transition:width .6s var(--ease); } .card:hover .card__title-wrap::after{ width:64px; } /* ============================================================ WHY CHOOSE US ============================================================ */ .why__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,7vw,100px); align-items:center; } .why__copy .section-title{ color:var(--cream); } .why__copy p{ color:var(--stone-2); font-size:clamp(16px,1.5vw,18.5px); line-height:1.8; margin:26px 0 0; max-width:50ch; } .why__sign{ margin-top:34px; display:flex; align-items:center; gap:16px; } .why__sign .nm{ font-family:var(--font-display); font-style:italic; font-size:23px; color:var(--cream); } .why__sign .rl{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--stone-2); } .benefits{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; } .benefit{ display:flex; gap:24px; padding:30px 4px; border-top:1px solid var(--line-dark); transition:padding-left .5s var(--ease); } .benefit:last-child{ border-bottom:1px solid var(--line-dark); } .benefit:hover{ padding-left:14px; } .benefit .ic{ width:38px; height:38px; flex:none; color:var(--gold); } .benefit h4{ font-family:var(--font-display); font-size:23px; font-weight:600; margin:0; color:var(--cream); } .benefit p{ margin:8px 0 0; font-size:14.5px; color:var(--stone-2); line-height:1.6; max-width:42ch; } /* ============================================================ BEFORE / AFTER ============================================================ */ .ba__grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(40px,6vw,80px); align-items:center; } .ba__copy .lead{ margin-top:22px; } .ba__copy .note{ margin-top:30px; display:flex; gap:14px; align-items:flex-start; padding-top:24px; border-top:1px solid var(--line-light); } .ba__copy .note .ic{ width:26px;height:26px;color:var(--gold);flex:none;margin-top:2px; } .ba__copy .note p{ margin:0; font-size:13px; color:var(--stone); line-height:1.6; } .ba{ position:relative; aspect-ratio:4/3; overflow:hidden; border:1px solid var(--line-light); box-shadow:0 40px 80px -40px rgba(22,19,15,.4); cursor:default; } .ba__layer{ position:absolute; inset:0; } .ba__layer .ph, .ba__layer .media-slot{ position:absolute; inset:0; height:100%; width:100%; } /* same portrait in both layers — "before" reads duller/cooler, "after" fresher, so dragging the slider shows a believable, natural improvement on one face */ .ba__before .media-slot{ filter:saturate(.72) brightness(.94) contrast(.96) sepia(.05); } .ba__after .media-slot{ filter:saturate(1.06) brightness(1.03); } .ba__after{ clip-path:inset(0 0 0 var(--split, 50%)); } .ba__tag{ position:absolute; top:18px; z-index:4; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:600; padding:8px 14px; background:rgba(22,19,15,.62); color:var(--cream); backdrop-filter:blur(3px); } .ba__tag.before{ left:18px; } .ba__tag.after{ right:18px; } .ba__handle{ position:absolute; top:0; bottom:0; left:var(--split,50%); width:2px; background:var(--cream); z-index:5; transform:translateX(-1px); touch-action:none; } .ba__handle::before{ content:""; position:absolute; top:0; bottom:0; left:50%; width:40px; transform:translateX(-50%); cursor:ew-resize; } .ba__knob{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:54px; height:54px; border-radius:50%; background:var(--cream); display:flex; align-items:center; justify-content:center; gap:5px; box-shadow:0 8px 24px rgba(22,19,15,.35); color:var(--ink); cursor:ew-resize; } .ba__knob svg{ width:9px; height:14px; } .ba__range{ position:absolute; inset:0; z-index:6; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; pointer-events:none; } /* ============================================================ TESTIMONIALS ============================================================ */ .tst__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:60px; } .tst{ margin:0; background:var(--ink-2); border:1px solid var(--line-dark); padding:38px 34px; display:flex; flex-direction:column; } .tst .stars{ display:flex; gap:4px; color:var(--gold); margin-bottom:22px; } .tst .stars svg{ width:16px; height:16px; } .tst blockquote{ margin:0; font-family:var(--font-display); font-size:22px; line-height:1.4; color:var(--cream); font-weight:500; flex:1; } .tst .who{ margin-top:30px; padding-top:24px; border-top:1px solid var(--line-dark); display:flex; align-items:center; gap:14px; } .tst .ava{ width:46px; height:46px; border-radius:50%; flex:none; background:var(--ink-3); display:flex;align-items:center;justify-content:center; font-family:var(--font-display); font-size:18px; color:var(--gold); border:1px solid var(--line-dark); } .tst .who b{ display:block; font-size:14.5px; font-weight:600; color:var(--cream); } .tst .who div span{ display:block; font-size:11.5px; letter-spacing:.08em; color:var(--stone-2); margin-top:3px; } /* ============================================================ CONTACT ============================================================ */ .contact__grid{ display:grid; grid-template-columns:1fr 1.04fr; gap:clamp(40px,6vw,84px); align-items:start; } .contact__info .lead{ margin-top:22px; } .contact__list{ list-style:none; margin:36px 0 0; padding:0; } .contact__list li{ display:flex; gap:18px; align-items:flex-start; padding:20px 2px; border-top:1px solid var(--line-light); } .contact__list li:last-child{ border-bottom:1px solid var(--line-light); } .contact__list .ic{ width:28px; height:28px; flex:none; color:var(--gold); margin-top:2px; } .contact__list .k{ font-size:10.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--stone); } .contact__list .v{ font-family:var(--font-display); font-size:21px; color:var(--ink); margin-top:5px; line-height:1.25; } .contact__map{ position:relative; margin-top:34px; aspect-ratio:16/6.4; border:1px solid var(--line-light); overflow:hidden; } .contact__map iframe{ width:100%; height:100%; border:0; display:block; } .contact__form-wrap{ position:relative; } .contact__form{ background:var(--cream); border:1px solid var(--line-light); padding:clamp(28px,3.6vw,46px); box-shadow:0 36px 80px -48px rgba(22,19,15,.32); } .contact__form-title{ font-family:var(--font-display); font-size:30px; font-weight:600; margin:0; line-height:1.05; } .contact__form-sub{ font-size:14px; color:var(--stone); margin:8px 0 28px; } .field-row{ display:grid; grid-template-columns:1fr 1fr; gap:18px; } .field{ display:flex; flex-direction:column; gap:9px; margin-bottom:20px; } .field label{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--stone); font-weight:600; } .field label .opt{ letter-spacing:.04em; text-transform:none; font-weight:500; opacity:.7; } .field input, .field select, .field textarea{ font-family:var(--font-sans); font-size:15px; color:var(--ink); background:var(--paper); border:1px solid var(--line-light); border-radius:0; padding:14px 15px; width:100%; transition:border-color .3s var(--ease), box-shadow .3s var(--ease); -webkit-appearance:none; appearance:none; } .field select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%238A8378' stroke-width='1.3'%3E%3Cpath d='M1 1.5L6 6l5-4.5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:40px; cursor:pointer; } .field textarea{ resize:vertical; min-height:104px; line-height:1.55; } .field input::placeholder, .field textarea::placeholder{ color:var(--stone-2); } .field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(184,155,110,.16); } .field.invalid input, .field.invalid select, .field.invalid textarea{ border-color:#b1564d; box-shadow:0 0 0 3px rgba(177,86,77,.12); } .field .err{ font-size:11.5px; color:#a4493f; display:none; letter-spacing:.01em; } .field.invalid .err{ display:block; } .contact__form .btn{ width:100%; margin-top:6px; } .form__note{ font-size:11.5px; color:var(--stone); margin:16px 0 0; text-align:center; line-height:1.5; } .form__success{ background:var(--cream); border:1px solid var(--line-light); padding:clamp(40px,5vw,60px) clamp(28px,4vw,46px); text-align:center; box-shadow:0 36px 80px -48px rgba(22,19,15,.32); } .form__success-mark{ width:64px; height:64px; margin:0 auto 22px; color:var(--gold); } .form__success-mark svg{ width:100%; height:100%; } .form__success h3{ font-family:var(--font-display); font-size:32px; font-weight:600; margin:0; } .form__success p{ color:var(--stone); font-size:15px; margin:14px auto 28px; max-width:36ch; line-height:1.6; } /* ============================================================ FINAL CTA ============================================================ */ .final{ background:var(--ink); padding:clamp(70px,8vw,120px) 0; } .final__card{ position:relative; background: radial-gradient(120% 140% at 100% 0%, rgba(184,155,110,.16), transparent 55%), var(--ink-2); border:1px solid var(--line-dark); overflow:hidden; padding:clamp(50px,7vw,96px) var(--gutter); text-align:center; } .final__card::before{ content:""; position:absolute; inset:14px; border:1px solid var(--gold); opacity:calc(var(--gold-alpha) * .55); pointer-events:none; } .final__card .eyebrow{ justify-content:center; } .final__card h2{ font-family:var(--font-display); font-weight:500; color:var(--cream); font-size:clamp(34px,5vw,64px); line-height:1.05; margin:20px auto 0; max-width:16ch; letter-spacing:-.01em; } .final__card p{ color:var(--stone-2); margin:24px auto 0; max-width:46ch; font-size:17px; } .final__card .btn{ margin-top:40px; } .final__card .micro{ margin-top:22px; font-size:12px; letter-spacing:.08em; color:var(--stone-2); } /* ============================================================ FOOTER ============================================================ */ .footer{ background:#100D0A; color:var(--cream); padding:84px 0 40px; } .footer__top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:56px; border-bottom:1px solid var(--line-dark); } .footer__brand .mark{ font-family:var(--font-sans); font-weight:700; letter-spacing:.42em; font-size:18px; text-transform:uppercase; } .footer__brand .sub{ font-size:9.5px; letter-spacing:.34em; text-transform:uppercase; color:var(--gold); font-weight:600; margin-top:8px; } .footer__brand p{ color:var(--stone-2); font-size:14px; line-height:1.7; margin:22px 0 0; max-width:34ch; } .footer__col h5{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin:0 0 20px; font-weight:600; } .footer__col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px; } .footer__col a, .footer__col li{ font-size:14px; color:var(--stone-2); transition:color .35s var(--ease); } .footer__col a:hover{ color:var(--cream); } .footer__hours .row{ display:flex; justify-content:space-between; gap:16px; font-size:13.5px; color:var(--stone-2); padding:7px 0; border-bottom:1px solid var(--line-dark); } .footer__hours .row b{ color:var(--cream); font-weight:500; } .footer__bottom{ display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:30px; flex-wrap:wrap; } .footer__bottom span{ font-size:12px; color:var(--stone); letter-spacing:.04em; } .footer__social{ display:flex; gap:10px; } .footer__social a{ width:38px; height:38px; border:1px solid var(--line-dark); display:flex; align-items:center; justify-content:center; color:var(--stone-2); transition:.4s var(--ease); } .footer__social a:hover{ color:var(--ink); background:var(--gold); border-color:var(--gold); } .footer__social svg{ width:16px; height:16px; } /* ============================================================ SCROLL ENTRANCE REVEALS (progressive enhancement) Hidden state applies ONLY under html.reveal-ready, which JS adds on load. No JS or reduced-motion -> content stays fully visible. ============================================================ */ .reveal{ opacity:1; transform:none; } @media (prefers-reduced-motion: no-preference){ html.reveal-ready .reveal{ opacity:0; transform:translateY(22px); transition:opacity .8s var(--ease), transform .8s var(--ease); will-change:opacity, transform; } html.reveal-ready .reveal.in{ opacity:1; transform:none; } /* explicit per-element stagger */ html.reveal-ready .reveal.d1{ transition-delay:.09s; } html.reveal-ready .reveal.d2{ transition-delay:.18s; } html.reveal-ready .reveal.d3{ transition-delay:.27s; } /* grid stagger (cards / testimonials enter in sequence) */ html.reveal-ready .treat__grid .reveal:nth-child(2), html.reveal-ready .tst__grid .reveal:nth-child(2){ transition-delay:.1s; } html.reveal-ready .treat__grid .reveal:nth-child(3), html.reveal-ready .tst__grid .reveal:nth-child(3){ transition-delay:.2s; } } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1040px){ .hero__grid{ grid-template-columns:1fr; min-height:auto; } .hero__media{ min-height:60vh; order:-1; } .hero__media::after{ background:linear-gradient(180deg, rgba(22,19,15,.4), rgba(22,19,15,0) 40%); } .hero__copy{ padding:130px var(--gutter) 80px; } .why__grid{ grid-template-columns:1fr; } .ba__grid{ grid-template-columns:1fr; } .contact__grid{ grid-template-columns:1fr; } .contact__map{ aspect-ratio:16/7; } .footer__top{ grid-template-columns:1fr 1fr; } .footer__brand{ grid-column:1 / -1; } } @media (max-width:820px){ .nav__links, .nav__cta .btn{ display:none; } .nav__burger{ display:block; } .treat__grid{ grid-template-columns:1fr; max-width:100%; } .tst__grid{ grid-template-columns:1fr; max-width:520px; margin-inline:auto; } /* below 820: "Nasze flagowe zabiegi" + "Standard Aura" run full-width (100%) */ .treat__head{ display:block; } .section-head{ max-width:100%; } .treat__head .lead{ max-width:100%; } .why__copy p{ max-width:100%; } .trust__sep{ display:none; } .trust__item{ min-width:46%; } .hero__meta{ gap:26px; flex-wrap:wrap; } .field-row{ grid-template-columns:1fr; gap:0; } /* mobile menu overlay */ .nav__links.open{ display:flex; position:fixed; inset:0; top:0; z-index:70; flex-direction:column; align-items:center; justify-content:center; gap:26px; background:rgba(20,18,14,.97); backdrop-filter:blur(8px); } /* when the menu is open, strip the nav's backdrop-filter/background: backdrop-filter makes .nav the containing block for position:fixed, which would trap the overlay inside the 64px bar instead of the viewport */ .nav.menu-open{ background:transparent; backdrop-filter:none; box-shadow:none; border-color:transparent; } .nav__links.open a:not(.brand){ color:var(--cream); font-size:30px; font-family:var(--font-display); opacity:1; letter-spacing:.01em; } .nav__links.open a:not(.brand)::after{ display:none; } /* logo + close pinned to the top of the overlay */ .nav__links.open .nav__overlay-top{ display:flex; position:absolute; top:0; left:0; right:0; padding:20px var(--gutter); align-items:center; justify-content:space-between; } .nav__links.open .brand{ color:var(--cream); } .nav__links.open .brand .mark{ color:var(--cream); font-size:18px; } .nav__links.open .brand .sub{ color:var(--gold); } /* keep the CTA looking like a button, not a giant menu link */ .nav__links.open .m-cta{ display:inline-flex; margin-top:14px; font-family:var(--font-sans); font-size:13px; letter-spacing:.12em; } } @media (min-width:821px){ .nav__links .m-cta{ display:none; } } @media (max-width:520px){ .footer__top{ grid-template-columns:1fr; } .trust__item{ min-width:100%; } .hero__ctas .btn{ flex:1; } } /* ---- Tweaks island reset ---- */ #tweaks-root{ position:fixed; z-index:9000; }