/** * PrintifySign — SaaS Chrome Design Tokens (B1 · S1) * * File: assets/inspiration/saas-tokens.css * Phase: B1 — Premium Mobile-First SaaS Chrome * Status: NEW file. Additive token layer. Pure :root declarations. * * ─── PURPOSE ───────────────────────────────────────────────────────────── * Extends the existing landing-tokens.css (--psd-l-* namespace) with the * token set required for premium mobile-first SaaS chrome: elevation/glass * surfaces, bottom-sheet + sticky-rail geometry, extended motion, thumb-zone * safe-areas, trust components, and loading states. * * This file DOES NOT redefine any token already declared in landing-tokens.css. * Every value here is either a new token or a composition built on existing * --psd-l-* tokens. The base file remains the single source of truth for * color, type, spacing, and core motion; this file layers SaaS chrome on top. * * ─── LOAD ORDER (required) ─────────────────────────────────────────────── * Enqueue AFTER psd-inspiration-landing-tokens so cascade resolves cleanly: * * wp_enqueue_style( * 'psd-saas-tokens', * PSD_PLUGIN_URL . 'assets/inspiration/saas-tokens.css', * array( 'psd-inspiration-landing-tokens' ), // dependency = base tokens * PSD_VERSION * ); * * ─── SCOPE (same contract as base) ─────────────────────────────────────── * - Only :root { --token: value; } declarations. * - No selectors targeting body, html, or elements. * - No @media / @supports. * - New namespace segment: --psd-s-* (s = SaaS chrome). Kept distinct from * --psd-l-* so provenance is always readable and rollback is trivial. * * ─── ROLLBACK ──────────────────────────────────────────────────────────── * Delete this file + its wp_enqueue_style call. No base token is touched; * nothing else references --psd-s-* unless S2+ layers opt in. */ :root { /* ═══════════════════════════════════════════════════════════════════ ELEVATION & GLASS SURFACES Floating/blurred surfaces for app-shell chrome, floating controls, and glass cards. Blur values paired with translucent fills so the same token drives both backdrop-filter and background. ═══════════════════════════════════════════════════════════════════ */ /* Blur strengths for backdrop-filter */ --psd-s-blur-sm: 8px; --psd-s-blur-md: 16px; --psd-s-blur-lg: 24px; /* Glass fills — light context (over paper) */ --psd-s-glass-light: rgba(250, 249, 247, 0.72); --psd-s-glass-light-firm: rgba(250, 249, 247, 0.88); --psd-s-glass-light-hair: rgba(255, 255, 255, 0.55); /* Glass fills — dark context (over ink / immersive surfaces) */ --psd-s-glass-dark: rgba(10, 10, 10, 0.55); --psd-s-glass-dark-firm: rgba(10, 10, 10, 0.72); /* Glass hairline borders — sit on top of glass fills */ --psd-s-glass-border-light: rgba(10, 10, 10, 0.08); --psd-s-glass-border-dark: rgba(255, 255, 255, 0.12); /* Elevation ramp — extends the two base --psd-l-shadow-card tokens. Tuned for floating chrome that must read above content, not sit in it. */ --psd-s-elev-1: 0 1px 2px rgba(10,10,10,0.05), 0 2px 8px rgba(10,10,10,0.05); --psd-s-elev-2: 0 2px 6px rgba(10,10,10,0.07), 0 10px 28px rgba(10,10,10,0.09); --psd-s-elev-3: 0 6px 16px rgba(10,10,10,0.10), 0 22px 48px rgba(10,10,10,0.14); --psd-s-elev-4: 0 10px 28px rgba(10,10,10,0.14), 0 34px 70px rgba(10,10,10,0.20); /* Floating-control shadow — softer, wider spread for detached controls */ --psd-s-elev-float: 0 4px 12px rgba(10,10,10,0.10), 0 16px 40px rgba(10,10,10,0.16); /* Glow ring reusing the brand gold glow already in base tokens */ --psd-s-ring-brand: 0 0 0 3px var(--psd-l-gold-glow-soft, rgba(212,169,96,0.25)); --psd-s-ring-focus: 0 0 0 3px rgba(77, 212, 255, 0.45); /* ═══════════════════════════════════════════════════════════════════ BOTTOM SHEET Geometry + scrim + spring for mobile bottom-sheet interactions. ═══════════════════════════════════════════════════════════════════ */ --psd-s-sheet-radius: 20px; /* top corners */ --psd-s-sheet-max-h: 88vh; /* never full-screen */ --psd-s-sheet-min-h: 180px; --psd-s-sheet-handle-w: 36px; --psd-s-sheet-handle-h: 4px; --psd-s-sheet-pad: var(--psd-l-space-5, 24px); --psd-s-sheet-gap: var(--psd-l-space-4, 16px); --psd-s-sheet-fill: var(--psd-l-paper, #faf9f7); --psd-s-sheet-handle: rgba(10, 10, 10, 0.18); --psd-s-sheet-shadow: 0 -8px 24px rgba(10,10,10,0.12), 0 -2px 8px rgba(10,10,10,0.08); --psd-s-scrim: rgba(10, 10, 10, 0.42); --psd-s-scrim-soft: rgba(10, 10, 10, 0.24); /* ═══════════════════════════════════════════════════════════════════ STICKY ACTION AREAS / BOTTOM RAIL Persistent thumb-zone action bars (CTA rails, editor action rail). ═══════════════════════════════════════════════════════════════════ */ --psd-s-rail-h: 64px; /* rail content height */ --psd-s-rail-pad-x: var(--psd-l-space-4, 16px); --psd-s-rail-pad-y: var(--psd-l-space-3, 12px); --psd-s-rail-gap: var(--psd-l-space-3, 12px); --psd-s-rail-fill: var(--psd-s-glass-light-firm, rgba(250,249,247,0.88)); --psd-s-rail-fill-dark: var(--psd-s-glass-dark-firm, rgba(10,10,10,0.72)); --psd-s-rail-border: var(--psd-l-border-light, rgba(10,10,10,0.06)); --psd-s-rail-shadow: 0 -4px 16px rgba(10,10,10,0.08); --psd-s-rail-z: 60; /* above nav (--psd-l-z-nav 50) */ /* ═══════════════════════════════════════════════════════════════════ THUMB ZONE / TOUCH TARGETS / SAFE AREAS Mobile-first ergonomics. Min target sizes + iOS safe-area insets. ═══════════════════════════════════════════════════════════════════ */ --psd-s-touch-min: 44px; /* WCAG / Apple HIG min */ --psd-s-touch-comfort: 52px; --psd-s-tap-gap: var(--psd-l-space-2, 8px); /* Safe-area insets — fall back to 0 where env() unsupported */ --psd-s-safe-top: env(safe-area-inset-top, 0px); --psd-s-safe-bottom: env(safe-area-inset-bottom, 0px); --psd-s-safe-left: env(safe-area-inset-left, 0px); --psd-s-safe-right: env(safe-area-inset-right, 0px); /* Composite: bottom rail total reserve incl. safe area */ --psd-s-rail-reserve: calc(var(--psd-s-rail-h) + var(--psd-s-rail-pad-y) * 2 + var(--psd-s-safe-bottom)); /* ═══════════════════════════════════════════════════════════════════ MOTION — extended for SaaS interactions Base file owns fast/medium/slow/hero + 3 easings. These add spring & sheet-specific timings without redefining base tokens. ═══════════════════════════════════════════════════════════════════ */ --psd-s-ease-spring: cubic-bezier(0.22, 1, 0.36, 1); /* overshoot-free spring */ --psd-s-ease-emphasis: cubic-bezier(0.2, 0, 0, 1); /* enter emphasis */ --psd-s-ease-exit: cubic-bezier(0.4, 0, 1, 1); /* accelerate out */ --psd-s-dur-instant: 120ms; --psd-s-dur-sheet: 360ms; /* sheet open/close */ --psd-s-dur-rail: 240ms; /* rail slide/fade */ --psd-s-dur-press: 90ms; /* tap feedback */ /* ═══════════════════════════════════════════════════════════════════ LOADING STATES Skeleton shimmer + spinner tokens. ═══════════════════════════════════════════════════════════════════ */ --psd-s-skeleton-base: rgba(10, 10, 10, 0.06); --psd-s-skeleton-sheen: rgba(10, 10, 10, 0.11); --psd-s-skeleton-radius: var(--psd-l-radius-md, 12px); --psd-s-skeleton-dur: 1400ms; --psd-s-spinner-track: rgba(10, 10, 10, 0.10); --psd-s-spinner-head: var(--psd-l-gold, #d4a960); --psd-s-spinner-size: 22px; --psd-s-spinner-weight: 2.5px; --psd-s-spinner-dur: 720ms; /* ═══════════════════════════════════════════════════════════════════ TRUST COMPONENTS Badges, assurance pills, secure-checkout markers. Positive/neutral semantic accents (base file only defines gold + reserved neons). ═══════════════════════════════════════════════════════════════════ */ --psd-s-trust-ink: var(--psd-l-text-secondary, #5c5950); --psd-s-trust-fill: var(--psd-l-paper-cool, #f5f4f0); --psd-s-trust-border: var(--psd-l-border-light-hover, rgba(10,10,10,0.12)); --psd-s-trust-dot: var(--psd-l-gold, #d4a960); --psd-s-success: #2e9e6b; --psd-s-success-soft: rgba(46, 158, 107, 0.12); --psd-s-info: #2f7fd4; --psd-s-info-soft: rgba(47, 127, 212, 0.12); --psd-s-badge-radius: var(--psd-l-radius-pill, 999px); --psd-s-badge-pad-x: var(--psd-l-space-3, 12px); --psd-s-badge-pad-y: 6px; --psd-s-badge-gap: 6px; /* ═══════════════════════════════════════════════════════════════════ APP SHELL / CHROME LAYOUT Header, floating-control offsets, content max-width for SaaS surfaces. ═══════════════════════════════════════════════════════════════════ */ --psd-s-shell-header-h: clamp(52px, 14vw, 64px); /* mobile-first header */ --psd-s-shell-max-w: var(--psd-l-content-max-w, 1440px); --psd-s-shell-gutter: var(--psd-l-section-gutter, clamp(20px, 4vw, 48px)); /* Floating-control offset from screen edges (respects safe area) */ --psd-s-float-offset: var(--psd-l-space-4, 16px); --psd-s-float-offset-bottom: calc(var(--psd-l-space-4, 16px) + var(--psd-s-safe-bottom)); /* Z-index scale for SaaS chrome — layered above base nav (50) */ --psd-s-z-shell: 45; --psd-s-z-float: 55; --psd-s-z-rail: 60; --psd-s-z-sheet-scrim: 70; --psd-s-z-sheet: 71; --psd-s-z-toast: 80; /* ═══════════════════════════════════════════════════════════════════ FILTER CHIPS / SWIPE SECTIONS (gallery chrome) ═══════════════════════════════════════════════════════════════════ */ --psd-s-chip-h: var(--psd-s-touch-min, 44px); --psd-s-chip-pad-x: var(--psd-l-space-4, 16px); --psd-s-chip-gap: var(--psd-l-space-2, 8px); --psd-s-chip-radius: var(--psd-l-radius-pill, 999px); --psd-s-chip-fill: var(--psd-l-paper-cool, #f5f4f0); --psd-s-chip-fill-active: var(--psd-l-ink, #0a0a0a); --psd-s-chip-ink: var(--psd-l-text-secondary, #5c5950); --psd-s-chip-ink-active: var(--psd-l-text-inverse, #f5f4f0); --psd-s-chip-border: var(--psd-l-border-light-hover, rgba(10,10,10,0.12)); /* Swipe/scroll-snap sections */ --psd-s-swipe-gap: var(--psd-l-space-4, 16px); --psd-s-swipe-peek: 12px; /* next-card peek */ --psd-s-swipe-pad-edge: var(--psd-l-section-gutter, clamp(20px, 4vw, 48px)); }