/* nav.css — site-wide fixed bottom app-bar (injected by nav.js) + cross-document View Transitions opt-in. Reuses style.css :root tokens only; no new colors/fonts. Bar height var drives both the bar and the space reserved on each page type. */ :root{ --navh:56px } #appnav{ position:fixed; left:10px; right:10px; bottom:calc(10px + var(--safe-bot)); z-index:40; display:flex; align-items:stretch; overflow:hidden; /* matte black, semi-transparent, light frosted blur — floating rounded pill */ background:rgba(8,10,7,.62); backdrop-filter:blur(12px) saturate(1.05); -webkit-backdrop-filter:blur(12px) saturate(1.05); border:1px solid rgba(255,255,255,.08); border-radius:20px; box-shadow:0 12px 30px -12px rgba(0,0,0,.6); /* keep the bar itself stable while page content cross-fades */ view-transition-name:appnav; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; } .appnav-item{ position:relative; flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:7px 4px 6px; color:var(--mute); text-decoration:none; font-size:11px; font-weight:600; letter-spacing:.1px; background:none; border:0; cursor:pointer; transition:color .18s ease; -webkit-tap-highlight-color:transparent; } .appnav-item:hover{ color:var(--text) } .appnav-ico{ display:block; flex-shrink:0 } .appnav-label{ line-height:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100% } /* Active: amber icon + label (high contrast on the dark bar) + a small amber top indicator. No fill behind the icon — so nothing can hide it. */ .appnav-item.active{ color:var(--accent) } .appnav-item.active::before{ content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:28px; height:3px; border-radius:0 0 3px 3px; background:var(--accent); box-shadow:0 0 8px rgba(255,138,31,.55); } /* ── Unified header — same matte-glass material as the bottom bar ───── */ header, .meet-header{ background:rgba(8,10,7,.62); backdrop-filter:blur(12px) saturate(1.05); -webkit-backdrop-filter:blur(12px) saturate(1.05); border:0; border-bottom:1px solid rgba(255,255,255,.08); border-radius:0 0 18px 18px; box-shadow:0 8px 22px -14px rgba(0,0,0,.5); } /* Scrolling pages: header fills the top edge-to-edge, sticks; only the bottom is rounded. */ body:not(.meet-body) header{ position:sticky; top:0; z-index:30; transition:padding .26s ease } /* On scroll the header folds to a thin line — only .title-row (heading + auth) stays; subtitle/stats/etc. collapse away. Toggled by nav.js -> body.scrolled. */ header > :not(.title-row){ overflow:hidden; max-height:160px; transition:max-height .26s ease, opacity .18s ease, margin .26s ease; } body.scrolled header > :not(.title-row){ max-height:0; min-height:0; opacity:0; margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0; pointer-events:none; } body.scrolled:not(.meet-body) header{ padding-top:calc(10px + var(--safe-top)); padding-bottom:8px } /* On scroll also fold the profile chip — long titles then take the full width. */ header .me{ transition:opacity .2s ease, max-width .26s ease; max-width:180px; overflow:hidden } body.scrolled header .me{ opacity:0; max-width:0; margin:0; padding:0; pointer-events:none } /* Username uses the available width and ellipsises only when it would actually crowd the title — not a fixed 70/100px cap that clips to a few letters with space to spare. Title keeps its width; the profile chip shrinks instead. */ .title-row .title{ flex-shrink:0 } .title-row .me{ min-width:0 } .me-name{ max-width:none; min-width:0 } /* Redundant promos now that the bottom nav covers everything: - home floating CTAs ("Обміняй повторки" / "AI Сталкер") + their .cta-row wrapper - the /exchange → /meet promo banner ("Зустрічі біля АТБ"). */ .cta-row, .cta-float, .meet-promo{ display:none } /* Filter chips in the app-shell glass style (frosted translucent). Active chip and the ⋯ overflow toggle keep their own amber look. */ .filters .chip:not(.active):not(.filter-more), .tools .chip:not(.active):not(.primary):not(.danger){ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.07); backdrop-filter:blur(10px) saturate(1.1); -webkit-backdrop-filter:blur(10px) saturate(1.1); } .filters .chip:not(.active):not(.filter-more):hover, .tools .chip:not(.active):not(.primary):not(.danger):hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.26); } /* The ⋯ overflow toggle gets glass in its default (closed) state too. The more-open amber override in style.css (.filters.more-open .filter-more, higher specificity) still wins when the categories are expanded. */ .filter-more{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.07); backdrop-filter:blur(10px) saturate(1.1); -webkit-backdrop-filter:blur(10px) saturate(1.1); } .filter-more:hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.26) } @media(max-width:499px){ /* Keep ⋯ on the SAME row — never wrap it to its own line. Squeeze/scroll the row instead. The folded category chips use margin-based spacing (not flex gap) so they leave ZERO residual gap before ⋯ when collapsed; the flex-gap + negative-margin hack was browser-dependent and left a big gap. */ .filters{ flex-wrap:nowrap; gap:0 } .filters > .chip{ margin-left:6px } .filters > .chip:first-child{ margin-left:0 } .filters > .filter-overflow{ margin-left:0; margin-right:0 } .filters.more-open{ justify-content:flex-start } .filters.more-open .filter-overflow{ margin-left:6px } } /* Glass sort dropdown (it floats over content, so the frost actually shows). */ .sort-list{ background:rgba(10,13,9,.78); backdrop-filter:blur(14px) saturate(1.1); -webkit-backdrop-filter:blur(14px) saturate(1.1); border-color:rgba(255,255,255,.12) } /* Selected filter + the Share button = glowing ORANGE GLASS, not a flat amber fill. */ .filters .chip.active, .tools .chip.primary{ background:rgba(255,138,31,.18); border:1px solid rgba(255,138,31,.6); color:var(--accent2); box-shadow:0 0 16px rgba(255,138,31,.45), inset 0 1px 0 rgba(255,255,255,.12); backdrop-filter:blur(10px) saturate(1.2); -webkit-backdrop-filter:blur(10px) saturate(1.2); } /* The duplicates filter keeps its blue identity — as glowing blue glass. */ .filters .chip[data-f="dup"].active{ background:rgba(96,165,250,.18); border-color:rgba(96,165,250,.6); color:#a9c9fb; box-shadow:0 0 16px rgba(96,165,250,.45), inset 0 1px 0 rgba(255,255,255,.12); } /* Текст/Картинки toggle → glass track + glowing orange-glass thumb (the selection). */ .view-switch{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.16); backdrop-filter:blur(10px) saturate(1.1); -webkit-backdrop-filter:blur(10px) saturate(1.1); animation:none; } .view-switch-thumb{ background:rgba(255,138,31,.22); border:1px solid rgba(255,138,31,.6); box-shadow:0 0 16px rgba(255,138,31,.45), inset 0 1px 0 rgba(255,255,255,.12); } .view-switch-opt[aria-selected="true"]{ color:var(--accent2) } /* ── Exchange controls → app-shell glass ─────────────────────────── */ /* Neutral glass: plain action buttons + inactive filter toggles. */ .ex-btn, .ex-filters .chip:not(.active), .ex-filter-row .chip:not(.active){ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.07); backdrop-filter:blur(10px) saturate(1.1); -webkit-backdrop-filter:blur(10px) saturate(1.1); color:var(--text); } .ex-btn:hover, .ex-filters .chip:not(.active):hover, .ex-filter-row .chip:not(.active):hover{ background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.26) } /* Primary action + active filter toggles → glowing orange glass (not flat fill). */ .ex-btn.primary, #smartMatchBtn.active, #npOnlyBtn.active, .ex-filters .chip.active, .ex-filter-row .chip.active{ background:rgba(255,138,31,.18); border:1px solid rgba(255,138,31,.6); color:var(--accent2); box-shadow:0 0 16px rgba(255,138,31,.45), inset 0 1px 0 rgba(255,255,255,.12); backdrop-filter:blur(10px) saturate(1.2); -webkit-backdrop-filter:blur(10px) saturate(1.2); } /* Delete = red glass. */ .ex-btn.danger{ background:rgba(212,96,79,.16); border:1px solid rgba(212,96,79,.5); color:#ff9a9a; box-shadow:inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } /* Dropboxes / inputs → glass (override only background-color so the caret image + amber focus border survive). */ .ex-combo-input, .ex-select, .ex-select-sm, .ex-input{ background-color:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.16); } /* Publish button: orange glass, but WITHOUT the outer glow (per request). */ .ex-btn.primary{ box-shadow:inset 0 1px 0 rgba(255,255,255,.12) } /* Dropdown popovers (combobox lists) → real frosted glass — they float over content, so the backdrop blur actually shows. */ .ex-combo-list{ background:rgba(10,13,9,.74); border:1px solid rgba(255,255,255,.12); backdrop-filter:blur(18px) saturate(1.1); -webkit-backdrop-filter:blur(18px) saturate(1.1); } /* ── Modals → frosted glass ────────────────────────────────────────── Overlay frosts + dims the page behind; the dialog card is matte glass. */ .modal, .support-modal, .meet-overlay, .lot-modal{ background:rgba(8,10,7,.55); backdrop-filter:blur(8px) saturate(1.05); -webkit-backdrop-filter:blur(8px) saturate(1.05); } .modal-box, .support-card, .meet-overlay-card{ background:rgba(18,24,16,.82); border:1px solid rgba(255,255,255,.1); backdrop-filter:blur(24px) saturate(1.15); -webkit-backdrop-filter:blur(24px) saturate(1.15); box-shadow:0 24px 60px -20px rgba(0,0,0,.7); } /* Generator "Як це працює" links had no rule (default blue). Match the site link convention (amber + dotted underline, like .seo-block a). */ .gen-seo a{ color:var(--accent2); border-bottom:1px dotted var(--accent); text-decoration:none } .gen-seo a:hover{ border-bottom-style:solid } /* Share / Friend tool chips: inline-flex so the SVG icon aligns with the label. */ #shareBtn, #addFriendBtn{ display:inline-flex; align-items:center; justify-content:center; gap:6px } #shareBtn svg, #addFriendBtn svg{ flex:none } /* ── TEMP: hide the site footer on all pages ───────────────────────── Hidden for now (the bottom app-bar covers primary navigation). support.js still appends the ☕ button + UA·EN lang pill into