/* ==========================================================================
Full Contact SEO - AEO Theme
Component stylesheet
========================================================================== */
/* --------------------------------------------------------------------------
1. Brand tokens (CSS custom properties)
Override per-site by setting FCS_BRAND_* constants in wp-config.php.
functions.php injects an inline :root override block in .
-------------------------------------------------------------------------- */
:root {
--brand-primary: #0a1e3f;
--brand-accent: #c9a94a;
--brand-dark: #12222a;
--brand-text: #222;
--brand-bg: #fafafa;
--brand-white: #ffffff;
--font-serif: "Antic Slab", Georgia, serif;
--font-sans: Arial, Helvetica, sans-serif;
--max-width: 84%;
/* alpha14.2: per-site override hook for CTA link color.
Defaults to brand-accent — passes AA contrast on all current
portfolio palettes (gold-on-dark-red, gold-on-navy, red-on-navy
at the .cta's 24px large-text threshold). Per-site override:
:root { --cta-link-color: var(--brand-white); } */
--cta-link-color: var(--brand-accent);
}
/* --------------------------------------------------------------------------
2. Reset + base
-------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
font-family: var(--font-serif);
line-height: 1.4 !important;
color: var(--brand-text);
background: var(--brand-bg);
font-size: 18px !important;
margin: 0;
padding: 0;
}
img { max-width: 100%; height: auto; display: block; }
a {
color: var(--brand-primary);
text-decoration: underline;
}
a:hover { color: var(--brand-accent); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-serif); }
h2 {
color: var(--brand-primary);
border-bottom: 3px solid var(--brand-accent);
padding-bottom: .4rem;
margin-top: 2.5rem;
}
h3 {
color: var(--brand-primary);
margin-top: 1.8rem;
}
h3.underline {
color: var(--brand-primary);
border-bottom: 3px solid var(--brand-accent);
padding-bottom: .4rem;
margin-top: 2.5rem;
font-size: 24px;
}
/* AEO geo-section helper: hide the "Where can you find us?" wrapper question
* when used in a context that doesn't need the spoken/visible question (e.g.,
* a footer "Service Areas" cluster vs the homepage hero-band geo accordion). */
.geo-where-question { display: none; }
ol li, ul li { margin-bottom: .8rem; }
/* --------------------------------------------------------------------------
3. Layout container
-------------------------------------------------------------------------- */
.fcs-container {
/* alpha14.2: percentage-based max-width (84% = 8% margin each side).
Replaces the legacy 1025px fixed pixel which created a "dual sidebar"
feel on modern monitors (1920px viewport = ~23% white space each side).
Now controlled by --max-width custom property (line 20) so per-site
overrides can tune via :root variable. */
max-width: var(--max-width);
margin: 0 auto;
padding: 2rem 0;
}
/* --------------------------------------------------------------------------
4. Site header + nav
-------------------------------------------------------------------------- */
.site-header {
background: var(--brand-white);
border-bottom: 1px solid #e5e5e5;
padding: 0;
position: relative;
}
.site-header-inner {
/* Full-bleed: logo hugs left edge, nav hugs right edge.
Viewport padding keeps them off the glass. Body content below
still constrained by --max-width via .fcs-container. */
max-width: none;
margin: 0;
padding: 1rem 2rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
@media screen and (max-width: 768px) {
.site-header-inner { padding: .75rem 1.25rem; }
}
.site-logo img,
.site-logo .custom-logo { max-height: 60px; width: auto; display: block; }
.site-logo a,
.site-logo .custom-logo-link {
display: inline-block;
color: var(--brand-primary);
text-decoration: none;
font-weight: bold;
font-size: 1.4rem;
}
/* ============================================================
* Primary nav — desktop
* Ported from Joe's prior Bootstrap-era theme (proven pattern,
* sub-0.87s load, no CDN). Pure CSS :hover + :focus-within
* dropdowns, visibility+opacity transition, CSS-drawn caret,
* current-page highlight. No JS dependency.
* ============================================================ */
.primary-nav ul {
list-style: none;
margin: 0;
padding: 0;
}
/* Top-level: centered horizontal flow via inline-block */
.primary-nav > ul,
.primary-nav > div > ul {
text-align: center;
position: relative;
}
.primary-nav > ul > li,
.primary-nav > div > ul > li {
display: inline-block;
vertical-align: top;
padding: 10px 0;
position: relative;
}
.primary-nav > ul > li > a,
.primary-nav > div > ul > li > a {
display: block;
font-size: 18px;
color: var(--brand-primary);
text-transform: none;
position: relative;
line-height: 30px;
padding: 0 24px;
letter-spacing: 0.02em;
font-weight: 700;
text-decoration: none;
transition: color 0.2s ease;
}
.primary-nav > ul > li:hover > a,
.primary-nav > ul > li:focus-within > a,
.primary-nav > div > ul > li:hover > a,
.primary-nav > div > ul > li:focus-within > a {
color: var(--brand-accent);
}
/* CSS-drawn caret on parent items (WP auto-adds .menu-item-has-children) */
.primary-nav > ul > li.menu-item-has-children > a::after,
.primary-nav > div > ul > li.menu-item-has-children > a::after {
content: '';
display: inline-block;
width: 0;
height: 0;
margin-left: 0.4em;
vertical-align: middle;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 6px solid currentColor;
opacity: 0.6;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.primary-nav > ul > li.menu-item-has-children:hover > a::after,
.primary-nav > ul > li.menu-item-has-children:focus-within > a::after,
.primary-nav > div > ul > li.menu-item-has-children:hover > a::after,
.primary-nav > div > ul > li.menu-item-has-children:focus-within > a::after {
opacity: 1;
transform: rotate(-180deg);
}
/* Current-page accent */
.primary-nav > ul > li.current-menu-item > a,
.primary-nav > ul > li.current-menu-ancestor > a,
.primary-nav > ul > li.current-menu-parent > a,
.primary-nav > div > ul > li.current-menu-item > a,
.primary-nav > div > ul > li.current-menu-ancestor > a,
.primary-nav > div > ul > li.current-menu-parent > a {
color: var(--brand-accent);
}
/* Hamburger button - hidden on desktop, shown on mobile via @media block */
.fcs-menu-toggle {
display: none;
background: transparent;
border: 0;
padding: 10px;
cursor: pointer;
width: 44px;
height: 44px;
position: relative;
margin-left: auto;
-webkit-tap-highlight-color: transparent;
}
.fcs-menu-toggle-bar {
display: block;
width: 24px;
height: 3px;
background: var(--brand-primary);
margin: 5px auto;
border-radius: 2px;
transition: transform .25s ease, opacity .2s ease;
}
.fcs-menu-toggle[aria-expanded="true"] .fcs-menu-toggle-bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.fcs-menu-toggle[aria-expanded="true"] .fcs-menu-toggle-bar:nth-child(2) {
opacity: 0;
}
.fcs-menu-toggle[aria-expanded="true"] .fcs-menu-toggle-bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
/* --------------------------------------------------------------------------
5. Sub-menu — desktop hover dropdown
Ported directly from Joe's prior Bootstrap-era theme. Pure CSS hover
+ :focus-within keyboard accessibility. Visibility + opacity transition
gives a natural ~200ms mouseout forgiveness window (no JS delay needed).
Single-column dropdown, 250px wide, 3px accent border, hover-shift
padding on sub-items. Degrades gracefully with JS disabled.
-------------------------------------------------------------------------- */
@media screen and (min-width: 769px) {
.primary-nav li {
position: relative;
}
.primary-nav .sub-menu {
list-style: none;
display: block;
width: 250px;
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
background: var(--brand-white);
border: 3px solid var(--brand-accent);
padding: 10px;
margin: 0;
text-align: left;
visibility: hidden;
opacity: 0;
transition: visibility 0s linear 0.2s, opacity 0.2s ease;
}
.primary-nav li:hover > .sub-menu,
.primary-nav li:focus-within > .sub-menu {
visibility: visible;
opacity: 1;
transition: visibility 0s linear 0s, opacity 0.2s ease;
}
.primary-nav .sub-menu > li {
display: block;
padding: 0;
margin: 0;
border-bottom: 1px solid #e1e1e1;
}
.primary-nav .sub-menu > li:last-child {
border-bottom: none;
}
.primary-nav .sub-menu > li > a {
font-size: 16px;
display: block;
padding: 0 5px;
line-height: 35px;
color: var(--brand-primary);
text-transform: none;
letter-spacing: normal;
font-weight: 500;
text-decoration: none;
transition: background 0.2s ease, padding-left 0.2s ease, color 0.2s ease;
}
.primary-nav .sub-menu > li:hover > a,
.primary-nav .sub-menu > li:focus-within > a {
background: #f5f5f5;
padding-left: 7px;
color: var(--brand-accent);
}
.multi-column-list {
column-count: 2;
column-gap: 20px;
list-style-position: inside;
}
}
/* --------------------------------------------------------------------------
5b. Mega Menu — auto-applies to any top-level item with >10 children
PHP filter in inc/mega-menu.php tags the parent li with `.has-mega-menu`
and `.mega-menu-cols-N` based on child count + columns setting.
No menu admin work required.
Replicates the Avada fusion-megamenu effect natively in FCS theme.
-------------------------------------------------------------------------- */
@media screen and (min-width: 769px) {
.primary-nav .has-mega-menu {
position: static;
}
.primary-nav .has-mega-menu > .sub-menu {
position: fixed !important;
left: 0 !important;
right: 0 !important;
margin: 0 auto !important;
transform: none !important;
top: 80px !important;
width: calc(100vw - 40px);
max-width: 1400px;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 0;
padding: 10px !important;
background: var(--brand-white);
border: 3px solid var(--brand-accent);
box-sizing: border-box;
}
.primary-nav .mega-menu-cols-3 > .sub-menu { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.primary-nav .mega-menu-cols-4 > .sub-menu { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.primary-nav .mega-menu-cols-5 > .sub-menu { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.primary-nav .mega-menu-cols-6 > .sub-menu { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.primary-nav .has-mega-menu > .sub-menu > li {
display: block;
padding: 0;
margin: 0;
border-bottom: 1px solid #e1e1e1;
border-right: 1px solid #e1e1e1;
}
.primary-nav .has-mega-menu.mega-menu-cols-5 > .sub-menu > li:nth-child(5n) { border-right: none; }
.primary-nav .has-mega-menu.mega-menu-cols-4 > .sub-menu > li:nth-child(4n) { border-right: none; }
.primary-nav .has-mega-menu.mega-menu-cols-3 > .sub-menu > li:nth-child(3n) { border-right: none; }
.primary-nav .has-mega-menu.mega-menu-cols-6 > .sub-menu > li:nth-child(6n) { border-right: none; }
.primary-nav .has-mega-menu > .sub-menu > li > a {
display: block;
padding: 4px 12px !important;
font-size: 13px !important;
line-height: 1.4 !important;
color: var(--brand-primary) !important;
letter-spacing: 0.02em !important;
font-weight: 500 !important;
text-decoration: none;
text-transform: none;
white-space: normal;
transition: color 0.2s ease;
}
.primary-nav .has-mega-menu > .sub-menu > li:hover > a,
.primary-nav .has-mega-menu > .sub-menu > li:focus-within > a {
background: #f5f5f5;
color: var(--brand-accent);
}
}
@media (max-width: 768px) {
.primary-nav .has-mega-menu > .sub-menu {
display: block;
width: auto;
grid-template-columns: none;
}
}
/* --------------------------------------------------------------------------
5b-2. Global CTA Button — .ctaclick canonical pattern (desktop + mobile)
Joe's portfolio-wide CTA class. Used in template-parts/mobile-cta.php,
front-page CTA bands, service-page CTA bands, AND inherited by
[fcs_area_grid] below. Single source of truth — change ONCE, every
portfolio site that uses this theme inherits.
The earlier .ctaclick rule deeper in this file (under @media 768) ONLY
adjusts padding/margins for narrow viewports. This block defines the
actual look: brand-dark bg, white text, uppercase, no border, no
underline.
-------------------------------------------------------------------------- */
.ctaclick {
display: inline-block;
background-color: var(--brand-dark);
color: var(--brand-white);
padding: 20px 40px;
border: none;
text-align: center;
text-decoration: none;
text-transform: uppercase;
font-size: 18px;
font-weight: 500;
line-height: 1.25;
letter-spacing: 0.02em;
margin: 10px 5px;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
}
.ctaclick:hover,
.ctaclick:focus,
.ctaclick:active {
background-color: var(--brand-accent);
color: var(--brand-primary);
text-decoration: none;
}
/* --------------------------------------------------------------------------
5c. Area Grid — N-col grid of CTA-styled neighborhood / service-area buttons
Layout only. Buttons themselves use the global .ctaclick pattern so a single
ctaclick change propagates to the grid. Cols: 3-8 supported, defaults to 5.
Collapses to 2-col under 768 (single FCS breakpoint).
-------------------------------------------------------------------------- */
.fcs-area-grid-section {
max-width: 1400px;
margin: 0 auto;
padding: 40px 20px;
}
.fcs-area-grid-heading {
text-align: center;
margin: 0 0 30px 0;
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--brand-primary);
}
.fcs-area-grid {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 8px;
}
.fcs-area-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fcs-area-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fcs-area-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.fcs-area-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.fcs-area-grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.fcs-area-grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
/* Grid-context overrides on .ctaclick: kill width:100% + native margins so each
* cell fills its grid track cleanly. Inherit bg / color / font / padding from
* the global .ctaclick rule. */
.fcs-area-grid .fcs-area-grid-btn.ctaclick {
width: auto;
margin: 0;
padding: 18px 12px;
font-size: 15px;
line-height: 1.25;
text-transform: uppercase;
letter-spacing: 0.02em;
box-sizing: border-box;
}
.fcs-area-grid .fcs-area-grid-btn.ctaclick:hover,
.fcs-area-grid .fcs-area-grid-btn.ctaclick:focus {
background-color: var(--brand-accent);
color: var(--brand-primary);
}
@media (max-width: 768px) {
.fcs-area-grid,
.fcs-area-grid-cols-3,
.fcs-area-grid-cols-4,
.fcs-area-grid-cols-5,
.fcs-area-grid-cols-6,
.fcs-area-grid-cols-7,
.fcs-area-grid-cols-8 {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 4px;
}
.fcs-area-grid .fcs-area-grid-btn.ctaclick {
padding: 12px 6px;
font-size: 12px;
line-height: 1.2;
letter-spacing: 0.01em;
}
}
/* --------------------------------------------------------------------------
6a. Home hero — ![]()
tag pattern (alpha14.11 — reverted from alpha14.8 bg-image)
Image rendered as ![]()
tag inside .home-hero, sized fluidly to viewport width
with natural aspect ratio. Composition heros (legal cluster — text + badges
baked into the image) display in full. Mobile renders the full image scaled
down rather than cover-cropped. No fixed container height — .home-hero
auto-sizes to the img content.
Render path: front-page.php / page-service.php / section-hero.php emit
Per-site hero height overrides should NOT use --fcs-hero-height anymore —
that variable is deprecated. Per-site customization for atmospheric-only
sites (where cropping is intentional) belongs in that site's Custom CSS.
-------------------------------------------------------------------------- */
.home-hero {
width: 100%;
padding: 0;
margin: 0;
text-align: center;
background: var(--brand-bg);
}
.home-hero img,
.home-hero .hero-img {
max-width: 100%;
height: auto;
display: inline-block;
margin: 0 auto;
vertical-align: middle;
}
/* --------------------------------------------------------------------------
6b. Sub-hero band (homepage only)
Dark band below hero with white centered H1/H2/H3.
-------------------------------------------------------------------------- */
.sub-hero-band {
background: var(--brand-primary);
color: var(--brand-white);
padding: 1rem 1rem;
text-align: center;
}
/* --------------------------------------------------------------------------
7. .smallTitle - white centered overlay titles
Sizes match Joe's canonical per-site Custom CSS (rolled into theme alpha14.8).
-------------------------------------------------------------------------- */
h1.smallTitle {
font-size: 34px !important;
margin-bottom: 5px !important;
margin-left: 8%;
margin-right: 8%;
color: var(--brand-white) !important;
text-align: center !important;
margin-top: 5px !important;
}
h2.smallTitle {
font-size: 24px !important;
border-bottom: none !important;
padding-bottom: 0px !important;
margin-top: 0px !important;
margin-bottom: 0px !important;
margin-left: 8%;
margin-right: 8%;
color: var(--brand-white) !important;
text-align: center !important;
}
h3.smallTitle {
font-size: 16px !important;
margin-top: 0px !important;
margin-bottom: 5px !important;
margin-left: 8%;
margin-right: 8%;
color: var(--brand-white) !important;
text-align: center !important;
}
/* --------------------------------------------------------------------------
8. Component classes - intro callout, CTA band, FAQ, listicle
From rhode-island-arson-lawyer-preview.html.
-------------------------------------------------------------------------- */
.intro {
background: var(--brand-white);
border-left: 6px solid var(--brand-accent);
padding: 1.2rem 1.5rem;
font-size: 1.08rem;
margin-bottom: 2rem;
}
.cta {
/* alpha14.2: in-content CTA box. Author writes ...
directly in the page editor (Gutenberg Custom HTML block, Classic
editor, or Fusion Builder text element). Theme provides the style
hook only — placement, copy, and links are author-controlled.
Sits inside .fcs-container at 84% width, no full-bleed breakout
(full-bleed felt orphaned next to the constrained sub-hero band
on per-site CSS-tuned pages). Per-site overrides via child theme
custom.css. */
background: var(--brand-primary);
color: var(--brand-white);
padding: 1.8rem;
text-align: center;
margin: 2.5rem 0;
border-radius: 4px;
font-size: 24px;
}
.cta a {
/* alpha14.2: link color now driven by --cta-link-color custom property
(defined in :root, defaults to var(--brand-accent)). Passes AA
contrast on all current portfolio palettes at the .cta's hardcoded
24px (large-text WCAG threshold). Per-site overrides via child theme
custom.css: :root { --cta-link-color: var(--brand-white); } */
color: var(--cta-link-color);
font-weight: bold;
text-decoration: underline;
text-underline-offset: 3px;
}
.cta a:hover,
.cta a:focus {
color: var(--brand-accent);
text-decoration: none;
}
/* ============================================================
* FAQ accordion (v1.4.0)
* Native / accordion. All content stays in DOM
* so Google + AI answer engines see every FAQ regardless of open
* or closed state. Zero JS.
* ============================================================ */
.faq {
background: var(--brand-white);
margin-bottom: 0.75rem;
border: 1px solid #e5e5e5;
border-left: 4px solid var(--brand-primary);
border-radius: 0 3px 3px 0;
overflow: hidden;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.faq[open],
.faq:hover {
border-color: var(--brand-accent);
border-left-color: var(--brand-accent);
box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.faq summary {
list-style: none;
cursor: pointer;
padding: 1rem 1.3rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
user-select: none;
}
.faq summary::-webkit-details-marker {
display: none;
}
.faq summary::after {
content: '\25B8'; /* black right-pointing small triangle */
color: var(--brand-accent);
font-size: 0.9rem;
line-height: 1;
flex-shrink: 0;
transition: transform 0.2s ease;
}
.faq[open] summary::after {
transform: rotate(90deg);
}
.faq summary h3 {
margin: 0;
font-size: 1.1rem;
flex-grow: 1;
display: inline;
}
.faq summary:focus-visible {
outline: 2px solid var(--brand-accent);
outline-offset: 2px;
}
.faq .faq-answer {
padding: 0 1.3rem 1.1rem 1.3rem;
}
.faq .faq-answer p:first-child {
margin-top: 0;
}
.faq .faq-answer p:last-child {
margin-bottom: 0;
}
.listicle li strong { color: var(--brand-primary); }
/* Service Page template - FAQ block at end of content */
.service-page .faq-section {
margin-top: 3rem;
}
.service-page .faq-section > h2 {
margin-bottom: 1.5rem;
}
/* FAQ single - related FAQs block */
.faq-related {
margin-top: 3rem;
padding: 1.5rem;
background: var(--brand-white);
border-left: 4px solid var(--brand-accent);
}
.faq-related h2 {
margin-top: 0;
font-size: 1.3rem;
}
.faq-related-list {
list-style: disc;
padding-left: 1.25rem;
}
.faq-related-more {
margin-top: 1rem;
font-weight: bold;
}
/* FAQ archive + category */
.faq-archive-list,
.faq-related-list {
list-style: none;
padding: 0;
}
.faq-archive-list li,
.faq-related-list li {
border-bottom: 1px solid #eaeaea;
padding: .6rem 0;
}
.faq-archive-list a,
.faq-related-list a {
font-size: 1.05rem;
}
.faq-category-group {
margin-bottom: 2.5rem;
}
.faq-category-group h2 a {
text-decoration: none;
color: var(--brand-primary);
}
.faq-category-group h2 a:hover {
color: var(--brand-accent);
}
.meta-callout {
background: var(--brand-white);
border: 2px solid var(--brand-accent);
border-left: 8px solid var(--brand-primary);
padding: 1.2rem 1.5rem;
margin-bottom: 2rem;
font-family: var(--font-sans);
font-size: .95rem;
}
.meta-callout h4 { margin-top: 0; color: var(--brand-primary); }
.hero-note {
font-style: italic;
color: #666;
font-size: .9rem;
margin-bottom: 1.5rem;
}
/* --------------------------------------------------------------------------
9. Utilities
-------------------------------------------------------------------------- */
.alignright {
float: right !important;
padding: 5px;
border: solid 1px var(--brand-dark);
margin: 0 0 10px 15px;
}
.alignleft {
float: left !important;
padding: 5px;
border: solid 1px var(--brand-dark);
margin: 0 15px 10px 0;
}
.aligncenter {
display: block;
margin: 0 auto 15px auto;
}
.center { text-align: center; }
.review-font { font-size: 14px; }
/* Flexbox utility — drop-in 4-col flex layout with wrap. Collapses naturally
* on narrow viewports because flex-basis is calc(25% - 1rem). For 2-col / 3-col
* variants, use .fcs-col-2 / .fcs-col-3 grid utilities instead. */
.flex-container {
display: flex;
flex-wrap: wrap;
gap: 0;
}
.flex-item {
flex: 1 1 calc(25% - 1rem);
box-sizing: border-box;
padding: .25rem 1rem;
}
.availabletitle {
text-align: center;
margin-top: 20px;
}
/* --------------------------------------------------------------------------
White text utilities — for use inside dark/branded sections
(.page-color-band, hero overlays, sub-hero, etc.). Promoted from per-site
Custom CSS in alpha14.11 — universal pattern across legal cluster.
-------------------------------------------------------------------------- */
.white { color: #ffffff !important; text-align: center; }
h2.white { font-size: 24px !important; color: #ffffff !important; text-align: center; }
h3.white { font-size: 20px !important; color: #ffffff !important; text-align: center; }
/* --------------------------------------------------------------------------
Full-bleed brand-color section — canonical legal cluster value-props band.
Uses var(--brand-primary) so every portfolio site renders in its own brand.
Default padding 1.5rem 1rem suits 4-column flex children at near-full width
(Rory's "ALWAYS AVAILABLE / EXPERIENCED / CLIENT FOCUS / LOCAL KNOWLEDGE"
pattern). For prose-heavy variants like "I am here to help you" CTAs, add
the .band-inset modifier.
Usage pattern:
I AM HERE TO HELP YOU
...prose...
-------------------------------------------------------------------------- */
.page-color-band {
background: var(--brand-primary);
width: 100vw;
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
color: #ffffff;
padding: 1.5rem 1rem;
text-align: center;
}
/* --------------------------------------------------------------------------
Band inset modifier — adds 8% horizontal padding so prose doesn't span
edge-to-edge. Pair with .page-color-band for "I am here to help you" style
CTA sections. Keeps the band full-width while constraining content column.
-------------------------------------------------------------------------- */
.band-inset {
padding-left: 8%;
padding-right: 8%;
}
/* --------------------------------------------------------------------------
Mobile stack — .flex-container children stack vertically below 768px.
Without this, 4-column legal value-props bands squish into unreadable
narrow columns on phones. Single-breakpoint discipline (768px) maintained.
-------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {
.flex-container {
flex-direction: column;
}
}
/* --------------------------------------------------------------------------
10. Mobile CTA triptych - hidden on desktop
-------------------------------------------------------------------------- */
@media screen and (min-width: 769px) {
.mobileApp { display: none !important; }
.mobileAppB { display: none !important; }
.topApp { display: none !important; }
}
/* --------------------------------------------------------------------------
11. Mobile-only styles
-------------------------------------------------------------------------- */
@media only screen and (max-width: 768px) {
h1.smallTitle {
font-size: 20px !important;
color: var(--brand-white) !important;
text-align: center;
margin-left: 12%;
margin-right: 12%;
}
h2.smallTitle {
font-size: 20px !important;
border-bottom: none !important;
padding-bottom: 0px !important;
margin-top: 0px !important;
margin-bottom: 0px !important;
color: var(--brand-white) !important;
text-align: center;
margin-left: 12%;
margin-right: 12%;
}
h3.smallTitle {
font-size: 12px !important;
margin-top: 0px !important;
color: var(--brand-white) !important;
text-align: center;
margin-left: 12%;
margin-right: 12%;
}
.topApp {
text-align: center;
padding-top: 15px;
padding-bottom: 15px;
margin: auto;
background: var(--brand-dark);
}
.topApp a {
text-align: center;
padding-top: 15px;
padding-bottom: 15px;
color: var(--brand-white);
font-size: 18px;
text-decoration: none;
margin: auto;
}
.mobileApp {
margin-bottom: 20px;
text-align: center !important;
margin-top: 20px;
font-size: 18.5px;
line-height: 1.5em;
}
.mobileAppB {
margin-bottom: 125px;
text-align: center !important;
margin-top: 20px;
font-size: 18.5px;
line-height: 1.5em;
}
.ctaclick {
background-color: var(--brand-dark);
border: none;
color: var(--brand-white);
padding: 20px 95px;
text-align: center;
align-items: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
margin-top: 30px;
margin-bottom: 5px;
line-height: 1.25;
}
.alignright, .alignleft {
float: none !important;
margin: 1rem auto;
display: block;
}
/* --- Hamburger shows, inline nav hides + becomes accordion --- */
.fcs-menu-toggle { display: block; }
.primary-nav {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--brand-white);
border-bottom: 1px solid #e5e5e5;
max-height: 0;
overflow: hidden;
transition: max-height .3s ease;
z-index: 500;
}
.primary-nav.is-open {
/* Large value so long menus still fit - animates to natural height. */
max-height: 80vh;
overflow-y: auto;
}
.primary-nav ul,
.primary-nav .primary-menu {
flex-direction: column;
gap: 0;
padding: .5rem 0;
}
.primary-nav li {
border-bottom: 1px solid #eee;
margin: 0;
}
.primary-nav li:last-child { border-bottom: 0; }
.primary-nav a {
display: block;
padding: .9rem 1.25rem;
font-size: 1.05rem;
}
.primary-nav .sub-menu {
list-style: none;
background: var(--brand-bg);
padding: 0;
margin: 0;
}
.primary-nav .sub-menu a {
padding-left: 2.25rem;
font-weight: 400;
}
/* Reset desktop sub-menu column hacks on mobile */
.primary-nav .sub-menu-columns .sub-menu { width: auto !important; }
.primary-nav .sub-menu-columns .sub-menu li {
display: block !important;
width: auto !important;
float: none !important;
margin-right: 0 !important;
}
/* Lock body scroll while menu is open */
body.fcs-menu-open { overflow: hidden; }
}
/* --------------------------------------------------------------------------
12. Footer
-------------------------------------------------------------------------- */
.site-footer {
background: var(--brand-primary);
color: var(--brand-white);
margin-top: 3rem;
}
.site-footer a {
/* WCAG AA contrast — accent-on-primary fails on FCAEO (orange/blue ≈ 2.9:1).
White-on-primary passes everywhere across the portfolio palette.
Underline + bold preserves link affordance on the dark footer background. */
color: var(--brand-white);
font-weight: 600;
text-decoration: underline;
text-underline-offset: 3px;
}
.site-footer a:hover,
.site-footer a:focus {
color: var(--brand-accent);
text-decoration: none;
}
/* Footer widget grid - 4 columns desktop, 2x2 tablet, 1 column mobile */
.site-footer-widgets {
padding: 2.5rem 0 1rem;
border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer-widgets-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 2rem;
padding: 0 1.25rem;
}
.footer-widget-area { font-size: .95rem; line-height: 1.6; }
.footer-widget-area-1,
.footer-widget-area-2,
.footer-widget-area-3,
.footer-widget-area-4 { text-align: center; }
.footer-widget-area .widget-title {
color: var(--brand-white);
font-size: 1.05rem;
margin: 0 0 .75rem;
padding-bottom: .35rem;
border-bottom: 2px solid var(--brand-accent);
display: inline-block;
}
.footer-widget-area ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-widget-area li { margin-bottom: .35rem; }
.footer-widget-area a { text-decoration: none; }
.footer-widget-area a:hover { text-decoration: underline; }
.site-footer-bottom {
padding: 1.5rem 1.25rem;
text-align: center;
font-size: .9rem;
}
.site-footer-bottom p { margin: .4rem 0; }
@media screen and (max-width: 959px) {
.footer-widgets-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media screen and (max-width: 560px) {
.footer-widgets-grid { grid-template-columns: 1fr; gap: 1.5rem; }
.site-footer-widgets { padding: 2rem 0 .5rem; }
}
/* --------------------------------------------------------------------------
* Breadcrumb bar (v1.2.0)
* Thin row between header and hero. Hidden on front page (no breadcrumbs
* emitted there). BreadcrumbList JSON-LD is printed in .
* -------------------------------------------------------------------------- */
.fcs-breadcrumbs {
background: #f5f5f5;
border-bottom: 1px solid #e5e5e5;
font-size: 0.875rem;
color: var(--brand-text);
}
.fcs-breadcrumbs .fcs-container {
padding-top: 0.6rem;
padding-bottom: 0.6rem;
}
.fcs-breadcrumb-trail {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem;
}
.fcs-breadcrumb-trail li {
margin: 0;
padding: 0;
line-height: 1.3;
}
.fcs-breadcrumb-item a {
color: var(--brand-primary);
text-decoration: none;
}
.fcs-breadcrumb-item a:hover,
.fcs-breadcrumb-item a:focus {
text-decoration: underline;
}
.fcs-breadcrumb-item [aria-current="page"] {
color: var(--brand-text);
opacity: 0.75;
}
.fcs-breadcrumb-sep {
color: var(--brand-text);
opacity: 0.4;
}
@media screen and (max-width: 560px) {
.fcs-breadcrumbs { font-size: 0.8125rem; }
.fcs-breadcrumbs .fcs-container {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
}
/* --------------------------------------------------------------------------
Review Slider — [fcs_review_slider]
Pure CSS crossfade. All slides render in HTML for AEO citation.
Variable testimonial length handled via min-height + flex centering.
Per-slider keyframes are inlined in PHP at render time so any N works.
-------------------------------------------------------------------------- */
.fcs-review-slider {
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
color: var(--brand-white);
padding: 5rem 1.5rem;
min-height: 600px;
overflow: hidden;
text-align: center;
}
.fcs-review-slider-overlay {
position: absolute;
inset: 0;
display: block;
pointer-events: none;
z-index: 0;
}
.fcs-review-slider-inner {
position: relative;
z-index: 1;
max-width: 900px;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
}
.fcs-review-slider-heading {
color: var(--brand-white);
font-size: 1.85rem;
margin: 0 0 2.5rem;
font-weight: 400;
}
.fcs-review-slider-stage {
position: relative;
min-height: 360px;
}
.fcs-review-slide {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 1.5rem;
padding: 0 1rem;
opacity: 0;
}
.fcs-review-slide-body {
margin: 0;
font-style: italic;
font-size: 1.15rem;
line-height: 1.65;
max-width: 760px;
}
.fcs-review-slide-body p { margin: 0 0 1em; }
.fcs-review-slide-body p:last-child { margin-bottom: 0; }
.fcs-review-slide-author {
font-style: normal;
font-weight: 700;
font-size: 1rem;
letter-spacing: 0.02em;
}
@media screen and (max-width: 768px) {
.fcs-review-slider { padding: 3.5rem 1rem; min-height: 720px; }
.fcs-review-slider-stage { min-height: 480px; }
.fcs-review-slider-heading { font-size: 1.5rem; margin-bottom: 1.75rem; }
.fcs-review-slide-body { font-size: 1.05rem; }
}
/* --------------------------------------------------------------------------
Topic Tabs — [fcs_three_tabs] / [fcs_four_tabs] / [fcs_six_tabs]
Pure CSS toggle via radio inputs + sibling combinators (zero JS).
All N topic bodies render in HTML for crawler + AEO citation.
Desktop: horizontal tab strip, content panel below.
Mobile: vertical accordion (radio inputs flip view, same DOM).
-------------------------------------------------------------------------- */
.fcs-topic-tabs {
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding: 4rem 1.5rem;
overflow: hidden;
}
.fcs-topic-tabs-overlay {
position: absolute;
inset: 0;
display: block;
pointer-events: none;
z-index: 0;
}
.fcs-topic-tabs-inner {
position: relative;
z-index: 1;
max-width: var(--max-width);
margin: 0 auto;
}
.fcs-topic-tabs-heading {
text-align: center;
margin: 0 0 2rem;
font-size: 1.85rem;
color: var(--brand-primary);
font-weight: 400;
}
/* Tab strip — CSS Grid: labels on row 1, single shared panel slot on row 2 */
.fcs-topic-tabs-strip {
display: grid;
gap: 0;
border-top: 3px solid var(--brand-primary);
}
.fcs-tabs-3 .fcs-topic-tabs-strip { grid-template-columns: repeat(3, 1fr); }
.fcs-tabs-4 .fcs-topic-tabs-strip { grid-template-columns: repeat(4, 1fr); }
.fcs-tabs-6 .fcs-topic-tabs-strip { grid-template-columns: repeat(6, 1fr); }
/* Hide radios visually but keep keyboard-accessible */
.fcs-topic-tabs-radio {
position: absolute;
opacity: 0;
pointer-events: none;
width: 1px;
height: 1px;
overflow: hidden;
}
/* Labels = clickable tab triggers, sit in row 1 */
.fcs-topic-tabs-label {
grid-row: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem 1.25rem;
background: var(--brand-primary);
color: var(--brand-white);
font-family: var(--font-serif);
font-size: 1.05rem;
cursor: pointer;
border-right: 1px solid rgba(255, 255, 255, 0.15);
transition: background 0.2s ease, color 0.2s ease;
text-align: center;
line-height: 1.3;
}
.fcs-topic-tabs-label:last-of-type { border-right: none; }
.fcs-topic-tabs-label:hover { background: var(--brand-dark); }
/* Active state: input :checked + its label = lighter, accent border */
.fcs-topic-tabs-radio:checked + .fcs-topic-tabs-label {
background: var(--brand-bg);
color: var(--brand-primary);
font-weight: 700;
box-shadow: inset 0 -3px 0 var(--brand-accent);
}
/* Keyboard focus visible on label when radio is focused */
.fcs-topic-tabs-radio:focus + .fcs-topic-tabs-label {
outline: 3px solid var(--brand-accent);
outline-offset: -3px;
}
/* Panels: stacked in row 2, hidden by default, only checked one visible */
.fcs-topic-tabs-panel {
grid-row: 2;
grid-column: 1 / -1;
display: none;
background: var(--brand-bg);
background-size: cover;
background-position: center right;
background-repeat: no-repeat;
min-height: 360px;
}
.fcs-topic-tabs-radio:checked + .fcs-topic-tabs-label + .fcs-topic-tabs-panel {
display: block;
}
.fcs-topic-tabs-panel-inner {
padding: 2.5rem 2rem;
max-width: 720px;
}
.fcs-topic-tabs-panel-title {
color: var(--brand-primary);
margin: 0 0 1rem;
font-size: 1.5rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.02em;
}
.fcs-topic-tabs-panel-body {
color: var(--brand-text);
font-size: 1rem;
line-height: 1.7;
}
.fcs-topic-tabs-panel-body p { margin: 0 0 1em; }
.fcs-topic-tabs-panel-body p:last-child { margin: 0; }
.fcs-topic-tabs-panel-body ul,
.fcs-topic-tabs-panel-body ol {
margin: 0 0 1em 1.25rem;
padding: 0;
}
.fcs-topic-tabs-panel-body li { margin-bottom: 0.4rem; }
.fcs-topic-tabs-panel-cta {
margin-top: 1.5rem;
}
.fcs-topic-tabs-more {
display: inline-block;
padding: 0.6rem 1.25rem;
background: var(--brand-accent);
color: var(--brand-primary);
text-decoration: none;
font-weight: 700;
border-radius: 2px;
transition: background 0.2s ease, color 0.2s ease;
}
.fcs-topic-tabs-more:hover {
background: var(--brand-primary);
color: var(--brand-white);
}
/* Mobile: collapse to vertical accordion. Same DOM, different layout. */
@media screen and (max-width: 768px) {
.fcs-topic-tabs { padding: 2.5rem 1rem; }
.fcs-topic-tabs-heading { font-size: 1.4rem; margin-bottom: 1.25rem; }
.fcs-tabs-3 .fcs-topic-tabs-strip,
.fcs-tabs-4 .fcs-topic-tabs-strip,
.fcs-tabs-6 .fcs-topic-tabs-strip {
grid-template-columns: 1fr;
}
.fcs-topic-tabs-label {
grid-row: auto;
grid-column: 1;
justify-content: space-between;
text-align: left;
border-right: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.fcs-topic-tabs-label::after {
content: "+";
font-size: 1.5rem;
font-weight: 300;
line-height: 1;
margin-left: 0.5rem;
}
.fcs-topic-tabs-radio:checked + .fcs-topic-tabs-label::after {
content: "\2212"; /* unicode minus */
}
.fcs-topic-tabs-panel {
grid-row: auto;
grid-column: 1;
min-height: 0;
background-image: none !important;
}
.fcs-topic-tabs-panel-inner {
padding: 1.5rem 1rem;
}
}
/* --------------------------------------------------------------------------
* Layout utilities — column grids (.fcs-col-2 / .fcs-col-3 / .fcs-col-4)
* Documented in admin Design Classes tab. Implementation lives here.
* Mobile collapses to single column at 768px.
* -------------------------------------------------------------------------- */
.fcs-col-2,
.fcs-col-3,
.fcs-col-4 {
display: grid;
gap: 2rem;
align-items: start;
}
.fcs-col-2 { grid-template-columns: repeat(2, 1fr); }
.fcs-col-3 { grid-template-columns: repeat(3, 1fr); }
.fcs-col-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1024px) {
.fcs-col-3,
.fcs-col-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
.fcs-col-2,
.fcs-col-3,
.fcs-col-4 { grid-template-columns: 1fr; }
}
/* --------------------------------------------------------------------------
* Blog index (home.php) — 3-across card grid with featured image + excerpt
* -------------------------------------------------------------------------- */
.fcs-blog-archive {
padding: 2rem 0 3rem;
}
.fcs-blog-header {
margin: 0 0 2rem;
text-align: center;
}
.fcs-blog-header h1 {
margin: 0;
font-size: 2rem;
line-height: 1.2;
}
.fcs-blog-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 2rem;
align-items: stretch;
}
@media (max-width: 1024px) {
.fcs-blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.fcs-blog-grid { grid-template-columns: 1fr; }
}
.fcs-blog-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid rgba(0, 0, 0, 0.08);
border-radius: 6px;
overflow: hidden;
transition: box-shadow .15s ease, transform .15s ease;
}
.fcs-blog-card:hover {
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
transform: translateY(-2px);
}
.fcs-blog-card__media {
display: block;
aspect-ratio: 16 / 10;
overflow: hidden;
background: rgba(0, 0, 0, 0.04);
}
.fcs-blog-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.fcs-blog-card__media-placeholder {
display: block;
width: 100%;
height: 100%;
background: linear-gradient(135deg, rgba(0,0,0,.06), rgba(0,0,0,.02));
}
.fcs-blog-card__body {
display: flex;
flex-direction: column;
flex: 1 1 auto;
padding: 1.25rem 1.25rem 1.5rem;
}
.fcs-blog-card__title {
margin: 0 0 .5rem;
font-size: 1.15rem;
line-height: 1.3;
}
.fcs-blog-card__title a {
text-decoration: none;
color: inherit;
}
.fcs-blog-card__title a:hover {
text-decoration: underline;
}
.fcs-blog-card__meta {
margin: 0 0 .75rem;
font-size: .85rem;
opacity: .7;
}
.fcs-blog-card__excerpt {
flex: 1 1 auto;
font-size: .95rem;
line-height: 1.5;
margin-bottom: 1rem;
}
.fcs-blog-card__excerpt p:last-child { margin-bottom: 0; }
.fcs-blog-card__more {
align-self: flex-start;
display: inline-block;
padding: .5rem 1rem;
background: var(--fcs-brand-primary, #800000);
color: #fff;
text-decoration: none;
border-radius: 4px;
font-size: .9rem;
font-weight: 600;
transition: background .15s ease;
}
.fcs-blog-card__more:hover,
.fcs-blog-card__more:focus {
background: var(--fcs-brand-primary-hover, #600000);
color: #fff;
}
.fcs-blog-pagination {
margin-top: 2.5rem;
text-align: center;
}
.fcs-blog-pagination .nav-links {
display: inline-flex;
gap: .5rem;
flex-wrap: wrap;
justify-content: center;
}
.fcs-blog-pagination .page-numbers {
display: inline-block;
padding: .5rem .85rem;
border: 1px solid rgba(0, 0, 0, 0.12);
border-radius: 4px;
text-decoration: none;
color: inherit;
}
.fcs-blog-pagination .page-numbers.current {
background: var(--fcs-brand-primary, #800000);
color: #fff;
border-color: transparent;
}
.fcs-blog-pagination .page-numbers:hover:not(.current) {
background: rgba(0, 0, 0, 0.04);
}
.fcs-blog-empty {
padding: 2rem;
text-align: center;
opacity: .7;
}