/* Sora (SIL Open Font License) — self-hosted, no request to Google servers (GDPR) */ /* latin-ext */ @font-face { font-family: 'Sora'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(../fonts/sora-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Sora'; font-style: normal; font-weight: 300 800; font-display: swap; src: url(../fonts/sora-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ========================================================================== Lytra — shared design system Tokens, base, layout, header/nav, footer, buttons, cards, motion. Page-specific styles live in assets/css/pages/.css ========================================================================== */ :root { /* Brand */ --navy: #071a5f; --navy-80: #2b3a78; --navy-60: #515c8a; --blue: #355af0; --blue-hover: #2446d6; --blue-soft: #eef2ff; --pink: #d571e5; --pink-hover: #c65bd8; --pink-text: #d66fe4; --yellow: #f5f887; --cyan: #71e6ff; --mint: #bfffb6; /* Neutrals */ --white: #ffffff; --bg: #f7f8ff; --bg-2: #f3f5fd; --pill: #ecf0f3; --line: #e4e8f4; --line-blue: #3d5bd9; --muted: #5b6386; --grey-text: #4a5070; /* Type */ --font: "Sora", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; /* Layout */ --container: 1344px; --gutter: 48px; --nav-h: 80px; --banner-h: 48px; --radius-s: 6px; --radius: 8px; --radius-l: 12px; /* Elevation */ --shadow-card: 0 1px 2px rgba(7, 26, 95, 0.04), 0 12px 40px -12px rgba(53, 90, 240, 0.12); --shadow-float: 0 2px 6px rgba(7, 26, 95, 0.06), 0 24px 60px -18px rgba(53, 90, 240, 0.22); /* header dropdowns: hairline edge + tight contact shadow + soft navy depth — lifts the panel off any backdrop (pale gradients included) while staying very quiet */ --shadow-menu: 0 0 0 1px rgba(7, 26, 95, 0.06), 0 1px 2px rgba(7, 26, 95, 0.05), 0 8px 18px -8px rgba(7, 26, 95, 0.1), 0 24px 52px -16px rgba(7, 26, 95, 0.16); /* Motion */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur: 0.9s; } @media (max-width: 1199px) { :root { --gutter: 40px; --nav-h: 66px; --banner-h: 29px; } } @media (max-width: 767px) { :root { --gutter: 16px; --nav-h: 66px; --banner-h: 29px; } } /* ---------- Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.5; color: var(--navy); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* clip (not hidden): hidden would turn into a scroll container whenever is overflow:hidden (menu open / Lenis stopped) and the sticky banner + header would scroll away */ overflow-x: clip; } img, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } h1, h2, h3, h4, h5, p, ul, ol, figure, blockquote { margin: 0; padding: 0; } ul, ol { list-style: none; } ::selection { background: var(--blue); color: #fff; } :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 4px; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------- Layout ---------- */ .container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } .section { position: relative; } /* Oversized illustrations may bleed past the viewport edge; clip without creating a scroll container */ main { overflow-x: clip; } .center { text-align: center; } /* ---------- Typography ---------- */ .eyebrow { font-size: 14px; line-height: 20px; font-weight: 600; letter-spacing: 0; text-transform: uppercase; color: var(--navy); } .h1 { font-size: 56px; line-height: 67px; font-weight: 700; letter-spacing: -0.038em; } .h2 { font-size: 48px; line-height: 56px; font-weight: 700; letter-spacing: -0.038em; } .h3 { font-size: 36px; line-height: 44px; font-weight: 700; letter-spacing: -0.03em; } .h4 { font-size: 24px; line-height: 32px; font-weight: 600; } .h5 { font-size: 20px; line-height: 28px; font-weight: 600; } .lead { font-size: 20px; line-height: 32px; font-weight: 400; } .body-l { font-size: 18px; line-height: 26px; } .body { font-size: 16px; line-height: 24px; } .small { font-size: 14px; line-height: 20px; } .t-blue { color: var(--blue); } .t-pink { color: var(--pink-text); } .t-muted { color: var(--grey-text); } .t-bold { font-weight: 700; } .nobr { white-space: nowrap; } /* German: longer compounds. Balance heading wraps; hyphenate running text only (split-line headings measure whole words, so they must not hyphenate). */ html[lang="de"] :is(h1, h2, h3, .h1, .h2, .h3) { text-wrap: balance; } html[lang="de"] :is(h1, h2, h3, h4, h5, h6) { -webkit-hyphens: manual; hyphens: manual; } html[lang="de"] .cta-band .lead { max-width: 440px; } /* DE: words break only at the curated soft hyphens (tools/hyphenate_de.py — compound joints such as "Service-anfragen"), never at arbitrary syllables */ html[lang="de"] :is(p, blockquote) { -webkit-hyphens: manual; hyphens: manual; text-wrap: pretty; } html[lang="de"] :is(li, figcaption, label, .footer, .nav, .mnav, .dropdown) { -webkit-hyphens: manual; hyphens: manual; text-wrap: pretty; } html[lang="de"] :is(.btn, .nav__link, .eyebrow, .chip) { -webkit-hyphens: manual; hyphens: manual; } /* Tablet/phone steps measured from the Home captures (headings ≈43px tablet, ≈39px phone). */ @media (max-width: 1199px) { .h1 { font-size: 44px; line-height: 48px; } .h2 { font-size: 43px; line-height: 48px; } .h3 { font-size: 32px; line-height: 40px; } .lead { font-size: 16px; line-height: 22px; } .body-l { font-size: 16px; line-height: 22px; } } @media (max-width: 767px) { .h1 { font-size: 39px; line-height: 44px; } .h2 { font-size: 39px; line-height: 44px; } .h3 { font-size: 28px; line-height: 34px; } .h4 { font-size: 20px; line-height: 28px; } .eyebrow { font-size: 14px; line-height: 18px; } } /* ---------- Buttons ---------- */ .btn { --btn-bg: var(--blue); --btn-fg: #fff; --btn-hover: #1f3cc4; --btn-halo: rgba(53, 90, 240, 0.2); --btn-shadow: rgba(31, 60, 196, 0.7); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 17px; border-radius: var(--radius-s); background: var(--btn-bg); color: var(--btn-fg); font-size: 16px; font-weight: 600; line-height: 1; white-space: nowrap; overflow: hidden; isolation: isolate; transition: background-color 0.35s var(--ease-out), box-shadow 0.45s var(--ease-out), color 0.3s ease; } /* Hover: a clearly deeper fill + a soft halo in the button's own colour. Nothing moves. */ .btn:hover { background: var(--btn-hover); box-shadow: 0 0 0 4px var(--btn-halo), 0 10px 22px -12px var(--btn-shadow); } .btn:active { filter: brightness(0.92); transition-duration: 0.1s; } .btn:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; } .btn--blue { --btn-bg: var(--blue); --btn-hover: #1f3cc4; --btn-halo: rgba(53, 90, 240, 0.2); --btn-shadow: rgba(31, 60, 196, 0.7); } .btn--pink { --btn-bg: var(--pink); --btn-hover: #b24ac6; --btn-halo: rgba(213, 113, 229, 0.24); --btn-shadow: rgba(178, 74, 198, 0.7); } .btn--white { --btn-bg: #fff; --btn-fg: var(--navy); --btn-hover: #e8edff; --btn-halo: rgba(255, 255, 255, 0.45); --btn-shadow: rgba(7, 26, 95, 0.35); } .btn--white:hover { color: var(--blue); } .btn--ghost { --btn-bg: transparent; --btn-fg: var(--blue); --btn-hover: var(--blue-soft); --btn-halo: rgba(53, 90, 240, 0.14); --btn-shadow: transparent; box-shadow: inset 0 0 0 1px var(--blue); } .btn--ghost:hover { box-shadow: inset 0 0 0 1px var(--blue), 0 0 0 4px var(--btn-halo); } .btn--nav { height: 48px; padding: 0 17px; border-radius: var(--radius); } .btn-row { display: flex; gap: 16px; flex-wrap: wrap; } .btn-row.center { justify-content: center; } @media (max-width: 767px) { .btn-row--stack { flex-direction: column; gap: 8px; } .btn-row--stack .btn { width: 100%; } } .link-underline { position: relative; font-size: 20px; font-weight: 600; color: var(--navy); padding-bottom: 2px; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat; transition: background-size 0.5s var(--ease-out), color 0.3s; } .link-underline:hover { color: var(--blue); background-size: 0% 2px; background-position: 100% 100%; animation: underline-in 0.5s 0.25s var(--ease-out) forwards; } @keyframes underline-in { from { background-size: 0% 2px; background-position: 0 100%; } to { background-size: 100% 2px; background-position: 0 100%; } } /* ---------- Banner ---------- */ /* Banner + header stay pinned together while scrolling */ .banner { position: sticky; top: 0; z-index: 60; display: flex; align-items: center; justify-content: center; height: var(--banner-h); background: var(--yellow); color: var(--navy); font-size: 16px; font-weight: 600; overflow: hidden; } /* hover: an underline draws in under the text */ .banner span { background: linear-gradient(currentColor, currentColor) 0 100% / 0% 1.5px no-repeat; padding-bottom: 2px; transition: background-size 0.45s var(--ease-out); } .banner:hover span, .banner:focus-visible span { background-size: 100% 1.5px; } @media (max-width: 1199px) { .banner { font-size: 12px; } } /* ---------- Header / Nav ---------- */ .header { position: sticky; top: var(--banner-h); z-index: 50; height: var(--nav-h); background: rgba(255, 255, 255, 0.98); transition: box-shadow 0.4s ease, background-color 0.4s ease; } .header.is-scrolled { box-shadow: 0 1px 0 rgba(7, 26, 95, 0.06), 0 10px 30px -18px rgba(7, 26, 95, 0.25); background: rgba(255, 255, 255, 0.86); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); } .header__inner { display: flex; align-items: center; height: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); } .header__logo { display: block; width: 110px; flex: none; } .header__logo img { width: 110px; height: 29px; } .nav { display: flex; align-items: center; gap: 29px; margin-left: auto; margin-right: 148px; } .nav__link { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 48px; font-size: 16px; font-weight: 400; color: var(--navy); transition: color 0.3s; } .nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1.5px; background: var(--blue); transform: scaleX(0); transform-origin: right; transition: transform 0.5s var(--ease-out); } .nav--has-current .nav__link { color: #9da5b0; } .nav--has-current .nav__link[aria-current="page"] { color: var(--navy); } .nav .nav__link:hover, .nav__item.is-open > .nav__link { color: var(--blue); } .nav__link:hover::after { transform: scaleX(1); transform-origin: left; } .nav__chev { width: 18px; height: 18px; transition: transform 0.4s var(--ease-out); } .nav__item { position: relative; } .nav__item.is-open .nav__chev { transform: rotate(180deg); } .header__tools { display: flex; align-items: center; gap: 12px; } .header__divider { width: 1px; height: 44px; background: #d9dce6; margin-right: 11px; } /* Language switch */ .lang { position: relative; } .lang__btn { display: inline-flex; align-items: center; gap: 12px; height: 48px; padding: 0 16px; border-radius: var(--radius); background: var(--pill); font-size: 16px; font-weight: 600; color: var(--navy); transition: background-color 0.3s; } .lang__btn:hover { background: #e2e7ee; } .lang__btn img { width: 24px; height: 24px; } .lang__btn .nav__chev { width: 24px; height: 24px; } .lang.is-open .nav__chev { transform: rotate(180deg); } .lang__menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 100%; padding: 6px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-menu); opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.98); transform-origin: top right; transition: opacity 0.3s, transform 0.4s var(--ease-out), visibility 0s 0.4s; } .lang.is-open .lang__menu { opacity: 1; visibility: visible; transform: none; transition: opacity 0.3s, transform 0.4s var(--ease-out); } .lang__menu a { display: flex; width: 100%; padding: 10px 14px; border-radius: 6px; font-weight: 600; white-space: nowrap; transition: background-color 0.25s, color 0.25s; } .lang__menu a:hover, .lang__menu a[aria-current="true"] { background: var(--blue-soft); color: var(--blue); } /* Products mega dropdown */ .dropdown { position: absolute; top: calc(100% + 16px); left: 50%; width: 440px; padding: 12px; background: #fff; border-radius: var(--radius-l); box-shadow: var(--shadow-menu); opacity: 0; visibility: hidden; transform: translate(-50%, -8px) scale(0.98); transform-origin: top center; transition: opacity 0.3s, transform 0.5s var(--ease-out), visibility 0s 0.5s; } .dropdown::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; } .nav__item.is-open .dropdown { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity 0.3s, transform 0.5s var(--ease-out); } .dropdown__item { display: flex; align-items: center; gap: 16px; padding: 12px; border-radius: var(--radius); transition: background-color 0.3s; } .dropdown__item:hover { background: var(--bg-2); } .dropdown__item img { width: 48px; height: 48px; flex: none; transition: transform 0.5s var(--ease-spring); } .dropdown__item:hover img { transform: scale(1.08); } .dropdown__item strong { display: block; font-size: 16px; font-weight: 600; } .dropdown__item span { display: block; font-size: 13px; line-height: 18px; color: var(--muted); } /* Burger */ .burger { display: none; width: 48px; height: 48px; margin-right: -6px; position: relative; } .burger span { position: absolute; left: 6px; width: 37px; height: 1px; background: var(--navy); transition: transform 0.5s var(--ease-out), opacity 0.3s, top 0.5s var(--ease-out); } .burger span:nth-child(1) { top: 15px; } .burger span:nth-child(2) { top: 24px; } .burger span:nth-child(3) { top: 33px; } .menu-open .burger span:nth-child(1) { top: 24px; transform: rotate(45deg); } .menu-open .burger span:nth-child(2) { opacity: 0; transform: scaleX(0.2); } .menu-open .burger span:nth-child(3) { top: 24px; transform: rotate(-45deg); } /* Mobile menu */ .mnav { position: fixed; inset: 0; z-index: 45; padding: calc(var(--nav-h) + var(--banner-h) + 24px) var(--gutter) 32px; background: #fff; overflow-y: auto; clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path 0.7s var(--ease-in-out), visibility 0s 0.7s; } .menu-open .mnav { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 0.7s var(--ease-in-out); } .mnav__group + .mnav__group { margin-top: 28px; } .mnav__label { font-size: 14px; font-weight: 600; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; } .mnav__link { display: flex; align-items: center; gap: 14px; padding: 12px 0; font-size: 22px; font-weight: 600; color: var(--navy); border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(16px); transition: opacity 0.5s, transform 0.6s var(--ease-out), color 0.3s; } .mnav__link img { width: 40px; height: 40px; } .menu-open .mnav__link { opacity: 1; transform: none; transition-delay: calc(0.2s + var(--i, 0) * 0.05s); } .mnav__link:hover { color: var(--blue); } .mnav__cta { margin-top: 28px; display: grid; gap: 10px; } .mnav__cta .btn { width: 100%; } .mnav .lang { display: none; position: relative; z-index: 5; width: max-content; margin-bottom: 20px; } .mnav .lang__menu { left: 0; right: auto; transform-origin: top left; } /* Language switch with the menu open: the menu's contents fade out/in around the page change */ .mnav > * { transition: opacity 0.28s var(--ease-out); } .mnav-swap .mnav > *, html.menu-arrive .mnav > * { opacity: 0; } html.menu-arrive .mnav { clip-path: inset(0 0 0 0); visibility: visible; transition: none; } html.menu-arrive, html:has(body.menu-open) { overflow: hidden; } html.menu-arrive .burger span, .menu-instant .burger span, .menu-instant .mnav, .menu-instant .mnav__link { transition: none !important; } html.menu-arrive .burger span:nth-child(1) { top: 24px; transform: rotate(45deg); } html.menu-arrive .burger span:nth-child(2) { opacity: 0; transform: scaleX(0.2); } html.menu-arrive .burger span:nth-child(3) { top: 24px; transform: rotate(-45deg); } @media (max-width: 1199px) { .nav, .header__divider, .header__tools .btn--nav { display: none; } .header__tools { margin-left: auto; gap: 32px; } .burger { display: block; } .header__logo, .header__logo img { width: 132px; height: auto; } .lang__btn { height: 48px; padding: 0 16px; } } @media (max-width: 767px) { .header__tools .lang { display: none; } .mnav .lang { display: block; } .mnav { padding-top: calc(var(--nav-h) + var(--banner-h) + 16px); padding-bottom: 24px; } .mnav__group + .mnav__group { margin-top: 20px; } .mnav__link { padding: 10px 0; font-size: 19px; line-height: 1.25; } .mnav__link img { width: 34px; height: 34px; } .mnav__cta { margin-top: 22px; } .header__logo, .header__logo img { width: 132px; } } /* ---------- Cards ---------- */ .card { position: relative; background: #fff; border: 1px solid #e9ecf8; border-radius: var(--radius); box-shadow: var(--shadow-card); transition: transform 0.6s var(--ease-out), box-shadow 0.6s var(--ease-out), border-color 0.4s; } .card--hover:hover { transform: translateY(-6px); box-shadow: var(--shadow-float); border-color: #dfe4fb; } /* Icon tile (outlined rounded square with glyph) */ .icon-tile { display: grid; place-items: center; width: 66px; height: 66px; border: 1px solid var(--blue); border-radius: 12px; background: #fff; flex: none; } .icon-tile img { width: 36px; height: 36px; } /* Number badge (filled blue rounded square) */ .num { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 4px; background: var(--blue); color: #fff; font-size: 15px; font-weight: 700; flex: none; } .num--l { width: 51px; height: 51px; border-radius: 8px; font-size: 28px; } /* Chip / tag (outlined) */ .chip { display: inline-flex; align-items: center; gap: 12px; height: 48px; padding: 0 16px; border: 1px solid var(--blue); border-radius: 4px; color: var(--blue); font-size: 16px; font-weight: 600; background: #fff; transition: background-color 0.3s, transform 0.5s var(--ease-out); } .chip img { width: 24px; height: 24px; } .chip:hover { background: var(--blue-soft); } /* ---------- Gradient surfaces ---------- */ .shader-bg { background-color: #8fd8f5; background-image: url("../img/gradient-desktop.webp"); background-size: cover; background-position: center; } @media (max-width: 1199px) { .shader-bg { background-image: url("../img/gradient-tablet.webp"); } } @media (max-width: 767px) { .shader-bg { background-image: url("../img/gradient-mobile.webp"); } } /* ---------- CTA band (shared across pages) ---------- */ .cta-band { position: relative; overflow: hidden; padding: 68px 0 57px; text-align: center; } .cta-band .eyebrow { margin-bottom: 25px; } .cta-band h2 { max-width: 560px; margin: 0 auto; } .cta-band .lead { max-width: 380px; margin: 18px auto 19px; } .cta-band__glow { position: absolute; inset: -20%; background: radial-gradient(40% 50% at var(--mx, 50%) var(--my, 50%), rgba(255, 255, 255, 0.35), transparent 70%); pointer-events: none; transition: background-position 0.2s; } @media (max-width: 1199px) { .cta-band { padding: 40px 0; } .cta-band .eyebrow { margin-bottom: 20px; } .cta-band h2 { max-width: 460px; } .cta-band .lead { max-width: 330px; margin: 20px auto 20px; } .cta-band .btn-row { flex-direction: column; gap: 8px; } .cta-band .btn { width: 100%; } } @media (max-width: 767px) { .cta-band { padding: 40px 0; } } /* ---------- Cursor light on gradient surfaces (see lytra.js) ---------- */ .has-gfx { isolation: isolate; overflow: hidden; } /* Static gradients: the layer only carries the light. It sits behind the surface's content (z-index -1 inside the isolated surface) and clips the glow to the surface's own shape. */ .has-gfx > .gfx { position: absolute; inset: 0; z-index: -1; border-radius: inherit; overflow: hidden; pointer-events: none; } /* image surfaces: the light sits above the image but below the logo/content that follows it */ .ab-partner__media > .gfx, .quote > .gfx { z-index: 0; } .has-gfx.is-lit > .gfx::after { content: ""; position: absolute; left: 0; top: 0; width: var(--lw, 800px); aspect-ratio: 1; border-radius: 50%; /* a fixed glow moved by `translate` = composited only, no repaint of the gradient */ background: radial-gradient(closest-side, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.08) 55%, transparent); translate: calc(var(--lxp, 0px) - 50%) calc(var(--lyp, 0px) - 50%); will-change: translate; animation: gfx-light-in 0.6s var(--ease-out) both; transition: opacity 0.5s var(--ease-out); } .has-gfx.is-dim > .gfx::after { opacity: 0; } @keyframes gfx-light-in { from { opacity: 0; } } .cta-band__glow { display: none; } /* ---------- Footer ---------- */ .footer { position: relative; background: var(--navy); color: #fff; overflow: hidden; } .footer__inner { max-width: 1440px; margin: 0 auto; padding: 72px 88px 0; } .footer__logo { width: 100%; max-width: 1262px; margin: 0 auto 0 2px; } .footer__logo img { width: 100%; height: auto; } .footer__grid { display: grid; grid-template-columns: 397px 1fr auto auto; column-gap: 0; margin-top: 56px; padding-bottom: 58px; } .footer__about p { font-size: 16px; line-height: 24px; max-width: 290px; } .footer__about .btn { margin-top: 28px; height: 48px; padding: 0 17px 0 16px; font-size: 16px; } .footer__about .btn img { width: 26px; height: 26px; } .footer__social { display: flex; gap: 37px; margin-top: 28px; font-size: 16px; } .footer__col h4 { font-size: 16px; line-height: 20px; font-weight: 700; color: #74e1ff; margin-bottom: 7px; } .footer__col li { font-size: 16px; line-height: 20px; } .footer__col li + li { margin-top: 8px; } .footer__col--company { margin-right: 94px; } .footer__col--legal { width: 122px; } .footer a { position: relative; transition: color 0.3s; } .footer a:not(.btn):hover { color: #74e1ff; } .footer__bar { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(116, 225, 255, 0.55); height: 68px; padding: 0 88px; max-width: 1440px; margin: 0 auto; font-size: 16px; } .footer__barwrap { border-top: 1px solid rgba(116, 225, 255, 0.55); } .footer__barwrap .footer__bar { border-top: 0; } .footer__made { display: flex; align-items: center; gap: 12px; } .footer__made img { width: 22px; height: 22px; } @media (max-width: 1199px) { .footer__inner { padding: 40px var(--gutter) 0; } .footer__logo { max-width: none; margin: 0; } .footer__grid { grid-template-columns: 276px 137px 170px 1fr; margin-top: 20px; padding-bottom: 32px; } .footer__about { display: contents; } .footer__about p { grid-column: 1 / -1; max-width: none; margin: 0 auto; text-align: center; } .footer__about .btn { grid-column: 1 / -1; width: 100%; margin: 20px 0 24px; } .footer__social { grid-column: 4; grid-row: 3; flex-direction: column; gap: 4px; margin: 0; line-height: 20px; } .footer__col h4 { margin-bottom: 4px; } .footer__col li + li { margin-top: 4px; } .footer__col--company { margin-right: 0; } .footer__col--legal { width: auto; max-width: 150px; } .footer__col--legal li:nth-child(2) { max-width: 100px; } .footer__barwrap { border-top: 0; padding: 0 var(--gutter); } .footer__bar { flex-direction: column; justify-content: center; gap: 12px; height: auto; padding: 16px 0 20px; border-top: 1px solid rgba(116, 225, 255, 0.55); } } @media (max-width: 767px) { .footer__inner { padding: 24px var(--gutter) 0; } .footer__grid { grid-template-columns: 1fr; row-gap: 12px; margin-top: 16px; padding-bottom: 24px; } .footer__about p { max-width: 260px; } .footer__about .btn { margin: 4px 0 0; } .footer__social { grid-column: 1; grid-row: auto; order: 0; flex-direction: row; justify-content: space-between; gap: 0; margin: 4px 0 8px; } .footer__col--legal li:nth-child(2) { max-width: 100px; } } /* ---------- Motion primitives ---------- */ [data-reveal] { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity 0.9s var(--ease-out), transform 1.1s var(--ease-out); transition-delay: calc(var(--d, 0) * 1s); } [data-reveal="fade"] { transform: none; } [data-reveal="left"] { transform: translate3d(-28px, 0, 0); } [data-reveal="right"] { transform: translate3d(28px, 0, 0); } [data-reveal="scale"] { transform: scale(0.97); } /* large brand marks (footer logo): a slower, softer arrival — fade + slight rise + de-blur */ /* (a[...] so it outranks link rules such as `.footer a { transition: color }`, which silently killed the fade) */ [data-reveal="logo"], a[data-reveal="logo"] { transform: translate3d(0, 28px, 0) scale(0.985); filter: blur(10px); transition: opacity 1.3s var(--ease-out), transform 1.6s var(--ease-out), filter 1.3s var(--ease-out), color 0.3s; transition-delay: calc(var(--d, 0) * 1s); } [data-reveal="logo"].is-in, a[data-reveal="logo"].is-in { opacity: 1; transform: none; filter: none; } [data-reveal].is-in { opacity: 1; transform: none; } /* Split-line heading reveal: JS wraps lines in .ln > span */ .split .ln { display: block; overflow: hidden; padding-bottom: 0.08em; margin-bottom: -0.08em; } .split .ln > span { display: inline-block; transform: translate3d(0, 105%, 0); transition: transform 1.1s var(--ease-out); transition-delay: calc(var(--d, 0) * 1s + var(--li, 0) * 0.08s); } .split.is-in .ln > span { transform: none; } /* Lottie container */ .lottie { position: relative; width: 100%; aspect-ratio: var(--ar, 1); } .lottie > svg { position: absolute; inset: 0; width: 100% !important; height: 100% !important; } .lottie__fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity 0.6s; } .lottie.is-ready .lottie__fallback { opacity: 0; pointer-events: none; } /* Illustrations render at 95 % of their slot (scaled around the centre, no layout shift). The "scattered data" story (000) keeps its design size; the orbit (001) scales from its centre too. */ .lottie { scale: 0.95; } .lottie[data-lottie="000"] { scale: 1; } /* Preloader */ .preloader { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: #fff; transition: opacity 0.8s var(--ease-out), visibility 0s 0.8s; } .preloader__anim { width: min(1280px, 180vw); aspect-ratio: 16 / 9; } .preloader.is-done { opacity: 0; visibility: hidden; } html.no-preload .preloader { display: none; } /* Page transition veil */ .veil { position: fixed; inset: 0; z-index: 999; background: #fff; pointer-events: none; opacity: 0; animation: veil-out 0.55s 0.05s var(--ease-out) backwards; transition: opacity 0.38s var(--ease-in-out); } @keyframes veil-out { from { opacity: 1; } } .is-leaving .veil { opacity: 1; pointer-events: all; animation: none; } .is-arriving .veil { opacity: 1; animation: none; transition: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; } [data-reveal], .split .ln > span { opacity: 1 !important; transform: none !important; } }