/*
Theme Name: Arcus AI Solutions
Theme URI: https://arcusaisolutions.com/
Description: Child theme of Twenty Twenty-Five for Arcus AI Solutions. Dark navy and plum surfaces, neon cyan and magenta accents. Palette, type scale and band treatments recovered from the live GoHighLevel site (/tmp/ghl/home.html) and rebuilt against design/CONTRACT.json.
Author: Arcus AI Solutions LLC
Author URI: https://arcusaisolutions.com/
Template: twentytwentyfive
Version: 3.0.0
Requires at least: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: arcus
Tags: block-patterns, full-site-editing, dark-mode, one-column, wide-blocks
*/
/* ===================================================================
ARCUS FONT STACK
The first build declared Inter and Poppins in theme.json with ZERO
fontFace entries and never set font-family on anything, so every
heading and paragraph rendered in the browser's default serif. The
fonts are self-hosted under assets/fonts/ — no Google request, no
third-party dependency, nothing to break when a CDN changes.
=================================================================== */
:root{
--arcus-font-body: "Inter", ui-sans-serif, system-ui, -apple-system,
BlinkMacSystemFont, "Segoe UI", sans-serif;
--arcus-font-display: "Poppins", "Inter", ui-sans-serif, system-ui,
-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
body,
.wp-site-blocks,
.editor-styles-wrapper{
font-family: var(--arcus-font-body);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1,h2,h3,h4,h5,h6,
.wp-block-heading,
.arcus-hero__title,
.arcus-band__title,
.arcus-card__title{
font-family: var(--arcus-font-display);
}
.arcus-eyebrow,
.arcus-btn,
.wp-block-button__link{ font-family: var(--arcus-font-body); }
/* ==========================================================================
CONTRACT CLASS MANIFEST — 60 classes, all defined below, nothing else.
Mechanical check:
grep -o '\.arcus-[a-z0-9_-]*' style.css | sort -u | wc -l -> 60
==========================================================================
1 .arcus-topband 31 .arcus-media__img
2 .arcus-hero 32 .arcus-figcaption
3 .arcus-hero__title 33 .arcus-panel
4 .arcus-band 34 .arcus-pullquote
5 .arcus-band--plum 35 .arcus-feature-list
6 .arcus-band--widget 36 .arcus-checklist
7 .arcus-band--intro 37 .arcus-numbered-list
8 .arcus-band__title 38 .arcus-buttons
9 .arcus-band__title--sm 39 .arcus-btn
10 .arcus-eyebrow 40 .arcus-btn--primary
11 .arcus-lead 41 .arcus-btn--secondary
12 .arcus-split 42 .arcus-cta-band
13 .arcus-split__intro 43 .arcus-calculator-slot
14 .arcus-split__support 44 .arcus-audio
15 .arcus-cards 45 .arcus-audio__title
16 .arcus-cards--3up 46 .arcus-audio__note
17 .arcus-cards--2up 47 .arcus-header
18 .arcus-card 48 .arcus-header__inner
19 .arcus-card--navy 49 .arcus-header__brand
20 .arcus-card--black 50 .arcus-header__logo
21 .arcus-card__title 51 .arcus-header__wordmark
22 .arcus-card__title--cyan 52 .arcus-header__nav
23 .arcus-card__kicker 53 .arcus-footer
24 .arcus-card__line 54 .arcus-footer__col
25 .arcus-card__label 55 .arcus-footer__logo
26 .arcus-steps 56 .arcus-footer__title
27 .arcus-step 57 .arcus-footer__links
28 .arcus-step__title 58 .arcus-footer__divider
29 .arcus-media 59 .arcus-footer__legal
30 .arcus-media__figure 60 .arcus-footer__copyright
OUT OF SCOPE — never styled here: the missed-call calculator ships its own
self-contained .arcus-mcc / amcc-* namespace inside
#arcus-missed-call-calculator. This file does not restyle, rename or fold in
one selector of it. .arcus-calculator-slot is the layout shell only.
FILE MAP
00 Tokens, page shell, motion, focus
01 Full-bleed plumbing (root-padding-aware alignments)
02 Topband + hero
03 Bands, titles, eyebrows, leads
04 Split intro bands
05 Card decks
06 Steps
07 Media bands
08 Panel + pullquote
09 Lists
10 Buttons + CTA band
11 Calculator slot
12 Audio panel
13 Header
14 Footer
SOURCE OF TRUTH
/tmp/ghl/home.html (saved GoHighLevel render)
design/sections.md (measured band-by-band readout of that file)
design/CONTRACT.json / CONTRACT.md (the class + band + decision contract)
Every hex, gradient, radius and pixel size below was read out of one of
those three. Where a value is a judgement call rather than a measurement it
says so in the comment above it.
========================================================================== */
/* ==========================================================================
00 TOKENS, PAGE SHELL, MOTION, FOCUS
========================================================================== */
:root {
/* Surfaces — GHL --color-* variables, sections.md palette table. */
--arcus-navy: #010b24; /* --color-nysvlsne: header, card fill */
--arcus-plum: #260d32; /* --color-erqkjflo: sections 3 + 4 */
--arcus-footer-navy: #071126; /* --color-swffaesp: footer */
--arcus-night: #071022; /* amcc --amcc-night: calculator shell */
--arcus-black: #000000; /* --black: the two capability cards */
/* Accents. */
--arcus-cyan: #00e8f6; /* --color-udclnnjl: borders, labels, links */
--arcus-cyan-soft: #18d8e8; /* --color-axlzkhap: eyebrows, gradients */
--arcus-cyan-light: #8cf4fb; /* amcc --amcc-cyan-light: link hover */
--arcus-magenta: #d42ad6; /* --color-alsoehch */
/* Text. D3: GoHighLevel's black --text-color is NOT ported. */
--arcus-text: #ffffff;
--arcus-text-soft: #dce4fb;
--arcus-text-muted: #b8bdd1; /* rgb(184,189,209), the source sub-copy */
--arcus-on-accent: #06111e; /* 12.54:1 on cyan. White measures 1.51:1. */
--arcus-line: #284064; /* amcc --amcc-line: hairlines */
/* Geometry. */
--arcus-container: var(--wp--style--global--content-size, 1170px);
--arcus-radius-card: 12px; /* source card + section radius */
--arcus-radius-btn: 5px; /* source button radius */
--arcus-radius-panel:18px; /* source modal radius, reused by .arcus-audio */
--arcus-gap: clamp(1.25rem, 3vw, 2rem);
/* Hero art. Rescued original, re-uploaded — never hotlinked from GHL. */
--arcus-hero-image: url("/wp-content/uploads/2026/09/arcus-hero-background.png");
/* Two-corner ambient glow, verbatim from .amcc-shell in the source. */
--arcus-ambient-glow:
radial-gradient(circle at 8% 2%, rgba(24, 216, 232, 0.13), transparent 26rem),
radial-gradient(circle at 92% 8%, rgba(116, 43, 217, 0.31), transparent 30rem);
/* Headline sweep, verbatim from .amcc-gradient in the source. */
--arcus-headline-gradient:
linear-gradient(90deg, #18d8e8, #93ecff 34%, #ef8dff 70%, #d42ad6);
/* CTA fill, verbatim from .amcc-cta in the source. */
--arcus-cta-gradient: linear-gradient(90deg, #18d8e8, #0eb8dd);
--arcus-transition: 180ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
/* D3: an explicit page background so no band can ever flash white — the exact
failure mode of the source, whose .bgCover sat on var(--white) under a hero
PNG that was the only thing making the top of the page dark. */
html {
background-color: var(--arcus-night);
}
body {
background-color: var(--arcus-night);
color: var(--arcus-text);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* D2: the hero's "Hear a Live Demo" link is a real #hear-riley-live anchor now,
not a modal. Smooth scroll, with the reduced-motion escape hatch. */
html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* D3: 2px cyan ring at 2px offset. Never outline:none. */
:where(a, button, [tabindex], input, select, textarea, summary, audio):focus-visible {
outline: 2px solid var(--arcus-cyan);
outline-offset: 2px;
border-radius: 2px;
}
/* D3: cyan links, cyan-light on hover and focus. Visited deliberately matches
the unvisited colour — a separate visited hue on a 15-link marketing page is
noise. GoHighLevel's #188bf6 link blue is NOT ported; that is a brand call,
not a contrast one (#188bf6 on #071126 measures 5.43:1 and would have
passed). Said plainly so nobody reinstates it on accessibility grounds. */
a {
color: var(--arcus-cyan);
transition: color var(--arcus-transition);
}
a:visited {
color: var(--arcus-cyan);
}
a:hover,
a:focus {
color: var(--arcus-cyan-light);
}
/* ==========================================================================
01 FULL-BLEED PLUMBING
--------------------------------------------------------------------------
theme.json sets useRootPaddingAwareAlignments:true and a root left/right
padding of --wp--preset--spacing--30. Core therefore inset every top-level
block and pulls .alignfull back out again via .has-global-padding.
D4: twelve bands carry align:full PLUS layout:{type:"constrained"}. The
restatement below is deliberately identical to core's own values, so it is
idempotent where core already fired, and it is the whole mechanism where
core did not — a band nested one level deeper, or a parent that never got
.has-global-padding. Without it every coloured band renders as a 1170px
stripe with the page colour down both sides, which is exactly the defect
the critic found in the first pass.
========================================================================== */
.arcus-topband.alignfull,
.arcus-band.alignfull,
.arcus-header.alignfull,
.arcus-footer.alignfull {
width: auto;
max-width: none;
margin-left: calc(var(--wp--style--root--padding-left, 0px) * -1);
margin-right: calc(var(--wp--style--root--padding-right, 0px) * -1);
padding-left: var(--wp--style--root--padding-left, 0px);
padding-right: var(--wp--style--root--padding-right, 0px);
}
/* The band paints to the viewport edge; its contents stop at 1170px. :where()
keeps this at class specificity so core's own constrained-layout rule and
any per-block override still win a tie by source order. */
.arcus-topband > :where(:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright)),
.arcus-band > :where(:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright)),
.arcus-header > :where(:not(.alignfull):not(.alignwide)),
.arcus-footer > :where(:not(.alignfull):not(.alignwide)) {
max-width: var(--arcus-container);
margin-left: auto;
margin-right: auto;
}
/* Anchored bands: D2 adds id="hear-riley-live" to band 9. Reserve room so a
future sticky header cannot sit on top of the heading it scrolls to. */
.arcus-band[id] {
scroll-margin-top: 6rem;
}
/* ==========================================================================
02 TOPBAND + HERO (bands 2 and 3)
========================================================================== */
/* The single most important fix on the page. The source painted the hero art
on an absolutely-positioned child over .bgCover, whose background-color was
var(--white) — so one slow PNG turned the whole top of the site white with
white text on it. Here the #010b24 fill and the image are the same
declaration on the same element: the colour is painted first, the art sits
on top of it, and there is no state in which the fallback is white. */
.arcus-topband {
position: relative;
background-color: var(--arcus-navy);
background-image: var(--arcus-hero-image);
background-repeat: no-repeat;
background-position: 50% 50%;
background-size: cover;
padding-top: clamp(2.5rem, 7vw, 5rem);
padding-bottom: clamp(2.5rem, 7vw, 5rem);
color: var(--arcus-text);
}
.arcus-hero {
padding-top: clamp(1rem, 3vw, 2rem);
padding-bottom: clamp(1.5rem, 4vw, 3rem);
text-align: center;
}
/* Source: 64px, centred, the page's only h1. The four coloured words are NOT
set here — D3 applies them with core's inline-colour mechanism against the
theme.json palette slugs (accent-2 #18d8e8, accent-6 #79e8ff, accent-4
#a978e8, accent-3 #d42ad6), because hand-written spans inside a heading are
destroyed the first time anyone edits that heading in the block editor. */
.arcus-hero__title {
margin: 0 0 clamp(1rem, 2.5vw, 1.5rem);
font-size: var(--wp--preset--font-size--display, clamp(2.25rem, 6vw, 4rem));
font-weight: 700;
line-height: 1.08;
letter-spacing: -0.02em;
color: var(--arcus-text);
text-wrap: balance;
}
/* ==========================================================================
03 BANDS, TITLES, EYEBROWS, LEADS (bands 4-15)
========================================================================== */
.arcus-band {
padding-top: clamp(2.5rem, 7vw, 4.5rem);
padding-bottom: clamp(2.5rem, 7vw, 4.5rem);
color: var(--arcus-text);
}
/* D4 adjacency note: bands 7-8 and 11-15 are all #260d32 and read as one
continuous plum field. That matches the source. Do not add gaps, rules or
separators to "fix" it. */
.arcus-band--plum {
background-color: var(--arcus-plum);
}
/* Band 10. The calculator's own shell colour, plus the two-corner ambient glow
that the source paints on .amcc-shell. Left-aligned, unlike every other
band — the widget's hero copy is ranged left behind a 720px measure. */
.arcus-band--widget {
background-color: var(--arcus-night);
background-image: var(--arcus-ambient-glow);
background-repeat: no-repeat;
overflow: hidden;
text-align: left;
}
/* Band 4 sits inside .arcus-topband and must read as a continuation of the
hero, not as a new band starting. */
.arcus-band--intro {
padding-top: 0;
}
/* Source: 54px ("A Better System for Growing Your Agency"). */
.arcus-band__title {
margin: 0 0 clamp(1rem, 2.5vw, 1.5rem);
font-size: var(--wp--preset--font-size--section-title, clamp(2rem, 5vw, 3.375rem));
font-weight: 700;
line-height: 1.12;
letter-spacing: -0.02em;
color: var(--arcus-text);
text-wrap: balance;
}
/* Band 13 only. Source measures this headline at 28px, bold italic — the
smallest heading on the page, carrying the longest two-sentence line. */
.arcus-band__title--sm {
font-size: var(--wp--preset--font-size--x-large, clamp(1.375rem, 3vw, 1.75rem));
font-style: italic;
letter-spacing: -0.01em;
}
/* Band 10's headline is the one gradient-filled headline on the page: the
source renders it as "What Could Missed Calls Be
Costing Your Agency?". Reproduced here on the whole h2 so no hand-
written span is needed inside an editable heading. The solid colour is
declared first and stays the value in any engine that ignores
background-clip:text, and in print. */
.arcus-band--widget .arcus-band__title {
color: var(--arcus-cyan-soft);
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
.arcus-band--widget .arcus-band__title {
background-image: var(--arcus-headline-gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
}
@media print {
.arcus-band--widget .arcus-band__title {
background-image: none;
color: #000000;
}
}
/* Source eyebrows: #18d8e8, bold + italic, 14px on the hero. The contract
makes the eyebrow a single uppercase treatment, so the 20px band variants
collapse into this one. The letter-spacing is the only value here that is
not measured from the source — uppercase at 14px is unreadable without it. */
.arcus-eyebrow {
margin: 0 0 0.75rem;
font-size: var(--wp--preset--font-size--x-small, 0.875rem);
font-weight: 700;
font-style: italic;
line-height: 1.4;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--arcus-cyan-soft);
}
/* Source: 20.8px sub-copy under the hero, Meet Riley and the closing CTA.
D3 maps lead copy to text-soft #dce4fb (13.94:1 on plum). */
.arcus-lead {
margin: 0 0 clamp(1.25rem, 3vw, 1.75rem);
max-width: 68ch;
font-size: var(--wp--preset--font-size--large, clamp(1.1rem, 2vw, 1.3rem));
line-height: 1.6;
color: var(--arcus-text-soft);
}
.arcus-hero .arcus-lead,
.arcus-cta-band .arcus-lead {
margin-left: auto;
margin-right: auto;
}
/* ==========================================================================
04 SPLIT INTRO BANDS (bands 5 and 7)
========================================================================== */
.arcus-split__intro {
align-items: center;
gap: var(--arcus-gap);
}
/* Source: the right-hand copy is white at 20px in band 7 and muted in band 5.
D3 maps supporting copy to text-muted. */
.arcus-split__support {
margin: 0;
max-width: 56ch;
font-size: var(--wp--preset--font-size--card-title, 1.25rem);
line-height: 1.6;
color: var(--arcus-text-muted);
}
/* Mobile-first: the two halves stack until core's own columns breakpoint. */
@media (min-width: 48.875em) {
.arcus-split .arcus-split__intro {
display: flex;
flex-wrap: wrap;
}
.arcus-split .arcus-eyebrow,
.arcus-split .arcus-band__title {
text-align: left;
}
}
/* ==========================================================================
05 CARD DECKS (bands 6 and 8; band 14 reuses the same shell)
========================================================================== */
/* .arcus-cards may sit on the band group or directly on the core/columns row,
so both placements are addressed. */
.arcus-cards.wp-block-columns,
.arcus-cards > .wp-block-columns {
gap: var(--arcus-gap);
align-items: stretch;
}
/* Source: 33% wide with 10px gutters. These flex bases only take effect when
core's per-column inline flex-basis is absent; below 782px core forces
flex-basis:100% and the deck stacks. */
.arcus-cards--3up.wp-block-columns > .wp-block-column,
.arcus-cards--3up > .wp-block-columns > .wp-block-column {
flex: 1 1 18rem;
}
/* Source: 50% wide with 10px gutters. */
.arcus-cards--2up.wp-block-columns > .wp-block-column,
.arcus-cards--2up > .wp-block-columns > .wp-block-column {
flex: 1 1 26rem;
}
/* Source card shell: 1px solid #00e8f6, border-radius 12px. The source's own
padding is 10px 5px, which is the GHL inner div only — its children carry
the rest as margins. A single comfortable inset is used instead so the copy
does not run into the cyan hairline. */
.arcus-card {
padding: clamp(1.5rem, 3vw, 2.25rem);
border: 1px solid var(--arcus-cyan);
border-radius: var(--arcus-radius-card);
transition: box-shadow var(--arcus-transition), transform var(--arcus-transition);
}
.arcus-card:hover {
box-shadow: 0 0 0 1px rgba(0, 232, 246, 0.42),
0 0 34px rgba(0, 232, 246, 0.17),
0 22px 54px rgba(0, 0, 0, 0.5);
}
/* Bands 6 and 14. */
.arcus-card--navy {
background-color: var(--arcus-navy);
}
/* Band 8. Deliberately darker than the 3-up deck — that difference is in the
source (var(--black)), not a mistake to normalise away. */
.arcus-card--black {
background-color: var(--arcus-black);
}
/* Source: h3, 20px, centred. White by default (bands 8 and 14). */
.arcus-card__title {
margin: 0 0 0.75rem;
font-size: var(--wp--preset--font-size--card-title, 1.25rem);
font-weight: 700;
line-height: 1.3;
color: var(--arcus-text);
}
/* Band 6 only: the three problem/solution card headings are cyan in the
source (--color-udclnnjl). */
.arcus-card__title--cyan {
color: var(--arcus-cyan);
}
/* Band 8: the cyan italic kicker above each capability card's title
("Get found online" / "Answer every call"). */
.arcus-card__kicker {
margin: 0 0 0.5rem;
font-size: var(--wp--preset--font-size--small, 1rem);
font-style: italic;
font-weight: 600;
line-height: 1.4;
color: var(--arcus-cyan);
}
/* Band 8: one label-plus-description line. */
.arcus-card__line {
margin: 0 0 0.75rem;
font-size: var(--wp--preset--font-size--medium, 1.125rem);
line-height: 1.6;
color: var(--arcus-text-soft);
}
.arcus-card__line:last-child {
margin-bottom: 0;
}
/* The cyan bold lead-in: "Google Business Profile:", "Local SEO:", ... */
.arcus-card__label {
font-weight: 700;
color: var(--arcus-cyan);
}
/* ==========================================================================
06 STEPS (band 14)
--------------------------------------------------------------------------
The source carries no "1 / 2 / 3" in the markup, so the ordinal is generated
here with a CSS counter — the mechanism the contract specifies for
.arcus-step ("adds the ordinal"). aria-hidden is unnecessary: generated
content from a counter is decoration and the step titles carry the meaning.
========================================================================== */
.arcus-steps {
counter-reset: arcus-step;
}
.arcus-step {
position: relative;
counter-increment: arcus-step;
}
.arcus-step::before {
content: counter(arcus-step);
display: block;
width: 2.75rem;
height: 2.75rem;
margin: 0 auto 1rem;
border: 1px solid var(--arcus-cyan);
border-radius: 999px;
font-size: var(--wp--preset--font-size--card-title, 1.25rem);
font-weight: 700;
line-height: 2.625rem;
text-align: center;
color: var(--arcus-cyan);
}
/* Source: the step headings here are WHITE, where band 6's card headings are
cyan. .arcus-step__title sits alongside .arcus-card__title and restates the
white so it survives any future change to the card-title default. */
.arcus-step__title {
color: var(--arcus-text);
}
/* ==========================================================================
07 MEDIA BANDS (bands 9 and 13)
========================================================================== */
.arcus-media .wp-block-columns {
gap: clamp(1.5rem, 4vw, 3rem);
align-items: center;
}
/* Both media bands put the image on the LEFT in the source. Nothing here
reverses it; document order is the order. */
.arcus-media__figure {
min-width: 0;
}
/* Note: the Riley photo is a 2.41:1 banner, not a square headshot. Nothing
below crops it — width-driven with intrinsic height, so it cannot lose the
face to an aspect-ratio box. */
.arcus-media__img {
margin: 0;
}
.arcus-media__img img {
display: block;
width: 100%;
height: auto;
border-radius: var(--arcus-radius-card);
}
/* Band 13: "The Minnick Family / The family behind Arcus AI Solutions". */
.arcus-figcaption {
margin: 0.75rem 0 0;
font-size: var(--wp--preset--font-size--small, 1rem);
font-style: italic;
font-weight: 600;
line-height: 1.5;
text-align: center;
color: var(--arcus-text-muted);
}
/* ==========================================================================
08 PANEL + PULLQUOTE (band 11)
========================================================================== */
/* Source: the Ethical-AI row itself carries border:1px solid #00e8f6 and
border-radius:12px, so the whole band reads as one outlined card over the
plum. There is no un-outlined variant, hence no modifier. */
.arcus-panel {
padding: clamp(1.75rem, 4vw, 3rem);
border: 1px solid var(--arcus-cyan);
border-radius: var(--arcus-radius-card);
gap: clamp(1.5rem, 4vw, 3rem);
align-items: flex-start;
}
/* "We believe AI should empower people, not replace them." White in the
source. The 3px magenta rule is the house quote treatment — the same
3px solid #d42ad6 left border the source uses on .amcc-insight, and the
same value theme.json already sets on core/quote. */
.arcus-pullquote {
margin: 0 0 1.25rem;
padding-left: clamp(1rem, 2vw, 1.5rem);
border-left: 3px solid var(--arcus-magenta);
font-size: var(--wp--preset--font-size--large, clamp(1.1rem, 2vw, 1.3rem));
font-style: italic;
line-height: 1.5;
color: var(--arcus-text);
}
/* ==========================================================================
09 LISTS
========================================================================== */
/* Band 9. Renamed from arcus-riley-list — nothing about it is Riley-specific. */
.arcus-feature-list {
margin: 0 0 1.5rem;
padding-left: 1.25rem;
list-style: disc;
color: var(--arcus-text-soft);
}
.arcus-feature-list li {
margin-bottom: 0.6rem;
padding-left: 0.25rem;
line-height: 1.6;
}
.arcus-feature-list li::marker {
color: var(--arcus-cyan);
}
/* Bands 12 and 13. The source uses plain U+2713 characters, not icons, and
they live in the item text. No ::before is generated here, or every item
would render two check marks. */
.arcus-checklist {
margin: 0 0 1.5rem;
padding-left: 0;
list-style: none;
color: var(--arcus-text-soft);
}
.arcus-checklist li {
margin-bottom: 0.6rem;
line-height: 1.6;
}
/* Band 11. Renamed from arcus-ethics-list. Each item is a bold title, a
,
then a description — so the line-height has to carry two lines cleanly. */
.arcus-numbered-list {
margin: 0;
padding-left: 1.5rem;
list-style: decimal;
color: var(--arcus-text-soft);
}
.arcus-numbered-list li {
margin-bottom: 1rem;
padding-left: 0.25rem;
line-height: 1.6;
}
.arcus-numbered-list li::marker {
font-weight: 700;
color: var(--arcus-cyan);
}
.arcus-numbered-list strong {
color: var(--arcus-text);
}
/* ==========================================================================
10 BUTTONS + CTA BAND
========================================================================== */
/* Every button row on this page is centred, so there is no --center modifier. */
.arcus-buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
margin-top: clamp(1.5rem, 4vw, 2.5rem);
}
.arcus-btn {
margin: 0;
}
.arcus-btn .wp-block-button__link {
display: inline-block;
padding: 1rem 2rem; /* source: 16px 32px */
border-radius: var(--arcus-radius-btn); /* source: 5px */
font-size: var(--wp--preset--font-size--medium, 1.125rem);
font-weight: 700;
line-height: 1.2;
text-decoration: none;
transition: background var(--arcus-transition), color var(--arcus-transition),
border-color var(--arcus-transition), box-shadow var(--arcus-transition);
}
/* D3, and the single most likely regression in this rebuild: the source sets
#ffffff text on the #00e8f6 fill, which measures 1.51:1 and fails outright.
The ink here is #06111e (12.54:1). Do not "restore" white. The source's
1px solid #ffffff button border is dropped with it — a white hairline
around a cyan pill only existed to rescue that unreadable white label. */
.arcus-btn--primary .wp-block-button__link {
background-color: var(--arcus-cyan);
background-image: var(--arcus-cta-gradient);
border: 1px solid transparent;
color: var(--arcus-on-accent);
box-shadow: 0 10px 34px rgba(24, 216, 232, 0.21);
}
.arcus-btn--primary .wp-block-button__link:hover,
.arcus-btn--primary .wp-block-button__link:focus {
background-color: var(--arcus-cyan-light);
background-image: none;
color: var(--arcus-on-accent);
}
/* The "Hear a Live Demo" button. D2 points it at the #hear-riley-live band. */
.arcus-btn--secondary .wp-block-button__link {
background-color: transparent;
background-image: none;
border: 1px solid var(--arcus-cyan);
color: var(--arcus-cyan);
}
.arcus-btn--secondary .wp-block-button__link:hover,
.arcus-btn--secondary .wp-block-button__link:focus {
background-color: rgba(0, 232, 246, 0.12);
border-color: var(--arcus-cyan-light);
color: var(--arcus-cyan-light);
}
/* Band 15. The source gives this band no distinct fill — it simply continues
the plum. D4 says so explicitly, so nothing is invented here beyond the
centring and the tighter measure on the lead. */
.arcus-cta-band {
text-align: center;
}
.arcus-cta-band .arcus-lead {
max-width: 62ch;
}
/* ==========================================================================
11 CALCULATOR SLOT (band 10)
--------------------------------------------------------------------------
Layout shell ONLY. The widget ships its own complete .arcus-mcc / amcc-*
stylesheet; this sets nothing inside it and must never be given a descendant
selector.
========================================================================== */
.arcus-calculator-slot {
width: 100%;
}
.arcus-calculator-slot > * {
max-width: none;
}
/* ==========================================================================
12 AUDIO PANEL (band 9)
--------------------------------------------------------------------------
D2: the GoHighLevel "Hear Riley Live" modal becomes a real, linkable
section. Its shell values are the modal's own, measured from the source
custom-code block: max-width 640px, padding 32px, radius 18px, the
135deg plum gradient and the 0 12px 36px shadow.
========================================================================== */
.arcus-audio {
max-width: 640px;
margin-top: clamp(1.5rem, 4vw, 2.5rem);
padding: 2rem;
border-radius: var(--arcus-radius-panel);
background-image: linear-gradient(135deg, #1d0627 0%, #2a0d42 100%);
box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
}
/* Source: white, 28px. */
.arcus-audio__title {
margin: 0 0 0.5rem;
font-size: var(--wp--preset--font-size--x-large, clamp(1.375rem, 3vw, 1.75rem));
font-weight: 700;
line-height: 1.28;
color: var(--arcus-text);
}
/* The lead line and the "Open the demo in a new tab" line around the player.
The source's link colour here was #20d9e8, a one-off that is not in the
recovered palette; links fall through to the D3 accent instead. */
.arcus-audio__note {
margin: 0 0 1rem;
font-size: var(--wp--preset--font-size--small, 1rem);
line-height: 1.6;
color: var(--arcus-text-muted);
}
.arcus-audio__note:last-child {
margin-bottom: 0;
margin-top: 1rem;
}
.arcus-audio audio {
display: block;
width: 100%;
}
/* ==========================================================================
13 HEADER (band 1)
========================================================================== */
/* Source: solid #010b24, padding 20px 15px, inner max-width 1170px, and NOT
sticky — position:sticky appears nowhere on this section in the source. */
.arcus-header {
background-color: var(--arcus-navy);
color: var(--arcus-text);
padding-top: 20px;
padding-bottom: 20px;
}
.arcus-header__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
margin-bottom: 0;
}
/* The header must stay one row at every width — the brand lockup left, the
navigation (with its own mobile overlay) right. Core forces
flex-basis:100% !important on columns below 782px, which would drop the nav
under the logo, so this overrides that one rule and only that one rule. */
.arcus-header__inner.wp-block-columns > .wp-block-column {
flex-basis: auto !important;
flex-grow: 0;
margin-left: 0;
}
.arcus-header__brand {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
}
/* Source: inline width:338px !important, linked to /. The logo PNG is a
full-bleed near-black tile, NOT transparent, so it only ever works on the
dark header and footer fills — never move it onto a light surface. */
.arcus-header__logo {
display: block;
flex: 0 1 auto;
max-width: min(338px, 52vw);
line-height: 0;
}
.arcus-header__logo img {
display: block;
width: 100%;
max-width: 338px;
height: auto;
}
/* Source: "Arcus AI Solutions", , 20px, white, Inter, beside the logo.
Real source content — not a duplicate of the logo art to be cleaned up. */
.arcus-header__wordmark {
margin: 0;
font-size: 20px;
font-weight: 700;
line-height: 1.3;
color: var(--arcus-text);
}
.arcus-header__wordmark a {
color: var(--arcus-text);
text-decoration: none;
}
.arcus-header__nav {
display: flex;
justify-content: flex-end;
flex: 0 1 auto;
min-width: 0;
}
/* Source nav: Inter 16px / 500 / #ffffff, item padding 0 16px, 9px gap. */
.arcus-header__nav .wp-block-navigation {
font-size: 16px;
font-weight: 500;
color: var(--arcus-text);
}
.arcus-header__nav .wp-block-navigation-item__content {
padding: 0.5rem 1rem;
border-radius: var(--arcus-radius-btn);
color: var(--arcus-text);
text-decoration: none;
transition: background-color var(--arcus-transition), color var(--arcus-transition);
}
/* D3: hover is plum + cyan, not GoHighLevel's #155eef cobalt. The source's
1px solid #000000 nav item border is dropped — a black hairline on a
near-black bar drew nothing. */
.arcus-header__nav .wp-block-navigation-item__content:hover,
.arcus-header__nav .wp-block-navigation-item__content:focus {
background-color: var(--arcus-plum);
color: var(--arcus-cyan);
}
/* D3: the dropdown and the mobile drawer are dark. The source's #ffffff panel
with #000000 text fired as a full-screen white flash on a near-black site. */
.arcus-header__nav .wp-block-navigation__submenu-container,
.arcus-header__nav .wp-block-navigation__responsive-container.is-menu-open {
background-color: var(--arcus-footer-navy);
border: 0;
border-radius: var(--arcus-radius-card);
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.3);
color: var(--arcus-text);
}
.arcus-header__nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.arcus-header__nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
background-color: transparent;
color: var(--arcus-cyan);
}
/* ==========================================================================
14 FOOTER (band 16)
========================================================================== */
/* Source: solid #071126, padding 10px 20px 20px. Opened out vertically here —
10px top padding on a three-column footer reads as a mistake at any width
above mobile. */
.arcus-footer {
background-color: var(--arcus-footer-navy);
color: var(--arcus-text-soft);
padding-top: clamp(2.5rem, 6vw, 4rem);
padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
}
.arcus-footer__col {
min-width: 0;
}
/* Decorative — the adjacent h2 already names the company, so this instance
ships alt="". Same near-black tile as the header logo; it only works here
because the footer fill is dark too. */
.arcus-footer__logo {
margin: 0 0 1rem;
line-height: 0;
}
.arcus-footer__logo img {
display: block;
width: 100%;
max-width: 240px;
height: auto;
}
/* Source: white, 20px, Poppins. */
.arcus-footer__title {
margin: 0 0 1rem;
font-family: var(--wp--preset--font-family--display, inherit);
font-size: var(--wp--preset--font-size--card-title, 1.25rem);
font-weight: 700;
line-height: 1.3;
color: var(--arcus-text);
}
.arcus-footer__links {
margin: 0;
padding-left: 0;
list-style: none;
}
.arcus-footer__links li {
margin-bottom: 0.5rem;
line-height: 1.5;
}
.arcus-footer__links a {
color: var(--arcus-text-soft);
text-decoration: none;
}
.arcus-footer__links a:hover,
.arcus-footer__links a:focus {
color: var(--arcus-cyan);
text-decoration: underline;
}
/* The hairline above the legal row. */
.arcus-footer__divider {
width: 100%;
max-width: none;
height: 0;
margin: clamp(2rem, 5vw, 3rem) 0 clamp(1.25rem, 3vw, 1.75rem);
border: 0;
border-top: 1px solid var(--arcus-line);
opacity: 1;
}
/* Privacy Policy | Terms of Service | SMS Terms | Data Deletion. */
.arcus-footer__legal {
margin: 0 0 0.5rem;
font-size: var(--wp--preset--font-size--small, 1rem);
line-height: 1.7;
text-align: center;
color: var(--arcus-text-muted);
}
.arcus-footer__legal a {
color: var(--arcus-text-muted);
text-decoration: underline;
}
.arcus-footer__legal a:hover,
.arcus-footer__legal a:focus {
color: var(--arcus-cyan);
}
.arcus-footer__copyright {
margin: 0;
font-size: var(--wp--preset--font-size--small, 1rem);
line-height: 1.6;
text-align: center;
color: var(--arcus-text-muted);
}
/* ==========================================================================
BREAKPOINTS
--------------------------------------------------------------------------
48.875em = 782px, the width at which core stops forcing
flex-basis:100% !important on core/column. Aligning to it means the band
layouts change on the same line core does, instead of one breakpoint off.
========================================================================== */
@media (min-width: 48.875em) {
.arcus-media .arcus-media__figure {
flex: 1 1 50%;
}
.arcus-footer__legal,
.arcus-footer__copyright {
text-align: left;
}
}
@media (min-width: 64em) {
.arcus-band {
padding-top: clamp(3.5rem, 6vw, 5.5rem);
padding-bottom: clamp(3.5rem, 6vw, 5.5rem);
}
.arcus-band--intro {
padding-top: 0;
}
.arcus-topband {
padding-top: 4rem;
padding-bottom: 5rem;
}
}
/* ===================================================================
LIVE-SITE CORRECTIONS — measured on arcusaisolutions.com, not guessed
=================================================================== */
/* 1. HEADER LOGO.
Shipped at 338x338, which made the header 378px tall and pushed the hero
below the fold. The GoHighLevel original set width:80px;height:auto on the
header logo — recovered from home.html. The source PNG is a 2048px square
with a baked-in near-black tile (not transparent), so it must stay small
and sit only on the dark header/footer fill. */
.arcus-header__logo img,
.arcus-header .wp-block-image img,
.wp-block-template-part .arcus-header__logo img {
width: 80px;
height: auto;
max-width: 80px;
}
.arcus-footer__logo img,
.wp-block-template-part .arcus-footer__logo img {
width: 80px;
height: auto;
max-width: 80px;
}
/* 2. FULL-BLEED INSIDE TEMPLATE PARTS.
.alignfull is normally stretched with negative margins equal to the root
padding. A template part is rendered OUTSIDE that padded root, so the same
negative margin over-corrects: header and footer measured 1457px wide at
left:-16 in a 1425px viewport, giving the whole site a horizontal
scrollbar. Inside a template part, an alignfull band is already at the
viewport edge and needs no correction at all. */
.wp-block-template-part > .alignfull,
.wp-block-template-part > .wp-block-group.alignfull {
margin-left: 0;
margin-right: 0;
width: 100%;
max-width: 100%;
}
/* Belt and braces: nothing may introduce a horizontal scrollbar. */
html, body { overflow-x: hidden; max-width: 100%; }
/* 3. FULL-BLEED BANDS INSIDE PAGE CONTENT.
Measured on the live homepage at 1440x900, not inferred. The page template
wraps post-content in a constrained group:
main.wp-block-group.is-layout-constrained 1425px
.wp-block-post-content 1170px <-- capped here
.alignfull .arcus-topband 1202px
A constrained layout caps its DIRECT CHILDREN at --wp--style--global--
content-size, and post-content is one of those children. So every alignfull
band inside the page was measuring its 100% against a 1170px box and could
only claw back main's 16px of padding: 1202px in a 1425px viewport, leaving
a navy gutter down both sides of all twelve bands. The header escaped this
only because it is a direct child of .wp-site-blocks, outside main.
The cap belongs on post-content's children — post-content's own constrained
layout already applies it — not on post-content itself. Verified after the
fix: all 12 alignfull bands == 1425px, non-aligned blog-post text unchanged
at 1170px, document scrollWidth still == clientWidth at both 1425 and 375.
Specificity: WordPress writes the cap as
.wp-block-group.is-layout-constrained > :where(:not(.alignleft)...)
which is (0,2,0) because :where() contributes nothing. The (0,2,1) below
wins on its own and needs no !important. */
main.wp-block-group > .wp-block-post-content,
main.wp-block-group > .entry-content {
max-width: none;
}
/* 4. THE HEADER MUST NOT STACK ON MOBILE.
The header row is a wp:columns block, and core stacks every columns block
below 782px:
@media (max-width:781px){
.wp-block-columns:not(.is-not-stacked-on-mobile){flex-wrap:wrap}
.wp-block-columns:not(...)>.wp-block-column{flex-basis:100%!important}
}
That put the logo on row one and the hamburger on row two and made the
header 168px tall at 375px wide. Core's own opt-out sets flex-basis:0 on the
columns, so this mirrors that rather than inventing new flex weights; the
grow ratio is 4:1 because an even split squeezed "Arcus AI Solutions" onto
four lines. flex-basis:0 (not auto) is what keeps the hamburger on screen —
with auto, the nav column takes its max-content width from the hidden
desktop menu and lands at x=380 in a 375px viewport.
Measured after: header 120px, single row, hamburger at 336-360, no
horizontal scroll. */
@media (max-width: 781px) {
.arcus-header .wp-block-columns {
flex-wrap: nowrap !important;
align-items: center;
}
.arcus-header .wp-block-columns > .wp-block-column {
flex-basis: 0 !important;
min-width: 0;
}
.arcus-header .wp-block-columns > .wp-block-column:first-child { flex-grow: 4; }
.arcus-header .wp-block-columns > .wp-block-column:last-child { flex-grow: 1; }
}
/* 5. MOBILE NAVIGATION OVERLAY.
The hamburger menu opened as core's default overlay: white background, black
right-aligned links, on a dark-navy site. This block already carried a rule
for it —
.arcus-header__nav .wp-block-navigation__responsive-container.is-menu-open
— but that is (0,3,0) and core's default is
.wp-block-navigation:not(.has-background)
.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay)
which is (0,5,0). The theme rule never applied and nothing reported it: the
menu was only ever checked for whether it opened and listed the right links,
which it did. Matching core's selector exactly wins on source order, since
the child theme stylesheet is enqueued after core block styles.
Measured after: overlay #071126, links #fff, submenu links #dce4fb, close
button #fff, all 10 links present. */
.wp-block-navigation:not(.has-background)
.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
background-color: var(--arcus-footer-navy, #071126);
color: var(--arcus-text, #ffffff);
border-radius: 0;
box-shadow: none;
padding: clamp(1.5rem, 7vw, 3rem) clamp(1rem, 5vw, 2.5rem);
}
.wp-block-navigation__responsive-container.is-menu-open a,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
color: var(--arcus-text, #ffffff);
}
.wp-block-navigation__responsive-container.is-menu-open a:hover,
.wp-block-navigation__responsive-container.is-menu-open a:focus-visible {
color: var(--arcus-cyan, #00e8f6);
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
background-color: transparent;
border: 0;
border-radius: 0;
box-shadow: none;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container a {
color: var(--arcus-text-soft, #dce4fb);
}