/* Alpha Mobil — digital business card, production build. Tokens below are copied verbatim from ../tokens/*.css and ../styles.css (the design-system source of truth) — only the values this one page actually uses are included. Do not hand-edit values here without also checking the source design system for drift. */ :root{ /* ink / graphite */ --white:#FFFFFF; --ink-050:#F8F9F9; --ink-100:#F1F2F3; --ink-200:#E2E4E6; --ink-300:#C4C8CB; --ink-400:#979CA1; --ink-500:#6B7176; --ink-800:#212427; --ink-900:#17191B; --ink-950:#0D0F10; /* gold — the single accent */ --gold-400:#FFD000; --gold-500:#FFC000; --gold-600:#E0A200; --gold-700:#B08000; /* metal — the logo mark's chrome ramp */ --metal-1:#DADADA;--metal-2:#999EA3;--metal-3:#E9E9EA;--metal-4:#4C5354;--metal-5:#E0E3E7;--metal-6:#BBBDBF; --gradient-metal:linear-gradient(180deg,var(--metal-1) 0%,var(--metal-2) 20.4%,var(--metal-3) 42.7%,var(--metal-4) 72.6%,var(--metal-5) 89.9%,var(--metal-6) 100%); --gradient-band:linear-gradient(90deg,#B08000 0%,#E0A200 34%,#FFC000 62%,#FFE9A8 86%,#FFFFFF 100%); --scrim-bottom:linear-gradient(180deg,rgba(13,15,16,0) 0%,rgba(13,15,16,.35) 45%,rgba(13,15,16,.88) 100%); --glow-gold:0 0 28px rgba(255,192,0,.34); /* semantic — light surface (default) */ --bg-page:var(--white); --text-primary:var(--ink-950); --text-inverse:var(--white); --accent:var(--gold-500); --accent-hover:var(--gold-400); --accent-press:var(--gold-600); --accent-ink:var(--gold-700); --border-hairline:var(--ink-200); --border-strong:var(--ink-950); --focus-ring:var(--gold-500); /* type */ --font-display:"Onest","Helvetica Neue",Arial,sans-serif; --font-text:"Onest","Helvetica Neue",Arial,sans-serif; --fw-regular:400;--fw-semibold:600;--fw-bold:700; --fs-h1:clamp(34px,3.6vw,56px); --fs-h4:20px; --fs-body:17px; --fs-body-sm:15px; --fs-caption:13px; --lh-heading:1.06;--lh-snug:1.25;--lh-body:1.55; --ls-heading:-0.02em;--ls-label:0.08em; --type-h1:var(--fw-bold) var(--fs-h1)/var(--lh-heading) var(--font-display); --type-h4:var(--fw-semibold) var(--fs-h4)/var(--lh-snug) var(--font-display); --type-body:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-text); --type-body-sm:var(--fw-regular) var(--fs-body-sm)/var(--lh-body) var(--font-text); --type-label:var(--fw-bold) var(--fs-caption)/1.2 var(--font-display); /* spacing */ --space-3:12px;--space-6:24px;--space-8:32px;--space-10:40px; /* radius */ --radius-xs:2px; --stripe-height:6px; /* motion */ --dur-fast:140ms;--dur-base:200ms; --ease-standard:cubic-bezier(.2,0,0,1); --transition-control:background-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),opacity var(--dur-fast) var(--ease-standard); } /* dark surface — applied to any container, not just */ .alpha-dark{ --bg-page:var(--ink-950); --text-primary:var(--white); --border-hairline:rgba(255,255,255,.12); --border-strong:var(--white); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--ink-050); color:var(--text-primary); font:var(--type-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } p{margin:0} img{display:block;max-width:100%} ::selection{background:var(--gold-500);color:var(--ink-950)} a{color:var(--text-primary);text-decoration:none;border-bottom:1px solid var(--accent);transition:var(--transition-control)} a:hover{border-bottom-color:var(--accent-press)} a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px} /* ------------------------------------------------------------------ */ /* page shell + card */ /* ------------------------------------------------------------------ */ .page{background:var(--ink-050);min-height:100vh;display:flex;justify-content:center} .card{ width:100%;max-width:560px;background:var(--white); box-shadow:0 0 0 1px var(--ink-200); display:flex;flex-direction:column;overflow:hidden; } /* ------------------------------------------------------------------ */ /* shared bits: eyebrow, gold band, divider, icon, buttons */ /* ------------------------------------------------------------------ */ .eyebrow{display:flex;align-items:center;gap:12px;margin-bottom:28px} .eyebrow__label{font:var(--type-label);font-size:12px;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--accent-ink)} .eyebrow--gold .eyebrow__label{color:var(--gold-500)} .gold-line{width:26px;height:2px;background:var(--gold-500);flex:none;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-standard) var(--d,80ms)} .stagger-in .gold-line{transform:scaleX(1)} .gold-band{display:block;flex:none;width:100%;height:var(--stripe-height);background:var(--gradient-band)} .gold-band--glow{box-shadow:var(--glow-gold)} .divider{display:block;flex:none;width:100%;height:1px;background:var(--border-hairline)} .icon{width:16px;height:16px;flex:none} .icon--lg{width:18px;height:18px} .icon--xl{width:28px;height:28px} .icon--chip{width:19px;height:19px;color:var(--ink-950)} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:var(--font-display);font-weight:var(--fw-bold);text-transform:uppercase; letter-spacing:var(--ls-label);border-radius:var(--radius-xs);border:1px solid transparent; cursor:pointer;white-space:nowrap;text-decoration:none; transition:var(--transition-control),transform var(--dur-base) var(--ease-standard); -webkit-tap-highlight-color:transparent; } .btn:active{transform:scale(.98)} @media (hover:hover){.btn:hover{transform:translateY(-2px)}} @media (prefers-reduced-motion: reduce){.btn{transition:background-color var(--dur-fast) var(--ease-standard),color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard)}} .btn--sm{font-size:11px;padding:9px 16px;min-height:34px} .btn--md{font-size:13px;padding:13px 24px;min-height:46px} .btn--lg{font-size:15px;padding:18px 34px;min-height:58px} .btn--block{width:100%} .btn--primary{background:var(--accent);color:var(--ink-950)} .btn--primary:hover{background:var(--accent-hover)} .btn--primary:active{background:var(--accent-press)} .btn--outline{background:transparent;color:var(--text-primary);border-color:var(--border-strong)} .btn--outline:hover{background:var(--ink-950);color:var(--white)} .btn--ghost{background:transparent;color:var(--text-primary)} .btn--ghost:hover{color:var(--accent-ink)} .logo-lockup{display:block;width:auto;flex:none} /* ------------------------------------------------------------------ */ /* scroll-reveal / stagger motion */ /* ------------------------------------------------------------------ */ /* driven by an IntersectionObserver (js/main.js) toggling .stagger-in — CSS owns the actual opacity/transform values so reveal state can never get stuck out of sync with scroll position (see js/main.js for why the old inline-style + rAF approach could freeze an element invisible) */ [data-reveal]{will-change:transform,opacity;opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease-standard),transform .5s var(--ease-standard)} [data-reveal].stagger-in{opacity:1;transform:translateY(0)} .stagger-item{opacity:0;transform:translateY(18px) scale(.97);transition:opacity .4s var(--ease-standard) var(--d,0ms),transform .4s var(--ease-standard) var(--d,0ms)} .stagger-in .stagger-item{opacity:1;transform:translateY(0) scale(1)} .img-reveal{transform:scale(1.02);transition:transform .7s var(--ease-standard)} .stagger-in .img-reveal{transform:scale(1)} @keyframes heroReveal{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}} @keyframes heroLogoReveal{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}} .hero-logo-reveal{animation:heroLogoReveal 1s cubic-bezier(.2,0,0,1) .1s both} .hero-reveal{animation:heroReveal .9s cubic-bezier(.2,0,0,1) .15s both} @media (prefers-reduced-motion: reduce){ .stagger-item,.gold-line,.img-reveal{opacity:1!important;transform:none!important;transition:none!important} .btn{transform:none!important} [data-reveal]{transform:none!important;opacity:1!important} .hero-reveal,.hero-logo-reveal{animation:none!important;opacity:1!important;transform:none!important} } /* ------------------------------------------------------------------ */ /* hero */ /* ------------------------------------------------------------------ */ .hero{position:relative} /* width/height HTML attributes on the exist only to avoid layout shift before it loads; explicit height:auto here is required so their height="1166" (a literal pixel value in the presentational-hints cascade origin) doesn't win over the intended aspect-ratio box and balloon the element to 1166px tall, letterboxing the photo far down with empty --ink-950 above it */ .hero__img{display:block;width:100%;height:auto;aspect-ratio:1800/1166;object-fit:contain;background:var(--ink-950)} .hero__scrim{position:absolute;inset:0;background:var(--scrim-bottom)} .hero__logo-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none} .hero__logo-wrap .logo-lockup{height:64px} .hero__caption{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:14px;padding:clamp(24px,6vw,40px) clamp(20px,5vw,32px) 30px} .hero__title{font:var(--type-h4);color:var(--white);margin:0;max-width:22ch;text-transform:uppercase;letter-spacing:var(--ls-heading)} .hero__band{position:absolute;left:0;right:0;bottom:0} /* ------------------------------------------------------------------ */ /* contacts */ /* ------------------------------------------------------------------ */ /* A real photo here (previous version) read as grey/muddy on real phone screens and never gave the text reliable contrast no matter how far the opacity was pushed down. Replaced with a branded dark surface instead: .alpha-dark (existing token set, same one .booking/.footer already use) for guaranteed-readable text colours, a soft graphite gradient so it isn't flat, a large low-opacity Alpha mark watermark, and a slow gold glow drift — no photography. */ .contacts{padding:var(--space-10) clamp(20px,5vw,32px) var(--space-8);position:relative;overflow:hidden} .contacts.alpha-dark{background:radial-gradient(130% 100% at 18% -10%,var(--ink-900) 0%,var(--ink-950) 62%)} /* the Alpha mark (///Λ), tinted via mask so the flat SVG can be painted at a low, even opacity instead of relying on a pre-tinted image asset */ .contacts__mark{ position:absolute;right:-6%;bottom:-14%;width:78%;max-width:440px; aspect-ratio:226.773/83.176; background:var(--white);opacity:.05; -webkit-mask:url(../img/alpha-mark.svg) no-repeat center / contain; mask:url(../img/alpha-mark.svg) no-repeat center / contain; pointer-events:none; } /* soft gold light that drifts very slowly — a wash, not a highlight; oversized (inset:-25%) so the drift never reveals a hard edge */ .contacts__glow{ position:absolute;inset:-25%;pointer-events:none; background:radial-gradient(42% 34% at 28% 22%,rgba(255,192,0,.16),transparent 70%); animation:contactsGlow 24s var(--ease-standard) infinite alternate; will-change:transform; } @keyframes contactsGlow{from{transform:translate(0,0)}to{transform:translate(7%,9%)}} @media (prefers-reduced-motion:reduce){ .contacts__glow{animation:none} } .contacts__content{position:relative;z-index:1} .contacts__list{display:flex;flex-direction:column} .contact-item{padding-bottom:26px} .contact-item + .divider + .contact-item{padding-bottom:0;padding-top:26px} .contact-item__label{display:block;font:var(--type-label);font-size:11px;color:var(--ink-300);text-transform:uppercase;letter-spacing:var(--ls-label)} .contact-item__number{display:block;font:var(--type-h1);letter-spacing:var(--ls-heading);color:var(--text-primary);text-decoration:none;margin:8px 0 18px} /* ------------------------------------------------------------------ */ /* booking (dark) */ /* ------------------------------------------------------------------ */ .booking{position:relative;overflow:hidden;padding:var(--space-8) clamp(20px,5vw,32px) var(--space-10)} .booking__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(.25) brightness(.75)} .booking__overlay{position:absolute;inset:0;background:rgba(13,15,16,.66)} .booking__band-top{position:absolute;left:0;right:0;top:0;z-index:2} .booking__content{position:relative;z-index:1} .booking__content .eyebrow{margin:16px 0 28px} .booking-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;border-bottom:1px solid rgba(255,255,255,.18)} .booking-row:last-child{border-bottom:none;padding:18px 0 4px} .booking-row__meta{display:flex;align-items:center;gap:14px;min-width:0} .booking-row__icon{width:42px;height:42px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--gradient-metal)} .booking-row__label{display:block;font:var(--type-label);font-size:11px;color:var(--ink-300);text-transform:uppercase;letter-spacing:var(--ls-label)} .booking-row__value{display:block;font:var(--type-h4);color:var(--white);white-space:nowrap} /* At 375-430px the row (icon chip + label/value column + "Записаться" button) doesn't leave enough width for "+7 965 100-44-55" at the h4 size without an internal line-break; shrink it a step so it always stays on one line instead of wrapping mid-number. */ @media (max-width:430px){ .booking-row__value{font-size:16px} } @media (max-width:340px){ .booking-row__value{font-size:14px} } /* ------------------------------------------------------------------ */ /* find us */ /* ------------------------------------------------------------------ */ .find-us-heading{padding:var(--space-10) clamp(20px,5vw,32px) 0} .find-us{padding:0 clamp(20px,5vw,32px) var(--space-10)} .map{ position:relative;border:1px solid var(--ink-200);overflow:hidden;width:100%; height:clamp(320px,60vw,460px); background:repeating-linear-gradient(135deg,var(--ink-100) 0 12px,var(--ink-050) 12px 24px); } .map__placeholder{ position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px; color:var(--ink-400); transition:opacity var(--dur-base) var(--ease-standard); } .map__placeholder.is-hidden{opacity:0;pointer-events:none} .map__placeholder-label{font:var(--type-label);font-size:12px;text-transform:uppercase;letter-spacing:var(--ls-label)} .map__dot{position:absolute;left:50%;top:38%;width:10px;height:10px;border-radius:50%;background:var(--gold-500);transform:translate(-50%,-50%);box-shadow:0 0 0 6px rgba(255,192,0,.18);pointer-events:none} .map__embed{position:absolute;inset:0;width:100%;height:100%;overflow:hidden} .map__embed:empty{display:none} /* the Yandex constructor script injects its own wrapper/iframe with fixed pixel width/height attributes — force them to fill the responsive box */ .map__embed > div,.map__embed ymaps{position:absolute!important;inset:0!important;width:100%!important;height:100%!important} .map__embed iframe{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;border:0} .address{background:rgba(23,25,27,.88);padding:22px clamp(20px,5vw,28px)} .address__title{font:var(--type-h4);color:var(--white);text-transform:uppercase;letter-spacing:var(--ls-heading)} .address__text{font:var(--type-body-sm);color:var(--ink-300);margin:6px 0 18px} /* ------------------------------------------------------------------ */ /* footer */ /* ------------------------------------------------------------------ */ .footer-brand{padding:40px clamp(20px,5vw,32px) 32px;display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;background-color:#212427} .footer-brand .logo-lockup{height:42px} .footer-brand__tag{font:var(--type-body-sm);color:var(--ink-300);text-transform:uppercase;letter-spacing:var(--ls-label)} .footer-link{padding:var(--space-8) clamp(20px,5vw,32px) var(--space-10);display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;background-color:#212427} .footer-link__text{font:var(--type-body);color:var(--white)}