/* /www/apply.altproductiongroup.com/public/assets/css/base.css * * APG Apply — Base Stylesheet (Foundation Layer) * ---------------------------------------------- * Intent: * - Establish a clean, corporate-grade baseline for typography, spacing, * layout primitives, and shared UI components. * - Brand styles live in /assets/css/brands/*.css and override tokens only. * - This file should be stable: you rarely touch it once it’s “right”. * * Architecture: * - base.css -> reset + tokens + primitives + shared components * - layout.css -> page layouts, grids, header/footer layout, sections * - components.css -> optional extra components (if you split later) * - brands/*.css -> per-brand tokens + scoped overrides * * Theming contract: * - * - base.css defines “brand-*” CSS variables with safe defaults. * - brand CSS files override these variables within their scope. * * Accessibility: * - high contrast, visible focus rings * - reduced motion support * - sensible tap targets */ /* -------------------------------------------------------------------------- */ /* 1) Reset + sane defaults */ /* -------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; } img, svg, video, canvas { max-width: 100%; height: auto; display: block; } button, input, select, textarea { font: inherit; color: inherit; } button { background: none; border: none; padding: 0; } a { color: inherit; text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 0; } /* -------------------------------------------------------------------------- */ /* 2) Global design tokens */ /* -------------------------------------------------------------------------- */ :root { /* Typography */ --font-sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --text-size-1: 13px; --text-size-2: 15px; --text-size-3: 17px; --text-size-4: 20px; --text-size-5: 26px; --text-size-6: 34px; --line-compact: 1.25; --line-normal: 1.5; --line-relaxed: 1.7; /* Spacing scale */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 56px; --space-10: 72px; /* Radii */ --radius-1: 8px; --radius-2: 12px; --radius-3: 16px; --radius-pill: 999px; /* Shadows (neutral defaults, brands can override via --brand-shadow/--brand-glow) */ --shadow-1: 0 10px 24px rgba(0, 0, 0, 0.18); --shadow-2: 0 18px 48px rgba(0, 0, 0, 0.24); /* Motion */ --ease-1: cubic-bezier(0.2, 0.8, 0.2, 1); --dur-1: 120ms; --dur-2: 180ms; --dur-3: 260ms; /* Layout */ --page-max: 1120px; --page-gutter: 20px; /* ---------------------------------------------------------------------- */ /* Brand token defaults (APG neutral) */ /* These are overwritten by brands/*.css, either on body[data-brand=...] */ /* or inside section[data-brand=...] scopes. */ /* ---------------------------------------------------------------------- */ --brand-bg-0: #070a12; --brand-bg-1: #0b1020; --brand-ink: #f4f6ff; --brand-ink-dim: rgba(244, 246, 255, 0.82); --brand-ink-muted: rgba(244, 246, 255, 0.64); --brand-accent-1: #7dd3fc; /* soft cyan */ --brand-accent-2: #60a5fa; /* blue */ --brand-accent-3: #a78bfa; /* violet (optional) */ --brand-gradient: linear-gradient(90deg, var(--brand-accent-1), var(--brand-accent-2)); --brand-gradient-soft: linear-gradient( 135deg, rgba(125, 211, 252, 0.10), rgba(96, 165, 250, 0.08), rgba(167, 139, 250, 0.06) ); --brand-border: rgba(255, 255, 255, 0.10); --brand-border-strong: rgba(255, 255, 255, 0.18); --brand-surface: rgba(255, 255, 255, 0.06); --brand-surface-2: rgba(255, 255, 255, 0.09); --brand-focus: rgba(125, 211, 252, 0.42); --brand-shadow: var(--shadow-1); --brand-glow: none; --brand-radius: var(--radius-3); /* Form + validation colors (neutral, brand-safe) */ --ok: #22c55e; --warn: #f59e0b; --bad: #ef4444; } /* -------------------------------------------------------------------------- */ /* 3) Base page rendering */ /* -------------------------------------------------------------------------- */ html, body { height: 100%; } body { font-family: var(--font-sans); font-size: var(--text-size-2); line-height: var(--line-normal); color: var(--brand-ink); /* Default APG background: brands override on body[data-brand] */ background: radial-gradient(1100px 680px at 20% 10%, rgba(125, 211, 252, 0.10), transparent 60%), radial-gradient(900px 560px at 80% 18%, rgba(96, 165, 250, 0.10), transparent 62%), linear-gradient(180deg, var(--brand-bg-0), var(--brand-bg-1)); } /* Content container */ .container { max-width: var(--page-max); margin: 0 auto; padding: 0 var(--page-gutter); } /* Vertical rhythm */ .stack > * + * { margin-top: var(--space-5); } /* -------------------------------------------------------------------------- */ /* 4) Typography primitives */ /* -------------------------------------------------------------------------- */ h1, h2, h3, h4 { margin: 0; line-height: var(--line-compact); } h1 { font-size: clamp(26px, 4vw, 40px); letter-spacing: -0.4px; } h2 { font-size: clamp(20px, 2.6vw, 28px); letter-spacing: -0.2px; } h3 { font-size: clamp(17px, 2.0vw, 22px); } p { margin: 0; color: var(--brand-ink-dim); } .small { font-size: var(--text-size-1); color: var(--brand-ink-muted); } .mono { font-family: var(--font-mono); } /* Gradient text utility (optional; use sparingly) */ .grad-text { background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } /* -------------------------------------------------------------------------- */ /* 5) Section primitives */ /* -------------------------------------------------------------------------- */ .section { padding: var(--space-9) 0; } .section--tight { padding: var(--space-7) 0; } .surface { background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: var(--brand-radius); box-shadow: var(--brand-shadow); } /* For brand sections that render as boxed panels */ .brand { padding: var(--space-7); border-radius: var(--brand-radius); } .brand.is-selected { border-color: var(--brand-border-strong); box-shadow: var(--brand-shadow), var(--brand-glow); } /* -------------------------------------------------------------------------- */ /* 6) Cards + grids */ /* -------------------------------------------------------------------------- */ .grid { display: grid; gap: var(--space-5); } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 980px) { .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .grid--2, .grid--3 { grid-template-columns: 1fr; } } /* Generic card */ .card { background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: calc(var(--brand-radius) - 2px); padding: var(--space-6); box-shadow: var(--brand-shadow); } /* Lane cards used by skill/domain listing */ .lane-card { background: var(--brand-surface-2); border: 1px solid var(--brand-border); border-radius: calc(var(--brand-radius) - 2px); padding: var(--space-6); box-shadow: var(--brand-shadow); } .lane-card__title { font-weight: 800; color: var(--brand-ink); } .lane-card__desc { margin-top: var(--space-2); color: var(--brand-ink-dim); } .lane-card__cta { margin-top: var(--space-4); } /* -------------------------------------------------------------------------- */ /* 7) Buttons */ /* -------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 10px 14px; border-radius: var(--radius-pill); border: 1px solid var(--brand-border); background: rgba(255, 255, 255, 0.06); color: var(--brand-ink); cursor: pointer; user-select: none; transition: transform var(--dur-1) var(--ease-1), border-color var(--dur-1) var(--ease-1), background var(--dur-1) var(--ease-1), box-shadow var(--dur-1) var(--ease-1); } .btn:hover { transform: translateY(-1px); border-color: var(--brand-border-strong); background: rgba(255, 255, 255, 0.08); box-shadow: var(--brand-shadow); } .btn:focus-visible { box-shadow: 0 0 0 3px var(--brand-focus), var(--brand-glow); } .btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; } .btn--primary { border: 0; background: var(--brand-gradient); color: #070a12; /* safe default; brand CSS may override for light/dark */ font-weight: 800; } .btn--outline { background: transparent; border-color: var(--brand-border-strong); } .btn--ghost { background: transparent; border-color: transparent; } .btn.is-loading { position: relative; } .btn.is-loading::after { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.25); border-top-color: rgba(255,255,255,0.80); display: inline-block; animation: spin 800ms linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* -------------------------------------------------------------------------- */ /* 8) Forms */ /* -------------------------------------------------------------------------- */ .form-shell { padding: var(--space-7); border-radius: var(--brand-radius); border: 1px solid var(--brand-border); background: var(--brand-surface); box-shadow: var(--brand-shadow); } .field { display: grid; gap: var(--space-2); } .label { font-weight: 700; color: var(--brand-ink); } .help-text { font-size: var(--text-size-1); color: var(--brand-ink-muted); } input[type="text"], input[type="email"], input[type="url"], select, textarea { width: 100%; padding: 12px 12px; border-radius: var(--radius-2); border: 1px solid var(--brand-border); background: rgba(255, 255, 255, 0.05); color: var(--brand-ink); transition: border-color var(--dur-1) var(--ease-1), box-shadow var(--dur-1) var(--ease-1), background var(--dur-1) var(--ease-1); } textarea { min-height: 120px; resize: vertical; } input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--brand-border-strong); box-shadow: 0 0 0 3px rgba(125, 211, 252, 0.12); } /* Inline checkbox/radio helpers */ .choice-row { display: flex; gap: var(--space-3); align-items: flex-start; } .choice-row input { margin-top: 3px; } /* Validation helpers (client-side UX; server is authoritative) */ .is-invalid { border-color: rgba(239, 68, 68, 0.65) !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.16) !important; } /* -------------------------------------------------------------------------- */ /* 9) Skills chips (shared) */ /* -------------------------------------------------------------------------- */ .skill-chip { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 10px 12px; border-radius: var(--radius-pill); border: 1px solid var(--brand-border); background: rgba(255, 255, 255, 0.05); color: var(--brand-ink); cursor: pointer; transition: transform var(--dur-1) var(--ease-1), border-color var(--dur-1) var(--ease-1), background var(--dur-1) var(--ease-1), box-shadow var(--dur-1) var(--ease-1); user-select: none; } .skill-chip:hover { transform: translateY(-1px); border-color: var(--brand-border-strong); background: rgba(255, 255, 255, 0.07); } .skill-chip.is-active { border-color: rgba(255,255,255,0.22); background: var(--brand-gradient-soft); box-shadow: var(--brand-shadow), var(--brand-glow); } /* Keyboard accessibility */ .skill-chip:focus-visible { box-shadow: 0 0 0 3px var(--brand-focus), var(--brand-glow); } /* -------------------------------------------------------------------------- */ /* 10) Brandstripe (shared divider) */ /* -------------------------------------------------------------------------- */ .brandstripe { height: 4px; border-radius: var(--radius-pill); background: var(--brand-gradient); opacity: 0.95; } /* -------------------------------------------------------------------------- */ /* 11) Toasts (optional; works with app.js toast()) */ /* -------------------------------------------------------------------------- */ #toastHost { position: fixed; right: var(--space-5); bottom: var(--space-5); display: grid; gap: var(--space-3); z-index: 9999; width: min(420px, calc(100vw - 40px)); pointer-events: none; } .toast { pointer-events: none; padding: 12px 14px; border-radius: var(--radius-2); border: 1px solid var(--brand-border); background: rgba(0,0,0,0.60); color: var(--brand-ink); box-shadow: var(--shadow-1); transform: translateY(0); transition: transform var(--dur-2) var(--ease-1), opacity var(--dur-2) var(--ease-1); } .toast--info { border-color: rgba(255,255,255,0.16); } .toast--error { border-color: rgba(239, 68, 68, 0.42); } .toast--out { opacity: 0; transform: translateY(6px); } /* -------------------------------------------------------------------------- */ /* 12) Reduced motion */ /* -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } .btn, .skill-chip, .card, .lane-card { transition: none !important; } .btn.is-loading::after { animation: none !important; } }