/* ============================================ Sisustaja — Site stylesheet Shared by all pages (index + 9 sub-pages) Mobile-first responsive (single file, @media breakpoints) ============================================ */ :root { --bg: #fafdff; --surface: #ffffff; --surface-2: #f3f6fa; --hero-bg: #4e5452; --ink: #1b2228; --ink-2: #262828; --ink-3: #353535; --muted: #4e5452; --muted-2: rgba(20, 35, 46, 0.62); --line: #e6ecf3; --line-strong: #d1ddff; --accent: #3b6fff; --accent-hover: #2c5be8; --warn: #dc2626; --ok: #16a34a; --max: 1344px; --radius-card: 18px; --shadow-sm: 0 2px 12px rgba(20, 35, 46, 0.06); --shadow-md: 0 12px 32px rgba(20, 35, 46, 0.10); --shadow-lg: 0 24px 60px rgba(20, 35, 46, 0.18); } /* ============================================ DARK MODE — colour token overrides Toggled via [data-theme="dark"] on ============================================ */ :root[data-theme="dark"] { --bg: #0e1216; --surface: #181d24; --surface-2: #141a20; --hero-bg: #06090c; --ink: #e8edf2; --ink-2: #f0f2f5; --ink-3: #c9ced4; --muted: #98a1ab; --muted-2: rgba(232, 237, 242, 0.62); --line: #2a323d; --line-strong: #3a4555; --accent: #6b95ff; --accent-hover: #8ab0ff; --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.32); --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.45); --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.55); color-scheme: dark; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, video { display: block; max-width: 100%; } a { color: inherit; } button { font-family: inherit; } .container { max-width: var(--max); margin: 0 auto; padding: 0 48px; } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* ============================================ NAV ============================================ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; color: #fff; transition: background .25s ease, box-shadow .25s ease, color .25s ease; } .nav__inner { max-width: var(--max); margin: 0 auto; padding: 4px 48px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px; } .nav__logo { display: flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; } .nav__logo img { height: 64px; width: auto; max-width: none; object-fit: contain; display: block; } .nav__logo .fallback { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 1.2px; background: #fff; color: #4e5452; padding: 8px 12px; border-radius: 6px; } .nav__links { display: flex; gap: 36px; justify-content: center; font-weight: 500; font-size: 15px; } .nav__link { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: inherit; padding: 8px 0; transition: opacity .2s ease; position: relative; } .nav__link:hover { opacity: .75; } .nav__link.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); border-radius: 2px; } .nav__link svg { width: 14px; height: 14px; opacity: .7; } .nav__item { position: relative; display: inline-flex; align-items: center; } .nav__item::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 10px; } .nav__submenu { position: absolute; top: calc(100% + 8px); left: 50%; min-width: 180px; padding: 8px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 8px; background: rgba(38, 40, 40, .94); box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: translate(-50%, 6px); transition: opacity .18s ease, transform .18s ease, visibility .18s ease; pointer-events: none; } .nav__item:hover .nav__submenu, .nav__item:focus-within .nav__submenu { opacity: 1; visibility: visible; transform: translate(-50%, 0); pointer-events: auto; } .nav__submenu-link { display: block; padding: 10px 12px; border-radius: 6px; color: #fff; text-decoration: none; font-size: 14px; font-weight: 600; white-space: nowrap; transition: background .2s ease, color .2s ease; } .nav__submenu-link:hover { background: rgba(255, 255, 255, .12); } .nav.is-stuck .nav__submenu, .nav.is-light .nav__submenu { border-color: var(--line); background: #fff; } .nav.is-stuck .nav__submenu-link, .nav.is-light .nav__submenu-link { color: var(--ink); } .nav.is-stuck .nav__submenu-link:hover, .nav.is-light .nav__submenu-link:hover { background: #f0f4f9; } .nav__right { display: flex; align-items: center; gap: 24px; font-weight: 500; font-size: 15px; } /* Search bar (slides down below header) */ .nav__search { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); box-shadow: 0 12px 24px rgba(15, 22, 30, .08); transform: translateY(-12px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .2s ease, transform .25s ease, visibility .2s ease; z-index: 48; } .nav.has-search .nav__search { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .nav__search__form { max-width: var(--max); margin: 0 auto; padding: 16px 48px; display: flex; align-items: center; gap: 12px; } .nav__search__icon { color: var(--muted); flex-shrink: 0; } .nav__search__input { flex: 1; border: none; background: transparent; font-family: inherit; font-size: 18px; font-weight: 500; color: var(--ink); padding: 8px 0; outline: none; } .nav__search__input::placeholder { color: var(--muted); } .nav__search__submit { appearance: none; border: none; background: var(--accent); color: #fff; font-family: inherit; font-weight: 600; font-size: 14px; padding: 10px 18px; border-radius: 999px; cursor: pointer; transition: background .2s ease, transform .15s ease; } .nav__search__submit:hover { background: var(--accent-strong, #3b6fff); transform: translateY(-1px); } .nav__search__close { appearance: none; border: none; background: transparent; color: var(--muted); width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s ease, color .2s ease; } .nav__search__close:hover { background: rgba(15, 22, 30, .06); color: var(--ink); } .nav__icon-btn { background: transparent; border: none; color: inherit; cursor: pointer; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; transition: background .2s ease; } .nav__icon-btn:hover { background: rgba(255, 255, 255, .12); } .nav__lang { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; } .nav__lang-wrap { position: relative; display: inline-flex; align-items: center; } .nav__lang-wrap::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 10px; } .nav__lang-wrap .nav__submenu { left: auto; right: 0; min-width: 110px; transform: translate(0, 6px); } .nav__lang-wrap:hover .nav__submenu, .nav__lang-wrap:focus-within .nav__submenu { opacity: 1; visibility: visible; transform: translate(0, 0); pointer-events: auto; } .nav__lang-wrap .nav__submenu-link { text-align: center; letter-spacing: .4px; } .nav__lang-wrap .nav__submenu-link.is-active { background: rgba(255, 255, 255, .14); } .nav.is-stuck .nav__lang-wrap .nav__submenu-link.is-active, .nav.is-light .nav__lang-wrap .nav__submenu-link.is-active { background: #f0f4f9; color: var(--accent); } .nav__pill { background: var(--accent); color: #fff; text-decoration: none; padding: 7px 16px; border-radius: 999px; font-weight: 600; font-size: 15px; transition: background .2s ease, transform .15s ease; } .nav__pill:hover { background: var(--accent-hover); transform: translateY(-1px); } .nav__pill.is-active { background: #fff; color: var(--accent); } .nav.is-stuck .nav__pill.is-active, .nav.is-light .nav__pill.is-active { background: var(--accent); color: #fff; } .nav__burger { display: none; background: transparent; border: none; color: inherit; width: 36px; height: 36px; cursor: pointer; align-items: center; justify-content: center; } .nav__burger__icon--close { display: none; } .nav.is-open .nav__burger__icon--menu { display: none; } .nav.is-open .nav__burger__icon--close { display: inline-block; } /* solid white nav after scroll OR when on light page */ .nav.is-stuck, .nav.is-light { background: #fff; color: var(--ink); } .nav.is-stuck { box-shadow: var(--shadow-sm); border-bottom: 1px solid var(--line); } .nav.is-stuck .nav__icon-btn:hover, .nav.is-light .nav__icon-btn:hover { background: #f0f4f9; } .nav.is-light { border-bottom: 1px solid var(--line); } /* mobile menu drawer */ .nav__drawer { display: none; } /* Tighten header padding and float theme toggle to FAB when header gets tight */ @media (max-width: 1223px) { .nav__inner { padding-left: 24px; padding-right: 24px; gap: 16px; } .nav__logo img { height: 56px; } .nav__links { font-size: 13px; } .nav__right { gap: 8px; } .nav__theme-toggle { position: fixed; left: 16px; bottom: 16px; z-index: 47; width: 48px; height: 48px; border-radius: 50%; background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: 0 8px 20px rgba(15, 22, 30, .18); } .nav__theme-toggle:hover { background: #f5f7fb; } .nav__theme-toggle svg { width: 22px; height: 22px; } } @media (max-width: 991px) { .nav__inner { padding: 10px 24px; grid-template-columns: auto 1fr; } .nav__logo img { height: 50px; } .nav__links { display: none; } .nav__burger { display: inline-flex; } .nav__right { gap: 14px; justify-self: end; margin-left: auto; } .nav__search__form { padding: 14px 24px; gap: 10px; } .nav__search__input { font-size: 16px; } .nav__search__submit { padding: 8px 14px; font-size: 13px; } .nav__pill { padding: 6px 12px; font-size: 14px; } .nav__lang { font-size: 14px; } .nav__drawer { display: flex; flex-direction: column; position: fixed; inset: 70px 0 0 0; background: #fff; color: var(--ink); transform: translateY(calc(-100% - 80px)); transition: transform .3s ease; padding: 24px; z-index: 49; border-top: 1px solid var(--line); overflow-y: auto; } .nav.is-open .nav__drawer { transform: translateY(0); } .nav__drawer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; } .nav__drawer a { display: flex; align-items: center; justify-content: space-between; padding: 14px 4px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 500; font-size: 16px; } .nav__drawer a svg { width: 14px; height: 14px; opacity: .5; } .nav__lang-wrap { display: none; } .nav__drawer-langs { margin-top: auto; padding-top: 32px; } .nav__drawer-langs__list { display: flex; flex-wrap: wrap; gap: 8px; } .nav__drawer-lang { display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px !important; border: 1px solid var(--line) !important; border-radius: 999px; font-weight: 600 !important; font-size: 14px !important; color: var(--ink) !important; text-decoration: none; background: transparent; transition: background .2s ease, color .2s ease, border-color .2s ease; } .nav__drawer-lang.is-active { background: var(--ink); color: #fff !important; border-color: var(--ink) !important; } } /* ============================================ BUTTONS ============================================ */ .btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 600; font-size: 15px; padding: 12px 22px; border-radius: 999px; cursor: pointer; border: none; font-family: inherit; transition: transform .15s ease, background .2s ease, border-color .2s ease, color .2s ease; } .btn--primary { background: var(--accent); color: #fff; } .btn--primary:hover { background: var(--accent-hover); transform: translateY(-1px); } .btn--ghost { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, .35); } .btn--ghost:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .6); } .btn--ghost-dark { background: transparent; color: var(--ink); border: 1px solid var(--line); } .btn--ghost-dark:hover { background: #f0f4f9; border-color: var(--accent); color: var(--accent); } .btn--ghost-dark.is-active { background: var(--accent); border-color: var(--accent); color: #fff; } .btn--ghost-dark.is-active:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; } .btn--lg { padding: 14px 28px; font-size: 16px; } .btn svg { width: 14px; height: 14px; } /* ============================================ PAGE HEADER (sub-page hero) ============================================ */ .page-hero { position: relative; background: var(--hero-bg); color: #fff; overflow: hidden; padding: 140px 0 80px; isolation: isolate; } .page-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .35) 0%, rgba(0, 0, 0, 0) 35%), radial-gradient(120% 80% at 50% 110%, rgba(0, 0, 0, 0.92) 25%, rgba(31, 53, 64, 0.78) 43%, rgba(62, 106, 128, 0.55) 62%, rgba(124, 211, 255, 0.12) 100%); } .page-hero__inner { position: relative; z-index: 2; max-width: var(--max); margin: 0 auto; padding: 0 48px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: center; } .page-hero__crumbs { display: flex; gap: 8px; align-items: center; font-size: 13px; color: rgba(255, 255, 255, .6); margin: 0 0 18px; } .page-hero__crumbs a { color: inherit; text-decoration: none; } .page-hero__crumbs a:hover { color: #fff; } .page-hero__crumbs span { opacity: .5; } .page-hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .85); letter-spacing: 1.2px; text-transform: uppercase; margin: 0 0 18px; padding: 6px 12px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; background: rgba(255, 255, 255, .05); backdrop-filter: blur(4px); } .page-hero__eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 12px var(--accent); } .page-hero__title { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 54px; line-height: 1.05; margin: 0 0 20px; letter-spacing: -1px; } .page-hero__desc { font-size: 16px; line-height: 1.55; font-weight: 500; color: rgba(255, 255, 255, .78); max-width: 520px; margin: 0 0 28px; } .page-hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; } .page-hero__media { position: relative; height: 380px; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-lg); } .page-hero__media img, .page-hero__media video { width: 100%; height: 100%; object-fit: contain; object-position: center; } .page-hero--text-only .page-hero__inner { grid-template-columns: minmax(0, 760px); justify-content: center; text-align: center; } .page-hero--text-only .page-hero__desc { margin-left: auto; margin-right: auto; } .page-hero--text-only .page-hero__ctas { justify-content: center; } .page-hero--side-visual .page-hero__inner { grid-template-columns: minmax(0, 520px); min-height: 380px; } .page-hero--side-visual .page-hero__inner > div:first-child { position: relative; z-index: 2; } .page-hero--side-visual .page-hero__media { position: absolute; left: max(560px, calc(50% - 250px)); right: auto; bottom: -72px; z-index: 1; width: min(880px, 60vw); height: 430px; border-radius: 0; box-shadow: none; pointer-events: none; background: transparent; } .page-hero--side-visual .page-hero__media img, .page-hero--side-visual .page-hero__media video { object-fit: contain; object-position: center bottom; } .page-hero--hooldus .page-hero__media { position: absolute; left: max(520px, calc(50% - 300px)); right: auto; bottom: -80px; width: min(1042px, 78vw); height: 453px; border-radius: 0; box-shadow: none; z-index: -1; pointer-events: none; } .page-hero--hooldus .page-hero__media img { object-fit: cover; object-position: center bottom; } .page-hero--hooldus .page-hero__inner { grid-template-columns: minmax(0, 500px); min-height: 380px; } .page-hero--hooldus .page-hero__desc { max-width: 500px; } .page-hero--hooldus .page-hero__inner > div:first-child { position: relative; z-index: 1; } /* ============================================ GENERIC SECTION ============================================ */ .section { padding: 96px 0; } .section--tight { padding: 64px 0; } .section--gray { background: var(--surface-2); } .section-head { max-width: var(--max); margin: 0 auto 48px; padding: 0 48px; display: flex; align-items: end; justify-content: space-between; gap: 32px; } .section-head__title { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 36px; line-height: 1.1; margin: 0; color: var(--ink-2); letter-spacing: -.5px; } .section-head__sub { font-size: 15px; color: var(--muted); max-width: 480px; margin: 0; line-height: 1.55; } .section-head--center { flex-direction: column; align-items: center; text-align: center; } .section-head--center .section-head__sub { max-width: 640px; } .kicker { display: inline-block; font-size: 12px; font-weight: 600; color: var(--accent); letter-spacing: 1.6px; text-transform: uppercase; margin: 0 0 12px; } /* ============================================ GRIDS / CARDS ============================================ */ .grid { display: grid; gap: 24px; max-width: var(--max); margin: 0 auto; padding: 0 48px; } .grid--2 { grid-template-columns: 1fr 1fr; } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } .card { background: var(--surface); border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-sm); transition: transform .35s ease, box-shadow .35s ease; text-decoration: none; color: inherit; display: flex; flex-direction: column; cursor: pointer; } .card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } .card__media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: #eef2f6; } .card__media img { width: 100%; height: 100%; object-fit: contain; object-position: center; transform: scale(1); transition: transform .8s ease; } .card:hover .card__media img { transform: scale(1.06); } .card__media-tag { position: absolute; top: 14px; left: 14px; background: rgba(255, 255, 255, .95); color: var(--ink); font-size: 12px; font-weight: 600; padding: 6px 12px; border-radius: 999px; letter-spacing: .4px; } .card__body { padding: 24px 28px 28px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .card__kicker { font-size: 11px; font-weight: 600; color: var(--accent); letter-spacing: 1.4px; text-transform: uppercase; } .card__title { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 22px; color: var(--ink-2); margin: 0; line-height: 1.25; } .card__desc { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0; flex: 1; } .card__cta { align-self: flex-start; margin-top: 8px; display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 600; font-size: 14px; text-decoration: none; transition: gap .2s ease; } .card:hover .card__cta { gap: 10px; } .card__cta svg { width: 14px; height: 14px; } /* ============================================ STATS ============================================ */ .stats { max-width: var(--max); margin: 0 auto; padding: 32px 48px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .stat__num { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 42px; color: var(--ink-2); margin: 0 0 4px; letter-spacing: -.5px; } .stat__num span { color: var(--accent); } .stat__label { font-size: 14px; color: var(--muted); margin: 0; line-height: 1.4; } /* ============================================ FEATURE LIST (icon + text rows) ============================================ */ .features { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 48px; } .feature { display: flex; gap: 20px; align-items: flex-start; } .feature__icon { flex-shrink: 0; width: 56px; height: 56px; border-radius: 16px; background: rgba(59, 111, 255, .1); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; } .feature__icon svg { width: 26px; height: 26px; } .feature__title { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 18px; color: var(--ink-2); margin: 0 0 6px; } .feature__desc { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0; } .service-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .service-list li { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; color: var(--ink-2); font-size: 14px; line-height: 1.45; font-weight: 600; } .maintenance-story { max-width: var(--max); margin: 0 auto; padding: 0 48px; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); gap: 56px; align-items: center; } .maintenance-story__media { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .maintenance-story__media img { width: 100%; height: 420px; object-fit: cover; border-radius: 0; } .maintenance-story__media img:nth-child(2) { margin-top: 54px; } .maintenance-story__copy h2 { margin: 0 0 20px; font-family: 'Poppins', sans-serif; font-size: 32px; line-height: 1.15; color: var(--ink-2); } .maintenance-story__copy p { margin: 0 0 16px; color: var(--muted); font-size: 15px; line-height: 1.65; } .maintenance-story__copy p:last-child { margin-bottom: 0; } .maintenance-equipment { padding: 76px 0 72px; } .maintenance-equipment .section-head { margin-bottom: 38px; } .maintenance-story-section { padding: 88px 0 82px; } .maintenance-form-section { padding: 86px 0 92px; background: linear-gradient(180deg, var(--bg) 0%, var(--surface-2) 100%); } .maintenance-form-section .section-head { margin-bottom: 36px; } /* ============================================ CTA banner ============================================ */ .cta-banner { max-width: var(--max); margin: 0 auto; padding: 0 48px; } .cta-banner.section--tight { padding-top: 64px; padding-bottom: 64px; } .cta-banner__inner { background: linear-gradient(135deg, #3b6fff 0%, #2a4fc7 100%); color: #fff; border-radius: 24px; padding: 56px 64px; display: flex; align-items: center; justify-content: space-between; gap: 40px; position: relative; overflow: hidden; } .cta-banner__inner::before { content: ""; position: absolute; right: -100px; top: -100px; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .12), transparent 70%); } .cta-banner__title { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 32px; line-height: 1.15; margin: 0 0 8px; letter-spacing: -.5px; max-width: 560px; position: relative; } .cta-banner__sub { margin: 0; opacity: .85; font-size: 15px; line-height: 1.5; max-width: 480px; position: relative; } .cta-banner .btn--primary { background: #fff; color: var(--accent); position: relative; } .cta-banner .btn--primary:hover { background: #f0f4f9; } /* ============================================ BRANDS marquee ============================================ */ .brands { padding: 80px 0 64px; background: var(--bg); overflow: hidden; } .brands--compact { padding: 58px 0 54px; } .brands__title { max-width: var(--max); margin: 0 auto 32px; padding: 0 48px; font-family: 'Poppins', sans-serif; font-size: 36px; font-weight: 600; line-height: 1.1; color: var(--ink-2); letter-spacing: -.5px; } .brands__strip { display: flex; gap: 80px; align-items: center; width: max-content; animation: marquee 40s linear infinite; } .brands:hover .brands__strip { animation-play-state: paused; } .brands__logo { height: 60px; width: auto; opacity: .35; filter: grayscale(100%); transition: opacity .3s ease, filter .3s ease; flex-shrink: 0; } .brands__logo:hover { opacity: .85; filter: grayscale(0); } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ============================================ CREDENTIALS — Trust strip (memberships, ratings) Appears site-wide before the footer ============================================ */ .credentials { background: var(--surface-2); padding: 80px 0; margin-top: 80px; } .credentials__inner { max-width: var(--max); margin: 0 auto; padding: 0 48px; } .credentials__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 32px; } .credentials__head-text { max-width: 620px; } .credentials__eyebrow { font-size: 12px; font-weight: 600; color: var(--accent); letter-spacing: 1.6px; text-transform: uppercase; margin: 0 0 10px; } .credentials__title { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 28px; line-height: 1.2; color: var(--ink-2); margin: 0 0 8px; letter-spacing: -.3px; } .credentials__sub { margin: 0; font-size: 15px; line-height: 1.6; color: var(--muted); } .credentials__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .credential-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-card); padding: 24px 26px 26px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .credential-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--line-strong); } .credential-card__logo { height: 92px; display: flex; align-items: center; justify-content: center; background: #fff; border-bottom: 1px solid var(--line); padding: 12px 8px 20px; margin: -4px -10px 4px; } .credential-card__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .credential-card__title { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 18px; color: var(--ink-2); margin: 0; line-height: 1.3; } .credential-card__desc { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0; flex: 1; } .credential-card__link { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 600; font-size: 13px; text-decoration: none; transition: gap .2s ease; margin-top: 4px; } .credential-card__link:hover { gap: 10px; } .credential-card__link svg { width: 14px; height: 14px; } /* ============================================ FORMS ============================================ */ .form { display: flex; flex-direction: column; gap: 14px; } .form__group-title { margin: 10px 0 2px; font-family: 'Poppins', sans-serif; font-size: 18px; line-height: 1.25; color: var(--ink-2); } .form__group-title:first-child { margin-top: 0; } .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .form__field { display: flex; flex-direction: column; gap: 6px; } .form__label { font-size: 13px; font-weight: 600; color: var(--ink); } .form__input, .form__textarea, .form__select { background: #fff; border: 1px solid var(--line-strong); border-radius: 12px; padding: 14px 18px; font-size: 14px; color: var(--ink); font-family: inherit; letter-spacing: .2px; transition: border-color .2s ease, box-shadow .2s ease; } .form__input::placeholder, .form__textarea::placeholder { color: #8a9bab; } .form__input:focus, .form__textarea:focus, .form__select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(59, 111, 255, .12); } .form__textarea { resize: vertical; min-height: 120px; } .form__file { padding: 12px 14px; } .form__file::file-selector-button { margin-right: 12px; border: 0; border-radius: 999px; background: var(--surface-2); color: var(--ink); padding: 8px 14px; font-family: inherit; font-weight: 700; cursor: pointer; } .form__check { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: 14px; font-weight: 600; cursor: pointer; } .form__check input { width: 18px; height: 18px; accent-color: var(--accent); } .form__submit { background: var(--accent); color: #fff; border: none; padding: 14px 24px; border-radius: 12px; font-weight: 600; font-size: 14px; letter-spacing: .4px; cursor: pointer; transition: background .2s ease; align-self: flex-start; } .form__submit:hover { background: var(--accent-hover); } .form__submit.is-success { background: var(--ok); } .form__submit.is-error { background: var(--warn); } /* ============================================ CONTACT PEOPLE ============================================ */ .contact-people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); background: #111; } .contact-person { position: relative; min-height: 460px; overflow: hidden; color: #fff; isolation: isolate; } .contact-person::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 48%, rgba(0, 0, 0, .68) 100%), linear-gradient(90deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, .16)); pointer-events: none; } .contact-person img { width: 100%; height: 100%; min-height: inherit; object-fit: cover; object-position: center; } .contact-person__content { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: end; padding: 28px 32px; } .contact-person__content h2 { margin: 0 0 6px; font-family: 'Plus Jakarta Sans', sans-serif; font-size: 15px; line-height: 1.2; font-weight: 700; color: #fff; } .contact-person__content p { margin: 0; font-size: 14px; line-height: 1.35; font-weight: 500; color: rgba(255, 255, 255, .86); } .contact-person__links { display: flex; flex-direction: column; gap: 6px; align-items: end; text-align: right; } .contact-person__links a { color: #fff; text-decoration: none; font-size: 14px; line-height: 1.25; font-weight: 600; } .contact-person__links a:hover { text-decoration: underline; text-underline-offset: 3px; } .contact-details__inner { max-width: var(--max); margin: 0 auto; padding: 0 48px; display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); gap: 64px; align-items: start; } .contact-details__info { display: flex; flex-direction: column; gap: 16px; } .contact-details__right { display: flex; flex-direction: column; gap: 28px; } .contact-details__map { height: 240px; overflow: hidden; border-radius: 0; background: #e9e9e9; } .contact-details__map iframe { width: 100%; height: 100%; border: 0; display: block; } .contact-details__form { background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; } .contact-details__form .form__submit { align-self: flex-end; border-radius: 999px; padding-left: 34px; padding-right: 34px; } .contact-info-card { background: transparent; border: 0; border-radius: 0; padding: 0; box-shadow: none; } .contact-info-card .card__title { font-size: 20px; margin: 8px 0 10px; } .contact-info-card__link { margin: 12px 0 0; font-size: 14px; } .contact-info-card__link + .contact-info-card__link { margin-top: 6px; } .contact-info-card__link a { color: var(--accent); text-decoration: none; font-weight: 700; } .contact-info-card__link a:hover { text-decoration: underline; text-underline-offset: 3px; } /* ============================================ PRODUCT DETAIL ============================================ */ .product-hero { padding: 132px 0 72px; background: var(--surface); } .product-hero__inner, .product-detail-grid { max-width: var(--max); margin: 0 auto; padding: 0 48px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(360px, .9fr); gap: 56px; align-items: center; } .product-hero__gallery { position: relative; min-height: 520px; display: flex; align-items: center; justify-content: center; background: radial-gradient(193.34% 155.87% at 50% -1.55%, rgba(250, 253, 255, .70) 31.17%, rgba(208, 208, 208, .11) 100%), #fff; overflow: hidden; } .product-hero__gallery img { width: min(620px, 92%); max-height: 470px; object-fit: contain; } .product-hero__badge { position: absolute; top: 24px; left: 24px; padding: 8px 14px; border-radius: 999px; background: var(--warn); color: #fff; font-weight: 700; font-size: 14px; } .product-hero__crumbs { display: flex; gap: 8px; margin: 0 0 24px; color: var(--muted); font-size: 14px; } .product-hero__crumbs a { color: inherit; text-decoration: none; } .product-hero__eyebrow { margin: 0 0 12px; color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .product-hero__summary h1 { margin: 0 0 18px; color: var(--ink-2); font-family: 'Plus Jakarta Sans', sans-serif; font-size: clamp(40px, 5vw, 68px); line-height: 1; } .product-hero__desc, .product-copy p { color: var(--muted); font-size: 16px; line-height: 1.65; } .product-price { display: flex; align-items: baseline; gap: 14px; margin: 28px 0; } .product-price__current { color: var(--accent); font-family: 'Poppins', sans-serif; font-size: 34px; font-weight: 700; } .product-price__old { color: var(--muted); text-decoration: line-through; } .product-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 28px; } .product-checks { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; color: var(--ink-2); font-weight: 600; } .product-checks li { display: flex; gap: 10px; align-items: center; } .product-checks li::before { content: ""; width: 8px; height: 8px; border-radius: 999px; background: var(--accent); flex: 0 0 auto; } .product-detail-section { padding-top: 72px; } .product-detail-grid { align-items: start; } .product-copy h2, .product-specs h2 { margin: 0 0 18px; color: var(--ink-2); font-family: 'Poppins', sans-serif; font-size: 28px; } .product-specs { background: #f4f5f6; padding: 32px; } .product-specs dl { display: grid; gap: 0; margin: 0; } .product-specs div { display: grid; grid-template-columns: 150px 1fr; gap: 20px; padding: 14px 0; border-bottom: 1px solid rgba(20, 35, 46, .10); } .product-specs div:last-child { border-bottom: 0; } .product-specs dt { color: var(--muted); font-size: 14px; } .product-specs dd { margin: 0; color: var(--ink-2); font-weight: 700; } .product-inquiry-section { scroll-margin-top: 90px; } .product-inquiry { max-width: var(--max); margin: 0 auto; padding: 0 48px; display: grid; grid-template-columns: minmax(0, .8fr) minmax(420px, 1fr); gap: 64px; align-items: start; } .product-inquiry__copy h2 { margin: 0 0 16px; color: var(--ink-2); font-family: 'Poppins', sans-serif; font-size: 34px; line-height: 1.12; } .product-inquiry__copy p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.65; } .product-inquiry__meta { display: inline-flex; align-items: baseline; gap: 14px; margin-top: 28px; padding-top: 22px; border-top: 1px solid rgba(20, 35, 46, .12); color: var(--ink-2); } .product-inquiry__meta span { font-weight: 700; } .product-inquiry__meta strong { color: var(--accent); font-family: 'Poppins', sans-serif; font-size: 24px; } .product-inquiry__form { padding: 0; } .product-inquiry__form .form__submit { align-self: flex-end; border-radius: 999px; padding-left: 28px; padding-right: 28px; } .contact-info-card--dark { background: var(--ink); border-color: var(--ink); color: #fff; } .contact-info-card--dark .card__kicker, .contact-info-card--dark .card__title { color: #fff; } .contact-info-card--dark .card__kicker { opacity: .65; } .contact-info-card--dark .card__desc { color: rgba(255, 255, 255, .72); } .contact-info-card--dark .btn { margin-top: 18px; } .contact-service-links { padding: 56px 0 0; background: var(--bg); border-top: 1px solid var(--line); } .contact-service-links__inner { max-width: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } .contact-service-link { background: #fff; overflow: hidden; } .contact-service-link__visual { min-height: 460px; padding: 54px 44px 0; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; background: radial-gradient(193.34% 155.87% at 50% -1.55%, rgba(250, 253, 255, 0.70) 31.17%, rgba(208, 208, 208, 0.11) 100%), #fff; } .contact-service-link__visual h2 { position: relative; z-index: 2; margin: 0 0 10px; font-family: 'Poppins', sans-serif; font-size: 31px; line-height: 1.12; font-weight: 700; color: var(--ink-2); } .contact-service-link__visual p { position: relative; z-index: 2; max-width: 330px; margin: 0 auto; color: var(--muted); font-size: 17px; line-height: 1.35; font-weight: 500; } .contact-service-link__visual img { position: absolute; left: 50%; bottom: 0; z-index: 1; width: min(74%, 526px); height: 371px; object-fit: contain; object-position: center bottom; transform: translateX(-50%); } .contact-service-link:nth-child(2) .contact-service-link__visual img { width: min(74%, 526px); } .contact-service-link__visual .btn { position: absolute; left: 50%; bottom: 40px; z-index: 3; transform: translateX(-50%); white-space: nowrap; min-width: 161px; min-height: 42px; padding: 10px 22px; justify-content: center; } .contact-service-link__visual .btn:hover { transform: translateX(-50%) translateY(-1px); } .contact-service-link__copy { background: #f4f5f6; padding: 38px 70px 42px; text-align: center; min-height: 183px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px; } .contact-service-link__copy p { margin: 0; max-width: 610px; color: var(--muted); font-size: 15px; line-height: 1.5; font-weight: 500; } .contact-service-link__copy .btn { min-width: 164px; justify-content: center; } .contact-service-link__accent { background: #ff7a1a; } .contact-service-link__accent:hover { background: #ec6500; } .contact-service-links + .footer, .credentials + .footer, .section--gray + .footer, .cta-banner + .footer, .contact-service-links + .footer, main:has(> .credentials:last-child) + .footer, main:has(> .section--gray:last-child) + .footer, main:has(> .cta-banner:last-child) + .footer, main:has(> .contact-service-links:last-child) + .footer { margin-top: 0; } /* ============================================ FOOTER ============================================ */ .footer { background: var(--bg); padding: 96px 0 32px; border-top: 1px solid var(--line); margin-top: 80px; } .footer__top { max-width: var(--max); margin: 0 auto; padding: 0 48px; display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr 1.4fr; gap: 48px; } .footer__brand p { margin: 24px 0 24px; color: var(--muted); font-size: 14px; line-height: 1.5; max-width: 280px; } .footer__logo img { height: 72px; width: auto; max-width: none; object-fit: contain; display: block; } .footer__socials { display: flex; gap: 14px; } .footer__social { width: 38px; height: 38px; border-radius: 999px; background: #fff; border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; color: var(--ink); text-decoration: none; transition: background .2s ease, border-color .2s ease, transform .15s ease; } .footer__social:hover { background: var(--accent); color: #fff; border-color: var(--accent); transform: translateY(-2px); } .footer__social svg { width: 18px; height: 18px; } .footer__col-title { font-size: 15px; font-weight: 600; color: var(--ink); margin: 0 0 18px; } .footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } .footer__col a { color: var(--muted-2); text-decoration: none; font-size: 14px; transition: color .2s ease; } .footer__col a:hover { color: var(--accent); } .footer__form-title { font-size: 15px; font-weight: 600; color: var(--ink); margin: 0 0 8px; } .footer__form-sub { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0 0 16px; } .footer__form { display: flex; flex-direction: column; gap: 10px; } .footer__input { background: #fff; border: 1px solid var(--line-strong); border-radius: 12px; padding: 14px 18px; font-size: 13px; color: var(--ink); font-family: inherit; letter-spacing: .3px; transition: border-color .2s ease, box-shadow .2s ease; } .footer__input::placeholder { color: #8a9bab; } .footer__input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(59, 111, 255, .12); } .footer__submit { background: var(--accent); color: #fff; border: none; padding: 14px 18px; border-radius: 12px; font-weight: 600; font-size: 13px; letter-spacing: .5px; cursor: pointer; transition: background .2s ease; } .footer__submit:hover { background: var(--accent-hover); } .footer__submit.is-success { background: var(--ok); } .footer__bottom { max-width: var(--max); margin: 48px auto 0; padding: 24px 48px 0; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; color: var(--muted-2); font-size: 13px; } .footer__legal a { color: inherit; text-decoration: none; margin-left: 24px; } .footer__legal a:hover { color: var(--accent); } /* ============================================ TIMELINE ============================================ */ .timeline { padding: 96px 0; background: linear-gradient(180deg, var(--surface-2) 0%, #eef3f9 100%); position: relative; overflow: hidden; } .timeline__inner { max-width: var(--max); margin: 0 auto; padding: 0 48px; } /* Year strip */ .timeline__years { position: relative; margin: 0 0 40px; } .timeline__years::before { content: ""; position: absolute; left: 0; right: 0; bottom: 16px; height: 1px; background: var(--line-strong); z-index: 0; } .timeline__years-track { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; padding: 0 4px; z-index: 1; } .timeline__years-track::-webkit-scrollbar { display: none; } .timeline__year { position: relative; flex: 0 0 auto; background: transparent; border: none; cursor: pointer; padding: 8px 12px 34px; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 18px; color: var(--muted); transition: color .25s ease, font-size .25s ease, transform .25s ease; display: flex; flex-direction: column; align-items: center; font-feature-settings: "tnum"; } .timeline__year::after { content: ""; position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 2px solid #c4cfdf; transition: background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease; } .timeline__year:hover { color: var(--ink-2); } .timeline__year:hover::after { border-color: var(--ink-3); } .timeline__year.is-active { color: var(--ink-2); font-size: 22px; } .timeline__year.is-active::after { background: var(--accent); border-color: var(--accent); transform: translateX(-50%) scale(1.15); box-shadow: 0 0 0 6px rgba(59, 111, 255, .14), 0 4px 14px rgba(59, 111, 255, .35); } .timeline__hint { display: none; font-size: 11px; color: var(--muted-2); letter-spacing: 1.4px; text-transform: uppercase; text-align: center; margin: 14px 0 0; font-weight: 600; } /* Viewport — all panels share one grid cell, viewport sizes to tallest */ .timeline__viewport { display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; } .timeline__panel { grid-column: 1; grid-row: 1; opacity: 0; visibility: hidden; transform: translateY(12px); pointer-events: none; transition: opacity .5s ease, visibility 0s linear .5s, transform .5s ease; display: grid; grid-template-columns: 1.05fr 1fr; gap: 48px; align-items: center; background: var(--surface); border-radius: 24px; padding: 32px; box-shadow: var(--shadow-sm); } .timeline__panel.is-active { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity .5s ease, visibility 0s linear, transform .5s ease; } .timeline__media { position: relative; aspect-ratio: 4/3; border-radius: 18px; overflow: hidden; background: #eef2f6; box-shadow: var(--shadow-sm); } .timeline__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.2s ease; } .timeline__panel.is-active .timeline__media img { transform: scale(1); } .timeline__year-tag { position: absolute; top: 16px; left: 16px; background: rgba(255, 255, 255, .94); color: var(--ink-2); font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 1.4px; padding: 8px 14px; border-radius: 999px; box-shadow: 0 6px 20px rgba(20, 35, 46, .18); backdrop-filter: blur(6px); } .timeline__copy { padding: 8px 16px 8px 0; } .timeline__kicker { display: inline-block; font-size: 12px; font-weight: 600; color: var(--accent); letter-spacing: 1.6px; text-transform: uppercase; margin: 0 0 12px; } .timeline__title { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 30px; color: var(--ink-2); margin: 0 0 16px; line-height: 1.2; letter-spacing: -.4px; } .timeline__desc { font-size: 15px; line-height: 1.65; color: var(--muted); margin: 0 0 24px; } .timeline__meta { display: flex; gap: 36px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 20px; } .timeline__meta-item { display: flex; flex-direction: column; gap: 4px; } .timeline__meta-num { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 24px; color: var(--ink-2); letter-spacing: -.3px; margin: 0; line-height: 1; } .timeline__meta-num span { color: var(--accent); } .timeline__meta-num small { font-size: 14px; font-weight: 500; color: var(--muted); margin-left: 2px; } .timeline__meta-label { font-size: 12px; color: var(--muted); letter-spacing: .4px; margin: 0; } /* Footer nav under timeline */ .timeline__nav { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; padding: 0 4px; } .timeline__counter { font-size: 13px; font-weight: 600; color: var(--muted-2); letter-spacing: 1.4px; text-transform: uppercase; font-feature-settings: "tnum"; margin: 0; } .timeline__counter b { color: var(--accent); font-weight: 700; } .timeline__arrows { display: flex; gap: 10px; } .timeline__arrow { appearance: none; border: 1px solid #dbe2ec; background: #fff; color: var(--muted); width: 44px; height: 44px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease; } .timeline__arrow:hover { background: var(--accent); color: #fff; border-color: var(--accent); } .timeline__arrow:active { transform: scale(.96); } .timeline__arrow svg { width: 30px; height: 30px; } /* ============================================ RESPONSIVE ============================================ */ @media (max-width: 1100px) { .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 44px; } .footer__brand { grid-column: 1 / -1; margin-bottom: 8px; } .footer__brand p { max-width: 460px; } .footer__form-col { grid-column: 1 / -1; max-width: 520px; } .stats { grid-template-columns: repeat(2, 1fr); } .grid--4 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(2, 1fr); } .credentials__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 960px) { .container, .section-head, .grid, .cta-banner, .brands__title, .footer__top, .footer__bottom, .stats, .page-hero__inner { padding-left: 24px; padding-right: 24px; } .page-hero { padding: 120px 0 56px; } .page-hero__inner { grid-template-columns: 1fr; gap: 32px; } .page-hero__title { font-size: 36px; } .page-hero__media { height: 240px; } .page-hero--side-visual .page-hero__inner { grid-template-columns: 1fr; min-height: auto; } .page-hero--side-visual .page-hero__media { position: relative; left: auto; right: auto; bottom: auto; width: 100%; height: 300px; z-index: 0; } .page-hero--hooldus .page-hero__media { position: relative; left: auto; right: auto; bottom: auto; width: 100%; height: 320px; z-index: 0; } .page-hero--hooldus .page-hero__inner { grid-template-columns: 1fr; min-height: auto; } .section { padding: 64px 0; } .section--tight { padding: 48px 0; } .cta-banner.section--tight { padding-top: 48px; padding-bottom: 48px; } .section-head { flex-direction: column; align-items: start; gap: 12px; margin-bottom: 32px; } .section-head__title { font-size: 26px; } .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } .features { grid-template-columns: 1fr; gap: 24px; } .service-list { grid-template-columns: 1fr; } .maintenance-story { grid-template-columns: 1fr; gap: 32px; padding-left: 24px; padding-right: 24px; } .maintenance-equipment { padding: 58px 0 56px; } .maintenance-equipment .section-head, .maintenance-form-section .section-head { margin-bottom: 28px; } .maintenance-story-section, .maintenance-form-section { padding: 62px 0; } .brands--compact { padding: 46px 0 44px; } .maintenance-story__media img { height: 280px; } .maintenance-story__media img:nth-child(2) { margin-top: 32px; } .stats { grid-template-columns: repeat(2, 1fr); gap: 20px; } .stat__num { font-size: 32px; } .cta-banner__inner { flex-direction: column; align-items: start; padding: 32px 24px; text-align: left; gap: 20px; } .cta-banner__title { font-size: 24px; } .form__row { grid-template-columns: 1fr; } .contact-people { grid-template-columns: 1fr; } .contact-person { min-height: 520px; } .contact-person__content { padding: 24px; } .contact-details__inner { grid-template-columns: 1fr; gap: 32px; padding-left: 24px; padding-right: 24px; } .contact-details__form { padding: 0; } .contact-details__map { height: 260px; } .product-hero__inner, .product-detail-grid { grid-template-columns: 1fr; gap: 32px; padding-left: 24px; padding-right: 24px; } .product-hero { padding: 104px 0 56px; } .product-hero__gallery { min-height: 360px; } .product-specs { padding: 24px; } .product-inquiry { grid-template-columns: 1fr; gap: 32px; padding-left: 24px; padding-right: 24px; } .product-inquiry__copy h2 { font-size: 28px; } .contact-service-links__inner { grid-template-columns: 1fr; padding-left: 0; padding-right: 0; } .contact-service-link__visual { min-height: 390px; padding: 36px 20px 0; } .contact-service-link__visual h2 { font-size: 25px; } .contact-service-link__visual p { font-size: 15px; } .contact-service-link__visual img { width: min(86%, 420px); height: 275px; } .contact-service-link__visual .btn { bottom: 28px; } .contact-service-link__copy { min-height: auto; padding: 30px 24px 36px; } .footer { padding: 64px 0 24px; margin-top: 48px; } .footer__top { grid-template-columns: 1fr; gap: 28px; } .footer__brand, .footer__form-col { grid-column: auto; } .footer__brand p { max-width: 100%; } .footer__col { border-top: 1px solid var(--line); padding-top: 22px; } .footer__col-title { margin-bottom: 12px; } .footer__col ul { gap: 10px; } .footer__form-col { border-top: 1px solid var(--line); padding-top: 22px; max-width: 100%; } .footer__form { max-width: 420px; } .footer__input, .footer__submit { width: 100%; } .footer__bottom { flex-direction: column; gap: 16px; text-align: center; } .footer__legal a { margin: 0 12px; } /* Timeline mobile */ .timeline { padding: 64px 0; } .timeline__inner { padding: 0 24px; } .timeline__years-track { justify-content: flex-start; gap: 32px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; } .timeline__year { font-size: 16px; scroll-snap-align: center; } .timeline__year.is-active { font-size: 18px; } .timeline__hint { display: block; } .timeline__panel { grid-template-columns: 1fr; gap: 20px; padding: 20px; border-radius: 20px; } .timeline__copy { padding: 0 4px 4px; } .timeline__title { font-size: 22px; margin: 0 0 12px; } .timeline__desc { font-size: 14px; margin: 0 0 20px; } .timeline__meta { gap: 24px; padding-top: 16px; } .timeline__meta-num { font-size: 20px; } } @media (max-width: 480px) { .nav__inner { gap: 12px; padding: 13px 24px; } .nav__logo img { height: 44px; } .nav__pill { padding: 6px 12px; font-size: 13px; } .nav__right { gap: 8px; } .page-hero__title { font-size: 28px; } .section-head__title { font-size: 22px; } .stats { grid-template-columns: 1fr; } .contact-person { min-height: 420px; } .contact-person__content { grid-template-columns: 1fr; gap: 12px; } .contact-person__links { align-items: start; text-align: left; } .contact-service-link__visual { min-height: 330px; padding: 30px 18px 0; } .contact-service-link__visual h2 { font-size: 22px; } .contact-service-link__visual p { max-width: 260px; font-size: 14px; line-height: 1.3; } .contact-service-link__visual img { width: min(92%, 330px); height: 220px; } .contact-service-link__visual .btn { bottom: 22px; min-width: 136px; min-height: 38px; padding: 9px 18px; font-size: 13px; } .contact-service-link__copy { padding: 26px 20px 32px; gap: 18px; } .contact-service-link__copy p { font-size: 14px; } .footer__top, .footer__bottom { padding-left: 20px; padding-right: 20px; } .footer__top { gap: 24px; } .footer__brand p, .footer__form-sub, .footer__col a { font-size: 13px; } .footer__legal { display: flex; flex-direction: column; gap: 10px; } .footer__legal a { margin: 0; } .maintenance-story__media { grid-template-columns: 1fr; } .maintenance-story__media img, .maintenance-story__media img:nth-child(2) { height: 240px; margin-top: 0; } .maintenance-story__copy h2 { font-size: 24px; } .maintenance-story__copy p { font-size: 14px; } .product-hero__gallery { min-height: 300px; } .product-hero__actions .btn { width: 100%; justify-content: center; } .product-specs div { grid-template-columns: 1fr; gap: 4px; } .product-inquiry__meta { display: grid; gap: 6px; } .product-inquiry__form .form__submit { width: 100%; } .credentials { padding: 56px 0; margin-top: 56px; } .credentials__inner { padding: 0 24px; } .credentials__head { flex-direction: column; align-items: flex-start; gap: 8px; margin-bottom: 24px; } .credentials__title { font-size: 24px; } .credentials__grid { grid-template-columns: 1fr; gap: 14px; } .credential-card { padding: 22px 22px 22px; } } @media (max-width: 374px) { .nav__inner { padding: 13px 12px; gap: 8px; } .nav__right { gap: 6px; } .slide__title, .page-hero__title, .product-hero h1 { font-size: 32px; } } /* ============================================ DARK MODE — element-level overrides for hardcoded colours ============================================ */ :root[data-theme="dark"] body { background: var(--bg); color: var(--ink); } :root[data-theme="dark"] .card, :root[data-theme="dark"] .credential-card, :root[data-theme="dark"] .service-list li, :root[data-theme="dark"] .form__input, :root[data-theme="dark"] .form__textarea, :root[data-theme="dark"] .form__select, :root[data-theme="dark"] .footer__input { background: var(--surface); color: var(--ink); border-color: var(--line); } :root[data-theme="dark"] .credential-card__logo { background: #f5f6f8; border-bottom-color: var(--line); } :root[data-theme="dark"] .form__input::placeholder, :root[data-theme="dark"] .form__textarea::placeholder, :root[data-theme="dark"] .footer__input::placeholder { color: var(--muted); } :root[data-theme="dark"] .nav.is-stuck, :root[data-theme="dark"] .nav.is-light { background: var(--surface); color: var(--ink); border-bottom-color: var(--line); } :root[data-theme="dark"] .nav.is-stuck .nav__submenu, :root[data-theme="dark"] .nav.is-light .nav__submenu { background: var(--surface); border-color: var(--line); } :root[data-theme="dark"] .nav.is-stuck .nav__submenu-link, :root[data-theme="dark"] .nav.is-light .nav__submenu-link { color: var(--ink); } :root[data-theme="dark"] .nav.is-stuck .nav__submenu-link:hover, :root[data-theme="dark"] .nav.is-light .nav__submenu-link:hover { background: rgba(255, 255, 255, .06); } :root[data-theme="dark"] .nav.is-stuck .nav__icon-btn:hover, :root[data-theme="dark"] .nav.is-light .nav__icon-btn:hover { background: rgba(255, 255, 255, .08); } :root[data-theme="dark"] .nav__lang-wrap .nav__submenu-link.is-active { background: rgba(107, 149, 255, .18); color: var(--accent); } :root[data-theme="dark"] .nav__search { background: var(--surface); border-color: var(--line); box-shadow: 0 12px 24px rgba(0, 0, 0, .35); } :root[data-theme="dark"] .nav__search__input { color: var(--ink); } :root[data-theme="dark"] .nav__search__close:hover { background: rgba(255, 255, 255, .08); color: var(--ink); } @media (max-width: 1223px) { :root[data-theme="dark"] .nav__theme-toggle { background: var(--surface); border-color: var(--line); color: var(--ink); box-shadow: 0 8px 20px rgba(0, 0, 0, .35); } :root[data-theme="dark"] .nav__theme-toggle:hover { background: rgba(255, 255, 255, .06); } } :root[data-theme="dark"] .footer { background: var(--bg); border-top-color: var(--line); } :root[data-theme="dark"] .footer__social { background: var(--surface); border-color: var(--line); color: var(--muted); } :root[data-theme="dark"] .footer__social:hover { background: var(--accent); border-color: var(--accent); color: #fff; } /* Timeline navigation in dark mode */ :root[data-theme="dark"] .timeline__counter { color: var(--muted); } :root[data-theme="dark"] .timeline__arrow { background: var(--surface); border-color: var(--line); color: var(--muted); } :root[data-theme="dark"] .timeline__arrow:hover { background: var(--accent); border-color: var(--accent); color: #fff; } :root[data-theme="dark"] .timeline__year::after { background: var(--surface); border-color: var(--line-strong); } :root[data-theme="dark"] .timeline__year:hover::after { border-color: var(--ink-3); } :root[data-theme="dark"] .timeline__year.is-active::after { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 6px rgba(107, 149, 255, .18), 0 4px 14px rgba(107, 149, 255, .35); } /* CTA banner button — invert so white card becomes dark */ :root[data-theme="dark"] .cta-banner .btn--primary { background: var(--surface); color: var(--accent); } :root[data-theme="dark"] .cta-banner .btn--primary:hover { background: var(--surface-2); } /* Card media tag (year/popular pills on cards) */ :root[data-theme="dark"] .card__media-tag { background: rgba(20, 25, 32, .85); color: var(--ink); backdrop-filter: blur(2px); } /* Product specs (technical data table) */ :root[data-theme="dark"] .product-specs { background: var(--surface); } :root[data-theme="dark"] .product-specs div { border-bottom-color: var(--line); } /* Contact service links section */ :root[data-theme="dark"] .contact-service-links { background: var(--bg); border-top-color: var(--line); } :root[data-theme="dark"] .contact-service-link { background: var(--surface); } :root[data-theme="dark"] .contact-service-link__visual { background: radial-gradient(193.34% 155.87% at 50% -1.55%, rgba(40, 50, 64, 0.55) 31.17%, rgba(20, 25, 32, 0.20) 100%), var(--surface); } :root[data-theme="dark"] .contact-service-link__copy { background: var(--surface-2); } /* Ghost-dark filter chip hover state */ :root[data-theme="dark"] .btn--ghost-dark:hover { background: rgba(107, 149, 255, .12); } /* Timeline section background */ :root[data-theme="dark"] .timeline { background: linear-gradient(180deg, var(--surface-2) 0%, var(--bg) 100%); } :root[data-theme="dark"] .timeline__media { background: var(--surface-2); } :root[data-theme="dark"] .timeline__year-tag { background: rgba(20, 25, 32, .85); color: var(--ink-2); backdrop-filter: blur(2px); } :root[data-theme="dark"] .brands__logo { filter: grayscale(100%) brightness(2.2); } /* Theme toggle icon swap */ .nav__theme-toggle__moon { display: none; } :root[data-theme="dark"] .nav__theme-toggle__sun { display: none; } :root[data-theme="dark"] .nav__theme-toggle__moon { display: inline-block; } /* Smooth theme transition (skip ::before/::after to avoid flicker) */ html, body, .nav, .card, .credential-card, .service-list li, .form__input, .form__textarea, .form__select, .footer__input, .footer, .nav__submenu, .credentials { transition: background-color .25s ease, color .25s ease, border-color .25s ease; } @media (prefers-reduced-motion: reduce) { .card, .card__media img, .brands__strip, .btn, .cta-banner__inner::before, .timeline__panel, .timeline__media img, .timeline__year, .timeline__year::after { transition: none !important; transform: none !important; animation: none !important; } .timeline__year.is-active::after { transform: translateX(-50%) !important; } }