/* Pagination controls for product grids */ .pagination-controls, #bat-pagination, #glove-pagination, #batglo-pagination { display: flex; justify-content: center; gap: .5rem; margin-top: 1.25rem; } /* Product detail dialog layout */ .product-detail-dialog { width:min(100%,1000px); border:none; padding:0; background:transparent; } .product-detail-dialog::backdrop { background:rgba(0,0,0,.55); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); } .product-detail-dialog .panel { max-height:90vh; overflow:auto; background:#fff; border-radius:12px; box-shadow:0 12px 34px -8px rgba(0,0,0,.3),0 4px 16px -4px rgba(0,0,0,.2); } /* Uniform padding rhythm for dialog sections */ .product-detail-dialog .panel-head{display:flex;align-items:center;justify-content:space-between;padding:.85rem 1rem;border-bottom:1px solid var(--border)} .product-detail-dialog .panel-head h3{margin:0;font-size:1.1rem;font-weight:900} .product-detail-dialog .panel-body{padding:1rem} .product-detail-dialog .panel-foot{display:flex;gap:.5rem;justify-content:flex-end;padding:.85rem 1rem;border-top:1px solid var(--border)} .product-detail-layout { display:flex; flex-wrap:wrap; gap:2rem; } .product-detail-layout .gallery { flex:1 1 380px; min-width:320px; } .product-detail-layout .info { flex:1 1 340px; min-width:300px; } .product-detail-layout .main-image { aspect-ratio: 4/3; background:#f3f3f5; display:flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:8px; overflow:hidden; margin-bottom:.75rem; } .product-detail-layout .main-image img { width:100%; height:100%; object-fit:contain; } /* Ensure the main product image always fits fully inside its box */ #pd-main-img { width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; object-position:center; display:block; } .product-detail-layout .thumbs { display:flex; flex-wrap:wrap; gap:.5rem; } .product-detail-layout .thumb { border:1px solid var(--border); background:#fff; border-radius:6px; padding:2px; cursor:pointer; display:inline-flex; } .product-detail-layout .thumb.active, .product-detail-layout .thumb:focus-visible { outline:none; border-color:var(--brand); box-shadow:0 0 0 2px color-mix(in oklab, white 50%, var(--brand) 60%); } .product-detail-layout .thumb img { width:54px; height:54px; object-fit:contain; } .product-detail-dialog h4 { margin:1.25rem 0 .5rem; font-size:1rem; font-weight:700; letter-spacing:.25px; } .product-detail-dialog .feature-list { list-style:disc; margin:.25rem 0 0 1.15rem; padding:0; font-size:.85rem; line-height:1.35; } .product-detail-dialog .feature-list li + li { margin-top:.25rem; } .product-detail-dialog .price-lg { font-size:1.4rem; font-weight:800; margin:.25rem 0 1rem; } /* Inputs in dialog: match site form aesthetics */ .product-detail-dialog select, .product-detail-dialog input[type="number"], .product-detail-dialog input[type="text"]{ padding:.65rem .8rem; border:1px solid var(--border); border-radius:.6rem; background:#fff; color:var(--ink); } .product-detail-dialog .text-xs.muted{opacity:.8} @media (max-width:720px){ .product-detail-layout { flex-direction:column; } .product-detail-dialog { width:min(100%,95vw); } } /* Pagination button refinement (replaces inline styles) */ .pagination-btn { position:relative; min-width:42px; } .grid, #category-grid { --col-min:240px; display:grid; grid-template-columns:repeat(auto-fill,minmax(var(--col-min),1fr)); gap:1.1rem; } .product-card .media.aspect { aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; background:#f5f5f7; border:1px solid var(--border); border-radius:8px; overflow:hidden; } .product-card .media.aspect img { width:100%; height:100%; object-fit:contain; } .product-card .price-row { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-top:.45rem; } .product-card .price-row .actions { display:flex; gap:.35rem; } .product-card h3 { font-size:.9rem; font-weight:700; line-height:1.25; margin:.55rem 0 .25rem; min-height:2.4em; } /* Color dots for products with multiple color options */ .color-dots { display: flex; flex-wrap: nowrap; /* force single row */ gap: 4px; margin: 8px 0 6px; padding-left: 12px; min-height: 28px; align-items: center; justify-content: flex-start; overflow-x: auto; /* allow horizontal scroll if needed */ -webkit-overflow-scrolling: touch; } .color-dot { width: 12px; height: 12px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.15); cursor: pointer; transition: all 0.15s ease; position: relative; flex-shrink: 0; } /* Optional number label inside neutral dots */ .color-dot .dot-label { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 8px; line-height: 1; font-weight: 800; color: #111; pointer-events: none; } .color-dot:hover { transform: scale(1.15); border-color: rgba(0,0,0,0.3); box-shadow: 0 1px 3px rgba(0,0,0,0.15); } .color-dot.active { transform: scale(1.2); border-color: var(--brand); border-width: 2px; box-shadow: 0 0 0 2px rgba(36,23,115,0.25); } /* Color mappings */ .color-dot.black { background-color: #000000; } .color-dot.white { background-color: #ffffff; border-color: rgba(0,0,0,0.3); } .color-dot.red { background-color: #dc2626; } .color-dot.blue { background-color: #2563eb; } .color-dot.navy { background-color: #1e40af; } .color-dot.green { background-color: #16a34a; } .color-dot.darkgreen { background-color: #15803d; } .color-dot.yellow { background-color: #eab308; } .color-dot.orange { background-color: #ea580c; } .color-dot.purple { background-color: #9333ea; } .color-dot.maroon { background-color: #991b1b; } .color-dot.royal { background-color: #3b82f6; } .color-dot.columbiablue { background-color: #60a5fa; } .color-dot.brown { background-color: #8B4513; } .color-dot.neutral { background-color: #cbd5e1; border-color: rgba(0,0,0,0.25); } /* Slightly larger dots on L‑Screens pages for better visibility */ body.lscreens-subnav .color-dot { width: 14px; height: 14px; } @media (max-width:560px){ .grid, #category-grid { --col-min:170px; gap:.85rem; } .product-card h3 { font-size:.8rem; } .color-dot { width: 10px; height: 10px; } .color-dots { gap: 3px; margin: 6px 0 4px; min-height: 24px; overflow-x: auto; /* maintain single row with scroll on mobile */ } } .pagination-btn.is-active, .pagination-btn[aria-current="page"] { background: var(--brand); color:#fff; box-shadow:0 0 0 2px rgba(255,255,255,.15),0 0 0 4px rgba(36,23,115,.35); } .pagination-btn:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(36,23,115,.45); } /* Global heading rhythm & fluid scale (adds consistency across simple content pages) */ h1, .page-title { line-height:1.08; font-weight:900; letter-spacing:.6px; } h1:not(.hero-copy h1):not(.netting-hero h1):not(.net-hero h1) { font-size:clamp(1.85rem,4.4vw,2.75rem); margin:.25rem 0 .85rem; } h2 { font-size:clamp(1.25rem,2.9vw,1.9rem); line-height:1.15; font-weight:800; margin:1.6rem 0 .65rem; } h3 { font-size:clamp(1.05rem,2.4vw,1.35rem); line-height:1.2; font-weight:800; margin:1.2rem 0 .5rem; } /* Consistent text sizing for small helper text */ small, .text-xs { font-size:.72rem; line-height:1.2; } /* Unified paragraph spacing (light-touch: only when not the last in a container) */ p { line-height:1.45; } p + p { margin-top:.75rem; } /* Container padding refinement for very wide & very narrow screens */ @media (min-width:1400px){ .container{padding-inline:clamp(1.5rem,2vw,2.75rem);} } @media (max-width:380px){ .container{padding-inline:clamp(.85rem,4.5vw,1.15rem);} } /* Improved focus states for interactive elements (accessible) */ a:focus-visible, button:focus-visible, [role="button"]:focus-visible { outline:none; box-shadow:var(--ring); } /* Reduced motion preference – minimize large transforms */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } } /* Centered nav utility for header */ .nav-centered { justify-content: center !important; } /* Typography (relaxed to prevent unintended truncation) */ .container, .footer-grid, .about-inner, .category-tiles .tiles, .grid, .banner-row { min-width:0; } /* Allow natural wrapping; only truncate where explicitly needed via .truncate */ .truncate { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* Prevent overflow in tight card headings without forcing single-line */ .card .body h3, .banner .content h3 { overflow-wrap: anywhere; } /* Keep cart rows from blowing out but allow wrapping */ .cart-row strong, .cart-row div { overflow-wrap:anywhere; } /* Restore compact single-line styling for tile & banner headings to match original layout */ .tile .tile-head h3, .tile .tile-head p, .banner .content h3 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } /* Responsive font scaling for all text */ body, .container, .footer-grid, .about-inner, .category-tiles .tiles, .grid, .banner-row, .card, .tile, .banner, .about, .site-footer { font-size: clamp(0.95rem, 2vw, 1.1rem); } /* EZ Sports Netting — styles */ :root{ /* Brand palette: #241773 (brand primary deep purple), #d3d0d7 (neutral), #000000 (ink) */ --bg:#ffffff; /* clean white background */ --surface:#ffffff; --border:#d3d0d7; /* neutral borders/surfaces */ --ink:#000000; /* primary text */ --ink-2:#000000; /* secondary text (kept dark for contrast) */ --brand:#241773; /* primary brand (updated) */ --brand-2:#241773; /* unify accents to brand */ --primary: var(--brand); /* alias used in admin/styles */ --red:#d7263d; --blue:#0e7dd8; --muted:#5a5a5a; /* muted text; stays readable on white */ /* Adjusted focus ring to work with deeper purple hue (slightly higher alpha) */ --ring: 0 0 0 3px color-mix(in oklab, white 8%, var(--brand) 70% / 28%); /* Gold CTA palette (accessible with white text) */ --gold:#8a6a00; /* base (contrast AA with white) */ --gold-hover:#a07c00; /* hover/ focus */ --gold-active:#6d5200; /* active/ pressed */ } /* Request Quote button state overrides (EZ Nets page) */ .btn-quote { transition: background-color .25s, color .25s, box-shadow .25s; } .btn-quote:hover, .btn-quote:focus-visible { background: var(--gold-hover) !important; color:#000 !important; border-color: var(--gold-hover) !important; } .btn-quote:active { background:#ffffff !important; color:#000 !important; border-color: var(--brand) !important; } /* ===================================================================== Unified Brand Purple Palette Enforcement Single hue: #241773. Differentiation via purple→white gradients only. ===================================================================== */ :root { --brand:#241773 !important; --brand-2:#241773 !important; --primary:#241773 !important; --ink-2:#241773 !important; /* secondary emphasis now purple when used */ } /* Core gradient helper classes (directional variants) */ .bg-purple-diag-1 { background:linear-gradient(135deg,#241773 0%, #ffffff 140%) !important; } .bg-purple-diag-2 { background:linear-gradient(45deg,#241773 0%, #ffffff 140%) !important; } .bg-purple-vert { background:linear-gradient(180deg,#241773 0%, #ffffff 140%) !important; } .bg-purple-horiz { background:linear-gradient(90deg,#241773 0%, #ffffff 140%) !important; } /* Replace multi‑hue purple backgrounds with single-hue gradients */ .mega-hero, .net-hero, .netting-hero, .contact-hero, .turf-hero, .expert-cta, .spotlight-wrap, .banner, .banner.red, .banner.blue { background:linear-gradient(135deg,#241773 0%, #ffffff 160%) !important; } /* Remove decorative pseudo gradients that referenced older purples */ .fr-card:before, .hero-card:before, .banner:before, .netting-hero:before, .mega-hero:after, .spotlight-wrap:after { background:none !important; } /* Buttons unify on purple except specialized quote button */ .btn, .btn-primary, .btn-ghost, .btn-invert, .btn-pill, .icon-btn { background:#241773 !important; border-color:#241773 !important; color:#ffffff !important; } .btn:hover, .btn-primary:hover, .btn-ghost:hover, .btn-invert:hover, .btn-pill:hover, .icon-btn:hover, .btn:focus-visible, .btn-primary:focus-visible { filter:brightness(1.06); } .btn:active, .btn-primary:active { filter:brightness(.9); } .btn-quote { background:#000 !important; border-color:#000 !important; color:#fff !important; } /* Nav & submenu */ .quick-links a:hover, .quick-links .auth-link:hover { background:linear-gradient(135deg,#241773 0%, #241773 65%, #ffffff 140%) !important; color:#fff !important; } .quick-links a.is-active, .quick-links a[aria-current="page"] { background:linear-gradient(135deg,#241773 0%, #ffffff 130%) !important; color:#fff !important; } .quick-links .nav-submenu { background:#241773 !important; border-color:#241773 !important; } .quick-links .nav-submenu a { color:#fff !important; } .quick-links .nav-submenu a:hover { background:rgba(255,255,255,.15) !important; } /* Avatar */ .profile-btn { background:#241773 !important; } .profile-btn:active { background:#ffffff !important; } /* Active chips / tags */ .chip.is-active { background:#241773 !important; border-color:#241773 !important; color:#fff !important; } /* Focus rings keep readability */ input:focus, textarea:focus, select:focus { border-color:#241773 !important; box-shadow:0 0 0 3px rgba(36,23,115,.35) !important; } /* Links */ a, .inline-links a { color:#8a6a00; } a:hover, .inline-links a:hover { text-decoration:underline; } /* Dropdown & mini-cart subtle accents */ .user-dropdown a:hover, .user-dropdown button:hover { background:rgba(36,23,115,.08) !important; } .mini-cart__panel header { border-color:#241773 !important; } /* Selection */ ::selection { background:#241773; color:#fff; } /* (Removed: legacy #lscreens-subnav external sub-navigation styles) */ /* Utility catch-all: any old purple class variants collapse to brand */ [class*="purple"], [class*="violet"], [class*="lavender"] { color:#241773 !important; } /* Preserve footer black for contrast; don't override it here */ /* Subscribe button state styling */ .subscribe button.btn-primary { background: var(--gold) !important; border-color: var(--gold) !important; color: #000 !important; transition: background .25s, color .25s, border-color .25s; } .subscribe button.btn-primary:hover, .subscribe button.btn-primary:focus-visible { background: var(--brand) !important; /* purple on hover */ border-color: var(--brand) !important; color:#fff !important; } .subscribe button.btn-primary:active { background: #ffffff !important; /* white during click */ color:#000 !important; border-color: var(--brand) !important; } /* Spacing utilities */ .space-y-xl{margin:2rem 0 3rem} /* EZ Nets sub-navigation (uniform across all netting category pages) */ .netting-subnav { display:flex !important; flex-wrap:wrap !important; gap:.65rem !important; margin:.85rem 0 1.35rem !important; justify-content:center !important; /* center pills so CTA naturally centers beneath */ text-align:center !important; } /* Center EZ Nets sub-navigation and its trailing quote button across all netting pages */ #netting-subnav{justify-content:center} #netting-subnav + .btn, #netting-subnav + .btn-primary, #netting-subnav + .btn-quote{display:block;margin:0.75rem auto 0} .netting-subnav:not(.is-ready) { display:none !important; } .netting-subnav a { padding:.55rem .9rem !important; border:1px solid var(--border) !important; border-radius:2rem !important; font-weight:700 !important; text-decoration:none !important; color:var(--ink) !important; background:#fff !important; font-size:.85rem !important; line-height:1 !important; display:inline-flex !important; align-items:center !important; transition: background .25s, color .25s, border-color .25s !important; } .netting-subnav a.is-active, .netting-subnav a:hover, .netting-subnav a:focus-visible { background:var(--brand); color:#fff; border-color:var(--brand); outline:none; } .netting-subnav a:focus-visible { box-shadow:0 0 0 3px rgba(13,98,255,.35); } @media (max-width:640px){ .netting-subnav { gap:.5rem; } .netting-subnav a { font-size:.75rem; padding:.5rem .75rem; } } /* Consistent horizontal breathing room + palette-coordinated backgrounds for EZ Nets heroes */ .netting-hero, .net-hero { /* preserve existing top/bottom padding from inline styles, only adjust sides */ padding-left:clamp(.85rem,2.5vw,1.75rem) !important; padding-right:clamp(.85rem,2.5vw,1.75rem) !important; /* Brand-forward gradient using site palette (deep purple) with subtle highlight */ background: radial-gradient(circle at 80% 20%, color-mix(in oklab, var(--brand) 86%, #fff 14%) 0%, transparent 62%), linear-gradient(135deg, color-mix(in oklab, var(--brand) 96%, #000 4%) 0%, color-mix(in oklab, var(--brand) 82%, #fff 18%) 100%) !important; color:#fff !important; border-radius:1.15rem !important; box-shadow:0 10px 38px -12px rgba(0,0,0,.55),0 4px 18px -6px rgba(0,0,0,.45); } /* L-Screens pages: keep hero copy readable on dark gradients (override `.muted`) */ body.lscreens-hub .netting-hero .muted, body.lscreens-subnav .netting-hero .muted, body.lscreens-hub .netting-hero p, body.lscreens-subnav .netting-hero p { color: rgba(255,255,255,.92) !important; } /* Sport-specific variants (kept within site palette) */ .netting-hero--baseball, .nh-baseball { background: radial-gradient(circle at 78% 22%, color-mix(in oklab, var(--brand) 88%, #fff 12%) 0%, transparent 62%), linear-gradient(135deg, color-mix(in oklab, var(--brand) 98%, #000 2%) 0%, color-mix(in oklab, var(--brand) 78%, #fff 22%) 100%) !important; } .netting-hero--golf, .nh-golf { background: radial-gradient(circle at 78% 22%, color-mix(in oklab, var(--brand) 86%, #fff 14%) 0%, transparent 62%), linear-gradient(135deg, color-mix(in oklab, var(--brand) 94%, #000 6%) 0%, color-mix(in oklab, var(--brand) 70%, #fff 30%) 100%) !important; } .netting-hero--lacrosse, .nh-lacrosse { background: radial-gradient(circle at 78% 22%, color-mix(in oklab, var(--brand) 80%, #fff 20%) 0%, transparent 62%), linear-gradient(135deg, color-mix(in oklab, var(--brand) 90%, #000 10%) 0%, color-mix(in oklab, var(--brand) 70%, #fff 30%) 100%) !important; } .netting-hero--soccer, .nh-soccer { background: radial-gradient(circle at 78% 22%, color-mix(in oklab, var(--brand) 84%, #fff 16%) 0%, transparent 62%), linear-gradient(135deg, color-mix(in oklab, var(--brand) 94%, #000 6%) 0%, color-mix(in oklab, var(--brand) 76%, #fff 24%) 100%) !important; } .nh-commercial-netting { background: radial-gradient(circle at 78% 22%, color-mix(in oklab, var(--brand) 92%, #fff 8%) 0%, transparent 62%), linear-gradient(135deg, color-mix(in oklab, var(--brand) 98%, #000 2%) 0%, color-mix(in oklab, var(--brand) 74%, #fff 26%) 100%) !important; } /* Training facility hero: align with brand (remove teal/blue) */ .net-hero.nh-training-facility { background: linear-gradient(135deg, color-mix(in oklab, var(--brand) 96%, #000 4%), color-mix(in oklab, var(--brand) 76%, #000 24%)) !important; color:#fff; border-radius:1.25rem; margin-top:1rem; padding:2.2rem 0 1.75rem; } /* Contact hero spacing (align with netting hero horizontal rhythm) */ .contact-hero { padding-left:clamp(.85rem,2.5vw,1.75rem) !important; padding-right:clamp(.85rem,2.5vw,1.75rem) !important; } /* Contact page layout and form aesthetics */ .contact-grid { display:grid; gap:1.25rem; grid-template-columns: 1.2fr .8fr; align-items:start; } @media (max-width: 860px){ .contact-grid { grid-template-columns: 1fr; } } .contact-form.card { padding:1.25rem; border-radius:.9rem; background:#fff; box-shadow:0 4px 24px rgba(12,32,64,.08); display:grid; gap:.9rem; } .contact-form label { display:grid; gap:.4rem; } .contact-form label > span { font-size:.85rem; color:var(--muted); } .contact-form input, .contact-form textarea { padding:.85rem 1rem; border:1px solid var(--border); border-radius:.7rem; background:#fff; color:var(--ink); } .contact-form textarea { min-height:140px; resize:vertical; } .contact-form input:focus, .contact-form textarea:focus { outline:none; box-shadow:var(--ring); border-color:var(--brand); } .contact-form input:invalid, .contact-form textarea:invalid { border-color: color-mix(in oklab, var(--red) 65%, #fff 35%); } .contact-form .row { display:flex; gap:.65rem; align-items:center; flex-wrap:wrap; } .contact-form .form-msg { font-size:.9rem; color:var(--muted); } .contact-form .form-msg.is-success { color:#15803d; } .contact-form .form-msg.is-error { color:#b91c1c; } .contact-side.card { padding:1.25rem; border-radius:.9rem; background:#fff; box-shadow:0 4px 24px rgba(12,32,64,.08); } .contact-side h3 { margin-top:.25rem; } .contact-side .checks { list-style:none; padding:0; margin:.5rem 0 0; display:grid; gap:.35rem; } .contact-side .checks li { position:relative; padding-left:1.4rem; } .contact-side .checks li::before { content:"✔"; position:absolute; left:0; top:0; color:#15803d; font-weight:700; } /* Global bottom expert CTA (injected on non-contact pages) */ .expert-cta { --cta-bg-dark:#140d2a; --cta-bg-accent:#241773; --cta-bg-accent2:#3a27b0; background: radial-gradient(circle at 72% 18%, color-mix(in oklab,var(--brand) 75%, #fff 25%) 0%, transparent 58%), radial-gradient(circle at 18% 78%, color-mix(in oklab,var(--brand) 55%, #fff 45%) 0%, transparent 65%), linear-gradient(135deg, color-mix(in oklab,var(--brand) 95%, #000 5%) 0%, color-mix(in oklab,var(--brand) 85%, #000 15%) 46%, color-mix(in oklab,var(--brand) 70%, #000 30%) 82%, #1a0d04 100%); color:#fff; padding:2.85rem clamp(1rem,3vw,2.1rem); text-align:center; position:relative; overflow:hidden; margin:3.35rem auto 2.85rem; border:1px solid rgba(255,255,255,.08); border-radius:1.3rem; max-width:1240px; box-shadow:0 12px 42px -10px rgba(0,0,0,.55),0 3px 14px -4px rgba(0,0,0,.45); isolation:isolate; } .expert-cta:before, .expert-cta:after { content:""; position:absolute; inset:0; pointer-events:none; } .expert-cta:before { background:radial-gradient(circle at 12% 38%,rgba(36,23,115,.35),transparent 62%),radial-gradient(circle at 88% 68%,rgba(36,23,115,.28),transparent 64%); mix-blend-mode:color-dodge; } .expert-cta:after { background:linear-gradient(180deg,rgba(36,23,115,.20),rgba(36,23,115,0) 40%,rgba(0,0,0,.55) 115%); mix-blend-mode:soft-light; } .expert-cta h2 { margin:0 0 .95rem; font-size:clamp(1.7rem,4.1vw,2.5rem); font-weight:900; letter-spacing:.75px; text-transform:capitalize; color:#fff; position:relative; } .expert-cta p { margin:.15rem auto 1.7rem; max-width:760px; font-weight:500; line-height:1.45; font-size:clamp(.92rem,1.1vw,1rem); color:rgba(255,255,255,.9); } .expert-cta .cta-btn { background:#ffffff; color:#000000; font-weight:800; padding:1rem 2.35rem; border:2px solid #ffffff; border-radius:2.75rem; font-size:1.05rem; cursor:pointer; display:inline-flex; align-items:center; gap:.65rem; box-shadow:0 6px 18px -4px rgba(0,0,0,.45),0 3px 8px -2px rgba(0,0,0,.35); transition:background .35s, color .35s, transform .35s, box-shadow .35s; position:relative; } .expert-cta .cta-btn:hover, .expert-cta .cta-btn:focus-visible { background:#f2f2f2; color:#000; outline:none; transform:translateY(-4px); box-shadow:0 10px 28px -6px rgba(0,0,0,.55),0 5px 14px -4px rgba(0,0,0,.45); } .expert-cta .cta-btn:active { transform:translateY(0); } @media (max-width:680px){ .expert-cta { padding:2.35rem 1.05rem; margin:2.85rem auto 2.35rem; } .expert-cta h2 { font-size:1.9rem; } .expert-cta p { font-size:.9rem; } .expert-cta .cta-btn { justify-content:center; } } /* Netting subnav expert button */ *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family:"Outfit",system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,Helvetica,Arial,sans-serif; color:var(--ink); background:var(--bg); overflow-x:hidden; /* prevent accidental horizontal scroll */ } /* --------------------------------------------- */ /* Mobile/tablet safe edge containment */ /* Ensures no component hugs the viewport edge */ /* or triggers horizontal scroll on narrow view */ /* --------------------------------------------- */ .no-overflow, .wrap, .net-hero, .netting-hero, .contact-hero, .turf-hero, .expert-cta, .carousel-section, .about-inner, .calc-grid, .inventory-callouts, .turf-grid, .footer-grid, .category-tiles .tiles { max-width:100%; } /* Unified inner horizontal padding for hero-like full width blocks at narrow widths */ @media (max-width:760px){ .net-hero, .netting-hero, .contact-hero, .turf-hero, .expert-cta, .carousel-section { padding-left:clamp(.9rem,5vw,1.25rem) !important; padding-right:clamp(.9rem,5vw,1.25rem) !important; } .footer-grid { padding-left:clamp(.9rem,5vw,1.25rem); padding-right:clamp(.9rem,5vw,1.25rem); } } /* Protect ultra-small devices */ @media (max-width:400px){ .grid, .category-tiles .tiles, .turf-grid, .inventory-callouts { gap:.65rem; } .hero-inner { gap:1.25rem; } .contact-grid, .calc-grid { gap:.85rem; } } /* Prevent long unbroken strings from expanding layout */ *, *::before, *::after { word-wrap:break-word; overflow-wrap:anywhere; } /* Cards & tiles subtle padding adjustment on very narrow */ @media (max-width:480px){ .card .body { padding:.8rem .75rem; } .tile { padding:.55rem .6rem .65rem; } } /* Ensure footer subfooter text doesn’t touch edges */ .subfooter.container { padding-left:clamp(.9rem,5vw,1.25rem); padding-right:clamp(.9rem,5vw,1.25rem); } /* Mini cart panel safe area (iOS notch etc.) */ .mini-cart__panel { padding-bottom: env(safe-area-inset-bottom, 0); } /* utility */ .muted{ color: var(--muted); } .mt-4{ margin-top: 1.25rem; } .mt-1{ margin-top: .5rem; } .mt-6{ margin-top: 1.5rem; } .stack-05{ display:grid; gap:.5rem; } .stack-04{ display:grid; gap:.4rem; } .stack-03{ display:grid; gap:.3rem; } .row-between{ display:flex; justify-content:space-between; } .hidden{ display:none !important; } /* Generic row utility for inline controls */ .row{ display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; } /* Align checkbox label text horizontally with the checkbox */ label.checkbox{ display:inline-flex; align-items:center; gap:.45rem; line-height:1; } label.checkbox input[type="checkbox"]{ margin:0; position:relative; top:0; } /* Auth form layout */ .auth-container{ max-width: 480px; margin: 2rem auto; background:#fff; border-radius:1.2rem; box-shadow:0 4px 24px rgba(12,32,64,.10); padding: 1.5rem; } .auth-form{ display:grid; grid-auto-rows:min-content; gap:.9rem; } .auth-form input{ padding:.85rem 1rem; border:1px solid var(--border); border-radius:.7rem; width:100%; max-width:100%; box-sizing:border-box; } .auth-form .auth-field{ position:relative; display:block; } .auth-form .auth-field input[type="password"], .auth-form .auth-field input.has-peek{ padding-right:2.4rem; } .auth-form .auth-peek{ position:absolute; right:.5rem; top:50%; transform: translateY(-50%); display:flex; align-items:center; gap:.35rem; font-size:.85rem; color:var(--muted); background:transparent; padding:0 .35rem; border-radius:.4rem; cursor:pointer; } /* Eye button variant for show/hide */ .auth-peek-btn{ position:absolute; right:.5rem; top:50%; transform:translateY(-50%); width:32px; height:32px; display:inline-grid; place-items:center; border:none; background:transparent; color:#6b7280; /* gray-500 */ cursor:pointer; padding:0; border-radius:.4rem; } .auth-peek-btn:hover, .auth-peek-btn:focus-visible{ color:#374151; outline:none; box-shadow:var(--ring); } .auth-peek-btn .eye-closed{ display:none; } .auth-peek-btn[aria-pressed="true"] .eye-open{ display:none; } .auth-peek-btn[aria-pressed="true"] .eye-closed{ display:block; } .auth-form .auth-peek input{ width:auto; margin:0; vertical-align:middle; position:relative; top:-1px; } .auth-form .auth-peek .peek-label{ font-size:.8rem; opacity:.75; line-height:1; } .auth-form .grid-2{ display:grid; grid-template-columns:1fr; gap:.6rem; } @media(min-width:520px){ .auth-form .grid-2{ grid-template-columns:1fr 1fr; } } .auth-form .grid-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:.9rem; } @media (max-width:720px){ .auth-form .grid-3{ grid-template-columns:1fr; } } .auth-form .btn{ height: 44px; } img{max-width:100%;display:block} .container{max-width:1200px;width:100%;margin-inline:auto;padding-inline:clamp(.9rem,4vw,2rem)} .container{--gutter-mobile:clamp(1rem,5vw,1.35rem)} .wrap{max-width:1200px;margin-inline:auto;width:100%;} .skip{position:absolute;left:-9999px;top:auto} .skip:focus{left:1rem;top:1rem;background:#fff;color:#111;padding:.5rem .75rem;border-radius:.5rem} /* SEO/A11Y: Utility to add semantic headings/labels without visual/layout impact */ .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} :root{--top-banner-height:0px} /* Promo banner (sitewide, fixed top) */ .promo-banner{position:fixed;top:0;left:0;right:0;z-index:120;background:linear-gradient(90deg,var(--brand),#000);color:#fff;min-height:50px;height:auto;border-bottom:1px solid rgba(255,255,255,.15)} .promo-banner .promo-inner{min-height:50px;height:auto;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.35rem 0} .promo-banner .promo-text{font-size:.78rem;font-weight:800;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} .promo-banner .promo-right{display:flex;align-items:center;gap:.5rem;flex:0 0 auto} .promo-banner .promo-cta{color:#fff;text-decoration:none;font-weight:900;font-size:.78rem;padding:.15rem .55rem;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.18)} .promo-banner .promo-cta:hover{background:rgba(255,255,255,.12)} .promo-banner .promo-close{all:unset;cursor:pointer;display:grid;place-items:center;width:22px;height:22px;border-radius:999px;font-size:1.05rem;line-height:1;font-weight:900;color:#fff;opacity:.9} .promo-banner .promo-close:hover{background:rgba(255,255,255,.14);opacity:1} /* Post-dismiss CTA banner */ .promo-banner.is-cta{background:linear-gradient(90deg,#111827,#000)} .promo-banner.is-cta .promo-inner{min-height:40px;padding:.25rem 0} .promo-banner.is-cta .promo-text{white-space:normal;overflow:visible;text-overflow:clip} .promo-banner .promo-title{font-weight:900;letter-spacing:.2px} .promo-banner .promo-title a{color:#fff;text-decoration:none} .promo-banner .promo-title a:hover{text-decoration:underline} .promo-banner .promo-phone{margin-left:auto;color:#fff;text-decoration:none;font-weight:900;white-space:nowrap;opacity:.95} .promo-banner .promo-phone:hover{text-decoration:underline;opacity:1} @media (max-width:520px){ .promo-banner .promo-text{font-size:.74rem} .promo-banner .promo-cta{display:none} } /* When top banner is shown, shift the entire page down and keep sticky header below it */ body.has-top-banner, body.has-promo-banner{padding-top:var(--top-banner-height)} .has-top-banner .site-header, .has-promo-banner .site-header{top:var(--top-banner-height);padding-top:0} /* Header */ .site-header{position:sticky;top:0;z-index:30;background:#000000;color:#fff;border-bottom:1px solid rgba(255,255,255,.08);padding-top:0} .header-bar{display:flex;align-items:center;gap:1rem;min-height:51px;flex-wrap:wrap} /* Header layout: brand left, nav center, actions right */ .site-header .header-bar{justify-content:space-between;padding:.65rem 0} .brand{display:flex;align-items:center;gap:.6rem;color:#fff;text-decoration:none;font-weight:900;letter-spacing:.3px} .site-header .brand{display:flex !important;flex-direction:row !important;align-items:center !important;justify-content:flex-start !important;flex-wrap:nowrap !important;min-width:0;text-align:left} .site-header .brand img{flex:0 0 auto} .site-header .brand span{display:inline !important;white-space:nowrap;line-height:1.1} .brand img{filter:drop-shadow(0 4px 12px rgba(0,0,0,.25));border-radius:0.75rem;background:#ffffff;} .footer-brand-block > img { border-radius: 0.75rem; background:#ffffff; height: 168px !important; width: auto !important; max-width: 520px; display: block; object-fit: contain; } @media (max-width:560px){ .footer-brand-block > img{height:120px !important;max-width:80vw;} } /* Uniform white background for all logo images across the app */ img[alt*="logo" i], img[src*="EZSportslogo"], img[src*="ezsportslogo"], img[src*="/logo.svg"]{ background:#ffffff; /* Keep current radius if present; otherwise add a soft radius */ border-radius:0.75rem; } .search{display:flex;gap:.5rem;flex:1;justify-content:center} .search{position:relative;gap:0} /* Search input with embedded icon via background SVG */ .search input{width:auto;min-width:16ch;max-width:100%;border-radius:.75rem;border:1px solid var(--border);background:#fff;color:var(--ink);padding:.72rem 1rem .72rem 2.5rem;line-height:1.2;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' stroke='%2388989c' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='8' r='6'/%3E%3Cline x1='13' y1='13' x2='17' y2='17'/%3E%3C/svg%3E");background-repeat:no-repeat;background-size:18px 18px;background-position:12px 50%;} /* Remove legacy absolute button icon usage */ .search .btn{display:none !important} /* Focus state: darken icon by swapping filter */ .search input:focus{outline:none;box-shadow:var(--ring);border-color:var(--brand);} @supports (filter:brightness(1.1)){ .search input:focus{filter:brightness(1.02)} } @media (min-width:1000px){ .site-header .search input{padding:.7rem 1rem .7rem 2.45rem;background-position:12px 50%;} } .search input:focus{outline:none;box-shadow:var(--ring);border-color:var(--brand)} .quick-links{display:flex;align-items:center;justify-content:center;gap:1rem;order:2;flex:1 1 auto;margin-top:.4rem;visibility:hidden} .site-header .header-bar{visibility:hidden} .nav-ready .quick-links{visibility:visible} .nav-ready .site-header .header-bar{visibility:visible} .quick-links a{color:#d3d0d7;text-decoration:none;opacity:.95} .quick-links .auth-link{color:#d3d0d7;text-decoration:none;opacity:.95;background:none;border:none;cursor:pointer;font:inherit;} /* Primary nav submenu (L-Screens) */ .quick-links .has-submenu{position:relative} .quick-links .has-submenu > a::after{content:"▾";margin-left:.35rem;font-size:.85em} .quick-links .nav-submenu{position:absolute;top:calc(100% + .4rem);left:0;background:#0b0b0b;border:1px solid var(--border);border-radius:.6rem;box-shadow:0 8px 24px rgba(0,0,0,.32);display:none;min-width:220px;padding:.4rem;z-index:80;opacity:0;transform:translateY(-4px);transition:opacity .15s ease, transform .15s ease} /* For L-Screens: open the dropdown to the left by aligning submenu to the right edge */ .quick-links .has-submenu.submenu-left > .nav-submenu{left:auto;right:0} .quick-links .has-submenu.open > .nav-submenu{display:block;opacity:1;transform:none} /* Keep submenu open when any child has focus (keyboard users) */ .quick-links .has-submenu:focus-within > .nav-submenu{display:block} .quick-links .nav-submenu a{display:block;padding:.5rem .6rem;border-radius:.4rem;background:transparent;color:#d3d0d7} .quick-links .nav-submenu a:hover{background:#121212;color:#fff} .user-menu{display:flex;align-items:center;gap:.8rem;font-size:.9rem;position:relative} .user-menu span{color:#d3d0d7;opacity:.8;} .profile-btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:999px;border:2px solid #d4af37; /* gold border */ background:#4b2b82; /* purple */ cursor:pointer;transition:background .18s ease, filter .18s ease, border-color .18s ease} .profile-btn:hover,.profile-btn:focus-visible{background:#5b3699;filter:brightness(1.05);outline:none} .profile-btn:active{background:#ffffff;border-color:#b89125} .profile-btn:active .avatar{background:#ffffff} .avatar{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:999px;background:transparent;color:#000 !important;font-weight:900;font-size:.9rem;letter-spacing:.4px;line-height:1;white-space:nowrap;} .user-dropdown{position:absolute;right:0;left:auto;transform:none;top:calc(100% + .5rem);background:#fff;color:#0b2a4a;border:1px solid var(--border);border-radius:.6rem;box-shadow:0 8px 24px rgba(12,32,64,.18);min-width:200px;padding:.35rem;display:none;z-index:200} .user-dropdown.open{display:block} .user-dropdown a,.user-dropdown button{display:block;width:100%;text-align:left;padding:.5rem .6rem;border:none;background:none;color:#0b2a4a;text-decoration:none;cursor:pointer;border-radius:.4rem} .user-dropdown a:hover,.user-dropdown button:hover{background:#f5f8ff} .user-dropdown .user-summary{padding:.4rem .6rem .5rem;border-bottom:1px solid #eef3ff;margin-bottom:.25rem} .quick-links a.is-active, .quick-links a[aria-current="page"]{ color:#ffffff; opacity:1; background:rgba(255,255,255,.14); padding:.3rem .5rem; border-radius:.5rem; } /* EZ Nets mega menu removed */ /* Nav hover: brand orange */ .quick-links a:hover, .quick-links .auth-link:hover{ color: var(--brand); opacity: 1; } .cart-btn{display:inline-flex;align-items:center;gap:.5rem;border:none;background:var(--brand);color:#fff;padding:.5rem .75rem;border-radius:.75rem;cursor:pointer} .cart-count{background:#fff;color:var(--brand);font-weight:800;min-width:22px;height:22px;display:inline-grid;place-items:center;border-radius:999px} .icon-btn{background:var(--brand);border:1px solid var(--brand);color:#ffffff;border-radius:.5rem;padding:.35rem .5rem;cursor:pointer} /* Top-row actions container */ .header-actions{margin-left:auto;display:flex;align-items:center;gap:.75rem} /* Slight left margin to keep cart from touching user menu */ .site-header .cart-btn{margin-left:.5rem} /* Hide empty header-actions to avoid pushing layout */ .header-actions:empty{display:none} /* Header break element to create second row in mid-range widths */ .header-break{flex-basis:100%;height:0;display:none} /* Large / default single-row ordering: brand, search, login, cart, menu toggle */ .site-header .header-bar{display:flex} /* Base ordering (≥641px single-row): brand, search, login/actions, cart, menu toggle (always last/right) */ .site-header .brand{order:1} .site-header .search{order:2;flex:1 1 auto;min-width:200px} .site-header .header-actions{order:3} .site-header .cart-btn{order:4} .site-header .menu-toggle{order:5;margin-left:1rem} /* Small phones: two rows Row1: brand, login (actions), cart Row2: menu toggle, search (full width) */ @media (max-width:640px){ /* Mobile header: Row 1 brand centered; Row 2: search 60%, actions 20%, menu toggle 20% */ .site-header .header-bar{display:grid;grid-template-rows:auto auto;row-gap:.4rem;align-items:center;justify-items:stretch;grid-template-columns:100%;column-gap:.25rem;padding:.5rem .55rem .5rem} .site-header .brand{grid-column:1 / -1;grid-row:1;justify-self:center;margin-inline:auto;margin-bottom:.4rem} /* Second row defined with fractional distribution including gap fallback */ /* Adaptive columns: search grows, actions/menu size to content */ .site-header .header-bar{grid-template-columns:minmax(0,1fr) auto auto} .site-header .search{grid-row:2;grid-column:1;order:unset;width:100%;min-width:0;margin:0;display:flex} .site-header .search input{width:100%;min-width:0;padding:.6rem .65rem .6rem 2.4rem;font-size:.85rem} .site-header .header-actions{grid-row:2;grid-column:2;order:unset;display:flex;justify-content:center;align-items:center;width:100%;margin:0;gap:.25rem} .site-header .menu-toggle{grid-row:2;grid-column:3;order:unset;margin:0;justify-self:center;align-self:center;display:inline-flex;min-width:0} .site-header .cart-btn{margin-left:.25rem} .header-break{display:none} /* Ensure inner elements shrink properly */ .site-header .header-actions .user-menu, .site-header .header-actions .auth-link, .site-header .header-actions .cart-btn{flex:0 1 auto} /* Tighten extremely small widths */ @media (max-width:480px){ .site-header .search input{font-size:.8rem;padding:.55rem .55rem .55rem 2.3rem} } @media (max-width:400px){ .site-header .search input{font-size:.78rem;padding:.5rem .5rem .5rem 2.15rem} .site-header .menu-toggle{padding:.5rem .55rem} } @media (max-width:360px){ .site-header .search input{font-size:.75rem;padding:.48rem .5rem .48rem 2.05rem} .site-header .menu-toggle{font-size:.8rem;width:40px;height:40px;padding:.5rem} .site-header .menu-toggle span{display:none} } } /* Mid sizes retain single-row default (allow existing nav collapse) */ @media (min-width:641px) and (max-width:1200px){ .site-header .menu-toggle{margin-right:.75rem} .site-header .search input{width:auto;min-width:16ch;max-width:100%} } /* Multi-column nav when expanded still for mid sizes */ @media (min-width:680px) and (max-width:1200px){ .quick-links.is-open{flex-direction:row;flex-wrap:wrap;column-gap:1.25rem;row-gap:.35rem;padding:1rem 1rem 1.25rem} .quick-links.is-open a{width:auto;flex:0 0 calc(25% - 1.25rem);min-width:140px} @supports (display:grid){ .quick-links.is-open{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));} .quick-links.is-open a{width:100%;flex:none} } } /* Mobile nav */ .menu-toggle{display:none;background:var(--brand);color:#fff;border:1px solid var(--brand);font-weight:800;font-size:1.05rem;line-height:1;border-radius:.65rem;padding:.55rem .7rem;cursor:pointer} /* Collapsible navigation applies up to large tablets (raised from 900px -> 1200px) */ @media (max-width:1200px){ .menu-toggle{display:inline-flex;align-items:center;justify-content:center} .quick-links{flex-basis:100%;order:4;display:none;flex-direction:column;align-items:stretch;text-align:center;background:#000000;padding:.6rem .6rem 1rem;border-radius:.85rem;margin-top:.55rem;box-shadow:0 4px 18px rgba(0,0,0,.25)} .quick-links a{padding:.55rem .75rem;border-radius:.55rem;width:100%;display:flex;justify-content:center;align-items:center;text-align:center} .quick-links.is-open{display:flex} /* Submenu stacks under its trigger on mobile */ .quick-links .has-submenu{width:100%} .quick-links .nav-submenu{position:static;display:none;width:100%;margin-top:.25rem;padding:.25rem;border:none;border-radius:.5rem;background:#0a0a0a;box-shadow:none} .quick-links .has-submenu.open > .nav-submenu{display:block} .quick-links .nav-submenu a{width:100%;display:flex;justify-content:center;align-items:center;text-align:center} /* For L‑Screens specifically: when mobile menu is open, show its submenu as a flyout to the left of the menu panel */ .site-header .header-bar .quick-links .has-submenu.submenu-left > .nav-submenu{ position:absolute; top:0; right:calc(100% + .5rem); left:auto; width:min(320px,80vw); max-height:calc(100dvh - 120px); overflow:auto; padding:.4rem; background:#0b0b0b; border:1px solid var(--border); border-radius:.6rem; box-shadow:0 8px 24px rgba(0,0,0,.32); z-index:100; } body.nav-open{overflow:hidden} /* Convert collapsed nav into an overlay dropdown that does NOT push header content */ .site-header .header-bar{position:relative} .site-header .header-bar .quick-links{position:absolute;top:100%;right:0;left:auto;flex-basis:auto;order:unset;width:min(420px,calc(100% - .75rem));max-height:calc(100dvh - 110px);overflow-y:auto;overflow-x:visible;margin-top:.55rem;z-index:70} /* Re‑assert display when open (specificity bump because of absolute override) */ .site-header .header-bar .quick-links.is-open{display:flex} /* Hide the flyout unless the parent submenu is open */ .site-header .header-bar .quick-links .has-submenu.submenu-left > .nav-submenu{display:none} .site-header .header-bar .quick-links .has-submenu.submenu-left.open > .nav-submenu{display:block;opacity:1;transform:none} } /* Small safeguards to avoid clipping on ultra-narrow widths */ @media (max-width:480px){ .site-header .header-bar .quick-links{width:min(92vw, 420px)} .site-header .header-bar .quick-links .has-submenu.submenu-left > .nav-submenu{ right:calc(100% + .35rem); width:min(75vw, 320px); } } /* Small phones/tablets: make the menu panel full-width and left-aligned for consistency */ @media (max-width:640px){ .site-header .header-bar .quick-links{left:0; right:0; width:100%;} /* When nav has the nav-centered utility, keep items centered in mobile stacked panel */ .site-header .header-bar .quick-links.nav-centered{justify-content:center !important} /* Submenu stacks inline to avoid off-screen clipping on narrow devices */ .site-header .header-bar .quick-links .has-submenu.submenu-left > .nav-submenu{ position:static; right:auto; left:auto; top:auto; width:100%; max-height:none; overflow:visible; padding:.25rem; margin-top:.25rem; background:#0a0a0a; border:none; border-radius:.5rem; box-shadow:none; } } /* When viewport is relatively narrow, anchor the flyout to the left edge so it stays fully visible */ @media (max-width:768px){ .site-header .header-bar .quick-links .has-submenu.submenu-left.open > .nav-submenu{ left:8px; right:auto; width:min(90vw, 360px); } } /* Extra-small fallback: stack submenu inline instead of flyout to avoid off-screen clipping */ @media (max-width:420px){ .site-header .header-bar .quick-links .has-submenu.submenu-left > .nav-submenu{ position:static; right:auto; left:auto; top:auto; width:100%; max-height:none; overflow:visible; padding:.25rem; margin-top:.25rem; background:#0a0a0a; border:none; border-radius:.5rem; box-shadow:none; } } /* Safeguard: if JS or old CSS attempts to force desktop, override below 1200px */ @media (max-width:1200px){ .quick-links.forced-wide{display:none !important} } /* Desktop ≥1201px: keep login (header-actions) and cart on top row right edge */ @media (min-width:1201px){ .site-header .menu-toggle{display:none} /* Top row: brand, search (grows), actions + cart (right). Allow wrap so nav (quick-links) moves to second row. */ .site-header .header-bar{flex-wrap:wrap} .site-header .quick-links{order:6;flex-basis:100%;width:100%} .site-header .header-actions{margin-left:auto} .site-header .cart-btn{margin-left:.4rem} /* Refined desktop search alignment */ .site-header .search input{padding:.7rem 1rem .7rem 2.45rem;line-height:1.25;font-size:.95rem} } /* Buttons (gold primary theme) */ .btn{display:inline-flex;align-items:center;justify-content:center;padding:.8rem 1.1rem;border-radius:.9rem;font-weight:800;letter-spacing:.3px;border:1px solid var(--gold);text-decoration:none;cursor:pointer;transition:.18s ease-in-out;text-transform:uppercase;background:var(--gold);color:#fff} /* Ensure