/* ================================================================== HELGE KALIES — Design System v4.0 (WELTKLASSE) Dachdeckermeister & Glasermeister · Hildesheim A modern, layered, fluid-typography design system: • CSS @layer cascade organisation (reset → tokens → base → layout → components → utilities → motion → responsive → print) • Fluid responsive type via clamp() • CSS custom properties (light + ready-to-activate dark token set) • Native nesting, :has(), container queries, color-mix() • Scroll-driven animations (animation-timeline: view()) with graceful IntersectionObserver/.reveal fallback • Premium micro-interactions (magnetic-style buttons, 3D-tilt cards, staggered reveals, double-ring focus-visible) • Full prefers-reduced-motion + print support Author: Hermes Agent redesign ================================================================== */ /* DM Sans is loaded via in every HTML : dns-prefetch + preconnect (fonts.googleapis.com / fonts.gstatic.com) followed by the Google Fonts stylesheet with &display=swap. This replaces the former render-blocking @import. font-display:swap is guaranteed by the &display=swap query parameter on the font URL, so text renders immediately with a fallback and swaps once the web font is ready (no invisible-text / FOIT delay). */ /* ------------------------------------------------------------------ Cascade layers — declared once, lowest → highest priority. Unlayered rules (e.g. runtime JS styles) always win over layered rules, which is exactly what we want for injected behaviour. ------------------------------------------------------------------ */ @layer reset, tokens, base, layout, components, utilities, motion, responsive, print; /* ================================================================== 1. RESET (@layer reset) ================================================================== */ @layer reset { *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* Prevent iOS orientation-change font scaling. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } img, picture, svg, video { display: block; max-width: 100%; height: auto; } /* Inherit fonts for form controls (cross-browser normalisation). */ input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; border: none; background: none; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } table { border-collapse: collapse; width: 100%; } } /* ================================================================== 2. DESIGN TOKENS (@layer tokens) Light theme is the default. A complete dark token set lives below inside a commented-out [data-theme="dark"] block — ready to switch on. ================================================================== */ @layer tokens { :root { /* ---- Brand — Petrol (Dachdecker + Glaser identity) ---- */ --brand: #227573; --brand-600: #1d6564; --brand-700: #185d5c; --brand-800: #134a49; --brand-900: #0f3f3e; --brand-light: #e8f3f3; --brand-lighter: #f4f9f9; --brand-tint: #d4ecea; /* ---- Brand accent teal (highlights on dark surfaces) ---- */ --teal: #7dd3d1; --teal-soft: rgba(125, 211, 209, 0.16); /* ---- Accent — Red (CTA urgency) ---- */ --accent: #ce272d; --accent-dark: #a81e23; /* ---- Neutrals ---- */ --ink: #1a1a1a; --text: #2d2d2d; --muted: #6a6a6a; --light: #757575; --faint: #c4c4c4; --border: #e8e8e8; --border-dark: #d0d0d0; /* ---- Surfaces ---- */ --bg: #ffffff; --bg-alt: #fafbfb; --bg-fog: var(--brand-lighter); --bg-dark: var(--brand-900); --bg-ink: #0a1a1a; /* ---- Semantic star / success / danger ---- */ --star: #f5a623; --ok: #16a34a; --danger: #dc2626; /* ---- Radii ---- */ --r-xs: 6px; --r-sm: 8px; --r-md: 12px; --r-lg: 20px; --r-xl: 28px; --r-2xl: 36px; --r-pill: 999px; /* ---- Shadows — warm, layered (Airbnb-inspired) ---- */ --shadow-card: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.06); --shadow-hover: 0 0 0 1px var(--brand-tint), 0 18px 44px rgba(40, 138, 136, 0.16); --shadow-float: 0 8px 40px rgba(0, 0, 0, 0.10); --shadow-deep: 0 30px 70px rgba(15, 63, 62, 0.22); --shadow-button: 0 2px 8px rgba(40, 138, 136, 0.25); /* ---- Layout ---- */ --container: 1200px; --nav-h: 68px; --gutter: clamp(20px, 4vw, 32px); /* ---- Spacing scale (8px base: 8/16/24/32/48/64/96) ---- */ --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-5: 48px; --space-6: 64px; --space-7: 96px; /* ---- Fluid type scale (clamp based) ---- */ --step--1: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem); --step-0: clamp(1rem, 0.86rem + 0.7vw, 1.375rem); /* body 16→22 */ --step-1: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem); --step-2: clamp(1.25rem, 1.05rem + 1vw, 1.5rem); --step-3: clamp(1.625rem, 1.2rem + 2.1vw, 2.5rem); --step-4: clamp(2rem, 1.3rem + 3.5vw, 3.5rem); /* ---- Easing ---- */ --ease: cubic-bezier(0.4, 0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* ---- Durations ---- */ --t-fast: 0.2s var(--ease); --t-med: 0.4s var(--ease); --t-slow: 0.7s var(--ease-out); } /* ---------------------------------------------------------------- DARK MODE — TOKEN OVERRIDE Fully prepared, NOT activated. To enable, uncomment the block below and set (or a toggle). Every surface, text and shadow is remapped for true dark contrast. ---------------------------------------------------------------- [data-theme="dark"] { --brand: #4ea5a3; --brand-600: #3f8c8a; --brand-700: #357573; --brand-800: #2a5d5c; --brand-900: #1f4746; --brand-light: #12302f; --brand-lighter: #0c2423; --brand-tint: #1a3a39; --teal: #6fd2cf; --accent: #e05257; --accent-dark: #ce272d; --ink: #f1f5f5; --text: #d6dede; --muted: #93a3a3; --light: #7c8c8c; --faint: #445756; --border: #243434; --border-dark: #2f4242; --bg: #0b1a1a; --bg-alt: #0e2020; --bg-fog: #0c1c1c; --bg-dark: #071515; --bg-ink: #050f0f; --shadow-card: 0 0 0 1px rgba(255,255,255,0.04), 0 2px 10px rgba(0,0,0,0.4); --shadow-hover: 0 0 0 1px rgba(125,211,209,0.25), 0 18px 44px rgba(0,0,0,0.5); --shadow-float: 0 8px 40px rgba(0,0,0,0.55); --shadow-deep: 0 30px 70px rgba(0,0,0,0.6); } */ } /* ================================================================== 3. BASE (@layer base) Document-level defaults + fluid typography. ================================================================== */ @layer base { html { scroll-behavior: smooth; /* Offset anchor jumps so the fixed header never covers targets. */ scroll-padding-top: calc(var(--nav-h) + 24px); font-size: 16px; } body { font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: var(--step-0); /* fluid 16px → ~22px */ line-height: 1.65; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } /* Lock body scroll when the mobile menu is open (JS toggles class). */ body.hk-no-scroll { overflow: hidden; } /* ---- Headings (fluid) ---- */ h1, h2, h3, h4, h5 { font-weight: 700; line-height: 1.12; color: var(--ink); letter-spacing: -0.025em; text-wrap: balance; } h1 { font-size: var(--step-4); letter-spacing: -0.035em; font-weight: 700; } h2 { font-size: var(--step-3); letter-spacing: -0.03em; } h3 { font-size: var(--step-2); } h4 { font-size: var(--step-1); font-weight: 600; } h5 { font-size: var(--step--1); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; } p { margin-bottom: 1em; } p:last-child { margin-bottom: 0; } strong { font-weight: 700; } ::selection { background: var(--brand-tint); color: var(--brand-900); } /* ---- Universal keyboard focus (double-ring) ---- */ :focus-visible { outline: 2.5px solid var(--brand); outline-offset: 2px; border-radius: 6px; } /* Suppress the focus ring for mouse users. */ :focus:not(:focus-visible) { outline: none; } /* Reduced-motion guard at base level (reinforced in motion layer). */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } } /* ================================================================== 4. LAYOUT (@layer layout) ================================================================== */ @layer layout { .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .section { padding-block: clamp(56px, 9vw, 104px); position: relative; } .section.tight { padding-block: clamp(40px, 5vw, 72px); } .section.bg-fog { background: var(--bg-fog); } .section.bg-brand { background: var(--brand); color: #fff; } .section.bg-dark { background: var(--bg-ink); color: #fff; } .section.bg-alt { background: var(--bg-alt); } /* Dark/brand sections recolour text automatically via :has-free cascade. */ .bg-brand :is(h1, h2, h3, h4), .bg-dark :is(h1, h2, h3, h4) { color: #fff; } .bg-brand p, .bg-dark p { color: rgba(255, 255, 255, 0.85); } .bg-brand .muted, .bg-dark .muted { color: rgba(255, 255, 255, 0.7); } .bg-brand .eyebrow, .bg-dark .eyebrow { color: var(--teal); } .bg-brand .eyebrow::before, .bg-dark .eyebrow::before { background: var(--teal); } /* Heading-level accessibility overrides (original hierarchy fixes). */ .footer-col h3 { font-size: var(--step--1); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; } .feature-card h3, .step-card h3, .service-detail h3, .process-step h3 { font-size: var(--step-1); font-weight: 600; } .contact-info-card h2, .contact-heading { font-size: clamp(1.25rem, 2vw, 1.5rem); } } /* ================================================================== 5. COMPONENTS (@layer components) Native nesting is used throughout for locality & maintainability. ================================================================== */ @layer components { /* ---------- Skip link (WCAG 2.4.1) ---------- */ .skip-link { position: absolute; top: -120px; left: 0; z-index: 10000; background: var(--brand); color: #fff; padding: 12px 24px; font-size: var(--step--1); font-weight: 600; border-radius: 0 0 var(--r-md) 0; transition: top var(--t-fast); &:focus { top: 0; outline: 3px solid #fff; outline-offset: 2px; } } /* ============ HEADER ============ */ .header { position: fixed; inset: 0 0 auto 0; z-index: 1000; height: var(--nav-h); display: flex; align-items: center; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease), border-color 0.3s var(--ease); /* Richer blur + elevation once the user scrolls (JS toggles .scrolled). */ &.scrolled { background: rgba(255, 255, 255, 0.82); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 6px 24px rgba(0, 0, 0, 0.07); border-bottom-color: transparent; } /* Logo gently contracts when condensed. */ &.scrolled .logo { transform: scale(0.96); } } .header .logo { transition: transform 0.3s var(--ease); } .header-inner { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: var(--step-1); color: var(--ink); letter-spacing: -0.02em; & img { width: 38px; height: 38px; border-radius: var(--r-sm); object-fit: cover; } & span { display: block; font-size: 0.75rem; font-weight: 500; color: var(--muted); } } /* ---------- Primary navigation ---------- */ .nav { display: flex; align-items: center; gap: 4px; & > a { position: relative; padding: 8px 14px; font-size: var(--step--1); font-weight: 500; color: var(--text); border-radius: var(--r-sm); transition: background var(--t-fast), color var(--t-fast); &:hover { background: var(--brand-light); color: var(--brand); } } /* Active nav link (highlighted by JS). */ & > a.active, & .nav-dropdown > a.active { color: var(--brand); } & > a.active::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px; background: var(--brand); border-radius: 2px; } } .nav-dropdown { position: relative; /* Caret indicator. */ & > a::after { content: "▾"; margin-left: 4px; font-size: 0.75em; opacity: 0.5; } /* Reveal the dropdown on hover OR keyboard focus-within. */ &:hover .dropdown-menu, &:focus-within .dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } } .dropdown-menu { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(-6px); background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-float); padding: 8px; min-width: 280px; opacity: 0; visibility: hidden; transition: opacity var(--t-med), transform var(--t-med), visibility var(--t-med); & a { display: flex; align-items: flex-start; gap: 12px; padding: 12px; border-radius: var(--r-md); transition: background var(--t-fast); &:hover { background: var(--brand-light); } & strong { display: block; font-size: var(--step--1); } & small { font-size: 0.8125rem; color: var(--muted); } } } .dd-icon { width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--r-sm); background: var(--brand-light); color: var(--brand); display: grid; place-items: center; & svg { width: 20px; height: 20px; } } .header-cta { display: flex; align-items: center; gap: 12px; } .header-phone { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: var(--step--1); color: var(--ink); & svg { width: 16px; height: 16px; color: var(--brand); } &:hover { color: var(--brand); } } /* ============ BUTTONS ============ Magnetic-style hover (CSS approximation): on hover-capable devices the button lifts and a soft radial "glow" translates toward the cursor affordance. .btn::after provides the shine sweep. */ .btn { --btn-lift: -2px; position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 28px; font-size: var(--step--1); font-weight: 600; border-radius: var(--r-sm); white-space: nowrap; letter-spacing: -0.01em; transition: transform var(--t-fast), background var(--t-fast), box-shadow var(--t-fast), color var(--t-fast), border-color var(--t-fast); isolation: isolate; & svg { width: 18px; height: 18px; } /* Shine sweep pseudo (used by solid buttons). */ &::after { content: ""; position: absolute; inset: 0 auto 0 -130%; width: 60%; background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.35), transparent); transform: skewX(-20deg); transition: left 0.6s var(--ease); pointer-events: none; z-index: 1; } &:active { transform: translateY(1px); transition-duration: 0.08s; } &:disabled, &[disabled] { opacity: 0.5; cursor: not-allowed; pointer-events: none; transform: none; box-shadow: none; } } /* Hover-only micro-interactions (skip on touch). */ @media (hover: hover) { .btn { will-change: transform; } .btn-primary, .btn-accent, .btn-white { &:hover::after { left: 140%; } } } .btn-primary { background: var(--brand); color: #fff; box-shadow: var(--shadow-button); &:hover { background: var(--brand-700); transform: translateY(var(--btn-lift)); box-shadow: 0 6px 20px rgba(40, 138, 136, 0.38); } &:active { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22); } } .btn-accent { background: var(--accent); color: #fff; &:hover { background: var(--accent-dark); transform: translateY(var(--btn-lift)); box-shadow: 0 6px 20px rgba(206, 39, 45, 0.35); } &:active { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22); } } .btn-outline { border: 1.5px solid var(--border-dark); color: var(--ink); background: transparent; &:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-light); transform: translateY(var(--btn-lift)); } } .btn-white { background: #fff; color: var(--brand-700); &:hover { background: var(--brand-lighter); transform: translateY(var(--btn-lift)); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); } &:active { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22); } } .btn-ghost { color: var(--brand); &:hover { background: var(--brand-light); transform: translateY(var(--btn-lift)); } } .btn-lg { padding: 16px 36px; font-size: var(--step-0); } .btn-sm { padding: 8px 18px; font-size: 0.875rem; } .btn-block { display: flex; width: 100%; } /* Premium double-ring focus for all buttons. */ .btn:focus-visible { outline: 2.5px solid var(--brand); outline-offset: 3px; box-shadow: 0 0 0 4px rgba(40, 138, 136, 0.22); } /* ============ MOBILE NAV TOGGLE + MENU ============ */ .nav-toggle { display: none; width: 44px; height: 44px; border-radius: var(--r-sm); align-items: center; justify-content: center; & span { position: relative; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: background var(--t-fast), transform var(--t-fast); &::before, &::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform var(--t-fast), top var(--t-fast); } &::before { top: -7px; } &::after { top: 7px; } } /* Animate into an "X" when open. */ &.open span { background: transparent; &::before { top: 0; transform: rotate(45deg); } &::after { top: 0; transform: rotate(-45deg); } } } .mobile-menu { position: fixed; inset: var(--nav-h) 0 0 0; z-index: 999; background: #fff; padding: 24px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; visibility: hidden; transform: translateX(100%); transition: transform 0.4s var(--ease), visibility 0s linear 0.4s; &.open { visibility: visible; transform: translateX(0); transition: transform 0.4s var(--ease), visibility 0s; } & a { display: block; padding: 14px 16px; font-size: var(--step-1); font-weight: 500; border-radius: var(--r-md); color: var(--ink); transition: background var(--t-fast), color var(--t-fast); &:hover { background: var(--brand-light); } &.active { color: var(--brand); font-weight: 600; } } & .btn { margin-top: 16px; } /* Staggered entrance for menu items (JS adds .open). */ & > :is(a, .btn) { opacity: 0; transform: translateX(24px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease), background var(--t-fast), color var(--t-fast); } } .mobile-menu.open > :is(a, .btn) { opacity: 1; transform: none; } .mobile-menu.open > :nth-child(1) { transition-delay: 0.04s; } .mobile-menu.open > :nth-child(2) { transition-delay: 0.08s; } .mobile-menu.open > :nth-child(3) { transition-delay: 0.12s; } .mobile-menu.open > :nth-child(4) { transition-delay: 0.16s; } .mobile-menu.open > :nth-child(5) { transition-delay: 0.20s; } .mobile-menu.open > :nth-child(6) { transition-delay: 0.24s; } .mobile-menu.open > :nth-child(7) { transition-delay: 0.28s; } .mobile-menu.open > :nth-child(8) { transition-delay: 0.32s; } .mobile-menu.open > .btn { transition-delay: 0.36s; } /* ============ HERO ============ */ .hero { min-height: clamp(480px, 78vh, 640px); padding: calc(var(--nav-h) + 64px) 0 80px; position: relative; overflow: hidden; background: var(--brand-900); color: #fff; /* Layered ambient glow + topographic SVG texture. */ &::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 0%, var(--teal-soft), transparent 70%), url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%237dd3d1' stroke-width='0.5' opacity='0.08'%3E%3Cpath d='M0 30 Q15 20 30 30 T60 30'/%3E%3Cpath d='M0 40 Q15 30 30 40 T60 40'/%3E%3Cpath d='M0 50 Q15 40 30 50 T60 50'/%3E%3Cpath d='M0 20 Q15 10 30 20 T60 20'/%3E%3Cpath d='M0 10 Q15 0 30 10 T60 10'/%3E%3C/g%3E%3C/svg%3E"); } } .hero-inner { position: relative; z-index: 1; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .hero-badge { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(125, 211, 209, 0.3); border-radius: var(--r-pill); font-size: var(--step--1); font-weight: 500; color: var(--teal); margin-bottom: 24px; backdrop-filter: blur(4px); & svg { width: 14px; height: 14px; } } .hero h1 { color: #fff; max-width: 18ch; margin-bottom: 20px; /* Inline highlight span (.hl). */ & .hl { color: var(--teal); } } .hero-sub { font-size: var(--step-1); color: rgba(255, 255, 255, 0.8); max-width: 50ch; margin-bottom: 32px; line-height: 1.6; } .hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 48px; } .hero-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, 0.1); & .num { font-size: var(--step-3); font-weight: 700; color: #fff; letter-spacing: -0.03em; line-height: 1; } & .label { font-size: var(--step--1); color: rgba(255, 255, 255, 0.6); margin-top: 6px; } } /* ============ PAGE HERO (subpages) ============ */ .page-hero { padding: calc(var(--nav-h) + 56px) 0 48px; background: var(--brand-900); color: #fff; position: relative; overflow: hidden; &::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 80% 20%, var(--teal-soft), transparent); } } .page-hero-inner { position: relative; z-index: 1; } .breadcrumb { display: flex; align-items: center; gap: 8px; font-size: var(--step--1); color: rgba(255, 255, 255, 0.5); margin-bottom: 16px; & a { color: rgba(255, 255, 255, 0.7); } & a:hover { color: #fff; } } .page-hero h1 { color: #fff; margin-bottom: 12px; } .page-hero .lead { color: rgba(255, 255, 255, 0.75); } /* ============ TRUST BAR ============ */ .trust-bar { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(24px, 4vw, 56px); padding: 40px 0; border-bottom: 1px solid var(--border); } .trust-item { text-align: center; & .num { font-size: var(--step-3); font-weight: 700; color: var(--brand); letter-spacing: -0.03em; line-height: 1; } & .label { font-size: var(--step--1); color: var(--muted); margin-top: 6px; } } /* ============ SERVICE CARDS ============ The grid is a container so individual cards can reflow their internals responsively without viewport media queries. */ .service-grid { container-type: inline-size; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 24px; margin-top: 48px; } /* 3D-tilt feel: the grid establishes perspective so child cards can rotateX/translateY on hover for a premium lift. */ .service-grid, .feature-grid, .testimonial-grid, .ref-grid, .promo-grid { perspective: 1000px; } .service-card { display: flex; flex-direction: column; gap: 12px; background: #fff; border: 1px solid transparent; border-radius: var(--r-lg); padding: 32px 28px; box-shadow: var(--shadow-card); transition: box-shadow var(--t-med), transform var(--t-med), border-color var(--t-med); will-change: transform; &:hover { box-shadow: var(--shadow-hover); transform: translateY(-6px) perspective(800px) rotateX(2deg); border-color: var(--brand-tint); } & h3 { font-size: var(--step-2); } & p { font-size: var(--step--1); color: var(--muted); flex-grow: 1; } /* Pull the "Mehr erfahren" link to the bottom & animate its arrow. */ &:hover .service-link svg { transform: translateX(4px); } } .service-icon { width: 52px; height: 52px; border-radius: var(--r-md); background: var(--brand-light); color: var(--brand); display: grid; place-items: center; margin-bottom: 8px; transition: transform var(--t-med), background var(--t-med); & svg { width: 26px; height: 26px; } } .service-card:hover .service-icon { transform: scale(1.08) rotate(-4deg); background: color-mix(in srgb, var(--brand) 14%, var(--brand-light)); } .service-link { position: relative; display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-weight: 600; font-size: var(--step--1); color: var(--brand); & svg { width: 16px; height: 16px; transition: transform var(--t-fast); } } /* Animated underline for the service link label (optional .label-underline). */ .service-link .label-underline { background-image: linear-gradient(var(--brand), var(--brand)); background-size: 0% 1.5px; background-repeat: no-repeat; background-position: left 100%; padding-bottom: 2px; transition: background-size 0.3s var(--ease); } .service-link:hover .label-underline, .service-link:focus-visible .label-underline { background-size: 100% 1.5px; } /* Container query: when the grid is wide, give cards more breathing room. */ @container (min-width: 720px) { .service-card { padding: 36px 32px; } } /* ============ SPLIT SECTION ============ */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; } .split.reverse .split-content { order: 2; } .split-content { display: flex; flex-direction: column; gap: 16px; } .split-checklist { display: grid; gap: 12px; margin-top: 16px; & li { display: flex; align-items: flex-start; gap: 12px; font-size: var(--step-0); color: var(--text); } & svg { width: 20px; height: 20px; color: var(--brand); flex-shrink: 0; margin-top: 2px; } } /* ============ ABOUT VISUAL (brand stat block) ============ */ .about-visual { position: relative; overflow: hidden; border-radius: var(--r-xl); padding: clamp(32px, 4vw, 48px); min-height: clamp(340px, 42vw, 420px); color: #fff; display: flex; flex-direction: column; justify-content: flex-end; background: linear-gradient(135deg, var(--brand-900), var(--brand-700)); } .about-visual-bg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.15; pointer-events: none; } .about-visual-body { position: relative; z-index: 1; } .about-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .about-stat-num { font-size: clamp(2rem, 5vw, 2.5rem); font-weight: 700; color: var(--teal); line-height: 1; letter-spacing: -0.03em; } .about-stat-label { font-size: 0.875rem; opacity: 0.7; margin-top: 4px; } .about-signature { margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.15); } .about-signature-name { font-size: 1.125rem; font-weight: 600; margin-bottom: 4px; } .about-signature-role { font-size: 0.9375rem; opacity: 0.7; } /* ============ COMPARISON TABLE (horizontal-scroll wrapper) ============ */ .cmp-table-scroll { overflow-x: auto; margin-top: 40px; border-radius: var(--r-lg); box-shadow: var(--shadow-card); border: 1px solid var(--border); -webkit-overflow-scrolling: touch; } /* Tidy scrollbar styling. */ .cmp-table-scroll::-webkit-scrollbar { height: 8px; } .cmp-table-scroll::-webkit-scrollbar-track { background: transparent; } .cmp-table-scroll::-webkit-scrollbar-thumb { background: var(--border-dark); border-radius: 4px; } .cmp-table-scroll::-webkit-scrollbar-thumb:hover { background: var(--brand); } /* ============ FEATURE GRID ============ */ .feature-grid { container-type: inline-size; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; margin-top: 48px; } .feature-card { padding: 32px 28px; border-radius: var(--r-lg); background: #fff; border: 1px solid var(--border); transition: border-color var(--t-med), box-shadow var(--t-med), transform var(--t-med); will-change: transform; &:hover { border-color: var(--brand-tint); box-shadow: var(--shadow-hover); transform: translateY(-5px); } & .icon { width: 48px; height: 48px; border-radius: var(--r-md); background: var(--brand); color: #fff; display: grid; place-items: center; margin-bottom: 20px; transition: transform var(--t-med); & svg { width: 24px; height: 24px; } } &:hover .icon { transform: scale(1.08) rotate(-4deg); } & h4 { margin-bottom: 8px; } & p { font-size: var(--step--1); color: var(--muted); } } /* ============ STEPS ============ */ .steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 48px; counter-reset: step; /* Decorative connecting line (draws in on scroll — see motion layer). */ &::after { content: ""; position: absolute; top: 60px; left: 12%; right: 12%; height: 2px; background: linear-gradient(90deg, var(--brand-tint), var(--brand), var(--brand-tint)); opacity: 0; transition: opacity var(--t-med); } } .step-card { position: relative; padding: 32px 24px; /* Big ghost counter (01, 02, …). */ &::before { counter-increment: step; content: counter(step, decimal-leading-zero); font-size: 3rem; font-weight: 700; color: var(--brand-tint); line-height: 1; margin-bottom: 16px; display: block; } & h4 { margin-bottom: 8px; } & p { font-size: var(--step--1); color: var(--muted); } } /* ============ CTA BANNER ============ */ .cta-banner { position: relative; overflow: hidden; background: var(--brand); border-radius: var(--r-xl); padding: clamp(40px, 5vw, 56px) clamp(28px, 4vw, 48px); color: #fff; transition: transform var(--t-med), box-shadow var(--t-med); &::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.12), transparent 50%); } &:hover { box-shadow: var(--shadow-deep); } & h2 { color: #fff; margin-bottom: 8px; } & p { color: rgba(255, 255, 255, 0.8); } & .btns { display: flex; gap: 12px; flex-wrap: wrap; flex-shrink: 0; } } .cta-banner-inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; } /* ============ PROMO GRID (Förderung) ============ */ .promo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-top: 32px; } .promo-card { background: #fff; border-radius: var(--r-lg); padding: 24px; text-align: center; border: 1px solid var(--border); transition: border-color var(--t-med), transform var(--t-med), box-shadow var(--t-med); will-change: transform; &:hover { border-color: var(--brand-tint); transform: translateY(-3px); box-shadow: var(--shadow-hover); } & h4 { margin: 12px 0 4px; } & p { font-size: 0.875rem; color: var(--muted); } } .promo-percent { font-size: 2.5rem; font-weight: 700; color: var(--accent); letter-spacing: -0.03em; line-height: 1; } /* ============ TESTIMONIALS ============ */ .testimonial-grid { container-type: inline-size; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-top: 48px; } .testimonial-card { display: flex; flex-direction: column; gap: 16px; background: #fff; border-radius: var(--r-lg); padding: 32px 28px; box-shadow: var(--shadow-card); transition: box-shadow var(--t-med), transform var(--t-med); will-change: transform; &:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); } & blockquote { font-size: var(--step-1); line-height: 1.6; color: var(--text); font-style: normal; flex-grow: 1; } } .stars { display: flex; gap: 2px; color: var(--star); & svg { width: 18px; height: 18px; } } .testimonial-author { display: flex; align-items: center; gap: 12px; } .author-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--brand-light); color: var(--brand); display: grid; place-items: center; font-weight: 700; font-size: var(--step-2); } .author-name { font-weight: 600; font-size: var(--step--1); } .author-loc { font-size: 0.8125rem; color: var(--muted); } /* ============ FAQ ============ */ .faq-list { margin-top: 32px; display: grid; gap: 12px; max-width: 800px; } .faq-item { background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; transition: border-color var(--t-fast), box-shadow var(--t-fast); &:hover { border-color: var(--brand-tint); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05); } &.open { border-color: var(--brand-tint); } } .faq-q { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; padding: 20px 24px; text-align: left; font-weight: 600; font-size: var(--step-1); color: var(--ink); & .plus { width: 24px; height: 24px; flex-shrink: 0; color: var(--brand); transition: transform var(--t-fast); } } .faq-item.open .faq-q .plus { transform: rotate(45deg); } .faq-a { max-height: 0; overflow: hidden; transition: max-height var(--t-med); } .faq-item.open .faq-a { max-height: 600px; } .faq-a-inner { padding: 0 24px 20px; color: var(--muted); line-height: 1.7; } /* If a FAQ item is open, give the whole card a subtle elevation (:has). */ .faq-list:has(.faq-item.open) { gap: 14px; } /* ============ CONTACT ============ */ .contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 48px; margin-top: 48px; } .contact-info-card { background: var(--brand-900); color: #fff; border-radius: var(--r-lg); padding: 40px 32px; display: flex; flex-direction: column; gap: 24px; & h2, & h3 { color: #fff; } & .eyebrow { color: var(--teal); } & .eyebrow::before { background: var(--teal); } } .contact-detail { display: flex; align-items: flex-start; gap: 14px; & svg { width: 22px; height: 22px; color: var(--teal); flex-shrink: 0; margin-top: 2px; } & .label { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; letter-spacing: 0.05em; } & .value { font-size: var(--step-1); color: #fff; font-weight: 500; } & a { color: #fff; transition: color var(--t-fast); &:hover { color: var(--teal); } } } /* ---------- Contact form ---------- */ .contact-form { background: #fff; border-radius: var(--r-lg); padding: 40px 32px; box-shadow: var(--shadow-card); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-group { position: relative; margin-bottom: 16px; & label { display: block; font-weight: 500; font-size: var(--step--1); margin-bottom: 6px; color: var(--ink); } & :is(input, select, textarea) { width: 100%; padding: 12px 16px; border: 1.5px solid var(--border); border-radius: var(--r-sm); font-size: var(--step-0); color: var(--ink); background: var(--bg-alt); transition: border-color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast); &:focus { outline: none; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 4px rgba(40, 138, 136, 0.12); } &:focus-visible { outline: 2.5px solid var(--brand); outline-offset: 1px; } } & textarea { resize: vertical; min-height: 120px; } /* JS validation states. */ &.hk-error :is(input, select, textarea) { border-color: var(--danger); } &.hk-success :is(input, select, textarea) { border-color: var(--ok); } &.hk-error .form-consent { color: var(--danger); } } .form-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 0.875rem; color: var(--muted); & input { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; } } .form-success { display: none; background: var(--brand-light); border-radius: var(--r-md); padding: 16px 20px; color: var(--brand-700); font-weight: 500; &.show { display: block; } } /* ============ REFERENZEN ============ */ .ref-grid { container-type: inline-size; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; margin-top: 48px; } .ref-card { background: #fff; border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-card); transition: box-shadow var(--t-med), transform var(--t-med), border-color var(--t-med); will-change: transform; &:hover { box-shadow: var(--shadow-hover); transform: translateY(-6px) perspective(800px) rotateX(2deg); border-color: var(--brand-tint); } } .ref-visual { height: 180px; background: var(--brand-900); position: relative; overflow: hidden; &::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, var(--brand-800), var(--brand-600)); } & .ref-type { position: absolute; bottom: 16px; left: 20px; padding: 6px 14px; background: rgba(255, 255, 255, 0.15); border-radius: var(--r-pill); font-size: 0.8125rem; color: #fff; backdrop-filter: blur(4px); font-weight: 500; } } .ref-body { padding: 24px; & h4 { margin-bottom: 8px; } & p { font-size: var(--step--1); color: var(--muted); } } .ref-meta { display: flex; gap: 16px; margin-top: 16px; font-size: 0.8125rem; color: var(--light); & span { display: flex; align-items: center; gap: 4px; } & svg { width: 14px; height: 14px; } } /* ============ FOOTER ============ */ .footer { background: var(--bg-ink); color: rgba(255, 255, 255, 0.7); padding: 64px 0 32px; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 48px; margin-bottom: 48px; } .footer-brand { & h3 { color: #fff; margin-bottom: 16px; font-size: var(--step-2); display: flex; align-items: center; gap: 10px; } & p { font-size: var(--step--1); max-width: 36ch; line-height: 1.6; } } .footer-col { & h3, & h5 { color: rgba(255, 255, 255, 0.5); margin-bottom: 16px; } & a { display: block; padding: 6px 0; font-size: var(--step--1); color: rgba(255, 255, 255, 0.7); transition: color var(--t-fast), transform var(--t-fast); &:hover { color: var(--teal); transform: translateX(3px); } } } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 24px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 0.875rem; color: rgba(255, 255, 255, 0.4); & a { color: rgba(255, 255, 255, 0.5); &:hover { color: var(--teal); } } } /* ============ LEGAL PAGES ============ */ .legal-content { max-width: 760px; margin-inline: auto; padding: 32px 0; & h1 { margin-bottom: 8px; } & h2 { font-size: var(--step-2); margin: 32px 0 12px; color: var(--ink); } & :is(p, li) { font-size: var(--step--1); line-height: 1.7; color: var(--text); margin-bottom: 8px; } & ul { list-style: disc; padding-left: 20px; margin-bottom: 16px; } } /* ============ BACK-TO-TOP (style companion to JS-injected button) ============ */ .back-to-top { position: fixed; right: 20px; bottom: 20px; z-index: 900; width: 48px; height: 48px; border: none; border-radius: 50%; background: var(--brand); color: #fff; font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(16px); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), filter 0.2s var(--ease); &.visible { opacity: 1; visibility: visible; transform: none; } &:hover { filter: brightness(1.1); } &:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; } } } /* ================================================================== 6. UTILITIES (@layer utilities) Small, composable helpers. ================================================================== */ @layer utilities { .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--brand); margin-bottom: 16px; &::before { content: ""; width: 24px; height: 2px; background: var(--brand); border-radius: 2px; } } .lead { font-size: clamp(1.0625rem, 0.95rem + 0.6vw, 1.375rem); line-height: 1.6; color: var(--muted); max-width: 60ch; } .muted { color: var(--muted); } .accent { color: var(--accent); } .brand { color: var(--brand); } /* Animated link underline (grows from left on hover/focus). */ .link-underline { position: relative; &::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 2px; background: currentColor; border-radius: 2px; transform: scaleX(0); transform-origin: right center; transition: transform 0.3s var(--ease); } &:hover::after, &:focus-visible::after { transform: scaleX(1); transform-origin: left center; } } /* CTA pulse — gentle attention ring for priority buttons. */ .cta-pulse { animation: cta-pulse 2.6s ease-in-out infinite; } .btn-primary.cta-pulse { animation: cta-pulse-brand 2.6s ease-in-out infinite; } /* Generic entrance / float helpers. */ .animate-fade-in { animation: fade-in 0.6s var(--ease) both; } .animate-float { animation: float-soft 4s ease-in-out infinite; } /* Skeleton shimmer for loading states. */ .skeleton, .ref-visual.is-loading, img.is-loading { background: linear-gradient(90deg, #eef2f2 25%, #dde7e7 37%, #eef2f2 63%); background-size: 400% 100%; animation: skeleton-shimmer 1.4s ease infinite; } img.is-loading { visibility: hidden; } img.is-loaded { visibility: visible; animation: fade-in 0.5s var(--ease) both; } /* Stagger helper used by data-reveal-delay (ms) — progressive enhancement. */ .reveal[data-delay="1"] { transition-delay: 0.10s; } .reveal[data-delay="2"] { transition-delay: 0.20s; } .reveal[data-delay="3"] { transition-delay: 0.30s; } .reveal[data-delay="4"] { transition-delay: 0.40s; } } /* ================================================================== 7. MOTION (@layer motion) Keyframes + scroll-reveal system + scroll-driven enhancement. The reveal system animates the `translate` LONGHAND + `opacity` (never `transform`), so card hover `transform`s keep working. ================================================================== */ @layer motion { /* ---------- Keyframes ---------- */ @keyframes fade-in { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: none; } } @keyframes float-soft { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } } @keyframes cta-pulse { 0%, 100% { box-shadow: 0 2px 8px rgba(206, 39, 45, 0.30), 0 0 0 0 rgba(206, 39, 45, 0.38); } 50% { box-shadow: 0 4px 18px rgba(206, 39, 45, 0.42), 0 0 0 10px rgba(206, 39, 45, 0); } } @keyframes cta-pulse-brand { 0%, 100% { box-shadow: var(--shadow-button), 0 0 0 0 rgba(40, 138, 136, 0.38); } 50% { box-shadow: 0 4px 18px rgba(40, 138, 136, 0.42), 0 0 0 10px rgba(40, 138, 136, 0); } } @keyframes skeleton-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } /* Scroll-driven entrance keyframes (used with animation-timeline: view()). */ @keyframes reveal-in { from { opacity: 0; translate: 0 1.5rem; } to { opacity: 1; translate: none; } } @keyframes reveal-in-left { from { opacity: 0; translate: -2.5rem 0; } to { opacity: 1; translate: none; } } @keyframes reveal-in-right { from { opacity: 0; translate: 2.5rem 0; } to { opacity: 1; translate: none; } } @keyframes reveal-in-scale { from { opacity: 0; translate: 0 1.5rem; scale: 0.94; } to { opacity: 1; translate: none; scale: 1; } } /* ---------- Staggered card reveals (CSS :nth-child delays) ---------- */ /* Applied to direct reveal children inside common grids so cards cascade in sequence when their container enters the viewport. */ .service-grid > .reveal:nth-child(2), .feature-grid > .reveal:nth-child(2), .testimonial-grid > .reveal:nth-child(2), .ref-grid > .reveal:nth-child(2), .promo-grid > .reveal:nth-child(2), .steps-grid > .reveal:nth-child(2) { transition-delay: 0.08s; } .service-grid > .reveal:nth-child(3), .feature-grid > .reveal:nth-child(3), .testimonial-grid > .reveal:nth-child(3), .ref-grid > .reveal:nth-child(3), .promo-grid > .reveal:nth-child(3), .steps-grid > .reveal:nth-child(3) { transition-delay: 0.16s; } .service-grid > .reveal:nth-child(4), .feature-grid > .reveal:nth-child(4), .testimonial-grid > .reveal:nth-child(4), .ref-grid > .reveal:nth-child(4), .promo-grid > .reveal:nth-child(4), .steps-grid > .reveal:nth-child(4) { transition-delay: 0.24s; } .service-grid > .reveal:nth-child(5), .feature-grid > .reveal:nth-child(5) { transition-delay: 0.32s; } /* ---------- Base reveal (IntersectionObserver / .in fallback) ---------- Works everywhere: JS adds `.in` (or `.active`) when the element enters the viewport. Uses `translate` longhand so hover `transform` on the same element is never overridden. */ .reveal { opacity: 0; translate: 0 1.5rem; transition: opacity 0.7s var(--ease-out), translate 0.7s var(--ease-out); } .reveal.in, .reveal.active { opacity: 1; translate: none; } .reveal-left { opacity: 0; translate: -2.5rem 0; transition: opacity 0.7s var(--ease-out), translate 0.7s var(--ease-out); } .reveal-right { opacity: 0; translate: 2.5rem 0; transition: opacity 0.7s var(--ease-out), translate 0.7s var(--ease-out); } .reveal-scale { opacity: 0; translate: 0 1.5rem; scale: 0.94; transition: opacity 0.7s var(--ease-out), translate 0.7s var(--ease-out), scale 0.7s var(--ease-out); } .reveal-left.active, .reveal-right.active, .reveal-scale.active { opacity: 1; translate: none; scale: 1; } /* Legacy alias: some markup may still use .in on directional reveals. */ .reveal-left.in, .reveal-right.in, .reveal-scale.in { opacity: 1; translate: none; scale: 1; } /* Staggered hero entrance (instant on load). */ .hero-badge { animation: fade-in 0.8s var(--ease) 0.10s both; } .hero h1 { animation: fade-in 0.8s var(--ease) 0.20s both; } .hero-sub { animation: fade-in 0.8s var(--ease) 0.35s both; } .hero-ctas { animation: fade-in 0.8s var(--ease) 0.50s both; } .hero-trust { animation: fade-in 0.8s var(--ease) 0.65s both; } /* ---------- Scroll-driven enhancement (progressive) ---------- In supporting browsers we let the browser drive the entrance with animation-timeline: view(). This converges to the same end state as the .in fallback, so there is zero risk of permanently hidden content. Only enabled when motion is welcome. */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .reveal { animation: reveal-in linear both; animation-timeline: view(); animation-range: entry 0% cover 32%; } .reveal-left { animation-name: reveal-in-left; animation-timeline: view(); animation-range: entry 0% cover 32%; } .reveal-right { animation-name: reveal-in-right; animation-timeline: view(); animation-range: entry 0% cover 32%; } .reveal-scale { animation-name: reveal-in-scale; animation-timeline: view(); animation-range: entry 0% cover 32%; } /* The steps connector line draws in as the grid scrolls into view. */ .steps-grid::after { opacity: 1; transform: scaleX(0); transform-origin: left center; animation: draw-line linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; } @keyframes draw-line { from { transform: scaleX(0); } to { transform: scaleX(1); } } } } /* ---------- Comprehensive reduced-motion support ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .reveal, .reveal-left, .reveal-right, .reveal-scale { opacity: 1 !important; translate: none !important; scale: 1 !important; transform: none !important; } .cta-pulse, .btn-primary.cta-pulse, .animate-float { animation: none !important; } .mobile-menu > :is(a, .btn) { opacity: 1 !important; transform: none !important; } .skeleton, img.is-loading { animation: none !important; } } } /* ================================================================== 8. RESPONSIVE (@layer responsive) Major breakpoint overrides — grouped & predictable. ================================================================== */ @layer responsive { /* ================================================================== BREAKPOINT SYSTEM (desktop-first, progressive reduction) 1400 · 1200 · 992 · 768 · 576 · 480 · 375 Mobile rendering is verified down to 375px for every component. ================================================================== */ /* ---- ≥1400px : Large desktop — give the layout more air ---- */ @media (min-width: 1400px) { :root { --container: 1280px; } } /* ---- ≤1200px : Standard desktop ---- */ @media (max-width: 1200px) { .split { gap: 48px; } .footer-grid { gap: 40px; } } /* ---- ≤992px : Tablet landscape / small laptop — NAV COLLAPSES ---- */ @media (max-width: 992px) { /* Hamburger appears; desktop nav + phone link hide. */ .nav, .header-phone { display: none; } .nav-toggle { display: flex; } /* Two-column → single column. */ .split { grid-template-columns: 1fr; gap: 40px; } .split.reverse .split-content { order: 0; } .contact-grid { grid-template-columns: 1fr; gap: 32px; } /* Steps: 4 → 2, and remove the horizontal connector line. */ .steps-grid { grid-template-columns: repeat(2, 1fr); } .steps-grid::after { display: none; } /* Hero trust stats: 4 → 2. */ .hero-trust { grid-template-columns: repeat(2, 1fr); gap: 24px; } /* USP trust bar: flex → tidy 2×2 grid. */ .trust-bar { display: grid; grid-template-columns: repeat(2, 1fr); justify-items: center; text-align: center; } /* Footer: 4 → 2 columns. */ .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } /* CTA banner stacks vertically. */ .cta-banner { padding: 40px 28px; } .cta-banner-inner { flex-direction: column; text-align: center; align-items: center; } .cta-banner-inner .btns { justify-content: center; } /* About visual: relax min-height. */ .about-visual { min-height: 360px; } } /* ---- ≤768px : Tablet portrait ---- */ @media (max-width: 768px) { .section { padding-block: clamp(48px, 8vw, 64px); } .section.tight { padding-block: clamp(36px, 6vw, 48px); } /* Footer collapses to a single readable column. */ .footer-grid { grid-template-columns: 1fr; gap: 32px; } .footer-brand { max-width: 42ch; } .footer-bottom { flex-direction: column; text-align: center; gap: 8px; } /* Contact panels breathe a little. */ .contact-info-card, .contact-form { padding: 32px 24px; } /* About visual stats spacing. */ .about-stats { gap: 20px; } /* Lighter hero bottom padding. */ .hero { padding-bottom: 64px; } } /* ---- ≤576px : Large phone ---- */ @media (max-width: 576px) { /* Hide the header CTA button — the hamburger menu carries its own. */ .header-cta { display: none; } /* Hero becomes content-driven (no forced tall hero on phones). */ .hero { min-height: auto; } /* Hero CTAs become full-width, stacked. */ .hero-ctas { flex-direction: column; align-items: stretch; gap: 12px; } .hero-ctas .btn { width: 100%; } /* Steps: 2 → 1. */ .steps-grid { grid-template-columns: 1fr; } /* Form field rows stack. */ .form-row { grid-template-columns: 1fr; } /* Tighter hero trust. */ .hero-trust { gap: 16px; } /* USP trust bar: 2 → 1 column. */ .trust-bar { grid-template-columns: 1fr; } /* Cards: slightly less internal padding on phones. */ .service-card, .feature-card, .testimonial-card { padding: 24px 20px; } .contact-form, .contact-info-card { padding: 28px 20px; } /* About visual: drop min-height, compact. */ .about-visual { min-height: auto; padding: 32px 24px; } .back-to-top { width: 44px; height: 44px; right: 14px; bottom: 14px; } } /* ---- ≤480px : Small phone ---- */ @media (max-width: 480px) { /* Hide the logo subtitle to reclaim horizontal space. */ .logo span { display: none; } .logo { gap: 8px; } .logo img { width: 34px; height: 34px; } /* Slightly smaller hero numerals. */ .hero-trust .num { font-size: clamp(1.5rem, 7vw, 1.75rem); } /* Tighter section padding on small screens. */ .section { padding-block: 44px; } /* About stat numerals scale down. */ .about-stat-num { font-size: clamp(1.75rem, 9vw, 2.25rem); } /* Trust bar sits a little lower. */ .trust-bar { padding: 32px 0; } } /* ---- ≤375px : Very small phone — final overflow guards ---- */ @media (max-width: 375px) { :root { --gutter: 16px; } /* Cap the hero headline so it never overflows. */ .hero h1 { font-size: clamp(1.75rem, 7.5vw, 2.125rem); } .hero-sub { font-size: 1rem; } .hero-badge { font-size: 0.75rem; padding: 6px 12px; } /* Comfortable full-width buttons with generous tap area. */ .btn { padding: 12px 20px; } .trust-bar { padding: 28px 0; } /* Footer brand copy stays readable. */ .footer-brand p { font-size: 0.875rem; } } } /* ================================================================== 9. PRINT (@layer print) Clean, ink-saving, readable hard copy. ================================================================== */ @layer print { @media print { *, *::before, *::after { animation: none !important; transition: none !important; box-shadow: none !important; text-shadow: none !important; } html { scroll-behavior: auto; scroll-padding-top: 0; } body { background: #fff !important; color: #000 !important; font-size: 11pt; line-height: 1.4; } /* Hide interactive / decorative chrome. */ .header, .nav, .nav-toggle, .header-cta, .mobile-menu, .footer, .cta-banner, .hero-ctas .btn:not(:first-child), .form-success, .back-to-top { display: none !important; } /* Flatten dark hero areas into high-contrast black-on-white. */ .hero, .page-hero { background: #fff !important; color: #000 !important; min-height: auto !important; padding: 24px 0 16px !important; border-bottom: 2px solid #0f3f3e; } .hero::before, .page-hero::before, .cta-banner::before { display: none !important; } /* Flatten the about-visual gradient block to ink-saving black-on-white. */ .about-visual, .about-visual-bg { background: none !important; } .about-visual { color: #000 !important; min-height: auto !important; padding: 16px 0 !important; border: 1px solid #ccc !important; } .about-visual-bg { display: none !important; } .about-stat-num, .about-signature-name, .about-signature-role { color: #000 !important; opacity: 1 !important; } .about-signature { border-top-color: #ccc !important; } /* Ensure the comparison table prints in full (no clipped scroll area). */ .cmp-table-scroll { overflow: visible !important; box-shadow: none !important; } .hero h1, .page-hero h1, .hero h1 .hl, .hero-sub, .hero-badge, .hero-trust .num, .hero-trust .label, .breadcrumb, .breadcrumb a, .page-hero .lead { color: #000 !important; } /* Force-reveal everything (no scroll animations in print). */ .reveal, .reveal.in, .reveal.active, .reveal-left, .reveal-right, .reveal-scale { opacity: 1 !important; translate: none !important; scale: 1 !important; transform: none !important; } a { color: #000 !important; text-decoration: underline; } /* Surface full URLs for external links. */ a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #444; word-break: break-all; } .section { padding: 16px 0 !important; page-break-inside: avoid; } .service-card, .feature-card, .ref-card, .testimonial-card, .promo-card, .contact-info-card, .contact-form, .faq-item { box-shadow: none !important; border: 1px solid #ccc !important; page-break-inside: avoid; } .container { max-width: 100% !important; padding: 0 !important; } .contact-grid, .split, .feature-grid, .service-grid, .testimonial-grid { display: block !important; } .ref-visual { height: 120px !important; } h1, h2, h3, h4 { page-break-after: avoid; } img { max-width: 100% !important; page-break-inside: avoid; } } }