.interior-page { --page-accent: var(--signal); background: #f2f5f7; } .interior-page main { min-height: 65vh; } .interior-hero { position: relative; isolation: isolate; min-height: 42rem; padding: calc(var(--header-height) + var(--space-7)) 0 var(--space-8); overflow: hidden; color: var(--white); background: radial-gradient(circle at 78% 18%, rgba(29, 118, 219, 0.33), transparent 27rem), linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px), var(--navy-deep); background-size: auto, 4rem 4rem, 4rem 4rem, auto; } .interior-hero::before { content: ""; position: absolute; inset: auto -10% -65% 45%; z-index: -1; aspect-ratio: 1; border: 1px solid rgba(244, 200, 61, 0.32); border-radius: 50%; box-shadow: 0 0 0 4rem rgba(13, 89, 173, 0.08), 0 0 0 8rem rgba(13, 89, 173, 0.05); } .interior-hero::after { position: absolute; inset: 0; z-index: -1; opacity: 0.54; background: linear-gradient(118deg, transparent 24%, rgba(255, 255, 255, 0.055) 46%, transparent 58%), radial-gradient(circle at 18% 78%, rgba(244, 200, 61, 0.08), transparent 18rem); content: ""; pointer-events: none; } .interior-hero__cursor-grid { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.32; pointer-events: none; } .interior-hero__laser { position: absolute; top: 12%; right: -16%; width: 56%; height: 1px; opacity: 0.62; background: linear-gradient(90deg, transparent, rgba(244, 200, 61, 0.82), transparent); filter: drop-shadow(0 0 0.65rem rgba(244, 200, 61, 0.45)); pointer-events: none; transform: rotate(-18deg); transform-origin: center; } .interior-hero__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(19rem, 0.72fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: center; } .breadcrumbs { display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center; margin-bottom: var(--space-5); color: rgba(255, 255, 255, 0.7); font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.08em; text-transform: uppercase; } .breadcrumbs a:hover { color: var(--signal); } .interior-hero h1 { max-width: 13ch; margin-bottom: var(--space-5); color: transparent; font-size: clamp(2.8rem, 6vw, 6.35rem); letter-spacing: -0.065em; background: linear-gradient(112deg, #ffffff 12%, #e8f1fb 56%, #9fb8d3 100%); background-clip: text; -webkit-background-clip: text; } /* FOUC guard: the raw heading paints before pages.js has a chance to split and reveal it, worse now that the document.fonts.ready gate pushes that JS further out. Hidden only behind `.js` (added synchronously in , so a no-JS visitor always sees the text) and only when the visitor accepts motion — reduced-motion visitors always see it immediately. pages.js releases this per-heading once it has something to reveal, and unconditionally if gsap or ScrollTrigger fail to load at all. */ @media (prefers-reduced-motion: no-preference) { .js .interior-hero h1, .js .page-cta h2 { visibility: hidden; } } .interior-hero__lede { max-width: 42rem; margin-bottom: var(--space-6); color: rgba(255, 255, 255, 0.78); font-size: clamp(1.05rem, 1.7vw, 1.32rem); } .hero-actions, .section-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; align-items: center; } @media (max-width: 480px) { .interior-hero .hero-actions { max-width: calc(100% - 5rem); align-items: stretch; } .interior-hero .hero-actions .button { width: 100%; justify-content: center; } } .interior-hero .button--outline, .empty-state .button--outline { color: var(--white); border-color: rgba(255, 255, 255, 0.42); background: rgba(255, 255, 255, 0.035); } .interior-hero .button--outline:hover, .empty-state .button--outline:hover { color: var(--navy-deep); border-color: var(--white); background: var(--white); } .hero-art { position: relative; min-height: 0; aspect-ratio: var(--hero-ratio, 1 / 1); will-change: transform; } .hero-art__frame { position: absolute; inset: 0; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.19); border-radius: 1.1rem; background: #0c2748; box-shadow: var(--shadow-lg); } .hero-art__frame picture { display: block; width: 100%; height: 100%; } .hero-art__frame img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .hero-art__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(3, 13, 32, 0.84)); pointer-events: none; } .hero-art--contain .hero-art__frame img { object-fit: contain; padding: clamp(0.8rem, 2.4vw, 1.8rem); } .hero-art__scan { position: absolute; inset: -20% -55%; z-index: 2; opacity: 0.38; background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.34) 49%, transparent 56%); mix-blend-mode: screen; pointer-events: none; transform: translateX(-34%); } .hero-art__reticle { position: absolute; z-index: 2; width: 7.5rem; aspect-ratio: 1; border: 1px solid rgba(244, 200, 61, 0.5); border-radius: 50%; opacity: 0.65; pointer-events: none; } .hero-art__reticle::before, .hero-art__reticle::after { position: absolute; background: rgba(244, 200, 61, 0.45); content: ""; } .hero-art__reticle::before { top: 50%; left: -1.3rem; width: calc(100% + 2.6rem); height: 1px; } .hero-art__reticle::after { top: -1.3rem; left: 50%; width: 1px; height: calc(100% + 2.6rem); } .hero-art__reticle--one { top: 16%; right: 11%; } .hero-art__reticle--two { bottom: 12%; left: 9%; width: 3.4rem; opacity: 0.32; } .hero-art__label { position: absolute; right: -1.1rem; bottom: 2rem; z-index: 2; width: min(16rem, 85%); padding: 1rem 1.15rem; color: var(--navy); background: var(--signal); box-shadow: var(--shadow-lg); font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.45; text-transform: uppercase; } .product-showcase { padding-block: clamp(2.8rem, 5vw, 4.5rem); overflow: hidden; border-bottom: 1px solid rgba(7, 52, 99, 0.14); background: linear-gradient(rgba(7, 52, 99, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(7, 52, 99, 0.045) 1px, transparent 1px), #e9eff4; background-size: 3.5rem 3.5rem; } .product-showcase__header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.72fr); gap: 2rem; align-items: end; margin-bottom: 1.75rem; } .product-showcase__header h2 { max-width: 19ch; margin: 0; color: var(--navy-deep); } .product-showcase__header > p { max-width: 42rem; margin: 0; color: var(--ink-soft); } .product-showcase__rail { display: grid; grid-auto-columns: minmax(16.5rem, 21rem); grid-auto-flow: column; gap: 0.9rem; padding: 0.2rem 0 1.15rem; overflow-x: auto; overflow-y: hidden; overscroll-behavior-inline: contain; scrollbar-color: var(--cobalt) rgba(7, 52, 99, 0.12); scrollbar-width: thin; scroll-padding-inline: 0.2rem; scroll-snap-type: inline mandatory; } .product-showcase__card { position: relative; overflow: hidden; border: 1px solid rgba(7, 52, 99, 0.15); border-top: 3px solid var(--signal); background: rgba(255, 255, 255, 0.9); box-shadow: 0 0.7rem 2rem rgba(4, 20, 43, 0.08); scroll-snap-align: start; } .product-showcase__card > a { display: block; height: 100%; } .product-showcase__image { position: relative; aspect-ratio: 16 / 9; margin: 0; overflow: hidden; border-bottom: 1px solid rgba(7, 52, 99, 0.12); background: radial-gradient(circle at 68% 28%, rgba(18, 101, 195, 0.18), transparent 42%), linear-gradient(145deg, #f7fafc, #dce6ef); } .product-showcase__image::after { position: absolute; inset: 0; border: 1px solid rgba(255, 255, 255, 0.5); content: ""; pointer-events: none; } .product-showcase__image img { width: 100%; height: 100%; padding: clamp(0.65rem, 1.8vw, 1.15rem); object-fit: contain; transition: transform 220ms cubic-bezier(0.2, 0, 0, 1); } .product-showcase__zoom { position: relative; display: block; width: 100%; padding: 0; border: 0; color: inherit; background: transparent; cursor: zoom-in; text-align: left; } .product-showcase__zoom:focus-visible { outline: 3px solid var(--signal); outline-offset: -3px; } .product-showcase--gallery .product-showcase__image img { padding: 0; object-fit: cover; } .project-lightbox { width: min(94vw, 92rem); max-width: none; height: min(92vh, 64rem); max-height: none; padding: 0; border: 1px solid rgba(255, 255, 255, 0.22); color: var(--white); background: #030d1d; box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.58); } .project-lightbox::backdrop { background: rgba(1, 8, 18, 0.88); backdrop-filter: blur(0.35rem); } .project-lightbox figure { display: grid; grid-template-rows: minmax(0, 1fr) auto; height: 100%; margin: 0; } .project-lightbox img { width: 100%; height: 100%; min-height: 0; padding: clamp(1rem, 3vw, 2.5rem); object-fit: contain; } .project-lightbox figcaption { padding: 0.9rem 4.5rem 1rem 1.25rem; border-top: 1px solid rgba(255, 255, 255, 0.14); font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; } .project-lightbox__close { position: absolute; z-index: 2; top: 0.75rem; right: 0.75rem; display: grid; width: 2.75rem; height: 2.75rem; padding: 0; place-items: center; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 50%; color: var(--white); background: rgba(3, 19, 40, 0.9); cursor: pointer; font-size: 1.7rem; line-height: 1; } .project-lightbox__close:hover, .project-lightbox__close:focus-visible { color: var(--navy-deep); background: var(--signal); } .product-showcase__card:hover .product-showcase__image img, .product-showcase__card:focus-within .product-showcase__image img { transform: translateY(-0.2rem) scale(1.025); } .product-showcase__body { padding: 1rem 1.1rem 1.15rem; } .product-showcase__body .eyebrow { margin-bottom: 0.45rem; } .product-showcase__body h3, .product-showcase__body .card-heading { margin: 0; color: var(--navy-deep); font-size: 1.2rem; } .product-showcase__body > p:not(.eyebrow):not(.card-heading) { min-height: 2.7em; margin: 0.5rem 0 0; color: var(--ink-soft); font-size: 0.9rem; } .product-showcase__body .index-card__link { display: inline-block; margin-top: 0.8rem; } @media (min-width: 961px) { .product-showcase__rail--fit { grid-template-columns: repeat(var(--product-count), minmax(0, 1fr)); grid-auto-columns: auto; grid-auto-flow: row; overflow-x: visible; } } .page-strip { color: var(--white); background: var(--cobalt); } .page-strip__grid { display: grid; grid-template-columns: repeat(4, 1fr); } .page-strip__item { min-height: 8.5rem; padding: 1.55rem; border-right: 1px solid rgba(255, 255, 255, 0.18); } .page-strip__item:last-child { border-right: 0; } .page-strip__item strong { display: block; margin-bottom: 0.25rem; color: var(--signal); font-family: var(--font-display); font-size: 1.65rem; line-height: 1; } .page-strip__label { display: block; color: rgba(255, 255, 255, 0.75); font-size: 0.9rem; } .page-strip__number, .page-strip__suffix { color: inherit; font: inherit; } .page-strip__suffix { margin-left: 0.15em; } .page-section { position: relative; isolation: isolate; padding-block: clamp(5rem, 9vw, 9rem); overflow: hidden; background: linear-gradient(rgba(7, 52, 99, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(7, 52, 99, 0.035) 1px, transparent 1px), var(--white); background-size: 4rem 4rem; } .page-section::before, .page-section::after { position: absolute; z-index: -1; border-radius: 50%; content: ""; pointer-events: none; } .page-section::before { top: -14rem; right: -12rem; width: 30rem; aspect-ratio: 1; border: 1px solid rgba(11, 78, 162, 0.1); box-shadow: 0 0 0 4rem rgba(11, 78, 162, 0.025), 0 0 0 8rem rgba(11, 78, 162, 0.018); } .page-section::after { bottom: -12rem; left: -8rem; width: 24rem; aspect-ratio: 1; opacity: 0.62; background: radial-gradient(circle, rgba(244, 200, 61, 0.12), transparent 66%); filter: blur(1rem); } .page-section--mist { background: radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.9), transparent 20rem), linear-gradient(125deg, rgba(11, 78, 162, 0.04), transparent 42%), #eaf0f5; } .page-section--dark { color: var(--white); background: radial-gradient(circle at 90% 0, rgba(18, 102, 195, 0.28), transparent 25rem), var(--navy); } .page-section__intro { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(18rem, 0.45fr); gap: clamp(2rem, 7vw, 7rem); align-items: end; margin-bottom: var(--space-7); } .page-section__intro h2 { max-width: 16ch; margin-bottom: 0; } .page-section__intro p { max-width: 38rem; margin-bottom: 0; color: var(--ink-soft); } .page-section--dark .page-section__intro p { color: rgba(255, 255, 255, 0.68); } .page-section--dark .prose p, .page-section--dark .prose li { color: rgba(255, 255, 255, 0.76); } .page-section--dark .prose blockquote { color: var(--white); } .page--privacy .page-section::before, .page--privacy .page-section::after { display: none; } .index-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid var(--line); background: var(--line); } .index-card { position: relative; isolation: isolate; min-height: 25rem; padding: 2rem; overflow: hidden; background: var(--white); } .index-card::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0; background: radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 50%), rgba(18, 102, 195, 0.16), transparent 45%); transition: opacity 220ms ease; } .index-card::after { position: absolute; inset: 1rem; z-index: 0; border: 1px solid transparent; content: ""; pointer-events: none; transition: border-color 220ms ease, box-shadow 220ms ease; } .index-card:hover::after { border-color: rgba(244, 200, 61, 0.54); box-shadow: inset 0 0 2rem rgba(244, 200, 61, 0.06); } .index-card--visual { color: var(--white); background: linear-gradient(180deg, rgba(3, 13, 32, 0.3), rgba(3, 13, 32, 0.96) 79%), var(--card-image) center / cover no-repeat, var(--navy); } .index-card--visual::before { opacity: 0.54; background: radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 50%), rgba(244, 200, 61, 0.25), transparent 32%), linear-gradient(125deg, transparent 42%, rgba(255, 255, 255, 0.12), transparent 58%); } .index-card--visual:hover::before { opacity: 0.82; } .index-card--visual .index-card__number { color: var(--signal); } .index-card--visual p { color: rgba(255, 255, 255, 0.72); } .index-card--visual .index-card__link { color: var(--white); text-decoration-color: rgba(255, 255, 255, 0.4); } .index-card:hover::before { opacity: 1; } .index-card > * { position: relative; z-index: 1; } .index-card__number { display: block; margin-bottom: 5rem; color: var(--cobalt); font-family: var(--font-mono); font-size: 0.76rem; } .index-card h3, .index-card .card-heading { max-width: 15ch; margin-bottom: 1rem; font-size: 1.55rem; } .index-card p:not(.card-heading) { color: var(--muted); } .index-card__link { display: inline-flex; margin-top: 1rem; color: var(--cobalt); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(11, 78, 162, 0.3); text-underline-offset: 0.3rem; } .index-card__link::after { content: " ↗"; } .index-grid > .index-card:last-child:nth-child(3n + 1) { grid-column: 1 / -1; min-height: 16rem; } .media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .media-card { position: relative; isolation: isolate; overflow: hidden; color: var(--white); background: var(--navy); border-radius: var(--radius-md); border: 1px solid rgba(255, 255, 255, 0.09); box-shadow: 0 1.4rem 3.5rem rgba(3, 13, 32, 0.12); transition: transform 260ms var(--ease-out), border-color 260ms ease, box-shadow 260ms ease; } .media-card::after { position: absolute; inset: -35%; z-index: 2; opacity: 0; background: linear-gradient(112deg, transparent 40%, rgba(255, 255, 255, 0.2) 49%, transparent 57%); content: ""; pointer-events: none; transform: translateX(-42%); transition: opacity 180ms ease, transform 650ms var(--ease-out); } .media-card:hover { border-color: rgba(244, 200, 61, 0.48); box-shadow: 0 1.8rem 4rem rgba(3, 13, 32, 0.2), 0 0 0 1px rgba(244, 200, 61, 0.12); transform: translateY(-0.35rem); } .media-card:hover::after { opacity: 0.6; transform: translateX(42%); } .media-card__image { aspect-ratio: 1.35; overflow: hidden; } .media-card__image img { width: 100%; height: 112%; object-fit: cover; transition: transform 650ms var(--ease-out); } .media-card:hover img { transform: scale(1.035); } .media-card__body { padding: 1.5rem; } .media-card__body h3, .media-card__body .card-heading { margin-bottom: 0.75rem; font-size: 1.35rem; } .media-card__body p:not(.card-heading) { color: rgba(255, 255, 255, 0.66); font-size: 0.95rem; } .media-card .index-card__link { position: relative; z-index: 3; color: var(--white); text-decoration-color: rgba(255, 255, 255, 0.42); } .media-card .button--outline, .spec-panel .button--outline { color: var(--white); border-color: rgba(255, 255, 255, 0.38); } .detail-grid { display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(19rem, 0.28fr); gap: clamp(3rem, 8vw, 8rem); align-items: start; } .prose { max-width: 48rem; } .prose h2 { margin-top: 4.5rem; font-size: clamp(2rem, 4vw, 3.3rem); } .prose h2:first-child { margin-top: 0; } .prose h3 { margin-top: 2.2rem; font-size: 1.4rem; } .prose p, .prose li { color: var(--ink-soft); } .prose ul { padding-left: 1.2rem; } .prose blockquote { margin: 3rem 0; padding: 1.5rem 0 1.5rem 1.5rem; border-left: 0.35rem solid var(--signal); color: var(--navy); font-family: var(--font-display); font-size: 1.4rem; line-height: 1.25; } .spec-panel { position: sticky; top: calc(var(--header-height) + 1.5rem); padding: 1.75rem; color: var(--white); background: var(--navy); box-shadow: 0.8rem 0.8rem 0 var(--signal); } .spec-panel h2 { margin-bottom: 1.5rem; font-size: 1.35rem; letter-spacing: -0.02em; } .spec-panel dl { margin: 0; } .spec-panel div { display: grid; grid-template-columns: 0.7fr 1fr; gap: 1rem; padding: 0.85rem 0; border-top: 1px solid rgba(255, 255, 255, 0.16); } .spec-panel dt { color: rgba(255, 255, 255, 0.58); font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; } .spec-panel dd { font-size: 0.9rem; } .procurement-panel { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 2rem; align-items: center; padding: clamp(1.5rem, 4vw, 2.5rem); border: 1px solid var(--line); border-top: 3px solid var(--signal); background: var(--white); box-shadow: 0.7rem 0.7rem 0 rgba(7, 27, 53, 0.12); } .procurement-panel__badge { display: grid; place-items: center; min-height: 8rem; background: #f7f9fc; } .procurement-panel__badge img { display: block; width: 7rem; height: 7rem; object-fit: contain; } .procurement-panel__body h2 { margin-bottom: 0.75rem; color: var(--navy); font-size: clamp(1.45rem, 3vw, 2.15rem); } .procurement-panel__body > p:not(.eyebrow) { max-width: 62rem; color: var(--ink-soft); } @media (max-width: 560px) { .procurement-panel { grid-template-columns: 1fr; gap: 1.25rem; } .procurement-panel__badge { justify-self: start; width: 8rem; } } .engineering-overview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.38fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: start; } .family-installation__label { position: absolute; z-index: 1; display: grid; gap: 0.25rem; padding: 0.5rem 0.75rem; color: var(--navy); border: 1px solid rgba(30, 61, 107, 0.18); background: rgba(255, 255, 255, 0.92); box-shadow: 0 0.45rem 1.25rem rgba(7, 27, 53, 0.12); font-family: var(--font-display); font-size: 0.76rem; font-weight: 700; line-height: 1.1; } .family-installation__label small { color: var(--muted); font-family: var(--font-body); font-size: 0.61rem; font-weight: 600; line-height: 1.2; } .family-installation__label--cool { top: 1rem; left: 1rem; background: rgba(235, 248, 252, 0.94); } .family-installation__label--hot { right: 1rem; bottom: 1rem; background: rgba(255, 244, 236, 0.94); } /* RT-IL-150C installation story: three editorial beats, each with a distinct visual role. */ .family-installation__story { display: grid; } .family-installation__lead { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; } .family-installation__lead-copy { position: relative; z-index: 2; grid-column: 1 / span 5; grid-row: 1; padding: 2rem 2rem 2rem 0; background: #e9eff4; } .family-installation__lead-copy h2 { max-width: 13ch; margin: 0.75rem 0 1.5rem; color: var(--navy); font-family: var(--font-display); font-size: clamp(2.35rem, 4.5vw, 4.75rem); line-height: 0.98; letter-spacing: -0.045em; text-wrap: balance; } .family-installation__lead-copy > p:last-child { max-width: 38rem; margin: 0; color: var(--ink-soft); font-size: clamp(1rem, 1.5vw, 1.15rem); line-height: 1.65; text-wrap: pretty; } .family-installation__opening { min-width: 0; margin: 0; grid-column: 6 / -1; grid-row: 1; } .family-installation__opening-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-top: 3px solid var(--signal); background: #dfe7ee; } .family-installation__opening-media > img, .family-installation__field-media > img, .family-installation__hardware-media > img { display: block; width: 100%; height: 100%; } .family-installation__opening-media > img, .family-installation__field-media > img { object-fit: cover; } .family-installation__opening-caption { display: grid; grid-template-columns: minmax(12rem, 0.7fr) minmax(0, 1.3fr); gap: 1.5rem; align-items: start; padding: 1.5rem 0 0 2rem; } .family-installation__opening-caption strong, .family-installation__hardware-caption strong { color: var(--navy); font-family: var(--font-display); font-weight: 700; line-height: 1.15; text-wrap: balance; } .family-installation__opening-caption strong { font-size: clamp(1.2rem, 1.8vw, 1.5rem); } .family-installation__opening-caption span, .family-installation__hardware-caption span { color: var(--ink-soft); line-height: 1.6; text-wrap: pretty; } .family-installation__field { margin: 6rem 0 0; } .family-installation__field-media { aspect-ratio: 16 / 9; overflow: hidden; border-top: 3px solid var(--signal); background: #1b2d42; } .family-installation__field-caption { display: grid; grid-template-columns: minmax(16rem, 0.65fr) minmax(0, 1.35fr); gap: 2rem; align-items: center; padding: 2rem clamp(1.5rem, 4vw, 3rem); background: var(--navy); } .family-installation__field-caption strong { color: var(--white); font-family: var(--font-display); font-size: clamp(1.35rem, 2vw, 1.75rem); font-weight: 700; line-height: 1.12; text-wrap: balance; } .family-installation__field-caption span { max-width: 56ch; color: rgba(255, 255, 255, 0.78); line-height: 1.6; text-wrap: pretty; } .family-installation__hardware { display: grid; width: 100%; margin: 4rem 0 0; padding: 1.5rem 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); grid-template-columns: minmax(0, 1fr) 12rem; gap: 2rem; align-items: center; } .family-installation__hardware-caption { display: grid; gap: 0.75rem; } .family-installation__hardware-caption strong { font-size: clamp(1.15rem, 1.7vw, 1.4rem); } .family-installation__hardware-caption span { max-width: 48ch; } .family-installation__hardware-media { aspect-ratio: 4 / 3; overflow: hidden; background: transparent; } .family-installation__hardware-media > img { padding: 0; object-fit: contain; } @media (max-width: 820px) { .family-installation__lead { grid-template-columns: repeat(8, minmax(0, 1fr)); } .family-installation__lead-copy { grid-column: 1 / span 4; padding-right: 1.5rem; } .family-installation__lead-copy h2 { font-size: clamp(2.35rem, 7vw, 4rem); } .family-installation__opening { grid-column: 5 / -1; } .family-installation__opening-caption { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; padding-left: 1.5rem; } .family-installation__field-caption { grid-template-columns: minmax(13rem, 0.7fr) minmax(0, 1.3fr); } .family-installation__hardware { width: min(100%, 48rem); } } @media (max-width: 560px) { .family-installation__lead { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; } .family-installation__lead-copy, .family-installation__opening { grid-column: 1; grid-row: auto; } .family-installation__lead-copy { padding: 0; background: transparent; } .family-installation__lead-copy h2 { max-width: 11ch; margin-bottom: 1rem; font-size: clamp(2.35rem, 13vw, 3.4rem); } .family-installation__opening-caption { padding: 1rem 0 0; } .family-installation__label { max-width: 9.5rem; padding: 0.5rem; font-size: 0.75rem; } .family-installation__label small { font-size: 0.625rem; line-height: 1.25; } .family-installation__label--cool { top: 0.5rem; left: 0.5rem; } .family-installation__label--hot { right: 0.5rem; bottom: 0.5rem; } .family-installation__field { width: calc(100% + 2rem); margin-top: 4rem; margin-left: -1rem; } .family-installation__field-media { aspect-ratio: 4 / 3; } .family-installation__field-caption { grid-template-columns: minmax(0, 1fr); gap: 0.75rem; padding: 1.5rem; } .family-installation__hardware { width: 100%; margin-top: 4rem; padding: 1rem 0; grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; } .family-installation__hardware-caption { grid-column: 2; grid-row: 1; } .family-installation__hardware-media { grid-column: 1; grid-row: 1; } .family-installation__hardware-media > img { padding: 0.5rem; } } .spec-chip-grid { display: grid; margin-top: 2.5rem; border: 1px solid var(--line); background: var(--line); grid-template-columns: repeat(2, 1fr); gap: 1px; } .spec-chip-grid > div { min-height: 7rem; padding: 1.15rem; background: linear-gradient(135deg, rgba(11, 78, 162, 0.04), transparent 68%), var(--white); } .spec-chip-grid span, .document-panel dt, .dimension-panel dt { display: block; margin-bottom: 0.6rem; color: var(--muted); font-family: var(--font-mono); font-size: 0.67rem; letter-spacing: 0.08em; text-transform: uppercase; } .spec-chip-grid strong { color: var(--navy); font-family: var(--font-display); font-size: 1.05rem; } .document-panel, .dimension-panel { position: relative; padding: clamp(1.5rem, 3vw, 2.25rem); color: var(--white); border: 1px solid rgba(255, 255, 255, 0.12); background: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px), var(--navy); background-size: 2.5rem 2.5rem; box-shadow: 0.7rem 0.7rem 0 var(--signal); } .document-panel::before, .dimension-panel::before { position: absolute; top: -1px; left: -1px; width: 42%; height: 3px; background: var(--signal); content: ""; } .document-panel h2, .dimension-panel h2 { margin-bottom: 1rem; font-size: clamp(1.65rem, 3vw, 2.25rem); } .document-panel > p:not(.eyebrow), .dimension-panel > p { color: rgba(255, 255, 255, 0.7); } .document-panel dl, .dimension-panel dl { margin: 1.75rem 0; } .document-panel dl > div, .dimension-panel dl > div { display: grid; padding: 0.8rem 0; border-top: 1px solid rgba(255, 255, 255, 0.14); grid-template-columns: 0.8fr 1fr; gap: 1rem; } .document-panel dt, .dimension-panel dt { margin: 0; color: rgba(255, 255, 255, 0.5); } .document-panel dd, .dimension-panel dd { font-size: 0.9rem; } .document-panel .button { width: 100%; margin-top: 0.25rem; } .document-panel small { display: block; margin-top: 1rem; color: rgba(255, 255, 255, 0.56); font-size: 0.72rem; line-height: 1.55; } .article-application-note { margin-top: clamp(2.5rem, 6vw, 4rem); } .article-application-note h3 { margin-top: 1.75rem; color: var(--white); } .article-application-note ul { margin-block: 1.25rem 1.75rem; } .article-application-note li { color: rgba(255, 255, 255, 0.74); } .article-application-note li + li { margin-top: 0.5rem; } .engineering-table-shell { max-width: 100%; overflow-x: auto; border: 1px solid #b9c6d1; background: var(--white); box-shadow: 0 1.2rem 3rem rgba(3, 13, 32, 0.08); scrollbar-color: var(--cobalt) #dce4eb; } .engineering-table { width: 100%; min-width: 58rem; border-collapse: collapse; color: var(--ink); } .engineering-table caption { padding: 1rem 1.15rem; color: var(--navy); background: #dfe7ee; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-align: left; text-transform: uppercase; } .engineering-table th, .engineering-table td { padding: 1rem 1.15rem; border-right: 1px solid #d4dde5; border-bottom: 1px solid #d4dde5; text-align: left; vertical-align: top; } .engineering-table thead th { color: var(--navy); background: #edf2f6; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; } .engineering-table tbody th { color: var(--navy); font-family: var(--font-mono); font-size: 0.78rem; white-space: nowrap; } .engineering-table td { color: var(--ink-soft); font-size: 0.88rem; } .product-data-section .engineering-table-shell { border-color: rgba(255, 255, 255, 0.17); background: #071b35; box-shadow: 0 1.4rem 3.5rem rgba(0, 0, 0, 0.25); } .product-data-section .engineering-table caption, .product-data-section .engineering-table thead th { color: var(--signal); background: #0a2a50; } .product-data-section .engineering-table th, .product-data-section .engineering-table td { border-color: rgba(255, 255, 255, 0.12); } .product-data-section .engineering-table tbody th { color: var(--white); } .product-data-section .engineering-table td { color: rgba(255, 255, 255, 0.76); } .table-note { max-width: 55rem; margin: 1.25rem 0 0; color: rgba(255, 255, 255, 0.62); font-size: 0.8rem; } .engineering-detail-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.38fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: start; } .engineering-detail-grid > div > h2 { max-width: 15ch; margin-bottom: 2.25rem; } .spec-panel__links { display: grid; margin-top: 1.25rem; } .spec-panel__links a { padding: 0.85rem 0; color: var(--white); border-top: 1px solid rgba(255, 255, 255, 0.15); font-size: 0.8rem; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(244, 200, 61, 0.55); text-underline-offset: 0.3rem; } .spec-panel__links a:hover { color: var(--signal); } .contact-grid { display: grid; grid-template-columns: 0.7fr 1fr; gap: clamp(2rem, 7vw, 7rem); } .contact-cards { display: grid; gap: 1px; align-self: start; background: var(--line); border: 1px solid var(--line); } .contact-card { padding: 1.5rem; background: var(--white); } .contact-card span { display: block; margin-bottom: 0.35rem; color: var(--muted); font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; } /* Quote panel: the contact form reads as one designed instrument panel — navy masthead over a white field deck — rather than a heading floating above stacked inputs. The heading block sits OUTSIDE
on purpose: pages.js replaces the form's innerHTML on success, so anything inside it disappears with the fields. */ .quote-panel { align-self: start; background: var(--white); border: 1px solid var(--line); box-shadow: 0 26px 60px -40px rgba(6, 24, 47, 0.5); } .quote-panel__head { position: relative; padding: clamp(1.5rem, 3vw, 2.15rem) clamp(1.35rem, 3vw, 2.25rem) clamp(1.35rem, 2.6vw, 1.8rem); background: var(--navy); border-bottom: 3px solid var(--signal); overflow: hidden; } .quote-panel__head::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 2.25rem 2.25rem; pointer-events: none; } /* Registration mark — the square technical language the rest of the site uses. */ .quote-panel__head::after { content: ""; position: absolute; top: 1rem; right: 1rem; width: 1.6rem; height: 1.6rem; border-top: 2px solid rgba(244, 200, 61, 0.5); border-right: 2px solid rgba(244, 200, 61, 0.5); pointer-events: none; } .quote-panel__head > * { position: relative; z-index: 1; } .quote-panel__head h2 { max-width: 17ch; margin: 0.4rem 0 0; color: var(--white); font-size: clamp(1.55rem, 2.4vw, 2rem); line-height: 1.14; text-wrap: balance; } .quote-panel__note { max-width: 44ch; margin: 0.9rem 0 0; color: rgba(255, 255, 255, 0.66); font-size: 0.86rem; line-height: 1.6; } .quote-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem 1.25rem; padding: clamp(1.35rem, 3vw, 2.25rem); background: var(--white); } .form-field { display: grid; gap: 0.55rem; align-content: start; } .form-field--wide { grid-column: 1 / -1; } .form-field label { display: flex; align-items: center; gap: 0.6rem; min-height: 1.35rem; } /* Instrument labelling: mono caps, matched to the contact cards and hero art label. */ .form-field__name { font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink); } .form-field__required, .form-field__optional { margin-left: auto; padding: 0.15rem 0.45rem; font-family: var(--font-mono); font-size: 0.6rem; font-weight: 600; line-height: 1.5; letter-spacing: 0.1em; text-transform: uppercase; } .form-field__required { color: var(--cobalt); background: var(--blue-light); border: 1px solid rgba(11, 78, 162, 0.24); } .form-field__optional { color: var(--ink-soft); background: var(--paper); border: 1px solid var(--line); } .form-field input, .form-field select, .form-field textarea { width: 100%; min-height: 3.35rem; padding: 0.85rem 1rem; font: inherit; font-size: 0.95rem; color: var(--ink); background: #fafcfd; border: 1px solid var(--line); border-radius: 0; transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out), background-color 160ms var(--ease-out); } .form-field input:hover, .form-field select:hover, .form-field textarea:hover { background: var(--white); border-color: #93a3b4; } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; background: var(--white); border-color: var(--cobalt); box-shadow: 0 0 0 3px rgba(11, 78, 162, 0.18); } /* Keyboard focus keeps the site-wide signal outline on top of the cobalt ring; the outline is only suppressed for the pointer case above. */ .form-field input:focus-visible, .form-field select:focus-visible, .form-field textarea:focus-visible { outline: 3px solid var(--signal); outline-offset: 4px; } .form-field input:user-invalid, .form-field textarea:user-invalid { background: #fdf6f5; border-color: #b3261e; } .form-field input:user-invalid:focus, .form-field textarea:user-invalid:focus { box-shadow: 0 0 0 3px rgba(179, 38, 30, 0.18); } .form-field input::placeholder, .form-field textarea::placeholder { color: var(--muted); } .form-select { position: relative; } .form-select::after { content: ""; position: absolute; right: 1.05rem; top: 50%; width: 0.5rem; height: 0.5rem; border-right: 2px solid var(--cobalt); border-bottom: 2px solid var(--cobalt); transform: translateY(-70%) rotate(45deg); pointer-events: none; } .form-select select { appearance: none; padding-right: 2.6rem; cursor: pointer; } .form-field textarea { min-height: 10rem; line-height: 1.6; resize: vertical; } .quote-form .cf-turnstile { grid-column: 1 / -1; padding-top: 1.35rem; border-top: 1px solid var(--line); } .quote-form__submit { width: 100%; min-height: 3.6rem; justify-content: center; font-size: 0.92rem; box-shadow: 0 14px 30px -18px rgba(160, 122, 12, 0.85); } .quote-form__submit::after { content: ""; width: 0.45rem; height: 0.45rem; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); transition: transform 160ms var(--ease-out); } .quote-form__submit[disabled] { opacity: 0.65; cursor: wait; } .quote-form__privacy { grid-column: 1 / -1; max-width: 46ch; margin: -0.4rem auto 0; color: var(--ink-soft); font-size: 0.8rem; line-height: 1.6; text-align: center; text-wrap: pretty; } @media (hover: hover) and (pointer: fine) { .quote-form__submit:hover::after { transform: translateX(0.2rem) rotate(45deg); } } @media (max-width: 640px) { .quote-form { grid-template-columns: 1fr; } /* iOS Safari zooms the viewport on focus for any control under 16px. */ .form-field input, .form-field select, .form-field textarea { font-size: 1rem; } } @media (prefers-reduced-motion: reduce) { .form-field input, .form-field select, .form-field textarea, .quote-form__submit::after { transition: none; } } .legal-shell { max-width: 52rem; margin-inline: auto; } .legal-meta { margin-bottom: 3rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); color: var(--muted); font-family: var(--font-mono); font-size: 0.78rem; } .article-hero .interior-hero__grid { grid-template-columns: minmax(0, 0.9fr) minmax(22rem, 0.7fr); } .article-byline { display: flex; flex-wrap: wrap; gap: 1rem; color: rgba(255, 255, 255, 0.66); font-family: var(--font-mono); font-size: 0.78rem; text-transform: uppercase; } .article-body img { width: 100%; margin-block: 2rem; border-radius: var(--radius-md); } .empty-state { position: relative; isolation: isolate; min-height: 100vh; padding: calc(var(--header-height) + 5rem) var(--gutter) 6rem; overflow: hidden; color: var(--white); background: radial-gradient(circle at 70% 34%, rgba(18, 102, 195, 0.42), transparent 29rem), linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px), var(--navy-deep); background-size: auto, 4rem 4rem, 4rem 4rem, auto; } .empty-state__inner { position: relative; z-index: 2; width: min(100%, 72rem); margin-inline: auto; } .empty-state__message { max-width: 48rem; } .empty-state__code { margin: 1rem 0; color: var(--signal); font-family: var(--font-mono); font-size: clamp(4rem, 18vw, 12rem); font-weight: 500; line-height: 0.8; } .empty-state h1 { max-width: 12ch; margin: 1.5rem 0 1rem; font-size: clamp(2rem, 5vw, 4rem); } .empty-state p { max-width: 34rem; color: rgba(255, 255, 255, 0.7); } .empty-state__ring { position: absolute; top: 10%; right: -12rem; z-index: 0; width: 42rem; aspect-ratio: 1; border: 1px solid rgba(244, 200, 61, 0.34); border-radius: 50%; box-shadow: 0 0 0 5rem rgba(14, 86, 167, 0.09), 0 0 0 10rem rgba(14, 86, 167, 0.045); } .empty-state__routes { display: grid; margin-top: 4rem; border: 1px solid rgba(255, 255, 255, 0.14); grid-template-columns: repeat(4, 1fr); } .empty-state__routes a { min-height: 10rem; padding: 1.35rem; color: var(--white); border-right: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.035); transition: color 180ms ease, background 180ms ease, transform 180ms var(--ease-out); } .empty-state__routes a:last-child { border-right: 0; } .empty-state__routes a:hover { color: var(--navy-deep); background: var(--signal); transform: translateY(-0.2rem); } .empty-state__routes span, .empty-state__routes strong, .empty-state__routes small { display: block; } .empty-state__routes span { margin-bottom: 2.2rem; color: var(--signal); font-family: var(--font-mono); font-size: 0.72rem; } .empty-state__routes a:hover span { color: var(--navy-deep); } .empty-state__routes strong { margin-bottom: 0.3rem; font-family: var(--font-display); font-size: 1.08rem; } .empty-state__routes small { color: rgba(255, 255, 255, 0.62); font-size: 0.78rem; } .empty-state__routes a:hover small { color: rgba(3, 13, 32, 0.72); } .page-faq { background: radial-gradient(circle at 86% 12%, rgba(17, 101, 194, 0.12), transparent 24rem), #edf2f6; } .page-faq__grid { display: grid; grid-template-columns: minmax(0, 0.56fr) minmax(22rem, 0.78fr); gap: clamp(3rem, 8vw, 8rem); align-items: start; } .page-faq__grid > div:first-child { position: sticky; top: calc(var(--header-height) + 2rem); } .page-faq__grid h2 { max-width: 12ch; } .page-faq__grid > div:first-child > p:last-child { max-width: 30rem; color: var(--ink-soft); } .page-faq__list { border-top: 1px solid #bdc9d4; } .page-faq details { border-bottom: 1px solid #bdc9d4; } .page-faq summary { display: grid; min-height: 5.5rem; align-items: center; color: var(--navy); cursor: pointer; font-family: var(--font-display); font-size: clamp(1.05rem, 2vw, 1.35rem); font-weight: 700; grid-template-columns: 1fr auto; gap: 1rem; list-style: none; } .page-faq summary::-webkit-details-marker { display: none; } .page-faq summary span { color: var(--cobalt); font-family: var(--font-mono); transition: transform 180ms ease; } .page-faq details[open] summary span { transform: rotate(45deg); } .page-faq details p { max-width: 44rem; padding: 0 3rem 1.5rem 0; color: var(--ink-soft); } .page-cta { position: relative; isolation: isolate; padding-block: clamp(4rem, 8vw, 7rem); overflow: hidden; color: var(--white); background: radial-gradient(circle at 78% 34%, rgba(20, 108, 205, 0.42), transparent 25rem), linear-gradient(118deg, #04142b, #082a52 62%, #071b35); } .page-cta__grid { position: absolute; inset: 0; z-index: -2; opacity: 0.42; background: linear-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.055) 1px, transparent 1px); background-size: 3.5rem 3.5rem; mask-image: linear-gradient(90deg, #000, transparent 84%); } .page-cta__beam { position: absolute; top: 48%; right: -8%; z-index: -1; width: 62%; height: 1px; opacity: 0.75; background: linear-gradient(90deg, transparent, var(--signal), transparent); box-shadow: 0 0 1.2rem rgba(244, 200, 61, 0.45); transform: rotate(-13deg); transform-origin: center; } .page-cta__ring { position: absolute; z-index: -1; aspect-ratio: 1; border: 1px solid rgba(244, 200, 61, 0.28); border-radius: 50%; pointer-events: none; } .page-cta__ring--one { top: -16rem; right: -8rem; width: 39rem; box-shadow: 0 0 0 4rem rgba(15, 91, 179, 0.08), 0 0 0 8rem rgba(15, 91, 179, 0.045); } .page-cta__ring--two { right: 19%; bottom: -9rem; width: 17rem; opacity: 0.44; } .page-cta__inner { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center; } .page-cta h2 { max-width: 18ch; margin: 0; color: var(--white); } .page-cta p { max-width: 38rem; margin: 1rem 0 0; color: rgba(255, 255, 255, 0.7); } .page-cta__links { display: flex; flex-wrap: wrap; gap: 0.55rem 1.25rem; margin-top: 1.5rem; } .page-cta__links a { color: rgba(255, 255, 255, 0.86); font-size: 0.78rem; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(244, 200, 61, 0.55); text-underline-offset: 0.32rem; } .page-cta__links a:hover { color: var(--signal); } .index-card.index-card--visual p { color: rgba(255, 255, 255, 0.78); } @media (max-width: 960px) { .interior-hero__grid, .article-hero .interior-hero__grid, .detail-grid, .contact-grid, .engineering-overview, .engineering-detail-grid { grid-template-columns: 1fr; } .product-showcase__header { grid-template-columns: 1fr; gap: 0.8rem; } .hero-art { width: min(100%, 46rem); min-height: 0; } .index-grid, .media-grid { grid-template-columns: 1fr 1fr; } .index-grid > .index-card:last-child:nth-child(3n + 1) { grid-column: auto; } .page-strip__grid { grid-template-columns: 1fr 1fr; } .page-strip__item:nth-child(2) { border-right: 0; } .spec-panel { position: static; } .page-faq__grid { grid-template-columns: 1fr; } .page-faq__grid > div:first-child { position: static; } .empty-state__routes { grid-template-columns: 1fr 1fr; } .empty-state__routes a:nth-child(2) { border-right: 0; } .empty-state__routes a:nth-child(-n + 2) { border-bottom: 1px solid rgba(255, 255, 255, 0.14); } .document-panel, .dimension-panel { max-width: 40rem; } } @media (max-width: 640px) { .product-showcase__rail { grid-auto-columns: minmax(15.5rem, 82vw); } .interior-page { font-size: 16px; } .interior-hero { min-height: auto; padding-top: calc(var(--header-height) + 3rem); } .interior-hero h1 { font-size: clamp(2.65rem, 13vw, 4.3rem); } .hero-art { min-height: 0; } .hero-art__label { right: 0; } .page-section__intro, .page-cta__inner, .quote-form { grid-template-columns: 1fr; } .page-section__intro { align-items: start; } .index-grid, .media-grid { grid-template-columns: 1fr; } .index-grid > .index-card:last-child:nth-child(3n + 1) { grid-column: auto; } .form-field--wide { grid-column: auto; } .page-strip__item { min-height: 7rem; padding: 1.1rem; } .spec-chip-grid { grid-template-columns: 1fr; } .engineering-table { min-width: 49rem; } .hero-art__label { bottom: 1rem; width: min(14rem, 82%); } .hero-art__reticle { width: 4.5rem; } .empty-state { padding-top: calc(var(--header-height) + 3.5rem); } .empty-state__routes { grid-template-columns: 1fr; } .empty-state__routes a, .empty-state__routes a:nth-child(2) { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.14); } .empty-state__routes a:last-child { border-bottom: 0; } } @media (prefers-reduced-motion: reduce) { [data-magnetic], .media-card img { transition: none; transform: none !important; } .hero-art__scan, .hero-art__reticle, .interior-hero__laser, .page-cta__beam, .page-cta__ring { animation: none !important; transform: none !important; } } /* ============================================================================ Product banner — one verified family image at full size, followed by the documented configurations as a list. Replaces the pattern of repeating a single image across N cards. Pairs with productBanner() in components.mjs. ========================================================================= */ .product-banner { padding-block: clamp(2.8rem, 5vw, 4.5rem); border-bottom: 1px solid rgba(7, 52, 99, 0.14); background: linear-gradient(rgba(7, 52, 99, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(7, 52, 99, 0.045) 1px, transparent 1px), #e9eff4; background-size: 3.5rem 3.5rem; } .product-banner__figure { position: relative; margin: 0 0 1.75rem; overflow: hidden; border: 1px solid rgba(7, 52, 99, 0.14); background: radial-gradient(circle at 68% 28%, rgba(18, 101, 195, 0.18), transparent 42%), linear-gradient(145deg, #f7fafc, #dce6ef); } /* Two failure modes to avoid at once: - width:100% alone upscales a ~900px render into a 1200px container (the defect the card grid had, at banner scale). - width:auto alone reserves no space while the lazy image is still loading, so the section below it jumps on load. --banner-max is emitted per image by productBanner() from the intrinsic width recorded in content-source/product-image-map.json, so the box is reserved AND never exceeds 1:1. */ .product-banner__figure img { display: block; width: 100%; max-width: min(100%, var(--banner-max, 100%)); height: auto; margin-inline: auto; object-fit: contain; } .product-banner__figure figcaption { padding: 0.85rem 1.15rem; border-top: 1px solid rgba(7, 52, 99, 0.12); background: rgba(255, 255, 255, 0.62); color: rgba(7, 52, 99, 0.72); font-size: 0.85rem; } .product-banner__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; counter-reset: banner-item; } .product-banner__list li { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.9rem 1rem 0.9rem 2.4rem; position: relative; border: 1px solid rgba(7, 52, 99, 0.14); background: rgba(255, 255, 255, 0.72); counter-increment: banner-item; } .product-banner__list li::before { content: counter(banner-item, decimal-leading-zero); position: absolute; top: 0.9rem; left: 0.9rem; color: rgba(7, 52, 99, 0.42); font-size: 0.72rem; font-variant-numeric: tabular-nums; letter-spacing: 0.08em; } .product-banner__code { color: var(--navy, #073463); font-weight: 650; font-size: 0.98rem; letter-spacing: -0.01em; } .product-banner__detail { color: rgba(7, 52, 99, 0.7); font-size: 0.86rem; } .product-banner__meta { color: rgba(7, 52, 99, 0.9); font-size: 0.82rem; font-variant-numeric: tabular-nums; letter-spacing: 0.01em; } /* ============================================================================ Category comparison table + cross-links to sibling categories. ========================================================================= */ .comparison-table th[scope="row"] a { color: inherit; text-decoration-color: rgba(7, 52, 99, 0.35); text-underline-offset: 0.22em; } .comparison-table th[scope="row"] a:hover, .comparison-table th[scope="row"] a:focus-visible { color: var(--cobalt, #1265c3); text-decoration-color: currentColor; } .related-categories__block { margin-top: clamp(2rem, 4vw, 3rem); } .related-categories__block h3 { margin-bottom: 0.35rem; font-size: clamp(1.15rem, 1.8vw, 1.45rem); } .related-categories__block > p { max-width: 46rem; margin-bottom: 1.25rem; color: rgba(7, 52, 99, 0.72); } .related-categories { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 0.75rem; margin: 0; padding: 0; list-style: none; } .related-categories a { display: flex; flex-direction: column; gap: 0.3rem; height: 100%; padding: 1rem 1.1rem; border: 1px solid rgba(7, 52, 99, 0.16); background: rgba(255, 255, 255, 0.72); color: inherit; text-decoration: none; transition: border-color 0.2s ease, background-color 0.2s ease; } .related-categories a:hover, .related-categories a:focus-visible { border-color: var(--cobalt, #1265c3); background: #ffffff; } .related-categories strong { color: var(--navy, #073463); font-size: 0.98rem; } .related-categories span { color: rgba(7, 52, 99, 0.72); font-size: 0.86rem; line-height: 1.45; } @media (max-width: 640px) { .product-banner__figure img { max-height: 18rem; } .product-banner__list, .related-categories { grid-template-columns: 1fr; } } /* Source tables that split into design groups carry a single-cell label row (RT-IL publishes "Modular design" / "COB design"). Rendered as a spanning header so the columns stay aligned. */ .engineering-table__group th { padding-top: 1.15rem; border-bottom: 1px solid rgba(7, 52, 99, 0.18); color: var(--navy, #073463); font-size: 0.82rem; letter-spacing: 0.09em; text-align: left; text-transform: uppercase; } .page-section--dark .engineering-table__group th { border-bottom-color: rgba(255, 255, 255, 0.22); color: rgba(255, 255, 255, 0.86); } /* Media variant of the approved spec-panel: same frame, image instead of a list. Used on generated project and location pages where the source supplies a supporting photograph. */ .spec-panel--media { padding: 0; overflow: hidden; } .spec-panel--media img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; } /* ------------------------------------------------------------------ Blog hub: featured card + searchable archive (2026-07-30) */ .media-card--featured { margin-bottom: var(--space-5); } .media-card--featured > a { display: grid; grid-template-columns: 1.15fr 1fr; align-items: stretch; } .media-card--featured .media-card__image { height: 100%; min-height: 20rem; } .media-card--featured .media-card__image img { height: 100%; object-fit: cover; } .media-card--featured .media-card__body { display: flex; flex-direction: column; justify-content: center; gap: 0.85rem; padding: 2.5rem; } .media-card--featured .card-heading--featured { font-size: clamp(1.45rem, 2.4vw, 2rem); line-height: 1.08; } .blog-archive__search { display: grid; grid-template-columns: minmax(0, 34rem) auto; gap: 0.75rem 1.25rem; align-items: center; margin-bottom: var(--space-4); } .blog-archive__search-label { grid-column: 1 / -1; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy-deep); } .blog-archive__search input { width: 100%; padding: 0.85rem 1rem; font: inherit; font-size: 0.95rem; color: var(--navy-deep); background: var(--white); border: 1px solid rgba(7, 27, 53, 0.28); border-radius: 0; appearance: none; } .blog-archive__search input:focus-visible { outline: 2px solid var(--page-accent); outline-offset: 1px; border-color: var(--navy-deep); } .blog-archive__count { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; color: rgba(7, 27, 53, 0.62); white-space: nowrap; } .blog-archive__list { display: grid; gap: 0.5rem; margin: 0; padding: 0; list-style: none; } .archive-row a { display: grid; grid-template-columns: 5.25rem minmax(0, 1fr) auto; gap: 1rem 1.25rem; align-items: center; padding: 0.85rem 1rem; text-decoration: none; color: inherit; background: var(--white); border: 1px solid rgba(7, 27, 53, 0.12); border-left: 3px solid transparent; transition: border-color 160ms ease, background 160ms ease; } .archive-row a:hover, .archive-row a:focus-visible { border-left-color: var(--page-accent); background: #fbfcfd; } .archive-row img { width: 5.25rem; height: 3.4rem; object-fit: cover; display: block; } .archive-row__text { display: grid; gap: 0.2rem; min-width: 0; } .archive-row__title { font-weight: 700; font-size: 0.98rem; line-height: 1.25; color: var(--navy-deep); } .archive-row__desc { font-size: 0.83rem; line-height: 1.45; color: rgba(7, 27, 53, 0.66); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .archive-row__meta { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(7, 27, 53, 0.5); white-space: nowrap; } .blog-archive__empty { padding: 1.5rem; border: 1px dashed rgba(7, 27, 53, 0.3); color: rgba(7, 27, 53, 0.7); } @media (max-width: 800px) { .media-card--featured > a { grid-template-columns: 1fr; } .media-card--featured .media-card__body { padding: 1.5rem; } .blog-archive__search { grid-template-columns: 1fr; } .archive-row a { grid-template-columns: 4rem minmax(0, 1fr); } .archive-row__meta { display: none; } } /* ------------------------------------------------------------------ Sticky aside panels (2026-07-30) */ /* On article/detail layouts the aside CTA panel follows the reader down the long main column. Only above the stacking breakpoint — when the grid collapses to one column the panel flows normally. */ @media (min-width: 961px) { .detail-grid > .spec-panel, .engineering-overview > .document-panel { position: sticky; top: calc(var(--header-height) + 1.25rem); } } .blog-archive__more { margin-top: var(--space-4); } .blog-archive__more[hidden] { display: none; } /* Sticky prerequisite: .page-section clips overflow for its decorative bleeds, but any clipping ancestor kills position:sticky inside it. Sections hosting a sticky aside keep the horizontal clip (what the decoration needs) and free the vertical axis. */ .page-section:has(.detail-grid > .spec-panel), .page-section:has(.engineering-overview > .document-panel) { overflow-x: clip; overflow-y: visible; } /* Contact form: lead pipeline states */ .form-field--hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .quote-form__status { grid-column: 1 / -1; margin: 0; padding: 0.9rem 1.1rem; color: var(--cobalt); background: var(--paper-blue); border: 1px solid rgba(11, 78, 162, 0.3); font-size: 0.88rem; font-weight: 600; line-height: 1.5; } .quote-form__status--error { color: #8c1d18; background: #fdf4f3; border-color: rgba(179, 38, 30, 0.38); } .quote-form__success { grid-column: 1 / -1; padding: 2.1rem 1.75rem; background: var(--paper-blue); border: 1px solid rgba(11, 78, 162, 0.28); border-top: 3px solid var(--signal); text-align: center; } .quote-form__success::before { content: ""; display: block; width: 2.5rem; height: 2.5rem; margin: 0 auto 1.1rem; background: var(--cobalt); -webkit-mask: url('data:image/svg+xml;utf8,') center / contain no-repeat; mask: url('data:image/svg+xml;utf8,') center / contain no-repeat; } .quote-form__success strong { display: block; margin-bottom: 0.5rem; color: var(--ink); font-family: var(--font-display); font-size: 1.3rem; letter-spacing: 0.01em; } .quote-form__success p { max-width: 40ch; margin: 0 auto; color: var(--ink-soft); font-size: 0.94rem; } .quote-form__success a { color: var(--cobalt); font-weight: 600; text-decoration: underline; text-underline-offset: 0.2rem; } /* About page: testimonial + light-background logo rail */ .about-testimonial { max-width: 46rem; margin: 3rem auto 0; padding: 1.75rem 2rem; border: 1px solid var(--line); border-top: 3px solid var(--signal); background: var(--white); text-align: center; } .about-testimonial blockquote { margin: 0 0 0.9rem; font-size: 1.08rem; line-height: 1.7; color: var(--ink); } .about-testimonial figcaption { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); } .page-section .logo-rail { margin-top: 2.5rem; } /* Family-level technical facts sourced from a controlling specification sheet. */ .family-technical-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 2rem 0 0; } .family-technical-grid > div { min-width: 0; padding: 1.15rem 1.2rem; border: 1px solid rgba(7, 27, 53, 0.13); border-top: 3px solid var(--signal); background: var(--white); } .family-technical-grid dt { color: var(--blue); font-family: var(--font-mono); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.08em; line-height: 1.4; text-transform: uppercase; } .family-technical-grid dd { margin: 0.55rem 0 0; color: var(--ink); font-size: 0.98rem; line-height: 1.55; } @media (max-width: 820px) { .family-technical-grid { grid-template-columns: 1fr; } } /* EPC-A A-Series engineering page */ .hero-art--epca img { transform: scale(1.16); transform-origin: center; } .epca-scroll-frame { position: relative; } .epca-scroll-cue { display: none; } .epca-opening, .epca-electrical, .epca-mechanical { --epca-line-dark: rgba(255, 255, 255, 0.16); } .epca-opening__head, .epca-section-lead { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.72fr); gap: clamp(2rem, 6vw, 6rem); align-items: end; margin-bottom: clamp(2rem, 4vw, 3.5rem); } .epca-opening__head h2, .epca-section-lead h2, .epca-documentation h2 { max-width: 17ch; margin: 0.35rem 0 0; font-size: clamp(2.25rem, 4.6vw, 4.75rem); line-height: 0.98; letter-spacing: -0.038em; text-wrap: balance; } .epca-opening__head > p, .epca-section-lead > p { max-width: 56ch; margin: 0; color: var(--ink-soft); font-size: clamp(1rem, 1.3vw, 1.18rem); line-height: 1.72; text-wrap: pretty; } .page-section--dark .epca-opening__head > p, .page-section--dark .epca-section-lead > p { color: rgba(255, 255, 255, 0.76); } .epca-family-rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--epca-line-dark); background: rgba(255, 255, 255, 0.025); } .epca-family-rail__model { display: grid; grid-template-rows: auto auto auto 1fr; min-width: 0; padding: clamp(1rem, 2vw, 1.65rem); } .epca-family-rail__model + .epca-family-rail__model { border-left: 1px solid var(--epca-line-dark); } .epca-family-rail__image { display: grid; min-height: clamp(10rem, 17vw, 15rem); place-items: center; margin: calc(clamp(1rem, 2vw, 1.65rem) * -1) calc(clamp(1rem, 2vw, 1.65rem) * -1) 1.25rem; overflow: hidden; border-bottom: 1px solid var(--epca-line-dark); background: linear-gradient(135deg, rgba(13, 89, 173, 0.2), transparent 62%), #081a33; } .epca-family-rail__image img { width: 100%; height: clamp(10rem, 17vw, 15rem); padding: 0.85rem; object-fit: contain; transition: transform 340ms cubic-bezier(0.16, 1, 0.3, 1); } .epca-family-rail__model:hover .epca-family-rail__image img { transform: translateY(-0.25rem) scale(1.025); } .epca-family-rail__identity { display: flex; gap: 0.8rem; align-items: baseline; justify-content: space-between; } .epca-family-rail__identity strong { color: var(--white); font-family: var(--font-display); font-size: clamp(2rem, 3vw, 3.6rem); line-height: 1; letter-spacing: -0.035em; } .epca-family-rail__identity span { color: var(--signal); font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .epca-family-rail__model > p { margin: 0.75rem 0 1rem; color: var(--white); font-size: 1rem; font-weight: 700; } .epca-family-rail__model dl { display: grid; gap: 0.7rem; margin: 0; } .epca-family-rail__model dl > div { display: grid; gap: 0.18rem; padding-top: 0.7rem; border-top: 1px solid var(--epca-line-dark); } .epca-family-rail__model dt { color: rgba(255, 255, 255, 0.55); font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.07em; text-transform: uppercase; } .epca-family-rail__model dd { margin: 0; color: rgba(255, 255, 255, 0.86); font-size: 0.84rem; line-height: 1.5; } .epca-classification-tape { display: flex; gap: 0; align-items: stretch; margin: 1rem 0 0; padding: 0; overflow-x: auto; border: 1px solid rgba(244, 200, 61, 0.45); background: var(--signal); list-style: none; scrollbar-width: thin; } .epca-classification-tape li { flex: 0 0 auto; padding: 0.78rem 1rem; color: var(--navy-deep); font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.055em; text-transform: uppercase; white-space: nowrap; } .epca-classification-tape li + li { border-left: 1px solid rgba(3, 13, 32, 0.22); } .epca-selection .engineering-table-shell, .epca-electrical .engineering-table-shell, .epca-thermal .engineering-table-shell { margin-top: 0; } .epca-source-alert { display: grid; grid-template-columns: minmax(10rem, 0.32fr) minmax(0, 1fr); gap: 1rem 2rem; margin-top: 1rem; padding: 1rem 1.2rem; border: 1px solid rgba(244, 200, 61, 0.55); background: rgba(244, 200, 61, 0.09); } .epca-source-alert strong { color: var(--signal); font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.07em; text-transform: uppercase; } .epca-source-alert span { color: rgba(255, 255, 255, 0.82); line-height: 1.6; } .epca-reference__grid { display: grid; grid-template-columns: minmax(0, 1.14fr) minmax(21rem, 0.68fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: stretch; } .epca-reference__table { min-width: 0; } .epca-photometric-note { margin: 1rem 0 0; padding: 1rem 1.2rem; border: 1px solid var(--line); background: var(--paper-blue); color: var(--ink-soft); line-height: 1.6; } .epca-photometric-note strong { color: var(--ink); } .epca-switch { display: grid; grid-template-rows: minmax(0, 1fr) auto; margin: 0; border: 1px solid var(--line); background: var(--white); } .epca-switch a, .epca-dimension-strip__item a, .epca-mounting-strip__item a { display: block; overflow: hidden; background: #eef3f7; } .epca-switch a:focus-visible, .epca-dimension-strip__item a:focus-visible, .epca-mounting-strip__item a:focus-visible { outline: 3px solid var(--signal); outline-offset: -3px; } .epca-switch img { width: 100%; height: 100%; min-height: 19rem; object-fit: contain; } .epca-switch figcaption, .epca-dimension-strip__item figcaption, .epca-mounting-strip__item figcaption { display: grid; gap: 0.4rem; padding: 1.1rem 1.2rem 1.25rem; } .epca-switch figcaption strong, .epca-dimension-strip__item figcaption strong, .epca-mounting-strip__item figcaption strong { color: var(--ink); font-size: 1.05rem; } .epca-switch figcaption span, .epca-dimension-strip__item figcaption span, .epca-mounting-strip__item figcaption span { color: var(--ink-soft); font-size: 0.92rem; line-height: 1.55; } .epca-dimension-strip, .epca-mounting-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--epca-line-dark); } .epca-dimension-strip__item, .epca-mounting-strip__item { display: grid; grid-template-rows: auto 1fr; min-width: 0; margin: 0; background: var(--white); } .epca-dimension-strip__item + .epca-dimension-strip__item, .epca-mounting-strip__item + .epca-mounting-strip__item { border-left: 1px solid var(--epca-line-dark); } .epca-dimension-strip__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1); } .epca-dimension-strip__item:hover img, .epca-mounting-strip__item:hover img { transform: scale(1.025); } .epca-mounting-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); border-color: var(--line); } .epca-mounting-strip__item + .epca-mounting-strip__item { border-color: var(--line); } .epca-mounting-strip__item img { width: 100%; aspect-ratio: 16 / 10; object-fit: contain; transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1); } .epca-documentation__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(19rem, 0.72fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; } .epca-spec-index { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: clamp(2rem, 4vw, 3rem) 0 0; border: 1px solid var(--line); background: var(--white); } .epca-spec-index > div { min-width: 0; padding: 1.1rem 1.2rem 1.25rem; } .epca-spec-index > div:nth-child(even) { border-left: 1px solid var(--line); } .epca-spec-index > div:nth-child(n + 3) { border-top: 1px solid var(--line); } .epca-spec-index dt { color: var(--blue); font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; } .epca-spec-index dd { margin: 0.5rem 0 0; color: var(--ink); font-size: 0.93rem; line-height: 1.58; } .epca-document-panel { position: sticky; top: calc(var(--header-height) + 1.25rem); } .epca-document-panel .button { width: 100%; margin-top: 0.65rem; } .epca-document-panel .button--outline { color: var(--white); border-color: rgba(255, 255, 255, 0.48); } .epca-document-panel .button--outline:hover { color: var(--navy-deep); background: var(--white); border-color: var(--white); } @media (max-width: 1080px) { .epca-family-rail, .epca-dimension-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .epca-family-rail__model:nth-child(3), .epca-dimension-strip__item:nth-child(3) { border-left: 0; } .epca-family-rail__model:nth-child(n + 3), .epca-dimension-strip__item:nth-child(n + 3) { border-top: 1px solid var(--epca-line-dark); } .epca-reference__grid { grid-template-columns: 1fr; } .epca-switch img { max-height: 34rem; } } @media (max-width: 820px) { .page-cta__inner > .star-border { width: fit-content; justify-self: start; } .epca-scroll-cue { display: flex; gap: 0.55rem; align-items: center; margin: 1rem 0 0.7rem; color: var(--ink-soft); font-size: 0.78rem; font-weight: 650; line-height: 1.4; } .page-section--dark .epca-scroll-cue { color: rgba(255, 255, 255, 0.72); } .epca-scroll-cue span { display: inline-grid; width: 1.8rem; height: 1.8rem; flex: 0 0 1.8rem; place-items: center; color: var(--navy-deep); border-radius: 50%; background: var(--signal); font-size: 1rem; } .epca-scroll-frame::after { position: absolute; top: 0; right: 0; bottom: 0; z-index: 2; width: 2.25rem; background: linear-gradient(90deg, transparent, rgba(237, 243, 249, 0.94)); content: ""; pointer-events: none; } .epca-scroll-frame--dark::after { background: linear-gradient(90deg, transparent, rgba(3, 13, 32, 0.94)); } .epca-scroll-frame--signal::after { background: linear-gradient(90deg, transparent, rgba(244, 200, 61, 0.98)); } .epca-opening__head, .epca-section-lead, .epca-documentation__grid { grid-template-columns: 1fr; gap: 1.25rem; } .epca-opening__head h2, .epca-section-lead h2, .epca-documentation h2 { max-width: 20ch; font-size: clamp(2.15rem, 9vw, 3.75rem); } .epca-family-rail, .epca-dimension-strip, .epca-mounting-strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; } .epca-family-rail__model, .epca-dimension-strip__item, .epca-mounting-strip__item { flex: 0 0 min(84vw, 21rem); border-top: 0 !important; border-left: 1px solid var(--line) !important; scroll-snap-align: start; } .epca-family-rail__model:first-child, .epca-dimension-strip__item:first-child, .epca-mounting-strip__item:first-child { border-left: 0 !important; } .epca-source-alert, .epca-spec-index { grid-template-columns: 1fr; } .epca-spec-index > div { border-top: 1px solid var(--line); border-left: 0 !important; } .epca-spec-index > div:first-child { border-top: 0; } .epca-document-panel { position: static; } } @media (max-width: 520px) { .epca-family-rail__model, .epca-dimension-strip__item, .epca-mounting-strip__item { flex-basis: min(82vw, 20rem); } .epca-family-rail__identity { align-items: flex-start; flex-direction: column; } .epca-switch img { min-height: 15rem; } .hero-art--epca img { transform: scale(1.1); } } @media (prefers-reduced-motion: reduce) { .epca-family-rail__image img, .epca-dimension-strip__item img, .epca-mounting-strip__item img { transition: none; } } /* EPC-A engineering-page polish: source-faithful drawings, one shared zoom dialog, and a static classification ledger instead of decorative horizontal scrolling. */ .hero-art--epca img { transform: none; object-position: 62% center; } .hero-art__zoom { height: 100%; } .hero-art__zoom picture { display: block; height: 100%; } .hero-art__zoom:focus-visible { outline: 3px solid var(--signal); outline-offset: -3px; } .epca-media-trigger { position: relative; display: block; width: 100%; overflow: hidden; border: 0; background: #f5f8fb; cursor: zoom-in; } .epca-mobile-slices { display: none; } .epca-media-trigger:focus-visible { outline: 3px solid var(--signal); outline-offset: -3px; } .epca-family-rail__image .epca-media-trigger { height: 100%; background: transparent; } .epca-classification-tape { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; margin-top: 1rem; padding: 1px; overflow: visible; border: 0; background: rgba(3, 13, 32, 0.35); } .epca-classification-tape li { display: flex; min-height: 3.8rem; padding: 0.8rem 0.95rem; align-items: center; background: var(--signal); line-height: 1.45; white-space: normal; } .epca-classification-tape li + li { border-left: 0; } .epca-reference__table { width: 100%; } .epca-switch { margin-top: clamp(2rem, 4vw, 3.5rem); overflow: hidden; border: 1px solid var(--line); border-top: 3px solid var(--signal); background: var(--white); box-shadow: 0 1.4rem 3.5rem rgba(3, 19, 40, 0.08); } .epca-switch .epca-media-trigger { padding: clamp(0.75rem, 2vw, 1.5rem); background: linear-gradient(rgba(7, 52, 99, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(7, 52, 99, 0.035) 1px, transparent 1px), #f8fafc; background-size: 3rem 3rem; } .epca-switch img { display: block; width: 100%; height: auto; min-height: 0; object-fit: contain; } .epca-switch figcaption { display: grid; grid-template-columns: minmax(13rem, 0.42fr) minmax(0, 1fr); gap: 1.25rem; padding: 1.25rem clamp(1.25rem, 3vw, 2rem) 1.45rem; align-items: start; border-top: 1px solid var(--line); } .epca-dimension-strip { display: grid; grid-template-columns: 1fr; gap: clamp(1.25rem, 2.5vw, 2rem); overflow: visible; border: 0; } .epca-dimension-strip__item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 0.28fr); min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--epca-line-dark) !important; background: var(--white); } .epca-dimension-strip__item:first-child { border-left: 1px solid var(--epca-line-dark) !important; } .epca-dimension-strip__item .epca-media-trigger { display: grid; min-height: clamp(15rem, 24vw, 24rem); padding: clamp(0.9rem, 2vw, 1.75rem); place-items: center; background: linear-gradient(rgba(7, 52, 99, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(7, 52, 99, 0.035) 1px, transparent 1px), #f8fafc; background-size: 3rem 3rem; } .epca-dimension-strip__item img { display: block; width: 100%; height: auto; aspect-ratio: auto; padding: 0; object-fit: contain; } .epca-dimension-strip__item figcaption { align-content: center; border-left: 1px solid var(--line); background: var(--white); } .epca-mounting-strip { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); overflow: visible; border: 0; } .epca-mounting-strip__item { display: grid; grid-column: 1 / -1; grid-template-rows: auto 1fr; min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--line) !important; background: var(--white); } .epca-mounting-strip__item:first-child, .epca-mounting-strip__item:nth-child(4) { grid-column: 1 / -1; border-left: 1px solid var(--line) !important; } .epca-mounting-strip__item .epca-media-trigger { display: grid; min-height: clamp(18rem, 28vw, 30rem); padding: clamp(0.9rem, 2vw, 1.5rem); place-items: center; background: linear-gradient(rgba(7, 52, 99, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(7, 52, 99, 0.035) 1px, transparent 1px), #f8fafc; background-size: 3rem 3rem; } .epca-mounting-strip__item img { display: block; width: 100%; height: auto; max-height: 42rem; aspect-ratio: auto; padding: 0; object-fit: contain; } .epca-mounting-strip__item figcaption { border-top: 1px solid var(--line); } .project-lightbox { height: min(92dvh, 64rem); } @media (max-width: 1100px) { .epca-classification-tape { grid-template-columns: repeat(3, minmax(0, 1fr)); } .epca-dimension-strip__item { grid-template-columns: 1fr; } .epca-dimension-strip__item figcaption { border-top: 1px solid var(--line); border-left: 0; } } @media (max-width: 900px) { .epca-dimension-strip, .epca-mounting-strip { display: grid; grid-template-columns: 1fr; overflow: visible; scroll-snap-type: none; } .epca-dimension-strip__item, .epca-dimension-strip__item:first-child, .epca-mounting-strip__item, .epca-mounting-strip__item:first-child, .epca-mounting-strip__item:nth-child(4) { grid-column: auto; flex: initial; border: 1px solid var(--line) !important; scroll-snap-align: none; } .epca-switch figcaption { grid-template-columns: 1fr; gap: 0.45rem; } } @media (max-width: 680px) { .epca-classification-tape { grid-template-columns: repeat(2, minmax(0, 1fr)); } .epca-dimension-strip__item .epca-media-trigger, .epca-mounting-strip__item .epca-media-trigger { min-height: 14rem; } .epca-media-trigger--sliced > .epca-source-image { display: none; } .epca-mobile-slices { display: grid; width: 100%; gap: 0.65rem; } .epca-mobile-slices__panel { position: relative; display: block; width: 100%; overflow: hidden; aspect-ratio: var(--epca-slice-ratio); border: 1px solid rgba(7, 52, 99, 0.14); background: var(--white); } .epca-mobile-slices__panel img { position: absolute; top: 0; left: calc(var(--epca-slice-index) * -100%); display: block; width: calc(var(--epca-slices) * 100%); max-width: none; height: auto; max-height: none; padding: 0; object-fit: fill; transform: none !important; } .epca-media-trigger--sliced::after { position: absolute; right: 0.65rem; bottom: 0.65rem; display: grid; width: 2.75rem; height: 2.75rem; place-items: center; border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 50%; color: var(--navy-deep); background: var(--signal); box-shadow: 0 0.5rem 1.5rem rgba(3, 19, 40, 0.22); content: "+"; font-family: var(--font-mono); font-size: 1.35rem; font-weight: 800; pointer-events: none; } .project-lightbox--technical { overflow: hidden; } .project-lightbox--technical figure { display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: auto; overscroll-behavior: contain; } .project-lightbox--technical img { width: max(70rem, 260vw); max-width: none; height: auto; min-height: 0; max-height: none; padding: 1rem; align-self: start; object-fit: initial; } .project-lightbox--technical figcaption { position: sticky; z-index: 1; bottom: 0; left: 0; width: calc(94vw - 2px); min-width: calc(94vw - 2px); max-width: calc(94vw - 2px); background: #030d1d; white-space: normal; } body:has(.epca-opening) .maes-chat-launcher-wrap { right: -0.35rem !important; bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)) !important; } body:has(.epca-opening) .maes-chat-launcher { width: 2.75rem !important; height: 2.75rem !important; } body:has(.epca-opening) .maes-chat-launcher-label { display: none !important; } body:has(.epca-opening) .scroll-top { right: -0.3rem; bottom: calc(8rem + env(safe-area-inset-bottom, 0px)); opacity: 0.72; } } /* EPC-B follows the EPC-A engineering-page system with B-Series-specific media. */ .hero-art--epcb img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .epcb-family-rail .epca-family-rail__image { background: linear-gradient(145deg, #fff 0%, #eef1f3 100%); } .epcb-family-rail .epca-family-rail__image img { object-fit: contain; padding: clamp(0.8rem, 2vw, 1.5rem); } .epcb-reference-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); margin-top: clamp(1.25rem, 3vw, 2rem); } .epcb-reference-grid .epca-switch { height: 100%; } .epcb-reference-grid .epca-switch img { aspect-ratio: 955 / 875; object-fit: contain; background: #fff; } .epcb-dimension-strip { grid-template-columns: minmax(0, 1fr); max-width: 76rem; margin-inline: auto; } .epcb-dimension-strip .epcb-drawing-card { border-left: 1px solid var(--epca-line-dark) !important; } .epcb-dimension-strip .epcb-drawing-card img { width: 100%; max-height: 52rem; object-fit: contain; } .epcb-mounting-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .epcb-mounting-strip .epca-mounting-strip__item:nth-child(2) { border-left: 1px solid rgba(14, 24, 36, 0.12); } @media (max-width: 760px) { .epcb-reference-grid, .epcb-mounting-strip { grid-template-columns: minmax(0, 1fr); } .epcb-mounting-strip .epca-mounting-strip__item:nth-child(2) { border-left: 0; border-top: 1px solid rgba(14, 24, 36, 0.12); } .epcb-reference-grid .epca-switch img { aspect-ratio: auto; } } @media (max-width: 340px) { .epca-classification-tape { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .epca-family-rail__image img, .epca-dimension-strip__item img, .epca-mounting-strip__item img { transition: none; } }