@font-face { font-family: "Elemental End"; src: url("../assets/fonts/elemental-end.ttf") format("truetype"); font-weight: 400 900; font-display: swap; } .x22, .x30 { font-family: "Elemental End", "Mulish", sans-serif; font-weight: 400; letter-spacing: 0.04em; } :root { --bg: #161617; --bg-alt: #1d1d1f; --bg-dark: #0a0a0b; --bg-header: #1d1d1f; --text: #f8f8f9; --text-dim: #9a9a9e; --line: #2a2a2d; --orange: #ff5a1f; --blue: #1495d4; --container: 1200px; --container-sm: 760px; --radius: 2px; --ease: cubic-bezier(0.22, 0.61, 0.36, 1); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: "Mulish", system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; } img, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ul { list-style: none; margin: 0; padding: 0; } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 24px; } .container--narrow { max-width: var(--container-sm); } .center { text-align: center; } .section { padding-block: clamp(64px, 10vw, 130px); background: var(--bg); } .section--alt { background: var(--bg-alt); } .section--dark { background: var(--bg-dark); } .section__heading { font-family: "Mulish", sans-serif; font-weight: 900; font-size: clamp(1.7rem, 4vw, 2.6rem); line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 1.4em; } .section__heading--center { text-align: center; } .section__text { max-width: 640px; margin: 1.6em auto 0; color: var(--text-dim); font-size: 0.95rem; text-align: center; } .section__text--left { margin-inline: 0; text-align: left; } .section__text strong { color: var(--text); font-weight: 600; } .eyebrow { text-align: center; text-transform: uppercase; letter-spacing: 0.16em; font-size: clamp(0.95rem, 1.5vw, 1.15rem); font-weight: 700; margin: 0 0 1em; } .eyebrow--orange { color: var(--orange); } .eyebrow--blue { color: var(--blue); } .site-header { position: sticky; top: 0; z-index: 100; background: rgba(29, 29, 31, 0.85); border-bottom: 1px solid transparent; transition: border-color 0.3s var(--ease), background 0.3s var(--ease); } .site-header.is-scrolled { border-bottom-color: var(--line); } .header__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 64px; } .logo { justify-self: start; display: inline-flex; align-items: center; } .logo__img { display: block; height: 36px; width: auto; } body:not(.theme-light) .site-header .logo__img { filter: brightness(0) invert(1); } .nav { justify-self: center; } .nav-toggle { justify-self: end; } .nav__list { display: flex; gap: 30px; align-items: center; } .nav__list a { font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text); transition: color 0.2s var(--ease); } .nav__list a:hover { color: var(--text); } .nav__shop { color: var(--text) !important; font-weight: 600; } .nav__list > li > a { display: inline-flex; align-items: center; height: 64px; } .nav__dropdown { position: relative; } .nav__submenu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px); background: var(--bg-header); border: 1px solid var(--line); border-radius: 2px; padding: 8px 0; min-width: 150px; opacity: 0; visibility: hidden; transition: opacity 0.2s var(--ease), transform 0.2s var(--ease); } .nav__dropdown:hover .nav__submenu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(10px); } .nav__submenu a { display: block; padding: 8px 18px; } .nav__has-mega { position: static; } .nav__mega { position: absolute; top: 100%; left: 0; right: 0; width: 100%; transform: none; background: var(--bg-header); border-top: 0; border-bottom: 1px solid var(--line); box-shadow: none; clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path 0.4s var(--ease), visibility 0s linear 0.4s; z-index: 120; } .nav__has-mega.is-open .nav__mega { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 0.4s var(--ease); } .nav__mega-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; max-width: var(--container); margin-inline: auto; padding: 26px 24px 32px; } .mega-overview { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1rem; color: var(--text); padding-bottom: 4px; border-bottom: 2px solid transparent; transition: color 0.2s var(--ease), border-color 0.2s var(--ease); } .mega-overview:hover { color: var(--blue); border-bottom-color: var(--blue); } .mega-overview__arrow { transition: transform 0.2s var(--ease); } .mega-overview:hover .mega-overview__arrow { transform: translateX(4px); } .mega-models { display: flex; justify-content: center; gap: 28px; } .nav__mega-inner--split { flex-direction: row; align-items: center; justify-content: center; gap: clamp(32px, 5vw, 72px); } .mega-quicklinks { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-left: clamp(24px, 4vw, 48px); border-left: 1px solid var(--line); } .mega-quicklinks__title { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-dim); margin-bottom: 4px; } .nav__mega-inner .mega-quicklink { color: var(--text); font-size: 1.05rem; font-weight: 700; text-transform: none; letter-spacing: normal; transition: color 0.2s var(--ease); } .nav__mega-inner .mega-quicklink:hover { color: var(--blue); } .nav__has-mega > a:hover { text-decoration: underline; text-underline-offset: 5px; } .page-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.34); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.35s var(--ease), visibility 0.35s var(--ease); z-index: 90; } body.mega-open .page-scrim { opacity: 1; visibility: visible; } body.mega-open .site-header { background: var(--bg-header); } body.mega-open .site-header.is-scrolled { border-bottom-color: transparent; } .mega-model { display: flex; flex-direction: column; align-items: center; gap: 10px; width: auto; min-width: 150px; padding: 16px; border-radius: 2px; text-align: center; color: var(--text); transition: background 0.2s var(--ease); } .mega-model:hover { background: var(--bg-alt); } .mega-model__media { display: flex; align-items: center; justify-content: center; height: 190px; background: transparent; } .mega-model__media img { height: 100%; width: auto; object-fit: contain; } .mega-model__media--empty { color: var(--text-dim); font-size: 0.85rem; } .mega-model__name { font-family: "Elemental End", "Mulish", sans-serif; font-size: 1.25rem; letter-spacing: 0.04em; text-transform: none; } .mega-model__name--text { font-family: "Mulish", sans-serif; font-weight: 800; font-size: 1.1rem; letter-spacing: normal; } .mega-model__cta { font-size: 0.8rem; color: var(--blue); margin-top: auto; } .mega-soon { margin: 0; padding: 44px 20px; color: var(--text-dim); font-size: 1rem; } .nav__mega-inner.mega-links { flex-direction: column; align-items: flex-start; gap: 14px; padding-block: 34px; } .nav__mega-inner .mega-link { color: var(--text); font-size: 1.05rem; font-weight: 700; text-transform: none; letter-spacing: normal; transition: color 0.2s var(--ease); } .nav__mega-inner .mega-link:hover { color: var(--blue); } .hdrmega__inner { align-items: flex-start; width: 100%; } .hdrmega__searchbar { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 720px; border-bottom: 2px solid var(--text); padding-bottom: 12px; } .hdrmega__searchbar svg { width: 24px; height: 24px; color: var(--text); flex: 0 0 auto; } .hdrmega__input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 1.6rem; color: var(--text); outline: none; } .hdrmega__input::placeholder { color: var(--text); opacity: 0.4; } .hdrmega__results { width: 100%; max-width: 720px; margin-top: 8px; } .hdrmega__results .hsearch__result { display: block; padding: 12px 4px; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; } .hdrmega__results .hsearch__result:hover { color: var(--blue); } .hdrmega__results .hsearch__empty { padding: 12px 4px; color: var(--text-dim); } .hdrmega__quicktitle { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-dim); margin-bottom: 10px; } .hdrmega__quick { margin-top: 26px; } .hdrmega__quick a { display: inline-block; margin-right: 28px; color: var(--text); text-decoration: none; font-weight: 600; font-size: 1.05rem; transition: color 0.2s var(--ease); } .hdrmega__quick a:hover { color: var(--blue); } .hdrmega__langrow a { display: inline-block; margin-right: 28px; color: var(--text); text-decoration: none; font-weight: 600; font-size: 1.25rem; transition: color 0.2s var(--ease); } .hdrmega__langrow a:hover { color: var(--blue); } @media (max-width: 820px) { .hdrmega { display: none !important; } } body.mega-switching .nav__mega { transition: none !important; } .lang__menu { display: none !important; } .nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: 6px; } .nav-toggle span { width: 24px; height: 2px; background: var(--text); transition: transform 0.3s var(--ease), opacity 0.3s var(--ease); } .nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.is-open span:nth-child(2) { opacity: 0; } .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .header__actions { justify-self: end; display: flex; align-items: center; gap: 4px; } .header__actions .lang, .header__actions .nav-toggle, .hsearch #searchToggle { position: relative; z-index: 2; } .icon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; min-width: 40px; padding: 0 8px; border: 0; border-radius: 2px; background: none; color: var(--text); cursor: pointer; transition: background 0.2s var(--ease), color 0.2s var(--ease); } .icon-btn:hover { background: rgba(127, 127, 127, 0.14); } .hshop { text-decoration: none; } .hshop__label { font-size: .95rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; } @media (max-width: 820px) { .hshop__label { display: none; } } .icon-btn svg { display: block; } .hsearch { display: flex; align-items: center; position: relative; } .hsearch__results { position: absolute; top: 100%; right: 0; margin-top: 10px; width: 320px; max-width: 80vw; max-height: 60vh; overflow-y: auto; background: var(--bg-header); border: 1px solid var(--line); border-radius: 2px; padding: 6px; z-index: 130; box-shadow: 0 16px 44px rgba(0, 0, 0, 0.3); } .hsearch__result { display: block; padding: 10px 12px; border-radius: 2px; color: var(--text); font-size: 0.92rem; } .hsearch__result:hover { background: rgba(127, 127, 127, 0.14); color: var(--blue); } .hsearch__result-t { display: block; font-weight: 600; line-height: 1.25; } .hsearch__result-d { display: block; font-size: 0.78rem; color: var(--text-dim); line-height: 1.3; margin-top: 1px; } .hsearch__result:hover .hsearch__result-d { color: var(--text-dim); } .hsearch__empty { padding: 12px; color: var(--text-dim); font-size: 0.88rem; } .hsearch__input { position: absolute; right: 42px; top: 50%; transform: translateY(-50%); width: 0; opacity: 0; padding: 7px 0; border: 1px solid transparent; border-radius: 2px; background: var(--bg-header); color: var(--text); font: inherit; font-size: 0.9rem; pointer-events: none; transition: width 0.3s var(--ease), opacity 0.25s var(--ease), padding 0.3s var(--ease); } .hsearch.is-open .hsearch__input { width: 200px; opacity: 1; padding: 7px 12px; border-color: var(--line); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14); pointer-events: auto; } .hsearch__input:focus { outline: none; border-bottom-color: var(--blue); } .hsearch__input::placeholder { color: var(--text); opacity: 0.6; } .foverlay { position: fixed; inset: 0; z-index: 200; background: var(--bg-header); opacity: 0; visibility: hidden; transition: opacity 0.26s var(--ease), visibility 0.26s var(--ease); } .foverlay.is-open { opacity: 1; visibility: visible; transition: none; } .foverlay__close { position: absolute; top: 12px; right: 14px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; color: var(--text); cursor: pointer; } .foverlay__close svg { width: 26px; height: 26px; } .foverlay__inner { max-width: 560px; margin: 0 auto; padding: 84px 22px 40px; } .foverlay__searchbar { display: flex; align-items: center; gap: 12px; border-bottom: 2px solid var(--text); padding-bottom: 12px; } .foverlay__searchbar svg { flex: 0 0 auto; color: var(--text); } .foverlay__input { flex: 1; min-width: 0; border: 0; background: transparent; font: inherit; font-size: 1.5rem; color: var(--text); outline: none; } .foverlay__input::placeholder { color: var(--text); opacity: 0.4; } .foverlay__results { margin-top: 6px; } .foverlay__results .hsearch__result { display: block; padding: 14px 4px; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; font-size: 1.05rem; } .foverlay__results .hsearch__result:hover { color: var(--blue); } .foverlay__results .hsearch__empty { padding: 14px 4px; color: var(--text-dim); } .foverlay__quick { margin-top: 30px; } .foverlay__quicktitle { display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--text-dim); margin-bottom: 6px; } .foverlay__quick a, .foverlay__langlink { display: block; padding: 16px 4px; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; font-size: 1.2rem; font-weight: 600; } .foverlay__quick a:hover, .foverlay__langlink:hover { color: var(--blue); } .foverlay__title { font-size: 1.5rem; margin: 0 0 14px; } @keyframes foverlayIn { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } } .foverlay.is-open .foverlay__inner > * { animation: foverlayIn 0.4s var(--ease) both; } .foverlay.is-open .foverlay__inner > *:nth-child(1) { animation-delay: 0.08s; } .foverlay.is-open .foverlay__inner > *:nth-child(2) { animation-delay: 0.15s; } .foverlay.is-open .foverlay__inner > *:nth-child(3) { animation-delay: 0.22s; } @media (prefers-reduced-motion: reduce) { .foverlay.is-open .foverlay__inner > * { animation: none; } } body.overlay-open { overflow: hidden; } body.overlay-open .site-header { display: none !important; } .lang { position: relative; } .lang__label { font-size: 0.85rem; font-weight: 700; } .lang__menu { position: absolute; top: 100%; right: 0; margin-top: 6px; background: var(--bg-header); border: 1px solid var(--line); border-radius: 2px; padding: 6px 0; min-width: 140px; list-style: none; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 0.2s var(--ease), transform 0.2s var(--ease); z-index: 130; } .lang:hover .lang__menu, .lang:focus-within .lang__menu { opacity: 1; visibility: visible; transform: translateY(0); } .lang__menu a { display: block; padding: 9px 18px; font-size: 0.9rem; color: var(--text); } .lang__menu a:hover { color: var(--blue); } .hero { background: var(--bg); padding-block: clamp(60px, 9vw, 110px); text-align: center; } .hero__title { font-family: "Elemental End", "Mulish", sans-serif; font-weight: 400; font-size: clamp(4rem, 16vw, 11rem); line-height: 0.95; letter-spacing: 0.02em; margin: 0; } .hero__subtitle { color: var(--text-dim); font-size: clamp(0.9rem, 2vw, 1.05rem); margin: 0.6em auto 0; max-width: 520px; } .hero__media { margin-top: clamp(36px, 5vw, 60px); aspect-ratio: 16 / 7; border: 2px solid var(--blue); border-radius: var(--radius); } .hero__productimg { display: block; margin: clamp(28px, 5vw, 52px) auto 0; max-height: min(58vh, 560px); width: auto; max-width: 100%; } .hero--black { background: #000; min-height: calc(100vh - 64px); min-height: calc(100dvh - 64px); display: flex; flex-direction: column; justify-content: center; padding-block: clamp(10px, 1.8vh, 28px); overflow: hidden; } .hero--black .container { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; } .hero--black .hero__title { font-size: clamp(1.9rem, 4.6vw, 3.4rem); line-height: 1; } .hero--black .hero__subtitle { margin-top: 0.5em; } .hero--black .hero__productimg { flex: 1 1 auto; min-height: 0; width: 100vw; max-width: 100vw; margin-top: clamp(10px, 2vh, 26px); margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); object-fit: contain; object-position: center; } .soon { min-height: calc(100dvh - 64px); display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; background: #0a0a0b; text-align: center; padding: clamp(56px, 9vh, 110px) 20px clamp(44px, 7vh, 88px); overflow: hidden; } .soon__inner { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 820px; margin: 0 auto; } .soon__badge { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 800; color: var(--blue); border: 1px solid rgba(20, 149, 212, .45); border-radius: 999px; padding: 6px 15px; margin-bottom: clamp(20px, 4vh, 38px); } .soon__word { font-family: "Elemental End", "Mulish", sans-serif; font-weight: 400; font-size: clamp(2.4rem, 11vw, 7rem); line-height: .95; letter-spacing: .02em; color: #f8f8f9; margin: 0; white-space: nowrap; } .soon__img { display: block; width: auto; max-width: 100%; max-height: min(44vh, 420px); margin: clamp(22px, 5vh, 46px) auto 0; filter: drop-shadow(0 26px 50px rgba(0, 0, 0, .55)); } .soon__sub { color: #f8f8f9; font-weight: 600; font-size: clamp(1.15rem, 2.2vw, 1.5rem); margin: clamp(20px, 4vh, 34px) 0 0; } .soon__more { color: var(--text-dim); font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); line-height: 1.6; margin: 14px 0 0; max-width: 48ch; } .soon__more strong { color: #f8f8f9; font-weight: 700; } .soon__cta { margin-top: clamp(24px, 4vh, 38px); } .soon__eyebrow { display: inline-block; color: var(--blue); font-weight: 800; text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; margin: 0 0 clamp(14px, 3vh, 22px); animation: soonUp .6s var(--ease) .15s both; } .soon__title { font-family: "Mulish", sans-serif; font-weight: 900; font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1.08; color: #f8f8f9; margin: 0; animation: soonUp 1s var(--ease) .45s both; } .soon--service .soon__more { animation-delay: 1s; } .soon--service .soon__cta { animation-delay: 1.35s; } @keyframes soonWord { from { opacity: 0; transform: translateY(14px) scale(1.05); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } } @keyframes soonUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } .soon__badge, .soon__word, .soon__img, .soon__sub, .soon__more, .soon__cta, .soon__eyebrow, .soon__title { opacity: 0; } .soon__badge { animation: soonUp .6s var(--ease) .15s both; } .soon__word { animation: soonWord 1.1s var(--ease) .4s both; } .soon__img { animation: soonUp 1s var(--ease) 1.25s both; } .soon__sub { animation: soonUp .8s var(--ease) 1.55s both; } .soon__more { animation: soonUp .8s var(--ease) 1.9s both; } .soon__cta { animation: soonUp .8s var(--ease) 2.2s both; } @media (prefers-reduced-motion: reduce) { .soon__badge, .soon__word, .soon__img, .soon__sub, .soon__more, .soon__cta, .soon__eyebrow, .soon__title { animation: none; opacity: 1; } } @media (max-width: 640px) { .hero--black .container { flex: 0 0 auto; display: block; } .hero--black .hero__productimg { flex: 0 0 auto; height: auto; } } @media (min-width: 641px) { .hero--black { padding-block: clamp(4px, 0.8vh, 12px); } .hero--black .hero__title { font-size: clamp(1.7rem, 2.8vw, 2.2rem); } .hero--black .hero__subtitle { margin-top: 0.3em; } .hero--black .hero__productimg { margin-top: clamp(4px, 1vh, 12px); } } .hero--apple { position: relative; overflow: hidden; background: #000; text-align: left; min-height: calc(100vh - 64px); min-height: calc(100dvh - 64px); display: flex; align-items: flex-end; padding: 0; } .hero--apple .hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; z-index: 0; } .hero--apple .hero__bg--still { opacity: 0; transition: opacity 0.7s var(--ease); } .hero--apple.is-ended .hero__bg--still { opacity: 1; } .hero--apple::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0) 42%); } .hero--apple .container { position: relative; z-index: 2; width: 100%; padding-top: clamp(24px, 5vh, 56px); padding-bottom: clamp(30px, 6vh, 76px); } .hero__lead { max-width: 44ch; text-shadow: 0 2px 26px rgba(0,0,0,0.55); } .hero__h1 { margin: 0; font-weight: 400; } .hero__model { display: block; font-family: "Elemental End", "Mulish", sans-serif; font-weight: 400; font-size: clamp(3rem, 10vw, 7rem); line-height: 0.9; letter-spacing: 0.02em; color: #f8f8f9; } .hero__sub { color: #f8f8f9; opacity: 0.9; font-weight: 500; font-size: clamp(0.9rem, 1.5vw, 1.15rem); line-height: 1.35; margin: 0.5em 0 0; max-width: 34ch; } @media (max-width: 640px) { .hero--apple { min-height: calc(100svh - 64px); align-items: flex-start; } .hero--apple .hero__bg { object-fit: cover; object-position: center; } .hero--apple .container { padding-top: clamp(18px, 4vh, 34px); padding-bottom: clamp(20px, 4vh, 40px); } .hero--apple::before { background: linear-gradient(to bottom, rgba(0,0,0,0.72), rgba(0,0,0,0) 46%); } } @media (max-width: 640px) { .hero--x30hero .hero__bg { object-position: 35% center; } } @keyframes heroFocus { from { filter: blur(20px); } to { filter: blur(0); } } @media (max-width: 640px) { .hero--x30hero .hero__bg { transform: scale(1.04); animation: heroFocus 1.6s ease-out 0.15s both; } } @media (prefers-reduced-motion: reduce) { .hero--x30hero .hero__bg { animation: none; transform: none; } } .media-placeholder { display: grid; place-items: center; background: repeating-linear-gradient(45deg, #1a1a1c 0 12px, #18181a 12px 24px); color: var(--text-dim); font-size: 0.85rem; letter-spacing: 0.04em; border-radius: var(--radius); min-height: 160px; } .media-placeholder span { opacity: 0.7; } .specsheet { overflow-x: hidden; } .specsheet .container--narrow { max-width: 900px; text-align: left; } .specsheet .spec-table th, .specsheet .spec-table td { text-align: left; } .specsheet .spec-table > tbody > tr > th { width: 50%; } .specs__back { display: block; color: var(--text-dim); text-decoration: none; font-size: 0.9rem; margin-bottom: clamp(16px, 3vw, 26px); transition: color 0.2s var(--ease); } .specs__back:hover { color: var(--text); } .specs__inline-link { color: var(--blue); } .videogrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 2.5vw, 26px); margin-top: clamp(28px, 4vw, 48px); } .videogrid .media-placeholder { aspect-ratio: 16 / 9; min-height: 0; } @media (max-width: 620px) { .videogrid { grid-template-columns: 1fr; } } .spec-block { margin-top: clamp(34px, 5vw, 58px); overflow-x: auto; } .spec-block__title { font-size: clamp(1.2rem, 2.4vw, 1.6rem); margin: 0 0 0.7em; padding-bottom: 0.5em; border-bottom: 1px solid var(--line); } .spec-table { width: 100%; border-collapse: collapse; font-size: 0.96rem; } .spec-table th, .spec-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; } .spec-table > tbody > tr > th { width: 34%; font-weight: 600; color: var(--text); } .spec-table > tbody > tr > td { color: var(--text-dim); } .spec-table--cols { min-width: 0; } @media (min-width: 620px) { .spec-table--cols { min-width: 520px; } } .spec-table--cols thead th { color: var(--text); font-weight: 700; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 2px solid var(--line); } .spec-table--cols tbody td { color: var(--text-dim); } .spec-table--cols tbody td:first-child { color: var(--text); font-weight: 600; } .spec-note { margin: 14px 0 0; font-size: 0.88rem; color: var(--text-dim); } .spec-note strong { color: var(--text); } @media (max-width: 600px) { .spec-table { font-size: 0.88rem; } .spec-table > tbody > tr > th { width: 42%; } } .pheader { position: fixed; top: 0; left: 0; right: 0; height: 56px; z-index: 99; background: rgba(29, 29, 31, 0.9); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(255, 255, 255, 0.1); transform: translateY(-100%); transition: transform 0.35s var(--ease); will-change: transform; } body.product-scrolled .pheader { transform: translateY(0); } body.product-scrolled .site-header { transform: translateY(-100%); transition: transform 0.35s var(--ease); } body.pheader-static .site-header { display: none; } body.pheader-static .pheader { transform: translateY(0); } body.pheader-static main { padding-top: 56px; } .pheader__inner { display: flex; align-items: center; height: 100%; gap: 24px; } .pheader__name { font-family: "Elemental End", "Mulish", sans-serif; font-weight: 400; font-size: 1.15rem; letter-spacing: 0.04em; color: #f5f5f7; text-decoration: none; } .pheader__nav { display: flex; gap: clamp(16px, 2vw, 30px); margin-left: auto; align-items: center; } .pheader__nav a { font-size: 0.9rem; color: var(--text-dim); text-decoration: none; white-space: nowrap; transition: color 0.2s var(--ease); } .pheader__nav a:hover, .pheader__nav a.is-current { color: #f5f5f7; } .pheader__cta { margin-left: 6px; background: var(--blue); color: #fff; padding: 7px 16px; border-radius: 2px; font-size: 0.85rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: filter 0.2s var(--ease); } .pheader__cta:hover { filter: brightness(1.1); } .pheader__toggle { display: none; } .pheader-scrim { position: fixed; inset: 0; z-index: 98; background: rgba(10, 10, 12, 0.35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s var(--ease), visibility 0.25s var(--ease); } .pheader-scrim.is-on { opacity: 1; visibility: visible; pointer-events: auto; } @media (min-width: 761px) { .pheader-scrim { display: none; } } @media (max-width: 760px) { .pheader__inner { gap: 8px; flex-wrap: nowrap; } .pheader__name { flex: 1 1 auto; min-width: 0; } .pheader__cta { flex: 0 0 auto; margin-left: 0; padding: 6px 13px; font-size: 0.82rem; } .pheader__toggle { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 38px; height: 38px; padding: 0; background: none; border: 0; color: var(--text); cursor: pointer; transition: color 0.2s var(--ease); } .pheader.is-open .pheader__toggle { color: var(--blue); } .pheader__toggle svg { transition: transform 0.25s var(--ease); } .pheader.is-open .pheader__toggle svg { transform: rotate(180deg); } .pheader__nav { display: flex; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; margin: 0; gap: 2px; padding: 6px 24px 14px; background: rgba(29, 29, 31, 0.97); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(255, 255, 255, 0.1); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0.25s var(--ease); } .pheader.is-open .pheader__nav { opacity: 1; visibility: visible; transform: translateY(0); } .pheader__nav a { padding: 11px 2px; font-size: 1rem; } } @media (prefers-reduced-motion: reduce) { .pheader, body.product-scrolled .site-header { transition: none; } } .chapters { position: fixed; left: clamp(16px, 2vw, 30px); top: 50%; transform: translateY(-50%); z-index: 80; display: none; } @media (min-width: 1100px) { .chapters { display: block; } } .chapters__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; } .chapters__item { display: flex; justify-content: flex-start; } .chapters__link { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; padding: 4px 0; } .chapters__dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(150, 150, 160, 0.4); flex: none; transition: background 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease); } .chapters__label { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); white-space: nowrap; opacity: 0; transform: translateX(-4px); transform-origin: left center; transition: opacity 0.25s var(--ease), transform 0.25s var(--ease); pointer-events: none; } .chapters__item.is-active .chapters__dot { background: var(--blue); transform: scale(1.35); } .chapters__link:hover .chapters__label { opacity: 1; transform: translateX(0); } .chapters__link:hover .chapters__dot { background: var(--text); } .chapters__item.is-flash .chapters__label { animation: chapterFlash 1.7s var(--ease); } @keyframes chapterFlash { 0% { opacity: 0; transform: translateX(-4px) scale(0.85); } 18% { opacity: 1; transform: translateX(0) scale(1.18); } 45% { opacity: 1; transform: translateX(0) scale(1); } 100% { opacity: 0; transform: translateX(0) scale(1); } } @media (prefers-reduced-motion: reduce) { .chapters__label, .chapters__dot { transition: none; } .chapters__item.is-flash .chapters__label { animation: none; } } @media (max-width: 1099px) { .chapters { display: block; left: 0; right: 0; top: 56px; transform: translateY(-100%); opacity: 0; visibility: hidden; transition: transform 0.35s var(--ease), opacity 0.35s var(--ease), visibility 0.35s var(--ease); z-index: 90; background: rgba(24, 24, 26, 0.92); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } body.product-scrolled .chapters, body.pheader-static .chapters { transform: translateY(0); opacity: 1; visibility: visible; } .chapters__list { flex-direction: row; gap: 0; overflow-x: auto; padding: 0 10px; scrollbar-width: none; } .chapters__list::-webkit-scrollbar { display: none; } .chapters__item { flex: 0 0 auto; } .chapters__link { padding: 11px 12px; gap: 0; } .chapters__dot { display: none; } .chapters__label { opacity: 1; transform: none; font-size: 0.74rem; color: var(--text-dim); } .chapters__item.is-active .chapters__label { color: #f8f8f9; } .chapters__item.is-flash .chapters__label { animation: none; } main > section[id] { scroll-margin-top: 104px; } } main > section[id] { scroll-margin-top: 80px; } .features { padding-bottom: clamp(48px, 7vw, 90px); min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; } .features__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 48px); } .features__heading { margin: 0; } .features__film { display: inline-flex; align-items: center; gap: 9px; color: var(--blue); font-size: 0.98rem; font-weight: 500; white-space: nowrap; } .features__film:hover { text-decoration: underline; } .play-badge { display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1.5px solid currentColor; border-radius: 50%; color: var(--blue); } .features__viewport { display: flex; gap: clamp(16px, 1.6vw, 26px); overflow: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; touch-action: manipulation; padding-inline: max(24px, (100% - var(--container)) / 2); scroll-padding-inline: max(24px, (100% - var(--container)) / 2); padding-bottom: 6px; scrollbar-width: none; } .features__viewport::-webkit-scrollbar { display: none; } @media (hover: hover) and (pointer: fine) { .features__viewport { overflow: hidden; } } .feature-card { position: relative; flex: 0 0 min(88vw, 1180px); height: clamp(440px, 66vh, 700px); scroll-snap-align: start; scroll-snap-stop: always; touch-action: manipulation; display: flex; flex-direction: column; background: #000; border-radius: 2px; overflow: hidden; padding: clamp(22px, 2.6vw, 36px) 16px clamp(14px, 1.8vw, 24px); } .feature-card__caption { text-align: center; margin: 0 auto; max-width: 30ch; font-size: clamp(1.1rem, 1.9vw, 1.6rem); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; color: var(--text); } .feature-card__caption strong { color: #f8f8f9; font-weight: 700; } @keyframes captionFlyInRight { from { transform: translateX(50vw); opacity: 0; } 40% { opacity: 1; } to { transform: none; opacity: 1; } } .feature-card__caption.fly { animation: captionFlyInRight 0.85s var(--ease) both; } @media (prefers-reduced-motion: reduce) { .feature-card__caption.fly { animation: none; } } .feature-card:not(:first-of-type) .feature-card__caption { opacity: 0; } @media (prefers-reduced-motion: reduce) { .feature-card:not(:first-of-type) .feature-card__caption { opacity: 1; } } .feature-card__body { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; margin-top: 14px; } .feature-card__img { display: block; width: 100%; height: 100%; object-fit: contain; } .feature-card__body--empty span { color: var(--text-dim); font-size: 0.9rem; letter-spacing: 0.04em; } .feature-card--photo .feature-card__body { align-items: flex-end; margin-bottom: calc(-1 * clamp(14px, 1.8vw, 24px)); } .feature-card--photo .feature-card__img { object-position: bottom center; } .feature-card--fill { padding: 0; } .feature-card--fill .feature-card__body { position: absolute; inset: 0; margin: 0; } .feature-card--fill .feature-card__img { object-fit: cover; object-position: center 38%; } .feature-card__caption .fc-cap-rest { display: block; margin-top: .55em; font-weight: 400; font-size: .82em; color: var(--text); } .feature-card--fill::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0) 42%); } .feature-card--fill .feature-card__caption { position: absolute; z-index: 2; top: clamp(22px,3vw,38px); left: 0; right: 0; margin: 0; max-width: none; padding: 0 clamp(22px,4vw,48px); text-align: center; text-shadow: 0 2px 14px rgba(0,0,0,0.55); } .feature-card--split { flex-direction: row; align-items: stretch; padding: 0; } .feature-card--split .feature-card__caption { flex: 0 0 40%; align-self: center; margin: 0; max-width: 24ch; text-align: left; padding: clamp(20px,3vw,42px); font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.3; overflow-wrap: break-word; hyphens: auto; } .feature-card--split .feature-card__caption strong { display: block; font-size: clamp(1.4rem, 2.3vw, 2.05rem); line-height: 1.14; letter-spacing: -0.02em; margin-bottom: 0.45em; } .feature-card--split .feature-card__body { flex: 1 1 auto; margin: 0; min-width: 0; display: block; align-self: stretch; position: relative; } .feature-card--split .feature-card__img { width: 100%; height: 100%; display: block; object-fit: contain; object-position: top center; } .feature-card--split .feature-card__still { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s var(--ease); } .feature-card--split.is-ended .feature-card__still { opacity: 1; } @keyframes captionFlyInLeft { from { transform: translateX(-28px); opacity: 0; } to { transform: none; opacity: 1; } } .feature-card--split .feature-card__caption.fly { animation: captionFlyInLeft 0.7s var(--ease) both; } @media (prefers-reduced-motion: reduce) { .feature-card--split .feature-card__caption.fly { animation: none; } } @media (max-width: 640px) { .feature-card--split { flex-direction: column; justify-content: flex-start; } .feature-card--split .feature-card__body { order: -1; flex: 0 0 auto; align-self: stretch; } .feature-card--split .feature-card__img { height: auto; } .feature-card--split .feature-card__caption { flex: 0 0 auto; align-self: stretch; max-width: none; padding: clamp(16px,5vw,26px) clamp(20px,6vw,30px) 0; } .feature-card--split .feature-card__caption strong { font-size: clamp(1.35rem,6vw,1.9rem); } } @keyframes labInRight { from { transform: translateX(70px); opacity: 0; } to { transform: none; opacity: 1; } } .feature-card--labyrinth .feature-card__handy { display: none; } @media (max-width: 640px) { .feature-card--labyrinth .feature-card__body > video, .feature-card--labyrinth .feature-card__still { display: none; } .feature-card--labyrinth .feature-card__body { width: auto; margin: -18px -8px 0; overflow: hidden; } .feature-card--labyrinth .feature-card__handy { display: block; position: static; width: 100%; height: auto; object-fit: contain; } .feature-card--labyrinth .feature-card__body.fly { animation: none; } } @media (prefers-reduced-motion: reduce) { .feature-card--labyrinth .feature-card__body.fly { animation: none; } } .features__controls { display: flex; justify-content: center; gap: 14px; margin-top: clamp(28px, 4vw, 48px); } .slider-arrow { display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(248, 248, 249, 0.1); color: #f8f8f9; cursor: pointer; transition: background 0.25s var(--ease), opacity 0.25s var(--ease); } .slider-arrow:hover { background: rgba(248, 248, 249, 0.18); } .slider-arrow:disabled { opacity: 0.35; cursor: default; } .slider-arrow svg { display: block; } @media (max-width: 760px) { .feature-card { flex: 0 0 84vw; height: min(68vh, 540px); padding: 18px 8px 14px; } .feature-card__caption { font-size: 1.1rem; max-width: 26ch; } .feature-card__body { margin-top: 10px; } } .cooling__media { aspect-ratio: 16 / 8; margin-block: clamp(28px, 4vw, 48px); } .coolsw { margin-top: clamp(28px, 4vw, 48px); } .coolsw__stage { position: relative; aspect-ratio: 16 / 8; border-radius: 2px; overflow: hidden; background: #0e0e10; } .coolsw__media { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s var(--ease); object-fit: cover; display: grid; place-items: center; background: repeating-linear-gradient(45deg, #1a1a1c 0 12px, #18181a 12px 24px); color: var(--text-dim); font-size: 0.9rem; letter-spacing: 0.04em; } .coolsw__media.is-active { opacity: 1; } .coolsw__tag { position: absolute; z-index: 3; top: clamp(16px, 2.6vw, 30px); left: clamp(16px, 2.6vw, 32px); color: var(--blue); font-weight: 800; font-size: clamp(1.1rem, 2.3vw, 1.8rem); line-height: 1.05; letter-spacing: -0.01em; text-shadow: 0 2px 18px rgba(0,0,0,0.55); pointer-events: none; } .coolsw__tabs { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 56px); margin-top: clamp(20px, 3vw, 34px); } .coolsw__tab { display: flex; flex-direction: column; gap: clamp(12px, 1.6vw, 18px); text-align: left; background: none; cursor: pointer; font: inherit; padding: clamp(16px, 2vw, 22px) 0 0; border: none; border-top: 2px solid rgba(255,255,255,0.16); color: var(--text-dim); transition: color 0.25s var(--ease), border-color 0.25s var(--ease), opacity 0.25s var(--ease); } .coolsw__tab.is-active { border-top-color: var(--blue); color: var(--text); } .coolsw__tab:not(.is-active) { opacity: 0.5; } .coolsw__tab:hover:not(.is-active) { opacity: 0.8; } .coolsw__name { font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -0.01em; color: inherit; } .coolsw__stats { display: flex; gap: clamp(18px, 3vw, 40px); flex-wrap: wrap; } .coolsw__stat { display: flex; flex-direction: column; gap: 2px; } .coolsw__stat b { font-size: clamp(1.15rem, 2vw, 1.55rem); font-weight: 800; color: inherit; line-height: 1; } .coolsw__stat small { font-size: 0.76rem; color: var(--text-dim); letter-spacing: 0.02em; } .coolsw__desc { font-size: clamp(0.9rem, 1.4vw, 1.02rem); line-height: 1.5; color: var(--text-dim); max-width: 46ch; } .coolsw__tab.is-active .coolsw__desc { color: var(--text); } @media (max-width: 720px) { .coolsw__stage { aspect-ratio: 9 / 16; max-width: 320px; margin-inline: auto; } .coolsw__tabs { grid-template-columns: 1fr 1fr; gap: 8px; margin-top: clamp(18px, 4vw, 26px); } .coolsw__tab { display: contents; } .coolsw__name { grid-row: 1; align-self: stretch; display: grid; place-items: center; text-align: center; padding: 10px 6px; border: 1px solid rgba(255,255,255,0.18); border-radius: 6px; font-size: 0.92rem; font-weight: 800; line-height: 1.15; color: var(--text-dim); } .coolsw__tab:nth-child(1) .coolsw__name { grid-column: 1; } .coolsw__tab:nth-child(2) .coolsw__name { grid-column: 2; } .coolsw__tab.is-active .coolsw__name { border-color: var(--blue); background: rgba(20,149,212,0.14); color: #f8f8f9; } .coolsw__stats, .coolsw__desc { grid-column: 1 / -1; } .coolsw__stats { margin-top: 10px; } .coolsw__tab:not(.is-active) .coolsw__stats, .coolsw__tab:not(.is-active) .coolsw__desc { display: none; } } .airgrille { overflow: hidden; } .airgrille__title { text-align: center; font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 800; letter-spacing: -0.01em; margin: 0 0 clamp(14px,2vw,20px); } .airgrille__lead { max-width: 70ch; margin: 0 auto; text-align: center; color: var(--text-dim); font-size: clamp(0.95rem,1.5vw,1.1rem); line-height: 1.6; } .airgrille__lead strong { color: var(--text); } .airgrille__cards { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px,3vw,40px); margin-top: clamp(30px,4vw,52px); } .grille-card { position: relative; text-align: center; background: rgba(255,255,255,0.03); border: 1px solid var(--line); border-radius: 2px; padding: clamp(20px,3vw,36px); } .grille-card--default { border-color: var(--blue); } .grille-card__badge { position: absolute; top: clamp(12px,2vw,18px); left: clamp(12px,2vw,18px); background: var(--blue); color: #fff; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: 4px; } .grille-card__img { display: block; width: 100%; max-width: 300px; aspect-ratio: 1 / 1; object-fit: contain; margin: 0 auto clamp(12px,2vw,18px); } .grille-card__name { font-size: clamp(1.2rem,2.2vw,1.6rem); font-weight: 800; margin: 0 0 0.4em; } .grille-card--default .grille-card__name { color: var(--blue); } .grille-card__desc { font-size: clamp(0.88rem,1.4vw,1rem); color: var(--text-dim); line-height: 1.5; max-width: 32ch; margin: 0 auto; } .airgrille__charts { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px,3vw,40px); margin-top: clamp(30px,4vw,52px); } .barchart { background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.012)); border: 1px solid var(--line); border-radius: 8px; padding: clamp(20px,2.6vw,32px) clamp(18px,2.5vw,30px) clamp(16px,2vw,24px); } .barchart__title { text-align: center; font-weight: 800; font-size: clamp(1.05rem,1.8vw,1.35rem); letter-spacing: -0.01em; margin-bottom: clamp(20px,2.8vw,32px); } .barchart__plot { display: flex; align-items: flex-end; justify-content: center; gap: clamp(30px,6vw,76px); height: clamp(180px,24vh,240px); border-bottom: 1px solid rgba(255,255,255,0.12); } .barchart__bar { width: clamp(56px,9vw,94px); height: var(--barh); border-radius: 7px 7px 0 0; background: linear-gradient(to top, rgba(20,149,212,0.16), rgba(20,149,212,0.42)); transform: scaleY(0); transform-origin: bottom; transition: transform 1s var(--ease); } .barchart__bar--hp { background: linear-gradient(to top, #0c5c88, var(--blue)); box-shadow: 0 0 28px rgba(20,149,212,0.5); } .airgrille__charts.is-visible .barchart__bar { transform: scaleY(1); } .barchart__plot .barchart__bar:nth-child(2) { transition-delay: 0.18s; } .barchart__labels { display: flex; justify-content: center; gap: clamp(30px,6vw,76px); margin-top: 14px; } .barchart__lbl { width: clamp(56px,9vw,94px); text-align: center; font-size: clamp(0.74rem,1.1vw,0.88rem); color: var(--text-dim); } @media (prefers-reduced-motion: reduce) { .barchart__bar { transform: none; transition: none; } } .airgrille__note { text-align: center; color: var(--text-dim); font-size: 0.8rem; margin-top: clamp(18px,2.5vw,26px); max-width: 74ch; margin-inline: auto; } @media (max-width: 760px) { .airgrille__cards, .airgrille__charts { grid-template-columns: 1fr; } } .featrows__head { text-align: center; max-width: 62ch; margin: 0 auto; } .featrows__title { font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 800; letter-spacing: -0.01em; margin: 0 0 clamp(12px,2vw,18px); } .featrows__intro { color: var(--text-dim); font-size: clamp(0.95rem,1.5vw,1.1rem); line-height: 1.6; margin: 0; } .featrows__rows { margin-top: clamp(44px,7vw,90px); } .featrow { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px,5vw,72px); align-items: center; } .featrow + .featrow { margin-top: clamp(48px,8vw,110px); } .featrow:nth-child(even) .featrow__media, .featrow:nth-child(even) .featrow__stage { order: -1; } .featrow__title { font-size: clamp(1.4rem,2.6vw,2rem); font-weight: 800; letter-spacing: -0.01em; margin: 0 0 clamp(10px,1.5vw,16px); } .featrow__text p { color: var(--text-dim); font-size: clamp(0.92rem,1.4vw,1.05rem); line-height: 1.6; margin: 0; max-width: 48ch; } .featrow__text p strong, .coolsw__desc strong { color: var(--text); font-weight: 700; } .featrow__media { border-radius: 2px; overflow: hidden; aspect-ratio: 4 / 3; margin: 0; } .featrow__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .featrow__badge { display: inline-block; background: var(--blue); color: #fff; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 4px 10px; border-radius: 4px; margin-bottom: clamp(10px,1.5vw,14px); } .featrow__badge--opt { background: transparent; color: var(--text-dim); border: 1px solid var(--line); } .featrow__stage { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; margin: 0; } .featrow__stage::before { content: ""; position: absolute; width: 66%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(20,149,212,0.20), rgba(20,149,212,0) 68%); } .grille-float { position: relative; z-index: 1; width: min(82%, 360px); opacity: 0; transition: opacity 1.8s var(--ease), transform 1.8s var(--ease); } .grille-float img.grille-spin { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: contain; filter: drop-shadow(0 22px 44px rgba(0,0,0,0.5)); } .featrow[data-reveal] { opacity: 1; transform: none; } .featrow .featrow__text { opacity: 0; transform: translateY(16px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } .featrow.is-visible .featrow__text { opacity: 1; transform: none; } .featrow:nth-child(odd) .grille-float { transform: translateX(60vw); } .featrow:nth-child(even) .grille-float { transform: translateX(-60vw); } .featrow.is-visible .grille-float { opacity: 1; transform: translateX(0); } @media (prefers-reduced-motion: reduce) { .grille-float, .featrow .featrow__text { transition: none; transform: none; opacity: 1; } } @media (max-width: 760px) { .featrow { grid-template-columns: 1fr; gap: clamp(16px,4vw,24px); } .featrow .featrow__media, .featrow .featrow__stage { order: -1; } } .section.design { background: #000; } .design__media--full { display: block; width: 100%; max-width: clamp(760px, 82vw, 1500px); aspect-ratio: 1.70 / 1; height: auto; object-fit: cover; object-position: left center; margin-inline: auto; margin-block: clamp(24px, 4vw, 56px); background: #000; } @media (max-width: 720px) { .design__media--full { max-width: none; width: 100%; aspect-ratio: 1 / 1; height: auto; object-fit: cover; object-position: 44% center; margin-block: clamp(16px, 4vw, 28px); } } .design__title { font-size: clamp(2rem, 5.2vw, 3.4rem); margin-bottom: 0.7em; } .section__text--lead { max-width: none; font-size: 25px; line-height: 2; letter-spacing: 0.01em; color: var(--text-dim); } .section__text--lead strong { color: var(--text); } .motor__media { aspect-ratio: 16 / 7; margin-block: clamp(28px, 4vw, 48px); } .section.motor { background: #000; } .motor__media--full { display: block; width: 100%; aspect-ratio: 16 / 7.4; object-fit: cover; object-position: 65% 42%; margin-top: clamp(20px, 3vw, 44px); background: #000; } .wtc__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 26px); margin-top: clamp(34px, 5vw, 62px); } .wtc__card { display: flex; flex-direction: column; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); border-radius: 2px; overflow: hidden; transition: transform 0.28s var(--ease), border-color 0.28s var(--ease), background 0.28s var(--ease); } .wtc__card:hover { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.24); background: rgba(255, 255, 255, 0.05); } .wtc__media { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; background: #0e0e10; } img.wtc__media { object-fit: cover; display: block; } .wtc__card:hover img.wtc__media { transform: scale(1.03); } img.wtc__media { transition: transform 0.4s var(--ease); } .wtc__body { display: flex; flex-direction: column; gap: clamp(7px, 1vw, 11px); padding: clamp(20px, 2.4vw, 30px); } .wtc__abbr { font-family: "Elemental End", "Mulish", sans-serif; font-weight: 400; font-size: clamp(1.7rem, 3vw, 2.3rem); letter-spacing: 0.06em; color: var(--blue); line-height: 1; } .wtc__name { font-size: clamp(1.05rem, 1.6vw, 1.3rem); font-weight: 800; margin: 0; color: var(--text); } .wtc__desc { color: var(--text-dim); font-size: clamp(0.95rem, 1.3vw, 1.02rem); line-height: 1.55; margin: 0; } .wtc__level { display: flex; align-items: center; gap: 8px; margin-top: clamp(6px, 1vw, 12px); } .wtc__dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); } .wtc__dot.is-on { background: var(--blue); } .wtc__level em { font-style: normal; margin-left: 4px; font-size: 0.76rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-dim); } @media (max-width: 860px) { .wtc__grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } } .bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(12px, 1.4vw, 18px); max-width: 1120px; margin: clamp(30px, 4vw, 52px) auto 0; } .bento__card { position: relative; grid-column: span 6; min-height: clamp(230px, 24vw, 330px); border: 1px solid var(--line); border-radius: 2px; overflow: hidden; background: var(--bg-alt); } .bento__card--wide { grid-column: span 7; } .bento__card--narrow { grid-column: span 5; } .bento__card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 48%; background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0)); z-index: 1; pointer-events: none; } .bento__title { position: relative; z-index: 2; margin: 0; text-align: center; padding: clamp(18px, 2.4vw, 28px) clamp(16px, 2vw, 24px) 0; font-size: clamp(1.05rem, 1.55vw, 1.3rem); font-weight: 800; line-height: 1.28; color: #f8f8f9; } .bento__title sup { font-size: .62em; font-weight: 700; opacity: .7; } .bento__media { position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-dim); font-weight: 700; font-size: .9rem; letter-spacing: .02em; } .bento__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .bento__card--full { grid-column: span 12; min-height: clamp(200px, 22vw, 270px); } .bento__card--stat { background: radial-gradient(120% 140% at 50% 0%, rgba(20,149,212,.10), transparent 60%), var(--bg-alt); } .bento__stat { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; padding: 52px 20px 22px; } .bento__stat-big { font-family: "Mulish", sans-serif; font-weight: 800; letter-spacing: -.01em; font-size: clamp(3.2rem, 10vw, 6.4rem); line-height: 1; background: linear-gradient(180deg, #5cc2ef 0%, var(--blue) 55%, #0e6f9e 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .bento__stat-big b { font-weight: 800; } .bento__stat-pre { font-size: .28em; font-weight: 700; letter-spacing: .02em; vertical-align: middle; margin-right: .3em; color: var(--text-dim); -webkit-text-fill-color: var(--text-dim); } .bento__stat-sub { color: var(--text-dim); font-size: clamp(1.05rem, 2.4vw, 1.5rem); } .bento__stat-sub strong { color: #f8f8f9; font-weight: 800; } @media (max-width: 720px) { .bento { grid-template-columns: 1fr; gap: 12px; } .bento__card, .bento__card--wide, .bento__card--narrow, .bento__card--full { grid-column: auto; min-height: 210px; } } .motor__intro { max-width: var(--container); margin-inline: auto; padding-inline: 24px; text-align: center; } .motor__intro .section__heading { max-width: 700px; margin-inline: auto; font-size: clamp(2rem, 5.2vw, 3.4rem); margin-bottom: 0.7em; } .motor__text { max-width: none; margin: 1.4em auto 0; font-size: 25px; line-height: 2; letter-spacing: 0.01em; color: var(--text-dim); } .motor__text strong { color: var(--text); } @media (max-width: 720px) { .motor__text { line-height: 1.9; } .motor__media--full { width: 100%; margin-left: 0; aspect-ratio: 4 / 3; } } img.design__media, video.design__media, img.cooling__media, video.cooling__media, img.motor__media { width: 100%; height: 100%; object-fit: contain; background: #000; } .pill-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 8px; padding: 11px 20px; border: 1px solid var(--line); border-radius: 2px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text); transition: border-color 0.25s var(--ease), background 0.25s var(--ease); } .pill-link:hover { border-color: var(--orange); background: rgba(255,90,31,0.08); } .pill-link__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--text-dim); } .pill-link__dot--orange { background: var(--orange); } .design .pill-link, .cooling .pill-link { display: flex; width: max-content; margin-inline: auto; } .reveal-btn { display: inline-flex; align-items: center; gap: 12px; margin: clamp(20px, 3vw, 36px) auto 0; padding: 0; background: none; border: 0; cursor: pointer; color: var(--text); font: inherit; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; transition: color 0.2s var(--ease); } .reveal-btn:hover { color: #f8f8f9; } .plus-badge { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--blue); flex: 0 0 auto; transition: transform 0.25s var(--ease); } .plus-badge::before { content: ""; position: absolute; inset: 2px; border-radius: 50%; background: #0a0a0b; } .plus-badge svg { position: relative; z-index: 1; } .reveal-btn:hover .plus-badge { transform: scale(1.08); } .overlay { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: clamp(16px, 4vw, 48px); } .overlay[hidden] { display: none; } .overlay__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.35s var(--ease); } .overlay__panel { position: relative; width: min(960px, 100%); max-height: 90vh; overflow-y: auto; background: #0d0d0f; border: 1px solid var(--line); border-radius: 2px; padding: clamp(20px, 3vw, 38px); opacity: 0; transform: scale(0.94) translateY(12px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); } .overlay.is-open .overlay__backdrop { opacity: 1; } .overlay.is-open .overlay__panel { opacity: 1; transform: none; } .overlay__close { position: absolute; top: 18px; right: 18px; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(248, 248, 249, 0.1); color: #f8f8f9; cursor: pointer; transition: background 0.2s var(--ease); } .overlay__close:hover { background: rgba(248, 248, 249, 0.2); } .overlay__title { font-family: "Mulish", sans-serif; font-weight: 900; font-size: clamp(1.6rem, 3.5vw, 2.4rem); line-height: 1.1; margin: 0 0 clamp(12px, 2vw, 18px); } .overlay__media { aspect-ratio: 16 / 9; margin-bottom: clamp(20px, 3vw, 32px); } video.overlay__media { aspect-ratio: auto; width: 100%; height: auto; max-height: calc(90vh - 320px); object-fit: contain; border-radius: 2px; background: #000; } .overlay__text { color: var(--text-dim); font-size: 1rem; line-height: 1.7; max-width: 640px; margin: 0; } @media (max-width: 760px) { #overlay-gehaeuse-fertigung { padding: 0; } #overlay-gehaeuse-fertigung .overlay__panel { width: 100%; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; padding: 44px 12px 16px; } #overlay-gehaeuse-fertigung .overlay__title { font-size: 1.2rem; margin-bottom: 10px; } #overlay-gehaeuse-fertigung .overlay__media { max-height: 64vh; } #overlay-gehaeuse-fertigung .overlay__text { font-size: 0.95rem; } } .overlay__content--video { display: grid; place-items: center; } #overlay-more-than-motor video.overlay__media { max-height: 80vh; margin: 0; } @media (max-width: 760px) { #overlay-more-than-motor { padding: 0; } #overlay-more-than-motor .overlay__panel { width: 100%; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; padding: 0; background: #000; display: grid; place-items: center; overflow: hidden; } #overlay-more-than-motor .overlay__close { z-index: 3; } #overlay-more-than-motor video.overlay__media { width: 100%; height: 100dvh; max-height: 100dvh; object-fit: contain; } } .varswitch { max-width: 760px; margin-inline: auto; } .varswitch__nav { display: flex; justify-content: center; gap: 12px; margin-bottom: 10px; } .varswitch__arrow { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(248, 248, 249, 0.1); color: #f8f8f9; cursor: pointer; transition: background 0.2s var(--ease); } .varswitch__arrow:hover { background: rgba(248, 248, 249, 0.2); } .varswitch__chart { background: linear-gradient(165deg, #191921, #0f0f14); border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 2px; padding: 12px 12px 8px; } .varswitch__stage { position: relative; aspect-ratio: 900 / 470; overflow: hidden; } .varswitch__legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px 26px; padding: 8px 6px 2px; } .legitem { display: inline-flex; align-items: center; gap: 9px; font-family: "Mulish", sans-serif; font-size: 0.9rem; color: rgba(255, 255, 255, 0.72); } .legline { display: inline-block; width: 34px; height: 0; } .legline--power { border-top: 3px solid #eceef2; } .legline--torque { border-top: 3px solid #2ba8e6; } .legline--sensor { border-top: 3px dashed #2ba8e6; } .varslide { position: absolute; inset: 0; margin: 0; display: grid; place-items: center; opacity: 0; transition: opacity 0.35s var(--ease); pointer-events: none; } .varslide.is-active { opacity: 1; pointer-events: auto; } .varslide img { width: 100%; height: 100%; object-fit: contain; padding: 10px; } .varslide svg.varchart { width: 100%; height: 100%; display: block; } .varchart .mc-line { stroke-dasharray: 100; } .varchart.is-drawing .mc-line { animation: mcDraw 1.2s var(--ease) both; } .varchart.is-drawing .mc-fill, .varchart.is-drawing .mc-lead { animation: mcFade 0.7s ease both; } .varchart.is-drawing .mc-dot { animation: mcFade 0.4s ease 1.05s both; } @keyframes mcDraw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } } @keyframes mcFade { from { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .varchart.is-drawing .mc-line, .varchart.is-drawing .mc-fill, .varchart.is-drawing .mc-lead, .varchart.is-drawing .mc-dot { animation: none; } } .varslide img.is-drawing { animation: kennlinieDraw 1s var(--ease) forwards; } @keyframes kennlinieDraw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } @media (prefers-reduced-motion: reduce) { .varslide img.is-drawing { animation: none; } } .varslide--empty span { font-family: "Mulish", sans-serif; font-size: 0.95rem; color: #9a9a9e; letter-spacing: 0.02em; } .varswitch__caption { text-align: center; margin: 10px 0 0; font-size: 1rem; font-weight: 700; color: #f8f8f9; } .varswitch__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 12px; padding-bottom: 4px; } .vartab { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1 1 0; min-width: 94px; padding: 12px 10px; border: 0; border-radius: 2px; background: transparent; color: var(--text-dim); cursor: pointer; font-family: "Mulish", sans-serif; font-size: 0.86rem; font-weight: 600; transition: background 0.2s var(--ease), color 0.2s var(--ease); } .vartab:hover { color: #f8f8f9; } .vartab.is-active { background: rgba(248, 248, 249, 0.12); color: #f8f8f9; } .vartab.is-active .vartab__icon { color: var(--blue); } .vartab__icon { display: grid; place-items: center; width: 24px; height: 24px; } .vartab__icon svg { display: block; } .vartab__power { font-size: 0.98rem; font-weight: 800; line-height: 1.2; } .vartab__volt { font-size: 0.8rem; font-weight: 600; opacity: 0.95; line-height: 1.2; } .vartab__label { font-size: 0.82rem; font-weight: 600; opacity: 0.8; line-height: 1.2; } .vartab__type { margin-top: 5px; padding: 2px 9px; border-radius: 2px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; background: rgba(248, 248, 249, 0.1); color: var(--text-dim); } .vartab__type--sync { background: rgba(255, 90, 31, 0.18); color: var(--orange); } @media (max-width: 760px) { #overlay-motorvarianten { padding: 0; } #overlay-motorvarianten .overlay__panel { width: 100%; height: 100dvh; max-height: 100dvh; border: 0; border-radius: 0; padding: 46px 8px 14px; } #overlay-motorvarianten .overlay__title { font-size: 1.25rem; margin-bottom: 8px; } .varswitch { max-width: none; } .varswitch__nav { display: none; } .varchart text { font-size: 24px; } .varswitch__caption { font-size: 0.95rem; margin-top: 8px; } .varswitch__legend { gap: 6px 16px; padding: 8px 4px 2px; } .legitem { font-size: 0.8rem; gap: 7px; } .legline { width: 26px; } .varswitch__tabs { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 10px; gap: 5px; } .vartab { min-width: 0; padding: 8px 4px; gap: 2px; } .vartab__volt, .vartab__type { display: none; } .vartab__power { font-size: 0.92rem; } .vartab__label { font-size: 0.78rem; } } .stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: clamp(56px, 8vw, 96px) 0 clamp(36px, 5vw, 56px); text-align: center; } .stat__value { font-family: "Mulish", sans-serif; font-size: clamp(0.78rem, 1.4vw, 0.92rem); color: var(--text-dim); margin: 0 0 6px; } .stat__value strong { display: inline-block; font-family: "Mulish", sans-serif; font-size: clamp(1.55rem, 3vw, 2.05rem); font-weight: 800; color: var(--blue); margin-top: 6px; white-space: nowrap; } .stat__label { font-family: "Mulish", sans-serif; font-size: clamp(0.9rem, 1.4vw, 1.02rem); color: #f8f8f9; letter-spacing: 0; margin: 0; } .site-footer { background: #0d0d0f; color: #f8f8f9; border-top: 1px solid #2a2a2d; padding: clamp(48px, 7vw, 88px) 0 28px; font-size: 0.92rem; } .footer__inner { display: flex; flex-direction: column; gap: clamp(36px, 5vw, 56px); } .footer__top { display: flex; justify-content: space-between; gap: clamp(32px, 5vw, 64px); flex-wrap: wrap; padding-bottom: clamp(28px, 4vw, 44px); border-bottom: 1px solid #2a2a2d; } .footer__brand { max-width: 380px; } .footer__logo { height: 30px; width: auto; margin-bottom: 18px; } .footer__tagline { color: #9a9a9e; line-height: 1.6; margin: 0 0 22px; } .footer__social { display: flex; gap: 12px; } .footer__social a { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #2a2a2d; border-radius: 50%; color: #f8f8f9; transition: background 0.2s var(--ease), border-color 0.2s var(--ease), color 0.2s var(--ease); } .footer__social a:hover { background: var(--blue); border-color: var(--blue); color: #f8f8f9; } .footer__newsletter { max-width: 380px; flex: 1 1 300px; } .footer__newsletter h4, .footer__newsletter .footer__h { font-size: 1.15rem; margin: 0 0 6px; color: #f8f8f9; } .footer__newsletter p { color: #9a9a9e; margin: 0 0 16px; } .footer__news-row { display: flex; flex-wrap: wrap; gap: 8px; } .footer__news-row .cf-turnstile { flex-basis: 100%; } .footer__news-row input { flex: 1; min-width: 0; padding: 13px 14px; background: #161617; border: 1px solid #2a2a2d; border-radius: 2px; color: #f8f8f9; font: inherit; font-size: 0.92rem; } .footer__news-row input::placeholder { color: #7a7a7e; } .footer__news-row input:focus { outline: none; border-color: var(--blue); } .footer__news-row button { padding: 13px 20px; border: 0; border-radius: 2px; background: var(--blue); color: #f8f8f9; font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap; transition: filter 0.2s var(--ease); } .footer__news-row button:hover { filter: brightness(0.92); } .footer__hp { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .footer__news-msg { margin: 12px 0 0; font-size: 0.85rem; color: #f8f8f9; } .footer__news-msg[hidden] { display: none; } .footer__cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 3vw, 40px); } .footer__col h4, .footer__col .footer__h { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; color: #f8f8f9; margin: 0 0 16px; } .footer__h { font-weight: 700; } .footer__col a { display: block; color: #9a9a9e; padding: 5px 0; transition: color 0.2s var(--ease); } .footer__col a:hover { color: #f8f8f9; } .footer__col address { font-style: normal; color: #7a7a7e; font-size: 0.88rem; line-height: 1.6; margin-top: 6px; } .footer__col address a { display: inline; color: #9a9a9e; padding: 0; } .footer__col address a:hover { color: #f8f8f9; } .footer__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 24px; padding-top: clamp(20px, 3vw, 28px); border-top: 1px solid #2a2a2d; color: #7a7a7e; font-size: 0.85rem; } .footer__legal { display: flex; flex-wrap: wrap; gap: 22px; } .footer__legal a { color: #9a9a9e; } .footer__legal a:hover { color: #f8f8f9; } @media (max-width: 820px) { .footer__cols { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 460px) { .footer__cols { grid-template-columns: 1fr; } .footer__news-row { flex-direction: column; } } [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); } [data-reveal].is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } } @media (max-width: 820px) { .nav-toggle { display: flex; } .header__inner { grid-template-columns: 1fr auto; } .nav { display: none; } .lang__menu { display: none !important; } .mmenu { display: block; position: fixed; inset: 0; z-index: 200; background: var(--bg-header); transform: translateX(100%); transition: transform 0.3s var(--ease); overflow: hidden; } .mmenu.is-open { transform: translateX(0); } body.mmenu-open .site-header { display: none !important; } .mmenu__close { position: absolute; top: 12px; right: 14px; z-index: 6; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; color: var(--text); cursor: pointer; } .mmenu__close svg { width: 26px; height: 26px; } .mmenu__screen { position: absolute; inset: 0; padding-top: 60px; overflow-y: auto; background: var(--bg-header); transform: translateX(100%); transition: transform 0.3s var(--ease); } .mmenu__screen--main { transform: translateX(0); display: flex; flex-direction: column; } .mmenu__screen.is-active { transform: translateX(0); } body.mmenu-open { overflow: hidden; } @keyframes mmenuItemIn { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } } .mmenu.is-open .mmenu__screen--main .mmenu__list > li { animation: mmenuItemIn 0.42s var(--ease) both; } .mmenu.is-open .mmenu__screen--main .mmenu__list > li:nth-child(1) { animation-delay: 0.10s; } .mmenu.is-open .mmenu__screen--main .mmenu__list > li:nth-child(2) { animation-delay: 0.16s; } .mmenu.is-open .mmenu__screen--main .mmenu__list > li:nth-child(3) { animation-delay: 0.22s; } .mmenu.is-open .mmenu__screen--main .mmenu__list > li:nth-child(4) { animation-delay: 0.28s; } .mmenu.is-open .mmenu__screen--main .mmenu__list > li:nth-child(5) { animation-delay: 0.34s; } .mmenu.is-open .mmenu__screen--main .mmenu__list > li:nth-child(6) { animation-delay: 0.40s; } .mmenu.is-open .mmenu__screen--main .mmenu__list > li:nth-child(7) { animation-delay: 0.46s; } .mmenu.is-open .mmenu__screen--main .mmenu__list > li:nth-child(8) { animation-delay: 0.52s; } @media (prefers-reduced-motion: reduce) { .mmenu.is-open .mmenu__screen--main .mmenu__list > li { animation: none; } } .nav__list { flex-direction: column; gap: 0; padding: 12px 0; } .nav__list > li { width: 100%; } .nav__list > li > a { display: block; height: auto; padding: 14px 24px; } .header__actions .lang { display: none; } .nav__submenu { position: static; transform: none; opacity: 1; visibility: visible; border: 0; background: transparent; padding: 0 0 8px 24px; } .nav__mega { position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none; border: 0; border-radius: 2px; background: transparent; padding: 0 0 8px 24px; } .nav__mega-inner { flex-direction: column; align-items: flex-start; padding: 0; gap: 10px; } .nav__mega-inner--split { gap: 16px; } .mega-quicklinks { border-left: 0; padding-left: 0; } .mega-overview { font-size: 0.95rem; } .mega-models { flex-direction: column; gap: 4px; width: 100%; } .mega-model { flex-direction: row; width: auto; padding: 8px 0; gap: 12px; text-align: left; } .mega-model__media { flex: 0 0 auto; width: 70px; height: 50px; } .mega-model__media img { padding: 4px; } .mega-model__name { font-size: 1.1rem; } .mega-model__cta { display: none; } .stats { grid-template-columns: 1fr; } } .hero--page { padding-block: clamp(48px, 8vw, 96px); } .page-title { font-family: "Mulish", sans-serif; font-weight: 900; font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1.05; letter-spacing: -0.01em; text-align: center; margin: 0; } .spindeln__anim { aspect-ratio: 16 / 7; border-radius: var(--radius); } .series { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2.5vw, 28px); } .series-card { display: flex; flex-direction: column; align-items: center; gap: clamp(18px, 2.5vw, 28px); background: var(--bg-dark); border: 1px solid var(--line); border-radius: 2px; padding: clamp(28px, 4vw, 48px); text-align: center; transition: border-color 0.25s var(--ease); } .series-card:hover { border-color: #3a3a3e; } .series-card__title { font-family: "Elemental End", "Mulish", sans-serif; font-weight: 400; font-size: clamp(2rem, 5vw, 3rem); letter-spacing: 0.04em; margin: 0; } .series-card__media { width: 100%; aspect-ratio: 4 / 3; border-radius: 2px; } img.series-card__media { object-fit: contain; background: #000; } .series-card--photo { background: transparent; border: 0; padding: 0; gap: clamp(16px, 2.2vw, 26px); overflow: visible; justify-content: flex-start; } .series-card--photo .series-card__media { position: static; width: 100%; aspect-ratio: 3 / 4; height: auto; object-fit: cover; object-position: center; padding: clamp(22px, 4.5vw, 48px) 0; margin: 0; border-radius: 2px; display: block; background: #0a0a0b; transition: transform 0.3s var(--ease); } .series-card--photo:hover .series-card__media { transform: translateY(-4px); } .series-card--photo .series-card__foot { position: static; display: flex; flex-direction: column; align-items: center; gap: clamp(9px, 1.3vw, 15px); padding: 0; width: 100%; background: none; text-align: center; } .series-card--photo .series-card__title { color: var(--text); margin: 0; } .series-card__actions { display: flex; align-items: center; justify-content: center; gap: clamp(14px, 2.4vw, 24px); flex-wrap: wrap; margin-top: clamp(6px, 1.2vw, 12px); } .series-card__actions .pill-link { margin-top: 0; } .series-card__link { color: var(--blue); font-weight: 700; font-size: 0.98rem; text-decoration: none; white-space: nowrap; transition: opacity 0.2s var(--ease); } .series-card__link:hover { text-decoration: underline; } .finder { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; background: var(--bg-alt); border: 1px solid var(--line); border-radius: 2px; overflow: hidden; min-height: clamp(220px, 24vw, 300px); } .finder__text { padding: clamp(28px, 4vw, 52px); align-self: center; } .finder__title { font-family: "Mulish", sans-serif; font-weight: 800; font-size: clamp(1.4rem, 3vw, 2rem); margin: 0 0 0.5em; } .finder__text p { color: var(--text-dim); font-size: 1rem; line-height: 1.6; max-width: 46ch; margin: 0 0 1.5em; } .finder__media { position: relative; border-left: 1px solid var(--line); } .finder__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } @media (max-width: 720px) { .series { grid-template-columns: 1fr; } .finder { grid-template-columns: 1fr; min-height: 0; text-align: center; } .finder__text p { margin-inline: auto; } .finder__media { border-left: 0; border-top: 1px solid var(--line); aspect-ratio: 16 / 9; } } .theme-light { --bg: #f8f8f9; --bg-alt: #f1f1f3; --bg-dark: #ffffff; --bg-header: #f8f8f9; --text: #16161a; --text-dim: #5a5a60; --line: #e3e3e7; } .theme-light .site-header { background: rgba(248, 248, 249, 0.85); } .theme-light .site-header.is-scrolled { border-bottom-color: var(--line); } .theme-light .media-placeholder { background: repeating-linear-gradient(45deg, #ececef 0 12px, #f4f4f6 12px 24px); color: #8a8a90; } .theme-light .section__text--lead { color: #16161a; } .finder-q { border: 0; margin: 0 0 clamp(40px, 6vw, 72px); padding: 0; } .finder-q__head { display: block; width: 100%; padding: 0; font-family: "Mulish", sans-serif; font-weight: 800; font-size: clamp(1.3rem, 2.6vw, 1.8rem); text-align: center; margin: 0 0 0.3em; } .finder-q__hint { text-align: center; color: var(--text-dim); font-size: 0.95rem; margin: 0 0 clamp(20px, 3vw, 32px); } .choice-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 22px); } .choice-card { display: grid; grid-template-rows: auto 1fr auto; gap: 14px; justify-items: center; background: var(--bg-dark); border: 1px solid var(--line); border-radius: 2px; padding: clamp(16px, 1.8vw, 22px); text-align: center; cursor: pointer; box-shadow: 0 10px 30px rgba(20,24,40,.06); transition: border-color .22s var(--ease), box-shadow .22s var(--ease), transform .22s var(--ease); } .choice-card:hover { border-color: #c3c3cb; transform: translateY(-3px); box-shadow: 0 16px 40px rgba(20,24,40,.12); } .choice-card:has(input:checked) { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue), 0 14px 36px rgba(20,149,212,.16); } .choice-card__media { width: 100%; aspect-ratio: 16 / 10; border-radius: 2px; } img.choice-card__media { display: block; width: 100%; object-fit: cover; } img.finder-q__media { display: block; width: 100%; height: 100%; object-fit: cover; } img.finder-q__media--contain { object-fit: contain; height: auto; background: #ffffff; } .choice-card__text { font-size: 0.9rem; color: var(--text); } .choice-card input { accent-color: var(--blue); width: 18px; height: 18px; flex: 0 0 18px; cursor: pointer; } .finder-q__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 3vw, 28px); align-items: stretch; max-width: 820px; margin-inline: auto; background: var(--bg-dark); border: 1px solid var(--line); border-radius: 2px; padding: clamp(16px, 2.2vw, 24px); box-shadow: 0 10px 30px rgba(20,24,40,.06); } .finder-q__media { aspect-ratio: 4 / 3; border-radius: 2px; } .choice-list { display: flex; flex-direction: column; justify-content: center; gap: 14px; } .choice { display: flex; align-items: center; gap: 11px; font-size: 1rem; color: var(--text); cursor: pointer; padding: 11px 14px; border: 1px solid var(--line); border-radius: 2px; transition: background .18s var(--ease), border-color .18s var(--ease); } .choice:hover { background: rgba(0,0,0,.035); border-color: #c3c3cb; } .choice:has(input:checked) { background: rgba(20,149,212,.10); border-color: var(--blue); } .choice input { accent-color: var(--blue); width: 18px; height: 18px; flex: 0 0 18px; align-self: start; margin-top: 1px; cursor: pointer; } .finder-page .hero--page { padding-bottom: clamp(16px, 3vw, 36px); } .finder-page .section { padding-top: clamp(36px, 5vw, 64px); } .finder-error { text-align: center; color: #c0392b; font-weight: 700; margin: 0 0 16px; } .finder-q.is-missing .finder-q__head { color: #c0392b; } .finder-q.is-missing .finder-q__row, .finder-q.is-missing .choice-cards { outline: 2px solid #e2a3a3; outline-offset: 8px; border-radius: 2px; } .finder-submit { display: flex; justify-content: center; margin-top: clamp(8px, 2vw, 20px); } .finder-btn { display: inline-flex; align-items: center; padding: 14px 30px; border: 1px solid var(--line); border-radius: 2px; background: transparent; color: var(--text); font: inherit; font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; cursor: pointer; transition: border-color 0.25s var(--ease), background 0.25s var(--ease); } .finder-btn:hover { border-color: var(--blue); background: rgba(20, 149, 212, 0.08); } .finder-btn--primary { background: var(--blue); border-color: var(--blue); color: #f8f8f9; } .finder-btn--primary:hover { filter: brightness(0.92); } .finder-advice { text-align: center; } .finder-advice__text { color: var(--text-dim); font-size: 1.05rem; line-height: 1.6; max-width: 560px; margin: 0 auto clamp(20px, 3vw, 32px); } .finder-result { margin-top: clamp(48px, 7vw, 90px); text-align: center; } .finder-result__title { font-family: "Mulish", sans-serif; font-weight: 800; font-size: clamp(1.4rem, 3vw, 2rem); margin: 0 0 clamp(24px, 4vw, 40px); } .finder-result__card { max-width: 820px; margin-inline: auto; display: grid; grid-template-columns: clamp(230px, 42%, 340px) 1fr; align-items: center; gap: clamp(24px, 4vw, 48px); background: #fbfbfc; border: 1px solid #ececf0; border-radius: 2px; padding: clamp(20px, 3vw, 40px); box-shadow: 0 16px 44px rgba(20,24,40,.10); text-align: left; } .finder-result__media { width: 100%; aspect-ratio: 3 / 4; border-radius: 2px; overflow: hidden; background: #0a0a0b; display: block; } .finder-result__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; padding: clamp(22px, 4.5vw, 48px) 0; display: block; } .finder-result__media--wide { aspect-ratio: 3 / 4; } .finder-result__media--wide img { object-fit: cover; padding: 0; transform: scale(1.18); } .spec-note { margin-top: clamp(20px, 3vw, 32px); } .center--mt { margin-top: clamp(36px, 5vw, 64px); } .cf-turnstile { margin: 4px 0; } .hero--x30hero .hero__bg { object-fit: cover; } .ibn-intro, .ibn-doc { margin-inline: auto; } .atile__sub--x30 { max-width: 46ch; text-wrap: balance; } .atile__img--x30 { object-position: center center; } .appslide__img--zoom { transform: scale(1.12); transform-origin: top center; } .kactions .pill-link, .ksave__row .pill-link { display: inline-flex; } .ksave .kbody__eyebrow { display: block; margin-bottom: 6px; } .ksave .cf-turnstile { margin: 10px 0 0; } #spin3dViewer { width: 100%; height: min(66vh, 600px); background: transparent; } .hotspot--1 { top: 50%; left: 46%; } .hotspot--2 { top: 34%; left: 46%; } .hotspot--3 { top: 89%; left: 46%; } .hotspot--4 { top: 20%; left: 46%; } .hs-label--1 { left: -6%; top: 32%; } .hs-label--2 { left: -6%; top: 34%; } .hs-label--3 { left: 24%; top: 99%; } .hs-label--4 { left: -6%; top: 20%; } .mt-xs { margin-top: clamp(12px, 1.8vw, 22px); } .mt-sm { margin-top: clamp(20px, 3vw, 32px); } .mt-btn { margin-top: clamp(20px, 3vw, 28px); } .mt-md2 { margin-top: clamp(22px, 3vw, 34px); } .mt-lg { margin-top: clamp(52px, 8vw, 96px); } .mt-teaser { margin-top: clamp(20px, 2.6vw, 38px); } .pt-0 { padding-top: 0; } .pb-teaser { padding-bottom: clamp(6px, 1.5vw, 18px); } .finder-result__info { display: flex; flex-direction: column; align-items: flex-start; gap: clamp(9px, 1.3vw, 15px); width: 100%; } .finder-result__name { font-family: "Elemental End", "Mulish", sans-serif; font-weight: 400; font-size: clamp(2rem, 5vw, 3rem); letter-spacing: 0.04em; margin: 0; color: var(--text); } .finder-result__info p { color: var(--text-dim); margin: 0; font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.5; max-width: 32ch; } .finder-result__specs { list-style: none; margin: clamp(10px, 1.6vw, 16px) 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; color: var(--text-dim); font-size: clamp(.95rem, 1.3vw, 1.05rem); line-height: 1.4; } .finder-result__specs li { display: flex; gap: .5ch; flex-wrap: wrap; } .finder-result__specs b { color: var(--text); font-weight: 600; } .finder-result__actions { display: flex; align-items: center; justify-content: flex-start; gap: clamp(14px, 2.4vw, 24px); flex-wrap: wrap; margin-top: clamp(6px, 1.2vw, 12px); } .finder-result__actions .pill-link { margin-top: 0; } .finder-result__link { color: var(--blue); font-weight: 700; font-size: 0.98rem; text-decoration: none; white-space: nowrap; } .finder-result__link:hover { text-decoration: underline; } @media (max-width: 540px) { .finder-result__card { grid-template-columns: 1fr; justify-items: center; text-align: center; } .finder-result__media { max-width: 260px; } .finder-result__info { align-items: center; } .finder-result__actions { justify-content: center; } } @media (max-width: 720px) { .choice-cards { grid-template-columns: 1fr; } .finder-q__row { grid-template-columns: 1fr; } } .finder-page .choice-card, .finder-page .choice-card__media, .finder-page .finder-q__row, .finder-page .finder-q__media, .finder-page .finder-btn, .finder-page .finder-result__card, .finder-page .finder-result__media, .finder-page .finder-result__media img, .finder-page .media-placeholder, .finder-page .pill-link { border-radius: 2px; } .overview-page .series-card, .overview-page .series-card__media, .overview-page .finder, .overview-page .pill-link, .overview-page .spindeln__anim, .overview-page .media-placeholder, .overview-page .finder__imgs img, .overview-page .finder__imgph { border-radius: 2px; } .overview-page .series { grid-template-columns: repeat(2, minmax(0, 330px)); justify-content: center; gap: clamp(30px, 5vw, 64px); } @media (max-width: 720px) { .overview-page .series { grid-template-columns: minmax(0, 340px); } } .cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 2000; background: #1d1d1f; border-top: 1px solid #2a2a2d; color: #e8e8ea; box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.3); } .cookie[hidden] { display: none; } .cookie__inner { max-width: var(--container); margin-inline: auto; padding: 18px 24px; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; } .cookie__text { flex: 1 1 320px; } .cookie__text strong { display: block; font-size: 1rem; margin-bottom: 4px; color: #f8f8f9; } .cookie__text p { margin: 0; font-size: 0.88rem; color: #b9b9be; line-height: 1.5; } .cookie__text a { color: var(--blue); } .cookie__actions { display: flex; gap: 10px; flex-wrap: wrap; } .cookie__btn { padding: 11px 18px; border-radius: 2px; font: inherit; font-size: 0.85rem; font-weight: 700; cursor: pointer; border: 1px solid #3a3a3e; background: transparent; color: #f8f8f9; transition: background 0.2s var(--ease), filter 0.2s var(--ease); } .cookie__btn--ghost:hover { background: rgba(255, 255, 255, 0.08); } .cookie__btn--primary { background: var(--blue); border-color: var(--blue); color: #f8f8f9; } .cookie__btn--primary:hover { filter: brightness(0.92); } .cookie__btn--reject { background: #f8f8f9; border-color: #f8f8f9; color: #16161a; } .cookie__btn--reject:hover { filter: brightness(0.92); } .cookie-modal { position: fixed; inset: 0; z-index: 2001; display: grid; place-items: center; padding: 20px; } .cookie-modal[hidden] { display: none; } .cookie-modal__backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); } .cookie-modal__panel { position: relative; width: min(520px, 100%); max-height: 88vh; overflow-y: auto; background: #161617; border: 1px solid #2a2a2d; border-radius: 2px; padding: clamp(24px, 4vw, 36px); color: #e8e8ea; } .cookie-modal__title { margin: 0 0 8px; font-size: 1.3rem; color: #f8f8f9; } .cookie-modal__intro { margin: 0 0 18px; font-size: 0.9rem; color: #b9b9be; } .cookie-opt { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid #2a2a2d; font-size: 0.9rem; } .cookie-opt span { color: #b9b9be; line-height: 1.4; } .cookie-opt span strong { color: #f8f8f9; } .cookie-opt input { width: 18px; height: 18px; accent-color: var(--blue); flex: 0 0 auto; } .cookie-modal__actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 22px; flex-wrap: nowrap; } .cookie-modal__actions .cookie__btn { white-space: nowrap; } .cookie__actions { flex-wrap: nowrap; } @media (max-width: 600px) { .cookie__actions, .cookie-modal__actions { width: 100%; gap: 6px; } .cookie__actions .cookie__btn, .cookie-modal__actions .cookie__btn { flex: 1 1 0; min-width: 0; padding: 10px 6px; font-size: 0.72rem; white-space: nowrap; } .cookie__inner { padding: 12px 16px; gap: 10px; } .cookie__text { flex: 1 1 100%; } .cookie__text strong { font-size: 0.92rem; margin-bottom: 2px; } .cookie__text p { font-size: 0.78rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } } @media (min-width: 821px) { .mmenu { display: none; } } .mmenu.is-dark { --bg-header: #1d1d1f; --bg: #17171d; --bg-alt: #26262b; --bg-dark: #202028; --text: #f5f5f7; --text-dim: #b6b6c0; --line: rgba(255,255,255,.14); } .mmenu__list { list-style: none; margin: 0; padding: 0; } .mmenu__cat, .mmenu__link { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 19px 24px; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--text); font: inherit; font-size: 1.15rem; font-weight: 600; text-align: left; text-decoration: none; cursor: pointer; } .mmenu__cat svg { width: 20px; height: 20px; opacity: 0.5; flex: 0 0 auto; } .mmenu__lang { margin-top: auto; padding: 20px 24px calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); } .mmenu__lang-title { display: block; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 12px; } .mmenu__lang-row { display: flex; gap: 10px; } .mmenu__lang-opt { flex: 1 1 0; text-align: center; padding: 12px 10px; border: 1px solid var(--line); border-radius: 2px; color: var(--text); font-weight: 600; text-decoration: none; } .mmenu__lang-opt.is-active { background: var(--blue); border-color: var(--blue); color: #fff; } .mmenu__back { display: flex; align-items: center; gap: 8px; width: 100%; padding: 16px 24px; background: none; border: 0; border-bottom: 1px solid var(--line); color: var(--text-dim); font: inherit; font-size: 1rem; cursor: pointer; } .mmenu__back svg { width: 20px; height: 20px; } .mmenu__title { padding: 18px 24px 6px; margin: 0; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-dim); } .mmenu__sublink { display: block; padding: 16px 24px; color: var(--text); text-decoration: none; font-size: 1.05rem; border-bottom: 1px solid var(--line); } .mmenu__cat:active, .mmenu__link:active, .mmenu__sublink:active, .mmenu__back:active { background: var(--bg-alt); } .section__title { font-family: "Mulish", sans-serif; font-weight: 900; font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.08; letter-spacing: -0.01em; margin: 0 0 0.5em; } .section__subtitle { color: var(--text-dim); font-size: 20px; line-height: 1.55; font-weight: 600; margin: 0 auto 1.4em; max-width: 46ch; } .pill-link--primary { background: var(--blue); border-color: var(--blue); color: #f8f8f9; } .pill-link--primary:hover { background: #1180ba; border-color: #1180ba; } .lhero { padding-block: clamp(40px, 7vw, 90px) clamp(48px, 8vw, 100px); background: var(--bg); } .lhero__inner { display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: clamp(28px, 5vw, 64px); } .lhero__title { font-family: "Mulish", sans-serif; font-weight: 900; font-size: clamp(2.4rem, 6vw, 4.4rem); line-height: 1.03; letter-spacing: -0.02em; margin: 0 0 0.4em; } .lhero__sub { color: var(--text-dim); font-size: clamp(1.1rem, 2vw, 1.4rem); line-height: 1.5; margin: 0 0 1.8em; max-width: 34ch; } .lhero__cta { display: flex; flex-wrap: wrap; gap: 14px; } .lhero__media img { width: 100%; height: auto; border-radius: var(--radius); } .series-card__desc { color: var(--text-dim); font-size: 0.98rem; line-height: 1.55; margin: 0; max-width: 38ch; } .home-page img.series-card__media, .home-page .config-card__media img { background: transparent; object-fit: contain; } .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; } .split__media img { width: 100%; height: auto; border-radius: var(--radius); } .split__text .section__title { text-align: left; } .split__text .section__text { margin-inline: 0; text-align: left; max-width: 46ch; } .benefits { list-style: none; display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 48px); margin: 1.8em 0; padding: 0; } .benefit { display: flex; flex-direction: column; } .benefit strong { font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 900; color: var(--blue); line-height: 1; } .benefit span { color: var(--text-dim); font-size: 0.9rem; margin-top: 4px; } .section--ink { background: #0a0a0b; } .section--ink .section__title { color: #f8f8f9; } .section--ink .section__subtitle { color: #f8f8f9; } .section--ink .section__text { color: #f8f8f9; } .section--ink .section__text--lead { color: #f8f8f9 !important; } .config-anim { margin: clamp(28px, 5vw, 56px) auto 0; max-width: 900px; border-radius: var(--radius); overflow: hidden; } .config-anim video { width: 100%; height: auto; display: block; } .optgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 3vw, 32px); margin-top: clamp(28px, 5vw, 52px); } .optcard { text-align: center; color: #f8f8f9; } .optgrid { align-items: start; } .optcard img { width: 100%; height: auto; margin: 0 auto 12px; display: block; } @media (min-width: 721px) { .optcard { text-align: left; } .optcard img { max-width: 150px; margin-left: 0; margin-right: auto; } } .optcard span { display: block; font-size: 1rem; line-height: 1.3; font-weight: 600; } .specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 3vw, 32px); margin-top: clamp(24px, 4vw, 44px); } .spec-card { background: var(--bg-dark); border: 1px solid var(--line); border-radius: 2px; padding: clamp(24px, 3.5vw, 40px); } .spec-card__name { font-family: "Elemental End", "Mulish", sans-serif; font-weight: 400; font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: 0.04em; margin: 0 0 0.6em; } .spec-card__list { margin: 0; } .spec-card__list > div { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0; border-top: 1px solid var(--line); } .spec-card__list dt { color: var(--text-dim); font-size: 0.92rem; } .spec-card__list dd { margin: 0; text-align: right; font-weight: 600; font-size: 0.92rem; } .configs { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 24px); margin-top: clamp(24px, 4vw, 44px); } .config-card { display: flex; flex-direction: column; background: var(--bg-dark); border: 1px solid var(--line); border-radius: 2px; padding: 20px; transition: border-color 0.2s var(--ease), transform 0.2s var(--ease); } .config-card:hover { border-color: var(--blue); transform: translateY(-3px); } .config-card__media { aspect-ratio: 4 / 3; margin-bottom: 14px; } .config-card__media img { width: 100%; height: 100%; object-fit: contain; } .config-card__title { font-family: "Mulish", sans-serif; font-weight: 800; font-size: 1.1rem; margin: 0 0 12px; } .config-card__rows { margin: 0 0 18px; } .config-card__rows > div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 0.82rem; } .config-card__rows dt { color: var(--text-dim); } .config-card__rows dd { margin: 0; text-align: right; font-weight: 600; } .config-card .pill-link { margin-top: auto; } .appgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 22px); margin-top: clamp(24px, 4vw, 44px); } .appcard { position: relative; margin: 0; border-radius: 2px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--bg-alt); } .appcard--wide { grid-column: span 2; aspect-ratio: 8 / 3; } .appcard img, .appcard video { width: 100%; height: 100%; object-fit: cover; display: block; } .appcard figcaption { position: absolute; left: 0; bottom: 0; width: 100%; padding: 10px 14px; color: #f8f8f9; font-weight: 700; font-size: 0.95rem; background: linear-gradient(transparent, rgba(0,0,0,0.6)); } .accgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 24px); margin-top: clamp(24px, 4vw, 44px); } .acccard { display: flex; flex-direction: column; align-items: center; text-align: center; background: var(--bg-dark); border: 1px solid var(--line); border-radius: 2px; padding: 24px; } .acccard__media { width: 100%; aspect-ratio: 4 / 3; margin-bottom: 16px; } .acccard__media img { width: 100%; height: 100%; object-fit: contain; } .acccard__name { font-size: 1.3rem; font-weight: 800; margin: 0 0 8px; } .accname { font-family: "Elemental End", "Mulish", sans-serif; font-weight: 400; text-transform: lowercase; letter-spacing: 0.02em; } .acccard p { color: var(--text-dim); font-size: 0.9rem; line-height: 1.5; margin: 0 0 16px; flex: 1; } .cta-banner { position: relative; border-radius: 2px; overflow: hidden; background: #0a0a0b; min-height: 340px; display: flex; align-items: center; } .cta-banner__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; } .cta-banner__content { position: relative; padding: clamp(32px, 6vw, 72px); max-width: 600px; color: #f8f8f9; } .cta-banner__content h2 { font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 900; margin: 0 0 0.5em; } .cta-banner__content p { color: #d4d4d8; line-height: 1.6; margin: 0 0 1.6em; } .partners { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(24px, 5vw, 60px); margin: clamp(28px, 4vw, 48px) 0; } .partner { font-size: clamp(1.2rem, 2.4vw, 1.8rem); font-weight: 800; color: var(--text-dim); opacity: 0.7; } .trust-stat { color: var(--text-dim); font-size: 1.1rem; } .trust-stat strong { color: var(--blue); font-weight: 900; } @media (max-width: 900px) { .configs, .appgrid, .accgrid, .optgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .lhero__inner { grid-template-columns: 1fr; } .lhero__media { order: -1; } .split { grid-template-columns: 1fr; } .specs { grid-template-columns: 1fr; } .split { display: flex; flex-direction: column; gap: 0; } .split__media { margin-top: clamp(28px, 6vw, 44px); } .split__text { display: contents; } .split__text .section__title { order: 0; } .split__text .section__text { order: 1; } .split__text .optgrid { order: 2; } .split__media { order: 3; } .split__text > .pill-link { order: 4; margin-top: clamp(18px, 5vw, 28px); } .hotspot-img .hs-lines { display: none !important; } } @media (max-width: 520px) { .configs, .accgrid { grid-template-columns: 1fr; } .appcard, .appcard--wide { grid-column: auto; aspect-ratio: 4 / 3; } } .home-page .site-header { position: sticky; left: 0; right: 0; top: 0; } .home-page main { margin-top: -65px; } .home-page .site-header:not(.is-scrolled) { background: transparent; border-bottom-color: transparent; box-shadow: none; } .home-page .site-header:not(.is-scrolled) .nav__list > li > a, .home-page .site-header:not(.is-scrolled) .nav__shop, .home-page .site-header:not(.is-scrolled) .icon-btn, .home-page .site-header:not(.is-scrolled) .lang__label { color: #f8f8f9; } .home-page .site-header:not(.is-scrolled) .nav__shop { color: #f8f8f9 !important; } .home-page .site-header:not(.is-scrolled) .logo__img { filter: brightness(0) invert(1); } .fhero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; } .fhero__media { position: absolute; inset: 0; } .fhero__media video, .fhero__media img { width: 100%; height: 100%; object-fit: cover; } .fhero__scrim { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.82), rgba(0,0,0,.45) 45%, rgba(0,0,0,.1)); } .fhero__content { position: relative; color: #f8f8f9; width: 100%; margin-top: clamp(48px, 14vh, 160px); } .fhero__title { font-weight: 900; font-size: clamp(1.8rem, 3.6vw, 3.1rem); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 .4em; } .fhero__sub { font-size: clamp(1.05rem, 1.8vw, 1.35rem); color: #e6e6ea; margin: 0 0 1.7em; max-width: none; } .fhero .pill-link { color: #f8f8f9; border-color: rgba(255,255,255,.5); } .fhero .pill-link:hover { border-color: var(--orange); } .fhero .pill-link--primary { background: transparent; border-color: rgba(255,255,255,.5); color: #f8f8f9; } .showcase { position: relative; min-height: 72vh; display: flex; overflow: hidden; background: #0a0a0b; } .showcase--bottom { align-items: flex-end; min-height: 82vh; } .showcase--center { align-items: center; } .showcase--left { align-items: flex-end; min-height: 85vh; } .showcase--left .container { max-width: none; width: 100%; } .showcase--left .showcase__media img { transform: none; object-fit: cover; object-position: center center; } .showcase--left .showcase__media::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 28%; z-index: 2; pointer-events: none; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background: linear-gradient(90deg, rgba(0,0,0,.7), rgba(0,0,0,0)); -webkit-mask-image: linear-gradient(90deg, #000 45%, transparent); mask-image: linear-gradient(90deg, #000 45%, transparent); } .showcase__media { position: absolute; inset: 0; } .showcase__media img, .showcase__media video { width: 100%; height: 100%; object-fit: cover; } .showcase__scrim { position: absolute; inset: 0; } .showcase--bottom .showcase__scrim { background: linear-gradient(transparent 35%, rgba(0,0,0,.82)); } .showcase--left .showcase__scrim { background: rgba(0,0,0,.15); } .showcase__content { position: relative; color: #f8f8f9; width: 100%; padding-block: clamp(40px, 6vw, 80px); text-align: center; } .showcase--left .showcase__content { text-align: left; max-width: 600px; padding-block: 0 clamp(22px, 4vh, 60px); margin-inline-start: clamp(24px, 31vw, 760px); text-shadow: 0 2px 14px rgba(0,0,0,.55); } @media (max-width: 900px) { .showcase--left .showcase__content { margin-inline-start: clamp(16px, 6vw, 44px); } .showcase--left .showcase__media::before { display: none; } } .showcase__title { font-weight: 900; font-size: clamp(1.6rem, 4vw, 2.8rem); line-height: 1.1; margin: 0 0 .4em; } .showcase__sub { color: #f8f8f9; font-size: clamp(1rem, 2vw, 1.3rem); margin: 0; } .showcase__content p { color: #f8f8f9; line-height: 1.6; margin: 0 0 1.6em; } .hl-blue { color: var(--blue); font-weight: 600; } .hl-orange { color: var(--orange); font-weight: 600; } .overview2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.5vw, 28px); margin-top: clamp(28px, 4vw, 48px); } .coolpanel { background: linear-gradient(180deg, #26262b 0%, #0a0a0b 78%); border-radius: 2px; padding: clamp(24px, 3vw, 40px); text-align: center; } .coolpanel__title { font-family: "Elemental End", "Mulish", sans-serif; font-weight: 400; font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: .04em; color: #f8f8f9; margin: 0; } .coolpanel__cool { display: block; font-family: "Mulish", sans-serif; font-weight: 700; font-size: .92rem; letter-spacing: .02em; color: #f8f8f9; margin-top: 8px; } .coolpanel__variants { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: clamp(20px, 3vw, 34px); } .cvariant img { width: 100%; aspect-ratio: 3 / 5; object-fit: contain; } .cvariant span { display: block; color: #8fb0c4; font-size: .8rem; font-weight: 600; margin-top: 8px; } .section--ink .split__text .section__title { color: #f8f8f9; } .section--ink .split__text .section__text { color: #f8f8f9; } .optcard { color: var(--text-dim); } .section--ink .optcard { color: #f8f8f9; } .kspecs { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); margin: clamp(24px, 3vw, 36px) 0; text-align: center; } .kspec__name { font-family: "Elemental End", "Mulish", sans-serif; font-weight: 400; font-size: clamp(1.6rem, 3.5vw, 2.2rem); letter-spacing: .04em; margin: 0 0 .3em; } .kspec__label { color: var(--blue); font-weight: 700; font-size: .82rem; margin: 14px 0 2px; } .kspec__val { font-size: .9rem; margin: 0; line-height: 1.45; } .split__text .optgrid { margin-top: clamp(20px, 3vw, 32px); } .section--ink .config-card { background: #141416; border-color: #2a2a2e; } .section--ink .config-card:hover { border-color: var(--blue); } .section--ink .config-card__title { color: #f8f8f9; } .section--ink .config-card__rows > div { border-top-color: #2a2a2e; } .section--ink .config-card__rows dd { color: #f8f8f9; } .section--ink .config-card .pill-link { color: #f8f8f9; border-color: rgba(255,255,255,.4); } .appgrid--3 { grid-template-columns: repeat(3, 1fr); } .section--ink .acccard { background: radial-gradient(125% 85% at 50% 0%, #2a2a30 0%, #0d0d0f 68%); border-color: #232327; } .section--ink .acccard__name { color: #f8f8f9; } .section--ink .acccard p { color: #f8f8f9; } .section--ink .acccard .pill-link { color: #f8f8f9; border-color: rgba(255,255,255,.4); } .accname--up { text-transform: uppercase; letter-spacing: .04em; } .section--ink .partner { color: #f8f8f9; } .section--ink .trust-stat { color: #f8f8f9; } .section--ink .trust-stat strong { color: var(--blue); } @media (max-width: 820px) { .overview2 { grid-template-columns: 1fr; } } @media (max-width: 720px) { .fhero { min-height: 88vh; } .showcase { min-height: 60vh; } .kspecs { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .appgrid--3 { grid-template-columns: 1fr; } } .promo-hero { position: relative; text-align: center; padding-block: clamp(90px, 16vh, 200px) clamp(50px, 8vw, 90px); overflow: hidden; background: radial-gradient(120% 100% at 50% 0%, #15242e 0%, var(--bg) 60%); } .promo-hero__confetti { position: absolute; top: 7%; left: 50%; transform: translateX(-50%); font-size: clamp(2.5rem, 8vw, 5rem); opacity: .85; } .promo-hero__eyebrow { text-transform: uppercase; letter-spacing: .14em; font-weight: 800; color: var(--blue); margin: 0 0 .6em; font-size: clamp(.9rem, 1.6vw, 1.05rem); } .promo-hero__logo { display: block; height: clamp(34px, 6vw, 64px); width: auto; margin: 0 auto clamp(20px, 3vw, 36px); } .promo-hero__title { font-family: "Elemental End", "Mulish", sans-serif; font-weight: 400; text-transform: none; letter-spacing: .04em; font-size: clamp(2.8rem, 9vw, 6.5rem); line-height: 1; margin: 0 0 .25em; } .promo-hero__dates { font-size: clamp(1.2rem, 2.5vw, 1.8rem); font-weight: 700; margin: 0 0 .4em; } .promo-hero__dates b { color: var(--blue); } .promo-hero__sub { color: var(--text-dim); font-size: clamp(1rem, 1.8vw, 1.2rem); margin: 0 0 1.8em; } .promo-hero__sub b { color: var(--blue); } .deals { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.5vw, 28px); margin-top: clamp(28px, 4vw, 48px); } .deal { position: relative; background: var(--bg-alt); border: 1px solid var(--line); border-radius: 2px; padding: clamp(28px, 3.5vw, 44px); text-align: center; transition: transform .2s var(--ease), border-color .2s var(--ease); } .deal:hover { transform: translateY(-4px); border-color: #3a3a3e; } .deal--featured { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); } .deal__flag { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); background: var(--blue); color: #f8f8f9; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: 5px 14px; border-radius: 2px; } .deal__pcts { display: flex; align-items: baseline; justify-content: center; gap: 14px; margin: 0 0 .5em; } .deal__old { font-family: "Elemental End", "Mulish", sans-serif; font-size: clamp(1.4rem, 3vw, 2rem); color: #6a6a70; text-decoration: line-through; text-decoration-color: #e0322c; text-decoration-thickness: 4px; } .deal__pct { font-family: "Elemental End", "Mulish", sans-serif; font-size: clamp(3rem, 7vw, 4.6rem); color: var(--blue); line-height: 1; } .deal__title { font-size: 1.05rem; font-weight: 600; line-height: 1.4; margin: 0 0 .8em; } .deal__title b { font-weight: 800; } .deal__code { margin: 0 0 .8em; font-weight: 700; } .deal__code span { color: var(--blue); font-weight: 800; background: rgba(20,149,212,.14); padding: 3px 10px; border-radius: 2px; letter-spacing: .03em; } .deal__cond { color: var(--text-dim); font-size: .82rem; line-height: 1.5; margin: 0; } .freebie { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; } .freebie__media img { width: 100%; height: auto; border-radius: var(--radius); } .freebie__badge { font-family: "Elemental End", "Mulish", sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .04em; color: var(--blue); font-size: clamp(2rem, 5vw, 3.4rem); margin: 0 0 .2em; } .freebie__title { font-weight: 900; font-size: clamp(1.6rem, 3.2vw, 2.4rem); margin: 0 0 .5em; } .freebie__desc { color: var(--text-dim); font-size: 1.05rem; line-height: 1.6; margin: 0 0 1.6em; } .freebie__desc b { color: var(--text); } .promo-fine p { color: var(--text-dim); font-size: .8rem; line-height: 1.6; margin: .25em 0; } .promo-strip { padding-block: clamp(28px, 4vw, 48px) !important; } .promo-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 26px; text-decoration: none; padding: clamp(18px, 2.5vw, 26px) clamp(22px, 3vw, 40px); border-radius: 2px; background: linear-gradient(100deg, #0a0a0b, #143240); border: 1px solid var(--blue); transition: transform .2s var(--ease), box-shadow .2s var(--ease); } .promo-banner:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(20,149,212,.25); } .promo-banner__tag { font-weight: 800; color: var(--blue); text-transform: uppercase; letter-spacing: .06em; font-size: .95rem; } .promo-banner__text { color: #f8f8f9; font-size: clamp(1rem, 1.8vw, 1.25rem); font-weight: 600; } .promo-banner__text strong { color: var(--blue); font-weight: 900; } .promo-banner__cta { color: #f8f8f9; font-weight: 700; border: 1px solid rgba(255,255,255,.4); border-radius: 2px; padding: 8px 18px; font-size: .9rem; white-space: nowrap; } @media (max-width: 820px) { .deals, .freebie { grid-template-columns: 1fr; } } .home-page .pill-link { transition: background .2s ease, color .2s ease, border-color .2s ease; } .ovx { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(24px,4vw,64px); align-items: center; margin-top: clamp(28px,4vw,48px); } .ovx__stage { position: relative; border-radius: 2px; background: linear-gradient(160deg,#20222a 0%,#0a0a0b 75%); min-height: 460px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .ovx__glow { position: absolute; width: 68%; height: 68%; border-radius: 50%; background: radial-gradient(circle, rgba(20,149,212,.25) 0%, transparent 65%); } .ovx__img { position: relative; height: 420px; width: auto; max-width: 78%; object-fit: contain; transition: opacity .3s ease; } .ovx__badge { position: absolute; top: 20px; left: 20px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: #f8f8f9; font-weight: 700; font-size: .8rem; padding: 6px 14px; border-radius: 2px; text-transform: uppercase; letter-spacing: .04em; } .ovx__panel { text-align: left; } .ovx__series { display: inline-flex; background: #131316; border: 1px solid #2a2a2e; border-radius: 2px; padding: 4px; margin-bottom: 18px; } .ovx__series button { border: 0; background: none; font: inherit; font-family: "Elemental End","Mulish",sans-serif; letter-spacing: .04em; font-weight: 700; color: #9a9a9e; padding: 9px 28px; border-radius: 2px; cursor: pointer; transition: background .2s, color .2s; } .ovx__series button.is-active { background: var(--blue); color: #f8f8f9; } .ovx__tag { color: #f8f8f9; font-size: 1.05rem; line-height: 1.5; margin: 0 0 26px; max-width: 42ch; } .ovx__specs { display: flex; gap: clamp(28px,4vw,52px); margin-bottom: 30px; } .ovx__spec small { display: block; color: #8a8f96; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 5px; } .ovx__spec strong { font-size: clamp(1.3rem,2.4vw,1.8rem); font-weight: 900; color: #f8f8f9; } .ovx__row { margin-bottom: 20px; } .ovx__lbl { display: block; color: #8a8f96; font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 9px; } .ovx__seg { display: inline-flex; flex-wrap: wrap; gap: 8px; } .ovx__seg button { border: 1px solid #2a2a2e; background: #131316; color: #f8f8f9; font: inherit; font-weight: 700; font-size: .9rem; padding: 9px 16px; border-radius: 2px; cursor: pointer; transition: border-color .2s, background .2s, color .2s; } .ovx__seg button:hover { border-color: #4a4a52; } .ovx__seg button.is-active { border-color: var(--blue); background: rgba(20,149,212,.14); color: #f8f8f9; } .ovx__panel .pill-link { margin-top: 12px; } @media (max-width: 860px) { .ovx { grid-template-columns: 1fr; } .ovx__stage { min-height: 340px; } .ovx__img { height: 290px; } } .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; } .home-page .site-header:not(.is-scrolled) { transition: background .25s ease, border-color .25s ease; } .home-page .site-header:not(.is-scrolled) .nav__list > li > a, .home-page .site-header:not(.is-scrolled) .nav__shop, .home-page .site-header:not(.is-scrolled) .icon-btn, .home-page .site-header:not(.is-scrolled) .lang__label, .home-page .site-header:not(.is-scrolled) .logo__img { transition: color .25s ease, filter .25s ease; } .home-page .site-header:not(.is-scrolled):hover, .home-page.mega-open .site-header:not(.is-scrolled) { background: var(--bg-header); border-bottom: 1px solid var(--line); box-shadow: none; } .home-page .site-header:not(.is-scrolled):hover .nav__list > li > a, .home-page .site-header:not(.is-scrolled):hover .nav__shop, .home-page .site-header:not(.is-scrolled):hover .icon-btn, .home-page .site-header:not(.is-scrolled):hover .lang__label, .home-page.mega-open .site-header:not(.is-scrolled) .nav__list > li > a, .home-page.mega-open .site-header:not(.is-scrolled) .nav__shop, .home-page.mega-open .site-header:not(.is-scrolled) .icon-btn, .home-page.mega-open .site-header:not(.is-scrolled) .lang__label { color: var(--text); } .home-page .site-header:not(.is-scrolled):hover .nav__shop, .home-page.mega-open .site-header:not(.is-scrolled) .nav__shop { color: var(--text) !important; } .home-page .site-header:not(.is-scrolled):hover .logo__img, .home-page.mega-open .site-header:not(.is-scrolled) .logo__img { filter: none; } .home-page .site-header.over-dark:not(.is-scrolled):hover .logo__img, .home-page.mega-open .site-header.over-dark:not(.is-scrolled) .logo__img { filter: brightness(0) invert(1); } .nav__has-mega.is-open .nav__mega, .nav__mega.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 0.4s var(--ease); z-index: 121; } .atiles { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: clamp(24px,4vw,44px); } .atile { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; min-height: 560px; padding: clamp(36px,4vw,58px) 24px 0; border-radius: 2px; overflow: hidden; background: radial-gradient(120% 85% at 50% 0%, #26262b 0%, #0a0a0b 62%); color: #f8f8f9; } .atile__title { font-size: clamp(2rem,3.4vw,2.9rem); font-weight: 800; line-height: 1.05; margin: 0 0 .12em; } .atile__sub { font-size: clamp(1.02rem,1.6vw,1.25rem); color: #f8f8f9; margin: 0 auto 1.1em; max-width: 32ch; } .atile__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .atile__btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 11px 20px; border-radius: 2px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; border: 1px solid rgba(255,255,255,.5); color: #f8f8f9; transition: background .2s ease, color .2s ease; } .atile__btn:hover { background: rgba(255,255,255,.14); } .atile__btn--primary { background: var(--blue); border-color: var(--blue); color: #f8f8f9; } .atile__btn--primary:hover { background: #1180ba; border-color: #1180ba; } .atile__img { margin-top: auto; width: auto; max-width: 80%; max-height: 56%; object-fit: contain; } @media (max-width: 760px) { .atiles { grid-template-columns: 1fr; } .atile { min-height: 460px; } } .atiles { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); padding-inline: clamp(14px,2vw,24px); } .atile { position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items: center; text-align: center; aspect-ratio: 1111 / 660; min-height: 420px; padding: clamp(24px,2.8vw,40px) clamp(20px,2.4vw,34px) clamp(22px,2.6vw,36px); border-radius: 2px; overflow: hidden; background: #0a0a0b; } .atile::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,.12) 24%, rgba(0,0,0,0) 40%, rgba(0,0,0,0) 66%, rgba(0,0,0,.35) 88%, rgba(0,0,0,.55) 100%); } .atile__cta { position: relative; z-index: 2; margin-top: auto; } .atile__img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; object-position: center; display: block; margin: 0; z-index: 0; } .atile__head { position: relative; z-index: 2; padding: 0; } .atiles--spindel .atile { aspect-ratio: auto; min-height: clamp(480px, 45vw, 580px); } .atiles--spindel .atile__img { object-fit: contain; padding: clamp(96px, 15vw, 150px) 0 clamp(48px, 7vw, 74px); } .atiles--spindel .atile--fill .atile__img { object-fit: cover; padding: 0; object-position: center 32%; } .atile--fill::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0) 30%, rgba(0,0,0,0) 62%, rgba(0,0,0,.55)); } @media (max-width: 760px) { .atiles--spindel .atile { min-height: clamp(500px, 132vw, 600px); } .atiles--spindel .atile__img { padding: clamp(150px, 40vw, 184px) 0 clamp(58px, 13vw, 80px); } } .showcase__media img[data-zoom] { transform-origin: center center; will-change: transform; transform: scale(.5); border-radius: 20px; } @media (prefers-reduced-motion: reduce) { .showcase__media img[data-zoom] { transform: none !important; } } .showcase--zoom { height: 115vh; min-height: 0; background: var(--bg); display: block; overflow: visible; } .showcase__sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: flex-end; } .showcase--zoom .showcase__media img[data-zoom] { box-shadow: 0 30px 80px rgba(0,0,0,.22); } .appsec { background: #000; color: #f8f8f9; } .appsec .section__title { color: #f8f8f9; } .appsec .section__subtitle { color: #f8f8f9; } .appsec .section__text { color: #f8f8f9; } .appslider { position: relative; display: flex; align-items: center; gap: clamp(8px,1.4vw,16px); max-width: 1320px; margin: clamp(26px,4vw,48px) auto 0; padding-inline: clamp(12px,3vw,40px); } .appslider__track { flex: 1 1 auto; min-width: 0; display: flex; gap: clamp(16px,2vw,28px); overflow-x: auto; overflow-y: hidden; touch-action: pan-x pan-y; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; outline: none; } .appslider__track::-webkit-scrollbar { display: none; } .appslide { scroll-snap-align: center; flex: 0 0 100%; margin: 0; } .appslide__media { position: relative; aspect-ratio: 16 / 9; border-radius: 2px; overflow: hidden; background: #101012; } .appslide__media img, .appslide__media video { width: 100%; height: 100%; object-fit: cover; display: block; } .appslide figcaption { margin-top: 16px; text-align: center; font-weight: 700; font-size: clamp(1rem,1.6vw,1.25rem); color: #f8f8f9; } .appslider__arrow { flex: 0 0 auto; width: 54px; height: 54px; border-radius: 2px; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.06); color: #f8f8f9; display: grid; place-items: center; cursor: pointer; transition: background .2s, border-color .2s, opacity .2s; } .appslider__arrow:hover { background: #fff; border-color: #f8f8f9; color: #000; } .appslider__arrow:disabled { opacity: .28; cursor: default; } .appslider__arrow:disabled:hover { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.28); color: #f8f8f9; } @media (max-width: 620px) { .appslider { padding-inline: 0; gap: 0; } .appslide__media { aspect-ratio: 4 / 3; border-radius: 0; } .appslide figcaption { padding-inline: 16px; } .appslider__arrow { position: absolute; top: 37.5vw; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px; background: rgba(10,10,11,.5); border-color: rgba(255,255,255,.45); } .appslider__arrow--prev { left: 10px; } .appslider__arrow--next { right: 10px; } } .subnav { background: var(--bg-alt); border-bottom: 1px solid var(--line); } .subnav__inner { display:flex; align-items:center; gap:18px; min-height:46px; } .subnav__title { font-weight:800; font-size:.9rem; color:var(--text); flex:0 0 auto; } .subnav__list { display:flex; gap:4px; list-style:none; margin:0; padding:0; overflow-x:auto; scrollbar-width:none; } .subnav__list::-webkit-scrollbar { display:none; } .subnav__link { display:inline-block; padding:7px 14px; border-radius:2px; color:var(--text-dim); font-weight:700; font-size:.9rem; text-decoration:none; white-space:nowrap; transition:background .15s,color .15s; } .subnav__link:hover { background:var(--bg-dark); color:var(--text); } .subnav__link.is-active { background:var(--blue); color:#f8f8f9; } @media (max-width:600px){ .subnav__title{ display:none; } } .uspflow__rows { max-width: 1080px; } .usprow { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(20px,5vw,64px); padding:clamp(26px,5vw,60px) 0; opacity:0; transition:opacity .75s cubic-bezier(.2,.7,.2,1), transform .75s cubic-bezier(.2,.7,.2,1); } .usprow + .usprow { border-top:1px solid rgba(255,255,255,.08); } .usprow--left { transform:translateX(-70px); } .usprow--right { transform:translateX(70px); } .usprow.is-in { opacity:1; transform:none; } .usprow--right .usprow__key { order:2; } .usprow--right .usprow__body { order:1; } .usprow__key { display:flex; justify-content:center; } .usprow__kw { font-weight:900; font-size:clamp(2.4rem,7vw,5rem); line-height:1; letter-spacing:-.02em; background:linear-gradient(120deg,var(--blue),#8fdcfb); -webkit-background-clip:text; background-clip:text; color:transparent; } .usprow__body h3 { font-size:clamp(1.3rem,2.6vw,1.9rem); font-weight:800; margin:0 0 .45em; color:#f8f8f9; } .usprow__body p { color:#f8f8f9; line-height:1.6; margin:0 0 1.3em; max-width:46ch; } .usprow--right .usprow__body p { margin-left:auto; } @media (max-width:760px){ .usprow { grid-template-columns:1fr; text-align:center; gap:14px; } .usprow--left, .usprow--right { transform:translateY(44px); } .usprow--right .usprow__key, .usprow--right .usprow__body { order:0; } .usprow__body p, .usprow--right .usprow__body p { margin-inline:auto; } } @media (prefers-reduced-motion: reduce){ .usprow { transition:none; opacity:1; transform:none; } } .uspscroll { position:relative; height:235vh; background:#000; } .uspscroll__sticky { position:sticky; top:0; height:100vh; overflow:hidden; display:flex; align-items:center; justify-content:center; } .uspscroll__bg { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:auto; height:132vh; max-width:none; object-fit:contain; z-index:0; will-change:opacity,transform; } .uspscroll__intro, .uspitem { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(90vw,760px); padding:0 20px; text-align:center; color:#f8f8f9; z-index:2; opacity:0; pointer-events:none; will-change:opacity,transform; } .uspscroll__intro { top:24%; } .uspscroll__h { font-weight:900; font-size:clamp(1.8rem,5vw,3.2rem); line-height:1.05; margin:0 0 .3em; } .uspscroll__sub { color:#f8f8f9; font-size:clamp(1rem,2vw,1.3rem); margin:0 0 1.6em; } .uspscroll__hint { display:inline-block; color:#8a8a90; font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; } .uspitem__kw { display:block; font-weight:900; font-size:clamp(2.6rem,9vw,6rem); line-height:1.14; padding-bottom:.08em; letter-spacing:-.02em; background:linear-gradient(120deg,var(--blue),#8fdcfb); -webkit-background-clip:text; background-clip:text; color:transparent; margin-bottom:.15em; } .uspitem h3 { font-size:clamp(1.3rem,2.6vw,1.9rem); font-weight:800; margin:0 0 .4em; } .uspitem p { color:#f8f8f9; line-height:1.6; margin:0 auto 1.3em; max-width:44ch; } .uspscroll.is-static { height:auto; } .uspscroll.is-static .uspscroll__sticky { position:static; height:auto; display:block; padding:clamp(40px,7vw,90px) 20px; } .uspscroll.is-static .uspscroll__bg { position:static; transform:none; opacity:.28; height:auto; max-height:60vh; margin:0 auto 40px; display:block; } .uspscroll.is-static .uspscroll__intro, .uspscroll.is-static .uspitem { position:static; transform:none; opacity:1; margin:0 auto clamp(36px,6vw,64px); } @media (max-width: 760px){ .atiles { padding-inline: 0; } .atile { aspect-ratio: 4 / 5; border-radius: 0; padding-top: clamp(28px,7vw,44px); padding-bottom: clamp(24px,6vw,38px); } .atile__img { object-position: center 46%; } } .partner-logo { width:auto; max-width:220px; object-fit:contain; opacity:1; transition:opacity .2s, transform .2s; } .partner-logo:hover { transform:scale(1.04); } .section--ink .partner-logo { filter:none; opacity:1; } .partner-logo--cncstep { height: clamp(128px,18vw,205px); max-width:700px; } .partner-logo--avr { height: clamp(24px,3.4vw,38px); } .partner-logo--stepcraft { height: clamp(36px,5.2vw,56px); } .partner-logo--geberit { height: clamp(26px,3.8vw,42px); } .partner-logo--vhf { height: clamp(30px,4.2vw,48px); } .section--ink .partner-logo:hover { transform:scale(1.04); } @media (max-width: 600px){ .partners { flex-wrap: nowrap; gap: 10px; margin: 22px 0; } .partners .partner-logo { flex: 1 1 0; min-width: 0; width: auto; max-width: 100%; height: auto; max-height: 30px; } .partners .partner-logo--cncstep { max-height: 40px; } } @media (min-width: 1921px){ .atiles { margin-left: calc(50% - 36vw); margin-right: calc(50% - 36vw); max-width:none; } } .section__text, .section__text--lead, .split__text p, .split p, .showcase__content p, .uspitem p, .usprow__body p, .trust-stat { font-size: 20px; line-height: 1.55; } .section__title:has(+ .section__text), .section__heading:has(+ .section__text), .showcase__title:has(+ p), .introlead__big:has(+ .introlead__rest) { margin-bottom: clamp(12px, 1.6vw, 18px); } .section__title + .section__text, .section__heading + .section__text, .split__text .section__title + .section__text, .showcase__title + p, .introlead__big + .introlead__rest { margin-top: 0; } .fhero { position: relative; } .scrollcue { position:absolute; left:50%; bottom:24px; display:grid; place-items:center; width:52px; height:52px; padding:0; border:0; background:none; color:#f8f8f9; opacity:.55; cursor:pointer; z-index:4; animation:scrollcue-bounce 1.6s ease-in-out infinite; transition:opacity .2s; } .scrollcue:hover { opacity:.95; } @keyframes scrollcue-bounce { 0%,100% { transform:translate(-50%,0); } 50% { transform:translate(-50%,9px); } } @media (prefers-reduced-motion: reduce){ .scrollcue { animation:none; transform:translate(-50%,0); } } .pill-link, .pill-link--primary { background: transparent; border: 1.5px solid #16161a; color: #16161a; transition: background .2s ease, color .2s ease, border-color .2s ease; } .pill-link:hover, .pill-link--primary:hover { background:#16161a; border-color:#16161a; color:#f8f8f9; } .soon .pill-link, .soon .pill-link--primary, .section--ink .pill-link, .section--ink .pill-link--primary, .fhero .pill-link, .fhero .pill-link--primary, .showcase .pill-link, .showcase .pill-link--primary, .uspscroll .pill-link, .uspscroll .pill-link--primary, .uspitem .pill-link, .appsec .pill-link { background: transparent; border-color:#f8f8f9; color:#f8f8f9; } .soon .pill-link:hover, .soon .pill-link--primary:hover, .section--ink .pill-link:hover, .section--ink .pill-link--primary:hover, .fhero .pill-link:hover, .fhero .pill-link--primary:hover, .showcase .pill-link:hover, .showcase .pill-link--primary:hover, .uspscroll .pill-link:hover, .uspscroll .pill-link--primary:hover, .uspitem .pill-link:hover, .appsec .pill-link:hover { background:#f8f8f9; border-color:#f8f8f9; color:#16161a; } .atile__btn, .atile__btn--primary { background: transparent; border: 1.5px solid #f8f8f9; color:#f8f8f9; transition: background .2s ease, color .2s ease, border-color .2s ease; } .atile__btn:hover, .atile__btn--primary:hover { background:#f8f8f9; border-color:#f8f8f9; color:#16161a; } .pill-link--primary, .lhero__cta .pill-link { min-width: 190px; justify-content: center; text-align: center; } .lhero__cta .pill-link { flex: 0 1 auto; } .atile__cta { justify-content: center; } .atile__cta .atile__btn { text-align: center; } @media (max-width: 640px) { .pill-link, .pill-link--primary, .atile__btn, .atile__btn--primary { width: 100%; justify-content: center; text-align: center; } .lhero__cta { max-width: none; } .lhero__cta .pill-link { flex: 1 1 100%; } } .section--ink .section__title, .appsec .section__title, .uspscroll .uspscroll__h, .uspitem h3 { color:#f8f8f9; } .introlead { padding-block: clamp(64px,9vw,120px); } .introlead__eyebrow { display:inline-block; color: var(--blue); font-weight:800; text-transform:uppercase; letter-spacing:.14em; font-size:.8rem; margin:0 0 16px; } .introlead__big { font-size: clamp(1.7rem,3.6vw,2.75rem); font-weight:800; line-height:1.18; letter-spacing:-.01em; color:#f8f8f9; max-width:900px; margin:0 auto .7em; } .introlead__rest { line-height:1.65; color:#f8f8f9; max-width:760px; margin:0 auto; } .introlead__rest strong { color:var(--blue); font-weight:700; } @media (max-width: 720px) { .introlead .center { text-align: left; } .introlead__big, .introlead__rest { margin-inline: 0; } } .truststrip { background:#0a0a0b; border-bottom:1px solid rgba(255,255,255,.08); padding:20px 0; } .truststrip__inner { display:flex; align-items:center; justify-content:center; gap:clamp(16px,3.5vw,44px); flex-wrap:wrap; } .truststrip__label { color:#f8f8f9; opacity:.75; font-weight:700; font-size:14px; } .truststrip__logos { display:flex; align-items:center; gap:clamp(16px,3vw,38px); flex-wrap:wrap; justify-content:center; } .truststrip .partner-logo { height:26px; opacity:.9; } .truststrip .partner-logo--cncstep { height:42px; max-width:150px; } @media (max-width:600px){ .truststrip__label { font-size:12.5px; } .truststrip .partner-logo { height:20px; } .truststrip .partner-logo--cncstep { height:32px; } } .hotspot-img { position: relative; display: block; overflow: visible; } .hotspot-img > img { display: block; width: 100%; height: auto; } .hs-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; opacity: 0; transition: opacity .18s ease; } .hs-lines.is-on { opacity: 1; } .hs-line { stroke: var(--blue); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; } .hotspot { position: absolute; transform: translate(-50%,-50%); border: 0; padding: 0; background: none; cursor: pointer; z-index: 3; } .hotspot__dot { display: block; width: 16px; height: 16px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 4px rgba(20,149,212,.35); position: relative; } .hotspot__dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(20,149,212,.55); animation: hspulse 1.9s ease-out infinite; } .hotspot.is-active { z-index: 5; } .hotspot.is-active .hotspot__dot { background: #f8f8f9; box-shadow: 0 0 0 4px var(--blue); } .hotspot.is-active .hotspot__dot::after { animation: none; } @keyframes hspulse { 0% { transform: scale(.6); opacity: .85; } 100% { transform: scale(2); opacity: 0; } } .hs-label { position: absolute; transform: translate(-50%,-50%); width: 270px; max-width: 62vw; background: #0a0a0b; color: #f8f8f9; border: 1px solid rgba(255,255,255,.16); border-radius: 2px; padding: 11px 13px; box-shadow: 0 12px 30px rgba(0,0,0,.4); opacity: 0; visibility: hidden; transition: opacity .22s ease .04s; pointer-events: none; z-index: 4; text-align: left; } .hs-label.is-active { opacity: 1; visibility: visible; } .hs-label b { display: block; color: var(--blue); font-weight: 800; font-size: 17px; margin-bottom: 4px; } .hs-label i { font-style: normal; font-size: 15px; line-height: 1.45; color: #f8f8f9; } @media (prefers-reduced-motion: reduce){ .hotspot__dot::after { animation: none; } } .nav-toggle { color: var(--text); } .nav-toggle span { background: currentColor; } .home-page .site-header:not(.is-scrolled) .nav-toggle { color: #f8f8f9; } body.mmenu-open .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; } .fhero__media, .fhero__media video { transform: translateZ(0); backface-visibility: hidden; } .faq-hero { text-align:center; padding-block: clamp(52px,9vw,110px) clamp(20px,3vw,34px); } .faq-hero .page-title { margin:0 0 .3em; } .faqnav { position:sticky; top:64px; z-index:30; background:var(--bg); border-bottom:1px solid var(--line); } .faqnav__inner { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; padding:12px 0; } .faqnav a { display:inline-block; padding:8px 16px; border:1px solid var(--line); border-radius:2px; text-decoration:none; color:var(--text); font-size:.9rem; font-weight:600; transition:background .2s,color .2s,border-color .2s; } .faqnav a:hover { background:var(--blue); border-color:var(--blue); color:#f8f8f9; } .faq-wrap { max-width:840px; margin-inline:auto; } .faq-cat { padding-block: clamp(30px,4vw,52px); scroll-margin-top:130px; } .faq-cat__title { font-size:clamp(1.5rem,3vw,2.1rem); font-weight:800; letter-spacing:-.01em; margin:0 0 clamp(10px,1.4vw,16px); } .faq-item { border-bottom:1px solid var(--line); } .faq-item:first-of-type { border-top:1px solid var(--line); } .faq-q { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 4px; font-size:1.1rem; font-weight:700; color:var(--text); } .faq-q__t { margin:0; font:inherit; color:inherit; letter-spacing:inherit; } .faq-q::-webkit-details-marker { display:none; } .faq-q::after { content:"+"; font-size:1.7rem; font-weight:400; line-height:1; color:var(--blue); flex:0 0 auto; transition:transform .2s ease; } .faq-item[open] > .faq-q::after { content:"\2212"; } .faq-a { padding:0 4px 22px; color:var(--text-dim); font-size:20px; line-height:1.6; } .faq-a p { margin:0 0 .6em; } .faq-a p:last-child { margin-bottom:0; } .faq-a a { color:var(--blue); text-decoration:none; } .faq-a a:hover { text-decoration:underline; } .faq-a ul { margin:.2em 0 .6em; padding-left:1.4em; list-style:disc; } .faq-a ol { margin:.2em 0 .6em; padding-left:1.4em; list-style:decimal; } .faq-a li { margin:.2em 0; } @media (max-width:720px){ .faqnav { top:56px; } .faq-q { font-size:1.02rem; } .faq-a { font-size:18px; } } .legal { max-width: 820px; margin-inline: auto; padding-block: clamp(40px,7vw,90px); } .legal h1 { font-size: clamp(1.9rem,4vw,2.8rem); font-weight: 800; letter-spacing:-.01em; margin: 0 0 .5em; } .legal h2 { font-size: clamp(1.2rem,2.4vw,1.6rem); font-weight: 800; margin: 1.6em 0 .5em; } .legal h3 { font-size: 1.1rem; font-weight: 700; margin: 1.2em 0 .35em; } .legal p, .legal li { font-size: 18px; line-height: 1.7; color: var(--text-dim); } .legal ul { padding-left: 1.2em; margin:.4em 0 1em; } .legal li { margin:.25em 0; } .legal a { color: var(--blue); text-decoration: none; } .legal a:hover { text-decoration: underline; } .legal strong { color: var(--text); } .legal address { font-style: normal; line-height:1.7; color: var(--text-dim); } .legal__updated { color: var(--text-dim); font-size: .9rem; margin-top: 2.5em; } .legal__table { width:100%; border-collapse: collapse; margin: 1em 0 1.4em; } .legal__table th, .legal__table td { text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); font-size:17px; color: var(--text-dim); vertical-align: top; } .legal__table th { color: var(--text); font-weight:700; } .legal__table td:first-child { padding-right: 20px; } .legal__table th:last-child, .legal__table td:last-child { text-align: right; white-space: nowrap; padding-left: 26px; } .legal__note { border:1px solid var(--line); border-left:3px solid var(--blue); border-radius:2px; padding:14px 16px; margin:1.4em 0; font-size:16px; color:var(--text-dim); } .legal__toc { list-style:none; padding-left:0; margin:.4em 0 1.8em; } .legal__toc li { margin:.25em 0; } .legal__toc a { color: var(--blue); text-decoration:none; } .legal__toc a:hover { text-decoration:underline; } .contact-grid { display:grid; grid-template-columns:1fr; gap:clamp(22px,4vw,38px); align-items:start; max-width:760px; margin:clamp(28px,5vw,56px) auto 0; } .contact-grid .cform { order:1; } .contact-grid .contact-info { order:2; border-top:1px solid var(--line); margin-top:clamp(6px,1.5vw,14px); padding-top:clamp(24px,4vw,36px); } .contact-info h2 { font-size:1.3rem; font-weight:800; margin:0 0 1em; } .contact-info__items { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:18px 28px; margin-bottom:1.4em; } .contact-info__item { margin-bottom:0; } .contact-info__label { display:block; font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; color:var(--text-dim); margin-bottom:3px; } .contact-info address { font-style:normal; line-height:1.6; } .contact-info a { color:var(--blue); text-decoration:none; } .contact-info a:hover { text-decoration:underline; } .contact-info .pill-link { margin-top:.4em; } .cform { display:grid; gap:16px; } .cform__row { display:grid; grid-template-columns:1fr 1fr; gap:16px; } .cform label { display:block; font-weight:600; font-size:.9rem; margin-bottom:6px; } .cform input, .cform textarea, .cform select { width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:2px; background:var(--bg-dark); color:var(--text); font:inherit; font-size:1rem; transition:border-color .2s ease; } .cform input:focus, .cform textarea:focus, .cform select:focus { outline:none; border-color:var(--blue); } .cform select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9a9e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 14px; } .cform select::-ms-expand { display: none; } .cform textarea { min-height:160px; max-height:360px; resize:vertical; } .faq-page .reveal, .faq-page [data-reveal] { opacity:1 !important; transform:none !important; transition:none !important; } .cform button { cursor:pointer; } .cform__consent { display:flex; gap:10px; align-items:flex-start; font-size:.92rem; color:var(--text-dim); } .cform__consent input { width:auto; margin-top:3px; flex:0 0 auto; } .cform__consent a { color:var(--blue); } .cform__hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; } .cform__actions { display:flex; align-items:center; gap:16px; flex-wrap:wrap; } .cform__msg { margin:0; font-size:.92rem; } .cform__msg--err { color:#c0392b; } .cform__msg--ok { color:#1e8e4e; } .cform__hint { font-size:.82rem; color:var(--text-dim); margin:0; } @media (max-width:820px){ .contact-grid { grid-template-columns:1fr; } .cform__row { grid-template-columns:1fr; } } .blog { padding-bottom: clamp(60px,8vw,110px); } .blog-hero { padding: clamp(48px,8vw,110px) 0 clamp(24px,4vw,44px); text-align: center; } .blog-hero__eyebrow { text-transform: uppercase; letter-spacing: 0.16em; font-weight: 700; font-size: clamp(0.95rem, 1.5vw, 1.15rem); color: var(--blue); margin: 0 0 14px; } .blog-hero__title { font-size: clamp(2.2rem,5vw,3.6rem); font-weight: 900; line-height: 1.04; margin: 0 0 18px; } .blog-hero__lead { max-width: 62ch; margin: 0 auto; color: var(--text-dim); font-size: clamp(1.05rem,1.6vw,1.25rem); line-height: 1.6; } .blog-feature { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(20px,3vw,44px); align-items: center; text-decoration: none; color: inherit; margin: clamp(20px,4vw,48px) 0; } .blog-feature__media { border-radius: 2px; overflow: hidden; background: radial-gradient(120% 90% at 50% 10%, #26262b, #0a0a0b 65%); aspect-ratio: 16/11; } .blog-feature__media img { width: 100%; height: 100%; object-fit: cover; } .blog-feature__title { font-size: clamp(1.6rem,3vw,2.4rem); font-weight: 900; line-height: 1.1; margin: 12px 0 14px; } .blog-feature__ex { color: var(--text-dim); font-size: 1.05rem; line-height: 1.6; margin: 0 0 16px; max-width: 52ch; } .blog-feature:hover .blog-feature__title { color: var(--blue); } .blog-tags { display: flex; gap: 8px; flex-wrap: wrap; } .blog-tag { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; color: var(--blue); background: rgba(20,140,200,.1); padding: 5px 11px; border-radius: 2px; } .blog-meta { display: flex; align-items: center; gap: 8px; color: var(--text-dim); font-size: .88rem; font-weight: 600; margin-top: 4px; } .blog-filter { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: clamp(18px,3vw,36px) auto clamp(22px,3vw,38px); } .blog-chip { border: 1.5px solid var(--line); background: transparent; color: var(--text); border-radius: 2px; padding: 9px 18px; font: inherit; font-weight: 700; font-size: .92rem; cursor: pointer; transition: background .18s, color .18s, border-color .18s; } .blog-chip:hover { border-color: #b8b8c0; } .blog-chip.is-active { background: var(--text); color: var(--bg); border-color: var(--text); } .blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px,2.4vw,30px); } .blog-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--bg); border: 1px solid var(--line); border-radius: 2px; overflow: hidden; transition: transform .18s, box-shadow .18s; } .blog-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,.1); } .blog-card__media { aspect-ratio: 16/10; background: radial-gradient(120% 90% at 50% 10%, #26262b, #0a0a0b 65%); overflow: hidden; } .blog-card__media img { width: 100%; height: 100%; object-fit: cover; } .blog-card__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .blog-card__title { font-size: 1.16rem; font-weight: 800; line-height: 1.25; margin: 2px 0 0; } .blog-card__ex { color: var(--text-dim); font-size: .95rem; line-height: 1.55; margin: 0; flex: 1; } .blog-card.is-hidden { display: none; } .blog-cta { margin-top: clamp(46px,7vw,86px); background: radial-gradient(130% 120% at 50% 0%, #1b1b20, #0a0a0b 70%); color: #f8f8f9; border-radius: 2px; padding: clamp(40px,6vw,72px) 24px; text-align: center; } .blog-cta h2 { font-size: clamp(1.6rem,3vw,2.4rem); font-weight: 900; margin: 0 0 14px; } .blog-cta p { max-width: 54ch; margin: 0 auto 24px; color: #cfcfd6; line-height: 1.6; } @media (max-width: 900px){ .blog-feature { grid-template-columns: 1fr; } .blog-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px){ .blog-grid { grid-template-columns: 1fr; } } .post { padding-bottom: clamp(50px,7vw,90px); } .post-hero { padding: clamp(38px,6vw,74px) 0 0; } .post-hero .container { max-width: 860px; } .post-hero__title { font-size: clamp(1.9rem,4vw,3rem); font-weight: 900; line-height: 1.08; margin: 14px 0 16px; } .post-hero__media { max-width: 1000px; margin: clamp(20px,3vw,34px) auto 0; border-radius: 2px; overflow: hidden; aspect-ratio: 16/8; background: radial-gradient(120% 90% at 50% 10%, #26262b, #0a0a0b 65%); } .spin3d { max-width: 820px; margin: clamp(24px,4vw,44px) auto 0; } .spin3d__stage { position: relative; border-radius: 2px; overflow: hidden; } .spin3d__loader { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: min(48%, 220px); height: 4px; background: rgba(255,255,255,0.22); border-radius: 3px; overflow: hidden; opacity: 0; transition: opacity .35s var(--ease); pointer-events: none; z-index: 3; } .spin3d__loader.is-loading { opacity: 1; } .spin3d__loaderfill { display: block; height: 100%; width: 0%; background: #fff; border-radius: 3px; transition: width .12s linear; } .spin3d__blur { position: absolute; inset: 0; background: #000 url("../assets/products/spindeln/motorspindel-x22-freigestellt-blur.jpg") center/contain no-repeat; -webkit-filter: blur(6px); filter: blur(6px); transform: scale(1.06); opacity: 0; transition: opacity .4s var(--ease); pointer-events: none; z-index: 1; } .spin3d__blur.is-loading { opacity: 1; } .spin3d__soon { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; } .spin3d__soon[hidden] { display: none; } .spin3d__soon span { font-family: "Elemental End","Mulish",sans-serif; letter-spacing: .04em; color: var(--text-dim); font-size: clamp(1rem,2.4vw,1.35rem); background: var(--bg-alt); border: 1px solid var(--line); border-radius: 2px; padding: .7em 1.2em; } .spin3d__controls { display: flex; flex-direction: column; gap: 16px; margin-top: clamp(20px,3vw,32px); } .spin3d__group { display: flex; flex-direction: column; align-items: center; gap: 10px; } .spin3d__label { font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--text-dim); } .spin3d__tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .spin3d__tab { font: inherit; font-size: .9rem; font-weight: 600; color: var(--text-dim); background: transparent; border: 1px solid var(--line); border-radius: 2px; padding: 8px 16px; cursor: pointer; transition: background .18s var(--ease), color .18s var(--ease), border-color .18s var(--ease), opacity .18s var(--ease); } .spin3d__tab:hover { color: var(--text); border-color: var(--text-dim); } .spin3d__tab.is-active { background: var(--text); color: var(--bg); border-color: var(--text); } .spin3d__tab.is-soon { opacity: .38; } .spin3d__tab.is-soon.is-active { opacity: 1; } .spin3d__caption { margin-top: 16px; color: var(--text-dim); font-size: .95rem; } .post-hero__media img { width: 100%; height: 100%; object-fit: cover; } .post__body { max-width: 720px; margin: clamp(28px,4vw,48px) auto 0; } .post__body p { font-size: 1.08rem; line-height: 1.75; color: var(--text); margin: 0 0 1.25em; } .post__body h2 { font-size: clamp(1.4rem,2.4vw,1.9rem); font-weight: 800; margin: 1.6em 0 .5em; } .post__body h3 { font-size: 1.2rem; font-weight: 800; margin: 1.4em 0 .4em; } .post__body ul { margin: 0 0 1.25em; padding-left: 1.3em; } .post__body li { font-size: 1.06rem; line-height: 1.7; margin-bottom: .5em; } .post__body a { color: var(--blue); } .post__lead { font-size: 1.2rem !important; line-height: 1.6 !important; color: var(--text-dim) !important; font-weight: 600; } .post-back { display: inline-flex; align-items: center; gap: 6px; color: var(--text-dim); font-weight: 700; text-decoration: none; margin-top: clamp(30px,4vw,50px); } .post-back:hover { color: var(--blue); } .post__body figure { margin: clamp(24px,3.5vw,40px) 0; } .post__body img { max-width: 100%; height: auto; border-radius: 2px; display: block; } .post__body figure img { width: 100%; } .post__body figcaption { margin-top: 10px; font-size: .9rem; color: var(--text-dim); text-align: center; } .post__body .imgph-fig { margin: clamp(24px,3.5vw,40px) 0; } .post__body .imgph { display: grid; place-items: center; aspect-ratio: 16/9; background: repeating-linear-gradient(45deg,#f1f1f3,#f1f1f3 14px,#eaeaef 14px,#eaeaef 28px); border: 1px dashed #c7c7cf; border-radius: 2px; color: #9a9aa4; font-weight: 800; text-align: center; padding: 20px; } .blog-cta__form { max-width: 460px; margin: 22px auto 0; } .blog-cta__msg { color: #cfcfd6; text-align: center; } .blog-cta__alt { margin: 16px 0 0; font-size: .92rem; color: #cfcfd6; } .blog-cta__alt a { color: #fff; text-decoration: underline; } .post__body blockquote { margin: clamp(20px,3vw,32px) 0; padding: 16px 20px; border-left: 4px solid var(--blue); background: rgba(20,140,200,.08); border-radius: 2px; } .post__body blockquote p { margin: 0; font-weight: 700; color: var(--text); } .about-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:clamp(18px,3vw,34px); margin:clamp(30px,5vw,56px) auto; max-width:900px; } .about-stat { text-align:center; } .about-stat b { display:block; font-size:clamp(2rem,4.5vw,3.1rem); font-weight:900; color:var(--blue); line-height:1; } .about-stat span { display:block; margin-top:10px; color:var(--text-dim); font-weight:600; font-size:.95rem; } .value-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:clamp(16px,2.5vw,26px); margin-top:clamp(24px,4vw,40px); } .value-card { border:1px solid var(--line); border-radius:2px; padding:clamp(22px,3vw,30px); background:var(--bg); } .value-card h3 { font-size:1.18rem; font-weight:800; margin:0 0 .5em; } .value-card p { color:var(--text-dim); line-height:1.6; margin:0; } .about-split { display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,60px); align-items:center; max-width:1040px; margin:clamp(30px,5vw,60px) auto 0; } .about-split__media { border-radius:2px; overflow:hidden; background:radial-gradient(120% 90% at 50% 10%,#26262b,#0a0a0b 65%); aspect-ratio:4/3; } .about-split__media img { width:100%; height:100%; object-fit:cover; } .about-split h2 { font-size:clamp(1.5rem,3vw,2.1rem); font-weight:800; margin:0 0 .6em; } .about-split p { color:var(--text-dim); line-height:1.7; margin:0 0 1em; } @media (max-width:760px){ .about-split { grid-template-columns:1fr; } } .timeline { position:relative; max-width:720px; margin:clamp(30px,5vw,52px) auto 0; padding:0 0 0 70px; list-style:none; --tl-fill:0%; } .timeline::before { content:""; position:absolute; left:29px; top:10px; bottom:10px; width:2px; background:var(--line); border-radius:2px; } .timeline::after { content:""; position:absolute; left:29px; top:10px; width:2px; height:var(--tl-fill); background:var(--blue); border-radius:2px; transition:height .15s ease-out; } .timeline__item { position:relative; margin-bottom:clamp(24px,4vw,42px); opacity:0; transform:translateY(26px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); } .timeline__item:last-child { margin-bottom:0; } .timeline__item.is-visible { opacity:1; transform:none; } .timeline__item::before { content:""; position:absolute; left:-48px; top:8px; width:16px; height:16px; border-radius:50%; background:var(--bg); border:3px solid var(--line); transition:border-color .45s ease, box-shadow .45s ease; z-index:1; } .timeline__item.is-visible::before { border-color:var(--blue); box-shadow:0 0 0 5px rgba(20,149,212,.16); } .timeline__card { background:var(--bg); border:1px solid var(--line); border-radius:2px; padding:clamp(18px,2.6vw,26px) clamp(20px,3vw,28px); } .timeline__year { display:inline-block; font-size:clamp(1.5rem,3vw,2.1rem); font-weight:900; color:var(--blue); line-height:1; margin-bottom:.3em; } .timeline__item h3 { font-size:1.18rem; font-weight:800; margin:0 0 .4em; } .timeline__item p { color:var(--text-dim); line-height:1.7; margin:0; } @media (prefers-reduced-motion: reduce){ .timeline__item { opacity:1; transform:none; transition:none; } } .team-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:clamp(16px,2.5vw,26px); margin-top:clamp(28px,4vw,44px); } .team-card { border:1px solid var(--line); border-radius:2px; overflow:hidden; background:var(--bg); transition:transform .18s ease, box-shadow .18s ease; } .team-card:hover { transform:translateY(-4px); box-shadow:0 14px 30px rgba(0,0,0,.10); } .team-card__photo { aspect-ratio:1/1; display:grid; place-items:center; background:var(--bg-alt); color:var(--text-dim); } .team-card__photo img { width:100%; height:100%; object-fit:cover; } .team-card__photo svg { width:46px; height:46px; opacity:.4; } .team-card__body { padding:15px 18px 18px; } .team-card__name { font-size:1.08rem; font-weight:800; margin:0 0 3px; } .team-card__role { color:var(--text-dim); font-weight:600; font-size:.9rem; margin:0; } .timeline__toggle { display:inline-flex; align-items:center; justify-content:center; margin-top:10px; background:none; border:0; padding:4px; color:var(--blue); cursor:pointer; } .timeline__toggle:hover { color:#1180ba; transform:translateY(1px); } .timeline__chev { transition:transform .3s ease; } .timeline__card.is-open .timeline__chev { transform:rotate(180deg); } .timeline__media { display:grid; grid-template-rows:0fr; opacity:0; margin-top:0; transition:grid-template-rows .42s ease, opacity .3s ease, margin-top .42s ease; } .timeline__media > div { overflow:hidden; min-height:0; } .timeline__card.is-open .timeline__media { grid-template-rows:1fr; opacity:1; margin-top:14px; } .timeline__media img { width:100%; border-radius:2px; display:block; } .timeline__ph { margin:0; aspect-ratio:16/9; display:grid; place-items:center; text-align:center; padding:16px; border:1px dashed var(--line); border-radius:2px; background:var(--bg-alt); color:var(--text-dim); font-weight:700; font-size:.9rem; } @media (prefers-reduced-motion: reduce){ .timeline__media, .timeline__chev { transition:none; } } .band-dark { background:#0d0d11; --bg:#17171d; --bg-alt:#202028; --text:#f8f8f9; --text-dim:#b6b6c0; --line:rgba(255,255,255,.14); color:#f8f8f9; } .band-dark .page-title, .band-dark h1, .band-dark h2, .band-dark h3 { color:#f8f8f9; } .band-dark .section__text, .band-dark .section__text--lead, .band-dark p { color:#c7c7d0; } .band-dark .pill-link { color:#f8f8f9; border-color:rgba(255,255,255,.45); } .band-dark .pill-link--primary { color:#f8f8f9; } .about-hero-video { max-width:1000px; margin:clamp(28px,4vw,48px) auto 0; border-radius:2px; overflow:hidden; background:#000; aspect-ratio:16/9; } .about-hero-video video { width:100%; height:100%; display:block; object-fit:cover; background:#000; } .ytlite { position:relative; display:block; width:100%; height:100%; padding:0; border:0; background:#000; cursor:pointer; overflow:hidden; } .ytlite__poster { width:100%; height:100%; object-fit:cover; display:block; } .ytlite::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.25)); opacity:0; transition:opacity .25s ease; } .ytlite:hover::after { opacity:1; } .ytlite__play { position:absolute; inset:0; margin:auto; width:72px; height:50px; z-index:1; } .ytlite__play svg { width:100%; height:100%; filter:drop-shadow(0 3px 8px rgba(0,0,0,.45)); transition:transform .2s ease; } .ytlite__play .ytp-bg { opacity:.82; transition:opacity .2s ease; } .ytlite:hover .ytlite__play svg { transform:scale(1.08); } .ytlite:hover .ytlite__play .ytp-bg { opacity:1; } .ytlite__iframe { width:100%; height:100%; display:block; border:0; } .reveal { opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); } .reveal.is-in { opacity:1; transform:none; } @media (prefers-reduced-motion: reduce){ .reveal { opacity:1; transform:none; transition:none; } } .leitsatz-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,4vw,60px); max-width:1000px; margin:clamp(28px,4vw,48px) auto 0; } .leitsatz { position:relative; padding-left:22px; } .leitsatz::before { content:""; position:absolute; left:0; top:5px; bottom:5px; width:4px; border-radius:2px; background:var(--blue); } .leitsatz__statement { font-size:clamp(1.35rem,2.5vw,1.9rem); font-weight:800; line-height:1.25; margin:0 0 .55em; color:var(--text); } .leitsatz__ctx { color:var(--text-dim); line-height:1.65; margin:0; font-size:1.02rem; } .feature-row { display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(12px,1.6vw,20px); margin-top:clamp(34px,5vw,58px); } .feature-chip { display:inline-flex; align-items:center; gap:11px; padding:12px 20px; border:1px solid var(--line); border-radius:2px; font-weight:700; background:var(--bg); } .feature-chip__ic { display:inline-flex; color:var(--blue); flex:0 0 auto; } .feature-chip__ic svg { width:22px; height:22px; } @media (max-width:720px){ .leitsatz-grid { grid-template-columns:1fr; } .feature-row { display:flex; flex-direction:column; align-items:stretch; gap:12px; } .feature-chip { width:100%; justify-content:center; text-align:center; padding:15px 14px; } .timeline { padding-left:34px; } .timeline::before, .timeline::after { left:11px; } .timeline__item::before { left:-30px; } .timeline__card { padding-left:15px; padding-right:15px; } } .leitsatz--anim::before { transform:scaleY(0); transform-origin:top; transition:transform .55s cubic-bezier(.22,.61,.36,1); } .leitsatz--anim.is-in::before { transform:scaleY(1); } .leitsatz--anim .lw { display:inline-block; overflow:hidden; vertical-align:bottom; padding-bottom:.12em; margin-bottom:-.12em; } .leitsatz--anim .lw__i { display:inline-block; transform:translateY(115%); opacity:0; transition:transform .6s cubic-bezier(.22,.61,.36,1), opacity .5s ease; } .leitsatz--anim.is-in .lw__i { transform:none; opacity:1; } .leitsatz--anim .leitsatz__ctx { opacity:0; transform:translateY(12px); transition:opacity .6s ease, transform .6s ease; } .leitsatz--anim.is-in .leitsatz__ctx { opacity:1; transform:none; transition-delay:.4s; } @media (prefers-reduced-motion: reduce){ .leitsatz--anim::before, .leitsatz--anim .lw__i, .leitsatz--anim .leitsatz__ctx { transform:none; opacity:1; transition:none; } } .dark-hero main { margin-top: -65px; } .dark-hero main > section:first-child { padding-top: clamp(96px, 11vw, 150px); } .site-header.over-dark { --bg-header: #1d1d1f; --bg: #17171d; --bg-alt: #26262b; --bg-dark: #202028; --text: #f5f5f7; --text-dim: #b6b6c0; --line: rgba(255, 255, 255, 0.14); background: rgba(29, 29, 31, 0.85); border-bottom-color: transparent !important; box-shadow: none; transition: background 0.3s var(--ease), border-color 0.3s var(--ease); } .site-header.over-dark .nav__shop { color: #f5f5f7 !important; } .site-header.over-dark .logo__img { filter: brightness(0) invert(1); } .section__text, .section__text--lead, .split__text p, .split p, .showcase__content p, .uspitem p, .usprow__body p, .introlead__rest, .motor__text, .coolsw__desc, .airgrille__lead, .featrows__intro, .featrow__text p, .grille-card__desc, .faq-a, .legal p, .legal li, .blog-hero__lead, .blog-feature__ex, .ovx__tag, .acccard p, .trust-stat, .freebie__desc { font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); line-height: 1.65; } .fhero__title, .blog-hero__title, .page-title { font-size: clamp(2.5rem, 6vw, 3.75rem); line-height: 1.05; } .section__title, .section__heading, .introlead__big, .showcase__title, .uspscroll__h, .featrows__title, .airgrille__title, .faq-cat__title, .atile__title, .cta-banner__content h2 { font-size: clamp(1.75rem, 4vw, 2.6rem); line-height: 1.15; } .featrow__title, .coolsw__name, .grille-card__name, .spec-block__title, .usprow__body h3, .uspitem h3, .barchart__title, .acccard__name { font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.25; } .section__subtitle, .fhero__sub, .showcase__sub, .uspscroll__sub, .hero__sub, .atile__sub { font-size: clamp(1.125rem, 1.7vw, 1.3rem); line-height: 1.4; } .pagetools { position:fixed; right:clamp(16px,3vw,28px); bottom:clamp(16px,3vw,28px); z-index:90; display:flex; flex-direction:column; gap:12px; align-items:center; opacity:0; visibility:hidden; transform:translateY(12px); transition:opacity .25s ease, transform .25s ease, visibility .25s ease; } .pagetools.is-shown { opacity:1; visibility:visible; transform:none; } @media (prefers-reduced-motion: reduce){ .pagetools { transition:none; } } .pagetools__btn { width:52px; height:52px; border-radius:50%; border:0; display:grid; place-items:center; cursor:pointer; box-shadow:0 6px 18px rgba(0,0,0,.18); transition:transform .15s ease, box-shadow .15s ease; } .pagetools__btn:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.26); } .pagetools__btn--up { background:#fff; color:#16161a; } .pagetools__btn--fb { background:var(--blue); color:#fff; } @media (max-width:560px){ .pagetools { gap:9px; right:14px; bottom:14px; } .pagetools__btn { width:40px; height:40px; } .pagetools__btn svg { width:18px; height:18px; } } .fbmodal { position:fixed; inset:0; z-index:210; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(0,0,0,.55); } .fbmodal[hidden] { display:none !important; } body.fbmodal-open { overflow:hidden; } .fbmodal__box { position:relative; width:min(420px,100%); background:var(--bg); color:var(--text); border:1px solid var(--line); border-radius:2px; padding:clamp(22px,4vw,32px); box-shadow:0 24px 70px rgba(0,0,0,.4); } .fbmodal__close { position:absolute; top:6px; right:12px; background:none; border:0; font-size:1.9rem; line-height:1; color:var(--text-dim); cursor:pointer; } .fbmodal__title { margin:0 0 16px; font-size:1.15rem; font-weight:800; color:var(--text); } .fbstars { display:flex; gap:6px; margin:0 0 14px; } .fbstar { background:none; border:0; font-size:2rem; line-height:1; color:rgba(150,150,160,.4); cursor:pointer; padding:0 2px; transition:color .1s ease, transform .1s ease; } .fbstar:hover { transform:scale(1.1); } .fbstar.is-on { color:#f5a623; } .fbmodal__text { width:100%; box-sizing:border-box; min-height:96px; max-height:260px; padding:12px 14px; border:1px solid var(--line); border-radius:2px; background:var(--bg-dark); color:var(--text); font:inherit; font-size:1rem; resize:vertical; } .fbmodal__text:focus { outline:none; border-color:var(--blue); } .fbmodal__hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; } .fbmodal__send { display:inline-flex; align-items:center; justify-content:center; margin-top:14px; padding:12px 22px; border:0; border-radius:2px; background:var(--blue); color:#fff; font:inherit; font-weight:800; cursor:pointer; transition:background .15s ease; } .fbmodal__send:hover { background:#1180ba; } .fbmodal__send:disabled { opacity:.6; cursor:default; } .fbmodal__msg { margin:10px 0 0; font-size:.92rem; color:var(--text-dim); }