/* ============================================================ LIBERTY DIGITIZING — MAIN-SITE SHELL & MARKETING LAYER Consumes tokens from brand.css. Everything is namespaced (lb-*) so it never leaks into admin/designer/partner. Rendered by include/header.php + include/footer.php. ============================================================ */ :root { --lb-gold-light: #f4e4bc; --lb-serif: 'Playfair Display', Georgia, serif; --lb-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --lb-topbar-h: 76px; } /* ---------- Page canvas (marketing pages set ) ---------- */ body.lb-page { background: radial-gradient(ellipse 60% 40% at 85% -5%, rgba(212, 175, 55, .07), transparent), radial-gradient(ellipse 50% 35% at 0% 30%, rgba(212, 175, 55, .04), transparent), var(--brand-bg); color: var(--brand-text); font-family: var(--lb-sans); line-height: 1.65; overflow-x: hidden; } .lb-page img { max-width: 100%; } /* ---------- Announcement strip ---------- */ .lb-announce { position: relative; z-index: 1002; overflow: hidden; background: linear-gradient(90deg, rgba(212, 175, 55, .16), rgba(212, 175, 55, .05) 40%, rgba(212, 175, 55, .16)); border-bottom: 1px solid rgba(212, 175, 55, .25); font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; } .lb-announce.hidden { display: none; } .lb-announce-track { display: flex; justify-content: center; gap: 3rem; padding: .45rem 3rem; white-space: nowrap; animation: lb-ticker 36s linear infinite; color: var(--lb-gold-light); } .lb-announce-item { flex: none; } @keyframes lb-ticker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .lb-announce-close { position: absolute; top: 50%; right: .9rem; transform: translateY(-50%); background: transparent; border: 0; color: var(--lb-gold-light); cursor: pointer; font-size: .85rem; padding: .3rem; line-height: 1; opacity: .8; } .lb-announce-close:hover { opacity: 1; } /* ---------- Sticky translucent topbar ---------- */ .lb-topbar { position: sticky; top: 0; z-index: 1000; width: 100%; background: rgba(10, 10, 10, .72); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); border-bottom: 1px solid rgba(212, 175, 55, .18); transition: box-shadow .25s ease, background .25s ease; } .lb-topbar.scrolled, .lb-topbar.announcement-hidden { background: rgba(10, 10, 10, .92); box-shadow: 0 12px 34px rgba(0, 0, 0, .45); } .lb-topbar-inner { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; height: var(--lb-topbar-h); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; } .lb-logo { display: inline-flex; align-items: center; flex: none; } .lb-logo img { height: 46px; width: auto; display: block; } .lb-nav { display: flex; align-items: center; gap: .35rem; } .lb-nav-link { position: relative; display: inline-flex; align-items: center; gap: .35rem; padding: .55rem .8rem; border-radius: 8px; color: var(--brand-text); text-decoration: none; font-size: .86rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; transition: color .18s ease, background .18s ease; white-space: nowrap; } .lb-nav-link i { font-size: .62rem; opacity: .7; transition: transform .18s ease; } .lb-nav-link::after { content: ''; position: absolute; left: .8rem; right: .8rem; bottom: .28rem; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--brand-gold), var(--lb-gold-light)); transform: scaleX(0); transform-origin: left; transition: transform .22s ease; } .lb-nav-link:hover { color: var(--brand-gold); } .lb-nav-link:hover::after { transform: scaleX(1); } .lb-nav-drop { position: relative; } .lb-nav-drop:hover > .lb-nav-link i, .lb-nav-drop:focus-within > .lb-nav-link i { transform: rotate(180deg); } .lb-drop-panel { position: absolute; top: calc(100% + 10px); left: 50%; transform: translate(-50%, 8px); min-width: 240px; background: rgba(17, 17, 17, .97); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(212, 175, 55, .22); border-radius: 14px; box-shadow: 0 26px 54px rgba(0, 0, 0, .55); padding: .6rem; opacity: 0; visibility: hidden; transition: opacity .2s ease, transform .2s ease, visibility .2s; } .lb-nav-drop:hover .lb-drop-panel, .lb-nav-drop:focus-within .lb-drop-panel { opacity: 1; visibility: visible; transform: translate(-50%, 0); } .lb-drop-panel a { display: block; padding: .55rem .85rem; border-radius: 9px; color: var(--brand-text); text-decoration: none; font-size: .88rem; transition: background .15s ease, color .15s ease, padding-left .15s ease; } .lb-drop-panel a:hover { background: rgba(212, 175, 55, .1); color: var(--brand-gold); padding-left: 1.05rem; } /* ---------- Topbar actions ---------- */ .lb-actions { display: flex; align-items: center; gap: .6rem; flex: none; } .lb-action-link { display: inline-flex; align-items: center; gap: .45rem; padding: .5rem .85rem; border-radius: 999px; font-size: .82rem; font-weight: 600; text-decoration: none; color: var(--brand-text); border: 1px solid var(--brand-border-strong); white-space: nowrap; transition: border-color .18s ease, color .18s ease, background .18s ease; } .lb-action-link:hover { border-color: var(--brand-gold); color: var(--brand-gold); } .lb-action-cta { background: linear-gradient(145deg, var(--brand-gold), var(--brand-gold-dark)); color: #0a0a0a !important; border-color: transparent; box-shadow: 0 6px 18px rgba(212, 175, 55, .25); } .lb-action-cta:hover { background: linear-gradient(145deg, var(--lb-gold-light), var(--brand-gold)); color: #0a0a0a !important; } /* Cart indicator */ .lb-cart-wrap { position: relative; } .lb-cart-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--brand-border-strong); background: rgba(255, 255, 255, .04); color: var(--brand-text); cursor: pointer; font-size: 1rem; transition: border-color .18s ease, color .18s ease; } .lb-cart-btn:hover { border-color: var(--brand-gold); color: var(--brand-gold); } .lb-cart-badge { position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: linear-gradient(145deg, var(--brand-gold), var(--brand-gold-dark)); color: #0a0a0a; font-size: .68rem; font-weight: 800; display: flex; align-items: center; justify-content: center; } #cartDropdown { display: none; position: absolute; top: calc(100% + 14px); right: 0; width: 340px; max-width: 88vw; background: rgba(17, 17, 17, .98); border: 1px solid rgba(212, 175, 55, .22); border-radius: 14px; box-shadow: 0 26px 54px rgba(0, 0, 0, .6); overflow: hidden; z-index: 1200; } #cartDropdown.active { display: block; } .lb-cart-head { display: flex; align-items: center; gap: .5rem; padding: .85rem 1rem; font-weight: 700; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-gold); border-bottom: 1px solid var(--brand-border); background: rgba(212, 175, 55, .06); } .lb-cart-empty { padding: 1.6rem 1rem; text-align: center; color: var(--brand-text-muted); font-size: .88rem; } .lb-cart-items { max-height: 300px; overflow-y: auto; } .lb-cart-item { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border-bottom: 1px solid var(--brand-border); } .lb-cart-item img { width: 46px; height: 46px; object-fit: cover; border-radius: 8px; border: 1px solid var(--brand-border-strong); } .lb-cart-item-name { margin: 0 0 .15rem; font-size: .84rem; font-weight: 600; color: var(--brand-text); } .lb-cart-item-meta { font-size: .74rem; color: var(--brand-text-muted); } .lb-cart-remove { margin-left: auto; background: transparent; border: 1px solid var(--brand-border-strong); color: var(--brand-text-muted); border-radius: 8px; width: 28px; height: 28px; cursor: pointer; font-size: .75rem; transition: all .15s ease; } .lb-cart-remove:hover { border-color: var(--brand-danger); color: var(--brand-danger); } .lb-cart-foot { padding: .85rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: .8rem; color: var(--brand-text-muted); } .lb-cart-foot-actions { padding: 0 1rem 1rem; display: flex; gap: .5rem; } /* Hamburger */ .lb-burger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 42px; height: 42px; padding: 0 .55rem; background: transparent; border: 1px solid var(--brand-border-strong); border-radius: 10px; cursor: pointer; } .hamburger-line { display: block; height: 2px; width: 100%; border-radius: 2px; background: var(--brand-gold); transition: transform .25s ease, opacity .25s ease; } /* ---------- Mobile drawer ---------- */ #mobileOverlay.lb-mobile-overlay { position: fixed; inset: 0; z-index: 1400; background: rgba(0, 0, 0, .6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s; } #mobileOverlay.lb-mobile-overlay.active { opacity: 1; visibility: visible; } #mobileMenu.lb-mobile-menu { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1500; width: min(360px, 88vw); background: #101010; border-left: 1px solid rgba(212, 175, 55, .2); transform: translateX(102%); /* visibility, not just transform. Translated off-canvas, this drawer stayed visibility:visible, so its 36 links and buttons remained in the tab order and the accessibility tree while closed: tabbing through index.php at 390px put focus inside the shut menu for 14 stops out of the first 60, with no focus ring anywhere on screen. visibility:hidden removes descendants from both, and is what #mobileOverlay directly above already does -- this rule just never picked up the pattern. Transitioning visibility alongside transform keeps the drawer painted for the whole close animation instead of blinking out at frame one. Chosen over the inert attribute deliberately: inert needs a recent browser, this does not, and production is older than dev. */ visibility: hidden; transition: transform .3s cubic-bezier(.22, .8, .36, 1), visibility .3s; display: flex; flex-direction: column; overflow-y: auto; } #mobileMenu.lb-mobile-menu.active { transform: translateX(0); visibility: visible; } .lb-mobile-head { display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--brand-border); } .lb-mobile-head img { height: 40px; } .lb-mobile-close { background: transparent; border: 1px solid var(--brand-border-strong); border-radius: 10px; color: var(--brand-text); width: 38px; height: 38px; cursor: pointer; font-size: 1rem; } .lb-mobile-body { padding: 1rem 1.25rem 2rem; display: flex; flex-direction: column; gap: .25rem; } .lb-mobile-link { display: block; padding: .7rem .5rem; color: var(--brand-text); text-decoration: none; font-weight: 600; font-size: .95rem; border-radius: 8px; } .lb-mobile-link:hover { color: var(--brand-gold); background: rgba(212, 175, 55, .06); } .lb-mobile-group-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; background: transparent; border: 0; color: var(--brand-text); font: inherit; font-weight: 600; font-size: .95rem; padding: .7rem .5rem; cursor: pointer; border-radius: 8px; text-align: left; } .lb-mobile-sub { display: none; padding: 0 0 .4rem .9rem; } .lb-mobile-sub.active { display: block; } .lb-mobile-sub a { display: block; padding: .45rem .5rem; color: var(--brand-text-muted); text-decoration: none; font-size: .88rem; border-left: 1px solid rgba(212, 175, 55, .25); } .lb-mobile-sub a:hover { color: var(--brand-gold); } .lb-mobile-ctas { margin-top: 1.1rem; display: flex; flex-direction: column; gap: .6rem; } /* Universal popup overlay (service / portfolio quick views) */ .lb-popup-overlay { position: fixed; inset: 0; z-index: 2000; display: none; align-items: center; justify-content: center; background: rgba(5, 5, 5, .82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 1.25rem; } .lb-popup-box { position: relative; width: 100%; max-width: 620px; max-height: 86vh; overflow-y: auto; background: var(--brand-surface); border: 1px solid rgba(212, 175, 55, .3); border-radius: 18px; box-shadow: 0 40px 80px rgba(0, 0, 0, .6); padding: 1.75rem; } .lb-popup-close { position: absolute; top: .9rem; right: .9rem; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(212, 175, 55, .4); background: rgba(212, 175, 55, .1); color: var(--brand-gold); cursor: pointer; font-size: .9rem; z-index: 2; } .lb-popup-box h3 { font-family: var(--lb-serif); color: var(--brand-gold); margin: 0 0 .75rem; font-size: 1.35rem; } .lb-popup-box img { border-radius: 12px; margin-bottom: 1rem; } .lb-popup-box p { color: var(--brand-text-muted); margin: 0 0 .6rem; } /* Product modal (legacy hook kept for product landing pages) */ #productModal.lb-product-modal { position: fixed; inset: 0; z-index: 1900; display: none; align-items: center; justify-content: center; background: rgba(5, 5, 5, .82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 1.25rem; } #productModal.lb-product-modal.active { display: flex; } #productModal .lb-product-dialog { position: relative; width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; background: var(--brand-surface); border: 1px solid rgba(212, 175, 55, .3); border-radius: 18px; box-shadow: 0 40px 80px rgba(0, 0, 0, .6); padding: 1.75rem; } #productModal .lb-product-close { position: absolute; top: .9rem; right: .9rem; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(212, 175, 55, .4); background: rgba(212, 175, 55, .1); color: var(--brand-gold); cursor: pointer; font-size: .9rem; } /* ---------- Shared layout primitives ---------- */ .lb-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; } .lb-service-jump { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .45rem; padding: .7rem 1rem; background: rgba(10,10,10,.92); border-bottom: 1px solid rgba(212,175,55,.2); backdrop-filter: blur(12px); } .lb-service-jump span { color: var(--brand-text-muted); font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin-right: .25rem; } .lb-service-jump a { color: var(--brand-text); border: 1px solid rgba(255,255,255,.12); border-radius: 999px; padding: .42rem .72rem; font-size: .78rem; text-decoration: none; transition: .2s ease; } .lb-service-jump a:hover, .lb-service-jump a:focus-visible { color: #0a0a0a; background: var(--brand-gold); border-color: var(--brand-gold); } .lb-service-jump a.is-cta { color: #0a0a0a; background: var(--brand-gold); border-color: var(--brand-gold); font-weight: 800; } .lb-pricing-note { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .8rem 1.2rem; margin: 1.5rem auto 0; max-width: 900px; padding: 1rem 1.2rem; } .lb-pricing-note strong { color: var(--brand-gold); } .lb-pricing-note span { color: var(--brand-text-muted); font-size: .88rem; } .lb-section { padding: 5.5rem 0; position: relative; } .lb-section--tight { padding: 3.5rem 0; } .lb-section--raised { background: linear-gradient(180deg, rgba(255, 255, 255, .02), transparent); border-top: 1px solid var(--brand-border); border-bottom: 1px solid var(--brand-border); } .lb-eyebrow { display: inline-flex; align-items: center; gap: .55rem; font-size: .74rem; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--brand-gold); margin-bottom: 1rem; } .lb-eyebrow::before { content: ''; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, var(--brand-gold)); } .lb-eyebrow::after { content: ''; width: 34px; height: 1px; background: linear-gradient(90deg, var(--brand-gold), transparent); } .lb-eyebrow--left::before { display: none; } .lb-title { font-family: var(--lb-serif); font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 700; line-height: 1.15; margin: 0 0 1rem; color: var(--brand-text); } .lb-sub { color: var(--brand-text-muted); max-width: 640px; margin: 0 auto; font-size: 1.02rem; } .lb-gold { color: var(--brand-gold); } .lb-center { text-align: center; } .lb-head { margin-bottom: 3rem; } /* Buttons */ .lb-btn { display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: .85rem 1.7rem; border-radius: 999px; font-weight: 700; font-size: .92rem; letter-spacing: .03em; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, color .18s ease; } .lb-btn:hover { transform: translateY(-2px); } .lb-btn--gold { background: linear-gradient(145deg, var(--brand-gold), var(--brand-gold-dark)); color: #0a0a0a !important; box-shadow: 0 10px 26px rgba(212, 175, 55, .28); } .lb-btn--gold:hover { background: linear-gradient(145deg, var(--lb-gold-light), var(--brand-gold)); box-shadow: 0 14px 32px rgba(212, 175, 55, .38); } .lb-btn--ghost { background: rgba(255, 255, 255, .04); border-color: rgba(212, 175, 55, .45); color: var(--brand-gold) !important; } .lb-btn--ghost:hover { background: rgba(212, 175, 55, .12); } .lb-btn--sm { padding: .55rem 1.15rem; font-size: .82rem; } /* Orphan 9. .lb-btn--block sits on ten buttons across cart / contact / faqs / index (x4) / pricing (x2) and had ZERO rules in site.css, style.css and brand.css -- the only definition anywhere in the repo is a page-local