@import url("../fonts/heebo.css"); /* ============================================================================= Paskal Design — site styles © Alexander Zmeev RTL is the native direction here, not an overlay: the document is dir="rtl" and layout uses logical properties, so nothing needs mirroring by hand. ============================================================================= */ :root { /* Surface */ --bg-a: #141418; --bg-b: #1e1e24; --glass: rgba(255, 255, 255, 0.05); --glass-strong: rgba(20, 20, 24, 0.82); --line: rgba(255, 255, 255, 0.1); --line-strong: rgba(255, 255, 255, 0.22); /* Ink — every value below clears 4.5:1 on --bg-a */ --ink: #ffffff; --ink-body: #c2c6cf; /* 10.9:1 */ --ink-muted: #9aa0ab; /* 7.1:1 */ --ink-faint: #8a8f99; /* 5.8:1 */ --ink-link: #7dd3fc; /* 11.2:1 */ --ink-link-hover: #bae6fd; /* Accent. The bright sky/violet pair is for glows, hairlines and LEDs — places where nothing is read. Text sits on the deeper ramp instead: white on #0ea5e9 is only 2.8:1, which fails AA outright. */ --accent: #0ea5e9; --accent-2: #a855f7; --cta: linear-gradient(100deg, #0369a1, #7c3aed); /* white on this: 5.7–5.9:1 */ --cta-glow: rgba(14, 165, 233, 0.55); --ok: #34d399; --ok-bg: rgba(52, 211, 153, 0.1); --bad: #f87171; --bad-ink: #fca5a5; --bad-bg: rgba(248, 113, 113, 0.08); --radius: 20px; --radius-sm: 12px; --shell: 1320px; --pad-x: clamp(18px, 4vw, 60px); --ease: cubic-bezier(0.4, 0, 0.2, 1); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* The sticky header would otherwise cover whatever an anchor jumps to. */ scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg-a); color: var(--ink); font-family: "Heebo", "Segoe UI", system-ui, -apple-system, sans-serif; font-size: 18px; line-height: 1.65; overflow-x: hidden; } /* The page gradient, painted once into its own layer. It used to be `background-attachment: fixed` on , which forces the browser to repaint the full viewport gradient on every scroll frame — the single most common cause of scroll stutter on a long page. A fixed pseudo-element looks exactly the same and is composited instead of repainted. (If the accessibility widget inverts the page, `filter` on turns this into a document-height gradient rather than a viewport one — a difference nobody can see.) */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: linear-gradient(160deg, var(--bg-a) 0%, var(--bg-b) 100%); pointer-events: none; } h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 700; /* Hebrew must never be letter-spaced: it detaches the letters. */ letter-spacing: 0; } p { margin: 0; max-width: 65ch; } img { max-width: 100%; height: auto; display: block; } a { color: var(--ink-link); text-decoration: none; } a:hover { color: var(--ink-link-hover); text-decoration: underline; } /* Links sitting inside running text are underlined, not merely tinted. Colour alone fails WCAG 1.4.1 whenever the link and the text around it are close in luminance — here #7dd3fc against #c2c6cf measures 1.02:1, which is no difference at all to a reader with limited colour vision, and none whatsoever in greyscale. An underline carries the meaning without colour. Standalone links — the navigation, the footer link lists, the table of contents — are deliberately left alone: there is no surrounding prose for them to be confused with, so the rule does not apply and underlining every menu item would only add noise. */ p a, .check a, .cookie__text a, .consent-row a, .legal li a, .footer__id a, .facts dd a, .crumbs a, .note a { text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; } p a:hover, .check a:hover, .cookie__text a:hover, .legal li a:hover, .footer__id a:hover, .facts dd a:hover, .crumbs a:hover { text-decoration-thickness: 2px; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; } /* Latin runs inside Hebrew text: keep them visually intact. */ .ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: fixed; inset-block-start: 10px; inset-inline-start: 10px; z-index: 200; padding: 12px 22px; border-radius: var(--radius-sm); background: #ffffff; color: #0b0b0e; font-weight: 700; transform: translateY(-200%); transition: transform 0.2s var(--ease); } .skip-link:focus { transform: translateY(0); text-decoration: none; color: #0b0b0e; } /* --- Shell ---------------------------------------------------------------- */ .shell { max-width: var(--shell); margin-inline: auto; padding-inline: var(--pad-x); } .section { padding-block: clamp(56px, 8vw, 100px); border-block-start: 1px solid rgba(255, 255, 255, 0.06); } .rule { width: 64px; height: 2px; margin-block-end: 22px; background: linear-gradient(90deg, var(--accent), var(--accent-2)); } .section__title { font-size: clamp(28px, 4vw, 38px); margin-block-end: 14px; } .section__lede { color: var(--ink-body); margin-block-end: clamp(32px, 4vw, 48px); } /* --- Buttons -------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 14px 28px; border: 0; border-radius: 14px; font: inherit; font-size: 17px; font-weight: 700; cursor: pointer; text-align: center; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background-color 0.2s var(--ease); } .btn:hover { text-decoration: none; } .btn--primary { background: var(--cta); color: #ffffff; box-shadow: 0 16px 36px -18px var(--cta-glow); } .btn--primary:hover { color: #ffffff; transform: translateY(-2px); box-shadow: 0 20px 42px -16px var(--cta-glow); } .btn--ghost { border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.03); color: var(--ink); font-weight: 600; } .btn--ghost:hover { color: var(--ink); background: rgba(255, 255, 255, 0.09); } .btn--wide { width: 100%; } .btn[aria-busy="true"] { cursor: progress; opacity: 0.75; } .btn__spinner { display: none; width: 18px; height: 18px; border: 2px solid rgba(255, 255, 255, 0.4); border-top-color: #ffffff; border-radius: 50%; animation: pk-spin 0.7s linear infinite; } .btn[aria-busy="true"] .btn__spinner { display: block; } @keyframes pk-spin { to { transform: rotate(360deg); } } /* --- Header --------------------------------------------------------------- */ .header { position: sticky; inset-block-start: 0; z-index: 60; background: rgba(20, 20, 24, 0.72); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-block-end: 1px solid var(--line); } .header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 14px; } .header__logo img { height: 38px; width: auto; } .nav { display: flex; align-items: center; gap: clamp(14px, 2vw, 34px); } .nav__link { display: flex; align-items: center; min-height: 44px; padding-inline: 4px; color: var(--ink-body); font-size: 17px; font-weight: 500; } .nav__link:hover, .nav__link[aria-current="page"] { color: var(--ink); text-decoration: none; } .nav__toggle { display: none; position: relative; width: 46px; height: 46px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.04); cursor: pointer; } .nav__toggle span { position: absolute; inset-inline: 12px; height: 1.5px; background: #ffffff; transition: transform 0.25s var(--ease), opacity 0.2s var(--ease); } .nav__toggle span:nth-child(1) { top: 15px; } .nav__toggle span:nth-child(2) { top: 22px; } .nav__toggle span:nth-child(3) { top: 29px; } .nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* --- Hero ----------------------------------------------------------------- */ .hero { position: relative; overflow: hidden; padding-block: clamp(40px, 7vw, 96px) clamp(52px, 9vw, 120px); } .hero__grid { position: absolute; inset: auto 0 -40px 0; height: 340px; background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.09) 0 1px, transparent 1px 72px), repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.09) 0 1px, transparent 1px 72px); transform: perspective(620px) rotateX(72deg); transform-origin: bottom center; -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent 75%); mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent 75%); pointer-events: none; } .hero__inner { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-block-end: 26px; padding: 7px 14px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 999px; background: rgba(255, 255, 255, 0.04); color: var(--ink-body); font-size: 14px; font-weight: 500; } .eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); } .hero h1 { font-size: clamp(32px, 4.4vw, 64px); font-weight: 800; line-height: 1.12; margin-block-end: 24px; text-wrap: balance; } .hero__lede { color: var(--ink-body); margin-block-end: 34px; } .hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-block-end: 22px; } .hero__trust { color: var(--ink-muted); font-size: 15px; } /* Decorative scene. aria-hidden in the markup — it carries no information. */ .scene { position: relative; height: 520px; } .scene__glow { position: absolute; inset-block-start: 110px; inset-inline-end: 90px; width: 340px; height: 340px; border-radius: 50%; /* No blur filter: the radial gradient already fades to transparent, so the filter added a rasterised layer for no visible difference. */ background: radial-gradient(circle, rgba(14, 165, 233, 0.32), rgba(14, 165, 233, 0) 70%); } .rack { position: absolute; inset-block-start: 108px; inset-inline-end: 118px; width: 210px; padding: 14px 12px; display: flex; flex-direction: column; gap: 9px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: linear-gradient(150deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02)); transform: perspective(900px) rotateY(-20deg) rotateX(8deg); box-shadow: 0 60px 70px -40px rgba(0, 0, 0, 0.9), 0 0 40px -10px rgba(14, 165, 233, 0.25); animation: pk-float 7s ease-in-out infinite; } .rack__unit { display: flex; align-items: center; justify-content: space-between; height: 26px; padding-inline: 9px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 5px; } .rack__leds { display: flex; gap: 5px; } .led { width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: 0.5; } .led--on { opacity: 1; box-shadow: 0 0 8px var(--accent); animation: pk-led 3.4s ease-in-out infinite; } .rack__unit:nth-child(2) .led--on { animation-duration: 4.1s; } .rack__unit:nth-child(3) .led--on { animation-duration: 4.8s; } .rack__unit:nth-child(4) .led--on { animation-duration: 5.5s; } .rack__bar { width: 52px; height: 1px; background: rgba(255, 255, 255, 0.2); } .rack__label, .cloud__label { color: var(--ink-faint); font-size: 11px; letter-spacing: 0.22em; text-align: center; } .rack__label { margin-block-start: 4px; } .cloud { position: absolute; inset-block-start: 22px; inset-inline-start: 30px; width: 190px; height: 110px; animation: pk-float-slow 8s ease-in-out infinite; } .cloud__body { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line-strong); border-radius: 60px 60px 44px 44px; background: linear-gradient(150deg, rgba(168, 85, 247, 0.1), rgba(255, 255, 255, 0.03)); box-shadow: 0 40px 60px -40px rgba(0, 0, 0, 0.9); } .cloud__orbit { position: absolute; inset: -26px; animation: pk-orbit 18s linear infinite; } .cloud__orbit span { position: absolute; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; } .cloud__orbit span:first-child { right: 0; background: var(--accent-2); box-shadow: 0 0 12px var(--accent-2); } .cloud__orbit span:last-child { left: 0; width: 6px; height: 6px; margin-top: -3px; background: var(--accent); box-shadow: 0 0 12px var(--accent); } .net { position: absolute; inset-block-end: 26px; inset-inline-start: 14px; width: 230px; height: 150px; } .net i { position: absolute; display: block; height: 1px; transform-origin: left center; } .net i:nth-child(1) { top: 20px; left: 24px; width: 130px; background: linear-gradient(90deg, rgba(14, 165, 233, 0.7), rgba(255, 255, 255, 0.06)); transform: rotate(24deg); } .net i:nth-child(2) { top: 70px; left: 10px; width: 170px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.28), rgba(255, 255, 255, 0.04)); transform: rotate(-14deg); } .net i:nth-child(3) { top: 108px; left: 40px; width: 120px; background: linear-gradient(90deg, rgba(168, 85, 247, 0.6), rgba(255, 255, 255, 0.05)); transform: rotate(12deg); } .net b { position: absolute; display: block; border-radius: 50%; } .net b:nth-child(4) { top: 16px; left: 18px; width: 7px; height: 7px; background: rgba(255, 255, 255, 0.85); } .net b:nth-child(5) { top: 64px; left: 150px; width: 6px; height: 6px; border: 1px solid rgba(255, 255, 255, 0.6); } .net b:nth-child(6) { top: 120px; left: 150px; width: 6px; height: 6px; background: var(--accent); box-shadow: 0 0 10px var(--accent); } .net b:nth-child(7) { bottom: 0; left: 60px; width: 9px; height: 9px; border: 1px solid rgba(255, 255, 255, 0.45); } @keyframes pk-float { 0%, 100% { transform: perspective(900px) rotateY(-20deg) rotateX(8deg) translateY(0); } 50% { transform: perspective(900px) rotateY(-20deg) rotateX(8deg) translateY(-14px); } } @keyframes pk-float-slow { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes pk-orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes pk-led { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } } /* --- Cards ---------------------------------------------------------------- */ /* No backdrop-filter here on purpose: these sit on a flat gradient, so a blur costs paint time every frame and changes nothing you can see. It stays only where content actually scrolls underneath (header, nav sheet, cookie bar). */ .card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--glass); } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .service { display: flex; flex-direction: column; gap: 16px; padding: 30px 26px 34px; transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease); } .service:hover { transform: translateY(-6px); border-color: rgba(14, 165, 233, 0.35); box-shadow: 0 40px 60px -40px rgba(0, 0, 0, 0.9), 0 0 40px -18px rgba(14, 165, 233, 0.5); } .service h3 { font-size: 23px; font-weight: 600; } .service p { color: var(--ink-body); font-size: 17px; } .service__icon { width: 52px; height: 52px; color: var(--accent); } .service__icon svg { width: 100%; height: 100%; display: block; } /* --- Steps ---------------------------------------------------------------- */ .steps { position: relative; } .steps__line { position: absolute; inset-block-start: 26px; inset-inline: 60px; height: 1px; background: linear-gradient(90deg, rgba(14, 165, 233, 0), var(--accent), var(--accent-2), rgba(168, 85, 247, 0)); box-shadow: 0 0 12px rgba(14, 165, 233, 0.6); } .steps__grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .step { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } .step__num { display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50%; background: #191920; font-size: 19px; font-weight: 700; } .step h3 { font-size: 23px; font-weight: 600; } .step p { max-width: 38ch; color: var(--ink-body); font-size: 17px; } /* --- About ---------------------------------------------------------------- */ .about { display: grid; grid-template-columns: 1.15fr 1fr; gap: 64px; align-items: center; } .pillars { display: grid; gap: 14px; } .pillar { display: flex; align-items: flex-start; gap: 14px; padding: 20px 22px; } .pillar__icon { flex: none; width: 26px; height: 26px; margin-block-start: 2px; color: var(--accent); } .pillar__icon svg { width: 100%; height: 100%; display: block; } .pillar strong { display: block; font-size: 17px; font-weight: 600; } .pillar span { color: var(--ink-muted); font-size: 15px; } /* --- Contact -------------------------------------------------------------- */ .contact { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; } .panel { padding: 34px 30px; } .panel h3 { font-size: 24px; font-weight: 600; } .facts { display: grid; grid-template-columns: auto 1fr; gap: 14px 20px; margin: 0; font-size: 17px; } .facts dt { color: var(--ink-muted); } .facts dd { margin: 0; color: var(--ink); } .panel__note { color: var(--ink-muted); font-size: 15px; margin-block-end: 24px; } .panel__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-block-start: 30px; } /* --- Form ----------------------------------------------------------------- */ .field { display: block; margin-block-end: 20px; } .field__label { display: block; margin-block-end: 8px; color: var(--ink-body); font-size: 16px; font-weight: 500; } .field__optional { color: var(--ink-muted); font-weight: 400; } .input, .textarea { width: 100%; min-height: 52px; padding: 14px 16px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.04); color: var(--ink); font: inherit; /* Anything under 16px makes iOS Safari zoom the page on focus. */ font-size: 17px; transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease); } .textarea { line-height: 1.6; resize: vertical; } .input::placeholder, .textarea::placeholder { color: #7c828d; } .input:hover, .textarea:hover { border-color: rgba(255, 255, 255, 0.28); } .input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--bad); background: var(--bad-bg); } .field__error { display: none; align-items: center; gap: 8px; margin-block-start: 8px; color: var(--bad-ink); font-size: 15px; } .field__error::before { content: "!"; flex: none; width: 18px; height: 18px; border: 1px solid var(--bad-ink); border-radius: 50%; font-size: 12px; line-height: 16px; font-weight: 700; text-align: center; } .field__error.is-shown { display: flex; } .check { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; color: var(--ink-body); font-size: 16px; line-height: 1.5; cursor: pointer; } .check input { flex: none; /* WCAG 2.5.8 asks for 24x24. The label around it is already a 44px target, but sizing the box itself removes any argument about which one counts. */ width: 24px; height: 24px; margin-block-start: 2px; accent-color: var(--accent); } /* Bot trap: a real field that a human never sees and never fills. Kept out of the accessibility tree too, so a screen reader will not offer it either. Hidden by clipping rather than by a big negative offset — in an RTL document `left: -9999px` is not off-stage, it is 9999px of scrollable page. */ .trap { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .note { display: flex; gap: 12px; padding: 16px 18px; border-radius: 14px; font-size: 16px; } .note--ok { border: 1px solid rgba(52, 211, 153, 0.5); background: var(--ok-bg); } .note--bad { border: 1px solid rgba(248, 113, 113, 0.5); background: var(--bad-bg); } .note strong { display: block; color: var(--ink); } .note span { color: var(--ink-body); } .note__icon { flex: none; width: 22px; height: 22px; } .note__icon svg { width: 100%; height: 100%; display: block; } .note--ok .note__icon { color: var(--ok); } .note--bad .note__icon { color: var(--bad-ink); } .form__status { margin-block-end: 22px; } .form__status:empty { display: none; margin: 0; } /* --- Footer --------------------------------------------------------------- */ .footer { padding-block: clamp(40px, 6vw, 64px) 34px; border-block-start: 1px solid rgba(255, 255, 255, 0.12); background: rgba(0, 0, 0, 0.22); } .footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; } .footer__logo { height: 34px; width: auto; margin-block-end: 18px; } .footer p, .footer li, .footer div { color: var(--ink-body); font-size: 16px; } .footer__head { color: var(--ink); font-size: 16px; font-weight: 600; margin-block-end: 12px; } .footer__list { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; } .footer__list a, .footer__list button { display: flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink-body); font: inherit; font-size: 16px; text-align: start; cursor: pointer; } .footer__list a:hover, .footer__list button:hover { color: var(--ink); } .footer__id { display: flex; flex-direction: column; gap: 8px; } .footer__id strong { color: var(--ink); font-weight: 600; } .footer__bottom { margin-block-start: 40px; padding-block-start: 22px; border-block-start: 1px solid rgba(255, 255, 255, 0.08); color: var(--ink-muted); font-size: 15px; } /* --- Cookie bar ----------------------------------------------------------- */ .cookie { position: fixed; inset-block-end: 0; inset-inline: 0; z-index: 90; margin: 0 auto; max-width: 1180px; padding: 22px 26px; border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 18px 18px 0 0; background: var(--glass-strong); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.95); } .cookie[hidden] { display: none; } .cookie__row { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; } .cookie__text { flex: 1 1 420px; min-width: 280px; color: var(--ink-body); font-size: 16px; line-height: 1.55; } .cookie__actions { display: flex; gap: 12px; flex-wrap: wrap; } /* Equal weight on every choice: accepting must not be visually easier than refusing, or the consent is not freely given. */ .cookie__btn { min-height: 48px; padding: 12px 22px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: rgba(255, 255, 255, 0.06); color: var(--ink); font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; transition: background-color 0.2s var(--ease); } .cookie__btn:hover { background: rgba(255, 255, 255, 0.13); } .cookie__details { display: grid; gap: 14px; margin-block-start: 22px; padding-block-start: 20px; border-block-start: 1px solid var(--line); } .cookie__details[hidden] { display: none; } .consent-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, 0.04); } .consent-row strong { display: block; font-size: 17px; font-weight: 600; } .consent-row span { color: var(--ink-muted); font-size: 15px; } .switch { flex: none; display: inline-flex; align-items: center; cursor: pointer; } .switch input { position: absolute; opacity: 0; width: 52px; height: 30px; cursor: pointer; } .switch__track { position: relative; width: 52px; height: 30px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px; background: rgba(255, 255, 255, 0.08); transition: background-color 0.2s var(--ease); } .switch__track::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 22px; height: 22px; border-radius: 50%; background: #8a8f99; transition: transform 0.2s var(--ease), background-color 0.2s var(--ease); } .switch input:checked + .switch__track { background: rgba(14, 165, 233, 0.35); } .switch input:checked + .switch__track::after { background: var(--accent); /* Logical: moves toward the inline end in either direction. */ transform: translateX(var(--switch-shift, 22px)); } [dir="rtl"] .switch input:checked + .switch__track::after { --switch-shift: -22px; } .switch input:focus-visible + .switch__track { outline: 2px solid var(--accent); outline-offset: 3px; } .switch input:disabled + .switch__track { opacity: 0.75; cursor: not-allowed; } /* --- Legal pages ---------------------------------------------------------- */ .legal { padding-block: clamp(44px, 6vw, 80px) clamp(60px, 8vw, 100px); } .legal__body { max-width: 68ch; margin-inline: auto; } .crumbs { display: flex; align-items: center; gap: 10px; margin-block-end: 26px; color: var(--ink-muted); font-size: 15px; } .crumbs a { color: var(--ink-muted); } .legal h1 { font-size: clamp(30px, 5vw, 46px); font-weight: 800; margin-block-end: 12px; } .legal__meta { color: var(--ink-muted); font-size: 16px; margin-block-end: 40px; } .toc { margin-block-end: 44px; padding: 22px 24px; } .toc__head { font-size: 17px; font-weight: 600; margin-block-end: 12px; } .toc ol { display: flex; flex-direction: column; gap: 8px; margin: 0; padding-inline-start: 20px; } .toc a { font-size: 16px; } .legal h2 { font-size: clamp(24px, 3.4vw, 32px); margin-block: 44px 14px; scroll-margin-top: 96px; } .legal h3 { font-size: 20px; font-weight: 600; margin-block: 28px 10px; } .legal p, .legal li { color: var(--ink-body); margin-block-end: 16px; max-width: none; } .legal ul, .legal ol { padding-inline-start: 24px; margin-block-end: 22px; } .legal li::marker { color: var(--ink-muted); } .legal strong { color: var(--ink); } .callout { padding: 24px 26px; margin-block: 26px; } .callout p:last-child { margin-block-end: 0; } /* --- Tables (cookie inventory) ------------------------------------------- */ /* The table scrolls inside its own box rather than widening the page: on a narrow screen a four-column table would otherwise push the whole document sideways, which in RTL is especially disorienting. */ .table-wrap { overflow-x: auto; margin-block: 22px 26px; border: 1px solid var(--line); border-radius: 14px; background: var(--glass); -webkit-overflow-scrolling: touch; } .table { width: 100%; border-collapse: collapse; font-size: 16px; min-width: 34rem; } .table th, .table td { padding: 13px 18px; text-align: start; vertical-align: top; border-block-end: 1px solid rgba(255, 255, 255, 0.07); } .table thead th { color: var(--ink); font-weight: 600; white-space: nowrap; background: rgba(255, 255, 255, 0.04); } .table tbody td { color: var(--ink-body); } .table tbody tr:last-child th, .table tbody tr:last-child td { border-block-end: 0; } /* --- Motion --------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* --- Responsive ----------------------------------------------------------- */ @media (max-width: 1080px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .about { grid-template-columns: 1fr; gap: 36px; } .contact { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; } } @media (max-width: 900px) { .hero__inner { grid-template-columns: 1fr; gap: 32px; } .scene { height: 300px; transform: scale(0.82); transform-origin: top center; } .nav__toggle { display: block; } /* The menu becomes a sheet under the header; it is hidden from the accessibility tree as well as the eye when closed. */ .nav { position: absolute; inset-inline: 0; inset-block-start: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 12px var(--pad-x) 20px; background: rgba(20, 20, 24, 0.97); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-block-end: 1px solid var(--line); } .nav[hidden] { display: none; } .nav__link { min-height: 52px; font-size: 18px; color: var(--ink); border-block-end: 1px solid rgba(255, 255, 255, 0.07); } .nav .btn { margin-block-start: 14px; } .steps__grid { grid-template-columns: 1fr; gap: 26px; } .steps__line { inset-block: 10px; inset-inline: auto; inset-inline-start: auto; inset-inline-end: 25px; width: 1px; height: auto; background: linear-gradient(180deg, rgba(14, 165, 233, 0), var(--accent), var(--accent-2), rgba(168, 85, 247, 0)); } } @media (max-width: 620px) { body { font-size: 17px; } .grid-4 { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: 1fr; } .panel { padding: 24px 20px; } .facts { grid-template-columns: 1fr; gap: 4px 0; } .facts dt { margin-block-start: 12px; } .cookie { padding: 18px 18px 22px; border-radius: 18px 18px 0 0; } .cookie__actions { width: 100%; } .cookie__btn { flex: 1 1 auto; } .hero__actions .btn { width: 100%; } } /* Screens too short for a floating bar to be worth its space. */ @media (max-width: 900px) { .scene__glow { inset-inline-end: 30%; } } /* --- Print ---------------------------------------------------------------- */ @media print { body { background: #ffffff; color: #000000; } .header, .footer, .cookie, .hero__grid, .scene, #zmva-root, .skip-link { display: none !important; } .legal p, .legal li, .legal h1, .legal h2 { color: #000000; } }