/* ============================================================================= PlugMySite — Homepage Design System (design tokens) ----------------------------------------------------------------------------- Source-of-truth token layer for the homepage overhaul (Wave 2). Green-led to match the established storefront brand (forest #0b3b2c → mid #15803d → lime #84cc16). A warm coral/amber pair exists ONLY as a sparing highlight accent (badges, "new" pips) — never as a primary CTA fill. This file is ADDITIVE: every token is a new `--pms-*` custom property, so it cannot clobber the existing `--accent / --gradient / --bg` variables the rest of the page uses. Scope: component helpers are namespaced under `.pms-homepage` (set on ), so linking this file from another page would not restyle that page. The `:root` block only DEFINES properties; they take effect only where referenced. Linked from plugmysite-platform.html . Served locally by express.static(__dirname) and in production by an explicit sendFile route in server.js (Vercel's nft tracer does not follow express.static). ============================================================================= */ :root { /* ---- Brand ramp (green) ------------------------------------------------ */ --pms-brand-950: #08291f; --pms-brand-900: #0b3b2c; /* deep forest — primary brand */ --pms-brand-800: #0f5238; --pms-brand-700: #15803d; /* mid green */ --pms-brand-600: #1d9e6f; --pms-brand-500: #22b673; --pms-brand-lime: #84cc16; /* lime — DECORATIVE only (halos, art), never text on light */ /* ---- Warm highlight accent (use sparingly) ----------------------------- */ --pms-coral: #f97316; --pms-amber: #f59e0b; /* ---- Surfaces ---------------------------------------------------------- */ --pms-surface-0: #f6f7f3; /* page bg (warm off-white) */ --pms-surface-1: #ffffff; /* solid card */ --pms-surface-2: #fbfbf8; /* subtle warm tint */ --pms-surface-ink: #0b1f17; /* dark surface (POS-style sections) */ /* ---- Ink (text) -------------------------------------------------------- */ --pms-ink-primary: #0e1a14; --pms-ink-secondary: #3a4a44; --pms-ink-muted: #5f6b6a; --pms-ink-inverse: #ffffff; /* ---- Borders ----------------------------------------------------------- */ --pms-border: #e5e7eb; --pms-border-strong: #d6dad2; --pms-border-glass: rgba(11, 59, 44, 0.12); /* ---- Semantic ---------------------------------------------------------- */ --pms-success: #15803d; --pms-success-text: #064e3b; --pms-warn: #d97706; --pms-danger: #dc2626; /* ---- Gradients --------------------------------------------------------- */ --pms-gradient-brand: linear-gradient(135deg, #0b3b2c 0%, #15803d 100%); --pms-gradient-brand-deep: linear-gradient(135deg, #08291f 0%, #134e3a 60%, #15803d 100%); --pms-gradient-glow: linear-gradient(135deg, #15803d 0%, #84cc16 100%); /* hero art only */ --pms-gradient-warm: linear-gradient(135deg, #f97316 0%, #f59e0b 100%); /* tiny highlights only */ --pms-gradient-soft: linear-gradient(135deg, #eaf3e3 0%, #d9eccc 100%); --pms-gradient-mesh: radial-gradient(60% 55% at 78% 18%, rgba(132,204,22,0.18) 0%, transparent 60%), radial-gradient(55% 50% at 12% 30%, rgba(21,128,61,0.16) 0%, transparent 58%), radial-gradient(45% 45% at 50% 100%, rgba(11,59,44,0.10) 0%, transparent 60%); /* ---- Typography -------------------------------------------------------- */ /* Display = Outfit (geometric, editorial). Body = Inter/system for legibility. The pairing is the single biggest lever against the "Inter-everywhere" look. */ --pms-font-display: "Outfit", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --pms-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --pms-fs-xs: 0.75rem; /* 12 */ --pms-fs-sm: 0.875rem; /* 14 */ --pms-fs-base: clamp(1rem, 1.4vw, 1.125rem); /* 16 → 18 body */ --pms-fs-lg: 1.25rem; /* 20 */ --pms-fs-xl: 1.5rem; /* 24 */ --pms-fs-2xl: clamp(1.625rem, 2.6vw, 2.125rem); /* section h2 26 → 34 */ --pms-fs-3xl: clamp(2rem, 3.6vw, 2.75rem); --pms-fs-display: clamp(3rem, 7vw, 6rem); /* hero headline — make it commit */ --pms-fs-section: clamp(1.9rem, 4vw, 3.25rem); /* section h2 — bigger, confident */ --pms-lh-tight: 1.08; --pms-lh-snug: 1.25; --pms-lh-normal: 1.6; --pms-fw-regular: 400; --pms-fw-medium: 500; --pms-fw-semibold: 600; --pms-fw-bold: 700; --pms-fw-extrabold: 800; --pms-fw-black: 900; --pms-tracking-tight: -0.02em; --pms-tracking-tighter: -0.04em; /* display headlines — hand-tuned, premium */ --pms-tracking-eyebrow: 0.16em; /* uppercase section labels */ --pms-tracking-wide: 0.06em; /* ---- Spacing scale (4px base) ----------------------------------------- */ --pms-space-1: 4px; --pms-space-2: 8px; --pms-space-3: 12px; --pms-space-4: 16px; --pms-space-5: 20px; --pms-space-6: 24px; --pms-space-8: 32px; --pms-space-10: 40px; --pms-space-12: 48px; --pms-space-16: 64px; --pms-space-section: clamp(64px, 8vw, 128px); /* major-section padding-block */ /* ---- Radius ------------------------------------------------------------ */ --pms-radius-sm: 8px; --pms-radius-md: 12px; --pms-radius-lg: 18px; --pms-radius-xl: 24px; --pms-radius-full: 999px; /* ---- Shadows (soft, layered) ------------------------------------------ */ --pms-shadow-sm: 0 1px 2px rgba(11, 59, 44, 0.05), 0 1px 3px rgba(11, 59, 44, 0.04); --pms-shadow-md: 0 4px 12px rgba(11, 59, 44, 0.07), 0 2px 6px rgba(11, 59, 44, 0.05); --pms-shadow-lg: 0 14px 34px rgba(11, 59, 44, 0.10), 0 4px 10px rgba(11, 59, 44, 0.06); --pms-shadow-xl: 0 30px 70px rgba(11, 59, 44, 0.16), 0 10px 24px rgba(11, 59, 44, 0.08); --pms-glow-brand: 0 10px 34px rgba(11, 59, 44, 0.22); --pms-glow-lime: 0 0 0 1px rgba(132, 204, 22, 0.25), 0 12px 30px rgba(132, 204, 22, 0.20); /* ---- Motion ------------------------------------------------------------ */ --pms-ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); --pms-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --pms-duration-fast: 150ms; --pms-duration-normal: 280ms; --pms-duration-slow: 600ms; } /* ============================================================================= Homepage component helpers (scoped under .pms-homepage) ============================================================================= */ .pms-homepage { scroll-behavior: smooth; } /* Section rhythm — generous, breathing whitespace */ .pms-section { padding-block: var(--pms-space-section); } .pms-section--tight { padding-block: clamp(40px, 5vw, 72px); } /* Soft gradient divider (replaces hard

) */ .pms-divider { height: 1px; border: 0; max-width: 1100px; margin: 0 auto; background: linear-gradient(90deg, transparent, var(--pms-border-strong) 18%, var(--pms-border-strong) 82%, transparent); } /* NOTE: reveal-on-scroll (.pms-reveal / .in) is owned by the existing inline system near the bottom of plugmysite-platform.html — do NOT redefine it here, or the two definitions conflict. This file only supplies the static tokens and the non-reveal component helpers below. */ /* Card lift on hover */ .pms-lift { transition: transform var(--pms-duration-normal) var(--pms-ease-out-quart), box-shadow var(--pms-duration-normal) var(--pms-ease-out-quart), border-color var(--pms-duration-normal) var(--pms-ease-out-quart); } .pms-lift:hover { transform: translateY(-4px); box-shadow: var(--pms-shadow-lg); } /* Button micro-interactions */ .pms-cta { transition: transform var(--pms-duration-fast) var(--pms-ease-out-quart), box-shadow var(--pms-duration-normal) var(--pms-ease-out-quart); } .pms-cta:hover { transform: scale(1.02); } .pms-cta--brand { background: var(--pms-gradient-brand); color: var(--pms-ink-inverse); box-shadow: var(--pms-glow-brand); } .pms-cta--brand:hover { box-shadow: 0 16px 44px rgba(11, 59, 44, 0.30); } .pms-cta--ghost { background: var(--pms-surface-1); color: var(--pms-ink-primary); border: 1.5px solid var(--pms-border-strong); } .pms-cta--ghost:hover { border-color: var(--pms-brand-900); background: var(--pms-surface-2); box-shadow: var(--pms-shadow-md); } /* Step number medallion (How it works) */ .pms-step-num { width: 44px; height: 44px; border-radius: var(--pms-radius-full); background: var(--pms-gradient-brand); color: #fff; display: grid; place-items: center; font-weight: var(--pms-fw-black); font-size: 18px; box-shadow: var(--pms-glow-brand); } @media (prefers-reduced-motion: reduce) { .pms-homepage { scroll-behavior: auto; } .pms-lift, .pms-cta { transition: none !important; } .pms-lift:hover, .pms-cta:hover { transform: none !important; } } /* ============================================================================= V3 TYPOGRAPHY LAYER — Fortune-500 type scale (Wave 3 redesign) ----------------------------------------------------------------------------- Scoped under .pms-homepage so it outranks the page's later inline base rules (the inline