/* ============================================================ BLACK FRIDAY 2026 · GYMS CRM — black-friday.css (повна збірка) Шрифти підключати в перед цим файлом: Unbounded 500/700/900 · Manrope 500–800 · JetBrains Mono 600–800 ============================================================ */ /* ---------- 01 · Токени ---------- */ :root { --bg-0: #05030C; --bg-1: #07040E; --bg-2: #0D0720; --bg-3: #180D33; --bg-4: #221240; --accent: #6C3EF4; --accent-soft: #8B5CF6; --accent-light: #B79CFF; --pumpkin: #FF8A3C; --pumpkin-light: #FFB35C; --green: #7CFA6B; --moon: #9FC2FF; --moon-white: #C9D8FF; --pink: #E5539B; --text: #F2ECFF; --text-2: #C4B5E8; --text-3: #9F8FC4; --text-dim: #8B7BB8; --text-mono-dim: #6F5FA0; --card-bg: rgba(16, 9, 34, .5); --card-border: rgba(183, 156, 255, .14); --chip-bg: rgba(10, 5, 22, .6); --f-display: 'Unbounded', sans-serif; --f-body: 'Manrope', sans-serif; --f-mono: 'JetBrains Mono', monospace; --ease-wheel: cubic-bezier(.12, .8, .2, 1); } /* ---------- 02 · Reset / base ---------- */ *, *::before, *::after { box-sizing: border-box } html { scroll-behavior: smooth } body { margin: 0; background: var(--bg-1); color: var(--text); font: 500 16px/1.6 var(--f-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg, canvas { display: block; max-width: 100% } a { color: var(--accent-light); text-decoration: none } a:hover { color: var(--pumpkin-light) } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0 } ::selection { background: rgba(108, 62, 244, .55); color: #fff } :focus-visible { outline: 2px solid var(--accent-light); outline-offset: 3px; border-radius: 8px } ::-webkit-scrollbar { width: 10px } ::-webkit-scrollbar-track { background: var(--bg-0) } ::-webkit-scrollbar-thumb { background: #2A1850; border-radius: 5px } /* ---------- 03 · Утиліти ---------- */ .bf-wrap { max-width: 1180px; margin-inline: auto; padding-inline: clamp(20px, 4vw, 48px) } .bf-eyebrow { display: inline-flex; padding: 7px 14px; border-radius: 999px; border: 1px solid rgba(183, 156, 255, .3); background: rgba(108, 62, 244, .12); font: 600 12px var(--f-mono); letter-spacing: 2.5px; color: #CBB6FF; } .bf-kicker { font: 600 11px var(--f-mono); letter-spacing: 2px; color: var(--text-mono-dim); text-transform: uppercase } .vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0 } .bf-skip { position: absolute; left: 12px; top: -52px; z-index: 99; padding: 10px 16px; border-radius: 10px; background: var(--accent); color: #fff; font: 700 13px var(--f-body); transition: top .2s } .bf-skip:focus { top: 12px } .bf-vignette { position: relative } .bf-vignette::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 220px 60px rgba(2, 1, 7, .9); } .bf-par { transform: translate3d(calc(var(--mx, 0px)*var(--depth, 0)), calc(var(--my, 0px)*var(--depth, 0)), 0); will-change: transform; } .bf-par--sky { --depth: .02 } .bf-par--decor { --depth: .06 } .bf-par--main { --depth: .12 } .bf-toast { position: fixed; left: 50%; bottom: 26px; transform: translate(-50%, 20px); opacity: 0; z-index: 90; padding: 12px 18px; border-radius: 12px; background: rgba(16, 9, 34, .95); border: 1px solid rgba(183, 156, 255, .35); font: 600 13px var(--f-body); color: var(--text); transition: .3s; pointer-events: none; max-width: 90vw; text-align: center; } .bf-toast.is-show { opacity: 1; transform: translate(-50%, 0) } /* ---------- 04 · Кнопки ---------- */ .bf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 999px; font: 700 16px var(--f-display); letter-spacing: 1.5px; padding: 18px 44px; transition: transform .18s ease, filter .18s ease, box-shadow .18s ease; } .bf-btn--primary { color: #fff; background: linear-gradient(120deg, var(--accent), #A855F7 55%, var(--pumpkin)); box-shadow: 0 0 42px rgba(139, 92, 246, .55), inset 0 0 20px rgba(255, 255, 255, .16); animation: bfPulse 3.4s ease-in-out infinite; } .bf-btn--ghost { color: var(--accent-light); border: 1px solid rgba(183, 156, 255, .4); background: rgba(108, 62, 244, .08); padding: 14px 30px; font-size: 14px; } @media(hover:hover) { .bf-btn--primary:hover { filter: brightness(1.07); transform: translateY(-1px) } .bf-btn--ghost:hover { border-color: var(--accent-light); color: var(--text) } } .bf-btn:disabled { opacity: .4; pointer-events: none } .bf-snd { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .15); color: var(--text-3); font-size: 16px; flex: none; } @media(hover:hover) { .bf-snd:hover { color: var(--text); border-color: rgba(255, 255, 255, .4) } } /* ---------- 05 · Топбар ---------- */ .bf-top { position: absolute; inset: 0 0 auto 0; z-index: 6; display: flex; align-items: center; justify-content: space-between; padding: 22px clamp(20px, 4vw, 48px); } .bf-logo { display: flex; align-items: center; gap: 10px; font: 800 16px var(--f-body); color: var(--text) } .bf-logo span { color: var(--text-dim) } .bf-logo svg { filter: drop-shadow(0 0 6px rgba(229, 83, 155, .5)) } /* ---------- 06 · Декор сцени ---------- */ .bf-hero__decor, .bf-game__decor { position: absolute; inset: 0; pointer-events: none; overflow: hidden } .bf-hero__decor { z-index: 1 } .bf-game__decor { z-index: 0 } .bf-moon { position: absolute; width: 112px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 36%, #F6F8FF, var(--moon-white) 72%); box-shadow: 0 0 90px 34px rgba(201, 216, 255, .25), 0 0 24px 6px rgba(240, 244, 255, .5); } .bf-moon::before, .bf-moon::after { content: ""; position: absolute; border-radius: 50%; background: rgba(160, 178, 220, .38) } .bf-moon::before { left: 24%; top: 30%; width: 16px; height: 16px } .bf-moon::after { left: 56%; top: 56%; width: 10px; height: 10px } .bf-fog { position: absolute; left: -10%; bottom: -60px; width: 120%; height: 280px; filter: blur(26px); pointer-events: none; background: radial-gradient(55% 90% at 50% 100%, rgba(108, 62, 244, .26), transparent 70%); animation: bfDrift var(--dur, 24s) linear infinite alternate; } .bf-fog--warm { background: radial-gradient(50% 85% at 60% 100%, rgba(255, 138, 60, .13), transparent 70%); animation-direction: alternate-reverse; --dur: 30s; } .bf-hills { position: absolute; left: 0; right: 0; bottom: -2px; width: 100%; height: clamp(150px, 24vh, 250px); pointer-events: none; } .bf-web { position: absolute; opacity: .75; pointer-events: none } .bf-web--r { transform: scaleX(-1) } .bf-bat { position: absolute; pointer-events: none; animation: bfFloat 7.5s ease-in-out infinite } .bf-spark { position: absolute; border-radius: 50%; pointer-events: none; background: var(--c, #B79CFF); box-shadow: 0 0 8px 1px var(--c, #B79CFF); animation: bfPulse 3.6s ease-in-out infinite; } .bf-pumpkin { position: absolute; pointer-events: none; filter: drop-shadow(0 4px 20px rgba(255, 138, 60, .35)) } .bf-flick { animation: bfFlick 3.2s infinite } .bf-candle { position: absolute; width: 20px; pointer-events: none } .bf-candle__flame { width: 10px; height: 16px; margin: 0 auto; border-radius: 50% 50% 50% 50%/62% 62% 38% 38%; background: radial-gradient(circle at 50% 35%, #FFF3D6, #FFB554 75%, rgba(255, 181, 84, 0)); box-shadow: 0 0 18px 7px rgba(255, 180, 84, .45); animation: bfFlick 2.8s infinite; } .bf-candle__wax { width: 14px; height: 30px; margin: -2px auto 0; border-radius: 4px 4px 6px 6px; background: linear-gradient(#EFE4FA, #AC9BD4); } .bf-candle--s { width: 16px } .bf-candle--s .bf-candle__flame { width: 8px; height: 13px } .bf-candle--s .bf-candle__wax { width: 11px; height: 20px } /* ---------- 07 · Hero ---------- */ .bf-hero { position: relative; min-height: 100svh; overflow: hidden; background: linear-gradient(180deg, var(--bg-0) 0%, var(--bg-2) 42%, var(--bg-3) 100%); display: grid; align-items: center; } .bf-hero__grid { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 640px); gap: clamp(24px, 4vw, 64px); align-items: center; padding-block: clamp(96px, 14vh, 150px) clamp(56px, 8vh, 96px); } .bf-hero__h1 { margin: 20px 0 0; font: 900 clamp(42px, 6vw, 80px)/0.97 var(--f-display); letter-spacing: -1px } .bf-hero__h1 span { display: block } /* ВАЖЛИВО: градієнт — тільки через background-image (шорткат background неявно скидає background-clip, і текст перетворюється на прямокутник) */ .bf-h1--a, .bf-h1--b { width: max-content; max-width: 100%; color: transparent; -webkit-background-clip: text; background-clip: text; } .bf-h1--a { background-image: linear-gradient(105deg, #F4EDFF 5%, var(--accent-light) 60%, var(--accent-soft) 100%) } .bf-h1--b { background-image: linear-gradient(105deg, var(--accent-light) 0%, var(--pink) 55%, var(--pumpkin) 100%) } .bf-hero__year { margin-top: 10px; font: 700 clamp(17px, 2.4vw, 30px) var(--f-display); color: var(--pumpkin-light); letter-spacing: 12px; -webkit-text-fill-color: var(--pumpkin-light); text-shadow: 0 0 26px rgba(255, 138, 60, .55); } .bf-hero__lead { margin: 24px 0 0; max-width: 430px; font: 500 17px/1.6 var(--f-body); color: var(--text-2); text-wrap: pretty } .bf-hero__dates { display: inline-flex; gap: 6px; flex-wrap: wrap; margin: 16px 0 0; font: 700 14px var(--f-body); color: var(--pumpkin-light) } .bf-hero__dates time { color: var(--text) } .bf-hero__cta { display: flex; align-items: center; gap: 24px; margin-top: 34px } .bf-hero__how { font: 600 14px var(--f-body); color: var(--accent-light) } .bf-hero__scroll { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 4; font: 600 11px var(--f-mono); letter-spacing: 2px; color: var(--text-mono-dim); } .bf-wheelbox { position: relative; width: 100%; aspect-ratio: 1; transform: rotate(-6deg) } .bf-wheelbox::before { content: ""; position: absolute; inset: -4%; border-radius: 50%; box-shadow: 0 0 90px 30px rgba(108, 62, 244, .35); animation: bfPulse 2.6s ease-in-out infinite; } .bf-wheelbox canvas, .bf-wheelbox svg, .bf-wheelbox img { width: 100%; height: 100%; transition: opacity .3s ease, transform .3s ease; } .bf-wheelbox.is-swap canvas { opacity: 0; transform: scale(.96) } .bf-chips { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding: 0; list-style: none } .bf-chip { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .12); background: var(--chip-bg); font: 700 13px var(--f-body); color: var(--text); } .bf-chip i { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--c, var(--pumpkin)); box-shadow: 0 0 10px 2px var(--c, var(--pumpkin)); animation: bfPulse 2.2s ease-in-out infinite; } .bf-hero .bf-kicker { display: block; margin: 46px 0 10px } /* ---------- 08 · Як це працює ---------- */ .bf-how { position: relative; overflow: hidden; padding-block: clamp(64px, 9vw, 110px); background: linear-gradient(180deg, var(--bg-3) 0%, #120A26 60%, #0E0820 100%); text-align: center; } .bf-how__h2, .bf-prizes__h2 { margin: 20px 0 0; font: 700 clamp(28px, 3.6vw, 46px) var(--f-display); color: #F4EDFF } .bf-how__lead { margin: 14px auto 0; max-width: 560px; color: var(--text-3) } .bf-steps { list-style: none; padding: 0; margin: 44px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; text-align: left; } .bf-step { position: relative; border-radius: 18px; padding: 24px; background: var(--card-bg); border: 1px solid var(--card-border); transition: transform .25s ease, border-color .25s ease; } @media(hover:hover) { .bf-step:hover { transform: translateY(-4px); border-color: rgba(183, 156, 255, .35) } } .bf-step__n { display: inline-block; font: 700 12px var(--f-mono); color: #fff; background: var(--accent); padding: 4px 9px; border-radius: 6px; } .bf-step__t { margin: 14px 0 8px; font: 700 18px var(--f-body); color: var(--text) } .bf-step__d { margin: 0; font: 500 14px/1.6 var(--f-body); color: var(--text-3) } /* ---------- 09 · Призи ---------- */ .bf-prizes { position: relative; overflow: hidden; padding-block: clamp(64px, 9vw, 110px); background: linear-gradient(180deg, #0E0820 0%, #0B0618 100%); text-align: center; } .bf-prizes__grid { list-style: none; padding: 0; margin: 44px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; text-align: left; } [data-k="connection"] { --slot-c: #8B5CF6; --slot-rgb: 139, 92, 246 } [data-k="location"] { --slot-c: #FF8A3C; --slot-rgb: 255, 138, 60 } [data-k="support"] { --slot-c: #7CFA6B; --slot-rgb: 124, 250, 107 } [data-k="trial"] { --slot-c: #9FC2FF; --slot-rgb: 159, 194, 255 } .bf-prize { position: relative; overflow: hidden; border-radius: 18px; padding: 22px; background: var(--card-bg); border: 1px solid rgba(var(--slot-rgb), .35); box-shadow: inset 0 0 40px rgba(var(--slot-rgb), .06); } .bf-prize__ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: rgba(var(--slot-rgb), .14); border: 1px solid rgba(var(--slot-rgb), .4); box-shadow: 0 0 14px rgba(var(--slot-rgb), .35); } .bf-prize__ic svg { width: 24px; height: 24px; fill: var(--slot-c) } .bf-prize__t { margin: 14px 0 2px; font: 700 16px var(--f-body); color: var(--text) } .bf-prize__range { margin: 0; font: 700 clamp(22px, 2vw, 26px) var(--f-display); color: var(--slot-c) } .bf-prize__d { margin: 8px 0 0; font: 500 13px/1.55 var(--f-body); color: var(--text-3) } .bf-prize__track { height: 6px; margin-top: 16px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden } .bf-prize__fill { height: 100%; width: var(--left, 50%); border-radius: inherit; background: var(--slot-c); box-shadow: 0 0 10px rgba(var(--slot-rgb), .6); } .bf-prize__left { display: block; margin: 8px 0 0; font: 600 11px var(--f-mono); letter-spacing: 1px; color: var(--text-dim) } .bf-prize--infinite .bf-prize__track, .bf-prize--infinite .bf-prize__left { display: none } .bf-prize__inf { display: inline-block; margin: 16px 0 0; padding: 5px 10px; border-radius: 8px; font: 600 11px var(--f-mono); letter-spacing: 1px; color: var(--slot-c); border: 1px dashed rgba(var(--slot-rgb), .5); } /* ---------- 10 · Умови (секція на головній) ---------- */ .bf-rules { position: relative; padding-block: clamp(56px, 8vw, 90px); background: linear-gradient(180deg, #0B0618, var(--bg-1)) } .bf-rules__list { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; max-width: 720px } .bf-rules__list li { position: relative; padding-left: 22px; font: 500 14px/1.6 var(--f-body); color: var(--text-3); } .bf-rules__list li::before { content: "◆"; position: absolute; left: 0; top: 1px; font-size: 10px; color: var(--accent-light) } .bf-footer { padding: 26px 0 34px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--text-mono-dim); font: 600 12px var(--f-mono) } /* ---------- 11 · Гра (оверлей) ---------- */ .bf-game { position: fixed; inset: 0; z-index: 50; display: none; background: linear-gradient(180deg, rgba(4, 2, 10, .94), rgba(10, 5, 24, .96)); backdrop-filter: blur(8px); overflow: hidden; } .bf-game.is-open { display: grid; grid-template-rows: auto 1fr auto; justify-items: center; padding: 22px } .bf-game[data-drum="connection"] { --drum-c: #8B5CF6; --drum-rgb: 139, 92, 246 } .bf-game[data-drum="location"] { --drum-c: #FF8A3C; --drum-rgb: 255, 138, 60 } .bf-game[data-drum="support"] { --drum-c: #7CFA6B; --drum-rgb: 124, 250, 107 } .bf-game[data-drum="trial"] { --drum-c: #9FC2FF; --drum-rgb: 159, 194, 255 } .bf-game__close { position: absolute; top: 18px; right: 20px; z-index: 5; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .15); color: var(--text-3); font-size: 18px; } @media(hover:hover) { .bf-game__close:hover { color: var(--text); border-color: rgba(255, 255, 255, .4) } } .bf-slots { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 10px; width: min(940px, 94vw); } .bf-slot { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .1); background: rgba(255, 255, 255, .03); opacity: .5; transition: opacity .3s, border-color .3s, background .3s; } .bf-slot__ic { width: 30px; height: 30px; flex: none; display: grid; place-items: center } .bf-slot__ic svg { width: 20px; height: 20px; fill: var(--slot-c) } .bf-slot__tx { min-width: 0 } .bf-slot__t { font: 700 13px var(--f-body); color: var(--text) } .bf-slot__st { display: block; font: 600 9px var(--f-mono); letter-spacing: 1.4px; color: var(--text-dim) } .bf-slot.is-current { opacity: 1; border-color: rgba(var(--slot-rgb), .6); background: rgba(var(--slot-rgb), .14) } .bf-slot.is-current .bf-slot__st { color: var(--slot-c) } .bf-slot.is-done { opacity: 1 } .bf-slot.is-done .bf-slot__st { color: var(--slot-c); font-weight: 800 } .bf-game__stage { position: relative; display: grid; place-items: center; width: 100% } .bf-game__stage .bf-game__wheel { z-index: 2 } .bf-game__wheel { position: relative; width: min(72vmin, 560px); aspect-ratio: 1 } .bf-game__wheel::before { content: ""; position: absolute; inset: -5%; border-radius: 50%; box-shadow: 0 0 90px 34px rgba(var(--drum-rgb, 108, 62, 244), .35); animation: bfPulse 2.6s ease-in-out infinite; transition: box-shadow .6s ease; } .bf-game__wheel canvas { width: 100%; height: 100%; transition: opacity .3s ease, transform .3s ease } .bf-game__wheel.is-swap canvas { opacity: 0; transform: scale(.96) } .bf-reveal { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 4 } .bf-reveal__card { opacity: 0; transform: scale(.8); background: rgba(12, 6, 26, .94); border: 1px solid rgba(var(--drum-rgb, 139, 92, 246), .65); border-radius: 20px; padding: 26px 34px; text-align: center; box-shadow: 0 0 60px rgba(var(--drum-rgb, 139, 92, 246), .4); } .bf-reveal.is-in .bf-reveal__card { animation: bfRevealIn .5s ease-out forwards } .bf-reveal__v { font: 900 clamp(34px, 6vw, 52px) var(--f-display); color: var(--drum-c, var(--accent-light)) } .bf-reveal__sub { margin-top: 4px; font: 600 11px var(--f-mono); letter-spacing: 1.6px; color: var(--text-3) } .bf-reveal__l { margin-top: 6px; font: 600 13px var(--f-mono); letter-spacing: 2px; color: var(--text-2) } .bf-game__foot { display: grid; justify-items: center; gap: 18px; padding-bottom: 8px } .bf-dots { display: flex; gap: 9px } .bf-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .16); transition: background .3s } .bf-dot.is-done { background: var(--c, var(--accent-soft)); box-shadow: 0 0 12px 2px rgba(var(--rgb, 139, 92, 246), .8) } .bf-dot.is-current { background: var(--drum-c); animation: bfPulse 2.2s ease-in-out infinite } .bf-spin { --charge: 0; position: relative; display: grid; place-items: center } .bf-spin__ring { position: absolute; inset: -11px; border-radius: 999px; opacity: 0; transition: opacity .2s; background: conic-gradient(from -90deg, var(--pumpkin-light) calc(var(--charge)*360deg), rgba(255, 255, 255, .1) 0); } .bf-spin.is-held .bf-spin__ring { opacity: 1 } .bf-spin__btn { padding: 20px 56px; border-radius: 999px; color: #fff; font: 700 17px var(--f-display); letter-spacing: 1.5px; background: linear-gradient(120deg, var(--accent), #A855F7 55%, var(--pumpkin)); box-shadow: 0 0 42px rgba(139, 92, 246, .55), inset 0 0 20px rgba(255, 255, 255, .16); animation: bfPulse 3.4s ease-in-out infinite; transition: transform .15s ease, box-shadow .15s ease; touch-action: none; user-select: none; -webkit-user-select: none; } .bf-spin.is-held .bf-spin__btn { transform: scale(.96); animation: none; box-shadow: 0 0 24px rgba(139, 92, 246, .4), inset 0 0 26px rgba(255, 255, 255, .2); } .bf-spin.is-spinning .bf-spin__btn { opacity: .45; pointer-events: none; animation: none } .bf-spin__hint { font: 600 11px var(--f-mono); letter-spacing: 1.6px; color: var(--text-mono-dim); text-align: center } /* ---------- 11.5 · Реєстраційна форма ---------- */ .bf-reg { display: none; grid-row: 1/-1; align-self: center; justify-self: center; width: min(460px, 94vw); max-height: calc(100svh - 44px); overflow: auto; padding: 28px 30px; border-radius: 20px; background: linear-gradient(160deg, rgba(24, 13, 51, .96), rgba(10, 5, 22, .98)); border: 1px solid rgba(183, 156, 255, .3); box-shadow: 0 0 60px rgba(108, 62, 244, .35) } .bf-game[data-step="reg"] .bf-reg { display: block } .bf-game[data-step="reg"] .bf-slots, .bf-game[data-step="reg"] .bf-game__stage, .bf-game[data-step="reg"] .bf-game__foot { display: none } .bf-reg__t { margin: 12px 0 0; font: 700 22px var(--f-display); color: #F4EDFF } .bf-reg__d { margin: 8px 0 4px; font: 500 14px/1.6 var(--f-body); color: var(--text-3) } .bf-field { margin-top: 14px } .bf-field label { display: block; margin-bottom: 6px; font: 600 11px var(--f-mono); letter-spacing: 1.4px; text-transform: uppercase; color: var(--text-dim) } .bf-field input { width: 100%; padding: 13px 15px; border-radius: 12px; color: var(--text); font: 600 15px var(--f-body); background: rgba(255, 255, 255, .05); border: 1px solid rgba(183, 156, 255, .25); transition: border-color .15s, box-shadow .15s } .bf-field input:focus { outline: none; border-color: var(--accent-light); box-shadow: 0 0 0 3px rgba(139, 92, 246, .22) } .bf-field.is-err input { border-color: #FF6B7A; box-shadow: 0 0 0 3px rgba(255, 107, 122, .15) } .bf-field__err { display: none; margin-top: 6px; font: 600 12px var(--f-body); color: #FF9AA6 } .bf-field.is-err .bf-field__err { display: block } .bf-reg__btn { width: 100%; margin-top: 22px; font-size: 15px; padding: 16px 20px } .bf-reg__note { margin: 14px 0 0; text-align: center; font: 500 12px var(--f-body); color: var(--text-dim) } /* ---------- 12 · Фінал / сертифікат ---------- */ .bf-final { position: fixed; inset: 0; z-index: 60; display: none; place-items: center; overflow: auto; background: linear-gradient(180deg, rgba(4, 2, 10, .95), rgba(13, 7, 29, .97)); backdrop-filter: blur(10px); padding: 24px } .bf-final.is-open { display: grid } .bf-cert { position: relative; width: min(560px, 94vw); border-radius: 22px; padding: 34px 38px; background: linear-gradient(160deg, rgba(24, 13, 51, .96), rgba(10, 5, 22, .98)); border: 1px solid rgba(183, 156, 255, .35); box-shadow: 0 0 70px rgba(108, 62, 244, .4); } .bf-final.is-in .bf-cert { animation: bfFinalIn .9s ease-out both } .bf-cert::before { content: ""; position: absolute; inset: 10px; border-radius: 16px; pointer-events: none; border: 1px dashed rgba(255, 255, 255, .14); } .bf-cert__head { text-align: center } .bf-cert__title { margin: 10px 0 0; font: 700 clamp(20px, 3vw, 26px) var(--f-display); color: #F4EDFF } .bf-cert__code { margin: 22px auto 0; padding: 14px; text-align: center; border-radius: 12px; font: 800 clamp(20px, 4.6vw, 30px) var(--f-mono); letter-spacing: 3px; color: var(--pumpkin-light); border: 1px solid rgba(255, 179, 92, .35); background: rgba(255, 138, 60, .08); text-shadow: 0 0 18px rgba(255, 138, 60, .5); } .bf-cert__rows { margin: 22px 0 0 } .bf-cert__rows dd { margin: 0 } .bf-cert__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-top: 1px solid rgba(255, 255, 255, .08); } .bf-cert__row:first-child { border-top: 0 } .bf-cert__lab { display: flex; align-items: center; gap: 10px; font: 600 14px var(--f-body); color: var(--text-2) } .bf-cert__lab svg { width: 18px; height: 18px; fill: var(--slot-c) } .bf-cert__val { font: 800 16px var(--f-body); color: var(--slot-c) } .bf-cert__meta { margin: 20px 0 0; text-align: center; font: 600 11px var(--f-mono); letter-spacing: 1.2px; color: var(--text-dim) } .bf-cert__meta b { color: var(--text-2) } .bf-cert__actions { display: flex; gap: 12px; justify-content: center; margin-top: 24px; flex-wrap: wrap } /* ---------- 13 · Keyframes ---------- */ @keyframes bfFloat { 0%, 100% { transform: translate(0, 0) rotate(var(--r, 0deg)) } 50% { transform: translate(12px, -14px) rotate(var(--r, 0deg)) } } @keyframes bfPulse { 0%, 100% { opacity: .45; transform: scale(1) } 50% { opacity: 1; transform: scale(1.04) } } @keyframes bfDrift { 0% { transform: translateX(-3%) } 100% { transform: translateX(3%) } } @keyframes bfFlick { 0%, 100% { opacity: .9 } 42% { opacity: .55 } 60% { opacity: 1 } } @keyframes bfRevealIn { 0% { opacity: 0; transform: scale(.8) } 60% { opacity: 1 } 100% { opacity: 1; transform: scale(1) } } @keyframes bfFinalIn { 0% { opacity: 0; transform: scale(.85) } 100% { opacity: 1; transform: scale(1) } } /* ---------- 14 · Адаптив ---------- */ @media(max-width:1100px) { .bf-hero__grid { grid-template-columns: 1fr; justify-items: center; text-align: center; padding-block: clamp(90px, 12vh, 120px) 72px } .bf-h1--a, .bf-h1--b { margin-inline: auto } .bf-hero__lead { margin-inline: auto } .bf-hero__cta { justify-content: center } .bf-hero__dates { justify-content: center } .bf-chips { justify-content: center } .bf-wheelbox { width: min(72vw, 460px); transform: rotate(-4deg) } .bf-prizes__grid { grid-template-columns: 1fr 1fr } .bf-slots { grid-template-columns: 1fr 1fr } } @media(max-width:820px) { .bf-steps { grid-template-columns: 1fr } .bf-game.is-open { padding: 14px } .bf-game__wheel { width: min(86vw, 420px) } .bf-spin__btn { padding: 18px 44px; font-size: 15px } } @media(max-width:560px) { body { font-size: 15px } .bf-hide-m { display: none } .bf-hero__year { letter-spacing: 8px } .bf-hero__cta { flex-direction: column; gap: 14px; width: 100% } .bf-hero__cta .bf-btn--primary { width: 100% } .bf-chips { flex-direction: column; align-items: center } .bf-prizes__grid { grid-template-columns: 1fr } .bf-slot { padding: 8px 10px } .bf-slot__t { font-size: 12px } .bf-cert { padding: 26px 20px } .bf-reveal__card { padding: 20px 22px } .bf-reg { padding: 24px 20px } .bf-moon { width: 64px } } /* ---------- 15 · Доступність / пауза ---------- */ body.bf--paused * { animation-play-state: paused !important } @media(prefers-reduced-motion:reduce) { *, *::before, *::after { animation: none !important; transition: none !important } html { scroll-behavior: auto } } /* ---------- 16 · Сторінка офіційних правил (/pravyla/) ---------- */ .doc-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px clamp(20px, 4vw, 48px); border-bottom: 1px solid rgba(183, 156, 255, .12) } .doc-back { font: 600 13px var(--f-body); color: var(--accent-light) } .doc { max-width: 860px; padding-block: clamp(36px, 6vw, 64px) } .doc h1 { margin: 16px 0 0; font: 700 clamp(24px, 3.4vw, 34px)/1.25 var(--f-display); color: #F4EDFF; text-wrap: balance } .doc-meta { margin: 14px 0 0; font: 600 12px var(--f-mono); letter-spacing: 1px; color: var(--text-dim) } .doc h2 { margin: 42px 0 10px; font: 700 clamp(18px, 2.2vw, 22px) var(--f-display); color: #EFE6FF } .law { list-style: none; margin: 0; padding: 0 } .law>li { margin: 10px 0; font: 500 15px/1.75 var(--f-body); color: var(--text-2) } .law .n { font: 700 14px var(--f-mono); color: var(--accent-light); margin-right: 8px } .law ul { margin: 8px 0 0; padding-left: 20px } .law ul li { margin: 6px 0; font: 500 14.5px/1.7 var(--f-body); color: var(--text-2) } .tbl-wrap { overflow-x: auto; margin: 16px 0 6px } .bf-tbl { width: 100%; min-width: 340px; border-collapse: collapse } .bf-tbl caption { caption-side: top; text-align: left; padding-bottom: 8px; font: 700 14px var(--f-body); color: var(--text) } .bf-tbl th, .bf-tbl td { border: 1px solid rgba(255, 255, 255, .12); padding: 9px 14px; text-align: left; font: 500 14px var(--f-body); color: var(--text-2) } .bf-tbl th { font: 700 11px var(--f-mono); letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-3); background: rgba(255, 255, 255, .03) } .bf-tbl td:last-child, .bf-tbl th:last-child { text-align: right; font-variant-numeric: tabular-nums } .bf-tbl tfoot td { font-weight: 800; color: var(--text) } .tbl-note { margin: 8px 0 0; font: 500 13px/1.6 var(--f-body); color: var(--text-3) } .ph { font-style: normal; padding: 1px 7px; border-radius: 6px; color: var(--pumpkin-light); background: rgba(255, 179, 92, .12); border: 1px dashed rgba(255, 179, 92, .5) } /* ---------- 17 · Друк ---------- */ @media print { body { background: #fff; color: #111 } .doc-top, .bf-footer, .bf-game, .bf-final, .bf-toast, .bf-snd { display: none !important } .doc h1, .doc h2 { color: #000 } .law>li, .law ul li, .bf-tbl th, .bf-tbl td, .tbl-note, .doc-meta, .bf-tbl caption { color: #111 } .bf-tbl th, .bf-tbl td { border-color: #999 } .law .n { color: #000 } .ph { background: none; border: 1px dashed #888; color: #111 } a { color: #111; text-decoration: underline } .bf-eyebrow { border-color: #999; background: none; color: #333 } } /* ---------- 09.5 · Переможці ---------- */ .bf-winners{position:relative;overflow:hidden;padding-block:clamp(64px,9vw,110px); background:#0B0618;text-align:center} .bf-winners__h2{margin:20px 0 0;font:700 clamp(28px,3.6vw,46px) var(--f-display);color:#F4EDFF} .bf-winners__lead{margin:14px auto 0;max-width:600px;color:var(--text-3)} .bf-winners__total{margin:18px 0 0;font:600 12px var(--f-mono);letter-spacing:1.6px; color:var(--pumpkin-light);text-transform:uppercase} .bf-winners .tbl-wrap{margin-top:26px} .bf-winners__tbl{width:100%;border-collapse:separate;border-spacing:0 8px;text-align:left} .bf-winners__tbl th{padding:0 16px 4px;font:700 10px var(--f-mono);letter-spacing:1.6px; text-transform:uppercase;color:var(--text-mono-dim)} .bf-winners__tbl td{padding:13px 16px;background:var(--card-bg); border-block:1px solid var(--card-border);vertical-align:middle} .bf-winners__tbl td:first-child{border-left:1px solid var(--card-border);border-radius:14px 0 0 14px; font:600 12px var(--f-mono);color:var(--text-dim);white-space:nowrap;width:110px} .bf-winners__tbl td:last-child{border-right:1px solid var(--card-border);border-radius:0 14px 14px 0} .bf-winners__tbl td:nth-child(2){font:700 15px var(--f-body);color:var(--text)} .bf-winners__tbl td:nth-child(2) small{display:block;margin-top:2px; font:600 11px var(--f-mono);letter-spacing:1px;color:var(--text-dim)} .bf-wbadges{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end} .bf-wbadge{padding:5px 10px;border-radius:999px;font:700 12px var(--f-body);color:var(--slot-c); background:rgba(var(--slot-rgb),.12);border:1px solid rgba(var(--slot-rgb),.4)} .bf-winners__empty{margin:30px auto 0;max-width:460px;color:var(--text-3)} .bf-winners__empty .bf-btn{margin-top:16px} /* чекбокс згоди у формі */ .bf-check{display:flex;align-items:flex-start;gap:10px;margin-top:16px;cursor:pointer; font:500 13px/1.5 var(--f-body);color:var(--text-2);text-align:left} .bf-check input{width:18px;height:18px;margin-top:1px;accent-color:var(--accent);flex:none} .bf-field label span{color:var(--text-mono-dim);text-transform:none;letter-spacing:.4px} /* ---------- 12.5 · Модалки ---------- */ .bf-modal{position:fixed;inset:0;z-index:80;display:none;place-items:center;padding:24px; background:rgba(4,2,10,.8);backdrop-filter:blur(6px)} .bf-modal.is-open{display:grid} .bf-modal__card{width:min(420px,94vw);border-radius:20px;padding:30px 28px;text-align:center; background:linear-gradient(160deg,rgba(24,13,51,.98),rgba(10,5,22,.99)); border:1px solid rgba(183,156,255,.3);box-shadow:0 0 60px rgba(108,62,244,.4); animation:bfRevealIn .4s ease-out} .bf-modal__ic{width:56px;height:56px;margin:0 auto 6px;border-radius:50%;display:grid;place-items:center;font-size:28px} .bf-modal--info .bf-modal__ic,.bf-modal--ghost .bf-modal__ic{background:rgba(139,92,246,.15);border:1px solid rgba(139,92,246,.5)} .bf-modal--success .bf-modal__ic{background:rgba(124,250,107,.14);border:1px solid rgba(124,250,107,.5)} .bf-modal--error .bf-modal__ic{background:rgba(255,107,122,.14);border:1px solid rgba(255,107,122,.5)} .bf-modal__title{margin:12px 0 0;font:700 20px var(--f-display);color:#F4EDFF} .bf-modal__msg{margin:10px 0 0;font:500 14px/1.6 var(--f-body);color:var(--text-2)} .bf-modal__msg a{color:var(--accent-light)} .bf-modal__actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px} .bf-modal__actions .bf-btn{padding:13px 26px;font-size:14px}