/* ============================================================= VertiSource HR — assets/premium.css The $1M developer layer. Added 2026-04-15. Philosophy: - Content containers cap at 1200px. On ultrawide, gradients and decorative elements fill the viewport, content stays centered. - Modular type scale (1.25 ratio). No random clamp() values. - Motion uses proper easing curves, not browser default. - Depth via shadow layers + subtle gradients, not flat color. - Tabular numbers everywhere for stats. - Optical sizing: larger text gets tighter tracking. This file loads AFTER site.css and overrides where needed. Only affects the 5 Payroll & HR service pages via . ============================================================= */ /* ── MODULAR TYPE SCALE ────────────────────────────────────── Base 16px. Ratio 1.25. Min → Max via clamp with SENSIBLE caps. Every size has explicit line-height + letter-spacing. */ body.premium { --ts-hero: clamp(36px, 3.2vw + 1rem, 56px); /* hero H1 — 36→56 cap */ --ts-h1: clamp(30px, 2.4vw + 1rem, 44px); /* section H1 */ --ts-h2: clamp(24px, 1.8vw + 1rem, 36px); /* section H2 */ --ts-h3: clamp(20px, 1.2vw + 1rem, 26px); /* card title */ --ts-lead: clamp(17px, 0.4vw + 1rem, 20px); /* hero sub + lead text */ --ts-body: 16px; /* body copy */ --ts-sm: 14px; --ts-xs: 12px; /* Tracking (tighter as size grows — optical sizing) */ --tr-hero: -0.028em; --tr-h1: -0.024em; --tr-h2: -0.02em; --tr-h3: -0.015em; /* Line height */ --lh-tight: 1.08; /* hero */ --lh-heading: 1.15; /* h2-h3 */ --lh-body: 1.65; /* Container widths */ --container: min(1200px, calc(100vw - 48px)); --container-narrow: min(960px, calc(100vw - 48px)); --container-reading: min(720px, calc(100vw - 48px)); /* Spacing scale (8px base) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; /* Motion — Stripe-quality easing */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* quick out, soft land */ --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Depth system — 3 shadow layers */ --shadow-sm: 0 1px 2px rgba(13,24,41,.04), 0 2px 4px rgba(13,24,41,.03); --shadow-md: 0 2px 4px rgba(13,24,41,.04), 0 8px 24px -8px rgba(13,24,41,.08), 0 16px 32px -16px rgba(13,24,41,.06); --shadow-lg: 0 4px 8px rgba(13,24,41,.04), 0 16px 40px -12px rgba(13,24,41,.12), 0 32px 64px -24px rgba(13,24,41,.16); --shadow-navy: 0 20px 60px -20px rgba(7,25,46,.45), 0 40px 80px -30px rgba(7,25,46,.30); } /* ── BASE TYPOGRAPHY OVERRIDES ─────────────────────────────── */ body.premium { font-feature-settings: 'kern' 1, 'ss01' 1, 'cv11' 1; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Stats, dates, pricing — always tabular */ body.premium .hero-stat-num, body.premium .stat-number, body.premium [class*="stat-value"], body.premium [class*="stat__num"], body.premium .pay-proof__num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1, 'lnum' 1; } /* ── HERO SECTION ─────────────────────────────────────────── */ /* Hero gradient/background extends full-width, content stays centered */ body.premium .hero, body.premium [class*="hero-"] { position: relative; } /* NOTE 2026-04-21: Removed blanket .hero-h1 / .hero-p / .hero-sub overrides that were forcing home + meet-your-team heroes into a homogenized "premium" type spec. Per-page CSS now wins. */ /* ── SECTION HEADERS ─────────────────────────────────────── */ body.premium .sec-h2, body.premium section h2:not([class*="hero"]):not([class*="cta"]):not([class*="stats-band"]) { font-size: var(--ts-h2) !important; line-height: var(--lh-heading) !important; letter-spacing: var(--tr-h2) !important; font-weight: 800; } body.premium .sec-label, body.premium [class*="eyebrow"]:not(.hero-eyebrow-pill):not(.hero-eyebrow-row) { font-size: 12px !important; font-weight: 700 !important; letter-spacing: 0.14em !important; text-transform: uppercase; } /* ── CONTENT CONTAINERS ─────────────────────────────────── */ /* Cap content at 1200px even on 4K monitors */ body.premium .wrap, body.premium .sec-inner, body.premium .container, body.premium .hero-wrap, body.premium [class*="__inner"] { max-width: var(--container); margin-left: auto; margin-right: auto; } /* ── BUTTONS (premium polish) ─────────────────────────── */ body.premium .btn-primary, body.premium .btn-ghost, body.premium .btn-blue, body.premium .btn-secondary { transition: transform 0.2s var(--ease-out), box-shadow 0.3s var(--ease-out), background-color 0.2s var(--ease-out) !important; font-feature-settings: 'kern' 1; } body.premium .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 24px -6px rgba(194,65,12,.35), 0 4px 8px -2px rgba(194,65,12,.25) !important; } body.premium .btn-ghost:hover { transform: translateY(-1px); } /* Active state — press down */ body.premium .btn-primary:active, body.premium .btn-ghost:active { transform: translateY(0) scale(0.98); transition-duration: 0.1s !important; } /* ── CARDS (depth system) ──────────────────────────────── */ body.premium .golden-v2, body.premium .pay-capabilities__card, body.premium .diff-card, body.premium .tier1-card, body.premium .tier2-card, body.premium .tier3-card, body.premium .feature-card, body.premium .ta-feat-card, body.premium .peo-team-card, body.premium .wc-depth-card, body.premium .coemploy-card { box-shadow: var(--shadow-md) !important; transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out) !important; } body.premium .golden-v2:hover, body.premium .diff-card:hover, body.premium .tier1-card:hover, body.premium .tier2-card:hover, body.premium .tier3-card:hover, body.premium .feature-card:hover, body.premium .ta-feat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg) !important; } /* ── SECTION SPACING (8px rhythm) ──────────────────────── */ body.premium section.sec, body.premium .sec { padding: var(--sp-9) var(--sp-6) !important; /* 96px vertical, 32px horizontal */ } @media (max-width: 768px) { body.premium section.sec, body.premium .sec { padding: var(--sp-8) var(--sp-5) !important; /* 64px / 24px */ } } /* ── REVEAL ANIMATIONS (smoother) ──────────────────────── */ body.premium .reveal { transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out) !important; } /* ── GRADIENT TEXT (refined) ──────────────────────────── */ body.premium .grad-word, body.premium .gtxt { background: linear-gradient(135deg, #F7D44C 0%, #F07128 22%, #E8125C 50%, #7B21A2 78%, #1779B8 100%) !important; background-size: 200% 100% !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important; font-variant-numeric: normal !important; } /* Hero cycle word + glow text: natural-size full gradient (matches HTML reference). NO background-size 200% since the animation doesn't apply here — 200% would clip the gradient to the gold/orange left half only. */ body.premium .hero-cycle-word, body.premium .glow-text { background: linear-gradient(135deg, #F7D44C 0%, #F07128 22%, #E8125C 50%, #7B21A2 78%, #1779B8 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; color: transparent !important; -webkit-text-fill-color: transparent !important; font-variant-numeric: normal !important; } @media (prefers-reduced-motion: no-preference) { body.premium .grad-word, body.premium .gtxt { animation: premium-grad-flow 10s ease-in-out infinite !important; } } @keyframes premium-grad-flow { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* ── ULTRAWIDE HANDLING (2560+) ──────────────────────── */ /* On very wide screens, add full-width decorative background but keep content centered. Prevents sprawl. */ @media (min-width: 1800px) { body.premium section.sec, body.premium .sec { padding-left: 0 !important; padding-right: 0 !important; } body.premium .wrap, body.premium .sec-inner, body.premium .container { max-width: 1200px; padding-left: var(--sp-6); padding-right: var(--sp-6); } } /* ── TRUST CHIPS / PILLS (polish) ──────────────────────── */ body.premium .trust-chip, body.premium .trust-chip-c, body.premium [class*="chip"] { transition: background-color 0.2s var(--ease-out), border-color 0.2s var(--ease-out) !important; } /* ── FORM INPUTS (premium focus states) ────────────────── */ body.premium input[type="text"], body.premium input[type="email"], body.premium input[type="tel"], body.premium textarea, body.premium select { transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out) !important; } body.premium input:focus-visible, body.premium textarea:focus-visible, body.premium select:focus-visible { outline: none !important; border-color: var(--blue) !important; box-shadow: 0 0 0 3px rgba(20,121,163,.15) !important; } /* ── TABLE / COMPARISON REFINEMENTS ────────────────────── */ body.premium .comparison-vshr { box-shadow: var(--shadow-navy) !important; } /* ── SCROLL PROGRESS BAR ─────────────────────────────── */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--blue), var(--orange)); z-index: 9999; transition: width 0.15s linear; pointer-events: none; } /* ── CURSOR GLOW ─────────────────────────────────────── */ .cursor-glow { position: absolute; width: 400px; height: 400px; border-radius: 50%; background: radial-gradient(circle, rgba(20,121,163,0.08) 0%, transparent 70%); pointer-events: none; transform: translate(-50%, -50%); transition: opacity 0.3s; z-index: 1; } /* ── REDUCE MOTION RESPECT ───────────────────────────── */ @media (prefers-reduced-motion: reduce) { body.premium *, body.premium *::before, body.premium *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }