/* ============================================================================ IT-Husets Arkitekturprogram — ALTERNATE THEME: "Arch Deco" (creative mode) Cyberpunk/neon homage to the original archived prototype concept (Art Deco × Miami Vice × Outrun/Synthwave — magenta + cyan on deep space black). ⚠️ OPT-IN / NON-DEFAULT. This is NOT one of the two core themes (light/dark). - It is deliberately NOT wired into the FR8 public light/dark toggle. - It is NOT WCAG 2.1 AA-guaranteed (neon-on-black, glow text, gradient fills) and so must not be the default experience on the public (AA-gated) site. - All perpetual animation is gated behind prefers-reduced-motion: no-preference. Treat as a creative/easter-egg mode, a marketing splash, or a showcase option. Load AFTER tokens.css + components.css. Activate with . It overrides the same token names the core system uses, so every component re-skins automatically; the rules below add the signature neon flourishes. ============================================================================ */ /* --------------------------------------------------------------------------- TOKEN OVERRIDES — re-skin the whole system to neon --------------------------------------------------------------------------- */ [data-theme="arch-deco"] { color-scheme: dark; /* Surface ladder — deep space → midnight blue */ --surface-0: #05050A; /* void */ --surface-1: #0A0A0F; /* page (deep space black) */ --surface-2: #15152A; /* card */ --surface-3: #1E1E38; /* card hover */ --surface-4: #16213E; /* tinted band (midnight blue) */ --surface-5: #111126; /* modal */ --surface-6: #16213E; /* footer */ /* Ink — white with a purple cast */ --ink-strong: #FFFFFF; --ink: #ECECFF; --ink-muted: #B8B8D0; --ink-subtle: #8A8AB4; /* lifted from the archive's #6b6b8a for legibility */ --ink-on-primary: #07070D; /* near-black on neon fills */ --ink-on-inverse: #ECECFF; /* Brand — neon magenta, cyan as secondary */ --color-primary: #FF31E6; /* neon magenta */ --color-primary-hover: #FF66EE; --color-primary-ink: #FF66EE; /* links/eyebrows glow pink on black */ --color-primary-soft: rgba(255, 49, 230, 0.14); --color-secondary: #00E5FF; /* electric cyan */ --color-secondary-soft: rgba(0, 229, 255, 0.12); /* Lines & focus — magenta hairlines, cyan focus */ --border: rgba(255, 49, 230, 0.22); --border-strong: rgba(255, 49, 230, 0.45); --focus-ring: #00FFFF; /* Native-select caret — tinted to ink-muted #B8B8D0 */ --field-caret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23B8B8D0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); /* Semantic — neon */ --color-success: #00FF88; --color-success-soft: rgba(0, 255, 136, 0.14); --color-warning: #FFB800; --color-warning-soft: rgba(255, 184, 0, 0.14); --color-error: #FF2E5E; --color-error-soft: rgba(255, 46, 94, 0.16); --color-info: #2BB8FF; --color-info-soft: rgba(43, 184, 255, 0.16); /* Levels — neon green / orange / red (foundational → advanced) */ --level-1: #00FF88; --level-1-soft: rgba(0, 255, 136, 0.14); --level-2: #FFB800; --level-2-soft: rgba(255, 184, 0, 0.14); --level-3: #FF2E5E; --level-3-soft: rgba(255, 46, 94, 0.16); /* Paths — neon blue / purple / orange (Utvecklare / Arkitekt / Ledare) */ --path-dev: #38A9FF; --path-dev-soft: rgba(56, 169, 255, 0.16); --path-arch: #B06BFF; --path-arch-soft: rgba(176, 107, 255, 0.16); --path-lead: #FFB52E; --path-lead-soft: rgba(255, 181, 46, 0.16); /* Elevation = magenta glow, not shadow */ --shadow-sm: 0 0 12px rgba(255, 49, 230, 0.18); --shadow-md: 0 0 24px rgba(255, 49, 230, 0.28); --shadow-lg: 0 0 44px rgba(255, 49, 230, 0.40); /* Animated pink→cyan→pink brand gradient */ --gradient-brand: linear-gradient(90deg, #FF31E6 0%, #00E5FF 50%, #FF31E6 100%); } /* --------------------------------------------------------------------------- STATIC NEON FLOURISHES (apply regardless of motion preference) --------------------------------------------------------------------------- */ /* Gradient display/heading + eyebrow text */ [data-theme="arch-deco"] .display, [data-theme="arch-deco"] .text-gradient, [data-theme="arch-deco"] h1 { background: var(--gradient-brand); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 0 18px rgba(255, 49, 230, 0.45)); } [data-theme="arch-deco"] .eyebrow { color: var(--color-secondary); text-shadow: 0 0 8px rgba(0, 229, 255, 0.6); } /* Animated grid backdrop on the page */ [data-theme="arch-deco"] body { position: relative; } [data-theme="arch-deco"] body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(255, 49, 230, 0.6) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 229, 255, 0.6) 1px, transparent 1px); background-size: 50px 50px; opacity: 0.06; } [data-theme="arch-deco"] .site-header, [data-theme="arch-deco"] main, [data-theme="arch-deco"] .site-footer { position: relative; z-index: 1; } /* Primary button — neon gradient, black ink, cyan-pink glow */ [data-theme="arch-deco"] .btn-primary { background: var(--gradient-brand); background-size: 200% auto; color: var(--ink-on-primary); text-transform: uppercase; letter-spacing: var(--tracking-wide); border-color: var(--color-primary); box-shadow: var(--shadow-md); } [data-theme="arch-deco"] .btn-secondary { background: transparent; color: var(--color-secondary); border-color: var(--color-secondary); box-shadow: 0 0 16px rgba(0, 229, 255, 0.25); } [data-theme="arch-deco"] .btn-ghost { border-color: var(--border-strong); color: var(--ink); } /* Cards — dark gradient, magenta hairline, glow + lift on hover */ [data-theme="arch-deco"] .card, [data-theme="arch-deco"] .segment-card { background: linear-gradient(135deg, #141422 0%, #15152A 50%, #1C1C30 100%); border-color: var(--border); backdrop-filter: blur(8px); } [data-theme="arch-deco"] .segment-card:hover, [data-theme="arch-deco"] .card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-lg); } [data-theme="arch-deco"] .teacher-card__photo { border-color: var(--color-secondary); box-shadow: 0 0 16px rgba(0, 229, 255, 0.4); } /* Badges — faint glow, keep labels readable */ [data-theme="arch-deco"] .badge { text-shadow: 0 0 6px currentColor; } [data-theme="arch-deco"] .badge-feature { box-shadow: 0 0 10px rgba(255, 49, 230, 0.25); } /* Stat number glow */ [data-theme="arch-deco"] .stat-card__num { color: var(--color-primary); text-shadow: 0 0 18px rgba(255, 49, 230, 0.6); } /* Header & footer neon edges */ [data-theme="arch-deco"] .site-header { background: rgba(10, 10, 15, 0.92); border-bottom-color: var(--color-primary); box-shadow: 0 2px 20px rgba(255, 49, 230, 0.2); } [data-theme="arch-deco"] .site-footer { border-top: 1px solid var(--color-primary); } [data-theme="arch-deco"] .brand__mark { box-shadow: 0 0 14px rgba(255, 49, 230, 0.5); } /* Progress, steps, current emphasis */ [data-theme="arch-deco"] .progress__bar { background: var(--gradient-brand); } [data-theme="arch-deco"] .step--current { box-shadow: 0 0 16px rgba(255, 49, 230, 0.3); } [data-theme="arch-deco"] .step--done .step__icon { box-shadow: 0 0 10px rgba(0, 255, 136, 0.6); } /* Inputs — magenta focus glow */ [data-theme="arch-deco"] .input:focus, [data-theme="arch-deco"] .select:focus, [data-theme="arch-deco"] .textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-soft), var(--shadow-sm); } /* --------------------------------------------------------------------------- MOTION — only for users who haven't asked to reduce it --------------------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { [data-theme="arch-deco"] .display, [data-theme="arch-deco"] .text-gradient, [data-theme="arch-deco"] h1, [data-theme="arch-deco"] .btn-primary { animation: ad-gradient-shift 3s ease infinite; } [data-theme="arch-deco"] .btn-primary { animation: ad-gradient-shift 3s ease infinite, ad-btn-glow 2.4s ease-in-out infinite; } [data-theme="arch-deco"] body::before { animation: ad-grid-move 20s linear infinite; } [data-theme="arch-deco"] .stat-card__num { animation: ad-number-glow 3s ease-in-out infinite; } } @keyframes ad-gradient-shift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes ad-btn-glow { 0%, 100% { box-shadow: var(--shadow-md); } 50% { box-shadow: var(--shadow-lg); } } @keyframes ad-grid-move { from { transform: translate(0, 0); } to { transform: translate(50px, 50px); } } @keyframes ad-number-glow { 0%, 100% { text-shadow: 0 0 14px rgba(255, 49, 230, 0.5); } 50% { text-shadow: 0 0 26px rgba(255, 49, 230, 0.9); } }