/* Zabivaka webfonts — sourced from Google Fonts. Barlow Condensed = athletic/scoreboard display. Barlow = humanist body & UI. Spline Sans Mono = tabular figures for scores & points. NOTE: Original Rails app shipped stock Bootstrap + Font Awesome with no brand font. These are NEW choices for the redesign — see README VISUAL FOUNDATIONS. If you'd prefer self-hosted binaries, send the .woff2 files. */ @import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Barlow+Condensed:wght@500;600;700;800&family=Spline+Sans+Mono:wght@500;600;700&display=swap'); /* ========================================================================== ZABIVAKA · COLORS Anchored to the brand "GOAL!" image: pitch green, white net, black/white ball, bright goal-gold accent. Base ramps first, semantic aliases below. ========================================================================== */ :root { /* --- Pitch green (primary brand) ------------------------------------ */ --green-50: #E9F7EE; --green-100: #CDEED9; --green-200: #9FDDB6; --green-300: #66C68A; --green-400: #2FAA62; --green-500: #138A3F; /* brand primary */ --green-600: #0E7333; --green-700: #0A5A28; --green-800: #084821; --green-900: #06371A; --green-950: #042512; /* --- Goal gold (accent) --------------------------------------------- */ --gold-200: #FFEFB0; --gold-300: #FFE285; --gold-400: #FFD43B; --gold-500: #FFC400; /* accent primary */ --gold-600: #E0A500; --gold-700: #B17F00; /* --- Coral (live / hot / destructive) ------------------------------- */ --coral-300: #FFB3A6; --coral-400: #FF6B57; --coral-500: #F4442E; --coral-600: #D62F1C; --coral-700: #A82213; /* --- Ink / neutral ramp (subtle green undertone) -------------------- */ --ink-950: #0B0F0D; --ink-900: #121815; --ink-800: #1E2723; --ink-700: #33403A; --ink-600: #4C5A53; --ink-500: #6B7872; --ink-400: #94A099; --ink-300: #BDC6C1; --ink-200: #DCE2DE; --ink-100: #EDF1EE; --ink-50: #F6F8F6; --white: #FFFFFF; /* --- Score / points reward scale ------------------------------------ */ --score-exact: #138A3F; /* 3 pts — exact score */ --score-diff: #1E88A8; /* 2 pts — correct goal diff */ --score-outcome: #E0A500; /* 1 pt — correct outcome */ --score-miss: #94A099; /* 0 pts — missed */ /* --- Status --------------------------------------------------------- */ --positive: #138A3F; --warning: #E0A500; --danger: #F4442E; --info: #1E88A8; /* ==================================================================== SEMANTIC ALIASES · LIGHT (default) ==================================================================== */ --bg-page: var(--ink-50); --bg-surface: var(--white); --bg-surface-2: var(--ink-100); /* zebra rows, insets */ --bg-inset: var(--ink-100); --bg-hover: var(--ink-100); --text-strong: var(--ink-900); --text-body: var(--ink-800); --text-muted: var(--ink-500); --text-faint: var(--ink-400); --text-on-brand: var(--white); --text-on-accent: var(--ink-950); --border: var(--ink-200); --border-strong: var(--ink-300); --brand: var(--green-500); --brand-hover: var(--green-600); --brand-press: var(--green-700); --brand-tint: var(--green-50); --brand-tint-2: var(--green-100); --accent: var(--gold-500); --accent-hover: var(--gold-600); --accent-tint: var(--gold-200); --link: var(--green-600); --link-hover: var(--green-700); /* Signature dark navigation bar (kept from original, re-branded) */ --nav-bg: var(--ink-950); --nav-fg: var(--white); --nav-fg-muted: #9AA8A1; --focus-ring: color-mix(in srgb, var(--green-500) 45%, transparent); } /* ====================================================================== SEMANTIC ALIASES · DARK ("stadium night") Toggle with or class .theme-dark ====================================================================== */ :root[data-theme="dark"], .theme-dark { --bg-page: #0A0E0C; --bg-surface: #121815; --bg-surface-2: #1A221E; --bg-inset: #1A221E; --bg-hover: #1E2723; --text-strong: #F4F7F5; --text-body: #DCE2DE; --text-muted: #94A099; --text-faint: #6B7872; --text-on-brand: var(--white); --text-on-accent: var(--ink-950); --border: #283330; --border-strong: #364541; --brand: var(--green-400); --brand-hover: var(--green-300); --brand-press: var(--green-300); --brand-tint: #0E2419; --brand-tint-2: #11321F; --accent: var(--gold-500); --accent-hover: var(--gold-400); --accent-tint: #2E2606; --link: var(--green-300); --link-hover: var(--green-200); --nav-bg: #060908; --nav-fg: var(--white); --nav-fg-muted: #7E8C85; --focus-ring: color-mix(in srgb, var(--green-400) 55%, transparent); } /* ========================================================================== ZABIVAKA · TYPOGRAPHY Display = Barlow Condensed (athletic, scoreboard). Body/UI = Barlow (humanist, friendly, modern). Numeric = Spline Sans Mono (tabular scores & points). ========================================================================== */ :root { /* --- Families ------------------------------------------------------- */ --font-display: 'Barlow Condensed', 'Oswald', 'Arial Narrow', sans-serif; --font-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'Spline Sans Mono', ui-monospace, 'SFMono-Regular', monospace; /* --- Weights -------------------------------------------------------- */ --fw-regular: 400; /* @kind font */ --fw-medium: 500; /* @kind font */ --fw-semibold: 600; /* @kind font */ --fw-bold: 700; /* @kind font */ --fw-black: 800; /* @kind font */ /* --- Type scale (px) ------------------------------------------------ */ --text-xs: 12px; --text-sm: 14px; --text-base: 16px; --text-md: 18px; --text-lg: 20px; --text-xl: 24px; --text-2xl: 30px; --text-3xl: 38px; --text-4xl: 52px; --text-5xl: 72px; /* scoreboard hero */ --text-6xl: 96px; /* --- Line heights --------------------------------------------------- */ --leading-none: 1; --leading-tight: 1.08; --leading-snug: 1.25; --leading-normal: 1.5; --leading-relaxed: 1.65; /* --- Letter spacing ------------------------------------------------- */ --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-caps: 0.08em; /* uppercase condensed labels */ --tracking-mega: 0.12em; } /* ====================================================================== TYPE ROLE UTILITIES — opt-in classes for specimens & components ====================================================================== */ .zv-display { font-family: var(--font-display); font-weight: var(--fw-black); line-height: var(--leading-none); letter-spacing: var(--tracking-tight); text-transform: uppercase; } .zv-eyebrow { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-sm); line-height: var(--leading-none); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); } .zv-score { font-family: var(--font-mono); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-tight); } .zv-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* ========================================================================== ZABIVAKA · SPACING, RADII, SHADOWS, BORDERS, MOTION 4px base grid. ========================================================================== */ :root { /* --- Spacing scale (4px base) -------------------------------------- */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-7: 32px; --space-8: 40px; --space-9: 48px; --space-10: 64px; --space-11: 80px; --space-12: 96px; /* --- Layout --------------------------------------------------------- */ --container: 1180px; --container-wide: 1360px; --gutter: var(--space-6); --nav-height: 64px; /* --- Radii ---------------------------------------------------------- */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-card: 16px; --radius-pill: 999px; /* --- Border --------------------------------------------------------- */ --border-width: 1px; --border-thick: 2px; /* --- Shadows (soft, low, green-tinted ambient) --------------------- */ --shadow-xs: 0 1px 2px rgba(6, 55, 26, 0.06); --shadow-sm: 0 1px 3px rgba(6, 55, 26, 0.08), 0 1px 2px rgba(6, 55, 26, 0.06); --shadow-md: 0 4px 12px rgba(6, 55, 26, 0.08), 0 2px 4px rgba(6, 55, 26, 0.05); --shadow-lg: 0 12px 28px rgba(6, 55, 26, 0.12), 0 4px 8px rgba(6, 55, 26, 0.06); --shadow-xl: 0 24px 56px rgba(6, 55, 26, 0.18); --shadow-focus: 0 0 0 3px var(--focus-ring); /* --- Motion --------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */ --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */ --dur-fast: 120ms; /* @kind other */ --dur-base: 200ms; /* @kind other */ --dur-slow: 320ms; /* @kind other */ } /* ========================================================================== ZABIVAKA · BASE — sensible element defaults built on the tokens. ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--text-body); background: var(--bg-page); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--text-strong); font-family: var(--font-display); font-weight: var(--fw-black); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); text-transform: uppercase; } h1 { font-size: var(--text-4xl); } h2 { font-size: var(--text-3xl); } h3 { font-size: var(--text-2xl); } h4 { font-size: var(--text-xl); } p { margin: 0 0 var(--space-4); } a { color: var(--link); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); } a:hover { color: var(--link-hover); } small { font-size: var(--text-sm); } code, kbd, samp { font-family: var(--font-mono); } ::selection { background: var(--gold-300); color: var(--ink-950); } :focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); } hr { border: none; border-top: var(--border-width) solid var(--border); margin: var(--space-6) 0; } img { max-width: 100%; display: block; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* ========================================================================== ZABIVAKA UI KIT · mobile-first. Self-contained styles on the design tokens. A phone web app: sticky top bar, scrolling content, fixed bottom tab bar. ========================================================================== */ /* ---- App frame (responsive: mobile app <-> desktop web app) ---- */ .app { height: 100vh; display: flex; flex-direction: column; min-height: 0; position: relative; background: var(--bg-page); overflow: hidden; } /* ---- Top bar ---- */ .topbar { height: 56px; flex: none; background: var(--nav-bg); display: flex; align-items: center; justify-content: space-between; padding: 0 18px; } .brand { display: inline-flex; align-items: center; gap: 9px; } .brand__mark { width: 30px; height: 30px; border-radius: 9px; background: var(--brand); display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.16); } .brand__mark svg { width: 21px; height: 21px; display: block; } .brand__name { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 21px; color: #fff; letter-spacing: -.01em; } .brand__name span { color: var(--accent); } .topbar__links { display: none; align-items: center; gap: 26px; } .topbar__link { font-family: var(--font-body); font-weight: 500; font-size: 15px; color: var(--nav-fg-muted); cursor: pointer; position: relative; padding: 21px 0; white-space: nowrap; transition: color var(--dur-fast) var(--ease-out); } .topbar__link:hover { color: #fff; } .topbar__link.is-active { color: #fff; } .topbar__link.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent); border-radius: 3px 3px 0 0; } .iconbtn { width: 38px; height: 38px; border-radius: var(--radius-md); border: none; background: transparent; color: var(--nav-fg-muted); display: grid; place-items: center; cursor: pointer; transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .iconbtn:hover { color: #fff; background: rgba(255,255,255,.08); } .iconbtn svg { width: 21px; height: 21px; } /* ---- Scroll region ---- */ .scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; } .scroll::-webkit-scrollbar { width: 0; } .wrap { padding: 20px 16px 28px; } .card-grid { display: grid; grid-template-columns: 1fr; gap: 12px; } .card-grid > .gcard, .card-grid > .ucard { margin-bottom: 0; } /* ---- Screen header ---- */ .screen-head { margin-bottom: 18px; } .eyebrow { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .1em; font-size: 12px; font-weight: 600; color: var(--brand); } .screen-title { font-size: 30px; line-height: 1; margin-top: 4px; white-space: nowrap; } .head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } /* ---- Bottom tab bar (mobile only) ---- */ .tabs { flex: none; height: 72px; background: color-mix(in srgb, var(--bg-surface) 92%, transparent); backdrop-filter: blur(14px); border-top: var(--border-width) solid var(--border); display: flex; padding: 8px 6px; } .tab { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; border: none; background: none; cursor: pointer; color: var(--text-faint); transition: color var(--dur-fast) var(--ease-out); } .tab svg { width: 23px; height: 23px; } .tab span { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; font-size: 10px; } .tab.is-active { color: var(--brand); } /* ---- Buttons ---- */ .btn { --_bg: var(--brand); --_fg: var(--text-on-brand); --_bd: transparent; --_bgh: var(--brand-hover); --_bgp: var(--brand-press); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em; font-weight: 700; font-size: var(--text-base); height: 44px; padding: 0 var(--space-5); border-radius: var(--radius-md); background: var(--_bg); color: var(--_fg); border: var(--border-width) solid var(--_bd); cursor: pointer; white-space: nowrap; box-shadow: var(--shadow-xs); transition: background var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .btn:hover { background: var(--_bgh); } .btn:active { transform: translateY(1px) scale(.985); background: var(--_bgp); box-shadow: none; } .btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; } .btn--accent { --_bg: var(--accent); --_fg: var(--text-on-accent); --_bgh: var(--accent-hover); --_bgp: var(--gold-600); } .btn--secondary { --_bg: var(--bg-surface); --_fg: var(--text-strong); --_bd: var(--border-strong); --_bgh: var(--bg-hover); --_bgp: var(--ink-200); } .btn--ghost { --_bg: transparent; --_fg: var(--text-body); --_bgh: var(--bg-hover); --_bgp: var(--ink-200); box-shadow: none; } .btn--danger { --_bg: transparent; --_fg: var(--danger); --_bd: var(--coral-300); --_bgh: var(--coral-300); --_bgp: var(--coral-400); box-shadow: none; } .btn--sm { height: 34px; font-size: var(--text-sm); padding: 0 var(--space-4); border-radius: var(--radius-sm); } .btn--lg { height: 52px; font-size: var(--text-lg); padding: 0 var(--space-6); } .btn--block { display: flex; width: 100%; } .btn svg { width: 18px; height: 18px; } /* ---- Badges / stage / points / score ---- */ .badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; font-size: 11px; padding: 4px 9px; border-radius: var(--radius-pill); background: var(--bg-inset); color: var(--text-body); } .badge--soft { background: var(--brand-tint-2); color: var(--brand-press); } .badge--accent { background: var(--accent-tint); color: var(--gold-700); } .badge--solid { background: var(--ink-900); color: #fff; } .badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } .stage { display: inline-flex; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; font-size: 11px; padding: 3px 9px; border-radius: var(--radius-pill); } .stage--groups { background: var(--brand-tint-2); color: var(--brand-press); } .stage--playoff { background: var(--accent-tint); color: var(--gold-700); } .stage--final { background: var(--ink-900); color: #fff; } .pts { display: inline-grid; place-items: center; font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; border-radius: var(--radius-pill); width: 28px; height: 28px; font-size: 14px; } .pts--3 { background: var(--score-exact); } .pts--2 { background: var(--score-diff); } .pts--1 { background: var(--score-outcome); } .pts--0 { background: var(--score-miss); } .pts--ghost { background: transparent; color: var(--text-faint); box-shadow: inset 0 0 0 2px var(--border); } .pts-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); text-transform: uppercase; font-weight: 700; font-size: 12px; letter-spacing: .04em; color: var(--text-muted); } .chip { display: inline-flex; align-items: center; gap: 7px; background: var(--ink-950); border-radius: var(--radius-md); padding: 5px 12px; } .chip__s { font-family: var(--font-mono); font-weight: 700; font-variant-numeric: tabular-nums; color: #fff; font-size: 18px; line-height: 1; } .chip__x { color: var(--accent); font-weight: 700; } .chip--lg { padding: 8px 16px; } .chip--lg .chip__s { font-size: 26px; } .chip--soft { background: var(--bg-inset); } .chip--soft .chip__s { color: var(--text-strong); } .chip--soft .chip__x { color: var(--text-faint); } .chip--ghost { background: transparent; box-shadow: inset 0 0 0 1.5px var(--border); } .chip--ghost .chip__s, .chip--ghost .chip__x { color: var(--text-faint); } /* ---- Flags ---- */ .flag { display: inline-block; border-radius: 50%; flex: none; background-size: cover; background-position: center; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); width: 24px; height: 24px; } .flag.fi { border-radius: 50%; } /* ---- Match / game card ---- */ .gcard { background: var(--bg-surface); border: var(--border-width) solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-xs); padding: 14px; margin-bottom: 12px; } .gcard__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; } .gcard__meta { display: flex; align-items: center; gap: 8px; } .gcard__date { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); } .gcard__match { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; } .gcard__team { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; min-width: 0; } .gcard__team .nm { font-weight: 600; font-size: 14px; color: var(--text-strong); line-height: 1.15; } .gcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: var(--border-width) solid var(--border); } .gcard__foot .lbl { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; font-size: 11px; color: var(--text-faint); } .gcard__result { display: flex; align-items: center; gap: 9px; } /* ---- Chart / leaderboard ---- */ .panel { background: var(--bg-surface); border: var(--border-width) solid var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-xs); overflow: hidden; } .lb-row { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: var(--border-width) solid var(--border); } .lb-row:last-child { border-bottom: none; } .lb-row--leader { background: linear-gradient(90deg, var(--accent-tint), transparent); } .lb-rank { font-family: var(--font-display); font-weight: 800; font-size: 20px; color: var(--text-strong); text-align: center; } .lb-name { font-weight: 600; color: var(--text-strong); display: flex; align-items: center; gap: 8px; } .lb-login { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); } .lb-pts { display: flex; align-items: center; gap: 10px; } .lb-bar { width: 64px; height: 7px; border-radius: 999px; background: var(--bg-inset); overflow: hidden; } .lb-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--brand); } .lb-row--leader .lb-bar > i { background: var(--accent); } .lb-num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 18px; color: var(--text-strong); min-width: 24px; text-align: right; } /* ---- Admin user card ---- */ .ucard { display: flex; align-items: center; gap: 12px; background: var(--bg-surface); border: var(--border-width) solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); padding: 12px 14px; margin-bottom: 10px; } .uavatar { width: 40px; height: 40px; border-radius: var(--radius-pill); background: var(--brand-tint-2); color: var(--brand-press); display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 17px; flex: none; } .uinfo { flex: 1; min-width: 0; } .uinfo .nm { font-weight: 600; color: var(--text-strong); } .uinfo .lg { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); } .uperm { display: flex; gap: 5px; margin-top: 5px; flex-wrap: wrap; } .perm { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; font-size: 10px; padding: 2px 7px; border-radius: var(--radius-pill); background: var(--bg-inset); color: var(--text-faint); } .perm.on { background: var(--brand-tint-2); color: var(--brand-press); } /* ---- Segmented control ---- */ .segmented { display: flex; gap: 4px; background: var(--bg-inset); padding: 4px; border-radius: var(--radius-md); margin-bottom: 16px; } .segmented button { flex: 1; border: none; background: transparent; cursor: pointer; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .03em; font-weight: 600; font-size: 13px; color: var(--text-muted); padding: 8px 6px; border-radius: var(--radius-sm); transition: all var(--dur-fast) var(--ease-out); } .segmented button.is-active { background: var(--bg-surface); color: var(--brand-press); box-shadow: var(--shadow-xs); } /* ---- Alert ---- */ .alert { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--radius-md); border: var(--border-width) solid transparent; margin-bottom: 16px; font-size: 14px; } .alert svg { width: 19px; height: 19px; flex: none; margin-top: 1px; } .alert__body { flex: 1; } .alert__close { background: none; border: none; cursor: pointer; color: inherit; opacity: .55; font-size: 19px; line-height: 1; width: 22px; height: 22px; } .alert--success { background: var(--brand-tint); border-color: var(--brand-tint-2); color: var(--brand-press); } .alert--info { background: color-mix(in srgb, var(--info) 12%, var(--bg-surface)); border-color: color-mix(in srgb, var(--info) 28%, transparent); color: var(--info); } /* ---- Forms ---- */ .field { display: flex; flex-direction: column; gap: 7px; } .field__label { font-weight: 600; font-size: 14px; color: var(--text-strong); } .input, .select { font-family: var(--font-body); font-size: 16px; color: var(--text-strong); background: var(--bg-surface); border: var(--border-width) solid var(--border-strong); border-radius: var(--radius-md); height: 48px; padding: 0 14px; width: 100%; transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .input:focus, .select:focus { outline: none; border-color: var(--brand); box-shadow: var(--shadow-focus); } .select { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; } .select-wrap { position: relative; } .select-wrap::after { content: ""; position: absolute; right: 16px; top: 50%; width: 9px; height: 9px; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: translateY(-65%) rotate(45deg); pointer-events: none; } .check { display: inline-flex; align-items: center; gap: 11px; cursor: pointer; user-select: none; color: var(--text-body); } .check input { position: absolute; opacity: 0; width: 0; height: 0; } .check__box { width: 24px; height: 24px; flex: none; border-radius: var(--radius-sm); border: 2px solid var(--border-strong); background: var(--bg-surface); display: grid; place-items: center; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .check__box svg { width: 15px; height: 15px; stroke: #fff; stroke-width: 3.5; fill: none; opacity: 0; transform: scale(.6); transition: all var(--dur-fast) var(--ease-bounce); } .check input:checked + .check__box { background: var(--brand); border-color: var(--brand); } .check input:checked + .check__box svg { opacity: 1; transform: scale(1); } /* ---- Score stepper ---- */ .stepper { display: inline-flex; align-items: stretch; border: 2px solid var(--border-strong); border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-surface); } .stepper__btn { width: 46px; border: none; background: var(--bg-surface); color: var(--text-strong); font-size: 24px; font-weight: 700; cursor: pointer; display: grid; place-items: center; transition: background var(--dur-fast) var(--ease-out); } .stepper__btn:hover { background: var(--brand-tint); color: var(--brand-press); } .stepper__btn:disabled { color: var(--text-faint); cursor: not-allowed; background: var(--bg-surface); } .stepper__val { min-width: 58px; display: grid; place-items: center; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 32px; color: var(--text-strong); border-left: 2px solid var(--border); border-right: 2px solid var(--border); } /* ---- Login ---- */ .login { position: absolute; inset: 0; display: flex; flex-direction: column; } .login__hero { position: relative; flex: 1; overflow: hidden; } .login__hero img { width: 100%; height: 100%; object-fit: cover; } .login__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,37,18,.35) 0%, rgba(4,37,18,.15) 35%, rgba(4,37,18,.92) 100%); } .login__top { position: absolute; top: 22px; left: 22px; } .login__hero-copy { position: absolute; left: 22px; right: 22px; bottom: 26px; } .login__hero-copy .eyebrow { color: var(--gold-400); } .login__hero-copy h1 { color: #fff; font-size: 44px; line-height: .95; margin-top: 6px; } .login__sheet { flex: none; background: var(--bg-surface); border-radius: 26px 26px 0 0; margin-top: -22px; padding: 24px 22px 30px; box-shadow: 0 -12px 30px rgba(6,55,26,.12); position: relative; z-index: 2; } .login__form { display: flex; flex-direction: column; gap: 16px; } /* ---- Vote bottom sheet ---- */ .sheet-scrim { position: absolute; inset: 0; background: rgba(6,37,18,.5); backdrop-filter: blur(2px); z-index: 40; display: flex; align-items: flex-end; animation: zvScrim var(--dur-base) var(--ease-out) both; } .sheet { width: 100%; background: var(--bg-surface); border-radius: 26px 26px 0 0; padding: 8px 20px 26px; box-shadow: 0 -16px 40px rgba(6,37,18,.25); animation: zvUp var(--dur-slow) var(--ease-out) both; max-height: 92%; overflow-y: auto; } .sheet__grip { width: 40px; height: 5px; border-radius: 999px; background: var(--border-strong); margin: 8px auto 14px; } .sheet__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 18px; } .vote-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .vote-team { display: flex; flex-direction: column; align-items: center; gap: 12px; background: var(--bg-page); border-radius: var(--radius-lg); padding: 16px; } .vote-team__name { font-family: var(--font-display); text-transform: uppercase; font-weight: 700; font-size: 16px; color: var(--text-strong); letter-spacing: .02em; text-align: center; } /* ---- Animations ---- */ .fade-in { animation: zvFade var(--dur-slow) var(--ease-out) both; } @keyframes zvFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes zvScrim { from { opacity: 0; } to { opacity: 1; } } @keyframes zvUp { from { transform: translateY(100%); } to { transform: none; } } /* ---- Desktop / tablet: become a real web app ---- */ @media (min-width: 760px) { .topbar { height: 64px; padding: 0 32px; gap: 32px; } .brand__name { font-size: 23px; } .topbar__links { display: flex; flex: 1; } .tabs { display: none; } .wrap { max-width: 1120px; width: 100%; margin: 0 auto; padding: 40px 32px 64px; } .screen-title { font-size: 42px; } .card-grid { grid-template-columns: 1fr 1fr; gap: 16px; } .lb-wrap, .table-wrap { max-width: 760px; } /* Login -> split screen */ .login { flex-direction: row; } .login__hero { flex: 1.15; } .login__hero-copy { left: 48px; right: 48px; bottom: 56px; } .login__hero-copy h1 { font-size: 64px; } .login__top { top: 36px; left: 48px; } .login__sheet { flex: 0 0 460px; margin-top: 0; border-radius: 0; display: grid; align-content: center; padding: 48px 60px; box-shadow: -8px 0 30px rgba(6,55,26,.06); } .login__form { width: 100%; max-width: 360px; } /* Vote -> centered modal */ .sheet-scrim { align-items: center; justify-content: center; padding: 24px; } .sheet { max-width: 560px; border-radius: 22px; padding: 24px 28px 30px; box-shadow: var(--shadow-xl); animation: zvFade var(--dur-base) var(--ease-out) both; max-height: 88%; } .sheet__grip { display: none; } } /* ========================================================================== ZABIVAKA · web-app server-side layer on the responsive UI kit. The kit's .app/.topbar/.scroll/.wrap/.tabs/.card-grid/.lb-wrap are already responsive (mobile app <-> desktop web app); this only adds the bits a server-rendered Rails app needs (link variants, helpers, error alert). ========================================================================== */ html, body { height: 100%; } body { overflow: hidden; } /* the .scroll region scrolls, not the page */ .app { height: 100dvh; } /* dvh where supported; kit sets 100vh fallback */ a.topbar__link, a.tab { text-decoration: none; } /* EN/RU locale switcher (top bar, right side, next to log out) */ .topbar__right { display: flex; align-items: center; gap: 8px; } .locale-switch { display: flex; align-items: center; gap: 2px; } a.locale-switch__opt { font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: .04em; text-decoration: none; color: var(--nav-fg-muted); padding: 5px 7px; border-radius: var(--radius-sm); line-height: 1; transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } a.locale-switch__opt:hover { color: #fff; } a.locale-switch__opt.is-active { color: var(--nav-bg); background: var(--accent); } /* segmented control rendered as links */ .segmented a { flex: 1; text-align: center; text-decoration: none; border: none; background: transparent; cursor: pointer; font-family: var(--font-display); text-transform: uppercase; letter-spacing: .03em; font-weight: 600; font-size: 13px; color: var(--text-muted); padding: 8px 6px; border-radius: var(--radius-sm); transition: all var(--dur-fast) var(--ease-out); } .segmented a.is-active { background: var(--bg-surface); color: var(--brand-press); box-shadow: var(--shadow-xs); } /* error alert variant */ .alert--danger { background: color-mix(in srgb, var(--danger) 10%, var(--bg-surface)); border-color: color-mix(in srgb, var(--danger) 32%, transparent); color: var(--coral-600); } /* admin: inline delete (button_to) + iconbtn hover on light cards */ .btn-to { display: contents; } .ucard .iconbtn:hover, .gcard .iconbtn:hover { color: var(--brand-press); background: var(--bg-hover); } /* server-rendered helpers */ .muted { color: var(--text-muted); } .center { text-align: center; } .stats-row { display: flex; gap: 10px; margin-bottom: 18px; } .stat-card { flex: 1; text-align: center; padding: 12px; margin: 0; } .stat-card .num { font-family: var(--font-mono); font-weight: 700; font-size: 26px; } .empty { text-align: center; color: var(--text-muted); padding: 40px 16px; } .field + .field { margin-top: 14px; } .form-actions { margin-top: 20px; display: flex; gap: 10px; } .stack > * + * { margin-top: 12px; } /* forms + leaderboard get a comfortable max width on desktop */ .form-wrap, .lb-wrap, .table-wrap { width: 100%; } @media (min-width: 760px) { .form-wrap { max-width: 560px; } } /* anchor cards (games index links) sit cleanly in the card grid */ a.gcard { color: inherit; text-decoration: none; display: block; } .card-grid > a.gcard { margin-bottom: 0; } /* Login (auth layout): scrollable, and the hero keeps a min height so the brand and headline never overlap — e.g. when a flash makes the form sheet taller. */ .app--auth { display: block; height: auto; min-height: 100dvh; overflow-y: auto; } .app--auth .login { position: relative; inset: auto; min-height: 100dvh; } .login__hero { min-height: 320px; } /* Hero image fills the (flex-grown) hero box regardless of its computed height. */ .login__hero img { position: absolute; inset: 0; } /* Mobile: scroll the page naturally and pin the bottom tab bar with a fixed position + iOS safe-area padding, so it sits flush at the bottom. (The 100dvh app-frame left a grey strip under the tabs on iOS Safari.) */ @media (max-width: 759px) { html, body { height: auto; overflow: visible; } .app { height: auto; min-height: 100dvh; overflow: visible; } .topbar { position: sticky; top: 0; z-index: 40; } .scroll { overflow: visible; padding-bottom: calc(88px + env(safe-area-inset-bottom)); } .tabs { position: fixed; left: 0; right: 0; bottom: 0; height: auto; z-index: 50; padding-top: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); } }