/* ============================================================================ * PuttScores Marketing Design System (ps-marketing) * ============================================================================ * Shared CSS variables + utility classes for public-facing pages. * Source of truth for the light aesthetic shipped on the landing rebuild. * Pages that pull this in: /guides (this commit). Future opt-ins: * /about, /changelog, /roadmap, /terms, /privacy. * * Usage: * * ... * * Conventions: * - All variables prefixed --ps-* to avoid collision with existing CSS * (admin dashboards, manage, scorecard all have their own variable * namespaces and must not be affected by this file). * - All utility classes prefixed .ps-* for the same reason. * - This file is OPT-IN — no global selectors that affect pages * that don't include it. * ============================================================================ */ :root { /* Brand */ --ps-brand: #10b981; /* emerald-500 — primary CTA, accent */ --ps-brand-hover: #059669; /* emerald-600 */ --ps-brand-dark: #047857; /* emerald-700 — text on light brand-soft */ --ps-brand-soft: #ECFDF5; /* emerald-50 — chip/tag bg, icon slot bg */ --ps-brand-border: #A7F3D0; /* emerald-200 */ /* Surfaces */ --ps-bg: #ffffff; --ps-bg-soft: #F8FAFC; /* slate-50 — alt section bg, sidebar, footer */ --ps-bg-muted: #F1F5F9; /* slate-100 — chip/tab hover bg */ --ps-surface: #ffffff; /* card bg */ --ps-surface-hover: #FAFBFC; /* row hover */ /* Text */ --ps-text: #0F172A; /* slate-900 — headings, primary */ --ps-text-muted: #475569; /* slate-600 — body copy */ --ps-text-subtle: #64748B; /* slate-500 — meta, labels */ --ps-text-soft: #94A3B8; /* slate-400 — placeholder, deep meta */ /* Borders */ --ps-border: #E2E8F0; /* slate-200 — default card/divider */ --ps-border-strong: #CBD5E1; /* slate-300 — input default */ --ps-border-hover: #94A3B8; /* slate-400 — input hover, card hover */ /* Semantic */ --ps-success-bg: #ECFDF5; --ps-success-text: #065F46; --ps-success-border: #A7F3D0; --ps-error-bg: #FEF2F2; --ps-error-text: #991B1B; --ps-error-border: #FECACA; --ps-warn-bg: #FEF3C7; --ps-warn-text: #92400E; --ps-warn-border: #FDE68A; --ps-info-bg: #EFF6FF; --ps-info-text: #1E40AF; --ps-info-border: #BFDBFE; /* Code (dark on light page — best syntax-highlight readability) */ --ps-code-bg: #0F172A; --ps-code-text: #E2E8F0; --ps-code-inline-bg: #F1F5F9; --ps-code-inline-text:#0F172A; /* Typography */ --ps-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --ps-font-display: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --ps-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Radii */ --ps-radius-sm: 0.5rem; --ps-radius: 0.75rem; --ps-radius-lg: 1rem; --ps-radius-xl: 1.5rem; --ps-radius-pill: 9999px; /* Shadows (subtle, matching landing) */ --ps-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04); --ps-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04); --ps-shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06); --ps-shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.08); /* Layout */ --ps-container: 1280px; /* matches max-w-7xl */ --ps-container-narrow: 880px; /* docs/article width */ --ps-nav-h: 64px; /* Motion */ --ps-ease: cubic-bezier(0.4, 0, 0.2, 1); --ps-dur-fast: 150ms; --ps-dur: 200ms; --ps-dur-slow: 300ms; } /* ---------------------------------------------------------------------------- * BASE * ---------------------------------------------------------------------------- * Opt-in via . Does not affect bodies without it. */ body.ps-marketing { margin: 0; font-family: var(--ps-font); background: var(--ps-bg); color: var(--ps-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; line-height: 1.5; } body.ps-marketing a { color: inherit; text-decoration: none; } body.ps-marketing img { max-width: 100%; height: auto; } /* ---------------------------------------------------------------------------- * LAYOUT * ---------------------------------------------------------------------------- */ .ps-container { width: 100%; max-width: var(--ps-container); margin: 0 auto; padding: 0 1rem; } @media (min-width: 640px) { .ps-container { padding: 0 1.5rem; } } @media (min-width: 1024px) { .ps-container { padding: 0 2rem; } } .ps-container--narrow { max-width: var(--ps-container-narrow); } .ps-section { padding: 5rem 0; } .ps-section--tight { padding: 3rem 0; } .ps-section--lg { padding: 6rem 0; } .ps-section--soft { background: var(--ps-bg-soft); border-top: 1px solid var(--ps-border); border-bottom: 1px solid var(--ps-border); } /* ---------------------------------------------------------------------------- * HEADER (sticky, white, backdrop-blur) * ---------------------------------------------------------------------------- */ .ps-header { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--ps-border); } .ps-header__inner { height: var(--ps-nav-h); display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .ps-header__brand { display: flex; align-items: center; gap: 0.5rem; } .ps-header__brand img { height: 32px; width: auto; } .ps-header__nav { display: none; gap: 2rem; font-size: 0.875rem; font-weight: 500; color: var(--ps-text-muted); } .ps-header__nav a:hover { color: var(--ps-text); } @media (min-width: 768px) { .ps-header__nav { display: flex; } } .ps-header__actions { display: flex; align-items: center; gap: 0.75rem; } /* ---------------------------------------------------------------------------- * BUTTONS * ---------------------------------------------------------------------------- */ .ps-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.625rem 1.25rem; border: 1px solid transparent; border-radius: var(--ps-radius-pill); font-family: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: all var(--ps-dur) var(--ps-ease); text-decoration: none; line-height: 1.25; white-space: nowrap; } .ps-btn--primary { background: var(--ps-brand); color: #ffffff; box-shadow: var(--ps-shadow-sm); } .ps-btn--primary:hover { background: var(--ps-brand-hover); box-shadow: var(--ps-shadow); } .ps-btn--ghost { background: var(--ps-bg); color: var(--ps-text); border-color: var(--ps-border-strong); } .ps-btn--ghost:hover { background: var(--ps-bg-soft); border-color: var(--ps-border-hover); } .ps-btn--link { background: transparent; color: var(--ps-text-muted); padding: 0.5rem 0.75rem; } .ps-btn--link:hover { color: var(--ps-text); } .ps-btn--lg { padding: 0.875rem 1.75rem; font-size: 0.9375rem; } .ps-btn--sm { padding: 0.4rem 0.875rem; font-size: 0.8125rem; } /* ---------------------------------------------------------------------------- * TYPOGRAPHY HELPERS * ---------------------------------------------------------------------------- */ .ps-eyebrow { display: inline-block; font-size: 0.75rem; font-weight: 600; color: var(--ps-brand-hover); text-transform: uppercase; letter-spacing: 0.08em; } .ps-heading { font-family: var(--ps-font-display); color: var(--ps-text); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin: 0; } .ps-heading--xl { font-size: clamp(2rem, 5vw, 3.5rem); } .ps-heading--lg { font-size: clamp(1.75rem, 4vw, 2.5rem); } .ps-heading--md { font-size: 1.5rem; line-height: 1.25; } .ps-heading--sm { font-size: 1.125rem; line-height: 1.4; font-weight: 600; } .ps-lead { font-size: 1.0625rem; color: var(--ps-text-muted); line-height: 1.6; margin: 1rem 0 0; } .ps-muted { color: var(--ps-text-muted); } .ps-subtle { color: var(--ps-text-subtle); } /* ---------------------------------------------------------------------------- * CARDS * ---------------------------------------------------------------------------- */ .ps-card { background: var(--ps-surface); border: 1px solid var(--ps-border); border-radius: var(--ps-radius-lg); padding: 1.5rem; transition: transform var(--ps-dur) var(--ps-ease), box-shadow var(--ps-dur) var(--ps-ease), border-color var(--ps-dur) var(--ps-ease); } .ps-card--hover:hover { transform: translateY(-2px); box-shadow: var(--ps-shadow-lg); border-color: var(--ps-border-hover); } .ps-card__icon { width: 3rem; height: 3rem; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--ps-radius); background: var(--ps-brand-soft); color: var(--ps-brand-dark); font-size: 1.25rem; margin-bottom: 1rem; } /* ---------------------------------------------------------------------------- * TAGS / CHIPS / BADGES * ---------------------------------------------------------------------------- */ .ps-tag { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25rem 0.625rem; background: var(--ps-bg-muted); color: var(--ps-text-muted); font-size: 0.75rem; font-weight: 600; border-radius: var(--ps-radius-pill); border: 1px solid var(--ps-border); } .ps-tag--brand { background: var(--ps-brand-soft); color: var(--ps-brand-dark); border-color: var(--ps-brand-border); } .ps-tag--info { background: var(--ps-info-bg); color: var(--ps-info-text); border-color: var(--ps-info-border); } .ps-tag--warn { background: var(--ps-warn-bg); color: var(--ps-warn-text); border-color: var(--ps-warn-border); } .ps-tag--success { background: var(--ps-success-bg); color: var(--ps-success-text); border-color: var(--ps-success-border); } .ps-tag--error { background: var(--ps-error-bg); color: var(--ps-error-text); border-color: var(--ps-error-border); } /* ---------------------------------------------------------------------------- * INPUTS (for future use — auth, forms in guides, etc.) * ---------------------------------------------------------------------------- */ .ps-input { width: 100%; padding: 0.75rem 1rem; background: var(--ps-bg); border: 1px solid var(--ps-border-strong); border-radius: var(--ps-radius-sm); color: var(--ps-text); font-family: inherit; font-size: 0.9375rem; transition: border-color var(--ps-dur), box-shadow var(--ps-dur); } .ps-input:hover { border-color: var(--ps-border-hover); } .ps-input:focus { outline: none; border-color: var(--ps-brand); box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18); } .ps-input::placeholder { color: var(--ps-text-soft); } .ps-label { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--ps-text-muted); margin-bottom: 0.375rem; } /* ---------------------------------------------------------------------------- * ALERTS / CALLOUTS * ---------------------------------------------------------------------------- */ .ps-callout { padding: 1rem 1.25rem; border-radius: var(--ps-radius); border-left: 3px solid var(--ps-border-strong); background: var(--ps-bg-soft); color: var(--ps-text); } .ps-callout--brand { border-color: var(--ps-brand); background: var(--ps-brand-soft); } .ps-callout--info { border-color: var(--ps-info-text); background: var(--ps-info-bg); color: var(--ps-info-text); } .ps-callout--warn { border-color: var(--ps-warn-text); background: var(--ps-warn-bg); color: var(--ps-warn-text); } .ps-callout--error { border-color: var(--ps-error-text); background: var(--ps-error-bg); color: var(--ps-error-text); } .ps-callout--success { border-color: var(--ps-success-text); background: var(--ps-success-bg); color: var(--ps-success-text); } /* ---------------------------------------------------------------------------- * CODE * ---------------------------------------------------------------------------- */ .ps-code-inline { font-family: var(--ps-font-mono); font-size: 0.875em; background: var(--ps-code-inline-bg); color: var(--ps-code-inline-text); padding: 0.125rem 0.375rem; border-radius: 0.25rem; } .ps-code-block { font-family: var(--ps-font-mono); background: var(--ps-code-bg); color: var(--ps-code-text); padding: 1rem 1.25rem; border-radius: var(--ps-radius); overflow-x: auto; font-size: 0.875rem; line-height: 1.6; } /* ---------------------------------------------------------------------------- * FOOTER (slim docs-style) * ---------------------------------------------------------------------------- */ .ps-footer { background: var(--ps-bg-soft); border-top: 1px solid var(--ps-border); padding: 1.5rem 0; color: var(--ps-text-subtle); font-size: 0.8125rem; } .ps-footer__inner { display: flex; flex-direction: column; gap: 0.75rem; align-items: center; justify-content: space-between; } .ps-footer__links { display: flex; gap: 1.25rem; flex-wrap: wrap; justify-content: center; } .ps-footer__links a:hover { color: var(--ps-text); } @media (min-width: 768px) { .ps-footer__inner { flex-direction: row; } } /* ---------------------------------------------------------------------------- * PROSE — legal docs, changelog entries, long-form copy * Apply via

or

. Caps the * column at a readable width and styles every common HTML element so * authors can just write semantic HTML without per-element classes. * ---------------------------------------------------------------------------- */ .ps-prose { color: var(--ps-text); line-height: 1.7; font-size: 1rem; } .ps-prose h1 { font-family: var(--ps-font-display); font-size: 2.25rem; font-weight: 800; letter-spacing: -0.02em; color: var(--ps-text); margin: 0 0 1rem; line-height: 1.15; } .ps-prose h2 { font-family: var(--ps-font-display); font-size: 1.5rem; font-weight: 700; color: var(--ps-text); margin: 2.5rem 0 1rem; line-height: 1.25; } .ps-prose h3 { font-size: 1.125rem; font-weight: 600; color: var(--ps-text); margin: 1.75rem 0 0.75rem; } .ps-prose p { margin: 0 0 1rem; color: var(--ps-text-muted); } .ps-prose ul, .ps-prose ol { margin: 0 0 1rem; padding-left: 1.5rem; color: var(--ps-text-muted); } .ps-prose li { margin-bottom: 0.5rem; line-height: 1.65; } .ps-prose li strong { color: var(--ps-text); } .ps-prose hr { border: 0; border-top: 1px solid var(--ps-border); margin: 2rem 0; } .ps-prose a, .ps-link { color: var(--ps-brand-hover); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--ps-dur); } .ps-prose a:hover, .ps-link:hover { border-bottom-color: var(--ps-brand-hover); } .ps-prose strong { color: var(--ps-text); font-weight: 600; } .ps-prose code { font-family: var(--ps-font-mono); font-size: 0.875em; background: var(--ps-code-inline-bg); color: var(--ps-code-inline-text); padding: 0.125rem 0.375rem; border-radius: 0.25rem; } /* Plain-text muted variant used in legal-doc subtitles */ .ps-prose .text-muted, .ps-text-muted-utility { color: var(--ps-text-subtle); font-size: 0.875rem; } /* ---------------------------------------------------------------------------- * MOTION / RESPECT REDUCED-MOTION * ---------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { body.ps-marketing *, body.ps-marketing *::before, body.ps-marketing *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }