/* ========================================================= Alien: Isolation Creator Program — brand-guide-aligned theme Sourced from docs/design_reference/alien-isolation-2.md ========================================================= */ html.alien-isolation-2 { /* Body-scroll lock — toggled by the modal's toggleFreeze() helper, which adds `.frozen` to every `.freezable` element. The page's carries both classes via useHead() (`alien-isolation-2 freezable`), so when the modal opens, html.alien-isolation-2.frozen stops the background page from scrolling under it. */ &.frozen { overflow: hidden; } &:root { /* ── Official AI2 palette (Brand Guide p.34) ───────────── */ --ai2-crt-black: 14 14 14; /* #0E0E0E — primary bg */ --ai2-xenomorph-green: 21 27 21; /* #151B15 — secondary surface */ --ai2-terminal-green: 117 171 128; /* #75AB80 — phosphor / CTA */ --ai2-acid-green: 164 246 89; /* #A4F659 — hover / urgent highlight */ --ai2-nostromo-grey: 149 149 149; /* #959595 — neutral secondary */ --ai2-bleak-grey: 105 105 105; /* #696969 — muted text */ --ai2-divider-grey: 149 149 149; /* #959595 — Nostromo Grey */ --ai2-crt-white: 255 255 255; /* #FFFFFF — primary text */ --ai2-alert-red: 219 59 38; /* #DB3B26 — errors only */ /* ── Project framework variable overrides ──────────────── */ --color-palette-branding-normal: #75AB80; --color-palette-branding-lucent: #151B15; --app-styling-background: rgb(var(--ai2-crt-black)); --app-styling-foreground: rgb(var(--ai2-crt-white)); --app-styling-slate-level-1: rgb(var(--ai2-xenomorph-green)); --card--background: rgb(var(--ai2-crt-black)); --card--border: rgb(var(--ai2-terminal-green)); --card--color: rgb(var(--ai2-crt-white)); --header--background: rgb(var(--ai2-crt-black)); --ui-primary: #75AB80; --input-buttons-primary-bg-default: transparent; --input-buttons-primary-text-default: #75AB80; --input-buttons-primary-bg-hover: rgba(117, 171, 128, 0.08); --input-buttons-primary-text-hover: #A4F659; /* ── Dashboard semantic mappings (used by shared components) */ --ai2-highlight: #75AB80; --ai2-highlight-70: #A4F659; --ai2-dark-80: rgba(14, 14, 14, 0.85); --ai2-form-bg: #151B15; --ai2-border: 1px solid rgba(117, 171, 128, 0.45); --ai2-border-gradient: linear-gradient( 90deg, rgba(117, 171, 128, 0.0) 0%, rgba(117, 171, 128, 0.85) 50%, rgba(117, 171, 128, 0.0) 100% ); --ai2-box-shadow: 0 0 18px rgba(117, 171, 128, 0.18); --ai2-text-glow: 0 0 8px rgba(117, 171, 128, 0.55), 0 0 20px rgba(117, 171, 128, 0.25); /* ── Fonts ──────────────────────────────────────────────── */ --primary-font-family: 'Helvetica LT Std', 'Helvetica Neue', Helvetica, Arial, sans-serif; & body { font-family: var(--primary-font-family); background: rgb(var(--ai2-crt-black)); color: rgb(var(--ai2-crt-white)); } } } /* Social-auth button palette overrides. `BaseSocialButton` reads each platform's bg/hover/text from CSS vars (with the original purple/red/etc as fallbacks), so we just set the vars here. */ html.alien-isolation-2 { --social-twitch-bg: rgba(0, 0, 0, 0.75); --social-twitch-hover: rgba(0, 0, 0, 0.55); --social-twitch-text: #ffffff; --social-youtube-bg: rgba(0, 0, 0, 0.75); --social-youtube-hover: rgba(0, 0, 0, 0.55); --social-youtube-text: #ffffff; --social-x-bg: rgba(0, 0, 0, 0.75); --social-x-hover: rgba(0, 0, 0, 0.55); --social-x-text: #ffffff; --social-tiktok-bg: rgba(0, 0, 0, 0.75); --social-tiktok-hover: rgba(0, 0, 0, 0.55); --social-tiktok-text: #ffffff; } /* ── CTA buttons (Nuxt UI primary) ───────────────────────── AI2 buttons are bordered green parallelograms with a green glow over a transparent fill — not a yellow gradient. Override the shared `.nui` button to match. */ html.alien-isolation-2 button.nui { --ui-primary: #75AB80; border: 1.5px solid rgb(var(--ai2-terminal-green)) !important; background: transparent !important; color: rgb(var(--ai2-terminal-green)) !important; box-shadow: 0 0 14px rgba(117, 171, 128, 0.35), inset 0 0 8px rgba(117, 171, 128, 0.06) !important; text-shadow: 0 0 6px rgba(117, 171, 128, 0.55); border-radius: 0 !important; font-family: var(--primary-font-family); font-weight: 700; letter-spacing: 0.02em; transition: box-shadow 0.2s ease, color 0.2s ease, background 0.2s ease; } html.alien-isolation-2 button.nui:hover { background: rgba(117, 171, 128, 0.08) !important; color: rgb(var(--ai2-acid-green)) !important; box-shadow: 0 0 22px rgba(164, 246, 89, 0.5), inset 0 0 10px rgba(117, 171, 128, 0.18) !important; } /* ── Base CTA (Brand Guide p.42 — "Buttons | CTA") ────────── PS layer spec from the brand pack: - Interior: black at 75% fill - Border: #75AB80 (Terminal Green) 2px - Outer Glow: #A4F659 (Acid Green) — faint outer halo - Inner Glow: #00FF06 — bright ring inside the border Lives in the global stylesheet so the same button styling is available on the landing page, the header, and the application modal without having to redeclare it. */ html.alien-isolation-2 .ai2-cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.95rem 2.6rem; background: rgba(0, 0, 0, 0.75); border: 2px solid rgb(var(--ai2-terminal-green)); color: rgb(var(--ai2-crt-white)); font-family: 'Helvetica LT Std', Helvetica, Arial, sans-serif; font-weight: 700; font-size: 1rem; letter-spacing: 0.01em; text-transform: none; border-radius: 0; cursor: pointer; position: relative; box-shadow: 0 0 6px rgba(164, 246, 89, 0.30), inset 0 0 12px 1px rgba(0, 255, 6, 0.55), inset 0 0 24px 2px rgba(0, 255, 6, 0.18); transition: box-shadow 0.2s ease, background-color 0.2s ease; } html.alien-isolation-2 .ai2-cta:hover { background: rgba(0, 0, 0, 0.55); box-shadow: 0 0 8px rgba(164, 246, 89, 0.45), inset 0 0 14px 1px rgba(0, 255, 6, 0.70), inset 0 0 28px 3px rgba(0, 255, 6, 0.25); } html.alien-isolation-2 .ai2-cta:disabled { opacity: 0.4; cursor: not-allowed; } html.alien-isolation-2 .ai2-cta--hero { padding: 1.15rem 3.4rem; font-size: 1rem; } /* ── Alignment modifiers for .ai2-cta (Brand Guide p.42) ─── Three variants insert thick green bar(s) inside the border via ::before / ::after pseudos. Lives in the global stylesheet so the modifiers work on every AI2 CTA across components — hero, header, modal, etc. — not just the scoped instances on the landing page. - .ai2-cta--left thick LEFT bar — label pushed right - .ai2-cta--center thick LEFT + RIGHT bars — label centered - .ai2-cta--right thick RIGHT bar — label pushed left Requires the host button to be `position: relative` (which all .ai2-cta variants already are). */ html.alien-isolation-2 .ai2-cta--left::before, html.alien-isolation-2 .ai2-cta--right::after, html.alien-isolation-2 .ai2-cta--center::before, html.alien-isolation-2 .ai2-cta--center::after { content: ''; position: absolute; top: 0; bottom: 0; width: clamp(10px, 5%, 28px); background: rgb(var(--ai2-terminal-green)); pointer-events: none; } html.alien-isolation-2 .ai2-cta--left::before, html.alien-isolation-2 .ai2-cta--center::before { left: 0; } html.alien-isolation-2 .ai2-cta--right::after, html.alien-isolation-2 .ai2-cta--center::after { right: 0; } /* Each variant centers the label within the remaining content area. The bar is `position: absolute` so flex's `justify-content: center` doesn't know about it; the bar-side padding here is sized to cover both the bar's width AND a "visual gap" equal to the opposite-side padding — so the resulting text-center geometrically sits midway between the bar's inner edge and the opposite border, the way the brand reference shows it. */ html.alien-isolation-2 .ai2-cta--left { justify-content: center; padding-left: clamp(2.6rem, 9%, 5rem); } html.alien-isolation-2 .ai2-cta--right { justify-content: center; padding-right: clamp(2.6rem, 9%, 5rem); } html.alien-isolation-2 .ai2-cta--center { justify-content: center; padding-left: clamp(2.6rem, 9%, 5rem); padding-right: clamp(2.6rem, 9%, 5rem); } /* ── Sharp corners everywhere — match the brand guide ──────── */ html.alien-isolation-2 button, html.alien-isolation-2 input, html.alien-isolation-2 select, html.alien-isolation-2 textarea, html.alien-isolation-2 [class*="card"] { border-radius: 0; } /* ── Form fields — terminal-style inputs ──────────────────── Override BaseForm's boxed inputs into something that reads as a CRT-screen field: dark green-tinted fill, thin green border, and green-glow focus. */ html.alien-isolation-2 input:not([type='checkbox']):not([type='radio']):not([type='submit']), html.alien-isolation-2 textarea, html.alien-isolation-2 select { background: rgba(21, 27, 21, 0.45) !important; border: 1px solid rgba(117, 171, 128, 0.35) !important; color: rgb(var(--ai2-crt-white)) !important; font-family: var(--primary-font-family); } html.alien-isolation-2 input:not([type='checkbox']):not([type='radio']):not([type='submit']):focus, html.alien-isolation-2 textarea:focus, html.alien-isolation-2 select:focus { outline: none; border-color: rgb(var(--ai2-terminal-green)) !important; box-shadow: 0 0 12px rgba(117, 171, 128, 0.4) !important; } /* ── @font-face declarations ──────────────────────────────── */ @font-face { font-family: 'Helvetica LT Std'; font-weight: 400; font-style: normal; font-display: swap; src: url('/fonts/alien-isolation-2/Helvetica LT Std Roman/Helvetica LT Std Roman.otf') format('opentype'); } @font-face { font-family: 'Helvetica LT Std'; font-weight: 700; font-style: normal; font-display: swap; src: url('/fonts/alien-isolation-2/Helvetica LT Std Bold/Helvetica LT Std Bold.otf') format('opentype'); } /* ── Shared site-level utility classes ────────────────────── */ /* CRT phosphor glow on display headlines */ html.alien-isolation-2 .ai2-display { font-family: var(--primary-font-family); font-weight: 700; color: rgb(var(--ai2-crt-white)); text-shadow: var(--ai2-text-glow); letter-spacing: 0.04em; text-transform: uppercase; } html.alien-isolation-2 .ai2-display--green { color: rgb(var(--ai2-terminal-green)); text-shadow: 0 0 8px rgba(117, 171, 128, 0.8), 0 0 20px rgba(117, 171, 128, 0.4); } /* Universal CRT scanline overlay — apply via class to any element that should read as a "screen". The pattern stays crisp at any zoom level (cheaper than shipping a raster overlay). */ html.alien-isolation-2 .ai2-scanlines { position: relative; } html.alien-isolation-2 .ai2-scanlines::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient( to bottom, transparent 0, transparent 2px, rgba(0, 0, 0, 0.20) 2px, rgba(0, 0, 0, 0.20) 3px ); mix-blend-mode: multiply; z-index: 2; }