immediately following a hero gets its top padding
tightened to the hero-to-next token. Combinator specificity
(0,1,1) wins over the section's own class rule (0,1,0), so each
section's intrinsic padding is preserved everywhere EXCEPT
directly after a hero. Heroes themselves set their bottom
padding to the same token, producing a symmetric seam.
New heroes: add the selector to the list below + set the new
hero's own bottom padding to var(--brb-hero-to-next).
============================================================ */
.hero + section,
.intro + section,
.work-hero + section,
.contact-hero + section,
.wd-hero + section,
.ind-hero + section,
.faq-hero + section,
.blog-hero + section,
.landing-hero + section,
.archive-hero + section,
.studio-hero + section,
.aia-hero + section,
.reviews-page__hero + section {
padding-top: var(--brb-hero-to-next);
}
/* ============================================================
Reset + Base
============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html {
scroll-behavior: smooth;
overflow-x: hidden;
/* Fix round 2 (Finding 4): the header now genuinely sticks (Fix round
1), so in-page anchors (.faq-jumpnav links, and any other #hash
target) landed with their first ~116px hidden behind it. This is
sitewide on purpose — every anchor target benefits, not just the
four call-out pages. Reconciled against the handful of per-element
`scroll-margin-top` declarations below (see each) so the two don't
add together and over-scroll.
--brb-substicky-h is the height of a SECOND sticky chrome bar where a
template stacks one under the header (.faq-jumpnav on /faqs/ is the
only one left — the service-page .brb-subnav bar that used to share
this term was removed sitewide 2026-07-30, once the header itself
became genuinely sticky and the second bar was redundant). Published
by site-chrome.js from the live element; 0px when there isn't one, or
when the bar is display:none at the current breakpoint. Without it an
anchor lands behind that second bar — /faqs/ was 57px short. */
scroll-padding-top: calc(var(--brb-header-h, 117px) + var(--brb-substicky-h, 0px) + 16px);
}
body {
font-family: var(--brb-font-body);
font-size: 16px;
line-height: 1.7;
color: var(--brb-text);
background: var(--brb-surface);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* `overflow-x: hidden` on html/body computes overflow-y: auto, which makes
them scroll containers and silently defeats `position: sticky` on the
header — the declared sticky nav had never actually pinned. `clip` gives
the same horizontal containment without creating a scroll container
(`clip` does NOT coerce the other axis, so overflow-y stays `visible`).
Guarded by @supports so pre-16 Safari keeps the old (already-broken-
sticky) behaviour rather than losing overflow containment.
ROOT ONLY, deliberately. `overflow-x: clip` on the root has open WebKit
bugs where Safari also clips the Y axis — worst case, the page does not
scroll vertically on iPhone — so the smaller the surface the better. The
root's overflow propagates to the VIEWPORT, so setting it on `html` alone
still contains horizontal overflow for the whole document; `body` carried
`overflow-x: hidden` only as a belt-and-braces duplicate, and dropping it
is what actually stops `body` being a scroll container. That is the whole
of the sticky fix — the header pins because `body` is no longer a scroller,
not because `body` clips. Do not re-add overflow to `body`. */
@supports (overflow: clip) {
html {
overflow-x: clip;
}
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--brb-font-display);
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1.1;
color: inherit;
margin: 0;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
/* ============================================================
Utility
============================================================ */
.wrap {
max-width: 1200px;
margin-inline: auto;
padding-inline: var(--brb-pad-page);
}
.wrap-narrow {
max-width: 880px;
margin-inline: auto;
padding-inline: var(--brb-pad-page);
}
.eyebrow {
display: inline-block;
font-family: var(--brb-font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--brb-accent);
}
.eyebrow--muted { color: var(--brb-text-muted); }
.eyebrow--on-dark { color: var(--brb-accent); }
/* Scroll reveal */
.reveal {
opacity: 0;
transform: translateY(28px);
transition:
opacity 900ms var(--brb-ease-entrance),
transform 900ms var(--brb-ease-entrance);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 80ms; }
.reveal-delay-2 { transition-delay: 160ms; }
.reveal-delay-3 { transition-delay: 240ms; }
.reveal-delay-4 { transition-delay: 320ms; }
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--brb-font-body);
font-size: 14px;
font-weight: 500;
padding: 12px 20px;
border-radius: 999px;
transition: all 200ms var(--brb-ease);
cursor: pointer;
border: 1px solid transparent;
position: relative;
overflow: hidden;
isolation: isolate;
}
.btn--primary {
background: var(--brb-accent);
color: var(--brb-anchor);
}
.btn--primary::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--brb-anchor);
transform: translateY(101%);
transition: transform 380ms cubic-bezier(0.25, 0.7, 0.1, 1);
}
.btn--primary:hover,
.btn--primary:focus-visible {
background: var(--brb-accent);
color: var(--brb-text-on-dark);
}
.btn--primary:hover::before,
.btn--primary:focus-visible::before {
transform: translateY(0);
}
.btn--ghost-dark {
background: transparent;
color: var(--brb-text-on-dark);
border-color: var(--brb-border-on-dark-strong);
}
.btn--ghost-dark:hover { border-color: var(--brb-text-on-dark); }
.btn--ghost-light {
background: transparent;
color: var(--brb-text);
border-color: var(--brb-border-strong);
}
.btn--ghost-light:hover { border-color: var(--brb-text); }
.btn .btn__down {
display: inline-block;
transition: transform 300ms var(--brb-ease);
}
.btn:hover .btn__down { transform: translateY(3px); }
/* Prevent pseudo-element gradients from causing horizontal scroll.
H.3.3 audit: .who dropped (renamed to .studio-who in H.2.1, no
rule block left); .final renamed to .studio-final (H.3.3 ship).
.hero retained — legacy class still active on /audit/ + other pages.
Per-section studio-* members self-contain overflow-x: hidden in
their own rules (see .studio-work, .studio-reviews, .studio-industries). */
.hero,
.studio-final,
.work-hero,
.contact-hero,
.wall,
.nudge,
.alt-paths {
overflow-x: hidden;
}
/* ============================================================
Site Header & Navigation
============================================================ */
.site-header {
position: sticky;
top: 0;
z-index: 100;
background: transparent;
color: var(--brb-text-on-dark);
border-bottom: none;
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 36px 0;
gap: 32px;
}
/* Fix round 2 (Finding 1): `.nav`'s own `padding: 36px 0` zeroes the
inline padding `.wrap` would otherwise contribute, so the pill's inset
formula (which assumes the wordmark/CTA sit `--brb-pad-page` in from
the edge) was computed against a containing block whose content
actually sat only a few px in. Restoring the inline padding here — not
the vertical 36px, which sets header height — puts nav content back at
the intended inset so the pill can wrap it with real breathing room on
every side. Precedent: the mobile breakpoint below already gives `.nav`
its own inline padding (8px) independent of the vertical value. */
.nav { padding-inline: var(--brb-nav-pad); }
/* Direction E — the pill is painted behind the nav row, so no layout
geometry changes and the header keeps its CTA-driven height. */
.nav { position: relative; }
.nav::before {
content: "";
position: absolute;
inset-block: 20px;
inset-inline: calc(var(--brb-nav-pad) - 20px);
border-radius: 999px;
background: rgba(26, 26, 26, 0.72);
-webkit-backdrop-filter: blur(14px);
backdrop-filter: blur(14px);
border: 1px solid var(--brb-border-on-dark);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
opacity: 1;
transition: opacity 450ms var(--brb-ease), inset-inline 450ms var(--brb-ease);
pointer-events: none;
}
/* Nav content sits above the pill. */
.nav > * { position: relative; z-index: 1; }
/* Overlay templates: the pill is OPAQUE BY DEFAULT — same safe state as
every other page (see .nav::before above, opacity: 1 unconditionally).
No-JS / JS-failure degrades to "pill always visible," never to "pill
never appears." site-chrome.js adds .is-transparent to .site-header
only once it confirms this is an overlay page at the very top of its
dark hero, which fades the pill out so the transparent-over-hero look
can render; scrolling past the utility strip drops the class and the
pill fades back in. (Before 2026-07-30 this was inverted — the pill
started hidden and JS had to add .is-pinned to reveal it, so a
blocked/broken script left cream nav text over a cream page body with
no backing on all 12 overlay pages.) An earlier revision also narrowed
the pill by 30px on scroll as a flourish, but the pill only clears its
own contents by 20px, so narrowing pushed the wordmark 2px OUTSIDE the
pill's left edge and left the CTA 6px from the right. Every state now
measures the same 28px / 36px breathing room. */
.brb-nav-overlay .site-header.is-transparent .nav::before {
opacity: 0;
}
/* ------------------------------------------------------------
Overlay hero pull-up (all dark-hero templates)
`.site-header` is transparent, so on an overlay page the hero has to
run UP behind it or the cream paints a light shelf across the
whole header row. Each hero is pulled up by exactly the header height
and given that height back as top padding — its own clamp() repeated
verbatim — so the hero grows 116px taller upward while every piece of
its content stays pixel-identical to where it sits today.
One rule per hero class because their rest padding differs:
.hero /free-strategy-audit/ clamp(80px, 12vw, 160px)
.work-hero /work/ clamp(32px, 4vw, 56px)
.wd-hero 6 national + 2 location pages clamp(72px, 10vw, 140px)
.brb-music-hero /live-music-san-luis-obispo/ clamp(64px, 11vw, 132px)
Keep these in sync if a base hero padding changes. The homepage's
.studio-hero has its own pull-up next to the video-hero rules (it does
NOT reuse its rest padding — the video hero is deliberately tighter).
The gate that adds .brb-nav-overlay is br_page_uses_nav_overlay()
in functions.php; that docblock owns the page list.
------------------------------------------------------------ */
.brb-nav-overlay .hero,
.brb-nav-overlay .work-hero,
.brb-nav-overlay .wd-hero,
.brb-nav-overlay .brb-music-hero {
margin-top: calc(var(--brb-header-h, 117px) * -1);
}
.brb-nav-overlay .hero {
padding-top: calc(var(--brb-header-h, 117px) + clamp(80px, 12vw, 160px));
}
.brb-nav-overlay .work-hero {
padding-top: calc(var(--brb-header-h, 117px) + clamp(32px, 4vw, 56px));
}
.brb-nav-overlay .wd-hero {
padding-top: calc(var(--brb-header-h, 117px) + clamp(72px, 10vw, 140px));
}
.brb-nav-overlay .brb-music-hero {
padding-top: calc(var(--brb-header-h, 117px) + clamp(64px, 11vw, 132px));
}
@media (prefers-reduced-motion: reduce) {
.nav::before { transition: none; }
}
.nav-logo {
font-family: var(--brb-font-display);
font-size: 22px;
letter-spacing: -0.02em;
white-space: nowrap;
line-height: 1;
display: inline-flex;
align-items: center;
text-decoration: none;
color: inherit;
/* Element-level inset: unpins logo from .wrap left edge so the
two-layer space (wrap padding + element margin) reads as
intentional breathing room, not a hard container boundary. */
margin-left: 8px;
/* The wordmark is an ![]()
whose SVG has no preserveAspectRatio override,
so it defaults to xMidYMid meet — meaning a squeezed box does NOT
distort it, it silently letterboxes the artwork down and centres it.
`.nav-logo` shrinking was therefore invisible as a layout bug and
visible only as "the logo looks small": at 1600px the 36px wordmark was
rendering at 20.4px, at 1440px 23px, at 1290px 25.4px — while mobile,
which has no nav links to compete with, rendered the full 36px. The
header logo was literally larger on a phone than on a desktop. Pinning
flex-shrink here makes `height` mean what it says; the room for it comes
from --brb-nav-pad + the .nav-links gap clamp. */
flex-shrink: 0;
}
.nav-logo__img {
height: 40px;
width: auto;
display: block;
}
/* 961-1199px (iPad landscape, small laptops) is the one band where the full
desktop nav genuinely cannot fit a full-size wordmark — 8 links + CTA leave
under 200px for it. Hand the logo back to flex there so it auto-fits rather
than pushing the "Free audit" CTA off the right edge. It still lands larger
than before this change, because the padding + gap reductions apply here too. */
@media (min-width: 961px) and (max-width: 1199px) {
.nav-logo { flex-shrink: 1; }
}
/* Below the desktop breakpoint the wordmark shares the row with only the
hamburger, but "Back Road Web Design." is a 7.9:1 lockup — at 40px it is
316px wide, and 390px of viewport leaves 359px of usable row once the 40px
toggle is counted. 36px (284px) keeps a 35px gap; 320px phones need 30px. */
@media (max-width: 960px) {
.nav-logo__img { height: 36px; }
}
@media (max-width: 380px) {
.nav-logo__img { height: 30px; }
}
.nav-logo__img--footer {
height: 28px;
}
.nav-logo .thin { font-weight: 300; }
.nav-logo .bold { font-weight: 700; }
.nav-logo .dot { color: var(--brb-accent); font-weight: 400; }
.nav-links {
display: flex;
align-items: center;
/* Was a flat 30px. Nine gaps at 30px is 270px of the header row, which is
more than the wordmark itself gets — the clamp keeps the airy spacing on
wide screens and buys the logo back ~60px where the row is tight. */
gap: clamp(14px, 1.2vw, 24px);
font-size: 14px;
}
.nav-links a:not(.nav-cta) {
position: relative;
display: grid;
overflow: hidden;
height: 1.4em;
line-height: 1.4em;
color: var(--brb-text-on-dark);
/* flex: none is load-bearing, not tidying. These anchors carry
`overflow: hidden` for the roll-up hover, so any width the flex
line takes off them clips the label instead of wrapping it. The
design intent (playbook-design.md § Navigation) is that the anchor
sizes to the wider of its two stacked labels, which only holds if
it cannot shrink. Adding the 5th service link in 2026-07 put the
bar at capacity and shrank EVERY label by 1-6px — all eight lost
their last character, not just the new one. Measured after:
worst shortfall 6.3px -> 0.5px (sub-pixel), row overflow 0. */
flex: none;
}
.nav-links a:not(.nav-cta) .nav-link__l {
grid-area: 1 / 1;
display: block;
white-space: nowrap;
transform: translateY(0);
transition: transform 380ms cubic-bezier(0.25, 0.7, 0.1, 1);
}
.nav-links a:not(.nav-cta) .nav-link__l--alt {
font-family: var(--brb-font-display);
font-style: italic;
color: var(--brb-accent);
transform: translateY(100%);
}
.nav-links a:not(.nav-cta):hover .nav-link__l,
.nav-links a:not(.nav-cta):focus-visible .nav-link__l {
transform: translateY(-100%);
}
.nav-links a:not(.nav-cta):hover .nav-link__l--alt,
.nav-links a:not(.nav-cta):focus-visible .nav-link__l--alt {
transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
.nav-links a:not(.nav-cta) .nav-link__l { transition: none; }
}
.nav-divider {
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--brb-neutral-500);
}
.nav-cta {
background: var(--brb-accent);
color: var(--brb-anchor) !important;
padding: 10px 18px;
border-radius: 999px;
font-weight: 500;
transition: background 200ms var(--brb-ease), color 200ms var(--brb-ease);
/* Element-level inset: pulls the high-contrast amber CTA off the
.wrap right edge so it doesn't visually pin to the container
boundary at viewport widths where padding alone can't compensate. */
margin-right: 16px;
position: relative;
overflow: hidden;
isolation: isolate;
/* Companion to `flex: none` on .nav-links a:not(.nav-cta). Giving the
other links their full width left this pill as the only shrinkable
item in the row, so it absorbed ALL the compression: it squeezed to
73x68 and wrapped "Free audit" onto two lines, rendering as an amber
CIRCLE instead of a pill. A pill-shaped CTA must never wrap — its
border-radius: 999px turns any second line into a circle. */
flex: none;
white-space: nowrap;
}
.nav-cta::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--brb-anchor);
transform: translateY(101%);
transition: transform 380ms cubic-bezier(0.25, 0.7, 0.1, 1);
}
.nav-cta:hover { color: var(--brb-text-on-dark) !important; }
.nav-cta:hover::before { transform: translateY(0); }
/* Placed after the .btn / .btn--primary / .nav-cta / .btn__down rules
above (equal-specificity ::before/child selectors) so this override
wins the cascade regardless of source order elsewhere in the file —
a copy positioned before .nav-cta::before's own definition would be
silently overridden by it. */
@media (prefers-reduced-motion: reduce) {
.btn--primary::before,
.nav-cta::before,
.btn .btn__down { transition: none; }
}
/* Hamburger toggle — hidden on desktop */
.nav-toggle {
display: none;
background: transparent;
border: 1px solid var(--brb-border-on-dark-strong);
color: var(--brb-text-on-dark);
width: 40px;
height: 40px;
padding: 0;
border-radius: 6px;
cursor: pointer;
position: relative;
align-items: center;
justify-content: center;
transition: border-color 200ms var(--brb-ease), background 200ms var(--brb-ease);
}
.nav-toggle:hover {
border-color: var(--brb-text-on-dark-muted);
}
/* Three-line hamburger icon, animates to X when menu is open */
.nav-toggle__icon {
position: relative;
display: block;
width: 18px;
height: 2px;
background: var(--brb-text-on-dark);
transition: background 200ms var(--brb-ease);
}
.nav-toggle__icon::before,
.nav-toggle__icon::after {
content: '';
position: absolute;
left: 0;
width: 100%;
height: 2px;
background: var(--brb-text-on-dark);
transition: transform 300ms var(--brb-ease), top 300ms var(--brb-ease);
}
.nav-toggle__icon::before { top: -6px; }
.nav-toggle__icon::after { top: 6px; }
/* Open state: lines morph into an X */
.nav-toggle.is-open .nav-toggle__icon {
background: transparent;
}
.nav-toggle.is-open .nav-toggle__icon::before {
top: 0;
transform: rotate(45deg);
}
.nav-toggle.is-open .nav-toggle__icon::after {
top: 0;
transform: rotate(-45deg);
}
/* Mobile menu panel — hidden on desktop, slides down on mobile when open */
.nav-mobile {
display: none;
}
/* ============================================================
Site utility nav — above the main header
Editorial dark bar: tracked uppercase + dot separators + amber rule.
Hidden on mobile; secondary destinations appear in nav-mobile instead.
============================================================ */
.site-utility-nav {
background: #0A0A0A;
border-bottom: 1px solid var(--brb-accent);
font-family: var(--brb-font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.10em;
text-transform: uppercase;
color: rgba(250, 247, 242, 0.82);
line-height: 1;
}
.site-utility-nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 0;
}
.site-utility-nav__links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: 0;
/* Element-level inset: mirrors .nav-logo's 8px on the main header
so the utility nav's leftmost link (Journal) doesn't pin to the
.wrap left edge while the phone is inset on the right. Smaller
than .site-utility-nav__phone's 16px because typographic links
are less of a visual magnet than the amber CTA. */
margin-left: 8px;
}
.site-utility-nav__links li {
display: inline-flex;
align-items: center;
}
.site-utility-nav__links li + li::before {
content: '·';
color: rgba(250, 247, 242, 0.25);
margin: 0 14px;
letter-spacing: 0; /* don't track the separator dot */
}
.site-utility-nav a {
color: rgba(250, 247, 242, 0.82);
text-decoration: none;
transition: color 200ms var(--brb-ease);
}
.site-utility-nav a:hover,
.site-utility-nav a.is-current {
color: var(--brb-accent);
}
.site-utility-nav__phone {
display: inline-flex;
align-items: center;
gap: 8px;
white-space: nowrap;
/* Element-level inset: matches .nav-cta so the phone (utility nav
right edge) and audit button (main header right edge) both sit
16px inside the .wrap container — keeps the two right edges in
vertical alignment with each other. */
margin-right: 16px;
}
.site-utility-nav__phone-icon {
flex-shrink: 0;
opacity: 0.75;
transition: opacity 200ms var(--brb-ease);
}
.site-utility-nav__phone:hover .site-utility-nav__phone-icon {
opacity: 1;
}
@media (max-width: 768px) {
.site-utility-nav { display: none; }
}
/* Mobile-menu utility group (shown when site-utility-nav is hidden) */
.nav-mobile__divider {
display: block;
height: 1px;
background: var(--brb-border-on-dark);
margin: 8px 0 4px;
}
.nav-mobile__util {
font-size: 14px;
color: rgba(250, 247, 242, 0.65);
}
.nav-mobile__util:hover {
color: var(--brb-accent);
}
.nav-mobile__phone {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 4px;
}
.nav-mobile__phone svg {
flex-shrink: 0;
opacity: 0.75;
}
/* ============================================================
Mobile nav (breakpoint)
============================================================ */
@media (max-width: 960px) {
/* Extra breathing room inside header on mobile so logo/toggle
don't feel pinched against the wrap padding */
.nav {
padding-left: 8px;
padding-right: 8px;
}
/* Fix round 2 (Finding 1): the desktop pill inset scales continuously
with --brb-pad-page (a vw-driven clamp), but this block pins .nav's
own padding to a flat 8px — so between ~654px and 960px the scaling
inset would overtake the fixed-offset logo/toggle and poke outside
the pill. Pin the inset too, sized against the actual 8px mobile nav
padding + the logo/toggle's own margins, so it's correct across the
whole 320-960 range instead of only at the narrow end where the
vw-driven value happens to clamp low enough by coincidence. */
.nav::before {
inset-inline: 4px;
}
.nav-links { display: none; }
.nav-toggle { display: inline-flex; }
.nav-mobile {
display: block;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--brb-anchor);
border-bottom: 1px solid var(--brb-border-on-dark);
max-height: 0;
overflow: hidden;
transition: max-height 400ms var(--brb-ease);
}
.nav-mobile.is-open {
max-height: 600px;
}
.nav-mobile__inner {
padding: 8px var(--brb-pad-page) 24px;
display: flex;
flex-direction: column;
}
.nav-mobile a {
display: block;
padding: 14px 0;
font-size: 16px;
color: var(--brb-text-on-dark);
border-bottom: 1px solid var(--brb-border-on-dark);
transition: color 200ms var(--brb-ease);
}
.nav-mobile a:last-child {
border-bottom: none;
}
.nav-mobile a:hover,
.nav-mobile a:focus {
color: var(--brb-accent);
}
.nav-mobile__divider {
border-bottom: 1px solid var(--brb-border-on-dark-strong);
margin: 4px 0;
}
.nav-mobile .nav-cta {
margin-top: 16px;
text-align: center;
padding: 14px 16px;
border-bottom: none;
color: var(--brb-anchor) !important;
}
/* Fix round 1, Finding 1 (same shape, second instance): this scope's
unconditional color above and the base .nav-cta:hover flip are both
(0,2,0) + !important, so the later-in-source rule above would win
the tie and the label would stay dark against the risen ink. This
selector needs to be more specific, not just later. */
.nav-mobile .nav-cta:hover {
color: var(--brb-text-on-dark) !important;
}
}
/* ============================================================
01 · Hero
============================================================ */
.hero {
background: var(--brb-anchor);
color: var(--brb-text-on-dark);
padding: clamp(80px, 12vw, 160px) 0 var(--brb-hero-to-next);
/* Reserve hero height so font swap / animation entry doesn't shift layout.
Lower bound matches measured mobile height; clamp keeps it sane on iOS
where vh fluctuates with the address bar. */
min-height: clamp(540px, 70vh, 900px);
position: relative;
overflow: hidden;
}
.hero__inner { position: relative; }
.hero__eyebrow {
margin-bottom: clamp(24px, 4vw, 40px);
opacity: 0;
animation: fadeUp 400ms var(--brb-ease-entrance) 0ms forwards;
}
.hero__headline {
font-size: clamp(40px, 6.5vw, 88px);
line-height: 1.02;
margin-bottom: clamp(24px, 4vw, 40px);
max-width: 14ch;
opacity: 0;
animation: fadeUp 400ms var(--brb-ease-entrance) 80ms forwards;
}
.hero__headline .accent {
color: var(--brb-accent);
font-style: italic;
font-weight: 400;
}
.hero__subhead {
font-size: clamp(15px, 1.4vw, 18px);
line-height: 1.65;
color: var(--brb-text-on-dark-muted);
max-width: 56ch;
margin-bottom: clamp(32px, 5vw, 48px);
opacity: 0;
animation: fadeUp 400ms var(--brb-ease-entrance) 160ms forwards;
}
.hero__ctas {
display: flex;
gap: 12px;
flex-wrap: wrap;
opacity: 0;
animation: fadeUp 400ms var(--brb-ease-entrance) 240ms forwards;
}
@keyframes fadeUp {
to { opacity: 1; transform: translateY(0); }
from { opacity: 0; transform: translateY(24px); }
}
/* ============================================================
Footer
============================================================ */
.site-footer {
background: #0F0F0F;
color: var(--brb-text-on-dark-muted);
padding: 64px 0 32px;
font-size: 13px;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 48px;
padding-bottom: 48px;
border-bottom: 1px solid var(--brb-border-on-dark);
}
@media (max-width: 840px) {
.footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}
.footer-brand .nav-logo { font-size: 22px; }
.footer-brand p { margin-top: 12px; line-height: 1.6; max-width: 32ch; }
/* Footer newsletter — small "Stay in touch" signup under the logo.
Renders FluentForm form 4 (Mailchimp-wired); these rules compact +
rebrand FluentForm's default output (blue→amber, inline, on-dark). */
.footer-newsletter { margin-top: 22px; max-width: 360px; }
.footer-newsletter__label {
display: block;
font-family: var(--brb-font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--brb-text-on-dark);
margin-bottom: 12px;
}
.footer-newsletter .fluentform { margin: 0; }
.footer-newsletter .frm-fluent-form > fieldset { border: none; margin: 0; padding: 0; min-inline-size: 0; }
.footer-newsletter .ff-el-group { margin: 0; }
.footer-newsletter .ff-el-input--content { width: 100%; padding: 0; }
/* form 4 (email col-1 + submit col-2) styled as one underlined row — minimal/editorial */
.footer-newsletter .ff-t-container.ff-column-container {
display: flex;
align-items: center;
gap: 12px;
margin: 0;
border-bottom: 1px solid rgba(217, 119, 6, 0.55);
transition: border-color 200ms var(--brb-ease);
}
.footer-newsletter .ff-t-container.ff-column-container:focus-within { border-bottom-color: var(--brb-accent); }
.footer-newsletter .ff-t-cell { padding: 0; }
.footer-newsletter .ff-t-column-1 { flex: 1 1 auto; min-width: 0; }
.footer-newsletter .ff-t-column-2 { flex: 0 0 auto; }
.footer-newsletter .ff_submit_btn_wrapper { margin: 0; }
.footer-newsletter .ff-el-input--label {
position: absolute; width: 1px; height: 1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.footer-newsletter .ff-el-form-control {
width: 100%;
padding: 9px 0;
border: none !important;
border-radius: 0 !important;
background: transparent !important;
color: var(--brb-text-on-dark) !important;
font-family: var(--brb-font-body);
font-size: 14px;
box-shadow: none !important;
}
.footer-newsletter .ff-el-form-control::placeholder { color: rgba(250, 247, 242, 0.45); }
.footer-newsletter .ff-el-form-control:focus {
outline: none !important;
border: none !important;
box-shadow: none !important;
}
.footer-newsletter .ff-btn-submit {
margin: 0;
padding: 0;
border: none !important;
outline: none !important;
background: transparent !important;
color: var(--brb-accent) !important;
font-family: var(--brb-font-body);
font-size: 9.5px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
white-space: nowrap;
box-shadow: none !important;
cursor: pointer;
transition: color 200ms var(--brb-ease);
}
.footer-newsletter .ff-btn-submit::after { content: "\2009\2192"; }
.footer-newsletter .ff-btn-submit:hover,
.footer-newsletter .ff-btn-submit:focus,
.footer-newsletter .ff-btn-submit:focus-visible { color: #E8920C !important; outline: none !important; box-shadow: none !important; }
.footer-newsletter .ff-message-success,
.footer-newsletter .text-danger,
.footer-newsletter .error { font-size: 12px; margin-top: 6px; }
@media (max-width: 640px) {
.footer-newsletter { margin-left: auto; margin-right: auto; }
}
.footer-col h4 {
font-family: var(--brb-font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--brb-text-on-dark);
margin-bottom: 16px;
}
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { color: var(--brb-text-on-dark-muted); transition: color 200ms var(--brb-ease); }
.footer-col a:hover { color: var(--brb-accent); }
/* Location links under each service — rendered as small city pills
(internal linking to geo pages). Replaces the earlier indented sublist. */
.footer-sublist {
list-style: none;
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 6px;
margin: 8px 0 2px;
padding: 0;
}
.footer-sublist a {
display: inline-block;
font-size: 12px;
line-height: 1;
padding: 5px 10px;
border-radius: 20px;
background: color-mix(in srgb, var(--brb-text-on-dark-muted) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--brb-text-on-dark-muted) 18%, transparent);
color: var(--brb-text-on-dark-muted);
opacity: 1;
transition: background 200ms var(--brb-ease), border-color 200ms var(--brb-ease), color 200ms var(--brb-ease);
}
.footer-sublist a:hover {
background: color-mix(in srgb, var(--brb-accent) 16%, transparent);
border-color: color-mix(in srgb, var(--brb-accent) 50%, transparent);
color: var(--brb-accent);
}
@media (max-width: 720px) {
.footer-col ul {
gap: 14px;
}
.footer-sublist {
gap: 7px;
margin-top: 9px;
}
.footer-sublist a {
font-size: 13px;
padding: 6px 12px;
}
}
/* Mobile: single centered column, reordered brand → Get in touch → Services →
Company. Placed after the base footer rules so these overrides win the
cascade (same specificity → later source order). */
@media (max-width: 640px) {
.footer-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 36px; }
.footer-grid > *:nth-child(1) { order: 1; } /* brand */
.footer-grid > *:nth-child(4) { order: 2; } /* Get in touch */
.footer-grid > *:nth-child(2) { order: 3; } /* Services */
.footer-grid > *:nth-child(3) { order: 4; } /* Company */
.footer-brand p { max-width: 40ch; margin-left: auto; margin-right: auto; }
.footer-brand__logo-link { display: inline-block; }
.footer-col ul { align-items: center; }
/* Drop the per-service city pills on mobile to keep the footer short —
the main service links remain. (.footer-col .footer-sublist to beat the
.footer-col ul base rule's specificity.) */
.footer-col .footer-sublist { display: none; }
}
.footer-bottom {
padding-top: 32px;
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 16px;
font-size: 12px;
}
/* ============================================================
==============================================================
ABOUT PAGE STYLES (.brb-about body class)
These styles support page-about.php. Class names are unique
to the About page except where they intentionally share the
homepage's design tokens (e.g., .final, .site-header).
==============================================================
============================================================ */
/* ============================================================
About · 01 · Intro
============================================================ */
.intro {
background: var(--brb-surface);
color: var(--brb-text);
padding: clamp(80px, 12vw, 160px) 0 var(--brb-hero-to-next);
position: relative;
overflow: hidden;
}
.intro__inner {
position: relative;
display: grid;
grid-template-columns: 1fr auto;
gap: clamp(32px, 5vw, 80px);
align-items: center;
max-width: 1200px;
margin-inline: auto;
}
.intro__content {
max-width: 640px;
}
@media (max-width: 900px) {
.intro__inner {
grid-template-columns: 1fr;
}
.intro__content {
max-width: 100%;
}
}
.intro__eyebrow { margin-bottom: clamp(24px, 4vw, 40px); }
.intro__headline {
font-size: clamp(40px, 5.5vw, 80px);
line-height: 1.04;
margin-bottom: clamp(28px, 4vw, 44px);
letter-spacing: -0.03em;
}
.intro__headline em {
font-style: italic;
color: var(--brb-accent);
font-weight: 400;
}
.intro__body {
font-size: clamp(16px, 1.35vw, 19px);
line-height: 1.7;
color: var(--brb-text-muted);
max-width: 54ch;
}
.intro__body p + p { margin-top: 1.2em; }
/* Portrait on the right */
.intro__portrait {
position: relative;
width: clamp(240px, 26vw, 380px);
aspect-ratio: 4 / 5;
flex-shrink: 0;
opacity: 0;
transform: translateY(30px) scale(0.96);
transition: opacity 1200ms var(--brb-ease-entrance) 400ms, transform 1200ms var(--brb-ease-entrance) 400ms;
}
.intro__inner .intro__portrait {
animation: intro-portrait-in 1400ms var(--brb-ease-entrance) 600ms forwards;
}
@keyframes intro-portrait-in {
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@media (max-width: 900px) {
.intro__portrait {
width: clamp(220px, 50vw, 300px);
margin: 0 auto;
}
}
.intro__portrait-frame {
position: relative;
width: 100%;
height: 100%;
border-radius: 8px;
overflow: hidden;
z-index: 2;
box-shadow:
0 22px 48px -18px rgba(26, 26, 26, 0.22),
0 10px 22px -10px rgba(26, 26, 26, 0.14);
transition: transform 600ms var(--brb-ease);
}
.intro__portrait-frame:hover {
transform: translateY(-4px);
}
.intro__portrait-frame img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.intro__portrait-accent {
position: absolute;
top: 16px;
left: 16px;
width: 100%;
height: 100%;
border: 2px solid var(--brb-accent);
border-radius: 8px;
z-index: 1;
opacity: 0.55;
transition: all 600ms var(--brb-ease);
}
.intro__portrait:hover .intro__portrait-accent {
top: 20px;
left: 20px;
opacity: 0.75;
}
/* ============================================================
About · 02 · Path Here
============================================================ */
.path {
padding: var(--brb-hero-to-next) 0 clamp(24px, 3vw, 48px);
background: var(--brb-surface);
}
.path__inner {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
.path__head {
text-align: center;
max-width: 640px;
margin-left: auto;
margin-right: auto;
margin-bottom: clamp(40px, 5vw, 64px);
}
.path__title {
font-size: clamp(40px, 5.5vw, 72px);
line-height: 1.05;
margin-top: 16px;
max-width: 18ch;
margin-left: auto;
margin-right: auto;
}
.path__title em { font-style: italic; color: var(--brb-accent); }
.path__body {
max-width: 62ch;
margin-left: auto;
margin-right: auto;
text-align: center;
font-size: 17px;
line-height: 1.75;
color: var(--brb-text);
}
.path__body p + p { margin-top: 1.4em; }
.path__body strong {
font-weight: 500;
color: var(--brb-text);
}
/* ============================================================
About · 02.5 · Credentials (masthead style)
============================================================ */
.creds {
background: var(--brb-surface);
padding: 0 0 clamp(16px, 2vw, 28px);
}
.creds__inner {
display: flex;
flex-direction: column;
align-items: center;
gap: clamp(14px, 1.8vw, 20px);
text-align: center;
}
.creds__rule {
width: 100%;
max-width: 360px;
height: 1px;
background: var(--brb-border-strong);
}
.creds__label {
color: var(--brb-accent);
}
.creds__list {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: clamp(12px, 1.5vw, 18px);
font-family: var(--brb-font-display);
font-style: italic;
font-weight: 400;
font-size: clamp(18px, 2vw, 24px);
line-height: 1.4;
color: var(--brb-text);
max-width: 100%;
}
.creds__item {
display: inline-flex;
align-items: baseline;
gap: 8px;
white-space: nowrap;
}
.creds__note {
font-family: var(--brb-font-body);
font-style: normal;
font-size: 0.6em;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--brb-text-muted);
white-space: nowrap;
}
.creds__sep {
color: var(--brb-accent);
font-style: normal;
font-size: 0.8em;
opacity: 0.5;
}
@media (max-width: 640px) {
.creds__sep { display: none; }
.creds__list { flex-direction: column; gap: 10px; }
}
/* ============================================================
About · 06 · Beyond the Work
============================================================ */
.beyond {
padding: clamp(80px, 11vw, 160px) 0;
background: var(--brb-surface);
border-top: 1px solid var(--brb-border);
}
.beyond__grid {
display: grid;
grid-template-columns: 1fr 1.2fr;
gap: clamp(40px, 6vw, 96px);
align-items: center;
}
@media (max-width: 840px) {
.beyond__grid { grid-template-columns: 1fr; }
}
.beyond__photo {
aspect-ratio: 4 / 5;
background: var(--brb-neutral-100);
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
color: var(--brb-text-muted);
font-size: 13px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.beyond__content h2 {
font-size: clamp(32px, 4.5vw, 56px);
line-height: 1.1;
margin-top: 16px;
margin-bottom: 24px;
max-width: 14ch;
}
.beyond__content h2 em {
font-style: italic;
color: var(--brb-accent);
}
.beyond__content p {
font-size: 17px;
line-height: 1.75;
color: var(--brb-text-muted);
max-width: 52ch;
}
.beyond__content p + p { margin-top: 1.2em; }
/* ============================================================
==============================================================
AUDIT PAGE STYLES (.brb-audit body class)
These styles support page-audit.php. Reuses existing .hero,
.site-header, .site-footer, .btn styles from the base theme.
Adds new sections: .included, .process, .proof, .form-section,
.faq, .nudge.
==============================================================
============================================================ */
/* ============================================================
Audit · Button size modifier
============================================================ */
.btn--large {
font-size: 16px;
padding: 16px 28px;
}
/* ============================================================
Audit · Hero additions
Reuses .hero, .hero__inner, .hero__eyebrow, .hero__headline,
.hero__subhead, .hero__ctas from the homepage styles.
Adds italic em accent and secondary note.
============================================================ */
.brb-audit .hero__headline em {
font-style: italic;
color: var(--brb-accent);
font-weight: 400;
}
.hero__secondary-note {
margin-top: 20px;
font-size: 14px;
color: var(--brb-text-on-dark-subtle);
}
.hero__secondary-note a {
color: var(--brb-text-on-dark);
border-bottom: 1px solid var(--brb-accent);
padding-bottom: 1px;
transition: color 200ms var(--brb-ease);
}
.hero__secondary-note a:hover {
color: var(--brb-accent);
}
/* ============================================================
Audit · 03 · Process
============================================================ */
.process {
padding: clamp(80px, 11vw, 160px) 0;
background: var(--brb-anchor);
color: var(--brb-text-on-dark);
/* Fix round 2 (Finding 4): removed the old hardcoded scroll-margin-top
(108px) — html's new scroll-padding-top covers this uniformly and the
two would otherwise stack and over-scroll past the target. */
}
.process__head {
margin-bottom: clamp(48px, 6vw, 80px);
max-width: 700px;
}
.process__title {
font-size: clamp(32px, 4.5vw, 56px);
margin-top: 12px;
max-width: 16ch;
}
.process__title em { font-style: italic; color: var(--brb-accent); }
.process__list {
display: grid;
gap: 1px;
background: var(--brb-border-on-dark);
border-top: 1px solid var(--brb-border-on-dark);
border-bottom: 1px solid var(--brb-border-on-dark);
}
.process-step {
background: var(--brb-anchor);
padding: clamp(28px, 3.5vw, 40px) 0;
display: grid;
grid-template-columns: 100px 1fr 2fr;
gap: clamp(24px, 4vw, 48px);
align-items: baseline;
}
@media (max-width: 840px) {
.process-step {
grid-template-columns: 1fr;
gap: 8px;
}
}
.process-step__num {
font-family: var(--brb-font-display);
font-size: clamp(40px, 4vw, 56px);
line-height: 1;
color: var(--brb-accent);
font-weight: 400;
}
.process-step__headline {
font-family: var(--brb-font-display);
font-size: clamp(22px, 2.4vw, 28px);
line-height: 1.2;
}
.process-step__body {
font-size: 16px;
line-height: 1.7;
color: var(--brb-text-on-dark-muted);
}
/* ============================================================
Audit · 05 · Form Section
============================================================ */
.form-section {
padding: clamp(80px, 11vw, 160px) 0;
background: var(--brb-anchor);
color: var(--brb-text-on-dark);
/* Fix round 2 (Finding 4): see .process above — covered by html's
scroll-padding-top now, removed to avoid double-offset. */
}
.form-section__head {
margin-bottom: clamp(40px, 5vw, 64px);
text-align: center;
}
.form-section__title {
font-size: clamp(40px, 5.5vw, 72px);
line-height: 1.05;
margin-top: 16px;
max-width: 16ch;
margin-inline: auto;
}
.form-section__title em { font-style: italic; color: var(--brb-accent); }
.form-section__sub {
font-size: 17px;
line-height: 1.6;
color: var(--brb-text-on-dark-muted);
max-width: 52ch;
margin: 20px auto 0;
}
.form-container {
max-width: 680px;
margin: 0 auto;
background: #232321;
border: 1px solid var(--brb-border-on-dark);
border-radius: 8px;
padding: clamp(32px, 4vw, 48px);
}
.form-field {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 24px;
}
.form-field label {
font-size: 13px;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--brb-text-on-dark);
}
.form-field label .required {
color: var(--brb-accent);
margin-left: 2px;
}
.form-field input,
.form-field textarea,
.form-field select {
background: rgba(250,247,242,0.04);
border: 1px solid var(--brb-border-on-dark-strong);
color: var(--brb-text-on-dark);
font-family: var(--brb-font-body);
font-size: 15px;
padding: 12px 14px;
border-radius: 6px;
transition: border-color 200ms var(--brb-ease), background 200ms var(--brb-ease);
}
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
outline: none;
border-color: var(--brb-accent);
background: rgba(250,247,242,0.06);
}
.form-field input::placeholder,
.form-field textarea::placeholder {
color: var(--brb-text-on-dark-subtle);
}
.form-field textarea {
resize: vertical;
min-height: 100px;
font-family: var(--brb-font-body);
}
.form-field__help {
font-size: 13px;
color: var(--brb-text-on-dark-subtle);
line-height: 1.5;
}
.checkbox-group {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 4px;
}
.checkbox-option {
display: flex;
align-items: flex-start;
gap: 10px;
cursor: pointer;
padding: 8px 10px;
border-radius: 4px;
transition: background 150ms var(--brb-ease);
}
.checkbox-option:hover {
background: rgba(250,247,242,0.04);
}
.checkbox-option input[type="checkbox"] {
margin-top: 3px;
accent-color: var(--brb-accent);
}
.checkbox-option span {
font-size: 14px;
color: var(--brb-text-on-dark);
line-height: 1.5;
}
.form-submit {
margin-top: 8px;
width: 100%;
background: var(--brb-accent);
color: var(--brb-anchor);
border: none;
font-family: var(--brb-font-body);
font-size: 15px;
font-weight: 500;
padding: 16px 24px;
border-radius: 8px;
cursor: pointer;
transition: background 200ms var(--brb-ease);
}
.form-submit:hover {
background: var(--brb-accent-hover);
}
.form-footnote {
margin-top: 16px;
text-align: center;
font-size: 13px;
color: var(--brb-text-on-dark-subtle);
}
.form-alt {
margin-top: 32px;
padding-top: 32px;
border-top: 1px solid var(--brb-border-on-dark);
text-align: center;
font-size: 14px;
color: var(--brb-text-on-dark-muted);
}
.form-alt a {
color: var(--brb-text-on-dark);
border-bottom: 1px solid var(--brb-accent);
padding-bottom: 1px;
font-weight: 500;
transition: color 200ms var(--brb-ease);
}
.form-alt a:hover {
color: var(--brb-accent);
}
/* ============================================================
Audit · 06 · FAQ
============================================================ */
/* ============================================================
Audit · 07 · Final Nudge
============================================================ */
.nudge {
background: var(--brb-anchor);
color: var(--brb-text-on-dark);
padding: clamp(64px, 8vw, 100px) 0;
text-align: center;
position: relative;
overflow: hidden;
}
.nudge::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 0%, rgba(217,119,6,0.08), transparent 60%);
pointer-events: none;
}
.nudge__inner { position: relative; }
.nudge__title {
font-size: clamp(28px, 3.5vw, 44px);
line-height: 1.15;
margin-bottom: 16px;
max-width: 22ch;
margin-inline: auto;
}
.nudge__title em { font-style: italic; color: var(--brb-accent); }
.nudge__body {
font-size: 16px;
line-height: 1.65;
color: var(--brb-text-on-dark-muted);
max-width: 48ch;
margin: 0 auto 28px;
}
.nudge__cta {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
color: var(--brb-text-on-dark);
border-bottom: 1px solid var(--brb-accent);
padding-bottom: 2px;
font-weight: 500;
transition: color 200ms var(--brb-ease);
}
.nudge__cta:hover {
color: var(--brb-accent);
}
/* ============================================================
==============================================================
WORK PAGE STYLES (.brb-work body class)
Record-collection gallery with interactive sleeves + modal.
==============================================================
============================================================ */
/* Deep anchor color for wall background */
.brb-work {
--brb-anchor-deep: #141414;
}
/* ============================================================
Work · 01 · Hero
============================================================ */
.work-hero {
background: var(--brb-anchor);
color: var(--brb-text-on-dark);
padding: clamp(32px, 4vw, 56px) 0 var(--brb-hero-to-next);
position: relative;
overflow: hidden;
isolation: isolate;
}
/* Amber glow upper-right — matches standard hero backgrounds site-wide */
.work-hero::before {
content: '';
position: absolute;
top: -40%;
right: -30%;
width: 900px;
height: 900px;
border-radius: 50%;
background: radial-gradient(circle, var(--brb-accent), transparent 100%);
filter: blur(100px);
opacity: 0.5;
pointer-events: none;
z-index: -1;
}
/* Violet counter-orb lower-left — matches standard */
.work-hero::after {
content: '';
position: absolute;
bottom: -45%;
left: -20%;
width: 800px;
height: 800px;
border-radius: 50%;
background: radial-gradient(circle, #8B5CF6, transparent 100%);
filter: blur(100px);
opacity: 0.15;
pointer-events: none;
z-index: -1;
}
.work-hero__inner { position: relative; max-width: 900px; }
.work-hero__headline {
font-size: clamp(38px, 4.6vw, 68px);
line-height: 1.05;
margin-bottom: clamp(14px, 1.6vw, 20px);
letter-spacing: -0.03em;
}
.work-hero__headline em {
font-style: italic;
color: var(--brb-accent);
font-weight: 400;
}
.work-hero__subhead {
font-size: clamp(16px, 1.4vw, 19px);
line-height: 1.65;
color: var(--brb-text-on-dark-muted);
max-width: 56ch;
}
/* ============================================================
Work · 02 · The Wall
============================================================ */
.wall {
background: var(--brb-anchor-deep);
padding: clamp(40px, 5vw, 72px) 0 clamp(100px, 12vw, 160px);
position: relative;
overflow: hidden;
}
.wall::before {
content: '';
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(250, 247, 242, 0.012) 1px, transparent 1px);
background-size: 32px 32px;
pointer-events: none;
}
.wall__grid {
position: relative;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: clamp(28px, 3vw, 44px);
}
/* ============================================================
Sleeve (record)
============================================================ */
.sleeve {
display: block;
cursor: pointer;
position: relative;
transition: transform 500ms var(--brb-ease);
}
.sleeve:nth-child(3n+1) { transform: rotate(-0.7deg); }
.sleeve:nth-child(3n+2) { transform: rotate(0.5deg); }
.sleeve:nth-child(3n+3) { transform: rotate(-0.3deg); }
.sleeve:nth-child(4n+1) { transform: rotate(0.6deg); }
.sleeve:nth-child(5n+3) { transform: rotate(-0.4deg); }
.sleeve:nth-child(7n+2) { transform: rotate(0.3deg); }
.sleeve:hover {
transform: translateY(-8px) rotate(0deg);
z-index: 2;
}
/* The frame follows the homepage `.studio-work__card` treatment — bordered,
rounded, 16:10 art flush to the top edge, a meta row beneath it — but keeps
the wall's per-client brand fill instead of the homepage card's white. The
two things that make it read as one family with the homepage: the hairline
border and the 14px radius. Here the border is keyed to the client
(`--sleeve-accent`, set per variant below) rather than the neutral
`--brb-border`, since each card already carries that client's colour.
No fixed aspect-ratio any more: height is content-driven (art + band),
exactly like the homepage card. */
.sleeve__frame {
width: 100%;
border: 1px solid var(--sleeve-accent, var(--brb-border));
border-radius: 14px;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow:
0 1px 2px rgba(0,0,0,0.15),
0 8px 16px rgba(0,0,0,0.25),
0 16px 32px rgba(0,0,0,0.15);
transition: box-shadow 500ms var(--brb-ease);
}
.sleeve:hover .sleeve__frame {
box-shadow:
0 2px 4px rgba(0,0,0,0.2),
0 20px 40px rgba(0,0,0,0.4),
0 40px 80px rgba(0,0,0,0.3);
}
/* Art box — holds the client screenshot, or (for marketing-only clients) the
centered logo, or the decorative mark as a last fallback. Fixed at the
homepage card's 16:10 so shot cards and logo cards keep one grid rhythm. */
.sleeve__art {
position: relative;
aspect-ratio: 16 / 10;
overflow: hidden;
}
/* Meta row beneath the art — the homepage `.studio-work__meta` geometry
(flex, space-between, 13px/16px padding). Left slot is the numbered
industry label, right slot the corner tag. */
.sleeve__band {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 13px 16px;
}
.sleeve__meta {
font-family: var(--brb-font-body);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
font-weight: 500;
opacity: 0.8;
}
.sleeve__mark {
position: absolute;
transition: transform 700ms var(--brb-ease);
}
.sleeve:hover .sleeve__mark { transform: scale(1.05); }
/* Client logo overlay — injected via JS when sleeveData.logo is set.
Sits centered on the sleeve frame, replacing the decorative SVG mark
when present. The :has() selector hides the SVG mark in browsers
that support it; older browsers show both, with the logo on top.
max-width + max-height + width:auto / height:auto lets the logo
scale to fit BOTH dimensions, so tall/narrow logos don't dominate
the frame the way a fixed width would. */
.sleeve__logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 58%;
max-height: 62%;
width: auto;
height: auto;
object-fit: contain;
filter: drop-shadow(0 2px 8px rgba(0,0,0,0.18));
transition: transform 700ms var(--brb-ease);
z-index: 1;
}
.sleeve:hover .sleeve__logo { transform: translate(-50%, -50%) scale(1.05); }
.sleeve__frame:has(.sleeve__logo) .sleeve__mark { display: none; }
/* ------------------------------------------------------------
Client screenshot — the sleeve treatment for clients whose sites
I designed. Server-rendered by $br_work_shot() in page-work.php;
marketing-only sleeves (Mindful, DGI) keep the centered
.sleeve__logo above.
Same geometry as the homepage `.studio-work__shot`: full width of
the art box, 16:10, top-anchored. Because .sleeve__art is itself
16:10, cover crops nothing — the whole site shows. No text sits
over the image, so this needs no scrim; every label lives on the
brand band beneath and keeps inheriting the frame's own colour.
------------------------------------------------------------ */
.sleeve__shot-wrap {
display: block;
}
.sleeve__shot {
width: 100%;
height: auto;
display: block;
aspect-ratio: 16 / 10;
object-fit: cover;
object-position: top center;
}
.sleeve__frame--shot .sleeve__mark { display: none; }
/* Right slot of .sleeve__band — mirrors the homepage card's
`.studio-work__industry` position. Was absolutely positioned against the
old square frame; now it's simply the band's second flex child. */
.sleeve__corner {
font-family: var(--brb-font-mono);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
opacity: 0.62;
white-space: nowrap;
}
.sleeve__caption {
margin-top: 16px;
font-family: var(--brb-font-body);
font-size: 11px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--brb-text-on-dark-subtle);
line-height: 1.5;
transition: color 300ms var(--brb-ease);
}
.sleeve__caption strong {
color: var(--brb-text-on-dark);
font-weight: 500;
}
.sleeve:hover .sleeve__caption { color: var(--brb-text-on-dark-muted); }
.sleeve:hover .sleeve__caption strong { color: var(--brb-accent); }
/* ============================================================
Sleeve color variants
============================================================ */
.sleeve--venia .sleeve__frame {
--sleeve-accent: #D4A76A; /* the studio's gold, straight off its own site */
background: linear-gradient(165deg, #0E1A2E 0%, #1B2D47 100%);
color: #D4A76A;
}
.sleeve--ccl .sleeve__frame {
--sleeve-accent: #C2566B; /* lifted from the maroon fill */
background: #7A1426;
color: #F5E8D3;
}
.sleeve--dk .sleeve__frame {
--sleeve-accent: #E7A184; /* lifted terracotta */
background: linear-gradient(150deg, #C4603E 0%, #A84F32 100%);
color: #FAF2E3;
}
.sleeve--enrich .sleeve__frame {
--sleeve-accent: #6FB6E6; /* lifted from the blue gradient */
background: linear-gradient(160deg, #1C4C7C 0%, #2E7BB5 100%);
color: #F2F7FC;
}
.sleeve--paso .sleeve__frame {
--sleeve-accent: #7CB98A; /* lifted grove green */
background: linear-gradient(160deg, #24402C 0%, #3F6E48 100%);
color: #F1F5EF;
}
.sleeve--ccfc .sleeve__frame {
--sleeve-accent: #5C8168; /* deepened — this card is pale, so the rim darkens instead of lifting */
background: #A3BDA8;
color: #1A3A30;
}
.sleeve--msp .sleeve__frame {
--sleeve-accent: #D97706; /* the photographer's amber, already this card's ink */
background: #0A0A0A;
color: #D97706;
border: 1px solid rgba(250, 247, 242, 0.1);
}
.sleeve--mindful .sleeve__frame {
--sleeve-accent: #A9C6B2; /* lifted sage */
background: linear-gradient(160deg, #4F6D5C 0%, #6A8775 100%);
color: #D4DDC8;
}
.sleeve--dgi .sleeve__frame {
--sleeve-accent: #F2A681; /* lifted from the orange gradient */
background: linear-gradient(160deg, #B8472D 0%, #D86A48 100%);
color: #F0CFB0;
}
/* ============================================================
Work · Modal
============================================================ */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(10, 10, 10, 0.85);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: opacity 300ms var(--brb-ease), visibility 300ms var(--brb-ease);
display: flex;
align-items: center;
justify-content: center;
padding: clamp(20px, 4vw, 48px);
}
.modal-overlay.is-open {
opacity: 1;
visibility: visible;
}
.modal {
background: var(--brb-surface);
max-width: 820px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
border-radius: 4px;
position: relative;
transform: translateY(20px) scale(0.98);
transition: transform 400ms var(--brb-ease-entrance);
}
.modal-overlay.is-open .modal {
transform: translateY(0) scale(1);
}
.modal__close {
position: absolute;
top: 20px;
right: 20px;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(26, 26, 26, 0.05);
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 20px;
color: var(--brb-text);
z-index: 2;
transition: background 200ms var(--brb-ease);
}
.modal__close:hover {
background: rgba(26, 26, 26, 0.1);
}
.modal__header {
aspect-ratio: 16 / 9;
position: relative;
overflow: hidden;
}
.modal__header-sleeve {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 40px;
}
.modal__header-title {
font-family: var(--brb-font-display);
font-size: clamp(36px, 5vw, 64px);
line-height: 1;
font-weight: 400;
text-align: center;
letter-spacing: -0.02em;
position: relative;
z-index: 1;
}
.modal__body {
padding: clamp(32px, 4vw, 56px);
}
.modal__eyebrow {
color: var(--brb-accent);
margin-bottom: 16px;
}
.modal__client {
font-family: var(--brb-font-display);
font-size: clamp(28px, 3.5vw, 40px);
line-height: 1.15;
margin-bottom: 24px;
}
.modal__screenshot {
aspect-ratio: 16 / 10;
width: 100%;
margin-bottom: 28px;
border-radius: 4px;
overflow: hidden;
background: var(--brb-neutral-100);
position: relative;
border: 1px solid var(--brb-border);
}
/* Credit-attribution line for SEO/ads-only engagements where the modal
screenshot would otherwise be misread as a design case study. Two
short complete sentences per playbook-voice.md §1 lead principle —
first sentence cleanses the design assumption, second states what
Michael actually delivers. Suppressed automatically when the sleeve's
services string contains "design" (case-insensitive). */
.modal__screenshot-attribution {
margin: 0 0 12px;
font-family: var(--brb-font-body);
font-size: 14px;
line-height: 1.5;
color: var(--brb-text-muted);
font-style: italic;
}
.modal__screenshot img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.modal__screenshot-placeholder {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
font-family: var(--brb-font-body);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--brb-text-muted);
}
.modal__screenshot-placeholder-icon {
font-family: var(--brb-font-display);
font-style: italic;
font-size: 24px;
letter-spacing: 0;
text-transform: none;
color: var(--brb-accent);
margin-bottom: 4px;
}
.modal__meta {
display: flex;
gap: 24px;
flex-wrap: wrap;
padding: 16px 0;
margin-bottom: 28px;
border-top: 1px solid var(--brb-border);
border-bottom: 1px solid var(--brb-border);
}
.modal__meta-item {
display: flex;
flex-direction: column;
gap: 8px;
}
/* Service badges: each item in the comma-separated services string
renders as a chip. Splitting happens in JS on ', ' so multi-word
labels like "DNS / hosting" stay intact. */
.modal__services {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.modal__service-badge {
display: inline-flex;
align-items: center;
padding: 5px 10px;
background: var(--brb-neutral-100);
color: var(--brb-text);
font-family: var(--brb-font-body);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.02em;
border-radius: 4px;
white-space: nowrap;
}
.modal__meta-label {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--brb-text-muted);
}
.modal__meta-value {
font-size: 14px;
color: var(--brb-text);
font-weight: 500;
}
.modal__narrative {
font-size: 17px;
line-height: 1.75;
color: var(--brb-text);
margin-bottom: 28px;
}
.modal__narrative p + p { margin-top: 1.2em; }
.modal__cta {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 500;
color: var(--brb-text);
border-bottom: 1px solid var(--brb-accent);
padding-bottom: 2px;
transition: color 200ms var(--brb-ease);
}
.modal__cta:hover { color: var(--brb-accent); }
body.has-modal-open { overflow: hidden; }
/* ============================================================
==============================================================
CONTACT PAGE STYLES (.brb-contact body class)
Reuses .form-field, .form-submit, .form-footnote from audit page.
Adds: .contact-hero, .methods, .method, .contact-form (wrapper),
.location, .alt-paths.
==============================================================
============================================================ */
/* ============================================================
Contact · 01 · Hero
============================================================ */
.contact-hero {
background: var(--brb-surface);
color: var(--brb-text);
padding: clamp(60px, 8vw, 100px) 0 clamp(24px, 3vw, 40px);
position: relative;
overflow: hidden;
isolation: isolate;
}
/* Tighter seam than the default hero-to-next token: the methods grid
right below carries the contact CTAs, so the cards should sit above
the fold on standard laptop viewports. */
.contact-hero + section { padding-top: clamp(24px, 3vw, 40px); }
/* Cream-led: soft amber glow top-LEFT — matches .intro / .ind-hero recipe */
.contact-hero::before {
content: '';
position: absolute;
top: -20%;
left: -5%;
right: auto;
width: 900px;
height: 900px;
border-radius: 50%;
background: radial-gradient(circle, var(--brb-accent), transparent 100%);
filter: blur(100px);
opacity: 0.10;
pointer-events: none;
z-index: -1;
}
/* Cream-led: faint violet counter-orb bottom-RIGHT */
.contact-hero::after {
content: '';
position: absolute;
bottom: -20%;
right: -5%;
left: auto;
width: 800px;
height: 800px;
border-radius: 50%;
background: radial-gradient(circle, #8B5CF6, transparent 100%);
filter: blur(100px);
opacity: 0.05;
pointer-events: none;
z-index: -1;
}
.contact-hero__inner {
position: relative;
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: clamp(40px, 6vw, 96px);
align-items: center;
max-width: 1200px;
margin-inline: auto;
}
@media (max-width: 900px) {
.contact-hero__inner {
grid-template-columns: 1fr;
gap: 32px;
}
}
.contact-hero__content {
max-width: 640px;
}
.contact-hero__portrait {
position: relative;
width: 100%;
max-width: 380px;
margin-left: auto;
}
@media (max-width: 900px) {
.contact-hero__portrait {
max-width: clamp(240px, 60vw, 360px);
margin: 0 auto;
}
}
.contact-hero__portrait-frame {
position: relative;
aspect-ratio: 4 / 5;
border-radius: 2px;
overflow: hidden;
z-index: 2;
box-shadow: 0 18px 44px rgba(26, 26, 26, 0.18);
}
.contact-hero__portrait-frame img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: saturate(0.95);
}
.contact-hero__portrait-accent {
position: absolute;
top: 16px;
left: -16px;
right: 16px;
bottom: -16px;
border: 1px solid var(--brb-accent);
border-radius: 2px;
z-index: 1;
opacity: 0.6;
transition: top 400ms var(--brb-ease), left 400ms var(--brb-ease),
right 400ms var(--brb-ease), bottom 400ms var(--brb-ease);
}
.contact-hero__portrait:hover .contact-hero__portrait-accent {
top: 20px;
left: -20px;
right: 20px;
bottom: -20px;
}
.contact-hero__eyebrow { margin-bottom: clamp(20px, 3vw, 32px); }
.contact-hero__headline {
font-size: clamp(48px, 8vw, 112px);
line-height: 1;
margin-bottom: clamp(24px, 4vw, 40px);
letter-spacing: -0.03em;
}
.contact-hero__headline em {
font-style: italic;
color: var(--brb-accent);
font-weight: 400;
}
.contact-hero__subhead {
font-size: clamp(16px, 1.4vw, 19px);
line-height: 1.65;
color: var(--brb-text-muted);
max-width: 56ch;
}
/* ============================================================
Contact · 02 · Methods (Phone / Email / Schedule cards)
============================================================ */
.methods {
background: var(--brb-surface);
padding: clamp(32px, 4vw, 56px) 0 clamp(64px, 8vw, 120px) 0;
position: relative;
margin-top: -1px;
}
.methods__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--brb-border-strong);
border-top: 1px solid var(--brb-border-strong);
border-bottom: 1px solid var(--brb-border-strong);
}
@media (max-width: 840px) {
.methods__grid { grid-template-columns: 1fr; }
}
.method {
background: var(--brb-surface);
padding: clamp(32px, 4vw, 48px) clamp(24px, 3vw, 40px);
display: flex;
flex-direction: column;
gap: 16px;
}
.method__label {
font-family: var(--brb-font-body);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
font-weight: 500;
color: var(--brb-text-muted);
}
.method__title {
font-family: var(--brb-font-display);
font-size: clamp(22px, 2.3vw, 28px);
line-height: 1.15;
}
.method__title em {
font-style: italic;
color: var(--brb-accent);
}
.method__body {
font-size: 14px;
line-height: 1.65;
color: var(--brb-text-muted);
flex-grow: 1;
}
.method__actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.method__actions--split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.method__action {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
font-family: var(--brb-font-body);
font-size: 13px;
font-weight: 500;
padding: 10px 14px;
border-radius: 6px;
border: 1px solid var(--brb-border-strong);
color: var(--brb-text);
background: transparent;
transition: all 200ms var(--brb-ease);
white-space: nowrap;
}
.method__action:hover {
background: var(--brb-accent);
color: var(--brb-anchor);
border-color: var(--brb-accent);
}
.method__action--primary {
background: var(--brb-anchor);
color: var(--brb-text-on-dark);
border-color: var(--brb-anchor);
}
.method__action--primary:hover {
background: var(--brb-accent);
color: var(--brb-anchor);
border-color: var(--brb-accent);
}
.method__phone-number {
margin-top: 10px;
font-family: var(--brb-font-body);
font-size: 12px;
color: var(--brb-text-muted);
letter-spacing: 0.04em;
font-variant-numeric: tabular-nums;
}
/* ============================================================
Contact · 03 · Form (wrapper styles only —
.form-field / .form-submit / .form-footnote inherited from audit)
============================================================ */
.contact-form {
padding: clamp(80px, 11vw, 160px) 0;
background: var(--brb-anchor);
color: var(--brb-text-on-dark);
}
.contact-form__head {
margin-bottom: clamp(36px, 4.5vw, 56px);
text-align: center;
}
.contact-form__title {
font-size: clamp(40px, 5vw, 64px);
line-height: 1.05;
margin-top: 16px;
max-width: 16ch;
margin-inline: auto;
}
.contact-form__title em {
font-style: italic;
color: var(--brb-accent);
}
.contact-form__sub {
font-size: 16px;
line-height: 1.6;
color: var(--brb-text-on-dark-muted);
max-width: 50ch;
margin: 20px auto 0;
}
.contact-form__container {
max-width: 680px;
margin: 0 auto;
background: #232321;
border: 1px solid var(--brb-border-on-dark);
border-radius: 8px;
padding: clamp(32px, 4vw, 48px);
}
/* Select styling (dropdown) — audit page only had input/textarea, add select */
.brb-contact .form-field select {
appearance: none;
background: rgba(250, 247, 242, 0.04);
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3e%3cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23D97706' stroke-width='1.5'/%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 16px center;
padding-right: 40px;
border: 1px solid var(--brb-border-on-dark-strong);
color: var(--brb-text-on-dark);
font-family: var(--brb-font-body);
font-size: 15px;
padding-top: 12px;
padding-bottom: 12px;
padding-left: 14px;
border-radius: 6px;
transition: border-color 200ms var(--brb-ease), background-color 200ms var(--brb-ease);
cursor: pointer;
}
.brb-contact .form-field select:focus {
outline: none;
border-color: var(--brb-accent);
}
.brb-contact .form-field select option {
background: #232321;
color: var(--brb-text-on-dark);
}
/* ============================================================
Contact · 05 · Alternative Paths
============================================================ */
.alt-paths {
background: var(--brb-surface);
color: var(--brb-text);
padding: clamp(56px, 7vw, 96px) 0;
position: relative;
overflow: hidden;
}
.alt-paths__inner {
position: relative;
text-align: center;
max-width: 720px;
margin: 0 auto;
}
.alt-paths__title {
font-size: clamp(26px, 3vw, 36px);
line-height: 1.25;
margin-bottom: clamp(36px, 4vw, 56px);
max-width: 24ch;
margin-inline: auto;
}
.alt-paths__title em {
font-style: italic;
color: var(--brb-accent);
}
.alt-paths__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(12px, 1.5vw, 20px);
}
@media (max-width: 720px) {
.alt-paths__grid { grid-template-columns: 1fr; }
}
.alt-path {
background: var(--brb-anchor);
color: var(--brb-text-on-dark);
border: 1px solid var(--brb-anchor);
border-radius: 8px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
padding: 28px 20px;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
text-align: center;
transition: border-color 200ms var(--brb-ease), box-shadow 200ms var(--brb-ease), background 200ms var(--brb-ease);
}
.alt-path:hover {
background: var(--brb-anchor);
border-color: var(--brb-accent);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.alt-path__label {
font-family: var(--brb-font-body);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
font-weight: 500;
color: var(--brb-text-on-dark-subtle);
}
.alt-path__title {
font-family: var(--brb-font-display);
font-size: 22px;
line-height: 1.2;
color: var(--brb-text-on-dark);
transition: color 200ms var(--brb-ease);
}
.alt-path__title em {
font-style: italic;
color: var(--brb-accent);
}
.alt-path:hover .alt-path__title {
color: var(--brb-accent);
}
/* ============================================================
==============================================================
FLUENT FORMS OVERRIDES
Targets Fluent Forms rendered HTML inside .form-container
(audit page) and .contact-form__container (contact page).
Overrides FF defaults to match BRB dark form design.
Uses :is() to apply to both container classes cleanly.
==============================================================
============================================================ */
/* Strip Fluent Forms wrapper padding/margin */
:is(.form-container, .contact-form__container, .wd-craft__form) .fluentform,
:is(.form-container, .contact-form__container, .wd-craft__form) .ff-el-group {
margin-bottom: 24px !important;
}
:is(.form-container, .contact-form__container, .wd-craft__form) .ff-el-group.ff_submit_btn_wrapper {
margin-bottom: 0 !important;
}
/* Labels */
:is(.form-container, .contact-form__container, .wd-craft__form) .ff-el-input--label label,
:is(.form-container, .contact-form__container, .wd-craft__form) .ff-el-input--label .ff-el-is-required {
font-family: var(--brb-font-body) !important;
font-size: 13px !important;
font-weight: 500 !important;
letter-spacing: 0.02em !important;
color: var(--brb-text-on-dark) !important;
margin-bottom: 8px !important;
}
/* Required asterisk */
:is(.form-container, .contact-form__container, .wd-craft__form) .ff-el-is-required .asterisk-sign,
:is(.form-container, .contact-form__container, .wd-craft__form) .ff-el-is-required.asterisk-sign {
color: var(--brb-accent) !important;
margin-left: 2px !important;
}
/* Inputs, textareas, selects */
:is(.form-container, .contact-form__container, .wd-craft__form) .ff-el-form-control,
:is(.form-container, .contact-form__container, .wd-craft__form) input.ff-el-form-control,
:is(.form-container, .contact-form__container, .wd-craft__form) textarea.ff-el-form-control,
:is(.form-container, .contact-form__container, .wd-craft__form) select.ff-el-form-control {
background: rgba(250, 247, 242, 0.04) !important;
border: 1px solid var(--brb-border-on-dark-strong) !important;
color: var(--brb-text-on-dark) !important;
font-family: var(--brb-font-body) !important;
font-size: 15px !important;
padding: 12px 14px !important;
border-radius: 6px !important;
box-shadow: none !important;
transition: border-color 200ms var(--brb-ease), background 200ms var(--brb-ease) !important;
width: 100% !important;
}
:is(.form-container, .contact-form__container, .wd-craft__form) .ff-el-form-control:focus,
:is(.form-container, .contact-form__container, .wd-craft__form) input.ff-el-form-control:focus,
:is(.form-container, .contact-form__container, .wd-craft__form) textarea.ff-el-form-control:focus,
:is(.form-container, .contact-form__container, .wd-craft__form) select.ff-el-form-control:focus {
outline: none !important;
border-color: var(--brb-accent) !important;
background: rgba(250, 247, 242, 0.06) !important;
box-shadow: none !important;
}
:is(.form-container, .contact-form__container, .wd-craft__form) .ff-el-form-control::placeholder {
color: var(--brb-text-on-dark-subtle) !important;
opacity: 1 !important;
}
/* Textarea specific */
:is(.form-container, .contact-form__container, .wd-craft__form) textarea.ff-el-form-control {
min-height: 100px !important;
resize: vertical !important;
}
/* Select dropdown — custom amber chevron */
:is(.form-container, .contact-form__container, .wd-craft__form) select.ff-el-form-control {
appearance: none !important;
-webkit-appearance: none !important;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3e%3cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23D97706' stroke-width='1.5'/%3e%3c/svg%3e") !important;
background-repeat: no-repeat !important;
background-position: right 16px center !important;
padding-right: 40px !important;
cursor: pointer !important;
}
:is(.form-container, .contact-form__container, .wd-craft__form) select.ff-el-form-control option {
background: #232321 !important;
color: var(--brb-text-on-dark) !important;
}
/* Checkboxes */
:is(.form-container, .contact-form__container, .wd-craft__form) .ff-el-form-check-label {
font-family: var(--brb-font-body) !important;
font-size: 14px !important;
color: var(--brb-text-on-dark) !important;
display: flex !important;
align-items: flex-start !important;
gap: 10px !important;
cursor: pointer !important;
padding: 8px 10px !important;
border-radius: 4px !important;
transition: background 150ms var(--brb-ease) !important;
margin-bottom: 0 !important;
}
:is(.form-container, .contact-form__container, .wd-craft__form) .ff-el-form-check-label:hover {
background: rgba(250, 247, 242, 0.04) !important;
}
:is(.form-container, .contact-form__container, .wd-craft__form) .ff-el-form-check-input {
margin-top: 3px !important;
accent-color: var(--brb-accent) !important;
flex-shrink: 0 !important;
}
/* Submit button */
:is(.form-container, .contact-form__container, .wd-craft__form) .ff-btn-submit,
:is(.form-container, .contact-form__container, .wd-craft__form) button[type="submit"].ff-btn {
width: 100% !important;
background: var(--brb-accent) !important;
color: var(--brb-anchor) !important;
border: none !important;
font-family: var(--brb-font-body) !important;
font-size: 15px !important;
font-weight: 500 !important;
padding: 16px 24px !important;
border-radius: 8px !important;
cursor: pointer !important;
transition: background 200ms var(--brb-ease) !important;
box-shadow: none !important;
margin-top: 8px !important;
letter-spacing: 0 !important;
text-transform: none !important;
}
:is(.form-container, .contact-form__container, .wd-craft__form) .ff-btn-submit:hover,
:is(.form-container, .contact-form__container, .wd-craft__form) button[type="submit"].ff-btn:hover {
background: var(--brb-accent-hover) !important;
color: var(--brb-anchor) !important;
}
/* Error messages */
:is(.form-container, .contact-form__container, .wd-craft__form) .error,
:is(.form-container, .contact-form__container, .wd-craft__form) .ff-el-is-error .ff-el-form-control {
border-color: #e05252 !important;
}
:is(.form-container, .contact-form__container, .wd-craft__form) .error.text-danger {
font-size: 12px !important;
color: #e05252 !important;
margin-top: 4px !important;
font-family: var(--brb-font-body) !important;
}
/* Success message */
:is(.form-container, .contact-form__container, .wd-craft__form) .ff-message-success {
background: rgba(217, 119, 6, 0.1) !important;
border: 1px solid var(--brb-accent) !important;
color: var(--brb-text-on-dark) !important;
padding: 16px 20px !important;
border-radius: 6px !important;
font-family: var(--brb-font-body) !important;
font-size: 15px !important;
}
/* Remove FF loading spinner styles that might conflict */
:is(.form-container, .contact-form__container, .wd-craft__form) .ff-el-progress-bar { display: none !important; }
/* Strip any white backgrounds FF might inject on its own wrappers */
:is(.form-container, .contact-form__container, .wd-craft__form) .ff-default,
:is(.form-container, .contact-form__container, .wd-craft__form) .ff-form-wrap {
background: transparent !important;
padding: 0 !important;
border: none !important;
}
/* ============================================================
==============================================================
WEB DESIGN PAGE (.brb-web-design)
Craft-forward editorial layout with scroll reveals,
CSS-only laptop + phone mockups, and subtle animations.
==============================================================
============================================================ */
/* ============================================================
WD · 01 · Hero
============================================================ */
.wd-hero {
background: var(--brb-anchor);
color: var(--brb-text-on-dark);
position: relative;
overflow: hidden;
padding: clamp(72px, 10vw, 140px) 0 var(--brb-hero-to-next);
/* Reserve hero height so font swap / animation entry doesn't shift layout. */
min-height: clamp(520px, 65vh, 760px);
isolation: isolate;
}
.wd-hero__bg {
position: absolute;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(ellipse at 100% 0%, rgba(217, 119, 6, 0.38) 0%, transparent 100%),
radial-gradient(ellipse at 0% 100%, rgba(139, 92, 246, 0.12) 0%, transparent 100%);
}
/* Orb divs kept in DOM for stability but hidden —
amber glow is now a corner-anchored gradient on .wd-hero__bg */
.wd-hero__orb { display: none; }
.wd-hero__grid {
/* Grid lines removed — kept the class for DOM stability, but it now renders nothing.
If you ever want the grid back, restore the previous background-image rules. */
display: none;
}
.wd-hero__inner {
position: relative;
max-width: 900px;
margin-inline: auto;
}
.wd-hero__eyebrow {
margin-bottom: clamp(28px, 3vw, 40px);
opacity: 0;
animation: wd-fade-in 600ms var(--brb-ease) 200ms forwards;
}
.wd-hero__headline {
font-size: clamp(44px, 7.5vw, 104px);
line-height: 1.02;
letter-spacing: -0.035em;
margin-bottom: clamp(24px, 3vw, 36px);
font-weight: 400;
text-wrap: pretty;
}
.wd-hero__headline .line {
display: block;
overflow: hidden;
/* Padding-bottom extends the overflow-hidden clip box past the
font's descender depth so 'g', 'y', 'p', 'q' don't get cut off
under the tight line-height: 1.02 above. 0.1em ≈ 10px at 104px. */
padding-bottom: 0.1em;
opacity: 0;
transform: translateY(28px);
transition: opacity 900ms var(--brb-ease-entrance), transform 900ms var(--brb-ease-entrance);
}
.wd-hero__headline .line.is-visible {
opacity: 1;
transform: translateY(0);
}
.wd-hero__headline em {
font-style: italic;
color: var(--brb-accent);
font-weight: 400;
}
.wd-hero__headline .dot {
color: var(--brb-accent);
font-weight: 700;
}
.wd-hero__sub {
font-size: clamp(17px, 1.5vw, 20px);
line-height: 1.65;
color: var(--brb-text-on-dark-muted);
max-width: 62ch;
margin-bottom: clamp(24px, 3vw, 36px);
opacity: 0;
transform: translateY(12px);
transition: opacity 700ms var(--brb-ease), transform 700ms var(--brb-ease);
}
.wd-hero__sub.is-visible {
opacity: 1;
transform: translateY(0);
}
.wd-hero__actions {
display: flex;
gap: 16px;
flex-wrap: wrap;
opacity: 0;
transform: translateY(12px);
transition: opacity 700ms var(--brb-ease), transform 700ms var(--brb-ease);
}
.wd-hero__actions.is-visible {
opacity: 1;
transform: translateY(0);
}
@keyframes wd-fade-in {
to { opacity: 1; }
}
/* Shared button system for the page */
.wd-btn {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--brb-font-body);
font-size: 15px;
font-weight: 500;
padding: 14px 22px;
border-radius: 8px;
transition: all 200ms var(--brb-ease);
cursor: pointer;
letter-spacing: 0;
}
.wd-btn svg {
transition: transform 200ms var(--brb-ease);
}
.wd-btn:hover svg {
transform: translateX(3px);
}
.wd-btn--primary {
background: var(--brb-accent);
color: var(--brb-anchor);
border: 1px solid var(--brb-accent);
}
.wd-btn--primary:hover {
background: var(--brb-accent-hover);
border-color: var(--brb-accent-hover);
}
.wd-btn--ghost {
background: transparent;
color: var(--brb-text-on-dark);
border: 1px solid var(--brb-border-on-dark-strong);
}
.wd-btn--ghost:hover {
border-color: var(--brb-text-on-dark);
background: rgba(250, 247, 242, 0.04);
}
/* ============================================================
WD · Free site audit (Trailhead) — Section 02
The form IS the section. No competing visuals. The hero above
does the brand work; this is the conversion surface.
============================================================ */
.wd-audit {
background: var(--brb-surface);
padding: 64px 0 var(--brb-section-pad);
position: relative;
border-top: 1px solid var(--brb-border);
}
.wd-audit__inner {
max-width: 760px;
margin: 0 auto;
text-align: center;
}
.wd-audit__head {
margin-bottom: 36px;
}
.wd-audit__head .eyebrow {
display: inline-block;
margin-bottom: 20px;
}
.wd-audit__headline {
font-family: var(--brb-font-display);
font-size: clamp(28px, 3.6vw, 46px);
font-weight: 400;
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--brb-text);
margin: 0 0 20px;
}
.wd-audit__headline em {
font-style: italic;
color: var(--brb-accent);
}
.wd-audit__sub {
font-family: var(--brb-font-body);
font-size: clamp(16px, 1.4vw, 18px);
line-height: 1.55;
color: var(--brb-text-muted);
max-width: 620px;
margin: 0 auto;
}
.wd-audit__sub strong {
font-weight: 600;
color: var(--brb-text);
}
/* Form */
.wd-audit__form {
margin: 0 auto 32px;
max-width: 560px;
}
.wd-audit__field {
display: flex;
align-items: stretch;
background: var(--brb-surface-raised);
border: 1px solid var(--brb-border-strong);
border-radius: 10px;
overflow: hidden;
transition: border-color 200ms var(--brb-ease), box-shadow 200ms var(--brb-ease);
}
.wd-audit__field:focus-within {
border-color: var(--brb-accent);
box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15);
}
.wd-audit__prefix {
display: flex;
align-items: center;
padding: 0 12px 0 16px;
font-family: var(--brb-font-body);
font-size: 16px;
color: var(--brb-text-subtle);
user-select: none;
}
.wd-audit__input {
flex: 1;
border: 0;
background: transparent;
font-family: var(--brb-font-body);
font-size: 16px;
color: var(--brb-text);
padding: 16px 8px 16px 0;
outline: 0;
min-width: 0;
}
.wd-audit__input::placeholder {
color: var(--brb-text-subtle);
}
.wd-audit__submit {
border: 0;
border-radius: 0;
margin: 0;
padding: 0 22px;
white-space: nowrap;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
}
.wd-audit__submit svg {
flex-shrink: 0;
}
.wd-audit__turnstile {
display: flex;
justify-content: center;
margin-top: 16px;
min-height: 65px;
}
.wd-audit__turnstile:empty {
display: none;
}
.wd-audit__inline-error {
margin: 12px 0 0;
font-family: var(--brb-font-body);
font-size: 14px;
color: #B23A48;
text-align: center;
}
/* Loading panel — replaces the form during a real audit */
.wd-audit__loading {
margin: 0 auto 32px;
max-width: 560px;
padding: 28px 20px;
background: var(--brb-surface-raised);
border: 1px solid var(--brb-border);
border-radius: 10px;
text-align: center;
}
.wd-audit__spinner {
display: inline-flex;
gap: 6px;
margin-bottom: 14px;
}
.wd-audit__spinner-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--brb-accent);
animation: wd-audit-pulse 1.2s var(--brb-ease) infinite;
}
.wd-audit__spinner-dot:nth-child(2) { animation-delay: 0.15s; }
.wd-audit__spinner-dot:nth-child(3) { animation-delay: 0.3s; }
@keyframes wd-audit-pulse {
0%, 100% { opacity: 0.3; transform: scale(0.85); }
50% { opacity: 1; transform: scale(1); }
}
.wd-audit__loading-text {
font-family: var(--brb-font-body);
font-size: 15px;
color: var(--brb-text-muted);
margin: 0;
transition: opacity 250ms var(--brb-ease);
}
/* Bot-protection blocked panel */
.wd-audit__blocked {
margin: 0 auto 32px;
max-width: 560px;
padding: 24px;
background: var(--brb-surface-raised);
border: 1px solid var(--brb-border);
border-radius: 10px;
text-align: center;
}
.wd-audit__blocked-title {
font-family: var(--brb-font-display);
font-size: 20px;
font-weight: 400;
color: var(--brb-text);
margin: 0 0 8px;
}
.wd-audit__blocked-text {
font-family: var(--brb-font-body);
font-size: 15px;
color: var(--brb-text-muted);
margin: 0;
}
.wd-audit__blocked-text a {
color: var(--brb-accent);
text-decoration: underline;
text-underline-offset: 3px;
}
/* What I check preview */
.wd-audit__preview {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 28px;
max-width: 720px;
margin: 0 auto 28px;
text-align: left;
}
.wd-audit__preview-col {
padding: 20px;
background: var(--brb-surface-raised);
border: 1px solid var(--brb-border);
border-radius: 8px;
}
.wd-audit__preview-icon {
color: var(--brb-accent);
margin-bottom: 12px;
}
.wd-audit__preview-label {
font-family: var(--brb-font-display);
font-size: 17px;
font-weight: 400;
color: var(--brb-text);
margin: 0 0 8px;
}
.wd-audit__preview-desc {
font-family: var(--brb-font-body);
font-size: 14px;
line-height: 1.5;
color: var(--brb-text-muted);
margin: 0;
}
.wd-audit__trust {
font-family: var(--brb-font-body);
font-size: 13px;
color: var(--brb-text-subtle);
margin: 0;
letter-spacing: 0.02em;
}
.wd-audit__trust-sep {
color: var(--brb-neutral-300);
margin: 0 6px;
}
/* Mobile */
@media (max-width: 700px) {
.wd-audit__field {
flex-direction: column;
border-radius: 12px;
}
.wd-audit__prefix {
display: none;
}
.wd-audit__input {
padding: 16px 16px 14px;
text-align: center;
border-bottom: 1px solid var(--brb-border);
}
.wd-audit__input::placeholder {
text-align: center;
}
.wd-audit__submit {
padding: 14px;
justify-content: center;
border-radius: 0;
}
.wd-audit__preview {
grid-template-columns: 1fr;
gap: 14px;
}
.wd-audit__trust {
font-size: 12px;
}
.wd-audit__trust-sep {
display: block;
margin: 4px 0;
height: 0;
overflow: hidden;
}
}
/* ============================================================
Audit page · Sticky mobile CTA
------------------------------------------------------------
Persistent one-tap shortcut to the personal-review form (id
#strategy-audit). The form sits ~2,600px below the fold and
ad traffic is mostly mobile, so a fixed bottom bar keeps the
conversion path reachable without scrolling past the hero,
trailhead tool, and "Have me look at it personally" intro.
Mobile-only (≤720px) per editorial flourish discipline —
desktop has the in-hero CTAs and doesn't need a persistent
bar. Reveals after the user scrolls past the hero so it
doesn't compete with the in-hero CTA pair on first paint.
dual_path_choice (chosen_path: strategy_audit) fires via
tracking.js DUAL_PATH_MAP on click.
============================================================ */
.audit-sticky-cta {
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 50;
display: none;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.85rem 1.25rem;
padding-bottom: calc(0.85rem + env(safe-area-inset-bottom, 0px));
background: var(--brb-accent);
color: var(--brb-anchor);
font-family: inherit;
font-weight: 600;
font-size: 1rem;
text-decoration: none;
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.18);
opacity: 0;
transform: translateY(100%);
transition: opacity 220ms ease, transform 220ms ease;
pointer-events: none;
}
.audit-sticky-cta:hover {
background: var(--brb-accent-hover);
}
.audit-sticky-cta.is-visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.audit-sticky-cta__arrow {
flex-shrink: 0;
}
@media (max-width: 720px) {
.audit-sticky-cta {
display: flex;
}
}
/* ============================================================
WD · 02 · Craft Philosophy
============================================================ */
.wd-craft {
background: var(--brb-surface);
padding: var(--brb-section-pad) 0;
position: relative;
}
.wd-craft__inner {
max-width: 760px;
margin: 0 auto;
}
.wd-craft .eyebrow {
margin-bottom: 28px;
display: inline-block;
}
.wd-craft__title {
font-family: var(--brb-font-display);
font-size: clamp(28px, 3.4vw, 44px);
line-height: 1.35;
color: var(--brb-text);
margin-bottom: 32px;
font-weight: 300;
letter-spacing: -0.02em;
}
.wd-craft__title em {
font-style: italic;
color: var(--brb-accent);
font-weight: 400;
}
/* Word-by-word reveal */
.reveal-words {
--reveal-delay: 0ms;
}
.reveal-words > em,
.reveal-words {
opacity: 1;
}
/* Fade the whole paragraph up smoothly instead of per-word
to keep it performant and not distracting */
.reveal-words {
opacity: 0;
transform: translateY(20px);
transition: opacity 1000ms var(--brb-ease-entrance), transform 1000ms var(--brb-ease-entrance);
}
.reveal-words.is-visible {
opacity: 1;
transform: translateY(0);
}
.wd-craft__body {
font-size: clamp(16px, 1.3vw, 18px);
line-height: 1.75;
color: var(--brb-text-muted);
max-width: 58ch;
opacity: 0;
transform: translateY(16px);
transition: opacity 800ms var(--brb-ease) 200ms, transform 800ms var(--brb-ease) 200ms;
}
.wd-craft__body.is-visible {
opacity: 1;
transform: translateY(0);
}
/* ============================================================
WD · 03 · Platform cards (.wd-platform*)
The .wd-stack* wrapper rules were removed 2026-07-31 with the
/website-design/ "The Build" section (operator decision). These
card rules stay — page-website-maintenance, page-seo-san-luis-
obispo, page-location-service and page-industry-service all
render .wd-platform markup inside their own grids.
============================================================ */
.wd-platform {
background: var(--brb-surface);
padding: clamp(32px, 4vw, 48px);
opacity: 0;
transform: translateY(24px);
transition: opacity 700ms var(--brb-ease), transform 700ms var(--brb-ease);
}
.wd-platform.is-visible {
opacity: 1;
transform: translateY(0);
}
.wd-platform--lead {
/* grid-column / grid-row removed in v1.34.7 — these were designed
for the legacy 4-up grid (1.5fr 1fr 1fr 1fr) where the lead
occupied a tall column on the left while cards 2/3/4 filled
the row 1 cells of the right 3 columns. The row 2 cells were
empty, so the lead's height matched a single content row.
After v1.34.4 collapsed the grid to 2-up, the row-span forced
the lead to ~820px (the height of two stacked cells), leaving
~540px of empty dark space below its content. Now the lead is
a normal grid cell that sizes to its content; visual weight
comes from the dark background, the ::after gradient, the
larger __name typography, and (when present) the WordPress
pill — all preserved. */
background: var(--brb-anchor);
color: var(--brb-text-on-dark);
position: relative;
}
.wd-platform--lead::after {
content: '';
position: absolute;
top: 0; right: 0;
width: 40%;
height: 60%;
background: radial-gradient(ellipse at top right, rgba(217, 119, 6, 0.12), transparent 70%);
pointer-events: none;
}
@media (max-width: 900px) {
.wd-platform--lead {
grid-column: 1 / -1;
grid-row: auto;
}
}
.wd-platform__num {
font-family: var(--brb-font-body);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
font-weight: 500;
color: var(--brb-text-muted);
margin-bottom: 20px;
}
.wd-platform--lead .wd-platform__num {
color: var(--brb-text-on-dark-subtle);
}
.wd-platform__name {
font-family: var(--brb-font-display);
font-size: clamp(22px, 2.4vw, 32px);
font-weight: 400;
letter-spacing: -0.02em;
line-height: 1.15;
margin-bottom: 16px;
display: flex;
align-items: baseline;
gap: 12px;
flex-wrap: wrap;
}
.wd-platform--lead .wd-platform__name {
font-size: clamp(32px, 3.8vw, 48px);
}
.wd-platform__tag {
font-family: var(--brb-font-body);
font-size: 10px;
letter-spacing: 0.15em;
text-transform: uppercase;
font-weight: 500;
background: var(--brb-accent);
color: var(--brb-anchor);
padding: 3px 10px;
border-radius: 100px;
position: relative;
top: -4px;
}
.wd-platform__body {
font-size: 15px;
line-height: 1.65;
color: var(--brb-text-muted);
}
.wd-platform--lead .wd-platform__body {
color: var(--brb-text-on-dark-muted);
font-size: 16px;
}
/* ============================================================
WD · 04 · Device Mockup Showcase
============================================================ */
.wd-showcase {
background: var(--brb-anchor);
color: var(--brb-text-on-dark);
padding: clamp(96px, 12vw, 160px) 0 clamp(120px, 15vw, 200px);
position: relative;
overflow: hidden;
}
.wd-showcase::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 80% 20%, rgba(217, 119, 6, 0.06), transparent 50%),
radial-gradient(circle at 20% 80%, rgba(139, 92, 246, 0.04), transparent 50%);
pointer-events: none;
}
.wd-showcase__head {
position: relative;
max-width: 760px;
margin-bottom: clamp(56px, 7vw, 96px);
}
.wd-showcase__head .eyebrow {
margin-bottom: 20px;
display: inline-block;
}
.wd-showcase__title {
font-size: clamp(36px, 4.5vw, 60px);
line-height: 1.1;
letter-spacing: -0.03em;
font-weight: 400;
}
.wd-showcase__title em {
font-style: italic;
color: var(--brb-accent);
}
.wd-showcase__stage {
position: relative;
height: clamp(420px, 55vw, 620px);
max-width: 960px;
margin: 0 auto;
}
/* Laptop mockup */
.wd-mock--laptop {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 75%;
z-index: 1;
opacity: 0;
transition: opacity 1200ms var(--brb-ease-entrance), transform 1200ms var(--brb-ease-entrance);
}
.wd-mock--laptop.is-visible {
opacity: 1;
transform: translateY(-50%) rotateY(-2deg);
animation: wd-laptop-idle 8s ease-in-out infinite;
}
@keyframes wd-laptop-idle {
0%, 100% { transform: translateY(-50%) rotateY(-2deg) translateX(0); }
50% { transform: translateY(calc(-50% - 6px)) rotateY(-2deg) translateX(-4px); }
}
.wd-mock__frame {
background: #2A2A28;
border-radius: 14px 14px 4px 4px;
padding: 14px 14px 20px;
position: relative;
box-shadow:
0 40px 80px -20px rgba(0, 0, 0, 0.6),
0 20px 40px -10px rgba(0, 0, 0, 0.4),
inset 0 1px 0 rgba(255,255,255,0.1);
}
.wd-mock__notch {
position: absolute;
top: 4px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 6px;
background: #1A1A1A;
border-radius: 0 0 6px 6px;
}
.wd-mock__screen {
background: var(--brb-surface);
border-radius: 6px;
aspect-ratio: 16 / 10;
overflow: hidden;
position: relative;
}
.wd-mock__browser {
background: #E8E5DF;
padding: 10px 16px;
display: flex;
align-items: center;
gap: 12px;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.wd-mock__dots {
display: flex;
gap: 6px;
}
.wd-mock__dots span {
width: 10px;
height: 10px;
border-radius: 50%;
background: #C8C4BA;
}
.wd-mock__dots span:first-child { background: #E87C7C; }
.wd-mock__dots span:nth-child(2) { background: #E8C36A; }
.wd-mock__dots span:last-child { background: #86C580; }
.wd-mock__url {
font-family: var(--brb-font-body);
font-size: 10px;
color: var(--brb-text-muted);
background: var(--brb-surface);
padding: 4px 12px;
border-radius: 4px;
flex-grow: 1;
text-align: center;
letter-spacing: 0.02em;
}
.wd-mock__content {
padding: 6% 8%;
background: var(--brb-surface);
height: calc(100% - 34px);
display: flex;
flex-direction: column;
gap: 6%;
}
.wd-mock__hero {
display: flex;
flex-direction: column;
gap: 8px;
}
.wd-mock__hero-badge {
width: 80px;
height: 8px;
background: var(--brb-accent);
border-radius: 2px;
opacity: 0.7;
}
.wd-mock__hero-line {
height: 16px;
background: var(--brb-anchor);
border-radius: 3px;
margin-top: 4px;
}
.wd-mock__hero-line--long { width: 92%; }
.wd-mock__hero-line--medium { width: 68%; }
.wd-mock__hero-sub {
height: 6px;
background: var(--brb-text-muted);
opacity: 0.3;
border-radius: 2px;
width: 75%;
margin-top: 14px;
}
.wd-mock__hero-buttons {
display: flex;
gap: 8px;
margin-top: 18px;
}
.wd-mock__btn {
height: 18px;
width: 70px;
border-radius: 4px;
}
.wd-mock__btn--primary { background: var(--brb-accent); }
.wd-mock__btn--ghost {
background: transparent;
border: 1px solid var(--brb-anchor);
}
.wd-mock__cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-top: auto;
}
.wd-mock__card {
aspect-ratio: 3 / 2;
background: rgba(26, 26, 26, 0.06);
border-radius: 4px;
position: relative;
}
.wd-mock__card::before {
content: '';
position: absolute;
top: 30%;
left: 12%;
width: 60%;
height: 6px;
background: var(--brb-anchor);
opacity: 0.5;
border-radius: 2px;
}
.wd-mock__card::after {
content: '';
position: absolute;
top: 48%;
left: 12%;
width: 40%;
height: 4px;
background: var(--brb-accent);
border-radius: 2px;
}
.wd-mock__base {
height: 8px;
background: linear-gradient(to bottom, #2A2A28, #1A1A1A);
margin-top: -4px;
width: 110%;
margin-left: -5%;
border-radius: 0 0 8px 8px;
position: relative;
}
.wd-mock__base::after {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 16%;
height: 100%;
background: #000;
border-radius: 0 0 6px 6px;
}
.wd-mock__shadow {
height: 50px;
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.4), transparent 70%);
margin-top: -20px;
filter: blur(15px);
opacity: 0.5;
}
/* Phone mockup */
.wd-mock--phone {
position: absolute;
right: 2%;
top: 8%;
width: 28%;
max-width: 220px;
z-index: 2;
opacity: 0;
transition: opacity 1200ms var(--brb-ease-entrance) 300ms, transform 1200ms var(--brb-ease-entrance) 300ms;
}
.wd-mock--phone.is-visible {
opacity: 1;
transform: rotate(6deg);
animation: wd-phone-idle 9s ease-in-out infinite 1s;
}
@keyframes wd-phone-idle {
0%, 100% { transform: rotate(6deg) translateY(0); }
50% { transform: rotate(5deg) translateY(-10px); }
}
.wd-mock__phone-frame {
background: #1A1A1A;
border: 3px solid #2A2A28;
border-radius: 28px;
padding: 10px;
box-shadow:
0 30px 60px -10px rgba(0, 0, 0, 0.6),
0 15px 30px -5px rgba(0, 0, 0, 0.4),
inset 0 0 0 1px rgba(255,255,255,0.05);
position: relative;
aspect-ratio: 9 / 19;
}
.wd-mock__phone-notch {
position: absolute;
top: 14px;
left: 50%;
transform: translateX(-50%);
width: 38%;
height: 18px;
background: #000;
border-radius: 12px;
z-index: 2;
}
.wd-mock__phone-screen {
background: var(--brb-surface);
border-radius: 20px;
height: 100%;
overflow: hidden;
position: relative;
padding: 28px 12px 12px;
}
.wd-mock__phone-status {
height: 3px;
background: var(--brb-anchor);
border-radius: 2px;
width: 50px;
margin: 0 auto 12px;
opacity: 0.3;
}
.wd-mock__phone-content {
display: flex;
flex-direction: column;
gap: 8px;
padding: 4px;
}
.wd-mock__phone-heading {
height: 14px;
background: var(--brb-anchor);
border-radius: 3px;
width: 80%;
}
.wd-mock__phone-line {
height: 5px;
background: var(--brb-text-muted);
opacity: 0.25;
border-radius: 2px;
width: 95%;
}
.wd-mock__phone-line--short { width: 70%; }
.wd-mock__phone-btn {
height: 22px;
background: var(--brb-accent);
border-radius: 4px;
width: 100%;
margin-top: 6px;
}
.wd-mock__phone-card {
aspect-ratio: 5 / 3;
background: rgba(26, 26, 26, 0.06);
border-radius: 4px;
margin-top: 8px;
position: relative;
}
.wd-mock__phone-card::before {
content: '';
position: absolute;
top: 40%;
left: 10%;
right: 40%;
height: 4px;
background: var(--brb-anchor);
opacity: 0.5;
border-radius: 2px;
}
.wd-mock__phone-card--alt::after {
content: '';
position: absolute;
bottom: 15%;
left: 10%;
width: 30%;
height: 8px;
background: var(--brb-accent);
border-radius: 3px;
}
/* ============================================================
WD · 05 · Industries
============================================================ */
.wd-industries {
background: var(--brb-surface);
padding: var(--brb-section-pad) 0;
}
.wd-industries__head {
max-width: 720px;
margin-bottom: clamp(56px, 6vw, 80px);
}
.wd-industries__head .eyebrow { margin-bottom: 20px; display: inline-block; }
.wd-industries__title {
font-size: clamp(36px, 4.5vw, 60px);
line-height: 1.1;
letter-spacing: -0.03em;
margin-bottom: 24px;
font-weight: 400;
}
.wd-industries__title em {
font-style: italic;
color: var(--brb-accent);
}
.wd-industries__sub {
font-size: clamp(16px, 1.3vw, 18px);
line-height: 1.7;
color: var(--brb-text-muted);
max-width: 62ch;
}
.wd-industries__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1px;
background: var(--brb-border-strong);
border-top: 1px solid var(--brb-border-strong);
border-bottom: 1px solid var(--brb-border-strong);
}
@media (max-width: 900px) {
.wd-industries__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.wd-industries__grid { grid-template-columns: 1fr; }
}
.wd-industry {
background: var(--brb-surface);
padding: clamp(32px, 4vw, 48px);
display: flex;
flex-direction: column;
gap: 16px;
opacity: 0;
transform: translateY(24px);
transition: opacity 700ms var(--brb-ease), transform 700ms var(--brb-ease);
}
.wd-industry.is-visible {
opacity: 1;
transform: translateY(0);
}
.wd-industry__label {
font-family: var(--brb-font-body);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
font-weight: 500;
color: var(--brb-text-muted);
}
.wd-industry__title {
font-family: var(--brb-font-display);
font-size: clamp(22px, 2.3vw, 28px);
line-height: 1.15;
letter-spacing: -0.02em;
font-weight: 400;
color: var(--brb-text);
}
.wd-industry__title em {
font-style: italic;
color: var(--brb-accent);
}
.wd-industry__body {
font-size: 14px;
line-height: 1.65;
color: var(--brb-text-muted);
}
/* (Note: legacy dark-design .wd-principles block removed in 1.28.19.
The cream-design rule near the bottom of this file is now the only
.wd-principles definition. Service-page templates use the
.wd-principles__grid + .principle markup pattern.) */
/* ============================================================
WD · 07 · Proof
============================================================ */
.wd-proof {
background: var(--brb-surface);
padding: var(--brb-section-pad) 0;
border-bottom: 1px solid var(--brb-border);
}
.wd-proof__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(24px, 3vw, 48px);
flex-wrap: wrap;
}
.wd-proof__item {
flex: 1;
min-width: 140px;
text-align: center;
opacity: 0;
transform: translateY(20px);
transition: opacity 700ms var(--brb-ease), transform 700ms var(--brb-ease);
}
.wd-proof__item.is-visible {
opacity: 1;
transform: translateY(0);
}
.wd-proof__item:nth-child(3) { transition-delay: 100ms; }
.wd-proof__item:nth-child(5) { transition-delay: 200ms; }
.wd-proof__item:nth-child(7) { transition-delay: 300ms; }
.wd-proof__value {
font-family: var(--brb-font-display);
font-size: clamp(48px, 6vw, 80px);
font-weight: 400;
line-height: 1;
letter-spacing: -0.04em;
color: var(--brb-text);
margin-bottom: 8px;
}
.wd-proof__value .wd-proof__sub {
color: var(--brb-accent);
font-weight: 400;
font-style: italic;
margin-left: 2px;
}
.wd-proof__word {
font-style: italic;
color: var(--brb-text);
}
.wd-proof__label {
font-family: var(--brb-font-body);
font-size: 11px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--brb-text-muted);
font-weight: 500;
}
.wd-proof__divider {
width: 1px;
height: 60px;
background: var(--brb-border);
}
@media (max-width: 720px) {
.wd-proof__divider { display: none; }
.wd-proof__item { min-width: 45%; }
}
/* ============================================================
WD · 08 · Final CTA
============================================================ */
.wd-final {
background: var(--brb-anchor);
color: var(--brb-text-on-dark);
padding: clamp(96px, 12vw, 160px) 0;
position: relative;
overflow: hidden;
}
.wd-final::before {
content: '';
position: absolute;
inset: 0;
background:
radial-gradient(circle at 20% 50%, rgba(217, 119, 6, 0.08), transparent 50%),
radial-gradient(circle at 80% 50%, rgba(139, 92, 246, 0.05), transparent 50%);
pointer-events: none;
}
.wd-final__inner {
position: relative;
max-width: 820px;
margin: 0 auto;
text-align: center;
}
.wd-final__inner.is-visible {
/* preserved for any legacy pages that do add .reveal to the inner */
}
.wd-final__inner .eyebrow {
margin-bottom: 24px;
display: inline-block;
}
.wd-final__title {
font-size: clamp(36px, 5vw, 64px);
line-height: 1.1;
letter-spacing: -0.03em;
margin-bottom: 28px;
font-weight: 400;
}
.wd-final__title em {
font-style: italic;
color: var(--brb-accent);
}
.wd-final__body {
font-size: clamp(16px, 1.3vw, 18px);
line-height: 1.7;
color: var(--brb-text-on-dark-muted);
max-width: 54ch;
margin: 0 auto 40px;
}
.wd-final__actions {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
/* ============================================================
WD · Mini Client Showcase strip (.wd-clients)
Supportive trust strip on /website-design only — between
.wd-dashboard and .wd-showcase. Logos render desaturated at
rest, restore color on hover. All logos link to /work.
============================================================ */
.wd-clients {
background: #EFE9E0;
padding: var(--brb-section-pad) 0;
border-top: 1px solid rgba(26, 26, 24, 0.1);
}
.wd-clients__head {
text-align: center;
margin-bottom: clamp(40px, 5vw, 64px);
}
.wd-clients__head .eyebrow {
margin-bottom: 12px;
display: inline-block;
}
.wd-clients__sub {
font-family: var(--brb-font-display);
font-style: italic;
font-size: clamp(1.05rem, 1.4vw, 1.25rem);
line-height: 1.4;
color: var(--brb-text-muted);
margin: 0;
}
.wd-clients__grid {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: clamp(20px, 3vw, 36px) clamp(24px, 3.5vw, 48px);
align-items: center;
max-width: 1100px;
margin-inline: auto;
}
@media (min-width: 600px) {
.wd-clients__grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 880px) {
.wd-clients__grid {
grid-template-columns: repeat(6, 1fr);
}
}
.wd-clients__item {
display: flex;
align-items: center;
justify-content: center;
}
.wd-clients__link {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 80px;
padding: 8px 12px;
border-radius: 6px;
transition: transform 200ms var(--brb-ease), box-shadow 200ms var(--brb-ease);
}
.wd-clients__link:hover {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(26, 26, 26, 0.06);
}
.wd-clients__logo {
max-width: 100%;
max-height: 56px;
width: auto;
height: auto;
object-fit: contain;
filter: grayscale(100%) opacity(0.6);
transition: filter 200ms var(--brb-ease);
}
.wd-clients__link:hover .wd-clients__logo {
filter: grayscale(0%) opacity(1);
}
.wd-clients__cta-wrap {
text-align: center;
margin-top: clamp(40px, 5vw, 64px);
}
.wd-clients__cta {
font-family: var(--brb-font-body);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--brb-text);
text-decoration: none;
border-bottom: 1px solid var(--brb-accent);
padding-bottom: 2px;
transition: color 200ms var(--brb-ease), border-color 200ms var(--brb-ease);
}
.wd-clients__cta:hover {
color: var(--brb-accent);
}
/* ============================================================
==============================================================
WD · Dashboard Mockup Section (.wd-dashboard)
Reinforces "Measurable from day one" principle with a
CSS+SVG stylized analytics dashboard. Brand-colored.
==============================================================
============================================================ */
.wd-dashboard {
background: var(--brb-surface);
padding: var(--brb-section-pad) 0;
border-top: 1px solid var(--brb-border);
position: relative;
overflow: hidden;
}
.wd-dashboard::before {
content: '';
position: absolute;
top: 0; right: 0;
width: 50%;
height: 100%;
background: radial-gradient(ellipse at center right, rgba(217, 119, 6, 0.04), transparent 60%);
pointer-events: none;
}
.wd-dashboard__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(48px, 6vw, 96px);
align-items: center;
position: relative;
}
@media (max-width: 900px) {
.wd-dashboard__grid {
grid-template-columns: 1fr;
}
}
/* Copy column */
.wd-dashboard__copy {
opacity: 0;
transform: translateY(24px);
transition: opacity 900ms var(--brb-ease-entrance), transform 900ms var(--brb-ease-entrance);
}
.wd-dashboard__copy.is-visible {
opacity: 1;
transform: translateY(0);
}
.wd-dashboard__copy .eyebrow {
margin-bottom: 20px;
display: inline-block;
}
.wd-dashboard__title {
font-family: var(--brb-font-display);
font-size: clamp(30px, 3.6vw, 44px);
line-height: 1.15;
letter-spacing: -0.02em;
margin-bottom: 24px;
font-weight: 400;
max-width: 18ch;
}
.wd-dashboard__title em {
font-style: italic;
color: var(--brb-accent);
}
.wd-dashboard__body {
font-size: clamp(15px, 1.25vw, 17px);
line-height: 1.7;
color: var(--brb-text-muted);
max-width: 48ch;
}
/* Dashboard viz column */
.wd-dashboard__viz {
position: relative;
opacity: 0;
transform: translateY(30px);
transition: opacity 1200ms var(--brb-ease-entrance) 200ms, transform 1200ms var(--brb-ease-entrance) 200ms;
}
.wd-dashboard__viz.is-visible {
opacity: 1;
transform: translateY(0);
}
/* The actual dashboard window */
.wd-dash {
background: var(--brb-anchor);
border-radius: 12px;
overflow: hidden;
box-shadow:
0 40px 80px -20px rgba(26, 26, 26, 0.25),
0 20px 40px -10px rgba(26, 26, 26, 0.15),
0 0 0 1px rgba(26, 26, 26, 0.08);
position: relative;
animation: wd-dash-idle 10s ease-in-out infinite;
}
@keyframes wd-dash-idle {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
/* Header */
.wd-dash__head {
background: #232321;
padding: 14px 20px;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid rgba(250, 247, 242, 0.05);
}
.wd-dash__logo {
display: flex;
align-items: center;
gap: 10px;
}
.wd-dash__dot {
width: 8px;
height: 8px;
background: var(--brb-accent);
border-radius: 50%;
animation: wd-pulse 2s ease-in-out infinite;
box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.5);
}
@keyframes wd-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.5); }
50% { box-shadow: 0 0 0 6px rgba(217, 119, 6, 0); }
}
.wd-dash__name {
font-family: var(--brb-font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--brb-text-on-dark-muted);
}
.wd-dash__tabs {
display: flex;
gap: 16px;
}
.wd-dash__tab {
font-family: var(--brb-font-body);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 500;
color: var(--brb-text-on-dark-subtle);
padding-bottom: 4px;
border-bottom: 1px solid transparent;
transition: color 200ms var(--brb-ease);
}
.wd-dash__tab--active {
color: var(--brb-text-on-dark);
border-bottom-color: var(--brb-accent);
}
/* Body */
.wd-dash__body {
padding: 24px;
display: flex;
flex-direction: column;
gap: 24px;
}
/* Stats row */
.wd-dash__stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.wd-dash__stat {
background: rgba(250, 247, 242, 0.03);
border: 1px solid rgba(250, 247, 242, 0.06);
border-radius: 8px;
padding: 14px 16px;
display: flex;
flex-direction: column;
gap: 4px;
}
.wd-dash__stat-label {
font-family: var(--brb-font-body);
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--brb-text-on-dark-subtle);
font-weight: 500;
}
.wd-dash__stat-value {
font-family: var(--brb-font-display);
font-size: 22px;
font-weight: 400;
color: var(--brb-text-on-dark);
letter-spacing: -0.02em;
line-height: 1.1;
}
.wd-dash__stat-delta {
font-family: var(--brb-font-body);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.03em;
}
.wd-dash__stat-delta--up {
color: #7ACC8F;
}
/* Chart */
.wd-dash__chart {
height: 120px;
position: relative;
padding: 12px 0;
}
.wd-dash__chart-grid {
position: absolute;
inset: 12px 0;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.wd-dash__chart-grid span {
height: 1px;
background: rgba(250, 247, 242, 0.05);
}
.wd-dash__chart-svg {
width: 100%;
height: 100%;
overflow: visible;
}
.wd-dash__chart-area {
fill: url(#wd-chart-gradient);
fill: rgba(217, 119, 6, 0.15);
opacity: 0;
animation: wd-chart-area-in 1600ms var(--brb-ease-entrance) 600ms forwards;
}
@keyframes wd-chart-area-in {
to { opacity: 1; }
}
.wd-dash__chart-line {
fill: none;
stroke: var(--brb-accent);
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: wd-chart-draw 2000ms var(--brb-ease-entrance) 400ms forwards;
}
@keyframes wd-chart-draw {
to { stroke-dashoffset: 0; }
}
.wd-dash__chart-dot {
fill: var(--brb-accent);
opacity: 0;
animation: wd-dot-in 400ms var(--brb-ease) forwards;
}
.wd-dash__chart-dot:nth-of-type(1) { animation-delay: 1400ms; }
.wd-dash__chart-dot:nth-of-type(2) { animation-delay: 1700ms; }
.wd-dash__chart-dot:nth-of-type(3) { animation-delay: 2000ms; }
.wd-dash__chart-dot--last {
animation-delay: 2300ms;
}
.wd-dash__chart-dot--last {
fill: var(--brb-accent);
filter: drop-shadow(0 0 8px rgba(217, 119, 6, 0.8));
}
@keyframes wd-dot-in {
from { opacity: 0; transform: scale(0); }
to { opacity: 1; transform: scale(1); }
}
/* Sources block */
.wd-dash__sources {
display: flex;
flex-direction: column;
gap: 10px;
padding-top: 4px;
border-top: 1px solid rgba(250, 247, 242, 0.05);
}
.wd-dash__source-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 4px;
}
.wd-dash__source-label {
font-family: var(--brb-font-body);
font-size: 11px;
color: var(--brb-text-on-dark-muted);
}
.wd-dash__source-pct {
font-family: var(--brb-font-body);
font-size: 11px;
font-weight: 600;
color: var(--brb-text-on-dark);
}
.wd-dash__bar {
height: 4px;
background: rgba(250, 247, 242, 0.06);
border-radius: 2px;
overflow: hidden;
}
.wd-dash__bar-fill {
height: 100%;
background: var(--brb-accent);
border-radius: 2px;
width: 0 !important;
animation: wd-bar-fill 1400ms var(--brb-ease-entrance) forwards;
}
.wd-dashboard__viz.is-visible .wd-dash__source:nth-child(1) .wd-dash__bar-fill { animation-delay: 800ms; --target-width: 42%; }
.wd-dashboard__viz.is-visible .wd-dash__source:nth-child(2) .wd-dash__bar-fill { animation-delay: 900ms; --target-width: 31%; }
.wd-dashboard__viz.is-visible .wd-dash__source:nth-child(3) .wd-dash__bar-fill { animation-delay: 1000ms; --target-width: 18%; }
.wd-dashboard__viz.is-visible .wd-dash__source:nth-child(4) .wd-dash__bar-fill { animation-delay: 1100ms; --target-width: 9%; }
@keyframes wd-bar-fill {
to { width: var(--target-width, 50%) !important; }
}
/* Floating notification bubble */
.wd-dash__notif {
position: absolute;
top: -16px;
right: -20px;
background: var(--brb-surface);
border: 1px solid var(--brb-border);
border-radius: 100px;
padding: 8px 14px 8px 10px;
display: flex;
align-items: center;
gap: 8px;
font-family: var(--brb-font-body);
font-size: 11px;
font-weight: 500;
color: var(--brb-text);
letter-spacing: 0.02em;
box-shadow: 0 10px 30px -5px rgba(26, 26, 26, 0.15);
opacity: 0;
transform: translate(8px, -8px) scale(0.9);
animation: wd-notif-in 600ms var(--brb-ease-entrance) 2400ms forwards,
wd-notif-float 6s ease-in-out 3000ms infinite;
}
@keyframes wd-notif-in {
to {
opacity: 1;
transform: translate(0, 0) scale(1);
}
}
@keyframes wd-notif-float {
0%, 100% { transform: translate(0, 0) scale(1); }
50% { transform: translate(0, -4px) scale(1); }
}
.wd-dash__notif-dot {
width: 8px;
height: 8px;
background: #7ACC8F;
border-radius: 50%;
animation: wd-pulse-green 2s ease-in-out infinite;
box-shadow: 0 0 0 0 rgba(122, 204, 143, 0.5);
}
@keyframes wd-pulse-green {
0%, 100% { box-shadow: 0 0 0 0 rgba(122, 204, 143, 0.5); }
50% { box-shadow: 0 0 0 5px rgba(122, 204, 143, 0); }
}
.wd-dash__notif-text { white-space: nowrap; }
@media (max-width: 900px) {
.wd-dash__notif { right: -10px; top: -12px; }
}
/* ============================================================
Extra polish: subtle hover lifts + underline growth on industries,
+ gentle hover lift on platform cards
============================================================ */
.wd-industry {
position: relative;
cursor: default;
}
.wd-industry::after {
content: '';
position: absolute;
left: clamp(32px, 4vw, 48px);
bottom: 0;
height: 2px;
width: 0;
background: var(--brb-accent);
transition: width 500ms var(--brb-ease);
}
.wd-industry:hover::after {
width: 48px;
}
/* Hub-link variant of an industry cell — clickable, with amber-underlined
accent text + arrow on the body to signal interactivity. */
.wd-industry--link {
cursor: pointer;
text-decoration: none;
color: inherit;
transition: transform 250ms var(--brb-ease);
display: block;
}
.wd-industry--link:hover {
transform: translateY(-2px);
}
.wd-industry--link:hover::after {
width: 64px;
}
.wd-industry__link-text {
border-bottom: 1px solid var(--brb-accent);
transition: color 200ms var(--brb-ease);
}
.wd-industry--link:hover .wd-industry__link-text {
color: var(--brb-accent);
}
/* "See all industries →" CTA below the wd-industries grid */
.wd-industries__cta-wrap {
margin-top: clamp(28px, 3vw, 40px);
text-align: center;
}
.wd-industries__cta {
font-family: var(--brb-font-body);
font-size: 14px;
font-weight: 500;
color: var(--brb-text);
border-bottom: 1px solid var(--brb-accent);
padding-bottom: 1px;
transition: color 200ms var(--brb-ease);
}
.wd-industries__cta:hover {
color: var(--brb-accent);
}
/* Dark-context variant — SEO + paid-advertising sections use --brb-anchor bg */
.wd-industries:has(.industry-item) .wd-industries__cta {
color: var(--brb-text-on-dark);
}
/* "{Service} in {city} · {Service} in {city}" cities row below "See all industries" */
.wd-industries__cities {
margin-top: clamp(10px, 1.2vw, 14px);
text-align: center;
font-family: var(--brb-font-body);
font-size: 13px;
font-weight: 400;
color: var(--brb-text-muted);
}
.wd-industries__cities a {
color: var(--brb-text);
border-bottom: 1px solid var(--brb-accent);
padding-bottom: 1px;
transition: color 200ms var(--brb-ease);
}
.wd-industries__cities a:hover {
color: var(--brb-accent);
}
/* Dark-context variant — SEO + paid-advertising sections use --brb-anchor bg */
.wd-industries:has(.industry-item) .wd-industries__cities {
color: var(--brb-text-on-dark-muted);
}
.wd-industries:has(.industry-item) .wd-industries__cities a {
color: var(--brb-text-on-dark);
}
.wd-platform {
transition: opacity 700ms var(--brb-ease),
transform 700ms var(--brb-ease),
background 300ms var(--brb-ease);
cursor: default;
}
.wd-platform:not(.wd-platform--lead):hover {
background: #F4F1EB;
}
/* Nudge the mockup's primary button with a soft pulse */
.wd-mock__btn--primary {
animation: wd-btn-pulse 3s ease-in-out infinite;
}
@keyframes wd-btn-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
/* ============================================================
==============================================================
HOMEPAGE ENHANCEMENTS
— Hero animated background (orbs + grid)
— Hero line-by-line assembly
— Trust strip under hero
— Mini mockups for service cards (browser/SERP/display ad)
— Dashboard mockup in flagship section
— Count-up styling for inline hero counter
==============================================================
============================================================ */
/* ============================================================
Hero — animated background
============================================================ */
.hero {
position: relative;
overflow: hidden;
isolation: isolate;
}
.hero__bg {
position: absolute;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(ellipse at 100% 0%, rgba(217, 119, 6, 0.38) 0%, transparent 100%),
radial-gradient(ellipse at 0% 100%, rgba(139, 92, 246, 0.12) 0%, transparent 100%);
}
/* Orb divs kept in DOM for stability but hidden —
amber glow is now a corner-anchored gradient on .hero__bg */
.hero__orb { display: none; }
.hero__grid {
/* Grid lines removed — kept the class for DOM stability, but it now renders nothing.
If you ever want the grid back, restore the previous background-image rules. */
display: none;
}
/* Hero headline line-by-line assembly */
.hero__headline .line {
display: block;
opacity: 0;
transform: translateY(22px);
transition: opacity 900ms var(--brb-ease-entrance), transform 900ms var(--brb-ease-entrance);
}
.hero__headline .line.is-visible {
opacity: 1;
transform: translateY(0);
}
.hero__headline em {
font-style: italic;
color: var(--brb-accent);
font-weight: 400;
}
/* Inline hero metric styling */
.hero__inline-metric {
color: var(--brb-accent);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
/* ============================================================
==============================================================
ABOUT PAGE ENHANCEMENTS
— Animated intro hero (orbs, grid, line assembly)
— Signature portrait section
— By the Numbers stats
— Beyond the Work studio visualization (CSS/SVG)
— Subtle polish on existing sections
==============================================================
============================================================ */
/* ============================================================
Intro — animated background
============================================================ */
.intro {
position: relative;
overflow: hidden;
isolation: isolate;
}
.intro__bg {
position: absolute;
inset: 0;
pointer-events: none;
z-index: -1;
background:
radial-gradient(ellipse at 0% 0%, rgba(217, 119, 6, 0.10) 0%, transparent 55%),
radial-gradient(ellipse at 100% 100%, rgba(139, 92, 246, 0.05) 0%, transparent 65%);
}
/* Orb divs kept in DOM for stability but hidden —
amber glow is now a corner-anchored gradient on .intro__bg */
.intro__orb { display: none; }
.intro__grid {
/* Grid lines removed for consistency across all page heroes.
Kept class for DOM stability. */
display: none;
}
/* Intro headline line-by-line */
.intro__headline .line {
display: block;
opacity: 0;
transform: translateY(22px);
transition: opacity 900ms var(--brb-ease-entrance), transform 900ms var(--brb-ease-entrance);
}
.intro__headline .line.is-visible {
opacity: 1;
transform: translateY(0);
}
.intro__headline em {
font-style: italic;
color: var(--brb-accent);
font-weight: 400;
}
/* Intro body lines fade up */
.intro__body-line {
opacity: 0;
transform: translateY(14px);
transition: opacity 700ms var(--brb-ease), transform 700ms var(--brb-ease);
}
.intro__body-line.is-visible {
opacity: 1;
transform: translateY(0);
}
/* ============================================================
Signature section — portrait + name + signature mark
============================================================ */
.signature {
background: var(--brb-surface);
padding: clamp(56px, 7vw, 96px) 0;
border-bottom: 1px solid var(--brb-border);
}
.signature__grid {
display: grid;
grid-template-columns: auto 1fr;
gap: clamp(32px, 5vw, 72px);
align-items: center;
max-width: 920px;
margin: 0 auto;
}
@media (max-width: 680px) {
.signature__grid {
grid-template-columns: 1fr;
text-align: center;
}
}
.signature__photo {
width: 220px;
height: 220px;
border-radius: 50%;
overflow: hidden;
border: 4px solid var(--brb-anchor);
box-shadow: 0 20px 40px -15px rgba(26, 26, 26, 0.3);
position: relative;
opacity: 0;
transform: translateY(20px);
transition: opacity 900ms var(--brb-ease-entrance), transform 900ms var(--brb-ease-entrance);
}
.signature__photo.is-visible {
opacity: 1;
transform: translateY(0);
}
@media (max-width: 680px) {
.signature__photo {
width: 180px;
height: 180px;
margin: 0 auto;
}
}
.signature__photo::after {
content: '';
position: absolute;
inset: -4px;
border-radius: 50%;
border: 1px solid var(--brb-accent);
opacity: 0;
animation: signature-ring 4s ease-in-out infinite;
}
@keyframes signature-ring {
0%, 100% { opacity: 0; transform: scale(1); }
50% { opacity: 0.3; transform: scale(1.04); }
}
.signature__photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.signature__meta {
opacity: 0;
transform: translateY(20px);
transition: opacity 900ms var(--brb-ease-entrance) 200ms, transform 900ms var(--brb-ease-entrance) 200ms;
}
.signature__meta.is-visible {
opacity: 1;
transform: translateY(0);
}
.signature__line {
width: 40px;
height: 2px;
background: var(--brb-accent);
margin-bottom: 20px;
}
@media (max-width: 680px) {
.signature__line { margin: 0 auto 20px; }
}
.signature__name {
font-family: var(--brb-font-display);
font-size: clamp(36px, 5vw, 52px);
font-weight: 400;
line-height: 1;
letter-spacing: -0.03em;
color: var(--brb-text);
margin-bottom: 12px;
}
.signature__dot {
color: var(--brb-accent);
font-weight: 700;
}
.signature__role {
font-family: var(--brb-font-body);
font-size: 14px;
color: var(--brb-text-muted);
letter-spacing: 0.03em;
margin-bottom: 20px;
}
.signature__mark {
color: var(--brb-accent);
max-width: 200px;
height: 40px;
}
@media (max-width: 680px) {
.signature__mark { margin: 0 auto; }
}
.signature__mark svg {
width: 100%;
height: 100%;
overflow: visible;
}
.signature__path {
stroke-dasharray: 500;
stroke-dashoffset: 500;
transition: stroke-dashoffset 2000ms var(--brb-ease-entrance);
}
.signature__mark.is-drawn .signature__path {
stroke-dashoffset: 0;
}
/* ============================================================
Beyond the Work — Studio visualization
============================================================ */
.beyond__viz {
width: 100%;
opacity: 0;
transform: translateY(20px);
transition: opacity 1000ms var(--brb-ease-entrance), transform 1000ms var(--brb-ease-entrance);
}
.beyond__viz .studio-viz.is-visible,
.beyond__viz:has(.studio-viz.is-visible) {
opacity: 1;
transform: translateY(0);
}
/* Since :has() isn't universal, use a class on .beyond__viz directly */
.studio-viz.is-visible {
opacity: 1;
transform: translateY(0);
}
.studio-viz {
background: var(--brb-anchor);
border: 1px solid rgba(250, 247, 242, 0.08);
border-radius: 14px;
padding: 24px;
box-shadow:
0 30px 60px -15px rgba(26, 26, 26, 0.35),
0 15px 30px -10px rgba(26, 26, 26, 0.25);
color: var(--brb-text-on-dark);
font-family: var(--brb-font-body);
position: relative;
overflow: hidden;
opacity: 0;
transform: translateY(20px);
transition: opacity 1000ms var(--brb-ease-entrance), transform 1000ms var(--brb-ease-entrance);
}
.studio-viz::before {
content: '';
position: absolute;
top: 0; right: 0;
width: 50%;
height: 100%;
background: radial-gradient(ellipse at top right, rgba(217, 119, 6, 0.08), transparent 60%);
pointer-events: none;
}
.studio-viz__head {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 16px;
border-bottom: 1px solid rgba(250, 247, 242, 0.08);
margin-bottom: 20px;
}
.studio-viz__indicator {
display: flex;
align-items: center;
gap: 10px;
}
.studio-viz__rec-dot {
width: 8px;
height: 8px;
background: #E87C7C;
border-radius: 50%;
animation: studio-rec-pulse 1.5s ease-in-out infinite;
}
@keyframes studio-rec-pulse {
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(232, 124, 124, 0.5); }
50% { opacity: 0.6; box-shadow: 0 0 0 5px rgba(232, 124, 124, 0); }
}
.studio-viz__rec-label {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.02em;
color: var(--brb-text-on-dark-muted);
}
.studio-viz__timestamp {
font-size: 10px;
font-weight: 600;
letter-spacing: 0.1em;
color: var(--brb-accent);
font-family: 'Fraunces', Georgia, serif;
}
/* VU Meter */
.studio-viz__vu {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
}
.studio-viz__vu-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.15em;
color: var(--brb-text-on-dark-subtle);
width: 14px;
}
.studio-viz__vu-track {
flex-grow: 1;
height: 10px;
background: rgba(250, 247, 242, 0.05);
border-radius: 2px;
overflow: hidden;
position: relative;
}
.studio-viz__vu-ticks {
position: absolute;
inset: 0;
display: flex;
justify-content: space-between;
pointer-events: none;
z-index: 2;
}
.studio-viz__vu-ticks span {
width: 1px;
height: 100%;
background: rgba(26, 26, 26, 0.4);
}
.studio-viz__vu-fill {
height: 100%;
background: linear-gradient(to right,
#7ACC8F 0%,
#7ACC8F 55%,
var(--brb-accent) 60%,
var(--brb-accent) 80%,
#E87C7C 85%,
#E87C7C 100%);
transform-origin: left;
animation: studio-vu-l 1.2s ease-in-out infinite;
border-radius: 2px;
}
.studio-viz__vu-fill--r {
animation: studio-vu-r 1.4s ease-in-out infinite 0.3s;
}
@keyframes studio-vu-l {
0% { transform: scaleX(0.35); }
25% { transform: scaleX(0.72); }
50% { transform: scaleX(0.58); }
75% { transform: scaleX(0.82); }
100% { transform: scaleX(0.35); }
}
@keyframes studio-vu-r {
0% { transform: scaleX(0.4); }
30% { transform: scaleX(0.68); }
60% { transform: scaleX(0.78); }
80% { transform: scaleX(0.52); }
100% { transform: scaleX(0.4); }
}
.studio-viz__vu-peak {
position: absolute;
top: -2px;
bottom: -2px;
width: 2px;
z-index: 3;
opacity: 0;
animation: studio-peak-flash 2.4s ease-out infinite;
}
.studio-viz__vu-peak--green { left: 50%; background: #7ACC8F; animation-delay: 0.4s; }
.studio-viz__vu-peak--amber { left: 70%; background: var(--brb-accent); animation-delay: 1.0s; }
.studio-viz__vu-peak--red { left: 88%; background: #E87C7C; animation-delay: 1.6s; }
@keyframes studio-peak-flash {
0%, 90%, 100% { opacity: 0; }
45%, 55% { opacity: 1; }
}
/* Waveform */
.studio-viz__waveform {
position: relative;
height: 80px;
margin: 20px 0;
background: rgba(250, 247, 242, 0.02);
border-radius: 6px;
overflow: hidden;
}
.studio-viz__wave-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.studio-viz__wave-path {
fill: none;
stroke: var(--brb-accent);
stroke-width: 1.2;
stroke-linecap: round;
opacity: 0.8;
animation: studio-wave-shift 12s linear infinite;
}
.studio-viz__wave-svg--alt { opacity: 0.35; }
.studio-viz__wave-path--alt {
stroke: #FAF7F2;
animation: studio-wave-shift 16s linear infinite reverse;
}
@keyframes studio-wave-shift {
0% { transform: translateX(0); }
100% { transform: translateX(-8px); }
}
/* Levels */
.studio-viz__levels {
display: flex;
flex-direction: column;
gap: 10px;
padding-top: 8px;
border-top: 1px solid rgba(250, 247, 242, 0.08);
}
.studio-viz__level {
display: grid;
grid-template-columns: 48px 1fr auto;
align-items: center;
gap: 12px;
}
.studio-viz__level-label {
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
font-weight: 600;
color: var(--brb-text-on-dark-subtle);
}
.studio-viz__level-bar {
height: 4px;
background: rgba(250, 247, 242, 0.06);
border-radius: 2px;
overflow: hidden;
}
.studio-viz__level-fill {
height: 100%;
background: var(--brb-accent);
border-radius: 2px;
width: 0;
animation: studio-level-fill 1400ms var(--brb-ease-entrance) forwards;
--level: 50%;
}
.beyond__viz .studio-viz.is-visible .studio-viz__level:nth-child(1) .studio-viz__level-fill { animation-delay: 400ms; }
.beyond__viz .studio-viz.is-visible .studio-viz__level:nth-child(2) .studio-viz__level-fill { animation-delay: 500ms; }
.beyond__viz .studio-viz.is-visible .studio-viz__level:nth-child(3) .studio-viz__level-fill { animation-delay: 600ms; }
@keyframes studio-level-fill {
to { width: var(--level); }
}
.studio-viz__level-value {
font-family: 'Fraunces', Georgia, serif;
font-size: 12px;
font-weight: 400;
color: var(--brb-text-on-dark);
width: 40px;
text-align: right;
letter-spacing: -0.02em;
}
/* ============================================================
Subtle polish on existing About sections
============================================================ */
/* ============================================================
About page — centered signature variant
(when photo is moved up to hero, signature becomes text-only)
============================================================ */
.signature__grid--centered {
grid-template-columns: 1fr !important;
text-align: center;
max-width: 600px;
}
.signature__grid--centered .signature__line {
margin: 0 auto 20px;
}
.signature__grid--centered .signature__mark {
margin: 0 auto;
}
/* Beyond the Work — styled outbound links for Carbon City Lights + Venia Mastering */
.beyond__link {
color: var(--brb-text);
border-bottom: 1px solid var(--brb-accent);
padding-bottom: 1px;
transition: color 200ms var(--brb-ease), background 200ms var(--brb-ease);
}
.beyond__link:hover {
color: var(--brb-accent);
background: rgba(217, 119, 6, 0.06);
}
/* On dark backgrounds, use the dark-muted token */
.beyond--dark .beyond__link,
.beyond .beyond__content p .beyond__link {
color: inherit;
}
/* ============================================================
About · Hero portrait caption — elegant editorial detail
Sits below the portrait with a subtle amber rule above
============================================================ */
.intro__caption {
margin-top: 20px;
text-align: center;
position: relative;
z-index: 2;
opacity: 0;
transform: translateY(8px);
animation: intro-caption-in 900ms var(--brb-ease-entrance) 1400ms forwards;
}
@keyframes intro-caption-in {
to {
opacity: 1;
transform: translateY(0);
}
}
.intro__caption-line {
width: 24px;
height: 1px;
background: var(--brb-accent);
margin: 0 auto 14px;
opacity: 0.8;
}
.intro__caption-name {
font-family: var(--brb-font-display);
font-size: 20px;
font-weight: 400;
letter-spacing: -0.02em;
color: var(--brb-text);
line-height: 1.1;
margin-bottom: 0;
}
.intro__caption-dot {
color: var(--brb-accent);
font-weight: 700;
}
.intro__caption-role {
font-family: var(--brb-font-body);
font-size: 11px;
font-weight: 400;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--brb-text-muted);
line-height: 1.5;
}
@media (max-width: 900px) {
.intro__caption {
margin-top: 18px;
}
.intro__caption-name {
font-size: 18px;
}
.intro__caption-role {
font-size: 10px;
letter-spacing: 0.12em;
}
}
/* ============================================================
About · Beyond the Work — photo block (replaces studio viz)
Uses the acoustic performance photo as the focal element,
with the offset amber accent frame pattern from the hero.
============================================================ */
.beyond__photo-block {
position: relative;
aspect-ratio: 3 / 4;
width: 100%;
}
@media (min-width: 900px) {
.beyond__photo-block {
max-width: 460px;
}
}
.beyond__photo-frame {
position: relative;
width: 100%;
height: 100%;
border-radius: 8px;
overflow: hidden;
z-index: 2;
box-shadow:
0 30px 60px -15px rgba(0, 0, 0, 0.4),
0 15px 30px -10px rgba(0, 0, 0, 0.25);
opacity: 0;
transform: translateY(24px) scale(0.97);
transition: opacity 1200ms var(--brb-ease-entrance),
transform 1200ms var(--brb-ease-entrance);
}
.beyond__photo-frame.is-visible {
opacity: 1;
transform: translateY(0) scale(1);
}
.beyond__photo-frame:hover img {
transform: scale(1.03);
}
.beyond__photo-frame img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 1200ms var(--brb-ease);
}
/* Subtle gradient overlay at bottom for caption readability */
.beyond__photo-frame::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 40%;
background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.55));
pointer-events: none;
}
/* Photo caption overlay */
.beyond__photo-caption {
position: absolute;
bottom: 20px;
left: 24px;
right: 24px;
z-index: 2;
display: flex;
align-items: baseline;
gap: 10px;
flex-wrap: wrap;
}
.beyond__photo-caption-label {
font-family: var(--brb-font-body);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.6);
font-weight: 500;
}
.beyond__photo-caption-link {
font-family: var(--brb-font-display);
font-size: 18px;
font-weight: 400;
letter-spacing: -0.01em;
color: #FAF7F2;
border-bottom: 1px solid var(--brb-accent);
padding-bottom: 1px;
transition: color 200ms var(--brb-ease);
}
.beyond__photo-caption-link:hover {
color: var(--brb-accent);
}
/* Amber offset accent frame behind the photo */
.beyond__photo-accent {
position: absolute;
top: 16px;
left: 16px;
width: 100%;
height: 100%;
border: 2px solid var(--brb-accent);
border-radius: 8px;
z-index: 1;
opacity: 0.35;
transition: all 600ms var(--brb-ease);
}
.beyond__photo-block:hover .beyond__photo-accent {
top: 20px;
left: 20px;
opacity: 0.55;
}
/* ============================================================
==============================================================
HOMEPAGE v2 ENHANCEMENTS
— Pull-quote editorial section (3.5)
— Upgraded Who's Behind section
— 3-column Work grid variant
— Featured + grid reviews
==============================================================
============================================================ */
/* ============================================================
==============================================================
SEO PAGE — SIGNATURE VISUALS
— Animated SERP mockup with typing query + highlighted #1
— Rank tracking dashboard (keyword table + sparklines)
— Local Pack visualization (map + 3-pack results)
— Core Web Vitals donut charts
==============================================================
============================================================ */
/* ============================================================
SEO · SERP Mockup
============================================================ */
.seo-serp {
background: var(--brb-anchor);
color: var(--brb-text-on-dark);
padding: clamp(60px, 8vw, 100px) 0;
position: relative;
overflow: hidden;
}
.seo-serp::before {
content: '';
position: absolute;
top: -20%;
right: -10%;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(217, 119, 6, 0.08), transparent 60%);
pointer-events: none;
}
.seo-serp__head {
max-width: 720px;
margin: 0 auto clamp(40px, 5vw, 64px);
text-align: center;
position: relative;
}
.seo-serp__head .eyebrow {
margin-bottom: 16px;
display: inline-block;
}
.seo-serp__title {
font-family: var(--brb-font-display);
font-size: clamp(36px, 4.5vw, 56px);
line-height: 1.1;
letter-spacing: -0.03em;
font-weight: 400;
margin-bottom: 20px;
}
.seo-serp__title em {
font-style: italic;
color: var(--brb-accent);
}
.seo-serp__body {
font-size: 16px;
line-height: 1.7;
color: var(--brb-text-on-dark-muted);
max-width: 56ch;
margin: 0 auto;
}
.serp-mockup {
max-width: 840px;
margin: 0 auto;
background: #FAF7F2;
border-radius: 12px;
overflow: hidden;
box-shadow:
0 40px 80px -20px rgba(0, 0, 0, 0.6),
0 20px 40px -10px rgba(0, 0, 0, 0.4);
opacity: 0;
transform: translateY(30px);
transition: opacity 1200ms var(--brb-ease-entrance),
transform 1200ms var(--brb-ease-entrance);
position: relative;
}
.serp-mockup.is-visible {
opacity: 1;
transform: translateY(0);
}
.serp-mockup__chrome {
background: #E8E5E0;
padding: 10px 16px;
display: flex;
align-items: center;
gap: 16px;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.serp-mockup__dots {
display: flex;
gap: 6px;
}
.serp-mockup__dots span {
width: 10px;
height: 10px;
border-radius: 50%;
}
.serp-mockup__dots span:nth-child(1) { background: #FF5F56; }
.serp-mockup__dots span:nth-child(2) { background: #FFBD2E; }
.serp-mockup__dots span:nth-child(3) { background: #27C93F; }
.serp-mockup__url-bar {
flex: 1;
background: #FFFFFF;
border-radius: 6px;
padding: 6px 12px;
font-size: 12px;
color: #5F5F5A;
display: flex;
align-items: center;
gap: 8px;
}
.serp-mockup__lock {
font-size: 10px;
}
.serp-mockup__search {
padding: 32px 40px 20px;
display: flex;
flex-direction: column;
gap: 24px;
}
.serp-mockup__google {
font-family: 'Product Sans', system-ui, sans-serif;
font-size: 42px;
font-weight: 500;
letter-spacing: -0.02em;
text-align: center;
}
.serp-mockup__search-input {
background: #FFFFFF;
border: 1px solid #DFE1E5;
border-radius: 24px;
padding: 12px 20px;
font-size: 15px;
color: #202124;
min-height: 40px;
display: flex;
align-items: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06);
}
.serp-mockup__query {
font-family: Arial, sans-serif;
color: #202124;
}
.serp-mockup__cursor {
display: inline-block;
animation: serp-blink 1s step-end infinite;
color: #202124;
margin-left: 1px;
}
@keyframes serp-blink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
.serp-mockup__results {
padding: 16px 40px 32px;
opacity: 0;
transform: translateY(12px);
transition: opacity 600ms var(--brb-ease), transform 600ms var(--brb-ease);
}
.serp-mockup__results.is-revealed {
opacity: 1;
transform: translateY(0);
}
.serp-mockup__stats {
font-size: 12px;
color: #70757A;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.serp-result {
padding: 14px 16px;
margin-bottom: 10px;
border-radius: 8px;
position: relative;
transition: all 300ms var(--brb-ease);
}
.serp-result--featured {
background: rgba(217, 119, 6, 0.07);
border: 1.5px solid var(--brb-accent);
padding-right: 80px;
animation: serp-featured-glow 3s ease-in-out infinite;
}
@keyframes serp-featured-glow {
0%, 100% { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0); }
50% { box-shadow: 0 0 0 6px rgba(217, 119, 6, 0.08); }
}
.serp-result__badge {
position: absolute;
top: 12px;
right: 12px;
background: var(--brb-accent);
color: #FFFFFF;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 4px;
display: flex;
align-items: center;
gap: 4px;
}
.serp-result__badge-icon {
font-size: 12px;
}
.serp-result__breadcrumb {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: #202124;
margin-bottom: 6px;
}
.serp-result__favicon {
width: 16px;
height: 16px;
border-radius: 50%;
background: var(--brb-accent);
display: inline-block;
flex-shrink: 0;
}
.serp-result__favicon--grey { background: #9AA0A6; }
.serp-result__sep {
color: #9AA0A6;
margin: 0 2px;
}
.serp-result__title {
font-family: Arial, sans-serif;
font-size: 20px;
font-weight: 400;
color: #1A0DAB;
line-height: 1.3;
margin: 4px 0 6px 0;
text-decoration: underline;
text-decoration-color: rgba(26, 13, 171, 0.2);
}
.serp-result--competitor .serp-result__title {
color: #1A0DAB;
}
.serp-result__rating {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 4px;
font-size: 13px;
}
.serp-result__stars {
color: #F59E0B;
letter-spacing: 1px;
}
.serp-result__rating-count {
color: #70757A;
font-size: 13px;
}
.serp-result__desc {
font-family: Arial, sans-serif;
font-size: 13px;
line-height: 1.5;
color: #4D5156;
margin: 0;
}
.serp-result--competitor {
opacity: 0.65;
}
@media (max-width: 640px) {
.serp-mockup__search { padding: 24px 20px 16px; }
.serp-mockup__results { padding: 12px 20px 24px; }
.serp-mockup__google { font-size: 32px; }
.serp-result__title { font-size: 17px; }
.serp-result--featured { padding-right: 16px; }
.serp-result__badge { top: auto; bottom: 8px; right: 8px; }
}
/* ============================================================
SEO · Rank Tracking Dashboard
============================================================ */
.seo-rankings {
padding: clamp(60px, 8vw, 100px) 0;
background: var(--brb-surface);
}
.seo-rankings__head {
max-width: 680px;
margin: 0 auto clamp(36px, 4.5vw, 56px);
text-align: center;
}
.seo-rankings__head .eyebrow {
margin-bottom: 16px;
display: inline-block;
}
.seo-rankings__title {
font-family: var(--brb-font-display);
font-size: clamp(36px, 4.5vw, 56px);
line-height: 1.1;
letter-spacing: -0.03em;
font-weight: 400;
margin-bottom: 20px;
}
.seo-rankings__title em {
font-style: italic;
color: var(--brb-accent);
}
.seo-rankings__body {
font-size: 16px;
line-height: 1.7;
color: var(--brb-text-muted);
}
.rank-dash {
max-width: 960px;
margin: 0 auto;
background: var(--brb-anchor);
border-radius: 12px;
padding: 32px;
color: var(--brb-text-on-dark);
box-shadow:
0 30px 60px -15px rgba(0, 0, 0, 0.25),
0 15px 30px -10px rgba(0, 0, 0, 0.15);
opacity: 0;
transform: translateY(20px);
transition: opacity 1000ms var(--brb-ease-entrance),
transform 1000ms var(--brb-ease-entrance);
}
.rank-dash.is-visible {
opacity: 1;
transform: translateY(0);
}
.rank-dash__head {
display: grid;
grid-template-columns: 1fr auto;
gap: 32px;
padding-bottom: 24px;
border-bottom: 1px solid rgba(250, 247, 242, 0.08);
margin-bottom: 24px;
}
@media (max-width: 720px) {
.rank-dash__head { grid-template-columns: 1fr; }
}
.rank-dash__live {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
color: var(--brb-text-on-dark);
font-weight: 500;
margin-bottom: 4px;
}
.rank-dash__live-dot {
width: 8px;
height: 8px;
background: #7ACC8F;
border-radius: 50%;
animation: rank-dash-pulse 2s ease-in-out infinite;
}
@keyframes rank-dash-pulse {
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(122, 204, 143, 0.4); }
50% { opacity: 0.8; box-shadow: 0 0 0 6px rgba(122, 204, 143, 0); }
}
.rank-dash__range {
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--brb-text-on-dark-subtle);
}
.rank-dash__summary {
display: flex;
gap: 32px;
}
@media (max-width: 720px) {
.rank-dash__summary { gap: 16px; flex-wrap: wrap; }
}
.rank-dash__stat-label {
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--brb-text-on-dark-subtle);
margin-bottom: 4px;
font-weight: 500;
}
.rank-dash__stat-value {
font-family: var(--brb-font-display);
font-size: 22px;
font-weight: 400;
color: var(--brb-text-on-dark);
display: flex;
align-items: baseline;
gap: 8px;
}
.rank-dash__delta {
font-family: var(--brb-font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0;
}
.rank-dash__delta--up { color: #7ACC8F; }
.rank-dash__delta--down { color: #E87C7C; }
.rank-dash__table-head {
display: grid;
grid-template-columns: 1fr 80px 1fr 100px;
gap: 16px;
padding: 10px 12px;
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--brb-text-on-dark-subtle);
font-weight: 500;
border-bottom: 1px solid rgba(250, 247, 242, 0.06);
}
.rank-dash__row {
display: grid;
grid-template-columns: 1fr 80px 1fr 100px;
gap: 16px;
align-items: center;
padding: 14px 12px;
border-bottom: 1px solid rgba(250, 247, 242, 0.05);
transition: background 200ms var(--brb-ease);
}
.rank-dash__row:hover {
background: rgba(250, 247, 242, 0.02);
}
.rank-dash__row:last-child { border-bottom: none; }
.rank-dash__keyword {
font-size: 14px;
color: var(--brb-text-on-dark);
font-weight: 500;
}
.rank-dash__position {
font-family: var(--brb-font-display);
font-size: 20px;
font-weight: 400;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
font-variant-numeric: tabular-nums;
}
.rank-dash__position--1 {
background: rgba(217, 119, 6, 0.15);
color: var(--brb-accent);
box-shadow: inset 0 0 0 1px rgba(217, 119, 6, 0.4);
}
.rank-dash__position--2 {
background: rgba(122, 204, 143, 0.1);
color: #7ACC8F;
}
.rank-dash__position--3 {
background: rgba(122, 204, 143, 0.06);
color: #7ACC8F;
}
.rank-dash__position--4,
.rank-dash__position--5 {
background: rgba(250, 247, 242, 0.04);
color: var(--brb-text-on-dark-muted);
}
.rank-dash__spark {
width: 100%;
max-width: 180px;
height: 30px;
color: #7ACC8F;
}
.rank-dash__spark-path {
stroke-dasharray: 250;
stroke-dashoffset: 250;
animation: rank-spark-draw 2s var(--brb-ease-entrance) forwards;
}
.rank-dash.is-visible .rank-dash__row:nth-child(2) .rank-dash__spark-path { animation-delay: 200ms; }
.rank-dash.is-visible .rank-dash__row:nth-child(3) .rank-dash__spark-path { animation-delay: 300ms; }
.rank-dash.is-visible .rank-dash__row:nth-child(4) .rank-dash__spark-path { animation-delay: 400ms; }
.rank-dash.is-visible .rank-dash__row:nth-child(5) .rank-dash__spark-path { animation-delay: 500ms; }
.rank-dash.is-visible .rank-dash__row:nth-child(6) .rank-dash__spark-path { animation-delay: 600ms; }
.rank-dash.is-visible .rank-dash__row:nth-child(7) .rank-dash__spark-path { animation-delay: 700ms; }
@keyframes rank-spark-draw {
to { stroke-dashoffset: 0; }
}
.rank-dash__volume {
font-size: 13px;
color: var(--brb-text-on-dark-muted);
font-variant-numeric: tabular-nums;
text-align: right;
}
@media (max-width: 720px) {
.rank-dash { padding: 20px; }
.rank-dash__table-head { display: none; }
.rank-dash__row {
grid-template-columns: 1fr auto;
gap: 8px;
padding: 14px 8px;
}
.rank-dash__spark { display: none; }
.rank-dash__volume { font-size: 11px; }
}
/* ============================================================
SEO · Local Pack
============================================================ */
.seo-local {
padding: clamp(60px, 8vw, 100px) 0;
background: var(--brb-surface);
border-top: 1px solid var(--brb-border);
}
.seo-local__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(40px, 6vw, 80px);
align-items: center;
max-width: 1100px;
margin: 0 auto;
}
@media (max-width: 900px) {
.seo-local__grid { grid-template-columns: 1fr; }
}
.seo-local__content .eyebrow { margin-bottom: 16px; display: inline-block; }
.seo-local__title {
font-family: var(--brb-font-display);
font-size: clamp(32px, 4vw, 48px);
line-height: 1.1;
letter-spacing: -0.03em;
font-weight: 400;
margin-bottom: 24px;
}
.seo-local__title em {
font-style: italic;
color: var(--brb-accent);
}
.seo-local__body {
font-size: 16px;
line-height: 1.7;
color: var(--brb-text-muted);
margin-bottom: 16px;
}
.seo-local__visual {
opacity: 0;
transform: translateY(20px);
transition: opacity 1000ms var(--brb-ease-entrance),
transform 1000ms var(--brb-ease-entrance);
}
.seo-local__visual.is-visible {
opacity: 1;
transform: translateY(0);
}
.local-pack {
background: var(--brb-anchor);
border-radius: 12px;
overflow: hidden;
box-shadow:
0 30px 60px -15px rgba(0, 0, 0, 0.3),
0 15px 30px -10px rgba(0, 0, 0, 0.2);
}
.local-pack__map {
height: 160px;
background: #2A2A2A;
position: relative;
overflow: hidden;
}
.local-pack__map-svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.local-pack__pin {
position: absolute;
transform: translate(-50%, -100%);
animation: local-pin-drop 600ms var(--brb-ease-entrance) backwards;
}
.local-pack__pin--primary { animation-delay: 400ms; }
.local-pack__pin--secondary { animation-delay: 600ms; }
.local-pack__pin--tertiary { animation-delay: 800ms; }
@keyframes local-pin-drop {
from { opacity: 0; transform: translate(-50%, -150%); }
to { opacity: 1; transform: translate(-50%, -100%); }
}
.local-pack__pin-marker {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
font-family: var(--brb-font-display);
font-size: 13px;
font-weight: 700;
color: #FFFFFF;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
position: relative;
}
.local-pack__pin-marker::after {
content: '';
position: absolute;
bottom: -6px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 8px solid inherit;
}
.local-pack__pin--primary .local-pack__pin-marker {
background: var(--brb-accent);
box-shadow: 0 4px 16px rgba(217, 119, 6, 0.5);
animation: local-pin-pulse 2s ease-in-out infinite;
width: 32px;
height: 32px;
font-size: 15px;
}
@keyframes local-pin-pulse {
0%, 100% { box-shadow: 0 4px 16px rgba(217, 119, 6, 0.5); }
50% { box-shadow: 0 4px 16px rgba(217, 119, 6, 0.5), 0 0 0 8px rgba(217, 119, 6, 0.15); }
}
.local-pack--pin-secondary .local-pack__pin-marker,
.local-pack__pin--secondary .local-pack__pin-marker { background: #8A8A8A; }
.local-pack__pin--tertiary .local-pack__pin-marker { background: #8A8A8A; }
.local-pack__results {
padding: 16px;
color: var(--brb-text-on-dark);
}
.local-pack__header {
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--brb-text-on-dark-subtle);
padding-bottom: 12px;
border-bottom: 1px solid rgba(250, 247, 242, 0.08);
margin-bottom: 12px;
}
.local-pack__item {
display: flex;
gap: 14px;
align-items: flex-start;
padding: 14px 0;
border-bottom: 1px solid rgba(250, 247, 242, 0.05);
position: relative;
}
.local-pack__item:last-child { border-bottom: none; }
.local-pack__item--featured {
background: linear-gradient(90deg, rgba(217, 119, 6, 0.08), transparent);
padding: 16px 14px;
margin: 0 -14px;
border-radius: 8px;
border-bottom: none;
border: 1px solid rgba(217, 119, 6, 0.25);
margin-bottom: 10px;
}
.local-pack__marker {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--brb-accent);
color: #FFFFFF;
font-family: var(--brb-font-display);
font-size: 13px;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.local-pack__item:not(.local-pack__item--featured) .local-pack__marker {
background: #4A4A4A;
color: var(--brb-text-on-dark-muted);
}
.local-pack__body { flex: 1; min-width: 0; }
.local-pack__name {
font-family: var(--brb-font-display);
font-size: 15px;
font-weight: 400;
color: var(--brb-text-on-dark);
margin-bottom: 4px;
letter-spacing: -0.01em;
}
.local-pack__rating {
display: flex;
align-items: center;
gap: 6px;
margin-bottom: 4px;
font-size: 12px;
}
.local-pack__stars {
color: var(--brb-accent);
letter-spacing: 1px;
font-size: 11px;
}
.local-pack__rating-text {
color: var(--brb-text-on-dark-muted);
}
.local-pack__meta {
font-size: 11px;
color: var(--brb-text-on-dark-subtle);
letter-spacing: 0.02em;
}
.local-pack__ribbon {
position: absolute;
top: 10px;
right: 10px;
background: var(--brb-accent);
color: #FFFFFF;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: 3px;
}
/* ============================================================
SEO · Core Web Vitals
============================================================ */
.seo-vitals {
background: var(--brb-anchor);
color: var(--brb-text-on-dark);
padding: clamp(60px, 8vw, 100px) 0;
position: relative;
overflow: hidden;
}
.seo-vitals::before {
content: '';
position: absolute;
bottom: -30%;
left: -10%;
width: 500px;
height: 500px;
background: radial-gradient(circle, rgba(122, 204, 143, 0.06), transparent 60%);
pointer-events: none;
}
.seo-vitals__head {
max-width: 680px;
margin: 0 auto clamp(36px, 4.5vw, 56px);
text-align: center;
position: relative;
}
.seo-vitals__head .eyebrow { margin-bottom: 16px; display: inline-block; }
.seo-vitals__title {
font-family: var(--brb-font-display);
font-size: clamp(36px, 4.5vw, 56px);
line-height: 1.1;
letter-spacing: -0.03em;
font-weight: 400;
margin-bottom: 20px;
}
.seo-vitals__title em {
font-style: italic;
color: var(--brb-accent);
}
.seo-vitals__body {
font-size: 16px;
line-height: 1.7;
color: var(--brb-text-on-dark-muted);
}
.vitals-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(16px, 2vw, 32px);
max-width: 900px;
margin: 0 auto;
position: relative;
opacity: 0;
transform: translateY(20px);
transition: opacity 1000ms var(--brb-ease-entrance),
transform 1000ms var(--brb-ease-entrance);
}
.vitals-grid.is-visible {
opacity: 1;
transform: translateY(0);
}
@media (max-width: 720px) {
.vitals-grid { grid-template-columns: 1fr; max-width: 320px; }
}
.vital-card {
background: rgba(250, 247, 242, 0.03);
border: 1px solid rgba(250, 247, 242, 0.08);
border-radius: 12px;
padding: 32px 24px;
text-align: center;
transition: all 300ms var(--brb-ease);
}
.vital-card:hover {
border-color: rgba(122, 204, 143, 0.3);
background: rgba(250, 247, 242, 0.04);
}
.vital-card__meter {
position: relative;
width: 120px;
height: 120px;
margin: 0 auto 20px;
}
.vital-card__ring {
width: 100%;
height: 100%;
transform: rotate(-90deg);
}
.vital-card__ring-bg {
fill: none;
stroke: rgba(250, 247, 242, 0.06);
stroke-width: 8;
}
.vital-card__ring-fill {
fill: none;
stroke-width: 8;
stroke-linecap: round;
stroke-dasharray: 327;
stroke-dashoffset: 327;
transition: stroke-dashoffset 2s var(--brb-ease-entrance);
}
.vital-card__ring-fill--good { stroke: #7ACC8F; }
.vitals-grid.is-visible .vital-card:nth-child(1) .vital-card__ring-fill {
stroke-dashoffset: calc(327 - (327 * 0.92));
transition-delay: 300ms;
}
.vitals-grid.is-visible .vital-card:nth-child(2) .vital-card__ring-fill {
stroke-dashoffset: calc(327 - (327 * 0.95));
transition-delay: 500ms;
}
.vitals-grid.is-visible .vital-card:nth-child(3) .vital-card__ring-fill {
stroke-dashoffset: calc(327 - (327 * 0.98));
transition-delay: 700ms;
}
.vital-card__score {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
}
.vital-card__score-inner {
display: flex;
align-items: baseline;
gap: 3px;
}
.vital-card__value {
font-family: var(--brb-font-display);
font-size: 28px;
font-weight: 400;
color: var(--brb-text-on-dark);
letter-spacing: -0.02em;
line-height: 1;
}
.vital-card__unit {
font-size: 12px;
color: var(--brb-text-on-dark-muted);
font-family: var(--brb-font-body);
line-height: 1;
}
.vital-card__label {
font-family: var(--brb-font-display);
font-size: 22px;
font-weight: 400;
color: var(--brb-text-on-dark);
margin-bottom: 4px;
letter-spacing: -0.01em;
}
.vital-card__sublabel {
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--brb-text-on-dark-subtle);
margin-bottom: 16px;
font-weight: 500;
}
.vital-card__status {
font-family: var(--brb-font-body);
font-size: 12px;
padding: 6px 12px;
border-radius: 20px;
display: inline-block;
font-weight: 500;
}
.vital-card__status--good {
background: rgba(122, 204, 143, 0.12);
color: #7ACC8F;
border: 1px solid rgba(122, 204, 143, 0.25);
}
/* ============================================================
==============================================================
PAID ADS PAGE — SIGNATURE VISUALS
— Ad placement mockup (highlighted sponsored positions)
— Campaign performance dashboard (ROAS-focused)
— Ad creative A/B testing variants
==============================================================
============================================================ */
/* ============================================================
Paid Ads · Placement Mockup
============================================================ */
.ads-placement {
background: var(--brb-anchor);
color: var(--brb-text-on-dark);
padding: clamp(60px, 8vw, 100px) 0;
position: relative;
overflow: hidden;
}
.ads-placement::before {
content: '';
position: absolute;
top: -20%;
right: -10%;
width: 600px;
height: 600px;
background: radial-gradient(circle, rgba(217, 119, 6, 0.1), transparent 60%);
pointer-events: none;
}
.ads-placement__head {
max-width: 720px;
margin: 0 auto clamp(40px, 5vw, 64px);
text-align: center;
position: relative;
}
.ads-placement__head .eyebrow { margin-bottom: 16px; display: inline-block; }
.ads-placement__title {
font-family: var(--brb-font-display);
font-size: clamp(36px, 4.5vw, 56px);
line-height: 1.1;
letter-spacing: -0.03em;
font-weight: 400;
margin-bottom: 20px;
}
.ads-placement__title em {
font-style: italic;
color: var(--brb-accent);
}
.ads-placement__body {
font-size: 16px;
line-height: 1.7;
color: var(--brb-text-on-dark-muted);
max-width: 56ch;
margin: 0 auto;
}
.ads-serp {
max-width: 840px;
margin: 0 auto;
background: #FAF7F2;
border-radius: 12px;
overflow: hidden;
box-shadow:
0 40px 80px -20px rgba(0, 0, 0, 0.6),
0 20px 40px -10px rgba(0, 0, 0, 0.4);
opacity: 0;
transform: translateY(30px);
transition: opacity 1200ms var(--brb-ease-entrance),
transform 1200ms var(--brb-ease-entrance);
}
.ads-serp.is-visible {
opacity: 1;
transform: translateY(0);
}
/* Reuse chrome styling from SERP */
.ads-serp__chrome {
background: #E8E5E0;
padding: 10px 16px;
display: flex;
align-items: center;
gap: 16px;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.ads-serp__dots { display: flex; gap: 6px; }
.ads-serp__dots span { width: 10px; height: 10px; border-radius: 50%; }
.ads-serp__dots span:nth-child(1) { background: #FF5F56; }
.ads-serp__dots span:nth-child(2) { background: #FFBD2E; }
.ads-serp__dots span:nth-child(3) { background: #27C93F; }
.ads-serp__url-bar {
flex: 1;
background: #FFFFFF;
border-radius: 6px;
padding: 6px 12px;
font-size: 12px;
color: #5F5F5A;
display: flex;
align-items: center;
gap: 8px;
}
.ads-serp__search {
padding: 24px 40px 16px;
display: flex;
flex-direction: column;
gap: 20px;
}
.ads-serp__google {
font-family: 'Product Sans', system-ui, sans-serif;
font-size: 36px;
font-weight: 500;
letter-spacing: -0.02em;
text-align: center;
}
.ads-serp__search-input {
background: #FFFFFF;
border: 1px solid #DFE1E5;
border-radius: 24px;
padding: 10px 20px;
font-size: 14px;
color: #202124;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06);
font-family: Arial, sans-serif;
}
.ads-serp__stats {
padding: 0 40px;
font-size: 12px;
color: #70757A;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
margin-left: 40px;
margin-right: 40px;
}
.ads-serp__sponsored {
padding: 16px 40px;
background: rgba(217, 119, 6, 0.05);
position: relative;
border-top: 2px solid var(--brb-accent);
border-bottom: 2px solid var(--brb-accent);
animation: ads-sponsored-glow 3s ease-in-out infinite;
}
@keyframes ads-sponsored-glow {
0%, 100% { background: rgba(217, 119, 6, 0.05); }
50% { background: rgba(217, 119, 6, 0.1); }
}
.ads-serp__sponsored-label {
display: flex;
align-items: center;
gap: 10px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--brb-accent);
margin-bottom: 14px;
}
.ads-serp__pulse {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--brb-accent);
animation: ads-pulse 1.5s ease-in-out infinite;
}
@keyframes ads-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0.5); }
50% { box-shadow: 0 0 0 6px rgba(217, 119, 6, 0); }
}
.ads-result {
padding: 12px 14px;
margin-bottom: 8px;
border-radius: 6px;
position: relative;
background: #FFFFFF;
transition: all 300ms var(--brb-ease);
}
.ads-result--ad-1 {
border: 1.5px solid var(--brb-accent);
box-shadow: 0 2px 8px rgba(217, 119, 6, 0.1);
}
.ads-result--ad-2, .ads-result--ad-3, .ads-result--ad-4 {
border: 1px solid rgba(0, 0, 0, 0.06);
opacity: 0.75;
}
.ads-result__ad-badge {
display: inline-block;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #202124;
background: rgba(0, 0, 0, 0.05);
padding: 2px 6px;
border-radius: 3px;
margin-bottom: 6px;
}
.ads-result--ad-1 .ads-result__ad-badge {
background: var(--brb-accent);
color: #FFFFFF;
}
.ads-result__position-label {
position: absolute;
top: 12px;
right: 12px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--brb-accent);
background: rgba(217, 119, 6, 0.1);
padding: 3px 8px;
border-radius: 4px;
}
.ads-result--ad-2 .ads-result__position-label,
.ads-result--ad-3 .ads-result__position-label,
.ads-result--ad-4 .ads-result__position-label {
color: #70757A;
background: rgba(0, 0, 0, 0.05);
}
.ads-result__breadcrumb {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: #202124;
margin-bottom: 4px;
}
.ads-result__favicon {
width: 14px;
height: 14px;
border-radius: 50%;
background: var(--brb-accent);
display: inline-block;
flex-shrink: 0;
}
.ads-result__favicon--grey { background: #9AA0A6; }
.ads-result__title {
font-family: Arial, sans-serif;
font-size: 17px;
font-weight: 400;
color: #1A0DAB;
line-height: 1.3;
margin: 2px 0 4px 0;
}
.ads-result__desc {
font-family: Arial, sans-serif;
font-size: 12px;
line-height: 1.5;
color: #4D5156;
margin: 0;
}
.ads-serp__organic {
padding: 16px 40px 32px;
}
.ads-serp__organic-label {
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: #9AA0A6;
margin-bottom: 16px;
padding-bottom: 10px;
border-bottom: 1px dashed rgba(0, 0, 0, 0.1);
}
.ads-serp__organic-sample {
display: flex;
flex-direction: column;
gap: 10px;
opacity: 0.35;
}
.ads-serp__organic-line {
height: 8px;
background: linear-gradient(90deg, rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.02));
border-radius: 4px;
width: 100%;
}
.ads-serp__organic-line--short { width: 60%; }
@media (max-width: 640px) {
.ads-serp__search, .ads-serp__sponsored, .ads-serp__organic {
padding-left: 20px;
padding-right: 20px;
}
.ads-serp__stats { margin-left: 20px; margin-right: 20px; }
.ads-serp__google { font-size: 28px; }
.ads-result__title { font-size: 15px; }
.ads-result__position-label { top: 8px; right: 8px; font-size: 9px; }
}
/* ============================================================
Paid Ads · Campaign Performance Dashboard
============================================================ */
.ads-dash {
padding: clamp(60px, 8vw, 100px) 0;
background: var(--brb-surface);
}
.ads-dash__head {
max-width: 680px;
margin: 0 auto clamp(36px, 4.5vw, 56px);
text-align: center;
}
.ads-dash__head .eyebrow { margin-bottom: 16px; display: inline-block; }
.ads-dash__title {
font-family: var(--brb-font-display);
font-size: clamp(36px, 4.5vw, 56px);
line-height: 1.1;
letter-spacing: -0.03em;
font-weight: 400;
margin-bottom: 20px;
}
.ads-dash__title em {
font-style: italic;
color: var(--brb-accent);
}
.ads-dash__body {
font-size: 16px;
line-height: 1.7;
color: var(--brb-text-muted);
}
.ads-dashboard {
max-width: 1000px;
margin: 0 auto;
background: var(--brb-anchor);
border-radius: 12px;
padding: 32px;
color: var(--brb-text-on-dark);
box-shadow:
0 30px 60px -15px rgba(0, 0, 0, 0.25),
0 15px 30px -10px rgba(0, 0, 0, 0.15);
opacity: 0;
transform: translateY(20px);
transition: opacity 1000ms var(--brb-ease-entrance),
transform 1000ms var(--brb-ease-entrance);
}
.ads-dashboard.is-visible {
opacity: 1;
transform: translateY(0);
}
.ads-dashboard__head {
display: grid;
grid-template-columns: 1fr auto;
gap: 32px;
align-items: center;
padding-bottom: 24px;
border-bottom: 1px solid rgba(250, 247, 242, 0.08);
margin-bottom: 24px;
}
@media (max-width: 720px) {
.ads-dashboard { padding: 20px; }
.ads-dashboard__head { grid-template-columns: 1fr; gap: 16px; }
}
.ads-dashboard__live {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
color: var(--brb-text-on-dark);
font-weight: 500;
margin-bottom: 4px;
}
.ads-dashboard__live-dot {
width: 8px;
height: 8px;
background: #7ACC8F;
border-radius: 50%;
animation: rank-dash-pulse 2s ease-in-out infinite;
}
.ads-dashboard__range {
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--brb-text-on-dark-subtle);
}
.ads-dashboard__hero-metric {
text-align: right;
}
@media (max-width: 720px) { .ads-dashboard__hero-metric { text-align: left; } }
.ads-dashboard__hero-value {
font-family: var(--brb-font-display);
font-size: 42px;
font-weight: 400;
color: var(--brb-accent);
line-height: 1;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.ads-dashboard__hero-label {
font-size: 10px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--brb-text-on-dark-subtle);
margin-top: 6px;
font-weight: 500;
}
/* KPI grid */
.ads-dashboard__kpis {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 16px;
padding: 20px 0;
border-bottom: 1px solid rgba(250, 247, 242, 0.08);
margin-bottom: 24px;
}
@media (max-width: 900px) {
.ads-dashboard__kpis { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
.ads-dashboard__kpis { grid-template-columns: repeat(2, 1fr); }
}
.ads-kpi {
padding: 12px 14px;
background: rgba(250, 247, 242, 0.03);
border-radius: 8px;
border: 1px solid rgba(250, 247, 242, 0.05);
}
.ads-kpi__label {
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--brb-text-on-dark-subtle);
margin-bottom: 6px;
font-weight: 500;
}
.ads-kpi__value {
font-family: var(--brb-font-display);
font-size: 20px;
font-weight: 400;
color: var(--brb-text-on-dark);
line-height: 1.2;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.ads-kpi__delta {
font-size: 11px;
font-weight: 600;
margin-top: 4px;
}
.ads-kpi__delta--up { color: #7ACC8F; }
.ads-kpi__delta--down { color: #7ACC8F; } /* Low CPC going down is good */
/* Chart */
.ads-dashboard__chart-section {
padding: 20px 0;
border-bottom: 1px solid rgba(250, 247, 242, 0.08);
margin-bottom: 24px;
}
.ads-dashboard__chart-head {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16px;
flex-wrap: wrap;
gap: 12px;
}
.ads-dashboard__chart-title {
font-size: 13px;
font-weight: 500;
color: var(--brb-text-on-dark);
}
.ads-dashboard__chart-legend {
display: flex;
gap: 16px;
font-size: 11px;
color: var(--brb-text-on-dark-muted);
}
.ads-dashboard__legend-item {
display: flex;
align-items: center;
gap: 6px;
}
.ads-dashboard__legend-dot {
width: 8px;
height: 8px;
border-radius: 50%;
}
.ads-dashboard__legend-dot--revenue { background: var(--brb-accent); }
.ads-dashboard__legend-dot--spend { background: #8A8A8A; }
.ads-dashboard__chart {
width: 100%;
height: 180px;
display: block;
}
.ads-dashboard__chart-grid {
stroke: rgba(250, 247, 242, 0.04);
stroke-width: 1;
}
.ads-dashboard__chart-area {
fill: url(#adsGradient);
fill: rgba(217, 119, 6, 0.08);
opacity: 0;
animation: ads-chart-area-in 1400ms var(--brb-ease-entrance) 600ms forwards;
}
@keyframes ads-chart-area-in {
to { opacity: 1; }
}
.ads-dashboard__chart-line {
fill: none;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 2000;
stroke-dashoffset: 2000;
}
.ads-dashboard.is-visible .ads-dashboard__chart-line {
animation: ads-chart-line-draw 2s var(--brb-ease-entrance) forwards;
}
.ads-dashboard__chart-line--revenue {
stroke: var(--brb-accent);
animation-delay: 400ms;
}
.ads-dashboard__chart-line--spend {
stroke: #8A8A8A;
stroke-width: 1.5;
opacity: 0.7;
animation-delay: 600ms;
}
@keyframes ads-chart-line-draw {
to { stroke-dashoffset: 0; }
}
/* Campaigns table */
.ads-dashboard__campaigns-head {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 16px;
padding: 10px 12px;
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--brb-text-on-dark-subtle);
font-weight: 500;
border-bottom: 1px solid rgba(250, 247, 242, 0.06);
}
.ads-campaign-row {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr;
gap: 16px;
align-items: center;
padding: 14px 12px;
border-bottom: 1px solid rgba(250, 247, 242, 0.05);
font-size: 13px;
color: var(--brb-text-on-dark);
transition: background 200ms var(--brb-ease);
font-variant-numeric: tabular-nums;
}
.ads-campaign-row:hover {
background: rgba(250, 247, 242, 0.02);
}
.ads-campaign-row:last-child { border-bottom: none; }
.ads-campaign-row__name {
display: flex;
align-items: center;
gap: 10px;
}
.ads-campaign-row__type {
display: inline-block;
padding: 3px 8px;
border-radius: 4px;
font-size: 9px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
font-family: var(--brb-font-body);
}
.ads-campaign-row__type--search { background: rgba(217, 119, 6, 0.15); color: var(--brb-accent); }
.ads-campaign-row__type--pmax { background: rgba(139, 92, 246, 0.15); color: #A78BFA; }
.ads-campaign-row__type--remarketing { background: rgba(122, 204, 143, 0.15); color: #7ACC8F; }
.ads-campaign-row__type--display { background: rgba(250, 247, 242, 0.06); color: var(--brb-text-on-dark-muted); }
.ads-campaign-row__type--meta { background: rgba(56, 142, 244, 0.15); color: #6BA8F5; }
.ads-campaign-row__roas {
font-family: var(--brb-font-display);
font-size: 15px;
font-weight: 400;
text-align: left;
}
.ads-campaign-row__roas--strong {
color: var(--brb-accent);
font-weight: 400;
}
@media (max-width: 720px) {
.ads-dashboard__campaigns-head,
.ads-campaign-row {
grid-template-columns: 1.5fr 1fr 1fr;
}
.ads-dashboard__campaigns-head > div:nth-child(3),
.ads-campaign-row > div:nth-child(3) { display: none; }
.ads-campaign-row__name { font-size: 12px; }
}
/* ============================================================
Paid Ads · Creative Variants (A/B testing)
============================================================ */
.ads-variants {
padding: clamp(60px, 8vw, 100px) 0;
background: var(--brb-surface);
border-top: 1px solid var(--brb-border);
}
.ads-variants__head {
max-width: 680px;
margin: 0 auto clamp(36px, 4.5vw, 56px);
text-align: center;
}
.ads-variants__head .eyebrow { margin-bottom: 16px; display: inline-block; }
.ads-variants__title {
font-family: var(--brb-font-display);
font-size: clamp(36px, 4.5vw, 56px);
line-height: 1.1;
letter-spacing: -0.03em;
font-weight: 400;
margin-bottom: 20px;
}
.ads-variants__title em {
font-style: italic;
color: var(--brb-accent);
}
.ads-variants__body {
font-size: 16px;
line-height: 1.7;
color: var(--brb-text-muted);
}
.ads-variants__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(16px, 2vw, 28px);
max-width: 1100px;
margin: 0 auto;
opacity: 0;
transform: translateY(20px);
transition: opacity 1000ms var(--brb-ease-entrance),
transform 1000ms var(--brb-ease-entrance);
}
.ads-variants__grid.is-visible {
opacity: 1;
transform: translateY(0);
}
@media (max-width: 900px) {
.ads-variants__grid { grid-template-columns: 1fr; max-width: 480px; }
}
.ad-variant {
background: #FFFFFF;
border: 1px solid var(--brb-border);
border-radius: 12px;
padding: 24px;
transition: all 300ms var(--brb-ease);
display: flex;
flex-direction: column;
gap: 16px;
}
.ad-variant--winner {
border-color: var(--brb-accent);
box-shadow: 0 8px 24px -8px rgba(217, 119, 6, 0.2);
transform: translateY(-8px);
}
.ad-variant--loser {
opacity: 0.7;
}
.ad-variant__label {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 12px;
border-bottom: 1px solid var(--brb-border);
}
.ad-variant__badge {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 4px;
background: rgba(0, 0, 0, 0.06);
color: var(--brb-text-muted);
}
.ad-variant__badge--winner {
background: var(--brb-accent);
color: #FFFFFF;
}
.ad-variant__badge--loser {
background: rgba(0, 0, 0, 0.06);
color: var(--brb-text-muted);
}
.ad-variant__version {
font-family: var(--brb-font-display);
font-size: 13px;
color: var(--brb-text);
font-weight: 400;
}
/* Ad preview mimics a Google Ad */
.ad-variant__preview {
background: #F8F8F8;
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 8px;
padding: 14px 16px;
min-height: 150px;
display: flex;
flex-direction: column;
gap: 4px;
}
.ad-variant__sponsored {
display: inline-block;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #202124;
width: fit-content;
padding: 2px 6px;
background: rgba(0, 0, 0, 0.05);
border-radius: 3px;
margin-bottom: 4px;
}
.ad-variant__url {
font-family: Arial, sans-serif;
font-size: 12px;
color: #202124;
}
.ad-variant__headline {
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: 400;
color: #1A0DAB;
line-height: 1.3;
margin: 4px 0 6px 0;
}
.ad-variant__description {
font-family: Arial, sans-serif;
font-size: 12px;
line-height: 1.5;
color: #4D5156;
margin: 0;
}
.ad-variant__metrics {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 8px;
padding-top: 12px;
border-top: 1px solid var(--brb-border);
}
.ad-variant__metric {
text-align: center;
padding: 8px;
background: rgba(250, 247, 242, 0.5);
border-radius: 6px;
}
.ad-variant__metric--hero {
background: rgba(217, 119, 6, 0.06);
}
.ad-variant--winner .ad-variant__metric--hero {
background: rgba(217, 119, 6, 0.12);
}
.ad-variant__metric-label {
font-size: 9px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--brb-text-muted);
margin-bottom: 4px;
font-weight: 500;
}
.ad-variant__metric-value {
font-family: var(--brb-font-display);
font-size: 16px;
font-weight: 400;
color: var(--brb-text);
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
}
.ad-variant--winner .ad-variant__metric--hero .ad-variant__metric-value {
color: var(--brb-accent);
font-size: 18px;
}
/* ============================================================
==============================================================
SERVICE PAGE — SHARED SECTION CSS (SEO + Paid Ads)
Missing classes that existed in the templates but had no CSS
==============================================================
============================================================ */
/* ============================================================
Hero body + CTAs + meta (under the headline)
============================================================ */
.wd-hero__body {
font-size: clamp(17px, 1.5vw, 20px);
line-height: 1.65;
color: var(--brb-text-on-dark-muted);
max-width: 58ch;
margin: clamp(28px, 4vw, 40px) 0 clamp(32px, 4vw, 44px);
opacity: 0;
transform: translateY(12px);
transition: opacity 700ms var(--brb-ease), transform 700ms var(--brb-ease);
}
.wd-hero__body.is-visible {
opacity: 1;
transform: translateY(0);
}
.wd-hero__ctas {
display: flex;
gap: 12px;
flex-wrap: wrap;
margin-bottom: clamp(28px, 4vw, 40px);
opacity: 0;
transform: translateY(12px);
transition: opacity 700ms var(--brb-ease), transform 700ms var(--brb-ease);
}
.wd-hero__ctas.is-visible {
opacity: 1;
transform: translateY(0);
}
.wd-hero__meta {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
margin-top: clamp(24px, 3vw, 36px);
font-family: var(--brb-font-body);
font-size: 12px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--brb-text-on-dark-subtle);
font-weight: 500;
opacity: 0;
transform: translateY(12px);
transition: opacity 700ms var(--brb-ease), transform 700ms var(--brb-ease);
}
.wd-hero__meta.is-visible {
opacity: 1;
transform: translateY(0);
}
.wd-hero__meta-sep {
width: 3px;
height: 3px;
border-radius: 50%;
background: var(--brb-accent);
display: inline-block;
flex-shrink: 0;
}
/* Keep the three meta pills on a single line on phones — fluid shrink
instead of stacking (shared by every wd-hero location/service hero). */
@media (max-width: 480px) {
.wd-hero__meta {
flex-wrap: nowrap;
white-space: nowrap;
gap: 8px;
font-size: clamp(8px, 2.3vw, 11px);
letter-spacing: 0.05em;
}
}
/* ============================================================
Approach + form (merged section)
Two-column grid on ≥880px (approach left, form right).
Stacks below 880px with approach text on top.
The outer .wd-craft block keeps its existing background +
padding rules elsewhere in the file — this just adds the grid
and form-column styling on top.
============================================================ */
.wd-craft__grid {
display: grid;
grid-template-columns: 1fr;
gap: clamp(40px, 6vw, 80px);
align-items: start;
}
@media (min-width: 880px) {
.wd-craft__grid {
grid-template-columns: 1fr 1fr;
gap: clamp(48px, 6vw, 96px);
}
}
.wd-craft__form {
/* Form column — dark anchor surface for two-tone editorial +
interactive rhythm (cream section + cream editorial column +
dark form column). FF interactives inherit the canonical
dark-form treatment via additive :is() scope expansion below
(third container alongside .form-container + .contact-form__container). */
background: var(--brb-anchor);
border-radius: 8px;
padding: clamp(28px, 3.5vw, 44px);
}
.wd-craft__form-title {
font-family: var(--brb-font-display);
font-weight: 400;
font-size: clamp(1.5rem, 2.4vw, 1.875rem);
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--brb-text-on-dark);
margin: 0 0 12px;
}
.wd-craft__form-title em {
font-style: italic;
color: var(--brb-accent);
}
.wd-craft__form-sub {
font-family: var(--brb-font-body);
font-size: 0.95rem;
line-height: 1.55;
color: var(--brb-text-on-dark-subtle);
margin: 0 0 24px;
}
/* ============================================================
Philosophy section
============================================================ */
.wd-philosophy {
background: var(--brb-surface);
padding: var(--brb-section-pad) 0;
border-bottom: 1px solid var(--brb-border);
}
.wd-philosophy__grid {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: clamp(40px, 6vw, 96px);
max-width: 1100px;
margin: 0 auto;
align-items: start;
}
@media (max-width: 900px) {
.wd-philosophy__grid { grid-template-columns: 1fr; gap: 32px; }
}
.wd-philosophy__head .eyebrow {
margin-bottom: 16px;
display: inline-block;
}
.wd-philosophy__title {
font-family: var(--brb-font-display);
font-size: clamp(32px, 4vw, 48px);
line-height: 1.1;
letter-spacing: -0.03em;
font-weight: 400;
color: var(--brb-text);
}
.wd-philosophy__title em {
font-style: italic;
color: var(--brb-accent);
}
.wd-philosophy__body {
font-size: 17px;
line-height: 1.7;
color: var(--brb-text-muted);
}
.wd-philosophy__body p {
margin: 0 0 20px 0;
}
.wd-philosophy__body p:last-child { margin-bottom: 0; }
.wd-philosophy__body em {
font-style: italic;
color: var(--brb-text);
font-weight: 400;
}
/* ============================================================
Platforms / Services breakdown section
============================================================ */
.wd-platforms {
padding: var(--brb-section-pad) 0;
background: var(--brb-surface);
}
.wd-platforms__head {
max-width: 680px;
margin: 0 auto clamp(40px, 5vw, 64px);
text-align: center;
}
.wd-platforms__head .eyebrow {
margin-bottom: 16px;
display: inline-block;
}
.wd-platforms__title {
font-family: var(--brb-font-display);
font-size: clamp(36px, 4.5vw, 56px);
line-height: 1.1;
letter-spacing: -0.03em;
font-weight: 400;
color: var(--brb-text);
}
.wd-platforms__title em {
font-style: italic;
color: var(--brb-accent);
}
.wd-platforms__intro {
font-size: clamp(16px, 1.4vw, 19px);
line-height: 1.55;
color: var(--brb-text-muted);
margin-top: clamp(16px, 1.6vw, 24px);
}
.wd-platforms__grid {
/* 2-up at desktop (≥640px) — the previous 4-up layout
(1.5fr 1fr 1fr 1fr) rendered cards 2 and 3 at ~239px on a
1280px viewport, which squeezed the location-service template's
content-heavy bodies (16–28-word paragraphs + 4-item bullet
lists) into 13+ wrapped lines and broke bullet text mid-word.
2-up gives ~562px per card at 1280px — comfortable reading
width for the same content. /paid-advertising/ and /seo/
(which also use this grid via .platform-card) benefit too;
their hero variant loses layout-driven width emphasis but
keeps its styling differentiation. */
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: clamp(20px, 2.5vw, 32px);
row-gap: clamp(48px, 5vw, 80px);
max-width: 1200px;
margin: 0 auto;
/* align-items: start (added v1.34.7) prevents the grid from
stretching cells in the same row to match the tallest card.
Each card sits at its natural content height — Card 02 with
a 52-word body no longer inflates Card 01's row, and the lead
card no longer leaves empty cream space below its row partner.
Defensive against the OPPOSITE failure mode of the v1.34.7
grid-row removal too: if a future card ends up much heavier
than its partner, the partner doesn't get padded. */
align-items: start;
}
@media (max-width: 640px) {
.wd-platforms__grid { grid-template-columns: 1fr; }
.platform-card--hero { grid-column: auto; }
}
.platform-card {
background: #FFFFFF;
border: 1px solid var(--brb-border);
border-radius: 12px;
padding: 32px 28px;
display: flex;
flex-direction: column;
gap: 14px;
transition: transform 300ms var(--brb-ease),
box-shadow 300ms var(--brb-ease),
border-color 300ms var(--brb-ease);
}
.platform-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px -15px rgba(26, 26, 26, 0.12);
border-color: rgba(217, 119, 6, 0.3);
}
.platform-card--hero {
background: var(--brb-anchor);
color: var(--brb-text-on-dark);
border-color: var(--brb-anchor);
position: relative;
overflow: hidden;
}
.platform-card--hero::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: radial-gradient(ellipse at top right, rgba(217, 119, 6, 0.08), transparent 60%);
pointer-events: none;
}
.platform-card__rank {
font-family: var(--brb-font-display);
font-size: 14px;
font-weight: 400;
color: var(--brb-accent);
letter-spacing: 0.05em;
font-variant-numeric: tabular-nums;
}
.platform-card__badge {
display: inline-block;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 4px;
background: var(--brb-accent);
color: #FFFFFF;
width: fit-content;
}
.platform-card__name {
font-family: var(--brb-font-display);
font-size: 24px;
font-weight: 400;
color: inherit;
letter-spacing: -0.02em;
line-height: 1.2;
margin: 0;
position: relative;
}
.platform-card--hero .platform-card__name {
font-size: 28px;
color: var(--brb-text-on-dark);
}
.platform-card__desc {
font-size: 14px;
line-height: 1.65;
color: var(--brb-text-muted);
margin: 0;
position: relative;
}
.platform-card--hero .platform-card__desc {
color: var(--brb-text-on-dark-muted);
font-size: 15px;
}
.platform-card__features {
list-style: none;
padding: 0;
margin: 8px 0 0;
display: flex;
flex-direction: column;
gap: 8px;
position: relative;
}
.platform-card__features li {
font-size: 13px;
line-height: 1.5;
color: var(--brb-text-on-dark-muted);
padding-left: 20px;
position: relative;
}
.platform-card__features li::before {
content: '';
position: absolute;
left: 0;
top: 8px;
width: 10px;
height: 1px;
background: var(--brb-accent);
}
/* ============================================================
Industries section
============================================================ */
.wd-industries:has(.industry-item) {
padding: clamp(60px, 8vw, 100px) 0;
background: var(--brb-anchor);
color: var(--brb-text-on-dark);
}
.wd-industries:has(.industry-item) .wd-industries__head {
max-width: 720px;
margin: 0 auto clamp(40px, 5vw, 64px);
text-align: center;
}
.wd-industries:has(.industry-item) .wd-industries__head .eyebrow {
margin-bottom: 16px;
display: inline-block;
}
.wd-industries:has(.industry-item) .wd-industries__title {
font-family: var(--brb-font-display);
font-size: clamp(36px, 4.5vw, 56px);
line-height: 1.1;
letter-spacing: -0.03em;
font-weight: 400;
}
.wd-industries:has(.industry-item) .wd-industries__title em {
font-style: italic;
color: var(--brb-accent);
}
.wd-industries__grid:has(.industry-item) {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: clamp(12px, 1.5vw, 20px);
max-width: 1200px;
margin: 0 auto;
}
@media (max-width: 1100px) {
.wd-industries__grid:has(.industry-item) { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
.wd-industries__grid:has(.industry-item) { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
.wd-industries__grid:has(.industry-item) { grid-template-columns: 1fr; }
}
.industry-item {
background: rgba(250, 247, 242, 0.03);
border: 1px solid rgba(250, 247, 242, 0.08);
border-radius: 10px;
padding: 24px 20px;
display: flex;
flex-direction: column;
gap: 10px;
transition: background 300ms var(--brb-ease),
border-color 300ms var(--brb-ease),
transform 300ms var(--brb-ease);
}
.industry-item:hover {
background: rgba(250, 247, 242, 0.05);
border-color: rgba(217, 119, 6, 0.3);
transform: translateY(-2px);
}
.industry-item__num {
font-family: var(--brb-font-display);
font-size: 12px;
font-weight: 400;
color: var(--brb-accent);
letter-spacing: 0.05em;
font-variant-numeric: tabular-nums;
}
.industry-item__name {
font-family: var(--brb-font-display);
font-size: 17px;
font-weight: 400;
color: var(--brb-text-on-dark);
letter-spacing: -0.01em;
line-height: 1.3;
}
.industry-item__desc {
font-size: 13px;
line-height: 1.5;
color: var(--brb-text-on-dark-muted);
}
/* ============================================================
Principles section
============================================================ */
.wd-principles {
padding: var(--brb-section-pad) 0;
background: var(--brb-surface);
border-top: 1px solid var(--brb-border);
}
.wd-principles__head {
max-width: 680px;
margin: 0 auto clamp(40px, 5vw, 64px);
text-align: center;
}
.wd-principles__head .eyebrow {
margin-bottom: 16px;
display: inline-block;
}
.wd-principles__title {
font-family: var(--brb-font-display);
font-size: clamp(36px, 4.5vw, 56px);
line-height: 1.1;
letter-spacing: -0.03em;
font-weight: 400;
color: var(--brb-text);
}
.wd-principles__title em {
font-style: italic;
color: var(--brb-accent);
}
.wd-principles__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(16px, 2vw, 28px);
max-width: 1200px;
margin: 0 auto;
}
@media (max-width: 900px) {
.wd-principles__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
.wd-principles__grid { grid-template-columns: 1fr; }
}
.principle {
background: #FFFFFF;
border: 1px solid var(--brb-border);
border-radius: 12px;
padding: 32px 28px;
display: flex;
flex-direction: column;
gap: 14px;
transition: transform 300ms var(--brb-ease),
box-shadow 300ms var(--brb-ease),
border-color 300ms var(--brb-ease);
}
.principle:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px -15px rgba(26, 26, 26, 0.1);
border-color: rgba(217, 119, 6, 0.3);
}
.principle__icon {
font-size: 24px;
color: var(--brb-accent);
line-height: 1;
font-family: var(--brb-font-display);
}
.principle__title {
font-family: var(--brb-font-display);
font-size: 20px;
font-weight: 400;
color: var(--brb-text);
line-height: 1.2;
letter-spacing: -0.01em;
margin: 0;
}
.principle__body {
font-size: 14px;
line-height: 1.65;
color: var(--brb-text-muted);
margin: 0;
}
/* ============================================================
Proof strip
============================================================ */
.wd-proof.wd-proof--dark,
.wd-proof:has(.wd-proof__stat) {
background: var(--brb-anchor);
color: var(--brb-text-on-dark);
padding: clamp(48px, 6vw, 80px) 0;
border-top: 1px solid rgba(250, 247, 242, 0.06);
}
.wd-proof.wd-proof--dark .wd-proof__inner,
.wd-proof:has(.wd-proof__stat) .wd-proof__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: clamp(16px, 3vw, 48px);
flex-wrap: wrap;
max-width: 1100px;
margin: 0 auto;
opacity: 0;
transform: translateY(20px);
transition: opacity 1000ms var(--brb-ease-entrance), transform 1000ms var(--brb-ease-entrance);
}
.wd-proof.wd-proof--dark .wd-proof__inner.is-visible,
.wd-proof:has(.wd-proof__stat) .wd-proof__inner.is-visible {
opacity: 1;
transform: translateY(0);
}
.wd-proof--dark .wd-proof__stat,
.wd-proof:has(.wd-proof__stat) .wd-proof__stat {
flex: 1;
min-width: 140px;
text-align: center;
}
.wd-proof--dark .wd-proof__value,
.wd-proof:has(.wd-proof__stat) .wd-proof__value {
font-family: var(--brb-font-display);
font-size: clamp(40px, 5vw, 64px);
font-weight: 400;
line-height: 1;
letter-spacing: -0.03em;
color: var(--brb-text-on-dark);
margin-bottom: 10px;
font-variant-numeric: tabular-nums;
}
.wd-proof--dark .wd-proof__label,
.wd-proof:has(.wd-proof__stat) .wd-proof__label {
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--brb-text-on-dark-subtle);
font-weight: 500;
}
.wd-proof--dark .wd-proof__divider,
.wd-proof:has(.wd-proof__stat) .wd-proof__divider {
width: 1px;
height: 56px;
background: rgba(250, 247, 242, 0.1);
}
@media (max-width: 720px) {
.wd-proof__divider { display: none; }
.wd-proof__stat { min-width: 45%; }
}
/* ============================================================
Final CTA
============================================================ */
.wd-final.wd-final--dark,
.wd-final:has(.wd-final__ctas) {
padding: clamp(60px, 8vw, 100px) 0;
background: var(--brb-anchor);
color: var(--brb-text-on-dark);
text-align: center;
}
.wd-final.wd-final--dark .wd-final__inner .eyebrow,
.wd-final:has(.wd-final__ctas) .wd-final__inner .eyebrow {
margin-bottom: 16px;
display: inline-block;
}
.wd-final.wd-final--dark .wd-final__title,
.wd-final:has(.wd-final__ctas) .wd-final__title {
font-family: var(--brb-font-display);
font-size: clamp(40px, 5.5vw, 72px);
line-height: 1.05;
letter-spacing: -0.03em;
font-weight: 400;
color: var(--brb-text-on-dark);
margin-bottom: 28px;
max-width: 20ch;
margin-left: auto;
margin-right: auto;
}
.wd-final.wd-final--dark .wd-final__title em,
.wd-final:has(.wd-final__ctas) .wd-final__title em {
font-style: italic;
color: var(--brb-accent);
}
.wd-final.wd-final--dark .wd-final__body,
.wd-final:has(.wd-final__ctas) .wd-final__body {
font-size: 17px;
line-height: 1.65;
color: var(--brb-text-on-dark-muted);
margin: 0 auto 36px;
max-width: 56ch;
}
.wd-final__ctas {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
margin-bottom: 28px;
}
.wd-final__contact {
font-size: 14px;
color: var(--brb-text-on-dark-muted);
letter-spacing: 0.02em;
}
.wd-final__contact a {
color: var(--brb-text-on-dark);
border-bottom: 1px solid var(--brb-accent);
padding-bottom: 1px;
transition: color 200ms var(--brb-ease);
}
.wd-final__contact a:hover {
color: var(--brb-accent);
}
/* ============================================================
Service hero — two-column with visual on the right
Scoped to only apply when the hero uses the new split layout
(i.e. when wd-hero__content is present). The Web Design page
uses the original full-width hero and is unaffected.
============================================================ */
.wd-hero__inner:has(.wd-hero__content) {
display: grid;
grid-template-columns: 1.3fr 1fr;
gap: clamp(40px, 6vw, 96px);
align-items: center;
max-width: 1280px;
margin-inline: auto;
}
@media (max-width: 960px) {
.wd-hero__inner:has(.wd-hero__content) {
grid-template-columns: 1fr;
gap: 56px;
}
}
.wd-hero__content {
max-width: 640px;
}
.wd-hero__visual {
position: relative;
width: 100%;
opacity: 0;
transform: translateY(30px) scale(0.96);
animation: wd-hero-visual-in 1200ms var(--brb-ease-entrance) 700ms forwards;
}
@keyframes wd-hero-visual-in {
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@media (max-width: 960px) {
.wd-hero__visual {
max-width: 440px;
margin: 0 auto;
}
}
/* ==========================================================
SEO hero visual — mini ranking cards
========================================================== */
.seo-hero-viz {
position: relative;
padding: 28px;
background: rgba(250, 247, 242, 0.03);
border: 1px solid rgba(250, 247, 242, 0.08);
border-radius: 14px;
box-shadow:
0 30px 60px -15px rgba(0, 0, 0, 0.4),
0 15px 30px -10px rgba(0, 0, 0, 0.25);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.seo-hero-viz::before {
content: '';
position: absolute;
inset: 0;
border-radius: 14px;
background: radial-gradient(ellipse at top right, rgba(217, 119, 6, 0.1), transparent 70%);
pointer-events: none;
}
.seo-hero-viz__query {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: rgba(255, 255, 255, 0.05);
border-radius: 24px;
margin-bottom: 18px;
position: relative;
}
.seo-hero-viz__query-icon {
width: 14px;
height: 14px;
border: 1.5px solid var(--brb-text-on-dark-muted);
border-radius: 50%;
position: relative;
flex-shrink: 0;
}
.seo-hero-viz__query-icon::after {
content: '';
position: absolute;
right: -5px;
bottom: -5px;
width: 8px;
height: 2px;
background: var(--brb-text-on-dark-muted);
transform: rotate(45deg);
}
.seo-hero-viz__query-text {
font-family: Arial, sans-serif;
font-size: 13px;
color: var(--brb-text-on-dark-muted);
}
.seo-hero-viz__results {
display: flex;
flex-direction: column;
gap: 10px;
}
.seo-hero-result {
padding: 12px 14px;
background: rgba(250, 247, 242, 0.04);
border-radius: 8px;
border: 1px solid transparent;
position: relative;
animation: seo-hero-result-in 600ms var(--brb-ease-entrance) backwards;
}
.seo-hero-result:nth-child(1) { animation-delay: 1000ms; }
.seo-hero-result:nth-child(2) { animation-delay: 1200ms; }
.seo-hero-result:nth-child(3) { animation-delay: 1400ms; }
@keyframes seo-hero-result-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.seo-hero-result--featured {
background: rgba(217, 119, 6, 0.12);
border-color: rgba(217, 119, 6, 0.4);
animation: seo-hero-result-in 600ms var(--brb-ease-entrance) 1000ms backwards,
seo-hero-glow 3s ease-in-out 1800ms infinite;
}
@keyframes seo-hero-glow {
0%, 100% { box-shadow: 0 0 0 0 rgba(217, 119, 6, 0); }
50% { box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.12); }
}
.seo-hero-result__rank {
position: absolute;
top: 10px;
right: 12px;
font-family: var(--brb-font-display);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--brb-accent);
display: flex;
align-items: center;
gap: 4px;
}
.seo-hero-result__rank--muted {
color: var(--brb-text-on-dark-subtle);
}
.seo-hero-result__url {
font-size: 11px;
color: var(--brb-text-on-dark-muted);
margin-bottom: 3px;
}
.seo-hero-result--featured .seo-hero-result__url {
color: var(--brb-accent);
font-weight: 500;
}
.seo-hero-result__title {
font-family: Arial, sans-serif;
font-size: 13px;
color: #B4C8FF;
font-weight: 400;
line-height: 1.35;
margin: 0;
}
.seo-hero-result--featured .seo-hero-result__title {
color: #D8E3FF;
}
.seo-hero-viz__badge {
position: absolute;
top: -12px;
right: 20px;
background: var(--brb-accent);
color: #FFFFFF;
font-family: var(--brb-font-body);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 6px 12px;
border-radius: 4px;
box-shadow: 0 4px 12px rgba(217, 119, 6, 0.35);
animation: seo-hero-badge-in 700ms var(--brb-ease-entrance) 1600ms backwards;
}
@keyframes seo-hero-badge-in {
from { opacity: 0; transform: translateY(-8px) scale(0.9); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
/* ==========================================================
Paid Ads hero visual — ROAS growth chart
========================================================== */
.ads-hero-viz {
position: relative;
padding: 28px;
background: rgba(250, 247, 242, 0.03);
border: 1px solid rgba(250, 247, 242, 0.08);
border-radius: 14px;
box-shadow:
0 30px 60px -15px rgba(0, 0, 0, 0.4),
0 15px 30px -10px rgba(0, 0, 0, 0.25);
}
.ads-hero-viz::before {
content: '';
position: absolute;
inset: 0;
border-radius: 14px;
background: radial-gradient(ellipse at bottom right, rgba(217, 119, 6, 0.12), transparent 70%);
pointer-events: none;
}
.ads-hero-viz__head {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 18px;
}
.ads-hero-viz__label {
font-family: var(--brb-font-body);
font-size: 10px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--brb-text-on-dark-subtle);
font-weight: 500;
display: flex;
align-items: center;
gap: 8px;
}
.ads-hero-viz__label-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #7ACC8F;
animation: ads-hero-dot-pulse 2s ease-in-out infinite;
}
@keyframes ads-hero-dot-pulse {
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(122, 204, 143, 0.4); }
50% { opacity: 0.7; box-shadow: 0 0 0 5px rgba(122, 204, 143, 0); }
}
.ads-hero-viz__roas {
text-align: right;
}
.ads-hero-viz__roas-value {
font-family: var(--brb-font-display);
font-size: 32px;
font-weight: 400;
line-height: 1;
letter-spacing: -0.03em;
color: var(--brb-accent);
font-variant-numeric: tabular-nums;
animation: ads-hero-roas-in 800ms var(--brb-ease-entrance) 1600ms backwards;
}
@keyframes ads-hero-roas-in {
from { opacity: 0; transform: scale(0.85); }
to { opacity: 1; transform: scale(1); }
}
.ads-hero-viz__roas-label {
font-size: 9px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--brb-text-on-dark-subtle);
margin-top: 4px;
font-weight: 500;
}
.ads-hero-viz__chart {
position: relative;
height: 120px;
margin: 8px 0 16px;
}
.ads-hero-viz__chart-svg {
width: 100%;
height: 100%;
overflow: visible;
}
.ads-hero-viz__chart-grid {
stroke: rgba(250, 247, 242, 0.06);
stroke-width: 1;
stroke-dasharray: 2 4;
}
.ads-hero-viz__chart-area {
fill: rgba(217, 119, 6, 0.15);
opacity: 0;
animation: ads-hero-area-in 1200ms var(--brb-ease-entrance) 1200ms forwards;
}
@keyframes ads-hero-area-in {
to { opacity: 1; }
}
.ads-hero-viz__chart-line-revenue {
fill: none;
stroke: var(--brb-accent);
stroke-width: 2.5;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 400;
stroke-dashoffset: 400;
animation: ads-hero-line-draw 1800ms var(--brb-ease-entrance) 1000ms forwards;
filter: drop-shadow(0 2px 4px rgba(217, 119, 6, 0.3));
}
.ads-hero-viz__chart-line-spend {
fill: none;
stroke: rgba(138, 138, 138, 0.7);
stroke-width: 1.5;
stroke-linecap: round;
stroke-dasharray: 400;
stroke-dashoffset: 400;
animation: ads-hero-line-draw 1800ms var(--brb-ease-entrance) 1200ms forwards;
}
@keyframes ads-hero-line-draw {
to { stroke-dashoffset: 0; }
}
.ads-hero-viz__chart-endpoint {
fill: var(--brb-accent);
r: 5;
opacity: 0;
animation: ads-hero-endpoint-in 600ms var(--brb-ease-entrance) 2600ms forwards;
}
@keyframes ads-hero-endpoint-in {
to { opacity: 1; }
}
.ads-hero-viz__stats {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
padding-top: 14px;
border-top: 1px solid rgba(250, 247, 242, 0.06);
}
.ads-hero-viz__stat {
display: flex;
flex-direction: column;
gap: 2px;
}
.ads-hero-viz__stat-label {
font-size: 9px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--brb-text-on-dark-subtle);
font-weight: 500;
}
.ads-hero-viz__stat-value {
font-family: var(--brb-font-display);
font-size: 18px;
font-weight: 400;
color: var(--brb-text-on-dark);
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
}
.ads-hero-viz__stat-value--up {
color: #7ACC8F;
}
.ads-hero-viz__legend {
display: flex;
gap: 14px;
font-size: 10px;
color: var(--brb-text-on-dark-muted);
margin-top: 8px;
}
.ads-hero-viz__legend-item {
display: flex;
align-items: center;
gap: 6px;
letter-spacing: 0.05em;
}
.ads-hero-viz__legend-dot {
width: 8px;
height: 2px;
border-radius: 1px;
}
.ads-hero-viz__legend-dot--revenue { background: var(--brb-accent); }
.ads-hero-viz__legend-dot--spend { background: rgba(138, 138, 138, 0.7); }
/* ============================================================
Service hero — headline sizing adjustment for two-column
The Web Design page uses the hero full-width; SEO and Paid Ads
use the two-column split layout, which needs a slightly smaller
headline to fit the narrower content column.
============================================================ */
.wd-hero__content .wd-hero__headline {
font-size: clamp(40px, 5.5vw, 64px);
margin-bottom: clamp(24px, 3vw, 36px);
}
.wd-hero__content .wd-hero__body {
font-size: clamp(16px, 1.3vw, 18px);
margin: 0 0 clamp(24px, 3vw, 36px);
}
.wd-hero__content .wd-hero__ctas {
margin-bottom: clamp(24px, 3vw, 36px);
}
/* ============================================================
Audit page · Hero — two-column with Trailhead PDF cover visual
============================================================ */
.audit-hero__inner {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: clamp(40px, 6vw, 88px);
align-items: center;
max-width: 1240px;
margin-inline: auto;
}
@media (max-width: 960px) {
.audit-hero__inner {
grid-template-columns: 1fr;
gap: 56px;
}
}
.audit-hero__content {
max-width: 620px;
}
.audit-hero__visual {
position: relative;
width: 100%;
opacity: 0;
transform: translateY(30px) scale(0.96);
animation: audit-hero-visual-in 1100ms var(--brb-ease-entrance) 500ms forwards;
}
@keyframes audit-hero-visual-in {
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
/* Trailhead PDF cover mock — pixel-targets the canonical Worker
M2 PDF cover design. Score 73 is hardcoded in the markup; this
only handles layout and typography.
Aspect ratio is deliberately preserved on mobile per the
strategy-audit copy lock: the 8.5:11 print proportion signals
"this is the actual PDF you'll get back" and shrinking below
that defeats the dual-path hero's visual hook. On a 375px
viewport that produces a ~440px-tall card — acceptable
tradeoff for the visual integrity. */
.trailhead-cover {
position: relative;
background: var(--brb-surface);
border-radius: 6px;
padding: 36px 36px 0;
box-shadow:
0 24px 60px rgba(26, 26, 26, 0.18),
0 6px 18px rgba(26, 26, 26, 0.08);
overflow: hidden;
aspect-ratio: 8.5 / 11;
max-width: 420px;
margin-left: auto;
font-family: var(--brb-font-body);
color: var(--brb-text);
}
@media (max-width: 960px) {
.trailhead-cover { margin: 0 auto; }
}
.trailhead-cover__brand {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--brb-text-muted);
margin-bottom: 0.4in;
}
.trailhead-cover__brand-tail {
color: var(--brb-accent);
font-style: italic;
font-weight: 400;
text-transform: none;
letter-spacing: 0;
}
.trailhead-cover__divider {
width: 60px;
height: 2px;
background: var(--brb-accent);
margin-bottom: 0.4in;
}
.trailhead-cover__lede {
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--brb-text-subtle);
margin-bottom: 8pt;
}
.trailhead-cover__domain {
font-family: var(--brb-font-display);
font-size: 36px;
font-weight: 400;
line-height: 1.1;
color: var(--brb-text);
margin-bottom: 12pt;
}
.trailhead-cover__date {
font-size: 11px;
color: var(--brb-text-muted);
}
.trailhead-cover__score-block {
position: absolute;
left: 36px;
right: 36px;
bottom: 1.2in;
display: flex;
align-items: baseline;
gap: 18px;
}
.trailhead-cover__score {
font-family: var(--brb-font-display);
font-size: 130px;
font-weight: 400;
line-height: 0.9;
letter-spacing: -0.04em;
color: var(--brb-accent);
}
.trailhead-cover__score-meta {
font-size: 11px;
color: var(--brb-text-muted);
letter-spacing: 0.02em;
}
.trailhead-cover__strip {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 0.4in;
background: var(--brb-accent);
}
/* ============================================================
Web Design page · "See the tool" CTA card
Replaces the inline Trailhead form previously hosted on
page-web-design.php Section 02. Single anchor link to
/free-strategy-audit/#trailhead — no widget, no Turnstile.
============================================================ */
.wd-audit-cta {
background: var(--brb-surface);
padding: 64px 0 var(--brb-section-pad);
position: relative;
border-top: 1px solid var(--brb-border);
}
.wd-audit-cta__inner {
max-width: 760px;
margin: 0 auto;
text-align: center;
}
.wd-audit-cta__head {
margin-bottom: 36px;
}
.wd-audit-cta__head .eyebrow {
display: inline-block;
margin-bottom: 20px;
}
.wd-audit-cta__headline {
font-family: var(--brb-font-display);
font-size: clamp(28px, 3.6vw, 46px);
font-weight: 400;
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--brb-text);
margin: 0 0 20px;
}
.wd-audit-cta__headline em {
font-style: italic;
color: var(--brb-accent);
}
.wd-audit-cta__sub {
font-family: var(--brb-font-body);
font-size: clamp(16px, 1.4vw, 18px);
line-height: 1.55;
color: var(--brb-text-muted);
max-width: 620px;
margin: 0 auto;
}
.wd-audit-cta__action {
margin: 32px 0 0;
text-align: center;
}
/* ============================================================
Scroll-to-top button — sitewide
============================================================ */
.scroll-top {
position: fixed;
bottom: 28px;
right: 28px;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--brb-anchor);
color: var(--brb-text-on-dark);
border: 1px solid var(--brb-accent);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(10px);
transition: opacity 300ms var(--brb-ease),
visibility 300ms var(--brb-ease),
transform 300ms var(--brb-ease),
background 200ms var(--brb-ease);
z-index: 90;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
font-family: var(--brb-font-body);
padding: 0;
-webkit-tap-highlight-color: transparent;
}
.scroll-top.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.scroll-top:hover {
background: var(--brb-accent);
color: var(--brb-anchor);
transform: translateY(-2px);
}
.scroll-top svg {
width: 19px;
height: 19px;
transition: transform 200ms var(--brb-ease);
}
.scroll-top:hover svg {
transform: translateY(-1px);
}
/* Growth-chart "scroll to top" — the rising trend line redraws on hover
(a small nod to the marketing the site sells). The arrowhead is the
up-affordance; the line is the chart. */
.scroll-top__line {
stroke-dasharray: 24;
stroke-dashoffset: 0;
}
.scroll-top:hover .scroll-top__line {
animation: brb-scroll-top-draw 650ms var(--brb-ease);
}
@keyframes brb-scroll-top-draw {
from { stroke-dashoffset: 24; }
to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
.scroll-top:hover .scroll-top__line { animation: none; }
}
@media (max-width: 600px) {
.scroll-top {
bottom: 20px;
right: 20px;
width: 40px;
height: 40px;
}
}
/* ============================================================
Homepage hero — split layout with composite visual on right
Proportions match .wd-hero--has-visual on service pages so the
text/visual balance feels consistent across the site.
============================================================ */
.hero__inner--split {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: clamp(40px, 6vw, 80px);
align-items: center;
max-width: 1280px;
margin-inline: auto;
}
@media (max-width: 1000px) {
.hero__inner--split {
grid-template-columns: 1fr;
gap: 56px;
}
}
.hero__content {
max-width: 620px;
position: relative;
z-index: 2;
}
/* When the homepage hero has the split layout, use a smaller
headline size than the full-width variant — so the text doesn't
overpower the visual on the right. The cap is lower than the
service page cap (48px vs 64px) because the homepage headline
uses complete sentences per line, not short phrases. */
.hero__inner--split .hero__headline {
font-size: clamp(32px, 4vw, 48px);
max-width: 32ch;
text-wrap: pretty;
}
.hero__inner--split .hero__subhead {
max-width: 46ch;
}
.hero__visual {
position: relative;
width: 100%;
height: 440px;
opacity: 0;
animation: hero-viz-in 1200ms var(--brb-ease-entrance) 700ms forwards;
}
@media (max-width: 1000px) {
.hero__visual { height: 560px; max-width: 520px; margin: 0 auto; }
}
@keyframes hero-viz-in {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
/* ============================================================
HERO VIZ v2 — Two-card composition (site mockup + live dashboard)
Homepage hero visual: website mockup behind, analytics dashboard in front.
Legacy 3-card styles are preserved below as .hero-viz-legacy-* for reuse
on service pages (Web Design / SEO / Paid Ads).
============================================================ */
.hero-viz-card {
position: absolute;
background: linear-gradient(165deg, #1F1F1F 0%, #151515 100%);
border: 1px solid rgba(250, 247, 242, 0.08);
border-radius: 10px;
box-shadow:
0 20px 48px rgba(0, 0, 0, 0.32),
0 0 0 1px rgba(217, 119, 6, 0.04) inset;
color: var(--brb-surface);
overflow: hidden;
transition: transform 500ms var(--brb-ease),
box-shadow 500ms var(--brb-ease);
}
.hero-viz-card--site { animation: hero-viz-float-site 7s ease-in-out infinite; }
.hero-viz-card--dashboard { animation: hero-viz-float-dash 8s ease-in-out -3s infinite; }
@keyframes hero-viz-float-site {
0%, 100% { transform: translate(0, 0) rotate(var(--r, -1.5deg)); }
50% { transform: translate(0, -6px) rotate(var(--r, -1.5deg)); }
}
@keyframes hero-viz-float-dash {
0%, 100% { transform: translate(0, 0) rotate(var(--r, 2deg)); }
50% { transform: translate(0, -4px) rotate(var(--r, 2deg)); }
}
.hero__visual:hover .hero-viz-card {
transition: transform 200ms var(--brb-ease),
box-shadow 500ms var(--brb-ease);
}
/* ----- Card 1 — Website mockup (tilted left, back) ----- */
.hero-viz-card--site {
--r: -1.5deg;
transform: rotate(-1.5deg);
top: 10px;
left: 0;
width: 62%;
z-index: 1;
}
.hero__visual:hover .hero-viz-card--site {
animation-play-state: paused;
transform: rotate(-0.5deg) translateY(-4px)
translate3d(calc(var(--mx, 0) * -8px), calc(var(--my, 0) * -8px), 0);
box-shadow:
0 28px 60px rgba(0, 0, 0, 0.38),
0 0 0 1px rgba(217, 119, 6, 0.08) inset;
}
.site-bar {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: #0F0F0F;
border-bottom: 1px solid rgba(250, 247, 242, 0.06);
}
.site-bar__dots { display: flex; gap: 5px; }
.site-bar__dots span {
width: 9px; height: 9px; border-radius: 50%;
background: rgba(250, 247, 242, 0.15);
}
.site-bar__dots span:first-child { background: rgba(217, 80, 80, 0.45); }
.site-bar__dots span:nth-child(2) { background: rgba(217, 170, 80, 0.45); }
.site-bar__dots span:nth-child(3) { background: rgba(80, 217, 130, 0.45); }
.site-bar__url {
flex: 1;
background: rgba(250, 247, 242, 0.05);
border-radius: 4px;
padding: 4px 10px;
font-size: 11px;
color: rgba(250, 247, 242, 0.55);
font-family: var(--brb-font-body);
display: flex;
align-items: center;
gap: 6px;
min-height: 22px;
}
.site-bar__url::before {
content: '';
width: 9px; height: 9px;
border: 1px solid currentColor;
border-radius: 50%;
opacity: 0.6;
flex-shrink: 0;
}
.site-bar__url-text {
overflow: hidden;
white-space: nowrap;
}
.site-bar__cursor {
display: inline-block;
width: 1px;
background: var(--brb-accent);
height: 12px;
vertical-align: middle;
animation: site-cursor-blink 1s step-end infinite;
margin-left: 1px;
}
@keyframes site-cursor-blink { 50% { opacity: 0; } }
.site-bar__url-text.is-done + .site-bar__cursor { display: none; }
.site-body {
padding: 22px 22px 18px;
background: linear-gradient(180deg, #1A1A1A 0%, #151515 100%);
}
.site-nav {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 22px;
opacity: 0;
animation: site-el-in 500ms var(--brb-ease-entrance) 900ms forwards;
}
.site-nav__logo {
width: 48px; height: 8px;
background: var(--brb-surface);
border-radius: 2px;
opacity: 0.85;
}
.site-nav__links { display: flex; gap: 10px; }
.site-nav__links span {
width: 28px; height: 5px;
background: rgba(250, 247, 242, 0.25);
border-radius: 2px;
}
.site-hero-section {
padding-bottom: 16px;
border-bottom: 1px solid rgba(250, 247, 242, 0.08);
margin-bottom: 16px;
}
.site-hero-section__headline {
font-family: 'Fraunces', serif;
font-size: 14px;
font-weight: 400;
color: var(--brb-surface);
line-height: 1.25;
margin-bottom: 8px;
letter-spacing: -0.01em;
opacity: 0;
animation: site-el-in 500ms var(--brb-ease-entrance) 1100ms forwards;
}
.site-hero-section__headline em {
color: var(--brb-accent);
font-style: italic;
}
.site-hero-section__sub {
height: 4px;
background: rgba(250, 247, 242, 0.2);
border-radius: 2px;
margin-bottom: 4px;
width: 70%;
opacity: 0;
animation: site-el-in 500ms var(--brb-ease-entrance) 1250ms forwards;
}
.site-hero-section__sub.second {
animation-delay: 1330ms;
width: 50%;
margin-bottom: 12px;
}
.site-hero-section__cta {
display: inline-block;
background: var(--brb-accent);
color: var(--brb-surface);
font-size: 9px;
padding: 5px 10px;
border-radius: 3px;
letter-spacing: 0.04em;
font-weight: 500;
opacity: 0;
transform: translateY(4px);
animation: site-el-in 500ms var(--brb-ease-entrance) 1450ms forwards;
transition: background 250ms var(--brb-ease),
transform 250ms var(--brb-ease),
box-shadow 250ms var(--brb-ease);
}
.hero-viz-card--site:hover .site-hero-section__cta {
background: #E8842A;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(217, 119, 6, 0.4);
}
.site-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 8px;
}
.site-grid__cell {
aspect-ratio: 1.2;
background: rgba(250, 247, 242, 0.04);
border: 1px solid rgba(250, 247, 242, 0.06);
border-radius: 3px;
padding: 6px;
display: flex;
flex-direction: column;
justify-content: flex-end;
opacity: 0;
animation: site-el-in 500ms var(--brb-ease-entrance) forwards;
}
.site-grid__cell:nth-child(1) { animation-delay: 1600ms; }
.site-grid__cell:nth-child(2) { animation-delay: 1680ms; }
.site-grid__cell:nth-child(3) { animation-delay: 1760ms; }
.site-grid__cell-line {
height: 3px;
background: rgba(250, 247, 242, 0.25);
border-radius: 1px;
margin-bottom: 3px;
}
.site-grid__cell-line--short { width: 60%; }
@keyframes site-el-in {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
/* ----- Card 2 — Analytics dashboard (tilted right, front, overlaps) ----- */
.hero-viz-card--dashboard {
--r: 2deg;
transform: rotate(2deg);
top: 180px;
right: 0;
width: 58%;
padding: 18px 20px;
z-index: 2;
}
.hero__visual:hover .hero-viz-card--dashboard {
animation-play-state: paused;
transform: rotate(1deg) translateY(-6px)
translate3d(calc(var(--mx, 0) * 8px), calc(var(--my, 0) * 8px), 0);
box-shadow:
0 28px 60px rgba(0, 0, 0, 0.4),
0 0 0 1px rgba(217, 119, 6, 0.08) inset;
}
.dash-head {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 14px;
opacity: 0;
animation: site-el-in 500ms var(--brb-ease-entrance) 1000ms forwards;
}
.dash-head__eyebrow {
font-size: 9px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(250, 247, 242, 0.5);
margin-bottom: 4px;
}
.dash-head__title {
font-family: 'Fraunces', serif;
font-size: 15px;
font-weight: 400;
color: var(--brb-surface);
letter-spacing: -0.005em;
}
.dash-head__title em {
font-style: italic;
color: var(--brb-accent);
}
.dash-head__live {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 9px;
color: rgba(138, 211, 192, 0.85);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.dash-head__live::before {
content: '';
width: 6px; height: 6px;
background: var(--brb-mint);
border-radius: 50%;
box-shadow: 0 0 6px var(--brb-mint);
animation: dash-live-pulse 2s ease-in-out infinite;
}
@keyframes dash-live-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
.dash-kpis {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 6px;
margin-bottom: 14px;
}
.dash-kpi {
padding: 8px 9px 9px;
background: rgba(250, 247, 242, 0.03);
border: 1px solid rgba(250, 247, 242, 0.06);
border-radius: 5px;
transition: background 250ms var(--brb-ease),
border-color 250ms var(--brb-ease),
transform 250ms var(--brb-ease);
opacity: 0;
animation: site-el-in 500ms var(--brb-ease-entrance) forwards;
}
.dash-kpi:nth-child(1) { animation-delay: 1150ms; }
.dash-kpi:nth-child(2) { animation-delay: 1230ms; }
.dash-kpi:nth-child(3) { animation-delay: 1310ms; }
.dash-kpi:hover {
background: rgba(217, 119, 6, 0.08);
border-color: rgba(217, 119, 6, 0.25);
transform: translateY(-1px);
}
.dash-kpi__label {
font-size: 8px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(250, 247, 242, 0.45);
margin-bottom: 3px;
}
.dash-kpi__value {
font-family: 'Fraunces', serif;
font-size: 14px;
font-weight: 500;
color: var(--brb-surface);
letter-spacing: -0.01em;
line-height: 1;
}
.dash-kpi__delta {
display: inline-flex;
align-items: center;
gap: 2px;
font-size: 8px;
color: var(--brb-mint);
margin-top: 3px;
font-weight: 500;
}
.dash-kpi__delta::before { content: '↑'; font-size: 9px; }
.dash-chart {
position: relative;
height: 110px;
margin-bottom: 8px;
opacity: 0;
animation: site-el-in 500ms var(--brb-ease-entrance) 1400ms forwards;
cursor: crosshair;
}
.dash-chart svg {
width: 100%;
height: 100%;
overflow: visible;
display: block;
}
.dash-chart__grid {
stroke: rgba(250, 247, 242, 0.06);
stroke-width: 0.5;
stroke-dasharray: 2 3;
}
.dash-chart__area {
fill: url(#dashAreaGrad);
opacity: 0;
animation: dash-area-in 900ms var(--brb-ease-entrance) 1700ms forwards;
}
@keyframes dash-area-in { to { opacity: 1; } }
.dash-chart__line {
fill: none;
stroke: var(--brb-accent);
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 400;
stroke-dashoffset: 400;
animation: dash-line-draw 1600ms var(--brb-ease-entrance) 1500ms forwards;
filter: drop-shadow(0 0 3px rgba(217, 119, 6, 0.3));
}
@keyframes dash-line-draw { to { stroke-dashoffset: 0; } }
.dash-chart__dot {
fill: var(--brb-accent);
opacity: 0;
animation: dash-dot-in 300ms var(--brb-ease-entrance) forwards;
}
.dash-chart__dot:nth-child(1) { animation-delay: 1700ms; }
.dash-chart__dot:nth-child(2) { animation-delay: 1800ms; }
.dash-chart__dot:nth-child(3) { animation-delay: 1900ms; }
.dash-chart__dot:nth-child(4) { animation-delay: 2000ms; }
.dash-chart__dot:nth-child(5) { animation-delay: 2100ms; }
.dash-chart__dot:nth-child(6) { animation-delay: 2200ms; }
.dash-chart__dot:nth-child(7) { animation-delay: 2300ms; }
.dash-chart__dot--last {
r: 4;
fill: var(--brb-accent);
filter: drop-shadow(0 0 6px var(--brb-accent));
animation: dash-dot-in 300ms var(--brb-ease-entrance) 2300ms forwards,
dash-dot-pulse 2.4s ease-in-out 2.6s infinite;
}
@keyframes dash-dot-in { to { opacity: 1; } }
@keyframes dash-dot-pulse {
0%, 100% { transform: scale(1); filter: drop-shadow(0 0 6px var(--brb-accent)); }
50% { transform: scale(1.15); filter: drop-shadow(0 0 10px var(--brb-accent)); }
}
.dash-chart__cursor {
stroke: rgba(217, 119, 6, 0.4);
stroke-width: 1;
stroke-dasharray: 2 3;
opacity: 0;
pointer-events: none;
transition: opacity 200ms var(--brb-ease);
}
.dash-chart:hover .dash-chart__cursor { opacity: 1; }
.dash-chart__tooltip {
position: absolute;
top: -8px;
background: rgba(250, 247, 242, 0.96);
color: var(--brb-anchor);
padding: 4px 8px;
border-radius: 3px;
font-size: 10px;
font-weight: 500;
letter-spacing: 0.01em;
pointer-events: none;
opacity: 0;
transform: translateX(-50%);
transition: opacity 200ms var(--brb-ease);
white-space: nowrap;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
z-index: 3;
}
.dash-chart__tooltip::after {
content: '';
position: absolute;
bottom: -3px;
left: 50%;
transform: translateX(-50%) rotate(45deg);
width: 6px; height: 6px;
background: rgba(250, 247, 242, 0.96);
}
.dash-chart:hover .dash-chart__tooltip { opacity: 1; }
.dash-chart__xlabels {
display: flex;
justify-content: space-between;
font-size: 8px;
letter-spacing: 0.05em;
color: rgba(250, 247, 242, 0.4);
padding: 0 2px;
opacity: 0;
animation: site-el-in 500ms var(--brb-ease-entrance) 2500ms forwards;
}
.dash-foot {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 10px;
margin-top: 10px;
border-top: 1px solid rgba(250, 247, 242, 0.06);
font-size: 9px;
color: rgba(250, 247, 242, 0.45);
letter-spacing: 0.04em;
opacity: 0;
animation: site-el-in 500ms var(--brb-ease-entrance) 2600ms forwards;
}
.dash-foot__source {
font-family: 'Fraunces', serif;
font-style: italic;
}
/* Mobile: cards stack vertically with enough container height for both
to render without overflowing, plus a bit of bottom breathing room
before the next section. */
@media (max-width: 1000px) {
.hero-viz-card--site { width: 75%; top: 0; left: 0; }
.hero-viz-card--dashboard { width: 75%; top: 260px; right: 0; }
}
@media (max-width: 520px) {
.hero__visual { height: 540px; }
.hero-viz-card--site { width: 82%; }
.hero-viz-card--dashboard { width: 82%; top: 240px; }
}
@media (prefers-reduced-motion: reduce) {
.hero-viz-card,
.site-nav, .site-hero-section__headline,
.site-hero-section__sub, .site-hero-section__cta, .site-grid__cell,
.dash-head, .dash-kpi, .dash-chart, .dash-chart__area,
.dash-chart__line, .dash-chart__dot, .dash-chart__dot--last,
.dash-chart__xlabels, .dash-foot {
animation: none !important;
opacity: 1 !important;
transform: none !important;
stroke-dashoffset: 0 !important;
}
}
/* ============================================================
LEGACY HERO VIZ — preserved for reuse on service pages.
(These classes originally powered the 3-card homepage hero;
they now live on the Web Design / SEO / Paid Ads pages.)
============================================================ */
.hero-viz-legacy-card {
position: absolute;
background: linear-gradient(165deg, #1F1F1F 0%, #151515 100%);
border: 1px solid rgba(250, 247, 242, 0.08);
border-radius: 8px;
box-shadow:
0 16px 40px rgba(0, 0, 0, 0.4),
0 0 0 1px rgba(217, 119, 6, 0.03) inset;
transition: transform 600ms var(--brb-ease);
color: var(--brb-surface);
}
.hero-viz-legacy-card--float {
animation: hero-viz-legacy-float 7s ease-in-out infinite;
}
@keyframes hero-viz-legacy-float {
0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
50% { transform: translateY(-6px) rotate(var(--r, 0deg)); }
}
/* --- Legacy site mockup (used on Web Design page) --- */
.hero-viz-legacy-site {
padding: 0;
overflow: hidden;
}
.hero-viz-legacy-site__bar {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: #0F0F0F;
border-bottom: 1px solid rgba(250, 247, 242, 0.06);
}
.hero-viz-legacy-site__dots { display: flex; gap: 4px; }
.hero-viz-legacy-site__dots span {
width: 8px; height: 8px; border-radius: 50%;
background: rgba(250, 247, 242, 0.15);
}
.hero-viz-legacy-site__url {
flex: 1;
background: rgba(250, 247, 242, 0.05);
border-radius: 3px;
padding: 3px 8px;
font-size: 11px;
color: rgba(250, 247, 242, 0.55);
font-family: var(--brb-font-body);
}
.hero-viz-legacy-site__body {
padding: 22px 22px 24px;
background: linear-gradient(180deg, #1A1A1A 0%, #151515 100%);
}
.hero-viz-legacy-site__logo {
width: 60px; height: 10px;
background: var(--brb-surface);
border-radius: 2px;
margin-bottom: 18px;
opacity: 0.9;
}
.hero-viz-legacy-site__line {
height: 6px;
background: rgba(250, 247, 242, 0.15);
border-radius: 2px;
margin-bottom: 8px;
}
.hero-viz-legacy-site__line--long { width: 90%; }
.hero-viz-legacy-site__line--med { width: 60%; }
.hero-viz-legacy-site__btn {
width: 80px; height: 20px;
background: var(--brb-accent);
border-radius: 3px;
margin-top: 12px;
}
/* --- Legacy metric tile (used on Paid Ads page) --- */
.hero-viz-legacy-metric {
padding: 22px 24px;
color: var(--brb-surface);
}
.hero-viz-legacy-metric__label {
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: rgba(250, 247, 242, 0.55);
margin-bottom: 8px;
}
.hero-viz-legacy-metric__value {
font-family: 'Fraunces', serif;
font-size: 44px;
font-weight: 500;
color: var(--brb-accent);
letter-spacing: -0.02em;
line-height: 1;
margin-bottom: 12px;
}
.hero-viz-legacy-metric__spark {
width: 100%;
height: 30px;
color: var(--brb-accent);
}
.hero-viz-legacy-metric__spark svg {
width: 100%;
height: 100%;
}
.hero-viz-legacy-metric__spark-path {
opacity: 0.85;
}
/* --- Legacy SERP snippet (used on SEO page) --- */
.hero-viz-legacy-serp {
padding: 16px 18px;
color: var(--brb-surface);
}
.hero-viz-legacy-serp__tag {
display: inline-block;
font-size: 9px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--brb-mint);
padding: 2px 8px;
border: 1px solid rgba(138, 211, 192, 0.35);
border-radius: 3px;
margin-bottom: 10px;
}
.hero-viz-legacy-serp__site {
font-size: 11px;
color: rgba(250, 247, 242, 0.55);
margin-bottom: 4px;
}
.hero-viz-legacy-serp__title {
height: 10px;
width: 75%;
background: rgba(250, 247, 242, 0.2);
border-radius: 2px;
margin-bottom: 8px;
}
.hero-viz-legacy-serp__meta {
display: flex;
align-items: center;
gap: 8px;
font-size: 10px;
color: var(--brb-text-on-dark-muted);
}
.hero-viz-legacy-serp__stars {
color: var(--brb-accent);
letter-spacing: 1px;
}
/* ============================================================
Web Design hero — composite visual on right
============================================================ */
.wd-hero--has-visual .wd-hero__inner {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: clamp(40px, 6vw, 80px);
align-items: center;
max-width: 1280px;
margin-inline: auto;
}
@media (max-width: 1000px) {
.wd-hero--has-visual .wd-hero__inner {
grid-template-columns: 1fr;
gap: 56px;
}
}
/* Grid items default to `min-width: auto`, so this column refuses to
shrink below its widest unbreakable child — the hero meta strip.
Latent since the component shipped; /website-maintenance/ never hit
it only because its meta labels are short. /ai-automation/'s longer
labels blew the column to 437px inside a 375px viewport and clipped
the hero body copy. min-width: 0 lets the column shrink and the
strip wrap (it already carries flex-wrap). Measured at 375px:
437.5px -> 327px, no horizontal overflow. Desktop is unaffected —
the content fits its track there, so nothing changes. */
.wd-hero--has-visual .wd-hero__content { min-width: 0; }
.wd-hero--has-visual .wd-hero__eyebrow,
.wd-hero--has-visual .wd-hero__headline,
.wd-hero--has-visual .wd-hero__sub,
.wd-hero--has-visual .wd-hero__actions {
grid-column: 1;
}
/* Slightly smaller headline when paired with a visual so it sits
comfortably in the left column without blowing out on line 4 */
.wd-hero--has-visual .wd-hero__headline {
font-size: clamp(36px, 5vw, 64px);
max-width: 14ch;
}
.wd-hero--has-visual .wd-hero__sub {
max-width: 46ch;
}
.wd-hero__visual--design {
grid-column: 2;
grid-row: 1 / span 4;
position: relative;
width: 100%;
height: 400px;
opacity: 0;
animation: hero-viz-in 1200ms var(--brb-ease-entrance) 700ms forwards;
}
@media (max-width: 1000px) {
.wd-hero__visual--design {
grid-column: 1;
grid-row: auto;
height: 340px;
max-width: 480px;
margin: 0 auto;
}
}
/* Desktop browser frame — primary */
.wd-hero-mock {
position: relative;
width: 100%;
background: linear-gradient(165deg, #1F1F1F 0%, #151515 100%);
border: 1px solid rgba(250, 247, 242, 0.08);
border-radius: 10px;
box-shadow:
0 24px 56px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(217, 119, 6, 0.04) inset;
overflow: hidden;
}
.wd-hero-mock__bar {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: rgba(250, 247, 242, 0.02);
border-bottom: 1px solid rgba(250, 247, 242, 0.06);
}
.wd-hero-mock__dots {
display: flex;
gap: 5px;
}
.wd-hero-mock__dots span {
width: 8px;
height: 8px;
border-radius: 50%;
background: rgba(250, 247, 242, 0.15);
}
.wd-hero-mock__url {
font-family: var(--brb-font-body);
font-size: 10px;
color: var(--brb-text-on-dark-subtle);
letter-spacing: 0.02em;
}
/* Auto-rotating showcase of recent builds inside the browser frame
(replaces the old CSS-skeleton canvas — real sites read stronger than
a wireframe). Pure-CSS crossfade; the URL bar swaps in sync. Honors
prefers-reduced-motion below. */
.wd-hero-mock__shot {
position: relative;
width: 100%;
aspect-ratio: 16 / 10;
overflow: hidden;
background: #151515;
}
.wd-hero-mock__slide {
position: absolute;
inset: 0;
opacity: 0;
animation: wdHeroSlideshow 18s infinite;
}
.wd-hero-mock__shot .wd-hero-mock__slide:nth-child(2) { animation-delay: 6s; }
.wd-hero-mock__shot .wd-hero-mock__slide:nth-child(3) { animation-delay: 12s; }
.wd-hero-mock__slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
}
/* URL bar — one label per slide, stacked and crossfaded in sync. The
base font/color is inherited from the .wd-hero-mock__url rule above. */
.wd-hero-mock__urls {
position: relative;
flex: 1 1 auto;
min-width: 0;
height: 13px;
}
.wd-hero-mock__urls .wd-hero-mock__url {
position: absolute;
inset: 0;
display: flex;
align-items: center;
opacity: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
animation: wdHeroSlideshow 18s infinite;
}
.wd-hero-mock__urls .wd-hero-mock__url:nth-child(2) { animation-delay: 6s; }
.wd-hero-mock__urls .wd-hero-mock__url:nth-child(3) { animation-delay: 12s; }
@keyframes wdHeroSlideshow {
0%, 28% { opacity: 1; }
33.333% { opacity: 0; }
94.667% { opacity: 0; }
100% { opacity: 1; }
}
/* Slide indicator dots — bottom-center over the shot, active dot amber,
synced to the same staggered timeline as the slides. */
.wd-hero-mock__nav {
position: absolute;
left: 50%;
bottom: 10px;
transform: translateX(-50%);
display: flex;
gap: 7px;
padding: 5px 8px;
border-radius: 999px;
background: rgba(10, 10, 10, 0.4);
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
z-index: 2;
}
.wd-hero-mock__navdot {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(250, 247, 242, 0.45);
animation: wdHeroDot 18s infinite;
}
.wd-hero-mock__nav .wd-hero-mock__navdot:nth-child(2) { animation-delay: 6s; }
.wd-hero-mock__nav .wd-hero-mock__navdot:nth-child(3) { animation-delay: 12s; }
@keyframes wdHeroDot {
0%, 28% { background: var(--brb-accent); }
33.333% { background: rgba(250, 247, 242, 0.45); }
94.667% { background: rgba(250, 247, 242, 0.45); }
100% { background: var(--brb-accent); }
}
@media (prefers-reduced-motion: reduce) {
.wd-hero-mock__slide,
.wd-hero-mock__urls .wd-hero-mock__url,
.wd-hero-mock__navdot { animation: none; }
.wd-hero-mock__slide,
.wd-hero-mock__urls .wd-hero-mock__url { opacity: 0; }
.wd-hero-mock__slide:first-child,
.wd-hero-mock__urls .wd-hero-mock__url:first-child { opacity: 1; }
.wd-hero-mock__navdot:first-child { background: var(--brb-accent); }
}
/* Mobile mockup — overlapping right-bottom */
.wd-hero-phone {
position: absolute;
right: 0;
bottom: 0;
width: 32%;
aspect-ratio: 9 / 19;
background: linear-gradient(165deg, #1F1F1F 0%, #151515 100%);
border: 1px solid rgba(250, 247, 242, 0.1);
border-radius: 20px;
padding: 12px 8px;
box-shadow: 0 24px 56px rgba(0, 0, 0, 0.55);
animation: hero-viz-float 8s ease-in-out -2s infinite;
--r: 3deg;
transform: rotate(3deg);
}
.wd-hero-phone__notch {
width: 40%;
height: 4px;
background: rgba(250, 247, 242, 0.15);
border-radius: 2px;
margin: 0 auto 14px;
}
.wd-hero-phone__header {
height: 12px;
background: linear-gradient(90deg, var(--brb-accent) 0%, rgba(217,119,6,0.3) 100%);
border-radius: 2px;
margin: 0 6px 10px;
}
.wd-hero-phone__body {
padding: 0 6px;
display: flex;
flex-direction: column;
gap: 6px;
}
.wd-hero-phone__line {
height: 4px;
border-radius: 2px;
background: rgba(250, 247, 242, 0.1);
}
.wd-hero-phone__line--short { width: 50%; }
.wd-hero-phone__line--med { width: 75%; }
.wd-hero-phone__card {
height: 44px;
background: rgba(250, 247, 242, 0.04);
border: 1px solid rgba(250, 247, 242, 0.06);
border-radius: 4px;
margin: 6px 0;
}
.wd-hero-phone__btn {
height: 14px;
background: var(--brb-accent);
border-radius: 3px;
margin-top: 6px;
}
/* ============================================================
Footer logo — clickable
============================================================ */
.footer-brand__logo-link {
display: inline-block;
text-decoration: none;
color: inherit;
margin-bottom: 12px;
transition: opacity 200ms var(--brb-ease);
}
.footer-brand__logo-link:hover {
opacity: 0.7;
}
.footer-brand__logo-link:hover .dot {
color: var(--brb-accent);
}
/* ============================================================
============================================================
INDUSTRIES PAGE
Single-page editorial overview of the verticals BRB serves.
Alternating-direction industry blocks with content + vignette.
============================================================
============================================================ */
/* ============================================================
Industries · Hero
============================================================ */
.ind-hero {
background: var(--brb-surface);
color: var(--brb-text);
padding: clamp(80px, 10vw, 140px) 0 var(--brb-hero-to-next);
position: relative;
overflow: hidden;
}
.ind-hero__bg {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background:
radial-gradient(ellipse at 0% 0%, rgba(217, 119, 6, 0.10) 0%, transparent 55%),
radial-gradient(ellipse at 100% 100%, rgba(139, 92, 246, 0.05) 0%, transparent 65%);
}
/* Orb divs kept in DOM for stability but hidden —
amber glow is now a corner-anchored gradient on .ind-hero__bg */
.ind-hero__orb { display: none; }
.ind-hero__grid {
/* Grid lines removed — kept the class for DOM stability, but it now renders nothing.
If you ever want the grid back, restore the previous background-image rules. */
display: none;
}
.ind-hero__inner {
position: relative;
z-index: 1;
max-width: 880px;
margin-inline: auto;
text-align: center;
}
.ind-hero .eyebrow {
margin-bottom: clamp(24px, 3vw, 36px);
display: inline-block;
}
.ind-hero__headline {
font-family: var(--brb-font-display);
font-size: clamp(48px, 7vw, 100px);
line-height: 1.02;
letter-spacing: -0.03em;
font-weight: 400;
margin-bottom: clamp(24px, 3vw, 36px);
}
.ind-hero__headline .line {
display: block;
opacity: 0;
transform: translateY(22px);
animation: fadeUp 1000ms var(--brb-ease-entrance) forwards;
}
.ind-hero__headline .line:nth-child(1) { animation-delay: 200ms; }
.ind-hero__headline .line:nth-child(2) { animation-delay: 400ms; }
.ind-hero__headline em {
font-style: italic;
color: var(--brb-accent);
}
.ind-hero__headline .dot {
color: var(--brb-accent);
font-style: normal;
}
.ind-hero__sub {
font-size: clamp(16px, 1.4vw, 19px);
line-height: 1.65;
color: var(--brb-text-muted);
max-width: 60ch;
margin: 0 auto clamp(40px, 5vw, 56px);
opacity: 0;
animation: fadeUp 1000ms var(--brb-ease-entrance) 650ms forwards;
}
/* Jump nav */
.ind-hero__jump {
display: flex;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
opacity: 0;
animation: fadeUp 1000ms var(--brb-ease-entrance) 900ms forwards;
}
.ind-hero__jump a {
display: inline-flex;
align-items: center;
padding: 10px 16px;
font-family: var(--brb-font-body);
font-size: 13px;
font-weight: 500;
color: var(--brb-text);
background: #FFFFFF;
border: 1px solid var(--brb-border);
border-radius: 999px;
letter-spacing: 0.01em;
box-shadow: 0 1px 2px rgba(26, 26, 26, 0.04);
transition: background 200ms var(--brb-ease),
border-color 200ms var(--brb-ease),
color 200ms var(--brb-ease);
}
.ind-hero__jump a:hover {
background: rgba(217, 119, 6, 0.06);
border-color: var(--brb-accent);
color: var(--brb-text);
}
/* ============================================================
Industries · Blocks (shared)
Each industry block: two-column with content + vignette
Alternating bg to create rhythm down the page.
============================================================ */
.industry-block {
padding: clamp(72px, 10vw, 140px) 0;
position: relative;
}
/* Alternating backgrounds for visual rhythm */
.industry-block--medical { background: var(--brb-surface); }
.industry-block--real-estate {
background: var(--brb-anchor);
color: var(--brb-text-on-dark);
}
.industry-block--wineries { background: var(--brb-surface); }
.industry-block--home-services {
background: var(--brb-anchor);
color: var(--brb-text-on-dark);
}
.industry-block--professional { background: var(--brb-surface); }
.industry-block__grid {
display: grid;
grid-template-columns: 1.1fr 1fr;
gap: clamp(40px, 6vw, 96px);
align-items: center;
max-width: 1200px;
margin-inline: auto;
}
.industry-block__grid--reversed {
grid-template-columns: 1fr 1.1fr;
}
.industry-block__grid--reversed .industry-block__content {
grid-column: 2;
}
.industry-block__grid--reversed .industry-block__visual {
grid-column: 1;
grid-row: 1;
}
@media (max-width: 900px) {
.industry-block__grid,
.industry-block__grid--reversed {
grid-template-columns: 1fr;
gap: 48px;
}
.industry-block__grid--reversed .industry-block__content,
.industry-block__grid--reversed .industry-block__visual {
grid-column: 1;
grid-row: auto;
}
}
/* Block content */
.industry-block__label {
font-family: var(--brb-font-body);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--brb-accent);
font-weight: 500;
margin-bottom: 20px;
}
.industry-block__title {
font-family: var(--brb-font-display);
font-size: clamp(32px, 4.5vw, 56px);
line-height: 1.08;
letter-spacing: -0.025em;
font-weight: 400;
margin-bottom: 28px;
max-width: 16ch;
}
.industry-block--real-estate .industry-block__title,
.industry-block--home-services .industry-block__title {
color: var(--brb-text-on-dark);
}
.industry-block__title em {
font-style: italic;
color: var(--brb-accent);
}
.industry-block__body {
font-size: 16px;
line-height: 1.7;
color: var(--brb-text-muted);
margin-bottom: 20px;
max-width: 56ch;
}
.industry-block--real-estate .industry-block__body,
.industry-block--home-services .industry-block__body {
color: var(--brb-text-on-dark-muted);
}
/* Client list */
.industry-block__clients {
margin-top: 28px;
padding-top: 24px;
border-top: 1px solid var(--brb-border);
}
.industry-block--real-estate .industry-block__clients,
.industry-block--home-services .industry-block__clients {
border-top-color: rgba(250, 247, 242, 0.1);
}
.industry-block__clients-label {
font-family: var(--brb-font-body);
font-size: 10px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--brb-text-muted);
font-weight: 500;
margin-bottom: 10px;
}
.industry-block--real-estate .industry-block__clients-label,
.industry-block--home-services .industry-block__clients-label {
color: var(--brb-text-on-dark-subtle);
}
.industry-block__clients-list {
list-style: none;
padding: 0;
margin: 0;
font-family: var(--brb-font-display);
font-size: 16px;
color: var(--brb-text);
line-height: 1.5;
}
.industry-block--real-estate .industry-block__clients-list,
.industry-block--home-services .industry-block__clients-list {
color: var(--brb-text-on-dark);
}
.industry-block__clients-list li {
display: inline;
}
.industry-block__clients-list li::after {
content: ' · ';
color: var(--brb-accent);
margin: 0 4px;
}
.industry-block__clients-list li:last-child::after {
content: '';
margin: 0;
}
/* Service chips */
.industry-block__services {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 24px;
}
.industry-block__service-chip {
display: inline-flex;
align-items: center;
padding: 8px 14px;
font-family: var(--brb-font-body);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.01em;
color: var(--brb-text);
background: transparent;
border: 1px solid var(--brb-border-strong);
border-radius: 999px;
transition: background 200ms var(--brb-ease),
border-color 200ms var(--brb-ease),
color 200ms var(--brb-ease);
}
.industry-block--real-estate .industry-block__service-chip,
.industry-block--home-services .industry-block__service-chip {
color: var(--brb-text-on-dark);
border-color: rgba(250, 247, 242, 0.18);
}
.industry-block__service-chip:hover {
background: var(--brb-accent);
border-color: var(--brb-accent);
color: var(--brb-anchor);
}
/* "Full {industry} marketing strategy" deep-link below the service chips */
.industry-block__deep-link {
margin-top: 20px;
font-family: var(--brb-font-body);
font-size: 14px;
font-weight: 500;
}
.industry-block__deep-link a {
color: var(--brb-text);
border-bottom: 1px solid var(--brb-accent);
padding-bottom: 1px;
transition: color 200ms var(--brb-ease);
}
.industry-block__deep-link a:hover {
color: var(--brb-accent);
}
/* Dark-context variant — real-estate + home-services blocks use --brb-anchor bg */
.industry-block--real-estate .industry-block__deep-link a,
.industry-block--home-services .industry-block__deep-link a {
color: var(--brb-text-on-dark);
}
/* Vignette (right side visual) */
.industry-vignette {
background: var(--brb-anchor);
color: var(--brb-text-on-dark);
border: 1px solid rgba(250, 247, 242, 0.08);
border-radius: 10px;
padding: clamp(28px, 3vw, 40px);
position: relative;
overflow: hidden;
box-shadow: 0 24px 56px rgba(0, 0, 0, 0.25);
}
.industry-block--real-estate .industry-vignette,
.industry-block--home-services .industry-vignette {
background: var(--brb-surface);
color: var(--brb-text);
border-color: var(--brb-border-strong);
box-shadow: 0 24px 56px rgba(0, 0, 0, 0.15);
}
/* Accent glow */
.industry-vignette::before {
content: '';
position: absolute;
top: -30%;
right: -20%;
width: 60%;
height: 60%;
background: radial-gradient(circle, rgba(217, 119, 6, 0.12), transparent 70%);
pointer-events: none;
}
.industry-vignette__head {
margin-bottom: 24px;
padding-bottom: 16px;
border-bottom: 1px solid rgba(250, 247, 242, 0.08);
position: relative;
}
.industry-block--real-estate .industry-vignette__head,
.industry-block--home-services .industry-vignette__head {
border-bottom-color: var(--brb-border);
}
.industry-vignette__eyebrow {
font-family: var(--brb-font-body);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--brb-accent);
font-weight: 500;
}
.industry-vignette__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 14px;
position: relative;
}
.industry-vignette__list li {
display: grid;
grid-template-columns: 36px 1fr;
gap: 14px;
align-items: start;
font-size: 15px;
line-height: 1.55;
color: var(--brb-text-on-dark);
}
.industry-block--real-estate .industry-vignette__list li,
.industry-block--home-services .industry-vignette__list li {
color: var(--brb-text);
}
.industry-vignette__num {
font-family: var(--brb-font-display);
font-size: 18px;
color: var(--brb-accent);
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
line-height: 1;
padding-top: 2px;
}
/* ============================================================
Industries · "Category not listed" section
============================================================ */
.ind-outsider {
background: var(--brb-anchor);
color: var(--brb-text-on-dark);
padding: clamp(64px, 8vw, 100px) 0;
text-align: center;
border-top: 1px solid rgba(250, 247, 242, 0.06);
}
.ind-outsider__inner {
max-width: 720px;
margin-inline: auto;
}
.ind-outsider .eyebrow {
margin-bottom: 20px;
display: inline-block;
}
.ind-outsider__title {
font-family: var(--brb-font-display);
font-size: clamp(36px, 5vw, 60px);
line-height: 1.08;
letter-spacing: -0.025em;
font-weight: 400;
margin-bottom: 24px;
color: var(--brb-text-on-dark);
}
.ind-outsider__title em {
font-style: italic;
color: var(--brb-accent);
}
.ind-outsider__body {
font-size: 17px;
line-height: 1.65;
color: var(--brb-text-on-dark-muted);
max-width: 56ch;
margin: 0 auto 32px;
}
.ind-outsider__ctas {
display: flex;
gap: 12px;
justify-content: center;
flex-wrap: wrap;
}
/* ============================================================
============================================================
ANALYTICS PAGE
Interactive data flow diagram, live hero dashboard preview,
and the full measurement stack.
============================================================
============================================================ */
/* ============================================================
Hero dashboard visual (replaces the standard wd-hero__visual)
============================================================ */
.wd-hero__visual:has(.an-hero-dash) {
height: auto;
max-width: 540px;
margin-left: auto;
}
.an-hero-dash {
background: linear-gradient(165deg, #1F1F1F 0%, #151515 100%);
border: 1px solid rgba(250, 247, 242, 0.08);
border-radius: 10px;
padding: 18px;
box-shadow:
0 32px 72px rgba(0, 0, 0, 0.5),
0 0 0 1px rgba(217, 119, 6, 0.04) inset;
position: relative;
}
.an-hero-dash::before {
content: '';
position: absolute;
inset: -40px;
background: radial-gradient(ellipse at top right, rgba(217, 119, 6, 0.14), transparent 60%);
z-index: -1;
pointer-events: none;
}
.an-hero-dash__head {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 14px;
border-bottom: 1px solid rgba(250, 247, 242, 0.08);
margin-bottom: 16px;
gap: 16px;
}
.an-hero-dash__title {
display: flex;
align-items: center;
gap: 8px;
font-family: var(--brb-font-body);
font-size: 12px;
color: var(--brb-text-on-dark);
font-weight: 500;
}
.an-hero-dash__dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: #86efac;
box-shadow: 0 0 8px rgba(134, 239, 172, 0.5);
animation: an-hero-dot-pulse 2s ease-in-out infinite;
}
@keyframes an-hero-dot-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
.an-hero-dash__tabs {
display: flex;
gap: 4px;
}
.an-hero-dash__tab {
font-family: var(--brb-font-body);
font-size: 10px;
letter-spacing: 0.04em;
color: var(--brb-text-on-dark-subtle);
padding: 4px 8px;
border-radius: 4px;
font-weight: 500;
}
.an-hero-dash__tab--active {
background: rgba(217, 119, 6, 0.14);
color: var(--brb-accent);
}
/* Metric buttons row */
.an-hero-dash__metrics {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
margin-bottom: 14px;
}
.an-hero-dash__metric {
background: rgba(250, 247, 242, 0.03);
border: 1px solid rgba(250, 247, 242, 0.06);
border-radius: 6px;
padding: 10px 12px;
text-align: left;
cursor: pointer;
transition: background 200ms var(--brb-ease),
border-color 200ms var(--brb-ease);
color: inherit;
font-family: inherit;
}
.an-hero-dash__metric:hover {
background: rgba(250, 247, 242, 0.06);
border-color: rgba(250, 247, 242, 0.12);
}
.an-hero-dash__metric.is-active {
background: rgba(217, 119, 6, 0.08);
border-color: rgba(217, 119, 6, 0.4);
}
.an-hero-dash__metric-label {
font-size: 9px;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--brb-text-on-dark-subtle);
font-weight: 500;
margin-bottom: 4px;
}
.an-hero-dash__metric-value {
font-family: var(--brb-font-display);
font-size: 22px;
color: var(--brb-text-on-dark);
line-height: 1;
letter-spacing: -0.02em;
font-weight: 400;
margin-bottom: 4px;
}
.an-hero-dash__metric.is-active .an-hero-dash__metric-value {
color: var(--brb-accent);
}
.an-hero-dash__metric-delta {
font-size: 10px;
font-weight: 500;
}
.an-hero-dash__metric-delta--up { color: #86efac; }
/* Chart */
.an-hero-dash__chart {
background: rgba(0, 0, 0, 0.2);
border-radius: 6px;
padding: 8px;
height: 140px;
}
.an-hero-dash__chart svg {
width: 100%;
height: 100%;
display: block;
}
.an-hero-dash__grid-line {
stroke: rgba(250, 247, 242, 0.06);
stroke-width: 1;
stroke-dasharray: 2 4;
}
.an-hero-dash__line {
stroke-linecap: round;
stroke-linejoin: round;
filter: drop-shadow(0 0 8px rgba(217, 119, 6, 0.4));
}
/* ============================================================
Data flow diagram — the interactive centerpiece
============================================================ */
.an-flow {
background: var(--brb-anchor);
color: var(--brb-text-on-dark);
padding: clamp(72px, 10vw, 140px) 0;
position: relative;
overflow: hidden;
}
.an-flow::before {
content: '';
position: absolute;
top: 0; left: 50%;
transform: translateX(-50%);
width: 80%;
height: 60%;
background: radial-gradient(ellipse at center top, rgba(217, 119, 6, 0.06), transparent 60%);
pointer-events: none;
}
.an-flow__head {
text-align: center;
max-width: 780px;
margin: 0 auto clamp(48px, 6vw, 80px);
position: relative;
}
.an-flow__head .eyebrow { margin-bottom: 16px; display: inline-block; }
.an-flow__title {
font-family: var(--brb-font-display);
font-size: clamp(36px, 5vw, 60px);
line-height: 1.08;
letter-spacing: -0.025em;
font-weight: 400;
margin-bottom: 20px;
}
.an-flow__title em {
font-style: italic;
color: var(--brb-accent);
}
.an-flow__sub {
font-size: clamp(15px, 1.3vw, 17px);
line-height: 1.65;
color: var(--brb-text-on-dark-muted);
max-width: 60ch;
margin: 0 auto;
}
/* Stage container - fades in */
.an-flow__stage {
opacity: 0;
transform: translateY(28px);
transition: opacity 900ms var(--brb-ease-entrance), transform 900ms var(--brb-ease-entrance);
}
.an-flow__stage.is-visible {
opacity: 1;
transform: translateY(0);
}
/* Nodes row */
.an-flow__nodes {
display: flex;
align-items: center;
justify-content: center;
gap: 0;
margin-bottom: clamp(40px, 5vw, 64px);
flex-wrap: wrap;
}
@media (max-width: 900px) {
.an-flow__nodes {
gap: 10px;
justify-content: flex-start;
flex-wrap: nowrap;
overflow-x: auto;
padding-bottom: 12px;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scroll-padding-inline: 4px;
}
.an-flow__nodes .an-flow__node {
flex: 0 0 auto;
scroll-snap-align: start;
}
.an-flow__nodes .an-flow__connector {
display: none;
}
}
.an-flow__node {
background: rgba(250, 247, 242, 0.03);
border: 1px solid rgba(250, 247, 242, 0.08);
border-radius: 8px;
padding: 18px 16px;
min-width: 130px;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
cursor: pointer;
color: var(--brb-text-on-dark);
font-family: inherit;
transition: background 250ms var(--brb-ease),
border-color 250ms var(--brb-ease),
transform 250ms var(--brb-ease);
}
.an-flow__node:hover {
background: rgba(250, 247, 242, 0.06);
border-color: rgba(250, 247, 242, 0.14);
transform: translateY(-2px);
}
.an-flow__node.is-active {
background: rgba(217, 119, 6, 0.1);
border-color: var(--brb-accent);
box-shadow: 0 8px 24px rgba(217, 119, 6, 0.14);
}
.an-flow__node-icon {
color: var(--brb-text-on-dark-muted);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 2px;
}
.an-flow__node.is-active .an-flow__node-icon { color: var(--brb-accent); }
.an-flow__node-label {
font-family: var(--brb-font-display);
font-size: 15px;
color: var(--brb-text-on-dark);
letter-spacing: -0.01em;
}
.an-flow__node-sub {
font-size: 10px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--brb-text-on-dark-subtle);
font-weight: 500;
}
/* Connector between nodes */
.an-flow__connector {
flex: 0 0 36px;
height: 8px;
color: rgba(250, 247, 242, 0.2);
}
.an-flow__connector svg {
width: 100%;
height: 100%;
display: block;
}
/* Detail panel */
.an-flow__detail {
max-width: 780px;
margin: 0 auto;
background: rgba(250, 247, 242, 0.025);
border: 1px solid rgba(250, 247, 242, 0.08);
border-radius: 10px;
padding: clamp(28px, 3.5vw, 44px);
min-height: 260px;
position: relative;
}
.an-flow__panel {
display: none;
opacity: 0;
transform: translateY(8px);
transition: opacity 400ms var(--brb-ease), transform 400ms var(--brb-ease);
}
.an-flow__panel.is-active {
display: block;
opacity: 1;
transform: translateY(0);
}
.an-flow__panel-tag {
font-family: var(--brb-font-body);
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--brb-accent);
font-weight: 500;
margin-bottom: 10px;
}
.an-flow__panel-title {
font-family: var(--brb-font-display);
font-size: clamp(22px, 2.5vw, 30px);
line-height: 1.15;
color: var(--brb-text-on-dark);
margin-bottom: 14px;
letter-spacing: -0.02em;
font-weight: 400;
}
.an-flow__panel-body {
font-size: 15px;
line-height: 1.7;
color: var(--brb-text-on-dark-muted);
margin-bottom: 18px;
max-width: 60ch;
}
.an-flow__panel-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 24px;
}
@media (max-width: 600px) {
.an-flow__panel-list { grid-template-columns: 1fr; }
}
.an-flow__panel-list li {
position: relative;
padding-left: 18px;
font-size: 14px;
line-height: 1.5;
color: var(--brb-text-on-dark);
}
.an-flow__panel-list li::before {
content: '';
position: absolute;
left: 0;
top: 9px;
width: 8px;
height: 1px;
background: var(--brb-accent);
}
/* ============================================================
============================================================
FAQ PAGE
Editorial accordion with search, section jumpnav, and smooth reveals.
============================================================
============================================================ */
.faq-hero {
background: var(--brb-surface);
padding: clamp(64px, 9vw, 120px) 0 var(--brb-hero-to-next);
position: relative;
overflow: hidden;
}
.faq-hero::before {
content: '';
position: absolute;
top: -20%;
left: -5%;
width: 40%;
height: 100%;
background: radial-gradient(ellipse, rgba(217, 119, 6, 0.05), transparent 65%);
pointer-events: none;
}
.faq-hero .eyebrow {
margin-bottom: 20px;
display: inline-block;
}
.faq-hero__title {
font-family: var(--brb-font-display);
font-size: clamp(40px, 6vw, 72px);
line-height: 1.05;
letter-spacing: -0.03em;
font-weight: 400;
margin-bottom: 24px;
max-width: 20ch;
}
.faq-hero__title em {
font-style: italic;
color: var(--brb-accent);
}
.faq-hero__body {
font-size: clamp(16px, 1.4vw, 19px);
line-height: 1.7;
color: var(--brb-text-muted);
max-width: 60ch;
margin-bottom: 36px;
}
.faq-hero__body a {
color: var(--brb-text);
border-bottom: 1px solid var(--brb-accent);
text-decoration: none;
transition: color 200ms var(--brb-ease);
}
.faq-hero__body a:hover { color: var(--brb-accent); }
/* Search input */
.faq-search {
position: relative;
}
.faq-search__icon {
position: absolute;
left: 18px;
top: 50%;
transform: translateY(-50%);
color: var(--brb-text-muted);
pointer-events: none;
}
.faq-search input {
width: 100%;
padding: 14px 44px 14px 48px;
border: 1px solid var(--brb-border);
border-radius: 8px;
background: #FFFFFF;
font-family: var(--brb-font-body);
font-size: 15px;
color: var(--brb-text);
transition: border-color 200ms var(--brb-ease),
box-shadow 200ms var(--brb-ease);
}
.faq-search input::placeholder {
color: var(--brb-text-muted);
}
.faq-search input:focus {
outline: none;
border-color: var(--brb-accent);
box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.14);
}
.faq-search__clear {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: none;
padding: 6px;
cursor: pointer;
color: var(--brb-text-muted);
border-radius: 4px;
transition: background 200ms var(--brb-ease), color 200ms var(--brb-ease);
}
.faq-search__clear:hover {
background: rgba(26, 26, 26, 0.06);
color: var(--brb-text);
}
/* ============================================================
Jump navigation — sticky on scroll
============================================================ */
.faq-jumpnav {
position: sticky;
/* Fix round 2 (Finding 3): same cause as .brb-subnav — the header now
genuinely sticks, so top: 0 pinned this behind the header instead of
below it, with its cream chips bleeding around the pill. */
top: var(--brb-header-h, 117px);
z-index: 50;
background: rgba(250, 247, 242, 0.95);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--brb-border);
}
.faq-jumpnav__inner {
display: flex;
justify-content: center;
gap: 8px;
overflow-x: auto;
padding: 14px 0;
scrollbar-width: none;
}
.faq-jumpnav__inner::-webkit-scrollbar {
display: none;
}
.faq-jumpnav__link {
font-family: var(--brb-font-body);
font-size: 13px;
letter-spacing: 0.02em;
color: var(--brb-text-muted);
text-decoration: none;
padding: 10px 18px;
border-radius: 999px;
background: rgba(26, 26, 26, 0.04);
border: 1px solid transparent;
white-space: nowrap;
font-weight: 500;
cursor: pointer;
transition: background 200ms var(--brb-ease), color 200ms var(--brb-ease), border-color 200ms var(--brb-ease);
}
.faq-jumpnav__link:hover {
background: rgba(26, 26, 26, 0.08);
color: var(--brb-text);
}
.faq-jumpnav__link.is-active,
.faq-jumpnav__link.is-active:hover {
background: var(--brb-accent);
color: var(--brb-text-on-dark);
border-color: var(--brb-accent);
}
/* ============================================================
FAQ main content
============================================================ */
.faq-main {
background: var(--brb-surface);
padding: clamp(48px, 6vw, 80px) 0 clamp(80px, 10vw, 120px);
}
.faq-section {
margin-bottom: clamp(48px, 6vw, 80px);
/* Fix round 2 (Finding 4): removed the old hardcoded scroll-margin-top
(108px) — covered by html's scroll-padding-top now (this is also the
.faq-jumpnav Finding 3 target set, so it doubly needed reconciling). */
padding: clamp(64px, 8vw, 120px) 0;
background: var(--brb-surface);
}
/* Inside /faqs/ multi-section pattern, .faq-main parent provides
the section chrome — individual .faq-section blocks reset to
margin-only spacing so consecutive sections stack tight. */
.faq-main .faq-section {
padding: 0;
background: transparent;
}
.faq-section:last-child { margin-bottom: 0; }
.faq-section__head {
display: flex;
align-items: baseline;
gap: 20px;
margin-bottom: 28px;
padding-bottom: 20px;
border-bottom: 1px solid var(--brb-border);
}
.faq-section__num {
font-family: var(--brb-font-body);
font-size: 12px;
letter-spacing: 0.2em;
color: var(--brb-accent);
font-weight: 600;
}
.faq-section__title {
font-family: var(--brb-font-display);
font-size: clamp(24px, 3vw, 36px);
line-height: 1.1;
letter-spacing: -0.02em;
font-weight: 400;
color: var(--brb-text);
margin: 0;
}
/* Single-section FAQ head — eyebrow + h2 stacked + centered.
Used on /free-strategy-audit/ where the FAQ block has no
sectioned numbering pattern. Canonical .faq-section__head
above is for numbered (.faq-section__num + h2) horizontal
layout used on /faqs/ multi-section page. */
.faq__head {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: clamp(8px, 1vw, 12px);
margin-bottom: clamp(32px, 4vw, 56px);
}
/* FAQ items (accordion) */
.faq-list {
display: flex;
flex-direction: column;
gap: 4px;
}
.faq-item {
background: #FFFFFF;
border: 1px solid var(--brb-border);
border-radius: 8px;
overflow: hidden;
transition: border-color 200ms var(--brb-ease),
box-shadow 200ms var(--brb-ease);
}
.faq-item[open] {
border-color: rgba(217, 119, 6, 0.3);
box-shadow: 0 4px 16px rgba(26, 26, 26, 0.05);
}
.faq-item--match {
border-color: rgba(217, 119, 6, 0.45);
box-shadow: 0 4px 16px rgba(217, 119, 6, 0.08);
}
.faq-item__q {
padding: 20px 24px;
font-family: var(--brb-font-display);
font-size: clamp(16px, 1.4vw, 19px);
line-height: 1.4;
letter-spacing: -0.01em;
color: var(--brb-text);
font-weight: 400;
cursor: pointer;
list-style: none;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
transition: background 200ms var(--brb-ease);
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q:hover {
background: rgba(217, 119, 6, 0.03);
}
.faq-item__chevron {
flex-shrink: 0;
color: var(--brb-text-muted);
transition: transform 300ms var(--brb-ease),
color 200ms var(--brb-ease);
}
.faq-item[open] .faq-item__chevron {
transform: rotate(180deg);
color: var(--brb-accent);
}
.faq-item__a {
padding: 0 24px 24px 24px;
border-top: 1px solid var(--brb-border);
}
.faq-item__a p {
font-size: 15px;
line-height: 1.7;
color: var(--brb-text-muted);
margin: 16px 0 0;
}
.faq-item__a p:first-child { margin-top: 16px; }
.faq-item__a p strong {
color: var(--brb-text);
font-weight: 600;
}
.faq-item__a a {
color: var(--brb-text);
border-bottom: 1px solid var(--brb-accent);
text-decoration: none;
transition: color 200ms var(--brb-ease);
}
.faq-item__a a:hover { color: var(--brb-accent); }
.faq-item__a ul {
margin: 16px 0 0;
padding-left: 0;
list-style: none;
}
.faq-item__a ul li {
font-size: 15px;
line-height: 1.7;
color: var(--brb-text-muted);
padding-left: 20px;
position: relative;
margin-bottom: 6px;
}
.faq-item__a ul li::before {
content: '';
position: absolute;
left: 0;
top: 13px;
width: 10px;
height: 1px;
background: var(--brb-accent);
}
/* No results */
.faq-noresults {
text-align: center;
padding: 48px 24px;
color: var(--brb-text-muted);
font-size: 15px;
}
.faq-noresults a {
color: var(--brb-text);
border-bottom: 1px solid var(--brb-accent);
text-decoration: none;
}
/* ============================================================
FAQ CTA section
============================================================ */
.faq-cta {
background: var(--brb-anchor);
color: var(--brb-text-on-dark);
padding: clamp(64px, 8vw, 120px) 0;
text-align: center;
}
.faq-cta__inner {
max-width: 720px;
margin-inline: auto;
}
.faq-cta .eyebrow {
margin-bottom: 20px;
display: inline-block;
}
.faq-cta__title {
font-family: var(--brb-font-display);
font-size: clamp(32px, 4.5vw, 52px);
line-height: 1.1;
letter-spacing: -0.025em;
font-weight: 400;
margin-bottom: 20px;
}
.faq-cta__title em {
font-style: italic;
color: var(--brb-accent);
}
.faq-cta__body {
font-size: clamp(15px, 1.3vw, 17px);
line-height: 1.7;
color: var(--brb-text-on-dark-muted);
max-width: 56ch;
margin: 0 auto 36px;
}
.faq-cta__actions {
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
}
/* ============================================================
Blog · Index (page-blog.php)
============================================================ */
.blog-hero {
background: var(--brb-surface);
padding: clamp(64px, 9vw, 120px) 0 var(--brb-hero-to-next);
position: relative;
overflow: hidden;
}
.blog-hero .eyebrow {
margin-bottom: 20px;
display: inline-block;
}
.blog-hero__title {
font-family: var(--brb-font-display);
font-size: clamp(40px, 6vw, 72px);
line-height: 1.05;
letter-spacing: -0.03em;
font-weight: 400;
margin-bottom: 24px;
max-width: 22ch;
}
.blog-hero__title em {
font-style: italic;
color: var(--brb-accent);
}
.blog-hero__body {
font-size: clamp(16px, 1.4vw, 19px);
line-height: 1.7;
color: var(--brb-text-muted);
max-width: 60ch;
}
.blog-main {
background: var(--brb-surface);
padding: clamp(32px, 5vw, 64px) 0 clamp(80px, 10vw, 140px);
}
.blog-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(24px, 3vw, 40px);
}
@media (max-width: 960px) {
.blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
.blog-grid { grid-template-columns: 1fr; }
}
.blog-card {
background: var(--brb-surface-raised);
border: 1px solid var(--brb-border);
border-radius: 14px;
overflow: hidden;
transition: transform 300ms var(--brb-ease), border-color 300ms var(--brb-ease), box-shadow 300ms var(--brb-ease);
}
.blog-card:hover {
transform: translateY(-3px);
border-color: var(--brb-border-strong);
box-shadow: 0 12px 32px rgba(26, 26, 26, 0.06);
}
.blog-card__link {
display: block;
color: inherit;
}
.blog-card__illustration {
aspect-ratio: 16 / 10;
background: var(--brb-neutral-100);
position: relative;
overflow: hidden;
}
.blog-card__image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.blog-card__illustration-placeholder {
position: absolute;
inset: 0;
background:
radial-gradient(ellipse at 70% 30%, rgba(217, 119, 6, 0.22) 0%, transparent 70%),
linear-gradient(135deg, var(--brb-neutral-100) 0%, #E4E1DA 100%);
}
.blog-card__body {
padding: clamp(20px, 2vw, 28px) clamp(20px, 2vw, 28px) clamp(24px, 2.2vw, 32px);
}
.blog-card__category {
display: inline-block;
font-size: 11px;
letter-spacing: 0.14em;
text-transform: uppercase;
font-weight: 600;
color: var(--brb-accent);
margin-bottom: 12px;
}
.blog-card__title {
font-family: var(--brb-font-display);
font-size: clamp(20px, 1.8vw, 24px);
line-height: 1.2;
letter-spacing: -0.01em;
font-weight: 400;
color: var(--brb-text);
margin-bottom: 14px;
transition: color 200ms var(--brb-ease);
}
.blog-card:hover .blog-card__title {
color: var(--brb-accent);
}
.blog-card__date {
font-size: 13px;
color: var(--brb-text-subtle);
letter-spacing: 0.01em;
}
.blog-empty {
text-align: center;
padding: 80px 0;
color: var(--brb-text-muted);
font-size: 17px;
}
/* ============================================================
Blog · Shared CTA (page-blog.php + single.php)
============================================================ */
.blog-cta {
background: var(--brb-anchor);
color: var(--brb-text-on-dark);
padding: clamp(64px, 8vw, 120px) 0;
text-align: center;
}
.blog-cta__inner {
max-width: 720px;
margin-inline: auto;
}
.blog-cta .eyebrow {
margin-bottom: 20px;
display: inline-block;
}
.blog-cta__title {
font-family: var(--brb-font-display);
font-size: clamp(32px, 4.5vw, 52px);
line-height: 1.1;
letter-spacing: -0.025em;
font-weight: 400;
margin-bottom: 20px;
}
.blog-cta__title em {
font-style: italic;
color: var(--brb-accent);
}
.blog-cta__body {
font-size: clamp(15px, 1.3vw, 17px);
line-height: 1.7;
color: var(--brb-text-on-dark-muted);
max-width: 56ch;
margin: 0 auto 36px;
}
.blog-cta__actions {
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
}
/* ============================================================
Blog · Single post (single.php)
============================================================ */
.wrap-reading {
max-width: 720px;
margin-inline: auto;
padding-inline: var(--brb-pad-page);
}
.post-single {
background: var(--brb-surface);
padding: clamp(48px, 7vw, 96px) 0 clamp(72px, 9vw, 128px);
}
.post-single__header {
margin-bottom: clamp(32px, 4vw, 56px);
}
.post-single__back {
display: inline-block;
font-size: 13px;
letter-spacing: 0.02em;
color: var(--brb-text-muted);
margin-bottom: 28px;
transition: color 200ms var(--brb-ease);
}
.post-single__back:hover { color: var(--brb-accent); }
.post-single__category {
margin-bottom: 16px;
display: inline-block;
}
.post-single__title {
font-family: var(--brb-font-display);
font-size: clamp(36px, 5.5vw, 60px);
line-height: 1.08;
letter-spacing: -0.03em;
font-weight: 400;
margin-bottom: 20px;
color: var(--brb-text);
}
.post-single__meta {
font-size: 14px;
color: var(--brb-text-subtle);
letter-spacing: 0.02em;
}
.post-single__illustration {
margin-top: clamp(32px, 4vw, 56px);
}
.post-single__illustration img {
width: 100%;
height: auto;
border-radius: 12px;
display: block;
}
.post-single__illustration-placeholder {
aspect-ratio: 16 / 9;
border-radius: 12px;
background:
radial-gradient(ellipse at 70% 30%, rgba(217, 119, 6, 0.22) 0%, transparent 70%),
linear-gradient(135deg, var(--brb-neutral-100) 0%, #E4E1DA 100%);
}
.post-single__content {
font-family: var(--brb-font-body);
font-size: 18px;
line-height: 1.75;
color: var(--brb-ink);
}
.post-single__content > * + * { margin-top: 1.3em; }
.post-single__content h2 {
font-family: var(--brb-font-display);
font-size: clamp(26px, 3vw, 34px);
line-height: 1.2;
letter-spacing: -0.02em;
font-weight: 400;
margin-top: 2em;
margin-bottom: 0.6em;
color: var(--brb-text);
}
.post-single__content h3 {
font-family: var(--brb-font-display);
font-size: clamp(20px, 2vw, 24px);
line-height: 1.25;
letter-spacing: -0.015em;
font-weight: 500;
margin-top: 1.8em;
margin-bottom: 0.5em;
color: var(--brb-text);
}
.post-single__content h4 {
font-family: var(--brb-font-body);
font-size: 17px;
font-weight: 600;
letter-spacing: 0;
margin-top: 1.6em;
margin-bottom: 0.4em;
color: var(--brb-text);
}
.post-single__content p { margin: 0; }
.post-single__content a {
color: var(--brb-text);
border-bottom: 1px solid var(--brb-accent);
transition: color 200ms var(--brb-ease);
}
.post-single__content a:hover { color: var(--brb-accent); }
.post-single__content ul,
.post-single__content ol {
padding-left: 1.4em;
}
.post-single__content li + li { margin-top: 0.5em; }
.post-single__content blockquote {
border-left: 3px solid var(--brb-accent);
padding: 4px 0 4px 24px;
margin-left: 0;
font-family: var(--brb-font-display);
font-style: italic;
font-size: clamp(20px, 2vw, 24px);
line-height: 1.45;
color: var(--brb-text);
}
.post-single__content img {
border-radius: 10px;
margin: 1.8em 0;
}
.post-single__content figure {
margin: 1.8em 0;
}
.post-single__content figure img { margin: 0; }
.post-single__content figcaption {
font-size: 14px;
color: var(--brb-text-subtle);
text-align: center;
margin-top: 10px;
}
.post-single__content code {
font-family: 'SF Mono', Menlo, Consolas, monospace;
font-size: 0.92em;
background: var(--brb-neutral-100);
padding: 2px 6px;
border-radius: 4px;
}
.post-single__content pre {
background: var(--brb-neutral-100);
padding: 18px 20px;
border-radius: 8px;
overflow-x: auto;
font-size: 14px;
line-height: 1.55;
}
.post-single__content pre code {
background: none;
padding: 0;
font-size: inherit;
}
.post-single__content hr {
border: 0;
border-top: 1px solid var(--brb-border);
margin: 2.4em auto;
width: 60%;
}
/* ============================================================
Landing template (page-landing.php)
Used by service-area + industry pages whose body is editor-authored.
Reuses the inline brand blocks already in the page content.
============================================================ */
.landing-hero {
background: var(--brb-surface);
padding: clamp(72px, 10vw, 128px) 0 var(--brb-hero-to-next);
}
.landing-hero__title {
font-family: var(--brb-font-display);
font-size: clamp(40px, 6vw, 72px);
line-height: 1.05;
letter-spacing: -0.03em;
font-weight: 400;
color: var(--brb-text);
max-width: 22ch;
}
.landing-hero__title em {
font-style: italic;
color: var(--brb-accent);
}
.landing-main {
background: var(--brb-surface);
padding: clamp(24px, 3vw, 48px) 0 clamp(80px, 10vw, 140px);
}
/* /reviews-only override — its short content was leaving a 228px void
between the verification CTA and the cross-links section. Cuts the
bottom padding by half on this page only. */
body.page-reviews .landing-main { padding-bottom: 72px; }
.landing-main__inner {
font-family: var(--brb-font-body);
font-size: 18px;
line-height: 1.75;
color: var(--brb-ink);
}
.landing-main__inner > * + * { margin-top: 1.3em; }
.landing-main__inner h2 {
font-family: var(--brb-font-display);
font-size: clamp(28px, 3.4vw, 40px);
line-height: 1.15;
letter-spacing: -0.02em;
font-weight: 400;
margin-top: 2em;
margin-bottom: 0.6em;
color: var(--brb-text);
}
.landing-main__inner h2 em {
font-style: italic;
color: var(--brb-accent);
}
.landing-main__inner h3 {
font-family: var(--brb-font-display);
font-size: clamp(20px, 2vw, 26px);
line-height: 1.25;
letter-spacing: -0.015em;
font-weight: 500;
margin-top: 1.8em;
margin-bottom: 0.5em;
color: var(--brb-text);
}
.landing-main__inner h4 {
font-family: var(--brb-font-body);
font-size: 17px;
font-weight: 600;
margin-top: 1.6em;
margin-bottom: 0.4em;
color: var(--brb-text);
}
.landing-main__inner p { margin: 0; }
.landing-main__inner a {
color: var(--brb-text);
border-bottom: 1px solid var(--brb-accent);
transition: color 200ms var(--brb-ease);
}
.landing-main__inner a:hover { color: var(--brb-accent); }
.landing-main__inner ul,
.landing-main__inner ol {
padding-left: 1.4em;
}
.landing-main__inner li + li { margin-top: 0.5em; }
.landing-main__inner blockquote {
border-left: 3px solid var(--brb-accent);
padding: 4px 0 4px 24px;
margin-left: 0;
font-family: var(--brb-font-display);
font-style: italic;
font-size: clamp(20px, 2vw, 24px);
line-height: 1.45;
color: var(--brb-text);
}
.landing-main__inner img {
border-radius: 10px;
margin: 1.8em 0;
}
.landing-main__inner figure { margin: 1.8em 0; }
.landing-main__inner figure img { margin: 0; }
.landing-main__inner figcaption {
font-size: 14px;
color: var(--brb-text-subtle);
text-align: center;
margin-top: 10px;
}
.landing-main__inner hr {
border: 0;
border-top: 1px solid var(--brb-border);
margin: 2.4em auto;
width: 60%;
}
/* ============================================================
Landing template — hero eyebrow
============================================================ */
.landing-hero__eyebrow {
margin-bottom: 18px;
}
/* ============================================================
Landing template — author byline strip
============================================================ */
.landing-byline {
background: var(--brb-surface);
}
.landing-byline__inner {
display: flex;
align-items: center;
gap: 16px;
padding: 18px 0;
border-top: 1px solid var(--brb-border);
border-bottom: 1px solid var(--brb-border);
}
.landing-byline__photo {
width: 56px;
height: 56px;
border-radius: 50%;
object-fit: cover;
display: block;
flex-shrink: 0;
background: var(--brb-neutral-100);
}
.landing-byline__text {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1 1 auto;
min-width: 0;
}
.landing-byline__name {
font-family: var(--brb-font-body);
font-size: 15px;
font-weight: 500;
color: var(--brb-text);
letter-spacing: -0.005em;
}
.landing-byline__meta {
font-family: var(--brb-font-body);
font-size: 13px;
color: var(--brb-text-muted);
letter-spacing: 0.01em;
}
.landing-byline__link {
font-family: var(--brb-font-body);
font-size: 13px;
font-weight: 500;
color: var(--brb-text);
border-bottom: 1px solid var(--brb-accent);
white-space: nowrap;
transition: color 200ms var(--brb-ease);
flex-shrink: 0;
}
.landing-byline__link:hover { color: var(--brb-accent); }
@media (max-width: 600px) {
.landing-byline__inner {
flex-wrap: wrap;
gap: 12px;
}
.landing-byline__link {
flex-basis: 100%;
text-align: left;
}
}
/* ============================================================
Landing template — cross-links ("Also looking at")
============================================================ */
.landing-crosslinks {
background: var(--brb-surface);
padding: clamp(48px, 7vw, 88px) 0 clamp(24px, 3vw, 40px);
}
.landing-crosslinks__title {
font-family: var(--brb-font-display);
font-size: clamp(24px, 3vw, 32px);
line-height: 1.15;
letter-spacing: -0.02em;
font-weight: 400;
color: var(--brb-text);
margin-bottom: clamp(20px, 2.5vw, 32px);
}
.landing-crosslinks__grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(14px, 1.6vw, 20px);
}
@media (max-width: 720px) {
.landing-crosslinks__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
.landing-crosslinks__grid { grid-template-columns: 1fr; }
}
.landing-crosslinks__card {
display: block;
position: relative;
background: var(--brb-surface-raised);
border: 1px solid var(--brb-border);
border-radius: 12px;
padding: 20px 22px 24px;
color: inherit;
transition: transform 250ms var(--brb-ease), border-color 250ms var(--brb-ease), box-shadow 250ms var(--brb-ease);
}
.landing-crosslinks__card:hover {
transform: translateY(-2px);
border-color: var(--brb-border-strong);
box-shadow: 0 10px 28px rgba(26, 26, 26, 0.06);
}
.landing-crosslinks__card-title {
font-family: var(--brb-font-display);
font-size: 18px;
line-height: 1.25;
letter-spacing: -0.01em;
font-weight: 400;
color: var(--brb-text);
margin-bottom: 8px;
transition: color 200ms var(--brb-ease);
}
.landing-crosslinks__card:hover .landing-crosslinks__card-title { color: var(--brb-accent); }
.landing-crosslinks__card-desc {
font-family: var(--brb-font-body);
font-size: 14px;
line-height: 1.55;
color: var(--brb-text-muted);
margin-bottom: 12px;
}
.landing-crosslinks__card-arrow {
font-family: var(--brb-font-body);
font-size: 16px;
color: var(--brb-accent);
transition: transform 200ms var(--brb-ease);
display: inline-block;
}
.landing-crosslinks__card:hover .landing-crosslinks__card-arrow { transform: translateX(3px); }
/* ============================================================
Landing template — final CTA (dark band)
============================================================ */
.landing-final-cta {
background: var(--brb-anchor);
color: var(--brb-text-on-dark);
padding: clamp(56px, 7vw, 96px) 0;
text-align: center;
}
.landing-final-cta__inner {
max-width: 640px;
margin-inline: auto;
}
.landing-final-cta__title {
font-family: var(--brb-font-display);
font-size: clamp(28px, 4vw, 44px);
line-height: 1.1;
letter-spacing: -0.025em;
font-weight: 400;
color: var(--brb-text-on-dark);
margin-bottom: 16px;
}
.landing-final-cta__title em {
font-style: italic;
color: var(--brb-accent);
}
.landing-final-cta__body {
font-family: var(--brb-font-body);
font-size: clamp(15px, 1.3vw, 17px);
line-height: 1.65;
color: var(--brb-text-on-dark-muted);
max-width: 52ch;
margin: 0 auto 32px;
}
.landing-final-cta__actions {
display: flex;
gap: 18px;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.landing-final-cta__secondary {
font-family: var(--brb-font-body);
font-size: 14px;
color: var(--brb-text-on-dark-muted);
border-bottom: 1px solid rgba(217, 119, 6, 0.6);
transition: color 200ms var(--brb-ease), border-color 200ms var(--brb-ease);
}
.landing-final-cta__secondary:hover {
color: var(--brb-text-on-dark);
border-bottom-color: var(--brb-accent);
}
/* ============================================================
404 — Not Found page
============================================================ */
.error-404 {
background: var(--brb-surface);
color: var(--brb-text);
padding: clamp(72px, 12vw, 160px) 0 clamp(96px, 14vw, 200px);
}
.error-404__hero {
text-align: center;
max-width: 880px;
padding-bottom: clamp(48px, 7vw, 96px);
}
.error-404__hero .eyebrow {
margin-bottom: 18px;
}
.error-404__headline {
font-family: var(--brb-font-display);
font-weight: 400;
font-size: clamp(2.25rem, 5.5vw, 4rem);
line-height: 1.08;
letter-spacing: -0.015em;
color: var(--brb-text);
margin: 0 0 24px;
}
.error-404__headline em {
font-style: italic;
color: var(--brb-accent);
}
.error-404__sub {
font-family: var(--brb-font-body);
font-size: clamp(1rem, 1.4vw, 1.125rem);
line-height: 1.6;
color: var(--brb-text-muted);
max-width: 560px;
margin: 0 auto;
}
.error-404__nav-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
padding-bottom: clamp(64px, 9vw, 120px);
}
@media (min-width: 880px) {
.error-404__nav-grid {
grid-template-columns: repeat(4, 1fr);
gap: 20px;
}
}
.error-404__nav-card {
display: flex;
flex-direction: column;
gap: 8px;
padding: 28px 24px;
background: var(--brb-surface-raised);
border: 1px solid var(--brb-border);
border-radius: 10px;
text-decoration: none;
color: var(--brb-text);
transition: border-color 200ms var(--brb-ease),
transform 200ms var(--brb-ease),
box-shadow 200ms var(--brb-ease);
}
.error-404__nav-card:hover {
border-color: var(--brb-border-strong);
transform: translateY(-2px);
box-shadow: 0 6px 24px rgba(26, 26, 26, 0.06);
}
.error-404__nav-card--accent {
background: var(--brb-anchor);
color: var(--brb-text-on-dark);
border-color: var(--brb-anchor);
}
.error-404__nav-card--accent:hover {
border-color: var(--brb-accent);
}
.error-404__nav-card-label {
font-family: var(--brb-font-display);
font-weight: 400;
font-size: 1.4rem;
letter-spacing: -0.01em;
line-height: 1.2;
}
.error-404__nav-card--accent .error-404__nav-card-label {
color: var(--brb-accent);
}
.error-404__nav-card-desc {
font-family: var(--brb-font-body);
font-size: 0.92rem;
line-height: 1.5;
color: var(--brb-text-muted);
}
.error-404__nav-card--accent .error-404__nav-card-desc {
color: var(--brb-text-on-dark-muted);
}
.error-404__recent-posts {
border-top: 1px solid var(--brb-border);
padding-top: clamp(48px, 7vw, 88px);
}
.error-404__recent-posts-head {
margin-bottom: clamp(28px, 4vw, 48px);
}
.error-404__recent-posts-title {
font-family: var(--brb-font-display);
font-weight: 400;
font-size: clamp(1.5rem, 2.6vw, 2rem);
line-height: 1.15;
letter-spacing: -0.01em;
color: var(--brb-text);
margin: 8px 0 0;
}
.error-404__recent-posts-title em {
font-style: italic;
color: var(--brb-accent);
}
.error-404__recent-posts-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0;
}
.error-404__recent-post {
border-top: 1px solid var(--brb-border);
}
.error-404__recent-post:last-child {
border-bottom: 1px solid var(--brb-border);
}
.error-404__recent-post-link {
display: grid;
grid-template-columns: 140px 1fr;
align-items: baseline;
gap: 24px;
padding: 22px 4px;
text-decoration: none;
color: var(--brb-text);
transition: color 200ms var(--brb-ease);
}
.error-404__recent-post-link:hover {
color: var(--brb-accent);
}
.error-404__recent-post-meta {
font-family: var(--brb-font-body);
font-size: 0.78rem;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--brb-text-subtle);
}
.error-404__recent-post-title {
font-family: var(--brb-font-display);
font-weight: 400;
font-size: clamp(1.05rem, 1.6vw, 1.25rem);
line-height: 1.25;
letter-spacing: -0.005em;
}
@media (max-width: 600px) {
.error-404__recent-post-link {
grid-template-columns: 1fr;
gap: 6px;
padding: 20px 4px;
}
}
/* ============================================================
Location-service · Local-pack mockup (signature visual)
--------------------------------------------------------------
Two surfaces:
1. .loc-pack-card (compact, hero right-side)
2. .loc-pack (expanded, full section between hero+market)
Plus a paragraph-block stat row (.loc-stat) + 3-callout grid
(.loc-pack__callouts) for the "What gets a business into the
3-pack" annotation.
============================================================ */
/* ---- Compact card variant (hero visual) ---------------------- */
.loc-pack-card {
background: #fff;
border-radius: 12px;
border: 1px solid rgba(26, 26, 26, 0.08);
overflow: hidden;
font-family: var(--brb-font-body);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
width: 100%;
max-width: 420px;
margin-left: auto;
opacity: 0;
transform: translateY(20px) scale(0.97);
transition: opacity 700ms var(--brb-ease), transform 700ms var(--brb-ease);
}
.loc-pack-card.is-visible,
.wd-hero.is-visible .loc-pack-card,
.wd-hero__visual.is-visible .loc-pack-card {
opacity: 1;
transform: translateY(0) scale(1);
}
.loc-pack-card__bar {
background: rgba(26, 26, 26, 0.03);
padding: 10px 14px;
display: flex;
align-items: center;
gap: 10px;
border-bottom: 1px solid rgba(26, 26, 26, 0.06);
}
.loc-pack-card__bar-logo {
font-family: var(--brb-font-display);
font-size: 13px;
font-weight: 500;
color: var(--brb-text);
letter-spacing: -0.01em;
}
.loc-pack-card__bar-query {
background: #fff;
border: 1px solid rgba(26, 26, 26, 0.1);
border-radius: 18px;
padding: 5px 12px;
flex: 1;
color: rgba(26, 26, 26, 0.55);
font-size: 12px;
}
.loc-pack-card__map {
height: 56px;
background: linear-gradient(135deg, #E8EDE7 0%, #DCE3DA 100%);
position: relative;
}
.loc-pack-card__map::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 9px;
height: 9px;
background: var(--brb-accent);
border: 2px solid #fff;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(217, 119, 6, 0.2);
}
.loc-pack-card__results {
padding: 4px 0;
}
.loc-pack-card__result {
padding: 12px 16px;
border-bottom: 1px solid rgba(26, 26, 26, 0.05);
display: flex;
flex-direction: column;
gap: 4px;
}
.loc-pack-card__result:last-child { border-bottom: 0; }
.loc-pack-card__result--featured {
background: rgba(217, 119, 6, 0.04);
border-left: 3px solid var(--brb-accent);
padding-left: 13px;
}
.loc-pack-card__result-name {
font-family: var(--brb-font-display);
font-size: 14px;
font-weight: 500;
color: var(--brb-text);
margin: 0;
line-height: 1.2;
}
.loc-pack-card__result-meta {
font-size: 11px;
color: rgba(26, 26, 26, 0.7);
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.loc-pack-card__stars { color: var(--brb-accent); letter-spacing: 1px; font-size: 10px; }
.loc-pack-card__rating-num { font-weight: 500; color: var(--brb-text); }
.loc-pack-card__result-address {
font-size: 11px;
color: rgba(26, 26, 26, 0.55);
}
/* Sponsored modifier (compact) — small uppercase eyebrow above the
business name, signals paid-pack context (SLO Paid Ads, v1.35.1) */
.loc-pack-card__sponsored-tag {
font-family: var(--brb-font-body);
font-size: 9px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(26, 26, 26, 0.42);
margin: 0;
line-height: 1;
}
/* ---- Expanded section variant -------------------------------- */
.loc-pack {
background: var(--brb-surface);
padding: var(--brb-section-pad) 0;
border-top: 1px solid var(--brb-border);
}
.loc-pack__head {
text-align: center;
max-width: 720px;
margin: 0 auto clamp(36px, 4.5vw, 56px);
}
.loc-pack__head .eyebrow {
margin-bottom: 14px;
display: inline-block;
}
.loc-pack__title {
font-family: var(--brb-font-display);
font-size: clamp(32px, 4.2vw, 52px);
line-height: 1.1;
letter-spacing: -0.02em;
font-weight: 400;
color: var(--brb-text);
margin: 0 0 18px;
}
.loc-pack__title em {
font-style: italic;
color: var(--brb-accent);
}
.loc-pack__body {
font-family: var(--brb-font-body);
font-size: clamp(1rem, 1.3vw, 1.125rem);
line-height: 1.7;
color: var(--brb-text-muted);
margin: 0;
}
.loc-pack__chrome {
background: #fff;
border-radius: 14px;
border: 1px solid rgba(26, 26, 26, 0.08);
overflow: hidden;
font-family: var(--brb-font-body);
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
max-width: 720px;
margin: 0 auto clamp(48px, 6vw, 80px);
}
.loc-pack__bar {
background: rgba(26, 26, 26, 0.03);
padding: 14px 20px;
display: flex;
align-items: center;
gap: 14px;
border-bottom: 1px solid rgba(26, 26, 26, 0.06);
}
.loc-pack__bar-logo {
font-family: var(--brb-font-display);
font-size: 16px;
font-weight: 500;
color: var(--brb-text);
letter-spacing: -0.01em;
}
.loc-pack__bar-query {
background: #fff;
border: 1px solid rgba(26, 26, 26, 0.1);
border-radius: 22px;
padding: 7px 16px;
flex: 1;
color: rgba(26, 26, 26, 0.55);
font-size: 14px;
}
.loc-pack__map {
height: 96px;
background:
radial-gradient(circle at 70% 35%, rgba(255, 255, 255, 0.4) 0%, transparent 60%),
linear-gradient(135deg, #E8EDE7 0%, #DCE3DA 100%);
position: relative;
}
.loc-pack__map-pin {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 14px;
height: 14px;
background: var(--brb-accent);
border: 3px solid #fff;
border-radius: 50%;
box-shadow: 0 0 0 6px rgba(217, 119, 6, 0.18);
}
.loc-pack__map::after {
content: '';
position: absolute;
top: 32%;
left: 28%;
width: 7px;
height: 7px;
background: rgba(26, 26, 26, 0.4);
border-radius: 50%;
box-shadow:
100px 22px 0 -1px rgba(26, 26, 26, 0.4),
160px -10px 0 -1px rgba(26, 26, 26, 0.4);
}
.loc-pack__results { padding: 4px 0; }
.loc-pack__result {
padding: 16px 22px;
border-bottom: 1px solid rgba(26, 26, 26, 0.05);
display: flex;
flex-direction: column;
gap: 6px;
}
.loc-pack__result:last-child { border-bottom: 0; }
.loc-pack__result--featured {
background: rgba(217, 119, 6, 0.04);
border-left: 3px solid var(--brb-accent);
padding-left: 19px;
}
.loc-pack__result-name {
font-family: var(--brb-font-display);
font-size: 17px;
font-weight: 500;
color: var(--brb-text);
margin: 0;
line-height: 1.2;
}
.loc-pack__result-meta {
font-size: 13px;
color: rgba(26, 26, 26, 0.7);
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.loc-pack__stars { color: var(--brb-accent); letter-spacing: 1px; font-size: 12px; }
.loc-pack__rating-num { font-weight: 500; color: var(--brb-text); }
.loc-pack__result-address {
font-size: 13px;
color: rgba(26, 26, 26, 0.55);
}
.loc-pack__result-actions {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 4px;
}
.loc-pack__action {
font-size: 12px;
color: rgba(26, 26, 26, 0.7);
padding: 4px 12px;
border: 1px solid rgba(26, 26, 26, 0.12);
border-radius: 14px;
font-weight: 500;
}
.loc-pack__result--featured .loc-pack__action {
color: var(--brb-accent);
border-color: rgba(217, 119, 6, 0.3);
}
/* Sponsored modifier (expanded) — small uppercase eyebrow above the
business name, signals paid-pack context (SLO Paid Ads, v1.35.1).
Composes cleanly with --featured: featured row gets both amber tint
AND sponsored eyebrow; runners-up get just the eyebrow. */
.loc-pack__sponsored-tag {
font-family: var(--brb-font-body);
font-size: 10px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(26, 26, 26, 0.42);
margin: 0;
line-height: 1;
}
/* ---- 3-pack callouts ----------------------------------------- */
.loc-pack__callouts {
background: var(--brb-anchor);
color: var(--brb-text-on-dark);
border-radius: 14px;
padding: clamp(28px, 3.5vw, 44px);
max-width: 960px;
margin: 0 auto;
}
.loc-pack__callouts-title {
font-family: var(--brb-font-body);
font-size: 11px;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(250, 247, 242, 0.55);
margin: 0 0 24px;
font-weight: 500;
}
.loc-pack__callouts-grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
}
@media (min-width: 720px) {
.loc-pack__callouts-grid { grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.5vw, 36px); }
}
.loc-pack__callout {
opacity: 0;
transform: translateY(16px);
transition: opacity 600ms var(--brb-ease), transform 600ms var(--brb-ease);
}
.loc-pack__callout.is-visible {
opacity: 1;
transform: translateY(0);
}
.loc-pack__callout-num {
font-family: var(--brb-font-display);
font-size: 28px;
font-weight: 400;
color: var(--brb-accent);
line-height: 1;
margin-bottom: 12px;
letter-spacing: -0.02em;
}
.loc-pack__callout-title {
font-family: var(--brb-font-display);
font-size: 18px;
font-weight: 500;
color: var(--brb-text-on-dark);
margin: 0 0 8px;
line-height: 1.3;
}
.loc-pack__callout-body {
font-family: var(--brb-font-body);
font-size: 14px;
line-height: 1.6;
color: rgba(250, 247, 242, 0.78);
margin: 0;
}
/* ---- Winery-SEO cross-link line (F5.3) — centered footer under the
callouts panel on the light band; muted body with accent links. --- */
.loc-pack__crosslink {
max-width: 640px;
margin: clamp(28px, 3.5vw, 48px) auto 0;
text-align: center;
font-family: var(--brb-font-body);
font-size: 16px;
line-height: 1.7;
color: var(--brb-text-muted);
}
.loc-pack__crosslink a {
color: var(--brb-accent);
text-decoration: underline;
text-underline-offset: 2px;
}
/* ---- Stat row used in .wd-philosophy on location pages ------- */
.loc-stat-row {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
margin: clamp(20px, 2.5vw, 32px) 0 0;
}
@media (min-width: 720px) {
.loc-stat-row { grid-template-columns: repeat(3, 1fr); }
}
.loc-stat {
background: rgba(217, 119, 6, 0.06);
border-left: 3px solid var(--brb-accent);
padding: 16px 18px;
border-radius: 4px;
}
.loc-stat__value {
font-family: var(--brb-font-display);
font-size: 1.5rem;
font-weight: 500;
color: var(--brb-accent);
line-height: 1;
margin: 0 0 6px;
letter-spacing: -0.01em;
}
.loc-stat__label {
font-family: var(--brb-font-body);
font-size: 0.82rem;
color: var(--brb-text);
line-height: 1.4;
margin: 0 0 4px;
}
.loc-stat__source {
font-family: var(--brb-font-body);
font-size: 0.7rem;
color: rgba(26, 26, 26, 0.5);
margin: 0;
font-style: italic;
}
/* ============================================================
Industry-service · Per-vertical signature visuals (RESERVED)
--------------------------------------------------------------
Reserved namespace for the .ind-mock-* classes that will host
per-industry signature mockups when each vertical is populated
in page-industry-service.php.
Planned mockups per industry:
- .ind-mock-medical — review widget mockup (review velocity / GBP signal)
- .ind-mock-realestate — listing card mockup (typical buyer-search behavior)
- .ind-mock-winery — tasting reservation flow (DTC-driven economy)
- .ind-mock-home — service-area + LSA result mockup
Each industry-population commit will add its own scoped block
here (e.g., .ind-mock-medical, .ind-mock-realestate). No shared
CSS — vertical-specific by design. Compact + expanded variants
per the .loc-pack-card / .loc-pack precedent.
============================================================ */
/* ============================================================
Industry-service · Home services LSA + service-area mockup
--------------------------------------------------------------
First concrete .ind-mock-* implementation (v1.35.0).
Sibling pattern to .loc-pack on page-location-service.php.
Two surfaces:
- Compact: hero visual slot (LSA card only, no map)
- Expanded: Section 03 split layout (LSA card + service-area
map), shown only on /home-services-digital-marketing/
============================================================ */
/* ---- Section frame --------------------------------------------- */
.ind-mock-home-services {
background: var(--brb-surface);
padding: var(--brb-section-pad) 0;
border-top: 1px solid var(--brb-border);
}
.ind-mock-home-services__head {
text-align: center;
max-width: 720px;
margin: 0 auto clamp(36px, 4.5vw, 56px);
}
.ind-mock-home-services__head .eyebrow {
margin-bottom: 14px;
display: inline-block;
}
.ind-mock-home-services__title {
font-family: var(--brb-font-display);
font-size: clamp(32px, 4.2vw, 52px);
line-height: 1.1;
letter-spacing: -0.02em;
font-weight: 400;
color: var(--brb-text);
margin: 0 0 18px;
}
.ind-mock-home-services__title em {
font-style: italic;
color: var(--brb-accent);
}
.ind-mock-home-services__body {
font-family: var(--brb-font-body);
font-size: clamp(1rem, 1.3vw, 1.125rem);
line-height: 1.7;
color: var(--brb-text-muted);
margin: 0;
}
/* ---- Split layout (expanded) ----------------------------------- */
.ind-mock-home-services__split {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 32px;
align-items: start;
max-width: 1080px;
margin: 0 auto;
}
/* ---- LSA card (shared by compact + expanded) ------------------- */
.ind-mock-home-services__card {
background: #fff;
border: 1px solid rgba(26, 26, 26, 0.08);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
padding: 18px;
font-family: var(--brb-font-body);
width: 100%;
max-width: 480px;
margin-left: auto;
margin-right: auto;
}
.ind-mock-home-services__card--compact {
max-width: 380px;
padding: 14px;
margin-left: auto;
margin-right: 0;
opacity: 0;
transform: translateY(20px) scale(0.97);
transition: opacity 700ms var(--brb-ease), transform 700ms var(--brb-ease);
}
.ind-mock-home-services__card--compact.is-visible,
.wd-hero.is-visible .ind-mock-home-services__card--compact,
.wd-hero__visual.is-visible .ind-mock-home-services__card--compact {
opacity: 1;
transform: translateY(0) scale(1);
}
/* ---- Search bar ------------------------------------------------ */
.ind-mock-home-services__searchbar {
display: flex;
align-items: center;
gap: 10px;
background: rgba(26, 26, 26, 0.04);
border: 1px solid rgba(26, 26, 26, 0.06);
border-radius: 999px;
padding: 8px 14px;
margin-bottom: 14px;
}
.ind-mock-home-services__search-icon {
font-size: 14px;
color: rgba(26, 26, 26, 0.45);
line-height: 1;
}
.ind-mock-home-services__search-query {
font-size: 13px;
color: rgba(26, 26, 26, 0.75);
}
/* ---- LSA label ("Most popular") -------------------------------- */
.ind-mock-home-services__lsa-label {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(26, 26, 26, 0.55);
margin: 0 0 8px;
}
/* ---- LSA result rows ------------------------------------------- */
.ind-mock-home-services__lsa-result {
padding: 12px 0;
border-bottom: 1px solid rgba(26, 26, 26, 0.06);
}
.ind-mock-home-services__lsa-result:last-child { border-bottom: 0; }
.ind-mock-home-services__lsa-result--featured {
background: rgba(217, 118, 6, 0.04);
border: 1px solid rgba(217, 118, 6, 0.20);
border-radius: 10px;
padding: 12px 14px;
margin-bottom: 8px;
}
.ind-mock-home-services__lsa-result--compact {
padding: 8px 0;
}
.ind-mock-home-services__lsa-name {
font-size: 14px;
font-weight: 600;
color: var(--brb-text);
margin: 0 0 4px;
line-height: 1.3;
}
.ind-mock-home-services__lsa-meta {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: rgba(26, 26, 26, 0.7);
margin-bottom: 6px;
flex-wrap: wrap;
}
.ind-mock-home-services__lsa-rating-num { font-weight: 600; color: var(--brb-text); }
.ind-mock-home-services__lsa-stars { color: var(--brb-accent); letter-spacing: 1px; font-size: 11px; }
.ind-mock-home-services__lsa-reviews { color: rgba(26, 26, 26, 0.55); }
/* ---- Google Verified badge (BLUE per Oct 2025 platform change) - */
.ind-mock-home-services__lsa-badge {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
font-weight: 500;
color: #1a73e8;
margin-right: 8px;
}
.ind-mock-home-services__lsa-badge-check {
display: inline-flex;
align-items: center;
justify-content: center;
width: 14px;
height: 14px;
background: #1a73e8;
color: #fff;
border-radius: 50%;
font-size: 9px;
font-weight: 700;
line-height: 1;
}
.ind-mock-home-services__lsa-badge--inline {
font-size: 0;
margin-right: 0;
}
/* ---- Status line ----------------------------------------------- */
.ind-mock-home-services__lsa-status {
display: block;
font-size: 11px;
color: rgba(26, 26, 26, 0.6);
margin-top: 6px;
}
/* ---- Action buttons (Call / Message) --------------------------- */
.ind-mock-home-services__lsa-actions {
display: flex;
gap: 8px;
margin-top: 10px;
}
.ind-mock-home-services__lsa-action {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 1;
font-size: 12px;
font-weight: 500;
padding: 7px 12px;
border-radius: 999px;
border: 1px solid rgba(26, 26, 26, 0.15);
background: #fff;
color: var(--brb-text);
letter-spacing: 0.01em;
}
.ind-mock-home-services__lsa-action--call {
background: var(--brb-text);
color: #fff;
border-color: var(--brb-text);
}
/* ---- Service-area map ------------------------------------------ */
.ind-mock-home-services__map {
background: #fff;
border: 1px solid rgba(26, 26, 26, 0.08);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
padding: 18px;
font-family: var(--brb-font-body);
width: 100%;
max-width: 480px;
margin: 0 auto;
}
.ind-mock-home-services__map-label {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(26, 26, 26, 0.55);
margin: 0 0 12px;
}
.ind-mock-home-services__map-svg {
display: block;
width: 100%;
height: auto;
max-height: 280px;
}
.ind-mock-home-services__map-fill {
fill: rgba(217, 118, 6, 0.08);
stroke: rgba(217, 118, 6, 0.25);
stroke-width: 1;
}
.ind-mock-home-services__map-coast {
fill: none;
stroke: rgba(26, 26, 26, 0.55);
stroke-width: 1.5;
stroke-linecap: round;
}
.ind-mock-home-services__map-inland {
fill: none;
stroke: rgba(26, 26, 26, 0.20);
stroke-width: 1;
stroke-dasharray: 3 3;
stroke-linecap: round;
}
.ind-mock-home-services__map-pin {
fill: rgba(26, 26, 26, 0.55);
}
.ind-mock-home-services__map-pin--featured {
fill: var(--brb-accent);
}
.ind-mock-home-services__map-pin-label {
font-family: var(--brb-font-body);
font-size: 9px;
fill: rgba(26, 26, 26, 0.65);
}
.ind-mock-home-services__map-pin-label--featured {
font-weight: 600;
fill: var(--brb-text);
}
.ind-mock-home-services__map-caption {
font-size: 12px;
color: rgba(26, 26, 26, 0.6);
margin: 12px 0 0;
text-align: center;
font-style: italic;
}
/* ---- Mobile breakpoint ----------------------------------------- */
@media (max-width: 720px) {
.ind-mock-home-services__split {
grid-template-columns: 1fr;
gap: 20px;
}
.ind-mock-home-services__card,
.ind-mock-home-services__map {
padding: 14px;
max-width: 100%;
}
.ind-mock-home-services__lsa-result--featured {
padding: 10px 12px;
}
}
/* ============================================================
Industry-service · Medical reviews widget mockup
--------------------------------------------------------------
Second concrete .ind-mock-* implementation (v1.38.8).
Google Reviews widget design — distinct from .ind-mock-home-services
(LSA + service-area map).
Two surfaces:
- Compact: hero visual slot — GBP knowledge panel + first
review only (no signals annotations or full review list)
- Expanded: Section 03 — full GBP panel + 2 reviews +
engagement signal annotations
============================================================ */
/* ---- Section frame --------------------------------------------- */
.ind-mock-medical {
background: var(--brb-surface);
padding: var(--brb-section-pad) 0;
border-top: 1px solid var(--brb-border);
}
.ind-mock-medical__head {
text-align: center;
max-width: 720px;
margin: 0 auto clamp(36px, 4.5vw, 56px);
}
.ind-mock-medical__head .eyebrow {
margin-bottom: 14px;
display: inline-block;
}
.ind-mock-medical__title {
font-family: var(--brb-font-display);
font-size: clamp(32px, 4.2vw, 52px);
line-height: 1.1;
letter-spacing: -0.02em;
font-weight: 400;
color: var(--brb-text);
margin: 0 0 18px;
}
.ind-mock-medical__title em {
font-style: italic;
color: var(--brb-accent);
}
.ind-mock-medical__body {
font-family: var(--brb-font-body);
font-size: clamp(1rem, 1.3vw, 1.125rem);
line-height: 1.7;
color: var(--brb-text-muted);
margin: 0;
}
/* ---- Card chrome (shared by compact + expanded) ---------------- */
.ind-mock-medical__card {
background: #fff;
border: 1px solid rgba(26, 26, 26, 0.08);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
font-family: var(--brb-font-body);
width: 100%;
max-width: 560px;
margin: 0 auto;
overflow: hidden;
}
.ind-mock-medical__card--compact {
max-width: 380px;
margin-left: auto;
margin-right: 0;
opacity: 0;
transform: translateY(20px) scale(0.97);
transition: opacity 700ms var(--brb-ease), transform 700ms var(--brb-ease);
}
.ind-mock-medical__card--compact.is-visible,
.wd-hero.is-visible .ind-mock-medical__card--compact,
.wd-hero__visual.is-visible .ind-mock-medical__card--compact {
opacity: 1;
transform: translateY(0) scale(1);
}
/* ---- GBP knowledge panel (header) ------------------------------ */
.ind-mock-medical__panel {
padding: 18px;
border-bottom: 1px solid rgba(26, 26, 26, 0.06);
}
.ind-mock-medical__card--compact .ind-mock-medical__panel {
padding: 14px;
}
.ind-mock-medical__practice-name {
font-family: var(--brb-font-display);
font-size: 18px;
font-weight: 500;
color: var(--brb-text);
margin: 0 0 6px;
line-height: 1.2;
letter-spacing: -0.01em;
}
.ind-mock-medical__card--compact .ind-mock-medical__practice-name {
font-size: 15px;
}
.ind-mock-medical__rating {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 6px;
}
.ind-mock-medical__rating-num {
font-size: 14px;
font-weight: 600;
color: var(--brb-text);
}
.ind-mock-medical__stars {
color: var(--brb-accent);
letter-spacing: 1px;
font-size: 12px;
}
.ind-mock-medical__rating-count {
font-size: 12px;
color: rgba(26, 26, 26, 0.55);
}
.ind-mock-medical__rating-badge {
font-size: 10px;
font-weight: 500;
letter-spacing: 0.04em;
color: #1a8754;
background: rgba(26, 135, 84, 0.08);
padding: 2px 8px;
border-radius: 999px;
margin-left: 4px;
}
.ind-mock-medical__category {
font-size: 12px;
color: rgba(26, 26, 26, 0.6);
margin: 0 0 4px;
}
.ind-mock-medical__address {
font-size: 12px;
color: rgba(26, 26, 26, 0.6);
margin: 0 0 6px;
}
.ind-mock-medical__hours {
display: flex;
align-items: center;
gap: 6px;
font-size: 12px;
color: rgba(26, 26, 26, 0.7);
margin: 0;
}
.ind-mock-medical__hours-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #1a8754;
flex-shrink: 0;
}
/* ---- Action button row ----------------------------------------- */
.ind-mock-medical__actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 14px;
}
.ind-mock-medical__action {
font-size: 11px;
font-weight: 500;
padding: 6px 12px;
border-radius: 999px;
border: 1px solid rgba(26, 26, 26, 0.15);
background: #fff;
color: var(--brb-text);
letter-spacing: 0.01em;
}
.ind-mock-medical__action--primary {
background: var(--brb-text);
color: #fff;
border-color: var(--brb-text);
}
/* ---- Reviews list ---------------------------------------------- */
.ind-mock-medical__reviews {
padding: 16px 18px;
border-bottom: 1px solid rgba(26, 26, 26, 0.06);
}
.ind-mock-medical__reviews-label {
font-size: 11px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(26, 26, 26, 0.55);
margin: 0 0 10px;
}
.ind-mock-medical__review {
padding: 10px 0;
border-bottom: 1px solid rgba(26, 26, 26, 0.04);
}
.ind-mock-medical__review:last-child {
border-bottom: 0;
}
.ind-mock-medical__review--compact {
padding: 12px 14px;
}
.ind-mock-medical__review-meta {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 6px;
}
.ind-mock-medical__review-name {
font-size: 12px;
font-weight: 600;
color: var(--brb-text);
}
.ind-mock-medical__review-stars {
color: var(--brb-accent);
letter-spacing: 1px;
font-size: 11px;
}
.ind-mock-medical__review-age {
font-size: 11px;
color: rgba(26, 26, 26, 0.5);
}
.ind-mock-medical__review-quote {
font-family: var(--brb-font-body);
font-size: 12.5px;
line-height: 1.55;
color: rgba(26, 26, 26, 0.75);
font-style: italic;
margin: 0;
}
.ind-mock-medical__card--compact .ind-mock-medical__review-quote {
font-size: 12px;
line-height: 1.5;
}
/* ---- Engagement signals (expanded only) ------------------------ */
.ind-mock-medical__signals {
padding: 14px 18px;
background: rgba(26, 26, 26, 0.02);
display: flex;
flex-direction: column;
gap: 6px;
}
.ind-mock-medical__signal {
display: flex;
align-items: center;
gap: 8px;
font-size: 11.5px;
color: rgba(26, 26, 26, 0.7);
margin: 0;
}
.ind-mock-medical__signal-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
background: rgba(26, 135, 84, 0.10);
color: #1a8754;
border-radius: 50%;
font-size: 10px;
font-weight: 700;
flex-shrink: 0;
}
/* ---- Mobile breakpoint ----------------------------------------- */
@media (max-width: 720px) {
.ind-mock-medical__card {
max-width: 100%;
}
.ind-mock-medical__panel,
.ind-mock-medical__reviews,
.ind-mock-medical__signals {
padding-left: 14px;
padding-right: 14px;
}
.ind-mock-medical__actions {
gap: 6px;
}
.ind-mock-medical__action {
font-size: 10.5px;
padding: 5px 10px;
}
}
/* ============================================================
Industry-service · Real estate listing card mockup
--------------------------------------------------------------
Third concrete .ind-mock-* implementation (v1.38.9).
Listing card design — visually distinct from
.ind-mock-home-services (LSA + map) and .ind-mock-medical
(GBP reviews widget).
Two surfaces:
- Compact: hero visual slot — listing card only (price,
address, specs, agent), no search chrome or signals
- Expanded: Section 03 — search result chrome + listing
card + engagement signal annotations
Photo placeholder uses a subtle muted gradient — no stock
imagery. Signals "this is where a real listing photo would
go" without faking content.
============================================================ */
/* ---- Section frame --------------------------------------------- */
.ind-mock-real-estate {
background: var(--brb-surface);
padding: var(--brb-section-pad) 0;
border-top: 1px solid var(--brb-border);
}
.ind-mock-real-estate__head {
text-align: center;
max-width: 720px;
margin: 0 auto clamp(36px, 4.5vw, 56px);
}
.ind-mock-real-estate__head .eyebrow {
margin-bottom: 14px;
display: inline-block;
}
.ind-mock-real-estate__title {
font-family: var(--brb-font-display);
font-size: clamp(32px, 4.2vw, 52px);
line-height: 1.1;
letter-spacing: -0.02em;
font-weight: 400;
color: var(--brb-text);
margin: 0 0 18px;
}
.ind-mock-real-estate__title em {
font-style: italic;
color: var(--brb-accent);
}
.ind-mock-real-estate__body {
font-family: var(--brb-font-body);
font-size: clamp(1rem, 1.3vw, 1.125rem);
line-height: 1.7;
color: var(--brb-text-muted);
margin: 0;
}
/* ---- Expanded chrome wrapper ----------------------------------- */
.ind-mock-real-estate__chrome {
background: #fff;
border: 1px solid rgba(26, 26, 26, 0.08);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
font-family: var(--brb-font-body);
width: 100%;
max-width: 560px;
margin: 0 auto;
overflow: hidden;
}
/* ---- Search result chrome (expanded only) ---------------------- */
.ind-mock-real-estate__search-chrome {
padding: 14px 18px;
background: rgba(26, 26, 26, 0.02);
border-bottom: 1px solid rgba(26, 26, 26, 0.06);
}
.ind-mock-real-estate__search-meta {
font-size: 11.5px;
color: rgba(26, 26, 26, 0.6);
margin: 0 0 8px;
}
.ind-mock-real-estate__filters {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.ind-mock-real-estate__filter {
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.02em;
padding: 4px 10px;
border-radius: 999px;
border: 1px solid rgba(26, 26, 26, 0.10);
background: #fff;
color: rgba(26, 26, 26, 0.7);
}
/* ---- Listing card (shared by compact + expanded) --------------- */
.ind-mock-real-estate__card {
background: #fff;
font-family: var(--brb-font-body);
}
/* Compact variant lives outside the chrome — it's the whole card */
.ind-mock-real-estate__card--compact {
border: 1px solid rgba(26, 26, 26, 0.08);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
width: 100%;
max-width: 380px;
margin-left: auto;
margin-right: 0;
overflow: hidden;
opacity: 0;
transform: translateY(20px) scale(0.97);
transition: opacity 700ms var(--brb-ease), transform 700ms var(--brb-ease);
}
.ind-mock-real-estate__card--compact.is-visible,
.wd-hero.is-visible .ind-mock-real-estate__card--compact,
.wd-hero__visual.is-visible .ind-mock-real-estate__card--compact {
opacity: 1;
transform: translateY(0) scale(1);
}
/* ---- Photo placeholder (no stock imagery) ---------------------- */
.ind-mock-real-estate__photo {
position: relative;
width: 100%;
aspect-ratio: 16 / 10;
background:
linear-gradient(135deg, rgba(26, 26, 26, 0.06) 0%, rgba(26, 26, 26, 0.02) 100%);
border-bottom: 1px solid rgba(26, 26, 26, 0.04);
display: flex;
align-items: center;
justify-content: center;
}
/* Inline SVG house illustration — same illustrative-not-photographic
philosophy as the .ind-mock-home-services service-area map. Amber
line art on the soft gradient canvas. (v1.39.2) */
.ind-mock-real-estate__photo-svg {
width: 55%;
max-width: 220px;
height: auto;
fill: none;
stroke: var(--brb-accent);
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.ind-mock-real-estate__photo-body {
fill: rgba(217, 119, 6, 0.04);
}
.ind-mock-real-estate__photo-ground {
stroke: rgba(26, 26, 26, 0.20);
stroke-width: 1;
stroke-dasharray: 3 3;
}
.ind-mock-real-estate__badge {
position: absolute;
top: 12px;
left: 12px;
font-size: 10px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: #1a8754;
background: #fff;
padding: 4px 10px;
border-radius: 999px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
/* ---- Listing details ------------------------------------------- */
.ind-mock-real-estate__details {
padding: 16px 18px;
}
.ind-mock-real-estate__card--compact .ind-mock-real-estate__details {
padding: 14px;
}
.ind-mock-real-estate__price {
font-family: var(--brb-font-display);
font-size: 22px;
font-weight: 500;
color: var(--brb-text);
letter-spacing: -0.01em;
margin: 0 0 4px;
line-height: 1.1;
}
.ind-mock-real-estate__card--compact .ind-mock-real-estate__price {
font-size: 19px;
}
.ind-mock-real-estate__address {
font-size: 12.5px;
color: rgba(26, 26, 26, 0.7);
margin: 0 0 6px;
line-height: 1.4;
}
.ind-mock-real-estate__specs {
font-size: 12px;
color: rgba(26, 26, 26, 0.6);
margin: 0 0 10px;
}
/* ---- Action button row ----------------------------------------- */
.ind-mock-real-estate__actions {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 12px 0;
}
.ind-mock-real-estate__action {
font-size: 11px;
font-weight: 500;
padding: 6px 12px;
border-radius: 999px;
border: 1px solid rgba(26, 26, 26, 0.15);
background: #fff;
color: var(--brb-text);
letter-spacing: 0.01em;
}
.ind-mock-real-estate__action--primary {
background: var(--brb-text);
color: #fff;
border-color: var(--brb-text);
}
/* ---- Agent attribution ----------------------------------------- */
.ind-mock-real-estate__agent {
font-size: 11.5px;
color: rgba(26, 26, 26, 0.6);
margin: 10px 0 0;
padding-top: 10px;
border-top: 1px solid rgba(26, 26, 26, 0.04);
line-height: 1.4;
}
.ind-mock-real-estate__agent-name {
color: var(--brb-text);
font-weight: 500;
}
.ind-mock-real-estate__agent-rating {
color: rgba(26, 26, 26, 0.7);
}
/* ---- Engagement signals (expanded only) ------------------------ */
.ind-mock-real-estate__signals {
padding: 14px 18px;
background: rgba(26, 26, 26, 0.02);
border-top: 1px solid rgba(26, 26, 26, 0.06);
display: flex;
flex-direction: column;
gap: 6px;
}
.ind-mock-real-estate__signal {
display: flex;
align-items: center;
gap: 8px;
font-size: 11.5px;
color: rgba(26, 26, 26, 0.7);
margin: 0;
}
.ind-mock-real-estate__signal-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
background: rgba(26, 135, 84, 0.10);
color: #1a8754;
border-radius: 50%;
font-size: 10px;
font-weight: 700;
flex-shrink: 0;
}
/* ---- Mobile breakpoint ----------------------------------------- */
@media (max-width: 720px) {
.ind-mock-real-estate__chrome {
max-width: 100%;
}
.ind-mock-real-estate__details,
.ind-mock-real-estate__signals,
.ind-mock-real-estate__search-chrome {
padding-left: 14px;
padding-right: 14px;
}
.ind-mock-real-estate__actions {
gap: 5px;
}
.ind-mock-real-estate__action {
font-size: 10.5px;
padding: 5px 10px;
}
.ind-mock-real-estate__price {
font-size: 19px;
}
}
/* ============================================================
Industry-service · Winery tasting reservation flow mockup
--------------------------------------------------------------
Fourth and final concrete .ind-mock-* implementation (v1.39.0).
Tasting reservation booking flow design — distinct from the
three prior verticals (LSA/map, GBP reviews, listing card).
Two surfaces:
- Compact: hero visual slot — booking widget chrome +
experience selection cards (Standard vs Estate) + club-
member-save prompt only. No date pill, no time grid, no
party size, no subtotal.
- Expanded: Section 03 — full booking flow (header + step
indicator + date + time grid + party size + experience
cards + subtotal + CTA + club prompt)
Selected-state treatment uses --brb-accent (amber) consistent
with site-wide selected-state convention.
============================================================ */
/* ---- Section frame --------------------------------------------- */
.ind-mock-winery {
background: var(--brb-surface);
padding: var(--brb-section-pad) 0;
border-top: 1px solid var(--brb-border);
}
.ind-mock-winery__head {
text-align: center;
max-width: 720px;
margin: 0 auto clamp(36px, 4.5vw, 56px);
}
.ind-mock-winery__head .eyebrow {
margin-bottom: 14px;
display: inline-block;
}
.ind-mock-winery__title {
font-family: var(--brb-font-display);
font-size: clamp(32px, 4.2vw, 52px);
line-height: 1.1;
letter-spacing: -0.02em;
font-weight: 400;
color: var(--brb-text);
margin: 0 0 18px;
}
.ind-mock-winery__title em {
font-style: italic;
color: var(--brb-accent);
}
.ind-mock-winery__body {
font-family: var(--brb-font-body);
font-size: clamp(1rem, 1.3vw, 1.125rem);
line-height: 1.7;
color: var(--brb-text-muted);
margin: 0;
}
/* ---- Booking widget chrome (shared by compact + expanded) ------ */
.ind-mock-winery__chrome {
background: #fff;
border: 1px solid rgba(26, 26, 26, 0.08);
border-radius: 12px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
font-family: var(--brb-font-body);
width: 100%;
max-width: 560px;
margin: 0 auto;
overflow: hidden;
}
.ind-mock-winery__chrome--compact {
max-width: 380px;
margin-left: auto;
margin-right: 0;
opacity: 0;
transform: translateY(20px) scale(0.97);
transition: opacity 700ms var(--brb-ease), transform 700ms var(--brb-ease);
}
.ind-mock-winery__chrome--compact.is-visible,
.wd-hero.is-visible .ind-mock-winery__chrome--compact,
.wd-hero__visual.is-visible .ind-mock-winery__chrome--compact {
opacity: 1;
transform: translateY(0) scale(1);
}
/* ---- Header ---------------------------------------------------- */
.ind-mock-winery__header {
padding: 16px 18px;
border-bottom: 1px solid rgba(26, 26, 26, 0.06);
background: rgba(26, 26, 26, 0.02);
}
.ind-mock-winery__chrome--compact .ind-mock-winery__header {
padding: 14px;
}
.ind-mock-winery__winery {
font-family: var(--brb-font-display);
font-size: 16px;
font-weight: 500;
color: var(--brb-text);
margin: 0 0 2px;
letter-spacing: -0.01em;
}
.ind-mock-winery__subheader {
font-size: 12px;
color: rgba(26, 26, 26, 0.6);
margin: 0;
}
/* ---- Step indicator (expanded only) ---------------------------- */
.ind-mock-winery__step-indicator {
display: flex;
align-items: center;
gap: 10px;
margin-top: 10px;
}
.ind-mock-winery__step-text {
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
color: rgba(26, 26, 26, 0.55);
}
.ind-mock-winery__step-dots {
display: inline-flex;
gap: 4px;
}
.ind-mock-winery__step-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: rgba(26, 26, 26, 0.15);
}
.ind-mock-winery__step-dot--active {
background: var(--brb-accent);
}
/* ---- Selection grid (expanded only) ---------------------------- */
.ind-mock-winery__selection {
padding: 14px 18px;
}
.ind-mock-winery__field {
margin-bottom: 14px;
}
.ind-mock-winery__field:last-child {
margin-bottom: 0;
}
.ind-mock-winery__field-label {
display: block;
font-size: 10.5px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(26, 26, 26, 0.55);
margin-bottom: 6px;
}
/* Date pill */
.ind-mock-winery__date {
display: inline-block;
font-size: 12.5px;
font-weight: 500;
padding: 6px 12px;
border-radius: 999px;
background: rgba(217, 119, 6, 0.08);
border: 1px solid rgba(217, 119, 6, 0.30);
color: var(--brb-text);
}
/* Time grid */
.ind-mock-winery__time-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 6px;
}
.ind-mock-winery__time-slot {
font-size: 12px;
font-weight: 500;
padding: 7px 8px;
text-align: center;
border-radius: 6px;
border: 1px solid rgba(26, 26, 26, 0.12);
background: #fff;
color: rgba(26, 26, 26, 0.7);
}
.ind-mock-winery__time-slot--selected {
background: var(--brb-accent);
color: #fff;
border-color: var(--brb-accent);
}
/* Party size */
.ind-mock-winery__party-size {
display: inline-flex;
align-items: center;
gap: 14px;
border: 1px solid rgba(26, 26, 26, 0.12);
border-radius: 999px;
padding: 4px 14px;
background: #fff;
}
.ind-mock-winery__party-control {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
font-size: 14px;
color: rgba(26, 26, 26, 0.55);
user-select: none;
}
.ind-mock-winery__party-count {
font-size: 12.5px;
font-weight: 500;
color: var(--brb-text);
}
/* ---- Experience cards (shared by compact + expanded) ----------- */
.ind-mock-winery__experiences {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.ind-mock-winery__chrome--compact .ind-mock-winery__experiences {
padding: 14px;
padding-top: 0;
}
.ind-mock-winery__experience {
position: relative;
padding: 10px 12px;
border: 1px solid rgba(26, 26, 26, 0.12);
border-radius: 8px;
background: #fff;
}
.ind-mock-winery__experience--selected {
border-color: var(--brb-accent);
background: rgba(217, 119, 6, 0.04);
box-shadow: 0 0 0 1px var(--brb-accent) inset;
}
.ind-mock-winery__experience-name {
font-family: var(--brb-font-display);
font-size: 13px;
font-weight: 500;
color: var(--brb-text);
margin: 0 0 4px;
letter-spacing: -0.005em;
}
.ind-mock-winery__experience-detail {
font-size: 11px;
color: rgba(26, 26, 26, 0.6);
margin: 0 0 6px;
line-height: 1.4;
}
.ind-mock-winery__experience-price {
font-size: 12px;
font-weight: 600;
color: var(--brb-text);
margin: 0;
}
.ind-mock-winery__experience-check {
position: absolute;
top: 8px;
right: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
background: var(--brb-accent);
color: #fff;
border-radius: 50%;
font-size: 10px;
font-weight: 700;
}
/* ---- Footer (expanded only) — subtotal + CTA + club prompt ----- */
.ind-mock-winery__footer {
padding: 14px 18px 16px;
background: rgba(26, 26, 26, 0.02);
border-top: 1px solid rgba(26, 26, 26, 0.06);
}
.ind-mock-winery__subtotal {
font-size: 13px;
font-weight: 500;
color: var(--brb-text);
margin: 0 0 10px;
}
.ind-mock-winery__cta {
display: block;
text-align: center;
font-size: 13px;
font-weight: 500;
padding: 10px 16px;
background: var(--brb-text);
color: #fff;
border-radius: 999px;
letter-spacing: 0.01em;
}
/* ---- Club prompt (shared) -------------------------------------- */
.ind-mock-winery__club-prompt {
font-size: 11.5px;
color: rgba(26, 26, 26, 0.6);
margin: 10px 0 0;
text-align: center;
}
.ind-mock-winery__chrome--compact .ind-mock-winery__club-prompt {
margin: 0;
padding: 12px 14px 14px;
text-align: left;
border-top: 1px solid rgba(26, 26, 26, 0.06);
background: rgba(26, 26, 26, 0.02);
}
.ind-mock-winery__club-link {
color: var(--brb-accent);
font-weight: 500;
}
/* ---- Mobile breakpoint ----------------------------------------- */
@media (max-width: 720px) {
.ind-mock-winery__chrome {
max-width: 100%;
}
.ind-mock-winery__header,
.ind-mock-winery__selection,
.ind-mock-winery__footer {
padding-left: 14px;
padding-right: 14px;
}
.ind-mock-winery__time-grid {
grid-template-columns: repeat(3, 1fr);
}
.ind-mock-winery__experiences {
grid-template-columns: 1fr;
}
}
/* ============================================================
Breadcrumbs (.brb-breadcrumbs)
Site-wide nav chrome rendered by Rank Math via br_breadcrumbs().
Sits between site header and the first content section on
blog posts, blog index, FAQ, location-service, industry-service.
Skipped on homepage and top-level service pages by design.
============================================================ */
.brb-breadcrumbs {
background: var(--brb-surface);
border-bottom: 1px solid var(--brb-border);
padding-block: 14px;
}
.brb-breadcrumbs__inner {
font-size: 13px;
letter-spacing: 0.02em;
color: var(--brb-text-muted);
display: flex;
flex-wrap: wrap;
align-items: center;
}
.brb-breadcrumbs a {
color: var(--brb-text);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 0.2s var(--brb-ease);
}
.brb-breadcrumbs a:hover { border-bottom-color: var(--brb-accent); }
.brb-breadcrumbs__sep {
color: var(--brb-text-subtle);
margin: 0 10px;
display: inline-block;
}
.brb-breadcrumbs .last { color: var(--brb-text-subtle); }
@media (max-width: 600px) {
.brb-breadcrumbs { padding-block: 12px; }
.brb-breadcrumbs__inner { font-size: 12px; }
.brb-breadcrumbs__sep { margin: 0 6px; }
}
/* ============================================================
Archive hero (.archive-hero)
Utility-weight intro for fallback archive renders served via
index.php — category, tag, author, date routes that don't have
a dedicated template. Deliberately lighter than .blog-hero /
.faq-hero: this is a list affordance, not an editorial moment.
Suppressed on is_search() — search ships chrome + grid only.
============================================================ */
.archive-hero {
background: var(--brb-surface);
padding: clamp(40px, 5vw, 64px) 0 var(--brb-hero-to-next);
border-bottom: 1px solid var(--brb-border);
}
.archive-hero .eyebrow {
margin-bottom: 12px;
display: inline-block;
}
.archive-hero__title {
font-family: var(--brb-font-display);
font-size: clamp(28px, 3.6vw, 40px);
line-height: 1.15;
letter-spacing: -0.02em;
font-weight: 400;
margin: 0;
color: var(--brb-text);
}
.archive-empty {
text-align: center;
padding: clamp(48px, 6vw, 80px) 0;
color: var(--brb-text-muted);
font-size: 16px;
}
@media (max-width: 600px) {
.archive-hero { padding: 32px 0 var(--brb-hero-to-next); }
.archive-hero__title { font-size: clamp(24px, 6vw, 30px); }
}
/* ============================================================
Accessibility utility — visually hidden but available to screen
readers and search engines. Used for headings that need to exist
for a11y/SEO without being rendered visually (e.g., search h1).
============================================================ */
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ============================================================
42 · Reviews Page (page-reviews.php)
— Editorial hero + filterable masonry + chip system
============================================================ */
/* Container override for /reviews content sections only — wider than 1200px
to give the masonry columns more room. Scoped to the page's section blocks
(not the body) so the rule doesn't cascade into the global header + footer
.wrap containers, which must stay at the sitewide 1200px max-width. */
.reviews-page__hero .wrap,
.reviews-page__controls-section .wrap,
.reviews-page__grid-section .wrap {
max-width: 1320px;
}
/* ---------------- Hero stat band ---------------- */
.reviews-page__hero {
position: relative;
padding: clamp(72px, 9vw, 128px) 0 var(--brb-hero-to-next);
overflow: hidden;
background: var(--brb-surface);
}
.reviews-page__hero-bg {
position: absolute;
inset: 0;
background: radial-gradient(
circle at 85% 15%,
rgba(217, 119, 6, 0.10),
transparent 55%
);
pointer-events: none;
}
.reviews-page__hero-inner {
position: relative;
z-index: 1;
}
.reviews-page__hero-title {
font-family: var(--brb-font-display);
font-size: clamp(40px, 6vw, 72px);
line-height: 1.05;
letter-spacing: -0.03em;
font-weight: 400;
color: var(--brb-text);
margin: 14px 0 20px;
max-width: 22ch;
}
.reviews-page__hero-title em {
font-style: italic;
color: var(--brb-accent);
}
.reviews-page__hero-sub {
font-family: var(--brb-font-body);
font-size: clamp(15px, 1.4vw, 18px);
line-height: 1.65;
color: var(--brb-text-muted);
max-width: 56ch;
margin: 0 0 36px;
}
.reviews-page__stat-row {
list-style: none;
margin: 0;
padding: 18px 0 0;
border-top: 1px solid var(--brb-border);
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: clamp(20px, 4vw, 48px);
}
.reviews-page__hero-cta {
margin-top: clamp(24px, 3vw, 32px);
}
.reviews-page__stat {
display: flex;
align-items: baseline;
gap: 8px;
font-family: var(--brb-font-body);
font-size: 14px;
color: var(--brb-text-muted);
}
.reviews-page__stat-num {
font-family: var(--brb-font-display);
font-size: clamp(22px, 2.4vw, 28px);
font-weight: 400;
color: var(--brb-text);
letter-spacing: -0.02em;
}
.reviews-page__stat-stars {
color: var(--brb-accent);
font-size: 14px;
letter-spacing: 2px;
}
.reviews-page__stat-label {
text-transform: lowercase;
letter-spacing: 0.02em;
}
/* Anchor the "Verified on Google" stat to the right edge of the strip so
the stats group naturally on the left and the trust signal closes the
line — fills the empty right-side space the default flex layout left. */
.reviews-page__stat:has(.reviews-page__stat-link) {
margin-left: auto;
}
/* Tighter hero-to-next section spacing on /reviews/ only — the default
site-wide rhythm (var(--brb-hero-to-next) on both sides ≈ 200px combined)
reads as a void here because the hero is content-light (eyebrow + short
headline + one-line body + single stat row). Cut both sides ≈ 50% so
the filter bar feels connected to the stat strip without breaking the
sitewide hero convention used by every other page. */
.reviews-page__hero {
padding-bottom: clamp(32px, 4vw, 48px);
}
.reviews-page__hero + .reviews-page__controls-section {
padding-top: clamp(24px, 3vw, 40px);
}
.reviews-page__stat-link {
font-family: var(--brb-font-body);
font-size: 14px;
color: var(--brb-text);
font-weight: 500;
border-bottom: 1px solid var(--brb-accent);
padding-bottom: 1px;
transition: color 200ms var(--brb-ease);
}
.reviews-page__stat-link:hover {
color: var(--brb-accent);
}
/* ---------------- Filter + sort controls ---------------- */
.reviews-page__controls-section {
background: var(--brb-surface);
padding: 8px 0 clamp(20px, 3vw, 32px);
}
.reviews-page__controls {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 20px;
padding: 20px 0;
border-top: 1px solid var(--brb-border);
border-bottom: 1px solid var(--brb-border);
}
.reviews-page__filter-group {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.reviews-page__filter-divider {
color: var(--brb-text-subtle);
margin: 0 4px;
user-select: none;
opacity: 0.55;
}
.filter-chip {
font-family: var(--brb-font-body);
font-size: 13px;
font-weight: 500;
padding: 8px 14px;
border-radius: 999px;
border: 1px solid var(--brb-border-strong);
background-color: transparent;
color: var(--brb-text);
cursor: pointer;
transition: background-color 200ms var(--brb-ease),
color 200ms var(--brb-ease),
border-color 200ms var(--brb-ease);
letter-spacing: 0.01em;
}
.filter-chip:hover {
background-color: var(--brb-anchor);
color: var(--brb-text-on-dark);
border-color: var(--brb-anchor);
}
.filter-chip--active,
.filter-chip--active:hover {
background-color: var(--brb-anchor);
color: var(--brb-text-on-dark);
border-color: var(--brb-anchor);
font-weight: 500;
}
.reviews-page__sort-group {
display: flex;
align-items: center;
gap: 10px;
}
.reviews-page__sort-label {
font-family: var(--brb-font-body);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--brb-text-muted);
}
.sort-dropdown {
font-family: var(--brb-font-body);
font-size: 13px;
font-weight: 500;
color: var(--brb-text);
background: transparent;
border: 1px solid var(--brb-border-strong);
border-radius: 8px;
padding: 8px 32px 8px 14px;
cursor: pointer;
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='none' stroke='%231A1A1A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
transition: border-color 200ms var(--brb-ease);
}
.sort-dropdown:hover,
.sort-dropdown:focus {
border-color: var(--brb-text);
outline: none;
}
/* ---------------- Masonry grid (CSS columns) ---------------- */
.reviews-page__grid-section {
background: var(--brb-surface);
padding: clamp(24px, 4vw, 48px) 0 clamp(72px, 9vw, 120px);
}
.reviews-grid {
column-gap: clamp(16px, 2vw, 28px);
column-count: 1;
}
@media (min-width: 720px) {
.reviews-grid { column-count: 2; }
}
@media (min-width: 1100px) {
.reviews-grid { column-count: 3; }
}
/* ---------------- Review card ---------------- */
.review-card {
break-inside: avoid;
display: inline-block;
width: 100%;
margin: 0 0 clamp(16px, 2vw, 28px);
padding: 28px 28px 22px;
background: var(--brb-surface-raised);
border: 1px solid var(--brb-border);
border-radius: 12px;
position: relative;
opacity: 0;
transform: translateY(16px);
transition: opacity 700ms var(--brb-ease-entrance),
transform 700ms var(--brb-ease-entrance),
border-color 250ms var(--brb-ease),
box-shadow 250ms var(--brb-ease);
transition-delay: 0ms, 0ms, 0ms, 0ms;
}
.review-card.is-visible {
opacity: 1;
transform: translateY(0);
transition-delay: var(--reveal-delay, 0ms),
var(--reveal-delay, 0ms),
0ms,
0ms;
}
.review-card:hover {
transform: translateY(-2px);
border-color: rgba(217, 119, 6, 0.30);
box-shadow: 0 14px 32px -14px rgba(26, 26, 26, 0.12);
}
.review-card__stars {
color: var(--brb-accent);
font-size: 13px;
letter-spacing: 1.5px;
margin: 0 0 12px;
}
.review-card__quote {
font-family: var(--brb-font-display);
font-size: 16px;
line-height: 1.55;
color: var(--brb-text);
margin: 0 0 22px;
font-weight: 400;
letter-spacing: -0.005em;
}
.review-card__attribution-row {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
column-gap: 12px;
row-gap: 12px;
align-items: center;
padding-top: 16px;
border-top: 1px solid var(--brb-border);
}
.review-card__attribution-row .review-card__avatar { grid-row: 1; grid-column: 1; }
.review-card__attribution-row .review-card__attribution { grid-row: 1; grid-column: 2; }
.review-card__attribution-row .review-card__chips { grid-row: 2; grid-column: 1 / -1; }
.review-card__avatar {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
font-family: var(--brb-font-body);
font-size: 13px;
font-weight: 600;
letter-spacing: 0.04em;
flex-shrink: 0;
}
.review-card__avatar--amber {
background: var(--brb-accent);
color: var(--brb-anchor);
}
.review-card__avatar--mint {
background: var(--brb-mint);
color: var(--brb-anchor);
}
.review-card__avatar--anchor {
background: var(--brb-anchor);
color: var(--brb-text-on-dark);
}
.review-card__attribution {
min-width: 0;
}
.review-card__name {
font-family: var(--brb-font-display);
font-size: 15px;
font-weight: 400;
letter-spacing: -0.01em;
color: var(--brb-text);
line-height: 1.3;
margin: 0;
}
.review-card__meta {
font-family: var(--brb-font-body);
font-size: 12px;
color: var(--brb-text-muted);
margin: 4px 0 0;
line-height: 1.4;
letter-spacing: 0.01em;
}
.review-card__chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
/* ---------------- Chips (industry only) ----------------
Base outlined neutral treatment, then a soft slug-keyed accent
on the left edge for tasteful visual variety across the 3 buckets. */
.chip {
display: inline-flex;
align-items: center;
font-family: var(--brb-font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 999px;
line-height: 1.4;
border: 1px solid transparent;
}
.chip--industry {
background: transparent;
color: var(--brb-text-muted);
border-color: var(--brb-border-strong);
border-left-width: 3px;
padding-left: 12px;
}
.chip--industry-home-services {
border-left-color: var(--brb-accent);
}
.chip--industry-healthcare {
border-left-color: var(--brb-mint);
}
.chip--industry-local-business {
border-left-color: var(--brb-anchor);
}
/* ---------------- Final CTA (dark band) ---------------- */
.reviews-page__cta {
background: var(--brb-anchor);
color: var(--brb-text-on-dark);
padding: clamp(72px, 10vw, 128px) 0;
text-align: center;
position: relative;
overflow: hidden;
}
.reviews-page__cta::before {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(
circle at 50% 0%,
rgba(217, 119, 6, 0.10),
transparent 60%
);
pointer-events: none;
}
.reviews-page__cta-inner { position: relative; }
.reviews-page__cta-title {
font-family: var(--brb-font-display);
font-size: clamp(36px, 5vw, 60px);
line-height: 1.05;
letter-spacing: -0.025em;
font-weight: 400;
color: var(--brb-text-on-dark);
margin: 16px 0 20px;
}
.reviews-page__cta-title em {
font-style: italic;
color: var(--brb-accent);
}
.reviews-page__cta-body {
font-family: var(--brb-font-body);
font-size: clamp(15px, 1.3vw, 17px);
line-height: 1.65;
color: var(--brb-text-on-dark-muted);
max-width: 56ch;
margin: 0 auto 36px;
}
.reviews-page__cta-actions {
display: flex;
gap: 14px;
justify-content: center;
flex-wrap: wrap;
}
/* ---------------- Mobile tweaks ---------------- */
@media (max-width: 720px) {
.reviews-page__controls {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
.reviews-page__sort-group { align-self: flex-end; }
}
/* ============================================================
Hero stats — 3-stat counter row inside .wd-hero__content
Used on the trojan-horse trojan template (page-seo-san-luis-
obispo.php). Lives below .wd-hero__meta inside the hero's
left column. Lighter visual than .wd-proof.wd-proof--dark
(which is a section-level pattern). Animated countup wired
via the inline reveal script's animateCounter() function.
============================================================ */
.wd-hero__stats {
margin-top: clamp(28px, 4vw, 40px);
padding-top: clamp(20px, 2.5vw, 28px);
border-top: 1px solid var(--brb-border-on-dark);
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(16px, 3vw, 32px);
max-width: 560px;
}
.wd-hero__stats-item {
min-width: 0;
}
.wd-hero__stats-value {
margin: 0 0 4px 0;
font-family: var(--brb-font-display);
font-size: clamp(28px, 3.4vw, 40px);
line-height: 1;
color: var(--brb-accent);
font-weight: 400;
letter-spacing: -0.01em;
}
.wd-hero__stats-label {
margin: 0;
font-size: 12px;
line-height: 1.35;
color: rgba(250, 247, 242, 0.7);
letter-spacing: 0.01em;
}
@media (max-width: 600px) {
.wd-hero__stats {
grid-template-columns: 1fr;
gap: 16px;
max-width: none;
}
.wd-hero__stats-value { font-size: 28px; }
}
/* ============================================================
Google Business Profile card — hero right-column visual
Renders as Back Road Web Design's actual GBP knowledge-panel
shape: cover banner, business header (name + rating row +
category), action button row (Website / Directions / Call —
visual only, not interactive), info rows (hours, phone,
address, services), and one anonymous review excerpt.
Reveal pattern mirrors .loc-pack-card: opacity:0 + transform
default, gated by .is-visible on self OR .wd-hero__visual
ancestor (toggled by inline reveal script's setTimeout
handler).
Used on the trojan-horse template only. New pattern, no
sister-page reuse expected.
============================================================ */
.gbp-card {
background: #fff;
border-radius: 14px;
border: 1px solid rgba(26, 26, 26, 0.08);
overflow: hidden;
font-family: var(--brb-font-body);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
width: 100%;
max-width: 420px;
margin-left: auto;
opacity: 0;
transform: translateY(20px) scale(0.97);
transition: opacity 700ms var(--brb-ease), transform 700ms var(--brb-ease);
color: var(--brb-text);
}
.gbp-card.is-visible,
.wd-hero.is-visible .gbp-card,
.wd-hero__visual.is-visible .gbp-card {
opacity: 1;
transform: translateY(0) scale(1);
}
.gbp-card__bar {
background: rgba(26, 26, 26, 0.03);
padding: 10px 14px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
border-bottom: 1px solid rgba(26, 26, 26, 0.06);
}
.gbp-card__bar-logo {
font-weight: 600;
font-size: 13px;
letter-spacing: -0.01em;
color: var(--brb-text);
}
.gbp-card__bar-meta {
font-size: 11px;
color: var(--brb-text-muted);
letter-spacing: 0.02em;
text-transform: uppercase;
}
.gbp-card__cover {
height: 88px;
background:
linear-gradient(135deg, rgba(217, 119, 6, 0.18) 0%, rgba(138, 211, 192, 0.20) 100%),
radial-gradient(circle at 30% 70%, rgba(217, 119, 6, 0.25), transparent 55%),
radial-gradient(circle at 75% 30%, rgba(138, 211, 192, 0.30), transparent 50%);
border-bottom: 1px solid rgba(26, 26, 26, 0.06);
}
.gbp-card__body {
padding: 16px 18px 18px;
}
.gbp-card__header {
margin-bottom: 14px;
}
.gbp-card__name {
margin: 0 0 4px 0;
font-family: var(--brb-font-display);
font-size: 20px;
line-height: 1.2;
font-weight: 400;
letter-spacing: -0.01em;
color: var(--brb-text);
}
.gbp-card__rating-row {
margin: 0;
font-size: 13px;
line-height: 1.4;
color: var(--brb-text-muted);
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 4px;
}
.gbp-card__rating-num {
font-weight: 600;
color: var(--brb-text);
}
.gbp-card__stars {
color: var(--brb-accent);
letter-spacing: 1px;
font-size: 12px;
}
.gbp-card__review-count {
color: var(--brb-text-muted);
}
.gbp-card__category {
color: var(--brb-text-muted);
}
.gbp-card__actions {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 6px;
margin-bottom: 16px;
}
.gbp-card__action {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: 8px 4px;
border: 1px solid rgba(26, 26, 26, 0.10);
border-radius: 8px;
background: #fff;
font-size: 11px;
color: var(--brb-text);
}
.gbp-card__action-icon {
font-size: 16px;
line-height: 1;
color: var(--brb-accent);
}
.gbp-card__action-label {
letter-spacing: 0.01em;
font-weight: 500;
}
.gbp-card__info {
list-style: none;
margin: 0 0 14px 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.gbp-card__info-row {
display: flex;
align-items: flex-start;
gap: 10px;
font-size: 13px;
line-height: 1.4;
color: var(--brb-text);
}
.gbp-card__info-icon {
width: 16px;
flex: 0 0 16px;
text-align: center;
font-size: 12px;
color: var(--brb-text-muted);
line-height: 1.4;
}
.gbp-card__info-text {
color: var(--brb-text);
}
.gbp-card__info-text strong {
color: #1a8754;
font-weight: 600;
}
.gbp-card__review {
margin-top: 14px;
padding-top: 14px;
border-top: 1px solid rgba(26, 26, 26, 0.06);
}
.gbp-card__review-stars {
display: block;
color: var(--brb-accent);
letter-spacing: 1.5px;
font-size: 11px;
margin-bottom: 6px;
}
.gbp-card__review-quote {
margin: 0;
font-size: 12.5px;
line-height: 1.5;
color: var(--brb-text-muted);
font-style: italic;
}
@media (max-width: 960px) {
.gbp-card {
max-width: 480px;
margin-inline: auto;
}
}
/* ============================================================
.wd-principles --3up modifier + supporting blocks for B.3
Section 02 (trojan-horse template counter-position cards).
The base .wd-principles pattern uses repeat(4, 1fr) at desktop;
the --3up modifier overrides to repeat(3, 1fr) for the 3-card
"Why most small business SEO underperforms" failure-mode grid.
Plus __intro / __close paragraph blocks and __stats spacing
for the in-section cost-range stat row.
============================================================ */
.wd-principles--3up .wd-principles__grid {
grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) {
.wd-principles--3up .wd-principles__grid {
grid-template-columns: 1fr;
}
}
.wd-principles__head:has(.wd-principles__intro) {
max-width: 760px;
}
.wd-principles__intro {
margin: 24px 0 0 0;
font-size: 17px;
line-height: 1.6;
color: var(--brb-text-muted);
text-align: left;
}
.wd-principles__stats {
margin-top: clamp(40px, 5vw, 64px);
max-width: 900px;
margin-inline: auto;
}
.wd-principles__close {
max-width: 760px;
margin: clamp(32px, 4vw, 48px) auto 0;
font-size: 17px;
line-height: 1.6;
color: var(--brb-text);
text-align: left;
}
/* ============================================================
.wd-platforms --5up modifier for B.3 Section 03 (trojan-horse
template service cards). Base .wd-platforms__grid is 2-up at
desktop, 1-up at ≤640px (line 9507). 5 cards in 2-up produces
2/2/1; the 5th card (Link building) spans full-row width via
:last-child override for visual emphasis on the section's
closing service category. Mobile reverts to 1-up natural.
============================================================ */
.wd-platforms--5up .wd-platforms__grid > :last-child {
grid-column: 1 / -1;
}
@media (max-width: 640px) {
.wd-platforms--5up .wd-platforms__grid > :last-child {
grid-column: auto;
}
}
/* ============================================================
.industry-cards / .industry-card — compact 2x2 grid pattern
for B.3 Section 04 (trojan-horse template). Purpose-built
variant of the industry-vertical card concept; intentionally
distinct from /industries/ page's full-bleed alternating
.industry-block pattern (which lives at ~viewport-tall scale).
This compact pattern fits 4 industry cards into a single
landing-page section (2x2 at desktop, 1-up at ≤760px) with
body + internal link per card. No clients list, no service
chips, no industry vignette — those live on the deeper
/industries/ destination page. The ◭ / ✚ / ❀ / ✱ glyph set
anchors visual differentiation per industry without a heavy
visual right-column.
Voice precedents preserved in card bodies:
· real estate SLO scope-out parenthetical
· "3,500+ leads delivered" only in real estate card
· "direct wine sales and club memberships" in winery card
============================================================ */
.industry-cards {
padding: var(--brb-section-pad) 0;
background: var(--brb-surface);
border-top: 1px solid var(--brb-border);
}
.industry-cards__head {
max-width: 760px;
margin: 0 auto clamp(40px, 5vw, 64px);
text-align: center;
}
.industry-cards__head .eyebrow {
margin-bottom: 16px;
display: inline-block;
}
.industry-cards__title {
font-family: var(--brb-font-display);
font-size: clamp(36px, 4.5vw, 56px);
line-height: 1.1;
letter-spacing: -0.03em;
font-weight: 400;
color: var(--brb-text);
margin: 0;
}
.industry-cards__title em {
font-style: italic;
color: var(--brb-accent);
}
.industry-cards__sub {
margin: 24px 0 0 0;
font-size: 17px;
line-height: 1.6;
color: var(--brb-text-muted);
text-align: left;
}
.industry-cards__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(20px, 2.5vw, 32px);
max-width: 1100px;
margin: 0 auto;
}
@media (max-width: 760px) {
.industry-cards__grid { grid-template-columns: 1fr; }
}
.industry-card {
background: #fff;
border: 1px solid var(--brb-border);
border-radius: 12px;
padding: 32px 28px;
display: flex;
flex-direction: column;
gap: 14px;
transition: transform 300ms var(--brb-ease),
box-shadow 300ms var(--brb-ease),
border-color 300ms var(--brb-ease);
}
.industry-card:hover {
transform: translateY(-4px);
box-shadow: 0 20px 40px -15px rgba(26, 26, 26, 0.1);
border-color: rgba(217, 119, 6, 0.3);
}
.industry-card__icon {
font-size: 28px;
color: var(--brb-accent);
line-height: 1;
font-family: var(--brb-font-display);
}
.industry-card__title {
font-family: var(--brb-font-display);
font-size: 22px;
font-weight: 400;
color: var(--brb-text);
line-height: 1.25;
letter-spacing: -0.01em;
margin: 0;
}
.industry-card__body {
font-size: 15px;
line-height: 1.65;
color: var(--brb-text-muted);
margin: 0;
flex: 1;
}
.industry-card__link {
margin-top: 8px;
font-size: 14px;
font-weight: 500;
color: var(--brb-accent);
text-decoration: none;
transition: color 200ms var(--brb-ease);
align-self: flex-start;
}
.industry-card__link:hover {
color: var(--brb-text);
}
/* ============================================================
.compare-table — 4-column comparison matrix for B.3 Section
05 (trojan-horse template counter-positioning section).
Compares Generic agencies / Cheap freelancers / All-in-one
tools / My approach across 6 decision dimensions. The "My
approach" column gets accent border + subtle bg tint + textual
★ Recommended indicator (NOT color-only — WCAG 1.4.1 compliant
with the textual label as primary differentiator).
Mobile responsive: at ≤900px the table reflows to stacked-
cards pattern. Each dimension becomes a card containing all
4 options with their column names rendered as data-label
pseudo-prefixes. Preserves accessibility — screen readers
navigate cards correctly via the dimension
acting as card heading, with each | labeled by its
data-label.
============================================================ */
.compare-table-wrapper {
margin: clamp(48px, 6vw, 72px) auto 0;
max-width: 1200px;
overflow-x: auto;
}
.compare-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-family: var(--brb-font-body);
font-size: 14px;
line-height: 1.5;
}
.compare-table thead th {
padding: 16px 14px;
text-align: left;
vertical-align: bottom;
font-family: var(--brb-font-display);
font-weight: 400;
font-size: 15px;
color: var(--brb-text);
border-bottom: 1px solid var(--brb-border);
background: transparent;
}
.compare-table__dimension-head {
width: 22%;
}
.compare-table__col {
width: 19.5%;
color: var(--brb-text-muted);
}
.compare-table__col--mine {
color: var(--brb-text);
background: rgba(217, 119, 6, 0.06);
border-top: 2px solid var(--brb-accent);
border-left: 1px solid var(--brb-border);
border-right: 1px solid var(--brb-border);
position: relative;
}
.compare-table__col-name {
display: block;
font-weight: 500;
}
.compare-table__recommended {
display: block;
margin-top: 4px;
font-family: var(--brb-font-body);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--brb-accent);
}
.compare-table tbody th {
padding: 18px 14px;
text-align: left;
vertical-align: top;
font-family: var(--brb-font-display);
font-weight: 400;
font-size: 15px;
color: var(--brb-text);
background: rgba(26, 26, 26, 0.02);
border-bottom: 1px solid var(--brb-border);
}
.compare-table tbody td {
padding: 18px 14px;
vertical-align: top;
color: var(--brb-text-muted);
border-bottom: 1px solid var(--brb-border);
}
.compare-table__cell--mine {
color: var(--brb-text);
background: rgba(217, 119, 6, 0.06);
font-weight: 500;
border-left: 1px solid var(--brb-border);
border-right: 1px solid var(--brb-border);
}
.compare-table tbody tr:last-child .compare-table__cell--mine {
border-bottom: 2px solid var(--brb-accent);
}
/* B.4 — compare-table extensions for industry-service template:
column subhead, cell value+note pairing, section header + sources
footer, plus the section wrapper. Layered on the B.3 base above. */
.compare-table-section {
padding: clamp(64px, 9vw, 120px) 0;
background: var(--brb-surface);
}
.compare-table__head {
max-width: 760px;
margin: 0 auto clamp(40px, 6vw, 64px);
text-align: center;
}
.compare-table__title {
font-family: var(--brb-display);
font-size: clamp(32px, 4.4vw, 52px);
line-height: 1.08;
letter-spacing: -0.01em;
color: var(--brb-anchor);
margin: 0.3em 0 0.5em;
}
.compare-table__title em {
font-style: italic;
color: var(--brb-accent);
}
.compare-table__sub {
font-size: clamp(16px, 1.4vw, 18px);
line-height: 1.55;
color: var(--brb-anchor-soft, #4a4a4a);
margin: 0;
}
.compare-table__col-subhead {
display: block;
font-size: 12px;
font-weight: 400;
letter-spacing: 0.04em;
color: var(--brb-anchor-soft, #6a6a6a);
margin-top: 4px;
text-transform: none;
}
.compare-table__cell-value {
display: block;
font-weight: 600;
color: var(--brb-anchor);
}
.compare-table__cell-note {
display: block;
font-size: 12px;
line-height: 1.4;
color: var(--brb-anchor-soft, #6a6a6a);
margin-top: 4px;
}
.compare-table__sources {
max-width: 880px;
margin: clamp(20px, 3vw, 32px) auto 0;
font-size: 13px;
line-height: 1.55;
color: var(--brb-anchor-soft, #6a6a6a);
text-align: center;
font-style: italic;
}
@media (max-width: 900px) {
.compare-table thead { display: none; }
.compare-table,
.compare-table tbody,
.compare-table tr,
.compare-table th,
.compare-table td {
display: block;
width: 100%;
}
.compare-table tbody tr {
border: 1px solid var(--brb-border);
border-radius: 12px;
margin-bottom: 16px;
padding: 20px;
background: #fff;
}
.compare-table tbody th[scope="row"] {
margin: 0 0 12px 0;
padding: 0;
border-bottom: 1px solid var(--brb-border);
padding-bottom: 12px;
background: transparent;
font-size: 17px;
}
.compare-table tbody td {
padding: 10px 0;
border-bottom: 1px solid var(--brb-border);
border-left: 0;
border-right: 0;
background: transparent;
color: var(--brb-text);
}
.compare-table tbody td:last-child {
border-bottom: 0;
}
.compare-table tbody td::before {
content: attr(data-label);
display: block;
font-family: var(--brb-font-body);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--brb-text-muted);
margin-bottom: 4px;
}
.compare-table tbody td.compare-table__cell--mine {
background: rgba(217, 119, 6, 0.06);
border-radius: 8px;
padding: 12px;
margin: 6px 0;
}
.compare-table tbody td.compare-table__cell--mine::before {
color: var(--brb-accent);
content: attr(data-label) " ★ Recommended";
}
}
/* ============================================================
.compare-principles__grid — 3-card grid for B.3 Section 05
(counter-positioning principle reinforcement). Reuses .principle
card chrome unchanged; just provides the 3-up grid wrapper
without the .wd-principles section padding (Section 05 already
has its own .wd-philosophy padding).
============================================================ */
.compare-principles__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(16px, 2vw, 28px);
max-width: 1200px;
margin: clamp(48px, 6vw, 72px) auto 0;
}
@media (max-width: 900px) {
.compare-principles__grid { grid-template-columns: 1fr; }
}
/* ============================================================
.pricing-section / .pricing-tier — single-tier pricing card
for B.3 Section 06 (trojan-horse template). Strategy thread
scope-changed from G1 catalog's 3-tier pattern to a single
unified tier reflecting FAQ Q5/Q6 source-of-truth (SEO + Local
SEO bundled at $750-$1,500/mo). Single-tier means no
"featured tier" emphasis logic needed; accent treatment
applies uniformly.
Layout: centered head + single tier card + "Other engagements"
sub-block + closing transition. Card has icon, heading, large
price display, range subtitle, included-items bullet list.
============================================================ */
.pricing-section {
padding: var(--brb-section-pad) 0;
background: var(--brb-surface);
border-top: 1px solid var(--brb-border);
}
.pricing-section__head {
max-width: 760px;
margin: 0 auto clamp(40px, 5vw, 64px);
text-align: center;
}
.pricing-section__head .eyebrow {
margin-bottom: 16px;
display: inline-block;
}
.pricing-section__title {
font-family: var(--brb-font-display);
font-size: clamp(36px, 4.5vw, 56px);
line-height: 1.1;
letter-spacing: -0.03em;
font-weight: 400;
color: var(--brb-text);
margin: 0;
}
.pricing-section__title em {
font-style: italic;
color: var(--brb-accent);
}
.pricing-section__sub {
margin: 24px 0 0 0;
font-size: 17px;
line-height: 1.6;
color: var(--brb-text-muted);
text-align: left;
}
.pricing-tier {
background: #fff;
border: 2px solid var(--brb-accent);
border-radius: 16px;
padding: clamp(36px, 4.5vw, 56px) clamp(28px, 4vw, 48px);
max-width: 720px;
margin: 0 auto;
box-shadow: 0 16px 48px -20px rgba(217, 119, 6, 0.18);
}
.pricing-tier__icon {
font-size: 36px;
color: var(--brb-accent);
line-height: 1;
font-family: var(--brb-font-display);
margin-bottom: 16px;
}
.pricing-tier__heading {
font-family: var(--brb-font-display);
font-size: 26px;
line-height: 1.2;
letter-spacing: -0.01em;
font-weight: 400;
color: var(--brb-text);
margin: 0 0 12px 0;
}
.pricing-tier__price {
font-family: var(--brb-font-display);
font-size: clamp(40px, 5vw, 56px);
line-height: 1;
letter-spacing: -0.02em;
font-weight: 400;
color: var(--brb-accent);
margin: 0 0 8px 0;
}
.pricing-tier__price-suffix {
font-size: 0.45em;
color: var(--brb-text-muted);
font-family: var(--brb-font-body);
font-weight: 400;
margin-left: 4px;
letter-spacing: 0;
}
.pricing-tier__range-sub {
margin: 0 0 28px 0;
font-size: 14px;
line-height: 1.5;
color: var(--brb-text-muted);
}
.pricing-tier__list-label {
font-family: var(--brb-font-body);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--brb-text-muted);
margin: 0 0 14px 0;
padding-top: 24px;
border-top: 1px solid var(--brb-border);
}
.pricing-tier__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.pricing-tier__list li {
font-size: 15px;
line-height: 1.6;
color: var(--brb-text);
padding-left: 22px;
position: relative;
}
.pricing-tier__list li::before {
content: "✓";
position: absolute;
left: 0;
top: 1px;
color: var(--brb-accent);
font-weight: 600;
}
.pricing-tier__list li strong {
color: var(--brb-text);
font-weight: 600;
}
.pricing-other {
max-width: 720px;
margin: clamp(40px, 5vw, 64px) auto 0;
text-align: left;
}
.pricing-other__heading {
font-family: var(--brb-font-display);
font-size: 20px;
line-height: 1.2;
letter-spacing: -0.01em;
font-weight: 400;
color: var(--brb-text);
margin: 0 0 12px 0;
}
.pricing-other__body {
margin: 0;
font-size: 15px;
line-height: 1.65;
color: var(--brb-text-muted);
}
/* ============================================================
.process-step glyph + step number stacking — for B.3 Section
07 (trojan-horse template process flow). Existing
.process-step pattern (line 1746+, used on page-audit.php)
renders __num as a single big numeral. Trojan template wants
BOTH a glyph (visual identifier ◇/◎/▲/⚡) AND the ordinal
number (01-04), stacked inside the __num slot.
Plus .process__sub paragraph block for the section's lead
paragraph (existing .process__head accommodates eyebrow + H2;
adding .process__sub for the body intro paragraph) and
.process__close for the closing transition into Section 08.
These selectors only fire when the corresponding markup
is present on this template; existing page-audit.php usage
unaffected.
============================================================ */
.process-step__num .process-step__glyph {
display: block;
font-size: 1em;
color: var(--brb-accent);
line-height: 1;
}
.process-step__num .process-step__step {
display: block;
margin-top: 6px;
font-family: var(--brb-font-body);
font-size: 0.32em;
font-weight: 600;
letter-spacing: 0.08em;
color: var(--brb-text-on-dark-muted);
}
.process__sub {
margin: 16px 0 0 0;
font-size: 17px;
line-height: 1.6;
color: var(--brb-text-on-dark-muted);
max-width: 70ch;
}
.process__close {
max-width: 760px;
margin: clamp(40px, 5vw, 64px) auto 0;
font-size: 17px;
line-height: 1.6;
color: var(--brb-text-on-dark-muted);
text-align: center;
}
/* ============================================================
B.3 trojan-horse — standalone FAQ section spacing
On /faqs the .faq-section sits inside .faq-main which provides
top/bottom padding. On the trojan template (body.brb-seo-trojan)
.faq-section is rendered standalone — needs section-rhythm
padding matching sister sections (.process etc.) so the H2
isn't flush against the section above.
============================================================ */
body.brb-seo-trojan .faq-section {
padding: clamp(80px, 11vw, 160px) 0;
margin-bottom: 0;
}
/* B.4 follow-up — match industry-service template section rhythm so FAQ
heading isn't flush against the proof strip above. Same scope pattern
as .brb-seo-trojan above; uses --brb-section-pad token (clamp 72-120px)
so adjacent sections (.wd-proof, .wd-final, .wd-philosophy, .wd-platforms,
.wd-principles, .industry-cards) all share rhythm. clamp() handles
responsive scaling — no separate mobile breakpoint needed. */
body.brb-industry-service .faq-section {
padding: var(--brb-section-pad) 0;
margin-bottom: 0;
}
/* =============================================================================
B.5.1 — Paid Advertising deepening (v1.39.21)
Styles for: sticky sub-nav, "What the data shows" stat blocks, channel
compare table, pricing transparency cards, audience-by-use-case grid,
industries linking strip, FAQ accordion, proof source citation.
Scoped under .brb-paid where appropriate to avoid collision with B.4
industry-service template patterns.
========================================================================== */
/* --- Fixed sub-nav (desktop only) — REMOVED 2026-07-30 ---
.brb-subnav / .brb-subnav__inner / .brb-subnav__link / .brb-subnav__cta
deleted. The site header became genuinely sticky in release 20260730.1
(overflow-x: clip in place of overflow-x: hidden on html/body — see the
scroll-padding-top comment near the top of this file), so the second
fixed bar every B.5-family template stacked underneath it was
redundant. Every consuming template (.brb-paid, .brb-analytics,
.brb-seo, .brb-geo, .brb-maintenance, .brb-industries, the two
nav_overlay page-location-service.php instances, plus .brb-web-design
in the prior release) had its |