/* ========================================================================== Devers — stylesheet Base layer: black / white / soft-gray bands, one accent, 120px section padding on desktop and 90px below. The Devers identity layer at the end of this file ("the measured zone") overrides the base components. No framework. No gradients outside the logo files. No glow. ========================================================================== */ /* ---------- Fonts (self-hosted, variable, SIL OFL 1.1) ---------- */ @font-face { font-family: 'Plus Jakarta Sans'; src: url('../fonts/PlusJakartaSans-var-latin.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Plus Jakarta Sans'; src: url('../fonts/PlusJakartaSans-var-latin-ext.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---------- Tokens ---------- */ :root { --black: #000; --white: #fff; --soft: #f2f2f2; --line: #e5e5e5; /* Accent: Devers blue, flat. To switch to the reference orange use --accent:#ff5500; --accent-hover:#ff9800; --on-accent:#000; --accent-text:#c94300; --accent-on-dark:#ff5500 */ --accent: #4b5eff; --on-accent: #fff; --accent-on-dark: #6676ff; --accent-text: #3b4ee6; --text: rgba(0, 0, 0, 0.68); --text-strong: #000; --light: rgba(255, 255, 255, 0.9); --light-soft: rgba(255, 255, 255, 0.68); --light-line: rgba(255, 255, 255, 0.1); --dark-line: rgba(0, 0, 0, 0.1); --font: 'Plus Jakarta Sans', 'Helvetica Neue', Arial, sans-serif; --ease: cubic-bezier(0, 0, 0.3642, 1); --header-h: 96px; --header-scrolled: rgba(0, 0, 0, 0.9); --logo-h: 28px; --gutter: 60px; --container: 1320px; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; } html.menu-open { overflow: hidden; } body { font-family: var(--font); font-size: 16px; line-height: 150%; font-weight: 400; color: var(--text); background: var(--white); overflow-x: hidden; overflow-x: clip; -webkit-font-smoothing: antialiased; } img, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; transition: 0.2s var(--ease); } a:hover { color: var(--accent-text); } :where(.hero, .dark-bg, .menu, .footer) a:hover { color: var(--accent-on-dark); } ul, ol { list-style: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------- Type ---------- */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-family: var(--font); color: var(--text-strong); font-weight: 800; line-height: 100%; letter-spacing: -0.01em; } h1, .h1 { font-size: 86px; } h2, .h2 { font-size: 68px; line-height: 110%; } h3, .h3 { font-size: 42px; line-height: 110%; } h4, .h4 { font-size: 28px; line-height: 120%; } h5, .h5 { font-size: 20px; line-height: 150%; font-weight: 800; letter-spacing: 0; } h6, .h6 { font-size: 18px; line-height: 150%; font-weight: 800; letter-spacing: 0; } p { margin: 0; } p + p { margin-top: 1em; } strong, b { font-weight: 800; color: var(--text-strong); } .light strong, .light b { color: var(--white); } .text-sm { font-size: 15px; } .text-lg { font-size: 18px; line-height: 170%; } .text-xl { font-size: 22px; line-height: 180%; } .upper { text-transform: uppercase; font-size: 12px; font-weight: 800; letter-spacing: 2px; } .label { text-transform: uppercase; font-size: 12px; font-weight: 600; letter-spacing: 2px; } .accent { color: var(--accent-text) !important; } .dark-bg .accent, .footer .accent, .hero .accent { color: var(--accent-on-dark) !important; } .muted { color: var(--light); } .light { color: var(--white) !important; } .light-soft { color: var(--light-soft); } .dark { color: var(--text-strong); } .dark-soft { color: var(--text); } .center { text-align: center; } .nowrap { white-space: nowrap; } @media (max-width: 1400px) { h1, .h1 { font-size: 74px; } } @media (max-width: 1200px) { h1, .h1 { font-size: 72px; } h2, .h2 { font-size: 56px; } h3, .h3 { font-size: 39px; } h4, .h4 { font-size: 26px; } } @media (max-width: 992px) { h1, .h1 { font-size: 58px; } h2, .h2 { font-size: 44px; } h3, .h3 { font-size: 36px; } h4, .h4 { font-size: 24px; } } @media (max-width: 768px) { body { font-size: 15px; } h1, .h1 { font-size: 40px; } h2, .h2 { font-size: 36px; } h3, .h3 { font-size: 30px; } h4, .h4 { font-size: 22px; } .text-xl { font-size: 20px; } } /* ---------- Layout ---------- */ section, footer, .hero { overflow-x: clip; } .container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 12px; } @media (max-width: 1400px) { .container { max-width: 1140px; } } @media (max-width: 1200px) { .container { max-width: 960px; } } @media (max-width: 992px) { .container { max-width: 720px; } } @media (max-width: 768px) { .container { max-width: 540px; } } @media (max-width: 576px) { .container { max-width: none; padding: 0 24px; } } .row { display: flex; flex-wrap: wrap; margin: 0 -12px; } .row > * { padding: 0 12px; width: 100%; min-width: 0; } .row.between { justify-content: space-between; } .row.middle { align-items: center; } .row.end { justify-content: flex-end; } .row.center-x { justify-content: center; } .row.g-0 { margin: 0; } .row.g-0 > * { padding: 0; } [class*="col-lg-"], [class*="col-md-"] { width: 100%; } @media (min-width: 769px) { .col-md-6 { width: 50%; } .col-md-4 { width: 33.3333%; } .col-md-3 { width: 25%; } } @media (min-width: 993px) { .col-lg-3 { width: 25%; } .col-lg-4 { width: 33.3333%; } .col-lg-5 { width: 41.6667%; } .col-lg-6 { width: 50%; } .col-lg-7 { width: 58.3333%; } .col-lg-8 { width: 66.6667%; } .col-lg-9 { width: 75%; } .col-lg-10 { width: 83.3333%; } .offset-lg-1 { margin-left: 8.3333%; } } /* Section rhythm */ .p-120-120 { padding-top: 120px; padding-bottom: 120px; } .p-120-90 { padding-top: 120px; padding-bottom: 90px; } .p-120-60 { padding-top: 120px; padding-bottom: 60px; } .p-120-30 { padding-top: 120px; padding-bottom: 30px; } .p-120-0 { padding-top: 120px; padding-bottom: 0; } .p-90-90 { padding-top: 90px; padding-bottom: 90px; } .p-90-120 { padding-top: 90px; padding-bottom: 120px; } .p-0-120 { padding-top: 0; padding-bottom: 120px; } .p-0-90 { padding-top: 0; padding-bottom: 90px; } .p-0-30 { padding-top: 0; padding-bottom: 30px; } .p-30-30 { padding-top: 30px; padding-bottom: 30px; } @media (max-width: 992px) { .p-120-120 { padding-top: 90px; padding-bottom: 90px; } .p-120-90 { padding-top: 90px; padding-bottom: 60px; } .p-120-60 { padding-top: 90px; padding-bottom: 30px; } .p-120-30 { padding-top: 90px; padding-bottom: 0; } .p-120-0 { padding-top: 90px; padding-bottom: 0; } .p-90-90 { padding-top: 60px; padding-bottom: 60px; } .p-90-120 { padding-top: 60px; padding-bottom: 90px; } .p-0-120 { padding-top: 0; padding-bottom: 90px; } .p-0-90 { padding-top: 0; padding-bottom: 60px; } .p-0-30 { padding: 0; } } .mb-5 { margin-bottom: 5px; } .mb-10 { margin-bottom: 10px; } .mb-15 { margin-bottom: 15px; } .mb-20 { margin-bottom: 20px; } .mb-30 { margin-bottom: 30px; } .mb-60 { margin-bottom: 60px; } .mb-90 { margin-bottom: 90px; } .mb-120 { margin-bottom: 120px; } @media (max-width: 992px) { .mb-120 { margin-bottom: 90px; } .mb-90 { margin-bottom: 60px; } } .mt-30 { margin-top: 30px; } .mt-60 { margin-top: 60px; } .dark-bg { background: var(--black); color: var(--light-soft); } .dark-bg h1, .dark-bg h2, .dark-bg h3, .dark-bg h4, .dark-bg h5, .dark-bg h6 { color: var(--white); } .soft-bg { background: var(--soft); } .adaptive-right { display: flex; justify-content: flex-end; width: 100%; } @media (max-width: 992px) { .adaptive-right { justify-content: flex-start; } } .vert-between { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } /* ---------- Reveal ---------- */ .up { opacity: 0; transform: translateY(40px) scale(0.98); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); transition-delay: var(--d, 0s); } .up.in { opacity: 1; transform: none; } html.no-js .up { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .up { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } .hero-content { animation: none; } } html.no-js .menu { position: static; height: auto; opacity: 1; visibility: visible; pointer-events: auto; } html.no-js .menu .main-menu { height: auto; padding: 30px 0; } html.no-js .menu-top, html.no-js .menu-btn { display: none; } html.no-js .header { position: absolute; background: var(--black); } html.no-js .header .logo { color: var(--white); } html.no-js .menu { padding-top: var(--header-h); } html.no-js .menu .main-menu { opacity: 1; transform: none; } html.no-js .menu-foot { position: static; padding-bottom: 30px; } [id] { scroll-margin-top: calc(var(--header-h) + 30px); } /* ---------- Buttons & links ---------- */ .btn { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; height: 70px; padding: 0 15px 0 50px; border: 0; border-radius: 70px; background: var(--accent); color: var(--on-accent); font-family: var(--font); font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; transition: 0.4s var(--ease); white-space: nowrap; } .btn span { white-space: nowrap; } .btn svg { margin-left: 30px; width: 40px; height: 40px; padding: 10px; border-radius: 50%; background: var(--black); color: var(--accent-on-dark); flex: none; transition: 0.4s var(--ease); } .btn:hover { background: var(--black); color: var(--white); } .btn:hover svg { background: var(--accent); color: var(--white); transform: scale(1.1); } .hero .btn:hover, .dark-bg .btn:hover { background: var(--white); color: var(--black); } .btn.icon { padding: 15px; } @media (max-width: 992px) { .btn { height: 60px; padding: 0 10px 0 40px; } .btn svg { margin-left: 25px; } } @media (max-width: 576px) { .btn { max-width: 100%; height: auto; min-height: 60px; padding-top: 10px; padding-bottom: 10px; box-sizing: border-box; } .btn span { white-space: normal; } .btn svg { flex: 0 0 auto; } } .btn.icon svg { margin: 0; } .btn.icon-sm { padding: 0; height: 40px; width: 40px; border-radius: 50%; background: var(--accent); } .btn.icon-sm svg { margin: 0; background: transparent; color: var(--on-accent); } .btn.icon-sm:hover { background: var(--white); } .btn + .btn { margin-left: 30px; } .btn-space { margin-right: 30px; } .link { cursor: pointer; display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-transform: uppercase; letter-spacing: 2px; font-size: 12px; } .link svg { margin-left: 15px; width: 40px; height: 40px; padding: 10px; border-radius: 50%; background: var(--light-line); color: currentColor; transition: 0.4s var(--ease); } .link.dark { color: var(--text-strong); } .link.dark svg { background: var(--dark-line); } .link:hover svg { background: var(--accent); color: var(--on-accent); transform: scale(1.1); } .link.light { color: var(--white) !important; } /* ---------- Suptitle with hairline ---------- */ .suptitle { position: relative; display: block; margin-bottom: 60px; font-size: 16px; } .suptitle::before { content: ""; position: absolute; right: calc(100% + 30px); top: 12px; width: 600px; height: 1px; background: var(--white); opacity: 0.2; } .suptitle.right { text-align: right; } .suptitle.right::before { right: auto; left: calc(100% + 30px); } .suptitle.on-light::before { background: var(--black); opacity: 0.1; } @media (max-width: 768px) { .suptitle.right { text-align: center; } .suptitle.right::before { display: none; } } /* ---------- Header ---------- */ .header { position: fixed; top: 0; left: 0; width: 100%; height: var(--header-h); z-index: 50; pointer-events: none; background: transparent; transition: background-color 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease; } .header-inner { height: 100%; display: flex; justify-content: space-between; align-items: center; padding: 0 var(--gutter); pointer-events: all; } .header.is-scrolled { background: var(--header-scrolled); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08); } html.menu-open .header { opacity: 0; visibility: hidden; } .logo { display: inline-flex; line-height: 0; color: var(--accent); transition: color 0.3s ease; } .logo svg { display: block; height: var(--logo-h); width: calc(var(--logo-h) * 4.2333); max-width: none; } .logo:hover { color: var(--accent); } .header.on-dark .logo, .header.is-scrolled .logo, .header.on-dark .logo:hover, .header.is-scrolled .logo:hover, .menu-top .logo, .menu-top .logo:hover, .footer .logo, .footer .logo:hover { color: var(--white); } .header .menu-btn span, .header .menu-btn span::before, .header .menu-btn span::after { background: var(--black); } .header.on-dark .menu-btn span, .header.on-dark .menu-btn span::before, .header.on-dark .menu-btn span::after, .header.is-scrolled .menu-btn span, .header.is-scrolled .menu-btn span::before, .header.is-scrolled .menu-btn span::after { background: var(--white); } .menu-btn { pointer-events: all; height: 44px; width: 44px; margin-right: -8px; cursor: pointer; display: flex; justify-content: center; align-items: center; transition: transform 0.4s var(--ease), opacity 0.4s var(--ease), background-color 0.4s var(--ease); } .menu-btn span { position: relative; display: block; width: 28px; height: 2.5px; background: var(--black); transition: inherit; } .menu-btn span::before, .menu-btn span::after { content: ""; position: absolute; left: 0; display: block; width: 28px; height: 2.5px; background: inherit; transition: inherit; } .menu-btn span::before { top: -9px; } .menu-btn span::after { width: 18px; top: 9px; } .menu-btn.is-active span { transform: rotate(45deg); background: var(--white); } .menu-btn.is-active span::before { transform: translateY(9px) rotate(-90deg); } .menu-btn.is-active span::after { opacity: 0; width: 24px; transform: translateY(-9px) rotate(-90deg); } @media (max-width: 1200px) { :root { --gutter: 30px; --header-h: 90px; } } @media (max-width: 576px) { :root { --gutter: 24px; } } @media (max-width: 768px) { :root { --logo-h: 24px; } } /* ---------- Fullscreen menu ---------- */ .menu { position: fixed; inset: 0; z-index: 40; width: 100%; height: 100vh; height: 100dvh; overflow-y: auto; -webkit-overflow-scrolling: touch; background: var(--black); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.4s var(--ease), visibility 0s 0.4s; } @media (max-height: 520px) { .main-menu { align-items: flex-start; padding: calc(var(--header-h) + 16px) 0 110px; height: auto; min-height: 100%; } .main-menu li { margin-bottom: 16px; } } .menu.is-open { opacity: 1; visibility: visible; pointer-events: all; transition-delay: 0s; } .menu-top { position: absolute; top: 0; left: 0; width: 100%; height: var(--header-h); display: flex; justify-content: space-between; align-items: center; padding: 0 var(--gutter); z-index: 2; } .menu-top .menu-btn span, .menu-top .menu-btn span::before, .menu-top .menu-btn span::after { background: var(--white); } .main-menu { height: 100%; display: flex; align-items: center; justify-content: center; transform: translateY(30px); opacity: 0; transition: 0.4s var(--ease); } .menu.is-open .main-menu { transform: none; opacity: 1; transition-delay: 0.3s; } .main-menu ul { display: flex; flex-direction: column; align-items: center; } .main-menu li { margin-bottom: 40px; } .main-menu li:last-child { margin-bottom: 0; } .main-menu li a { display: flex; justify-content: center; font-weight: 600; color: rgba(255, 255, 255, 0.8); font-size: 34px; transition: 0.4s var(--ease); } .main-menu li a:hover { color: var(--white); } .main-menu li.is-active > a { color: var(--accent-on-dark); } .menu-foot { position: absolute; bottom: 40px; left: 0; width: 100%; display: flex; justify-content: space-between; padding: 0 var(--gutter); color: var(--light-soft); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; } .menu-foot a:hover { color: var(--white); } @media (max-width: 992px) { .main-menu li a { font-size: 26px; } .main-menu li { margin-bottom: 28px; } .menu-foot { flex-direction: column; gap: 10px; bottom: 30px; } } /* ---------- Hero ---------- */ .hero { position: relative; min-height: 100vh; min-height: 100svh; background: var(--black); overflow: hidden; display: flex; align-items: flex-end; } .hero-inner { position: relative; z-index: 2; width: 100%; } .hero-art { display: none; } @media (min-width: 993px) { .hero-art { display: block; position: absolute; z-index: 0; pointer-events: none; top: calc(var(--header-h) + 10px); right: 0; width: min(58vw, 1000px); } .hero-art img, .hero-art video { display: block; width: 100%; height: auto; opacity: 0; animation: hero-art-in 1.2s 0.2s ease forwards; background: #000; } } @keyframes hero-art-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .hero-art img, .hero-art video { animation: none; opacity: 1; } } html.no-js .hero-art img, html.no-js .hero-art video { opacity: 1; animation: none; } .hero-content { width: 100%; padding-bottom: 120px; position: relative; animation: hero-appear 0.6s ease forwards; } .hero h1 { color: var(--light); margin-bottom: 30px; } .hero p { color: var(--light-soft); } @keyframes hero-appear { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } } @media (max-width: 992px) { .hero-content { padding-bottom: 90px; } } /* ---------- Inner page banner ---------- */ .inner-banner { padding-top: calc(var(--header-h) + 150px); } @media (max-width: 1200px) { .inner-banner { padding-top: calc(var(--header-h) + 120px); } } @media (max-width: 768px) { .inner-banner { padding-top: calc(var(--header-h) + 60px); } } .inner-banner h1 { margin-bottom: 30px; } .inner-banner .lead { max-width: 560px; } .breadcrumbs { display: inline-flex; align-items: center; position: relative; margin-bottom: 30px; } .breadcrumbs::before { content: ""; position: absolute; right: calc(100% + 30px); top: 10px; width: 100vw; height: 1px; background: var(--dark-line); } .breadcrumbs li { display: inline-flex; align-items: center; } .breadcrumbs li::after { content: "/"; margin: 0 15px; color: var(--text-strong); } .breadcrumbs li:last-child::after { display: none; } .breadcrumbs li a, .breadcrumbs li span { color: var(--text-strong); text-transform: uppercase; letter-spacing: 2px; font-weight: 600; font-size: 12px; white-space: nowrap; } .breadcrumbs li:last-child span { opacity: 0.6; } .breadcrumbs li a:hover { color: var(--accent-text); } /* ---------- Product tiles (dark band) ---------- */ .tile-img:has(img) { height: 240px; margin-bottom: 18px; } /* ---------- CTA band ---------- */ .cta .center h2 { max-width: 820px; margin: 0 auto 60px; text-wrap: balance; } .cta p.lead { max-width: 560px; margin: 0 auto 60px; } /* ---------- Product page ---------- */ .figure { margin: 0; } .figure .frame { position: relative; overflow: hidden; padding-bottom: 72%; background: var(--soft); border: 1px solid var(--line); } .figure .frame img, .figure .frame svg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .figure figcaption { text-align: center; margin-top: 15px; font-weight: 800; color: var(--text-strong); font-size: 14px; } .benefits li { position: relative; padding-left: 20px; margin-bottom: 12px; } .benefits li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .benefits li strong { color: var(--text-strong); } .spec-list li { display: flex; justify-content: space-between; gap: 24px; padding: 15px 0; border-bottom: 1px solid var(--dark-line); font-size: 15px; } .spec-list li span:first-child { color: var(--text-strong); font-weight: 600; text-transform: uppercase; letter-spacing: 2px; font-size: 12px; } .spec-list li span:last-child { text-align: right; } .dark-bg .spec-list li { border-color: var(--light-line); } .dark-bg .spec-list li span:first-child { color: var(--light); } /* Phase timeline (deployment) */ .phases { border-top: 1px solid var(--line); } .phase { display: grid; grid-template-columns: 200px 1fr 1fr; gap: 24px; padding: 40px 0; border-bottom: 1px solid var(--line); } .phase .dur { font-size: 34px; font-weight: 800; color: var(--text-strong); line-height: 100%; letter-spacing: -0.01em; white-space: nowrap; } .phase .dur small { display: block; font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--text); margin-top: 10px; } .phase h5 { margin-bottom: 10px; } .phase ul li { font-size: 12px; text-transform: uppercase; letter-spacing: 2px; font-weight: 600; color: var(--text-strong); padding: 10px 0; border-bottom: 1px solid var(--dark-line); } .phase ul li:last-child { border-bottom: 0; } @media (max-width: 992px) { .phase { grid-template-columns: 1fr; gap: 16px; } .phase .dur { font-size: 28px; } } /* ---------- Story timeline (about) ---------- */ .story li { display: grid; grid-template-columns: 160px 1fr; gap: 30px; padding: 30px 0; border-bottom: 1px solid var(--line); } .story li:first-child { border-top: 1px solid var(--line); } .story .when { font-size: 12px; text-transform: uppercase; letter-spacing: 2px; font-weight: 800; color: var(--accent-text); padding-top: 6px; } .story h5 { margin-bottom: 8px; } @media (max-width: 768px) { .story li { grid-template-columns: 1fr; gap: 10px; } } /* ---------- Forms ---------- */ input, textarea, select { position: relative; height: 70px; padding: 0 30px; width: 100%; font-size: 12px; letter-spacing: 2px; font-weight: 600; font-family: var(--font); color: var(--text-strong); border: 0; border-bottom: 1px solid rgba(0, 0, 0, 0.45); border-radius: 0; background: transparent; margin-bottom: 30px; transition: border-color 0.3s; } input:focus, textarea:focus, select:focus { outline: none; border-bottom-color: var(--accent); } input::placeholder, textarea::placeholder { font-size: 12px; text-transform: uppercase; letter-spacing: 2px; font-weight: 600; color: rgba(0, 0, 0, 0.62); } textarea { padding: 25px 30px; height: 200px; resize: none; } /* ---------- Footer ---------- */ .footer { background: var(--black); color: var(--light-soft); } .footer .logo { --logo-h: 40px; margin-bottom: 30px; } .footer-menu { margin-bottom: 120px; } .footer-menu li { margin-bottom: 30px; } .footer-menu li a { display: inline-block; font-weight: 600; font-size: 28px; color: var(--light); transition: 0.4s var(--ease); } .footer-menu li a:hover { transform: translateX(10px); color: var(--accent-on-dark); } .footer-menu li.is-active a { color: var(--accent-on-dark); } .footer-menu li.is-active a:hover { transform: none; } .footer h6 { color: var(--light); margin-bottom: 30px; } .footer p { color: var(--light-soft); } .footer a.plain { color: var(--light); } .footer a.plain:hover { color: var(--accent-on-dark); } .footer .social a { display: inline-flex; align-items: center; gap: 12px; color: var(--light); } .footer .social a svg { width: 18px; height: 18px; } .footer .social a:hover { color: var(--accent-on-dark); } @media (max-width: 992px) { .footer-menu { margin-bottom: 60px; } } @media (max-width: 768px) { .footer-menu li a { font-size: 22px; } .footer .logo { --logo-h: 32px; } } /* ---------- Misc ---------- */ .hr { height: 1px; background: var(--line); border: 0; } .dark-bg .hr { background: var(--light-line); } .lead { font-size: 16px; } .inner-banner .lead { font-size: 18px; line-height: 170%; } .img-fluid { width: 100%; height: auto; } .err-page { min-height: 100vh; display: flex; align-items: center; } /* Lists on dark bands */ .dark-bg .benefits li strong { color: var(--white); } .dark-bg .benefits li::before { background: var(--accent); } .dark-bg .benefits li { color: var(--light-soft); } /* ---------- Menu button: shorter lines below 992px ---------- */ @media (max-width: 992px) { .menu-btn span, .menu-btn span::before { width: 24px; } .menu-btn span::after { width: 16px; } } /* ---------- Acceptance clause, two-up figures, gated slots ---------- */ [data-stage][hidden] { display: none !important; } @media (max-width: 576px) { .spec-list li { flex-wrap: wrap; gap: 4px 24px; padding: 12px 0; } .spec-list li span:last-child { text-align: left; width: 100%; } } .skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--black); color: var(--white); padding: 12px 20px; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; } .skip:focus { top: 12px; } .skip:hover { color: var(--white); } ::selection { background: var(--accent); color: #fff; } .names-row { display: flex; flex-wrap: wrap; gap: 12px 40px; } .names-row li { font-size: 18px; font-weight: 600; color: var(--text-strong); } /* ---------- Pilot block (Stage 0 occupant of the counter slot) ---------- */ .pilot-form input { margin-bottom: 15px; } .pilot-form .btn { margin-top: 15px; } .pilot-form .text-sm { margin-top: 20px; } .p-60-120 { padding-top: 60px; padding-bottom: 120px; } @media (max-width: 992px) { .p-60-120 { padding-top: 30px; padding-bottom: 90px; } } /* ---------- Select ---------- */ select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 30px center; text-transform: uppercase; cursor: pointer; } select:invalid { color: rgba(0, 0, 0, 0.62); } select option { text-transform: none; color: #000; } /* ---------- Footer legal line ---------- */ .footer .legal { color: var(--light-soft); font-size: 15px; } .footer .copyright { text-align: right; } @media (max-width: 992px) { .footer .copyright { text-align: left; } } /* ---------- Plans on phones: the whole plan at the screen's width ---------- */ @media (max-width: 576px) { .figure .frame { padding-bottom: 0; overflow: hidden; } .figure .frame img { position: static; width: 100%; max-width: 100%; height: auto; display: block; } } /* ---------- Form fallback notice, wide spec tables ---------- */ .form-fallback { padding: 20px 24px; border: 1px solid var(--line); margin-top: 20px; font-size: 15px; } .pilot-form .form-fallback { margin-top: 20px; } /* ---------- Mobile refinements ---------- */ .pilot h2 { font-size: 56px; } @media (max-width: 992px) { .pilot h2 { font-size: 44px; } } @media (max-width: 768px) { .pilot h2 { font-size: 36px; } } @media (max-width: 768px) { input, textarea, select { font-size: 16px; letter-spacing: 1px; } select { text-transform: none; } .suptitle { margin-bottom: 30px; } .cta .center h2, .cta p.lead { margin-bottom: 30px; } .cta .mt-60 { margin-top: 30px; } .footer-menu li { margin-bottom: 16px; } .footer-menu { margin-bottom: 40px; } .footer .mb-60 { margin-bottom: 40px; } } @media (max-width: 576px) { .breadcrumbs { display: flex; flex-wrap: wrap; row-gap: 8px; } .breadcrumbs li a, .breadcrumbs li span { white-space: normal; letter-spacing: 1.5px; } .breadcrumbs li::after { margin: 0 10px; } .tile-img:has(img) { height: 200px; } } .social:empty { display: none; margin: 0; } /* ---------- Language toggle ---------- */ .header-right { display: flex; align-items: center; gap: 28px; pointer-events: all; } @media (max-width: 992px) { .menu-foot { align-items: flex-start; } } /* ========================================================================== Devers identity layer: "the measured zone" Appended after every base rule: it wins on source order at equal specificity. It changes no content or behaviour. Its vocabulary comes from Devers' own renders: - the zone square: the rounded measured pad on the floor of every render. Outlined = a zone; filled = the zone being measured, or the current page. - the label voice: the renders' printed tags (Plus Jakarta Sans 600 capitals, wide tracking), only for short wayfinding and measured values. - corner marks only ever frame a camera image: the plan figures and, on hover or keyboard focus, the product tile models. - square, quiet controls: no pills, no discs, no rings. Corner marks are a border clipped to its four corners, never a gradient. ========================================================================== */ /* ---------- Tokens ---------- */ :root { --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* a lens settling; replaces the reference easing token */ --radius: 2px; /* the only corner radius in the UI: the zone pad's */ --zone: 10px; /* zone square */ --hair: 1px; /* stroke of every square and box */ --box: 28px; /* every numbered or icon box */ --vf-w: 2px; /* corner-mark stroke */ --track-label: 0.2em; /* label voice */ --track-tag: 0.3em; /* zone tags: the renders' own tracking */ --cw: 1320px; /* content width: mirrors .container, so the header and menu align with the page */ --cpad: 12px; } @media (max-width: 1400px) { :root { --cw: 1140px; } } @media (max-width: 1200px) { :root { --cw: 960px; } } @media (max-width: 992px) { :root { --cw: 720px; } } @media (max-width: 768px) { :root { --cw: 540px; } } @media (max-width: 576px) { :root { --cw: 100%; --cpad: 24px; } } /* ---------- Corner marks: a border clipped to its four corners ---------- Set `color` (mark colour) and --vf-a (arm length) on the element. The notch is 1px deeper than the stroke, so sub-pixel boxes show no line between the corners. */ .figure .frame::after { content: ""; position: absolute; pointer-events: none; box-sizing: border-box; --vf-a: 24px; --vf-n: calc(var(--vf-w) + 1px); background: none; border: var(--vf-w) solid currentColor; clip-path: polygon(0 0, var(--vf-a) 0, var(--vf-a) var(--vf-n), calc(100% - var(--vf-a)) var(--vf-n), calc(100% - var(--vf-a)) 0, 100% 0, 100% var(--vf-a), calc(100% - var(--vf-n)) var(--vf-a), calc(100% - var(--vf-n)) calc(100% - var(--vf-a)), 100% calc(100% - var(--vf-a)), 100% 100%, calc(100% - var(--vf-a)) 100%, calc(100% - var(--vf-a)) calc(100% - var(--vf-n)), var(--vf-a) calc(100% - var(--vf-n)), var(--vf-a) 100%, 0 100%, 0 calc(100% - var(--vf-a)), var(--vf-n) calc(100% - var(--vf-a)), var(--vf-n) var(--vf-a), 0 var(--vf-a)); } /* ========================================================================== Type: five steps (76 hero / 64 page title / 48 section / 28 row head / 20 item), one weight (600) for every heading. Quieter than the reference's 800 voice. ========================================================================== */ h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 600; } h1, h2, .h1, .h2 { letter-spacing: -0.025em; } h3, h4, .h3, .h4 { letter-spacing: -0.015em; } h5, h6, .h5, .h6 { letter-spacing: 0; } h1, .h1 { font-size: 76px; } h2, .h2, .container > h2.h3 { font-size: 48px; line-height: 110%; } /* a section heading that stands alone above full-width content */ h3, .h3, h4, .h4 { font-size: 28px; line-height: 120%; } h5, .h5, h6, .h6 { font-size: 20px; line-height: 140%; } strong, b { font-weight: 700; } .phase .dur { font-size: 28px; font-weight: 600; letter-spacing: -0.015em; } .pilot h2, .cta .center h2 { font-size: 48px; } .inner-banner h1, .err-page h1 { font-size: 64px; line-height: 110%; text-wrap: balance; } /* 110%: the AZ İ dot clears the line above */ @media (max-width: 1200px) { h1, .h1 { font-size: 64px; } .inner-banner h1, .err-page h1 { font-size: 56px; } } @media (max-width: 992px) { h1, .h1 { font-size: 52px; } .inner-banner h1, .err-page h1 { font-size: 48px; } h2, .h2, .container > h2.h3, .pilot h2, .cta .center h2 { font-size: 40px; } } @media (max-width: 768px) { h1, .h1 { font-size: 40px; } .inner-banner h1, .err-page h1 { font-size: 36px; } h2, .h2, .container > h2.h3, .pilot h2, .cta .center h2 { font-size: 32px; } h3, .h3, h4, .h4, .phase .dur { font-size: 24px; } h5, .h5, h6, .h6 { font-size: 18px; } } @media (max-width: 360px) { /* long AZ words ("Qiymətləndirmədən") fit a 320px screen */ h2, .h2, .container > h2.h3, .pilot h2, .cta .center h2 { font-size: 28px; } } h1, h2, h3, h4, .h1, .h2, .h3, .h4 { overflow-wrap: break-word; } /* ---------- Motion: a short rise with no scale; reduced motion is static ---------- */ .up { transform: translateY(16px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); transition-delay: var(--d, 0s); } @media (prefers-reduced-motion: reduce) { .up { transform: none; transition: none; } } /* ---------- Rhythm: tighter bands; the dark product band opens a chapter ---------- */ .p-120-120 { padding-top: 104px; padding-bottom: 104px; } @media (max-width: 992px) { .p-120-120 { padding-top: 72px; padding-bottom: 72px; } } /* ========================================================================== Label voice: the renders' printed tags. Only short wayfinding and measured values (breadcrumb, language, eyebrows, captions, spec keys, dates, phases). Everything longer reads in sentence case. ========================================================================== */ .upper, .breadcrumbs li a, .breadcrumbs li span, .spec-list li span:first-child, .phase .dur small, .story .when { font-family: var(--font); font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; } .link, .label, .skip, .phase ul li, .menu-foot { font-family: var(--font); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; } .menu-foot a[href^="mailto:"] { text-transform: none; } /* an address is never localised (AZ i → İ) */ .suptitle { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 40px; font-size: 11px; font-weight: 600; letter-spacing: var(--track-tag); text-transform: uppercase; line-height: 1.4; } .suptitle::before, .suptitle.right::before, .suptitle.on-light::before { position: static; display: block; flex: none; content: ""; width: var(--zone); height: var(--zone); border: var(--hair) solid var(--accent); border-radius: var(--radius); background: none; opacity: 1; } .dark-bg .suptitle::before { border-color: var(--accent-on-dark); } .suptitle.right { text-align: left; } @media (max-width: 768px) { .suptitle.right { text-align: left; } .suptitle.right::before { display: block; } .suptitle { margin-bottom: 24px; } } /* ========================================================================== Header: aligned with the content edge; once scrolled it follows the ground (white on white pages, black over dark bands). No scroll-progress bar. ========================================================================== */ .header-inner { max-width: var(--cw); margin: 0 auto; padding: 0 var(--cpad); } .menu-top { left: 0; right: 0; width: auto; max-width: var(--cw); margin: 0 auto; padding: 0 var(--cpad); } .header.is-scrolled { background: var(--black); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.12); } .header.is-scrolled:not(.on-dark) { background: var(--white); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08); } .header.is-scrolled:not(.on-dark) .logo, .header.is-scrolled:not(.on-dark) .logo:hover { color: var(--accent); } .header.is-scrolled:not(.on-dark) .menu-btn span::before, .header.is-scrolled:not(.on-dark) .menu-btn span::after { background: var(--black); } /* ========================================================================== Hero: the model stands on the floor of the screen and the title block is centred on the same height, so the two line up. Portrait phones and tablets show the model in flow above the text. ========================================================================== */ @media (min-width: 993px) { .hero { align-items: center; } .hero-content { padding: var(--header-h) 0 0; } .hero-art { top: var(--header-h); bottom: 24px; display: flex; flex-direction: column; justify-content: center; } } /* ========================================================================== Controls: a square button (darker fill and an arrow nudge on hover), boxed fields, a square link arrow ========================================================================== */ .btn { position: relative; height: 56px; padding: 0 0 0 24px; border-radius: var(--radius); font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; } .btn svg { width: 56px; height: 56px; padding: 19px; margin-left: 24px; border-radius: 0; background: transparent; color: currentColor; border-left: var(--hair) solid rgba(255, 255, 255, 0.3); } .btn svg use { transition: transform 0.4s var(--ease); } .btn:hover, .hero .btn:hover, .dark-bg .btn:hover { background: var(--accent-text); color: var(--white); } .btn:hover svg { background: transparent; color: var(--white); transform: none; } .btn:hover svg use { transform: translateX(3px); } @media (max-width: 992px) { .btn { height: 52px; padding: 0 0 0 20px; } .btn svg { width: 52px; height: 52px; padding: 17px; margin-left: 20px; } } @media (max-width: 576px) { .btn { height: auto; min-height: 52px; padding-top: 0; padding-bottom: 0; } } .btn.icon-sm { border-radius: var(--radius); } @media (prefers-reduced-motion: reduce) { .btn svg use { transition: none; } } input, textarea, select { height: 56px; padding: 0 18px; margin-bottom: 16px; font-size: 15px; font-weight: 500; letter-spacing: 0; border: var(--hair) solid rgba(0, 0, 0, 0.45); border-radius: var(--radius); background-color: var(--white); /* .45: the box is the only sign of the field (3.4:1); background-color keeps the select's arrow */ } input:focus, textarea:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); } input::placeholder, textarea::placeholder { font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; color: rgba(0, 0, 0, 0.6); } textarea { padding: 16px 18px; height: 180px; } select { text-transform: none; background-position: right 18px center; padding-right: 44px; } @media (max-width: 768px) { input, textarea, select { font-size: 16px; letter-spacing: 0; } } form.row > .form-fallback { margin: 20px 12px 30px; width: calc(100% - 24px); } @media (max-width: 992px) { .pilot .col-lg-6 + .col-lg-6 { margin-top: 48px; } } /* Contact form, 993–1400px: the submit button gets its own row, so it never overflows its column */ @media (min-width: 993px) and (max-width: 1400px) { form[data-contact] > .col-lg-8, form[data-contact] > .col-lg-4 { width: 100%; } form[data-contact] .adaptive-right { justify-content: flex-start; } } .link svg { width: var(--box); height: var(--box); padding: 7px; margin-left: 12px; border-radius: var(--radius); background: transparent; border: var(--hair) solid rgba(0, 0, 0, 0.3); } .link.light svg { border-color: rgba(255, 255, 255, 0.3); } .link.dark svg { background: transparent; } .link:hover svg { background: var(--accent); border-color: var(--accent); color: var(--on-accent); transform: none; } /* ========================================================================== Inner pages: a boxed breadcrumb that ends on a filled zone square; the product page opens on its line tag and its own title ========================================================================== */ .inner-banner { padding-top: calc(var(--header-h) + 96px); } @media (max-width: 1200px) { .inner-banner { padding-top: calc(var(--header-h) + 80px); } } @media (max-width: 768px) { .inner-banner { padding-top: calc(var(--header-h) + 40px); } } .breadcrumbs { padding: 9px 14px; margin-bottom: 36px; border: var(--hair) solid rgba(0, 0, 0, 0.16); border-radius: var(--radius); } .breadcrumbs::before { display: none; } .breadcrumbs li::after { content: ""; width: 14px; height: 1px; margin: 0 10px; background: currentColor; opacity: 0.35; } .breadcrumbs li a, .breadcrumbs li span { line-height: 1.4; } .breadcrumbs li a { opacity: 0.6; } .breadcrumbs li a:hover { opacity: 1; } .breadcrumbs li:last-child span { display: inline-flex; align-items: center; gap: 10px; opacity: 1; } .breadcrumbs li:last-child span::before { content: ""; flex: none; width: var(--zone); height: var(--zone); border-radius: var(--radius); background: var(--accent); } @media (max-width: 576px) { .breadcrumbs { display: inline-flex; flex-wrap: wrap; row-gap: 6px; } .breadcrumbs li a, .breadcrumbs li span { letter-spacing: 0.12em; } .breadcrumbs li::after { margin: 0 8px; width: 10px; } } .inner-banner h1 + h2.h3 { margin-bottom: 20px; font-size: 12px; font-weight: 600; line-height: 1.4; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--text); } .inner-banner .col-lg-10 { max-width: 760px; } .inner-banner .col-lg-10 p:first-child { font-size: 20px; line-height: 150%; color: var(--text-strong); } @media (max-width: 768px) { .inner-banner .col-lg-10 p:first-child { font-size: 18px; } } .inner-banner p b, .inner-banner p strong { font-weight: inherit; color: var(--text-strong); } /* ---------- Product rows read as a datasheet: a ruled row, a small pinned head ---------- */ .row.between > .col-lg-5 > h2:not(.h3):not(.h4) { line-height: 110%; letter-spacing: -0.025em; max-width: 10em; } @media (min-width: 993px) { .row.between > .col-lg-5 > h2:not(.h3):not(.h4) { position: sticky; top: calc(var(--header-h) + 32px); } } .row.between:has(> .col-lg-5 > h2:not(.h3):not(.h4)) { position: relative; padding-top: 32px; } .row.between:has(> .col-lg-5 > h2:not(.h3):not(.h4))::before { content: ""; position: absolute; top: 0; left: 12px; right: 12px; height: 1px; background: var(--line); } .benefits li { padding: 16px 0; margin: 0; border-top: var(--hair) solid var(--line); } .benefits li:first-child { padding-top: 0; border-top: 0; } .benefits li::before { display: none; } .benefits li strong { display: block; margin-bottom: 4px; font-weight: 600; color: var(--text-strong); } .dark-bg .benefits li { border-color: var(--light-line); } /* ========================================================================== Figures: the plan renders carry quiet corner marks in the renders' own label ink; the caption is a zone tag ========================================================================== */ .figure .frame { border: 0; } .figure .frame::after { z-index: 1; inset: 32px; color: #8a8780; --vf-a: 24px; } @media (max-width: 576px) { .figure .frame::after { inset: 12px; --vf-a: 14px; } } .figure figcaption { display: flex; align-items: center; gap: 10px; text-align: left; margin-top: 16px; font-size: 11px; font-weight: 600; letter-spacing: var(--track-tag); text-transform: uppercase; color: var(--text); } .figure figcaption::before { content: ""; flex: none; width: var(--zone); height: var(--zone); border: var(--hair) solid var(--accent); border-radius: var(--radius); } /* ========================================================================== Closing call: a left-aligned two-column close on the page grid, no frame ========================================================================== */ .cta { border-top: var(--hair) solid rgba(0, 0, 0, 0.08); } .cta .center { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; align-items: end; max-width: none; margin: 0; padding: 0; text-align: left; } .cta .center h2 { grid-row: 1 / span 2; max-width: 12em; margin: 0; } .cta .center p.lead { max-width: 560px; margin: 0 0 24px; } .cta .center .mt-60 { margin: 0; } @media (max-width: 992px) { .cta .center { grid-template-columns: 1fr; } .cta .center h2 { grid-row: auto; margin-bottom: 20px; } } /* ========================================================================== Overlay menu: a left-aligned index on the content edge; a zone square marks the current page. Menu button: two equal bars. ========================================================================== */ .main-menu { justify-content: flex-start; padding-left: calc(max(0px, (100% - var(--cw)) / 2) + var(--cpad) + 36px); padding-right: 24px; transform: translateY(14px); } .menu.is-open .main-menu { transition-delay: 0.12s; } .main-menu ul { align-items: flex-start; } .main-menu li { margin-bottom: 12px; } .main-menu li a { position: relative; font-size: 52px; line-height: 118%; font-weight: 600; letter-spacing: -0.02em; color: rgba(255, 255, 255, 0.62); } .main-menu li a::before { content: ""; position: absolute; left: -36px; top: 50%; width: var(--zone); height: var(--zone); margin-top: -5px; border: var(--hair) solid var(--accent-on-dark); border-radius: var(--radius); opacity: 0; transform: translateX(-8px); transition: 0.4s var(--ease); } .main-menu li a:hover, .main-menu li a:focus-visible { color: var(--white); } .main-menu li a:hover::before, .main-menu li a:focus-visible::before { opacity: 1; transform: none; } .main-menu li.is-active > a { color: var(--white); } .main-menu li.is-active > a::before { opacity: 1; transform: none; background: var(--accent-on-dark); border-color: var(--accent-on-dark); } .menu-foot { left: 0; right: 0; width: auto; max-width: var(--cw); margin: 0 auto; padding: 0 var(--cpad); bottom: 36px; } @media (min-width: 993px) { .menu-foot { align-items: center; } } @media (max-width: 992px) { .main-menu { padding-left: calc(max(0px, (100% - var(--cw)) / 2) + var(--cpad) + 28px); } .main-menu li { margin-bottom: 10px; } .main-menu li a { font-size: 34px; } .main-menu li a::before { left: -28px; } } /* Short landscape screens: the list starts under the header and the menu foot follows it in flow (the menu scrolls) */ @media (max-height: 520px) { .main-menu { align-items: flex-start; height: auto; min-height: 0; padding-top: calc(var(--header-h) + 8px); padding-bottom: 0; } .main-menu li { margin-bottom: 8px; } .menu-foot { position: static; margin: 32px auto 0; padding-bottom: 28px; } } @media (prefers-reduced-motion: reduce) { .main-menu, .main-menu li a::before { transition: none; transform: none; } } html.no-js .menu .main-menu { padding-top: 30px; padding-bottom: 30px; padding-left: calc(max(0px, (100% - var(--cw)) / 2) + var(--cpad) + 28px); } html.no-js .main-menu li a { font-size: 34px; } html.no-js .main-menu li a::before { left: -28px; } .menu-btn span { background: transparent !important; width: 26px; height: 2px; } .menu-btn span::before, .menu-btn span::after { width: 26px; height: 2px; } .menu-btn span::before { top: -4px; } .menu-btn span::after { top: 4px; width: 26px; } .menu-btn.is-active span { transform: none; } .menu-btn.is-active span::before { transform: translateY(4px) rotate(45deg); } .menu-btn.is-active span::after { opacity: 1; width: 26px; transform: translateY(-4px) rotate(-45deg); } @media (max-width: 992px) { .menu-btn span, .menu-btn span::before, .menu-btn span::after { width: 24px; } } /* ========================================================================== Footer: one ruled row (brand | site index | contacts | language) and a bottom bar ========================================================================== */ .footer-body { padding-top: 88px; padding-bottom: 32px; } .footer-grid { display: grid; grid-template-columns: 2fr 1.5fr 1.5fr 1fr; column-gap: 24px; align-items: start; } .footer .logo { margin-bottom: 20px; } .footer .legal { font-size: 15px; } .footer-menu { margin: 0; } .footer-menu ul { border-top: var(--hair) solid var(--light-line); } .footer-menu li { margin: 0; border-bottom: var(--hair) solid var(--light-line); } .footer-menu li a { display: flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; padding: 12px 0; font-size: 20px; line-height: 140%; font-weight: 600; letter-spacing: -0.01em; } .footer-menu li a::after { content: ""; flex: none; width: var(--zone); height: var(--zone); border: var(--hair) solid var(--accent-on-dark); border-radius: var(--radius); opacity: 0; transition: opacity 0.3s var(--ease); } .footer-menu li a:hover { transform: none; color: var(--white); } .footer-menu li a:hover::after, .footer-menu li a:focus-visible::after { opacity: 1; } .footer-menu li.is-active a, .footer-menu li.is-active a:hover { color: var(--white); } .footer-menu li.is-active a::after { opacity: 1; background: var(--accent-on-dark); border-color: var(--accent-on-dark); } .footer .h6 { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; font-size: 11px; font-weight: 600; letter-spacing: var(--track-tag); text-transform: uppercase; color: var(--light-soft); line-height: 1.4; } .footer .h6::before { content: ""; flex: none; width: var(--zone); height: var(--zone); border: var(--hair) solid var(--accent-on-dark); border-radius: var(--radius); } .footer-langcol { justify-self: end; margin-top: -14px; } .footer-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 64px; padding-top: 24px; border-top: var(--hair) solid var(--light-line); } .footer .copyright { text-align: left; font-size: 14px; } @media (max-width: 992px) { .footer-body { padding-top: 72px; } .footer-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "brand brand" "menu contacts" "menu lang"; row-gap: 40px; } .footer-brand { grid-area: brand; } .footer-menu { grid-area: menu; } .footer-contacts { grid-area: contacts; } .footer-langcol { grid-area: lang; justify-self: start; margin-top: -12px; } .footer-bar { margin-top: 48px; } } @media (max-width: 768px) { .footer p { line-height: 1.8; } } /* 24px+ targets for the e-mail and phone links */ @media (max-width: 576px) { .footer-grid { grid-template-columns: 1fr; grid-template-areas: "brand" "menu" "contacts" "lang"; } .footer-menu li a { font-size: 20px; } } /* ---------- Reduced motion: the hero text does not rise in (after the base hero rule on purpose) ---------- */ @media (prefers-reduced-motion: reduce) { .hero-content { animation: none; } } /* Hero: three short beats, one per line on phones */ @media (max-width: 576px) { .hero h1 { font-size: clamp(26px, 9vw, 40px); line-height: 1.08; } } /* ---------- Labels: the hero eyebrow, the heading on dark bands, tense tags, Read more ---------- */ .hero-eyebrow { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-on-dark, #7f8cff); margin-bottom: 28px; } .mx-h2 { color: var(--white); max-width: 22ch; margin-bottom: 20px; } .mx-tag { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-on-dark, #7f8cff); margin-bottom: 6px; } .mx-more { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-on-dark, #7f8cff); } .mx-more:hover { color: var(--white); } /* use-case page: the row strip under the H1 */ .tense-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; border-top: var(--hair, 1px) solid var(--line); margin-top: 12px; } .ts-cell { display: block; padding: 24px 0 28px; border-bottom: var(--hair, 1px) solid var(--line); color: var(--text, #333); } .ts-cell .mx-tag { color: var(--accent); } .ts-title { display: block; font-size: 20px; font-weight: 600; color: var(--text-strong, #111); margin-bottom: 10px; letter-spacing: -0.01em; } .ts-cell p { font-size: 15px; line-height: 1.55; margin: 0; } .ts-cell:hover .ts-title { color: var(--accent); } @media (max-width: 992px) { .tense-strip { grid-template-columns: 1fr; gap: 0; } } /* lists */ .build-list { list-style: none; padding: 0; margin: 0; } .build-list li { padding: 14px 0 14px 28px; position: relative; border-top: var(--hair, 1px) solid var(--line); } .build-list li::before { content: ""; position: absolute; left: 0; top: 23px; width: 9px; height: 9px; border: 1.5px solid var(--accent); } /* menu: the three products under Products in the overlay menu */ .main-menu ul.sub { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; margin: 14px auto 0; max-width: 720px; } .main-menu ul.sub li { margin: 0; } .main-menu ul.sub li a { font-size: 15px; font-weight: 500; color: rgba(255,255,255,.55); letter-spacing: 0.02em; } .main-menu ul.sub li a:hover { color: var(--white); } @media (max-width: 992px) { .main-menu ul.sub li a { font-size: 14px; } .main-menu ul.sub { gap: 4px 14px; } } section[id^="what-"] { scroll-margin-top: 100px; } /* ---------- option two: sources, products, use-case cards ---------- */ .prod-one { font-size: 19px; color: var(--white); line-height: 1.4; margin-bottom: 16px; } /* product loop illustrations */ .prod-media { margin: 0 0 22px; background: #000; border-radius: 2px; overflow: hidden; } .prod-media video { display: block; width: 100%; height: auto; } .page-media { max-width: 760px; margin-top: 10px; } .prod-text { display: block; min-width: 0; } /* ========================================================================== Audit 4: one type scale, an inline desktop navigation, name-first product tiles, example cards with their renders, an overlay menu that fits a laptop, pause controls on the loops, captions under the visuals. ========================================================================== */ :root { --fs-body: 16px; --fs-small: 15px; --fs-label: 12px; --track-tag: 0.2em; } /* ---------- Type: one h2 size per page (40px), one body size, one label size ---------- */ h2, .h2, .container > h2.h3, .pilot h2, .cta .center h2 { font-size: 40px; line-height: 110%; } h3, .h3, h4, .h4 { font-size: 24px; } @media (max-width: 992px) { h2, .h2, .container > h2.h3, .pilot h2, .cta .center h2 { font-size: 36px; } } @media (max-width: 768px) { h2, .h2, .container > h2.h3, .pilot h2, .cta .center h2 { font-size: 30px; } h3, .h3, h4, .h4 { font-size: 22px; } } @media (max-width: 360px) { h2, .h2, .container > h2.h3, .pilot h2, .cta .center h2 { font-size: 26px; } } h1, h2, h3, .h1, .h2, .h3, .prod-one, .ts-title, .strip-h, .prod-name { text-wrap: balance; } .lead, .pilot-lead { text-wrap: pretty; } .mx-h2 { max-width: none; } .lead, .prod-one { font-size: 18px; line-height: 1.5; } .inner-banner .lead { font-size: 18px; line-height: 160%; max-width: 62ch; } .row.between > .col-lg-6 p, .row.between > .col-lg-6 li, .row.between > .col-lg-6 .lead, .pilot-lead, .cta .center p.lead { max-width: 62ch; } .ts-cell p, .build-list li, .benefits li, .phase ul li, .text-sm, .story p, .footer .legal, .footer .copyright, .form-fallback, .strip li p { font-size: var(--fs-small); } .suptitle, .eyebrow, .mx-tag, .hero-eyebrow, .mx-more, .footer .h6, .figure figcaption, .upper, .breadcrumbs li a, .breadcrumbs li span, .phase .dur small, .story .when, .used-h, .nav-tense { font-size: var(--fs-label); } /* ---------- One list rule: a ruled row with a small outlined square ---------- */ .build-list li, .benefits li, .phase ul li { position: relative; padding: 12px 0 12px 24px; border-top: var(--hair) solid var(--line); border-bottom: 0; font-size: var(--fs-small); text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--text); } .build-list li::before, .benefits li::before, .phase ul li::before { content: ""; display: block; position: absolute; left: 0; top: 19px; width: 8px; height: 8px; border: 1.5px solid var(--accent); border-radius: 0; background: none; } .benefits li:first-child { border-top: var(--hair) solid var(--line); padding-top: 12px; } .benefits li strong { display: block; margin-bottom: 2px; font-weight: 600; color: var(--text-strong); } .phase ul li { color: var(--text-strong); font-weight: 500; } .dark-bg .build-list li, .dark-bg .benefits li { border-color: var(--light-line); color: var(--light-soft); } .dark-bg .build-list li::before, .dark-bg .benefits li::before { border-color: var(--accent-on-dark); } p + .build-list, p + .benefits { margin-top: 20px; } /* ---------- Links inside text are links; tap targets at least 40px ---------- */ main a.plain { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } main a.plain:hover, main a.plain:focus-visible { color: var(--text-strong); } .dark-bg a.plain { color: var(--accent-on-dark); } .footer a.plain, main a.plain { display: inline-block; padding: 10px 0; margin: -10px 0; } .breadcrumbs li a { display: inline-block; padding: 12px 0; margin: -12px 0; } .footer-menu li a { min-height: 44px; } /* ---------- Stacked columns breathe below 992px ---------- */ @media (max-width: 992px) { .row.between > [class*="col-lg-"] + [class*="col-lg-"] { margin-top: 40px; } .pilot .col-lg-6 + .col-lg-6 { margin-top: 40px; } } /* ---------- Footer: three columns (no language column) ---------- */ .footer-grid { grid-template-columns: 2fr 1.5fr 1.5fr; } @media (max-width: 992px) { .footer-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "brand brand" "menu contacts"; } } @media (max-width: 576px) { .footer-grid { grid-template-columns: 1fr; grid-template-areas: "brand" "menu" "contacts"; } } /* ---------- 404 ---------- */ .err-page { min-height: 0; padding: calc(var(--header-h) + 96px) 0 120px; } .err-page p { max-width: 60ch; } /* ---------- Overlay menu fits a laptop: the list starts under the header, the foot follows in flow ---------- */ .menu { display: flex; flex-direction: column; } .main-menu, .menu .main-menu { height: auto; min-height: 0; flex: 1 0 auto; align-items: flex-start; padding-top: calc(var(--header-h) + 24px); padding-bottom: 40px; } .menu-foot { position: static; width: 100%; margin: auto auto 0; padding: 0 var(--cpad) 32px; } @media (max-height: 520px) { .main-menu, .menu .main-menu { padding-top: calc(var(--header-h) + 8px); padding-bottom: 24px; } .menu-foot { margin: 0 auto; padding-bottom: 28px; } } html.no-js .menu { display: block; } .main-menu .nav-tense { font-size: 11px; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--accent-on-dark); margin-left: 8px; } /* ---------- Inline desktop navigation with a Products dropdown; the hamburger stays for phones ---------- */ .topnav { display: none; } @media (min-width: 993px) { .topnav { display: block; } .topnav > ul { display: flex; align-items: center; gap: 4px; } .topnav > ul > li { position: relative; } .topnav > ul > li > a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; font-size: 15px; font-weight: 600; color: var(--text-strong); border-radius: var(--radius); transition: color 0.3s ease; } .topnav > ul > li > a:hover, .topnav > ul > li > a:focus-visible, .topnav li.is-active > a { color: var(--accent-text); } .header.on-dark .topnav > ul > li > a { color: var(--light); } .header.on-dark .topnav > ul > li > a:hover, .header.on-dark .topnav > ul > li > a:focus-visible, .header.on-dark .topnav li.is-active > a { color: var(--accent-on-dark); } .header.is-scrolled:not(.on-dark) .topnav > ul > li > a { color: var(--text-strong); } .header.is-scrolled:not(.on-dark) .topnav > ul > li > a:hover, .header.is-scrolled:not(.on-dark) .topnav li.is-active > a { color: var(--accent-text); } .topnav .dropdown { position: absolute; top: 100%; left: 0; min-width: 250px; padding: 8px 0; background: var(--black); border: var(--hair) solid rgba(255, 255, 255, 0.14); border-radius: var(--radius); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.25s var(--ease), transform 0.25s var(--ease), visibility 0s 0.25s; } .topnav .has-sub:hover .dropdown, .topnav .has-sub:focus-within .dropdown { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .topnav .dropdown li a { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 10px 16px; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--light); } .topnav .dropdown li a:hover, .topnav .dropdown li a:focus-visible, .topnav .dropdown li.is-active a { color: var(--white); background: rgba(255, 255, 255, 0.06); } .topnav .dropdown li.is-active a { color: var(--accent-on-dark); } .topnav .nav-tense { font-weight: 600; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--accent-on-dark); } .header .menu-btn { display: none; } .header-right { gap: 20px; } } @media (prefers-reduced-motion: reduce) { .topnav .dropdown { transition: none; transform: none; } } /* ---------- Loops: a pause control (WCAG 2.2.2) ---------- */ .loop-box { position: relative; } .loop-toggle { position: absolute; right: 12px; bottom: 12px; z-index: 3; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius); background: rgba(0, 0, 0, 0.6); border: var(--hair) solid rgba(255, 255, 255, 0.3); color: var(--white); pointer-events: auto; opacity: 0.8; transition: opacity 0.3s var(--ease), background-color 0.3s var(--ease); } .loop-toggle[hidden] { display: none; } .loop-toggle:hover, .loop-toggle:focus-visible { opacity: 1; background: rgba(0, 0, 0, 0.9); } .loop-toggle svg { width: 16px; height: 16px; display: block; } .loop-toggle .ic-play, .loop-toggle.is-paused .ic-pause { display: none; } .loop-toggle.is-paused .ic-play { display: block; } @media (min-width: 993px) { .hero-art { pointer-events: none; } .hero-art .loop-toggle { pointer-events: auto; right: 16px; bottom: 16px; } } /* ---------- Strip: sources and CIO in four short items ---------- */ .strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: var(--hair) solid var(--line); } .strip li { padding: 28px 32px 8px 0; min-width: 0; } .strip li + li { padding-left: 32px; border-left: var(--hair) solid var(--line); } .strip-h { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 12px; font-size: 18px; font-weight: 600; color: var(--text-strong); line-height: 1.3; letter-spacing: -0.01em; } .strip-h::before { content: ""; flex: none; width: var(--zone); height: var(--zone); margin-top: 7px; border: var(--hair) solid var(--accent); border-radius: var(--radius); } .strip li:nth-child(3) .strip-h::before { background: var(--accent); } .strip li p { color: var(--text); } @media (max-width: 992px) { .strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .strip li { padding-right: 24px; } .strip li + li { padding-left: 24px; } .strip li:nth-child(3) { border-left: 0; padding-left: 0; } .strip li:nth-child(n+3) { border-top: var(--hair) solid var(--line); } } @media (max-width: 576px) { .strip { grid-template-columns: 1fr; } .strip li, .strip li + li { padding: 20px 0 12px; border-left: 0; border-top: var(--hair) solid var(--line); } .strip li:first-child { border-top: 0; } } /* ---------- Product tiles: the NAME is the dominant element; its own picture above ---------- */ .prod-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; border-top: var(--hair) solid var(--light-line); } .prod-tile { position: relative; padding: 36px 0 40px; border-bottom: var(--hair) solid var(--light-line); color: var(--light-soft); } .prod-tile .tile-media { margin: 0 0 24px; background: #000; border-radius: var(--radius); overflow: hidden; } .prod-tile .tile-media video, .prod-tile .tile-media img { display: block; width: 100%; height: auto; } .prod-tile .mx-tag { margin-bottom: 10px; color: var(--accent-on-dark); } .prod-name { font-size: 40px; line-height: 1.05; letter-spacing: -0.025em; font-weight: 600; margin: 0 0 12px; color: var(--white); } .prod-name a { color: inherit; } .prod-name a::after { content: ""; position: absolute; inset: 0; } /* the whole tile opens the product page */ .prod-tile:hover .prod-name a, .prod-name a:focus-visible { color: var(--accent-on-dark); } .prod-tile .prod-one { color: var(--light); margin-bottom: 18px; } .prod-tile .mx-more { display: inline-block; font-size: 13px; } .prod-tile.on-light { border-color: var(--line); color: var(--text); } .prod-tiles.on-light { border-color: var(--line); } .prod-tile.on-light .prod-name { color: var(--text-strong); } .prod-tile.on-light:hover .prod-name a, .prod-tile.on-light .prod-name a:focus-visible, .prod-tile.on-light .mx-tag, .prod-tile.on-light .mx-more { color: var(--accent-text); } .prod-tile.on-light .prod-one { color: var(--text-strong); } @media (max-width: 992px) { .prod-tiles { grid-template-columns: 1fr; gap: 0; } .prod-tile { padding: 28px 0 32px; } .prod-name { font-size: 34px; } } /* products index: tile + where it is used */ .prod-rows { border-top: var(--hair) solid var(--line); } .prod-row { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 0 56px; align-items: start; border-bottom: var(--hair) solid var(--line); } .prod-row .prod-tile { border-bottom: 0; padding: 40px 0 44px; } .prod-used { padding: 44px 0 32px; } .used-h { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; font-weight: 600; letter-spacing: var(--track-tag); text-transform: uppercase; color: var(--text); line-height: 1.4; } .used-h::before { content: ""; flex: none; width: var(--zone); height: var(--zone); border: var(--hair) solid var(--accent); border-radius: var(--radius); } @media (max-width: 992px) { .prod-row { grid-template-columns: 1fr; gap: 0; } .prod-row .prod-tile { padding-bottom: 8px; } .prod-used { padding-top: 16px; } } /* ---------- Inner pages: one eyebrow row, 'NAME: one line' title, the example strip, the plan ---------- */ .eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 20px; font-weight: 600; letter-spacing: var(--track-tag); text-transform: uppercase; color: var(--text-strong); line-height: 1.4; } .eyebrow::before { content: ""; flex: none; width: var(--zone); height: var(--zone); border: var(--hair) solid var(--accent); border-radius: var(--radius); } .h1-named .h1-line { color: var(--text); font-weight: 500; } .tense-strip { margin-top: 16px; } .ts-cell { padding: 24px 0 28px; } .ts-title { font-size: 24px; line-height: 1.15; margin-bottom: 10px; letter-spacing: -0.02em; } .ts-title a { color: var(--accent-text); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; } .ts-title a:hover, .ts-title a:focus-visible { color: var(--text-strong); } .ts-tense { color: var(--text); font-weight: 500; font-size: 18px; letter-spacing: 0; } .figure { max-width: 960px; margin: 0 auto; } /* How We Work: the conditional sensors step carries a label, no number and no duration */ .phase.cond .dur { display: flex; align-items: flex-start; padding-top: 4px; white-space: normal; } .phase.cond .dur small { display: inline-flex; align-items: center; gap: 10px; margin-top: 0; color: var(--accent-text); letter-spacing: var(--track-tag); } .phase.cond .dur small::before { content: ""; flex: none; width: var(--zone); height: var(--zone); border: var(--hair) dashed var(--accent); border-radius: var(--radius); } .phase .h5 { font-size: 20px; } /* About: the rules as four plain lines; Earlier work names */ .rules li { color: var(--text-strong); } #earlier .names-row li { font-size: 16px; } /* ---------- Hero visual cropped to the scene (1040x896 on desktop and tablets, its own 1000x800 render on phones); its desktop width is set with the headline size further down ("the picture takes all the width the column leaves") ---------- */ @media (min-width: 993px) { .hero-art { bottom: 24px; } .hero-art video, .hero-art img, .hero-art .loop-still { width: 100%; height: auto; max-height: calc(100vh - var(--header-h) - 110px); object-fit: contain; } } /* ---------- Plan figure: a black panel (the plans are rendered on black), caption in plain words ---------- */ .figure .frame { background: #000; border: 0; border-radius: var(--radius); } .figure .frame::after { color: rgba(255, 255, 255, 0.35); } .figure figcaption { font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text); line-height: 1.5; align-items: flex-start; } .figure figcaption::before { margin-top: 6px; background: var(--accent); } /* ========================================================================== Round 5: the "Trusted by" band, the ten examples as a compact grid, the product second line, two or three product blocks on a use-case page ========================================================================== */ /* ---------- Trusted by: client logos in a seamless loop. The track holds the logo row repeated and doubled (build.py) and moves by half its width per cycle; it pauses on hover, on focus and with its control. Reduced motion: no movement, one row of logos, centred. ---------- */ .trusted { --logo-scale: 1; background: var(--black); color: var(--light-soft); } /* logos.json: display sizes for a 40px row */ .trusted-inner { display: flex; align-items: center; gap: 20px 40px; padding-top: 40px; padding-bottom: 40px; border-top: var(--hair) solid var(--light-line); } .trusted-label { flex: none; margin: 0; font-size: var(--fs-label); font-weight: 600; line-height: 1.4; letter-spacing: var(--track-tag); text-transform: uppercase; color: var(--light-soft); white-space: nowrap; } .marquee { position: relative; flex: 1 1 0%; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%); } .marquee-track { display: flex; width: max-content; animation: marquee var(--marquee-dur, 40s) linear infinite; } .marquee-set, .marquee-dups { display: flex; flex: none; align-items: center; margin: 0; padding: 0; list-style: none; } .marquee-set li { flex: none; display: flex; align-items: center; height: 40px; margin: 0 72px 0 0; padding: 0; } .marquee-set img { display: block; max-width: none; width: calc(var(--w) * var(--logo-scale) * 1px); height: calc(var(--h) * var(--logo-scale) * 1px); opacity: 0.7; transition: opacity 0.3s var(--ease); } .marquee-set li:hover img { opacity: 1; } .marquee:hover .marquee-track, .marquee:focus-within .marquee-track, .trusted.is-paused .marquee-track { animation-play-state: paused; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .trusted .marquee-toggle { position: relative; right: auto; bottom: auto; flex: none; } @media (max-width: 768px) { .trusted-inner { flex-wrap: wrap; padding-top: 32px; padding-bottom: 32px; } .trusted-label { width: 100%; } .marquee { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%); } .marquee-set li { height: 32px; margin-right: 48px; } .trusted { --logo-scale: 0.8; } } @media (prefers-reduced-motion: reduce) { .marquee { -webkit-mask-image: none; mask-image: none; } .marquee-track { width: auto; animation: none; justify-content: center; } .marquee-set { flex: 1 1 auto; flex-wrap: wrap; justify-content: center; gap: 12px 48px; } .marquee-set li { margin-right: 0; } .marquee-dups, .trusted .marquee-toggle { display: none; } } /* ---------- Use cases: ten examples, each a render, its name and its one-line problem; the card opens the page ---------- */ .uc-sub { margin: 0 0 48px; color: var(--text); } .uc-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 44px 24px; } .uc-item { position: relative; min-width: 0; } .uc-thumb { position: relative; display: block; aspect-ratio: 5 / 4; margin: 0 0 16px; background: var(--black); border-radius: var(--radius); overflow: hidden; } .uc-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .tile-ph { display: block; width: 100%; height: 100%; background: var(--black); } .uc-title { margin: 0 0 6px; font-size: 20px; line-height: 1.2; font-weight: 600; letter-spacing: -0.01em; color: var(--accent-text); text-wrap: balance; } .uc-title a { color: inherit; } .uc-title a::after { content: ""; position: absolute; inset: 0; } .uc-item:hover .uc-title a, .uc-title a:focus-visible { color: var(--text-strong); } .uc-line { margin: 0; font-size: var(--fs-small); line-height: 1.45; color: var(--text); text-wrap: pretty; } @media (max-width: 1400px) { .uc-grid { gap: 36px 16px; } .uc-title { font-size: 18px; } } @media (max-width: 992px) { .uc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 20px; } } @media (max-width: 768px) { .uc-sub { margin-bottom: 32px; } .uc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; } .uc-thumb { margin-bottom: 12px; } .uc-title { font-size: 17px; margin-bottom: 4px; } .uc-line { font-size: 14px; } } /* ---------- Product tiles and pages: the one line, then the second line ---------- */ .prod-tile .prod-one { margin-bottom: 10px; } .prod-two { margin: 0 0 20px; font-size: var(--fs-small); line-height: 1.5; color: rgba(255, 255, 255, 0.62); text-wrap: pretty; } .prod-tile.on-light .prod-two { color: var(--text); } .prod-lead { color: var(--text); max-width: 62ch; } .used-sep { color: var(--text-strong); } /* ---------- Use-case page: one block per product that applies (two or three) ---------- */ @media (min-width: 993px) { .tense-strip.n2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tense-strip.n1 { grid-template-columns: minmax(0, 1fr); } } .ts-cell p { max-width: 62ch; } /* ========================================================================== Live-site fix pass (desktop and phone audits; finding ids in the comments) ========================================================================== */ .p-30-60 { padding-top: 30px; padding-bottom: 60px; } .p-0-60 { padding-top: 0; padding-bottom: 60px; } .p-30-90 { padding-top: 30px; padding-bottom: 90px; } .p-60-90 { padding-top: 60px; padding-bottom: 90px; } @media (max-width: 992px) { .p-30-60 { padding-top: 24px; padding-bottom: 40px; } .p-0-60 { padding-bottom: 40px; } .p-30-90 { padding-top: 24px; padding-bottom: 60px; } .p-60-90 { padding-top: 40px; padding-bottom: 60px; } } /* ---------- Header: 64px on phones, 56px on phones turned sideways (mob-04); the logo is a 44px tap (mob-14) ---------- */ @media (max-width: 576px) { :root { --header-h: 64px; } } @media (max-width: 992px) and (max-height: 520px) and (orientation: landscape) { :root { --header-h: 56px; } } .header .logo { padding: 10px 0; } .skip:focus { top: calc(var(--header-h) + 8px); } /* desk-11: never over the logo */ @media (min-width: 993px) { .topnav > ul { margin-right: -14px; } } /* desk-08: the last item ends on the grid edge */ /* ---------- Products dropdown: each product with its one line (desk-12); Escape closes it (desk-11) ---------- */ @media (min-width: 993px) { .topnav .dropdown { min-width: 380px; padding: 6px 0; } .topnav .dropdown li a { flex-wrap: wrap; row-gap: 2px; padding: 10px 16px; } .topnav .dropdown .nav-line { flex-basis: 100%; font-size: 13px; font-weight: 400; line-height: 1.4; letter-spacing: 0; text-transform: none; color: var(--light-soft); } .topnav .has-sub.is-closed .dropdown, .topnav .has-sub.is-closed:hover .dropdown, .topnav .has-sub.is-closed:focus-within .dropdown { opacity: 0; visibility: hidden; transform: translateY(6px); } } .main-menu .nav-line { display: none; } /* ---------- Phone menu: the products as 44px rows; the pilot button and the phone in the foot (mob-05) ---------- */ @media (max-width: 992px) { .main-menu ul.sub { gap: 0; margin: 2px 0 6px; } .main-menu ul.sub li a { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 17px; } .main-menu .nav-tense { font-size: 12px; } .menu-foot { gap: 12px; } .menu-foot .menu-cta { margin-bottom: 8px; } } .main-menu li a { justify-content: flex-start; } /* "Products" starts on the same line as the other items */ .menu-foot a[href^="tel:"] { text-transform: none; } /* Phones up to 760px tall: the whole menu, the pilot button, e-mail and phone fit one screen (the city is in the footer) */ @media (max-width: 992px) and (max-height: 760px) and (orientation: portrait) { .main-menu, .menu .main-menu { padding-top: calc(var(--header-h) + 8px); padding-bottom: 20px; } .main-menu li { margin-bottom: 6px; } .main-menu li a { font-size: 30px; } .menu-foot { padding-bottom: 20px; } .menu-foot > span { display: none; } } /* ---------- Hero, desktop: the logo row shows at the foot of the first screen; one lead size (desk-15, desk-21) ---------- */ @media (min-width: 993px) { .hero { min-height: calc(100vh - 96px); min-height: calc(100svh - 96px); } .hero-eyebrow { font-size: 14px; } .hero-content p { font-size: 18px; } .hero-art video, .hero-art img, .hero-art .loop-still { max-height: calc(100vh - var(--header-h) - 140px); } } /* the picture ends on the content column's right edge where the headline leaves room for it (from 1201 px), so its labels keep off the screen edge; its pause control sits at its top right, away from the logo row's control */ @media (min-width: 1201px) { .hero-art { right: calc(max(0px, (100vw - var(--cw)) / 2) + var(--cpad)); } } /* the picture takes all the width the column leaves beside the headline: the headline's widest line is about 9.3 em and a 40 px gap keeps the labels clear of the text; the subline wraps within the headline's width */ @media (min-width: 993px) { .hero { --h1: 44px; } .hero h1 { font-size: var(--h1); } .hero-content .row > .col-lg-5 { max-width: calc(var(--h1) * 9.3); } .hero-art { width: calc(100vw - (100vw - var(--cw)) / 2 - var(--cpad) - var(--h1) * 9.3 - 40px); } } @media (min-width: 1201px) { .hero { --h1: 46px; } .hero-art { width: min(900px, calc(var(--cw) - 2 * var(--cpad) - var(--h1) * 9.3 - 40px)); } } @media (min-width: 1401px) { .hero { --h1: 52px; } } @media (min-width: 993px) { .hero-art .loop-toggle { top: 16px; bottom: auto; } } /* ---------- Hero, phones and tablets held upright: the picture above the text at every height (mob-01) ---------- It comes after the text in the source (desk-11), so `order` lifts it. On phones it takes the height the text leaves, so the headline, the subline and the button stay on the first screen. The portrait phone files, when present, give the box their own shape (--phone-ar from their poster). The pause control sits top right, on black. */ @media (max-width: 992px) and (orientation: portrait) { .hero { flex-direction: column; align-items: stretch; } .hero-art { display: block; position: relative; order: -1; z-index: 0; flex: none; pointer-events: none; width: 100%; margin: calc(var(--header-h) + 16px) 0 24px; padding: 0 var(--cpad); transform: none; } .hero-art .loop-box { width: fit-content; max-width: 100%; margin: 0 auto; } .hero-art video, .hero-art img, .hero-art .loop-still { display: block; width: auto; max-width: 100%; height: min(65vw, calc(100svh - 450px)); object-fit: contain; margin: 0 auto; } .hero-art .loop-toggle { top: 0; right: 0; bottom: auto; pointer-events: auto; } .hero-inner { margin-top: auto; } } @media (max-width: 576px) and (orientation: portrait) { .hero { padding-top: calc(var(--header-h) + 4px); } .hero-art { margin: auto 0 12px; padding: 0 16px; } /* a tall phone's spare height splits above and below the picture */ .hero-art .loop-box { width: 100%; } .hero-art video, .hero-art img, .hero-art .loop-still { width: 100%; height: auto; max-height: max(194px, calc(100vh - 430px)); max-height: max(194px, calc(100svh - 430px)); } .hero-video.has-phone { aspect-ratio: var(--phone-ar); } .hero-content { padding-bottom: 24px; } .hero-eyebrow { font-size: 11px; letter-spacing: 0.1em; margin-bottom: 14px; } .hero h1 { margin-bottom: 14px; } .hero .hero-content p.mb-30 { margin-bottom: 18px; } } /* ---------- Hero, phones turned sideways: text left, picture right, both on the first screen (mob-06) ---------- */ @media (max-width: 992px) and (orientation: landscape) { .hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; column-gap: 16px; min-height: 100vh; min-height: 100svh; padding: calc(var(--header-h) + 4px) 0 12px; } .hero-inner { grid-column: 1; grid-row: 1; } .hero .container { max-width: none; padding-right: 0; padding-left: calc(max(0px, (100vw - var(--cw)) / 2) + var(--cpad)); } .hero-art { display: block; position: relative; grid-column: 2; grid-row: 1; z-index: 0; pointer-events: none; padding-right: calc(max(0px, (100vw - var(--cw)) / 2) + var(--cpad)); transform: none; } .hero-art .loop-box { width: 100%; } .hero-art video, .hero-art img, .hero-art .loop-still { display: block; width: 100%; height: auto; max-height: calc(100vh - var(--header-h) - 24px); max-height: calc(100svh - var(--header-h) - 24px); object-fit: contain; } .hero-art .loop-toggle { top: 0; right: 0; bottom: auto; pointer-events: auto; } .hero-content { padding: 0; } .hero h1 { font-size: clamp(28px, 7vh, 44px); margin-bottom: 10px; } } @media (max-width: 992px) and (max-height: 520px) and (orientation: landscape) { .hero-eyebrow { font-size: 11px; margin-bottom: 10px; } .hero p { font-size: 14px; line-height: 1.45; } .hero .hero-content p.mb-30 { margin-bottom: 12px; } .prod-tile .tile-media video, .page-media video { max-height: calc(100svh - var(--header-h) - 24px); width: auto; max-width: 100%; margin: 0 auto; } } /* ---------- Hero labels: small labels over the hero video naming its parts (texts in content.json, places in assets/img/lines/hero-labels.json). The layer covers the video's box; .hero-labels is the frame the video really shows inside it (object-fit: contain), worked out with container units, so each label stays on its point at every size. A label scales with the frame as it was measured (--fs-*: 13 px on a 600 px desktop frame, 11 px on a 342 px phone frame) and never drops below 10 px. The desktop places (d) apply until the phone video or still is loaded (.is-phone), then the phone places (p). Each label: a dot on its point, a short rule (--*g long, turned by --*r) and the pill (moved by --*t). ---------- */ .hero-labels-frame { position: absolute; inset: 0; z-index: 2; pointer-events: none; container-type: size; } .hero-labels { position: absolute; inset: 0; container: hl / inline-size; } .hl { position: absolute; width: 0; height: 0; font-family: var(--font); font-weight: 600; line-height: 1; color: var(--white); } .hl::before { content: ""; position: absolute; left: -0.15em; top: -0.15em; width: 0.3em; height: 0.3em; border-radius: 50%; background: rgba(255, 255, 255, 0.9); } .hl-rule { position: absolute; left: 0; top: -0.5px; height: 1px; background: rgba(255, 255, 255, 0.67); transform-origin: 0 50%; } .hl-pill { position: absolute; left: 0; top: 0; white-space: nowrap; text-align: center; border-radius: 999px; background: rgba(12, 14, 26, 0.78); box-shadow: inset 0 0 0 0.75px rgba(255, 255, 255, 0.18); } .hero-video:not(.is-phone) ~ .hero-labels-frame .hl { left: var(--dx); top: var(--dy); font-size: var(--fs0-d); } .hero-video:not(.is-phone) ~ .hero-labels-frame .hl-rule { width: var(--dg); transform: rotate(var(--dr)); } .hero-video:not(.is-phone) ~ .hero-labels-frame .hl-pill { transform: var(--dt); padding: var(--pad-d); } .hero-video:not(.is-phone) ~ .hero-labels-frame .hl.dno, .hero-video.is-phone ~ .hero-labels-frame .hl.pno { display: none; } .hero-video.is-phone ~ .hero-labels-frame .hl { left: var(--px); top: var(--py); font-size: var(--fs0-p); } .hero-video.is-phone ~ .hero-labels-frame .hl-rule { width: var(--pg); transform: rotate(var(--pr)); } .hero-video.is-phone ~ .hero-labels-frame .hl-pill { transform: var(--pt); padding: var(--pad-p); } .hero-video:not(.is-phone) ~ .hero-labels-frame .hl.d2 .hl-sep, .hero-video.is-phone ~ .hero-labels-frame .hl.p2 .hl-sep { display: none; } .hero-video:not(.is-phone) ~ .hero-labels-frame .hl.djob :is(.hl-name, .hl-sep), .hero-video.is-phone ~ .hero-labels-frame .hl.pjob :is(.hl-name, .hl-sep) { display: none; } .hero-video:not(.is-phone) ~ .hero-labels-frame .hl.d2 :is(.hl-name, .hl-job), .hero-video.is-phone ~ .hero-labels-frame .hl.p2 :is(.hl-name, .hl-job) { display: block; } .hero-video:not(.is-phone) ~ .hero-labels-frame .hl.d2 .hl-job, .hero-video.is-phone ~ .hero-labels-frame .hl.p2 .hl-job { margin-top: 0.25em; } .hero-video:not(.is-phone) ~ .hero-labels-frame .hl.d2 .hl-name, .hero-video.is-phone ~ .hero-labels-frame .hl.p2 .hl-name { color: #c8d2ff; } @supports (width: 1cqw) { .hero-labels { inset: auto; left: 50%; top: 50%; width: min(100cqw, 100cqh * var(--ar-d)); height: min(100cqh, 100cqw / var(--ar-d)); transform: translate(-50%, -50%); } .hero-video.is-phone ~ .hero-labels-frame .hero-labels { width: min(100cqw, 100cqh * var(--ar-p)); height: min(100cqh, 100cqw / var(--ar-p)); } .hero-video:not(.is-phone) ~ .hero-labels-frame .hl { font-size: clamp(10px, var(--fs-d), 16px); } .hero-video.is-phone ~ .hero-labels-frame .hl { font-size: clamp(10px, var(--fs-p), 13px); } } /* a frame too small for its labels (they would cover the scene) shows none; the headline still says it all */ @container hl (max-width: 359.98px) { .hero-video:not(.is-phone) ~ .hero-labels-frame .hl { display: none; } } @container hl (max-width: 235.98px) { .hero-video.is-phone ~ .hero-labels-frame .hl { display: none; } } @media (min-width: 993px) { .hero-labels-frame { opacity: 0; animation: hero-art-in 1.2s 0.2s ease forwards; } } @media (prefers-reduced-motion: reduce) { .hero-labels-frame { animation: none; opacity: 1; } } html.no-js .hero-labels-frame { opacity: 1; animation: none; } /* ---------- Loop controls: 44px; on the product loops top right, where no frame is lit (mob-08) ---------- */ .tile-media .loop-toggle, .page-media .loop-toggle { top: 8px; right: 8px; bottom: auto; } /* ---------- Trusted by: more air on desktop, the rule on the grid, phones edge to edge with the control on the label row (desk-10, desk-08, mob-09) ---------- */ .trusted-inner { position: relative; border-top: 0; } .trusted-inner::before { content: ""; position: absolute; top: 0; left: var(--cpad); right: var(--cpad); height: 1px; background: var(--light-line); } .trusted-label { order: 0; } .marquee { order: 1; } .trusted .marquee-toggle { order: 2; } @media (min-width: 993px) { .marquee-set li { margin-right: 160px; height: 48px; } } @media (max-width: 768px) { .trusted-label { width: auto; flex: 1 1 auto; } .trusted .marquee-toggle { order: 1; } .marquee { order: 2; flex: 0 0 calc(100% + 2 * var(--cpad)); margin: 0 calc(-1 * var(--cpad)); } } .trusted.on-about .trusted-inner::before { display: none; } /* ---------- Inner pages: less white above the title; on phones a quiet breadcrumb (desk-19, desk-03, mob-04) ---------- */ .inner-banner { padding-top: calc(var(--header-h) + 48px); } @media (max-width: 768px) { .inner-banner { padding-top: calc(var(--header-h) + 32px); } } @media (max-width: 576px) { .inner-banner { padding-top: calc(var(--header-h) + 16px); } .breadcrumbs { border: 0; padding: 0; margin-bottom: 16px; } } /* ---------- Stacked two-column rows: the heading sits on its text (mob-10) ---------- */ @media (max-width: 992px) { .row.between.pair > .col-lg-6 { margin-top: 12px; } .row.between.pair > .col-lg-5 > h2.mb-30 { margin-bottom: 0; } } .row.between .col-lg-6 p, .phase p { text-wrap: pretty; } /* desk-24 */ /* desk-18: one rule per row, not two */ .row.between .benefits li:first-child, .row.between .build-list li:first-child, .phase ul li:first-child { border-top: 0; padding-top: 0; } .row.between .benefits li:first-child::before, .row.between .build-list li:first-child::before, .phase ul li:first-child::before { top: 7px; } /* ---------- Product pages: the second line and What you get beside the loop; on phones the loop first (desk-03, mob-03) ---------- */ .prod-top { justify-content: space-between; align-items: center; margin-top: 8px; } .prod-top .page-media { max-width: none; margin: 0; } .prod-top .used-h { margin-bottom: 4px; } .prod-top .benefits li:first-child { border-top: 0; } @media (max-width: 992px) { .prod-top > .col-lg-6 { order: -1; } .prod-top > .col-lg-5 { margin-top: 24px; } } .next-link { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 0; padding-top: 32px; border-top: var(--hair) solid var(--line); } .next-label { font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--track-tag); text-transform: uppercase; color: var(--text); } /* desk-17 */ /* ---------- Products index: each product's text left, its loop right (desk-01, desk-08) ---------- */ .prod-row { grid-template-columns: 1fr; } .prod-row .prod-tile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; align-items: center; } .prod-row .prod-tile .prod-text { order: -1; } .prod-row .tile-media { margin: 0; } @media (max-width: 992px) { .prod-row .prod-tile { grid-template-columns: 1fr; } .prod-row .prod-tile .prod-text { order: 0; } .prod-row .tile-media { margin: 0 0 20px; } } /* ---------- Home: the product tiles end on one line (desk-22); the examples and the pilot band (desk-14, desk-23) ---------- */ #products .prod-tile { display: flex; flex-direction: column; } #products .prod-tile .prod-text { flex: 1; display: flex; flex-direction: column; align-items: flex-start; } #products .prod-tile .mx-more { margin-top: auto; } .prod-tile .mx-more { font-size: var(--fs-label); } /* desk-21 */ #use-cases > .p-120-120 { padding-bottom: 72px; } #pilot { scroll-margin-top: var(--header-h); } /* every "Request a pilot" lands on the band, not on a strip of white above it */ .uc-more { margin-top: 48px; } @media (max-width: 992px) { #use-cases .uc-item:nth-child(5) { display: none; } } /* five on desktop, two rows of two below */ /* ---------- Example cards: the picture answers the pointer too (desk-27) ---------- */ .uc-item:hover .uc-title a, .uc-title a:focus-visible { color: var(--accent-text); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; } .uc-thumb img { transition: transform 0.4s var(--ease); } .uc-item:hover .uc-thumb img { transform: scale(1.03); } @media (prefers-reduced-motion: reduce) { .uc-thumb img { transition: none; } .uc-item:hover .uc-thumb img { transform: none; } } /* ---------- Use-case pages: the plan's corner marks (a camera's frame) only where ZENITH applies (brief, desk-02); the caption at most 62 characters a line (desk-07); product names as the product tiles show them (desk-21, mob-14) ---------- */ .figure:not(.live) .frame::after { display: none; } @media (max-width: 576px) { .figure .frame::after { inset: 8px; --vf-a: 12px; } } .figure figcaption { max-width: 30em; text-wrap: balance; } /* about 62 characters a line in this face (its 1ch is 0.73em, so 62ch would hold ~95) */ .tense-strip { margin-top: 0; } .ts-title a { display: inline-block; padding: 7px 0; text-decoration: none; } .ts-title a:hover, .ts-title a:focus-visible { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; } /* ---------- Type: one body size and one lead size (desk-21) ---------- */ .link span, .figure figcaption { font-size: var(--fs-small); } .pilot-lead, .phase p, .err-page p { font-size: 18px; } /* ---------- How we work: 'Phase N' large, the duration or scope small; the outcomes on the 732 line (desk-09, desk-08) ---------- */ @media (min-width: 993px) { .phase { grid-template-columns: 200px minmax(0, 1fr) minmax(0, 636px); } } .phase .dur small { margin-top: 8px; } /* ---------- Forms: visible labels above every field, 12px capitals (brief, desk-05, mob-12) ---------- */ .field-label { display: block; margin: 0 0 8px; font-size: var(--fs-label); font-weight: 600; line-height: 1.4; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text); } .pilot-form input, .contact-form input, .contact-form select, .contact-form textarea { width: 100%; margin-bottom: 20px; } .pilot-form .btn { margin-top: 4px; } .contact-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; } .contact-form .field { min-width: 0; } .contact-form .field-wide, .contact-form .form-note, .contact-form .btn, .contact-form .form-fallback { grid-column: 1 / -1; } .contact-form .btn { justify-self: start; } .form-note { margin: 0 0 24px; font-size: var(--fs-small); color: var(--text); } @media (max-width: 576px) { .contact-form { grid-template-columns: 1fr; } } /* ---------- Footer: the brand column ends at the 732 line; the e-mail and phone taps no longer overlap (desk-08, mob-14) ---------- */ @media (min-width: 993px) { .footer-grid { grid-template-columns: calc(50% - 12px) 1fr 1fr; } } .footer-contacts a.plain { display: block; width: fit-content; margin: 0; padding: 10px 0; } /* About: a short history intro under "Our history" */ .story-intro { color: var(--text, #333); font-size: 17px; line-height: 1.6; max-width: 34em; margin: 0; } @media (max-width: 992px) { .story-intro { margin-bottom: 8px; } } @media (min-width: 993px) { .story-head { position: sticky; top: calc(var(--header-h) + 32px); } } /* ---------------- product pages: "The science behind it" (how each product works, with the research behind it) ---------------- */ .sci-grid { list-style: none; margin: 48px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 64px; } .sci-item { min-width: 0; padding-top: 24px; border-top: var(--hair) solid var(--line); } .sci-item :is(h3, h4) { margin: 0 0 12px; color: var(--text-strong); } .sci-item p { margin: 0 0 16px; } .sci-refs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-label); line-height: 1.5; color: var(--text); } .sci-refs a { color: var(--accent-text); font-weight: 600; text-decoration: none; } .sci-refs a:hover, .sci-refs a:focus-visible { text-decoration: underline; } .sci-refs span { overflow-wrap: anywhere; } @media (max-width: 991px) { .sci-grid { grid-template-columns: 1fr; gap: 32px; margin-top: 32px; } } /* ---------- How it works: the steps a product runs, in order, with the methods behind each (inside The science behind it) ---------- */ .sci-sub { margin: 64px 0 0; } .how-steps { list-style: none; margin: 24px 0 0; padding: 0; } .how-step { display: grid; grid-template-columns: 48px minmax(0, 1fr) minmax(0, calc((100% - 64px) / 2)); gap: 24px 64px; padding: 32px 0; border-top: var(--hair) solid var(--line); } /* text ends and chips start on the research grid's two columns */ .how-n { font-size: 28px; font-weight: 600; line-height: 1; letter-spacing: -0.015em; color: var(--accent-text); font-variant-numeric: tabular-nums; padding-top: 2px; } .how-main h4 { margin: 0 0 12px; color: var(--text-strong); } .how-main p { margin: 0; } .how-main h4, .sci-item :is(h3, h4) { text-wrap: balance; } .how-main p, .sci-item p { text-wrap: pretty; } .how-methods { list-style: none; margin: 0; padding: 0; align-self: start; display: flex; flex-wrap: wrap; gap: 8px; } .how-methods li { font-size: var(--fs-label); font-weight: 600; line-height: 1.3; color: var(--text-strong); padding: 7px 10px; border: var(--hair) solid rgba(0, 0, 0, 0.16); border-radius: var(--radius); background: var(--white); } .science .sci-sub + .sci-grid { margin-top: 24px; } @media (max-width: 991px) { .sci-sub { margin-top: 48px; } .how-step { grid-template-columns: 40px minmax(0, 1fr); gap: 12px 16px; padding: 24px 0; } .how-n { font-size: 22px; } .how-methods { grid-column: 2; } } @media (max-width: 576px) { .how-step { grid-template-columns: minmax(0, 1fr); gap: 10px; } .how-n { font-size: 16px; padding-top: 0; } .how-methods { grid-column: 1; margin-top: 6px; } } /* ---------- Forms: the backend's honeypot field, and the thank-you line that replaces a sent form ---------- */ .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .form-sent { padding: 20px 24px; border: 1px solid var(--line); font-size: var(--fs-small); color: var(--text-strong); }