:root:is(html) {
--bdr-stl: solid; /* { friendly: 'Border Style', group: 'Borders' } */
--bdr-w: 1px; /* { min: 1, max: 4, step: 1, friendly: 'Border Width', group: 'Borders' } */
--bdr-clr-o: 1; /* { min: 0.05, max: 1, step: 0.05, friendly: 'Border Opacity', group: 'Borders' } */
--bg-bx-o: 1; /* { min: .2, max: 1, step: 0.05, friendly: 'Like/Unlike Box Opacity', group: 'Calculations' } */
--img-fg-sat: 1; /* { min: 0, max: 1, step: 0.1, friendly: 'Saturation - Foreground Imagery', group: 'Images' } */
--img-fg-sep: 0; /* { min: 0, max: 1, step: 0.1, friendly: 'Sepia - Foreground Imagery', group: 'Images' } */
--img-fg-brt: 1; /* { min: 0, max: 1.5, step: 0.1, friendly: 'Brightness - Foreground Imagery', group: 'Images' } */
--img-fg-con: 1; /* { min: 0, max: 1.5, step: 0.1, friendly: 'Contrast - Foreground Imagery', group: 'Images' } */
--img-fg-blr: 0px; /* { min: 0, max: 10, step: .1, friendly: 'Blur - Foreground Imagery', group: 'Images' } */
--img-fg-o: 1; /* { min: .2, max: 1, step: 0.05, friendly: 'Opacity - Foreground Imagery', group: 'Images' } */
--img-bg-o: 0.2; /* { min: .2, max: 1, step: 0.05, friendly: 'Opacity - Background Imagery', group: 'Images' } */
--img-bg-sat: 1; /* { min: 0, max: 1, step: 0.1, friendly: 'Saturation - Background Imagery', group: 'Images' } */
--img-bg-sep: 0; /* { min: 0, max: 1, step: 0.1, friendly: 'Sepia - Background Imagery', group: 'Images' } */
--img-bg-brt: 1; /* { min: 0, max: 1.5, step: 0.1, friendly: 'Brightness - Background Imagery', group: 'Images' } */
--img-bg-con: 1; /* { min: 0, max: 1.5, step: 0.1, friendly: 'Contrast - Background Imagery', group: 'Images' } */
--img-bg-blr: 0px; /* { min: 0, max: 10, step: .1, friendly: 'Blur - Background Imagery', group: 'Images' } */
--dk-ptrn-bg: url("/media/patterns/light-pattern.png"); /* { readonly: true } */
--dk-ptrn-o: 1; /* { readonly: true } */
--dk-ptrn-blnd: unset; /* { readonly: true } */
--lt-ptrn-bg: url("/media/patterns/dark-pattern.png"); /* { readonly: true } */
--lt-ptrn-o: 1; /* { readonly: true } */
--lt-ptrn-blnd: unset; /* { readonly: true } */
--mstg-img-bg-o: 0.2; /* { min: .2, max: 1, step: 0.05, friendly: 'Opacity - Mainstage Background Imagery', group: 'Images' } */
--mstg-img-bg-sat: 1; /* { min: 0, max: 1, step: 0.1, friendly: 'Saturation - Mainstage Background Imagery', group: 'Images' } */
--mstg-img-bg-sep: 0; /* { min: 0, max: 1, step: 0.1, friendly: 'Sepia - Mainstage Background Imagery', group: 'Images' } */
--mstg-img-bg-brt: 1; /* { min: 0, max: 1.5, step: 0.1, friendly: 'Brightness - Mainstage Background Imagery', group: 'Images' } */
--mstg-img-bg-con: 1; /* { min: 0, max: 1.5, step: 0.1, friendly: 'Contrast - Mainstage Background Imagery', group: 'Images' } */
--mstg-img-bg-blr: 0px; /* { min: 0, max: 10, step: .1, friendly: 'Blur - Mainstage Background Imagery', group: 'Images' } */
--vid-bg-o: .4; /* { min: .2, max: 1, step: 0.05, friendly: 'Video Background Opacity', group: 'Calculations' } */
--btn-txt-clr-lt: var(--text-alt); /* { friendly: 'Light Theme - Button V1 Text Color', group: 'Colors' } */
--btn-bg-clr-lt: var(--buttons); /* { friendly: 'Light Theme - Button V1 BG Color', group: 'Colors' } */
--btn-txt-clr-lt-alt: var(--text-alt); /* { friendly: 'Light Theme - Button V1 Alt Text Color', group: 'Colors' } */
--btn-bg-clr-lt-alt: var(--main-bg-alt); /* { friendly: 'Light Theme - Button V1 Alt BG Color', group: 'Colors' } */
--btn-txt-clr-dk: var(--text-alt); /* { friendly: 'Dark Theme - Button V1 Text Color', group: 'Colors' } */
--btn-bg-clr-dk: var(--buttons); /* { friendly: 'Dark Theme - Button V1 BG Color', group: 'Colors' } */
--btn-txt-clr-dk-alt: var(--text); /* { friendly: 'Dark Theme - Button V1 Alt Text Color', group: 'Colors' } */
--btn-bg-clr-dk-alt: var(--main-bg); /* { friendly: 'Dark Theme - Button V1 Alt BG Color', group: 'Colors' } */
--frm-bdr-stl: solid; /* { friendly: 'Form Input Border Style', group: 'Borders' } */
--frm-bdr-w: 2px; /* { min: 1, max: 4, step: 1, friendly: 'Form Input Border Width', group: 'Borders' } */
--frm-bdr-rds: 0.44rem; /* { min: 0, max: 5, step: 0.1, friendly: 'Form Input Border Radius', group: 'Borders' } */
--frm-bdr-o: 0.4; /* { min: 0.05, max: 1, step: 0.05, friendly: 'Form Input Border Opacity', group: 'Borders' } */
--flx-gap: 3.556rem; /* { min: 4, max: 9, step: 0.1, friendly: 'Flex Gap Amount',group: 'Spacing' } */
--g-cnt-k-ttl-m: 0.8rem; /* { min: 0.2, max: 2, step: 0.05, friendly: 'Kicker + Title Margin', group: 'Spacing' } */
--g-cnt-ttl-ttl-m: 0.65rem; /* { min: 0.2, max: 1, step: 0.05, friendly: 'Title Margin', group: 'Spacing' } */
--g-cnt-ttl-cnt-m: 1rem; /* { min: 0.5, max: 1.5, step: 0.05, friendly: 'Content Margin', group: 'Spacing' } */
--g-cnt-full-img-m: 1.5rem; /* { min: 1, max: 3, step: 0.05, friendly: 'Full Content Image Top/Bottom Margin', group: 'Spacing' } */
--g-trn-sp: .3s; /* { min: 0, max: 1, step: 0.05, friendly: 'Default Transition Speed', group: 'Other' } */
--g-trn-tf: ease; /* { friendly: 'Default Transition Timing Function', group: 'Other' } */
--grd-sp: 1.778rem; /* { min: 1, max: 2.5, step: 0.001, friendly: 'Grid Display Item Spacing', group: 'Spacing' } */
--grd-sml-mpt: .5; /* { min: 0.1, max: 1, step: 0.1, friendly: 'Grid Small Multiplier', group: 'Spacing' } */
--grd-lrg-mpt: 1.5; /* { min: 1, max: 2, step: 0.1, friendly: 'Grid Large Multiplier', group: 'Spacing' } */
--grd-sp-sml: calc(var(--grd-sp) * var(--grd-sml-mpt)); /* { readonly: true } */
--grd-sp-lrg: calc(var(--grd-sp) * var(--grd-lrg-mpt)); /* { readonly: true } */
--grd-sp-dyn: var(--grd-sp); /* { readonly: true } */
--mn-t: 76rem; /* { min: 15, max: 100, step: 1, friendly: 'Main Thin Value', group: 'Other' } */
--mn-w: 100rem; /* from Figma Grid/Main Width: 1600px { min: 15, max: 100, step: 1, friendly: 'Main Wide Value', group: 'Other' } */
--mn-f: 22.5rem; /* { min: 15, max: 100, step: .1, friendly: 'Main Full Value', group: 'Other' } */
--mn_ch-w: 72ch; /* { readonly: true } */
--mn-sys: var(--mn-t); /* { readonly: true } */
--mn_min: calc(var(--vw_) * 0.7); /* { readonly: true } */
--mn_min-t: calc(var(--vw_) * 0.41); /* { readonly: true } */
--mn_max: calc(var(--vw_) * 0.849); /* { readonly: true } */
--st-w: 1920px; /* { friendly: 'Site Outer Max Width', group: 'Other' } */
--vw_: min(100vw, var(--st-w)); /* { readonly: true } */
--py-i-s: 1.4rem; /* { type: 'range', min: 1, max: 3, step: 0.1, friendly: 'Payment Icon Font Size', group: 'Calculations' } */
--rvw-str-clr: #FFD80A; /* { friendly: 'Review Star Colors', group: 'Colors' } */
--rvw-str-s: 1rem; /* { min: 1, max: 4, step: 0.1, friendly: 'Review Star Font Size', type: 'range' } */
--rvw-str-o: .5; /* { min: .2, max: .9, step: 0.001, friendly: 'Review Opacity For Inactive Stars' } */
--sl-trn-sp: .6s; /* { min: .3, max: 2, step: 0.1, friendly: 'Scrolling List Transition Speed', group: 'Other' } */
--sl-trn-tf: ease; /* { friendly: 'Scrolling List Timing Function', group: 'Other' } */
--sl-sa-s: 1.2rem; /* { type: 'range', min: 1, max: 3, step: 0.1, friendly: 'Scrolling Arrows Font Size', group: 'Calculations' } */
--so-i-s: 1.4rem; /* { type: 'range', min: 1, max: 3, step: 0.1, friendly: 'Social Media Icon Font Size', group: 'Calculations' } */
--sp-hp: 2rem; /* { min: 60, max: 120, step: 1, friendly: 'Horizontal Padding Desktop', group: 'Spacing' } */
--sp-vp: 3.5rem; /* { min: 60, max: 125, step: 1, friendly: 'Vertical Padding Desktop', group: 'Spacing' } */
--sp-qk: 1rem; /* { min: 0.5, max: 1.5, step: 0.25, friendly: 'Quick Spacing', group: 'Spacing' } */
--stcky-tp: 1rem; /* { min: 0, max: 5, step: 0.25, friendly: 'Sticky Column Top Offset', group: 'Spacing' } */
--sp-vm: 45; /* { min: 30, max: 60, step: 1, friendly: 'Vertical Margin Desktop', group: 'Spacing' } */
--sp-vm-mbl: 30; /* { min: 20, max: 40, step: 1, friendly: 'Vertical Margin Mobile', group: 'Spacing' } */
--sp-vp-min: 6.4%; /* { readonly: true } */
--sp-vp-max: 10%; /* { readonly: true } */
--sp-vp-mn: 6.4; /* { readonly: true } */
--sp-vp-mx: 10; /* { readonly: true } */
--sp-hp-min: 8%; /* { readonly: true } */
--sp-hp-max: 10%; /* { readonly: true } */
--sp-hp-mn: 8%; /* { readonly: true } */
--sp-hp-mx: 10%; /* { readonly: true } */
--sp-vp-mmc: clamp(calc(var(--sp-vp-mn) * 1vw), var(--sp-vp), calc(var(--sp-vp-mx) * 1vw)); /* { readonly: true } */
--sp-vm-clc: calc((var(--sp-vm-mbl) * 1px) + (var(--sp-vm) - var(--sp-vm-mbl)) * ((var(--vw_) - 320px) / (1920 - 320))); /* { readonly: true } */
--tag-pd-v: 0.4em ; /* { min: 0.3, max: 1, step: 0.1, friendly: 'Tag Vertical Padding', group: 'Calculations' } */
--tag-pd-h: 1em; /* { min: 0.3, max: 1.5, step: 0.1, friendly: 'Tag Horizontal Padding', group: 'Calculations' } */
--tag-bdr-rds: 5em; /* { min: 0, max: 5, step: 0.1, friendly: 'Tag Border Radius', group: 'Calculations' } */
--bg-bx-bdr-thc: 4px; /* { min: 1, max: 20, step: 1, friendly: 'BG Box Border Width' } */
--bg-bx-bdr-clr-o: 1; /* { min: 0.1, max: 1, step: .1, friendly: 'BG Box Border Opacity' } */
--three-8ths: 36.4%; /* Override to match Design */
}
main:has( > section:last-child:is([data-colors="primary-light"][class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="primary-light"][class*="pd_v"]:not(.bg-image):first-child,
main:has( > section:last-child:is([data-colors="alternate-light"][class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="alternate-light"][class*="pd_v"]:not(.bg-image):first-child,
main:has( > section:last-child:is([data-colors="primary-dark"][class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="primary-dark"][class*="pd_v"]:not(.bg-image):first-child,
main:has( > section:last-child:is([data-colors="alternate-dark"][class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="alternate-dark"][class*="pd_v"]:not(.bg-image):first-child,
main:has( > form:last-child > section:is([data-colors="primary-light"][class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="primary-light"][class*="pd_v"]:not(.bg-image):first-child,
main:has( > form:last-child > section:is([data-colors="alternate-light"][class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="alternate-light"][class*="pd_v"]:not(.bg-image):first-child,
main:has( > form:last-child > section:is([data-colors="primary-dark"][class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="primary-dark"][class*="pd_v"]:not(.bg-image):first-child,
main:has( > form:last-child > section:is([data-colors="alternate-dark"][class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="alternate-dark"][class*="pd_v"]:not(.bg-image):first-child{
padding-top: 0;
}
/* Waiting on PR */
.tag:not(:has(a)), .tag a {
border: var(--bdr-stl) var(--bdr-w) hsl(from var(--text-color) h s l / var(--bdr-clr-o));
}
/* END Waiting on PR */
:where(.sd-zn, .cnt-zn) > * + * {
margin-top: calc(var(--sp-vm-clc)* 1.6);
}
.grd:has(> [data-item="nr"]) {
--itm-val: 100 !important;
+ div {
display: none;
}
}
.pg-nv.start.end {
display: none;
}
.bg-bx.pattern-bg {
background-color: transparent;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: var(--bg-bx-pattern-img);
opacity: .5;
background-size: 200px 200px;
background-position: top left;
background-repeat: repeat;
mix-blend-mode: multiply;
z-index: -1;
}
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: var(--inner-theme);
z-index: -2;
}
}
/* Type scale pinned to the comps: the framework's fluid root tops out at 17px
(700–1919) and 18px (>=1920), but the Castle comps are drawn on a 16px base
at 1920 — these multipliers bring both tiers back to ~16px. (!important
because this file loads before global.css's tier defaults.) */
@media screen and (width >= 700px) {
:root {
--fnt-s-mtp: 0.9375 !important;
}
}
@media screen and (width >= 1920px) {
:root {
--fnt-s-mtp: 0.89 !important;
}
}
@media screen and (width >= 1280px) {
:root {
--mn_min: calc(var(--vw_) * 0.6); /* { readonly: true } */
}
/* Sets up system module widths to be easier to change */
[class*="mn_"].sys_w {
max-width: clamp(var(--mn_min), var(--mn-sys), var(--mn_max));
}
/* normal */
section[data-colors="primary-light"][class*="pd_v"]:not(.bg-image) + section[data-colors="primary-light"][class*="pd_v"]:not(.bg-image),
section[data-colors="alternate-light"][class*="pd_v"]:not(.bg-image) + section[data-colors="alternate-light"][class*="pd_v"]:not(.bg-image),
section[data-colors="primary-dark"][class*="pd_v"]:not(.bg-image) + section[data-colors="primary-dark"][class*="pd_v"]:not(.bg-image),
section[data-colors="alternate-dark"][class*="pd_v"]:not(.bg-image) + section[data-colors="alternate-dark"][class*="pd_v"]:not(.bg-image) {
padding-top: 0;
}
/* plus a form */
section[data-colors="primary-light"][class*="pd_v"]:not(.bg-image) + form section[data-colors="primary-light"][class*="pd_v"]:not(.bg-image),
section[data-colors="alternate-light"][class*="pd_v"]:not(.bg-image) + form section[data-colors="alternate-light"][class*="pd_v"]:not(.bg-image),
section[data-colors="primary-dark"][class*="pd_v"]:not(.bg-image) + form section[data-colors="primary-dark"][class*="pd_v"]:not(.bg-image),
section[data-colors="alternate-dark"][class*="pd_v"]:not(.bg-image) + form section[data-colors="alternate-dark"][class*="pd_v"]:not(.bg-image) {
padding-top: 0;
}
/* form plus (Doesn't work in FF) */
form:has( section[data-colors="primary-light"][class*="pd_v"]:not(.bg-image) ) + section[data-colors="primary-light"][class*="pd_v"]:not(.bg-image),
form:has( section[data-colors="alternate-light"][class*="pd_v"]:not(.bg-image) ) + section[data-colors="alternate-light"][class*="pd_v"]:not(.bg-image),
form:has( section[data-colors="primary-dark"][class*="pd_v"]:not(.bg-image) ) + section[data-colors="primary-dark"][class*="pd_v"]:not(.bg-image),
form:has( section[data-colors="alternate-dark"][class*="pd_v"]:not(.bg-image) ) + section[data-colors="alternate-dark"][class*="pd_v"]:not(.bg-image) {
padding-top: 0;
}
/* form plus form (Doesn't work in FF) */
form:has( section[data-colors="primary-light"][class*="pd_v"]:not(.bg-image) ) + form > section[data-colors="primary-light"][class*="pd_v"]:not(.bg-image) ,
form:has( section[data-colors="alternate-light"][class*="pd_v"]:not(.bg-image) ) + form > section[data-colors="alternate-light"][class*="pd_v"]:not(.bg-image),
form:has( section[data-colors="primary-dark"][class*="pd_v"]:not(.bg-image) ) + form > section[data-colors="primary-dark"][class*="pd_v"]:not(.bg-image) ,
form:has( section[data-colors="alternate-dark"][class*="pd_v"]:not(.bg-image) ) + form > section[data-colors="alternate-dark"][class*="pd_v"]:not(.bg-image) {
padding-top: 0;
}
}
@media screen and (width < 1280px) {
:root {
--sp-vp-max-mbl: 16%; /* { readonly: true } */
}
/* Footer padding if last panel is full-mbl */
main:has( > section:last-child:is([data-colors="primary-light"].full-mbl[class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="primary-light"][class*="pd_v"]:not(.bg-image):first-child,
main:has( > section:last-child:is([data-colors="alternate-light"].full-mbl[class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="alternate-light"][class*="pd_v"]:not(.bg-image):first-child,
main:has( > section:last-child:is([data-colors="primary-light"].wht-bg.full-mbl[class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="primary-light"].wht-bg[class*="pd_v"]:not(.bg-image):first-child,
main:has( > section:last-child:is([data-colors="primary-dark"].full-mbl[class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="primary-dark"][class*="pd_v"]:not(.bg-image):first-child,
main:has( > section:last-child:is([data-colors="alternate-dark"].full-mbl[class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="alternate-dark"][class*="pd_v"]:not(.bg-image):first-child,
main:has( > section:last-child:is([data-colors="primary-dark"].blk-bg.full-mbl[class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="primary-dark"].blk-bg[class*="pd_v"]:not(.bg-image):first-child,
main:has( > form:last-child > section:is([data-colors="primary-light"].full-mbl[class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="primary-light"][class*="pd_v"]:not(.bg-image):first-child,
main:has( > form:last-child > section:is([data-colors="alternate-light"].full-mbl[class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="alternate-light"][class*="pd_v"]:not(.bg-image):first-child,
main:has( > form:last-child > section:is([data-colors="primary-light"].wht-bg.full-mbl[class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="primary-light"].wht-bg[class*="pd_v"]:not(.bg-image):first-child,
main:has( > form:last-child > section:is([data-colors="primary-dark"].full-mbl[class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="primary-dark"][class*="pd_v"]:not(.bg-image):first-child,
main:has( > form:last-child > section:is([data-colors="alternate-dark"].full-mbl[class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="alternate-dark"][class*="pd_v"]:not(.bg-image):first-child,
main:has( > form:last-child > section:is([data-colors="primary-dark"].blk-bg.full-mbl[class*="pd_v"]:not(.bg-image))) + footer > section[data-colors="primary-dark"].blk-bg[class*="pd_v"]:not(.bg-image):first-child {
padding-top: var(--pd-v);
}
}
/* ── Gutter pattern (visible past the 1920px body cap) ────────────────────────
body is centred and capped at --st-w (1920px), so on wider screens the html
element shows through on both sides. Those gutters get a black field with the
Castle "C" watermark tiled over it.
The tile (watermark-tile.png) is a 2x2 grid of cells: mark in the top-left
cell, mark in the bottom-right, the other two empty. Repeating it produces the
alternating/checkerboard rhythm rather than straight rows and columns. It is
drawn at 2x (720x800) and scaled down by background-size for retina; the mark
itself is transparent gold, so the black comes from the html background and
the subtlety comes from --gtr-mrk-o, not from a baked-in colour.
background-size is 280px wide on purpose: the gutter is only (100vw - 1920px)/2,
i.e. 320px on a 2560px screen, so a wider tile would clip one of its two columns
and lose the alternation. Centring the pattern keeps the left and right gutters
symmetric instead of letting the repeat start flush at the viewport's left. */
html {
/* Deliberately NOT var(--black): colors.css sets --dk-alt-bg to #000000, so an
"alternate-dark" section (the blog panel, among others) is pure black and the
page edge vanishes into a black gutter. This sits clearly below --dk-bg
(#3b4046) and clearly above #000, so it collides with neither palette dark. */
--gtr-bg: #1c1c1c; /* { friendly: 'Gutter Background', group: 'Colors' } */
--gtr-mrk-o: .05; /* { type: 'range', min: 0, max: .5, step: .01, friendly: 'Gutter Watermark Opacity', group: 'Other' } */
}
body {
background-color: var(--main-bg, #fff);
color: #fff;
position: relative;
}
@media (min-width: 1920px) {
/* :root only to raise specificity — global.css loads AFTER this file in
_site.ctx and sets a bare `html { background: var(--main-bg) }`, which at
equal specificity would win on source order and repaint the gutters white.
Scoped inside the media query so that below the cap, where body spans the
full width, a page shorter than the viewport keeps its normal background
below the footer instead of showing a black band. */
html:root {
background-color: var(--gtr-bg, #1c1c1c);
}
html::before {
content: '';
position: fixed;
inset: 0;
z-index: -1;
background-image: url(/media/logos/watermark-tile.png);
background-size: 280px 311px;
background-position: center top;
background-repeat: repeat;
opacity: var(--gtr-mrk-o);
pointer-events: none;
}
/* overflow must go visible for the shadow to escape the body box. Pure black
on purpose: it is darker than --gtr-bg, so it reads as a vignette against
the gutter and gives the page a soft edge even where a black section runs
right up to it. (Against the old black gutter this was invisible.) */
html body {
overflow: visible;
box-shadow: 0 0 40px 8px hsl(from var(--black, #000) h s l / .55);
}
}