/* /www/apply.altproductiongroup.com/public/assets/css/apg.css * * Alt Production Group (APG) — Brand Skin * -------------------------------------- * Purpose: * - This file ONLY sets brand tokens + minimal, brand-specific overrides. * - Base layout/components come from /assets/css/base.css * - You switch the brand by setting: * * Visual direction (from logo provided): * - Deep navy / midnight infrastructure background * - Cold metallic silver + steel-blue highlights * - Clean, restrained corporate finish * - Subtle glow, not neon * * Contract: * - Override CSS variables defined in base.css: * --brand-bg-0, --brand-bg-1 * --brand-ink, --brand-ink-dim, --brand-ink-muted * --brand-accent-1, --brand-accent-2, --brand-accent-3 * --brand-gradient, --brand-gradient-soft * --brand-border, --brand-border-strong * --brand-surface, --brand-surface-2 * --brand-focus, --brand-shadow, --brand-glow, --brand-radius * * Optional: * - Provide gentle “APG aura” by tuning surfaces + focus ring. */ /* -------------------------------------------------------------------------- */ /* Scope: APG token overrides */ /* -------------------------------------------------------------------------- */ body[data-brand="apg"] { /* Backgrounds — infrastructure midnight */ --brand-bg-0: #060a12; /* near-black navy */ --brand-bg-1: #071224; /* deep steel-navy */ /* Text */ --brand-ink: #f5f7ff; --brand-ink-dim: rgba(245, 247, 255, 0.84); --brand-ink-muted: rgba(245, 247, 255, 0.64); /* Accents — steel/ice (logo reads metallic + cool blue) */ --brand-accent-1: #c8d3e6; /* metallic silver */ --brand-accent-2: #6fa6ff; /* steel-blue */ --brand-accent-3: #98b7ff; /* soft highlight (optional) */ /* Gradient + soft wash */ --brand-gradient: linear-gradient(90deg, var(--brand-accent-1), var(--brand-accent-2)); --brand-gradient-soft: linear-gradient( 135deg, rgba(200, 211, 230, 0.10), rgba(111, 166, 255, 0.09), rgba(152, 183, 255, 0.06) ); /* Borders + surfaces */ --brand-border: rgba(245, 247, 255, 0.10); --brand-border-strong: rgba(245, 247, 255, 0.18); --brand-surface: rgba(245, 247, 255, 0.055); --brand-surface-2: rgba(245, 247, 255, 0.085); /* Focus ring */ --brand-focus: rgba(111, 166, 255, 0.46); /* Shadows + subtle glow */ --brand-shadow: 0 16px 40px rgba(0, 0, 0, 0.28); --brand-glow: 0 0 0 1px rgba(111, 166, 255, 0.12), 0 0 32px rgba(111, 166, 255, 0.08); /* Corners: APG should feel engineered, slightly sharper */ --brand-radius: 14px; } /* -------------------------------------------------------------------------- */ /* Optional APG-specific micro-polish */ /* Keep this minimal. Brands should not rewrite the whole UI. */ /* -------------------------------------------------------------------------- */ /* Buttons: ensure primary text reads well on silver->blue gradient */ body[data-brand="apg"] .btn--primary { color: #070a12; /* dark ink on bright gradient */ text-decoration: none; } /* Cards: add a subtle metallic top edge */ body[data-brand="apg"] .card, body[data-brand="apg"] .lane-card, body[data-brand="apg"] .form-shell, body[data-brand="apg"] .surface { position: relative; } body[data-brand="apg"] .card::before, body[data-brand="apg"] .lane-card::before, body[data-brand="apg"] .form-shell::before, body[data-brand="apg"] .surface::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient( 180deg, rgba(200, 211, 230, 0.10), rgba(200, 211, 230, 0.00) 22% ); } /* Headings: slightly more “corporate” tracking */ body[data-brand="apg"] h1, body[data-brand="apg"] h2 { letter-spacing: -0.25px; } /* Gradient text utility reads more “steel” in APG */ body[data-brand="apg"] .grad-text { background: linear-gradient(90deg, rgba(245,247,255,0.96), var(--brand-accent-2)); -webkit-background-clip: text; background-clip: text; } /* Brandstripe: sharpen + reduce saturation */ body[data-brand="apg"] .brandstripe { height: 4px; opacity: 0.92; background: linear-gradient(90deg, rgba(200,211,230,0.95), rgba(111,166,255,0.95)); } /* Subtle grid + glow line components should feel “systems” */ body[data-brand="apg"] .glow-line__base { opacity: 0.18; } /* If you use the subtleGrid.js background, this helps it read correctly */ body[data-brand="apg"] .subtle-grid { opacity: 0.22; }