/* ========================================================================== Alexander Leitner Solutions — design system 1. Tokens 5. Buttons 9. Sections & blocks 2. Reset & base 6. Header / nav 10. Footer 3. Layout 7. Hero 11. Motion 4. Typography 8. Cards 12. Responsive ========================================================================== */ /* 1. Tokens ---------------------------------------------------------------- */ :root { /* surfaces */ --bg: #f4f7fb; --surface: #fbfcfe; --surface-alt: #e9eff8; --navy: #10233f; --navy-2: #16304f; /* ink */ --ink: #16202e; --ink-soft: #55637a; --ink-mute: #7a869a; --ink-invert: #eef4fc; --ink-invert-soft: #9dc0ee; /* lines */ --line: #d6e0ee; --line-soft: #e3eaf4; --line-strong: #b9cbe6; /* brand */ --brand: #1f4f96; --brand-bright: #2c6ec4; --brand-deep: #163c73; --brand-tint: #eef4fc; --brand-tint-line: #d3e3f8; --accent: #69c350; --accent-bright: #7ad061; --accent-deep: #3f7d2e; --accent-tint: #eaf7e4; --accent-tint-line: #cbe9bf; /* radii */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px; /* shadow */ --shadow-sm: 0 8px 20px rgba(22, 32, 46, .05); --shadow-md: 0 14px 34px rgba(22, 32, 46, .08); --shadow-lg: 0 24px 60px rgba(22, 32, 46, .13); --shadow-brand: 0 12px 26px rgba(31, 79, 150, .26); /* rhythm */ --wrap: 1160px; --gutter: clamp(16px, 4vw, 24px); --section-y: clamp(56px, 8vw, 100px); --header-h: 68px; /* motion */ --ease: cubic-bezier(.2, .7, .2, 1); } /* 2. Reset & base ---------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; background: var(--bg); scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); } body { margin: 0; background: var(--bg); color: var(--ink); font-family: Inter, system-ui, -apple-system, sans-serif; font-size: 16px; line-height: 1.55; min-height: 100vh; min-height: 100dvh; overflow-x: hidden; padding-bottom: env(safe-area-inset-bottom); -webkit-font-smoothing: antialiased; /* long German compounds ("Geländemodellierung") otherwise overflow narrow columns */ overflow-wrap: break-word; } /* Headings and titles sit in narrow columns where a single compound can be wider than the track; hyphenate those rather than hard-breaking (lang is on ). Body copy is left alone — it wraps fine and reads cleaner without hyphens. */ @media (max-width: 640px) { h1, h2, h3, h4, .project__title { hyphens: auto; } } body.is-locked { overflow: hidden; } img, svg { display: block; max-width: 100%; } img { height: auto; } /* so width/height attributes don't beat aspect-ratio */ button { font: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } a { color: var(--brand); text-underline-offset: 3px; -webkit-tap-highlight-color: transparent; } a:hover { color: var(--brand-deep); } iframe { color-scheme: light; } ::selection { background: var(--brand-tint-line); } :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; } .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; } /* the skip link is the one .sr-only element that must appear when focused */ .sr-only:focus-visible { position: fixed; top: 10px; left: 10px; z-index: 200; width: auto; height: auto; margin: 0; padding: 12px 18px; clip: auto; background: var(--brand); color: #fff; border-radius: var(--r-sm); font-size: 15px; font-weight: 500; text-decoration: none; box-shadow: var(--shadow-md); } /* 3. Layout ---------------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .wrap--narrow { max-width: 820px; } .section { padding-block: var(--section-y); } .section--tight { padding-block: clamp(38px, 6vw, 64px); } .section--tint { background: var(--surface-alt); border-block: 1px solid var(--line); } .section--navy { background: var(--navy); color: var(--ink-invert); position: relative; overflow: hidden; } .section--navy h2, .section--navy h3 { color: #fff; } .stack > * + * { margin-top: 1em; } /* minmax(0,1fr) throughout: a plain 1fr track has min-width:auto, so wide images and long German compounds push tracks past their container. */ .grid { display: grid; gap: clamp(16px, 2.4vw, 22px); grid-template-columns: minmax(0, 1fr); } .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--split { gap: clamp(32px, 5vw, 60px); align-items: center; } /* .grid--4up: four short text cards. Unlike .grid--4 (project tiles) it stays two-up until there is room for real text, then goes four across — otherwise the fourth card is stranded alone on a second row. */ @media (min-width: 640px) { .grid--3, .grid--4up { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 860px) { .grid--2, .grid--split { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1040px) { .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4up { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .divider { height: 1px; border: 0; margin: 0; background: linear-gradient(to right, transparent, var(--line) 48px, var(--line) calc(100% - 48px), transparent); } /* 4. Typography ------------------------------------------------------------ */ h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.025em; line-height: 1.12; text-wrap: balance; } p { margin: 0; text-wrap: pretty; } .t-display { font-size: clamp(36px, 6.6vw, 60px); line-height: 1.04; letter-spacing: -.032em; } .t-h1 { font-size: clamp(30px, 5.6vw, 44px); } .t-h2 { font-size: clamp(26px, 4.4vw, 36px); } .t-h3 { font-size: clamp(19px, 2.4vw, 21px); letter-spacing: -.015em; } .t-h4 { font-size: 17px; letter-spacing: -.01em; } .lead { font-size: clamp(17px, 2.2vw, 19px); line-height: 1.6; color: var(--ink-soft); max-width: 60ch; } .lead--tight { max-width: 46ch; } .body { font-size: 16px; line-height: 1.7; color: var(--ink-soft); } .small { font-size: 14px; line-height: 1.6; color: var(--ink-mute); } .grad-text { background: linear-gradient(100deg, var(--brand-bright), var(--brand-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; } .section--navy .grad-text { background: linear-gradient(100deg, var(--accent), #b8e6a6); -webkit-background-clip: text; background-clip: text; color: transparent; } .kicker { display: flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); margin-bottom: 16px; } .kicker::before { content: ""; width: 34px; height: 2px; background: currentColor; flex: none; } .section--navy .kicker { color: var(--accent); } .pill { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; letter-spacing: .02em; color: var(--brand-deep); background: var(--brand-tint); border: 1px solid var(--brand-tint-line); border-radius: var(--r-pill); padding: 6px 14px; } .pill--accent { color: var(--accent-deep); background: var(--accent-tint); border-color: var(--accent-tint-line); } .pill__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: none; } .tag { display: inline-block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-deep); background: var(--brand-tint); border: 1px solid var(--brand-tint-line); border-radius: var(--r-pill); padding: 3px 10px; } /* 5. Buttons --------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; font-size: 15px; font-weight: 500; line-height: 1; padding: 13px 22px; border-radius: var(--r-sm); border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; } .btn:hover { transform: translateY(-2px); } .btn i { font-size: 16px; } .btn--primary { background: var(--brand); border-color: var(--brand); color: #fff; } .btn--primary:hover { background: var(--brand-deep); border-color: var(--brand-deep); color: #fff; box-shadow: var(--shadow-brand); } .btn--ghost { background: var(--surface); border-color: var(--line); color: var(--ink); } .btn--ghost:hover { border-color: var(--brand-bright); color: var(--ink); box-shadow: var(--shadow-sm); } .btn--accent { background: var(--accent); border-color: var(--accent); color: var(--navy); } .btn--accent:hover { background: var(--accent-bright); border-color: var(--accent-bright); color: var(--navy); } .btn--light { background: #fff; border-color: #fff; color: var(--navy); } .btn--light:hover { background: var(--brand-tint); border-color: var(--brand-tint); color: var(--navy); } .btn--outline-light { background: transparent; border-color: rgba(157, 192, 238, .4); color: var(--ink-invert); } .btn--outline-light:hover { border-color: var(--ink-invert); color: #fff; } .btn--sm { font-size: 14px; padding: 10px 16px; } .btn--block { width: 100%; } .link-arrow { display: inline-flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 500; color: var(--brand); text-decoration: none; } .link-arrow i { transition: transform .2s ease; } .link-arrow:hover i { transform: translateX(3px); } /* 6. Header / nav ---------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 80; background: rgba(244, 247, 251, .88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); transition: box-shadow .25s ease, background .25s ease; } .site-header.is-stuck { background: rgba(244, 247, 251, .97); box-shadow: 0 10px 30px rgba(22, 32, 46, .08); } .header__inner { display: flex; align-items: center; gap: clamp(10px, 2vw, 22px); min-height: var(--header-h); padding-block: 10px; } .brand { display: inline-flex; align-items: center; gap: 9px; font-size: clamp(15px, 3.6vw, 17px); font-weight: 500; letter-spacing: -.015em; color: var(--ink); text-decoration: none; white-space: nowrap; margin-right: auto; } .brand:hover { color: var(--ink); } .brand__mark { width: 27px; height: 27px; flex: none; border-radius: 7px; background: linear-gradient(135deg, var(--brand-bright), var(--brand-deep)); color: #fff; font-size: 11px; font-weight: 600; line-height: 27px; text-align: center; } .brand__accent { color: var(--brand); } .nav { display: flex; align-items: center; gap: clamp(4px, 1.4vw, 10px); } .nav__item { position: relative; } .nav__link { display: inline-flex; align-items: center; gap: 5px; font-size: 14.5px; color: var(--ink-soft); text-decoration: none; padding: 8px 10px; border-radius: var(--r-sm); background: none; border: 0; cursor: pointer; font-family: inherit; transition: color .18s ease, background .18s ease; } .nav__link:hover { color: var(--brand); background: var(--brand-tint); } .nav__link.is-active { color: var(--brand-deep); font-weight: 500; } .nav__link.is-active::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 1px; height: 2px; border-radius: 2px; background: var(--brand); } .nav__caret { font-size: 12px; transition: transform .2s ease; } .nav__item:hover .nav__caret, .nav__item:focus-within .nav__caret { transform: rotate(180deg); } .nav__menu { position: absolute; top: calc(100% + 8px); left: 50%; translate: -50% 0; width: 330px; padding: 8px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-lg); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity .18s ease, transform .18s ease, visibility .18s; } .nav__item:hover .nav__menu, .nav__item:focus-within .nav__menu { opacity: 1; visibility: visible; transform: translateY(0); } .nav__menu-link { display: flex; gap: 11px; align-items: flex-start; padding: 10px; border-radius: var(--r-sm); text-decoration: none; color: var(--ink); transition: background .16s ease; } .nav__menu-link:hover { background: var(--brand-tint); color: var(--ink); } .nav__menu-link.is-active { background: var(--brand-tint); } .nav__menu-link i { font-size: 19px; color: var(--brand); margin-top: 2px; flex: none; } .nav__menu-title { display: block; font-size: 14.5px; font-weight: 500; } .nav__menu-desc { display: block; font-size: 12.5px; line-height: 1.45; color: var(--ink-mute); margin-top: 2px; } .lang { display: flex; align-items: center; gap: 2px; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 2px; flex: none; } .lang button { font-size: 12px; font-weight: 500; letter-spacing: .04em; cursor: pointer; border: 0; border-radius: 6px; padding: 7px 11px; min-height: 30px; background: transparent; color: var(--ink-mute); transition: background .2s ease, color .2s ease; } .lang button:hover { color: var(--brand); } .lang button.is-active { background: var(--brand-tint-line); color: var(--brand-deep); } .burger { width: 44px; height: 44px; flex: none; display: none; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; cursor: pointer; color: var(--ink); } .burger i { font-size: 22px; } .mobile-menu { display: none; border-top: 1px solid var(--line); background: var(--bg); padding: 6px var(--gutter) calc(24px + env(safe-area-inset-bottom)); max-height: calc(100dvh - var(--header-h)); overflow-y: auto; } .mobile-menu.is-open { display: block; } /* :not(.btn) matters — this rule outweighs .btn--primary and would otherwise strip the CTA of its white text, centring and padding. */ .mobile-menu a:not(.btn), .mobile-menu summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 4px; font-size: 17px; font-weight: 500; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-soft); } .mobile-menu details summary { cursor: pointer; list-style: none; } .mobile-menu details summary::-webkit-details-marker { display: none; } .mobile-menu details[open] summary i { transform: rotate(180deg); } .mobile-menu details summary i { font-size: 15px; color: var(--ink-mute); transition: transform .2s ease; } /* needs :not(.btn) too, or the rule above outranks it and the sub-items lose their indent and their smaller, softer type */ .mobile-menu details a:not(.btn) { padding-left: 18px; font-size: 15.5px; font-weight: 400; color: var(--ink-soft); } .mobile-menu a:not(.btn).is-active { color: var(--brand); } /* the entry above the CTA needs no divider (the CTA itself is the last ) */ .mobile-menu > a:nth-last-of-type(2) { border-bottom: 0; } .mobile-menu .btn { margin-top: 16px; padding-block: 16px; font-size: 16px; } .progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: linear-gradient(90deg, var(--brand-bright), var(--accent)); } /* 7. Hero ------------------------------------------------------------------ */ .hero { position: relative; padding-block: clamp(40px, 7vw, 76px) clamp(44px, 7vw, 72px); } .hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 5vw, 60px); align-items: center; } @media (min-width: 900px) { .hero__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .hero__copy { position: relative; z-index: 1; } .hero__title { margin: 22px 0; } .hero__actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 32px; } .hero__media { position: relative; will-change: transform; } .hero__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--shadow-lg); } .glow { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; background: radial-gradient(circle, rgba(44, 110, 196, .20), rgba(44, 110, 196, 0) 68%); filter: blur(16px); animation: drift 14s ease-in-out infinite; } .glow--hero { top: -150px; right: -120px; width: min(640px, 120vw); height: min(640px, 120vw); } .glow--accent { background: radial-gradient(circle, rgba(105, 195, 80, .16), rgba(105, 195, 80, 0) 70%); animation-duration: 18s; } .glow--left { top: -160px; left: -110px; width: min(560px, 120vw); height: min(560px, 120vw); } .float-card { position: absolute; left: -14px; bottom: -22px; z-index: 2; display: flex; align-items: center; gap: 13px; max-width: 260px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 17px; box-shadow: var(--shadow-md); } .float-card i { font-size: 22px; color: var(--brand); flex: none; } .float-card b { display: block; font-size: 14.5px; font-weight: 600; } .float-card span { display: block; font-size: 12.5px; line-height: 1.4; color: var(--ink-mute); } /* page header for sub-pages */ /* no overflow:hidden here — it would clip .glow mid-gradient and leave a hard edge */ .page-head { position: relative; padding-block: clamp(30px, 5vw, 52px) clamp(32px, 5vw, 54px); } .page-head__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(30px, 5vw, 56px); align-items: center; position: relative; z-index: 1; } @media (min-width: 900px) { .page-head__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .page-head__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); border: 1px solid var(--line); box-shadow: var(--shadow-lg); } .page-head__icon { width: 54px; height: 54px; border-radius: 14px; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--brand-bright), var(--brand-deep)); color: #fff; } .page-head__icon i { font-size: 26px; } .breadcrumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--ink-mute); padding-block: 16px 0; } .breadcrumb a { color: var(--ink-mute); text-decoration: none; } .breadcrumb a:hover { color: var(--brand); } .breadcrumb i { font-size: 11px; opacity: .6; } /* 8. Cards ----------------------------------------------------------------- */ .card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(22px, 3.4vw, 28px); display: flex; flex-direction: column; gap: 11px; overflow: hidden; transition: transform .28s var(--ease), box-shadow .28s ease, border-color .28s ease; } .card__topline { position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--brand-bright), var(--accent)); } .card__icon { font-size: 27px; color: var(--brand); } .card p { font-size: 15px; line-height: 1.6; color: var(--ink-soft); } a.card { text-decoration: none; color: inherit; } a.card:hover, .card--hover:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: var(--brand-tint-line); } .card__more { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 7px; font-size: 14.5px; font-weight: 500; color: var(--brand); } .card__more i { transition: transform .2s ease; } a.card:hover .card__more i { transform: translateX(3px); } .card--flat { background: transparent; border-color: transparent; padding: 0; } .card--soft { background: var(--brand-tint); border-color: var(--brand-tint-line); } .card--glass { background: rgba(255, 255, 255, .05); border-color: rgba(157, 192, 238, .26); backdrop-filter: blur(6px); } /* icon + text row */ .feature { display: flex; gap: 14px; align-items: flex-start; } .feature i { font-size: 21px; color: var(--brand); flex: none; margin-top: 2px; } .feature--check i { color: var(--accent); } .feature__title { font-size: 15.5px; font-weight: 600; margin-bottom: 3px; } .feature__text { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); } .section--navy .feature__text { color: var(--ink-invert-soft); } .section--navy .feature i { color: var(--accent); } .check-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 13px; } .check-list li { display: flex; gap: 11px; align-items: flex-start; font-size: 15.5px; line-height: 1.55; } .check-list i { font-size: 16px; color: var(--accent); flex: none; margin-top: 4px; } .section--navy .check-list li { color: var(--ink-invert); } /* stats strip */ .stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; } @media (min-width: 860px) { .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .stat { background: var(--surface); padding: clamp(18px, 3vw, 26px); display: flex; flex-direction: column; gap: 6px; } .stat i { font-size: 22px; color: var(--brand); } .stat b { font-size: 16px; font-weight: 600; letter-spacing: -.01em; } .stat span { font-size: 13.5px; line-height: 1.5; color: var(--ink-mute); } /* process steps */ .steps { counter-reset: step; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(18px, 2.6vw, 26px); } @media (min-width: 640px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1040px) { .steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .step { position: relative; padding-top: 22px; border-top: 2px solid var(--line); } .step::before { counter-increment: step; content: "0" counter(step); display: block; font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--brand); margin-bottom: 9px; } .step h3 { font-size: 17px; margin-bottom: 7px; } .step p { font-size: 14.5px; line-height: 1.6; color: var(--ink-soft); } .step.is-lit { border-top-color: var(--brand); } .section--navy .step { border-top-color: rgba(157, 192, 238, .3); } .section--navy .step::before { color: var(--accent); } .section--navy .step p { color: var(--ink-invert-soft); } /* projects */ /* figure.project, not ".project figure" — .project is the
itself, so the old selector never matched and the UA's 1em/40px margin stayed on */ figure.project { margin: 0; } /* 4:3 — the project photos are all landscape drone frames; a portrait tile cropped away nearly half the width */ .project__frame { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--surface-alt); } .project__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); } .project:hover .project__frame img { transform: scale(1.06); } .project figcaption { margin-top: 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .project__title { font-size: 17px; font-weight: 600; color: var(--ink); } /* On phones the four tiles became ~1700px of stacked scrolling. A snapping rail keeps the section to one screen and the peeking next tile shows it can be swiped. Full-bleed via negative margin; the rail itself stays exactly viewport-wide, so the page never scrolls sideways. */ @media (max-width: 700px) { .projects { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 76%; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding-inline: var(--gutter); padding-bottom: 4px; margin-inline: calc(var(--gutter) * -1); -webkit-overflow-scrolling: touch; scrollbar-width: none; } .projects::-webkit-scrollbar { display: none; } .projects > * { scroll-snap-align: start; } } /* — before/after wipe — */ .compare { position: relative; width: 100%; aspect-ratio: 4 / 3; --x: 50%; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: var(--surface-alt); isolation: isolate; } .compare__img { width: 100%; height: 100%; object-fit: cover; display: block; } /* the overlay keeps full size and is clipped, so the image never squashes */ .compare__overlay { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--x)) 0 0); } .compare__divider { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(22, 32, 46, .22); transform: translateX(-1px); pointer-events: none; } .compare__divider i { position: absolute; top: 50%; left: 50%; translate: -50% -50%; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--brand); display: flex; align-items: center; justify-content: center; font-size: 20px; box-shadow: 0 2px 12px rgba(22, 32, 46, .32); } /* a real range input: drag, tap and arrow keys all work without custom code. pan-y so a vertical swipe still scrolls the page from on top of it. */ .compare__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; -webkit-appearance: none; appearance: none; background: transparent; cursor: ew-resize; touch-action: pan-y; opacity: 0; } .compare__range::-webkit-slider-thumb { -webkit-appearance: none; width: 44px; height: 100vh; } .compare__range::-moz-range-thumb { width: 44px; height: 100vh; border: 0; opacity: 0; } .compare__range:focus-visible ~ .compare__divider i { box-shadow: 0 0 0 3px var(--brand), 0 2px 12px rgba(22, 32, 46, .32); } .compare__tag { position: absolute; top: 10px; z-index: 1; pointer-events: none; font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: rgba(22, 32, 46, .62); border-radius: var(--r-pill); padding: 5px 11px; backdrop-filter: blur(4px); } .compare__tag--left { left: 10px; } .compare__tag--right { right: 10px; } /* Side by side, one caption can wrap to two lines while its neighbour stays on one, which started the images at different heights. subgrid ties each figure's two rows to the grid's, so captions share a height and the frames line up. Ignored where subgrid is missing — the images then sit as before. */ @supports (grid-template-rows: subgrid) { @media (min-width: 860px) { .compare-grid > .project { display: grid; grid-template-rows: subgrid; grid-row: span 2; } } } /* featured comparison on the home page — wider than the rail tiles below it */ .compare-feature { margin-bottom: clamp(30px, 4.5vw, 44px); } .projects__more { font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 16px; } /* capped against the viewport height, not just the width: at 16:9 across the full column the frame ran 626px on a laptop, so the section heading and the slider could never be on screen together */ .compare-feature .compare { aspect-ratio: 16 / 9; max-height: min(60vh, 560px); } @media (max-width: 700px) { .compare-feature .compare { aspect-ratio: 4 / 3; max-height: none; } } /* caption above the frame — stacked on phones, one line once there is room, so the title, its category and the hint read as a single caption bar */ /* figcaption in the selector: ".project figcaption" above is 0-1-1 and would otherwise keep this stacked in a column */ figcaption.compare__head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0 0 14px; } .compare__head .project__title { font-size: clamp(18px, 2.4vw, 22px); letter-spacing: -.015em; } @media (min-width: 640px) { figcaption.compare__head { flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; } .compare__head .compare__hint { margin-left: auto; } } .compare__hint { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-mute); } .compare__hint i { font-size: 15px; } @media (prefers-reduced-motion: reduce) { .compare__divider { transition: none; } } .placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: var(--surface-alt); border: 1px dashed var(--line-strong); color: var(--ink-mute); } .placeholder i { font-size: 30px; color: var(--ink-invert-soft); } .placeholder span { font-size: 12px; letter-spacing: .03em; } /* portrait figure */ .portrait { position: relative; margin: 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-lg); } .portrait img { width: 100%; height: clamp(320px, 54vw, 500px); object-fit: cover; object-position: top; transition: transform .8s var(--ease); } .portrait:hover img { transform: scale(1.04); } .portrait figcaption { position: absolute; inset: auto 0 0 0; padding: 22px; pointer-events: none; color: #fff; background: linear-gradient(to top, rgba(16, 35, 63, .92), transparent); } .portrait figcaption b { display: block; font-size: 19px; font-weight: 600; } .portrait figcaption span { display: block; font-size: 14px; color: var(--ink-invert-soft); } /* 9. Sections & blocks ----------------------------------------------------- */ .section__head { max-width: 62ch; margin-bottom: clamp(30px, 4.6vw, 46px); } .section__head .lead { margin-top: 12px; } .section__head--center { margin-inline: auto; text-align: center; } .section__head--center .kicker { justify-content: center; } .section__head--center .lead { margin-inline: auto; } /* FAQ */ .faq { display: flex; flex-direction: column; } .faq details { border-bottom: 1px solid var(--line); padding-block: 18px; } .faq summary { display: flex; align-items: flex-start; gap: 14px; font-size: 17px; font-weight: 600; letter-spacing: -.01em; list-style: none; cursor: pointer; } .faq summary::-webkit-details-marker { display: none; } .faq summary i { font-size: 16px; color: var(--brand); margin-top: 4px; flex: none; transition: transform .2s ease; } .faq details[open] summary i { transform: rotate(45deg); } .faq p { margin: 12px 0 0 30px; font-size: 15px; line-height: 1.7; color: var(--ink-soft); } /* Loxone partner badge — the logo is a self-contained plaque with its own warm near-black (#1c1610); the glass card keeps it from muddying into the navy. */ .partner-badge { display: flex; justify-content: center; } .partner-badge .card { max-width: 340px; width: 100%; align-items: center; text-align: center; gap: 18px; } .partner-badge picture { display: contents; } .partner-badge img { width: 100%; max-width: 210px; height: auto; } /* landscape lockup below this width — must match the source in shell.js */ @media (max-width: 859.98px) { .partner-badge img { max-width: 240px; } } .partner-badge p { font-size: 14.5px; line-height: 1.6; color: var(--ink-invert-soft); } /* Scan reveal — a thermal-scan line sweeps across and uncovers text in the brand gradient. Two stacked copies: a dim "unscanned" one underneath and the lit one clipped open by the sweep. Both must be block boxes, or the inline ghost measures differently from the absolute lit copy and the sweep drifts. Shared by the hero headline and the brandmark. */ .scan { position: relative; display: block; } .scan__ghost, .scan__lit { display: block; } .scan__lit { position: absolute; inset: 0; -webkit-background-clip: text; background-clip: text; color: transparent; clip-path: inset(0 100% 0 0); } .scan__line { position: absolute; top: -12%; bottom: -12%; left: 0; width: 2px; opacity: 0; background: linear-gradient(to bottom, transparent, var(--accent), transparent); box-shadow: 0 0 14px 3px rgba(140, 255, 112, .5); } @keyframes scan-reveal { to { clip-path: inset(0 0 0 0); } } @keyframes scan-sweep { 0% { left: 0; opacity: 0; } 10% { opacity: 1; } 88% { opacity: 1; } 100% { left: 100%; opacity: 0; } } /* background-image, never the `background` shorthand: the shorthand resets background-clip back to border-box and the gradient fills the whole box instead of just the glyphs. */ .hero .scan__ghost { color: rgba(31, 79, 150, .17); } .hero .scan__lit { background-image: linear-gradient(100deg, var(--brand-bright), var(--brand-deep)); animation: scan-reveal 1.5s cubic-bezier(.4, 0, .2, 1) .35s forwards; } .hero .scan__line { animation: scan-sweep 1.5s cubic-bezier(.4, 0, .2, 1) .35s forwards; } /* Brandmark */ .brandmark { background: var(--navy); overflow: hidden; } .brandmark__inner { padding-block: clamp(44px, 8vw, 76px); text-align: center; } .brandmark__stage { display: inline-block; margin: 0; font-size: clamp(27px, 7.2vw, 54px); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; white-space: nowrap; } .brandmark__stage b { font-weight: 600; } /* one line no longer fits below ~460px; break before "Solutions" rather than shrinking the type — both copies wrap identically, so the sweep still lines up */ @media (max-width: 460px) { .brandmark__stage { white-space: normal; } .brandmark__stage b { display: block; } } /* runs when the section scrolls into view, unlike the hero */ .brandmark .scan__ghost { color: rgba(157, 192, 238, .22); } .brandmark .scan__lit { background-image: linear-gradient(100deg, var(--accent) 0%, #9dc0ee 55%, #fff 100%); } .brandmark.is-in .scan__lit { animation: scan-reveal 1.7s cubic-bezier(.4, 0, .2, 1) .25s forwards; } .brandmark.is-in .scan__line { animation: scan-sweep 1.7s cubic-bezier(.4, 0, .2, 1) .25s forwards; } .brandmark__line { margin: clamp(14px, 2.4vw, 20px) auto 0; max-width: 44ch; font-size: clamp(14.5px, 2vw, 16.5px); line-height: 1.6; color: var(--ink-invert-soft); } @media (prefers-reduced-motion: reduce) { .scan__lit { clip-path: inset(0 0 0 0); animation: none !important; } .scan__line { display: none; } } /* CTA band */ .cta-band { position: relative; overflow: hidden; background: linear-gradient(120deg, var(--navy), var(--navy-2)); color: var(--ink-invert); } .cta-band__inner { position: relative; z-index: 1; padding-block: clamp(44px, 7vw, 76px); display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: center; } @media (min-width: 860px) { .cta-band__inner { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } .cta-band__actions { justify-content: flex-end; } } .cta-band h2 { color: #fff; } .cta-band p { color: var(--ink-invert-soft); margin-top: 12px; max-width: 46ch; } .cta-band__actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-start; } /* contact */ .contact-panel { border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); background: var(--surface); box-shadow: var(--shadow-md); } @media (min-width: 860px) { .contact-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .contact-panel__body { padding: clamp(26px, 5vw, 46px); } .contact-panel__map { min-height: clamp(280px, 44vw, 100%); border-top: 1px solid var(--line); } @media (min-width: 860px) { .contact-panel__map { border-top: 0; border-left: 1px solid var(--line); } } .contact-panel__map iframe { width: 100%; height: 100%; min-height: clamp(280px, 44vw, 420px); border: 0; display: block; filter: grayscale(.3) contrast(1.05); } .contact-row { display: flex; align-items: center; gap: 16px; text-decoration: none; color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-md); padding: 15px; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; } a.contact-row:hover { border-color: var(--brand-bright); transform: translateY(-2px); box-shadow: var(--shadow-sm); color: var(--ink); } .contact-row__icon { width: 42px; height: 42px; flex: none; border-radius: 11px; background: var(--brand); color: #fff; display: flex; align-items: center; justify-content: center; } .contact-row__icon i { font-size: 20px; } .contact-row__icon--soft { background: var(--surface-alt); color: var(--brand); } .contact-row__label { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 2px; } .contact-row__value { display: block; font-size: 16.5px; font-weight: 600; } /* form */ .form { display: grid; gap: 16px; } .form__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; } @media (min-width: 560px) { .form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .field { display: flex; flex-direction: column; gap: 7px; } .field label { font-size: 13px; font-weight: 500; color: var(--ink-soft); } .field input, .field select, .field textarea { font-family: inherit; font-size: 15.5px; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 12px 14px; width: 100%; transition: border-color .18s ease, box-shadow .18s ease; } .field textarea { min-height: 130px; resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { outline: 0; border-color: var(--brand-bright); box-shadow: 0 0 0 3px rgba(44, 110, 196, .14); } .form__note { font-size: 12.5px; line-height: 1.55; color: var(--ink-mute); } /* legal pages */ .legal h2 { font-size: 19px; margin-bottom: 8px; } .legal section + section { margin-top: 28px; } .legal p { font-size: 16px; line-height: 1.75; color: var(--ink-soft); white-space: pre-line; } /* 10. Footer --------------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--line); background: var(--surface-alt); } .site-footer__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 40px); padding-block: clamp(38px, 6vw, 56px); } @media (min-width: 900px) { .site-footer__grid { grid-template-columns: minmax(0, 1.7fr) repeat(3, minmax(0, 1fr)); } } .site-footer h3 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-mute); font-weight: 500; margin-bottom: 14px; } .site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .site-footer a { font-size: 14.5px; color: var(--ink-soft); text-decoration: none; } .site-footer a:hover { color: var(--brand); } .site-footer__blurb { font-size: 14.5px; line-height: 1.65; color: var(--ink-soft); max-width: 36ch; margin-block: 12px 16px; } /* landscape lockup here — the footer column is short and wide, and the wrapped two-line text badge it replaces read poorly on phones */ .footer-partner { display: inline-block; line-height: 0; border-radius: 2px; } .footer-partner img { width: 100%; max-width: 176px; height: auto; } .footer-partner:focus-visible { outline-offset: 4px; } .site-footer__bar { border-top: 1px solid var(--line); } .site-footer__bar > div { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-block: 18px; font-size: 13px; color: var(--ink-mute); } /* 11. Motion --------------------------------------------------------------- */ @keyframes drift { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .55; } 50% { transform: translate3d(-18px, 14px, 0) scale(1.07); opacity: .8; } } @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.82); } } .pill__dot { animation: pulse 2.4s ease-in-out infinite; } [data-reveal] { opacity: 0; transform: translateY(18px); } [data-reveal].is-in { opacity: 1; transform: none; transition: opacity .6s var(--ease), transform .6s var(--ease); } .no-js [data-reveal] { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } [data-reveal] { opacity: 1; transform: none; } .btn:hover, a.card:hover, .card--hover:hover, .contact-row:hover { transform: none; } } /* 12. Responsive ----------------------------------------------------------- */ @media (max-width: 980px) { .nav, .header__inner > .btn { display: none; } .burger { display: flex; } .brand { margin-right: auto; } } /* Below ~480px the full brand, the language toggle and the burger no longer fit on one line, which pushed the burger off-screen. */ @media (max-width: 480px) { .brand { font-size: 15px; min-width: 0; } .brand__accent { display: none; } .header__inner { gap: 8px; } .lang button { padding: 7px 9px; } } /* comfortable tap targets on touch devices — the header controls were 27px (wordmark) and 33px (language toggle), well under the 44px guideline */ @media (max-width: 980px) { .brand { min-height: 44px; } .lang button { min-height: 40px; } } /* Same for the links inside the content: text links measured 23px, FAQ rows 26px and footer links 18px. Padding grows the hit area without moving the text — the footer's row gap shrinks to keep the block the same height. */ @media (max-width: 760px) { .link-arrow { min-height: 44px; } .faq summary { min-height: 44px; padding-block: 4px; } .site-footer ul { gap: 2px; } .site-footer li > a { display: flex; align-items: center; min-height: 40px; } /* these two sit inline in the bottom bar, not in the link lists above */ .site-footer__bar a { display: inline-block; padding-block: 11px; } .breadcrumb { padding-block: 6px 0; } .breadcrumb a { display: inline-block; padding-block: 10px; } } @media (max-width: 760px) { .float-card { left: 10px; bottom: -18px; } /* .hero and .page-head are not clipped, so these bleed past the viewport and widen the layout viewport on phones. They add little at this size. */ .hero > .glow, .page-head > .glow { display: none; } } @media (max-width: 520px) { .hero__actions .btn, .cta-band__actions .btn { flex: 1 1 100%; } .stat span { font-size: 12.5px; } /* the stats strip right below carries the same claim — no need to repeat it */ .float-card { display: none; } }