/*
shortcut.solutions — responsive heading ladder
Added 2026-09-25 via site custom_css (site 4, theme 3). Theme files untouched.
Why: theme 3 main.css sets fixed heading sizes with no responsive scaling —
phones rendered desktop sizes (H1 41.6px, hero 48px, hero grows to 57.6px desktop).
Breakpoints mirror theme 3's own: <=639 phones, <=1023 tablets, >=1024 desktop untouched.
Rollback: clear custom_css on site 4 (one call).
*/
@media (max-width: 1023px) {
.heading--h1,
.hero-title { font-size: 2.25rem; line-height: 1.2; }
.heading--h2 { font-size: 1.75rem; }
}
/* REV-4C 2026-11-02: the old .site-header::before call row (generated content,
not a real element, cannot be a link) was replaced by a real anchor
rendered by theme 3
templates/header.html; its styles live in theme 3 styles/mobile-nav.css. */
@media (max-width: 639px) {
.heading--h1,
.hero-title { font-size: 2rem; }
.heading--h2 { font-size: 1.5rem; }
.heading--h3 { font-size: 1.25rem; }
.rich-text h3 { font-size: 1.2rem; }
.hero-subtitle { font-size: 1.05rem; }
/* Hero min-height caps — kill dead gradient space now that titles wrap less.
Tiers track main.css 40/60/80vh proportionally. */
.hero--sm { min-height: 34vh; }
.hero--md { min-height: 44vh; }
.hero--lg { min-height: 54vh; }
}
/*
shortcut.solutions — article container width floor
Added 2026-09-25 via site custom_css (site 4, theme 3). Theme files untouched.
Spec (Mike): blog articles render at MINIMUM 1280px container width on desktop.
Theme 3 serves collection entries (blog posts) in .container--narrow (640px).
Scoped with :has(.entry-meta) so non-article narrow containers keep their
640px measure (contact page heading + form both use container--narrow).
Desktop threshold >=1024px matches the site's breakpoint convention.
Rollback: remove this block from site custom_css.
*/
@media (min-width: 1024px) {
.container--narrow:has(.entry-meta) { max-width: 1280px; }
}
/*
shortcut.solutions — homepage blog promo card
Added 2026-10-21 via site custom_css (site 4, theme 3). Theme files untouched.
Spec (Mike notes, Oct 21): turn the blog band into a horizontal white card on a
subtle band, image left ~40%, kicker label + meta line, h3-size headline,
demoted text link (solid orange stays reserved for primary CTAs like Get Hosting),
promo moved below the services/proof sections so only the hero owns the fold.
Layout uses FLEXBOX on purpose: this stack's headless browser cannot verify CSS
grid columns, so flex keeps the build verifiable. Theme files untouched.
Hooks: section 9 > .container[width=wide] > .card.card--media.card--link.
Contrast hardening (same spec): solid button text #ffffff -> #1a1b1f.
#b35809 was 4.86:1 vs white (AA normal-text FAIL under WCAG 1.4.3);
vs #1a1b1f it computes 5.78:1 = PASS with headroom. Body links kept #b35809.
Rollback: remove the two blocks below from site custom_css + delete homepage
section 9 (id promo-blog-section) from the page layout.
*/
/* 1. Horizontal card layout (desktop) */
@media (min-width: 1024px) {
/* Target the promo container: the wide container inside a subtle band whose
card carries card--media (only this card uses it on the homepage). */
.section--bg-subtle > .container--wide > .card--media {
display: flex;
flex-direction: row;
align-items: stretch;
gap: var(--space-lg);
padding: var(--space-lg);
}
.section--bg-subtle > .container--wide > .card--media > img {
flex: 0 0 40%;
max-width: 40%;
border-radius: var(--radius-md);
object-fit: cover;
align-self: center;
}
.section--bg-subtle > .container--wide > .card--media > .card-body {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: center;
padding: 0;
}
}
/* 2. Card internals: kicker label, meta line, headline, excerpt, demoted link */
.section--bg-subtle > .container--wide > .card--media .card-body .rich-text p:first-child strong {
display: block;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.14em;
color: var(--color-neutral-600);
margin-bottom: 2px;
}
.section--bg-subtle > .container--wide > .card--media .card-title {
font-size: 1.75rem; /* 28px */
line-height: 1.25;
margin: 0 0 var(--space-sm);
}
.section--bg-subtle > .container--wide > .card--media .rich-text p {
color: var(--color-neutral-700);
font-size: 1rem;
margin: 0 0 var(--space-xs);
}
.section--bg-subtle > .container--wide > .card--media .card-footer {
margin-top: var(--space-sm);
font-weight: 600;
font-size: 1rem;
}
/* 3. Mobile: image on top, natural stacking */
@media (max-width: 1023px) {
.section--bg-subtle > .container--wide > .card--media > .card-body {
padding: 0 var(--space-md) var(--space-md);
}
}
/* 4. Solid-button text contrast (site-wide): white -> ink on primary buttons */
.btn--primary { color: #1a1b1f; }
/* --- Pull-quote treatment (2026-10-21) --------------------------------------
Mike: prominent quote treatment on the HypecastCMS blog article.
Scoped to entry-body blockquotes (blog articles only; homepage + pages
untouched). Orange brand bar #f68121 (primary-500), Montserrat italic.
-------------------------------------------------------------------------- */
.entry-content blockquote,
.rich-text blockquote {
margin: var(--space-lg) 0;
padding: var(--space-sm) var(--space-md);
border-left: 6px solid var(--color-primary-500);
background: var(--color-primary-50);
border-radius: var(--radius-md);
}
.entry-content blockquote p,
.rich-text blockquote p {
font-family: var(--font-heading);
font-style: italic;
font-weight: 600;
font-size: 1.25rem;
line-height: 1.45;
color: var(--color-neutral-700);
margin: 0;
}
/*
shortcut.solutions — mobile header: Call Us row + hamburger alignment
Added 2026-10-31 via site custom_css (site 4, theme 3). Task ss-mobile-header-v1.
Theme/template files untouched. Scoped ENTIRELY to max-width: 639px (the site's
phone breakpoint) — desktop and tablet rendering unchanged by construction.
Spec (Mike, Telegram 2026-10-31 13:49Z):
1. Hamburger sits on the SAME ROW as the logo in mobile (logo left, burger right).
Root cause: 300px logo + 32px gap + 44px burger > ~343px row width at 375px
viewport, and .site-header-inner flex-wraps. Fix: cap logo to 32px tall
(240px wide, aspect preserved), gap 32->8px, no-shrink on brand + toggle.
240+8+44 = 292px fits even a 360px viewport. Nav stays wrapping BELOW the
row when the menu opens (flex-basis 100% still forces its own row).
2. New row ABOVE the header, MOBILE ONLY, centered:
"Call Us (314) 884-1575" — plain text per Mike's words, NOT a tel: link
(tap-to-call offered separately). Rendered as .site-header::before
generated content — zero HTML changes.
Styling decisions (recorded for Mike to adjust):
- Row background: var(--color-neutral-50) #eef0f2 — the theme's subtle-band
token; separates the call row from the white header body, same neutral family.
- Text: var(--color-neutral-900) #08090b on #eef0f2 = ~15:1 contrast (AAA).
- 15px semibold (>=15px readability floor), site sans font, single space
between "Call Us" and the number (HTML collapses Mike's double space).
- Padding 10px 16px.
Rollback: remove the block below from site custom_css (or clear custom_css).
*/
@media (max-width: 639px) {
.site-header-inner { gap: var(--space-sm); }
.site-brand { flex-shrink: 0; }
.site-nav-toggle { flex-shrink: 0; margin-left: auto; }
.site-logo { height: 32px; width: auto; }
}/*
shortcut.solutions — web-development page (page 95, /web-development-st-louis)
Added 2026-11-02 via site custom_css (site 4, theme 3). Theme files untouched.
Spec (Mike, revision round 2): hero two-column with navy tile gradient +
bigger buttons + trust row; card icons in orange; numbered process rail with
equal-height cards; Novus feature block on the navy band with images last;
quote form side panel with phone + price; slightly larger page headings.
PAGE SCOPING: every rule below is gated on
body:has(.form[action="/f/13"]) — form 13 (the page-95 quote form) renders
only on this page site-wide (home has no form, contact uses /f/7, about
uses /f/9), so none of these rules can touch other pages.
Colors: navy tile gradient = the homepage hero gradient rgba(23,33,84,…)
applied via the section's bgGradient prop (not CSS). Icons use the site's
orange brand tokens (--color-primary-*). No teal token exists in this
theme's palette — teal accent ships only if Mike adds tokens.
Rollback: remove this block from site custom_css.
*/
body:has(.form[action="/f/13"]) .section--bg-strong > .container--wide > .grid.cols-md-2 {
align-items: center;
}
/* Hero + Novus band buttons: larger tap targets on the navy bands */
body:has(.form[action="/f/13"]) .section--bg-strong .btn-row .btn {
padding: 14px 30px;
font-size: 1.05rem;
}
/* Feature icons on the "What we build" cards (orange brand) */
body:has(.form[action="/f/13"]) .card .card-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 12px;
background: var(--color-primary-50);
color: var(--color-primary-600);
margin-bottom: var(--space-sm);
}
body:has(.form[action="/f/13"]) .card .card-icon svg {
width: 26px;
height: 26px;
}
/* Process rail: equal-height cards + CSS counters for the step numbers */
body:has(.form[action="/f/13"]) .grid.cols-lg-5 .card {
display: flex;
flex-direction: column;
}
body:has(.form[action="/f/13"]) .grid.cols-lg-5 .card .card-body {
display: flex;
flex-direction: column;
flex: 1;
}
body:has(.form[action="/f/13"]) .grid.cols-lg-5 {
counter-reset: step;
}
body:has(.form[action="/f/13"]) .grid.cols-lg-5 .card .card-title::before {
counter-increment: step;
content: counter(step);
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--color-primary-600);
color: #ffffff;
font-weight: 700;
font-size: 0.95rem;
margin-bottom: var(--space-sm);
}
/* Testimonials: equal-height cards, signature pinned to the bottom */
body:has(.form[action="/f/13"]) .grid.cols-lg-3 .card {
display: flex;
flex-direction: column;
}
body:has(.form[action="/f/13"]) .grid.cols-lg-3 .card .card-body {
display: flex;
flex-direction: column;
flex: 1;
}
body:has(.form[action="/f/13"]) .grid.cols-lg-3 .card .card-body p:last-child {
margin-top: auto;
}
/* Novus band: readable body copy on the navy gradient */
body:has(.form[action="/f/13"]) .section--bg-strong .rich-text {
color: #f2f4fb;
}
/* Slightly larger page headings (desktop only; the responsive ladder
above already owns <=1023px) */
@media (min-width: 1024px) {
body:has(.form[action="/f/13"]) .heading--h1 { font-size: 3rem; line-height: 1.15; }
body:has(.form[action="/f/13"]) .heading--h2 { font-size: 2.25rem; }
}
/*
sc-webdev-rev-3 (2026-11-02) — 3 fixes on the page-95 revision, scoped
to body:has(.form[action="/f/13"]) like every rev-2 block:
1. Hero eyebrow "Professional Web Services" in the hero button orange.
rev-3b correction: the original :has(.slider) guard never matched —
the hero grid has NO slider (right column is the reserved illustration
slot). Replaced with :has(.heading--h1): only the hero grid contains
the page H1, so it still discriminates the eyebrow from the form
side-panel phone strong (S9 grid has no h1).
Source: theme 3 main.css @media(min-width:900px)
.btn--primary,.utility-cta{background:#b85b00} — the rule that paints
"Start a Website Project" in this hero (narrow tiers paint
--color-primary-600 #b35809; #b85b00 is the desktop value).
2. Testimonial quote text: too light on white -> near-black.
#17181a (between neutral-800 #0b0d0f and neutral-900 #08090b).
Navy-band (bg-strong) copy untouched.
Rollback: remove this block from site custom_css.
*/
body:has(.form[action="/f/13"]) .grid:has(.heading--h1) .stack > .rich-text:first-child > p:first-child > strong {
color: #b85b00;
}
/* Testimonials: quote copy on white cards -> near-black for legibility.
Only the long quote paragraph (first p); stars keep their gold,
signature lines keep their current weight/color. */
body:has(.form[action="/f/13"]) .card .card-body .rich-text > p:first-child {
color: #17181a;
}
/* ---- sc-webdev-rev-4 item 2: call button hover -> orange ----
Scope: the hero call button is the ONLY cta_webdev_call on the site
(data-track census: 0 on all live pages; 1 on draft 95 preview). */
body:has(.form[action="/f/13"]) a.btn--secondary[data-track="cta_webdev_call"]:hover {
color: #b85b00;
}
/* ---- sc-webdev-rev-4 item 4: process card titles padding ----
Scope: the How-a-project-works grid is the ONLY cols-lg-5 grid
site-wide (tree census + live census 0 everywhere else). */
body:has(.form[action="/f/13"]) .grid.cols-lg-5 .card .card-title {
padding-left: 10px;
}
/*
shortcut.solutions — web-development page (page 95) side-panel phone tap-to-call.
sc-webdev-rev-4c: the form-panel number is now wrapped in a real tel: anchor in
the page tree. This rule keeps its inherited look (no underline, inherited color)
and is gated on form 13 (page 95 only) like the rest of the page-95 block.
*/
body:has(.form[action="/f/13"]) .grid .stack .rich-text a[href^="tel:"]{
text-decoration:none;
color:inherit;
}
/*
sc-webdev-rev-4c: mobile call row as a REAL anchor above the header.
Replaces the removed .site-header::before generated-content row — pseudo-element
content is not in the DOM and cannot be a link. Rendered by theme 3
templates/header.html as
as the first node before