/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&display=swap');
/* ---- Brand tokens — change a colour here, it updates everywhere ---- */
:root {
--warm-white: #FFF1E9;
--coral: #FF5400;
--charcoal: #545454;
--gold: #F4C21C;
--ink: #545454; /* deepen to e.g. #3a3a3a if you want headings heavier */
--display-font: 'Anton', Impact, sans-serif;
--body-font: 'Libre Baskerville', Georgia, serif;
}
/* ---- Canvas: warm white everywhere (also the live test — if this doesn't
show up, Custom CSS isn't being applied and it's a setup issue) ---- */
body,
#siteWrapper,
.page-section .section-background { background-color: var(--warm-white) !important; }
body { color: var(--charcoal); }
/* ---- Body copy: refined serif, generous line-height ---- */
p, li,
.sqsrte-large,
.sqs-block-html p {
font-family: var(--body-font);
color: var(--charcoal);
font-size: 1.05rem;
line-height: 1.75;
letter-spacing: 0.01em;
}
/* ---- Display headings: Anton carries the boldness ---- */
h1, h2 {
font-family: var(--display-font) !important;
color: var(--ink);
text-transform: uppercase;
font-weight: 400;
line-height: 1.02;
letter-spacing: 0.005em;
}
/* Big hero / statement headlines breathe a little wider */
h1 { font-size: clamp(2.6rem, 7vw, 5.5rem); }
h2 { font-size: clamp(2rem, 4.5vw, 3.6rem); }
/* Smaller headings stay serif on purpose — the sans/serif contrast IS the personality */
h3, h4 {
font-family: var(--body-font) !important;
color: var(--ink);
font-weight: 700;
line-height: 1.25;
}
/* Wrap a word in italics in the editor to flush it coral for emphasis */
h1 em, h2 em, h3 em { color: var(--coral); font-style: italic; }
/* ---- Links ---- */
a { color: var(--coral); transition: color 0.3s ease; }
a:hover { color: var(--ink); }
/* ---- BUTTONS — editorial, squared, confident ----
In the editor, set a button to "Primary" for the coral fill,
or "Secondary" for the gold-hairline outline. Both are styled below. */
.sqs-block-button-element--primary,
.sqs-button-element--primary,
.header-actions .btn {
background-color: var(--coral) !important;
color: var(--warm-white) !important;
font-family: var(--display-font) !important;
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.85rem !important;
border: 1px solid var(--coral) !important;
border-radius: 0 !important;
padding: 1.1em 2.4em !important;
transition: all 0.3s ease;
}
.sqs-block-button-element--primary:hover,
.sqs-button-element--primary:hover,
.header-actions .btn:hover {
background-color: transparent !important;
color: var(--coral) !important;
}
.sqs-block-button-element--secondary,
.sqs-button-element--secondary {
background-color: transparent !important;
color: var(--ink) !important;
font-family: var(--display-font) !important;
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.85rem !important;
border: 1px solid var(--gold) !important;
border-radius: 0 !important;
padding: 1.1em 2.4em !important;
transition: all 0.3s ease;
}
.sqs-block-button-element--secondary:hover,
.sqs-button-element--secondary:hover {
background-color: var(--coral) !important;
border-color: var(--coral) !important;
color: var(--warm-white) !important;
}
/* ---- Navigation — minimal, lets the page sell ---- */
.header-nav-item a,
.header-menu-nav-item a {
font-family: var(--body-font) !important;
font-size: 0.9rem;
letter-spacing: 0.04em;
color: var(--charcoal) !important;
}
.header-nav-item a:hover { color: var(--coral) !important; }
.header-title-text a {
font-family: var(--display-font) !important;
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* ---- LISTS in body content — styled wherever they appear ----
Bullet lists get a coral dash. Numbered lists get a bold Anton numeral.
So: type a normal list in any Text block and it comes out premium. */
.sqs-block-html ul {
list-style: none;
padding-left: 0;
}
.sqs-block-html ul li {
position: relative;
padding-left: 1.7rem;
margin-bottom: 0.65rem;
}
.sqs-block-html ul li::before {
content: "—";
position: absolute;
left: 0;
color: var(--coral);
font-weight: 700;
}
.sqs-block-html ol {
list-style: none;
counter-reset: item;
padding-left: 0;
}
.sqs-block-html ol li {
counter-increment: item;
position: relative;
padding-left: 2.8rem;
margin-bottom: 0.95rem;
}
.sqs-block-html ol li::before {
content: counter(item);
position: absolute;
left: 0;
top: -0.1rem;
font-family: var(--display-font);
color: var(--coral);
font-size: 1.4rem;
line-height: 1;
}
/* ---- Testimonials / quotes — gold hairline, italic ----
Use a Quote block for client wins and they style automatically. */
blockquote,
.sqs-block-quote blockquote {
border-left: 2px solid var(--gold);
padding-left: 1.6rem;
font-style: italic;
font-family: var(--body-font) !important;
color: var(--charcoal);
}
/* ============================================================
OPTIONAL FLOURISHES (only if you want them)
These need a small Code block with the class. Everything ABOVE
works with zero extra steps — these are just nice-to-haves.
============================================================ */
/* Coral eyebrow label with a gold hairline: Your label
*/
.eyebrow {
font-family: var(--body-font) !important;
text-transform: uppercase;
letter-spacing: 0.28em;
font-size: 0.72rem !important;
color: var(--coral) !important;
display: inline-block;
position: relative;
padding-bottom: 0.9rem;
margin-bottom: 1.4rem !important;
}
.eyebrow::after {
content: "";
position: absolute;
left: 0; bottom: 0;
width: 48px; height: 1px;
background: var(--gold);
}
/* Personal hero intro: Hi, I'm Sarah —
*/
.hero-intro {
font-family: var(--body-font) !important;
font-style: italic;
font-size: 1.25rem !important;
color: var(--coral) !important;
margin-bottom: 0.6rem !important;
}
/* Offer badge: By application (or class="badge badge--gold") */
.badge {
display: inline-block;
font-family: var(--body-font);
text-transform: uppercase;
letter-spacing: 0.2em;
font-size: 0.66rem;
padding: 0.5em 1.1em;
border: 1px solid var(--coral);
color: var(--coral);
margin-bottom: 1rem;
}
.badge--gold { border-color: var(--gold); color: var(--charcoal); }
/* Thin gold divider:
*/
.gold-rule { width: 64px; height: 1px; background: var(--gold); border: 0; margin: 2rem auto; }
/* ============================================================
QUALITY FLOOR — accessibility & mobile
============================================================ */
a:focus-visible,
button:focus-visible,
.sqs-button-element--primary:focus-visible {
outline: 2px solid var(--coral);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
* { transition: none !important; }
}
@media (max-width: 767px) {
h1 { font-size: clamp(2.2rem, 11vw, 3.4rem); }
.sqs-block-button-element--primary,
.sqs-button-element--primary { padding: 1em 1.8em !important; }
}