/* Viewport Taxonomy
* Mobile, ≤ 767px
* Tablet, 768–999px
* Tablet Plus, 1000–1329px
* Desktop, ≥ 1330px
* Superwide (Ultra-wide Desktop), ≥ 1920px
*
* Desktop, type can scale modestly with viewport up to 1920px
* Superwide, typography is locked, layout breathes via gutters only
*/
:root{
/* TODO(csg-usa): accent colour value - blocked on the US brand palette being chosen.
The hex below is inherited from the source theme and is provisional. The token NAMES
are deliberately unchanged: --csg-gold is also defined independently in
inc/admin/admin-acf.css, and renaming here would split the vocabulary across the
theme and churn every reference site for no rendered benefit. Change the value in
one place when the palette lands; the names are theme-scoped and render nothing. */
--csg-brass:#AFA287;
--csg-gold:var(--csg-brass); /* alias - identical hex, kept for existing usages */
--charcoal:#1C1F22;
--stone:#EAE8E4;
--grey:#7B7F85;
--copper:#B67352;
--forest:#2F4A3B;
--bg:#FFFFFF;
--surface:#FFFFFF;
--surface-editorial:#F7F6F3;
--surface-card:#FFFFFF;
--border:rgba(28,31,34,.14);
--shadow:0 16px 50px rgba(28,31,34,.10);
--radius:18px;
--btn-radius: 6px;
--max:1180px;
--pad:24px;
--hero-rail: min(1180px, calc(100% - 48px));
--hero-fullbleed-top-gap: clamp(28px, 3.2vw, 64px);
--h1:clamp(34px, 4vw, 54px);
--h2:clamp(22px, 2.6vw, 34px);
--h3:20px;
--body:17px;
--small:13px;
--lh:1.55;
--header-height: 132px;
--header-offset: var(--header-height);
--header-blur: 10px;
/* header surfaces */
--surface-header-light: var(--bg);
--surface-header-dark: #000000;
/* header opacity/blur (tunable) */
/* 1, not 0.84. Duncan, 2026-09-01: "use white background".
A translucent header over a full-bleed hero and then over white sections does not hold one
colour - it takes on whatever scrolls beneath it, which reads as the header changing colour
even when its own theme is fixed. Solid white removes the second cause of the switching he
reported; pinning the theme in header-scroll.js removed the first. */
--header-light-alpha: 1;
/* wide gutters for header and footer on ultra-wide screens */
/* R02 (review, f790570): this was clamp(24px, calc((100vw - 1920px)/2 + 150px), 150px).
The calc is designed to hold the wide rail at a constant 1620px above 1920 - gutter grows
by exactly half the extra viewport - but the 150px UPPER BOUND stopped it doing so, so the
gutter froze at 150 and .wrap--wide (max-width:none) grew without limit: measured 1620 at
1920, 2260 at 2560, 3140 at 3440, with the portfolio image reaching 1575px while its title
stayed at 160px and visually detached from it.
max() instead of clamp() keeps the lower bound and drops the bound that was the bug. The
calc only exceeds 150px once the viewport passes 1920, so EVERY width below 1920 computes
identically to before and the change is confined to the superwide range it fixes. */
--gutter-wide: max(24px, calc((100vw - 1920px) / 2 + 150px));
--matte-inner-ratio: 0.63636;
--matte-radius: 22px;
--print-radius: 6px;
/* Golden ratio spacing */
--phi: 1.618;
--space-1: 12px;
--space-2: calc(var(--space-1) * var(--phi));
--space-3: calc(var(--space-2) * var(--phi));
--space-4: calc(var(--space-3) * var(--phi));
--panel-black: #000;
--panel-white: transparent;
--callout-bg: transparent;
--callout-border: rgba(255,255,255,.08); /* on dark sections */
--callout-border-light: rgba(28,31,34,.14); /* if used on light sections */
--callout-radius: 6px; /* near-square, print-like */
--callout-pad: 34px;
--callout-max: 560px;
--cta-btn-bg: var(--csg-gold);
--cta-btn-fg: #111;
--cta-btn-radius: 999px;
--cta-btn-h: 46px;
}
/* Typography scaling, Desktop to 1920, then lock on superwide */
@media (min-width: 1330px){
:root{
--body: clamp(17px, 1.35vw, 21px);
--small: clamp(13px, 0.85vw, 14px);
--h3: clamp(17px, 1.35vw, 21px);
--h4: clamp(17px, 1.35vw, 21px);
--h2: clamp(28px, 2.2vw, 42px);
--h1: clamp(48px, 3.40vw, 60px);
}
}
@media (min-width: 1920px){
:root{
--body: 21px;
--small: 14px;
--h3: 21px;
--h4: 21px;
--h2: 42px;
--h1: 60px;
}
}
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;
background:var(--bg);
color:var(--charcoal);
padding-top: var(--header-height);
font-family:"Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size:var(--body);
/* Archivo is a dense grotesque, and 300 is the weight Duncan chose off the ladder on
2026-09-17 after "this font feels heavy throughout". This is the DOCUMENT DEFAULT, so
anything that must not thin out with it - buttons, the nav CTA, headings - has to carry
its own font-weight rather than inherit. */
font-weight:300;
line-height:var(--lh);
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
/* Enforce serif on all headings by default */
h1, h2, h3, h4, h5, h6{
font-family: "Libre Bodoni", Didot, "Bodoni MT", Georgia, "Times New Roman", serif;
}
/* Explicitly lock body + UI elements to Archivo */
p,
li,
span,
a,
button,
input,
textarea,
label,
nav{
font-family: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.serif{font-family:"Libre Bodoni", Didot, "Bodoni MT", Georgia, "Times New Roman", serif}
a{color:inherit; text-decoration:none}
button{font:inherit}
img{max-width:100%; display:block}
.visually-hidden{
position:absolute !important;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0,0,0,0);
white-space:nowrap;
border:0;
}
.is-protected{
position:relative;
}
.is-protected .image-shield{
position:absolute;
inset:0;
z-index:2;
background:transparent;
cursor:default;
pointer-events:auto;
}
.is-protected img{
pointer-events:none;
user-select:none;
-webkit-user-drag:none;
}
.wrap{max-width:var(--max); margin:0 auto; padding:0 var(--pad)}
/* Wide rail modifier - aligns with header/footer gutters */
.wrap--wide{
max-width: none;
width: 100%;
}
@media (min-width: 768px){
.wrap--wide{
padding-inline: 75px;
}
}
@media (min-width: 1330px){
.wrap--wide{
padding-inline: max(75px, var(--gutter-wide));
}
}
.section{padding:64px 0}
.section--editorialWide{
margin-top: clamp(48px, 7vw, 120px);
}
.section--editorialWide .editorialWide-inner{
max-width: 72ch;
}
.section--editorialWide h2{
margin-top: 0;
}
/* Intro section – dark background */
.section-intro--dark{
background:#000;
color:#fff;
}
.section-intro--dark h2,
.section-intro--dark h3{
color:#fff;
}
.section-intro--dark p,
.section-intro--dark li,
.section-intro--dark span{
color:rgba(255,255,255,.9);
}
.section-intro--dark .muted{
color:rgba(255,255,255,.7);
}
.section-intro--dark .card{
background:#111;
border-color:rgba(255,255,255,.12);
}
.section-intro--dark .tick{
background-color:#fff;
}
/* Intro section – remove the default section divider seam */
#section-intro.section-intro--dark{
border-top: 0;
margin-top: 0;
}
/* If there is still a 1px seam due to sub-pixel rendering, cover it */
#section-intro.section-intro--dark{
margin-top: -1px;
}
/* Intro editorial points (no bullets) */
#section-intro .intro-points{
margin-top: 16px;
}
/* Intro editorial points – Condé-style hierarchy */
#section-intro .intro-points p{
margin: 0 0 18px 0;
}
#section-intro .point-lead{
display: block;
font-size: 1.05rem;
font-weight: 500;
letter-spacing: 0.02em;
color: #fff;
margin-bottom: 4px;
}
#section-intro .point-body{
display: block;
/* MATCHES THE ABOUT PAGE. Duncan, 2026-09-14: "font size on about page ... is good but on
the home page is too small". Measured: the About body ran at 19.44px/30.13px and this at
15.2px/22.04px, because .point-body was built as the small supporting line UNDER a bold
lead in the old fact-bullet layout. The leads are empty now and each span carries a whole
paragraph, so the reason for the step down went with the bullets.
inherit rather than a number, so it tracks the paragraph it sits in and cannot drift away
from the About page the next time the body scale moves. */
font-size: inherit;
line-height: inherit;
color: rgba(255,255,255,.82);
}
.kicker{
font-size:var(--small);
letter-spacing:.12em;
text-transform:uppercase;
color:rgba(28,31,34,.70);
}
/* Utilities (Phase 1 cleanup) */
.mt-6{ margin-top:6px; }
.mt-18{ margin-top:18px; }
.m-0{ margin:0; }
.grid-gap-sm{
display:grid;
gap:10px;
}
.wrap-narrow{
max-width:860px;
}
/* Header */
.header{
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
will-change: transform;
transition: transform 160ms ease;
border-bottom: 0;
box-shadow: none;
--header-surface: var(--surface-header-light);
--header-alpha: var(--header-light-alpha);
background: color-mix(in srgb, var(--header-surface) calc(var(--header-alpha) * 100%), transparent);
-webkit-backdrop-filter: blur(var(--header-blur));
backdrop-filter: blur(var(--header-blur));
}
.header-rail {
width: 100%;
}
.header-inner{
display:flex;
align-items:center;
/* flex-start plus margin-left:auto on .nav, NOT space-between.
*
* Duncan, 2026-08-31: "still acres of padding between get in touch and burger". Measured at
* 1920 it was 398px. space-between distributes THREE children across the rail, so it pushed
* the burger to the far edge and left a hole between it and the nav - the gap was not
* padding anyone had set, it was the algorithm doing what it is for.
*
* Pushing only .nav with margin-left:auto groups the nav and the burger as one cluster on
* the right, separated by the 16px gap below and nothing else. */
justify-content:flex-start;
gap:16px;
padding-block: 14px;
padding-inline: var(--header-gutter, var(--pad));
}
.header.is-hidden{
transform: translateY(-110%);
}
/* Defensive: hero-top never hides header even if .is-hidden is applied */
body.is-hero-top .header.is-hidden{
transform: translateY(0);
}
/* Header theme classes */
.header.is-theme-dark {
--header-surface: var(--surface-header-dark);
--header-alpha: 1;
background: var(--header-surface);
color: #fff;
border-bottom: 0;
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.header.is-theme-dark .nav a,
.header.is-theme-dark .menu a,
.header.is-theme-dark .nav-toggle,
.header.is-theme-dark .menu-toggle {
color: #fff;
}
.header.is-theme-dark .nav a:hover,
.header.is-theme-dark .nav button:hover {
border-color: rgba(255,255,255,.25);
background: rgba(255,255,255,.12);
}
.header.is-theme-light {
--header-surface: var(--surface-header-light);
--header-alpha: var(--header-light-alpha);
background: color-mix(in srgb, var(--header-surface) calc(var(--header-alpha) * 100%), transparent);
color: var(--charcoal);
border-bottom: 0;
box-shadow: none;
-webkit-backdrop-filter: blur(var(--header-blur));
backdrop-filter: blur(var(--header-blur));
}
.header.is-theme-light .nav a,
.header.is-theme-light .menu a,
.header.is-theme-light .nav-toggle,
.header.is-theme-light .menu-toggle {
color: rgba(28,31,34,.86);
}
.header.is-theme-light .nav a:hover,
.header.is-theme-light .nav button:hover {
border-color: var(--border);
background: rgba(255,255,255,.55);
}
.brandmark{
display:flex;
align-items:center;
gap:12px;
}
/* 132px. Duncan, 2026-08-31: "logo needs to be 3x the size".
I had it at 44px, which is the conventional height for a horizontal mark in a sticky
header. His call overrides that, and it is a brand-presence decision rather than a
technical one.
The consequence is real and is handled rather than absorbed silently: at a flat 132px the
linear 636x255 lockup renders ~330px wide, taking 220px of rail width the ten-item nav
needs - the rail would then require a 1401px viewport and start CLIPPING items below that,
which is exactly the defect review caught last time.
So the height is a clamp, not a constant. It reaches the full 132px at 1886px and above,
which is the screen this was asked for, and scales down below that so the nav keeps its
room. The drawer breakpoint is recomputed to 1349px against the widest logo the rail has
to coexist with. If the ten-item top-level menu were trimmed, both numbers would relax -
but the menu is Duncan's. */
.brandmark img{height:clamp(72px, 7vw, 132px); width:auto; max-width:100%}
.brandmark-img--mobile{ display:none; }
.nav{
display:flex;
align-items:center;
gap:10px;
flex-wrap:nowrap; /* stop header height changing */
justify-content:flex-end;
white-space:nowrap; /* belt and braces */
margin-left:auto; /* pushes nav AND the burger after it to the right as one group */
}
@media (max-width: 1349px){
.header .nav{ display:none; }
.nav{
flex-wrap:wrap; /* allow wrap only on small screens */
white-space:normal;
}
}
/* The rail has to hold ten top-level items, and it did not.
*
* FOUND BY REVIEW, 2026-08-31: with the burger hidden above 767px, the header showed 4 of
* 10 links at 768px, 7 at 1024 and 8 at 1280 - all ten only at 1330 and up. The items were
* not wrapping or scrolling, they were being CLIPPED, and body overflow masking meant the
* page looked intentional at every one of those widths. Planners, About and Contact simply
* were not there.
*
* This predates the depth-2 dropdown, which only made it matter: a nav that silently drops
* a third of itself is bad, and one that also holds the only route to 18 sub-pages is worse.
*
* Two changes together. This one buys room by tightening the rail between the drawer
* breakpoint and 1400px; the drawer breakpoint below moves up to cover what is
* still too narrow. Tightening alone would not have been enough, and moving the breakpoint
* alone would have put a burger on a 1280px laptop that has room for the real thing. */
@media (min-width: 1350px) and (max-width: 1560px){
.nav .nav-list{ gap:2px }
.nav a, .nav button{
padding:10px 7px;
font-size:13.5px;
}
}
/* Primary CTA inside cards */
.btn.alt{
background:var(--csg-gold);
border-color:var(--csg-gold);
color:#1C1F22; /* charcoal for legibility */
font-weight:500;
}
.btn.alt:hover{
background:#9E956F;
border-color:#9E956F;
color:#1C1F22;
}
.nav a, .nav button{
/* 17px, up from 14px. Duncan, 2026-08-31: "the menu font can now afford to be larger" - and
it can: the rail carries four items instead of ten, and beside a 132px brandmark a 14px
label looked undersized rather than restrained. Measured at 1920 the four items occupy
507px against roughly 1275px of usable rail, so this is spending room that exists. */
padding:10px 14px;
border-radius: var(--btn-radius);
border:1px solid transparent;
background:transparent;
cursor:pointer;
font-size:17px;
/* Same reason as .btn: this declared no weight, so the 300 document default thinned every
navigation label. 400 restores what the browser default was already giving it. The CTA
keeps its own 540 further down, and is unaffected either way. */
font-weight:400;
color:rgba(28,31,34,.86);
transition:all .18s ease;
}
.nav a:hover, .nav button:hover{
border-color:var(--border);
background:rgba(255,255,255,.55);
}
/* Mobile menu */
.nav-toggle{
appearance:none;
background:transparent;
border:0;
padding:10px;
margin:0;
cursor:pointer;
/* Visible at EVERY width, beside "Get in Touch". It is the only route to the 26 items that
are not on the four-item rail, so hiding it on desktop stranded most of the site. */
display:inline-flex;
}
.nav-toggle-lines{
width:22px;
height:14px;
display:inline-flex;
flex-direction:column;
justify-content:space-between;
}
.nav-toggle-lines span{
display:block;
height:1px;
background:currentColor;
opacity:.9;
}
/* Overlay – visibility via opacity/pointer-events, no display toggle */
/* THE BURGER IS ALWAYS VISIBLE, AND THE DRAWER WORKS AT EVERY WIDTH.
*
* Duncan, 2026-08-31: "no burger menu visible on the page top the right of Get in Touch on the
* menu". A real gap in what I built: the rail was cut to four items and the other 26 moved
* into the drawer, but the drawer only existed below the breakpoint - so a desktop visitor had
* no route to Service Area, the nine metros, the channel sub-pages, Stretch Tents or Planners
* and Venues at all. Four items and no way to reach the rest is worse than the ten-item rail
* it replaced.
*
* So the drawer panel, overlay, open state and typography are now UNCONDITIONAL, and the
* trigger renders at every width beside "Get in Touch". Only ONE thing stays
* breakpoint-dependent - whether the four-item RAIL is shown - because that is the only part
* that was ever about available width.
*
* The earlier reasoning still holds and is why the split is where it is: the drawer and its
* trigger must share a breakpoint, or the trigger opens nothing. Making both unconditional
* satisfies that rule rather than breaking it.
*/
/* Mobile closed: transform/opacity/pointer-events only, no display toggle */
/* A PANEL FROM THE RIGHT, not a full-screen takeover.
*
* Duncan, 2026-08-31: "burger menu opens full screen rather than from the rhs and the actual
* menu is horrible". It was inset:0 at 100% x 100%, sliding down from the top - which on a
* 1920px desktop meant one tap replaced the entire page with a list, giving no sense of
* having opened something over the site rather than navigated away from it.
*
* Now a fixed-width panel anchored right, sliding in on translateX. It stays full-height and
* scrolls internally, and goes full width only on a phone where 420px IS the screen.
*
* display:none is gone deliberately - a transform cannot animate from display:none, which is
* why the old one snapped. visibility plus a delayed transition keeps it out of the tab order
* while closed and still lets it slide. */
/* Open state: explicit transform + pointer-events so overlay/close/links are clickable */
/* Inner spacing */
/* Close button */
/* Typography */
@media (max-width: 767px){
/* On mobile, avoid viewport-width gutters to prevent layout viewport from inflating scrollWidth */
:root{
--gutter-wide: 24px;
}
/* On mobile, contain horizontal overflow at document level */
html,
body{
overflow-x: hidden;
}
/* On mobile, header participates in normal flow; remove global header offset padding */
body{
padding-top: 0;
}
/* Mobile header: size to document width and stick to top (no fixed overflow) */
.header{
position: sticky;
top: 0;
left: auto;
right: auto;
}
/* Neutralise scroll-hide behaviour on mobile */
.header.is-hidden{
transform: none;
}
/* Mobile header: solid black background, always black, no theme switching */
.header,
.header.is-theme-light,
.header.is-theme-dark {
background: #000 !important;
background-image: none !important;
-webkit-backdrop-filter: none !important;
backdrop-filter: none !important;
color: #fff !important;
}
/* Burger icon must always be white on mobile */
.nav-toggle,
.nav-toggle-lines span{
color: #fff !important;
}
/* Show brandmark on mobile */
.brandmark {
display: inline-flex !important;
align-items: center;
gap: 0;
min-width: auto;
}
/* Hide desktop logo, show mobile logo */
#csgHeaderLogo {
display: none !important;
}
.brandmark-img--mobile {
display: block !important;
height: 26px;
width: auto;
max-width: 180px;
}
/* Ensure header-inner aligns like a clean rail */
.header-inner{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
}
}
/* Body lock when menu open */
body.nav-open{
overflow:hidden;
}
/* Hero */
.hero{
position:relative;
z-index:0;
min-height:72vh;
display:grid;
align-items:end;
padding:72px 0 40px;
overflow:hidden;
border-bottom:1px solid var(--border);
background:var(--charcoal);
color:#fff;
}
/* Remove hero border-bottom on home page to eliminate seam with intro section */
body.home .hero{
border-bottom: 0;
}
/* Hero-top mode: inset hero image */
/* Hero-top: header becomes nav-only, so reduce reserved height */
/* Hero-top: compact nav-only header */
body.is-hero-top{
--header-height: 72px; /* compact target */
}
/* Ensure header actually matches the compact target */
body.is-hero-top .header-inner{
padding-block: 10px; /* reduce vertical padding */
min-height: var(--header-height);
}
/* NO SCROLL CHOREOGRAPHY. The hero starts in what used to be its scrolled state.
*
* Duncan, 2026-08-31: "drop the hero animation, just start full width".
*
* What this replaced: the hero opened with the image confined to a centred 1180px rail and a
* compact nav-only header with the brandmark hidden, then on first scroll the image animated
* out to 100vw over 2000ms while the brandmark faded in and the header grew. Four things
* moving at once, all keyed off a .has-scrolled class.
*
* The rules below are the former .has-scrolled values, now unconditional. Every
* :not(.has-scrolled) branch is gone rather than neutralised, so there is ONE state and no
* second definition to drift out of step with it - which is what a leftover "off" branch
* always becomes.
*
* .is-hero-top is KEPT. It identifies the front page for the type and layout rules further
* down; it is only the scroll-dependent branching that goes. header-scroll.js still adds
* .has-scrolled and nothing now reads it for the hero, which is harmless and left alone
* because it still drives the header's hide-on-scroll behaviour. */
body.is-hero-top .brandmark{
display: flex;
}
body.is-hero-top .header-inner{
justify-content: space-between;
padding-block: 14px;
min-height: 0;
}
body.is-hero-top .hero{
min-height: 80vh;
padding-top: calc(var(--header-height) + var(--hero-fullbleed-top-gap));
padding-bottom: 40px;
overflow: hidden;
background: var(--bg);
}
body.is-hero-top .hero-media{
width: 100vw;
}
.hero-title-spacer{
height:clamp(56px, 7vw, 88px); /* roughly the headline height */
}
.hero-media{
position:absolute;
top:0;
left:0;
right:0;
bottom:-1px;
z-index:0;
pointer-events:none;
overflow:hidden;
background: transparent;
filter: none;
transform: none;
}
/* Hero media: centred rail with width animation (desktop/tablet only) */
@media (min-width: 768px){
.hero .hero-media{
position: absolute;
left: 50%;
right: auto;
transform: translateX(-50%);
/* 100vw from the start, and no transition. The rail width and the 2000ms ease were the
animation itself - keeping either would reintroduce it on any page load that toggles
.has-scrolled before paint. */
width: 100vw;
}
.hero-media-img{
width:100%;
height:100%;
object-fit:cover;
object-position:center;
display:block;
}
}
/* Was object-position:50% 18%, which framed the top of the picture. On a 72-80vh hero a
3:2 landscape is cropped hard, and at 18% the structure fell below the visible band -
Duncan, 2026-09-08: "the entire tent is cropped so you only see the sea". 18% -> 50% was
still too high - the structure sits low in this frame - so 72%. A LARGER Y shows more of
the BOTTOM of the picture, which is the counterintuitive bit: to move the image up in the
window you push the focal point down the image. */
.hero .hero-media-img{
object-position: 50% 72%;
transition: none;
}
/* Tablet/tablet_plus: fixed 75px gutters pre-scroll, preserve smooth full-width transition */
@media (min-width: 768px) and (max-width: 1329px){
.hero{
--hero-gutter: 75px;
}
/* Full width here too. The gutter value was the animation's opening frame, so with the
animation gone it would just be a narrower hero on tablets for no reason. */
.hero .hero-media{
width: 100vw;
}
/* CTA aligns to the image edge, not viewport edge */
.hero-cta{
right: var(--hero-gutter);
}
}
.hero-title{
position:absolute;
left:var(--pad);
right:var(--pad);
/* Anchored to the TOP, Duncan 2026-09-14: "redefining needs to be higher up the image,
towards the top". It was bottom-anchored, which was right while the text was white over
the dark foot of the frame.
THE OFFSET IS A SUBTRACTION, which is the part that was wrong first time round.
body.is-hero-top already pads .hero by calc(--header-height + --hero-fullbleed-top-gap),
and this box is positioned inside that padding - so adding --header-height again counted
the header twice and put the headline 213px down a 720px photograph. Measured: .hero at
y=104, .hero-inner at y=222, .hero-title at y=317.
Backing both values out lands the box on the top edge of the photograph; the clamp is
then the gap actually wanted below it. Expressed with the same two variables the padding
uses, so it follows them rather than drifting when the header resizes - which is what the
hand-tuned negative top this rule originally replaced could not do. */
/* Duncan walked this in: bottom-anchored, then 213px down the photograph (the header
counted twice), then 43px down, then "lower - split the difference". 9vw is 130px at
1440, the midpoint of the last two - then "nudge up a little - split the difference of
the last move", which is 6vw, 86px at 1440. */
top: calc(clamp(48px, 6vw, 100px) - var(--header-height) - var(--hero-fullbleed-top-gap));
bottom:auto;
max-width:var(--max);
margin:0 auto;
z-index:3;
/* A HALO, not a drop shadow. This was 0 10px 30px rgba(0,0,0,.55), which held WHITE text
off a bright sky. The text is black now, so a black shadow behind it only smears the
edges. A soft white spread does the same job in the other direction. */
text-shadow: 0 0 18px rgba(255,255,255,.55), 0 1px 2px rgba(255,255,255,.7);
}
/* Scrim removed 2026-09-08 at Duncan's request: this rule carried
background:rgba(28,31,34,.45) plus a 6px backdrop blur behind the hero headline.
The panel itself only renders when a headline exists (see parts/home/hero.php). */
.hero-title-bg{
display:inline-block;
padding:22px 32px;
border-radius:18px;
/* Black, Duncan 2026-09-14. --charcoal is this site's near-black and is what every other
heading uses; over a photograph it is indistinguishable from #000 and it keeps the hero
on the same palette as the page below it. */
color:var(--charcoal);
/* THE SIZE, added 2026-09-14 with the headline itself.
There was no font-size here, so the words came back at inherited body size - measured at
19.44px, which over a photograph reads as a caption rather than as the heading of the
page. --h1 is the token every other leading line on the site uses, clamp(34px, 4vw, 54px)
and up to 60px at the widest breakpoint, so this tracks the scale instead of pinning a
value that will drift away from it.
Tight leading because a display line at 54px inherits body line-height and falls apart
across two lines on a phone. */
font-size:var(--h1);
line-height:1.05;
letter-spacing:-.01em;
/* The panel is bottom-anchored and the photograph is busy at the foot of the frame, so the
line is held to a readable measure rather than running the full width of the hero. */
max-width:18ch;
}
.hero-copy{
max-width:68ch;
background:rgba(28,31,34,.42);
padding:18px 22px;
border-radius:14px;
}
.hero-copy p{
margin:0;
color:rgba(255,255,255,.92);
font-size:18px;
backdrop-filter: blur(2px);
}
.hero-inner{
position:relative;
z-index:2;
padding:0 var(--pad);
padding-bottom:clamp(18px, 3vw, 36px);
max-width:var(--max);
margin:0 auto;
width:100%;
display:grid;
gap:18px;
min-height:100%;
}
h1{
margin:0;
margin-top:-24px;
font-size:var(--h1);
letter-spacing:-.02em;
line-height:1.05;
font-weight:400;
}
.hero p{
margin:0;
max-width:70ch;
font-size:18px;
color:rgba(255,255,255,.82);
}
.hero-cta{
position:absolute;
right:0;
bottom:0;
margin:0;
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
background:rgba(28,31,34,.35);
backdrop-filter:blur(4px);
-webkit-backdrop-filter:blur(4px);
padding:12px 14px;
border-radius: var(--btn-radius);
width:max-content;
}
/* base */
.hero-cta .btn{
color:#fff;
}
/* primary */
.hero-cta .btn.primary{
background:rgba(28,31,34,.92);
border:1px solid rgba(28,31,34,.92);
}
.hero-cta .btn.primary:hover{
background:rgba(28,31,34,1);
border-color:rgba(28,31,34,1);
}
/* secondary */
.hero-cta .btn.secondary{
background:rgba(255,255,255,.14);
border:1px solid rgba(255,255,255,.35);
}
.hero-cta .btn.secondary:hover{
background:rgba(255,255,255,.22);
border-color:rgba(255,255,255,.45);
}
/* Mobile hero: height comes from image, no forced tall container */
@media (max-width: 767px){
.hero{
position: relative; /* anchor for absolute CTA */
background: #000 !important;
color: #fff;
min-height: 0 !important;
height: auto !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
overflow: visible !important;
transition: none !important;
}
.hero-inner{
min-height: 0 !important;
height: auto !important;
padding: 0 !important;
gap: 0 !important;
}
/* keep media in-flow */
.hero-media{
position: relative !important;
inset: auto !important;
width: 100% !important;
height: auto !important;
overflow: visible !important;
background: #000 !important;
}
.hero-media-img{
display: block;
width: 100% !important;
height: auto !important;
object-fit: contain !important;
object-position: center center !important;
}
/* CTA overlays image */
.hero-cta{
position: absolute !important;
right: 12px;
bottom: 12px;
margin: 0 !important;
width: auto;
z-index: 5; /* above image */
}
}
/* THE HERO HEADLINE ON A PHONE. Must come after the block above, which is what collapses
.hero-inner.
.hero-inner is position:relative and, once .hero-media goes back in flow, it is a
ZERO-HEIGHT box sitting BELOW the photograph. That makes it the containing block for the
absolutely positioned headline, so top:Npx measured N pixels DOWN FROM THE FOOT of the
image and the headline landed on the white section underneath. Measured: .hero ended at
y=405 and .hero-title sat at y=500.
Taking .hero-inner out of the positioning context hands the job to .hero, which is the
element that actually has the image's height. .hero-cta does not move: it is bottom-
anchored, and the bottom edge of a zero-height box at the foot of the image is the same
line as the bottom edge of .hero.
The header does not overlay the hero at this width - the hero starts below it - so the
offset here is a plain gap rather than --header-height plus one. */
@media (max-width: 767px){
.hero-inner{
position:static;
}
.hero-title{
top: clamp(10px, 3vw, 20px);
}
/* The band is 259px tall at 390px wide, so the headline lives inside a strip rather than
owning a section. 7.5vw is 29px on a 390px screen, which is two lines instead of the
three --h1's 34px floor produced, and it rejoins --h1 at 34px by 453px wide - so this
only ever takes the size DOWN on the smallest screens. The 18ch measure comes off: it
exists to stop a 54px line running the width of a 1440px hero, and here it only forces
another wrap. */
.hero-title-bg{
font-size:clamp(26px, 7.5vw, 34px);
max-width:none;
/* The 32px side padding is left over from the scrim that used to sit behind this. On a
390px screen it pushes the first letter 56px in from the edge, which is most of a word.
Half it, and only here. */
padding:10px 16px;
}
}
.btn{
display:inline-flex;
align-items:center;
gap:10px;
padding:12px 14px;
border-radius: var(--btn-radius);
border:1px solid rgba(255,255,255,.18);
background:rgba(255,255,255,.08);
color:#fff;
cursor:pointer;
transition:all .18s ease;
font-size:14px;
/* Explicit, because body is now font-weight:300 and this declared none - so it inherited the
new document default and every button quietly went thin. 400 is what it already rendered at
before that change, via the browser default; this restores it rather than restyling it. */
font-weight:400;
transform: translateY(0);
box-shadow: none;
}
.btn:hover{
background:rgba(255,255,255,.12);
transform: translateY(-1px);
box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
.btn:active{
transform: translateY(0);
box-shadow: 0 6px 14px rgba(0,0,0,.16);
}
.btn:focus-visible{
outline: 2px solid color-mix(in srgb, var(--csg-brass) 55%, transparent); /* csg-brass @ 55% */
outline-offset: 3px;
}
@media (hover: none){
.btn:hover{
transform: none;
box-shadow: none;
}
}
.btn--ghost{
background: transparent;
border: 1px solid rgba(28,31,34,.18);
color: var(--charcoal);
}
.btn--ghost:hover{
background: rgba(28,31,34,.04);
border-color: rgba(28,31,34,.28);
}
.btn--dark{
background: var(--charcoal);
border: 1px solid var(--charcoal);
color: #fff;
}
.btn--dark:hover{
background: rgba(28,31,34,.92);
border-color: rgba(28,31,34,.92);
}
.link-underline{
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
.scrollhint{font-size:13px; color:rgba(255,255,255,.70)}
/* Site modal */
.site-modal{
position: fixed;
inset: 0;
z-index: 9999;
display: none;
}
.site-modal.is-open{
display: block;
}
.site-modal__backdrop{
position: absolute;
inset: 0;
background: rgba(0,0,0,0.35);
}
.site-modal__panel{
position: relative;
max-width: 640px;
max-height: 85vh;
margin: 12vh auto 0;
background: #fff;
padding: 56px 56px 48px;
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0,0,0,0.18);
display: flex;
flex-direction: column;
overflow: hidden;
}
.site-modal__panel--schedule{
/* R01 (review, f790570): was a flat max-width:1136px with a max-width:1100px media query
dropping it to calc(100vw - 48px). Between those two rules the panel had no gutter at all:
measured x=24 width=1052 at 1100, then x=0 width=1101 at 1101 - edge to edge - before
centring again once the viewport passed 1136. min() keeps the 24px gutter at every width
and still caps at 1136, so the jump cannot recur. */
max-width: min(1136px, calc(100vw - 48px)); /* 1024px content + 56px padding each side */
height: 1024px;
padding-left: 0;
padding-right: 0;
position: relative;
background: #f4f4f4;
}
.site-modal__panel--schedule::before{
content: '';
position: absolute;
top: 24px;
left: 0;
right: 0;
height: 104px;
background: #f4f4f4;
z-index: 0;
}
.site-modal__title{
margin: 0 0 12px;
}
.site-modal__copy{
font-size: 14px;
line-height: 1.6;
color: rgba(0,0,0,0.7);
}
.site-modal__close{
position: absolute;
top: 18px;
right: 18px;
background: transparent;
border: 0;
font-size: 22px;
cursor: pointer;
color: rgba(0,0,0,0.6);
z-index: 10;
}
.site-modal__logo-wrapper{
position: absolute;
top: 24px;
left: 24px;
height: 104px;
z-index: 1;
background: #f4f4f4;
padding: 8px 16px;
box-sizing: border-box;
display: flex;
align-items: center;
}
.site-modal__logo{
height: 100%;
width: auto;
}
@media (max-width: 767px){
.site-modal__panel--schedule::before{
height: 10vw;
min-height: 60px;
max-height: 104px;
top: 12px;
}
.site-modal__logo-wrapper{
height: 10vw;
min-height: 60px;
max-height: 104px;
top: 12px;
left: 12px;
padding: 4px 8px;
}
.site-modal__logo{
height: 100%;
width: auto;
}
}
.booking-embed {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
height: 100%;
padding-top: 25px;
}
.booking-embed__iframe {
flex: 1 1 auto;
width: 100%;
height: 100%;
border: 0;
min-height: 0;
}
.booking-embed__fallback {
margin: 0;
padding: 10px 16px;
font-size: 14px;
text-align: center;
color: rgba(0,0,0,0.7);
}
.booking-embed__fallback a {
color: var(--csg-gold);
text-decoration: underline;
}
@media (min-width: 768px) and (max-width: 1068px){
.booking-embed {
padding-top: 50px;
}
}
/* =====================================================
TELL MODAL - "Tell us about your event"
Built to Duncan's mockup, 2026-09-18 (_claude/references/REF-tell-modal-mockup-2026-09-18.png):
a narrow centred card; the brand mark, heading and intro centred; fields in pairs; a full-width
brass submit; then a centred phone line between two rules and a small letterspaced strapline.
Gravity Forms' own stylesheets are switched off for this form (functions.php: gform_disable_css
plus the legacy theme slug), so this block is everything the form looks like. Nothing here is
overriding a framework, which is why there is no !important below except on the hidden rows.
ONE SCROLL CONTAINER, AND IT IS THE PANEL. Earlier versions scrolled the body, then the field
list, inside a fixed-height panel, and each of them ended up clipping the submit button at some
viewport height - the last one hid it completely. Here the panel is never taller than the
viewport and scrolls as a whole, so every part of it, the button included, is reachable at any
size and nothing can be clipped away. At 1440x1000 the whole card fits without scrolling.
===================================================== */
#tellModal.is-open{
display: flex;
align-items: center;
justify-content: center;
/* 24 -> 14 vertically. This is the gap between the dialog and the window edge, so every pixel
taken off it is a pixel the panel can use before it has to scroll. Horizontal padding is
unchanged - the panel is capped at 640px wide and never comes near the edges. */
padding: 14px 16px;
box-sizing: border-box;
}
#tellModal .site-modal__panel--tell{
width: 100%;
max-width: 640px;
max-height: 100%;
margin: 0;
/* Compressed 44/40 -> 30/26 so the whole dialog clears a laptop viewport without scrolling.
Duncan, 2026-09-22: "a little vertical compression and we will fit on the screen, the
Extraordinary spaces. Unforgettable occasions. is being clipped".
THE BOTTOM IS 100px, NOT 26px, AND THAT IS THE CALENDAR'S ROOM. The date picker is absolutely
positioned, so it adds nothing to this panel's in-flow height - but the panel is a scroll
container, and the overhang extends its scrollable area, which is what put a scrollbar on the
dialog the moment the picker opened. The date field sits about two-thirds down, so a ~355px
calendar hangs roughly 75px below the foot.
Reserved PERMANENTLY rather than only while the calendar is in the DOM. A :has() rule was
written first and Duncan chose against it - "the modal can be taller all the time it does not
need to grow", 2026-09-23. One layout beats two, and a dialog that changes size as you
interact with it is its own kind of wrong. So the blank space below the strapline when the
picker is closed is deliberate, and the compression above is what paid for it.
Kept as ONE declaration on purpose: an earlier version set this as a separate padding-bottom
rule further down the file, which would have silently out-ranked anything edited here. */
padding: 30px 40px 100px;
box-sizing: border-box;
display: block;
overflow-y: auto;
overscroll-behavior: contain;
background: #FAF9F7;
border-radius: 10px;
color: #24272F;
}
#tellModal .site-modal__close{
top: 14px;
right: 14px;
width: 40px;
height: 40px;
padding: 0;
font-size: 30px;
font-weight: 300;
line-height: 1;
color: #545559;
}
#tellModal .site-modal__close:hover{
color: var(--charcoal);
}
/* Header: mark, heading and intro stacked and centred, no box behind the mark. */
#tellModal .site-modal__header--tell{
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
padding: 0;
text-align: center;
}
/* Reset the shared .site-modal__logo-wrapper, which the schedule dialog positions absolutely
over a grey band. Scoped here so the schedule dialog is untouched. */
#tellModal .site-modal__logo-wrapper--tell{
position: static;
height: auto;
/* 18 -> 10 in the compression pass. The logo itself is left at 90px - Duncan asked for it
50% bigger on 2026-09-18 and shrinking it back would undo that. */
margin: 0 0 10px;
padding: 0;
background: none;
display: block;
}
#tellModal .site-modal__logo-wrapper--tell .site-modal__logo{
display: block;
height: 90px; /* Duncan, 2026-09-18: "logo needs to be 50% bigger" (was 60px) */
width: auto;
}
#tellModal .site-modal__title--tell{
margin: 0;
font-size: clamp(28px, 4.2vw, 40px);
font-weight: 400;
line-height: 1.15;
color: #000;
text-align: center;
}
#tellModal .site-modal__copy{
/* 10/30 -> 6/18 in the compression pass. */
margin: 6px 0 18px;
font-size: 16px;
line-height: 1.5;
color: #605F6A;
text-align: center;
}
/* SHORT VIEWPORTS: buy back the ~45px that makes the dialog scroll on an 800px-high laptop.
Duncan, 2026-10-07, choosing "trim it to fit" over living with the scrollbar.
WHAT IS NOT TOUCHED, because both are his explicit decisions and neither is mine to undo:
the 90px logo ("logo needs to be 50% bigger", 2026-09-18), and the fact that the calendar's
room is reserved PERMANENTLY rather than appearing when the picker opens ("the modal can be
taller all the time it does not need to grow", 2026-09-23). So every pixel here comes out of
padding and margins, never out of content.
THIS IS NOT THE :has() PATTERN HE REJECTED. That one changed size as you interacted with the
dialog, which is the part he objected to. A viewport-height query gives one fixed layout per
screen size and never moves while you use it.
The bottom reserve drops 100 -> 76, but the content above it also loses 22px, so the picker
moves up by almost exactly what the reserve loses: measured clearance below the calendar goes
from 22px to ~20px, i.e. unchanged in practice. The reserve is not being raided.
The breakpoint is 860px, not 800: .site-modal adds 14px of padding top and bottom, so an
800px viewport only offers 772px to the panel, and the headroom above that is deliberate. */
@media (max-height: 860px){
#tellModal .site-modal__panel--tell{
padding: 20px 40px 76px;
}
#tellModal .site-modal__logo-wrapper--tell{
margin-bottom: 6px;
}
#tellModal .site-modal__copy{
margin: 4px 0 12px;
}
}
#tellModal .site-modal__body{
padding: 0;
overflow: visible;
}
#tellModal .gform_wrapper,
#tellModal .gform_wrapper form{
margin: 0;
padding: 0;
}
/* The mockup carries no "* indicates required fields" line. Each required label shows its own
asterisk and each required input carries aria-required, so nothing is lost by dropping it. */
#tellModal .gform_required_legend{
display: none;
}
/* Fields */
#tellModal .gform_fields{
display: grid;
grid-template-columns: minmax(0, 1fr);
/* Row gap 22 -> 18 when the Notes field landed, then -> 14 in the compression pass. Column
gap is unchanged throughout; it is the vertical budget that is tight, never the horizontal. */
gap: 14px 20px;
margin: 0;
padding: 0;
list-style: none;
}
#tellModal .gfield{
margin: 0;
padding: 0;
min-width: 0;
}
#tellModal .gfield_label{
display: block;
/* 8 -> 6: five visible rows, so every 2px here is 10px off the dialog. */
margin: 0 0 6px;
font-size: 14px;
font-weight: 400;
line-height: 1.4;
color: #24272F;
}
/* "Full name *", as in the mockup. GF nests one .gfield_required span inside another, so the gap
goes on the outer one only (the label's direct child) - on both, it was doubled. */
#tellModal .gfield_label > .gfield_required{
margin-left: .25em;
}
#tellModal .gfield_required{
color: inherit;
}
#tellModal input[type="text"],
#tellModal input[type="email"],
#tellModal input[type="tel"],
#tellModal input[type="number"],
#tellModal select,
#tellModal textarea{
display: block;
width: 100%;
/* 46 -> 44 in the compression pass. Still a comfortable touch target; below about 40 it
would not be, so this is close to the floor and should not be trimmed further. */
height: 44px;
margin: 0;
padding: 0 14px;
box-sizing: border-box;
font: inherit;
font-size: 14px;
color: #24272F;
background-color: #FFF;
border: 1px solid #DCDCDC;
border-radius: 6px;
outline: none;
}
/* 72px, and it has to be an explicit HEIGHT rather than min-height.
Gravity Forms renders a textarea with a rows attribute, and `height: auto` honours it - the
field came out 243px tall, which is most of the dialog. min-height alone cannot pull it back
down; only a real height can. Measured, not assumed.
72px is about two lines, and resize:vertical means anyone with more to say can drag it taller.
The old value here was 120px, set when nothing on this form used a textarea. */
#tellModal textarea{
height: 72px;
min-height: 72px;
padding: 12px 14px;
resize: vertical;
}
/* The hint sits on the label's line, right-aligned, as the mockup has it.
Gravity Forms emits the description as a SIBLING of the label, not a child, so it cannot be
aligned by styling the label alone. Making the field a flex row puts them on one line and
drops the input onto the next, with no floats and no negative margins to break when the copy
changes length. descriptionPlacement is set to 'above' in create-tell-form.php, which is what
produces this order: label, description, input. */
#tellModal .gfield--type-textarea{
display: flex;
flex-wrap: wrap;
align-items: baseline;
column-gap: 12px;
}
#tellModal .gfield--type-textarea > .gfield_label{
flex: 0 1 auto;
}
#tellModal .gfield--type-textarea > .gfield_description{
flex: 0 1 auto;
margin-left: auto;
padding: 0;
font-size: 12.5px;
font-weight: 400;
letter-spacing: 0;
/* 4.85:1 on the panel. #8A8D93, which this carried when the field shipped, was 3.16 - below
AA for 12.5px text, and mine to fix. */
color: #6B6E75;
text-align: right;
}
#tellModal .gfield--type-textarea > .ginput_container{
flex: 0 0 100%;
}
#tellModal input::placeholder,
#tellModal textarea::placeholder{
color: #9B9DA3;
opacity: 1;
}
#tellModal input:focus,
#tellModal select:focus,
/* FOCUS INDICATOR. Every control here has outline:none, so THIS rule is the focus state -
there is nothing underneath it to fall back to, and WCAG 2.2 SC 2.4.11 wants 3:1.
Flat brass is 2.52:1 on a white field and fails. color-mix toward TRANSPARENT does not help:
it composites against whatever is behind, so it only ever gets lighter. Mixing toward the
charcoal token keeps it opaque - 80% reaches 3.51:1 - and still reads as brass rather than
brown. The translucent halo is kept as a second, outer ring so it looks as it did.
(Raised by the csg-corporate session, 2026-09-23; measured here before changing anything.) */
#tellModal textarea:focus{
border-color: color-mix(in srgb, var(--csg-brass) 80%, #1C1F22);
box-shadow: 0 0 0 2px color-mix(in srgb, var(--csg-brass) 80%, #1C1F22),
0 0 0 5px color-mix(in srgb, var(--csg-brass) 22%, transparent);
}
/* The select draws its own chevron, as in the mockup, rather than the platform's.
ITS HEIGHT MUST TRACK THE SHARED CONTROL HEIGHT ABOVE. This rule carries its own value, so it
does not follow when that one changes - it was 50 against inputs of 46, and the compression
pass on 2026-09-22 took the inputs to 44 and widened the gap to 6px before it was caught by
measuring the rendered heights rather than reading the CSS. Change one, change both. */
#tellModal select{
height: 44px;
padding-right: 44px;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1.5l6 6 6-6' stroke='%2324272F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 16px center;
background-size: 14px 9px;
cursor: pointer;
}
/* Guest count: the people icon from the mockup, drawn in the input, not in the markup. */
#tellModal .gfield--type-number input{
padding-right: 44px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='16' viewBox='0 0 18 16' fill='none' stroke='%239B9DA3' stroke-width='1.4' stroke-linecap='round'%3E%3Ccircle cx='6.5' cy='4.5' r='3'/%3E%3Cpath d='M1 15c0-3 2.5-5 5.5-5s5.5 2 5.5 5'/%3E%3Cpath d='M12 1.7a3 3 0 010 5.6M14 10.4c1.8.6 3 2.2 3 4.6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
background-size: 18px 16px;
-moz-appearance: textfield;
}
#tellModal .gfield--type-number input::-webkit-outer-spin-button,
#tellModal .gfield--type-number input::-webkit-inner-spin-button{
-webkit-appearance: none;
margin: 0;
}
/* The "1 to 5000" range hint is Gravity Forms' own, not the mockup's. It stays in the DOM, so
aria-describedby still reads it, and it reappears with the error it explains. */
#tellModal .gfield:not(.gfield_error) .instruction{
display: none;
}
/* =====================================================
DATE FIELD AND ITS CALENDAR
With Gravity Forms' CSS off, its calendar toggle rendered as an empty pill (its icon is a
Dashicons glyph, and Dashicons is not loaded on the front end) and the calendar it opens has no
styling at all. Both are styled here, following the rules GF ships for legacy markup
(legacy/css/formsmain.css) but in this site's colours.
===================================================== */
#tellModal .ginput_container_date{
position: relative;
}
#tellModal input.datepicker{
padding-right: 46px;
}
/* Square, and the same height as the input it sits in - see the note on the select above; this
is the second rule that has to track the shared control height by hand. */
#tellModal button.gform-datepicker-toggle{
position: absolute;
top: 0;
right: 0;
width: 44px;
height: 44px;
margin: 0;
padding: 0;
border: 0;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%239B9DA3' stroke-width='1.4'%3E%3Crect x='1.5' y='2.5' width='13' height='12' rx='1.5'/%3E%3Cpath d='M1.5 6.5h13M5 1v3M11 1v3'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
cursor: pointer;
}
#tellModal button.gform-datepicker-toggle .gform-datepicker-toggle-icon{
display: none;
}
#tellModal .gform-datepicker-calendar{
position: absolute;
z-index: 20;
margin-top: 6px;
padding: 14px;
width: auto;
max-width: 340px;
background: #FFF;
border: 1px solid #DCDCDC;
border-radius: 8px;
box-shadow: 0 12px 32px rgba(28,31,34,.14);
color: #24272F;
font-size: 13px;
}
#tellModal .gform-datepicker-calendar table{
border-collapse: collapse;
}
#tellModal .gform-datepicker-calendar th,
#tellModal .gform-datepicker-calendar td{
padding: 2px;
text-align: center;
}
#tellModal .gform-datepicker-calendar .nav.prev,
#tellModal .gform-datepicker-calendar .nav.next{
width: 30px;
font-size: 16px;
line-height: 1;
text-align: center;
color: #605F6A;
cursor: pointer;
}
#tellModal .gform-datepicker-calendar .nav.prev:hover,
#tellModal .gform-datepicker-calendar .nav.next:hover{
color: var(--charcoal);
}
/* MONTH AND YEAR SIDE BY SIDE, not stacked.
Duncan, 2026-09-23: "datepicker is opening calendar but month year are not side by side".
Gravity Forms stacks .monthSelector above .yearSelector, each a full-width row carrying its
own prev/next arrows. That costs a row of vertical height in a calendar measured at 400px
inside a 749px dialog - and the dialog is a scroll container, so the excess is CLIPPED rather
than spilling out. Measured with a real click: 101px cut off the bottom.
One line reclaims roughly 36px. Worth having, and NOT the whole fix - 101 less 36 still cuts
the last week. The real fix is opening the calendar upward when there is no room below, which
is a separate change and deliberately not in this rule. */
/* =====================================================
CALENDAR HEAD: MONTH AND YEAR ON ONE ROW
Duncan, 2026-09-23: "datepicker is opening calendar but month year are not side by side", and
then "please replicate how they have done theirs" - so this is the csg-corporate session's
implementation (their 9227f16), not a parallel one. Their reasoning is reproduced because it is
the part worth keeping, and three details in it are ones I had got wrong on my own attempts.
THE SELECTORS ARE TABLE ROWS. GF builds the whole calendar as one table and the two selectors
are
then
, each 1 + colspan-5 + 1 cells so
they line up with the 7 day columns. That rules out both obvious fixes: they cannot merge into
one real row, because two colspan-5 centre cells would ask for 14 columns against the grid's 7;
and they cannot be flexed in place, because a non-row child of a tbody is wrapped in an
anonymous row AND cell, which blows column 1 out to ~340px.
WHAT I HAD WRONG, for anyone comparing against the history here:
- display:grid on the calendar DIV cannot reach them at all; they are children of the table.
- float:left works but is width-sensitive - the two share a row at 55px each and stack at
152px - because a floated
is blockified and its containing block is not the obvious one.
- anchoring to the calendar div rather than the TABLE is a level too high. The table is what
the rows belong to, and putting position:relative there is what makes the offsets stable.
So both rows come out of flow into a strip reserved above the table with margin-top. The
reservation and the offset are the SAME custom property, so there is one number to tune. padding
would not work, because the table sets border-collapse:collapse and the collapsing model ignores
the table's own padding. The day grid's box tree is untouched, which matters: GF's rerenderTable
does container.innerHTML = content on every month change, so only a pure CSS fix survives.
SPECIFICITY IS DELIBERATE. These carry four classes to out-rank two existing rules in this file
without reaching for !important: the .nav.prev/.next rule (1,3,0) and table.calendar td span
(1,2,3). Do not simplify the selectors.
===================================================== */
#tellModal .gform-datepicker-calendar table.calendar{
--cal-head-h: 34px;
position: relative;
margin-top: var(--cal-head-h);
}
#tellModal .gform-datepicker-calendar table.calendar tr.monthSelector,
#tellModal .gform-datepicker-calendar table.calendar tr.yearSelector{
position: absolute;
top: calc(var(--cal-head-h) * -1);
display: flex;
align-items: center;
gap: 2px;
height: var(--cal-head-h);
}
/* EACH ROW ANCHORS TO ONE EDGE AND SIZES TO ITS OWN CONTENT.
Their first version set BOTH left:0 and right:0 and separated the two with justify-content. An
absolutely positioned box with both insets set STRETCHES, so both rows spanned the full strip
and sat exactly on top of each other; justify-content moved each