/*
Theme Name: Freedom Works Child
Theme URI: https://freedomworks.cookiebytestech.com
Description: Custom child theme for Freedom Works, LLC. Built on GeneratePress by CookieBytes Technologies.
Author: CookieBytes Technologies
Author URI: https://cookiebytestech.com
Template: generatepress
Version: 1.2.5
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: freedomworks-child
*/
/* =========================================================
FREEDOM WORKS CHILD THEME
File: wp-content/themes/freedomworks-child/style.css
Loaded AFTER GeneratePress parent, so these rules override.
Fonts enqueued separately via functions.php.
Pattern authors reference these utility classes from the
block editor (Advanced -> Additional CSS Class):
.fw-nav nav row customizations
.fw-hero full-bleed flag hero (parallax desktop)
.fw-hero-eyebrow small caps intro above headline
.fw-hero-title massive display headline
.fw-hero-sub body copy under headline
.fw-trust-bar licensed/insured strip
.fw-trust-item single badge
.fw-section section vertical padding
.fw-section--white white background
.fw-section--off slight gray background for variation
.fw-section--navy dark navy section + light text
.fw-section--navy-flag navy + flag parallax (CTA band)
.fw-eyebrow red small-caps section label
.fw-section-title large display heading
.fw-section-lede centered intro paragraph
.fw-service-card red top border card
.fw-featured half image / half copy row
.fw-portfolio-item project tile with caption overlay
.fw-story owners story layout
.fw-why-note italic serif owners-note band
.fw-review-card testimonial card
.fw-cta-band large call to action band
.fw-footer-brand footer logo box
.fw-btn button base
.fw-btn--primary red fill button
.fw-btn--ghost outlined button
.fw-flag-stripe tri-color stripe accent
========================================================= */
/* =========================================================
DESIGN TOKENS
========================================================= */
:root {
--fw-white: #FFFFFF;
--fw-off-white: #F6F7F9;
--fw-bg: #FFFFFF;
--fw-bg-off: #F6F7F9;
--fw-navy: #0F2847;
--fw-navy-mid: #16314F;
--fw-navy-deep: #091830;
--fw-navy-ink: #050B18;
--fw-red: #B22234;
--fw-red-brick: #8B1A28;
--fw-red-glow: rgba(178, 34, 52, 0.4);
--fw-sand: #D8CBAB;
--fw-sand-line: #C4B690;
--fw-fg: #1F1F23;
--fw-fg-mute: #5F5F67;
--fw-fg-dim: #8A8A92;
--fw-fg-ghost: #B0B0B8;
--fw-divider: #D8D3C4;
--fw-divider-light: #E8E3D5;
--fw-divider-dark: #2B3B55;
--fw-gold: #B8862F;
--fw-font-display: 'Big Shoulders Display', 'Oswald', 'Impact', sans-serif;
--fw-font-body: 'Source Sans 3', -apple-system, 'Segoe UI', Roboto, sans-serif;
--fw-font-serif: 'Fraunces', 'Georgia', serif;
--fw-section-padding: 32px;
--fw-section-padding-mobile: 16px;
}
/* =========================================================
BASE TYPOGRAPHY
========================================================= */
body {
font-family: var(--fw-font-body);
background: var(--fw-bg);
color: var(--fw-fg);
font-size: 16px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--fw-font-display);
font-weight: 800;
letter-spacing: 0.01em;
text-wrap: balance;
}
h1 { font-size: clamp(40px, 6vw, 72px); line-height: 0.95; }
h2 { font-size: clamp(36px, 5vw, 56px); line-height: 1; }
h3 { font-size: clamp(24px, 3vw, 32px); line-height: 1.1; }
p { line-height: 1.6; }
a { color: var(--fw-red); text-decoration: none; }
a:hover { color: var(--fw-red-brick); }
/* =========================================================
FLAG STRIPE ACCENT
========================================================= */
.fw-flag-stripe {
height: 5px;
display: flex;
width: 100%;
}
.fw-flag-stripe::before,
.fw-flag-stripe::after,
.fw-flag-stripe > span {
content: "";
flex: 1;
display: block;
}
.fw-flag-stripe::before { background: var(--fw-red); }
.fw-flag-stripe > span:nth-child(1) { background: var(--fw-white); }
.fw-flag-stripe > span:nth-child(2) { background: var(--fw-navy-deep); }
.fw-flag-stripe > span:nth-child(3) { background: var(--fw-red); }
.fw-flag-stripe > span:nth-child(4) { background: var(--fw-white); }
.fw-flag-stripe > span:nth-child(5) { background: var(--fw-navy-deep); }
.fw-flag-stripe::after { background: var(--fw-red); }
/* =========================================================
NAVIGATION (overrides GeneratePress site header)
========================================================= */
/* Both wrappers get the dark navy background. The red divider lives
on .site-header (the header-level accent); the main-nav gets no
border so we don't stack two lines. */
.site-header,
.main-navigation {
background: var(--fw-navy-ink);
color: var(--fw-off-white);
}
.site-header {
border-bottom: 2px solid var(--fw-red);
}
.main-navigation {
border-bottom: none !important;
border-top: none !important;
}
.site-header .main-title a,
.main-navigation .main-nav ul li a {
color: var(--fw-off-white);
font-family: var(--fw-font-body);
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 10px 14px;
}
.main-navigation .main-nav ul li a:hover,
.main-navigation .main-nav ul li.current-menu-item a {
color: var(--fw-red);
}
/* Primary CTA button in menu (add "nav-cta" class to that menu item) */
.main-navigation .main-nav ul li.nav-cta a {
background: var(--fw-red);
color: var(--fw-white);
font-family: var(--fw-font-display);
font-size: 17px;
font-weight: 700;
letter-spacing: 0.03em;
padding: 8px 16px !important;
border: 2px solid var(--fw-red);
display: inline-flex;
align-items: center;
gap: 8px;
}
/* Phone icon prepended to the CALL button via CSS mask so it inherits color */
.main-navigation .main-nav ul li.nav-cta a::before {
content: "";
display: inline-block;
width: 15px;
height: 15px;
background: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
flex-shrink: 0;
}
.main-navigation .main-nav ul li.nav-cta a:hover {
background: var(--fw-red-brick);
border-color: var(--fw-red-brick);
color: var(--fw-white);
}
/* =========================================================
HERO (parallax flag background)
Use on a full-width GenerateBlocks Container
========================================================= */
.fw-hero {
position: relative;
background-color: var(--fw-navy-ink);
background-image:
linear-gradient(135deg, rgba(5, 11, 24, 0.78) 0%, rgba(9, 24, 48, 0.72) 50%, rgba(5, 11, 24, 0.85) 100%),
url('/wp-content/uploads/2026/10/flag-background-1.jpg');
background-attachment: fixed;
background-size: cover;
background-position: center;
color: var(--fw-off-white);
padding: 90px 24px 100px;
overflow: hidden;
}
/* iOS Safari doesn't honor fixed; scroll fallback */
@media (max-width: 768px) {
.fw-hero {
background-attachment: scroll;
padding: 60px 20px 70px;
}
}
.fw-hero-eyebrow {
font-family: var(--fw-font-body);
font-size: 12px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--fw-sand);
font-weight: 600;
margin-bottom: 24px;
}
.fw-hero-title {
font-family: var(--fw-font-display);
font-weight: 900;
font-size: clamp(56px, 11vw, 136px);
line-height: 0.85;
color: var(--fw-white);
margin-bottom: 24px;
text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}
.fw-hero-title .fw-red {
color: var(--fw-red);
text-shadow: 0 0 30px var(--fw-red-glow);
}
.fw-hero-sub {
font-family: var(--fw-font-body);
font-size: clamp(17px, 2vw, 21px);
line-height: 1.5;
color: var(--fw-off-white);
max-width: 55ch;
margin-bottom: 36px;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}
/* =========================================================
BUTTONS
========================================================= */
.fw-btn,
.wp-block-button.is-style-fw-primary .wp-block-button__link,
.wp-block-button.is-style-fw-ghost .wp-block-button__link {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 28px;
font-family: var(--fw-font-display);
font-size: 18px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
text-decoration: none;
border: 2px solid transparent;
cursor: pointer;
transition: all 0.15s;
border-radius: 0;
}
.fw-btn--primary,
.wp-block-button.is-style-fw-primary .wp-block-button__link {
background: var(--fw-red);
color: var(--fw-white);
border-color: var(--fw-red);
box-shadow: 0 4px 20px var(--fw-red-glow);
}
.fw-btn--primary:hover,
.wp-block-button.is-style-fw-primary .wp-block-button__link:hover {
background: var(--fw-red-brick);
border-color: var(--fw-red-brick);
color: var(--fw-white);
transform: translateY(-1px);
}
.fw-btn--ghost,
.wp-block-button.is-style-fw-ghost .wp-block-button__link {
background: rgba(5, 11, 24, 0.4);
color: var(--fw-off-white);
border-color: var(--fw-sand);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.fw-btn--ghost:hover,
.wp-block-button.is-style-fw-ghost .wp-block-button__link:hover {
background: rgba(246, 241, 230, 0.1);
border-color: var(--fw-off-white);
color: var(--fw-off-white);
}
/* =========================================================
TRUST BAR
========================================================= */
.fw-trust-bar {
background: var(--fw-off-white);
border-bottom: 1px solid var(--fw-divider);
padding: 32px 24px;
}
.fw-trust-item {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
}
.fw-trust-icon {
width: 44px;
height: 44px;
background: var(--fw-navy-deep);
color: var(--fw-off-white);
display: grid;
place-items: center;
flex-shrink: 0;
border-bottom: 3px solid var(--fw-red);
}
.fw-trust-label {
font-family: var(--fw-font-display);
font-size: 18px;
font-weight: 700;
color: var(--fw-navy-deep);
line-height: 1;
}
.fw-trust-sub {
font-size: 12px;
color: var(--fw-fg-mute);
letter-spacing: 0.03em;
}
/* =========================================================
SECTIONS
========================================================= */
.fw-section { padding-block: var(--fw-section-padding); }
.fw-section--white { background: var(--fw-white); }
.fw-section--off { background: var(--fw-bg-off); }
.fw-section--navy { background: var(--fw-navy-deep); color: var(--fw-off-white); }
.fw-section--navy h1,
.fw-section--navy h2,
.fw-section--navy h3,
.fw-section--navy h4 {
color: var(--fw-white);
}
.fw-section--navy-flag {
background-color: var(--fw-navy-ink);
background-image:
linear-gradient(135deg, rgba(5, 11, 24, 0.92) 0%, rgba(9, 24, 48, 0.88) 100%),
url('/wp-content/uploads/2026/10/flag-background-1.jpg');
background-size: cover;
background-position: center;
background-attachment: fixed;
color: var(--fw-off-white);
padding-block: 72px;
}
@media (max-width: 768px) {
.fw-section--navy-flag { background-attachment: scroll; }
}
/* Section eyebrow + lede */
.fw-eyebrow {
font-family: var(--fw-font-body);
font-size: 12px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--fw-red);
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 14px;
margin-bottom: 14px;
}
.fw-eyebrow::before, .fw-eyebrow::after {
content: "";
width: 24px;
height: 1px;
background: var(--fw-red);
}
.fw-section--navy .fw-eyebrow,
.fw-section--navy-flag .fw-eyebrow {
color: var(--fw-sand);
}
.fw-section--navy .fw-eyebrow::before,
.fw-section--navy .fw-eyebrow::after,
.fw-section--navy-flag .fw-eyebrow::before,
.fw-section--navy-flag .fw-eyebrow::after {
background: var(--fw-sand-line);
}
.fw-section-title {
font-family: var(--fw-font-display);
font-size: clamp(36px, 5vw, 56px);
font-weight: 800;
line-height: 1;
color: var(--fw-navy-deep);
}
.fw-section--navy .fw-section-title,
.fw-section--navy-flag .fw-section-title {
color: var(--fw-white);
}
.fw-section-lede {
font-size: 17px;
color: var(--fw-fg-mute);
max-width: 56ch;
margin: 16px auto 0;
line-height: 1.5;
}
.fw-section--navy .fw-section-lede,
.fw-section--navy-flag .fw-section-lede {
color: var(--fw-sand);
}
/* =========================================================
SERVICE CARDS
========================================================= */
.fw-service-card {
background: var(--fw-white);
border: 1px solid var(--fw-divider);
border-top: 4px solid var(--fw-red);
padding: 28px 24px;
display: flex;
flex-direction: column;
gap: 12px;
transition: transform 0.2s, box-shadow 0.2s;
}
.fw-service-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 28px rgba(15, 40, 71, 0.14);
}
.fw-service-card h3 {
font-family: var(--fw-font-display);
font-size: 22px;
color: var(--fw-navy-deep);
margin: 0;
letter-spacing: 0.02em;
}
.fw-service-card p {
font-size: 14.5px;
color: var(--fw-fg-mute);
line-height: 1.55;
margin: 0;
}
/* =========================================================
FEATURED PROJECT (half image / half copy)
========================================================= */
.fw-featured {
background: var(--fw-navy-deep);
color: var(--fw-off-white);
}
.fw-featured h2,
.fw-featured h3 { color: var(--fw-white); }
.fw-featured-tag {
font-family: var(--fw-font-body);
font-size: 11px;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--fw-red);
font-weight: 700;
margin-bottom: 14px;
}
/* =========================================================
PORTFOLIO GRID TILES
========================================================= */
.fw-portfolio-item {
position: relative;
overflow: hidden;
background: var(--fw-navy-ink);
aspect-ratio: 1 / 1;
cursor: pointer;
}
.fw-portfolio-item img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
display: block;
}
.fw-portfolio-item:hover img { transform: scale(1.05); }
.fw-portfolio-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 20px 18px 16px;
background: linear-gradient(to top, rgba(5, 11, 24, 0.95) 0%, rgba(5, 11, 24, 0.6) 60%, rgba(5, 11, 24, 0) 100%);
color: var(--fw-white);
font-family: var(--fw-font-display);
font-size: 17px;
font-weight: 700;
line-height: 1.1;
}
.fw-portfolio-caption .fw-loc {
display: block;
font-family: var(--fw-font-body);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.15em;
text-transform: uppercase;
color: var(--fw-sand);
margin-top: 4px;
}
/* =========================================================
STORY (owners story + portraits)
========================================================= */
.fw-story-portrait {
aspect-ratio: 3 / 4;
overflow: hidden;
background: var(--fw-navy-deep);
position: relative;
border: 2px solid var(--fw-white);
box-shadow: 0 6px 24px rgba(15, 40, 71, 0.15);
}
.fw-story-portrait img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.fw-story-portrait-caption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(5, 11, 24, 0.9), rgba(5, 11, 24, 0));
color: var(--fw-white);
padding: 14px 12px 10px;
font-family: var(--fw-font-display);
font-size: 15px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.fw-story-pull {
font-family: var(--fw-font-serif);
font-size: 20px;
font-style: italic;
color: var(--fw-navy);
line-height: 1.4;
padding-left: 20px;
border-left: 3px solid var(--fw-red);
margin: 0 0 24px;
}
/* =========================================================
OWNERS NOTE BAND
========================================================= */
.fw-why-note {
font-family: var(--fw-font-serif);
font-size: clamp(20px, 2.5vw, 26px);
line-height: 1.5;
color: var(--fw-white);
font-weight: 500;
font-style: italic;
text-align: center;
max-width: 820px;
margin: 0 auto 32px;
}
.fw-why-note .fw-highlight {
color: var(--fw-red);
font-style: normal;
font-family: var(--fw-font-display);
font-size: 1.15em;
letter-spacing: 0.02em;
font-weight: 800;
}
.fw-why-sig {
font-family: var(--fw-font-display);
font-size: 22px;
color: var(--fw-white);
font-weight: 700;
text-align: center;
}
.fw-why-sig-role {
font-size: 11px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--fw-sand);
margin-top: 6px;
text-align: center;
font-family: var(--fw-font-body);
}
/* =========================================================
REVIEWS
========================================================= */
.fw-review-card {
background: var(--fw-white);
border: 1px solid var(--fw-divider);
padding: 28px 24px;
display: flex;
flex-direction: column;
gap: 14px;
position: relative;
}
.fw-review-card::before {
content: "";
position: absolute;
top: 0;
left: 24px;
right: 24px;
height: 2px;
background: var(--fw-red);
}
.fw-review-stars {
color: var(--fw-gold);
font-size: 18px;
letter-spacing: 2px;
}
.fw-review-quote {
font-family: var(--fw-font-serif);
font-size: 17px;
line-height: 1.5;
color: var(--fw-navy-deep);
flex: 1;
font-weight: 500;
}
.fw-review-name {
font-family: var(--fw-font-display);
font-size: 17px;
font-weight: 700;
color: var(--fw-navy-deep);
}
.fw-review-project {
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--fw-fg-mute);
}
/* =========================================================
CTA BAND
========================================================= */
.fw-cta-band {
position: relative;
text-align: center;
}
.fw-cta-band::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: var(--fw-red);
}
.fw-cta-title {
font-family: var(--fw-font-display);
font-size: clamp(40px, 6vw, 68px);
font-weight: 900;
line-height: 0.95;
color: var(--fw-white);
}
/* =========================================================
FOOTER
GeneratePress wraps the footer in several nested containers,
so background + color have to cascade through all of them.
========================================================= */
.site-footer,
.footer-widgets,
.footer-widgets-container,
.inside-footer-widgets,
.site-info,
.inside-site-info {
background: var(--fw-navy-deep) !important;
color: var(--fw-off-white);
}
/* Headers, paragraphs, list items in the footer */
.site-footer h1,
.site-footer h2,
.site-footer h3,
.site-footer h4,
.site-footer h5,
.site-footer h6,
.site-footer p,
.site-footer li,
.site-footer .widget-title,
.footer-widgets .widget-title {
color: var(--fw-off-white);
}
/* Widget headings (Services, Company, Reach Us) */
.footer-widgets .widget-title,
.site-footer h4 {
font-family: var(--fw-font-display);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--fw-white);
margin-bottom: 18px;
padding-bottom: 12px;
border-bottom: 1px solid var(--fw-divider-dark);
}
/* Links in the footer */
.site-footer a,
.footer-widgets a {
color: var(--fw-sand);
text-decoration: none;
}
.site-footer a:hover,
.footer-widgets a:hover {
color: var(--fw-white);
}
/* Divider line above the copyright strip */
.site-info {
border-top: 1px solid var(--fw-divider-dark);
padding-block: 20px;
}
/* Logo image in the footer brand widget */
.fw-footer-brand img,
.footer-widgets .wp-block-image img {
max-width: 180px;
height: auto;
border-radius: 50%;
display: block;
}
/* Paragraph tagline under the logo */
.footer-widgets .wp-block-paragraph {
font-size: 14px;
color: var(--fw-sand);
line-height: 1.6;
}
/* Force body font on everything in footer widgets.
Overrides any Preformatted/Code block styles that may have snuck in. */
.footer-widgets p,
.footer-widgets li,
.footer-widgets pre,
.footer-widgets code,
.footer-widgets .wp-block-paragraph,
.footer-widgets .wp-block-list,
.footer-widgets .wp-block-preformatted {
font-family: var(--fw-font-body) !important;
white-space: normal;
background: transparent !important;
}
/* =========================================================
FOOTER REACH-US ICONS
Matches the v2 prototype: a small SVG icon sits in front of
each contact line in the "Reach Us" column. Icons are drawn
via CSS mask on a data-URI SVG so they inherit text color.
Strategy:
- Any anywhere in the footer gets a phone
icon (works no matter which column holds the number).
- Any gets an envelope icon.
- The Reach Us column paragraphs that are plain text (address
+ hours) get location and clock icons via nth-of-type on
the specific widget column.
========================================================= */
/* Shared base: pseudo-element that paints an SVG the current color.
Scoped tightly so it only hits the footer. */
.site-footer .fw-icon-before::before,
.footer-widgets a[href^="tel:"]::before,
.footer-widgets a[href^="mailto:"]::before,
.footer-widgets .footer-widget-4 p:not(:has(a))::before,
.footer-widgets .footer-widget-5 p:not(:has(a))::before {
content: "";
display: inline-block;
width: 16px;
height: 16px;
margin-right: 10px;
vertical-align: -3px;
background-color: var(--fw-red);
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
flex-shrink: 0;
}
/* Phone icon on any tel: link in the footer */
.footer-widgets a[href^="tel:"]::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* Envelope icon on any mailto: link in the footer */
.footer-widgets a[href^="mailto:"]::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* Location pin on the Reach Us column's address line (first plain p
without a link in widgets 4 or 5 — whichever the Reach Us column is). */
.footer-widgets .footer-widget-4 p:not(:has(a)):nth-of-type(1)::before,
.footer-widgets .footer-widget-5 p:not(:has(a)):nth-of-type(1)::before,
.footer-widgets .fw-icon-location::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* Clock icon on the Reach Us column's hours line (second plain p
without a link). */
.footer-widgets .footer-widget-4 p:not(:has(a)):nth-of-type(2)::before,
.footer-widgets .footer-widget-5 p:not(:has(a)):nth-of-type(2)::before,
.footer-widgets .fw-icon-clock::before {
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
}
/* Make the icon sit nicely inline with the text (not stacked above).
The paragraphs are flex so the ::before and text align on the same row. */
.footer-widgets .footer-widget-4 p,
.footer-widgets .footer-widget-5 p,
.footer-widgets .footer-widget-4 .wp-block-paragraph,
.footer-widgets .footer-widget-5 .wp-block-paragraph {
display: flex;
align-items: flex-start;
gap: 2px;
line-height: 1.5;
}
/* The link child of a flex paragraph: let it stay inline-level so the
icon pseudo-element sits next to the link text, not above it. */
.footer-widgets .footer-widget-4 p a,
.footer-widgets .footer-widget-5 p a {
display: inline-flex;
align-items: center;
}
/* Fallback for browsers without :has() support (older iOS): the
icons on plain paragraphs won't appear, but the links still show
their icons via the simpler [href] selectors above. */
/* ============ Page content wrapper (kill GP constraints on sections) ============ */
/* Lets our full-width sections run edge to edge instead of
nesting inside GeneratePress's content-area padding and max-width.
Scoped to .page so single posts keep their normal layout. */
.page .site-content,
.page .content-area,
.page .site-main,
.page .inside-article,
.page .entry-content {
max-width: none !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
.page .entry-content > .wp-block-group,
.page .entry-content > .alignfull {
margin-block: 0;
max-width: 100%;
}
/* For the Why / Note band specifically: constrained content centers inside full section */
.fw-section--navy,
.fw-section--navy-flag,
.fw-why {
width: 100%;
text-align: center;
}
.fw-section--navy > *,
.fw-section--navy-flag > *,
.fw-why > * {
margin-left: auto;
margin-right: auto;
}
/* ============ Header: optional site title styling ============ */
/* Shows up only if "Display Site Title" is checked in Customize. */
.site-branding .main-title {
font-family: var(--fw-font-display);
font-size: 22px;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1;
margin-left: 12px;
}
.site-branding .main-title a {
color: var(--fw-off-white);
text-decoration: none;
}
.site-branding .site-description {
font-family: var(--fw-font-body);
font-size: 10px;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--fw-sand);
margin-left: 12px;
margin-top: 4px;
}
/* =========================================================
UTILITY
========================================================= */
.fw-text-serif { font-family: var(--fw-font-serif); }
.fw-text-display { font-family: var(--fw-font-display); }
.fw-text-mono { font-family: 'IBM Plex Mono', 'SF Mono', monospace; }
.fw-text-red { color: var(--fw-red); }
.fw-text-navy { color: var(--fw-navy-deep); }
.fw-text-white { color: var(--fw-white); }
.fw-tabular { font-variant-numeric: tabular-nums; }
/* =========================================================
HEADER: slight polish for the branded title + nav rhythm
========================================================= */
.site-branding .main-title,
.site-branding .main-title a {
font-family: var(--fw-font-display) !important;
font-size: 22px !important;
font-weight: 800;
letter-spacing: 0.04em;
text-transform: uppercase;
line-height: 1;
margin-bottom: 2px;
color: var(--fw-off-white);
}
.site-branding .site-description {
font-family: var(--fw-font-body);
font-size: 10px;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--fw-sand);
margin: 2px 0 0 0;
display: block;
font-weight: 500;
}
/* =========================================================
HERO TITLE SPLIT LAYOUT (BUILT · RIGHT. / LOCAL.)
Big "BUILT" on the left, two words stacked on the right.
========================================================= */
/* --fw-split-size drives BOTH the stack spans and BUILT (built is 2.1x).
Change one variable, both scale in lockstep. Ratio keeps BUILT's
visual height matched to RIGHT. + LOCAL. stacked. */
.fw-hero-title--split {
display: inline-flex !important;
align-items: center;
gap: 20px;
line-height: 1;
padding-bottom: 0;
max-width: none !important;
width: auto !important;
--fw-split-size: clamp(30px, 6vw, 80px);
}
.fw-hero-title--split .fw-built-word {
font-size: calc(var(--fw-split-size) * 2.1);
line-height: 0.9;
letter-spacing: -0.01em;
font-weight: 900;
display: inline-block;
}
.fw-hero-title--split .fw-split-stack {
display: inline-flex;
flex-direction: column;
gap: 4px;
line-height: 0.95;
}
.fw-hero-title--split .fw-split-stack > span {
font-size: var(--fw-split-size);
font-weight: 800;
letter-spacing: 0.015em;
line-height: 0.95;
display: block;
}
/* Tablet and smaller: nudge the variable down. BUILT follows automatically. */
@media (max-width: 768px) {
.fw-hero-title--split {
gap: 14px;
--fw-split-size: clamp(28px, 8vw, 56px);
}
}
@media (max-width: 420px) {
.fw-hero-title--split {
gap: 10px;
--fw-split-size: clamp(26px, 9vw, 44px);
}
}
/* Shrink in-pattern spacer blocks across both desktop and mobile */
.fw-section .wp-block-spacer,
.wp-block-spacer,
.wp-block-spacer[style*="height"] {
height: 16px !important;
}
/* Override WordPress's inherited --wp--style--block-gap in our sections.
Default is 24px which stacks a lot of air between blocks. */
.fw-section,
.fw-section .wp-block-group,
.fw-section .wp-block-columns {
--wp--style--block-gap: 12px;
}
/* GP's outer page/content wrapper padding on page templates */
.page .site-content > .content-area {
padding: 0 !important;
}
@media (max-width: 768px) {
.fw-section .wp-block-spacer,
.wp-block-spacer,
.wp-block-spacer[style*="height"] {
height: 8px !important;
}
.fw-section,
.fw-section .wp-block-group,
.fw-section .wp-block-columns {
--wp--style--block-gap: 8px;
}
/* Zero out any inherited padding on inner group containers inside sections */
.fw-section > .wp-block-group,
.fw-section .wp-block-group.alignfull,
.fw-section .wp-block-group-is-layout-constrained {
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
}
/* Section head bottom margin smaller */
.fw-section .section-head,
.fw-section > .wp-block-group:first-child {
margin-bottom: 16px;
}
@media (max-width: 768px) {
.fw-section .section-head,
.fw-section > .wp-block-group:first-child {
margin-bottom: 8px;
}
}
/* =========================================================
STICKY MOBILE CALL BUTTON
Floats bottom-right on mobile only. Injected via functions.php
on wp_footer hook, hidden on desktop by media query.
========================================================= */
.fw-sticky-call {
display: none; /* hidden by default; shown only at mobile widths below */
}
@media (max-width: 768px) {
.fw-sticky-call {
display: inline-flex;
position: fixed;
bottom: 16px;
right: 16px;
z-index: 999;
align-items: center;
gap: 8px;
background: var(--fw-red);
color: var(--fw-white) !important;
padding: 14px 22px;
border-radius: 50px;
box-shadow: 0 6px 24px rgba(178, 34, 52, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
text-decoration: none !important;
font-family: var(--fw-font-display);
font-size: 15px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
transition: all 0.2s;
}
.fw-sticky-call:hover,
.fw-sticky-call:focus {
background: var(--fw-red-brick);
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(178, 34, 52, 0.6);
}
.fw-sticky-call svg {
width: 18px;
height: 18px;
fill: currentColor;
flex-shrink: 0;
}
}
/* ============ Mobile carousel for the Portfolio section ============ */
/* The JS builds a .fw-portfolio-carousel container and clones all
portfolio items into it, then hides the original wp-block-columns rows. */
.fw-portfolio-carousel {
position: relative;
width: 100%;
max-width: 420px;
aspect-ratio: 1 / 1;
margin: 0 auto;
overflow: hidden;
}
.fw-portfolio-carousel .fw-portfolio-item {
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.6s ease;
pointer-events: none;
}
.fw-portfolio-carousel .fw-portfolio-item.is-active {
opacity: 1;
pointer-events: auto;
}
.fw-carousel-dots {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 20px;
padding: 0 16px;
}
.fw-carousel-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--fw-divider);
border: none;
padding: 0;
cursor: pointer;
transition: background 0.2s, transform 0.2s;
}
.fw-carousel-dot.is-active {
background: var(--fw-red);
transform: scale(1.3);
}
/* =========================================================
RESPONSIVE OVERRIDES
========================================================= */
/* =========================================================
MOBILE HAMBURGER MENU
Force GeneratePress's toggle visible on mobile and style it
to match the brand.
========================================================= */
@media (max-width: 768px) {
.menu-toggle,
button.menu-toggle {
display: inline-flex !important;
visibility: visible !important;
align-items: center;
gap: 8px;
background: transparent !important;
color: var(--fw-off-white) !important;
border: none !important;
outline: none !important;
box-shadow: none !important;
padding: 8px !important;
cursor: pointer;
font-family: var(--fw-font-display);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
margin-left: auto;
border-radius: 0;
}
.menu-toggle svg,
.menu-toggle .gp-icon svg {
fill: currentColor !important;
stroke: currentColor !important;
width: 22px !important;
height: 22px !important;
}
/* Hide the "Menu" text label; keep only the icon */
.menu-toggle .mobile-menu,
.menu-toggle span:not(.gp-icon):not([class*="icon"]) {
display: none !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
overflow: hidden !important;
}
/* Tighter padding since there's no text now */
.menu-toggle,
button.menu-toggle {
padding: 10px 12px !important;
}
/* ============ Hide duplicate menu toggles ============
GP renders two toggles: one inline in #mobile-menu-control-wrapper
(inside the header) and one in the main nav bar below. Keep only
the inline one, hide everything else.
Confirmed from DOM: the inline toggle lives in