/*
Theme Name: Formyoule
Theme URI: https://www.formyouleinc.com/
Author: Deejay Piaoan
Description: Custom block theme for Formyoule Inc. — private label skincare manufacturer. Native FSE build, no page builder.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.0
Version: 0.2.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: formyoule
Tags: full-site-editing, block-patterns, custom-colors, custom-logo
*/
/*
* Global styling lives in theme.json. This file carries only the handful of
* component rules that theme.json can't express (card hover, image aspect,
* fluid card grids). All values reference preset variables — no hardcoded design.
*/
/* Service cards: white tile, padded, subtle lift on hover */
.fmy-card {
padding: var(--wp--preset--spacing--30);
border-radius: var(--wp--custom--radius--sm);
border: 1px solid rgb(var(--wp--custom--rgb--ink) / 0.08);
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.fmy-card:hover {
transform: translateY(-3px);
box-shadow: 0 12px 30px rgb(var(--wp--custom--rgb--ink) / 0.10);
}
/* Consistent 4:5 crop for all card/gallery imagery so rows line up */
.wp-block-column .wp-block-image img {
aspect-ratio: 4 / 5;
object-fit: cover;
width: 100%;
display: block;
}
/* Category tiles: caption sits tight under the image */
.wp-block-column > .wp-block-heading {
margin-top: var(--wp--preset--spacing--20);
}
/* Details/FAQ: pointer + gold marker, no default disclosure triangle clutter */
.wp-block-details summary {
cursor: pointer;
list-style: none;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--wp--preset--spacing--40);
padding: var(--wp--preset--spacing--50) 0;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary strong { /* question: serif display, medium weight — matches the mockup */
font-family: var(--wp--preset--font-family--display);
font-size: 1.25rem;
font-weight: 500;
line-height: 1.3;
color: var(--wp--preset--color--ink);
}
.wp-block-details summary::after {
content: "+";
color: var(--wp--preset--color--gold);
font-size: 1.5rem;
line-height: 1;
flex: 0 0 auto;
margin-top: 2px;
}
.wp-block-details[open] summary::after { transform: rotate(45deg); }
/* Slight open/close animation for the Common Questions accordions — including the
auto-close of the previously-open one (JS sets .open=false, which reverses this
transition). interpolate-size lets height animate to/from auto; older browsers
just toggle instantly (progressive enhancement). */
:root { interpolate-size: allow-keywords; }
.wp-block-details summary::after { transition: transform 0.3s ease; }
.wp-block-details::details-content {
block-size: 0;
overflow: clip;
opacity: 0;
transition: block-size 0.28s ease, opacity 0.28s ease, content-visibility 0.28s allow-discrete;
}
.wp-block-details[open]::details-content {
block-size: auto;
opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
.wp-block-details::details-content { transition: none; }
}
/* Header: keep the two tiers flush to the top edge */
.fmy-header { position: relative; z-index: 10; }
/* Mobile: stack card grids cleanly (core handles most; this tightens gaps) */
@media (max-width: 781px) {
.fmy-logo__mark { font-size: var(--wp--preset--font-size--large); }
/* Ticker pill + header booking CTA crowd the small-screen hero;
the sticky bottom bar already covers booking on mobile. */
.fmy-header .fmy-pill { display: none; }
/* Home ticker text wraps to 2-3 lines on phones — raise the 60px cap so it isn't clipped. */
body.home .fmy-header__ticker { max-height: 120px; }
.fmy-header__main .wp-block-buttons { display: none; }
/* The fixed header (~107px on mobile) was overlapping the hero eyebrow + heading.
Top-align the hero content and clear the header so nothing clumps. */
.fmy-hero.wp-block-cover { align-items: flex-start; padding-top: 152px !important; }
}
/* ---- Hero ---- */
/* Desktop: clear the fixed header (~86px) so the eyebrow has breathing room below it
(was tucked under the header at ~51px). Mobile clearance handled above. */
@media (min-width: 782px) {
.fmy-hero.wp-block-cover { padding-top: clamp(134px, 14vh, 172px) !important; }
}
/* Slow ken-burns drift on the hero image, matching the mockup's subtle motion */
.fmy-hero .wp-block-cover__image-background {
animation: fmyKenBurns 22s ease-in-out infinite alternate;
transform-origin: 70% 30%;
}
@keyframes fmyKenBurns {
from { transform: scale(1.04); }
to { transform: scale(1.14); }
}
@media (prefers-reduced-motion: reduce) {
.fmy-hero .wp-block-cover__image-background { animation: none; }
}
/* Credential chips */
.fmy-chip {
border: 1px solid rgb(var(--wp--custom--rgb--gold) / 0.5);
border-radius: var(--wp--custom--radius--sm);
padding: 6px 12px;
background: rgb(var(--wp--custom--rgb--gold) / 0.08);
}
/* Category chips — click to reveal a product-examples dropdown (matches the mockup). */
.fmy-cat-chips { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--20); }
.fmy-cat-item { position: relative; }
.fmy-cat-chip {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--wp--preset--font-family--body);
font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
color: rgb(var(--wp--custom--rgb--cream) / 0.88);
padding: 6px 14px; cursor: pointer;
border: 1px solid rgb(var(--wp--custom--rgb--gold) / 0.35);
border-radius: var(--wp--custom--radius--sm);
background: rgb(var(--wp--custom--rgb--ink-black) / 0.42);
backdrop-filter: blur(8px);
transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.fmy-cat-chip:hover { border-color: rgb(var(--wp--custom--rgb--gold) / 0.6); color: var(--wp--preset--color--gold); }
.fmy-cat-chip[aria-expanded="true"] {
border-color: rgb(var(--wp--custom--rgb--gold) / 0.65);
background: rgb(var(--wp--custom--rgb--gold) / 0.14);
color: var(--wp--preset--color--gold);
}
.fmy-cat-caret { transition: transform 0.2s ease; }
.fmy-cat-chip[aria-expanded="true"] .fmy-cat-caret { transform: rotate(180deg); }
/* Dropdown panel */
.fmy-cat-panel {
position: absolute; left: 0; top: calc(100% + 6px); z-index: 50; min-width: 220px;
background: rgb(var(--wp--custom--rgb--ink-black) / 0.97);
border: 1px solid rgb(var(--wp--custom--rgb--gold) / 0.3);
border-radius: var(--wp--custom--radius--md);
box-shadow: 0 12px 40px rgb(0 0 0 / 0.55);
backdrop-filter: blur(16px);
animation: fmyFadeIn 0.18s ease;
}
.fmy-cat-panel[hidden] { display: none; }
.fmy-cat-panel__head {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 10px 16px; border-bottom: 1px solid rgb(var(--wp--custom--rgb--gold) / 0.15);
}
.fmy-cat-panel__title {
font-family: var(--wp--preset--font-family--body);
font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
color: rgb(var(--wp--custom--rgb--cream) / 0.9);
}
.fmy-cat-panel__link {
font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
color: rgb(var(--wp--custom--rgb--gold) / 0.65); text-decoration: none; transition: color 0.15s ease;
}
.fmy-cat-panel__link:hover { color: var(--wp--preset--color--gold); }
.fmy-cat-panel__list { list-style: none; margin: 0; padding: 8px 0; }
.fmy-cat-panel__list li {
display: flex; align-items: center; gap: 8px; padding: 6px 16px;
font-size: 0.75rem; line-height: 1.4; color: rgb(var(--wp--custom--rgb--cream) / 0.72);
}
.fmy-cat-bullet { color: rgb(var(--wp--custom--rgb--gold) / 0.5); font-size: 0.6rem; }
@keyframes fmyFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
/* Hero CTAs: two-line buttons with icon + arrow, matching the mockup */
.fmy-hero-cta .wp-block-button__link {
display: inline-flex;
align-items: center;
gap: var(--wp--preset--spacing--20);
text-align: left;
text-transform: uppercase;
line-height: 1.3;
}
.fmy-hero-cta .fmy-btn-primary .wp-block-button__link { padding: 14px 24px; font-size: var(--wp--preset--font-size--small); }
.fmy-hero-cta .fmy-watch .wp-block-button__link { /* glass body — translucent cream + blur, like the mockup */
padding: 12px 20px;
font-size: var(--wp--preset--font-size--small);
background: rgb(var(--wp--custom--rgb--cream) / 0.08);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.fmy-btn-primary .wp-block-button__link::before { /* calendar icon, inherits the ink text color */
content: "";
width: 20px; height: 20px; flex: 0 0 auto;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E") center / contain no-repeat;
}
.fmy-btn-eyebrow { display: block; font-size: var(--wp--preset--font-size--x-small); font-weight: 600; letter-spacing: 0.14em; opacity: 0.72; }
.fmy-btn-main { display: block; font-weight: 700; letter-spacing: 0.06em; }
.fmy-btn-arrow { margin-left: auto; padding-left: var(--wp--preset--spacing--20); font-weight: 600; }
.fmy-play { /* gold play circle on the Watch button — glassy fill + rippling ring, like the mockup */
position: relative;
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; flex: 0 0 auto;
border: 1.5px solid rgb(var(--wp--custom--rgb--gold) / 0.6);
border-radius: 50%;
background: rgb(var(--wp--custom--rgb--gold) / 0.12);
color: var(--wp--preset--color--gold);
font-size: 0.625rem;
}
.fmy-play::after { /* rippling ring (Tailwind 'ping' style) */
content: "";
position: absolute;
inset: 0;
border-radius: 50%;
border: 1.5px solid rgb(var(--wp--custom--rgb--gold) / 0.35);
animation: fmy-ping 2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes fmy-ping { 75%, 100% { transform: scale(2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .fmy-play::after { animation: none; } }
.fmy-btn-link .wp-block-button__link {
padding: 0 0 6px;
border-bottom: 1px solid rgb(var(--wp--custom--rgb--gold) / 0.5);
font-size: var(--wp--preset--font-size--small);
font-weight: 600;
letter-spacing: 0.08em;
}
.fmy-btn-link .fmy-btn-arrow { margin-left: 0; padding-left: 0; }
/* Why-us CTA: label + right arrow. Single line on desktop; the label breaks to
two lines only on mobile (the
is hidden here, shown in the mobile block). */
.fmy-why-cta .wp-block-button__link {
display: inline-flex;
align-items: center;
text-align: center;
line-height: 1.35;
}
.fmy-why-cta .fmy-btn-arrow { align-self: center; }
.fmy-why-cta br { display: none; }
/* Ingrid founder card */
/* Founder card — translucent ink-black + gold hairline + blur (matches the mockup). */
.fmy-founder-card {
max-width: 24rem;
background: rgb(var(--wp--custom--rgb--ink-black) / 0.52) !important;
border: 1px solid rgb(var(--wp--custom--rgb--gold) / 0.22);
border-radius: 6px;
backdrop-filter: blur(12px);
}
.fmy-avatar img {
border-radius: 50%;
border: 2px solid rgb(var(--wp--custom--rgb--gold) / 0.45);
object-position: center top;
}
.fmy-fc-name { color: var(--wp--preset--color--cream); line-height: 1.2; }
.fmy-fc-role { color: rgb(var(--wp--custom--rgb--cream) / 0.55); line-height: 1.35; }
.fmy-fc-exp { color: rgb(var(--wp--custom--rgb--gold) / 0.75); line-height: 1.35; }
/* "Available" status pill: gold-tint chip + pulsing gold dot. */
.fmy-badge-available {
margin-left: auto; align-self: center; flex-shrink: 0; white-space: nowrap;
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px; border-radius: 3px;
background: rgb(var(--wp--custom--rgb--gold) / 0.12);
color: var(--wp--preset--color--gold); letter-spacing: 0.08em;
}
.fmy-badge-dot {
width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
background: var(--wp--preset--color--gold);
animation: fmyPulse 2s ease infinite;
}
/* ---- Fixed header that floats over the hero, solidifies on scroll (matches mockup) ---- */
.fmy-header {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 30;
transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
/* At the top of the page the bar is transparent so the hero image shows behind it
(front page only — interior pages keep the solid bar, matching the mockup). */
body.home .fmy-header:not(.is-scrolled) { background-color: transparent !important; }
.fmy-header:not(.is-scrolled) .fmy-header__main { background-color: transparent !important; }
.fmy-header:not(.is-scrolled) .fmy-header__ticker { background-color: rgb(var(--wp--custom--rgb--ink) / 0.35) !important; }
/* The header wrapper renders narrower than the viewport, which inset the main bar (logo/nav)
~54px while the ticker + page sections sit at the 16px root padding. Full-bleed the main bar
the same way as the ticker so the logo lines up with the sections below. */
.fmy-header__main {
width: 100vw;
margin-left: calc(50% - 50vw);
padding-inline: var(--wp--style--root--padding-left, 16px);
box-sizing: border-box;
/* Slight gold hairline under the header, all pages (matches the mockup navbar). */
border-bottom: 1px solid rgb(var(--wp--custom--rgb--gold) / 0.12);
}
/* Once scrolled: solid ink + shadow */
.fmy-header.is-scrolled .fmy-header__main { background-color: var(--wp--preset--color--ink) !important; }
.fmy-header.is-scrolled { box-shadow: 0 6px 24px rgb(var(--wp--custom--rgb--ink) / 0.45); }
/* Home, scrolled to the very top: header is transparent, so hide the gold hairline too. */
body.home .fmy-header:not(.is-scrolled) .fmy-header__main { border-bottom-color: transparent; }
/* Desktop nav: hover + current-page both turn gold with a gold underline that
grows in from the left. Active page keeps the underline shown. */
.fmy-nav-wrap .wp-block-navigation-item__content {
position: relative;
padding-bottom: 4px;
transition: color 0.2s ease;
}
.fmy-nav-wrap .wp-block-navigation-item__content::after {
content: "";
position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
background: var(--wp--preset--color--gold);
transform: scaleX(0); transform-origin: left;
transition: transform 0.25s ease;
}
.fmy-header .fmy-nav-wrap .wp-block-navigation-item__content:hover,
.fmy-header .fmy-nav-wrap .wp-block-navigation-item__content.fmy-nav-active {
color: var(--wp--preset--color--gold);
}
.fmy-nav-wrap .wp-block-navigation-item__content:hover::after,
.fmy-nav-wrap .wp-block-navigation-item__content.fmy-nav-active::after {
transform: scaleX(1);
}
/* Header nav spacing — matches localhost (gap-6 = 24px between links, ml-2 before the Book CTA,
links at cream/0.68). */
.fmy-nav-wrap { gap: 24px; }
.fmy-nav-wrap .wp-block-navigation,
.fmy-nav-wrap .wp-block-navigation__container { gap: 24px; }
.fmy-header .fmy-nav-wrap .wp-block-navigation-item__content { color: rgb(var(--wp--custom--rgb--cream) / 0.68); }
.fmy-header__main .wp-block-buttons { margin-left: 8px; }
/* Header Book CTA: calendar icon + label on one line */
.fmy-header__main .wp-block-button__link { display: inline-flex; align-items: center; gap: 7px; }
.fmy-header__main .wp-block-button__link svg { flex-shrink: 0; }
/* Final-CTA primary button: calendar icon + label on one line */
.fmy-cta-zoom .wp-block-button__link { display: inline-flex; align-items: center; gap: 8px; }
.fmy-cta-zoom .wp-block-button__link svg { flex-shrink: 0; }
/* Final-CTA subhead: muted cream like the mockup (rgba(250,249,245,0.6)) */
.fmy-cta-sub { color: rgb(var(--wp--custom--rgb--cream) / 0.6) !important; }
/* "Email Us Directly" — underlined text link (not a boxed button), 1:1 with localhost. */
.fmy-cta-email .wp-block-button__link {
background: transparent !important;
border: 0 !important;
border-bottom: 1px solid rgb(var(--wp--custom--rgb--cream) / 0.2) !important;
border-radius: 0 !important;
color: rgb(var(--wp--custom--rgb--cream) / 0.65) !important;
padding: 14px 4px !important;
font-size: 0.875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
display: inline-flex; align-items: center; gap: 8px;
box-shadow: none !important; transform: none !important;
}
.fmy-cta-email .wp-block-button__link:hover {
color: var(--wp--preset--color--gold) !important;
border-bottom-color: rgb(var(--wp--custom--rgb--gold) / 0.6) !important;
}
.fmy-cta-email .wp-block-button__link svg { flex: 0 0 auto; }
/* Ticker bar: gold-washed full-width band that only shows at the very top and
collapses away as soon as you scroll (matches localhost's behavior). */
.fmy-header__ticker {
background-color: var(--wp--preset--color--ink-black) !important;
position: relative;
overflow: hidden;
max-height: 60px;
transition: max-height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
/* Full-bleed: the gold wash must reach the viewport corners like the mockup */
width: 100vw;
margin-left: calc(50% - 50vw);
}
.fmy-header__ticker::before {
content: ""; position: absolute; inset: 0;
background: rgb(var(--wp--custom--rgb--gold) / 0.14);
pointer-events: none;
}
.fmy-header__ticker > * { position: relative; }
/* Ticker bar is a home-page device only — hidden on every interior page. */
body:not(.home) .fmy-header__ticker { display: none; }
/* Collapse the ticker once scrolled — leaving just the compact main bar */
.fmy-header.is-scrolled .fmy-header__ticker {
max-height: 0;
opacity: 0;
padding-top: 0 !important;
padding-bottom: 0 !important;
border-bottom-width: 0 !important;
}
/* "Now Accepting" pill: green pulsing status dot (matches the mockup). */
.fmy-pill { display: inline-flex; align-items: center; gap: 7px; }
.fmy-pill-dot {
width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
background: #22c55e; /* mockup pulse-dot green (rgb 34 197 94) */
animation: fmyPulse 2s ease infinite;
}
/* ---- Real lab gallery strip ---- */
.fmy-lab-strip { border-top: 1px solid rgb(var(--wp--custom--rgb--gold) / 0.12); border-bottom: 1px solid rgb(var(--wp--custom--rgb--gold) / 0.12); padding-inline: 0 !important; }
/* Balance the band like the mockup: modest header space on top, images flush to the bottom */
.fmy-lab-strip { padding-block: 0 !important; }
.fmy-lab-strip > .wp-block-group { padding-top: var(--wp--preset--spacing--30) !important; padding-bottom: var(--wp--preset--spacing--30) !important; }
.fmy-lab-strip .fmy-lab-grid { margin-bottom: 0 !important; }
.fmy-lab-grid { gap: 0; }
.fmy-lab-grid .wp-block-column + .wp-block-column { border-left: 1px solid rgb(var(--wp--custom--rgb--cream) / 0.05); }
.fmy-lab-shot .wp-block-cover__background {
background: linear-gradient(to top, rgb(var(--wp--custom--rgb--ink) / 0.78) 0%, rgb(var(--wp--custom--rgb--ink) / 0.18) 55%, transparent 100%) !important;
opacity: 1 !important;
}
.fmy-lab-shot { position: relative; }
/* position:static keeps .fmy-lab-tag anchored to the cover, but WP7's img-first
cover markup relies on the inner container being positioned to paint above the
image — restore stacking via z-index (valid here: it's a flex item). */
.fmy-lab-shot .wp-block-cover__inner-container { position: static; z-index: 1; width: 100%; padding: var(--wp--preset--spacing--40); }
.fmy-lab-tag {
position: absolute; top: 12px; left: 12px; z-index: 2;
margin: 0;
opacity: 0; transition: opacity 0.3s ease;
background: rgb(var(--wp--custom--rgb--gold) / 0.16);
border: 1px solid rgb(var(--wp--custom--rgb--gold) / 0.32);
color: var(--wp--preset--color--gold);
border-radius: var(--wp--custom--radius--sm);
font-size: var(--wp--preset--font-size--x-small);
font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
padding: 3px 8px;
}
.fmy-lab-shot:hover .fmy-lab-tag { opacity: 1; }
.fmy-lab-shot img, .fmy-svc-shot img, .fmy-cat-shot img { transition: transform 0.7s ease; }
.fmy-lab-shot:hover img,
.fmy-svc-card:hover .fmy-svc-shot img,
.fmy-cat-card:hover .fmy-cat-shot img { transform: scale(1.05); }
@media (max-width: 781px) {
/* Keep the lab shots 2-up (2×2), not 1-per-row. CSS Grid guarantees two equal columns
with no sub-pixel rounding overflow (which was forcing them to wrap 1-per-row). */
.fmy-lab-strip .fmy-lab-grid.wp-block-columns {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 0;
}
.fmy-lab-strip .fmy-lab-grid.wp-block-columns > .wp-block-column {
flex: initial !important; width: auto !important; max-width: none !important; min-width: 0 !important;
border-left: 0 !important;
}
/* Lab-strip header on mobile: drop the "See Our Process" link, let the label
take the full width on its own. */
.fmy-lab-strip > .wp-block-group > .wp-block-group > p:last-child { display: none; }
.fmy-lab-strip > .wp-block-group > .wp-block-group > p:first-child { flex: 1 1 100%; }
}
/* ---- Shared card pieces (services + categories) ---- */
/* Badge anchors to the CARD IMAGE (top-right like the mockup), not the cover's inner container */
.fmy-svc-shot, .fmy-cat-shot { position: relative; }
.fmy-svc-shot .wp-block-cover__inner-container,
.fmy-cat-shot .wp-block-cover__inner-container { position: static; z-index: 1; }
.fmy-svc-shot .fmy-card-badge { top: 16px; right: 16px; border-radius: 0; } /* service badges: top-4 right-4, square in mockup */
.fmy-card-badge {
position: absolute; top: 12px; right: 12px; z-index: 2;
margin: 0;
background: var(--wp--preset--color--gold);
color: var(--wp--preset--color--ink);
font-size: var(--wp--preset--font-size--x-small);
font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
padding: 4px 12px;
border-radius: var(--wp--custom--radius--sm);
}
.fmy-svc-card {
border: 1px solid rgb(var(--wp--custom--rgb--ink) / 0.08);
border-radius: var(--wp--custom--radius--sm);
overflow: hidden;
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.fmy-svc-card:hover { box-shadow: 0 18px 40px rgb(var(--wp--custom--rgb--ink) / 0.12); transform: translateY(-3px); }
.fmy-svc-shot .wp-block-cover__background {
background: linear-gradient(to bottom, transparent 50%, rgb(var(--wp--custom--rgb--ink) / 0.6) 100%) !important;
opacity: 1 !important;
}
.fmy-svc-meta > .wp-block-group:first-child {
border-right: 1px solid rgb(var(--wp--custom--rgb--ink) / 0.1);
padding-right: var(--wp--preset--spacing--40);
}
.fmy-svc-note { max-width: 400px; }
.fmy-svc-note a { color: var(--wp--preset--color--ink); text-decoration: underline; text-underline-offset: 3px; }
/* Home service-card body: match the mockup rhythm (heading 12 / copy 20 / meta 24)
with blockGap:0. The card is a flex column and the meta+"Get started" footer is
pinned to the bottom (margin-top:auto), so — even when cards in a row stretch to
equal height — "Get started" sits a consistent 24 above the card edge (card
padding = spacing|50 = 24) and 24 below the meta on EVERY card. */
.fmy-svc-card { display: flex; flex-direction: column; }
.fmy-svc-cardbody { display: flex; flex-direction: column; flex: 1 1 auto; }
.fmy-svc-cardbody > .wp-block-heading { margin-bottom: 12px !important; }
.fmy-svc-cardbody > p:nth-of-type(1) { margin-bottom: 20px !important; }
.fmy-svc-cardbody > .fmy-svc-meta { margin-top: auto !important; margin-bottom: 24px !important; padding-top: 20px !important; }
.fmy-cat-card {
border: 1px solid rgb(var(--wp--custom--rgb--cream) / 0.07);
border-radius: var(--wp--custom--radius--md);
overflow: hidden;
/* Column layout so the tinted body stretches to fill a card that's taller than
its content (e.g. the last card next to one whose tags wrapped) — no odd
dark gap below the text. */
display: flex;
flex-direction: column;
}
.fmy-cat-card__body { flex: 1 1 auto; }
.fmy-cat-shot .wp-block-cover__background {
background: linear-gradient(to bottom, rgb(var(--wp--custom--rgb--ink) / 0.1) 0%, rgb(var(--wp--custom--rgb--ink) / 0.65) 100%) !important;
opacity: 1 !important;
}
.fmy-cat-card__body { background: rgb(var(--wp--custom--rgb--cream) / 0.04); }
.fmy-cat-card__tags { color: rgb(var(--wp--custom--rgb--cream) / 0.5); }
.fmy-cat-cta {
background: rgb(var(--wp--custom--rgb--gold) / 0.07);
border-radius: var(--wp--custom--radius--md);
}
.fmy-dim { color: rgb(var(--wp--custom--rgb--cream) / 0.6) !important; }
/* Service/why cards: zoom the image on hover (Brad-style, pure CSS, GPU-cheap) */
.fmy-card .wp-block-image,
.fmy-stat-grid .wp-block-image,
.wp-block-column > .wp-block-image { overflow: hidden; border-radius: var(--wp--custom--radius--sm); }
.fmy-card .wp-block-image img,
.wp-block-column .wp-block-image img { transition: transform 0.45s ease; }
.fmy-card:hover .wp-block-image img,
.wp-block-column:hover .wp-block-image img { transform: scale(1.07); }
/* "Most Popular" service card: gold outline + badge */
.fmy-card--popular { border-color: var(--wp--preset--color--gold) !important; }
.fmy-badge-popular {
display: inline-block;
align-self: flex-start;
padding: 4px 10px;
border-radius: var(--wp--custom--radius--sm);
}
/* Hero mini-stats: full container width, pinned to the hero's bottom edge */
.fmy-hero-stats { width: 100%; }
/* Hero content sits in the same centered 1440px column as the header:
inset = (viewport - wide-size)/2 on large screens, spacing-70 on small. */
.fmy-hero.wp-block-cover { padding-inline: 0; }
.fmy-hero .wp-block-cover__inner-container { max-width: none; padding-inline: 0; }
.fmy-hero .wp-block-cover__inner-container > .alignwide {
width: 100%;
max-width: none;
margin-inline: 0;
padding-inline: max(var(--wp--preset--spacing--70), calc((100vw - var(--wp--style--global--wide-size)) / 2));
/* Clear the fixed header, then flow from the top like the mockup */
padding-top: var(--wp--preset--spacing--80);
display: flex;
flex-direction: column;
justify-content: flex-start;
min-height: calc(100vh - var(--wp--preset--spacing--80) - var(--wp--preset--spacing--60));
}
.fmy-hero .fmy-hero-stats { margin-top: auto; }
/* Guarantee a gap between the founder card and the stats row even when the viewport tightens */
.fmy-hero .fmy-founder-card { margin-bottom: var(--wp--preset--spacing--50); }
/* Hero text, exact mockup styling */
.fmy-hero h1 { text-shadow: 0 2px 24px rgb(var(--wp--custom--rgb--ink) / 0.5); }
.fmy-hero-sub { color: rgb(var(--wp--custom--rgb--gold) / 0.85) !important; letter-spacing: 0.02em; }
.fmy-hero-lead {
max-width: 520px;
color: rgb(var(--wp--custom--rgb--cream) / 0.82) !important;
line-height: 1.625;
text-shadow: 0 1px 8px rgb(var(--wp--custom--rgb--ink) / 0.35);
}
@media (max-width: 781px) {
/* Taller mobile header (wrapped ticker) needs more clearance */
.fmy-hero .wp-block-cover__inner-container > .alignwide {
padding-top: calc(var(--wp--preset--spacing--80) + var(--wp--preset--spacing--80));
}
}
/* Sections sit flush against each other — the mockup has no gaps between bands */
.wp-block-post-content.is-layout-flow > * + * { margin-block-start: 0; }
/* ---- Roadmap: centered alternating timeline ---- */
.fmy-timeline { position: relative; }
.fmy-timeline::before { /* the vertical center line */
content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
width: 1px; background: rgb(var(--wp--custom--rgb--gold) / 0.35);
transform: translateX(-50%);
}
.fmy-tl-step { position: relative; width: 50%; box-sizing: border-box; }
/* Generous clearance so titles never run under the center node (matches localhost airiness) */
.fmy-tl-step.is-left { margin-right: 50%; padding-right: var(--wp--preset--spacing--70); text-align: right; }
.fmy-tl-step.is-right { margin-left: 50%; padding-left: var(--wp--preset--spacing--70); text-align: left; }
/* Much larger vertical gap between steps, like the mockup */
.fmy-tl-step + .fmy-tl-step { margin-top: var(--wp--preset--spacing--70); }
/* Breathing room inside each step's card */
.fmy-tl-card { display: flex; flex-direction: column; gap: var(--wp--preset--spacing--20); }
.fmy-tl-label { margin-bottom: 2px !important; }
/* Serif step titles sized to match localhost (~1.5rem) */
.fmy-tl-card .wp-block-heading {
font-family: var(--wp--preset--font-family--display) !important;
font-size: 1.5rem !important; line-height: 1.15; font-weight: 500;
}
.fmy-tl-card p { line-height: 1.7; }
.fmy-tl-num { /* numbered node on the center line */
position: absolute; top: 0; width: 50px; height: 50px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%; background: var(--wp--preset--color--ink-black);
color: var(--wp--preset--color--gold); font-size: 0.9rem; font-weight: 600;
border: 2px solid var(--wp--preset--color--gold); z-index: 1;
box-shadow: 0 0 0 6px var(--wp--preset--color--cream);
}
.fmy-tl-step.is-left .fmy-tl-num { right: -25px; }
.fmy-tl-step.is-right .fmy-tl-num { left: -25px; }
.fmy-tl-meta { justify-content: inherit; gap: var(--wp--preset--spacing--50); padding-top: var(--wp--preset--spacing--10); }
.fmy-tl-step.is-left .fmy-tl-meta { justify-content: flex-end; }
/* Why-us rows: ONLY the image column stretches to fill row height.
(The text column must stay normal block flow — forcing flex on it makes the
headings wrap character-by-character.) */
.fmy-why-row { align-items: stretch; }
.fmy-why-row .wp-block-column:not(.fmy-why-body) { display: flex; }
/* Text column centers vertically next to the tall portrait image (mockup layout) */
.fmy-why-body { display: flex; flex-direction: column; justify-content: center; }
.fmy-why-shot { flex: 1 1 auto; width: 100%; min-height: 360px; }
.fmy-why-shot img.wp-block-cover__image-background { object-position: center; }
@media (max-width: 781px) {
.fmy-timeline::before { left: 22px; }
.fmy-tl-step, .fmy-tl-step.is-left, .fmy-tl-step.is-right {
width: 100%; margin: 0 0 var(--wp--preset--spacing--60) 0;
padding-left: 56px; padding-right: 0; text-align: left;
}
.fmy-tl-step.is-left .fmy-tl-num, .fmy-tl-step.is-right .fmy-tl-num { left: 0; right: auto; }
.fmy-tl-step.is-left .fmy-tl-meta { justify-content: flex-start; }
}
/* ---- Founder: oval photo, gold outline, overlaid badge, skill tags ---- */
.fmy-founder-photo { position: relative; max-width: 380px; margin-inline: auto; }
.fmy-founder-img img {
border-radius: 50% / 58% 58% 42% 42%;
border: 2px solid rgb(var(--wp--custom--rgb--gold) / 0.6);
aspect-ratio: 4 / 5; object-fit: cover; width: 100%;
}
.fmy-founder-photo::before { /* soft cream accent behind top-left */
content: ""; position: absolute; top: -14px; left: -14px; width: 84px; height: 96px;
background: rgb(var(--wp--custom--rgb--gold) / 0.14);
border-radius: 50% / 60% 60% 40% 40%; z-index: 0;
}
.fmy-founder-img { position: relative; z-index: 1; }
.fmy-founder-badge {
position: absolute; right: -8px; bottom: 12px; z-index: 2;
max-width: 210px; border-radius: var(--wp--custom--radius--sm);
box-shadow: 0 14px 34px rgb(var(--wp--custom--rgb--ink) / 0.28);
}
.fmy-founder-badge__co { opacity: 0.7; }
/* Skill tags (founder) */
.fmy-tag {
border: 1px solid rgb(var(--wp--custom--rgb--ink) / 0.12);
border-radius: var(--wp--custom--radius--sm);
padding: 6px 12px; letter-spacing: 0.08em;
background: rgb(var(--wp--custom--rgb--ink) / 0.06);
color: var(--wp--preset--color--ink);
}
/* Founder section: heading accent + quote to the mockup (purple #3d3363, smaller quote). */
.fmy-heading-accent { font-style: italic; color: #3d3363; }
.fmy-fquote { color: #3d3363 !important; }
.fmy-fquote-cite { color: rgb(var(--wp--custom--rgb--ink) / 0.45) !important; }
/* FAQ: the left column (Common Questions + Ask Us Directly) sticks on scroll until the
accordion column ends, then bumps — desktop only (matches the mockup's lg:sticky). */
@media (min-width: 782px) {
.fmy-faq-aside { position: sticky; top: 100px; align-self: flex-start; }
}
/* ---- Video testimonials ---- */
.fmy-vid-head { flex-wrap: nowrap; }
.fmy-lang {
border: 1px solid rgb(var(--wp--custom--rgb--gold) / 0.5);
border-radius: var(--wp--custom--radius--sm);
padding: 3px 9px; flex: 0 0 auto;
}
.wp-block-video video { width: 100%; border-radius: var(--wp--custom--radius--sm); background: #000; }
/* Video-testimonial grid: each video is a rounded ink-black card with a gold top-bar +
deep shadow, portrait clip letterboxed inside (object-fit contain). The section uses the
standard constrained 1440px layout — same left/right content borders as every other home
section (no custom width cap or left-align override). */
.fmy-vid-grid { column-gap: 32px; }
.fmy-vid-grid .wp-block-video {
margin: 0; position: relative; overflow: hidden;
border-radius: var(--wp--custom--radius--md);
background: var(--wp--preset--color--ink-black);
box-shadow: 0 24px 64px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(var(--wp--custom--rgb--gold) / 0.1);
}
.fmy-vid-grid .wp-block-video::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; z-index: 2;
background: linear-gradient(90deg, var(--wp--preset--color--gold) 0%, rgb(var(--wp--custom--rgb--gold) / 0.1) 100%);
}
.fmy-vid-grid .wp-block-video video {
display: block; width: 100%; height: 500px; object-fit: contain;
background: var(--wp--preset--color--ink-black); border-radius: 0;
}
@media (max-width: 781px) {
.fmy-vid-grid .wp-block-video video { height: 62vh; max-height: 460px; }
}
/* Gold scroll-progress line pinned to the header's bottom edge */
.fmy-scroll-progress {
position: absolute;
left: 0; bottom: 0; height: 2px; width: 0;
background: var(--wp--preset--color--gold);
transition: width 0.08s linear;
z-index: 20;
}
/* Interior pages open with a full-bleed dark banner that is MEANT to sit behind
the fixed header (like the home hero) — so no top padding (that showed a white
bar between header and banner). The banner's own padding + vertical centering
keep its content clear of the 85px header. */
body:not(.home) .wp-site-blocks > main,
body:not(.home) .wp-block-group > main { padding-top: 0; }
/* ---- By-the-numbers stats section ---- */
/* Subtle dotted texture like the mockup's patterned dark band */
.fmy-stats-section {
background-image: url("data:image/svg+xml,%3Csvg width='60' height='80' viewBox='0 0 60 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='30' cy='35' rx='14' ry='20' fill='%23fabd52' fill-opacity='0.03'/%3E%3C/svg%3E"); /* gold preset, ellipse texture 1:1 from mockup */
background-size: 60px 80px;
}
.fmy-stat__icon { margin: 0 0 var(--wp--preset--spacing--20); line-height: 0; color: var(--wp--preset--color--gold); }
.fmy-stat__icon svg { display: block; width: 28px; height: 28px; }
/* By the Numbers: subtle full-width rule between the stats and the founder quote */
.fmy-stats-sep.wp-block-separator {
border: 0;
border-top: 1px solid rgb(var(--wp--custom--rgb--cream) / 0.12);
background: none;
opacity: 1;
}
@media (max-width: 781px) {
/* Stats sit 2-up on mobile, like localhost. CSS Grid beats WP core's mobile-stack
(which forced 1-per-row) with no sub-pixel wrapping. */
.fmy-stats-section .fmy-stat-grid.wp-block-columns {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
}
.fmy-stats-section .fmy-stat-grid.wp-block-columns > .fmy-stat {
flex: initial !important; width: auto !important; max-width: none !important; min-width: 0 !important;
}
}
/* ---- Video modal (Watch Our Process) — matches the mockup's lightbox 1:1 ---- */
.fmy-modal {
position: fixed; inset: 0; z-index: 60;
display: none;
align-items: center; justify-content: center;
background: rgb(var(--wp--custom--rgb--ink) / 0.92);
}
.fmy-modal.is-open { display: flex; animation: fmyModalFade 0.25s ease; }
@keyframes fmyModalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fmyModalScale {
from { opacity: 0; transform: scale(0.92); }
to { opacity: 1; transform: scale(1); }
}
/* Top-center gold label */
.fmy-modal__label {
position: absolute; top: var(--wp--preset--spacing--40); left: 50%;
transform: translateX(-50%);
margin: 0;
color: rgb(var(--wp--custom--rgb--gold) / 0.85);
font-size: var(--wp--preset--font-size--x-small);
letter-spacing: 0.22em;
text-transform: uppercase;
white-space: nowrap;
}
/* Round close button, top-right */
.fmy-modal__close {
position: absolute; top: var(--wp--preset--spacing--40); right: var(--wp--preset--spacing--40);
width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
background: rgb(var(--wp--custom--rgb--cream) / 0.10);
border: 1px solid rgb(var(--wp--custom--rgb--cream) / 0.22);
color: var(--wp--preset--color--cream);
font-size: 1.3rem; line-height: 1;
cursor: pointer;
transition: background 0.2s ease;
}
.fmy-modal__close:hover { background: rgb(var(--wp--custom--rgb--cream) / 0.18); }
/* Framed video + caption bar */
.fmy-modal__inner {
position: relative;
width: min(1024px, calc(100% - var(--wp--preset--spacing--50) * 2));
border-radius: var(--wp--custom--radius--md);
overflow: hidden;
box-shadow: 0 32px 80px rgb(var(--wp--custom--rgb--ink) / 0.7);
background: var(--wp--preset--color--ink-black);
}
.fmy-modal.is-open .fmy-modal__inner { animation: fmyModalScale 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.fmy-modal video {
width: 100%; display: block;
max-height: 80vh; object-fit: contain;
background: var(--wp--preset--color--ink-black);
}
.fmy-modal__bar {
display: flex; align-items: center; justify-content: space-between;
gap: var(--wp--preset--spacing--30);
padding: 12px 20px;
background: var(--wp--preset--color--ink-black);
border-top: 1px solid rgb(var(--wp--custom--rgb--gold) / 0.12);
}
.fmy-modal__caption {
margin: 0;
color: rgb(var(--wp--custom--rgb--cream) / 0.75);
font-size: var(--wp--preset--font-size--small);
}
.fmy-modal__cta {
flex: 0 0 auto;
background: var(--wp--preset--color--gold);
color: var(--wp--preset--color--ink);
font-size: var(--wp--preset--font-size--x-small);
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: none;
padding: 8px 16px;
border-radius: var(--wp--custom--radius--sm);
box-shadow: 0 2px 12px rgb(var(--wp--custom--rgb--gold) / 0.35);
transition: background 0.2s ease;
}
.fmy-modal__cta:hover { background: var(--wp--preset--color--gold-deep); color: var(--wp--preset--color--ink); }
/* Bottom hint */
.fmy-modal__hint {
position: absolute; bottom: var(--wp--preset--spacing--40); left: 50%;
transform: translateX(-50%);
margin: 0;
color: rgb(var(--wp--custom--rgb--cream) / 0.35);
font-size: var(--wp--preset--font-size--x-small);
letter-spacing: 0.08em;
}
/* ---- Floating "Book Intro Call" pill (bottom-left, reveals on scroll) — 1:1 with mockup ---- */
.fmy-float-cta {
position: fixed; left: 20px; bottom: 24px; z-index: 50;
display: flex; align-items: center; gap: 12px;
padding: 8px 20px 8px 16px;
background: var(--wp--preset--color--gold);
color: var(--wp--preset--color--ink);
border-radius: 100px;
text-decoration: none;
box-shadow: 0 8px 28px rgb(var(--wp--custom--rgb--gold) / 0.42);
opacity: 0; transform: translateY(20px); pointer-events: none;
transition: opacity 0.35s ease, transform 0.35s ease, box-shadow 0.25s ease, filter 0.25s ease;
}
.fmy-float-cta.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
/* When the full-width strip is present, lift the pill so both stay fully visible */
.fmy-float-cta.is-lifted { bottom: 82px; }
.fmy-float-cta:hover, .fmy-float-cta:focus-visible {
transform: translateY(-2px);
filter: brightness(0.96);
box-shadow: 0 12px 34px rgb(var(--wp--custom--rgb--gold) / 0.55);
}
.fmy-float-cta__icon { display: flex; flex: 0 0 auto; }
.fmy-float-cta__text { display: flex; flex-direction: column; line-height: 1.15; }
.fmy-float-cta__eyebrow {
font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.12em;
text-transform: uppercase; opacity: 0.72;
}
.fmy-float-cta__main {
font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
}
.fmy-float-cta__arrow { font-weight: 600; transition: transform 0.25s ease; }
.fmy-float-cta:hover .fmy-float-cta__arrow { transform: translateX(3px); }
/* ---- Full-width "Ready to launch your brand?" strip (slides up on scroll, dismissible) ---- */
.fmy-sticky-cta {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
display: flex; align-items: center; gap: var(--wp--preset--spacing--30);
padding: 14px 20px;
background: linear-gradient(90deg, var(--wp--preset--color--ink-deep) 0%, var(--wp--preset--color--ink) 100%);
color: var(--wp--preset--color--cream);
border-top: 1.5px solid rgb(var(--wp--custom--rgb--gold) / 0.35);
box-shadow: 0 -4px 32px rgb(0 0 0 / 0.45);
transform: translateY(100%);
transition: transform 0.4s ease;
}
.fmy-sticky-cta.is-visible { transform: translateY(0); }
.fmy-sticky-cta p { margin: 0; font-size: var(--wp--preset--font-size--small); line-height: 1.4; color: var(--wp--preset--color--cream); }
.fmy-sticky-cta p strong { color: var(--wp--preset--color--gold); font-weight: 600; }
.fmy-sticky-cta__sub { color: rgb(var(--wp--custom--rgb--cream) / 0.7); }
.fmy-sticky-cta__dot { color: var(--wp--preset--color--gold); font-size: 0.7em; vertical-align: middle; animation: fmyStickyPulse 2s ease-in-out infinite; }
@keyframes fmyStickyPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.fmy-sticky-cta__spacer { flex: 1 1 auto; }
.fmy-sticky-cta__btn {
background: var(--wp--preset--color--gold);
color: var(--wp--preset--color--ink-deep);
font-size: var(--wp--preset--font-size--x-small);
font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
text-decoration: none;
padding: 10px 20px; border-radius: 100px; white-space: nowrap;
transition: transform 0.25s ease, filter 0.25s ease, box-shadow 0.25s ease;
}
.fmy-sticky-cta__btn:hover, .fmy-sticky-cta__btn:focus-visible {
transform: translateY(-1px); filter: brightness(0.95);
box-shadow: 0 6px 22px rgb(var(--wp--custom--rgb--gold) / 0.5);
}
.fmy-sticky-cta__close {
background: none; border: 0; cursor: pointer;
color: rgb(var(--wp--custom--rgb--cream) / 0.7);
font-size: 1.4rem; line-height: 1; padding: 0 4px;
transition: color 0.2s ease;
}
.fmy-sticky-cta__close:hover { color: var(--wp--preset--color--cream); }
@media (max-width: 781px) {
/* Mobile: the compact floating gold pill is the single booking CTA (like the mockup).
The full-width strip would overlap it, so it is hidden on small screens. */
.fmy-sticky-cta { display: none; }
.fmy-float-cta.is-lifted { bottom: 24px; } /* no strip to lift above on mobile */
/* ESC hint is desktop-only — mobile devices have no ESC key */
.fmy-modal__hint { display: none; }
}
@media (max-width: 400px) {
.fmy-sticky-cta__btn { padding: 8px 10px; }
.fmy-sticky-cta { gap: 8px; padding: 10px; }
}
/* ---- Scroll reveal (fade-up) + stat count-up — 1:1 with the mockup's .reveal behavior ---- */
.fmy-js .fmy-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.65s ease, transform 0.65s ease; }
.fmy-js .fmy-reveal.is-visible { opacity: 1; transform: translateY(0); }
/* staggered like the mockup (100ms steps) */
.fmy-js .fmy-stat-grid .fmy-stat:nth-child(2) { transition-delay: 100ms; }
.fmy-js .fmy-stat-grid .fmy-stat:nth-child(3) { transition-delay: 200ms; }
.fmy-js .fmy-stat-grid .fmy-stat:nth-child(4) { transition-delay: 300ms; }
.fmy-js .fmy-stat-grid .fmy-stat:nth-child(5) { transition-delay: 400ms; }
.fmy-js .fmy-svc-row .fmy-svc-card:nth-child(2) { transition-delay: 120ms; }
@media (prefers-reduced-motion: reduce) {
.fmy-js .fmy-reveal { opacity: 1; transform: none; transition: none; }
}
/* ---- Why-us: alternating image+text rows (1:1 mockup WhyChooseSection) ---- */
.fmy-why-row {
border: 1px solid rgb(var(--wp--custom--rgb--ink) / 0.08);
border-radius: var(--wp--custom--radius--md);
overflow: hidden;
background: var(--wp--preset--color--base);
gap: 0;
}
.fmy-why-shot { position: relative; height: 100%; }
.fmy-why-shot .wp-block-cover__inner-container { position: static; z-index: 1; }
.fmy-why-shot .wp-block-cover__background {
background: rgb(var(--wp--custom--rgb--ink) / 0.08) !important;
opacity: 1 !important;
}
.fmy-why-chip { /* stat chip pinned bottom-left over the image, like the mockup */
position: absolute; bottom: 16px; left: 16px; z-index: 2;
margin: 0; padding: 8px 16px;
background: rgb(var(--wp--custom--rgb--ink) / 0.88);
border: 1px solid rgb(var(--wp--custom--rgb--gold) / 0.3);
border-radius: var(--wp--custom--radius--sm);
color: var(--wp--preset--color--gold);
font-size: var(--wp--preset--font-size--x-small);
letter-spacing: 0.1em; text-transform: uppercase;
backdrop-filter: blur(8px);
}
.fmy-why-num {
margin: 0;
font-size: 3.5rem; font-weight: 700; line-height: 1;
color: rgb(var(--wp--custom--rgb--ink) / 0.07);
}
/* ============================================================================
REUSABLE COMPONENT — arrow text-link (.fmy-arrow-link)
Uppercase ink label + gold underline; on hover the label + underline turn
gold and the link nudges forward. Apply .fmy-arrow-link to ANY
"Get started →" / "Start Your … →" style link so every page matches.
Tune the whole site from the --fmy-arrow-link-* variables below; a page can
override any of them on a wrapper to re-theme just its links.
(.fmy-learn is the legacy alias — it shares this exact rule.)
============================================================================ */
:root {
--fmy-arrow-link-size: 0.875rem; /* bigger than the old x-small */
--fmy-arrow-link-tracking: 0.1em;
--fmy-arrow-link-color: var(--wp--preset--color--ink);
--fmy-arrow-link-hover: var(--wp--preset--color--gold);
--fmy-arrow-link-underline: rgb(var(--wp--custom--rgb--ink) / 0.25);
--fmy-arrow-link-shift: 3px;
}
.fmy-arrow-link a,
.fmy-learn a {
display: inline-block;
color: var(--fmy-arrow-link-color);
font-size: var(--fmy-arrow-link-size);
font-weight: 600;
letter-spacing: var(--fmy-arrow-link-tracking);
text-transform: uppercase;
text-decoration: none;
border-bottom: 1.5px solid var(--fmy-arrow-link-underline);
padding-bottom: 3px;
transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.fmy-arrow-link a:hover,
.fmy-learn a:hover {
color: var(--fmy-arrow-link-hover);
border-bottom-color: var(--fmy-arrow-link-hover);
transform: translateX(var(--fmy-arrow-link-shift));
}
/* flipped row keeps image on the right on mobile too is fine - core stacks columns */
@media (max-width: 781px) {
.fmy-why-row--flip { flex-direction: column-reverse; display: flex; }
/* Uniform gap between every text element inside a why-us card on mobile — the
blocks' inline margin-top:0 was cancelling the column blockGap, so number →
eyebrow → heading → copy → "Learn more" were all touching (gaps 0/0/0/7). */
.fmy-why-body > * + * { margin-top: var(--wp--preset--spacing--40) !important; }
}
/* ---- Logo flower: tilts slightly on hover (mockup group-hover:rotate-12) ---- */
.fmy-logo-flower { transition: transform 0.3s ease; }
.fmy-logo:hover .fmy-logo-flower { transform: rotate(12deg); }
/* ---- Category grid: cards keep a consistent width, wrap their text, and LEFT-align
(an incomplete row packs to the left, not centered). ---- */
.fmy-cat-card__tags { overflow-wrap: break-word; white-space: normal; }
/* Gap between the category title and its tag row (the block's inline margin-top:0
was cancelling the group blockGap, so the two were touching). */
.fmy-cat-card__body .fmy-cat-card__tags { margin-top: var(--wp--preset--spacing--40) !important; }
.fmy-cat-row {
flex-wrap: wrap;
justify-content: flex-start;
row-gap: var(--wp--preset--spacing--40);
}
.fmy-cat-row .fmy-cat-card {
flex: 1 1 300px; /* grow to share the row... */
max-width: 445px; /* ...but never past a single card's natural width */
}
/* ============================================================
INTERIOR PAGES
============================================================ */
/* Feature lists (services): gold check markers, no default bullets */
.fmy-featlist { list-style: none; margin-left: 0; padding-left: 0; }
.fmy-featlist li {
position: relative;
padding-left: 26px;
font-size: var(--wp--preset--font-size--small);
color: var(--wp--preset--color--muted);
}
.fmy-featlist li::before {
content: "";
position: absolute; left: 0; top: 3px;
width: 15px; height: 15px;
background: var(--wp--preset--color--gold-deep);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / contain no-repeat;
}
.fmy-featlist.is-dark li { color: rgb(var(--wp--custom--rgb--cream) / 0.85); }
.fmy-featlist.is-dark li::before { background: var(--wp--preset--color--gold); }
/* Inline "MOST POPULAR" style badge that sits left-aligned above a heading */
.fmy-badge-inline { display: inline-block; align-self: flex-start; padding: 4px 11px; border-radius: var(--wp--custom--radius--sm); }
/* Service row images: consistent tall crop + hover zoom */
.fmy-svc-img { overflow: hidden; border-radius: var(--wp--custom--radius--sm); }
.fmy-svc-img img { object-fit: cover; width: 100%; transition: transform 0.45s ease; }
.fmy-svc-block:hover .fmy-svc-img img { transform: scale(1.05); }
/* Interior page dark banner: clear the fixed header comfortably */
.fmy-page-banner { border-bottom: 1px solid rgb(var(--wp--custom--rgb--gold) / 0.25); }
/* ============================================================================
SERVICES PAGE (ID 6) — faithful to the localhost mockup, using theme tokens.
============================================================================ */
/* --- Banner: dimmed hero image + purple L->R gradient + gold radial glow --- */
.fmy-svc-banner { background-color: var(--wp--preset--color--ink); }
.fmy-svc-banner .wp-block-cover__image-background { opacity: 0.28; }
.fmy-svc-banner::before {
content: ""; position: absolute; inset: 0; z-index: 1;
background: linear-gradient(to right,
rgb(var(--wp--custom--rgb--ink) / 0.92) 0%,
rgb(var(--wp--custom--rgb--ink) / 0.6) 60%,
rgb(var(--wp--custom--rgb--ink) / 0.3) 100%);
}
.fmy-svc-banner::after {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: radial-gradient(at 30% 50%, rgb(var(--wp--custom--rgb--gold) / 0.25) 0%, transparent 60%);
}
.fmy-svc-banner > .wp-block-cover__inner-container { position: relative; z-index: 2; }
/* Double gutter: the cover added a flat 16px AND the inner constrained group added the
responsive root gutter (16 mobile / 48 desktop) — content landed at 32/64. Zero the
cover's flat inset so only the responsive gutter remains, aligning the Services banner
with Home/Process/Portfolio (16 mobile / 48 desktop). */
.fmy-svc-banner.wp-block-cover { padding-left: 0; padding-right: 0; }
/* Ticker removed from interior headers → shrink the centred banner so the top space rebalances. */
.fmy-svc-banner.wp-block-cover { min-height: 48vh !important; }
.fmy-svc-banner h1 { max-width: 700px; }
.fmy-svc-banner-intro { max-width: 672px; color: rgb(var(--wp--custom--rgb--cream) / 0.7); }
/* Mobile: the 62vh min-height + vertical-centering floated the copy mid-box with large
empty gaps. Drop the min-height and top-align + match Process/Portfolio's banner
padding (clamp top / clamp bottom) so section 1 is uniform across pages. */
@media (max-width: 781px) {
.fmy-svc-banner.wp-block-cover {
min-height: 0 !important;
align-items: flex-start;
padding-top: clamp(78px, 9vh, 112px) !important;
padding-bottom: clamp(52px, 6vw, 88px) !important;
}
}
/* --- Service rows: 50/50 grid, alternating by source order --- */
.fmy-svc-cols { align-items: center; }
.fmy-svc-cols > .wp-block-column { flex-basis: 50% !important; }
/* Image: 4/3 crop, rounded, badge pinned top-left, subtle corner overlay */
.fmy-svc-imgwrap { position: relative; border-radius: var(--wp--custom--radius--md); overflow: hidden; }
.fmy-svc-imgwrap .fmy-svc-img { margin: 0; border-radius: 0; }
.fmy-svc-imgwrap .fmy-svc-img img { aspect-ratio: 4 / 3; border-radius: 0; }
.fmy-svc-imgwrap::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(to right bottom, transparent 60%, rgb(var(--wp--custom--rgb--ink) / 0.15));
}
.fmy-svc-imgwrap .fmy-card-badge {
top: 16px; left: 16px; right: auto; z-index: 3;
border-radius: var(--wp--custom--radius--sm);
font-size: 0.7rem; letter-spacing: 0.1em; padding: 6px 12px;
}
/* Text column rhythm — matches the mockup hierarchy (eyebrow 12, h2 20, intro/list 24, ideal 32) */
.fmy-svc-eyebrow {
color: var(--wp--preset--color--gold);
font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
margin: 0 0 12px;
}
.fmy-svc-copy > h2.wp-block-heading { margin: 0 0 20px; }
.fmy-svc-intro {
font-size: 1rem; line-height: 1.6;
color: rgb(var(--wp--custom--rgb--ink) / 0.7);
margin: 0 0 24px;
}
.fmy-svc-copy > .fmy-featlist { margin: 0 0 24px; }
.fmy-svc-copy .fmy-featlist li { font-size: 0.875rem; color: rgb(var(--wp--custom--rgb--ink) / 0.75); }
.fmy-svc-ideal {
margin: 0 0 32px; padding: 16px;
background: rgb(var(--wp--custom--rgb--gold) / 0.08);
border-left: 3px solid var(--wp--preset--color--gold);
border-radius: 0 var(--wp--custom--radius--md) var(--wp--custom--radius--md) 0;
}
.fmy-svc-ideal-label {
color: var(--wp--preset--color--gold);
font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
margin: 0 0 4px;
}
.fmy-svc-ideal-text { font-size: 0.875rem; color: rgb(var(--wp--custom--rgb--ink) / 0.75); margin: 0; }
/* Row CTA: ink bg + gold text + arrow, uppercase, tracked (matches mockup) */
.fmy-svc-cta .wp-block-button__link {
text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.875rem; font-weight: 600;
padding: 15px 32px;
}
/* --- Intro video: gold top-bar, ring shadow, dark letterbox + caption --- */
/* Box shrink-wraps the (portrait) video so the frame matches the footage — no
letterbox side-bars, no box/video width mismatch. Centered in the section. */
.fmy-svc-video {
width: fit-content; max-width: 100%;
margin-left: auto; margin-right: auto;
border-radius: 6px; overflow: hidden;
box-shadow: 0 32px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px rgb(var(--wp--custom--rgb--gold) / 0.15);
background: var(--wp--preset--color--ink-black);
}
.fmy-svc-video::before {
content: ""; display: block; height: 3px;
background: linear-gradient(90deg, var(--wp--preset--color--gold), rgb(var(--wp--custom--rgb--gold) / 0.2));
}
.fmy-svc-video .wp-block-video { margin: 0; line-height: 0; }
.fmy-svc-video video {
display: block; height: 70vh; max-height: 560px; width: auto; max-width: 100%;
object-fit: contain; background: var(--wp--preset--color--ink-black);
}
.fmy-svc-videosub { color: rgb(var(--wp--custom--rgb--cream) / 0.6); max-width: 576px; margin-left: auto; margin-right: auto; }
.fmy-svc-videocap {
text-align: center; margin: 20px 0 0;
font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase;
color: rgb(var(--wp--custom--rgb--cream) / 0.35);
}
/* --- Wellness & Pet Care: LIGHT section, image-overlay cards, gold footnote --- */
.fmy-wellness-eyebrow {
color: var(--wp--preset--color--gold);
font-size: 0.75rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
margin: 0 0 12px;
}
.fmy-wellness-head { color: var(--wp--preset--color--ink); margin: 0 0 20px; font-weight: 700; }
.fmy-wellness-lede {
color: rgb(var(--wp--custom--rgb--ink) / 0.65); margin: 0 auto; max-width: 672px; line-height: 1.7;
}
.fmy-wellness-card {
background: var(--wp--preset--color--base);
border: 1px solid rgb(var(--wp--custom--rgb--ink) / 0.08);
border-radius: var(--wp--custom--radius--md);
overflow: hidden; height: 100%;
}
.fmy-wellness-shot { position: relative; overflow: hidden; }
.fmy-wellness-shot .fmy-wellness-img { margin: 0; }
.fmy-wellness-shot .fmy-wellness-img img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.fmy-wellness-shot::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(to top,
rgb(var(--wp--custom--rgb--ink) / 0.82) 0%,
rgb(var(--wp--custom--rgb--ink) / 0.2) 60%,
transparent 100%);
}
.fmy-wellness-cap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 24px; }
.fmy-wellness-badge {
display: inline-block; margin: 0 0 12px; padding: 4px 12px;
background: rgb(var(--wp--custom--rgb--gold) / 0.18);
color: var(--wp--preset--color--gold);
border: 1px solid rgb(var(--wp--custom--rgb--gold) / 0.3);
border-radius: var(--wp--custom--radius--sm);
font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase;
}
.fmy-wellness-title { color: var(--wp--preset--color--cream); font-weight: 700; font-size: 1.25rem; margin: 0; }
.fmy-wellness-body { padding: 32px; }
.fmy-wellness-desc {
font-size: 0.875rem; line-height: 1.6;
color: rgb(var(--wp--custom--rgb--ink) / 0.7); margin: 0 0 24px;
}
.fmy-wellness-body .fmy-featlist { margin: 0 0 24px; }
.fmy-wellness-body .fmy-featlist li { font-size: 0.875rem; color: rgb(var(--wp--custom--rgb--ink) / 0.75); }
.fmy-wellness-body .fmy-learn { margin: 0; }
.fmy-svc-footnote {
margin-top: 48px; padding: 24px; text-align: center;
background: rgb(var(--wp--custom--rgb--gold) / 0.06);
border: 1px solid rgb(var(--wp--custom--rgb--gold) / 0.2);
border-radius: var(--wp--custom--radius--md);
}
.fmy-svc-footnote-text { font-size: 0.875rem; color: rgb(var(--wp--custom--rgb--ink) / 0.7); margin: 0; }
.fmy-svc-footnote-text strong { color: var(--wp--preset--color--ink); }
/* Reveal stagger: cards in a row fade up in sequence */
.fmy-js .fmy-reveal.fmy-d1 { transition-delay: 0.09s; }
.fmy-js .fmy-reveal.fmy-d2 { transition-delay: 0.18s; }
.fmy-js .fmy-reveal.fmy-d3 { transition-delay: 0.27s; }
/* ---- Testimonials (localhost-style: rating badge + featured + cards) ---- */
.fmy-tcard {
background: var(--wp--preset--color--ink-deep);
border: 1px solid rgb(var(--wp--custom--rgb--cream) / 0.10);
border-radius: var(--wp--custom--radius--sm);
display: flex; flex-direction: column; gap: var(--wp--preset--spacing--30);
}
.fmy-tcard--featured {
position: relative;
/* Highlight the lead review with a warm gold wash (1:1 with the mockup). */
background: rgb(var(--wp--custom--rgb--gold) / 0.05);
border-color: rgb(var(--wp--custom--rgb--gold) / 0.18);
}
.fmy-tcard--featured::after { /* big decorative quote mark, top-right */
content: "\201D";
position: absolute; top: 8px; right: 28px;
font-family: var(--wp--preset--font-family--display);
font-size: 6rem; line-height: 1;
color: rgb(var(--wp--custom--rgb--gold) / 0.18);
pointer-events: none;
}
.fmy-tcard--featured .has-display-font-family { font-size: var(--wp--preset--font-size--large) !important; }
.fmy-stars { letter-spacing: 3px; }
.fmy-tcard__foot { margin-top: auto; padding-top: var(--wp--preset--spacing--20); border-top: 1px solid rgb(var(--wp--custom--rgb--cream) / 0.08); }
.fmy-avatar-circle {
flex: 0 0 auto;
width: 42px; height: 42px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: rgb(var(--wp--custom--rgb--gold) / 0.18);
border: 1px solid rgb(var(--wp--custom--rgb--gold) / 0.4);
color: var(--wp--preset--color--gold);
font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em;
}
.fmy-verified {
flex: 0 0 auto;
font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600;
color: var(--wp--preset--color--gold);
border: 1px solid rgb(var(--wp--custom--rgb--gold) / 0.35);
border-radius: var(--wp--custom--radius--sm);
padding: 5px 10px; white-space: nowrap;
}
.fmy-rating-badge { display: inline-flex; }
@media (max-width: 781px) { .fmy-tcard--featured::after { display: none; } }
/* =========================================================================
Section polish pass — roadmap CTA, testimonials, video captions,
portfolio credit row, newsletter, final CTA, footer (1:1 with mockup)
========================================================================= */
/* =========================================================================
Button hover effects — matched 1:1 to the mockup (NO scale-zoom).
The mockup uses THREE distinct button treatments + text-link arrows:
• gold filled → slight darken + 1px lift + stronger gold glow
• dark outline → bg tint up + border→gold + 1px lift
• light outline→ fills solid ink, text inverts to cream
• text links → color brighten + gold underline + arrow slide (no lift)
========================================================================= */
.wp-block-button__link {
transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease,
background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
/* (1) Gold filled buttons — darken + lift + gold glow */
.wp-block-button__link.has-gold-background-color:hover,
.wp-block-button__link.has-gold-background-color:focus-visible {
transform: translateY(-1px);
filter: brightness(0.95);
box-shadow: 0 6px 26px rgb(var(--wp--custom--rgb--gold) / 0.5);
}
/* (2) Ink filled buttons (dark bg, cream text) � subtle brighten + lift + ink glow */
.wp-block-button__link.has-ink-background-color:hover,
.wp-block-button__link.has-ink-background-color:focus-visible {
filter: brightness(1.15);
transform: translateY(-1px);
box-shadow: 0 6px 26px rgb(var(--wp--custom--rgb--ink) / 0.4);
}
/* (3) Dark-bg outline buttons (cream text: Watch, Send Us an Email) —
tint up + border→gold + lift */
.wp-block-button.is-style-outline .wp-block-button__link.has-cream-color:hover,
.wp-block-button.is-style-outline .wp-block-button__link.has-cream-color:focus-visible {
background-color: rgb(var(--wp--custom--rgb--cream) / 0.12);
border-color: rgb(var(--wp--custom--rgb--gold) / 0.55) !important;
color: var(--wp--preset--color--cream) !important;
transform: translateY(-1px);
}
/* (4) Light-bg outline buttons (ink text: Ask Us Directly) — fill ink, invert text */
.wp-block-button.is-style-outline .wp-block-button__link.has-ink-color:hover,
.wp-block-button.is-style-outline .wp-block-button__link.has-ink-color:focus-visible {
background-color: var(--wp--preset--color--ink) !important;
color: var(--wp--preset--color--cream) !important;
border-color: var(--wp--preset--color--ink) !important;
}
/* (5) Text-link buttons ("See Our Work") + inline arrow links — brighten + arrow slide */
.fmy-btn-link .wp-block-button__link:hover { border-bottom-color: var(--wp--preset--color--gold); }
.wp-block-button__link .fmy-btn-arrow,
.fmy-portfolio-link a .fmy-arrow { transition: transform 0.25s ease; }
.wp-block-button__link:hover .fmy-btn-arrow { transform: translateX(4px); }
/* ---- Testimonials: enlarge the 3 review-card quotes (featured stays larger) ---- */
.fmy-tcard:not(.fmy-tcard--featured) p.has-display-font-family.has-small-font-size {
font-size: 1.0625rem !important;
line-height: 1.75 !important;
}
/* ---- Video captions below each testimonial video ---- */
.fmy-vid-caption { max-width: 90%; }
/* ---- Portfolio credit row (above footer, dark section) ---- */
.fmy-portfolio-link a { transition: opacity 0.2s ease; }
.fmy-portfolio-link a:hover { opacity: 0.75; }
@media (max-width: 781px) {
.fmy-portfolio-cta { flex-direction: column; align-items: flex-start; }
}
/* ---- Gold checkmark list items (newsletter perks + CTA perks) ---- */
.fmy-check { display: inline-flex; align-items: center; gap: 8px; color: var(--wp--preset--color--cream); }
.fmy-check-mark {
display: inline-flex; align-items: center; justify-content: center;
color: var(--wp--preset--color--gold); font-weight: 700;
}
/* ---- Newsletter (The Formyoule Edit) — dark band + diagonal texture + form ---- */
.fmy-newsletter {
background-image:
repeating-linear-gradient( 135deg,
rgb(var(--wp--custom--rgb--cream) / 0.025) 0px,
rgb(var(--wp--custom--rgb--cream) / 0.025) 1px,
transparent 1px, transparent 11px );
}
.fmy-nl-form { display: flex; flex-direction: column; gap: 14px; }
.fmy-nl-label {
font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
color: rgb(var(--wp--custom--rgb--cream) / 0.7);
}
.fmy-nl-input {
width: 100%; box-sizing: border-box;
background: rgb(var(--wp--custom--rgb--cream) / 0.05);
border: 1px solid rgb(var(--wp--custom--rgb--cream) / 0.18);
border-radius: var(--wp--custom--radius--sm);
color: var(--wp--preset--color--cream);
padding: 16px 18px; font-size: 0.95rem; font-family: inherit;
transition: border-color 0.2s ease, background 0.2s ease;
}
.fmy-nl-input::placeholder { color: rgb(var(--wp--custom--rgb--cream) / 0.4); }
.fmy-nl-input:focus {
outline: none;
border-color: var(--wp--preset--color--gold);
background: rgb(var(--wp--custom--rgb--cream) / 0.08);
}
.fmy-nl-btn {
width: 100%; cursor: pointer;
background: var(--wp--preset--color--gold);
color: var(--wp--preset--color--ink);
border: none; border-radius: var(--wp--custom--radius--sm);
padding: 16px 22px;
font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
font-family: inherit;
transition: transform 0.25s ease, filter 0.25s ease, box-shadow 0.25s ease;
}
.fmy-nl-btn:hover, .fmy-nl-btn:focus-visible {
transform: translateY(-1px);
filter: brightness(0.95);
box-shadow: 0 6px 26px rgb(var(--wp--custom--rgb--gold) / 0.5);
}
.fmy-nl-fine {
margin: 0; font-size: 0.75rem; line-height: 1.6;
color: rgb(var(--wp--custom--rgb--cream) / 0.45);
}
/* ---- Final CTA — dark, slots badge, contact row ---- */
.fmy-final-cta { position: relative; overflow: hidden; }
.fmy-slots-badge {
display: flex; align-items: center; gap: 8px;
margin-left: auto; margin-right: auto; width: fit-content;
font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
color: var(--wp--preset--color--gold);
border: 1px solid rgb(var(--wp--custom--rgb--gold) / 0.35);
border-radius: 999px; padding: 8px 18px;
}
.fmy-slots-dot { color: #57C777; font-size: 0.7em; } /* TODO: unify with --wp--custom--color--success — changes rendered pixels, needs client sign-off */
.fmy-cta-perks .fmy-check { font-size: 0.8125rem; }
.fmy-cta-contact .fmy-ico { color: var(--wp--preset--color--gold); }
.fmy-ico { color: var(--wp--preset--color--gold); }
/* ---- Footer — ink band with By-the-Numbers ellipse texture ---- */
.fmy-footer {
position: relative;
background-image: url("data:image/svg+xml,%3Csvg width='60' height='80' viewBox='0 0 60 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='30' cy='35' rx='14' ry='20' fill='%23fabd52' fill-opacity='0.03'/%3E%3C/svg%3E");
background-size: 60px 80px;
}
/* Gold gradient hairline across the top of the footer (matches localhost) */
.fmy-footer::before {
content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
background: linear-gradient(to right, transparent, rgb(var(--wp--custom--rgb--gold) / 0.3), transparent);
}
/* Column headings (Navigation / Services / Get in Touch) larger on every page + breakpoint
(x-small preset is !important, so this must be too). */
.fmy-footer .fmy-foot-col h3 { font-size: 0.85rem !important; }
.fmy-footer .fmy-foot-list { list-style: none; margin: 0; padding: 0; }
.fmy-footer .fmy-foot-list li { margin: 0 0 12px 0; }
.fmy-footer .fmy-foot-list a,
.fmy-footer .fmy-foot-brand ~ p a,
.fmy-footer a:where(:not(.wp-block-button__link):not(.wp-social-link-anchor)) {
color: rgb(var(--wp--custom--rgb--cream) / 0.5);
text-decoration: none;
transition: color 0.2s ease;
}
.fmy-footer .fmy-foot-list a:hover,
.fmy-footer a:where(:not(.wp-block-button__link):not(.wp-social-link-anchor)):hover {
color: var(--wp--preset--color--gold);
}
/* Brand blurb + Get-in-Touch items match localhost at cream/0.5 */
.fmy-footer .fmy-foot-col--brand > p,
.fmy-footer .fmy-foot-col--contact p { color: rgb(var(--wp--custom--rgb--cream) / 0.5) !important; }
/* Bottom bar (copyright + legal) sits dimmer, cream/0.3, over a hairline cream/0.07 rule */
.fmy-footer .fmy-foot-bottom p,
.fmy-footer .fmy-foot-bottom a { color: rgb(var(--wp--custom--rgb--cream) / 0.3) !important; }
.fmy-footer .fmy-foot-bottom a:hover { color: var(--wp--preset--color--gold) !important; }
/* Contact icons match the item text (cream/0.5), not the global gold .fmy-ico */
.fmy-footer .fmy-foot-col--contact .fmy-ico { color: rgb(var(--wp--custom--rgb--cream) / 0.5); }
.fmy-foot-social.wp-block-social-links { gap: 12px; margin-top: 6px; }
.fmy-foot-social .wp-social-link {
background: rgb(var(--wp--custom--rgb--cream) / 0.06);
border: 1px solid rgb(var(--wp--custom--rgb--cream) / 0.1);
border-radius: 50%; padding: 8px;
transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.fmy-foot-social .wp-social-link .wp-social-link-anchor,
.fmy-foot-social .wp-social-link svg { color: rgb(var(--wp--custom--rgb--cream) / 0.5); fill: rgb(var(--wp--custom--rgb--cream) / 0.5); }
.fmy-foot-social .wp-social-link:hover {
background: rgb(var(--wp--custom--rgb--gold) / 0.16);
border-color: rgb(var(--wp--custom--rgb--gold) / 0.5);
transform: translateY(-2px);
}
.fmy-foot-sep.wp-block-separator {
border-color: rgb(var(--wp--custom--rgb--cream) / 0.07) !important;
margin-top: var(--wp--preset--spacing--60); margin-bottom: var(--wp--preset--spacing--40);
}
.fmy-foot-legal a { margin: 0; }
/* Desktop: four equal columns with a uniform 48px gap, matching localhost's lg:grid-cols-4 gap-12 */
@media (min-width: 782px) {
.fmy-footer > .wp-block-columns {
display: grid !important; grid-template-columns: repeat(4, 1fr);
gap: 48px; align-items: start;
}
.fmy-footer > .wp-block-columns > .wp-block-column { flex-basis: auto !important; }
}
@media (max-width: 781px) {
.fmy-foot-bottom { flex-direction: column; align-items: flex-start; }
}
/* =========================================================================
Custom mobile menu — 1:1 with the mockup: logo + left-aligned links with
dividers + Book CTA + WhatsApp/Email, as a top panel. Core nav is hidden
on mobile (below); desktop keeps the core nav.
========================================================================= */
.fmy-burger { display: none; }
@media (max-width: 781px) {
.fmy-nav-wrap .wp-block-navigation { display: none; } /* hide core nav + its hamburger */
.fmy-burger {
display: flex; flex-direction: column; justify-content: center; gap: 5px;
width: 40px; height: 40px; padding: 9px; margin-left: auto;
background: none; border: 0; cursor: pointer;
position: relative; z-index: 260;
}
.fmy-burger span {
display: block; height: 2px; width: 22px; border-radius: 2px;
background: var(--wp--preset--color--cream);
transition: transform 0.3s ease, opacity 0.3s ease, width 0.3s ease;
}
.fmy-burger span:nth-child(3) { width: 14px; }
/* pressed / open → the three lines morph into an X (localhost behaviour) */
.fmy-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.fmy-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.fmy-burger[aria-expanded="true"] span:nth-child(3) { width: 22px; transform: translateY(-7px) rotate(-45deg); }
/* Menu open: the header (with the morphing burger-X) sits above the panel and
acts as the top bar. Hide the ticker + the panel's own brand/close row so the
nav starts cleanly below the compact logo bar. */
body.fmy-menu-open .fmy-header { z-index: 210; }
body.fmy-menu-open .fmy-header__ticker { display: none; }
body.fmy-menu-open .fmy-header__main { background: var(--wp--preset--color--ink-black) !important; }
body.fmy-menu-open .fmy-mobmenu__head { display: none; }
body.fmy-menu-open .fmy-mobmenu__panel { padding-top: 96px; }
}
.fmy-mobmenu { position: fixed; inset: 0; z-index: 200; }
.fmy-mobmenu[hidden] { display: none; }
.fmy-mobmenu__backdrop { position: absolute; inset: 0; background: rgb(0 0 0 / 0.45); }
.fmy-mobmenu__panel {
position: relative;
background: var(--wp--preset--color--ink-black);
padding: 16px 22px 26px;
box-shadow: 0 20px 50px rgb(0 0 0 / 0.5);
animation: fmyMenuDrop 0.25s ease;
}
@keyframes fmyMenuDrop { from { transform: translateY(-14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.fmy-mobmenu__head {
display: flex; align-items: center; justify-content: space-between;
padding-bottom: 16px;
border-bottom: 1px solid rgb(var(--wp--custom--rgb--cream) / 0.08);
}
.fmy-mobmenu__brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.fmy-mobmenu__wordmark { display: flex; flex-direction: column; line-height: 1.25; }
.fmy-mobmenu__name { font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.9rem; color: var(--wp--preset--color--cream); }
.fmy-mobmenu__sub { font-size: 0.5625rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgb(var(--wp--custom--rgb--cream) / 0.5); }
.fmy-mobmenu__close {
background: none; border: 0; cursor: pointer; padding: 0 4px;
color: var(--wp--preset--color--cream); font-size: 1.9rem; line-height: 1;
transition: color 0.2s ease;
}
.fmy-mobmenu__close:hover { color: var(--wp--preset--color--gold); }
.fmy-mobmenu__nav { display: flex; flex-direction: column; }
.fmy-mobmenu__nav a {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 17px 2px; text-decoration: none;
color: rgb(var(--wp--custom--rgb--cream) / 0.85);
font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
border-bottom: 1px solid rgb(var(--wp--custom--rgb--cream) / 0.08);
transition: color 0.2s ease;
}
.fmy-mobmenu__nav a:hover, .fmy-mobmenu__nav a:focus-visible { color: var(--wp--preset--color--gold); }
/* Current page: gold text + a gold check icon on the far right (matches the mockup). */
.fmy-mobmenu__nav a.is-active { color: var(--wp--preset--color--gold); }
.fmy-mobmenu__check { flex-shrink: 0; }
.fmy-mobmenu__cta {
display: flex; align-items: center; justify-content: center; gap: 8px;
margin-top: 22px; padding: 15px;
background: var(--wp--preset--color--gold); color: var(--wp--preset--color--ink);
text-decoration: none; border-radius: 2px;
font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
transition: filter 0.2s ease, transform 0.2s ease;
}
.fmy-mobmenu__cta:hover { filter: brightness(0.95); transform: translateY(-1px); }
.fmy-mobmenu__contact { display: flex; gap: 28px; margin-top: 20px; }
.fmy-mobmenu__contact a {
display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
font-size: 0.8125rem; font-weight: 600;
}
.fmy-mobmenu__wa { color: var(--wp--preset--color--whatsapp); }
.fmy-mobmenu__email { color: rgb(var(--wp--custom--rgb--cream) / 0.7); }
.fmy-mobmenu__email:hover { color: var(--wp--preset--color--gold); }
body.fmy-menu-open { overflow: hidden; }
/* =========================================================================
UNIFORM PAGE SPACING — one responsive vertical rhythm the whole page follows.
Every full-width content section gets the same symmetric top/bottom padding
(was a mix of 81/81, 54/81, 54/54). Hero (cover) and the flush lab strip opt out.
========================================================================= */
.wp-block-post-content > .wp-block-group.alignfull:not(.fmy-lab-strip) {
padding-top: clamp(52px, 6vw, 88px) !important;
padding-bottom: clamp(52px, 6vw, 88px) !important;
}
/* Featured Guide (Resources S2) + Featured Article (Blog hero) share ONE spacing.
Resources is otherwise caught by the generic 86px rule above; the blog hero lives in
the home template and gets only ~20px. Pin both to the same tighter, comfortable value. */
.wp-block-post-content > .wp-block-group.fmy-feat-section.alignfull,
.fmy-bloghero-section.fmy-feat-section {
padding-top: clamp(40px, 4vw, 56px) !important;
padding-bottom: clamp(40px, 4vw, 56px) !important;
}
/* Services cards → clean 2-up grid (2×2 desktop, 1-col mobile) with uniform gaps,
so the cards are evenly spaced on every screen (was [0,36,0] on mobile). */
.fmy-svc-row.wp-block-columns {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: var(--wp--preset--spacing--60);
}
.fmy-svc-row.wp-block-columns > .fmy-svc-card {
flex: initial !important; width: auto !important; max-width: none !important; min-width: 0 !important;
}
@media (max-width: 781px) {
.fmy-svc-row.wp-block-columns { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--50); }
/* Between the two service rows: match the in-row card gap (desktop keeps s60) */
.fmy-svc-row.wp-block-columns + .fmy-svc-row.wp-block-columns { margin-top: var(--wp--preset--spacing--50) !important; }
/* Uniform card-stack gap across grids on mobile */
.fmy-cat-row { row-gap: var(--wp--preset--spacing--50); }
/* ...and the SAME gap between the category rows (they carry an inline 16px
top margin from desktop) so every card is evenly spaced when stacked. */
.fmy-cat-row.wp-block-columns + .fmy-cat-row.wp-block-columns { margin-top: var(--wp--preset--spacing--50) !important; }
}
/* Services PAGE (ID 6) rows + Wellness 2-card: on mobile the image/text columns and
the two wellness cards stack — give them the uniform s50 (24px) card-stack gap.
(theme blockGap:0 + {left:…} only sets column-gap, so row-gap must be set here.) */
@media (max-width: 781px) {
.fmy-svc-cols { row-gap: var(--wp--preset--spacing--50) !important; }
.fmy-wellness-grid { row-gap: var(--wp--preset--spacing--50) !important; }
}
/* Utility: width cap that was previously an unserializable inline style */
.fmy-maxw-400 { max-width: 400px; }
/* ============================================================================
MOBILE SPACING PASS — one uniform rhythm for the whole page on phones.
Scale: s40=16 (tight/text), s50=24 (card & block stacking), s60=36 (section
sub-groups). Desktop is client-approved 1:1 and untouched — everything here
is scoped to <=781px. Ordered top-of-page → bottom.
============================================================================ */
@media (max-width: 781px) {
/* Services: the desktop header carries an 81px (s80) bottom margin that reads
as a huge void above the first card on a phone — pull it to the card gap. */
.fmy-svc-head { margin-bottom: var(--wp--preset--spacing--50) !important; }
/* Services cards: lift the Get Started link off the MOQ/Timeline row — more
space ABOVE the button; the card keeps its normal desktop bottom padding. */
.fmy-svc-card > .wp-block-group > :last-child { margin-top: var(--wp--preset--spacing--50); }
/* "Don't see your product type?" bar: stack and centre; lift the button off
the text so it isn't crowding the paragraph. */
.fmy-cat-cta {
flex-direction: column;
align-items: center;
text-align: center;
row-gap: var(--wp--preset--spacing--40);
}
.fmy-cat-cta > .wp-block-group { align-items: center; }
.fmy-cat-cta .wp-block-buttons {
justify-content: center;
width: 100%;
margin-top: var(--wp--preset--spacing--20);
}
/* Why-us: the 760px portraits swallow the whole viewport on a phone — cap them;
and even out the gap under the section heading and its intro paragraph. */
.fmy-why-shot.wp-block-cover { min-height: 300px !important; }
.fmy-why > .wp-block-group.fmy-reveal:first-child { row-gap: var(--wp--preset--spacing--40); }
/* Client Stories: theme.json zeroes global blockGap AND core's flex-layout reset
(.is-layout-flex > *, spec 0,1,1) zeroes column margins, so stacked review
cards touched — beat both with a 0,2,0 selector for a uniform 24px separation. */
.wp-block-column.fmy-tcard { margin-top: var(--wp--preset--spacing--50); }
.wp-block-column.fmy-tcard--featured { margin-top: 0; }
/* The featured card sits in its own wp:columns; the block-level top/bottom
margins on the two testimonial columns stacked on top of the 24px card
rhythm (featured→grid measured 35px). Zero them so every review card is
evenly spaced — the .fmy-tcard margin-top is the single source of the gap. */
.wp-block-columns:has(> .wp-block-column.fmy-tcard) { margin-top: 0 !important; margin-bottom: 0 !important; }
/* Common Questions: give the "Ask Us Directly" button clear air above and a
full block gap below so it doesn't crowd the first accordion when stacked. */
.fmy-faq-cta { margin-top: var(--wp--preset--spacing--50) !important; margin-bottom: var(--wp--preset--spacing--60) !important; }
/* Client Stories: heading column and the 5.0 rating badge stack with no gap
(global blockGap is 0) — give the badge clear separation from the heading. */
.fmy-cs-head { row-gap: var(--wp--preset--spacing--50); }
/* In Their Own Words: the heading and its intro subtext stack with no gap when
the two columns collapse. The sub is the only child of its column, so a
first-child reset zeroes any margin-top — put the gap on the flex container
as a row-gap instead (same working pattern as .fmy-cs-head). s40 = the standard
heading->intro gap (s60 read as too much). */
.wp-block-columns:has(> .wp-block-column .fmy-vid-sub) { row-gap: var(--wp--preset--spacing--40); }
/* Meet the Founder: on mobile the photo drops BELOW the copy + buttons (matches
the mockup, where the text column is order-1 and the portrait order-2). The
photo column is the FIRST child in the DOM, so a first-child reset zeroes any
margin-top — put the buttons↔portrait gap on the flex container as a row-gap
(only takes effect when the columns wrap, i.e. mobile; desktop stays a single
row and is untouched). */
.fmy-fcol-text { order: 1; }
.fmy-fcol-photo { order: 2; }
.wp-block-columns:has(> .fmy-fcol-photo) { row-gap: var(--wp--preset--spacing--60); }
/* Hero founder card: push the "● Available" badge to the right edge, vertically
centered against the name block. NOTE the plain .fmy-badge-available
margin-left:auto (0,1,0) is zeroed by core's .is-layout-flex > * flex-item
margin reset — beat it with a (0,2,0) selector so it actually right-aligns. */
.fmy-founder-card { flex-wrap: wrap; }
.fmy-founder-card .fmy-badge-available { margin-left: auto; align-self: center; }
/* In Their Own Words: the two testimonial videos stacked with no gap (global
blockGap is 0) so the first caption ran straight into the next video head. */
.fmy-vid-grid { row-gap: var(--wp--preset--spacing--60); }
/* The Formyoule Edit (newsletter): the text block and the form crowded together
when stacked (global blockGap is 0); give one clear gap between them and an
even rhythm inside the form. */
.fmy-newsletter .wp-block-columns { row-gap: var(--wp--preset--spacing--60); }
.fmy-nl-form { gap: var(--wp--preset--spacing--40); }
/* Footer: Navigation + Services sit side-by-side, brand spans the top, Get in
Touch drops full-width below, and the Book Free 15-Min Call centres under both. */
.fmy-footer > .wp-block-columns {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
align-items: start;
}
.fmy-foot-col--brand { grid-column: 1 / -1; }
.fmy-foot-col--nav { grid-column: 1; }
.fmy-foot-col--svc { grid-column: 2; }
/* Get in Touch drops full-width below the Nav/Services row, left-aligned, with clear separation */
.fmy-foot-col--contact { grid-column: 1 / -1; margin-top: var(--wp--preset--spacing--40); text-align: left; }
/* Contact items: same colour as Navigation/Services links (cream / 0.5), evenly spaced */
.fmy-foot-col--contact p { line-height: 1.7 !important; margin-bottom: 12px !important; }
.fmy-foot-col--contact p a { color: rgb(var(--wp--custom--rgb--cream) / 0.5); }
.fmy-foot-col--contact .fmy-ico { margin-right: 4px; }
/* Book Free 15-Min Call: centred, full-width, with generous separation from the contact items */
.fmy-foot-col--contact .wp-block-buttons { justify-content: center; margin-top: var(--wp--preset--spacing--60); }
.fmy-foot-col--contact .wp-block-button { width: 100%; max-width: 320px; }
.fmy-foot-col--contact .wp-block-button__link { display: block; text-align: center; }
}
/* ============================================================================
MOBILE SPACING PASS 2 — per-section fixes requested on the phone view.
Desktop stays client-approved 1:1; everything here is scoped to <=781px.
============================================================================ */
@media (max-width: 781px) {
/* Common Questions: shrink the question type and pull in the generous s50
top/bottom padding so the closed accordions sit closer together and read
as a tighter list on a phone. (Desktop keeps 1.25rem / s50 padding.) */
.wp-block-details summary { padding-top: var(--wp--preset--spacing--30); padding-bottom: var(--wp--preset--spacing--30); }
.wp-block-details summary strong { font-size: 1.02rem; }
.wp-block-details .has-small-font-size { font-size: 0.78rem !important; } /* preset class is !important */
/* Client Stories: on a phone a longer name/role wrapped the "Verified Client"
badge onto its own (left-aligned) line on some cards (James T., Priya K.) while
others kept it on the right. Force one behaviour — badge pinned RIGHT on the
person row for every card — by not wrapping the foot and letting the person
block shrink (its name/role text wraps internally instead). */
.fmy-tcard__foot { flex-wrap: nowrap; align-items: center; }
.fmy-tcard__foot .fmy-tcard__person { min-width: 0; }
/* The Formyoule Edit (newsletter): the heading hugged the eyebrow (s10) and
its paragraph (s20) — open both to the standard eyebrow->heading->intro rhythm. */
.fmy-newsletter h2.wp-block-heading { margin-top: var(--wp--preset--spacing--40) !important; }
.fmy-newsletter h2.wp-block-heading + .wp-block-paragraph { margin-top: var(--wp--preset--spacing--40); }
/* Ready to Begin (final CTA): a right-sized headline and lead for the phone,
with the standard heading->intro gap. */
.fmy-final-cta h2.wp-block-heading { font-size: 2.1rem !important; line-height: 1.12; } /* has-huge-font-size preset is !important */
.fmy-final-cta > p.has-cream-color.has-text-align-center {
font-size: var(--wp--preset--font-size--small);
margin-top: var(--wp--preset--spacing--40) !important; /* beats the inline s50 */
}
/* How It Works: the roadmap heading's 1.75 line-height (mockup value on desktop)
opens a huge gap between its two lines on a phone — tighten it. !important beats
the inline line-height on the block. */
.fmy-road-title.wp-block-heading { line-height: 1.2 !important; }
/* ---- Uniform headline→intro rhythm on mobile (all = s40/16px) ----
The whole-page audit found four sections whose headline→intro (or eyebrow→
headline) gap drifted off the s40 standard because of split-column stacking
(first-child reset) or odd blockGap values. Normalise them all to 16px. */
/* By the Numbers: intro is the 2nd column, zeroed by the first-child reset when
it stacks — put the 16px gap on the flex container as a row-gap. */
.fmy-stats-section > .wp-block-columns:has(> .wp-block-column h2) { row-gap: var(--wp--preset--spacing--40); }
/* Our Services: the header group's s30 blockGap gave an 11px heading→note gap. */
.fmy-svc-head { row-gap: var(--wp--preset--spacing--40); }
/* How It Works: eyebrow→heading was 0 (no margin-top) and heading→intro 11px
(heading's inline mb s30). Set both to 16px (mb !important beats the inline). */
.fmy-road-title.wp-block-heading { margin-top: var(--wp--preset--spacing--40); margin-bottom: var(--wp--preset--spacing--40) !important; }
/* Common Questions: the column's s20 blockGap gave a 7px heading→intro gap. */
.wp-block-column:has(.fmy-faq-cta) h2.wp-block-heading + .wp-block-paragraph { margin-top: var(--wp--preset--spacing--40); }
/* Why-us CTA: break the label to two lines on a phone, and give it a touch
more width (s50 side padding — one token up from the standard s40) so the
two-line label sits comfortably. Vertical padding stays the standard s30. */
.fmy-why-cta br { display: inline; }
.fmy-why-cta .wp-block-button__link {
padding-left: var(--wp--preset--spacing--50);
padding-right: var(--wp--preset--spacing--50);
}
}
/* ============================================================
PROCESS PAGE (ID 7) — reuses Services/Home components + tokens.
Per-section backgrounds intentionally differ (banner dark, stats
gold, rows alt light/dark, timeline light, FAQ dark, CTA light).
============================================================ */
/* --- Banner: ink base, gold radial glow, giant "6" watermark, NO photo --- */
.fmy-process-banner {
position: relative; overflow: hidden;
background-color: var(--wp--preset--color--ink);
}
/* Clear the fixed header. High specificity (5 classes) is needed to beat the
auto section-padding rule (.wp-block-post-content > .wp-block-group.alignfull,
clamp(52,6vw,88) — which otherwise leaves the eyebrow under the header). */
.wp-block-post-content > .wp-block-group.fmy-process-banner.fmy-page-banner.alignfull {
padding-top: clamp(78px, 9vh, 112px) !important;
}
.fmy-process-banner::before {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
background:
radial-gradient(at 72% 50%, rgb(var(--wp--custom--rgb--gold) / 0.10) 0%, transparent 60%),
linear-gradient(to right, rgb(var(--wp--custom--rgb--ink-black) / 0.45) 0%, transparent 55%);
}
.fmy-process-banner::after {
content: "6"; position: absolute; z-index: 0; pointer-events: none;
right: clamp(-1rem, 3vw, 5rem); top: 50%; transform: translateY(-50%);
font-family: var(--wp--preset--font-family--display);
font-size: clamp(15rem, 34vw, 30rem); font-weight: 700; line-height: 0.8;
color: rgb(var(--wp--custom--rgb--gold) / 0.06);
}
.fmy-process-banner > .fmy-svc-banner-copy { position: relative; z-index: 2; }
.fmy-process-banner h1 { max-width: 720px; }
.fmy-process-banner .fmy-svc-banner-intro { max-width: 640px; color: rgb(var(--wp--custom--rgb--cream) / 0.72); }
/* Credential chips — 1:1 with the mockup: transparent, gold/0.25 hairline border,
display-bold gold number + uppercase cream/0.6 label. */
.fmy-banner-chip {
margin: 0; display: inline-flex; align-items: center; gap: 8px;
padding: 6px 12px;
border: 1px solid rgb(var(--wp--custom--rgb--gold) / 0.25);
border-radius: var(--wp--custom--radius--sm);
}
.fmy-chip-num {
font-family: var(--wp--preset--font-family--display); font-weight: 700;
font-size: 0.75rem; color: var(--wp--preset--color--gold);
}
.fmy-chip-label {
font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
color: rgb(var(--wp--custom--rgb--cream) / 0.6);
}
/* Chips are anchor links that jump to their matching step section (desktop + mobile). */
a.fmy-banner-chip { text-decoration: none; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease; }
a.fmy-banner-chip:hover { border-color: rgb(var(--wp--custom--rgb--gold) / 0.7); background: rgb(var(--wp--custom--rgb--gold) / 0.08); transform: translateY(-1px); }
a.fmy-banner-chip:hover .fmy-chip-label { color: var(--wp--preset--color--cream); }
a.fmy-banner-chip:hover .fmy-chip-num { color: var(--wp--preset--color--gold); }
/* Anchor jump lands clear of the fixed header. */
.fmy-step-row { scroll-margin-top: 84px; }
/* Banner CTA: calendar icon + two-line label + right arrow. */
.fmy-banner-cta .wp-block-button__link { line-height: 1.25; }
.fmy-banner-cta .fmy-btn-main { text-align: center; }
.fmy-banner-cta .fmy-btn-arrow { align-self: center; font-size: 1.15em; }
/* Centre the CTA button on mobile (left-aligned with the copy on desktop). */
@media (max-width: 781px) {
.fmy-banner-cta { justify-content: center; }
}
/* --- Gold stats band (reuses .fmy-stat; ink text on gold, no icons). 1:1 with the
mockup: py-5 px-6 cells, no gap, ink/0.15 vertical dividers between columns. --- */
/* Zero the section's vertical padding — the cells own the height (py-5). Needs a
5-class selector + !important to beat the auto section-padding rule (clamp 52/6vw/88). */
.wp-block-post-content > .wp-block-group.fmy-stats-band.alignfull.has-gold-background-color {
padding-top: 0 !important; padding-bottom: 0 !important;
}
.fmy-stats-band .fmy-stat-grid { gap: 0 !important; }
.fmy-stats-band .fmy-stat { text-align: center; padding: 18px 24px; }
.fmy-stats-band .fmy-stat-grid > .fmy-stat + .fmy-stat {
border-left: 1px solid rgb(var(--wp--custom--rgb--ink) / 0.15);
}
.fmy-stats-band .fmy-stat > p:first-child { color: var(--wp--preset--color--ink); font-size: 1.35rem !important; margin-bottom: 2px !important; }
.fmy-stats-band .fmy-stat-label { color: rgb(var(--wp--custom--rgb--ink) / 0.65); font-weight: 600; }
.fmy-stats-band .fmy-stat-sub { color: rgb(var(--wp--custom--rgb--ink) / 0.5); }
/* --- Step rows: step-number badge (top-left), category badge (bottom-left) --- */
.fmy-step-row .fmy-svc-imgwrap .fmy-card-badge { top: auto; bottom: 16px; left: 16px; right: auto; }
.fmy-step-badge {
position: absolute; top: 16px; left: 16px; z-index: 4; margin: 0;
width: 46px; height: 46px; display: flex; align-items: center; justify-content: center;
background: rgb(var(--wp--custom--rgb--ink-black) / 0.55);
border: 1.5px solid var(--wp--preset--color--gold); border-radius: 50%;
font-family: var(--wp--preset--font-family--display);
font-size: 1.125rem; font-weight: 700; color: var(--wp--preset--color--gold);
backdrop-filter: blur(2px);
}
/* Gold-italic subtitle tucked under the heading */
.fmy-step-sub {
font-family: var(--wp--preset--font-family--display); font-style: italic;
font-size: 1.125rem; line-height: 1.3; color: var(--wp--preset--color--gold-deep);
margin: -8px 0 16px;
}
.fmy-step-row.is-dark .fmy-step-sub { color: var(--wp--preset--color--gold); }
/* "What's Included" label */
.fmy-step-inclabel {
font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
color: rgb(var(--wp--custom--rgb--ink) / 0.5); margin: 0 0 12px;
}
.fmy-step-row.is-dark .fmy-step-inclabel { color: rgb(var(--wp--custom--rgb--cream) / 0.5); }
/* Duration + Key Deliverable meta boxes (mirror .fmy-svc-ideal styling) */
.fmy-step-meta { margin: 0 0 24px; align-items: stretch; }
.fmy-step-metabox {
flex: 1 1 45%; min-width: 150px; padding: 14px 16px;
background: rgb(var(--wp--custom--rgb--gold) / 0.08);
border-left: 3px solid var(--wp--preset--color--gold);
border-radius: 0 var(--wp--custom--radius--md) var(--wp--custom--radius--md) 0;
}
.fmy-step-metalabel {
color: var(--wp--preset--color--gold-deep);
font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
margin: 0 0 4px;
}
.fmy-step-metaval { font-size: 0.9375rem; font-weight: 600; color: var(--wp--preset--color--ink); line-height: 1.35; margin: 0; }
/* Dark-row text/box overrides (per-section-background lesson) */
.fmy-step-row.is-dark .fmy-svc-intro { color: rgb(var(--wp--custom--rgb--cream) / 0.75); }
.fmy-step-row.is-dark .fmy-featlist li { color: rgb(var(--wp--custom--rgb--cream) / 0.8); }
.fmy-step-row.is-dark .fmy-featlist li::before { background: var(--wp--preset--color--gold); }
.fmy-step-row.is-dark .fmy-step-metabox { background: rgb(var(--wp--custom--rgb--gold) / 0.12); }
.fmy-step-row.is-dark .fmy-step-metalabel { color: var(--wp--preset--color--gold); }
.fmy-step-row.is-dark .fmy-step-metaval { color: var(--wp--preset--color--cream); }
/* Gold zoom buttons carry the mockup's soft gold glow (banner, step 01, FAQ CTA). */
.fmy-cta-zoom .wp-block-button__link.has-gold-background-color {
box-shadow: 0 4px 24px rgb(var(--wp--custom--rgb--gold) / 0.25);
}
/* --- Lab-footage video steps: autoplay video fills the wrap, overlay pills --- */
.fmy-step-videowrap { aspect-ratio: 4 / 3; background: var(--wp--preset--color--ink-black); }
.fmy-step-video { position: absolute; inset: 0; z-index: 1; margin: 0; line-height: 0; }
.fmy-step-video video { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0.92; }
/* Bottom gradient so the pills stay legible over any frame. */
.fmy-step-videowrap::before {
content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
background: linear-gradient(to top, rgb(var(--wp--custom--rgb--ink-black) / 0.55) 0%, transparent 50%);
}
.fmy-step-videowrap .fmy-step-badge { z-index: 4; }
.fmy-step-botrow {
position: absolute; bottom: 16px; left: 16px; z-index: 4; margin: 0;
display: flex; align-items: center; gap: 8px;
}
.fmy-vcatpill {
margin: 0; padding: 6px 14px;
background: rgb(var(--wp--custom--rgb--gold) / 0.95); color: var(--wp--preset--color--ink);
font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
border-radius: var(--wp--custom--radius--sm); white-space: nowrap;
}
.fmy-labfoot {
margin: 0; padding: 6px 10px;
background: rgb(var(--wp--custom--rgb--ink-black) / 0.75);
border: 1px solid rgb(var(--wp--custom--rgb--gold) / 0.3);
border-radius: var(--wp--custom--radius--sm);
display: inline-flex; align-items: center; gap: 6px;
font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
color: rgb(var(--wp--custom--rgb--cream) / 0.8); white-space: nowrap;
backdrop-filter: blur(6px);
}
.fmy-labfoot-dot {
width: 6px; height: 6px; border-radius: 50%; display: inline-block;
background: var(--wp--preset--color--gold); animation: fmyPulse 2s ease infinite;
}
@keyframes fmyPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.7); } }
/* Dark rows carry media FIRST in source (so it stacks on top on mobile — and the
consistency checker reads positive source-order gaps); on desktop flip it back so
media sits on the RIGHT, copy on the left. */
@media (min-width: 782px) {
.fmy-step-row.is-dark .fmy-svc-cols { flex-direction: row-reverse; }
}
/* --- Complete product timeline: horizontal 6-node track --- */
.fmy-ptl-lede { color: rgb(var(--wp--custom--rgb--ink) / 0.6); max-width: 620px; margin-left: auto; margin-right: auto; }
.fmy-ptl-track { position: relative; gap: 16px 8px !important; align-items: flex-start; }
.fmy-ptl-track::before {
content: ""; position: absolute; top: 21px; left: 9%; right: 9%; height: 2px;
background: linear-gradient(to right, var(--wp--preset--color--gold), rgb(var(--wp--custom--rgb--gold) / 0.3)); z-index: 0;
}
.fmy-ptl-node { position: relative; z-index: 1; flex: 1 1 0; min-width: 120px; max-width: 175px; text-align: center; }
/* Node numbering — 1:1 with the mockup: ink circle, gold ring, gold number. */
.fmy-ptl-dot {
width: 44px; height: 44px; margin: 0 auto 12px !important;
display: flex; align-items: center; justify-content: center;
background: var(--wp--preset--color--ink);
border: 2px solid var(--wp--preset--color--gold); border-radius: 50%;
font-size: 0.875rem; font-weight: 700; color: var(--wp--preset--color--gold);
}
.fmy-ptl-phase {
font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
color: var(--wp--preset--color--ink); line-height: 1.3; margin: 0 0 4px !important;
}
.fmy-ptl-dur { font-size: 0.75rem; color: rgb(var(--wp--custom--rgb--ink) / 0.55); margin: 0 !important; }
.fmy-ptl-total {
background: rgb(var(--wp--custom--rgb--ink) / 0.03);
border: 1px solid rgb(var(--wp--custom--rgb--ink) / 0.08);
border-radius: var(--wp--custom--radius--md); padding: 18px 24px;
}
.fmy-ptl-total-text { font-size: 0.875rem; color: rgb(var(--wp--custom--rgb--ink) / 0.7); }
.fmy-ptl-total-text strong { color: var(--wp--preset--color--ink); }
/* --- Process FAQ (dark) — reuses wp:details + the single-open JS --- */
.fmy-pfaq-lede { color: rgb(var(--wp--custom--rgb--cream) / 0.65); max-width: 560px; margin-left: auto; margin-right: auto; }
/* Boxed dropdowns (1:1 with the mockup): bordered card per item, gold-tint on the
open row + answer panel, gold chevron that flips. */
.fmy-pfaq-list { display: flex; flex-direction: column; gap: 8px; }
.fmy-pfaq-item {
margin: 0;
border: 1px solid rgb(var(--wp--custom--rgb--cream) / 0.1);
border-radius: var(--wp--custom--radius--sm);
overflow: hidden;
}
.fmy-pfaq-item summary {
cursor: pointer; list-style: none;
display: flex; align-items: center; justify-content: space-between; gap: 16px;
padding: 20px 24px; background: transparent; transition: background 0.2s ease;
}
.fmy-pfaq-item summary:hover { background: rgb(var(--wp--custom--rgb--gold) / 0.05); }
.fmy-pfaq-item[open] summary { background: rgb(var(--wp--custom--rgb--gold) / 0.08); }
.fmy-pfaq-item summary::-webkit-details-marker { display: none; }
.fmy-pfaq-item summary strong {
font-family: inherit; font-size: 0.9375rem; font-weight: 600;
color: var(--wp--preset--color--cream);
}
.fmy-pfaq-item summary::after {
content: ""; flex-shrink: 0; width: 9px; height: 9px;
border-right: 2.5px solid var(--wp--preset--color--gold);
border-bottom: 2.5px solid var(--wp--preset--color--gold);
transform: rotate(45deg); transition: transform 0.3s ease;
}
.fmy-pfaq-item[open] summary::after { transform: rotate(-135deg); }
.fmy-pfaq-answer {
margin: 0; padding: 14px 24px 20px;
background: rgb(var(--wp--custom--rgb--gold) / 0.04);
color: rgb(var(--wp--custom--rgb--cream) / 0.72); font-size: 0.875rem; line-height: 1.7;
}
/* A touch more breathing room above the answer on mobile, where the question wraps. */
@media (max-width: 600px) {
.fmy-pfaq-answer { padding-top: 18px; }
}
.fmy-pfaq-more { color: rgb(var(--wp--custom--rgb--cream) / 0.55); font-size: 0.875rem; }
/* --- Final CTA (light) — mockup heading is ink, not the dark .fmy-final-cta --- */
.fmy-cta-light-sub { color: rgb(var(--wp--custom--rgb--ink) / 0.6); max-width: 600px; margin-left: auto; margin-right: auto; }
@media (max-width: 781px) {
/* Match the Portfolio banner's mobile top spacing (was clamp(132,20vh,168) — too large). */
.wp-block-post-content > .wp-block-group.fmy-process-banner.fmy-page-banner.alignfull {
padding-top: clamp(78px, 9vh, 112px) !important;
}
.fmy-process-banner::after { font-size: 46vw; }
/* Gold stats: 2-up grid with ink/0.15 cross dividers (matches the mockup's divide-x). */
.fmy-stats-band .fmy-stat-grid.wp-block-columns {
display: grid !important; grid-template-columns: 1fr 1fr; gap: 0 !important;
}
.fmy-stats-band .fmy-stat-grid.wp-block-columns > .fmy-stat {
flex: initial !important; width: auto !important; max-width: none !important; min-width: 0 !important;
border-left: 0;
}
.fmy-stats-band .fmy-stat-grid.wp-block-columns > .fmy-stat:nth-child(2n) {
border-left: 1px solid rgb(var(--wp--custom--rgb--ink) / 0.15);
}
.fmy-stats-band .fmy-stat-grid.wp-block-columns > .fmy-stat:nth-child(n+3) {
border-top: 1px solid rgb(var(--wp--custom--rgb--ink) / 0.15);
}
/* Timeline stacks 2-up; drop the horizontal connector. */
.fmy-ptl-track::before { display: none; }
.fmy-ptl-node { flex: 1 1 40% !important; max-width: none; }
/* Meta boxes stack full-width. */
.fmy-step-meta { flex-direction: column; }
.fmy-step-metabox { flex: 1 1 auto; }
}
/* ============================================================
PORTFOLIO PAGE (ID 8) — banner stats, sticky filter, product grid
============================================================ */
/* Category pill colours from the mockup (only the 4 without a theme token). */
:root {
--fmy-cat-haircare: 61 51 99; /* #3d3363 */
--fmy-cat-personal: 139 138 160; /* #8b8aa0 */
--fmy-cat-wellness: 74 103 65; /* #4a6741 */
--fmy-cat-petcare: 122 92 58; /* #7a5c3a */
}
/* ---- Banner (ink, no photo) + inline 4-stat row ---- */
.fmy-portfolio-banner { position: relative; overflow: hidden; }
/* Tiled gold cross/plus pattern at 5% opacity — copied exactly from the mockup. */
.fmy-portfolio-banner::before {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.05;
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23fabd52' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.fmy-portfolio-banner::after {
content: ""; position: absolute; top: -20%; right: -10%; width: 55%; height: 140%;
background: radial-gradient(closest-side, rgb(var(--wp--custom--rgb--gold) / 0.12), transparent 70%);
pointer-events: none; z-index: 0;
}
.fmy-portfolio-banner > .fmy-svc-banner-copy { position: relative; z-index: 1; }
/* Clear the fixed header + breathing room above the H1 (5-class selector beats the
auto section-padding rule; matches the Process banner clearance for consistency). */
.wp-block-post-content > .wp-block-group.fmy-portfolio-banner.fmy-page-banner.alignfull {
padding-top: clamp(78px, 9vh, 112px) !important;
}
.fmy-pf-bstats { margin-top: 8px; }
.fmy-pf-bstat { min-width: 0; }
.fmy-pf-bstat-num {
margin: 0; font-family: var(--wp--preset--font-family--display);
font-size: 2rem; line-height: 1.05; font-weight: 600; color: var(--wp--preset--color--gold);
}
.fmy-pf-bstat-label {
margin: 4px 0 0; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase;
color: rgb(var(--wp--custom--rgb--cream) / 0.55);
}
/* ---- Category filter bar (static, scrolls with the page — matches mockup) ---- */
.fmy-pfilter-bar {
background: var(--wp--preset--color--base);
border-bottom: 1px solid rgb(var(--wp--custom--rgb--ink) / 0.08);
}
.fmy-pfilter-inner {
display: flex; align-items: center; gap: 8px;
max-width: 1440px; margin: 0 auto;
padding: 16px var(--wp--style--root--padding-left, 3rem);
overflow-x: auto; scrollbar-width: none;
}
.fmy-pfilter-inner::-webkit-scrollbar { display: none; }
.fmy-pf-btn {
flex: 0 0 auto; cursor: pointer;
font-family: var(--wp--preset--font-family--body);
font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
white-space: nowrap; padding: 10px 20px;
background: transparent; color: var(--wp--preset--color--muted);
border: 1px solid rgb(var(--wp--custom--rgb--ink) / 0.15);
transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.fmy-pf-btn:hover { border-color: rgb(var(--wp--custom--rgb--gold) / 0.6); color: var(--wp--preset--color--ink); }
.fmy-pf-btn.is-active {
background: var(--wp--preset--color--ink); color: var(--wp--preset--color--gold);
border-color: var(--wp--preset--color--ink);
}
/* Right-side tools group: live-search box + count (pushed right). */
.fmy-pf-tools { display: flex; align-items: center; gap: 12px; margin-left: auto; flex: 0 0 auto; }
.fmy-pf-count { flex: 0 0 auto; white-space: nowrap; font-size: 0.75rem; color: rgb(var(--wp--custom--rgb--muted) / 0.9); }
/* Live-search: transparent box, purple (ink) border only. */
.fmy-pf-search {
flex: 0 0 auto; width: 170px;
background: transparent;
border: 1px solid rgb(var(--wp--custom--rgb--ink) / 0.5);
border-radius: var(--wp--custom--radius--sm);
padding: 7px 12px;
font-family: var(--wp--preset--font-family--body); font-size: 0.75rem;
color: var(--wp--preset--color--ink);
transition: border-color 0.2s ease;
}
.fmy-pf-search::placeholder { color: rgb(var(--wp--custom--rgb--muted) / 0.65); }
.fmy-pf-search:focus { outline: none; border-color: var(--wp--preset--color--ink); }
/* Mobile-only tools (search + gold count pill); hidden on desktop. */
.fmy-pf-mtools { display: none; }
.fmy-pf-count-mobile { display: none; }
/* ---- Product grid ---- */
.fmy-portfolio-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--wp--preset--spacing--50);
}
.fmy-prod-card {
background: var(--wp--preset--color--base);
border: 1px solid rgb(var(--wp--custom--rgb--ink) / 0.07);
overflow: hidden; transition: box-shadow 0.3s, transform 0.3s;
}
.fmy-prod-card:hover { box-shadow: 0 14px 40px rgb(var(--wp--custom--rgb--ink) / 0.12); transform: translateY(-3px); }
.fmy-prod-card.fmy-pf-hidden { display: none; }
/* image box + overlays */
.fmy-prod-media { position: relative; height: 260px; overflow: hidden; background: var(--wp--preset--color--ink-black); }
.fmy-prod-img { margin: 0; height: 100%; }
.fmy-prod-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.fmy-prod-card:hover .fmy-prod-img img { transform: scale(1.05); }
.fmy-prod-media::after {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(transparent 40%, rgb(var(--wp--custom--rgb--ink) / 0.55) 100%);
}
.fmy-prod-pills { position: absolute; top: 12px; left: 12px; z-index: 2; margin: 0; }
.fmy-prod-type, .fmy-prod-approach {
margin: 0; padding: 4px 10px; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
line-height: 1.2; white-space: nowrap;
}
.fmy-prod-type { font-weight: 700; background: var(--wp--preset--color--ink); color: var(--wp--preset--color--gold); }
.fmy-prod-approach { font-weight: 600; letter-spacing: 0.06em; background: rgb(var(--wp--custom--rgb--gold) / 0.92); color: var(--wp--preset--color--ink); }
/* category-coloured TYPE pill */
.cat-skincare .fmy-prod-type { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--gold); }
.cat-haircare .fmy-prod-type { background: rgb(var(--fmy-cat-haircare)); color: var(--wp--preset--color--cream); }
.cat-body-care .fmy-prod-type { background: var(--wp--preset--color--muted); color: var(--wp--preset--color--cream); }
.cat-lip-eye .fmy-prod-type { background: var(--wp--preset--color--gold); color: var(--wp--preset--color--ink); }
.cat-personal-care .fmy-prod-type { background: rgb(var(--fmy-cat-personal)); color: var(--wp--preset--color--cream); }
.cat-wellness .fmy-prod-type { background: rgb(var(--fmy-cat-wellness)); color: var(--wp--preset--color--cream); }
.cat-pet-care .fmy-prod-type { background: rgb(var(--fmy-cat-petcare)); color: var(--wp--preset--color--cream); }
.fmy-prod-badge {
position: absolute; top: 12px; right: 12px; z-index: 2; margin: 0;
padding: 4px 8px; font-size: 0.62rem; font-weight: 600; letter-spacing: 0.06em;
background: rgb(var(--wp--custom--rgb--ink) / 0.85); color: var(--wp--preset--color--gold);
backdrop-filter: blur(4px);
}
.fmy-prod-units {
position: absolute; bottom: 12px; left: 12px; z-index: 2; margin: 0;
font-size: 0.75rem; font-weight: 500; color: rgb(var(--wp--custom--rgb--cream) / 0.85);
}
/* card body */
.fmy-prod-body { padding: 20px; }
.fmy-prod-title {
margin: 0 0 8px; font-family: var(--wp--preset--font-family--display);
font-size: 1.25rem; font-weight: 500; line-height: 1.2; color: var(--wp--preset--color--ink);
}
.fmy-prod-desc { margin: 0; font-size: 0.875rem; line-height: 1.65; color: var(--wp--preset--color--muted); }
/* ---- Confidentiality notice (white bar + top rule, matches localhost py-8) ---- */
.fmy-pf-confid { border-top: 1px solid rgb(var(--wp--custom--rgb--ink) / 0.08); }
/* Beat the auto section-padding rule (clamp 52-88 !important) — collapse to the mockup's 32px. */
.wp-block-post-content > .wp-block-group.fmy-pf-confid.alignfull.has-base-background-color {
padding-top: 32px !important; padding-bottom: 32px !important;
}
.fmy-pf-confid-text {
max-width: 640px; margin: 0 auto; font-size: 0.75rem; line-height: 1.7;
color: rgb(139, 138, 160); /* mockup #8B8AA0 — no exact theme token */
}
.fmy-pf-confid-text strong { color: var(--wp--preset--color--muted); }
/* ---- Responsive grid ---- */
@media (max-width: 1024px) {
.fmy-portfolio-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 781px) {
.fmy-portfolio-grid { grid-template-columns: 1fr; }
.fmy-pf-bstats { gap: 28px 40px !important; }
/* Tighten the gap between the filter row and the count pill (halve 52 -> 26).
5-class selector beats the auto section-padding rule; mobile only. */
.wp-block-post-content > .wp-block-group.fmy-portfolio-gridsec.alignfull.has-cream-background-color {
padding-top: 26px !important;
}
/* Gold horizontal scrollbar under the filter row (mobile only). */
.fmy-pfilter-inner {
scrollbar-width: thin;
scrollbar-color: var(--wp--preset--color--gold) rgb(var(--wp--custom--rgb--gold) / 0.15);
padding-bottom: 14px;
}
.fmy-pfilter-inner::-webkit-scrollbar { display: block; height: 5px; }
.fmy-pfilter-inner::-webkit-scrollbar-track { background: rgb(var(--wp--custom--rgb--gold) / 0.15); border-radius: 100px; }
.fmy-pfilter-inner::-webkit-scrollbar-thumb { background: var(--wp--preset--color--gold); border-radius: 100px; }
/* Hide the desktop tools; show the mobile tools (search + gold count pill) at the
top-right of the cards section. margin-*:auto/!important beats the constrained
layout's margin-inline:auto that would otherwise centre the row. */
.fmy-pf-tools { display: none; }
.fmy-portfolio-gridsec > .fmy-pf-mtools {
display: flex; align-items: center; justify-content: center; gap: 8px;
margin-top: 0; margin-bottom: 16px;
margin-left: auto !important; margin-right: auto !important;
}
.fmy-pf-mtools .fmy-pf-search { flex: 0 1 200px; width: auto; min-width: 0; max-width: 220px; }
.fmy-pf-count-mobile {
display: block; flex: 0 0 auto; white-space: nowrap;
padding: 6px 16px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--wp--preset--color--gold);
background: rgb(var(--wp--custom--rgb--gold) / 0.12);
border: 1px solid rgb(var(--wp--custom--rgb--gold) / 0.35);
border-radius: 100px;
}
}
/* ==========================================================================
ABOUT PAGE (page 9) — reuses banner / founder-bio / dark-stats / final-CTA
patterns; adds capability cards, numbered values, and the lab gallery.
========================================================================== */
/* Banner — real lab hero photo (74_5ab2fb1f) dimmed under a bottom-up ink gradient,
1:1 with localhost. wp:cover keeps the image URL in the DB (migration-safe). */
/* Structure mirrors the Services banner: cover > inner-container > constrained-1440 group >
.fmy-svc-banner-copy (default). Copy left-aligns at the standard gutter and spans the full
1440 content width, so the eyebrow/h1/intro/stats-rule all line up with every other page. */
.fmy-about-banner.wp-block-cover {
background-color: var(--wp--preset--color--ink-black);
padding-left: 0; padding-right: 0;
align-items: flex-start; /* top-align content (banner copy is tall) */
padding-top: clamp(78px, 9vh, 112px) !important; /* clear the fixed header, like Process/Portfolio */
}
.fmy-about-banner .wp-block-cover__image-background {
object-position: 60% 20%;
filter: brightness(0.55) contrast(1.05);
opacity: 1;
}
.fmy-about-banner::after {
content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
background: linear-gradient(to top,
rgb(var(--wp--custom--rgb--ink-black) / 0.98) 0%,
rgb(var(--wp--custom--rgb--ink-black) / 0.6) 50%,
rgb(var(--wp--custom--rgb--ink-black) / 0.2) 100%);
}
.fmy-about-banner > .wp-block-cover__inner-container { position: relative; z-index: 2; }
.fmy-about-banner .fmy-about-h1 { max-width: 800px; }
.fmy-about-banner .fmy-svc-banner-intro { max-width: 620px; color: rgb(var(--wp--custom--rgb--cream) / 0.72); }
/* Missing horizontal rule above the banner stats (mockup: border-top + mt-12 pt-8). */
.fmy-about-banner .fmy-pf-bstats {
margin-top: 48px !important; padding-top: 32px;
border-top: 1px solid rgb(var(--wp--custom--rgb--cream) / 0.12);
}
/* Founder bio — oval photo + gold ring + cream accent, cropped & designed like the
HOME "Meet the Founder" section (.fmy-founder-*). */
.fmy-abio-photo { position: relative; max-width: 400px; }
.fmy-abio-photo::before { /* soft cream accent behind top-left, as on home */
content: ""; position: absolute; top: -14px; left: -14px; width: 84px; height: 96px;
background: rgb(var(--wp--custom--rgb--gold) / 0.14);
border-radius: 50% / 60% 60% 40% 40%; z-index: 0;
}
.fmy-abio-img { margin: 0; position: relative; z-index: 1; }
.fmy-abio-img img {
border-radius: 50% / 58% 58% 42% 42%;
border: 2px solid rgb(var(--wp--custom--rgb--gold) / 0.6);
aspect-ratio: 4 / 5; object-fit: cover; object-position: center; width: 100%;
}
/* Two-line stacked button label (Free · 15 minutes / action) — About founder + Ready-to-Begin CTA */
.fmy-abio-btn .wp-block-button__link {
display: inline-flex; align-items: center; gap: 12px; padding: 14px 28px;
}
.fmy-btn-stack { display: inline-flex; flex-direction: column; align-items: flex-start; line-height: 1; }
.fmy-btn-micro { font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.6; margin-bottom: 3px; }
.fmy-btn-main { font-size: 0.875rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; }
.fmy-abio-btn .wp-block-button__link svg,
.fmy-cta-zoom .wp-block-button__link svg { flex: 0 0 auto; }
/* Credentials badge — overlaps the oval's lower edge, centred; 2-col bulleted grid.
1:1 with localhost: translucent ink-black + blur, gold hairline border, 4px radius. */
.fmy-abio-badge {
position: absolute; left: 50%; transform: translateX(-50%); bottom: 6px; z-index: 2;
width: calc(100% - 20px); max-width: 400px;
border-radius: var(--wp--custom--radius--md);
border: 1px solid rgb(var(--wp--custom--rgb--gold) / 0.2);
background: rgb(var(--wp--custom--rgb--ink-black) / 0.92) !important;
backdrop-filter: blur(12px);
box-shadow: 0 18px 40px rgb(var(--wp--custom--rgb--ink) / 0.3);
}
.fmy-abio-creds { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; row-gap: 8px; }
.fmy-abio-cred {
position: relative; padding-left: 12px;
color: rgb(var(--wp--custom--rgb--cream) / 0.8);
}
.fmy-abio-cred::before {
content: ""; position: absolute; left: 0; top: 0.55em;
width: 4px; height: 4px; border-radius: 50%;
background: var(--wp--preset--color--gold);
}
/* Capabilities — 3-card grid (image top, icon, title, description). */
.fmy-cap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--wp--preset--spacing--50); }
.fmy-cap-card {
background: var(--wp--preset--color--base);
border: 1px solid rgb(var(--wp--custom--rgb--ink) / 0.08);
border-radius: var(--wp--custom--radius--md); overflow: hidden;
display: flex; flex-direction: column;
box-shadow: 0 10px 30px rgb(var(--wp--custom--rgb--ink) / 0.05);
}
.fmy-cap-img { margin: 0; }
.fmy-cap-img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; border-radius: 0; }
.fmy-cap-icon { margin: 0; line-height: 0; color: var(--wp--preset--color--gold-deep); }
.fmy-cap-body { flex: 1 1 auto; }
/* Card titles bold + larger, matching localhost's bold serif (Cormorant renders thin at weight 400). */
.fmy-cap-title { font-size: 1.375rem !important; font-weight: 700; }
/* By the Numbers (dark, About variant) — flat ink band (no dotted texture), matching localhost. */
.fmy-about-stats { background-image: none; }
.fmy-about-stats .fmy-stat { text-align: center; }
/* Feature items (Fast Turnaround / Quality Guaranteed / Founder-Direct) — 1:1 with localhost:
48px gold-tint icon, text-lg bold cream title, 260px-capped cream/0.55 desc, uniform gap-4. */
.fmy-about-stats .fmy-feat {
display: flex; flex-direction: column; align-items: center; text-align: center;
gap: var(--wp--preset--spacing--40);
}
.fmy-about-stats .fmy-feat > * { margin-top: 0 !important; margin-bottom: 0 !important; }
.fmy-feat-icon {
width: 48px; height: 48px;
display: flex; align-items: center; justify-content: center;
color: var(--wp--preset--color--gold);
background: rgb(var(--wp--custom--rgb--gold) / 0.1);
border: 0;
border-radius: 100px;
}
.fmy-feat-title { font-size: 1.125rem !important; font-weight: 700; }
.fmy-about-stats .fmy-feat p:not(.fmy-feat-icon) {
max-width: 260px;
color: rgb(var(--wp--custom--rgb--cream) / 0.55) !important;
}
.fmy-about-stats .fmy-feat-grid.wp-block-columns { gap: 32px; }
/* Values — numbered list; the left column sticks on desktop scroll. 1:1 with localhost:
faded oversized gold numbers, bold ink titles, larger ink/0.65 descriptions,
airy py-10 rows, gap-8, and a text-base ink/0.6 intro. */
.fmy-val-row { align-items: flex-start; gap: 32px; }
.fmy-values .fmy-val-row {
padding-top: 40px !important; padding-bottom: 40px !important;
border-bottom-color: rgb(var(--wp--custom--rgb--ink) / 0.08) !important;
}
.fmy-values-aside p:last-of-type { font-size: 1rem !important; color: rgb(var(--wp--custom--rgb--ink) / 0.6) !important; }
.fmy-val-num {
flex: 0 0 auto; min-width: 3rem; line-height: 1;
font-size: clamp(2rem, 3vw, 2.5rem);
font-weight: 700 !important;
color: rgb(var(--wp--custom--rgb--gold) / 0.25);
}
.fmy-val-title { font-weight: 700; margin-bottom: 12px !important; }
.fmy-val-desc { font-size: 1rem !important; color: rgb(var(--wp--custom--rgb--ink) / 0.65) !important; }
.fmy-val-copy { flex: 1 1 auto; }
@media (min-width: 782px) {
.fmy-values-aside { position: sticky; top: 100px; align-self: flex-start; }
}
/* Lab gallery — 1 tall + 2 small + 1 wide collage. */
.fmy-about-gallery {
display: grid; grid-template-columns: repeat(4, 1fr);
grid-auto-rows: clamp(150px, 19vw, 240px); gap: 12px;
}
.fmy-about-gallery .fmy-ag-item { margin: 0; }
.fmy-about-gallery .fmy-ag-item img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: var(--wp--custom--radius--md); }
.fmy-ag-lg { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.fmy-ag-wide { grid-column: span 2; }
@media (max-width: 781px) {
.fmy-cap-grid { grid-template-columns: 1fr; gap: var(--wp--preset--spacing--50); }
.fmy-about-gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: clamp(130px, 36vw, 190px); }
.fmy-ag-lg { grid-column: 1 / span 2; grid-row: auto; }
.fmy-ag-wide { grid-column: 1 / span 2; }
.fmy-abio-photo { max-width: 360px; margin-inline: auto; }
/* Larger value titles on phones (Boutique Quality / Scientific Rigour / …). */
.fmy-val-title { font-size: 1.5rem !important; }
/* Tighter column gap so "14+ Years Cosmetic R&D" stays on one line in the narrow badge. */
.fmy-abio-creds { column-gap: 12px; }
/* Breathing room so "Meet the Founder" doesn't stick to the photo when stacked. */
/* Stacked columns gap must live on the container's row-gap — margin-top on the column
is zeroed by core's first-child reset (documented trap). Gives the founder text room
below the photo so "Meet the Founder" doesn't stick to it. */
.fmy-abio .wp-block-columns { row-gap: 48px; }
}
/* ============================================================================
RESOURCES PAGE (ID 10) — knowledge hub. Per-section backgrounds DIFFER
(S1 ink · S2 white · S3 cream · S4 ink · S5/6/7 cream w/ dark boxes).
S1–S4 + S7 use SQUARE corners; S5/S6 boxes are rounded — match the mockup.
============================================================================ */
/* ---- S1 Banner (ink, no photo) — tiled gold plus pattern @5% + gold glow ---- */
.fmy-res-banner { position: relative; overflow: hidden; background-color: var(--wp--preset--color--ink); }
.fmy-res-banner::before {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.05;
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23fabd52' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.fmy-res-banner::after {
content: ""; position: absolute; top: -20%; right: -10%; width: 55%; height: 140%;
background: radial-gradient(closest-side, rgb(var(--wp--custom--rgb--gold) / 0.12), transparent 70%);
pointer-events: none; z-index: 0;
}
.fmy-res-banner > .fmy-svc-banner-copy { position: relative; z-index: 1; }
/* Clear the fixed header (5-class selector beats the auto section-padding rule; matches
the Process/Portfolio banner clearance so all interior banners are uniform). */
.wp-block-post-content > .wp-block-group.fmy-res-banner.fmy-page-banner.alignfull {
padding-top: clamp(78px, 9vh, 112px) !important;
}
.fmy-res-eyebrow {
color: var(--wp--preset--color--gold);
font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
margin: 0 0 16px;
}
.fmy-res-banner .fmy-res-h1 { max-width: 720px; }
.fmy-res-banner .fmy-res-intro { max-width: 520px; color: rgb(var(--wp--custom--rgb--cream) / 0.75); }
/* ---- S2 Featured Guide (white) — 2-col card, SQUARE corners ---- */
.fmy-feat-eyebrow {
color: var(--wp--preset--color--gold);
font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
margin: 0 0 32px;
}
.fmy-feat-guide {
display: grid; grid-template-columns: 1fr 1fr; gap: 0;
border: 1px solid rgb(var(--wp--custom--rgb--ink) / 0.1);
box-shadow: 0 20px 60px rgb(var(--wp--custom--rgb--ink) / 0.08);
background: var(--wp--preset--color--base);
}
/* Media is absolutely-filled so the image can't force the row taller than the text
panel — the section height is driven by the copy, not the image's intrinsic size. */
.fmy-feat-media { position: relative; min-height: 340px; overflow: hidden; background: var(--wp--preset--color--ink-black); }
.fmy-feat-img { position: absolute; inset: 0; margin: 0; width: 100%; height: 100%; }
.fmy-feat-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fmy-feat-panel {
background: var(--wp--preset--color--ink);
padding: 40px; display: flex; flex-direction: column; align-items: flex-start;
}
.fmy-feat-pill {
margin: 0 0 20px; width: fit-content; padding: 6px 14px;
background: rgb(var(--wp--custom--rgb--gold) / 0.12);
border: 1px solid rgb(var(--wp--custom--rgb--gold) / 0.3);
color: var(--wp--preset--color--gold);
font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
}
.fmy-feat-title { color: var(--wp--preset--color--cream); }
.fmy-feat-desc { color: rgb(var(--wp--custom--rgb--cream) / 0.7); }
.fmy-feat-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.fmy-feat-read { margin: 0 4px 0 0; font-size: 0.75rem; color: rgb(var(--wp--custom--rgb--cream) / 0.45); }
.fmy-feat-tag {
margin: 0; padding: 2px 8px; font-size: 0.7rem;
background: rgb(var(--wp--custom--rgb--cream) / 0.08);
border: 1px solid rgb(var(--wp--custom--rgb--cream) / 0.12);
color: rgb(var(--wp--custom--rgb--cream) / 0.55);
}
.fmy-feat-btn .wp-block-button__link {
border-radius: 0; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
/* Blog hero reuses the whole .fmy-feat-* design for the latest post; these add the
linked title + the dynamic read-more button (the Resources guide uses a static button). */
.fmy-feat-img a { display: block; width: 100%; height: 100%; }
.fmy-bloghero-section .fmy-feat-title a { color: inherit; text-decoration: none; transition: color 0.2s ease; }
.fmy-bloghero-section .fmy-feat-title a:hover { color: var(--wp--preset--color--gold); }
.fmy-feat-herobtn {
display: inline-block; margin: 4px 0 0;
background: var(--wp--preset--color--gold); color: var(--wp--preset--color--ink);
padding: 14px 26px; border-radius: 0;
font-family: var(--wp--preset--font-family--body);
font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
text-decoration: none; transition: background 0.2s ease, transform 0.2s ease;
}
.fmy-feat-herobtn:hover { background: var(--wp--preset--color--gold-deep); color: var(--wp--preset--color--ink); transform: translateY(-1px); }
@media (max-width: 781px) {
.fmy-feat-guide { grid-template-columns: 1fr; }
.fmy-feat-panel { padding: 28px; }
.fmy-feat-media { min-height: 240px; }
}
/* ---- S3 Filter chip bar (cream) — square chips, horizontal scroll on mobile ---- */
.fmy-rfilter-bar {
background: var(--wp--preset--color--cream);
border-bottom: 1px solid rgb(var(--wp--custom--rgb--ink) / 0.08);
}
.fmy-rfilter-inner {
display: flex; align-items: center; gap: 8px;
max-width: 1440px; margin: 0 auto;
padding: 16px var(--wp--style--root--padding-left, 3rem);
overflow-x: auto; scrollbar-width: none;
}
.fmy-rfilter-inner::-webkit-scrollbar { display: none; }
.fmy-rf-btn {
flex: 0 0 auto; cursor: pointer;
font-family: var(--wp--preset--font-family--body);
font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
white-space: nowrap; padding: 10px 20px;
background: transparent; color: var(--wp--preset--color--muted);
border: 1px solid rgb(var(--wp--custom--rgb--ink) / 0.15);
transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.fmy-rf-btn:hover { border-color: rgb(var(--wp--custom--rgb--gold) / 0.6); color: var(--wp--preset--color--ink); }
.fmy-rf-btn.is-active {
background: var(--wp--preset--color--ink); color: var(--wp--preset--color--gold);
border-color: var(--wp--preset--color--ink);
}
/* Right-side tools (live-search + count), identical to the Portfolio filter (.fmy-pf-tools). */
.fmy-rf-tools { display: flex; align-items: center; gap: 12px; margin-left: auto; flex: 0 0 auto; }
.fmy-rf-count { flex: 0 0 auto; white-space: nowrap; font-size: 0.75rem; color: rgb(var(--wp--custom--rgb--muted) / 0.9); }
.fmy-rf-search {
flex: 0 0 auto; width: 170px;
background: transparent;
border: 1px solid rgb(var(--wp--custom--rgb--ink) / 0.5);
border-radius: var(--wp--custom--radius--sm);
padding: 7px 12px;
font-family: var(--wp--preset--font-family--body); font-size: 0.75rem;
color: var(--wp--preset--color--ink);
transition: border-color 0.2s ease;
}
.fmy-rf-search::placeholder { color: rgb(var(--wp--custom--rgb--muted) / 0.65); }
.fmy-rf-search:focus { outline: none; border-color: var(--wp--preset--color--ink); }
.fmy-rf-mtools { display: none; }
.fmy-rf-count-mobile { display: none; }
/* ---- S3 Article grid (cream) — 3/2/1-col, SQUARE white cards ---- */
.fmy-res-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--wp--preset--spacing--50); }
.fmy-res-card {
background: var(--wp--preset--color--base);
border: 1px solid rgb(var(--wp--custom--rgb--ink) / 0.07);
overflow: hidden; display: flex; flex-direction: column;
transition: box-shadow 0.3s, transform 0.3s;
}
.fmy-res-card:hover { box-shadow: 0 14px 40px rgb(var(--wp--custom--rgb--ink) / 0.12); transform: translateY(-3px); }
.fmy-res-card.fmy-res-hidden { display: none; }
/* width:100% is REQUIRED: the card is display:flex + is-layout-constrained, whose
margin-inline:auto on children disables flex-stretch → the media would shrink to
the image's intrinsic width. Explicit 100% makes the image cover the full card. */
.fmy-res-media { position: relative; width: 100%; height: 220px; overflow: hidden; background: var(--wp--preset--color--ink-black); }
.fmy-res-img { margin: 0; width: 100%; height: 100%; }
.fmy-res-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.fmy-res-card:hover .fmy-res-img img { transform: scale(1.05); }
.fmy-res-badge {
position: absolute; top: 12px; left: 12px; z-index: 2; margin: 0;
padding: 5px 10px; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
background: var(--wp--preset--color--ink); color: var(--wp--preset--color--gold);
}
.fmy-res-body { width: 100%; padding: 24px; display: flex; flex-direction: column; flex: 1 1 auto; }
.fmy-res-title {
margin: 0 0 12px; font-size: 1.125rem; font-weight: 500; line-height: 1.3;
color: var(--wp--preset--color--ink);
}
.fmy-res-excerpt {
margin: 0 0 16px; font-size: 0.875rem; line-height: 1.7; color: var(--wp--preset--color--muted);
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.fmy-res-foot {
margin-top: auto; align-items: center; gap: 12px;
}
.fmy-res-read { margin: 0; font-size: 0.75rem; color: rgb(139 138 160); }
.fmy-res-readmore { margin: 0; }
.fmy-res-readmore a {
display: inline-block; text-decoration: none;
font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
color: var(--wp--preset--color--ink);
border: 1px solid rgb(var(--wp--custom--rgb--ink) / 0.25);
padding: 7px 12px; transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.fmy-res-readmore a:hover {
background: var(--wp--preset--color--ink); color: var(--wp--preset--color--cream);
border-color: var(--wp--preset--color--ink);
}
@media (max-width: 1024px) { .fmy-res-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 781px) {
.fmy-res-grid { grid-template-columns: 1fr; }
/* Gold horizontal scrollbar under the filter chip row (mobile only) — matches Portfolio. */
.fmy-rfilter-inner {
scrollbar-width: thin;
scrollbar-color: var(--wp--preset--color--gold) rgb(var(--wp--custom--rgb--gold) / 0.15);
padding-bottom: 12px;
}
.fmy-rfilter-inner::-webkit-scrollbar { display: block; height: 5px; }
.fmy-rfilter-inner::-webkit-scrollbar-track { background: rgb(var(--wp--custom--rgb--gold) / 0.15); border-radius: 100px; }
.fmy-rfilter-inner::-webkit-scrollbar-thumb { background: var(--wp--preset--color--gold); border-radius: 100px; }
/* Move the search + count out of the scrolling chip row into the grid section, as a
centred search box + gold count pill — identical to the Portfolio filter on mobile. */
.fmy-rf-tools { display: none; }
.fmy-res-gridsec > .fmy-rf-mtools {
display: flex; align-items: center; justify-content: center; gap: 8px;
margin-top: 0; margin-bottom: 16px;
margin-left: auto !important; margin-right: auto !important;
}
.fmy-rf-mtools .fmy-rf-search { flex: 0 1 200px; width: auto; min-width: 0; max-width: 220px; }
.fmy-rf-count-mobile {
display: block; flex: 0 0 auto; white-space: nowrap;
padding: 6px 16px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em;
text-transform: uppercase; color: var(--wp--preset--color--gold);
background: rgb(var(--wp--custom--rgb--gold) / 0.12);
border: 1px solid rgb(var(--wp--custom--rgb--gold) / 0.35);
border-radius: 100px;
}
}
/* ---- S4 Newsletter (dark) — centred, SQUARE inline form ---- */
.fmy-rnl-eyebrow {
color: var(--wp--preset--color--gold);
font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
}
.fmy-rnl-sub { color: rgb(var(--wp--custom--rgb--cream) / 0.65); }
.fmy-rnl-form { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.fmy-rnl-row { display: flex; gap: 10px; width: 100%; max-width: 480px; }
.fmy-rnl-input {
flex: 1 1 auto; border-radius: 0;
background: rgb(var(--wp--custom--rgb--cream) / 0.08);
border-color: rgb(var(--wp--custom--rgb--cream) / 0.2);
}
.fmy-rnl-btn { flex: 0 0 auto; width: auto; border-radius: 0; padding: 16px 28px; }
.fmy-rnl-fine { text-align: center; color: rgb(var(--wp--custom--rgb--cream) / 0.35); }
@media (max-width: 600px) {
.fmy-rnl-row { flex-direction: column; }
.fmy-rnl-btn { width: 100%; }
}
/* ---- S5 Free Download (cream section, DARK rounded box) ---- */
.fmy-res-download {
border: 1px solid rgb(var(--wp--custom--rgb--gold) / 0.2);
border-radius: 16px;
}
.fmy-res-dl-head { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.fmy-res-dl-icon {
margin: 0; flex: 0 0 48px; width: 48px; height: 48px;
display: flex; align-items: center; justify-content: center;
background: rgb(var(--wp--custom--rgb--gold) / 0.12); border-radius: 12px; font-size: 1.4rem;
}
.fmy-res-dl-text { flex: 1 1 240px; }
.fmy-res-dl-label {
margin: 0 0 4px; color: var(--wp--preset--color--gold);
font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
}
.fmy-res-dl-title { margin: 0 0 4px; color: var(--wp--preset--color--cream); font-size: 1.2rem; }
.fmy-res-dl-sub { margin: 0; color: rgb(var(--wp--custom--rgb--cream) / 0.55); font-size: 0.85rem; }
.fmy-res-dl-form { margin: 0; }
.fmy-res-dl-row { display: flex; gap: 10px; }
.fmy-res-dl-input {
flex: 1 1 auto; box-sizing: border-box;
background: rgb(var(--wp--custom--rgb--cream) / 0.06);
border: 1px solid rgb(var(--wp--custom--rgb--cream) / 0.14);
border-radius: 8px; color: var(--wp--preset--color--cream);
padding: 14px 16px; font-size: 0.9rem; font-family: inherit;
transition: border-color 0.2s ease;
}
.fmy-res-dl-input::placeholder { color: rgb(var(--wp--custom--rgb--cream) / 0.4); }
.fmy-res-dl-input:focus { outline: none; border-color: var(--wp--preset--color--gold); }
.fmy-res-dl-btn {
flex: 0 0 auto; cursor: pointer;
background: var(--wp--preset--color--gold); color: var(--wp--preset--color--ink);
border: none; border-radius: 8px; padding: 14px 22px;
font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
font-family: inherit; transition: transform 0.25s ease, filter 0.25s ease, box-shadow 0.25s ease;
}
.fmy-res-dl-btn:hover, .fmy-res-dl-btn:focus-visible {
transform: translateY(-1px); filter: brightness(0.95);
box-shadow: 0 6px 26px rgb(var(--wp--custom--rgb--gold) / 0.5);
}
.fmy-res-dl-fine { margin: 12px 0 0; color: rgb(var(--wp--custom--rgb--cream) / 0.3); font-size: 0.72rem; }
/* Gated-download success state (email submitted → thank-you + download button) */
.fmy-res-dl-form [hidden] { display: none !important; } /* [hidden] must beat the flex rules below */
.fmy-res-dl-success { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.fmy-res-dl-thanks { margin: 0; color: rgb(var(--wp--custom--rgb--cream) / 0.65); font-size: 0.875rem; }
.fmy-res-dl-download {
display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto;
background: var(--wp--preset--color--gold); color: var(--wp--preset--color--ink);
border-radius: 8px; padding: 12px 24px; text-decoration: none;
font-size: 0.875rem; font-weight: 700; letter-spacing: 0.04em;
transition: transform 0.2s ease, filter 0.2s ease;
}
.fmy-res-dl-download:hover { transform: scale(1.03); filter: brightness(0.97); }
/* Tighter band than the auto section padding (mockup py-12); ≥5-class selector + !important. */
.wp-block-post-content > .wp-block-group.fmy-res-dlsec.has-cream-background-color.alignfull {
padding-block: clamp(36px, 5vw, 56px) !important;
}
@media (max-width: 600px) {
.fmy-res-dl-row { flex-direction: column; }
.fmy-res-dl-btn { width: 100%; }
}
/* ---- S6 Regulatory Compliance Hub (cream section, DARK rounded 2-col box) ---- */
.fmy-reghub-sec { border-top: 1px solid rgb(var(--wp--custom--rgb--ink) / 0.07); }
.fmy-reghub {
display: grid; grid-template-columns: 1fr 1fr; overflow: hidden;
background: var(--wp--preset--color--ink);
border: 1px solid rgb(var(--wp--custom--rgb--gold) / 0.15);
border-radius: 16px;
}
.fmy-reghub-left { padding: 48px; }
.fmy-reghub-right { padding: 40px 48px; border-left: 1px solid rgb(var(--wp--custom--rgb--cream) / 0.08); }
.fmy-reghub-pill {
margin: 0 0 20px; width: fit-content; padding: 6px 16px; border-radius: 100px;
background: rgb(var(--wp--custom--rgb--gold) / 0.12);
border: 1px solid rgb(var(--wp--custom--rgb--gold) / 0.3);
color: var(--wp--preset--color--gold);
font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
}
.fmy-reghub-title { color: var(--wp--preset--color--cream); }
.fmy-reghub-desc { color: rgb(var(--wp--custom--rgb--cream) / 0.65); }
.fmy-reghub-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.fmy-reghub-tag {
margin: 0; padding: 6px 14px; border-radius: 100px;
background: rgb(var(--wp--custom--rgb--cream) / 0.07);
border: 1px solid rgb(var(--wp--custom--rgb--cream) / 0.1);
color: rgb(var(--wp--custom--rgb--cream) / 0.6); font-size: 0.78rem;
}
.fmy-reghub-btn .wp-block-button__link {
border-radius: 100px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.fmy-reghub-items { display: flex; flex-direction: column; gap: 16px; }
.fmy-reghub-item {
display: flex; gap: 16px; padding: 16px; border-radius: 12px;
background: rgb(var(--wp--custom--rgb--cream) / 0.04);
border: 1px solid rgb(var(--wp--custom--rgb--cream) / 0.07);
}
/* Windows-safe country-code badge (regional-flag emoji render as bare letters on
Windows) — gold chip with black uppercase code. */
.fmy-reghub-flag {
margin: 0; flex: 0 0 auto;
display: inline-flex; align-items: center; justify-content: center;
min-width: 30px; height: 22px; padding: 0 7px;
background: var(--wp--preset--color--gold); color: #000;
font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; line-height: 1;
border-radius: 4px;
}
.fmy-reghub-itext { flex: 1 1 auto; min-width: 0; }
.fmy-reghub-iheading {
margin: 0 0 4px; color: var(--wp--preset--color--gold);
font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
.fmy-reghub-ibody { margin: 0; color: rgb(var(--wp--custom--rgb--cream) / 0.65); font-size: 0.85rem; line-height: 1.55; }
@media (max-width: 781px) {
.fmy-reghub { grid-template-columns: 1fr; }
.fmy-reghub-left, .fmy-reghub-right { padding: 32px; }
.fmy-reghub-right { border-left: none; border-top: 1px solid rgb(var(--wp--custom--rgb--cream) / 0.08); }
}
/* ---- S7 FAQ (cream) — link rows to /faq (NOT an accordion), SQUARE ---- */
.fmy-rfaq-eyebrow {
color: var(--wp--preset--color--gold);
font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
}
.fmy-rfaq-rows { display: flex; flex-direction: column; gap: 16px; }
.fmy-rfaq-row {
align-items: center; gap: 16px;
padding: 20px 24px; background: var(--wp--preset--color--base);
border: 1px solid rgb(var(--wp--custom--rgb--ink) / 0.08);
}
.fmy-rfaq-q { margin: 0; font-size: 0.875rem; font-weight: 500; color: var(--wp--preset--color--ink); }
.fmy-rfaq-btn .wp-block-button__link {
border-radius: 0; background: var(--wp--preset--color--ink); color: var(--wp--preset--color--gold);
font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
padding: 10px 18px; white-space: nowrap;
}
.fmy-rfaq-foot .wp-block-button__link {
border-radius: 0; background: transparent; color: var(--wp--preset--color--ink);
border: 2px solid var(--wp--preset--color--ink);
font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
transition: background 0.2s, color 0.2s;
}
.fmy-rfaq-foot .wp-block-button__link:hover {
background: var(--wp--preset--color--ink); color: var(--wp--preset--color--cream);
}
@media (max-width: 600px) {
.fmy-rfaq-row { flex-direction: column; align-items: flex-start; }
}
/* ============================================================================
RESOURCE ARTICLE (fmy_resource CPT single) — dark editorial page at
/resources/{slug}. 1:1 with client/src/pages/BlogPostPage.tsx.
============================================================================ */
/* !important: the interior-page rule `body:not(.home) … > main{padding-top:0}` (for
pages with a flush dark banner) would otherwise tuck the breadcrumb under the fixed header. */
.fmy-article-main { padding-top: clamp(92px, 11vh, 124px) !important; padding-bottom: clamp(56px, 6vw, 96px); }
/* Breadcrumb — Home / Resources / */
.fmy-art-breadcrumb {
display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
margin: 0 0 40px; font-size: 0.75rem; color: rgb(var(--wp--custom--rgb--cream) / 0.45);
}
.fmy-art-breadcrumb a { color: rgb(var(--wp--custom--rgb--cream) / 0.45); text-decoration: none; transition: color 0.2s; }
.fmy-art-breadcrumb a:hover { color: var(--wp--preset--color--gold); }
.fmy-art-breadcrumb .sep { color: rgb(var(--wp--custom--rgb--cream) / 0.35); }
.fmy-art-breadcrumb .current { color: var(--wp--preset--color--gold); }
/* Category pill + read time */
.fmy-art-badge-row { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.fmy-art-cat-pill {
padding: 4px 12px; border-radius: 100px;
background: rgb(var(--wp--custom--rgb--gold) / 0.15); color: var(--wp--preset--color--gold);
font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
}
.fmy-art-read { font-size: 0.75rem; color: rgb(var(--wp--custom--rgb--cream) / 0.45); }
/* Title + block italic subtitle */
.fmy-art-title {
margin: 0 0 24px; font-family: var(--wp--preset--font-family--display);
font-size: clamp(2.25rem, 5vw, 3rem); line-height: 1.15; color: var(--wp--preset--color--cream);
}
.fmy-art-title .fmy-art-subtitle {
display: block; margin-top: 8px; font-style: italic;
font-size: clamp(1.5rem, 3.5vw, 1.875rem); color: var(--wp--preset--color--gold);
}
.fmy-art-title em { color: var(--wp--preset--color--gold); font-style: italic; } /* reg-hub accent */
/* Author row (avatar + name + credentials) with divider */
.fmy-art-author {
display: flex; align-items: center; gap: 12px; margin: 0 0 40px; padding-bottom: 40px;
border-bottom: 1px solid rgb(var(--wp--custom--rgb--cream) / 0.1);
}
.fmy-art-avatar {
flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-family: var(--wp--preset--font-family--display); font-size: 1.125rem; font-weight: 700;
background: rgb(var(--wp--custom--rgb--gold) / 0.2); color: var(--wp--preset--color--gold);
}
.fmy-art-author-name { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--wp--preset--color--cream); }
.fmy-art-author-role { margin: 2px 0 0; font-size: 0.75rem; color: rgb(var(--wp--custom--rgb--cream) / 0.5); }
/* Reg-hub keeps a simple eyebrow + lead header */
.fmy-art-eyebrow {
margin: 0 0 16px; color: var(--wp--preset--color--gold);
font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
}
/* Prose body */
.fmy-art-body .fmy-art-lead, p.fmy-art-lead {
font-size: 1.125rem; line-height: 1.7; color: rgb(var(--wp--custom--rgb--cream) / 0.85); margin: 0 0 32px;
}
.fmy-art-body h2 {
font-family: var(--wp--preset--font-family--display); font-size: 1.5rem; font-weight: 700;
line-height: 1.3; color: var(--wp--preset--color--cream); margin: 40px 0 16px;
}
.fmy-art-body h3 {
font-family: var(--wp--preset--font-family--display); font-size: 1.25rem; font-weight: 700;
line-height: 1.3; color: var(--wp--preset--color--cream); margin: 32px 0 12px;
}
.fmy-art-body p { font-size: 1rem; line-height: 1.7; color: rgb(var(--wp--custom--rgb--cream) / 0.75); margin: 0 0 24px; }
.fmy-art-body ol { margin: 0 0 24px; padding-left: 1.4em; color: rgb(var(--wp--custom--rgb--cream) / 0.75); }
.fmy-art-body li { font-size: 1rem; line-height: 1.7; margin-bottom: 10px; }
.fmy-art-body ol li::marker { color: var(--wp--preset--color--gold); }
/* Unordered lists render as gold check items (both plain prose lists and .fmy-art-checklist) */
.fmy-art-body ul { margin: 0 0 24px; padding-left: 0; list-style: none; color: rgb(var(--wp--custom--rgb--cream) / 0.75); }
.fmy-art-body ul > li { position: relative; padding-left: 1.9em; }
.fmy-art-body ul > li::marker { content: ""; }
.fmy-art-body ul > li::before {
content: "\2713"; position: absolute; left: 0; top: 0;
color: var(--wp--preset--color--gold); font-weight: 700;
}
.fmy-art-body a { color: var(--wp--preset--color--gold); text-decoration: underline; text-underline-offset: 2px; }
.fmy-art-body strong { color: var(--wp--preset--color--cream); font-weight: 700; }
.fmy-art-body blockquote {
margin: 32px 0; padding: 8px 0 8px 24px; border-left: 3px solid var(--wp--preset--color--gold);
font-family: var(--wp--preset--font-family--display); font-style: italic;
font-size: 1.25rem; line-height: 1.5; color: var(--wp--preset--color--cream);
}
/* Numbered section eyebrow (ingredients / brief steps) */
.fmy-art-h2num {
margin: 44px 0 2px !important; color: var(--wp--preset--color--gold);
font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.fmy-art-h2num + .wp-block-heading { margin-top: 4px; }
/* Callout box */
.fmy-art-callout {
margin: 28px 0; padding: 24px; border-radius: 12px;
background: rgb(var(--wp--custom--rgb--gold) / 0.08);
border: 1px solid rgb(var(--wp--custom--rgb--gold) / 0.2);
}
.fmy-art-callout.is-warning, .fmy-art-callout.is-important {
background: rgb(214 90 90 / 0.08); border-color: rgb(214 90 90 / 0.3);
}
.fmy-art-callout p.fmy-art-callout-label {
margin: 0 0 8px !important; color: var(--wp--preset--color--gold);
font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
/* Plain (sentence-case) label variant — e.g. "A useful rule of thumb", "Realistic mid-range estimate" */
.fmy-art-callout.is-plain p.fmy-art-callout-label { font-size: 0.95rem; letter-spacing: 0; text-transform: none; }
.fmy-art-callout.is-warning p.fmy-art-callout-label, .fmy-art-callout.is-important p.fmy-art-callout-label { color: rgb(240 150 150); }
.fmy-art-callout p { margin: 0 !important; color: rgb(var(--wp--custom--rgb--cream) / 0.8); }
.fmy-art-callout ul { margin: 0 !important; }
/* Comparison table — gold header, first-col emphasis, zebra rows.
Radius lives on the TABLE (not the scroll container) so horizontal scrolling never crops the corners. */
.fmy-art-table { margin: 40px 0; overflow-x: auto; }
.fmy-art-table table {
width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.875rem;
border: 1px solid rgb(var(--wp--custom--rgb--cream) / 0.1); border-radius: 12px;
}
.fmy-art-table thead tr { background: rgb(var(--wp--custom--rgb--gold) / 0.12); }
.fmy-art-table th { text-align: left; padding: 12px 16px; font-weight: 600; color: var(--wp--preset--color--gold); white-space: nowrap; }
.fmy-art-table tbody td { border-top: 1px solid rgb(var(--wp--custom--rgb--cream) / 0.06); }
.fmy-art-table tbody tr:nth-child(even) { background: rgb(var(--wp--custom--rgb--cream) / 0.02); }
.fmy-art-table td { padding: 12px 16px; color: rgb(var(--wp--custom--rgb--cream) / 0.65); vertical-align: top; }
.fmy-art-table td:first-child { font-weight: 600; color: var(--wp--preset--color--cream); }
/* Round the outer corners on the corner cells so the radius is visible without a clipping container */
.fmy-art-table thead th:first-child { border-top-left-radius: 12px; }
.fmy-art-table thead th:last-child { border-top-right-radius: 12px; }
.fmy-art-table tbody tr:last-child td:first-child { border-bottom-left-radius: 12px; }
.fmy-art-table tbody tr:last-child td:last-child { border-bottom-right-radius: 12px; }
/* In-article booking CTA (gradient) */
.fmy-art-cta {
margin: 64px 0 32px; padding: 32px; border-radius: 16px; text-align: center;
background: linear-gradient(135deg, rgb(var(--wp--custom--rgb--gold) / 0.12) 0%, rgb(var(--wp--custom--rgb--ink) / 0.8) 100%);
border: 1px solid rgb(var(--wp--custom--rgb--gold) / 0.25);
}
.fmy-art-cta p.fmy-art-cta-h { margin: 0 0 12px; font-family: var(--wp--preset--font-family--display); font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.625rem); line-height: 1.2; color: var(--wp--preset--color--cream); }
.fmy-art-cta p.fmy-art-cta-p { margin: 0 0 24px; font-size: 0.875rem; color: rgb(var(--wp--custom--rgb--cream) / 0.7); }
.fmy-art-cta a.fmy-art-cta-link {
display: inline-flex; align-items: center; gap: 8px; padding: 12px 32px; border-radius: 100px;
background: var(--wp--preset--color--gold); color: var(--wp--preset--color--ink);
font-weight: 600; text-decoration: none; transition: transform 0.3s ease;
}
.fmy-art-cta a.fmy-art-cta-link:hover { transform: scale(1.05); color: var(--wp--preset--color--ink); }
/* Checklist */
.fmy-art-checklist li { margin-bottom: 14px; }
/* Related reading — 3-card grid */
.fmy-art-related { margin: 64px 0 32px; }
.fmy-art-related .fmy-art-related-label { margin: 0 0 20px; font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--wp--preset--color--gold); }
.fmy-art-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.fmy-art-related a.fmy-art-related-card {
display: block; padding: 16px; border-radius: 12px;
background: rgb(var(--wp--custom--rgb--cream) / 0.05); border: 1px solid rgb(var(--wp--custom--rgb--cream) / 0.1);
text-decoration: none; transition: transform 0.2s ease;
}
.fmy-art-related a.fmy-art-related-card:hover { transform: scale(1.02); }
.fmy-art-related .fmy-art-related-title, .fmy-art-related .fmy-art-related-more { text-decoration: none; }
.fmy-art-related-title { display: block; font-size: 0.875rem; font-weight: 600; color: var(--wp--preset--color--cream); line-height: 1.4; }
.fmy-art-related-more { display: block; margin-top: 8px; font-size: 0.75rem; color: var(--wp--preset--color--gold); }
/* Mobile: Related Reading collapses to a single column (localhost grid-cols-1 sm:grid-cols-3) */
@media (max-width: 639px) { .fmy-art-related-grid { grid-template-columns: 1fr; } }
/* Article newsletter — shared NewsletterSection (2-col, dark ink-deep, gold diagonal weave) */
.fmy-anl { position: relative; overflow: hidden; padding: 80px 0; background: var(--wp--preset--color--ink-deep); }
.fmy-anl-pattern { position: absolute; inset: 0; pointer-events: none; opacity: 0.03; background-image: repeating-linear-gradient(45deg, var(--wp--preset--color--gold) 0, var(--wp--preset--color--gold) 1px, transparent 1px, transparent 12px); }
.fmy-anl-inner { position: relative; z-index: 1; max-width: var(--wp--style--global--wide-size, 1200px); margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.fmy-anl-eyebrow { margin: 0 0 16px; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--wp--preset--color--gold); }
.fmy-anl-h { margin: 0 0 16px; font-family: var(--wp--preset--font-family--display); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; font-weight: 400; color: var(--wp--preset--color--cream); }
.fmy-anl-h em { color: var(--wp--preset--color--gold); font-style: italic; }
.fmy-anl-lead { margin: 0; font-size: 1rem; line-height: 1.75; color: rgb(var(--wp--custom--rgb--cream) / 0.65); max-width: 440px; }
.fmy-anl-checks { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 32px; }
.fmy-anl-check { display: flex; align-items: center; gap: 8px; }
.fmy-anl-tick { font-size: 0.75rem; font-weight: 700; color: var(--wp--preset--color--gold); }
.fmy-anl-check span:last-child { font-size: 0.75rem; color: rgb(var(--wp--custom--rgb--cream) / 0.5); }
.fmy-anl-form { display: flex; flex-direction: column; gap: 16px; }
.fmy-anl-label { display: block; margin-bottom: 8px; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(var(--wp--custom--rgb--cream) / 0.5); }
.fmy-anl-input { box-sizing: border-box; width: 100%; max-width: 100%; padding: 16px 20px; font-size: 0.875rem; outline: none; background: rgb(var(--wp--custom--rgb--cream) / 0.06); border: 1px solid rgb(var(--wp--custom--rgb--cream) / 0.15); color: var(--wp--preset--color--cream); }
.fmy-anl-btn { box-sizing: border-box; width: 100%; max-width: 100%; padding: 16px; font-size: 0.875rem; letter-spacing: 0.12em; text-transform: uppercase; background: var(--wp--preset--color--gold); color: var(--wp--preset--color--ink); font-weight: 700; border: none; cursor: pointer; transition: filter 0.2s; }
.fmy-anl-btn:hover { filter: brightness(1.05); }
.fmy-anl-fine { margin: 0; text-align: center; font-size: 0.75rem; color: rgb(var(--wp--custom--rgb--cream) / 0.3); }
@media (max-width: 1023px) { .fmy-anl-inner { grid-template-columns: 1fr; } }
/* Numbered ingredient list — mirrors BlogPostPage.tsx numbered items */
.fmy-art-inglist { display: flex; flex-direction: column; gap: 32px; margin: 8px 0 32px; }
.fmy-art-ing { display: flex; gap: 20px; padding-bottom: 32px; border-bottom: 1px solid rgb(var(--wp--custom--rgb--cream) / 0.08); }
.fmy-art-ing.is-last { border-bottom: none; padding-bottom: 0; }
.fmy-art-ing-num {
flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: rgb(var(--wp--custom--rgb--gold) / 0.15); color: var(--wp--preset--color--gold);
font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 1.125rem;
}
.fmy-art-ing-head { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; }
.fmy-art-inglist h2.fmy-art-ing-name { margin: 0; font-family: var(--wp--preset--font-family--display); font-size: 1.25rem; font-weight: 700; line-height: 1.3; color: var(--wp--preset--color--cream); }
.fmy-art-ing-pill {
font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
padding: 2px 8px; border-radius: 4px;
background: rgb(var(--wp--custom--rgb--gold) / 0.12); color: var(--wp--preset--color--gold);
}
.fmy-art-inglist p.fmy-art-ing-desc { margin: 0; font-size: 0.875rem; line-height: 1.65; color: rgb(var(--wp--custom--rgb--cream) / 0.7); }
/* Numbered brief cards — carded numbered structure (w-8 gold badge, no pill/divider) */
.fmy-art-briefcards { display: flex; flex-direction: column; gap: 24px; margin: 8px 0 32px; }
.fmy-art-briefcard { padding: 24px; border-radius: 12px; background: rgb(var(--wp--custom--rgb--cream) / 0.04); border: 1px solid rgb(var(--wp--custom--rgb--cream) / 0.08); }
.fmy-art-briefcard-in { display: flex; align-items: flex-start; gap: 16px; }
.fmy-art-briefcard-num {
flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: rgb(var(--wp--custom--rgb--gold) / 0.15); color: var(--wp--preset--color--gold);
font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 0.875rem;
}
.fmy-art-briefcards h2.fmy-art-briefcard-name { margin: 0 0 8px; font-family: var(--wp--preset--font-family--display); font-size: 1.125rem; font-weight: 700; line-height: 1.3; color: var(--wp--preset--color--cream); }
.fmy-art-briefcards p.fmy-art-briefcard-desc { margin: 0; font-size: 0.875rem; line-height: 1.65; color: rgb(var(--wp--custom--rgb--cream) / 0.7); }
/* Common-mistakes list — red X icon per item */
.fmy-art-xlist { margin: 16px 0 24px; }
.fmy-art-xitem { display: flex; gap: 12px; margin-bottom: 16px; }
.fmy-art-xicon { flex-shrink: 0; margin-top: 2px; color: rgb(224 82 82); line-height: 0; }
.fmy-art-xlist p.fmy-art-xtext { margin: 0; font-size: 0.875rem; line-height: 1.6; color: rgb(var(--wp--custom--rgb--cream) / 0.75); }
/* Info cards — gold title + description, boxed ("Key Ingredients"-style sections) */
.fmy-art-infocards { margin: 8px 0 32px; }
.fmy-art-infocard { padding: 20px; border-radius: 12px; margin-bottom: 20px; background: rgb(var(--wp--custom--rgb--cream) / 0.04); border: 1px solid rgb(var(--wp--custom--rgb--cream) / 0.08); }
.fmy-art-infocard:last-child { margin-bottom: 0; }
.fmy-art-infocards p.fmy-art-infocard-title { margin: 0 0 4px; font-weight: 600; color: var(--wp--preset--color--cream); }
.fmy-art-infocards.is-gold p.fmy-art-infocard-title { color: var(--wp--preset--color--gold); }
.fmy-art-infocards p.fmy-art-infocard-desc { margin: 0; font-size: 0.875rem; line-height: 1.6; color: rgb(var(--wp--custom--rgb--cream) / 0.7); }
/* Cost cards — numbered title + gold money pill top-right + description (true-cost) */
.fmy-art-costcards { display: flex; flex-direction: column; gap: 16px; margin: 8px 0 40px; }
.fmy-art-costcard { padding: 20px; border-radius: 12px; background: rgb(var(--wp--custom--rgb--cream) / 0.04); border: 1px solid rgb(var(--wp--custom--rgb--cream) / 0.08); }
.fmy-art-costcard-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.fmy-art-costcards p.fmy-art-costcard-title { margin: 0; font-weight: 600; color: var(--wp--preset--color--cream); }
.fmy-art-costcard-pill { flex-shrink: 0; white-space: nowrap; font-size: 0.75rem; font-weight: 600; padding: 2px 8px; border-radius: 4px; background: rgb(var(--wp--custom--rgb--gold) / 0.12); color: var(--wp--preset--color--gold); }
.fmy-art-costcards p.fmy-art-costcard-desc { margin: 0; font-size: 0.875rem; line-height: 1.6; color: rgb(var(--wp--custom--rgb--cream) / 0.65); }
/* Back to Resources */
.fmy-art-back { margin: 48px 0 0; padding-top: 32px; border-top: 1px solid rgb(var(--wp--custom--rgb--cream) / 0.1); }
.fmy-art-back a { font-size: 0.875rem; color: rgb(var(--wp--custom--rgb--cream) / 0.5); text-decoration: none; transition: color 0.2s; }
.fmy-art-back a:hover { color: var(--wp--preset--color--gold); }
/* Reg-hub: jump-nav chips, section eyebrows, portal links */
.fmy-art-jumpnav { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 40px; }
.fmy-art-jumpnav a {
padding: 8px 14px; border-radius: 100px;
background: rgb(var(--wp--custom--rgb--cream) / 0.06); border: 1px solid rgb(var(--wp--custom--rgb--cream) / 0.12);
color: rgb(var(--wp--custom--rgb--cream) / 0.7); font-size: 0.72rem; letter-spacing: 0.06em;
text-transform: uppercase; text-decoration: none; transition: color 0.2s, border-color 0.2s;
}
.fmy-art-jumpnav a:hover { border-color: var(--wp--preset--color--gold); color: var(--wp--preset--color--gold); }
.fmy-art-eyebrow2 {
margin: 56px 0 4px !important; color: var(--wp--preset--color--gold);
font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; scroll-margin-top: 90px;
}
/* Red "Important" eyebrow (localhost renders these as a red label + plain paragraph, not a box) */
.fmy-art-eyebrow2.is-danger { color: rgb(255 128 128); margin-top: 32px !important; }
.fmy-art-portal { margin: 0 0 24px !important; }
.fmy-art-portal a {
color: var(--wp--preset--color--gold); font-size: 0.82rem; font-weight: 600;
letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;
}
.fmy-art-portal a:hover { text-decoration: underline; }
@media (max-width: 640px) {
.fmy-art-related-grid { grid-template-columns: 1fr; }
}
/* ============================================================================
FAQ PAGE (page 11) — dark banner + category sidebar/accordion + dark CTA (1:1 localhost)
============================================================================ */
.fmy-faqp-banner { background: var(--wp--preset--color--ink); padding: clamp(78px, 9vh, 112px) 0 80px; }
.fmy-faqp-banner-in { max-width: var(--wp--style--global--wide-size, 1200px); margin: 0 auto; padding: 0 24px; }
/* Eyebrow / H1 / lead sizes match the Services-Process-Portfolio banner exactly
(serif h1 clamp(2.5rem,5vw,4.5rem) weight 700, 16px eyebrow gap, 1.125rem lead). */
.fmy-faqp-eyebrow { margin: 0 0 16px; color: var(--wp--preset--color--gold); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; }
.fmy-faqp-title { margin: 0 0 24px; font-family: var(--wp--preset--font-family--display); font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 700; line-height: 1.05; color: var(--wp--preset--color--cream); }
.fmy-faqp-title em { color: var(--wp--preset--color--gold); font-style: italic; }
.fmy-faqp-lead { margin: 0; max-width: 640px; font-size: 1.125rem; line-height: 1.7; color: rgb(var(--wp--custom--rgb--cream) / 0.7); }
.fmy-faqp-main { background: var(--wp--preset--color--cream); padding: clamp(56px, 7vw, 96px) 0; }
.fmy-faqp-wrap { max-width: var(--wp--style--global--wide-size, 1200px); margin: 0 auto; padding: 0 24px; display: grid; grid-template-columns: 280px 1fr; gap: 64px; align-items: start; }
.fmy-faqp-catlabel { margin: 0 0 16px; color: rgb(var(--wp--custom--rgb--ink) / 0.45); font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; }
.fmy-faqp-cats { display: flex; flex-direction: column; }
.fmy-faqp-cat { display: block; width: 100%; text-align: left; padding: 12px 16px; font-size: 0.875rem; font-weight: 400; color: rgb(var(--wp--custom--rgb--ink) / 0.6); background: transparent; border: none; border-left: 2px solid transparent; cursor: pointer; transition: color 0.2s, background 0.2s; }
.fmy-faqp-cat:hover { color: var(--wp--preset--color--ink); }
.fmy-faqp-cat.is-active { color: var(--wp--preset--color--ink); font-weight: 600; background: rgb(var(--wp--custom--rgb--gold) / 0.1); border-left-color: var(--wp--preset--color--gold); }
.fmy-faqp-shq { margin-top: 32px; padding: 20px; background: var(--wp--preset--color--ink); border-radius: 4px; }
.fmy-faqp-shq-eyebrow { margin: 0 0 8px; color: var(--wp--preset--color--gold); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; }
.fmy-faqp-shq-text { margin: 0 0 16px; font-size: 0.875rem; line-height: 1.5; color: rgb(var(--wp--custom--rgb--cream) / 0.7); }
.fmy-faqp-shq-btn { display: inline-block; padding: 10px 20px; background: var(--wp--preset--color--gold); color: var(--wp--preset--color--ink); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; border-radius: 2px; }
.fmy-faqp-panel { display: none; }
.fmy-faqp-panel.is-active { display: block; }
.fmy-faqp-cathead { margin: 0 0 32px; font-family: var(--wp--preset--font-family--display); font-size: 2rem; font-weight: 700; line-height: 1.2; color: var(--wp--preset--color--ink); }
.fmy-faqp-item { border-bottom: 1px solid rgb(var(--wp--custom--rgb--ink) / 0.1); }
.fmy-faqp-q { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; text-align: left; padding: 20px 0; background: transparent; border: none; cursor: pointer; font-family: inherit; scroll-margin-top: 104px; }
.fmy-faqp-q-text { font-size: 1.0625rem; font-weight: 400; line-height: 1.4; color: var(--wp--preset--color--ink); }
.fmy-faqp-toggle { flex-shrink: 0; color: var(--wp--preset--color--gold); font-size: 1.375rem; line-height: 1; transition: transform 0.2s ease; }
.fmy-faqp-item.is-open .fmy-faqp-toggle { transform: rotate(45deg); }
.fmy-faqp-a { display: none; padding: 0 0 20px; }
.fmy-faqp-item.is-open .fmy-faqp-a { display: block; }
.fmy-faqp-a p { margin: 0; max-width: 640px; font-size: 0.9375rem; line-height: 1.7; color: rgb(var(--wp--custom--rgb--ink) / 0.7); }
.fmy-faqp-cta { background: var(--wp--preset--color--ink); padding: 64px 0; text-align: center; }
.fmy-faqp-cta-in { max-width: 720px; margin: 0 auto; padding: 0 24px; }
.fmy-faqp-cta-eyebrow { margin: 0 0 16px; color: var(--wp--preset--color--gold); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; }
.fmy-faqp-cta-h { margin: 0 0 28px; font-family: var(--wp--preset--font-family--display); font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 400; line-height: 1.15; color: var(--wp--preset--color--cream); }
.fmy-faqp-cta-h strong { color: var(--wp--preset--color--gold); font-weight: 700; }
.fmy-faqp-cta-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; background: var(--wp--preset--color--gold); color: var(--wp--preset--color--ink); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; border-radius: 2px; transition: transform 0.2s ease; }
.fmy-faqp-cta-btn:hover { transform: scale(1.03); }
@media (max-width: 900px) {
.fmy-faqp-wrap { grid-template-columns: 1fr; gap: 40px; }
.fmy-faqp-cathead { font-size: 1.625rem; margin-bottom: 24px; }
}
/* =====================================================================
CONTACT PAGE (page 12) — 1:1 with the Manus mockup /contact.
Built as wp:html sections (same approach as the FAQ page). The message
form is the [formyoule_contact_form] shortcode (see functions.php).
===================================================================== */
.fmy-cont-wrap { max-width: 1440px; margin: 0 auto; padding-left: clamp(1rem, 3.4vw, 3rem); padding-right: clamp(1rem, 3.4vw, 3rem); }
/* --- Hero (solid dark banner, no image) --- */
/* Banner matches the FAQ/Blog/Resources hero: ink band + gold-plus pattern + corner glow
(shared rule adds position/overflow/border-bottom/pattern — see .fmy-faqp-banner block),
same top offset (clamp 78,9vh,112) and unified eyebrow/title/lead sizes. */
.fmy-cont-banner { background: var(--wp--preset--color--ink); padding: clamp(78px, 9vh, 112px) 0 80px; }
.fmy-cont-eyebrow { margin: 0 0 16px; color: var(--wp--preset--color--gold); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
.fmy-cont-title { margin: 0 0 24px; max-width: 760px; font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: clamp(2.5rem, 5vw, 4.5rem); line-height: 1.05; color: var(--wp--preset--color--cream); }
.fmy-cont-title em { display: block; font-style: italic; font-weight: 500; color: var(--wp--preset--color--gold); }
.fmy-cont-lead { margin: 0; max-width: 640px; font-size: 1.125rem; line-height: 1.7; color: rgb(var(--wp--custom--rgb--cream) / 0.7); }
/* --- Main two-column body --- */
.fmy-cont-main { background: var(--wp--preset--color--base); padding: clamp(48px, 8vh, 88px) 0; }
.fmy-cont-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: 48px; align-items: start; }
.fmy-cont-col { display: flex; flex-direction: column; gap: 40px; }
/* Calendly card (dark) */
.fmy-cont-cal { background: var(--wp--preset--color--ink); border: 1px solid rgb(var(--wp--custom--rgb--gold) / 0.18); border-radius: 4px; padding: 40px; }
.fmy-cont-cal-top { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.fmy-cont-cal-ico { flex-shrink: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgb(var(--wp--custom--rgb--gold) / 0.14); color: var(--wp--preset--color--gold); }
.fmy-cont-cal-eyebrow { margin: 0; color: var(--wp--preset--color--gold); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.fmy-cont-cal-h { margin: 0 0 12px; font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: 1.75rem; line-height: 1.15; color: var(--wp--preset--color--cream); }
.fmy-cont-cal-p { margin: 0 0 26px; font-size: 0.95rem; line-height: 1.7; color: rgb(var(--wp--custom--rgb--cream) / 0.62); }
.fmy-cont-cal-btn, .fmy-cont-map-btn { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 2px; transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease; }
.fmy-cont-cal-btn { padding: 15px 26px; background: var(--wp--preset--color--gold); color: var(--wp--preset--color--ink); font-size: 0.78rem; }
.fmy-cont-cal-btn:hover { transform: scale(1.03); color: var(--wp--preset--color--ink); }
/* "OR SEND US A MESSAGE" divider */
.fmy-cont-or { display: flex; align-items: center; gap: 20px; color: rgb(var(--wp--custom--rgb--ink) / 0.4); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.fmy-cont-or::before, .fmy-cont-or::after { content: ""; flex: 1; height: 1px; background: rgb(var(--wp--custom--rgb--ink) / 0.12); }
/* Message form (shortcode output) */
.fmy-cform { display: flex; flex-direction: column; gap: 20px; }
.fmy-cform-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fmy-cform-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.fmy-cform-field { display: flex; flex-direction: column; gap: 8px; }
.fmy-cform-field label { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(var(--wp--custom--rgb--ink) / 0.7); }
.fmy-cform-field label span { color: var(--wp--preset--color--gold-deep); }
.fmy-cform-field input, .fmy-cform-field textarea { box-sizing: border-box; width: 100%; max-width: 100%; padding: 13px 15px; font-family: var(--wp--preset--font-family--body); font-size: 0.95rem; color: var(--wp--preset--color--ink); background: var(--wp--preset--color--cream); border: 1px solid rgb(var(--wp--custom--rgb--ink) / 0.12); border-radius: 3px; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.fmy-cform-field textarea { resize: vertical; min-height: 132px; line-height: 1.6; }
.fmy-cform-field input:focus, .fmy-cform-field textarea:focus { outline: none; border-color: var(--wp--preset--color--gold); box-shadow: 0 0 0 3px rgb(var(--wp--custom--rgb--gold) / 0.15); }
.fmy-cform-field input::placeholder, .fmy-cform-field textarea::placeholder { color: rgb(var(--wp--custom--rgb--ink) / 0.38); }
.fmy-cform-check { display: flex; align-items: flex-start; gap: 12px; padding: 16px 18px; background: rgb(var(--wp--custom--rgb--gold) / 0.08); border: 1px solid rgb(var(--wp--custom--rgb--gold) / 0.2); border-radius: 4px; cursor: pointer; }
.fmy-cform-check input { flex-shrink: 0; margin-top: 2px; width: 16px; height: 16px; accent-color: var(--wp--preset--color--gold-deep); }
.fmy-cform-check span { font-size: 0.8rem; line-height: 1.55; color: rgb(var(--wp--custom--rgb--ink) / 0.66); }
.fmy-cform-check strong { display: block; margin-bottom: 3px; color: var(--wp--preset--color--ink); font-weight: 600; }
.fmy-cform-actions { display: flex; align-items: center; gap: 20px; }
.fmy-cform-btn { display: inline-flex; align-items: center; gap: 8px; padding: 15px 30px; background: var(--wp--preset--color--ink); color: var(--wp--preset--color--cream); font-family: var(--wp--preset--font-family--body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; border: 0; border-radius: 2px; cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; }
.fmy-cform-btn:hover { background: var(--wp--preset--color--gold); color: var(--wp--preset--color--ink); transform: scale(1.02); }
.fmy-cform-reply { font-size: 0.8rem; color: rgb(var(--wp--custom--rgb--ink) / 0.5); }
.fmy-cform-alert { margin: 0; padding: 13px 16px; border-radius: 4px; font-size: 0.875rem; line-height: 1.5; }
.fmy-cform-alert.is-ok { background: rgb(var(--wp--custom--rgb--whatsapp) / 0.12); border: 1px solid rgb(var(--wp--custom--rgb--whatsapp) / 0.4); color: #1f7a45; }
.fmy-cform-alert.is-err { background: rgb(201 60 60 / 0.08); border: 1px solid rgb(201 60 60 / 0.35); color: #a4342c; }
/* Contact-info card (light) */
.fmy-cont-info { background: rgb(var(--wp--custom--rgb--ink) / 0.03); border: 1px solid rgb(var(--wp--custom--rgb--ink) / 0.08); border-radius: 6px; padding: 34px; }
.fmy-cont-info-h { margin: 0 0 26px; font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: 1.5rem; color: var(--wp--preset--color--ink); }
.fmy-cont-row { display: flex; gap: 16px; padding: 16px 0; border-top: 1px solid rgb(var(--wp--custom--rgb--ink) / 0.08); }
.fmy-cont-row:first-of-type { padding-top: 0; border-top: 0; }
.fmy-cont-row-ico { flex-shrink: 0; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgb(var(--wp--custom--rgb--gold) / 0.14); color: var(--wp--preset--color--gold-deep); }
.fmy-cont-row-label { margin: 0 0 4px; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgb(var(--wp--custom--rgb--ink) / 0.45); }
.fmy-cont-row-val { margin: 0; font-size: 0.95rem; font-weight: 600; color: var(--wp--preset--color--ink); }
.fmy-cont-row-val a { color: var(--wp--preset--color--ink); }
.fmy-cont-row-val a:hover { color: var(--wp--preset--color--gold-deep); }
.fmy-cont-row-sub { margin: 4px 0 0; font-size: 0.8rem; line-height: 1.5; color: rgb(var(--wp--custom--rgb--ink) / 0.5); }
/* Expectations card (dark) */
.fmy-cont-expect { background: var(--wp--preset--color--ink); border-radius: 6px; padding: 34px; }
.fmy-cont-expect-h { margin: 0 0 22px; font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: 1.35rem; color: var(--wp--preset--color--cream); }
.fmy-cont-expect-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.fmy-cont-expect-list li { display: flex; gap: 13px; font-size: 0.9rem; line-height: 1.55; color: rgb(var(--wp--custom--rgb--cream) / 0.72); }
.fmy-cont-expect-list svg { flex-shrink: 0; margin-top: 2px; color: var(--wp--preset--color--gold); }
/* --- Find us (dark ink) : appointment band + Our Lab + map + info bar --- */
.fmy-cont-find { background: var(--wp--preset--color--ink); }
/* Appointment band — gold-tinted, gold hairline top+bottom (mockup ContactPage.tsx:485) */
.fmy-cont-appt { display: flex; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 16px clamp(1rem, 3.4vw, 3rem); background: rgb(var(--wp--custom--rgb--gold) / 0.12); border-top: 1px solid rgb(var(--wp--custom--rgb--gold) / 0.25); border-bottom: 1px solid rgb(var(--wp--custom--rgb--gold) / 0.25); }
.fmy-cont-appt svg { flex-shrink: 0; color: var(--wp--preset--color--gold); }
.fmy-cont-appt-p { margin: 0; font-size: 0.875rem; font-weight: 600; color: var(--wp--preset--color--cream); }
.fmy-cont-appt-p strong { color: var(--wp--preset--color--gold); font-weight: 600; }
.fmy-cont-appt-p a { color: var(--wp--preset--color--gold); text-decoration: underline; text-underline-offset: 2px; transition: opacity 0.2s ease; }
.fmy-cont-appt-p a:hover { opacity: 0.75; }
/* Find Us / Our Lab header — cream heading + gold eyebrow on ink */
.fmy-cont-find-head { padding-top: clamp(48px, 7vh, 64px); padding-bottom: clamp(28px, 4vh, 40px); }
.fmy-cont-map-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.fmy-cont-map-eyebrow { margin: 0 0 8px; color: var(--wp--preset--color--gold); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
.fmy-cont-map-h { margin: 0; font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.25rem); color: var(--wp--preset--color--cream); line-height: 1.1; }
.fmy-cont-map-btn { padding: 11px 20px; background: transparent; border: 1px solid rgb(var(--wp--custom--rgb--gold) / 0.4); color: var(--wp--preset--color--gold); font-size: 0.78rem; letter-spacing: 0.08em; }
.fmy-cont-map-btn:hover { transform: scale(1.03); border-color: var(--wp--preset--color--gold); color: var(--wp--preset--color--gold); }
/* Map frame + floating address card */
.fmy-cont-map-frame-wrap { position: relative; }
.fmy-cont-map-frame { display: block; width: 100%; height: 460px; border: 0; background: rgb( var(--wp--custom--rgb--ink) / 0.35 ); }
.fmy-cont-map-iframe { display: block; width: 100%; height: 100%; border: 0; }
.fmy-cont-map-card { position: absolute; top: 24px; left: clamp(1rem, 3.4vw, 3rem); max-width: 260px; background: var(--wp--preset--color--base); border-radius: 6px; box-shadow: 0 10px 30px rgb(0 0 0 / 0.28); padding: 20px 22px; }
.fmy-map-iw { font-family: var(--wp--preset--font-family--body); line-height: 1.45; padding: 4px 2px; min-width: 220px; }
.fmy-map-iw strong { display: block; font-weight: 700; font-size: 14px; color: var(--wp--preset--color--ink); margin: 0 0 4px; }
.fmy-map-iw span { display: block; font-size: 12px; color: #555; margin: 0 0 4px; }
.fmy-map-iw-row { margin: 0 0 8px; }
.fmy-map-iw-appt { display: inline-block; margin: 0; padding: 3px 8px; border-radius: 3px; font-size: 11px; font-weight: 600; color: var(--wp--preset--color--gold-deep); background: rgb( var(--wp--custom--rgb--gold) / 0.14 ); }
.fmy-cont-map-card h3 { margin: 0 0 10px; font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 1.1rem; color: var(--wp--preset--color--ink); }
.fmy-cont-map-card p { margin: 0 0 6px; font-size: 0.85rem; line-height: 1.5; color: rgb(var(--wp--custom--rgb--ink) / 0.62); }
.fmy-cont-map-card .fmy-cont-map-appt { margin: 10px 0 0; color: var(--wp--preset--color--gold-deep); font-weight: 600; }
/* Bottom info bar under the map */
.fmy-cont-mapbar { background: rgb(0 0 0 / 0.25); border-top: 1px solid rgb(var(--wp--custom--rgb--cream) / 0.06); padding: 20px 0; }
.fmy-cont-mapbar-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fmy-cont-mapbar span { display: inline-flex; align-items: center; gap: 8px; font-size: 0.8rem; color: rgb(var(--wp--custom--rgb--cream) / 0.55); }
.fmy-cont-mapbar svg { flex-shrink: 0; color: var(--wp--preset--color--gold); }
.fmy-cont-mapbar-appt { text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; color: rgb(var(--wp--custom--rgb--gold) / 0.9) !important; }
/* =====================================================================
REGULATORY HUB (fmy_resource "regulatory-hub", post 195) — 1:1 with the
Manus mockup. Full-bleed alternating light/dark card sections that break
out of the article's 768px column via align:full groups.
===================================================================== */
/* The article template constrains post-content to 768px (needed for prose
articles); these hub sections break out to full-bleed, then frame their
inner content at the site's standard wide-size (1440) + 24px gutter so every
edge lines up with the header/footer/newsletter. overflow-x:clip on the main
contains the 100vw so it can never cause a horizontal scrollbar. */
.fmy-article-main { overflow-x: clip; }
/* .fmy-article-main prefix (0,2,0) beats WP's constrained-layout child rule so
width/max-width actually override the 768px cap. left/transform centre the
100vw band in the viewport regardless of the parent's width. */
.fmy-article-main .fmy-rh-sec { position: relative; left: 50%; transform: translateX(-50%); width: 100vw; max-width: 100vw; }
.fmy-rh-sec { scroll-margin-top: 90px; }
.fmy-rh-in { max-width: var(--wp--style--global--wide-size, 1200px); margin: 0 auto; padding: 0 24px; }
.fmy-rh-sec .fmy-rh-in[id] { scroll-margin-top: 96px; }
/* Section kickers/headings (shared) */
.fmy-rh-kicker { margin: 0 0 14px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.fmy-rh-h2 { margin: 0 0 16px; font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: clamp(1.75rem, 3.4vw, 2.5rem); line-height: 1.15; }
.fmy-rh-intro { margin: 0 0 40px; max-width: 720px; font-size: 1rem; line-height: 1.7; }
.fmy-rh-light { background: var(--wp--preset--color--base); color: var(--wp--preset--color--ink); padding: clamp(56px, 8vh, 96px) 0; }
.fmy-rh-light .fmy-rh-kicker { color: var(--wp--preset--color--gold-deep); }
.fmy-rh-light .fmy-rh-h2 { color: var(--wp--preset--color--ink); }
.fmy-rh-light .fmy-rh-intro { color: rgb(var(--wp--custom--rgb--ink) / 0.66); }
.fmy-rh-dark { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--cream); padding: clamp(56px, 8vh, 96px) 0; }
.fmy-rh-dark .fmy-rh-kicker { color: var(--wp--preset--color--gold); }
.fmy-rh-dark .fmy-rh-h2 { color: var(--wp--preset--color--cream); }
.fmy-rh-dark .fmy-rh-intro { color: rgb(var(--wp--custom--rgb--cream) / 0.66); }
/* Hero. The reghub hero is the FIRST block inside .fmy-article-main, which
carries a header-clearing padding-top (clamp 92-124px). That stacks on top of
the hero's own padding, pushing the breadcrumb ~47px lower than banner pages.
Zero the main padding for reghub and let the hero clear the header itself,
using the same value as the FAQ banner so the top gap matches other pages. */
.fmy-article-main:has(.fmy-rh-hero) { padding-top: 0 !important; }
.fmy-rh-hero { background: var(--wp--preset--color--ink-black); border-bottom: 1px solid rgb(var(--wp--custom--rgb--gold) / 0.22); padding: clamp(104px, 12vh, 128px) 0 clamp(40px, 6vh, 64px); }
.fmy-rh-crumb { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; font-size: 0.8rem; color: rgb(var(--wp--custom--rgb--cream) / 0.5); }
.fmy-rh-crumb a { color: rgb(var(--wp--custom--rgb--cream) / 0.5); }
.fmy-rh-crumb a:hover { color: var(--wp--preset--color--gold); }
.fmy-rh-crumb .current { color: var(--wp--preset--color--gold); }
.fmy-rh-eyebrow { margin: 0 0 18px; color: var(--wp--preset--color--gold); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; }
.fmy-rh-title { margin: 0 0 22px; max-width: 820px; font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: clamp(2.6rem, 5.5vw, 4.5rem); line-height: 1.04; color: var(--wp--preset--color--cream); }
.fmy-rh-title em { font-style: italic; font-weight: 500; color: var(--wp--preset--color--gold); }
.fmy-rh-lead { margin: 0 0 34px; max-width: 640px; font-size: 1.0625rem; line-height: 1.7; color: rgb(var(--wp--custom--rgb--cream) / 0.7); }
.fmy-rh-jump { display: flex; flex-wrap: wrap; gap: 10px; }
.fmy-rh-jump a { padding: 9px 16px; border: 1px solid rgb(var(--wp--custom--rgb--gold) / 0.3); border-radius: 100px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--gold); transition: background 0.2s ease, color 0.2s ease; }
.fmy-rh-jump a:hover { background: var(--wp--preset--color--gold); color: var(--wp--preset--color--ink); }
/* Disclaimer note */
.fmy-rh-note-sec { background: var(--wp--preset--color--cream); padding: 22px 0; border-bottom: 1px solid rgb(var(--wp--custom--rgb--ink) / 0.06); }
.fmy-rh-note { display: flex; gap: 12px; align-items: flex-start; margin: 0; font-size: 0.85rem; line-height: 1.6; color: rgb(var(--wp--custom--rgb--ink) / 0.62); }
.fmy-rh-note svg { flex-shrink: 0; margin-top: 2px; color: var(--wp--preset--color--gold-deep); }
.fmy-rh-note strong { color: var(--wp--preset--color--ink); }
/* Official portal cards (dark cards on light section) */
.fmy-rh-portals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.fmy-rh-portal { display: flex; flex-direction: column; background: var(--wp--preset--color--base); border: 1px solid rgb(var(--wp--custom--rgb--ink) / 0.08); border-radius: 16px; box-shadow: 0 4px 24px rgb(var(--wp--custom--rgb--ink) / 0.06); overflow: hidden; }
.fmy-rh-portal-head { display: flex; align-items: center; gap: 12px; padding: 20px; background: var(--wp--preset--color--ink); }
.fmy-rh-flag { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; min-width: 38px; padding: 6px 9px; border-radius: 5px; background: rgb(var(--wp--custom--rgb--gold) / 0.16); border: 1px solid rgb(var(--wp--custom--rgb--gold) / 0.3); color: var(--wp--preset--color--gold); font-size: 0.82rem; font-weight: 800; letter-spacing: 0.06em; line-height: 1; }
.fmy-rh-portal-country { margin: 0 0 2px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--gold); }
.fmy-rh-portal-agency { margin: 0; font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: 1.15rem; line-height: 1.2; color: var(--wp--preset--color--cream); }
.fmy-rh-portal-body { display: flex; flex-direction: column; flex: 1; padding: 22px; }
.fmy-rh-portal-rows { margin: 0 0 22px; display: flex; flex-direction: column; gap: 15px; }
.fmy-rh-portal-rows div { display: flex; flex-direction: column; gap: 3px; }
.fmy-rh-portal-rows dt { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(var(--wp--custom--rgb--ink) / 0.45); }
.fmy-rh-portal-rows dd { margin: 0; font-size: 0.85rem; line-height: 1.45; color: rgb(var(--wp--custom--rgb--ink) / 0.82); }
.fmy-rh-portal-rows dd a { color: var(--wp--preset--color--ink); font-weight: 600; text-decoration: none; }
.fmy-rh-portal-rows dd a:hover { color: var(--wp--preset--color--gold-deep); text-decoration: underline; }
.fmy-rh-portal-btn { margin-top: auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 13px 18px; background: var(--wp--preset--color--ink); color: var(--wp--preset--color--gold); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 8px; transition: transform 0.2s ease, background 0.2s ease; }
.fmy-rh-portal-btn:hover { transform: scale(1.02); background: var(--wp--preset--color--ink-deep); color: var(--wp--preset--color--gold); }
/* Comparison table (dark) */
.fmy-rh-table-wrap { overflow-x: auto; border: 1px solid rgb(var(--wp--custom--rgb--cream) / 0.12); border-radius: 8px; }
.fmy-rh-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; min-width: 720px; }
.fmy-rh-table th, .fmy-rh-table td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid rgb(var(--wp--custom--rgb--cream) / 0.08); }
.fmy-rh-table thead th { background: rgb(var(--wp--custom--rgb--gold) / 0.14); color: var(--wp--preset--color--gold); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; position: sticky; top: 0; }
.fmy-rh-table tbody th { color: var(--wp--preset--color--cream); font-weight: 600; }
.fmy-rh-table tbody td { color: rgb(var(--wp--custom--rgb--cream) / 0.72); }
.fmy-rh-table tbody tr:nth-child(even) { background: rgb(var(--wp--custom--rgb--cream) / 0.03); }
.fmy-rh-table tbody tr:last-child th, .fmy-rh-table tbody tr:last-child td { border-bottom: 0; }
.fmy-rh-tablenote { margin: 18px 0 0; font-size: 0.8rem; color: rgb(var(--wp--custom--rgb--cream) / 0.5); }
/* Checklist cards (light) */
.fmy-rh-checks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.fmy-rh-check { background: var(--wp--preset--color--cream); border: 1px solid rgb(var(--wp--custom--rgb--ink) / 0.08); border-radius: 8px; padding: 28px; }
.fmy-rh-check-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.fmy-rh-check-ico { font-size: 1.5rem; line-height: 1; }
.fmy-rh-check-head h3 { margin: 0; font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 1.2rem; color: var(--wp--preset--color--ink); }
.fmy-rh-check-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.fmy-rh-check-list li { position: relative; padding-left: 28px; font-size: 0.875rem; line-height: 1.55; color: rgb(var(--wp--custom--rgb--ink) / 0.72); }
.fmy-rh-check-list li::before { content: ""; position: absolute; left: 0; top: 2px; width: 17px; height: 17px; border-radius: 50%; background: rgb(var(--wp--custom--rgb--gold) / 0.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23C9941E' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat; }
/* Key definitions (dark cards) */
.fmy-rh-defs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.fmy-rh-def { background: var(--wp--preset--color--ink-deep); border: 1px solid rgb(var(--wp--custom--rgb--gold) / 0.12); border-radius: 8px; padding: 24px; }
.fmy-rh-def h3 { margin: 0 0 8px; font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 1.05rem; color: var(--wp--preset--color--gold); }
.fmy-rh-def p { margin: 0; font-size: 0.85rem; line-height: 1.6; color: rgb(var(--wp--custom--rgb--cream) / 0.7); }
/* What changed (impact badge cards) */
.fmy-rh-changes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.fmy-rh-change { background: var(--wp--preset--color--cream); border: 1px solid rgb(var(--wp--custom--rgb--ink) / 0.08); border-radius: 8px; padding: 26px; }
.fmy-rh-change-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.fmy-rh-change-region { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: rgb(var(--wp--custom--rgb--ink) / 0.6); }
.fmy-rh-change-badge { padding: 4px 10px; border-radius: 100px; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.fmy-rh-change-badge.is-high { background: rgb(201 60 60 / 0.12); color: #a4342c; }
.fmy-rh-change-badge.is-med { background: rgb(var(--wp--custom--rgb--gold-deep) / 0.16); color: var(--wp--preset--color--gold-deep); }
.fmy-rh-change h3 { margin: 0 0 10px; font-family: var(--wp--preset--font-family--display); font-weight: 600; font-size: 1.15rem; line-height: 1.2; color: var(--wp--preset--color--ink); }
.fmy-rh-change p { margin: 0; font-size: 0.85rem; line-height: 1.6; color: rgb(var(--wp--custom--rgb--ink) / 0.66); }
/* Related articles */
.fmy-rh-rel-sec { background: var(--wp--preset--color--cream); color: var(--wp--preset--color--ink); padding: clamp(56px, 8vh, 96px) 0; }
.fmy-rh-rel-sec .fmy-rh-kicker { color: var(--wp--preset--color--gold-deep); }
.fmy-rh-rel-sec .fmy-rh-h2 { color: var(--wp--preset--color--ink); margin-bottom: 40px; }
.fmy-rh-rels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.fmy-rh-rel { display: flex; flex-direction: column; background: var(--wp--preset--color--base); border: 1px solid rgb(var(--wp--custom--rgb--ink) / 0.08); border-radius: 16px; box-shadow: 0 4px 20px rgb(var(--wp--custom--rgb--ink) / 0.04); padding: 26px; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.fmy-rh-rel:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgb(var(--wp--custom--rgb--ink) / 0.1); }
.fmy-rh-rel-cat { align-self: flex-start; margin: 0 0 16px; padding: 5px 10px; background: var(--wp--preset--color--ink); color: var(--wp--preset--color--gold); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 2px; }
.fmy-rh-rel h3 { margin: 0 0 12px; font-family: var(--wp--preset--font-family--display); font-weight: 500; font-size: 1.05rem; line-height: 1.35; color: var(--wp--preset--color--ink); }
.fmy-rh-rel > p:not(.fmy-rh-rel-cat) { margin: 0 0 18px; font-size: 0.85rem; line-height: 1.65; color: var(--wp--preset--color--muted); }
.fmy-rh-rel-link { margin-top: auto; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--gold-deep); }
.fmy-rh-rel-link:hover { color: var(--wp--preset--color--ink); }
/* Compliance CTA (dark, centered) */
.fmy-rh-cta-sec { background: var(--wp--preset--color--ink); padding: clamp(56px, 9vh, 104px) 0 clamp(40px, 6vh, 56px); }
/* The template's "Back to Resources" link floats below the CTA as a stray
768px bordered strip. Hide it for reghub; we render our own inside the CTA
(below the buttons) via .fmy-rh-cta-back. Scoped via :has(). */
.fmy-article-main:has(.fmy-rh-cta-sec) .fmy-art-back { display: none; }
/* With the back-link gone, the main's ink-black padding-bottom (clamp 56-96px)
shows as a bare dark strip between the CTA (ink) and the newsletter. The CTA
is the last section and carries its own bottom padding, so zero the main's. */
.fmy-article-main:has(.fmy-rh-cta-sec) { padding-bottom: 0 !important; }
.fmy-rh-cta-back { margin-top: 30px; text-align: center; }
.fmy-rh-cta-back a { font-size: 0.875rem; color: rgb(var(--wp--custom--rgb--cream) / 0.55); text-decoration: none; transition: color 0.2s; }
.fmy-rh-cta-back a:hover { color: var(--wp--preset--color--gold); }
.fmy-rh-cta { text-align: center; max-width: 760px; }
.fmy-rh-cta-sec .fmy-rh-kicker { color: var(--wp--preset--color--gold); }
.fmy-rh-cta-h { margin: 0 0 20px; font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: clamp(1.9rem, 4vw, 2.75rem); line-height: 1.12; color: var(--wp--preset--color--cream); }
.fmy-rh-cta-h em { font-style: italic; color: var(--wp--preset--color--gold); }
.fmy-rh-cta-p { margin: 0 auto 32px; max-width: 620px; font-size: 1rem; line-height: 1.7; color: rgb(var(--wp--custom--rgb--cream) / 0.7); }
.fmy-rh-cta-btns { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.fmy-rh-btn-gold, .fmy-rh-btn-ghost { display: inline-flex; align-items: center; gap: 8px; padding: 15px 28px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 2px; transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease; }
.fmy-rh-btn-gold { background: var(--wp--preset--color--gold); color: var(--wp--preset--color--ink); }
.fmy-rh-btn-gold:hover { transform: scale(1.03); color: var(--wp--preset--color--ink); }
.fmy-rh-btn-ghost { border: 1px solid rgb(var(--wp--custom--rgb--cream) / 0.3); color: var(--wp--preset--color--cream); }
.fmy-rh-btn-ghost:hover { border-color: var(--wp--preset--color--gold); color: var(--wp--preset--color--gold); }
/* Free download (dark card on light section) */
.fmy-rh-dl-sec { background: var(--wp--preset--color--cream); padding: clamp(48px, 7vh, 88px) 0; }
.fmy-rh-dl { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 0; background: var(--wp--preset--color--ink); border: 1px solid rgb(var(--wp--custom--rgb--gold) / 0.2); border-radius: 16px; overflow: hidden; }
.fmy-rh-dl-left { padding: clamp(32px, 4vw, 48px); }
.fmy-rh-dl-eyebrow { display: inline-block; margin: 0 0 18px; padding: 6px 13px; border: 1px solid rgb(var(--wp--custom--rgb--gold) / 0.4); border-radius: 100px; color: var(--wp--preset--color--gold); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; }
.fmy-rh-dl-h { margin: 0; font-family: var(--wp--preset--font-family--display); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.1; color: var(--wp--preset--color--cream); }
.fmy-rh-dl-ed { margin: 4px 0 18px; font-family: var(--wp--preset--font-family--display); font-style: italic; font-size: 1.25rem; color: var(--wp--preset--color--gold); }
.fmy-rh-dl-desc { margin: 0 0 24px; font-size: 0.92rem; line-height: 1.7; color: rgb(var(--wp--custom--rgb--cream) / 0.66); }
.fmy-rh-dl-feats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; }
.fmy-rh-dl-feats li { position: relative; padding-left: 26px; font-size: 0.85rem; color: rgb(var(--wp--custom--rgb--cream) / 0.82); }
.fmy-rh-dl-feats li::before { content: ""; position: absolute; left: 0; top: 1px; width: 16px; height: 16px; border-radius: 50%; background: rgb(var(--wp--custom--rgb--gold) / 0.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23FABD52' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 10px no-repeat; }
.fmy-rh-dl-right { padding: clamp(32px, 4vw, 48px); border-left: 1px solid rgb(var(--wp--custom--rgb--cream) / 0.1); display: flex; flex-direction: column; gap: 20px; }
.fmy-rh-dl-badge { text-align: center; padding: 22px; border: 1px dashed rgb(var(--wp--custom--rgb--gold) / 0.4); border-radius: 8px; }
.fmy-rh-dl-badge-ico { font-size: 1.9rem; line-height: 1; }
.fmy-rh-dl-badge-t { margin: 10px 0 4px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wp--preset--color--gold); }
.fmy-rh-dl-badge-s { margin: 0; font-size: 0.78rem; color: rgb(var(--wp--custom--rgb--cream) / 0.5); }
.fmy-rh-dl-formlead { margin: 0; font-size: 0.85rem; line-height: 1.6; color: rgb(var(--wp--custom--rgb--cream) / 0.66); }
.fmy-rh-dl-form .fmy-res-dl-row { display: flex; flex-direction: column; gap: 12px; }
.fmy-rh-dl-form .fmy-res-dl-input { box-sizing: border-box; width: 100%; padding: 13px 15px; font-size: 0.9rem; color: var(--wp--preset--color--cream); background: rgb(var(--wp--custom--rgb--cream) / 0.06); border: 1px solid rgb(var(--wp--custom--rgb--cream) / 0.16); border-radius: 3px; }
.fmy-rh-dl-form .fmy-res-dl-input::placeholder { color: rgb(var(--wp--custom--rgb--cream) / 0.4); }
.fmy-rh-dl-form .fmy-res-dl-input:focus { outline: none; border-color: var(--wp--preset--color--gold); }
.fmy-rh-dl-form .fmy-res-dl-btn { width: 100%; padding: 14px 20px; background: var(--wp--preset--color--gold); color: var(--wp--preset--color--ink); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border: 0; border-radius: 2px; cursor: pointer; transition: transform 0.2s ease; }
.fmy-rh-dl-form .fmy-res-dl-btn:hover { transform: scale(1.02); }
.fmy-rh-dl-form .fmy-res-dl-success { display: flex; flex-direction: column; gap: 10px; }
.fmy-rh-dl-form .fmy-res-dl-thanks { margin: 0; font-size: 0.9rem; color: var(--wp--preset--color--gold); }
.fmy-rh-dl-form .fmy-res-dl-download { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 20px; background: var(--wp--preset--color--gold); color: var(--wp--preset--color--ink); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 2px; }
.fmy-rh-dl-form .fmy-res-dl-fine { margin: 0; font-size: 0.72rem; color: rgb(var(--wp--custom--rgb--cream) / 0.42); }
@media (max-width: 900px) {
.fmy-rh-portals, .fmy-rh-changes, .fmy-rh-rels { grid-template-columns: 1fr; }
.fmy-rh-checks, .fmy-rh-defs { grid-template-columns: 1fr; }
.fmy-rh-dl { grid-template-columns: 1fr; }
.fmy-rh-dl-right { border-left: 0; border-top: 1px solid rgb(var(--wp--custom--rgb--cream) / 0.08); }
}
@media (max-width: 480px) {
.fmy-rh-dl-feats { grid-template-columns: 1fr; }
}
/* Footer /services#… jump links: clear the fixed header on desktop AND mobile. */
.fmy-svc-block[id] { scroll-margin-top: 96px; }
@media (max-width: 781px) {
.fmy-svc-block[id] { scroll-margin-top: 76px; }
}
@media (max-width: 900px) {
.fmy-cont-grid { grid-template-columns: 1fr; gap: 40px; }
.fmy-cont-cal { padding: 30px; }
}
@media (max-width: 600px) {
.fmy-cform-row { grid-template-columns: 1fr; }
.fmy-cform-actions { flex-direction: column; align-items: flex-start; gap: 12px; }
.fmy-cont-map-head { flex-direction: column; align-items: flex-start; }
.fmy-cont-map-card { position: static; max-width: none; margin: -1px 0 0; border-radius: 0; box-shadow: none; border-top: 1px solid rgb(var(--wp--custom--rgb--ink) / 0.1); }
.fmy-cont-map-frame { height: 340px; }
.fmy-cont-mapbar-in { flex-direction: column; align-items: flex-start; }
}
/* ---- Blog single post (single.html) — dark editorial page, 1:1 with the Resources
article layout. The body reuses .fmy-art-body prose (p/h2/h3/ul/a/strong on dark);
.fmy-blog-artbody adds only what the AI-generated body needs: a boxed summary list
and styled comparison tables. Tables are wrapped in .fmy-art-table at render time. */
.fmy-blog-single .fmy-blog-single-img { margin-top: 8px; }
.fmy-blog-single .fmy-blog-single-img img { width: 100%; }
/* Lead "key takeaways" list → highlighted gold summary box (keeps the gold-check bullets) */
.fmy-blog-artbody > ul:first-of-type {
margin: 8px 0 32px; padding: 20px 24px;
background: rgb( var(--wp--custom--rgb--gold) / 0.08 );
border: 1px solid rgb( var(--wp--custom--rgb--gold) / 0.28 ); border-radius: 12px;
}
.fmy-blog-artbody > ul:first-of-type > li { margin-bottom: 12px; }
.fmy-blog-artbody > ul:first-of-type > li:last-child { margin-bottom: 0; }
/* ---- Blog listing (home.html) ---- */
/* Banner mirrors the FAQ page hero exactly (.fmy-faqp-banner): full-bleed ink band,
inner wrapper capped at wide-size so the eyebrow/title/lead all share one left edge. */
/* Blog uses the home.html template, whose lacks the +26px top offset the
interior page templates get (hidden behind the fixed header). Add it back into the
banner's own top padding so the eyebrow lands at the same y as every other banner
[26px + clamp(78,9vh,112) = clamp(104, 9vh+26, 138)]. */
.fmy-blog-banner { background: var(--wp--preset--color--ink); padding: clamp(104px, calc(9vh + 26px), 138px) 0 80px; }
.fmy-blog-banner-in { max-width: var(--wp--style--global--wide-size, 1200px); margin: 0 auto; padding: 0 24px; }
/* Blog + FAQ + Contact banner backgrounds duplicate the Resources S1 banner exactly:
tiled gold "plus" pattern @5% + gold corner glow + gold hairline (see .fmy-res-banner). */
.fmy-blog-banner, .fmy-faqp-banner, .fmy-cont-banner {
position: relative; overflow: hidden;
border-bottom: 1px solid rgb(var(--wp--custom--rgb--gold) / 0.25);
}
.fmy-blog-banner::before, .fmy-faqp-banner::before, .fmy-cont-banner::before {
content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.05;
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23fabd52' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.fmy-blog-banner::after, .fmy-faqp-banner::after, .fmy-cont-banner::after {
content: ""; position: absolute; top: -20%; right: -10%; width: 55%; height: 140%;
background: radial-gradient(closest-side, rgb(var(--wp--custom--rgb--gold) / 0.12), transparent 70%);
pointer-events: none; z-index: 0;
}
.fmy-blog-banner-in, .fmy-faqp-banner-in, .fmy-cont-banner .fmy-cont-wrap { position: relative; z-index: 1; }
/* Matches the Services-Process-Portfolio banner exactly (see .fmy-faqp-* above). */
.fmy-blog-eyebrow { margin: 0 0 16px; color: var(--wp--preset--color--gold); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; }
.fmy-blog-h1 { margin: 0 0 24px; font-family: var(--wp--preset--font-family--display); font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 700; line-height: 1.05; color: var(--wp--preset--color--cream); }
.fmy-blog-h1 em { color: var(--wp--preset--color--gold); font-style: italic; }
.fmy-blog-lead { margin: 0; max-width: 640px; font-size: 1.125rem; line-height: 1.7; color: rgb( var(--wp--custom--rgb--cream) / 0.7 ); }
/* ---- Blog live-search filter bar — cream bar (matches the Resources filter bar) that
blends into the cream cards section; controls styled like the Portfolio filter. ---- */
.fmy-blogfilter-bar { background: var(--wp--preset--color--cream); border-bottom: 1px solid rgb( var(--wp--custom--rgb--ink) / 0.08 ); }
.fmy-blogfilter-inner {
display: flex; align-items: center; gap: 12px;
max-width: 1440px; margin: 0 auto;
padding: 16px var(--wp--style--root--padding-left, 3rem);
}
.fmy-bf-count {
flex: 0 0 auto; white-space: nowrap;
font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
color: rgb( var(--wp--custom--rgb--muted) / 0.9 );
}
.fmy-bf-tools { display: flex; align-items: center; gap: 12px; margin-left: auto; flex: 0 0 auto; }
.fmy-bf-search {
flex: 0 0 auto; width: 220px;
background: transparent;
border: 1px solid rgb( var(--wp--custom--rgb--ink) / 0.5 );
border-radius: var(--wp--custom--radius--sm);
padding: 8px 14px;
font-family: var(--wp--preset--font-family--body); font-size: 0.75rem;
color: var(--wp--preset--color--ink);
transition: border-color 0.2s ease;
}
.fmy-bf-search::placeholder { color: rgb( var(--wp--custom--rgb--muted) / 0.65 ); }
.fmy-bf-search:focus { outline: none; border-color: var(--wp--preset--color--ink); }
/* Date dropdown — same transparent, ink-bordered control as the search box. */
.fmy-bf-date {
flex: 0 0 auto;
background: transparent;
border: 1px solid rgb( var(--wp--custom--rgb--ink) / 0.5 );
border-radius: var(--wp--custom--radius--sm);
padding: 8px 12px;
font-family: var(--wp--preset--font-family--body); font-size: 0.75rem;
color: var(--wp--preset--color--ink); cursor: pointer;
transition: border-color 0.2s ease;
}
.fmy-bf-date:focus { outline: none; border-color: var(--wp--preset--color--ink); }
.fmy-bloglist .wp-block-post.fmy-bf-hidden { display: none !important; }
.fmy-bf-noresults { grid-column: 1 / -1; margin: 0; padding: 8px 0 24px; font-size: 1rem; color: rgb( var(--wp--custom--rgb--ink) / 0.6 ); }
/* ---- Blog "book a call" CTA — reuses the Resources Regulatory-Hub card style
(.fmy-reghub*, dark ink card) so it stands out on the cream listing background. ---- */
.fmy-blog-cta { padding: 8px 24px 80px; }
/* Mobile only: centre the left copy once the card stacks (blog CTA only — the real
Regulatory Hub on Resources keeps its left alignment). */
@media (max-width: 781px) {
.fmy-blog-cta .fmy-reghub-left { text-align: center; }
.fmy-blog-cta .fmy-reghub-pill { margin-left: auto; margin-right: auto; }
.fmy-blog-cta .fmy-reghub-btn { justify-content: center; }
}
@media (max-width: 600px) {
.fmy-blogfilter-inner { flex-wrap: wrap; gap: 10px; }
.fmy-bf-tools { margin-left: 0; width: 100%; flex-wrap: wrap; gap: 10px; }
.fmy-bf-date, .fmy-bf-search { flex: 1 1 auto; width: 100%; }
}
/* Blog post cards duplicate the Resources article cards exactly (.fmy-res-*): white
bordered card, fixed-height media, hover lift + shadow + image zoom, 3-line excerpt
and a read-more button — but the date is overlaid top-left like the Resources badge. */
.fmy-bloglist .wp-block-post-template { gap: var(--wp--preset--spacing--50) !important; }
.fmy-bloglist .wp-block-post {
background: var(--wp--preset--color--base);
border: 1px solid rgb( var(--wp--custom--rgb--ink) / 0.07 );
overflow: hidden; display: flex; flex-direction: column;
transition: box-shadow 0.3s, transform 0.3s;
}
.fmy-bloglist .wp-block-post:hover { box-shadow: 0 14px 40px rgb( var(--wp--custom--rgb--ink) / 0.12 ); transform: translateY(-3px); }
.fmy-blogcard-media { position: relative; width: 100%; height: 220px; overflow: hidden; background: var(--wp--preset--color--ink-black); }
.fmy-blogcard-img { margin: 0; width: 100%; height: 100%; }
.fmy-blogcard-img a { display: block; width: 100%; height: 100%; }
.fmy-blogcard-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.fmy-bloglist .wp-block-post:hover .fmy-blogcard-img img { transform: scale(1.05); }
/* Date badge overlaid top-left (mirrors .fmy-res-badge). */
.fmy-blogcard-date {
position: absolute; top: 12px; left: 12px; z-index: 2; margin: 0;
padding: 5px 10px; font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
background: var(--wp--preset--color--ink); color: var(--wp--preset--color--gold);
}
.fmy-blogcard-body { width: 100%; padding: 24px; display: flex; flex-direction: column; flex: 1 1 auto; }
.fmy-blogcard-title { margin: 0 0 12px; font-size: 1.125rem; font-weight: 500; line-height: 1.3; color: var(--wp--preset--color--ink); }
.fmy-blogcard-title a { color: var(--wp--preset--color--ink); text-decoration: none; font-weight: 500; transition: color 0.2s; }
.fmy-blogcard-title a:hover { color: var(--wp--preset--color--gold-deep); }
.fmy-blogcard-excerpt {
margin: 0 0 16px; font-size: 0.875rem; line-height: 1.7; color: var(--wp--preset--color--muted);
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.fmy-blogcard-foot { margin-top: auto; }
a.fmy-blogcard-readmore {
display: inline-block; text-decoration: none;
font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
color: var(--wp--preset--color--ink);
border: 1px solid rgb( var(--wp--custom--rgb--ink) / 0.25 );
padding: 7px 12px; transition: background 0.2s, color 0.2s, border-color 0.2s;
}
a.fmy-blogcard-readmore:hover {
background: var(--wp--preset--color--ink); color: var(--wp--preset--color--cream);
border-color: var(--wp--preset--color--ink);
}
.fmy-blog-pagination a, .fmy-blog-pagination .wp-block-query-pagination-numbers { color: var(--wp--preset--color--ink); font-weight: 600; }
.fmy-blog-pagination .current { color: var(--wp--preset--color--gold-deep); }
/* Match the Resources grid breakpoints (3 → 2 → 1 col) for cross-page uniformity. */
@media (max-width: 1024px) { .fmy-bloglist .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 781px) { .fmy-bloglist .wp-block-post-template { grid-template-columns: 1fr !important; } }
/* "From the Blog" strip on the Resources page */
.fmy-res-blog-head { align-items: baseline; gap: 16px; }
.fmy-res-blog-h { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); color: var(--wp--preset--color--ink); margin: 0; }
.fmy-res-blog-all { margin: 0; }
.fmy-res-blog-all a { color: var(--wp--preset--color--gold-deep); font-weight: 600; text-decoration: none; }
/* ============================================================================
GET STARTED PAGE (/start) — SQUEEZE PAGE (1:1 mockup SqueezePage.tsx).
Own minimal header (announcement + logo, no nav), no site footer, narrow
centred section widths (1152/1024/896/672/768), cream-swirl hero + 105deg
gradient, autoplay lab-video tiles, gold pill buttons. theme.json tokens only.
============================================================================ */
/* Minimal squeeze header (rendered by templates/page-start.html) */
.fmy-sqz-logo { display: flex; align-items: baseline; justify-content: center; gap: 8px; text-decoration: none; color: var(--wp--preset--color--ink); }
.fmy-sqz-logo-name { font-weight: 600; letter-spacing: 0.2em; font-size: 0.95rem; }
.fmy-sqz-logo-sub { letter-spacing: 0.22em; font-size: 0.6rem; opacity: 0.55; font-weight: 600; }
/* Per-section wrap: centred, 24px gutter; each section sets its own max-width. */
.fmy-start-wrap { margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.fmy-start-hero .fmy-start-wrap { max-width: 1152px; }
.fmy-start-what .fmy-start-wrap, .fmy-start-runs .fmy-start-wrap { max-width: 1024px; }
.fmy-start-process .fmy-start-wrap { max-width: 896px; }
.fmy-start-formsec .fmy-start-wrap { max-width: 672px; }
.fmy-start-founder .fmy-start-wrap { max-width: 768px; }
.fmy-start-cta .fmy-start-wrap { max-width: 768px; }
.fmy-start-eyebrow { margin: 0 0 16px; color: var(--wp--preset--color--gold); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; }
.fmy-start-eyebrow.on-cream { color: var(--wp--preset--color--gold-deep); }
.fmy-start-h1 { margin: 0 0 24px; max-width: 720px; font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: clamp(2.25rem, 4.5vw, 3.75rem); line-height: 1.1; color: var(--wp--preset--color--cream); }
.fmy-start-h1 em { color: var(--wp--preset--color--gold); font-style: italic; }
.fmy-start-h2 { margin: 0 0 20px; max-width: 760px; font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.25rem); line-height: 1.12; color: var(--wp--preset--color--cream); }
.fmy-start-h2.on-cream { color: var(--wp--preset--color--ink); font-size: clamp(1.5rem, 2.6vw, 1.875rem); line-height: 1.2; }
.fmy-start-sub { margin: 0; max-width: 640px; font-size: 1.0625rem; line-height: 1.7; color: rgb(var(--wp--custom--rgb--cream) / 0.72); }
.fmy-start-sub.on-cream { color: var(--wp--preset--color--muted); }
.fmy-start-sub a { color: var(--wp--preset--color--gold-deep); font-weight: 600; text-decoration: none; }
/* Centred header elements for the middle sections */
.fmy-start-center { text-align: center; margin-left: auto; margin-right: auto; }
/* Section intro paragraphs — match the mockup's smaller scale */
.fmy-start-what .fmy-start-sub { font-size: 1rem; }
.fmy-start-runs .fmy-start-sub { font-size: 0.875rem; }
/* Distinct subtle gold textures on the dark sections (What We Do stays clean) */
.fmy-start-formsec, .fmy-start-cta { position: relative; overflow: hidden; }
.fmy-start-formsec > .fmy-start-wrap, .fmy-start-cta > .fmy-start-wrap { position: relative; z-index: 1; }
.fmy-start-formsec::before, .fmy-start-cta::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* Form — fine gold dot grid (different texture) */
.fmy-start-formsec::before { background-image: radial-gradient(rgb(var(--wp--custom--rgb--gold) / 0.09) 1px, transparent 1.6px); background-size: 22px 22px; }
/* CTA — diagonal gold hatch (different texture) + soft corner glow */
.fmy-start-cta::before { background-image: repeating-linear-gradient(45deg, rgb(var(--wp--custom--rgb--gold) / 0.05), rgb(var(--wp--custom--rgb--gold) / 0.05) 1px, transparent 1px, transparent 16px); }
.fmy-start-cta::after { content: ""; position: absolute; top: -30%; left: 50%; transform: translateX(-50%); width: 70%; height: 150%; z-index: 0; pointer-events: none; background: radial-gradient(closest-side, rgb(var(--wp--custom--rgb--gold) / 0.1), transparent 70%); }
/* Real Production Runs (cream) — ink "plus" tile so the texture reads on the light bg */
.fmy-start-runs { position: relative; overflow: hidden; }
.fmy-start-runs > .fmy-start-wrap { position: relative; z-index: 1; }
.fmy-start-runs::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.04; background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23242140' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); }
/* Hero — cream-swirl behind a 105deg ink gradient (dark left → swirl right) */
.fmy-start-hero { position: relative; overflow: hidden; background: var(--wp--preset--color--ink); padding: clamp(48px, 7vh, 84px) 0 clamp(48px, 7vh, 80px); }
.fmy-start-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; }
.fmy-start-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(105deg, rgb(var(--wp--custom--rgb--ink) / 0.93) 0%, rgb(var(--wp--custom--rgb--ink) / 0.8) 55%, rgb(var(--wp--custom--rgb--ink) / 0.45) 100%); }
.fmy-start-hero-in { position: relative; z-index: 1; }
.fmy-start-lead { margin: 0 0 28px; max-width: 600px; font-size: 1.0625rem; line-height: 1.7; color: rgb(var(--wp--custom--rgb--cream) / 0.8); }
.fmy-start-chips { list-style: none; margin: 0 0 32px; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.fmy-start-chips li { display: inline-flex; align-items: center; gap: 7px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.03em; color: var(--wp--preset--color--cream); padding: 7px 15px; border: 1px solid rgb(var(--wp--custom--rgb--gold) / 0.4); border-radius: 100px; }
.fmy-start-chips li svg { color: var(--wp--preset--color--gold); flex: 0 0 auto; }
.fmy-start-stats { display: flex; flex-wrap: wrap; gap: clamp(28px, 5vw, 60px); margin-top: clamp(36px, 5vh, 56px); }
.fmy-start-stat { display: flex; flex-direction: column; gap: 4px; }
.fmy-start-stat-num { font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1; color: var(--wp--preset--color--gold); }
.fmy-start-stat-label { font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgb(var(--wp--custom--rgb--cream) / 0.7); }
/* Gold pill buttons + glow (hero / form submit / CTA) */
.fmy-start-herobtn, .fmy-start-ctabtn, .fmy-sform-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; background: var(--wp--preset--color--gold); color: var(--wp--preset--color--ink); font-weight: 700; font-size: 0.9375rem; padding: 15px 30px; border: 0; border-radius: 100px; text-decoration: none; cursor: pointer; box-shadow: 0 8px 32px rgb(var(--wp--custom--rgb--gold) / 0.3); transition: transform 0.25s ease, background 0.25s ease; }
.fmy-start-herobtn:hover, .fmy-start-ctabtn:hover, .fmy-sform-btn:hover { background: var(--wp--preset--color--gold-deep); transform: scale(1.03); }
/* What we do — dark cards */
.fmy-start-what { background: var(--wp--preset--color--ink); padding: clamp(56px, 8vh, 88px) 0; }
.fmy-start-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: clamp(32px, 4vw, 48px); }
.fmy-start-card { background: rgb(var(--wp--custom--rgb--cream) / 0.03); border: 1px solid rgb(var(--wp--custom--rgb--gold) / 0.18); border-radius: 12px; padding: clamp(22px, 3vw, 30px); }
.fmy-start-card-ico { display: inline-flex; color: var(--wp--preset--color--gold); margin-bottom: 16px; }
.fmy-start-card h3 { margin: 0 0 10px; font-size: 1.125rem; font-weight: 700; color: var(--wp--preset--color--cream); }
.fmy-start-card p { margin: 0; font-size: 0.9375rem; line-height: 1.7; color: rgb(var(--wp--custom--rgb--cream) / 0.66); }
/* Real production runs — cream, square autoplay videos w/ caption overlay */
.fmy-start-runs { background: var(--wp--preset--color--cream); padding: clamp(56px, 8vh, 88px) 0; }
.fmy-start-runs .fmy-start-sub { margin-bottom: clamp(32px, 4vw, 44px); }
.fmy-start-runs-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.fmy-start-run { position: relative; margin: 0; aspect-ratio: 1 / 1; border-radius: 16px; overflow: hidden; background: var(--wp--preset--color--ink); }
.fmy-start-run-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.fmy-start-run-cap { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 40px 12px 13px; font-size: 0.7rem; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--wp--preset--color--gold); background: linear-gradient(to top, rgb(var(--wp--custom--rgb--ink) / 0.9) 0%, rgb(var(--wp--custom--rgb--ink) / 0) 100%); }
.fmy-start-quote { margin: clamp(36px, 5vw, 52px) 0 0; background: var(--wp--preset--color--ink); border-radius: 12px; padding: clamp(28px, 4vw, 40px); }
.fmy-start-quote p { margin: 0 0 22px; font-family: var(--wp--preset--font-family--display); font-style: italic; font-size: clamp(1.125rem, 2vw, 1.35rem); line-height: 1.55; color: var(--wp--preset--color--cream); }
.fmy-start-quote footer { display: flex; align-items: center; gap: 14px; }
.fmy-start-quote-av { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 100px; background: var(--wp--preset--color--gold); color: var(--wp--preset--color--ink); font-weight: 700; flex: 0 0 auto; }
.fmy-start-quote-by { display: flex; flex-direction: column; }
.fmy-start-quote-by strong { color: var(--wp--preset--color--cream); font-size: 0.9375rem; }
.fmy-start-quote-by span { color: rgb(var(--wp--custom--rgb--cream) / 0.6); font-size: 0.8125rem; }
/* Process 4 steps — light */
.fmy-start-process { background: var(--wp--preset--color--base); padding: clamp(56px, 8vh, 88px) 0; }
.fmy-start-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: clamp(32px, 4vw, 48px); }
.fmy-start-step { border-top: 2px solid rgb(var(--wp--custom--rgb--gold) / 0.5); padding-top: 16px; }
.fmy-start-step-num { display: block; font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: 1.4rem; color: var(--wp--preset--color--gold-deep); margin-bottom: 8px; }
.fmy-start-step h3 { margin: 0 0 8px; font-size: 1.25rem; font-weight: 700; color: var(--wp--preset--color--ink); }
.fmy-start-step p { margin: 0; font-size: 0.875rem; line-height: 1.65; color: var(--wp--preset--color--muted); }
/* Form section — dark */
.fmy-start-formsec { background: var(--wp--preset--color--ink); padding: clamp(56px, 8vh, 88px) 0; scroll-margin-top: 20px; }
.fmy-start-badges { list-style: none; margin: 22px auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; }
.fmy-start-badges li { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; color: rgb(var(--wp--custom--rgb--cream) / 0.75); position: relative; padding-left: 20px; }
.fmy-start-badges li::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 10px; height: 10px; border-radius: 100px; border: 2px solid var(--wp--preset--color--gold); }
/* Qualifying lead form ([formyoule_start_form]) */
.fmy-sform { margin-top: clamp(28px, 4vw, 40px); text-align: left; background: rgb(var(--wp--custom--rgb--cream) / 0.04); border: 1px solid rgb(var(--wp--custom--rgb--gold) / 0.2); border-radius: 12px; padding: clamp(24px, 3vw, 36px); }
.fmy-sform-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.fmy-sform-alert { margin: 0 0 20px; padding: 12px 16px; border-radius: 6px; font-size: 0.875rem; }
.fmy-sform-alert.is-ok { background: rgb(var(--wp--custom--rgb--gold) / 0.15); color: var(--wp--preset--color--cream); border: 1px solid rgb(var(--wp--custom--rgb--gold) / 0.4); }
.fmy-sform-alert.is-ok a { color: var(--wp--preset--color--gold); font-weight: 700; }
.fmy-sform-alert.is-err { background: rgba(179, 45, 46, 0.15); color: #ffb4b4; border: 1px solid rgba(179, 45, 46, 0.5); }
.fmy-sform-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 18px; }
.fmy-sform-field { display: flex; flex-direction: column; gap: 8px; }
.fmy-sform-field label, .fmy-sform-q legend { font-size: 0.8125rem; font-weight: 600; color: var(--wp--preset--color--cream); }
.fmy-sform-field label span, .fmy-sform-q legend span { color: var(--wp--preset--color--gold); }
.fmy-sform-field input { background: rgb(var(--wp--custom--rgb--ink) / 0.5); border: 1px solid rgb(var(--wp--custom--rgb--cream) / 0.18); border-radius: 6px; padding: 11px 14px; font-family: var(--wp--preset--font-family--body); font-size: 0.9375rem; color: var(--wp--preset--color--cream); }
.fmy-sform-field input::placeholder { color: rgb(var(--wp--custom--rgb--cream) / 0.4); }
.fmy-sform-field input:focus { outline: none; border-color: var(--wp--preset--color--gold); }
.fmy-sform-q { border: 0; margin: 0 0 18px; padding: 0; min-inline-size: 0; }
.fmy-sform-q legend { display: block; margin-bottom: 12px; padding: 0; }
.fmy-sform-opt { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; margin-bottom: 8px; border: 1px solid rgb(var(--wp--custom--rgb--cream) / 0.14); border-radius: 6px; cursor: pointer; font-size: 0.875rem; color: rgb(var(--wp--custom--rgb--cream) / 0.85); transition: border-color 0.2s ease, background 0.2s ease; }
.fmy-sform-opt:hover { border-color: rgb(var(--wp--custom--rgb--gold) / 0.5); }
.fmy-sform-opt input { accent-color: var(--wp--preset--color--gold); margin-top: 2px; flex: 0 0 auto; }
.fmy-sform-opt:has(input:checked) { border-color: var(--wp--preset--color--gold); background: rgb(var(--wp--custom--rgb--gold) / 0.08); }
.fmy-sform-btn { width: 100%; margin-top: 6px; }
.fmy-sform-note { margin: 14px 0 0; text-align: center; font-size: 0.75rem; color: rgb(var(--wp--custom--rgb--cream) / 0.5); }
/* Founder note — cream */
.fmy-start-founder { background: var(--wp--preset--color--cream); padding: clamp(56px, 8vh, 88px) 0; }
.fmy-start-founder-in { display: flex; align-items: center; gap: clamp(28px, 5vw, 56px); }
.fmy-start-founder-img { width: 112px; height: 112px; border-radius: 100px; object-fit: cover; flex: 0 0 auto; border: 3px solid var(--wp--preset--color--gold); }
.fmy-start-founder-copy { max-width: 560px; }
.fmy-start-fquote { margin: 10px 0 16px; font-family: var(--wp--preset--font-family--display); font-size: 1.4rem; font-weight: 600; line-height: 1.5; color: rgb(var(--wp--custom--rgb--ink) / 0.9); }
.fmy-start-founder-name { margin: 0; font-weight: 700; color: var(--wp--preset--color--ink); }
.fmy-start-founder-role { margin: 2px 0 0; font-size: 0.8125rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wp--preset--color--gold-deep); font-weight: 600; }
/* Final CTA — dark, centred, pill button + copyright */
.fmy-start-cta { background: var(--wp--preset--color--ink); padding: clamp(56px, 9vh, 96px) 0; text-align: center; }
.fmy-start-cta-h { margin: 0 auto 16px; max-width: 640px; font-family: var(--wp--preset--font-family--display); font-weight: 700; font-size: clamp(1.6rem, 3vw, 2.25rem); line-height: 1.12; color: var(--wp--preset--color--cream); }
.fmy-start-cta .fmy-start-sub { max-width: 576px; }
.fmy-start-ctabtn { margin-top: 28px; }
.fmy-start-copyright { margin: 32px 0 0; font-size: 0.72rem; color: rgb(var(--wp--custom--rgb--cream) / 0.28); }
.fmy-start-copyright a { color: inherit; text-decoration: none; }
@media (max-width: 900px) {
.fmy-start-cards, .fmy-start-runs-grid { grid-template-columns: 1fr; }
.fmy-start-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fmy-start-founder-in { flex-direction: column; text-align: center; align-items: center; }
.fmy-start-founder-copy { max-width: 100%; }
.fmy-start-fquote { border-left: 0; padding-left: 0; }
}
@media (max-width: 600px) {
.fmy-sform-row { grid-template-columns: 1fr; }
.fmy-start-steps { grid-template-columns: 1fr; }
.fmy-start-stats { gap: 22px 36px; }
.fmy-start-what .fmy-start-sub { font-size: 0.875rem; }
}