/* Responsive lead text for homepage */ .home-lead-text { font-size: clamp(1rem, 2vw, 1.5rem) !important; } .navbar .nav-link{color:var(--text-primary);} .navbar .nav-link:hover{color:var(--link-accent);} .navbar .site-title{font-weight:600} /* Page background and base text color: let schemes control the page background */ /* Fallbacks provided so the site remains readable if a scheme omits tokens */ body{ background: var(--background, #ffffff) !important; color: var(--text-primary, #111111) !important; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } /* Navbar user dropdown badge overlay (placed after the toggle in the DOM) */ .dropdown.position-relative { /* ensure positioned ancestor for absolute badge */ position: relative; } .nav-dropdown-badge { position: absolute; top: 6px; right: 8px; z-index: 1050; /* above dropdown toggle but below any global toasts */ font-size: 0.65rem; line-height: 1; padding: 0.25rem 0.45rem; border-radius: 999px; transform: translate(30%, -30%); display: inline-block; } /* Slightly reduce the badge on very small screens so it doesn't obscure text */ @media (max-width: 420px) { .nav-dropdown-badge { top: 4px; right: 6px; font-size: 0.6rem; padding: 0.18rem 0.36rem; } } /* Ensure any 'muted' token maps to the theme's text-accent token so muted text follows the active color scheme consistently. The schemes may define --text-muted; override it here to point at --text-accent. */ body{ --text-muted: var(--text-accent); } /* Also provide a direct utility class so templates using .text-muted immediately get the theme's accent color. */ .text-muted{ color: var(--text-accent) !important; } /* Ensure the main site container and its inner container inherit the page background and allow surface elements (cards/pills) to use --card-surface as intended. */ .site-container, .site-container .container, main, .content{ background: transparent; /* keep content canvas transparent so body controls background */ } /* Ensure scheme colors override Bootstrap utility classes (like .text-white) */ /* Bootstrap's .text-white uses !important; we replicate specificity and use !important so theme variables control the visible colors inside our header and content. */ .nav-surface .nav-link, .nav-left .nav-link, .nav-right .nav-link, .navbar .nav-link, .nav-right .dropdown-toggle, .cart-icon, .nav-surface, .site-container, .site-container a{ color: var(--text-primary) !important; } .nav-surface .nav-link:hover, .navbar .nav-link:hover, .site-container a:hover{ color: var(--link-accent) !important; } .btn-outline-light{border-color:rgba(255,255,255,0.6);color:white} .btn-outline-light:hover{color:var(--accent)} /* Nav row (flex-based) and centered logo */ .navbar{position:fixed;top:0;left:0;right:0;padding-top:0.25rem;padding-bottom:0.25rem;margin-top:20px;z-index:1100} /* Hero section styles (site homepage) */ .hero { background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important; width: 100vw; aspect-ratio: 16/7.5; display: flex; align-items: center; justify-content: center; position: relative; left: 50%; transform: translateX(-50%); margin: 0; padding: 0; overflow-x: hidden; z-index: 1; } .hero::before{ content:""; position:absolute; inset:0; background:linear-gradient(rgba(0,0,0,0.25), rgba(0,0,0,0.25)); z-index:0; } /* Utility: allow long emails/phones to wrap inside cards */ .break-word{overflow-wrap:anywhere;word-break:break-word} .hero .hero-content{ position: relative; z-index: 1; text-align: center; margin-left: auto; margin-right: auto; } /* Logo sizing and crop */ .logo-link{display:inline-block;width:112px;height:112px;margin-top: -20px;hidden;border-radius:999px;border:4px solid rgba(255,255,255,0.14);background:var(--background);box-sizing:content-box;position:relative} .logo-img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;display:block} /* Mini-nav spacing */ .left-mini-nav .nav-link, .right-mini-nav .nav-link{padding-left:.5rem;padding-right:.5rem} /* Mobile collapsed menu visual */ .bg-contrast{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.04)} /* Responsive logo sizes */ @media (max-width: 991.98px){ .logo-link{margin-top:-30px} } @media (max-width: 767.98px){ .logo-link{margin-top:-36px} } /* Flex-based nav row */ .nav-row{display:flex;align-items:center;justify-content:space-between} .nav-left,.nav-right{flex:1} .nav-center{flex:0 0 auto;text-align:center} /* ensure left/right mini-navs render horizontally */ .nav-left .navbar-nav{flex-direction:row;align-items:center} .nav-left .navbar-nav .nav-item{margin-right:.5rem} /* right-side auth links */ .nav-right{display:flex;align-items:center;justify-content:flex-end;position:relative} .nav-right .navbar-nav{flex-direction:row;align-items:center} .nav-right .navbar-nav .nav-item{margin-left:.4rem} /* Nav surface (pill) */ .nav-surface{background:var(--card-surface);padding:4px 30px;border-radius:999px;display:inline-flex;align-items:center;gap:34px;box-shadow:0 6px 18px rgba(0,0,0,0.08);position:relative;min-width:440px} body{padding-top:1rem} .site-container{padding-top:3.75rem} /* Small-screen navbar spacing: keep side padding internal (nav-surface) and keep bottom spacing external on the navbar so the centered logo doesn't overlap navigation items. User requested less side padding and more bottom spacing. */ @media (max-width: 767.98px){ /* remove left/right padding from the fixed navbar itself */ /* keep nav-surface as the internal padded pill; further reduce horizontal padding so it fits better on narrow screens */ .nav-surface{ padding-left: 6px; padding-right: 6px; gap: 40px; min-width: unset; /* allow it to shrink rather than forcing overflow */ } /* ensure the site content still accounts for the fixed nav height. Add top padding to the body so the fixed navbar doesn't overlap page content on small screens. */ body{padding-top:3rem} .site-container{padding-top:3.75rem} /* Reduce spacing between left-side nav items (Store / Contact) */ .nav-left .navbar-nav .nav-item{ margin-right: .2rem !important; /* was .5rem */ } /* Increase gap between basket and user dropdown on the right so the centered logo appears visually centered between left and right groups. */ .nav-right > div:first-child{ margin-right: 1.3rem !important; margin-left: .2rem /* increases gap after cart */ } } /* Make room for the logo overlap */ .site-container{padding-top:3.75rem} /* place logo absolutely so it visually overlaps but doesn't increase nav height */ .nav-center{position:relative} .nav-center .logo-link{position:absolute;left:50%;transform:translateX(-50%);top:-30px} @media (max-width: 991.98px){ .nav-center .logo-link{top:-24px} } @media (max-width: 767.98px){ .nav-center .logo-link{top:-18px} .dropdown-toggle{margin-right: 10px;} .account-label{display:none} .dropdown-toggle .fa-icon{margin-right:0} .dropdown-toggle{padding-left:8px;padding-right:8px} } /* On small screens show only the user icon for the account dropdown */ @media (max-width: 767.98px){ } @media (max-width: 575.98px) { .p-3{padding: 0 !important;} } /* Note: keep nav-surface min-width consistent across sizes so it doesn't shrink */ /* Ensure dropdowns inside the right nav align to the right edge */ .nav-right .dropdown-menu{right:0;left:auto;transform-origin:top right;z-index:3000} /* Use theme variables for dropdown background and items */ .nav-right .dropdown-menu, .dropdown-menu{ background: var(--background) !important; color: var(--text-primary) !important; border: 1px solid rgba(0,0,0,0.06); } .dropdown-menu .dropdown-item{color:var(--text-primary) !important} .dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus{ background: color-mix(in srgb, var(--link-accent) 18%, transparent) !important; color:var(--text-primary) !important; } /* Account dropdown will use the shared .button-primary utility for styling */ /* prevent nav links wrapping inside the pill */ .nav-surface .nav-left .nav-link, .nav-surface .nav-right .nav-link { white-space:nowrap } /* Keep theme and buttons styling */ .nav-content .nav-link{color:var(--text-primary);} .nav-content .nav-link:hover{color:var(--link-accent)} .nav-surface .navbar-toggler{border-color:rgba(255,255,255,0.08)} .nav-surface .btn-light{background:white;color:var(--link-accent)} /* cart icon next to user */ .cart-icon svg{display:block;width:22px;height:22px} .cart-icon{display:inline-flex;align-items:center;justify-content:center;padding:6px;border-radius:6px} .cart-icon:hover{background:rgba(255,255,255,0.06);text-decoration:none} /* Small numeric badge shown when basket has items */ .cart-badge{ position:absolute; top:2px; right:2px; transform: translate(30%,-30%); background: var(--accent, #dc3545); color: #fff; border-radius: 999px; padding: 2px 6px; font-size: 0.65rem; line-height: 1; min-width: 18px; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,0.25); pointer-events: none; } /* Debug center guides removed */ /* Font Awesome icon sizing helpers */ .fa-icon{font-size:18px;line-height:1;vertical-align:middle} .cart-icon .fa-icon{font-size:20px} /* Form controls inside cards should match the card surface and use theme tokens */ .card .form-control, .card input[type="text"], .card input[type="password"], .card input[type="email"], .card select.form-control, .card textarea.form-control{ background-color: var(--card-surface, #fff) !important; background-image: none !important; background-clip: padding-box !important; -webkit-appearance: none !important; appearance: none !important; color: var(--text-primary, #111) !important; border: 1px solid var(--text-primary, rgba(0,0,0,0.08)) !important; box-shadow: none !important; border-radius: .6rem !important; /* rounded inputs */ padding: .5rem .75rem !important; } /* Cross-template helpers: keep the price input / pound sign and the featured toggle alignment consistent across create/edit/list pages. These were previously duplicated inside templates; defining them here ensures any manual tweaks (left margin, scale) apply everywhere. */ .price-with-pound { position: relative; display: block; width: 100%; } .price-with-pound .pound { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-primary); pointer-events: none; opacity: 0.95; font-weight: 500; z-index: 3; font-size: 0.95rem; } .price-with-pound .price-input, .price-with-pound input { padding-left: 52px !important; background: transparent; color: var(--text-primary); border: 1px solid var(--text-primary); border-radius: .375rem; min-width: 0; box-sizing: border-box; position: relative; z-index: 1; font-size: 0.95rem; width:100% !important; } .price-with-pound .pound { z-index:3 !important; left:14px !important; } /* Reusable featured toggle column helper used in listing create/edit pages */ .featured-toggle-col { min-width: 75px; min-height: 52px; padding:6px 6px 4px 6px; box-sizing:border-box; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; } .featured-toggle-col .form-label { font-size:0.95rem; margin-bottom:0.25rem; line-height:1; } .featured-toggle-col .form-switch { display: inline-block; margin-top: 0.2rem; padding-left: 0.5em; } .featured-toggle-col .form-check-input, .featured-toggle-col .form-switch input.form-check-input { transform: scale(1.18); transform-origin: left center; margin-left: 0.12rem; } /* Small fixed-width price box used in store list cards */ .price-box { display:inline-block; width:66px; text-align:center; } /* Visually hide the scrollbar on listing notes textareas but keep scrolling functionality and keyboard focus. Targets both rendered form widgets (by name) and any element using .notes-textarea if added later. */ textarea[name="release_notes"], textarea.notes-textarea { overflow-y: auto; /* keep vertical scrolling enabled */ scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE 10+ */ padding-right: 6px; /* ensure text doesn't get clipped where scrollbars would be */ } /* WebKit-based browsers: hide the scrollbar track/thumb but preserve scrolling */ textarea[name="release_notes"]::-webkit-scrollbar, textarea.notes-textarea::-webkit-scrollbar { width: 0; height: 0; display: none; } /* Ensure selects inside cards inherit theme colors even when the widget isn't rendered with the .form-control class (some Django widgets omit it) */ .card select{ background-color: var(--card-surface, #fff) !important; color: var(--text-primary, #111) !important; border: 1px solid var(--text-primary, rgba(0,0,0,0.08)) !important; padding: .45rem .7rem !important; border-radius: .6rem !important; -webkit-appearance: none !important; appearance: none !important; } .card select option{ color: var(--text-primary, #111) !important; } /* Ensure the entire card surface follows the active color scheme so cards (including manage landing/search cards) match themed surfaces. */ .card{ background: var(--card-surface, #fff) !important; color: var(--text-primary) !important; border: 1px solid rgba(0,0,0,0.06) !important; border-radius: .8rem !important; box-shadow: 0 6px 18px rgba(0,0,0,0.06); } .card .card-body{background: transparent !important;} /* If a themed primary-style button is placed next to the input, ensure it visually matches the card surface and doesn't appear as a separate white block. Small adjustments for input-group usage. */ .input-group .button-primary{ margin-left: .5rem; border-radius: .6rem !important; padding-left: .65rem !important; padding-right: .65rem !important; } /* Make list-group items inside cards follow the card surface and text colors */ .card .list-group-item{ background: transparent !important; color: var(--text-primary) !important; border: none !important; } .card .list-group-item:hover{ background: color-mix(in srgb, var(--link-accent) 12%, transparent) !important; } /* Labels inside cards should match text color */ .card .form-label, .card label{color:var(--text-primary) !important} /* Autofill overrides (Chrome) - force background and text color to match scheme */ .card input:-webkit-autofill, .card input:-webkit-autofill:focus, .card input:-webkit-autofill:hover{ -webkit-text-fill-color: var(--text-primary, #111) !important; box-shadow: 0 0 0px 1000px var(--card-surface, #fff) inset !important; } .card .form-control:focus, .card input:focus, .card textarea:focus, .card select:focus{ border-color: var(--link-accent) !important; box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--link-accent) 20%, transparent) !important; outline: none !important; } /* Slightly dim placeholder text to match muted tokens if available */ .card ::placeholder{color:var(--text-muted, rgba(0,0,0,0.45))} /* Themed button utility (.button-primary) is used instead of a specific .card .btn-primary rule */ /* Reusable primary button utility that follows the active theme. Apply `.button-primary` to any