/* ============================================================ Levion marketing site — design tokens + glass primitive Loaded first; every other CSS file inherits via the cascade. ============================================================ */ :root { /* ---------- palette ---------- */ --accent: #1f7ae0; /* brand blue — CTAs, links, focus, active states */ --accent-soft: #3a8ee5; /* lighter accent — gradient companion */ --ink: #0b1220; /* primary text, dark glass surfaces */ --muted-1: #5b6470; /* secondary text, copyright */ --muted-2: #4b5563; /* body copy on light surfaces */ --border: #e5e9f0; /* card borders, dividers */ --border-soft: #d6dde6; /* subtle dividers */ /* ---------- radii ---------- */ --r-pill: 999px; /* pills (nav links, CTAs, language options) */ --r-panel: 1.6rem; /* dropdowns, panel corners, footer top */ --r-card: 1.5rem; /* bento + feature cards */ --r-small: 0.85rem; /* faq rows, small cards */ /* ---------- easings ---------- */ --ease-glass: cubic-bezier(0.175, 0.885, 0.32, 2.2); /* nav glass scale, overshoot */ --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1); /* scroll-in fade-up, decel ease-out */ --ease-spring: cubic-bezier(0.34, 1.3, 0.64, 1); /* spring overshoot, tactile */ --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); /* general smoothing */ } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { margin: 0; overflow-x: hidden; max-width: 100vw; background: #ffffff; color: var(--ink); /* Heebo → Hebrew + Latin · Inter → Cyrillic (Russian) fallback */ font-family: "Heebo", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; } img, svg, video { max-width: 100%; } /* Shared section shell */ .section { position: relative; padding: clamp(4rem, 9vw, 7.5rem) clamp(1.1rem, 5vw, 3rem); } .section__inner { max-width: 1180px; margin: 0 auto; } .section__eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 1.1rem; border-radius: var(--r-pill); background: rgba(31, 122, 224, 0.08); color: var(--accent); font-size: 0.88rem; font-weight: 600; letter-spacing: 0.02em; } .section__title { margin: 1rem 0 0.8rem; font-size: clamp(1.9rem, 4.4vw, 3rem); font-weight: 800; line-height: 1.15; color: var(--ink); } .section__lead { margin: 0; max-width: 46rem; color: var(--muted-2); font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.7; } /* Shared scroll-in reveal */ .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.8s var(--ease-reveal), transform 0.8s var(--ease-reveal); } .is-revealed .reveal, .reveal.is-revealed { opacity: 1; transform: none; } /* Visible focus everywhere */ a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; } /* Emphasized (security) phrases — heavier + darker than surrounding copy */ p strong, li strong { font-weight: 800; color: var(--ink); } .bcard--tall p strong, .pilot__card p strong, .pilot__card li strong { color: #ffffff; } /* Visually hidden (screen-reader only) */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ============================================================ Glass primitive
...content...
============================================================ */ .glass { position: relative; display: flex; align-items: center; isolation: isolate; overflow: hidden; border-radius: var(--r-pill); color: var(--ink); font-weight: 500; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 8px 18px rgba(15, 23, 42, 0.12), 0 18px 40px rgba(15, 23, 42, 0.10); transition: all 0.7s var(--ease-glass); } .glass__frost, .glass__tint, .glass__edge { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; } .glass__frost { z-index: 0; overflow: hidden; isolation: isolate; -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%); } .glass__tint { z-index: 1; background: rgba(255, 255, 255, 0.42); box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, 0.55), inset 0 -12px 18px -14px rgba(8, 12, 28, 0.55); } .glass__edge { z-index: 2; padding: 1px; background: linear-gradient(170deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.55) 30%, rgba(255, 255, 255, 0.14) 58%, rgba(255, 255, 255, 0.32) 78%, rgba(10, 14, 32, 0.34) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .glass__body { position: relative; z-index: 3; display: flex; align-items: center; } /* ============================================================ Buttons ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.7rem; padding: 1.05rem 2.4rem; border-radius: var(--r-pill); font-family: inherit; font-size: 1.02rem; font-weight: 600; text-decoration: none; cursor: pointer; border: none; transition: box-shadow 0.4s var(--ease-reveal), transform 0.6s var(--ease-spring); } .btn--primary { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-soft) 100%); color: #ffffff; box-shadow: 0 10px 24px rgba(31, 122, 224, 0.28), 0 2px 6px rgba(31, 122, 224, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.35); } .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 36px rgba(31, 122, 224, 0.36), 0 4px 10px rgba(31, 122, 224, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.4); } .btn--ghost { background: transparent; border: 1.5px solid rgba(11, 18, 32, 0.18); color: var(--ink); } .btn--ghost:hover { transform: translateY(-2px); border-color: rgba(11, 18, 32, 0.34); } /* ============================================================ Reduced motion — global gate ============================================================ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } .reveal { opacity: 1; transform: none; } }