/* ==========================================================================
Autobahn — mobile-first front-end stylesheet.
Colors come from --abn-* custom properties, printed in from
Theme Options (mirrors the values persisted to theme.json). Typography
families come from theme.json font presets (--wp--preset--font-family--*).
========================================================================== */
@font-face {
font-family: 'FE-Schrift-Fallback';
src: local('Courier New');
}
:root{
--font-display: var(--wp--preset--font-family--display, 'Bebas Neue', sans-serif);
--font-body: var(--wp--preset--font-family--body, 'Inter', sans-serif);
--font-mono: var(--wp--preset--font-family--mono, 'Martian Mono', monospace);
--font-serif: var(--wp--preset--font-family--serif, 'Source Serif 4', serif);
--font-plate: var(--wp--preset--font-family--plate, monospace);
--plate-black:#0c0d0e;
--plate-white:#f2f1ea;
--radius:6px;
/* ---- Responsive scale tokens — design-library 7-tier system ----
Base values below = Regular Smartphone Portrait (≤720px). Every
section pulls container width, gutter, vertical rhythm and hero
offset from these instead of hardcoding numbers, so each of the
six breakpoints below only has to re-tune this handful of knobs. */
--site-max:1240px;
--site-gutter:16px;
--section-pad:44px;
--hero-top:100px; /* was 118px — reduced 15% (header-to-hero spacing) */
--hero-bottom:40px;
--tacho-bar-w:3px;
--tacho-bar-h:7px;
--tacho-gap:5px;
--tacho-inset:12px;
}
/* Tells the browser which native-control appearance (search field "x",
autofill, spell-check underline, caret, etc.) actually matches the
page right now. Without this, some browsers keep assuming a LIGHT
native form-control theme even while :root's tokens above are already
painting the page dark (dark is the default/unqueried mode here — see
autobahn_print_root_css_vars() in inc/template-tags.php) — which is
exactly the class of bug that can make text typed into a themed
render invisible: the browser's own default input text color
quietly wins over the CSS "color" property in that mismatched state.
This affects every palette equally since it's a browser/OS heuristic,
not a palette color value, but it only actually shows up on whichever
palette + browser + OS combination happens to trigger it. */
:root{color-scheme:dark;}
html[data-theme="light"]{color-scheme:light;}
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
background:var(--abn-page-bg);
color:var(--abn-text);
font-family:var(--font-body);
-webkit-font-smoothing:antialiased;
line-height:1.55;
transition:background .2s ease,color .2s ease;
overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}
.screen-reader-text{position:absolute;left:-9999px;}
.skip-link:focus{position:fixed;top:8px;left:8px;z-index:9999;background:var(--abn-accent);color:var(--plate-black);padding:10px 16px;border-radius:4px;}
.wrap{max-width:var(--site-max);margin:0 auto;padding:0 var(--site-gutter);}
.mono{font-family:var(--font-mono);}
.serif{font-family:var(--font-serif);}
.display{font-family:var(--font-display);}
.eyebrow{
font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
color:var(--abn-accent-alt);display:flex;align-items:center;gap:8px;margin-bottom:10px;
}
/* ============ TOP RIBBON (region 1: utility bar — inactive if blank) ============ */
.ribbon{background:var(--abn-ribbon-bg);color:var(--abn-muted);font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;}
.ribbon .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;padding:8px var(--site-gutter);}
/* Ribbon/footer text-region links (Theme Options > Main > Regions,
Footer Text — Below Logo) render whatever the admin typed, so
these never get an underline — in any state, including hover/focus —
per the design library's plain-text ribbon styling. */
.ribbon .rlinks a,.ribbon .rlocale a{color:inherit;text-decoration:none;}
.ribbon .rlinks a:hover,.ribbon .rlinks a:focus,.ribbon .rlocale a:hover,.ribbon .rlocale a:focus{color:var(--abn-accent);text-decoration:none;}
/* Theme Options > Main > "Switch off top ribbon on mobile view" */
@media (max-width:1080px){
.ribbon.ribbon-hide-mobile{display:none;}
}
/* ============ MAIN HEADER ============ */
header.site{background:var(--abn-header-bg);position:sticky;top:0;z-index:50;transition:background .2s ease;}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:12px var(--site-gutter);gap:14px;}
.logo{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.logo .badge{
width:32px;height:32px;border-radius:4px;background:var(--plate-white);color:var(--plate-black);
display:flex;align-items:center;justify-content:center;font-family:var(--font-plate);font-size:15px;
border:2px solid var(--abn-accent);flex-shrink:0;
}
.logo-image{display:flex;align-items:center;}
.logo-img{max-height:36px;width:auto;}
.logo-img-light{display:none;}
html[data-theme="light"] .logo-img-dark{display:none;}
html[data-theme="light"] .logo-img-light{display:block;}
.logo-text{display:flex;flex-direction:column;line-height:1;}
.logo-line1{font-family:var(--font-display);font-size:20px;letter-spacing:.02em;color:var(--abn-text);}
.logo-line2{font-family:var(--font-mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--abn-accent-alt);margin-top:3px;}
.nav-right{display:flex;align-items:center;gap:14px;flex-shrink:0;margin-left:auto;}
nav.horizontal{display:none;gap:4px;align-items:center;}
nav.horizontal ul,nav.horizontal ul ul{list-style:none;margin:0;padding:0;display:flex;gap:4px;flex-wrap:wrap;}
nav.horizontal li{list-style:none;margin:0;padding:0;position:relative;}
nav.horizontal a{
font-family:var(--font-mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
color:var(--abn-muted);padding:9px 12px;border-radius:4px;display:inline-block;
text-decoration:none;
}
nav.horizontal a:hover,nav.horizontal .current-menu-item>a{color:var(--abn-text);}
/* Any nav rendered without an explicit menu (bare fallback etc.) should
never show default browser markers or link underlines either. */
.mobile-nav-panel ul,.mobile-nav-panel li{list-style:none;margin:0;padding:0;}
.mobile-nav-panel a{text-decoration:none;}
.header-ctas{display:none;align-items:center;gap:10px;}
/* ============ BUTTONS (per design library) ============
Two scales: header-cta (compact, sits in the sticky header) and
btn-primary/btn-ghost (larger, hero/section/body scale). Both share the
same mono/uppercase/tracked-out language and radius progression. */
.header-cta,.header-cta-ghost{
font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
padding:11px 20px;border-radius:4px;white-space:nowrap;display:inline-block;
}
.header-cta{background:var(--abn-accent);color:var(--plate-black);border:1px solid var(--abn-accent);}
.header-cta-ghost{background:transparent;color:var(--abn-text);border:1px solid var(--abn-line);}
.header-cta-ghost:hover{border-color:var(--abn-accent);color:var(--abn-accent);}
.btn-primary,.btn-ghost,.btn-submit{
font-family:var(--font-mono);font-size:13px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
padding:16px 28px;border-radius:5px;white-space:nowrap;display:inline-block;border:none;cursor:pointer;
}
.btn-primary,.btn-submit{background:var(--abn-accent);color:var(--plate-black);}
.btn-primary:hover,.btn-submit:hover{filter:brightness(1.06);}
.btn-ghost{background:transparent;color:var(--abn-text);border:1px solid var(--abn-line);}
.btn-ghost:hover{border-color:var(--abn-accent);color:var(--abn-accent);}
.btn-submit{padding:15px 32px;letter-spacing:.1em;}
/* small tag-style link used inside cards/widgets, per library's .card-link / .promo-cta */
.promo-cta{
font-family:var(--font-mono);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;
background:var(--abn-accent);color:var(--plate-black);padding:10px 18px;border-radius:5px;
display:inline-block;width:fit-content;
}
.card-link{
font-family:var(--font-mono);font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;
text-decoration:underline;text-underline-offset:3px;color:var(--abn-blue);
}
.theme-toggle{
width:34px;height:34px;border-radius:50%;flex-shrink:0;border:1px solid var(--abn-line);
background:var(--abn-header-bg-soft);display:flex;align-items:center;justify-content:center;
cursor:pointer;color:var(--abn-text);padding:0;
}
.theme-toggle svg{width:16px;height:16px;}
.theme-toggle .icon-sun{display:none;}
html[data-theme="light"] .theme-toggle .icon-sun{display:block;color:var(--abn-accent-alt);}
html[data-theme="light"] .theme-toggle .icon-moon{display:none;}
.mobile-nav-toggle{
width:34px;height:34px;border:none;background:none;cursor:pointer;flex-shrink:0;
display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
}
.mobile-nav-toggle span{width:20px;height:2px;background:var(--abn-text);display:block;}
.mobile-nav-panel{background:var(--abn-header-bg-alt);border-top:1px solid var(--abn-line);padding:12px var(--site-gutter) 20px;}
.mobile-nav-panel ul{list-style:none;margin:0;padding:0;}
.mobile-nav-panel a{display:block;padding:12px 4px;font-family:var(--font-mono);font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--abn-text);border-bottom:1px solid var(--abn-line);}
/* ============ SECONDARY / LOWER RIBBON (region 2 — inactive without a menu) ============ */
.subnav{background:var(--abn-header-bg-alt);border-top:1px solid var(--abn-line);}
.subnav .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;padding:10px var(--site-gutter);}
.subnav nav.horizontal a{color:var(--abn-muted);}
/* ============ CMD-SEARCH — command-prompt inspired search, lower ribbon ============ */
.cmd-search{
display:flex;align-items:center;gap:8px;
background:none;border:none;padding:0;min-width:150px;flex:0 1 260px;margin-left:auto;
}
.cmd-search .prompt{
font-family:var(--font-mono);color:var(--abn-accent);font-size:13px;
animation:abn-cmd-blink 1.1s step-end infinite;
}
@keyframes abn-cmd-blink{50%{opacity:.25;}}
.cmd-search-field{
background:transparent!important;border:none!important;outline:none;flex:1;box-shadow:none!important;
font-family:var(--font-mono);font-size:12.5px;letter-spacing:.01em;
padding:4px 0!important;width:auto!important;-webkit-appearance:none;appearance:none;
/* color-scheme is set per data-theme above, but Safari/iOS in
particular can still substitute its own default input text color
over a plain "color" property once a page is rendering dark —
-webkit-text-fill-color (plus an explicit caret-color) is the
actual override that wins in that case, so both are set alongside
"color" itself rather than relying on "color" alone. */
color:var(--abn-text)!important;-webkit-text-fill-color:var(--abn-text);caret-color:var(--abn-text);
}
.cmd-search-field::-webkit-search-cancel-button{display:none;}
.cmd-search-field::placeholder{color:var(--abn-muted);}
.cmd-search.is-focused .prompt{animation:none;opacity:1;}
/* ============ HERO (Hero Special page template) ============
Per design library: eyebrow + highlighted h1 + lede + two CTAs on the
left, the "hero-plate" (license-plate motif) on the right; stacks to a
single column on mobile, 1.15fr/.85fr two-up from the desktop-chrome
breakpoint up. */
.hero{
background:
repeating-linear-gradient(90deg, transparent 0 64px, rgba(242,183,5,.06) 64px 66px),
linear-gradient(180deg, var(--abn-header-bg) 0%, var(--abn-header-bg-alt) 100%);
padding:var(--hero-top) 0 var(--hero-bottom);
border-bottom:1px solid var(--abn-line);
overflow:hidden;
}
.hero .wrap{display:flex;flex-direction:column;gap:40px;align-items:start;}
.hero-copy{min-width:0;}
.hero h1{
font-family:var(--font-display);
font-size:clamp(38px,9vw,88px);line-height:.98;color:var(--abn-text);margin:0 0 20px;letter-spacing:.005em;
}
.hero h1 span{color:var(--abn-accent);}
.hero p.lede{color:var(--abn-lede);font-size:16px;max-width:560px;margin:0 0 28px;line-height:1.65;}
.hero .cta-row{display:flex;gap:14px;flex-wrap:wrap;}
.hero-plate{
background:var(--plate-white);border-radius:10px;padding:0;
box-shadow:0 24px 56px rgba(0,0,0,.35);overflow:hidden;
display:flex;flex-direction:column;width:100%;max-width:420px;
}
.hero-plate .strip{
background:var(--abn-blue);color:#fff;padding:8px 16px;
font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;
display:flex;justify-content:space-between;gap:10px;
}
.hero-plate .face{padding:28px 24px 32px;text-align:center;}
.hero-plate .face .plate-line{font-family:var(--font-plate);font-size:clamp(26px,7vw,52px);letter-spacing:.08em;color:var(--plate-black);}
.hero-plate .face .cap{margin-top:12px;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;color:#6b6f76;}
/* Plate Image override: an uploaded image takes the plate's exact
footprint (same max-width, radius, shadow) instead of the strip/face
markup, so the hero keeps the same rhythm either way. */
.hero-plate.hero-plate-image{background:none;box-shadow:none;}
.hero-plate-img{width:100%;height:auto;display:block;border-radius:10px;box-shadow:0 24px 56px rgba(0,0,0,.35);}
/* Image-only hero: every text field left blank, Plate Image uploaded —
render just the image as a wide banner with the same section rhythm
(hero-top/hero-bottom padding) the copy+plate layout would have used. */
.hero-image-only .wrap{display:block;}
.hero-wide-image{
width:100%;height:auto;display:block;border-radius:12px;
box-shadow:0 24px 56px rgba(0,0,0,.35);
}
/* ============ 1/6 + 2/3 + 1/6 CONTENT LAYOUT (Hero Special) ============
Whitespace grid used below the hero: empty side gutters (1/6 each) frame
a centered 2/3 content column, matching the design library's layout-grid
ratio (1fr 4fr 1fr). Collapses to a single, full-width column on mobile. */
.content-136{display:grid;grid-template-columns:1fr;gap:0;padding:var(--section-pad) 0;}
.content-136 .content-gutter{display:none;}
.content-136 .content-main{margin:0;}
/* ============ 1/3 + 2/3 CONTENT LAYOUT (Left Sidebar template) ============
Design library's layout-grid ratio 1fr 2fr — narrow intro/nav rail (the
registered Left Sidebar) beside the wide detail/body column. Single
column stack on mobile, same as every other multi-column region. */
.content-13{display:grid;grid-template-columns:1fr;gap:32px;padding:var(--section-pad) 0;}
.content-13 .content-main{margin:0;}
/* ============ 2/3 + 1/3 CONTENT LAYOUT (Right Sidebar template) ============
Design library's layout-grid ratio 2fr 1fr — wide detail/body column
beside a narrow aside/meta rail (the registered Right Sidebar). */
.content-21{display:grid;grid-template-columns:1fr;gap:32px;padding:var(--section-pad) 0;}
.content-21 .content-main{margin:0;}
/* ============ 1/6 + 2/3 + 1/6 WITH SIDEBARS (Rail + Content + Rail) ========
Same 1fr 4fr 1fr ratio as .content-136, but the outer rails carry the
actual registered Left/Right Sidebars instead of empty whitespace. */
.content-136-rail{display:grid;grid-template-columns:1fr;gap:32px;padding:var(--section-pad) 0;}
.content-136-rail .content-main{margin:0;}
/* ============ 1/4 + 3/4 CONTENT LAYOUT (Left Sidebar + Content) ===========
Design library's layout-grid ratio 1fr 3fr — navigation rail (Left
Sidebar) beside the primary content column. */
.content-14{display:grid;grid-template-columns:1fr;gap:32px;padding:var(--section-pad) 0;}
.content-14 .content-main{margin:0;}
/* ============ 3/4 + 1/4 CONTENT LAYOUT (Content + Right Sidebar + Bento) ===
Design library's layout-grid ratio 3fr 1fr — primary content beside a
column that stacks the Right Sidebar above four fixed bento tiles. */
/* min-width:0 below: grid/flex items default to min-width:auto, which lets
an item refuse to shrink below its own content's intrinsic width — for
the bento tiles' 2-column grid (and their all-caps, letter-spaced tag/
title text) that intrinsic width can exceed the column's actual
available space, so the item (and the tiles inside it) overflow past
.wrap's padding and touch/exceed the site edge, worst on medium/narrow
screens where there's the least room to spare. Setting min-width:0 all
the way down the chain (grid column → flex stack → bento grid) lets
each level shrink to fit instead. */
.content-31{display:grid;grid-template-columns:1fr;gap:32px;padding:var(--section-pad) 0;min-width:0;}
.content-31 .content-main{margin:0;min-width:0;}
/* ============ 1/5 + 3/5 + 1/5 (Left Sidebar + Content + Right Sidebar) ====
Design library's layout-grid ratio 1fr 3fr 1fr. */
.content-131{display:grid;grid-template-columns:1fr;gap:32px;padding:var(--section-pad) 0;}
.content-131 .content-main{margin:0;}
/* ============ 1/4 + 1/2 + 1/4 (Left Sidebar + Content + Right Sidebar + Bento)
Design library's layout-grid ratio 1fr 2fr 1fr — the right rail stacks
the Right Sidebar above four fixed bento tiles, same as .content-31. */
.content-121{display:grid;grid-template-columns:1fr;gap:32px;padding:var(--section-pad) 0;min-width:0;}
.content-121 .content-main{margin:0;min-width:0;}
/* Groups a Right Sidebar with the 4 fixed bento tiles into one grid cell
wherever a layout stacks bento tiles beneath a sidebar (g-6 / g-8). */
.sidebar-bento-stack{display:flex;flex-direction:column;gap:24px;min-width:0;}
/* ============ SIDEBAR ORDER — mobile & medium breakpoints ============
Below the 1081px "sidebars appear as flanking columns" breakpoint, the
main content always reads first, with the sidebar(s) following after
it — regardless of their left/right naming, which only describes their
desktop position. Reset back to natural document order (sidebar-left,
content, sidebar-right) inside the 1081px+ block below, where the
templates' named layout actually takes effect. */
.content-13 .sidebar-left,.content-14 .sidebar-left,.content-131 .sidebar-left,
.content-121 .sidebar-left,.content-136-rail .sidebar-left,.layout-3col .sidebar-left{
order:2;
}
.content-13 .content-main,.content-14 .content-main,.content-131 .content-main,
.content-121 .content-main,.content-136-rail .content-main,.layout-3col .content-main{
order:1;
}
.content-131 .sidebar-right,.content-136-rail .sidebar-right,.layout-3col .sidebar-right,
.content-121 .sidebar-bento-stack{
order:3;
}
/* ============ MINI BENTO (4 fixed, metabox-driven tiles) ==================
A compact 2x2 version of the main .bento tile system for the narrow
sidebar-adjacent column — reuses the same card colors/typography via the
shared "bento" class, but forces a small, uniform 2-column grid instead
of the multi-column responsive spans used by the full-width bento. */
.bento.mini-bento-tiles{
/* minmax(0,1fr) rather than a bare 1fr: a plain 1fr track's minimum
width is its content's min-content size, so a tile with long
letter-spaced, uppercase text (tag/title) can force the column —
and the whole grid — wider than the sidebar column actually is,
overflowing past .wrap's padding. minmax(0,1fr) lets each column
shrink to fit instead. */
grid-template-columns:repeat(2,minmax(0,1fr)) !important;
grid-auto-rows:minmax(170px, auto) !important;
gap:14px !important;
margin-top:0;
}
/* Unlike the main .bento grid (which deliberately clips overflow so one
tall tile can't balloon the whole row), each mini-bento row only ever
holds tiles from the same 4-tile set, so there's no shared-row risk —
letting height:auto + a slightly larger clamp here means the tile
grows to fit its own tag/title/text instead of truncating it. */
.bento.mini-bento-tiles .card{grid-column:span 1 !important;grid-row:span 1 !important;padding:18px;height:auto;min-height:170px;}
.bento.mini-bento-tiles h3{font-size:20px;-webkit-line-clamp:4;}
.bento.mini-bento-tiles p.body-sm{font-size:13px;-webkit-line-clamp:5;}
/* ============ INTRO LABEL (Narrow Intro, Wide Detail template) ============
The "Summary / Label" metabox field, styled as a plate-like display
label beside the wide detail column — mono eyebrow caption above a
large display-font label, matching the stat/plate typographic pairing
used throughout the design library. */
.intro-label{
background:var(--abn-surface);border:1px solid var(--abn-line);border-radius:var(--radius);
padding:28px 24px;height:fit-content;
}
.intro-label-text{
font-family:var(--font-display);font-size:26px;line-height:1.15;color:var(--abn-text);margin:0;
}
/* ============ ASIDE / META (Wide Detail, Narrow Aside template) ===========
The "Aside / Meta" metabox field, styled after the design library's
bento "client quote" tile — mono caption + serif italic body copy. */
.aside-meta{
background:var(--abn-surface);border:1px solid var(--abn-line);border-radius:var(--radius);
padding:28px 24px;height:fit-content;
}
.aside-meta .quote-cap{
font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
color:var(--abn-muted);margin-bottom:10px;
}
.aside-meta-text{
font-family:var(--font-serif);font-style:italic;font-size:16px;line-height:1.6;color:var(--abn-text);margin:0;
}
/* ============ CPT LIST / FAQ LIST (templates 8 & 9) ========================
A simple, prose-formatted list of entries reusing the existing .abn-post
rhythm (bottom border + spacing) for separation between items. */
.cpt-list{display:flex;flex-direction:column;}
/* ============================================================
FAQ ACCORDION — Pattern 19 (patterns-ops.html, "Help Center, Forum &
Support Tickets"). Values below are ported exactly from that pattern's
.faq-item/.q/.a rules — just a question row and, once expanded, its
answer directly beneath it. No dates, tags, links, or thumbnails.
============================================================ */
.faq-item{border-bottom:1px solid var(--abn-line);padding:14px 0;}
.faq-item:last-child{border-bottom:none;}
.faq-item .q{
font-weight:600;font-size:14px;display:flex;justify-content:space-between;align-items:center;
gap:16px;cursor:pointer;color:var(--abn-text);margin:0;
}
.faq-item .q .faq-toggle{font-family:var(--font-mono);color:var(--abn-muted);flex-shrink:0;}
.faq-item .a{font-size:13.5px;color:var(--abn-muted);margin-top:8px;display:none;}
.faq-item .a p{margin:0 0 10px;}
.faq-item .a p:last-child{margin-bottom:0;}
.faq-item.open .a{display:block;}
.cpt-list-item{display:flex;gap:20px;align-items:stretch;}
.cpt-list-item .cpt-list-body{min-width:0;flex:1 1 auto;padding:2px 0;}
.cpt-list-thumb{flex:0 0 88px;align-self:stretch;max-height:88px;display:block;border-radius:var(--radius);overflow:hidden;background:var(--abn-surface);}
.cpt-list-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.cpt-list-thumb-placeholder{width:100%;height:100%;min-height:88px;display:flex;align-items:center;justify-content:center;background:var(--abn-surface);}
.cpt-list-thumb-placeholder svg{width:26px;height:26px;color:var(--abn-muted);}
@media (max-width:720px){
.cpt-list-thumb{flex-basis:64px;max-height:64px;}
.cpt-list-thumb-placeholder{min-height:64px;}
.cpt-list-thumb-placeholder svg{width:20px;height:20px;}
}
/* ============ BENTO GRID (Hero Magazine / Hero Magazine Text) ============
Design library's tile pattern: six canonical shapes/colors cycling
regardless of tile count, base = single column on mobile, growing to
2 / 4 / 6 columns at the same breakpoints the rest of the theme uses.
b1/b4 keep a double row-span at every tier for a "feature tile" anchor. */
/* Content region padding: on top of the vertical section rhythm, the
smallest screens get extra horizontal breathing room (beyond the
standard site gutter) so tiles read as clearly inset cards rather than
bleeding to the viewport edge — matches the design library's own
generous bento margins. */
/* NOTE: this was previously the 2-value shorthand `padding:var(--section-pad) 0`,
which sets top/bottom from the first value but ALSO zeroes left/right —
silently overriding .wrap's own horizontal gutter (padding:0 var(--site-gutter))
for this element at every breakpoint except the one small-screen patch
below. That's what let tiles bleed edge-to-edge at medium widths. Only
vertical padding should be set here; horizontal comes from .wrap. */
.bento-wrap{padding-top:var(--section-pad);padding-bottom:var(--section-pad);}
@media (max-width:899px){
/* Extra inset ON TOP OF the standard site gutter, specifically for the
bento grid on small screens, so tiles never read as edge-to-edge. */
.bento-wrap{
padding-left:calc(var(--site-gutter) + 8px);
padding-right:calc(var(--site-gutter) + 8px);
}
}
/* Row height: 150px (the design library's own stat-card value) is only
enough for a bare tag + number — once real post content (tag + a
two-line title + a two-line excerpt + a "Read More" link) has to fit
in a single-row tile, 150px clips it. 218px is the smallest height
that comfortably fits that full stack at the clamps below, so every
tile's text lands fully inside its own padded area instead of
crowding against the edges. */
.bento{display:grid;grid-template-columns:minmax(0,1fr);grid-auto-rows:218px;gap:20px;align-items:stretch;width:100%;min-width:0;}
.bento .card{
/* min-width/min-height:0 override the grid/flex default of
min-height:auto — without this, a card whose text content is
taller than the fixed track forces the WHOLE grid row to grow to
fit it (since a grid/flex item won't shrink below its content's
intrinsic size by default), which is what made the feature tile
balloon to an oversized, disproportionate height. */
min-width:0;min-height:0;width:100%;height:100%;margin:0;box-sizing:border-box;
border-radius:10px;padding:26px;display:flex;flex-direction:column;justify-content:space-between;
overflow:hidden;position:relative;gap:14px;
/* Every tile gets a faint outline by default — without it, a dark
tile (e.g. the plate-black or navy shapes) can visually blend into
an equally dark page background, making its card look edge-to-edge
/ wider than a brighter neighboring tile even though the grid gives
every tile the exact same width. Shapes with their own border
(below) simply override this. Uses the theme's own line/divider
token (mode-aware) rather than a fixed color — a hardcoded light
border disappears in light mode just as easily as a dark tile
disappears against a dark page background in dark mode. */
border:1px solid var(--abn-line);
box-shadow:0 1px 3px rgba(0,0,0,.16);
}
.bento .card > div{min-width:0;min-height:0;}
.bento .card > div:first-child{display:flex;flex-direction:column;gap:8px;overflow:hidden;}
.bento .card > div:last-child{display:flex;flex-direction:column;gap:8px;overflow:hidden;}
.bento .b1,.bento .b4{grid-row:span 2;}
.bento .b1,.bento .b2,.bento .b3,.bento .b4,.bento .b5,.bento .b6{grid-column:span 1;}
/* six-tile attractive color rotation, reused for however many tiles exist */
.bento .b1{background:var(--plate-black);color:var(--plate-white);}
.bento .b1 .tag,.bento .b1 p.body-sm{color:var(--chrome-muted,#9195a0);}
.bento .b2{background:var(--abn-surface);border:1px solid var(--abn-line);color:var(--abn-text);}
.bento .b2 .tag,.bento .b2 p.body-sm{color:var(--abn-muted);}
.bento .b3{background:var(--abn-accent);color:var(--plate-black);}
.bento .b3 .tag,.bento .b3 p.body-sm{color:rgba(12,13,14,.65);}
.bento .b4{background:var(--abn-navycard);color:var(--plate-white);}
.bento .b4 .tag,.bento .b4 p.body-sm{color:#c9cbcf;}
.bento .b5{background:var(--abn-blue);color:#fff;}
.bento .b5 .tag,.bento .b5 p.body-sm{color:rgba(255,255,255,.75);}
.bento .b6{background:var(--abn-surface);border:1px solid var(--abn-line);color:var(--abn-text);}
.bento .b6 .tag,.bento .b6 p.body-sm{color:var(--abn-muted);}
/* "Read More" is a fixed --abn-blue by default (see .card-link below), which
disappears on the b5 tile (its background IS --abn-blue) and is low-
contrast on the accent/gold b3 tile — so each tile gets an explicit
color guaranteed to contrast with its own background. */
.bento .b1 .card-link,.bento .b4 .card-link{color:var(--plate-white);}
.bento .b2 .card-link,.bento .b6 .card-link{color:var(--abn-blue);}
.bento .b3 .card-link{color:rgba(12,13,14,.85);}
.bento .b5 .card-link{color:#fff;}
.bento .card.has-image .card-link{color:#fff;}
.bento h3{
font-family:var(--font-display);font-size:24px;margin:0;letter-spacing:.01em;line-height:1.05;
display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
.bento h3 a{color:inherit;text-decoration:none;}
.bento h3 a:hover,.bento h3 a:focus-visible{text-decoration:underline;}
.bento .tag{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;opacity:.8;}
.bento p.body-sm{
font-size:13.5px;line-height:1.55;margin:0;
display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;
}
/* the b1/b4 feature tiles are twice as tall (grid-row:span 2), so they can
comfortably show more of the title/excerpt before truncating */
.bento .b1 h3,.bento .b4 h3{-webkit-line-clamp:3;}
.bento .b1 p.body-sm,.bento .b4 p.body-sm{-webkit-line-clamp:4;}
.bento .card-link{
font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;
text-decoration:underline;text-underline-offset:3px;flex-shrink:0;
}
/* featured-image background (Hero Magazine only — never set on Hero Magazine Text) */
.bento .card.has-image{background-size:cover;background-position:center;color:#fff;}
.bento .card.has-image::before{
content:'';position:absolute;inset:0;
background:linear-gradient(180deg, rgba(10,10,10,.2) 0%, rgba(8,8,8,.85) 100%);
}
/* ============================================================
BLOG / NEWS / JOURNAL POSTS — Pattern 01 (patterns-content.html)
Used by the "News Hero" page template's hero section: one
featured post + a grid of 3 shorter entries.
============================================================ */
.section-pad{padding-top:var(--section-pad);padding-bottom:var(--section-pad);}
.section-head{max-width:640px;margin-bottom:52px;}
.section-head .eyebrow{margin-bottom:12px;}
/* News Hero / News List content section: the page's own body copy (if
any) sits above the bento tiles / row list with the same balanced gap
.section-head used to provide — no page title/eyebrow repeated here,
since the hero above already carries its own optional title/eyebrow. */
.news-content-intro{margin-bottom:52px;}
.section-head h2{
font-family:var(--font-display);font-size:clamp(34px,4.4vw,52px);margin:0 0 16px;
line-height:1.02;letter-spacing:.005em;color:var(--abn-text);
}
.section-head p{color:var(--abn-muted);font-size:16px;line-height:1.65;margin:0;}
/* .pill / .avatar values below are ported exactly from the design
library's shared assets/patterns.css (not re-derived), since that file
is the source of truth for these two primitives across every pattern. */
.pill{
font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
padding:4px 10px;border-radius:20px;display:inline-flex;align-items:center;gap:5px;font-weight:700;
}
.pill.neutral{background:var(--abn-page-bg);color:var(--abn-muted);border:1px solid var(--abn-line);}
.avatar{
width:32px;height:32px;border-radius:50%;background:var(--plate-black);color:var(--plate-white);
display:flex;align-items:center;justify-content:center;
font-family:var(--font-mono);font-size:11px;font-weight:700;flex-shrink:0;
}
.post-meta{
display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:11px;
color:var(--abn-muted);
}
/* Pattern 01's markup gives the featured post an avatar (scaled down to
24px/9px there) plus full "Name · Date · read time" text; the grid
cards below it use plain "Name · Date" text with no avatar at all —
preserved here exactly rather than adding an avatar to every tile. */
.post-featured .post-meta .avatar{width:24px;height:24px;font-size:9px;}
.post-featured{
display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:stretch;
padding-bottom:44px;margin-bottom:44px;border-bottom:1px solid var(--abn-line);
}
.post-featured .post-media{
border-radius:10px;min-height:220px;
background:linear-gradient(135deg, var(--plate-black) 0%, var(--abn-line) 60%, var(--abn-accent) 100%);
background-size:cover;background-position:center;
}
.post-featured .post-body{display:flex;flex-direction:column;justify-content:center;gap:12px;}
.post-featured .post-body h3{
font-family:var(--font-display);font-size:28px;line-height:1.08;margin:0 0 8px;color:var(--abn-text);
}
.post-featured .post-body h3 a{color:inherit;text-decoration:none;}
.post-featured .post-body h3 a:hover{text-decoration:underline;}
.post-featured .post-body p.body-sm{color:var(--abn-muted);font-size:14.5px;line-height:1.6;margin:0;}
.post-grid{
display:grid;grid-template-columns:repeat(3, 1fr);gap:20px;margin-top:28px;
}
.post-card{display:flex;flex-direction:column;}
.post-card .post-media{min-height:120px;margin-bottom:14px;border-radius:10px;background-size:cover;background-position:center;
background:linear-gradient(135deg, var(--plate-black) 0%, var(--abn-line) 60%, var(--abn-accent) 100%);
}
.post-card h3{font-family:var(--font-display);font-size:19px;line-height:1.25;margin:0 0 8px;color:var(--abn-text);}
.post-card h3 a{color:inherit;text-decoration:none;}
.post-card h3 a:hover{text-decoration:underline;}
.post-card p.body-sm{color:var(--abn-muted);font-size:13.5px;line-height:1.5;margin:0 0 10px;}
@media (max-width:900px){
.post-featured{grid-template-columns:1fr;gap:24px;}
.post-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:600px){
.post-grid{grid-template-columns:1fr;}
}
/* News Hero: the featured post + 3-up grid stack as full-width blocks —
.hero .wrap's row-direction override (for the homepage's copy+plate
hero) does not apply here, same fix as Product Family above. */
.hero-news .wrap{
flex-direction:column !important;align-items:stretch !important;gap:0 !important;
}
.hero-news-heading{margin-bottom:40px;}
.hero-news-heading h1{
font-family:var(--font-display);font-size:clamp(34px,5vw,56px);line-height:1.02;
margin:0;color:var(--abn-text);
}
/* ============================================================
LIST SHELL — Pattern 05 (patterns-content.html, "Job Openings —
Listings, Quiz & Application Form"). Reused for the "News List"
template's content section: a plain row-list of posts, no thumbnails.
============================================================ */
.list-shell{
/* border-radius matches the design library's .card-shell exactly
(10px) rather than the theme's own smaller --radius token (6px). */
background:var(--abn-surface);border:1px solid var(--abn-line);border-radius:10px;padding:24px;
}
.list-row{
display:flex;justify-content:space-between;align-items:center;padding:16px 0;
border-bottom:1px solid var(--abn-line);flex-wrap:wrap;gap:12px;
}
.list-row:last-child{border-bottom:none;}
.list-row-title{font-family:var(--font-display);font-size:19px;color:var(--abn-text);text-decoration:none;}
.list-row-title:hover{text-decoration:underline;}
.list-row-meta{
font-family:var(--font-mono);font-size:11px;color:var(--abn-muted);
display:flex;gap:14px;flex-wrap:wrap;margin-top:4px;
}
.bento .card.has-image > *{position:relative;z-index:1;}
.bento .card.has-image .tag,.bento .card.has-image p.body-sm{color:rgba(255,255,255,.75);}
.bento .card.has-image h3,.bento .card.has-image .card-link{color:#fff;}
.bento-empty{color:var(--abn-muted);font-style:italic;padding:40px 0;text-align:center;}
/* ============ CONTENT LAYOUT: sidebar-left / main / sidebar-right (mobile-first stack) ============ */
.layout-3col{display:flex;flex-direction:column;gap:32px;padding:var(--section-pad) 0;}
.content-main{
min-width:0;
margin:0 0 var(--section-pad);
padding:28px 24px;
background:var(--abn-page-bg);
border-radius:var(--radius);
}
.sidebar{width:100%;}
.sidebar nav.vertical .vlabel{
font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--abn-muted);margin-bottom:12px;
}
.sidebar nav.vertical ul{list-style:none;margin:0;padding:0;border-left:2px solid var(--abn-line);}
.sidebar nav.vertical li a{display:block;padding:9px 0 9px 16px;font-family:var(--font-mono);font-size:12px;letter-spacing:.02em;color:var(--abn-muted);border-left:2px solid transparent;margin-left:-2px;}
.sidebar nav.vertical li a:hover,.sidebar nav.vertical .current-menu-item>a{color:var(--abn-text);border-left-color:var(--abn-accent-alt);font-weight:600;}
.sidebar .widget-area{margin-top:20px;display:flex;flex-direction:column;gap:24px;}
.sidebar .abn-widget{background:var(--abn-surface);border:1px solid var(--abn-line);border-radius:var(--radius);padding:18px;}
.sidebar .widget-title{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--abn-muted);margin:0 0 12px;}
body.no-sidebar-left .sidebar-left,body.no-sidebar-right .sidebar-right{display:none;}
/* ============ ENTRY / PROSE ============ */
/* Page-content "intro" shown above the CPT List / CPT List Text / FAQ
List templates' purposeful content (list or accordion) — see
autobahn_render_page_content_intro(). Left-aligned like the rest of
the narrow content column, rather than the centered max-width:820px
.content-showcase normally uses for a standalone read column. */
.abn-list-intro{margin-bottom:36px;}
.abn-list-intro .prose{max-width:none;margin:0;}
.abn-post{margin-bottom:40px;padding-bottom:40px;border-bottom:1px solid var(--abn-line);}
.abn-post:last-child{border-bottom:none;}
.entry-header{margin-bottom:28px;}
/* CPT List and FAQ List both follow their title directly with a dense,
bordered list of rows (.cpt-list / .faq-accordion) rather than flowing
prose — the standard 28px gap above reads as too tight against that
denser rhythm, so it's widened here to match the same ~44px used
elsewhere before other dense/multi-item sections (e.g. .post-featured,
.news-content-intro). */
.content-31 .entry-header{margin-bottom:44px;}
.entry-title{font-family:var(--font-display);font-size:clamp(26px,5vw,40px);line-height:1.05;margin:0 0 8px;}
.entry-title a{color:var(--abn-text);}
.entry-meta{margin-bottom:16px;}
.abn-post-thumb,.abn-post-thumb-full{border-radius:var(--radius);overflow:hidden;margin-bottom:18px;}
/* ============ CONTENT / RICH-TEXT SHOWCASE — per design library ============
.content-showcase centers a narrower reading column; .prose carries all
the typographic treatment (headings, lists, code, quotes, links). */
.content-showcase{padding:0;}
.content-showcase .prose{max-width:820px;margin:0 auto;}
.abn-post-hero-special{border-bottom:none;padding-bottom:0;}
.prose h1,.prose h2,.prose h3,.prose h4,.prose h5,.prose h6{
font-family:var(--font-display);letter-spacing:.01em;margin:1.3em 0 .4em;line-height:1.05;color:var(--abn-text);
}
.prose h1:first-child,.prose h2:first-child,.prose h3:first-child{margin-top:0;}
.prose h1{font-size:clamp(30px,5vw,44px);}
.prose h2{font-size:clamp(24px,4vw,34px);}
.prose h3{font-size:clamp(20px,3.2vw,26px);}
.prose h4{font-size:16px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.08em;}
.prose h5{font-size:13px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--abn-muted);}
.prose h6{font-size:11.5px;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--abn-muted);}
.prose p{font-size:15.5px;line-height:1.8;color:var(--abn-text);margin:0 0 20px;}
.prose hr{border:none;border-top:2px dashed var(--abn-line);margin:32px 0;}
.prose ul,.prose ol{padding-left:4px;margin:0 0 20px;color:var(--abn-text);font-size:15px;line-height:1.8;}
.prose ul{list-style:none;}
.prose ul li{position:relative;padding-left:22px;margin-bottom:8px;}
.prose ul li::before{content:'▸';position:absolute;left:0;color:var(--abn-accent-alt);}
.prose ol{list-style:none;counter-reset:step;}
.prose ol li{position:relative;padding-left:32px;margin-bottom:8px;counter-increment:step;}
.prose ol li::before{
content:counter(step,decimal-leading-zero);position:absolute;left:0;top:1px;
font-family:var(--font-mono);font-size:12px;color:var(--abn-accent-alt);
}
/* Inline content links (post/page body, FAQ answers, CPT list excerpts,
the "page content as intro" block, etc.) — no underline in any state,
colored with the design system's accent tokens rather than a plain
browser blue. */
.prose a{color:var(--abn-accent-alt);text-decoration:none;}
.prose a:hover,.prose a:focus-visible{color:var(--abn-accent);text-decoration:none;}
.prose code{font-family:var(--font-mono);background:var(--abn-code-bg);color:var(--abn-code-text);padding:2px 6px;border-radius:4px;font-size:13.5px;}
.prose pre{background:var(--abn-code-bg);border-radius:6px;padding:16px 18px;overflow-x:auto;}
.prose pre code{background:none;padding:0;}
.prose blockquote{
font-family:var(--font-serif);font-style:italic;font-size:20px;line-height:1.5;
border-left:3px solid var(--abn-accent-alt);padding:6px 0 6px 22px;margin:28px 0;color:var(--abn-text);
}
.prose blockquote cite{
display:block;font-family:var(--font-mono);font-style:normal;font-size:10.5px;
letter-spacing:.08em;text-transform:uppercase;color:var(--abn-muted);margin-top:10px;
}
.prose sub,.prose sup{font-size:11px;}
.prose img{border-radius:var(--radius);}
.prose img.inline-icon{height:1em;width:1em;vertical-align:middle;margin:0 2px;border-radius:0;}
.prose s{opacity:.55;}
.prose .text-amber{color:var(--abn-accent-alt);font-weight:600;}
.prose .text-blue{color:var(--abn-blue);font-weight:600;}
.prose table{width:100%;border-collapse:collapse;margin:24px 0;font-size:14px;}
.prose th,.prose td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--abn-line);}
.prose th{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--abn-muted);}
.showcase-tags{display:flex;flex-wrap:wrap;gap:10px;margin:28px 0 0;}
.showcase-tags span{
font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
border:1px solid var(--abn-line);border-radius:20px;padding:6px 14px;color:var(--abn-muted);
}
.content-404{padding:80px 0;text-align:center;}
.error-404-banner{margin-bottom:40px;}
.error-404-banner .eyebrow{justify-content:center;}
.error-404-banner h1{
font-family:var(--font-display);font-size:clamp(80px,16vw,160px);line-height:.88;
margin:0 0 20px;color:var(--abn-text);letter-spacing:.01em;
}
.error-404-banner p{color:var(--abn-muted);font-size:17px;line-height:1.6;max-width:460px;margin:0 auto;}
/* Minimal search bar under the 404 banner — the theme's one search
treatment (searchform.php's "cmd-search"), just given its own bordered
box and centered here instead of living inline in the header ribbon. */
.error-404-search{max-width:420px;margin:0 auto 28px;}
.error-404-search .cmd-search{
flex:none;margin-left:0;width:100%;min-width:0;
border:1px solid var(--abn-line);border-radius:var(--radius);
padding:12px 16px;background:var(--abn-surface);
}
.error-404-home{
display:inline-block;font-family:var(--font-mono);font-size:12px;
letter-spacing:.05em;text-transform:uppercase;color:var(--abn-muted);text-decoration:none;
}
.error-404-home:hover{color:var(--abn-text);text-decoration:underline;}
/* ============ SEARCH RESULTS BANNER ============
"Sweeet!" up top regardless of hit or miss, the result-count eyebrow
for the balanced/functional half, an italic serif tagline for the
quirky half, and the theme's one search form re-centered underneath
so a miss can be refined without scrolling back to the header — same
bordered-box treatment as the 404 page's search bar. */
.search-results-banner{padding:64px 0 48px;text-align:center;border-bottom:1px solid var(--abn-line);}
.search-results-banner .eyebrow{justify-content:center;}
.search-results-banner h1{
font-family:var(--font-display);font-size:clamp(48px,8vw,84px);line-height:.95;
margin:0 0 12px;color:var(--abn-text);letter-spacing:.01em;
}
.search-results-banner .tagline{
font-family:var(--font-serif);font-style:italic;color:var(--abn-muted);font-size:17px;margin:0 0 28px;
}
.search-results-searchbar{max-width:420px;margin:0 auto;}
.search-results-searchbar .cmd-search{
flex:none;margin-left:0;width:100%;min-width:0;
border:1px solid var(--abn-line);border-radius:var(--radius);
padding:12px 16px;background:var(--abn-surface);
}
.pagination{display:flex;gap:10px;justify-content:center;margin-top:32px;font-family:var(--font-mono);font-size:12px;}
.pagination .page-numbers{padding:8px 12px;border:1px solid var(--abn-line);border-radius:4px;}
.pagination .page-numbers.current{background:var(--abn-accent);color:var(--plate-black);border-color:var(--abn-accent);}
/* ============ FOOTER RIBBON — sits between main content and the 6-column
footer, per design library (.footer-ribbon): full-bleed amber strip,
plate-black text, left/right text split. Inactive when both blank. ============ */
.footer-ribbon{
background:var(--abn-accent);color:var(--plate-black);font-family:var(--font-mono);
font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
}
.footer-ribbon .wrap{
display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;
padding:10px var(--site-gutter);
}
.footer-ribbon .fr-left{text-align:left;}
.footer-ribbon .fr-right{text-align:right;margin-left:auto;}
/* Same "never underlined, in any state" rule as the top ribbon, for any
typed into the Footer Ribbon Theme Option text fields. */
.footer-ribbon a{color:inherit;text-decoration:none;}
.footer-ribbon a:hover,.footer-ribbon a:focus{color:inherit;text-decoration:none;}
/* ============ FOOTER ============ */
footer.site{background:var(--abn-footer-bg);color:var(--abn-muted);padding-top:calc(var(--section-pad) * .75);transition:background .2s ease;}
.footer-text-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;color:var(--abn-muted);width:100%;}
.footer-text-row .ftr-left{text-align:left;}
.footer-text-row .ftr-right{text-align:right;margin-left:auto;}
/* Footer Bottom left/right Theme Option text fields, same rule. */
.footer-text-row a{color:inherit;text-decoration:none;}
.footer-text-row a:hover,.footer-text-row a:focus{color:inherit;text-decoration:none;}
.footer-grid{display:grid;grid-template-columns:1fr;gap:24px;padding-bottom:36px;border-bottom:1px solid var(--abn-line);padding-top:28px;}
.footer-grid .col h4{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--abn-accent);margin:0 0 14px;}
.footer-grid .col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.footer-grid .col ul a{font-size:13px;color:var(--abn-footer-link);}
.footer-grid .col ul a:hover{color:var(--abn-text);}
.footer-brand p{font-size:13px;color:var(--abn-muted);max-width:280px;line-height:1.6;margin-top:14px;}
/* Footer Text — Below Logo Theme Option field, same rule. */
.footer-brand p a{color:inherit;text-decoration:none;}
.footer-brand p a:hover,.footer-brand p a:focus{color:inherit;text-decoration:none;}
.footer-bottom{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:22px 0;}
/* ============ FORMS (per design library "plate" system) ============
Two input families: PLATE SHORT (name/phone-scale fields — license-plate
styling, FE-Schrift, uppercase, tight tracking) and CLOSE FAMILY / long
inputs (url/email/search-scale fields — mono, tab-accent). Both sit on a
2-column form-grid that collapses to 1 column on mobile, plus checkbox
("bolt-check"), radio ("bolt-radio"), and toggle ("switch") controls. */
.legend{
display:flex;gap:20px;flex-wrap:wrap;margin:0 0 20px;padding:14px 16px;
border:1px dashed var(--abn-line);border-radius:8px;background:var(--abn-header-bg-soft);
}
.legend .li{display:flex;align-items:center;gap:10px;}
.legend .swatch{width:30px;height:20px;border-radius:4px;border:2px solid var(--plate-white);background:var(--plate-white);}
.legend span.txt{font-family:var(--font-mono);font-size:10.5px;color:var(--abn-muted);letter-spacing:.03em;}
.legend span.txt b{color:var(--abn-text);}
form.request{background:var(--abn-header-bg-alt);border:1px solid var(--abn-line);border-radius:12px;padding:24px;}
.form-grid{display:grid;grid-template-columns:1fr;gap:18px;}
.field{display:flex;flex-direction:column;gap:8px;}
.field.full{grid-column:1 / -1;}
.field label{
font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
color:var(--abn-muted);display:flex;justify-content:space-between;
}
.field label .hint{color:var(--abn-accent);text-transform:none;letter-spacing:0;font-size:10px;}
/* --- PLATE SHORT family: name / phone-scale fields --- */
.input-plate-wrap{
display:flex;border-radius:6px;overflow:hidden;border:2px solid var(--plate-black);
box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.input-plate-wrap .euro{
width:22px;flex-shrink:0;background:var(--abn-blue);display:flex;align-items:center;justify-content:center;
color:#f2c94c;font-size:10px;
}
input.plate-short{
border:none;outline:none;background:var(--plate-white);color:var(--plate-black);
font-family:var(--font-plate);font-size:20px;letter-spacing:.09em;text-transform:uppercase;
padding:12px 14px;width:100%;
}
input.plate-short::placeholder{color:#9b9994;letter-spacing:.09em;}
/* --- CLOSE FAMILY / long inputs: url / email / search-scale fields --- */
.input-long-wrap{
display:flex;border-radius:6px;overflow:hidden;border:2px solid var(--plate-black);
box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.input-long-wrap .tab{
width:34px;flex-shrink:0;background:var(--plate-black);display:flex;align-items:center;justify-content:center;
color:var(--abn-accent);font-family:var(--font-mono);font-size:13px;font-weight:700;
}
input.plate-long{
border:none;outline:none;background:var(--plate-white);color:var(--plate-black);
font-family:var(--font-mono);font-size:14px;letter-spacing:.01em;
padding:14px 16px;width:100%;
}
input.plate-long::placeholder{color:#9b9994;}
/* --- select: matches the input family, road-sign chevron --- */
.select-wrap{position:relative;}
select.plate-select{
appearance:none;-webkit-appearance:none;
width:100%;border:2px solid var(--plate-black);border-radius:6px;
background:var(--plate-white);color:var(--plate-black);
font-family:var(--font-mono);font-size:13.5px;letter-spacing:.03em;text-transform:uppercase;
padding:14px 40px 14px 16px;box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.select-wrap::after{
content:'▾';position:absolute;right:14px;top:50%;transform:translateY(-50%);
color:var(--abn-accent-alt);font-size:13px;pointer-events:none;
}
/* --- textarea: sign board --- */
textarea.plate-board{
border:2px solid var(--plate-black);border-radius:6px;background:var(--plate-white);color:var(--plate-black);
font-family:var(--font-body);font-size:14.5px;padding:16px;resize:vertical;min-height:110px;width:100%;
box-shadow:0 6px 16px rgba(0,0,0,.25);line-height:1.55;
}
textarea.plate-board::placeholder{color:#9b9994;font-style:italic;}
/* --- checkbox: bolt style --- */
.check-row{display:flex;align-items:center;gap:12px;}
.bolt-check{
width:22px;height:22px;border-radius:4px;border:2px solid var(--abn-text);
background:var(--abn-header-bg-soft);display:flex;align-items:center;justify-content:center;
color:var(--abn-accent);font-family:var(--font-mono);font-size:13px;flex-shrink:0;
}
.check-row label{font-family:var(--font-body);font-size:13.5px;color:var(--abn-text-soft);text-transform:none;letter-spacing:0;}
/* --- radio group: bolt-hole style --- */
.radio-group{display:flex;gap:20px;flex-wrap:wrap;}
.radio-item{display:flex;align-items:center;gap:9px;}
.bolt-radio{width:20px;height:20px;border-radius:50%;border:2px solid var(--abn-muted);background:var(--abn-header-bg-soft);position:relative;flex-shrink:0;}
.bolt-radio.on{border-color:var(--abn-accent);}
.bolt-radio.on::after{content:'';position:absolute;inset:4px;border-radius:50%;background:var(--abn-accent);}
.radio-item label{font-family:var(--font-body);font-size:13.5px;color:var(--abn-text-soft);}
/* --- toggle: flip sign --- */
.toggle-row{display:flex;align-items:center;justify-content:space-between;background:var(--abn-header-bg-soft);border:1px solid var(--abn-line);border-radius:6px;padding:14px 18px;}
.toggle-row .t-label{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--abn-text);}
.toggle-row .t-sub{font-family:var(--font-body);font-size:12px;color:var(--abn-muted);margin-top:3px;}
.switch{width:46px;height:26px;border-radius:14px;background:var(--abn-line);position:relative;flex-shrink:0;}
.switch.on{background:var(--abn-accent);}
.switch::after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:var(--plate-white);}
.switch.on::after{left:23px;background:var(--plate-black);}
.submit-row{display:flex;justify-content:flex-end;margin-top:8px;}
/* --- Real interactive consent checkbox, styled as the bolt-check --- */
.check-row input[type="checkbox"]{
appearance:none;-webkit-appearance:none;width:22px;height:22px;margin:0;
border-radius:4px;border:2px solid var(--abn-text);background:var(--abn-header-bg-soft);
flex-shrink:0;cursor:pointer;position:relative;
}
.check-row input[type="checkbox"]:checked{border-color:var(--abn-accent);}
.check-row input[type="checkbox"]:checked::after{
content:'✓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
color:var(--abn-accent);font-family:var(--font-mono);font-size:13px;
}
.check-row input[type="checkbox"]:focus-visible{outline:2px solid var(--abn-accent);outline-offset:2px;}
.check-row label{cursor:pointer;}
/* --- Form section: narrow intro column beside the form, per the design
library's "form-section" / "form-intro" pattern (corporate-demo.html) --- */
.form-section{padding:var(--section-pad) 0;}
.form-section .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start;}
.form-intro h2{color:var(--abn-text);font-size:38px;line-height:1.1;margin:0 0 18px;}
.form-intro p{color:var(--abn-muted);font-size:16px;line-height:1.7;max-width:420px;margin:0 0 24px;}
.testi{
border-left:3px solid var(--abn-accent);padding-left:20px;
font-family:var(--font-body);font-style:italic;color:var(--abn-text);font-size:18px;line-height:1.55;
}
.testi cite{
display:block;margin-top:14px;font-family:var(--font-mono);font-style:normal;
font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--abn-muted);
}
/* --- Whitespace (no rule line) between the metabox intro block and the
page content block on the Contact template --- */
.contact-page-content{margin-top:32px;}
@media (max-width:900px){
.form-section .wrap{grid-template-columns:1fr;gap:40px;}
}
/* --- Inline submission notices (Contact template) --- */
.form-notice{
padding:14px 18px;border-radius:8px;font-family:var(--font-mono);font-size:12.5px;
letter-spacing:.02em;margin:0 0 20px;
}
.form-notice.success{background:rgba(74,222,128,.12);border:1px solid rgba(74,222,128,.4);color:#2fae63;}
.form-notice.error{background:rgba(255,122,127,.12);border:1px solid rgba(255,122,127,.4);color:#e5484d;}
html[data-theme="dark"] .form-notice.success{color:#4ade80;}
html[data-theme="dark"] .form-notice.error{color:#ff7a7f;}
/* Soft footnote line under the form (PIN Code notice, Contact template) —
quiet and small rather than a rule/divider, per the same "whitespace,
not a line" preference already established elsewhere on this template. */
.form-footnote{
margin:20px 0 0;font-family:var(--font-mono);font-size:11.5px;letter-spacing:.02em;
color:var(--abn-muted);
}
/* ============ PRICING & FEATURE BOXES (design library Pattern 12) ========
Three-tile pricing grid used in the hero of the "Product Family" page
template. One tile can be marked "featured" (metabox-selected) — it
flips to the fixed dark "obsidian" plate (matching .btn.dark/other
always-dark accents elsewhere) with an amber "Most Popular" badge; the
other two (or all three, if nothing is selected) stay on the plain
mode-aware surface card. */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
@media (max-width:900px){.pricing-grid{grid-template-columns:1fr;}}
.price-card{
position:relative;border:1.5px solid var(--abn-line);border-radius:12px;
padding:28px;background:var(--abn-surface);display:flex;flex-direction:column;
}
.price-card.featured{
border-color:var(--abn-accent-alt);background:var(--plate-black);color:var(--plate-white);
}
.price-card .plan-name{
font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
color:var(--abn-muted);
}
.price-card.featured .plan-name{color:var(--abn-accent);}
.price-card .price{font-family:var(--font-display);font-weight:700;font-size:44px;margin:10px 0 4px;color:var(--abn-text);}
.price-card.featured .price{color:var(--plate-white);}
.price-card .price small{font-family:var(--font-mono);font-size:13px;color:var(--abn-muted);}
.price-card .price-desc{font-size:13px;color:var(--abn-muted);margin:0 0 8px;}
.price-card.featured .price-desc{color:#d7d9dd;}
.price-card ul{list-style:none;margin:20px 0;padding:0;flex:1 1 auto;}
.price-card li{
padding:8px 0;font-size:13.5px;display:flex;gap:8px;align-items:flex-start;
border-bottom:1px dashed var(--abn-line);color:var(--abn-text);
}
.price-card li:last-child{border-bottom:none;}
.price-card.featured li{border-bottom:1px dashed rgba(255,255,255,.15);color:var(--plate-white);}
.price-card .badge-pop{
position:absolute;top:-12px;right:24px;background:var(--abn-accent);color:var(--plate-black);
font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
padding:5px 12px;border-radius:20px;
}
.price-card .btn-ghost,.price-card .btn-primary{width:100%;justify-content:center;}
/* Product Family hero: title always stacks above the three tiles, full
width, at every breakpoint — .hero .wrap's row-direction override
(for the homepage's copy+plate hero) does not apply here. */
.hero-product-family .wrap{
flex-direction:column !important;align-items:stretch !important;gap:48px !important;
}
.hero-product-family .hero-copy{flex:none !important;}
.hero-product-family .pricing-grid{width:100%;}
/* --- Native WordPress form elements (comments, search, widgets) styled
in the same plate language, so no extra markup/classes are required. --- */
input[type="text"],input[type="email"],input[type="url"],input[type="tel"],
input[type="search"],input[type="number"],input[type="password"],select,textarea{
border:2px solid var(--plate-black);border-radius:6px;background:var(--plate-white);color:var(--plate-black);
font-family:var(--font-mono);font-size:14px;padding:12px 14px;width:100%;
box-shadow:0 6px 16px rgba(0,0,0,.18);
}
textarea{font-family:var(--font-body);min-height:110px;resize:vertical;line-height:1.55;}
input::placeholder,textarea::placeholder{color:#9b9994;}
input[type="text"]:focus,input[type="email"]:focus,input[type="url"]:focus,input[type="tel"]:focus,
input[type="search"]:focus,input[type="number"]:focus,input[type="password"]:focus,select:focus,textarea:focus{
outline:2px solid var(--abn-accent);outline-offset:1px;
}
label{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--abn-muted);}
input[type="checkbox"],input[type="radio"]{width:18px;height:18px;accent-color:var(--abn-accent);}
input[type="submit"],button[type="submit"]{
font-family:var(--font-mono);font-size:13px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;
background:var(--abn-accent);color:var(--plate-black);padding:15px 32px;border-radius:5px;border:none;cursor:pointer;
}
input[type="submit"]:hover,button[type="submit"]:hover{filter:brightness(1.06);}
.comment-form p{margin:0 0 16px;}
.comment-form label{display:block;margin-bottom:6px;}
.comment-reply-title,.comment-form h3{font-family:var(--font-display);}
.comment-form .comment-form-cookies-consent{display:flex;align-items:center;gap:8px;font-family:var(--font-body);text-transform:none;letter-spacing:0;color:var(--abn-text-soft);font-size:13px;}
/* .cmd-search is the theme's one search-form treatment — see the
"CMD-SEARCH" block above, shared by header, mobile panel, and widgets. */
/* ============ WIDGETS (defaults) ============ */
.widget ul{list-style:none;margin:0;padding:0;}
.widget li{padding:6px 0;border-bottom:1px solid var(--abn-line);}
.widget li:last-child{border-bottom:none;}
/* ============ SCROLL TACHOMETER — minimal OLED-style reading-progress ladder ============
No panels, no fills behind it — only the segments themselves ever emit
light, like pixels lit on an otherwise-black display. Positioning never
overlaps content: the "far" branch places it in the true page margin on
wide screens; the "floor" branch (half the gutter minus half the bar
width) keeps it inside the gutter itself once the margin disappears, at
every breakpoint. Bar count/size responds via the --tacho-* tokens set
per breakpoint above. */
.scroll-tacho{
position:fixed;
right:max(
calc(var(--site-gutter) / 2 - var(--tacho-bar-w) / 2),
calc((100vw - var(--site-max)) / 2 - var(--tacho-inset))
);
top:50%;transform:translateY(-50%);
z-index:300;
display:flex;flex-direction:column;align-items:center;gap:8px;
background:none;pointer-events:none;
transition:right .2s ease;
}
.tacho-bars{display:flex;flex-direction:column;gap:var(--tacho-gap);background:none;padding:0;}
.tacho-bars .bar{
width:var(--tacho-bar-w);height:var(--tacho-bar-h);border-radius:1px;
background:rgba(128,128,128,.18);border:none;
transition:background .1s linear,width .2s ease,height .2s ease;
}
.tacho-bars .bar.lit[data-zone="green"]{background:#3ecf6b;}
.tacho-bars .bar.lit[data-zone="amber"]{background:var(--abn-accent);}
.tacho-bars .bar.lit[data-zone="red"]{background:#e5484d;}
@media (max-width:480px){
.scroll-tacho{display:none;} /* smallest phones: gutter too narrow to host it without overlapping content */
}
/* ==========================================================================
RESPONSIVE BREAKPOINT SYSTEM — mobile-first translation of the design
library's seven tiers. The library is authored desktop-first (cascading
max-width blocks, narrowest last); this is the same seven tiers rebuilt
ascending (min-width, narrowest first) so the token values and every
structural collapse land at the exact same physical widths.
Base (unqueried, above) = Regular Smartphone Portrait, ≤720px.
========================================================================== */
/* ---- Tablet Portrait: 721–899px ---- */
@media (min-width:721px){
:root{
--site-gutter:22px;--section-pad:56px;--hero-top:107px;--hero-bottom:48px;
--tacho-bar-w:4px;--tacho-bar-h:8px;--tacho-gap:6px;--tacho-inset:16px;
}
}
/* ---- Medium (721–1080px, Tablet Portrait + 4K Smartphone Portrait): sidebars
still follow the main content (see the mobile-first order rules above), but
where a layout carries two sidebars they now sit side by side in a 1/2 + 1/2
row instead of stacking full-width one under the other — avoids the wide
empty-looking strip a lone narrow nav column leaves at this width. Below
721px (mobile) they stay full-width/stacked (1/1), which is the unqueried
default already in effect. Single-sidebar layouts (content-13, content-14)
have nothing to pair up, so they're untouched here. ---- */
@media (min-width:721px) and (max-width:1080px){
.content-131,.content-136-rail{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
.content-131 .content-main,.content-136-rail .content-main{grid-column:1 / -1;}
.content-131 .sidebar-left,.content-136-rail .sidebar-left{grid-column:1;}
.content-131 .sidebar-right,.content-136-rail .sidebar-right{grid-column:2;}
.content-121{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
.content-121 .content-main{grid-column:1 / -1;}
.content-121 .sidebar-left{grid-column:1;}
.content-121 .sidebar-bento-stack{grid-column:2;}
.layout-3col{flex-direction:row;flex-wrap:wrap;}
.layout-3col .content-main{flex:1 1 100%;margin-bottom:24px;}
.layout-3col .sidebar-left,.layout-3col .sidebar-right{flex:1 1 calc(50% - 20px);}
}
/* ---- 4K Smartphone Portrait: 900–1080px ---- */
@media (min-width:900px){
:root{
--site-gutter:24px;--section-pad:64px;--hero-top:112px;--hero-bottom:56px;
--tacho-bar-w:5px;--tacho-bar-h:9px;--tacho-gap:6px;--tacho-inset:20px;
}
.footer-grid{grid-template-columns:repeat(2,1fr);}
.footer-brand{grid-column:1 / -1;}
.bento{grid-template-columns:repeat(2,minmax(0,1fr));}
/* Feature tiles (b1/b4) stay at the same one-column width as every
other tile here — spanning both columns would make them run the
full row width, which is what let the tile edge crowd right up
against (and, depending on gutter math, past) the content area's
right edge. They still read as the taller "feature" tile via their
grid-row:span 2 (set once, unconditionally, above). */
.bento .b1,.bento .b4{grid-column:span 1;}
}
/* ---- Tablet Landscape: 1081–1179px — desktop chrome + sidebars appear ---- */
@media (min-width:1081px){
:root{
--site-gutter:28px;--section-pad:80px;--hero-top:119px;--hero-bottom:72px;
--tacho-bar-w:12px;--tacho-bar-h:3px;--tacho-gap:5px;--tacho-inset:36px;
}
nav.horizontal{display:flex;}
.header-ctas{display:flex;}
.mobile-nav-toggle,.mobile-nav-panel{display:none;}
.layout-3col{flex-direction:row;align-items:flex-start;gap:40px;}
.sidebar{flex:0 0 200px;}
.sidebar nav.vertical{position:sticky;top:96px;}
.content-main{flex:1 1 auto;}
.footer-grid{grid-template-columns:repeat(3,1fr);}
.hero .wrap{flex-direction:row;gap:56px;align-items:center;}
.hero-copy{flex:1.15;}
.hero-plate{flex:.85;max-width:460px;}
.content-136{grid-template-columns:minmax(0,1fr) minmax(0,4fr) minmax(0,1fr);align-items:start;}
.content-136 .content-gutter{display:block;}
.content-136 .content-main{margin:0;}
.content-13{grid-template-columns:minmax(0,1fr) minmax(0,2fr);align-items:start;gap:40px;}
.content-21{grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:start;gap:40px;}
.content-136-rail{grid-template-columns:minmax(0,1fr) minmax(0,4fr) minmax(0,1fr);align-items:start;gap:40px;}
.content-14{grid-template-columns:minmax(0,1fr) minmax(0,3fr);align-items:start;gap:40px;}
.content-31{grid-template-columns:minmax(0,3fr) minmax(0,1fr);align-items:start;gap:40px;}
.content-131{grid-template-columns:minmax(0,1fr) minmax(0,3fr) minmax(0,1fr);align-items:start;gap:40px;}
.content-121{grid-template-columns:minmax(0,1fr) minmax(0,2fr) minmax(0,1fr);align-items:start;gap:40px;}
/* Desktop chrome restores each template's own named layout — sidebar-left,
content, sidebar-right in their true left-to-right positions — undoing
the mobile/medium "content first, sidebars after" reorder above. */
.content-13 .sidebar-left,.content-14 .sidebar-left,.content-131 .sidebar-left,
.content-121 .sidebar-left,.content-136-rail .sidebar-left,.layout-3col .sidebar-left,
.content-13 .content-main,.content-14 .content-main,.content-131 .content-main,
.content-121 .content-main,.content-136-rail .content-main,.layout-3col .content-main,
.content-131 .sidebar-right,.content-136-rail .sidebar-right,.layout-3col .sidebar-right,
.content-121 .sidebar-bento-stack{
order:initial;grid-column:auto;
}
.bento{grid-template-columns:repeat(4,minmax(0,1fr));}
/* Half-width (not full-row) feature tiles, same reasoning as the
900px tier above — keeps them proportionate to the grid instead of
running edge-to-edge. */
.bento .b1,.bento .b4{grid-column:span 2;}
.bento .b2,.bento .b3,.bento .b5,.bento .b6{grid-column:span 2;}
}
/* ---- Small Desktop: 1180–1679px (design library's unqueried default) ---- */
@media (min-width:1180px){
:root{
--site-max:1240px;--site-gutter:32px;--section-pad:96px;--hero-top:128px;--hero-bottom:88px;
--tacho-bar-w:15px;--tacho-bar-h:3px;--tacho-gap:5px;--tacho-inset:46px;
}
.sidebar{flex:0 0 220px;}
.footer-grid{grid-template-columns:1.4fr repeat(5,1fr);}
.footer-brand{grid-column:auto;}
.bento{grid-template-columns:repeat(6,minmax(0,1fr));}
.bento .b1,.bento .b4{grid-column:span 3;}
/* b2/b3/b5/b6 must all match width (span 3 of 6) so the stat tiles
stacked opposite the tall b1/b4 feature tiles stay flush on the
right edge — a mismatched span 2 here left a gap that made the
tile above appear wider than the one below it. */
.bento .b2,.bento .b3,.bento .b5,.bento .b6{grid-column:span 3;}
}
/* ---- Widescreen Desktop: 1680–1919px ---- */
@media (min-width:1680px){
:root{
--site-max:1520px;--site-gutter:56px;--section-pad:128px;--hero-top:145px;--hero-bottom:104px;
--tacho-bar-w:17px;--tacho-inset:60px;
}
.footer-grid{gap:36px;}
.bento{gap:22px;}
}
/* ---- Smart TV View: ≥1920px, 10-foot viewing ---- */
@media (min-width:1920px){
:root{
--site-max:1680px;--site-gutter:80px;--section-pad:160px;--hero-top:162px;--hero-bottom:120px;
--tacho-bar-w:19px;--tacho-inset:72px;
}
.entry-title{font-size:clamp(30px,4vw,52px);}
nav.horizontal a{font-size:13px;padding:12px 16px;}
.btn-primary,.btn-ghost,.header-cta,.btn-submit{padding-top:19px;padding-bottom:19px;}
.footer-grid{gap:44px;}
.bento{gap:26px;grid-auto-rows:240px;}
}
/* ============ THIRD-PARTY PLUGIN COMPATIBILITY ============================
WP Job Openings ("awsm-*" markup — job listing rows, and the "Apply for
this position" application form) renders its own fixed white-background
panels and doesn't set its own text color on every element, so headings/
labels/hints inherit `body{color:var(--abn-text)}`. In Dark mode that's
a near-white color, which goes invisible against the plugin's white
panels — the job list rows AND the application-form title/labels/hint
text all washed out.
The plugin's own stylesheet sets colors directly on some of these same
elements (e.g. the form h2), which otherwise wins the cascade over a
plain class/attribute selector — so this uses `!important` and matches
every descendant, not just the outer containers, to guarantee legible,
mode-independent text wherever "awsm-" markup appears. */
[class*="awsm-"],
[class*="awsm-"] *{
color:#1c1d1f !important;
}
[class*="awsm-"] a,
[class*="awsm-"] a:visited{
color:#1c1d1f !important;
}
[class*="awsm-"] a:hover{
color:var(--abn-accent-alt) !important;
}
[class*="awsm-"] input,
[class*="awsm-"] textarea,
[class*="awsm-"] select{
color:#1c1d1f !important;
background:#fff !important;
border-color:#1c1d1f !important;
}
[class*="awsm-"] input::placeholder,
[class*="awsm-"] textarea::placeholder{
color:#8a8d94 !important;
-webkit-text-fill-color:#8a8d94 !important;
opacity:1 !important;
}
/* -- Job listing card: mode-aware, matching the design library's
.card-shell (24px padding, 10px radius, hairline border) wrapping the
.job-row list. Targets both class spellings seen across plugin
versions/live DOM ("awsm-b-job-listing-items" per source,
"awsm-b-listing-items" seen in the live inspector). Uses --abn-surface/
--abn-line so the card follows Dark mode instead of staying a fixed
white panel like the application form does — and resets text color for
everything inside back to var(--abn-text), overriding the blanket
dark-text rule above (a dark card with forced-dark text would be
unreadable, which is exactly the "black on white in dark mode" bug
reported). */
.awsm-b-job-listing-items,
[class*="awsm-b-job-listing-items"],
[class*="awsm-b-listing-items"]{
background:var(--abn-surface) !important;
border:1px solid var(--abn-line) !important;
border-radius:10px !important;
padding:8px 24px !important;
}
.awsm-b-job-listing-item{
background:var(--abn-surface) !important;
}
.awsm-b-job-listing-items,
.awsm-b-job-listing-items *{
color:var(--abn-text) !important;
}
.awsm-b-job-listing-items a,
.awsm-b-job-listing-items a:visited{
color:var(--abn-text) !important;
}
/* -- Single job description page --------------------------------------
.awsm-job-content wraps the_content() on the single job page and sits
directly on the theme's own (already mode-aware) dark page background —
unlike the white listing/application-form panels above, it must NOT be
forced to dark text, or it goes invisible in Dark mode. .awsm-job-form
(the application form panel) keeps the dark-text treatment above since
it stays a white panel in both modes. */
.awsm-job-content,
.awsm-job-content *{
color:var(--abn-text) !important;
}
.awsm-job-content a,
.awsm-job-content a:visited{
color:var(--abn-blue) !important;
}
/* -- Selectric-powered filter dropdowns (search / category / type / location)
Selectric — the JS widget that skins these