/* site.css — redesign layer (Phase 1b). Loaded AFTER Bootstrap in inc/head-assets.php.
*
* REVERSIBILITY: removing this one reverts the site to its pre-redesign look.
* SAFETY: this file grows one component at a time. Component styles are scoped to
* bespoke classes (.masthead, .credibility, .jump, .spec, …) that no current page
* uses, so they stay inert until the matching new markup ships. Only the small
* "base layer" below touches bare elements, and every rule there is a harmonising
* override (font, ink, link colour, focus) that cannot break layout.
*
* Canonical token values live in docs/design/tokens.css; keep them in sync.
* Bump ASSET_VER in inc/head-assets.php on every change to this file.
*/
/* ============================================================ FONT
* Public Sans (SIL OFL), self-hosted. One variable woff2 covers 300–700,
* so it's a single request. Metric fallback keeps layout stable pre-swap. */
@font-face{
font-family:"Public Sans";
src:url(fonts/PublicSans-VF.woff2) format("woff2");
font-weight:300 700;
font-style:normal;
font-display:swap;
}
/* ============================================================ TOKENS */
:root{
/* colour: monochrome + two accents (Thorlabs split) */
--page:#ffffff; --zone:#f5f6f7; --line:#dfe2e5;
--ink:#24272b; --ink-2:#4b5157; --ink-3:#6b7178;
--act:#005b94; --act-hover:#00456f; /* interaction blue */
--brand:#ec150a; --brand-text:#d81306; /* identity red / red-as-text */
--wa:#0d7266; /* WhatsApp — 5.81:1 on white */
--footer-bg:#24272b; --footer-ink:#c9cdd1;
/* type: Public Sans, one family, fixed PX scale.
* px, NOT rem: Bootstrap 3 sets html{font-size:10px}, which would shrink every
* rem token to 62.5%. px keeps these sizes correct regardless of the root and
* without touching the current Bootstrap page bodies. */
--font:"Public Sans","Helvetica Neue",Arial,sans-serif;
--fs-caption:12px; --fs-label:13px; --fs-table:14px; --fs-body:16px;
--fs-h3:19px; --fs-h2:23px; --fs-h1:30px; --fs-display:42px;
/* space: 4px base */
--s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px;
/* structure + motion */
--measure:1180px; --radius:2px; --keyline:3px;
--t-fast:150ms cubic-bezier(.22,1,.36,1);
--t-med:200ms cubic-bezier(.22,1,.36,1);
}
/* ============================================================ BASE LAYER
* Harmonising overrides only. No global reset, no bare `img`/`*` rules — those
* would alter the current Bootstrap pages. Component CSS is appended below as
* each partial is rebuilt and tested. */
body{font-family:var(--font);color:var(--ink-2);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,h5,h6{color:var(--ink)}
a{color:var(--act);transition:color var(--t-fast)}
a:hover,a:focus{color:var(--act-hover)}
:focus-visible{outline:2px solid var(--act);outline-offset:2px}
/* ============================================================ COMPONENTS */
/* shared container + scoped border-box for all redesign furniture
* (scoped so it can't disturb the current Bootstrap page bodies) */
.wrap{max-width:var(--measure);margin:0 auto;padding:0 var(--s4)}
.keyline,.keyline *,.utility,.utility *,.masthead,.masthead *{box-sizing:border-box}
/* ---- Task 1.4: masthead ---- */
.keyline{height:var(--keyline);background:var(--brand)}
.utility{border-bottom:1px solid var(--line)}
.utility .wrap{display:flex;justify-content:flex-end;align-items:center;gap:var(--s4);min-height:34px}
.utility .contacts{display:flex;gap:var(--s5);white-space:nowrap}
.utility .contacts a{font-size:var(--fs-label);font-weight:600;color:var(--ink-2);text-decoration:none}
.utility .contacts a:hover{color:var(--act)}
.utility .contacts .wa-link{color:var(--wa)}
.masthead{border-bottom:1px solid var(--line);background:var(--page)}
.masthead .wrap{display:flex;justify-content:space-between;align-items:center;gap:var(--s5);min-height:72px}
.brand{display:inline-flex;align-items:center;flex:none;text-decoration:none}
.brand img{height:46px;width:auto;display:block}
nav.primary{display:flex;align-items:center;gap:var(--s5)}
nav.primary>a,.has-sub>a{font-size:var(--fs-body);font-weight:600;color:var(--ink);text-decoration:none;white-space:nowrap;padding:var(--s2) 0;border-bottom:2px solid transparent}
nav.primary>a:hover,.has-sub>a:hover{color:var(--act)}
nav.primary a[aria-current]{color:var(--act);border-bottom-color:var(--act)}
.has-sub{position:relative;display:inline-flex;align-items:center}
.has-sub>a::after{content:"\25BE";font-size:.7em;margin-left:.35em;color:var(--ink-3)}
.subnav{position:absolute;top:100%;left:0;min-width:240px;background:var(--page);border:1px solid var(--line);box-shadow:0 6px 20px rgba(0,0,0,.08);padding:var(--s2) 0;display:none;z-index:50}
.has-sub:hover .subnav,.has-sub:focus-within .subnav{display:block}
.subnav a{display:block;padding:var(--s2) var(--s4);font-size:var(--fs-label);font-weight:500;color:var(--ink-2);text-decoration:none;border:0;white-space:nowrap}
.subnav a:hover{background:var(--zone);color:var(--act)}
@media (max-width:820px){
.masthead .wrap{flex-wrap:wrap;min-height:0;padding-top:var(--s3);padding-bottom:var(--s3);gap:var(--s3)}
nav.primary{width:100%;overflow-x:auto;gap:var(--s4);-webkit-overflow-scrolling:touch}
nav.primary::-webkit-scrollbar{display:none}
.has-sub>a::after{display:none} /* touch: Products is a plain link to all-product.php */
.subnav{display:none!important}
}
/* ---- Task 1.5: credibility band + footer ---- */
.credibility,.credibility *,.site-footer,.site-footer *{box-sizing:border-box}
.credibility{background:var(--zone);border-top:1px solid var(--line)}
.credibility>.wrap{padding-top:var(--s6);padding-bottom:var(--s6)}
.credibility .master{margin:0;font-size:var(--fs-h3);font-weight:600;color:var(--ink);max-width:60ch}
.credibility .master .co{font-weight:700}
.credibility .dist{margin:var(--s4) 0 0;font-size:var(--fs-table);color:var(--ink-3)}
.credibility .marks{margin-top:var(--s3);display:flex;flex-wrap:wrap;gap:var(--s5) var(--s6);align-items:center}
.credibility .marks img{height:38px;width:auto;mix-blend-mode:multiply}
.credibility .facts{margin:var(--s5) 0 0;font-size:var(--fs-label);color:var(--ink-3);max-width:80ch}
.site-footer{background:var(--footer-bg);color:var(--footer-ink)}
.site-footer>.wrap{padding-top:var(--s7);padding-bottom:var(--s6)}
.site-footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s6)}
.site-footer h2{margin:0 0 var(--s3);font-size:var(--fs-table);font-weight:700;color:#fff}
.site-footer p{margin:0 0 var(--s3);font-size:var(--fs-table);line-height:1.6}
.site-footer a{color:var(--footer-ink);text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.site-footer .social a{font-weight:600}
.site-footer .reg{margin:0}
.site-footer .reg dt{float:left;clear:left;width:7.5em;color:#8d939a;font-size:var(--fs-label);line-height:1.9}
.site-footer .reg dd{margin:0 0 0 8em;font-size:var(--fs-label);line-height:1.9;font-variant-numeric:tabular-nums}
.site-footer .fcontact{font-style:normal;font-size:var(--fs-table);line-height:1.7}
.site-footer .flinks{list-style:none;margin:0;padding:0}
.site-footer .flinks li{font-size:var(--fs-table);line-height:1.95}
.site-footer .legal{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid #3a3e43;font-size:var(--fs-label);color:#8d939a;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);justify-content:space-between}
.site-footer .legal a{color:#8d939a}
.site-footer .legal a:hover{color:var(--footer-ink)}
@media (max-width:600px){ .credibility .marks img{height:30px} }
/* ---- Task 1.6: mobile Call/WhatsApp action bar ---- */
.action-bar,.action-bar *{box-sizing:border-box}
.action-bar{display:none}
@media (max-width:767px){
body{padding-bottom:52px}
.action-bar{position:fixed;bottom:0;left:0;right:0;display:flex;background:var(--page);border-top:1px solid var(--line);z-index:60}
.action-bar a{flex:1;display:flex;align-items:center;justify-content:center;min-height:48px;font-size:var(--fs-table);font-weight:700;text-decoration:none}
.action-bar a+a{border-left:1px solid var(--line)}
.action-bar .call{color:var(--ink)}
.action-bar .wa{color:var(--wa)}
}
/* ============================================================ LEGACY SUPPRESSION
* The old `.hm-pop-up` red vertical "Enquiry" tab (a fixed-position anchor with a
* background image, styled by `.hm-pop-up a` in style.css) is retired: enquiry is
* now served by the masthead Contact link, the footer, and the mobile action bar.
* Hidden here site-wide (covers un-ported pages too); the markup is stripped from
* each page body as it is ported. Removing site.css restores it, like everything
* else in the redesign layer. */
.hm-pop-up{display:none}
/* ============================================================ CATALOG COMPONENTS
* Plan 2 Task 2.0. Ported 1:1 from docs/design/catalog-components.html (minus its
* .demo mockup chrome, tokens, reset, action-bar and reduced-motion — those live
* above). Every selector is class- or new-element-scoped; a 2026-07-23 audit
* confirmed none of these class tokens appear in any live page body or in
* style.css/media.css, so this whole block is inert until a ported catalog body
* uses it. NOTE: the mockup's `section.block` is renamed `section.group` here —
* `.block` collides with old CSS and 13 live pages; `.group` is clean.
* See docs/superpowers/plans/2026-07-23-phase-1b-redesign-php-port.md (Plan 2). */
.catalog-body{box-sizing:border-box}
.catalog-body *{box-sizing:border-box}
/* 1 — title block + breadcrumb (replaces .inner-banner red band + FA chevrons) */
.crumbs{list-style:none;margin:0;padding:0;font-size:var(--fs-label);color:var(--ink-3);display:flex;flex-wrap:wrap;gap:var(--s2)}
.crumbs li{display:flex;gap:var(--s2)}
.crumbs li+li::before{content:"/";color:var(--line)}
.crumbs a{color:var(--ink-3);text-decoration:none}
.crumbs a:hover{color:var(--act)}
.title{padding:var(--s5) 0 var(--s4);border-bottom:1px solid var(--line)}
.title h1{font-size:var(--fs-h1);font-weight:700;color:var(--ink);margin:var(--s2) 0 0}
.title .intro{margin:var(--s2) 0 0;max-width:70ch;font-size:var(--fs-table)}
.title .pdfs{margin:var(--s2) 0 0;font-size:var(--fs-label)}
/* 2 — section headings (replaces .lamp-head h4 soup +
dividers) */
section.group{padding:var(--s7) 0 0}
section.group:last-of-type{padding-bottom:var(--s8)}
h2.sect{font-size:var(--fs-h2);font-weight:700;color:var(--ink);margin:0 0 var(--s4)}
h3.sub{font-size:var(--fs-h3);font-weight:600;color:var(--ink);margin:var(--s5) 0 var(--s3)}
.item-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s3);margin:0 0 var(--s3)}
.item-head h3{font-size:var(--fs-h3);font-weight:600;color:var(--ink)}
.model{font-size:var(--fs-label);color:var(--ink-3)}
.model b{color:var(--ink);font-weight:600}
.family-label{font-size:var(--fs-label);font-weight:600;color:var(--act);margin:0 0 var(--s1)}
/* 3 — spec sheet: 2-col label/value (most tables + key-value pen-fancy bullets) */
.sheet-wrap{overflow-x:auto}
table.sheet{border-collapse:collapse;width:100%;max-width:720px;font-size:var(--fs-table)}
table.sheet th{width:44%;text-align:left;font-weight:400;color:var(--ink-2);padding:9px 12px;vertical-align:top}
table.sheet td{color:var(--ink);font-weight:600;padding:9px 12px;font-variant-numeric:tabular-nums}
table.sheet tbody tr{border-bottom:1px solid var(--line)}
table.sheet tbody tr:first-child{border-top:2px solid var(--ink)}
/* 4 — matrix table: multi-header + units row (the rowspan spec tables) */
.spec-wrap{overflow-x:auto}
table.spec{border-collapse:collapse;width:100%;min-width:560px;font-size:var(--fs-table)}
table.spec thead th{background:var(--zone);font-weight:700;color:var(--ink);text-align:left;padding:10px 12px;white-space:nowrap;vertical-align:bottom}
table.spec thead tr.units th{font-weight:400;color:var(--ink-3);font-size:var(--fs-label);padding-top:0}
table.spec td{color:var(--ink);padding:10px 12px;white-space:nowrap}
table.spec tbody tr:nth-child(odd){background:var(--zone)}
table.spec .num{font-variant-numeric:tabular-nums}
table.spec td.part a{font-weight:700;font-variant-numeric:tabular-nums}
table.spec td.doc a,table.spec td.enq a{font-size:var(--fs-label);font-weight:600}
.foot-note{margin-top:var(--s2);font-size:var(--fs-caption);color:var(--ink-3)}
/* 5 — feature list: real (replaces 162 fa-pen-fancy paragraphs).
* list-style is set explicitly: style.css has a global `ul{list-style:none}`
* that would otherwise leave these as flat, marker-less text. */
ul.features{list-style:disc;max-width:75ch;padding-left:1.25em;margin:0}
ul.features li{margin-bottom:var(--s2)}
ul.features li::marker{color:var(--ink-3)}
ul.features ul{list-style:circle;padding-left:1.25em;margin-top:var(--s2)}
ul.features b{color:var(--ink)}
ul.features.apps li b{display:inline-block;min-width:9em}
/* .cols — long part-number lists flow into responsive columns (1 col on mobile,
* more on wider screens). break-inside keeps each code on one line. */
ul.features.cols{columns:19em;column-gap:var(--s6);max-width:none}
ul.features.cols li{break-inside:avoid}
ul.features.cols .part{font-variant-numeric:tabular-nums;color:var(--ink)}
/* 6 — figure: one component for ultra-box/uvc-light-box/lamp-box/mosclean-box */
figure.fig{border:1px solid var(--line);border-radius:var(--radius);background:var(--page);padding:var(--s4);text-align:center;margin:0}
figure.fig img{display:inline-block;max-width:100%;height:auto}
figure.fig figcaption{margin-top:var(--s3);font-size:var(--fs-label);color:var(--ink-2)}
.fig-grid{display:flex;flex-wrap:wrap;gap:var(--s4)}
.fig-grid figure.fig{flex:1 1 180px;max-width:260px}
.fig-grid.wide figure.fig{flex-basis:320px;max-width:480px}
/* 7 — document links: replaces .pdf-botton / .pdf-botton2 (red, grey-on-hover bug) */
.doc-list{display:flex;flex-wrap:wrap;gap:var(--s3)}
a.doc-link{display:inline-flex;align-items:center;gap:var(--s2);border:1px solid var(--line);border-radius:var(--radius);padding:9px 14px;font-size:var(--fs-table);font-weight:600;color:var(--ink);text-decoration:none}
a.doc-link .ft{font-size:var(--fs-caption);font-weight:700;color:var(--ink-3);border:1px solid var(--line);border-radius:var(--radius);padding:0 4px;line-height:16px}
a.doc-link:hover,a.doc-link:focus-visible{color:var(--act);border-color:var(--act);text-decoration:none}
a.doc-link:hover .ft{color:var(--act);border-color:var(--act)}
/* 8 — split: content + media aside (replaces col-md-8/col-md-4 pairs) */
.split{display:flex;flex-wrap:wrap;gap:var(--s6);align-items:flex-start}
.split>.main{flex:1 1 480px;min-width:0}
.split>.aside{flex:0 1 280px;display:flex;flex-direction:column;gap:var(--s4)}
/* 9 — safety note: full-border box, red on the one word that earns it */
.safety{border:1px solid var(--line);border-radius:var(--radius);padding:var(--s5);max-width:75ch}
.safety h4{font-size:var(--fs-table);font-weight:700;color:var(--ink);margin:0 0 var(--s2)}
.safety h4 .danger{color:var(--brand-text)}
.safety p{font-size:var(--fs-table);margin:0}
.safety p+p{margin-top:var(--s3)}
/* 10 — fine print: manufacturer disclaimers */
.fine{font-size:var(--fs-label);color:var(--ink-3);max-width:75ch}
.fine p{margin:0}
.fine p+p{margin-top:var(--s3)}
/* jump-bar: replaces Bootstrap tab-panes / pills sidebar. Everything on one page,
* Ctrl+F finds any part. Sticky; targets carry scroll-margin so anchors clear the
* bar (scoped to targets, not a bare html{scroll-padding} rule — keeps this inert). */
nav.jump{position:sticky;top:0;z-index:30;background:var(--page);border-bottom:1px solid var(--line)}
nav.jump .wrap{display:flex;gap:var(--s5);overflow-x:auto;scrollbar-width:none}
nav.jump .wrap::-webkit-scrollbar{display:none}
nav.jump a{flex:none;font-size:var(--fs-label);font-weight:600;color:var(--ink-2);line-height:42px;border-bottom:2px solid transparent;white-space:nowrap;text-decoration:none}
nav.jump a:hover{color:var(--act)}
nav.jump a.on{color:var(--act);border-bottom-color:var(--act)}
section.group[id]{scroll-margin-top:calc(44px + var(--s3))}
/* rhythm — readable measure for body prose, and consistent spacing between the
* flow blocks inside a section. Vertical margins collapse in normal flow, so a
* block's margin-top merges with a preceding heading's margin-bottom (no doubling).
* More-specific rules (.title .intro, .safety p, .fine p) keep their own measure. */
.catalog-body p{max-width:75ch}
.spec-wrap,.sheet-wrap,.fig-grid,.doc-list,.split,.safety,.fine{margin-top:var(--s5)}
.fig-grid figure.fig{margin-top:0}
.fig-grid+.doc-list{margin-top:var(--s3)}
@media (max-width:600px){ .split>.aside{flex-basis:100%} }