/* * presets/premium-modern.css — "Premium Modern" design preset. * * Aesthetic: premium luxury + modern authority. Built for high-end local service * businesses targeting affluent homeowners. Deep navy + electric blue accent. * Bold condensed headings paired with clean Inter body text. Gradient-forward * with dark sections, shimmer accents, and elevated card depth. * * Palette: Deep navy (#1B2B6B) + Electric blue (#2563EB) + Off-white surfaces. * Fonts: Barlow Condensed (headings) + Inter (body). * Character: Tight radius, strong shadows, subtle gradients baked in, confident * motion. Luxury feel without sacrificing readability or conversion clarity. * * Loaded by enqueue.php when blueprint design_preset = 'premium-modern'. */ /* ── Google Fonts ─────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap'); /* ── Token overrides ─────────────────────────────────────────────────────── */ :root { /* ── Brand ──────────────────────────────────────────────────────────────── */ --color-primary: #1B2B6B; /* deep navy — authority */ --color-primary-dark: #111d4a; --color-primary-light: #2d449e; --color-primary-subtle: #eef0fb; --color-accent: #2563EB; /* electric blue — modern CTA */ --color-accent-dark: #1d4ed8; --color-accent-light: #60a5fa; --color-accent-subtle: #dbeafe; --color-secondary: #64748B; --color-secondary-dark: #475569; --color-secondary-light:#f1f5f9; /* ── Surfaces ────────────────────────────────────────────────────────────── */ --color-bg: #fafafa; --color-bg-alt: #f1f5f9; --color-surface: #ffffff; --color-surface-raised: #f8fafc; --color-border: #e2e8f0; --color-border-strong: #cbd5e1; /* ── Text ────────────────────────────────────────────────────────────────── */ --color-text: #1e293b; --color-text-muted: #64748b; --color-heading: #0f172a; --color-link: #1B2B6B; --color-link-hover: #2563EB; /* ── Fonts ───────────────────────────────────────────────────────────────── */ --font-heading: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; --mvc-font-heading: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif; --mvc-font-body: 'Inter', system-ui, sans-serif; /* ── Heading weights — Barlow Condensed is bold by default ──────────────── */ --font-weight-bold: 700; --font-weight-black: 800; --mvc-font-weight-heading: 700; /* ── Letter spacing — condensed headings need tighter tracking ───────────── */ --tracking-tight: -0.02em; --tracking-normal: -0.01em; --tracking-wide: 0.04em; --tracking-wider: 0.08em; --tracking-widest: 0.14em; /* ── Line heights ────────────────────────────────────────────────────────── */ --leading-tight: 1.1; --leading-snug: 1.2; --leading-normal: 1.5; --leading-relaxed: 1.65; /* ── Type scale — premium goes bigger ────────────────────────────────────── */ --text-4xl: 2.5rem; --text-5xl: 3.5rem; --text-6xl: 4.5rem; /* ── Radius — minimal, refined. Not zero, not fluffy ─────────────────────── */ --radius-sm: 2px; --radius: 4px; --radius-md: 6px; --radius-lg: 8px; --radius-xl: 12px; --radius-2xl: 16px; --radius-full: 9999px; --btn-radius: var(--radius-sm); --card-radius: var(--radius-md); --input-radius:var(--radius-sm); /* ── Shadows — navy-tinted, premium depth ────────────────────────────────── */ --shadow-sm: 0 1px 3px 0 rgba(15, 23, 42, 0.08); --shadow: 0 2px 6px -1px rgba(15, 23, 42, 0.10), 0 1px 2px -1px rgba(15, 23, 42, 0.06); --shadow-md: 0 4px 12px -2px rgba(15, 23, 42, 0.12), 0 2px 4px -2px rgba(15, 23, 42, 0.06); --shadow-lg: 0 16px 32px -4px rgba(15, 23, 42, 0.14), 0 4px 8px -4px rgba(15, 23, 42, 0.06); --shadow-xl: 0 24px 48px -8px rgba(15, 23, 42, 0.18), 0 8px 16px -6px rgba(15, 23, 42, 0.08); --shadow-2xl: 0 40px 80px -12px rgba(15, 23, 42, 0.25); --card-shadow: var(--shadow-md); --card-hover-shadow: var(--shadow-xl); --header-shadow: var(--shadow); /* ── Section padding — generous premium breathing room ───────────────────── */ --section-py: 5.5rem; --section-py-sm: 3.5rem; --section-py-lg: 8rem; /* ── Layout ──────────────────────────────────────────────────────────────── */ --container-max: 1280px; --container-px: 2rem; --grid-gap: 1.75rem; /* ── Header ──────────────────────────────────────────────────────────────── */ --header-height: 72px; --header-height-sm: 60px; --header-bg: #ffffff; --header-border: #e2e8f0; --header-logo-height: 52px; /* ── Footer ──────────────────────────────────────────────────────────────── */ --footer-bg: #0f172a; /* near-black navy */ --footer-py: 5rem; /* ── Buttons ─────────────────────────────────────────────────────────────── */ --btn-font-family: var(--font-body); --btn-font-weight: 600; --btn-letter-spacing: 0.04em; --btn-px: 1.75rem; --btn-py: 0.875rem; --btn-px-lg: 2.25rem; --btn-py-lg: 1.125rem; --btn-font-size: var(--text-base); /* ── Transitions — confident, not slow ───────────────────────────────────── */ --duration-fast: 130ms; --duration-normal: 220ms; --duration-slow: 360ms; --duration-slower: 550ms; /* ── MVC semantic bridge — wire gradient tokens ───────────────────────────── */ --mvc-color-primary: var(--color-primary); --mvc-color-accent: var(--color-accent); --mvc-color-surface-dark: #0f172a; --mvc-shadow-card: var(--shadow-md); --mvc-shadow-header: var(--shadow); --mvc-shadow-btn: var(--shadow-sm); --mvc-card-shadow: var(--card-shadow); --mvc-card-hover-shadow: var(--card-hover-shadow); /* Gradient tokens — resolved from brand above */ --mvc-gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); --mvc-gradient-primary-h: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); --mvc-gradient-accent: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%); --mvc-gradient-hero: linear-gradient(150deg, #0a0f2e 0%, var(--color-primary) 50%, #0f2060 100%); --mvc-gradient-hero-dark: linear-gradient(160deg, #080e25 0%, var(--color-primary) 55%, #0e1d56 100%); --mvc-gradient-section: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); --mvc-gradient-surface: linear-gradient(160deg, var(--color-gray-50, #f8fafc) 0%, color-mix(in srgb, var(--color-gray-50, #f8fafc) 80%, var(--color-primary)) 100%); --mvc-gradient-surface-warm: linear-gradient(160deg, #fafafa 0%, color-mix(in srgb, var(--color-accent) 6%, #fafafa) 100%); --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%); --mvc-gradient-overlay-h: linear-gradient(to right, rgb(0 0 0 / 0.8) 0%, rgb(0 0 0 / 0.2) 60%, transparent 100%); --mvc-gradient-overlay-brand: linear-gradient(to top, color-mix(in srgb, var(--color-primary) 92%, transparent) 0%, color-mix(in srgb, var(--color-primary) 45%, transparent) 50%, transparent 100%); --mvc-gradient-shimmer: linear-gradient(90deg, var(--color-accent) 0%, color-mix(in srgb, var(--color-accent) 60%, #ffffff) 50%, var(--color-accent) 100%); --mvc-gradient-line: linear-gradient(90deg, transparent, var(--color-accent), transparent); --mvc-gradient-mesh-dark: radial-gradient(ellipse 80% 60% at 20% 40%, color-mix(in srgb, var(--color-primary) 45%, transparent) 0%, transparent 60%), radial-gradient(ellipse 60% 50% at 80% 70%, color-mix(in srgb, var(--color-accent) 20%, transparent) 0%, transparent 60%), var(--color-gray-900, #0f172a); --mvc-gradient-mesh-light: radial-gradient(ellipse 70% 55% at 15% 30%, color-mix(in srgb, var(--color-primary) 8%, transparent) 0%, transparent 65%), radial-gradient(ellipse 55% 45% at 85% 75%, color-mix(in srgb, var(--color-accent) 5%, transparent) 0%, transparent 60%), var(--color-gray-50, #f8fafc); /* Glow tokens */ --mvc-glow-primary: 0 0 40px color-mix(in srgb, var(--color-primary) 30%, transparent), 0 0 80px color-mix(in srgb, var(--color-primary) 12%, transparent); --mvc-glow-accent: 0 0 30px color-mix(in srgb, var(--color-accent) 40%, transparent), 0 0 60px color-mix(in srgb, var(--color-accent) 15%, transparent); /* Luxury shadow tokens */ --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); --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); } /* ── Heading styles — Barlow Condensed treatment ─────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-family: var(--mvc-font-heading); letter-spacing: -0.01em; line-height: var(--leading-tight); font-weight: var(--mvc-font-weight-heading); } h1 { font-size: clamp(2.75rem, 5.5vw, 4.5rem); } h2 { font-size: clamp(2rem, 4vw, 3.25rem); } h3 { font-size: clamp(1.5rem, 2.8vw, 2.25rem); } h4 { font-size: clamp(1.25rem, 2vw, 1.75rem); } /* ── Section eyebrow — wide-tracked label above headings ─────────────────── */ .mvc-section-eyebrow { font-family: var(--mvc-font-body); font-size: var(--text-xs); font-weight: var(--mvc-nav-font-weight, 600); letter-spacing: var(--mvc-nav-letter-spacing, 0.12em); text-transform: var(--mvc-nav-text-transform, uppercase); color: var(--color-accent); } /* ── Primary buttons ─────────────────────────────────────────────────────── */ .mvc-btn--primary { background: var(--mvc-color-btn-bg, var(--color-accent)); color: var(--mvc-color-btn-text, #ffffff); border-color: var(--mvc-color-btn-border, var(--mvc-color-btn-bg, var(--color-accent))); box-shadow: 0 2px 8px -1px color-mix(in srgb, var(--mvc-color-btn-bg, var(--color-accent)) 30%, transparent); } .mvc-btn--primary:hover { background: var(--mvc-color-btn-bg-hover, var(--color-accent-dark)); border-color: var(--mvc-color-btn-bg-hover, var(--color-accent-dark)); box-shadow: 0 6px 20px -2px color-mix(in srgb, var(--mvc-color-btn-bg, var(--color-accent)) 45%, transparent); transform: translateY(-1px); } /* Secondary button ───────────────────────────────────────────────────────── */ .mvc-btn--secondary { background: var(--mvc-color-btn2-bg, transparent); color: var(--mvc-color-btn2-text, var(--color-primary)); border: 2px solid var(--mvc-color-btn2-border, var(--color-primary)); } .mvc-btn--secondary:hover { background: var(--mvc-color-btn2-hover-bg, var(--mvc-color-btn2-border, var(--color-primary))); color: var(--mvc-color-btn2-hover-text, #ffffff); } /* Inverse button — for use on dark/navy sections */ .mvc-btn--inverse { background: rgba(255,255,255,0.12); color: #ffffff; border: 1px solid rgba(255,255,255,0.3); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .mvc-btn--inverse:hover { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.5); } /* ── Cards — premium elevation ───────────────────────────────────────────── */ .mvc-post-card, .mvc-card { border: none; box-shadow: var(--shadow-md); transition: box-shadow var(--duration-normal) ease, transform var(--duration-normal) ease; } .mvc-post-card:hover, .mvc-card:hover { box-shadow: var(--shadow-xl); transform: translateY(-3px); } /* ── Trust strip / stat bars on dark sections ────────────────────────────── */ .mvc-section--dark { background: linear-gradient(160deg, #0a0f2e 0%, var(--color-primary) 55%, #0e1d56 100%); } /* ── Header phone icon — accent color ────────────────────────────────────── */ .mvc-header__phone-icon { color: var(--color-accent); } /* ── Nav active pill — accent fill ──────────────────────────────────────── */ .mvc-header .mvc-header__nav .mvc-nav__item--active > .mvc-nav__link, .mvc-header .mvc-header__nav .current-menu-item > a, .mvc-header .mvc-header__nav .current_page_item > a { background: var(--color-accent); color: #ffffff; } /* ── Footer — deep navy dark ─────────────────────────────────────────────── */ .mvc-footer { background: var(--color-gray-900, #0f172a); } /* ── Reduced-motion guard ─────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .mvc-btn--primary, .mvc-btn--secondary, .mvc-post-card, .mvc-card { transition: none; transform: none; } }