/* ──────────────────────────────────────────────────────────────────
Coffee on Cue — Capability Aesthetic OVERRIDES
For legacy static HTML pages in /public that already use the
cream/Off-Black/font-serif Tailwind utility set.
When has class "aesthetic", this file remaps the legacy
utilities to the dark editorial system without requiring the page
markup to be rewritten.
Pair with:
Reference: frontend-design/references/design-system.md
────────────────────────────────────────────────────────────────── */
body.aesthetic {
background-color: var(--coc-section-dark) !important;
color: var(--coc-cream) !important;
font-family: 'Inter', sans-serif;
}
/* ── Surface remap ── */
body.aesthetic .bg-cream { background-color: var(--coc-section-dark) !important; }
body.aesthetic .bg-white,
body.aesthetic .bg-white\/80,
body.aesthetic .bg-white\/90 { background-color: var(--coc-card-dark) !important; }
body.aesthetic .bg-warm-white,
body.aesthetic .bg-sandstone { background-color: var(--coc-card-dark) !important; }
/* Burgundy / terracotta moments — keep them when explicit */
body.aesthetic .bg-maroon { background-color: var(--coc-section-burgundy) !important; }
/* ── Text colour remap ── */
body.aesthetic .text-off-black { color: var(--coc-cream) !important; }
body.aesthetic .text-off-black\/30 { color: rgba(253, 247, 239, 0.35) !important; }
body.aesthetic .text-off-black\/40 { color: rgba(253, 247, 239, 0.45) !important; }
body.aesthetic .text-off-black\/50 { color: rgba(253, 247, 239, 0.55) !important; }
body.aesthetic .text-off-black\/60 { color: rgba(253, 247, 239, 0.65) !important; }
body.aesthetic .text-off-black\/70 { color: rgba(253, 247, 239, 0.75) !important; }
body.aesthetic .text-off-black\/80 { color: rgba(253, 247, 239, 0.85) !important; }
body.aesthetic .text-off-black\/90 { color: rgba(253, 247, 239, 0.92) !important; }
/* ── Borders remap ── */
body.aesthetic .border-off-black\/5,
body.aesthetic .border-off-black\/10,
body.aesthetic .border-off-black\/20 { border-color: rgba(253, 247, 239, 0.08) !important; }
/* ── Typography flip ── */
/* Headlines: Lora SemiBold serif → Inter Bold sans */
body.aesthetic h1, body.aesthetic h2, body.aesthetic h3, body.aesthetic h4 {
font-family: 'Inter', sans-serif !important;
font-weight: 700 !important;
letter-spacing: -0.01em !important;
line-height: 1.05 !important;
}
body.aesthetic .font-serif {
font-family: 'Inter', sans-serif !important;
font-weight: 700 !important;
letter-spacing: -0.01em !important;
line-height: 1.05 !important;
}
/* Italic-serif accent: or .accent inside headlines */
body.aesthetic h1 em, body.aesthetic h2 em, body.aesthetic h3 em, body.aesthetic h4 em,
body.aesthetic h1 .accent, body.aesthetic h2 .accent, body.aesthetic h3 .accent, body.aesthetic h4 .accent {
font-family: 'Lora', serif !important;
font-style: italic !important;
font-weight: 500 !important;
color: var(--coc-orange) !important;
letter-spacing: -0.005em !important;
}
/* Pull-quotes & inline italics on dark surfaces */
body.aesthetic blockquote,
body.aesthetic .italic {
font-family: 'Lora', serif;
font-style: italic;
}
/* ── Shadow remap (legacy cream shadows look bad on dark) ── */
body.aesthetic .shadow-card,
body.aesthetic .shadow-card-hover,
body.aesthetic .shadow-elevated,
body.aesthetic .shadow-sm,
body.aesthetic .shadow-md,
body.aesthetic .shadow-lg,
body.aesthetic .shadow-xl { box-shadow: none !important; }
/* ── Button remap: any orange-bg anchor/button becomes the capability primary CTA
— rectangular slab with 2px corners (NOT fully rounded pill). Matches the
"Book a conversation →" spec on coc-workplace.web.app/capability.html. ── */
body.aesthetic a.bg-orange,
body.aesthetic a.bg-orange-dark,
body.aesthetic a.hover\:bg-orange-dark,
body.aesthetic button.bg-orange,
body.aesthetic button.bg-orange-dark {
background-color: var(--coc-orange) !important;
color: var(--coc-cream) !important;
border-radius: 2px !important;
font-weight: 600 !important;
font-size: 12px !important;
letter-spacing: 0.16em !important;
text-transform: uppercase !important;
padding: 18px 36px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
box-shadow: none !important;
transition: transform 0.2s ease, filter 0.2s ease !important;
}
body.aesthetic a.bg-orange:hover,
body.aesthetic button.bg-orange:hover {
transform: translateY(-1px) !important;
filter: brightness(1.08) !important;
}
/* ── Pricing/featured card highlight strips: keep readable on dark ── */
body.aesthetic .border-orange\/20 { border-color: rgba(195, 94, 56, 0.35) !important; }
body.aesthetic .bg-orange\/10 { background-color: rgba(195, 94, 56, 0.18) !important; }
body.aesthetic .bg-orange\/20 { background-color: rgba(195, 94, 56, 0.28) !important; }
/* ── Section divider line ── */
body.aesthetic .section-divider { background: rgba(253, 247, 239, 0.10) !important; }
/* ──────────────────────────────────────────────────────────────────
Editorial section labels (DESIGN.md signature #3)
Small uppercase tracked dek above every section headline with a
1px top divider. Mirrors the capability.html editorial pattern.
Place inside the section container, above the headline.
Usage:
How we work
Section headline here
The label sits on a dark surface by default (cream at 40% opacity
on warm-near-black). On cream / burgundy / terracotta / teal
contrast bands, the colour and divider flip for legibility.
────────────────────────────────────────────────────────────────── */
body.aesthetic .section-label {
display: block;
font-family: 'Inter', sans-serif;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(253, 247, 239, 0.45);
padding-top: 28px;
margin-bottom: 18px;
border-top: 1px solid rgba(253, 247, 239, 0.08);
}
/* Section labels on cream bands flip to off-black/warm-grey + darker divider */
body.aesthetic section.logo-strip .section-label,
body.aesthetic section.trustindex-band .section-label,
body.aesthetic section.form-band .section-label,
body.aesthetic section.cream-band .section-label {
color: rgba(19, 25, 23, 0.45);
border-top-color: rgba(19, 25, 23, 0.12);
}
/* Section labels on warm bands keep cream colour, brighter for contrast */
body.aesthetic section.burgundy-band .section-label,
body.aesthetic section.terracotta-band .section-label,
body.aesthetic section.teal-band .section-label {
color: rgba(253, 247, 239, 0.55);
border-top-color: rgba(253, 247, 239, 0.18);
}
/* ── Sticky CTA bar at bottom on mobile ── */
body.aesthetic .sticky-cta {
background-color: var(--coc-section-dark) !important;
border-top: 1px solid rgba(253, 247, 239, 0.08) !important;
}
/* ── Form inputs (HubSpot embedded forms inherit from the peach card wrapper) ── */
body.aesthetic .hs-form-html,
body.aesthetic form[class*="hs-form"] {
/* HubSpot form sits inside the peach `#F4DDD2` card. Don't paint a separate
surface — let the peach card be the only "frame". Inputs remain white
so they stay readable against the peach. */
background-color: transparent !important;
color: var(--coc-off-black) !important;
}
body.aesthetic .hs-form-html * { color: var(--coc-off-black) !important; }
body.aesthetic .hs-form-html input,
body.aesthetic .hs-form-html textarea,
body.aesthetic .hs-form-html select {
background-color: #FFFFFF !important;
color: var(--coc-off-black) !important;
border: 1px solid rgba(19, 25, 23, 0.15) !important;
}
/* ── Trust indicator badges / pills (legacy "Most Popular" type) ── */
body.aesthetic .text-orange { color: var(--coc-orange) !important; }
/* ──────────────────────────────────────────────────────────────────
Phase G — explicit cream contrast bands
Some sections must stay cream to preserve contrast (logo strips,
Trust Index Google Reviews carousel, form conversion section).
Apply class="logo-strip" / "trustindex-band" / "form-band" on the
in question; these rules win specificity against the
.bg-cream → dark remap higher up.
────────────────────────────────────────────────────────────────── */
body.aesthetic section.logo-strip,
body.aesthetic section.trustindex-band,
body.aesthetic section.form-band {
background-color: var(--coc-cream) !important;
color: var(--coc-off-black) !important;
}
/* Body text on cream bands flips back to off-black */
body.aesthetic section.logo-strip p,
body.aesthetic section.logo-strip span,
body.aesthetic section.trustindex-band p,
body.aesthetic section.trustindex-band span,
body.aesthetic section.form-band h2,
body.aesthetic section.form-band h3,
body.aesthetic section.form-band p,
body.aesthetic section.form-band span,
body.aesthetic section.form-band label {
color: var(--coc-off-black) !important;
}
/* Restore off-black opacity variants on cream bands */
body.aesthetic section.logo-strip .text-off-black\/70,
body.aesthetic section.form-band .text-off-black\/70 { color: rgba(19, 25, 23, 0.75) !important; }
body.aesthetic section.logo-strip .text-off-black\/60,
body.aesthetic section.form-band .text-off-black\/60 { color: rgba(19, 25, 23, 0.65) !important; }
body.aesthetic section.logo-strip .text-off-black\/50,
body.aesthetic section.form-band .text-off-black\/50 { color: rgba(19, 25, 23, 0.55) !important; }
body.aesthetic section.logo-strip .text-off-black\/40,
body.aesthetic section.form-band .text-off-black\/40 { color: rgba(19, 25, 23, 0.45) !important; }
/* Italic-serif accent flips to orange on cream form-band (off-black is the body) */
body.aesthetic section.form-band h1 em,
body.aesthetic section.form-band h2 em,
body.aesthetic section.form-band h3 em,
body.aesthetic section.form-band h4 em {
color: var(--coc-orange) !important;
}
/* "What Happens Next" 1/2/3 numerals — restore visible orange-on-cream chip */
body.aesthetic section.form-band .bg-orange\/10 {
background-color: rgba(195, 94, 56, 0.15) !important;
}
/* Trust signal cards inside form-band restore white surface + subtle border */
body.aesthetic section.form-band .bg-white {
background-color: #FFFFFF !important;
}
body.aesthetic section.form-band .border-off-black\/5 {
border-color: rgba(19, 25, 23, 0.06) !important;
}
/* Form-band quotes/testimonials — italic serif stays italic but in muted off-black */
body.aesthetic section.form-band .italic { color: rgba(19, 25, 23, 0.75) !important; }
/* ──────────────────────────────────────────────────────────────────
Phase H — generic contrast bands (Band Rhythm)
Page rhythm rule: never more than 5 dark sections in a row.
- .cream-band — listing/feature content (pricing, equipment, logos)
- .burgundy-band — editorial pivot moments (process, final CTA)
- .terracotta-band — warmth/product/hospitality moments
- .teal-band — data/insight/calm professionalism (dashboards, reporting)
Bands win specificity against the .bg-cream → dark remap higher up.
────────────────────────────────────────────────────────────────── */
body.aesthetic section.cream-band {
background-color: var(--coc-cream) !important;
color: var(--coc-off-black) !important;
}
body.aesthetic section.burgundy-band {
background-color: var(--coc-section-burgundy) !important; /* #5C2730 */
color: var(--coc-cream) !important;
}
body.aesthetic section.terracotta-band {
background-color: var(--coc-section-terracotta) !important; /* #A85738 */
color: var(--coc-cream) !important;
}
body.aesthetic section.teal-band {
background-color: var(--coc-dusty-teal) !important;
color: var(--coc-cream) !important;
}
/* Italic-serif accent on warm bands flips to cream-on-warm for legibility */
body.aesthetic section.burgundy-band h1 em, body.aesthetic section.burgundy-band h2 em, body.aesthetic section.burgundy-band h3 em, body.aesthetic section.burgundy-band h4 em,
body.aesthetic section.terracotta-band h1 em, body.aesthetic section.terracotta-band h2 em, body.aesthetic section.terracotta-band h3 em, body.aesthetic section.terracotta-band h4 em,
body.aesthetic section.teal-band h1 em, body.aesthetic section.teal-band h2 em, body.aesthetic section.teal-band h3 em, body.aesthetic section.teal-band h4 em {
color: var(--coc-cream) !important;
opacity: 0.65 !important;
}
/* Cream-band card surfaces restored to white with subtle border */
body.aesthetic section.cream-band .bg-white { background-color: #FFFFFF !important; }
body.aesthetic section.cream-band .border-off-black\/5 { border-color: rgba(19, 25, 23, 0.06) !important; }
body.aesthetic section.cream-band .border-off-black\/10 { border-color: rgba(19, 25, 23, 0.10) !important; }
/* Text colour cascade — cream-band keeps off-black */
body.aesthetic section.cream-band h2,
body.aesthetic section.cream-band h3,
body.aesthetic section.cream-band p,
body.aesthetic section.cream-band span { color: var(--coc-off-black) !important; }
body.aesthetic section.cream-band .text-off-black\/70 { color: rgba(19, 25, 23, 0.75) !important; }
body.aesthetic section.cream-band .text-off-black\/50 { color: rgba(19, 25, 23, 0.55) !important; }
body.aesthetic section.cream-band .text-off-black\/40 { color: rgba(19, 25, 23, 0.45) !important; }
/* Text colour cascade — warm bands flip to cream */
body.aesthetic section.burgundy-band h2, body.aesthetic section.burgundy-band h3, body.aesthetic section.burgundy-band p, body.aesthetic section.burgundy-band span,
body.aesthetic section.terracotta-band h2, body.aesthetic section.terracotta-band h3, body.aesthetic section.terracotta-band p, body.aesthetic section.terracotta-band span,
body.aesthetic section.teal-band h2, body.aesthetic section.teal-band h3, body.aesthetic section.teal-band p, body.aesthetic section.teal-band span {
color: var(--coc-cream) !important;
}
body.aesthetic section.burgundy-band .text-off-black\/70,
body.aesthetic section.terracotta-band .text-off-black\/70,
body.aesthetic section.teal-band .text-off-black\/70 { color: rgba(253, 247, 239, 0.85) !important; }
body.aesthetic section.burgundy-band .text-off-black\/50,
body.aesthetic section.terracotta-band .text-off-black\/50,
body.aesthetic section.teal-band .text-off-black\/50 { color: rgba(253, 247, 239, 0.7) !important; }
body.aesthetic section.burgundy-band .text-off-black\/40,
body.aesthetic section.terracotta-band .text-off-black\/40,
body.aesthetic section.teal-band .text-off-black\/40 { color: rgba(253, 247, 239, 0.55) !important; }
/* Numbered cards on warm bands need a darker surface so they read */
body.aesthetic section.burgundy-band .bg-white,
body.aesthetic section.burgundy-band .bg-\[\#1F1A16\] { background-color: var(--coc-burgundy-card) !important; color: var(--coc-cream) !important; }
body.aesthetic section.terracotta-band .bg-white,
body.aesthetic section.terracotta-band .bg-\[\#1F1A16\] { background-color: var(--coc-terracotta-card) !important; color: var(--coc-cream) !important; }
body.aesthetic section.teal-band .bg-white,
body.aesthetic section.teal-band .bg-\[\#1F1A16\] { background-color: var(--coc-dusty-teal-card) !important; color: var(--coc-cream) !important; }
/* Icon-tint chips inside warm bands lift slightly */
body.aesthetic section.burgundy-band .bg-orange\/10,
body.aesthetic section.terracotta-band .bg-orange\/10,
body.aesthetic section.teal-band .bg-orange\/10 { background-color: rgba(253, 247, 239, 0.18) !important; }