/* * Pigskin Prophet — Dual-theme brand system * Layers on top of fantasy-ai-pro.css * Dark default ("Oracle"): navy / gold / dramatic. * Light: ivory surfaces, same gold accent, sharp. * Theme selected by [data-theme="dark|light"] on . */ /* ========================================================================== Brand Tokens — dark (default) values ========================================================================== */ /* Scoring Zone — "Electric Scoreboard" theme. The --pp-* names are kept for backwards-compat with the many inline var(--pp-*) refs across templates; only the VALUES changed: gold -> electric green accent, navy -> near-black slate. */ :root { /* accent — electric green (was gold) */ --pp-gold: #00E676; --pp-gold-light: #5EFFA3; --pp-gold-dark: #00B85C; --pp-gold-glow: rgba(0, 230, 118, 0.30); --pp-gold-dim: rgba(0, 230, 118, 0.10); --pp-gold-border: rgba(0, 230, 118, 0.22); /* base — near-black slate ramp (was navy) */ --pp-navy-900: #070A0E; /* darkest bg — nav */ --pp-navy-800: #0B0F14; /* page bg */ --pp-navy-700: #131A22; /* surface / card */ --pp-navy-600: #1A2330; /* hover / elevated */ --pp-navy-500: #202B38; /* subtle elevated */ --pp-navy-400: #2A3645; /* border muted */ --pp-navy-300: #36465A; --pp-navy-200: #44586E; --pp-navy-100: #647D96; --pp-text-primary: #E6EDF3; --pp-text-secondary: #9FB0C0; --pp-text-muted: #647689; /* Scoring Zone semantic aliases (prefer these in new code) */ --sz-accent: #00E676; --sz-bg: #0B0F14; --sz-panel: #131A22; --pp-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25); --pp-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.30); --pp-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.50); --pp-tier-elite: #10b981; --pp-tier-good: #3b82f6; --pp-tier-avg: #f59e0b; --pp-tier-below: #ef4444; --pp-font-display: 'Oswald', 'Inter', system-ui, sans-serif; --pp-font-accent: 'Oswald', 'Inter', system-ui, sans-serif; /* was Cinzel serif — modernized */ } /* ========================================================================== Light theme override — flip the surfaces, keep the gold ========================================================================== */ [data-theme="light"] { --pp-gold: #B8941E; --pp-gold-light: #D4AF37; --pp-gold-dark: #8A6E0E; --pp-gold-glow: rgba(184, 148, 30, 0.22); --pp-gold-dim: rgba(184, 148, 30, 0.12); --pp-gold-border: rgba(184, 148, 30, 0.35); /* Flip the navy stack — 900 is now darkest (lightest surface) */ --pp-navy-900: #FFFFFF; /* nav bg (brightest) */ --pp-navy-800: #F5F7FA; /* page bg */ --pp-navy-700: #FFFFFF; /* card */ --pp-navy-600: #EDF1F6; /* hover */ --pp-navy-500: #E3E8EF; /* elevated */ --pp-navy-400: #CFD6E0; /* muted border */ --pp-navy-300: #B8C1CE; --pp-navy-200: #8A99AD; --pp-navy-100: #4A5A73; --pp-text-primary: #0A1628; --pp-text-secondary: #3D4A5F; --pp-text-muted: #6B7F99; --pp-shadow-sm: 0 1px 2px rgba(10, 22, 40, 0.06); --pp-shadow-md: 0 4px 12px rgba(10, 22, 40, 0.08); --pp-shadow-lg: 0 12px 40px rgba(10, 22, 40, 0.12); } /* ========================================================================== Body & Background ========================================================================== */ body { background: var(--pp-navy-800); color: var(--pp-text-primary); } /* ========================================================================== Navigation — Dark Command Bar ========================================================================== */ .ff-nav { background: var(--pp-navy-900); border-bottom: 1px solid var(--pp-gold-border); box-shadow: var(--pp-shadow-md); backdrop-filter: blur(16px); } .ff-nav-brand { color: var(--pp-text-primary); } /* Gold logo mark */ .pp-nav-logo { width: 36px; height: 36px; border-radius: 8px; background: linear-gradient(145deg, var(--pp-gold), var(--pp-gold-dark)); display: flex; align-items: center; justify-content: center; font-family: var(--pp-font-accent); font-weight: 700; font-size: 0.8rem; color: var(--pp-navy-900); box-shadow: 0 0 12px var(--pp-gold-glow); flex-shrink: 0; } .pp-nav-title { font-family: var(--pp-font-display); font-weight: 700; font-size: 1.25rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--pp-text-primary); line-height: 1.1; } .pp-nav-subtitle { font-size: 0.5625rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: var(--pp-gold); line-height: 1; } .ff-nav-link { color: var(--pp-text-secondary); } .ff-nav-link:hover, .ff-nav-link.active { color: var(--pp-gold); background: rgba(212, 175, 55, 0.08); } .ff-nav-link.active::after { background: var(--pp-gold); } .ff-dropdown-menu { background: var(--pp-navy-700); border: 1px solid var(--pp-gold-border); box-shadow: var(--pp-shadow-lg); } .ff-dropdown-item { color: var(--pp-text-secondary); } .ff-dropdown-item:hover { background: var(--pp-navy-600); color: var(--pp-gold); } .ff-dropdown-item.active { background: var(--pp-gold); color: var(--pp-navy-900); } .ff-dropdown-item i { color: var(--pp-gold-dark); } .ff-dropdown-item:hover i { color: var(--pp-gold); } /* Theme toggle button */ .ff-btn-ghost { color: var(--pp-text-secondary); } .ff-btn-ghost:hover { background: var(--pp-navy-600); color: var(--pp-gold); } /* ========================================================================== Cards — Glass-Navy with Gold Edge ========================================================================== */ .ff-card { background: var(--pp-navy-700); border: 1px solid var(--pp-gold-border); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3); } .ff-card:hover { border-color: rgba(212, 175, 55, 0.30); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--pp-gold-dim); } .ff-card-header { background: var(--pp-navy-600); border-bottom-color: var(--pp-gold-border); } .ff-card-footer { background: var(--pp-navy-600); border-top-color: var(--pp-gold-border); } /* ========================================================================== Stats Cards — Accent Top Stripe in Gold ========================================================================== */ .ff-stats-card { background: var(--pp-navy-700); border: 1px solid var(--pp-gold-border); } .ff-stats-card::before { background: linear-gradient(90deg, var(--pp-gold-dark), var(--pp-gold), var(--pp-gold-dark)); } .ff-stats-card:hover { border-color: var(--pp-gold); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 20px var(--pp-gold-dim); } .ff-stats-value { color: var(--pp-text-primary); font-family: var(--pp-font-display); font-weight: 700; } .ff-stats-label { color: var(--pp-text-secondary); } .ff-stats-description { color: var(--pp-text-muted); } /* ========================================================================== Buttons — Gold Primary ========================================================================== */ .ff-btn-primary { background: linear-gradient(135deg, var(--pp-gold), var(--pp-gold-dark)); color: var(--pp-navy-900); border: none; font-weight: 700; } .ff-btn-primary:hover { background: linear-gradient(135deg, var(--pp-gold-light), var(--pp-gold)); box-shadow: 0 4px 16px var(--pp-gold-glow); transform: translateY(-1px); } .ff-btn-secondary { background: var(--pp-navy-600); color: var(--pp-text-primary); border-color: var(--pp-navy-300); } .ff-btn-secondary:hover { background: var(--pp-navy-500); border-color: var(--pp-gold-border); color: var(--pp-gold); } .ff-btn-success { background: linear-gradient(135deg, #059669, #047857); } /* ========================================================================== Tables — Dark Rows with Gold Header Accent ========================================================================== */ .ff-table { background: var(--pp-navy-700); border-color: var(--pp-gold-border); } .ff-table th { background: var(--pp-navy-600); color: var(--pp-gold); border-bottom-color: var(--pp-gold-border); font-family: var(--pp-font-display); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.75rem; } .ff-table td { color: var(--pp-text-secondary); border-bottom-color: rgba(212, 175, 55, 0.06); } .ff-table tr:hover { background: var(--pp-navy-600); } /* Generic tables (not using .ff-table class) */ table { color: var(--pp-text-secondary); } th { color: var(--pp-text-muted); } /* ========================================================================== Form Controls — Dark Glass ========================================================================== */ .ff-input, .ff-textarea, .ff-select, select, input[type="text"], input[type="number"], input[type="email"] { background: var(--pp-navy-600); border-color: var(--pp-navy-300); color: var(--pp-text-primary); } .ff-input:focus, .ff-textarea:focus, .ff-select:focus, select:focus { border-color: var(--pp-gold); box-shadow: 0 0 0 3px var(--pp-gold-dim); } .ff-label, label { color: var(--pp-text-secondary); } /* ========================================================================== Badges — Gold Accent ========================================================================== */ .ff-badge-primary { background: var(--pp-gold); color: var(--pp-navy-900); } .ff-badge-success { background: #059669; } .ff-badge-gray { background: var(--pp-navy-500); color: var(--pp-text-secondary); } /* ========================================================================== Alerts ========================================================================== */ .ff-alert-success { background: rgba(5, 150, 105, 0.15); border-color: #059669; color: #6ee7b7; } .ff-alert-warning { background: rgba(217, 119, 6, 0.15); border-color: #d97706; color: #fbbf24; } .ff-alert-error { background: rgba(220, 38, 38, 0.15); border-color: #dc2626; color: #fca5a5; } .ff-alert-info { background: rgba(37, 99, 235, 0.15); border-color: #2563eb; color: #93c5fd; } /* ========================================================================== Headings — Oswald Display Font ========================================================================== */ .ff-h1, h1 { font-family: var(--pp-font-display); color: var(--pp-text-primary); letter-spacing: 0.02em; } .ff-h2, h2 { color: var(--pp-text-primary); } .ff-h3, h3 { color: var(--pp-text-primary); } .ff-h4, h4, .ff-h5, h5 { color: var(--pp-text-secondary); } .ff-body { color: var(--pp-text-secondary); } .ff-body-sm { color: var(--pp-text-muted); } .ff-caption { color: var(--pp-gold); font-family: var(--pp-font-accent); letter-spacing: 0.1em; } p { color: var(--pp-text-secondary); } /* ========================================================================== Hero Sections — Gradient Banner ========================================================================== */ .pp-hero { background: linear-gradient(135deg, var(--pp-navy-800) 0%, var(--pp-navy-700) 50%, var(--pp-navy-600) 100%); border: 1px solid var(--pp-gold-border); border-radius: var(--ff-radius-lg, 0.75rem); padding: 2rem 2.5rem; margin-bottom: 1.5rem; position: relative; overflow: hidden; } .pp-hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--pp-gold), transparent); } .pp-hero h1 { font-family: var(--pp-font-display); font-size: 2rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--pp-text-primary); margin-bottom: 0.375rem; } .pp-hero p { color: var(--pp-text-muted); font-size: 0.9375rem; margin: 0; } .pp-hero .pp-hero-badges { display: flex; gap: 0.5rem; margin-top: 0; } /* ========================================================================== PigPro Score Components ========================================================================== */ /* Hero Ring (SVG) */ .pigpro-hero { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; } .pigpro-ring { position: relative; width: 80px; height: 80px; } .pigpro-ring svg { transform: rotate(-90deg); width: 100%; height: 100%; } .pigpro-ring-bg { fill: none; stroke: var(--pp-navy-500); stroke-width: 5; } .pigpro-ring-fill { fill: none; stroke-width: 5; stroke-linecap: round; transition: stroke-dashoffset 0.8s ease; } .pigpro-ring-value { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--pp-font-display); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.02em; } .pigpro-ring-label { font-family: var(--pp-font-accent); font-size: 0.6rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--pp-gold); } .pigpro-ring-lg { width: 120px; height: 120px; } .pigpro-ring-lg .pigpro-ring-value { font-size: 2.25rem; } /* Full Badge */ .pigpro-badge { display: inline-flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.875rem; border-radius: 0.75rem; background: var(--pp-navy-600); border: 1.5px solid var(--pp-gold-border); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } .pigpro-score-circle { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: currentColor; box-shadow: 0 0 10px var(--pp-gold-dim); } .pigpro-score-value { color: #fff; font-family: var(--pp-font-display); font-weight: 700; font-size: 1rem; } .pigpro-label { display: flex; flex-direction: column; line-height: 1.2; } .pigpro-brand { font-family: var(--pp-font-accent); font-weight: 700; font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--pp-gold); } .pigpro-tier-label { font-size: 0.8125rem; font-weight: 600; color: var(--pp-text-primary); } .pigpro-rec { font-size: 0.625rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-top: 2px; } .pigpro-rec-target { color: var(--pp-tier-elite); } .pigpro-rec-consider { color: var(--pp-tier-good); } .pigpro-rec-sleeper { color: var(--pp-tier-avg); } .pigpro-rec-avoid { color: var(--pp-tier-below); } /* Tier Colors */ .pigpro-tier-elite { color: var(--pp-tier-elite); } .pigpro-tier-good { color: var(--pp-tier-good); } .pigpro-tier-average { color: var(--pp-tier-avg); } .pigpro-tier-below { color: var(--pp-tier-below); } /* Compact Badge */ .pigpro-badge-sm { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 28px; padding: 0 0.5rem; border-radius: 0.375rem; font-family: var(--pp-font-display); font-size: 0.875rem; font-weight: 700; background: currentColor; } .pigpro-score-sm { color: #fff; } /* Breakdown Bars */ .pigpro-breakdown { padding: 0.75rem; } .pigpro-breakdown-title { font-family: var(--pp-font-accent); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--pp-gold); margin-bottom: 0.75rem; } .pigpro-breakdown-bars { display: flex; flex-direction: column; gap: 0.5rem; } .pigpro-bar-row { display: flex; align-items: center; gap: 0.5rem; } .pigpro-bar-label { font-size: 0.75rem; width: 100px; flex-shrink: 0; text-align: right; color: var(--pp-text-muted); } .pigpro-bar-track { flex: 1; height: 8px; background: var(--pp-navy-500); border-radius: 999px; overflow: hidden; } .pigpro-bar-fill { height: 100%; border-radius: 999px; transition: width 0.4s ease; } .pigpro-bar-primary { background: var(--pp-tier-good); } .pigpro-bar-success { background: var(--pp-tier-elite); } .pigpro-bar-warning { background: var(--pp-tier-avg); } .pigpro-bar-info { background: #06b6d4; } .pigpro-bar-error { background: var(--pp-tier-below); } .pigpro-bar-gray { background: var(--pp-navy-200); } .pigpro-bar-value { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; font-weight: 600; width: 32px; flex-shrink: 0; color: var(--pp-text-secondary); } /* ========================================================================== Draft Board — Dark Table with Position Colors ========================================================================== */ .draft-board-table { background: var(--pp-navy-700); border: 1px solid var(--pp-gold-border); border-radius: 0.75rem; overflow: hidden; } .draft-board-table th { background: var(--pp-navy-600); color: var(--pp-gold); font-family: var(--pp-font-display); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.6875rem; font-weight: 600; border-bottom: 1px solid var(--pp-gold-border); } .draft-board-table td { border-bottom-color: rgba(255, 255, 255, 0.04); color: var(--pp-text-secondary); } .draft-board-table tr:hover { background: var(--pp-navy-600); } /* Position badge overrides for dark theme */ .position-badge, .ff-badge[class*="position"] { font-family: var(--pp-font-display); font-weight: 600; letter-spacing: 0.04em; } /* ========================================================================== Scrollbar — Subtle Gold ========================================================================== */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--pp-navy-800); } ::-webkit-scrollbar-thumb { background: var(--pp-navy-400); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--pp-gold-dark); } /* ========================================================================== Inline Dropdown Overrides (base_professional.html) ========================================================================== */ .ff-dropdown-menu { background: var(--pp-navy-700) !important; border-color: var(--pp-gold-border) !important; } .ff-dropdown-item:hover { background: var(--pp-navy-600) !important; color: var(--pp-gold) !important; } /* Notification toast dark */ .ff-notification { background: var(--pp-navy-700); border-color: var(--pp-navy-400); color: var(--pp-text-primary); } .ff-notification-success { border-left-color: var(--pp-tier-elite); color: var(--pp-tier-elite); } .ff-notification-error { border-left-color: var(--pp-tier-below); color: var(--pp-tier-below); } .ff-notification-info { border-left-color: var(--pp-tier-good); color: var(--pp-tier-good); } /* ========================================================================== Misc — Links, HRs, generic overrides ========================================================================== */ a { color: var(--pp-gold); } a:hover { color: var(--pp-gold-light); } .ff-nav-brand:hover { text-decoration: none; } hr { border-color: var(--pp-navy-500); } /* Selection highlight */ ::selection { background: var(--pp-gold); color: var(--pp-navy-900); } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 768px) { .pp-hero { padding: 1.25rem 1.5rem; } .pp-hero h1 { font-size: 1.5rem; } .pp-nav-title { font-size: 1rem; } .pp-nav-subtitle { display: none; } }