/* ============================================================
COLLEYVILLE LIONS — DESIGN TOKENS
Layer 1 primitives · Layer 2 semantic · Layer 3 element bindings
Fluid range 360 → 1350px (1080px content cap / 0.8 row width
= 1350: the viewport where the content column stops growing). Every fluid value is rem-anchored at
BOTH ends and in the interpolation term, so a browser font-size
setting scales the whole system.
Type scale: Major Third 1.25 (360px) → Perfect Fourth 1.333 (1350px)
============================================================ */
/* ---------- LAYER 1 — PRIMITIVES ------------------------- */
:root{
/* type · m = 16→20px */
--text-xs: clamp(0.7500rem, 0.7198rem + 0.1343vw, 0.8331rem);
--text-s: clamp(0.8000rem, 0.7500rem + 0.2222vw, 0.9375rem);
--text-m: clamp(1.0000rem, 0.9091rem + 0.4040vw, 1.2500rem);
--text-l: clamp(1.2500rem, 1.0985rem + 0.6733vw, 1.6666rem);
--text-xl: clamp(1.5625rem, 1.3226rem + 1.0660vw, 2.2221rem);
--text-2xl: clamp(1.9531rem, 1.5860rem + 1.6317vw, 2.9627rem);
--text-3xl: clamp(2.4414rem, 1.8927rem + 2.4385vw, 3.9502rem);
--text-4xl: clamp(3.0518rem, 2.2463rem + 3.5798vw, 5.2668rem);
--text-5xl: clamp(3.8147rem, 2.6483rem + 5.1840vw, 7.0223rem);
--text-6xl: clamp(4.7684rem, 3.0977rem + 7.4253vw, 9.3628rem);
/* line height · paired 1:1 with size, unitless so it tracks the rem */
--lh-xs: 1.50; --lh-s: 1.50; --lh-m: 1.55; --lh-l: 1.40; --lh-xl: 1.30;
--lh-2xl: 1.25; --lh-3xl: 1.20; --lh-4xl: 1.15; --lh-5xl: 1.10; --lh-6xl: 1.05;
/* tracking · paired 1:1 */
--tracking-xs: 0.05em; --tracking-s: 0.03em; --tracking-m: 0;
--tracking-l: -0.005em; --tracking-xl: -0.015em; --tracking-2xl: -0.02em;
--tracking-3xl: -0.025em;--tracking-4xl: -0.03em; --tracking-5xl: -0.035em;
--tracking-6xl: -0.04em;
/* weight */
--weight-xs: 300; --weight-s: 400; --weight-m: 500; --weight-l: 600;
--weight-xl: 700; --weight-2xl: 800; --weight-3xl: 900;
/* space · same ratios, m = 16→28px (whitespace opens faster than type) */
--space-xs: clamp(0.6400rem, 0.5148rem + 0.5566vw, 0.9844rem);
--space-s: clamp(0.8000rem, 0.6136rem + 0.8283vw, 1.3125rem);
--space-m: clamp(1.0000rem, 0.7273rem + 1.2121vw, 1.7500rem);
--space-l: clamp(1.2500rem, 0.8561rem + 1.7508vw, 2.3333rem);
--space-xl: clamp(1.5625rem, 0.9994rem + 2.5026vw, 3.1110rem);
--space-2xl: clamp(1.9531rem, 1.1550rem + 3.5470vw, 4.1478rem);
--space-3xl: clamp(2.4414rem, 1.3182rem + 4.9922vw, 5.5303rem);
--space-4xl: clamp(3.0518rem, 1.4802rem + 6.9847vw, 7.3736rem);
--space-5xl: clamp(3.8147rem, 1.6269rem + 9.7236vw, 9.8312rem);
--space-6xl: clamp(4.7684rem, 1.7359rem + 13.4780vw, 13.1079rem);
/* radius · fixed: a radius that changes per viewport reads as inconsistent */
--radius-xs: .125rem; --radius-s: .25rem; --radius-m: .5rem; --radius-l: .75rem;
--radius-xl: 1rem; --radius-2xl: 1.25rem; --radius-3xl: 1.5rem; --radius-4xl: 2rem;
--radius-5xl: 2.5rem; --radius-6xl: 999px;
/* border · px, never fluid — a 1.37px hairline smears across sub-pixels */
--border-xs: 1px; --border-s: 2px; --border-m: 3px;
--border-l: 4px; --border-xl: 6px; --border-2xl: 8px;
/* size · max-width boundaries */
--size-xs: 20rem; --size-s: 24rem; --size-m: 30rem; --size-l: 38rem;
--size-xl: 45rem; --size-2xl: 60rem; --size-3xl: 67.5rem;
--size-4xl: 75rem; --size-5xl: 90rem; --size-6xl: 100rem;
/* measure · line length in ch, tracks the actual font */
--measure-xs: 45ch; --measure-s: 55ch; --measure-m: 65ch;
--measure-l: 75ch; --measure-xl: 85ch;
/* z */
--z-xs: 1; --z-s: 10; --z-m: 100; --z-l: 200; --z-xl: 500; --z-2xl: 1000; --z-3xl: 9999;
/* motion · easing stays semantic; a curve has no size */
--duration-xs: 75ms; --duration-s: 150ms; --duration-m: 250ms;
--duration-l: 400ms; --duration-xl: 600ms; --duration-2xl: 800ms;
--stagger: 120ms;
--ease-out: cubic-bezier(.16, 1, .3, 1);
--ease-in-out: cubic-bezier(.65, 0, .35, 1);
/* elevation · the Divi Variable Manager has no shadow type, so it lives here */
--shadow-xs: 0 1px 2px rgba(13,34,64,.06);
--shadow-s: 0 2px 6px rgba(13,34,64,.07);
--shadow-m: 0 8px 22px rgba(13,34,64,.08);
--shadow-l: 0 14px 34px rgba(13,34,64,.10);
--shadow-xl: 0 24px 56px rgba(13,34,64,.14);
}
/* ---------- LAYER 2 — SEMANTIC ---------------------------
The only layer you edit to re-tune the design. Change one
line here and every h2 on the site follows. */
:root{
--title-page-size: var(--text-4xl);
--title-page-lh: var(--lh-4xl);
--title-page-track:var(--tracking-4xl);
--title-page-wt: var(--weight-xl);
--h1-size: var(--text-3xl); --h1-lh: var(--lh-3xl); --h1-track: var(--tracking-3xl); --h1-wt: var(--weight-xl);
--h2-size: var(--text-2xl); --h2-lh: var(--lh-2xl); --h2-track: var(--tracking-2xl); --h2-wt: var(--weight-xl);
--h3-size: var(--text-xl); --h3-lh: var(--lh-xl); --h3-track: var(--tracking-xl); --h3-wt: var(--weight-xl);
--h4-size: var(--text-l); --h4-lh: var(--lh-l); --h4-track: var(--tracking-l); --h4-wt: var(--weight-xl);
--h5-size: var(--text-m); --h5-lh: var(--lh-m); --h5-track: var(--tracking-m); --h5-wt: var(--weight-2xl);
--h6-size: var(--text-s); --h6-lh: var(--lh-s); --h6-track: var(--tracking-s); --h6-wt: var(--weight-2xl);
--body-size: var(--text-m); --body-lh: var(--lh-m); --body-track: var(--tracking-m); --body-wt: var(--weight-s);
--lead-size: var(--text-l); --lead-lh: var(--lh-l); --lead-track: var(--tracking-l);
--caption-size: var(--text-s); --caption-lh: var(--lh-s);
--eyebrow-size: var(--text-xs); --eyebrow-lh: var(--lh-xs); --eyebrow-track: var(--tracking-xs); --eyebrow-wt: var(--weight-3xl);
--button-size: var(--text-s); --button-lh: var(--lh-s); --button-track: var(--tracking-s); --button-wt: var(--weight-2xl);
/* NOTE: do NOT define --content-width or --content-max-width here.
Divi 5 owns both natively — it ships `:root{--content-width:80%;
--content-max-width:1080px}` and reads them in
`.et_pb_row:not([class*=et_flex_column])`. Redefining either at :root
is the same specificity, so the winner is decided by load order, and
a length value would make every row a fixed width and break mobile.
To change site width, edit Divi's setting / the Theme Builder. */
}
/* ---------- LAYER 3 — ELEMENT BINDINGS -------------------
Set the tag on the module (H1–H6 presets); typography follows
from here. Nothing below needs a per-module override.
SPECIFICITY, measured against this site's compiled CSS:
Divi heading .et_pb_heading_0 .et_pb_heading_container h2 (0,2,1)
Divi button body #page-container .et_pb_section .et_pb_button_0
= 1 ID + 2 classes + 1 element (1,2,1) + !important
Heading DEFAULTS run at (0,1,1) — deliberately BELOW Divi's
per-module output, so a size set on a module in the Visual
Builder still wins. The defaults only fill in where nothing
was set. The .text-* classes sit ABOVE both, at (0,4,1), and
are the sanctioned way to force a step.
The button rule adds the `a` element to reach (1,2,2), which is the
only way to beat Divi's ID-carrying selector — !important alone
cannot, because both sides are !important and specificity decides.
Binding to .et_pb_module rather than .et_pb_heading_container is
deliberate: every Divi core AND DiviFlash module root carries it,
so one rule covers Advanced Heading, Advanced Blurb, FAQ, Toggle,
Post Grid and the rest without naming each class. */
.et-l :is(h1,h2,h3,h4,h5,h6){ text-wrap: balance; }
.et-l :is(p,li,dd,figcaption){ text-wrap: pretty; }
.et-l h1{
font-size: var(--h1-size); line-height: var(--h1-lh);
letter-spacing: var(--h1-track);
}
.et-l h2{
font-size: var(--h2-size); line-height: var(--h2-lh);
letter-spacing: var(--h2-track);
}
.et-l h3{
font-size: var(--h3-size); line-height: var(--h3-lh);
letter-spacing: var(--h3-track);
}
.et-l h4{
font-size: var(--h4-size); line-height: var(--h4-lh);
letter-spacing: var(--h4-track);
}
.et-l h5{
font-size: var(--h5-size); line-height: var(--h5-lh);
letter-spacing: var(--h5-track);
}
.et-l h6{
font-size: var(--h6-size); line-height: var(--h6-lh);
letter-spacing: var(--h6-track);
}
/* --- size overrides -------------------------------------------
Tags carry SEMANTICS: pick h1-h6 by document structure, one h1
per page. The rules above give every tag its default size.
When a heading needs a different size than its level implies,
add one of these classes to the module — named for the scale
step itself, so the class says exactly what you get, and its
paired line-height and tracking come with it.
tag = h3 (correct outline)
class = text-l (the size you want)
On the module wrapper, so .et_pb_module.text-l = (0,4,1) and
beats the plain tag rule at (0,3,1). */
.et-l .et_builder_inner_content .et_pb_module.text-xs :is(h1,h2,h3,h4,h5,h6,p,li,dd){
font-size: var(--text-xs); line-height: var(--lh-xs); letter-spacing: var(--tracking-xs);
}
.et-l .et_builder_inner_content .et_pb_module.text-s :is(h1,h2,h3,h4,h5,h6,p,li,dd){
font-size: var(--text-s); line-height: var(--lh-s); letter-spacing: var(--tracking-s);
}
.et-l .et_builder_inner_content .et_pb_module.text-m :is(h1,h2,h3,h4,h5,h6,p,li,dd){
font-size: var(--text-m); line-height: var(--lh-m); letter-spacing: var(--tracking-m);
}
.et-l .et_builder_inner_content .et_pb_module.text-l :is(h1,h2,h3,h4,h5,h6,p,li,dd){
font-size: var(--text-l); line-height: var(--lh-l); letter-spacing: var(--tracking-l);
}
.et-l .et_builder_inner_content .et_pb_module.text-xl :is(h1,h2,h3,h4,h5,h6,p,li,dd){
font-size: var(--text-xl); line-height: var(--lh-xl); letter-spacing: var(--tracking-xl);
}
.et-l .et_builder_inner_content .et_pb_module.text-2xl :is(h1,h2,h3,h4,h5,h6,p,li,dd){
font-size: var(--text-2xl); line-height: var(--lh-2xl); letter-spacing: var(--tracking-2xl);
}
.et-l .et_builder_inner_content .et_pb_module.text-3xl :is(h1,h2,h3,h4,h5,h6,p,li,dd){
font-size: var(--text-3xl); line-height: var(--lh-3xl); letter-spacing: var(--tracking-3xl);
}
.et-l .et_builder_inner_content .et_pb_module.text-4xl :is(h1,h2,h3,h4,h5,h6,p,li,dd){
font-size: var(--text-4xl); line-height: var(--lh-4xl); letter-spacing: var(--tracking-4xl);
}
.et-l .et_builder_inner_content .et_pb_module.text-5xl :is(h1,h2,h3,h4,h5,h6,p,li,dd){
font-size: var(--text-5xl); line-height: var(--lh-5xl); letter-spacing: var(--tracking-5xl);
}
.et-l .et_builder_inner_content .et_pb_module.text-6xl :is(h1,h2,h3,h4,h5,h6,p,li,dd){
font-size: var(--text-6xl); line-height: var(--lh-6xl); letter-spacing: var(--tracking-6xl);
}
/* --- the page title opts UP by class, not by an oversized tag --- */
.et-l .et_builder_inner_content .is-page-title h1{
font-size: var(--title-page-size); line-height: var(--title-page-lh);
letter-spacing: var(--title-page-track); font-weight: var(--title-page-wt);
}
/* --- body copy --- */
/* Body copy default. Set on the CONTAINER, never on p/li/dd directly:
Divi puts a text module's size on .et_pb_text_inner and lets the
inherit it, and ANY direct declaration on the
beats an inherited
value no matter how low its specificity. Declaring it here lets it
cascade in as a default and lose to every module that sets its own. */
.et-l .et_builder_inner_content{
font-size: var(--body-size); line-height: var(--body-lh); letter-spacing: var(--body-track);
}
.et-l .et_builder_inner_content .is-lead :is(p,li){
font-size: var(--lead-size); line-height: var(--lead-lh);
}
.et-l .et_builder_inner_content .is-eyebrow p{
font-size: var(--eyebrow-size); line-height: var(--eyebrow-lh);
letter-spacing: var(--eyebrow-track); font-weight: var(--eyebrow-wt);
text-transform: uppercase;
}
.et-l .et_builder_inner_content .is-caption p,
.et-l .et_builder_inner_content figcaption{
font-size: var(--caption-size); line-height: var(--caption-lh);
}
/* --- buttons ---------------------------------------------------
Colour, border, radius and padding come from the Primary /
Secondary / Outline presets. Typography lives here so the scale
has ONE source. (1,2,2) beats Divi's (1,2,1). */
body #page-container .et_pb_section a.et_pb_button,
body #page-container .et_pb_section a.df_button_wrapper,
body #page-container .et_pb_section .df_button_left,
body #page-container .et_pb_section .df_button_right{
font-size: var(--button-size) !important;
line-height: var(--button-lh) !important;
letter-spacing: var(--button-track) !important;
font-weight: var(--button-wt) !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
}
/* --- button groups must wrap before their labels do ------------
A Divi group holding two buttons is display:flex/nowrap with
flex-shrink:1, so below ~430px it squeezes each button to ~100px
and the LABEL wraps to 3-4 lines instead of the row wrapping.
Measured on the home hero at 360px: 100.6x72.4 and 100x91.6.
Let the container wrap; each button then takes its natural width
and the type keeps shrinking via its own clamp. Unscoped on
purpose: a narrow COLUMN hits this at any viewport width. */
.et-l .et_builder_inner_content .et_pb_group:has(> .et_pb_button_module_wrapper){
flex-wrap: wrap !important;
}
.et-l .et_builder_inner_content .et_pb_button_module_wrapper{
flex: 0 0 auto;
}
/* --- readable measure on long-form text --- */
.et-l .is-prose :is(p,li){ max-width: var(--measure-m); }
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}