/* ════════════════════════════════════════════════════════════════════════ PetTrust.io — HEIRLOOM DESIGN SYSTEM 2.0 ──────────────────────────────────────────────────────────────────────── One shared token + component layer for every PetTrust.io surface. Loaded LAST in (after v2-skin.css / inline page styles) so equal- specificity Heirloom rules win the cascade. Additive only: nothing here removes or restyles existing page classes unless a rule below says so. Layers: 1. Design tokens (--hl-*) 5. Motion spec 2. Global hardening 6. Component classes (.hl-*) 3. Accessibility primitives 7. Page-targeted mobile fixes 4. Typography helpers 8. Reduced-motion kill switch ════════════════════════════════════════════════════════════════════════ */ /* ── 1. DESIGN TOKENS ─────────────────────────────────────────────────── */ :root { /* palette — warm parchment + gold + navy, dark-mode-ready structure */ --hl-cream: #fdfcfa; --hl-parchment: #f7f1e6; --hl-parchment-2: #f1e8d8; --hl-ink: #1a2433; --hl-ink-2: #435062; --hl-ink-3: #6a7585; --hl-navy: #0d1b2a; --hl-navy-2: #16283d; --hl-gold: #8a6f3e; --hl-gold-2: #a8874b; --hl-gold-3: #c9a96e; --hl-gold-4: #e9dcc2; --hl-gold-5: #f5edda; --hl-line: #eae3d6; --hl-line-2: #ddd3c0; --hl-success: #2d6a4f; --hl-success-bg: #e8f3ed; --hl-warn: #9a6a1b; --hl-warn-bg: #fbf3e2; --hl-danger: #9c3d31; --hl-danger-bg: #f9ece9; --hl-info: #2f5d7c; --hl-info-bg: #eaf1f6; /* spacing — 8pt grid */ --hl-s1: 4px; --hl-s2: 8px; --hl-s3: 12px; --hl-s4: 16px; --hl-s5: 24px; --hl-s6: 32px; --hl-s7: 48px; --hl-s8: 64px; --hl-s9: 96px; /* elevation ramp */ --hl-e0: none; --hl-e1: 0 1px 2px rgba(13, 27, 42, 0.05), 0 1px 6px -1px rgba(13, 27, 42, 0.06); --hl-e2: 0 6px 18px -6px rgba(13, 27, 42, 0.12), 0 2px 6px -2px rgba(13, 27, 42, 0.08); --hl-e3: 0 16px 40px -12px rgba(13, 27, 42, 0.2), 0 4px 12px -4px rgba(13, 27, 42, 0.1); --hl-e4: 0 32px 80px -20px rgba(13, 27, 42, 0.32), 0 8px 24px -8px rgba(13, 27, 42, 0.14); --hl-focus-ring: 0 0 0 4px rgba(176, 141, 79, 0.18); /* radii */ --hl-r-sm: 8px; --hl-r: 14px; --hl-r-lg: 20px; --hl-r-xl: 28px; --hl-r-pill: 999px; /* typography — third face (EB Garamond) reserved for legal-document text */ --hl-font-ui: 'Geist', system-ui, -apple-system, sans-serif; --hl-font-display: 'Instrument Serif', Georgia, serif; --hl-font-legal: 'EB Garamond', Georgia, serif; /* motion spec — 150/200/250ms ease-out micro-interactions */ --hl-dur-1: 150ms; --hl-dur-2: 200ms; --hl-dur-3: 250ms; --hl-ease: cubic-bezier(0.2, 0.8, 0.2, 1); /* z-index scale */ --hl-z-sticky: 60; --hl-z-fab: 90; --hl-z-sheet: 95; --hl-z-modal: 400; --hl-z-toast: 600; } /* ── 2. GLOBAL HARDENING ──────────────────────────────────────────────── */ body { overflow-x: clip; } img, video { max-width: 100%; height: auto; } button { font-family: inherit; } ::selection { background: rgba(201, 169, 110, 0.35); } /* ── 3. ACCESSIBILITY PRIMITIVES ──────────────────────────────────────── */ .hl-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .hl-skip-link { position: fixed; top: -60px; left: 16px; z-index: var(--hl-z-toast); background: var(--hl-navy); color: var(--hl-cream); padding: 10px 18px; border-radius: var(--hl-r-pill); font: 600 14px/1 var(--hl-font-ui); text-decoration: none; transition: top var(--hl-dur-2) var(--hl-ease); } .hl-skip-link:focus-visible { top: 12px; } /* ── 4. TYPOGRAPHY HELPERS ────────────────────────────────────────────── */ .hl-eyebrow { font: 600 12px/1.4 var(--hl-font-ui); letter-spacing: 0.22em; text-transform: uppercase; color: var(--hl-gold); } .hl-legal-doc { font-family: var(--hl-font-legal); font-size: 17px; line-height: 1.75; color: var(--hl-ink); background: var(--hl-cream); border: 1px solid var(--hl-line-2); border-radius: var(--hl-r-sm); box-shadow: var(--hl-e2); padding: var(--hl-s7) var(--hl-s6); } .hl-legal-doc h1, .hl-legal-doc h2, .hl-legal-doc h3 { font-family: var(--hl-font-legal); font-weight: 600; letter-spacing: 0.01em; } @media (max-width: 600px) { .hl-legal-doc { padding: var(--hl-s5) var(--hl-s4); } } /* ── 5. MOTION SPEC (defaults; kill switch in §8) ─────────────────────── */ @keyframes hl-fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes hl-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes hl-pop { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: none; } } @keyframes hl-skeleton-sheen { from { background-position: 200% 0; } to { background-position: -200% 0; } } .hl-enter { animation: hl-fade-up var(--hl-dur-3) var(--hl-ease) both; } /* ── 6. COMPONENT CLASSES ─────────────────────────────────────────────── */ /* buttons */ .hl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font: 600 16px/1 var(--hl-font-ui); border: none; border-radius: var(--hl-r-pill); cursor: pointer; text-decoration: none; padding: 16px 32px; transition: transform var(--hl-dur-1) var(--hl-ease), filter var(--hl-dur-1) var(--hl-ease), box-shadow var(--hl-dur-1) var(--hl-ease); } .hl-btn:active { transform: translateY(1px) scale(0.99); } .hl-btn--gold { background: linear-gradient(135deg, var(--hl-gold-2), var(--hl-gold)); color: #fff; box-shadow: 0 12px 28px -12px rgba(138, 111, 62, 0.55); } .hl-btn--gold:hover { filter: brightness(1.1); transform: translateY(-2px); } .hl-btn--ghost { background: #fff; color: var(--hl-ink); border: 1px solid var(--hl-line-2); } .hl-btn--ghost:hover { border-color: var(--hl-gold-2); color: var(--hl-gold); } .hl-btn--navy { background: var(--hl-navy); color: var(--hl-cream); } .hl-btn--navy:hover { background: var(--hl-navy-2); } .hl-btn--sm { padding: 11px 20px; font-size: 14px; } .hl-btn--lg { padding: 19px 40px; font-size: 17px; } .hl-btn--block { width: 100%; } .hl-btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; } /* cards */ .hl-card { background: #fff; border: 1px solid var(--hl-line); border-radius: var(--hl-r-lg); box-shadow: var(--hl-e1); padding: var(--hl-s5); transition: box-shadow var(--hl-dur-2) var(--hl-ease), transform var(--hl-dur-2) var(--hl-ease), border-color var(--hl-dur-2) var(--hl-ease); } .hl-card--lift:hover { box-shadow: var(--hl-e3); transform: translateY(-3px); border-color: var(--hl-gold-4); } .hl-card--parchment { background: var(--hl-parchment); border-color: var(--hl-line-2); } /* chips + badges */ .hl-chip { display: inline-flex; align-items: center; gap: 6px; font: 600 12px/1 var(--hl-font-ui); letter-spacing: 0.04em; padding: 6px 12px; border-radius: var(--hl-r-pill); background: var(--hl-gold-5); color: var(--hl-gold); border: 1px solid var(--hl-gold-4); } .hl-chip--success { background: var(--hl-success-bg); color: var(--hl-success); border-color: rgba(45, 106, 79, 0.25); } .hl-chip--warn { background: var(--hl-warn-bg); color: var(--hl-warn); border-color: rgba(154, 106, 27, 0.25); } /* form fields — floating label + inline validation */ .hl-field { position: relative; display: block; text-align: left; } .hl-field input, .hl-field textarea, .hl-field select { width: 100%; font: 400 16px/1.4 var(--hl-font-ui); color: var(--hl-ink); background: #fff; border: 1.5px solid var(--hl-line-2); border-radius: var(--hl-r); padding: 22px 16px 10px; outline: none; resize: vertical; transition: border-color var(--hl-dur-1) var(--hl-ease), box-shadow var(--hl-dur-1) var(--hl-ease); } .hl-field label { position: absolute; left: 17px; top: 16px; pointer-events: none; font: 400 15px/1 var(--hl-font-ui); color: var(--hl-ink-3); transform-origin: left top; transition: transform var(--hl-dur-1) var(--hl-ease), color var(--hl-dur-1) var(--hl-ease); } .hl-field input:focus, .hl-field textarea:focus, .hl-field select:focus { border-color: var(--hl-gold-2); box-shadow: var(--hl-focus-ring); } .hl-field input:focus ~ label, .hl-field input.has-value ~ label, .hl-field textarea:focus ~ label, .hl-field textarea.has-value ~ label { transform: translateY(-11px) scale(0.74); color: var(--hl-gold); font-weight: 600; letter-spacing: 0.02em; } .hl-field--error input, .hl-field--error textarea { border-color: var(--hl-danger); } .hl-field--error label { color: var(--hl-danger); } .hl-field-error { display: none; font: 500 12.5px/1.5 var(--hl-font-ui); color: var(--hl-danger); margin-top: 6px; } .hl-field--error .hl-field-error { display: block; animation: hl-fade-up var(--hl-dur-2) var(--hl-ease); } .hl-field--ok input, .hl-field--ok textarea { border-color: var(--hl-success); } /* modal (behavior wired by assets/components.js) */ .hl-modal-backdrop { position: fixed; inset: 0; z-index: var(--hl-z-modal); background: rgba(13, 27, 42, 0.55); backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; padding: 20px; } .hl-modal-backdrop.open { display: flex; animation: hl-fade-in var(--hl-dur-2) var(--hl-ease); } .hl-modal { background: var(--hl-cream); border-radius: var(--hl-r-lg); box-shadow: var(--hl-e4); max-width: 560px; width: 100%; max-height: 90vh; overflow-y: auto; animation: hl-pop var(--hl-dur-3) var(--hl-ease); } /* toast */ .hl-toast-stack { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: var(--hl-z-toast); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: min(420px, calc(100vw - 32px)); } .hl-toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; background: var(--hl-navy); color: var(--hl-cream); font: 500 14px/1.45 var(--hl-font-ui); padding: 13px 20px; border-radius: var(--hl-r-pill); box-shadow: var(--hl-e3); animation: hl-fade-up var(--hl-dur-3) var(--hl-ease); } .hl-toast--success { background: var(--hl-success); } .hl-toast--warn { background: var(--hl-warn); } .hl-toast--danger { background: var(--hl-danger); } .hl-toast.leaving { opacity: 0; transform: translateY(8px); transition: opacity var(--hl-dur-2) var(--hl-ease), transform var(--hl-dur-2) var(--hl-ease); } /* accordion */ .hl-accordion { border: 1px solid var(--hl-line); border-radius: var(--hl-r-lg); overflow: hidden; background: #fff; } .hl-accordion-item + .hl-accordion-item { border-top: 1px solid var(--hl-line); } .hl-accordion-trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: none; border: none; cursor: pointer; text-align: left; font: 600 16px/1.4 var(--hl-font-ui); color: var(--hl-ink); padding: 18px 22px; transition: color var(--hl-dur-1) var(--hl-ease), background var(--hl-dur-1) var(--hl-ease); } .hl-accordion-trigger:hover { color: var(--hl-gold); background: var(--hl-parchment); } .hl-accordion-trigger .hl-accordion-icon { transition: transform var(--hl-dur-2) var(--hl-ease); flex-shrink: 0; } .hl-accordion-trigger[aria-expanded="true"] .hl-accordion-icon { transform: rotate(45deg); } .hl-accordion-panel { padding: 0 22px 20px; font: 400 15px/1.7 var(--hl-font-ui); color: var(--hl-ink-2); } .hl-accordion-panel[hidden] { display: none; } /* progress stepper */ .hl-stepper { display: flex; align-items: center; gap: 0; list-style: none; padding: 0; margin: 0; } .hl-step { display: flex; align-items: center; gap: 10px; font: 600 13px/1 var(--hl-font-ui); color: var(--hl-ink-3); } .hl-step-dot { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: #fff; border: 1.5px solid var(--hl-line-2); color: var(--hl-ink-3); font-size: 13px; transition: all var(--hl-dur-2) var(--hl-ease); } .hl-step--active { color: var(--hl-gold); } .hl-step--active .hl-step-dot { background: var(--hl-gold); border-color: var(--hl-gold); color: #fff; box-shadow: var(--hl-focus-ring); } .hl-step--done { color: var(--hl-success); } .hl-step--done .hl-step-dot { background: var(--hl-success-bg); border-color: var(--hl-success); color: var(--hl-success); } .hl-step-connector { width: 40px; height: 1.5px; background: var(--hl-line-2); margin: 0 12px; } @media (max-width: 600px) { .hl-step .hl-step-label { display: none; } .hl-step--active .hl-step-label { display: inline; } .hl-step-connector { width: 20px; margin: 0 8px; } } /* empty state */ .hl-empty { text-align: center; padding: var(--hl-s7) var(--hl-s5); color: var(--hl-ink-3); } .hl-empty-icon { font-size: 40px; margin-bottom: 12px; } .hl-empty-title { font: 400 24px/1.2 var(--hl-font-display); color: var(--hl-ink); margin-bottom: 6px; } .hl-empty p { font: 400 14.5px/1.6 var(--hl-font-ui); max-width: 380px; margin: 0 auto 18px; } /* skeleton loading */ .hl-skeleton { border-radius: var(--hl-r-sm); background: linear-gradient(90deg, var(--hl-parchment) 25%, var(--hl-parchment-2) 50%, var(--hl-parchment) 75%); background-size: 200% 100%; animation: hl-skeleton-sheen 1.4s linear infinite; min-height: 1em; } /* floating action button (shared FAB language for chat launchers) */ .hl-fab { position: fixed; right: 18px; bottom: 18px; z-index: var(--hl-z-fab); width: 60px; height: 60px; border-radius: 50%; border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--hl-gold-2), var(--hl-gold)); box-shadow: 0 14px 34px -12px rgba(138, 111, 62, 0.65); transition: transform var(--hl-dur-1) var(--hl-ease), filter var(--hl-dur-1) var(--hl-ease); } .hl-fab:hover { transform: translateY(-2px) scale(1.04); filter: brightness(1.08); } .hl-fab-badge { position: absolute; top: -4px; right: -4px; background: var(--hl-navy); color: var(--hl-gold-4); font: 700 9px/1 var(--hl-font-ui); letter-spacing: 0.06em; padding: 4px 7px; border-radius: var(--hl-r-pill); border: 1.5px solid var(--hl-cream); } /* sticky mobile buy bar (behavior wired by assets/components.js) */ .hl-buybar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--hl-z-fab); display: none; align-items: center; gap: 12px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(253, 252, 250, 0.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--hl-line); box-shadow: 0 -8px 30px -12px rgba(13, 27, 42, 0.25); transform: translateY(110%); transition: transform var(--hl-dur-3) var(--hl-ease); } .hl-buybar.show { transform: translateY(0); } @media (max-width: 760px) { .hl-buybar { display: flex; } } .hl-buybar-info { flex: 1; min-width: 0; } .hl-buybar-title { font: 600 12px/1.3 var(--hl-font-ui); color: var(--hl-ink-2); letter-spacing: 0.02em; } .hl-buybar-price { font: 400 22px/1.2 var(--hl-font-display); color: var(--hl-gold); } .hl-buybar-note { font: 500 11px/1.2 var(--hl-font-ui); color: var(--hl-ink-3); } .hl-buybar-cta { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--hl-gold-2), var(--hl-gold)); color: #fff; font: 600 14.5px/1 var(--hl-font-ui); text-decoration: none; padding: 14px 20px; border-radius: var(--hl-r-pill); box-shadow: 0 8px 20px -8px rgba(138, 111, 62, 0.6); transition: filter var(--hl-dur-1) var(--hl-ease), transform var(--hl-dur-1) var(--hl-ease); } .hl-buybar-cta:hover { filter: brightness(1.1); } .hl-buybar-cta:active { transform: scale(0.98); } /* ── 7. PAGE-TARGETED MOBILE FIXES (320–430px zero-overflow) ──────────── */ /* anchored sections clear the sticky nav (68px + breathing room) */ section[id], header[id] { scroll-margin-top: 84px; } /* homepage pet-name control: fixed 150px input overflowed narrow phones */ @media (max-width: 480px) { .namer { max-width: calc(100vw - 32px); } .namer input { width: auto; flex: 1 1 auto; min-width: 0; } } /* start.html two-card pricing grid: native stack + sane measure on phones */ .pricing-grid-duo { grid-template-columns: repeat(2, 1fr); max-width: 760px; } @media (max-width: 960px) { .pricing-grid-duo { grid-template-columns: 1fr; max-width: 460px; } } @media (max-width: 760px) { .pricing-grid .pricing-card .btn-buy-now { width: 100%; } } /* ── 8. REDUCED-MOTION KILL SWITCH ────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } } /* ── busy button spinner (shared: funnel checkout + vault actions) ───── */ .btn-loading { pointer-events: none; opacity: 0.85; } .btn-loading::before { content: ""; width: 14px; height: 14px; border: 2px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; border-radius: 50%; display: inline-block; margin-right: 8px; vertical-align: -2px; animation: btnSpin 0.7s linear infinite; } @keyframes btnSpin { to { transform: rotate(360deg); } }