/* * dcc-base.css * Demo Command Center — Base design tokens, reset, and shared utilities. * All rules scoped to .dcc-portal-active to avoid bleedthrough on other pages. * * @package Demo_Command_Center */ /* ── Design Tokens ─────────────────────────────────────────────────────────── */ :root { /* Core palette */ --dcc-black: #07080a; --dcc-obsidian: #10121a; --dcc-deep-charcoal:#1a1c26; --dcc-charcoal: #252830; --dcc-smoke: #3a3d4a; --dcc-smoke-light: #5a5e70; /* Brand accents */ --dcc-bronze: #c49b3c; --dcc-bronze-light: #e0b84a; --dcc-bronze-dark: #8c6d1f; --dcc-parchment: #e8d9b5; --dcc-parchment-dk: #c4aa7a; /* Action colors */ --dcc-roman-red: #8b1a1a; --dcc-red-mid: #b02020; --dcc-red-bright: #d43030; --dcc-ember: #f4620a; --dcc-ember-glow: rgba(244, 98, 10, 0.35); --dcc-blue: #1a3a5c; --dcc-blue-mid: #2a5a8c; --dcc-blue-accent: #4a90d9; /* Surface treatments */ --dcc-glass-bg: rgba(10, 12, 18, 0.82); --dcc-glass-border: rgba(196, 155, 60, 0.35); --dcc-glass-shine: rgba(255, 255, 255, 0.04); --dcc-overlay-dark: rgba(5, 6, 10, 0.72); --dcc-vignette: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.85) 100%); /* Typography */ --dcc-font-body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; --dcc-font-display: 'Georgia', 'Times New Roman', 'Palatino Linotype', serif; /* Sizing */ --dcc-radius-sm: 4px; --dcc-radius-md: 8px; --dcc-radius-lg: 14px; --dcc-radius-xl: 20px; /* Transitions */ --dcc-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); --dcc-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dcc-trans-fast: 150ms var(--dcc-ease); --dcc-trans-mid: 300ms var(--dcc-ease); --dcc-trans-slow: 450ms var(--dcc-ease); /* Z-index layers */ --dcc-z-bg: 0; --dcc-z-content: 10; --dcc-z-embers: 5; --dcc-z-ui: 20; --dcc-z-overlay: 30; --dcc-z-modal: 40; --dcc-z-top: 50; } /* ── Portal Reset ───────────────────────────────────────────────────────────── */ /* * Scoped to .dcc-portal-active on . * We apply our own box-model and reset common elements without affecting wp-admin. */ .dcc-portal-active *, .dcc-portal-active *::before, .dcc-portal-active *::after { box-sizing: border-box; margin: 0; padding: 0; } .dcc-portal-active { background-color: var(--dcc-black); color: var(--dcc-parchment); font-family: var(--dcc-font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* Remove default scroll bar color contamination in Firefox */ .dcc-portal-active { scrollbar-color: var(--dcc-smoke) var(--dcc-obsidian); scrollbar-width: thin; } .dcc-portal-active::-webkit-scrollbar { width: 6px; } .dcc-portal-active::-webkit-scrollbar-track { background: var(--dcc-obsidian); } .dcc-portal-active::-webkit-scrollbar-thumb { background: var(--dcc-smoke); border-radius: 3px; } /* Links */ .dcc-portal-active a { color: var(--dcc-bronze-light); text-decoration: none; transition: color var(--dcc-trans-fast); } .dcc-portal-active a:hover { color: var(--dcc-parchment); } /* Images */ .dcc-portal-active img { display: block; max-width: 100%; height: auto; } /* Buttons reset */ .dcc-portal-active button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; } /* Form elements */ .dcc-portal-active input, .dcc-portal-active textarea, .dcc-portal-active select { font-family: var(--dcc-font-body); font-size: inherit; } /* ── Accessibility ───────────────────────────────────────────────────────────── */ .dcc-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; } /* Focus ring — high-contrast tactical glow */ .dcc-portal-active :focus-visible { outline: 2px solid var(--dcc-bronze-light); outline-offset: 3px; } /* ── Reduced Motion ──────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .dcc-portal-active *, .dcc-portal-active *::before, .dcc-portal-active *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ── Shared Layer System ─────────────────────────────────────────────────────── */ /* Used by login and command-center for background layering */ .dcc-bg-layer { position: fixed; inset: 0; width: 100%; height: 100%; z-index: var(--dcc-z-bg); pointer-events: none; } .dcc-bg-image { background-size: cover; background-position: center center; background-repeat: no-repeat; /* Fallback gradient if image is missing */ background-color: var(--dcc-obsidian); animation: dcc-bg-slow-scale 40s ease-in-out infinite alternate; will-change: transform; transform-origin: center center; } @keyframes dcc-bg-slow-scale { 0% { transform: scale(1.0); } 100% { transform: scale(1.06); } } .dcc-bg-smoke { background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.3; animation: dcc-smoke-drift 60s ease-in-out infinite alternate; } @keyframes dcc-smoke-drift { 0% { transform: translateX(0) scale(1); opacity: 0.28; } 50% { opacity: 0.35; } 100% { transform: translateX(2%) scale(1.03); opacity: 0.28; } } .dcc-bg-veil { background: var(--dcc-overlay-dark); } .dcc-bg-vignette { background: var(--dcc-vignette); } /* ── Ember Particle System ───────────────────────────────────────────────────── */ .dcc-embers { position: fixed; inset: 0; z-index: var(--dcc-z-embers); pointer-events: none; overflow: hidden; } .dcc-ember-particle { position: absolute; bottom: -10px; width: 4px; height: 4px; border-radius: 50%; background: var(--dcc-ember); box-shadow: 0 0 6px 2px var(--dcc-ember-glow); animation: dcc-ember-rise var(--em-dur, 8s) var(--em-delay, 0s) ease-in infinite; opacity: 0; will-change: transform, opacity; } .dcc-ember-particle--large { width: 6px; height: 6px; } .dcc-ember-particle--small { width: 2px; height: 2px; } @keyframes dcc-ember-rise { 0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0; } 8% { opacity: 0.9; } 60% { opacity: 0.6; } 100% { transform: translateY(var(--em-rise, -600px)) translateX(var(--em-drift, 40px)) rotate(180deg); opacity: 0; } } /* ── Shared UI Utilities ─────────────────────────────────────────────────────── */ /* Bronze tactical divider rule */ .dcc-rule { display: flex; align-items: center; gap: 12px; margin: 20px 0; } .dcc-rule-line { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--dcc-glass-border), transparent); } .dcc-rule-sigil { color: var(--dcc-bronze); font-size: 18px; line-height: 1; filter: drop-shadow(0 0 6px var(--dcc-ember-glow)); } /* Status dot */ .dcc-status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--dcc-ember); box-shadow: 0 0 8px 2px var(--dcc-ember-glow); margin-right: 8px; animation: dcc-pulse-dot 2s ease-in-out infinite; } @keyframes dcc-pulse-dot { 0%, 100% { opacity: 1; box-shadow: 0 0 8px 2px var(--dcc-ember-glow); } 50% { opacity: 0.5; box-shadow: 0 0 4px 1px var(--dcc-ember-glow); } } /* Phase notice badge */ .dcc-phase-notice { display: flex; align-items: center; justify-content: center; margin-top: 20px; font-size: 11px; color: var(--dcc-smoke-light); letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.7; } .dcc-phase-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--dcc-smoke-light); margin-right: 8px; flex-shrink: 0; } /* ── High Contrast Mode Support ──────────────────────────────────────────────── */ @media (prefers-contrast: high) { .dcc-portal-active { --dcc-glass-border: rgba(196,155,60,0.7); --dcc-glass-bg: rgba(0, 0, 0, 0.95); } .dcc-portal-active .dcc-hud-nav-link { color: var(--dcc-parchment); } .dcc-portal-active .dcc-content-card { border-color: rgba(196,155,60,0.6); } .dcc-portal-active .dcc-section-body { color: var(--dcc-parchment); } } /* ── Focus ring: ensure always visible even in forced-colors mode ────────────── */ @media (forced-colors: active) { .dcc-portal-active :focus-visible { outline: 3px solid ButtonText; } .dcc-portal-active .dcc-btn-command, .dcc-portal-active .dcc-hud-cta, .dcc-portal-active .dcc-cta-btn { forced-color-adjust: none; } }