/* ─── Tokens (navy → polo blue → baby blue) ─── */ :root { /* Dark blue — dominant, trust & depth */ --navy-deep: #061528; --navy: #0A2342; --navy-mid: #0F3057; --navy-light: #1A4A7A; /* Baby blue — soft tints & light surfaces */ --baby: #B8DCF0; --baby-soft: #D4EBF7; --baby-pale: #EBF5FB; /* Polo blue — header */ --polo-blue: #6B94B8; --polo-blue-light: #7FA5C6; --polo-blue-dark: #587FA8; --theme-surface-dark: var(--navy-deep); /* Neutrals */ --white: #F4FAFD; --text: var(--navy); --muted: #5A7A94; --muted-light: #8AABB8; --border: rgba(184, 220, 240, 0.12); --border-light: #C5DFF0; /* Semantic aliases */ --dark-2: var(--navy-mid); --font-display: 'Lora', Georgia, serif; --font-body: 'DM Sans', system-ui, -apple-system, sans-serif; --font-ui: 'DM Sans', system-ui, -apple-system, sans-serif; --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-out: cubic-bezier(0.33, 1, 0.68, 1); --header-h: 72px; --wrap: 1280px; --section-pad: clamp(56px, 7vw, 96px); --space-block: clamp(28px, 4vw, 44px); --space-element: clamp(16px, 2vw, 24px); /* Z-index scale */ --z-grain: 50; --z-theme-overlay: 100; --z-skip-link: 110; /* Section page gradients */ --grad-body: var(--navy-deep); --grad-marquee: var(--navy-deep); --grad-about: var(--navy-deep); --grad-services: var(--navy-deep); --grad-products: var(--navy-deep); --grad-gallery: var(--navy-deep); --grad-quote: var(--navy-deep); --grad-contact: var(--navy-deep); --grad-footer: var(--navy-deep); } /* ─── Reset ─── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: var(--header-h); } body { font-family: var(--font-body); font-size: 15px; line-height: 1.65; color: var(--t-fg, var(--text)); background: var(--grad-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; } /* Off-screen section optimization — enabled on non-iOS via .use-content-visibility on */ .use-content-visibility .section:not(.hero) { content-visibility: auto; contain-intrinsic-size: 0 500px; } .use-content-visibility #gallery.section { content-visibility: auto; contain-intrinsic-size: 0 600px; } .use-content-visibility #quote.section, .use-content-visibility .quote__form, .use-content-visibility .qf__entry { content-visibility: visible; } .wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(20px, 4vw, 48px); } /* ─── Grain overlay (lightweight) ─── */ .grain { position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none; opacity: 0.025; background-image: repeating-conic-gradient(rgba(255,255,255,0.04) 0% 25%, transparent 0% 50%); background-size: 3px 3px; will-change: auto; } @media (max-width: 768px) { .grain { display: none; } } /* ─── Site loader ─── */ .site-loader { overflow: hidden; background: transparent; pointer-events: none; } .site-loader__backdrop { position: absolute; inset: 0; z-index: 1; background: var(--navy-deep); } .site-loader__curtain { position: absolute; top: 0; bottom: 0; width: 50%; z-index: 2; background: var(--navy-deep); will-change: transform; visibility: hidden; } .site-loader__curtain--left { left: 0; box-shadow: 6px 0 28px rgba(0, 0, 0, 0.42); } .site-loader__curtain--right { right: 0; box-shadow: -6px 0 28px rgba(0, 0, 0, 0.42); } .site-loader.is-exiting .site-loader__backdrop { display: none; } .site-loader.is-exiting .site-loader__curtain { visibility: visible; } .site-loader.is-exiting .site-loader__inner { opacity: 0; transform: scale(0.94); transition: opacity 0.65s ease, transform 0.65s ease; } @keyframes pci-loader-curtain-left { from { transform: translateX(0); } to { transform: translateX(-100%); } } @keyframes pci-loader-curtain-right { from { transform: translateX(0); } to { transform: translateX(100%); } } .site-loader.is-exiting .site-loader__curtain--left { animation: pci-loader-curtain-left 2.2s cubic-bezier(0.82, 0, 0.12, 1) forwards; } .site-loader.is-exiting .site-loader__curtain--right { animation: pci-loader-curtain-right 2.2s cubic-bezier(0.82, 0, 0.12, 1) forwards; } .site-loader__inner { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 18px; width: min(320px, calc(100vw - 48px)); text-align: center; transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); } .site-loader__display { margin: 0 0 4px; line-height: 0.9; letter-spacing: -0.04em; } .site-loader__display-pci { display: block; font-family: var(--font-display); font-size: clamp(3.5rem, 14vw, 6.5rem); font-weight: 700; color: var(--baby-pale); } .site-loader__display-glass { display: block; font-family: var(--font-display); font-size: clamp(1.1rem, 3.5vw, 1.6rem); font-weight: 600; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(184, 220, 240, 0.62); margin-top: 8px; } .site-loader__ring { position: relative; width: 96px; height: 96px; display: grid; place-items: center; } .site-loader__ring::before { content: ''; position: absolute; inset: 0; border-radius: 50%; border: 3px solid rgba(184, 220, 240, 0.14); border-top-color: var(--polo-blue-light); animation: site-loader-spin 0.9s linear infinite; } .site-loader__logo { width: 56px; height: 56px; object-fit: contain; position: relative; z-index: 1; } .site-loader__text { font-family: var(--font-display); font-size: 14px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(184, 220, 240, 0.82); } .site-loader__dots { display: flex; align-items: center; justify-content: center; gap: 10px; } .site-loader__dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(184, 220, 240, 0.2); transition: background 0.35s var(--ease), transform 0.35s var(--ease), box-shadow 0.35s var(--ease); } .site-loader__dot.is-filled { background: var(--baby); box-shadow: 0 0 10px rgba(184, 220, 240, 0.35); } .site-loader__dot.is-active { transform: scale(1.25); animation: site-loader-dot-pulse 1s ease-in-out infinite; } @keyframes site-loader-dot-pulse { 0%, 100% { opacity: 0.75; } 50% { opacity: 1; } } @keyframes site-loader-spin { to { transform: rotate(360deg); } } html.is-revealed .hero__copy, html.is-revealed .site-reveal { animation: site-reveal-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both; } html.is-loading .site-reveal, html.is-loading .hero__copy { opacity: 0; transform: translateY(28px); } html.is-revealed .site-reveal--delay-2 { animation-delay: 0.5s; } html.is-revealed .site-reveal--delay-3 { animation-delay: 0.62s; } @keyframes site-reveal-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } } html.is-revealed #siteLoader:not(.is-exiting) { display: none !important; visibility: hidden !important; pointer-events: none !important; } /* ─── Theme transition ─── */ .theme-overlay { position: fixed; inset: 0; z-index: var(--z-theme-overlay); pointer-events: none; opacity: 0; transition: opacity 0.52s var(--ease); } .theme-overlay.is-active { opacity: 1; pointer-events: all; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.52s; animation-timing-function: var(--ease); } @media (prefers-reduced-motion: reduce) { .theme-overlay { transition-duration: 0.01ms; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.01ms; } .site-loader { transition-duration: 0.01ms; } .site-loader__ring::before { animation: none; } .site-loader__dot { transition-duration: 0.01ms; } .site-loader__dot.is-active { animation: none; } .site-loader.is-exiting .site-loader__inner, .site-loader.is-exiting .site-loader__curtain--left, .site-loader.is-exiting .site-loader__curtain--right { transition-duration: 0.01ms !important; transform: none !important; opacity: 1 !important; } html.is-revealed .hero__copy, html.is-revealed .site-reveal { animation: none; } } /* ─── Typography ─── */ .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-eyebrow); margin-bottom: 14px; } .eyebrow--light { color: var(--t-eyebrow-light); } .heading-lg { font-family: var(--font-display); font-size: clamp(2rem, 4.5vw, 3.25rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.03em; color: var(--t-heading); } .heading-lg--light { color: var(--t-heading-light); } .body-lg { font-size: 1.05rem; line-height: 1.7; color: var(--t-fg-muted); } .section { padding: var(--section-pad) 0; transition: background-color 0.52s var(--ease), color 0.52s var(--ease); } .section--dark { background: var(--navy-deep); color: var(--white); } .section-head { margin-bottom: var(--space-block); } .tag { display: inline-block; font-size: 10px; font-weight: 500; letter-spacing: 0.06em; padding: 2px 8px; border-radius: 4px; background: var(--t-tag-bg); color: var(--t-tag-fg); border: 1px solid var(--t-tag-border); vertical-align: middle; } /* ─── Buttons ─── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 12px 24px; font-size: 14px; font-weight: 500; border-radius: 8px; border: 1px solid transparent; transition: background-color 0.4s var(--ease), border-color 0.4s var(--ease), color 0.4s var(--ease), box-shadow 0.55s var(--ease), transform 0.35s var(--ease); white-space: nowrap; } .btn--lg { padding: 16px 32px; font-size: 15px; } .btn--accent { background: var(--t-btn-accent-bg); color: var(--t-btn-accent-fg); border: 1px solid var(--t-btn-accent-border); border-radius: 6px; font-weight: 600; box-shadow: var(--t-btn-accent-shadow); } .btn--accent:hover { background: var(--t-btn-accent-hover-bg); border-color: var(--t-btn-accent-hover-border); color: var(--t-btn-accent-fg); box-shadow: var(--t-btn-accent-hover-shadow); transform: translateY(-2px); } .btn--ghost { background: var(--t-btn-ghost-bg); color: var(--t-btn-ghost-fg); border-color: var(--t-btn-ghost-border); backdrop-filter: var(--t-btn-ghost-blur); } .btn--ghost:hover { background: var(--t-btn-ghost-hover-bg); border-color: var(--t-btn-ghost-hover-border); color: var(--t-btn-ghost-fg); } /* ─── Header ─── */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: var(--header-h); background: var(--t-header-bg, var(--polo-blue)); border-bottom: 1px solid var(--t-header-border, var(--polo-blue-dark)); box-shadow: var(--t-header-shadow, 0 1px 12px rgba(10, 35, 66, 0.1)); transition: background-color 0.52s var(--ease), border-color 0.52s var(--ease), box-shadow 0.52s var(--ease); isolation: isolate; } .header--scrolled { background: var(--t-header-scrolled-bg, var(--polo-blue-light)); border-bottom: 1px solid var(--t-header-scrolled-border, var(--polo-blue-dark)); box-shadow: var(--t-header-scrolled-shadow, 0 4px 24px rgba(10, 35, 66, 0.14)); } .header--solid, .header--solid.header--scrolled { background: var(--t-header-scrolled-bg, var(--polo-blue-light)); border-bottom: 1px solid var(--t-header-scrolled-border, var(--polo-blue-dark)); box-shadow: var(--t-header-scrolled-shadow, 0 4px 24px rgba(10, 35, 66, 0.14)); } .header__inner { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; height: 100%; gap: 32px; } .brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .brand__logo { height: 44px; width: auto; flex-shrink: 0; display: block; object-fit: contain; } .header .brand__logo { mix-blend-mode: normal; } .brand--footer .brand__logo { mix-blend-mode: lighten; } .brand__text { display: flex; align-items: baseline; gap: 6px; } .brand__mark { font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; color: var(--t-brand-mark); letter-spacing: -0.02em; } .brand__name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; color: var(--t-brand-name); letter-spacing: -0.02em; } .brand--footer .brand__name { color: var(--white); } .brand--footer .brand__logo { height: 40px; } .nav { display: flex; align-items: center; gap: 36px; flex: 1; justify-content: center; min-width: 0; } .nav__link { font-size: 14px; font-weight: 600; color: var(--t-nav); letter-spacing: 0.02em; transition: color 0.3s, text-shadow 0.3s; position: relative; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.25); } .nav__link::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: var(--t-nav-underline); transition: width 0.4s var(--ease); box-shadow: 0 0 8px rgba(184, 220, 240, 0.45); } .nav__link:hover { color: var(--t-nav-hover); text-shadow: 0 0 12px rgba(184, 220, 240, 0.35); } .nav__link:hover::after { width: 100%; } .nav__item { position: relative; display: flex; align-items: center; } .nav__item--dropdown:hover .nav__link--has-menu::after, .nav__item--dropdown:focus-within .nav__link--has-menu::after { width: 100%; } .nav__item--dropdown:hover .nav__link--has-menu, .nav__item--dropdown:focus-within .nav__link--has-menu { color: var(--t-nav-hover); text-shadow: 0 0 12px rgba(184, 220, 240, 0.35); } .nav__dropdown { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(6px); min-width: 17.25rem; padding: 15px 0; background: var(--t-header-bg, var(--polo-blue)); border: 1px solid var(--t-header-border, var(--polo-blue-dark)); border-radius: 16px; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.22s var(--ease), transform 0.22s var(--ease), visibility 0.22s var(--ease); z-index: 220; } .nav__dropdown::before { content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 10px; } .nav__item--dropdown:hover .nav__dropdown, .nav__item--dropdown:focus-within .nav__dropdown, .nav__item--dropdown.is-open .nav__dropdown { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .nav__dropdown-link { display: block; padding: 17px 28px; font-size: 13px; font-weight: 600; color: var(--t-nav); letter-spacing: 0.02em; white-space: nowrap; transition: color 0.25s, background-color 0.25s; } .nav__dropdown-link:hover, .nav__dropdown-link:focus-visible { color: var(--t-nav-hover); background: rgba(184, 220, 240, 0.1); outline: none; } .nav__link--mobile-cta { display: none; } .header__actions { display: flex; align-items: center; gap: 20px; flex-shrink: 0; } .header__phone { font-size: 14px; font-weight: 700; color: var(--t-phone); letter-spacing: 0.02em; white-space: nowrap; transition: color 0.3s, text-shadow 0.3s; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.25); } .header__phone:hover { color: var(--t-phone-hover); text-shadow: 0 0 12px rgba(184, 220, 240, 0.35); } .header .btn--accent { font-size: 14px; font-weight: 700; padding: 11px 22px; letter-spacing: 0.03em; text-transform: none; } .theme-btn { position: relative; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 50%; border: 1px solid transparent; cursor: pointer; flex-shrink: 0; touch-action: manipulation; -webkit-tap-highlight-color: transparent; z-index: 403; color: #fff; transition: background-color 0.55s var(--ease), border-color 0.55s var(--ease), box-shadow 0.55s var(--ease), transform 0.25s var(--ease); } .theme-btn svg { position: absolute; color: #fff; stroke: #fff; transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); } .theme-btn svg.is-hidden { opacity: 0; transform: scale(0.82) rotate(-18deg); pointer-events: none; } .theme-btn svg.is-visible { opacity: 1; transform: scale(1) rotate(0deg); } .theme-btn:hover { transform: scale(1.04); } .menu-btn { display: none; flex-direction: column; justify-content: center; gap: 6px; width: 44px; height: 44px; min-width: 44px; min-height: 44px; padding: 10px; flex-shrink: 0; cursor: pointer; text-decoration: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-appearance: none; appearance: none; background: none; border: none; position: relative; z-index: 403; } .menu-btn span { display: block; width: 100%; height: 1.5px; background: var(--t-menu-bar); transition: transform 0.4s var(--ease), opacity 0.3s; } .menu-btn--open span:first-child { transform: translateY(3.75px) rotate(45deg); } .menu-btn--open span:last-child { transform: translateY(-3.75px) rotate(-45deg); } /* ─── Hero ─── */ .hero { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; align-items: flex-end; background: linear-gradient(165deg, var(--navy-deep) 0%, var(--navy) 55%, var(--navy-mid) 100%); overflow: hidden; transition: background 0.52s var(--ease), background-color 0.52s var(--ease); } .hero__media { position: absolute; inset: 0; contain: strict; } .hero__slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.7s var(--ease-out), visibility 0.7s; will-change: opacity; } .hero__slide--active { opacity: 1; visibility: visible; will-change: auto; } .hero__img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.1) translateZ(0); backface-visibility: hidden; } html.is-revealed .hero__slide--active .hero__img { animation: heroZoom 10s var(--ease-out) forwards; } @keyframes heroZoom { from { transform: scale(1.12) translateZ(0); } to { transform: scale(1) translateZ(0); } } .hero__overlay { position: absolute; inset: 0; background: linear-gradient(to top, var(--navy-deep) 0%, rgba(6, 21, 40, 0.4) 45%, transparent 70%), linear-gradient(135deg, rgba(6, 21, 40, 0.85) 0%, rgba(10, 35, 66, 0.5) 50%, rgba(184, 220, 240, 0.1) 100%); transition: background 0.52s var(--ease); } .hero__body { position: relative; z-index: 2; width: 100%; padding-top: calc(var(--header-h) + 40px); padding-bottom: clamp(36px, 6vw, 56px); display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-block); } .hero__copy { max-width: 720px; } .hero__slides-text { position: relative; min-height: 280px; } .hero__text { position: absolute; inset: 0; opacity: 0; transform: translate3d(0, 16px, 0); transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out); pointer-events: none; } .hero__text--active { opacity: 1; transform: translate3d(0, 0, 0); pointer-events: auto; position: relative; } .hero__title { font-family: var(--font-display); font-size: clamp(2.75rem, 7vw, 5.5rem); font-weight: 800; line-height: 0.95; letter-spacing: -0.04em; color: var(--white); margin-bottom: 28px; transition: color 0.52s var(--ease); } .hero__title em { font-style: normal; color: var(--t-accent); } .hero__lead { font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.7; color: rgba(184, 220, 240, 0.75); max-width: 520px; margin-bottom: 28px; transition: color 0.52s var(--ease); } .hero__badges { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin-bottom: 28px; } .hero__badges li { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: var(--t-accent); background: var(--t-highlight-bg); border: 1px solid var(--t-highlight-border); border-radius: 20px; padding: 4px 12px; } .hero__cta { display: flex; flex-wrap: wrap; gap: 12px; } .hero__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 48px; flex-shrink: 0; } .hero__progress { display: flex; flex-direction: column; gap: 16px; } .hero__tab { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; color: rgba(184, 220, 240, 0.35); transition: color 0.4s; text-align: right; } .hero__tab--active { color: var(--baby); } .hero__tab-label { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; } .hero__tab-bar { display: block; width: 48px; height: 2px; background: rgba(184, 220, 240, 0.2); position: relative; overflow: hidden; } .hero__tab-bar::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--t-accent-dim), var(--t-accent-bright)); transform: scaleX(0) translateZ(0); transform-origin: left; will-change: transform; } .hero__tab--active .hero__tab-bar::after { animation: heroProgress 6s linear forwards; } @keyframes heroProgress { from { transform: scaleX(0) translateZ(0); } to { transform: scaleX(1) translateZ(0); } } .hero__scroll { display: flex; flex-direction: column; align-items: center; gap: 12px; color: rgba(184, 220, 240, 0.4); font-size: 10px; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; } .hero__scroll-line { width: 1px; height: 48px; background: linear-gradient(to bottom, var(--t-accent), transparent); transform: scaleY(0.6) translateZ(0); animation: scrollPulse 2.5s var(--ease-out) infinite; } @keyframes scrollPulse { 0%, 100% { opacity: 0.3; transform: scaleY(0.6) translateZ(0); } 50% { opacity: 1; transform: scaleY(1) translateZ(0); } } /* ─── Marquee ─── */ .marquee { background: var(--grad-marquee); padding: 18px 0; overflow: hidden; transition: background-color 0.52s var(--ease); } .marquee__track { display: flex; align-items: center; gap: 40px; width: max-content; animation: marquee 35s linear infinite; font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t-marquee-track); will-change: transform; } .marquee__dot { color: var(--t-marquee-dot); font-size: 8px; } @keyframes marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } /* ─── About ─── */ .about { background: var(--grad-about); color: var(--t-fg); } .about__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-block); align-items: center; } .about__visual { position: relative; } .about__img-main { position: relative; border-radius: 4px; overflow: hidden; aspect-ratio: 4/5; } .about__img-main img { width: 100%; height: 100%; object-fit: cover; } .about__content p { color: var(--t-fg-muted); margin-bottom: 16px; } .about__content .body-lg { margin-bottom: 20px; } .about__features { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--t-border); } .about__feat { display: flex; align-items: center; gap: 12px; font-size: 14px; font-weight: 500; color: var(--t-fg); } .about__feat svg { color: var(--t-accent); flex-shrink: 0; } .services .section-head { margin-bottom: var(--space-block); padding-bottom: var(--space-element); } .bento { display: flex; flex-direction: column; gap: 16px; } .bento__grid { display: grid; grid-template-columns: 1.35fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; min-height: clamp(360px, 42vw, 460px); } .bento__card { position: relative; border-radius: 12px; overflow: hidden; min-height: 200px; display: flex; flex-direction: column; justify-content: flex-end; } .bento__card--hero { grid-column: 1; grid-row: 1 / 3; min-height: 100%; } .bento__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; background-color: var(--dark-2); transition: transform 0.6s var(--ease-out); transform: translateZ(0); pointer-events: none; } .bento__card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6, 21, 40, 0.94) 0%, rgba(10, 35, 66, 0.45) 55%, rgba(184, 220, 240, 0.08) 100%); z-index: 1; transition: opacity 0.4s; } .bento__card:hover .bento__bg { transform: scale(1.04) translateZ(0); } .bento__card:hover::before { opacity: 0.95; } .bento__content { position: relative; z-index: 2; padding: clamp(24px, 3vw, 40px); } .bento__index { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; color: var(--t-accent); margin-bottom: 12px; display: block; } .bento__content h3 { font-family: var(--font-display); font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 700; color: var(--white); letter-spacing: -0.02em; margin-bottom: 10px; } .bento__card--hero h3 { font-size: clamp(1.5rem, 3vw, 2rem); } .bento__content p { font-size: 14px; line-height: 1.65; color: rgba(184, 220, 240, 0.7); max-width: 400px; } .bento__link { display: inline-block; margin-top: 20px; font-size: 13px; font-weight: 600; color: var(--t-accent); transition: color 0.3s; } .bento__link:hover { color: var(--t-accent-bright); } .bento__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; } .bento__stat { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-width: 0; padding: 28px 16px; background: rgba(15, 48, 87, 0.55); border: 1px solid var(--border); border-radius: 12px; transition: border-color 0.4s, background 0.4s, transform 0.4s var(--ease-out); } .bento__stat:hover { border-color: rgba(184, 220, 240, 0.35); background: rgba(26, 74, 122, 0.6); transform: translateY(-2px); } .bento__stat-val { font-family: var(--font-ui); font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--t-bento-stat-val); letter-spacing: -0.02em; line-height: 1; } .bento__stat-key { font-family: var(--font-ui); font-size: 11px; font-weight: 600; color: rgba(184, 220, 240, 0.72); margin-top: 8px; letter-spacing: 0.1em; text-transform: uppercase; overflow-wrap: anywhere; } /* ─── Products ─── */ .products { background: var(--grad-products); color: var(--t-fg); } .products__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-element); margin-bottom: var(--space-block); flex-wrap: wrap; } .products__intro, .gallery__intro { max-width: 24rem; font-family: var(--font-body); font-size: 1rem; font-weight: 500; line-height: 1.75; letter-spacing: 0.01em; color: var(--t-fg-muted); } .product-list { border-top: 1px solid var(--t-border); overflow: visible; } .product-row { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; padding: 22px 16px; border-bottom: 1px solid var(--t-border-soft); overflow: visible; } .product-list--catalog .product-row { width: 100%; border: none; background: none; cursor: pointer; text-align: left; font: inherit; color: inherit; touch-action: manipulation; -webkit-tap-highlight-color: rgba(184, 220, 240, 0.15); pointer-events: auto; } .product-row::before { content: ''; position: absolute; inset: 5px calc(-16px - 0.5px); border-radius: 12px; background: transparent; transition: background 0.4s var(--ease); pointer-events: none; } .product-row:hover::before { background: var(--t-row-hover); } .product-row__name, .product-row__cn, .product-row__label, .product-row__arrow { position: relative; z-index: 1; } .product-list--catalog .product-row__label { font-family: var(--font-display); font-size: clamp(1rem, 1.5vw, 1.15rem); font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; color: var(--t-fg); } .product-list--catalog .product-row__name, .product-list--catalog .product-row__cn { font-size: inherit; font-weight: inherit; color: inherit; } .product-list--catalog .product-row__sep { font-weight: 400; color: var(--t-fg-muted); } .product-list--catalog .product-row__arrow { display: flex; align-items: center; justify-content: center; color: var(--t-fg-dim); transform: rotate(0deg); transform-origin: center; transition: color 0.45s var(--ease), transform 0.65s var(--ease-out); } .product-list--catalog .product-row__arrow svg { display: block; } .product-list--catalog .product-row:hover .product-row__arrow { color: var(--t-accent); } .product-row__name { font-family: var(--font-display); font-size: clamp(1rem, 1.5vw, 1.15rem); font-weight: 600; color: var(--t-fg); letter-spacing: -0.01em; } .product-row__cn { font-size: clamp(1rem, 1.5vw, 1.15rem); font-weight: 600; color: var(--t-fg); white-space: nowrap; } .product-list--catalog .product-item { border-bottom: 1px solid var(--t-border-soft); } .product-list--catalog .product-item:last-child { border-bottom: none; } .product-list--catalog summary.product-row { list-style: none; cursor: pointer; } .product-list--catalog summary.product-row::-webkit-details-marker { display: none; } .product-list--catalog .product-row { border-bottom: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .product-list--catalog .product-row:focus { outline: none; } .product-list--catalog .product-row:focus-visible { outline: 2px solid var(--t-accent); outline-offset: 3px; } .product-list--catalog details[open] > summary.product-row::before { background: var(--t-row-hover); } .product-list--catalog details[open] > summary.product-row .product-row__arrow { color: var(--t-accent); transform: rotate(90deg); } .product-list--catalog .product-item.is-open .product-row::before { background: var(--t-row-hover); } .product-list--catalog .product-row[aria-expanded="true"] .product-row__arrow { color: var(--t-accent); transform: rotate(90deg); } .product-list--catalog details.product-item { interpolate-size: allow-keywords; } @media (prefers-reduced-motion: reduce) { .product-panel, .product-panel__inner, .product-list--catalog .product-row__arrow { transition-duration: 0.01ms !important; } details.product-item[open] > .product-panel { animation: none !important; } details.product-item::details-content { transition-duration: 0.01ms !important; } } .product-panel { display: grid; grid-template-rows: 0fr; overflow: hidden; opacity: 0; transition: grid-template-rows 0.65s var(--ease-out), opacity 0.55s var(--ease-out); } .product-item.is-open .product-panel, details.product-item[open] > .product-panel { grid-template-rows: 1fr; opacity: 1; } details.product-item > .product-panel { animation: none; } details.product-item[open] > .product-panel { animation: product-panel-reveal 0.65s var(--ease-out) both; } @keyframes product-panel-reveal { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @supports (height: calc-size(auto, size)) { details.product-item::details-content { block-size: 0; overflow: hidden; opacity: 0; transition: block-size 0.65s var(--ease-out), opacity 0.55s var(--ease-out), content-visibility 0.65s allow-discrete; content-visibility: hidden; } details.product-item[open]::details-content { block-size: auto; opacity: 1; content-visibility: visible; } details.product-item[open] > .product-panel { animation: none; } } .product-panel__inner { overflow: hidden; min-height: 0; display: flex; justify-content: center; padding: 0 16px; transition: padding 0.65s var(--ease-out); } .product-item.is-open .product-panel__inner, details.product-item[open] > .product-panel .product-panel__inner { padding: 0 16px 20px; } .product-panel__img-wrap { display: inline-block; max-width: 100%; line-height: 0; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .product-panel__img { display: block; box-sizing: border-box; width: auto; height: auto; max-width: min(100%, 640px); max-height: 360px; border: none; border-radius: 8px; background: transparent; object-fit: contain; object-position: center; user-select: none; -webkit-user-drag: none; pointer-events: none; } .product-panel__img-ph { display: none; align-items: center; justify-content: center; box-sizing: border-box; width: min(100%, 640px); border: 2px dashed var(--t-input-border); border-radius: 8px; background: var(--t-input-bg); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--t-fg-dim); pointer-events: none; } .product-item.is-open .product-panel__img-ph { display: flex; min-height: 200px; } .product-panel__img-wrap:has(.product-panel__img:not([hidden])) .product-panel__img-ph { display: none; } .gallery { overflow-x: clip; background: var(--grad-gallery); color: var(--t-fg); } .gallery__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-element); margin-bottom: var(--space-block); flex-wrap: wrap; } .gallery__carousel { display: flex; align-items: center; gap: 16px; width: 100%; } .gallery__viewport { flex: 1; overflow: hidden; min-width: 0; max-width: 100%; border-radius: 6px; border: 1px solid var(--t-gallery-border); background: var(--t-gallery-bg); position: relative; z-index: 1; } .gallery__viewport--scroll { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; overscroll-behavior-x: contain; touch-action: pan-x pan-y; } .gallery__viewport--scroll::-webkit-scrollbar { display: none; } .gallery__track { display: flex; gap: 12px; align-items: flex-start; transition: transform 0.55s var(--ease); backface-visibility: hidden; } .gallery__viewport--scroll .gallery__track { transform: none !important; transition: none !important; width: max-content; } .gallery__carousel.is-resizing .gallery__track, .gallery__carousel.is-resizing .gallery__cell { transition: none !important; } .gallery__cell { flex: 0 0 auto; align-self: flex-start; border-radius: 4px; overflow: hidden; position: relative; margin: 0; aspect-ratio: 3 / 2; height: auto; max-height: 300px; transition: width 0.55s var(--ease); backface-visibility: hidden; } .gallery__viewport--scroll .gallery__cell { scroll-snap-align: start; scroll-snap-stop: always; transition: none !important; flex: 0 0 auto; flex-shrink: 0; aspect-ratio: 3 / 2; height: auto; max-height: none; } .gallery__viewport--scroll .gallery__cell img { pointer-events: none; -webkit-user-drag: none; user-select: none; } .gallery__cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; transition: filter 0.3s ease; filter: var(--t-gallery-img-filter); } .gallery__cell:hover img { filter: brightness(1) saturate(1.02); } .gallery__arrow { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; min-width: 44px; min-height: 44px; border-radius: 50%; border: 1px solid var(--t-arrow-border); background: var(--t-arrow-bg); color: var(--t-arrow-color); box-shadow: var(--t-arrow-shadow); transition: background 0.3s, border-color 0.3s, color 0.3s, opacity 0.3s, box-shadow 0.3s; touch-action: manipulation; -webkit-tap-highlight-color: rgba(184, 220, 240, 0.2); cursor: pointer; pointer-events: auto; position: relative; z-index: 5; -webkit-user-select: none; user-select: none; } .gallery__arrow svg { pointer-events: none; flex-shrink: 0; } .gallery__arrow:hover:not(:disabled) { background: var(--t-arrow-hover-bg); border-color: var(--t-arrow-hover-border); color: var(--t-arrow-hover-color); box-shadow: var(--t-arrow-hover-shadow); } .gallery__arrow:disabled { opacity: 0.3; cursor: not-allowed; } .gallery__footer { display: flex; flex-direction: column; align-items: center; gap: 14px; margin-top: var(--space-element); opacity: 1; visibility: visible; } .gallery__footer--ready, #galleryFooter { opacity: 1; visibility: visible; } .gallery__status { text-align: center; font-size: 13px; color: var(--t-gallery-status); letter-spacing: 0.04em; margin: 0; } .gallery__dots { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 4px 0; min-height: 28px; } .gallery__dots:empty { visibility: hidden; } .gallery__dot { position: relative; width: 10px; height: 10px; border-radius: 50%; border: none; padding: 0; background: var(--t-dot); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: background 0.3s, transform 0.3s; } .gallery__dot::before { content: ''; position: absolute; inset: -14px; } .gallery__dot--active { background: var(--t-dot-active); transform: scale(1.2); } .gallery__dot:hover:not(.gallery__dot--active) { background: var(--t-dot-hover); } /* ─── Quote / Request Form ─── */ .quote { background: var(--grad-quote); color: var(--t-fg); } .quote__layout { display: grid; grid-template-columns: 1fr 1.5fr; gap: clamp(40px, 6vw, 80px); align-items: start; } /* Left info column */ .quote__info .heading-lg { margin-bottom: 16px; } .quote__info .body-lg { margin-bottom: 28px; } .quote__contact-list { list-style: none; margin-bottom: 20px; display: flex; flex-direction: column; gap: 12px; } .quote__contact-list li { margin: 0; } .quote__contact-link { display: flex; align-items: center; gap: 12px; font-size: 1rem; color: var(--t-fg); text-decoration: none; cursor: pointer; border-radius: 8px; margin: -6px -8px; padding: 6px 8px; transition: color 0.2s, background 0.2s; } .quote__contact-link:hover { color: var(--t-accent); background: var(--t-row-hover); } .quote__contact-link svg { color: var(--t-accent); flex-shrink: 0; } .quote__contact-text { font-weight: 600; } .quote__cn { font-size: 13px; color: var(--t-fg-dim); margin-top: 16px; } /* Form card */ .quote__form { background: var(--t-form-bg); border: 1px solid var(--t-form-border); border-radius: 14px; padding: clamp(28px, 4vw, 44px); box-shadow: 0 8px 32px rgba(0, 0, 0, 0); backdrop-filter: var(--t-form-blur); display: flex; flex-direction: column; gap: 20px; overflow: visible; transition: background-color 0.52s var(--ease), border-color 0.52s var(--ease), box-shadow 0.65s var(--ease-out); } .reveal--visible .quote__form { box-shadow: var(--t-form-shadow); } .qf__row { display: flex; gap: 16px; } .qf__row--two > .qf__field { flex: 1; min-width: 0; } .qf__row--two:has(#qfTypeGlass:not([hidden])) { flex-direction: column; gap: 12px; } .qf__field { display: flex; flex-direction: column; gap: 6px; overflow: visible; } .qf__field label, .qf__inquiry-heading { font-size: 11px; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--t-fg-muted); } .qf__unit { text-transform: lowercase; font-weight: 500; letter-spacing: 0.02em; opacity: 0.85; } .qf__dim-input { position: relative; display: flex; align-items: center; } .qf__dim-input input { padding-right: 42px; } .qf__dim-suffix { position: absolute; right: 14px; font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--t-fg-dim); pointer-events: none; user-select: none; } .qf__entry { display: flex; flex-direction: column; gap: 12px; } .qf__inquiry-wrap { display: flex; flex-direction: column; gap: 10px; } .qf__inquiry-list { display: flex; flex-direction: column; gap: 8px; } .qf__inquiry-empty { font-size: 14px; color: var(--t-fg-dim); margin: 0; padding: 14px 16px; border: 1px dashed var(--t-input-border); border-radius: 10px; text-align: center; } .qf__inquiry-item { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid transparent; border-radius: 10px; background: var(--t-input-bg); box-shadow: inset 0 0 0 1px var(--t-input-border); } .qf__inquiry-text { flex: 1; min-width: 0; font-size: 14px; line-height: 1.45; color: var(--t-input-fg); word-break: break-word; } .qf__inquiry-remove { flex-shrink: 0; font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--t-fg-dim); background: none; border: none; padding: 0; cursor: pointer; transition: color 0.2s; } .qf__inquiry-remove:hover { color: var(--t-accent); } .qf__status { margin: 0; padding: 12px 14px; border-radius: 10px; font-size: 14px; line-height: 1.45; } .qf__status[hidden] { display: none; } .qf__status--info { color: var(--t-fg); background: var(--t-input-bg); box-shadow: inset 0 0 0 1px var(--t-input-border); } .qf__field-hint { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: var(--t-fg-muted); } .qf__field-hint--error { color: #e07070; } .qf__field-hint--pending { color: var(--t-fg-muted); } .qf__field input.qf__input--invalid, .qf__field textarea.qf__input--invalid { box-shadow: inset 0 0 0 1px rgba(224, 112, 112, 0.85), 0 0 0 1px rgba(224, 112, 112, 0.35); } .qf__status--error { color: #8B2E2E; background: rgba(180, 60, 60, 0.12); box-shadow: inset 0 0 0 1px rgba(180, 60, 60, 0.35); } .qf__status--success { color: var(--t-fg); background: rgba(46, 196, 182, 0.12); box-shadow: inset 0 0 0 1px rgba(46, 196, 182, 0.35); } .qf__add-item { align-self: flex-start; font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--t-btn-accent-fg); background: var(--t-btn-accent-bg); border: 1px solid var(--t-btn-accent-border); border-radius: 6px; padding: 10px 18px; cursor: pointer; box-shadow: var(--t-quote-btn-shadow, var(--t-btn-accent-shadow)); touch-action: manipulation; pointer-events: auto; -webkit-tap-highlight-color: rgba(184, 220, 240, 0.2); transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.55s var(--ease), opacity 0.25s var(--ease), transform 0.35s var(--ease); } .qf__add-item:hover:not(:disabled) { background: var(--t-btn-accent-hover-bg); border-color: var(--t-btn-accent-hover-border); box-shadow: var(--t-quote-btn-hover-shadow, var(--t-btn-accent-hover-shadow)); transform: translateY(-1px); } .qf__add-item:disabled, .qf__add-item--inactive, .qf__add-item[aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; } .qf__add-item--ready { opacity: 1; box-shadow: var(--t-quote-btn-shadow, var(--t-btn-accent-shadow)); } .qf__add-item { position: relative; z-index: 20; } .qf__field-hint--entry { margin-top: 8px; } .qf__field-hint--success { color: #6fd4c7; } .qf__field-hint--error { color: #e07070; } .qf__req { color: var(--t-accent); } .qf__field input, .qf__field textarea { font-family: var(--font-body); font-size: 15px; font-weight: 400; color: var(--t-input-fg); background: var(--t-input-bg); border: 1px solid transparent; border-radius: 10px; padding: 12px 14px; box-shadow: inset 0 0 0 1px var(--t-input-border); transition: background 0.25s var(--ease), box-shadow 0.25s var(--ease); outline: none; width: 100%; } .qf__field input:hover, .qf__field textarea:hover { background: var(--t-input-focus-bg); box-shadow: inset 0 0 0 1px var(--t-input-focus-border); } .qf__field--type { min-width: 0; overflow: visible; } .qf-type-panel--glass { min-width: 0; width: 100%; overflow: visible; } .qf-type-glass__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; } .qf-type-glass__grid > .qf__field:first-child { grid-column: 1 / -1; } .qf-type-glass__grid .qf__field label { font-size: 10px; letter-spacing: 0.06em; } .qf-type-glass__grid .qf__field { gap: 6px; min-width: 0; } .qf-type-glass__grid .qf-picker { min-width: 0; max-width: 100%; } .qf-type-glass__grid .qf-picker.is-open { z-index: 260; } .qf-type-glass__grid .qf-picker__trigger { font-size: 14px; padding: 11px 12px; gap: 8px; } .qf-type-glass__grid .qf-picker__value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qf-type-glass__grid .qf-picker__panel { min-width: 100%; width: 100%; } .qf-type-glass__grid .qf__field:last-child .qf-picker__panel { left: auto; right: 0; } /* Desktop: opaque full-width glass pickers — no bleed-through from hints/status below */ html:not(.touch-ui):not(.mobile-ui) .qf-picker__panel { background: var(--t-picker-panel-bg); backdrop-filter: none; -webkit-backdrop-filter: none; isolation: isolate; } html:not(.touch-ui):not(.mobile-ui) .qf-picker__panel::before { background: linear-gradient(to bottom, var(--t-picker-panel-bg) 15%, transparent); } html:not(.touch-ui):not(.mobile-ui) .qf-picker__panel::after { background: linear-gradient(to top, var(--t-picker-panel-bg) 15%, transparent); } html:not(.touch-ui):not(.mobile-ui) .qf-type-glass__grid > .qf__field:first-child:has(.qf-picker.is-open) .qf-picker__panel { width: 100%; min-width: 100%; left: 0; right: 0; } html:not(.touch-ui):not(.mobile-ui) .qf-type-glass__grid > .qf__field:nth-child(2):has(.qf-picker.is-open) .qf-picker__panel, html:not(.touch-ui):not(.mobile-ui) .qf-type-glass__grid > .qf__field:nth-child(3):has(.qf-picker.is-open) .qf-picker__panel { width: calc(200% + 12px); min-width: calc(200% + 12px); } html:not(.touch-ui):not(.mobile-ui) .qf-type-glass__grid > .qf__field:nth-child(2):has(.qf-picker.is-open) .qf-picker__panel { left: 0; right: auto; } html:not(.touch-ui):not(.mobile-ui) .qf-type-glass__grid > .qf__field:nth-child(3):has(.qf-picker.is-open) .qf-picker__panel { left: auto; right: 0; } body.quote-picker-open .qf__field-hint--entry, body.quote-picker-open .qf__status:not([hidden]) { visibility: hidden; } body.quote-picker-open .qf__entry { position: relative; z-index: 300; } .qf-type-glass__grid .qf-picker__list .product-row__sep { display: none; } .qf-type-glass__grid .qf-picker__list .product-row__name { font-size: 14px; font-weight: 500; white-space: nowrap; } .qf-type-glass__grid .qf-picker__list .product-row__cn { font-size: 11px; white-space: nowrap; } .qf-picker { position: relative; } .qf-picker.is-open { z-index: 260; } .qf-picker:not(.is-open) > .qf-picker__panel { display: none !important; } html:not(.touch-ui):not(.mobile-ui) .qf-picker__native { display: none; } .qf-picker__native { width: 100%; font-family: var(--font-body); font-size: 16px; font-weight: 400; color: var(--t-input-fg); background: var(--t-input-bg); border: 1px solid transparent; border-radius: 10px; padding: 12px 14px; min-height: 48px; box-shadow: inset 0 0 0 1px var(--t-input-border); cursor: pointer; pointer-events: auto; touch-action: manipulation; -webkit-tap-highlight-color: rgba(184, 220, 240, 0.2); position: relative; z-index: 3; -webkit-appearance: menulist; appearance: auto; } html.touch-ui .qf-picker__native, html.mobile-ui .qf-picker__native, .qf-picker--native .qf-picker__native { display: block; } html.touch-ui .qf-picker > .qf-picker__trigger, html.touch-ui .qf-picker > .qf-picker__panel, html.mobile-ui .qf-picker > .qf-picker__trigger, html.mobile-ui .qf-picker > .qf-picker__panel, .qf-picker--native > .qf-picker__trigger, .qf-picker--native > .qf-picker__panel { display: none !important; position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; visibility: hidden !important; pointer-events: none !important; } html.touch-ui .qf-picker--native, html.touch-ui .qf-picker:has(.qf-picker__native), html.mobile-ui .qf-picker--native, html.mobile-ui .qf-picker:has(.qf-picker__native) { position: relative; z-index: 2; } html.touch-ui .qf-type-glass__grid .qf-picker__native, html.mobile-ui .qf-type-glass__grid .qf-picker__native, .qf-picker--native .qf-type-glass__grid .qf-picker__native { position: relative; z-index: 5; } #qfTypeGlass:not([hidden]) .qf-picker__native, #qfTypeStandard:not([hidden]) .qf-picker:not(.qf-picker--disabled) .qf-picker__native { pointer-events: auto !important; opacity: 1 !important; } html:not(.touch-ui):not(.mobile-ui) .qf-picker--disabled .qf-picker__native { pointer-events: none; } .qf-picker--disabled .qf-picker__native { opacity: 0.55; cursor: not-allowed; } .qf-picker__native:focus { background: var(--t-input-focus-bg); box-shadow: inset 0 0 0 1px var(--t-input-focus-border), var(--t-input-focus-ring); outline: none; } .qf-picker__trigger { touch-action: manipulation; -webkit-tap-highlight-color: transparent; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; text-align: left; font-family: var(--font-body); font-size: 15px; font-weight: 400; color: var(--t-input-fg); background: var(--t-input-bg); border: 1px solid transparent; border-radius: 10px; padding: 12px 14px; box-shadow: inset 0 0 0 1px var(--t-input-border); cursor: pointer; transition: background 0.25s var(--ease), box-shadow 0.25s var(--ease); } .qf-picker__trigger:hover:not(:disabled) { background: var(--t-input-focus-bg); box-shadow: inset 0 0 0 1px var(--t-input-focus-border); } .qf-picker.is-open .qf-picker__trigger { background: var(--t-input-focus-bg); box-shadow: inset 0 0 0 1px var(--t-input-focus-border), var(--t-input-focus-ring); } .qf-picker__trigger:focus-visible { background: var(--t-input-focus-bg); box-shadow: inset 0 0 0 1px var(--t-input-focus-border), var(--t-input-focus-ring); outline: none; } .qf-picker__value { flex: 1; min-width: 0; } .qf-picker__value--placeholder { font-weight: 400; font-family: var(--font-body); color: var(--t-input-ph); opacity: var(--t-input-ph-op); } .qf-picker__chevron { flex-shrink: 0; color: var(--t-fg-dim); opacity: 0.7; transition: transform 0.3s var(--ease), opacity 0.2s; } .qf-picker__trigger:hover:not(:disabled) .qf-picker__chevron { opacity: 1; } .qf-picker.is-open .qf-picker__chevron { transform: rotate(180deg); opacity: 1; } .qf-picker__panel { position: absolute; z-index: 1; left: 0; right: 0; top: calc(100% + 8px); border: 1px solid var(--t-form-border); border-radius: 12px; background: var(--t-picker-panel-bg, var(--t-form-bg)); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(184, 220, 240, 0.06); backdrop-filter: none; -webkit-backdrop-filter: none; overflow: hidden; } .qf-picker__panel::before, .qf-picker__panel::after { content: ''; position: absolute; left: 0; right: 16px; height: 14px; pointer-events: none; z-index: 2; opacity: 0; transition: opacity 0.25s var(--ease); } .qf-picker__panel::before { top: 0; background: linear-gradient(to bottom, var(--t-form-bg) 15%, transparent); } .qf-picker__panel::after { bottom: 0; background: linear-gradient(to top, var(--t-form-bg) 15%, transparent); } .qf-picker__panel.is-scrollable:not(.is-scroll-top)::before { opacity: 1; } .qf-picker__panel.is-scrollable:not(.is-scroll-end)::after { opacity: 1; } .qf-picker__list { overflow-y: auto; overflow-x: hidden; scrollbar-width: none; -ms-overflow-style: none; list-style: none; margin: 0; padding: 6px; background: var(--t-picker-panel-bg, var(--t-form-bg)); } .qf-picker__list .qf-picker__option-wrap { display: block; width: 100%; margin: 0; padding: 0; } .qf-picker__list::-webkit-scrollbar { display: none; } .qf-picker__scroll-track { position: absolute; right: 6px; top: 6px; bottom: 6px; width: 8px; pointer-events: none; z-index: 3; } .qf-picker__scroll-rail { position: absolute; top: 0; left: 50%; display: flex; flex-direction: column; align-items: center; gap: 4px; will-change: transform; } .qf-picker__scroll-seg { display: block; width: 3px; height: 8px; border-radius: 999px; background: rgba(184, 220, 240, 0.42); box-shadow: 0 0 6px rgba(184, 220, 240, 0.12); } .qf-picker__list .product-row, .qf-picker__list .qf-picker__option { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; width: 100%; display: flex; flex-direction: column; align-items: stretch; box-sizing: border-box; text-align: left; padding: 10px 12px; margin: 0; border: none; border-bottom: none; border-radius: 8px; background: var(--t-picker-panel-bg, var(--t-form-bg)); transition: background 0.15s var(--ease); } .qf-picker__list .product-row__label { display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 0; width: 100%; min-width: 0; } .qf-type-glass__grid .qf-picker__list .product-row__label { flex-direction: column; align-items: flex-start; gap: 2px; } .qf-picker__list .product-row__name, .qf-picker__list .product-row__cn { font-family: var(--font-body); font-size: 13px; font-weight: 400; letter-spacing: 0.01em; white-space: normal; } .qf-picker__list .product-row__name { color: var(--t-input-fg); font-weight: 500; } .qf-picker__list .product-row__cn { color: var(--t-fg-muted); } .qf-picker__list .product-row__sep { font-weight: 400; color: var(--t-fg-dim); opacity: 0.65; } .qf-picker__list .product-row::before { display: none !important; } .qf-picker__list .product-row:hover { background: var(--t-picker-row-hover, var(--t-row-hover)); } .qf-picker__list .product-row.is-highlighted, .qf-picker__list .product-row.is-selected { background: var(--t-picker-row-selected, var(--t-input-focus-bg)); } .qf-picker--disabled .qf-picker__trigger { opacity: 0.55; cursor: not-allowed; } .qf__field input::placeholder, .qf__field textarea::placeholder { color: var(--t-input-ph); opacity: var(--t-input-ph-op); } .qf__field input:focus, .qf__field textarea:focus { background: var(--t-input-focus-bg); box-shadow: inset 0 0 0 1px var(--t-input-focus-border), var(--t-input-focus-ring); } .qf__field textarea { resize: vertical; min-height: 96px; } /* Submit row */ .qf__footer { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 4px; } .qf__submit { min-width: 200px; } .qf__submit:disabled { opacity: 0.6; cursor: not-allowed; } .qf__privacy { font-size: 12px; color: var(--t-privacy); } /* ─── Contact ─── */ .contact { background: var(--grad-contact); color: var(--t-fg); padding-bottom: var(--section-pad); } .contact__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-block); align-items: start; } .contact__details { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-element); margin-top: var(--space-block); font-style: normal; } .contact__label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--t-fg-dim); margin-bottom: 8px; } .contact__item p { font-size: 15px; line-height: 1.6; color: var(--t-fg); } .contact__item a { font-weight: 500; cursor: pointer; text-decoration: none; transition: color 0.3s; } .contact__item a:hover { color: var(--t-accent); text-decoration: underline; text-underline-offset: 3px; } .contact__map { border-radius: 6px; overflow: hidden; border: 1px solid var(--t-map-border); aspect-ratio: 4/3; min-height: 400px; box-shadow: 0 8px 32px rgba(10, 35, 66, 0.08); } .contact__map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(0.2) sepia(0.15) hue-rotate(155deg) saturate(1.2); } /* ─── Footer ─── */ .footer { background: var(--grad-footer); color: var(--t-footer-fg); padding: 48px 0 32px; border-top: 1px solid var(--t-footer-border); transition: background-color 0.52s var(--ease), color 0.52s var(--ease), border-color 0.52s var(--ease); position: relative; z-index: 1; } .footer__top { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 24px; padding-bottom: 32px; border-bottom: 1px solid var(--t-footer-top-border); } .footer__nav { display: flex; gap: 28px; flex-wrap: wrap; } .footer__nav a { font-size: 13px; font-weight: 500; color: var(--t-footer-nav); transition: color 0.3s; } .footer__nav a:hover { color: var(--t-accent); } .footer__legal { display: flex; flex-wrap: wrap; gap: 20px; padding-bottom: 24px; border-bottom: 1px solid var(--t-footer-top-border); } .footer__legal-link { font-size: 12px; font-weight: 500; color: var(--t-footer-fg); transition: color 0.3s; } .footer__legal-link:hover, .footer__legal-link[aria-current="page"] { color: var(--t-accent); } .footer__bottom { display: flex; justify-content: space-between; padding-top: 24px; font-size: 12px; flex-wrap: wrap; gap: 8px; } /* ─── Scroll reveal ─── */ .reveal { opacity: 0; transform: translate3d(0, 20px, 0); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); } .reveal--visible { opacity: 1; transform: translate3d(0, 0, 0); } .quote__form .btn--accent { background: var(--t-form-btn-bg); border-color: var(--t-form-btn-border); color: var(--t-form-btn-fg); box-shadow: var(--t-quote-btn-shadow, var(--t-btn-accent-shadow)); } .quote__form .btn--accent:hover { background: var(--t-form-btn-hover-bg); border-color: var(--t-form-btn-hover-border); color: var(--t-form-btn-fg); box-shadow: var(--t-quote-btn-hover-shadow, var(--t-btn-accent-hover-shadow)); } /* ─── Mobile action bar ─── */ #quote.section, #quote .wrap { overflow-x: clip; max-width: 100%; } .mobile-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 190; padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); gap: 10px; background: var(--t-mobile-bar-bg); border-top: 1px solid var(--t-mobile-bar-border-top); backdrop-filter: blur(10px); pointer-events: none; } .mobile-bar__btn { pointer-events: auto; flex: 1; display: flex; align-items: center; justify-content: center; padding: 14px 10px; border-radius: 8px; font-weight: 600; font-size: 13px; text-align: center; line-height: 1.2; } .mobile-bar__btn--call { background: var(--t-btn-ghost-bg); border: 1px solid var(--t-btn-ghost-border); color: var(--t-btn-ghost-fg); } .mobile-bar__btn--quote { background: var(--t-btn-accent-bg); color: var(--t-btn-accent-fg); border: 1px solid var(--t-btn-accent-border); box-shadow: var(--t-btn-accent-shadow); } /* ─── FAQ page ─── */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link:focus { position: fixed; top: 12px; left: 12px; z-index: var(--z-skip-link); width: auto; height: auto; padding: 10px 16px; margin: 0; clip: auto; overflow: visible; white-space: normal; background: var(--navy); color: var(--white); border: 2px solid var(--baby); border-radius: 6px; font-weight: 600; text-decoration: none; } .qf__field--qty input { max-width: 120px; } .qf__consent { display: flex; align-items: flex-start; gap: 10px; margin-top: 8px; font-size: 0.9rem; line-height: 1.5; color: var(--t-fg-muted); } .qf__consent input { margin-top: 4px; flex-shrink: 0; } .qf__consent a { color: var(--t-accent); text-decoration: underline; text-underline-offset: 3px; } .nav__link--active { color: var(--t-nav-hover); } .faq-page .section { content-visibility: visible; } .faq-page, .glass-page { background: var(--grad-body); color: var(--t-fg); } .glass-page .section { content-visibility: visible; } .glass-page .faq-cta__card { margin-top: clamp(48px, 7vw, 80px); } /* ─── Glass catalog (Amazon-style grid) ─── */ .catalog-hero { padding-top: calc(var(--header-h) + 40px); padding-bottom: clamp(12px, 2vw, 20px); } .catalog-breadcrumb { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; font-size: 13px; font-weight: 500; color: var(--t-fg-muted); } .catalog-breadcrumb a { color: var(--t-fg-muted); transition: color 0.25s; } .catalog-breadcrumb a:hover { color: var(--t-accent); } .catalog-hero__lead { max-width: 40rem; margin-top: 12px; font-size: 1.05rem; line-height: 1.7; color: var(--t-fg-muted); } .catalog.section { padding-top: clamp(8px, 1.5vw, 16px); padding-bottom: calc(var(--section-pad) + 24px); } .catalog-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-bottom: 28px; padding-bottom: 18px; border-bottom: 1px solid var(--t-border-soft); } .catalog-toolbar__count { font-size: 14px; color: var(--t-fg-muted); } .catalog-toolbar__count strong { color: var(--t-fg); font-weight: 700; } .catalog-filters { display: flex; flex-wrap: wrap; gap: 8px; } .catalog-filter { appearance: none; border: 1px solid var(--t-border); background: transparent; color: var(--t-fg-muted); font-family: var(--font-body); font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 999px; cursor: pointer; transition: color 0.25s, background-color 0.25s, border-color 0.25s; } .catalog-filter:hover { color: var(--t-fg); border-color: var(--t-fg-dim); } .catalog-filter.is-active { color: var(--t-btn-accent-fg, var(--navy-deep)); background: var(--t-btn-accent-bg, var(--polo-blue-light)); border-color: transparent; } .catalog-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } .catalog-card { display: flex; flex-direction: column; min-width: 0; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--t-border-soft); border-radius: 14px; overflow: hidden; transition: border-color 0.3s var(--ease), transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background-color 0.3s var(--ease); } .catalog-card:hover { border-color: rgba(184, 220, 240, 0.28); transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22); background: rgba(255, 255, 255, 0.045); } .catalog-card__hit { display: flex; flex-direction: column; flex: 1; width: 100%; padding: 0; border: 0; background: none; color: inherit; text-align: left; font: inherit; cursor: pointer; } .catalog-card__hit:focus { outline: none; } .catalog-card__hit:focus-visible { outline: 2px solid var(--t-accent); outline-offset: -2px; } .catalog-card__media { display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; padding: 18px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)); } .catalog-card__media img { width: 100%; height: 100%; object-fit: contain; object-position: center; pointer-events: none; user-select: none; -webkit-user-drag: none; } .catalog-card__body { display: flex; flex-direction: column; gap: 6px; padding: 4px 16px 12px; flex: 1; } .catalog-card__category { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--t-accent); } .catalog-card__title { font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; color: var(--t-fg); } .catalog-card__cn { font-size: 0.92rem; font-weight: 500; color: var(--t-fg-muted); } .catalog-card__desc { margin-top: 4px; font-size: 0.88rem; line-height: 1.55; color: var(--t-fg-dim); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .catalog-card__cta { display: block; margin: 0 16px 16px; padding: 11px 14px; text-align: center; font-size: 13px; font-weight: 700; border-radius: 8px; color: var(--t-btn-accent-fg, var(--navy-deep)); background: var(--t-btn-accent-bg, var(--polo-blue-light)); transition: background-color 0.25s, transform 0.25s; } .catalog-card__cta:hover { background: var(--t-btn-accent-hover-bg, var(--polo-blue)); transform: translateY(-1px); } .catalog-empty { text-align: center; padding: 48px 16px; color: var(--t-fg-muted); } .catalog-dialog { position: fixed; inset: 0; margin: auto; width: min(920px, calc(100vw - 24px)); height: fit-content; max-height: calc(100vh - 32px); padding: 0; border: none; border-radius: 20px; background: #fff; color: #142033; box-shadow: 0 32px 90px rgba(4, 12, 24, 0.42); overflow: auto; } .catalog-dialog::backdrop { background: rgba(4, 12, 24, 0.7); backdrop-filter: blur(8px); } .catalog-dialog__inner { position: relative; display: flex; flex-direction: column; } .catalog-dialog__close { position: absolute; top: 14px; right: 14px; z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.92); color: #142033; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14); cursor: pointer; transition: background-color 0.2s, transform 0.2s; } .catalog-dialog__close:hover { background: #fff; transform: scale(1.04); } .catalog-dialog__media { display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #f3f6f9 0%, #e9eef3 100%); max-height: min(52vh, 460px); overflow: hidden; } .catalog-dialog__media img { display: block; width: 100%; height: auto; max-height: min(52vh, 460px); object-fit: contain; object-position: center; } .catalog-dialog__details { display: flex; flex-direction: column; gap: 8px; padding: 22px 28px 26px; background: #fff; } .catalog-dialog__category { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #587FA8; } .catalog-dialog__title { font-family: var(--font-display); font-size: clamp(1.35rem, 2.2vw, 1.7rem); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: #0A2342; } .catalog-dialog__cn { font-size: 1rem; font-weight: 500; color: rgba(20, 32, 51, 0.58); } .catalog-dialog__desc { margin-top: 6px; max-width: 42rem; font-size: 0.98rem; line-height: 1.7; color: rgba(20, 32, 51, 0.78); } .catalog-dialog__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .catalog-dialog__quote { min-width: 148px; } .catalog-dialog__actions .btn--ghost { color: #0A2342; border-color: rgba(10, 35, 66, 0.18); background: transparent; } .catalog-dialog__actions .btn--ghost:hover { background: rgba(10, 35, 66, 0.05); border-color: rgba(10, 35, 66, 0.28); color: #0A2342; } [data-theme="light"] .catalog-card { background: rgba(255, 255, 255, 0.72); border-color: rgba(44, 36, 22, 0.1); } [data-theme="light"] .catalog-card:hover { background: #fff; border-color: rgba(44, 36, 22, 0.16); box-shadow: 0 14px 30px rgba(44, 36, 22, 0.1); } [data-theme="light"] .catalog-card__media { background: linear-gradient(180deg, #f4f7fa, #eef2f6); } .faq-page-head { padding-top: calc(var(--header-h) + 56px); padding-bottom: clamp(16px, 3vw, 28px); text-align: center; } .faq-page-head.section { padding-bottom: 0; } .faq.section { padding-top: clamp(20px, 3vw, 32px); padding-bottom: calc(var(--section-pad) + 24px); } .faq-stack { max-width: 44rem; margin: 0 auto; display: flex; flex-direction: column; gap: clamp(16px, 2.5vw, 20px); } .faq-page-head__inner { max-width: 40rem; margin: 0 auto; } .faq-page-head__lead { margin: 16px auto 0; font-size: 1.05rem; font-weight: 500; line-height: 1.75; color: var(--t-fg-muted); } .faq-page-head__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; list-style: none; } .faq-page-head__chips li { padding: 8px 16px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--t-fg-muted); border: 1px solid var(--t-border); background: rgba(184, 220, 240, 0.06); } .faq-page-head__meta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin-top: 20px; font-size: 14px; font-weight: 600; color: var(--t-fg-muted); } .faq-page-head__meta a { color: var(--t-accent); text-decoration: underline; text-underline-offset: 3px; } .faq-page-head__meta a:hover { color: var(--t-fg); } .faq-page-head__sep { color: var(--t-fg-dim); } .faq { padding-top: 0; padding-bottom: 0; background: transparent; } .faq-panel, .faq-cta__card { max-width: none; margin: 0; border: 1px solid rgba(184, 220, 240, 0.14); border-radius: 20px; background: rgba(10, 35, 66, 0.72); box-shadow: 0 8px 32px rgba(0, 0, 0, 0); overflow: hidden; transition: background-color 0.52s var(--ease), border-color 0.52s var(--ease), box-shadow 0.65s var(--ease-out) 0.35s; } html.is-revealed .faq-panel, html.is-revealed .faq-cta__card { box-shadow: var(--t-faq-card-shadow); } .faq-cta__card { display: flex; flex-direction: column; align-items: stretch; gap: 24px; padding: clamp(28px, 4vw, 36px); text-align: center; } .faq-list { list-style: none; } .faq-item { border-bottom: 1px solid rgba(184, 220, 240, 0.1); transition: background 0.35s var(--ease); } .faq-item:last-child { border-bottom: none; } .faq-item.is-open { background: rgba(184, 220, 240, 0.05); } .faq-item__title { margin: 0; font: inherit; } .faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 24px; text-align: left; font-family: var(--font-body); font-size: 1rem; font-weight: 600; line-height: 1.45; color: #F4FAFD; transition: color 0.25s var(--ease); } .faq-question__label { flex: 1; min-width: 0; text-wrap: pretty; } .faq-question:hover, .faq-item.is-open .faq-question { color: var(--baby-soft); } .faq-question:focus { outline: none; } .faq-question:focus-visible { outline: 2px solid var(--baby); outline-offset: -2px; } .faq-question__toggle { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(184, 220, 240, 0.2); background: rgba(184, 220, 240, 0.08); position: relative; color: var(--baby-soft); transition: background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease); } .faq-item.is-open .faq-question__toggle { background: rgba(184, 220, 240, 0.16); border-color: rgba(184, 220, 240, 0.35); transform: rotate(45deg); } .faq-question__toggle::before, .faq-question__toggle::after { content: ''; position: absolute; top: 50%; left: 50%; background: currentColor; border-radius: 1px; transform: translate(-50%, -50%); } .faq-question__toggle::before { width: 12px; height: 2px; } .faq-question__toggle::after { width: 2px; height: 12px; } .faq-answer { display: grid; grid-template-rows: 0fr; padding: 0 24px; overflow: hidden; transition: grid-template-rows 0.45s var(--ease); } .faq-item:not(.is-open) .faq-answer { padding-top: 0; padding-bottom: 0; margin: 0; } .faq-item.is-open .faq-answer { grid-template-rows: 1fr; } .faq-answer__inner { overflow: hidden; min-height: 0; padding: 0 0 20px; } .faq-item:not(.is-open) .faq-answer__inner { padding: 0; } .faq-answer__content { min-height: 0; } .faq-answer p { margin: 0; color: rgba(184, 220, 240, 0.78); line-height: 1.75; font-size: 0.96rem; } .faq-answer a { color: var(--baby); text-decoration: underline; text-underline-offset: 3px; } .faq-answer strong { color: #F4FAFD; font-weight: 600; } .faq-cta__copy { width: 100%; } .faq-cta__copy .heading-lg { font-size: clamp(1.35rem, 2.6vw, 1.75rem); margin-top: 8px; line-height: 1.2; color: var(--t-heading); } .faq-cta__copy .eyebrow { color: var(--t-eyebrow); } .faq-cta__actions { display: grid; grid-template-columns: 1fr; gap: 10px; width: 100%; max-width: 320px; margin: 0 auto; } .faq-cta__actions .btn { box-sizing: border-box; height: 48px; min-height: 48px; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; font-size: 14px; font-weight: 600; line-height: 1; } .faq-cta__actions .btn--accent { border-radius: 8px; box-shadow: var(--t-quote-btn-shadow, var(--t-btn-accent-shadow)); } .faq-cta__actions .btn--accent:hover { transform: translateY(-1px); box-shadow: var(--t-quote-btn-hover-shadow, var(--t-btn-accent-hover-shadow)); } /* ─── Legal pages ─── */ .legal-page { background: var(--grad-body); } .legal-hero { padding-top: calc(var(--header-h) + 56px); padding-bottom: 24px; } .legal-hero__lead { margin-top: 12px; color: var(--t-fg-muted); } .legal { padding-top: 0; padding-bottom: calc(var(--section-pad) + 24px); } .legal__content { max-width: 46rem; } .legal__content > p { color: var(--t-fg-muted); line-height: 1.75; margin-bottom: 28px; } .legal__content h2 { font-family: var(--font-display); font-size: clamp(1.2rem, 2.2vw, 1.5rem); font-weight: 700; color: var(--t-heading); margin: 32px 0 12px; letter-spacing: -0.02em; } .legal__content h2:first-of-type { margin-top: 0; } .legal__content p { color: var(--t-fg-muted); line-height: 1.75; margin-bottom: 16px; } .legal__content a { color: var(--t-accent); text-decoration: underline; text-underline-offset: 3px; } .legal__content strong { color: var(--t-fg); font-weight: 600; } .legal__content ul { margin: 0 0 16px 1.25rem; color: var(--t-fg-muted); line-height: 1.75; } .legal__content li { margin-bottom: 8px; } .legal__content li:last-child { margin-bottom: 0; } /* Theme tokens — edit colors here; components use var(--t-*) */ :root, [data-theme="dark"] { --t-fg: var(--white); --t-fg-muted: rgba(184, 220, 240, 0.72); --t-fg-dim: rgba(184, 220, 240, 0.45); --t-accent: var(--baby); --t-accent-bright: var(--baby-soft); --t-accent-dim: var(--polo-blue-light); --t-highlight-bg: rgba(184, 220, 240, 0.08); --t-highlight-border: rgba(184, 220, 240, 0.22); --t-heading: var(--white); --t-heading-light: var(--white); --t-eyebrow: var(--baby); --t-eyebrow-light: var(--baby-soft); --t-border: rgba(184, 220, 240, 0.1); --t-border-soft: rgba(184, 220, 240, 0.08); --t-tag-bg: rgba(184, 220, 240, 0.08); --t-tag-fg: var(--baby-soft); --t-tag-border: rgba(184, 220, 240, 0.18); --t-row-hover: rgba(184, 220, 240, 0.06); --t-gallery-bg: var(--navy-deep); --t-gallery-border: rgba(184, 220, 240, 0.08); --t-gallery-status: rgba(184, 220, 240, 0.45); --t-gallery-img-filter: brightness(0.92) saturate(0.97); --t-arrow-bg: rgba(10, 35, 66, 0.75); --t-arrow-border: rgba(184, 220, 240, 0.12); --t-arrow-color: var(--white); --t-arrow-shadow: none; --t-arrow-hover-bg: rgba(184, 220, 240, 0.1); --t-arrow-hover-border: var(--baby); --t-arrow-hover-color: var(--baby-soft); --t-arrow-hover-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); --t-dot: rgba(184, 220, 240, 0.15); --t-dot-active: var(--baby); --t-dot-hover: rgba(184, 220, 240, 0.3); --t-form-bg: rgba(14, 20, 30, 0.92); --t-picker-panel-bg: #0e141e; --t-picker-row-hover: #1a2433; --t-picker-row-selected: #243040; --t-form-border: rgba(184, 220, 240, 0.12); --t-form-shadow: 0 20px 60px rgba(0, 0, 0, 0.22), 0 4px 16px rgba(0, 0, 0, 0.12); --t-form-blur: none; --t-faq-card-shadow: 0 20px 60px rgba(0, 0, 0, 0.18), 0 4px 16px rgba(0, 0, 0, 0.1); --t-label: rgba(184, 220, 240, 0.55); --t-input-bg: rgba(184, 220, 240, 0.06); --t-input-border: rgba(184, 220, 240, 0.14); --t-input-fg: var(--baby-soft); --t-input-ph: rgba(184, 220, 240, 0.45); --t-input-ph-op: 1; --t-input-focus-bg: rgba(184, 220, 240, 0.1); --t-input-focus-border: rgba(184, 220, 240, 0.35); --t-input-focus-ring: 0 0 0 3px rgba(184, 220, 240, 0.08); --t-privacy: rgba(184, 220, 240, 0.45); --t-map-border: rgba(184, 220, 240, 0.08); --t-header-bg: rgba(6, 21, 40, 0.94); --t-header-border: rgba(184, 220, 240, 0.08); --t-header-shadow: 0 1px 12px rgba(0, 0, 0, 0.22); --t-header-scrolled-bg: rgba(6, 21, 40, 0.98); --t-header-scrolled-border: rgba(184, 220, 240, 0.1); --t-header-scrolled-shadow: 0 4px 24px rgba(0, 0, 0, 0.32); --t-brand-mark: var(--baby); --t-brand-name: var(--white); --t-nav: var(--baby-soft); --t-nav-hover: var(--white); --t-nav-underline: var(--baby); --t-phone: var(--white); --t-phone-hover: var(--baby-soft); --t-menu-bar: var(--white); --t-nav-overlay-bg: rgba(6, 21, 40, 0.72); --t-nav-overlay-bg-fallback: rgba(6, 21, 40, 0.94); --t-nav-overlay-blur: blur(24px) saturate(150%); --t-btn-accent-bg: linear-gradient(135deg, #8BB8D8 0%, var(--baby) 100%); --t-btn-accent-fg: var(--navy-deep); --t-btn-accent-border: rgba(184, 220, 240, 0.55); --t-btn-accent-shadow: 0 0 0 1px rgba(184, 220, 240, 0.2), 0 4px 20px rgba(127, 165, 198, 0.5); --t-btn-accent-hover-bg: linear-gradient(135deg, var(--baby) 0%, #9ECAE8 100%); --t-btn-accent-hover-border: rgba(184, 220, 240, 0.7); --t-btn-accent-hover-shadow: 0 0 0 1px rgba(184, 220, 240, 0.35), 0 6px 28px rgba(127, 165, 198, 0.6); --t-btn-ghost-bg: rgba(184, 220, 240, 0.08); --t-btn-ghost-fg: var(--baby-soft); --t-btn-ghost-border: rgba(184, 220, 240, 0.22); --t-btn-ghost-blur: blur(8px); --t-btn-ghost-hover-bg: rgba(184, 220, 240, 0.14); --t-btn-ghost-hover-border: rgba(184, 220, 240, 0.35); --t-form-btn-bg: var(--polo-blue-light); --t-form-btn-border: var(--polo-blue); --t-form-btn-fg: var(--white); --t-form-btn-hover-bg: var(--polo-blue); --t-form-btn-hover-border: var(--polo-blue-dark); --t-quote-btn-shadow: 0 2px 6px rgba(0, 0, 0, 0.18), 0 10px 32px rgba(127, 165, 198, 0.2); --t-quote-btn-hover-shadow: 0 4px 12px rgba(0, 0, 0, 0.22), 0 16px 40px rgba(127, 165, 198, 0.28); --t-bento-stat-val: var(--baby); --t-marquee-dot: var(--baby); --t-marquee-track: rgba(184, 220, 240, 0.45); --t-footer-fg: rgba(184, 220, 240, 0.55); --t-footer-border: var(--border); --t-footer-nav: inherit; --t-footer-top-border: var(--border); --t-mobile-bar-bg: linear-gradient(180deg, transparent 0%, rgba(6, 21, 40, 0.94) 28%); --t-mobile-bar-border-top: transparent; } [data-theme="dark"] .header { background: var(--t-header-bg); border-bottom-color: var(--t-header-border); box-shadow: var(--t-header-shadow); } [data-theme="dark"] .header--scrolled { background: var(--t-header-scrolled-bg); border-bottom-color: var(--t-header-scrolled-border); box-shadow: var(--t-header-scrolled-shadow); } [data-theme="dark"] .header--solid { background: var(--t-header-scrolled-bg); border-bottom-color: var(--t-header-scrolled-border); box-shadow: var(--t-header-scrolled-shadow); } [data-theme="dark"] .footer { background: #040e1a; border-top-color: rgba(184, 220, 240, 0.14); } [data-theme="dark"] .hero .eyebrow { display: inline-block; color: var(--baby-soft); font-weight: 700; background: rgba(6, 21, 40, 0.72); border: 1px solid rgba(184, 220, 240, 0.14); border-radius: 20px; padding: 5px 14px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); } [data-theme="dark"] .hero__title em { color: var(--baby); } [data-theme="dark"] .hero__badges li { color: var(--baby); background: rgba(6, 21, 40, 0.55); border-color: rgba(184, 220, 240, 0.18); } [data-theme="dark"] .hero__tab--active { color: var(--baby-soft); } [data-theme="dark"] .hero__tab--active .hero__tab-bar::after { background: linear-gradient(90deg, var(--polo-blue-light), var(--baby)); } [data-theme="dark"] .hero__scroll-line { background: linear-gradient(to bottom, var(--baby), transparent); } [data-theme="dark"] .theme-btn { background-color: rgba(184, 220, 240, 0.1); border-color: rgba(184, 220, 240, 0.18); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); color: var(--baby-soft); } [data-theme="dark"] .theme-btn svg { color: var(--baby-soft); stroke: var(--baby-soft); } [data-theme="dark"] .theme-btn:hover { background-color: rgba(184, 220, 240, 0.16); border-color: rgba(184, 220, 240, 0.28); } [data-theme="light"] { --grad-body: #EDE7DC; --grad-about: #E4DAD0; --grad-products: #EDE7DC; --grad-gallery: #E4DAD0; --grad-quote: #EDE7DC; --grad-contact: #E4DAD0; --grad-services: #E4DAD0; --grad-marquee: #D9CFC4; --grad-footer: #CEC4B8; --brown: #2C2416; --brown-mid: #3D3326; --brown-soft: #5A4E3E; --t-fg: #2C2416; --t-fg-muted: #5A4E3E; --t-fg-dim: #6B5E4F; --t-accent: var(--brown-mid); --t-accent-bright: #5A4E3E; --t-accent-dim: var(--brown-mid); --t-highlight-bg: rgba(245, 239, 230, 0.92); --t-highlight-border: #BEB4A8; --t-heading: #2C2416; --t-heading-light: #2C2416; --t-eyebrow: var(--brown-soft); --t-eyebrow-light: var(--brown-soft); --t-border: #CEC4B8; --t-border-soft: #CEC4B8; --t-tag-bg: rgba(44, 36, 22, 0.07); --t-tag-fg: #5A4E3E; --t-tag-border: #CEC4B8; --t-row-hover: rgba(44, 36, 22, 0.05); --t-gallery-bg: #F0EAE0; --t-gallery-border: #CEC4B8; --t-gallery-status: #9A8D7E; --t-gallery-img-filter: none; --t-arrow-bg: #F0EAE0; --t-arrow-border: #CEC4B8; --t-arrow-color: #2C2416; --t-arrow-shadow: 0 2px 8px rgba(44, 36, 22, 0.07); --t-arrow-hover-bg: #E4DAD0; --t-arrow-hover-border: var(--brown-mid); --t-arrow-hover-color: var(--brown-mid); --t-arrow-hover-shadow: 0 4px 12px rgba(44, 36, 22, 0.1); --t-dot: rgba(44, 36, 22, 0.15); --t-dot-active: var(--brown-mid); --t-dot-hover: rgba(44, 36, 22, 0.28); --t-form-bg: #F0EAE0; --t-picker-panel-bg: #F0EAE0; --t-picker-row-hover: #e4dcd0; --t-picker-row-selected: #d9cfc0; --t-form-border: #CEC4B8; --t-form-shadow: 0 8px 40px rgba(44, 36, 22, 0.08); --t-form-blur: none; --t-faq-card-shadow: 0 16px 48px rgba(44, 36, 22, 0.06), 0 4px 12px rgba(44, 36, 22, 0.04); --t-label: #5A4E3E; --t-input-bg: #E8DFD3; --t-input-border: #CEC4B8; --t-input-fg: #2C2416; --t-input-ph: #B5A898; --t-input-ph-op: 1; --t-input-focus-bg: #F0EAE0; --t-input-focus-border: var(--brown-mid); --t-input-focus-ring: 0 0 0 3px rgba(44, 36, 22, 0.1); --t-privacy: #9A8D7E; --t-map-border: #CEC4B8; --t-header-bg: #EDE7DC; --t-header-border: #CEC4B8; --t-header-shadow: 0 1px 12px rgba(10, 35, 66, 0.12); --t-header-scrolled-bg: #E4DAD0; --t-header-scrolled-border: #CEC4B8; --t-header-scrolled-shadow: 0 4px 24px rgba(44, 36, 22, 0.08); --t-brand-mark: var(--brown-mid); --t-brand-name: #2C2416; --t-nav: #4A3F32; --t-nav-hover: #2C2416; --t-nav-underline: var(--brown-mid); --t-phone: #2C2416; --t-phone-hover: var(--brown-mid); --t-menu-bar: #2C2416; --t-nav-overlay-bg: rgba(237, 231, 220, 0.82); --t-nav-overlay-bg-fallback: rgba(237, 231, 220, 0.96); --t-nav-overlay-blur: blur(24px) saturate(120%); --t-btn-accent-bg: var(--brown); --t-btn-accent-fg: #FFFBF5; --t-btn-accent-border: var(--brown); --t-btn-accent-shadow: 0 3px 12px rgba(44, 36, 22, 0.12); --t-btn-accent-hover-bg: var(--brown-mid); --t-btn-accent-hover-border: var(--brown-mid); --t-btn-accent-hover-shadow: 0 5px 16px rgba(44, 36, 22, 0.16); --t-btn-ghost-bg: rgba(44, 36, 22, 0.06); --t-btn-ghost-fg: #2C2416; --t-btn-ghost-border: #CEC4B8; --t-btn-ghost-blur: none; --t-btn-ghost-hover-bg: rgba(44, 36, 22, 0.1); --t-btn-ghost-hover-border: var(--brown-soft); --t-form-btn-bg: var(--brown); --t-form-btn-border: var(--brown); --t-form-btn-fg: #FFFBF5; --t-form-btn-hover-bg: var(--brown-mid); --t-form-btn-hover-border: var(--brown-mid); --t-quote-btn-shadow: 0 2px 8px rgba(44, 36, 22, 0.1), 0 8px 24px rgba(44, 36, 22, 0.08); --t-quote-btn-hover-shadow: 0 4px 12px rgba(44, 36, 22, 0.12), 0 12px 32px rgba(44, 36, 22, 0.1); --t-bento-stat-val: var(--brown-mid); --t-marquee-dot: var(--brown-soft); --t-marquee-track: #5A4E3E; --t-footer-fg: rgba(44, 36, 22, 0.68); --t-footer-border: #BEB4A8; --t-footer-nav: #5A4E3E; --t-footer-top-border: rgba(44, 36, 22, 0.1); --t-mobile-bar-bg: linear-gradient(180deg, transparent 0%, rgba(237, 231, 220, 0.97) 24%); --t-mobile-bar-border-top: var(--t-border); } [data-theme="light"] .hero { background: #EDE7DC; } [data-theme="light"] .hero__overlay { background: linear-gradient(to top, rgba(245, 239, 230, 0.96) 0%, rgba(237, 231, 220, 0.62) 50%, rgba(232, 223, 211, 0.48) 75%), linear-gradient(105deg, rgba(245, 239, 230, 0.78) 0%, rgba(237, 231, 220, 0.42) 48%, rgba(237, 231, 220, 0.1) 100%); } [data-theme="light"] .hero .eyebrow { display: inline-block; color: #3A3228; font-weight: 700; background: rgba(245, 239, 230, 0.95); border: 1px solid #BEB4A8; border-radius: 20px; padding: 5px 14px; box-shadow: 0 2px 10px rgba(44, 36, 22, 0.06); } [data-theme="light"] .hero__title { color: #2C2416; } [data-theme="light"] .hero__title em { color: var(--brown-mid); } [data-theme="light"] .hero__lead { color: #5A4E3E; } [data-theme="light"] .hero__badges li { color: #5A4E3E; background: rgba(245, 239, 230, 0.92); border-color: #BEB4A8; } [data-theme="light"] .hero__tab { color: rgba(44, 36, 22, 0.35); } [data-theme="light"] .hero__tab--active { color: #2C2416; } [data-theme="light"] .hero__tab-bar { background: rgba(44, 36, 22, 0.14); } [data-theme="light"] .hero__scroll { color: rgba(44, 36, 22, 0.4); } [data-theme="light"] .hero__tab--active .hero__tab-bar::after { background: linear-gradient(90deg, var(--brown-mid), var(--brown-soft)); } [data-theme="light"] .hero__scroll-line { background: linear-gradient(to bottom, var(--brown-soft), transparent); } [data-theme="light"] .theme-btn { background-color: var(--theme-surface-dark); border-color: rgba(184, 220, 240, 0.12); box-shadow: 0 2px 10px rgba(6, 21, 40, 0.22); } [data-theme="light"] .theme-btn:hover { background-color: var(--navy); border-color: rgba(184, 220, 240, 0.2); } [data-theme="light"] .section--dark, [data-theme="light"] .services { background: var(--grad-services); color: #2C2416; } [data-theme="light"] .bento__stat { background: rgba(237, 231, 220, 0.9); border-color: #CEC4B8; } [data-theme="light"] .bento__stat:hover { background: #F0EAE0; border-color: rgba(44, 36, 22, 0.22); } [data-theme="light"] .bento__stat-key { color: #5A4E3E; } [data-theme="light"] .brand--footer .brand__name { color: #2C2416; } [data-theme="light"] .brand--footer .brand__logo { mix-blend-mode: normal; } [data-theme="light"] .products__intro, [data-theme="light"] .gallery__intro { color: #5A4E3E; } [data-theme="light"] .faq-page-head__meta a { color: var(--brown-mid); } [data-theme="light"] .faq { background: transparent; } [data-theme="light"] .faq-panel, [data-theme="light"] .faq-cta__card { background: #F0EAE0; border-color: #CEC4B8; box-shadow: var(--t-faq-card-shadow); } [data-theme="light"] .faq-page-head__chips li { background: rgba(44, 36, 22, 0.05); border-color: #CEC4B8; color: #5A4E3E; } [data-theme="light"] .faq-question { color: #2C2416; } [data-theme="light"] .faq-question:hover, [data-theme="light"] .faq-item.is-open .faq-question { color: var(--brown-mid); } [data-theme="light"] .faq-question__toggle { color: var(--brown-mid); border-color: #CEC4B8; background: rgba(44, 36, 22, 0.05); } [data-theme="light"] .faq-item { border-bottom-color: #CEC4B8; } [data-theme="light"] .faq-item.is-open { background: rgba(44, 36, 22, 0.04); } [data-theme="light"] .faq-answer p { color: #5A4E3E; } [data-theme="light"] .faq-answer strong { color: #2C2416; } [data-theme="light"] .faq-answer a { color: var(--brown-mid); } [data-theme="light"] .faq-cta__copy .heading-lg { color: #2C2416; } [data-theme="light"] .faq-cta__copy .eyebrow { color: #5A4E3E; } .header--mobile-nav .nav, @media (max-width: 1024px) { .header .nav { flex: none; justify-content: flex-start; } } [data-theme="light"] .header--mobile-nav .nav, @media (max-width: 1024px) { [data-theme="light"] .header .nav { background: var(--t-nav-overlay-bg); backdrop-filter: var(--t-nav-overlay-blur); -webkit-backdrop-filter: var(--t-nav-overlay-blur); } } [data-theme="light"] .header--mobile-nav .nav .nav__link, @media (max-width: 1024px) { [data-theme="light"] .header .nav .nav__link { color: #2C2416; } [data-theme="light"] .header .nav .nav__dropdown-link { color: rgba(44, 36, 22, 0.72); } [data-theme="light"] .header .nav .nav__dropdown-link:hover, [data-theme="light"] .header .nav .nav__dropdown-link:focus-visible { color: #2C2416; } [data-theme="light"] .header .nav .nav__link--mobile-cta { color: var(--brown-mid) !important; } } [data-theme="light"] .header--mobile-nav .nav .nav__link--mobile-cta { color: var(--brown-mid) !important; } /* ─── Responsive ─── */ @media (max-width: 1024px) { .bento__grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; min-height: 0; } .bento__card--hero { grid-column: 1 / -1; grid-row: 1; min-height: 360px; } .gallery__carousel { gap: 10px; } .gallery__arrow { width: 40px; height: 40px; } .about__grid { grid-template-columns: 1fr; } } /* Header mobile nav — JS class (.header--mobile-nav) or ≤1024px no-JS fallback */ .header--mobile-nav, @media (max-width: 1024px) { .header { overflow: visible; } } .header--mobile-nav:has(.nav--open), @media (max-width: 1024px) { .header:has(.nav--open) { z-index: 400; } } .header--mobile-nav .header__inner, @media (max-width: 1024px) { .header .header__inner { z-index: 402; justify-content: flex-start; gap: 10px; } } .header--mobile-nav .theme-btn, .header--mobile-nav .menu-btn, @media (max-width: 1024px) { .header .theme-btn, .header .menu-btn { flex-shrink: 0; } } .header--mobile-nav .header__actions, @media (max-width: 1024px) { .header .header__actions { display: none !important; } } .header--mobile-nav .theme-btn, @media (max-width: 1024px) { .header .theme-btn { margin-left: auto; } } .header--mobile-nav.header--hide-phone .header__actions { display: none !important; } .header--mobile-nav.header--hide-phone .theme-btn { margin-left: auto; } .header--mobile-nav .nav, @media (max-width: 1024px) { .header .nav { position: fixed; z-index: -1; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0; margin: 0; pointer-events: none; visibility: hidden; overflow: hidden; width: 1px; height: 1px; top: auto; left: auto; right: auto; bottom: auto; padding: 0; opacity: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; transform: none; clip-path: none; transition: none; } } .header--mobile-nav .nav.nav--open, .header--mobile-nav .nav:target, @media (max-width: 1024px) { .header .nav.nav--open, .header .nav:target { top: 0; left: 0; right: 0; bottom: 0; z-index: 401; width: auto; height: auto; padding: calc(var(--header-h) + 32px) clamp(20px, 4vw, 48px) 32px; gap: 0; background: var(--t-nav-overlay-bg, rgba(6, 21, 40, 0.78)); backdrop-filter: var(--t-nav-overlay-blur, blur(24px) saturate(150%)); -webkit-backdrop-filter: var(--t-nav-overlay-blur, blur(24px) saturate(150%)); opacity: 1; visibility: visible; pointer-events: auto; overflow-y: auto; -webkit-overflow-scrolling: touch; transform: translate3d(0, 0, 0); clip-path: none; transition: opacity 0.4s var(--ease), visibility 0.4s var(--ease), transform 0.4s var(--ease), background-color 0.52s var(--ease); } } .header--mobile-nav .nav .nav__link, @media (max-width: 1024px) { .header .nav .nav__link { font-size: 1.5rem; font-family: var(--font-display); font-weight: 600; color: var(--white); width: 100%; max-width: 22rem; text-align: center; padding: 16px 0; border-bottom: 1px solid var(--border); text-shadow: none; } .header .nav .nav__link::after { display: none; } .header .nav .nav__item--dropdown { flex-direction: column; width: 100%; max-width: 22rem; align-items: stretch; } .header .nav .nav__item--dropdown .nav__link { border-bottom: none; } .header .nav .nav__dropdown { position: static; transform: none; left: auto; top: auto; min-width: 0; width: 100%; padding: 0 0 12px; background: transparent; border: none; border-radius: 0; box-shadow: none; opacity: 1; visibility: visible; pointer-events: auto; border-bottom: 1px solid var(--border); } .header .nav .nav__dropdown::before { display: none; } .header .nav .nav__dropdown-link { text-align: center; font-family: var(--font-display); font-size: 1.15rem; font-weight: 500; color: rgba(255, 255, 255, 0.78); padding: 10px 0; } .header .nav .nav__dropdown-link:hover, .header .nav .nav__dropdown-link:focus-visible { color: var(--white); background: transparent; } } .header--mobile-nav .menu-btn, @media (max-width: 1024px) { .header .menu-btn { display: flex; position: relative; z-index: 403; } } .header--mobile-nav .nav .nav__link--mobile-cta, @media (max-width: 1024px) { .header .nav .nav__link--mobile-cta { display: block; width: 100%; max-width: 22rem; text-align: center; color: var(--t-accent) !important; font-weight: 700; font-size: 1.35rem; } } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .header--mobile-nav .nav.nav--open, .header--mobile-nav .nav:target { background: var(--t-nav-overlay-bg-fallback, rgba(6, 21, 40, 0.94)); } } @media (max-width: 1024px) { @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .header .nav.nav--open, .header .nav:target { background: var(--t-nav-overlay-bg-fallback, rgba(6, 21, 40, 0.94)); } } } @media (max-width: 1280px) { .header:not(.header--mobile-nav) .header__inner { gap: 20px; } .header:not(.header--mobile-nav) .nav { gap: 22px; } .header:not(.header--mobile-nav) .nav__link { font-size: 13px; } .header:not(.header--mobile-nav) .header__phone { font-size: 13px; } .header:not(.header--mobile-nav) .btn--accent { padding: 10px 18px; font-size: 13px; } } @media (max-width: 768px) { .reveal { opacity: 1; transform: none; } body.nav-open .mobile-bar, body:has(.nav--open) .mobile-bar { opacity: 0; pointer-events: none; } .mobile-bar { display: flex; } body { padding-bottom: 76px; } .hero__body { flex-direction: column; align-items: flex-start; } .hero__meta { flex-direction: row; width: 100%; justify-content: space-between; align-items: center; } .hero__scroll { display: none; } .hero__slides-text { min-height: 240px; } .bento__grid { grid-template-columns: 1fr; grid-template-rows: auto; } .bento__card--hero { grid-column: 1; grid-row: auto; min-height: 320px; } .bento__stat-val { overflow-wrap: anywhere; max-width: 100%; } .products__head, .gallery__head { flex-direction: column; align-items: flex-start; } .gallery__carousel { position: relative; gap: 0; width: 100%; } .gallery__viewport { flex: 1 1 100%; width: 100%; max-width: 100%; } .gallery__arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 36px; height: 36px; min-width: 36px; min-height: 36px; } .gallery__arrow:hover:not(:disabled) { transform: translateY(-50%); } #galleryPrev { left: 8px; } #galleryNext { right: 8px; } .gallery__viewport--scroll .gallery__track { gap: 0; } .gallery__footer { margin-top: 12px; margin-bottom: 8px; opacity: 1 !important; visibility: visible !important; transform: none !important; } .gallery__status { display: block !important; opacity: 1 !important; } .gallery__dots { display: flex !important; opacity: 1 !important; min-height: 32px; } .gallery__dot { width: 12px; height: 12px; } .product-row { grid-template-columns: 1fr auto; gap: 16px; } .product-list--catalog .product-row__label { padding-right: 4px; } .product-list--catalog .product-row__cn { white-space: normal; } .product-list--catalog .product-row { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .faq-question { padding: 18px 20px; } .faq-answer { padding: 0 20px; } .contact__grid { grid-template-columns: 1fr; } .contact__details { grid-template-columns: 1fr; } .quote__layout { grid-template-columns: 1fr; } .quote__form { overflow: visible; } .qf__entry { overflow: visible; } .qf__row--two { flex-direction: column; } .qf-type-glass__grid { grid-template-columns: 1fr; } .qf-type-glass__grid > .qf__field:first-child { grid-column: auto; } .qf__submit { width: 100%; justify-content: center; } .qf__add-item { pointer-events: auto !important; touch-action: manipulation; min-height: 44px; } .quote__form .qf-picker__native { display: block !important; visibility: visible !important; pointer-events: auto !important; opacity: 1 !important; -webkit-appearance: menulist-button !important; appearance: menulist-button !important; } .quote__form .qf-picker > .qf-picker__trigger, .quote__form .qf-picker > .qf-picker__panel { display: none !important; visibility: hidden !important; pointer-events: none !important; } #qfTypeGlass:not([hidden]) .qf-picker__native, #qfTypeStandard:not([hidden]) .qf-picker:not(.qf-picker--disabled) .qf-picker__native { pointer-events: auto !important; opacity: 1 !important; } .quote__form .qf-picker.is-open .qf-picker__panel { position: absolute; left: 0; right: 0; top: calc(100% + 8px); bottom: auto; width: auto; max-height: min(52vh, 380px); z-index: 300; } .qf-picker.is-open .qf-picker__list { max-height: min(46vh, 340px) !important; } body.quote-picker-open .mobile-bar { opacity: 0; pointer-events: none; } } @media (max-width: 480px) { .bento__stats { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } .reveal { opacity: 1; transform: none; } .reveal .quote__form { box-shadow: var(--t-form-shadow); } html.is-revealed .faq-panel, html.is-revealed .faq-cta__card { box-shadow: var(--t-faq-card-shadow); } .marquee__track { will-change: auto; } .hero__slide--active .hero__img { transform: none; } html.is-revealed .hero__slide--active .hero__img { animation: none; } html { scroll-behavior: auto; } } /* iOS Safari — targeted fixes only (see .ios-ui on ) */ .ios-ui { overflow-y: auto; height: auto; min-height: 100%; -webkit-overflow-scrolling: touch; } .ios-ui body { overflow-y: auto; height: auto; min-height: 100%; } .ios-ui .hero__media { contain: none; } .ios-ui .reveal { opacity: 1 !important; transform: none !important; } .ios-ui .quote__form, .ios-ui .qf-picker__panel { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .ios-ui #quote, .ios-ui .quote__form, .ios-ui .qf__entry, .ios-ui .qf__field, .ios-ui .qf-picker, .ios-ui .product-list--catalog, .ios-ui .product-list--catalog .product-row { overflow: visible !important; } .ios-ui .qf-picker__native { pointer-events: auto !important; touch-action: manipulation; min-height: 48px; font-size: 16px; z-index: 5; position: relative; -webkit-appearance: menulist; appearance: menulist; } .ios-ui .quote__form .qf-picker > .qf-picker__trigger, .ios-ui .quote__form .qf-picker > .qf-picker__panel, .ios-ui .quote__form .qf-picker.is-open > .qf-picker__panel { display: none !important; visibility: hidden !important; pointer-events: none !important; } .ios-ui .quote__form .qf-picker__native { display: block !important; } .ios-ui .header--mobile-nav .nav:not(.nav--open):not(:target) { display: none !important; pointer-events: none !important; z-index: -1 !important; visibility: hidden !important; } .ios-ui .gallery__arrow { z-index: 10 !important; pointer-events: auto !important; touch-action: manipulation; min-width: 44px; min-height: 44px; } .ios-ui .gallery__viewport--scroll { touch-action: pan-x pan-y; -webkit-overflow-scrolling: touch; } @media (max-width: 1100px) { .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 800px) { .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .catalog-dialog__media { max-height: min(42vh, 360px); } .catalog-dialog__media img { max-height: min(42vh, 360px); } .catalog-dialog__details { padding: 18px 18px 22px; } .catalog-dialog__actions { width: 100%; } .catalog-dialog__actions .btn { flex: 1; text-align: center; justify-content: center; } } @media (max-width: 520px) { .catalog-grid { grid-template-columns: 1fr; } .catalog-toolbar { align-items: flex-start; } .catalog-card__media { aspect-ratio: 4 / 3; } }