/* ========================================================================== Apteka Sharm — light theme Brand green #078232 (from the logo) · Lora headings · Lato body ========================================================================== */ :root { --green: #078232; --green-700: #05672a; --green-800: #0a4d25; --green-900: #0c3a1f; --mint-25: #f7fbf8; --mint-50: #f1f8f3; --mint-100: #e3f2e8; --mint-200: #cce7d5; --mint-300: #a6d6b5; --lime: #9bc93a; --ink: #12261a; --text: #2a3a31; --muted: #5b6b62; --line: #e1eae4; --line-2: #cfdcd4; --sand: #fbf8f2; --gold: #f2a900; --rose-50: #fff4f1; --rose-200: #f4c8bd; --rose-700: #ac2f1b; --wa: #25d366; --wa-ink: #073b1d; --shadow-sm: 0 1px 2px rgba(16, 40, 26, .06), 0 1px 1px rgba(16, 40, 26, .04); --shadow: 0 12px 30px -14px rgba(16, 40, 26, .22), 0 2px 6px rgba(16, 40, 26, .05); --shadow-lg: 0 34px 64px -24px rgba(8, 52, 26, .32), 0 10px 22px -10px rgba(8, 52, 26, .14); --r-sm: 10px; --r: 16px; --r-lg: 22px; --r-xl: 32px; /* "Lora Fallback" / "Lato Fallback": metric-matched local fonts (inc/setup.php) so the swap does not re-wrap text */ --font-head: "Lora", "Lora Fallback", Georgia, "Times New Roman", serif; --font-body: "Lato", "Lato Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --container: 1200px; --gutter: clamp(18px, 4vw, 32px); --section: clamp(60px, 8vw, 108px); --header-h: 76px; --ease: cubic-bezier(.2, .7, .2, 1); --ease-out: cubic-bezier(.16, 1, .3, 1); --cross: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M20 15h4v5h5v4h-5v5h-4v-5h-5v-4h5z' fill='%23cce7d5'/%3E%3C/svg%3E"); } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); } body { margin: 0; font: 400 17px/1.65 var(--font-body); color: var(--text); background: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } @media (max-width: 600px) { body { font-size: 16px; } } img, video, svg { max-width: 100%; } img, video { height: auto; display: block; } a { color: var(--green-700); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .2s; } a:hover { color: var(--green); } h1, h2, h3, h4 { font-family: var(--font-head); color: var(--ink); line-height: 1.18; letter-spacing: -.012em; margin: 0 0 .5em; font-weight: 600; text-wrap: balance; } h1 { font-size: clamp(2.15rem, 1.3rem + 3vw, 3.8rem); line-height: 1.08; } h2 { font-size: clamp(1.65rem, 1.15rem + 1.6vw, 2.55rem); } h3 { font-size: clamp(1.12rem, 1.04rem + .35vw, 1.32rem); } p { margin: 0 0 1em; } ul, ol { padding-left: 1.2em; } button { font: inherit; } :focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; border-radius: 6px; } ::selection { background: var(--mint-200); color: var(--ink); } .sa-skip { position: absolute; left: -9999px; top: 8px; z-index: 1000; background: #fff; padding: 10px 16px; border-radius: 10px; box-shadow: var(--shadow); } .sa-skip:focus { left: 12px; } .sa-container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); } .sa-container--narrow { max-width: calc(880px + 2 * var(--gutter)); } .sa-center { text-align: center; margin-top: clamp(28px, 4vw, 44px); } .sa-hide-sm { display: none; } @media (min-width: 760px) { .sa-hide-sm { display: inline; } } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } .sa-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ---------- Icons ---------- */ .sa-ico { width: 1.15em; height: 1.15em; flex: none; vertical-align: -.2em; } .sa-brand { display: inline-block; flex: none; width: 1.15em; height: 1.15em; vertical-align: -.2em; background-color: currentColor; -webkit-mask: var(--sa-mask) center / contain no-repeat; mask: var(--sa-mask) center / contain no-repeat; } .sa-iconbox { display: inline-grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 14px; background: var(--mint-100); color: var(--green); } .sa-iconbox .sa-ico { width: 24px; height: 24px; } .sa-iconbox--lg { width: 56px; height: 56px; border-radius: 16px; } .sa-iconbox--lg .sa-ico { width: 27px; height: 27px; } .sa-iconbox--sm { width: 36px; height: 36px; border-radius: 11px; } .sa-iconbox--sm .sa-ico { width: 19px; height: 19px; } /* ---------- Buttons, chips, links ---------- */ .sa-btn { display: inline-flex; align-items: center; justify-content: center; gap: .55em; padding: .82em 1.3em; border-radius: 999px; border: 1.5px solid transparent; font: 700 .98rem/1.1 var(--font-body); letter-spacing: .005em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .2s, color .2s, border-color .2s; } .sa-btn:hover { transform: translateY(-2px); } .sa-btn:active { transform: translateY(0); } .sa-btn--primary { background: var(--green); color: #fff; box-shadow: 0 10px 22px -10px rgba(7, 130, 50, .6); } .sa-btn--primary:hover { background: var(--green-700); color: #fff; } .sa-btn--wa { background: var(--wa); color: var(--wa-ink); box-shadow: 0 10px 22px -10px rgba(37, 211, 102, .75); } .sa-btn--wa:hover { background: #2fe072; color: var(--wa-ink); box-shadow: 0 14px 26px -10px rgba(37, 211, 102, .8); } .sa-btn--ghost { background: #fff; color: var(--green-800); border-color: var(--line-2); } .sa-btn--ghost:hover { border-color: var(--green); color: var(--green); box-shadow: var(--shadow-sm); } .sa-btn--light { background: #fff; color: var(--green-800); } .sa-btn--light:hover { color: var(--green); box-shadow: 0 12px 24px -12px rgba(0, 0, 0, .35); } .sa-btn--sm { padding: .58em 1em; font-size: .9rem; } .sa-btn--lg { padding: 1em 1.55em; font-size: 1.04rem; } .sa-btn--block { display: flex; width: 100%; } .sa-btn .sa-ico, .sa-btn .sa-brand { width: 1.2em; height: 1.2em; } .sa-link { display: inline-flex; align-items: center; gap: .4em; font-weight: 700; text-decoration: none; color: var(--green-700); } .sa-link .sa-ico { width: 1em; height: 1em; transition: transform .25s var(--ease); } .sa-link:hover .sa-ico { transform: translateX(3px); } .sa-chip { display: inline-flex; align-items: center; gap: .35em; margin: 0 0 .9em; padding: .38em .85em; border-radius: 999px; background: var(--mint-100); color: var(--green-800); font: 700 .78rem/1.1 var(--font-body); letter-spacing: .04em; text-transform: uppercase; } .sa-chip--link { text-decoration: none; text-transform: none; letter-spacing: 0; font-size: .92rem; padding: .55em 1em; background: #fff; border: 1px solid var(--line-2); margin: 0; } .sa-chip--link:hover { border-color: var(--green); color: var(--green); } .sa-chip--link.is-active { background: var(--green); border-color: var(--green); color: #fff; } .sa-chip--link span { opacity: .7; font-weight: 400; } .sa-kicker { display: inline-flex; align-items: center; gap: .45em; margin: 0 0 .9em; font: 900 .76rem/1 var(--font-body); letter-spacing: .15em; text-transform: uppercase; color: var(--green); } .sa-kicker::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--lime); } .sa-kicker .sa-ico { width: 1.1em; height: 1.1em; } .sa-branch .sa-kicker::before, .sa-faq__head .sa-kicker::before { display: none; } .sa-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); display: inline-block; flex: none; } .sa-dot--pulse { box-shadow: 0 0 0 0 rgba(7, 130, 50, .45); animation: sa-pulse 2.2s infinite; } @keyframes sa-pulse { 0% { box-shadow: 0 0 0 0 rgba(7, 130, 50, .45); } 70% { box-shadow: 0 0 0 10px rgba(7, 130, 50, 0); } 100% { box-shadow: 0 0 0 0 rgba(7, 130, 50, 0); } } /* Stars */ .sa-stars { display: inline-flex; gap: 2px; vertical-align: -.15em; } .sa-star { position: relative; width: 1em; height: 1em; color: #d9e2dc; } .sa-star .sa-ico { width: 1em; height: 1em; stroke-width: 1.2; display: block; } .sa-star.is-full { color: var(--gold); } .sa-star.is-half { background: linear-gradient(90deg, var(--gold) 50%, #d9e2dc 50%); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.8 5.7 6.3.9-4.6 4.4 1.1 6.3L12 17.1l-5.6 3 1.1-6.3L2.9 9.4l6.3-.9z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8l2.8 5.7 6.3.9-4.6 4.4 1.1 6.3L12 17.1l-5.6 3 1.1-6.3L2.9 9.4l6.3-.9z'/%3E%3C/svg%3E") center / contain no-repeat; } .sa-star.is-half .sa-ico { opacity: 0; } /* ---------- Top bar & header ---------- */ .sa-topbar { background: var(--mint-50); border-bottom: 1px solid var(--line); color: var(--green-800); font-size: .86rem; } .sa-topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 38px; } .sa-topbar__msg { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .sa-topbar__msg span { display: inline-flex; align-items: center; gap: 6px; } .sa-topbar__msg a { color: inherit; font-weight: 700; text-decoration: none; } .sa-topbar__msg a:hover { color: var(--green); text-decoration: underline; } .sa-topbar__sep { opacity: .45; } @media (max-width: 429px) { .sa-topbar__msg .sa-topbar__sep { display: none; } .sa-topbar__msg { column-gap: 14px; } } .sa-topbar__msg .sa-hide-sm { display: none; } @media (min-width: 760px) { .sa-topbar__msg .sa-hide-sm { display: inline; } } .sa-topbar__right { display: none; align-items: center; gap: 18px; } .sa-topbar__phone { display: inline-flex; align-items: center; gap: 6px; color: inherit; font-weight: 700; text-decoration: none; } @media (min-width: 900px) { .sa-topbar__right { display: flex; } } .sa-header { position: sticky; top: 0; z-index: 60; background: rgba(255, 255, 255, .92); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid transparent; transition: box-shadow .3s, border-color .3s, background-color .3s; } .sa-header.is-scrolled { border-color: var(--line); box-shadow: 0 8px 24px -18px rgba(16, 40, 26, .4); background: rgba(255, 255, 255, .97); } .admin-bar .sa-header { top: 32px; } @media (max-width: 782px) { .admin-bar .sa-header { top: 46px; } } @media (max-width: 600px) { .admin-bar .sa-header { top: 0; } } .sa-header__inner { display: flex; align-items: center; gap: 20px; min-height: var(--header-h); transition: min-height .3s var(--ease); } .sa-header.is-scrolled .sa-header__inner { min-height: 64px; } .sa-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--ink); flex: none; } .sa-logo__mark { width: 46px; height: 46px; transition: transform .5s var(--ease-out); } .sa-logo:hover .sa-logo__mark { transform: rotate(-8deg) scale(1.04); } .sa-logo__text { display: flex; flex-direction: column; line-height: 1.05; } .sa-logo__text strong { font: 700 1.32rem/1.05 var(--font-head); color: var(--ink); letter-spacing: -.01em; } /* line-height 1.3, not 1: with overflow:hidden (ellipsis, below) a line box of 1 cut the breve of the capital Й (ШАРМ-ЭЛЬ-ШЕЙХ read as ШЕИХ on /ru/ and /uk/); margin-top 1px instead of 4px keeps the same height. */ .sa-logo__text span { margin-top: 1px; font: 700 .66rem/1.3 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--green); } .sa-nav { display: none; margin-left: auto; } .sa-nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; } .sa-nav__list > li { position: relative; display: flex; align-items: center; } .sa-nav__list > li > a { display: block; padding: 10px 11px; border-radius: 10px; color: var(--ink); font-weight: 700; font-size: .95rem; text-decoration: none; position: relative; white-space: nowrap; } .sa-nav__list > li > a::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 4px; height: 2px; border-radius: 2px; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); } .sa-nav__list > li > a:hover, .sa-nav__list > li.is-current > a, .sa-nav__list > .current-menu-item > a, .sa-nav__list > .current-menu-ancestor > a { color: var(--green); } .sa-nav__list > li > a:hover::after, .sa-nav__list > li.is-current > a::after, .sa-nav__list > .current-menu-item > a::after { transform: scaleX(1); } .sa-nav__toggle { display: none; } .sa-nav__sub, .sa-nav__list .sub-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 250px; z-index: 5; list-style: none; margin: 0; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .25s var(--ease), visibility .2s; } .sa-nav__sub::before, .sa-nav__list .sub-menu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; } .sa-nav__list > li:hover > .sa-nav__sub, .sa-nav__list > li:focus-within > .sa-nav__sub, .sa-nav__list > li.is-open > .sa-nav__sub, .sa-nav__list > li:hover > .sub-menu, .sa-nav__list > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; } .sa-nav__sub a, .sa-nav__list .sub-menu a { display: block; padding: 9px 12px; border-radius: 10px; color: var(--text); text-decoration: none; font-size: .94rem; font-weight: 400; } .sa-nav__sub a:hover, .sa-nav__list .sub-menu a:hover { background: var(--mint-50); color: var(--green-800); } /* 1160, not 1140: from 1140 to 1154 px the full nav wrapped and cut the logo line (keep header.php's resize check in sync) */ @media (min-width: 1160px) { .sa-nav { display: block; } .sa-burger { display: none !important; } } .sa-header__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; } @media (min-width: 1160px) { .sa-header__actions { margin-left: 8px; } } /* The menu button must always fit on screen: actions never shrink, the logo gives way. Below 560px the WhatsApp button is icon-only (label still read by screen readers). */ .sa-header__actions { flex: none; } .sa-logo { min-width: 0; flex: 0 1 auto; } .sa-logo__text { min-width: 0; } .sa-logo__text strong, .sa-logo__text span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @media (max-width: 559px) { .sa-header__inner { gap: 12px; } .sa-header__wa { width: 44px; height: 44px; padding: 0; } .sa-header__wa .sa-brand { width: 22px; height: 22px; } .sa-header__wa-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } .sa-logo__text span { letter-spacing: .1em; } } @media (max-width: 399px) { .sa-logo { gap: 10px; } .sa-logo__mark { width: 42px; height: 42px; } .sa-logo__text span { display: none; } } /* 320–359 px (small Android, iPhone SE 1st gen): tighten the row so the full "Apteka Sharm" still fits beside the actions. */ @media (max-width: 359px) { .sa-header__inner { gap: 10px; } .sa-header__actions { gap: 8px; } .sa-logo__text strong { font-size: 1.16rem; } } .sa-burger, .sa-header__wa, .sa-mbar a, .sa-loc a, .sa-loc button, .sa-offer a, .sa-offer button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .sa-burger { display: inline-grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; border: 1px solid var(--line-2); background: #fff; color: var(--ink); cursor: pointer; } .sa-burger { flex: none; } /* Three bars that morph into an X (CSS only, 200 ms). The visible label is one of two .sa-sr text nodes. */ .sa-burger__bars { position: relative; display: block; width: 20px; height: 14px; } .sa-burger__bars i { position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px; background: currentColor; transition: transform 200ms var(--ease), opacity 200ms var(--ease); } .sa-burger__bars i:nth-child(1) { top: 0; } .sa-burger__bars i:nth-child(2) { top: 6px; } .sa-burger__bars i:nth-child(3) { top: 12px; } .sa-burger[aria-expanded="true"] .sa-burger__bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); } .sa-burger[aria-expanded="true"] .sa-burger__bars i:nth-child(2) { opacity: 0; } .sa-burger[aria-expanded="true"] .sa-burger__bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .sa-burger[aria-expanded="true"] [data-when="closed"], .sa-burger:not([aria-expanded="true"]) [data-when="open"] { display: none; } .sa-calm .sa-burger__bars i { transition: none; } .sa-mnav { position: fixed; inset: 0; top: var(--sa-mnav-top, 114px); z-index: 75; background: #fff; overflow-y: auto; overscroll-behavior: contain; } .sa-mnav[hidden] { display: none; } .sa-mnav__inner { padding: 12px var(--gutter) 120px; animation: sa-fade-down .35s var(--ease-out); } .sa-mnav__list { list-style: none; margin: 0; padding: 0; } .sa-mnav__list > li { border-bottom: 1px solid var(--line); } .sa-mnav__list a, .sa-mnav__list summary { display: flex; align-items: center; justify-content: space-between; padding: 15px 4px; color: var(--ink); font: 600 1.12rem/1.2 var(--font-head); text-decoration: none; cursor: pointer; list-style: none; } .sa-mnav__list summary::-webkit-details-marker { display: none; } .sa-mnav__list details[open] summary .sa-ico { transform: rotate(180deg); } .sa-mnav__list summary .sa-ico { transition: transform .25s; color: var(--green); } .sa-mnav__list details ul { list-style: none; margin: 0 0 12px; padding: 0 0 0 12px; border-left: 2px solid var(--mint-200); } .sa-mnav__list details ul a { font: 400 1rem/1.3 var(--font-body); padding: 10px 8px; } .sa-mnav__cta { display: grid; gap: 10px; margin-top: 24px; } .sa-mnav__cta .sa-social { justify-content: center; margin-top: 8px; } @keyframes sa-fade-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } /* v2: the panel only fades; the items rise 10 px, 30 ms apart (--i capped at 7 in header.php). Instant under sa-calm. */ .sa-motion .sa-mnav__inner { animation: sa-fade-in 200ms linear; } .sa-motion .sa-mnav__list > li { animation: sa-mnav-in 300ms var(--spring-glide, cubic-bezier(.16, 1, .3, 1)) calc(var(--i, 0) * 30ms) both; } .sa-calm .sa-mnav__inner, .sa-calm .sa-mnav__list > li { animation: none; } @keyframes sa-mnav-in { from { translate: 0 10px; opacity: 0; } to { translate: none; opacity: 1; } } @keyframes sa-fade-in { from { opacity: 0; } } body.sa-menu-open { overflow: hidden; } /* ---------- Social ---------- */ .sa-social { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; flex-wrap: wrap; } .sa-social a { display: inline-grid; place-items: center; color: var(--green-800); text-decoration: none; transition: transform .25s var(--ease), background-color .2s, color .2s; } .sa-social--mini a { width: 28px; height: 28px; border-radius: 8px; } .sa-social--mini a:hover { background: #fff; color: var(--green); } .sa-social--mini .sa-brand { width: 15px; height: 15px; } .sa-social--row a { width: 42px; height: 42px; border-radius: 12px; background: #fff; border: 1px solid var(--line); } .sa-social--row a:hover { transform: translateY(-3px); color: var(--green); border-color: var(--mint-300); } .sa-social--row .sa-brand { width: 19px; height: 19px; } .sa-social--cards { gap: 14px; } .sa-social--cards a { display: flex; align-items: center; gap: 14px; padding: 14px 22px 14px 14px; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); } .sa-social--cards a:hover { transform: translateY(-3px); box-shadow: var(--shadow); color: var(--green); } .sa-social--cards .sa-brand { width: 44px; height: 44px; padding: 0; border-radius: 12px; background: none; position: relative; -webkit-mask: none; mask: none; } .sa-social--cards .sa-brand::before { content: ""; position: absolute; inset: 0; border-radius: 12px; background: var(--mint-100); } .sa-social--cards .sa-brand::after { content: ""; position: absolute; inset: 11px; background: var(--green); -webkit-mask: var(--sa-mask) center / contain no-repeat; mask: var(--sa-mask) center / contain no-repeat; } .sa-social__txt { display: flex; flex-direction: column; line-height: 1.25; } .sa-social__txt strong { color: var(--ink); } .sa-social__txt span { color: var(--muted); font-size: .9rem; } /* ---------- Motion helpers ---------- */ .sa-in { animation: sa-rise .9s var(--ease-out) both; animation-delay: calc(var(--d, 0) * 90ms + 80ms); } @keyframes sa-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } } /* Reveal start state only on :not(.is-in), and on translate, not transform: a revealed card keeps its own transform, so the hover lifts (.sa-card:hover, .sa-cat:hover…) work after the reveal. The lift transition has no stagger delay. */ .sa-js .sa-reveal { transition: opacity .65s var(--ease-out) calc(var(--i, 0) * 60ms), translate .65s var(--ease-out) calc(var(--i, 0) * 60ms), transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s, background-color .3s; } .sa-js .sa-reveal:not(.is-in) { opacity: 0; translate: 0 18px; } /* ---------- Hero ---------- */ .sa-hero { position: relative; overflow: hidden; padding: clamp(28px, 5vw, 72px) 0 clamp(52px, 7vw, 104px); isolation: isolate; } .sa-hero__bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(900px 520px at 88% -8%, var(--mint-100), transparent 62%), radial-gradient(700px 480px at -12% 108%, var(--mint-50), transparent 60%), #fff; } .sa-hero__bg::after { content: ""; position: absolute; inset: 0; background-image: var(--cross); opacity: .55; -webkit-mask-image: radial-gradient(600px 400px at 78% 30%, #000, transparent 70%); mask-image: radial-gradient(600px 400px at 78% 30%, #000, transparent 70%); } .sa-hero__grid { display: grid; gap: clamp(36px, 5vw, 64px); align-items: center; } @media (min-width: 980px) { .sa-hero__grid { grid-template-columns: 1.08fr .92fr; } } .sa-eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 8px 16px 8px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--mint-200); box-shadow: var(--shadow-sm); color: var(--green-800); font-weight: 700; font-size: .9rem; } .sa-hero__title { margin: 0 0 22px; } .sa-hero__title > span { display: block; text-wrap: balance; } .sa-underline { position: relative; font-style: italic; font-weight: 500; color: var(--green); white-space: nowrap; } .sa-underline::after { content: ""; position: absolute; left: -2%; right: -2%; bottom: -.16em; height: .34em; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9C45 3 86 3 122 7s78 6 115-2' fill='none' stroke='%239bc93a' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat 0 0 / 100% 100%; clip-path: inset(0 100% 0 0); animation: sa-draw 1.1s 1s var(--ease-out) forwards; } @keyframes sa-draw { to { clip-path: inset(0 0 0 0); } } .sa-hero__lead { font-size: clamp(1.06rem, 1rem + .3vw, 1.22rem); color: var(--muted); max-width: 33em; margin: 0 0 30px; } .sa-hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; } .sa-hero__ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; color: var(--text); font-size: .97rem; } .sa-hero__ticks li { display: flex; align-items: center; gap: 10px; } .sa-hero__ticks .sa-ico { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--mint-100); color: var(--green); stroke-width: 2.4; } @media (min-width: 640px) { .sa-hero__ticks { grid-template-columns: auto auto; column-gap: 26px; } .sa-hero__ticks li:last-child { grid-column: 1 / -1; } } .sa-hero__media { position: relative; padding: 0 0 18px; } .sa-hero__media::before { content: ""; position: absolute; z-index: -1; inset: 8% -6% -2% 10%; border-radius: 40px; background: linear-gradient(135deg, var(--mint-100), var(--mint-50)); transform: rotate(3deg); } .sa-hero__frame { position: relative; overflow: hidden; border-radius: var(--r-xl); background: var(--mint-100); aspect-ratio: 16 / 11; box-shadow: var(--shadow-lg); animation: sa-frame 1.3s .15s var(--ease-out) both; } @media (min-width: 980px) { .sa-hero__frame { aspect-ratio: 5 / 5.4; } } @keyframes sa-frame { from { clip-path: inset(9% 9% 9% 9% round 44px); transform: scale(1.05); opacity: .2; } to { clip-path: inset(0 0 0 0 round 32px); transform: none; opacity: 1; } } .sa-hero__video { width: 100%; height: 100%; object-fit: cover; } .sa-hero__pause { position: absolute; right: 14px; bottom: 14px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .88); color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-sm); transition: transform .2s; } .sa-hero__pause:hover { transform: scale(1.08); } .sa-hero__pause .sa-ico { width: 16px; height: 16px; display: none; } .sa-hero__pause-bars { width: 12px; height: 13px; border-left: 4px solid currentColor; border-right: 4px solid currentColor; } .sa-hero__pause.is-paused .sa-ico { display: block; } .sa-hero__pause.is-paused .sa-hero__pause-bars { display: none; } .sa-hero__badge { position: absolute; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 18px; background: #fff; box-shadow: var(--shadow); border: 1px solid var(--line); font-size: .9rem; line-height: 1.25; color: var(--ink); animation: sa-pop .8s var(--ease-out) both, sa-float 7s ease-in-out infinite; } .sa-hero__badge small { display: block; color: var(--muted); font-size: .78rem; } .sa-hero__badge--rating { left: -6px; bottom: 0; flex-wrap: wrap; max-width: 260px; animation-delay: 1.1s, 2s; } .sa-hero__badge--rating > span { font-weight: 400; } .sa-hero__badge--rating small { width: 100%; } .sa-hero__badge--lang { right: -6px; top: 22px; animation-delay: 1.35s, 3s; } .sa-hero__badge--lang strong { display: block; } @media (min-width: 980px) { .sa-hero__badge--rating { left: -38px; bottom: 34px; } .sa-hero__badge--lang { right: -26px; top: 36px; } } @media (max-width: 520px) { .sa-hero__badge--lang { display: none; } .sa-hero__badge--rating { left: 10px; } } @keyframes sa-pop { from { opacity: 0; transform: translateY(16px) scale(.94); } to { opacity: 1; transform: none; } } @keyframes sa-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } } /* v2 stage hero (sections-v2.css, CREATIVE-DIRECTION §7.6) on short desktop screens (1366×768, 1280×800, 1024×768): a tighter copy block, and the stage capped so that about 40 % of it shows above the fold (motion.js only loads the film once 25 % of it is on screen). Here, not in sections-v2.css, to keep that file inside its 4 KB gzip budget. */ @media (min-width: 980px) and (max-height: 900px) { .sa-hero--stage { padding-top: 20px; } .sa-hero--stage .sa-eyebrow { margin-bottom: 14px; } .sa-hero--stage .sa-hero__title { font-size: clamp(2.6rem, 1.6rem + 2.2vw, 3.4rem); margin-bottom: 14px; } .sa-hero--stage .sa-hero__lead { margin-bottom: 18px; } .sa-hero--stage .sa-hero__ctas { margin-bottom: 16px; } .sa-hero--stage .sa-hero__ticks { grid-template-columns: repeat(3, auto); } .sa-hero--stage .sa-hero__ticks li:last-child { grid-column: auto; } .sa-hero--stage .sa-hero__stage { margin-top: 24px; width: min(100%, 1120px, max(540px, (100svh - 530px) * 4.4)); } .sa-hero--stage .sa-hero__stage .sa-hero__badge--lang { top: -8px; } } /* ---------- Stats ---------- */ .sa-stats { border-block: 1px solid var(--line); background: #fff; } .sa-stats__grid { display: grid; grid-template-columns: repeat(2, 1fr); } @media (min-width: 820px) { .sa-stats__grid { grid-template-columns: repeat(4, 1fr); } } .sa-stat { display: flex; flex-direction: column-reverse; gap: 2px; padding: 22px 10px; text-align: center; } .sa-stat + .sa-stat { border-left: 1px solid var(--line); } @media (max-width: 819px) { .sa-stat:nth-child(3) { border-left: 0; } .sa-stat:nth-child(n+3) { border-top: 1px solid var(--line); } } .sa-stat strong { font: 600 clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem)/1.1 var(--font-head); color: var(--green); } .sa-stat > span { color: var(--muted); font-size: .9rem; } /* ---------- Sections ---------- */ .sa-section { padding-block: var(--section); position: relative; } .sa-head { max-width: 760px; margin-bottom: clamp(30px, 4vw, 52px); } .sa-head h2 { margin: 0; } .sa-head p { color: var(--muted); font-size: 1.06rem; margin: 14px 0 0; } .sa-head--split { max-width: none; display: grid; gap: 16px 56px; align-items: end; } .sa-head--split p { margin: 0; } @media (min-width: 900px) { .sa-head--split { grid-template-columns: 1.15fr .85fr; } } .sa-head--split > .sa-btn { justify-self: start; } @media (min-width: 900px) { .sa-head--split > .sa-btn { justify-self: end; } } .sa-services, .sa-reviews, .sa-follow { background: var(--mint-50); } .sa-cats { background: linear-gradient(180deg, #fff, var(--mint-25)); } .sa-blog-latest { background: var(--sand); } /* Why */ .sa-why__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; } @media (min-width: 620px) { .sa-why__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1040px) { .sa-why__grid { grid-template-columns: repeat(4, 1fr); } } .sa-why__item { position: relative; padding: 28px 24px 26px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; } .sa-why__item:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--mint-300); } .sa-why__num { position: absolute; right: 18px; top: 10px; font: italic 600 3.2rem/1 var(--font-head); color: var(--mint-100); transition: color .35s; } .sa-why__item:hover .sa-why__num { color: var(--mint-200); } .sa-why__item h3 { margin: 18px 0 8px; } .sa-why__item p { margin: 0; color: var(--muted); font-size: .97rem; } /* Cards */ .sa-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; } .sa-cards > li { display: flex; } .sa-cards > li > article { flex: 1; } @media (min-width: 640px) { .sa-cards--2, .sa-cards--3, .sa-cards--4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .sa-cards--3 { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1100px) { .sa-cards--4 { grid-template-columns: repeat(4, 1fr); } } .sa-card { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; } .sa-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--mint-300); } .sa-card:hover .sa-card__title a, .sa-card:hover h3 a { color: var(--green); } .sa-stretched { color: inherit; text-decoration: none; } .sa-stretched::after { content: ""; position: absolute; inset: 0; z-index: 1; } .sa-card--service { padding: 28px 26px 24px; } .sa-card--service h3 { margin: 20px 0 8px; } .sa-card--service h3 a { color: var(--ink); } .sa-card--service p { color: var(--muted); margin: 0 0 18px; font-size: .97rem; } .sa-card__more { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--green); font-weight: 700; font-size: .92rem; } .sa-card__more .sa-ico { transition: transform .3s var(--ease); } .sa-card:hover .sa-card__more .sa-ico { transform: translateX(4px); } .sa-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--mint-50); } .sa-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); } .sa-card:hover .sa-card__media img { transform: scale(1.05); } .sa-card.is-product .sa-card__media img { object-position: 50% 55%; } .sa-card__media--icon { display: grid; place-items: center; color: var(--green); background: linear-gradient(135deg, var(--mint-100), var(--mint-50)); } .sa-card__media--icon .sa-ico { width: 56px; height: 56px; stroke-width: 1.4; } .sa-card__body { display: flex; flex-direction: column; flex: 1; padding: 20px 22px 22px; } .sa-card__body .sa-chip { align-self: flex-start; margin-bottom: 10px; } .sa-card__title { font-size: 1.18rem; margin: 0 0 8px; } .sa-card__title a { color: var(--ink); transition: color .2s; } .sa-card__text { color: var(--muted); font-size: .95rem; margin: 0 0 14px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .sa-card__meta { margin: auto 0 0; display: flex; gap: 14px; color: var(--muted); font-size: .84rem; } .sa-card--page.no-media .sa-card__body, .sa-card--guide.no-media .sa-card__body { padding-top: 24px; } @media (min-width: 900px) { .sa-bloglist__lead { grid-column: 1 / -1; } .sa-card--lead { display: grid; grid-template-columns: 1.15fr 1fr; } .sa-card--lead .sa-card__media { aspect-ratio: auto; min-height: 320px; } .sa-card--lead .sa-card__body { padding: 36px 40px; justify-content: center; } .sa-card--lead .sa-card__title { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); } .sa-card--lead .sa-card__text { -webkit-line-clamp: 4; font-size: 1.02rem; } } /* Branches */ .sa-branches__grid { display: grid; gap: 22px; } @media (min-width: 760px) { .sa-branches__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1120px) { .sa-branches__grid { grid-template-columns: 1fr 1fr .82fr; } } .sa-branch { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: box-shadow .35s var(--ease), transform .35s var(--ease); } .sa-branch--card:hover { box-shadow: var(--shadow); transform: translateY(-4px); } .sa-branch__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--mint-100); } .sa-branch__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); } .sa-branch--card:hover .sa-branch__media img { transform: scale(1.04); } .sa-branch__open { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .94); font-size: .82rem; font-weight: 700; color: var(--green-800); box-shadow: var(--shadow-sm); } .sa-branch__body { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; } .sa-branch__body .sa-kicker { margin-bottom: 10px; letter-spacing: .1em; } .sa-branch__title { margin: 0 0 6px; font-size: 1.32rem; } .sa-branch__title a { color: var(--ink); text-decoration: none; } .sa-branch__title a:hover { color: var(--green); } .sa-branch__addr { color: var(--muted); font-size: .95rem; margin: 0 0 12px; } .sa-branch__rating { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; font-size: .93rem; } .sa-branch__rating strong { color: var(--ink); } .sa-branch__rating span:last-child { color: var(--muted); } .sa-branch__facts { list-style: none; padding: 14px 0 0; margin: 0 0 18px; border-top: 1px dashed var(--line-2); display: grid; gap: 8px; font-size: .92rem; } .sa-branch__facts li { display: flex; align-items: center; gap: 9px; } .sa-branch__facts .sa-ico { color: var(--green); } .sa-branch__actions { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; } .sa-branch--more { padding: 30px 26px; background: linear-gradient(160deg, var(--mint-100), var(--mint-50) 60%, #fff); border-color: var(--mint-200); } .sa-branch--more p { color: var(--text); } .sa-branch--more .sa-branch__actions { margin: 6px 0 18px; } .sa-branch__more-num { font: 600 4.2rem/1 var(--font-head); color: var(--green); margin-bottom: 10px; letter-spacing: -.03em; } .sa-branch--panel { border-radius: var(--r-lg); box-shadow: var(--shadow-sm); } .sa-branch--panel .sa-branch__title { font-size: 1.12rem; } .sa-branch--panel .sa-branch__body { padding: 20px; } /* Categories */ .sa-cats__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); } @media (min-width: 900px) { .sa-cats__grid { grid-template-columns: repeat(4, 1fr); gap: 18px; } } .sa-cat { position: relative; padding: 16px 16px 20px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; } .sa-cat:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--mint-300); } .sa-cat__media { aspect-ratio: 1 / 1; border-radius: 16px; margin-bottom: 14px; display: grid; place-items: center; overflow: hidden; background: linear-gradient(135deg, var(--mint-100), var(--mint-50)); } .sa-cat__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); } .sa-cat:hover .sa-cat__media img { transform: scale(1.06); } .sa-cat__icon { color: var(--green); } .sa-cat__icon .sa-ico { width: 64px; height: 64px; stroke-width: 1.3; } .sa-cat h3 { font-size: 1.08rem; margin: 0 0 4px; } .sa-cat h3 a { color: var(--ink); } .sa-cat:hover h3 a { color: var(--green); } .sa-cat p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.45; } /* Fair prices */ .sa-fair__grid { display: grid; gap: 40px; } @media (min-width: 1000px) { .sa-fair__grid { grid-template-columns: .9fr 1.1fr; gap: 64px; align-items: start; } } .sa-fair__intro p { color: var(--muted); font-size: 1.06rem; } .sa-fair__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 26px 0 30px; } .sa-fair__photo { margin: 0; } .sa-fair__photo img { border-radius: var(--r-lg); box-shadow: var(--shadow); aspect-ratio: 16 / 10; object-fit: cover; width: 100%; } .sa-fair__photo figcaption { margin-top: 10px; color: var(--muted); font-size: .86rem; } .sa-fair__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } @media (min-width: 640px) { .sa-fair__list { grid-template-columns: repeat(2, 1fr); } } .sa-fair__list li { display: flex; gap: 16px; padding: 22px; border-radius: var(--r-lg); background: var(--mint-25); border: 1px solid var(--line); transition: background-color .3s, border-color .3s; } .sa-fair__list li:hover { background: #fff; border-color: var(--mint-300); } .sa-fair__list h3 { font-size: 1.06rem; margin: 2px 0 6px; } .sa-fair__list p { margin: 0; color: var(--muted); font-size: .93rem; } /* Reviews */ .sa-ratings { display: grid; gap: 18px; } @media (min-width: 720px) { .sa-ratings { grid-template-columns: repeat(2, 1fr); } } .sa-rating { padding: 26px 28px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); } .sa-rating__name { margin: 0 0 4px; font-weight: 700; color: var(--ink); } .sa-rating__score { display: flex; align-items: center; gap: 14px; margin: 0 0 4px; } .sa-rating__score strong { font: 600 3rem/1 var(--font-head); color: var(--ink); } .sa-rating__score .sa-stars { font-size: 1.35rem; } .sa-rating__count { color: var(--muted); font-size: .9rem; margin: 0 0 14px; } .sa-rating__links { display: flex; flex-wrap: wrap; gap: 18px; } .sa-reviews__widget { margin-top: 24px; } .sa-quotes { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 18px; } @media (min-width: 900px) { .sa-quotes { grid-template-columns: repeat(3, 1fr); } } .sa-quote { padding: 24px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); } .sa-quote blockquote { margin: 12px 0; font: italic 400 1.04rem/1.6 var(--font-head); color: var(--ink); } .sa-quote blockquote p { margin: 0; } .sa-quote__by { margin: 0; color: var(--muted); font-size: .86rem; } .sa-marquee { margin-top: clamp(32px, 5vw, 56px); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .sa-marquee__track { list-style: none; margin: 0; padding: 0; display: flex; gap: 16px; width: max-content; animation: sa-marquee 60s linear infinite; } .sa-marquee:hover .sa-marquee__track { animation-play-state: paused; } .sa-marquee__track li { width: clamp(220px, 26vw, 320px); flex: none; } .sa-marquee__track img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 18px; } @keyframes sa-marquee { to { transform: translateX(calc(-50% - 8px)); } } /* Guides */ .sa-guides .sa-card--guide .sa-card__media { aspect-ratio: 16 / 9; } /* FAQ */ .sa-faq { margin-top: 8px; } .sa-faq__head { margin-bottom: 18px; } .sa-faq__head h2 { margin: 0; } .sa-faq__nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; } .sa-faq__group { font-size: 1.3rem; margin: 36px 0 10px; padding-top: 8px; } .sa-faq__list { border-top: 1px solid var(--line); } .sa-faq__item { border-bottom: 1px solid var(--line); } .sa-faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px 2px; cursor: pointer; list-style: none; font-weight: 700; color: var(--ink); font-size: 1.04rem; line-height: 1.4; } .sa-faq__item summary::-webkit-details-marker { display: none; } .sa-faq__item summary:hover { color: var(--green); } .sa-faq__plus { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--mint-100); transition: background-color .25s, transform .35s var(--ease); } .sa-faq__plus::before, .sa-faq__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--green); transition: transform .35s var(--ease); } .sa-faq__plus::after { transform: rotate(90deg); } .sa-faq__item[open] .sa-faq__plus { background: var(--green); transform: rotate(180deg); } .sa-faq__item[open] .sa-faq__plus::before, .sa-faq__item[open] .sa-faq__plus::after { background: #fff; } .sa-faq__item[open] .sa-faq__plus::after { transform: rotate(0deg); } .sa-faq__a { padding: 0 48px 20px 2px; color: var(--text); animation: sa-fade-down .35s var(--ease-out); } .sa-faq__a p { margin: 0; } .sa-faq__more { margin: 28px 0 0; } .sa-section--faq { background: #fff; } /* Follow */ .sa-follow__inner { display: grid; gap: 24px; align-items: center; } .sa-follow__inner h2 { margin: 0; } @media (min-width: 960px) { .sa-follow__inner { grid-template-columns: 1fr auto; } } /* CTA band */ .sa-cta { padding: clamp(28px, 4vw, 48px) 0 clamp(56px, 7vw, 96px); } .sa-cta__inner { position: relative; overflow: hidden; display: grid; gap: 26px; align-items: center; padding: clamp(30px, 5vw, 56px); border-radius: var(--r-xl); background: linear-gradient(125deg, var(--green) 0%, #0a9a3e 55%, #13a64a 100%); color: #eaf7ee; box-shadow: var(--shadow-lg); } .sa-cta__inner::before { content: ""; position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cpath d='M20 15h4v5h5v4h-5v5h-4v-5h-5v-4h5z' fill='%23ffffff' fill-opacity='.08'/%3E%3C/svg%3E"); pointer-events: none; } .sa-cta__inner > * { position: relative; } .sa-cta h2 { color: #fff; margin: 0 0 10px; } .sa-cta p { margin: 0; color: #d9f1e1; } .sa-cta .sa-kicker { color: #d4f0b0; } .sa-cta .sa-kicker::before { background: #d4f0b0; } .sa-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; } @media (min-width: 960px) { .sa-cta__inner { grid-template-columns: 1.3fr auto; } } /* Why band (above the footer) */ .sa-whyband { background: var(--mint-50); border-top: 1px solid var(--line); padding: 22px 0; } .sa-whyband .sa-container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 28px; } .sa-whyband__title { margin: 0; font: 600 1.15rem/1.2 var(--font-head); color: var(--ink); } .sa-whyband__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; } .sa-whyband__list li { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--green-800); font-size: .95rem; } .sa-whyband__list .sa-ico { color: var(--green); } /* ---------- Footer ---------- */ .sa-footer { background: var(--mint-25); border-top: 1px solid var(--line); color: var(--text); font-size: .95rem; } .sa-footer__grid { display: grid; gap: 34px; padding-block: clamp(44px, 6vw, 72px) 30px; } @media (min-width: 700px) { .sa-footer__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { .sa-footer__grid { grid-template-columns: 1.35fr 1.2fr .9fr .8fr 1fr; gap: 40px; } } .sa-footer__brand p { color: var(--muted); margin: 16px 0 18px; max-width: 30em; } .sa-footer__h { font: 900 .76rem/1 var(--font-body); letter-spacing: .15em; text-transform: uppercase; color: var(--green); margin: 4px 0 16px; } .sa-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } .sa-footer ul.sa-social { display: flex; gap: 10px; } .sa-footer__col a { color: var(--text); text-decoration: none; } .sa-footer__col a:hover { color: var(--green); text-decoration: underline; } .sa-footer__branches { gap: 16px !important; } .sa-footer__branches li { display: flex; flex-direction: column; gap: 3px; } .sa-footer__branches span { color: var(--muted); font-size: .9rem; } .sa-footer__branches strong { color: var(--ink); } .sa-footer__dir { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .88rem; color: var(--green-700) !important; } .sa-footer__contact a, .sa-footer__contact span { display: inline-flex; align-items: center; gap: 9px; } .sa-footer__contact .sa-ico, .sa-footer__contact .sa-brand { color: var(--green); } .sa-footer__disclaimer { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 26px; padding: 14px 18px; border-radius: 14px; background: #fff; border: 1px solid var(--line); color: var(--muted); font-size: .86rem; } .sa-footer__disclaimer .sa-ico { color: var(--green); margin-top: 2px; } .sa-footer__bottom { border-top: 1px solid var(--line); background: var(--mint-50); font-size: .86rem; color: var(--muted); } .sa-footer__bottom-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; padding-block: 18px; } .sa-footer__bottom p { margin: 0; } .sa-footer__legal { display: flex; flex-wrap: wrap; gap: 8px 18px; } .sa-footer__bottom a { color: var(--green-800); } /* ---------- Language switcher (2.1) ---------- sa_language_switcher() (inc/languages.php) prints the markup; header.php and footer.php wrap each variant in .sa-lsw--header (top bar, shown with .sa-topbar__right from 900 px), .sa-lsw--menu (top of the mobile menu) and .sa-lsw--footer (brand column), and print no wrapper when it prints nothing (no Polylang). The rules assume only a nav with links (in a list or not), short labels (EN RU UA IT) and the current language marked with aria-current (a link or a span), so they follow the markup without depending on its classes. */ .sa-lsw :is(nav, ul, ol) { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; } .sa-lsw li { display: flex; margin: 0; padding: 0; } .sa-lsw li::before, .sa-lsw li::marker { content: none; } .sa-lsw :is(a, [aria-current]) { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 700; letter-spacing: .05em; line-height: 1; text-decoration: none; white-space: nowrap; transition: background-color .2s, color .2s, border-color .2s; } .sa-lsw a:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } /* Top bar: a compact pill group, the current language filled green. */ .sa-lsw--header { display: flex; flex: none; padding: 2px; border: 1px solid var(--line-2); border-radius: 999px; background: #fff; } .sa-lsw--header :is(nav, ul, ol) { gap: 2px; } .sa-lsw--header :is(a, [aria-current]) { min-width: 32px; height: 24px; padding: 0 8px; border-radius: 999px; color: var(--green-800); font-size: .74rem; } .sa-lsw--header a:hover { background: var(--mint-100); color: var(--green-800); } .sa-lsw--header [aria-current]:not([aria-current="false"]) { background: var(--green); color: #fff; } /* 900–1099 px: the burger is shown, the top bar is shorter; the socials (also in the menu and the footer) give way. */ @media (max-width: 1099px) { .sa-topbar__right.has-langs { gap: 14px; } .sa-topbar__right.has-langs .sa-social--mini { display: none; } } /* Mobile menu: four equal buttons in one row, 44 px tall. */ .sa-lsw--menu { margin: 4px 0 10px; } .sa-lsw--menu :is(nav, ul, ol) { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; } .sa-lsw--menu li { display: block; min-width: 0; } .sa-lsw--menu :is(a, [aria-current]) { width: 100%; min-height: 44px; padding: 0 6px; border: 1px solid var(--line-2); border-radius: 12px; background: #fff; color: var(--ink); font-size: .92rem; } .sa-lsw--menu a:hover { border-color: var(--mint-300); color: var(--green); } .sa-lsw--menu [aria-current]:not([aria-current="false"]) { border-color: var(--green); background: var(--mint-50); color: var(--green-800); box-shadow: inset 0 0 0 1px var(--green); } /* Footer: the same pill group as the top bar, under the social links. */ .sa-lsw--footer { display: inline-flex; margin-top: 18px; padding: 2px; border: 1px solid var(--line); border-radius: 999px; background: #fff; } .sa-lsw--footer :is(nav, ul, ol) { gap: 2px; } .sa-footer .sa-lsw--footer ul { display: flex; gap: 2px; } .sa-lsw--footer :is(a, [aria-current]) { min-width: 40px; height: 32px; padding: 0 10px; border-radius: 999px; color: var(--green-800); font-size: .8rem; } .sa-lsw--footer a:hover { background: var(--mint-100); color: var(--green-800); text-decoration: none; } .sa-lsw--footer [aria-current]:not([aria-current="false"]) { background: var(--green); color: #fff; } /* The hero language badge: the four names wrap between names, never inside one. */ .sa-hero__langs > [lang] { white-space: nowrap; } .sa-hero__badge--lang > span:last-child { min-width: 0; } /* ---------- Longer strings on the Russian, Ukrainian and Italian pages (2.1) ---------- Scoped to html:not([lang|="en"]) (language_attributes() gives en-US, ru-RU, uk, it-IT), so English pages render exactly as in 2.0. Measured in headless Chrome with RU/UK/IT strings at 360–1440 px. */ /* A long word or label breaks instead of widening the page; buttons may take two lines rather than overflow. */ html:not([lang|="en"]) :is(h1, h2, h3, p, li, .sa-chip, .sa-kicker) { overflow-wrap: break-word; } html:not([lang|="en"]) .sa-btn { max-width: 100%; white-space: normal; text-align: center; overflow-wrap: break-word; } /* Mobile bar: a label may wrap onto two short lines. */ html:not([lang|="en"]) .sa-mbar a > span:last-child { max-width: 100%; padding-inline: 2px; text-align: center; line-height: 1.15; overflow-wrap: break-word; hyphens: auto; } /* Home H1: the italic second line («с официальными ценами» is 408 px at 360) wraps on phones instead of widening the copy column past the screen; the underline then sits under its last line. */ html:not([lang|="en"]) .sa-hero__copy { min-width: 0; } html:not([lang|="en"]) .sa-underline { display: inline-block; max-width: 100%; white-space: normal; text-wrap: balance; } /* Top bar: the phone never breaks; 900–1099 px (phone and switcher on the right) leaves out the transfer link, which the hero, the services and the offer card also carry, so the message keeps to one line. */ html:not([lang|="en"]) .sa-topbar__phone { white-space: nowrap; } @media (min-width: 900px) and (max-width: 1099px) { html:not([lang|="en"]) .sa-topbar__msg .sa-hide-sm { display: none; } } /* Desktop nav: the translated labels («Здоровье на отдыхе», «Вопросы и ответы») are 120–180 px longer than the English ones. Tighter items from 1160 px, and an icon-only WhatsApp button up to 1279 px, keep the logo whole. */ @media (min-width: 1160px) { html:not([lang|="en"]) .sa-nav__list > li > a { padding-inline: 7px; font-size: .9rem; } } @media (min-width: 1160px) and (max-width: 1279px) { html:not([lang|="en"]) .sa-header__wa { width: 44px; height: 44px; padding: 0; } html:not([lang|="en"]) .sa-header__wa .sa-brand { width: 22px; height: 22px; } html:not([lang|="en"]) .sa-header__wa-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } } /* ---------- Page hero ---------- */ .sa-phero { position: relative; overflow: hidden; isolation: isolate; padding: clamp(26px, 4vw, 48px) 0 clamp(36px, 5vw, 64px); border-bottom: 1px solid var(--line); } .sa-phero__bg { position: absolute; inset: 0; z-index: -1; background: radial-gradient(800px 420px at 92% 0%, var(--mint-100), transparent 64%), linear-gradient(180deg, var(--mint-50), #fff 85%); } .sa-phero__bg::after { content: ""; position: absolute; inset: 0; background-image: var(--cross); opacity: .5; -webkit-mask-image: radial-gradient(520px 320px at 85% 20%, #000, transparent 72%); mask-image: radial-gradient(520px 320px at 85% 20%, #000, transparent 72%); } .sa-phero__grid { display: grid; gap: 30px; align-items: center; } @media (min-width: 960px) { .sa-phero.has-media .sa-phero__grid { grid-template-columns: 1.25fr .75fr; gap: 56px; } } .sa-phero__title { font-size: clamp(1.95rem, 1.3rem + 2.3vw, 3.15rem); margin: 0 0 14px; max-width: 22ch; } .sa-phero:not(.has-media) .sa-phero__title { max-width: 28ch; } .sa-phero__lead { font-size: clamp(1.03rem, 1rem + .25vw, 1.16rem); color: var(--muted); max-width: 40em; margin: 0 0 16px; } .sa-phero__meta { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .sa-phero__meta li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: .86rem; color: var(--text); } .sa-phero__meta .sa-ico { color: var(--green); width: 1em; height: 1em; } .sa-phero__media { justify-self: center; width: 100%; max-width: 440px; } .sa-plinth { position: relative; aspect-ratio: 1 / 1; max-width: 360px; margin-inline: auto; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); background: var(--mint-100); } .sa-plinth img { width: 100%; height: 100%; object-fit: cover; } .sa-phero__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); } .sa-crumbs ol { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; font-size: .86rem; color: var(--muted); } .sa-crumbs li { display: inline-flex; align-items: center; gap: 4px; } .sa-crumbs li + li::before { content: "/"; opacity: .5; margin: 0 4px; } .sa-crumbs a { color: var(--green-700); text-decoration: none; font-weight: 700; } .sa-crumbs a:hover { text-decoration: underline; } /* ---------- Layout & prose ---------- */ .sa-layout { display: grid; gap: 44px; padding-block: clamp(36px, 5vw, 64px) clamp(40px, 5vw, 72px); } @media (min-width: 1040px) { .sa-layout { grid-template-columns: minmax(0, 1fr) 318px; gap: 64px; } } .sa-content { min-width: 0; } .sa-prose { max-width: 740px; font-size: 1.05rem; line-height: 1.75; } .sa-prose > *:first-child { margin-top: 0; } .sa-prose h2 { font-size: clamp(1.45rem, 1.2rem + .9vw, 1.95rem); margin: 2.1em 0 .6em; scroll-margin-top: calc(var(--header-h) + 20px); } .sa-prose h3 { font-size: 1.24rem; margin: 1.7em 0 .5em; } .sa-prose p, .sa-prose ul, .sa-prose ol { margin: 0 0 1.15em; } .sa-prose ul { list-style: none; padding-left: 0; } .sa-prose ul > li { position: relative; padding-left: 1.6em; margin-bottom: .5em; } .sa-prose ul > li::before { content: ""; position: absolute; left: .25em; top: .62em; width: .5em; height: .5em; border-radius: 50%; background: var(--mint-300); box-shadow: inset 0 0 0 2px var(--green); } .sa-prose ol { padding-left: 0; list-style: none; counter-reset: sa-ol; } .sa-prose ol > li { position: relative; padding-left: 2.4em; margin-bottom: .6em; counter-increment: sa-ol; } .sa-prose ol > li::before { content: counter(sa-ol); position: absolute; left: 0; top: .05em; width: 1.7em; height: 1.7em; border-radius: 50%; display: grid; place-items: center; background: var(--mint-100); color: var(--green-800); font-weight: 900; font-size: .85em; } .sa-prose li > ul, .sa-prose li > ol { margin: .5em 0 0; } .sa-prose strong { color: var(--ink); } .sa-prose a { font-weight: 700; } .sa-prose blockquote { margin: 1.6em 0; padding: 0 0 0 20px; border-left: 3px solid var(--mint-300); font-style: italic; } .sa-prose hr { border: 0; height: 1px; background: var(--line); margin: 2.4em 0; } .sa-prose .wp-block-table { margin: 1.7em 0; overflow-x: auto; } .sa-prose table { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; font-size: .94rem; line-height: 1.5; } .sa-prose th, .sa-prose td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; } .sa-prose th { background: var(--mint-50); color: var(--ink); font-weight: 700; } .sa-prose tr:last-child td { border-bottom: 0; } .sa-prose tbody tr:nth-child(even) td { background: var(--mint-25); } @media (max-width: 640px) { .sa-prose table { min-width: 560px; } } .sa-callout { position: relative; margin: 1.8em 0; padding: 20px 22px 20px 24px; border-radius: 16px; border: 1px solid var(--line); background: var(--sand); overflow: hidden; } .sa-callout::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--line-2); } .sa-callout > *:last-child { margin-bottom: 0; } .sa-callout ul, .sa-callout ol { margin-top: .4em; } .sa-callout--action { background: var(--mint-50); border-color: var(--mint-200); } .sa-callout--action::before { background: var(--green); } .sa-callout--action strong:first-child { color: var(--green-800); } .sa-callout--urgent { background: var(--rose-50); border-color: var(--rose-200); } .sa-callout--urgent::before { background: var(--rose-700); } .sa-callout--urgent strong:first-child { color: var(--rose-700); } .sa-callout--urgent ul > li::before { background: var(--rose-200); box-shadow: inset 0 0 0 2px var(--rose-700); } mark.sa-tbc { background: #fff3b0; color: #5e4500; padding: .08em .4em; border-radius: 5px; border: 1px dashed #d9a800; font-size: .88em; font-weight: 700; } .sa-sources { margin: 40px 0 0; border: 1px solid var(--line); border-radius: 16px; background: #fff; } .sa-sources summary { display: flex; align-items: center; gap: 10px; padding: 16px 18px; cursor: pointer; list-style: none; font-weight: 700; color: var(--ink); } .sa-sources summary::-webkit-details-marker { display: none; } .sa-sources summary > span { flex: 1; } .sa-sources summary .sa-ico { color: var(--green); } .sa-sources summary .sa-ico--chevron { transition: transform .25s; } .sa-sources[open] summary .sa-ico--chevron { transform: rotate(180deg); } .sa-sources ol { margin: 0; padding: 0 22px 18px 40px; font-size: .9rem; line-height: 1.5; display: grid; gap: 6px; } .sa-sources a { color: var(--green-700); word-break: break-word; } .sa-updated { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; font-size: .85rem; color: var(--muted); } .sa-updated .sa-ico { color: var(--green); } .sa-content .sa-faq { margin-top: 48px; } .sa-kids { margin-top: 56px; } .sa-kids__title { font-size: clamp(1.35rem, 1.15rem + .6vw, 1.7rem); margin-bottom: 20px; } .sa-author { display: flex; gap: 16px; align-items: flex-start; margin-top: 36px; padding: 20px 22px; border-radius: 18px; background: var(--mint-50); border: 1px solid var(--line); } .sa-author p { margin: 0 0 4px; font-size: .95rem; } /* Aside */ .sa-aside { min-width: 0; } .sa-aside__sticky { display: grid; gap: 18px; } @media (min-width: 1040px) { .sa-aside__sticky { position: sticky; top: calc(var(--header-h) + 22px); } } .sa-askcard { padding: 20px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-sm); display: grid; gap: 10px; } .sa-askcard__top { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; } .sa-askcard__top strong { display: block; color: var(--ink); font-family: var(--font-head); font-size: 1.12rem; } .sa-askcard__top span { color: var(--muted); font-size: .84rem; } .sa-askcard__note { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; font-size: .88rem; color: var(--green-800); font-weight: 700; } .sa-toc { padding: 18px 20px; border-radius: var(--r-lg); background: var(--mint-25); border: 1px solid var(--line); } .sa-toc__title { margin: 0 0 10px; font: 900 .74rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--green); } .sa-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; border-left: 2px solid var(--line); } .sa-toc a { display: block; padding: 6px 0 6px 14px; margin-left: -2px; border-left: 2px solid transparent; color: var(--text); text-decoration: none; font-size: .9rem; line-height: 1.35; } .sa-toc a:hover, .sa-toc a.is-active { color: var(--green); border-left-color: var(--green); } @media (max-width: 1039px) { .sa-toc { display: none; } } .sa-emergency { display: flex; gap: 12px; padding: 16px 18px; border-radius: var(--r-lg); background: var(--rose-50); border: 1px solid var(--rose-200); font-size: .9rem; } .sa-emergency .sa-ico { color: var(--rose-700); margin-top: 2px; } .sa-emergency p { margin: 0; } .sa-emergency a { color: var(--rose-700); font-weight: 900; } /* Products */ .sa-products { padding-top: clamp(30px, 4vw, 48px); } .sa-products__head { display: grid; gap: 6px 40px; margin-bottom: 22px; align-items: end; } .sa-products__head h2 { margin: 0; font-size: clamp(1.4rem, 1.15rem + .8vw, 1.85rem); } .sa-products__head p { margin: 0; color: var(--muted); } @media (min-width: 900px) { .sa-products__head { grid-template-columns: auto 1fr; } .sa-products__head p { text-align: right; } } .sa-products__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); } @media (min-width: 680px) { .sa-products__grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1060px) { .sa-products__grid { grid-template-columns: repeat(4, 1fr); gap: 18px; } } .sa-product { display: flex; flex-direction: column; padding: 14px 14px 16px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line); transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s; } .sa-product:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--mint-300); } .sa-product__media { aspect-ratio: 1 / 1; border-radius: 14px; margin-bottom: 12px; background: var(--mint-100); overflow: hidden; } .sa-product__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); } .sa-product:hover .sa-product__media img { transform: scale(1.05); } .sa-product__name { font: 700 .98rem/1.3 var(--font-body); margin: 0 0 2px; color: var(--ink); } .sa-product__note { margin: 0 0 12px; color: var(--muted); font-size: .85rem; } .sa-product__ask { margin-top: auto; display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: .87rem; color: var(--green-700); text-decoration: none; } .sa-product__ask:hover { color: var(--green); text-decoration: underline; } /* Gallery */ .sa-gallery { padding-top: 0; } .sa-gallery__title { font-size: clamp(1.35rem, 1.15rem + .6vw, 1.7rem); } .sa-gallery__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); } @media (min-width: 900px) { .sa-gallery__grid { grid-template-columns: repeat(4, 1fr); } } .sa-gallery__grid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 18px; } /* Blog list */ .sa-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: clamp(26px, 4vw, 40px) 0 26px; } .sa-bloglist { margin-bottom: 40px; } .sa-pager { margin: 10px 0 60px; } .sa-pager .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .sa-pager .page-numbers { min-width: 44px; height: 44px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--line-2); text-decoration: none; color: var(--ink); font-weight: 700; } .sa-pager .page-numbers.current { background: var(--green); border-color: var(--green); color: #fff; } .sa-empty { padding: 40px 0; color: var(--muted); } /* Search form, 404 */ .search-form { display: flex; gap: 8px; max-width: 540px; margin: 28px 0; } .search-form label { flex: 1; } .search-form .search-field { width: 100%; padding: 13px 18px; border: 1.5px solid var(--line-2); border-radius: 999px; font: inherit; background: #fff; } .search-form .search-field:focus { border-color: var(--green); outline: none; box-shadow: 0 0 0 4px var(--mint-100); } .search-form .search-submit { padding: 0 22px; border: 0; border-radius: 999px; background: var(--green); color: #fff; font-weight: 700; cursor: pointer; } .sa-404 { padding-block: 40px; } .sa-404__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .sa-404__links a { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-radius: 16px; border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-weight: 700; background: #fff; transition: transform .25s var(--ease), box-shadow .25s; } .sa-404__links a:hover { transform: translateY(-3px); box-shadow: var(--shadow); color: var(--green); } .sa-404__links .sa-ico { color: var(--green); } /* ---------- Floating WhatsApp, mobile bar, offer ---------- */ .sa-float-wa { position: fixed; right: 20px; bottom: 22px; z-index: 50; width: 60px; height: 60px; border-radius: 50%; display: none; place-items: center; background: var(--wa); color: var(--wa-ink); box-shadow: 0 14px 30px -10px rgba(37, 211, 102, .8); transition: transform .3s var(--ease); } .sa-float-wa::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--wa); animation: sa-ring 2.6s var(--ease-out) infinite; } .sa-float-wa .sa-brand { width: 30px; height: 30px; } .sa-float-wa:hover { transform: scale(1.07); color: var(--wa-ink); } @keyframes sa-ring { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.55); opacity: 0; } } @media (min-width: 900px) { .sa-float-wa { display: grid; } } /* Outside the 1200 px content column wherever there is room (from about 1366 px), so it never sits on the aside's WhatsApp and phone buttons. Narrower screens: main.js hides it while those buttons are on screen (.sa-float-off). */ .sa-float-wa { right: max(20px, calc(50vw - 672px)); transition: transform .3s var(--ease), opacity .25s linear, visibility .25s; } .sa-float-off .sa-float-wa { opacity: 0; visibility: hidden; pointer-events: none; } .sa-mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: repeat(4, 1fr); background: rgba(255, 255, 255, .97); border-top: 1px solid var(--line); box-shadow: 0 -10px 24px -18px rgba(16, 40, 26, .45); padding-bottom: env(safe-area-inset-bottom); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .sa-mbar a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 60px; color: var(--green-800); text-decoration: none; font-size: .74rem; font-weight: 700; } .sa-mbar .sa-ico, .sa-mbar .sa-brand { width: 22px; height: 22px; } .sa-mbar .sa-mbar__wa { background: var(--wa); color: var(--wa-ink); } .sa-mbar__ico { position: relative; display: grid; place-items: center; width: 22px; height: 22px; } /* Press feedback only (the bar never animates in and never hides): scale .96 in 100 ms, released with the glide spring in 200 ms. */ .sa-mbar a { transition: transform 200ms var(--spring-glide, cubic-bezier(.16, 1, .3, 1)); } .sa-mbar a:active { transform: scale(.96); transition: transform 100ms var(--ease); } .sa-calm .sa-mbar a, .sa-calm .sa-mbar a:active { transform: none; transition: none; } /* Location cue (main.js adds .is-cue once per session): a lime ring fades in and out around the pin. Nothing moves. */ .sa-mbar__ico::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; box-shadow: 0 0 0 2.5px var(--lime), 0 0 12px 2px rgba(155, 201, 58, .45); opacity: 0; pointer-events: none; } .sa-mbar a.is-cue .sa-mbar__ico::after { animation: sa-cue 1200ms ease-in-out both; } .sa-calm .sa-mbar a.is-cue .sa-mbar__ico::after { animation: none; } @keyframes sa-cue { 0%, 100% { opacity: 0; } 40%, 60% { opacity: 1; } } @media (min-width: 900px) { .sa-mbar { display: none; } } @media (max-width: 899px) { body { padding-bottom: calc(60px + env(safe-area-inset-bottom)); } } .sa-offer { position: fixed; z-index: 70; left: 12px; right: 12px; bottom: calc(72px + env(safe-area-inset-bottom)); padding: 20px 20px 16px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow-lg); transform: translateY(24px); opacity: 0; transition: transform 500ms var(--spring-glide, cubic-bezier(.16, 1, .3, 1)), opacity .4s; } .sa-offer[hidden] { display: none; } .sa-offer.is-in { transform: none; opacity: 1; } .sa-calm .sa-offer { transform: none; transition: opacity .3s linear; } @media (min-width: 900px) { .sa-offer { left: 24px; right: auto; bottom: 24px; width: 400px; } } .sa-offer { overflow: hidden; } .sa-offer__img { display: block; width: calc(100% + 40px); max-width: none; height: 128px; margin: -20px -20px 14px; object-fit: cover; object-position: 50% 32%; background: var(--mint-100); } @media (min-width: 900px) { .sa-offer__img { height: 168px; } } .sa-offer__close { position: absolute; z-index: 1; right: 10px; top: 10px; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .94); box-shadow: 0 4px 14px -4px rgba(0, 0, 0, .35); color: var(--ink); display: grid; place-items: center; cursor: pointer; } .sa-offer__close:hover { background: #fff; } .sa-offer__eyebrow { margin: 0 0 4px; font: 900 .72rem/1 var(--font-body); letter-spacing: .15em; text-transform: uppercase; color: var(--green); } .sa-offer__title { font-size: 1.28rem; margin: 0 40px 12px 0; } .sa-offer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .sa-offer__list li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 12px; border-radius: 14px; background: var(--mint-25); border: 1px solid var(--line); } .sa-offer__list strong { display: block; color: var(--ink); font-size: .95rem; } .sa-offer__list span { font-size: .86rem; color: var(--muted); line-height: 1.3; } .sa-offer__ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--mint-100); color: var(--green); } .sa-offer__note { margin: 10px 0 0; font-size: .8rem; color: var(--muted); } /* ---------- Location sheet (mobile bar "Location") ---------- Motion is WAAPI in main.js (slide, stagger, pin drops, drag); the CSS here is the resting, open state. z-index 90: above the consent banner (80). */ .sa-loc { position: fixed; inset: 0; z-index: 90; } .sa-loc[hidden] { display: none; } .sa-loc.is-closing { pointer-events: none; } /* While the panel slides in, its links are inert: the second tap of a double tap on "Location" lands on the panel body and does nothing (main.js removes .is-opening once the panel is at rest). The close button stays live. */ .sa-loc.is-opening .sa-loc__panel a { pointer-events: none; } .sa-loc__backdrop { position: absolute; inset: 0; background: rgba(12, 58, 31, .38); } .sa-loc__panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain; padding: 12px 18px calc(18px + env(safe-area-inset-bottom)); background: #fff; border-radius: 26px 26px 0 0; box-shadow: 0 -24px 60px -20px rgba(8, 52, 26, .45); } @media (min-width: 900px) { .sa-loc { display: flex; align-items: center; justify-content: center; padding: 24px; } .sa-loc__panel { position: relative; left: auto; right: auto; bottom: auto; width: 460px; max-width: 100%; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); border-radius: 26px; padding: 22px 22px 20px; box-shadow: var(--shadow-lg); } } /* Drag to dismiss lives on the handle and the header only, so the list keeps native scrolling. */ .sa-loc__head { touch-action: none; -webkit-user-select: none; user-select: none; cursor: grab; } .sa-loc__head:active { cursor: grabbing; } .sa-loc__head .sa-loc__close { cursor: pointer; } @media (min-width: 900px) { .sa-loc__head, .sa-loc__head:active { touch-action: auto; cursor: auto; } } .sa-loc__grab { display: block; width: 44px; height: 5px; border-radius: 3px; background: var(--line-2); margin: 0 auto 12px; } @media (min-width: 900px) { .sa-loc__grab { display: none; } } .sa-loc__close { position: absolute; right: 12px; top: 12px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--mint-50); color: var(--ink); display: grid; place-items: center; cursor: pointer; } .sa-loc__close:hover { background: var(--mint-100); } .sa-loc__eyebrow { margin: 0 46px 4px 0; font: 900 .72rem/1.3 var(--font-body); letter-spacing: .15em; text-transform: uppercase; color: var(--green); } .sa-loc__title { font-size: 1.3rem; margin: 0 46px 14px 0; } /* Phones: the eyebrow alone sits beside the close button. With 6 px under it the title always starts below the button (12 + 38 = 50 px), so it can use the full width and stays on one line from 360 px up. */ @media (max-width: 899px) { .sa-loc__eyebrow { margin-bottom: 6px; } .sa-loc__title { margin-right: 0; } } /* Mini map (parts/loc-map.php, cloned from its template on the first open). 150 px tall on narrow phones; wider panels keep the viewBox ratio (9:4) so the slice crop never cuts a pin. width:100% stops min-height from widening it. */ .sa-loc__map { position: relative; width: 100%; min-height: 150px; aspect-ratio: 9 / 4; margin: 0 0 12px; border-radius: 16px; overflow: hidden; background: var(--mint-100); border: 1px solid var(--line); isolation: isolate; } .sa-loc__map:empty { display: none; } /* From 560 px up the map is a 160 px strip, not 9:4 (at 768 px it grew to 323 px and pushed the list down): the SVG box stays 9:4 (360 × 160) in the middle and its extended art (parts/loc-map.php) fills the rest through overflow: visible. */ @media (min-width: 560px) { .sa-loc__map { aspect-ratio: auto; min-height: 0; height: 160px; } .sa-loc__map .sa-lm { left: 50%; width: 360px; translate: -50% -6px; } } .sa-lm__label { font: 900 38px/1 var(--font-body); fill: var(--green-800); stroke: #fff; stroke-width: 10px; stroke-linejoin: round; paint-order: stroke; pointer-events: none; } /* main.js sets .is-compact when the map would push the last row ("Not sure which is closest?") below the fold. */ .sa-loc.is-compact .sa-loc__map { display: none; } /* Lifted 6 px (the art runs on below the viewBox) so the Naama pin and its focus ring clear the bottom edge. */ .sa-lm { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; overflow: visible; translate: 0 -6px; } /* The pin draws its own house focus ring (.sa-lm__focus: lime, 3 px non-scaling stroke, about 2 px outside the pin), so the rectangular outline of the SVG link is turned off. */ .sa-lm__pin { cursor: pointer; outline: none; } .sa-lm__ring { transition: stroke .2s, stroke-width .2s; } .sa-lm__pin:hover .sa-lm__ring, .sa-lm__pin:focus-visible .sa-lm__ring { stroke: var(--green); stroke-width: 9px; } .sa-lm__focus { stroke: var(--lime); opacity: 0; } .sa-lm__pin:focus-visible .sa-lm__focus { opacity: 1; } .sa-lm__chip { position: absolute; right: 8px; bottom: 8px; z-index: 1; padding: 6px 10px; border-radius: 999px; pointer-events: none; background: rgba(255, 255, 255, .92); border: 1px solid var(--line); box-shadow: 0 6px 14px -8px rgba(8, 52, 26, .35); font: 700 .74rem/1 var(--font-body); color: var(--green-800); white-space: nowrap; } .sa-loc__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .sa-loc__list a { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 16px; border: 1px solid var(--line); background: var(--mint-25); color: var(--ink); text-decoration: none; transition: border-color .2s, box-shadow .2s, transform .2s var(--ease); } .sa-loc__list a:hover, .sa-loc__list a:focus-visible { border-color: var(--green); box-shadow: var(--shadow-sm); color: var(--ink); } .sa-loc__list a:active { transform: scale(.985); } .sa-loc__ico { position: relative; width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--mint-100); color: var(--green); } .sa-loc__ico .sa-ico, .sa-loc__ico .sa-brand { width: 22px; height: 22px; } .sa-loc__text strong { display: block; font-size: 1rem; line-height: 1.25; } .sa-loc__text small { display: block; color: var(--muted); font-size: .84rem; line-height: 1.35; margin-top: 2px; } .sa-loc__go { display: inline-flex; align-items: center; gap: 4px; font: 700 .82rem/1 var(--font-body); color: var(--green-700); } .sa-loc__go .sa-ico { width: 16px; height: 16px; } /* The recommended row, "Not sure which is closest?": mint background, filled WhatsApp tile (ink on green), always last. */ .sa-loc__wa a { background: #effcf3; border-color: #bfeccd; } .sa-loc__wa .sa-loc__ico { background: var(--wa); color: var(--wa-ink); } .sa-loc__wa .sa-loc__ico::after { content: ""; position: absolute; inset: 0; border-radius: inherit; opacity: 0; pointer-events: none; } .sa-loc__wa.is-pulse .sa-loc__ico::after { animation: sa-loc-pulse 900ms var(--ease-out) both; } @keyframes sa-loc-pulse { 0% { opacity: 1; box-shadow: 0 0 0 0 rgba(37, 211, 102, .55); } 100% { opacity: 0; box-shadow: 0 0 0 12px rgba(37, 211, 102, 0); } } .sa-loc__note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 14px 2px 0; font-size: .86rem; color: var(--muted); } .sa-loc__note .sa-ico { width: 16px; height: 16px; color: var(--green); } body.sa-sheet-open { overflow: hidden; } /* Cookie notice */ .sa-consent { position: fixed; z-index: 80; left: 12px; right: 12px; bottom: calc(72px + env(safe-area-inset-bottom)); display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lg); font-size: .9rem; animation: sa-pop .5s var(--ease-out) both; } .sa-consent[hidden] { display: none; } .sa-consent p { margin: 0; flex: 1 1 260px; } .sa-consent__btns { display: flex; gap: 8px; } @media (min-width: 900px) { .sa-consent { left: 24px; right: auto; bottom: 24px; max-width: 520px; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } .sa-js .sa-reveal, .sa-js .sa-reveal:not(.is-in) { opacity: 1; translate: none; transform: none; } .sa-marquee { overflow-x: auto; } .sa-marquee__track { animation: none; } .sa-underline::after { clip-path: none; } /* v2 chrome (T3): menu items, burger, bar press, cue ring, sheet pulse and offer slide are instant or static; the sheet itself is gated in main.js. */ .sa-mnav__inner, .sa-mnav__list > li { animation: none !important; } .sa-burger__bars i { transition: none; } .sa-mbar a, .sa-mbar a:active { transform: none; transition: none; } .sa-mbar a.is-cue .sa-mbar__ico::after, .sa-loc__wa.is-pulse .sa-loc__ico::after { animation: none !important; opacity: 0; } .sa-offer { transform: none; } } /* ---------- Print ---------- */ @media print { .sa-topbar, .sa-header, .sa-mnav, .sa-mbar, .sa-float-wa, .sa-offer, .sa-loc, .sa-cta, .sa-whyband, .sa-aside, .sa-footer__grid { display: none !important; } body { padding: 0; } }