/* * design-behaviors.css — Behavioral CSS activated by data-mvc-* body attributes. * * design-tokens.php writes data attributes to based on the WP dashboard design * settings. This file reads those attributes and applies the visual behavior. * * Attribute → CSS relationship: * [data-mvc-card-style] card background / border / backdrop behavior * [data-mvc-hover] card hover transform / shadow / glow * [data-mvc-btn-style] button visual variant * [data-mvc-btn-hover] button hover animation * [data-mvc-motion] reveal animations (none / subtle / enhanced) * [data-mvc-reveal] scroll-reveal entry style * [data-mvc-hero] hero section layout treatment * [data-mvc-img-style] image treatment (natural / rounded / shadow / polaroid / duotone) * * Reduced-motion: every animation/transition respects prefers-reduced-motion. * All selectors use --mvc-* tokens so the dashboard color override always wins. * * Load order: after mvc-utilities (dep on mvc-base virtual bundle). * Registered as 'mvc-behaviors' in enqueue.php. */ /* ============================================================================ 1. CARD STYLES — [data-mvc-card-style] Applies to .mvc-post-card, .mvc-service-card, .mvc-location-card, .mvc-project-card, .mvc-faq-item, and any .mvc-card element. ---------------------------------------------------------------------------- */ /* Base card shell — all styles share this foundation. The wildcard targets card ROOT elements only — BEM children (__body, __title etc.) are excluded by requiring the class NOT contain a double-underscore. */ .mvc-post-card, .mvc-card { background-color: var(--mvc-card-bg, var(--mvc-color-surface, #fff)); border: var(--mvc-card-border, 1px solid var(--mvc-color-border, #e2e8f0)); box-shadow: var(--mvc-card-shadow, none); -webkit-backdrop-filter: var(--mvc-card-backdrop, none); backdrop-filter: var(--mvc-card-backdrop, none); border-radius: var(--mvc-radius, 0.5rem); overflow: hidden; transition: box-shadow var(--mvc-duration-reveal, 250ms) ease, transform var(--mvc-duration-reveal, 250ms) ease; } /* Flat — border only, no shadow */ [data-mvc-card-style="flat"] .mvc-post-card, [data-mvc-card-style="flat"] .mvc-card, [data-mvc-card-style="flat"] .mvc-card { box-shadow: none; border-color:var(--mvc-color-border, #e2e8f0); } /* Elevated — card sits above surface; shadow on hover deepens */ [data-mvc-card-style="elevated"] .mvc-post-card, [data-mvc-card-style="elevated"] .mvc-card, [data-mvc-card-style="elevated"] .mvc-card { border: none; box-shadow: var(--mvc-shadow-card, 0 1px 3px 0 rgb(0 0 0 / 0.08)); } /* Outlined — primary-color border, focus-ring on hover */ [data-mvc-card-style="outlined"] .mvc-post-card, [data-mvc-card-style="outlined"] .mvc-card, [data-mvc-card-style="outlined"] .mvc-card { border: 2px solid var(--mvc-color-primary, #1e40af); box-shadow: none; } [data-mvc-card-style="outlined"] .mvc-post-card:hover, [data-mvc-card-style="outlined"] .mvc-card:hover, [data-mvc-card-style="outlined"] .mvc-card:hover { box-shadow: 0 0 0 3px color-mix(in srgb, var(--mvc-color-primary, #1e40af) 15%, transparent); } /* Glass — frosted glass */ [data-mvc-card-style="glass"] .mvc-post-card, [data-mvc-card-style="glass"] .mvc-card, [data-mvc-card-style="glass"] .mvc-card { background-color: color-mix(in srgb, var(--mvc-color-surface, #fff) 60%, transparent); border: 1px solid color-mix(in srgb, #ffffff 40%, transparent); box-shadow: 0 8px 32px 0 rgb(31 38 135 / 0.12); -webkit-backdrop-filter: blur(12px) saturate(180%); backdrop-filter: blur(12px) saturate(180%); } [data-mvc-card-style="glass"] .mvc-post-card:hover, [data-mvc-card-style="glass"] .mvc-card:hover, [data-mvc-card-style="glass"] .mvc-card:hover { box-shadow: 0 12px 40px 0 rgb(31 38 135 / 0.18); } /* Neumorphic — extruded surface effect */ [data-mvc-card-style="neumorphic"] .mvc-post-card, [data-mvc-card-style="neumorphic"] .mvc-card, [data-mvc-card-style="neumorphic"] .mvc-card { background-color: var(--mvc-color-surface-light, #f1f5f9); border: none; box-shadow: 6px 6px 12px rgb(0 0 0 / 0.12), -6px -6px 12px rgb(255 255 255 / 0.8); } [data-mvc-card-style="neumorphic"] .mvc-post-card:hover, [data-mvc-card-style="neumorphic"] .mvc-card:hover, [data-mvc-card-style="neumorphic"] .mvc-card:hover { box-shadow: inset 4px 4px 8px rgb(0 0 0 / 0.1), inset -4px -4px 8px rgb(255 255 255 / 0.7); } /* ============================================================================ 2. CARD HOVER EFFECTS — [data-mvc-hover] Applied on top of whatever card style is active. ---------------------------------------------------------------------------- */ /* Lift — card rises on hover (most common for local service sites) */ [data-mvc-hover="lift"] .mvc-post-card:hover, [data-mvc-hover="lift"] .mvc-card:hover, [data-mvc-hover="lift"] .mvc-card:hover { transform: translateY(-4px); box-shadow: var(--mvc-shadow-card, 0 4px 12px -2px rgb(0 0 0 / 0.1)); } /* Border — primary-color border appears on hover */ [data-mvc-hover="border"] .mvc-post-card:hover, [data-mvc-hover="border"] .mvc-card:hover, [data-mvc-hover="border"] .mvc-card:hover { border-color: var(--mvc-color-primary, #1e40af); } /* Glow — colored shadow blooms outward */ [data-mvc-hover="glow"] .mvc-post-card:hover, [data-mvc-hover="glow"] .mvc-card:hover, [data-mvc-hover="glow"] .mvc-card:hover { box-shadow: 0 0 24px 4px color-mix(in srgb, var(--mvc-color-primary, #1e40af) 25%, transparent); } /* Scale — subtle grow on hover */ [data-mvc-hover="scale"] .mvc-post-card:hover, [data-mvc-hover="scale"] .mvc-card:hover, [data-mvc-hover="scale"] .mvc-card:hover { transform: scale(1.02); } /* None — no hover transform (explicit override) */ [data-mvc-hover="none"] .mvc-post-card:hover, [data-mvc-hover="none"] .mvc-card:hover, [data-mvc-hover="none"] .mvc-card:hover { transform: none; box-shadow: var(--mvc-card-hover-shadow, none); } /* ============================================================================ 3. BUTTON STYLES — [data-mvc-btn-style] Applied to .mvc-btn. Stacks on the base button system in utilities.css. ---------------------------------------------------------------------------- */ /* * Each style targets .mvc-btn--primary (the filled brand button). Secondary * buttons keep their outlined look from utilities.css — that's intentional; * primary/secondary contrast is the whole point of the pair. * * Choices mirror the ACF design_btn_style picker exactly: * filled / filled-shadow / outlined / soft / flat / glass. */ /* Filled — solid brand color, no shadow. The baseline. */ [data-mvc-btn-style="filled"] .mvc-btn--primary { background-color: var(--mvc-color-btn-bg, var(--mvc-color-primary, var(--color-primary))); color: var(--mvc-color-btn-text, #ffffff); border: 2px solid var(--mvc-color-btn-border, var(--mvc-color-btn-bg, var(--mvc-color-primary, var(--color-primary)))); box-shadow: none; } /* Filled + drop shadow — same as filled, plus a soft elevation shadow */ [data-mvc-btn-style="filled-shadow"] .mvc-btn--primary { background-color: var(--mvc-color-btn-bg, var(--mvc-color-primary, var(--color-primary))); color: var(--mvc-color-btn-text, #ffffff); border: 2px solid var(--mvc-color-btn-border, var(--mvc-color-btn-bg, var(--mvc-color-primary, var(--color-primary)))); box-shadow: 0 4px 12px -2px rgb(0 0 0 / 0.18); } /* Outlined — border only, transparent fill */ [data-mvc-btn-style="outlined"] .mvc-btn--primary { background-color: transparent; color: var(--mvc-color-btn-border, var(--mvc-color-btn-bg, var(--mvc-color-primary, var(--color-primary)))); border: 2px solid var(--mvc-color-btn-border, var(--mvc-color-btn-bg, var(--mvc-color-primary, var(--color-primary)))); } [data-mvc-btn-style="outlined"] .mvc-btn--primary:hover { background-color: var(--mvc-color-btn-border, var(--mvc-color-btn-bg, var(--mvc-color-primary, var(--color-primary)))); border-color: var(--mvc-color-btn-border, var(--mvc-color-btn-bg, var(--mvc-color-primary, var(--color-primary)))); color: var(--mvc-color-btn-text, #ffffff); } /* * Soft — low-opacity tinted background (8% of primary), no border. * Reads as a "chip" or "tag" button. color-mix is widely supported (2023+). */ [data-mvc-btn-style="soft"] .mvc-btn--primary { background-color: color-mix(in srgb, var(--mvc-color-btn-bg, var(--mvc-color-primary, var(--color-primary))) 12%, transparent); color: var(--mvc-color-btn-bg, var(--mvc-color-primary, var(--color-primary))); border: 2px solid transparent; } [data-mvc-btn-style="soft"] .mvc-btn--primary:hover { background-color: color-mix(in srgb, var(--mvc-color-btn-bg, var(--mvc-color-primary, var(--color-primary))) 22%, transparent); } /* Flat — solid bg, no shadow, no border. Same as filled but explicit (no transitions to elevation). */ [data-mvc-btn-style="flat"] .mvc-btn--primary { background-color: var(--mvc-color-btn-bg, var(--mvc-color-primary, var(--color-primary))); color: var(--mvc-color-btn-text, #ffffff); border: none; box-shadow: none; } /* * Glass — frosted semi-transparent fill with a subtle inner highlight. * Falls back gracefully where backdrop-filter is unsupported (just looks * like a tinted button). */ [data-mvc-btn-style="glass"] .mvc-btn--primary { background-color: color-mix(in srgb, var(--mvc-color-btn-bg, var(--mvc-color-primary, var(--color-primary))) 30%, transparent); color: var(--mvc-color-btn-text, #ffffff); border: 1px solid rgb(255 255 255 / 0.25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.15); } [data-mvc-btn-style="glass"] .mvc-btn--primary:hover { background-color: color-mix(in srgb, var(--mvc-color-btn-bg, var(--mvc-color-primary, var(--color-primary))) 45%, transparent); } /* ============================================================================ 4. BUTTON HOVER EFFECTS — [data-mvc-btn-hover] ---------------------------------------------------------------------------- */ .mvc-btn { transition: background-color var(--duration-normal, 250ms) ease, color var(--duration-normal, 250ms) ease, border-color var(--duration-normal, 250ms) ease, box-shadow var(--duration-normal, 250ms) ease, transform var(--duration-normal, 250ms) ease, filter var(--duration-normal, 250ms) ease; } /* * Hover effects mirror the ACF design_btn_hover_style picker: * darken / lighten / lift / scale / glow. They target .mvc-btn so both * primary and secondary buttons participate. The base .mvc-btn rules in * utilities.css already include a default :hover (background swap + * translateY + shadow); these data-attr rules add to or override that. */ /* Darken — slight darken filter on hover (works on any fill color) */ [data-mvc-btn-hover="darken"] .mvc-btn:hover { filter: brightness(0.92); } /* Lighten — slight brighten filter on hover */ [data-mvc-btn-hover="lighten"] .mvc-btn:hover { filter: brightness(1.10); } /* Lift — button rises on hover */ [data-mvc-btn-hover="lift"] .mvc-btn:hover { transform: translateY(-2px); box-shadow: var(--mvc-shadow-btn, 0 4px 12px -2px rgb(0 0 0 / 0.18)); } /* Scale — button grows slightly on hover */ [data-mvc-btn-hover="scale"] .mvc-btn:hover { transform: scale(1.04); } /* * Glow — amplifies the cursor-tracking radial highlight (defined in * utilities.css via .mvc-btn::before). The base ::before uses a soft * white at 0.45 opacity that reads on any button; the "glow" hover * setting cranks it brighter so the spotlight effect is unmistakable. * Targets .mvc-btn so both primary and secondary buttons participate * ("Hover interaction on all buttons" per ACF instructions). */ [data-mvc-btn-hover="glow"] .mvc-btn::before { background: radial-gradient( 140px circle at var(--glow-x) var(--glow-y), rgba(var(--mvc-btn-glow-color), 0.65) 0%, rgba(var(--mvc-btn-glow-color), 0.25) 35%, transparent 70% ); } /* prefers-reduced-motion — disable transforms; keep color/filter changes */ @media (prefers-reduced-motion: reduce) { [data-mvc-btn-hover="lift"] .mvc-btn:hover, [data-mvc-btn-hover="scale"] .mvc-btn:hover { transform: none; } } /* ============================================================================ 5. MOTION LEVELS — [data-mvc-motion] Controls whether scroll-reveal animations are activated. 'none' disables all; 'subtle' uses gentle fades; 'enhanced' adds transforms. ---------------------------------------------------------------------------- */ /* Default: all reveals are invisible until JS activates them */ .mvc-reveal { opacity: 1; } /* Subtle and enhanced: elements start hidden, revealed by IntersectionObserver (main.js adds .is-visible when they enter the viewport) */ [data-mvc-motion="subtle"] .mvc-reveal, [data-mvc-motion="enhanced"] .mvc-reveal { opacity: 0; transition: opacity var(--mvc-duration-reveal, 400ms) ease, transform var(--mvc-duration-reveal, 400ms) ease; } [data-mvc-motion="subtle"] .mvc-reveal.is-visible, [data-mvc-motion="enhanced"] .mvc-reveal.is-visible { opacity: 1; transform: none; } /* Enhanced adds y-axis translate for a rising effect */ [data-mvc-motion="enhanced"] .mvc-reveal { transform: translateY(24px); } /* Stagger delays for grid children */ [data-mvc-motion="subtle"] .mvc-reveal:nth-child(2), [data-mvc-motion="enhanced"] .mvc-reveal:nth-child(2) { transition-delay: 80ms; } [data-mvc-motion="subtle"] .mvc-reveal:nth-child(3), [data-mvc-motion="enhanced"] .mvc-reveal:nth-child(3) { transition-delay: 160ms; } [data-mvc-motion="subtle"] .mvc-reveal:nth-child(4), [data-mvc-motion="enhanced"] .mvc-reveal:nth-child(4) { transition-delay: 240ms; } [data-mvc-motion="subtle"] .mvc-reveal:nth-child(5), [data-mvc-motion="enhanced"] .mvc-reveal:nth-child(5) { transition-delay: 320ms; } [data-mvc-motion="subtle"] .mvc-reveal:nth-child(n+6), [data-mvc-motion="enhanced"] .mvc-reveal:nth-child(n+6) { transition-delay: 400ms; } /* None: no animation at all, everything visible immediately */ [data-mvc-motion="none"] .mvc-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } /* ============================================================================ 6. REVEAL STYLES — [data-mvc-reveal] Sets the specific entry animation style. Works only when motion is not "none". ---------------------------------------------------------------------------- */ /* Fade — opacity only */ [data-mvc-motion="subtle"] [data-mvc-reveal="fade"] .mvc-reveal, [data-mvc-motion="enhanced"] [data-mvc-reveal="fade"] .mvc-reveal { transform: none; } /* Slide-up — rises from below (already the default for enhanced) */ [data-mvc-motion="subtle"] [data-mvc-reveal="slide-up"] .mvc-reveal, [data-mvc-motion="enhanced"] [data-mvc-reveal="slide-up"] .mvc-reveal { transform: translateY(32px); } /* Slide-in — enters from the left */ [data-mvc-motion="subtle"] [data-mvc-reveal="slide-in"] .mvc-reveal, [data-mvc-motion="enhanced"] [data-mvc-reveal="slide-in"] .mvc-reveal { transform: translateX(-24px); } /* Scale-in — grows from slightly smaller */ [data-mvc-motion="subtle"] [data-mvc-reveal="scale-in"] .mvc-reveal, [data-mvc-motion="enhanced"] [data-mvc-reveal="scale-in"] .mvc-reveal { transform: scale(0.94); } /* Stagger — same as slide-up but the stagger delays above kick in */ [data-mvc-motion="subtle"] [data-mvc-reveal="stagger"] .mvc-reveal, [data-mvc-motion="enhanced"] [data-mvc-reveal="stagger"] .mvc-reveal { transform: translateY(20px); } /* ============================================================================ 7. HERO TREATMENTS — [data-mvc-hero] ---------------------------------------------------------------------------- */ /* Image — standard full-width hero with background image + dark overlay */ [data-mvc-hero="image"] .mvc-hero { position: relative; background: var(--mvc-color-surface-dark, #0f172a); } [data-mvc-hero="image"] .mvc-hero__media { position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%; opacity: calc(1 - var(--mvc-img-overlay-opacity, 0.4)); } /* Gradient — full-width section with a brand gradient instead of a photo */ [data-mvc-hero="gradient"] .mvc-hero { background: linear-gradient( 135deg, var(--mvc-color-primary, #1e40af) 0%, color-mix(in srgb, var(--mvc-color-primary, #1e40af) 60%, var(--mvc-color-accent, #f59e0b)) 100% ); color: #ffffff; } [data-mvc-hero="gradient"] .mvc-hero__media { display: none; } /* Split — content left, image right (two-column hero) */ [data-mvc-hero="split"] .mvc-hero { display: grid; grid-template-columns: 1fr 1fr; align-items: center; min-height: auto; } [data-mvc-hero="split"] .mvc-hero__media { position: relative; height: 100%; min-height: 400px; object-fit: cover; } @media (max-width: 767px) { [data-mvc-hero="split"] .mvc-hero { grid-template-columns: 1fr; } [data-mvc-hero="split"] .mvc-hero__media { order: -1; min-height: 260px; } } /* Minimal — no background image; clean color slab */ [data-mvc-hero="minimal"] .mvc-hero { background-color: var(--mvc-color-surface-light, var(--color-bg-alt, #f8fafc)); color: var(--mvc-color-text, #1e293b); } [data-mvc-hero="minimal"] .mvc-hero__media { display: none; } /* Video — same layout as image but hides the poster once video plays */ [data-mvc-hero="video"] .mvc-hero { position: relative; overflow: hidden; } [data-mvc-hero="video"] .mvc-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } [data-mvc-hero="video"] .mvc-hero__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 600ms ease; } [data-mvc-hero="video"] .mvc-hero__video.is-playing ~ .mvc-hero__media { opacity: 0; } /* ============================================================================ 8. IMAGE TREATMENTS — [data-mvc-img-style] Applied to img elements within .mvc-post-card and component image wrappers. ---------------------------------------------------------------------------- */ /* Natural — no decoration, just the image radius token */ [data-mvc-img-style="natural"] .mvc-post-card img, [data-mvc-img-style="natural"] .mvc-card__image img { border-radius: var(--mvc-img-radius, 0); box-shadow: none; filter: none; } /* Rounded — matches the global radius preset */ [data-mvc-img-style="rounded"] .mvc-post-card img, [data-mvc-img-style="rounded"] .mvc-card__image img { border-radius: var(--mvc-img-radius, var(--radius, 0.5rem)); } /* Shadow — image casts a soft shadow */ [data-mvc-img-style="shadow"] .mvc-post-card img, [data-mvc-img-style="shadow"] .mvc-card__image img { border-radius: var(--mvc-img-radius, var(--radius, 0.5rem)); box-shadow: var(--mvc-shadow-card, 0 4px 12px -2px rgb(0 0 0 / 0.12)); } /* Polaroid — white border + shadow mimics a Polaroid photo */ [data-mvc-img-style="polaroid"] .mvc-post-card img, [data-mvc-img-style="polaroid"] .mvc-card__image img { border-radius: 2px; padding: 6px; background: #ffffff; box-shadow: 0 4px 12px rgb(0 0 0 / 0.18); transform: rotate(-1deg); display: block; } [data-mvc-img-style="polaroid"] .mvc-post-card:hover img, [data-mvc-img-style="polaroid"] .mvc-card:hover img { transform: rotate(0deg); } /* Duotone — CSS-only two-tone tint using color mix (accent + mono) */ [data-mvc-img-style="duotone"] .mvc-post-card img, [data-mvc-img-style="duotone"] .mvc-card__image img { filter: grayscale(100%) contrast(1.1) brightness(1.05); mix-blend-mode:luminosity; border-radius: var(--mvc-img-radius, 0); } [data-mvc-img-style="duotone"] .mvc-card__image { background-color: var(--mvc-color-primary, #1e40af); } /* ============================================================================ 9. SECTION GRADIENT BACKGROUNDS — [data-mvc-section-gradient] Drop data-mvc-section-gradient="X" on any .mvc-section or section wrapper. The value selects which gradient token is applied as the background. Values: brand-dark → deep primary→primary-dark diagonal (dark sections) brand-mesh → radial mesh ambient on dark (hero/feature dark) brand-light → very subtle primary tint on off-white (light sections) brand-warm → warm accent micro-tint on white (light sections) accent → accent color gradient (CTA / trust strips) photo-cover → standard bottom-up dark overlay over a BG image photo-brand → brand-color bottom-up overlay over a BG image split-dark → left 55% dark primary, right light (split feature sections) ---------------------------------------------------------------------------- */ /* brand-dark — rich primary-to-darker diagonal; replace flat dark sections */ [data-mvc-section-gradient="brand-dark"] { background: var(--mvc-gradient-hero-dark, linear-gradient(160deg, #0a0f2e 0%, var(--mvc-color-primary, #1B2B6B) 55%, color-mix(in srgb, var(--mvc-color-primary, #1B2B6B) 60%, #000) 100%)); color: #ffffff; } [data-mvc-section-gradient="brand-dark"] h1, [data-mvc-section-gradient="brand-dark"] h2, [data-mvc-section-gradient="brand-dark"] h3, [data-mvc-section-gradient="brand-dark"] h4 { color: #ffffff; } [data-mvc-section-gradient="brand-dark"] .mvc-section-subtitle, [data-mvc-section-gradient="brand-dark"] .mvc-text-muted { color: rgba(255,255,255,0.72); } /* brand-mesh — ambient radial glow mesh for hero / premium feature sections */ [data-mvc-section-gradient="brand-mesh"] { background: var(--mvc-gradient-mesh-dark, radial-gradient(ellipse 80% 60% at 20% 40%, color-mix(in srgb, var(--mvc-color-primary, #1B2B6B) 40%, transparent) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 80% 70%, color-mix(in srgb, var(--mvc-color-accent, #2563EB) 18%, transparent) 0%, transparent 60%), var(--color-gray-900, #0f172a)); color: #ffffff; } [data-mvc-section-gradient="brand-mesh"] h1, [data-mvc-section-gradient="brand-mesh"] h2, [data-mvc-section-gradient="brand-mesh"] h3 { color: #ffffff; } [data-mvc-section-gradient="brand-mesh"] .mvc-section-subtitle, [data-mvc-section-gradient="brand-mesh"] .mvc-text-muted { color: rgba(255,255,255,0.72); } /* brand-light — barely-there primary tint on a light section */ [data-mvc-section-gradient="brand-light"] { background: var(--mvc-gradient-surface, linear-gradient(160deg, var(--color-gray-50, #f8fafc) 0%, color-mix(in srgb, var(--color-gray-50, #f8fafc) 78%, var(--mvc-color-primary, #1B2B6B)) 100%)); } /* brand-warm — warm micro-tint for testimonials / blog sections */ [data-mvc-section-gradient="brand-warm"] { background: var(--mvc-gradient-surface-warm, linear-gradient(160deg, #fafafa 0%, color-mix(in srgb, var(--mvc-color-accent, #2563EB) 6%, #fafafa) 100%)); } /* accent — accent-color diagonal for CTA strips and trust bars */ [data-mvc-section-gradient="accent"] { background: var(--mvc-gradient-accent, linear-gradient(135deg, var(--mvc-color-accent, #2563EB) 0%, color-mix(in srgb, var(--mvc-color-accent, #2563EB) 70%, #000) 100%)); color: #ffffff; } [data-mvc-section-gradient="accent"] h1, [data-mvc-section-gradient="accent"] h2, [data-mvc-section-gradient="accent"] h3 { color: #ffffff; } /* photo-cover — standard photo hero: dark gradient overlay bottom-up */ [data-mvc-section-gradient="photo-cover"] { position: relative; } [data-mvc-section-gradient="photo-cover"]::before { content: ''; position: absolute; inset: 0; background: var(--mvc-gradient-overlay, linear-gradient(to top, rgb(0 0 0 / 0.75) 0%, rgb(0 0 0 / 0.35) 50%, rgb(0 0 0 / 0.1) 100%)); pointer-events: none; z-index: 1; } [data-mvc-section-gradient="photo-cover"] > * { position: relative; z-index: 2; } /* photo-brand — brand-color tinted overlay for on-brand hero photos */ [data-mvc-section-gradient="photo-brand"] { position: relative; } [data-mvc-section-gradient="photo-brand"]::before { content: ''; position: absolute; inset: 0; background: var(--mvc-gradient-overlay-brand, linear-gradient(to top, color-mix(in srgb, var(--mvc-color-primary, #1B2B6B) 90%, transparent) 0%, color-mix(in srgb, var(--mvc-color-primary, #1B2B6B) 40%, transparent) 50%, transparent 100%)); pointer-events: none; z-index: 1; } [data-mvc-section-gradient="photo-brand"] > * { position: relative; z-index: 2; } /* split-dark — horizontal split: left dark-primary, right transparent/light */ [data-mvc-section-gradient="split-dark"] { background: linear-gradient( to right, var(--mvc-color-primary, #1B2B6B) 0%, var(--mvc-color-primary, #1B2B6B) 55%, var(--color-gray-50, #f8fafc) 55%, var(--color-gray-50, #f8fafc) 100% ); } /* ============================================================================ 9b. PREMIUM ACCENT DECORATORS — [data-mvc-accent-line] Adds a short brand shimmer line above section headings. data-mvc-accent-line="top" → before the section heading data-mvc-accent-line="left" → left border of the section header block data-mvc-accent-line="bottom" → below a section heading ---------------------------------------------------------------------------- */ [data-mvc-accent-line="top"] .mvc-section-header::before, [data-mvc-accent-line="top"] .mvc-section-eyebrow::before { content: ''; display: block; width: 48px; height: 3px; border-radius: 2px; background: var(--mvc-gradient-shimmer, linear-gradient(90deg, var(--mvc-color-accent, #2563EB), color-mix(in srgb, var(--mvc-color-accent, #2563EB) 60%, #fff), var(--mvc-color-accent, #2563EB))); margin-bottom: var(--space-4, 1rem); } [data-mvc-accent-line="left"] .mvc-section-header { border-left: 3px solid var(--mvc-color-accent, #2563EB); padding-left: var(--space-5, 1.25rem); } [data-mvc-accent-line="bottom"] .mvc-section-title::after, [data-mvc-accent-line="bottom"] h2::after { content: ''; display: block; width: 56px; height: 3px; border-radius: 2px; background: var(--mvc-gradient-shimmer, linear-gradient(90deg, var(--mvc-color-accent, #2563EB), color-mix(in srgb, var(--mvc-color-accent, #2563EB) 60%, #fff), var(--mvc-color-accent, #2563EB))); margin-top: var(--space-4, 1rem); } [data-mvc-accent-line="bottom"] .mvc-section-header--center .mvc-section-title::after, [data-mvc-accent-line="bottom"] .mvc-section-header--center h2::after { margin-left: auto; margin-right: auto; } /* ============================================================================ 9c. CARD STYLES — premium / luxury additions Extends Section 1 card styles. ---------------------------------------------------------------------------- */ /* Premium — gradient top edge, luxury shadow, subtle inner light */ [data-mvc-card-style="premium"] .mvc-post-card, [data-mvc-card-style="premium"] .mvc-card, [data-mvc-card-style="premium"] .mvc-card { border: none; box-shadow: var(--mvc-shadow-card-premium, 0 2px 4px -1px rgb(0 0 0 / 0.06), 0 8px 24px -4px rgb(0 0 0 / 0.12), inset 0 1px 0 rgb(255 255 255 / 0.08)); border-top: 3px solid transparent; border-image: var(--mvc-gradient-shimmer, linear-gradient(90deg, var(--mvc-color-accent, #2563EB), color-mix(in srgb, var(--mvc-color-accent, #2563EB) 60%, #fff), var(--mvc-color-accent, #2563EB))) 1; border-image-slice: 1; } [data-mvc-card-style="premium"] .mvc-post-card:hover, [data-mvc-card-style="premium"] .mvc-card:hover, [data-mvc-card-style="premium"] .mvc-card:hover { box-shadow: var(--mvc-shadow-luxury, 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 20px 40px -8px rgb(0 0 0 / 0.15), 0 0 0 1px rgb(255 255 255 / 0.04)); transform: translateY(-3px); } /* Dark-glass — frosted glass on dark backgrounds */ [data-mvc-card-style="dark-glass"] .mvc-post-card, [data-mvc-card-style="dark-glass"] .mvc-card, [data-mvc-card-style="dark-glass"] .mvc-card { background-color: color-mix(in srgb, var(--mvc-color-surface-dark, #0f172a) 70%, transparent); border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 8px 32px 0 rgb(0 0 0 / 0.3), inset 0 1px 0 rgb(255 255 255 / 0.06); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); color: rgba(255,255,255,0.9); } [data-mvc-card-style="dark-glass"] .mvc-post-card:hover, [data-mvc-card-style="dark-glass"] .mvc-card:hover, [data-mvc-card-style="dark-glass"] .mvc-card:hover { border-color: rgba(255,255,255,0.16); box-shadow: 0 12px 48px 0 rgb(0 0 0 / 0.4), inset 0 1px 0 rgb(255 255 255 / 0.1); } /* ============================================================================ 9d. BUTTON GRADIENT PREMIUM — extends Section 3 data-mvc-btn-style="gradient-premium" Adds a shimmer shift animation on hover instead of flipping the gradient. ---------------------------------------------------------------------------- */ [data-mvc-btn-style="gradient-premium"] .mvc-btn--primary { background: var(--mvc-gradient-primary, linear-gradient(135deg, var(--mvc-color-primary, #1B2B6B) 0%, color-mix(in srgb, var(--mvc-color-primary, #1B2B6B) 70%, #000) 100%)); background-size: 200% 200%; color: #ffffff; border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 4px 16px -2px color-mix(in srgb, var(--mvc-color-primary, #1B2B6B) 35%, transparent); transition: background-position 0.5s ease, box-shadow 0.3s ease, transform 0.2s ease; } [data-mvc-btn-style="gradient-premium"] .mvc-btn--primary:hover { background-position: right center; box-shadow: 0 8px 24px -4px color-mix(in srgb, var(--mvc-color-primary, #1B2B6B) 50%, transparent); filter: brightness(1.08); transform: translateY(-1px); } [data-mvc-btn-style="gradient-premium"] .mvc-btn--accent { background: var(--mvc-gradient-accent, linear-gradient(135deg, var(--mvc-color-accent, #2563EB) 0%, color-mix(in srgb, var(--mvc-color-accent, #2563EB) 70%, #000) 100%)); background-size: 200% 200%; color: #ffffff; border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 4px 16px -2px color-mix(in srgb, var(--mvc-color-accent, #2563EB) 35%, transparent); transition: background-position 0.5s ease, box-shadow 0.3s ease, transform 0.2s ease; } [data-mvc-btn-style="gradient-premium"] .mvc-btn--accent:hover { background-position: right center; box-shadow: 0 8px 24px -4px color-mix(in srgb, var(--mvc-color-accent, #2563EB) 50%, transparent); filter: brightness(1.08); transform: translateY(-1px); } /* ============================================================================ 9. DARK MODE — data-color-scheme on Tokens flip via CSS; components that use --mvc-* vars automatically update. ---------------------------------------------------------------------------- */ [data-color-scheme="dark"] { --mvc-color-surface: var(--color-gray-900, #0f172a); --mvc-color-surface-light: var(--color-gray-800, #1e293b); --mvc-color-surface-dark: var(--color-gray-900, #0f172a); --mvc-color-text: var(--color-gray-100, #f1f5f9); --mvc-color-text-muted: var(--color-gray-400, #94a3b8); --mvc-color-text-light: var(--color-gray-200, #e2e8f0); --mvc-color-border: var(--color-gray-700, #334155); color-scheme: dark; } [data-color-scheme="dark"] .mvc-post-card, [data-color-scheme="dark"] .mvc-card, [data-color-scheme="dark"] .mvc-card { background-color: var(--mvc-color-surface, var(--color-gray-900, #0f172a)); border-color: var(--mvc-color-border, var(--color-gray-700, #334155)); } /* ============================================================================ 10. REDUCED MOTION — global override Suppresses all transforms and animations for prefers-reduced-motion: reduce. This overrides every rule above. No exceptions. ---------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .mvc-reveal { opacity: 1 !important; transform: none !important; } } /* ============================================================================ 11. COMPONENT STYLE OVERRIDES These must come last — after all [data-mvc-card-style] and dark-mode rules — so component-specific resets always win regardless of dashboard card style. ---------------------------------------------------------------------------- */ /* Image overlay cards: strip all card chrome — image + scrim only */ .mvc-service-grid--style-image-overlay-cards .mvc-post-card, .mvc-service-grid--style-image-overlay-cards [class*="mvc-post-card__"] { background-color: transparent; border: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } /* Clean cards and default service grid: no border, no box — shadow only via service-grid.css */ .mvc-service-grid--style-clean-cards .mvc-post-card, .mvc-service-grid .mvc-post-card { border: none; background-color: var(--mvc-color-surface, #fff); } .mvc-service-grid--style-clean-cards [class*="mvc-post-card__"], .mvc-service-grid [class*="mvc-post-card__"] { border: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }