/* ==========================================================================
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.7;
color: var(--brand-text);
background: var(--brand-bg);
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;
}
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: 21px;
color: var(--brand-primary);
text-transform: uppercase;
position: relative;
line-height: 50px;
padding: 0 27px;
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;
}
}
/* --------------------------------------------------------------------------
6a. Home hero (featured image zone above the dark band)
Image renders at native size up to 1400px, centered, scales down on mobile.
Does NOT upscale above native resolution to avoid blur on large displays.
-------------------------------------------------------------------------- */
.home-hero {
width: 100%;
padding: 0;
margin: 0;
text-align: center;
background: var(--brand-bg);
}
.home-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: 1.5rem 1rem;
text-align: center;
}
/* --------------------------------------------------------------------------
7. .smallTitle - white centered overlay titles
Preserved verbatim from B&M custom CSS.
-------------------------------------------------------------------------- */
h1.smallTitle {
font-size: 36px !important;
margin-bottom: 10px;
margin-left: 8%;
margin-right: 8%;
color: var(--brand-white) !important;
text-align: center !important;
}
h2.smallTitle {
font-size: 28px !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: 10px;
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; }
.availabletitle {
text-align: center;
margin-top: 20px;
}
/* --------------------------------------------------------------------------
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 .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;
}