/*
Theme Name: JG Black Car
Theme URI: https://example.com/
Author: JG Black Car Services
Description: A block theme for chauffeured car services. Dark, instrument-panel palette with a mono data voice for schedules, flights and fleet specs. Includes patterns for a home page, services, fleet, booking process and contact.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jg-black-car
Tags: full-site-editing, block-patterns, one-column, custom-colors, custom-menu, dark
*/
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&family=Newsreader:ital,opsz,wght@0,6..72,300..600;1,6..72,300..400&family=IBM+Plex+Mono:wght@400;500&display=swap');
/* ---------------------------------------------------------------
1. Foundations
--------------------------------------------------------------- */
:root {
--jg-ease: cubic-bezier(0.2, 0.7, 0.3, 1);
--jg-hair: 1px solid var(--wp--preset--color--line);
}
body {
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* Anchored links glide rather than jump. Turned off again for
prefers-reduced-motion at the bottom of this file. */
html { scroll-behavior: smooth; }
/* Stops an anchored section butting against the top of the viewport, and
leaves room if a sticky header is ever added. */
[id] { scroll-margin-top: 1.5rem; }
#meetngreet { scroll-margin-top: clamp(1.5rem, 6vh, 4rem); }
/* Visible keyboard focus everywhere, not just where the browser guesses. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
.wp-block-button__link:focus-visible {
outline: 2px solid var(--wp--preset--color--brass);
outline-offset: 3px;
}
.skip-link.screen-reader-text,
.jg-skip {
position: absolute;
left: -9999px;
top: 0;
background: var(--wp--preset--color--brass);
color: var(--wp--preset--color--ink);
font-family: var(--wp--preset--font-family--display);
font-size: 0.8125rem;
font-weight: 600;
padding: 0.75rem 1.25rem;
text-decoration: none;
z-index: 100;
}
.skip-link.screen-reader-text:focus,
.jg-skip:focus {
left: 1rem;
top: 1rem;
}
/* Small-caps utility label. Used for eyebrows and field names. */
.jg-label {
font-family: var(--wp--preset--font-family--mono);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--wp--preset--color--brass);
margin: 0;
}
.jg-mono {
font-family: var(--wp--preset--font-family--mono);
font-size: 0.8125rem;
letter-spacing: 0.02em;
color: var(--wp--preset--color--fog);
}
/* ---------------------------------------------------------------
2. Header
--------------------------------------------------------------- */
.jg-header {
border-bottom: var(--jg-hair);
backdrop-filter: blur(8px);
}
.jg-header .wp-block-site-title a {
color: var(--wp--preset--color--white);
text-decoration: none;
}
.jg-header .wp-block-site-title a::first-letter {
color: var(--wp--preset--color--brass);
}
.jg-header .wp-block-navigation a {
color: var(--wp--preset--color--fog);
text-decoration: none;
padding-block: 0.35rem;
border-bottom: 1px solid transparent;
transition: color 0.18s var(--jg-ease), border-color 0.18s var(--jg-ease);
}
.jg-header .wp-block-navigation a:hover,
.jg-header .wp-block-navigation .current-menu-item a {
color: var(--wp--preset--color--white);
border-bottom-color: var(--wp--preset--color--brass);
}
/* Phone number in the header reads as data, not as a nav item. */
.jg-header-phone {
font-family: var(--wp--preset--font-family--mono);
font-size: 0.8125rem;
letter-spacing: 0.02em;
white-space: nowrap;
}
/* ---------------------------------------------------------------
3. Hero
--------------------------------------------------------------- */
.jg-hero {
position: relative;
overflow: hidden;
}
/* A single low sweep of instrument light across the bottom of the hero.
No image required, so the page stays fast on a cold cache. */
.jg-hero::after {
content: "";
position: absolute;
inset: auto -10% -60% -10%;
height: 70%;
background: radial-gradient(
ellipse at 50% 100%,
rgba(192, 138, 46, 0.22) 0%,
rgba(192, 138, 46, 0.06) 42%,
transparent 72%
);
pointer-events: none;
z-index: 0;
}
.jg-hero > * {
position: relative;
z-index: 1;
}
.jg-hero h1 {
text-wrap: balance;
max-width: 15em;
}
.jg-hero-lede {
font-size: var(--wp--preset--font-size--lg);
line-height: 1.5;
max-width: 34ch;
color: var(--wp--preset--color--fog);
}
/* ---------------------------------------------------------------
4. Signature: the meet card
The placard a chauffeur holds at arrivals, rendered as the hero's
right-hand column. Every value on it is real ride data.
--------------------------------------------------------------- */
.jg-meetcard {
background: linear-gradient(180deg, #1B2229 0%, #131A21 100%);
border: 1px solid var(--wp--preset--color--line);
border-top: 3px solid var(--wp--preset--color--brass);
padding: 1.75rem;
box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.9);
transform: rotate(-1.1deg);
transition: transform 0.4s var(--jg-ease);
}
.jg-meetcard:hover {
transform: rotate(0deg);
}
.jg-meetcard-head p { margin: 0; }
.jg-meetcard-head {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 1rem;
padding-bottom: 1rem;
border-bottom: 1px dashed var(--wp--preset--color--line);
}
.jg-meetcard-name {
font-family: var(--wp--preset--font-family--display);
font-size: 1.5rem;
font-weight: 800;
letter-spacing: -0.01em;
color: var(--wp--preset--color--white);
line-height: 1.1;
margin: 0.4rem 0 0;
}
.jg-meetcard dl {
display: grid;
grid-template-columns: 6.5rem 1fr;
gap: 0.7rem 1rem;
margin: 1.25rem 0 0;
font-family: var(--wp--preset--font-family--mono);
font-size: 0.8125rem;
}
.jg-meetcard dt {
color: #7C8996;
letter-spacing: 0.1em;
text-transform: uppercase;
font-size: 0.6875rem;
padding-top: 0.15em;
}
.jg-meetcard dd {
margin: 0;
color: var(--wp--preset--color--white);
min-width: 0;
overflow-wrap: anywhere;
}
.jg-meetcard-status {
margin-top: 1.5rem;
padding-top: 1rem;
border-top: 1px dashed var(--wp--preset--color--line);
display: flex;
align-items: center;
gap: 0.6rem;
font-family: var(--wp--preset--font-family--mono);
font-size: 0.75rem;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--wp--preset--color--brass);
}
.jg-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--wp--preset--color--brass);
box-shadow: 0 0 0 0 rgba(192, 138, 46, 0.7);
animation: jg-pulse 2.4s infinite;
flex: 0 0 auto;
}
@keyframes jg-pulse {
70% { box-shadow: 0 0 0 9px rgba(192, 138, 46, 0); }
100% { box-shadow: 0 0 0 0 rgba(192, 138, 46, 0); }
}
/* ---------------------------------------------------------------
5. Dispatch strip
--------------------------------------------------------------- */
.jg-strip {
border-top: var(--jg-hair);
border-bottom: var(--jg-hair);
background: var(--wp--preset--color--slate);
}
.jg-strip-inner {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.jg-strip-cell {
padding: 1.4rem var(--wp--preset--spacing--30);
border-right: var(--jg-hair);
font-family: var(--wp--preset--font-family--mono);
font-size: 0.8125rem;
line-height: 1.7;
}
.jg-strip-cell:last-child { border-right: 0; }
.jg-strip-route {
color: var(--wp--preset--color--white);
display: block;
letter-spacing: 0.02em;
}
.jg-strip-meta {
color: #7C8996;
font-size: 0.6875rem;
letter-spacing: 0.14em;
text-transform: uppercase;
display: block;
}
.jg-strip-price {
color: var(--wp--preset--color--brass);
}
/* ---------------------------------------------------------------
6. Services — hairline grid on the light section
--------------------------------------------------------------- */
.jg-light {
background: var(--wp--preset--color--chrome);
color: #2A333D;
}
.jg-light h2,
.jg-light h3 { color: var(--wp--preset--color--ink); }
.jg-light .jg-label { color: #8A6A22; }
.jg-services {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 0;
border-top: 1px solid rgba(14, 17, 22, 0.14);
border-left: 1px solid rgba(14, 17, 22, 0.14);
border-right: 1px solid rgba(14, 17, 22, 0.14);
}
.jg-service {
padding: 2.25rem 1.75rem 2.5rem;
border-bottom: 1px solid rgba(14, 17, 22, 0.14);
border-right: 1px solid rgba(14, 17, 22, 0.14);
}
.jg-service:first-child { padding-left: 1.75rem; }
.jg-service:last-child { border-right: 0; }
.jg-service h3 {
font-size: 1.1875rem;
letter-spacing: -0.005em;
margin: 0 0 0.75rem;
}
.jg-service p {
margin: 0;
font-size: 1rem;
line-height: 1.6;
color: #414C57;
}
.jg-service-spec {
display: block;
margin-top: 1rem;
font-family: var(--wp--preset--font-family--mono);
font-size: 0.6875rem;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #8A6A22;
}
/* ---------------------------------------------------------------
7. Fleet
--------------------------------------------------------------- */
.jg-fleet {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1px;
background: var(--wp--preset--color--line);
border: var(--jg-hair);
}
.jg-vehicle {
background: var(--wp--preset--color--ink);
padding: 2rem 1.75rem;
transition: background 0.25s var(--jg-ease);
}
.jg-vehicle:hover { background: var(--wp--preset--color--slate); }
.jg-vehicle h3 {
font-size: 1.25rem;
margin: 0.9rem 0 0.35rem;
}
.jg-vehicle-models {
font-family: var(--wp--preset--font-family--mono);
font-size: 0.75rem;
color: #7C8996;
letter-spacing: 0.04em;
margin: 0 0 1.5rem;
}
.jg-vehicle dl {
display: grid;
grid-template-columns: 1fr auto;
gap: 0.5rem 1rem;
margin: 0;
font-family: var(--wp--preset--font-family--mono);
font-size: 0.75rem;
border-top: 1px dashed var(--wp--preset--color--line);
padding-top: 1rem;
}
.jg-vehicle dt {
color: #7C8996;
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 0.6875rem;
}
.jg-vehicle dd {
margin: 0;
color: var(--wp--preset--color--white);
text-align: right;
min-width: 0;
}
.jg-vehicle-index {
font-family: var(--wp--preset--font-family--mono);
font-size: 0.6875rem;
letter-spacing: 0.16em;
color: var(--wp--preset--color--brass);
}
/* ---------------------------------------------------------------
8. Process — a genuine sequence, so it gets numbered
--------------------------------------------------------------- */
.jg-steps {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: 2.5rem 2rem;
counter-reset: jg-step;
}
.jg-step { counter-increment: jg-step; }
.jg-step::before {
content: counter(jg-step, decimal-leading-zero);
display: block;
font-family: var(--wp--preset--font-family--mono);
font-size: 0.8125rem;
color: var(--wp--preset--color--brass);
letter-spacing: 0.1em;
padding-bottom: 0.9rem;
margin-bottom: 1.1rem;
border-bottom: 1px solid var(--wp--preset--color--brass);
}
.jg-step h3 {
font-size: 1.125rem;
margin: 0 0 0.6rem;
}
.jg-step p {
margin: 0;
font-size: 1rem;
color: var(--wp--preset--color--fog);
}
/* ---------------------------------------------------------------
9. Credentials band
--------------------------------------------------------------- */
.jg-creds {
padding-inline: 0;
display: flex;
flex-wrap: wrap;
gap: 0.75rem 2.25rem;
justify-content: center;
padding-block: 1.5rem;
border-top: var(--jg-hair);
border-bottom: var(--jg-hair);
font-family: var(--wp--preset--font-family--mono);
font-size: 0.6875rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #7C8996;
list-style: none;
margin: 0;
}
.jg-creds li { margin: 0; }
/* --------------------------------------------------------------
10. Testimonial
-------------------------------------------------------------- */
.jg-testimonial {
margin: 0;
border-left: 2px solid var(--wp--preset--color--brass);
padding-left: 1.75rem;
}
.jg-testimonial p {
font-family: var(--wp--preset--font-family--body);
font-size: 1.3125rem;
line-height: 1.5;
font-style: italic;
color: var(--wp--preset--color--white);
margin: 0 0 1rem;
}
.jg-testimonial cite {
font-family: var(--wp--preset--font-family--mono);
font-size: 0.6875rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #7C8996;
font-style: normal;
}
/* --------------------------------------------------------------
11. Contact + footer
-------------------------------------------------------------- */
.jg-contact-rows dl {
display: grid;
grid-template-columns: 7rem 1fr;
gap: 1rem;
margin: 0;
border-top: var(--jg-hair);
padding-top: 1.25rem;
font-family: var(--wp--preset--font-family--mono);
font-size: 0.875rem;
}
.jg-contact-rows dt {
color: #7C8996;
font-size: 0.6875rem;
letter-spacing: 0.14em;
text-transform: uppercase;
padding-top: 0.3em;
}
.jg-contact-rows dd {
margin: 0;
color: var(--wp--preset--color--white);
/* Grid items size to min-content by default, so a long unbreakable token
like an email address refuses to shrink and pushes the row wide. */
min-width: 0;
overflow-wrap: anywhere;
}
.jg-contact-rows a { color: var(--wp--preset--color--brass); text-decoration: none; }
.jg-contact-rows a:hover { text-decoration: underline; }
.jg-footer {
border-top: var(--jg-hair);
font-size: 0.875rem;
}
.jg-footer .jg-mono a { color: #7C8996; text-decoration: none; }
.jg-footer .jg-mono a:hover { color: var(--wp--preset--color--white); }
/* --------------------------------------------------------------
12. Editor and responsive tuning
-------------------------------------------------------------- */
@media (max-width: 781px) {
.jg-meetcard { transform: none; }
.jg-strip-cell { border-right: 0; border-bottom: var(--jg-hair); }
.jg-meetcard dl { grid-template-columns: 5.5rem 1fr; }
}
/* ---------------------------------------------------------------
13. Background video hero
The video is decoration, so it sits behind a scrim heavy enough
that the headline passes contrast with the video removed.
--------------------------------------------------------------- */
.jg-hero--video {
position: relative;
isolation: isolate;
padding-block: var(--wp--preset--spacing--50);
min-height: clamp(34rem, 76vh, 50rem);
display: flex;
flex-direction: column;
justify-content: center;
}
/* The base hero's radial glow would sit on top of footage. */
.jg-hero--video::after { display: none; }
.jg-hero__media {
position: absolute;
inset: 0;
overflow: hidden;
z-index: -1;
background: var(--wp--preset--color--ink);
}
/* Escape the constrained layout.
Core puts `max-width: contentSize; margin-inline: auto` on every unaligned
direct child of a constrained group, and that applies to absolutely
positioned children too -- which pinned the video to 720px and centred it.
Three classes here so this outranks core's two-class layout selector
without resorting to !important. */
.wp-block-group.jg-hero.jg-hero--video > .jg-hero__media {
max-width: none;
margin: 0;
inset: 0;
}
/* `inset: 0` resolves against the containing block's PADDING box, so the
hero's own global padding would leave ink bars down both edges. Drop it
here and hand the gutter to the content instead. */
.wp-block-group.jg-hero.jg-hero--video {
padding-inline: 0;
}
.wp-block-group.jg-hero.jg-hero--video > .wp-block-columns {
padding-inline: var(--wp--preset--spacing--30);
box-sizing: border-box;
}
.jg-hero__video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
/* Visible by default. This used to sit at opacity 0 until JavaScript
added .is-playing -- which meant a script that failed to load, or a
visitor the guards skipped, got a permanently invisible video with no
error anywhere. The poster sits behind and shows through until the
first frame arrives. */
opacity: 1;
background: transparent;
/* Grade the footage down in the browser rather than baking it into the
file. Measured against the real poster, the scrim alone left white text
at 2.6:1 -- below the 3:1 large-text floor -- because bright windows sit
exactly where the headline does. This also pulls a daylight interior
toward the site's night palette. Applies to the poster too, since the
video element renders it. */
filter: brightness(0.78) saturate(0.72) contrast(1.05);
}
/* The poster is its own element rather than the video's poster attribute.
The video sits at opacity 0 until frames arrive, and that hid the poster
with it -- so any visitor whose video didn't play (Low Power Mode, reduced
motion, Data Saver, a 404) saw flat ink instead of the still. */
.jg-hero__poster {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: brightness(0.78) saturate(0.72) contrast(1.05);
}
/* Kept for the reduced-motion and Data Saver cases, where JavaScript
removes the source and the poster should be all that shows. */
.jg-hero__video.is-suppressed { display: none; }
.jg-hero__scrim {
position: absolute;
inset: 0;
z-index: 1;
background:
linear-gradient(90deg,
rgba(14, 17, 22, 0.95) 0%,
rgba(14, 17, 22, 0.88) 38%,
rgba(14, 17, 22, 0.62) 72%,
rgba(14, 17, 22, 0.72) 100%),
linear-gradient(180deg,
rgba(14, 17, 22, 0.7) 0%,
rgba(14, 17, 22, 0.25) 40%,
rgba(14, 17, 22, 0.92) 100%);
}
/* Insurance for footage brighter than the placeholder poster: the scrim
alone measures 3.5:1 at its worst pixel, which is too close to the line. */
.jg-hero--video h1,
.jg-hero--video .jg-hero-lede,
.jg-hero--video .jg-label,
.jg-hero--video .jg-mono {
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 2px 28px rgba(0, 0, 0, 0.85);
}
.jg-hero--video .jg-meetcard {
box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.95);
backdrop-filter: blur(2px);
}
@media (max-width: 781px) {
.jg-hero__scrim {
background: linear-gradient(180deg,
rgba(14, 17, 22, 0.86) 0%,
rgba(14, 17, 22, 0.94) 60%,
var(--wp--preset--color--ink) 100%);
}
}
/* --------------------------------------------------------------
14. The pickup film
-------------------------------------------------------------- */
.jg-film {
margin: 0;
border: var(--jg-hair);
background: #000;
}
.jg-film__video {
display: block;
width: 100%;
height: auto;
background: #000;
/* No forced aspect-ratio. The width and height attributes come from the
file itself, so the browser reserves the right box and nothing is
letterboxed. A hardcoded 16/9 put black bars on a 1.8:1 film. */
}
.jg-film__caption {
display: flex;
flex-wrap: wrap;
gap: 0.5rem 2rem;
justify-content: space-between;
padding: 1rem 1.25rem;
border-top: var(--jg-hair);
background: var(--wp--preset--color--slate);
font-family: var(--wp--preset--font-family--mono);
font-size: 0.75rem;
letter-spacing: 0.02em;
color: var(--wp--preset--color--fog);
}
.jg-film__meta {
color: #7C8996;
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.6875rem;
}
/* --------------------------------------------------------------
15. Vehicle drawings
All three share one viewBox and one rendered width, so the
size difference between the classes is true to scale.
-------------------------------------------------------------- */
.jg-vehicle-figure {
display: block;
margin: 0 0 0.5rem;
color: var(--wp--preset--color--brass);
}
.jg-vehicle-figure svg {
display: block;
width: 100%;
max-width: 15rem;
height: auto;
}
.jg-vehicle:hover .jg-vehicle-figure { color: var(--wp--preset--color--white); }
.jg-vehicle-figure svg,
.jg-vehicle-figure { transition: color 0.25s var(--jg-ease); }
.jg-vehicle-scale {
display: block;
font-family: var(--wp--preset--font-family--mono);
font-size: 0.625rem;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #7C8996;
margin-bottom: 1.25rem;
}
/* ---------------------------------------------------------------
16. Full-viewport hero on the front page
The header floats over the video rather than sitting above it,
so the footage starts at pixel zero. Scoped to .home so every
other page keeps a normal opaque header.
--------------------------------------------------------------- */
.home .jg-header {
position: absolute;
inset-inline: 0;
top: 0;
z-index: 20;
border-bottom: 0;
backdrop-filter: none;
}
/* The gradient is lighter than it was so the footage shows through it, so the
nav and wordmark carry their own shadow rather than relying on the scrim. */
.home .jg-header .wp-block-site-title a,
.home .jg-header .wp-block-navigation a,
.home .jg-header .jg-header-phone {
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75), 0 1px 14px rgba(0, 0, 0, 0.6);
}
/* A gradient instead of a flat fill: keeps the nav legible over bright
footage without drawing a hard band across the top of the video. */
.home .jg-header,
.home .jg-header.has-background {
background-color: transparent;
background-image: linear-gradient(
180deg,
rgba(14, 17, 22, 0.72) 0%,
rgba(14, 17, 22, 0.34) 58%,
rgba(14, 17, 22, 0) 100%);
}
.home .jg-hero--video {
/* svh accounts for mobile browser chrome; vh is the fallback. */
min-height: 100vh;
min-height: 100svh;
/* --jg-header-h is measured at runtime; the clamp is the no-JS fallback.
Guessing this with a fixed clamp breaks the moment the nav wraps, the
menu is translated, or the admin bar appears. */
/* !important is load-bearing here: the group block writes its spacing as an
inline style attribute, which outranks any selector. Pages saved before
this fix still carry that inline padding. */
padding-top: calc(var(--jg-header-h, 8rem) + clamp(1.5rem, 4vh, 3.5rem)) !important;
padding-bottom: var(--wp--preset--spacing--40) !important;
/* NOT justify-content: center. Centring a flex item that is taller than
its container makes it overflow *both* ways, so the meet card rides up
underneath the floating header. Auto margins centre when there is room
and fall back to flex-start when there isn't. */
justify-content: flex-start;
}
.home .jg-hero--video > .wp-block-columns {
margin-block: auto;
width: 100%;
}
/* The scrim has to reach further up now that the header sits inside it. */
.home .jg-hero--video .jg-hero__scrim {
background:
linear-gradient(90deg,
rgba(14, 17, 22, 0.94) 0%,
rgba(14, 17, 22, 0.86) 40%,
rgba(14, 17, 22, 0.58) 74%,
rgba(14, 17, 22, 0.7) 100%),
linear-gradient(180deg,
rgba(14, 17, 22, 0.8) 0%,
rgba(14, 17, 22, 0.28) 32%,
rgba(14, 17, 22, 0.34) 62%,
var(--wp--preset--color--ink) 100%);
}
@media (max-width: 781px) {
/* The header keeps floating on phones now. It previously dropped back into
the flow because a wrapped nav has no predictable height -- but clearance
is measured at runtime, so that objection is gone and the video runs
full-bleed from pixel zero on every device. */
.home .jg-hero--video {
min-height: 100svh;
padding-bottom: var(--wp--preset--spacing--30) !important;
}
/* Stacked layout, so the scrim runs top to bottom instead of left to right.
Heaviest at the top, because the nav sits inside it. */
.home .jg-hero--video .jg-hero__scrim {
background: linear-gradient(
180deg,
rgba(14, 17, 22, 0.88) 0%,
rgba(14, 17, 22, 0.55) 26%,
rgba(14, 17, 22, 0.46) 58%,
rgba(14, 17, 22, 0.97) 92%,
var(--wp--preset--color--ink) 100%);
}
}
/* ---------------------------------------------------------------
17a. Full-bleed sections must butt together
Core's layout stylesheet puts a blockGap margin on every child of a
flow or constrained container. Between coloured full-width bands that
leaves a 16px strip of body background -- a black or grey bar across
the page. Two classes so this outranks core's :where() rules.
--------------------------------------------------------------- */
main > .alignfull,
.is-layout-flow > .alignfull,
.is-layout-constrained > .alignfull,
.wp-block-post-content > .alignfull,
.entry-content > .alignfull {
margin-block-start: 0;
margin-block-end: 0;
}
/* Same rule, one level up. Core wraps the whole document in .wp-site-blocks
and gaps its children too, which put a 16px bar between the last section
and the footer. The footer supplies its own top padding. */
.wp-site-blocks > header,
.wp-site-blocks > main,
.wp-site-blocks > footer,
.wp-site-blocks > .wp-block-template-part {
margin-block-start: 0;
margin-block-end: 0;
}
/* Vertical padding on post-content, but only when the page is plain content.
A page built from patterns supplies its own section padding, and the extra
left a band of background above the footer and under the title. :has() lets
one rule serve both cases. */
.wp-block-post-content:not(:has(> .alignfull)),
.entry-content:not(:has(> .alignfull)) {
padding-block: var(--wp--preset--spacing--50);
}
/* And once more inside the booking section. blockGap gave the credentials
band only 16px of clearance, so the step text sat almost on top of its
rule and the steps read as having no bottom padding. */
.jg-steps + .jg-creds,
.jg-creds {
margin-top: var(--wp--preset--spacing--40);
margin-bottom: 0;
}
/* ---------------------------------------------------------------
17. Defensive overrides
Core injects is-layout-flow / is-layout-constrained classes and
their own child-margin rules onto every group. These containers
manage their own spacing via grid, so neutralise that.
--------------------------------------------------------------- */
.jg-services > *,
.jg-fleet > *,
.jg-steps > *,
.jg-strip-inner > * {
margin-block-start: 0;
margin-block-end: 0;
}
.jg-meetcard > *:first-child,
.jg-film > *:first-child {
margin-block-start: 0;
}
/* ---------------------------------------------------------------
18. Small page title (page-label template)
post-title at level 0 renders a , not a heading -- so a page
can show its WordPress title without competing with the H1 that
the page's own pattern already provides.
--------------------------------------------------------------- */
.jg-pagelabel {
border-bottom: var(--jg-hair);
}
.jg-pagelabel .wp-block-post-title {
margin: 0;
font-family: var(--wp--preset--font-family--mono);
font-size: 0.6875rem;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--wp--preset--color--brass);
}
.jg-pagelabel .wp-block-post-title a {
color: inherit;
text-decoration: none;
}
/* ---------------------------------------------------------------
19. Contact Form 7
Styled to match the rest of the site rather than left with the
plugin's browser defaults, which look pasted-in on a dark page.
--------------------------------------------------------------- */
/* Keyed to CF7's own wrapper, not to the custom markup, so the form is styled
even if the pasted