/* ========================================================================== Provider — design system Dark "fiber" aesthetic: aurora background, glass cards, gradient accents. Every colour, radius and width comes from the Customizer as a CSS variable (see provider_design_inline_styles() in inc/customizer.php); this file only consumes them, it never hardcodes brand values. ========================================================================== */ @font-face { font-family: 'Manrope'; src: url('../fonts/Manrope-Light.woff') format('woff'); font-weight: 300; font-display: swap; } @font-face { font-family: 'Manrope'; src: url('../fonts/Manrope-Regular.woff') format('woff'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Manrope'; src: url('../fonts/Manrope-Medium.woff') format('woff'); font-weight: 500; font-display: swap; } @font-face { font-family: 'Manrope'; src: url('../fonts/Manrope-SemiBold.woff') format('woff'); font-weight: 600; font-display: swap; } @font-face { font-family: 'Manrope'; src: url('../fonts/Manrope-Bold.woff') format('woff'); font-weight: 700; font-display: swap; } :root { /* Fallbacks in case the theme's inline tokens fail to print. */ --container-w: 1240px; --radius-lg: 26px; --radius-sm: 14px; --bg: #070a14; --bg-rgb: 7, 10, 20; --surface: #0f1524; --surface-rgb: 15, 21, 36; --text: #e9edf8; --text-rgb: 233, 237, 248; --muted: #93a0bf; --accent: #22d3ee; --accent-rgb: 34, 211, 238; --accent-2: #6366f1; --accent-2-rgb: 99, 102, 241; --accent-3: #e879f9; --accent-3-rgb: 232, 121, 249; --glow-o: 0.55; --tariff-cols: 4; --payment-cols: 2; --logo-size: 17px; --logo-sub-size: 10px; --logo-sub-spacing: 0.41em; --logo-mark-size: 34px; --font: 'Manrope', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; --grad: linear-gradient(115deg, var(--accent) 0%, var(--accent-2) 55%, var(--accent-3) 100%); /* Text colour ON the gradient and accent text colour ON the background are separate tokens: the light scheme swaps them for contrast. */ --on-accent: #04121a; --accent-text: var(--accent); --border: rgba(var(--text-rgb), 0.1); --border-strong: rgba(var(--text-rgb), 0.18); --card-bg: rgba(var(--surface-rgb), 0.66); --card-bg-solid: rgba(var(--surface-rgb), 0.92); --shadow: 0 24px 60px rgba(2, 4, 12, 0.45); --shadow-glow: 0 20px 60px rgba(var(--accent-2-rgb), 0.28); --header-h: 82px; /* Fallback only — overridden by the Customizer's "Space above and below each section" setting (see provider_design_inline_styles()). */ --section-y: clamp(64px, 9vw, 124px); --grid-gap: 20px; } /* Light scheme: softer shadows, stronger borders and a darker accent — a bright cyan on white is around 1.9:1, unreadable for small text, so text and the gradient move to deeper shades. */ .provider-scheme-light { --border: rgba(var(--text-rgb), 0.1); --border-strong: rgba(var(--text-rgb), 0.16); --card-bg: rgba(255, 255, 255, 0.78); --card-bg-solid: #ffffff; --shadow: 0 20px 50px rgba(15, 23, 42, 0.1); --shadow-glow: 0 20px 50px rgba(var(--accent-2-rgb), 0.18); --grad: linear-gradient(115deg, var(--accent-2) 0%, var(--accent-3) 100%); --accent-text: var(--accent-2); /* --on-accent is deliberately NOT overridden here. A gradient button sweeps several accent stops, so its label has to clear 4.5:1 against every one of them. White manages that only against dark accents, and the accents are vivid mid-tones by design — measured 1.7–2.5:1. The same near-black ink as in the dark scheme clears every stop instead, and gradient buttons with dark ink read the same way in both schemes. */ } /* A more precise shade where color-mix is supported; older engines keep the accent-2 fallback above. 50% keeps small accent text over AA even for the lightest accents (amber was the tight one at 55%). */ @supports (color: color-mix(in srgb, red 50%, blue)) { .provider-scheme-light { --accent-text: color-mix(in srgb, var(--accent) 50%, #0b1020); } } *, *::before, *::after { box-sizing: border-box; } /* No overflow on on purpose. Any non-visible overflow here stops the body→viewport overflow propagation, body becomes the scroll container and the sticky header silently stops sticking. Sideways overflow is prevented at the source instead (nothing sticks out of the container). */ html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); } /* --scrollbar-w is set from JS right before locking, while the scrollbar is still there. Without this, hiding overflow makes the (now scrollbar-less) viewport wider and every full-width fixed element snaps outward by that amount right as the popup's open animation starts — the jump reads as a stutter instead of a smooth open. */ html.provider-lock { overflow: hidden; padding-right: var(--scrollbar-w, 0px); } /* The scroll lock stops from being the scrolling box, and a sticky element has nothing left to stick to — the header would jump back to the top of the document and vanish, taking the menu's close button with it. While locked it is pinned explicitly instead. */ html.provider-lock .site-header { position: fixed; top: var(--admin-bar-h, 0px); left: 0; right: var(--scrollbar-w, 0px); } body { margin: 0; font-family: var(--font); font-size: 17px; line-height: 1.6; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg { max-width: 100%; display: block; } img { height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; } h1, h2, h3, h4 { margin: 0; line-height: 1.14; letter-spacing: -0.02em; font-weight: 700; } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } ::selection { background: rgba(var(--accent-rgb), 0.32); color: var(--text); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; } /* Controls and decoration must never take a text selection: dragging across a button, a tab or an accordion header should activate it, not highlight its label. Real copy — headings, paragraphs, lists, prices, phone numbers and addresses — stays selectable so visitors can still copy it. */ .provider-icon, .faq-item__toggle, .faq-item__q, .hero__pulse, .hero__orbit, .gauge, .aurora, .marquee, .error-404__code, .step-card__num, .tariff-card__badge, .provider-logo, .provider-btn, .provider-menu, .tariff-tabs, .site-header__burger, .back-to-top, .provider-popup__close, .hero__eyebrow, .section-heading__eyebrow, .scroll-progress { -webkit-user-select: none; user-select: none; } /* Click-through as well, so an icon never swallows the click meant for the link or button around it. */ .provider-icon, .faq-item__toggle, .hero__pulse, .hero__orbit, .gauge__svg { pointer-events: none; } /* Mouse pointer: a plain arrow over ordinary copy. The browser default is the I-beam, which reads as "this is an editable field" on a heading or a price. Text stays selectable — only the pointer shape changes. The I-beam is kept exactly where typing really happens (inputs, textareas), and everything clickable keeps the hand. */ body { cursor: default; } input[type="text"], input[type="tel"], input[type="email"], input[type="url"], input[type="search"], input[type="number"], input[type="password"], textarea, [contenteditable="true"] { cursor: text; } a[href], button, summary, label, select, input[type="checkbox"], input[type="radio"], input[type="submit"], [role="tab"], [role="button"] { cursor: pointer; } /* A read-only field is filled in by the script, not typed into. */ input[readonly] { cursor: default; } /* Caret browsing (F7 in Chrome/Edge, and the default on some setups) puts a blinking text caret inside ordinary headings and paragraphs, which makes the page look editable. Hiding the caret colour removes it without touching selection or keyboard navigation — real input fields keep their caret. */ body { caret-color: transparent; } input, textarea, select, [contenteditable] { caret-color: auto; } /* Controls and ornamental labels are not selectable either: dragging across a button caption or a FAQ summary should operate the control, not start a text selection. Real copy — headings, descriptions, prices, answers — stays selectable so visitors can still copy it. */ .provider-btn, .tariff-tabs, .faq-item__q, .site-header__burger, .provider-popup__close, .back-to-top, .cookie-banner__text, .gauge, .provider-logo, .hero__eyebrow, .section-heading__eyebrow, .about__equipment-list, .lead-form__consent, .lead-form__field label, .site-footer__col-title { -webkit-user-select: none; user-select: none; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip-link:focus { position: fixed; top: 12px; left: 12px; z-index: 200; width: auto; height: auto; clip: auto; padding: 12px 18px; border-radius: var(--radius-sm); background: var(--accent); color: var(--on-accent); font-weight: 600; } /* ── Container & sections ─────────────────────────────────────────── */ .provider-container { width: 100%; max-width: var(--container-w); margin: 0 auto; padding: 0 24px; } .provider-container--narrow { max-width: min(880px, var(--container-w)); } .section { padding: var(--section-y) 0; position: relative; } .section-heading { max-width: 760px; margin: 0 auto clamp(36px, 5vw, 60px); } .section-heading--center { text-align: center; } .section-heading--left { margin-left: 0; text-align: left; } .section-heading__eyebrow { display: inline-block; margin-bottom: 14px; padding: 6px 14px; border: 1px solid var(--border-strong); border-radius: 100px; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-text); background: rgba(var(--accent-rgb), 0.08); } .section-heading__title { font-size: clamp(30px, 4.2vw, 50px); } .section-heading__descr { margin-top: 18px; color: var(--muted); font-size: clamp(16px, 1.4vw, 18px); } .grad { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ── Background glow ──────────────────────────────────────────────── */ .aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .aurora__blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: var(--glow-o); will-change: transform; } .aurora__blob--1 { top: -220px; left: -120px; width: 620px; height: 620px; background: radial-gradient(circle, var(--accent) 0%, transparent 68%); animation: float-a 22s ease-in-out infinite; } .aurora__blob--2 { top: 22%; right: -220px; width: 680px; height: 680px; background: radial-gradient(circle, var(--accent-2) 0%, transparent 68%); animation: float-b 26s ease-in-out infinite; } .aurora__blob--3 { bottom: -260px; left: 28%; width: 720px; height: 720px; background: radial-gradient(circle, var(--accent-3) 0%, transparent 70%); animation: float-c 30s ease-in-out infinite; opacity: calc(var(--glow-o) * 0.75); } .aurora__grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(var(--text-rgb), 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--text-rgb), 0.045) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 25%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 90% 60% at 50% 0%, #000 25%, transparent 75%); } /* Translation only, no scale: a 90px-blurred, 600px-wide layer has to be re-rasterised every time it changes size, and three of them doing that non-stop starved every other animation on the page. Moving a layer that is already rasterised is handled by the compositor for free. */ @keyframes float-a { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(70px, 80px, 0); } } @keyframes float-b { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(-80px, 60px, 0); } } @keyframes float-c { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(60px, -70px, 0); } } /* ── Buttons ──────────────────────────────────────────────────────── */ .provider-btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 24px; border: 1px solid transparent; border-radius: 100px; font-size: 15px; font-weight: 600; line-height: 1.2; cursor: pointer; white-space: nowrap; transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1), box-shadow 0.25s, background 0.25s, border-color 0.25s, color 0.25s; } .provider-btn .provider-icon { width: 18px; height: 18px; } .provider-btn:hover { transform: translateY(-2px); } .provider-btn:active { transform: translateY(0); } .provider-btn--primary { position: relative; color: var(--on-accent); background: var(--grad); box-shadow: 0 10px 30px rgba(var(--accent-2-rgb), 0.32); } .provider-btn--primary:hover { box-shadow: 0 16px 40px rgba(var(--accent-2-rgb), 0.45); } .provider-btn--ghost { color: var(--text); background: rgba(var(--text-rgb), 0.04); border-color: var(--border-strong); backdrop-filter: blur(10px); } .provider-btn--ghost:hover { border-color: var(--accent); color: var(--accent-text); background: rgba(var(--accent-rgb), 0.08); } .provider-btn--lg { padding: 16px 30px; font-size: 16px; } .provider-btn--sm { padding: 10px 18px; font-size: 14px; } .provider-btn--block { width: 100%; } .provider-btn[disabled] { opacity: 0.6; pointer-events: none; } /* ── Card ─────────────────────────────────────────────────────────── */ .provider-card { position: relative; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--card-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--shadow); } /* The global :focus-visible outline below uses a small fixed radius sized for buttons and links — on a card-sized element (a whole payment method or promo slide can itself be the focusable ) that mismatch reads as a square corner cutting into a much rounder card. */ .provider-card:focus-visible { border-radius: var(--radius-lg); } .provider-icon { width: 22px; height: 22px; flex: none; } /* ── Text logo ──────────────────────────────────────────────────────── Sizes come from the Customizer, so the same markup works for a short wordmark and for a long company name. */ .provider-logo { display: inline-flex; align-items: center; gap: 0.6em; color: var(--text); line-height: 1.05; } .provider-logo__mark { display: grid; place-items: center; flex: none; width: var(--logo-mark-size); height: var(--logo-mark-size); border-radius: calc(var(--logo-mark-size) * 0.3); color: var(--accent); background: rgba(var(--accent-rgb), 0.12); border: 1px solid rgba(var(--accent-rgb), 0.3); } .provider-logo__mark .provider-icon { width: calc(var(--logo-mark-size) * 0.55); height: calc(var(--logo-mark-size) * 0.55); } .provider-logo__text { display: flex; flex-direction: column; gap: 0.18em; } .provider-logo__title { font-size: var(--logo-size); font-weight: 700; letter-spacing: -0.01em; white-space: nowrap; } .provider-logo__sub { font-size: var(--logo-sub-size); font-weight: 600; letter-spacing: var(--logo-sub-spacing); opacity: 0.55; white-space: nowrap; } /* ── Header ───────────────────────────────────────────────────────── */ /* The WordPress admin bar is fixed on top of the page for logged-in users, so a sticky header has to start below it — otherwise it hides the site title while editing. Below 600px the admin bar is not fixed and scrolls away, so the offset goes back to zero there. */ body.admin-bar { --admin-bar-h: 32px; } @media screen and (max-width: 782px) { body.admin-bar { --admin-bar-h: 46px; } } @media screen and (max-width: 600px) { body.admin-bar { --admin-bar-h: 0px; } } /* .site-header { position: sticky; top: var(--admin-bar-h, 0px); z-index: 90; padding: var(--header-py, 14px) 0; transition: background 0.3s, border-color 0.3s, padding 0.3s; border-bottom: 1px solid transparent; } .site-header.is-stuck { padding: calc(var(--header-py, 14px) * 0.6) 0; background: rgba(var(--bg-rgb), 0.72); border-bottom-color: var(--border); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } */ .site-header { position: sticky; top: var(--admin-bar-h, 0px); z-index: 90; padding: var(--header-py, 14px) 0; transition: background 0.3s, border-color 0.3s; border-bottom: 1px solid transparent; } .site-header.is-stuck { background: rgba(var(--bg-rgb), 0.72); border-bottom-color: var(--border); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .site-header__row { display: flex; align-items: center; gap: 26px; } .site-header__logo { flex: none; display: block; color: var(--text); } .site-header__logo img { max-height: var(--logo-img-height, 38px); width: auto; } .site-header__nav { margin-right: auto; } .provider-menu { display: flex; align-items: center; gap: 6px; } .provider-menu a { display: block; padding: 9px 14px; border-radius: 100px; font-size: 15px; font-weight: 500; white-space: nowrap; color: var(--muted); transition: color 0.2s, background 0.2s; } .provider-menu a:hover, .provider-menu .current-menu-item > a { color: var(--text); background: rgba(var(--text-rgb), 0.06); } .provider-menu .sub-menu { display: none; } /* margin-left:auto, not just the nav's margin-right:auto — once the nav is hidden behind the burger there is nothing left to push the controls to the right edge, and they bunch up against the logo. */ .site-header__actions { display: flex; align-items: center; gap: 12px; margin-left: auto; } .site-header__phone { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; white-space: nowrap; color: var(--text); transition: color 0.2s; } .site-header__phone .provider-icon { width: 18px; height: 18px; color: var(--accent); } .site-header__phone:hover { color: var(--accent-text); } /* Extra numbers (see the "Phone" field, comma-separated) live behind this toggle instead of stretching the header row — see main.js for the open/close behaviour. Absolutely positioned, so the dropdown never pushes the rest of the header row around when it opens. */ .site-header__phone-group { position: relative; display: flex; align-items: center; } .site-header__phone-toggle { display: grid; place-items: center; width: 26px; height: 26px; margin-left: 2px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; transition: color 0.2s, background 0.2s; } .site-header__phone-toggle:hover { color: var(--text); background: rgba(var(--text-rgb), 0.06); } .site-header__phone-toggle svg { width: 14px; height: 14px; transition: transform 0.2s; } .site-header__phone-toggle[aria-expanded="true"] svg { transform: rotate(180deg); } .site-header__phone-list { position: absolute; top: calc(100% + 10px); right: 0; z-index: 95; display: flex; flex-direction: column; gap: 2px; min-width: 190px; padding: 8px; border-radius: var(--radius-sm); background: var(--card-bg-solid); box-shadow: inset 0 0 0 1px var(--border), var(--shadow); animation: header-phone-list-in 0.18s ease; } /* [hidden] and this class carry the same specificity, so without this the "display: flex" above wins the cascade and the list never actually hides — same fix as .provider-popup[hidden] elsewhere in this file. */ .site-header__phone-list[hidden] { display: none; } .site-header__phone-list a { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--radius-sm); font-weight: 600; font-size: 14.5px; white-space: nowrap; color: var(--text); transition: background 0.2s; } .site-header__phone-list a:hover { background: rgba(var(--accent-rgb), 0.1); } .site-header__phone-list .provider-icon { width: 16px; height: 16px; flex: none; color: var(--accent); } /* Only rendered when both phone numbers and socials are in the same list (see header.php) — a thin rule so the two groups read as separate. */ .site-header__phone-list-divider { height: 1px; margin: 4px 6px; background: var(--border); } @keyframes header-phone-list-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } /* ── Light / dark switcher ────────────────────────────────────────── */ .scheme-toggle { display: inline-flex; align-items: center; gap: 10px; padding: 0; border: 0; background: none; cursor: pointer; flex: none; } .scheme-toggle__track { position: relative; display: inline-flex; align-items: center; justify-content: space-between; width: 66px; height: 34px; padding: 0 9px; border: 1px solid var(--border-strong); border-radius: 100px; background: rgba(var(--text-rgb), 0.07); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.18); transition: border-color 0.3s, background 0.3s; } .scheme-toggle:hover .scheme-toggle__track { border-color: var(--accent); background: rgba(var(--accent-rgb), 0.1); } /* left/translateX are derived from where the icons actually sit, not eyeballed: the track's content box runs 10px…56px (1px border + 9px padding each side) and space-between puts the two 16px icons at centres 18px and 48px. The knob is 26px wide, so its centre lands on the sun at left:4px (1px border + 4) and on the moon 30px further along. */ .scheme-toggle__thumb { position: absolute; top: 50%; left: 4px; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: var(--grad); box-shadow: 0 3px 10px rgba(var(--accent-2-rgb), 0.5); transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1); } /* The knob marks the scheme that is ON, not the one a click would switch to. Sun sits on the left of the track, moon on the right, so the dark scheme (aria-pressed="false") parks the knob on the right over the moon, and the light scheme brings it back left onto the sun. Whichever icon the knob covers gets --on-accent so it reads against the gradient; the other one stays muted. Getting this backwards both inverted the meaning and left the highlighted icon dark-on-dark, which is why it was hard to see. */ .scheme-toggle__thumb { transform: translateX(30px); } .scheme-toggle[aria-pressed="true"] .scheme-toggle__thumb { transform: translateX(0); } .scheme-toggle__ico { position: relative; z-index: 1; display: grid; place-items: center; transition: color 0.3s, opacity 0.3s; } .scheme-toggle__ico .provider-icon { width: 16px; height: 16px; stroke-width: 1.9; } .scheme-toggle__ico--moon { color: var(--on-accent); opacity: 1; } .scheme-toggle__ico--sun { color: var(--muted); opacity: 0.85; } .scheme-toggle[aria-pressed="true"] .scheme-toggle__ico--moon { color: var(--muted); opacity: 0.85; } .scheme-toggle[aria-pressed="true"] .scheme-toggle__ico--sun { color: var(--on-accent); opacity: 1; } /* Inside the mobile menu the switch is a full-width row with a caption, so it reads like the other menu entries instead of a stray pill. */ .scheme-toggle--wide { width: 100%; justify-content: space-between; padding: 4px 2px; } .scheme-toggle--wide .scheme-toggle__text { order: -1; font-size: 16px; font-weight: 600; color: var(--text); } .site-header__burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 11px; border: 1px solid var(--border-strong); border-radius: 12px; background: rgba(var(--text-rgb), 0.04); cursor: pointer; } .site-header__burger span { display: block; height: 2px; border-radius: 2px; background: var(--text); transition: transform 0.3s, opacity 0.2s; } .site-header__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .site-header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .site-header__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── Mobile menu ──────────────────────────────────────────────────── */ .mobile-menu { position: fixed; /* --header-h is measured by main.js and already includes the admin bar. */ inset: var(--header-h) 0 0; z-index: 89; padding: 24px 0 48px; overflow-y: auto; background: rgba(var(--bg-rgb), 0.97); backdrop-filter: blur(20px); animation: menu-in 0.28s ease; } @keyframes menu-in { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } } .provider-menu--mobile { flex-direction: column; align-items: stretch; gap: 4px; } .provider-menu--mobile a { padding: 14px 16px; font-size: 19px; font-weight: 600; color: var(--text); } .mobile-menu__actions { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; } .mobile-menu__phone { font-size: 22px; font-weight: 700; color: var(--accent-text); } .mobile-menu__hours { color: var(--muted); font-size: 14px; } /* ── Scroll progress ──────────────────────────────────────────────── */ .scroll-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 100; pointer-events: none; } .scroll-progress__bar { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: var(--grad); } /* ── Hero ─────────────────────────────────────────────────────────── */ /* The decorative rings sit 18% outside the gauge and pushed the document ~60px wider than the window at every size. `clip` (not `hidden`) contains them without turning the section into a scroll container, so nothing else — sticky included — is affected. */ .hero { padding: clamp(48px, 7vw, 92px) 0 clamp(56px, 8vw, 110px); overflow: clip; } .hero__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: clamp(32px, 5vw, 72px); align-items: center; } /* Without the gauge the copy takes the full width instead of leaving a hole. */ .hero--no-visual .hero__grid { grid-template-columns: minmax(0, 1fr); } .hero__eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 22px; padding: 7px 16px 7px 12px; border: 1px solid var(--border-strong); border-radius: 100px; background: rgba(var(--surface-rgb), 0.6); font-size: 13.5px; font-weight: 600; color: var(--muted); } .hero__pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.7); animation: pulse 2.4s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.6); } 70% { box-shadow: 0 0 0 12px rgba(var(--accent-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); } } .hero__title { font-size: clamp(34px, 4.6vw, 56px); letter-spacing: -0.03em; } .hero__descr { margin-top: 22px; max-width: 56ch; font-size: clamp(16px, 1.5vw, 19px); color: var(--muted); } .hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; } .hero__actions:empty { display: none; } .hero__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 20px; margin-top: 46px; padding-top: 30px; border-top: 1px solid var(--border); } .hero__stat-value { display: block; font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; letter-spacing: -0.02em; } .hero__stat-label { display: block; margin-top: 4px; font-size: 13.5px; color: var(--muted); } /* Speed gauge */ .hero__visual { position: relative; display: grid; place-items: center; min-height: 380px; } .gauge { position: relative; width: min(100%, 380px); aspect-ratio: 1; display: grid; place-items: center; } .gauge__svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .gauge__track { fill: none; stroke: rgba(var(--text-rgb), 0.07); stroke-width: 10; } .gauge__value { fill: none; stroke: url(#provider-gauge-grad); stroke-width: 10; stroke-linecap: round; stroke-dasharray: 540; stroke-dashoffset: 540; filter: drop-shadow(0 0 14px rgba(var(--accent-rgb), 0.5)); animation: gauge-fill 2.2s cubic-bezier(0.22, 0.61, 0.36, 1) 0.25s forwards; } @keyframes gauge-fill { to { stroke-dashoffset: 138; } } .gauge__center { text-align: center; z-index: 1; } .gauge__number { display: block; font-size: clamp(52px, 7vw, 82px); font-weight: 700; letter-spacing: -0.04em; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .gauge__unit { display: block; margin-top: 6px; font-size: 17px; font-weight: 600; color: var(--muted); } .gauge__caption { position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%); padding: 6px 16px; border: 1px solid var(--border-strong); border-radius: 100px; background: rgba(var(--surface-rgb), 0.85); font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; } .hero__orbit { position: absolute; border: 1px dashed rgba(var(--text-rgb), 0.12); border-radius: 50%; } .hero__orbit--1 { inset: -6%; animation: spin 40s linear infinite; } .hero__orbit--2 { inset: -18%; border-style: solid; border-color: rgba(var(--accent-rgb), 0.12); animation: spin 60s linear infinite reverse; } @keyframes spin { to { transform: rotate(360deg); } } /* ── Marquee ──────────────────────────────────────────────────────── */ .marquee { overflow: hidden; padding: 18px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: rgba(var(--surface-rgb), 0.4); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee__track { display: flex; width: max-content; animation: marquee 34s linear infinite; } .marquee__list { display: flex; align-items: center; gap: 44px; padding-right: 44px; } .marquee__list li { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--muted); white-space: nowrap; } .marquee__list .provider-icon { width: 16px; height: 16px; color: var(--accent); } @keyframes marquee { to { transform: translateX(-50%); } } /* ── Announcements ────────────────────────────────────────────────── */ .announcements__list { display: grid; gap: 14px; } .announcement { --tone: var(--accent); --tone-rgb: var(--accent-rgb); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; padding: 24px 26px 24px 30px; overflow: hidden; transition: transform 0.3s, border-color 0.3s; } .announcement:hover { transform: translateX(3px); border-color: rgba(var(--tone-rgb), 0.4); } .announcement--warning { --tone: #fbbf24; --tone-rgb: 251, 191, 36; } .announcement--success { --tone: #34d399; --tone-rgb: 52, 211, 153; } /* .announcement sets its own `display: grid` above, which otherwise ties with the [hidden] UA rule and wins on source order — so the collapsed extra cards would stay visible without this override. */ .announcement[hidden] { display: none; } .announcements__toggle { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 22px auto 0; padding: 12px 22px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: transparent; font-family: inherit; font-size: 14px; font-weight: 600; color: var(--accent-text); cursor: pointer; transition: border-color 0.2s, background 0.2s; } .announcements__toggle:hover { border-color: rgba(var(--accent-rgb), 0.4); background: rgba(var(--accent-rgb), 0.06); } .announcements__toggle svg { width: 15px; height: 15px; flex: none; transition: transform 0.2s; } .announcements__toggle[aria-expanded="true"] svg { transform: rotate(180deg); } /* Accent stripe down the left edge — the quickest way to tell a warning from a promo without reading it. */ .announcement__bar { position: absolute; top: 0; left: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--tone), rgba(var(--tone-rgb), 0.15)); } .announcement__icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; color: var(--tone); background: rgba(var(--tone-rgb), 0.12); border: 1px solid rgba(var(--tone-rgb), 0.25); } .announcement__icon .provider-icon { width: 23px; height: 23px; } .announcement__head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 8px; } .announcement__title { font-size: 18px; } .announcement__date { padding: 3px 11px; border-radius: 100px; background: rgba(var(--tone-rgb), 0.12); color: var(--tone); font-size: 12.5px; font-weight: 700; white-space: nowrap; } .announcement__text { font-size: 15px; } .announcement__text p:last-child { margin-bottom: 0; } .announcement__text a { color: var(--tone); } /* ── Promotions ───────────────────────────────────────────────────── */ /* One slide at a time, not a grid or a multi-up strip — scroll-snap-type "mandatory" plus a card that is 100% of the strip's width is what gets that: the browser always settles on exactly one full card, never a sliver of the next one. The prev/next buttons and dots (main.js) are there for anyone who wouldn't think to swipe/scroll a row with no visible scrollbar, and to make "which slide am I on" obvious at a glance. */ .promotions__head { display: flex; flex-direction: column; align-items: center; gap: 20px; } /* The heading's own bottom margin is meant for when it sits directly above a grid, not stacked with the nav buttons here — the flex gap above already spaces the two out. */ .promotions__head .section-heading { margin-bottom: 0; } .promotions__nav { display: flex; gap: 8px; margin-bottom: clamp(20px, 3vw, 32px); } .promotions__arrow { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 0; box-shadow: inset 0 0 0 1px var(--border); background: rgba(var(--surface-rgb), 0.6); color: var(--text); cursor: pointer; transition: border-color 0.2s, background 0.2s, opacity 0.2s; } .promotions__arrow svg { width: 19px; height: 19px; } .promotions__arrow:hover { box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.4); background: rgba(var(--accent-rgb), 0.08); } .promotions__arrow:disabled { opacity: 0.35; cursor: default; } .promotions__arrow:disabled:hover { box-shadow: inset 0 0 0 1px var(--border); background: rgba(var(--surface-rgb), 0.6); } .promotions__strip { display: flex; overflow-x: auto; /* Left implicit, overflow-y computes to auto too (per spec, whenever overflow-x isn't visible) — without this the row becomes vertically scrollable too whenever a slide is even a little taller than the others, which turns a vertical swipe on it into a trapped scroll instead of moving the page. */ overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .promotions__strip::-webkit-scrollbar { display: none; } /* A focus ring on the strip itself (keyboard users tab to it and scroll with the arrow keys, same as any native scroll container) rather than nothing at all, which is what a bare overflow:auto div gets by default. */ .promotions__strip:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--radius-sm); } /* Transparent wrapper — it, not the card, is what fills the scrollport and snaps, so a slide always lands exactly on the container's edges. */ .promo-slide { flex: 0 0 100%; scroll-snap-align: start; display: flex; } /* One full-width slide, laid out as a big icon medallion next to the copy — this reads as a banner, so it does not reuse .service-card's compact tile layout even though it still shares the base .provider-card surface and the corner-arrow "this is a link" convention. */ .promo-card { position: relative; width: 100%; display: flex; align-items: center; gap: clamp(24px, 4vw, 48px); padding: clamp(36px, 5vw, 60px) clamp(32px, 6vw, 72px); /* Keeps every slide the same height regardless of how much copy it carries, so switching slides doesn't make the page jump. */ min-height: clamp(300px, 30vw, 380px); overflow: hidden; transition: border-color 0.35s; /* No shadow, unlike every other .provider-card. A slide fills the scroll container edge to edge, and a scroll container clips at its own edge — so a shadow here is always sliced off in a straight line, which reads as a hard square outline around an otherwise rounded card, and a neighbouring slide's shadow smears into view while swiping. The border and surface alone define the card; nothing is left to clip. */ box-shadow: none; /* .provider-card's backdrop-filter has its own version of the same bug: the blurred backdrop's compositing layer ignores border-radius during a scroll repaint and flashes square corners. */ backdrop-filter: none; -webkit-backdrop-filter: none; /* Compensates for the lost blur above — .provider-card's default background is see-through specifically to blend with that blur, and looks flat/patchy without it. */ background: var(--card-bg-solid); } /* Border only on hover, no glow — same clipping reason as the base shadow. */ .promo-card--link:hover { border-color: rgba(var(--accent-rgb), 0.4); } /* Same idea as .service-card__glow (hidden until hover) but anchored flush in the corner (top:0/right:0, not a negative offset) with a size that scales down on narrow screens: a fixed 280px circle sitting partly outside the box is still clipped visually by overflow:hidden, but on a narrow slide (mobile width, under 280px) that unclipped geometry was still inflating this element's own scrollable-overflow width — contain: paint below narrowed that gap but didn't close it, this does, by construction, since the circle can never be wider than the viewport. */ .promo-card__glow { position: absolute; top: 0; right: 0; width: clamp(140px, 30vw, 280px); height: clamp(140px, 30vw, 280px); border-radius: 50%; background: radial-gradient(circle, rgba(var(--accent-rgb), 0.3), transparent 65%); opacity: 0; transition: opacity 0.4s; pointer-events: none; } .promo-card:hover .promo-card__glow { opacity: 1; } .promo-card__icon { display: grid; place-items: center; flex: none; width: clamp(76px, 9vw, 108px); height: clamp(76px, 9vw, 108px); border-radius: 50%; color: var(--on-accent); background: var(--grad); /* No box-shadow here on purpose (unlike other uses of --shadow-glow) — at this small a size its 60px blur, offset 20px down, doesn't fade evenly around the circle and reads as a squarish smudge rather than a glow. .service-card__icon and friends skip a shadow entirely for the same reason. */ } .promo-card__icon .provider-icon { width: 42%; height: 42%; } .promo-card__body { position: relative; max-width: 640px; } .promo-card__badge { margin-bottom: 6px; font-size: clamp(26px, 3.2vw, 40px); font-weight: 800; letter-spacing: -0.01em; line-height: 1.1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .promo-card__title { font-size: clamp(19px, 2vw, 24px); } /* "descr" can be the full text of an offer — headings, paragraphs, a list of tiers — not just a one-line teaser, so it gets .provider-prose rather than plain text (see the global rule further down for that class). This block only holds the card-scale overrides: smaller type, tighter headings, and the collapsed/fade state main.js toggles once the content is tall enough to need it (see the comment on .promo-card__descr-toggle below for why the toggle button itself is hidden by default in markup). */ .promo-card__descr { position: relative; margin-top: 8px; max-height: 9.2em; overflow: hidden; font-size: 15.5px; color: var(--muted); transition: max-height 0.35s ease; } .promo-card__descr.is-expanded { max-height: 340px; overflow-y: auto; } /* A hard cut mid-paragraph reads as broken text; fading the last line into the card's own background makes it obviously "there's more" instead. */ .promo-card__descr:not(.is-expanded)::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1.6em; background: linear-gradient(180deg, transparent, var(--card-bg-solid)); pointer-events: none; } .promo-card__descr.is-expanded { scrollbar-width: thin; scrollbar-color: rgba(var(--accent-rgb), 0.5) transparent; } .promo-card__descr.is-expanded::-webkit-scrollbar { width: 8px; } .promo-card__descr.is-expanded::-webkit-scrollbar-track { background: transparent; } .promo-card__descr.is-expanded::-webkit-scrollbar-thumb { background-color: rgba(var(--accent-rgb), 0.5); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } /* The global `a { text-decoration: none; color: inherit; }` would otherwise make an inline link in "descr" look exactly like plain text, and the .provider-prose sizes below are tuned for a full-width page column, not a card. */ .promo-card__descr.provider-prose { font-size: 15.5px; } .promo-card__descr h2, .promo-card__descr h3 { margin: 12px 0 6px; font-size: 16px; color: var(--text); } .promo-card__descr h2:first-child, .promo-card__descr h3:first-child { margin-top: 0; } .promo-card__descr p { margin-bottom: 8px; } .promo-card__descr ul { margin: 0 0 8px; padding-left: 18px; } .promo-card__descr li { margin-bottom: 4px; } .promo-card__descr a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; } .promo-card__descr strong { color: var(--text); } .promo-card__descr-toggle { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding: 0; border: 0; background: transparent; font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--accent-text); cursor: pointer; } /* [hidden] and the unconditional `display: flex` above carry the same specificity, so without this override the button never actually hides — same fix as .service-card__locations[hidden] elsewhere in this file. */ .promo-card__descr-toggle[hidden] { display: none; } .promo-card__descr-toggle svg { width: 14px; height: 14px; flex: none; transition: transform 0.2s; } .promo-card__descr-toggle[aria-expanded="true"] svg { transform: rotate(180deg); } .promo-card__expires { display: flex; align-items: center; gap: 6px; margin-top: 16px; font-size: 13px; color: var(--muted); } .promo-card__expires .provider-icon { width: 15px; height: 15px; flex: none; } .promo-card__arrow { bottom: auto; top: 50%; right: clamp(24px, 4vw, 40px); transform: translateY(-50%); } .promo-card--link:hover .promo-card__arrow { background: var(--grad); border-color: transparent; color: var(--on-accent); transform: translateY(-50%) translate(2px, -2px); } .promotions__dots { display: flex; justify-content: center; gap: 10px; margin-top: 24px; } .promotions__dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: var(--border-strong); cursor: pointer; transition: background 0.2s, transform 0.2s; } .promotions__dot:hover { background: rgba(var(--accent-rgb), 0.5); } .promotions__dot.is-active { background: var(--accent); transform: scale(1.25); } /* ── Features ─────────────────────────────────────────────────────── */ /* Flex, not grid, for the same reason as the tariffs: a last row that is not full stays centred instead of hugging the left edge. --feature-cols comes from the Customizer. */ .features__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--grid-gap); } .feature-card { flex: 0 1 calc((100% - (var(--feature-cols) - 1) * var(--grid-gap)) / var(--feature-cols)); min-width: 270px; padding: 30px 28px; transition: transform 0.35s, border-color 0.35s, box-shadow 0.35s; } .feature-card:hover { transform: translateY(-6px); border-color: rgba(var(--accent-rgb), 0.4); box-shadow: var(--shadow-glow); } .feature-card__icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 20px; border-radius: 16px; color: var(--accent); background: rgba(var(--accent-rgb), 0.1); border: 1px solid rgba(var(--accent-rgb), 0.22); } .feature-card__icon .provider-icon { width: 26px; height: 26px; } .feature-card__title { font-size: 20px; margin-bottom: 10px; } .feature-card__descr { color: var(--muted); font-size: 15.5px; } /* ── Tariffs ──────────────────────────────────────────────────────── */ /* The border is an inset shadow rather than a real border so the padding box matches the border box, which lets the thumb be positioned with the plain offsetLeft of a button (see moveThumb() in main.js). Centring uses margin:auto, not left/translateX(-50%): this element also carries .reveal, and two rules fighting over transform lose the centring. overflow-x:auto rather than flex-wrap: with an editor-controlled, unbounded number of tabs, wrapping breaks the pill into an ugly multi-row shape (and used to overflow it outright on narrow screens). A horizontally scrollable single row keeps the capsule intact at any tab count — buttons keep their natural width (no flex-shrink) so labels never wrap either. The scrollbar itself is hidden; the row is still fully usable via touch/trackpad swipe or a hardware scrollwheel, and the active tab is scrolled into view on select (see activate() in main.js). */ .tariff-tabs { position: relative; display: flex; width: max-content; max-width: 100%; gap: 4px; margin: 0 auto clamp(30px, 4vw, 44px); padding: 5px; border-radius: 100px; box-shadow: inset 0 0 0 1px var(--border); background: rgba(var(--surface-rgb), 0.6); backdrop-filter: blur(10px); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .tariff-tabs::-webkit-scrollbar { display: none; } .tariff-tabs__btn { position: relative; z-index: 1; flex: none; padding: 11px 26px; border: 0; border-radius: 100px; background: transparent; font-size: 15px; font-weight: 600; color: var(--muted); white-space: nowrap; cursor: pointer; transition: color 0.25s; } .tariff-tabs__btn.is-active { color: var(--on-accent); } .tariff-tabs__thumb { position: absolute; top: 0; left: 0; width: 0; height: 0; border-radius: 100px; background: var(--grad); box-shadow: 0 6px 18px rgba(var(--accent-2-rgb), 0.35); transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), width 0.35s; } .tariffs__panel { display: none; } .tariffs__panel.is-active { display: block; } /* Flex, not grid: cards that do not fill the last row stay centred instead of hugging the left edge. --tariff-cols comes from the Customizer. */ .tariffs__grid { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--grid-gap); } .tariff-card { flex: 0 1 calc((100% - (var(--tariff-cols) - 1) * var(--grid-gap)) / var(--tariff-cols)); min-width: 240px; display: flex; flex-direction: column; padding: 30px 26px; transition: transform 0.35s, border-color 0.35s, box-shadow 0.35s; } .tariff-card:hover { transform: translateY(-6px); border-color: rgba(var(--accent-rgb), 0.4); box-shadow: var(--shadow-glow); } .tariff-card--popular { border-color: rgba(var(--accent-rgb), 0.45); background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.09), rgba(var(--surface-rgb), 0.78)); box-shadow: var(--shadow-glow); } .tariff-card__badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 5px; padding: 6px 16px; border-radius: 100px; background: var(--grad); color: var(--on-accent); font-size: 12px; font-weight: 700; white-space: nowrap; box-shadow: 0 8px 20px rgba(var(--accent-2-rgb), 0.35); animation: tariff-badge-pulse 2.4s ease-in-out infinite; } .tariff-card__badge-icon { width: 13px; height: 13px; flex: none; } @keyframes tariff-badge-pulse { 0%, 100% { box-shadow: 0 8px 20px rgba(var(--accent-2-rgb), 0.35); } 50% { box-shadow: 0 8px 26px rgba(var(--accent-2-rgb), 0.6); } } .tariff-card__name { font-size: 22px; } .tariff-card__speed { margin-top: 12px; font-size: 17.5px; font-weight: 700; letter-spacing: -0.01em; color: var(--accent-text); } .tariff-card__features { margin: 22px 0; display: grid; gap: 11px; } .tariff-card__features li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--muted); } .tariff-card__features .provider-icon { width: 17px; height: 17px; margin-top: 3px; color: var(--accent); } .tariff-card__price { margin-top: auto; display: flex; align-items: baseline; gap: 8px; padding-top: 14px; } .tariff-card__amount { font-size: clamp(34px, 3.6vw, 44px); font-weight: 700; letter-spacing: -0.03em; } .tariff-card__period { font-size: 14px; color: var(--muted); } .tariff-card__cta { margin-top: 20px; width: 100%; } /* A note is anything from one sentence to a multi-paragraph disclaimer with its own bullet lines (see the "note" field in Plan tabs), so it gets one treatment that holds up at both lengths rather than a plain centred line that only reads well as one sentence. A capped width keeps the line length readable instead of stretching across the whole (up to ~1240px) section; the icon sits at the top rather than vertically centred against the whole block, which is what centring did once the text grew past one line. */ .tariffs__note { display: flex; align-items: flex-start; gap: 12px; /* 880px matches --container-w's own "narrow" reading-column convention (see .provider-container--narrow) rather than a one-off number. */ max-width: 880px; margin: 30px auto 0; padding: 16px 20px; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px var(--border); background: rgba(var(--surface-rgb), 0.5); text-align: left; } .tariffs__note-icon { flex: none; width: 18px; height: 18px; margin-top: 3px; color: var(--accent); } .tariffs__note-text { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--muted); } .tariffs__note-text strong { color: var(--text); font-weight: 700; } .tariffs__note-text a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; } /* ── Extra services ───────────────────────────────────────────────── */ .services__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; } .service-card { display: flex; flex-direction: column; gap: 10px; padding: 26px 24px 24px; overflow: hidden; transition: transform 0.35s, border-color 0.35s, box-shadow 0.35s; } .service-card:hover { transform: translateY(-6px); border-color: rgba(var(--accent-rgb), 0.42); box-shadow: var(--shadow-glow); } /* Corner light that only wakes up on hover — gives each card its own accent instead of four identical rectangles. */ .service-card__glow { position: absolute; top: -40%; right: -30%; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--accent-rgb), 0.35), transparent 65%); opacity: 0; transform: scale(0.7); transition: opacity 0.4s, transform 0.4s; pointer-events: none; } .service-card:hover .service-card__glow { opacity: 1; transform: scale(1); } /* Every second and third card leans on the other accents, so a row of cards reads as a set rather than a repeat. */ .service-card:nth-child(3n + 2) .service-card__glow { background: radial-gradient(circle, rgba(var(--accent-2-rgb), 0.35), transparent 65%); } .service-card:nth-child(3n + 3) .service-card__glow { background: radial-gradient(circle, rgba(var(--accent-3-rgb), 0.32), transparent 65%); } .service-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .service-card__icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 15px; color: var(--accent); background: rgba(var(--accent-rgb), 0.1); border: 1px solid rgba(var(--accent-rgb), 0.22); transition: background 0.35s, color 0.35s, border-color 0.35s, transform 0.35s; } .service-card__icon .provider-icon { width: 24px; height: 24px; } .service-card:hover .service-card__icon { background: var(--grad); border-color: transparent; color: var(--on-accent); transform: rotate(-6deg) scale(1.06); } .service-card:nth-child(3n + 2) .service-card__icon { color: var(--accent-2); background: rgba(var(--accent-2-rgb), 0.1); border-color: rgba(var(--accent-2-rgb), 0.22); } .service-card:nth-child(3n + 3) .service-card__icon { color: var(--accent-3); background: rgba(var(--accent-3-rgb), 0.1); border-color: rgba(var(--accent-3-rgb), 0.22); } .service-card:hover .service-card__icon { color: var(--on-accent); } .service-card__badge { padding: 5px 12px; border-radius: 100px; border: 1px solid rgba(var(--accent-rgb), 0.35); background: rgba(var(--accent-rgb), 0.12); font-size: 11.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent-text); white-space: nowrap; } .service-card__name { font-size: 17.5px; font-weight: 700; margin-top: 4px; } .service-card__descr { font-size: 14px; color: var(--muted); } .service-card__price { display: flex; align-items: baseline; gap: 7px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); } .service-card__amount { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .service-card__unit { font-size: 13.5px; color: var(--muted); } /* ── Payment methods ──────────────────────────────────────────────── */ /* Its own grid rather than .services__grid: payment method copy tends to run longer (see section-payment.php), so it is capped at --payment-cols per row (2 by default) instead of auto-fitting as many 250px-wide cards as the row allows. Flex, not grid, for the same reason as tariffs/features: an incomplete last row stays centred instead of hugging the left edge. */ /* align-items: flex-start overrides flex's default stretch — without it, expanding one card's address list makes it taller and every other card in that row stretches to match, which reads as "two cards opened" even though only one's list actually did. Each card now sizes to its own content, independent of its row neighbours. */ .payment__grid { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: var(--grid-gap); } .payment__grid .service-card { flex: 0 1 calc((100% - (var(--payment-cols) - 1) * var(--grid-gap)) / var(--payment-cols)); min-width: 280px; } /* The same .service-card class renders both a static card and a clickable one (see the a/article toggle in the template) — this arrow is the only visual difference, so a link doesn't quietly look exactly like static text. Bottom-right rather than in the header, which already carries the icon and the badge and has no room for a third element. */ .service-card--link { padding-bottom: 46px; } .service-card__arrow { position: absolute; right: 20px; bottom: 20px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--accent); background: rgba(var(--accent-rgb), 0.1); border: 1px solid rgba(var(--accent-rgb), 0.22); transition: background 0.25s, color 0.25s, border-color 0.25s, transform 0.25s; } .service-card__arrow svg { width: 15px; height: 15px; } .service-card--link:hover .service-card__arrow { background: var(--grad); border-color: transparent; color: var(--on-accent); transform: translate(2px, -2px); } /* Address list for a payment method with many locations (a terminal network, several branches, …). Collapsed by default — see section-payment.php for why this isn't just printed inline — and capped in height with its own scroll once expanded, so one very long list can't drag the whole page out. */ .service-card__locations-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 14px; border: 0; border-top: 1px solid var(--border); background: transparent; font-family: inherit; font-size: 13.5px; font-weight: 600; color: var(--accent-text); cursor: pointer; text-align: left; } .service-card__locations-toggle svg { width: 14px; height: 14px; flex: none; transition: transform 0.2s; } .service-card__locations-toggle[aria-expanded="true"] svg { transform: rotate(180deg); } .service-card__locations { margin: 10px 0 0; padding: 0; list-style: none; max-height: 180px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; /* Same thin, accent-coloured scrollbar as the popup dialog, rather than whatever bulky default the browser would otherwise draw here. */ scrollbar-width: thin; scrollbar-color: rgba(var(--accent-rgb), 0.5) transparent; } .service-card__locations::-webkit-scrollbar { width: 8px; } .service-card__locations::-webkit-scrollbar-track { background: transparent; } .service-card__locations::-webkit-scrollbar-thumb { background-color: rgba(var(--accent-rgb), 0.5); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } .service-card__locations::-webkit-scrollbar-thumb:hover { background-color: rgba(var(--accent-rgb), 0.75); } .service-card__locations li { padding: 7px 10px; border-radius: var(--radius-sm); background: rgba(var(--text-rgb), 0.04); font-size: 13px; line-height: 1.4; color: var(--muted); } .service-card__locations[hidden] { display: none; } /* ── About ────────────────────────────────────────────────────────── */ .about__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: clamp(32px, 5vw, 68px); align-items: center; } .about__content .section-heading__title { font-size: clamp(28px, 3.6vw, 44px); } .about__text { margin-top: 22px; color: var(--muted); } .about__text p + p { margin-top: 14px; } /* Fixed two columns, not auto-fit: the numbers are meant to read as a 2×2 block next to the text, and auto-fit re-flowed them into 1, 2 or 3 columns depending on how much room the neighbouring column happened to leave. */ .about__stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .stat-card { padding: 26px 24px; transition: transform 0.3s, border-color 0.3s; } .stat-card:hover { transform: translateY(-4px); border-color: rgba(var(--accent-rgb), 0.35); } .stat-card__value { display: block; font-size: clamp(28px, 3vw, 38px); font-weight: 700; letter-spacing: -0.03em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .stat-card__label { display: block; margin-top: 8px; font-size: 14px; color: var(--muted); } .about__equipment { margin-top: clamp(40px, 5vw, 64px); text-align: center; } .about__equipment-title { font-size: 16px; font-weight: 600; color: var(--muted); margin-bottom: 22px; } .about__equipment-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } .about__equipment-list li { padding: 11px 24px; border: 1px solid var(--border); border-radius: 100px; background: rgba(var(--surface-rgb), 0.5); font-size: 15px; font-weight: 600; letter-spacing: 0.02em; color: var(--muted); transition: color 0.25s, border-color 0.25s; } .about__equipment-list li:hover { color: var(--text); border-color: var(--border-strong); } /* ── Steps ────────────────────────────────────────────────────────── */ .steps__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; } .step-card { position: relative; padding-top: 30px; } .step-card::before { content: ''; position: absolute; top: 12px; left: 0; right: -24px; height: 1px; background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.5), transparent); } .step-card:last-child::before { right: 0; } .step-card__num { display: inline-grid; place-items: center; width: 46px; height: 46px; margin-bottom: 16px; border: 1px solid rgba(var(--accent-rgb), 0.3); border-radius: 14px; background: rgba(var(--accent-rgb), 0.1); font-size: 15px; font-weight: 700; color: var(--accent-text); } .step-card__title { font-size: 19px; margin-bottom: 8px; } .step-card__descr { color: var(--muted); font-size: 15px; } /* ── CTA banner ───────────────────────────────────────────────────── */ .cta-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; padding: clamp(32px, 4.5vw, 56px); border: 1px solid rgba(var(--accent-rgb), 0.28); border-radius: var(--radius-lg); background: radial-gradient(120% 160% at 0% 0%, rgba(var(--accent-rgb), 0.18), transparent 60%), radial-gradient(120% 160% at 100% 100%, rgba(var(--accent-3-rgb), 0.18), transparent 60%), rgba(var(--surface-rgb), 0.7); box-shadow: var(--shadow); backdrop-filter: blur(14px); } .cta-banner__content { flex: 1 1 380px; } .cta-banner__title { font-size: clamp(26px, 3.2vw, 38px); } .cta-banner__descr { margin-top: 14px; color: var(--muted); max-width: 52ch; } /* Centred as a column so the phone number sits exactly under the button rather than against the left edge of the block. */ .cta-banner__actions { display: flex; flex-direction: column; align-items: center; gap: 14px; } .cta-banner__phone { display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-size: 17px; font-weight: 700; text-align: center; } .cta-banner__phone .provider-icon { color: var(--accent); } /* ── FAQ ──────────────────────────────────────────────────────────── */ .faq__list { display: grid; gap: 12px; } .faq-item { overflow: hidden; transition: border-color 0.3s; } .faq-item[open] { border-color: rgba(var(--accent-rgb), 0.35); } .faq-item__q { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 26px; font-size: 17px; font-weight: 600; cursor: pointer; list-style: none; } .faq-item__q::-webkit-details-marker { display: none; } .faq-item__toggle { position: relative; flex: none; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border-strong); transition: transform 0.3s, border-color 0.3s; } .faq-item__toggle::before, .faq-item__toggle::after { content: ''; position: absolute; top: 50%; left: 50%; width: 10px; height: 1.6px; background: currentColor; transform: translate(-50%, -50%); transition: opacity 0.25s; } .faq-item__toggle::after { transform: translate(-50%, -50%) rotate(90deg); } .faq-item[open] .faq-item__toggle { transform: rotate(180deg); border-color: var(--accent); color: var(--accent-text); } .faq-item[open] .faq-item__toggle::after { opacity: 0; } /* overflow:hidden lets main.js animate the panel height without the answer spilling out of the card mid-transition. `contain` keeps the relayout of a growing panel inside itself instead of dirtying the rest of the page on every frame. */ /* No padding here on purpose — it belongs to .faq-item__inner. Padding is added on top of `height`, so a padded panel never actually collapses to zero and the leftover strip snaps in and out at both ends of the animation. */ .faq-item__a { padding: 0; overflow: hidden; contain: content; color: var(--muted); font-size: 15.5px; } .faq-item__inner { padding: 0 26px 24px; } /* While the height animates, the card's frosted-glass backdrop would have to be re-sampled and re-blurred every single frame behind a resizing, rounded, clipped box — the main reason the accordion stuttered. The blur is dropped for the duration and restored the moment it settles; the card keeps its own background colour, so the change is invisible in motion. */ .faq-item.is-animating { backdrop-filter: none; -webkit-backdrop-filter: none; } .faq-item.is-animating .faq-item__a { will-change: height; } /* ── Contacts ─────────────────────────────────────────────────────── */ .contacts__grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(24px, 3.5vw, 44px); align-items: start; } .contacts__cards { display: grid; gap: 14px; } .contact-card { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 16px; align-items: center; padding: 20px 22px; transition: transform 0.3s, border-color 0.3s; } a.contact-card:hover { transform: translateY(-3px); border-color: rgba(var(--accent-rgb), 0.4); } .contact-card__icon { grid-row: 1 / 3; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; color: var(--accent); background: rgba(var(--accent-rgb), 0.1); border: 1px solid rgba(var(--accent-rgb), 0.2); } .contact-card__label { font-size: 13px; color: var(--muted); } .contact-card__value { font-size: 16.5px; font-weight: 600; word-break: break-word; } /* wp_kses_post output (see section-contacts.php) — a elsewhere in the same card is already styled for the "whole card is one big link" cards below; this covers a link that's just part of the value text on a plain card. :not(--list) excludes the auto-filled phone list just below, whose tel: links aren't wp_kses_post content and shouldn't gain an underline. */ .contact-card__value:not(.contact-card__value--list) a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } /* Auto-filled phone card (see section-contacts.php): one link per number instead of the single line every other card's value is. */ .contact-card__value--list { display: flex; flex-direction: column; gap: 4px; } .contact-card__value--list a { color: inherit; } .contact-card__value--list a:hover { color: var(--accent-text); } .contacts__hours { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--muted); padding: 4px 6px; } .contacts__hours .provider-icon { width: 17px; height: 17px; color: var(--accent); } .contacts__form { padding: clamp(26px, 3vw, 38px); } .contacts__form-title { font-size: 22px; margin-bottom: 22px; } /* ── Lead form ────────────────────────────────────────────────────── */ .lead-form { display: grid; gap: 16px; } .lead-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .lead-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .lead-form__field { display: grid; gap: 7px; } .lead-form__field[hidden] { display: none; } .lead-form__field label { font-size: 13.5px; font-weight: 600; color: var(--muted); } .lead-form__field label span { color: var(--accent-text); } .lead-form input[type="text"], .lead-form input[type="tel"], .lead-form input[type="email"], .lead-form textarea { width: 100%; padding: 14px 16px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: rgba(var(--bg-rgb), 0.45); color: var(--text); font: inherit; font-size: 15.5px; transition: border-color 0.25s, box-shadow 0.25s, background 0.25s; } .provider-scheme-light .lead-form input[type="text"], .provider-scheme-light .lead-form input[type="tel"], .provider-scheme-light .lead-form input[type="email"], .provider-scheme-light .lead-form textarea { background: rgba(var(--bg-rgb), 0.9); } .lead-form input::placeholder, .lead-form textarea::placeholder { color: rgba(var(--text-rgb), 0.35); } .lead-form input:focus, .lead-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.16); } .lead-form input[aria-invalid="true"] { border-color: #f87171; } .lead-form textarea { resize: vertical; min-height: 92px; } .lead-form input[readonly] { color: var(--accent-text); font-weight: 600; } .lead-form__consent { display: flex; align-items: flex-start; gap: 11px; font-size: 13.5px; color: var(--muted); cursor: pointer; } .lead-form__consent input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--accent); flex: none; } .lead-form__consent a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 2px; } .lead-form__status { font-size: 14.5px; min-height: 1px; } .lead-form__status.is-success { color: #34d399; } .lead-form__status.is-error { color: #f87171; } .lead-form__captcha { display: flex; justify-content: center; min-height: 65px; } /* ── Popup ────────────────────────────────────────────────────────── */ .provider-popup { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; } .provider-popup[hidden] { display: none; } .provider-popup__overlay { position: absolute; inset: 0; background: rgba(2, 4, 12, 0.7); backdrop-filter: blur(6px); animation: fade-in 0.25s ease; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } .provider-popup__dialog { position: relative; width: min(560px, 100%); max-height: min(88vh, 900px); overflow-y: auto; padding: clamp(26px, 3.4vw, 40px); background: var(--card-bg-solid); animation: popup-in 0.32s cubic-bezier(0.22, 0.61, 0.36, 1); scrollbar-width: thin; scrollbar-color: rgba(var(--accent-rgb), 0.5) transparent; } .provider-popup__dialog::-webkit-scrollbar { width: 8px; } .provider-popup__dialog::-webkit-scrollbar-track { background: transparent; } .provider-popup__dialog::-webkit-scrollbar-thumb { background-color: rgba(var(--accent-rgb), 0.5); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; } .provider-popup__dialog::-webkit-scrollbar-thumb:hover { background-color: rgba(var(--accent-rgb), 0.75); } @keyframes popup-in { from { opacity: 0; transform: translateY(20px) scale(0.98); } to { opacity: 1; transform: none; } } .provider-popup__close { position: absolute; top: 16px; right: 16px; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--border); border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; transition: color 0.2s, border-color 0.2s, transform 0.2s; } .provider-popup__close:hover { color: var(--text); border-color: var(--border-strong); transform: rotate(90deg); } .provider-popup__close svg { width: 17px; height: 17px; pointer-events: none; } .provider-popup__title { font-size: 25px; padding-right: 40px; } .provider-popup__descr { margin: 12px 0 22px; color: var(--muted); font-size: 15px; } /* Mobile-only hint that the sheet has more content below. Pinned to the bottom of the dialog's own box (not its scrolled content, see the position:absolute + overflow:auto note above), toggled by JS: shown only while the dialog actually overflows, hidden past the top few pixels of scroll and back once the visitor scrolls up again. Hidden entirely outside the bottom-sheet breakpoint below. Icon-only by design — a label would need translating and a chevron reads fine on its own. */ .provider-popup__scroll-hint { display: none; position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(var(--surface-rgb), 0.85); border: 1px solid var(--border-strong); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: var(--accent-text); box-shadow: 0 6px 18px rgba(2, 4, 12, 0.18); pointer-events: none; opacity: 1; transition: opacity 0.2s ease; animation: provider-scroll-hint-bounce 1.6s ease-in-out infinite; } .provider-popup__scroll-hint svg { width: 16px; height: 16px; flex: none; } .provider-popup__scroll-hint.is-hidden { opacity: 0; } @keyframes provider-scroll-hint-bounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 5px); } } /* ── Cookie banner ────────────────────────────────────────────────── */ .cookie-banner { position: fixed; left: 20px; bottom: 20px; z-index: 95; display: flex; align-items: center; gap: 18px; max-width: 560px; padding: 16px 20px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: rgba(var(--surface-rgb), 0.94); backdrop-filter: blur(14px); box-shadow: var(--shadow); animation: cookie-in 0.4s ease 0.8s backwards; } .cookie-banner[hidden] { display: none; } .cookie-banner__text { font-size: 14px; color: var(--muted); } @keyframes cookie-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } /* ── Back to top ──────────────────────────────────────────────────── */ .back-to-top { position: fixed; right: 20px; bottom: 20px; z-index: 94; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--border-strong); border-radius: 50%; background: rgba(var(--surface-rgb), 0.9); color: var(--text); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.3s, transform 0.3s, visibility 0.3s, border-color 0.3s, color 0.3s; backdrop-filter: blur(10px); } .back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; } /* The scroll lock means the mobile menu or a popup is open — the floating corner controls have nothing to act on and would just sit on top of it. */ html.provider-lock .back-to-top, html.provider-lock .cookie-banner { opacity: 0; visibility: hidden; } .back-to-top:hover { color: var(--accent-text); border-color: var(--accent); } .back-to-top svg { width: 20px; height: 20px; pointer-events: none; } /* ── Cabinet login widget ─────────────────────────────────────────── */ /* Opposite corner from "back to top" on purpose, so the two floating buttons never fight for the same 20px square. Always visible once enabled — unlike "back to top", there is no scroll-position reason to hide it. */ .cabinet-login { position: fixed; left: 20px; bottom: 20px; z-index: 94; transition: opacity 0.3s, visibility 0.3s; } .cabinet-login__fab { position: relative; display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--border-strong); border-radius: 50%; background: rgba(var(--surface-rgb), 0.9); color: var(--text); cursor: pointer; transition: color 0.25s, border-color 0.25s, background 0.25s; backdrop-filter: blur(10px); } .cabinet-login__fab:hover, .cabinet-login__fab[aria-expanded="true"] { color: var(--on-accent); border-color: transparent; background: var(--grad); } .cabinet-login__fab svg { width: 20px; height: 20px; pointer-events: none; z-index: 1; } /* A ring that expands out from the button and fades, on a loop — the classic "there's something here" notification cue. Stops once the popup is open: drawing the eye to a button already in use just competes with the form sitting right above it. Respects the animation switch below and the reduced-motion override elsewhere in this file, same as everything else in the theme. */ .cabinet-login__fab::before { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.55); animation: cabinet-login-ping 2.6s cubic-bezier(0.3, 0, 0.4, 1) infinite; pointer-events: none; } .cabinet-login__fab[aria-expanded="true"]::before { animation-play-state: paused; box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0); } @keyframes cabinet-login-ping { 0% { box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.55); } 70% { box-shadow: 0 0 0 16px rgba(var(--accent-rgb), 0); } 100% { box-shadow: 0 0 0 16px rgba(var(--accent-rgb), 0); } } .provider-no-anim .cabinet-login__fab::before { animation: none !important; box-shadow: none !important; } html.provider-lock .cabinet-login { opacity: 0; visibility: hidden; } .cabinet-login__popup { position: absolute; left: 0; bottom: calc(100% + 12px); width: min(280px, calc(100vw - 40px)); padding: 20px; border-radius: var(--radius-lg); background: var(--card-bg-solid); box-shadow: inset 0 0 0 1px var(--border), var(--shadow); animation: header-phone-list-in 0.18s ease; } .cabinet-login__popup[hidden] { display: none; } .cabinet-login__title { font-size: 16px; margin: 0 0 14px; } .cabinet-login__form { display: flex; flex-direction: column; gap: 10px; } .cabinet-login__field input { width: 100%; padding: 11px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: rgba(var(--text-rgb), 0.04); color: var(--text); font: inherit; font-size: 14.5px; transition: border-color 0.2s; } .cabinet-login__field input:focus { outline: none; border-color: var(--accent); } .cabinet-login__form .provider-btn { margin-top: 4px; } @media (max-width: 480px) { .cabinet-login { left: 12px; bottom: 16px; } .cookie-banner:not([hidden]) ~ .cabinet-login { bottom: 84px; } } /* ── Inner pages ──────────────────────────────────────────────────── */ .page-shell { padding: clamp(48px, 7vw, 96px) 0 var(--section-y); min-height: 62vh; } .page-shell__header { margin-bottom: 34px; } .page-shell__title { font-size: clamp(30px, 4vw, 46px); } .page-shell__descr { margin-top: 14px; color: var(--muted); } .page-shell__empty { color: var(--muted); } .page-shell--404 { text-align: center; display: grid; place-content: center; } .error-404__code { font-size: clamp(96px, 18vw, 200px); font-weight: 700; line-height: 1; letter-spacing: -0.05em; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0.85; } .page-shell--404 .provider-btn { margin-top: 28px; justify-self: center; } .provider-prose { color: var(--muted); font-size: 16.5px; } .provider-prose h2 { margin: 34px 0 14px; font-size: 26px; color: var(--text); } .provider-prose h3 { margin: 26px 0 12px; font-size: 20px; color: var(--text); } .provider-prose p { margin-bottom: 14px; } .provider-prose ul { margin: 0 0 16px; padding-left: 22px; list-style: disc; } .provider-prose li { margin-bottom: 8px; } .provider-prose a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; } .provider-prose strong { color: var(--text); } .post-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 22px; } .post-card { padding: 24px; display: flex; flex-direction: column; gap: 10px; transition: transform 0.3s, border-color 0.3s; } .post-card:hover { transform: translateY(-5px); border-color: rgba(var(--accent-rgb), 0.35); } .post-card__thumb img { border-radius: var(--radius-sm); margin-bottom: 6px; } .post-card__date { font-size: 13px; color: var(--accent-text); } .post-card__title { font-size: 20px; } .post-card__excerpt { color: var(--muted); font-size: 15px; } .pagination { margin-top: 40px; } .pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .pagination .page-numbers { display: grid; place-items: center; min-width: 42px; height: 42px; padding: 0 12px; border: 1px solid var(--border); border-radius: 12px; color: var(--muted); font-weight: 600; transition: color 0.2s, border-color 0.2s; } .pagination .page-numbers:hover { color: var(--text); border-color: var(--border-strong); } .pagination .page-numbers.current { color: var(--on-accent); background: var(--grad); border-color: transparent; } /* ── Footer ───────────────────────────────────────────────────────── */ .site-footer { position: relative; margin-top: var(--section-y); padding: clamp(48px, 6vw, 76px) 0 30px; border-top: 1px solid var(--border); background: rgba(var(--surface-rgb), 0.42); } .site-footer__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 52px); } .site-footer__logo { display: inline-block; margin-bottom: 18px; color: var(--text); } .site-footer__logo img { max-height: var(--logo-img-height, 38px); width: auto; } .site-footer__descr { color: var(--muted); font-size: 14.5px; max-width: 46ch; } /* The global `a { text-decoration: none; color: inherit; }` would otherwise make a link inside this wp_kses_post field look exactly like plain text. */ .site-footer__descr a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; } .site-footer__descr strong { color: var(--text); } .site-footer__social { display: flex; gap: 10px; margin-top: 22px; } .site-footer__social a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 12px; color: var(--muted); transition: color 0.25s, border-color 0.25s, transform 0.25s; } .site-footer__social a:hover { color: var(--accent-text); border-color: var(--accent); transform: translateY(-3px); } .site-footer__social .provider-icon { width: 19px; height: 19px; } .site-footer__col-title { font-size: 15px; margin-bottom: 16px; letter-spacing: 0.02em; } .site-footer__col ul { display: grid; gap: 11px; } .site-footer__col a { color: var(--muted); font-size: 14.5px; transition: color 0.2s; } .site-footer__col a:hover { color: var(--accent-text); } .site-footer__contacts { display: grid; gap: 13px; } .site-footer__contacts li { display: flex; gap: 11px; align-items: flex-start; color: var(--muted); font-size: 14.5px; } .site-footer__contacts .provider-icon { width: 17px; height: 17px; margin-top: 3px; color: var(--accent); flex: none; } .site-footer__contacts a:hover { color: var(--accent-text); } /* Three slots: copyright, an optional centre line, the developer credit. A grid rather than space-between keeps the middle one truly centred no matter how wide the two outer ones are. */ .site-footer__bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px 20px; margin-top: clamp(36px, 4vw, 56px); padding-top: 24px; border-top: 1px solid var(--border); font-size: 13.5px; color: var(--muted); } /* .cabinet-login is fixed in the bottom-left corner and would sit on top of the copyright line — padding-left keeps that corner clear, same idea as .site-footer__credits--end below for .back-to-top on the other side. */ .site-footer__copy { grid-column: 1; justify-self: start; padding-left: 58px; } .site-footer__credits { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; } .site-footer__credits--center { grid-column: 2; justify-self: center; text-align: center; } /* The back-to-top button is fixed in the bottom-right corner and would sit on top of the last credit line, so that slot keeps the corner clear. */ .site-footer__credits--end { grid-column: 3; justify-self: end; padding-right: 58px; } .site-footer__credit { color: var(--muted); transition: color 0.2s; } .site-footer__credit strong { color: var(--text); font-weight: 600; } .site-footer__credit a, a.site-footer__credit:hover { color: var(--accent-text); } /* ── Scroll reveal ────────────────────────────────────────────────── */ /* Only hidden once the script has confirmed it runs — otherwise a broken or disabled JS would leave the whole page invisible. */ .provider-js .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); transition-delay: var(--delay, 0ms); } .provider-js .reveal.is-visible { opacity: 1; transform: none; } /* Global animation switch from the Customizer. */ .provider-no-anim .reveal, .provider-js.provider-no-anim .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .provider-no-anim .aurora__blob, .provider-no-anim .marquee__track, .provider-no-anim .hero__orbit, .provider-no-anim .hero__pulse, .provider-no-anim .gauge__value { animation: none !important; } .provider-no-anim .gauge__value { stroke-dashoffset: 138; } /* ── Responsive ───────────────────────────────────────────────────── */ @media (max-width: 1200px) { /* The account button goes first: between 1024 and 1200 px the full set (menu + phone + two buttons) no longer fits on one line. */ .site-header__cabinet { display: none; } .provider-menu a { padding: 9px 11px; font-size: 14.5px; } } @media (max-width: 1080px) { /* From here the gauge sits centred above the copy, so the copy is centred with it — left-aligned text under a centred graphic reads as broken alignment. This starts at the same width as the stacking, not later, so tablets get it too. */ .hero__grid { grid-template-columns: 1fr; } .hero__visual { order: -1; min-height: 300px; } .gauge { width: min(100%, 300px); } .hero__content { text-align: center; } .hero__descr { margin-left: auto; margin-right: auto; } .hero__actions { justify-content: center; } /* Flex instead of grid: an odd number of stats keeps the last one centred rather than stranded in the left column. */ .hero__stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px 34px; text-align: center; } .hero__stats li { flex: 0 1 auto; min-width: 96px; } /* The CTA banner's button and phone are already centred; without this the heading and copy above them stayed left. */ .cta-banner { text-align: center; } .cta-banner__content { flex-basis: 100%; } .cta-banner__descr { margin-left: auto; margin-right: auto; } .cta-banner__actions { width: 100%; } .contacts__grid { grid-template-columns: 1fr; } .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tariff-card, .feature-card { flex-basis: calc((100% - var(--grid-gap)) / 2); } } /* From here down the burger takes over, so the header keeps only the logo and a tidy row of equally sized round controls on the right. */ @media (max-width: 1024px) { .site-header__nav { display: none; } .site-header__burger { display: flex; } .site-header__phone span { display: none; } .site-header__phone { width: 44px; height: 44px; justify-content: center; border: 1px solid var(--border-strong); border-radius: 12px; } .site-header__phone .provider-icon { width: 20px; height: 20px; } /* The switcher lives inside the burger menu from this width on — two copies on screen at once only crowded the row. */ .site-header__actions .scheme-toggle { display: none; } .site-header__row { gap: 16px; } .site-header__actions { gap: 10px; } /* Burger menu: everything on one centred axis. */ .mobile-menu .provider-container { display: flex; flex-direction: column; align-items: center; } .provider-menu--mobile { width: 100%; text-align: center; } .mobile-menu__actions { width: 100%; max-width: 360px; align-items: center; text-align: center; } .mobile-menu__actions .provider-btn { width: 100%; } .scheme-toggle--wide { width: auto; justify-content: center; gap: 14px; } } @media (max-width: 720px) { body { font-size: 16px; } .provider-container { padding: 0 18px; } .hero__visual { min-height: 250px; } .gauge { width: min(100%, 260px); } /* Decorative rings extend 18% past the gauge, which pushed the document ~100px wider than the screen. They add nothing at this size. */ .hero__orbit { display: none; } /* Icon above the text, so a notice is not squeezed into a ~250px column. */ .announcement { grid-template-columns: 1fr; } /* Same reasoning as .announcement above: the arrow (if the slide links out) would otherwise overlap the centred copy. */ .promo-card { flex-direction: column; text-align: center; padding: 32px 24px; gap: 18px; min-height: 0; } .promo-card__body { max-width: none; } .promo-card__expires { justify-content: center; } .promo-card__arrow { top: auto; bottom: 20px; right: 20px; transform: none; } .promo-card--link:hover .promo-card__arrow { transform: translate(2px, -2px); } /* The button and phone were already centred while the heading and copy were not. */ .cta-banner { text-align: center; } .cta-banner__descr { margin-left: auto; margin-right: auto; } .contact-card { padding: 18px; column-gap: 13px; } .contact-card__value { font-size: 15.5px; } .hero__actions .provider-btn { flex: 1 1 100%; } .lead-form__row { grid-template-columns: 1fr; } .step-card::before { display: none; } .cta-banner__actions { width: 100%; } .cta-banner__actions .provider-btn { width: 100%; } .cookie-banner { left: 12px; right: 12px; bottom: 12px; max-width: none; flex-direction: column; align-items: stretch; text-align: center; } .back-to-top { bottom: 16px; right: 12px; } /* The cookie banner goes full-width here, so it would sit under the button — only lift the button clear while the banner is actually shown. */ .cookie-banner:not([hidden]) ~ .back-to-top { bottom: 84px; } /* Single-column footer reads much better centred than as a long ragged left edge. */ .site-footer__grid { grid-template-columns: 1fr; justify-items: center; text-align: center; } .site-footer__descr { margin-left: auto; margin-right: auto; } .site-footer__social { justify-content: center; } .site-footer__col { width: 100%; } .site-footer__contacts li { justify-content: center; } .site-footer__bottom { grid-template-columns: 1fr; justify-items: center; text-align: center; } /* Left out of the group below on purpose: centering it would only shift its text half as far as its own padding-left, since centering splits the extra width its padding adds on both sides. Staying start-aligned keeps the same "text starts padding-left px in" effect as desktop, so the corner stays clear at any width. */ .site-footer__copy { grid-column: 1; } .site-footer__credits--center, .site-footer__credits--end { grid-column: 1; justify-self: center; padding-right: 0; } .site-footer__credits { justify-content: center; } .tariff-card, .feature-card { flex-basis: 100%; min-width: 0; } .announcement { padding: 20px 20px 20px 24px; gap: 14px; } /* The request button stays even on a phone, just smaller — it is the main conversion action of the page. */ .site-header__cta { padding: 11px 16px; font-size: 14px; } /* No forced full-width/equal-share split here on purpose — with an editor-controlled tab count that would squeeze a long label onto two lines (2-3 tabs) or overflow the pill outright (4+). The base rule already scrolls a too-wide row horizontally instead; this just tightens touch padding so more tabs fit before scrolling kicks in. */ .tariff-tabs__btn { padding: 11px 18px; font-size: 14px; } } /* Two stat cards side by side stop being readable once each one is under ~170px — the long labels turn into a column of single words. */ @media (max-width: 560px) { .about__stats { grid-template-columns: 1fr; } } @media (max-width: 440px) { .site-header__cta { display: none; } } @media (max-width: 480px) { .section-heading__title { font-size: 28px; } .hero__title { font-size: 34px; } .provider-popup { padding: 0; align-items: end; } .provider-popup__dialog { max-height: 92vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .provider-popup__dialog.has-scroll-hint { padding-bottom: 52px; } .provider-popup__dialog.has-scroll-hint .provider-popup__scroll-hint { display: flex; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } .provider-js .reveal { opacity: 1; transform: none; } .gauge__value { stroke-dashoffset: 138; } } @media print { .site-header, .site-footer, .aurora, .back-to-top, .cookie-banner, .provider-popup, .marquee { display: none !important; } body { background: #fff; color: #000; } }