/* ═══════════════════════════════════════════════════════════════════════════════ SISTEMA DE CASAS — Ingeniería en Multimedia · Uniboyacá Dark / Light mode via [data-theme] on ═══════════════════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700;800&display=swap'); /* ── DARK THEME (default) ────────────────────────────────────────────────────── Evolved palette: deeper blue-violet-tinted backgrounds (gaming feel), the institutional red kept as the brand/action color, a violet ambient accent, and shared radius/easing tokens so motion feels consistent app-wide. */ :root, [data-theme="dark"] { --red: #C8102E; --red-bright: #F0244C; /* gradient endpoint / hovers */ --red-dark: #8B0D1F; --red-glow: rgba(220,30,70,.3); --red-subtle: rgba(220,30,70,.09); --accent: #7C5CFF; /* violet ambient accent (gaming) */ --accent-glow: rgba(124,92,255,.22); --bg: #0A0B11; --surface-0: #0A0B11; --surface-1: #111320; --surface-2: #181B2A; --surface-3: #212536; --border: #272C40; --border-hi: #3D4460; --text-1: #F2F4FB; --text-2: #A6ADC4; --text-3: #5C6379; --gold: #E3B341; --green: #2EE06A; --green-dim: rgba(46,224,106,.12); --danger-dim: rgba(220,30,70,.12); --dot-color: rgba(42,45,56,.7); --login-panel: linear-gradient(155deg, #1a0006 0%, #8B0D1F 35%, #C8102E 65%, #ff3a5c 100%); --shadow-card: inset 0 1px 0 rgba(255,255,255,.04), 0 1px 2px rgba(0,0,0,.4), 0 8px 28px rgba(0,0,0,.36); --shadow-lg: inset 0 1px 0 rgba(255,255,255,.05), 0 14px 50px rgba(0,0,0,.6); --shadow-red: 0 4px 20px var(--red-glow); --radius-sm: 9px; --radius-md: 13px; --radius-lg: 17px; --radius-xl: 22px; --ease-out: cubic-bezier(.22,1,.36,1); --ease-spring: cubic-bezier(.34,1.56,.64,1); --grad-red: linear-gradient(135deg, var(--red-bright), var(--red) 55%, var(--red-dark)); } /* ── LIGHT THEME ───────────────────────────────────────────────────────────── */ [data-theme="light"] { --red-bright: #E0244A; --red-glow: rgba(200,16,46,.22); --red-subtle: rgba(200,16,46,.07); --accent: #6D4DF2; --accent-glow: rgba(109,77,242,.16); --bg: #F3F4F9; --surface-0: #F3F4F9; --surface-1: #FFFFFF; --surface-2: #EFF1F8; --surface-3: #E4E7F2; --border: #D7DBE8; --border-hi: #AFB8CE; --text-1: #0F1014; --text-2: #3A3F52; --text-3: #8892AA; --gold: #B07800; --green: #16A34A; --green-dim: rgba(22,163,74,.1); --danger-dim: rgba(200,16,46,.08); --dot-color: rgba(180,185,200,.6); --login-panel: linear-gradient(155deg, #1a0006 0%, #8B0D1F 35%, #C8102E 65%, #ff3a5c 100%); --shadow-card: 0 1px 0 var(--border), 0 4px 18px rgba(15,16,20,.07); --shadow-lg: 0 14px 40px rgba(15,16,20,.16); --shadow-red: 0 4px 16px var(--red-glow); } /* ── RESET ─────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Inter', system-ui, sans-serif; background: var(--bg); color: var(--text-1); min-height: 100vh; font-size: 15px; line-height: 1.6; transition: background .25s, color .25s; /* Dual ambient: brand red up top, violet accent below — the "gaming" glow. */ background-image: radial-gradient(ellipse 80% 60% at 12% -5%, var(--red-subtle) 0%, transparent 58%), radial-gradient(ellipse 70% 50% at 88% 108%, var(--accent-glow) 0%, transparent 55%); background-attachment: fixed; } /* Text selection in brand red */ ::selection { background: rgba(200,16,46,.4); color: #fff; } /* Modern thin scrollbars */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 99px; border: 3px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: var(--border-hi); } * { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; } /* Can't interpolate CSS var in data URI, so use separate background-color */ body::before { content: ''; position: fixed; inset: 0; z-index: -1; background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1' cy='1' r='1' fill='rgba(255,255,255,0.06)'/%3E%3C/svg%3E"); pointer-events: none; } [data-theme="light"] body::before { background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1' cy='1' r='1' fill='rgba(0,0,0,0.05)'/%3E%3C/svg%3E"); } /* Smooth transition on all major surfaces */ header, .panel, .house-card, .cups-card, .collapsible-section, .summary-bar, .my-house-card, .howto-card, .quiz-box, .modal-box, .ctrl-card, .student-pts-card, .event-create-box, .event-active-box, .season-mgmt-box { transition: all .25s, border-color .25s, box-shadow .25s; } /* ── THEME TOGGLE BUTTON ───────────────────────────────────────────────────── */ .theme-toggle { flex-shrink: 0; width: 38px; height: 38px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.05rem; transition: background .2s, border-color .2s, transform .15s; position: relative; overflow: hidden; } .theme-toggle:hover { background: var(--surface-3); border-color: var(--border-hi); transform: scale(1.08); } .theme-toggle:active { transform: scale(.95); } .theme-toggle-icon { position: absolute; transition: opacity .2s, transform .3s; } .theme-toggle-dark { opacity: 1; transform: rotate(0deg) scale(1); } .theme-toggle-light { opacity: 0; transform: rotate(90deg) scale(.6); } [data-theme="light"] .theme-toggle-dark { opacity: 0; transform: rotate(-90deg) scale(.6); } [data-theme="light"] .theme-toggle-light { opacity: 1; transform: rotate(0deg) scale(1); } /* ═══════════════════════════════════════════════════════════════════════════════ LOGIN SCREEN ═══════════════════════════════════════════════════════════════════════════════ */ .login-screen { position: fixed; inset: 0; z-index: 500; display: flex; background: var(--bg); overflow: hidden; } .login-screen::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 52%; background: var(--login-panel); clip-path: polygon(0 0, 100% 0, 84% 100%, 0 100%); z-index: 0; } .login-screen::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 52%; clip-path: polygon(0 0, 100% 0, 84% 100%, 0 100%); background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M25 3 L47 25 L25 47 L3 25 Z' fill='none' stroke='rgba(255,255,255,0.06)' stroke-width='1'/%3E%3C/svg%3E"); z-index: 1; pointer-events: none; } .login-logo-bg { position: absolute; left: 2%; bottom: -4%; z-index: 2; font-family: 'Bebas Neue', sans-serif; font-size: clamp(10rem, 20vw, 18rem); color: rgba(255,255,255,.05); line-height: 1; pointer-events: none; letter-spacing: -0.04em; } .login-card { position: relative; z-index: 2; margin-left: auto; width: 100%; max-width: 460px; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 52px; background: var(--surface-1); border-left: 1px solid var(--border); animation: slideRight .45s cubic-bezier(.25,.8,.25,1); } @keyframes slideRight { from{opacity:0;transform:translateX(20px)} to{opacity:1;transform:translateX(0)} } .login-logo { margin-bottom: 32px; } .login-logo svg { filter: drop-shadow(0 0 16px var(--red-glow)); } .login-title { font-family: 'Bebas Neue', sans-serif; font-size: 3rem; color: var(--text-1); line-height: 1; margin-bottom: 6px; letter-spacing: .03em; } .login-subtitle { font-size: .7rem; letter-spacing: .22em; text-transform: uppercase; color: var(--red); font-weight: 700; margin-bottom: 24px; } .login-desc { font-size: .88rem; color: var(--text-2); margin-bottom: 40px; line-height: 1.65; border-left: 2px solid var(--red); padding-left: 14px; } .btn-google { display: flex; align-items: center; justify-content: center; gap: 12px; background: white; border: none; border-radius: 10px; color: #1a1a1a; text-decoration: none; font-family: 'Inter', sans-serif; font-size: .92rem; font-weight: 700; padding: 14px 24px; letter-spacing: .01em; box-shadow: 0 4px 24px rgba(0,0,0,.25); transition: transform .15s, box-shadow .15s; } .btn-google:hover { transform: translateY(-2px); box-shadow: 0 8px 36px rgba(0,0,0,.3); } .btn-google { cursor: pointer; } .login-domain-note { font-size: .76rem; color: var(--text-3); margin-top: 16px; text-align: center; } .login-domain-note strong { color: var(--text-2); } .login-code-wrap { margin-bottom: 20px; } .login-code-label { display: block; font-size: .8rem; color: var(--text-2); margin-bottom: 8px; font-weight: 500; letter-spacing: .01em; } .login-code-hint { color: var(--text-3); font-weight: 400; } .login-code-input { width: 100%; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; color: var(--text-1); font-size: 1.5rem; font-family: 'Inter', monospace; letter-spacing: 0.4em; padding: 12px 16px; text-align: center; outline: none; transition: border-color .15s, box-shadow .15s; } .login-code-input::placeholder { letter-spacing: 0.2em; color: var(--text-3); } .login-code-input:focus { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-glow); } .login-error { margin-top: 16px; background: var(--danger-dim); border: 1px solid var(--red-dark); color: #ff8080; border-radius: 6px; font-size: .84rem; padding: 10px 14px; } .login-back-btn { display: block; margin: 20px auto 0; background: none; border: none; color: var(--text-3); font-size: .82rem; cursor: pointer; padding: 6px 10px; transition: color .15s; } .login-back-btn:hover { color: var(--text-1); text-decoration: underline; } @media (max-width: 700px) { .login-screen::before, .login-screen::after, .login-logo-bg { display: none; } .login-card { margin: 0; max-width: 100%; min-height: 100svh; padding: 48px 28px; border: none; } } /* ═══════════════════════════════════════════════════════════════════════════════ QUIZ OVERLAY — full screen on mobile ═══════════════════════════════════════════════════════════════════════════════ */ .quiz-overlay { position: fixed; inset: 0; z-index: 400; background: rgba(0,0,0,.85); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 16px; } .quiz-box { background: var(--surface-1); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow-lg); width: 100%; max-width: 640px; max-height: 94svh; overflow-y: auto; animation: popIn .35s cubic-bezier(.34,1.56,.64,1); display: flex; flex-direction: column; } @keyframes popIn { from{opacity:0;transform:scale(.93)} to{opacity:1;transform:scale(1)} } .quiz-header { position: sticky; top: 0; z-index: 2; background: var(--surface-1); border-bottom: 1px solid var(--border); border-radius: 20px 20px 0 0; flex-shrink: 0; } .quiz-progress-wrap { height: 3px; background: var(--surface-3); border-radius: 20px 20px 0 0; overflow: hidden; } .quiz-progress-bar { height: 100%; background: linear-gradient(90deg, var(--red-dark), var(--red)); transition: width .4s ease; } .quiz-step { font-size: .7rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--text-3); padding: 12px 24px; } .quiz-body { padding: 28px 24px 32px; flex: 1; overflow-y: auto; } .quiz-intro-icon { font-size: 3.5rem; margin-bottom: 16px; display: block; } .quiz-intro-title { font-family: 'Bebas Neue', sans-serif; font-size: 2.4rem; color: var(--text-1); line-height: 1; margin-bottom: 12px; letter-spacing: .03em; } .quiz-intro-desc { font-size: .9rem; color: var(--text-2); line-height: 1.65; margin-bottom: 24px; } .quiz-pillars { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 28px; } .quiz-pillar { display: flex; align-items: center; gap: 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 20px; padding: 7px 14px; font-size: .8rem; font-weight: 500; color: var(--text-2); transition: border-color .2s, color .2s; } .quiz-pillar:hover { border-color: var(--red); color: var(--text-1); } .quiz-start-btn { width: 100%; justify-content: center; padding: 15px; font-size: .95rem; } .quiz-q-text { font-weight: 700; font-size: 1.1rem; color: var(--text-1); margin-bottom: 20px; line-height: 1.5; } .quiz-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; } .quiz-option { display: flex; align-items: flex-start; gap: 14px; background: var(--surface-2); border: 1.5px solid var(--border); border-radius: 10px; padding: 14px 16px; cursor: pointer; text-align: left; transition: border-color .18s, background .18s; font-size: .88rem; color: var(--text-2); width: 100%; /* big tap target */ min-height: 52px; } .quiz-option:hover { border-color: var(--border-hi); background: var(--surface-3); color: var(--text-1); } .quiz-option.selected { border-color: var(--red); background: var(--red-subtle); color: var(--text-1); box-shadow: 0 0 0 3px var(--red-glow); } .quiz-option.selected .quiz-option-letter { background: var(--red); color: white; box-shadow: 0 0 10px var(--red-glow); } .quiz-option-letter { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-3); border: 1px solid var(--border); color: var(--text-3); font-weight: 700; font-size: .75rem; display: flex; align-items: center; justify-content: center; transition: background .18s, color .18s; } .quiz-option-text { padding-top: 4px; line-height: 1.5; } .quiz-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .quiz-nav .btn { flex: 1; justify-content: center; } .quiz-result-icon { font-size: 5rem; display: block; margin-bottom: 16px; animation: bounceIn .7s cubic-bezier(.34,1.56,.64,1); } @keyframes bounceIn { from{opacity:0;transform:scale(.3) rotate(-15deg)} 60%{transform:scale(1.15) rotate(5deg)} to{opacity:1;transform:scale(1) rotate(0)} } .quiz-result-title { font-size: .7rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; } .quiz-result-house { margin-bottom: 8px; } .quiz-result-affinity { font-size: .9rem; color: var(--text-2); margin-bottom: 28px; } .quiz-result-scores { margin-bottom: 28px; } .result-score-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .result-score-label { width: 140px; font-size: .82rem; color: var(--text-2); flex-shrink: 0; } .result-score-track { flex: 1; height: 5px; background: var(--surface-3); border-radius: 3px; overflow: hidden; } .result-score-fill { height: 100%; background: linear-gradient(90deg, var(--red-dark), var(--red)); border-radius: 3px; transition: width .9s cubic-bezier(.25,.8,.25,1); } .result-score-val { width: 28px; text-align: right; font-size: .8rem; font-weight: 700; color: var(--text-1); } @media (max-width: 540px) { .quiz-overlay { padding: 0; align-items: flex-end; } .quiz-box { border-radius: 20px 20px 0 0; max-height: 96svh; max-width: 100%; } .quiz-header { border-radius: 20px 20px 0 0; } .quiz-body { padding: 20px 18px 28px; } .result-score-label { width: 110px; font-size: .76rem; } } /* ── HOUSE ICON (emoji or custom SVG/PNG) ────────────────────────────────────── Rendered by houseIconHtml() in 00-core.js. The variant scales to the container's font-size (the same knob that sizes the emoji), so a custom house icon drops in everywhere without per-place sizing. Set a house's `image` in src/houses.js (assets live in public/app/img/houses/). */ .house-icon-img { height: 1em; width: 1em; object-fit: contain; vertical-align: middle; display: inline-block; } .house-icon-emoji { display: inline-block; line-height: 1; } .modal-house-specialty { margin: 2px 0 0; font-size: .8rem; font-weight: 600; color: var(--text-3); } /* House art used as a student's default avatar (no custom avatar set). The dedicated square avatar SVG fills the slot like a photo (cover); the bordered icon, used as a fallback, is shown `contain` so its frame isn't cropped. */ .avatar-img.house-avatar-svg { object-fit: cover; } .avatar-img.house-avatar-img { object-fit: contain; }