/* Theme Name: South Florida Health Theme URI: https://sofloridahealth.com Description: Warm-editorial child theme for GeneratePress. Magazine-style local health & wellness review guide for South Florida. Server-rendered, semantic, GEO-friendly. Author: South Florida Health Template: generatepress Version: 1.14.7 Text Domain: south-florida-health */ /* ============================================================ 1. DESIGN TOKENS — "warm editorial" Role-based tokens. Change a value here, it updates everywhere. Palette: ivory paper · espresso ink · terracotta accent · sage secondary. ============================================================ */ :root { /* Surfaces */ --sfh-paper: #FBFAF8; /* page background */ --sfh-white: #FFFFFF; /* content surface */ --sfh-surface: #F4EFE7; /* subtle bands / stripes */ /* Ink */ --sfh-ink: #241F1B; /* headings, dark UI, footer */ --sfh-body: #3A332E; /* body text */ --sfh-muted: #7A736C; /* secondary text */ --sfh-line: #EAE3D9; /* borders, rules */ /* Accent — terracotta (primary: links, CTAs, highlights) */ --sfh-accent: #B8442D; /* link/accent text — AA on white */ --sfh-accent-dark: #933421; /* accent hover */ --sfh-accent-fill: #C24A2F; /* CTA button fill (white text) */ --sfh-accent-fill-dark: #A63C24; /* Secondary — sage (outline buttons, quiet accents) */ --sfh-sage: #6E7C63; --sfh-sage-dark: #566149; /* Backwards-compat aliases — existing .sfh-* markup on other pages (Boca guide, etc.) references these names; keep them mapped. */ --sfh-ivory: var(--sfh-paper); --sfh-navy: var(--sfh-ink); /* dark UI role, now espresso */ --sfh-teal: var(--sfh-accent); /* primary accent role */ --sfh-teal-dark: var(--sfh-accent-dark); --sfh-sand: var(--sfh-accent-fill); /* button fill role */ --sfh-sand-dark: var(--sfh-accent-fill-dark); /* Type */ --sfh-serif: 'Fraunces', Georgia, 'Times New Roman', serif; --sfh-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; /* Rhythm */ --sfh-maxw: 1160px; --sfh-radius: 10px; --sfh-shadow: 0 1px 3px rgba(36,31,27,.05), 0 10px 30px rgba(36,31,27,.06); } /* ============================================================ 2. BASE ============================================================ */ body { background: var(--sfh-paper); color: var(--sfh-body); font-family: var(--sfh-sans); font-size: 18px; line-height: 1.7; -webkit-font-smoothing: antialiased; } .site-content { padding-top: 0; } /* Guard against the full-bleed (100vw) sections causing horizontal scroll. 'clip' contains overflow without breaking position:sticky like 'hidden' can. */ .site-content, .inside-article { overflow-x: clip; } /* Full-bleed page architecture. GeneratePress "separate containers" wraps page content in a 1160px white card (.inside-article: 30px padding + white background). These pages are built entirely from edge-to-edge sections, and the card both boxes the colored bands and gets clipped by the overflow guard above — the "blocky" look. Let the content wrapper span the viewport and strip the card; the section backgrounds now reach both edges, while .sfh-wrap (also 1160px) re-centers the inner content so it still lines up under the header nav. */ .page .grid-container.container { max-width: 100%; padding: 0; } .page .content-area, .page .site-main, .page .inside-article, .page .entry-content { max-width: 100%; width: auto; } .page .inside-article { padding: 0; background: transparent; box-shadow: none; border: 0; } h1, h2, h3, h4, .entry-title { font-family: var(--sfh-serif); color: var(--sfh-ink); font-weight: 600; line-height: 1.16; letter-spacing: -0.01em; } h1 { font-size: clamp(2.2rem, 4.4vw, 3.2rem); margin-bottom: .5em; } h2 { font-size: clamp(1.65rem, 3vw, 2.25rem); margin-top: 1.6em; } h3 { font-size: 1.32rem; margin-top: 1.4em; } p, li { max-width: 72ch; } a { color: var(--sfh-accent); text-decoration: none; } a:hover { color: var(--sfh-accent-dark); } .inside-article, .page-content, .entry-content { color: var(--sfh-body); } /* ============================================================ 3. HEADER + NAVIGATION (single-row: branding left, nav right) Pairs with generate_settings nav_position_setting = nav-float-right. ============================================================ */ .site-header { background: var(--sfh-white); border-bottom: 1px solid var(--sfh-line); /* Sticky: header rides along on scroll. Works because no ancestor uses overflow:hidden — .site-content uses overflow-x:clip (sticky-safe). */ position: sticky; top: 0; z-index: 100; } .inside-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 18px; padding-bottom: 18px; } .site-logo img, .header-image { max-height: 52px; width: auto; } /* Branding: the "SouthFloridaHealth" wordmark IS the logo — title + tagline stacked, no separate logo box. (The condensed wordmark text is produced by the generate_site_title_output filter in functions.php; the WP Site Title stays "South Florida Health" for SEO/accessibility.) */ /* body.nav-float-right prefix beats GeneratePress's `.nav-float-right .inside-header .site-branding{display:inline-block}` (0,0,3,0). */ body.nav-float-right .inside-header .site-branding { display: flex; flex-direction: column; justify-content: center; } .inside-header .site-branding .main-title { margin: 0; } .inside-header .site-branding .site-description { margin: 0; } .main-title, .site-title a { font-family: var(--sfh-serif); font-weight: 600; letter-spacing: -0.01em; } /* Site title in the brand terracotta (same red as the "Get Listed" button). Target the anchor to beat GeneratePress's cached `.main-title a{color:#222}`. */ .main-title a, .main-title a:hover, .main-title a:focus, .site-title a { color: var(--sfh-accent-fill); } /* Site-title sizing — GeneratePress's default title runs oversized in this single-row header ("South Florida Health" crowds the nav). Scale it down so it sits comfortably beside the menu. Scoped 3-deep to beat GP's own rule. */ .inside-header .site-branding .main-title, .inside-header .site-branding .main-title a { font-size: clamp(1.3rem, 2.1vw, 1.6rem); line-height: 1.12; } .site-description { color: var(--sfh-muted); font-family: var(--sfh-sans); } /* Nav sits on the same row, vertically centered */ .main-navigation { background: transparent; display: flex; align-items: center; } .main-navigation, .main-navigation ul { background: transparent; } /* Top-level menu as a single nowrap flex row. GP floats the items, which wrap the "Get Listed" pill to a second line once the branding widened for the logo. Flex + nowrap keeps all five on one line and vertically centered. Desktop only (min-width:769px) — below that GP swaps to the hamburger and hides this ul; overriding its display here would force the menu open and overflow the viewport. */ @media (min-width: 769px) { .main-navigation .main-nav > ul { display: flex; flex-wrap: nowrap; align-items: center; } /* Items keep natural width (no flex-shrink) and each link stays on one line, so the "Med Spas ⌄" label + caret never wrap and inflate the row height. */ .main-navigation .main-nav > ul > li { flex: none; } .main-navigation .main-nav > ul > li > a { white-space: nowrap; } } .main-navigation .main-nav ul li a { font-family: var(--sfh-sans); font-weight: 500; color: var(--sfh-ink); letter-spacing: .01em; } .main-navigation .main-nav ul li a:hover, .main-navigation .main-nav ul li.current-menu-item a { color: var(--sfh-accent); background: transparent; } /* Terracotta underline on active/hover nav item — TOP LEVEL ONLY (> ul > li), so dropdown/mega-menu city links don't inherit it. */ .main-navigation .main-nav > ul > li:not(.sfh-nav-cta) > a::after { content: ""; display: block; height: 2px; width: 0; background: var(--sfh-accent); transition: width .2s ease; margin-top: 4px; } .main-navigation .main-nav > ul > li:not(.sfh-nav-cta):hover > a::after, .main-navigation .main-nav > ul > li:not(.sfh-nav-cta).current-menu-item > a::after { width: 100%; } /* "Get Listed" nav item rendered as a solid CTA button. inline-flex + line-height:1 keeps the pill sized to its text, not the full nav-row height — fixes the oversized/"goofy" block. */ /* Center the pill within the nav row so it sits at the same eye level as the text items (which GeneratePress vertically centers by line-height). */ .main-navigation .main-nav ul li.sfh-nav-cta { display: flex; align-items: center; /* align-self overrides the flex row's own alignment: the pill is shorter than the text items' line boxes, so without this it top-aligns and rides high. Centering the li itself drops it onto the row's centerline. */ align-self: center; vertical-align: middle; /* fallback if the row is inline-block, not flex */ } .main-navigation .main-nav ul li.sfh-nav-cta > a, .main-navigation .main-nav ul li.sfh-nav-cta > a:hover { display: inline-flex; align-items: center; background: var(--sfh-accent-fill); color: #fff; border-radius: 9px; padding: .7em 1.5em; line-height: 1; font-size: 1.02rem; font-weight: 600; letter-spacing: .01em; margin-left: 12px; } .main-navigation .main-nav ul li.sfh-nav-cta > a:hover { background: var(--sfh-accent-fill-dark); } .main-navigation .main-nav ul li.sfh-nav-cta > a::after { display: none; } /* ---- Mega dropdown: "Med Spas" → Palm Beach County city guides ---- GeneratePress reveals sub-menus via opacity/visibility (not display), so overriding the panel's layout to a grid is safe. */ .main-navigation .sfh-mega > ul.sub-menu { /* Fixed + viewport-centered: the Med Spas trigger sits ~55% across a right-floated nav, so anchoring the panel to the
  • pushes a wide panel off the right edge. Detaching to the viewport keeps it centered and on-screen at every width. top ≈ sticky-header height. */ position: fixed; top: 112px; /* measured sticky-header height ≈114px; -2px for a seamless overlap */ /* GeneratePress sets `left:auto` on the open sub-menu with high specificity; force viewport-centering that doesn't depend on GP's left/right values. */ left: 50% !important; right: auto !important; transform: translateX(-50%); margin: 0 !important; box-sizing: border-box; z-index: 200; width: min(920px, 94vw); padding: 20px; display: grid; /* [featured card] [city col] [city col]. 5 rows = label + 4 city rows; the card spans all of them. Assumes ~8 city links (2 cols × 4 rows) — adjust rows if the list changes. */ grid-template-columns: 340px 1fr 1fr; grid-template-rows: repeat(5, auto); gap: 3px 14px; background: var(--sfh-white); border: 1px solid var(--sfh-line); border-radius: 12px; box-shadow: 0 18px 50px rgba(36,31,27,.16); } /* Transparent hover bridge up to the header so moving the cursor down from "Med Spas" into the fixed panel never crosses a dead gap. */ .main-navigation .sfh-mega > ul.sub-menu::after { content: ""; position: absolute; left: 0; right: 0; top: -24px; height: 24px; } /* Section label — sits above the two city columns (not over the card) */ .main-navigation .sfh-mega > ul.sub-menu::before { content: "Palm Beach County"; grid-column: 2 / -1; grid-row: 1; font-family: var(--sfh-sans); font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sfh-muted); padding: 2px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--sfh-line); } /* Featured Boca card — left column, full height of the panel */ .main-navigation .sfh-mega > ul.sub-menu li.sfh-mega-feature { grid-column: 1; grid-row: 1 / -1; width: auto; margin: 0; } .main-navigation .sfh-mega-card { display: flex; flex-direction: column; height: 100%; white-space: normal; min-width: 0; background: var(--sfh-white); border: 1px solid var(--sfh-line); border-radius: 10px; overflow: hidden; text-decoration: none; transition: box-shadow .16s ease, transform .16s ease; } .main-navigation .sfh-mega-card:hover { box-shadow: 0 10px 28px rgba(36,31,27,.14); transform: translateY(-2px); } .main-navigation .sfh-mega-card-media { position: relative; display: block; } .main-navigation .sfh-mega-card-media .sfh-imgph { aspect-ratio: 16 / 10; } .sfh-featured-tag { position: absolute; top: 10px; left: 10px; font-family: var(--sfh-sans); font-size: .62rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--sfh-accent-fill); border-radius: 20px; padding: 4px 11px; box-shadow: 0 2px 10px rgba(36,31,27,.22); } .main-navigation .sfh-mega-card-body { padding: 13px 15px 15px; display: flex; flex-direction: column; gap: 6px; } .main-navigation .sfh-mega-card-title { font-family: var(--sfh-serif); font-weight: 600; font-size: 1.02rem; color: var(--sfh-ink); line-height: 1.2; } .main-navigation .sfh-mega-card-desc { color: var(--sfh-muted); font-size: .8rem; line-height: 1.45; } .main-navigation .sfh-mega-card-cta { margin-top: 2px; color: var(--sfh-accent); font-weight: 600; font-size: .84rem; } .main-navigation .sfh-mega-card:hover .sfh-mega-card-cta { color: var(--sfh-accent-dark); } /* City links inside the panel */ .main-navigation .sfh-mega > ul.sub-menu li { width: auto; } .main-navigation .sfh-mega > ul.sub-menu li:not(.sfh-mega-feature) > a { display: block; padding: 10px 12px; border-radius: 8px; font-family: var(--sfh-sans); font-weight: 500; color: var(--sfh-ink); white-space: nowrap; } .main-navigation .sfh-mega > ul.sub-menu li a:hover { background: var(--sfh-surface); color: var(--sfh-accent); } /* GeneratePress paints every sub-menu with its dark subnav colors (#3f3f3f / #4f4f4f hover). This panel is a LIGHT custom design, so that fill bleeds through as dark-on-dark (esp. the featured card). Neutralize it panel-scoped; !important beats GP's generated CSS (same pattern used for the panel's positioning overrides above). */ .main-navigation .sfh-mega > ul.sub-menu a { background: transparent !important; } .main-navigation .sfh-mega > ul.sub-menu li:not(.sfh-mega-feature) > a:hover { background: var(--sfh-surface) !important; } .main-navigation .sfh-mega > ul.sub-menu li.sfh-mega-feature > a, .main-navigation .sfh-mega > ul.sub-menu li.sfh-mega-feature > a:hover { background: var(--sfh-white) !important; } /* "Soon" cities — muted, non-actionable, with a small tag */ .main-navigation .sfh-mega > ul.sub-menu li.sfh-soon a { color: var(--sfh-muted); cursor: default; pointer-events: none; /* placeholder — no dead "#" jump-to-top on click */ display: flex; align-items: center; justify-content: space-between; gap: 10px; } .main-navigation .sfh-mega > ul.sub-menu li.sfh-soon a:hover { background: transparent; color: var(--sfh-muted); } .main-navigation .sfh-mega > ul.sub-menu li.sfh-soon a::after { content: "Soon"; font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sfh-sage-dark); border: 1px solid var(--sfh-line); border-radius: 20px; padding: 2px 8px; } /* ---- Mobile menu (≤768px) ---- GeneratePress ships a working hamburger + toggle JS, but two theme choices broke it here: (1) GP colors the toggle white for its normally-dark nav, and our header is white → the "Menu" button was invisible (white-on-white); and (2) the toggle is a full-width button that wrapped below the branding. We also don't want the desktop city mega-menu repeated on phones. This block: recolors the toggle to an ink pill with a hamburger, keeps the header one row (brand left, toggle right), drops the opened menu as a full-width solid panel BELOW the header (so it never overlaps the logo/title), and reduces "Med Spas" to a single hub link (city sub-menu + its dropdown arrow hidden). */ @media (max-width: 768px) { /* Header row: branding left, toggle right, on a single line. position:relative anchors the opened panel to the full header width. */ .inside-header { flex-wrap: nowrap; align-items: center; gap: 14px; position: relative; } .inside-header .site-branding { min-width: 0; } .inside-header .site-branding .site-description { display: none; } /* tagline crowds the button on phones */ .inside-header .site-branding .main-title, .inside-header .site-branding .main-title a { font-size: 1.2rem; line-height: 1.15; } /* Neutralize GP's positioned nav wrappers so the absolute panel below anchors to .inside-header (full width), not the narrow toggle column. */ .main-navigation { flex: 0 0 auto; margin-left: auto; position: static; } .main-navigation .inside-navigation { position: static; } /* Toggle: compact ink pill + hamburger glyph (overrides GP's white, full-width, 60px-line-height button). */ .main-navigation .menu-toggle { width: auto; line-height: 1; padding: 9px 14px; display: inline-flex; align-items: center; gap: 8px; color: var(--sfh-ink); font-family: var(--sfh-sans); font-weight: 600; font-size: .9rem; border: 1px solid var(--sfh-line); border-radius: 10px; } .main-navigation .menu-toggle .mobile-menu { color: var(--sfh-ink); padding-left: 0; } .main-navigation .menu-toggle::before { content: ""; width: 18px; height: 2px; background: currentColor; box-shadow: 0 6px 0 currentColor, 0 -6px 0 currentColor; } /* Opened menu: full-width solid panel dropping below the header bar. */ .main-navigation.toggled .main-nav { position: absolute; left: 0; right: 0; top: 100%; z-index: 120; background: var(--sfh-white); border-top: 1px solid var(--sfh-line); box-shadow: 0 14px 28px rgba(36, 31, 27, .12); padding: 4px 24px 18px; } .main-navigation.toggled .main-nav > ul { max-width: var(--sfh-maxw); margin: 0 auto; } .main-navigation.toggled .main-nav li { float: none; width: 100%; } .main-navigation.toggled .main-nav li > a { display: block; padding: 15px 2px; font-size: 1.05rem; color: var(--sfh-ink); border-bottom: 1px solid var(--sfh-line); } /* No city mega-menu on phones: "Med Spas" is just a link to the hub. */ .main-navigation .sfh-mega > ul.sub-menu { display: none !important; } .main-navigation .menu-item-has-children > a .dropdown-menu-toggle { display: none !important; } /* Keep "Get Listed" as the terracotta pill, not a bordered row link. */ .main-navigation.toggled .main-nav li.sfh-nav-cta { width: auto; } .main-navigation.toggled .main-nav li.sfh-nav-cta > a { display: inline-block; border-bottom: 0; margin-top: 14px; color: #fff; } } /* ============================================================ 4. BUTTONS (GP .button, WP blocks, and our .sfh-btn) Terracotta fill + white text (primary); sage outline (secondary). ============================================================ */ .sfh-btn, .wp-block-button__link, button.button, .button, input[type="submit"] { display: inline-block; font-family: var(--sfh-sans); font-weight: 600; font-size: .95rem; letter-spacing: .02em; text-transform: uppercase; padding: .85em 1.6em; border-radius: var(--sfh-radius); border: 2px solid transparent; background: var(--sfh-accent-fill); color: #fff; transition: background .18s ease, color .18s ease, border-color .18s ease; } .sfh-btn:hover, .wp-block-button__link:hover, .button:hover, input[type="submit"]:hover { background: var(--sfh-accent-fill-dark); color: #fff; text-decoration: none; } /* Secondary / outline (sage) */ .sfh-btn--secondary { background: transparent; color: var(--sfh-sage-dark); border-color: var(--sfh-sage); } .sfh-btn--secondary:hover { background: var(--sfh-sage); color: #fff; } /* Ghost button for use on dark bands */ .sfh-btn--ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.55); } .sfh-btn--ghost:hover { background: #fff; color: var(--sfh-ink); border-color: #fff; } /* ============================================================ 5. LAYOUT HELPERS ============================================================ */ .sfh-wrap { max-width: var(--sfh-maxw); margin: 0 auto; padding: 0 24px; } /* "Best Med Spas in {city}" guide article. The GP content card + its 30px padding are stripped site-wide (section 2), so the guide supplies its own centered column + gutter — without this it renders full-bleed, flush-left. */ .sfh-boca { max-width: var(--sfh-maxw); margin: 0 auto; padding: 40px 24px 72px; } /* Intro paragraph runs the full content width, unlike the 72ch default (§2). */ .sfh-intro p { max-width: none; } /* Visually-hidden: present for screen readers / form semantics, off-screen visually. */ .sfh-vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .sfh-section { padding: 64px 0; } /* Full-bleed sections: break out of GeneratePress's constrained content column to span the viewport, then re-constrain inner content with .sfh-wrap. */ .sfh-hero, .sfh-band, .sfh-band--ink, .sfh-band--navy { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } .sfh-band { background: var(--sfh-surface); padding: 64px 0; } .sfh-band--ink { background: var(--sfh-ink); color: #EDE7DF; padding: 72px 0; } .sfh-band--ink h1, .sfh-band--ink h2, .sfh-band--ink h3 { color: #FFFFFF; } /* legacy alias */ .sfh-band--navy { background: var(--sfh-ink); color: #EDE7DF; padding: 72px 0; } .sfh-band--navy h1, .sfh-band--navy h2, .sfh-band--navy h3 { color: #FFFFFF; } /* Links on dark bands: light on hover so they stay readable against the ink background (the accent-dark hover reads as near-black on ink). No underline to fall back on now, so contrast has to carry it. */ .sfh-band--ink a:hover, .sfh-band--navy a:hover, .sfh-hero-panel a:hover { color: #FFFFFF; } .sfh-eyebrow { font-family: var(--sfh-sans); text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; font-weight: 600; color: var(--sfh-accent); margin-bottom: .6em; } .sfh-lead { font-size: 1.22rem; color: var(--sfh-muted); } .sfh-center { text-align: center; } .sfh-center .sfh-lead { margin-left: auto; margin-right: auto; } /* ============================================================ 6. HERO (split: value-prop copy left, featured guide card right) ============================================================ */ .sfh-hero { background: radial-gradient(1100px 460px at 82% -120px, rgba(194,74,47,.09), transparent 68%), linear-gradient(180deg, var(--sfh-white) 0%, var(--sfh-paper) 100%); border-bottom: 1px solid var(--sfh-line); padding: 72px 0; } .sfh-hero-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; } .sfh-hero-copy h1 { margin: 0 0 .5em; max-width: 15ch; font-size: clamp(2.3rem, 4.6vw, 3.4rem); } .sfh-hero-copy p.sfh-lead { font-size: 1.22rem; color: var(--sfh-muted); margin: 0 0 1.7em; max-width: 48ch; } .sfh-hero-copy .sfh-cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 0; } /* Hero search — a real search box (routes to the /med-spas/ directory) is the primary action; "List your med spa" sits below as the provider path. */ .sfh-hero-search { display: flex; gap: 10px; max-width: 30rem; margin: 0 0 16px; } .sfh-hero-search input[type="search"] { flex: 1 1 auto; min-width: 0; font-family: var(--sfh-sans); font-size: 1.02rem; color: var(--sfh-body); background: var(--sfh-white); border: 1px solid var(--sfh-line); border-radius: var(--sfh-radius); padding: .82em 1.05em; box-shadow: var(--sfh-shadow); transition: border-color .16s ease, box-shadow .16s ease; } .sfh-hero-search input[type="search"]::placeholder { color: var(--sfh-muted); } .sfh-hero-search input[type="search"]:focus { outline: none; border-color: var(--sfh-accent); box-shadow: 0 0 0 3px rgba(194,74,47,.15); } .sfh-hero-search .sfh-btn { flex: none; } .sfh-hero-cta { margin-top: 0; } /* Hero media (right column) — single image placeholder for visual balance */ .sfh-hero-media .sfh-imgph { aspect-ratio: 5 / 6; border-radius: 16px; box-shadow: var(--sfh-shadow); } @media (max-width: 900px) { .sfh-hero-split { grid-template-columns: 1fr; gap: 32px; } .sfh-hero-copy h1 { max-width: 18ch; } .sfh-hero-copy p.sfh-lead { max-width: 60ch; } .sfh-hero-media .sfh-imgph { aspect-ratio: 16 / 10; } } /* Contained dark hero panel (guide pages, inside content column) */ .sfh-hero-panel { background: var(--sfh-ink); color: #EDE7DF; border-radius: 14px; padding: 56px 40px; text-align: center; margin: 8px 0 28px; } .sfh-hero-panel h1 { color: #FFFFFF; margin: .1em 0 .35em; } .sfh-hero-panel .sfh-eyebrow { color: var(--sfh-accent-fill); } .sfh-hero-panel .sfh-lead { color: #D8D0C6; font-size: 1.2rem; max-width: 62ch; margin: 0 auto; } .sfh-cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 24px; } .sfh-hero-panel .sfh-cta-row { justify-content: center; } /* Split guide hero: left-aligned copy on the left, a small featured-image container on the right. Scoped to --split so the reused .sfh-hero-panel CTA block at the foot of the page stays centered. */ .sfh-hero-panel--split { display: grid; grid-template-columns: 1.5fr .55fr; gap: 44px; align-items: center; text-align: left; } .sfh-hero-panel-copy > :first-child { margin-top: 0; } .sfh-hero-panel--split h1 { max-width: 18ch; } /* Undo the centered lead (margin:0 auto, 62ch) inherited from .sfh-hero-panel */ .sfh-hero-panel--split .sfh-lead { margin: 0; max-width: 54ch; } .sfh-hero-panel-media { position: relative; aspect-ratio: 4 / 5; border-radius: 14px; overflow: hidden; background: radial-gradient(120% 130% at 22% 0%, rgba(194,74,47,.16), transparent 55%), rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; } /* Placeholder label — hidden once a real replaces the div */ .sfh-hero-panel-media[data-label]::after { content: attr(data-label); font-family: var(--sfh-sans); text-transform: uppercase; letter-spacing: .14em; font-size: .68rem; font-weight: 600; color: #C9C0B6; border: 1px solid rgba(255,255,255,.2); border-radius: 40px; padding: 6px 15px; } /* When Brad swaps the div for an */ img.sfh-hero-panel-media { object-fit: cover; } @media (max-width: 720px) { .sfh-hero-panel--split { grid-template-columns: 1fr; gap: 28px; } .sfh-hero-panel-media { aspect-ratio: 16 / 10; max-width: 460px; } } /* ============================================================ 7. CARD GRIDS (services, categories, featured) ============================================================ */ .sfh-grid { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .sfh-card { background: var(--sfh-white); border: 1px solid var(--sfh-line); border-radius: var(--sfh-radius); box-shadow: var(--sfh-shadow); padding: 26px; } .sfh-card h3 { margin-top: 0; } .sfh-card p { color: var(--sfh-muted); margin-bottom: 0; } .sfh-card--link { display: block; color: inherit; transition: transform .16s ease, box-shadow .16s ease; } .sfh-card--link:hover { transform: translateY(-3px); box-shadow: 0 8px 30px rgba(36,31,27,.10); text-decoration: none; } /* Featured area callout (home) */ .sfh-featured { display: grid; gap: 28px; align-items: center; grid-template-columns: 1.1fr 1fr; } .sfh-featured .sfh-featured-card { background: var(--sfh-white); border: 1px solid var(--sfh-line); border-radius: var(--sfh-radius); box-shadow: var(--sfh-shadow); padding: 32px; } @media (max-width: 780px) { .sfh-featured { grid-template-columns: 1fr; } } /* ============================================================ 8. TRUST STRIP ("How we evaluate") ============================================================ */ .sfh-trust { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); } .sfh-trust-item { text-align: left; padding-top: 18px; border-top: 2px solid var(--sfh-accent); } .sfh-trust-item .sfh-trust-num { font-family: var(--sfh-serif); font-size: 2.1rem; color: var(--sfh-accent); } .sfh-trust-item h3 { margin-top: .3em; } .sfh-trust-item p { color: var(--sfh-muted); } /* ============================================================ 9. GEO TABLES (comparison + cost guide) ============================================================ */ .medspa-comparison-table, .boca-cost-guide { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: .98rem; background: var(--sfh-white); border: 1px solid var(--sfh-line); border-radius: var(--sfh-radius); overflow: hidden; } .medspa-comparison-table th, .boca-cost-guide th { background: var(--sfh-ink); color: #FFFFFF; font-family: var(--sfh-sans); font-weight: 600; text-align: left; padding: 12px 14px; font-size: .85rem; text-transform: uppercase; letter-spacing: .03em; } .medspa-comparison-table td, .boca-cost-guide td { padding: 12px 14px; border-top: 1px solid var(--sfh-line); vertical-align: top; } .medspa-comparison-table tbody tr:nth-child(even), .boca-cost-guide tbody tr:nth-child(even) { background: var(--sfh-surface); } .sfh-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ============================================================ 10. METHODOLOGY + AREA GUIDE + BANNER ============================================================ */ .sfh-methodology { background: var(--sfh-surface); border-left: 4px solid var(--sfh-sage); border-radius: 0 var(--sfh-radius) var(--sfh-radius) 0; padding: 24px 28px; margin: 1.5em 0; } .sfh-area-guide { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); } .sfh-banner { background: #F7E7DF; border: 1px solid var(--sfh-accent-fill); border-radius: var(--sfh-radius); padding: 14px 20px; margin: 1.5em 0; font-weight: 600; color: var(--sfh-ink); } /* ============================================================ 11. FAQ (native
    / — zero JS, GEO-friendly) ============================================================ */ .sfh-faq { margin: 1.5em 0; } .sfh-faq-item { background: var(--sfh-white); border: 1px solid var(--sfh-line); border-radius: var(--sfh-radius); margin-bottom: 12px; overflow: hidden; } .sfh-faq-item > summary { cursor: pointer; list-style: none; padding: 16px 20px; font-family: var(--sfh-serif); font-size: 1.1rem; color: var(--sfh-ink); font-weight: 600; display: flex; justify-content: space-between; align-items: center; } .sfh-faq-item > summary::-webkit-details-marker { display: none; } .sfh-faq-item > summary::after { content: "+"; color: var(--sfh-accent); font-size: 1.4rem; line-height: 1; } .sfh-faq-item[open] > summary::after { content: "\2013"; } .sfh-faq-answer { padding: 0 20px 18px; color: var(--sfh-body); } /* ============================================================ 12. FOOTER ============================================================ */ .site-footer, .site-info { background: var(--sfh-ink); color: #CFC7BD; } .site-footer a, .site-info a { color: #FFFFFF; } .site-footer a:hover { color: var(--sfh-accent-fill); } /* Footer link band — sits above the copyright bar, injected via the generate_footer hook (functions.php). Brand block + link columns. */ .sfh-footer { border-top: 1px solid rgba(255,255,255,.08); padding: 56px 0 40px; } .sfh-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; align-items: start; } .sfh-footer-brand { display: flex; align-items: flex-start; gap: 14px; max-width: 42ch; } .sfh-footer-title { display: block; font-family: var(--sfh-serif); font-weight: 600; font-size: 1.35rem; color: var(--sfh-accent-fill); line-height: 1.15; } .sfh-footer-tag { margin: .4em 0 0; color: #A79E93; font-size: .92rem; line-height: 1.5; max-width: none; } .sfh-footer-head { margin: 4px 0 14px; color: #FFFFFF; font-family: var(--sfh-sans); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .sfh-footer-col ul { list-style: none; margin: 0; padding: 0; } .sfh-footer-col li { margin: 0 0 10px; max-width: none; } .sfh-footer-col a { color: #D8D0C6; font-size: .96rem; text-decoration: none; } .sfh-footer-col a:hover { color: var(--sfh-accent-fill); } .sfh-footer-soon { color: #7E766C; font-size: .96rem; display: inline-flex; align-items: center; gap: 8px; } .sfh-footer-soon::after { content: "Soon"; font-size: .58rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--sfh-sage); border: 1px solid rgba(255,255,255,.16); border-radius: 20px; padding: 1px 7px; } @media (max-width: 768px) { .sfh-footer { padding: 40px 0 28px; } .sfh-footer-grid { grid-template-columns: 1fr 1fr; gap: 28px 24px; } .sfh-footer-brand { grid-column: 1 / -1; } } @media (max-width: 480px) { .sfh-footer-grid { grid-template-columns: 1fr; } } /* ============================================================ 13. INTERIOR PAGES (page-head, criteria, tiers, steps, contact) ============================================================ */ /* Compact, left-aligned editorial page-head — distinct from the tall centered homepage hero so interior pages read as "article", not "landing". */ .sfh-pagehead { background: radial-gradient(900px 300px at 12% -100px, rgba(194,74,47,.07), transparent 70%), linear-gradient(180deg, var(--sfh-white) 0%, var(--sfh-paper) 100%); border-bottom: 1px solid var(--sfh-line); padding: 60px 0 44px; } .sfh-pagehead h1 { margin: 0 0 .35em; max-width: 20ch; } .sfh-pagehead .sfh-lead { max-width: 62ch; margin: 0; } /* Interior-page dark hero: the hub, the /med-spas/ directory, and /about/ reuse the guides' dark split panel (.sfh-hero-panel--split) so all landing surfaces match. This wrapper just constrains the contained panel to content width and gives it the same top breathing room the guides get from .sfh-boca. */ .sfh-hero-wrap { padding-top: 32px; } @media (max-width: 720px) { .sfh-hero-wrap { padding-top: 20px; } } /* Breadcrumb trail — quiet, left-aligned strip above the page-head/hero on the directory and guide pages. Renders a