/* ============================================================ /laser-epilaciya — paid-traffic landing: laser hair removal package constructor. Standalone page (own minimal top bar and foot bar, no site header/footer). Palette, fonts and shadows come from the tokens in styles.css; the geometry (pill buttons, 18–32px cards, thin Montserrat display type) is the landing's own. ============================================================ */ .ep { /* Near-black ground for the hero, the sticky summary bar and the foot bar. Derived from --graphite so it stays in the site's warm-brown family. */ --ep-dark: color-mix(in srgb, var(--graphite) 74%, #000); --ep-line: var(--cream-2); --ep-accent: var(--sage); /* Selection colour, taken from the design (Services List.dc.html). Deliberately off the site's taupe so a picked zone/area reads instantly. Hovers stay taupe — hover is not selection. */ --ep-pick: #b4566e; --ep-cta: var(--red); --ep-cta-h: #bd2f2c; /* matches .lz-btn--red:hover in styles.css */ --ep-warm: var(--gold-soft); --ep-radius: clamp(20px, 3vw, 32px); font-family: var(--sans); color: var(--graphite); background: var(--cream); position: relative; overflow-x: clip; } /* styles.css sets overflow-x:hidden on body site-wide; on this page that would break the sticky summary bar, so clip horizontally instead. */ body:has(.ep) { overflow-x: clip; } /* The footer is light, and head.php ships a white theme-color, so paint paper: the iOS rubber-band overscroll then matches the footer at the bottom and the browser chrome at the top. */ html:has(.ep) { background-color: var(--paper); } body:has(.ep) { background: var(--cream); } .ep [hidden] { display: none !important; } /* ---------- shared type & buttons ---------- */ .ep-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ep-accent); } .ep-h2 { margin: 0; font-weight: 300; font-size: clamp(28px, 4.4vw, 52px); line-height: 1.1; letter-spacing: -.02em; text-wrap: balance; } .ep-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--sans); font-weight: 600; font-size: 16px; line-height: 1; min-height: 56px; padding: 8px 30px; border-radius: 4px; border: none; cursor: pointer; text-align: center; transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .3s var(--ease); } .ep-btn--cta { background: var(--ep-cta); color: #fbfaf6; } @media (hover: hover) { .ep-btn--cta:hover { background: var(--ep-cta-h); transform: translateY(-2px); } } .ep-btn--ghost { background: var(--paper); color: var(--ink-soft); border: 1px solid var(--line); } @media (hover: hover) { .ep-btn--ghost:hover { border-color: var(--ep-accent); color: var(--graphite); } } .ep-btn--wide { width: 100%; } /* ============================================================ HERO ============================================================ */ .ep-hero { position: relative; min-height: min(760px, 100svh); background: var(--ep-dark); overflow: hidden; } .ep-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; } .ep-hero__scrim { position: absolute; inset: 0; display: block; background: linear-gradient(180deg, color-mix(in srgb, var(--ep-dark) 74%, transparent) 0%, color-mix(in srgb, var(--ep-dark) 34%, transparent) 42%, color-mix(in srgb, var(--ep-dark) 94%, transparent) 100%); } .ep-hero__inner { position: relative; min-height: min(760px, 100svh); display: flex; flex-direction: column; justify-content: space-between; gap: clamp(32px, 5vw, 48px); padding: clamp(18px, 3vw, 30px) clamp(18px, 4vw, 56px) clamp(28px, 4vw, 44px); } /* Phones: no global dimming — the photo stays at full brightness and only two gradients carry the text. Bottom one sits under the badge/h1/lede/CTA stack, a short top one keeps the white logo and phone legible over the light wall. Breakpoint must match the hero source and the preload in head.php. */ @media (max-width: 720px) { .ep-hero__bg { opacity: 1; } .ep-hero__scrim { background: linear-gradient(to bottom, color-mix(in srgb, var(--ep-dark) 58%, transparent) 0%, transparent 100%) top / 100% 22% no-repeat, linear-gradient(to top, color-mix(in srgb, var(--ep-dark) 94%, transparent) 0%, color-mix(in srgb, var(--ep-dark) 84%, transparent) 30%, color-mix(in srgb, var(--ep-dark) 50%, transparent) 68%, transparent 100%) bottom / 100% 66% no-repeat; } } .ep-topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .ep-topbar__logo { display: block; } /* logo.svg is dark brown artwork — flatten it to pure white for the dark hero */ .ep-topbar__logo img { height: 42px; width: auto; display: block; filter: brightness(0) invert(1); } .ep-topbar__tel { /* No frame — plain text. Vertical padding stays for a 44px tap target; the horizontal padding is dropped so the number lines up with the bar's edge, mirroring the logo on the left. */ padding: 14px 0; color: #fff; font-weight: 600; font-size: 15px; line-height: 1; white-space: nowrap; transition: opacity .25s var(--ease); } @media (hover: hover) { .ep-topbar__tel:hover { opacity: .72; } } /* No column gap: each line in the hero stack carries its own bottom margin, so the badge, the H1, the lede and the button sit at their own distances. Same values at every width. */ .ep-hero__col { display: flex; flex-direction: column; align-items: center; gap: 0; text-align: center; } /* Offer badge above the H1. The sentence rides bare on the photo like the rest of the hero copy; only the number sits in the red chip, the same one the price pill uses in the panel, so the discount reads as one object in both places. */ .ep-hero__badge { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; font-size: 13px; line-height: 1; color: #fff; white-space: nowrap; margin-bottom: 8px; } .ep-hero__badge i { font-style: normal; font-weight: 600; font-size: 13px; padding: 5px 8px; border-radius: 4px; background: var(--ep-cta); color: #fbfaf6; } .ep-hero__h1 { margin: 0 0 12px; font-weight: 300; font-size: clamp(34px, 6.2vw, 88px); line-height: 1.06; letter-spacing: -.03em; color: #fff; max-width: 19ch; text-wrap: balance; } .ep-hero__h1 b { font-weight: 600; } .ep-hero__lede { margin: 0 0 16px; font-size: clamp(15px, 1.7vw, 20px); line-height: 1.55; color: rgba(255,255,255,.8); max-width: 52ch; text-wrap: pretty; } .ep-hero__cta { display: inline-flex; align-items: center; gap: 10px; min-height: 56px; margin-bottom: 16px; padding: 8px 40px; border-radius: 4px; background: var(--ep-cta); color: #fbfaf6; font-weight: 600; font-size: 17px; line-height: 1; box-shadow: 0 12px 30px rgba(214,58,54,.32); transition: background .25s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); } @media (hover: hover) { .ep-hero__cta:hover { background: var(--ep-cta-h); transform: translateY(-2px); box-shadow: 0 18px 38px rgba(214,58,54,.4); } } .ep-hero__cta span { font-size: 18px; } /* ============================================================ CONSTRUCTOR ============================================================ */ .ep-section { padding: clamp(48px, 7vw, 88px) clamp(14px, 4vw, 72px) clamp(64px, 9vw, 110px); display: flex; flex-direction: column; align-items: center; gap: clamp(24px, 3vw, 36px); scroll-margin-top: 0; } .ep-sechead { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; } .ep-sechead .ep-h2 em { font-style: normal; color: var(--ep-accent); } .ep-sechead__lede { margin: 0; font-size: clamp(15px, 1.6vw, 17px); line-height: 1.55; color: var(--ink-soft); } /* Before/after slider, lifted from the homepage. Its .lz-ba-* rules in styles.css are container queries against `lzpage`, so this wrapper establishes that container the way .ep-spaces does; the cap stands in for the text column that shares the row on the homepage, which is what keeps the cards from going huge. */ .ep-ba { container: lzpage / inline-size; width: 100%; max-width: 760px; margin: 0 auto; } .ep-steps { margin: 0; padding: 0; list-style: none; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; } .ep-steps__item { font-weight: 500; font-size: 13px; line-height: 1; color: var(--ink-faint); } .ep-steps__item.is-on { font-weight: 600; color: var(--graphite); } .ep-steps__sep { width: 28px; height: 1px; background: var(--sage-soft); } .ep-card { width: 100%; max-width: 1280px; background: var(--paper); border: 1px solid var(--ep-line); border-radius: var(--ep-radius); padding: clamp(20px, 3.2vw, 44px) clamp(16px, 3.4vw, 48px) clamp(20px, 3vw, 40px); box-shadow: 0 24px 60px -40px rgba(35,28,26,.35); } .ep-noscript { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; } .ep-noscript p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink-soft); max-width: 46ch; } /* honeypot — off-screen, never focusable */ .ep-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } @keyframes ep-rise { from { transform: translateY(12px); opacity: 0 } to { transform: none; opacity: 1 } } .ep-panel { display: none; } .ep-panel.is-on { display: flex; flex-direction: column; gap: 28px; } /* ---------- areas overview ---------- */ .ep-areas { display: flex; flex-direction: column; gap: 8px; } @media (min-width: 721px) { .ep-areas { gap: 12px; } } .ep-area { position: relative; display: flex; align-items: center; gap: clamp(12px, 1.6vw, 18px); min-height: 56px; padding: 8px clamp(16px, 2vw, 24px); border-radius: 18px; border: 1px solid var(--ep-line); background: var(--cream); cursor: pointer; text-align: left; transition: border-color .18s var(--ease), background .18s var(--ease); } @media (hover: hover) { .ep-area:hover { border-color: var(--ep-accent); background: var(--sage-tint); } } .ep-area.is-picked { border-color: var(--ep-pick); background: color-mix(in srgb, var(--ep-pick) 6%, var(--cream)); } .ep-area__ic { flex: none; width: clamp(26px, 2.2vw, 30px); height: clamp(26px, 2.2vw, 30px); color: var(--ep-accent); } .ep-area__ic svg { width: 100%; height: 100%; display: block; } .ep-area__txt { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; flex: 1 1 auto; } .ep-area__title { font-size: clamp(19px, 2.2vw, 28px); line-height: 1.1; letter-spacing: -.02em; } .ep-area__count { font-weight: 500; font-size: 13px; line-height: 1.2; color: var(--ink-faint); } .ep-area__right { display: flex; align-items: center; gap: 12px; flex: none; } .ep-area__picked { padding: 7px 12px; border-radius: 4px; background: var(--ep-pick); color: #fbfaf6; font-weight: 600; font-size: 11px; line-height: 1; white-space: nowrap; } .ep-area__picked b { font-weight: 600; } .ep-area__picked i { font-style: normal; margin-left: 4px; } .ep-area__arrow { font-size: 20px; line-height: 1; color: var(--ink-faint); } /* "Цяло тяло" fixed-price packs — area-look tiles that skip the zone maths. Tinted with the brand pink so they read as offers, not another body area. */ .ep-area--pack { border-color: color-mix(in srgb, var(--ep-pick) 34%, var(--ep-line)); background: color-mix(in srgb, var(--ep-pick) 5%, var(--cream)); } @media (hover: hover) { .ep-area--pack:hover { border-color: var(--ep-pick); background: color-mix(in srgb, var(--ep-pick) 9%, var(--cream)); } } .ep-area--pack .ep-area__ic { color: var(--ep-pick); } .ep-area__deal { font-weight: 700; font-size: 15px; line-height: 1.2; color: var(--ep-cta); white-space: nowrap; } .ep-area__deal s { margin-left: 3px; font-weight: 500; font-size: 13px; color: var(--ink-faint); } .ep-area__pct { padding: 7px 12px; border-radius: 4px; background: var(--ep-pick); color: #fbfaf6; font-weight: 600; font-size: 11px; line-height: 1; white-space: nowrap; } .ep-detail__note { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink-soft); } /* ---------- one area's zones ---------- */ .ep-detail { display: none; flex-direction: column; gap: 20px; } .ep-detail.is-on { display: flex; animation: ep-rise .28s var(--ease); } .ep-detail__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .ep-back { flex: none; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid var(--ep-line); background: var(--paper); font-size: 20px; line-height: 1; color: var(--ink-soft); cursor: pointer; transition: border-color .2s var(--ease), color .2s var(--ease); } @media (hover: hover) { .ep-back:hover { border-color: var(--ep-accent); color: var(--graphite); } } .ep-detail__title { font-size: clamp(22px, 2.8vw, 30px); line-height: 1; letter-spacing: -.02em; } .ep-zones { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: clamp(8px, 1.1vw, 12px); align-content: start; } .ep-zone { position: relative; display: flex; align-items: center; gap: 14px; padding: clamp(15px, 2vw, 18px); border-radius: 16px; border: 1px solid var(--ep-line); background: var(--cream); font-weight: 500; font-size: clamp(15px, 1.6vw, 17px); line-height: 1.3; cursor: pointer; user-select: none; transition: border-color .18s var(--ease), background .18s var(--ease), box-shadow .18s var(--ease); } @media (hover: hover) { .ep-zone:hover { border-color: var(--ep-accent); background: var(--sage-tint); } } .ep-zone.is-on { border-color: var(--ep-pick); box-shadow: inset 0 0 0 1px var(--ep-pick); background: color-mix(in srgb, var(--ep-pick) 6%, var(--cream)); } /* native checkbox stays in the a11y tree and keeps keyboard/label behaviour */ .ep-zone__cb { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; } .ep-zone__cb:focus-visible ~ .ep-zone__box { outline: 2px solid var(--ep-pick); outline-offset: 2px; } .ep-zone__txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .ep-zone__name { display: block; } /* Today's price, then the crossed-out regular one — same pairing as the price cards on the homepage. */ .ep-zone__price { display: inline-flex; align-items: baseline; gap: 6px; font-weight: 600; font-size: 13px; line-height: 1.2; color: var(--ep-cta); } .ep-zone__price s { font-weight: 500; color: var(--ink-faint); text-decoration-thickness: 1px; } .ep-zone__box { flex: none; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 8px; border: 1.5px solid var(--sage-soft); background: var(--paper); font-weight: 700; font-size: 12px; line-height: 1; color: transparent; transition: background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease); } .ep-zone.is-on .ep-zone__box { background: var(--ep-pick); border-color: var(--ep-pick); color: #fff; } /* Phones get shorter rows — 48px area tiles, zone rows capped at 56px, 42px chips. */ @media (max-width: 720px) { /* Phones run the sections tighter — the 48/64px the clamps floor at is desktop air on a 360px screen and pushes the constructor below two scrolls. */ .ep-section { padding-top: 28px; padding-bottom: 36px; } .ep-area { min-height: 48px; padding-top: 4px; padding-bottom: 4px; } /* line-height 1.2 + no name/price gap keep even a two-line zone name (men's "Пълен интим + междуседалищна зона") inside the 56px cap */ .ep-zone { max-height: 56px; padding-top: 7px; padding-bottom: 7px; line-height: 1.2; } .ep-zone__txt { gap: 2px; } .ep-chip { height: 42px; padding-top: 0; padding-bottom: 0; } } /* Under ~420px there is no room for icon + a 12-character group name + the zone count + the arrow on one line, and a wrapped count broke the fixed 56px row height. The count is secondary — the zone list is one tap away. */ @media (max-width: 420px) { .ep-area__count { display: none; } /* Number only — the full "1 избрана" pushed long titles onto a second line. */ .ep-area__picked i { display: none; } .ep-area__picked { padding: 7px 9px; } /* 3px short of fitting "Интимни зони" on one line at 360px — buy it back here. */ .ep-area { padding-left: 13px; padding-right: 13px; } .ep-area__deal s { display: none; } /* pack anchor price — the −% badge carries it */ } .ep-others { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line-soft); } .ep-others__ttl { font-weight: 600; font-size: 11px; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); } .ep-others__row { display: flex; gap: 8px; flex-wrap: wrap; } .ep-chip { display: inline-flex; align-items: center; gap: 9px; padding: 12px 16px; border-radius: 4px; border: 1px solid var(--line); background: var(--paper); font-weight: 500; font-size: 14px; line-height: 1; cursor: pointer; transition: border-color .18s var(--ease), background .18s var(--ease); } @media (hover: hover) { .ep-chip:hover { border-color: var(--ep-accent); background: var(--sage-tint); } } .ep-chip__num { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 4px; background: var(--ep-pick); color: #fbfaf6; font-weight: 600; font-size: 11px; line-height: 1; } /* ---------- gender switch (design 8a · pink pill) ---------- Women's and men's zones are priced differently, so this switches the whole catalogue: .ep-cons[data-gender] shows one gender's areas and hides the other. */ .ep-cons__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; } .ep-cons__hint { font-weight: 500; font-size: 14px; line-height: 1.4; color: var(--ink-soft); } .ep-gender { display: inline-flex; gap: 4px; padding: 5px; border-radius: 999px; background: var(--cream-2); } .ep-gender__btn { padding: 11px 26px; border: 0; border-radius: 999px; cursor: pointer; background: transparent; color: var(--ink-soft); font-family: inherit; font-weight: 600; font-size: 14px; line-height: 1; transition: background .18s var(--ease), color .18s var(--ease); } .ep-gender__btn.is-on { background: var(--ep-pick); color: #fff; } @media (hover: hover) { .ep-gender__btn:not(.is-on):hover { color: var(--graphite); } } /* On phones the switch takes the whole row on its own — the section heading right above it already says what to do, so the hint would only repeat it. */ @media (max-width: 480px) { .ep-cons__hint { display: none; } .ep-gender { width: 100%; } .ep-gender__btn { flex: 1; padding: 13px 12px; } } /* Only the active gender's areas and detail panels exist on screen. */ .ep-cons[data-gender="w"] [data-ep-gender="m"], .ep-cons[data-gender="m"] [data-ep-gender="w"] { display: none; } /* Phones: the panel's 28px rhythm is too airy on a 360px screen, so the zones step drops the gap and spaces its blocks explicitly. Only that step — steps 2 and 3 set their own gap and keep it. Placed after the base rules on purpose: @media adds no specificity, so an earlier block would lose to them. */ @media (max-width: 720px) { .ep-panel[data-ep-panel="1"].is-on { gap: 0; } .ep-cons__top { margin-bottom: 12px; } .ep-areas, .ep-detail.is-on { margin-bottom: 16px; } } /* ---------- sticky summary bar ---------- */ .ep-bar { position: sticky; bottom: 10px; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: clamp(16px, 2vw, 22px) clamp(16px, 2vw, 26px); border-radius: 22px; background: var(--ep-dark); color: #fff; box-shadow: 0 18px 40px -22px rgba(35,28,26,.6); } /* Counter with the pricing rule under it — one block of copy on the left. */ .ep-bar__col { flex: 1 1 300px; display: flex; flex-direction: column; gap: 5px; min-width: 180px; max-width: 560px; } .ep-bar__count { font-weight: 600; font-size: 17px; line-height: 1.2; } .ep-bar__ladder { flex: 0 1 auto; display: flex; flex-direction: column; gap: 6px; min-width: 0; } .ep-bar__ladder:empty, .ep-bar__ladder:has(> :only-child[hidden]) { display: none; } .ep-bar__rule { font-weight: 500; font-size: 13px; line-height: 1.35; color: rgba(255,255,255,.72); text-wrap: pretty; } .ep-bar__save { font-weight: 600; font-size: 13px; line-height: 1.2; color: var(--ep-cta); } .ep-bar__go { flex: 1 1 240px; max-width: 340px; display: flex; align-items: center; justify-content: space-between; gap: 14px; height: 48px; max-height: 48px; padding: 4px 12px 4px 22px; border-radius: 4px; border: none; background: var(--ep-cta); color: #fbfaf6; font-weight: 600; font-size: clamp(14px, 1.6vw, 16px); line-height: 1; cursor: pointer; transition: background .25s var(--ease); } @media (hover: hover) { .ep-bar__go:hover { background: var(--ep-cta-h); } } /* Selected-zone chips: a full-width row under the bar's main line, each chip droppable by its own ×. Wraps on desktop, one sideways-scrolling line on phones (a wrapping row would grow the sticky bar over half the screen). */ .ep-bar__chips { flex: 1 1 100%; display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding-top: 13px; border-top: 1px solid rgba(255,255,255,.12); } .ep-bar__chips[hidden] { display: none; } /* the class' display would win otherwise */ .ep-bar__chipscap { flex: none; font-weight: 600; font-size: 11px; line-height: 1; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); } .ep-bar__chiprow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; } .ep-bar__chip { display: inline-flex; align-items: center; gap: 9px; flex: none; padding: 7px 7px 7px 13px; border-radius: 999px; background: rgba(255,255,255,.09); font-weight: 600; font-size: 12px; line-height: 1; white-space: nowrap; } .ep-bar__chip i { font-style: normal; font-weight: 500; color: rgba(255,255,255,.62); } .ep-bar__chipdel { display: flex; align-items: center; justify-content: center; flex: none; width: 19px; height: 19px; padding: 0; border: none; border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; font-weight: 600; font-size: 12px; line-height: 1; cursor: pointer; transition: background .18s var(--ease); } .ep-bar__clear { flex: none; padding: 7px 12px; border: none; border-radius: 999px; background: none; color: rgba(255,255,255,.5); font-weight: 600; font-size: 12px; line-height: 1; cursor: pointer; text-decoration: underline; transition: color .18s var(--ease); } @media (hover: hover) { .ep-bar__chipdel:hover { background: var(--ep-cta); } .ep-bar__clear:hover { color: #fff; } } /* Phones/small tablets: an explicit column — flex-wrap at these widths dealt the ladder and the button into one half-width row. Every child (counter, ladder, button) spans the bar's full width, matching the 360px look. */ @media (max-width: 720px) { .ep-bar { flex-direction: column; align-items: stretch; } /* flex: none — the row rules' flex-basis 240px would otherwise apply to the column's main axis and become a 240px HEIGHT for the ladder and button. */ .ep-bar__col, .ep-bar__ladder, .ep-bar__go { flex: none; } .ep-bar__col { min-width: 0; } .ep-bar__ladder { max-width: none; } .ep-bar__go { max-width: none; } /* Chips sit above the button (DOM order puts them after it), on one line that scrolls sideways: name + × only, no caption and no "изчисти" — the row must stay a single line whatever the zone count. */ /* min-width: 0 — in a column flex the stretched cross size is still floored by min-content, so the nowrap chip row would widen the whole bar past the screen. */ .ep-bar__chips { flex: none; order: 1; gap: 0; padding-top: 11px; min-width: 0; flex-wrap: nowrap; } .ep-bar__go { order: 2; } .ep-bar__chipscap, .ep-bar__clear, .ep-bar__chip i { display: none; } /* width: 0 + grow, not flex-basis alone: a wrapping flex parent propagates its items' max-content width upwards regardless of flex-basis, which stretched the whole sticky bar past the screen edge. An explicit zero width keeps the row's intrinsic contribution at nothing; flex-grow then fills the line. */ .ep-bar__chiprow { flex: 1 1 0; width: 0; min-width: 0; flex-wrap: nowrap; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 1px; } .ep-bar__chiprow::-webkit-scrollbar { display: none; } } /* Two-row grid: the struck regular total sits ON TOP of the price, the −N% badge spans both rows on the right. Half the width of the old one-line layout, so the full pill fits next to "Виж цената" even on 360px phones. */ .ep-bar__pill { display: inline-grid; grid-template-areas: "old badge" "new badge"; grid-template-columns: auto auto; column-gap: 9px; align-items: center; justify-items: start; padding: 3px 8px 3px 12px; border-radius: 4px; background: #fff; white-space: nowrap; } .ep-bar__pill b { grid-area: new; font-weight: 600; font-size: 16px; line-height: 1; color: var(--ep-cta); } /* The regular total the badge discounts from — empty (and collapsed) until a zone is picked, so the empty pill stays a clean single line. */ .ep-bar__pill s { grid-area: old; margin-bottom: 1px; font-weight: 500; font-size: 12px; line-height: 1; color: var(--ink-faint); text-decoration-thickness: 1px; } .ep-bar__pill s:empty { display: none; } /* With no struck total the badge still spans both grid rows and hands half its height to the empty top track, shoving "0€" downward — let the price span both rows too, so it centres against the badge. */ .ep-bar__pill:has(s:empty) b { grid-area: 1 / 1 / 3 / 2; align-self: center; } /* The narrowest phones + a three-digit package (e.g. 243€ over 380€): shave the button's paddings and gaps so the one-line label survives the widest pill. */ @media (max-width: 400px) { .ep-bar__go { padding: 8px 8px 8px 14px; gap: 10px; } .ep-bar__pill { column-gap: 7px; padding-left: 9px; } } .ep-bar__pill i { grid-area: badge; align-self: center; font-style: normal; font-weight: 600; font-size: 14px; line-height: 1; padding: 5px 8px; border-radius: 4px; background: var(--ep-cta); color: #fbfaf6; } /* ---------- step 2 · benefit ---------- */ .ep-benefit.is-on { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: clamp(24px, 4vw, 48px); align-items: center; animation: ep-rise .28s var(--ease); } .ep-benefit__col { display: flex; flex-direction: column; gap: 18px; } .ep-benefit__num { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; } .ep-benefit__num b { font-weight: 600; font-size: clamp(44px, 7vw, 84px); line-height: .9; letter-spacing: -.02em; color: var(--graphite); white-space: nowrap; } .ep-benefit__was { display: flex; flex-direction: column; gap: 6px; padding-bottom: 10px; } .ep-benefit__was s { font-weight: 500; font-size: 17px; line-height: 1; color: var(--ink-faint); white-space: nowrap; } .ep-benefit__was i { font-style: normal; align-self: flex-start; padding: 7px 12px; border-radius: 4px; background: var(--ep-cta); color: #fbfaf6; font-weight: 600; font-size: 14px; line-height: 1; } .ep-benefit__save { font-weight: 500; font-size: 15px; line-height: 1.5; color: var(--ink-soft); } .ep-benefit__save b { font-weight: 600; color: var(--graphite); } /* Package vs the same zones bought one by one at promo prices. */ .ep-benefit__vs { font-weight: 500; font-size: 14px; line-height: 1.5; color: var(--ep-accent); } .ep-benefit__note { font-weight: 500; font-size: 13px; line-height: 1.5; color: var(--ink-faint); } .ep-benefit__line { margin: 0; font-size: 18px; line-height: 1.55; color: var(--ink-soft); max-width: 40ch; text-wrap: pretty; } .ep-benefit__cta { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 6px; } .ep-benefit__cta .ep-btn { flex: 1 1 240px; } .ep-pick { background: var(--cream); border: 1px solid var(--ep-line); border-radius: 24px; padding: clamp(22px, 2.6vw, 32px); } .ep-pick__ttl { font-weight: 600; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); } .ep-pick__list { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .ep-pick__list li { display: flex; align-items: center; gap: 11px; font-weight: 500; font-size: 17px; line-height: 1.3; } .ep-pick__list li::before { content: "✓"; flex: none; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--ep-pick); color: #fff; font-weight: 700; font-size: 11px; line-height: 1; } .ep-pick__note { margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--ep-line); font-weight: 500; font-size: 14px; line-height: 1.5; color: var(--ink-faint); } /* ---------- step 3 · exact price ---------- */ .ep-final.is-on { display: flex; flex-direction: column; gap: 20px; max-width: 640px; margin: 0 auto; width: 100%; animation: ep-rise .28s var(--ease); } .ep-final__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; } .ep-final__ttl { font-weight: 300; font-size: clamp(24px, 3vw, 34px); line-height: 1.1; letter-spacing: -.02em; } .ep-final__count { font-weight: 500; font-size: 13px; color: var(--ink-faint); } .ep-sum { list-style: none; margin: 0; padding: 0; } .ep-sum li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px dashed var(--ep-line); font-weight: 500; font-size: 16px; line-height: 1.3; } .ep-sum__row { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .ep-sum__name { font-weight: 500; } .ep-sum__area { font-weight: 500; font-size: 12px; line-height: 1; color: var(--ink-faint); } .ep-sum__price { font-weight: 600; font-size: 15px; line-height: 1; color: var(--ep-cta); white-space: nowrap; } .ep-sum__price s { font-weight: 500; font-size: 13px; color: var(--ink-faint); text-decoration-thickness: 1px; } .ep-sum__total { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding-top: 18px; } .ep-sum__totaltxt { display: flex; flex-direction: column; gap: 4px; } .ep-sum__totaltxt b { font-weight: 600; font-size: 16px; line-height: 1.2; } .ep-sum__totaltxt i { font-style: normal; font-weight: 500; font-size: 13px; line-height: 1.4; color: var(--ink-faint); } .ep-sum__totalnum { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } .ep-sum__totalnum s { font-weight: 500; font-size: 16px; line-height: 1; color: var(--ink-faint); white-space: nowrap; } .ep-sum__totalnum b { font-weight: 600; font-size: clamp(26px, 3.4vw, 34px); line-height: 1; letter-spacing: -.02em; color: var(--ep-cta); white-space: nowrap; } .ep-sum__totalnum i { font-style: normal; padding: 6px 11px; border-radius: 4px; background: var(--ep-cta); color: #fbfaf6; font-weight: 600; font-size: 13px; line-height: 1; } .ep-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; } .ep-field { display: flex; flex-direction: column; gap: 6px; } .ep-field input { width: 100%; height: 48px; padding: 0 18px; border-radius: 4px; border: 1px solid var(--line); background: var(--cream); font-family: var(--sans); font-weight: 500; font-size: 16px; line-height: 1; color: var(--graphite); outline: none; transition: border-color .2s var(--ease), background .2s var(--ease); } .ep-field input::placeholder { color: var(--ink-faint); } .ep-field input:focus { border-color: var(--ep-accent); background: var(--paper); } .ep-field__err { display: none; font-weight: 500; font-size: 12px; color: var(--ep-cta); padding-left: 4px; } /* Salon picker (city-agnostic page only). The dropdown itself is the site's .lz-csel component from styles.css; only its trigger is re-cut to match the inputs next to it — same height, ground and 4px corners. */ .ep-field--salon { grid-column: 1 / -1; } .ep-field--salon .lz-csel__trigger { height: 48px; padding: 0 18px; gap: 12px; border-radius: 4px; border-color: var(--line); background: var(--cream); font-size: 15px; } .ep-field--salon .lz-csel.is-open .lz-csel__trigger, .ep-field--salon .lz-csel__trigger:hover { border-color: var(--ep-accent); background: var(--paper); } .ep-field--salon .lz-csel.is-open .lz-csel__trigger { box-shadow: none; } .ep-field.has-error .lz-csel__trigger { border-color: var(--ep-cta); background: color-mix(in srgb, var(--ep-cta) 5%, var(--paper)); } .ep-field.has-error input { border-color: var(--ep-cta); background: color-mix(in srgb, var(--ep-cta) 5%, var(--paper)); } .ep-field.has-error .ep-field__err { display: block; } .ep-err { display: none; margin: 0; font-weight: 500; font-size: 13px; line-height: 1.5; color: var(--ep-cta); } .ep-err a { color: inherit; text-decoration: underline; } .ep-cons.has-error .ep-err { display: block; } .ep-final__actions { display: flex; flex-direction: column; gap: 10px; } /* Shorter than the 56px .ep-btn default so the pair lines up with the 48px fields above them. */ .ep-final__actions .ep-btn { min-height: 48px; } /* ---------- success ---------- */ .ep-done.is-on { display: flex; flex-direction: column; gap: 12px; max-width: 640px; margin: 0 auto; width: 100%; padding: clamp(24px, 3vw, 30px); border-radius: 22px; background: var(--ep-dark); animation: ep-rise .28s var(--ease); } .ep-done__ttl { font-weight: 600; font-size: clamp(24px, 3vw, 32px); line-height: 1.12; color: #fff; } .ep-done p { margin: 0; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.76); max-width: 44ch; } .ep-done p b { color: #fff; } .ep-done__tel { margin-top: 4px; color: var(--ep-warm); font-weight: 600; font-size: 16px; } /* ============================================================ BIG NUMBERS (offset stat + copy, gentle parallax) ============================================================ */ .ep-big { padding: clamp(64px, 9vw, 130px) clamp(18px, 4vw, 72px); overflow: hidden; } .ep-big--a { background: var(--paper); } .ep-big--b { background: var(--cream); } .ep-big__wrap { position: relative; max-width: 1280px; margin: 0 auto; min-height: clamp(300px, 30vw, 480px); } .ep-big__num { position: absolute; top: 0; font-weight: 300; font-size: clamp(72px, 21vw, 300px); line-height: .8; letter-spacing: -.05em; white-space: nowrap; pointer-events: none; will-change: transform; } .ep-big--a .ep-big__num { right: 0; color: color-mix(in srgb, var(--ep-accent) 14%, var(--paper)); } .ep-big--b .ep-big__num { left: 0; color: color-mix(in srgb, var(--ep-accent) 20%, var(--cream)); } .ep-big__col { position: relative; z-index: 1; display: flex; flex-direction: column; gap: clamp(20px, 3vw, 34px); max-width: 780px; padding-top: clamp(90px, 13vw, 190px); will-change: transform; } .ep-big--a .ep-big__col { margin-left: auto; } .ep-big--b .ep-big__col { margin-right: auto; } .ep-big__lead { margin: 0; font-weight: 300; font-size: clamp(24px, 3.4vw, 46px); line-height: 1.25; letter-spacing: -.02em; color: var(--ep-accent); text-wrap: pretty; } .ep-big__txt { margin: 0; font-size: clamp(15px, 1.5vw, 18px); line-height: 1.7; color: var(--ink-soft); max-width: 62ch; text-wrap: pretty; } @media (prefers-reduced-motion: reduce) { .ep-big__num, .ep-big__col { transform: none !important; will-change: auto; } .ep-detail.is-on, .ep-benefit.is-on, .ep-final.is-on, .ep-done.is-on { animation: none; } } /* ============================================================ НАШИТЕ ПРОСТРАНСТВА (the homepage block, reused verbatim) ============================================================ */ .ep-spacessec { padding: clamp(56px, 8vw, 100px) clamp(14px, 4vw, 72px); background: var(--paper); border-top: 1px solid var(--ep-line); } .ep-spacessec__head { max-width: var(--content-max); margin: 0 auto clamp(24px, 3vw, 36px); display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; } .ep-spacessec .ep-h2 em { font-style: normal; color: var(--ep-accent); } /* The .lz-spaces-* rules in styles.css are mobile-first with desktop layout behind @container lzpage (min-width: 760px). The site supplies that container via .lz-page, which this standalone landing does not use — so declare it here. */ .ep-spaces { container: lzpage / inline-size; max-width: var(--content-max); margin: 0 auto; } /* ============================================================ FOOT BAR ============================================================ */ .ep-foot { padding: clamp(40px, 6vw, 64px) clamp(18px, 4vw, 72px) clamp(28px, 4vw, 40px); background: var(--paper); border-top: 1px solid var(--ep-line); } .ep-foot__inner { max-width: var(--content-max); margin: 0 auto; display: flex; flex-direction: column; gap: clamp(28px, 4vw, 44px); } .ep-foot__cols { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: clamp(24px, 4vw, 48px); } .ep-foot__brand { display: flex; flex-direction: column; gap: 14px; min-width: 240px; } .ep-foot__logo { display: block; } .ep-foot__logo img { height: 40px; width: auto; display: block; } .ep-foot__tel { font-weight: 300; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.05; letter-spacing: -.02em; color: var(--graphite); } .ep-foot__where { font-weight: 500; font-size: 15px; line-height: 1.5; color: var(--ink-soft); } .ep-foot__social { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; } .ep-foot__ttl { font-weight: 600; font-size: 11px; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); } .ep-foot__socialrow { display: flex; gap: 10px; flex-wrap: wrap; } .ep-foot__socialrow a { padding: 11px 18px; border-radius: 4px; border: 1px solid var(--line); font-weight: 500; font-size: 14px; line-height: 1; color: var(--graphite); transition: border-color .2s var(--ease), background .2s var(--ease); } @media (hover: hover) { .ep-foot__socialrow a:hover { border-color: var(--ep-accent); background: var(--sage-tint); } } /* ---------- every studio in the country ---------- An editorial directory: the city is a rubric with a hairline running off it, the studios sit under it as name / address / phone. Colours are picked for the white footer — sage-deep 6.28:1 for the rubric (the lighter accent sage would only reach 3.15:1), graphite 13:1 for names, ink-soft 6.12:1 for the rest. */ .ep-foot__salons { display: flex; flex-direction: column; gap: clamp(16px, 2vw, 22px); padding-top: clamp(22px, 3vw, 32px); } .ep-foot__cities { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: clamp(22px, 3vw, 34px) clamp(24px, 4vw, 56px); } .ep-foot__city { display: flex; flex-direction: column; gap: 15px; } .ep-foot__cityname { display: flex; align-items: center; gap: 12px; font-weight: 600; font-size: 12px; line-height: 1; letter-spacing: .16em; text-transform: uppercase; color: var(--sage-deep); } .ep-foot__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 15px; } .ep-foot__salon { display: flex; flex-direction: column; gap: 3px; padding-left: 13px; border-left: 2px solid var(--line-soft); } .ep-foot__salon.is-here { border-left-color: var(--ep-pick); } .ep-foot__salonname { font-weight: 600; font-size: 16px; line-height: 1.25; color: var(--graphite); } .ep-foot__salon.is-here .ep-foot__salonname { color: var(--ep-pick); } .ep-foot__salonname i { font-style: normal; margin-left: 8px; vertical-align: 1px; font-weight: 600; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ep-pick); } .ep-foot__addr { font-weight: 500; font-size: 14px; line-height: 1.45; color: var(--ink-soft); } .ep-foot__phone { width: fit-content; font-weight: 500; font-size: 14px; line-height: 1.4; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; transition: color .2s var(--ease); } @media (hover: hover) { .ep-foot__phone:hover { color: var(--ep-cta); } } .ep-foot__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding-top: clamp(18px, 2.4vw, 26px); border-top: 1px solid var(--ep-line); font-weight: 500; font-size: 13px; line-height: 1.4; color: var(--ink-soft); } .ep-foot__links { display: flex; flex-wrap: wrap; gap: 20px; } @media (hover: hover) { .ep-foot__tel:hover, .ep-foot__links a:hover { color: var(--ep-accent); } } /* ---------- floating messenger fan (design 14a) ---------- Fixed in the bottom-right corner: one round CTA, channels fan upwards. */ .ep-fan { position: fixed; z-index: 40; right: clamp(16px, 3vw, 28px); bottom: clamp(16px, 3vw, 28px); display: flex; flex-direction: column; align-items: flex-end; gap: 10px; --ep-fan-in: 0s; --ep-fan-out: 0s; transition: opacity .22s var(--ease), transform .22s var(--ease); } /* Steps aside only while something owns this corner: the sticky summary bar's go-button geometrically crossing it (is-away, set by laser-epilaciya.js from actual rectangle intersection — not by section visibility) or the cookie banner until it is dismissed. */ .ep-fan.is-away, body:has(.cc:not(.is-hidden)) .ep-fan { opacity: 0; transform: translateY(14px) scale(.9); pointer-events: none; } .ep-fan__btn { display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; border: 0; border-radius: 50%; padding: 0; background: var(--ep-cta); color: #fff; cursor: pointer; box-shadow: 0 16px 34px -16px rgba(214,58,54,.9); transition: background .2s var(--ease); } .ep-fan__ic { width: 27px; height: 27px; } .ep-fan__ic--close { width: 22px; height: 22px; } .ep-fan__ic--close, .ep-fan.is-open .ep-fan__ic--chat { display: none; } .ep-fan.is-open .ep-fan__ic--close { display: block; } /* Channels. Closed: parked below the button and unfocusable. */ .ep-fan__ch { display: flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 50%; color: #fff; box-shadow: 0 12px 26px -14px rgba(35,28,26,.6); visibility: hidden; opacity: 0; transform: translateY(22px) scale(.7); transition: opacity .22s ease-in var(--ep-fan-out), transform .22s ease-in var(--ep-fan-out), visibility 0s linear calc(.22s + var(--ep-fan-out)); } .ep-fan__ch svg { width: 24px; height: 24px; } .ep-fan.is-open .ep-fan__ch { visibility: visible; opacity: 1; transform: none; transition: opacity .26s cubic-bezier(.2,.9,.3,1.2) var(--ep-fan-in), transform .26s cubic-bezier(.2,.9,.3,1.2) var(--ep-fan-in), visibility 0s linear 0s; } /* Bottom-up stagger: the icon nearest the button leads on open, trails on close. */ .ep-fan__ch--wa { --ep-fan-in: .18s; --ep-fan-out: 0s; background: #25d366; } .ep-fan__ch--vb { --ep-fan-in: .12s; --ep-fan-out: .05s; background: #7360f2; } .ep-fan__ch--tg { --ep-fan-in: .06s; --ep-fan-out: .1s; background: #2aabee; } .ep-fan__ch--ig { --ep-fan-in: 0s; --ep-fan-out: .15s; background: linear-gradient(115deg, #f9ce34, #ee2a7b, #6228d7); } @media (hover: hover) { .ep-fan__btn:hover { background: var(--ep-cta-h); } .ep-fan.is-open .ep-fan__ch:hover { transform: translateY(-2px); } } @media (prefers-reduced-motion: reduce) { .ep-fan, .ep-fan__ch, .ep-fan.is-open .ep-fan__ch { transition-duration: .01s; transform: none; } } /* ---------- mobile contact bar (design 15b) ---------- Phones swap the fan for a bar pinned to the viewport bottom: the primary action is a full-width red call button, with compact WhatsApp / Viber / Telegram circles to its right. */ .ep-cbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: none; align-items: center; gap: 10px; height: calc(56px + env(safe-area-inset-bottom)); padding: 0 14px env(safe-area-inset-bottom); background: #fff; border-top: 1px solid var(--ep-line); box-shadow: 0 -18px 40px -30px rgba(35,28,26,.6); transition: transform .25s var(--ease); } .ep-cbar__call { flex: 1; display: flex; align-items: center; justify-content: center; gap: 9px; height: 40px; padding: 0 14px; border-radius: 999px; background: var(--ep-cta); color: #fff; font-weight: 600; font-size: 15px; line-height: 1; white-space: nowrap; transition: background .18s var(--ease); } .ep-cbar__call svg { width: 18px; height: 18px; flex: none; } .ep-cbar__msgs { display: flex; gap: 7px; flex: none; } .ep-cbar__msg { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: #fff; transition: transform .18s var(--ease); } .ep-cbar__msg svg { width: 19px; height: 19px; } .ep-cbar__msg--wa { background: #25d366; } .ep-cbar__msg--vb { background: #7360f2; } .ep-cbar__msg--tg { background: #2aabee; } @media (hover: hover) { .ep-cbar__call:hover { background: var(--ep-cta-h); } .ep-cbar__msg:hover { transform: translateY(-2px); } } /* The cookie banner owns the bottom edge until dismissed — slide the bar out. */ body:has(.cc:not(.is-hidden)) .ep-cbar { transform: translateY(110%); } @media (max-width: 720px) { .ep-fan { display: none; } .ep-cbar { display: flex; } /* Keep the page end and the sticky price bar clear of the pinned strip — but only in variant 1, which is the only one that renders that strip. Left unscoped, the page-end reservation showed up in v2 as a bare band of the section ground under the footer. */ .ep:not(.ep--v2) { padding-bottom: calc(56px + env(safe-area-inset-bottom)); } .ep:not(.ep--v2) .ep-bar { bottom: calc(60px + env(safe-area-inset-bottom)); } } /* ============================================================ LAYOUT VARIANT 2 (/laser-epilaciya--v2) A solid contact header at the top; the price panel sits edge-to-edge at the bottom of the viewport (design "Sticky Price Bar", second mobile mock) with the chips on one sideways-scrolling line. No messenger fan, no bottom contact bar — the header carries those channels instead. ============================================================ */ .ep-head { position: sticky; top: 0; z-index: 45; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 9px clamp(14px, 3vw, 44px); background: var(--paper); border-bottom: 1px solid var(--ep-line); } .ep-head__logo { display: block; flex: none; } .ep-head__logo img { height: 32px; width: auto; display: block; } .ep-head__right { display: flex; align-items: center; gap: clamp(10px, 1.6vw, 20px); min-width: 0; } .ep-head__where { font-weight: 500; font-size: 13px; line-height: 1.2; color: var(--ink-soft); white-space: nowrap; } .ep-head__tel { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--ep-cta); color: #fff; font-weight: 600; font-size: 15px; line-height: 1; white-space: nowrap; transition: background .18s var(--ease); } .ep-head__tel svg { width: 17px; height: 17px; flex: none; } .ep-head__msgs { display: flex; align-items: center; gap: 7px; flex: none; } .ep-head__msg { display: flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 50%; color: #fff; transition: transform .18s var(--ease); } .ep-head__msg svg { width: 19px; height: 19px; } .ep-head__msg--wa { background: #25d366; } .ep-head__msg--vb { background: #7360f2; } .ep-head__msg--tg { background: #2aabee; } @media (hover: hover) { .ep-head__tel:hover { background: var(--ep-cta-h); } .ep-head__msg:hover { transform: translateY(-2px); } } /* Phones: the number itself goes, the red pill keeps just the handset — three channel circles plus a full number never fit next to the logo at 360px. */ @media (max-width: 560px) { .ep-head { padding: 8px 12px; gap: 10px; } .ep-head__where { display: none; } .ep-head__tel { width: 40px; padding: 0; justify-content: center; } .ep-head__tel span { display: none; } .ep-head__tel svg { width: 19px; height: 19px; } } /* The first screen is exactly one viewport at every width: the hero takes what the header above it leaves, and nothing is reserved for the price panel — the panel is off-screen until the visitor scrolls (see .is-scrolled below). svh first for browsers without dvh; dvh lets the hero follow a mobile address bar. The copy sits at the bottom, over the gradient painted there for it. */ .ep--v2 .ep-hero, .ep--v2 .ep-hero__inner { min-height: calc(100svh - var(--ep-headh, 0px)); } .ep--v2 .ep-hero, .ep--v2 .ep-hero__inner { min-height: calc(100dvh - var(--ep-headh, 0px)); } .ep--v2 .ep-hero__inner { justify-content: flex-end; padding-bottom: 60px; } /* The price panel leaves the card and pins itself to the viewport — but as a floating bar the width of the card above it, not a full-bleed strip: it reads as the constructor's own summary and its counter lines up with the zone list. Phones override this back to edge-to-edge further down. */ .ep--v2 .ep-bar { position: fixed; z-index: 40; left: 0; right: 0; margin: 0 auto; width: min(1280px, calc(100% - 2 * clamp(14px, 4vw, 72px))); bottom: clamp(12px, 1.6vw, 20px); border-radius: 22px; padding: clamp(14px, 1.8vw, 20px) clamp(18px, 2vw, 26px); padding-bottom: calc(clamp(14px, 1.8vw, 20px) + env(safe-area-inset-bottom)); box-shadow: 0 26px 50px -26px rgba(35,28,26,.62); transition: transform .25s var(--ease); } /* It would cover the hero's CTA on the first screen, so it waits below the edge and slides up as soon as the page moves (laser-epilaciya.js adds .is-scrolled past a few pixels). translateY is a multiple of the box, so the bottom offset goes with it — 130% clears the offset at any size. */ .ep--v2 .ep-bar { transform: translateY(130%); } .ep--v2.is-scrolled .ep-bar { transform: none; } /* Reserve the panel's height at the end of the page — it changes with the chip row and disappears on steps 2 and 3, so laser-epilaciya.js keeps the var in sync with the real box. The reservation lives on the FOOTER, not on the page: on the page it is a strip of the section ground showing under the footer, which reads as a stray band of colour once the ground is not white. */ .ep--v2 .ep-foot { padding-bottom: calc(var(--ep-barh, 0px) + clamp(28px, 4vw, 40px)); } /* The cookie banner owns the bottom edge until it is answered. */ /* 130% like the reveal rule above: the floating bar sits off the bottom edge, so 110% would leave a sliver of it showing under the cookie banner. */ body:has(.cc:not(.is-hidden)) .ep--v2 .ep-bar { transform: translateY(130%); } /* Chips: one sideways-scrolling line at every width in v2, matching the design's second mock — a wrapping row would grow a viewport-wide panel too tall. */ .ep--v2 .ep-bar__chips { flex: 1 1 100%; min-width: 0; flex-wrap: nowrap; gap: 10px; } .ep--v2 .ep-bar__chiprow { flex: 1 1 0; width: 0; min-width: 0; flex-wrap: nowrap; gap: 7px; overflow-x: auto; scrollbar-width: none; padding-bottom: 1px; } .ep--v2 .ep-bar__chiprow::-webkit-scrollbar { display: none; } @media (max-width: 720px) { /* Phones: the first screen is exactly one viewport — the hero takes what the header above it leaves, and nothing is reserved for the price panel because the panel is off-screen until the visitor scrolls (see .is-scrolled below). svh first for browsers without dvh; dvh lets the hero follow the address bar. The copy sits at the bottom, over the dark gradient painted there for it, with a plain 48px of breathing room. */ .ep--v2 .ep-hero__inner { padding-bottom: 24px; } /* The copy tightens up with the panel gone: the whole stack has to read in one glance above the fold, so the display size drops to the body scale. */ .ep-hero__badge { gap: 6px; font-size: 12px; } .ep-hero__badge i { font-size: 12px; padding: 4px 6px; } .ep-hero__h1 { font-size: 28px; } .ep-hero__lede { font-size: 14px; } .ep-hero__cta { min-height: 48px; } /* Phones: back to an edge-to-edge strip — a floating card would waste side gutters on a 360px screen. The reveal-on-scroll rule above applies as is. */ .ep--v2 .ep-bar { width: auto; bottom: 0; border-radius: 22px 22px 0 0; padding-left: clamp(16px, 2vw, 26px); padding-right: clamp(16px, 2vw, 26px); box-shadow: 0 -20px 44px -28px rgba(35,28,26,.7); } .ep--v2 .ep-bar { transform: translateY(110%); } .ep--v2 .ep-bar__chips { order: 1; } .ep--v2 .ep-bar__go { order: 2; } } /* ============================================================ THEME: SAGE (/laser-epilaciya-troshevo only) Olive section grounds with white type. #74805a is one step above the AA ceiling: white on it scores 4.22:1, which clears the 3:1 large-text bar (the H2 and the stat lead) but sits just under the 4.5:1 needed for the 12–13px eyebrow and step labels. The salon asked for this lighter shade with eyes open; #6e7a57 (4.58:1) is the deepest-but-compliant alternative and the original #99a380 (2.66:1) cannot carry light type at all. Nothing is lighter than white, so every piece of type on the ground is #fff and the hierarchy is carried by size, weight and letter-spacing instead of by colour. Cards, "Нашите пространства" and the footer keep their own white ground and their own colours; only the cream surfaces change. ============================================================ */ .ep--sage { --sg: #74805a; --sg-ink: #ffffff; /* on --sg: 4.22:1 — AA for large type, just under it for 12–13px */ --sg-line: rgba(255, 255, 255, .28); background: var(--sg); } body:has(.ep--sage) { background: var(--sg, #74805a); } /* section grounds */ .ep--sage .ep-big--b { background: var(--sg); } /* type sitting directly on the ground */ .ep--sage .ep-sechead .ep-h2, .ep--sage .ep-sechead .ep-h2 em, .ep--sage .ep-sechead .ep-eyebrow, .ep--sage .ep-sechead__lede, .ep--sage .ep-steps__item, .ep--sage .ep-big--b .ep-big__lead, .ep--sage .ep-big--b .ep-big__txt { color: var(--sg-ink); } /* the eyebrow and the inactive steps step back on weight, not on colour */ .ep--sage .ep-sechead .ep-eyebrow { font-weight: 700; } .ep--sage .ep-steps__item { font-weight: 500; } .ep--sage .ep-steps__item.is-on { font-weight: 700; } .ep--sage .ep-steps__sep { background: var(--sg-line); } /* the oversized stat is decoration (aria-hidden), so it only has to sit a shade off the ground rather than meet a contrast target */ .ep--sage .ep-big--b .ep-big__num { color: color-mix(in srgb, var(--sg-ink) 15%, var(--sg)); } /* "Нашите пространства" and the footer keep their own white ground, so their colours are left alone — only the cream surfaces turn olive. */