/* ============================================================================= Pick (pick.in.ua) - дизайн-система прототипу Архітектура токенів і рівень якості - на основі uaserials. Палітра, шрифти й характер - власні для Pick. Дві теми (light/dark), два напрями (journal/arena), керовані атрибутами на . ============================================================================= */ /* ── e-Ukraine Head (дисплейний, кирилиця) - CDN haos616/e-Ukraine ────────── */ @font-face { font-family: 'e-Ukraine Head'; src: url('https://cdn.jsdelivr.net/gh/haos616/e-Ukraine@master/static/fonts/e-UkraineHead-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'e-Ukraine Head'; src: url('https://cdn.jsdelivr.net/gh/haos616/e-Ukraine@master/static/fonts/e-UkraineHead-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'e-Ukraine Head'; src: url('https://cdn.jsdelivr.net/gh/haos616/e-Ukraine@master/static/fonts/e-UkraineHead-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'e-Ukraine Head'; src: url('https://cdn.jsdelivr.net/gh/haos616/e-Ukraine@master/static/fonts/e-UkraineHead-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } /* ============================================================================= ТОКЕНИ ============================================================================= */ :root { /* ── Шкали (архітектура uaserials) ─────────────────────────────────────── */ --text-2xs: 11px; --text-xs: 12px; --text-sm: 13px; --text-base: 14px; --text-md: 15px; --text-lg: 16px; --text-xl: 18px; --text-2xl: 20px; --text-3xl: 24px; --text-4xl: 30px; --text-5xl: 40px; --text-6xl: 56px; --text-7xl: 72px; --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --leading-tight: 1.12; --leading-snug: 1.28; --leading-normal: 1.55; --leading-loose: 1.7; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 10px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --radius-xs: 6px; --radius-sm: 6px; --radius-md: 6px; --radius-lg: 6px; --radius-xl: 6px; --radius-2xl: 6px; --radius-3xl: 6px; --radius-pill: 6px; --radius-circle: 50%; --transition-fast: .18s; --transition-base: .3s; --transition-slow: .5s; --ease: cubic-bezier(.4, 0, .2, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --container: 1200px; --z-base: 1; --z-dropdown: 1000; --z-sticky: 1100; --z-overlay: 1200; --z-modal: 1300; --z-toast: 1400; --z-tweaks: 2147483646; /* ── Шрифти (керується [data-font]) ────────────────────────────────────── */ --font-display: 'e-Ukraine Head', 'Manrope', system-ui, sans-serif; --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Consolas', monospace; /* ── Семантичні (light, нейтраль) ──────────────────────────────────────── */ --text: #2c2c35; --text-heading: #131318; --text-muted: #6c6c78; --text-faint: #9a9aa6; --border: rgba(18, 18, 28, .10); --border-strong: rgba(18, 18, 28, .16); --shadow-sm: 0 1px 2px rgba(18, 18, 28, .06), 0 1px 1px rgba(18, 18, 28, .04); --shadow-md: 0 4px 14px rgba(18, 18, 28, .08), 0 1px 3px rgba(18, 18, 28, .06); --shadow-lg: 0 14px 40px rgba(18, 18, 28, .14), 0 4px 12px rgba(18, 18, 28, .08); --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); /* ── Акцент (керується tweak, JS виставляє значення) ───────────────────── */ --accent: #e8693c; --accent-ink: #ffffff; --accent-soft: color-mix(in srgb, var(--accent) 13%, transparent); --accent-line: color-mix(in srgb, var(--accent) 30%, transparent); /* ── Голосування «за/проти» (семантика) ────────────────────────────────── */ --up: #14a06a; --up-soft: color-mix(in srgb, var(--up) 12%, transparent); --down: #e1484d; --down-soft: color-mix(in srgb, var(--down) 12%, transparent); /* ── Медалі топ-3 ──────────────────────────────────────────────────────── */ --gold: #e6b23e; --gold-2: #f6d479; --silver: #a9aebb; --silver-2: #d6d9e1; --bronze: #c77b45; --bronze-2: #e3a877; /* ── Щільність (керується [data-density]) ──────────────────────────────── */ --card-pad: 20px; --list-gap: 14px; } /* Темна - перевизначає лише кольори */ [data-theme="dark"] { --text: #d4d4dd; --text-heading: #f3f3f8; --text-muted: #9a9aa8; --text-faint: #6b6b7a; --border: rgba(255, 255, 255, .09); --border-strong: rgba(255, 255, 255, .16); --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow-md: 0 6px 20px rgba(0, 0, 0, .45); --shadow-lg: 0 18px 48px rgba(0, 0, 0, .6); --up: #34c988; --down: #ff6b6b; } /* ── Напрям × тема: фони/поверхні ─────────────────────────────────────────── */ [data-dir="journal"] { --bg: #faf9f6; --bg-subtle: #f3f1ea; --surface: #efece4; --surface-2: #f7f5f0; --surface-card: #ffffff; --header-bg: rgba(250, 249, 246, .82); --footer-bg: #201e1a; --footer-text: #cfcabf; } [data-dir="journal"][data-theme="dark"] { --bg: #17161b; --bg-subtle: #1d1c22; --surface: #24232b; --surface-2: #1d1c22; --surface-card: #1e1d24; --header-bg: rgba(23, 22, 27, .82); --footer-bg: #0f0e12; --footer-text: #b6b3ad; } [data-dir="arena"] { --bg: #f4f5f8; --bg-subtle: #ebedf3; --surface: #e7eaf2; --surface-2: #f1f3f8; --surface-card: #ffffff; --header-bg: rgba(244, 245, 248, .82); --footer-bg: #161924; --footer-text: #c3c7d4; } [data-dir="arena"][data-theme="dark"] { --bg: #0f1117; --bg-subtle: #151823; --surface: #1c2030; --surface-2: #151823; --surface-card: #161a24; --header-bg: rgba(15, 17, 23, .84); --footer-bg: #0a0c12; --footer-text: #aab0c0; } /* ── Шрифтові пари ────────────────────────────────────────────────────────── */ [data-font="montserrat"] { --font-display: 'Montserrat', sans-serif; --font-body: 'Montserrat', sans-serif; } [data-font="manrope"] { --font-display: 'Manrope', sans-serif; --font-body: 'Manrope', sans-serif; } /* ── Щільність ────────────────────────────────────────────────────────────── */ [data-density="compact"] { --card-pad: 14px; --list-gap: 10px; } [data-density="comfy"] { --card-pad: 6px; --list-gap: 8px; } /* ============================================================================= БАЗА ============================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font: var(--fw-regular) var(--text-md)/var(--leading-normal) var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; transition: background var(--transition-base) var(--ease), color var(--transition-base) var(--ease); } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text-heading); line-height: var(--leading-tight); margin: 8px 0 8px 0; font-weight: var(--fw-bold); letter-spacing: -.01em; text-wrap: balance; } p { margin: 0; text-wrap: pretty; } a { color: inherit; text-decoration: none; } button { font-family: inherit; } img { display: block; max-width: 100%; } ul { margin: 0; padding: 0; list-style: none; } :focus-visible { outline: none; box-shadow: var(--shadow-focus); border-radius: var(--radius-sm); } .wrap { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-6); } /* Білий «аркуш» контенту (рейтинг + категорія) на сірому тлі сторінки. */ /* Хедер і футер мають власний .wrap у .site-header/.site-footer - їх це не зачіпає. */ .pick-main .wrap { background: var(--surface-card); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); padding: var(--space-5); margin-block: var(--space-4); /* Ширина = контенту хедера/меню (.wrap мінус його бічний відступ), щоб краї збіглися */ width: min(100% - 2 * var(--space-6), var(--container) - 2 * var(--space-6)); } .app { min-height: 100vh; display: flex; flex-direction: column; container: pick / inline-size; } .eyebrow { font: var(--fw-bold) var(--text-xs)/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); } .muted { color: var(--text-muted); } .mono { font-family: var(--font-mono); } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } /* ============================================================================= ХЕДЕР / НАВІГАЦІЯ ============================================================================= */ .site-header { position: sticky; top: 0; z-index: var(--z-sticky); border-bottom: 1px solid var(--border); } /* Фон і блюр хедера - на окремому шарі, щоб .site-header не «глушив» blur вкладеного мега-меню */ .site-header::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--header-bg); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); } .header-bar { display: flex; align-items: center; gap: var(--space-5); height: 68px; } /* Вордмарк */ .brand { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; flex-shrink: 0; } .brand-logo { position: relative; display: block; width: 60px; height: 60px; flex-shrink: 0; } .brand-img { position: absolute; top: 0; left: 0; height: 60px; width: auto; } .brand-img-hover { opacity: 0; } .brand:hover .brand-img-base { opacity: 0; } .brand:hover .brand-img-hover { opacity: 1; } .brand-name { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-4xl); color: #374856; letter-spacing: -.02em; } [data-theme="dark"] .brand-name { color: #f7f7f7; } .brand-name b { color: var(--accent); } /* Десктоп-навігація */ .nav { flex: 1; min-width: 0; display: flex; align-items: center; } .nav-list { display: flex; align-items: center; gap: 2px; } .nav-item { position: relative; } .nav-link { display: inline-flex; align-items: center; gap: 7px; padding: 8px 11px; border-radius: var(--radius-md); color: var(--text); font-weight: var(--fw-medium); font-size: var(--text-sm); white-space: nowrap; cursor: pointer; border: 0; background: none; transition: background var(--transition-fast) var(--ease), color var(--transition-fast) var(--ease); } .nav-link .emoji { font-size: 16px; line-height: 1; } .nav-link:hover, .nav-item.open .nav-link { background: var(--surface); color: var(--text-heading); } .nav-link .chev { width: 8px; height: 8px; opacity: .5; } /* «Ще» */ .nav-more { font-weight: var(--fw-semibold); } /* Мега-меню */ .mega { position: absolute; top: calc(100% + 8px); left: 0; min-width: 280px; background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: var(--space-3); z-index: var(--z-dropdown); opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity var(--transition-fast) var(--ease), transform var(--transition-fast) var(--ease); } .nav-item.open .mega { opacity: 1; transform: translateY(0); pointer-events: auto; } .mega-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 6px; } .mega-head .emoji { font-size: 22px; } .mega-head b { font-family: var(--font-display); font-size: var(--text-lg); color: var(--text-heading); } .mega-sub { display: flex; flex-direction: column; } .mega-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 10px; border-radius: var(--radius-md); color: var(--text); font-size: var(--text-sm); cursor: pointer; transition: background var(--transition-fast) var(--ease); } .mega-link:hover { background: var(--surface); color: var(--text-heading); } .mega-link .cnt { font-size: var(--text-xs); color: var(--text-faint); font-variant-numeric: tabular-nums; } /* Меню «Ще» - широке мега */ .mega.mega-wide { min-width: 520px; } .mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; } /* Праві дії */ .header-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; } .icon-btn { width: 40px; height: 40px; border-radius: var(--radius-md); border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; display: grid; place-items: center; font-size: 17px; transition: background var(--transition-fast) var(--ease), border-color var(--transition-fast) var(--ease); } .icon-btn:hover { background: var(--surface); border-color: var(--border-strong); } .btn-login { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 18px; flex-shrink: 0; border: 0; border-radius: var(--radius-pill); background: var(--accent); color: var(--accent-ink); font-weight: var(--fw-semibold); font-size: var(--text-sm); cursor: pointer; box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 36%, transparent); transition: transform var(--transition-fast) var(--ease-spring), filter var(--transition-fast) var(--ease); } .btn-login:hover { transform: translateY(-1px); filter: brightness(1.05); } .btn-login:active { transform: translateY(0); } .burger { display: none; } /* Пошуковий рядок (розкривний) */ .search-bar { display: none; padding: 0 0 var(--space-3); } .search-bar.show { display: block; } .search-input { width: 100%; height: 46px; padding: 0 16px; border-radius: var(--radius-pill); border: 1px solid var(--border-strong); background: var(--surface-card); color: var(--text); font: var(--text-md) var(--font-body); } .search-input::placeholder { color: var(--text-faint); } .search-input:focus { outline: none; box-shadow: var(--shadow-focus); } /* ============================================================================= ГОЛОВНА - ГЕРОЙ ============================================================================= */ .hero { padding: var(--space-16) 0 var(--space-12); position: relative; overflow: hidden; } .hero-inner { max-width: 760px; } .hero h1 { font-size: var(--text-7xl); font-weight: var(--fw-bold); letter-spacing: -.03em; margin-bottom: var(--space-5); } .hero h1 .hl { color: var(--accent); position: relative; white-space: nowrap; } .hero h1 .hl::after { content: ''; position: absolute; left: 0; right: 0; bottom: .08em; height: .14em; background: var(--accent-line); border-radius: 999px; z-index: -1; } .hero-lead { font-size: var(--text-xl); color: var(--text-muted); max-width: 560px; line-height: var(--leading-normal); margin-bottom: var(--space-8); } .hero-cta { display: flex; gap: var(--space-3); flex-wrap: wrap; align-items: center; } .btn-primary { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 26px; border: 0; border-radius: var(--radius-pill); background: var(--accent); color: var(--accent-ink); font: var(--fw-semibold) var(--text-lg) var(--font-body); cursor: pointer; box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 40%, transparent); transition: transform var(--transition-fast) var(--ease-spring), filter var(--transition-fast) var(--ease); } .btn-primary:hover { transform: translateY(-2px); filter: brightness(1.05); } .btn-ghost { display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 22px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface-card); color: var(--text-heading); font: var(--fw-semibold) var(--text-md) var(--font-body); cursor: pointer; transition: background var(--transition-fast) var(--ease), transform var(--transition-fast) var(--ease); } .btn-ghost:hover { background: var(--surface); transform: translateY(-1px); } .hero-stats { display: flex; gap: var(--space-8); margin-top: var(--space-10); flex-wrap: wrap; } .hero-stat b { display: block; font-family: var(--font-display); font-size: var(--text-3xl); color: var(--text-heading); font-weight: var(--fw-bold); } .hero-stat span { font-size: var(--text-sm); color: var(--text-muted); } /* Декоративні «бали» героя (тільки arena) */ .hero-orbs { display: none; } [data-dir="arena"] .hero-orbs { display: block; position: absolute; inset: 0; z-index: -1; pointer-events: none; } [data-dir="arena"] .hero-orbs i { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; } [data-dir="arena"] .hero-orbs i:nth-child(1){ width: 360px; height: 360px; right: -60px; top: -40px; background: var(--accent); } [data-dir="arena"] .hero-orbs i:nth-child(2){ width: 280px; height: 280px; right: 220px; top: 120px; background: var(--up); opacity: .28; } /* ============================================================================= СЕКЦІЇ ============================================================================= */ .section { padding: var(--space-3) 0; } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-3); flex-wrap: wrap; } .section-head h2 { font-size: var(--text-4xl); } .section-head .section-sub { color: var(--text-muted); font-size: var(--text-md); margin-top: 4px; } .section-link { color: var(--accent); font-weight: var(--fw-semibold); font-size: var(--text-sm); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; } .section-link:hover { text-decoration: underline; } /* ── Плитка категорій ─────────────────────────────────────────────────────── */ .tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); } .tile { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border-radius: var(--radius-xl); cursor: pointer; overflow: hidden; border: 1px solid var(--border); background: var(--surface-card); color: var(--text-heading); min-height: 132px; text-align: left; transition: transform var(--transition-fast) var(--ease-spring), box-shadow var(--transition-fast) var(--ease), border-color var(--transition-fast) var(--ease); } .tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--border-strong); } .tile-emoji { font-size: 30px; line-height: 1; width: 52px; height: 52px; border-radius: var(--radius-lg); display: grid; place-items: center; background: var(--surface); } .tile-icon { width: 52px; height: 52px; border-radius: var(--radius-lg); display: grid; place-items: center; background: rgba(255, 255, 255, .18); } .tile-icon .nav-icon { width: 28px; height: 28px; background-color: #fff; } .tile-name { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-lg); letter-spacing: -.01em; } .tile-meta { font-size: var(--text-xs); color: var(--text-muted); display: flex; align-items: center; gap: 6px; margin-top: auto; } .tile-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--text-faint); } .tile-arrow { position: absolute; top: var(--space-5); right: var(--space-5); opacity: 0; color: var(--accent); transform: translateX(-4px); transition: opacity var(--transition-fast), transform var(--transition-fast); } .tile:hover .tile-arrow { opacity: 1; transform: translateX(0); } /* Напрям «arena» - кольорові градієнтні плитки */ [data-tiles="gradient"] .tile { color: #fff; border: 0; background: var(--tile-grad, var(--accent)); } [data-tiles="gradient"] .tile .tile-emoji { background: rgba(255, 255, 255, .18); } [data-tiles="gradient"] .tile .tile-meta { color: rgba(255, 255, 255, .82); } [data-tiles="gradient"] .tile .tile-meta .dot { background: rgba(255, 255, 255, .6); } [data-tiles="gradient"] .tile .tile-arrow { color: #fff; } [data-tiles="gradient"] .tile:hover { box-shadow: var(--shadow-lg); } /* Напрям «outline» - тонкі обводки */ [data-tiles="outline"] .tile { background: transparent; } [data-tiles="outline"] .tile .tile-emoji { background: var(--accent-soft); } /* ============================================================================= ГАРЯЧІ ГОЛОСУВАННЯ / ТОП ТИЖНЯ (стрічка) ============================================================================= */ .hot-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-4); } .hot-card { position: relative; border: 1px solid var(--border); border-radius: var(--radius-2xl); background: var(--surface-card); padding: var(--card-pad); overflow: hidden; display: flex; flex-direction: column; gap: var(--space-3); } .hot-card .badge-live { align-self: flex-start; } .hot-card h3 { font-size: var(--text-2xl); } .hot-list { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; } .hot-row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: var(--radius-md); transition: background var(--transition-fast); cursor: pointer; } .hot-row:hover { background: var(--surface); } .hot-rank { font-family: var(--font-display); font-weight: var(--fw-bold); width: 22px; color: var(--text-faint); font-variant-numeric: tabular-nums; } .hot-row .ph { width: 34px; height: 34px; border-radius: var(--radius-sm); flex-shrink: 0; } .hot-row .nm { flex: 1; font-weight: var(--fw-medium); color: var(--text-heading); font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hot-row .sc { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--up); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; } .hot-row .hot-ic { width: 34px; height: 34px; flex-shrink: 0; display: grid; place-items: center; } .hot-row .hot-ic .nav-icon { width: 26px; height: 26px; background-color: var(--accent); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .hot-row .sc .meta-ic { width: 14px; height: 14px; background-color: var(--up); flex-shrink: 0; display: inline-block; } .hot-row .hot-thumb { width: 34px; height: 34px; border-radius: var(--radius-sm); flex-shrink: 0; background-size: cover; background-position: center; background-repeat: no-repeat; } .hot-row .sc .nav-icon { width: 15px; height: 15px; background-color: var(--up); flex-shrink: 0; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; } .badge-live { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-2xs); font-weight: var(--fw-bold); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); padding: 5px 10px; border-radius: var(--radius-pill); } .badge-live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--accent); animation: pulse 1.8s var(--ease) infinite; } @keyframes pulse { 0%{ box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 60%, transparent);} 70%{ box-shadow: 0 0 0 8px transparent;} 100%{ box-shadow: 0 0 0 0 transparent;} } /* ============================================================================= СТОРІНКА РЕЙТИНГУ ============================================================================= */ .breadcrumb { display: flex; align-items: center; gap: 8px; padding: var(--space-3) 0 0; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); } .breadcrumb a { cursor: pointer; color: var(--text-faint); } .breadcrumb a:hover { color: var(--accent); } .breadcrumb a.current, .breadcrumb .current { color: var(--accent); } .breadcrumb .sep { color: var(--text-faint); opacity: .7; } /* Сторінка рейтингу: заголовок на всю ширину + 70/30 (текст + картинка) */ .rating-h1 { font-size: var(--text-5xl); letter-spacing: -.02em; padding: var(--space-3) 0 var(--space-4); } .rating-layout { display: block; } .rating-layout.with-pic { display: grid; grid-template-columns: 7fr 3fr; gap: 4px; align-items: start; margin-bottom: 12px; } .rating-main { min-width: 0; } .rating-aside { min-width: 0; } .rating-pic { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius-2xl); background-size: cover; background-position: center; background-repeat: no-repeat; } .rating-lead { color: var(--text-heading); font-size: var(--text-xl); line-height: var(--leading-snug); margin-bottom: var(--space-4); } .rating-meta { display: flex; gap: var(--space-5); margin-bottom: var(--space-4); flex-wrap: wrap; } .rating-meta span { font-size: var(--text-sm); color: var(--text-muted); display: inline-flex; align-items: center; gap: 7px; } .rating-meta b { color: var(--text-heading); font-weight: var(--fw-semibold); } .rating-meta .meta-ic { width: 18px; height: 18px; background-color: var(--accent); flex-shrink: 0; } /* Текст рейтингу обрізається до висоти картинки + "Читати далі" */ .rating-layout.with-pic .rating-main { position: relative; overflow: hidden; transition: max-height .4s var(--ease); } .rating-layout.with-pic .rating-main.has-more:not(.expanded)::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--surface-card) 82%); } .rating-main .read-more { display: none; } .rating-main.has-more { padding-bottom: 4px; } .rating-main.has-more .read-more { display: block; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; text-align: center; } @media (prefers-reduced-motion: reduce) { .rating-layout.with-pic .rating-main { transition: none; } } /* Смуга-заклик до голосування (між описом рейтингу і списком номінантів) */ .vote-callout { display: flex; align-items: center; justify-content: center; gap: var(--space-3); flex-wrap: wrap; text-align: center; margin: var(--space-4) 0; padding: var(--space-4) var(--space-3); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); } .vote-callout-ic { flex-shrink: 0; width: 24px; height: 24px; background-color: var(--accent); -webkit-mask: url(icons/priority-arrows.svg) center / contain no-repeat; mask: url(icons/priority-arrows.svg) center / contain no-repeat; } .vote-callout-text { margin: 0; font-size: var(--text-md); color: var(--text); line-height: var(--leading-snug); } .vote-callout-text b { color: var(--accent); font-weight: var(--fw-bold); } /* Панель сортування / фільтр */ .rating-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) 0 var(--space-5); flex-wrap: wrap; } .seg { display: inline-flex; padding: 3px; background: var(--surface); border-radius: var(--radius-pill); border: 1px solid var(--border); } .seg button { border: 0; background: none; padding: 7px 14px; border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--text-muted); cursor: pointer; transition: all var(--transition-fast) var(--ease); } .seg button[aria-pressed="true"] { background: var(--surface-card); color: var(--text-heading); box-shadow: var(--shadow-sm); } .toolbar-note { font-size: var(--text-sm); color: var(--text-faint); } /* ── КАРТКА ПРЕТЕНДЕНТА (головний компонент) ──────────────────────────────── */ .rank-list { display: flex; flex-direction: column; gap: var(--list-gap); } .contender { position: relative; display: grid; grid-template-columns: 25% 1fr auto; gap: var(--space-4); align-items: stretch; padding: var(--card-pad); border: 1px solid var(--border); border-radius: var(--radius-2xl); background: var(--surface-card); box-shadow: var(--shadow-sm); transition: box-shadow var(--transition-fast) var(--ease), border-color var(--transition-fast) var(--ease), transform var(--transition-base) var(--ease); } .contender:hover { box-shadow: var(--shadow-md); border-color: var(--border-strong); } .contender.voted-up { border-color: color-mix(in srgb, var(--up) 45%, var(--border)); } .contender.voted-down { border-color: color-mix(in srgb, var(--down) 40%, var(--border)); } /* Ранг */ .rank { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; } .rank-num { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-3xl); color: var(--text-faint); font-variant-numeric: tabular-nums; line-height: 1; } .rank-delta { font-size: var(--text-2xs); font-weight: 700; display: inline-flex; align-items: center; gap: 2px; } .rank-delta.up { color: var(--up); } .rank-delta.down { color: var(--down); } .rank-delta.same { color: var(--text-faint); } /* Медаль топ-3 - стиль solid */ .medal { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-xl); color: #3a2c00; box-shadow: inset 0 1px 1px rgba(255,255,255,.6), 0 4px 12px rgba(0,0,0,.18); } .medal.gold { background: radial-gradient(circle at 32% 28%, var(--gold-2), var(--gold)); } .medal.silver { background: radial-gradient(circle at 32% 28%, var(--silver-2), var(--silver)); color: #2c2f38; } .medal.bronze { background: radial-gradient(circle at 32% 28%, var(--bronze-2), var(--bronze)); color: #3a2310; } /* Стиль minimal - кольоровий номер замість значка */ [data-medals="minimal"] .medal { background: none; box-shadow: none; width: auto; height: auto; font-size: var(--text-4xl); } [data-medals="minimal"] .medal.gold { color: var(--gold); } [data-medals="minimal"] .medal.silver { color: var(--silver); } [data-medals="minimal"] .medal.bronze { color: var(--bronze); } /* Фото / плейсхолдер з літерою */ .avatar { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; position: relative; align-self: flex-start; } /* Номер-бейдж у куті фото: топ-3 пастельні градієнти, решта світло-сірий */ .rank-badge { position: absolute; left: 0; bottom: 0; z-index: 2; min-width: 70px; padding: 4px 14px 2px; text-align: center; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-5xl); line-height: 1.7; color: #f4f5f8; text-shadow: 0 2px 8px rgba(0, 0, 0, .6); border-top-right-radius: var(--radius-lg); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); background: linear-gradient(135deg, rgba(246, 246, 249, .55), rgba(227, 227, 234, .5)); } .rank-badge.rank-gold { background: linear-gradient(135deg, rgba(253, 241, 204, .6), rgba(246, 217, 133, .6)); } .rank-badge.rank-silver { background: linear-gradient(135deg, rgba(241, 242, 246, .6), rgba(216, 219, 225, .6)); } .rank-badge.rank-bronze { background: linear-gradient(135deg, rgba(247, 227, 208, .6), rgba(230, 179, 137, .6)); } .rank-badge.rank-plain { background: linear-gradient(135deg, rgba(246, 246, 249, .55), rgba(227, 227, 234, .5)); } .avatar .ph-letter { width: 100%; height: 100%; display: grid; place-items: center; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 34px; color: #fff; letter-spacing: -.02em; } .avatar .ph-img { width: 100%; height: 100%; position: relative; background-image: repeating-linear-gradient(45deg, var(--surface) 0 8px, var(--surface-2) 8px 16px); } .avatar .ph-img span { position: absolute; inset: auto 4px 4px 4px; font-family: var(--font-mono); font-size: 8px; color: var(--text-faint); text-align: center; } /* Тіло картки */ .contender-body { min-width: 0; position: relative; overflow: hidden; transition: max-height .4s var(--ease); } /* Згортання тексту до висоти фото + "Читати далі" на градієнті */ .contender.has-more:not(.expanded) .contender-body::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 64px; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--surface-card) 82%); } .read-more { display: none; border: 0; background: none; cursor: pointer; padding: 6px 0 0; color: var(--text-muted); font-weight: var(--fw-semibold); font-size: var(--text-sm); } .read-more:hover { color: var(--accent); } .read-more .rm-ic { display: inline-block; width: 22px; height: 22px; vertical-align: middle; background-color: currentColor; -webkit-mask: url(icons/angle-down.svg) center / contain no-repeat; mask: url(icons/angle-down.svg) center / contain no-repeat; } .contender.expanded .read-more .rm-ic, .rating-main.expanded .read-more .rm-ic { -webkit-mask-image: url(icons/angle-up.svg); mask-image: url(icons/angle-up.svg); } .contender.has-more .read-more { display: block; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; text-align: center; } .contender.has-more .contender-body { padding-bottom: 30px; } @media (prefers-reduced-motion: reduce) { .contender-body { transition: none; } } .contender-title { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .contender-title h3 { font-size: var(--text-2xl); font-weight: var(--fw-bold); letter-spacing: -.01em; } .contender-title .year { font-size: var(--text-sm); color: var(--text-faint); font-family: var(--font-mono); } .tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 6px; } .tag { font-size: var(--text-2xs); font-weight: var(--fw-semibold); padding: 3px 9px; border-radius: var(--radius-pill); background: var(--surface); color: var(--text-muted); } .tag.ua { background: var(--accent-soft); color: var(--accent); } .contender-desc { color: var(--text-muted); font-size: var(--text-sm); line-height: var(--leading-normal); max-width: 60ch; } .contender-desc strong { color: var(--text-heading); font-weight: var(--fw-semibold); } .contender-desc em { font-style: italic; } .contender-desc ul { margin: 6px 0 0; padding-left: 0; display: flex; flex-direction: column; gap: 3px; } .contender-desc li { position: relative; padding-left: 18px; } .contender-desc li::before { content: '▸'; position: absolute; left: 2px; color: var(--accent); } /* Блок голосування */ .vote-block { display: flex; flex-direction: column; align-items: center; align-self: center; gap: 6px; min-width: 96px; } .score { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--text-xl); color: var(--text-heading); font-variant-numeric: tabular-nums; line-height: 1; transition: transform var(--transition-base) var(--ease-spring), color var(--transition-fast); } .score.bump { transform: scale(1.22); } .score.bump.up-c { color: var(--up); } .score.bump.down-c { color: var(--down); } .score-label { font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: .1em; color: var(--text-faint); font-weight: var(--fw-bold); } .vote-buttons { display: flex; gap: 8px; margin-top: 4px; } .vote-btn { width: 46px; height: 46px; border-radius: var(--radius-lg); border: 1px solid var(--border-strong); background: var(--surface-card); cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; color: var(--text-muted); position: relative; overflow: hidden; transition: transform var(--transition-fast) var(--ease-spring), background var(--transition-fast) var(--ease), border-color var(--transition-fast) var(--ease), color var(--transition-fast) var(--ease); } .vote-btn .arrow { font-size: 16px; line-height: 1; } .vote-btn .n { font-size: 9px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; } .vote-btn:hover { transform: translateY(-2px); } .vote-btn.up:hover { border-color: var(--up); color: var(--up); background: var(--up-soft); } .vote-btn.down:hover { border-color: var(--down); color: var(--down); background: var(--down-soft); } .vote-btn.up.active { border-color: var(--up); color: #fff; background: var(--up); box-shadow: 0 4px 12px var(--up-soft); } .vote-btn.down.active { border-color: var(--down); color: #fff; background: var(--down); box-shadow: 0 4px 12px var(--down-soft); } .vote-btn:active { transform: scale(.92); } /* спалах при голосуванні */ .vote-btn .flash { position: absolute; inset: 0; border-radius: inherit; opacity: 0; } .vote-btn.pop .flash { animation: voteflash .5s var(--ease); } @keyframes voteflash { 0%{ opacity: .5; transform: scale(.4);} 100%{ opacity: 0; transform: scale(1.4);} } .vote-btn.up .flash { background: var(--up); } .vote-btn.down .flash { background: var(--down); } /* Іконка на кнопці (фарбується кольором кнопки) */ .vote-btn .vote-ic { width: 20px; height: 20px; background-color: currentColor; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } /* Лейбл над числом (балів: / голосів:) */ .score-wrap { text-align: center; } .score-top { font-size: var(--text-md); text-transform: uppercase; letter-spacing: .1em; color: var(--text-faint); font-weight: 700; } /* Числа за/проти під кнопками - лише після голосу */ .vote-btns-wrap { position: relative; } .vote-counts { position: absolute; top: 100%; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; margin-top: 2px; opacity: 0; transform: translateY(-10px); visibility: hidden; transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s var(--ease); } .contender.voted-up .vote-counts, .contender.voted-down .vote-counts { opacity: 1; transform: translateY(0); visibility: visible; } @media (prefers-reduced-motion: reduce) { .vote-counts { transition: none; } } .vc-up, .vc-down { width: 46px; text-align: center; font-size: var(--text-sm); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; } .vc-up { color: var(--up); } .vc-down { color: var(--down); } /* «вже проголосовано» підказка */ .contender .voted-flag { position: absolute; top: 12px; right: 16px; font-size: var(--text-2xs); font-weight: var(--fw-bold); color: var(--up); opacity: 0; transition: opacity var(--transition-fast); } .contender.voted-up .voted-flag, .contender.voted-down .voted-flag { opacity: 1; } .contender.voted-down .voted-flag { color: var(--down); } /* Кнопка «показати ще» */ .load-more { display: flex; justify-content: center; padding: var(--space-4) 0; } /* ============================================================================= ФУТЕР ============================================================================= */ .site-footer { margin-top: auto; background: var(--footer-bg); color: var(--footer-text); padding: var(--space-12) 0 var(--space-8); } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--space-8); } .footer-brand .brand-name { color: #fff; } .footer-about { font-size: var(--text-sm); line-height: var(--leading-normal); margin-top: var(--space-3); max-width: 36ch; opacity: .8; } .footer-col h4 { color: #fff; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: .08em; margin-bottom: var(--space-3); opacity: .7; font-family: var(--font-body); font-weight: var(--fw-bold); } .footer-col a { display: block; padding: 5px 0; font-size: var(--text-sm); opacity: .8; cursor: pointer; transition: opacity var(--transition-fast), color var(--transition-fast); } .footer-col a:hover { opacity: 1; color: var(--accent); } .footer-social { display: flex; gap: 10px; margin-top: var(--space-4); } .footer-social a { width: 38px; height: 38px; border-radius: var(--radius-md); background: rgba(255,255,255,.08); display: grid; place-items: center; font-size: 16px; opacity: .9; } .footer-social a:hover { background: var(--accent); color: var(--accent-ink); opacity: 1; } .footer-bottom { margin-top: var(--space-10); padding-top: var(--space-5); border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; font-size: var(--text-xs); opacity: .65; } /* ============================================================================= МОБІЛЬНИЙ ОФКЕНВАС ============================================================================= */ .scrim { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: var(--z-overlay); opacity: 0; pointer-events: none; transition: opacity var(--transition-base) var(--ease); } .scrim.show { opacity: 1; pointer-events: auto; } .offcanvas { position: fixed; top: 0; right: 0; bottom: 0; width: min(86vw, 360px); z-index: var(--z-modal); background: var(--surface-card); transform: translateX(100%); transition: transform var(--transition-base) var(--ease); display: flex; flex-direction: column; box-shadow: var(--shadow-lg); } .offcanvas.show { transform: translateX(0); } .offcanvas-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); } .offcanvas-body { overflow-y: auto; padding: var(--space-3); flex: 1; } .oc-link { display: flex; align-items: center; gap: 12px; padding: 13px 12px; border-radius: var(--radius-md); color: var(--text); cursor: pointer; font-weight: var(--fw-medium); } .oc-link:hover { background: var(--surface); } .oc-link .emoji { font-size: 20px; } .oc-link .cnt { margin-left: auto; font-size: var(--text-xs); color: var(--text-faint); } .offcanvas-foot { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border); } /* ============================================================================= ПЕРЕМИКАЧ ПРИСТРОЮ (хром прототипу) ============================================================================= */ .proto-switch { position: fixed; left: 16px; bottom: 16px; z-index: var(--z-toast); display: inline-flex; align-items: center; gap: 2px; padding: 4px; background: color-mix(in srgb, var(--surface-card) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--border); border-radius: var(--radius-pill); box-shadow: var(--shadow-lg); } .proto-switch button { border: 0; background: none; padding: 8px 14px; border-radius: var(--radius-pill); font: var(--fw-semibold) var(--text-sm) var(--font-body); color: var(--text-muted); cursor: pointer; } .proto-switch button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); } /* Телефонна рамка - той самий DOM, контейнер 390px вмикає мобільну розкладку */ body.device-mobile { background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent) 10%, #0c0c10), #0c0c10 60%); padding: 34px 0 92px; min-height: 100vh; } body.device-mobile .app { width: 390px; max-width: 94vw; height: min(820px, calc(100vh - 150px)); margin: 0 auto; overflow-y: auto; overflow-x: hidden; border-radius: 40px; position: relative; scrollbar-width: none; box-shadow: 0 0 0 12px #16161c, 0 0 0 14px #34343e, 0 44px 90px rgba(0,0,0,.6); } body.device-mobile .app::-webkit-scrollbar { display: none; } body.device-mobile .site-footer { border-radius: 0 0 28px 28px; } /* ============================================================================= ВХІД (мікро-екран входу в модалці) ============================================================================= */ .modal-scrim { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: var(--z-modal); display: none; align-items: center; justify-content: center; padding: var(--space-4); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } .modal-scrim.show { display: flex; } .modal { width: 100%; max-width: 380px; background: var(--surface-card); border-radius: var(--radius-3xl); padding: var(--space-8); box-shadow: var(--shadow-lg); border: 1px solid var(--border); } .modal h3 { font-size: var(--text-3xl); margin-bottom: var(--space-2); } .modal p { color: var(--text-muted); font-size: var(--text-sm); margin-bottom: var(--space-6); } .modal .field { width: 100%; height: 48px; padding: 0 16px; margin-bottom: var(--space-3); border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-2); color: var(--text); font: var(--text-md) var(--font-body); } .modal .field:focus { outline: none; box-shadow: var(--shadow-focus); } .modal .btn-primary { width: 100%; justify-content: center; height: 48px; margin-top: var(--space-2); } .modal-close { float: right; cursor: pointer; color: var(--text-faint); font-size: 20px; } /* ============================================================================= КНОПКА «НАГОРУ» + ПОЯВА ПРИ ПРОКРУТЦІ ============================================================================= */ .to-top { position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: 90; width: 46px; height: 46px; display: grid; place-items: center; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-card); color: var(--text-heading); cursor: pointer; box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: translateY(12px); pointer-events: none; transition: opacity var(--transition-base) var(--ease), transform var(--transition-base) var(--ease), background var(--transition-fast) var(--ease), border-color var(--transition-fast) var(--ease), color var(--transition-fast) var(--ease); } .to-top.visible { opacity: 1; visibility: visible; transform: none; pointer-events: auto; } .to-top:hover { background: var(--surface); border-color: var(--accent); color: var(--accent); transform: translateY(-2px); } .to-top:active { transform: translateY(0); } .to-top-ic { display: block; width: 22px; height: 22px; background-color: currentColor; -webkit-mask: url(icons/chevron-double-up.svg) center / contain no-repeat; mask: url(icons/chevron-double-up.svg) center / contain no-repeat; } /* Поява при прокрутці: початковий «прихований» стан вмикається лише за наявності JS */ .js-reveal .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s var(--ease), transform .6s var(--ease); will-change: opacity, transform; } .js-reveal .reveal.in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .js-reveal .reveal { opacity: 1; transform: none; transition: none; } .to-top { transition: opacity var(--transition-base) linear; } } /* ============================================================================= АДАПТИВ ============================================================================= */ @media (max-width: 1100px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); } .hot-grid { grid-template-columns: 1fr; } } @media (max-width: 960px) { .nav { display: none; } .burger { display: grid; } .hero h1 { font-size: var(--text-6xl); } } @media (max-width: 760px) { .wrap { padding-inline: var(--space-4); } .header-bar { height: 60px; gap: var(--space-3); } .btn-login span { display: none; } .btn-login { padding: 0; width: 40px; justify-content: center; } .hero { padding: var(--space-10) 0 var(--space-8); } .hero h1 { font-size: var(--text-5xl); } .hero-lead { font-size: var(--text-lg); } .section { padding: var(--space-3) 0; } .section-head h2 { font-size: var(--text-3xl); } .tiles { grid-template-columns: repeat(2, 1fr); gap: var(--space-2); } .tile { min-height: 116px; padding: var(--space-4); } /* Картка претендента → мобільна сітка */ .contender { grid-template-columns: 110px 1fr; grid-template-areas: "avatar body" "vote vote"; gap: var(--space-3); padding: var(--space-4); } .avatar { grid-area: avatar; width: 110px; } .rank-badge { font-size: var(--text-2xl); min-width: 34px; padding: 2px 9px 1px; } .contender-body { grid-area: body; } .vote-block { grid-area: vote; flex-direction: row; min-width: 0; justify-content: space-between; width: 100%; padding-top: var(--space-3); border-top: 1px solid var(--border); margin-top: 4px; } .vote-block .score-wrap { display: flex; align-items: center; gap: 5px; } .vote-buttons { margin-top: 0; } .vote-btn { width: 56px; height: 44px; flex-direction: row; gap: 6px; } .vote-btn .arrow { font-size: 18px; } .vote-btn .n { font-size: 12px; } .contender-title h3 { font-size: var(--text-xl); } .rating-h1 { font-size: var(--text-4xl); } .rating-layout.with-pic { grid-template-columns: 1fr; } .rating-aside { order: -1; } } @media (max-width: 480px) { .tiles { grid-template-columns: 1fr 1fr; } .footer-grid { grid-template-columns: 1fr; } } /* Доступність: менше руху */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }