/* ========================================================================== * pe-theme.css — PropEngine Design System (single source of truth) * Lives at /picks/pe-theme.css. Load in on every page: * * * Contents * 1. Design tokens (:root) 5. Components (btn/card/chip/badge/input/tabs) * 2. Base + reset 6. Data tables (sticky/hover/density) * 3. App shell (header/nav/drawer) 7. Skeletons / empty / toast * 4. Motion + View Transitions 8. Utilities + responsive * * Palette is the current production look — formalized into tokens, not changed. * Additive & backward-compatible: legacy pages keep working while sub-pages migrate. * ========================================================================== */ /* ============================ 1. DESIGN TOKENS ============================ */ :root{ /* ---- color: surfaces ---- */ --pe-bg: #060911; /* app background */ --pe-bg-2: #0c1220; /* raised background */ --pe-bg-3: #121a2c; /* input / inset */ --pe-surface: #0f1728; /* card */ --pe-surface-2: #131d33; /* card (elevated gradient) */ --pe-glass: rgba(12,18,32,.72); /* header/overlay glass */ /* ---- color: lines / borders ---- */ --pe-line: #1f2c47; /* standard border */ --pe-line-2: #293650; /* stronger border */ --pe-line-soft: rgba(255,255,255,.08); /* hairline divider */ /* ---- color: text ---- */ --pe-text: #eaf1fb; --pe-dim: #9fb2d4; --pe-faint: #61739a; /* ---- color: accents (brand) ---- */ --pe-accent: #5aa2ff; /* primary accent (blue) */ --pe-purple: #b18bff; --pe-green: #31e6a3; --pe-amber: #f7b23b; --pe-red: #ff6b7d; --pe-cyan: #41dcea; --pe-grad: linear-gradient(120deg,#5aa2ff,#b18bff); --pe-grad-g: linear-gradient(120deg,#31e6a3,#41dcea); /* ---- semantic (results) ---- */ --pe-win: #31e6a3; --pe-loss: #ff6b7d; --pe-push: #9fb2d4; /* ---- typography ---- */ --pe-font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --pe-fs-cap: .72rem; --pe-fs-sm: .85rem; --pe-fs-md: 1rem; --pe-fs-lg: 1.15rem; --pe-fs-xl: clamp(1.4rem,1.1rem + 1.4vw,1.9rem); --pe-fs-2xl: clamp(1.9rem,1.4rem + 2.4vw,2.6rem); --pe-fw-med: 600; --pe-fw-bold: 700; --pe-fw-black: 800; --pe-lh: 1.55; --pe-lh-tight: 1.25; /* ---- spacing scale ---- */ --pe-1:4px; --pe-2:8px; --pe-3:12px; --pe-4:16px; --pe-5:20px; --pe-6:24px; --pe-8:32px; --pe-12:48px; /* ---- radii ---- */ --pe-r-sm:8px; --pe-r:12px; --pe-r-lg:16px; --pe-r-pill:999px; /* ---- elevation ---- */ --pe-e1: 0 6px 18px -10px rgba(0,0,0,.6); --pe-e2: 0 14px 34px -16px rgba(0,0,0,.7); --pe-e3: 0 30px 80px -30px rgba(0,0,0,.85); /* ---- motion ---- */ --pe-ease: cubic-bezier(0.16,1,0.3,1); --pe-ease-in: cubic-bezier(0.4,0,1,1); --pe-dur-fast:120ms; --pe-dur:200ms; --pe-dur-slow:320ms; /* ---- z-index scale ---- */ --pe-z-header:30; --pe-z-drawer:9990; --pe-z-modal:9999; --pe-z-toast:100000; } /* ============================ 2. BASE + RESET ============================ */ *,*::before,*::after{box-sizing:border-box} .pe-scope, [data-pe-shell]{ } :where(a){color:inherit;text-decoration:none} :where(button){font:inherit;cursor:pointer} img,svg{max-width:100%;display:block} :where(a,button):focus-visible{outline:2px solid var(--pe-accent);outline-offset:2px;border-radius:8px} ::selection{background:rgba(90,162,255,.30)} /* tabular figures everywhere numbers live (aligns stats/odds/records) */ body{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1} /* ============================ 3. APP SHELL ============================ */ .pe-header{position:sticky;top:0;z-index:var(--pe-z-header); background:var(--pe-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--pe-line);view-transition-name:pe-shell} .pe-header__in{max-width:1200px;margin:0 auto;padding:12px 22px;display:flex;align-items:center;gap:14px} .pe-logo{display:flex;align-items:center;gap:9px;font-weight:var(--pe-fw-black);font-size:1.3rem;color:var(--pe-text);view-transition-name:pe-logo} .pe-logo .dot{width:11px;height:11px;border-radius:50%;background:var(--pe-grad-g)} .pe-logo b{background:var(--pe-grad);-webkit-background-clip:text;background-clip:text;color:transparent} .pe-nav{display:flex;gap:2px;margin-left:6px} .pe-nav a{color:var(--pe-dim);font-weight:var(--pe-fw-bold);font-size:.85rem;padding:8px 11px;border-radius:9px;transition:color var(--pe-dur) var(--pe-ease),background var(--pe-dur) var(--pe-ease)} .pe-nav a:hover{color:var(--pe-text);background:var(--pe-bg-3)} .pe-nav a[aria-current="page"]{color:var(--pe-text);background:var(--pe-bg-3);box-shadow:inset 0 -2px 0 var(--pe-accent)} .pe-spacer{flex:1} .pe-live{display:flex;align-items:center;gap:7px;color:var(--pe-dim);font-size:.78rem;font-weight:var(--pe-fw-bold)} .pe-live .b{width:8px;height:8px;border-radius:50%;background:var(--pe-green);animation:pe-pulse 2s infinite} @keyframes pe-pulse{0%{box-shadow:0 0 0 0 rgba(49,230,163,.5)}70%{box-shadow:0 0 0 8px rgba(49,230,163,0)}100%{box-shadow:0 0 0 0 rgba(49,230,163,0)}} #pe-account{color:var(--pe-dim);font-weight:var(--pe-fw-bold);font-size:.9rem;padding:8px 12px;border-radius:10px;text-decoration:none} /* mobile hamburger (floats; needs no per-page header changes) */ .pe-burger{display:none;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px; border:1px solid var(--pe-line-2);background:var(--pe-surface);color:var(--pe-text);font-size:1.15rem;box-shadow:var(--pe-e1)} .pe-kbdhint{color:var(--pe-dim);border:1px solid var(--pe-line-2);border-radius:8px;padding:5px 9px;font-size:.72rem;font-weight:var(--pe-fw-bold);background:var(--pe-surface)} .pe-kbdhint kbd{font:inherit;opacity:.85} .pe-navdrawer a{display:block;padding:13px 12px;border-radius:10px;color:var(--pe-text);font-weight:var(--pe-fw-bold);border:1px solid transparent} .pe-navdrawer a:hover{background:var(--pe-surface-2);border-color:var(--pe-line-2)} .pe-navdrawer a[aria-current="page"]{color:var(--pe-accent)} /* ============================ 4. MOTION + VIEW TRANSITIONS ============================ */ @view-transition{navigation:auto} ::view-transition-old(root),::view-transition-new(root){animation-duration:var(--pe-dur-slow);animation-timing-function:var(--pe-ease)} a,button,.pe-card,.pe-btn,.pe-chip,.pe-tab,.card,.fcard,.mc,.mlcard,.gc,.pcard{ transition:transform var(--pe-dur) var(--pe-ease),border-color var(--pe-dur) var(--pe-ease), background-color var(--pe-dur) var(--pe-ease),box-shadow var(--pe-dur) var(--pe-ease),color var(--pe-dur) var(--pe-ease)} .pe-card:active,.pe-btn:active,.card:active,.fcard:active,.tab:active,.pe-tab:active{transform:translateY(0) scale(.985)} @media (prefers-reduced-motion: reduce){ ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important} *{scroll-behavior:auto !important} .pe-skel,.skel{animation:none !important} } /* ============================ 5. COMPONENTS ============================ */ /* ---- buttons ---- */ .pe-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; background:var(--pe-bg-2);border:1px solid var(--pe-line-2);color:var(--pe-text); font-weight:var(--pe-fw-bold);font-size:.85rem;padding:9px 14px;border-radius:11px;line-height:1;white-space:nowrap} .pe-btn:hover{border-color:var(--pe-accent);color:#fff} .pe-btn--primary{background:var(--pe-grad);border:none;color:#0a1330} .pe-btn--ghost{background:transparent;border-color:transparent;color:var(--pe-dim)} .pe-btn--ghost:hover{background:var(--pe-bg-3);color:var(--pe-text)} .pe-btn--sm{padding:6px 10px;font-size:.78rem;border-radius:9px} .pe-btn--lg{padding:12px 18px;font-size:.95rem;border-radius:12px} /* ---- cards ---- */ .pe-card{background:linear-gradient(168deg,var(--pe-surface-2),var(--pe-surface)); border:1px solid var(--pe-line);border-radius:var(--pe-r-lg);padding:var(--pe-4);box-shadow:var(--pe-e1)} .pe-card:hover{border-color:var(--pe-line-2);box-shadow:var(--pe-e2);transform:translateY(-2px)} .pe-card--flat{background:var(--pe-surface);box-shadow:none} .pe-card--glass{background:var(--pe-glass);backdrop-filter:blur(10px)} /* ---- chips / pills ---- */ .pe-chip{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;color:var(--pe-dim); background:var(--pe-bg-2);border:1px solid var(--pe-line);border-radius:var(--pe-r-sm);padding:3px 9px;white-space:nowrap} .pe-chip b{color:var(--pe-text)} /* ---- badges (tier / tier / status) ---- */ .pe-badge{display:inline-block;font-size:.6rem;font-weight:var(--pe-fw-black);letter-spacing:.04em; text-transform:uppercase;padding:2px 8px;border-radius:var(--pe-r-pill);vertical-align:middle;white-space:nowrap} .pe-badge.free{color:var(--pe-dim);border:1px solid var(--pe-line-2)} .pe-badge.pro{color:var(--pe-green);border:1px solid rgba(49,230,163,.45);background:rgba(49,230,163,.08)} .pe-badge.warn{color:var(--pe-amber);border:1px solid rgba(247,178,59,.45)} .pe-badge.lock{color:var(--pe-dim);border:1px dashed var(--pe-line-2)} .pe-badge.elite{color:var(--pe-green);background:rgba(49,230,163,.14);border:1px solid rgba(49,230,163,.4)} .pe-badge.strong{color:var(--pe-accent);background:rgba(90,162,255,.14);border:1px solid rgba(90,162,255,.4)} .pe-badge.solid{color:var(--pe-amber);background:rgba(247,178,59,.14);border:1px solid rgba(247,178,59,.4)} /* ---- inputs / selects ---- */ .pe-input,.pe-select{background:var(--pe-bg-2);border:1px solid var(--pe-line-2);color:var(--pe-text); border-radius:10px;padding:9px 12px;font-size:.85rem;outline:none;width:100%} .pe-input:focus,.pe-select:focus{border-color:var(--pe-accent)} .pe-input::placeholder{color:var(--pe-faint)} /* ---- tabs / segmented ---- */ .pe-tabs{display:flex;gap:6px;flex-wrap:wrap} .pe-tab{background:var(--pe-bg-2);border:1px solid var(--pe-line-2);color:var(--pe-dim); font-weight:var(--pe-fw-bold);font-size:.82rem;padding:7px 13px;border-radius:var(--pe-r-pill)} .pe-tab:hover{color:var(--pe-text)} .pe-tab[aria-selected="true"],.pe-tab.on{color:#06121f;background:var(--pe-grad-g);border:none} /* ---- semantic result helpers ---- */ .pe-win,.rrow.win .ic,.val.win{color:var(--pe-win)} .pe-loss,.rrow.loss .ic,.val.loss{color:var(--pe-loss)} .pe-push,.rrow.push .ic{color:var(--pe-push)} /* ============================ 6. DATA TABLES ============================ */ .pe-table-wrap{overflow:auto;border:1px solid var(--pe-line);border-radius:var(--pe-r);background:var(--pe-surface)} .pe-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.85rem} .pe-table thead th{position:sticky;top:0;z-index:1;background:var(--pe-bg-2); color:var(--pe-faint);font-size:.68rem;font-weight:var(--pe-fw-black);letter-spacing:.05em;text-transform:uppercase; text-align:left;padding:10px 14px;border-bottom:1px solid var(--pe-line);white-space:nowrap;cursor:default} .pe-table tbody td{padding:11px 14px;border-bottom:1px solid var(--pe-line-soft);color:var(--pe-text)} .pe-table tbody tr{transition:background var(--pe-dur-fast) var(--pe-ease)} .pe-table tbody tr:hover{background:rgba(255,255,255,.03)} .pe-table tbody tr:last-child td{border-bottom:none} /* density (set data-density on via the shell) */ :root[data-density="compact"] .pe-table thead th, :root[data-density="compact"] .pe-table tbody td{padding:6px 10px;font-size:.8rem} :root[data-density="compact"] .pe-card{padding:12px} :root[data-density="compact"] .card{padding:12px} /* ============================ 7. SKELETON / EMPTY / DRAWER / TOAST ============================ */ .pe-skel,.skel{border-radius:14px;border:1px solid var(--pe-line); background:linear-gradient(100deg,var(--pe-surface) 30%,var(--pe-surface-2) 50%,var(--pe-surface) 70%); background-size:200% 100%;animation:pe-shimmer 1.3s linear infinite} @keyframes pe-shimmer{from{background-position:200% 0}to{background-position:-200% 0}} @keyframes sh{from{background-position:200% 0}to{background-position:-200% 0}} .pe-empty{text-align:center;color:var(--pe-dim);border:1px dashed var(--pe-line-2);border-radius:14px; padding:34px 22px;background:rgba(255,255,255,.01)} .pe-empty .ico{font-size:1.6rem;opacity:.7;display:block;margin-bottom:8px} .pe-drawer-ov{position:fixed;inset:0;z-index:var(--pe-z-drawer);background:rgba(3,6,12,.55); backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity var(--pe-dur) var(--pe-ease)} .pe-drawer-ov.on{opacity:1;pointer-events:auto} .pe-drawer{position:fixed;top:0;right:0;height:100%;width:min(460px,94vw); background:linear-gradient(180deg,var(--pe-surface-2),var(--pe-surface)); border-left:1px solid var(--pe-line-2);box-shadow:var(--pe-e3); transform:translateX(100%);transition:transform var(--pe-dur-slow) var(--pe-ease); z-index:calc(var(--pe-z-drawer) + 1);overflow:auto;padding:20px 22px;color:var(--pe-text)} .pe-drawer.on{transform:none} .pe-drawer h3{font-size:1.1rem;font-weight:var(--pe-fw-black);margin-bottom:10px} .pe-drawer .x{position:absolute;top:14px;right:16px;cursor:pointer;color:var(--pe-dim);font-size:1.2rem} .pe-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(10px); background:var(--pe-surface-2);border:1px solid var(--pe-line-2);color:var(--pe-text); font:600 13px/1 var(--pe-font);padding:10px 16px;border-radius:11px;opacity:0; transition:all var(--pe-dur) var(--pe-ease);z-index:var(--pe-z-toast);pointer-events:none} .pe-toast.on{opacity:1;transform:translateX(-50%) translateY(0)} /* ============================ 8. UTILITIES + RESPONSIVE ============================ */ .pe-tnum{font-variant-numeric:tabular-nums} .pe-dim{color:var(--pe-dim)} .pe-faint{color:var(--pe-faint)} .pe-muted{color:var(--pe-faint);font-size:.82rem} .pe-stack{display:flex;flex-direction:column} .pe-row{display:flex;align-items:center} .pe-gap-2{gap:8px}.pe-gap-3{gap:12px}.pe-gap-4{gap:16px} .pe-grid{display:grid;gap:16px} .pe-hide-sm{} .pe-kbd{background:var(--pe-bg-3);border:1px solid var(--pe-line-2);border-radius:5px;padding:1px 6px;font:inherit} /* gentle entrance for KPI / market cards (scoped so it never mass-animates the board) */ @keyframes pe-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion: no-preference){ .kpis .kpi,.seg .mc{animation:pe-rise var(--pe-dur-slow) var(--pe-ease) both} .kpis .kpi:nth-child(2),.seg .mc:nth-child(2){animation-delay:40ms} .kpis .kpi:nth-child(3),.seg .mc:nth-child(3){animation-delay:80ms} .kpis .kpi:nth-child(4),.seg .mc:nth-child(4){animation-delay:120ms} .seg .mc:nth-child(5){animation-delay:160ms}.seg .mc:nth-child(6){animation-delay:200ms} } /* ========================================================================== * 11. PREMIUM POLISH — depth, texture, and material. Palette unchanged: * only white/black highlights, shadows, and existing tokens are used. * ========================================================================== */ /* fine grain over the dark gradient (kills banding, reads as premium). Sits behind content (z-index:-1) and never intercepts clicks. */ body::before{ content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* glassy top-highlight edge on cards -> reads as a lit surface, not a flat div */ .pe-card, .card, .fcard, .mc, .mlcard, .gc, .pcard, .kpi, .stat, .day{ box-shadow: inset 0 1px 0 rgba(255,255,255,.045), var(--pe-e1); } .pe-card:hover, .card:hover, .fcard:hover, .mc:hover, .gc:hover, .pcard:hover{ box-shadow: inset 0 1px 0 rgba(255,255,255,.07), var(--pe-e2); } /* focus ring with a soft brand glow */ :where(a,button,input,select,textarea):focus-visible{ outline:2px solid var(--pe-accent);outline-offset:2px;border-radius:8px; box-shadow:0 0 0 4px rgba(90,162,255,.18); } /* keep autofilled fields on the dark theme instead of the browser's yellow */ input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{ -webkit-text-fill-color:var(--pe-text); -webkit-box-shadow:0 0 0 1000px var(--pe-bg-2) inset; caret-color:var(--pe-text);transition:background-color 9999s ease-in-out 0s; } /* ---- count-up marker (JS animates textContent; CSS just steadies width) ---- */ .pe-count{font-variant-numeric:tabular-nums} /* ---- progress ring (member streak / season progress) ---- */ .pe-ring{--v:0;--sz:64px;width:var(--sz);height:var(--sz);border-radius:50%;display:grid;place-items:center; background:conic-gradient(var(--pe-green) calc(var(--v)*1%), var(--pe-bg-3) 0);transition:--v .9s var(--pe-ease)} .pe-ring::after{content:"";width:calc(var(--sz) - 12px);height:calc(var(--sz) - 12px);border-radius:50%;background:var(--pe-surface)} .pe-ring .lbl{position:absolute;font-weight:800;font-size:.85rem} /* ---- achievement / badge shelf ---- */ .pe-badges{display:flex;flex-wrap:wrap;gap:10px} .pe-ach{display:flex;align-items:center;gap:9px;background:var(--pe-bg-2);border:1px solid var(--pe-line); border-radius:12px;padding:9px 12px;min-width:150px} .pe-ach .ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--pe-bg-3);font-size:1rem} .pe-ach.on .ic{background:linear-gradient(140deg,rgba(247,178,59,.25),rgba(247,178,59,.08));border:1px solid rgba(247,178,59,.4)} .pe-ach .t{font-weight:800;font-size:.8rem}.pe-ach .d{color:var(--pe-faint);font-size:.68rem} .pe-ach.off{opacity:.5} /* ---- premium (paid) accent: subtle warm hairline + animated tier badge ---- */ .pe-premium{border-color:rgba(247,178,59,.30) !important; box-shadow:inset 0 1px 0 rgba(247,178,59,.10), var(--pe-e1) !important} .pe-tierbadge{display:inline-flex;align-items:center;gap:6px;font-size:.6rem;font-weight:800;letter-spacing:.06em; text-transform:uppercase;padding:3px 10px;border-radius:999px;color:#0a1330; background:linear-gradient(120deg,#f7b23b,#ffd27a);background-size:200% 100%;animation:pe-shine 4s linear infinite} @keyframes pe-shine{to{background-position:200% 0}} .pe-tierbadge.free{color:var(--pe-dim);background:none;border:1px solid var(--pe-line-2);animation:none} /* ---- pin/star save control ---- */ .pe-star{cursor:pointer;color:var(--pe-faint);font-size:1rem;line-height:1;transition:transform var(--pe-dur) var(--pe-ease),color var(--pe-dur) var(--pe-ease)} .pe-star:hover{color:var(--pe-amber);transform:scale(1.15)} .pe-star.on{color:var(--pe-amber)} @keyframes pe-pop{0%{transform:scale(1)}45%{transform:scale(1.45)}100%{transform:scale(1)}} .pe-star.pop{animation:pe-pop .34s var(--pe-ease)} @media (pointer:coarse){ .pe-nav a,.pe-btn,#pe-account,.pe-tab{min-height:44px;display:inline-flex;align-items:center} } @media (max-width:760px){ .pe-burger{display:inline-flex;position:fixed;top:12px;left:14px;z-index:var(--pe-z-modal)} .pe-kbdhint{display:none} } @media (max-width:640px){ .pe-nav{display:none} .pe-hide-sm{display:none !important} .pe-header__in{padding:11px 16px} }