/* ================================================================== MyPetsFiles Design System -- mpf-signature-theme.css Version 20C (layout-regression hotfix). Scoped to [data-mpf-mode="signature"] and [data-mpf-theme="signature-blue"] (both set on by _base_public.html, _base_app.html, and templates/pets/profile.html). Adds the Signature-specific decorative layer on top of mpf-design-system.css's tokens/primitives: background glow, header blur, gradient accents, hover/focus glow, animated tab pills, and the dark scrollbar. This file assumes mpf-design-system.css has already loaded and defined every --mpf-* token used below. BUG FIXED IN THIS VERSION: the previous edit that added [data-mpf-theme="signature-blue"] support did a blind text substitution of "[data-mpf-mode=\"signature\"]" -> "[data-mpf-mode= \"signature\"], [data-mpf-theme=\"signature-blue\"]" across this whole file. That's correct ONLY where the attribute selector was already a complete, standalone selector (nothing after it before the next comma or "{"). Everywhere else, it silently split one descendant selector ("[data-mpf-mode=\"signature\"] .mpf-hero::before") into two ("[data-mpf-mode=\"signature\"]" -- matching alone -- and "[data-mpf-theme=\"signature-blue\"] .mpf-hero::before"), which meant every declaration in this file -- including the hero glow pseudo-element's "position:absolute; inset:-40% -20% auto -20%;" -- also applied directly to itself. That's what shifted the whole public homepage off-screen: position:absolute with both left and right set makes an auto-width box span 140% of the viewport, starting 20% to the left of it, and has no positioned ancestor to contain it. Every selector below is now written correctly: each descendant selector is fully duplicated once per attribute, not spliced with a bare, incomplete comma. ================================================================== */ [data-mpf-mode="signature"], [data-mpf-theme="signature-blue"]{ background: radial-gradient(1200px 600px at 15% -10%, rgba(59,130,246,.16), transparent 60%), radial-gradient(900px 500px at 100% 0%, rgba(34,211,238,.10), transparent 55%), var(--mpf-bg-page); background-attachment:fixed; min-height:100%; } /* ---------- Site header ---------- */ [data-mpf-mode="signature"] .mpf-site-header, [data-mpf-theme="signature-blue"] .mpf-site-header{ background:rgba(10,20,40,.72); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); } [data-mpf-mode="signature"] .mpf-site-logo, [data-mpf-theme="signature-blue"] .mpf-site-logo{ background:linear-gradient(135deg,var(--mpf-text-primary),var(--mpf-accent-cyan)); -webkit-background-clip:text; background-clip:text; } [data-mpf-mode="signature"] .mpf-site-logo img, [data-mpf-theme="signature-blue"] .mpf-site-logo img{ filter:none; } /* ---------- Buttons: glow on hover/focus ---------- */ [data-mpf-mode="signature"] .mpf-btn--primary, [data-mpf-theme="signature-blue"] .mpf-btn--primary{ position:relative; } [data-mpf-mode="signature"] .mpf-btn--primary:hover, [data-mpf-theme="signature-blue"] .mpf-btn--primary:hover{ box-shadow:0 0 0 1px rgba(59,130,246,.5), 0 10px 30px rgba(59,130,246,.35); } [data-mpf-mode="signature"] .mpf-btn--primary:focus-visible, [data-mpf-theme="signature-blue"] .mpf-btn--primary:focus-visible{ box-shadow:0 0 0 3px rgba(34,211,238,.35); } /* ---------- Cards: subtle border glow on interactive hover ---------- */ [data-mpf-mode="signature"] .mpf-card--interactive:hover, [data-mpf-mode="signature"] .mpf-action-tile:hover, [data-mpf-theme="signature-blue"] .mpf-card--interactive:hover, [data-mpf-theme="signature-blue"] .mpf-action-tile:hover{ box-shadow:0 0 0 1px rgba(59,130,246,.25), var(--mpf-shadow-md); } /* ---------- Hero sections (welcome hero, pet-profile hero) ---------- */ [data-mpf-mode="signature"] .mpf-welcome-hero, [data-mpf-mode="signature"] .mpf-marketing-hero, [data-mpf-mode="signature"] .mpf-hero, [data-mpf-theme="signature-blue"] .mpf-welcome-hero, [data-mpf-theme="signature-blue"] .mpf-marketing-hero, [data-mpf-theme="signature-blue"] .mpf-hero{ position:relative; overflow:hidden; } [data-mpf-mode="signature"] .mpf-welcome-hero::before, [data-mpf-mode="signature"] .mpf-marketing-hero::before, [data-mpf-mode="signature"] .mpf-hero::before, [data-mpf-theme="signature-blue"] .mpf-welcome-hero::before, [data-mpf-theme="signature-blue"] .mpf-marketing-hero::before, [data-mpf-theme="signature-blue"] .mpf-hero::before{ content:""; position:absolute; inset:-40% -20% auto -20%; height:260px; background:radial-gradient(closest-side, rgba(59,130,246,.28), transparent 70%); pointer-events:none; } /* ---------- Status chip pulse glow ---------- */ [data-mpf-mode="signature"] .mpf-status-chip--pulse, [data-mpf-theme="signature-blue"] .mpf-status-chip--pulse{ box-shadow:0 0 0 0 rgba(34,197,94,.5); animation:mpf-pulse 2s ease-in-out infinite, mpf-glow-pulse 2s ease-in-out infinite; } @keyframes mpf-glow-pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(34,197,94,.35); } 50%{ box-shadow:0 0 0 6px rgba(34,197,94,0); } } @media(prefers-reduced-motion:reduce){ [data-mpf-mode="signature"] .mpf-status-chip--pulse, [data-mpf-theme="signature-blue"] .mpf-status-chip--pulse{ animation:mpf-pulse 2s ease-in-out infinite; } } /* ---------- Tab navigation (dashboard / pet-profile tab bars that opt in via .mpf-tab-pill rather than the legacy .tab-pill class already styled inline by profile.html) ---------- */ [data-mpf-mode="signature"] .mpf-tab-bar, [data-mpf-theme="signature-blue"] .mpf-tab-bar{ display:flex; gap:6px; flex-wrap:wrap; padding:6px; background:var(--mpf-surface-1); border:1px solid var(--mpf-border); border-radius:var(--mpf-radius-pill); margin-bottom:var(--mpf-space-4); } [data-mpf-mode="signature"] .mpf-tab-pill, [data-mpf-theme="signature-blue"] .mpf-tab-pill{ border:none; background:transparent; color:var(--mpf-text-secondary); padding:8px 18px; border-radius:var(--mpf-radius-pill); font-size:var(--mpf-text-caption); font-weight:var(--mpf-weight-medium); cursor:pointer; transition:background .15s ease, color .15s ease; } [data-mpf-mode="signature"] .mpf-tab-pill:hover, [data-mpf-theme="signature-blue"] .mpf-tab-pill:hover{ color:var(--mpf-text-primary); } [data-mpf-mode="signature"] .mpf-tab-pill.active, [data-mpf-mode="signature"] .mpf-tab-pill[aria-selected="true"], [data-mpf-theme="signature-blue"] .mpf-tab-pill.active, [data-mpf-theme="signature-blue"] .mpf-tab-pill[aria-selected="true"]{ background:linear-gradient(135deg,var(--mpf-accent),var(--mpf-accent-2)); color:#ffffff; } /* ---------- Scrollbar ---------- */ [data-mpf-mode="signature"] ::-webkit-scrollbar, [data-mpf-theme="signature-blue"] ::-webkit-scrollbar{ width:10px; height:10px; } [data-mpf-mode="signature"] ::-webkit-scrollbar-track, [data-mpf-theme="signature-blue"] ::-webkit-scrollbar-track{ background:var(--mpf-navy); } [data-mpf-mode="signature"] ::-webkit-scrollbar-thumb, [data-mpf-theme="signature-blue"] ::-webkit-scrollbar-thumb{ background:var(--mpf-surface-3); border-radius:var(--mpf-radius-pill); } /* ---------- Selection ---------- */ [data-mpf-mode="signature"] ::selection, [data-mpf-theme="signature-blue"] ::selection{ background:rgba(59,130,246,.4); color:#ffffff; }