/* ========================================================================= Vrezerve Bar — frontend styles (v2.0) Cross-browser notes are collected at the bottom of this file. ========================================================================= */ .vrb-bar { position: fixed; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; transform: translateY(0); transition: transform 0.35s cubic-bezier(.4,0,.2,1), opacity 0.35s ease; will-change: transform; padding: 8px 6px 6px; } /* The bar's own box paints nothing: all background/border/shadow live on ::before instead, a full-box layer that sits behind the bar's normal-flow content (items, FAB) simply by virtue of being generated first in source order. For the *-cutout variants this layer gets a clip-path with a bite taken out of it, so that region is genuinely transparent — it shows whatever is actually behind the fixed bar, not just a same- or different-colored fill. */ .vrb-bar::before { content: ""; position: absolute; inset: 0; border-radius: inherit; /* Frosted glass with a solid-color fallback for browsers/engines without backdrop-filter support (older Firefox, some in-app webviews). */ background-clip: padding-box; } @supports ( backdrop-filter: blur(1px) ) or ( -webkit-backdrop-filter: blur(1px) ) { .vrb-bar::before { /* Amount is set per-bar (Design → Background opacity/blur in settings); 14px was the old fixed default, kept as the fallback for any cached CSS from before this became configurable. */ -webkit-backdrop-filter: blur(var(--vrb-blur, 14px)); backdrop-filter: blur(var(--vrb-blur, 14px)); } } .vrb-bar.vrb-scroll-aware.vrb-hidden { transform: translateY(140%); } @media (prefers-reduced-motion: reduce) { .vrb-bar { transition-duration: 0.01ms !important; } } /* ---------------- Theme: dark ---------------- */ .vrb-bar.vrb-theme-dark::before { background-color: var(--vrb-dark-bg); border: 1px solid var(--vrb-dark-border); box-shadow: 0 8px 30px rgba(0,0,0,0.35); } .vrb-bar.vrb-theme-dark .vrb-item { color: var(--vrb-dark-text); } .vrb-bar.vrb-theme-dark .vrb-item.is-active { color: var(--vrb-dark-text-active); } .vrb-bar.vrb-theme-dark .vrb-indicator { background-color: var(--vrb-dark-indicator); } .vrb-bar.vrb-theme-dark .vrb-item.is-highlight .vrb-icon-wrap { background-color: var(--vrb-dark-accent); } .vrb-bar.vrb-theme-dark .vrb-item.is-highlight { color: var(--vrb-dark-accent-text); } .vrb-bar.vrb-theme-dark.vrb-style-pill .vrb-item.is-active { background-color: rgba(255,255,255,0.08); } .vrb-bar.vrb-theme-dark.vrb-style-underline .vrb-item.is-active::before { background-color: var(--vrb-dark-text-active); } /* ---------------- Theme: light ---------------- */ .vrb-bar.vrb-theme-light::before { background-color: var(--vrb-light-bg); border: 1px solid var(--vrb-light-border); box-shadow: 0 8px 30px rgba(20,20,30,0.12); } .vrb-bar.vrb-theme-light .vrb-item { color: var(--vrb-light-text); } .vrb-bar.vrb-theme-light .vrb-item.is-active { color: var(--vrb-light-text-active); } .vrb-bar.vrb-theme-light .vrb-indicator { background-color: var(--vrb-light-indicator); } .vrb-bar.vrb-theme-light .vrb-item.is-highlight .vrb-icon-wrap { background-color: var(--vrb-light-accent); } .vrb-bar.vrb-theme-light .vrb-item.is-highlight { color: var(--vrb-light-accent-text); } .vrb-bar.vrb-theme-light.vrb-style-pill .vrb-item.is-active { background-color: rgba(20,20,30,0.06); } .vrb-bar.vrb-theme-light.vrb-style-underline .vrb-item.is-active::before { background-color: var(--vrb-light-text-active); } /* ---------------- Theme: auto (follows OS) ---------------- */ @media (prefers-color-scheme: dark) { .vrb-bar.vrb-theme-auto::before { background-color: var(--vrb-dark-bg); border-color: var(--vrb-dark-border); box-shadow: 0 8px 30px rgba(0,0,0,0.35); } .vrb-bar.vrb-theme-auto .vrb-item { color: var(--vrb-dark-text); } .vrb-bar.vrb-theme-auto .vrb-item.is-active { color: var(--vrb-dark-text-active); } .vrb-bar.vrb-theme-auto .vrb-indicator { background-color: var(--vrb-dark-indicator); } .vrb-bar.vrb-theme-auto .vrb-item.is-highlight .vrb-icon-wrap { background-color: var(--vrb-dark-accent); } .vrb-bar.vrb-theme-auto .vrb-item.is-highlight { color: var(--vrb-dark-accent-text); } } @media (prefers-color-scheme: light) { .vrb-bar.vrb-theme-auto::before { background-color: var(--vrb-light-bg); border-color: var(--vrb-light-border); box-shadow: 0 8px 30px rgba(20,20,30,0.12); } .vrb-bar.vrb-theme-auto .vrb-item { color: var(--vrb-light-text); } .vrb-bar.vrb-theme-auto .vrb-item.is-active { color: var(--vrb-light-text-active); } .vrb-bar.vrb-theme-auto .vrb-indicator { background-color: var(--vrb-light-indicator); } .vrb-bar.vrb-theme-auto .vrb-item.is-highlight .vrb-icon-wrap { background-color: var(--vrb-light-accent); } .vrb-bar.vrb-theme-auto .vrb-item.is-highlight { color: var(--vrb-light-accent-text); } } /* Cutout fallback colors (no-clip-path engines only) live further down, scoped inside @supports not (...) — see near the variant rules — so they never override the transparent notch in browsers that DO support clip-path (a higher-specificity unconditional rule here would otherwise paint over, and defeat, the real cutout in every browser). */ /* ---------------- Layout primitives shared by all 5 variants ---------------- */ .vrb-bar-inner { display: flex; align-items: center; width: 100%; } .vrb-row-even { justify-content: space-between; } .vrb-item { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; flex: 1 1 0; min-width: 0; text-decoration: none; font: inherit; font-size: 11px; font-weight: 500; line-height: 1; padding: 6px 2px; margin: 0; background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: color 0.2s ease; } .vrb-item.is-active { font-weight: 700; } /* Accessible focus ring that degrades gracefully (kept as two separate rules — combining :focus and :focus-visible in one selector list would drop the whole rule in browsers that don't know :focus-visible). */ .vrb-item:focus { outline: 2px solid currentColor; outline-offset: 2px; } .vrb-item:focus:not(:focus-visible) { outline: none; } .vrb-item:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .vrb-icon-wrap { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; transition: background-color 0.25s ease, transform 0.25s ease; } .vrb-icon-img { width: 22px; height: 22px; object-fit: contain; display: block; } .vrb-icon-svg { width: 22px; height: 22px; display: block; color: inherit; } .vrb-icon-fallback { width: 20px; height: 20px; border-radius: 4px; border: 1.5px solid currentColor; opacity: 0.6; display: block; } .vrb-label { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .vrb-indicator { width: 96px; height: 4px; border-radius: 3px; margin-top: 8px; flex: 0 0 auto; } /* ---------------- FAB (raised accent button) ---------------- */ .vrb-item.is-highlight { margin-top: 0; } .vrb-item.is-highlight .vrb-icon-wrap { width: 52px; height: 52px; box-shadow: 0 8px 20px rgba(0,0,0,0.3); } .vrb-item.is-highlight .vrb-icon-img, .vrb-item.is-highlight .vrb-icon-svg { width: 26px; height: 26px; } .vrb-item.is-highlight .vrb-label { display: none; } .vrb-fab { position: absolute; /* Pixel-perfect by construction, not eyeballed: this places the FAB circle's own center exactly on the bar's top edge — the same point the cutout arc below is drawn around (see the *-cutout clip-path rules further down, each a semicircle of radius 36 centered at y:0 on that edge). A 52px FAB (radius 26) centered on that same point sits concentric with the 36px-radius notch, leaving a uniform ~10px halo of genuine transparency all the way around it. Verified against real rendered bounding boxes, not just the arithmetic. */ top: -32px; display: flex; z-index: 1; } .vrb-fab-center { left: 50%; transform: translateX(-50%); } .vrb-fab-end { right: 16px; } /* ---------------- Variant: no-fab (plain even row) ---------------- */ .vrb-variant-no-fab .vrb-bar-inner { padding: 0 4px; } /* ---------------- Variant: fab-end (row + floating end button) ---------------- */ .vrb-variant-fab-end .vrb-bar-inner { padding-right: 64px; } /* ---------------- Variant: fab-center / fab-center-cutout (split row) ---------------- */ .vrb-bar-grid { display: flex; align-items: center; width: 100%; } .vrb-grid-center .vrb-bar-inner, .vrb-grid-center-cutout .vrb-bar-inner { flex: 1 1 0; } /* This is now a purely invisible flex spacer: it reserves the 72x36 gap so the left/right item groups don't collide with the FAB. The actual cutout is cut directly out of .vrb-bar::before below, so nothing here needs its own fill or clip-path in supporting browsers. */ .vrb-grid-center-cutout .vrb-cutout-notch { flex: 0 0 72px; width: 72px; height: 36px; align-self: flex-start; margin-top: -8px; background: transparent; } /* ---------------- Variant: fab-end-cutout ---------------- */ .vrb-grid-end-cutout { align-items: flex-start; } .vrb-grid-end-cutout .vrb-bar-inner { flex: 1 1 auto; padding-right: 8px; } .vrb-grid-end-cutout .vrb-cutout-notch { flex: 0 0 72px; width: 72px; height: 36px; margin-top: -8px; background: transparent; } .vrb-grid-end-cutout .vrb-spacer { flex: 0 0 8px; height: 36px; margin-top: -8px; background: transparent; } .vrb-fab-cutout { right: 16px; } /* top inherited from .vrb-fab: keeps it concentric with the notch arc */ /* The true cutout: a bite taken directly out of .vrb-bar::before's own paint (background, border, box-shadow), traced as a smooth semicircular arc anchored to the same 50%-center / 100%-minus-44px position the FAB sits at. Because ::before is the ONLY thing painting the bar's surface, the clipped-away region shows real page content behind the fixed bar — genuine see-through, not a same- or different-colored fill. Anchored with calc(...%...) so it tracks the bar's own (responsive) width automatically. */ .vrb-variant-fab-center-cutout.vrb-bar::before { -webkit-clip-path: polygon( 0 0, calc(50% - 36px) 0px, calc(50% - 35.863px) 3.138px, calc(50% - 35.453px) 6.251px, calc(50% - 34.773px) 9.317px, calc(50% - 33.829px) 12.313px, calc(50% - 32.627px) 15.214px, calc(50% - 31.177px) 18px, calc(50% - 29.489px) 20.649px, calc(50% - 27.578px) 23.14px, calc(50% - 25.456px) 25.456px, calc(50% - 23.14px) 27.578px, calc(50% - 20.649px) 29.489px, calc(50% - 18px) 31.177px, calc(50% - 15.214px) 32.627px, calc(50% - 12.313px) 33.829px, calc(50% - 9.317px) 34.773px, calc(50% - 6.251px) 35.453px, calc(50% - 3.138px) 35.863px, 50% 36px, calc(50% + 3.138px) 35.863px, calc(50% + 6.251px) 35.453px, calc(50% + 9.317px) 34.773px, calc(50% + 12.313px) 33.829px, calc(50% + 15.214px) 32.627px, calc(50% + 18px) 31.177px, calc(50% + 20.649px) 29.489px, calc(50% + 23.14px) 27.578px, calc(50% + 25.456px) 25.456px, calc(50% + 27.578px) 23.14px, calc(50% + 29.489px) 20.649px, calc(50% + 31.177px) 18px, calc(50% + 32.627px) 15.214px, calc(50% + 33.829px) 12.313px, calc(50% + 34.773px) 9.317px, calc(50% + 35.453px) 6.251px, calc(50% + 35.863px) 3.138px, calc(50% + 36px) 0px, 100% 0, 100% 100%, 0 100% ); clip-path: polygon( 0 0, calc(50% - 36px) 0px, calc(50% - 35.863px) 3.138px, calc(50% - 35.453px) 6.251px, calc(50% - 34.773px) 9.317px, calc(50% - 33.829px) 12.313px, calc(50% - 32.627px) 15.214px, calc(50% - 31.177px) 18px, calc(50% - 29.489px) 20.649px, calc(50% - 27.578px) 23.14px, calc(50% - 25.456px) 25.456px, calc(50% - 23.14px) 27.578px, calc(50% - 20.649px) 29.489px, calc(50% - 18px) 31.177px, calc(50% - 15.214px) 32.627px, calc(50% - 12.313px) 33.829px, calc(50% - 9.317px) 34.773px, calc(50% - 6.251px) 35.453px, calc(50% - 3.138px) 35.863px, 50% 36px, calc(50% + 3.138px) 35.863px, calc(50% + 6.251px) 35.453px, calc(50% + 9.317px) 34.773px, calc(50% + 12.313px) 33.829px, calc(50% + 15.214px) 32.627px, calc(50% + 18px) 31.177px, calc(50% + 20.649px) 29.489px, calc(50% + 23.14px) 27.578px, calc(50% + 25.456px) 25.456px, calc(50% + 27.578px) 23.14px, calc(50% + 29.489px) 20.649px, calc(50% + 31.177px) 18px, calc(50% + 32.627px) 15.214px, calc(50% + 33.829px) 12.313px, calc(50% + 34.773px) 9.317px, calc(50% + 35.453px) 6.251px, calc(50% + 35.863px) 3.138px, calc(50% + 36px) 0px, 100% 0, 100% 100%, 0 100% ); } .vrb-variant-fab-end-cutout.vrb-bar::before { -webkit-clip-path: polygon( 0 0, calc(100% - 80px) 0px, calc(100% - 79.863px) 3.138px, calc(100% - 79.453px) 6.251px, calc(100% - 78.773px) 9.317px, calc(100% - 77.829px) 12.313px, calc(100% - 76.627px) 15.214px, calc(100% - 75.177px) 18px, calc(100% - 73.489px) 20.649px, calc(100% - 71.578px) 23.14px, calc(100% - 69.456px) 25.456px, calc(100% - 67.14px) 27.578px, calc(100% - 64.649px) 29.489px, calc(100% - 62px) 31.177px, calc(100% - 59.214px) 32.627px, calc(100% - 56.313px) 33.829px, calc(100% - 53.317px) 34.773px, calc(100% - 50.251px) 35.453px, calc(100% - 47.138px) 35.863px, calc(100% - 44px) 36px, calc(100% - 40.862px) 35.863px, calc(100% - 37.749px) 35.453px, calc(100% - 34.683px) 34.773px, calc(100% - 31.687px) 33.829px, calc(100% - 28.786px) 32.627px, calc(100% - 26px) 31.177px, calc(100% - 23.351px) 29.489px, calc(100% - 20.86px) 27.578px, calc(100% - 18.544px) 25.456px, calc(100% - 16.422px) 23.14px, calc(100% - 14.511px) 20.649px, calc(100% - 12.823px) 18px, calc(100% - 11.373px) 15.214px, calc(100% - 10.171px) 12.313px, calc(100% - 9.227px) 9.317px, calc(100% - 8.547px) 6.251px, calc(100% - 8.137px) 3.138px, calc(100% - 8px) 0px, 100% 0, 100% 100%, 0 100% ); clip-path: polygon( 0 0, calc(100% - 80px) 0px, calc(100% - 79.863px) 3.138px, calc(100% - 79.453px) 6.251px, calc(100% - 78.773px) 9.317px, calc(100% - 77.829px) 12.313px, calc(100% - 76.627px) 15.214px, calc(100% - 75.177px) 18px, calc(100% - 73.489px) 20.649px, calc(100% - 71.578px) 23.14px, calc(100% - 69.456px) 25.456px, calc(100% - 67.14px) 27.578px, calc(100% - 64.649px) 29.489px, calc(100% - 62px) 31.177px, calc(100% - 59.214px) 32.627px, calc(100% - 56.313px) 33.829px, calc(100% - 53.317px) 34.773px, calc(100% - 50.251px) 35.453px, calc(100% - 47.138px) 35.863px, calc(100% - 44px) 36px, calc(100% - 40.862px) 35.863px, calc(100% - 37.749px) 35.453px, calc(100% - 34.683px) 34.773px, calc(100% - 31.687px) 33.829px, calc(100% - 28.786px) 32.627px, calc(100% - 26px) 31.177px, calc(100% - 23.351px) 29.489px, calc(100% - 20.86px) 27.578px, calc(100% - 18.544px) 25.456px, calc(100% - 16.422px) 23.14px, calc(100% - 14.511px) 20.649px, calc(100% - 12.823px) 18px, calc(100% - 11.373px) 15.214px, calc(100% - 10.171px) 12.313px, calc(100% - 9.227px) 9.317px, calc(100% - 8.547px) 6.251px, calc(100% - 8.137px) 3.138px, calc(100% - 8px) 0px, 100% 0, 100% 100%, 0 100% ); } /* Fallback for browsers without clip-path support at all (very old Edge/UC browser): fall back to the small solid-colored notch instead of leaving ::before unclipped (which would otherwise just look like the "no cutout" variant — harmless, but this reads closer to the intended design). Detected via @supports negative query. */ @supports not ( clip-path: polygon(0 0, 0 0) ) { .vrb-cutout-notch { border-radius: 0 0 50% 50% / 0 0 100% 100%; } .vrb-bar.vrb-theme-dark .vrb-cutout-notch { background-color: var(--vrb-dark-cutout); } .vrb-bar.vrb-theme-light .vrb-cutout-notch { background-color: var(--vrb-light-cutout); } } @supports not ( clip-path: polygon(0 0, 0 0) ) { @media (prefers-color-scheme: dark) { .vrb-bar.vrb-theme-auto .vrb-cutout-notch { background-color: var(--vrb-dark-cutout); } } @media (prefers-color-scheme: light) { .vrb-bar.vrb-theme-auto .vrb-cutout-notch { background-color: var(--vrb-light-cutout); } } } /* ---------------- Style variant: icon-only ---------------- */ .vrb-style-icon-only .vrb-label { display: none; } /* ---------------- Style variant: pill (active item gets rounded pill bg) ---------------- */ .vrb-style-pill .vrb-item:not(.is-highlight) .vrb-label { display: none; } .vrb-style-pill .vrb-item.is-active:not(.is-highlight) { flex-direction: row; gap: 6px; border-radius: 999px; padding: 8px 14px 8px 10px; flex: 0 0 auto; } .vrb-style-pill .vrb-item.is-active:not(.is-highlight) .vrb-label { display: inline-block; font-size: 13px; } /* ---------------- Style variant: underline on active item ---------------- */ .vrb-style-underline .vrb-item.is-active:not(.is-highlight)::before { content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 22px; height: 2px; border-radius: 2px; } /* ========================================================================= Modal (custom HTML per button) ========================================================================= */ .vrb-modal-overlay { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: flex-end; justify-content: center; background: rgba(10,10,14,0.55); opacity: 0; transition: opacity 0.2s ease; padding: 0; } .vrb-modal-overlay[hidden] { display: none; } .vrb-modal-overlay.is-open { opacity: 1; } .vrb-modal-box { position: relative; width: 100%; max-width: 480px; max-height: 86vh; overflow-y: auto; -webkit-overflow-scrolling: touch; background: #fff; color: #141417; border-radius: 18px 18px 0 0; padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -10px 40px rgba(0,0,0,0.3); transform: translateY(16px); opacity: 0; transition: transform 0.25s cubic-bezier(.4,0,.2,1), opacity 0.25s ease; } .vrb-modal-overlay.is-open .vrb-modal-box { transform: translateY(0); opacity: 1; } @media (min-width: 600px) { .vrb-modal-overlay { align-items: center; } .vrb-modal-box { border-radius: 18px; } } .vrb-modal-box[data-size="small"] { max-width: 340px; } .vrb-modal-box[data-size="large"] { max-width: 720px; } .vrb-modal-close { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(0,0,0,0.06); font-size: 20px; line-height: 1; cursor: pointer; color: inherit; } .vrb-modal-close:hover { background: rgba(0,0,0,0.12); } .vrb-modal-title { margin: 0 32px 12px 0; font-size: 17px; font-weight: 700; } .vrb-modal-title:empty { display: none; } .vrb-modal-body { font-size: 14px; line-height: 1.5; } .vrb-modal-body img { max-width: 100%; height: auto; } body.vrb-modal-open { overflow: hidden; } @media (prefers-reduced-motion: reduce) { .vrb-modal-overlay, .vrb-modal-box { transition-duration: 0.01ms !important; } } /* ========================================================================= CROSS-BROWSER COMPATIBILITY NOTES ------------------------------------------------------------------------- - backdrop-filter is gated behind @supports with the -webkit- prefix checked first (Safari still requires it); browsers without support (older Firefox < 103, some Android WebViews) simply get the solid background color set above, so the bar never turns transparent. - All of the bar's own paint (background, border, box-shadow, blur) lives on .vrb-bar::before, a full-box layer behind the bar's real content. The *-cutout variants clip that layer with a CSS polygon() tracing a smooth semicircular bite anchored with calc(50% ± Npx) / calc(100% - Npx), so the notch position tracks the bar's own (responsive) width. Because ::before is the only thing painting the bar's surface, the clipped-away region is genuinely transparent — real page content shows through it, not a same- or different-colored fill. clip-path is written with -webkit-clip-path first, then the unprefixed property, for Safari. A @supports negative query falls back to a small solid, contrasting notch color for the rare engine with no clip-path support at all (old Edge/UC browser), rather than leaving the notch invisible. - Colors are read from CSS custom properties; every supported browser from IE-less "evergreen" set (Chrome/Edge/Firefox/Safari, incl. iOS Safari 12+ and Android Chrome) handles this natively. IE11 is not supported by this plugin (no custom properties, no flex gap). - :focus-visible is written as its own rule, separate from :focus, because an unsupported pseudo-class inside a comma-separated selector list invalidates the whole rule in stricter engines. - env(safe-area-inset-bottom) degrades to 0px automatically on browsers/devices without a notch/home-indicator (its fallback value is provided directly in each calc()), so it is safe everywhere, including desktop browsers and Android. - prefers-reduced-motion is respected for both the scroll slide and the modal, satisfying WCAG 2.3.3 on browsers that expose the media query. - The