, and an inline
anchor fragments the border/padding across line boxes and ignores min-height.
It was a before v0.3.2. If this is removed, the card outline breaks. */
display:block;color:inherit;
position:relative;background:linear-gradient(180deg,var(--panel),var(--raised));
border:1px solid var(--edge);padding:1.6rem;min-height:240px;overflow:hidden;
transition:.3s;clip-path:var(--chamfer);
}
.zcard:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:0 14px 40px rgba(0,0,0,.5),0 0 30px rgba(46,127,209,.18)}
.zcard:focus-within{border-color:var(--accent)}
.zcard__bg{position:absolute;right:-30px;bottom:-30px;opacity:.08;font-family:var(--f-cond);font-size:8rem;color:var(--brand);line-height:.8}
.zcard__zone{display:inline-flex;align-items:center;gap:.4rem;font-family:var(--f-mono);font-size:.64rem;letter-spacing:.12em;
padding:.25rem .5rem;border:1px solid var(--edge);color:var(--inkdim);margin-bottom:1rem}
.zcard__zone.is-mission{color:#3fe07a;border-color:rgba(63,224,122,.4)}
.zcard__zone.is-proto{color:var(--alert);border-color:rgba(212,85,42,.4)}
.zcard__zone.is-doctrine{color:var(--accent);border-color:rgba(91,166,232,.4)}
.zcard h3{font-size:1.25rem;margin:.6rem 0 .8rem;color:var(--ink)}
.zcard p{color:var(--inkmuted);font-size:.92rem;margin:0 0 1rem}
.zcard__spec{font-family:var(--f-mono);font-size:.7rem;color:var(--inkdim);border-top:var(--hair);padding-top:.7rem}
/* =====================================================================
PRODUCTS — catalogue grid + detail
===================================================================== */
/* NOTE — every selector in this block is body-scoped ON PURPOSE, and removing that will
silently break the layout. `.prodcards` is a WordPress columns block, so it also carries
`is-layout-flex`, and WP's global stylesheet ships `body .is-layout-flex{display:flex}`.
That is specificity (0,1,1); a bare `.prodcards{display:grid}` is (0,1,0), so the grid LOST
and the cards rendered as a flex row with `flex-wrap:nowrap!important` — one row at every
width, no wrapping, and every grid-template-columns rule here inert.
Kevin Braverman reported the Products page still four across on 2026-08-06; this was why.
`body .prodcards` is (0,1,1) and wins on source order; `body:not(.home) .prodcards` is
(0,2,1) and wins outright. */
body .prodcards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
/* /products/ runs TWO-up: the Overwatch group has four cards, so two-up gives 2+2.
Home stays three-up — its single group holds exactly three cards. */
body:not(.home) .prodcards{grid-template-columns:repeat(2,1fr)}
@media(max-width:980px){ body .prodcards{grid-template-columns:repeat(2,1fr)} }
/* Both selectors listed at 640px: the (0,2,1) products rule above would otherwise out-rank a
(0,1,1) single-column rule and keep /products/ two-up on a phone. */
@media(max-width:640px){ body .prodcards, body:not(.home) .prodcards{grid-template-columns:1fr} }
/* A wider card alone would not enlarge the artwork — .pcard__media is a fixed height and the
image is capped by max-height, so the extra width would just become empty space either side.
Raising both is what actually makes the images bigger, which is what Kevin asked for. */
body:not(.home) .pcard__media{height:320px}
body:not(.home) .pcard__media img{max-height:288px}
body:not(.home) .pcard__desc{font-size:.95rem}
/* Below 980px the base rule is already two-up, so drop back to the original proportions
rather than carrying desktop-sized artwork onto narrow screens. */
@media(max-width:980px){
body:not(.home) .pcard__media{height:230px}
body:not(.home) .pcard__media img{max-height:200px}
}
.pcard{
position:relative;background:radial-gradient(120% 90% at 50% 0%,rgba(46,127,209,.12),var(--raised) 60%);
border:1px solid var(--edge);overflow:hidden;transition:.35s;display:flex;flex-direction:column;
}
.pcard:hover{border-color:var(--accent);transform:translateY(-6px);box-shadow:0 18px 50px rgba(0,0,0,.55),0 0 40px rgba(46,127,209,.22)}
.pcard__media{position:relative;height:230px;display:flex;align-items:center;justify-content:center;
background:
radial-gradient(60% 80% at 50% 90%,rgba(26,98,173,.35),transparent 70%),
linear-gradient(rgba(46,127,209,.06) 1px,transparent 1px) 0 0/30px 30px,
linear-gradient(90deg,rgba(46,127,209,.06) 1px,transparent 1px) 0 0/30px 30px;
border-bottom:var(--hair)}
.pcard__media img{max-height:200px;object-fit:contain;filter:drop-shadow(0 14px 26px rgba(0,0,0,.6));transition:.4s}
.pcard:hover .pcard__media img{transform:translateY(-6px) scale(1.04)}
.pcard__media::after{ /* platform reflection */
content:"";position:absolute;left:18%;right:18%;bottom:8px;height:1px;
background:radial-gradient(50% 100%,rgba(91,166,232,.5),transparent);filter:blur(1px)}
.pcard__tag{position:absolute;top:10px;left:10px;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.1em;
color:var(--inkdim);border:1px solid var(--edge);padding:.18rem .4rem;background:rgba(5,10,18,.6)}
.pcard__tag.is-proto{color:var(--alert);border-color:rgba(212,85,42,.4)}
.pcard__body{padding:1.1rem 1.2rem 1.3rem;flex:1;display:flex;flex-direction:column}
.pcard__fam{font-family:var(--f-mono);font-size:.64rem;color:var(--accent);letter-spacing:.12em}
.pcard h3{font-size:1.15rem;margin:.3rem 0 .6rem;color:var(--phosphor)}
.pcard__desc{color:var(--inkmuted);font-size:.86rem;margin:0 0 .9rem;flex:1}
.pcard__stats{display:flex;gap:1rem;border-top:var(--hair);padding-top:.7rem}
.pcard__stats .s{flex:1}
/* Quantico, everywhere .pcard renders — home AND /products/ (Kevin Braverman, 2026-08-06).
Changed here at source rather than layering another override, so there is ONE rule for these
figures. The earlier body.home-scoped override has been removed as redundant. */
.pcard__stats .v{font-family:var(--f-quant);font-size:1.05rem;color:var(--ink)}
.pcard__stats .k{font-family:var(--f-mono);font-size:.58rem;color:var(--inkdim);letter-spacing:.08em}
.pcard__cta{margin-top:.9rem;font-family:var(--f-disp);font-size:.72rem;letter-spacing:.14em;color:var(--accent);
display:flex;align-items:center;gap:.4rem}
.pcard__cta .ar{transition:.25s}
.pcard:hover .pcard__cta .ar{transform:translateX(4px)}
/* ---------- product detail (console) ---------- */
.pd{display:grid;grid-template-columns:1fr 1.1fr;gap:2.4rem;align-items:start}
@media(max-width:900px){.pd{grid-template-columns:1fr}}
.pd__hero{position:relative;background:radial-gradient(80% 70% at 50% 40%,rgba(46,127,209,.22),var(--raised) 70%);
border:1px solid var(--edge);padding:2rem;min-height:340px;display:flex;align-items:center;justify-content:center;
clip-path:var(--chamfer);overflow:hidden}
.pd__hero::before{content:"";position:absolute;inset:0;
background:linear-gradient(rgba(46,127,209,.07) 1px,transparent 1px) 0 0/34px 34px,
linear-gradient(90deg,rgba(46,127,209,.07) 1px,transparent 1px) 0 0/34px 34px;
mask:radial-gradient(60% 60%,#000 40%,transparent 100%)}
.pd__hero img{max-height:300px;position:relative;filter:drop-shadow(0 18px 34px rgba(0,0,0,.6));z-index:1}
.pd__vlabel{position:absolute;left:8px;top:50%;transform:translateY(-50%) rotate(-90deg);transform-origin:left top;
font-family:var(--f-mono);font-size:.62rem;letter-spacing:.3em;color:var(--inkdim);white-space:nowrap}
.pd__h1{font-size:clamp(2rem,4.5vw,3.4rem);color:var(--phosphor)}
.pd__sub{color:var(--inkmuted);font-size:1.05rem;margin:1rem 0 1.6rem;max-width:54ch}
.pd__stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--edge);border:var(--hair);margin-bottom:1.8rem}
.pd__stats .c{background:var(--raised);padding:.9rem .8rem;text-align:center}
.pd__stats .v{font-family:var(--f-cond);font-size:1.5rem;color:var(--phosphor);line-height:1}
.pd__stats .k{font-family:var(--f-mono);font-size:.6rem;color:var(--inkdim);letter-spacing:.1em;margin-top:.3rem}
@media(max-width:560px){.pd__stats{grid-template-columns:repeat(2,1fr)}}
.pd__why{list-style:none;padding:0;margin:0 0 2rem}
.pd__why li{position:relative;padding:.5rem 0 .5rem 1.6rem;color:var(--ink);border-bottom:var(--hair)}
.pd__why li::before{content:"▸";position:absolute;left:0;color:var(--accent)}
.spec{border:1px solid var(--edge);clip-path:var(--chamfer)}
.spec__h{font-family:var(--f-disp);font-size:.74rem;letter-spacing:.18em;color:var(--accent);
padding:.7rem 1rem;border-bottom:var(--hair);background:rgba(46,127,209,.06);display:flex;justify-content:space-between}
.spec__row{display:grid;grid-template-columns:14rem 1fr;border-bottom:var(--hair);font-size:.9rem}
.spec__row:last-child{border-bottom:0}
.spec__row .k{font-family:var(--f-mono);font-size:.7rem;color:var(--inkdim);letter-spacing:.06em;padding:.6rem .8rem;background:rgba(15,27,46,.5)}
.spec__row .v{padding:.6rem .8rem;color:var(--ink)}
@media(max-width:560px){.spec__row{grid-template-columns:1fr}.spec__row .k{border-bottom:0}}
/* =====================================================================
TELEMETRY TICKER
===================================================================== */
.ticker{overflow:hidden;border-top:var(--hair);border-bottom:var(--hair);background:var(--raised);padding:.6rem 0}
.ticker__track{display:flex;gap:3rem;white-space:nowrap;font-family:var(--f-mono);font-size:.74rem;color:var(--inkdim);
animation:tick 40s linear infinite}
.ticker__track span b{color:var(--phosphor);font-weight:400}
@keyframes tick{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
/* =====================================================================
REEL / media (16mm nostalgic)
===================================================================== */
.reel{position:relative;border:1px solid var(--edge);padding:10px;background:var(--raised);clip-path:var(--chamfer)}
.reel__frame{position:relative;aspect-ratio:16/9;background:
radial-gradient(60% 70% at 50% 50%,rgba(46,127,209,.18),var(--base));
display:flex;align-items:center;justify-content:center;overflow:hidden}
.reel__frame::before{content:"";position:absolute;inset:0;
background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 2px,transparent 2px 4px);opacity:.5}
.reel__play{width:64px;height:64px;border:2px solid var(--phosphor);border-radius:50%;display:flex;align-items:center;justify-content:center;
color:var(--phosphor);font-size:1.4rem;box-shadow:0 0 30px rgba(168,211,245,.4);transition:.3s}
.reel__play:hover{transform:scale(1.1);box-shadow:0 0 50px rgba(168,211,245,.7)}
.reel__slate{position:absolute;bottom:8px;left:10px;font-family:var(--f-mono);font-size:.62rem;color:var(--phosphor);
background:rgba(0,0,0,.5);padding:.2rem .5rem;letter-spacing:.1em}
.reel__hole{position:absolute;top:4px;bottom:4px;width:10px;display:flex;flex-direction:column;justify-content:space-around;padding:6px 0}
.reel__hole::before,.reel__hole::after,.reel__hole i{content:"";display:block;width:8px;height:12px;background:var(--base);border-radius:2px}
.reel__hole.l{left:4px}.reel__hole.r{right:4px}
/* ---------- doctrine / blueprint (light nostalgic) ---------- */
.blueprint{background:var(--paper);color:var(--paperink)}
.blueprint *{border-color:color-mix(in srgb,var(--paperink) 18%,transparent)}
.blueprint .kicker{color:var(--brand)}
.blueprint h2,.blueprint h3{color:var(--paperink)}
.blueprint p{color:var(--paperinkmuted)}
.blueprint::before{background:repeating-linear-gradient(90deg,rgba(12,22,38,.10) 0 1px,transparent 1px 28px),
repeating-linear-gradient(0deg,rgba(12,22,38,.10) 0 1px,transparent 1px 28px)}
.dwg-stamp{font-family:var(--f-mono);font-size:.7rem;color:var(--paperinkmuted);border:1px solid color-mix(in srgb,var(--paperink) 20%,transparent);
padding:.4rem .7rem;display:inline-block}
/* ---------- contact ---------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:start}
@media(max-width:760px){.contact-grid{grid-template-columns:1fr}}
.form{display:flex;flex-direction:column;gap:1rem}
.form .field{display:flex;flex-direction:column;gap:.35rem}
.form label{font-family:var(--f-mono);font-size:.72rem;color:var(--inkdim);letter-spacing:.08em;text-transform:uppercase}
.form input,.form textarea,.form select{background:var(--raised);border:1px solid var(--edge);color:var(--ink);
padding:.7rem .8rem;font-family:var(--f-body);font-size:.95rem;width:100%;box-sizing:border-box}
.form input:focus,.form textarea:focus,.form select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 1px rgba(91,166,232,.3) inset}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:480px){.form .row{grid-template-columns:1fr}}
.form .btn{align-self:flex-start;margin-top:.4rem;border:0}
/* ---------- map ---------- */
.map-wrap{position:relative;border:1px solid var(--edge);clip-path:var(--chamfer);overflow:hidden;background:var(--raised)}
.map-wrap iframe{display:block;width:100%;height:360px;border:0;filter:invert(.92) hue-rotate(180deg) saturate(.7) brightness(.9)}
.map-wrap__bar{font-family:var(--f-mono);font-size:.7rem;color:var(--inkdim);letter-spacing:.08em;
padding:.6rem .8rem;border-bottom:var(--hair);display:flex;justify-content:space-between;align-items:center}
.map-wrap__bar .pin{color:var(--accent)}
.map-info{margin-top:1.2rem}
.map-info h3{font-family:var(--f-disp);font-size:1rem;color:var(--phosphor);margin:0 0 .4rem}
.map-info p{font-family:var(--f-body);font-size:.86rem;color:var(--inkmuted);margin:0 0 .3rem}
.map-info .lbl{font-family:var(--f-mono);font-size:.66rem;color:var(--inkdim);letter-spacing:.06em;margin-right:.4rem}
/* ---------- footer ---------- */
.ftr{border-top:var(--hair);background:var(--raised);padding:3rem 0 2rem;margin-top:4rem}
.ftr__in{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem}
@media(max-width:760px){.ftr__in{grid-template-columns:1fr 1fr}}
.ftr__col h4{font-family:var(--f-disp);font-size:.74rem;letter-spacing:.16em;color:var(--accent);margin:0 0 1rem}
.ftr__col a,.ftr__col p{color:var(--inkmuted);font-size:.86rem;display:block;padding:.2rem 0}
.ftr__col a:hover{color:var(--phosphor)}
.ftr__bot{border-top:var(--hair);margin-top:2rem;padding-top:1.4rem;font-family:var(--f-mono);font-size:.66rem;
color:var(--inkdim);display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem}
/* ---------- reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(22px);transition:.7s cubic-bezier(.2,.7,.2,1)}
[data-reveal].is-in{opacity:1;transform:none}
/* ---------- page header ---------- */
.pagehead{padding:5rem 0 2rem;position:relative;border-bottom:var(--hair)}
.pagehead::before{content:"";position:absolute;inset:0;
background:linear-gradient(rgba(46,127,209,.08) 1px,transparent 1px) 0 0/40px 40px,
linear-gradient(90deg,rgba(46,127,209,.08) 1px,transparent 1px) 0 0/40px 40px;
mask:linear-gradient(180deg,#000,transparent);opacity:.6}
.pagehead__in{position:relative}
.breadcrumb{font-family:var(--f-mono);font-size:.7rem;color:var(--inkdim);letter-spacing:.08em;margin-bottom:.8rem}
.breadcrumb a{color:var(--inkmuted)}
.breadcrumb .sep{color:var(--inkdim);margin:0 .4rem}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{animation:none!important;transition:none!important}
[data-reveal]{opacity:1;transform:none}
}
/* =====================================================================
LEADERSHIP
===================================================================== */
.leaders{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
@media(max-width:980px){.leaders{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.leaders{grid-template-columns:1fr}}
.lcard{
position:relative;background:linear-gradient(180deg,var(--panel),var(--raised));
border:1px solid var(--edge);overflow:hidden;transition:.35s;
}
.lcard:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:0 14px 40px rgba(0,0,0,.5),0 0 30px rgba(46,127,209,.18)}
.lcard__photo{
position:relative;height:280px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;
background:
radial-gradient(60% 80% at 50% 90%,rgba(26,98,173,.30),transparent 70%),
linear-gradient(rgba(46,127,209,.05) 1px,transparent 1px) 0 0/24px 24px,
linear-gradient(90deg,rgba(46,127,209,.05) 1px,transparent 1px) 0 0/24px 24px;
border-bottom:var(--hair);
}
.lcard__photo img{max-height:260px;object-fit:contain;filter:drop-shadow(0 10px 20px rgba(0,0,0,.5));transition:.4s}
.lcard:hover .lcard__photo img{transform:translateY(-4px) scale(1.03)}
.lcard__body{padding:1.1rem 1.2rem 1.3rem}
.lcard__name{font-family:var(--f-disp);font-size:1.05rem;font-weight:700;color:var(--phosphor);line-height:1.2;margin:0}
.lcard__role{font-family:var(--f-mono);font-size:.64rem;color:var(--accent);letter-spacing:.12em;text-transform:uppercase;margin:.4rem 0 .7rem}
.lcard__bio{font-family:var(--f-body);font-size:.82rem;color:var(--inkmuted);margin:0;line-height:1.5}
.lcard__tag{position:absolute;top:8px;left:8px;font-family:var(--f-mono);font-size:.58rem;letter-spacing:.1em;
color:var(--inkdim);border:1px solid var(--edge);padding:.15rem .35rem;background:rgba(5,10,18,.6)}
/* =====================================================================
WORDPRESS THEME COMPONENTS — header, nav, footer, shortcodes
These styles match the WP template markup (parts/header.html, etc.)
which uses uu-* class names. Converted from v0.1 variables to v0.2.
===================================================================== */
/* ==========================================================================
0. LOCAL DERIVED TOKENS
Every colour and family comes from theme.json. The only locals declared
here are composites (hairlines, glow, easing) that cannot be expressed as
a palette entry.
========================================================================== */
:root {
--uu-hair: rgba(91,166,232,.20); /* the logo's negative space */
--uu-hair-2: rgba(91,166,232,.10);
--uu-hair-3: rgba(91,166,232,.34);
--uu-glow: rgba(46,127,209,.55);
--uu-glow-2: rgba(46,127,209,.18);
--uu-ease: cubic-bezier(.22,.61,.36,1);
--uu-head-rail: 40px;
--uu-head-brand: 94px;
--uu-head-brand-stuck: 68px;
--uu-logo: 54px;
--uu-logo-stuck: 40px;
--uu-gutter: clamp(1.25rem, 4vw, 3rem);
--uu-wide: 1280px;
}
/* ==========================================================================
8. LOGO-DERIVED GEOMETRY
Three-tier step, segmented-six, 30-degree chamfer, 45-degree taper,
uniform hairline, needle apex. No arches anywhere.
========================================================================== */
/* three-tier step — from the wing feathers / stepped pillars */
.uu-step { display:flex;flex-direction:column;gap:3px;width:100% }
.uu-step span { display:block;height:2px;background:var(--brand) }
.uu-step span:nth-child(1) { width:100%;opacity:1 }
.uu-step span:nth-child(2) { width:74%;opacity:.66 }
.uu-step span:nth-child(3) { width:48%;opacity:.38 }
/* mirrored (bilateral) version, centred */
.uu-step--mid span { margin:0 auto }
/* inverted: shortest tier first, used rising out of a baseline */
.uu-step--up { flex-direction:column-reverse }
/* hairline — uniform weight everywhere, like the logo's negative space */
.uu-hair { height:1px;background:var(--edge);border:0;margin:0 }
.uu-hair--seg {
height:1px;border:0;margin:0;
background:repeating-linear-gradient(90deg,
var(--brand) 0 46px, transparent 46px 54px);
opacity:.5;
}
/* segmented band of six — from the 6 pillars */
.uu-six { display:grid;grid-template-columns:repeat(6,1fr);gap:2px }
.uu-six i { display:block;height:4px;background:var(--edge) }
.uu-six i.on { background:var(--active);box-shadow:0 0 8px var(--active) }
/* crest-style rotated vertical label — Coulson Condensed, never mono */
.uu-vlabel {
writing-mode:vertical-rl;text-orientation:mixed;
font-family:var(--f-cond);
letter-spacing:.3em;text-transform:uppercase;
color:var(--inkdim);font-size:0.8125rem;
}
/* ==========================================================================
10. HEADER — two tier: utility rail over brand row
========================================================================== */
.uu-head {
position:sticky;top:0;z-index:400;
background:rgba(5,10,18,.94);
backdrop-filter:saturate(140%) blur(10px);
border-bottom:1px solid var(--edge);
transition:background .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s cubic-bezier(.22,.61,.36,1);
}
.uu-head.is-stuck {
background:rgba(5,10,18,.985);
box-shadow:0 1px 0 var(--edge), 0 14px 40px rgba(0,0,0,.5);
}
/* --- utility rail (40px) --- */
.uu-rail {
height:40px;
border-bottom:1px solid var(--edge);
background:var(--raised);
overflow:hidden;
transition:height .3s cubic-bezier(.22,.61,.36,1), opacity .3s cubic-bezier(.22,.61,.36,1);
}
.uu-head.is-stuck .uu-rail { height:0;opacity:0;border-bottom-color:transparent }
.uu-rail__in {
max-width:1240px;margin:0 auto;
padding:0 clamp(1.25rem, 4vw, 3rem);
height:40px;
display:flex;align-items:center;justify-content:space-between;gap:1rem;
}
.uu-rail__l,.uu-rail__r { display:flex;align-items:center;gap:.85rem }
.uu-rail__l > span,
.uu-rail__r > a {
font-family:var(--f-disp);
font-size:0.75rem;font-weight:400;
letter-spacing:.2em;text-transform:uppercase;
color:var(--inkdim);
text-decoration:none;
display:inline-flex;align-items:center;gap:.5rem;
}
.uu-rail__l > span b { color:var(--accent);font-weight:700 }
.uu-rail__r > a:hover { color:var(--accent) }
.uu-rail__sep { color:var(--edge) }
/* status LED — blue phosphor pulse */
.uu-led {
width:7px;height:7px;flex:0 0 7px;border-radius:50%;
background:var(--accent);
box-shadow:0 0 9px var(--active);
animation:uu-led 2.6s ease-in-out infinite;
}
@keyframes uu-led { 0%,100%{opacity:1} 50%{opacity:.32} }
/* --- brand row --- */
.uu-head__in {
max-width:1240px;margin:0 auto;
padding:0 clamp(1.25rem, 4vw, 3rem);
height:94px;
display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
transition:height .3s cubic-bezier(.22,.61,.36,1);
}
.uu-head.is-stuck .uu-head__in { height:68px }
.uu-head__logo { display:flex;align-items:center;line-height:0 }
.uu-head__logo img {
height:72px;width:auto;display:block;
transition:height .3s cubic-bezier(.22,.61,.36,1);
}
.uu-head.is-stuck .uu-head__logo img { height:52px }
/* ==========================================================================
11. NAV
========================================================================== */
.uu-nav { display:flex;align-items:center;gap:.35rem }
.uu-nav a {
position:relative;
display:inline-flex;align-items:center;
padding:.85rem .95rem;
font-family:var(--f-body);
font-size:0.9375rem; /* 15px */
font-weight:700;
letter-spacing:.12em;
text-transform:uppercase;
color:var(--inkmuted);
text-decoration:none;
transition:color .25s cubic-bezier(.22,.61,.36,1);
}
.uu-nav a:hover,
.uu-nav a:focus-visible,
.uu-nav a[aria-current="page"] { color:var(--accent) }
/* hover indicator: the THREE-TIER STEP rising under the link. Not an arch. */
.uu-nav__step {
position:absolute;left:50%;bottom:.35rem;
width:24px;
display:flex;flex-direction:column-reverse;gap:2px;
transform:translate(-50%,7px);
opacity:0;pointer-events:none;
transition:transform .28s cubic-bezier(.22,.61,.36,1), opacity .28s cubic-bezier(.22,.61,.36,1);
}
.uu-nav__step span { display:block;height:2px;background:var(--brand);margin:0 auto }
.uu-nav__step span:nth-child(1) { width:100%;opacity:1 }
.uu-nav__step span:nth-child(2) { width:70%;opacity:.62 }
.uu-nav__step span:nth-child(3) { width:42%;opacity:.34 }
.uu-nav a:hover .uu-nav__step,
.uu-nav a:focus-visible .uu-nav__step,
.uu-nav a[aria-current="page"] .uu-nav__step,
.uu-nav__has:hover > a .uu-nav__step { opacity:1;transform:translate(-50%,0) }
/* --- CTA: solid b400, 30-degree chamfer --- */
.uu-nav__cta {
margin-left:.85rem;
background:var(--brand);
color:var(--pure)!important;
padding:1rem 1.6rem!important;
letter-spacing:.15em;
clip-path:polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
transition:background .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s cubic-bezier(.22,.61,.36,1);
}
.uu-nav__cta:hover {
background:var(--active);
box-shadow:0 0 26px var(--brand);
}
.uu-nav__cta .uu-nav__step { display:none }
/* --- dropdown --- */
.uu-nav__has { position:relative;display:inline-flex;align-items:center }
.uu-nav__sub {
position:absolute;top:100%;left:0;
min-width:272px;
display:block;
padding:.9rem 0 .75rem;
background:var(--raised);
border:1px solid var(--edge);
border-top:2px solid var(--brand);
box-shadow:0 22px 54px rgba(0,0,0,.62);
opacity:0;visibility:hidden;
transform:translateY(8px);
transition:opacity .22s cubic-bezier(.22,.61,.36,1), transform .22s cubic-bezier(.22,.61,.36,1), visibility .22s;
z-index:410;
}
.uu-nav__has:hover > .uu-nav__sub,
.uu-nav__has:focus-within > .uu-nav__sub,
.uu-nav__has.is-open > .uu-nav__sub { opacity:1;visibility:visible;transform:translateY(0) }
.uu-nav__grp {
display:block;
padding:.7rem 1.25rem .45rem;
font-family:var(--f-disp);
font-size:0.75rem;font-weight:700;
letter-spacing:.26em;text-transform:uppercase;
color:var(--active);
}
.uu-nav__sub a {
display:flex;align-items:center;gap:.7rem;
padding:.6rem 1.25rem;
width:100%;
font-size:0.9375rem;font-weight:400;
letter-spacing:.04em;text-transform:none;
color:var(--inkmuted);
}
.uu-nav__sub a:hover { color:var(--pure);background:var(--panel) }
.uu-nav__sub a .uu-nav__step { display:none }
.uu-nav__sub a i {
width:6px;height:6px;flex:0 0 6px;
background:var(--brand);
display:inline-block;
}
.uu-nav__sub a sup { font-size:0.75rem;letter-spacing:.08em }
.uu-nav__sub hr {
height:1px;margin:.55rem 1.25rem;
background:var(--edge);border:0;
}
/* --- burger (mobile only) --- */
.uu-burger {
display:none;
background:transparent;border:1px solid var(--edge);
color:var(--ink);
width:44px;height:44px;
align-items:center;justify-content:center;
cursor:pointer;
clip-path:polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);
}
.uu-burger:hover { border-color:var(--active);color:var(--accent) }
/* ==========================================================================
12. HERO — CREST direction. Centred, bilaterally symmetric.
========================================================================== */
.uu-hero {
position:relative;overflow:hidden;
padding:clamp(3.5rem,7vw,6.5rem) clamp(1.25rem, 4vw, 3rem) clamp(3rem,5vw,4.5rem);
text-align:center;
background:
radial-gradient(ellipse 80% 60% at 50% -6%, rgba(26,98,173,.28), transparent 62%),
linear-gradient(180deg, var(--base), var(--raised) 62%, var(--base));
}
/* stepped crest pillars, rendered by crest.js — tallest at centre */
.uu-hero__pillars {
/* Crest pillars rise from behind the headline, mirroring the logo's stepped
shield. Anchored to the top so they frame the type rather than hiding
under the stat strip. */
position:absolute;left:0;right:0;top:0;height:78%;
display:flex;align-items:flex-start;justify-content:center;gap:5px;
z-index:1;opacity:.26;pointer-events:none;
}
.uu-hero__pillars span {
display:block;width:26px;
/* fade downward so the pillar tops read as the crest silhouette */
background:linear-gradient(180deg, var(--brand) 0%,
rgba(26,98,173,.35) 55%, transparent 100%);
}
.uu-hero__in {
position:relative;z-index:5;
max-width:1240px;margin:0 auto;
}
.uu-hero .uu-kicker { display:block;margin-bottom:1.35rem }
.uu-hero h1 {
font-family:var(--f-disp);
font-weight:700;
font-size:clamp(2.6rem,6vw,5.2rem);
line-height:1.04;letter-spacing:.01em;
margin:0;
}
.uu-hero__lede {
font-weight:200;
font-size:clamp(1.06rem,1.5vw,1.2rem);
color:var(--inkmuted);
max-width:38rem;margin:1.5rem auto 2rem;
line-height:1.7;
}
.uu-hero__cta { display:flex;gap:.9rem;justify-content:center;flex-wrap:wrap }
.uu-hero .uu-six { max-width:420px;margin:2.2rem auto 0 }
/* buttons */
.uu-btn {
display:inline-block;
font-family:var(--f-body);
font-size:0.8125rem;font-weight:700;
letter-spacing:.15em;text-transform:uppercase;
padding:1rem 1.9rem;
background:var(--brand);
color:var(--pure);
text-decoration:none;border:0;cursor:pointer;
clip-path:polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
transition:background .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s cubic-bezier(.22,.61,.36,1);
}
.uu-btn:hover { background:var(--active);box-shadow:0 0 26px var(--brand) }
.uu-btn--ghost {
background:transparent;color:var(--ink);
border:1px solid var(--edge);clip-path:none;
}
.uu-btn--ghost:hover {
background:transparent;box-shadow:none;
border-color:var(--active);color:var(--accent);
}
/* ==========================================================================
13. CONSOLE — instrument-cluster layout for product pages
========================================================================== */
.uu-console {
display:grid;grid-template-columns:74px 1fr;
background:var(--base);
border:1px solid var(--edge);
position:relative;
}
.uu-console__rail {
border-right:1px solid var(--edge);
background:var(--raised);
display:flex;flex-direction:column;align-items:center;justify-content:space-between;
padding:1.4rem 0;gap:1.5rem;
}
.uu-console__rail img { width:34px;height:auto;display:block }
.uu-console__rail .uu-vlabel { color:var(--accent) }
.uu-console__rail .uu-step { width:26px }
.uu-console__main { min-width:0 }
/* top bar — drawing ref + coordinates. DATA, so Thabit is correct here. */
.uu-console__bar {
min-height:44px;
display:flex;align-items:center;justify-content:space-between;gap:1rem;
padding:.6rem 1.6rem;
border-bottom:1px solid var(--edge);
font-family:var(--f-mono);
font-size:0.75rem;letter-spacing:.14em;
color:var(--inkdim);
font-variant-numeric:tabular-nums;
}
.uu-console__grid { display:grid;grid-template-columns:1.25fr .75fr }
.uu-console__copy {
padding:clamp(1.75rem,3vw,2.75rem) clamp(1.25rem,2.5vw,1.9rem);
border-right:1px solid var(--edge);
min-width:0;
}
.uu-console__copy h1,
.uu-console__copy h2 {
font-family:var(--f-disp);
font-weight:700;line-height:1.04;margin:1.1rem 0 0;
}
.uu-console__copy p {
font-weight:200;font-size:1.0625rem;
color:var(--inkmuted);
max-width:30rem;margin:1.25rem 0 1.6rem;line-height:1.7;
}
.uu-console__cells { min-width:0 }
/* data cell: Coulson Condensed numerals, Thabit units */
.uu-cell { padding:1.25rem 1.5rem;border-bottom:1px solid var(--edge) }
.uu-cell:last-child { border-bottom:0 }
.uu-cell__k {
font-family:var(--f-disp);
font-size:0.75rem;font-weight:700;
letter-spacing:.22em;text-transform:uppercase;
color:var(--inkdim);
margin-bottom:.55rem;
}
.uu-cell__v {
font-family:var(--f-cond);
font-variant-numeric:tabular-nums;
font-size:clamp(1.75rem,3vw,2.2rem);
color:var(--accent);
line-height:1;
}
.uu-cell__v small,
.uu-cell__u {
font-family:var(--f-mono);
font-size:0.8125rem;letter-spacing:.1em;
color:var(--inkdim);
margin-left:.35rem;
}
/* page-level console wrapper */
.uu-console-page { padding:0 }
.uu-console-page > .uu-console { border-left:0;border-right:0 }
/* ==========================================================================
14. BLUEPRINT — light drawing-sheet mode for doctrine
========================================================================== */
.uu-blueprint {
--uu-hair:rgba(12,22,38,.20);
--uu-hair-2:rgba(12,22,38,.10);
--uu-hair-3:rgba(12,22,38,.32);
--uu-glow:rgba(23,79,148,.28);
--uu-glow-2:rgba(23,79,148,.10);
background:
linear-gradient(rgba(23,79,148,.09) 1px, transparent 1px) 0 0/100% 30px,
linear-gradient(90deg, rgba(23,79,148,.09) 1px, transparent 1px) 0 0/30px 100%,
var(--paper);
color:var(--paperink);
position:relative;
}
.uu-blueprint h1,.uu-blueprint h2,.uu-blueprint h3,
.uu-blueprint h4,.uu-blueprint h5,.uu-blueprint h6 {
color:var(--paperink);
text-shadow:none;
}
.uu-blueprint .crt-converge,
.uu-blueprint .crt-converge--strong,
.uu-blueprint .crt-bloom { text-shadow:none }
.uu-blueprint p,.uu-blueprint li { color:var(--paperink) }
.uu-blueprint a { color:var(--deep) }
.uu-blueprint a:hover { color:var(--brand) }
.uu-blueprint .uu-kicker { color:var(--deep) }
.uu-blueprint .uu-label,
.uu-blueprint .uu-data { color:var(--paperinkmuted) }
.uu-blueprint .uu-num,
.uu-blueprint .uu-cell__v { color:var(--deep) }
.uu-blueprint .uu-step span { background:var(--deep) }
.uu-blueprint .uu-six i { background:var(--paperalt) }
.uu-blueprint .uu-six i.on { background:var(--deep);box-shadow:none }
.uu-blueprint .crt-grille::before { display:none }
.uu-blueprint .uu-btn--ghost { color:var(--paperink);border-color:var(--accent) }
.uu-blueprint .uu-btn--ghost:hover { color:var(--deep);border-color:var(--deep) }
/* drawing-sheet header block */
.uu-bp__head {
display:flex;justify-content:space-between;align-items:flex-start;gap:1.5rem;
padding:1.6rem clamp(1.25rem, 4vw, 3rem);
border-bottom:1px solid var(--edge);
flex-wrap:wrap;
}
.uu-bp__rule { height:1px;background:var(--edge);border:0;margin:2rem 0 }
/* revision stamp footer — label copy, so Syncopate wide-tracked, NOT mono */
.uu-bp__foot {
border-top:1px solid var(--edge);
padding:1rem clamp(1.25rem, 4vw, 3rem);
display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
font-family:var(--f-disp);
font-size:0.75rem;font-weight:400;
letter-spacing:.2em;text-transform:uppercase;
color:var(--paperinkmuted);
}
/* ==========================================================================
15. CARD — product card. 30-degree chamfer mask, never an arch.
========================================================================== */
.uu-cards {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(17rem,1fr));
gap:1.5rem;
}
.uu-card {
position:relative;
display:flex;flex-direction:column;
background:var(--raised);
border:1px solid var(--edge);
text-decoration:none;
transition:transform .35s cubic-bezier(.22,.61,.36,1), border-color .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s cubic-bezier(.22,.61,.36,1);
}
.uu-card:hover {
transform:translateY(-5px);
border-color:var(--active);
box-shadow:0 0 30px var(--brand), inset 0 0 50px rgba(26,98,173,.07);
}
/* 3px zone bar */
.uu-card__zone { height:3px;background:var(--brand);flex:0 0 3px }
.uu-card.is-proto .uu-card__zone { background:var(--alert) }
.uu-card.is-doctrine .uu-card__zone { background:var(--accent) }
.uu-card__media {
position:relative;overflow:hidden;
aspect-ratio:16/10;
background:var(--panel);
clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 0 100%);
}
.uu-card__media img { width:100%;height:100%;object-fit:cover;display:block }
.uu-card__body { padding:1.35rem 1.4rem 1.5rem;display:flex;flex-direction:column;gap:.8rem;flex:1 }
.uu-card__title {
font-family:var(--f-disp);
font-weight:700;font-size:1.125rem;line-height:1.2;
letter-spacing:.03em;
color:var(--ink);
margin:0;
}
.uu-card:hover .uu-card__title { color:var(--phosphor) }
.uu-card__text {
font-size:0.9375rem;line-height:1.68;
color:var(--inkmuted);margin:0;
}
.uu-card__sep { height:1px;background:var(--edge);border:0;margin:.25rem 0 }
/* spec readout — DATA, Thabit sanctioned */
.uu-card__spec {
font-family:var(--f-mono);
font-size:0.8125rem;letter-spacing:.08em;
color:var(--inkdim);
font-variant-numeric:tabular-nums;
margin:0;
}
.uu-card__spec b { color:var(--accent);font-weight:700 }
/* zone badge — Syncopate, NOT mono */
.uu-zone {
display:inline-flex;align-items:center;gap:.5rem;
font-family:var(--f-disp);
font-size:0.75rem;font-weight:700;
letter-spacing:.2em;text-transform:uppercase;
color:var(--inkdim);
}
.uu-zone i { width:7px;height:7px;flex:0 0 7px;background:var(--brand);display:inline-block }
.uu-zone.is-proto i { background:var(--alert) }
.uu-zone.is-proto { color:var(--alert) }
.uu-zone.is-doctrine i { background:var(--accent) }
/* ==========================================================================
16. STRIP — stat band, 6 cells max
========================================================================== */
.uu-strip {
display:grid;
grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
border-top:1px solid var(--edge);
border-bottom:1px solid var(--edge);
background:rgba(5,10,18,.6);
position:relative;z-index:5;
}
.uu-strip > div {
padding:1.35rem .9rem;text-align:center;
border-right:1px solid var(--edge);
}
.uu-strip > div:last-child { border-right:0 }
.uu-strip .n {
font-family:var(--f-cond);
font-variant-numeric:tabular-nums;
font-size:clamp(2rem,3.4vw,2.875rem); /* ~46px */
color:var(--accent);
line-height:1;
}
/* label: Syncopate wide-tracked — deliberately NOT monospace */
.uu-strip .l {
font-family:var(--f-disp);
font-size:0.8125rem;font-weight:700;
letter-spacing:.2em;text-transform:uppercase;
color:var(--inkdim);
margin-top:.6rem;line-height:1.5;
}
.uu-blueprint .uu-strip { background:transparent }
.uu-blueprint .uu-strip .n { color:var(--deep) }
.uu-blueprint .uu-strip .l { color:var(--paperinkmuted) }
/* ==========================================================================
17. TERMINAL — blue phosphor. Device-framed, so horizontal interlace is
allowed inside the screen only.
========================================================================== */
.uu-term,
.e-term {
border:1px solid var(--edge);
background:var(--raised);
}
.uu-term__bar,
.e-term__bar {
display:flex;align-items:center;justify-content:space-between;gap:1rem;
padding:.6rem 1rem;
border-bottom:1px solid var(--edge);
background:var(--panel);
font-family:var(--f-disp);
font-size:0.75rem;font-weight:700;
letter-spacing:.2em;text-transform:uppercase;
color:var(--accent);
}
.uu-term__bar span,
.e-term__bar span { display:inline-flex;align-items:center;gap:.55rem }
.uu-term__led,
.e-term__led {
width:7px;height:7px;flex:0 0 7px;border-radius:50%;
background:var(--accent);
box-shadow:0 0 9px var(--active);
animation:uu-led 2.6s ease-in-out infinite;
}
/* screen: DATA, so Thabit is correct */
.uu-term__screen,
.e-term__screen {
position:relative;overflow:hidden;
padding:1.25rem 1.15rem;
min-height:11rem;
background:var(--base);
font-family:var(--f-mono);
font-size:0.875rem;line-height:1.85;
letter-spacing:.04em;
color:var(--phosphor);
text-shadow:0 0 10px var(--active);
white-space:pre-wrap;word-break:break-word;
}
.uu-term__screen::before,
.e-term__screen::before {
content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
background:repeating-linear-gradient(180deg,
rgba(0,0,0,.18) 0px, rgba(0,0,0,.18) 1px, transparent 1px, transparent 3px);
opacity:.6;
}
.uu-blueprint .uu-term,
.uu-blueprint .e-term { border-color:var(--edge) }
.uu-blueprint .uu-term__bar,
.uu-blueprint .e-term__bar { background:var(--paperalt);color:var(--deep) }
.uu-blueprint .uu-term__screen,
.uu-blueprint .e-term__screen {
background:var(--paperalt);
color:var(--paperink);
text-shadow:none;
}
.uu-blueprint .uu-term__screen::before,
.uu-blueprint .e-term__screen::before { display:none }
.uu-blueprint .e-cursor,
.uu-blueprint .uu-cursor { background:var(--deep);box-shadow:none }
/* ==========================================================================
18. FORM — blue phosphor. Wraps inc/contact-form.php markup.
========================================================================== */
.uu-form .e-form,
.e-form {
border:1px solid var(--edge);
background:var(--raised);
}
.e-form__screen {
position:relative;overflow:hidden;
padding:clamp(1.5rem,3vw,2.25rem);
background:var(--base);
}
.e-form__screen::before {
content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
background:repeating-linear-gradient(180deg,
rgba(0,0,0,.14) 0px, rgba(0,0,0,.14) 1px, transparent 1px, transparent 3px);
opacity:.5;
}
.e-form__inner { position:relative;z-index:2 }
.e-field { margin-bottom:1.4rem }
.e-field label {
display:block;margin-bottom:.5rem;
font-family:var(--f-body);
font-size:0.8125rem;font-weight:700;
letter-spacing:.13em;text-transform:uppercase;
color:var(--phosphor);
}
.e-field label .req { color:var(--alert) }
.e-field input,
.e-field textarea,
.e-field select {
width:100%;
padding:.85rem 1rem;
background:var(--raised);
border:1px solid var(--edge);
color:var(--ink);
font-family:var(--f-body);
font-size:1rem;line-height:1.6;
border-radius:0;
transition:border-color .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s cubic-bezier(.22,.61,.36,1);
}
.e-field textarea { min-height:9rem;resize:vertical }
.e-field input:focus,
.e-field textarea:focus,
.e-field select:focus {
outline:0;
border-color:var(--accent);
box-shadow:0 0 0 2px rgba(91,166,232,.28);
}
.e-field input::placeholder,
.e-field textarea::placeholder { color:var(--inkdim) }
.e-field select option { background:var(--raised);color:var(--ink) }
.e-form__row { display:grid;grid-template-columns:1fr 1fr;gap:1.2rem }
.e-form__submit {
font-family:var(--f-body);
font-size:0.8125rem;font-weight:700;
letter-spacing:.15em;text-transform:uppercase;
padding:1rem 2rem;
background:var(--brand);
color:var(--pure);
border:0;cursor:pointer;
clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
transition:background .28s cubic-bezier(.22,.61,.36,1), transform .28s cubic-bezier(.22,.61,.36,1);
}
.e-form__submit:hover { background:var(--active);transform:translateY(-2px) }
/* advisory prose — body font. Mono is reserved for data readouts. */
.e-form__note {
margin:1.4rem 0 0;
font-family:var(--f-body);
font-size:0.8125rem;line-height:1.85;letter-spacing:.02em;
color:var(--inkdim);
}
.e-form__msg {
margin-bottom:1.5rem;padding:.9rem 1.1rem;
border:1px solid var(--edge);
font-family:var(--f-body);
font-size:0.9375rem;font-weight:700;letter-spacing:.02em;
}
.e-form__msg.ok {
border-color:var(--accent);
background:rgba(91,166,232,.1);
color:var(--phosphor);
}
.e-form__msg.err {
border-color:var(--alert);
background:rgba(212,85,42,.1);
color:var(--alert);
}
/* form under blueprint light mode */
.uu-blueprint .e-form { border-color:var(--edge) }
.uu-blueprint .e-form__screen { background:var(--paperalt) }
.uu-blueprint .e-form__screen::before { display:none }
.uu-blueprint .e-field label { color:var(--deep) }
.uu-blueprint .e-field input,
.uu-blueprint .e-field textarea,
.uu-blueprint .e-field select {
background:var(--paper);
border-color:var(--accent);
color:var(--paperink);
}
.uu-blueprint .e-field input::placeholder,
.uu-blueprint .e-field textarea::placeholder { color:var(--paperinkmuted) }
.uu-blueprint .e-field select option { background:var(--paper);color:var(--paperink) }
.uu-blueprint .e-form__submit { background:var(--deep);color:var(--pure) }
.uu-blueprint .e-form__submit:hover { background:var(--brand) }
.uu-blueprint .e-form__note { color:var(--paperinkmuted) }
/* ==========================================================================
19. REEL — 16mm archival treatment, kept from v2
========================================================================== */
.uu-reel,
.e-reel {
position:relative;overflow:hidden;
background:var(--base);
aspect-ratio:4/3;
}
.uu-reel__inner,
.e-reel__inner {
width:100%;height:100%;object-fit:cover;display:block;
filter:grayscale(.82) contrast(1.16) brightness(.94) sepia(.06) hue-rotate(178deg);
animation:uu-gate 5.5s steps(3) infinite;
}
/* sprocket edge — vertical, consistent with the aperture grille */
.uu-reel::before,
.e-reel::before {
content:'';position:absolute;top:0;bottom:0;left:0;width:11px;z-index:3;
background:repeating-linear-gradient(180deg,
rgba(5,10,18,.9) 0 9px, rgba(168,211,245,.16) 9px 17px);
pointer-events:none;
}
.uu-reel::after,
.e-reel::after {
content:'';position:absolute;inset:0;z-index:4;pointer-events:none;
background:radial-gradient(ellipse 120% 120% at 50% 50%, transparent 52%, rgba(0,0,0,.62) 100%);
}
/* slate caption — a label, so Syncopate wide-tracked, NOT mono */
.uu-reel__slate,
.e-reel__slate {
position:absolute;left:1.15rem;bottom:.9rem;z-index:5;
font-family:var(--f-disp);
font-size:0.75rem;font-weight:700;
letter-spacing:.22em;text-transform:uppercase;
color:var(--phosphor);
text-shadow:0 0 10px var(--active);
}
/* ==========================================================================
20. FOOTER — 45-degree taper top edge
========================================================================== */
.uu-foot {
position:relative;
margin-top:clamp(3rem,6vw,5rem);
background:var(--raised);
border-top:1px solid var(--edge);
}
/* the taper: a 45-degree notch cut into the top edge, mirroring the shield foot */
.uu-foot::before {
content:'';position:absolute;left:0;right:0;top:-26px;height:26px;
background:var(--raised);
clip-path:polygon(0 100%, 50% 0, 100% 100%);
border:0;
}
.uu-foot::after {
content:'';position:absolute;left:50%;top:-30px;transform:translateX(-50%);
width:0;height:0;
border-left:5px solid transparent;border-right:5px solid transparent;
border-bottom:8px solid var(--active);
}
.uu-foot__in {
max-width:1240px;margin:0 auto;
padding:clamp(2.5rem,5vw,3.5rem) clamp(1.25rem, 4vw, 3rem) 1.5rem;
}
.uu-foot__grid {
display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;
gap:2rem;
}
.uu-foot__grid img { height:2.1rem;width:auto;margin-bottom:1rem;display:block }
.uu-foot__blurb {
font-size:0.875rem;line-height:1.75;
color:var(--inkdim);
max-width:19rem;margin:0;
}
.uu-foot h4 {
font-family:var(--f-disp);
font-size:0.8125rem;font-weight:700;
letter-spacing:.22em;text-transform:uppercase;
color:var(--accent);
margin:0 0 1rem;
}
.uu-foot ul { list-style:none;margin:0;padding:0 }
.uu-foot li { margin-bottom:.55rem }
.uu-foot li a {
font-size:0.9375rem;
color:var(--inkmuted);
text-decoration:none;
transition:color .22s cubic-bezier(.22,.61,.36,1);
}
.uu-foot li a:hover { color:var(--accent) }
.uu-foot li a sup { font-size:0.75rem }
.uu-foot__base {
margin-top:2.25rem;padding-top:1.25rem;
border-top:1px solid var(--edge);
display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
font-family:var(--f-disp);
font-size:0.75rem;font-weight:400;
letter-spacing:.18em;text-transform:uppercase;
color:var(--inkdim);
}
.uu-foot .uu-six { max-width:180px;margin:1.5rem 0 0 }
/* ==========================================================================
22. BLOCK-EDITOR / CONTENT NORMALISATION
========================================================================== */
.uu-main { display:block }
.uu-section { padding:clamp(2.5rem,5vw,4.5rem) 0 }
.wp-block-separator { border-top:1px solid var(--edge);border-bottom:0;opacity:1 }
.uu-blueprint blockquote { border-left-color:var(--deep) }
th,td { padding:.7rem .9rem;border-bottom:1px solid var(--edge);text-align:left }
.uu-blueprint table.uu-spec td:not(:first-child) { color:var(--deep) }
.uu-404 .uu-term,
.uu-404 .e-term { text-align:left;margin:2rem 0 }
/* ==========================================================================
23. RESPONSIVE — 1080px drawer nav, 640px stack
========================================================================== */
@media(max-width:1080px) {
/* FIX: backdrop-filter on .uu-head creates a containing block, which traps
the position:fixed drawer inside the ~135px header (nav clipped to 134px,
only "Products" reachable). Dropped at the mobile breakpoint ONLY;
desktop keeps it. If this disappears again, the mobile nav is broken. */
.uu-head{ backdrop-filter:none; -webkit-backdrop-filter:none }
.uu-burger{ display:inline-flex }
.uu-nav{
position:fixed;top:0;right:0;bottom:0;
width:min(88vw,360px);
flex-direction:column;align-items:stretch;justify-content:flex-start;
gap:0;
padding:5.5rem 1.5rem 2.5rem;
background:var(--raised);
border-left:1px solid var(--edge);
box-shadow:-24px 0 60px rgba(0,0,0,.6);
transform:translateX(102%);
transition:transform .34s cubic-bezier(.22,.61,.36,1);
overflow-y:auto;
z-index:420;
}
.uu-nav.is-open{ transform:translateX(0) }
.uu-nav a{ padding:.95rem .25rem;border-bottom:1px solid var(--edge) }
.uu-nav__step{ display:none }
.uu-nav__has{ display:block;width:100% }
.uu-nav__has > a{ display:flex;width:100% }
.uu-nav__sub{
position:static;
min-width:0;width:100%;
opacity:1;visibility:visible;transform:none;
display:none;
background:transparent;
border:0;border-left:2px solid var(--brand);
box-shadow:none;
padding:.35rem 0 .6rem .9rem;
margin-bottom:.4rem;
}
.uu-nav__has.is-open > .uu-nav__sub{ display:block }
.uu-nav__has:hover > .uu-nav__sub{ display:none }
.uu-nav__has.is-open:hover > .uu-nav__sub{ display:block }
.uu-nav__sub a{ padding:.6rem .25rem }
.uu-nav__cta{ margin:1.25rem 0 0;justify-content:center;clip-path:none }
.uu-console{ grid-template-columns:1fr }
.uu-console__rail{
flex-direction:row;border-right:0;
border-bottom:1px solid var(--edge);
padding:.85rem 1.25rem;justify-content:space-between;
}
.uu-console__rail .uu-vlabel{ writing-mode:horizontal-tb }
.uu-console__rail .uu-step{ width:48px }
.uu-console__grid{ grid-template-columns:1fr }
.uu-console__copy{ border-right:0;border-bottom:1px solid var(--edge) }
.uu-foot__grid{ grid-template-columns:1fr 1fr }
}
@media(max-width:640px) {
:root{ --uu-logo:40px;--uu-head-brand:76px }
.uu-rail__hide{ display:none }
.uu-hero__pillars{ height:190px;gap:3px }
.uu-hero__pillars span{ width:16px }
.uu-hero__cta{ flex-direction:column;align-items:stretch }
.uu-btn{ text-align:center }
.uu-strip{ grid-template-columns:1fr 1fr }
.uu-strip > div:nth-child(2n){ border-right:0 }
.e-form__row{ grid-template-columns:1fr }
.uu-foot__grid{ grid-template-columns:1fr }
.uu-bp__stamp{ text-align:left }
.uu-term__screen,
.e-term__screen{ font-size:0.8125rem;min-height:13rem }
}
/* ==========================================================================
24. REDUCED MOTION — kill grille animation, v-sync roll, interlace,
degauss, gate weave, LED pulse, cursor blink and reveals.
========================================================================== */
@media(prefers-reduced-motion:reduce) {
html{ scroll-behavior:auto }
.crt-grille::before{ animation:none }
.crt-roll::after{ animation:none;display:none }
.crt-interlace::before{ animation:none }
.crt-degauss{ animation:none }
.uu-reel__inner,
.e-reel__inner{ animation:none }
.uu-led,
.uu-term__led,
.e-term__led{ animation:none }
.e-cursor,
.uu-cursor{ animation:none }
[data-uu-reveal]{ opacity:1;transform:none;transition:none }
[data-uu-reveal].is-in{ transition:none }
.uu-card,
.uu-btn,
.uu-nav a,
.uu-nav__step,
.uu-nav__sub,
.uu-head,
.uu-head__in,
.uu-rail,
.uu-head__logo img,
.e-form__submit,
.e-field input,
.e-field textarea,
.e-field select{ transition:none }
.uu-card:hover{ transform:none }
.e-form__submit:hover{ transform:none }
.uu-nav{ transition:none }
}
@keyframes uu-led{0%,100%{opacity:1}50%{opacity:.32}}
/* =====================================================================
* v0.3 — Core block compatibility styles.
* These styles map core Gutenberg blocks to the UU design system when
* they carry the right Additional CSS class in the block editor.
* ===================================================================== */
/* Section containers */
.wp-block-group.sec{padding:4.5rem 0;border-bottom:var(--hair)}
.wp-block-group.sec--tight{padding:2.5rem 0}
.wp-block-group.wrap{max-width:1280px;margin:0 auto;padding-left:clamp(1.25rem,4vw,3rem);padding-right:clamp(1.25rem,4vw,3rem)}
/* Kicker (paragraph with .kicker class) */
.wp-block-paragraph.kicker,p.kicker,.kicker{
font-family:var(--f-disp);font-size:.66rem;font-weight:700;
letter-spacing:.18em;text-transform:uppercase;color:var(--inkdim);
display:inline-flex;align-items:center;gap:.6rem
}
/* Lede paragraph */
p.hero__lede,.wp-block-paragraph.hero__lede{
font-size:1.12rem;line-height:1.7;color:var(--inkmuted);max-width:64ch
}
/* Inkmuted helper */
p.inkmuted,.inkmuted{color:var(--inkmuted)}
p.inkdim,.inkdim{color:var(--inkdim)}
/* Mono helper */
.mono{font-family:var(--f-mono)}
/* Buttons — map core/button to UU btn style */
.wp-block-button.btn .wp-block-button__link{
font-family:var(--f-disp);font-size:.66rem;font-weight:700;
letter-spacing:.18em;text-transform:uppercase;
background:var(--brand);color:var(--pure);border-radius:0;
padding:1.1rem 2.25rem;border:none;transition:.3s
}
.wp-block-button.btn .wp-block-button__link:hover{
background:var(--active);color:var(--pure)
}
.wp-block-button.btn--ghost .wp-block-button__link{
background:transparent;border:1px solid var(--edge);color:var(--ink)
}
.wp-block-button.btn--ghost .wp-block-button__link:hover{
border-color:var(--accent);background:rgba(46,127,209,.08);color:var(--phosphor)
}
/* Zone cards via core columns */
.wp-block-columns.zone-cards .wp-block-column{
position:relative;background:linear-gradient(180deg,var(--panel),var(--raised));
border:1px solid var(--edge);overflow:hidden;padding:2rem 1.6rem;
transition:.35s
}
.wp-block-columns.zone-cards .wp-block-column:hover{
border-color:var(--accent);transform:translateY(-4px);
box-shadow:0 14px 40px rgba(0,0,0,.5),0 0 30px rgba(46,127,209,.18)
}
/* Spec lists */
ul.pd__why,.wp-block-list.pd__why{
list-style:none;padding:1.4rem 1.6rem;margin:0
}
ul.pd__why li,.wp-block-list.pd__why li{
position:relative;padding-left:1.4rem;margin-bottom:.9rem;
font-size:.96rem;line-height:1.6;color:var(--inkmuted)
}
ul.pd__why li::before,.wp-block-list.pd__why li::before{
content:"";position:absolute;left:0;top:.55rem;width:6px;height:6px;
background:var(--brand);border-radius:50%
}
/* Core image blocks inside .wrap get responsive max-width */
.wp-block-image img{height:auto;max-width:100%}
/* Leaders grid with CSS var for columns */
.leaders{display:grid;grid-template-columns:repeat(var(--cols,4),1fr);gap:1.4rem}
@media(max-width:980px){.leaders{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.leaders{grid-template-columns:1fr}}
/* Core heading colors when using phosphor class */
h1.phosphor,h2.phosphor,h3.phosphor{color:var(--phosphor)}
h1.ink,h2.ink,h3.ink{color:var(--ink)}
/* Map info block */
.map-info h3{font-size:1rem;margin-bottom:.6rem}
.map-info p{font-size:.84rem;margin:.3rem 0;color:var(--inkmuted)}
.map-info .lbl{font-family:var(--f-mono);font-size:.62rem;color:var(--inkdim);
letter-spacing:.1em;display:inline-block;width:3.4rem}
/* Programs status terminal (static) */
.hero__terminal .ttl{
display:flex;justify-content:space-between;align-items:center;
padding:.7rem 1rem;border-bottom:1px solid var(--edge);
font-family:var(--f-disp);font-size:.64rem;letter-spacing:.12em;color:var(--inkdim)
}
.hero__terminal .rec{color:var(--alert)}
.hero__terminal .term-body{
padding:1rem 1.2rem;font-family:var(--f-mono);font-size:.78rem;line-height:1.8;color:var(--phosphor)
}
.hero__terminal .term-line .p{color:var(--brand)}
/* Contact grid */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
@media(max-width:760px){.contact-grid{grid-template-columns:1fr}}
/* Blueprint section */
.section.blueprint,.wp-block-group.blueprint{
background:var(--paper);color:var(--paperink);padding:4.5rem 0
}
.blueprint .kicker{color:var(--paperinkmuted)}
.blueprint h2,.blueprint p{color:var(--paperink)}
.dwg-stamp{
font-family:var(--f-mono);font-size:.64rem;color:var(--paperinkmuted);
border:1px solid var(--paperinkmuted);padding:.6rem .8rem;white-space:nowrap
}
/* =====================================================================
DOCTRINE — Library link legibility (Kevin Braverman, 2026-08-07)
=====================================================================
The `uu-blueprint` skin was authored for a LIGHT "paper" background, but
--paper / --paperink / --paperinkmuted / --paperalt are never defined
anywhere in style.css or theme.json. Those declarations are therefore
invalid and drop out, so the background stays the dark site base while
`.uu-blueprint a{color:var(--deep)}` (#174F94) survives — dark navy ink
on #050A12, measured at 2.44:1 against a 4.5:1 WCAG AA floor. The 001 /
PDF markers carry an inline opacity:.6 on top of that, landing at 1.57:1.
--phosphor (#A8D3F5) is the site's own CRT colour: 12.56:1, and it lifts
the 60%-opacity markers to 5.00:1 without having to override their inline
styles. :not([class]) confines this to the four document links and the
HOME breadcrumb, leaving .btn ("Request Full Brief") untouched.
uu-blueprint is used on /doctrine/ and NO other page.
Rollback: rollback-2026-08-07-doctrine.sh */
.uu-blueprint a:not([class]){
color:var(--phosphor);
text-shadow:0 0 10px rgba(168,211,245,.35);
}
.uu-blueprint a:not([class]):hover{
color:var(--pure);
text-shadow:0 0 14px rgba(244,247,250,.5);
}
/* Doctrine button legibility (Kevin Braverman, 2026-08-07, screenshot msg 2564515).
`.uu-blueprint a{color:var(--deep)}` (0,2,0) outranks `.btn{color:var(--ink)}` (0,1,0), so on
/doctrine/ the button's text was forced to #174F94 — the same navy its own background gradient
(--brand #1A62AD -> --deep #174F94) fades into. Measured 1.31:1 at the top of the gradient and
1.00:1 at the bottom: identical colour, invisible. PRE-EXISTING — present in every style.css
backup and in pkg040/042/043; not introduced by the Library link change above.
(0,3,0) restores the button's own intended --ink #E8F1FA => 5.42:1 to 7.12:1.
Rollback: rollback-2026-08-07-doctrine.sh (reverts this and the Library change together). */
.uu-blueprint a.btn{ color:var(--ink) }
/* =====================================================================
REEL — 16:9 + video + "Coming Soon" (Jason Braverman, 2026-08-12)
=====================================================================
The frame was aspect-ratio:4/3, which centre-cropped ~25% of the width
off any 16:9 footage (object-fit:cover on __inner). Jason chose 16:9.
The archival filter on __inner is deliberately KEPT — his call, to see
how it reads over real video. It applies to an