/* ========================================================================= BI & Automations · unified homepage (lab preview) One design system across DK's section picks: nav F · hero A + Style 1 art · clients K · numbers E · spaces F · automate, platform, tech, process, projects B · CTA + footer D. Base language: B (Mapbox). Rules: README.md. Single source: every colour, size, radius and timing is a token below. Sections are tone-driven:
switches the surface tokens, so any section reads right on any tone. ========================================================================= */ /* ---- Fonts: one family, Commissioner 300/400/500 (latin + greek). The Josefin wordmark lives only in the logo SVG. */ @font-face { font-family: "Commissioner"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fonts/commissioner-latin-300.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; } @font-face { font-family: "Commissioner"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/commissioner-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; } @font-face { font-family: "Commissioner"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/commissioner-latin-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212; } @font-face { font-family: "Commissioner"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fonts/commissioner-greek-300.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } @font-face { font-family: "Commissioner"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/commissioner-greek-400.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } @font-face { font-family: "Commissioner"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/commissioner-greek-500.woff2") format("woff2"); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } /* ========================================================================= 1 · REFERENCE TOKENS (CONTRACT.md palette, exact values) ========================================================================= */ :root { --white: #ffffff; --sky-50: #eef9fe; --sky-100: #d6f1fc; --sky-200: #ade3f8; --sky-300: #71caf2; --sky-400: #42bcec; --sky-500: #2d96d3; --sky-600: #1e73ba; --sky-700: #175fad; --sky-800: #134a87; --sky-900: #0f3a66; --navy-50: #f1f6fa; --navy-100: #dbe5ef; --navy-200: #b4c6d8; --navy-300: #9db3c7; --navy-400: #74889b; --navy-500: #4a6178; --navy-600: #114e73; --navy-700: #083a5d; --navy-800: #002849; --navy-900: #00182c; --navy-950: #000f1d; --aqua-200: #a8ece6; --aqua-400: #34d1c4; --aqua-600: #0c7a71; --aqua-800: #0a5650; --indigo-200: #c9cefc; --indigo-400: #7c8cf8; --indigo-600: #4655d4; --indigo-800: #2a3290; --ok: #3ccf91; --warn: #f2a93b; --alert: #ef5b5b; /* status: data only */ --cube-1: #71caf2; --cube-2: #3dade2; --cube-3: #2d96d3; --cube-4: #268bcb; --cube-5: #207ec2; --cube-6: #1e73ba; --cube-7: #1969b3; --cube-8: #175fad; --mask-solid: #000000; /* mask alpha only, never painted */ /* Surface tones (BRIEF decisions 46–47). JS reads these for the seams. */ --tone-deep: var(--navy-900); --tone-navy: var(--navy-800); --tone-steel: var(--navy-700); --tone-fog: var(--navy-100); --tone-mist: var(--navy-50); --tone-white: var(--white); --seam-haze: var(--sky-400); --seam-shade: var(--navy-800); /* Atmosphere (A's glow, kept faint) and overlays */ --glow-navy: rgb(0 40 73 / 0.5); --glow-sky: rgb(66 188 236 / 0.11); --glow-aqua: rgb(52 209 196 / 0.08); --glow-indigo: rgb(124 140 248 / 0.08); --grid-line: rgb(255 255 255 / 0.07); --grid-line-2: rgb(255 255 255 / 0.12); --scrim: rgb(0 15 29 / 0.55); --media-chip: rgb(0 15 29 / 0.72); --pulse-ring: rgb(66 188 236 / 0.55); --pulse-ring-0: rgb(66 188 236 / 0); --zone-core: var(--sky-100); --zone-glow: rgb(66 188 236 / 0.5); --zone-off: rgb(0 15 29 / 0.72); /* port map: lit / unlit buildings */ /* Type */ --font-sans: "Commissioner", system-ui, -apple-system, "Segoe UI", sans-serif; --fs-display-xl: clamp(2.5rem, 1.833rem + 2.963vw, 4.5rem); /* 40 → 72 · hero H1, key figures · 300 */ --fs-display: clamp(2.25rem, 1.75rem + 2.222vw, 3.75rem); /* 36 → 60 · CTA title, inner H1 · 300 */ --fs-h2: clamp(1.875rem, 1.5rem + 1.667vw, 3rem); /* 30 → 48 · section titles · 400 */ --fs-h3: clamp(1.25rem, 1.208rem + 0.185vw, 1.375rem); /* 20 → 22 · card titles · 500 */ --fs-lead: clamp(1.125rem, 1.083rem + 0.185vw, 1.25rem); /* 18 → 20 · intro paragraphs · 400 */ --fs-body: clamp(1rem, 0.979rem + 0.093vw, 1.0625rem); /* 16 → 17 · running text · 400 */ --fs-small: 0.9375rem; /* 15 · card text, buttons, links · 400/500 */ --fs-label: 0.875rem; /* 14 · tags, include pills, legal · 500 */ --fs-micro: 0.75rem; /* 12 · eyebrows, labels, chips · 500 · floor */ --fs-reading: clamp(1.125rem, 1.042rem + 0.37vw, 1.375rem); /* 18 → 22 · reading values (DataCards, control centre) · 400 */ --tr-display: -0.035em; --tr-h2: -0.025em; --tr-h3: -0.012em; --tr-caps: 0.08em; /* Space & layout */ --maxw: 1280px; --gutter: 16px; --section-y: 64px; --head-gap: 40px; --gap: 16px; --card-pad: 20px; --card-inset: 8px; --nav-h: 64px; /* Shape */ --r-pill: 999px; --r-card: 20px; --r-media: 12px; --r-chip: 8px; /* Motion: two curves, five durations, used everywhere */ --ease-std: cubic-bezier(0.2, 0, 0, 1); /* state changes: colour, swaps */ --ease-enter: cubic-bezier(0.16, 1, 0.3, 1); /* things arriving: reveals, menus, nudges */ --dur-fast: 160ms; --dur-base: 280ms; --dur-slow: 560ms; --dur-xslow: 1100ms; --dur-pulse: 2400ms; --dur-cycle: 4800ms; --dur-march: 1200ms; --z-nav: 60; --z-sheet: 90; --z-lab: 120; } @media (min-width: 640px) { :root { --gutter: 24px; --section-y: 96px; --head-gap: 48px; --card-pad: 24px; } } @media (min-width: 1024px) { :root { --gutter: 40px; --section-y: 128px; --head-gap: 64px; --gap: 24px; } } @media (min-width: 1180px) { :root { --nav-h: 76px; } } /* ========================================================================= 2 · TONE SYSTEM · light tones (white, mist, fog) and dark tones (deep, navy, steel) ========================================================================= */ [data-tone="white"], [data-tone="mist"], [data-tone="fog"] { color-scheme: light; --ink: var(--navy-800); --body: var(--navy-600); --muted: var(--navy-500); --link: var(--sky-700); --accent-ink: var(--sky-700); --focus: var(--sky-700); --cta: var(--sky-700); --cta-hover: var(--sky-800); --cta-ink: var(--white); --edge: var(--navy-500); /* control borders: ≥3:1 on every light tone */ --line: var(--navy-100); --card-line: var(--navy-100); --chip-line: var(--navy-400); --frame-bg: var(--navy-50); --frame-line: var(--navy-100); --read-bg: var(--white); --read-line: var(--navy-100); --read-ink: var(--navy-800); --read-label: var(--navy-500); --logo: var(--navy-500); --logo-hover: var(--navy-800); --app-bg: var(--white); --app-panel: var(--navy-50); --app-line: var(--navy-100); --input-bg: var(--white); --map-filter: grayscale(1) brightness(1.04) contrast(1.06); --s-city: var(--sky-400); --s-city-ink: var(--sky-700); --s-bld: var(--indigo-400); --s-bld-ink: var(--indigo-600); --s-hotel: var(--aqua-400); --s-hotel-ink: var(--aqua-800); --s-agri: var(--ok); --s-agri-ink: var(--aqua-800); --s-cross: var(--sky-300); --s-cross-ink: var(--sky-700); --pl-bg: var(--navy-50); --pl-floor: var(--white); --pl-line: var(--navy-200); --pl-strong: var(--navy-500); --pl-furn: var(--navy-100); --pl-soft: var(--white); --pl-curtain: var(--navy-400); --pl-road: var(--navy-200); --pl-zebra: var(--white); --pl-off: var(--navy-200); --pl-on: var(--sky-500); --pl-glow: rgb(45 150 211 / 0.22); --pl-ink: var(--navy-800); } [data-tone="white"] { --sf: var(--tone-white); --card: var(--navy-50); } [data-tone="mist"] { --sf: var(--tone-mist); --card: var(--white); } [data-tone="fog"] { --sf: var(--tone-fog); --card: var(--white); --line: var(--navy-200); --card-line: var(--white); --frame-bg: var(--white); } [data-tone="deep"], [data-tone="navy"], [data-tone="steel"] { color-scheme: dark; --ink: var(--white); --body: var(--navy-200); --muted: var(--navy-300); --link: var(--sky-400); --accent-ink: var(--sky-400); --focus: var(--sky-300); --cta: var(--sky-400); --cta-hover: var(--sky-300); --cta-ink: var(--navy-900); --edge: var(--navy-400); --line: var(--navy-700); --card-line: var(--navy-700); --chip-line: var(--navy-400); --frame-bg: var(--navy-950); --frame-line: var(--navy-700); --read-bg: var(--navy-900); --read-line: var(--navy-600); --read-ink: var(--white); --read-label: var(--navy-300); --logo: var(--navy-200); --logo-hover: var(--white); --app-bg: var(--navy-950); --app-panel: var(--navy-800); --app-line: var(--navy-700); --input-bg: var(--navy-900); --map-filter: invert(1) hue-rotate(180deg) saturate(0.9) brightness(1.08) contrast(1.1); --s-city: var(--sky-400); --s-city-ink: var(--sky-400); --s-bld: var(--indigo-400); --s-bld-ink: var(--indigo-200); --s-hotel: var(--aqua-400); --s-hotel-ink: var(--aqua-400); --s-agri: var(--ok); --s-agri-ink: var(--ok); --s-cross: var(--sky-300); --s-cross-ink: var(--sky-300); --pl-bg: var(--navy-900); --pl-floor: var(--navy-800); --pl-line: var(--navy-600); --pl-strong: var(--navy-300); --pl-furn: var(--navy-700); --pl-soft: var(--navy-600); --pl-curtain: var(--navy-300); --pl-road: var(--navy-800); --pl-zebra: var(--navy-300); --pl-off: var(--navy-600); --pl-on: var(--sky-300); --pl-glow: rgb(113 202 242 / 0.26); --pl-ink: var(--white); } [data-tone="deep"] { --sf: var(--tone-deep); --card: var(--navy-800); } [data-tone="navy"] { --sf: var(--tone-navy); --card: var(--navy-700); --line: var(--navy-600); --card-line: var(--navy-600); } [data-tone="steel"] { --sf: var(--tone-steel); --card: var(--navy-800); --line: var(--navy-600); --card-line: var(--navy-600); --app-panel: var(--navy-900); } /* Sector accent coding (decision 41): cities sky · buildings indigo · hotels aqua · farms soft green · crossings cube-light. Industry sits under Intelligent Buildings, villas under the hotel room automation. */ [data-s="city"] { --acc: var(--s-city); --acc-ink: var(--s-city-ink); } [data-s="bld"], [data-s="ind"] { --acc: var(--s-bld); --acc-ink: var(--s-bld-ink); } [data-s="hotel"] { --acc: var(--s-hotel); --acc-ink: var(--s-hotel-ink); } [data-s="agri"] { --acc: var(--s-agri); --acc-ink: var(--s-agri-ink); } [data-s="cross"] { --acc: var(--s-cross); --acc-ink: var(--s-cross-ink); } /* ========================================================================= 3 · BASE ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 8px); background: var(--tone-deep); } body { margin: 0; overflow-x: clip; font-family: var(--font-sans); font-size: var(--fs-body); font-weight: 400; line-height: 1.5; color: var(--navy-800); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; } ul, ol { padding: 0; list-style: none; } img, svg { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } button { background: none; border: 0; padding: 0; cursor: pointer; text-align: inherit; } h1, h2, h3 { text-wrap: balance; } p { text-wrap: pretty; } :focus-visible { outline: 2px solid var(--focus, var(--sky-300)); outline-offset: 3px; } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip { position: fixed; left: 16px; top: -64px; z-index: 200; padding: 12px 18px; border-radius: var(--r-pill); background: var(--sky-400); color: var(--navy-900); font-weight: 500; } .skip:focus { top: 12px; } .wrap { width: min(var(--maxw), 100% - 2 * var(--gutter)); margin-inline: auto; } .i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .i--sm { width: 16px; height: 16px; } [data-section] { position: relative; background-color: var(--sf); color: var(--body); } .sec { padding-block: var(--section-y); } .sec.is-cont { padding-top: calc(var(--section-y) / 2); } .sec.is-cont-next { padding-bottom: calc(var(--section-y) / 2); } /* ========================================================================= 4 · TYPE (one scale) ========================================================================= */ .display-xl { font-size: var(--fs-display-xl); font-weight: 300; line-height: 1.02; letter-spacing: var(--tr-display); color: var(--ink); } .display { font-size: var(--fs-display); font-weight: 300; line-height: 1.04; letter-spacing: var(--tr-display); color: var(--ink); } .h2 { font-size: var(--fs-h2); font-weight: 400; line-height: 1.1; letter-spacing: var(--tr-h2); color: var(--ink); } .h3 { font-size: var(--fs-h3); font-weight: 500; line-height: 1.22; letter-spacing: var(--tr-h3); color: var(--ink); } .lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--body); } .small { font-size: var(--fs-small); line-height: 1.5; color: var(--muted); } .data-label { font-size: var(--fs-micro); font-weight: 500; line-height: 1.3; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--muted); } .data-value { font-size: var(--fs-reading); font-weight: 400; line-height: 1.15; letter-spacing: -0.005em; font-variant-numeric: tabular-nums lining-nums; color: var(--ink); white-space: nowrap; } /* Commissioner has no tabular figures (tnum is a no-op), so live values reserve their widest form: */ .val { display: inline-grid; justify-items: start; } .val > *, .val::after { grid-area: 1 / 1; } .val::after { content: attr(data-ghost); visibility: hidden; pointer-events: none; } [lang="el"] .data-label, .data-label[lang="el"] { text-transform: none; letter-spacing: 0.02em; } /* Eyebrow: ONE treatment. Commissioner 500 caps, accent ink, sky dot. Labels: same type, no dot. */ .eyebrow, .label { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-micro); font-weight: 500; line-height: 1.3; letter-spacing: var(--tr-caps); text-transform: uppercase; } .eyebrow { color: var(--accent-ink); } .eyebrow::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--sky-400); } .eyebrow--live::before { animation: live var(--dur-pulse) var(--ease-enter) infinite; } .label { color: var(--muted); } /* Section header: default = split (title left, lead right). Variant = centred for showcase sections. */ .shead { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 24px 48px; align-items: end; margin-bottom: var(--head-gap); } .shead .h2 { margin-top: 16px; max-width: 16em; } .shead__lead { justify-self: end; max-width: 34rem; } .shead--center { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 0; } .shead--center .h2 { max-width: 18em; } .shead--center .shead__lead { justify-self: center; margin-top: 20px; max-width: 40rem; } /* ========================================================================= 5 · COMPONENTS ========================================================================= */ /* Buttons: primary · secondary · text link. Pill, 48px, same hover/focus everywhere. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 24px; border-radius: var(--r-pill); border: 1px solid transparent; font-size: var(--fs-small); font-weight: 500; line-height: 1; letter-spacing: -0.005em; white-space: nowrap; transition: background-color var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std); } .btn--primary { background: var(--cta); color: var(--cta-ink); } .btn--primary:hover { background: var(--cta-hover); } .btn--secondary { border-color: var(--edge); color: var(--ink); } .btn--secondary:hover { border-color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); } .btn--sm { height: 40px; padding: 0 16px; gap: 8px; } .btn--block { width: 100%; } .btn .i--arr { width: 18px; height: 18px; transition: translate var(--dur-base) var(--ease-enter); } .btn:hover .i--arr { translate: 3px 0; } .link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: var(--fs-small); font-weight: 500; color: var(--link); width: fit-content; text-decoration-line: underline; text-decoration-color: transparent; text-decoration-thickness: 1px; text-underline-offset: 5px; transition: text-decoration-color var(--dur-fast) var(--ease-std); } .link:hover, a:hover .link { text-decoration-color: currentColor; } .link .i { transition: translate var(--dur-base) var(--ease-enter); } .link:hover .i, a:hover .link .i { translate: 3px 0; } .round { width: 44px; height: 44px; flex: none; border-radius: 50%; display: inline-grid; place-items: center; border: 1px solid var(--edge); color: var(--ink); transition: border-color var(--dur-fast) var(--ease-std), background-color var(--dur-fast) var(--ease-std); } .round:hover { border-color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); } .round .i { grid-area: 1 / 1; width: 19px; height: 19px; transition: opacity var(--dur-base) var(--ease-std), rotate var(--dur-slow) var(--ease-enter); } .round .i-sun { opacity: 0; rotate: -60deg; } html[data-theme="dark"] .round .i-sun { opacity: 1; rotate: 0deg; } html[data-theme="dark"] .round .i-moon { opacity: 0; rotate: 60deg; } .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } /* Chips: sample slot · to confirm · on-media label · count */ .chip { display: inline-flex; align-items: center; gap: 8px; width: fit-content; max-width: 100%; min-height: 26px; padding: 4px 10px; border-radius: var(--r-chip); border: 1px dashed var(--chip-line); font-size: var(--fs-micro); font-weight: 500; line-height: 1.3; letter-spacing: 0.01em; color: var(--muted); white-space: normal; } .chip::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; } .chip--confirm { border-style: solid; border-color: var(--line); } .chip--confirm::before { border-radius: 1px; width: 6px; height: 6px; rotate: 45deg; } [data-tone="fog"] .chip--confirm { border-color: var(--navy-200); } .chip--media { border: 0; background: var(--media-chip); color: var(--white); } .chip--media::before { display: none; } .chip--count { border-style: solid; border-color: var(--line); color: var(--body); } .chip--count::before { display: none; } /* Tag: sector pill (tinted fill, sector dot, ink label) */ .tag { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px 0 10px; border-radius: var(--r-pill); width: fit-content; white-space: nowrap; background: color-mix(in srgb, var(--acc, var(--sky-400)) 16%, transparent); color: var(--ink); font-size: var(--fs-label); font-weight: 500; } .tag i { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--acc, var(--sky-400)); } .tag--sm { height: 28px; } .tag--link { transition: background-color var(--dur-fast) var(--ease-std); } .tag--link:hover { background: color-mix(in srgb, var(--ink) 12%, transparent); } .dot { display: inline-block; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--acc, var(--sky-400)); } /* Card: one radius, one border, no shadow; surface follows the tone */ .card { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--r-card); } /* Screenshot frame */ .frame { position: relative; overflow: hidden; border-radius: var(--r-media); background: var(--frame-bg); border: 1px solid var(--frame-line); isolation: isolate; } .map-img { filter: var(--map-filter); } /* Reading = DataCard: verbatim from the screen (label caps + value) */ .reading { display: inline-grid; gap: 4px; padding: 10px 14px; border-radius: var(--r-media); background: var(--read-bg); border: 1px solid var(--read-line); color: var(--read-ink); } .reading .data-label { display: inline-flex; align-items: center; gap: 8px; color: var(--read-label); } .reading .data-value { color: var(--read-ink); } .reading--float { position: absolute; z-index: 2; left: 12px; bottom: 12px; } .reading--row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; } .live { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); } .live-tag { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--ink); } .live-tag .live { animation: live var(--dur-pulse) var(--ease-enter) infinite; } @keyframes live { 0% { box-shadow: 0 0 0 0 var(--pulse-ring); } 70%, 100% { box-shadow: 0 0 0 8px var(--pulse-ring-0); } } /* Segmented pills (tabs): platform view, featured projects */ .pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; } .pills--center { justify-content: center; } .pill { display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px 0 14px; border-radius: var(--r-pill); border: 1px solid var(--edge); color: var(--body); font-size: var(--fs-small); font-weight: 500; white-space: nowrap; transition: background-color var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std); } .pill:hover { border-color: var(--ink); color: var(--ink); } .pill[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: var(--sf); } .pill[aria-selected="true"] .dot { background: currentColor; } /* Icon box */ .ico { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: var(--r-media); background: var(--sf); border: 1px solid var(--line); color: var(--acc-ink, var(--link)); transition: background-color var(--dur-base) var(--ease-std), color var(--dur-base) var(--ease-std), border-color var(--dur-base) var(--ease-std); } .ico .i { width: 22px; height: 22px; } /* Swap: stacked states in one grid cell (zero layout shift) */ .swap { display: inline-grid; vertical-align: top; } .swap > * { grid-area: 1 / 1; transition: opacity var(--dur-base) var(--ease-std), translate var(--dur-base) var(--ease-std), visibility 0s linear var(--dur-base); } .swap > :not(.is-on) { opacity: 0; translate: 0 0.35em; visibility: hidden; } .swap > .is-on { transition-delay: 0s; } /* Pins on maps */ .pin { position: absolute; z-index: 1; width: 0; height: 0; } .pin::before, .pin::after { content: ""; position: absolute; left: 0; top: 0; border-radius: 50%; } .pin::before { width: 10px; height: 10px; margin: -5px 0 0 -5px; background: var(--accent-ink); } .pin::after { width: 22px; height: 22px; margin: -11px 0 0 -11px; border: 2px solid var(--accent-ink); animation: ping var(--dur-pulse) var(--ease-enter) infinite; animation-delay: var(--d, 0s); } @keyframes ping { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(2.6); opacity: 0; } } /* One-time reveal (opacity + transform only: no layout shift) */ html.js .reveal:not(.is-in) { opacity: 0; transform: translateY(16px); } .reveal { transition: opacity var(--dur-slow) var(--ease-std), transform var(--dur-xslow) var(--ease-enter); } /* ========================================================================= 6 · NAV (F Planpoint, dark) + MEGA MENU BY SPACE + MOBILE SHEET ========================================================================= */ .nav { position: sticky; top: 0; z-index: var(--z-nav); background: transparent; border-bottom: 1px solid var(--line); } .nav::before { content: ""; position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--sf) 94%, transparent); -webkit-backdrop-filter: saturate(1.3) blur(14px); backdrop-filter: saturate(1.3) blur(14px); } .nav__bar { height: var(--nav-h); display: flex; align-items: center; gap: 32px; } .nav__logo { flex: none; display: block; } .nav__logo img { height: 27px; width: auto; } .nav__links { display: flex; align-items: center; gap: 4px; } .nav__link { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border-radius: var(--r-pill); font-size: var(--fs-small); font-weight: 500; color: var(--ink); white-space: nowrap; transition: background-color var(--dur-fast) var(--ease-std); } .nav__link:hover, .nav__link[aria-expanded="true"] { background: color-mix(in srgb, var(--ink) 9%, transparent); } .nav__link .i { color: var(--muted); transition: rotate var(--dur-base) var(--ease-enter); } .nav__link[aria-expanded="true"] .i { rotate: 180deg; } .nav__right { margin-left: auto; display: flex; align-items: center; gap: 8px; } .nav__lang { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 8px; font-size: var(--fs-label); font-weight: 500; color: var(--muted); } .nav__lang b { font-weight: 500; color: var(--ink); } .nav__cta { margin-left: 8px; } .nav__cta-s { display: none; } .nav__menu { display: none; } @media (min-width: 1180px) { /* logo left, links centred on the page, Contact us right (DK, 2026-10-31) */ .nav__bar { display: grid; grid-template-columns: 1fr auto 1fr; } .nav__logo { justify-self: start; } .nav__right { justify-self: end; margin-left: 0; } } .mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 2; padding-top: 12px; visibility: hidden; opacity: 0; transform: translateY(-8px); pointer-events: none; transition: opacity var(--dur-base) var(--ease-std), transform var(--dur-slow) var(--ease-enter), visibility 0s linear var(--dur-base); } .nav.is-mega .mega { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition: opacity var(--dur-base) var(--ease-std), transform var(--dur-slow) var(--ease-enter), visibility 0s; } .mega-scrim { position: fixed; inset: var(--nav-h) 0 0 0; z-index: 1; background: var(--scrim); opacity: 0; visibility: hidden; transition: opacity var(--dur-base) var(--ease-std), visibility 0s linear var(--dur-base); } .nav.is-mega .mega-scrim { opacity: 1; visibility: visible; transition: opacity var(--dur-base) var(--ease-std), visibility 0s; } .mega__panel { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 12px; padding: 12px; border-radius: var(--r-card); background: var(--card); border: 1px solid var(--card-line); } .mega__main { display: grid; gap: 16px; align-content: start; padding: 16px 12px 12px 16px; } .mega__head { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--line); } .mega__lead { font-size: var(--fs-small); color: var(--muted); } /* Solutions by industry (DK 2026-10-27): industries are vertical tabs, that industry's solutions next to them. Every panel sits in the same grid cell, so switching industries never changes the menu's height. */ .mind { display: grid; grid-template-columns: 296px minmax(0, 1fr); gap: 20px; } .mind__tabs { display: grid; gap: 2px; align-content: start; padding-right: 16px; border-right: 1px solid var(--line); } .mind__tab { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 12px; border-radius: var(--r-media); font-size: var(--fs-small); font-weight: 500; line-height: 1.25; color: var(--body); text-align: left; transition: background-color var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std); } .mind__tab .i { margin-left: auto; color: var(--accent-ink); opacity: 0; translate: -4px 0; transition: opacity var(--dur-fast) var(--ease-std), translate var(--dur-base) var(--ease-enter); } .mind__tab:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); color: var(--ink); } .mind__tab[aria-selected="true"] { background: color-mix(in srgb, var(--ink) 9%, transparent); color: var(--ink); } .mind__tab[aria-selected="true"] .i { opacity: 1; translate: 0 0; } .mind__panels { display: grid; } .mind__panel { grid-area: 1 / 1; display: grid; gap: 6px; align-content: start; } .mind__panel[hidden] { display: grid; visibility: hidden; } /* all panels share one cell: the tallest sets the height */ .mind__h { padding: 4px 12px 2px; } .mind__list { display: grid; gap: 2px; } .mind__proof { margin: 4px 12px 0; } .mlink { display: grid; gap: 3px; padding: 10px 12px; border-radius: var(--r-media); transition: background-color var(--dur-fast) var(--ease-std); } .mlink:hover, .mlink:focus-visible, .mlink.is-active { background: color-mix(in srgb, var(--ink) 7%, transparent); } .mlink__t { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: var(--fs-small); font-weight: 500; line-height: 1.3; color: var(--ink); } .mlink__d { padding-left: 17px; font-size: var(--fs-label); line-height: 1.4; color: var(--muted); } .mlink[aria-current="page"] .mlink__t { color: var(--accent-ink); } .mlink__flag { display: inline-flex; align-items: center; min-height: 22px; padding: 2px 8px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--acc, var(--sky-400)) 22%, transparent); font-size: var(--fs-micro); font-weight: 500; line-height: 1.2; letter-spacing: 0.01em; color: var(--ink); white-space: nowrap; } .mega__also { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 14px; border-top: 1px solid var(--line); } .mega__also .label { margin-right: 6px; } .mega__feature { display: grid; gap: 12px; align-content: start; padding: 10px; border-radius: var(--r-media); background: var(--sf); } .mfeat__frame { position: relative; padding: 42px 14px 14px; border-radius: var(--r-media); overflow: hidden; background-color: var(--sky-700); background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px), linear-gradient(var(--grid-line-2) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line-2) 1px, transparent 1px); background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px; background-position: -1px -1px; } .mfeat__badge { position: absolute; left: 14px; top: 10px; } .mfeat__screen { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-chip); overflow: hidden; background: var(--navy-800); outline: 3px solid var(--white); outline-offset: 0; } .mfeat__screen img { width: 100%; height: 100%; object-fit: cover; } .mfeat__dots i { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--fdot, var(--aqua-400)); outline: 2px solid var(--white); transition: left var(--dur-slow) var(--ease-enter), top var(--dur-slow) var(--ease-enter); } .mfeat__cap { font-size: var(--fs-label); font-weight: 500; color: var(--ink); padding-inline: 4px; } .mega__feature .reading { width: 100%; } .mega__feature .reading[hidden] { display: none; } /* screens without a verbatim reading (Trikala, port, poles, illustrations) */ .mega__feature .link { padding-inline: 4px; } .sheet { position: fixed; inset: 0; z-index: var(--z-sheet); overflow-y: auto; overscroll-behavior: contain; background: var(--sf); visibility: hidden; opacity: 0; transform: translateY(12px); transition: opacity var(--dur-base) var(--ease-std), transform var(--dur-slow) var(--ease-enter), visibility 0s linear var(--dur-base); } .nav.is-sheet .sheet { visibility: visible; opacity: 1; transform: none; transition: opacity var(--dur-base) var(--ease-std), transform var(--dur-slow) var(--ease-enter), visibility 0s; } .sheet__top { height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; } .sheet__logo { height: 24px; width: auto; } .sheet__body { display: grid; gap: 16px; padding: 12px 0 32px; } /* Phone menu: one expandable row per industry, its solutions inside (the page's own industry opens) */ .sheet__inds { border-top: 1px solid var(--line); } .sheet__ind { border-bottom: 1px solid var(--line); } .sheet__inds > li:last-child .sheet__ind { border-bottom: 0; } /* the links list below brings its own top rule */ .sheet__ind summary { display: flex; align-items: center; gap: 12px; min-height: 56px; list-style: none; cursor: pointer; font-size: var(--fs-h3); font-weight: 400; color: var(--ink); } .sheet__ind summary::-webkit-details-marker { display: none; } .sheet__ind summary .i { margin-left: auto; color: var(--link); transition: rotate var(--dur-base) var(--ease-enter); } .sheet__ind[open] summary .i { rotate: 180deg; } .sheet__menu { display: grid; padding: 0 0 12px 19px; } .sheet__menu a { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-height: 44px; font-size: var(--fs-small); font-weight: 500; color: var(--ink); } .sheet__menu a[aria-current="page"] { color: var(--accent-ink); } .sheet__links { border-top: 1px solid var(--line); } .sheet__links a { display: flex; align-items: center; justify-content: space-between; min-height: 56px; border-bottom: 1px solid var(--line); font-size: var(--fs-h3); font-weight: 400; color: var(--ink); } .sheet__links .i { color: var(--link); } .sheet__foot { display: grid; gap: 12px; padding-top: 4px; } .sheet__tools { display: flex; align-items: center; justify-content: space-between; } /* ========================================================================= 7 · HERO (A Ameba layout + motion, Style 1 "Blueprint line" art) ========================================================================= */ .hero { overflow: hidden; isolation: isolate; display: grid; align-content: center; min-height: max(calc(100svh - var(--nav-h)), 40rem); } .hero__art { position: absolute; inset: 0; z-index: 0; background: radial-gradient(52% 62% at 66% 56%, var(--glow-navy), transparent 72%); } .hero__art img { position: absolute; right: 0; bottom: 0; width: min(94%, 1800px); height: auto; max-width: none; -webkit-mask-image: linear-gradient(180deg, transparent 0%, var(--mask-solid) 4%), linear-gradient(90deg, transparent 0%, var(--mask-solid) 7%); -webkit-mask-composite: source-in; mask-image: linear-gradient(180deg, transparent 0%, var(--mask-solid) 4%), linear-gradient(90deg, transparent 0%, var(--mask-solid) 7%); mask-composite: intersect; } .hero__glow { position: absolute; inset: 0; z-index: 1; pointer-events: none; background: radial-gradient(38% 52% at 13% 48%, var(--glow-sky), transparent 72%), radial-gradient(26% 36% at 2% 96%, var(--glow-aqua), transparent 72%), radial-gradient(24% 30% at 70% 6%, var(--glow-indigo), transparent 72%); } .hero__seam { position: absolute; inset: 0; z-index: 1; pointer-events: none; } .hero__in { position: relative; z-index: 2; padding-block: 48px 112px; } .hero__copy { max-width: min(30rem, 35vw); } .hero .display-xl { margin-top: 20px; } .hero .lead { margin-top: 24px; max-width: 26rem; } .hero .actions { margin-top: 36px; } html.js .hero__copy > * { opacity: 0; transform: translateY(14px); } html.js.is-loaded .hero__copy > * { opacity: 1; transform: none; transition: opacity var(--dur-xslow) var(--ease-enter), transform var(--dur-xslow) var(--ease-enter); } html.js.is-loaded .hero__copy > :nth-child(2) { transition-delay: 90ms; } html.js.is-loaded .hero__copy > :nth-child(3) { transition-delay: 180ms; } html.js.is-loaded .hero__copy > :nth-child(4) { transition-delay: 270ms; } .ticker { position: absolute; z-index: 2; left: 0; right: 0; bottom: 28px; width: min(var(--maxw), 100% - 2 * var(--gutter)); margin-inline: auto; display: flex; flex-wrap: wrap; gap: 10px 28px; } .ticker li { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--muted); transition: color var(--dur-slow) var(--ease-std); } .ticker li.is-on { color: var(--ink); } .dia { flex: none; width: 7px; height: 7px; rotate: 45deg; border: 1px solid var(--acc); transition: background-color var(--dur-slow) var(--ease-std); } .ticker li.is-on .dia { background: var(--acc); } /* ========================================================================= 8 · CLIENTS (two-row moving strip, ported from k.html) ========================================================================= */ .clients { padding-block: 32px 36px; border-bottom: 1px solid var(--line); } .clients__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-bottom: 20px; } .clients__label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; } .clients__tools { display: flex; align-items: center; gap: 16px; } .clients__tools .btn { padding: 0 14px 0 12px; } .clients__tools .i-play, .clients.is-paused .clients__tools .i-pause { display: none; } .clients.is-paused .clients__tools .i-play { display: block; } .mq-rows { display: grid; gap: 8px; outline-offset: -2px; } .mq { --item: 176px; --mq-gap: 20px; overflow: hidden; min-width: 0; -webkit-mask-image: linear-gradient(90deg, transparent, var(--mask-solid) 96px, var(--mask-solid) calc(100% - 96px), transparent); mask-image: linear-gradient(90deg, transparent, var(--mask-solid) 96px, var(--mask-solid) calc(100% - 96px), transparent); } .mq__track { display: flex; width: max-content; animation: mq var(--mq-dur, 96s) linear infinite; } .mq--reverse .mq__track { animation-direction: reverse; } .mq__group { display: flex; gap: var(--mq-gap); padding-right: var(--mq-gap); } .mq__group > li { flex: none; width: var(--item); } .mq-rows:hover .mq__track, .mq-rows:focus-within .mq__track, .clients.is-paused .mq__track { animation-play-state: paused; } @keyframes mq { from { transform: translateX(0); } to { transform: translateX(-50%); } } .logo { display: block; width: 100%; aspect-ratio: 12 / 5; background: var(--logo); -webkit-mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; mask-position: center; mask-size: contain; mask-repeat: no-repeat; transition: background-color var(--dur-fast) var(--ease-std); } .mq__group li:hover .logo { background: var(--logo-hover); } /* ========================================================================= 9 · NUMBERS (E Dala) ========================================================================= */ .nums { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 24px; } .num { display: grid; align-content: start; gap: 14px; } .num__v { order: 1; font-size: var(--fs-display-xl); font-weight: 300; line-height: 0.92; letter-spacing: -0.04em; color: var(--ink); white-space: nowrap; } .num__v small { margin-left: 0.06em; font-size: 0.42em; letter-spacing: -0.01em; color: var(--muted); } .num__marks { order: 2; display: flex; flex-wrap: wrap; gap: 4px; min-height: 10px; color: var(--accent-ink); } .num__label { order: 3; max-width: 15rem; min-height: 2.8em; font-size: var(--fs-micro); font-weight: 500; line-height: 1.4; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--muted); } .num > dd:last-child:not(.num__v):not(.num__marks) { order: 4; } .slot { color: var(--muted); letter-spacing: -0.06em; } .tri { width: 8px; height: 8px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; } .num__marks .tri { opacity: 0; transform: translateY(4px); transition: opacity var(--dur-base) var(--ease-std), transform var(--dur-base) var(--ease-enter); transition-delay: calc(var(--k) * 35ms); } .nums.is-in .num__marks .tri, html:not(.js) .num__marks .tri { opacity: 1; transform: none; } .nums__note { margin-top: 56px; display: flex; flex-wrap: wrap; gap: 12px 28px; font-size: var(--fs-small); font-weight: 500; color: var(--body); } .nums__note span { display: inline-flex; align-items: center; gap: 10px; } .nums__note .tri { width: 10px; height: 10px; color: var(--accent-ink); } /* ========================================================================= 10 · SPACES (F Planpoint) ========================================================================= */ .sp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); } .sp-grid > li { display: flex; } .sp-all { margin-top: 32px; text-align: center; } .sp { display: flex; flex-direction: column; width: 100%; padding: var(--card-inset); transition: transform var(--dur-slow) var(--ease-enter), border-color var(--dur-base) var(--ease-std); } .sp:hover { transform: translateY(-3px); border-color: var(--edge); } .sp__media { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: var(--r-media); overflow: hidden; background: var(--frame-bg); } .sp__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.03); transition: opacity var(--dur-slow) var(--ease-std), transform var(--dur-xslow) var(--ease-enter); } .sp__media img.is-on { opacity: 1; transform: none; } .sp__media--villa { background: var(--navy-800); } .sp__count { position: absolute; z-index: 2; left: 10px; top: 10px; } .villa { position: absolute; inset: 0; width: 100%; height: 100%; } .sp__body { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 18px 12px 6px; } .sp__d { font-size: var(--fs-small); line-height: 1.5; color: var(--body); } .sp__inc { display: flex; flex-wrap: wrap; gap: 6px; } .sp__inc span { display: inline-flex; align-items: center; height: 28px; padding: 0 10px; border-radius: var(--r-pill); border: 1px solid var(--line); font-size: var(--fs-label); font-weight: 500; color: var(--ink); } [data-tone="fog"] .sp__inc span { border-color: var(--navy-100); } .sp__go { margin-top: auto; } /* generated villa scene, brand palette */ .v-bg { fill: var(--navy-800); } .v-plot { fill: var(--navy-700); } .v-pool { fill: var(--aqua-400); opacity: 0.55; } .v-deck { fill: var(--navy-600); } .v-wl { fill: var(--sky-800); } .v-wr { fill: var(--sky-700); } .v-roof { fill: var(--sky-500); } .v-roof--hi { fill: var(--sky-300); } .v-win path { fill: var(--sky-300); } .v-ripple { stroke: var(--aqua-200); stroke-width: 2; stroke-linecap: round; opacity: 0.7; } .v-ping { fill: var(--sky-300); } .v-ring { fill: none; stroke: var(--sky-300); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: vring var(--dur-pulse) var(--ease-enter) infinite; } @keyframes vring { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(3); opacity: 0; } } /* ========================================================================= 11 · AUTOMATE (B Mapbox: exploded layers + icon grid) ========================================================================= */ .au { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px; align-items: center; } .au__stack { position: relative; height: 600px; perspective: 1600px; perspective-origin: 50% 0%; } .stack { position: absolute; z-index: 1; left: 50%; top: 67%; width: 260px; height: 260px; margin: -130px 0 0 -130px; transform-style: preserve-3d; transform: rotateX(58deg) rotateZ(-42deg); } .slab { position: absolute; inset: 0; display: grid; place-items: center; border-radius: var(--r-card); transform: translateZ(calc(var(--z, 0) * 40px)); background: color-mix(in srgb, var(--card) 62%, transparent); border: 1px solid color-mix(in srgb, var(--edge) 40%, transparent); color: var(--acc-ink); transition: transform var(--dur-slow) var(--ease-enter), background-color var(--dur-base) var(--ease-std), border-color var(--dur-base) var(--ease-std); } .slab .i { width: 48px; height: 48px; opacity: 0; transition: opacity var(--dur-base) var(--ease-std); } .slab.is-on { transform: translateZ(calc(var(--z, 0) * 40px + 36px)); background: color-mix(in srgb, var(--acc) 26%, transparent); border-color: var(--acc); } .slab.is-on .i { opacity: 1; } .slab--base { overflow: hidden; border-color: var(--edge); background: var(--frame-bg); } .slab--base img { width: 100%; height: 100%; object-fit: cover; opacity: 0.9; } .au__cap { position: absolute; z-index: 2; left: 0; right: 0; top: 0; display: flex; justify-content: center; align-items: baseline; gap: 12px; } .au__name { font-size: var(--fs-h3); font-weight: 500; letter-spacing: var(--tr-h3); color: var(--ink); } .au__base { position: absolute; left: 0; right: 0; bottom: 0; text-align: center; } .au__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); } .ai { display: flex; flex-direction: column; gap: 10px; padding: var(--card-pad); transition: border-color var(--dur-base) var(--ease-std); } .ai .ico { margin-bottom: 6px; } .ai__d { font-size: var(--fs-small); line-height: 1.5; color: var(--body); } .ai .chip { margin-top: auto; } .ai.is-on { border-color: var(--acc); } .ai.is-on .ico { background: var(--acc); border-color: var(--acc); color: var(--navy-900); } /* ========================================================================= 12 · PLATFORM · interactive control centre (demo, tone-aware app frame) ========================================================================= */ .ccx { --ccx-gap: 14px; border-radius: var(--r-card); border: 1px solid var(--app-line); background: var(--app-bg); overflow: hidden; } .ccx__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 14px 18px; border-bottom: 1px solid var(--app-line); } /* the mark top-left, like the real control screens: lockup ≥640, the icon alone on phones; clear space ≥ 0.5 × icon width (8px) */ .ccx__brand { display: inline-flex; align-items: center; flex: none; padding-right: 16px; border-right: 1px solid var(--app-line); } .ccx__lockup { height: 24px; width: auto; } .ccx__icon { display: none; height: 24px; width: auto; } .ccx__lockup.on-light { display: none; } :is([data-tone="white"], [data-tone="mist"], [data-tone="fog"]) .ccx__lockup.on-light { display: block; } :is([data-tone="white"], [data-tone="mist"], [data-tone="fog"]) .ccx__lockup.on-dark { display: none; } .ccx__title { margin-right: auto; display: grid; gap: 2px; min-width: 0; } .ccx__name { font-size: var(--fs-small); font-weight: 500; color: var(--ink); } .ccx__sub { font-size: var(--fs-label); color: var(--muted); } .ccx__body { display: grid; grid-template-columns: 208px minmax(0, 1fr) 256px; } .ccx__nav { display: flex; flex-direction: column; gap: 4px; padding: 12px 10px; border-right: 1px solid var(--app-line); } .ccx__tab { display: grid; grid-template-columns: 20px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px; border-radius: var(--r-media); text-align: left; transition: background-color var(--dur-fast) var(--ease-std); } .ccx__tab .i { color: var(--acc-ink); } .ccx__tab b { display: block; font-size: var(--fs-small); font-weight: 500; line-height: 1.25; color: var(--ink); } .ccx__tab small { display: block; font-size: var(--fs-label); line-height: 1.3; color: var(--muted); } .ccx__tab:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); } .ccx__tab[aria-selected="true"] { background: var(--app-panel); outline: 1px solid var(--app-line); outline-offset: -1px; } .ccx__tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; } .ccx__main { display: grid; padding: 18px; min-width: 0; } .ccv { grid-area: 1 / 1; display: flex; flex-direction: column; gap: var(--ccx-gap); min-width: 0; visibility: hidden; opacity: 0; transition: opacity var(--dur-base) var(--ease-std), visibility 0s linear var(--dur-base); } .ccv.is-on { visibility: visible; opacity: 1; transition-delay: 0s; } .ccv__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; min-height: 44px; } .ccv__t { font-size: var(--fs-h3); font-weight: 500; line-height: 1.2; letter-spacing: var(--tr-h3); color: var(--ink); } .ccv__s { margin-top: 2px; font-size: var(--fs-label); color: var(--muted); } .ccv__acts { display: flex; flex-wrap: wrap; gap: 8px; } .ccv__kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .reading--tile { display: grid; align-content: start; gap: 6px; padding: 12px 14px; background: var(--app-panel); border-color: var(--app-line); } .reading--set .stepper { margin-block: -6px; } .rd__src { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--muted); } .rd__src::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); } .ccx.is-sim .rd__src[data-src]::before { background: transparent; border: 1.5px solid currentColor; } .stepper { display: inline-flex; align-items: center; gap: 10px; } .round--sm { width: 40px; height: 40px; } .ccv__map { aspect-ratio: 1280 / 508; } .ccv__map > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 100%; } .ccv__map--16x9 { aspect-ratio: auto; min-height: 260px; } .ccv__map--16x9 > img { object-position: 50% 50%; } .zone { position: absolute; z-index: 1; width: 9%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; cursor: pointer; background: radial-gradient(circle, var(--zone-core) 0 14%, var(--zone-glow) 30%, transparent 68%); transition: opacity var(--dur-base) var(--ease-std); } .zone:not(.is-on) { background: radial-gradient(circle, var(--zone-off) 0 34%, transparent 66%); } .zones { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; } .sw { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px 0 10px; border-radius: var(--r-media); border: 1px solid var(--app-line); background: var(--app-panel); font-size: var(--fs-label); font-weight: 500; color: var(--ink); text-align: left; transition: border-color var(--dur-fast) var(--ease-std); } .sw:hover { border-color: var(--edge); } .sw__t { position: relative; flex: none; width: 34px; height: 20px; border-radius: var(--r-pill); background: var(--edge); transition: background-color var(--dur-fast) var(--ease-std); } .sw__t::after { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--app-bg); transition: translate var(--dur-base) var(--ease-enter); } .sw[aria-checked="true"] .sw__t { background: var(--accent-ink); } .sw[aria-checked="true"] .sw__t::after { translate: 14px 0; } .sw__l { flex: 1; min-width: 0; } .sw__s { font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--muted); } .sws { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; } .sws--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sws--2 .sw__s { display: none; } /* the knob and track carry the state (≥3:1); no room for the word in two columns */ .sw { white-space: nowrap; } .ccv__split { flex: 1; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--ccx-gap); align-items: stretch; } .ccv__vis { position: relative; min-height: 240px; border-radius: var(--r-media); overflow: hidden; border: 1px solid var(--app-line); background: var(--pl-bg); } .ccv__vis svg { position: absolute; inset: 0; } .ccv__vis svg { width: 100%; height: 100%; } .ccv__ctl { display: grid; gap: 12px; align-content: start; min-width: 0; } .ccv__note { color: var(--muted); } .cgroup { display: grid; gap: 8px; align-content: start; min-width: 0; } .cgroup--row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .segs { display: flex; flex-wrap: wrap; gap: 6px; } .segs button { min-height: 40px; padding: 0 14px; border-radius: var(--r-pill); border: 1px solid var(--edge); font-size: var(--fs-label); font-weight: 500; color: var(--body); transition: background-color var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std); } .segs button:hover { border-color: var(--ink); color: var(--ink); } .segs button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--app-bg); } .state { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--app-line); background: var(--app-panel); font-size: var(--fs-label); font-weight: 500; color: var(--ink); } .state .dot { background: var(--edge); } .state.is-on .dot { background: var(--ok); } .legend { display: flex; flex-wrap: wrap; gap: 8px 16px; } .legend li { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-label); font-weight: 500; color: var(--body); } .st { width: 8px; height: 8px; flex: none; border-radius: 50%; } .st--alert { background: var(--alert); } .st--warn { background: var(--warn); } .st--ok { background: var(--ok); } .pil { position: absolute; z-index: 2; width: 28px; height: 28px; translate: -50% -50%; border-radius: 50%; display: grid; place-items: center; --pil: var(--ok); } .pil[data-st="warn"] { --pil: var(--warn); } .pil[data-st="fault"] { --pil: var(--alert); } .pil::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--pil); border: 3px solid var(--white); outline: 2px solid var(--navy-900); } .pil:not([data-st="ok"]):not(.is-ack)::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; border: 2px solid var(--pil); animation: ping var(--dur-pulse) var(--ease-enter) infinite; } .pil[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: -3px; } .pil:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; } .pilcard { display: grid; gap: 6px; padding: 14px; border-radius: var(--r-media); border: 1px solid var(--app-line); background: var(--app-panel); } .pilcard__t { font-size: var(--fs-small); font-weight: 500; color: var(--ink); } .pilcard__st { display: flex; align-items: center; gap: 8px; font-size: var(--fs-label); color: var(--body); } .pilcard__go { margin-top: 4px; justify-items: start; align-items: center; min-height: 40px; } .sched { display: grid; } .sched li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; border-bottom: 1px solid var(--app-line); font-size: var(--fs-label); color: var(--body); } .sched li:last-child { border-bottom: 0; } .sched b { font-size: var(--fs-small); font-weight: 500; font-variant-numeric: tabular-nums lining-nums; color: var(--ink); } .cells { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .cell { display: grid; gap: 4px; padding: 10px 12px; border-radius: var(--r-media); border: 1px solid var(--app-line); background: var(--app-panel); transition: border-color var(--dur-fast) var(--ease-std); } .cell b { font-size: var(--fs-small); font-weight: 500; color: var(--ink); } .cell.is-on { border-color: var(--accent-ink); } .cell.is-on b { color: var(--accent-ink); } .ccx__alarms { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 16px 14px; border-left: 1px solid var(--app-line); } .alarms { display: grid; gap: 8px; } .al { display: grid; grid-template-columns: 8px minmax(0, 1fr); gap: 6px 10px; padding: 10px 12px; border-radius: var(--r-media); border: 1px solid var(--app-line); background: var(--app-panel); } .al .st { margin-top: 6px; } .al__txt b { display: block; font-size: var(--fs-label); font-weight: 500; line-height: 1.35; color: var(--ink); } .al__txt span { display: block; font-size: var(--fs-label); line-height: 1.35; color: var(--muted); } .al__go { grid-column: 2; justify-items: start; align-items: center; } .al__done { display: inline-flex; align-items: center; min-height: 40px; font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--muted); } .al.is-ack .st { background: var(--edge); } .ccx__altip { margin-top: auto; font-size: var(--fs-label); } /* schematic drawings (generated, tone-aware) */ .pl-bg { fill: var(--pl-bg); } .pl-floor { fill: var(--pl-floor); stroke: var(--pl-line); stroke-width: 1; } .pl-wall { fill: none; stroke: var(--pl-strong); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; } .pl-thin { fill: none; stroke: var(--pl-line); stroke-width: 1.5; } .pl-furn { fill: var(--pl-furn); stroke: var(--pl-line); stroke-width: 1.2; } .pl-soft { fill: var(--pl-soft); } .pl-ac, .pl-door, .car { fill: var(--pl-strong); } .pl-air path { fill: none; stroke: var(--pl-on); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 4 6; opacity: 0; transition: opacity var(--dur-base) var(--ease-std); } .plan.is-air .pl-air path { opacity: 1; animation: march var(--dur-march) linear infinite; } .pl-glass { fill: none; stroke: var(--pl-on); stroke-width: 3; } .pl-curtain { fill: var(--pl-curtain); transform-box: fill-box; transition: transform var(--dur-slow) var(--ease-enter); } .pl-curtain--l { transform-origin: left center; } .pl-curtain--r { transform-origin: right center; } .plan:not(.is-closed) .pl-curtain { transform: scaleX(0.18); } .pl-halo { fill: var(--pl-glow); opacity: 0; transition: opacity var(--dur-base) var(--ease-std); } .pl-bulb { fill: var(--pl-off); transition: fill var(--dur-base) var(--ease-std); } .pl-light.is-on .pl-halo { opacity: 1; } .pl-light.is-on .pl-bulb { fill: var(--pl-on); } .pl-band { fill: var(--pl-furn); } .flr .win rect { fill: var(--pl-off); transition: fill var(--dur-base) var(--ease-std); } .flr.is-on .win rect { fill: var(--pl-on); } .pl-road { fill: var(--pl-road); } .pl-lane { fill: none; stroke: var(--pl-line); stroke-width: 2; stroke-dasharray: 10 10; } .pl-zebra rect { fill: var(--pl-zebra); } .pl-pole { fill: none; stroke: var(--pl-strong); stroke-width: 3; stroke-linecap: round; } .studs circle, .flood, .det { fill: var(--pl-off); transition: fill var(--dur-fast) var(--ease-std); } .sign rect { fill: var(--pl-off); stroke: var(--pl-strong); stroke-width: 1.5; transition: fill var(--dur-fast) var(--ease-std); } .cone { fill: var(--pl-glow); opacity: 0; transition: opacity var(--dur-base) var(--ease-std); } .det-ring { fill: none; stroke: var(--pl-on); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; } .ped { fill: none; stroke: var(--pl-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 4000ms linear; } .ped circle { fill: var(--pl-ink); stroke: none; } .xing.is-det .det { fill: var(--pl-on); } .xing.is-det .det-ring { animation: ping var(--dur-xslow) var(--ease-enter) 3; } .xing.is-studs .studs circle { fill: var(--pl-on); animation: blink var(--dur-slow) steps(2, jump-none) infinite; } .xing.is-signs .sign rect { fill: var(--pl-on); animation: blink var(--dur-xslow) steps(2, jump-none) infinite; } .xing.is-flood .flood { fill: var(--pl-on); } .xing.is-flood .cone { opacity: 1; } .xing.is-walk .ped { transform: translateY(176px); } @keyframes blink { 50% { opacity: 0.35; } } /* proof strip + points */ .proof { margin-top: 32px; display: grid; gap: 14px; } .proof__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); } .proof__img { aspect-ratio: 16 / 9; } .proof__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .proof figcaption { margin-top: 8px; font-size: var(--fs-label); } .pf__points { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); } .pf__points li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; font-size: var(--fs-small); line-height: 1.55; color: var(--body); } .pf__points .i { color: var(--accent-ink); margin-top: 1px; } .pf__points b { font-weight: 500; color: var(--ink); } /* ========================================================================= 13 · TECH (B Mapbox: typeset protocol wall) ========================================================================= */ .tech__label { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 16px; } .tech__label--center { justify-content: center; margin-bottom: 0; } .proto { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--line); } .proto li { display: grid; align-content: start; gap: 14px; padding: 36px 24px 32px; border-left: 1px solid var(--line); transition: background-color var(--dur-base) var(--ease-std); } .proto li:nth-child(4n+1) { border-left: 0; padding-left: 0; } .proto li:nth-child(n+5) { border-top: 1px solid var(--line); } .proto li:not(.proto__tbc):hover { background: var(--card); } .proto b { font-size: var(--fs-h2); font-weight: 300; letter-spacing: -0.03em; line-height: 1; color: var(--ink); } .proto__tbc { align-content: center !important; } .brands { margin-top: 48px; display: grid; justify-items: center; gap: 20px; text-align: center; } .brands ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 56px; } .brands li { font-size: var(--fs-h3); font-weight: 400; letter-spacing: -0.015em; color: var(--muted); transition: color var(--dur-base) var(--ease-std); } .brands li:hover { color: var(--ink); } /* ========================================================================= 14 · PROCESS (B Mapbox: route with four stops) ========================================================================= */ .route { position: relative; height: 40px; margin-bottom: 16px; } .route svg { position: absolute; inset: 0; width: 100%; height: 100%; } .route__base { fill: none; stroke: var(--line); stroke-width: 3; stroke-linecap: round; } .route__line { fill: none; stroke: var(--accent-ink); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 2 12; animation: march var(--dur-march) linear infinite; } @keyframes march { to { stroke-dashoffset: -14; } } .route i { position: absolute; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: var(--sf); border: 3px solid var(--accent-ink); } /* the route arrives at the mark: a surface-coloured pad keeps the clear space (0.5 × icon width) free of the line */ .route__mark { position: absolute; top: 50%; translate: -50% -50%; padding: 12px; background: var(--sf); } .route__mark img { width: 25px; height: 40px; } .steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); } .step { display: flex; flex-direction: column; gap: 12px; padding: var(--card-pad); } .step__n { color: var(--acc-ink); } .step p { font-size: var(--fs-small); line-height: 1.55; color: var(--body); } .step__out { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); font-weight: 500; color: var(--ink); } .step__out .i { color: var(--acc-ink); stroke-width: 2; } .step .chip.step__out { margin-top: auto; padding-top: 4px; font-weight: 400; color: var(--muted); } /* ========================================================================= 15 · PROJECTS (B Mapbox: story switcher + rail) ========================================================================= */ .story { display: grid; grid-template-columns: 55fr 45fr; gap: 8px; padding: var(--card-inset); } .story__media { aspect-ratio: 16 / 10.5; perspective: 1000px; perspective-origin: 50% 0%; } .story__media > img, .smap { opacity: 0; transition: opacity var(--dur-slow) var(--ease-std), transform var(--dur-xslow) var(--ease-enter); } .story__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.03); } .story__media > img.is-on, .smap.is-on { opacity: 1; } .story__media > img.is-on { transform: none; } .smap { position: absolute; left: -20%; right: -20%; top: -34%; bottom: -22%; transform: rotateX(46deg) scale(1.03); transform-origin: 50% 100%; } .smap.is-on { transform: rotateX(46deg); } .smap img { width: 100%; height: 100%; object-fit: cover; } .story__dcs { position: absolute; z-index: 2; left: 16px; right: 16px; bottom: 16px; display: grid; } .story__dcs > .dcs { grid-area: 1 / 1; display: flex; flex-wrap: wrap; gap: 8px; align-items: end; opacity: 0; visibility: hidden; transition: opacity var(--dur-base) var(--ease-std), visibility 0s linear var(--dur-base); } .story__dcs > .dcs.is-on { opacity: 1; visibility: visible; transition-delay: 0s; } .story__stack { display: grid; } .story__body { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 16px; padding: 24px 24px 16px 20px; opacity: 0; visibility: hidden; translate: 0 8px; transition: opacity var(--dur-base) var(--ease-std), translate var(--dur-base) var(--ease-std), visibility 0s linear var(--dur-base); } .story__body.is-on { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; } .story__t { margin-top: 2px; } .story__body > p { font-size: var(--fs-body); line-height: 1.55; color: var(--body); } .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 14px 0; border-block: 1px solid var(--line); } [data-tone="white"] .story .facts { border-color: var(--navy-100); } .facts dd { margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-small); font-weight: 500; color: var(--ink); } .result { margin-top: auto; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px 14px; padding: 16px; border-radius: var(--r-media); border: 1px dashed var(--chip-line); } .result .data-label { grid-row: 1; } .result .chip { grid-row: 2; grid-column: 1; } .result__v { grid-row: 1 / span 2; grid-column: 2; justify-self: end; font-size: var(--fs-h2); font-weight: 300; line-height: 1; letter-spacing: -0.06em; color: var(--muted); } .rail { margin-top: 72px; display: grid; justify-items: center; text-align: center; } .rail__label { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px; } .rail__label .chip { border-style: solid; border-color: var(--line); color: var(--body); } .rail__label .chip::before { display: none; } .rail__names { margin: 28px auto 32px; max-width: 72rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 32px; } .rail__names li { display: inline-flex; align-items: center; gap: 10px; font-size: var(--fs-lead); line-height: 1.4; color: var(--muted); transition: color var(--dur-base) var(--ease-std); } .rail__names li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--acc); opacity: 0.5; transition: opacity var(--dur-base) var(--ease-std), transform var(--dur-base) var(--ease-enter); } .rail__names li.is-on { color: var(--ink); } .rail__names li.is-on::before { opacity: 1; transform: scale(1.4); } /* ========================================================================= 16 · CTA + FORM + FOOTER (D Aurora) ========================================================================= */ .ctaf { padding-top: var(--section-y); padding-bottom: 32px; } .cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 32rem); gap: 72px; align-items: start; } .cta__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; } .cta .display { margin-top: 20px; max-width: 11em; } .cta .lead { margin-top: 28px; max-width: 34rem; } .cta__mark { display: block; width: 76px; height: 120px; margin-block: 48px; } /* clear space 38px ≤ the 48px margins */ .mail { margin-top: 0; padding-top: 24px; border-top: 1px solid var(--line); } .mail__addr { display: inline-block; margin-top: 14px; font-size: var(--fs-h2); font-weight: 300; line-height: 1.15; letter-spacing: -0.03em; color: var(--ink); white-space: nowrap; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--dur-slow) var(--ease-enter); } .mail__addr:hover { background-size: 100% 1px; } .mail__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; } .form { position: relative; padding: 24px; } .form__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; } /* error summary shares the chip's cell, so a failed submit never moves the form */ .form__note { justify-items: start; } .form__sum { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; font-size: var(--fs-label); font-weight: 500; color: var(--ink); } .form__sum .i { color: var(--alert); } .frow { margin-top: 12px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; } .frow--one { grid-template-columns: minmax(0, 1fr); } .fld { display: grid; align-content: start; gap: 6px; min-width: 0; } .fld label { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: var(--fs-label); font-weight: 500; color: var(--ink); } .fld__tag { font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--muted); } .fld input, .fld select, .fld textarea { width: 100%; min-height: 44px; padding: 10px 12px; border-radius: var(--r-media); border: 1px solid var(--edge); background: var(--input-bg); color: var(--ink); font-size: var(--fs-body); line-height: 1.4; transition: border-color var(--dur-fast) var(--ease-std); } .fld textarea { min-height: 92px; resize: vertical; } .fld input:hover, .fld select:hover, .fld textarea:hover { border-color: var(--ink); } .fld input:focus-visible, .fld select:focus-visible, .fld textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); } .sel { position: relative; } .sel select { appearance: none; padding-right: 40px; } .sel .i { position: absolute; right: 12px; top: 50%; translate: 0 -50%; pointer-events: none; color: var(--muted); } /* one reserved message line per row (zero layout shift): the first error of the row shows, every error stays linked to its field */ .fmsg { grid-column: 1 / -1; display: grid; min-height: calc(1.35 * var(--fs-label)); } .fmsg > * { grid-area: 1 / 1; } .fld__hint { font-size: var(--fs-label); line-height: 1.35; color: var(--muted); } .fld__err { display: flex; align-items: flex-start; gap: 6px; font-size: var(--fs-label); line-height: 1.35; color: var(--ink); visibility: hidden; } .fld__err .i { margin-top: 1px; color: var(--alert); } .fld__err.is-shown { visibility: visible; } .fmsg.has-err .fld__hint { visibility: hidden; } .fld.is-bad input, .fld.is-bad select, .fld.is-bad textarea { border-color: var(--alert); } .fld.is-ok input, .fld.is-ok select, .fld.is-ok textarea { border-color: var(--ok); } .form__foot { margin-top: 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; } .form__gdpr { flex: 1 1 14rem; font-size: var(--fs-label); line-height: 1.45; color: var(--muted); } .form__gdpr a { color: var(--link); text-decoration: underline; text-underline-offset: 3px; } .form__ok { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: 18px; padding: 32px; border-radius: inherit; background: var(--card); } .form__ok[hidden] { display: none; } .form__ok > .i { width: 48px; height: 48px; padding: 12px; border-radius: 50%; background: var(--cta); color: var(--cta-ink); stroke-width: 2; } .form__ok .small { margin-top: 8px; max-width: 22rem; } .form__ok .link { margin-top: 4px; } .foot { margin-top: 112px; padding-top: 48px; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 2fr) minmax(0, 3fr); gap: 40px; } .foot__brand img { height: 30px; width: auto; } .foot__brand .small { margin-top: 18px; max-width: 20rem; } .foot__col ul { margin-top: 16px; display: grid; gap: 2px; } .foot__col a { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; font-size: var(--fs-small); font-weight: 500; color: var(--ink); text-underline-offset: 5px; } .foot__col a:hover { text-decoration: underline; } .foot__col .nav__lang { padding: 0; min-height: 36px; } .foot__base { grid-column: 1 / -1; margin-top: 16px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; } /* ========================================================================= 17 · INNER PAGE · solution hero (B Mapbox, Intelligent Hotels) ========================================================================= */ .shero { overflow: hidden; isolation: isolate; padding-block: 72px var(--section-y); } .shero__glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(44% 60% at 72% 36%, var(--glow-aqua), transparent 70%), radial-gradient(36% 50% at 96% 76%, var(--glow-indigo), transparent 70%), radial-gradient(34% 44% at 50% 92%, var(--glow-sky), transparent 70%); } .shero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; } .crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--fs-label); color: var(--muted); } .crumbs li { display: inline-flex; align-items: center; gap: 6px; } .crumbs li + li::before { content: ""; width: 5px; height: 5px; margin-right: 4px; border-top: 1.5px solid var(--edge); border-right: 1.5px solid var(--edge); rotate: 45deg; } .crumbs a { min-height: 32px; display: inline-flex; align-items: center; } .crumbs a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; } .crumbs [aria-current] { color: var(--ink); } .shero .eyebrow { margin-top: 32px; } .shero .display { margin-top: 18px; } .shero__sub { margin-top: 20px; max-width: 30rem; font-size: var(--fs-h3); font-weight: 400; line-height: 1.35; letter-spacing: var(--tr-h3); color: var(--ink); } .shero__sum { margin-top: 16px; max-width: 34rem; font-size: var(--fs-body); line-height: 1.6; color: var(--body); } .shero .actions { margin-top: 30px; } .shero__del { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--line); display: grid; gap: 8px; max-width: 34rem; } .shero__del .small { color: var(--body); } .hot { aspect-ratio: 16 / 9; } .hot > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hot__spot { position: absolute; inset: 0; z-index: 1; background: var(--scrim); clip-path: polygon(evenodd, 0 0, 100% 0, 100% 100%, 0 100%, 0 0); opacity: 0; transition: opacity var(--dur-slow) var(--ease-std); } .hot.has-spot .hot__spot { opacity: 1; } .hot__ring { position: absolute; z-index: 2; border-radius: var(--r-chip); border: 2px solid var(--navy-900); outline: 2px solid var(--aqua-400); opacity: 0; transition: left var(--dur-slow) var(--ease-enter), top var(--dur-slow) var(--ease-enter), width var(--dur-slow) var(--ease-enter), height var(--dur-slow) var(--ease-enter), opacity var(--dur-base) var(--ease-std); } .hot.has-spot .hot__ring { opacity: 1; } .hot__dcs { position: absolute; z-index: 3; left: 14px; bottom: 14px; display: flex; flex-wrap: wrap; gap: 8px; } .hot__ctl { margin-top: 20px; display: grid; gap: 14px; } .hot__ctl .pills { margin-bottom: 0; } .hot__cap { display: grid; font-size: var(--fs-small); color: var(--body); } .inner-foot { padding-block: 0 32px; } .inner-foot .foot { margin-top: 0; } /* ========================================================================= 17b · SOLUTION PAGE (Intelligent Hotels, the template for every solution page) ========================================================================= */ /* problem + attributed context figure (decision 19: publisher, year and link always visible) */ .problem__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 32px 72px; align-items: center; } .problem__txt .h2 { margin-top: 16px; max-width: 14em; } .problem__txt .lead { margin-top: 24px; max-width: 36rem; } .ctx { display: grid; gap: 12px; align-content: start; padding: 32px; } .ctx__fig { font-size: var(--fs-display-xl); font-weight: 300; line-height: 1; letter-spacing: -0.04em; color: var(--ink); } .ctx__line { font-size: var(--fs-h3); font-weight: 500; line-height: 1.3; letter-spacing: var(--tr-h3); color: var(--ink); max-width: 24em; } .ctx__find { font-size: var(--fs-small); line-height: 1.55; color: var(--body); } .ctx__src { display: grid; gap: 2px; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line); } .ctx__src .link { min-height: 40px; } .ctx--row { margin-top: var(--head-gap); grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); gap: 16px 48px; align-items: center; } .ctx--row .ctx__head { display: grid; gap: 8px; } .ctx--row { grid-template-columns: max-content minmax(0, 1fr); } .ctx--row .ctx__fig { white-space: nowrap; } .nw { white-space: nowrap; } /* outcomes: one card per benefit, result slot at the foot */ .bn-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); } .bn-grid > li { display: flex; } .bn { display: flex; flex-direction: column; gap: 12px; width: 100%; padding: var(--card-pad); } .bn .ico { margin-bottom: 6px; } .bn__d { font-size: var(--fs-small); line-height: 1.55; color: var(--body); } .result--sm { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px; } .bn .chip--confirm + .result--sm { margin-top: auto; } /* a day in the hotel: the real screen stays in view while the moments move */ .day__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 56px; align-items: start; } .day__panel { position: sticky; top: calc(var(--nav-h) + 32px); z-index: 2; } .day__screen { aspect-ratio: 16 / 9; } .day__screen > img, .viewer__frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--dur-slow) var(--ease-std); } .day__screen > img.is-on, .viewer__frame > img.is-on { opacity: 1; } .day__ring { position: absolute; z-index: 2; border-radius: var(--r-chip); border: 2px solid var(--navy-900); outline: 2px solid var(--sky-300); transition: left var(--dur-slow) var(--ease-enter), top var(--dur-slow) var(--ease-enter), width var(--dur-slow) var(--ease-enter), height var(--dur-slow) var(--ease-enter); } .day__ring::after { content: ""; position: absolute; inset: -7px; border-radius: 12px; border: 2px solid var(--sky-300); animation: dayring var(--dur-pulse) var(--ease-enter) infinite; } @keyframes dayring { 0% { opacity: 0.8; transform: scale(1); } 100% { opacity: 0; transform: scale(1.12); } } .day__dc { position: absolute; z-index: 3; left: 12px; bottom: 12px; } .day__cap { display: grid; margin-top: 12px; font-size: var(--fs-label); color: var(--muted); } .day__steps { position: relative; display: grid; gap: 8px; } .day__steps::before, .day__steps::after { content: ""; position: absolute; left: 25px; top: 32px; width: 2px; border-radius: 2px; } .day__steps::before { bottom: 32px; background: var(--line); } .day__steps::after { height: calc((100% - 64px) * var(--day-p, 0)); background: var(--accent-ink); transition: height var(--dur-slow) var(--ease-enter); } .dstep { position: relative; display: grid; gap: 6px; width: 100%; padding: 20px 20px 20px 56px; border-radius: var(--r-card); border: 1px solid transparent; text-align: left; color: var(--body); transition: background-color var(--dur-base) var(--ease-std), border-color var(--dur-base) var(--ease-std); } .dstep::before { content: ""; position: absolute; z-index: 1; left: 19px; top: 25px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--edge); background: var(--sf); transition: background-color var(--dur-base) var(--ease-std), border-color var(--dur-base) var(--ease-std); } .dstep.is-past::before { border-color: var(--accent-ink); background: var(--accent-ink); } .dstep[aria-selected="true"] { background: var(--card); border-color: var(--card-line); } .dstep[aria-selected="true"]::before { border-color: var(--accent-ink); background: var(--sf); box-shadow: inset 0 0 0 3px var(--accent-ink); } .dstep:hover:not([aria-selected="true"]) { border-color: var(--line); } .dstep__t { font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--accent-ink); } .dstep__h { font-size: var(--fs-h3); font-weight: 500; line-height: 1.25; letter-spacing: var(--tr-h3); color: var(--ink); } .dstep__b { font-size: var(--fs-small); line-height: 1.55; color: var(--body); } .dstep .chip { margin-top: 4px; } /* what we automate (hotel): the Home card language, four across */ .ha-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); } .ha-grid > li { display: flex; } .ha-grid .ai { width: 100%; } /* see it working: a screen viewer with hotspots, then the room 113 dashboard demo */ .viewer { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 8px; padding: var(--card-inset); } .viewer__side { display: grid; align-content: start; gap: 12px; padding: 16px 16px 12px; } .viewer__side .pills { margin-bottom: 4px; } .viewer__label { margin-top: 4px; } .vw-set { display: grid; gap: 8px; } .vw-set[hidden] { display: none; } .vw-hot { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--r-media); border: 1px solid var(--line); text-align: left; transition: border-color var(--dur-fast) var(--ease-std), background-color var(--dur-fast) var(--ease-std); } .vw-hot b { font-size: var(--fs-small); font-weight: 500; color: var(--ink); } .vw-hot span { font-size: var(--fs-label); line-height: 1.45; color: var(--body); } .vw-hot:hover { border-color: var(--edge); } .vw-hot[aria-selected="true"] { border-color: var(--accent-ink); background: color-mix(in srgb, var(--accent-ink) 7%, transparent); } .seeit__demo { margin-top: 48px; } .seeit__demohead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-bottom: 16px; } .ccx.ccx--single .ccx__body { grid-template-columns: minmax(0, 1fr); } /* ========================================================================= 18 · LAB PANEL (prototype only, hidden with ?clean=1) ========================================================================= */ .lab { position: fixed; z-index: var(--z-lab); right: 16px; bottom: 16px; font-family: var(--font-sans); color: var(--white); } html[data-clean] .lab { display: none; } .lab__panel { width: min(312px, calc(100vw - 32px)); padding: 14px; border-radius: var(--r-card); background: var(--navy-950); border: 1px dashed var(--sky-400); } .lab__panel[hidden] { display: none; } .lab__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; } .lab__k { font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--sky-300); } .lab__x { min-height: 32px; padding: 0 10px; border-radius: var(--r-pill); border: 1px solid var(--navy-600); font-size: var(--fs-micro); color: var(--navy-200); } .lab__x:hover { border-color: var(--white); color: var(--white); } .lab__label { margin: 10px 0 6px; font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--navy-200); } .lab__label span { text-transform: none; letter-spacing: 0; color: var(--navy-300); } .lab__seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } .lab__seg button { min-height: 40px; padding: 6px 10px; border-radius: var(--r-chip); border: 1px solid var(--navy-600); font-size: var(--fs-label); line-height: 1.25; color: var(--white); text-align: left; transition: background-color var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std); } .lab__seg button:hover { border-color: var(--sky-300); } .lab__seg button b { font-weight: 500; color: var(--sky-300); margin-right: 2px; } .lab__seg button[aria-pressed="true"] { background: var(--sky-400); border-color: var(--sky-400); color: var(--navy-900); } .lab__seg button[aria-pressed="true"] b { color: var(--navy-900); } .lab__wide { grid-column: 1 / -1; } .lab__note { margin-top: 10px; font-size: var(--fs-micro); line-height: 1.45; color: var(--navy-300); } .lab__open { min-height: 40px; padding: 0 16px; border-radius: var(--r-pill); background: var(--navy-950); border: 1px dashed var(--sky-400); font-size: var(--fs-micro); font-weight: 500; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--sky-300); } .lab :focus-visible { outline: 2px solid var(--sky-300); outline-offset: 2px; } /* ========================================================================= 19 · RESPONSIVE (content-driven breakpoints) ========================================================================= */ @media (max-width: 1279.98px) { .nav__links .nav__link:nth-child(4) { display: none; } .cta { grid-template-columns: minmax(0, 1fr); gap: 48px; } .form { max-width: 32rem; } .ccx__body { grid-template-columns: 196px minmax(0, 1fr); } .ccx__alarms { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--app-line); } .alarms { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); } } @media (max-width: 1179.98px) { .bn-grid, .ha-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .nav__bar { gap: 16px; } .nav__links, .nav__right > .nav__lang, .nav__right > [data-theme-toggle], .mega, .mega-scrim { display: none; } .nav__menu { display: inline-grid; } .nav__cta { margin-left: 0; } .hero { display: flex; flex-direction: column; min-height: 0; } .hero__in { order: 1; padding-block: 48px 0; } .hero__copy { max-width: 36rem; } .hero__art { order: 2; position: relative; inset: auto; z-index: 0; margin-top: -24px; aspect-ratio: 16 / 9; } .hero__art img { position: static; width: 100%; -webkit-mask-image: linear-gradient(180deg, transparent 0%, var(--mask-solid) 9%, var(--mask-solid) 90%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, var(--mask-solid) 9%, var(--mask-solid) 90%, transparent 100%); } .ticker { order: 3; position: relative; bottom: auto; padding: 4px 0 36px; } .hero__glow { background: radial-gradient(70% 40% at 20% 20%, var(--glow-sky), transparent 72%); } } @media (max-width: 1023.98px) { .problem__grid, .viewer { grid-template-columns: minmax(0, 1fr); } .day__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; } .day__panel { top: calc(var(--nav-h) + 8px); padding-bottom: 12px; background: var(--sf); } .ctx--row { grid-template-columns: minmax(0, 1fr); } .shead { grid-template-columns: minmax(0, 1fr); gap: 18px; } .shead__lead { justify-self: start; } .shead--center .shead__lead { justify-self: center; } .nums { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 20px; } .sp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .au { grid-template-columns: minmax(0, 1fr); gap: 16px; } .au__stack { height: 420px; } .stack { width: 220px; height: 220px; margin: -110px 0 0 -110px; } .slab { transform: translateZ(calc(var(--z, 0) * 20px)); } .slab.is-on { transform: translateZ(calc(var(--z, 0) * 20px + 28px)); } .au__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ccx__bar { padding: 12px 14px; } .ccx__body { grid-template-columns: minmax(0, 1fr); } .ccx__nav { flex-direction: row; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 8px; border-right: 0; border-bottom: 1px solid var(--app-line); } .ccx__tab { flex: none; grid-template-columns: 18px auto; gap: 8px; min-height: 44px; padding: 6px 14px 6px 12px; } .ccx__tab small { display: none; } .ccx__main { padding: 12px; } .ccv__split { grid-template-columns: minmax(0, 1fr); } .ccv:not(.is-on) { display: none; } /* phones: the active view sets the height (switching views is the visitor's own action) */ .pf__points { grid-template-columns: minmax(0, 1fr); gap: 14px; } .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .route { display: none; } .pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); } .pills--center { justify-content: flex-start; } .pill { flex: none; } .story { grid-template-columns: minmax(0, 1fr); } .story__body { padding: 16px 12px 12px; } .rail { margin-top: 56px; justify-items: start; text-align: left; } .rail__names { justify-content: flex-start; gap: 8px 20px; margin-inline: 0; } .rail__names li { font-size: var(--fs-body); } .foot { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 20px; margin-top: 80px; } .foot__brand { grid-column: 1 / -1; } .shero { padding-top: 48px; } .shero__grid { grid-template-columns: minmax(0, 1fr); gap: 36px; } } @media (max-width: 767.98px) { .nums { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sp-grid { grid-template-columns: minmax(0, 1fr); } .proto { grid-template-columns: repeat(2, minmax(0, 1fr)); } .proto li, .proto li:nth-child(4n+1) { padding: 24px 14px 22px; border-left: 0; border-top: 1px solid var(--line); } .proto li:nth-child(odd) { padding-left: 0; border-right: 1px solid var(--line); } .proto li:nth-child(-n+2) { border-top: 0; } .brands ul { gap: 10px 28px; } .clients__tools { width: 100%; justify-content: space-between; } .mq { --item: 132px; --mq-gap: 12px; -webkit-mask-image: linear-gradient(90deg, transparent, var(--mask-solid) 32px, var(--mask-solid) calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, transparent, var(--mask-solid) 32px, var(--mask-solid) calc(100% - 32px), transparent); } .form { padding: 20px 16px; } .foot > div.foot__col { grid-column: 1 / -1; } .form__foot .btn { width: 100%; } .mail__addr { font-size: var(--fs-h3); } } @media (max-width: 639.98px) { .bn-grid, .ha-grid { grid-template-columns: minmax(0, 1fr); } .ctx { padding: 24px 20px; } .dstep { padding: 16px 16px 16px 48px; } .dstep::before { left: 15px; top: 21px; } .day__steps::before, .day__steps::after { left: 21px; } .day__cap { min-height: 2.8em; } .day__dc { left: 8px; bottom: 8px; } .day__dc .reading { gap: 2px; padding: 6px 10px; } .day__dc .data-value { font-size: var(--fs-small); } /* Phones crop the art to a window of the 1600×900 viewBox that keeps the crossing (≈1030, 740) and only callouts that fit whole: hospital, room 113 and crossing in; port and offices CO2 out, never half-cut. One edit if the art changes: --crop-x (left edge) and --crop-w (window width), in viewBox units. */ .hero__art { --crop-x: 246; --crop-w: 900; aspect-ratio: var(--crop-w) / 900; margin-top: -16px; overflow: hidden; } .hero__art img { position: absolute; top: 0; left: calc(var(--crop-x) / var(--crop-w) * -100%); width: calc(1600 / var(--crop-w) * 100%); height: auto; max-width: none; -webkit-mask-image: linear-gradient(180deg, transparent 0%, var(--mask-solid) 7%, var(--mask-solid) 96%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, var(--mask-solid) 7%, var(--mask-solid) 96%, transparent 100%); } .hero .actions .btn { flex: 1 1 160px; } .ticker { gap: 10px 20px; } .au__grid { grid-template-columns: minmax(0, 1fr); } .steps { grid-template-columns: minmax(0, 1fr); } .zones { grid-template-columns: repeat(2, minmax(0, 1fr)); } .zones .sw__s { display: none; } .ccx__lockup, :is([data-tone="white"], [data-tone="mist"], [data-tone="fog"]) .ccx__lockup.on-light { display: none; } .ccx__icon { display: block; } .ccx__brand { padding-right: 12px; } .cta__mark { width: 48px; height: 76px; margin-block: 36px; } .ccv__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ccv__kpis { grid-auto-flow: dense; } .ccv__kpis:not(:has(.reading--set)) > :last-child:nth-child(odd), .reading--set { grid-column: 1 / -1; } .reading--set { order: 3; } .cgroup--row { grid-template-columns: minmax(0, 1fr); } .proof__grid { gap: 8px; } .frow { grid-template-columns: minmax(0, 1fr); } .fmsg { min-height: calc(2 * 1.35 * var(--fs-label)); } .result__v { font-size: var(--fs-h3); } } @media (max-width: 479.98px) { .hero__art { --crop-x: 497; --crop-w: 650; } .nav__logo img { height: 24px; } .nav__cta { height: 40px; padding: 0 14px; gap: 6px; font-size: var(--fs-label); } .nav__cta-l { display: none; } .nav__cta-s { display: inline; } .nav__cta .i--arr { display: none; } } /* ========================================================================= 20 · REDUCED MOTION: everything lands in its final state ========================================================================= */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0ms !important; } .pin::after, .v-ring, .pil::after, .det-ring, .day__ring::after { display: none; } .xing.is-studs .studs circle, .xing.is-signs .sign rect { animation: none; } .route__line { animation: none; } .mq { -webkit-mask-image: none; mask-image: none; } .mq__track { display: block; width: auto; animation: none; } .mq__group { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px 16px; padding: 0; } .mq__group > li { width: auto; } .mq__group[aria-hidden="true"] { display: none; } .clients__tools .btn { display: none; } } html[data-page] .lab__seg--j, html[data-page] #lab-j { display: none; } /* colour options belong to Home; other pages keep the theme switch */