/* ============================================================ CASCADE LAYERS — vezi docs/REDESIGN_PLAYBOOK.md. Precedență (ultimul câștigă): vendor < app < kf (tokens..utilities). vendor — Bootstrap (importat aici → layered, ca să nu mai bată stilul nostru) app — STYLESHEET-UL PRINCIPAL, VIU (fostul „Battle Broadcast", secțiunile 1-16 + tokenii lui :root). NU e throwaway: e re-skinat „Kinetic Sharp" prin blocul nelayered de remap GLOBAL de tokeni (vezi ~2850). ⚠️ NU-l goli / șterge — ar șterge tot site-ul. „Faza 6 = empty legacy" din playbook = OBSOLET. tokens..utilities — stratul kf: tokenii --kf-* + base/layout/components/utilities adăugate. ============================================================ */ @layer vendor, app, tokens, base, layout, components, utilities; @import url("../vendor-local/bootstrap/bootstrap.min-0hrUfGv.css") layer(vendor); @layer app { /* ============================================================ DANCE CONTEST PLATFORM — Custom CSS "Battle Broadcast" Brutalist street-scoreboard aesthetic. Newsprint paper · ink-black rules · Flash-pink accent · Volt-lime for live/active · Archivo 900 display · Space Mono numerals · sharp corners · hard offset shadows. Built on Bootstrap 5.3.3 but overrides it wholesale. STRUCTURA: 1. TOKENS — variabile CSS globale (Cypher palette) 2. LAYOUT — structura paginilor + navbar 3. TABLES — tabele dense + stat columns + rank 4. BADGES & STATUS — badge-uri colorate + valori semantice 5. PILLS & FILTERS — pills cu count, filtre 6. CHIPS — competitor/judge chips inline 7. CARDS — carduri concurs hub 8. BRACKET — vizualizare bracket 9. FORMS — formulare inline compacte 10. JUDGE PAGE — pagina judecatorului (mobile-first) 11. ADMIN — panou admin 12. PUBLIC — pagina publica /concursuri 13. UTILITIES — clase helper 14. RANKING & TIER — leaderboard, stat blocks, tier list, ELO 15. AUTH / ERROR — login (.login-page) + pagini eroare (.error-page) 16. MOBILE / RESP. — utilitare font, card-reflow tabele, nav + touch targets (mobile-first) ============================================================ */ /* === 1. TOKENS ============================================= */ :root { color-scheme: light dark; /* native form/scrollbar theming */ /* ============================================================ THREE-TIER TOKENS — vezi skill `design-token-theming`. 1) RAW (--c-*) valori brute, fără rol — sursa unică de culoare 2) SEMANTIC --bg/--surface/--text/--border-*/--accent/... ← componentele folosesc ASTEA 3) (component) rar, doar la nevoie reală Tema = re-mapează SEMANTIC → RAW. Light = :root. Dark = [data-theme="dark"]. Tokenii „value-named" istorici (--ink/--paper/--fg*/--card) sunt ALIASURI care țintesc rolurile → flipează corect în dark fără să rescriem fiecare componentă. ============================================================ */ /* ---------- TIER 1 · RAW PALETTE ---------- */ --c-ink-950: #0c0a08; /* darkest — dark-mode page bg */ --c-ink-900: #141210; /* near-black — text / ink surfaces / strong borders */ --c-ink-800: #1c1a16; /* dark surface — dark-mode cards */ --c-ink-700: #4d463d; /* secondary text */ --c-ink-500: #837b6e; /* muted text / labels */ --c-ink-300: #b3a994; /* faint / units */ --c-paper: #f5f1e8; /* warm newsprint — page bg */ --c-paper-2: #ede7d8; /* deeper newsprint — zebra / blocks */ --c-card: #fffdf7; /* off-white card */ --c-hair: #d8cfbd; /* hairline */ --c-subtle: #e3dccc; --c-white: #ffffff; /* brand accents (≈ theme-invariant) */ --c-flash: #ff2e63; --c-flash-strong: #d40d44; --c-flash-soft: #ffd9e3; --c-volt: #d8ff3e; --c-volt-ink: #1a1d00; /* dark-mode-only neutrals */ --c-dark-hair: #34302a; /* hairline on dark */ --c-dark-line: #4a443c; /* strong border on dark */ /* ---------- TIER 2 · SEMANTIC ROLES — LIGHT (default) ---------- */ --bg: var(--c-paper); /* page background */ --bg-elevated: var(--c-paper-2); /* zebra rows / sunk blocks */ --surface: var(--c-card); /* cards, panels */ --surface-2: var(--c-paper-2); /* secondary surface */ --surface-inverse: var(--c-ink-900); /* dark strips: navbar, btn-ink, active */ --text: var(--c-ink-900); /* primary text */ --text-secondary: var(--c-ink-700); --text-muted: var(--c-ink-500); --text-faint: var(--c-ink-300); --text-on-inverse: var(--c-paper); /* text on surface-inverse */ --border-hair: var(--c-hair); /* hairline borders (role: rămâne numele) */ --border-subtle: var(--c-subtle); --border-strong: var(--c-ink-900); /* 2px ink frames */ --accent: var(--c-flash); --accent-strong: var(--c-flash-strong); --accent-soft: var(--c-flash-soft); --accent-text: var(--c-white); /* text on accent */ --live: var(--c-volt); --live-ink: var(--c-volt-ink); --shadow-color: var(--c-ink-900); /* hard offset shadow color */ --focus-ring: var(--c-flash); /* ---------- LEGACY ALIASES (țintesc rolurile; flipează în dark) ---------- */ --primary: var(--accent); --primary-strong: var(--accent-strong); --primary-soft: var(--accent-soft); --volt: var(--live); /* electric lime — LIVE / highlight / hover */ --volt-ink: var(--live-ink); --ink: var(--c-ink-900); /* raw ink — decorativ; pt TEXT folosește --text */ --paper: var(--bg); /* attn: pt text-pe-inchis folosește --text-on-inverse */ --paper-2: var(--bg-elevated); --card: var(--surface); --fg1: var(--text); --fg2: var(--text-secondary); --fg3: var(--text-muted); --fg4: var(--text-faint); /* ---------- SEMANTIC ---------- */ --success: #0f8a3d; --danger: #d92121; --warning: #d98a00; --neutral: #837b6e; --success-soft: #dff3e3; --danger-soft: #fbe0e0; --warning-soft: #fbeccd; --on-warning-soft: #8a5a00; /* text amber pe warning-soft (tie) */ --golden-soft: #ffeec2; /* bg bandă rundă de departajare (golden) — theme-INDEPENDENT, ca .sc-round--c* */ --on-golden: #6b4e00; /* text pe golden-soft */ /* ---------- WINNER (token DEDICAT, NU --success semantic) ---------- Câștigătorul citește DOAR aceste 4 roluri → re-skin global dintr-un loc. Default = verdele legacy; blocul global kf le remapează la lime. */ --winner-bg: var(--success-soft); --winner-fg: var(--success); --winner-edge: var(--success); --winner-ink: var(--success); /* ---------- CONTEST STATUS ---------- */ --status-draft-bg: #e8e2d4; --status-draft-fg: #6b6158; --status-open-bg: #dff3e3; --status-open-fg: #0f8a3d; --status-closed-bg: #dfe9ff; --status-closed-fg: #2f6df0; --status-active-bg: #d8ff3e; --status-active-fg: #141210; /* LIVE = volt */ --status-done-bg: #ede7d8; --status-done-fg: #837b6e; /* ---------- BATTLE STATUS ---------- */ --battle-pending-bg: #e8e2d4; --battle-pending-fg: #6b6158; --battle-progress-bg: #d8ff3e; --battle-progress-fg: #141210; --battle-completed-bg: #dff3e3; --battle-completed-fg: #0f8a3d; /* ---------- CATEGORY-ROW TINTS ---------- Foste „dance-style badge" bg-uri; consumate acum DOAR de .category-row--0..5 ca tentă. Badge-ul real de stil = .style-pill (hue din nume). -fg-urile + slots 6/7 = moarte (scoase). */ --style0-bg: #ffd9e3; --style1-bg: #dfe9ff; --style2-bg: #d3f3e6; --style3-bg: #ffe9c9; --style4-bg: #e8ddff; --style5-bg: #ffdcd2; /* ---------- TIER (S/A/B/C/D) ---------- */ --tier-s: #ff2e63; --tier-s-bg: #ffe4ec; --tier-a: #ff7a1a; --tier-a-bg: #ffeede; --tier-b: #e6b800; --tier-b-bg: #fff6d6; --tier-c: #2f6df0; --tier-c-bg: #e4edff; --tier-d: #9b9486; --tier-d-bg: #ece6d9; /* ---------- RANK / PODIUM ---------- */ --rank-gold: #c79200; --rank-silver: #8f8a7e; --rank-bronze: #b06a2c; /* ---------- TYPE ---------- */ --font-display: "Archivo", system-ui, sans-serif; --font-sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "Space Mono", ui-monospace, SFMono-Regular, Menlo, monospace; /* Compact type scale (keeps existing var names for template compatibility) */ --font-2xs: 0.6rem; /* 9.6px — micro badge/label */ --font-xs: 0.7rem; /* 11px — labels uppercase */ --font-sm: 0.75rem; /* 12px — text secundar */ --font-md: 0.8125rem; /* 13px — tabele dense */ --font-base: 0.875rem; /* 14px — text normal */ /* ---------- SPACING ---------- */ --pad-cell: 0.35rem 0.5rem; /* padding celula tabel compact */ --pad-badge: 0.15rem 0.45rem; --pad-pill: 0.2rem 0.6rem; --pad-chip: 0.2rem 0.5rem; --pad-card: 0.5rem 0.75rem; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; /* Breakpoints (referință — CSS nu acceptă var() în @media): mobil ≤640px, tabletă ≤992px */ --tap-min: 44px; /* touch target minim (a11y) */ /* ---------- RADII (sharp) ---------- */ --radius-sm: 2px; --radius-md: 2px; --radius-lg: 3px; /* Bordura inputurilor de înscriere = punctată + colțuri rotunjite (excepție voită de la kf-sharp, NU e zeroit în tema kf → rămâne rotund pe /concursuri). */ --entry-radius: 6px; /* ---------- BORDERS ---------- */ --bw: 2px; --bw-hair: 1px; --border: 1px solid var(--border-hair); /* hairline — compat cu codul existent */ --border-dark: 2px solid var(--border-strong); /* ---------- ELEVATION — hard offset, no blur ---------- */ --shadow-hard: 4px 4px 0 0 var(--shadow-color); --shadow-hard-sm: 2px 2px 0 0 var(--shadow-color); /* ---------- ZEBRA + HOVER rows ---------- */ --row-odd-bg: var(--bg-elevated); --row-hover-bg: var(--live); } /* ---------- DARK THEME — re-mapează DOAR rolurile semantice (TIER 2) ---------- Componentele nu se ating. Badge-urile (status/style/tier) rămân intenționat vii (pastel pe fundal închis = pop). Vezi skill `design-token-theming`. */ [data-theme="dark"] { --bg: var(--c-ink-950); /* #0c0a08 page */ --bg-elevated: var(--c-ink-900); /* zebra rows */ --surface: var(--c-ink-800); /* #1c1a16 cards */ --surface-2: var(--c-ink-900); --surface-inverse: #000000; /* navbar / btn-ink strip */ --text: var(--c-paper); /* light text */ --text-secondary: #d2caba; --text-muted: #a79e8d; --text-faint: #8b8274; --text-on-inverse: var(--c-paper); /* stays light on dark strips */ --border-hair: var(--c-dark-hair); /* #34302a */ --border-subtle: #2a2620; --border-strong: var(--c-dark-line); /* #4a443c — frames visible on dark */ --shadow-color: #000000; /* hard offset shadow */ /* accents pop on dark as-is; soften the large alert fills + lift status hues */ --success: #4cc97e; --danger: #ff6b6b; --warning: #f0b541; --success-soft: #14301f; --danger-soft: #3a1717; --warning-soft: #332611; } /* System preference when the user has NOT chosen (no-JS / first paint fallback). */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --bg: var(--c-ink-950); --bg-elevated: var(--c-ink-900); --surface: var(--c-ink-800); --surface-2: var(--c-ink-900); --surface-inverse: #000000; --text: var(--c-paper); --text-secondary: #d2caba; --text-muted: #a79e8d; --text-faint: #8b8274; --text-on-inverse: var(--c-paper); --border-hair: var(--c-dark-hair); --border-subtle: #2a2620; --border-strong: var(--c-dark-line); --shadow-color: #000000; --success: #4cc97e; --danger: #ff6b6b; --warning: #f0b541; --success-soft: #14301f; --danger-soft: #3a1717; --warning-soft: #332611; } } /* ---------- BOOTSTRAP 5.3 THEME BRIDGE ---------- Utilitățile Bootstrap (.text-muted, .text-secondary, .nav-tabs, .bg-light, dropdown…) se colorează prin --bs-*; le legăm la tokenii NOȘTRI ca să flipeze cu [data-theme] pe tot site-ul. Selectorul include [data-bs-theme] ca să bată regulile proprii Bootstrap dark (specificitate egală → câștigă app.css, încărcat DUPĂ bootstrap.min.css). Brand newsprint/ink păstrat. */ :root, [data-bs-theme="light"], [data-bs-theme="dark"] { --bs-body-bg: var(--bg); --bs-body-color: var(--text); --bs-emphasis-color: var(--text); --bs-heading-color: var(--text); --bs-secondary-color: var(--text-muted); /* .text-muted, .text-secondary */ --bs-secondary-bg: var(--surface-2); --bs-tertiary-color: var(--text-faint); --bs-tertiary-bg: var(--surface-2); --bs-border-color: var(--border-hair); --bs-border-color-translucent: var(--border-hair); --bs-link-color: var(--accent); --bs-link-hover-color: var(--accent-strong); } /* Utilitățile pe RGB nu citesc tokenii direct → override scurt cu tokeni (cele folosite). */ .bg-light { background-color: var(--surface-2) !important; } .bg-secondary { background-color: var(--surface-inverse) !important; color: var(--text-on-inverse) !important; } /* Base overrides — Bootstrap bg-light → paper newsprint */ html, body { font-family: var(--font-sans); background: var(--paper); color: var(--fg1); } /* Alert bootstrap adaptat la tokens */ .alert-danger { background: var(--danger-soft); border-color: var(--danger); color: var(--danger); } .alert-success { background: var(--success-soft); border-color: var(--success); color: var(--success); } .alert-warning { background: var(--warning-soft); border-color: var(--warning); color: var(--warning); } /* Bootstrap form-control/-select adaptate la temă (altfel rămân albe în dark). Override-uri mai specifice (ex. .login-card .form-control) au prioritate. */ .form-control, .form-select { background-color: var(--surface); border-color: var(--border-hair); color: var(--text); } .form-control::placeholder { color: var(--text-faint); } .form-control:focus, .form-select:focus { background-color: var(--surface); color: var(--text); border-color: var(--accent); box-shadow: 0 0 0 .15rem var(--accent-soft); } /* === 2. LAYOUT ============================================= */ /* Navbar — Kinetic Sharp (light × brutalist: flat, hairline 1px, accent lime) */ .app-nav { background: var(--kf-surface-bright); border-bottom: var(--kf-border); box-shadow: none; position: sticky; top: 0; z-index: 1020; } .app-nav__inner { max-width: 1200px; margin: 0 auto; padding: 0 1rem; display: flex; align-items: center; justify-content: space-between; height: 58px; } .app-nav__brand { font-family: var(--kf-font-display); font-weight: 400; font-size: 1.5rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--kf-text); text-decoration: none; display: flex; align-items: center; transition: color .1s; } .app-nav__brand .bi-trophy-fill { color: var(--kf-accent); } .app-nav__brand:hover { color: var(--kf-accent); } .app-nav__actions { display: flex; align-items: center; gap: 0.5rem; } .app-nav__link { font-size: var(--font-md); font-weight: 600; color: var(--kf-text-variant); text-decoration: none; padding: 0.3rem 0.6rem; border-radius: var(--kf-r-sm); transition: color .1s, background .1s; } .app-nav__link:hover { color: var(--kf-text); background: var(--kf-tint); } /* Logout = form POST cu CSRF (nu link GET); form-ul nu strică flex-ul, butonul arată ca linkul. */ .app-nav__logout { display: contents; } .app-nav__link--btn { background: none; border: 0; font: inherit; font-size: var(--font-md); font-weight: 600; cursor: pointer; } .app-nav__link--active { color: var(--kf-accent); box-shadow: inset 0 -2px var(--kf-accent-strip); } .app-nav__btn { font-size: var(--font-sm); font-weight: 700; padding: 0.25rem 0.75rem; border: var(--kf-border); border-radius: var(--kf-r-sm); background: transparent; color: var(--kf-text); text-decoration: none; transition: background .1s, color .1s, border-color .1s; line-height: 1.5; display: inline-flex; align-items: center; } .app-nav__btn:hover { background: var(--kf-text); color: var(--kf-surface-bright); } .app-nav__btn--flash { background: var(--kf-primary); border-color: var(--kf-primary); color: var(--kf-on-primary); } .app-nav__btn--flash:hover { background: var(--kf-primary-solid); border-color: var(--kf-primary-solid); color: var(--kf-on-solid); } .app-nav__theme { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; line-height: 1; background: transparent; border: var(--kf-border); border-radius: var(--kf-r-sm); color: var(--kf-text); cursor: pointer; transition: background .1s, color .1s, border-color .1s; } .app-nav__theme:hover { background: var(--kf-text); border-color: var(--kf-text); color: var(--kf-surface-bright); } /* Login inline din bară — dropdown flat (hairline 1px) */ .app-nav__login { min-width: 16rem; padding: .75rem; border: var(--kf-border); border-radius: var(--kf-r-sm); box-shadow: none; } .app-nav__login-lbl { display: block; margin-bottom: .4rem; font-family: var(--kf-font-display); font-weight: 400; font-size: var(--font-2xs); text-transform: uppercase; letter-spacing: .08em; color: var(--kf-accent); } .app-nav__user { font-size: var(--font-xs); color: var(--kf-text-variant); display: flex; align-items: center; gap: 4px; text-decoration: none; transition: color .1s; } .app-nav__user:hover { color: var(--kf-accent); } .app-nav__role { font-family: var(--kf-font-mono); font-size: 0.6rem; background: var(--kf-surface-2); border: 1px solid var(--kf-line); padding: 0 5px; border-radius: var(--kf-r-sm); color: var(--kf-text-variant); letter-spacing: .05em; } /* Wrapper principal */ .app-wrap { max-width: 1200px; margin: 0 auto; padding: 0 1rem; } /* Pagina judecatorului — fara sidebar, full screen */ /* Container login — latime fixa centrata */ .login-container { max-width: 420px; } /* Container formular ingust */ /* Header de pagina compact */ .page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; flex-wrap: wrap; gap: 0.5rem; } .page-header__title { font-family: var(--font-display); font-size: var(--font-base); font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; margin: 0; } /* === 3. TABLES ============================================= */ /* Tabel compact */ /* Coloane fixe frecvente */ .col-actions { width: 100px; text-align: right; white-space: nowrap; } /* Rank column */ .rank-1 { color: var(--rank-gold); } .rank-2 { color: var(--rank-silver); } .rank-3 { color: var(--rank-bronze); } /* Stat column */ .stat-value { font-weight: 700; color: var(--fg1); } /* Results table */ /* Section header */ /* === 4. BADGES & STATUS ==================================== */ /* Badge status concurs */ .badge-status { font-family: var(--font-display); font-size: var(--font-xs); font-weight: 900; padding: var(--pad-badge); border-radius: var(--radius-md); display: inline-block; white-space: nowrap; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.08em; } .badge-status--draft { background: var(--status-draft-bg); color: var(--status-draft-fg); } .badge-status--open { background: var(--status-open-bg); color: var(--status-open-fg); } .badge-status--closed { background: var(--status-closed-bg); color: var(--status-closed-fg); } .badge-status--active { background: var(--status-active-bg); color: var(--status-active-fg); } .badge-status--done { background: var(--status-done-bg); color: var(--status-done-fg); } /* Badge status battle/bout */ .badge-battle--pending { background: var(--battle-pending-bg); color: var(--battle-pending-fg); } .badge-battle--progress { background: var(--battle-progress-bg); color: var(--battle-progress-fg); } .badge-battle--completed { background: var(--battle-completed-bg); color: var(--battle-completed-fg); } /* Badge faza bracket */ /* Badge categorie */ .badge-category { font-size: var(--font-xs); font-weight: 700; padding: var(--pad-badge); border-radius: var(--radius-md); background: var(--surface-inverse); color: var(--text-on-inverse); text-decoration: none; display: inline-block; transition: background 0.1s; } .badge-category:hover { background: var(--primary); color: #fff; } /* Badge metoda calificare */ /* Valori semantice */ /* === 5. PILLS & FILTERS ==================================== */ .filter-pill { font-size: var(--font-sm); padding: var(--pad-pill); border-radius: var(--radius-sm); border: 1.5px solid var(--border-strong); background: var(--card); color: var(--fg2); cursor: pointer; transition: background 0.1s, color 0.1s; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; line-height: 1.3; } .filter-pill:hover { background: var(--volt); color: var(--volt-ink); border-color: var(--volt-ink); } .filter-pill.active { background: var(--surface-inverse); color: var(--text-on-inverse); } /* === 5b. FOLDER TABS (segmented page tabs, lipite de conținut) === */ .folder-tabs { display: flex; flex-wrap: wrap; gap: .25rem; align-items: flex-end; border-bottom: 2px solid var(--border-strong); margin-bottom: 1rem; } .folder-tab { display: inline-flex; align-items: center; gap: 6px; padding: .4rem .85rem; margin-bottom: -2px; /* acoperă rigla containerului */ background: transparent; border: 2px solid transparent; border-bottom: none; border-radius: var(--radius-sm) var(--radius-sm) 0 0; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: .05em; font-size: var(--font-xs); line-height: 1.3; color: var(--text-muted); text-decoration: none; cursor: pointer; transition: background .1s, color .1s; } .folder-tab:hover { background: var(--volt); color: var(--volt-ink); } .folder-tab.active { background: var(--surface); border-color: var(--border-strong); color: var(--text); } .folder-tab__count { font-family: var(--font-mono); font-weight: 400; font-size: var(--font-2xs); color: var(--fg4); } .folder-tab.active .folder-tab__count { color: var(--text-muted); } /* === 6. CHIPS ============================================== */ /* Chip competitor inline */ /* Chip judecator */ .judge-chip { display: inline-flex; align-items: center; gap: 5px; font-size: var(--font-sm); padding: var(--pad-chip); border: 1.5px solid var(--border-strong); border-radius: var(--radius-md); background: var(--card); color: var(--fg1); text-decoration: none; transition: background 0.1s, color 0.1s; line-height: 1.4; } .judge-chip:hover { background: var(--volt); color: var(--volt-ink); border-color: var(--volt-ink); } .judge-chip .chip-system { font-size: var(--font-xs); color: var(--fg3); background: var(--paper-2); padding: 0 3px; border-radius: var(--radius-sm); } .judge-chip__del-form { display: inline; line-height: 0; } .judge-chip__del { border: 0; background: transparent; color: var(--danger); padding: 0; line-height: 1; cursor: pointer; font-size: var(--font-xs); } .judge-chip:hover .judge-chip__del { color: var(--volt-ink); } /* Jurat marcat pentru eliminare (staged) — se aplică la „Salvează modificările" */ /* Hint jurați per categorie (panel: X/N roluri · mai alege …) */ .exhint { font-size: var(--font-xs); margin-bottom: 2px; min-height: 1em; } .exhint--ok { color: var(--success); } .exhint--warn { color: var(--warning); } .exhint--err { color: var(--danger); font-weight: 600; } /* === 7. CARDS — Hub organizator ============================= */ .hub-card { border: 2px solid var(--border-strong); border-radius: var(--radius-lg); overflow: hidden; background: var(--card); transition: box-shadow .1s; } .hub-card:hover { box-shadow: var(--shadow-hard); } /* Strip status colorat (top) */ .hub-strip { display: flex; align-items: center; justify-content: space-between; padding: .28rem .75rem; font-family: var(--font-display); font-size: var(--font-xs); font-weight: 900; text-transform: uppercase; letter-spacing: .1em; border-bottom: 2px solid var(--border-strong); } .hub-strip--open { background: var(--status-open-bg); color: var(--status-open-fg); } .hub-strip--closed { background: var(--status-closed-bg); color: var(--status-closed-fg); } .hub-strip--active { background: var(--status-active-bg); color: var(--status-active-fg); } /* Descriere concurs (sub hero, în metarow) */ /* Meta sub hero (anvergură + nr. categorii + stare + descriere) */ .hub-metarow__cats { font-family: var(--font-mono); font-size: var(--font-xs); font-variant-numeric: tabular-nums; color: var(--fg3); } /* Categorii hub */ .hub-cats { border-top: 2px solid var(--border-strong); padding: 0 .5rem .3rem; } /* Footer acțiuni */ .hub-footer { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; padding: .5rem .75rem; border-top: 2px solid var(--border-strong); background: var(--paper-2); } /* Head compact card — thumbnail mic + titlu proeminent + acțiuni (focus pe nume, nu poster mare) */ .hub-head { display: flex; align-items: flex-start; gap: .6rem; padding: .6rem .7rem; border-bottom: 2px solid var(--border-strong); } .hub-thumb { flex: 0 0 auto; width: 56px; height: 56px; border: 2px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-inverse); } .hub-thumb[data-lightbox] { cursor: zoom-in; } .hub-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .hub-thumb--empty { display: flex; align-items: center; justify-content: center; color: var(--text-faint); font-size: 1.3rem; } .hub-head__main { flex: 1 1 auto; min-width: 0; } .hub-head__title { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -.01em; line-height: 1.05; font-size: clamp(1rem, 1.4vw, 1.3rem); color: var(--text); word-break: break-word; } .hub-head__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .6rem; margin-top: .25rem; font-size: var(--font-sm); color: var(--text-secondary); } .hub-head__meta i { opacity: .75; } .hub-head__actions { flex: 0 0 auto; } /* Acțiuni de stare pe rândul de categorie — următorul pas explicit */ .cat-actions { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; } .cat-actions form { display: inline; margin: 0; } /* === Cont organizator (profil) === */ .acct-card { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .6rem .75rem; border: 2px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface); } .acct-card__id { display: flex; align-items: center; gap: .55rem; flex: 1 1 auto; min-width: 0; } .acct-card__ico { font-size: 1.6rem; color: var(--text-muted); } .acct-card__name { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: .02em; font-size: var(--font-base); color: var(--text); } .acct-card__email { font-size: var(--font-sm); color: var(--text-secondary); } .acct-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; padding-top: .6rem; margin-top: .5rem; border-top: 1px solid var(--border-hair); } .acct-form__row { display: flex; flex-direction: column; gap: .15rem; flex: 1 1 220px; } .acct-form__lbl { font-size: var(--font-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 700; } .acct-form__actions { flex: 0 0 auto; } /* === 8. BRACKET ============================================ */ /* ── Pagina categorie LATĂ (fără sidebar, container extins pt bracket) ── */ .page-wide .app-wrap { max-width: 1600px; } /* ── Topbar categorie: titlu mare (concurs + categorie) + strip categorii ── */ .cat-topbar { margin-bottom: .75rem; } .cat-topbar__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; } .cat-topbar__titles { display: flex; align-items: flex-start; gap: .6rem; min-width: 0; } .cat-topbar__back { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; flex-shrink: 0; margin-top: .25rem; border: 2px solid var(--border-strong); border-radius: var(--radius-sm); color: var(--text); text-decoration: none; } .cat-topbar__back:hover { background: var(--surface-inverse); color: var(--text-on-inverse); } .cat-topbar__cat { font-family: var(--font-display); font-size: 1.6rem; font-weight: 900; line-height: 1.1; margin: .1rem 0; text-transform: uppercase; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .cat-topbar__fmt { color: var(--primary); } .cat-topbar__meta { font-size: var(--font-xs); color: var(--fg4); } .cat-strip { display: flex; gap: .35rem; flex-wrap: wrap; padding-top: .5rem; margin-top: .4rem; border-top: 1px solid var(--border-hair); } .cat-strip__item { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .55rem; border-radius: 999px; border: 1px solid var(--border-subtle); background: var(--paper); font-size: var(--font-xs); color: var(--fg2); text-decoration: none; white-space: nowrap; } .cat-strip__item:hover { border-color: var(--border-strong); } .cat-strip__item--on { background: var(--surface-inverse); color: var(--text-on-inverse); border-color: var(--border-strong); } .cat-strip__fmt { font-weight: 700; } .cat-strip__top { font-size: var(--font-2xs); color: var(--fg4); } .cat-strip__item--on .cat-strip__top { color: rgba(245, 241, 232, .6); } .bk-col { display: flex; flex-direction: column; flex: 1 1 0; min-width: 96px; max-width: 190px; } .bk-col-label { font-family: var(--font-display); font-size: var(--font-xs); font-weight: 900; text-transform: uppercase; letter-spacing: .1em; color: var(--fg3); text-align: center; padding: .35rem .5rem .5rem; border-bottom: 1px solid var(--border-hair); margin-bottom: .5rem; } .bk-col-label--active { color: var(--volt-ink); background: var(--volt); border-bottom-color: var(--volt-ink); } .bk-col-label--done { color: var(--success); border-bottom-color: var(--success); } .bk-col-body { display: flex; flex-direction: column; flex: 1; } /* Fiecare battle = un slot flex egal, conținut centrat → runda cu N/2 matchuri pică fix la mijlocul dintre cei 2 feederi din runda dinainte. */ .bk-match { flex: 1; display: flex; flex-direction: column; justify-content: center; position: relative; } /* ── PRIMUL RÂND (T32) = FĂRĂ overlap → conector OUTGOING curat din marginea feederului. Brațul pleacă din muchia dreaptă a cardului (left:100%) și ajunge la bara verticală (merge point) la --bk-firstarm. De acolo, o linie de legătură (--bk-childlink) merge până în cardul T16. */ .bk-col--first .bk-match--up::after, .bk-col--first .bk-match--down::after { content: ''; position: absolute; left: 100%; width: var(--bk-firstarm); height: 50%; border-right: 2px solid var(--border-subtle); } .bk-col--first .bk-match--up::after { top: 50%; border-top: 2px solid var(--border-subtle); } .bk-col--first .bk-match--down::after { bottom: 50%; border-bottom: 2px solid var(--border-subtle); } .bk-col--first .bk-match--straight::after { content: ''; position: absolute; left: 100%; top: 50%; width: var(--bk-firstarm); border-top: 2px solid var(--border-subtle); } /* linia de legătură de la merge point în cardul copil (T16) — ca să nu fie lipit de bracket */ .bk-col--second .bk-match::before { content: ''; position: absolute; left: calc(var(--bk-childlink) * -1); top: 50%; width: var(--bk-childlink); border-top: 2px solid var(--border-subtle); } .bk-col--second .bk-match--resolved::before { border-color: var(--success); } /* ── COLOANELE 3+ = overlap → conector „merge" (.bk-merge) pe matchul avansat: o LINIE verticală întinsă între CENTRELE celor 2 feederi (25%→75%) + cot scurt în card. Capetele sunt pur PROCENTUALE (sloturile flex egale țin centrele la 25%/75% indiferent de înălțimea cardului — ex. nume pe 2 rânduri); linia trece PE SUB cardurile feeder (z-index: .bk-battle=2 peste .bk-merge=1) → pare că iese din muchia cardului. */ .bk-merge { position: absolute; left: calc(var(--bk-arm) * -1); top: 25%; bottom: 25%; z-index: 1; border-left: 2px solid var(--border-subtle); } /* cot scurt din linie în card, la jumătatea matchului avansat */ .bk-col:not(.bk-col--first):not(.bk-col--second):not(.bk-col--final) .bk-match::after { content: ''; position: absolute; left: calc(var(--bk-arm) * -1); top: 50%; width: var(--bk-arm); border-top: 2px solid var(--border-subtle); } /* match rezolvat → linie + cot verzi (calea câștigătorului) */ .bk-match--resolved .bk-merge, .bk-match--resolved::after { border-color: var(--success); } /* ── PLACEHOLDER (schelet bracket pregătit din start, ca finala „urmează") ── bg OPAC (--paper, ca pagina): linia merge trece pe sub carduri → fără mască s-ar vedea prin el. */ .bk-battle--ph { border: 1px dashed var(--border-hair); background: var(--paper); box-shadow: none; min-height: 40px; display: flex; align-items: center; justify-content: center; } .bk-battle--ph i { font-size: .7rem; color: var(--fg4); opacity: .5; } /* conectorii unui placeholder = estompați (nu negru plin) */ .bk-match--ph .bk-merge, .bk-col--second .bk-match--ph::before, .bk-col--final .bk-battle--ph::before, .bk-col--final .bk-battle--ph::after { border-color: var(--border-hair); } /* Card battle — z-index 2 = peste liniile merge (vezi comentariul .bk-merge) */ .bk-battle { border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--card); overflow: hidden; margin: 3px 0; position: relative; z-index: 2; transition: box-shadow .1s; } .bk-battle--pending { border-color: var(--border-hair); } .bk-battle--active { border-color: var(--volt-ink); background: var(--volt); color: var(--volt-ink); box-shadow: var(--shadow-hard-sm); } .bk-battle--completed { background: var(--paper-2); } .bk-battle--golden { border-color: var(--primary); box-shadow: 1px 1px 0 0 var(--primary); } /* Entry row în battle */ .bk-entry { display: flex; align-items: center; gap: .3rem; padding: .3rem .5rem; font-size: var(--font-base); border-bottom: 1px solid var(--border-hair); line-height: 1.25; min-height: 28px; } .bk-entry:last-of-type { border-bottom: none; } /* câștigătorul iese clar în evidență (bandă verde la margine + bold) ca să-l urmărești ușor */ .bk-entry--winner { background: var(--winner-bg); color: var(--winner-fg); font-weight: 800; box-shadow: inset 3px 0 0 0 var(--winner-edge); } .bk-entry--loser { color: var(--fg3); } /* lizibil, dar clar secundar */ .bk-entry--bye { color: var(--fg3); font-style: italic; letter-spacing: .08em; } /* avans liber — fără win/lose */ /* numele se aliniază spre CENTRUL bracketului: aripa stângă → dreapta, aripa dreaptă → stânga. Finala = centru. Nume lungi / 2v2 → maxim 2 RÂNDURI apoi taie (line-clamp); geometria nu se strică — sloturile .bk-match rămân egale, conectorii sunt procentuali. */ .bk-entry__name { flex: 1; min-width: 0; text-align: right; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } .bk-half--right .bk-entry__name { text-align: left; } .bk-col--final .bk-entry__name { text-align: center; } .bk-entry__trophy { color: var(--rank-gold); font-size: .75rem; flex-shrink: 0; } /* Badge golden round */ /* marcaj departajare = COLȚ PLIAT (triunghi) cu nr de runde suplimentare (1/2/3) pe colț. Stă pe latura EXTERIOARĂ (opusă numelui, care e aliniat spre centru): stânga pe aripa stângă, dreapta pe aripa dreaptă → nu acoperă numele. Absolut → nu mărește înălțimea. */ .bk-golden-mark { position: absolute; top: 0; left: 0; z-index: 3; width: 26px; height: 26px; background: var(--primary); color: var(--text-on-inverse); clip-path: polygon(0 0, 100% 0, 0 100%); font-size: .62rem; font-weight: 800; line-height: 1; text-align: left; padding: 1.5px 0 0 2.5px; } .bk-half--right .bk-golden-mark { left: auto; right: 0; clip-path: polygon(100% 0, 0 0, 100% 100%); text-align: right; padding: 1.5px 2.5px 0 0; } /* CAMPION */ .bk-champion { margin-top: .75rem; padding: .65rem .75rem; background: var(--volt); border: 1px solid var(--volt-ink); border-radius: var(--radius-lg); text-align: center; color: var(--volt-ink); box-shadow: var(--shadow-hard-sm); } .bk-champion__label { font-family: var(--font-display); font-size: var(--font-xs); text-transform: uppercase; letter-spacing: .12em; color: var(--volt-ink); margin-bottom: .2rem; } .bk-champion__name { font-family: var(--font-display); font-size: 1.1rem; font-weight: 900; color: var(--volt-ink); text-transform: uppercase; } /* ── Split: bracket (stânga) + battle curent (dreapta), stacked pe mobil ── */ .bk-layout { display: flex; flex-direction: column; gap: 1rem; align-items: stretch; } .bk-layout__bracket { order: 2; min-width: 0; } .bk-layout__current { order: 1; min-width: 0; } @media (min-width: 992px) { .bk-layout { flex-direction: row; align-items: flex-start; } /* 33 / 67: panou jurizare detaliată (battle curent) STÂNGA 33%, bracket DREAPTA 67% (bracketul fluid are nevoie de spațiu ca Top 32 să încapă fără scroll). align-self: center = panoul mai scund stă pe MIJLOCUL înălțimii bracketului, nu lipit sus; sticky rămâne → la scroll tot se lipește sub marginea de sus. */ .bk-layout__current { order: 1; flex: 0 0 33%; max-width: 33%; min-width: 0; align-self: center; position: sticky; top: .75rem; } .bk-layout__bracket { order: 2; flex: 1 1 0; min-width: 0; } .bk-layout--solo .bk-layout__bracket { flex: 1 1 100%; } } /* bara de progres sub battle-ul curent detaliat → full width în coloana din dreapta */ .bk-progress--under { margin: .6rem 0 0; } .bk-progress--under .bk-progress__bar { max-width: none; } /* Capul panoului „battle curent": fază + control Start/Finalizează */ .bk-current__ctrl { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .35rem .55rem; margin-bottom: .5rem; border: 1px solid var(--volt-ink); background: var(--volt); border-radius: var(--radius-sm); } .bk-current__phase { font-family: var(--font-display); font-weight: 900; font-size: var(--font-sm); text-transform: uppercase; letter-spacing: .06em; color: var(--volt-ink); } /* Scorecard focus în coloana din stânga: umple lățimea, scară redusă vs panoul mare; fără umbră dură — panoul stă lipit de bracket, umbra adăuga zgomot */ .bk-layout__current .sc--focus { width: 100%; max-width: 100%; margin-bottom: 0; box-shadow: none; } .bk-layout__current .sc--focus .sc__side { font-size: 1.02rem; padding: .5rem .7rem; } .bk-layout__current .sc--focus .sc__score-n { font-size: 1.65rem; } .bk-layout__current .sc--focus .sc-jt__note { font-size: var(--font-md); } .bk-layout__current .sc--focus .sc-jt__row { grid-template-columns: 1fr 6.5rem 1fr; } /* ── Bracket OGLINDIT (mirrored: stânga → FINALĂ ← dreapta) ── FLUID: mirror = 100% din container, coloanele elastice (min 96 / max 190px) → Top 32 încape fără scroll pe ecrane late; sub ~1250px coloanele ating minimul și .bk-scroll preia (fallback). */ .bk-scroll { overflow-x: auto; padding-bottom: .5rem; } .bk-mirror { /* --bk-overlap = cât trage coloana 3+ PESTE feederul ei (mai mare = mai compact); --bk-firstgap = spațiul normal T32→T16 (primul rând rămâne fără overlap); --bk-arm = cotul scurt în card. Reglabile dintr-un loc. */ --bk-overlap: 36px; --bk-firstgap: 18px; /* T32→T16 total = brațul bracketului + linia de legătură spre copil */ --bk-firstarm: 9px; /* brațul bracketului (din cardul T32 până la bara verticală/merge point) */ --bk-childlink: 9px; /* linia care leagă merge point-ul de copil (cardul T16) — ca să nu fie lipit */ --bk-arm: 8px; --bk-gap: 14px; display: flex; align-items: stretch; gap: 0; min-height: 200px; padding: .5rem .25rem 1.5rem; width: 100%; min-width: 0; } /* aripile împart spațiul egal; când coloanele ating max-width, spațiul liber merge spre marginile exterioare (justify flex-end + flip pe dreapta) → bracketul se strânge spre finală. min-width: MIN-CONTENT (nu 0!): aripa refuză să se strângă sub suma minimelor coloanelor → overflow-ul cade la DREAPTA mirror-ului (scrollabil), nu în stânga aripii (de neatins în LTR). */ .bk-half { display: flex; align-items: stretch; gap: 0; flex: 1 1 0; min-width: min-content; justify-content: flex-end; } .bk-half--center { align-items: center; padding: 0 var(--bk-gap); flex: 0 0 auto; } /* coloanele 3+ se suprapun pe orizontală → matchul avansat tras sub feederi (diagonal compact). Ordinea DOM (coloana mai centrală = mai târzie) o pune pe ea deasupra → conectorul „merge" se vede. */ .bk-col + .bk-col { margin-left: calc(var(--bk-overlap) * -1); } /* a 2-a coloană (T16) NU se suprapune peste primul rând (T32) → spațiu normal pt conectorii outgoing */ .bk-col--first + .bk-col { margin-left: var(--bk-firstgap); } /* Jumătatea dreaptă = oglindită prin CSS: scaleX flip pe coloane + conectori, iar conținutul (carduri + etichete) e re-flipuit ca textul să rămână normal. */ .bk-half--right { transform: scaleX(-1); } .bk-half--right .bk-battle, .bk-half--right .bk-col-label { transform: scaleX(-1); } /* Finala primește din AMBELE laturi → brațe scurte stânga + dreapta */ .bk-col--final .bk-battle::before, .bk-col--final .bk-battle::after { content: ''; position: absolute; top: calc(50% - 1px); width: var(--bk-gap); border-top: 2px solid var(--border-subtle); } .bk-col--final .bk-battle::before { left: calc(var(--bk-gap) * -1); } .bk-col--final .bk-battle::after { right: calc(var(--bk-gap) * -1); } /* ── SCORECARD (battle reveal: runde × jurați × participant) ── */ .sc { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--card); margin-bottom: .75rem; max-width: 680px; overflow: hidden; } .sc--live { border-color: var(--volt-ink); box-shadow: var(--shadow-hard-sm); } .sc--done { border-color: var(--success); } /* Panou FOCUS — battle curent/rezultat */ .sc--focus { max-width: 960px; width: 100%; margin-bottom: 1rem; box-shadow: var(--shadow-hard); } .sc--focus .sc__bar { font-size: var(--font-sm); padding: .4rem .85rem; } .sc--focus .sc__side { font-size: 1.3rem; padding: .7rem 1rem; } .sc--focus .sc__score-n { font-size: 2.2rem; } .sc--focus .sc__score { min-width: 5.5rem; } .sc--focus .sc-jt__note { font-size: 1.05rem; } .sc--focus .sc-jt__cell { min-height: 1.8rem; } .sc--focus .sc-round__hd { font-size: var(--font-sm); } .sc__bar { display: flex; justify-content: space-between; align-items: center; padding: .3rem .6rem; background: var(--surface-inverse); color: var(--text-on-inverse); font-family: var(--font-display); font-size: var(--font-xs); text-transform: uppercase; letter-spacing: .08em; } .sc__state { display: inline-flex; align-items: center; gap: .3rem; font-weight: 700; } .sc__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--volt); animation: sc-pulse 1.1s ease-in-out infinite; } @keyframes sc-pulse { 0%,100% { opacity: 1; } 50% { opacity: .25; } } .sc__vs { display: flex; align-items: stretch; border-bottom: 1px solid var(--border-hair); } .sc__side { flex: 1; min-width: 0; padding: .5rem .75rem; font-family: var(--font-display); font-weight: 900; font-size: 1.05rem; text-transform: uppercase; display: flex; align-items: center; gap: .4rem; } .sc__side--r { justify-content: flex-end; text-align: right; } .sc__side--win { background: var(--winner-bg); color: var(--winner-fg); box-shadow: inset 4px 0 0 0 var(--winner-edge); } .sc__side--out { color: var(--fg4); } /* nume lungi / 2v2 → maxim 2 rânduri apoi taie (același pattern ca .bk-entry__name) */ .sc__nm { min-width: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; } .sc__tr { color: var(--rank-gold); flex-shrink: 0; } /* Scor mare acumulat în antet = runde câștigate (2–0) */ .sc__score { align-self: center; flex-shrink: 0; text-align: center; padding: 0 .7rem; min-width: 4.5rem; } .sc__vs-mid { font-family: var(--font-display); font-weight: 900; color: var(--fg4); font-size: var(--font-sm); } .sc__score-n { font-family: var(--font-display); font-weight: 900; font-size: 1.6rem; line-height: 1; color: var(--fg3); } .sc__score-n.is-win { color: var(--winner-ink); } .sc__score-sep { font-family: var(--font-display); font-weight: 900; color: var(--fg4); font-size: 1rem; margin: 0 .15rem; } .sc__score-lbl { display: block; font-size: var(--font-2xs); color: var(--fg4); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; } /* Bloc rundă = card distinct, fundal colorat ciclic (3 culori) + dungă accent stânga, ca rundele să se distingă clar una de alta */ .sc-round { border-left: 4px solid var(--fg4); border-radius: var(--radius-sm); margin: 0 .45rem .4rem; overflow: hidden; } .sc-round:first-of-type { margin-top: .4rem; } .sc-round--c0 { border-left-color: #2f6df0; background: #f4f8ff; } .sc-round--c0 .sc-round__hd { background: #dde9ff; } .sc-round--c1 { border-left-color: var(--warning); background: #fffaef; } .sc-round--c1 .sc-round__hd { background: var(--warning-soft); } .sc-round--c2 { border-left-color: #7a4fd0; background: #f7f2ff; } .sc-round--c2 .sc-round__hd { background: #e7dcff; } /* runda de departajare (golden) — scoasă în evidență cu auriu */ .sc-round--golden { border: 2px solid var(--rank-gold); border-left-width: 5px; background: #fff8e6; box-shadow: 0 0 0 2px rgba(199,146,0,.12); } .sc-round--golden .sc-round__hd { background: var(--golden-soft); color: var(--on-golden); } .sc-round--golden .sc-round__no { color: var(--on-golden); } .sc-round__hd { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .2rem .6rem; background: var(--paper-2); border-bottom: 1px solid var(--border-hair); font-size: var(--font-xs); text-transform: uppercase; letter-spacing: .05em; } .sc-round__no { font-family: var(--font-display); font-weight: 900; color: var(--fg2); } .sc-round__res { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; } .sc-round__w { font-weight: 700; } .sc-round__w--tie { color: var(--fg3); } .sc-round__tally { font-family: var(--font-mono); color: var(--fg3); flex-shrink: 0; } /* Tabel jurați — stânga = e1 | jurat | dreapta = e2. Fundal alb ca umplerea %-ului să se vadă clar (identitatea rundei rămâne pe header + dunga stângă + chenar). */ .sc-jt { display: flex; flex-direction: column; background: var(--card); } /* Mijloc cu lățime FIXĂ (nu auto) → celulele laterale e1/e2 rămân egale pe TOATE rândurile și rundele, indiferent de cât de lung e numele juratului/criteriului → barele --w% nu se mai distorsionează. Numele/criteriile lungi se rup în mijlocul fix (overflow-wrap). */ .sc-jt__row { display: grid; grid-template-columns: 1fr 7.5rem 1fr; align-items: stretch; border-top: 1px solid var(--border-hair); } .sc--focus .sc-jt__row { grid-template-columns: 1fr 10rem 1fr; } .sc-jt__row:first-child { border-top: none; } .sc-jt__judge { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: .12rem .4rem; text-align: center; line-height: 1.05; border-left: 1px solid var(--border-hair); border-right: 1px solid var(--border-hair); min-width: 0; overflow: hidden; overflow-wrap: anywhere; } .sc-jt__jn { font-size: var(--font-xs); font-weight: 700; } .sc-jt__jr { font-size: var(--font-2xs); color: var(--fg3); text-transform: uppercase; } /* O singură linie per jurat/participant — FĂRĂ wrap. Fundalul celulei = cât din total (lungime = % normalizat), cu muchie clară unde se termină procentul. */ .sc-jt__cell { --sc-fill: rgba(20, 18, 16, .12); --sc-edge: rgba(20, 18, 16, .3); position: relative; overflow: hidden; display: flex; align-items: center; flex-wrap: nowrap; gap: .4rem; padding: .14rem .6rem; min-height: 1.55rem; min-width: 0; /* Fundal = cât din total: bloc colorat până la --w (=% normalizat) cu muchie clară */ background: linear-gradient(90deg, transparent calc(var(--w, 0%) - 2px), var(--sc-edge) calc(var(--w, 0%) - 2px), var(--sc-edge) var(--w, 0%), transparent var(--w, 0%)), linear-gradient(90deg, var(--sc-fill) var(--w, 0%), transparent var(--w, 0%)); } .sc-jt__cell--e2 { justify-content: flex-end; background: linear-gradient(270deg, transparent calc(var(--w, 0%) - 2px), var(--sc-edge) calc(var(--w, 0%) - 2px), var(--sc-edge) var(--w, 0%), transparent var(--w, 0%)), linear-gradient(270deg, var(--sc-fill) var(--w, 0%), transparent var(--w, 0%)); } .sc-jt__cell.is-fav { --sc-fill: rgba(15, 138, 61, .22); --sc-edge: var(--success); box-shadow: inset 3px 0 0 0 var(--success); } .sc-jt__cell--e2.is-fav { box-shadow: inset -3px 0 0 0 var(--success); } /* rundă egală (scor egal) — marcaj neutru amber pe ambele părți + „egal" la mijloc */ .sc-jt__cell.is-tie { --sc-fill: rgba(199, 146, 0, .16); --sc-edge: var(--warning); box-shadow: inset 3px 0 0 0 var(--warning); } .sc-jt__cell--e2.is-tie { box-shadow: inset -3px 0 0 0 var(--warning); } .sc-jt__judge.is-tie { background: var(--warning-soft); } .sc-jt__eq { font-size: var(--font-2xs); font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--warning); } /* Caret „favorit" scos din flux, fix la marginea exterioară → nu mai împinge cifrele */ .sc-jt__cell--e1 { padding-left: 1.6rem; } .sc-jt__cell--e2 { padding-right: 1.6rem; } .sc-jt__fav { position: absolute; top: 50%; transform: translateY(-50%); } .sc-jt__cell--e1 .sc-jt__fav { left: .45rem; } .sc-jt__cell--e2 .sc-jt__fav { right: .45rem; } /* Nota = numărul prominent; %-ul mic (lungimea fundalului îl arată oricum) */ .sc-jt__note { flex-shrink: 0; font-family: var(--font-mono); font-weight: 700; font-size: var(--font-md); color: var(--fg1); } .sc-jt__note small { font-size: var(--font-2xs); color: var(--fg2); font-weight: 400; } /* Skilluri separate (Trivium) — inline, întregi (e loc), text lizibil */ .sc-jt__sk { display: inline-flex; flex-wrap: nowrap; gap: .45rem; } .sc-jt__skv { font-size: var(--font-xs); color: var(--fg2); white-space: nowrap; } .sc-jt__skv b { color: var(--fg1); font-family: var(--font-mono); } .sc-jt__pen { flex-shrink: 0; font-size: var(--font-2xs); color: var(--danger); font-weight: 700; white-space: nowrap; background: var(--danger-soft); padding: 0 .3rem; border-radius: var(--radius-sm); text-transform: uppercase; } .sc-jt__fav { color: var(--success); flex-shrink: 0; } /* Legendă reveal — explică notă / % / bară / crash pentru oameni obișnuiți */ .sc-legend { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; padding: .4rem .65rem; background: var(--paper-2); border-bottom: 1px solid var(--border-hair); font-size: var(--font-2xs); color: var(--fg3); } .sc-legend > span { display: inline-flex; align-items: center; gap: .35rem; } .sc-legend__k { font-family: var(--font-mono); color: var(--fg1); background: var(--card); border: 1px solid var(--border-hair); border-radius: var(--radius-sm); padding: 0 .3rem; } .sc-legend__bar { width: 26px; height: 7px; border-radius: 999px; border: 1px solid var(--border-hair); background: linear-gradient(90deg, var(--success) 65%, var(--paper) 65%); } /* OUR / panel — tabel JURAT × DANSATOR. Stânga = juratul + categoria pe care o jurizează; coloana fiecărui dansator = TOTALul dat de acel jurat pe criteriul lui. Verde = cine a luat mai mult la criteriul ăla; crash/slip marcat. Detaliul pe runde rămâne în bracket (vizualizare detaliată). */ /* UN tabel: cap (nume mari + scor mare, stil .sc__vs) + rânduri criterii pe ACELEAȘI 3 coloane (1fr | criteriu/scor | 1fr) → e1 sub nume1, criteriul sub scor, e2 sub nume2. Aliniere garantată. */ /* full-bleed în rama .sc (chenarul exterior = SINGURA ramă; fără cutie-în-cutie) */ .sc-jc { display: grid; grid-template-columns: 1fr minmax(5rem, auto) 1fr; margin: 0; background: var(--card); font-variant-numeric: tabular-nums; } /* cap: nume mari */ .sc-jc__nm { display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .5rem .75rem; border-bottom: 1px solid var(--border-hair); font-family: var(--font-display); font-weight: 900; font-size: 1.05rem; text-transform: uppercase; min-width: 0; } .sc-jc__nm.is-win { background: var(--winner-bg); color: var(--winner-fg); } .sc-jc__nm.is-out { color: var(--fg4); } /* cap: scor mare (centru) */ .sc-jc__sc { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: .3rem .7rem; border-bottom: 1px solid var(--border-hair); text-align: center; } .sc-jc__sc-n { font-family: var(--font-display); font-weight: 900; font-size: 1.6rem; line-height: 1; color: var(--fg3); } .sc-jc__sc-n.is-win { color: var(--winner-ink); } .sc-jc__sc-sep { font-family: var(--font-display); font-weight: 900; color: var(--fg4); font-size: 1rem; margin: 0 .15rem; } .sc-jc__sc small { font-size: var(--font-2xs); color: var(--fg4); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; } /* notă departajare — apare DOAR la egalitate de criterii (suma punctelor decide) */ .sc-jc__tiebreak { margin-top: 3px; padding: 1px 6px; background: var(--warning-soft); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: var(--font-2xs); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--on-warning-soft); line-height: 1.2; } .sc-jc__tiebreak b { font-family: var(--font-mono); color: var(--fg2); } .sc-jc__tiebreak b.is-win { color: var(--winner-ink); } /* rânduri criterii — aliniate sub cap; cifra centrată, penalizările sub ea (nu o împing) */ .sc-jc__v { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: .3rem .5rem; border-top: 1px solid var(--border-hair); font-family: var(--font-mono); } .sc-jc__v b { font-size: 1.3rem; font-weight: 700; color: var(--fg2); line-height: 1; } .sc-jc__v.is-win { background: var(--winner-bg); } .sc-jc__v.is-win b { color: var(--winner-fg); } /* egalitate la criteriu (scor egal) — neutru amber, NU verde; „egal" în centru */ .sc-jc__v.is-tie { background: var(--warning-soft); } .sc-jc__v.is-tie b { color: var(--on-warning-soft); } .sc-jc__crit.is-tie { background: var(--warning-soft); } .sc-jc__eq { font-family: var(--font-sans); font-size: var(--font-2xs); font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--on-warning-soft); background: var(--warning-soft); padding: 0 .3rem; border-radius: var(--radius-sm); margin-left: .3rem; } .sc-jc__crit { display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .3rem .5rem; border-top: 1px solid var(--border-hair); text-align: center; min-width: 0; } .sc-jc__jx { display: flex; flex-direction: column; min-width: 0; } /* numele juratului = linia PRINCIPALĂ (mare, vizibilă) indiferent de sistemul de jurizare; ce jurizează (criteriu/rol) = secundar dedesubt */ .sc-jc__name { font-family: var(--font-sans); font-size: var(--font-sm); font-weight: 800; color: var(--fg1); line-height: 1.15; } .sc-jc__role { font-family: var(--font-sans); font-size: var(--font-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--fg3); line-height: 1.15; } /* min-height = rezervarea rândului de penalizări: când o latură are penalizări iar cealaltă nu, ambele randează `.sc-jc__pens` (gol unde lipsește) → înălțime egală, laturile rămân aliniate (regulă de design). */ .sc-jc__pens { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 2px; min-height: .9rem; } .sc-jc__pen { font-size: var(--font-2xs); color: var(--danger); font-weight: 800; background: var(--danger-soft); padding: 0 .25rem; border-radius: var(--radius-sm); text-transform: uppercase; white-space: nowrap; } .sc--focus .sc-jc__nm { font-size: 1.3rem; padding: .7rem 1rem; } .sc--focus .sc-jc__sc-n { font-size: 2.2rem; } .sc--focus .sc-jc__v b { font-size: 1.8rem; } .sc--focus .sc-jc__name { font-size: var(--font-md); } /* Toggle „Detaliu pe jurați" — lipit sub rezumat, deschide tabelele pe runde (Bootstrap collapse). Capul de tabel NU se redublează: numele sunt deja în rezumatul de deasupra. */ /* rând-footer al aceleiași rame (nu cutie separată): full-width, doar hairline sus */ .sc-detail-toggle { display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; margin: 0; padding: .3rem .6rem; background: transparent; border: 0; border-top: 1px solid var(--border-hair); border-radius: 0; font-family: var(--font-display); font-size: var(--font-2xs); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--fg2); cursor: pointer; transition: background .12s, color .12s, border-color .12s; } .sc-detail-toggle:hover { background: var(--paper-2); color: var(--fg1); } .sc-detail-toggle[aria-expanded="true"] { background: var(--surface-inverse); color: var(--text-on-inverse); border-color: var(--border-strong); } .sc-detail-toggle__chev { flex-shrink: 0; font-size: var(--font-sm); transition: transform .15s; } .sc-detail-toggle[aria-expanded="true"] .sc-detail-toggle__chev { transform: rotate(180deg); } .sc-detail { border-top: 1px solid var(--border-hair); } .sc--focus .sc-detail-toggle { font-size: var(--font-xs); padding: .4rem .75rem; } /* Totaluri (baza tie-break) */ .sc-totals { display: flex; align-items: center; justify-content: space-between; padding: .35rem .75rem; background: var(--paper-2); border-top: 1px solid var(--border-hair); } .sc-totals__v { font-family: var(--font-mono); font-weight: 700; font-size: var(--font-md); color: var(--fg3); } .sc-totals__v--hi { color: var(--success); } /* maxul teoretic (constant) — mic, estompat, lipit de total ca scală („18.6 / 30") */ .sc-totals__max { font-size: var(--font-2xs); color: var(--fg4); font-weight: 400; margin-left: 2px; } .sc-totals__lbl { font-size: var(--font-2xs); color: var(--fg3); text-transform: uppercase; letter-spacing: .06em; } /* ── Boxe cu totalul pe rundă lângă totalul fiecărui jurat/criteriu (panel ȘI simplu). Celula devine rând: boxe dinspre MARGINE + totalul mare spre CENTRU. ── */ /* GRID pe 2 coloane × 2 rânduri: rândul 1 = boxe-runde + total (top-aligned, deci numerele rămân pe aceeași linie pe toate rândurile); rândul 2 = penalizările pe RÂND PROPRIU, sub coloana boxelor → un rând cu 3 taguri (wipe+slip+crash) nu mai decalează celelalte rânduri. */ /* padding vertical mic → boxele stau lipite de linia de sus a celulei (încap mai multe); orizontal strâns. */ .sc-jc__v { display: grid; align-items: start; column-gap: .3rem; row-gap: 1px; padding: 0 .3rem .15rem; } .sc-jc__v--e1 { grid-template-columns: 1fr auto; } .sc-jc__v--e2 { grid-template-columns: auto 1fr; } .sc-jc__v--e1 .sc-rds { grid-column: 1; grid-row: 1; justify-content: center; } .sc-jc__v--e1 .sc-jc__tg { grid-column: 2; grid-row: 1; } .sc-jc__v--e2 .sc-jc__tg { grid-column: 1; grid-row: 1; } .sc-jc__v--e2 .sc-rds { grid-column: 2; grid-row: 1; justify-content: center; } /* Penalizările = rândul 2 pe TOATĂ lățimea (sub boxe ȘI sub punctaj) → au loc să curgă/wrap fără să se înghesuie doar sub o coloană (ex. fereastră mică, mai multe penalizări). */ .sc-jc__v--e1 .sc-jc__pens, .sc-jc__v--e2 .sc-jc__pens { grid-column: 1 / 3; grid-row: 2; } /* Coloana totalului = lățime FIXĂ → cifra (b) rămâne centrată pe aceeași coloană pe toate rândurile. Lățime suficientă pt 4 caractere (ex. 100%) ca cifrele să nu treacă de linia coloanei. */ .sc-jc__tg { display: flex; flex-direction: column; align-items: center; justify-content: center; align-self: center; gap: 1px; flex-shrink: 0; width: 3.4rem; } .sc--focus .sc-jc__tg { width: 4.5rem; } /* Boxe-runde: SUS + pe-o-parte; fără border — doar tintă subtilă de fundal (de-pătrățit). */ .sc-rds { display: flex; flex-wrap: wrap; align-items: flex-start; align-self: flex-start; gap: 2px; min-width: 0; } .sc-rds__b { display: inline-flex; align-items: center; justify-content: center; min-width: 1.2rem; height: 1.2rem; padding: 0 .15rem; flex-shrink: 0; border-radius: var(--radius-sm); background: var(--paper-2); font-family: var(--font-mono); font-size: var(--font-2xs); color: var(--fg3); line-height: 1; } .sc--focus .sc-rds__b { min-width: 1.45rem; height: 1.45rem; font-size: var(--font-sm); } /* rândurile per-jurat pt varianta simplă (skills) — același grid ca panelul */ .sc-jr { margin-top: .4rem; } /* Rezumat pe RUNDE — randat în ACELAȘI grid .sc-jc ca pe-criterii: căsuțele = notele juraților brute pe rundă (.sc-rds), totalul pe rundă = procent (.sc-jc__tg). Verde/amber moștenit din .sc-jc__v. */ /* runda de departajare — coloana din mijloc aurie ca la detalii (.sc-round--golden), să se înțeleagă specială */ .sc-jc__crit--golden { background: var(--golden-soft); } .sc-jc__crit--golden .sc-jc__name { color: var(--on-golden); } /* Progres (înainte de reveal) — bară segmentată pe toată lățimea, un segment / jurat */ .sc-prog { padding: .55rem .65rem; display: flex; flex-direction: column; gap: 6px; } .sc-prog__lbl { font-size: var(--font-2xs); color: var(--fg3); text-transform: uppercase; letter-spacing: .05em; } .sc-prog__row { display: flex; align-items: center; gap: .5rem; } .sc-prog__no { width: 2.2rem; flex-shrink: 0; font-family: var(--font-display); font-weight: 900; font-size: var(--font-sm); color: var(--fg3); } .sc-prog__seg { display: flex; gap: 4px; flex: 1; } .sc-prog__cell { flex: 1; height: 18px; border-radius: var(--radius-sm); background: var(--paper-2); border: 1px solid var(--border-hair); transition: background .15s; } .sc-prog__cell.is-on { background: var(--success); border-color: var(--success); } .sc-prog__cnt { font-family: var(--font-mono); font-size: var(--font-sm); color: var(--fg2); flex-shrink: 0; min-width: 2.4rem; text-align: right; } .sc--focus .sc-prog__cell { height: 26px; } .sc--focus .sc-prog { gap: 8px; padding: .75rem .8rem; } .sc-prog__empty { font-size: var(--font-sm); color: var(--fg3); } .sc-prog__hint { font-size: var(--font-2xs); color: var(--fg4); margin-top: .2rem; } /* Carduri battle terminate = expandabile + acordeon scorecards */ .bk-battle--expandable { cursor: pointer; } .bk-battle--expandable:hover { box-shadow: var(--shadow-hard-sm); } /* indiciu „apasă pt scorecard": chevron mic în COLȚ, absolut → fără div/spațiu extra sub card. Estompat, se aprinde la hover/expand. */ .bk-battle__more { position: absolute; bottom: 0; left: 1px; /* colț exterior (numele se aliniază spre centru) */ color: var(--fg4); font-size: .56rem; line-height: 1; opacity: .45; pointer-events: none; transition: opacity .12s, color .12s; } .bk-battle__more i { transition: transform .12s; } .bk-battle--expandable:hover .bk-battle__more { opacity: 1; color: var(--text); } .bk-battle--expandable[aria-expanded="true"] .bk-battle__more { opacity: 1; color: var(--text); } .bk-battle--expandable[aria-expanded="true"] .bk-battle__more i { transform: rotate(180deg); } /* Slot principal scorecard (în panoul din dreapta): un singur scorecard vizibil odată — battle-ul curent implicit, sau cel pe care s-a dat click în bracket. Restul rămân collapse (ascunse). */ .bk-sc-hint { font-size: var(--font-2xs); color: var(--fg3); margin: .1rem .1rem .4rem; } .bk-sc-slot { display: flex; flex-direction: column; } .bk-sc-slot__item .sc { margin-bottom: 0; } /* Strip progres bracket (battle-uri terminate / total) */ .bk-progress { display: flex; align-items: center; gap: .6rem; margin: .25rem 0 .6rem; font-size: var(--font-xs); color: var(--fg3); } .bk-progress__lbl { font-weight: 700; white-space: nowrap; } .bk-progress__bar { flex: 1; max-width: 340px; height: 6px; background: var(--paper-2); border: 1px solid var(--border-hair); border-radius: 999px; overflow: hidden; } .bk-progress__fill { display: block; height: 100%; background: var(--success); } /* Finala = accent (centrul convergenței) */ .bk-col--final .bk-battle { box-shadow: var(--shadow-hard-sm); } .bk-col--final .bk-col-label { color: var(--primary-strong); border-bottom-color: var(--primary); } /* Backward compat */ /* === 9. FORMS ============================================== */ .form-label-xs { font-family: var(--font-display); font-size: var(--font-xs); font-weight: 900; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg3); margin-bottom: 2px; display: block; } .form-control-xs { height: 26px; font-size: var(--font-sm); padding: 0.15rem 0.4rem; } .form-select-xs { height: 26px; font-size: var(--font-sm); padding: 0.1rem 1.5rem 0.1rem 0.4rem; } .form-row-compact { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.65rem 0.55rem; } .judge-inline-row, .staff-inline-row { display: flex; gap: 0.4rem 0.5rem; align-items: flex-end; flex-wrap: wrap; } /* === TOP-ALIGNED label — SSOT label câmpuri creare/editare concurs ========================== Cercetare UX: label deasupra inputului = cel mai scanabil pt formulare dense (vezi plan/Surse). Markup: control ÎNTÂI,