/* ============================================================ 0zacademy.com — Hogwarts Theme Fonts: Cinzel (headings), IM Fell English (body), Share Tech Mono ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700;900&family=IM+Fell+English:ital@0;1&family=UnifrakturMaguntia&display=swap'); [data-theme="hogwarts"] { /* Palette */ --bg: #0d0a07; --bg2: #130e08; --bg3: #1a1108; --panel: rgba(18,12,5,0.95); --border: rgba(196,164,64,0.22); --border-hi: rgba(196,164,64,0.60); --accent: #C4A440; --accent2: #8B0000; --accent3: #4a7c59; --text: #d4c5a0; --text-dim: #7a6a4a; --text-bright: #f5ead8; --card-color: #C4A440; --user-color: #C4A440; --mono: 'IM Fell English', serif; --hud: 'Cinzel', serif; --body: 'IM Fell English', serif; --glow: 0 0 12px var(--accent), 0 0 30px rgba(196,164,64,0.2); } /* --user-color is set as an inline style on so CSS variables alone can't override it. Force gold on every element that uses it. */ [data-theme="hogwarts"] .avatar-placeholder { border-color: #C4A440 !important; color: #C4A440 !important; background: rgba(196,164,64,0.06) !important; } [data-theme="hogwarts"] .avatar-ring { border-color: #C4A440 !important; } [data-theme="hogwarts"] .id-callsign { color: #C4A440 !important; } [data-theme="hogwarts"] .xp-fill { background: #C4A440 !important; box-shadow: 0 0 8px #C4A440 !important; } [data-theme="hogwarts"] .xp-glow { box-shadow: 0 0 10px #C4A440 !important; } [data-theme="hogwarts"] .sc-val { color: #C4A440 !important; } [data-theme="hogwarts"] .panel::before { background: linear-gradient(90deg, transparent, #C4A440, transparent) !important; } [data-theme="hogwarts"] .class-badge { border-color: #C4A440 !important; color: #C4A440 !important; } /* ── Override atmosphere ────────────────────────────────── */ /* Hogwarts castle background — hosted on Imgur */ [data-theme="hogwarts"] body { background-image: url('https://i.imgur.com/Bn8skF7.jpeg'); background-size: cover; background-position: center 30%; background-attachment: fixed; background-repeat: no-repeat; background-color: #0a0705; } /* Dark vignette over the photo so content stays readable */ [data-theme="hogwarts"] body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(to bottom, rgba(8,5,2,0.82) 0%, rgba(8,5,2,0.70) 40%, rgba(8,5,2,0.80) 100%); } [data-theme="hogwarts"] .scanlines { background: repeating-linear-gradient( to bottom, transparent 0px, transparent 3px, rgba(0,0,0,0.10) 3px, rgba(0,0,0,0.10) 6px ); animation: none; opacity: 0.4; } [data-theme="hogwarts"] .grid-bg { background-image: linear-gradient(rgba(196,164,64,.015) 1px, transparent 1px), linear-gradient(90deg, rgba(196,164,64,.015) 1px, transparent 1px); background-size: 60px 60px; animation: none; opacity: 0.5; } /* (parchment overlay replaced by photo vignette above) */ /* ── Candle flicker animation ───────────────────────────── */ @keyframes candleFlicker { 0%,100% { opacity: 1; text-shadow: 0 0 8px #C4A440, 0 0 20px rgba(196,164,64,0.4); } 25% { opacity: 0.9; text-shadow: 0 0 12px #d4b450, 0 0 30px rgba(196,164,64,0.5); } 50% { opacity: 0.95; text-shadow: 0 0 6px #b89030, 0 0 15px rgba(196,164,64,0.3); } 75% { opacity: 1; text-shadow: 0 0 10px #C4A440, 0 0 25px rgba(196,164,64,0.45); } } @keyframes floatRune { 0%,100% { transform: translateY(0px) rotate(0deg); opacity: 0.15; } 50% { transform: translateY(-8px) rotate(3deg); opacity: 0.25; } } /* ── HUD Header → Great Hall header ─────────────────────── */ [data-theme="hogwarts"] .hud-header { background: rgba(13,10,7,0.97); border-bottom: 1px solid var(--border); border-top: none; } [data-theme="hogwarts"] .hud-header::after { content: ''; position: absolute; bottom: -3px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity: 0.4; } [data-theme="hogwarts"] .hud-logo { font-family: 'Cinzel', serif; font-weight: 900; font-size: 1.2rem; letter-spacing: 0.15em; animation: candleFlicker 4s infinite; } [data-theme="hogwarts"] .logo-bracket { font-family: 'UnifrakturMaguntia', cursive; font-size: 1.4rem; color: var(--accent); } [data-theme="hogwarts"] .hud-stat { font-family: 'IM Fell English', serif; font-style: italic; font-size: .76rem; } /* ── Buttons → Parchment buttons ───────────────────────── */ [data-theme="hogwarts"] .btn-hud { font-family: 'Cinzel', serif; font-size: .72rem; letter-spacing: 0.08em; border: 1px solid rgba(196,164,64,0.3); color: var(--text-dim); background: rgba(196,164,64,0.04); padding: .4rem 1rem; } [data-theme="hogwarts"] .btn-hud:hover, [data-theme="hogwarts"] .btn-hud.active { border-color: var(--accent); color: var(--accent); text-shadow: 0 0 8px var(--accent); box-shadow: 0 0 12px rgba(196,164,64,0.15); background: rgba(196,164,64,0.08); } [data-theme="hogwarts"] .btn-hud.accent { border-color: var(--accent3); color: var(--accent3); } [data-theme="hogwarts"] .btn-hud.danger { border-color: var(--accent2); color: var(--accent2); } /* ── Hero → Grand Entrance ──────────────────────────────── */ [data-theme="hogwarts"] .hero-pre { font-family: 'IM Fell English', serif; font-style: italic; font-size: .88rem; letter-spacing: 0.06em; color: var(--accent); } [data-theme="hogwarts"] .hero-title { font-family: 'Cinzel', serif; font-weight: 900; letter-spacing: 0.08em; animation: candleFlicker 5s 0.5s infinite; } [data-theme="hogwarts"] .hero-accent { color: var(--accent); text-shadow: 0 0 20px var(--accent), 0 0 60px rgba(196,164,64,0.3); } [data-theme="hogwarts"] .hero-sub { font-family: 'IM Fell English', serif; font-style: italic; font-size: 1.1rem; color: var(--text-dim); } [data-theme="hogwarts"] .hero { overflow: hidden; } /* ── Class Cards → House Cards ──────────────────────────── */ [data-theme="hogwarts"] .class-card { background: rgba(10, 6, 2, 0.18); border: 1px solid rgba(196,164,64,0.25); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); position: relative; } [data-theme="hogwarts"] .class-card:hover { background: rgba(10, 6, 2, 0.30); } /* Fix cyan on stat bars inside cards */ [data-theme="hogwarts"] .stat-fill { background: #C4A440 !important; box-shadow: none !important; } [data-theme="hogwarts"] .stat-bar { background: rgba(196,164,64,0.12); } /* ── Phase badge & tags — Hogwarts ──────────────────────── */ [data-theme="hogwarts"] .card-phase { font-family: 'Cinzel', serif; font-size: .6rem; letter-spacing: .12em; color: #C4A440; border-color: rgba(196,164,64,0.4); opacity: 0.85; } [data-theme="hogwarts"] .card-tag { font-family: 'IM Fell English', serif; font-style: italic; font-size: .65rem; background: rgba(196,164,64,0.06); border-color: rgba(196,164,64,0.18); color: #9a8050; } /* Fix cyan on card labels and action text */ [data-theme="hogwarts"] .card-label { color: #C4A440 !important; text-shadow: 0 0 10px rgba(196,164,64,0.5) !important; } [data-theme="hogwarts"] .card-action { color: #C4A440 !important; } [data-theme="hogwarts"] .card-corner { border-color: rgba(196,164,64,0.5) !important; } [data-theme="hogwarts"] .class-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--card-color), transparent); opacity: 0.5; } [data-theme="hogwarts"] .class-card:hover { border-color: var(--card-color); box-shadow: 0 0 30px rgba(0,0,0,0.7), 0 0 20px color-mix(in srgb, var(--card-color) 15%, transparent); } /* Card corners → scroll flourishes */ [data-theme="hogwarts"] .card-corner { border-color: var(--card-color); border-style: solid; opacity: 0.5; width: 18px; height: 18px; } [data-theme="hogwarts"] .card-index { font-family: 'IM Fell English', serif; font-style: italic; font-size: .75rem; } [data-theme="hogwarts"] .card-label { font-family: 'Cinzel', serif; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.06em; } [data-theme="hogwarts"] .card-desc { font-family: 'IM Fell English', serif; font-style: italic; font-size: 1rem; line-height: 1.65; color: #c8b98a; } [data-theme="hogwarts"] .card-action { font-family: 'Cinzel', serif; font-size: .72rem; letter-spacing: 0.1em; } /* Stat bars → enchanted meters */ [data-theme="hogwarts"] .stat-name { font-family: 'IM Fell English', serif; font-style: italic; font-size: .72rem; } [data-theme="hogwarts"] .stat-num { font-family: 'IM Fell English', serif; font-size: .72rem; } /* ── Auth Pages ─────────────────────────────────────────── */ [data-theme="hogwarts"] .auth-card { background: rgba(18,12,5,0.97); border: 1px solid var(--border); position: relative; } [data-theme="hogwarts"] .auth-card::before { background: linear-gradient(90deg, transparent, var(--card-color, var(--accent)), transparent); } /* Scroll-style decorative corners on auth card */ [data-theme="hogwarts"] .auth-card::after { content: '✦'; position: absolute; bottom: 1rem; right: 1rem; color: var(--accent); opacity: 0.2; font-size: 1.2rem; } [data-theme="hogwarts"] .auth-title { font-family: 'Cinzel', serif; font-weight: 900; letter-spacing: 0.08em; } [data-theme="hogwarts"] .auth-breadcrumb { font-family: 'IM Fell English', serif; font-style: italic; font-size: .78rem; } [data-theme="hogwarts"] .form-label { font-family: 'IM Fell English', serif; font-style: italic; font-size: .78rem; letter-spacing: 0.04em; } [data-theme="hogwarts"] .form-input { font-family: 'IM Fell English', serif; font-size: .95rem; background: rgba(196,164,64,0.03); border-color: rgba(196,164,64,0.2); } [data-theme="hogwarts"] .form-input:focus { border-color: var(--accent); box-shadow: 0 0 10px rgba(196,164,64,0.1); background: rgba(196,164,64,0.05); } [data-theme="hogwarts"] .btn-primary { font-family: 'Cinzel', serif; font-size: .85rem; letter-spacing: 0.12em; background: rgba(196,164,64,0.08); border-color: var(--accent); color: var(--accent); } [data-theme="hogwarts"] .btn-primary:hover { background: rgba(196,164,64,0.15); box-shadow: 0 0 20px rgba(196,164,64,0.2), inset 0 0 20px rgba(196,164,64,0.05); } [data-theme="hogwarts"] .auth-switch { font-family: 'IM Fell English', serif; font-style: italic; font-size: .85rem; } /* ── Flash messages ─────────────────────────────────────── */ [data-theme="hogwarts"] .flash { font-family: 'IM Fell English', serif; font-style: italic; font-size: .88rem; } /* ── Footer → Scroll footer ─────────────────────────────── */ [data-theme="hogwarts"] .hud-footer { font-family: 'IM Fell English', serif; font-style: italic; font-size: .78rem; border-top: 1px solid var(--border); } /* ── Profile page ───────────────────────────────────────── */ [data-theme="hogwarts"] .panel { background: rgba(18,12,5,0.97); border: 1px solid var(--border); } [data-theme="hogwarts"] .panel-header { font-family: 'Cinzel', serif; font-size: .7rem; letter-spacing: 0.1em; color: var(--accent); } [data-theme="hogwarts"] .section-label { font-family: 'Cinzel', serif; font-size: .7rem; letter-spacing: 0.1em; } [data-theme="hogwarts"] .id-name { font-family: 'Cinzel', serif; font-size: 1rem; } [data-theme="hogwarts"] .id-callsign { font-family: 'IM Fell English', serif; font-style: italic; font-size: .9rem; } [data-theme="hogwarts"] .id-email { font-family: 'IM Fell English', serif; font-style: italic; } [data-theme="hogwarts"] .class-badge { font-family: 'Cinzel', serif; font-size: .7rem; letter-spacing: 0.08em; } [data-theme="hogwarts"] .xp-label { font-family: 'IM Fell English', serif; font-style: italic; font-size: .75rem; } [data-theme="hogwarts"] .xp-sub { font-family: 'IM Fell English', serif; font-style: italic; } [data-theme="hogwarts"] .sc-val { font-family: 'Cinzel', serif; font-size: 1.5rem; font-weight: 700; } [data-theme="hogwarts"] .sc-label { font-family: 'IM Fell English', serif; font-style: italic; font-size: .68rem; letter-spacing: 0.04em; } [data-theme="hogwarts"] .achievement-badge { font-family: 'IM Fell English', serif; font-style: italic; font-size: .78rem; background: rgba(196,164,64,0.04); border-color: rgba(196,164,64,0.15); } [data-theme="hogwarts"] .act-action { font-family: 'Cinzel', serif; font-size: .66rem; letter-spacing: 0.08em; } [data-theme="hogwarts"] .act-detail { font-family: 'IM Fell English', serif; font-style: italic; } [data-theme="hogwarts"] .act-time { font-family: 'IM Fell English', serif; font-style: italic; font-size: .7rem; } [data-theme="hogwarts"] .member-since { font-family: 'IM Fell English', serif; font-style: italic; } /* ── Category selector ──────────────────────────────────── */ [data-theme="hogwarts"] .cat-option { border-color: rgba(196,164,64,0.18); background: rgba(196,164,64,0.02); } [data-theme="hogwarts"] .cat-option:hover, [data-theme="hogwarts"] .cat-option.selected { border-color: var(--opt-color, var(--accent)); background: rgba(196,164,64,0.06); } [data-theme="hogwarts"] .opt-label { font-family: 'Cinzel', serif; font-size: .62rem; letter-spacing: 0.04em; } /* ── Selected class badge ───────────────────────────────── */ [data-theme="hogwarts"] .selected-class-badge { font-family: 'Cinzel', serif; font-size: .72rem; letter-spacing: 0.06em; } /* ── Login animation → floating orb ────────────────────── */ [data-theme="hogwarts"] .la-ring { border-color: var(--accent); border-style: dashed; } [data-theme="hogwarts"] .la-dot { background: var(--accent); box-shadow: 0 0 12px var(--accent), 0 0 20px rgba(196,164,64,0.4); } /* ── Form errors ────────────────────────────────────────── */ [data-theme="hogwarts"] .form-error { font-family: 'IM Fell English', serif; font-style: italic; background: rgba(139,0,0,0.08); border-color: rgba(139,0,0,0.35); color: #cc4444; } /* ── Bio text ───────────────────────────────────────────── */ [data-theme="hogwarts"] .bio-text { font-family: 'IM Fell English', serif; font-size: 1rem; line-height: 1.7; } /* ── Plugging cyan leaks — hardcoded rgba(0,255,209) overrides ── */ /* Activity log action labels */ [data-theme="hogwarts"] .act-action { color: var(--accent); } /* Activity item left border */ [data-theme="hogwarts"] .activity-item { border-left-color: rgba(196,164,64,0.3); } /* Stat card backgrounds */ [data-theme="hogwarts"] .stat-card { background: rgba(196,164,64,0.03); border-color: rgba(196,164,64,0.12); } /* Panel top accent line */ [data-theme="hogwarts"] .panel::before { background: linear-gradient(90deg, transparent, var(--user-color), transparent); } /* XP bar & glow dot */ [data-theme="hogwarts"] .xp-fill { background: var(--user-color); box-shadow: 0 0 8px var(--user-color); } [data-theme="hogwarts"] .xp-glow { box-shadow: 0 0 10px var(--user-color); } /* Avatar ring */ [data-theme="hogwarts"] .avatar-ring { border-color: var(--user-color); } /* Avatar placeholder */ [data-theme="hogwarts"] .avatar-placeholder { background: rgba(196,164,64,0.06); border-color: var(--user-color); color: var(--user-color); } /* Button hover glow — hardcoded cyan in main.css */ [data-theme="hogwarts"] .btn-hud:hover, [data-theme="hogwarts"] .btn-hud.active { box-shadow: 0 0 12px rgba(196,164,64,0.15); background: rgba(196,164,64,0.06); } /* Form input focus glow */ [data-theme="hogwarts"] .form-input:focus { box-shadow: 0 0 10px rgba(196,164,64,0.1); background: rgba(196,164,64,0.04); } /* File upload button */ [data-theme="hogwarts"] .file-input::-webkit-file-upload-button { background: rgba(196,164,64,0.06); border-color: rgba(196,164,64,0.2); color: var(--accent); } /* Category option hover/selected */ [data-theme="hogwarts"] .cat-option:hover, [data-theme="hogwarts"] .cat-option.selected { box-shadow: 0 0 14px rgba(196,164,64,0.1); } /* Primary button hover */ [data-theme="hogwarts"] .btn-primary:hover { box-shadow: 0 0 20px rgba(196,164,64,0.2), inset 0 0 20px rgba(196,164,64,0.05); } /* Stat fill bars on class cards */ [data-theme="hogwarts"] .stat-fill { background: var(--card-color); } [data-theme="hogwarts"] .class-card:hover .stat-fill { box-shadow: 0 0 8px var(--card-color); } /* Panel header border */ [data-theme="hogwarts"] .panel-header { border-bottom-color: rgba(196,164,64,0.15); } /* Section label colour */ [data-theme="hogwarts"] .section-label { color: var(--accent); } /* Stat card value colour */ [data-theme="hogwarts"] .sc-val { color: var(--user-color); } /* Online blink dot in header */ [data-theme="hogwarts"] .hud-val.online { color: var(--accent); } /* Flash info uses --accent */ [data-theme="hogwarts"] .flash-info { background: rgba(196,164,64,0.06); border-color: rgba(196,164,64,0.25); color: var(--accent); } /* ── Decorative runes floating in background ────────────── */ [data-theme="hogwarts"] .grid-bg::after { content: '⚡ ✦ ⚗ ⚡ ✦'; position: fixed; top: 15%; right: 5%; font-size: 1.5rem; letter-spacing: 3rem; color: var(--accent); opacity: 0.05; pointer-events: none; animation: floatRune 8s ease-in-out infinite; }