/* ==========================================================================
JuryBoard Design System
Source of truth: /design/Design-System.pdf
Divi's Theme Customizer carries the faces, the base sizes and the palette.
This file carries what the customizer cannot express: the clamp() scale,
per-level line-height and letter-spacing, the dark-mode tokens, and the
component primitives from section 04.
========================================================================== */
/* --------------------------------------------------------------------------
01 · TOKENS
-------------------------------------------------------------------------- */
:root {
/* Colour — six values, and the rule for each (section 02) */
--stone: #E7E1D3; /* default page ground, never pure white */
--paper: #FBF9F3; /* alternating section band */
--card: #FFFFFF; /* card ground */
--ink: #002244; /* all text */
--hair: #CFC7B4; /* every rule and border */
/* The page ground. The design system nominates Stone; this site uses Paper.
Point it back at var(--stone) to return to the design system default.
It resolves through --paper/--stone, so it follows the dark theme too. */
--page: var(--paper);
/* Secondary tokens, from design/01-Homepage.pdf. The design system names six
colours; the homepage mockup adds these working values on top of them. */
--ink-2: #26405E; /* nav and footer links */
--muted: #6B6656; /* footer headings, footer bar, fine print */
--seat: #DCD5C4; /* venire seats */
--plinth: #002244; /* button ground */
--on-plinth: #E7E1D3; /* label on the plinth */
/* The button pair is separate from the plinth pair on purpose: in dark mode
the plinth stays a dark band while the button INVERTS to a light chip, so
a primary button does not disappear into the card behind it. Both mockups
declare these; they were missed on the first pass. */
--btn: #002244; /* primary button ground */
--on-btn: #E7E1D3; /* label on the button */
/* The photographic band on the About page. Deeper than --plinth on purpose:
a greyscale portrait has to fade into it without banding, and the plinth
is not dark enough to absorb the shadow end of a photograph. The -rgb
twin exists because the scrim needs rgba() stops at five alphas. */
--band: #04182E;
--band-rgb: 4, 24, 46;
--gold: #FFCB05; /* accent only — the brand mark */
--court-red: #B32017; /* small labels and eyebrows */
/* Type — three faces, each with one job (section 03) */
--font-serif: "Newsreader", Georgia, "Times New Roman", Times, serif;
--font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
Roboto, Helvetica, Arial, sans-serif;
--font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas,
"Liberation Mono", monospace;
/* Layout (section 05) */
--container: 1160px;
--container-pad: 32px;
--radius: 3px;
--grid-gap: 16px;
--section-pad: clamp(56px, 7vw, 100px);
--lift: 0 1px 2px rgba(0, 34, 68, .05), 0 12px 26px -16px rgba(0, 34, 68, .34);
}
/* Dark mode. Every token has a counterpart; gold does not change, because it
is the brand mark.
Dark mode is OPT-IN, not automatic. The design system asks for an automatic
switch, but that made every page render on the dark ground regardless of the
Background Color setting. To turn the automatic switch back on, change the
selector below to :root:not([data-theme="light"]).
To preview dark mode now: , or set data-theme="auto"
to follow the visitor's system theme. */
@media (prefers-color-scheme: dark) {
:root[data-theme="auto"] {
--stone: #0D141D;
--paper: #131E2B;
--card: #16222F;
--ink: #EAE4D6;
--hair: #2A3A4C;
--court-red: #E4776B;
--lift: none;
--ink-2: #AFBDCD;
--muted: #9A9382;
--seat: #1E2C3B;
--plinth: #08101A;
--on-plinth: #E9E3D5;
--btn: #E9E3D5;
--on-btn: #0D141D;
--band: #050D16;
--band-rgb: 5, 13, 22;
}
}
:root[data-theme="dark"] {
--stone: #0D141D;
--paper: #131E2B;
--card: #16222F;
--ink: #EAE4D6;
--hair: #2A3A4C;
--court-red: #E4776B;
--lift: none;
--ink-2: #AFBDCD;
--muted: #9A9382;
--seat: #1E2C3B;
--plinth: #08101A;
--on-plinth: #E9E3D5;
--btn: #E9E3D5;
--on-btn: #0D141D;
--band: #050D16;
--band-rgb: 5, 13, 22;
}
/* --------------------------------------------------------------------------
02 · GLOBAL TYPOGRAPHY
Divi writes the customizer values (faces, colours, base sizes) into
wp-content/et-cache/global/et-divi-customizer-global.min.css, which it
prints on wp_head at priority 99-103 — after every enqueued stylesheet.
Load order therefore cannot be won, so the rules below that Divi also
emits carry one extra element (`html body ...`) to outrank its flat
`h1` / `body` selectors. Rules Divi does not emit are left at their
natural specificity.
-------------------------------------------------------------------------- */
html body,
html body input,
html body textarea,
html body select,
html body button {
font-family: var(--font-sans);
font-weight: 400;
}
html body {
color: var(--ink);
font-size: 17px;
line-height: 1.62;
-webkit-font-smoothing: antialiased;
}
/* Stone is the page: a warm neutral, never pure white. Divi writes the light
value into `body.custom-background`, so match that weight to keep the dark
token working. */
html body,
html body.custom-background {
background-color: var(--page);
}
/* Serif thinks, sans works: headlines and quotations in the serif. */
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6,
html body blockquote,
html body .et_pb_module_header {
font-family: var(--font-serif);
font-weight: 500;
color: var(--ink);
text-wrap: balance;
}
/* The scale from section 03. Divi can only store flat px values, so the
clamp() ranges live here. `.et_pb_title_container h1` is matched too
because Divi gives that variant a class and it would otherwise outrank
a plain element selector. */
html body h1,
html body h1.et_pb_contact_main_title,
html body .et_pb_title_container h1 {
font-size: clamp(46px, 6.6vw, 80px);
line-height: .98;
letter-spacing: -.028em;
}
html body h2,
html body .product .related h2 {
font-size: clamp(30px, 4vw, 46px);
line-height: 1.06;
letter-spacing: -.02em;
}
html body h3 {
font-size: clamp(22px, 2.4vw, 31px);
line-height: 1.2;
letter-spacing: -.012em;
}
/* Body drops to 16px on phones - the bottom of the 16-17px range, and the
value set in the Divi customizer, which the rule above would otherwise
defeat inside Divi's own phone media query. */
@media (max-width: 767px) {
html body { font-size: 16px; }
}
html body h4 { font-size: clamp(19px, 1.8vw, 24px); line-height: 1.25; }
html body h5 { font-size: 19px; line-height: 1.3; }
html body h6 { font-size: 17px; line-height: 1.35; }
/* The deck sits under a display heading, in the serif italic. */
.jb-deck {
font-family: var(--font-serif);
font-weight: 400;
font-style: italic;
font-size: clamp(22px, 2.4vw, 31px);
line-height: 1.28;
}
/* The lede supports the heading. Max 56 characters wide. */
.jb-lede {
font-family: var(--font-sans);
font-size: 20px;
line-height: 1.5;
max-width: 56ch;
}
/* Body copy sets to a 62-character measure. */
.jb-measure { max-width: 62ch; }
/* Headings hold their own measure (section 03). */
.jb-h1-measure { max-width: 15ch; }
.jb-h2-measure { max-width: 22ch; }
/* Plex Mono, uppercase and letterspaced, reads like an exhibit sticker.
Eyebrows, small labels, step numbers. Never body copy. */
.jb-eyebrow {
font-family: var(--font-mono);
font-weight: 600;
font-size: 11px;
line-height: 1.4;
text-transform: uppercase;
letter-spacing: .16em;
color: var(--court-red);
}
/* Any figure that lines up in a column. */
.jb-data,
.jb-tabular {
font-family: var(--font-mono);
font-weight: 400;
font-variant-numeric: tabular-nums;
}
/* Fine print sits directly under a button. */
.jb-fine-print {
font-size: 13.5px;
line-height: 1.5;
opacity: .72;
}
/* Links stay navy - all text is navy - and take a gold accent underline. */
html body a {
color: var(--ink);
text-decoration-color: var(--gold);
text-underline-offset: .18em;
}
html body a:hover { color: var(--ink); text-decoration: underline; }
html body blockquote {
border-left: 3px solid var(--gold);
padding-left: 24px;
font-size: clamp(22px, 2.4vw, 31px);
line-height: 1.3;
}
/* --------------------------------------------------------------------------
03 · LAYOUT
-------------------------------------------------------------------------- */
html body .et_pb_row,
html body .et_pb_row.et_pb_row_fullwidth {
max-width: var(--container);
padding-left: var(--container-pad);
padding-right: var(--container-pad);
box-sizing: border-box;
}
html body .et_pb_section {
padding-top: var(--section-pad);
padding-bottom: var(--section-pad);
background-color: var(--page);
}
/* Section separation is a background change or a hairline. Never both. */
.jb-band-paper { background-color: var(--paper); }
.jb-band-stone { background-color: var(--stone); }
.jb-band-navy { background-color: var(--ink); }
.jb-band-hairline { border-top: 1px solid var(--hair); }
/* The page body itself must never scroll sideways at any width.
`clip` rather than `hidden`: `hidden` turns these into scroll containers,
which silently breaks position:sticky on the header. `hidden` is kept first
as the fallback for browsers without `clip`. */
html, body {
overflow-x: hidden;
overflow-x: clip;
}
/* Wide content gets its own scroller. */
.jb-scroll-x,
.entry-content table,
.entry-content pre {
overflow-x: auto;
max-width: 100%;
}
/* Two-column blocks: .85fr / 1.15fr, image on the wider side. */
.jb-two-col {
display: grid;
grid-template-columns: .85fr 1.15fr;
gap: clamp(32px, 4vw, 64px);
align-items: center;
}
.jb-two-col.jb-reverse { grid-template-columns: 1.15fr .85fr; }
@media (max-width: 900px) {
.jb-two-col,
.jb-two-col.jb-reverse { grid-template-columns: 1fr; }
}
/* --------------------------------------------------------------------------
04 · COMPONENTS
-------------------------------------------------------------------------- */
/* Buttons — 3px radius, never a pill. One primary per screenful. */
.et_pb_button,
.et_pb_button:hover,
button,
input[type="submit"],
.jb-btn {
font-family: var(--font-sans);
font-weight: 400;
border-radius: var(--radius);
letter-spacing: 0;
text-transform: none;
}
/* The gold variant is only for use on a navy ground. */
.jb-band-navy .et_pb_button,
.jb-btn--gold {
background-color: var(--gold);
border-color: var(--gold);
color: #002244;
}
.jb-band-navy .et_pb_button:hover,
.jb-btn--gold:hover {
background-color: var(--gold);
color: #002244;
}
/* Focus must survive whatever the builder does by default. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.et_pb_button:focus-visible,
[tabindex]:focus-visible {
outline: 3px solid var(--gold);
outline-offset: 3px;
}
/* Card grids — cards are surfaces, not table cells. A real 16px gap. */
.jb-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--grid-gap);
}
@media (max-width: 820px) {
.jb-cards { grid-template-columns: 1fr; }
}
.jb-card {
background-color: var(--card);
border: 1px solid var(--hair);
border-radius: var(--radius);
box-shadow: var(--lift);
padding: 28px;
}
/* On navy the same card is translucent, with no shadow — a shadow does
nothing against a dark field. */
.jb-band-navy .jb-card {
background-color: rgba(255, 255, 255, .05);
border-color: rgba(233, 227, 213, .17);
box-shadow: none;
color: #EAE4D6;
}
/* Every rule and border is the hairline. */
hr,
.et_pb_space + hr,
.jb-rule {
border: 0;
border-top: 1px solid var(--hair);
margin: 0;
}
/* The seat strip — a venire: filled seats, two coded, two empty.
Use instead of a plain rule at the top of a major section, twice per page
at most. */
.jb-seat-strip {
display: flex;
gap: 6px;
align-items: center;
}
.jb-seat-strip i {
display: block;
width: 26px;
height: 10px;
border-radius: 2px;
background-color: var(--ink);
border: 1px solid var(--ink);
}
.jb-seat-strip i.is-coded { background-color: var(--gold); border-color: var(--gold); }
.jb-seat-strip i.is-empty { background-color: transparent; border-color: var(--hair); }
/* Eyebrow, heading, lede — every section opens with this stack, left aligned. */
.jb-section-head { text-align: left; }
.jb-section-head .jb-eyebrow { margin-bottom: 14px; }
.jb-section-head h2 { margin-bottom: 18px; }
/* The one exception: the closing call to action. */
.jb-closing-cta,
.jb-closing-cta .jb-lede { text-align: center; margin-left: auto; margin-right: auto; }
/* Full-bleed image bands: size the image from the container, not the viewport,
so the gap to the text is the same at every width. */
.jb-bleed-image {
width: min(calc((100% - var(--container)) / 2 + 660px), 62%);
object-fit: cover;
object-position: 50% 80%; /* keep the hands, lose the ceiling */
}
/* The dissolve is built from a per-theme token, never a literal, or the fade
lands on the wrong navy in dark mode. */
.jb-bleed-fade::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent 0%, var(--page) 92%);
pointer-events: none;
}
/* --------------------------------------------------------------------------
05 · DIVI SURFACES THAT NEED THE TOKENS
-------------------------------------------------------------------------- */
/* Divi paints its content wrapper pure white. Stone is the page - never pure
white - so the wrapper takes the page token in both themes. Without this the
light theme reads as a white page, and the dark theme puts dark-mode ink on
a white ground. */
html body #page-container,
html body #main-content,
html body #main-area { background-color: var(--page); }
/* Cards and the sidebar sit on the card ground with a hairline edge. */
html body #sidebar .et_pb_widget,
html body .et_pb_widget_area { border-color: var(--hair); }
html body #main-content .container::before,
html body #sidebar::before { background-color: var(--hair); }
/* Form fields: card ground, hairline border, 3px radius. */
html body input[type="text"],
html body input[type="email"],
html body input[type="url"],
html body input[type="search"],
html body input[type="tel"],
html body input[type="number"],
html body input[type="password"],
html body textarea,
html body select {
background-color: var(--card);
border: 1px solid var(--hair);
border-radius: var(--radius);
color: var(--ink);
font-family: var(--font-sans);
}
/* Submit controls follow the primary button: navy ground, paper label. */
html body input[type="submit"],
html body button[type="submit"],
html body .wp-element-button {
background-color: var(--ink);
color: var(--paper);
border: 0;
border-radius: var(--radius);
font-family: var(--font-sans);
}
/* Divi hard-codes #666 for widget links and inputs and #ddd for the search
button. All text is navy (dark-mode ink), so take those back. */
html body #sidebar .et_pb_widget a,
html body .et_pb_widget a { color: var(--ink); }
html body #page-container .wp-block-search__input {
color: var(--ink);
border-color: var(--hair);
}
html body #page-container .wp-block-search__button {
background-color: var(--ink);
border-color: var(--ink);
color: var(--paper);
}
/* Rules and separators everywhere Divi hard-codes a light grey. */
html body #main-footer .container::before,
html body .et_pb_widget li { border-color: var(--hair); }
/* --------------------------------------------------------------------------
06 · HEADER AND FOOTER (design/01-Homepage.pdf)
.nav and .foot both sit on the card ground with a hairline edge. Navy is
the button plinth and the emphasis bands, not the site chrome.
-------------------------------------------------------------------------- */
/* Header: card ground, 1px hairline bottom edge, sticky.
Divi's own fixed-nav is switched off (Theme Options > Fixed Navigation Bar)
because it pins the header at top:0 and covers the announcement bar. The
mockup's .nav is position:sticky, which is what is reproduced here: the bar
scrolls away, the nav then sticks. */
html body #main-header,
html body #main-header.et-fixed-header {
background-color: var(--card);
border-bottom: 1px solid var(--hair);
box-shadow: none;
position: sticky;
top: 0;
z-index: 20;
}
html body.admin-bar #main-header { top: 32px; }
@media (max-width: 782px) {
html body.admin-bar #main-header { top: 46px; }
}
html body #top-menu li a { font-size: 14.5px; }
html body #top-menu > li > a { color: var(--ink-2); }
html body #top-menu > li > a:hover,
html body #top-menu li.current-menu-item > a,
html body #top-menu li.current_page_item > a { color: var(--ink); opacity: 1; }
/* The last menu item is the "Download free" button on the navy plinth. */
html body #top-menu > li.jb-nav-cta > a {
background-color: var(--plinth);
color: var(--on-plinth);
font-size: 13.5px;
font-weight: 600;
padding: 9px 15px;
border-radius: var(--radius);
line-height: 1;
}
html body #top-menu > li.jb-nav-cta > a:hover { color: var(--on-plinth); opacity: 1; }
/* Search and cart icons follow the link colour rather than Divi's default. */
html body #et_top_search .et-search-form input,
html body #et_search_icon:before,
html body #et-top-navigation .et-cart-info { color: var(--ink-2); }
/* Announcement bar: gold ground, navy label, centred, sans 600. */
html body #top-header {
background-color: var(--gold);
color: var(--ink);
font-family: var(--font-sans);
font-size: 14px;
font-weight: 600;
text-transform: none;
letter-spacing: 0;
}
html body #top-header .container { width: 100%; text-align: center; }
html body #top-header a,
html body #et-secondary-nav a { color: var(--ink); text-transform: none; letter-spacing: 0; }
/* Footer: card ground, 1px hairline top edge. */
html body #main-footer {
background-color: var(--card);
border-top: 1px solid var(--hair);
color: var(--muted);
}
html body #footer-widgets { padding: 44px 0 12px; }
/* Column headings: 12px, uppercase, .14em, muted. */
html body #main-footer .footer-widget h4,
html body #main-footer .widgettitle,
html body #main-footer .widget_block h2,
html body #main-footer .widget_block h3 {
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--muted);
margin-bottom: 12px;
}
/* Footer links: 14.5px, --ink-2, underline on hover, no bullets. */
html body #main-footer .et_pb_widget,
html body #main-footer .footer-widget { color: var(--muted); }
html body #footer-widgets .footer-widget a,
html body #footer-widgets .footer-widget li a { color: var(--ink-2); font-size: 14.5px; }
html body #footer-widgets .footer-widget a:hover,
html body #footer-widgets .footer-widget li a:hover { color: var(--ink); text-decoration: underline; }
html body #footer-widgets .footer-widget li { padding-left: 0; }
html body #footer-widgets .footer-widget li:before { display: none; }
/* Footer bar: hairline rule above, 13px muted. */
html body #footer-bottom {
background-color: var(--card);
border-top: 1px solid var(--hair);
padding: 18px 0;
}
html body #footer-info,
html body #footer-info a { color: var(--muted); font-size: 13px; }
html body #footer-bottom .et-social-icon a { color: var(--muted); }
html body #footer-bottom .et-social-icon a:hover { color: var(--ink); }
/* The mobile menu toggle inherits Divi's accent (gold), which is ~1.7:1 on the
card ground. Nav controls follow the link colour instead. */
html body .mobile_menu_bar:before,
html body .mobile_menu_bar:after,
html body .et_toggle_slide_menu:after { color: var(--ink); }
html body .et_mobile_menu { background-color: var(--card); border-top-color: var(--gold); }
html body .et_mobile_menu li a { color: var(--ink-2); border-bottom-color: var(--hair); }
html body .et_mobile_menu li a:hover { color: var(--ink); background-color: transparent; }
/* Announcement bar: .ann - gold ground, navy sentence, centred, sans 600. */
.jb-ann {
/* --jb-ann-bg / --jb-ann-fg come from the Customizer (Divi > Theme
Customizer > JuryBoard > Announcement Bar). The tokens are the fallback. */
background: var(--jb-ann-bg, var(--gold));
color: var(--jb-ann-fg, #002244);
text-align: center;
padding: 10px 16px;
font-family: var(--font-sans);
font-size: 14px;
font-weight: 600;
line-height: 1.4;
}
.jb-ann a {
color: inherit;
text-decoration: underline;
text-underline-offset: .18em;
}
/* Footer brand column: logo above a muted tagline at a 32ch measure. */
.jb-foot-brand img { display: block; height: 23px; width: auto; margin-bottom: 10px; }
.jb-foot-tagline {
font-size: 14.5px;
color: var(--muted);
max-width: 32ch;
margin: 0;
}
/* Footer link lists: no bullets, 8px rhythm. Covers both the hand-written
list and the ul.menu a Navigation Menu widget renders. */
html body #footer-widgets .footer-widget ul.jb-foot-list,
html body #footer-widgets .footer-widget ul.menu,
html body #footer-widgets .footer-widget .menu-item > ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
html body #footer-widgets .footer-widget ul.jb-foot-list li,
html body #footer-widgets .footer-widget ul.menu li {
padding: 0;
margin: 0;
line-height: 1.4;
}
/* Logo sits at its mockup size. */
html body #logo { max-height: 23px; }
.et_pb_widget li::before,
.et_pb_bg_layout_light .et_pb_module ul li::marker { color: var(--gold); }
/* --------------------------------------------------------------------------
07 · FORMS (Contact Form 7)
The design system has no form component, so this derives one from the parts
it does define: the input is a card on a hairline at the 3px radius, the
label is a small mono label in the eyebrow's family, and the submit reuses
.jbe-btn rather than inventing a second button.
Contact Form 7 runs its template through wpautop, so every field arrives
wrapped in a with a
between the label and the control. Both are
neutralised here rather than fought in the template — a form is edited in
the CF7 admin screen, and markup that survives an editor pressing return is
worth more than markup that is tidy on the first save.
Selectors carry the html body prefix for the reason the rest of this file
does: Divi's customizer CSS prints after every enqueued stylesheet, and
Divi styles .et_pb_text_inner p, which reaches inside the form.
-------------------------------------------------------------------------- */
html body .wpcf7 { margin: 0; }
/* wpautop's paragraphs and line breaks. Divi also gives every
a 1em
bottom padding, which would double the field rhythm. */
html body .wpcf7 .jb-form p,
html body .wpcf7 .jb-form .et_pb_text_inner p { margin: 0; padding: 0; }
html body .wpcf7 .jb-form br { display: none; }
html body .wpcf7 .jb-form .wpcf7-form-control-wrap { display: block; }
/* The field. Margin rather than a flex gap, so the
wrappers CF7 inserts
cannot swallow the rhythm. */
html body .wpcf7 .jb-field { margin-top: 22px; }
html body .wpcf7 .jb-form > .jb-field:first-child,
html body .wpcf7 .jb-form__pair > .jb-field { margin-top: 0; }
/* The label is the eyebrow's type at the eyebrow's size, in ink rather than
court red: red is reserved for small labels that mark something, and every
field carries one of these. */
html body .wpcf7 .jb-field label {
display: block;
margin-bottom: 8px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
line-height: 1.4;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--ink);
}
/* Optional is called out rather than required, because three of the five
fields are required and the shorter list is the one worth marking. */
html body .wpcf7 .jb-field__opt {
margin-left: 8px;
font-weight: 400;
letter-spacing: .12em;
color: var(--muted);
}
/* The control. A card on a hairline — the same pair every other surface on
the site is built from. */
html body .wpcf7 .jb-input,
html body .wpcf7 .jb-select,
html body .wpcf7 .jb-textarea {
display: block;
width: 100%;
max-width: none;
box-sizing: border-box;
padding: 13px 14px;
font-family: var(--font-sans);
font-size: 16.5px;
line-height: 1.5;
color: var(--ink);
background-color: var(--card);
border: 1px solid var(--hair);
border-radius: var(--radius);
box-shadow: none;
transition: border-color .12s ease;
-webkit-appearance: none;
appearance: none;
}
html body .wpcf7 .jb-textarea {
min-height: 168px;
resize: vertical;
}
/* The muted token on its own, with no opacity on top of it. Fading it to
.75 put the example text at 3.4:1 on the page ground; the token alone is
5.7:1 and still reads as the quieter of the two greys. */
html body .wpcf7 .jb-input::placeholder,
html body .wpcf7 .jb-textarea::placeholder {
color: var(--muted);
opacity: 1;
}
html body .wpcf7 .jb-input:hover,
html body .wpcf7 .jb-select:hover,
html body .wpcf7 .jb-textarea:hover { border-color: var(--ink-2); }
/* The gold focus ring the buttons and the nav already use, so keyboard focus
looks the same everywhere on the site. */
html body .wpcf7 .jb-input:focus,
html body .wpcf7 .jb-select:focus,
html body .wpcf7 .jb-textarea:focus {
border-color: var(--ink);
outline: 3px solid var(--gold);
outline-offset: 2px;
}
/* The select's own arrow is drawn by the platform and cannot take a token, so
it is replaced with a chevron in ink. The dark twin is further down: a data
URI cannot read currentColor. */
html body .wpcf7 .jb-select {
padding-right: 42px;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23002244' stroke-width='1.6' stroke-linecap='square'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 15px center;
background-size: 12px 8px;
}
/* Until a choice is made the select reads as a placeholder, not as an answer. */
html body .wpcf7 .jb-select:has(option[value=""]:checked) { color: var(--muted); }
html body .wpcf7 .jb-select option { color: var(--ink); }
/* Name and email share a row until there is no room for two measures. */
html body .wpcf7 .jb-form__pair {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 18px;
}
@media (max-width: 620px) {
html body .wpcf7 .jb-form__pair {
grid-template-columns: 1fr;
gap: 22px;
}
html body .wpcf7 .jb-form__pair > .jb-field + .jb-field { margin-top: 0; }
}
/* The foot: one primary button, the fine print under it — the pattern the
rest of the site uses below a call to action. */
html body .wpcf7 .jb-form__foot { margin-top: 30px; }
html body .wpcf7 input.wpcf7-submit {
width: auto;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
}
html body .wpcf7 .jb-form__foot p.jbe-fine {
margin-top: 14px;
max-width: 46ch;
}
/* CF7's spinner is a dark disc on a light disc. Recoloured to the gold the
rest of the site uses for "something is happening". */
html body .wpcf7 .wpcf7-spinner {
margin: 0 0 0 16px;
vertical-align: middle;
background-color: var(--gold);
opacity: 1;
}
html body .wpcf7 .wpcf7-spinner::before { background-color: var(--plinth); }
/* Validation. Court red on a field label is exactly what the colour is for. */
html body .wpcf7 .wpcf7-not-valid-tip {
margin-top: 7px;
font-family: var(--font-mono);
font-size: 11.5px;
font-weight: 400;
letter-spacing: .04em;
color: var(--court-red);
}
html body .wpcf7 .jb-input.wpcf7-not-valid,
html body .wpcf7 .jb-select.wpcf7-not-valid,
html body .wpcf7 .jb-textarea.wpcf7-not-valid { border-color: var(--court-red); }
/* The response line. CF7 ships a 2px blue box; this is the same hairline
card as everything else, with a 3px status edge carrying the meaning. */
/* CF7's own state rules (.wpcf7 form.invalid .wpcf7-response-output) score
0,3,1, so this base has to match on form.wpcf7-form rather than bare form
to outrank them — otherwise three sides of the box keep CF7's yellow and
only the edge below takes a token. */
html body .wpcf7 form.wpcf7-form .wpcf7-response-output {
margin: 26px 0 0;
padding: 14px 16px;
font-family: var(--font-sans);
font-size: 15px;
line-height: 1.5;
color: var(--ink);
background-color: var(--card);
border: 1px solid var(--hair);
border-left: 3px solid var(--muted);
border-radius: var(--radius);
}
html body .wpcf7 form.wpcf7-form.sent .wpcf7-response-output { border-left-color: var(--gold); }
html body .wpcf7 form.wpcf7-form.invalid .wpcf7-response-output,
html body .wpcf7 form.wpcf7-form.unaccepted .wpcf7-response-output,
html body .wpcf7 form.wpcf7-form.payment-required .wpcf7-response-output { border-left-color: var(--gold); }
html body .wpcf7 form.wpcf7-form.failed .wpcf7-response-output,
html body .wpcf7 form.wpcf7-form.aborted .wpcf7-response-output,
html body .wpcf7 form.wpcf7-form.spam .wpcf7-response-output { border-left-color: var(--court-red); }
/* Dark mode. Every colour above is a token and follows on its own; the select
chevron is the one thing that cannot, because it is drawn in a data URI. */
:root[data-theme="dark"] .wpcf7 .jb-select {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23EAE4D6' stroke-width='1.6' stroke-linecap='square'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
:root[data-theme="auto"] .wpcf7 .jb-select {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%23EAE4D6' stroke-width='1.6' stroke-linecap='square'/%3E%3C/svg%3E");
}
}
@media (prefers-reduced-motion: reduce) {
html body .wpcf7 .jb-input,
html body .wpcf7 .jb-select,
html body .wpcf7 .jb-textarea { transition: none; }
}