/* ============================================================ SÜD — Echte Liebe · design system Calm editorial layout (Anthropic-ish) in BVB pastel palette. Light / dark via [data-theme] on . ============================================================ */ /* ---------- Tokens ---------- */ :root { --maxw: 1140px; --gutter: clamp(20px, 5vw, 56px); --radius: 16px; --radius-sm: 10px; --radius-lg: 24px; --font-sans: "Golos Text", system-ui, -apple-system, sans-serif; /* акцентный/дисплейный — Oswald (гротеск, с кириллицей, спортивный) */ --font-display: "Oswald", "Golos Text", sans-serif; --ease: cubic-bezier(.22, .61, .36, 1); --tap: 44px; } html[data-theme="light"] { --bg: #F6F5EF; --bg-soft: #EEEDE4; --surface: #FFFFFF; --surface-2: #FBFAF5; --surface-3: #F2F1EA; --border: #E6E4D8; --border-strong: #D7D4C5; --fav-bg: #68665D; --fav-ink: #F4F1E4; --ink: #211F18; --ink-soft: #4A4840; --muted: #716F63; --faint: #9C998B; --accent: #FFDD00; /* BVB yellow — strong */ --accent-deep: #E6C400; --accent-soft: #F7EDB4; /* pastel butter fill */ --accent-tint: #FCF6D8; /* faint highlight row */ --accent-ink: #1C1B14; --black-badge: #1A1A18; --zone-ucl: #8FB4EC; --zone-uel: #EDC07E; --zone-uecl: #93CF96; --zone-playoff: #B9B6A8; --zone-releg: #E89D93; --pos-up: #5d9069; --pos-down: #cd6b5f; --shadow-sm: 0 1px 2px rgba(28,26,16,.05); --shadow: 0 1px 2px rgba(28,26,16,.04), 0 10px 34px rgba(28,26,16,.06); --shadow-lg: 0 2px 6px rgba(28,26,16,.05), 0 24px 60px rgba(28,26,16,.10); --scrim: rgba(255,255,255,.72); } html[data-theme="dark"] { --bg: #131209; --bg-soft: #18170E; --surface: #1D1B12; --surface-2: #232117; --surface-3: #2A2719; --border: #322F20; --border-strong: #423E2B; --fav-bg: #C9C6B8; --fav-ink: #211F18; --ink: #F3F0E2; --ink-soft: #CFCBB8; --muted: #A6A28E; --faint: #726F5C; --accent: #FFE000; --accent-deep: #FFE94D; --accent-soft: #3B3410; --accent-tint: #29250D; --accent-ink: #18160A; --black-badge: #0E0E0A; --zone-ucl: #5E7FB8; --zone-uel: #B68B49; --zone-uecl: #5b9460; --zone-playoff: #6c6957; --zone-releg: #b06a60; --pos-up: #77b485; --pos-down: #d98a7e; --shadow-sm: 0 1px 2px rgba(0,0,0,.4); --shadow: 0 1px 2px rgba(0,0,0,.4), 0 12px 36px rgba(0,0,0,.45); --shadow-lg: 0 2px 8px rgba(0,0,0,.5), 0 28px 64px rgba(0,0,0,.6); --scrim: rgba(20,19,9,.72); } /* ---------- Reset ---------- */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-sans); font-size: 16px; line-height: 1.55; font-feature-settings: "cv05", "ss01"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background .4s var(--ease), color .4s var(--ease); } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.14; letter-spacing: -.01em; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); } .tnum { font-variant-numeric: tabular-nums; } /* section rhythm */ section { padding: clamp(40px, 5vw, 62px) 0; } #tables { padding-bottom: clamp(22px, 3vw, 34px); } #reports, #sources, #interview, #feed { padding-top: clamp(12px, 2vw, 22px); padding-bottom: clamp(22px, 3vw, 34px); } .sec-head { margin-bottom: clamp(28px, 4vw, 48px); } .eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 9px; } .eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--accent); border-radius: 2px; } .sec-title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(26px, 4vw, 40px); letter-spacing: 0; margin-top: 14px; line-height: 1.12; } .sec-sub { color: var(--muted); max-width: 56ch; margin-top: 12px; font-size: 16.5px; } /* ---------- Header ---------- */ .hdr { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid transparent; transition: border-color .3s var(--ease), background .4s var(--ease); } .hdr.scrolled { border-bottom-color: var(--border); } .hdr-in { display: flex; align-items: center; gap: 20px; height: 68px; } .brand { display: flex; align-items: center; gap: 12px; } .brand-badge { width: 40px; height: 40px; border-radius: 11px; overflow: hidden; flex: none; background: var(--black-badge); box-shadow: var(--shadow-sm); border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); } .brand-badge img { width: 100%; height: 100%; object-fit: cover; } .brand-txt { display: flex; flex-direction: column; line-height: 1; } .brand-name { font-weight: 800; font-size: 18px; letter-spacing: .02em; } .brand-tag { font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent-deep); font-weight: 700; margin-top: 3px; } html[data-theme="dark"] .brand-tag { color: var(--accent); } .nav { display: flex; gap: 2px; margin-left: 14px; } .nav a { padding: 8px 10px; border-radius: 9px; font-weight: 600; font-size: 14px; white-space: nowrap; color: var(--ink-soft); transition: background .2s var(--ease), color .2s var(--ease); } .nav a:hover { background: var(--surface-3); color: var(--ink); } .hdr .nav-toggle { display: none; } .nav-toggle .ico-close { display: none; } .hdr.nav-open .nav-toggle .ico-menu { display: none; } .hdr.nav-open .nav-toggle .ico-close { display: block; } .hdr-right { margin-left: auto; display: flex; align-items: center; gap: 8px; } .icon-btn { width: 40px; height: 40px; border-radius: 11px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); display: grid; place-items: center; transition: transform .2s var(--ease), background .2s, border-color .2s; } .icon-btn:hover { background: var(--surface-3); transform: translateY(-1px); } .icon-btn svg { width: 19px; height: 19px; } .theme-toggle .moon { display: none; } html[data-theme="dark"] .theme-toggle .sun { display: none; } html[data-theme="dark"] .theme-toggle .moon { display: block; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 40px; padding: 0 18px; border-radius: 11px; font-weight: 700; font-size: 14.5px; border: 1px solid transparent; white-space: nowrap; transition: transform .2s var(--ease), box-shadow .2s, background .2s, border-color .2s; } .btn svg { width: 17px; height: 17px; } .btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-sm); } .btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow); background: var(--accent-deep); } .btn-ghost { background: var(--surface); border-color: var(--border); color: var(--ink); } .btn-ghost:hover { background: var(--surface-3); transform: translateY(-1px); } .btn-lg { height: 50px; padding: 0 24px; border-radius: 13px; font-size: 16px; } .nav-burger { display: none; } /* ---------- Hero ---------- */ .hero { padding-top: clamp(40px, 6vw, 76px); padding-bottom: clamp(40px, 5vw, 56px); } .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 4vw, 60px); align-items: start; } .hero-kicker { display: inline-flex; align-items: center; gap: 9px; padding: 6px 13px 6px 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--ink-soft); box-shadow: var(--shadow-sm); } .hero-kicker .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); } .hero h1 { font-family: var(--font-display); font-weight: 700; font-size: clamp(32px, 4.6vw, 50px); letter-spacing: 0; line-height: 1.2; margin: 18px 0 0; text-transform: uppercase; } .hero h1 em { font-style: normal; color: inherit; } .hero p.lead { font-size: clamp(16px, 1.8vw, 18px); color: var(--muted); max-width: 46ch; margin: 24px 0 0; } .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .hero-meta { display: flex; gap: 20px; margin-top: 34px; flex-wrap: nowrap; align-items: flex-start; } .hero-meta .m-num { font-family: var(--font-display); font-size: 28px; font-weight: 600; letter-spacing: -.01em; } .hero-meta .m-lbl { font-size: 12.5px; color: var(--muted); letter-spacing: .03em; margin-top: 2px; line-height: 1.32; white-space: nowrap; } .hero-meta .m { position: relative; padding-left: 16px; flex: 0 0 auto; min-width: 0; } .hero-meta .m::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; background: var(--border-strong); border-radius: 2px; } /* hero KPI strip */ .hero-kpis { display: grid; grid-template-columns: repeat(4, 1fr) 1.2fr; gap: 1px; margin-top: clamp(34px, 5vw, 52px); padding-top: clamp(26px, 3vw, 36px); border-top: 1px solid var(--border); background: var(--border); border-radius: var(--radius); overflow: hidden; } .hero-kpis { background: transparent; border-top: 1px dashed var(--border-strong); } .hero-kpis .kpi { padding: 4px 22px 4px 0; position: relative; } .hero-kpis .kpi + .kpi { padding-left: 22px; } .hero-kpis .kpi + .kpi::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 1px; background: var(--border); } .kpi-l { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .kpi-v { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 3vw, 34px); letter-spacing: -.01em; margin-top: 7px; line-height: 1; } .kpi-s { font-size: 12.5px; color: var(--faint); margin-top: 6px; } .kpi-form .fm-row { display: flex; gap: 5px; margin-top: 9px; } .fm { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-size: 12px; font-weight: 800; color: #fff; line-height: 1; padding-top: 1px; } .fm-w { background: var(--pos-up); } .fm-d { background: var(--faint); } .fm-l { background: var(--pos-down); } html[data-theme="dark"] .fm-w { background: color-mix(in srgb, var(--pos-up) 74%, #000); } html[data-theme="dark"] .fm-d { background: color-mix(in srgb, var(--faint) 80%, #000); } html[data-theme="dark"] .fm-l { background: color-mix(in srgb, var(--pos-down) 74%, #000); } /* hero side card = last result */ /* hero side: stacked last + next match (compact) */ .hero-side { display: flex; flex-direction: column; gap: 12px; align-self: center; width: 100%; } .mcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 15px 17px; } .mc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 13px; } .mc-tag { display: inline-flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .mc-tag .pip { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-deep); } html[data-theme="dark"] .mc-tag .pip { background: var(--accent); } .mc-tag .pip.next { background: var(--accent); } @keyframes pipBlink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } } @media (prefers-reduced-motion: no-preference) { .mc-tag .pip.next { animation: pipBlink 2.4s ease-in-out infinite; } } .mc-meta { font-size: 12px; color: var(--faint); font-weight: 600; white-space: nowrap; } .mc-mid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; text-decoration: none; color: inherit; } .mc-team { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; min-width: 0; } .mc-team.r { flex-direction: column; } .mc-team .nm { font-weight: 700; font-size: 12.5px; white-space: nowrap; } .mc-score { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 28px; letter-spacing: .01em; } .mc-score .c { color: var(--faint); font-size: 18px; font-weight: 600; } .mc-vs { font-size: 13px; font-weight: 800; letter-spacing: .08em; color: var(--faint); } .mc-when { text-align: center; padding: 0 4px; } .mc-time { font-family: var(--font-display); font-weight: 700; font-size: 24px; line-height: 1; letter-spacing: .02em; } .mc-day { font-size: 11.5px; color: var(--muted); margin-top: 5px; white-space: nowrap; } .mc-comp { font-size: 10.5px; color: var(--faint); font-weight: 600; margin-top: 4px; white-space: nowrap; } .mcard-next .mc-comp { font-size: 12px; } a.mc-mid:hover .nm { color: var(--accent-deep); } .mc-cd { display: flex; align-items: center; gap: 9px; margin-top: 13px; padding-top: 12px; border-top: 1px dashed var(--border-strong); } .cd-lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-right: auto; } .cd-u { font-size: 12px; color: var(--muted); font-weight: 600; } .cd-u b { font-size: 15px; color: var(--ink); font-weight: 800; margin-right: 1px; } /* team badge (monogram) */ .badge { --bsz: 44px; width: var(--bsz); height: var(--bsz); border-radius: 13px; flex: none; display: grid; place-items: center; font-weight: 800; font-size: calc(var(--bsz) * .3); letter-spacing: -.02em; background: var(--surface-3); color: var(--ink-soft); border: 1px solid var(--border); box-shadow: var(--shadow-sm); } .badge.sm { --bsz: 30px; border-radius: 9px; } .badge.md { --bsz: 38px; border-radius: 11px; } .badge.lg { --bsz: 64px; border-radius: 18px; } .badge.fav { background: var(--accent); color: #1a1a18; border-color: var(--accent-deep); } .badge.crest { background: transparent; border: 0; box-shadow: none; position: relative; overflow: hidden; } .badge.crest img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; } .team-cell .badge.crest { border: 0; } /* ---------- Standings ---------- */ .tabs { display: inline-flex; gap: 4px; padding: 5px; background: var(--surface-3); border: 1px solid var(--border); border-radius: 13px; } .tab { border: 0; background: transparent; color: var(--ink-soft); font-weight: 700; font-size: 14.5px; padding: 9px 18px; border-radius: 9px; transition: all .2s var(--ease); white-space: nowrap; } .tab[aria-selected="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); } .tab:hover:not([aria-selected="true"]) { color: var(--ink); } .stand-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 26px 0 16px; } .stand-meta .sm-league { font-family: var(--font-display); font-size: 22px; font-weight: 600; } .stand-meta .sm-round { color: var(--muted); font-size: 14px; margin-top: 3px; } .legend { display: flex; flex-wrap: wrap; gap: 14px; } .legend .lg { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); } .legend .lg i { width: 10px; height: 10px; border-radius: 3px; } .table-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; position: relative; } .table-scroll { overflow-x: auto; } table.stand { width: 100%; border-collapse: collapse; min-width: 540px; table-layout: fixed; } .table-fade { display: none; position: absolute; left: 0; right: 0; bottom: 46px; height: 96px; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--surface)); } .table-expand { display: none; width: 100%; border: 0; border-top: 1px solid var(--border); background: var(--surface); color: var(--muted); font-weight: 700; font-size: 14px; padding: 13px; cursor: pointer; position: relative; z-index: 5; } .table-expand:hover { background: var(--surface-2); } .stand thead th { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); font-weight: 700; text-align: center; padding: 7px 4px; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); z-index: 1; } .stand thead th.l { text-align: left; padding-left: 4px; } .stand tbody td { padding: 0 4px; height: 33px; text-align: center; font-size: 12.5px; border-bottom: 1px solid var(--border); } .stand tbody tr:last-child td { border-bottom: 0; } .stand tbody tr { transition: background .15s var(--ease); } .stand tbody tr:nth-child(even) { background: color-mix(in srgb, var(--ink) 3.5%, transparent); } .stand tbody tr:hover { background: var(--surface-3); } .stand .c-pos { width: 44px; position: relative; font-weight: 700; color: var(--muted); } .stand .c-pos .zbar { position: absolute; left: 0; top: 6px; bottom: 6px; width: 4px; border-radius: 3px; background: transparent; } .stand tr[data-zone="ucl"] .zbar { background: var(--zone-ucl); } .stand tr[data-zone="uel"] .zbar { background: var(--zone-uel); } .stand tr[data-zone="uecl"] .zbar { background: var(--zone-uecl); } .stand tr[data-zone="playoff"] .zbar { background: var(--zone-playoff); } .stand tr[data-zone="releg"] .zbar { background: var(--zone-releg); } .stand .c-team { text-align: left; width: 36%; white-space: nowrap; } .team-cell { display: flex; align-items: center; gap: 8px; min-width: 0; } .team-cell .badge { --bsz: 21px; border-radius: 6px; } .team-cell .name { font-weight: 600; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .team-cell .nm-short { display: none; } /* compact name shown only on mobile (see @media 720px) */ .stand .c-pts { font-weight: 800; font-size: 13.5px; } .stand .c-dim { color: var(--muted); } .gd-pos { color: var(--pos-up); } .gd-neg { color: var(--pos-down); } .stand tbody tr.fav { background: var(--fav-bg); color: var(--fav-ink); } .stand tbody tr.fav:hover { background: color-mix(in srgb, var(--fav-bg) 88%, var(--fav-ink)); } .stand tbody tr.fav td { color: var(--fav-ink); box-shadow: none; border-bottom-color: color-mix(in srgb, var(--fav-ink) 18%, transparent); } .stand tbody tr.fav .name { font-weight: 800; color: var(--fav-ink); } .stand tbody tr.fav .c-pos, .stand tbody tr.fav .c-dim { color: color-mix(in srgb, var(--fav-ink) 72%, transparent); } .stand tbody tr.fav .c-pts { color: var(--fav-ink); } /* ---------- Results strip ---------- */ /* two-column band: results (left) + calendar (right) */ .duo { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 4vw, 56px); align-items: start; } .duo-tc { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); } .duo-col .sec-head { margin-bottom: 22px; } .cal-note { font-size: 13px; color: var(--muted); margin: 12px 2px 0; } .results-stack { display: flex; flex-direction: column; gap: 14px; } .results-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .results-grid .featured { grid-column: 1 / -1; } .res-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; display: flex; flex-direction: column; transition: transform .2s var(--ease), box-shadow .2s; } .res-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .res-card .rc-comp { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; gap: 10px; } .res-row { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; margin-top: 14px; } .res-side { display: flex; align-items: center; gap: 11px; } .res-side .name { font-weight: 700; font-size: 15px; } .res-num { font-family: var(--font-display); font-weight: 600; font-size: 22px; min-width: 24px; text-align: right; } .res-row.win .res-num { color: var(--ink); } .res-row.lose .name, .res-row.lose .res-num { color: var(--muted); } .res-divider { height: 1px; background: var(--border); margin: 12px 0; } .featured { grid-row: span 1; } .results-stack .featured { order: -1; } .featured.res-card { padding: 0; overflow: hidden; } .featured .feat-top { padding: 22px 22px 18px; } .feat-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; margin-top: 6px; } .feat-team { display: flex; flex-direction: column; align-items: center; gap: 11px; text-align: center; } .feat-team .name { font-weight: 700; font-size: 15px; } .feat-big { font-family: var(--font-display); font-weight: 600; font-size: 46px; display: flex; gap: 14px; align-items: center; } .feat-big .col { color: var(--faint); font-size: 26px; } .feat-scorers { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; padding: 16px 22px 22px; background: var(--surface-2); border-top: 1px solid var(--border); } .feat-scorers .col-s { display: flex; flex-direction: column; gap: 5px; font-size: 13px; color: var(--ink-soft); } .feat-scorers .col-s.away { text-align: right; } .feat-scorers .s { display: flex; align-items: center; gap: 7px; } .feat-scorers .away .s { flex-direction: row-reverse; } .feat-scorers .ball { width: 12px; height: 12px; opacity: .5; flex: none; } /* ---------- Upcoming ---------- */ .next-card { position: relative; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--border); box-shadow: var(--shadow-lg); background: radial-gradient(120% 140% at 100% 0%, var(--accent-soft) 0%, transparent 55%), var(--surface); } .next-in { position: relative; padding: clamp(26px, 4vw, 44px); } .next-top { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; } .next-label { display: inline-flex; align-items: center; gap: 10px; } .next-tag { background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; padding: 6px 11px; border-radius: 8px; } .next-comp { font-weight: 700; color: var(--muted); font-size: 13.5px; } .next-venue { font-size: 13.5px; color: var(--muted); } .next-body { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(16px, 4vw, 50px); margin: clamp(24px, 4vw, 40px) 0; } .next-team { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; } .next-team .name { font-family: var(--font-display); font-weight: 600; font-size: clamp(18px, 2.4vw, 26px); } .next-vs { font-family: var(--font-display); font-style: normal; color: var(--faint); font-size: 20px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; } .countdown { display: flex; gap: 10px; justify-content: center; } .cd-unit { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 12px 6px; min-width: 70px; text-align: center; } .cd-unit .v { font-family: var(--font-display); font-weight: 600; font-size: 30px; letter-spacing: .02em; } .cd-unit .l { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-top: 3px; } .next-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 8px; } .next-date { font-weight: 700; } /* ---------- Calendar ---------- */ /* header social icon buttons (plain by default, brand-tint on hover) */ .icon-btn.icon-tg:hover { color: #229ED9; border-color: color-mix(in srgb, #229ED9 40%, var(--border)); } .icon-btn.icon-yt:hover { color: #ff0033; border-color: color-mix(in srgb, #ff0033 40%, var(--border)); } .icon-btn.icon-rss:hover { color: #f26522; border-color: color-mix(in srgb, #f26522 40%, var(--border)); } .icon-btn.icon-cal:hover { color: #e6c400; border-color: color-mix(in srgb, #e6c400 45%, var(--border)); } /* latest channel post card (hero right) */ .post-card { background: transparent; border: 0; box-shadow: none; border-radius: var(--radius); overflow: hidden; } /* telegram post embed */ .tg-embed { position: relative; max-height: 360px; overflow: hidden; } .post-card .tg-embed { border-radius: 0; } /* on desktop: fill the hero-side column down to the bottom edge of the copy */ @media (min-width: 901px) { .hero-side { position: relative; } .hero-side .post-card { position: absolute; inset: 0; } .hero-side .tg-embed { height: 100%; max-height: none; } } .tg-embed iframe { border-radius: 0 !important; margin: 0 !important; } .tg-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 96px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 14px; background: linear-gradient(transparent, var(--bg) 88%); pointer-events: none; } .tg-more { pointer-events: auto; font-weight: 700; font-size: 13.5px; color: var(--ink); background: var(--surface); border: 1px solid var(--border); padding: 9px 16px; border-radius: 10px; box-shadow: var(--shadow-sm); transition: transform .15s var(--ease), box-shadow .15s; } .tg-more:hover { transform: translateY(-1px); box-shadow: var(--shadow); color: var(--accent-deep); } /* next-match afisha band */ .afisha-band { padding: 0 0 clamp(40px, 5vw, 56px); } #tables { padding-top: 0; } .afisha-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: stretch; max-width: 980px; margin: 0 auto; } .afisha-pair .mcard, .afisha-pair .mcard-next { display: flex; flex-direction: column; max-width: none; margin: 0; padding: 18px 20px; } .afisha-pair .mc-mid { margin: 16px 0 0; align-items: start; } .afisha-pair .mcard-next .mc-top, .afisha-pair .mcard-last .mc-top { margin-bottom: 0; } .afisha-pair .mcard-next .badge.md, .afisha-pair .mcard-last .badge.md { --bsz: 56px; } .afisha-pair .mc-time, .afisha-pair .mc-score { font-size: 32px; } .afisha-pair .mc-when .mc-c { color: var(--faint); margin: 0 3px; } .afisha-pair .mcard-next .mc-mid, .afisha-pair .mcard-last .mc-mid { grid-template-columns: 1fr 130px 1fr; gap: 16px; } .afisha-pair .mc-comp { white-space: normal; line-height: 1.25; height: 30px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .afisha-pair .mcard-next .mc-tag, .afisha-pair .mcard-last .mc-tag { font-size: 12px; } .afisha-pair .mcard-next .mc-comp, .afisha-pair .mcard-last .mc-comp { font-size: 12px; } .afisha-pair .mcard-next .mc-day, .afisha-pair .mcard-last .mc-day { font-size: 13px; } .afisha-pair .mc-team { justify-content: flex-start; } .afisha-pair .mc-team .nm { min-height: 2.4em; } @media (max-width: 720px) { .afisha-pair { grid-template-columns: 1fr; } } .mcard-next { max-width: 760px; margin: 0 auto; padding: 22px 24px 18px; overflow: hidden; } .mcard-next .mc-top { margin-bottom: 18px; } .mc-top-center { flex-direction: column; align-items: center; justify-content: center; gap: 5px; text-align: center; } .mcard-next .mc-tag { font-size: 12px; } .mcard-next .mc-mid { gap: clamp(16px, 5vw, 56px); } .mcard-next .badge.md { --bsz: 50px; } .mcard-next .mc-team { min-width: 0; } .mcard-next .mc-team .nm { font-size: 15.5px; white-space: normal; line-height: 1.2; overflow-wrap: break-word; } #heroResult .mc-tag .pip { background: var(--pos-up); } @media (prefers-reduced-motion: no-preference) { #heroResult .mc-tag .pip { animation: pipBlink 2.4s ease-in-out infinite; } } .mcard-last .mc-team .nm { font-size: 15.5px; white-space: normal; line-height: 1.2; overflow-wrap: break-word; } .mcard-next .mc-time { font-size: 32px; } .mcard-next .mc-day { font-size: 13px; margin-top: 6px; } .mcard-next .mc-cd { justify-content: center; gap: 12px; margin-top: 16px; padding-top: 14px; } .mcard-next .cd-lbl { margin-right: 0; } .mcard-next .cd-u b { font-size: 17px; } /* schedule fixture list (replaces month grid) */ .sched-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .sched-list { display: flex; flex-direction: column; } .sched-item { display: grid; grid-template-columns: 50px 38px 1fr auto; align-items: center; gap: 14px; padding: 13px 18px; min-height: 88px; border-bottom: 1px solid var(--border); position: relative; cursor: pointer; transition: background .15s var(--ease); } .sched-item:last-child { border-bottom: 0; } .sched-item:hover { background: var(--surface-2); } .sched-item::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 3px 3px 0; background: var(--faint); } .sched-item.home::before { background: var(--accent); } /* schedule tabs + legend */ .col-head { margin-bottom: 16px; min-height: 86px; } .duo-tc .col-head .sec-title { margin-top: 8px; white-space: nowrap; } .col-tabs { margin-bottom: 16px; } .col-legend { display: flex; align-items: flex-start; margin: 0 2px 16px; } .col-legend .legend { gap: 7px 12px; } .col-legend .lg { font-size: 12px; } .col-legend .lg i { width: 10px; height: 10px; } .cal-legend .lg i { width: 12px; height: 12px; border-radius: 3px; background: var(--faint); } .cal-legend .lg i.sw-home { background: var(--accent); } .cal-legend .lg i.sw-away { background: var(--faint); } .sched-empty { padding: 28px 18px; text-align: center; color: var(--muted); font-size: 14px; } .sched-item:focus-visible { outline: 2px solid var(--accent-deep); outline-offset: -2px; } /* ---------- match detail modal ---------- */ .mm-overlay { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; background: color-mix(in srgb, var(--ink) 55%, transparent); backdrop-filter: blur(4px); animation: mmFade .18s var(--ease); } .mm-overlay[hidden] { display: none; } @keyframes mmFade { from { opacity: 0; } to { opacity: 1; } } .mm-card { position: relative; width: 100%; max-width: 460px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 26px 26px 22px; animation: mmPop .2s var(--ease); } @keyframes mmPop { from { transform: translateY(8px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } } .mm-close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 9px; border: 0; background: var(--surface-3); color: var(--ink); font-size: 22px; line-height: 1; display: grid; place-items: center; transition: background .15s var(--ease); } .mm-close:hover { background: var(--border-strong); } .sup-ov { position: fixed; inset: 0; z-index: 60; background: color-mix(in srgb, var(--ink) 55%, transparent); display: grid; place-items: center; padding: 20px; } .sup-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); width: min(380px, 100%); padding: 22px 22px 18px; position: relative; } .sup-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border-radius: 8px; border: 0; background: var(--surface-3); color: var(--ink); font-size: 20px; line-height: 1; cursor: pointer; } .sup-close:hover { background: var(--border-strong); } .sup-title { font-weight: 800; font-size: 18px; margin-bottom: 16px; } .sup-list { display: flex; flex-direction: column; gap: 9px; } .sup-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 13px 16px; border: 1px solid var(--border); border-radius: 12px; font-weight: 700; font-size: 14px; color: var(--ink); text-decoration: none; transition: background .15s var(--ease), border-color .15s var(--ease); } .sup-opt:hover { background: var(--accent-tint); border-color: var(--fav-bg); } .sup-opt svg { flex: none; color: var(--muted); } /* support button — neutral grey fill (theme-adaptive ~#42423C) */ #supportBtn { background: var(--ink-soft); color: var(--surface); border-color: transparent; } #supportBtn:hover { background: var(--ink); } #supportBtn svg { color: currentColor; } .mm-head { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); text-align: center; margin-bottom: 18px; } .mm-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 14px; } .mm-big, .mm-vs { align-self: start; height: 64px; display: flex; align-items: center; justify-content: center; } .mm-team { display: flex; flex-direction: column; align-items: center; gap: 11px; text-align: center; } .mm-name { font-weight: 700; font-size: 14px; text-wrap: balance; min-height: 2.4em; } .mm-big { display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-weight: 700; font-size: 44px; letter-spacing: .02em; } .mm-big .mm-c { color: var(--faint); font-size: 26px; } .mm-vs { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--faint); letter-spacing: .06em; } .mm-scorers { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; margin-top: 20px; padding-top: 18px; border-top: 1px dashed var(--border-strong); } .mm-col { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: var(--ink-soft); } .mm-col.away { text-align: right; } .mm-s { display: flex; align-items: center; gap: 7px; } .mm-col.away .mm-s { flex-direction: row-reverse; } .mm-s .ball { width: 13px; height: 13px; opacity: .5; flex: none; } .mm-note { margin-top: 18px; padding-top: 16px; border-top: 1px dashed var(--border-strong); text-align: center; color: var(--muted); font-size: 14px; } .mm-report { display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 20px; height: 46px; border-radius: 12px; background: var(--accent); color: var(--accent-ink); font-weight: 700; font-size: 15px; transition: transform .15s var(--ease), background .15s; } .mm-report:hover { background: var(--accent-deep); transform: translateY(-1px); } .mm-actions { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); } .mm-actions-cap { display: block; margin-bottom: 11px; font-weight: 700; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); text-align: center; } .sched-item.next { background: var(--accent-tint); } .sched-item.next:hover { background: color-mix(in srgb, var(--accent-tint) 82%, var(--ink) 4%); } .si-date { text-align: center; line-height: 1; } .si-date b { font-family: var(--font-display); font-weight: 700; font-size: 22px; display: block; } .si-date span { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .si-badge { display: flex; } .si-badge .badge { --bsz: 36px; } .si-main { min-width: 0; } .si-opp { font-weight: 700; font-size: 15.5px; line-height: 1.25; overflow-wrap: break-word; } .si-meta { font-size: 12.5px; color: var(--muted); margin-top: 2px; } .si-res { font-family: var(--font-display); font-weight: 700; font-size: 20px; letter-spacing: .02em; } .si-soon { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } .sched-pager { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 13px 18px; border-top: 1px solid var(--border); } .sp-btn { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: background .15s var(--ease), border-color .15s var(--ease); } .sp-btn:hover:not(:disabled) { background: var(--surface-3); border-color: var(--border-strong); } .sp-btn:disabled { opacity: .38; cursor: default; } .sp-btn svg { width: 18px; height: 18px; } .car-empty { flex: 0 0 100%; padding: 38px 16px; text-align: center; color: var(--muted); font-weight: 600; font-size: 14px; border: 1px dashed var(--border-strong); border-radius: var(--radius); background: var(--surface); } .sp-info { font-weight: 700; font-size: 13px; letter-spacing: .04em; color: var(--muted); } /* keyboard focus (a11y) — only on keyboard nav, not mouse clicks */ :focus-visible { outline: 2px solid var(--accent-deep); outline-offset: 2px; border-radius: 4px; } html[data-theme="dark"] :focus-visible { outline-color: var(--accent); } .sched-item:focus-visible, .fc-arrow:focus-visible, .sp-btn:focus-visible, .tab:focus-visible, .src-card:focus-visible, .iv-card:focus-visible, .report-card:focus-visible { outline-offset: 3px; } .si-time { font-weight: 700; font-size: 15px; letter-spacing: .02em; color: var(--ink-soft); } .sched-item.next .si-soon { color: var(--accent-deep); } html[data-theme="dark"] .sched-item.next .si-soon { color: var(--accent); } /* legacy month grid (kept harmless) */ .cal-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .cal-top { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--border); } .cal-month { font-family: var(--font-display); font-size: 26px; font-weight: 600; } .cal-month span { color: var(--muted); font-size: 18px; margin-left: 8px; } .cal-nav { display: flex; gap: 8px; } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); } .cal-grid .dow { text-align: center; font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 12px 0; border-bottom: 1px solid var(--border); } .cal-grid .dow.we { color: var(--accent-deep); } html[data-theme="dark"] .cal-grid .dow.we { color: var(--accent); } .cal-cell { min-height: 92px; padding: 9px 10px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); position: relative; } .cal-cell:nth-child(7n) { border-right: 0; } .cal-cell.out { background: var(--surface-2); } .cal-cell .dnum { font-size: 13px; font-weight: 700; color: var(--ink-soft); } .cal-cell.out .dnum { color: var(--faint); font-weight: 500; } .cal-cell.today .dnum { background: var(--accent); color: #1a1a18; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; } .fix-chip { margin-top: 8px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 7px 8px; box-shadow: var(--shadow-sm); display: flex; align-items: center; gap: 7px; cursor: default; transition: transform .15s var(--ease), box-shadow .15s; } .fix-chip:hover { transform: translateY(-1px); box-shadow: var(--shadow); } .fix-chip.home { border-left: 3px solid var(--accent); } .fix-chip .fx-meta { line-height: 1.2; min-width: 0; } .fix-chip .fx-opp { font-weight: 700; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fix-chip .fx-sub { font-size: 10.5px; color: var(--muted); display: flex; align-items: center; gap: 5px; } .fix-chip .fx-res { margin-left: auto; font-weight: 800; font-size: 12.5px; } .fix-chip .ha { font-size: 10px; } /* ---------- Feed (Telegram posts — one-row carousel) ---------- */ .feed-carousel { position: relative; } .feed-carousel::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 64px; display: none; pointer-events: none; z-index: 2; transition: opacity .25s var(--ease); background: linear-gradient(to right, transparent, var(--bg)); } @media (min-width: 721px) { .feed-carousel::after { display: block; } .fc-track { cursor: grab; } } .feed-carousel.at-end::after { opacity: 0; } /* mobile swipe affordance: cards are narrowed to <=78vw so a slice of the next card peeks in, plus an ink-shade edge fade (same language as .table-hint) */ @media (max-width: 720px) { .feed-carousel::after { display: block; width: 48px; /* eased horizontal ramp — no visible band edge on the left */ background: linear-gradient(to right, transparent, color-mix(in srgb, var(--ink) 5%, transparent) 45%, color-mix(in srgb, var(--ink) 15%, transparent)); /* feather top/bottom so the strip doesn't read as a hard rectangle */ -webkit-mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent); mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent); } } /* horizontal axis is a NATIVE scroller (hidden scrollbar + scroll-snap): the pan runs on the compositor thread — immune to main-thread jank, momentum for free. overscroll containment keeps the browser back-gesture out. The vertical padding + negative margin keep card shadows/hover-lift unclipped (a scroll container clips at its padding box). */ .fc-viewport { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; -ms-overflow-style: none; padding: 8px 0 24px; margin: -8px 0 -24px; } .fc-viewport::-webkit-scrollbar { display: none; } /* desktop: mandatory snap turns a trackpad glide / mouse scrub into card-by-card stepping — soften to proximity (free scroll, magnet only near a card). Mobile keeps mandatory so a swipe always parks a card centered. */ @media (min-width: 721px) { .fc-viewport { scroll-snap-type: x proximity; } } .fc-track { display: flex; gap: 18px; align-items: flex-start; } /* desktop: cards park flush left; mobile (single card in view): park centered — the JS sets a matching inline padding on the track (see initCarousel.pad) */ .fc-track > * { scroll-snap-align: start; } @media (max-width: 720px) { .fc-track { gap: 10px; } .fc-track > * { scroll-snap-align: center; } } .tg-post { position: relative; flex: 0 0 min(360px, 82vw); max-width: min(360px, 82vw); max-height: var(--feed-cap, 720px); overflow: hidden; border-radius: var(--radius); } /* peek-width only for custom cards: the TG widget iframe has a ~300px minimum width and gets clipped inside a narrower card, so widget mode keeps 82vw */ html[data-cards="custom"] .tg-post { flex-basis: min(360px, 72vw); max-width: min(360px, 72vw); } .tg-post iframe { border-radius: var(--radius) !important; margin: 0 !important; pointer-events: none; } .tg-link { position: absolute; inset: 0; z-index: 1; } .tg-post.clipped::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 88px; pointer-events: none; border-radius: 0 0 var(--radius) var(--radius); background: linear-gradient(to bottom, transparent, var(--surface)); } .tg-post.expanded { max-height: none; } /* expand button — same look as the carousel arrows */ .tg-expand { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 3; display: none; align-items: center; gap: 6px; border: 2px solid var(--fav-bg); background: var(--accent-tint); color: var(--ink); font-weight: 700; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; cursor: pointer; box-shadow: var(--shadow); white-space: nowrap; transition: background .15s var(--ease); } .tg-expand:hover { background: var(--accent-soft); } .tg-expand .chev { transition: transform .2s var(--ease); flex: none; } .tg-post.clipped .tg-expand, .tg-post.expanded .tg-expand { display: inline-flex; } .tg-post.expanded .tg-expand .chev { transform: rotate(180deg); } /* ---------- Loading skeletons (TG embeds + external photos) ---------- */ @keyframes sud-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .skel { position: relative; overflow: hidden; background: var(--surface-3); } .skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent 0, color-mix(in srgb, var(--surface) 72%, transparent) 50%, transparent 100%); animation: sud-shimmer 1.5s var(--ease) infinite; } @media (prefers-reduced-motion: reduce) { .skel::after { animation: none; } } /* Telegram embed skeleton (hero post + feed posts) */ .embed-skel { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; gap: 14px; padding: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: inherit; opacity: 1; transition: opacity .4s var(--ease); } .embed-skel.hide { opacity: 0; pointer-events: none; } .embed-skel .sk-row { display: flex; align-items: center; gap: 12px; } .embed-skel .sk-col { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; } .embed-skel .sk-av { width: 42px; height: 42px; border-radius: 50%; flex: none; } .embed-skel .sk-line { height: 11px; border-radius: 6px; } .embed-skel .sk-line.w35 { width: 35%; } .embed-skel .sk-line.w60 { width: 60%; } .embed-skel .sk-line.w75 { width: 75%; } .embed-skel .sk-line.w90 { width: 90%; } .embed-skel .sk-media { flex: 1 1 auto; min-height: 150px; border-radius: var(--radius-sm); } .tg-post.embed-loading { min-height: 440px; } .tg-embed.embed-loading { min-height: 360px; } .tg-embed.embed-loading .tg-fade { display: none; } /* Photo skeleton (interviews) */ .iv-photo { position: relative; } .iv-photo .iv-skel { position: absolute; inset: 0; z-index: 0; opacity: 1; transition: opacity .4s var(--ease); } .iv-photo img { position: relative; z-index: 1; } .iv-photo.loaded .iv-skel { opacity: 0; } .fc-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 46px; height: 46px; border-radius: 50%; border: 2px solid var(--fav-bg); background: var(--accent-tint); color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow); transition: background .15s var(--ease), opacity .2s; } .fc-arrow:hover { background: var(--accent-soft); } .fc-arrow:disabled { opacity: 0; pointer-events: none; } .fc-arrow svg { width: 22px; height: 22px; } .fc-prev { left: -14px; } .fc-next { right: -14px; } .rc-prev { left: -14px; } .rc-next { right: -14px; } .src-prev { left: -14px; } .src-next { right: -14px; } .iv-prev, .hs-prev { left: -14px; } .iv-next, .hs-next { right: -14px; } /* report showcase cards */ .report-card { flex: 0 0 min(348px, 78vw); max-width: min(348px, 78vw); display: flex; flex-direction: column; gap: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 20px 16px; text-decoration: none; color: var(--ink); transition: transform .2s var(--ease), box-shadow .2s var(--ease); } .report-card:hover { box-shadow: var(--shadow-lg); } .report-card .rc-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .report-card .rc-comp { color: var(--muted); } .report-card .rc-date { color: var(--muted); } .report-card .rc-mid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 10px; } .report-card .rc-team { display: flex; flex-direction: column; align-items: center; gap: 9px; text-align: center; min-width: 0; } .report-card .rc-team .badge.md { --bsz: 46px; border-radius: 13px; } .report-card .rc-nm { font-size: 12px; font-weight: 700; white-space: normal; line-height: 1.2; max-width: 100%; overflow-wrap: break-word; min-height: 2.4em; } .report-card .rc-score { display: flex; align-items: center; justify-content: center; height: 46px; align-self: start; gap: 7px; font-family: var(--font-display); font-weight: 600; font-size: 30px; letter-spacing: .01em; } .report-card .rc-score .rc-c { color: var(--faint); font-size: 20px; } .report-card .rc-foot { display: flex; flex-direction: column; gap: 11px; margin-top: 2px; padding-top: 14px; border-top: 1px solid var(--border); } .report-card .rc-cap { font-weight: 700; font-size: 12px; color: var(--muted); } .rc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .rc-actions.single { grid-template-columns: 1fr; } .rc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px 8px; border: 1px solid var(--border); border-radius: 10px; font-weight: 700; font-size: 12.5px; color: var(--ink-soft); text-decoration: none; transition: background .15s var(--ease), color .15s var(--ease), border-color .15s var(--ease); } .rc-btn svg { width: 15px; height: 15px; flex: none; } .rc-btn:hover { background: var(--surface-3); color: var(--ink); border-color: var(--border-strong); } .rc-btn.is-default { background: var(--accent-tint); border-color: var(--fav-bg); color: var(--ink); } .rc-btn.is-default:hover { background: var(--accent-soft); } /* source-feed cards */ .src-card { flex: 0 0 min(360px, 78vw); max-width: min(360px, 78vw); display: flex; flex-direction: column; gap: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); border-left: 4px solid color-mix(in srgb, var(--src, var(--accent-deep)) 42%, var(--surface)); box-shadow: var(--shadow); padding: 18px 20px 16px; text-decoration: none; color: var(--ink); transition: box-shadow .2s var(--ease); } .src-card:hover { box-shadow: var(--shadow-lg); } .src-card .src-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .src-card .src-name { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 13px; color: color-mix(in srgb, var(--src, var(--accent-deep)) 70%, var(--ink)); } .src-card .src-name svg { width: 15px; height: 15px; flex: none; } .src-card .src-date { font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; } .src-card .src-de { font-weight: 700; font-size: 16px; line-height: 1.28; color: var(--ink); text-wrap: pretty; } .src-card .src-ru { font-size: 13.5px; line-height: 1.4; color: var(--ink-soft); text-wrap: pretty; } #sourcesTrack { align-items: stretch; } .src-card .src-foot { display: flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 13px; border-top: 1px solid var(--border); font-weight: 700; font-size: 12.5px; color: var(--muted); } .src-card:hover .src-foot { color: color-mix(in srgb, var(--src, var(--accent-deep)) 70%, var(--ink)); } /* big interview cards (editorial) */ .iv-card { flex: 0 0 min(440px, 78vw); max-width: min(440px, 78vw); display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; text-decoration: none; color: var(--ink); transition: box-shadow .2s var(--ease); } .iv-card:hover { box-shadow: var(--shadow-lg); } #interviewTrack, #historyTrack { align-items: stretch; } /* history headlines are full article titles (not pull-quotes): smaller, never clamped */ #history .iv-title { font-size: 19px; line-height: 1.3; display: block; overflow: visible; } /* no interviewee (history) → drop the empty name slot; symmetric 12px above the title (under the photo) and below it (to the footer line) */ .iv-name:empty { display: none; } #history .iv-body { padding-top: 12px; gap: 12px; } /* centre the footer divider: space above (title→line) = space below (line→text) */ #interview .iv-foot { padding-top: 10px; } #history .iv-foot { padding-top: 12px; } .iv-photo { aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface-3); } .iv-photo-empty { background: var(--surface); } .iv-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .iv-body { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; gap: 10px; padding: 26px 28px 18px; } .iv-quote-glyph { position: absolute; top: 4px; right: 22px; font-family: var(--font-display); font-size: 86px; line-height: 1; color: var(--accent-tint); pointer-events: none; } .iv-card.has-photo .iv-quote-glyph { display: none; } .iv-name { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); } .iv-title { font-family: var(--font-display); font-weight: 600; font-size: 27px; line-height: 1.18; letter-spacing: .005em; text-wrap: pretty; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; } .iv-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 15px; border-top: 1px solid var(--border); font-weight: 700; font-size: 12.5px; color: var(--muted); } .iv-card:hover .iv-foot { color: var(--accent-deep); } html[data-theme="dark"] .iv-card:hover .iv-foot { color: var(--accent); } /* mobile: carousel cards are narrowed for the swipe peek — scale editorial type with the card so titles keep their pre-peek line count, and compact the report-card chrome so buttons/date stay on one line */ @media (max-width: 720px) { /* 6 lines on mobile ≈ the character capacity of desktop's 4 wider lines */ .iv-title { font-size: clamp(19px, 6vw, 27px); -webkit-line-clamp: 6; } #history .iv-title { font-size: clamp(15px, 4.3vw, 19px); } .src-card .src-de { font-size: clamp(13px, 3.6vw, 16px); } .src-card .src-ru { font-size: clamp(11.5px, 3.1vw, 13.5px); } .report-card .rc-top { font-size: 10.5px; } .report-card .rc-date { white-space: nowrap; } .report-card .rc-comp { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rc-btn { font-size: 11px; padding: 8px 4px; white-space: nowrap; } .rc-btn svg { width: 13px; height: 13px; } .rc-actions { gap: 6px; } } /* very narrow screens: two theme buttons can't share a row — stack them */ @media (max-width: 350px) { .rc-actions { grid-template-columns: 1fr; } } .feed-cols-old { columns: 4 230px; column-gap: 18px; } .feed-card { break-inside: avoid; margin-bottom: 18px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: block; transition: transform .2s var(--ease), box-shadow .2s; } .feed-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } .feed-thumb { position: relative; background: var(--surface-3); } .feed-thumb img { width: 100%; height: auto; display: block; } .feed-tag { position: absolute; top: 10px; left: 10px; background: var(--scrim); backdrop-filter: blur(6px); color: var(--ink); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 5px 9px; border-radius: 7px; border: 1px solid var(--border); } .feed-body { padding: 14px 15px 15px; } .feed-title { font-weight: 700; font-size: 14.5px; line-height: 1.35; text-wrap: pretty; } .feed-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 11px; font-size: 12.5px; color: var(--muted); } .feed-foot .views { display: inline-flex; align-items: center; gap: 5px; } .feed-foot svg { width: 14px; height: 14px; } /* ---------- CTA band ---------- */ .cta-band { padding: clamp(40px,6vw,72px) 0; } .cta-inner { background: var(--black-badge); color: #F3F0E2; border-radius: var(--radius-lg); padding: clamp(34px, 5vw, 64px); display: grid; grid-template-columns: 1.2fr auto; gap: 28px; align-items: center; position: relative; overflow: hidden; box-shadow: var(--shadow-lg); } .cta-inner::after { content: ""; position: absolute; right: -40px; top: -40px; width: 280px; height: 280px; background: radial-gradient(circle, var(--accent) 0%, transparent 62%); opacity: .16; pointer-events: none; } .cta-inner h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(26px, 4vw, 42px); letter-spacing: -.02em; } .cta-inner p { color: #B9B6A2; margin-top: 12px; max-width: 44ch; } .cta-actions { display: flex; flex-direction: column; gap: 11px; } /* ---------- Footer ---------- */ .ftr { border-top: 1px solid var(--border); padding: 50px 0 40px; } .ftr-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 30px; } .ftr-brand .brand { margin-bottom: 14px; } .ftr-brand p { color: var(--muted); font-size: 14px; max-width: 34ch; } .ftr-col h4 { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); margin-bottom: 14px; font-weight: 700; } .ftr-col a { display: block; color: var(--ink-soft); font-size: 14.5px; padding: 5px 0; transition: color .2s; } .ftr-col a:hover { color: var(--accent-deep); } .ftr-social { display: flex; gap: 10px; margin-top: 2px; } .ftr-social .icon-btn { display: grid; padding: 0; } .ftr-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted); } .ftr-legal { margin-top: 14px; font-size: 12px; line-height: 1.55; color: var(--faint); max-width: 92ch; } /* placeholder slots for upcoming sections */ .ph-slot { border: 1px dashed var(--border-strong); border-radius: var(--radius); background-color: var(--surface); background-image: repeating-linear-gradient(45deg, var(--surface-2) 0 11px, transparent 11px 22px); min-height: 104px; padding: 26px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center; } .ph-tag { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--surface-3); border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px; } .ph-note { color: var(--muted); font-size: 14px; max-width: 44ch; } /* ---------- Responsive ---------- */ @media (max-width: 1024px) { .brand-txt { display: none; } } @media (max-width: 900px) { .hdr .nav-toggle { display: grid; } .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 2px; margin-left: 0; background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-lg); padding: 10px 16px 14px; } .hdr.nav-open .nav { display: flex; } .nav a { padding: 12px 12px; font-size: 16px; border-radius: 10px; } .hero-grid { grid-template-columns: 1fr; } .hero-card { max-width: 460px; } .duo { grid-template-columns: minmax(0, 1fr); gap: 48px; } .results-grid { grid-template-columns: 1fr 1fr; } .featured { grid-column: span 2; } .next-body { grid-template-columns: 1fr; gap: 22px; } .cta-inner { grid-template-columns: 1fr; } .ftr-grid { grid-template-columns: 1fr 1fr; } .ftr-brand { grid-column: span 2; } } @media (max-width: 720px) { .fc-arrow { display: none; } .stand .sc-4, .stand .sc-5 { display: none; } .team-cell .nm-full { display: none; } .team-cell .nm-short { display: inline; } /* auto layout gives the club column its shrink-to-fit width (width:1px floors at min-content; .name drops overflow:hidden so the full name IS its min-content). JS (initTableScrollHint.sizeColumns) then freezes the measured width and flips the table to fixed layout, where the numeric columns split the leftover into exactly equal shares. No forced min-width — scroll kicks in only when content genuinely can't fit */ table.stand { min-width: 0; table-layout: auto; } /* width is border-box (global reset): 10px clearance for the zone bar + room for 2-digit places */ .stand .c-pos { width: 40px; padding-left: 10px; } .stand .c-team { width: 1px; padding-right: 12px; } .stand .c-team .name { min-width: auto; overflow: visible; } .stand .c-pos, .stand .c-team { position: sticky; background: var(--surface); z-index: 1; } .stand .c-pos { left: 0; } /* matches the pos column's border-box width — keeps the club column pinned flush after it while scrolling */ .stand .c-team { left: 40px; box-shadow: 1px 0 0 var(--border); } .stand thead th { z-index: 2; } .stand thead .c-pos, .stand thead .c-team { z-index: 3; } .stand tbody tr:nth-child(even) .c-pos, .stand tbody tr:nth-child(even) .c-team { background: color-mix(in srgb, var(--ink) 3.5%, var(--surface)); } .stand tbody tr.fav .c-pos, .stand tbody tr.fav .c-team { background: var(--fav-bg); } .table-card.collapsed .table-scroll { max-height: 340px; overflow-y: hidden; } .table-card.collapsed .table-fade { display: block; } .table-expand { display: block; } .hero-meta .m:nth-child(3) { display: none; } .mcard-next .mc-team .nm, .mcard-last .mc-team .nm { display: none; } .hero-kpis { grid-template-columns: 1fr 1fr; gap: 22px 0; } .hero-kpis .kpi, .hero-kpis .kpi + .kpi { padding: 0 18px; } .hero-kpis .kpi + .kpi::before { display: none; } .hero-kpis .kpi:nth-child(odd) { border-right: 1px solid var(--border); } .cal-cell { min-height: 74px; padding: 6px 6px; } .fix-chip .fx-sub { display: none; } } @media (max-width: 560px) { .results-grid { grid-template-columns: 1fr; } .featured { grid-column: span 1; } .brand-tag { display: none; } .hero-cta .btn { flex: 1; } .btn-hide-sm { display: none; } .col-tabs .tabs { display: flex; width: 100%; } .col-tabs .tab { flex: 1; min-width: 0; text-align: center; font-size: 13px; padding: 9px 8px; } .duo-tc .col-head .sec-title { white-space: normal; } } @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition-duration: .01ms !important; } } /* ============================================================ Custom Telegram-style post cards (analog of the TG widget, WITHOUT reactions/views). Active in index.html when ; built from SUD_DATA.posts. ============================================================ */ .tgc-wrap { display: block; height: 100%; } .tgc { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; color: var(--ink); } /* header: avatar + channel identity */ .tgc-head { display: flex; align-items: center; gap: 11px; padding: 14px 16px 11px; } .tgc-av { width: 42px; height: 42px; border-radius: 50%; overflow: hidden; flex: none; background: var(--black-badge); display: grid; place-items: center; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 8%, transparent); } .tgc-av img { width: 100%; height: 100%; object-fit: cover; } .tgc-id { display: flex; flex-direction: column; gap: 1px; min-width: 0; } .tgc-name { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-sans); font-weight: 700; font-size: 15px; letter-spacing: 0; color: var(--ink); line-height: 1.12; } .tgc-ver { width: 15px; height: 15px; flex: none; } .tgc-ver .vb { fill: var(--accent-deep); } .tgc-ver .vt { fill: var(--accent-ink); } .tgc-handle { font-size: 12.5px; color: var(--muted); line-height: 1.1; } .tgc-pin { margin-left: auto; color: var(--faint); display: inline-flex; align-self: flex-start; } .tgc-pin svg { width: 16px; height: 16px; transform: rotate(45deg); } /* media */ .tgc-media { display: block; position: relative; background: var(--surface-3); } .tgc-media img { display: block; width: 100%; height: auto; } .tgc-media.is-crop { overflow: hidden; } .tgc-media.is-crop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* media group (album) — Telegram-style grid */ .tgc-album { display: grid; gap: 3px; background: var(--surface); } .tgc-album .tgc-cell { position: relative; overflow: hidden; background: var(--surface-3); aspect-ratio: 1 / 1; } .tgc-album .tgc-cell img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .tgc-album.n2 { grid-template-columns: 1fr 1fr; } .tgc-album.n3 { grid-template-columns: 1fr 1fr; } .tgc-album.n3 .tgc-cell:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; } .tgc-album.n4 { grid-template-columns: 1fr 1fr; } .tgc-more-n { position: absolute; inset: 0; display: grid; place-items: center; background: color-mix(in srgb, #000 50%, transparent); color: #fff; font-family: var(--font-sans); font-weight: 700; font-size: 26px; letter-spacing: .02em; } /* body */ .tgc-body { padding: 13px 16px 4px; display: flex; flex-direction: column; gap: 8px; } .tgc-title { font-family: var(--font-sans); font-weight: 700; font-size: 16px; line-height: 1.28; letter-spacing: 0; color: var(--ink); margin: 0; text-wrap: balance; } .tgc-p { font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); margin: 0; text-wrap: pretty; } /* preserved Telegram formatting inside post text */ .tgc-body a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent-deep); text-underline-offset: 2px; transition: color .15s var(--ease); } .tgc-body a:hover { color: var(--accent-deep); } .tgc-body b, .tgc-body strong { font-weight: 700; color: var(--ink); } .tgc-body i, .tgc-body em { font-style: italic; } .tgc-body u { text-decoration: underline; text-underline-offset: 2px; } .tgc-body s, .tgc-body del, .tgc-body strike { text-decoration: line-through; color: var(--muted); } .tgc-body code, .tgc-body pre { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; } .tgc-body code { font-size: .9em; background: var(--surface-3); border: 1px solid var(--border); border-radius: 5px; padding: .06em .36em; } .tgc-body pre { font-size: 12.5px; line-height: 1.55; background: var(--surface-3); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; margin: 0; overflow-x: auto; white-space: pre; color: var(--ink); } .tgc-body pre code { background: none; border: 0; padding: 0; font-size: inherit; } .tgc-body blockquote { margin: 0; padding: 3px 0 3px 13px; border-left: 3px solid var(--accent-deep); color: var(--ink-soft); } .tgc-body blockquote p { margin: 0; } .tg-spoiler { background: var(--ink-soft); color: transparent; border-radius: 4px; cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease); -webkit-box-decoration-break: clone; box-decoration-break: clone; } .tg-spoiler.revealed { background: transparent; color: inherit; cursor: text; } .tgc-tags { display: flex; flex-wrap: wrap; gap: 5px 9px; margin: 4px 0 0; } .tgc-tags a { font-size: 13px; font-weight: 500; color: var(--muted); text-decoration: none; } .tgc-tags a:hover { color: var(--ink); } /* footer: date + open-in-telegram (NO reactions, NO views) */ .tgc-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px 14px; border-top: 1px solid color-mix(in srgb, var(--border) 65%, transparent); } .tgc-date { font-size: 12.5px; color: var(--muted); white-space: nowrap; } .tgc-open { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; color: var(--ink-soft); text-decoration: none; transition: color .15s var(--ease); } .tgc-open svg { width: 15px; height: 15px; color: currentColor; } .tgc-open:hover { color: var(--accent-deep); } /* feed cards reuse the .tg-post wrapper (carousel clip + expand machinery) */ .tgc-post .tgc { height: auto; } /* hero pinned card: clip + fade + «Развернуть» like the feed, but full-width (not the 360px feed item). max-height is set inline by initHeroClip to match the tg widget — 360px on mobile, the copy-column height on desktop. */ html[data-cards="custom"] .hero-side .post-card { position: static; } html[data-cards="custom"] .hero-side .tg-embed { height: auto; max-height: none; border-radius: var(--radius); overflow: visible; } html[data-cards="custom"] .hero-side .tg-post { flex: none; max-width: none; width: 100%; } /* custom mode hides the TG «read more» overlay (card carries its own footer link) */ html[data-cards="custom"] .tg-fade { display: none; } .tgc-hero .tgc-head { padding: 16px 18px 12px; } .tgc-hero .tgc-body { padding: 14px 18px 4px; } .tgc-hero .tgc-foot { padding: 13px 18px 15px; } .tgc-hero .tgc-title { font-size: 19px; } .tgc-hero .tgc-p { font-size: 15px; } /* horizontal-scroll hint for the standings table on mobile (toggled by JS: .x-end) */ .table-hint { display: none; } @media (max-width: 720px) { .table-hint { display: block; position: absolute; top: 1px; right: 1px; bottom: 47px; width: 42px; pointer-events: none; z-index: 2; border-radius: 0 var(--radius) var(--radius) 0; background: linear-gradient(to right, transparent, color-mix(in srgb, var(--ink) 17%, transparent)); opacity: 1; transition: opacity .25s var(--ease); } .table-card.x-end .table-hint { opacity: 0; } } /* ============================================================ Error pages (404 / 5xx) — shared by templates/404.html + 5xx.html. Football-scoreboard tiles (4·0·4 / 5·0·0); standalone, no header/footer. ============================================================ */ .nf-main { min-height: 100vh; box-sizing: border-box; display: grid; place-items: center; padding: clamp(40px, 8vw, 88px) var(--gutter); text-align: center; } .nf-inner { width: 100%; max-width: 640px; margin: 0 auto; } .nf-score { display: flex; align-items: stretch; justify-content: center; gap: clamp(10px, 2vw, 18px); } .nf-tile { font-family: var(--font-display); font-weight: 700; line-height: 1; font-size: clamp(78px, 18vw, 168px); width: clamp(86px, 19vw, 176px); display: grid; place-items: center; background: #42423C; color: var(--accent); border-radius: clamp(14px, 2.4vw, 26px); box-shadow: var(--shadow-lg); border: 1px solid color-mix(in srgb, #000 30%, transparent); font-variant-numeric: tabular-nums; padding: clamp(10px, 1.6vw, 18px) 0; } .nf-tile.ball { background: var(--accent); color: #42423C; border-color: var(--accent-deep); } .nf-title { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: clamp(28px, 5vw, 46px); line-height: 1.1; margin: clamp(30px, 4.5vw, 46px) 0 0; } .nf-lead { color: var(--muted); font-size: clamp(15px, 1.7vw, 17.5px); line-height: 1.6; margin: 16px auto 0; max-width: 46ch; text-wrap: pretty; } .nf-cta { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: clamp(30px, 4vw, 40px); } @media (max-width: 520px) { .nf-tile { border-radius: 12px; } .nf-score { gap: 8px; } } @media (prefers-reduced-motion: no-preference) { .nf-tile { animation: nfDrop .5s var(--ease); } .nf-tile:nth-child(2) { animation-delay: .07s; } .nf-tile:nth-child(3) { animation-delay: .14s; } @keyframes nfDrop { from { transform: translateY(-12px); } to { transform: none; } } }