/* ============================================================= Fair Business — bottom bar (mobile only). Fixed nav docked at the bottom of the viewport. Hidden on tablets / desktops via media query (≥1024px). Slot 3 (index 2) is the role's primary action — visually accented with a green pill background. Layout: 5 equal columns, each is a column-stacked icon + label (+ optional badge). Touch target ≥48dp. The block at the BOTTOM of this file trims the original header's mobile presentation so the slim look (logo + lang + burger) wins on mobile. Search + profile + write-complaint live in the bottom bar there; the duplicates on the header would just look noisy. ============================================================= */ .bottom-bar { padding: 0; height: 70px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; align-content: flex-end; background: var(--white, #fff); border-top: 1px solid var(--slate-100, #f1f5f9); box-shadow: 0 -2px 14px rgba(15, 23, 42, .04); /* iOS safe-area: the bar's bottom edge sits flush with the viewport (bottom: 0) and `viewport-fit=cover` extends that under the home indicator. The inset padding pushes the icons/labels above the indicator while the white bg fills the indicator strip. */ padding-bottom: env(safe-area-inset-bottom, 0); box-sizing: content-box; /* keep the bar row at its declared height; inset is extra */ transition: transform .2s ease; } @media (min-width: 1024px) { .bottom-bar { display: none; } } /* Hide when keyboard is open — bottom bar would otherwise sit on top of the keyboard on iOS, eating half the screen. mobile-keyboard.js toggles the body class via visualViewport. */ body.is-keyboard-open .bottom-bar { transform: translateY(110%); } /* When the bottom bar is rendered, push page content up so the last row of content isn't covered. Height comes from the shared :root vars in mobile-app-shell.css. */ body.has-bottom-bar { padding-bottom: calc(var(--fb-h-bottom, 64px) + env(safe-area-inset-bottom, 0)); } @media (min-width: 1024px) { body.has-bottom-bar { padding-bottom: 0; } } .bb-item { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: var(--fb-h-bottom, 64px); padding: 6px 4px 8px; background: transparent; border: 0; cursor: pointer; text-decoration: none; color: var(--slate-500, #64748b); font: inherit; position: relative; transition: color .15s ease; } .bb-item:hover { color: var(--slate-900, #0f172a); } .bb-item.is-active { color: var(--green-dark, #166534); } .bb-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; } .bb-icon svg { width: 22px; height: 22px; display: block; } .bb-label { font-size: 11px; font-weight: 500; letter-spacing: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Center accent slot — square-rounded green tile that sits raised above the bar. `margin-top: -15px` lifts it; the matching `.bb-label` margin keeps the label aligned with the other slots. */ .bb-item.is-accent { color: var(--green-dark, #166534); } .bb-item.is-accent .bb-icon { width: 44px; height: 44px; border-radius: 8px; background: var(--green, #38ad4e); color: #fff; box-shadow: 0 4px 12px rgba(56, 173, 78, .35); transition: transform .15s ease, box-shadow .15s ease; margin-top: -23px; margin-bottom: 8px; } .bb-item.is-accent .bb-icon svg { width: 22px; height: 22px; color: #fff; } .bb-item.is-accent:hover .bb-icon { transform: scale(1.05); } .bb-item.is-accent:active .bb-icon { transform: scale(.96); } .bb-item.is-accent .bb-label { font-weight: 600; margin-top: -6px; } /* Badge — top-right of the icon. Two presentations: - .bb-badge with text content ≥1 → red pill with count At zero we don't render the element at all (see bottom-bar.js). */ .bb-badge { position: absolute; top: 6px; right: calc(50% - 18px); min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--red-500, #ef4444); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; border: 2px solid var(--white, #fff); box-sizing: content-box; } /* Accent slot's icon is bigger + lifted, so the badge anchors to its tile corner. */ .bb-item.is-accent .bb-badge { top: -10px; right: calc(50% - 26px); } /* ============================================================= Trim original header on mobile so it stays slim (logo + language switcher + hamburger). The bottom bar hosts search, profile, and the Write-complaint CTA, so the same controls in the header would be redundant. ============================================================= */ @media (max-width: 1023px) { /* Mobile search row (the input strip below the main header bar) */ .site-header .mobile-search-row { display: none !important; } /* Mobile avatar pill (logged-in) — bottom bar slot 5 covers profile */ .site-header .avatar-btn-mobile, body[data-auth="in"] .site-header .avatar-btn-mobile { display: none !important; } /* "Log in" link on mobile (logged-out) — bottom bar slot 5 covers sign-in */ .site-header .mobile-login, body[data-auth="out"] .site-header .mobile-login { display: none !important; } } /* ============================================================= Bigger logo on both devices, less surrounding padding. Overrides the default `.site-header .logo img` heights. ============================================================= */ .site-header .logo img { height: 48px !important; /* was 38px on desktop */ width: auto; margin-bottom: -3px; /* visual baseline correction */ } @media (max-width: 860px) { .site-header .logo img { height: 40px !important; } /* was 28px on mobile */ .site-header .container { padding: 0 12px !important; } .main-header-inner { gap: 8px !important; } } /* ============================================================= Mobile language pill — flag + KA + chevron in a rounded pill. The original `.lang-toggle-mobile` was a flag-only icon-button; the `.is-pill` modifier added by header.js opts into this look. ============================================================= */ @media (max-width: 860px) { .lang-toggle-mobile.is-pill { display: inline-flex; align-items: center; gap: 6px; width: auto; height: 36px; padding: 0 10px 0 8px; background: transparent; border: 1px solid var(--slate-200, #e2e8f0); border-radius: 999px; color: var(--slate-700, #334155); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .15s ease, border-color .15s ease; } .lang-toggle-mobile.is-pill:hover, .lang-toggle-mobile.is-pill.is-active { background: var(--slate-50, #f8fafc); border-color: var(--slate-300, #cbd5e1); } .lang-toggle-mobile.is-pill .flag { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; flex-shrink: 0; } .lang-toggle-mobile.is-pill .lang-text-mobile { letter-spacing: .02em; } .lang-toggle-mobile.is-pill .chevron-sm { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: .7; } } /* ============================================================= Slim mobile drawer (replaces the original .md-* card-style drawer). Uses sd-* classes injected by header.js inside the existing