/* ============================================================= Oria 001 — PYP Boost Vibrant "game arena" design system. Dark-first, neon accents. ============================================================= */ /* ---- tokens -------------------------------------------------------- */ :root { --bg: #0a0820; --bg-2: #0f0c28; --panel: rgba(255, 255, 255, 0.045); --panel-solid: #15122f; --panel-2: rgba(255, 255, 255, 0.07); --border: rgba(255, 255, 255, 0.09); --border-strong: rgba(255, 255, 255, 0.16); --text: #f4f2ff; --muted: #b3aede; --faint: #8a85b8; --violet: #8b5cf6; --violet-2: #7c3aed; --cyan: #22d3ee; --pink: #ec4899; --pink-2: #f472b6; --gold: #ffcb45; --lime: #a3e635; --danger: #fb7185; --grad-primary: linear-gradient(135deg, #8b5cf6, #ec4899); --grad-cyan: linear-gradient(135deg, #22d3ee, #7c3aed); --grad-gold: linear-gradient(135deg, #ffd54a, #ff9d2e); --r-sm: 10px; --r: 16px; --r-lg: 22px; --r-xl: 28px; --shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.65); --shadow-lg: 0 30px 70px -25px rgba(0, 0, 0, 0.8); --ring: 0 0 0 3px rgba(139, 92, 246, 0.45); --font-display: "Space Grotesk", "Segoe UI", system-ui, sans-serif; --font-body: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif; --maxw: 1140px; } /* ---- reset --------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.55; font-size: 16px; min-height: 100vh; /* NOTE: horizontal-overflow clipping lives on .app-shell, NOT here. Putting any non-visible overflow on propagates to the viewport and breaks both page scrolling and `position: sticky` (Console tools). */ -webkit-font-smoothing: antialiased; } /* Freeze the background while any overlay is open (set by refreshScrollLock in app.js). position:fixed stops iOS/Android from scrolling the blurred app behind a popup; the scroll position is preserved via the inline `top`. */ body.scroll-locked { position: fixed; left: 0; right: 0; width: 100%; overflow: hidden; } body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: radial-gradient(60% 50% at 12% 8%, rgba(124, 58, 237, 0.28), transparent 60%), radial-gradient(55% 45% at 92% 12%, rgba(34, 211, 238, 0.18), transparent 60%), radial-gradient(60% 60% at 80% 95%, rgba(236, 72, 153, 0.2), transparent 60%), linear-gradient(180deg, var(--bg-2), var(--bg)); } img, svg { display: block; } button { font: inherit; color: inherit; cursor: pointer; border: none; background: none; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.12; letter-spacing: -0.01em; } input, textarea, select { font: inherit; } ul, ol { list-style: none; padding: 0; } .ic { width: 18px; height: 18px; flex: none; } .grad-text { background: var(--grad-primary); -webkit-background-clip: text; background-clip: text; color: transparent; } .muted { color: var(--muted); } /* ---- splash -------------------------------------------------------- */ #splash { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--bg-2); transition: opacity 0.5s ease; } #splash.hide { opacity: 0; pointer-events: none; } .splash-mark { width: 76px; height: 76px; animation: pop 0.6s ease, floaty 2.4s ease-in-out infinite 0.6s; } /* ---- buttons ------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 18px; border-radius: 999px; font-weight: 600; font-size: 0.94rem; transition: transform 0.18s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease; white-space: nowrap; } .btn .ic { width: 17px; height: 17px; } .btn--primary { background: var(--grad-primary); color: #fff; box-shadow: 0 10px 26px -10px rgba(236, 72, 153, 0.7); } .btn--primary:hover { box-shadow: 0 14px 32px -10px rgba(236, 72, 153, 0.9); transform: translateY(-2px); } .btn--gold { background: var(--grad-gold); color: #2a1a00; } .btn--ghost { background: var(--panel-2); color: var(--text); border: 1px solid var(--border); } .btn--ghost:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--border-strong); transform: translateY(-2px); } .btn--danger { background: rgba(251, 113, 133, 0.16); color: #ffd2d9; border: 1px solid rgba(251, 113, 133, 0.4); } .btn--danger:hover { background: rgba(251, 113, 133, 0.26); } .btn--sm { padding: 7px 13px; font-size: 0.85rem; } .btn--block { width: 100%; } .btn:focus-visible { outline: none; box-shadow: var(--ring); } .icon-btn { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--panel-2); border: 1px solid var(--border); color: var(--muted); transition: 0.2s; } .icon-btn:hover { color: var(--text); background: rgba(255, 255, 255, 0.12); } .icon-btn:focus-visible { outline: none; box-shadow: var(--ring); } /* ---- chips / tags -------------------------------------------------- */ .pts-chip { font-family: var(--font-display); font-weight: 700; font-size: 0.78rem; color: var(--gold); background: rgba(255, 203, 69, 0.13); border: 1px solid rgba(255, 203, 69, 0.3); padding: 2px 9px; border-radius: 999px; } /* Mission audience chip (Everyone / Males / Females) in the super-org editor. */ .aud-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 600; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); background: var(--panel-2); } .aud-chip .ic { width: 13px; height: 13px; } .aud-chip--male { color: #38bdf8; border-color: rgba(56, 189, 248, 0.35); background: rgba(56, 189, 248, 0.10); } .aud-chip--female { color: #f472b6; border-color: rgba(244, 114, 182, 0.35); background: rgba(244, 114, 182, 0.10); } /* Badge editor: the "complete specific missions" multi-select checklist. */ #ruleParamWrap:has(.mission-check-wrap) { grid-column: 1 / -1; } .mission-check { max-height: 210px; overflow-y: auto; overscroll-behavior: contain; border: 1px solid var(--border); border-radius: var(--r); padding: 8px 11px; display: flex; flex-direction: column; gap: 3px; background: rgba(255, 255, 255, 0.02); } .mission-check__wk > b { display: block; font-size: 0.74rem; color: var(--faint); margin: 8px 0 3px; } .mission-check__item { display: flex; align-items: center; gap: 9px; font-size: 0.88rem; cursor: pointer; padding: 3px 2px; } .mission-check__item input { width: 16px; height: 16px; flex: none; accent-color: var(--violet); } /* Two fields side by side (e.g. Assigned-to + Points in the mission editor). */ .field-row { display: flex; gap: 12px; } .field-row .field { flex: 1; min-width: 0; } .tag { display: inline-flex; align-items: center; gap: 7px; background: var(--panel-2); border: 1px solid var(--border); padding: 6px 12px; border-radius: 999px; font-size: 0.85rem; font-weight: 600; } .tag .ic { width: 15px; height: 15px; } .kicker { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8rem; font-weight: 600; color: var(--cyan); background: rgba(34, 211, 238, 0.1); border: 1px solid rgba(34, 211, 238, 0.28); padding: 5px 12px; border-radius: 999px; } .kicker .ic { width: 15px; height: 15px; } /* ============================================================= AUTH ============================================================= */ .auth { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; } .auth__art { position: relative; overflow: hidden; padding: 56px; display: flex; align-items: center; background: linear-gradient(150deg, rgba(124, 58, 237, 0.35), rgba(236, 72, 153, 0.2) 55%, rgba(34, 211, 238, 0.18)); } .auth__art-inner { position: relative; z-index: 2; max-width: 460px; } .orb { position: absolute; border-radius: 50%; filter: blur(50px); opacity: 0.6; } .orb--1 { width: 320px; height: 320px; background: #8b5cf6; top: -60px; left: -40px; animation: floaty 8s ease-in-out infinite; } .orb--2 { width: 280px; height: 280px; background: #ec4899; bottom: -40px; right: 40px; animation: floaty 10s ease-in-out infinite reverse; } .orb--3 { width: 220px; height: 220px; background: #22d3ee; bottom: 120px; left: 120px; animation: floaty 12s ease-in-out infinite; } .auth-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 40px; } /* Larger brand rocket on the sign-in art panel. */ .auth-brand .logo-mark { width: 58px; height: 58px; } .auth-brand b { font-family: var(--font-display); font-size: 1.15rem; display: block; } .auth-brand span { font-size: 0.82rem; color: rgba(255, 255, 255, 0.75); } .auth__headline { font-size: clamp(2.1rem, 4vw, 3.2rem); line-height: 1.05; } .auth__lede { margin-top: 18px; color: rgba(255, 255, 255, 0.85); font-size: 1.05rem; max-width: 40ch; } .auth__list { margin-top: 28px; display: grid; gap: 12px; } .auth__list li { display: flex; align-items: center; gap: 11px; font-weight: 500; } .auth__list .ic { width: 20px; height: 20px; color: #fff; background: rgba(255, 255, 255, 0.16); padding: 7px; box-sizing: content-box; border-radius: 10px; } .auth__panel { display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 40px 28px; } .auth-card { width: 100%; max-width: 440px; background: var(--panel-solid); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); overflow: hidden; } .auth-tabs { display: grid; grid-template-columns: 1fr 1fr; padding: 8px; gap: 6px; border-bottom: 1px solid var(--border); } .tab { padding: 11px; border-radius: 12px; font-weight: 600; color: var(--muted); transition: 0.2s; } .tab.is-active { background: var(--panel-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); } .auth-card__body { padding: 26px; } .auth-foot { margin-top: 18px; color: var(--faint); font-size: 0.82rem; text-align: center; } .auth-form { display: grid; gap: 16px; } .field { display: grid; gap: 7px; } .field__label { font-size: 0.85rem; font-weight: 600; color: var(--muted); } .field-hint { display: flex; gap: 8px; font-size: 0.8rem; color: var(--faint); align-items: flex-start; margin-top: -4px; } .field-hint .ic { width: 15px; height: 15px; margin-top: 2px; flex: none; color: var(--cyan); } .input { width: 100%; padding: 12px 14px; border-radius: var(--r-sm); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); color: var(--text); transition: 0.18s; } .input::placeholder { color: var(--faint); } .input:focus { outline: none; border-color: var(--violet); box-shadow: var(--ring); background: rgba(255, 255, 255, 0.06); } .select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23b3aede' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; } /* Native dropdown popups -> match the dark theme (fixes white-on-white options). Explicit hex (not var) so the popup is deterministic across Chrome/Edge/Firefox. */ select option, select optgroup { background-color: #15122f; color: #f4f2ff; } select optgroup { color: #b3aede; } select option:checked, select option:hover { background-color: #2a2350; color: #fff; } .pw { position: relative; display: block; } .pw .input { padding-inline-end: 44px; } /* inset-inline-end keeps the eye toggle on the trailing side: right in English, left in Arabic (RTL) — automatically, for both the login and signup fields. */ .pw__toggle { position: absolute; inset-inline-end: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; color: var(--faint); } .pw__toggle:hover { color: var(--text); } .form-error { color: #ffb3bf; font-size: 0.86rem; min-height: 0; display: none; } .form-error.show { display: block; } .auth-divider { display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: 0.8rem; } .auth-divider::before, .auth-divider::after { content: ""; height: 1px; flex: 1; background: var(--border); } .demo-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .demo-btn { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 11px; border-radius: var(--r-sm); background: var(--panel-2); border: 1px solid var(--border); font-weight: 600; font-size: 0.88rem; color: var(--muted); transition: 0.2s; } .demo-btn:hover { color: var(--text); border-color: var(--border-strong); background: rgba(255, 255, 255, 0.1); } .demo-btn .ic { width: 16px; height: 16px; } .logo-mark { width: 38px; height: 38px; flex: none; } .logo-mark svg { width: 100%; height: 100%; } /* ============================================================= APP SHELL ============================================================= */ .app-shell { min-height: 100vh; padding-bottom: 30px; overflow-x: clip; } .topbar { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(16px); background: rgba(10, 8, 32, 0.72); border-bottom: 1px solid var(--border); } .topbar__inner { max-width: var(--maxw); margin: 0 auto; padding: 12px 22px; display: flex; align-items: center; gap: 18px; } .brand { display: flex; align-items: center; gap: 11px; } .brand__text { display: flex; flex-direction: column; line-height: 1.05; } .brand__text b { font-family: var(--font-display); font-size: 1.05rem; } .brand__text i { font-style: normal; font-size: 0.74rem; color: var(--muted); } .nav { display: flex; gap: 4px; margin-left: 18px; } .nav__link { display: flex; align-items: center; gap: 8px; padding: 9px 15px; border-radius: 11px; font-weight: 600; font-size: 0.92rem; color: var(--muted); transition: 0.2s; } .nav__link .ic { width: 18px; height: 18px; } .nav__link:hover { color: var(--text); background: var(--panel); } .nav__link.is-active { color: var(--text); background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--border); } .topbar__right { margin-left: auto; display: flex; align-items: center; gap: 12px; } .user-chip { display: flex; align-items: center; gap: 10px; } .user-chip__meta { display: flex; flex-direction: column; line-height: 1.1; } .user-chip__meta b { font-size: 0.9rem; } .user-chip__meta span { font-size: 0.76rem; color: var(--gold); font-weight: 600; } .bottom-nav { display: none; } .view { max-width: var(--maxw); margin: 0 auto; padding: 30px 22px 0; display: grid; gap: 24px; } .view-enter { opacity: 0; } .view-enter-active { opacity: 1; transition: opacity 0.7s cubic-bezier(0.22, 0.61, 0.36, 1); } /* reveal entrance (only within an entering view) — gentle, slower cascade */ .view-enter .reveal { opacity: 0; transform: translateY(16px); } .view-enter-active .reveal { animation: revealUp 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) forwards; } .view-enter-active .reveal:nth-child(1) { animation-delay: 0.05s; } .view-enter-active .reveal:nth-child(2) { animation-delay: 0.13s; } .view-enter-active .reveal:nth-child(3) { animation-delay: 0.21s; } .view-enter-active .reveal:nth-child(4) { animation-delay: 0.29s; } .view-enter-active .reveal:nth-child(5) { animation-delay: 0.37s; } .view-enter-active .reveal:nth-child(n + 6) { animation-delay: 0.44s; } /* ---- page head ----------------------------------------------------- */ .page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; } .page-head__title { font-size: clamp(1.7rem, 3vw, 2.3rem); } .page-head__sub { color: var(--muted); margin-top: 7px; max-width: 64ch; } .legend { display: flex; gap: 14px; align-items: center; font-size: 0.82rem; color: var(--muted); } .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; margin-right: 4px; } .dot--current { background: var(--cyan); } .dot--done { background: var(--lime); } .dot--locked { background: var(--faint); } /* ---- panels & grids ------------------------------------------------ */ .panel { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px; box-shadow: var(--shadow); } .panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .panel__head-extra { display: flex; align-items: center; gap: 10px; } .panel__title { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; } .panel__title .ic { width: 20px; height: 20px; color: var(--violet); } .grid { display: grid; gap: 22px; } .grid--2 { grid-template-columns: 1fr 1fr; } .grid--3 { grid-template-columns: repeat(3, 1fr); } .stretch > * { height: 100%; } .section-title { display: flex; align-items: center; gap: 13px; margin-bottom: 4px; } .section-title .ic { width: 26px; height: 26px; color: var(--violet); } .section-title .crest { width: 34px; height: 34px; border-radius: 10px; font-size: 0.8rem; } .section-title h2 { font-size: 1.35rem; } .section-title p { color: var(--muted); font-size: 0.9rem; } /* ---- stat cards ---------------------------------------------------- */ .stat { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--r); background: var(--panel); border: 1px solid var(--border); } .stat__icon { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex: none; color: var(--sc); background: color-mix(in srgb, var(--sc) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sc) 30%, transparent); } .stat__icon .ic { width: 22px; height: 22px; } .stat__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .stat__value { font-family: var(--font-display); font-size: 1.6rem; line-height: 1.05; } .stat__label { font-size: 0.82rem; color: var(--muted); line-height: 1.2; } .stat__valrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .stat__wtag { font-style: normal; font-size: 0.68rem; font-weight: 700; color: var(--cyan); background: rgba(34, 211, 238, 0.12); border: 1px solid rgba(34, 211, 238, 0.25); padding: 1px 7px; border-radius: 999px; } /* organizer gender-scope bar (You are organizer for: All / Males / Females) */ .org-scope-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; max-width: var(--maxw, 1180px); margin: 0 auto; padding: 12px 24px 0; } .org-scope-bar__label { display: inline-flex; align-items: center; gap: 6px; font-size: 0.86rem; font-weight: 600; color: var(--muted); } .org-scope-bar__label svg { width: 16px; height: 16px; } /* ---- progress ------------------------------------------------------ */ .progress { height: 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; } .progress__bar { height: 100%; width: 0; border-radius: 999px; background: var(--c); transition: width 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); box-shadow: 0 0 16px -2px color-mix(in srgb, var(--violet) 60%, transparent); } .course-progress__top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; font-size: 0.9rem; color: var(--muted); } .course-progress__top b { font-family: var(--font-display); font-size: 1.2rem; color: var(--text); } /* ---- segmented + mini select -------------------------------------- */ .seg { display: inline-flex; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border); border-radius: 999px; padding: 4px; } .seg__btn { padding: 7px 15px; border-radius: 999px; font-weight: 600; font-size: 0.85rem; color: var(--muted); transition: 0.2s; } .seg__btn.is-active { background: var(--grad-primary); color: #fff; } .mini-select { padding: 8px 30px 8px 13px; border-radius: 999px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border); color: var(--text); font-weight: 600; font-size: 0.85rem; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='none' stroke='%23b3aede' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m3 5 4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } .lb-controls { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .lb-week-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 600; color: var(--cyan); background: rgba(34, 211, 238, 0.1); border: 1px solid rgba(34, 211, 238, 0.25); padding: 4px 11px; border-radius: 999px; white-space: nowrap; } .lb-week-chip svg { width: 13px; height: 13px; } /* ---- avatar / crest ------------------------------------------------ */ .avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; color: #fff; flex: none; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .avatar--lg { width: 56px; height: 56px; font-size: 1.05rem; } .avatar--xl { width: 92px; height: 92px; font-size: 1.9rem; border: 3px solid rgba(255, 255, 255, 0.18); } .crest { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 0.82rem; color: #fff; flex: none; box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.7); } .crest--lg { width: 58px; height: 58px; border-radius: 16px; font-size: 1.1rem; } /* ---- leaderboard --------------------------------------------------- */ .leaderboard { display: grid; gap: 8px; } .lb-row { display: flex; align-items: center; gap: 13px; padding: 11px 14px; border-radius: var(--r); background: rgba(255, 255, 255, 0.03); border: 1px solid transparent; transition: 0.2s; } .lb-row:hover { background: rgba(255, 255, 255, 0.06); } .lb-row.is-me { background: linear-gradient(90deg, rgba(139, 92, 246, 0.18), rgba(236, 72, 153, 0.1)); border-color: rgba(139, 92, 246, 0.4); } .lb-row__rank { width: 30px; display: grid; place-items: center; flex: none; } .lb-row__main { display: flex; flex-direction: column; line-height: 1.2; flex: 1; min-width: 0; } .lb-row__main b { font-weight: 600; display: flex; align-items: center; gap: 7px; } .lb-row__main small { color: var(--muted); font-size: 0.78rem; } .lb-row__pts { font-family: var(--font-display); display: flex; align-items: baseline; gap: 4px; color: var(--gold); } .lb-row__pts b { font-size: 1.1rem; } .lb-row__pts { font-size: 0.72rem; color: var(--faint); } .you-tag, .lead-tag { font-style: normal; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; background: var(--violet); color: #fff; padding: 2px 7px; border-radius: 999px; } .rank-medal { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 0.82rem; color: #1a1206; } .rank-1 { background: linear-gradient(135deg, #ffe27a, #f59e0b); box-shadow: 0 0 14px -2px rgba(245, 158, 11, 0.8); } .rank-2 { background: linear-gradient(135deg, #e7ebf5, #9aa6c4); } .rank-3 { background: linear-gradient(135deg, #f0b27a, #c87f43); } .rank-num { font-family: var(--font-display); font-weight: 700; color: var(--faint); } /* ---- badges -------------------------------------------------------- */ .badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; } .badge { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 16px 10px; border-radius: var(--r); background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); transition: transform 0.2s, box-shadow 0.2s, background 0.2s; text-align: center; } .badge:hover { transform: translateY(-3px); background: rgba(255, 255, 255, 0.06); } .badge__icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; } .badge__icon .ic { width: 26px; height: 26px; } .badge.is-earned .badge__icon { color: #1a1206; background: var(--bc); box-shadow: 0 0 20px -3px color-mix(in srgb, var(--bc) 75%, transparent); } .badge.is-earned { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bc) 35%, transparent); } .badge.is-locked { opacity: 0.55; } .badge.is-locked .badge__icon { color: var(--faint); background: rgba(255, 255, 255, 0.06); } .badge__name { font-size: 0.78rem; font-weight: 600; line-height: 1.2; } .ach-note { margin-top: 14px; font-size: 0.85rem; color: var(--muted); } /* ============================================================= HOME ============================================================= */ .hero { position: relative; display: grid; grid-template-columns: 1.3fr 1fr; gap: 28px; align-items: center; padding: 34px; border-radius: var(--r-xl); overflow: hidden; background: linear-gradient(135deg, rgba(124, 58, 237, 0.3), rgba(236, 72, 153, 0.16)); border: 1px solid var(--border); } .hero__bg { position: absolute; inset: 0; background: radial-gradient(50% 80% at 80% 10%, rgba(34, 211, 238, 0.25), transparent 60%); pointer-events: none; } .hero__content { position: relative; z-index: 2; } .hero__content h1 { font-size: clamp(1.8rem, 3.5vw, 2.7rem); margin: 16px 0 12px; } .hero__content p { color: rgba(255, 255, 255, 0.88); max-width: 46ch; } .hero__actions { display: flex; gap: 12px; margin-top: 22px; flex-wrap: wrap; } .hero__stats { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .hero__stats .stat { background: rgba(10, 8, 32, 0.5); backdrop-filter: blur(8px); } .week-rail { display: flex; justify-content: space-between; margin-top: 22px; position: relative; } /* connector track anchored to the first/last node centres (16px = dot radius) */ .week-rail::before { content: ""; position: absolute; top: 15px; left: 16px; right: 16px; height: 2px; background: var(--border); } /* filled portion of the progress timeline, up to the current week */ .week-rail__fill { position: absolute; top: 15px; left: 16px; height: 2px; background: var(--lime); border-radius: 2px; } html[dir="rtl"] .week-rail__fill { left: auto; right: 16px; } .rail-node { display: flex; flex-direction: column; align-items: center; gap: 7px; position: relative; z-index: 1; } .rail-dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 0.82rem; background: var(--panel-solid); border: 2px solid var(--border); color: var(--muted); } .rail-dot .ic { width: 15px; height: 15px; } .rail-node.done .rail-dot { background: var(--lime); border-color: var(--lime); color: #14210a; } .rail-node.current .rail-dot { background: var(--grad-primary); border-color: transparent; color: #fff; box-shadow: 0 0 16px -2px rgba(236, 72, 153, 0.8); animation: pulse 2s ease-in-out infinite; } .rail-label { font-size: 0.72rem; color: var(--muted); font-weight: 600; } /* team achievements */ .team-standing { display: grid; gap: 11px; } .team-standing__crest { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; } .team-standing__crest b { font-family: var(--font-display); font-size: 1.15rem; display: block; } .team-standing__crest span { font-size: 0.82rem; color: var(--muted); } .kv { display: flex; justify-content: space-between; align-items: center; font-size: 0.9rem; color: var(--muted); padding: 4px 0; } .kv b { color: var(--text); font-family: var(--font-display); } .kv.total { border-top: 1px solid var(--border); padding-top: 11px; margin-top: 3px; } .kv.total b { font-size: 1.3rem; } .win-chips { display: flex; flex-wrap: wrap; gap: 9px; } .win-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; font-weight: 600; font-size: 0.85rem; background: rgba(52, 211, 153, 0.13); border: 1px solid rgba(52, 211, 153, 0.35); color: #7ff0c4; } .win-chip .ic { width: 16px; height: 16px; } .squad { display: flex; flex-direction: column; gap: 10px; } .squad__member { display: flex; align-items: center; gap: 10px; } .squad-actions { margin-top: 18px; } .squad__name { font-weight: 600; font-size: 0.9rem; display: flex; align-items: center; gap: 8px; } /* syllabus */ .syllabus { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 16px; margin-top: 18px; } .syl-card { display: flex; gap: 14px; padding: 18px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--accent); transition: transform 0.2s, box-shadow 0.2s; } .syl-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); } .syl-card.locked { opacity: 0.62; } .syl-card__num { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex: none; font-family: var(--font-display); font-weight: 700; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); } .syl-card__num .ic { width: 20px; height: 20px; } .syl-card__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; } .syl-date { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--muted); } .syl-date .ic { width: 14px; height: 14px; } .syl-card h3 { font-size: 1.05rem; } .syl-theme { color: var(--muted); font-size: 0.85rem; margin: 3px 0 9px; } .syl-objectives { display: grid; gap: 5px; } .syl-objectives li { display: flex; gap: 8px; font-size: 0.83rem; color: var(--muted); align-items: flex-start; } .syl-objectives .ic { width: 15px; height: 15px; color: var(--lime); margin-top: 2px; flex: none; } .wtag { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; font-weight: 700; padding: 4px 9px; border-radius: 999px; } .wtag .ic { width: 13px; height: 13px; } .wtag--done { background: rgba(163, 230, 53, 0.14); color: var(--lime); } .wtag--current { background: rgba(34, 211, 238, 0.14); color: var(--cyan); } .wtag--locked { background: rgba(255, 255, 255, 0.07); color: var(--faint); } /* ============================================================= CHAMPION LIST ============================================================= */ .champ-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; } .weeks { display: grid; gap: 14px; } .week-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; transition: border-color 0.25s; } .week-card.is-current { border-color: rgba(139, 92, 246, 0.45); box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.25); } .week-card.is-locked { opacity: 0.78; } .week-card__head { width: 100%; display: flex; align-items: center; gap: 15px; padding: 18px 20px; text-align: left; } .week-card__head:hover { background: rgba(255, 255, 255, 0.03); } .week-num { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex: none; font-family: var(--font-display); font-weight: 700; font-size: 1rem; background: color-mix(in srgb, var(--accent) 20%, transparent); color: var(--accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); } .week-num .ic { width: 19px; height: 19px; } .week-card__title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .week-card__title b { font-family: var(--font-display); font-size: 1.05rem; } .week-card__title small { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.82rem; } .week-card__title small .ic { width: 14px; height: 14px; } .week-card__right { display: flex; align-items: center; gap: 12px; flex: none; } .week-card__pct { font-family: var(--font-display); font-weight: 700; color: var(--muted); font-size: 0.9rem; } .acc-chevron { color: var(--faint); transition: transform 0.25s; } .acc-chevron .ic { width: 20px; height: 20px; transform: rotate(90deg); } .week-card.is-open .acc-chevron { transform: rotate(90deg); } .week-card.is-open .acc-chevron .ic { transform: rotate(-90deg); } .acc-body { padding: 0 20px 20px; } .week-progress { display: grid; gap: 8px; margin-bottom: 16px; font-size: 0.85rem; color: var(--muted); } .locked-note { display: flex; gap: 13px; align-items: center; padding: 16px; border-radius: var(--r); background: rgba(255, 255, 255, 0.03); } .locked-note .ic { width: 24px; height: 24px; color: var(--faint); flex: none; } .locked-note b { display: block; } .locked-note span { color: var(--muted); font-size: 0.86rem; } .missions { display: grid; gap: 11px; } .mission { display: flex; gap: 13px; padding: 15px; border-radius: var(--r); background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); transition: 0.2s; } .mission.approved { background: rgba(163, 230, 53, 0.06); border-color: rgba(163, 230, 53, 0.22); } .mission.pending { border-color: rgba(34, 211, 238, 0.3); } .mission.rejected { border-color: rgba(251, 113, 133, 0.35); } .mission__check { width: 26px; height: 26px; border-radius: 8px; flex: none; border: 2px solid var(--border-strong); display: grid; place-items: center; margin-top: 2px; transition: 0.2s; } .mission__check.is-done { background: var(--lime); border-color: var(--lime); color: #14210a; } .mission__check .ic { width: 16px; height: 16px; } .mission__body { flex: 1; min-width: 0; } .mission__top { display: flex; align-items: center; gap: 10px; justify-content: space-between; } .mission__title { font-family: var(--font-display); font-size: 1rem; } .mission__desc { color: var(--muted); font-size: 0.88rem; margin-top: 4px; } .mission__note, .mission__reason { display: flex; gap: 8px; align-items: flex-start; margin-top: 9px; font-size: 0.83rem; padding: 9px 11px; border-radius: 10px; } .mission__note { background: rgba(255, 255, 255, 0.04); color: var(--muted); } .mission__note .ic { width: 14px; height: 14px; margin-top: 2px; flex: none; } .mission__reason { background: rgba(251, 113, 133, 0.1); color: #ffc2cb; } .mission__reason .ic { width: 15px; height: 15px; margin-top: 1px; flex: none; } .mission__foot { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; } .mission__closed { display: inline-flex; align-items: center; gap: 5px; color: var(--faint); font-size: 0.8rem; } .mission__closed .ic { width: 13px; height: 13px; flex: none; } .status-pill { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 600; padding: 5px 11px; border-radius: 999px; } .status-pill .ic { width: 14px; height: 14px; } .status-pill.is-approved { background: rgba(163, 230, 53, 0.14); color: var(--lime); } .status-pill.is-pending { background: rgba(34, 211, 238, 0.14); color: var(--cyan); } .status-pill.is-rejected { background: rgba(251, 113, 133, 0.14); color: var(--danger); } /* ============================================================= PROFILE ============================================================= */ .profile-hero { position: relative; display: flex; align-items: center; gap: 22px; padding: 30px; border-radius: var(--r-xl); overflow: hidden; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 35%, transparent), color-mix(in srgb, var(--accent2) 22%, transparent)); border: 1px solid var(--border); flex-wrap: wrap; } .profile-hero__bg { position: absolute; inset: 0; background: radial-gradient(40% 80% at 90% 0%, rgba(255, 255, 255, 0.12), transparent 60%); } .profile-hero > * { position: relative; z-index: 2; } .profile-hero__meta { flex: 1; min-width: 200px; } .profile-kicker { display: inline-flex; align-items: center; gap: 7px; font-size: 0.78rem; font-weight: 600; color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.14); padding: 4px 11px; border-radius: 999px; } .profile-kicker .ic { width: 14px; height: 14px; } .profile-hero__meta h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 10px 0 6px; } .profile-real { display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.9); font-weight: 600; } .profile-real .ic { width: 16px; height: 16px; } .profile-tags { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; } .profile-tags .crest { width: 24px; height: 24px; border-radius: 7px; font-size: 0.6rem; } .profile-edit { align-self: flex-end; } .profile-hero { justify-content: space-between; } .profile-hero__main { display: flex; align-items: center; gap: 22px; flex: 1; min-width: 260px; } .profile-hero__side { display: flex; flex-direction: column; align-items: flex-end; gap: 18px; } .profile-hero__stats { display: flex; gap: 24px; } .ph-stat { text-align: center; } .ph-stat b { display: block; font-size: 1.7rem; font-weight: 700; line-height: 1.05; } .ph-stat span { color: rgba(255, 255, 255, 0.72); font-size: 0.74rem; } @media (max-width: 680px) { .profile-hero__side { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; } .profile-hero__stats { gap: 18px; } } .info-list { display: grid; gap: 2px; } .info-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--border); } .info-row:last-child { border-bottom: none; } .info-row dt { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 0.9rem; } .info-row dt .ic { width: 17px; height: 17px; color: var(--violet); } .info-row dd { font-weight: 600; text-align: right; } .team-info { display: grid; gap: 11px; } .team-info__head { display: flex; align-items: center; gap: 13px; margin-bottom: 4px; } .team-info__head b { font-family: var(--font-display); font-size: 1.15rem; display: block; } .team-info__head span { font-size: 0.82rem; color: var(--muted); } .teammates { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; } .teammate { display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); font-size: 0.85rem; font-weight: 600; } .teammate .avatar { width: 28px; height: 28px; font-size: 0.7rem; } .mini-weeks { display: grid; grid-template-columns: repeat(6, 1fr); gap: 9px; margin-top: 16px; } .mini-week { text-align: center; padding: 11px 4px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); } .mini-week span { display: block; font-size: 0.72rem; color: var(--muted); } .mini-week b { font-family: var(--font-display); font-size: 0.95rem; display: inline-flex; } .mini-week b .ic { width: 14px; height: 14px; color: var(--faint); } .mini-week.done { border-color: rgba(163, 230, 53, 0.3); } .mini-week.current { border-color: rgba(139, 92, 246, 0.45); } /* ============================================================= ORGANIZER CONSOLE ============================================================= */ .admin-grid { align-items: start; } .admin-side { display: grid; gap: 22px; } .queue { display: grid; gap: 12px; } .queue-item { padding: 15px; border-radius: var(--r); background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); min-width: 0; overflow: hidden; } .queue-item__main { display: flex; align-items: center; gap: 12px; min-width: 0; } .queue-item__main > div { min-width: 0; } .queue-item__main b { font-weight: 600; } .queue-item__main small { display: block; color: var(--muted); font-size: 0.8rem; margin-top: 2px; overflow-wrap: anywhere; } .queue-item__main small.queue-item__time { display: flex; align-items: center; gap: 5px; margin-top: 4px; opacity: 0.85; } .queue-item__main small.queue-item__time .ic { width: 13px; height: 13px; flex: none; } .reveal-name { color: var(--cyan); font-weight: 600; font-size: 0.85rem; } .queue-star .ic { width: 14px; height: 14px; color: var(--gold); vertical-align: -2px; } .queue-note, .queue-mdesc { display: flex; gap: 8px; align-items: flex-start; margin: 11px 0; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); color: var(--muted); font-size: 0.85rem; min-width: 0; overflow-wrap: anywhere; word-break: break-word; } .queue-note .ic, .queue-mdesc .ic { width: 15px; height: 15px; margin-top: 2px; flex: none; } .queue-mdesc { background: rgba(124, 58, 237, 0.08); } /* Submission-queue view controls (By mission / Latest · section filter) */ .queue-controls { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; } .seg--sm { display: inline-flex; } .seg--sm button { display: inline-flex; align-items: center; gap: 5px; } .seg--sm button .ic { width: 14px; height: 14px; } .queue-secsel { width: auto; min-width: 150px; padding: 8px 12px; font-size: 0.85rem; } /* Grouped ("by mission") drop-down lists */ .qgroups { display: grid; gap: 10px; } .qgroup { border: 1px solid var(--border); border-radius: 14px; background: rgba(255, 255, 255, 0.02); overflow: hidden; } .qgroup__head { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 14px; background: none; border: 0; color: inherit; font: inherit; text-align: start; cursor: pointer; } .qgroup__count { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-size: 0.85rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--violet), var(--pink)); } .qgroup__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .qgroup__info b { font-weight: 600; font-size: 0.92rem; } .qgroup__desc { color: var(--muted); font-size: 0.8rem; line-height: 1.45; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .queue-body.is-fulldesc .qgroup__desc { -webkit-line-clamp: unset; } .qgroup__head .acc-chevron { flex: none; transition: transform 0.2s; } .qgroup__head[aria-expanded="true"] .acc-chevron { transform: rotate(90deg); } .qgroup__body { display: grid; gap: 10px; padding: 0 12px 12px; } /* The [hidden] attribute's display:none is overridden by the rule above, so the group never collapsed — restore it explicitly (higher specificity). */ .qgroup__body[hidden] { display: none; } html[dir="rtl"] .qgroup__head .acc-chevron { transform: scaleX(-1); } html[dir="rtl"] .qgroup__head[aria-expanded="true"] .acc-chevron { transform: rotate(90deg) scaleX(-1); } .queue-item__actions { display: flex; gap: 10px; margin-top: 12px; } .week-toggle-list { display: grid; gap: 10px; } .week-toggle { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); } .week-toggle__label { font-size: 0.88rem; color: var(--muted); } .week-toggle__label b { color: var(--text); font-family: var(--font-display); margin-right: 5px; } .switch { width: 46px; height: 27px; border-radius: 999px; background: rgba(255, 255, 255, 0.12); position: relative; flex: none; transition: 0.25s; border: 1px solid var(--border); } .switch__dot { position: absolute; top: 2px; left: 2px; width: 21px; height: 21px; border-radius: 50%; background: #fff; transition: 0.25s; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); } .switch.is-on { background: var(--grad-primary); border-color: transparent; } .switch.is-on .switch__dot { left: 21px; } .tool-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--border); } .tool-row:last-child { border-bottom: none; } .tool-row b { display: block; } .tool-row span { color: var(--muted); font-size: 0.82rem; } /* ---- empty / footer ------------------------------------------------ */ .empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 30px; text-align: center; color: var(--muted); } .empty .ic { width: 34px; height: 34px; color: var(--violet); opacity: 0.7; } .footer-note { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 24px 4px 8px; border-top: 1px solid var(--border); margin-top: 8px; font-size: 0.82rem; color: var(--muted); } /* ============================================================= MODAL / TOAST / CONFETTI ============================================================= */ .modal-overlay { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: rgba(5, 4, 16, 0.7); backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.22s; } .modal-overlay.show { opacity: 1; } .modal { width: 100%; max-width: 460px; background: var(--panel-solid); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); transform: translateY(14px) scale(0.98); transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1); max-height: 90vh; overflow: auto; overscroll-behavior: contain; } .modal-overlay.show .modal { transform: none; } .modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px 22px 0; } .modal__head h3 { font-size: 1.2rem; } .modal__head p { color: var(--muted); font-size: 0.86rem; margin-top: 4px; } .modal__body { padding: 18px 22px 22px; display: grid; gap: 15px; } .modal-mission { padding: 14px; border-radius: var(--r); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); } .modal-mission b { font-family: var(--font-display); } .modal-mission p { color: var(--muted); font-size: 0.86rem; margin-top: 4px; } .modal__foot { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; } .confirm-text { color: var(--muted); } .badge-modal { padding: 30px 26px; text-align: center; display: grid; gap: 12px; justify-items: center; } .badge-modal__icon { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; } .badge-modal__icon .ic { width: 40px; height: 40px; } .badge-modal__icon.is-earned { color: #1a1206; background: var(--bc); box-shadow: 0 0 30px -4px color-mix(in srgb, var(--bc) 70%, transparent); } .badge-modal__icon.is-locked { color: var(--faint); background: rgba(255, 255, 255, 0.06); } .badge-modal h3 { font-size: 1.3rem; } .badge-modal__state { font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 11px; border-radius: 999px; } .badge-modal__state.earned { background: rgba(163, 230, 53, 0.15); color: var(--lime); } .badge-modal__state.locked { background: rgba(255, 255, 255, 0.08); color: var(--faint); } .badge-modal__stat { display: inline-flex; align-items: center; gap: 7px; font-size: 0.82rem; font-weight: 600; color: var(--cyan); background: rgba(34, 211, 238, 0.08); border: 1px solid rgba(34, 211, 238, 0.2); padding: 8px 14px; border-radius: 12px; } .badge-modal__stat svg { width: 15px; height: 15px; flex: none; } .badge-modal p { color: var(--muted); } .badge-modal .btn { margin-top: 8px; } .toast-wrap { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 150; display: grid; gap: 10px; width: max-content; max-width: 90vw; } .toast { display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-radius: 14px; background: var(--panel-solid); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); font-weight: 600; font-size: 0.9rem; opacity: 0; transform: translateY(16px); transition: 0.3s cubic-bezier(0.2, 0.7, 0.2, 1); } .toast.show { opacity: 1; transform: none; } .toast .ic { width: 18px; height: 18px; flex: none; } .toast--success .ic { color: var(--lime); } .toast--info .ic { color: var(--cyan); } .toast--error { border-color: rgba(251, 113, 133, 0.5); } .toast--error .ic { color: var(--danger); } .confetti-canvas { position: fixed; inset: 0; z-index: 160; pointer-events: none; } /* ============================================================= PROGRESS RING + ENRICHED COURSE PROGRESS ============================================================= */ .mini-select:focus-visible, .mini-select:focus { outline: none; border-color: var(--violet); box-shadow: var(--ring); } .ring { position: relative; width: 130px; height: 130px; flex: none; } .ring__svg { width: 100%; height: 100%; transform: rotate(-90deg); } .ring__track { fill: none; stroke: rgba(255, 255, 255, 0.08); stroke-width: 11; } .ring__fill { fill: none; stroke: var(--c); stroke-width: 11; stroke-linecap: round; transition: stroke-dashoffset 1.1s cubic-bezier(0.2, 0.7, 0.2, 1); } .ring__center { position: absolute; inset: 0; display: grid; place-items: center; } .ring__pct { display: inline-flex; align-items: baseline; line-height: 1; } .ring__center b { font-family: var(--font-display); font-size: 2rem; line-height: 1; } .ring__center i { font-style: normal; color: var(--muted); font-weight: 600; font-size: 0.9rem; margin-left: 1px; } .course-progress { display: grid; gap: 18px; } .cp-main { display: flex; align-items: center; gap: 22px; } .cp-break { display: grid; gap: 9px; flex: 1; min-width: 0; } .cp-stat { display: flex; align-items: center; gap: 11px; } .cp-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; } .cp-stat b { font-family: var(--font-display); font-size: 1.1rem; min-width: 1.6em; } .cp-stat__label { color: var(--muted); font-size: 0.9rem; } .cp-meta { display: flex; align-items: center; gap: 8px; color: var(--faint); font-size: 0.82rem; margin-top: 4px; } .cp-meta .ic { width: 15px; height: 15px; flex: none; } .cp-msg { display: flex; align-items: flex-start; gap: 11px; padding: 13px 15px; border-radius: var(--r); background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); font-size: 0.88rem; color: var(--muted); line-height: 1.5; } .cp-msg .ic { width: 20px; height: 20px; flex: none; color: var(--violet); margin-top: 1px; } .cp-msg b { color: var(--text); } .cp-msg--win { background: linear-gradient(135deg, rgba(255, 203, 69, 0.14), rgba(236, 72, 153, 0.1)); border-color: rgba(255, 203, 69, 0.42); color: #ffe9b0; } .cp-msg--win .ic { color: var(--gold); } .cp-msg--win b { color: #fff; } .btn:disabled, .btn.is-loading { opacity: 0.6; cursor: progress; pointer-events: none; } /* ---- Batch 1: locked fields · organizer reveal toggle · badge frequency ---- */ .input.is-locked { opacity: 0.72; cursor: not-allowed; color: var(--muted); background: rgba(255, 255, 255, 0.025); } .lb-controls__right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .reveal-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.04); color: var(--muted); font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; transition: color 0.2s, border-color 0.2s, background 0.2s; } .reveal-toggle .ic { width: 16px; height: 16px; } .reveal-toggle:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.2); } .reveal-toggle.is-on { color: #fff; border-color: transparent; background: linear-gradient(135deg, var(--violet-600, #7c3aed), var(--magenta, #ec4899)); } .badge-freq { display: flex; flex-direction: column; gap: 3px; } .bf-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) 84px auto; align-items: center; gap: 12px; padding: 9px 6px; border-radius: 12px; transition: background 0.2s; } .bf-row:hover { background: rgba(255, 255, 255, 0.03); } .bf-badge { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border); } .bf-badge .ic { width: 18px; height: 18px; color: var(--bc); } .bf-name { font-weight: 600; font-size: 0.92rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bf-bar { height: 7px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); overflow: hidden; } .bf-bar i { display: block; height: 100%; border-radius: 999px; transition: width 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); } .bf-count { font-size: 0.82rem; color: var(--muted); white-space: nowrap; } .bf-count b { color: var(--text); font-size: 0.95rem; } .bf-count small { color: var(--muted); font-size: 0.85rem; } /* Typographic hierarchy — team / section names larger than the panel title above them */ .team-standing__crest b, .team-info__head b { font-size: 1.18rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; } /* ---- Batch 2: avatars (preset gallery + custom upload) ---- */ .avatar--preset { color: #fff; } .avatar--preset .ic { width: 56%; height: 56%; } .avatar--img { background-size: cover; background-position: center; color: transparent; text-indent: -9999px; } .profile-hero__avatar { position: relative; border: 0; background: none; padding: 0; cursor: pointer; border-radius: 50%; line-height: 0; } .profile-hero__avatar .avatar { transition: transform 0.2s; } .profile-hero__avatar:hover .avatar { transform: scale(1.03); } .avatar-edit { position: absolute; right: 0; bottom: 0; width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #7c3aed, #ec4899); color: #fff; display: grid; place-items: center; border: 2px solid var(--bg, #0b0a1f); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45); transition: transform 0.15s; } .avatar-edit .ic { width: 13px; height: 13px; } .profile-hero__avatar:hover .avatar-edit { transform: scale(1.12); } .ap-hint { color: var(--muted); font-size: 0.9rem; margin-bottom: 14px; line-height: 1.5; } .ap-current { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; color: var(--muted); font-size: 0.85rem; } .avatar-picker { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; } .ap-item { padding: 6px; border-radius: 16px; border: 2px solid transparent; background: rgba(255, 255, 255, 0.03); cursor: pointer; transition: border-color 0.2s, transform 0.15s, background 0.2s; display: grid; place-items: center; } .ap-item .avatar { width: 100%; height: auto; aspect-ratio: 1; } .ap-item:hover { background: rgba(255, 255, 255, 0.07); transform: translateY(-2px); } .ap-item.is-selected { border-color: var(--violet, #8b5cf6); background: rgba(124, 58, 237, 0.16); } .ap-actions { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; } .ap-upload { position: relative; overflow: hidden; cursor: pointer; } @media (max-width: 520px) { .avatar-picker { grid-template-columns: repeat(4, 1fr); } } /* ---- Batch 3: Participants (organizer) ---- */ .part-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; } .part-card { text-align: left; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); border-radius: 18px; padding: 18px; cursor: pointer; transition: transform 0.15s, border-color 0.2s, background 0.2s; display: flex; flex-direction: column; gap: 16px; color: var(--text); font: inherit; } .part-card:hover { transform: translateY(-3px); border-color: rgba(124, 58, 237, 0.5); background: rgba(124, 58, 237, 0.07); } .part-card__top { display: flex; align-items: center; gap: 12px; } .part-card__icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(135deg, #7c3aed, #22d3ee); color: #fff; flex: none; } .part-card__icon .ic { width: 22px; height: 22px; } .part-card__top > div { display: flex; flex-direction: column; } .part-card__top > div b { font-size: 1.1rem; } .part-card__top > div span { color: var(--muted); font-size: 0.82rem; } .part-card__go { margin-left: auto; color: var(--faint); } .part-card__go .ic { width: 20px; height: 20px; } .part-card__stats { display: flex; gap: 10px; } .part-card__stats > div { flex: 1; background: rgba(255, 255, 255, 0.04); border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; } .part-card__stats b { font-size: 1.35rem; font-weight: 700; } .part-card__stats span { color: var(--muted); font-size: 0.76rem; } .part-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; } .part-head__title { flex: 1; min-width: 180px; } .part-head__title h1 { font-size: 1.6rem; font-weight: 700; } .part-head__title span { color: var(--muted); font-size: 0.85rem; } .part-back .ic { transform: rotate(180deg); } .pstud-list { display: flex; flex-direction: column; gap: 8px; } .pstud { display: grid; grid-template-columns: auto minmax(110px, 1.3fr) minmax(0, 1.9fr) auto auto; align-items: center; gap: 16px; padding: 12px 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); border-radius: 14px; } .pstud__done { text-align: center; } .pstud__done b { font-size: 1.1rem; font-weight: 700; color: var(--lime, #a3e635); } .pstud__done b small { color: var(--muted); font-size: 0.78em; font-weight: 600; } /* ===== Batch 4 — league grading ===== */ .part-card { cursor: default; } .part-card__open { width: 100%; text-align: left; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; display: flex; flex-direction: column; gap: 16px; padding: 0; } .part-card__grade { margin-top: 2px; padding-top: 14px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .grade-mini { display: flex; gap: 6px; } .grade-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; border: 1px solid var(--border); white-space: nowrap; } .grade-chip .ic { width: 13px; height: 13px; } .grade-chip.is-graded { background: rgba(52, 211, 153, 0.14); color: #6ee7b7; border-color: rgba(52, 211, 153, 0.35); } .grade-chip.is-pending { background: rgba(255, 255, 255, 0.04); color: var(--muted); } .award-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.04); color: var(--muted); font-weight: 700; font-size: 0.82rem; cursor: not-allowed; font-family: inherit; white-space: nowrap; } .award-btn .ic { width: 16px; height: 16px; } .award-btn--mini { padding: 6px 11px; font-size: 0.76rem; } .award-btn.is-ready { cursor: pointer; color: #1a1730; border-color: transparent; background: linear-gradient(135deg, #ffd54a, #ff9d2e); animation: awardGlow 1.8s ease-in-out infinite; } .award-btn.is-ready:hover { filter: brightness(1.06); } @keyframes awardGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 203, 69, 0.5), 0 6px 18px -6px rgba(255, 157, 46, 0.7); } 50% { box-shadow: 0 0 18px 3px rgba(255, 203, 69, 0.55), 0 6px 22px -4px rgba(255, 157, 46, 0.9); } } @media (prefers-reduced-motion: reduce) { .award-btn.is-ready { animation: none; } } .award-done { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 999px; background: linear-gradient(135deg, rgba(255, 203, 69, 0.16), rgba(236, 72, 153, 0.12)); border: 1px solid rgba(255, 203, 69, 0.4); color: #ffe9b0; font-size: 0.82rem; white-space: nowrap; } .award-done .ic { width: 16px; height: 16px; color: var(--gold); } .award-done b { color: #fff; } .award-done--mini { padding: 6px 11px; font-size: 0.76rem; } .grade-panel { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); border-radius: 18px; padding: 16px 18px; margin-bottom: 18px; display: flex; flex-direction: column; gap: 14px; } .grade-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; } .grade-panel__head b { display: inline-flex; align-items: center; gap: 8px; font-size: 1.05rem; } .grade-panel__head b .ic { width: 18px; height: 18px; color: var(--violet); } .grade-locked { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--muted); } .grade-locked .ic { width: 14px; height: 14px; } .grade-sessions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .grade-srow { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); } .grade-srow.is-graded { border-color: rgba(52, 211, 153, 0.3); } .grade-srow__info { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .grade-srow__by { display: inline-flex; align-items: center; gap: 6px; font-size: 0.78rem; color: var(--muted); } .grade-srow__by .ic { width: 13px; height: 13px; } .grade-panel__foot { display: flex; justify-content: flex-end; } .grade-inputs { display: flex; flex-direction: column; gap: 10px; } .grade-input { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .grade-input__team { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; } .grade-input__crest { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; font-size: 0.7rem; font-weight: 700; font-family: var(--font-display); flex: none; } .grade-input input { width: 90px; text-align: center; } @media (max-width: 640px) { .grade-sessions { grid-template-columns: 1fr; } } /* ===== Batch 5 — file/photo submissions ===== */ .file-input { padding: 9px 12px; cursor: pointer; } .file-input::file-selector-button { margin-right: 12px; padding: 7px 12px; border-radius: 9px; border: 0; background: rgba(124, 58, 237, 0.22); color: var(--text); font: inherit; cursor: pointer; } .file-hint { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--muted); font-size: 0.76rem; } .file-hint .ic { width: 13px; height: 13px; } .queue-attach { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px 12px; border-radius: 12px; background: rgba(124, 58, 237, 0.1); border: 1px solid rgba(124, 58, 237, 0.3); color: var(--text); font: inherit; font-size: 0.82rem; cursor: pointer; transition: background 0.2s; max-width: 100%; } .queue-attach:hover { background: rgba(124, 58, 237, 0.18); } .queue-attach .ic { width: 16px; height: 16px; color: var(--violet); flex: none; } .queue-attach > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .queue-attach__cta { color: var(--muted); font-size: 0.74rem; font-style: normal; margin-left: auto; white-space: nowrap; } .attach-view { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--border); background: rgba(0, 0, 0, 0.25); display: grid; place-items: center; max-height: 60vh; cursor: zoom-in; } .attach-view img { max-width: 100%; max-height: 60vh; display: block; object-fit: contain; } .attach-view__zoom { position: absolute; right: 10px; bottom: 10px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: rgba(10, 8, 26, 0.72); border: 1px solid rgba(255, 255, 255, 0.18); color: #fff; font-size: 0.76rem; font-weight: 600; pointer-events: none; } .attach-view__zoom .ic { width: 14px; height: 14px; } .attach-file { display: flex; align-items: center; gap: 10px; padding: 22px; border-radius: 14px; border: 1px dashed var(--border); color: var(--text); } .attach-file .ic { width: 22px; height: 22px; color: var(--violet); } /* full-screen attachment lightbox */ .lightbox { position: fixed; inset: 0; z-index: 1000; background: rgba(6, 5, 18, 0.96); display: flex; flex-direction: column; opacity: 0; transition: opacity 0.2s ease; } .lightbox.show { opacity: 1; } .lightbox__bar { display: flex; align-items: center; gap: 12px; padding: 14px 18px; } .lightbox__name { color: var(--text); font-size: 0.9rem; margin-right: auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lightbox__btn { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--border); color: var(--text); cursor: pointer; text-decoration: none; } .lightbox__btn:hover { background: rgba(255, 255, 255, 0.16); } .lightbox__btn .ic { width: 18px; height: 18px; } .lightbox__stage { flex: 1; min-height: 0; display: grid; place-items: center; padding: 0 18px; overflow: hidden; cursor: pointer; } .lightbox__stage img { max-width: 96vw; max-height: 78vh; object-fit: contain; border-radius: 8px; cursor: zoom-in; transition: transform 0.16s ease; will-change: transform; } .lightbox__stage img.is-zoomed { cursor: move; } .lightbox__stage img.is-panning { cursor: grabbing; transition: none; } .lightbox__hint { text-align: center; padding: 12px; color: var(--muted); font-size: 0.78rem; } @media (prefers-reduced-motion: reduce) { .lightbox { transition: none; } } /* ===== Batch 6 — team formation ===== */ /* My Team gate (home) */ .myteam-gate { position: relative; } .myteam-gate__ghost { filter: blur(7px); opacity: 0.5; pointer-events: none; user-select: none; } /* The CTA is in normal flow so the gate sizes to its content. (It was position:absolute over a blurred "ghost" preview that is never rendered, which collapsed the gate to 0 height and made the CTA overlap the next panel — most visibly on phones.) */ .myteam-gate__cta { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 12px; padding: 30px 22px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--r-lg); } .myteam-gate__cta h3 { font-size: 1.15rem; } .myteam-gate__cta p { color: var(--muted); max-width: 360px; font-size: 0.9rem; } .myteam-gate__lock { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: rgba(124, 58, 237, 0.18); border: 1px solid rgba(124, 58, 237, 0.4); } .myteam-gate__lock .ic { width: 24px; height: 24px; color: var(--violet); } /* lead CTA banner */ .tf-lead-cta { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 18px; margin-bottom: 20px; background: linear-gradient(135deg, rgba(124, 58, 237, 0.16), rgba(34, 211, 238, 0.1)); border: 1px solid rgba(124, 58, 237, 0.32); } .tf-lead-cta > .ic { width: 26px; height: 26px; color: var(--gold); flex: none; } .tf-lead-cta > div { display: flex; flex-direction: column; margin-right: auto; } .tf-lead-cta b { font-size: 1.02rem; } .tf-lead-cta span { color: var(--muted); font-size: 0.84rem; } /* joinable team cards */ .tf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; align-items: start; } .tf-card { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 12px; } .tf-card__head { display: flex; align-items: center; gap: 12px; } .tf-card__head > div { display: flex; flex-direction: column; min-width: 0; } .tf-card__head > div b { font-size: 1.05rem; } .tf-card__head > div span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); font-size: 0.8rem; } .tf-card__head > div span .ic { width: 13px; height: 13px; display: inline-block; vertical-align: -2px; margin-right: 4px; } .tf-card__cap { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; color: var(--faint); font-size: 0.82rem; font-weight: 600; align-self: flex-start; } .tf-card__cap .ic { width: 13px; height: 13px; } .tf-card__desc { color: var(--muted); font-size: 0.86rem; line-height: 1.5; flex: 1; } .tf-card__foot { display: flex; justify-content: flex-end; } .tf-card__in { display: inline-flex; align-items: center; gap: 6px; color: var(--lime); font-size: 0.84rem; font-weight: 600; } .tf-card__in .ic { width: 15px; height: 15px; } .tag { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; font-size: 0.74rem; font-weight: 600; background: rgba(255, 255, 255, 0.06); color: var(--muted); border: 1px solid var(--border); } .tag .ic { width: 13px; height: 13px; } .tag--lock { background: rgba(124, 58, 237, 0.14); color: #c4b5fd; border-color: rgba(124, 58, 237, 0.34); } .tag--ok { background: rgba(52, 211, 153, 0.14); color: #6ee7b7; border-color: rgba(52, 211, 153, 0.35); } .aka-tag { font-style: normal; font-size: 0.72rem; font-weight: 600; color: var(--gold); margin-left: 6px; } .btn--gold { background: linear-gradient(135deg, #ffd54a, #ff9d2e); color: #1a1730; border-color: transparent; font-weight: 700; } .btn--gold:hover { filter: brightness(1.06); } /* ===== general polish ===== */ .tag { white-space: nowrap; } .tf-card__foot { gap: 8px; flex-wrap: wrap; align-items: center; } .tf-requested { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; font-size: 0.74rem; font-weight: 600; color: var(--gold); background: rgba(255, 203, 69, 0.12); border: 1px solid rgba(255, 203, 69, 0.3); white-space: nowrap; } .tf-requested .ic { width: 13px; height: 13px; } .bf-controls { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; } .join-reqs { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; } .join-reqs__title { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 700; color: var(--gold); } .join-reqs__title .ic { width: 14px; height: 14px; } .join-req { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); } .join-req__name { flex: 1; min-width: 0; font-weight: 600; font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .join-req__act { display: flex; gap: 6px; flex: none; } /* my team panel (formation page) */ .tf-myteam { display: flex; flex-direction: column; gap: 14px; } .tf-myteam__top { display: flex; align-items: center; gap: 12px; } .tf-myteam__top > div b { font-size: 1.15rem; } .tf-myteam__top > div span { display: block; color: var(--muted); font-size: 0.84rem; } .tf-myteam__desc { color: var(--muted); font-size: 0.9rem; line-height: 1.5; } .tf-actions { display: flex; flex-wrap: wrap; gap: 8px; } .tf-leader { font-style: normal; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--gold); margin-left: 4px; } .tf-pending { display: flex; align-items: flex-start; gap: 14px; } .tf-pending b { font-size: 1.1rem; } .tf-pending p { color: var(--muted); font-size: 0.88rem; margin: 4px 0 10px; } /* organizer: requests + all teams */ .tf-req-list { display: flex; flex-direction: column; gap: 12px; } .tf-req { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 16px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); } .tf-req__main { min-width: 0; margin-right: auto; } .tf-req__main b { font-size: 1.02rem; } .tf-req__main span { display: block; color: var(--muted); font-size: 0.8rem; } .tf-req__main p { color: var(--muted); font-size: 0.84rem; margin-top: 6px; } .tf-req__actions { display: flex; gap: 8px; flex: none; } .tf-secgroup { margin-top: 14px; } .tf-secgroup h3 { font-size: 0.92rem; color: var(--muted); margin-bottom: 8px; } .tf-team-row { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 13px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); margin-bottom: 8px; flex-wrap: wrap; } .tf-team-row__id { min-width: 0; margin-right: auto; } .tf-team-row__id b { font-size: 0.96rem; } .tf-team-row__id span { display: block; color: var(--muted); font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tf-cap { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.8rem; } /* team setup modal */ .team-setup { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 6px; } .logo-icons { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; } .logo-icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border); color: var(--text); cursor: pointer; transition: background 0.15s, border-color 0.15s; } .logo-icon:hover { background: rgba(255, 255, 255, 0.1); } .logo-icon .ic { width: 20px; height: 20px; } .logo-icon.is-on { border-color: var(--violet); background: rgba(124, 58, 237, 0.2); color: #fff; box-shadow: 0 0 0 1px var(--violet); } .logo-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .logo-swatch { width: 42px; height: 42px; border-radius: 12px; border: 2px solid transparent; cursor: pointer; } .logo-swatch.is-on { border-color: #fff; box-shadow: 0 0 0 2px var(--violet); } .logo-upload { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; padding: 10px 13px; border-radius: 12px; border: 1px dashed var(--border); color: var(--muted); font-size: 0.84rem; cursor: pointer; margin-bottom: 4px; } .logo-upload:hover { color: var(--text); border-color: var(--violet); } .logo-upload .ic { width: 16px; height: 16px; } /* crest now supports an icon or an uploaded photo */ .crest .ic { width: 56%; height: 56%; } .crest--photo { background-size: cover !important; background-position: center !important; } .join-mode { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; } .radio-tile { display: flex; align-items: flex-start; gap: 9px; padding: 12px; border-radius: 14px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.03); cursor: pointer; } .radio-tile input { margin-top: 3px; accent-color: var(--violet); } .radio-tile .ic { width: 18px; height: 18px; color: var(--violet); flex: none; margin-top: 1px; } .radio-tile span { display: flex; flex-direction: column; } .radio-tile b { font-size: 0.9rem; } .radio-tile i { font-style: normal; color: var(--muted); font-size: 0.76rem; } .radio-tile:has(input:checked) { border-color: var(--violet); background: rgba(124, 58, 237, 0.12); } /* invite / QR modal */ .invite-qr { display: grid; place-items: center; padding: 16px; } .invite-qr svg { width: 200px; height: 200px; background: #fff; padding: 10px; border-radius: 12px; } .invite-link { display: flex; gap: 8px; margin-top: 12px; } .invite-link input { flex: 1; font-size: 0.82rem; } .join-team-card { display: flex; align-items: center; gap: 14px; padding: 6px 2px 14px; } .join-team-card > div b { font-size: 1.1rem; } .join-team-card > div span { display: block; color: var(--muted); font-size: 0.82rem; } .join-team-card p { color: var(--muted); font-size: 0.86rem; margin-top: 6px; } /* welcome enroll prompt */ .welcome-enroll-note { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; border-radius: 14px; background: rgba(124, 58, 237, 0.1); border: 1px solid rgba(124, 58, 237, 0.28); margin: 6px 0 18px; } .welcome-enroll-note__ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; background: rgba(124, 58, 237, 0.22); color: #fff; } .welcome-enroll-note__ic .ic { width: 21px; height: 21px; } .welcome-enroll-note > span:last-child { color: var(--muted); font-size: 0.87rem; line-height: 1.5; } .welcome-enroll { margin-bottom: 11px; } .btn--danger { background: rgba(251, 113, 133, 0.14); border-color: rgba(251, 113, 133, 0.4); color: #fda4af; } .btn--danger:hover { background: rgba(251, 113, 133, 0.24); } @media (max-width: 560px) { .join-mode { grid-template-columns: 1fr; } } .pstud__done span { display: block; color: var(--muted); font-size: 0.7rem; white-space: nowrap; } .pstud__id { display: flex; flex-direction: column; min-width: 0; } .pstud__id b { font-size: 0.98rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pstud__id span { color: var(--muted); font-size: 0.8rem; } .pstud__act { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .pstud__act span { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--muted); max-width: 100%; } .pstud__act .ic { width: 14px; height: 14px; flex: none; } .pstud__mission { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .pstud__st { font-style: normal; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.03em; padding: 1px 7px; border-radius: 999px; } .pstud__st.approved { background: rgba(52, 211, 153, 0.18); color: #6ee7b7; } .pstud__st.pending { background: rgba(34, 211, 238, 0.18); color: #67e8f9; } .pstud__st.rejected { background: rgba(251, 113, 133, 0.18); color: #fda4af; } .pstud__pts { text-align: right; } .pstud__pts b { font-size: 1.1rem; font-weight: 700; } .pstud__pts span { display: block; color: var(--muted); font-size: 0.72rem; } .pteam-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; } .pteam { background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 14px; } .pteam__head { display: flex; align-items: center; gap: 12px; } .pteam__head > div b { font-size: 1.15rem; } .pteam__head > div span { display: block; color: var(--muted); font-size: 0.8rem; } .pteam__stats { display: flex; gap: 8px; } .pteam__stats > div { flex: 1; background: rgba(255, 255, 255, 0.04); border-radius: 12px; padding: 9px 10px; } .pteam__stats b { font-size: 1.15rem; font-weight: 700; display: block; } .pteam__stats span { color: var(--muted); font-size: 0.72rem; } .pteam__members { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; } .pteam__members .avatar { width: 30px; height: 30px; font-size: 0.7rem; } .pteam__more { color: var(--muted); font-size: 0.8rem; padding-left: 4px; } @media (max-width: 640px) { .pstud { grid-template-columns: auto 1fr auto; } .pstud__act { grid-column: 1 / -1; flex-direction: row; gap: 14px; flex-wrap: wrap; } } /* ============================================================= ORGANIZER · MISSION MANAGER ============================================================= */ .icon-btn--danger { color: var(--danger); } .icon-btn--danger:hover { background: rgba(251, 113, 133, 0.16); color: #ffd2d9; } .mm-list { display: grid; gap: 10px; } .mm-item { display: flex; align-items: flex-start; gap: 12px; padding: 13px 15px; border-radius: var(--r); background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); } .mm-item__body { flex: 1; min-width: 0; } .mm-item__top { display: flex; align-items: center; gap: 10px; } .mm-item__top b { font-family: var(--font-display); font-size: 0.98rem; } .mm-item__body p { color: var(--muted); font-size: 0.86rem; margin-top: 3px; } .mm-item__actions { display: flex; gap: 6px; flex: none; } .mm-item__actions .icon-btn { width: 36px; height: 36px; } .mm-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; flex-wrap: wrap; } .mm-total { display: inline-flex; align-items: center; gap: 8px; font-size: 0.86rem; color: var(--muted); } .mm-total .ic { width: 16px; height: 16px; color: var(--gold); } .mm-total b { color: var(--text); font-family: var(--font-display); } .mm-total.over { color: var(--gold); } /* ============================================================= ORGANIZER · BADGE MANAGER + EDITOR ============================================================= */ .bm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } .bm-card { padding: 16px; border-radius: var(--r); background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); border-top: 3px solid var(--bc); display: flex; flex-direction: column; gap: 10px; } .bm-card__head { display: flex; align-items: center; gap: 12px; } .bm-disc { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #1a1206; background: var(--bc); box-shadow: 0 0 18px -4px color-mix(in srgb, var(--bc) 70%, transparent); } .bm-disc .ic { width: 24px; height: 24px; } .bm-card__meta { min-width: 0; } .bm-card__meta b { font-family: var(--font-display); } .bm-tag { font-style: normal; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--cyan); background: rgba(34, 211, 238, 0.14); padding: 2px 7px; border-radius: 999px; margin-left: 7px; vertical-align: middle; } .bm-card__meta small { display: block; color: var(--muted); font-size: 0.78rem; margin-top: 3px; } .bm-desc { color: var(--muted); font-size: 0.85rem; flex: 1; } .bm-card__actions { display: flex; align-items: center; gap: 8px; justify-content: flex-end; } .bm-card__actions .btn { margin-right: auto; } .bm-card__actions .icon-btn { width: 36px; height: 36px; } .badge-editor { display: flex; align-items: center; gap: 16px; } .badge-editor__fields { flex: 1; min-width: 0; display: grid; gap: 12px; } .bm-disc.badge-preview { width: 62px; height: 62px; } .bm-disc.badge-preview .ic { width: 30px; height: 30px; } .icon-picker { display: grid; grid-template-columns: repeat(8, 1fr); gap: 7px; } .icon-pick { aspect-ratio: 1; border-radius: 10px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); color: var(--muted); transition: 0.18s; } .icon-pick .ic { width: 18px; height: 18px; } .icon-pick:hover { color: var(--text); background: rgba(255, 255, 255, 0.1); } .icon-pick.is-active { color: #fff; background: var(--grad-primary); border-color: transparent; } .color-picker { display: flex; flex-wrap: wrap; gap: 9px; } .color-pick { width: 30px; height: 30px; border-radius: 50%; background: var(--c); border: 2px solid transparent; box-shadow: 0 0 0 1px var(--border); transition: 0.18s; } .color-pick:hover { transform: scale(1.1); } .color-pick.is-active { border-color: #fff; box-shadow: 0 0 0 2px var(--c); } .award-list { display: grid; gap: 8px; max-height: 52vh; overflow: auto; } .award-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); text-align: left; transition: 0.18s; } .award-row:hover { background: rgba(255, 255, 255, 0.07); } .award-row__main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; } .award-row__main b { font-weight: 600; } .award-row__main small { color: var(--muted); font-size: 0.78rem; } .award-check { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; color: var(--faint); background: rgba(255, 255, 255, 0.06); transition: 0.18s; } .award-check .ic { width: 16px; height: 16px; } .award-row.is-on { border-color: rgba(163, 230, 53, 0.4); background: rgba(163, 230, 53, 0.08); } .award-row.is-on .award-check { color: #14210a; background: var(--lime); } /* ============================================================= WELCOME OVERLAY + BADGE STRIKE ============================================================= */ .medallion { display: flex; flex-direction: column; align-items: center; gap: 11px; } .medallion__disc, .flyer { width: 84px; height: 84px; border-radius: 50%; display: grid; place-items: center; color: #1a1206; background: var(--bc); box-shadow: 0 0 34px -6px color-mix(in srgb, var(--bc) 80%, transparent), inset 0 0 0 3px rgba(255, 255, 255, 0.32); } .medallion__disc .ic, .flyer .ic { width: 40px; height: 40px; } .medallion__name { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; } .medallion__stat { font-size: 0.74rem; font-weight: 600; color: var(--cyan); margin-top: 2px; } .flyer { pointer-events: none; } .welcome-overlay { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 24px; opacity: 0; background: rgba(8, 6, 24, 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); transition: opacity 0.4s ease, background 0.5s ease, backdrop-filter 0.5s ease, -webkit-backdrop-filter 0.5s ease; } .welcome-overlay.show { opacity: 1; background: rgba(8, 6, 24, 0.55); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } .welcome-overlay.unblur { background: rgba(8, 6, 24, 0); -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); } .welcome-overlay.closing { opacity: 0; } .welcome-card { width: 100%; max-width: 460px; background: var(--panel-solid); border: 1px solid var(--border-strong); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); padding: 30px 28px; text-align: center; transform: translateY(18px) scale(0.96); opacity: 0; transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.5s ease, background 0.4s ease, box-shadow 0.4s ease, border-color 0.4s ease; } .welcome-overlay.show .welcome-card { transform: none; opacity: 1; } .welcome-card.strike-mode { background: transparent; border-color: transparent; box-shadow: none; } .welcome-card.strike-mode > *:not(.welcome-badges) { opacity: 0; transform: translateY(-10px); transition: opacity 0.35s ease, transform 0.35s ease; pointer-events: none; } .welcome-card.strike-mode .welcome-badges { transform: scale(1.05); transition: transform 0.4s ease; } /* points-only celebration: fade the card and let the puck fly to the stat */ .welcome-card.points-mode { background: transparent; border-color: transparent; box-shadow: none; } .welcome-card.points-mode > * { opacity: 0; transform: translateY(-10px); transition: opacity 0.35s ease, transform 0.35s ease; pointer-events: none; } .points-flyer { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; line-height: 1; color: var(--gold, #ffcb45); text-shadow: 0 2px 16px rgba(255, 203, 69, 0.65); pointer-events: none; white-space: nowrap; } @keyframes statPop { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } } .stat.stat-pop { animation: statPop 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); box-shadow: 0 0 0 2px var(--sc), 0 0 26px -5px var(--sc); } /* Pulsing golden ring on the organizer "Pending reviews" card while a backlog exists. */ .stat.stat--pulse { border-color: color-mix(in srgb, var(--sc) 55%, transparent); animation: pulseGlow 1.6s ease-in-out infinite; } @keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--sc) 45%, transparent), 0 0 12px -2px color-mix(in srgb, var(--sc) 60%, transparent); } 50% { box-shadow: 0 0 0 2px var(--sc), 0 0 28px 2px color-mix(in srgb, var(--sc) 65%, transparent); } } @media (prefers-reduced-motion: reduce) { .stat.stat--pulse { animation: none; box-shadow: 0 0 0 2px var(--sc); } } .welcome-kicker { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8rem; font-weight: 600; color: var(--cyan); background: rgba(34, 211, 238, 0.12); border: 1px solid rgba(34, 211, 238, 0.3); padding: 5px 13px; border-radius: 999px; } .welcome-kicker .ic { width: 15px; height: 15px; } .welcome-greeting { font-size: 1.7rem; margin: 16px 0 6px; } .welcome-lede { color: var(--muted); margin-bottom: 22px; } .welcome-sub { color: var(--muted); font-size: 0.85rem; margin: 14px 0 2px; text-align: left; } .welcome-updates { display: grid; gap: 9px; margin: 10px 0 22px; text-align: left; max-height: 44vh; overflow: auto; padding-right: 2px; } .wu-item { display: flex; align-items: center; gap: 11px; padding: 11px 13px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); } .wu-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: none; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); align-self: flex-start; } .wu-ic .ic { width: 18px; height: 18px; } .wu-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .wu-text { font-weight: 600; font-size: 0.92rem; } .wu-sub { color: var(--muted); font-size: 0.76rem; } .wu-note { display: flex; align-items: flex-start; gap: 6px; margin-top: 7px; font-size: 0.78rem; color: #ffc2cb; background: rgba(251, 113, 133, 0.1); padding: 7px 9px; border-radius: 9px; } .wu-note .ic { width: 13px; height: 13px; margin-top: 2px; flex: none; } .wu-tag { font-family: var(--font-display); font-weight: 700; color: var(--gold); font-size: 0.85rem; align-self: center; } .welcome-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin: 8px 0 24px; } .welcome-continue { margin-top: 4px; } @media (max-width: 560px) { .cp-main { gap: 18px; } .ring { width: 108px; height: 108px; } .ring__center b { font-size: 1.7rem; } .icon-picker { grid-template-columns: repeat(6, 1fr); } .bm-grid { grid-template-columns: 1fr; } .welcome-greeting { font-size: 1.4rem; } .medallion__disc, .flyer { width: 72px; height: 72px; } .medallion__disc .ic, .flyer .ic { width: 34px; height: 34px; } } /* ============================================================= ANIMATIONS ============================================================= */ @keyframes revealUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes badgePop { 0% { transform: scale(0.4); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } } .badge-pop .badge__icon { animation: badgePop 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); } .badge.badge-pop { box-shadow: 0 0 0 2px var(--bc), 0 0 26px -4px var(--bc); } @keyframes rowIn { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } } .stagger-in { animation: rowIn 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both; } @keyframes pop { 0% { transform: scale(0.5); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } } @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-18px); } } @keyframes pulse { 0%, 100% { box-shadow: 0 0 16px -2px rgba(236, 72, 153, 0.7); } 50% { box-shadow: 0 0 26px 2px rgba(236, 72, 153, 0.9); } } /* ============================================================= RESPONSIVE ============================================================= */ @media (max-width: 980px) { .grid--3 { grid-template-columns: 1fr 1fr; } .hero { grid-template-columns: 1fr; } } @media (max-width: 860px) { .auth { grid-template-columns: 1fr; } .auth__art { display: none; } .nav { display: none; } .bottom-nav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 45; justify-content: space-around; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: rgba(10, 8, 32, 0.92); backdrop-filter: blur(16px); border-top: 1px solid var(--border); } .bottom-nav__link { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 16px; border-radius: 12px; color: var(--muted); font-size: 0.68rem; font-weight: 600; } .bottom-nav__link .ic { width: 22px; height: 22px; } .bottom-nav__link.is-active { color: var(--text); } .bottom-nav__link.is-active .ic { color: var(--violet); } .app-shell { padding-bottom: 80px; } .grid--2, .grid--3 { grid-template-columns: 1fr; } /* Phone: Console tools sit ABOVE the submission queue (not pinned — they scroll with the page). */ .admin-grid .admin-side { order: -1; } .hero__stats { grid-template-columns: 1fr 1fr; } .user-chip__meta { display: none; } } @media (max-width: 560px) { .view { padding: 22px 15px 0; gap: 18px; } .hero { padding: 24px; } .panel { padding: 18px; } .hero__stats { grid-template-columns: 1fr 1fr; } .mini-weeks { grid-template-columns: repeat(3, 1fr); } .week-card__head { padding: 15px; gap: 12px; } .week-card__right .week-card__pct { display: none; } .modal__foot { flex-direction: column-reverse; } .modal__foot .btn { width: 100%; } .footer-note { flex-direction: column; gap: 4px; } } /* reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .view-enter .reveal { opacity: 1; transform: none; } } /* =================================================================== ASK THE ADVISING TEAM (student inbox + organizer answer-queue) =================================================================== */ .ask { display: grid; gap: 16px; } .ask-form { display: grid; gap: 10px; } .ask-form__input { resize: vertical; min-height: 58px; } .ask-form__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .ask-form__hint { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8rem; color: var(--faint); } .ask-form__hint .ic { width: 15px; height: 15px; color: var(--cyan); flex: none; } .ask-list { display: grid; gap: 12px; } .ask-empty { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-radius: var(--r); background: rgba(255, 255, 255, 0.03); border: 1px dashed var(--border); color: var(--muted); font-size: 0.88rem; } .ask-empty .ic { width: 18px; height: 18px; color: var(--cyan); flex: none; } .ask-item { border: 1px solid var(--border); border-radius: var(--r); background: rgba(255, 255, 255, 0.03); overflow: hidden; } .ask-item.is-open { border-color: rgba(255, 203, 69, 0.28); } .ask-item__q { display: flex; align-items: flex-start; gap: 12px; padding: 14px 15px; } .ask-item__qbody { flex: 1; min-width: 0; display: grid; gap: 6px; } .ask-item__text { color: var(--text); font-weight: 600; line-height: 1.45; } .ask-item__meta { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--faint); } .ask-item__a { display: flex; align-items: flex-start; gap: 11px; padding: 13px 15px; border-top: 1px solid var(--border); background: linear-gradient(135deg, rgba(34, 211, 238, 0.08), rgba(124, 58, 237, 0.06)); } .ask-item__avatar { flex: none; } .ask-item__abody { display: grid; gap: 3px; min-width: 0; } .ask-item__abody b { font-size: 0.82rem; color: var(--cyan); } .ask-item__abody p { color: var(--muted); font-size: 0.9rem; line-height: 1.5; } .qtag { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; font-style: normal; } .qtag .ic { width: 12px; height: 12px; } .qtag--answered { background: rgba(52, 211, 153, 0.14); color: #6ee7b7; } .qtag--open { background: rgba(255, 203, 69, 0.14); color: #ffe09a; } .cp-cta { margin-top: 2px; } .qa-group { display: grid; gap: 12px; } .qa-group + .qa-group { margin-top: 20px; } .qa-group__title { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: 0.05em; } .qa-group__title .ic { width: 15px; height: 15px; } .qa-list { display: grid; gap: 12px; } .qa-item { padding: 14px 15px; border: 1px solid var(--border); border-radius: var(--r); background: rgba(255, 255, 255, 0.03); display: grid; gap: 11px; } .qa-item.is-open { border-color: rgba(255, 203, 69, 0.3); } .qa-asker { display: flex; align-items: center; gap: 11px; } .qa-asker b { font-size: 0.92rem; } .qa-asker__nick { color: var(--faint); font-weight: 500; font-size: 0.82rem; } .qa-asker small { display: block; color: var(--faint); font-size: 0.76rem; margin-top: 1px; } .qa-asker .reveal-name { color: var(--cyan); font-size: 0.8rem; } .qa-text { color: var(--text); font-weight: 600; line-height: 1.45; } .qa-answer { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; border-radius: 12px; background: rgba(52, 211, 153, 0.08); border: 1px solid rgba(52, 211, 153, 0.22); } .qa-answer .ic { width: 17px; height: 17px; color: #6ee7b7; flex: none; margin-top: 1px; } .qa-answer b { font-size: 0.8rem; color: #6ee7b7; display: block; margin-bottom: 2px; } .qa-answer p { color: var(--muted); font-size: 0.88rem; line-height: 1.5; } .qa-actions { display: flex; justify-content: flex-end; gap: 8px; } .answer-q { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; margin-bottom: 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--border); } .answer-q .ic { width: 18px; height: 18px; color: var(--cyan); flex: none; margin-top: 1px; } .answer-q p { color: var(--text); font-weight: 600; line-height: 1.45; } /* =================================================================== LANGUAGE TOGGLE + ARABIC / RTL =================================================================== */ .lang-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 13px; border-radius: 999px; border: 1px solid var(--border); background: rgba(255, 255, 255, 0.05); color: var(--muted); font-weight: 700; font-size: 0.82rem; font-family: var(--font-display); cursor: pointer; transition: 0.2s; white-space: nowrap; } .lang-btn:hover { color: var(--text); border-color: var(--border-strong); background: rgba(255, 255, 255, 0.08); } .lang-btn .ic { width: 16px; height: 16px; } .auth__panel { position: relative; } .auth-lang { position: absolute; top: 16px; inset-inline-end: 16px; z-index: 3; } /* Arabic typography + direction */ html[dir="rtl"] { --font-body: "Cairo", "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif; --font-display: "Cairo", "Space Grotesk", "Segoe UI", system-ui, sans-serif; } html[dir="rtl"] body { font-family: var(--font-body); } /* Keep numeric / latin-token chips reading left-to-right inside RTL */ html[dir="rtl"] .lb-row__pts, html[dir="rtl"] .ring__pct, html[dir="rtl"] .week-num, html[dir="rtl"] .rail-dot, html[dir="rtl"] .stat__value, html[dir="rtl"] .pts-chip, html[dir="rtl"] .week-card__pct { direction: ltr; } /* Mirror the few icon-bearing rows that rely on source order */ html[dir="rtl"] .field-hint, html[dir="rtl"] .cp-msg, html[dir="rtl"] .qa-answer, html[dir="rtl"] .answer-q, html[dir="rtl"] .ask-form__hint { text-align: right; } /* Inputs / textareas align to the start (right) in RTL */ html[dir="rtl"] .input, html[dir="rtl"] .ask-form__input, html[dir="rtl"] textarea.input { text-align: right; } /* The decorative auth headline keeps its own alignment */ html[dir="rtl"] .auth__headline, html[dir="rtl"] .auth__lede { text-align: right; } /* Arabic (Cairo) needs more line spacing than the tight Latin display sizes, or wrapped lines overlap the line above (worst on phones). Looser leading for any wrapping heading; the big auth headline gets the most room. */ html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4 { line-height: 1.4; } /* Tighter, even leading for the big display headline — 1.5 left visually uneven gaps around the Latin "KFUPM 001" line; 1.3 reads consistently in Arabic. */ html[dir="rtl"] .auth__headline { line-height: 1.3; } html[dir="rtl"] .intro-stmt__title, html[dir="rtl"] .welcome-greeting { line-height: 1.45; } /* Components with hard-coded text-align:left must follow the start (right) in RTL */ html[dir="rtl"] .week-card__head, html[dir="rtl"] .part-card, html[dir="rtl"] .part-card__open, html[dir="rtl"] .welcome-enroll-note, html[dir="rtl"] .award-row, html[dir="rtl"] .welcome-sub, html[dir="rtl"] .welcome-updates { text-align: right; } /* Directional chevrons mirror in RTL */ html[dir="rtl"] .part-card__go { margin-left: 0; margin-right: auto; } html[dir="rtl"] .part-card__go .ic { transform: scaleX(-1); } html[dir="rtl"] .part-back .ic { transform: rotate(0deg); } /* Auto-margin spacers must flip side in RTL (otherwise clusters float wrong) */ html[dir="rtl"] .topbar__right, html[dir="rtl"] .tf-card__cap, html[dir="rtl"] .queue-attach__cta, html[dir="rtl"] .bm-card__actions .btn { margin-left: 0; margin-right: auto; } html[dir="rtl"] .tf-team-row__id, html[dir="rtl"] .tf-req__main, html[dir="rtl"] .tf-lead-cta > div, html[dir="rtl"] .lightbox__name { margin-right: 0; margin-left: auto; } /* Stat number keeps LTR digit order but aligns with its (right-aligned) label */ html[dir="rtl"] .stat__value { text-align: right; } /* =================================================================== ACTIVITY-BASED LEAGUE GRADING =================================================================== */ .grade-grid { display: grid; gap: 14px; } .grade-team { border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; background: rgba(255, 255, 255, 0.03); } .grade-team__head { display: flex; align-items: center; gap: 10px; font-weight: 700; margin-bottom: 10px; } .grade-input__act { display: flex; align-items: center; gap: 6px; font-size: 0.88rem; } .grade-acts { display: grid; gap: 8px; margin-bottom: 12px; } .grade-act { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.04); font-size: 0.9rem; } .grade-await, .grade-await-box { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.85rem; } .grade-await-box { padding: 14px 4px; } .activity-status { margin-bottom: 12px; } /* =================================================================== SUPER ORGANIZER DASHBOARD (section scoreboard + attention list) =================================================================== */ .sscore { display: grid; gap: 10px; } .sscore-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 14px; border-radius: 13px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); } .sscore-row__id { min-width: 130px; display: flex; flex-direction: column; } .sscore-row__id b { font-size: 0.96rem; } .sscore-row__id span { color: var(--muted); font-size: 0.76rem; } .sscore-row__prog { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 150px; } .sscore-bar { flex: 1; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; } .sscore-bar i { display: block; height: 100%; border-radius: 999px; background: var(--grad-primary); } .sscore-row__pct { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; min-width: 3ch; text-align: end; } .sscore-row__pts { display: flex; flex-direction: column; align-items: center; min-width: 62px; } .sscore-row__pts b { font-family: var(--font-display); font-size: 1.05rem; } .sscore-row__pts span { color: var(--muted); font-size: 0.72rem; } .sscore-row__grade { min-width: 132px; display: flex; justify-content: flex-end; } .needs { display: grid; gap: 10px; } .need-row { display: flex; align-items: center; gap: 12px; padding: 11px 13px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); border-inline-start: 3px solid var(--c); } .need-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); flex: none; } .need-ic .ic { width: 17px; height: 17px; } .need-body { display: flex; flex-direction: column; min-width: 0; } .need-body b { font-size: 0.9rem; font-weight: 600; } .need-body span { color: var(--muted); font-size: 0.8rem; } .org-backlog { display: flex; align-items: center; gap: 9px; padding: 11px 13px; margin-bottom: 12px; border-radius: 12px; background: color-mix(in srgb, var(--gold) 12%, transparent); border: 1px solid color-mix(in srgb, var(--gold) 30%, transparent); color: var(--text); font-size: 0.88rem; font-weight: 600; } .org-backlog .ic { width: 17px; height: 17px; color: var(--gold); flex: none; } .org-backlog.is-clear { background: color-mix(in srgb, var(--lime) 12%, transparent); border-color: color-mix(in srgb, var(--lime) 30%, transparent); } .org-backlog.is-clear .ic { color: var(--lime); } .org-list { display: grid; gap: 10px; } .org-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 11px 13px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--border); } .org-row__id { flex: 1; min-width: 120px; display: flex; flex-direction: column; } .org-row__id b { font-size: 0.92rem; } .org-row__id span { color: var(--muted); font-size: 0.76rem; } .org-row__stats { display: flex; gap: 14px; flex-wrap: wrap; } .org-row__stats span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.82rem; } .org-row__stats .ic { width: 15px; height: 15px; color: var(--violet); } /* =================================================================== PORTED (Topic 1): Q&A log (super-org) + Enrollment dashboard + intro =================================================================== */ .qa-list { display: grid; gap: 12px; } .qa-item { padding: 14px 15px; border: 1px solid var(--border); border-radius: var(--r); background: rgba(255, 255, 255, 0.03); display: grid; gap: 11px; } .qa-item.is-open { border-color: rgba(255, 203, 69, 0.3); } .qa-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .qa-asker { display: flex; align-items: center; gap: 11px; } .qa-badge { display: inline-flex; align-items: center; gap: 5px; flex: none; padding: 4px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; white-space: nowrap; } .qa-badge .ic { width: 13px; height: 13px; } .qa-badge--open { color: var(--gold); background: rgba(255, 203, 69, 0.13); border: 1px solid rgba(255, 203, 69, 0.3); } .qa-badge--answered { color: #6ee7b7; background: rgba(52, 211, 153, 0.12); border: 1px solid rgba(52, 211, 153, 0.28); } .qa-stamp { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--faint); font-size: 0.76rem; } .qa-stamp .ic { width: 13px; height: 13px; } .qa-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .qa-foot .qa-stamp { flex: 1 1 auto; } .qa-note { display: flex; align-items: center; gap: 6px; margin-top: 18px; color: var(--faint); font-size: 0.78rem; } .qa-note .ic { width: 14px; height: 14px; flex: none; } .qa-asker b { font-size: 0.92rem; } .qa-asker__nick { color: var(--faint); font-weight: 500; font-size: 0.82rem; } .qa-asker small { display: block; color: var(--faint); font-size: 0.76rem; margin-top: 1px; } .qa-text { color: var(--text); font-weight: 600; line-height: 1.45; } .qa-answer { display: flex; align-items: flex-start; gap: 10px; padding: 11px 13px; border-radius: 12px; background: rgba(52, 211, 153, 0.08); border: 1px solid rgba(52, 211, 153, 0.22); } .qa-answer .ic { width: 17px; height: 17px; color: #6ee7b7; flex: none; margin-top: 1px; } .qa-answer b { font-size: 0.8rem; color: #6ee7b7; display: block; margin-bottom: 2px; } .qa-answer p { color: var(--muted); font-size: 0.88rem; line-height: 1.5; } .qa-actions { display: flex; justify-content: flex-end; gap: 8px; } .qa-collapse { border: 1px solid var(--border); border-radius: var(--r); margin-bottom: 12px; overflow: hidden; background: rgba(255, 255, 255, 0.02); } .qa-collapse__sum { display: flex; align-items: center; gap: 9px; padding: 13px 15px; cursor: pointer; font-weight: 700; font-size: 0.95rem; list-style: none; user-select: none; } .qa-collapse__sum::-webkit-details-marker { display: none; } .qa-collapse__sum .ic { width: 17px; height: 17px; color: var(--violet); flex: none; } .qa-collapse__count { margin-inline-start: auto; min-width: 24px; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--panel-2); display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; color: var(--muted); } .qa-collapse[open] .qa-collapse__sum { border-bottom: 1px solid var(--border); } .qa-collapse .qa-list { padding: 14px; display: grid; gap: 12px; } .qa-empty { padding: 6px 2px; } .enroll-controls { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; } .enroll-toprow { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; } .enroll-filters { display: flex; flex-wrap: wrap; gap: 10px; } .enroll-list.enroll-list--rows { grid-template-columns: 1fr; } .enroll-list--rows .enroll-card { flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px 18px; } .enroll-list--rows .enroll-card { padding: 9px 14px; gap: 6px 18px; } .enroll-list--rows .enroll-card__head { flex: 0 0 230px; min-width: 200px; } /* List view: each field is a single "Key: Value" line (no wrapping), flowing to fill the width — tighter rows than the stacked grid cards. */ .enroll-list--rows .enroll-card__grid { flex: 1; display: flex; flex-wrap: wrap; gap: 3px 18px; } .enroll-list--rows .enroll-stat { flex-direction: row; align-items: baseline; gap: 6px; white-space: nowrap; min-width: 0; } .enroll-list--rows .enroll-stat__k::after { content: ":"; } .enroll-list--rows .enroll-stat__v { white-space: nowrap; word-break: normal; } .enroll-group__h { display: flex; align-items: center; gap: 9px; font-family: var(--font-display); font-size: 1.02rem; margin: 18px 2px 11px; } .enroll-group__h span { min-width: 24px; height: 22px; padding: 0 8px; border-radius: 999px; background: var(--panel-2); display: inline-flex; align-items: center; justify-content: center; font-size: 0.78rem; color: var(--muted); } .enroll-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 14px; } .enroll-card { border: 1px solid var(--border); border-radius: var(--r); background: rgba(255, 255, 255, 0.03); padding: 15px; display: flex; flex-direction: column; gap: 13px; } .enroll-card__head { display: flex; align-items: center; gap: 11px; } .enroll-card__id { min-width: 0; } .enroll-card__id b { font-size: 0.96rem; display: block; } .enroll-card__id span { color: var(--muted); font-size: 0.8rem; } .enroll-nick { color: var(--faint); font-weight: 500; font-size: 0.84rem; } .enroll-card__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; } .enroll-stat { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .enroll-stat__k { color: var(--faint); font-size: 0.72rem; } .enroll-stat__v { color: var(--text); font-weight: 600; font-size: 0.9rem; word-break: break-word; } /* Email is often long: give it the full card width on ONE line with an ellipsis fallback (full address on hover), so it fits without enlarging the card/row. */ .enroll-stat--email { grid-column: 1 / -1; min-width: 0; } .enroll-stat--email .enroll-stat__v { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .enroll-list--rows .enroll-stat--email { max-width: 260px; } .enroll-list--rows .enroll-stat--email .enroll-stat__v { overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* Small live "how many are showing" counter under the sort controls. */ .enroll-count { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; padding: 5px 12px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--border); font-size: 0.82rem; color: var(--muted); } .enroll-count .ic { width: 15px; height: 15px; color: var(--cyan); } .enroll-count b { color: var(--text); font-family: var(--font-display); } .intro-overlay { position: fixed; inset: 0; z-index: 300; background: var(--bg); overflow: hidden; transition: opacity 0.6s ease; } .intro-overlay.closing { opacity: 0; pointer-events: none; } .intro-stmt { position: absolute; inset: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 24px; background: var(--bg); transition: opacity 0.6s ease; } .intro-stmt.out { opacity: 0; pointer-events: none; } .intro-eyebrow { font-size: 0.92rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--faint); margin-bottom: 18px; opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .intro-logo { font-family: var(--font-display); font-weight: 700; font-size: clamp(3.2rem, 10vw, 4.6rem); letter-spacing: -0.03em; line-height: 1; background: linear-gradient(135deg, #8b5cf6 0%, #22d3ee 50%, #a3e635 100%); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0; transform: translateY(34px); transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .intro-rule { width: 0; height: 2px; border-radius: 2px; margin: 18px auto; background: linear-gradient(90deg, var(--violet), var(--danger)); transition: width 0.6s ease; } .intro-stmt__body { font-size: clamp(1.15rem, 3.4vw, 1.5rem); color: var(--muted); max-width: 460px; line-height: 1.6; opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .intro-stmt__body strong { color: var(--text); font-weight: 600; } .intro-stmt.in .intro-eyebrow { opacity: 1; transform: none; transition-delay: 0.15s; } .intro-stmt.in .intro-logo { opacity: 1; transform: none; transition-delay: 0.45s; } .intro-stmt.in .intro-rule { width: 44px; transition-delay: 0.8s; } .intro-stmt.in .intro-stmt__body { opacity: 1; transform: none; transition-delay: 1s; } .intro-chaps { position: absolute; inset: 0; z-index: 5; } .intro-chap { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 28px; opacity: 0; transform: scale(1.04); transition: opacity 0.55s ease, transform 0.55s ease; } .intro-chap.in { opacity: 1; transform: scale(1); } .intro-chap.out { opacity: 0; transform: scale(0.96); } .intro-chap__wash { position: absolute; inset: 0; opacity: 0.18; background: var(--accent); } .intro-chap__bg { position: absolute; top: 50%; left: 50%; transform: translate(-46%, -52%); font-family: var(--font-display); font-weight: 700; font-size: clamp(11rem, 42vw, 18rem); line-height: 1; letter-spacing: -0.06em; color: #fff; opacity: 0.05; pointer-events: none; } .intro-chap__inner { position: relative; z-index: 2; } .intro-chap__w { font-family: var(--font-display); font-weight: 700; font-size: clamp(4rem, 15vw, 5.6rem); line-height: 1; letter-spacing: -0.04em; color: var(--accent); margin-bottom: 18px; } .intro-chap__rule { width: 40px; height: 3px; border-radius: 2px; margin: 0 auto 18px; background: var(--accent); } .intro-chap__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 5.2vw, 2rem); line-height: 1.25; margin-bottom: 10px; color: var(--text); } .intro-chap__theme { font-size: clamp(1rem, 3vw, 1.2rem); color: var(--muted); } .intro-dots { position: absolute; bottom: 48px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 12; opacity: 0; transition: opacity 0.5s ease; } .intro-dots.show { opacity: 1; } .intro-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); transition: all 0.4s ease; } .intro-dot.active { width: 22px; border-radius: 3px; } .intro-skip { position: absolute; bottom: 18px; left: 0; right: 0; text-align: center; z-index: 14; font-size: 0.95rem; letter-spacing: 0.02em; color: var(--faint); opacity: 0; pointer-events: none; animation: introSkipIn 0.6s ease 1.2s forwards; } .intro-skip.hide { opacity: 0; animation: none; transition: opacity 0.4s ease; } @keyframes introSkipIn { to { opacity: 0.55; } } .intro-enter { position: absolute; inset: 0; z-index: 15; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 24px; background: var(--bg); opacity: 0; pointer-events: none; transition: opacity 0.7s ease; } .intro-enter.in { opacity: 1; pointer-events: auto; } .intro-enter__logo { font-family: var(--font-display); font-weight: 700; font-size: clamp(2.2rem, 7vw, 3rem); letter-spacing: -0.02em; background: var(--grad-primary); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 8px; } .intro-enter__sub { font-size: clamp(1.05rem, 3vw, 1.3rem); color: var(--faint); margin-bottom: 26px; } .intro-enter .btn { font-size: 1.1rem; padding: 15px 36px; } .intro-enter .btn .ic { width: 20px; height: 20px; } /* week-unlock reveal flash (played at the end of the welcome flow) */ .week-reveal { position: fixed; inset: 0; z-index: 9998; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 28px; background: var(--bg); opacity: 0; transition: opacity 0.5s ease; } .week-reveal.in { opacity: 1; } .week-reveal__wash { position: absolute; inset: 0; opacity: 0.2; background: var(--accent); } .week-reveal__inner { position: relative; z-index: 2; transform: translateY(14px); opacity: 0; transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.16, 1, 0.3, 1); } .week-reveal.in .week-reveal__inner { transform: none; opacity: 1; transition-delay: 0.12s; } .week-reveal__kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); padding: 5px 14px; border-radius: 20px; border: 1px solid var(--border-strong); margin-bottom: 18px; } .week-reveal__kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .week-reveal__w { font-family: var(--font-display); font-weight: 700; font-size: clamp(3rem, 13vw, 4.4rem); line-height: 1; letter-spacing: -0.04em; color: var(--accent); margin-bottom: 14px; } .week-reveal__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.1rem, 4vw, 1.35rem); line-height: 1.3; margin-bottom: 8px; color: var(--text); } .week-reveal__theme { font-size: clamp(0.8rem, 2.4vw, 0.92rem); color: var(--muted); } /* keep big numerals LTR even in Arabic/RTL */ html[dir="rtl"] .week-reveal__w { direction: ltr; } @media (prefers-reduced-motion: reduce) { .week-reveal__inner { transition: none; } } /* nickname change request — status block under the (locked) nickname field */ .nick-status { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: -4px 0 4px; } .nick-status--denied { padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--danger) 9%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 26%, transparent); } .nick-status__reason { display: flex; align-items: flex-start; gap: 7px; color: var(--text); font-size: 0.86rem; line-height: 1.45; } .nick-status__reason .ic { width: 15px; height: 15px; color: var(--danger); flex: none; margin-top: 2px; } .nick-warn { color: var(--gold) !important; } /* ============================================================ PUBLIC CAPTURES — share checkbox · home stack · gallery · picker ============================================================ */ /* Submit-modal "make public" checkbox */ .check-field { display: flex; align-items: flex-start; gap: 11px; margin-top: 12px; padding: 12px 13px; border-radius: 14px; background: color-mix(in srgb, var(--violet) 8%, transparent); border: 1px solid color-mix(in srgb, var(--violet) 22%, transparent); cursor: pointer; } .check-field__box { position: absolute; opacity: 0; width: 1px; height: 1px; } .check-field__mark { flex: none; width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--border); display: grid; place-items: center; background: var(--panel-solid); transition: all 0.15s ease; } .check-field__mark .ic { width: 14px; height: 14px; color: #fff; opacity: 0; transform: scale(0.5); transition: all 0.15s ease; } .check-field__box:checked + .check-field__mark { background: var(--grad-primary); border-color: transparent; } .check-field__box:checked + .check-field__mark .ic { opacity: 1; transform: scale(1); } .check-field__box:focus-visible + .check-field__mark { box-shadow: 0 0 0 3px color-mix(in srgb, var(--violet) 35%, transparent); } .check-field__text { display: flex; flex-direction: column; gap: 2px; } .check-field__text b { font-size: 0.9rem; } .check-field__text small { color: var(--muted); font-size: 0.76rem; line-height: 1.35; } /* Home "Top last week captures" banner + overlapping polaroid stack */ .top-captures { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 20px 22px; border-radius: 22px; cursor: pointer; background: radial-gradient(120% 140% at 100% 0, color-mix(in srgb, var(--pink) 18%, transparent), transparent 60%), color-mix(in srgb, var(--violet) 10%, var(--panel)); border: 1px solid color-mix(in srgb, var(--violet) 26%, transparent); transition: transform 0.18s ease, box-shadow 0.18s ease; } .top-captures:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -18px rgba(124, 58, 237, 0.6); } .top-captures__text { min-width: 220px; flex: 1; } .top-captures__title { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin: 4px 0 5px; } .top-captures__sub { color: var(--muted); font-size: 0.88rem; max-width: 42ch; } .top-captures__cta { display: inline-flex; align-items: center; gap: 7px; margin-top: 12px; font-weight: 700; font-size: 0.85rem; color: var(--pink); } .top-captures__cta .ic { width: 16px; height: 16px; } /* Cards on the right, narrower, with the top-right corner peeking OUT of the section frame (negative margins + the section keeps overflow visible). */ .top-captures { overflow: visible; } .capture-stack { position: relative; flex: none; width: 186px; height: 168px; margin: -26px -40px -2px 0; } .capture-stack__item { position: absolute; top: 50%; left: 50%; width: 150px; transform: translate(-50%, -50%) rotate(calc((var(--i) - 1.5) * 7deg)) translateX(calc((var(--i) - 1.5) * 24px)); transition: transform 0.22s ease; z-index: calc(5 - var(--i)); } .top-captures:hover .capture-stack__item { transform: translate(-50%, -50%) rotate(calc((var(--i) - 1.5) * 9deg)) translateX(calc((var(--i) - 1.5) * 30px)) translateY(-4px); } /* Phone: the deck wraps below the text — centre it instead of inheriting the text's start-side indentation (and drop the desktop corner-peek margins). */ @media (max-width: 560px) { .top-captures { justify-content: center; } .capture-stack { margin: 10px auto 4px; } } /* Polaroid card (shared by stack, gallery, picker) */ .capture-card { background: #fff; border-radius: 8px; padding: 7px 7px 0; box-shadow: 0 8px 22px -8px rgba(0, 0, 0, 0.65); } .capture-card__photo { aspect-ratio: 4 / 3; border-radius: 4px; overflow: hidden; background: #0b0a1f; } .capture-card__photo img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Soft shimmer while a photo's bytes are still downloading in the background. */ .capture-card__photo--loading, .gallery-card__ph--loading { background: linear-gradient(100deg, #0b0a1f 40%, #1a1838 50%, #0b0a1f 60%); background-size: 200% 100%; animation: capShimmer 1.4s ease-in-out infinite; } @keyframes capShimmer { from { background-position: 120% 0; } to { background-position: -80% 0; } } .capture-card__cap { color: #1a1530; font-size: 0.72rem; font-weight: 700; text-align: center; padding: 7px 4px 9px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Full-screen gallery overlay (blurred backdrop, animated grid) */ body.gallery-open .app-shell { filter: blur(7px); transition: filter 0.3s ease; } .gallery-overlay { position: fixed; inset: 0; z-index: 1100; display: flex; flex-direction: column; background: rgba(8, 6, 24, 0.66); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity: 0; transition: opacity 0.3s ease; } .gallery-overlay.show { opacity: 1; } .gallery-overlay__bar { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; } .gallery-overlay__bar h3 { display: flex; align-items: center; gap: 9px; font-size: 1.15rem; } .gallery-overlay__bar h3 .ic { width: 19px; height: 19px; color: var(--gold); } /* The grid centres in the MIDDLE of the screen when the photos don't fill it (safe = fall back to top-aligned + scrollable when there are many photos). */ .gallery-grid { flex: 1; overflow-y: auto; overscroll-behavior: contain; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 22px; padding: 18px 26px 38px; align-content: safe center; } /* Cards have no CSS entrance animation — app.js drives a FLIP so each card flies from its spot in the overlapping deck to its grid slot. */ .gallery-card { background: #fff; border-radius: 10px; padding: 9px 9px 0; box-shadow: 0 14px 36px -14px rgba(0, 0, 0, 0.7); cursor: zoom-in; will-change: transform, opacity; } .gallery-card:hover { transform: translateY(-4px) scale(1.02); transition: transform 0.18s ease; } .gallery-card__ph { aspect-ratio: 4 / 3; border-radius: 5px; overflow: hidden; background: #0b0a1f; } .gallery-card__ph img { width: 100%; height: 100%; object-fit: cover; display: block; } .gallery-card figcaption { color: #1a1530; font-weight: 700; font-size: 0.82rem; text-align: center; padding: 9px 6px 11px; } .gallery-card__title { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gallery-card__by { display: block; margin-top: 2px; font-weight: 500; font-size: 0.72rem; color: #6b6480; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gallery-card__ph { cursor: zoom-in; } /* Shared-photo LIKE button (student) + read-only like/view stats (organizer) */ .like-btn { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; padding: 4px 13px; border-radius: 999px; background: #f1eefb; border: 1px solid #e3def4; color: #4b4463; font-weight: 700; font-size: 0.8rem; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; } .like-btn:hover { background: #e9e3fb; } .like-btn .ic { width: 16px; height: 16px; transform-origin: center 70%; } .like-btn.is-liked { color: #E5A400; background: #fff6da; border-color: #ffe39a; } .like-btn.is-liked .ic { color: var(--gold); fill: color-mix(in srgb, var(--gold) 25%, transparent); } .like-btn.like-pop .ic { animation: likePop 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.5); } @keyframes likePop { 0% { transform: scale(1) rotate(0); } 25% { transform: scale(1.5) rotate(-16deg); filter: drop-shadow(0 0 7px var(--gold)); } 50% { transform: scale(0.86) rotate(7deg); } 75% { transform: scale(1.18) rotate(-4deg); filter: drop-shadow(0 0 4px var(--gold)); } 100% { transform: scale(1) rotate(0); filter: none; } } @media (prefers-reduced-motion: reduce) { .like-btn.like-pop .ic { animation: none; } } .cap-stats { display: inline-flex; align-items: center; justify-content: center; gap: 13px; margin-top: 7px; } .cap-stat { display: inline-flex; align-items: center; gap: 4px; color: #6b6480; font-weight: 700; font-size: 0.78rem; } .cap-stat .ic { width: 15px; height: 15px; } .lightbox__by { font-style: normal; font-weight: 500; color: var(--muted); margin-inline-start: 4px; } @media (prefers-reduced-motion: reduce) { .gallery-card { opacity: 1; transform: none; } } /* Phones (90% of users): a compact 2-up grid so a typical set of photos fits and stays centred in the middle of the screen rather than overflowing to the top. */ @media (max-width: 560px) { .gallery-grid { grid-template-columns: 1fr 1fr; gap: 14px; padding: 16px 16px 30px; } .gallery-card figcaption { font-size: 0.74rem; padding: 7px 5px 9px; } } /* "Preparing your arena" loader — building-blocks animation shown during the sign-in / sign-up hydrate (which can lag on phones). */ .arena-loader { position: fixed; inset: 0; z-index: 3000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; background: rgba(8, 6, 24, 0.88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transition: opacity 0.25s ease; } .arena-loader.show { opacity: 1; } .arena-loader__build { display: grid; grid-template-columns: repeat(3, 28px); grid-auto-rows: 28px; gap: 8px; } .arena-loader__build span { border-radius: 7px; background: linear-gradient(135deg, #8b5cf6, #ec4899); box-shadow: 0 8px 20px -6px rgba(139, 92, 246, 0.7); transform: scale(0); opacity: 0; animation: arenaBuild 1.7s cubic-bezier(0.2, 0.8, 0.2, 1) infinite; animation-delay: calc(var(--n) * 0.09s); } @keyframes arenaBuild { 0% { transform: scale(0); opacity: 0; } 22% { transform: scale(1); opacity: 1; } 64% { transform: scale(1); opacity: 1; } 100% { transform: scale(0); opacity: 0; } } .arena-loader__text { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; color: var(--text); letter-spacing: 0.01em; text-align: center; padding: 0 24px; } @media (prefers-reduced-motion: reduce) { .arena-loader__build span { animation-duration: 0.01s; transform: scale(1); opacity: 1; } } /* Organizer "Public submissions" picker */ .pubsub { display: flex; flex-direction: column; gap: 22px; max-height: 72vh; overflow-y: auto; } .pubsub-section__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; } .pubsub-section__head h4 { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; } .pubsub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; } .pubsub-card { position: relative; background: #fff; border-radius: 9px; padding: 8px 8px 0; box-shadow: 0 8px 22px -10px rgba(0, 0, 0, 0.6); } .pubsub-card__ph { aspect-ratio: 4 / 3; border-radius: 5px; overflow: hidden; background: #0b0a1f; cursor: zoom-in; } .pubsub-card__ph img { width: 100%; height: 100%; object-fit: cover; display: block; } .pubsub-card figcaption { color: #1a1530; font-weight: 700; font-size: 0.76rem; text-align: start; padding: 7px 8px 10px; } .pubsub-card__title { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-inline-end: 22px; } .pubsub-card .cap-stats { justify-content: flex-start; gap: 12px; margin-top: 5px; } .pubsub-tag { font-style: normal; color: #16a34a; font-size: 0.7rem; } .pubsub-card.is-published { outline: 2px solid color-mix(in srgb, #34d399 60%, transparent); } .pubsub-card__dl { position: absolute; bottom: 8px; right: 7px; width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.9); color: #1a1530; } .pubsub-card__dl .ic { width: 14px; height: 14px; } .pubsub-check { position: absolute; top: 11px; left: 11px; z-index: 2; cursor: pointer; } .pubsub-check input { position: absolute; opacity: 0; width: 1px; height: 1px; } .pubsub-check__box { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: rgba(255, 255, 255, 0.92); border: 2px solid rgba(0, 0, 0, 0.18); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } .pubsub-check__box .ic { width: 15px; height: 15px; color: #fff; opacity: 0; transform: scale(0.4); transition: all 0.14s ease; } .pubsub-check input:checked + .pubsub-check__box { background: var(--grad-primary); border-color: transparent; } .pubsub-check input:checked + .pubsub-check__box .ic { opacity: 1; transform: scale(1); } .pubsub-empty { padding: 8px 2px; } html[dir="rtl"] .pubsub-check { left: auto; right: 11px; } html[dir="rtl"] .pubsub-card__dl { right: auto; left: 7px; } /* Capture lightbox must sit ABOVE the gallery overlay (z 1100), not behind it. */ .lightbox--over { z-index: 1200; background: rgba(6, 5, 18, 0.985); } /* Organizer "Shared photos" — per-week overlapping-card stacks */ .shared-weeks { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 26px 18px; padding-top: 4px; } .shared-week { display: flex; flex-direction: column; align-items: center; gap: 12px; } .shared-week__stack { cursor: pointer; } .capture-stack--sm { width: 150px; height: 122px; } .capture-stack--sm .capture-stack__item { width: 104px; transform: translate(-50%, -50%) rotate(calc((var(--i) - 1.5) * 6deg)) translateX(calc((var(--i) - 1.5) * 18px)); } .shared-week__stack:hover .capture-stack__item { transform: translate(-50%, -50%) rotate(calc((var(--i) - 1.5) * 8deg)) translateX(calc((var(--i) - 1.5) * 23px)) translateY(-3px); } .shared-week__meta { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; } .shared-week__meta b { font-family: var(--font-display); font-size: 1rem; } .shared-week__meta > span { color: var(--muted); font-size: 0.78rem; } .shared-week__status { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; } .shared-week__badge { font-style: normal; display: inline-flex; align-items: center; gap: 5px; color: #6ee7b7; background: rgba(52, 211, 153, 0.12); border: 1px solid rgba(52, 211, 153, 0.28); padding: 3px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; } .shared-week__badge .ic { width: 12px; height: 12px; }