:root{ --max-width: 1200px; --border: #d5d7dc; --text: #16181c; --muted: #5c6169; --bg: #ffffff; --accent: #ffb400; --shadow: 0 5px 16px rgba(0, 0, 0, 0.085); --shadow2: 0 10px 26px rgba(0, 0, 0, 0.11); --footer-h: 52px; /* Extra space so last content can scroll above the fixed footer */ --footer-scroll-buffer: 38px; /* Pad below product tables so last row can scroll above fixed footer */ --footer-table-clearance: calc(var(--footer-h) + var(--footer-scroll-buffer) + 28px); --banner-skew: -2deg; --banner-scale-x: 1.02; /** * UI skin layer — surfaces, borders, radii, vertical rhythm. * Global look: edit these, or set for the preset below. */ --ui-surface: #ffffff; --ui-surface-muted: #f6f7f9; --ui-surface-subtle: #fafafb; --ui-surface-hover: #eceef2; --ui-surface-sort-active: #fff8e6; --ui-border-soft: #e9eaee; --ui-border-strong: #c8ccd4; --ui-inset-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.78); --ui-card-shadow: var(--shadow); --ui-radius-sm: 8px; --ui-radius-md: 11px; --ui-radius-lg: 12px; --ui-pad-inline: 16px; --ui-pad-block-tight: 8px; --ui-pad-block: 12px; --ui-pad-block-relaxed: 16px; } /* Alternate global skin — switch via */ :root[data-ui-skin="alt"]{ --border: #c9ccd4; --muted: #4f5560; --shadow: 0 4px 14px rgba(0, 0, 0, 0.1); --shadow2: 0 8px 22px rgba(0, 0, 0, 0.12); --ui-surface-muted: #eef0f4; --ui-surface-subtle: #f4f5f8; --ui-surface-hover: #e2e5eb; --ui-border-soft: #dde0e6; --ui-border-strong: #aeb4bf; --ui-card-shadow: 0 6px 18px rgba(0, 0, 0, 0.1); } *{ box-sizing: border-box; } .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; } html{ min-height: 100%; } body{ min-height: 100%; margin: 0; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--text); background: var(--bg); padding-bottom: calc(var(--footer-h) + var(--footer-scroll-buffer)); } .page{ min-height: 100%; display: flex; flex-direction: column; } /* Top bar (logo + nav) */ .topbar{ background: #fff; border-bottom: 1px solid var(--border); } .topbar-inner{ max-width: var(--max-width); margin: 0 auto; padding: var(--ui-pad-block-tight) var(--ui-pad-inline); display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .topbar-actions{ display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px 20px; flex: 1; min-width: 0; } .topbar-search{ display: flex; align-items: center; gap: 8px; } .topbar-search input[type="search"]{ min-width: 0; width: 14rem; max-width: 42vw; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px; font-size: 0.9rem; background: #fff; color: var(--text); } .topbar-search input[type="search"]::placeholder{ color: #9a9ea6; } .topbar-search input[type="search"]:focus{ outline: 2px solid rgba(255, 180, 0, 0.45); outline-offset: 1px; border-color: #c8cad0; } .topbar-search__go{ appearance: none; border: 1px solid var(--border); background: var(--ui-surface-muted); color: var(--text); font-size: 0.88rem; font-weight: 600; padding: var(--ui-pad-block-tight) 12px; border-radius: var(--ui-radius-sm); cursor: pointer; white-space: nowrap; } .topbar-search__go:hover{ background: var(--ui-surface); border-color: var(--ui-border-strong); } .topbar-search__go:focus-visible{ outline: 3px solid rgba(255, 180, 0, 0.45); outline-offset: 2px; } .topbar-brand{ display: flex; flex-direction: column; align-items: flex-start; gap: 4px; } .topbar-logo{ display: block; max-height: 165px; width: auto; height: auto; } .topbar-tagline{ font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .topbar-nav{ display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: flex-end; } .topbar-link{ color: var(--muted); text-decoration: none; font-size: 0.92rem; padding: 6px 8px; border-radius: 10px; border: 1px solid transparent; } .topbar-link:hover{ color: var(--text); background: var(--ui-surface-muted); border-color: var(--ui-border-soft); } .topbar-link:focus-visible{ outline: 3px solid rgba(255, 180, 0, 0.45); outline-offset: 2px; } @media (max-width: 760px){ .topbar-inner{ flex-direction: column; align-items: flex-start; } .topbar-actions{ width: 100%; justify-content: flex-start; } .topbar-search{ width: 100%; } .topbar-search input[type="search"]{ flex: 1; max-width: none; width: auto; } .topbar-nav{ justify-content: flex-start; } } /* Main */ .main{ flex: 1; width: 100%; min-height: 0; position: relative; } /* Full-width sheet overlays (Products catalog, Contact): hide home drill-down while open */ .main--sheet-overlay-active #master-products, .main--sheet-overlay-active #hero-products{ display: none !important; } /* Contact overlay mounts at end of
on product / about pages — hide primary content only */ .main.main--sheet-overlay-active > .product-page-inner{ display: none !important; } .main.main--sheet-overlay-active.about-page__main > .about-article{ display: none !important; } /* Plain white overlay in document flow — window scroll, no inner scroll pane */ .products-overlay{ position: relative; z-index: 5; width: 100%; display: flex; flex-direction: column; padding: 0; background: var(--ui-surface); box-sizing: border-box; } .products-overlay[hidden]{ display: none; } .products-overlay__sheet{ position: relative; width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; background: var(--ui-surface); display: flex; flex-direction: column; overflow: visible; } /* All Products only: fixed sheet width so radios, toolbar, and grid stay in a stable layout (narrow viewports scroll horizontally) */ #products-overlay.products-overlay{ overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; } #products-overlay.products-overlay .products-overlay__sheet{ width: var(--max-width); min-width: var(--max-width); max-width: var(--max-width); box-sizing: border-box; } .products-overlay__toolbar{ flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: var(--ui-pad-block) var(--ui-pad-inline) var(--ui-pad-block-tight); background: var(--ui-surface); position: sticky; top: 0; z-index: 15; border-bottom: 1px solid var(--ui-border-soft); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9); } .products-overlay__home{ appearance: none; border: 0; background: transparent; color: var(--muted); font-size: 0.95rem; font-weight: 600; padding: 6px 4px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .products-overlay__home:hover{ color: var(--text); } .products-overlay__home:focus-visible{ outline: 3px solid rgba(255, 180, 0, 0.45); outline-offset: 2px; } .products-overlay__close{ appearance: none; border: 0; background: transparent; color: var(--muted); font-size: 0.95rem; font-weight: 600; padding: 6px 4px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .products-overlay__close:hover{ color: var(--text); } .products-overlay__close:focus-visible{ outline: 3px solid rgba(255, 180, 0, 0.45); outline-offset: 2px; } .catalog-canvas--overlay{ overflow: visible; } .catalog-canvas{ min-height: 120px; max-width: var(--max-width); margin: 0 auto; padding: var(--ui-pad-block) var(--ui-pad-inline) 38px; background: var(--ui-surface); } .category-header--overlay{ text-align: center; padding-bottom: 8px; } /* All Products overlay: radios top-left, titles centered below */ .catalog-overlay-header{ padding: var(--ui-pad-block-tight) 2px 8px; margin: 0 0 var(--ui-pad-block); } .catalog-overlay-top{ display: flex; flex-direction: column; align-items: stretch; gap: 12px; width: 100%; } .catalog-overlay-top .catalog-overlay-kind{ align-self: flex-start; text-align: left; flex: 0 0 auto; width: max-content; } .catalog-overlay-top .category-header-headings{ text-align: center; width: 100%; } .catalog-overlay-kind{ border: 0; margin: 0; padding: 0; min-width: max-content; } .catalog-overlay-kind__row{ display: flex; flex-wrap: nowrap; flex-direction: row; justify-content: flex-start; align-items: center; gap: 14px 22px; width: max-content; max-width: none; } .catalog-overlay-kind__choice{ display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; flex-shrink: 0; cursor: pointer; font-size: 0.95rem; font-weight: 650; color: var(--text); user-select: none; white-space: nowrap; } .catalog-overlay-kind__choice input[type="radio"]{ width: 1rem; height: 1rem; accent-color: #c45c00; flex-shrink: 0; } .catalog-overlay-grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 18px; margin-top: var(--ui-pad-block-tight); margin-left: auto; margin-right: auto; justify-items: center; width: 100%; /* ~20% narrower than full canvas so tiles (and gfx) stay compact */ max-width: min(960px, 100%); } @media (max-width: 900px){ .catalog-overlay-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 640px){ .catalog-overlay-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 380px){ .catalog-overlay-grid{ grid-template-columns: 1fr; } } /* All Products: category grid stays 4 columns to match fixed sheet (viewport media queries above do not apply here) */ #products-overlay.products-overlay .catalog-overlay-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 960px; } .catalog-overlay__tile{ appearance: none; border: 1px solid var(--border); border-radius: var(--ui-radius-md); margin: 0; padding: var(--ui-pad-block) 10px var(--ui-pad-block-relaxed); background: var(--ui-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); cursor: pointer; display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; max-width: none; box-sizing: border-box; transition: border-color 0.15s ease, opacity 0.15s ease; } .catalog-overlay__tile:hover{ transform: none; opacity: 0.92; border-color: #c8cad0; } .catalog-overlay__tile:focus-visible{ outline: 3px solid rgba(255, 180, 0, 0.45); outline-offset: 2px; } .catalog-overlay__tile-img{ width: auto; max-width: min(100%, 132px); height: auto; max-height: 100px; object-fit: contain; object-position: center; display: block; background: transparent; } .catalog-overlay__tile-text{ width: 100%; margin-top: 10px; } .catalog-overlay__tile > .catalog-overlay__tile-caption{ margin-top: 10px; } .catalog-overlay__tile-caption{ padding: 0 4px; font-size: 0.92rem; line-height: 1.35; font-weight: 600; color: var(--muted); } .catalog-overlay__tile-text .catalog-overlay__tile-caption{ margin-top: 0; color: var(--text); } .catalog-overlay__tile-desc{ margin-top: 4px; padding: 0 4px; font-size: 0.82rem; line-height: 1.35; font-weight: 500; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .catalog-overlay__tile-mfg{ margin-top: 4px; padding: 0 4px; font-size: 0.8rem; line-height: 1.35; font-weight: 500; color: var(--muted); } .catalog-overlay__tile-kind{ margin-top: 6px; padding: 0 4px; font-size: 0.76rem; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); } .catalog-canvas__status, .catalog-canvas__message{ grid-column: 1 / -1; text-align: center; color: var(--muted); padding: var(--ui-pad-block-relaxed) var(--ui-pad-inline); } .catalog-canvas .drill-banner{ margin-top: 0; } .catalog-canvas .product-table-wrap{ margin-top: var(--ui-pad-block-relaxed); } .product-grid{ max-width: var(--max-width); margin: 0 auto; padding: var(--ui-pad-block-relaxed) var(--ui-pad-inline); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ui-pad-block-relaxed); } /* Home: mission copy spans full width above the four category tiles */ #master-products .home-mission-intro{ grid-column: 1 / -1; margin: 0 0 var(--ui-pad-block-tight); padding: var(--ui-pad-block-relaxed) var(--ui-pad-block-relaxed); border-radius: var(--ui-radius-md); border: 1px solid var(--border); background: var(--ui-surface); box-shadow: var(--ui-card-shadow); text-align: center; } #master-products .home-mission-intro__tagline{ margin: 0 0 var(--ui-pad-block-tight); font-size: clamp(1.05rem, 2.5vw, 1.35rem); font-weight: 700; letter-spacing: 0.04em; line-height: 1.35; color: var(--text); } #master-products .home-mission-intro__body{ margin: 0 auto; max-width: 62ch; font-size: 1rem; line-height: 1.55; color: var(--muted); } @media (max-width: 980px){ .product-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px){ .product-grid{ grid-template-columns: 1fr; } } /* Product page — “Customers also viewed” (up to 5) */ .product-grid--also{ grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 1100px; } @media (max-width: 980px){ .product-grid--also{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px){ .product-grid--also{ grid-template-columns: 1fr; } } .also-viewed{ margin-top: var(--ui-pad-block-relaxed); } .also-viewed h2{ font-size: 1.1rem; font-weight: 650; margin: 0 0 var(--ui-pad-block) 0; color: var(--text); } .product-page-inner{ max-width: var(--max-width); margin: 0 auto; padding: var(--ui-pad-block-relaxed) var(--ui-pad-inline) 20px; } .product-box{ appearance: none; border: 1px solid var(--border); border-radius: var(--ui-radius-lg); overflow: hidden; background: var(--ui-surface); padding: 0; cursor: pointer; box-shadow: var(--ui-card-shadow); transition: transform 160ms ease-out, box-shadow 160ms ease-out; text-align: left; } .product-box:hover{ transform: translateY(-2px); box-shadow: var(--shadow2); } .product-box:focus-visible{ outline: 3px solid rgba(255, 180, 0, 0.45); outline-offset: 2px; } a.product-box{ display: block; text-decoration: none; color: inherit; } .product-box img{ width: 100%; height: 220px; object-fit: cover; display: block; background: var(--ui-surface-muted); } .product-gradient{ background: var(--accent); border-top: 1px solid rgba(0, 0, 0, 0.08); padding: var(--ui-pad-block) 10px; text-align: center; } .product-label{ font-size: 1.05rem; font-weight: 650; color: var(--text); } /* Drill-down container */ .drilldown{ max-width: var(--max-width); margin: 0 auto; padding: 0 var(--ui-pad-inline) var(--ui-pad-block-relaxed); } /* Lamps drill-down: horizontal “future” category links */ .lamps-subnav{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: var(--ui-pad-block) 0 var(--ui-pad-block-relaxed); margin: 0 0 var(--ui-pad-block-tight); border-bottom: 1px solid var(--ui-border-soft); } .lamps-subnav__link{ color: var(--muted); text-decoration: none; font-size: 0.92rem; font-weight: 600; padding: var(--ui-pad-block-tight) 10px; border-radius: var(--ui-radius-sm); border: 1px solid var(--border); background: var(--ui-surface-muted); white-space: nowrap; } .lamps-subnav__link:hover{ color: var(--text); background: var(--ui-surface); border-color: var(--ui-border-strong); } .lamps-subnav__link:focus-visible{ outline: 3px solid rgba(255, 180, 0, 0.45); outline-offset: 2px; } .lamps-subnav__link--active{ color: var(--text); background: var(--ui-surface-sort-active); border-color: #e6c24a; box-shadow: 0 0 0 1px rgba(230, 194, 74, 0.35); } .lamps-subnav__link--active:hover{ background: #fff4d6; border-color: #d4ae3a; } .lamps-intro{ display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin: var(--ui-pad-block-tight) 0 var(--ui-pad-block); padding: var(--ui-pad-block-relaxed) var(--ui-pad-block-relaxed); min-height: 100px; border-radius: var(--ui-radius-md); border: 1px solid var(--border); background: var(--ui-surface); box-shadow: var(--ui-card-shadow); } .lamps-intro[hidden]{ display: none; } .lamps-intro__text{ flex: 1 1 auto; min-width: 0; } .lamps-intro__lead{ margin: 0 0 var(--ui-pad-block-tight); font-size: 1.02rem; font-weight: 650; line-height: 1.45; color: var(--text); } .lamps-intro__note{ margin: 0; font-size: 0.95rem; line-height: 1.5; color: var(--muted); } .lamps-intro__image{ flex: 0 0 auto; width: clamp(140px, 22vw, 240px); max-width: 32%; height: auto; border-radius: 10px; object-fit: contain; } @media (max-width: 900px){ .lamps-intro{ flex-direction: column; align-items: stretch; } .lamps-intro__image{ width: min(280px, 100%); max-width: 100%; align-self: center; } } .lamps-filters-slot{ min-height: 60px; margin: var(--ui-pad-block-tight) 0 var(--ui-pad-block); padding: var(--ui-pad-block) var(--ui-pad-block-relaxed); border-radius: var(--ui-radius-md); border: 1px solid var(--border); background: var(--ui-surface-muted); box-shadow: var(--ui-inset-highlight), 0 1px 2px rgba(0, 0, 0, 0.04); } .lamps-filters-slot[hidden]{ display: none; } .lamps-filters-bar{ display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 16px; } .lamps-filters-bar__controls{ display: flex; flex-wrap: wrap; flex: 1; min-width: 0; align-items: center; gap: 14px 22px; } .lamps-filters-clear{ flex-shrink: 0; appearance: none; border: 1px solid var(--border); background: var(--ui-surface); color: var(--text); font-size: 0.88rem; font-weight: 600; padding: var(--ui-pad-block-tight) 14px; border-radius: var(--ui-radius-sm); cursor: pointer; } .lamps-filters-clear:hover{ background: var(--ui-surface-muted); border-color: var(--ui-border-strong); } .lamps-filters-clear:focus-visible{ outline: 3px solid rgba(255, 180, 0, 0.45); outline-offset: 2px; } .lamps-filter-row{ display: inline-flex; align-items: center; gap: 8px; margin: 0; cursor: pointer; font: inherit; } .lamps-filter__label{ font-size: 0.88rem; font-weight: 650; color: var(--text); white-space: nowrap; } .lamps-filter__select{ min-width: 9.5rem; max-width: 16rem; padding: 6px 28px 6px 10px; font-size: 0.88rem; font-weight: 500; color: var(--text); border: 1px solid var(--border); border-radius: 8px; background: #fff; cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M3 4.5L6 8l3-3.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; } .lamps-filter__select:hover{ border-color: #c8cad0; } .lamps-filter__select:focus-visible{ outline: 3px solid rgba(255, 180, 0, 0.45); outline-offset: 1px; } .lamps-table-host{ margin-top: var(--ui-pad-block-tight); } .lamps-table-scroll{ overflow-x: auto; } .lamps-sort-toolbar{ display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; padding-top: var(--ui-pad-block); padding-bottom: var(--ui-pad-block-tight); padding-left: 0; padding-right: 0; gap: var(--ui-pad-block-tight); } .lamps-sort-toolbar__hint{ font-size: 0.82rem; font-weight: 500; color: var(--muted); max-width: 28em; line-height: 1.35; } .lamps-th__label{ margin-right: 2px; } .lamps-th__glyph{ font-size: 0.72rem; opacity: 0.72; letter-spacing: 0; } .lamps-sortable--active .lamps-th__glyph{ opacity: 1; font-size: 0.78rem; } .lamps-table-viewing{ text-align: center; font-size: 0.88rem; font-weight: 600; color: var(--muted); letter-spacing: 0.02em; padding: 0 var(--ui-pad-block) var(--ui-pad-block); border-bottom: 1px solid var(--ui-border-soft); margin-bottom: 0; } .lamps-default-sort{ appearance: none; border: 1px solid var(--border); background: var(--ui-surface-muted); color: var(--text); font-size: 0.88rem; font-weight: 600; padding: var(--ui-pad-block-tight) 12px; border-radius: var(--ui-radius-sm); cursor: pointer; margin-left: 10px; } .lamps-default-sort:hover{ background: var(--ui-surface); border-color: var(--ui-border-strong); } .lamps-default-sort--active{ background: var(--ui-surface-sort-active); border-color: #e6c24a; } .lamps-default-sort:focus-visible{ outline: 3px solid rgba(255, 180, 0, 0.45); outline-offset: 2px; } .lamps-data-table{ table-layout: fixed; width: 100%; } .lamps-data-table th, .lamps-data-table td{ padding: var(--ui-pad-block-tight) 8px; overflow-wrap: anywhere; word-break: break-word; } .lamps-data-table thead tr th.thumb-cell{ vertical-align: middle; } .lamps-data-table thead th{ background: #fbfbfc; background: color-mix(in srgb, var(--ui-surface-muted) 15%, #ffffff 85%); padding-top: calc(var(--ui-pad-block-tight) * 4 / 3); padding-bottom: calc(var(--ui-pad-block-tight) * 4 / 3); } .lamps-data-table th.lamps-sortable{ cursor: pointer; user-select: none; white-space: nowrap; font-weight: 650; border-radius: var(--ui-radius-sm); border: 1px solid transparent; padding: calc(7px * 4 / 3) 10px; margin: 1px 2px; box-shadow: var(--ui-inset-highlight), 0 0 0 1px rgba(0, 0, 0, 0.04); transition: background 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease; } .lamps-data-table th.lamps-sortable:hover{ background: var(--ui-surface-hover); border-color: var(--ui-border-soft); box-shadow: var(--ui-inset-highlight), 0 1px 3px rgba(0, 0, 0, 0.06); } .lamps-data-table th.lamps-sortable--active{ background: var(--ui-surface-sort-active); border-color: #e6c24a; box-shadow: var(--ui-inset-highlight), 0 0 0 1px rgba(230, 194, 74, 0.35); } .lamps-loading, .lamps-error, .lamps-empty{ text-align: center; padding: var(--ui-pad-block-relaxed) var(--ui-pad-inline); color: var(--muted); font-size: 0.95rem; } .lamps-error{ color: #b71c1c; } /* Level 3 (table) banner */ .drill-banner{ width: 100%; height: 200px; border: 1px dashed var(--ui-border-strong); border-radius: var(--ui-radius-lg); background: var(--ui-surface-subtle); position: relative; overflow: hidden; display: block; margin-top: var(--ui-pad-block-relaxed); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5); } .drill-banner img{ position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: fill !important; display: block; transform: skewX(var(--banner-skew)) scaleX(var(--banner-scale-x)); transform-origin: center; } .drill-banner img:not([src]), .drill-banner img[src=""]{ display: none; } /* Drill-down (#hero-products): enforce one consistent banner height */ #hero-products .drill-banner{ height: 200px; min-height: 200px; overflow: hidden; } #hero-products .drill-banner img{ position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; transform: none !important; display: block; margin: 0 !important; } .drill-banner.drill-banner--anchored{ display: flex; align-items: center; justify-content: flex-start; gap: clamp(8px, 1.6vw, 16px); height: 200px; min-height: 200px; padding: 0 clamp(10px, 1.6vw, 16px) 0 0; overflow: hidden; border-style: solid; } .drill-banner.drill-banner--anchored img{ position: static !important; inset: auto !important; width: auto !important; height: 100% !important; max-width: min(36%, 320px) !important; max-height: none !important; object-fit: contain !important; object-position: left center; background: #fff; flex: 0 0 auto; margin: 0 !important; transform: none !important; } #hero-products .drill-banner.drill-banner--anchored{ height: 200px; min-height: 200px; overflow: hidden; } /* Fixture type radios: let banner grow with content (one-shot JS min-height after mount; no resize observer). */ #hero-products .drill-banner.drill-banner--with-type-filter{ height: auto !important; min-height: 200px; overflow: visible; } #hero-products .drill-banner.drill-banner--anchored.drill-banner--with-type-filter{ align-items: stretch; } #hero-products .drill-banner__content.drill-banner__content--with-type-filter{ transform: translate(clamp(8px, 5vw, 72px), -4px); } #hero-products .drill-banner.drill-banner--anchored img{ width: auto !important; height: 100% !important; max-width: min(36%, 320px) !important; object-fit: contain !important; margin: 0 !important; } .drill-banner__content{ flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 10px; padding: 0 clamp(4px, 1vw, 12px); position: relative; z-index: 1; transform: translate(100px, -30px); } .drill-banner__title{ margin: 0; font-size: clamp(1.2rem, 2.2vw, 2rem); line-height: 1.2; font-weight: 700; color: var(--text); max-width: 24ch; } .drill-banner__copy{ margin: 0; font-size: clamp(0.9rem, 1.2vw, 1.04rem); line-height: 1.45; color: var(--muted); max-width: 62ch; } .drill-banner__content--filters-only{ justify-content: center; transform: none; width: 100%; padding: 10px clamp(8px, 2vw, 16px); } .drill-banner__fixture-type-filters{ margin: 0; padding: 0; border: 0; width: 100%; max-width: min(100%, 52rem); display: flex; flex-direction: column; align-items: center; gap: 6px; } .drill-banner__fixture-type-legend{ margin: 0; padding: 0; font-size: 0.78rem; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); } .drill-banner__fixture-type-options{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; } .drill-banner__fixture-type-option{ display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 4px 8px; border-radius: var(--ui-radius-sm); font-size: 0.82rem; font-weight: 550; color: var(--text); cursor: pointer; user-select: none; } .drill-banner__fixture-type-option:hover{ background: rgba(255, 255, 255, 0.65); } .drill-banner__fixture-type-option input{ margin: 0; accent-color: var(--accent); } .drill-banner__fixture-type-option__text{ max-width: 28ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .product-table-empty-filter{ text-align: center; padding: var(--ui-pad-block-relaxed) 12px; color: var(--muted); font-size: 0.92rem; } @media (max-width: 760px){ .drill-banner.drill-banner--anchored{ height: auto; min-height: 0; flex-direction: column; padding: 0; } .drill-banner.drill-banner--anchored img{ width: 100% !important; height: auto !important; max-height: 180px !important; object-position: center !important; } .drill-banner__content{ width: 100%; padding: 14px 14px 16px; } #hero-products .drill-banner__content.drill-banner__content--with-type-filter{ transform: none; } } .breadcrumb{ margin: var(--ui-pad-block-tight) 2px var(--ui-pad-block-tight); font-size: 0.92rem; color: var(--muted); user-select: none; } .breadcrumb a{ color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .breadcrumb .crumb-sep{ padding: 0 8px; color: #b2b7bf; } .category-header{ padding: var(--ui-pad-block-tight) 2px 0; margin: 0 0 var(--ui-pad-block); } .category-header-label{ font-size: 1.25rem; font-weight: 700; color: var(--text); margin-bottom: 2px; } .category-header-desc{ font-size: 0.98rem; color: var(--muted); } /* Level 2 boxes: full size like top tier */ .product-grid--sublevel .product-box{ transform: none; } .product-grid--sublevel .product-box:hover{ transform: translateY(-2px); } /* Level 2 gfx: stretched to fit the product box */ .product-grid--sublevel .product-box img{ height: 220px; object-fit: fill; } /* Table level */ .product-table-wrap{ margin-top: var(--ui-pad-block-relaxed); margin-bottom: 0; border: 1px solid var(--ui-border-soft); border-radius: var(--ui-radius-lg); overflow: hidden; box-shadow: var(--ui-card-shadow); background: var(--ui-surface); /* White strip under tbody so last row clears the fixed footer when scrolling */ padding-bottom: var(--footer-table-clearance); } .product-table{ width: 100%; border-collapse: collapse; background: var(--ui-surface); } .product-table th, .product-table td{ padding: var(--ui-pad-block-tight) 10px; border-bottom: 1px solid var(--ui-border-soft); font-size: 0.92rem; text-align: center; vertical-align: middle; } .product-table thead th{ /* Light grey: mostly white (~85%), hint of --ui-surface-muted */ background: #fbfbfc; background: color-mix(in srgb, var(--ui-surface-muted) 15%, #ffffff 85%); font-weight: 650; padding-top: calc(var(--ui-pad-block-tight) * 4 / 3); padding-bottom: calc(var(--ui-pad-block-tight) * 4 / 3); } /* Breathing room + soft band under header (sortable thead → first data row) */ .product-table tbody tr:first-child td, .lamps-data-table tbody tr:first-child td{ padding-top: calc(var(--ui-pad-block-tight) + 10px); background-image: linear-gradient( to bottom, rgba(20, 24, 32, 0.07) 0%, rgba(20, 24, 32, 0.025) 55%, transparent 100% ); background-size: 100% 10px; background-repeat: no-repeat; background-position: left top; } /* Drill tables: first column “Sort →” cue (thumb / gfx) */ .table-drill-thumb-header{ vertical-align: middle; line-height: 1.2; } .table-drill-thumb-header__cue{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 100%; } .table-drill-thumb-header__sort{ font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #5a5f68; } .table-drill-thumb-header__arrow{ display: flex; align-items: center; justify-content: center; line-height: 0; } .table-drill-thumb-header__arrow-svg{ display: block; } .product-table tbody tr:nth-child(odd){ background-color: var(--ui-surface); } .product-table tbody tr:nth-child(even){ background-color: var(--ui-surface-muted); } .product-table tbody tr:hover{ /* 90% gray + 10% #1a5fb4, then each channel +10% toward 255 (same tint, brighter) */ background-color: rgb(214, 220, 228); background-color: color-mix( in srgb, color-mix(in srgb, rgb(230, 230, 230) 90%, #1a5fb4 10%) 90%, rgb(255, 255, 255) 10% ); } .product-table .thumb-cell{ width: 68px; max-width: 68px; } /* Thumbnail column: clip overflow; image scales down into fixed box */ .product-table tbody tr td:first-child{ width: 68px; max-width: 68px; overflow: hidden; vertical-align: middle; text-align: center; box-sizing: border-box; } .product-thumb{ width: 54px; height: 54px; max-width: 54px; max-height: 54px; min-width: 0; min-height: 0; box-sizing: border-box; border-radius: var(--ui-radius-sm); border: 1px solid var(--ui-border-soft); object-fit: contain; object-position: center; background: var(--ui-surface-muted); display: block; margin-left: auto; margin-right: auto; } .product-row{ cursor: pointer; } .product-table-wrap--sortable .product-table-sort-hint{ margin: 0 0 10px; padding: 0 2px; font-size: 0.84rem; font-weight: 500; color: var(--muted); line-height: 1.45; } .product-table th.product-th-sortable{ cursor: pointer; user-select: none; white-space: nowrap; font-weight: 650; border-radius: var(--ui-radius-sm); border: 1px solid transparent; padding: calc(7px * 4 / 3) 10px; margin: 1px 2px; box-shadow: var(--ui-inset-highlight), 0 0 0 1px rgba(0, 0, 0, 0.04); transition: background 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease; } .product-table th.product-th-sortable:hover{ background: var(--ui-surface-hover); border-color: var(--ui-border-soft); box-shadow: var(--ui-inset-highlight), 0 1px 3px rgba(0, 0, 0, 0.06); } .product-table th.product-th-sortable--active{ background: var(--ui-surface-sort-active); border-color: #e6c24a; box-shadow: var(--ui-inset-highlight), 0 0 0 1px rgba(230, 194, 74, 0.35); } .product-table th.product-th-sortable:focus-visible{ outline: 3px solid rgba(255, 180, 0, 0.45); outline-offset: 2px; } .product-th-sortable__glyph{ font-size: 0.72rem; opacity: 0.7; } .product-th-sortable--active .product-th-sortable__glyph{ opacity: 1; font-size: 0.8rem; } /* Sticky footer (tooltip text lives here) */ .footer{ position: fixed; left: 0; right: 0; bottom: 0; height: var(--footer-h); display: flex; align-items: center; justify-content: center; padding: 0 var(--ui-pad-block); background: var(--ui-surface); border-top: 1px solid var(--ui-border-soft); box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.04); color: var(--muted); font-size: 0.85rem; font-weight: 500; text-align: center; z-index: 10; transition: transform 0.18s ease-out, color 0.16s ease, background-color 0.16s ease, border-top-color 0.16s ease, box-shadow 0.18s ease, font-weight 0.12s ease, font-size 0.16s ease; } .footer.footer--tip-active{ transform: translateY(-2px) scale(1.006); color: #4a4e56; font-weight: 600; font-size: calc(0.85rem + 0.5px); background: rgba(245, 246, 250, 0.97); border-top-color: rgba(0, 0, 0, 0.055); box-shadow: 0 -5px 16px rgba(0, 0, 0, 0.055), inset 0 1px 0 rgba(255, 255, 255, 0.85); } @media (prefers-reduced-motion: reduce){ .footer{ transition-duration: 0.01ms; } .footer.footer--tip-active{ transform: none; } } /* Simple “only show master unless drill-down exists” behavior */ #hero-products:empty{ display: none; } .topbar-link[aria-current="page"]{ color: var(--text); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; } .about-page__brand-link{ text-decoration: none; color: inherit; } .about-page__main{ flex: 1; padding: 0 var(--ui-pad-inline) var(--footer-scroll-buffer); } .about-article{ max-width: 760px; margin: 0 auto; padding: clamp(28px, 5vw, 52px) 0 clamp(36px, 6vw, 64px); } .about-hero{ text-align: center; margin-bottom: clamp(28px, 4vw, 44px); padding-bottom: clamp(22px, 3vw, 36px); border-bottom: 1px solid var(--ui-border-soft); position: relative; } .about-hero::after{ content: ""; position: absolute; left: 50%; bottom: -2px; transform: translateX(-50%); width: min(120px, 28%); height: 3px; border-radius: 2px; background: linear-gradient(90deg, #e8940a, var(--accent)); } .about-hero__eyebrow{ margin: 0 0 10px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: #b86a00; } .about-hero__title{ margin: 0 0 12px; font-size: clamp(1.85rem, 4vw, 2.35rem); font-weight: 800; letter-spacing: -0.02em; color: var(--text); line-height: 1.15; } .about-hero__subtitle{ margin: 0 auto; max-width: 34em; font-size: 1.08rem; line-height: 1.55; color: var(--muted); } .about-article__body{ display: flex; flex-direction: column; gap: clamp(20px, 3vw, 28px); } .about-lead{ margin: 0; font-size: 1.12rem; line-height: 1.72; color: var(--text); } .about-panel{ margin: 0; padding: clamp(18px, 3vw, 24px) clamp(20px, 3vw, 26px); background: var(--ui-surface-muted); border: 1px solid var(--ui-border-soft); border-radius: var(--ui-radius-lg); box-shadow: var(--ui-card-shadow); } .about-panel--accent{ background: linear-gradient(135deg, #fffbf0 0%, #fff8e8 45%, var(--ui-surface-muted) 100%); border-color: rgba(255, 180, 0, 0.35); } .about-panel__title{ margin: 0 0 12px; font-size: 1.05rem; font-weight: 800; color: var(--text); letter-spacing: -0.01em; } .about-panel__text{ margin: 0; font-size: 1rem; line-height: 1.68; color: #3a3f47; } .about-finder{ margin: 4px 0 0; padding: 2px; border-radius: calc(var(--ui-radius-lg) + 2px); background: linear-gradient(135deg, #ffb400, #d97a00, #1a1d22); } .about-finder__inner{ padding: clamp(20px, 3vw, 28px) clamp(22px, 3vw, 30px); border-radius: var(--ui-radius-lg); background: var(--ui-surface); border: 1px solid var(--ui-border-soft); } .about-finder__title{ margin: 0 0 10px; font-size: 1.02rem; font-weight: 800; color: var(--text); } .about-finder__text{ margin: 0; font-size: 0.98rem; line-height: 1.65; color: var(--muted); } .about-mission{ margin: clamp(8px, 2vw, 16px) 0 0; padding: clamp(20px, 3vw, 26px) clamp(22px, 3vw, 28px); border-left: 4px solid var(--accent); background: var(--ui-surface-subtle); border-radius: 0 var(--ui-radius-md) var(--ui-radius-md) 0; box-shadow: var(--shadow); } .about-mission p{ margin: 0; font-size: 1.06rem; line-height: 1.65; font-weight: 600; font-style: italic; color: #2a2d33; } /* Contact sheet (reuses `.products-overlay` chrome) */ .contact-overlay__canvas{ padding-bottom: 48px; } .contact-overlay__inner{ max-width: min(720px, 100%); margin: 0 auto; padding: 4px 2px 12px; } .contact-overlay__title{ margin: 0 0 14px; font-size: 1.55rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text); } .contact-overlay__lead{ margin: 0 0 22px; font-size: 1.05rem; line-height: 1.65; color: #3a3f47; } .contact-overlay__section-title{ margin: 0 0 10px; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #b86a00; } .contact-overlay__office{ margin: 0 0 26px; padding: 18px 18px 16px; background: var(--ui-surface-muted); border: 1px solid var(--ui-border-soft); border-radius: var(--ui-radius-lg); box-shadow: var(--ui-card-shadow); } .contact-overlay__address{ margin: 0 0 14px; font-size: 1.02rem; line-height: 1.55; font-weight: 600; color: var(--text); } .contact-overlay__map{ position: relative; width: 100%; border-radius: var(--ui-radius-md); overflow: hidden; border: 1px solid var(--ui-border-soft); background: var(--ui-surface-subtle); } .contact-overlay__map-frame{ display: block; width: 100%; height: min(320px, 52vw); min-height: 200px; border: 0; } .contact-overlay__map-link{ display: inline-block; margin-top: 10px; font-size: 0.9rem; font-weight: 650; color: #1a5fb4; text-decoration: underline; text-underline-offset: 2px; } .contact-overlay__map-link:hover{ color: #0d3d7a; } .contact-overlay__team{ margin: 0 0 26px; padding: 18px 18px 16px; border: 1px solid var(--ui-border-soft); border-radius: var(--ui-radius-lg); background: var(--ui-surface); } .contact-overlay__person{ margin: 0 0 10px; font-size: 1rem; line-height: 1.5; color: var(--text); } .contact-overlay__person:last-child{ margin-bottom: 0; } .contact-overlay__person-name{ font-weight: 700; } .contact-overlay__person-phone{ font-weight: 600; color: #1a5fb4; text-decoration: none; } .contact-overlay__person-phone:hover{ text-decoration: underline; text-underline-offset: 2px; } .contact-overlay__dl{ margin: 0; padding: 0; } .contact-overlay__dl dt{ margin: 18px 0 6px; font-size: 0.82rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #b86a00; } .contact-overlay__dl dt:first-child{ margin-top: 0; } .contact-overlay__dl dd{ margin: 0; padding: 0 0 4px 0; font-size: 0.98rem; line-height: 1.62; color: var(--muted); border-bottom: 1px solid var(--ui-border-soft); } .contact-overlay__dl dd:last-of-type{ border-bottom: 0; } .contact-overlay__note{ margin: 22px 0 0; padding: 14px 16px; font-size: 0.92rem; line-height: 1.55; color: var(--muted); background: var(--ui-surface-muted); border-radius: var(--ui-radius-md); border: 1px solid var(--ui-border-soft); }