/* ============================================================================ * SMASH BURGER — bottom-nav.css * BK-style persistent bottom tab bar (mobile-first, 5 tabs) * Дома · Мени · ⚽ WCUP · Мој код · Награди * * Design language: BK app — cream bg, dark-brown text, red/orange active, * big touch targets, smooth active underline. * * Usage: include this CSS on every public page + load bottom-nav.js. * Add

before (the JS renders it). * Mark the current page: * =========================================================================== */ /* ---- Unify the top header: hide legacy per-page headers at FIRST PAINT ---- * The single shared top bar (top-bar.js, injected by bottom-nav.js) replaces * the BK-redesign headers. Hiding them here (this file loads in ) means * they never render, so there is no overlap and no flash/jump. Games keep their * own .topbar; content .section-head is untouched. */ .rd-header, .rw-header, [data-smash-hide-header] { display: none !important; } /* ============================================================================ * APP-LIKE BRANDING (site-wide): lock text selection + kill the long-press * copy/search popup, transparent tap highlight, and a subtle press feedback on * interactive elements. Inputs + anything .selectable stay selectable. This * gives smash.mk a strong, native-app feel on every page. * =========================================================================== */ html { -webkit-tap-highlight-color: transparent; } body { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-touch-callout: none; } input, textarea, select, [contenteditable="true"], .selectable, .selectable * { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; } a, button, [role="button"], summary, .card, .menu-card, .combo-card, .game-card { -webkit-tap-highlight-color: transparent; } @media (hover: none) { a:active, button:active, [role="button"]:active, .card:active, .menu-card:active, .combo-card:active, .game-card:active { transform: scale(0.975); transition: transform 0.08s ease; } } @media (prefers-reduced-motion: reduce) { a:active, button:active, [role="button"]:active, .card:active, .menu-card:active, .combo-card:active, .game-card:active { transform: none; } } /* ---- Root-level body padding so content isn't hidden under the bar ---- */ body.has-bottom-nav { padding-bottom: env(safe-area-inset-bottom, 0px); } @media (max-width: 860px) { body.has-bottom-nav { padding-bottom: calc(68px + env(safe-area-inset-bottom, 0px)); } } /* ---- The bar itself ---- */ #smash-bottom-nav { display: none; /* hidden on desktop, shown via media query */ position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; height: calc(68px + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); /* BK cream-ish translucent background */ background: rgba(245, 239, 230, 0.97); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); border-top: 1px solid rgba(58, 42, 26, 0.12); box-shadow: 0 -8px 32px rgba(58, 42, 26, 0.10); /* Flex row */ display: none; align-items: stretch; } @media (max-width: 860px) { #smash-bottom-nav { display: flex; } } /* ---- Individual tab ---- */ .smash-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 68px; padding: 10px 4px 8px; text-decoration: none; color: #8a7f76; /* muted brown — inactive */ font-family: "Inter", system-ui, -apple-system, sans-serif; font-weight: 700; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; border: none; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; position: relative; transition: color 0.18s ease; } /* Active top indicator line (BK uses a colour underline/top mark) */ .smash-tab::before { content: ""; position: absolute; top: 0; left: 20%; right: 20%; height: 3px; border-radius: 0 0 3px 3px; background: #e8521f; transform: scaleX(0); transform-origin: center; transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1); } .smash-tab.is-active { color: #e8521f; /* BK red-orange */ } .smash-tab.is-active::before { transform: scaleX(1); } /* WCUP tab is always slightly accented */ .smash-tab[data-tab="wcup"] .smash-tab-icon { font-size: 22px; } /* ---- Icon ---- */ .smash-tab-icon { display: block; width: 24px; height: 24px; font-size: 20px; line-height: 1; text-align: center; flex-shrink: 0; transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1); } /* SVG icons (inline) */ .smash-tab-icon svg { display: block; width: 22px; height: 22px; stroke-width: 2; transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1); } .smash-tab.is-active .smash-tab-icon, .smash-tab:active .smash-tab-icon { transform: translateY(-2px) scale(1.1); } /* ---- Label ---- */ .smash-tab-label { display: block; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60px; } /* ---- Rewards badge dot (unread/available indicator) ---- */ .smash-tab-badge { position: absolute; top: 8px; right: calc(50% - 18px); width: 8px; height: 8px; border-radius: 50%; background: #e8521f; border: 2px solid rgba(245, 239, 230, 0.97); display: none; } .smash-tab-badge.visible { display: block; } /* ---- Touch ripple feel on tap ---- */ .smash-tab:active { background: rgba(232, 82, 31, 0.08); } /* ---- Dark surface variant (for world-cup pages) ---- */ #smash-bottom-nav.dark-surface { background: rgba(12, 8, 6, 0.95); -webkit-backdrop-filter: blur(20px) saturate(1.2); backdrop-filter: blur(20px) saturate(1.2); border-top-color: rgba(255, 244, 220, 0.12); box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.32); } #smash-bottom-nav.dark-surface .smash-tab { color: rgba(255, 244, 220, 0.52); } #smash-bottom-nav.dark-surface .smash-tab.is-active { color: #ffd27b; } #smash-bottom-nav.dark-surface .smash-tab.is-active::before { background: #ffd27b; } #smash-bottom-nav.dark-surface .smash-tab:active { background: rgba(255, 244, 220, 0.06); } #smash-bottom-nav.dark-surface .smash-tab-badge { border-color: rgba(12, 8, 6, 0.95); } /* ---- Smooth page transition overlay (BK-style slide feel) ---- */ .smash-nav-transition { position: fixed; inset: 0; z-index: 190; background: rgba(245, 239, 230, 1); pointer-events: none; opacity: 0; transition: opacity 0.18s ease; } .smash-nav-transition.active { opacity: 1; } body[data-surface="dark"] .smash-nav-transition { background: rgba(8, 5, 4, 1); }