/* ============================================================================ PRINCE Instrument — the locked design language, site-wide. Matte warm black + precision cues + per-guardian signature accents. Futuristic lives in MOTION (scanlines, ticks, pulses) — surfaces stay matte. No aurora gradients, no conic glows, no neon, no navy. Reference: PRINCE-Scanner/popup.html (the approved scanner redesign). ========================================================================== */ :root{ /* Surfaces */ --pp-black:#0e0c0e; /* page base */ --pp-panel:#100e11; /* raised panel */ --pp-panel-2:#141116; /* hover / second step */ --pp-line:#241d22; /* hairline borders */ --pp-line-2:#2f2730; /* stronger hairline */ /* Ink */ --pp-ink:#f4efe9; /* primary text (warm off-white) */ --pp-ink-soft:#cfc7cc; /* body */ --pp-dim:#8a8290; /* captions, labels */ --pp-faint:#6f676d; /* footer, meta */ /* Default accent = PRINCE gold; guardian pages override --gAccent */ --gAccent:#e6c34a; --gAccentSoft:color-mix(in srgb, var(--gAccent) 14%, transparent); --gAccentDim:color-mix(in srgb, var(--gAccent) 55%, #0e0c0e); /* Type */ --pp-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; --pp-sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif; --pp-radius:14px; --pp-radius-sm:10px; } /* Guardian signature accents — set class on or any container */ .g-mama { --gAccent:#e0576a; } .g-nana { --gAccent:#b48ed6; } .g-judge { --gAccent:#7c96b3; } .g-shield { --gAccent:#e0a34a; } .g-scout { --gAccent:#3fa9d6; } .g-clarity{ --gAccent:#2bb39a; } .g-echo { --gAccent:#8f7fd6; } .g-patch { --gAccent:#5fb85f; } .g-beacon { --gAccent:#e6c34a; } .g-wallah { --gAccent:#e08a3c; } .g-proto { --gAccent:#8a8794; } /* ---------- Base ---------- */ .pp-body{ background:var(--pp-black); color:var(--pp-ink); font-family:var(--pp-sans); -webkit-font-smoothing:antialiased; } /* ---------- Panels ---------- */ .pp-panel{ background:var(--pp-panel); border:1px solid var(--pp-line); border-radius:var(--pp-radius); } .pp-panel--lift{ background:var(--pp-panel-2); border-color:var(--pp-line-2); } /* Corner registration ticks — the precision signature. Apply with .pp-panel. */ .pp-ticks{ position:relative; } .pp-ticks::after{ content:""; position:absolute; inset:7px; pointer-events:none; border-radius:inherit; background: linear-gradient(var(--gAccent),var(--gAccent)) top left/10px 1.5px, linear-gradient(var(--gAccent),var(--gAccent)) top left/1.5px 10px, linear-gradient(var(--gAccent),var(--gAccent)) top right/10px 1.5px, linear-gradient(var(--gAccent),var(--gAccent)) top right/1.5px 10px, linear-gradient(var(--gAccent),var(--gAccent)) bottom left/10px 1.5px, linear-gradient(var(--gAccent),var(--gAccent)) bottom left/1.5px 10px, linear-gradient(var(--gAccent),var(--gAccent)) bottom right/10px 1.5px, linear-gradient(var(--gAccent),var(--gAccent)) bottom right/1.5px 10px; background-repeat:no-repeat; opacity:.85; } /* ---------- Type roles ---------- */ .pp-label{ /* mono section label: "HOW MAMA DECIDED" */ font-family:var(--pp-mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--pp-dim); } .pp-readout{ /* mono data readout */ font-family:var(--pp-mono); font-size:.78rem; letter-spacing:.05em; color:var(--gAccent); } .pp-h1{ font-size:2rem; font-weight:800; letter-spacing:-.01em; color:var(--pp-ink); } .pp-h2{ font-size:1.3rem; font-weight:700; color:var(--pp-ink); } .pp-quote{ /* verdict/testimony with accent bar */ border-left:2px solid var(--gAccent); padding-left:12px; color:var(--pp-ink); line-height:1.55; } /* Evidence receipt rows */ .pp-evidence{ font-family:var(--pp-mono); font-size:.74rem; line-height:1.85; color:var(--pp-ink-soft); } .pp-evidence .glyph{ color:var(--gAccent); margin-right:6px; } .pp-evidence .glyph--open{ color:#5a525a; } /* ---------- Controls ---------- */ .pp-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--gAccent); color:#14100f; border:none; cursor:pointer; border-radius:11px; padding:11px 18px; font-size:.9rem; font-weight:700; font-family:var(--pp-sans); transition:filter .15s ease, transform .1s ease; } .pp-btn:hover{ filter:brightness(1.07); } .pp-btn:active{ transform:scale(.98); } .pp-btn--ghost{ background:transparent; color:var(--pp-ink-soft); border:1px solid var(--pp-line-2); font-weight:600; } .pp-btn--ghost:hover{ background:var(--pp-panel-2); filter:none; } .pp-chip{ display:inline-flex; align-items:center; gap:6px; font-family:var(--pp-mono); font-size:.68rem; letter-spacing:.08em; color:var(--gAccent); background:var(--gAccentSoft); border:1px solid color-mix(in srgb, var(--gAccent) 35%, transparent); border-radius:999px; padding:4px 10px; } /* Guardian portrait frame — the double frame (depth) from the scanner */ .pp-portrait{ border-radius:15px; border:1.5px solid var(--gAccent); box-shadow:0 0 0 4px var(--gAccentSoft); background:var(--pp-panel); } /* ============================================================================ MOTION — the "futuristic" layer. Purposeful, calm, never decorative noise. All effects respect prefers-reduced-motion. ========================================================================== */ /* 1. Scanline sweep — a thin accent line sweeping a panel (hero, live feed) */ .pp-scanline{ position:relative; overflow:hidden; } .pp-scanline::before{ content:""; position:absolute; left:0; right:0; height:1.5px; top:-2px; background:linear-gradient(90deg, transparent, var(--gAccent), transparent); opacity:.55; animation:pp-sweep 5.5s cubic-bezier(.4,0,.2,1) infinite; pointer-events:none; } @keyframes pp-sweep{ 0%{top:-2px; opacity:0} 8%{opacity:.55} 92%{opacity:.55} 100%{top:100%; opacity:0} } /* 2. Speaking / live pulse — soft accent ring breathing (guardian speaking, live dot) */ .pp-pulse{ animation:pp-pulse 2.2s ease-in-out infinite; } @keyframes pp-pulse{ 0%,100%{ box-shadow:0 0 0 4px var(--gAccentSoft); } 50%{ box-shadow:0 0 0 9px color-mix(in srgb, var(--gAccent) 7%, transparent); } } .pp-livedot{ width:8px; height:8px; border-radius:50%; background:var(--gAccent); display:inline-block; animation:pp-pulse 2.2s ease-in-out infinite; } /* 3. Tick reveal — content snaps in like instrument segments (stagger with delay) */ .pp-reveal{ opacity:0; transform:translateY(7px); animation:pp-reveal .45s cubic-bezier(.2,.7,.3,1) forwards; } .pp-reveal-2{ animation-delay:.08s; } .pp-reveal-3{ animation-delay:.16s; } .pp-reveal-4{ animation-delay:.24s; } .pp-reveal-5{ animation-delay:.32s; } @keyframes pp-reveal{ to{ opacity:1; transform:none; } } /* 4. Blinking cursor for mono readouts (live counters, feeds) */ .pp-cursor::after{ content:"▌"; color:var(--gAccent); animation:pp-blink 1.1s steps(1) infinite; } @keyframes pp-blink{ 50%{ opacity:0 } } /* 5. Hairline trace — border draws attention once on hover (cards, plans) */ .pp-trace{ transition:border-color .25s ease, box-shadow .25s ease; } .pp-trace:hover{ border-color:var(--gAccent); box-shadow:0 0 0 1px var(--gAccentSoft); } @media (prefers-reduced-motion: reduce){ .pp-scanline::before, .pp-pulse, .pp-livedot, .pp-reveal, .pp-cursor::after{ animation:none; } .pp-reveal{ opacity:1; transform:none; } }