/* ========================================================= Verdad Builders — Audition Bar (v0.01) Bottom ribbon for previewing logo / color theme / font pair / language combos. Visually neutral chrome — should NEVER feel like part of the brand, so the client can audition objectively. Sits on top of body, pushes footer up via padding-bottom on . ========================================================= */ :root { --aud-bar-h: 56px; --aud-bg: #14161A; --aud-bg-2: #1E2127; --aud-border: #2C3038; --aud-fg: #E7EAF0; --aud-fg-dim: #9AA0AB; --aud-accent: #6FA8FF; --aud-radius: 6px; --aud-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } /* push the page up so the footer isn't covered */ body.has-audition-bar { padding-bottom: var(--aud-bar-h); } /* ---------- Bar shell ---------- */ .aud-bar { position: fixed; left: 0; right: 0; bottom: 0; height: var(--aud-bar-h); background: var(--aud-bg); color: var(--aud-fg); border-top: 1px solid var(--aud-border); font-family: var(--aud-font); font-size: 13px; line-height: 1; z-index: 9999; display: flex; align-items: center; gap: 10px; padding: 0 12px; box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.25); /* never inherits theme fonts */ font-variant-ligatures: none; } .aud-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--aud-fg-dim); margin-right: 6px; white-space: nowrap; } .aud-brand { display: flex; align-items: center; gap: 8px; padding-right: 12px; border-right: 1px solid var(--aud-border); margin-right: 4px; color: var(--aud-fg-dim); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; } .aud-brand-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--aud-accent); box-shadow: 0 0 8px var(--aud-accent); } /* ---------- Dropdowns ---------- */ .aud-dd { position: relative; display: inline-flex; align-items: center; } .aud-dd-btn { appearance: none; background: var(--aud-bg-2); color: var(--aud-fg); border: 1px solid var(--aud-border); border-radius: var(--aud-radius); padding: 8px 28px 8px 12px; font-family: var(--aud-font); font-size: 13px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; min-height: 34px; transition: background 0.12s ease, border-color 0.12s ease; position: relative; } .aud-dd-btn:hover { background: #262A32; border-color: #3A3F4A; } .aud-dd-btn:focus-visible { outline: 2px solid var(--aud-accent); outline-offset: 1px; } .aud-dd-btn::after { content: ""; position: absolute; right: 10px; top: 50%; width: 8px; height: 8px; border-right: 1.5px solid var(--aud-fg-dim); border-bottom: 1.5px solid var(--aud-fg-dim); transform: translateY(-70%) rotate(45deg); pointer-events: none; } /* per-dropdown widths */ .aud-dd--logo .aud-dd-btn { min-width: 110px; } .aud-dd--theme .aud-dd-btn { min-width: 240px; } .aud-dd--font .aud-dd-btn { min-width: 140px; } .aud-dd--lang .aud-dd-btn { min-width: 88px; } /* swatches inside the theme button */ .aud-swatches { display: inline-flex; gap: 3px; margin-left: auto; padding-left: 6px; } .aud-swatch { width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(255,255,255,0.12); display: inline-block; } /* ---------- Dropdown menu ---------- */ .aud-menu { position: absolute; bottom: calc(100% + 8px); left: 0; min-width: 100%; background: var(--aud-bg-2); border: 1px solid var(--aud-border); border-radius: 8px; padding: 6px; max-height: 60vh; overflow-y: auto; box-shadow: 0 10px 30px rgba(0,0,0,0.4); display: none; z-index: 10000; } .aud-dd.is-open .aud-menu { display: block; } .aud-menu-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 5px; cursor: pointer; white-space: nowrap; color: var(--aud-fg); font-size: 13px; border: 1px solid transparent; } .aud-menu-item:hover { background: #2D323B; } .aud-menu-item.is-active { background: #2A3140; border-color: var(--aud-accent); } .aud-menu-num { font-size: 10px; color: var(--aud-fg-dim); width: 18px; text-align: right; font-variant-numeric: tabular-nums; } .aud-menu-name { font-weight: 500; } .aud-menu-sub { font-size: 11px; color: var(--aud-fg-dim); margin-left: 4px; } /* logo preview thumb in menu */ .aud-logo-thumb { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; color: var(--aud-fg); } .aud-logo-thumb svg { width: 100%; height: 100%; } /* theme swatch strip in menu */ .aud-menu .aud-swatches { margin-left: auto; } /* font preview in menu */ .aud-font-preview { display: inline-flex; flex-direction: column; align-items: flex-end; margin-left: auto; font-size: 11px; color: var(--aud-fg-dim); line-height: 1.15; } .aud-font-preview .h { font-size: 13px; color: var(--aud-fg); } /* ---------- Brand mark override when audition logo is active ---------- */ .brand-mark.aud-has-logo { background: transparent !important; width: auto !important; height: 28px !important; border-radius: 0 !important; transform: none !important; display: inline-flex !important; align-items: center; color: var(--color-clay, #B8553A); } .brand-mark.aud-has-logo svg { height: 100%; width: auto; } /* ---------- Hide Google Translate's own UI ---------- */ .skiptranslate, .goog-te-banner-frame, #goog-gt-tt, .goog-te-balloon-frame { display: none !important; } body { top: 0 !important; } font[style*="background-color"] { background-color: transparent !important; box-shadow: none !important; } #google_translate_element { position: absolute; left: -9999px; top: -9999px; visibility: hidden; } /* ---------- Mobile: collapse to scrollable horizontal strip ---------- */ @media (max-width: 720px) { :root { --aud-bar-h: 64px; } .aud-bar { overflow-x: auto; padding: 0 8px; gap: 6px; } .aud-brand { display: none; } .aud-label { display: none; } .aud-dd--theme .aud-dd-btn { min-width: 180px; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .aud-dd-btn { transition: none; } }