/* ========================================
ANTI-FLASH / FOUC PREVENTION
======================================== */
/* Prevent white flash on page load */
html {
background-color: #ffffff; /* white background */
}
/* Body paints immediately. A prior opacity:0 -> fadeInPage defeated the browser's
native paint-holding and made every page "flash white then appear". CSS is
render-blocking (loaded in ), so there is no FOUC without the fade. */
@keyframes fadeInPage {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* ========================================
FORM STYLES
======================================== */
.auth-form .form-row {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
.auth-form .form-row > * {
flex: 1;
min-width: min(180px, 100%);
}
.auth-form .form-row.between {
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
/* ========================================
RESET AND BASE STYLES
======================================== */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Force page to start at top */
html {
scroll-behavior: smooth;
/* Fix for notifications - only restrict overflow-x */
overflow-x: visible !important;
background-color: #ffffff; /* Ensure consistent background */
}
html, body {
scroll-padding-top: 0;
overscroll-behavior: none;
}
:root {
--primary-yellow: #F5C34B;
--dark-navy: #0F172A;
--light-navy: #1E2550;
--white: #FFFFFF;
--light-gray: #F5F5F5;
--soft-gray: #F7F7F7;
--text-gray: #5A647D;
--border-gray: #E2E4EF;
--accent-gold: #FAD56F;
--nav-indigo: #2e294f;
--footer-slate: #2e3142;
/* The type stacks live here, on :root, because they are the SITE's, not one
group of pages'. They used to be declared only on
:is(body.reference-home, .reference-commercial, .reference-cta), so on
/cart, /commercial-builder, /privacy and /terms var(--ref-sans) resolved to
nothing and the header fell back to the body's Inter — the same bar
rendering in a different typeface depending on the page. */
/* The header's height, declared ONCE. It is a fixed bar, so the page has to
be pushed down by exactly this much; hard-coding 87px in the offset while
the bar itself shrank to 64px on phones is what put a white strip under
the header on /, /commercial and /account. Both ends now read the same
variable, so they cannot disagree again. The 560px switch is where
`.header .logo-img` drops from 70px to 50px - that IS what changes the
height, so the variable changes with it. */
--header-h: 87px;
--ref-sans: 'Mukta', system-ui, 'Segoe UI', sans-serif;
--ref-serif: 'Playfair Display', Georgia, serif;
--ref-cond: 'Roboto Condensed', 'Arial Narrow', sans-serif;
}
body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
color: var(--dark-navy);
background-color: #ffffff;
/* overflow-x: hidden; - Removed to fix notification positioning */
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* ========================================
COMMERCIAL 3-COLUMN LAYOUT WITH STICKY
DEBUG VERSION - Testing sticky positioning
======================================== */
/* CRITICAL: These containers MUST NOT have overflow:hidden, transform, or filter */
.product-configurator {
/* No overflow restrictions - required for sticky children */
overflow: visible !important;
}
.commercial-3col-container {
max-width: 1400px;
/* No overflow restrictions */
overflow: visible !important;
}
.commercial-3col-layout {
display: grid;
grid-template-columns: 300px minmax(500px, 750px) 320px;
gap: 25px;
/* CRITICAL: stretch makes columns span full grid height for sticky to work */
align-items: stretch;
justify-content: center;
/* No overflow restrictions */
overflow: visible !important;
}
/* Left Column - Product Image */
.commercial-image-column {
/* Column stretches full height (from align-items: stretch on parent) */
/* This allows sticky to work as the column is tall */
overflow: visible !important;
/* Don't align self - let it stretch */
}
.product-image-box {
background: white;
border-radius: 12px;
/* REMOVED overflow:hidden - it breaks sticky in some browsers */
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
/* STICKY POSITIONING */
position: -webkit-sticky !important; /* Safari */
position: sticky !important;
top: 90px !important; /* Below fixed header */
z-index: 100;
}
/* Clip the image inside, not the box */
.product-image-box img {
border-radius: 12px 12px 0 0;
}
.product-image-box img {
width: 100%;
height: auto;
display: block;
aspect-ratio: 4/5;
object-fit: cover;
}
.product-image-label {
padding: 15px;
background: var(--dark-navy);
color: white;
font-weight: 600;
text-align: center;
font-size: 1rem;
}
/* Middle Column - Configuration */
.commercial-config-column {
min-width: 0;
}
.commercial-config-column #commercial-config-panel {
background: white;
border-radius: 12px;
padding: 25px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
/* Option images - small uniform squares */
.commercial-config-column .config-option img,
.commercial-config-column .option-btn img,
#commercial-config-panel .config-option img,
#commercial-config-panel .option-btn img {
width: 50px !important;
height: 50px !important;
object-fit: cover;
border-radius: 6px;
margin-bottom: 6px;
}
/* Smaller option buttons for commercial */
.commercial-config-column .config-option,
#commercial-config-panel .config-option {
padding: 10px 12px;
font-size: 0.85rem;
}
/* Option grid - columns set per-category via inline style */
.commercial-config-column .option-grid,
#commercial-config-panel .option-grid {
display: grid;
gap: 10px;
width: 100%;
}
/* Right Column - Summary Card */
.commercial-summary-column {
/* Column needs no special styling - sticky is on the inner element */
overflow: visible !important;
}
.summary-card {
background: white;
border-radius: 12px;
padding: 20px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
/* STICKY POSITIONING */
position: -webkit-sticky !important; /* Safari */
position: sticky !important;
top: 90px !important; /* Below fixed header */
z-index: 100;
}
.summary-card-title {
font-size: 1.1rem;
font-weight: 700;
color: var(--dark-navy);
margin: 0 0 18px 0;
padding-bottom: 12px;
border-bottom: 3px solid var(--primary-yellow);
}
.summary-sku-box {
background: var(--light-gray);
padding: 12px 15px;
border-radius: 8px;
margin-bottom: 18px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.summary-sku-label {
font-weight: 600;
color: var(--text-gray);
font-size: 0.85rem;
}
.summary-sku-value {
font-family: 'Courier New', monospace;
font-weight: 700;
color: var(--dark-navy);
font-size: 0.9rem;
word-break: break-all;
text-align: right;
}
.summary-options-list {
max-height: 250px;
overflow-y: auto;
margin-bottom: 18px;
}
.summary-options-table {
width: 100%;
font-size: 0.85rem;
}
.summary-options-table td {
padding: 10px 5px;
border-bottom: 1px solid var(--border-gray);
vertical-align: top;
}
.summary-options-table td:first-child {
color: var(--text-gray);
font-weight: 500;
padding-right: 10px;
}
.summary-options-table td:last-child {
text-align: right;
font-weight: 600;
color: var(--dark-navy);
}
.summary-price-box {
background: var(--light-gray);
border-radius: 8px;
padding: 15px;
margin-bottom: 18px;
}
.summary-price-row {
display: flex;
justify-content: space-between;
padding: 8px 0;
font-size: 0.9rem;
color: var(--text-gray);
}
.summary-price-total {
border-top: 2px solid var(--border-gray);
margin-top: 8px;
padding-top: 12px;
font-size: 1.05rem;
font-weight: 700;
color: var(--dark-navy);
}
.summary-qty-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 15px;
}
.summary-qty-row label {
font-weight: 600;
color: var(--dark-navy);
font-size: 0.95rem;
}
.summary-qty-controls {
display: flex;
align-items: center;
border: 2px solid var(--border-gray);
border-radius: 8px;
overflow: hidden;
}
.summary-qty-controls .qty-btn {
width: 36px;
height: 36px;
border: none;
background: var(--light-gray);
color: var(--dark-navy);
font-size: 1.2rem;
cursor: pointer;
transition: background 0.2s;
}
.summary-qty-controls .qty-btn:hover {
background: var(--primary-yellow);
}
.summary-qty-controls input {
width: 50px;
height: 36px;
border: none;
text-align: center;
font-size: 1rem;
font-weight: 600;
}
.summary-add-btn {
width: 100%;
padding: 14px;
background: var(--primary-yellow);
border: none;
border-radius: 8px;
font-size: 1rem;
font-weight: 700;
color: var(--dark-navy);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
transition: all 0.2s;
}
.summary-add-btn:hover {
background: #e5b43b;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(245, 195, 75, 0.4);
}
/* Responsive for 3-column layout */
@media (max-width: 1200px) {
.commercial-3col-layout {
grid-template-columns: 1fr 320px;
}
.commercial-image-column {
display: none;
}
/* Summary card stays sticky on tablet */
.summary-card {
position: sticky;
top: 100px;
}
}
@media (max-width: 800px) {
.commercial-3col-layout {
grid-template-columns: 1fr;
gap: 20px;
}
.commercial-image-column {
display: block;
}
.product-image-box {
max-width: 300px;
margin: 0 auto;
/* Disable sticky on mobile - content stacks vertically */
position: static;
}
.summary-card {
/* Disable sticky on mobile */
position: static;
}
}
/* Old classes - keep for compatibility */
.product-image-card {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.product-image-card img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
aspect-ratio: 3/4;
}
.product-name-overlay {
padding: 16px 20px;
background: var(--dark-navy);
color: white;
font-weight: 600;
text-align: center;
font-size: 1.05rem;
}
/* Middle Column - Configuration Options */
.commercial-config-col {
/* Takes remaining space */
}
.commercial-config-col #commercial-config-panel {
background: white;
border-radius: 12px;
padding: 24px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.commercial-config-col .config-section {
margin-bottom: 24px;
padding-bottom: 20px;
border-bottom: 1px solid var(--border-gray);
}
.commercial-config-col .config-section:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.commercial-config-col .config-section h3 {
font-size: 0.95rem;
font-weight: 600;
color: var(--dark-navy);
margin-bottom: 14px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.commercial-config-col .option-grid {
display: grid;
gap: 10px;
width: 100%;
}
.commercial-config-col .config-option {
padding: 12px 14px;
border: 2px solid var(--border-gray);
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
text-align: center;
font-size: 0.85rem;
background: white;
}
.commercial-config-col .config-option:hover {
border-color: var(--primary-yellow);
background: #fffbf0;
}
.commercial-config-col .config-option.selected {
border-color: var(--primary-yellow);
background: var(--primary-yellow);
color: var(--dark-navy);
font-weight: 600;
}
.commercial-config-col .config-option img {
width: 100%;
height: 70px;
object-fit: cover;
border-radius: 4px;
margin-bottom: 8px;
}
/* Right Column - Summary Panel */
.commercial-summary-col {
/* Fixed width handled by grid */
}
.summary-panel {
background: white;
border-radius: 12px;
padding: 20px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
.summary-panel .summary-title {
font-size: 1rem;
font-weight: 700;
color: var(--dark-navy);
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 2px solid var(--primary-yellow);
}
.summary-panel .sku-display {
background: var(--light-gray);
padding: 14px 16px;
border-radius: 8px;
margin-bottom: 16px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
}
.summary-panel .sku-label {
font-weight: 600;
color: var(--text-gray);
font-size: 0.8rem;
flex-shrink: 0;
}
.summary-panel .sku-value {
font-family: 'Courier New', monospace;
font-weight: 700;
color: var(--dark-navy);
font-size: 0.85rem;
word-break: break-all;
text-align: right;
}
.summary-panel .options-breakdown {
max-height: 220px;
overflow-y: auto;
margin-bottom: 16px;
padding-right: 5px;
}
.summary-panel .options-breakdown::-webkit-scrollbar {
width: 5px;
}
.summary-panel .options-breakdown::-webkit-scrollbar-track {
background: var(--light-gray);
border-radius: 3px;
}
.summary-panel .options-breakdown::-webkit-scrollbar-thumb {
background: var(--border-gray);
border-radius: 3px;
}
.summary-panel .config-summary-table {
width: 100%;
font-size: 0.8rem;
}
.summary-panel .config-summary-table td {
padding: 10px 0;
border-bottom: 1px solid var(--border-gray);
}
.summary-panel .config-summary-table td:first-child {
color: var(--text-gray);
font-weight: 500;
padding-right: 10px;
}
.summary-panel .config-summary-table td:last-child {
text-align: right;
font-weight: 600;
color: var(--dark-navy);
}
.summary-panel .price-box {
background: var(--light-gray);
border-radius: 8px;
padding: 16px;
margin-bottom: 16px;
}
.summary-panel .price-box .price-row {
display: flex;
justify-content: space-between;
padding: 8px 0;
font-size: 0.85rem;
color: var(--text-gray);
}
.summary-panel .price-box .price-row span:first-child {
padding-right: 10px;
}
.summary-panel .price-box .price-row.total {
border-top: 2px solid var(--border-gray);
margin-top: 8px;
padding-top: 12px;
font-size: 1rem;
font-weight: 700;
color: var(--dark-navy);
}
.summary-panel .summary-actions {
display: flex;
flex-direction: column;
gap: 12px;
}
.summary-panel .qty-control {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.summary-panel .qty-control label {
font-weight: 600;
color: var(--dark-navy);
font-size: 0.9rem;
}
.summary-panel .qty-wrapper {
display: flex;
align-items: center;
border: 2px solid var(--border-gray);
border-radius: 8px;
overflow: hidden;
}
.summary-panel .qty-btn {
width: 34px;
height: 34px;
border: none;
background: var(--light-gray);
color: var(--dark-navy);
font-size: 1.1rem;
cursor: pointer;
transition: background 0.2s;
}
.summary-panel .qty-btn:hover {
background: var(--primary-yellow);
}
.summary-panel .qty-wrapper input {
width: 45px;
height: 34px;
border: none;
text-align: center;
font-size: 0.95rem;
font-weight: 600;
}
.summary-panel .add-to-cart-btn.full-width {
width: 100%;
padding: 14px;
background: var(--primary-yellow);
border: none;
border-radius: 8px;
font-size: 0.95rem;
font-weight: 700;
color: var(--dark-navy);
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.summary-panel .add-to-cart-btn.full-width:hover {
background: #e5b43b;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(245, 195, 75, 0.4);
}
/* Responsive adjustments for commercial 3-column */
@media (max-width: 1200px) {
.commercial-layout {
grid-template-columns: 280px 1fr 280px;
gap: 20px;
}
}
@media (max-width: 1024px) {
.commercial-layout {
grid-template-columns: 1fr 260px;
}
.commercial-image-col {
display: none;
}
}
@media (max-width: 768px) {
.commercial-layout {
grid-template-columns: 1fr;
}
.commercial-summary-col .sticky-wrapper {
position: static;
}
.commercial-image-col {
display: block;
}
.commercial-image-col .sticky-wrapper {
position: static;
}
.product-image-card {
max-width: 280px;
margin: 0 auto 20px;
}
}
/* Global Animation Keyframes */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeInLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideIn {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes pulse {
0%, 100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
@keyframes shimmer {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
/* Header Styles */
.header {
background-color: var(--nav-indigo);
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
box-shadow: 0 12px 30px rgba(16, 11, 36, 0.35);
/* FIXED HEADER - Always at top of viewport */
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 9999 !important;
transition: all 0.3s ease;
/* REMOVED backdrop-filter - it can break fixed positioning in some contexts */
/* backdrop-filter: blur(6px); */
min-height: var(--header-h);
}
.header.scrolled {
box-shadow: 0 16px 35px rgba(16, 11, 36, 0.45);
border-color: rgba(255, 255, 255, 0.12);
}
/* The header is fixed, full-bleed chrome and should not inherit the article
container's 1200px cap: on a 1920px screen that wasted ~500px of width while
the search box was being crushed to 88px to make the row fit. Sized once,
here, for every page. */
.header > .container {
max-width: 1560px;
padding-inline: clamp(1rem, 2.4vw, 2.5rem);
}
.header-content {
display: grid;
/* minmax(max-content, 1fr), not 1fr: a plain 1fr can be squeezed narrower than
the nav's own width, and because .main-nav is justify-self:center the excess
then bleeds symmetrically into the logo on the left and the search on the
right. Flooring the column at max-content makes that collision impossible. */
grid-template-columns: auto minmax(max-content, 1fr) auto;
align-items: center;
gap: 2rem;
padding: 0.5rem 0;
/* Width and horizontal padding come from `.header > .container` above.
Re-capping at 1300px here undid that and reintroduced the squeeze. */
width: 100%;
margin: 0 auto;
}
.logo {
animation: fadeInLeft 0.8s ease-out;
}
.logo a {
text-decoration: none;
color: inherit;
display: flex;
align-items: center;
}
.logo-img {
height: 70px;
width: auto;
transition: transform 0.3s ease;
}
.logo:hover .logo-img {
transform: scale(1.02);
}
.logo h1 {
font-family: 'Playfair Display', serif;
font-size: 1.6rem;
font-weight: 700;
color: var(--white);
transition: all 0.3s ease;
cursor: pointer;
margin: 0;
line-height: 1.2;
}
.logo h1:hover {
transform: scale(1.01);
}
.logo span {
color: var(--primary-yellow);
margin-left: 0.1rem;
display: inline-block;
transition: transform 0.3s ease;
}
.logo:hover span {
transform: scale(1.05);
}
.main-nav {
/* Same reasoning as .header-actions: justify-self:center shrink-wraps the
item and lets it spill out of its track on BOTH sides. Stretch to the
track and centre the list inside it instead. */
justify-self: stretch;
min-width: 0;
}
.main-nav ul {
display: flex;
list-style: none;
gap: 1.5rem;
align-items: center;
justify-content: center;
}
.main-nav li {
white-space: nowrap;
}
.main-nav a {
position: relative;
text-decoration: none;
color: rgba(255, 255, 255, 0.9);
font-weight: 500;
font-size: 0.9rem;
letter-spacing: 0.02em;
padding: 0.35rem 0;
transition: color 0.2s ease;
white-space: nowrap;
}
.main-nav a::after {
content: '';
position: absolute;
left: 0;
bottom: -6px;
width: 100%;
height: 2px;
background: var(--primary-yellow);
transform: scaleX(0);
transform-origin: center;
transition: transform 0.2s ease;
}
.main-nav a:hover,
.main-nav a.active {
color: #ffffff;
}
.main-nav a:hover::after,
.main-nav a.active::after {
transform: scaleX(1);
}
/* The header is a fixed-width strip with variable content: the account chip
grows with the user's name and with a role badge (ADMIN is the widest), and
at 1440px with that badge the row needs ~105px more than the track offers.
Two things were required to make it degrade instead of break.
1. justify-self must be `stretch`, not `end`. A grid item aligned to `end` is
sized to its own content and ignores its track entirely, so it overflowed
leftward across the nav - and making its children shrinkable changed
nothing, because the box itself never agreed to be smaller.
2. min-width:0, so the flex row is actually allowed to shrink once bound to
the track. The search box is the only child that yields (see .search-box),
being the least important control in the header. */
.header-actions {
display: flex;
align-items: center;
gap: 1.25rem;
justify-self: stretch;
justify-content: flex-end;
min-width: 0;
}
.auth-buttons {
display: flex;
align-items: center;
gap: 0.5rem;
}
.auth-buttons .login-btn,
.auth-buttons .register-btn {
border: none;
background: transparent;
color: rgba(255, 255, 255, 0.9);
font-weight: 600;
padding: 0.55rem 1.2rem;
border-radius: 999px;
cursor: pointer;
font-size: 0.9rem;
transition: all 0.2s ease;
}
.auth-buttons .login-btn {
border: 1px solid rgba(255, 255, 255, 0.4);
}
.auth-buttons .login-btn:hover {
border-color: #ffffff;
}
.auth-buttons .register-btn {
background: #ffffff;
color: var(--nav-indigo);
border: 1px solid #ffffff;
}
.auth-buttons .register-btn:hover {
background: transparent;
color: #ffffff;
}
.user-menu {
position: relative;
}
.user-menu-btn {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
border-radius: 8px;
transition: all 0.3s ease;
cursor: pointer;
border: none;
background: none;
color: var(--dark-navy);
}
.user-menu-btn:hover {
background: var(--light-gray);
transform: translateY(-1px);
}
.cart-icon {
position: relative;
background: var(--white);
width: 44px;
height: 44px;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: var(--dark-navy);
font-size: 1.05rem;
text-decoration: none;
transition: all 0.2s ease;
border: 1px solid rgba(15, 23, 42, 0.15);
}
.cart-icon:hover {
transform: translateY(-2px);
border-color: var(--dark-navy);
}
.cart-icon.active {
border-color: var(--dark-navy);
}
.cart-count {
position: absolute;
top: -6px;
right: -6px;
background: var(--dark-navy);
color: var(--white);
border-radius: 50%;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 600;
border: 2px solid var(--white);
}
/* Modal System */
body.modal-open {
overflow: hidden;
}
.modal {
position: fixed;
inset: 0;
display: none;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.6);
padding: 2rem 1rem;
z-index: 2000;
}
.modal.is-visible {
display: flex;
}
.modal .modal-content,
.modal .door-opening-modal-content,
.modal .option-modal-content {
width: min(470px, 95vw);
max-height: calc(90vh - 2rem);
overflow: hidden;
background: #ffffff;
border-radius: 18px;
padding: clamp(1.25rem, 2vw, 1.75rem);
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
}
.modal .auth-modal-panel {
/* Matches the register panel. These two dialogs swap back and forth via the
"Sign up" / "Sign in" links, and a 340px -> 650px jump on every toggle
reads as the page breaking rather than as one flow. */
width: 650px;
max-width: 95vw;
max-height: calc(90vh - 2rem);
overflow-y: auto;
overflow-x: hidden;
}
/* Login has far fewer fields than register, so the panel stays the same size
while the form itself keeps a comfortable measure instead of stretching a
password box across 650px.
The !important here is not decoration: the shared auth rules below pin
`.auth-modal-panel form` to max-width:100% !important and `input.auth-input`
to a literal width:280px !important, both sized for the old 340px panel.
Without matching them the form would run full width while its inputs stayed
280px, which is exactly the mismatch this fixes. */
#login-modal .auth-modal-panel > *:not(.modal-close-btn) {
max-width: 440px;
margin-left: auto;
margin-right: auto;
}
#login-modal .auth-modal-panel form,
#login-modal .auth-modal-panel .auth-form {
max-width: 440px !important;
margin-left: auto !important;
margin-right: auto !important;
}
#login-modal .auth-modal-panel input.auth-input,
#login-modal .auth-modal-panel .form-group input {
width: 100% !important;
max-width: 100% !important;
}
/* Selects were never styled to match the inputs, so the account-type control
rendered as a raw browser dropdown next to bordered, rounded fields. */
.auth-modal-panel select,
.auth-modal-panel select.auth-input {
width: 100%;
padding: 0.6rem 2rem 0.6rem 0.75rem;
border: 1px solid #d7dae3;
border-radius: 8px;
background-color: #fff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236b7280' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 12px 8px;
-webkit-appearance: none;
appearance: none;
font: inherit;
font-size: 0.92rem;
color: var(--dark-navy);
cursor: pointer;
}
.auth-modal-panel select:focus {
outline: none;
border-color: var(--dark-navy);
box-shadow: 0 0 0 3px rgba(242, 198, 37, 0.35);
}
.auth-field-note {
display: block;
margin-top: 0.35rem;
font-size: 0.76rem;
line-height: 1.4;
color: var(--text-gray);
}
/* The OTP boxes had no shared sizing, so they rendered as six default text
inputs of arbitrary width rather than a code entry. */
.otp-inputs {
display: flex;
gap: 0.5rem;
justify-content: center;
margin: 0.75rem 0 1rem;
}
.otp-inputs input {
width: 44px !important;
max-width: 44px !important;
height: 52px;
padding: 0 !important;
border: 1px solid #d7dae3;
border-radius: 8px;
text-align: center;
font-size: 1.25rem;
font-weight: 600;
color: var(--dark-navy);
font-variant-numeric: tabular-nums;
}
.otp-inputs input:focus {
outline: none;
border-color: var(--dark-navy);
box-shadow: 0 0 0 3px rgba(242, 198, 37, 0.35);
}
/* Hidden until a code has actually been requested. */
.otp-wrapper[hidden] { display: none !important; }
/* Register modal - wider, no scrollbar */
#register-modal .auth-modal-panel {
width: 650px;
max-width: 95vw;
max-height: none !important;
overflow-y: visible !important;
overflow: visible !important;
padding: 16px 32px 20px;
}
#register-modal .auth-modal-panel .form-group {
margin-bottom: 6px;
}
#register-modal .auth-modal-panel .form-group label {
margin-bottom: 3px;
font-size: 13px;
}
#register-modal .auth-modal-panel .form-group input {
width: 100% !important;
max-width: 100% !important;
height: 36px;
}
#register-modal .auth-modal-panel .form-row.gap {
gap: 0.4rem;
}
#register-modal .auth-modal-panel .checkbox-inline {
margin-bottom: 2px;
font-size: 0.85rem;
}
#register-modal .auth-modal-panel select {
padding: 8px 12px;
font-size: 0.9rem;
}
#register-modal .auth-modal-panel .primary-btn,
#register-modal .auth-modal-panel .secondary-btn {
padding: 8px 16px;
font-size: 0.9rem;
}
.modal[data-modal-large] .modal-content {
max-width: 720px;
}
/* Auth Modal */
.auth-modal-panel {
background: var(--white);
border-radius: 20px;
padding: 24px;
box-shadow: 0 30px 70px rgba(15, 23, 42, 0.15);
border: 1px solid rgba(15, 23, 42, 0.05);
position: relative;
box-sizing: border-box;
}
/* Auth modal form groups */
.auth-modal-panel .form-group {
margin-bottom: 16px;
}
/* Auth modal labels */
.auth-modal-panel .form-group label {
display: block;
margin-bottom: 6px;
font-weight: 600;
font-size: 14px;
color: var(--dark-navy);
}
/* AUTH MODAL INPUTS - FIXED WIDTH */
.auth-modal-panel .form-group input {
width: 280px !important;
max-width: 100% !important;
height: 44px;
padding: 0 14px !important;
font-size: 16px !important;
border: 1px solid #c0c5ce !important;
border-radius: 8px !important;
background: #fff !important;
outline: none !important;
box-sizing: border-box !important;
display: block !important;
}
.auth-modal-panel .form-group input:focus {
border-color: var(--nav-indigo) !important;
box-shadow: 0 0 0 3px rgba(46, 41, 79, 0.1) !important;
}
.auth-modal-panel .form-group input::placeholder {
color: #9ca3af;
}
.auth-modal .modal-close-btn {
position: absolute;
top: 1rem;
right: 1rem;
border: none;
background: rgba(15, 23, 42, 0.08);
color: var(--dark-navy);
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
}
.auth-modal .modal-close-btn:hover {
background: var(--dark-navy);
color: var(--white);
}
.auth-modal-header {
text-align: left;
margin-bottom: 1.5rem;
}
.auth-eyebrow {
text-transform: uppercase;
letter-spacing: 0.3em;
font-size: 0.75rem;
color: var(--text-gray);
margin-bottom: 0.5rem;
}
.auth-modal-header h2 {
font-size: 1.75rem;
margin: 0 0 0.5rem;
color: var(--dark-navy);
}
.auth-support-text {
color: var(--text-gray);
margin: 0;
}
.auth-tabs {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
background: var(--light-gray);
padding: 0.35rem;
border-radius: 999px;
margin-bottom: 1.5rem;
}
.auth-tab {
flex: 1;
border: none;
background: transparent;
border-radius: 999px;
padding: 0.55rem 1rem;
font-weight: 600;
color: var(--text-gray);
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
}
.auth-tab.active {
background: var(--nav-indigo);
color: var(--white);
}
.auth-modal .auth-form {
display: none !important;
}
.auth-modal .auth-form.active {
display: flex !important;
flex-direction: column;
gap: 12px;
}
/* Constrain form width to match button width */
.auth-modal-panel form,
.auth-modal-panel .auth-form {
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Auth input class - applies directly to inputs */
input.auth-input,
.auth-modal-panel input.auth-input {
width: 280px !important;
max-width: 100% !important;
height: 44px;
padding: 0 14px !important;
font-size: 16px !important;
border: 1px solid #c0c5ce !important;
border-radius: 8px !important;
background: #fff !important;
color: var(--dark-navy) !important;
outline: none !important;
box-shadow: none !important;
transition: border-color 0.2s, box-shadow 0.2s !important;
box-sizing: border-box !important;
display: block !important;
}
input.auth-input:focus,
.auth-modal-panel input.auth-input:focus {
border-color: var(--nav-indigo) !important;
box-shadow: 0 0 0 3px rgba(46, 41, 79, 0.1) !important;
}
input.auth-input::placeholder,
.auth-modal-panel input.auth-input::placeholder {
color: #9ca3af;
}
/* Phone input group container */
.auth-modal .auth-modal-panel .form-group .phone-input-group,
.auth-modal-panel .form-group .phone-input-group,
.auth-modal-panel .phone-input-group,
.form-group .phone-input-group {
display: flex !important;
align-items: stretch !important;
border: 1px solid #b0b5c0 !important;
border-radius: 10px !important;
overflow: hidden !important;
width: 100% !important;
background: #fff !important;
transition: border-color 0.2s, box-shadow 0.2s !important;
}
.auth-modal .auth-modal-panel .form-group .phone-input-group:focus-within,
.auth-modal-panel .form-group .phone-input-group:focus-within,
.auth-modal-panel .phone-input-group:focus-within,
.form-group .phone-input-group:focus-within {
border-color: var(--nav-indigo) !important;
box-shadow: 0 0 0 3px rgba(46, 41, 79, 0.1) !important;
}
.auth-modal .auth-modal-panel .form-group .phone-input-group .country-code,
.auth-modal-panel .form-group .phone-input-group .country-code,
.auth-modal-panel .phone-input-group .country-code,
.form-group .phone-input-group .country-code,
.phone-input-group .country-code {
display: flex !important;
align-items: center !important;
padding: 0 14px !important;
background: #f3f4f6 !important;
font-weight: 600 !important;
font-size: 1rem !important;
color: var(--dark-navy) !important;
border-right: 1px solid #b0b5c0 !important;
flex-shrink: 0 !important;
line-height: 1 !important;
}
/* Phone input inside the group - MUST override global .form-group input styles */
.auth-modal .auth-modal-panel .form-group .phone-input-group input,
.auth-modal .auth-modal-panel .form-group .phone-input-group input[type="tel"],
.auth-modal-panel .form-group .phone-input-group input,
.auth-modal-panel .phone-input-group input,
.form-group .phone-input-group input,
.phone-input-group input,
.phone-input-group input[type="tel"] {
flex: 1 !important;
min-width: 0 !important;
padding: 12px 14px !important;
font-size: 1rem !important;
border: none !important;
border-radius: 0 !important;
background: transparent !important;
color: var(--dark-navy) !important;
outline: none !important;
box-shadow: none !important;
margin: 0 !important;
width: auto !important;
}
.auth-modal .auth-modal-panel .form-group .phone-input-group input::placeholder,
.auth-modal-panel .form-group .phone-input-group input::placeholder,
.auth-modal-panel .phone-input-group input::placeholder,
.form-group .phone-input-group input::placeholder,
.phone-input-group input::placeholder {
color: #9ca3af !important;
}
/* Select dropdowns in auth modal */
.auth-modal-panel select {
width: 100%;
padding: 12px 14px;
font-size: 1rem;
border: 1px solid #d1d5db;
border-radius: 10px;
background: #fff;
color: var(--dark-navy);
transition: border-color 0.2s, box-shadow 0.2s;
cursor: pointer;
}
.auth-modal-panel select:focus {
outline: none;
border-color: var(--nav-indigo);
box-shadow: 0 0 0 3px rgba(46, 41, 79, 0.1);
}
.form-row {
display: flex;
gap: 1rem;
}
.form-row.between {
align-items: center;
justify-content: space-between;
gap: 0.75rem;
flex-wrap: wrap;
}
.form-row.gap {
gap: 1rem;
}
.auth-modal-panel .form-row {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
.auth-modal-panel .form-row > * {
flex: 1;
min-width: min(180px, 100%);
}
.auth-modal-panel .form-row.between {
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.checkbox-inline {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.95rem;
color: var(--text-gray);
}
.otp-wrapper {
background: var(--light-gray);
border-radius: 16px;
padding: 1rem;
text-align: center;
}
.otp-inputs {
display: flex;
justify-content: center;
gap: 6px;
margin: 0.6rem 0;
}
.otp-inputs input {
width: 38px !important;
height: 46px !important;
text-align: center;
font-size: 1.1rem;
border: 1px solid var(--border-gray) !important;
border-radius: 8px !important;
padding: 0 !important;
}
.auth-footer-links {
margin-top: 1rem;
text-align: center;
color: var(--text-gray);
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.auth-footer-links a {
color: var(--nav-indigo);
font-weight: 600;
text-decoration: none;
}
.auth-footer-links a:hover {
text-decoration: underline;
}
/* button styles... */
.primary-btn,
.secondary-btn,
.ghost-btn,
.text-btn,
.segment-control label span {
font-weight: 600;
}
.primary-btn,
.secondary-btn,
.ghost-btn {
border: none;
border-radius: 12px;
padding: 0.75rem 1.2rem;
cursor: pointer;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
}
.primary-btn {
background: var(--nav-indigo);
color: var(--white);
}
.primary-btn:hover {
background: #221c3c;
}
.secondary-btn {
background: rgba(46, 41, 79, 0.08);
color: var(--nav-indigo);
}
.secondary-btn:hover {
background: rgba(46, 41, 79, 0.15);
}
.ghost-btn {
background: transparent;
border: 1px solid rgba(46, 41, 79, 0.2);
color: var(--nav-indigo);
}
.ghost-btn:hover {
border-color: var(--nav-indigo);
}
.text-btn {
background: none;
border: none;
color: var(--nav-indigo);
font-weight: 600;
cursor: pointer;
}
.text-btn:hover {
text-decoration: underline;
}
.primary-btn.full,
.secondary-btn.full,
.ghost-btn.full {
width: 100%;
box-sizing: border-box;
}
.segment-control {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}
.segment-control label {
flex: 1;
min-width: 100px;
border: 1px solid var(--border-gray);
border-radius: 10px;
padding: 0.75rem 0.5rem;
text-align: center;
cursor: pointer;
transition: all 0.2s ease;
background: #fff;
}
.segment-control label:hover {
border-color: var(--nav-indigo);
background: rgba(46, 41, 79, 0.04);
}
.segment-control input {
display: none;
}
.segment-control label:has(input:checked) {
border-color: var(--nav-indigo);
background: var(--nav-indigo);
color: #fff;
}
.segment-control label:has(input:checked) span {
color: #fff;
font-weight: 600;
}
.phone-input-group input:focus {
border-left-color: var(--nav-indigo);
}
.auth-modal-panel .form-group small {
display: block;
color: var(--text-gray);
margin-top: 0.25rem;
}
.auth-modal-panel form button i {
font-size: 0.9rem;
}
@media (max-width: 540px) {
.modal .option-modal-content,
.modal .auth-modal-panel {
width: 92vw;
padding: 1.1rem;
border-radius: 16px;
}
.auth-tabs {
flex-direction: column;
}
.auth-modal-panel .form-row,
.auth-modal-panel .form-row.gap,
.auth-modal-panel .form-row.between {
flex-direction: column;
align-items: flex-start;
}
.otp-inputs input {
width: 44px;
height: 54px;
}
}
/* Hero Section Improvements */
.hero {
background: linear-gradient(180deg, #FFFFFF 0%, #F4F6FB 100%);
padding: 140px 0 80px;
color: var(--dark-navy);
}
/* Full-width hero with background image */
.hero.hero-fullwidth {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
padding: 0;
min-height: 85vh;
display: flex;
align-items: center;
position: relative;
color: var(--white);
}
.hero.hero-fullwidth .hero-overlay {
display: block;
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(15, 23, 42, 0.75) 0%, rgba(15, 23, 42, 0.50) 100%);
z-index: 1;
}
.hero.hero-fullwidth .container {
position: relative;
z-index: 2;
}
.hero.hero-fullwidth .hero-content.hero-content-centered {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
max-width: 750px;
margin: 0 auto;
padding: 60px 0;
}
.hero.hero-fullwidth .hero-title {
color: var(--white);
font-size: 3.8rem;
text-shadow: 0 2px 12px rgba(0,0,0,0.3);
}
.hero.hero-fullwidth .hero-subtitle {
color: rgba(255, 255, 255, 0.92);
font-size: 1.2rem;
margin-bottom: 2rem;
}
.hero.hero-fullwidth .hero-btn.primary {
background: var(--primary-yellow);
color: var(--dark-navy);
border-color: var(--primary-yellow);
}
.hero.hero-fullwidth .hero-btn.primary:hover {
background: #e6b800;
border-color: #e6b800;
}
.hero.hero-fullwidth .hero-btn.secondary {
background: transparent;
border-color: rgba(255, 255, 255, 0.5);
color: var(--white);
}
.hero.hero-fullwidth .hero-btn.secondary:hover {
border-color: var(--white);
background: rgba(255,255,255,0.1);
}
.hero-overlay {
display: none;
}
.hero-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 3rem;
align-items: center;
}
.hero-title {
font-family: 'Playfair Display', serif;
font-size: 3.35rem;
font-weight: 700;
color: var(--dark-navy);
margin-bottom: 1rem;
line-height: 1.2;
}
.hero-subtitle {
font-size: 1.1rem;
color: var(--text-gray);
opacity: 0.95;
margin-bottom: 1.75rem;
line-height: 1.6;
}
.hero-buttons {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.hero-btn {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 0.95rem 1.85rem;
border-radius: 999px;
font-weight: 600;
text-decoration: none;
transition: all 0.2s ease;
border: 2px solid transparent;
}
.hero-btn.primary {
background: var(--dark-navy);
color: var(--white);
border-color: var(--dark-navy);
}
.hero-btn.primary:hover {
background: transparent;
color: var(--dark-navy);
}
.hero-btn.secondary {
background: transparent;
border-color: rgba(15, 23, 42, 0.25);
color: var(--dark-navy);
}
.hero-btn.secondary:hover {
border-color: var(--dark-navy);
}
.hero-visual {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.hero-image {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 25px 45px rgba(15, 23, 42, 0.15);
background: var(--white);
}
.hero-main-image {
width: 100%;
height: 420px;
object-fit: cover;
transition: transform 0.45s ease;
}
.hero-image:hover .hero-main-image {
transform: scale(1.04);
}
.hero-stats {
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-top: 2rem;
}
.hero-stat {
flex: 1;
min-width: 140px;
text-align: left;
padding: 1rem 1.25rem;
background: var(--white);
border-radius: 12px;
border: 1px solid rgba(15, 23, 42, 0.08);
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
}
.hero-stat strong {
display: block;
font-size: 1.75rem;
font-weight: 700;
color: var(--dark-navy);
margin-bottom: 0.35rem;
}
.hero-stat span {
font-size: 0.85rem;
color: var(--text-gray);
}
/* Features Section */
.features-section {
padding: 6rem 0;
background: var(--light-gray);
}
.section-header {
text-align: center;
margin-bottom: 3rem;
}
.section-title {
font-family: 'Playfair Display', serif;
font-size: 2.35rem;
font-weight: 700;
color: var(--dark-navy);
margin-bottom: 0.75rem;
}
.section-title::after {
display: none;
}
.section-subtitle {
font-size: 1.05rem;
color: var(--text-gray);
max-width: 640px;
margin: 0 auto;
line-height: 1.5;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.25rem;
}
.feature-card {
background: var(--light-gray);
padding: 1.75rem;
border-radius: 14px;
box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
border: 1px solid rgba(15, 23, 42, 0.05);
text-align: left;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.feature-card:hover {
transform: translateY(-6px);
box-shadow: 0 18px 35px rgba(15, 23, 42, 0.12);
}
.feature-icon {
width: 48px;
height: 48px;
border-radius: 12px;
background: var(--white);
border: 1px solid rgba(15, 23, 42, 0.08);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
color: var(--dark-navy);
margin-bottom: 1rem;
}
.feature-title {
font-size: 1.15rem;
font-weight: 600;
color: var(--dark-navy);
margin-bottom: 0.5rem;
}
.feature-description {
color: var(--text-gray);
line-height: 1.5;
font-size: 0.95rem;
}
/* Product Categories Section */
.product-categories {
padding: 5rem 0;
background: var(--soft-gray);
}
.categories-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
margin-top: 3rem;
}
.category-card-link {
text-decoration: none;
color: inherit;
}
.category-card {
background: var(--white);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
transition: all 0.4s ease;
border: 1px solid rgba(0, 0, 0, 0.05);
}
.category-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}
.category-image {
position: relative;
height: 320px;
overflow: hidden;
}
.category-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.4s ease;
}
.category-card:hover .category-image img {
transform: scale(1.1);
}
.category-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(0, 7, 69, 0.8), rgba(45, 49, 66, 0.6));
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.category-card:hover .category-overlay {
opacity: 1;
}
.category-overlay .category-button {
display: flex;
align-items: center;
gap: 0.75rem;
background: var(--primary-yellow);
color: var(--dark-navy);
padding: 1rem 2rem;
border-radius: 8px;
font-weight: 600;
transform: translateY(20px);
transition: transform 0.3s ease 0.1s;
}
.category-card:hover .category-overlay .category-button {
transform: translateY(0);
}
.category-content {
padding: 2rem;
}
.category-content h3 {
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
font-weight: 600;
color: var(--dark-navy);
margin-bottom: 1rem;
}
.category-content p {
color: var(--text-gray);
line-height: 1.6;
margin-bottom: 1.5rem;
}
.category-features {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.feature-tag {
background: var(--light-gray);
color: var(--dark-navy);
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.875rem;
font-weight: 500;
}
/* Why Choose Section */
.why-choose-section {
padding: 5rem 0;
background: var(--white);
}
.showcase-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.showcase-title {
font-family: 'Playfair Display', serif;
font-size: 2.5rem;
font-weight: 700;
color: var(--dark-navy);
margin-bottom: 1.5rem;
line-height: 1.2;
}
.showcase-description {
font-size: 1.125rem;
color: var(--text-gray);
line-height: 1.6;
margin-bottom: 2rem;
}
.showcase-points {
margin-bottom: 2.5rem;
}
.point-item {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}
.point-item i {
color: var(--primary-yellow);
font-size: 1.25rem;
}
.point-item span {
color: var(--dark-navy);
font-weight: 500;
}
.showcase-btn {
display: inline-flex;
align-items: center;
gap: 0.75rem;
background: var(--primary-yellow);
color: var(--dark-navy);
padding: 1rem 2rem;
border-radius: 8px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
}
.showcase-btn:hover {
background: var(--dark-navy);
color: var(--primary-yellow);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 7, 69, 0.3);
}
.showcase-visual {
position: relative;
}
.showcase-image-main {
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
.showcase-image-main img {
width: 100%;
height: 400px;
object-fit: cover;
}
.showcase-image-accent {
position: absolute;
top: -2rem;
right: -2rem;
width: 200px;
height: 150px;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
border: 4px solid var(--white);
}
.showcase-image-accent img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Animation Improvements */
[data-animate] {
opacity: 0;
transform: translateY(30px);
transition: all 0.6s ease;
}
[data-animate].animate {
opacity: 1;
transform: translateY(0);
}
[data-animate][data-delay="100"].animate {
transition-delay: 0.1s;
}
[data-animate][data-delay="200"].animate {
transition-delay: 0.2s;
}
[data-animate][data-delay="300"].animate {
transition-delay: 0.3s;
}
/* Responsive Design */
@media (max-width: 1024px) {
.hero-content {
grid-template-columns: 1fr;
gap: 2rem;
text-align: center;
padding-left: 1rem;
padding-right: 1rem;
}
.hero-title {
font-size: 3rem;
}
.hero.hero-fullwidth .hero-title {
font-size: 3rem;
}
.showcase-content {
grid-template-columns: 1fr;
gap: 3rem;
}
.showcase-visual {
order: -1;
}
}
@media (max-width: 768px) {
.hero {
padding-top: 100px;
min-height: 80vh;
}
.hero.hero-fullwidth {
min-height: 70vh;
padding-top: 0;
}
.hero.hero-fullwidth .hero-title {
font-size: 2.4rem;
}
.hero.hero-fullwidth .hero-subtitle {
font-size: 1rem;
}
.hero-content {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.hero-title {
font-size: 2.5rem;
}
.hero-buttons {
justify-content: center;
}
.hero-stats {
grid-template-columns: 1fr;
gap: 0.5rem;
}
.features-section,
.product-categories,
.why-choose-section {
padding: 4rem 0;
}
.section-title {
font-size: 2rem;
}
.showcase-title {
font-size: 2rem;
}
.categories-grid {
grid-template-columns: 1fr;
}
.showcase-image-accent {
position: static;
width: 100%;
height: 200px;
margin-top: 1rem;
}
}
@media (max-width: 480px) {
.hero-content {
padding-left: 0;
padding-right: 0;
}
.hero-title {
font-size: 2rem;
}
.hero-btn {
padding: 0.875rem 1.5rem;
font-size: 0.875rem;
}
.stat-item {
padding: 1rem 0.5rem;
}
.feature-card {
padding: 2rem 1.5rem;
}
.category-content {
padding: 1.5rem;
}
}
/* Page Hero (for commercial and hardware pages) */
.page-hero {
background: linear-gradient(135deg, var(--dark-navy) 0%, var(--light-navy) 100%);
min-height: 50vh;
display: flex;
align-items: center;
position: relative;
padding-top: 60px;
background-image: url('https://images.unsplash.com/photo-1564013434775-f71db2d249b5?w=1920&h=1080&fit=crop&overlay=true');
background-size: cover;
background-position: center;
}
.page-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(45, 49, 66, 0.9) 0%, rgba(58, 68, 88, 0.8) 100%);
}
.page-hero .hero-background {
width: 100%;
height: 100%;
position: relative;
z-index: 2;
}
.page-hero .hero-content {
text-align: center;
color: var(--white);
max-width: 800px;
margin: 0 auto;
padding: 4rem 0;
}
.page-hero .hero-content h1 {
font-family: 'Playfair Display', serif;
font-size: 3.5rem;
font-weight: 700;
margin-bottom: 1.5rem;
line-height: 1.2;
}
.page-hero .hero-content p {
font-size: 1.25rem;
opacity: 0.9;
line-height: 1.6;
}
/* Welcome Section */
.welcome-section {
padding: 5rem 0;
background-color: var(--white);
text-align: center;
}
.welcome-content {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s ease;
}
.welcome-content.animate {
opacity: 1;
transform: translateY(0);
}
.welcome-content h2 {
font-family: 'Playfair Display', serif;
font-size: 3rem;
color: var(--dark-navy);
margin-bottom: 1rem;
position: relative;
display: inline-block;
}
.welcome-content h2::before {
content: '';
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
background: linear-gradient(45deg, transparent, rgba(247, 213, 66, 0.1), transparent);
border-radius: 12px;
opacity: 0;
transition: opacity 0.5s ease;
}
.welcome-content:hover h2::before {
opacity: 1;
}
.subtitle {
font-style: italic;
font-size: 1.2rem;
color: var(--text-gray);
margin-bottom: 2rem;
animation: fadeInUp 0.8s ease-out 0.3s both;
}
.description {
font-size: 1.1rem;
color: var(--text-gray);
max-width: 800px;
margin: 0 auto;
line-height: 1.8;
animation: fadeInUp 0.8s ease-out 0.6s both;
}
/* Featured Banner */
.featured-banner {
background: linear-gradient(135deg, var(--primary-yellow) 0%, #F4C842 100%);
padding: 4rem 0;
text-align: center;
}
.banner-content h2 {
font-family: 'Playfair Display', serif;
font-size: 3rem;
color: var(--dark-navy);
margin-bottom: 1rem;
}
.banner-content p {
font-size: 1.2rem;
color: var(--dark-navy);
margin-bottom: 2rem;
}
.cta-button {
background: var(--dark-navy);
color: var(--white);
padding: 1rem 2.5rem;
border: none;
border-radius: 8px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
text-decoration: none;
display: inline-block;
animation: fadeInUp 0.8s ease-out 1.2s both;
}
.cta-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.6s ease;
}
.cta-button:hover::before {
left: 100%;
}
.cta-button:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 12px 30px rgba(45, 49, 66, 0.4);
background: linear-gradient(135deg, var(--dark-navy), var(--light-navy));
}
/* Main Categories */
.main-categories {
padding: 5rem 0;
background: linear-gradient(135deg, var(--primary-yellow) 0%, #F4C842 100%);
}
.categories-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
opacity: 0;
transform: translateY(50px);
transition: all 0.8s ease;
}
.categories-grid.animate {
opacity: 1;
transform: translateY(0);
}
.category-card-link {
text-decoration: none;
color: inherit;
display: block;
opacity: 0;
transform: translateY(30px);
transition: all 0.6s ease;
}
.category-card-link.animate {
opacity: 1;
transform: translateY(0);
}
.category-card-link:nth-child(1) { transition-delay: 0.1s; }
.category-card-link:nth-child(2) { transition-delay: 0.2s; }
.category-card-link:nth-child(3) { transition-delay: 0.3s; }
.category-card-link:nth-child(4) { transition-delay: 0.4s; }
.category-card {
background: var(--white);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
height: 100%;
position: relative;
border: 2px solid transparent;
}
.category-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, var(--primary-yellow), #F4C842);
opacity: 0;
border-radius: 16px;
transition: opacity 0.3s ease;
z-index: -1;
}
.category-card-link:hover .category-card {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
border-color: var(--primary-yellow);
}
.category-card-link:hover .category-card::before {
opacity: 0.1;
}
.category-image {
height: 320px;
overflow: hidden;
position: relative;
}
.category-image::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(45deg, rgba(247, 213, 66, 0.1), transparent);
opacity: 0;
transition: opacity 0.3s ease;
}
.category-card:hover .category-image::after {
opacity: 1;
}
.category-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.category-card:hover .category-image img {
transform: scale(1.08) rotate(1deg);
}
.category-content {
padding: 2rem;
position: relative;
}
.category-content h3 {
font-family: 'Playfair Display', serif;
font-size: 2rem;
color: var(--dark-navy);
margin-bottom: 1rem;
transition: color 0.3s ease;
}
.category-card:hover .category-content h3 {
color: var(--primary-yellow);
}
.category-content p {
color: var(--text-gray);
line-height: 1.6;
margin-bottom: 1.5rem;
transition: color 0.3s ease;
}
.category-button {
background: var(--primary-yellow);
color: var(--dark-navy);
padding: 0.875rem 1.75rem;
border-radius: 10px;
font-weight: 600;
text-align: center;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
border: 2px solid transparent;
}
.category-button::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.6s ease;
}
.category-card-link:hover .category-button::before {
left: 100%;
}
.category-card-link:hover .category-button {
background: var(--dark-navy);
color: var(--primary-yellow);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(45, 49, 66, 0.3);
border-color: var(--primary-yellow);
}
/* Product Categories */
.product-categories {
padding: 5rem 0;
background: var(--light-gray);
}
.products-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.5rem;
}
.product-card {
background: var(--white);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
border: 2px solid transparent;
position: relative;
opacity: 0;
transform: translateY(30px);
}
.product-card.animate {
opacity: 1;
transform: translateY(0);
}
.product-card:nth-child(1) { transition-delay: 0.1s; }
.product-card:nth-child(2) { transition-delay: 0.2s; }
.product-card:nth-child(3) { transition-delay: 0.3s; }
.product-card:nth-child(4) { transition-delay: 0.4s; }
.product-card:nth-child(5) { transition-delay: 0.5s; }
.product-card:nth-child(6) { transition-delay: 0.6s; }
.product-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(247, 213, 66, 0.1), transparent);
opacity: 0;
transition: opacity 0.3s ease;
border-radius: 16px;
}
.product-card:hover::before {
opacity: 1;
}
.product-card.featured {
background: linear-gradient(135deg, var(--primary-yellow), #F4C842);
transform: translateY(-12px) scale(1.02);
border-color: var(--dark-navy);
animation: pulse 3s infinite ease-in-out;
}
.product-card:hover {
transform: translateY(-10px) scale(1.03);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
border-color: var(--primary-yellow);
}
.product-image {
height: 180px;
overflow: hidden;
}
.product-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.product-card h4 {
padding: 1.5rem;
font-size: 1.2rem;
color: var(--dark-navy);
text-align: center;
font-weight: 600;
}
/* Door Specifications */
.door-specifications {
padding: 5rem 0;
background: var(--white);
}
.door-specifications h2 {
font-family: 'Playfair Display', serif;
font-size: 2.5rem;
color: var(--dark-navy);
text-align: center;
margin-bottom: 3rem;
}
.specifications-content {
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: 4rem;
align-items: start;
}
.spec-image img {
width: 100%;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.spec-section {
margin-bottom: 2.5rem;
}
.spec-section h3 {
font-size: 1.5rem;
color: var(--dark-navy);
margin-bottom: 1.5rem;
font-weight: 600;
}
/* Removed - option-grid now consistently uses 3 columns */
.option-card {
background: var(--light-gray);
border-radius: 8px;
padding: 1rem;
text-align: center;
cursor: pointer;
transition: background-color 0.3s ease;
}
.option-card:hover {
background: var(--primary-yellow);
}
.option-image {
height: 80px;
margin-bottom: 0.5rem;
border-radius: 6px;
overflow: hidden;
}
.option-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.option-card span {
font-weight: 500;
color: var(--dark-navy);
}
.frame-options {
display: flex;
flex-direction: column;
gap: 1rem;
}
.radio-option {
display: flex;
align-items: center;
gap: 0.5rem;
cursor: pointer;
padding: 0.5rem;
border-radius: 6px;
transition: background-color 0.3s ease;
}
.radio-option:hover {
background: var(--light-gray);
}
.radio-option input[type="radio"] {
accent-color: var(--primary-yellow);
}
/* Footer */
.footer {
background: var(--footer-slate);
color: var(--white);
padding: 3.5rem 0 1.5rem;
}
.footer-content {
display: grid;
grid-template-columns: 1.8fr 1fr 1fr 1fr 1.2fr;
gap: 2.5rem;
margin-bottom: 2rem;
align-items: start;
}
.footer-logo {
height: 160px;
width: auto;
margin-bottom: 0.5rem;
}
.footer-brand h2 {
font-family: 'Playfair Display', serif;
color: var(--primary-yellow);
margin-bottom: 1rem;
}
.footer-brand p {
color: rgba(255, 255, 255, 0.85);
line-height: 1.6;
font-size: 0.9rem;
}
.footer-links {
display: flex;
flex-direction: column;
align-self: flex-start;
}
.footer-links h4,
.footer-social h4 {
color: rgba(255, 255, 255, 0.85);
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 0.8rem;
margin-bottom: 0.75rem;
}
.footer-links ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.footer-links a {
color: rgba(255, 255, 255, 0.72);
text-decoration: none;
transition: color 0.2s ease;
}
.footer-links a:hover {
color: var(--primary-yellow);
}
.social-icons {
display: flex;
gap: 0.75rem;
}
.social-icons a {
background: rgba(255, 255, 255, 0.1);
color: var(--white);
width: 40px;
height: 40px;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: background 0.2s ease, transform 0.2s ease;
}
.social-icons a:hover {
background: var(--primary-yellow);
color: var(--dark-navy);
transform: translateY(-2px);
}
.footer-contact-info p {
color: rgba(255, 255, 255, 0.72);
font-size: 0.9rem;
margin-bottom: 0.4rem;
}
.footer-contact-info p i {
margin-right: 6px;
color: rgba(255, 255, 255, 0.55);
width: 16px;
text-align: center;
}
.footer-contact-info a {
color: rgba(255, 255, 255, 0.72);
text-decoration: none;
transition: color 0.2s ease;
}
.footer-contact-info a:hover {
color: var(--primary-yellow);
}
.footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
padding-top: 1rem;
text-align: center;
}
.footer-bottom p {
opacity: 0.65;
}
/* Final CTA */
.final-cta {
background: linear-gradient(135deg, var(--dark-navy) 0%, var(--light-navy) 100%);
padding: 4rem 0;
text-align: center;
}
.final-cta h2 {
font-family: 'Playfair Display', serif;
font-size: 3rem;
color: var(--white);
margin-bottom: 1rem;
}
.final-cta p {
font-size: 1.2rem;
color: var(--white);
opacity: 0.9;
margin-bottom: 2rem;
}
.final-cta .cta-button {
background: var(--primary-yellow);
color: var(--dark-navy);
}
/* Responsive Design */
@media (max-width: 768px) {
.hero-text h2 {
font-size: 2.5rem;
}
.page-hero .hero-content h1 {
font-size: 2.5rem;
}
.welcome-content h2 {
font-size: 2rem;
}
.banner-content h2 {
font-size: 2rem;
}
.categories-grid {
grid-template-columns: 1fr;
}
.specifications-content {
grid-template-columns: 1fr;
gap: 2rem;
}
.footer-content {
grid-template-columns: 1fr 1fr;
text-align: left;
}
.footer-brand {
grid-column: 1 / -1;
}
.final-cta h2 {
font-size: 2rem;
}
}
@media (max-width: 480px) {
.container {
padding: 0 15px;
}
.hero-text h2 {
font-size: 2rem;
}
.hero-text p {
font-size: 1.1rem;
}
.products-grid {
grid-template-columns: repeat(2, 1fr);
}
.option-grid {
grid-template-columns: 1fr;
}
}
/* Cart Page Styles */
.cart-main {
/* No header clearance here: on /cart the .breadcrumb band above already
clears the bar, and adding it twice pushed the basket down a second header
height. This is spacing under the breadcrumb, nothing more. */
padding-top: 1.5rem;
padding-bottom: 3rem;
min-height: 70vh;
}
.cart-main h1 {
font-family: 'Playfair Display', serif;
font-size: 2.5rem;
color: var(--dark-navy);
margin-bottom: 2rem;
text-align: center;
}
.empty-cart {
text-align: center;
padding: 4rem 2rem;
}
.empty-cart i {
font-size: 4rem;
color: var(--text-gray);
margin-bottom: 1rem;
}
.empty-cart h2 {
color: var(--dark-navy);
margin-bottom: 1rem;
font-family: 'Playfair Display', serif;
}
.empty-cart p {
color: var(--text-gray);
margin-bottom: 2rem;
}
.cart-items {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 3rem;
align-items: start;
}
/* Old cart-item styling removed to prevent conflicts with cart page grid layout */
.qty-btn {
background: var(--primary-yellow);
border: none;
width: 30px;
height: 30px;
border-radius: 50%;
cursor: pointer;
font-weight: 600;
color: var(--dark-navy);
display: flex;
align-items: center;
justify-content: center;
}
.qty-btn:hover {
transform: scale(1.1);
}
.remove-btn {
background: #EF4444;
color: white;
border: none;
width: 35px;
height: 35px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.remove-btn:hover {
background: #DC2626;
}
.cart-summary {
background: var(--light-gray);
padding: 2rem;
border-radius: 12px;
height: fit-content;
position: sticky;
top: 100px;
}
.cart-summary h3 {
color: var(--dark-navy);
margin-bottom: 1.5rem;
font-family: 'Playfair Display', serif;
}
.cart-summary .summary-line {
display: flex;
justify-content: space-between;
margin-bottom: 1rem;
padding: 0.5rem 0;
width: 100%;
}
.cart-summary .summary-line:last-of-type {
border-top: 2px solid var(--dark-navy);
font-weight: 700;
font-size: 1.2rem;
color: var(--dark-navy);
margin-top: 1rem;
padding-top: 1rem;
}
.checkout-btn {
width: 100%;
background: var(--primary-yellow);
color: var(--dark-navy);
border: none;
padding: 1rem;
border-radius: 8px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
margin-top: 1.5rem;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.checkout-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(247, 213, 66, 0.3);
}
.logo a {
text-decoration: none;
color: inherit;
}
/* Responsive cart styles */
@media (max-width: 768px) {
.cart-items {
grid-template-columns: 1fr;
gap: 2rem;
}
.cart-item {
flex-direction: column;
text-align: center;
}
.cart-item-quantity {
justify-content: center;
}
.cart-summary {
position: relative;
top: auto;
}
}
/* Category and Product Pages */
/* Page Banner */
.page-banner {
position: relative;
height: 180px;
/* Clears the fixed header, so it is the header's height - not 70px, which
matched neither of the bar's two heights: it left a 6px white strip under
the header on phones (the bar is 64px there) and slid the banner 17px
BEHIND the bar on desktop (87px). Every interior page uses this banner, so
that one literal was the seam on /contact, /hardware, /resources,
/residential, /commercial-builder, /privacy and /terms. */
margin-top: var(--header-h);
background-size: cover;
background-position: center;
display: flex;
align-items: flex-end;
}
.page-banner::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(to right, rgba(46, 41, 79, 0.85), rgba(46, 41, 79, 0.4));
}
.page-banner .container {
position: relative;
z-index: 1;
width: 100%;
padding-bottom: 1.5rem;
}
.page-banner .banner-content {
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.page-banner .breadcrumb-nav {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
}
.page-banner .breadcrumb-nav a {
color: var(--primary-yellow);
text-decoration: none;
font-weight: 600;
}
.page-banner .breadcrumb-nav .separator {
color: rgba(255, 255, 255, 0.5);
}
.page-banner .breadcrumb-nav span:last-child {
color: rgba(255, 255, 255, 0.7);
}
.page-banner h1 {
font-family: 'Playfair Display', serif;
font-size: 2.5rem;
color: var(--white);
margin: 0;
font-style: italic;
}
/* Residential Collections */
.residential-collections {
padding: 2.5rem 0;
background: var(--light-gray);
}
.residential-card-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
max-width: 1100px;
margin: 0 auto;
}
.residential-card {
background: var(--white);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer;
text-decoration: none;
color: inherit;
display: block;
}
.residential-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}
.residential-card .card-image {
height: 320px;
overflow: hidden;
}
.residential-card .card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.residential-card:hover .card-image img {
transform: scale(1.05);
}
.residential-card .card-body {
padding: 1.5rem;
}
.residential-card h3 {
font-family: 'Playfair Display', serif;
font-size: 1.6rem;
color: var(--dark-navy);
margin: 0 0 0.75rem 0;
font-weight: 600;
}
.residential-card p {
font-size: 0.9rem;
color: var(--text-gray);
line-height: 1.6;
margin: 0 0 1rem 0;
}
.residential-card .card-tags {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.residential-card .card-tags span {
background: var(--light-gray);
color: var(--dark-navy);
padding: 0.3rem 0.6rem;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 500;
}
@media (max-width: 900px) {
.residential-card-grid {
grid-template-columns: 1fr;
max-width: 400px;
}
}
/* ============================================
COMMERCIAL PAGE - COMPACT CONFIGURATOR STYLES
============================================ */
/* Product Type Tabs Row */
.product-type-tabs {
background: var(--white);
padding: 1rem 0;
}
.type-tabs-row {
display: flex;
justify-content: center;
gap: 0.75rem;
flex-wrap: wrap;
}
.type-tab {
display: flex;
flex-direction: column;
align-items: center;
padding: 0.85rem;
border-radius: 10px;
background: transparent;
border: none;
cursor: pointer;
min-width: 185px;
transition: all 0.2s;
}
.type-tab img {
width: 175px;
height: 125px;
object-fit: cover;
border-radius: 8px;
margin-bottom: 0.6rem;
}
.type-tab span {
font-size: 1.05rem;
text-align: center;
font-weight: 500;
color: var(--dark-navy);
}
.type-tab:hover {
background: rgba(247, 213, 66, 0.2);
}
.type-tab.active {
background: var(--primary-yellow);
border-radius: 8px;
}
.type-tab.active span {
font-weight: 600;
}
/* Loading state for tabs */
.loading-tabs {
padding: 2rem;
text-align: center;
color: var(--text-gray);
font-size: 0.9rem;
}
/* Specs Title Section */
.specs-title-section {
background: var(--white);
padding: 1rem 0 0.5rem;
border-bottom: 1px solid var(--border-gray);
}
.specs-title {
font-family: 'Playfair Display', serif;
font-size: 1.4rem;
color: var(--dark-navy);
text-align: center;
margin: 0;
}
/* Product Config Section */
.product-config-section {
background: var(--white);
padding: 1.5rem 0;
}
.config-wrapper {
display: grid;
grid-template-columns: 280px 1fr;
gap: 2rem;
background: var(--white);
border: 1px solid var(--border-gray);
border-radius: 8px;
padding: 1.5rem;
margin-bottom: 1.5rem;
}
.config-image-col {
display: flex;
justify-content: center;
align-items: flex-start;
}
.config-image-col img {
max-width: 100%;
height: auto;
border-radius: 8px;
}
.config-options-col {
display: flex;
flex-direction: column;
gap: 1rem;
}
/* Compact Config Sections - for database-driven options */
.config-options-col .config-section {
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--border-gray);
}
.config-options-col .config-section:last-child {
border-bottom: none;
padding-bottom: 0;
}
.config-options-col .config-section h3 {
font-size: 0.8rem;
font-weight: 600;
color: var(--dark-navy);
margin-bottom: 0.5rem;
text-transform: none;
}
/* Compact option grid for inline radio-style options */
.config-options-col .option-grid {
display: grid;
gap: 0.75rem;
}
/* Radio-style options (inline with bullet) */
.config-options-col .option-grid.radio-inline .config-option {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0;
border: none;
background: transparent;
min-height: auto;
}
.config-options-col .option-grid.radio-inline .config-option::before {
content: '';
width: 14px;
height: 14px;
border: 2px solid var(--border-gray);
border-radius: 50%;
flex-shrink: 0;
}
.config-options-col .option-grid.radio-inline .config-option.selected::before {
border-color: var(--dark-navy);
background: var(--dark-navy);
box-shadow: inset 0 0 0 3px var(--white);
}
.config-options-col .option-grid.radio-inline .config-option span {
font-size: 0.8rem;
}
/* Button-style options (with icons/images) */
.config-options-col .option-grid.button-style .config-option {
flex-direction: column;
padding: 0.5rem 0.75rem;
border: 1px solid var(--border-gray);
border-radius: 6px;
min-width: 70px;
background: var(--white);
}
.config-options-col .option-grid.button-style .config-option img {
width: 30px;
height: 24px;
margin-bottom: 0.25rem;
}
.config-options-col .option-grid.button-style .config-option i {
font-size: 1.1rem;
margin-bottom: 0.25rem;
}
.config-options-col .option-grid.button-style .config-option.selected {
border-color: var(--dark-navy);
background: var(--dark-navy);
color: var(--white);
}
.config-options-col .option-grid.button-style .config-option.selected span,
.config-options-col .option-grid.button-style .config-option.selected i {
color: var(--white);
}
/* Compact config option base */
.config-options-col .config-option {
cursor: pointer;
transition: all 0.2s;
}
.config-options-col .config-option span {
font-size: 0.75rem;
font-weight: 500;
color: var(--dark-navy);
}
/* Size selects row */
.config-options-col .size-row {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.config-options-col .size-group {
flex: 1;
min-width: 150px;
}
.config-options-col .size-group-label {
font-size: 0.7rem;
font-weight: 600;
color: var(--text-gray);
margin-bottom: 0.3rem;
display: block;
}
.config-options-col .size-selects {
display: flex;
gap: 0.5rem;
}
.config-options-col .size-select {
flex: 1;
padding: 0.4rem 0.5rem;
font-size: 0.75rem;
border: 1px solid var(--border-gray);
border-radius: 4px;
background: var(--white);
}
.config-options-col .door-label {
font-size: 0.65rem;
color: var(--text-gray);
text-align: center;
margin-top: 0.25rem;
}
/* Hardware dropdown */
.config-options-col .hardware-select {
width: 100%;
padding: 0.5rem;
font-size: 0.8rem;
border: 1px solid var(--border-gray);
border-radius: 6px;
background: var(--white);
}
/* Summary Section at Bottom */
.config-summary-wrapper {
background: var(--white);
padding: 0 0 2rem;
}
.config-summary-section {
background: var(--white);
border: 1px solid var(--border-gray);
border-radius: 8px;
padding: 1rem;
}
.summary-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 2rem;
}
.cart-controls {
display: flex;
align-items: center;
gap: 0.75rem;
}
.qty-field {
width: 60px;
padding: 0.5rem;
font-size: 0.85rem;
border: 1px solid var(--border-gray);
border-radius: 4px;
text-align: center;
}
.add-cart-btn {
background: var(--primary-yellow);
color: var(--dark-navy);
border: none;
padding: 0.5rem 1.25rem;
border-radius: 4px;
font-weight: 600;
font-size: 0.85rem;
cursor: pointer;
transition: all 0.2s;
}
.add-cart-btn:hover {
background: #e5c63e;
}
.price-box {
background: var(--nav-indigo);
color: var(--white);
padding: 0.75rem 1rem;
border-radius: 6px;
min-width: 180px;
}
.price-line {
display: flex;
justify-content: space-between;
font-size: 0.8rem;
padding: 0.25rem 0;
}
.price-line.total {
background: var(--primary-yellow);
color: var(--dark-navy);
font-weight: 600;
margin: 0.5rem -1rem -0.75rem;
padding: 0.5rem 1rem;
border-radius: 0 0 6px 6px;
}
.summary-details {
flex: 1;
}
.summary-table {
width: 100%;
border-collapse: collapse;
font-size: 0.8rem;
}
.summary-table td {
padding: 0.4rem 0.5rem;
border-bottom: 1px solid var(--border-gray);
}
.summary-table td:first-child {
font-weight: 600;
color: var(--dark-navy);
width: 35%;
}
.summary-table td:last-child {
color: var(--text-gray);
}
.summary-table tr:last-child td {
border-bottom: none;
}
/* Footer Grid for Commercial/Residential Pages */
.footer-grid {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr;
gap: 3rem;
margin-bottom: 2rem;
}
@media (max-width: 900px) {
.config-wrapper {
grid-template-columns: 1fr;
}
.config-image-col {
order: -1;
}
.summary-row {
flex-direction: column;
gap: 1rem;
}
.type-tabs-row {
justify-content: flex-start;
overflow-x: auto;
padding-bottom: 0.5rem;
}
.footer-grid {
grid-template-columns: 1fr;
text-align: center;
}
}
/* Footer Styles for Category Pages */
.footer-title {
color: var(--primary-yellow);
font-family: 'Playfair Display', serif;
font-size: 1.3rem;
margin-bottom: 1rem;
}
.footer-nav ul {
list-style: none;
padding: 0;
margin: 0;
columns: 2;
column-gap: 2rem;
}
.footer-nav li {
margin-bottom: 0.5rem;
}
.footer-nav a {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
font-size: 0.9rem;
transition: color 0.2s;
}
.footer-nav a:hover {
color: var(--primary-yellow);
}
.breadcrumb {
background: var(--light-gray);
padding: 1rem 0;
/* The fourth and last copy of the header's height. At `1rem + 70px` the
breadcrumb text sat one pixel under an 87px bar on desktop - i.e. behind
it. Same one number as everything else that has to clear the header. */
padding-top: calc(1rem + var(--header-h));
}
.breadcrumb-nav {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.9rem;
}
.breadcrumb-nav a {
color: var(--primary-yellow);
text-decoration: none;
font-weight: 500;
}
.breadcrumb-nav span {
color: var(--text-gray);
}
.page-header {
background: var(--white);
padding: 1rem 0;
text-align: center;
}
.page-header h1 {
font-family: 'Playfair Display', serif;
font-size: 1.8rem;
color: var(--dark-navy);
margin-bottom: 0.3rem;
}
.page-header p {
font-size: 1rem;
color: var(--text-gray);
max-width: 600px;
margin: 0 auto;
}
.product-card-link {
text-decoration: none;
color: inherit;
display: block;
}
.product-info {
padding: 1.5rem;
}
.product-info h4 {
font-size: 1.4rem;
color: var(--dark-navy);
margin-bottom: 0.5rem;
font-weight: 600;
}
.product-price {
color: var(--primary-yellow);
font-weight: 700;
font-size: 1.1rem;
margin-bottom: 0.75rem;
}
.product-description {
color: var(--text-gray);
font-size: 0.9rem;
line-height: 1.5;
}
.product-card-link:hover .product-card {
transform: translateY(-8px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15);
}
/* Why Choose Section */
.why-choose {
background: var(--light-gray);
padding: 4rem 0;
}
.why-choose h2 {
font-family: 'Playfair Display', serif;
font-size: 2.5rem;
color: var(--dark-navy);
text-align: center;
margin-bottom: 3rem;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.feature-card {
background: var(--white);
padding: 2rem;
border-radius: 12px;
text-align: center;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease;
}
.feature-card:hover {
transform: translateY(-5px);
}
.feature-icon {
background: var(--primary-yellow);
color: var(--dark-navy);
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
font-size: 1.5rem;
}
.feature-card h3 {
color: var(--dark-navy);
margin-bottom: 1rem;
font-size: 1.3rem;
}
.feature-card p {
color: var(--text-gray);
line-height: 1.6;
}
/* ========================================
HARDWARE PAGE - REVAMPED
======================================== */
/* Category Tabs */
.hw-categories {
padding: 2rem 0 1rem;
background: var(--white);
}
.hw-category-tabs {
display: flex;
gap: 1.5rem;
padding: 1rem 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
scrollbar-color: var(--primary-yellow) transparent;
padding-bottom: 0.75rem;
}
.hw-cat-tab {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.6rem;
background: none;
border: none;
cursor: pointer;
padding: 0.5rem;
transition: all 0.3s ease;
min-width: 90px;
flex-shrink: 0;
}
.hw-cat-circle {
width: 100px;
height: 100px;
border-radius: 12px;
overflow: hidden;
border: 3px solid #e2e8f0;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
display: flex;
align-items: center;
justify-content: center;
background: #f8f9fa;
}
.hw-cat-tab.active .hw-cat-circle,
.hw-cat-tab:hover .hw-cat-circle {
border-color: var(--primary-yellow);
box-shadow: 0 4px 16px rgba(245, 197, 24, 0.3);
}
.hw-cat-circle img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hw-cat-circle i {
font-size: 2rem;
color: var(--text-gray);
transition: color 0.3s ease;
}
.hw-cat-tab.active .hw-cat-circle i,
.hw-cat-tab:hover .hw-cat-circle i {
color: var(--dark-navy);
}
.hw-cat-tab span {
font-size: 0.8rem;
font-weight: 600;
color: var(--text-gray);
text-align: center;
white-space: nowrap;
}
.hw-cat-tab.active span {
color: var(--dark-navy);
}
/* Products Section */
.hw-products-section {
padding: 2rem 0 4rem;
background: var(--light-gray);
}
.hw-products-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.75rem;
}
.hw-product-card {
background: var(--white);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
transition: all 0.3s ease;
display: flex;
flex-direction: column;
}
.hw-product-card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}
.hw-product-card .hw-card-image {
height: 220px;
overflow: hidden;
background: #f8f9fa;
display: flex;
align-items: center;
justify-content: center;
padding: 1rem;
}
.hw-product-card .hw-card-image img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
transition: transform 0.3s ease;
}
.hw-product-card:hover .hw-card-image img {
transform: scale(1.05);
}
.hw-product-card .hw-card-body {
padding: 1.25rem;
flex: 1;
display: flex;
flex-direction: column;
}
.hw-product-card .hw-card-sku {
font-size: 0.75rem;
color: var(--text-gray);
font-weight: 500;
margin-bottom: 0.4rem;
letter-spacing: 0.02em;
}
.hw-product-card .hw-card-name {
font-family: 'Inter', sans-serif;
font-size: 1rem;
font-weight: 700;
color: var(--dark-navy);
margin-bottom: 0.4rem;
line-height: 1.3;
}
.hw-product-card .hw-card-desc {
font-size: 0.82rem;
color: var(--text-gray);
line-height: 1.5;
margin-bottom: 1rem;
flex: 1;
}
.hw-product-card .hw-card-price {
font-size: 1.25rem;
font-weight: 700;
color: var(--primary-yellow);
margin-bottom: 0.75rem;
}
.hw-product-card .hw-add-to-cart {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
width: 100%;
padding: 0.7rem 1rem;
background: var(--dark-navy);
color: var(--white);
border: 2px solid var(--dark-navy);
border-radius: 8px;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: all 0.25s ease;
}
.hw-product-card .hw-add-to-cart:hover {
background: transparent;
color: var(--dark-navy);
}
.hw-product-card .hw-add-to-cart i {
font-size: 0.85rem;
}
@media (max-width: 1024px) {
.hw-products-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (max-width: 768px) {
.hw-products-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.hw-category-tabs {
gap: 1.25rem;
}
.hw-cat-circle {
width: 75px;
height: 75px;
}
.hw-cat-tab span {
font-size: 0.7rem;
}
}
@media (max-width: 480px) {
.hw-products-grid {
grid-template-columns: 1fr;
max-width: 360px;
margin: 0 auto;
}
}
/* Active navigation link */
.main-nav a.active {
color: var(--primary-yellow);
font-weight: 600;
}
/* Mobile responsive updates */
@media (max-width: 768px) {
.page-header h1 {
font-size: 2rem;
}
.features-grid {
grid-template-columns: 1fr;
}
}
/* Product Detail Page */
.product-details {
padding: 3rem 0;
background: var(--white);
}
.product-layout {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: start;
}
.product-images {
display: flex;
flex-direction: column;
gap: 1rem;
}
.main-image {
width: 100%;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.main-image img {
width: 100%;
height: auto;
display: block;
}
.thumbnail-images {
display: flex;
gap: 1rem;
justify-content: center;
}
.thumbnail-images img {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 8px;
cursor: pointer;
border: 2px solid transparent;
transition: border-color 0.3s ease;
}
.thumbnail-images img:hover {
border-color: var(--primary-yellow);
}
.product-info-section h1 {
font-family: 'Playfair Display', serif;
font-size: 2.5rem;
color: var(--dark-navy);
margin-bottom: 1rem;
}
.product-rating {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1.5rem;
}
.stars {
color: var(--primary-yellow);
}
.stars i {
margin-right: 0.2rem;
}
.product-rating span {
color: var(--text-gray);
font-size: 0.9rem;
}
.price-section {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 2rem;
}
.current-price {
font-size: 2rem;
font-weight: 700;
color: var(--dark-navy);
}
.original-price {
font-size: 1.2rem;
color: var(--text-gray);
text-decoration: line-through;
}
.discount {
background: var(--primary-yellow);
color: var(--dark-navy);
padding: 0.3rem 0.8rem;
border-radius: 20px;
font-size: 0.9rem;
font-weight: 600;
}
.product-description {
margin-bottom: 2rem;
}
.product-description p {
color: var(--text-gray);
line-height: 1.6;
font-size: 1.1rem;
}
.product-features {
margin-bottom: 2rem;
}
.product-features h3 {
color: var(--dark-navy);
margin-bottom: 1rem;
font-size: 1.3rem;
}
.product-features ul {
list-style: none;
padding: 0;
}
.product-features li {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
color: var(--text-gray);
}
.product-features li i {
color: var(--primary-yellow);
font-size: 0.9rem;
}
.add-to-cart-section {
display: flex;
align-items: center;
gap: 2rem;
margin-top: 2rem;
}
.quantity-selector {
display: flex;
align-items: center;
gap: 1rem;
}
.quantity-selector label {
color: var(--dark-navy);
font-weight: 600;
}
.qty-controls {
display: flex;
align-items: center;
gap: 0.5rem;
border: 2px solid var(--border-gray);
border-radius: 8px;
padding: 0.5rem;
}
.qty-controls .qty-btn {
background: none;
border: none;
font-size: 1.2rem;
font-weight: 600;
color: var(--dark-navy);
cursor: pointer;
padding: 0.3rem 0.8rem;
border-radius: 4px;
transition: background-color 0.3s ease;
}
.qty-controls .qty-btn:hover {
background: var(--primary-yellow);
}
.qty-controls span {
font-weight: 600;
min-width: 30px;
text-align: center;
color: var(--dark-navy);
}
.add-to-cart-btn {
background: var(--primary-yellow);
color: var(--dark-navy);
border: none;
padding: 1rem 2rem;
border-radius: 8px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.5rem;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.add-to-cart-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(247, 213, 66, 0.3);
}
.size-options select {
width: 100%;
padding: 0.75rem;
border: 2px solid var(--border-gray);
border-radius: 8px;
font-size: 1rem;
color: var(--dark-navy);
background: var(--white);
}
.color-options {
display: flex;
gap: 1rem;
margin-top: 0.5rem;
}
.color-swatch {
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
border: 3px solid transparent;
transition: border-color 0.3s ease, transform 0.3s ease;
}
.color-swatch:hover {
transform: scale(1.1);
}
.color-swatch.selected {
border-color: var(--primary-yellow);
box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--primary-yellow);
}
/* Technical Specifications */
.tech-specs {
background: var(--light-gray);
padding: 3rem 0;
}
.tech-specs h2 {
font-family: 'Playfair Display', serif;
font-size: 2.5rem;
color: var(--dark-navy);
text-align: center;
margin-bottom: 3rem;
}
.specs-table {
max-width: 600px;
margin: 0 auto;
background: var(--white);
border-radius: 12px;
padding: 2rem;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}
.spec-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 0;
border-bottom: 1px solid var(--border-gray);
}
.spec-row:last-child {
border-bottom: none;
}
.spec-label {
font-weight: 600;
color: var(--dark-navy);
}
.spec-value {
color: var(--text-gray);
text-align: right;
}
/* Product page responsive */
@media (max-width: 768px) {
.product-layout {
grid-template-columns: 1fr;
gap: 2rem;
}
.product-info-section h1 {
font-size: 2rem;
}
.price-section {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.add-to-cart-section {
flex-direction: column;
align-items: stretch;
}
.add-to-cart-btn {
justify-content: center;
}
.thumbnail-images {
justify-content: flex-start;
overflow-x: auto;
padding-bottom: 0.5rem;
}
.specs-table {
margin: 0 1rem;
}
.spec-row {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.spec-value {
text-align: left;
}
}
/* Product Type Tabs - Compact Style */
.product-selection {
background: var(--white);
padding: 1rem 0;
border-bottom: 1px solid var(--border-gray);
}
.product-tabs {
display: flex;
gap: 0.5rem;
overflow-x: auto;
padding-bottom: 0.5rem;
}
.product-tab {
display: flex;
flex-direction: column;
align-items: center;
padding: 0.5rem;
border-radius: 8px;
text-decoration: none;
color: var(--dark-navy);
min-width: 100px;
transition: all 0.2s;
background: transparent;
border: none;
cursor: pointer;
}
.product-tab img {
width: 100px;
height: 100px;
object-fit: cover;
border-radius: 8px;
margin-bottom: 0.5rem;
aspect-ratio: 1 / 1;
}
.product-tab span {
font-size: 0.75rem;
text-align: center;
font-weight: 500;
}
.product-tab:hover {
background: rgba(247, 213, 66, 0.3);
}
.product-tab.active {
background: var(--primary-yellow);
}
.product-tab.active span {
font-weight: 600;
}
.product-configurator {
padding: 1.5rem 0;
background: var(--white);
}
.configurator-layout {
display: grid;
grid-template-columns: 1fr 320px;
gap: 1.5rem;
background: var(--white);
border: 1px solid var(--border-gray);
border-radius: 12px;
padding: 1.25rem;
}
.product-display {
display: flex;
align-items: flex-start;
justify-content: center;
}
.product-main-image {
width: 100%;
max-width: 260px;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
margin-bottom: 1.5rem;
}
.product-main-image img {
width: 100%;
height: auto;
display: block;
}
.product-main-info h2 {
font-family: 'Playfair Display', serif;
font-size: 2.2rem;
color: var(--dark-navy);
margin-bottom: 1rem;
}
.price-display {
margin-bottom: 1rem;
}
.price-display .current-price {
font-size: 2rem;
font-weight: 700;
color: var(--dark-navy);
}
.sku-display {
padding: 1rem;
background: var(--light-gray);
border-radius: 8px;
margin-bottom: 1rem;
}
.sku-display span {
color: var(--text-gray);
}
.sku-display strong {
color: var(--dark-navy);
font-family: 'Courier New', monospace;
}
.configuration-options {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.config-section {
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--border-gray);
}
.config-section-alt {
background: #f4f6fb;
margin: 0 -1rem;
padding: 0.75rem 1rem;
border-radius: 8px;
}
.config-section:last-child {
border-bottom: none;
padding-bottom: 0;
}
.config-section h3 {
font-size: 0.85rem;
color: var(--dark-navy);
margin-bottom: 0.5rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.option-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0.5rem;
}
/* Radio-style inline options */
.option-grid.radio-style {
gap: 1rem;
}
.option-grid.radio-style .config-option {
padding: 0;
border: none;
background: transparent;
flex-direction: row;
min-height: auto;
}
.option-grid.radio-style .config-option::before {
content: '';
width: 14px;
height: 14px;
border: 2px solid var(--border-gray);
border-radius: 50%;
flex-shrink: 0;
}
.option-grid.radio-style .config-option.selected::before {
border-color: var(--dark-navy);
background: var(--dark-navy);
box-shadow: inset 0 0 0 3px var(--white);
}
/* Compact config option */
.config-option {
background: var(--white);
border: 1px solid var(--border-gray);
border-radius: 6px;
padding: 0.4rem 0.6rem;
cursor: pointer;
transition: all 0.2s ease;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
min-height: auto;
}
.config-option img {
width: 40px;
height: 30px;
object-fit: cover;
border-radius: 3px;
}
.config-option span {
font-weight: 500;
color: var(--dark-navy);
font-size: 0.8rem;
}
.config-option:hover {
border-color: var(--dark-navy);
background: rgba(46, 41, 79, 0.05);
}
.config-option.selected {
border-color: var(--dark-navy);
background: rgba(46, 41, 79, 0.08);
}
.config-option.selected span {
font-weight: 600;
color: var(--dark-navy);
}
/* Icon-style options (for wall thickness, door opening) */
.option-grid.icon-style .config-option {
flex-direction: column;
padding: 0.5rem 0.75rem;
min-width: 60px;
}
.option-grid.icon-style .config-option img,
.option-grid.icon-style .config-option i {
width: 24px;
height: 24px;
font-size: 1.2rem;
margin-bottom: 0.25rem;
}
.option-grid.icon-style .config-option:has(input:checked) {
border-color: var(--dark-navy);
background: var(--dark-navy);
color: var(--white);
}
.option-grid.icon-style .config-option:has(input:checked) span {
color: var(--white);
}
/* Size selection - compact */
.size-selection {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.size-selection .size-option {
display: flex;
align-items: center;
gap: 0.5rem;
}
.size-selection label {
font-size: 0.8rem;
font-weight: 500;
color: var(--dark-navy);
white-space: nowrap;
}
.size-selection select {
padding: 0.4rem 0.6rem;
font-size: 0.8rem;
border: 1px solid var(--border-gray);
border-radius: 4px;
min-width: 100px;
}
/* Legacy size selection grid */
.size-selection-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.size-option {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.size-option label {
font-weight: 600;
color: var(--dark-navy);
}
.size-option select,
#hardware-addon {
padding: 0.75rem;
border: 2px solid var(--border-gray);
border-radius: 8px;
background: var(--white);
color: var(--dark-navy);
font-size: 1rem;
cursor: pointer;
transition: border-color 0.3s ease;
}
.size-option select:focus,
#hardware-addon:focus {
border-color: var(--primary-yellow);
outline: none;
}
/* Compact Add to Cart Section */
.add-to-cart-section {
display: flex;
align-items: center;
gap: 0.75rem;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--border-gray);
}
.quantity-controls {
display: flex;
align-items: center;
gap: 0.5rem;
}
.quantity-controls label {
font-size: 0.8rem;
font-weight: 500;
color: var(--dark-navy);
}
.qty-wrapper {
display: flex;
align-items: center;
gap: 0.5rem;
border: 2px solid var(--border-gray);
border-radius: 8px;
padding: 0.5rem;
}
.qty-wrapper .qty-btn {
background: var(--primary-yellow);
border: none;
width: 35px;
height: 35px;
border-radius: 50%;
cursor: pointer;
font-weight: 600;
color: var(--dark-navy);
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s ease;
}
.qty-wrapper .qty-btn:hover {
transform: scale(1.1);
}
.qty-wrapper input[type="number"] {
min-width: 60px;
width: 60px;
text-align: center;
font-weight: 600;
color: var(--dark-navy);
border: none;
background: transparent;
font-size: 1rem;
padding: 0.2rem;
border-radius: 4px;
outline: none;
}
.qty-wrapper input[type="number"]:focus {
background: var(--light-gray);
}
.add-to-cart-btn {
background: var(--primary-yellow);
color: var(--dark-navy);
border: none;
padding: 0.6rem 1.5rem;
border-radius: 6px;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.4rem;
transition: all 0.2s ease;
}
.add-to-cart-btn:hover {
background: #e5c63e;
transform: translateY(-1px);
}
/* Configurator responsive */
@media (max-width: 768px) {
.product-tabs {
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem;
}
.product-tab {
min-width: auto;
padding: 0.75rem;
}
.product-tab img {
width: 80px;
height: 80px;
aspect-ratio: 1 / 1;
}
.configurator-layout {
grid-template-columns: 1fr;
gap: 2rem;
}
.product-display {
position: relative;
top: auto;
}
.option-grid {
grid-template-columns: 1fr;
}
.quantity-controls {
justify-content: center;
}
}
/* Admin Dashboard Styles */
html.admin-html,
body.admin-body {
margin: 0 !important;
padding: 0 !important;
scroll-padding-top: 0 !important;
overflow-x: hidden;
position: relative;
}
.admin-body {
background: #f5f5f5 !important;
margin: 0 !important;
padding: 0 !important;
scroll-padding-top: 0 !important;
overflow-x: hidden;
top: 0 !important;
left: 0 !important;
}
.admin-header {
background: var(--dark-navy);
color: var(--white);
position: fixed;
top: 0 !important;
left: 0;
right: 0;
z-index: 10000; /* Increased z-index to ensure header is always on top */
height: 70px;
margin: 0 !important;
padding: 0;
}
.admin-header-content {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 2rem;
height: 100%;
}
.admin-logo {
display: flex;
align-items: center;
gap: 0.75rem;
}
.admin-logo-img {
height: 40px;
width: auto;
}
.admin-label {
color: var(--primary-yellow);
font-weight: 600;
font-size: 1rem;
text-transform: uppercase;
letter-spacing: 0.1em;
}
.admin-logo h1 {
font-family: 'Playfair Display', serif;
font-size: 1.5rem;
margin: 0;
}
.admin-logo span {
color: var(--primary-yellow);
}
.admin-user {
display: flex;
align-items: center;
gap: 1rem;
}
.back-to-site {
background: var(--primary-yellow);
color: var(--dark-navy);
text-decoration: none;
padding: 0.5rem 1rem;
border-radius: 6px;
font-weight: 600;
transition: transform 0.3s ease;
}
.back-to-site:hover {
transform: translateY(-2px);
}
.admin-sidebar {
position: fixed;
left: 0px;
padding-left: 5px;
top: 70px;
width: 250px;
height: calc(100vh - 70px);
background: var(--white);
border-right: 1px solid var(--border-gray);
overflow-y: auto; /* Shows scrollbar only when content overflows */
overscroll-behavior: contain; /* Prevent scroll chaining */
}
.admin-nav ul {
list-style: none;
padding: 0;
margin: 0;
}
.admin-nav li {
border-bottom: 1px solid var(--border-gray);
}
.nav-link {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.5rem;
color: var(--dark-navy);
text-decoration: none;
transition: all 0.3s ease;
}
.nav-link:hover {
background: var(--light-gray);
color: var(--primary-yellow);
}
.nav-link.active {
background: var(--primary-yellow);
color: var(--dark-navy);
font-weight: 600;
}
.nav-link i {
width: 20px;
text-align: center;
}
.admin-main {
margin-left: 250px;
margin-top: 70px;
padding: 1rem 2rem 2rem 2rem;
padding-top: 1.5rem;
position: relative; /* Ensure proper stacking context */
z-index: 1; /* Below header but above background */
}
.admin-section {
display: none;
}
.admin-section.active {
display: block;
}
.admin-section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
margin-top: 0; /* Ensure header starts at the top of the section */
}
.admin-section-header h2 {
font-family: 'Playfair Display', serif;
font-size: 2rem;
color: var(--dark-navy);
margin: 0;
}
.add-product-btn {
background: var(--primary-yellow);
color: var(--dark-navy);
border: none;
padding: 0.75rem 1.5rem;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.5rem;
transition: transform 0.3s ease;
}
.add-product-btn:hover {
transform: translateY(-2px);
}
.dashboard-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
.stat-card {
background: var(--white);
padding: 1.5rem 1.5rem 1.5rem 2rem;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
border-left: 4px solid var(--primary-yellow);
}
.stat-content h3 {
font-size: 2rem;
font-weight: 700;
color: var(--dark-navy);
margin: 0 0 0.5rem 0;
}
.stat-content p {
color: var(--text-gray);
margin: 0;
}
.products-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1.5rem;
}
.admin-product-card {
background: var(--white);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.admin-product-card:hover {
transform: translateY(-5px);
}
.admin-product-card img {
width: 100%;
height: 150px;
object-fit: cover;
}
.product-info {
padding: 1rem;
}
.product-info h4 {
color: var(--dark-navy);
margin: 0 0 0.5rem 0;
font-size: 1.2rem;
}
.product-price {
color: var(--primary-yellow);
font-weight: 700;
font-size: 1.1rem;
margin: 0.25rem 0;
}
.product-stock {
color: var(--text-gray);
font-size: 0.9rem;
margin: 0;
}
.product-actions {
display: flex;
justify-content: space-between;
padding: 1rem;
border-top: 1px solid var(--border-gray);
}
.edit-btn, .delete-btn {
border: none;
width: 40px;
height: 40px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s ease;
}
.edit-btn {
background: var(--primary-yellow);
color: var(--dark-navy);
}
.delete-btn {
background: #EF4444;
color: white;
}
.edit-btn:hover, .delete-btn:hover {
transform: scale(1.1);
}
/* Admin responsive */
@media (max-width: 768px) {
.admin-sidebar {
transform: translateX(-100%);
transition: transform 0.3s ease;
}
.admin-main {
margin-left: 0;
}
.admin-section-header {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.dashboard-stats {
grid-template-columns: 1fr;
}
.products-grid {
grid-template-columns: 1fr;
}
}
/* Configuration Breakdown Styles */
.configuration-breakdown {
background: var(--light-gray);
padding: 1rem;
border-radius: 8px;
margin-top: 1rem;
margin-bottom: 1rem;
border: 1px solid var(--border-gray);
}
.configuration-breakdown h3 {
color: var(--dark-navy);
margin-bottom: 0.8rem;
font-family: 'Playfair Display', serif;
font-size: 1.2rem;
}
.sku-section {
background: var(--white);
padding: 0.6rem;
border-radius: 6px;
margin-bottom: 0.6rem;
}
.sku-section h4 {
margin: 0;
color: var(--dark-navy);
font-family: 'Courier New', monospace;
font-size: 0.9rem;
}
.sku-section span {
color: var(--primary-yellow);
font-weight: 700;
}
.options-breakdown {
background: var(--white);
padding: 0.8rem;
border-radius: 6px;
margin-bottom: 0.6rem;
}
.breakdown-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.4rem 0;
border-bottom: 1px solid var(--border-gray);
font-size: 0.9rem;
}
.breakdown-item:last-child {
border-bottom: none;
}
.breakdown-label {
font-weight: 600;
color: var(--dark-navy);
}
.breakdown-value {
color: var(--text-gray);
text-align: right;
}
.breakdown-value.exact-size {
font-family: 'Courier New', monospace;
font-weight: 600;
color: var(--primary-yellow);
}
.price-breakdown {
background: var(--white);
padding: 0.8rem;
border-radius: 6px;
}
.price-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 0;
}
.price-item.total {
border-top: 2px solid var(--dark-navy);
padding-top: 1rem;
margin-top: 1rem;
font-weight: 700;
font-size: 1.2rem;
color: var(--dark-navy);
}
.price-item.addon {
color: var(--text-gray);
font-size: 0.9rem;
}
/* Compact Order Summary - Bottom Section */
.config-bottom {
display: grid;
grid-template-columns: auto 1fr;
gap: 1.5rem;
margin-top: 1rem;
background: var(--white);
border-radius: 12px;
padding: 1rem;
}
.cart-row {
display: flex;
align-items: center;
gap: 0.75rem;
}
.qty-input {
display: flex;
align-items: center;
gap: 0.5rem;
}
.qty-input label {
font-size: 0.8rem;
font-weight: 500;
}
.qty-input input {
width: 60px;
padding: 0.4rem;
font-size: 0.85rem;
border: 1px solid var(--border-gray);
border-radius: 4px;
text-align: center;
}
.add-cart-btn {
background: var(--primary-yellow);
color: var(--dark-navy);
border: none;
padding: 0.6rem 1.5rem;
border-radius: 6px;
font-weight: 600;
font-size: 0.85rem;
cursor: pointer;
transition: all 0.2s;
}
.add-cart-btn:hover {
background: #e5c63e;
transform: translateY(-1px);
}
/* Order Summary Table */
.order-summary {
display: grid;
grid-template-columns: 1fr auto;
gap: 1rem;
}
.summary-table {
width: 100%;
border-collapse: collapse;
font-size: 0.75rem;
}
.summary-table td {
padding: 0.35rem 0.5rem;
border-bottom: 1px solid var(--border-gray);
}
.summary-table td:first-child {
font-weight: 600;
color: var(--dark-navy);
width: 40%;
}
.summary-table td:last-child {
color: var(--text-gray);
}
/* Price Summary Box */
.price-summary {
background: var(--nav-indigo);
color: var(--white);
padding: 0.75rem 1rem;
border-radius: 8px;
min-width: 180px;
}
.price-row {
display: flex;
justify-content: space-between;
font-size: 0.8rem;
padding: 0.25rem 0;
}
.price-row.total {
border-top: 1px solid rgba(255, 255, 255, 0.3);
margin-top: 0.5rem;
padding-top: 0.5rem;
font-weight: 600;
background: var(--primary-yellow);
color: var(--dark-navy);
margin: 0.5rem -1rem -0.75rem;
padding: 0.5rem 1rem;
border-radius: 0 0 8px 8px;
}
@media (max-width: 900px) {
.config-bottom {
grid-template-columns: 1fr;
}
.order-summary {
grid-template-columns: 1fr;
}
}
/* Door Opening Modal Styles - REMOVED - See AGGRESSIVE MODAL FIX section */
/* Override any modals that use inline styles */
.modal[style],
#add-option-modal[style],
#edit-option-modal[style],
#add-category-modal[style],
#add-hardware-modal[style],
#edit-hardware-modal[style],
#door-opening-modal[style],
#commercial-door-opening-modal[style],
.popup-options-modal[style],
.customer-details-modal[style],
.custom-modal-overlay[style] {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
justify-content: center !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
}
.door-opening-modal-content {
background: var(--white);
border-radius: 12px;
max-width: 600px; /* Reduced from 800px */
width: 90%;
max-height: 80vh; /* Reduced from 90vh */
overflow-y: auto;
}
/* Phone Auth Modal Styles */
.phone-auth-tabs {
display: flex;
border-bottom: 2px solid var(--border-gray);
margin-bottom: 2rem;
}
.phone-auth-tab {
flex: 1;
padding: 1rem;
text-align: center;
background: none;
border: none;
border-bottom: 3px solid transparent;
cursor: pointer;
font-weight: 500;
color: var(--text-gray);
transition: all 0.3s ease;
}
.phone-auth-tab.active {
color: var(--primary-yellow);
border-bottom-color: var(--primary-yellow);
}
.phone-auth-tab:hover {
background: var(--light-gray);
}
.phone-input-group {
display: flex;
gap: 0.5rem;
}
.phone-country-code {
width: 80px;
padding: 0.75rem;
border: 1px solid var(--border-gray);
border-radius: 8px;
font-size: 1rem;
}
.otp-input-group {
display: flex;
gap: 0.5rem;
justify-content: center;
margin: 1.5rem 0;
}
.otp-digit {
width: 50px;
height: 60px;
text-align: center;
font-size: 1.5rem;
font-weight: bold;
border: 2px solid var(--border-gray);
border-radius: 8px;
transition: all 0.3s ease;
}
.otp-digit:focus {
border-color: var(--primary-yellow);
outline: none;
}
/* Conditional Rules Admin Styles */
.rules-list {
background: var(--white);
border-radius: 12px;
padding: 1.5rem;
margin-bottom: 2rem;
}
.rule-item {
border: 1px solid var(--border-gray);
border-radius: 8px;
padding: 1rem;
margin-bottom: 1rem;
background: var(--white);
}
.rule-item.inactive {
opacity: 0.6;
background: var(--light-gray);
}
.rule-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
}
.rule-condition {
font-family: 'Courier New', monospace;
background: var(--light-gray);
padding: 0.75rem;
border-radius: 6px;
margin: 0.5rem 0;
font-size: 0.9rem;
}
.rule-actions {
display: flex;
gap: 0.5rem;
}
.rule-toggle {
padding: 0.5rem 1rem;
border-radius: 6px;
border: 1px solid var(--border-gray);
background: var(--white);
cursor: pointer;
}
.rule-toggle.active {
background: var(--primary-yellow);
border-color: var(--primary-yellow);
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem;
border-bottom: 1px solid var(--border-gray);
}
.modal-header h3 {
margin: 0;
color: var(--dark-navy);
font-family: 'Playfair Display', serif;
}
.close {
color: var(--text-gray);
font-size: 1.5rem;
font-weight: bold;
cursor: pointer;
transition: color 0.3s ease;
}
.close:hover {
color: var(--dark-navy);
}
.modal-body {
padding: 1.5rem;
}
.door-opening-options {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
margin-bottom: 2rem;
}
.door-option {
background: var(--light-gray);
border-radius: 12px;
padding: 1.5rem;
cursor: pointer;
transition: all 0.3s ease;
text-align: center;
border: 3px solid transparent;
}
.door-option:hover {
border-color: var(--primary-yellow);
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(247, 213, 66, 0.3);
}
.door-option.selected {
border-color: var(--primary-yellow);
background: var(--primary-yellow);
}
.door-diagram {
position: relative;
margin-bottom: 1rem;
}
.door-diagram img {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 8px;
}
.door-labels {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: space-around;
pointer-events: none;
}
.label {
background: rgba(45, 49, 66, 0.9);
color: var(--white);
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-size: 0.8rem;
font-weight: 600;
}
.door-option h4 {
margin: 0;
color: var(--dark-navy);
font-weight: 600;
}
.modal-note {
background: var(--light-gray);
padding: 1rem 1rem 1rem 1.5rem;
border-radius: 8px;
border-left: 4px solid var(--primary-yellow);
}
.modal-note p {
margin: 0;
color: var(--text-gray);
line-height: 1.6;
}
.config-option small {
display: block;
font-size: 0.75rem;
color: var(--text-gray);
margin-top: 0.25rem;
font-style: italic;
}
/* Mobile responsive for new elements */
@media (max-width: 768px) {
.door-opening-options {
grid-template-columns: 1fr;
gap: 1rem;
}
.breakdown-item {
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
}
.breakdown-value {
text-align: left;
}
.door-opening-modal-content {
width: 95%;
margin: 1rem;
}
}
/* Admin Configuration Management Styles */
.config-management {
max-width: 1200px;
margin: 0 auto;
}
.config-categories {
display: grid;
gap: 2rem;
}
.config-category {
background: var(--white);
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 2px 10px rgba(45, 49, 66, 0.1);
}
.config-category h3 {
color: var(--dark-navy);
margin-bottom: 1rem;
font-family: 'Playfair Display', serif;
border-bottom: 2px solid var(--primary-yellow);
padding-bottom: 0.5rem;
}
.config-options {
display: grid;
gap: 1rem;
}
.config-option-item {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 1rem;
align-items: center;
padding: 1rem;
background: var(--light-gray);
border-radius: 8px;
}
.config-option-item label {
font-weight: 600;
color: var(--dark-navy);
}
.config-option-item input {
padding: 0.75rem 1rem;
border: 1px solid var(--border-gray);
border-radius: 4px;
font-size: 0.9rem;
width: 120px;
}
.save-option-btn {
background: var(--primary-yellow);
color: var(--dark-navy);
border: none;
padding: 0.5rem 1rem;
border-radius: 4px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.save-option-btn:hover {
background: var(--dark-navy);
color: var(--white);
}
/* Admin Image Management Styles */
.image-management {
max-width: 1200px;
margin: 0 auto;
}
.product-image-categories {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.image-category {
background: var(--white);
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 2px 10px rgba(45, 49, 66, 0.1);
}
.image-category h3 {
color: var(--dark-navy);
margin-bottom: 1rem;
font-family: 'Playfair Display', serif;
text-align: center;
}
.image-upload-area {
text-align: center;
}
.current-image {
position: relative;
margin-bottom: 1rem;
border-radius: 8px;
overflow: hidden;
}
.current-image img {
width: 100%;
height: 200px;
object-fit: cover;
display: block;
}
.image-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(45, 49, 66, 0.8);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.current-image:hover .image-overlay {
opacity: 1;
}
.change-image-btn {
background: var(--primary-yellow);
color: var(--dark-navy);
border: none;
padding: 0.75rem 1.5rem;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.change-image-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(247, 213, 66, 0.4);
}
.upload-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--dark-navy);
color: var(--white);
padding: 0.75rem 1.5rem;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
}
.upload-btn:hover {
background: var(--primary-yellow);
color: var(--dark-navy);
transform: translateY(-2px);
}
/* Admin Section Navigation */
.admin-section {
display: none;
}
.admin-section.active {
display: block;
}
.admin-nav .nav-link {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 1.5rem;
color: var(--dark-navy);
text-decoration: none;
transition: all 0.3s ease;
border-radius: 8px;
margin-bottom: 0.5rem;
}
.admin-nav .nav-link:hover,
.admin-nav .nav-link.active {
background: var(--primary-yellow);
color: var(--dark-navy);
}
.nav-section-title {
color: var(--dark-navy);
font-weight: 700;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 1px;
margin: 1.5rem 1.5rem 0.5rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 0.5rem;
border-bottom: 2px solid var(--primary-yellow);
}
/* Product Admin Tabs */
.product-tabs {
display: flex;
gap: 1rem;
margin-bottom: 2rem;
border-bottom: 1px solid var(--border-gray);
}
.product-admin-tab {
background: none;
border: none;
padding: 1rem 1.5rem;
color: var(--text-gray);
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
border-bottom: 3px solid transparent;
}
.product-admin-tab:hover {
color: var(--dark-navy);
}
.product-admin-tab.active {
color: var(--dark-navy);
border-bottom-color: var(--primary-yellow);
}
/* Product Admin Content */
.product-admin-content {
max-width: 1200px;
margin: 0 auto;
}
.product-overview {
display: grid;
grid-template-columns: 300px 1fr;
gap: 2rem;
margin-bottom: 3rem;
}
.product-image-section {
background: var(--white);
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 2px 10px rgba(45, 49, 66, 0.1);
}
.product-image-section h4 {
color: var(--dark-navy);
margin-bottom: 1rem;
font-family: 'Playfair Display', serif;
}
.product-image-preview {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 8px;
margin-bottom: 1rem;
}
.product-details {
background: var(--white);
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 2px 10px rgba(45, 49, 66, 0.1);
}
.product-details h4 {
color: var(--dark-navy);
margin-bottom: 1rem;
font-family: 'Playfair Display', serif;
}
.detail-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 1rem 0.75rem 1.5rem;
border-bottom: 1px solid var(--border-gray);
}
.detail-item:last-child {
border-bottom: none;
}
.detail-label {
font-weight: 600;
color: var(--dark-navy);
}
.detail-value {
color: var(--text-gray);
}
.edit-detail-btn {
background: var(--primary-yellow);
color: var(--dark-navy);
border: none;
padding: 0.25rem 0.75rem;
border-radius: 4px;
font-size: 0.8rem;
cursor: pointer;
transition: all 0.3s ease;
margin-right: 0.75rem;
}
.edit-detail-btn:hover {
background: var(--dark-navy);
color: var(--white);
}
/* Configuration Categories in Admin */
.admin-config-categories {
display: grid;
gap: 2rem;
}
.admin-config-category {
background: var(--white);
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 2px 10px rgba(45, 49, 66, 0.1);
}
.admin-config-category h4 {
display: flex;
justify-content: space-between;
align-items: center;
color: var(--dark-navy);
margin-bottom: 1rem;
font-family: 'Playfair Display', serif;
border-bottom: 2px solid var(--primary-yellow);
padding-bottom: 0.5rem;
padding-left: 0.5rem;
}
.add-option-btn {
background: var(--dark-navy);
color: var(--white);
border: none;
padding: 0.5rem 1rem;
border-radius: 4px;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.3s ease;
}
.add-option-btn:hover {
background: var(--primary-yellow);
color: var(--dark-navy);
}
.admin-option-list {
display: grid;
gap: 1rem;
}
.admin-option-item {
display: grid;
grid-template-columns: 1fr auto auto auto auto auto;
gap: 1rem;
align-items: center;
padding: 1rem;
background: var(--light-gray);
border-radius: 8px;
}
.option-info {
display: flex;
flex-direction: column;
}
.option-name {
font-weight: 600;
color: var(--dark-navy);
}
.option-type {
font-size: 0.8rem;
color: var(--text-gray);
}
.option-price {
font-weight: 600;
color: var(--dark-navy);
font-family: 'Courier New', monospace;
}
.option-sku {
font-family: 'Courier New', monospace;
color: var(--text-gray);
font-size: 0.9rem;
}
.edit-option-btn {
background: var(--primary-yellow);
color: var(--dark-navy);
border: none;
padding: 0.5rem 0.75rem;
border-radius: 4px;
font-size: 0.8rem;
cursor: pointer;
transition: all 0.3s ease;
}
.edit-option-btn:hover {
background: var(--dark-navy);
color: var(--white);
}
.delete-option-btn {
background: #dc3545;
color: var(--white);
border: none;
padding: 0.5rem 0.75rem;
border-radius: 4px;
font-size: 0.8rem;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: 4px;
}
.delete-option-btn:hover {
background: #c82333;
}
/* Move buttons styling */
.move-option-up, .move-option-down,
.move-category-up, .move-category-down {
padding: 4px 8px;
border: 1px solid #d1d5db;
border-radius: 4px;
background: #f3f4f6;
color: #374151;
cursor: pointer;
font-size: 12px;
transition: all 0.2s;
line-height: 1;
}
.move-option-up:hover, .move-option-down:hover,
.move-category-up:hover, .move-category-down:hover {
background: #e5e7eb;
border-color: #9ca3af;
}
.option-order-controls {
display: inline-flex;
gap: 4px;
margin-left: 8px;
}
/* Option Modal Styles */
.option-modal-content {
background: var(--white);
border-radius: 12px;
max-width: 600px;
width: 90%;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
color: var(--dark-navy);
}
.form-group input,
.form-group select {
width: 100%;
padding: 1rem 1.25rem;
border: 1px solid var(--border-gray);
border-radius: 6px;
font-size: 1rem;
}
.form-group input:focus,
.form-group select:focus {
outline: none;
border-color: var(--primary-yellow);
box-shadow: 0 0 0 3px rgba(247, 213, 66, 0.1);
}
.form-actions {
display: flex;
gap: 1rem;
justify-content: flex-end;
margin-top: 2rem;
}
.cancel-btn {
background: var(--border-gray);
color: var(--text-gray);
border: none;
padding: 0.75rem 1.5rem;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.cancel-btn:hover {
background: var(--text-gray);
color: var(--white);
}
.save-btn {
background: var(--primary-yellow);
color: var(--dark-navy);
border: none;
padding: 0.75rem 1.5rem;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.save-btn:hover {
background: var(--dark-navy);
color: var(--white);
}
/* Admin Sidebar Color Fix */
.admin-sidebar {
background: var(--light-gray);
color: var(--dark-navy);
}
.admin-sidebar .admin-nav ul {
list-style: none;
padding: 1rem 0;
margin: 0;
}
.admin-sidebar .admin-nav li {
margin: 0;
}
/* Mobile responsive for admin sections */
@media (max-width: 768px) {
.config-option-item {
grid-template-columns: 1fr;
gap: 0.5rem;
text-align: center;
}
.config-option-item input {
width: 100%;
max-width: 200px;
margin: 0 auto;
}
.product-image-categories {
grid-template-columns: 1fr;
}
.product-overview {
grid-template-columns: 1fr;
gap: 1rem;
}
.admin-option-item {
grid-template-columns: 1fr;
gap: 0.5rem;
text-align: center;
}
.product-tabs {
flex-wrap: wrap;
gap: 0.5rem;
}
.product-admin-tab {
padding: 0.75rem 1rem;
font-size: 0.9rem;
}
}
/* Hardware Category Styles */
.hardware-categories {
padding: 4rem 0;
background: var(--light-gray);
}
.category-tabs {
display: flex;
justify-content: center;
gap: 2rem;
margin-bottom: 3rem;
flex-wrap: wrap;
}
.category-tab {
background: var(--white);
border: none;
border-radius: 12px;
padding: 1.5rem;
min-width: 200px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 10px rgba(45, 49, 66, 0.1);
text-align: center;
}
.category-tab:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(247, 213, 66, 0.3);
border: 2px solid var(--primary-yellow);
}
.category-tab.active {
background: var(--primary-yellow);
color: var(--dark-navy);
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(247, 213, 66, 0.4);
}
.category-tab i {
font-size: 1.5rem;
margin-bottom: 0.5rem;
display: block;
}
.category-tab span {
font-weight: 600;
font-size: 1rem;
}
.hardware-products-display {
margin-top: 3rem;
}
.hardware-products-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.hardware-product-card {
background: var(--white);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(45, 49, 66, 0.1);
transition: all 0.3s ease;
}
.hardware-product-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(45, 49, 66, 0.15);
}
.hardware-product-image {
width: 100%;
height: 200px;
object-fit: cover;
}
.hardware-product-info {
padding: 1.5rem;
}
.hardware-product-name {
font-size: 1.1rem;
font-weight: 600;
color: var(--dark-navy);
margin-bottom: 0.5rem;
}
.hardware-product-description {
color: var(--text-gray);
font-size: 0.9rem;
margin-bottom: 1rem;
line-height: 1.4;
}
.hardware-product-price {
font-size: 1.25rem;
font-weight: 700;
color: var(--primary-yellow);
margin-bottom: 1rem;
}
.hardware-product-sku {
font-size: 0.8rem;
color: var(--text-gray);
font-family: 'Courier New', monospace;
margin-bottom: 1rem;
}
.hardware-add-to-cart {
width: 100%;
background: var(--dark-navy);
color: var(--white);
border: none;
padding: 0.75rem;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.hardware-add-to-cart:hover {
background: var(--primary-yellow);
color: var(--dark-navy);
}
/* Hardware Admin Styles */
.hardware-category-tabs {
display: flex;
gap: 1rem;
margin-bottom: 2rem;
border-bottom: 1px solid var(--border-gray);
}
.hardware-tab {
background: none;
border: none;
padding: 1rem 1.5rem;
color: var(--text-gray);
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
border-bottom: 3px solid transparent;
}
.hardware-tab:hover {
color: var(--dark-navy);
}
.hardware-tab.active {
color: var(--dark-navy);
border-bottom-color: var(--primary-yellow);
}
.hardware-admin-content {
max-width: 1200px;
margin: 0 auto;
}
.hardware-products-admin-grid {
display: grid;
gap: 1rem;
}
.hardware-admin-item {
display: grid;
grid-template-columns: 80px 1fr auto auto auto auto;
gap: 1rem;
align-items: center;
padding: 1rem;
background: var(--white);
border-radius: 8px;
box-shadow: 0 2px 10px rgba(45, 49, 66, 0.1);
}
.hardware-admin-image {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 6px;
}
.hardware-admin-info {
display: flex;
flex-direction: column;
}
.hardware-admin-name {
font-weight: 600;
color: var(--dark-navy);
margin-bottom: 0.25rem;
}
.hardware-admin-description {
font-size: 0.9rem;
color: var(--text-gray);
margin-bottom: 0.25rem;
}
.hardware-admin-category {
font-size: 0.8rem;
color: var(--primary-yellow);
font-weight: 600;
}
.hardware-admin-price {
font-weight: 700;
color: var(--dark-navy);
font-size: 1.1rem;
}
.hardware-admin-price-details {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 0.2rem;
}
.hardware-admin-supplier {
font-size: 0.75rem;
color: var(--text-gray);
}
.hardware-admin-sku {
font-family: 'Courier New', monospace;
color: var(--text-gray);
font-size: 0.9rem;
}
.add-product-btn {
background: var(--dark-navy);
color: var(--white);
border: none;
padding: 0.75rem 1.5rem;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.add-product-btn:hover {
background: var(--primary-yellow);
color: var(--dark-navy);
}
.form-group textarea {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--border-gray);
border-radius: 6px;
font-size: 1rem;
font-family: inherit;
resize: vertical;
}
.form-group textarea:focus {
outline: none;
border-color: var(--primary-yellow);
box-shadow: 0 0 0 3px rgba(247, 213, 66, 0.1);
}
/* Mobile responsive for hardware */
@media (max-width: 768px) {
.category-tabs {
gap: 1rem;
}
.category-tab {
min-width: 150px;
padding: 1rem;
}
.hardware-products-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.hardware-admin-item {
grid-template-columns: 1fr;
gap: 0.5rem;
text-align: center;
}
.hardware-category-tabs {
flex-wrap: wrap;
gap: 0.5rem;
}
.hardware-tab {
padding: 0.75rem 1rem;
font-size: 0.9rem;
}
}
/* Contact Page Styles */
.contact-hero {
background: linear-gradient(135deg, var(--dark-navy) 0%, var(--light-navy) 100%);
min-height: 50vh;
display: flex;
align-items: center;
position: relative;
padding-top: 60px;
background-image: url('https://images.unsplash.com/photo-1497366216548-37526070297c?w=1920&h=1080&fit=crop&overlay=true');
background-size: cover;
background-position: center;
}
.contact-hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(45, 49, 66, 0.9) 0%, rgba(58, 68, 88, 0.8) 100%);
}
.contact-hero .hero-background {
width: 100%;
height: 100%;
position: relative;
z-index: 2;
}
.contact-hero .hero-content {
text-align: center;
color: var(--white);
max-width: 800px;
margin: 0 auto;
padding: 4rem 0;
}
.contact-hero .hero-content h1 {
font-family: 'Playfair Display', serif;
font-size: 4rem;
font-weight: 700;
margin-bottom: 1.5rem;
line-height: 1.2;
}
.contact-section {
padding: 2rem 0;
background: var(--white);
}
.contact-layout {
display: grid;
grid-template-columns: 3fr 2fr;
gap: 1.5rem;
margin-bottom: 1.5rem;
}
.contact-form-container {
background: var(--white);
padding: 1.5rem;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(45, 49, 66, 0.1);
}
.contact-form {
display: flex;
flex-direction: column;
gap: 1rem;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
.form-group {
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.form-group label {
font-weight: 600;
color: var(--dark-navy);
font-size: 0.9rem;
}
.form-group input,
.form-group select,
.form-group textarea {
padding: 0.6rem 1rem;
border: 2px solid var(--border-gray);
border-radius: 6px;
font-size: 0.95rem;
transition: all 0.3s ease;
font-family: 'Inter', sans-serif;
}
.form-group select {
appearance: none;
-webkit-appearance: none;
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%232d3142' d='M1 1l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 1rem center;
padding-right: 2.4rem;
cursor: pointer;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--primary-yellow);
box-shadow: 0 0 0 3px rgba(247, 213, 66, 0.1);
}
.form-group textarea {
resize: vertical;
min-height: 80px;
}
.send-message-btn {
background: var(--dark-navy);
color: var(--white);
padding: 0.85rem 2.5rem;
border: none;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
letter-spacing: 1px;
cursor: pointer;
transition: all 0.3s ease;
align-self: center;
min-width: 180px;
}
.send-message-btn:hover {
background: var(--primary-yellow);
color: var(--dark-navy);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(45, 49, 66, 0.2);
}
.contact-info-cards {
display: flex;
flex-direction: column;
gap: 1rem;
}
.contact-card {
background: var(--light-gray);
padding: 1.25rem 1.5rem;
border-radius: 12px;
text-align: center;
transition: all 0.3s ease;
flex: 1;
}
.contact-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(45, 49, 66, 0.1);
}
.contact-icon {
background: var(--dark-navy);
width: 56px;
height: 56px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 0.75rem;
}
.contact-icon i {
font-size: 1.4rem;
color: var(--primary-yellow);
}
.contact-details h4 {
font-size: 0.95rem;
font-weight: 600;
color: var(--dark-navy);
margin-bottom: 0.25rem;
letter-spacing: 1px;
}
.contact-details p {
font-size: 1.1rem;
font-weight: 700;
color: var(--dark-navy);
letter-spacing: 0.5px;
}
.map-section {
margin-top: 1.5rem;
}
.map-container {
border-radius: 12px;
overflow: hidden;
box-shadow: 0 10px 40px rgba(45, 49, 66, 0.1);
}
.map-container iframe {
width: 100%;
height: 300px;
border: none;
}
/* Contact Form Success Message */
.form-success-message {
background: #10B981;
color: white;
padding: 1rem 1.5rem;
border-radius: 8px;
margin-bottom: 1rem;
text-align: center;
font-weight: 600;
}
.form-error-message {
background: #EF4444;
color: white;
padding: 1rem 1.5rem;
border-radius: 8px;
margin-bottom: 1rem;
text-align: center;
font-weight: 600;
}
/* Contact Page Mobile Responsive */
@media (max-width: 768px) {
.contact-layout {
grid-template-columns: 1fr;
}
.contact-form-container {
padding: 2rem;
}
.form-row {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.contact-info-cards {
flex-direction: row;
}
.contact-card {
padding: 2rem 1.5rem;
}
.send-message-btn {
width: 100%;
}
}
@media (max-width: 480px) {
.contact-info-cards {
flex-direction: column;
}
}
/* Contact Settings Admin Styles */
.contact-settings-content {
max-width: 1200px;
margin: 0 auto;
}
.contact-settings-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}
.contact-info-section,
.contact-form-section,
.contact-map-section {
background: var(--white);
padding: 2rem;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(45, 49, 66, 0.1);
}
.contact-info-section h3,
.contact-form-section h3,
.contact-map-section h3 {
color: var(--dark-navy);
margin-bottom: 0.5rem;
font-family: 'Playfair Display', serif;
border-bottom: 2px solid var(--primary-yellow);
padding-bottom: 0.5rem;
}
.contact-info-section p,
.contact-form-section p,
.contact-map-section p {
color: var(--text-gray);
margin-bottom: 1.5rem;
font-size: 0.9rem;
}
.contact-settings-grid .form-group {
margin-bottom: 1.5rem;
}
.contact-settings-grid .form-group small {
color: var(--text-gray);
font-size: 0.8rem;
margin-top: 0.25rem;
display: block;
}
/* ── Notification recipients ─────────────────────────────────────────── */
.notify-status {
font-size: 0.82rem;
color: var(--text-gray);
background: #f7f8fb;
border: 1px solid #e6e8ef;
border-radius: 8px;
padding: 0.75rem 1rem;
margin-bottom: 1rem;
line-height: 1.5;
}
.notify-status strong { color: var(--dark-navy); }
.notify-status.is-warning {
background: #fff8e6;
border-color: #f0dca4;
color: #6b5312;
}
.notify-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 1rem;
}
.notify-empty {
font-size: 0.85rem;
color: var(--text-gray);
padding: 1.25rem;
text-align: center;
border: 1px dashed #d7dae3;
border-radius: 10px;
}
.notify-row {
display: grid;
grid-template-columns: 1fr 1fr auto auto;
gap: 0.75rem;
align-items: center;
padding: 0.85rem;
border: 1px solid #e6e8ef;
border-radius: 10px;
background: var(--white);
transition: border-color 160ms ease-out, box-shadow 160ms ease-out;
}
.notify-row:focus-within {
border-color: var(--dark-navy);
box-shadow: 0 0 0 3px rgba(242, 198, 37, 0.35);
}
.notify-row.is-inactive { opacity: 0.55; }
.notify-row input[type="text"],
.notify-row input[type="email"] {
width: 100%;
padding: 0.5rem 0.7rem;
border: 1px solid #d7dae3;
border-radius: 7px;
font-size: 0.88rem;
font-family: inherit;
}
.notify-row input:focus {
outline: none;
border-color: var(--dark-navy);
}
.notify-row input.is-invalid { border-color: #c0392b; }
.notify-events {
display: flex;
gap: 0.85rem;
white-space: nowrap;
}
.notify-events label {
display: inline-flex;
align-items: center;
gap: 0.3rem;
font-size: 0.8rem;
color: var(--text-gray);
cursor: pointer;
}
.notify-remove {
background: none;
border: none;
color: #c0392b;
cursor: pointer;
font-size: 1rem;
padding: 0.4rem 0.6rem;
border-radius: 7px;
transition: background-color 160ms ease-out;
}
.notify-remove:hover { background: #fdecea; }
.notify-actions {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
.notify-feedback {
margin-top: 0.85rem;
font-size: 0.85rem;
min-height: 1.2em;
}
.notify-feedback.is-ok { color: #157347; }
.notify-feedback.is-error { color: #c0392b; }
@media (max-width: 780px) {
.notify-row {
grid-template-columns: 1fr auto;
row-gap: 0.6rem;
}
.notify-events { grid-column: 1 / -1; }
}
.contact-form-test {
background: var(--light-gray);
padding: 2rem;
border-radius: 12px;
margin-top: 2rem;
}
.contact-form-test h3 {
color: var(--dark-navy);
margin-bottom: 0.5rem;
font-family: 'Playfair Display', serif;
}
.contact-form-test p {
color: var(--text-gray);
margin-bottom: 1.5rem;
}
.test-form-container {
background: var(--white);
padding: 2rem;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(45, 49, 66, 0.05);
}
.test-form-btn {
background: var(--primary-yellow);
color: var(--dark-navy);
border: none;
padding: 0.75rem 1.5rem;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.test-form-btn:hover {
background: var(--dark-navy);
color: var(--white);
}
/* Contact Settings Mobile Responsive */
@media (max-width: 768px) {
.contact-settings-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.contact-info-section,
.contact-form-section,
.contact-map-section {
padding: 1.5rem;
}
.contact-form-test {
padding: 1.5rem;
}
.test-form-container {
padding: 1.5rem;
}
}
/* Authentication System Styles */
.auth-buttons {
display: flex;
align-items: center;
gap: 1rem;
}
.auth-logged-out {
display: flex;
gap: 0.5rem;
}
.login-btn, .register-btn {
padding: 0.5rem 1rem;
border-radius: 6px;
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.login-btn {
color: var(--dark-navy);
background: transparent;
}
.login-btn:hover, .login-btn.active {
background: var(--primary-yellow);
color: var(--dark-navy);
}
.register-btn {
background: var(--dark-navy);
color: var(--white);
}
.register-btn:hover, .register-btn.active {
background: var(--primary-yellow);
color: var(--dark-navy);
}
/* User Menu Styles */
.user-menu {
position: relative;
}
.user-menu-btn {
background: var(--light-gray);
border: none;
padding: 0.5rem 1rem;
border-radius: 8px;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.5rem;
transition: all 0.3s ease;
}
.user-menu-btn:hover {
background: var(--primary-yellow);
color: var(--dark-navy);
}
.user-name {
font-weight: 600;
font-size: 0.9rem;
/* Company names are free text and can be long. Cap and ellipsise so the
account chip can never push the header wide enough to collide. */
max-width: 18ch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Hidden when the tier carries no information (every account is Basic by
default, so the badge was pure noise on the majority of sessions). */
.user-type:empty {
display: none;
}
.user-type {
font-size: 0.8rem;
color: var(--text-gray);
background: var(--white);
padding: 0.2rem 0.5rem;
border-radius: 4px;
margin-left: 0.5rem;
}
.user-type.admin {
background: linear-gradient(135deg, #EF4444, #F87171);
color: white;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
border: 1px solid #DC2626;
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}
.user-menu-btn:hover .user-type.admin {
background: linear-gradient(135deg, #DC2626, #EF4444);
color: white !important;
border: 1px solid #B91C1C;
box-shadow: 0 3px 12px rgba(220, 38, 38, 0.5);
}
.user-dropdown {
position: absolute;
top: 100%;
right: 0;
background: var(--white);
border-radius: 8px;
box-shadow: 0 8px 25px rgba(45, 49, 66, 0.15);
min-width: 200px;
padding: 0.5rem 0;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
z-index: 1000;
}
.user-menu:hover .user-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.user-dropdown a {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
color: var(--dark-navy);
text-decoration: none;
transition: background-color 0.3s ease;
}
.user-dropdown a:hover, .user-dropdown a.active {
background: var(--light-gray);
}
.user-dropdown a i {
width: 16px;
text-align: center;
}
/* Auth Pages Styles */
.auth-section {
padding: 8rem 0 4rem;
background: var(--light-gray);
min-height: 100vh;
}
.auth-container {
max-width: 600px;
margin: 0 auto;
}
.auth-header {
text-align: center;
margin-bottom: 3rem;
}
.auth-header h1 {
font-family: 'Playfair Display', serif;
font-size: 2.5rem;
color: var(--dark-navy);
margin-bottom: 1rem;
}
.auth-header p {
color: var(--text-gray);
font-size: 1.1rem;
}
.auth-form-container {
background: var(--white);
padding: 3rem;
border-radius: 16px;
box-shadow: 0 10px 40px rgba(45, 49, 66, 0.1);
}
.auth-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.auth-form .form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.form-options {
display: flex;
justify-content: space-between;
align-items: center;
margin: -0.5rem 0;
}
.remember-me {
display: flex;
align-items: center;
gap: 0.5rem;
}
.remember-me input[type="checkbox"] {
width: auto;
}
.forgot-password {
color: var(--primary-yellow);
text-decoration: none;
font-size: 0.9rem;
}
.forgot-password:hover {
text-decoration: underline;
}
.auth-submit-btn {
background: var(--dark-navy);
color: var(--white);
padding: 1rem 2rem;
border: none;
border-radius: 8px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.auth-submit-btn:hover {
background: var(--primary-yellow);
color: var(--dark-navy);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(45, 49, 66, 0.2);
}
.auth-divider {
text-align: center;
margin: 2rem 0;
position: relative;
}
.auth-divider::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: var(--border-gray);
}
.auth-divider span {
background: var(--white);
padding: 0 1rem;
color: var(--text-gray);
position: relative;
}
.auth-alternative {
text-align: center;
}
.auth-alternative a {
color: var(--primary-yellow);
text-decoration: none;
font-weight: 600;
}
.auth-alternative a:hover {
text-decoration: underline;
}
.auth-benefits {
margin-top: 2rem;
padding: 2rem;
background: var(--light-gray);
border-radius: 12px;
}
.auth-benefits h3 {
color: var(--dark-navy);
margin-bottom: 1rem;
font-family: 'Playfair Display', serif;
}
.auth-benefits ul {
list-style: none;
padding: 0;
}
.auth-benefits li {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.5rem;
color: var(--text-gray);
}
.auth-benefits li i {
color: var(--primary-yellow);
width: 16px;
}
/* Account Type Info Styles */
.account-type-info {
margin: 2rem 0;
padding: 2rem;
background: var(--light-gray);
border-radius: 12px;
}
.account-type-info h3 {
color: var(--dark-navy);
margin-bottom: 1.5rem;
font-family: 'Playfair Display', serif;
}
.account-types {
display: flex;
flex-direction: column;
gap: 1rem;
margin-bottom: 1.5rem;
}
.account-type {
background: var(--white);
padding: 1.5rem;
border-radius: 8px;
border: 2px solid transparent;
}
.account-type-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
}
.account-type h4 {
color: var(--dark-navy);
margin: 0;
display: flex;
align-items: center;
gap: 0.5rem;
}
.account-badge {
padding: 0.25rem 0.75rem;
border-radius: 12px;
font-size: 0.8rem;
font-weight: 600;
}
.account-badge.default {
background: var(--primary-yellow);
color: var(--dark-navy);
}
.account-badge.contractor {
background: #10B981;
color: white;
}
.account-badge.builder {
background: #3B82F6;
color: white;
}
.account-badge.admin {
background: linear-gradient(135deg, #EF4444, #F87171);
color: white;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
border: 2px solid #DC2626;
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}
.account-note {
display: flex;
align-items: flex-start;
gap: 0.5rem;
font-size: 0.9rem;
color: var(--text-gray);
margin-top: 1rem;
padding: 1rem;
background: var(--white);
border-radius: 8px;
}
.account-note i {
color: var(--primary-yellow);
margin-top: 0.2rem;
}
.checkbox-group {
display: flex;
align-items: flex-start;
gap: 0.5rem;
}
.checkbox-group input[type="checkbox"] {
margin-top: 0.2rem;
}
.checkbox-group label {
flex: 1;
cursor: pointer;
}
.checkbox-group a {
color: var(--primary-yellow);
text-decoration: none;
}
.checkbox-group a:hover {
text-decoration: underline;
}
/* Account Page Styles */
.account-section {
padding: 8rem 0 4rem;
background: var(--light-gray);
min-height: 100vh;
}
.account-layout {
display: grid;
grid-template-columns: 300px 1fr;
gap: 3rem;
max-width: 1200px;
margin: 0 auto;
}
.account-sidebar {
background: var(--white);
border-radius: 16px;
padding: 2rem;
height: fit-content;
box-shadow: 0 2px 10px rgba(45, 49, 66, 0.1);
}
.account-user-info {
text-align: center;
margin-bottom: 2rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--border-gray);
}
.account-avatar {
width: 80px;
height: 80px;
background: var(--primary-yellow);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
font-size: 2rem;
color: var(--dark-navy);
}
.account-details h3 {
color: var(--dark-navy);
margin-bottom: 0.5rem;
}
.account-details p {
color: var(--text-gray);
margin-bottom: 1rem;
}
.account-type-badge .badge {
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
}
.badge.basic {
background: var(--light-gray);
color: var(--dark-navy);
}
.badge.contractor {
background: #10B981;
color: white;
}
.badge.builder {
background: #3B82F6;
color: white;
}
.badge.admin {
background: linear-gradient(135deg, #EF4444, #F87171);
color: white;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
border: 2px solid #DC2626;
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.3);
}
.account-nav ul {
list-style: none;
padding: 0;
margin: 0;
}
.account-nav-link {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem;
color: var(--text-gray);
text-decoration: none;
border-radius: 8px;
transition: all 0.3s ease;
margin-bottom: 0.5rem;
}
.account-nav-link:hover, .account-nav-link.active {
background: var(--primary-yellow);
color: var(--dark-navy);
}
.account-nav-link i {
width: 16px;
text-align: center;
}
.account-content {
background: var(--white);
border-radius: 16px;
padding: 3rem;
box-shadow: 0 2px 10px rgba(45, 49, 66, 0.1);
}
.account-section-content {
display: none;
}
.account-section-content.active {
display: block;
}
/* [hidden] must win over .active — otherwise a deep link like /account#orders
would re-reveal a section that is deliberately switched off. */
.account-section-content[hidden],
.account-nav li[hidden] {
display: none !important;
}
.section-header {
margin-bottom: 3rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--border-gray);
}
.section-header h2 {
color: var(--dark-navy);
font-family: 'Playfair Display', serif;
margin-bottom: 0.5rem;
}
.section-header p {
color: var(--text-gray);
}
.account-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.form-submit-btn {
background: var(--dark-navy);
color: var(--white);
padding: 0.75rem 1.5rem;
border: none;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
align-self: flex-start;
}
.form-submit-btn:hover {
background: var(--primary-yellow);
color: var(--dark-navy);
}
/* Account Type Cards */
.current-account-type {
margin-bottom: 3rem;
}
.account-type-card {
background: var(--light-gray);
padding: 2rem;
border-radius: 12px;
border: 2px solid transparent;
margin-bottom: 1rem;
}
.account-type-card.current {
border-color: var(--primary-yellow);
background: var(--white);
}
.account-type-cards {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
margin-bottom: 2rem;
}
.upgrade-btn {
background: var(--primary-yellow);
color: var(--dark-navy);
padding: 0.75rem 1.5rem;
border: none;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 1rem;
}
.upgrade-btn:hover {
background: var(--dark-navy);
color: var(--white);
}
.account-benefits h4, .account-benefits h5 {
color: var(--dark-navy);
margin: 1rem 0 0.5rem;
}
.account-benefits ul {
list-style: none;
padding: 0;
}
.account-benefits li {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.25rem;
color: var(--text-gray);
font-size: 0.9rem;
}
.account-benefits li i {
color: var(--primary-yellow);
width: 14px;
}
.upgrade-options h3 {
color: var(--dark-navy);
margin-bottom: 1.5rem;
font-family: 'Playfair Display', serif;
}
.upgrade-requirements {
background: var(--light-gray);
padding: 2rem;
border-radius: 12px;
}
.upgrade-requirements h3 {
color: var(--dark-navy);
margin-bottom: 1.5rem;
font-family: 'Playfair Display', serif;
}
.requirements-info {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
.requirement-item h4 {
color: var(--dark-navy);
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.requirement-item ul {
list-style: none;
padding: 0;
}
.requirement-item li {
color: var(--text-gray);
margin-bottom: 0.5rem;
padding-left: 1rem;
position: relative;
}
.requirement-item li::before {
content: '•';
color: var(--primary-yellow);
position: absolute;
left: 0;
}
/* Orders Styles */
.orders-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.order-item {
display: grid;
grid-template-columns: 1fr auto auto auto;
gap: 2rem;
align-items: center;
background: var(--light-gray);
padding: 1.5rem;
border-radius: 12px;
}
.order-info h4 {
color: var(--dark-navy);
margin-bottom: 0.25rem;
}
.order-info p {
color: var(--text-gray);
font-size: 0.9rem;
}
.status {
padding: 0.5rem 1rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
}
.status.delivered {
background: #10B981;
color: white;
}
.status.pending {
background: #F59E0B;
color: white;
}
.status.cancelled {
background: #EF4444;
color: white;
}
.order-total p {
font-size: 1.1rem;
font-weight: 700;
color: var(--dark-navy);
}
.order-details-btn {
background: var(--dark-navy);
color: var(--white);
padding: 0.5rem 1rem;
border: none;
border-radius: 6px;
cursor: pointer;
transition: all 0.3s ease;
}
.order-details-btn:hover {
background: var(--primary-yellow);
color: var(--dark-navy);
}
.empty-orders {
text-align: center;
padding: 4rem 2rem;
color: var(--text-gray);
}
.empty-orders i {
font-size: 3rem;
color: var(--primary-yellow);
margin-bottom: 1rem;
}
.empty-orders h3 {
color: var(--dark-navy);
margin-bottom: 0.5rem;
}
.browse-products-btn {
background: var(--primary-yellow);
color: var(--dark-navy);
padding: 0.75rem 1.5rem;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
display: inline-block;
margin-top: 1rem;
transition: all 0.3s ease;
}
.browse-products-btn:hover {
background: var(--dark-navy);
color: var(--white);
}
/* Settings Styles */
.settings-group {
margin-bottom: 3rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--border-gray);
}
.settings-group:last-child {
border-bottom: none;
}
.settings-group h3 {
color: var(--dark-navy);
margin-bottom: 1.5rem;
font-family: 'Playfair Display', serif;
}
.preferences-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.preference-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
background: var(--light-gray);
border-radius: 8px;
}
.preference-info h4 {
color: var(--dark-navy);
margin-bottom: 0.25rem;
}
.preference-info p {
color: var(--text-gray);
font-size: 0.9rem;
}
/* Toggle Switch */
.toggle {
position: relative;
display: inline-block;
width: 50px;
height: 24px;
}
.toggle input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
border-radius: 24px;
}
.slider:before {
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 3px;
bottom: 3px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: var(--primary-yellow);
}
input:checked + .slider:before {
transform: translateX(26px);
}
/* Danger Zone */
.danger-zone {
border: 2px solid #EF4444;
border-radius: 12px;
padding: 2rem;
background: #FEF2F2;
}
.danger-zone h3 {
color: #EF4444;
}
.danger-actions {
display: flex;
flex-direction: column;
gap: 1rem;
}
.danger-item {
display: flex;
justify-content: space-between;
align-items: center;
}
.danger-info h4 {
color: #EF4444;
margin-bottom: 0.25rem;
}
.danger-info p {
color: #7F1D1D;
font-size: 0.9rem;
}
.danger-btn {
background: #EF4444;
color: white;
padding: 0.75rem 1.5rem;
border: none;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 0.5rem;
}
.danger-btn:hover {
background: #DC2626;
}
/* Mobile Responsive */
@media (max-width: 768px) {
.auth-form .form-row {
grid-template-columns: 1fr;
}
.account-layout {
grid-template-columns: 1fr;
gap: 2rem;
}
.account-sidebar {
order: 2;
}
.account-content {
order: 1;
padding: 2rem;
}
.account-user-info {
display: flex;
align-items: center;
gap: 1rem;
text-align: left;
}
.account-avatar {
margin: 0;
}
.account-nav ul {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem;
}
.account-type-cards {
grid-template-columns: 1fr;
}
.requirements-info {
grid-template-columns: 1fr;
}
.order-item {
grid-template-columns: 1fr;
gap: 1rem;
text-align: center;
}
.form-options {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.account-types {
gap: 1rem;
}
}
/* Pricing Display Styles */
.login-required-price {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--text-gray);
font-size: 0.9rem;
}
.login-required-price i {
color: var(--primary-yellow);
}
.login-required-price a {
color: var(--primary-yellow);
text-decoration: none;
font-weight: 600;
}
.login-required-price a:hover {
text-decoration: underline;
}
.tiered-pricing {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
}
.original-price {
font-size: 0.9rem;
color: var(--text-gray);
text-decoration: line-through;
opacity: 0.7;
}
.discounted-price {
font-size: 1.5rem;
font-weight: 700;
color: var(--dark-navy);
}
.discount-badge {
font-size: 0.7rem;
font-weight: 700;
padding: 0.2rem 0.5rem;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.discount-badge.contractor {
background: #10B981;
color: white;
}
.discount-badge.builder {
background: #3B82F6;
color: white;
}
.login-required-message {
text-align: center;
padding: 2rem;
background: var(--light-gray);
border-radius: 8px;
color: var(--text-gray);
}
.login-required-message i {
font-size: 2rem;
color: var(--primary-yellow);
margin-bottom: 1rem;
}
.login-required-message p {
margin-bottom: 1rem;
}
.login-required-message a {
color: var(--primary-yellow);
text-decoration: none;
font-weight: 600;
}
.login-required-message a:hover {
text-decoration: underline;
}
/* Login Required Overlay */
.login-required-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
}
.login-required-content {
background: var(--white);
padding: 3rem;
border-radius: 16px;
text-align: center;
max-width: 400px;
margin: 2rem;
}
.login-required-content i {
font-size: 3rem;
color: var(--primary-yellow);
margin-bottom: 1rem;
}
.login-required-content h3 {
color: var(--dark-navy);
margin-bottom: 1rem;
font-family: 'Playfair Display', serif;
}
.login-required-content p {
color: var(--text-gray);
margin-bottom: 2rem;
}
.login-actions {
display: flex;
gap: 1rem;
justify-content: center;
}
.login-action-btn, .register-action-btn {
padding: 0.75rem 1.5rem;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.login-action-btn {
background: var(--dark-navy);
color: var(--white);
}
.login-action-btn:hover {
background: var(--primary-yellow);
color: var(--dark-navy);
}
.register-action-btn {
background: var(--primary-yellow);
color: var(--dark-navy);
}
.register-action-btn:hover {
background: var(--dark-navy);
color: var(--white);
}
/* Customer Management Styles */
.customers-header {
margin-bottom: 2rem;
margin-top: 0; /* Ensure no negative margin */
}
.customers-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}
/* Fix white text issue in customer stats */
.customers-stats .stat-card .stat-number {
color: var(--dark-navy);
font-size: 1.8rem;
font-weight: 700;
margin-bottom: 0.5rem;
}
.customers-stats .stat-card .stat-label {
color: var(--text-gray);
font-size: 0.9rem;
opacity: 1;
}
.customers-controls {
display: flex;
justify-content: space-between;
align-items: center;
gap: 2rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.search-controls {
display: flex;
gap: 1rem;
flex: 1;
}
.search-controls input, .search-controls select {
padding: 0.5rem;
border: 1px solid var(--border-gray);
border-radius: 6px;
font-size: 0.9rem;
}
.search-controls input {
min-width: 250px;
}
.action-controls {
display: flex;
gap: 1rem;
}
.export-btn {
background: #10B981;
color: white;
padding: 0.5rem 1rem;
border: none;
border-radius: 6px;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 500;
transition: all 0.3s ease;
}
.export-btn:hover {
background: #059669;
transform: translateY(-1px);
}
.customers-table-container {
background: var(--white);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(45, 49, 66, 0.1);
}
.customers-table {
width: 100%;
border-collapse: collapse;
}
.customers-table th,
.customers-table td {
padding: 1rem;
text-align: left;
border-bottom: 1px solid var(--border-gray);
}
.customers-table th {
background: var(--light-gray);
font-weight: 600;
color: var(--dark-navy);
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.customers-table tr:hover {
background: #F8F9FA;
}
.customer-info {
display: block;
padding: 0;
}
.customer-details {
display: flex;
flex-direction: column;
}
.customer-name {
font-weight: 600;
color: var(--dark-navy);
margin-bottom: 0.25rem;
}
.customer-email {
font-size: 0.9rem;
color: var(--text-gray);
margin-bottom: 0.25rem;
}
.customer-phone {
font-size: 0.8rem;
color: var(--text-gray);
}
.account-type-badge {
padding: 0.25rem 0.75rem;
border-radius: 12px;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
}
.account-type-badge.basic {
background: var(--light-gray);
color: var(--dark-navy);
}
.account-type-badge.contractor {
background: #10B981;
color: white;
}
.account-type-badge.admin {
background: #dc2626;
color: white;
}
.customer-company {
color: var(--text-gray);
font-style: italic;
}
.registration-date {
color: var(--text-gray);
font-size: 0.9rem;
}
.status-badge {
padding: 0.25rem 0.75rem;
border-radius: 12px;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
}
.status-badge.active {
background: #10B981;
color: white;
}
.status-badge.pending {
background: #F59E0B;
color: white;
}
.status-badge.approved {
background: #10B981;
color: white;
}
.status-badge.rejected {
background: #EF4444;
color: white;
}
.customer-actions {
display: flex;
gap: 0.5rem;
}
.action-btn {
width: 32px;
height: 32px;
border: none;
border-radius: 6px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
font-size: 0.9rem;
}
.view-btn {
background: #3B82F6;
color: white;
}
.view-btn:hover {
background: #2563EB;
}
.approve-btn {
background: #10B981;
color: white;
}
.approve-btn:hover {
background: #059669;
}
.reject-btn {
background: #EF4444;
color: white;
}
.reject-btn:hover {
background: #DC2626;
}
.edit-btn {
background: #F59E0B;
color: white;
}
.edit-btn:hover {
background: #D97706;
}
.delete-btn {
background: #EF4444;
color: white;
}
.delete-btn:hover {
background: #DC2626;
}
.no-customers {
text-align: center;
padding: 4rem 2rem;
}
.empty-state {
color: var(--text-gray);
}
.empty-state i {
font-size: 3rem;
color: var(--primary-yellow);
margin-bottom: 1rem;
}
.empty-state h3 {
color: var(--dark-navy);
margin-bottom: 0.5rem;
}
/* Customer Details Modal */
.customer-details-modal {
/* Remove conflicting styles - they're now on modal-content */
}
/* Fix customer details modal positioning */
.modal.customer-details-modal {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100vw !important;
height: 100vh !important;
background: rgba(0, 0, 0, 0.5) !important;
z-index: 99999 !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
transform: none !important;
}
.modal.customer-details-modal .modal-content {
position: fixed !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
max-width: 900px !important;
width: 90% !important;
max-height: 90vh !important;
overflow-y: auto !important;
background: var(--white) !important;
border-radius: 12px !important;
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
z-index: 100000 !important;
margin: 0 !important;
padding: 0 !important;
}
/* Ensure modal has proper background overlay in admin */
.admin-body .modal {
background-color: rgba(0, 0, 0, 0.8) !important;
z-index: 9999 !important;
}
.customer-details-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}
.detail-section {
background: var(--light-gray);
padding: 1.5rem;
border-radius: 8px;
}
.detail-section h4 {
color: var(--dark-navy);
margin-bottom: 1rem;
font-family: 'Playfair Display', serif;
}
.detail-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.75rem;
padding-bottom: 0.75rem;
border-bottom: 1px solid var(--border-gray);
}
.detail-row:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.detail-label {
font-weight: 600;
color: var(--dark-navy);
}
.detail-value {
color: var(--text-gray);
text-align: right;
}
.customer-actions-footer {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
padding-top: 2rem;
border-top: 1px solid var(--border-gray);
}
.customer-actions-footer .action-btn {
width: auto;
height: auto;
padding: 0.75rem 1.5rem;
border-radius: 8px;
font-size: 0.9rem;
font-weight: 500;
display: flex;
align-items: center;
gap: 0.5rem;
}
/* Mobile Responsive */
@media (max-width: 768px) {
.customers-controls {
flex-direction: column;
align-items: stretch;
}
.search-controls {
flex-direction: column;
}
.search-controls input {
min-width: 0;
}
.action-controls {
justify-content: center;
}
.customers-table-container {
overflow-x: auto;
}
.customers-table {
min-width: 800px;
}
.customer-details-grid {
grid-template-columns: 1fr;
}
.customer-actions-footer {
flex-direction: column;
}
.customer-actions {
flex-wrap: wrap;
justify-content: center;
}
}
/* Admin Panel 3-Tier Pricing Styles */
.pricing-detail {
flex-direction: column;
align-items: stretch !important;
}
.pricing-inputs {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin: 1rem 0;
}
.pricing-field label,
.pricing-field span {
display: block;
font-size: 0.8rem;
color: var(--text-gray);
font-weight: 600;
margin-bottom: 0.25rem;
}
.pricing-field input {
width: 100%;
padding: 0.5rem;
border: 1px solid var(--border-gray);
border-radius: 6px;
}
.pricing-helper {
display: block;
font-size: 0.75rem;
color: var(--text-gray);
margin-top: 0.4rem;
}
.price-tier {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.price-tier label {
font-weight: 600;
color: var(--dark-navy);
font-size: 0.9rem;
}
.price-input {
padding: 0.5rem;
border: 1px solid var(--border-gray);
border-radius: 6px;
font-size: 0.9rem;
}
.save-pricing-btn {
background: var(--primary-yellow);
color: var(--dark-navy);
padding: 0.75rem 1.5rem;
border: none;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 1rem;
}
.save-pricing-btn:hover {
background: var(--dark-navy);
color: var(--white);
}
.option-pricing {
min-width: 250px;
}
.pricing-tiers {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.tier-price {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.85rem;
}
.tier-label {
font-weight: 500;
color: var(--text-gray);
}
.tier-value {
font-weight: 600;
color: var(--dark-navy);
}
.pricing-group .pricing-inputs {
background: var(--light-gray);
padding: 1rem;
border-radius: 8px;
margin-top: 0.5rem;
}
/* Mobile responsive for pricing */
@media (max-width: 768px) {
.pricing-inputs {
grid-template-columns: 1fr;
}
.tier-price {
justify-content: space-between;
padding: 0.25rem 0;
}
}
/* Custom Modal System */
.custom-modal-overlay {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background: rgba(0, 0, 0, 0.5) !important;
z-index: 10000 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: opacity 0.3s ease;
}
.custom-modal-overlay.show {
opacity: 1;
}
.custom-modal {
background: var(--white);
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
max-width: 500px;
width: 90%;
max-height: 80vh;
overflow-y: auto;
transform: scale(0.9);
transition: transform 0.3s ease;
position: relative !important;
z-index: 10001 !important;
}
.custom-modal-overlay.show .custom-modal {
transform: scale(1);
}
.custom-modal-header {
padding: 1.5rem;
border-bottom: 1px solid var(--border-gray);
display: flex;
align-items: center;
justify-content: space-between;
}
.custom-modal-title {
font-family: 'Playfair Display', serif;
font-size: 1.25rem;
font-weight: 600;
color: var(--dark-navy);
margin: 0;
}
.custom-modal-close {
background: none;
border: none;
font-size: 1.5rem;
color: var(--text-gray);
cursor: pointer;
padding: 0.25rem;
line-height: 1;
transition: color 0.3s ease;
}
.custom-modal-close:hover {
color: var(--dark-navy);
}
.custom-modal-body {
padding: 1.5rem;
}
.custom-modal-message {
color: var(--text-gray);
line-height: 1.6;
margin-bottom: 1.5rem;
}
.custom-modal-input {
width: 100%;
padding: 0.75rem;
border: 2px solid var(--border-gray);
border-radius: 8px;
font-size: 1rem;
margin-bottom: 1rem;
transition: border-color 0.3s ease;
}
.custom-modal-input:focus {
outline: none;
border-color: var(--primary-yellow);
}
.custom-modal-actions,
.modal-footer {
display: flex;
gap: 1rem;
justify-content: flex-end;
padding: 1.5rem;
border-top: 1px solid var(--border-gray);
}
.custom-modal-btn {
padding: 0.75rem 1.5rem;
border: none;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
font-size: 0.9rem;
}
.custom-modal-btn.primary {
background: var(--primary-yellow);
color: var(--dark-navy);
}
.custom-modal-btn.primary:hover {
background: var(--dark-navy);
color: var(--white);
}
.custom-modal-btn.secondary {
background: var(--light-gray);
color: var(--text-gray);
}
.custom-modal-btn.secondary:hover {
background: var(--text-gray);
color: var(--white);
}
.custom-modal-btn.danger {
background: #EF4444;
color: white;
}
.custom-modal-btn.danger:hover {
background: #DC2626;
}
.custom-modal-btn.success {
background: #10B981;
color: white;
}
.custom-modal-btn.success:hover {
background: #059669;
}
/* Ensure custom modals appear on top of regular modals */
#add-category-modal ~ .custom-modal-overlay {
z-index: 1000001 !important;
}
/* Alert Modal Specific */
.alert-modal .custom-modal-body {
display: flex;
align-items: flex-start;
gap: 1rem;
}
.alert-icon {
font-size: 2rem;
flex-shrink: 0;
margin-top: 0.25rem;
}
.alert-icon.info {
color: #3B82F6;
}
.alert-icon.success {
color: #10B981;
}
.alert-icon.warning {
color: #F59E0B;
}
.alert-icon.error {
color: #EF4444;
}
/* Rejection Notification */
.rejection-notification {
background: linear-gradient(135deg, #FEF3F2 0%, #FEE2E2 100%);
border: 2px solid #FCA5A5;
border-radius: 12px;
padding: 1.5rem;
margin-bottom: 2rem;
position: relative;
}
.rejection-notification-header {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1rem;
}
.rejection-notification-icon {
font-size: 1.5rem;
color: #EF4444;
}
.rejection-notification-title {
font-weight: 600;
color: #7F1D1D;
font-size: 1.1rem;
}
.rejection-notification-close {
position: absolute;
top: 1rem;
right: 1rem;
background: none;
border: none;
font-size: 1.25rem;
color: #7F1D1D;
cursor: pointer;
padding: 0.25rem;
line-height: 1;
transition: color 0.3s ease;
}
.rejection-notification-close:hover {
color: #991B1B;
}
.rejection-notification-message {
color: #7F1D1D;
line-height: 1.6;
margin-bottom: 1rem;
}
.rejection-notification-reason {
background: var(--white);
border: 1px solid #FCA5A5;
border-radius: 8px;
padding: 1rem;
color: #7F1D1D;
font-style: italic;
}
.rejection-notification-actions {
margin-top: 1rem;
display: flex;
gap: 1rem;
}
.rejection-notification-btn {
padding: 0.5rem 1rem;
border: none;
border-radius: 6px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
font-size: 0.9rem;
}
.rejection-notification-btn.primary {
background: #EF4444;
color: white;
}
.rejection-notification-btn.primary:hover {
background: #DC2626;
}
.rejection-notification-btn.secondary {
background: var(--white);
color: #7F1D1D;
border: 1px solid #FCA5A5;
}
.rejection-notification-btn.secondary:hover {
background: #FEF3F2;
}
/* Category Management Styles */
.add-category-section {
background: var(--light-gray);
border: 2px dashed var(--border-gray);
border-radius: 12px;
padding: 2rem;
text-align: center;
margin-top: 2rem;
transition: all 0.3s ease;
}
.add-category-section:hover {
border-color: var(--primary-yellow);
background: rgba(247, 213, 66, 0.1);
}
.add-category-btn {
background: var(--primary-yellow);
color: var(--dark-navy);
border: none;
padding: 1rem 2rem;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
}
.add-category-btn:hover {
background: var(--dark-navy);
color: var(--primary-yellow);
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(45, 49, 66, 0.3);
}
.add-category-btn i {
font-size: 1.1rem;
}
.delete-category-btn {
background: #EF4444;
color: var(--white);
border: none;
padding: 0.5rem 1rem;
border-radius: 6px;
font-size: 0.875rem;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.25rem;
margin-left: 10px;
}
.delete-category-btn:hover {
background: #DC2626;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}
.delete-category-btn i {
font-size: 0.875rem;
}
/* Category Modal Specific Styles */
/* Add Category Modal - Special handling to preserve form values */
#add-category-modal {
z-index: 999999 !important;
}
#add-category-modal.modal[style*="display: block"],
#add-category-modal.modal[style*="display: flex"] {
display: flex !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
align-items: center !important;
justify-content: center !important;
background-color: rgba(0, 0, 0, 0.8) !important;
}
#add-category-modal .option-modal-content {
position: relative !important;
margin: auto !important;
background: white !important;
max-height: 90vh !important;
overflow-y: auto !important;
}
#add-category-modal .form-group small {
display: block;
margin-top: 0.5rem;
color: var(--text-gray);
font-style: italic;
line-height: 1.4;
}
#add-category-modal .form-group input:not([type="checkbox"]) {
width: 100%;
padding: 0.75rem;
border: 2px solid var(--border-gray);
border-radius: 8px;
font-size: 1rem;
transition: border-color 0.3s ease;
}
#add-category-modal .form-group input[type="checkbox"] {
width: auto;
margin-right: 8px;
transform: scale(1.2);
cursor: pointer;
}
#add-category-modal .form-group input:not([type="checkbox"]):focus {
outline: none;
border-color: var(--primary-yellow);
box-shadow: 0 0 0 3px rgba(247, 213, 66, 0.1);
}
/* Enhanced admin config category header */
.admin-config-category h4 {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 1rem;
margin-bottom: 1.5rem;
padding: 1rem 1rem 1rem 1.5rem;
background: var(--light-gray);
border-radius: 8px;
border-left: 4px solid var(--primary-yellow);
}
.admin-config-category h4 > span:first-child {
font-size: 1.25rem;
font-weight: 600;
color: var(--dark-navy);
flex: 1;
}
.admin-config-category h4 .button-group {
display: flex;
gap: 0.5rem;
align-items: center;
}
/* Responsive adjustments for category management */
@media (max-width: 768px) {
.add-category-section {
padding: 1.5rem;
margin-top: 1.5rem;
}
.add-category-btn {
padding: 0.875rem 1.5rem;
font-size: 0.95rem;
}
.delete-category-btn {
padding: 0.5rem 0.75rem;
font-size: 0.8rem;
margin-left: 0;
margin-top: 0.5rem;
}
.admin-config-category h4 {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.admin-config-category h4 .button-group {
width: 100%;
justify-content: space-between;
}
}
/* Scroll Triggered Animations */
.fade-in-section {
opacity: 0;
transform: translateY(50px);
transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}
.fade-in-section.is-visible {
opacity: 1;
transform: translateY(0);
}
/* Enhanced Page Transitions */
/* FIXED: Removed transform animation as it breaks sticky positioning */
.page-transition {
/* No opacity fade (it caused the white flash between pages). Keep only the overflow
rule that lets sticky children work. */
overflow: visible !important;
}
@keyframes pageEnterFixed {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
/* Old animation kept for reference but not used
@keyframes pageEnter {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
*/
/* Loading States */
.loading-shimmer {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: shimmer 2s infinite;
}
/* Enhanced Interactive Elements */
.interactive-element {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
cursor: pointer;
}
.interactive-element:hover {
transform: translateY(-2px);
}
.interactive-element:active {
transform: translateY(0) scale(0.98);
}
/* Staggered Animation Classes */
.stagger-1 { animation-delay: 0.1s; }
.stagger-2 { animation-delay: 0.2s; }
.stagger-3 { animation-delay: 0.3s; }
.stagger-4 { animation-delay: 0.4s; }
.stagger-5 { animation-delay: 0.5s; }
.stagger-6 { animation-delay: 0.6s; }
/* Mobile Optimized Animations */
/* Legacy reference defaults; the measured desktop block below is authoritative. */
:is(body.reference-home, body.reference-commercial, body.reference-cta) {
--reference-gold: #f2c625;
font-family: var(--ref-sans);
}
:is(body.reference-home, body.reference-commercial) :is(.reference-product-copy p, .reference-feature-list, .reference-door-pane-list, .reference-feature-panel-list),
body.reference-home :is(.reference-card-eyebrow, .reference-card-title small) {
font-family: var(--ref-sans);
}
@media (min-width: 781px) and (max-width: 1199px) {
:is(body.reference-home, body.reference-commercial),
:is(body.reference-home, body.reference-commercial) :is(.reference-product-copy p, .reference-feature-list, .reference-door-pane-list, .reference-feature-panel-list),
body.reference-home :is(.reference-card-eyebrow, .reference-card-title small) {
font-family: var(--ref-sans);
}
body.reference-home .reference-product-copy p,
body.reference-commercial .reference-product-copy p {
font-size: 10px;
font-weight: 400;
line-height: 17px;
}
body.reference-commercial .reference-product {
position: relative;
border-bottom: 0 !important;
}
body.reference-commercial .reference-product:not(:last-child)::after {
content: "";
position: absolute;
right: 0;
left: 0;
height: 1px;
background: var(--reference-rule);
}
body.reference-commercial .reference-product:nth-child(1)::after,
body.reference-commercial .reference-product:nth-child(2)::after {
bottom: 24px;
}
body.reference-commercial .reference-product:nth-child(3)::after {
bottom: 31px;
}
body.reference-commercial .reference-commercial-figure {
width: 379px;
height: 254px;
overflow: visible;
background: transparent;
isolation: auto;
}
body.reference-commercial .reference-product--visual-first .reference-commercial-figure {
justify-self: start;
}
body.reference-commercial .reference-product--visual-last .reference-commercial-figure {
justify-self: start;
transform: translateX(-16px);
}
body.reference-commercial .reference-commercial-figure > picture {
overflow: hidden;
border-radius: 34px 0 0;
}
body.reference-commercial .reference-replacement-figure > div:first-child {
border-radius: 34px 0 0;
}
body.reference-commercial .reference-commercial-figure figcaption {
right: -40px;
width: 145px;
min-height: 58px;
padding: 8px 10px;
border-radius: 18px 0 18px 0;
}
body.reference-commercial .reference-commercial-figure figcaption strong {
font-size: 12px;
}
body.reference-commercial .reference-commercial-figure figcaption span {
font-size: 11px;
}
:is(body.reference-home, body.reference-commercial, body.reference-cta) .final-cta .cta-button {
width: 196px;
min-width: 196px;
height: 39px;
min-height: 39px;
padding: 0;
font-family: var(--ref-sans);
}
}
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* Shared replacement-media structure and mid-width fallbacks. */
body.reference-commercial .reference-replacement-media {
position: absolute;
inset: 0;
z-index: 0;
display: block;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: inherit;
}
body.reference-commercial .reference-replacement-media > img {
width: 100%;
height: 100%;
object-fit: cover;
}
body.reference-commercial .reference-replacement-figure > div {
z-index: 1;
}
@media (min-width: 781px) and (max-width: 1199px) {
:is(body.reference-home, body.reference-commercial),
:is(body.reference-home, body.reference-commercial) :is(.reference-product-copy p, .reference-feature-list, .reference-door-pane-list, .reference-feature-panel-list),
body.reference-home :is(.reference-card-eyebrow, .reference-card-title small) {
font-family: var(--ref-sans);
}
:is(body.reference-home, body.reference-commercial) .reference-product-copy p {
font-size: 10px;
font-weight: 400;
line-height: 17px;
}
body.reference-commercial .reference-product {
position: relative;
border-bottom: 0;
}
body.reference-commercial .reference-product:not(:last-child)::after {
content: "";
position: absolute;
right: 0;
left: 0;
height: 1px;
background: var(--reference-rule);
}
body.reference-commercial .reference-product:nth-child(1)::after,
body.reference-commercial .reference-product:nth-child(2)::after {
bottom: 24px;
}
body.reference-commercial .reference-product:nth-child(3)::after {
bottom: 31px;
}
body.reference-commercial .reference-commercial-figure {
width: 379px;
height: 254px;
overflow: visible;
background: transparent;
isolation: auto;
}
body.reference-commercial .reference-product--visual-first .reference-commercial-figure {
justify-self: start;
}
body.reference-commercial .reference-product--visual-last .reference-commercial-figure {
justify-self: start;
transform: translateX(-16px);
}
body.reference-commercial .reference-commercial-figure > picture {
overflow: hidden;
border-radius: 34px 0 0;
}
body.reference-commercial .reference-replacement-figure > div:first-of-type {
border-radius: 34px 0 0;
}
body.reference-commercial .reference-commercial-figure figcaption {
right: -40px;
width: 145px;
min-height: 58px;
padding: 8px 10px;
border-radius: 18px 0 18px 0;
}
body.reference-commercial .reference-commercial-figure figcaption strong {
font-size: 12px;
}
body.reference-commercial .reference-commercial-figure figcaption span {
font-size: 11px;
}
:is(body.reference-home, body.reference-commercial, body.reference-cta) .final-cta .cta-button {
width: 196px;
min-width: 196px;
height: 39px;
min-height: 39px;
padding: 0;
font-family: var(--ref-sans);
}
}
@media (max-width: 768px) {
.header-content {
gap: 1rem;
padding: 0.4rem 0;
}
.search-box input {
width: 180px;
}
.search-box input:focus {
width: 200px;
}
.main-nav ul {
gap: 1.5rem;
}
.hero-text h2 {
font-size: 2.5rem;
}
.categories-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.category-card-link:hover .category-card {
transform: translateY(-4px) scale(1.01);
}
.product-card:hover {
transform: translateY(-5px) scale(1.02);
}
}
/* Login link styling - make all login links yellow to match website theme */
.login-required-price a,
.price-item.login-required a,
.hardware-product-price a {
color: var(--primary-yellow) !important;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.login-required-price a:hover,
.price-item.login-required a:hover,
.hardware-product-price a:hover {
color: var(--accent-gold) !important;
text-decoration: underline;
}
/* Ensure icon is yellow too */
.login-required-price i,
.price-item.login-required i,
.hardware-product-price i {
color: var(--primary-yellow);
margin-right: 8px;
}
/* Orders Section Styles */
.orders-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
.stat-card.order-stat {
background: var(--white);
padding: 1.5rem 1.5rem 1.5rem 2rem;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(45, 49, 66, 0.1);
border-left: 4px solid var(--primary-yellow);
}
.stat-content.order-stat h3 {
font-size: 2rem;
color: var(--dark-navy);
margin-bottom: 0.5rem;
}
.stat-content.order-stat p {
color: var(--text-gray);
font-size: 0.9rem;
}
.orders-controls {
display: flex;
justify-content: space-between;
align-items: center;
gap: 2rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.orders-controls .search-controls,
.inventory-controls .search-controls {
display: flex;
gap: 1rem;
flex: 1;
}
.orders-controls .search-controls input,
.inventory-controls .search-controls input,
.orders-controls .search-controls select,
.inventory-controls .search-controls select {
padding: 0.5rem;
border: 1px solid var(--border-gray);
border-radius: 6px;
font-size: 0.9rem;
}
.orders-controls .search-controls input,
.inventory-controls .search-controls input {
min-width: 250px;
}
.orders-controls .filter-controls,
.inventory-controls .filter-controls {
display: flex;
gap: 1rem;
}
.refresh-orders-btn {
background: #3B82F6;
color: white;
padding: 0.5rem 1rem;
border: none;
border-radius: 6px;
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.5rem;
transition: all 0.3s ease;
}
.refresh-orders-btn:hover {
background: #2563eb;
}
.orders-controls .add-product-btn,
.inventory-controls .add-product-btn {
background: var(--primary-yellow);
color: var(--dark-navy);
padding: 0.5rem 1rem;
border: none;
border-radius: 6px;
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.5rem;
transition: all 0.3s ease;
}
.orders-controls .add-product-btn:hover,
.inventory-controls .add-product-btn:hover {
background: #e6c445;
}
/* Status filter styling handled by general .search-controls select rules */
/* Duplicate refresh button styling removed - using the customer-style version above */
.orders-table-container {
background: var(--white);
border-radius: 12px;
box-shadow: 0 2px 10px rgba(45, 49, 66, 0.1);
overflow-x: auto;
}
.orders-table {
width: 100%;
border-collapse: collapse;
min-width: 900px;
}
.orders-table th,
.orders-table td {
padding: 1.25rem 1rem;
text-align: left;
border-bottom: 1px solid var(--border-gray);
vertical-align: middle;
}
.orders-table th {
background: #F8F9FA;
color: var(--dark-navy);
font-weight: 600;
font-size: 0.875rem;
text-transform: uppercase;
letter-spacing: 0.5px;
position: sticky;
top: 0;
z-index: 10;
white-space: nowrap;
}
.orders-table tbody tr {
transition: background-color 0.2s ease;
}
.orders-table tbody tr:hover {
background: rgba(247, 213, 66, 0.08);
}
.customer-info {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.customer-name {
font-weight: 600;
color: var(--dark-navy);
}
.customer-email {
font-size: 0.875rem;
color: var(--text-gray);
}
.order-total {
font-weight: 700;
color: var(--dark-navy);
font-size: 1rem;
}
.order-status-select {
padding: 0.5rem 0.75rem;
border-radius: 6px;
border: 1px solid var(--border-gray);
font-size: 0.875rem;
font-weight: 500;
background: white;
cursor: pointer;
transition: all 0.2s ease;
min-width: 120px;
}
.order-status-select:focus {
outline: none;
border-color: var(--primary-yellow);
box-shadow: 0 0 0 3px rgba(247, 213, 66, 0.1);
}
.payment-status {
padding: 0.375rem 0.875rem;
border-radius: 20px;
font-size: 0.8125rem;
font-weight: 600;
text-transform: capitalize;
display: inline-block;
}
.payment-status.paid {
background: #D1FAE5;
color: #065F46;
}
.payment-status.pending {
background: #FEF3C7;
color: #92400E;
}
.payment-status.failed {
background: #FEE2E2;
color: #991B1B;
}
.order-details-content {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.order-item-detail {
display: flex;
justify-content: space-between;
padding: 0.5rem 0;
border-bottom: 1px solid var(--border-gray);
}
/* Shipping Settings Styles */
.shipping-settings-content {
max-width: 1200px;
margin: 0 auto;
}
.shipping-form-container {
background: var(--white);
padding: 2rem;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(45, 49, 66, 0.1);
margin-bottom: 2rem;
}
.shipping-form-container h3 {
color: var(--dark-navy);
margin-bottom: 1rem;
font-family: 'Playfair Display', serif;
border-bottom: 2px solid var(--primary-yellow);
padding-bottom: 0.5rem;
}
.shipping-form-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
.save-shipping-btn {
background: var(--dark-navy);
color: var(--white);
border: none;
padding: 1rem 2rem;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.save-shipping-btn:hover {
background: var(--primary-yellow);
color: var(--dark-navy);
}
.promo-codes-section {
background: var(--white);
padding: 2rem;
border-radius: 12px;
box-shadow: 0 2px 10px rgba(45, 49, 66, 0.1);
}
.promo-codes-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1.5rem;
}
.add-promo-btn {
background: var(--primary-yellow);
color: var(--dark-navy);
border: none;
padding: 0.75rem 1.5rem;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.add-promo-btn:hover {
background: var(--dark-navy);
color: var(--white);
}
.promo-codes-list {
display: grid;
gap: 1rem;
}
.promo-code-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
background: var(--light-gray);
border-radius: 8px;
}
.promo-info h4 {
color: var(--dark-navy);
font-size: 1.1rem;
margin-bottom: 0.25rem;
}
.promo-info p {
color: var(--text-gray);
font-size: 0.9rem;
margin-bottom: 0.5rem;
}
.promo-value {
font-weight: 600;
color: var(--primary-yellow);
font-size: 1.1rem;
}
#orders-empty-state,
#promo-empty-state {
text-align: center;
padding: 3rem;
color: var(--text-gray);
}
#orders-empty-state i,
#promo-empty-state i {
font-size: 3rem;
color: var(--border-gray);
margin-bottom: 1rem;
}
@media (max-width: 768px) {
.orders-controls {
flex-direction: column;
align-items: stretch;
}
.orders-stats {
grid-template-columns: 1fr;
}
.shipping-form-grid {
grid-template-columns: 1fr;
}
.promo-codes-header {
flex-direction: column;
gap: 1rem;
}
.promo-code-item {
flex-direction: column;
text-align: center;
}
}
/* Cart Page Enhancements */
.cart-table-header {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1fr 0.5fr;
padding: 1.25rem 1rem;
border-bottom: 2px solid var(--border-gray);
font-weight: 600;
color: var(--dark-navy);
background: var(--light-gray);
margin-bottom: 0;
text-transform: uppercase;
font-size: 0.9rem;
letter-spacing: 0.5px;
border-radius: 12px 12px 0 0;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}
.cart-table-header span {
text-align: center;
}
.cart-table-header span:first-child {
text-align: left;
}
.cart-content-wrapper {
display: grid;
grid-template-columns: 1fr 400px;
gap: 3rem;
}
.cart-sidebar {
position: sticky;
top: 100px;
height: fit-content;
}
.shipping-section,
.cart-summary {
background: var(--white);
padding: 2rem;
border-radius: 12px;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
margin-bottom: 2rem;
display: block;
}
.shipping-section h3,
.cart-summary h3 {
margin-bottom: 1.5rem;
color: var(--dark-navy);
font-size: 1.3rem;
}
.shipping-form .form-group {
margin-bottom: 1rem;
}
.shipping-form label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
color: var(--dark-navy);
}
#shipping-address {
width: 100%;
padding: 0.75rem;
border: 2px solid var(--border-gray);
border-radius: 8px;
font-family: inherit;
transition: border-color 0.3s ease;
}
#shipping-address:focus {
border-color: var(--primary-yellow);
outline: none;
}
.locate-btn {
margin-top: 0.5rem;
width: 100%;
padding: 0.75rem;
background: var(--primary-yellow);
color: var(--dark-navy);
border: none;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
transition: all 0.3s ease;
}
.locate-btn:hover {
background: var(--dark-navy);
color: var(--primary-yellow);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.locate-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.shipping-options {
margin-top: 1.5rem;
}
.shipping-options h4 {
margin-bottom: 1rem;
color: var(--dark-navy);
}
.shipping-option {
margin-bottom: 1rem;
}
.shipping-option label {
display: flex;
align-items: center;
padding: 1rem;
border: 2px solid var(--border-gray);
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
}
.shipping-option input[type="radio"]:checked + label {
border-color: var(--primary-yellow);
background: rgba(247, 213, 66, 0.1);
}
.shipping-option label:hover {
border-color: var(--primary-yellow);
}
.shipping-option input[type="radio"] {
margin-right: 1rem;
}
.option-name {
flex: 1;
font-weight: 600;
color: var(--dark-navy);
}
.option-time {
color: var(--text-gray);
font-size: 0.9rem;
margin: 0 1rem;
}
.option-price {
font-weight: 700;
color: var(--primary-yellow);
}
.cart-actions {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 2rem;
padding-top: 2rem;
border-top: 2px solid var(--border-gray);
}
.clear-cart-btn {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
background: #dc3545;
color: white;
border: none;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.clear-cart-btn:hover {
background: #c82333;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}
.continue-shopping {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--primary-yellow);
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.continue-shopping:hover {
transform: translateX(-5px);
}
.promo-section {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid var(--border-gray);
}
.promo-input {
display: flex;
gap: 0.5rem;
margin-bottom: 1rem;
}
#promo-code {
flex: 1;
padding: 0.75rem;
border: 2px solid var(--border-gray);
border-radius: 8px;
font-family: inherit;
text-transform: uppercase;
transition: border-color 0.3s ease;
}
#promo-code:focus {
border-color: var(--primary-yellow);
outline: none;
}
#promo-code:disabled {
background: var(--light-gray);
cursor: not-allowed;
}
#apply-promo {
padding: 0.75rem 1.5rem;
background: var(--primary-yellow);
color: var(--dark-navy);
border: none;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
#apply-promo:hover:not(:disabled) {
background: var(--dark-navy);
color: var(--primary-yellow);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
#apply-promo:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.promo-discount {
display: flex;
justify-content: space-between;
margin-top: 0.5rem;
color: #28a745;
font-weight: 600;
}
#cart-list .cart-item {
display: grid !important;
grid-template-columns: 2fr 1fr 1fr 1fr 0.5fr;
align-items: center;
padding: 1.25rem 1rem;
border-bottom: 1px solid var(--border-gray);
transition: all 0.3s ease;
background: white;
min-height: 120px;
}
/* Hardware add-ons sub-list under each cart item */
.cart-item-addons {
list-style: none;
margin: 0.4rem 0 0 0;
padding: 0.4rem 0 0 0.75rem;
border-top: 1px dashed var(--border-gray, #e2e8f0);
}
.cart-item-addons .cart-item-addon {
display: flex;
justify-content: space-between;
gap: 0.5rem;
font-size: 0.82rem;
color: #4a5568;
padding: 0.15rem 0;
}
.cart-item-addons .cart-item-addon .addon-name { flex: 1; }
.cart-item-addons .cart-item-addon .addon-price { font-weight: 500; color: #2d3748; }
/* Breakdown section divider used for Hardware Add-ons in config summary */
.breakdown-section-divider {
margin-top: 0.5rem;
padding: 0.35rem 0;
border-top: 1px dashed #e2e8f0;
font-size: 0.85rem;
color: #2d3748;
}
.breakdown-section-divider strong { font-weight: 600; }
#cart-list .cart-item:hover {
background-color: rgba(247, 213, 66, 0.05);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
#cart-list {
background: white;
border-radius: 0 0 12px 12px;
overflow: hidden;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}
.item-product {
display: flex;
align-items: center;
gap: 1rem;
}
.item-product img {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 8px;
border: 1px solid var(--border-gray);
flex-shrink: 0;
}
.item-details h4 {
margin-bottom: 0.5rem;
color: var(--dark-navy);
font-size: 1.1rem;
font-weight: 600;
line-height: 1.3;
}
.item-details p {
color: var(--text-gray);
font-size: 0.85rem;
margin: 0.25rem 0;
line-height: 1.4;
}
.item-details p:first-of-type {
font-weight: 500;
color: var(--dark-navy);
opacity: 0.7;
}
.config-details {
font-size: 0.85rem;
color: var(--text-gray);
font-style: italic;
}
.item-price {
font-weight: 600;
color: var(--dark-navy);
font-size: 1.1rem;
text-align: center;
}
.item-price .login-for-price {
font-size: 0.85rem;
font-weight: 500;
color: var(--text-gray);
font-style: italic;
}
.item-total {
font-weight: 700;
color: var(--dark-navy);
font-size: 1.1rem;
text-align: center;
}
.item-action {
display: flex;
justify-content: center;
align-items: center;
}
.remove-btn {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: #dc2626;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
}
.remove-btn:hover {
background: #b91c1c;
transform: scale(1.1);
}
.item-quantity {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.qty-btn {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: var(--primary-yellow);
color: var(--dark-navy);
border: none;
border-radius: 6px;
font-weight: 600;
font-size: 1.1rem;
cursor: pointer;
transition: all 0.3s ease;
}
.qty-btn:hover {
background: var(--dark-navy);
color: var(--primary-yellow);
transform: scale(1.1);
}
.qty {
font-weight: 600;
min-width: 40px;
text-align: center;
font-size: 1rem;
color: var(--dark-navy);
}
.payment-methods {
margin-top: 2rem;
text-align: center;
padding-top: 1.5rem;
border-top: 1px solid var(--border-gray);
}
.payment-methods p {
color: var(--text-gray);
margin-bottom: 1rem;
}
.payment-icons {
display: flex;
justify-content: center;
gap: 1rem;
}
.payment-icons i {
font-size: 2rem;
color: var(--text-gray);
opacity: 0.7;
transition: opacity 0.3s ease;
}
.payment-icons i:hover {
opacity: 1;
}
/* Recommended Products Section Fix */
.recommended-products {
padding: 4rem 0;
background: var(--light-gray);
}
.recommended-products h2 {
text-align: center;
margin-bottom: 3rem;
font-family: 'Playfair Display', serif;
font-size: 2.5rem;
color: var(--dark-navy);
}
.recommended-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.recommended-card {
background: var(--white);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.recommended-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}
.recommended-image {
width: 100%;
height: 200px;
overflow: hidden;
}
.recommended-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.recommended-card:hover .recommended-image img {
transform: scale(1.05);
}
.recommended-content {
padding: 1.5rem;
}
.recommended-content h4 {
margin-bottom: 0.5rem;
color: var(--dark-navy);
font-size: 1.2rem;
}
.recommended-content .price {
color: var(--primary-yellow);
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 1rem;
}
.add-recommended {
width: 100%;
padding: 0.75rem;
background: var(--primary-yellow);
color: var(--dark-navy);
border: none;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.add-recommended:hover {
background: var(--dark-navy);
color: var(--primary-yellow);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* Responsive Cart Styles */
@media (max-width: 968px) {
.cart-content-wrapper {
grid-template-columns: 1fr;
}
.cart-sidebar {
position: relative;
top: 0;
}
}
@media (max-width: 768px) {
.cart-table-header {
display: none;
}
#cart-list .cart-item {
grid-template-columns: 1fr;
gap: 1rem;
padding: 1.5rem;
border: 1px solid var(--border-gray);
border-radius: 8px;
margin-bottom: 1rem;
min-height: auto;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.item-product {
flex-direction: column;
text-align: center;
}
.item-quantity {
padding: 0.5rem 0;
}
.cart-actions {
flex-direction: column;
gap: 1rem;
}
.clear-cart-btn,
.continue-shopping {
width: 100%;
justify-content: center;
}
.recommended-grid {
grid-template-columns: 1fr;
}
}
/* ===== GLOBAL POPUP & NOTIFICATION POSITIONING FIXES ===== */
/* Ensuring all modals, popups, and notifications use viewport-relative positioning */
/* Fix any form success/error messages to appear at top of viewport */
.form-success-message,
.form-error-message {
position: fixed !important;
top: 100px !important;
left: 50% !important;
transform: translateX(-50%) !important;
z-index: 10000 !important;
max-width: 500px !important;
width: 90% !important;
animation: slideDown 0.3s ease !important;
}
/* Ensure all message notifications appear at top right of viewport */
.message,
.notification,
.toast,
.alert-notification,
[data-snb-notification] {
position: fixed !important;
top: 20px !important;
right: 20px !important;
z-index: 999999 !important;
transform: none !important;
margin: 0 !important;
}
/* Fix rejection notifications to appear at top of viewport */
.rejection-notification {
position: fixed !important;
top: 100px !important;
left: 50% !important;
transform: translateX(-50%) !important;
z-index: 9999 !important;
max-width: 600px !important;
width: 90% !important;
}
/* Ensure all modals are properly centered in viewport */
.modal,
.custom-modal-overlay,
.option-modal,
.door-opening-modal,
.category-modal,
.customer-details-modal {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: 10000 !important;
}
/* Ensure modal content is centered */
.modal-content,
.custom-modal,
.option-modal-content,
.door-opening-modal-content,
.category-modal-content {
position: relative !important;
margin: auto !important;
max-height: 90vh !important;
overflow-y: auto !important;
}
/* Fix any absolute positioned alerts to use fixed */
.alert,
.alert-box,
.notification-box,
.message-container {
position: fixed !important;
z-index: 10000 !important;
}
/* Animation for notifications sliding down from top */
@keyframes slideDown {
from {
transform: translateX(-50%) translateY(-100%);
opacity: 0;
}
to {
transform: translateX(-50%) translateY(0);
opacity: 1;
}
}
/* Ensure dropdowns stay relative to viewport when near edges */
.user-dropdown,
.dropdown-menu {
position: absolute;
z-index: 9999;
}
/* Special handling for admin panel modals */
.admin-body .modal,
.admin-body .custom-modal-overlay {
z-index: 10001 !important; /* Higher than admin sidebar */
}
/* Dynamic Modal Styles */
.dynamic-modal {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background: rgba(15, 23, 42, 0.6) !important;
display: none;
align-items: center !important;
justify-content: center !important;
z-index: 10000 !important;
padding: 1rem;
}
.dynamic-modal.is-visible {
display: flex !important;
}
.dynamic-modal > .modal-content {
background: #fff !important;
border-radius: 12px !important;
padding: 0 !important;
max-height: 90vh !important;
overflow-y: auto !important;
box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25) !important;
position: relative !important;
width: 90%;
}
/* Admin Dynamic Modal Styles - Proper sizing and layout */
.admin-body .dynamic-modal {
z-index: 100000 !important;
}
.admin-body .dynamic-modal > .modal-content {
width: auto;
min-width: 500px;
max-width: 90vw;
}
/* Admin Modal Content Structure */
.dynamic-modal .modal-content > .modal-content {
background: transparent !important;
box-shadow: none !important;
padding: 0 !important;
max-height: none !important;
overflow: visible !important;
}
/* Admin Modal Header */
.dynamic-modal .modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.5rem;
border-bottom: 1px solid var(--border-gray);
background: var(--light-gray);
border-radius: 12px 12px 0 0;
}
.dynamic-modal .modal-header h3 {
margin: 0;
font-size: 1.25rem;
color: var(--dark-navy);
font-weight: 600;
}
.dynamic-modal .modal-header .close {
background: none;
border: none;
font-size: 1.5rem;
color: var(--text-gray);
cursor: pointer;
padding: 0;
line-height: 1;
transition: color 0.2s ease;
}
.dynamic-modal .modal-header .close:hover {
color: var(--dark-navy);
}
/* Admin Modal Body */
.dynamic-modal .modal-body {
padding: 1.5rem;
max-height: calc(80vh - 120px);
overflow-y: auto;
}
/* Admin Modal Footer */
.dynamic-modal .modal-footer {
display: flex;
justify-content: flex-end;
gap: 0.75rem;
padding: 1rem 1.5rem;
border-top: 1px solid var(--border-gray);
background: var(--light-gray);
border-radius: 0 0 12px 12px;
}
/* Customer Details Modal Styles */
.customer-details-grid {
display: grid;
gap: 1.5rem;
}
.detail-section {
background: var(--light-gray);
padding: 1rem;
border-radius: 8px;
}
.detail-section h4 {
margin: 0 0 0.75rem;
font-size: 0.9rem;
color: var(--dark-navy);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
border-bottom: 1px solid var(--border-gray);
padding-bottom: 0.5rem;
}
.detail-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 0;
border-bottom: 1px solid rgba(0,0,0,0.05);
}
.detail-row:last-child {
border-bottom: none;
}
.detail-label {
font-size: 0.85rem;
color: var(--text-gray);
font-weight: 500;
}
.detail-value {
font-size: 0.85rem;
color: var(--dark-navy);
font-weight: 500;
text-align: right;
}
/* Customer Actions Footer */
.customer-actions-footer {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1.5rem;
padding-top: 1rem;
border-top: 1px solid var(--border-gray);
}
.customer-actions-footer .action-btn {
padding: 0.6rem 1rem !important;
font-size: 0.85rem !important;
display: flex !important;
align-items: center !important;
gap: 0.5rem !important;
border-radius: 6px !important;
border: none !important;
cursor: pointer;
transition: all 0.2s ease;
width: auto !important;
height: auto !important;
}
.customer-actions-footer .view-btn {
background: var(--nav-indigo);
color: white;
}
.customer-actions-footer .edit-btn {
background: #3B82F6;
color: white;
}
.customer-actions-footer .approve-btn {
background: #10B981;
color: white;
}
.customer-actions-footer .reject-btn {
background: #EF4444;
color: white;
}
/* Order Details Modal Styles */
.order-details-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem 1.5rem;
border-bottom: 1px solid var(--border-gray);
background: var(--light-gray);
border-radius: 12px 12px 0 0;
}
.order-details-header h3 {
margin: 0;
font-size: 1.25rem;
color: var(--dark-navy);
}
.order-details-header .order-id {
margin: 0;
font-size: 0.85rem;
color: var(--text-gray);
}
.order-details-header .order-details-close {
background: none;
border: none;
font-size: 1.5rem;
color: var(--text-gray);
cursor: pointer;
padding: 0;
line-height: 1;
}
.order-details-body {
padding: 1.5rem;
max-height: calc(80vh - 120px);
overflow-y: auto;
}
.order-section {
background: var(--light-gray);
padding: 1rem;
border-radius: 8px;
margin-bottom: 1rem;
}
.order-section:last-child {
margin-bottom: 0;
}
.order-section h4 {
margin: 0 0 0.75rem;
font-size: 0.9rem;
color: var(--dark-navy);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.order-info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 1rem;
}
.order-info-item {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.order-info-label {
font-size: 0.75rem;
color: var(--text-gray);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.order-info-value {
font-size: 0.9rem;
color: var(--dark-navy);
font-weight: 500;
}
/* Order Items Table */
.order-items-table {
width: 100%;
border-collapse: collapse;
font-size: 0.85rem;
}
.order-items-table th {
background: rgba(0,0,0,0.03);
padding: 0.6rem 0.75rem;
text-align: left;
font-weight: 600;
color: var(--dark-navy);
font-size: 0.75rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.order-items-table td {
padding: 0.6rem 0.75rem;
border-bottom: 1px solid rgba(0,0,0,0.05);
color: var(--dark-navy);
}
.order-item-name {
font-weight: 500;
}
.order-item-sku {
font-family: monospace;
font-size: 0.8rem;
color: var(--text-gray);
}
/* Order Pricing Summary */
.order-pricing-summary {
background: white;
border-radius: 6px;
padding: 0.75rem;
}
.pricing-row {
display: flex;
justify-content: space-between;
padding: 0.4rem 0;
font-size: 0.85rem;
}
.pricing-row.total {
border-top: 2px solid var(--dark-navy);
margin-top: 0.5rem;
padding-top: 0.75rem;
font-weight: 700;
font-size: 1rem;
}
.pricing-label {
color: var(--text-gray);
}
.pricing-value {
color: var(--dark-navy);
font-weight: 500;
}
/* Edit Customer Modal Form Styles */
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.account-status-section {
background: var(--light-gray);
padding: 1rem;
border-radius: 8px;
margin: 1rem 0;
}
.account-status-section h4 {
margin: 0 0 0.75rem;
font-size: 0.9rem;
color: var(--dark-navy);
}
.current-account-info {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}
.account-badge {
padding: 0.4rem 0.75rem;
border-radius: 20px;
font-size: 0.8rem;
font-weight: 600;
}
.account-badge.basic {
background: #E5E7EB;
color: #374151;
}
.account-badge.contractor {
background: #DBEAFE;
color: #1E40AF;
}
.account-badge.admin {
background: #FEF3C7;
color: #92400E;
}
.contractor-request-pending {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem;
background: #FEF3C7;
border-radius: 6px;
font-size: 0.8rem;
color: #92400E;
}
.account-type-controls {
margin-top: 1rem;
}
.account-type-controls label {
display: block;
margin-bottom: 0.5rem;
font-size: 0.85rem;
font-weight: 500;
}
.account-type-select {
width: 100%;
padding: 0.5rem 0.75rem;
border: 1px solid var(--border-gray);
border-radius: 6px;
font-size: 0.9rem;
}
.account-type-controls small {
display: block;
margin-top: 0.5rem;
font-size: 0.75rem;
color: var(--text-gray);
}
.contractor-approval-section {
margin-top: 1rem;
padding: 1rem;
background: #FEF3C7;
border-radius: 6px;
}
.contractor-approval-section h5 {
margin: 0 0 0.5rem;
font-size: 0.9rem;
color: #92400E;
}
.contractor-approval-section p {
margin: 0 0 1rem;
font-size: 0.85rem;
color: #78350F;
}
.approval-actions {
display: flex;
gap: 0.75rem;
}
.checkbox-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.checkbox-group label {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.85rem;
cursor: pointer;
}
/* Custom Modal Buttons */
.custom-modal-btn {
padding: 0.6rem 1.25rem;
border-radius: 6px;
font-size: 0.9rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
border: none;
}
.custom-modal-btn.primary {
background: var(--nav-indigo);
color: white;
}
.custom-modal-btn.primary:hover {
background: var(--dark-navy);
}
.custom-modal-btn.secondary {
background: #E5E7EB;
color: var(--dark-navy);
}
.custom-modal-btn.secondary:hover {
background: #D1D5DB;
}
.custom-modal-btn.success {
background: #10B981;
color: white;
}
.custom-modal-btn.success:hover {
background: #059669;
}
.custom-modal-btn.danger {
background: #EF4444;
color: white;
}
.custom-modal-btn.danger:hover {
background: #DC2626;
}
/* Customer Orders Modal */
.customer-orders-table {
width: 100%;
border-collapse: collapse;
}
.customer-orders-table th {
background: var(--light-gray);
padding: 0.6rem;
text-align: left;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--text-gray);
}
.customer-orders-table td {
padding: 0.6rem;
border-bottom: 1px solid var(--border-gray);
font-size: 0.85rem;
}
.customer-orders-table tr:hover {
background: var(--light-gray);
}
/* Profit indicators */
.profit-positive {
color: #10B981;
}
.profit-negative {
color: #EF4444;
}
/* Share Modal Specific Styles */
.share-modal-content {
min-width: 300px;
}
.share-modal-content h3 {
margin: 0 0 1rem;
font-size: 1.25rem;
color: var(--dark-navy);
}
.share-modal-content .share-cart-info {
background: var(--light-gray);
padding: 0.75rem;
border-radius: 6px;
margin-bottom: 1rem;
}
.share-modal-content .share-link-section input {
flex: 1;
padding: 0.5rem 0.75rem;
border: 1px solid var(--border-gray);
border-radius: 4px;
font-size: 0.85rem;
background: #fff;
}
.share-modal-content button {
transition: all 0.2s ease;
}
.share-modal-content button:hover {
opacity: 0.9;
transform: translateY(-1px);
}
/* Mobile responsive adjustments for fixed elements */
@media (max-width: 768px) {
.form-success-message,
.form-error-message,
.rejection-notification {
top: 80px !important;
width: 95% !important;
}
.message,
.notification,
.toast {
top: 80px !important;
right: 10px !important;
left: 10px !important;
width: auto !important;
}
.modal-content,
.custom-modal,
.option-modal-content,
.door-opening-modal-content {
width: 95% !important;
margin: 0 !important;
}
}
/* Cart message notifications */
.cart-message {
position: fixed !important;
top: 100px !important;
right: 20px !important;
z-index: 10000 !important;
}
/* Login required overlay fix */
.login-required-overlay {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: 9998 !important;
}
/* ===== EMERGENCY CART NOTIFICATION FIX ===== */
/* Maximum specificity to override any conflicting styles */
body .cart-message,
body div.cart-message,
.cart-message {
position: fixed !important;
top: 100px !important;
right: 20px !important;
z-index: 999999 !important;
/* Ensure it's not being pushed by any transforms or margins */
margin: 0 !important;
transform: none !important;
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Override any parent container styles that might affect positioning */
body > .cart-message {
position: fixed !important;
}
/* Critical fix for fixed positioning to work properly */
html, body {
transform: none !important;
/* DO NOT use position: relative as it breaks fixed positioning */
}
/* Allow vertical scrolling but ensure fixed elements work */
html {
overflow-y: auto !important;
overflow-x: hidden !important;
}
body {
overflow-x: hidden !important;
overflow-y: visible !important;
}
/* Apply overflow-x hidden to a wrapper to prevent horizontal scroll without breaking fixed positioning */
.overflow-wrapper,
main,
.main-content {
overflow-x: hidden;
width: 100%;
}
/* Debug helper - this will make the notification have a red border if it's working */
.cart-message {
/* border: 3px solid red !important; */
}
/* ===== POPUP OPTIONS MODAL STYLES ===== */
.popup-options-modal .modal-content {
max-width: 600px;
width: 90%;
overflow: visible !important;
}
.popup-options-content {
padding: 1.25rem 1.5rem;
overflow: visible !important;
}
.popup-options-grid {
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0.75rem;
padding: 0.5rem 0;
overflow: visible;
}
.popup-options-grid[data-count="1"],
.popup-options-grid[data-count="2"] {
grid-template-columns: repeat(2, 1fr);
}
.popup-options-grid[data-count="3"] {
grid-template-columns: repeat(3, 1fr);
}
.popup-options-grid[data-count="4"] {
grid-template-columns: repeat(2, 1fr);
}
.popup-options-grid[data-count="6"],
.popup-options-grid[data-count="7"],
.popup-options-grid[data-count="8"] {
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 600px) {
.popup-options-grid {
grid-template-columns: repeat(2, 1fr) !important;
}
}
.popup-option {
background: #ffffff;
border: 2px solid #e5e7eb;
border-radius: 10px;
padding: 0.75rem;
cursor: pointer;
/* 180ms ease-out: fast enough to feel immediate, slow enough to read as
motion rather than a snap. Only transform and box-shadow animate — both
are compositor properties, so hovering across a grid of options never
triggers layout. */
transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1),
box-shadow 0.18s ease-out,
border-color 0.18s ease-out;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 100px;
position: relative;
z-index: 1;
}
/* A 3.5% lift, not a 35% jump.
This was `transform: scale(1.35)` — the hovered option grew by more than a
third, overflowed the card it sits in, and covered the options either side of
it. On a modal asking someone to pick a stud width, the tile they are reading
was the one obscuring its neighbours. The movement now reads as the card
rising slightly towards the cursor: enough to confirm what is hovered,
nowhere near enough to disturb the grid. */
.popup-option:hover {
border-color: var(--primary-yellow);
box-shadow: 0 8px 20px rgba(17, 24, 39, 0.10), 0 2px 6px rgba(17, 24, 39, 0.06);
transform: translateY(-3px) scale(1.015);
}
.popup-option:focus-visible {
outline: 2px solid var(--primary-yellow);
outline-offset: 2px;
}
/* Motion is decoration here. Anyone who has asked their system for less of it
still gets the colour and shadow change, just not the movement. */
@media (prefers-reduced-motion: reduce) {
.popup-option {
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.popup-option:hover {
transform: none;
}
}
.popup-option.selected,
.popup-option:active {
border-color: var(--primary-yellow);
background: rgba(247, 213, 66, 0.1);
}
.popup-option-selected {
border-color: var(--primary-yellow) !important;
background: rgba(247, 213, 66, 0.12) !important;
box-shadow: 0 0 0 2px var(--primary-yellow), 0 4px 12px rgba(247, 213, 66, 0.25) !important;
}
.popup-option h4 {
margin: 0.4rem 0 0.2rem 0;
color: var(--dark-navy);
font-size: 1.1rem;
font-weight: 700;
}
.popup-option p {
margin: 0;
color: var(--text-gray);
font-size: 0.9rem;
line-height: 1.4;
}
.popup-option .popup-option-image {
width: 100%;
height: auto;
max-height: 150px;
object-fit: contain;
border-radius: 6px;
margin-bottom: 0;
background: #ffffff;
}
/* Image wrapper with magnifying glass */
.popup-img-wrap {
position: relative;
width: 100%;
margin-bottom: 0.4rem;
background: #ffffff;
border-radius: 6px;
}
.popup-img-zoom {
position: absolute;
bottom: 6px;
right: 6px;
width: 28px;
height: 28px;
border-radius: 50%;
border: none;
background: rgba(0, 0, 0, 0.55);
color: #fff;
font-size: 12px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.2s ease, background 0.2s ease;
z-index: 5;
}
.popup-option:hover .popup-img-zoom {
opacity: 1;
}
.popup-img-zoom:hover {
background: rgba(0, 0, 0, 0.8);
transform: scale(1.1);
}
/* Full-size image lightbox */
.img-lightbox-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.85);
z-index: 9999999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.25s ease;
}
.img-lightbox-overlay.visible {
opacity: 1;
}
.img-lightbox-inner {
position: relative;
max-width: 80vw;
max-height: 75vh;
}
.img-lightbox-img {
max-width: 80vw;
max-height: 75vh;
object-fit: contain;
border-radius: 12px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
background: #fff;
padding: 1.5rem;
}
.img-lightbox-close {
position: absolute;
top: -12px;
right: -12px;
width: 36px;
height: 36px;
border-radius: 50%;
border: none;
background: #fff;
color: #333;
font-size: 16px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
transition: transform 0.15s ease;
}
.img-lightbox-close:hover {
transform: scale(1.1);
}
/* 4-option grid: square cards instead of wide rectangles */
.popup-options-grid[data-count="4"] {
grid-template-columns: repeat(2, 1fr);
max-width: 550px;
margin: 0 auto;
}
/* Tabbed popup (e.g., Block wall thickness) */
.tabbed-popup-tabs {
display: flex;
gap: 0;
border-bottom: 2px solid #e5e7eb;
margin-bottom: 1.25rem;
}
.tabbed-popup-tab {
flex: 1;
padding: 0.75rem 1rem;
text-align: center;
font-weight: 600;
font-size: 0.95rem;
color: var(--text-gray);
cursor: pointer;
border-bottom: 3px solid transparent;
transition: all 0.2s ease;
background: transparent;
user-select: none;
}
.tabbed-popup-tab:hover {
color: var(--dark-navy);
background: rgba(247, 213, 66, 0.05);
}
.tabbed-popup-tab.active {
color: var(--dark-navy);
border-bottom-color: var(--primary-yellow);
background: rgba(247, 213, 66, 0.08);
}
.tabbed-popup-panel {
display: none;
}
.tabbed-popup-panel.active {
display: block;
}
/* Badge for popular/featured options */
.popup-option .badge {
position: absolute;
top: 8px;
right: 8px;
background: #dc2626;
color: white;
font-size: 0.65rem;
font-weight: 600;
padding: 2px 8px;
border-radius: 4px;
text-transform: uppercase;
}
.popup-option {
position: relative;
}
/* Config option with popup type */
.config-option[data-type="popup"] {
position: relative;
}
.config-option[data-type="popup"] i {
margin-left: 0.5rem;
font-size: 0.9em;
opacity: 0.7;
}
/* Sub-options in Admin Panel */
.suboptions-section {
margin-top: 1.5rem;
padding: 1rem;
background: var(--light-gray);
border-radius: 8px;
}
.suboptions-section h4 {
margin: 0 0 1rem 0;
color: var(--dark-navy);
}
.sub-option-item {
background: var(--white);
border: 1px solid #e0e0e0;
border-radius: 6px;
padding: 1rem;
margin-bottom: 1rem;
}
.sub-option-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
}
.sub-option-header h5 {
margin: 0;
color: var(--dark-navy);
font-size: 1rem;
}
.remove-suboption-btn {
background: #dc3545;
color: white;
border: none;
padding: 0.25rem 0.5rem;
border-radius: 4px;
cursor: pointer;
font-size: 0.8rem;
}
.remove-suboption-btn:hover {
background: #c82333;
}
.sub-option-fields {
display: grid;
gap: 0.75rem;
}
.sub-option-fields input,
.sub-option-fields textarea {
width: 100%;
padding: 0.5rem;
border: 1px solid #ddd;
border-radius: 4px;
font-family: inherit;
}
.sub-option-fields textarea {
resize: vertical;
min-height: 60px;
}
.suboption-pricing {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
}
.add-suboption-btn {
background: var(--primary-yellow);
color: var(--dark-navy);
border: none;
padding: 0.75rem 1.5rem;
border-radius: 6px;
cursor: pointer;
font-weight: 500;
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 1rem;
}
.add-suboption-btn:hover {
background: #e6c453;
}
/* Tabbed Popup Editor */
.tabbed-popup-editor {
margin: 12px 0;
}
.tabbed-editor-header {
background: #f0f7ff;
border: 1px solid #b3d4fc;
border-radius: 8px 8px 0 0;
padding: 12px 16px;
}
.tabbed-editor-title {
font-weight: 700;
color: #1a56db;
font-size: 0.95rem;
}
.tabbed-editor-summary {
color: #6b7280;
font-size: 0.82rem;
margin-top: 2px;
}
.tabbed-editor-tabs {
border: 1px solid #e5e7eb;
border-top: none;
border-radius: 0 0 8px 8px;
overflow: hidden;
}
.tabbed-editor-tab-block {
border-bottom: 1px solid #e5e7eb;
}
.tabbed-editor-tab-block:last-child {
border-bottom: none;
}
.tab-block-header {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 14px;
background: #fafbfc;
cursor: pointer;
user-select: none;
}
.tab-block-header:hover {
background: #f3f4f6;
}
.tab-block-toggle {
color: #6b7280;
width: 16px;
text-align: center;
flex-shrink: 0;
}
.tab-block-name-wrap {
display: flex;
align-items: center;
gap: 6px;
flex: 1;
}
.tab-block-name-wrap label {
font-size: 0.82rem;
font-weight: 600;
color: #374151;
white-space: nowrap;
}
.tab-name-input {
flex: 1;
padding: 4px 8px;
border: 1px solid #d1d5db;
border-radius: 4px;
font-size: 0.85rem;
}
.tab-block-count {
font-size: 0.78rem;
color: #9ca3af;
white-space: nowrap;
}
.tab-remove-btn {
background: none;
border: none;
color: #ef4444;
cursor: pointer;
padding: 4px;
border-radius: 4px;
font-size: 0.85rem;
}
.tab-remove-btn:hover {
background: #fef2f2;
}
.tab-block-body {
padding: 12px 16px;
background: #fff;
}
.tab-suboptions-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.tab-suboption-item {
border: 1px solid #e5e7eb;
border-radius: 6px;
padding: 10px 12px;
background: #fafbfc;
}
.tab-sub-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 8px;
}
.tab-sub-label {
font-weight: 600;
font-size: 0.82rem;
color: #374151;
}
.tab-sub-remove-btn {
background: none;
border: none;
color: #ef4444;
cursor: pointer;
padding: 2px 4px;
font-size: 0.8rem;
}
.tab-sub-fields {
display: flex;
flex-direction: column;
gap: 6px;
}
.tab-sub-fields input[type="text"],
.tab-sub-fields textarea,
.tab-sub-fields input[type="number"] {
padding: 6px 10px;
border: 1px solid #d1d5db;
border-radius: 4px;
font-size: 0.85rem;
width: 100%;
box-sizing: border-box;
}
.tab-sub-fields textarea {
min-height: 40px;
resize: vertical;
}
.tab-sub-image-field label {
font-size: 0.82rem;
font-weight: 500;
color: #6b7280;
}
.tab-sub-pricing {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
}
.tab-add-suboption-btn {
background: var(--primary-yellow);
color: var(--dark-navy);
border: none;
padding: 6px 14px;
border-radius: 5px;
cursor: pointer;
font-weight: 500;
font-size: 0.82rem;
display: inline-flex;
align-items: center;
gap: 5px;
margin-top: 8px;
}
.tab-add-suboption-btn:hover {
background: #e6c453;
}
.add-tab-btn {
background: #1a56db;
color: #fff;
border: none;
padding: 8px 16px;
border-radius: 6px;
cursor: pointer;
font-weight: 500;
font-size: 0.85rem;
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 10px;
}
.add-tab-btn:hover {
background: #1e40af;
}
.tabbed-editor-actions {
margin-top: 4px;
}
/* ===== REMOVED OLD MODAL RULES - SEE NEW AGGRESSIVE FIX ABOVE ===== */
/* Prevent body scrolling when modal is open */
body.modal-open {
overflow: hidden !important;
}
/* Fix for admin page modals specifically */
.admin-body .modal {
position: fixed !important;
inset: 0 !important;
}
/* REMOVED - See SIMPLE MODAL FIX section at end of file */
/* Ensure Clear Cart modal from cart page is centered */
.clear-cart-modal {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
display: none;
justify-content: center !important;
align-items: center !important;
z-index: 10000 !important;
}
/* Style for sub-option images in popup */
.popup-option-image {
width: 100%;
height: auto;
max-height: 150px;
object-fit: contain;
border-radius: 8px;
margin-bottom: 8px;
}
/* Sub-option image field styling */
.sub-option-image-field {
margin: 10px 0;
}
.sub-option-image-field label {
display: block;
font-weight: 600;
margin-bottom: 5px;
}
.sub-option-image-field input[type="file"] {
width: 100%;
padding: 5px;
border: 1px solid var(--border-gray);
border-radius: 4px;
}
.sub-option-image-field small {
display: block;
color: var(--text-gray);
font-size: 0.85em;
margin-top: 5px;
}
.suboption-preview {
display: block;
margin-top: 10px;
border-radius: 4px;
border: 1px solid var(--border-gray);
}
/* ===== REMOVED OLD POSITIONING RULES - SEE AGGRESSIVE MODAL FIX ===== */
/* ===== FIX ADMIN PAGE LAYOUT ISSUES ===== */
/* Remove horizontal scroll and fix vertical scroll */
html.admin-html {
overflow-x: hidden !important; /* Only prevent horizontal scroll */
overflow-y: auto !important; /* Allow vertical scroll when needed */
width: 100% !important;
max-width: 100% !important;
height: 100% !important;
}
body.admin-body {
overflow-x: hidden !important;
width: 100% !important;
max-width: 100% !important;
margin-top: 0 !important;
padding-top: 0 !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
min-height: 100vh !important;
background-color: #F8F9FA !important; /* Match admin background color */
}
/* Ensure admin main content doesn't overflow */
.admin-main {
overflow-x: hidden !important;
max-width: calc(100vw - 250px) !important;
box-sizing: border-box !important;
padding-bottom: 2rem !important; /* Add bottom padding for content */
}
/* Fix any wide tables or content */
.admin-main table {
max-width: 100% !important;
table-layout: fixed !important;
}
.admin-main .admin-section-header {
flex-wrap: wrap !important;
gap: 1rem !important;
}
/* Ensure all admin sections don't overflow */
.admin-section {
overflow-x: hidden !important;
max-width: 100% !important;
padding-top: 3.5rem !important; /* Increased padding to prevent content being cut off by header */
}
/* Ensure first elements in admin sections have proper spacing */
.admin-section > *:first-child {
margin-top: 0 !important;
}
.admin-section .customers-header,
.admin-section .dashboard-stats,
.admin-section .orders-stats {
padding-top: 0 !important; /* Remove additional padding since parent has enough */
}
/* Fix modal buttons in header that might cause overflow */
.admin-section-header > div {
flex-wrap: wrap !important;
max-width: 100% !important;
}
/* Remove any white box at top */
body.admin-body::before,
html.admin-html::before,
.admin-header::before {
display: none !important;
}
/* Ensure no elements push outside viewport */
.admin-main * {
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Specific fix for product tabs */
.product-tabs {
overflow-x: auto !important;
max-width: 100% !important;
-webkit-overflow-scrolling: touch !important;
}
/* Fix for option grids */
.option-grid {
max-width: 100% !important;
}
/* Fix for long text in tables */
.admin-option-item,
.customers-table td,
.orders-table td {
word-break: break-word !important;
overflow-wrap: break-word !important;
}
/* Responsive adjustments for admin */
@media (max-width: 1200px) {
.admin-main {
max-width: calc(100vw - 250px) !important;
padding: 1rem !important;
}
}
@media (max-width: 768px) {
.admin-main {
max-width: 100vw !important;
padding: 1rem !important;
}
.admin-section-header > div {
width: 100% !important;
justify-content: flex-start !important;
}
.admin-section-header button {
margin: 0.5rem 0 !important;
}
}
/* ===== SIMPLE MODAL FIX - VIEWPORT CENTERING ===== */
/* Admin edit option modal */
#edit-option-modal {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
background: rgba(0, 0, 0, 0.8) !important;
z-index: 999999 !important;
display: none;
}
#edit-option-modal .modal-content {
position: fixed !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
width: 600px !important;
max-width: 90% !important;
max-height: 90vh !important;
overflow-y: auto !important;
background: white !important;
border-radius: 12px !important;
z-index: 1000000 !important;
}
/* Admin add option modal */
#add-option-modal {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
background: rgba(0, 0, 0, 0.8) !important;
z-index: 999999 !important;
display: none;
}
#add-option-modal .modal-content {
position: fixed !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
width: 600px !important;
max-width: 90% !important;
max-height: 90vh !important;
overflow-y: auto !important;
background: white !important;
border-radius: 12px !important;
z-index: 1000000 !important;
}
/* All other modals */
.modal {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
background: rgba(0, 0, 0, 0.8) !important;
z-index: 999999 !important;
display: none;
}
.modal .modal-content,
.modal .option-modal-content {
position: fixed !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
max-width: 90% !important;
max-height: 90vh !important;
overflow-y: auto !important;
background: white !important;
border-radius: 12px !important;
z-index: 1000000 !important;
}
/* Popup options content should NOT be fixed positioned - it's inside modal-content */
.modal-body.popup-options-content {
position: relative !important;
transform: none !important;
top: auto !important;
left: auto !important;
padding: 1.5rem !important;
}
/* Body when modal is open - DO NOT set top/position here, let JS handle it */
/* The lockBodyScroll() function sets position:fixed and top dynamically
based on scroll position to prevent the page from jumping */
body.modal-open {
overflow: hidden !important;
/* position, top, width handled by JavaScript lockBodyScroll() */
}
/* ABSOLUTE FINAL OVERRIDE - Force modal CONTAINERS (ids ending in "-modal") to be fixed.
Deliberately [id$="-modal"], NOT [id*="modal"]: the old contains-match also captured
inner elements like #hw-modal-title / #hw-modal-img and pinned them all to one fixed
spot, destroying the hardware quick-view layout. */
[id$="-modal"] {
position: fixed !important;
}
/* Ensure all modal content is also fixed positioned */
[id$="-modal"] > div,
[id$="-modal"] .modal-content,
[id$="-modal"] [class*="modal-content"] {
position: fixed !important;
}
/* Remove ALL transforms from body and html that break fixed positioning */
html,
body,
.admin-html,
.admin-body {
transform: none !important;
filter: none !important;
perspective: none !important;
will-change: auto !important;
contain: none !important;
backdrop-filter: none !important;
}
/* Cart item pricing styles */
.price-unavailable {
color: #9CA3AF;
font-style: italic;
font-size: 0.9rem;
}
/* Promo Code Section */
.promo-code-section {
margin: 1.5rem 0;
padding: 1rem 0;
border-top: 1px solid var(--border-gray);
border-bottom: 1px solid var(--border-gray);
}
.promo-code-input {
display: flex;
gap: 0.5rem;
}
#promo-code-input {
flex: 1;
padding: 0.75rem;
border: 2px solid var(--border-gray);
border-radius: 6px;
font-size: 1rem;
text-transform: uppercase;
}
#promo-code-input:focus {
outline: none;
border-color: var(--primary-yellow);
}
#promo-code-input:disabled {
background: var(--light-gray);
cursor: not-allowed;
}
.apply-promo-btn {
padding: 0.75rem 1.5rem;
background: var(--primary-yellow);
color: var(--dark-navy);
border: none;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.apply-promo-btn:hover {
background: #e6c63d;
transform: translateY(-2px);
}
.promo-message {
margin-top: 0.5rem;
padding: 0.5rem;
border-radius: 4px;
font-size: 0.875rem;
display: none;
}
.promo-message.success {
display: block;
background: #D1FAE5;
color: #065F46;
border: 1px solid #A7F3D0;
}
.promo-message.error {
display: block;
background: #FEE2E2;
color: #991B1B;
border: 1px solid #FECACA;
}
.promo-message.info {
display: block;
background: #E0E7FF;
color: #3730A3;
border: 1px solid #C7D2FE;
}
.discount-row {
color: #059669;
font-weight: 600;
}
.discount-amount {
color: #059669;
}
/* Admin Promo Code Display */
.promo-code-item {
border: 1px solid var(--border-gray);
border-radius: 8px;
padding: 1.5rem;
background: var(--white);
margin-bottom: 1rem;
transition: box-shadow 0.3s ease;
position: relative;
}
.promo-code-item:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.promo-code-item.expired {
opacity: 0.6;
background: #F9FAFB;
}
.promo-info h4 {
font-size: 1.1rem;
color: var(--dark-navy);
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.expired-badge {
background: #EF4444;
color: white;
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-size: 0.75rem;
font-weight: 600;
}
.promo-details {
display: flex;
gap: 1.5rem;
margin-top: 0.75rem;
flex-wrap: wrap;
}
.promo-details span {
font-size: 0.875rem;
color: var(--text-gray);
}
.promo-value {
background: var(--primary-yellow);
color: var(--dark-navy);
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-weight: 600;
}
.promo-minimum {
color: #F59E0B;
}
.promo-usage {
color: #3B82F6;
}
.promo-code-item .delete-btn {
position: absolute;
top: 1rem;
right: 1rem;
}
/* Order Details Modal */
.order-details-modal {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
background: rgba(0, 0, 0, 0.8) !important;
z-index: 999999 !important;
display: none;
}
.order-details-modal .modal-content {
position: fixed !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
width: 800px !important;
max-width: 90% !important;
max-height: 90vh !important;
overflow-y: auto !important;
background: white !important;
border-radius: 12px !important;
z-index: 1000000 !important;
}
.order-details-header {
padding: 2rem;
border-bottom: 2px solid var(--border-gray);
position: relative;
}
.order-details-header h3 {
font-size: 1.5rem;
color: var(--dark-navy);
margin-bottom: 0.5rem;
}
.order-details-header .order-id {
color: var(--text-gray);
font-size: 0.875rem;
}
.order-details-close {
position: absolute;
top: 1.5rem;
right: 1.5rem;
font-size: 1.5rem;
color: var(--text-gray);
cursor: pointer;
transition: color 0.3s ease;
background: none;
border: none;
width: 2rem;
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
.order-details-close:hover {
color: var(--dark-navy);
background: var(--light-gray);
}
.order-details-body {
padding: 2rem;
}
.order-section {
margin-bottom: 2rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--border-gray);
}
.order-section:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.order-section h4 {
font-size: 1.1rem;
color: var(--dark-navy);
margin-bottom: 1rem;
font-weight: 600;
}
.order-info-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.order-info-item {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.order-info-label {
font-size: 0.875rem;
color: var(--text-gray);
font-weight: 500;
}
.order-info-value {
font-size: 1rem;
color: var(--dark-navy);
font-weight: 500;
}
.order-items-table {
width: 100%;
margin-top: 1rem;
}
.order-items-table thead {
background: #F8F9FA;
}
.order-items-table th,
.order-items-table td {
padding: 0.75rem;
text-align: left;
}
.order-items-table th {
font-weight: 600;
font-size: 0.875rem;
color: var(--dark-navy);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.order-items-table tbody tr {
border-bottom: 1px solid var(--border-gray);
}
.order-items-table tbody tr:last-child {
border-bottom: none;
}
.order-items-table.supplier thead {
background: #FEF3C7;
}
.order-items-table.supplier tbody tr:nth-child(even) {
background: #FFFBEB;
}
.invoice-actions {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
margin-top: 0.5rem;
}
.invoice-btn {
background: #111827;
color: #fff;
border: none;
border-radius: 6px;
padding: 0.6rem 1.2rem;
font-weight: 500;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 0.4rem;
}
.invoice-btn.secondary {
background: #E5E7EB;
color: #111827;
}
.invoice-btn:hover {
opacity: 0.9;
}
.profit-positive {
color: #059669;
font-weight: 600;
}
.profit-negative {
color: #B91C1C;
font-weight: 600;
}
.order-item-name {
font-weight: 500;
color: var(--dark-navy);
}
.order-item-sku {
font-size: 0.875rem;
color: var(--text-gray);
}
.order-pricing-summary {
background: #F8F9FA;
padding: 1.5rem;
border-radius: 8px;
margin-top: 1rem;
}
.pricing-row {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.75rem;
}
.pricing-row:last-child {
margin-bottom: 0;
padding-top: 0.75rem;
border-top: 2px solid var(--border-gray);
}
.pricing-label {
font-weight: 500;
color: var(--text-gray);
}
.pricing-value {
font-weight: 600;
color: var(--dark-navy);
}
.pricing-row.total .pricing-label,
.pricing-row.total .pricing-value {
font-size: 1.1rem;
color: var(--dark-navy);
}
.order-status-badge {
display: inline-block;
padding: 0.5rem 1rem;
border-radius: 6px;
font-weight: 600;
font-size: 0.875rem;
text-transform: capitalize;
}
.order-status-badge.pending {
background: #FEF3C7;
color: #92400E;
}
.order-status-badge.processing {
background: #DBEAFE;
color: #1E40AF;
}
.order-status-badge.shipped {
background: #E0E7FF;
color: #3730A3;
}
.order-status-badge.delivered {
background: #D1FAE5;
color: #065F46;
}
.order-status-badge.cancelled {
background: #FEE2E2;
color: #991B1B;
}
@media (max-width: 768px) {
.order-details-modal .modal-content {
width: 95% !important;
margin: 1rem;
}
.order-info-grid {
grid-template-columns: 1fr;
}
.order-details-header {
padding: 1.5rem;
}
.order-details-body {
padding: 1.5rem;
}
.order-items-table {
font-size: 0.875rem;
}
.order-items-table th,
.order-items-table td {
padding: 0.5rem;
}
}
/* Mandatory Category Styling */
.mandatory-indicator {
color: #EF4444;
font-weight: bold;
font-size: 1.1em;
margin-left: 4px;
}
/* Sub-option selection image + name inside config option button */
.config-option-sel-wrap {
display: flex;
align-items: center;
gap: 6px;
justify-content: center;
}
.config-option-sel-img {
height: 48px;
width: auto;
max-width: 60%;
object-fit: contain;
border-radius: 4px;
flex-shrink: 0;
}
.config-option.selected .config-option-sel-img {
height: 52px;
}
.config-option-sel-name {
font-size: 0.75rem;
line-height: 1.2;
word-break: break-word;
text-align: left;
}
.config-section-divider {
display: flex;
align-items: center;
gap: 1rem;
margin: 0.75rem 0 0.25rem 0;
}
.config-section-divider span {
font-size: 0.85rem;
font-weight: 700;
color: var(--primary-yellow);
text-transform: uppercase;
letter-spacing: 1.5px;
white-space: nowrap;
}
.config-section-divider::after {
content: '';
flex: 1;
height: 2px;
background: linear-gradient(to right, var(--primary-yellow), transparent);
border-radius: 1px;
}
.config-section.mandatory-category {
border: 2px solid #FEE2E2;
background: linear-gradient(135deg, #FEF2F2, #FFFFFF);
border-radius: 8px;
padding: 1rem;
margin-bottom: 1.5rem;
}
.config-section.mandatory-category h3 {
color: #EF4444;
margin-bottom: 1rem;
}
.config-section.mandatory-category:hover {
border-color: #EF4444;
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.1);
}
/* Admin mandatory badge styling */
.mandatory-badge {
background: #EF4444;
color: white;
font-size: 0.7rem;
font-weight: bold;
padding: 2px 6px;
border-radius: 3px;
margin-left: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Search Styles */
.search-box {
position: relative;
/* Preferred 220px, but allowed to shrink so the header absorbs a wide
account chip here rather than colliding or overflowing. */
flex: 0 1 220px;
min-width: 0;
}
.search-box input {
width: 100%;
min-width: 0;
padding: 0.55rem 2.5rem 0.55rem 1rem;
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 999px;
background: rgba(255, 255, 255, 0.1);
transition: border 0.2s ease, box-shadow 0.2s ease, width 0.2s ease, background 0.2s ease;
font-size: 0.92rem;
color: #ffffff;
}
.search-box input:focus {
border-color: #ffffff;
background: #ffffff;
color: var(--dark-navy);
box-shadow: 0 10px 30px rgba(15, 23, 42, 0.25);
outline: none;
/* No width change on focus. Growing the input to 260px pushed the header
past its track the moment the field was clicked, which is the same
overflow the account chip causes - just triggered by the user. The box
keeps its flex basis and simply changes colour. */
}
.search-box input::placeholder {
color: rgba(255, 255, 255, 0.7);
}
.search-box input:focus::placeholder {
color: transparent;
}
.search-box button {
position: absolute;
right: 6px;
top: 50%;
transform: translateY(-50%);
width: 32px;
height: 32px;
border: none;
border-radius: 50%;
background: var(--dark-navy);
color: var(--white);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 0.85rem;
transition: background 0.2s ease;
}
.search-box button:hover {
background: var(--primary-yellow);
color: var(--dark-navy);
}
/* Search Dropdown */
.search-dropdown {
position: absolute;
top: calc(100% + 8px);
left: 0;
right: 0;
background: var(--white);
border-radius: 12px;
box-shadow: 0 8px 25px rgba(45, 49, 66, 0.15);
border: 1px solid var(--border-gray);
max-height: 400px;
overflow-y: auto;
z-index: 1000;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
}
.search-dropdown.show {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.search-dropdown-header {
padding: 0.75rem 1rem;
border-bottom: 1px solid var(--border-gray);
background: var(--light-gray);
border-radius: 12px 12px 0 0;
}
.search-dropdown-header h4 {
margin: 0;
font-size: 0.9rem;
color: var(--text-gray);
font-weight: 500;
}
.search-results-list {
padding: 0.5rem 0;
}
.search-result-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
cursor: pointer;
transition: all 0.2s ease;
border-bottom: 1px solid transparent;
}
.search-result-item:hover {
background: var(--light-gray);
border-bottom-color: var(--border-gray);
}
.search-result-item:last-child {
border-bottom: none;
}
.search-result-item.sku-result {
background: linear-gradient(135deg, var(--primary-yellow), #fde047);
border: 1px solid var(--primary-yellow);
border-radius: 8px;
margin: 0.25rem 0.5rem;
}
.search-result-item.sku-result:hover {
background: linear-gradient(135deg, #fde047, var(--primary-yellow));
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(247, 213, 66, 0.3);
}
.search-result-item.sku-result .search-result-title {
color: var(--dark-navy);
font-weight: 700;
}
.search-result-item.sku-result .search-result-category {
color: var(--dark-navy);
font-weight: 600;
opacity: 0.8;
}
.search-result-image {
width: 40px;
height: 40px;
border-radius: 6px;
object-fit: cover;
background: var(--light-gray);
border: 1px solid var(--border-gray);
}
.search-result-content {
flex: 1;
min-width: 0;
}
.search-result-title {
font-weight: 600;
color: var(--dark-navy);
margin: 0 0 0.25rem 0;
font-size: 0.9rem;
line-height: 1.3;
}
.search-result-category {
font-size: 0.8rem;
color: var(--text-gray);
margin: 0;
}
.search-result-price {
font-weight: 600;
color: var(--primary-yellow);
font-size: 0.9rem;
white-space: nowrap;
}
.search-no-results {
padding: 2rem 1rem;
text-align: center;
color: var(--text-gray);
}
.search-no-results i {
font-size: 2rem;
margin-bottom: 0.5rem;
opacity: 0.5;
}
.search-no-results h4 {
margin: 0 0 0.5rem 0;
color: var(--dark-navy);
}
.search-no-results p {
margin: 0;
font-size: 0.9rem;
}
.search-loading {
padding: 1.5rem;
text-align: center;
color: var(--text-gray);
}
.search-loading i {
animation: spin 1s linear infinite;
margin-right: 0.5rem;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
/* Responsive search dropdown */
@media (max-width: 768px) {
.search-dropdown {
left: -50px;
right: -50px;
max-height: 300px;
}
.search-result-item {
padding: 1rem;
}
.search-result-image {
width: 35px;
height: 35px;
}
}
/* ==========================================
GROUP MANAGEMENT STYLES
========================================== */
.groups-overview {
margin-bottom: 2rem;
}
.groups-stats-compact {
display: flex;
gap: 2rem;
margin-bottom: 1.5rem;
padding: 1rem;
background: var(--light-bg);
border-radius: 8px;
border: 1px solid var(--border-gray);
}
.groups-stats-compact span {
color: var(--text-gray);
font-size: 0.95rem;
}
.groups-stats-compact strong {
color: var(--dark-navy);
font-size: 1.1rem;
}
.groups-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
.group-card {
background: white;
border: 2px solid var(--border-gray);
border-radius: 12px;
padding: 1.5rem;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.group-card:hover {
border-color: var(--primary-yellow);
box-shadow: 0 4px 16px rgba(0,0,0,0.1);
transform: translateY(-2px);
}
.group-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 1rem;
}
.group-header h4 {
margin: 0;
color: var(--dark-navy);
font-size: 1.2rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.default-badge {
background: var(--primary-yellow);
color: var(--dark-navy);
padding: 0.25rem 0.5rem;
border-radius: 4px;
font-size: 0.75rem;
font-weight: bold;
text-transform: uppercase;
}
.group-actions {
display: flex;
gap: 0.5rem;
}
.group-actions .edit-btn {
background: var(--primary-yellow);
border: none;
border-radius: 6px;
padding: 0.5rem;
cursor: pointer;
transition: all 0.2s ease;
color: var(--dark-navy);
}
.group-actions .edit-btn:hover {
background: #e6c445;
transform: scale(1.1);
}
.group-description {
color: var(--text-gray);
margin-bottom: 1rem;
line-height: 1.4;
min-height: 1.4em;
}
.group-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
margin-bottom: 1rem;
}
.stat-item {
text-align: center;
padding: 0.75rem;
background: var(--light-bg);
border-radius: 8px;
}
.stat-label {
display: block;
font-size: 0.85rem;
color: var(--text-gray);
margin-bottom: 0.25rem;
}
.stat-value {
display: block;
font-size: 1.1rem;
font-weight: bold;
color: var(--dark-navy);
}
.pricing-preview {
text-align: center;
padding: 0.75rem;
background: linear-gradient(135deg, var(--primary-yellow)10%, var(--light-bg)90%);
border-radius: 8px;
border: 1px solid var(--border-gray);
}
.pricing-preview small {
color: var(--dark-navy);
font-weight: 600;
}
.group-users-section {
margin-top: 3rem;
padding: 2rem;
background: white;
border-radius: 12px;
border: 2px solid var(--border-gray);
}
.group-users-section h3 {
margin-top: 0;
margin-bottom: 1.5rem;
color: var(--dark-navy);
border-bottom: 2px solid var(--primary-yellow);
padding-bottom: 0.5rem;
}
.user-assignment-controls {
display: grid;
grid-template-columns: 1fr 1fr auto;
gap: 1rem;
margin-bottom: 2rem;
align-items: end;
}
.user-assignment-controls .form-control {
padding: 0.75rem;
border: 2px solid var(--border-gray);
border-radius: 8px;
font-size: 1rem;
transition: border-color 0.3s ease;
}
.user-assignment-controls .form-control:focus {
outline: none;
border-color: var(--primary-yellow);
box-shadow: 0 0 0 3px rgba(247, 213, 66, 0.1);
}
.assignments-table {
display: grid;
gap: 0.5rem;
}
.assignments-header {
display: grid;
grid-template-columns: 2fr 1fr auto;
gap: 1rem;
padding: 1rem;
background: var(--dark-navy);
color: white;
border-radius: 8px;
font-weight: bold;
}
.assignment-row {
display: grid;
grid-template-columns: 2fr 1fr auto;
gap: 1rem;
padding: 1rem;
background: var(--light-bg);
border-radius: 8px;
border: 1px solid var(--border-gray);
transition: all 0.2s ease;
}
.assignment-row:hover {
background: white;
border-color: var(--primary-yellow);
}
.user-info strong {
display: block;
color: var(--dark-navy);
margin-bottom: 0.25rem;
}
.user-info small {
color: var(--text-gray);
font-size: 0.85rem;
}
.group-info {
align-self: center;
font-weight: 600;
color: var(--dark-navy);
}
.assignment-actions {
display: flex;
gap: 0.5rem;
align-items: center;
}
.remove-btn {
background: #ef4444;
border: none;
border-radius: 4px;
padding: 0.5rem;
color: white;
cursor: pointer;
transition: all 0.2s ease;
}
.remove-btn:hover {
background: #dc2626;
transform: scale(1.1);
}
.no-assignments {
text-align: center;
color: var(--text-gray);
font-style: italic;
padding: 2rem;
background: var(--light-bg);
border-radius: 8px;
border: 2px dashed var(--border-gray);
}
/* Pricing section in modals */
.pricing-section {
margin-top: 1.5rem;
padding: 1.5rem;
background: var(--light-bg);
border-radius: 8px;
border: 1px solid var(--border-gray);
}
.pricing-section h4 {
margin-top: 0;
margin-bottom: 1rem;
color: var(--dark-navy);
}
.pricing-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-bottom: 1rem;
}
.pricing-note {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem;
background: rgba(247, 213, 66, 0.1);
border-radius: 6px;
border: 1px solid var(--primary-yellow);
}
.pricing-note i {
color: var(--primary-yellow);
}
.pricing-note span {
font-size: 0.9rem;
color: var(--dark-navy);
}
/* Per-Product Pricing Styles */
.per-product-pricing-section {
margin-top: 1.5rem;
padding: 1.5rem;
background: var(--light-bg);
border-radius: 8px;
border: 1px solid var(--border-gray);
}
.per-product-pricing-section h4 {
margin-top: 0;
margin-bottom: 0.5rem;
color: var(--dark-navy);
border-bottom: 2px solid var(--primary-yellow);
padding-bottom: 0.5rem;
}
.section-description {
font-size: 0.9rem;
color: var(--text-gray);
margin-bottom: 1rem;
}
.product-pricing-controls {
display: flex;
gap: 1rem;
align-items: center;
margin-bottom: 1.5rem;
padding: 1rem;
background: var(--white);
border-radius: 6px;
border: 1px solid var(--border-gray);
}
.product-pricing-controls select {
flex: 1;
padding: 0.5rem;
border: 1px solid var(--border-gray);
border-radius: 4px;
font-size: 0.9rem;
}
.product-pricing-controls select optgroup {
font-weight: bold;
color: var(--dark-navy);
background: var(--light-bg);
padding: 0.25rem;
}
.product-pricing-controls select option {
padding: 0.25rem 0.5rem;
color: var(--text-gray);
}
.add-product-pricing-btn {
background: var(--primary-yellow);
color: var(--dark-navy);
border: none;
padding: 0.6rem 1rem;
border-radius: 4px;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
}
.add-product-pricing-btn:hover {
background: #e6c200;
transform: translateY(-1px);
}
.product-pricing-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.no-product-pricing {
text-align: center;
color: var(--text-gray);
font-style: italic;
padding: 2rem;
background: var(--white);
border-radius: 6px;
border: 1px dashed var(--border-gray);
}
.product-pricing-item {
background: var(--white);
border: 1px solid var(--border-gray);
border-radius: 8px;
padding: 1rem;
position: relative;
}
.product-info {
margin-bottom: 1rem;
}
.product-info h5 {
margin: 0 0 0.25rem 0;
color: var(--dark-navy);
font-size: 1rem;
}
.product-id {
font-size: 0.75rem;
color: var(--text-gray);
font-family: 'Courier New', monospace;
background: var(--light-bg);
padding: 0.2rem 0.4rem;
border-radius: 4px;
}
.product-pricing-type-section {
margin-bottom: 1.5rem;
}
.product-type-header {
font-size: 0.9rem;
color: var(--dark-navy);
font-weight: 600;
margin: 0 0 0.75rem 0;
padding: 0.5rem 0.75rem;
background: linear-gradient(135deg, var(--primary-yellow), #e6c200);
border-radius: 6px;
border-left: 4px solid var(--dark-navy);
}
.product-pricing-type-items {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.pricing-inputs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
margin-bottom: 1rem;
}
.pricing-input-group {
display: flex;
align-items: center;
gap: 0.5rem;
}
.pricing-input-group label {
font-size: 0.9rem;
color: var(--dark-navy);
font-weight: 600;
min-width: 60px;
}
.pricing-input-group input {
flex: 1;
padding: 0.4rem;
border: 1px solid var(--border-gray);
border-radius: 4px;
font-size: 0.9rem;
text-align: right;
}
.pricing-input-group span {
color: var(--text-gray);
font-weight: 600;
}
.pricing-preview {
font-size: 0.85rem;
color: var(--primary-yellow);
font-weight: 600;
background: rgba(255, 193, 7, 0.1);
padding: 0.5rem;
border-radius: 4px;
border-left: 3px solid var(--primary-yellow);
}
.remove-product-pricing-btn {
position: absolute;
top: 0.75rem;
right: 0.75rem;
background: #ef4444;
color: white;
border: none;
padding: 0.4rem;
border-radius: 4px;
cursor: pointer;
transition: all 0.3s ease;
font-size: 0.8rem;
}
.remove-product-pricing-btn:hover {
background: #dc2626;
transform: scale(1.05);
}
/* Modal enhancements for group management */
.option-modal-content {
max-width: 600px;
}
#create-group-modal .modal-content,
#edit-group-modal .modal-content {
max-width: 700px;
}
/* Account status section in customer edit modal */
.account-status-section {
margin: 1.5rem 0;
padding: 1.5rem;
background: var(--light-bg);
border-radius: 8px;
border: 1px solid var(--border-gray);
}
.account-status-section h4 {
margin-top: 0;
margin-bottom: 1rem;
color: var(--dark-navy);
border-bottom: 2px solid var(--primary-yellow);
padding-bottom: 0.5rem;
}
.current-account-info {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}
.account-badge {
padding: 0.5rem 1rem;
border-radius: 20px;
font-weight: bold;
text-transform: uppercase;
font-size: 0.85rem;
}
.account-badge.basic {
background: #e5e7eb;
color: #374151;
}
.account-badge.contractor {
background: var(--primary-yellow);
color: var(--dark-navy);
}
.account-badge.admin {
background: #dc2626;
color: white;
}
.contractor-request-pending {
display: flex;
align-items: center;
gap: 0.5rem;
color: #f59e0b;
font-weight: 500;
}
.contractor-request-pending i {
animation: pulse 2s infinite;
}
.contractor-approval-section {
margin-top: 1rem;
padding: 1rem;
background: white;
border-radius: 8px;
border: 2px solid #f59e0b;
}
.contractor-approval-section h5 {
margin-top: 0;
margin-bottom: 0.5rem;
color: var(--dark-navy);
font-size: 1rem;
}
.contractor-approval-section p {
margin-top: 0;
margin-bottom: 1rem;
color: var(--dark-navy);
}
/* Account type controls */
.account-type-controls {
margin: 1rem 0;
padding: 1rem;
background: white;
border-radius: 8px;
border: 1px solid var(--border-gray);
}
.account-type-controls label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
color: var(--dark-navy);
}
.account-type-select {
width: 100%;
padding: 0.75rem;
border: 2px solid var(--border-gray);
border-radius: 6px;
font-size: 1rem;
background: white;
transition: border-color 0.3s ease;
}
.account-type-select:focus {
outline: none;
border-color: var(--primary-yellow);
box-shadow: 0 0 0 3px rgba(247, 213, 66, 0.1);
}
.account-type-controls small {
display: block;
margin-top: 0.5rem;
color: var(--text-gray);
font-size: 0.9rem;
}
.approval-actions {
display: flex;
gap: 1rem;
}
.custom-modal-btn.success {
background: #10b981;
color: white;
}
.custom-modal-btn.success:hover {
background: #059669;
}
.custom-modal-btn.danger {
background: #ef4444;
color: white;
}
.custom-modal-btn.danger:hover {
background: #dc2626;
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
}
/* Responsive design for group management */
@media (max-width: 768px) {
.groups-grid {
grid-template-columns: 1fr;
}
.user-assignment-controls {
grid-template-columns: 1fr;
}
.assignments-header,
.assignment-row {
grid-template-columns: 1fr;
gap: 0.5rem;
}
.assignments-header {
display: none; /* Hide header on mobile, use card-style layout */
}
.assignment-row {
padding: 1rem;
border-radius: 12px;
}
.user-info,
.group-info {
margin-bottom: 0.5rem;
}
.assignment-actions {
justify-self: end;
}
.pricing-grid {
grid-template-columns: 1fr;
}
.approval-actions {
flex-direction: column;
}
}
/* ==========================================
CART SHARING STYLES
========================================== */
.share-cart-info {
margin-bottom: 1.5rem;
padding: 1rem;
background: var(--light-bg);
border-radius: 8px;
border: 1px solid var(--border-gray);
}
.share-cart-info .cart-summary {
display: flex;
gap: 1rem;
margin-top: 0.5rem;
font-weight: 600;
color: var(--dark-navy);
}
.share-link-section {
margin-bottom: 1.5rem;
}
.share-link-section label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
color: var(--dark-navy);
}
.share-link-group {
display: flex;
gap: 0.5rem;
}
.share-url-input {
flex: 1;
padding: 0.75rem;
border: 2px solid var(--border-gray);
border-radius: 6px;
font-size: 0.9rem;
background: var(--light-bg);
color: var(--dark-navy);
}
.copy-btn {
padding: 0.75rem 1rem;
background: var(--primary-yellow);
color: var(--dark-navy);
border: none;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.copy-btn:hover {
background: #e6c445;
transform: scale(1.05);
}
.share-methods h4 {
margin-top: 0;
margin-bottom: 1rem;
color: var(--dark-navy);
}
.share-buttons {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 0.75rem;
}
.share-btn {
padding: 0.75rem 1rem;
border: none;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
text-decoration: none;
}
.share-btn.email {
background: #3b82f6;
color: white;
}
.share-btn.email:hover {
background: #2563eb;
}
.share-btn.whatsapp {
background: #25d366;
color: white;
}
.share-btn.whatsapp:hover {
background: #22c55e;
}
.share-btn.admin {
background: #dc2626;
color: white;
}
.share-btn.admin:hover {
background: #b91c1c;
}
.share-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
/* Cart sharing button in cart page */
.cart-share-btn {
background: linear-gradient(135deg, var(--primary-yellow), #f4c842);
color: var(--dark-navy);
border: none;
padding: 0.75rem 1.5rem;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 1rem;
}
.cart-share-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(247, 213, 66, 0.3);
}
.cart-share-btn:active {
transform: translateY(0);
}
/* Responsive design for sharing modal */
@media (max-width: 768px) {
.share-link-group {
flex-direction: column;
}
.share-buttons {
grid-template-columns: 1fr;
}
.cart-summary {
flex-direction: column;
gap: 0.5rem;
}
}
/* ==========================================
INVENTORY MANAGEMENT STYLES
========================================== */
.inventory-overview {
margin-bottom: 2rem;
}
.inventory-controls {
display: flex;
justify-content: space-between;
align-items: center;
gap: 2rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.inventory-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin-bottom: 2rem;
}
.inventory-table-container {
overflow-x: auto;
margin-top: 2rem;
}
.inventory-table {
width: 100%;
border-collapse: collapse;
background: white;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.inventory-table th,
.inventory-table td {
padding: 1rem;
text-align: left;
border-bottom: 1px solid var(--border-gray);
}
.inventory-table th {
background: var(--light-gray);
color: var(--dark-navy);
font-weight: 600;
text-transform: uppercase;
font-size: 0.875rem;
letter-spacing: 0.5px;
}
.inventory-table tbody tr:hover {
background: rgba(247, 213, 66, 0.08);
}
.product-info strong {
display: block;
color: var(--dark-navy);
margin-bottom: 0.25rem;
}
.product-info small {
color: var(--text-gray);
text-transform: capitalize;
}
.stock-level {
font-weight: bold;
padding: 0.25rem 0.5rem;
border-radius: 4px;
display: inline-block;
min-width: 50px;
text-align: center;
}
.stock-level.in-stock {
background: #d1fae5;
color: #065f46;
}
.stock-level.low-stock {
background: #fef3c7;
color: #92400e;
}
.stock-level.out-of-stock {
background: #fee2e2;
color: #991b1b;
}
.stock-status {
padding: 0.25rem 0.75rem;
border-radius: 20px;
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
}
.stock-status.in-stock {
background: #10b981;
color: white;
}
.stock-status.low-stock {
background: #f59e0b;
color: white;
}
.stock-status.out-of-stock {
background: #ef4444;
color: white;
}
.inventory-actions {
display: flex;
gap: 0.5rem;
}
/* Configuration options in modals only */
.modal .configuration-options,
.custom-modal .configuration-options {
max-height: 300px;
overflow-y: auto;
border: 1px solid var(--border-gray);
border-radius: 8px;
padding: 1rem;
background: var(--light-bg);
}
.config-category {
margin-bottom: 1.5rem;
}
.config-category:last-child {
margin-bottom: 0;
}
.config-category h4 {
margin: 0 0 0.75rem 0;
color: var(--dark-navy);
font-size: 1rem;
border-bottom: 1px solid var(--border-gray);
padding-bottom: 0.5rem;
}
.config-options {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 0.5rem;
}
.config-option-label {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem;
border: 1px solid var(--border-gray);
border-radius: 6px;
cursor: pointer;
transition: all 0.2s ease;
background: white;
}
.config-option-label:hover {
border-color: var(--primary-yellow);
background: rgba(247, 213, 66, 0.1);
}
.config-option-label input[type="radio"] {
margin: 0;
}
.config-info {
color: var(--text-gray);
font-style: italic;
text-align: center;
padding: 2rem;
margin: 0;
}
/* Stock adjustment controls */
.stock-adjustment {
display: grid;
grid-template-columns: 1fr 1fr 2fr;
gap: 0.5rem;
align-items: end;
}
.stock-adjustment select,
.stock-adjustment input {
padding: 0.5rem;
border: 1px solid var(--border-gray);
border-radius: 4px;
}
/* Readonly info display */
.readonly-info {
padding: 1rem;
background: var(--light-bg);
border-radius: 8px;
border: 1px solid var(--border-gray);
font-size: 0.9rem;
line-height: 1.5;
}
/* Form row layout */
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
/* Responsive design for controls */
@media (max-width: 1024px) {
.orders-controls,
.inventory-controls {
flex-direction: column;
align-items: stretch;
gap: 1rem;
}
.orders-controls .search-controls,
.inventory-controls .search-controls {
justify-content: flex-start;
flex-wrap: wrap;
}
}
@media (max-width: 768px) {
.orders-controls .search-controls,
.inventory-controls .search-controls {
flex-direction: column;
gap: 0.75rem;
}
.orders-controls .search-controls input,
.inventory-controls .search-controls input {
min-width: auto;
width: 100%;
}
.orders-controls .filter-controls,
.inventory-controls .filter-controls {
justify-content: center;
}
}
/* Responsive design for inventory */
@media (max-width: 768px) {
.inventory-stats {
grid-template-columns: 1fr;
}
.inventory-table-container {
font-size: 0.85rem;
}
.inventory-table th,
.inventory-table td {
padding: 0.75rem;
}
.config-options {
grid-template-columns: 1fr;
}
.stock-adjustment {
grid-template-columns: 1fr;
}
.form-row {
grid-template-columns: 1fr;
}
.inventory-actions {
flex-direction: column;
}
}
/* ========================================
Commercial Page - New Layout (Screenshot Match)
======================================== */
/* Configurator Box - Contains image and options */
.configurator-box {
background: #fff;
border: 1px solid var(--border-gray);
border-radius: 12px;
padding: 1.5rem;
margin-bottom: 1.5rem;
}
.configurator-top {
display: grid;
grid-template-columns: 380px 1fr;
gap: 2rem;
}
/* Left side - Product Image */
.config-image-side {
position: sticky;
top: 100px;
align-self: start;
}
.config-image-side img {
width: 100%;
height: auto;
border-radius: 10px;
border: 1px solid var(--border-gray);
min-height: 350px;
object-fit: cover;
}
/* Right side - Configuration Options */
.config-options-side {
display: flex;
flex-direction: column;
gap: 1rem;
max-width: 500px;
}
.config-options-side .config-section {
margin-bottom: 0;
}
.config-options-side .config-section h3 {
font-size: 0.75rem;
font-weight: 600;
color: var(--dark-navy);
margin-bottom: 0.4rem;
text-transform: uppercase;
letter-spacing: 0.03em;
}
/* Radio button style options */
.config-options-side .option-grid {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.config-options-side .config-option {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.35rem 0.6rem;
border: 1px solid var(--border-gray);
border-radius: 18px;
cursor: pointer;
transition: all 0.2s ease;
background: #fff;
font-size: 0.8rem;
}
.config-options-side .config-option::before {
content: '';
width: 12px;
height: 12px;
border: 2px solid #ccc;
border-radius: 50%;
flex-shrink: 0;
transition: all 0.2s ease;
}
.config-options-side .config-option.selected {
border-color: var(--primary-yellow);
background: rgba(247, 213, 66, 0.1);
}
.config-options-side .config-option.selected::before {
border-color: var(--primary-yellow);
background: var(--primary-yellow);
box-shadow: inset 0 0 0 3px #fff;
}
.config-options-side .config-option span {
font-size: 0.8rem;
color: var(--dark-navy);
}
.config-options-side .config-option img {
display: none; /* Hide images in radio style */
}
/* Button style options (for Wall Thickness, Door Opening with icons) */
.config-options-side .option-grid.with-icons .config-option {
flex-direction: column;
padding: 0.75rem 1rem;
border-radius: 8px;
min-width: 70px;
text-align: center;
}
.config-options-side .option-grid.with-icons .config-option::before {
display: none;
}
.config-options-side .option-grid.with-icons .config-option img {
display: block;
width: 40px;
height: 40px;
object-fit: contain;
margin-bottom: 0.25rem;
}
.config-options-side .option-grid.with-icons .config-option i {
font-size: 1.5rem;
margin-bottom: 0.25rem;
color: var(--dark-navy);
}
/* Size selectors */
.config-options-side .size-selector {
display: flex;
gap: 0.5rem;
align-items: center;
}
.config-options-side .size-selector select,
.config-options-side .size-selector input {
padding: 0.5rem 0.75rem;
border: 1px solid var(--border-gray);
border-radius: 6px;
font-size: 0.85rem;
}
/* Dropdown style */
.config-options-side .config-dropdown {
width: 100%;
}
.config-options-side .config-dropdown select {
width: 100%;
padding: 0.6rem 1rem;
border: 1px solid var(--border-gray);
border-radius: 6px;
font-size: 0.9rem;
background: #fff;
cursor: pointer;
}
/* Text input fields for configurator (Width/Height etc.) */
.config-input-field {
display: flex;
flex-direction: column;
gap: 0.35rem;
flex: 1;
min-width: 120px;
}
.config-input-field label {
font-size: 0.85rem;
font-weight: 600;
color: var(--dark-navy);
}
/* ============================================================
HOME REDESIGN — commercial stacked layout, header quote
button, orange CTA, and the new universal footer
============================================================ */
:root {
--accent-orange: #E8732A;
}
/* Header "Quote" button */
.quote-btn {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--primary-yellow);
color: var(--dark-navy);
font-weight: 700;
text-decoration: none;
padding: 0.55rem 1.35rem;
border-radius: 999px;
border: 2px solid var(--primary-yellow);
transition: all 0.2s ease;
white-space: nowrap;
}
.quote-btn:hover {
background: #e6b800;
border-color: #e6b800;
}
/* Commercial Solutions — stacked alternating rows */
.commercial-solutions {
padding: 5rem 0;
background: #ffffff;
}
/* Home page: let the solutions band run wider than the default 1200px container */
.commercial-solutions .container {
max-width: 1500px;
}
.solution-row {
display: flex;
align-items: center;
gap: 3.5rem;
margin-bottom: 4.5rem;
background: transparent; /* airy layout — image + content on white */
overflow: visible; /* let the blue badge overhang the image */
}
.solution-row:last-child {
margin-bottom: 0;
}
.solution-row.reverse {
flex-direction: row-reverse;
}
.solution-image {
position: relative;
flex: 1 1 0;
min-width: 0;
align-self: stretch;
}
.solution-image img {
width: 100%;
height: 100%;
min-height: 360px;
object-fit: cover;
display: block;
/* One heavily-rounded corner tapering to tighter corners diagonally (per reference) */
border-radius: 64px 20px 20px 20px;
}
/* Blue credibility badge that grows out of the image's bottom-right corner. The big
convex top-left echoes the frame; the ::before/::after radial-gradient fillets carve
concave curves where it meets the image edges, for the overlapping look. */
.solution-badge {
position: absolute;
right: 0;
bottom: 0;
max-width: 74%;
background: #16223f;
color: #fff;
padding: 1.2rem 1.9rem 1.1rem;
border-radius: 46px 0 20px 0;
box-shadow: 0 16px 34px rgba(10, 16, 33, 0.4);
}
.solution-badge::before,
.solution-badge::after {
content: '';
position: absolute;
width: 26px;
height: 26px;
background: radial-gradient(circle at top left, rgba(0,0,0,0) 26px, #16223f 27px);
}
.solution-badge::before { /* fillet flowing up along the image's right edge */
right: 0;
top: -26px;
}
.solution-badge::after { /* fillet flowing left along the image's bottom edge */
left: -26px;
bottom: 0;
background: radial-gradient(circle at bottom left, rgba(0,0,0,0) 26px, #16223f 27px);
}
.solution-badge .badge-title {
font-family: 'Playfair Display', serif;
font-size: 1.18rem;
font-weight: 700;
line-height: 1.3;
margin: 0;
color: #fff;
}
.solution-badge .badge-title .accent {
color: var(--primary-yellow);
}
.solution-badge .badge-stars {
margin-top: 0.45rem;
color: var(--primary-yellow);
font-size: 0.82rem;
letter-spacing: 3px;
}
.solution-content {
flex: 1 1 0;
min-width: 0;
padding: 1rem 0;
}
.solution-eyebrow {
display: inline-block;
color: #c69214;
font-weight: 700;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.14em;
margin-bottom: 0.75rem;
}
.solution-content h3 {
font-family: 'Playfair Display', serif;
font-size: 2.15rem;
font-weight: 700;
color: var(--dark-navy);
margin-bottom: 1rem;
line-height: 1.15;
}
.solution-content p {
color: var(--text-gray);
line-height: 1.7;
margin-bottom: 1.5rem;
font-size: 1.02rem;
}
/* Two-column gold-checkmark feature list */
.solution-features {
list-style: none;
margin: 0 0 1.9rem;
padding: 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.7rem 1.75rem;
}
.solution-feature {
display: flex;
align-items: center;
gap: 0.6rem;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: 0.03em;
text-transform: uppercase;
color: var(--dark-navy);
line-height: 1.25;
}
.solution-feature i {
color: var(--primary-yellow);
font-size: 1.05rem;
flex-shrink: 0;
}
.solution-btn {
display: inline-block;
background: var(--primary-yellow);
color: var(--dark-navy);
font-weight: 700;
text-decoration: none;
padding: 0.8rem 2.4rem;
border-radius: 8px;
transition: all 0.2s ease;
}
.solution-btn:hover {
background: #e6b800;
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(245, 195, 75, 0.4);
}
/* CTA button (Contact a Specialist) — yellow, matching the site's other buttons */
.cta-button.orange,
.final-cta .cta-button.orange {
background: var(--primary-yellow);
color: var(--dark-navy);
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 0.95rem;
}
.cta-button.orange:hover,
.final-cta .cta-button.orange:hover {
background: #e6b800;
box-shadow: 0 12px 30px rgba(245, 195, 75, 0.45);
}
/* CTA band + footer colors */
.final-cta {
background: #262a4e;
}
.footer {
background: #171a2e;
}
/* New universal footer */
.footer-content {
grid-template-columns: 2fr 1fr 1fr 1.4fr;
}
.footer-brand-name {
font-family: 'Playfair Display', serif;
color: var(--primary-yellow);
font-size: 1.5rem;
letter-spacing: 0.04em;
margin-bottom: 1rem;
}
.footer-logo-link {
display: inline-block;
margin-bottom: 1rem;
line-height: 0;
}
.footer-logo-img {
height: 60px;
width: auto;
display: block;
}
.footer-connect h4 {
color: rgba(255, 255, 255, 0.85);
text-transform: uppercase;
letter-spacing: 0.1em;
font-size: 0.8rem;
margin-bottom: 0.85rem;
}
.footer-contact-info {
margin-top: 1rem;
}
.footer-contact-info p {
margin: 0.35rem 0;
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.8);
}
.footer-contact-info a {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
}
.footer-contact-info a:hover {
color: var(--primary-yellow);
}
.newsletter-label {
text-transform: uppercase;
letter-spacing: 0.08em;
font-size: 0.72rem;
color: rgba(255, 255, 255, 0.6);
margin: 1.25rem 0 0.6rem;
}
.footer-newsletter {
display: flex;
max-width: 260px;
border-radius: 8px;
overflow: hidden;
background: rgba(255, 255, 255, 0.1);
}
.footer-newsletter input {
flex: 1 1 auto;
min-width: 0;
border: none;
background: transparent;
color: var(--white);
padding: 0.6rem 0.85rem;
font-size: 0.9rem;
outline: none;
}
.footer-newsletter input::placeholder {
color: rgba(255, 255, 255, 0.5);
}
.footer-newsletter button {
border: none;
background: var(--accent-orange);
color: var(--white);
width: 44px;
cursor: pointer;
transition: background 0.2s ease;
}
.footer-newsletter button:hover {
background: #d2641d;
}
.footer-bottom {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 0.5rem;
}
.footer-legal {
display: flex;
gap: 1.5rem;
}
.footer-legal a {
color: rgba(255, 255, 255, 0.6);
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.05em;
font-size: 0.8rem;
transition: color 0.2s ease;
}
.footer-legal a:hover {
color: var(--primary-yellow);
}
/* Responsive — stacked rows + footer reflow */
@media (max-width: 768px) {
.commercial-solutions {
padding: 3rem 0;
}
.solution-row,
.solution-row.reverse {
flex-direction: column;
align-items: stretch;
min-height: 0;
gap: 1.75rem;
margin-bottom: 3rem;
}
.solution-image img {
height: 240px;
min-height: 0;
}
.solution-badge {
max-width: 82%;
bottom: 18px;
padding: 0.85rem 1.25rem 0.75rem;
}
.solution-badge .badge-title { font-size: 1.05rem; }
.solution-content {
text-align: left;
padding: 0.25rem 0.25rem;
}
.solution-features {
grid-template-columns: 1fr;
gap: 0.6rem;
}
.footer-content {
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
.footer-bottom {
justify-content: center;
text-align: center;
}
}
@media (max-width: 560px) {
.footer-content {
grid-template-columns: 1fr;
}
}
/* Diagram / option images are click-to-enlarge (reuse the shared .img-lightbox-* styles defined earlier) */
#commercial-main-product-img,
.config-option img {
cursor: zoom-in;
}
/* ============================================================
RESOURCES — PDF catalogue grid
============================================================ */
.catalogue-section {
padding: 3rem 0 4rem;
}
.catalogue-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2.5rem 1.75rem;
}
.catalogue-card {
text-decoration: none;
color: inherit;
display: block;
transition: transform 0.2s ease;
}
.catalogue-card:hover {
transform: translateY(-5px);
}
.catalogue-cover {
position: relative;
aspect-ratio: 3 / 4;
background: var(--nav-indigo);
border-radius: 6px;
overflow: hidden;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18);
transition: box-shadow 0.2s ease;
}
.catalogue-card:hover .catalogue-cover {
box-shadow: 0 16px 40px rgba(15, 23, 42, 0.28);
}
.catalogue-cover canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
display: block;
opacity: 0;
transition: opacity 0.45s ease;
}
.catalogue-cover canvas.rendered {
opacity: 1;
}
.catalogue-cover-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
display: block;
opacity: 0;
transition: opacity 0.45s ease;
}
.catalogue-cover-img.is-loaded {
opacity: 1;
}
/* Shimmer skeleton while the PDF cover renders, so nothing pops in bare. */
.catalogue-cover::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, 0.10) 50%, transparent 75%);
background-size: 220% 100%;
animation: catalogue-shimmer 1.4s ease-in-out infinite;
pointer-events: none;
}
.catalogue-cover.is-loaded::after {
animation: none;
opacity: 0;
transition: opacity 0.3s ease;
}
@keyframes catalogue-shimmer {
from { background-position: 120% 0; }
to { background-position: -120% 0; }
}
@media (prefers-reduced-motion: reduce) {
.catalogue-cover::after { animation: none; }
.catalogue-cover canvas { transition: none; }
}
.catalogue-cover-fallback {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
color: rgba(255, 255, 255, 0.55);
font-size: 3rem;
}
.catalogue-meta {
margin-top: 0.85rem;
text-align: center;
}
.catalogue-cat {
display: inline-block;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--accent-orange);
margin-bottom: 0.35rem;
}
.catalogue-title {
text-align: center;
font-weight: 600;
color: var(--dark-navy);
font-size: 1rem;
line-height: 1.3;
}
.catalogue-sub {
margin-top: 0.25rem;
font-size: 0.8rem;
color: var(--text-gray);
line-height: 1.35;
}
.catalogue-empty {
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 4rem 1rem;
color: var(--text-gray);
}
.catalogue-empty i {
font-size: 3rem;
color: var(--border-gray);
margin-bottom: 1rem;
}
.catalogue-empty h3 {
color: var(--dark-navy);
margin-bottom: 0.5rem;
}
@media (max-width: 1024px) {
.catalogue-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
.catalogue-grid { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1.25rem; }
}
@media (max-width: 460px) {
.catalogue-grid { grid-template-columns: 1fr; max-width: 280px; margin: 0 auto; }
}
/* Admin: Resources / Catalogues manager */
.res-admin-upload,
.res-admin-list {
max-width: 780px;
margin-bottom: 1.75rem;
background: #fff;
border: 1px solid var(--border-gray);
border-radius: 10px;
padding: 1.5rem;
}
.res-admin-upload h3,
.res-admin-list h3 {
margin-bottom: 1rem;
color: var(--dark-navy);
}
.res-form-row {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.res-form-row .form-group {
flex: 1;
min-width: 200px;
}
.res-list {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.res-row {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.75rem;
border: 1px solid var(--border-gray);
border-radius: 8px;
transition: background 0.25s ease;
}
.res-row-saved {
background: rgba(16, 185, 129, 0.14);
}
.res-row-icon {
color: #dc2626;
font-size: 1.4rem;
flex-shrink: 0;
}
.res-row-main {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.4rem;
min-width: 0;
}
.res-row-title {
font-weight: 600;
border: 1px solid transparent;
border-radius: 6px;
padding: 0.35rem 0.5rem;
font-size: 0.95rem;
color: var(--dark-navy);
}
.res-row-title:hover,
.res-row-title:focus {
border-color: var(--border-gray);
outline: none;
}
.res-row-meta {
display: flex;
align-items: center;
gap: 0.75rem;
}
.res-row-cat {
padding: 0.3rem 0.5rem;
border: 1px solid var(--border-gray);
border-radius: 6px;
font-size: 0.85rem;
}
.res-row-link {
color: var(--text-gray);
text-decoration: none;
font-size: 0.85rem;
}
.res-row-link:hover {
color: var(--dark-navy);
}
.res-row-save,
.res-row-del {
width: 38px;
height: 38px;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 0.9rem;
flex-shrink: 0;
}
.res-row-save {
background: var(--primary-yellow);
color: var(--dark-navy);
}
.res-row-del {
background: #fee2e2;
color: #dc2626;
}
.res-empty {
color: var(--text-gray);
}
/* In-page PDF preview modal (Resources) */
.pdf-preview-overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.85);
z-index: 100000;
display: none;
align-items: center;
justify-content: center;
padding: 2rem;
}
.pdf-preview-overlay.open {
display: flex;
}
.pdf-preview-box {
position: relative;
width: min(900px, 94vw);
height: 92vh;
background: #fff;
border-radius: 10px;
overflow: hidden;
display: flex;
flex-direction: column;
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}
.pdf-preview-head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.7rem 1rem;
background: var(--dark-navy);
color: #fff;
flex-shrink: 0;
}
.pdf-preview-title {
font-weight: 600;
font-size: 0.95rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pdf-preview-actions {
display: flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
}
.pdf-preview-open,
.pdf-preview-close {
background: rgba(255, 255, 255, 0.12);
color: #fff;
border: none;
width: 34px;
height: 34px;
border-radius: 7px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: background 0.2s ease;
}
.pdf-preview-open:hover,
.pdf-preview-close:hover {
background: rgba(255, 255, 255, 0.28);
}
.pdf-preview-pages {
flex: 1;
overflow-y: auto;
background: #525659;
padding: 1rem;
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.pdf-preview-page {
width: 100%;
max-width: 800px;
background: #fff;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}
.pdf-preview-loading {
color: rgba(255, 255, 255, 0.85);
padding: 2.5rem 1rem;
font-size: 0.95rem;
}
/* Width / Height measurement inputs don't need the full column width */
.config-text-input[data-category="Width"],
.config-text-input[data-category="Height"] {
max-width: 240px;
}
.config-input-field .config-text-input {
width: 100%;
padding: 0.6rem 1rem;
border: 2px solid var(--border-gray);
border-radius: 8px;
font-size: 0.9rem;
background: #fff;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
box-sizing: border-box;
}
.config-input-field .config-text-input:focus {
outline: none;
border-color: var(--primary-yellow);
box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.15);
}
.config-input-field .config-text-input::placeholder {
color: #aaa;
font-style: italic;
}
.option-grid:has(.config-input-field):not(:has(.config-option)) {
display: flex;
gap: 1rem;
}
.config-input-inline {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.4rem;
min-width: auto;
flex: none;
}
.config-input-inline label {
font-size: 0.78rem;
white-space: nowrap;
margin: 0;
}
.config-input-inline .config-text-input {
width: 110px;
padding: 0.45rem 0.6rem;
font-size: 0.8rem;
}
/* Hardware count badge */
.hw-badge {
display: inline-flex;
align-items: center;
justify-content: center;
background: #10B981;
color: #fff;
font-size: 0.7rem;
font-weight: 700;
min-width: 20px;
height: 20px;
border-radius: 10px;
padding: 0 5px;
margin-left: 6px;
vertical-align: middle;
}
/* Add to cart row in options */
.config-options-side .add-to-cart-section {
display: flex;
align-items: center;
gap: 1rem;
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--border-gray);
}
.config-options-side .quantity-controls {
display: flex;
align-items: center;
gap: 0.5rem;
}
.config-options-side .quantity-controls label {
font-size: 0.85rem;
font-weight: 500;
}
.config-options-side .qty-wrapper {
display: flex;
align-items: center;
border: 1px solid var(--border-gray);
border-radius: 6px;
overflow: hidden;
}
.config-options-side .qty-btn {
width: 32px;
height: 32px;
border: none;
background: var(--primary-yellow);
color: var(--dark-navy);
font-size: 1rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.config-options-side .qty-wrapper input {
width: 40px;
height: 32px;
border: none;
text-align: center;
font-size: 0.9rem;
}
.config-options-side .add-to-cart-btn {
padding: 0.6rem 1.5rem;
background: var(--primary-yellow);
color: var(--dark-navy);
border: none;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.5rem;
transition: all 0.2s ease;
}
.config-options-side .add-to-cart-btn:hover {
background: var(--dark-navy);
color: #fff;
}
/* ========================================
Bottom Summary Section
======================================== */
.config-summary-section {
padding: 1.5rem 0 3rem;
background: var(--light-gray);
}
.summary-bottom-row {
display: grid;
grid-template-columns: auto 1fr 280px;
gap: 1.5rem;
align-items: start;
}
/* Cart Controls */
.cart-controls-side {
display: flex;
flex-direction: column;
gap: 0.75rem;
padding: 1rem;
background: #fff;
border-radius: 8px;
border: 1px solid var(--border-gray);
}
.cart-controls-side .qty-row {
display: flex;
align-items: center;
gap: 0.5rem;
}
.cart-controls-side .qty-row label {
font-weight: 500;
font-size: 0.9rem;
}
.cart-controls-side .qty-row input {
width: 60px;
padding: 0.5rem;
border: 1px solid var(--border-gray);
border-radius: 6px;
text-align: center;
}
.cart-controls-side .add-to-cart-btn {
padding: 0.75rem 1.5rem;
background: var(--primary-yellow);
color: var(--dark-navy);
border: none;
border-radius: 6px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.cart-controls-side .add-to-cart-btn:hover {
background: var(--dark-navy);
color: #fff;
}
/* Summary Table */
.summary-table-side {
background: #fff;
border-radius: 8px;
overflow: hidden;
border: 1px solid var(--border-gray);
}
/* SKU Display Row */
.sku-display-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 1rem;
background: var(--dark-navy);
color: #fff;
font-size: 0.9rem;
}
.sku-display-row .sku-label {
font-weight: 500;
}
.sku-display-row .sku-value {
font-family: 'Courier New', monospace;
font-weight: 700;
color: var(--primary-yellow);
letter-spacing: 0.05em;
}
.config-summary-table {
width: 100%;
border-collapse: collapse;
}
.config-summary-table tr {
border-bottom: 1px solid var(--border-gray);
}
.config-summary-table tr:last-child {
border-bottom: none;
}
.config-summary-table td {
padding: 0.75rem 1rem;
font-size: 0.9rem;
}
.config-summary-table td:first-child {
font-weight: 500;
color: var(--dark-navy);
width: 40%;
background: rgba(0,0,0,0.02);
}
.config-summary-table td:last-child {
color: #555;
}
/* Price Box */
.price-box-side .price-box {
background: var(--nav-indigo);
border-radius: 8px;
padding: 1.25rem;
color: #fff;
}
.price-box-side .price-row {
display: flex;
justify-content: space-between;
padding: 0.5rem 0;
font-size: 0.9rem;
}
.price-box-side .price-row.total {
border-top: 1px solid rgba(255,255,255,0.2);
margin-top: 0.5rem;
padding-top: 0.75rem;
font-weight: 700;
font-size: 1rem;
}
.price-box-side .price-row.total span:last-child {
color: var(--primary-yellow);
}
/* Back to Products Button */
.back-to-products-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.25rem;
background: transparent;
border: 2px solid var(--dark-navy);
color: var(--dark-navy);
font-size: 0.9rem;
font-weight: 600;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s ease;
margin-bottom: 1.5rem;
}
.back-to-products-btn:hover {
background: var(--dark-navy);
color: #fff;
}
.back-to-products-btn i {
font-size: 0.85rem;
}
/* Product Configurator Section */
.product-configurator-section {
padding: 2rem 0;
background: var(--light-gray);
}
/* Responsive */
@media (max-width: 992px) {
.configurator-top {
grid-template-columns: 1fr;
}
.config-image-side {
position: relative;
top: auto;
max-width: 300px;
margin: 0 auto 1.5rem;
}
.summary-bottom-row {
grid-template-columns: 1fr;
}
.price-box-side {
max-width: 400px;
}
}
/* ========================================
COMPACT ADMIN PANEL STYLES
Professional, tight, efficient layout
======================================== */
/* Reduce header height */
.admin-header {
height: 50px !important;
}
.admin-header-content {
padding: 0 1rem !important;
}
.admin-logo-img {
height: 32px !important;
}
.admin-label {
font-size: 0.85rem !important;
}
/* Compact sidebar */
.admin-sidebar {
top: 50px !important;
height: calc(100vh - 50px) !important;
width: 200px !important;
padding-left: 0 !important;
}
.admin-sidebar .admin-nav ul {
padding: 0.5rem 0 !important;
}
.admin-nav .nav-link {
padding: 0.6rem 1rem !important;
font-size: 0.85rem !important;
gap: 0.5rem !important;
margin-bottom: 0 !important;
border-radius: 0 !important;
}
.admin-nav .nav-link i {
width: 16px !important;
font-size: 0.85rem !important;
}
.nav-section-title {
font-size: 0.7rem !important;
margin: 1rem 0.75rem 0.25rem !important;
padding: 0.25rem 0.5rem !important;
}
/* Compact main content area */
.admin-main {
margin-left: 200px !important;
margin-top: 50px !important;
padding: 1rem !important;
}
/* Compact section headers */
.admin-section-header {
padding: 0.75rem 1rem !important;
margin-bottom: 1rem !important;
}
.admin-section-header h2 {
font-size: 1.1rem !important;
margin: 0 !important;
}
/* Compact admin sections */
.admin-section {
padding-top: 0.5rem !important;
}
/* Compact product tabs */
.product-tabs {
margin-bottom: 1rem !important;
gap: 0 !important;
}
.product-admin-tab {
padding: 0.5rem 1rem !important;
font-size: 0.85rem !important;
}
/* Compact product overview */
.product-overview {
grid-template-columns: 200px 1fr !important;
gap: 1rem !important;
margin-bottom: 1.5rem !important;
}
.product-image-section {
padding: 0.75rem !important;
border-radius: 6px !important;
}
.product-image-section h4 {
font-size: 0.85rem !important;
margin-bottom: 0.5rem !important;
}
.product-image-preview {
height: 120px !important;
margin-bottom: 0.5rem !important;
}
.product-details {
padding: 0.75rem !important;
border-radius: 6px !important;
}
.product-details h4 {
font-size: 0.85rem !important;
margin-bottom: 0.5rem !important;
}
.detail-item {
padding: 0.4rem 0.75rem !important;
}
.detail-label {
font-size: 0.8rem !important;
}
.detail-value {
font-size: 0.8rem !important;
}
.edit-detail-btn {
padding: 0.2rem 0.5rem !important;
font-size: 0.7rem !important;
margin-right: 0.5rem !important;
}
/* Compact config categories */
.admin-config-categories {
gap: 1rem !important;
}
.admin-config-category {
padding: 0.75rem !important;
border-radius: 6px !important;
}
.admin-config-category h4 {
font-size: 0.9rem !important;
margin-bottom: 0.5rem !important;
padding-bottom: 0.35rem !important;
padding-left: 0.25rem !important;
}
/* Compact option list */
.admin-option-list {
gap: 0.5rem !important;
}
.admin-option-item {
padding: 0.5rem 0.75rem !important;
gap: 0.5rem !important;
border-radius: 4px !important;
font-size: 0.85rem !important;
}
.option-name {
font-size: 0.85rem !important;
}
.option-type {
font-size: 0.7rem !important;
}
.option-price {
font-size: 0.8rem !important;
}
.option-sku {
font-size: 0.75rem !important;
}
/* Compact buttons */
.add-option-btn {
padding: 0.3rem 0.6rem !important;
font-size: 0.75rem !important;
}
.edit-option-btn,
.delete-option-btn {
padding: 0.25rem 0.5rem !important;
font-size: 0.7rem !important;
}
.move-option-up, .move-option-down,
.move-category-up, .move-category-down {
padding: 2px 6px !important;
font-size: 10px !important;
}
/* Compact form groups */
.admin-body .form-group {
margin-bottom: 0.75rem !important;
}
.admin-body .form-group label {
margin-bottom: 0.25rem !important;
font-size: 0.8rem !important;
}
.admin-body .form-group input,
.admin-body .form-group select,
.admin-body .form-group textarea {
padding: 0.5rem 0.75rem !important;
font-size: 0.85rem !important;
border-radius: 4px !important;
}
.form-actions {
margin-top: 1rem !important;
gap: 0.5rem !important;
}
.cancel-btn,
.save-btn {
padding: 0.5rem 1rem !important;
font-size: 0.85rem !important;
border-radius: 4px !important;
}
/* Compact dashboard stats */
.dashboard-stats {
gap: 1rem !important;
margin-bottom: 1.5rem !important;
}
.stat-card {
padding: 1rem !important;
border-radius: 6px !important;
}
.stat-card h3 {
font-size: 1.5rem !important;
margin-bottom: 0.25rem !important;
}
.stat-card p {
font-size: 0.8rem !important;
}
/* Compact tables */
.admin-body table {
font-size: 0.85rem !important;
}
.admin-body table th,
.admin-body table td {
padding: 0.5rem 0.75rem !important;
}
.admin-body table th {
font-size: 0.75rem !important;
text-transform: uppercase !important;
letter-spacing: 0.03em !important;
}
/* Compact customers section */
.customers-header {
margin-bottom: 1rem !important;
}
.customers-header h3 {
font-size: 1rem !important;
}
.customers-controls {
gap: 0.5rem !important;
}
.customers-controls input,
.customers-controls select {
padding: 0.4rem 0.6rem !important;
font-size: 0.8rem !important;
}
.customers-controls button {
padding: 0.4rem 0.8rem !important;
font-size: 0.8rem !important;
}
/* Compact orders section */
.orders-stats {
gap: 0.75rem !important;
margin-bottom: 1rem !important;
}
.order-stat-card {
padding: 0.75rem !important;
}
.order-stat-card h4 {
font-size: 1.25rem !important;
}
.order-stat-card p {
font-size: 0.75rem !important;
}
/* Compact modal content */
.admin-body .modal-content,
.admin-body .option-modal-content {
padding: 1rem !important;
border-radius: 6px !important;
}
.admin-body .modal-header {
padding-bottom: 0.75rem !important;
margin-bottom: 0.75rem !important;
}
.admin-body .modal-header h3 {
font-size: 1rem !important;
}
/* Compact rules section */
.rules-container {
gap: 0.75rem !important;
}
.rule-card {
padding: 0.75rem !important;
border-radius: 6px !important;
}
.rule-header {
padding-bottom: 0.5rem !important;
margin-bottom: 0.5rem !important;
}
.rule-header h4 {
font-size: 0.9rem !important;
}
.rule-content {
gap: 0.5rem !important;
}
.rule-condition,
.rule-action {
padding: 0.5rem !important;
font-size: 0.8rem !important;
}
/* Compact settings section */
.settings-group {
padding: 0.75rem !important;
margin-bottom: 0.75rem !important;
}
.settings-group h4 {
font-size: 0.9rem !important;
margin-bottom: 0.5rem !important;
}
/* Compact upload buttons */
.upload-btn {
padding: 0.4rem 0.8rem !important;
font-size: 0.8rem !important;
}
/* Compact back to site button */
.back-to-site {
padding: 0.35rem 0.75rem !important;
font-size: 0.8rem !important;
}
/* Compact price inputs grid */
.price-inputs {
gap: 0.5rem !important;
}
.price-input-group label {
font-size: 0.75rem !important;
}
.price-input-group input {
padding: 0.4rem 0.6rem !important;
}
/* Compact category header buttons */
.admin-config-category h4 .button-group {
gap: 0.25rem !important;
}
.admin-config-category h4 button {
padding: 0.2rem 0.5rem !important;
font-size: 0.7rem !important;
}
/* Compact supplier cost inputs */
.supplier-cost-group {
margin-top: 0.5rem !important;
}
.supplier-cost-group label {
font-size: 0.75rem !important;
}
.supplier-cost-group input {
padding: 0.3rem 0.5rem !important;
font-size: 0.8rem !important;
}
/* Ensure compact modals */
#edit-option-modal .modal-content,
#add-category-modal .modal-content,
#edit-category-modal .modal-content {
max-width: 450px !important;
padding: 1rem !important;
}
/* Responsive compact adjustments */
@media (max-width: 1200px) {
.admin-sidebar {
width: 180px !important;
}
.admin-main {
margin-left: 180px !important;
}
}
@media (max-width: 768px) {
.admin-sidebar {
width: 100% !important;
height: auto !important;
position: relative !important;
top: 0 !important;
}
.admin-main {
margin-left: 0 !important;
margin-top: 0 !important;
}
}
/* ========================================
DEBUG: STICKY POSITIONING FIX
This section ensures sticky/fixed work
======================================== */
/* Ensure no ancestor breaks fixed/sticky positioning */
html {
/* No transform, filter, perspective, or will-change that could break fixed */
transform: none !important;
filter: none !important;
perspective: none !important;
will-change: auto !important;
}
body {
/* No transform that could create a new stacking context */
transform: none !important;
filter: none !important;
perspective: none !important;
will-change: auto !important;
}
/* Force the header to be fixed */
.header {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
z-index: 9999 !important;
}
/* Force sticky on commercial page elements */
.product-image-box {
position: -webkit-sticky !important;
position: sticky !important;
top: 90px !important;
}
.summary-card {
position: -webkit-sticky !important;
position: sticky !important;
top: 90px !important;
}
/* Ensure parent containers don't break sticky */
.product-configurator,
.commercial-3col-container,
.commercial-3col-layout,
.commercial-image-column,
.commercial-summary-column {
overflow: visible !important;
transform: none !important;
filter: none !important;
perspective: none !important;
will-change: auto !important;
contain: none !important;
}
/* DEBUG: Uncomment to see visual indicators
.header { outline: 3px solid red !important; }
.product-image-box { outline: 3px solid blue !important; }
.summary-card { outline: 3px solid green !important; }
*/
/* CRITICAL FIX: body.page-transition must not break sticky */
body.page-transition,
html body.page-transition,
.page-transition {
overflow: visible !important;
overflow-x: visible !important;
overflow-y: visible !important;
transform: none !important;
filter: none !important;
perspective: none !important;
will-change: auto !important;
contain: none !important;
}
/* Alternative: prevent page-transition from being added at all on commercial page */
body[class*="page-transition"] {
overflow: visible !important;
}
/* ========================================
REFERENCE PAGE
======================================== */
/* Admin upload section */
.ref-admin-section {
padding: 2rem 0 0;
}
.ref-admin-card {
background: var(--white);
border-radius: 12px;
padding: 2rem;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
border-left: 4px solid var(--primary-yellow);
}
.ref-admin-card h3 {
font-size: 1.2rem;
color: var(--dark-navy);
margin-bottom: 1.25rem;
}
.ref-admin-card h3 i {
color: var(--primary-yellow);
margin-right: 0.5rem;
}
.ref-upload-form {
display: flex;
flex-direction: column;
gap: 1rem;
}
.ref-form-row {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.ref-form-row .ref-form-group {
flex: 1;
min-width: 200px;
}
.ref-form-group label {
display: block;
font-size: 0.85rem;
font-weight: 600;
color: var(--dark-navy);
margin-bottom: 0.35rem;
}
.ref-form-group input[type="text"],
.ref-form-group select {
width: 100%;
padding: 0.6rem 0.85rem;
border: 1.5px solid #e2e8f0;
border-radius: 8px;
font-size: 0.9rem;
font-family: 'Inter', sans-serif;
transition: border-color 0.2s ease;
}
.ref-form-group input[type="text"]:focus,
.ref-form-group select:focus {
border-color: var(--primary-yellow);
outline: none;
}
.ref-form-group input[type="file"] {
font-size: 0.9rem;
color: var(--text-gray);
}
.ref-upload-btn {
align-self: flex-start;
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.7rem 1.5rem;
background: var(--dark-navy);
color: var(--white);
border: none;
border-radius: 8px;
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: all 0.25s ease;
}
.ref-upload-btn:hover {
background: var(--primary-yellow);
color: var(--dark-navy);
}
/* Filter bar */
.ref-filter-section {
padding: 2rem 0 0.5rem;
}
.ref-filter-bar {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center;
}
.ref-filter-btn {
padding: 0.5rem 1.2rem;
border: 1.5px solid #e2e8f0;
border-radius: 20px;
background: var(--white);
color: var(--text-gray);
font-size: 0.85rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.ref-filter-btn:hover {
border-color: var(--dark-navy);
color: var(--dark-navy);
}
.ref-filter-btn.active {
background: var(--dark-navy);
color: var(--white);
border-color: var(--dark-navy);
}
/* Documents grid */
.ref-documents-section {
padding: 1.5rem 0 4rem;
}
.ref-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 1.5rem;
}
.ref-card {
background: var(--white);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
display: flex;
flex-direction: column;
transition: all 0.3s ease;
}
.ref-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}
.ref-card-icon {
background: linear-gradient(135deg, var(--dark-navy) 0%, #1e3a5f 100%);
padding: 2rem;
display: flex;
align-items: center;
justify-content: center;
}
.ref-card-icon i {
font-size: 3rem;
color: var(--primary-yellow);
}
.ref-card-body {
padding: 1.25rem;
flex: 1;
}
.ref-card-category {
display: inline-block;
background: #eef2ff;
color: var(--dark-navy);
padding: 0.2rem 0.65rem;
border-radius: 4px;
font-size: 0.72rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-bottom: 0.5rem;
}
.ref-card-title {
font-family: 'Inter', sans-serif;
font-size: 1.05rem;
font-weight: 700;
color: var(--dark-navy);
margin: 0 0 0.5rem 0;
line-height: 1.35;
}
.ref-card-desc {
font-size: 0.85rem;
color: var(--text-gray);
line-height: 1.5;
margin: 0 0 0.75rem 0;
}
.ref-card-meta {
display: flex;
gap: 1rem;
font-size: 0.75rem;
color: var(--text-gray);
}
.ref-card-meta i {
margin-right: 0.25rem;
}
.ref-card-actions {
display: flex;
gap: 0.5rem;
padding: 0.75rem 1.25rem 1.25rem;
border-top: 1px solid #f1f5f9;
}
.ref-btn {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.45rem 0.85rem;
border-radius: 6px;
font-size: 0.8rem;
font-weight: 600;
text-decoration: none;
cursor: pointer;
transition: all 0.2s ease;
border: 1.5px solid transparent;
}
.ref-btn-view {
background: var(--dark-navy);
color: var(--white);
}
.ref-btn-view:hover {
background: transparent;
color: var(--dark-navy);
border-color: var(--dark-navy);
}
.ref-btn-download {
background: #f1f5f9;
color: var(--dark-navy);
border-color: #e2e8f0;
}
.ref-btn-download:hover {
background: var(--primary-yellow);
border-color: var(--primary-yellow);
}
.ref-btn-delete {
background: #fee2e2;
color: #dc2626;
border-color: #fecaca;
margin-left: auto;
}
.ref-btn-delete:hover {
background: #dc2626;
color: var(--white);
border-color: #dc2626;
}
/* Empty state */
.ref-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 5rem 2rem;
text-align: center;
}
.ref-empty i {
font-size: 4rem;
color: #cbd5e1;
margin-bottom: 1.5rem;
}
.ref-empty h3 {
font-size: 1.3rem;
color: var(--dark-navy);
margin-bottom: 0.5rem;
}
.ref-empty p {
font-size: 0.95rem;
color: var(--text-gray);
max-width: 400px;
}
@media (max-width: 768px) {
.ref-grid {
grid-template-columns: 1fr;
}
.ref-form-row {
flex-direction: column;
}
}
/* ========== Hardware Add-on Popup ========== */
.hw-popup-body {
max-height: 70vh;
overflow-y: auto;
padding: 0 !important;
}
.hw-popup-categories {
display: flex;
flex-direction: column;
}
.hw-popup-category {
border-bottom: 1px solid var(--border-gray);
}
.hw-popup-category:last-child {
border-bottom: none;
}
.hw-popup-cat-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.85rem 1.25rem;
cursor: pointer;
font-weight: 600;
font-size: 0.95rem;
color: var(--dark-navy);
background: var(--light-gray);
transition: background 0.2s;
}
.hw-popup-cat-header:hover {
background: #e8ebf4;
}
.hw-popup-cat-header i {
font-size: 0.75rem;
color: var(--text-gray);
transition: transform 0.2s;
}
.hw-popup-cat-body {
padding: 0.5rem 1rem;
}
.hw-popup-item {
display: grid;
grid-template-columns: 56px 1fr 1.5fr auto;
gap: 0.75rem;
align-items: center;
padding: 0.6rem 0;
border-bottom: 1px solid #f0f0f0;
}
.hw-popup-item:last-child {
border-bottom: none;
}
.hw-popup-item-img {
width: 56px;
height: 56px;
border-radius: 6px;
overflow: hidden;
background: var(--light-gray);
display: flex;
align-items: center;
justify-content: center;
}
.hw-popup-item-img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hw-popup-item-img i {
font-size: 1.25rem;
color: var(--text-gray);
}
.hw-popup-item-info {
display: flex;
flex-direction: column;
gap: 0.15rem;
min-width: 0;
}
.hw-popup-item-name {
font-weight: 600;
font-size: 0.85rem;
color: var(--dark-navy);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hw-popup-item-sku {
font-size: 0.7rem;
color: var(--text-gray);
font-family: monospace;
}
.hw-popup-item-desc {
font-size: 0.8rem;
color: var(--text-gray);
line-height: 1.4;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
.hw-popup-item-actions {
display: flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
}
.hw-popup-qty {
display: flex;
align-items: center;
border: 1px solid var(--border-gray);
border-radius: 6px;
overflow: hidden;
}
.hw-qty-btn {
width: 28px;
height: 28px;
border: none;
background: var(--light-gray);
cursor: pointer;
font-size: 0.85rem;
font-weight: 600;
color: var(--dark-navy);
transition: background 0.15s;
}
.hw-qty-btn:hover {
background: #dde0ec;
}
.hw-qty-input {
width: 36px;
height: 28px;
text-align: center;
border: none;
border-left: 1px solid var(--border-gray);
border-right: 1px solid var(--border-gray);
font-size: 0.8rem;
font-weight: 600;
-moz-appearance: textfield;
}
.hw-qty-input::-webkit-inner-spin-button,
.hw-qty-input::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.hw-add-btn {
padding: 0.35rem 0.85rem;
border: none;
border-radius: 6px;
background: var(--dark-navy);
color: var(--white);
font-size: 0.8rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
white-space: nowrap;
}
.hw-add-btn:hover {
background: var(--primary-yellow);
color: var(--dark-navy);
}
.hw-add-btn.hw-added {
background: #10B981;
color: #fff;
}
.hw-add-btn.hw-added:hover {
background: #dc2626;
color: #fff;
}
.hw-popup-empty {
padding: 1rem;
text-align: center;
color: var(--text-gray);
font-size: 0.85rem;
font-style: italic;
}
@media (max-width: 640px) {
.hw-popup-item {
grid-template-columns: 48px 1fr;
gap: 0.5rem;
}
.hw-popup-item-desc {
grid-column: 1 / -1;
}
.hw-popup-item-actions {
grid-column: 1 / -1;
justify-content: flex-end;
}
}
/* ============ File Upload Option Card ============ */
.file-upload-option {
grid-column: 1 / -1; /* span full row so it doesn't look like a selection card */
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
padding: 16px;
border: 2px dashed var(--border-gray);
border-radius: 8px;
background: white;
transition: border-color 0.2s ease, background 0.2s ease;
}
.file-upload-option:hover {
border-color: var(--primary-yellow);
background: #fffbf0;
}
.file-upload-option.has-file {
border-style: solid;
border-color: var(--primary-yellow);
background: #fffbf0;
}
.file-upload-option > .fas {
font-size: 1.5rem;
color: var(--text-gray);
}
.file-upload-option.has-file > .fas {
color: var(--dark-navy);
}
.file-upload-option .option-name {
font-weight: 600;
font-size: 0.95rem;
color: var(--dark-navy);
}
.file-upload-option .option-description {
font-size: 0.82rem;
color: var(--text-gray);
}
.file-upload-option .btn-choose-file {
padding: 6px 16px;
background: var(--dark-navy);
color: white;
border: none;
border-radius: 6px;
font-size: 0.85rem;
cursor: pointer;
transition: background 0.2s ease;
}
.file-upload-option .btn-choose-file:hover {
background: var(--primary-yellow);
color: var(--dark-navy);
}
.file-upload-option .file-upload-info {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.file-upload-option .file-upload-filename a {
color: var(--dark-navy);
font-weight: 500;
text-decoration: underline;
font-size: 0.88rem;
word-break: break-all;
}
.file-upload-option .file-upload-size {
font-size: 0.8rem;
color: var(--text-gray);
}
.file-upload-option .btn-remove-file {
padding: 3px 10px;
background: transparent;
color: #EF4444;
border: 1px solid #EF4444;
border-radius: 4px;
font-size: 0.78rem;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
}
.file-upload-option .btn-remove-file:hover {
background: #EF4444;
color: white;
}
/* Cart document sub-list */
.cart-item-docs .cart-item-doc a {
color: var(--dark-navy);
text-decoration: underline;
font-size: 0.82rem;
}
/* ============================================================
Hardware Browse Page (Chunk E, 2026-05-17)
============================================================ */
.hw-page {
display: grid;
grid-template-columns: 280px 1fr;
align-items: start;
max-width: 1280px;
margin: 2rem auto 4rem;
padding: 0 1.25rem;
gap: 2rem;
}
.hw-sidebar {
position: sticky;
top: 100px;
max-height: calc(100vh - 120px);
overflow-y: auto;
background: var(--white);
border: 1px solid var(--border-gray);
border-radius: 12px;
padding: 0;
}
.hw-sidebar-inner {
padding: 1.25rem;
}
.hw-sidebar-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.25rem;
}
.hw-sidebar-header h2 {
font-size: 1.1rem;
font-weight: 700;
color: var(--dark-navy);
margin: 0;
}
.hw-sidebar-close {
display: none;
background: none;
border: none;
font-size: 1.2rem;
cursor: pointer;
color: var(--text-gray);
padding: 0.25rem;
}
.hw-filter-section {
margin-bottom: 1.5rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid var(--border-gray);
}
.hw-filter-section:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.hw-filter-heading {
font-size: 0.85rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--dark-navy);
margin: 0 0 0.75rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.hw-filter-toggle-all {
background: none;
border: none;
font-size: 0.75rem;
font-weight: 500;
color: var(--text-gray);
cursor: pointer;
padding: 0;
text-decoration: underline;
flex-shrink: 0;
}
.hw-filter-toggle-all:hover {
color: var(--dark-navy);
}
.hw-search-wrap {
position: relative;
}
.hw-search-icon {
position: absolute;
left: 0.75rem;
top: 50%;
transform: translateY(-50%);
color: var(--text-gray);
font-size: 0.85rem;
pointer-events: none;
}
.hw-search-input {
width: 100%;
padding: 0.55rem 0.75rem 0.55rem 2.1rem;
border: 1px solid var(--border-gray);
border-radius: 8px;
font-size: 0.9rem;
color: var(--dark-navy);
background: var(--light-gray);
box-sizing: border-box;
transition: border-color 0.2s;
}
.hw-search-input:focus {
outline: none;
border-color: var(--primary-yellow);
background: var(--white);
}
.hw-cat-list {
display: flex;
flex-direction: column;
gap: 0.45rem;
max-height: 300px;
overflow-y: auto;
}
.hw-cat-label {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: var(--dark-navy);
cursor: pointer;
padding: 0.2rem 0.25rem;
border-radius: 4px;
transition: background 0.15s;
}
.hw-cat-label:hover {
background: var(--light-gray);
}
.hw-cat-checkbox {
accent-color: var(--primary-yellow);
width: 15px;
height: 15px;
flex-shrink: 0;
cursor: pointer;
}
.hw-price-range {
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.hw-price-inputs {
display: flex;
align-items: center;
gap: 0.4rem;
}
.hw-price-field {
display: flex;
flex-direction: column;
flex: 1;
}
.hw-price-field label {
font-size: 0.72rem;
color: var(--text-gray);
margin-bottom: 0.2rem;
}
.hw-price-num {
width: 100%;
padding: 0.4rem 0.5rem;
border: 1px solid var(--border-gray);
border-radius: 6px;
font-size: 0.85rem;
color: var(--dark-navy);
background: var(--light-gray);
box-sizing: border-box;
}
.hw-price-num:focus {
outline: none;
border-color: var(--primary-yellow);
}
.hw-price-dash {
color: var(--text-gray);
font-size: 0.85rem;
padding-top: 1.2rem;
}
.hw-range-wrap {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.hw-range-slider {
width: 100%;
accent-color: var(--primary-yellow);
cursor: pointer;
}
.hw-price-labels {
display: flex;
justify-content: space-between;
font-size: 0.78rem;
color: var(--text-gray);
}
.hw-grid-wrap {
min-width: 0;
}
.hw-grid-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.25rem;
gap: 1rem;
flex-wrap: wrap;
}
.hw-result-count {
font-size: 0.9rem;
color: var(--text-gray);
font-weight: 500;
}
.hw-sort-wrap {
display: flex;
align-items: center;
gap: 0.5rem;
}
.hw-sort-label {
font-size: 0.875rem;
color: var(--text-gray);
white-space: nowrap;
}
.hw-sort-select {
padding: 0.45rem 0.75rem;
border: 1px solid var(--border-gray);
border-radius: 8px;
font-size: 0.875rem;
color: var(--dark-navy);
background: var(--white);
cursor: pointer;
transition: border-color 0.2s;
}
.hw-sort-select:focus {
outline: none;
border-color: var(--primary-yellow);
}
.hw-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 1.25rem;
}
.hw-card {
background: var(--white);
border: 1px solid var(--border-gray);
border-radius: 12px;
overflow: hidden;
display: flex;
flex-direction: column;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hw-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}
.hw-card-img-btn {
background: none;
border: none;
padding: 0;
cursor: pointer;
display: block;
width: 100%;
}
.hw-card-img {
width: 100%;
height: 180px;
object-fit: cover;
display: block;
background: var(--light-gray);
}
.hw-card-body {
padding: 0.9rem 1rem 1rem;
display: flex;
flex-direction: column;
flex: 1;
gap: 0.35rem;
}
.hw-card-cat {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-gray);
margin: 0;
}
.hw-card-name {
margin: 0;
font-size: 0.95rem;
font-weight: 600;
line-height: 1.3;
}
.hw-card-name-btn {
background: none;
border: none;
padding: 0;
cursor: pointer;
color: var(--dark-navy);
font-size: inherit;
font-weight: inherit;
font-family: inherit;
text-align: left;
line-height: inherit;
transition: color 0.15s;
}
.hw-card-name-btn:hover {
color: #b8860b;
text-decoration: underline;
}
.hw-card-desc {
font-size: 0.8rem;
color: var(--text-gray);
margin: 0;
line-height: 1.45;
flex: 1;
}
.hw-card-price {
font-size: 1.05rem;
font-weight: 700;
color: var(--dark-navy);
}
.hw-card-price.hw-price-locked {
font-size: 0.82rem;
font-weight: 500;
color: var(--text-gray);
}
.hw-card-add-btn {
margin-top: 0.5rem;
padding: 0.55rem 0;
background: var(--primary-yellow);
color: var(--dark-navy);
border: none;
border-radius: 8px;
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s ease, transform 0.1s ease;
width: 100%;
}
.hw-card-add-btn:hover {
background: var(--accent-gold);
transform: translateY(-1px);
}
.hw-card-add-btn:active {
transform: translateY(0);
}
.hw-empty-state {
flex-direction: column;
align-items: center;
justify-content: center;
padding: 4rem 2rem;
color: var(--text-gray);
gap: 0.75rem;
text-align: center;
}
.hw-empty-state i {
font-size: 2.5rem;
opacity: 0.4;
}
.hw-empty-state p {
margin: 0;
font-size: 1rem;
}
.hw-reset-btn {
padding: 0.55rem 1.25rem;
background: var(--primary-yellow);
color: var(--dark-navy);
border: none;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
font-size: 0.875rem;
transition: background 0.2s;
}
.hw-reset-btn:hover {
background: var(--accent-gold);
}
.hw-mobile-filter-btn {
display: none;
position: fixed;
bottom: 1.5rem;
left: 50%;
transform: translateX(-50%);
padding: 0.7rem 1.5rem;
background: var(--dark-navy);
color: var(--white);
border: none;
border-radius: 999px;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
z-index: 200;
gap: 0.5rem;
align-items: center;
box-shadow: 0 4px 16px rgba(15,23,42,0.25);
}
.hw-mobile-filter-btn i {
font-size: 1rem;
}
.hw-overlay {
display: none;
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.5);
z-index: 299;
}
.hw-overlay--visible {
display: block;
}
.hw-modal-overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.6);
z-index: 500;
align-items: center;
justify-content: center;
padding: 1rem;
}
.hw-modal {
background: var(--white);
border-radius: 16px;
max-width: 680px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
display: flex;
flex-direction: column;
position: relative;
animation: hwModalIn 0.2s ease;
}
@keyframes hwModalIn {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}
.hw-modal-close {
position: absolute;
top: 0.75rem;
right: 0.75rem;
background: var(--light-gray);
border: none;
border-radius: 50%;
width: 2rem;
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 0.9rem;
color: var(--dark-navy);
z-index: 1;
transition: background 0.15s;
}
.hw-modal-close:hover {
background: var(--border-gray);
}
.hw-modal-img-wrap {
width: 100%;
height: 260px;
overflow: hidden;
border-radius: 16px 16px 0 0;
}
.hw-modal-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hw-modal-body {
padding: 1.5rem 1.75rem 2rem;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.hw-modal-cat {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-gray);
margin: 0;
}
.hw-modal-title {
font-size: 1.3rem;
font-weight: 700;
color: var(--dark-navy);
margin: 0;
}
.hw-modal-sku {
font-size: 0.78rem;
color: var(--text-gray);
margin: 0;
}
.hw-modal-price {
font-size: 1.2rem;
font-weight: 700;
color: var(--dark-navy);
margin: 0;
}
.hw-modal-desc {
font-size: 0.9rem;
color: var(--text-gray);
line-height: 1.6;
margin: 0.25rem 0 0.5rem;
}
.hw-modal-add-btn {
padding: 0.75rem 1.5rem;
background: var(--primary-yellow);
color: var(--dark-navy);
border: none;
border-radius: 10px;
font-size: 1rem;
font-weight: 700;
cursor: pointer;
transition: background 0.2s;
align-self: flex-start;
}
.hw-modal-add-btn:hover {
background: var(--accent-gold);
}
@media (max-width: 900px) {
.hw-page {
grid-template-columns: 1fr;
}
.hw-sidebar {
position: fixed;
top: 0;
left: -320px;
width: 300px;
height: 100%;
max-height: 100%;
border-radius: 0 16px 16px 0;
z-index: 300;
transition: left 0.28s ease;
overflow-y: auto;
}
.hw-sidebar--open {
left: 0;
}
.hw-sidebar-close {
display: flex;
}
.hw-mobile-filter-btn {
display: flex;
}
}
@media (max-width: 480px) {
.hw-grid {
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
}
.hw-modal-body {
padding: 1rem 1.25rem 1.5rem;
}
.hw-modal-img-wrap {
height: 180px;
}
}
/* ============================================================================
RESPONSIVE HEADER — authoritative, placed LAST so it wins over the earlier
duplicate .header-content / .auth-buttons / .search-box declarations in this
file. Selectors are .header-prefixed for extra specificity as a belt-and-braces
guard. Desktop >1240px: full header. 1240-1340: tightened spacing. <=1240px:
nav collapses into the hamburger (JS shows .mobile-menu-btn + adds .mobile-nav
at the same 1240 breakpoint) so nothing overflows or gets clipped.
============================================================================ */
@media (max-width: 1340px) {
.header .header-content { gap: 1rem; }
.header .header-actions { gap: 0.85rem; }
.header .main-nav ul { gap: 1.1rem; }
.header .search-box input { width: 170px; }
}
@media (max-width: 1240px) {
.header .header-content {
display: flex;
align-items: center;
gap: 1rem;
}
.header .logo { margin-right: auto; } /* push actions + hamburger to the right */
.header .search-box { display: none; } /* reclaim space; search stays on desktop */
.header .mobile-menu-btn { align-items: center; justify-content: center; }
/* Hamburger dropdown. Defined here (high specificity) rather than relying on the
JS-injected .mobile-nav styles, which were being overridden AND left the links
as white-on-white. JS still toggles the .mobile-nav / .nav-open classes. */
.header .main-nav.mobile-nav {
position: absolute;
top: 100%;
left: 0;
right: 0;
justify-self: auto;
background: var(--nav-indigo, #2b2350);
box-shadow: 0 16px 30px rgba(16, 11, 36, 0.35);
border-top: 1px solid rgba(255, 255, 255, 0.08);
transform: translateY(-10px);
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
}
.header .main-nav.mobile-nav.nav-open {
transform: translateY(0);
opacity: 1;
visibility: visible;
}
.header .main-nav.mobile-nav ul {
flex-direction: column;
align-items: stretch;
gap: 0;
padding: 0.5rem 0;
}
.header .main-nav.mobile-nav li { white-space: normal; }
.header .main-nav.mobile-nav a {
display: block;
padding: 0.95rem 1.75rem;
font-size: 1rem;
color: rgba(255, 255, 255, 0.92);
}
.header .main-nav.mobile-nav a:hover,
.header .main-nav.mobile-nav a.active { color: #fff; background: rgba(255, 255, 255, 0.06); }
.header .main-nav.mobile-nav a::after { display: none; } /* drop the underline animation */
}
@media (max-width: 560px) {
/* The logo is what sets the bar's height, so the shared --header-h follows it
down here. Everything that offsets content for the fixed header reads that
variable, so nothing has to be told twice. */
:root { --header-h: 64px; }
.header .header-content { padding-left: 14px; padding-right: 14px; gap: 0.6rem; }
.header .logo-img { height: 50px; }
.header .header-actions { gap: 0.5rem; }
.header .search-box { display: none; }
/* On phones the auth buttons don't fit; login/account moves into the hamburger */
.header .auth-buttons { display: none; }
.header .quote-btn { padding: 0.45rem 0.85rem; font-size: 0.85rem; }
}
/* "My Account" entry that only appears inside the mobile hamburger dropdown */
.main-nav .mobile-only-account { display: none; }
.main-nav.mobile-nav .mobile-only-account { display: block; }
/* Hardware coming-soon page */
.hw-soon-headline {
text-align: center;
padding: 70px 20px 50px;
}
.hw-soon-headline h2 {
font-family: 'Playfair Display', serif;
font-size: 3.2rem;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--dark-navy, #1a2340);
}
.hw-soon-banner img {
display: block;
width: 100%;
max-width: 1600px;
margin: 0 auto;
height: auto;
}
/* Inquiry (Request a Quote) modal */
.inquiry-overlay {
position: fixed;
inset: 0;
background: rgba(15, 23, 42, 0.55);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
padding: 20px;
}
.inquiry-modal {
position: relative;
background: #fff;
max-width: 560px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
border-radius: 8px;
padding: 36px 40px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.inquiry-modal h2 {
font-family: 'Playfair Display', serif;
text-align: center;
font-size: 1.8rem;
color: var(--dark-navy, #1a2340);
}
.inquiry-sub {
text-align: center;
color: #555;
font-size: 0.95rem;
margin: 8px 0 24px;
}
.inquiry-close {
position: absolute;
top: 14px;
right: 16px;
background: none;
border: none;
font-size: 1.1rem;
color: #666;
cursor: pointer;
}
.inquiry-field {
display: grid;
grid-template-columns: 120px 1fr;
align-items: start;
gap: 10px;
margin-bottom: 14px;
}
.inquiry-field label {
font-weight: 600;
font-size: 0.92rem;
padding-top: 10px;
}
.inquiry-field .req { color: #d33; }
.inquiry-field input,
.inquiry-field textarea {
width: 100%;
padding: 10px 12px;
border: 1px solid #ccc;
border-radius: 6px;
font: inherit;
font-size: 0.92rem;
}
.inquiry-field input:focus,
.inquiry-field textarea:focus {
outline: 2px solid var(--primary-yellow, #F5C34B);
border-color: transparent;
}
.inquiry-actions {
display: flex;
justify-content: center;
gap: 16px;
margin-top: 22px;
}
.inquiry-cancel {
padding: 12px 34px;
background: #fff;
border: 1px solid var(--dark-navy, #1a2340);
border-radius: 6px;
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
cursor: pointer;
}
.inquiry-submit {
padding: 12px 34px;
background: var(--primary-yellow, #F5C34B);
border: none;
border-radius: 6px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--dark-navy, #1a2340);
cursor: pointer;
}
.inquiry-submit:disabled { opacity: 0.6; cursor: wait; }
.inquiry-msg { text-align: center; margin-top: 14px; font-size: 0.92rem; }
.inquiry-msg.success { color: #1a7f37; }
.inquiry-msg.error { color: #c62828; }
@media (max-width: 560px) {
.inquiry-field { grid-template-columns: 1fr; gap: 4px; }
.inquiry-field label { padding-top: 0; }
.hw-soon-headline h2 { font-size: 2.2rem; }
}
/* Legal stub pages */
.legal-page {
padding: 50px 0 80px;
}
.legal-page .container {
max-width: 760px;
}
.legal-updated {
color: #777;
font-size: 0.88rem;
margin-bottom: 28px;
}
.legal-page h2 {
font-size: 1.25rem;
color: var(--dark-navy, #1a2340);
margin: 28px 0 10px;
}
.legal-page p {
line-height: 1.7;
color: #333;
}
/* Google sign-in button (auth modals) */
.google-signin-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 11px 16px;
background: #fff;
color: #3c4043;
border: 1px solid #dadce0;
border-radius: 8px;
font-size: 0.95rem;
font-weight: 500;
text-decoration: none;
transition: background 0.15s, box-shadow 0.15s;
}
.google-signin-btn:hover {
background: #f7f8f8;
box-shadow: 0 1px 3px rgba(60, 64, 67, 0.2);
}
.auth-divider {
display: flex;
align-items: center;
text-align: center;
color: #9aa0a6;
font-size: 0.82rem;
margin: 16px 0;
}
.auth-divider::before,
.auth-divider::after {
content: '';
flex: 1;
border-bottom: 1px solid #e0e0e0;
}
.auth-divider span {
padding: 0 12px;
}
/* Quote workspace: the live quote replaces cart-page navigation in product flows.
Premium form-first dialog styled on the reference page tokens:
navy #191A2E/#2E2A4F, gold #F2C625, heading navy #1F1A38, copy #575568. */
body.quote-workspace-open { overflow: hidden; }
.quote-trigger { cursor: pointer; font: inherit; }
.quote-workspace[hidden] { display: none; }
.quote-workspace {
--qw-pad-x: clamp(1.4rem, 3.4vw, 2.5rem);
--qw-pad-b: clamp(1.5rem, 3vw, 2rem);
position: fixed;
inset: 0;
z-index: 1000001;
display: grid;
place-items: center;
padding: 1.5rem;
}
.quote-workspace__backdrop {
position: absolute;
inset: 0;
background: rgba(13, 11, 33, 0.72);
backdrop-filter: blur(7px);
}
.quote-workspace__dialog {
position: relative;
width: min(100%, 700px);
max-height: min(90vh, 880px);
overflow: auto;
scrollbar-width: thin;
scrollbar-color: rgba(46, 42, 79, 0.35) transparent;
background: #fff;
border-radius: 20px;
box-shadow: 0 32px 80px rgba(10, 8, 30, 0.45), 0 8px 24px rgba(10, 8, 30, 0.25);
}
.quote-workspace__close {
position: sticky;
z-index: 3;
top: 1rem;
margin: 1rem 1rem -3.6rem auto;
width: 2.6rem;
height: 2.6rem;
display: grid;
place-items: center;
border: 1px solid rgba(31, 26, 56, 0.14);
border-radius: 50%;
background: #fff;
color: #1F1A38;
box-shadow: 0 4px 14px rgba(10, 8, 30, 0.18);
cursor: pointer;
transition: background-color 0.15s ease, transform 0.15s ease;
}
.quote-workspace__close:hover { background: #F2C625; }
.quote-workspace__close:active { transform: scale(0.94); }
/* Navy masthead */
.quote-workspace__header {
margin: 0;
padding: clamp(1.6rem, 3vw, 2.2rem) var(--qw-pad-x) clamp(1.5rem, 3vw, 2rem);
background: linear-gradient(135deg, #191A2E 0%, #2E2A4F 100%);
}
.quote-workspace__eyebrow {
margin: 0 0 0.55rem;
color: #F2C625;
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.16em;
text-transform: uppercase;
}
.quote-workspace__header h2 {
margin: 0;
color: #fff;
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(1.7rem, 3.2vw, 2.35rem);
line-height: 1.08;
}
.quote-workspace__header p:last-child {
margin: 0.7rem 0 0;
max-width: 34rem;
color: rgba(255, 255, 255, 0.72);
font-size: 0.95rem;
line-height: 1.55;
}
/* Panels */
.quote-workspace__form { padding: clamp(1.4rem, 3vw, 1.9rem) var(--qw-pad-x) var(--qw-pad-b); }
.quote-workspace__items {
padding: clamp(1.3rem, 2.6vw, 1.8rem) var(--qw-pad-x);
background: #F7F8FB;
border-bottom: 1px solid #E7E9F0;
}
.quote-workspace__section-heading {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
gap: 0.5rem 1rem;
margin-bottom: 0.9rem;
}
.quote-workspace__section-heading h3 {
display: inline-flex;
align-items: center;
gap: 0.45rem;
margin: 0;
color: #1F1A38;
font-size: 1.02rem;
font-weight: 700;
white-space: nowrap;
}
.quote-workspace__section-heading h3 span {
padding: 0.12rem 0.55rem;
border-radius: 999px;
background: #ECEEF4;
color: #575568;
font-size: 0.78rem;
font-weight: 700;
}
.quote-workspace__section-heading > span { color: #8B93A3; font-size: 0.82rem; font-weight: 500; }
.quote-workspace__text-link {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.42rem 0.95rem;
border: 1px solid #D8DCE5;
border-radius: 999px;
background: #fff;
color: #1F1A38;
font-size: 0.8rem;
font-weight: 700;
cursor: pointer;
transition: border-color 0.15s ease, background-color 0.15s ease;
}
.quote-workspace__text-link:hover { border-color: #1F1A38; background: #FFF8E1; }
.quote-workspace__text-link i { color: #A8830B; font-size: 0.72rem; }
.quote-workspace__item {
display: grid;
grid-template-columns: 60px minmax(0, 1fr);
gap: 0.35rem 0.9rem;
align-items: start;
padding: 1rem 0;
border-top: 1px solid #E7E9F0;
}
.quote-workspace__item:first-of-type { border-top: 0; }
.quote-workspace__item-image,
.quote-workspace__item-image img,
.quote-workspace__item-placeholder { width: 60px; height: 60px; }
.quote-workspace__item-image img { object-fit: cover; border-radius: 12px; }
.quote-workspace__item-placeholder { display: grid; place-items: center; border-radius: 12px; background: #ECEEF4; color: #8B93A3; font-size: 1.1rem; }
.quote-workspace__item-copy h4 { margin: 0; color: #1F1A38; font-size: 0.95rem; line-height: 1.3; }
.quote-workspace__sku { margin: 0.18rem 0 0; color: #8B93A3; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; }
.quote-workspace__details { display: grid; gap: 0.22rem; margin: 0.45rem 0 0; color: #575568; font-size: 0.78rem; line-height: 1.45; }
.quote-workspace__details div { display: grid; grid-template-columns: minmax(6.5rem, auto) 1fr; gap: 0.4rem; }
.quote-workspace__details dt { font-weight: 700; color: #46425F; text-transform: capitalize; }
.quote-workspace__details dd { margin: 0; overflow-wrap: anywhere; }
.quote-workspace__remove {
margin: 0.5rem 0 0;
padding: 0;
border: 0;
background: transparent;
color: #9B3B2B;
font-size: 0.8rem;
font-weight: 700;
cursor: pointer;
}
.quote-workspace__remove:hover { color: #6E2113; text-decoration: underline; }
.quote-workspace__item-actions {
grid-column: 2;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
margin-top: 0.35rem;
color: #1F1A38;
font-size: 0.95rem;
}
.quote-workspace__quantity {
display: inline-flex;
align-items: center;
border: 1px solid #D8DCE5;
border-radius: 999px;
background: #fff;
overflow: hidden;
}
.quote-workspace__quantity button {
width: 2.4rem;
height: 2.4rem;
border: 0;
background: transparent;
color: #1F1A38;
cursor: pointer;
font-size: 1rem;
transition: background-color 0.12s ease;
}
.quote-workspace__quantity button:hover { background: #F2C625; }
.quote-workspace__quantity span { min-width: 2rem; text-align: center; font-size: 0.85rem; font-weight: 700; }
/* Form fields */
.quote-workspace__form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 0.9rem; }
.quote-workspace__field { display: grid; gap: 0.4rem; color: #46425F; font-size: 0.8rem; font-weight: 600; }
.quote-workspace__field--full { grid-column: 1 / -1; }
.quote-workspace__optional {
margin-left: 0.35rem;
color: #8B93A3;
font-size: 0.68rem;
font-style: normal;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.quote-workspace__field input,
.quote-workspace__field textarea {
min-width: 0;
padding: 0.78rem 0.9rem;
border: 1px solid #D8DCE5;
border-radius: 10px;
background: #FBFBFD;
color: #1F1A38;
font: inherit;
font-size: 0.95rem;
font-weight: 400;
transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.quote-workspace__field textarea { min-height: 7.5rem; resize: vertical; }
.quote-workspace__field input::placeholder,
.quote-workspace__field textarea::placeholder { color: #A7ACBC; }
.quote-workspace__field input:hover,
.quote-workspace__field textarea:hover { border-color: #B9BECD; }
.quote-workspace__field input:focus,
.quote-workspace__field textarea:focus {
outline: none;
border-color: #2E2A4F;
background: #fff;
box-shadow: 0 0 0 3px rgba(242, 198, 37, 0.3);
}
.quote-workspace__delivery-heading { margin-top: 1.7rem; padding-top: 1.4rem; border-top: 1px solid #E7E9F0; }
.quote-workspace__error {
margin: 1.1rem 0 0;
padding: 0.8rem 1rem;
border: 1px solid #F0B9AF;
border-left: 4px solid #B42318;
border-radius: 10px;
background: #FFF3F1;
color: #8A1D12;
font-size: 0.88rem;
line-height: 1.45;
}
/* Submit bar stays reachable while the form scrolls. */
.quote-workspace__submit-row {
position: sticky;
bottom: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin: 1.5rem calc(var(--qw-pad-x) * -1) calc(var(--qw-pad-b) * -1);
padding: 1rem var(--qw-pad-x) 1.1rem;
border-top: 1px solid #E7E9F0;
background: rgba(255, 255, 255, 0.94);
backdrop-filter: blur(8px);
}
.quote-workspace__submit-row p { display: grid; margin: 0; color: #1F1A38; }
.quote-workspace__submit-row p strong { font-size: 1.3rem; }
.quote-workspace__submit-row p span { color: #8B93A3; font-size: 0.78rem; }
.quote-workspace__submit-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.75rem; }
.quote-workspace__primary,
.quote-workspace__secondary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6rem;
min-height: 2.95rem;
padding: 0.72rem 1.35rem;
border-radius: 9px;
font-weight: 700;
font-size: 0.93rem;
letter-spacing: 0.01em;
text-decoration: none;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.quote-workspace__primary { border: 0; background: #F2C625; color: #191A2E; box-shadow: 0 6px 18px rgba(242, 198, 37, 0.35); }
.quote-workspace__primary:hover { background: #E3B71C; color: #191A2E; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(242, 198, 37, 0.42); }
.quote-workspace__primary:active { transform: translateY(0); }
.quote-workspace__primary:disabled { opacity: 0.7; cursor: wait; transform: none; box-shadow: none; }
.quote-workspace__primary:disabled::after {
content: '';
width: 1em;
height: 1em;
border: 2px solid rgba(25, 26, 46, 0.3);
border-top-color: #191A2E;
border-radius: 50%;
animation: quote-workspace-spin 0.8s linear infinite;
}
.quote-workspace__secondary { border: 1px solid #C9CDD8; background: #fff; color: #1F1A38; }
.quote-workspace__secondary:hover { border-color: #1F1A38; color: #1F1A38; }
/* Empty state */
.quote-workspace__empty {
width: min(calc(100% - var(--qw-pad-x) * 2), 44rem);
margin: clamp(1.4rem, 3vw, 2rem) auto clamp(1.8rem, 3.5vw, 2.6rem);
padding: 2.8rem 1.5rem;
text-align: center;
border-radius: 16px;
background: #F7F8FB;
}
.quote-workspace__empty > i {
display: grid;
place-items: center;
width: 3.4rem;
height: 3.4rem;
margin: 0 auto 1rem;
border-radius: 50%;
background: rgba(242, 198, 37, 0.18);
color: #A8830B;
font-size: 1.4rem;
}
.quote-workspace__empty h3 { margin: 0; color: #1F1A38; font-family: 'Playfair Display', Georgia, serif; font-size: 1.45rem; }
.quote-workspace__empty p { margin: 0.6rem auto 1.3rem; max-width: 26rem; color: #575568; line-height: 1.55; }
/* Success state */
.quote-workspace__success {
max-width: 54rem;
margin: 0 auto;
padding: clamp(2rem, 4vw, 2.8rem) var(--qw-pad-x) clamp(1.8rem, 3.5vw, 2.4rem);
text-align: center;
}
.quote-workspace__success h2 {
margin: 0;
color: #1F1A38;
font-family: 'Playfair Display', Georgia, serif;
font-size: clamp(1.8rem, 3.4vw, 2.5rem);
line-height: 1.1;
}
.quote-workspace__success > p { margin: 0.75rem auto 0; max-width: 32rem; color: #575568; line-height: 1.55; }
.quote-workspace__success .quote-workspace__eyebrow { margin-top: 1.1rem; color: #A8830B; }
.quote-workspace__success-mark {
display: grid;
place-items: center;
width: 3.6rem;
height: 3.6rem;
margin: 0 auto;
border-radius: 50%;
background: #F2C625;
color: #191A2E;
font-size: 1.35rem;
box-shadow: 0 10px 26px rgba(242, 198, 37, 0.4);
}
.quote-workspace__pdf {
width: 100%;
height: min(48vh, 560px);
margin-top: 1.5rem;
border: 1px solid #E7E9F0;
border-radius: 14px;
background: #F7F8FB;
}
.quote-workspace__pdf-link { margin: 0.9rem auto 0; }
.quote-workspace__add-another { margin: 1.1rem auto 0; }
/* Entrance motion (transform/opacity only) */
@media (prefers-reduced-motion: no-preference) {
.quote-workspace__backdrop { animation: quote-workspace-fade 0.22s ease-out; }
.quote-workspace__dialog { animation: quote-workspace-rise 0.28s cubic-bezier(0.2, 0.9, 0.3, 1); }
}
@keyframes quote-workspace-fade { from { opacity: 0; } }
@keyframes quote-workspace-rise { from { opacity: 0; transform: translateY(16px) scale(0.97); } }
@keyframes quote-workspace-spin { to { transform: rotate(360deg); } }
/* Two-column desktop: form leads, product summary sits beside it. */
@media (min-width: 981px) {
.quote-workspace__dialog { width: min(100%, 1080px); }
.quote-workspace__content:has(.quote-workspace__form) {
display: grid;
grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr);
grid-template-areas: "head head" "form summary";
align-items: stretch;
}
.quote-workspace__content:has(.quote-workspace__form) .quote-workspace__header { grid-area: head; }
.quote-workspace__content:has(.quote-workspace__form) .quote-workspace__form { grid-area: form; }
.quote-workspace__content:has(.quote-workspace__form) .quote-workspace__items {
grid-area: summary;
border-bottom: 0;
border-left: 1px solid #E7E9F0;
}
}
@media (max-width: 640px) {
.quote-workspace { --qw-pad-x: 1.15rem; --qw-pad-b: 1.2rem; padding: 0; align-items: end; }
.quote-workspace__dialog { width: 100%; max-height: 94dvh; border-radius: 22px 22px 0 0; }
.quote-workspace__close { width: 2.75rem; height: 2.75rem; margin-bottom: -3.75rem; }
.quote-workspace__header { padding: 1.5rem var(--qw-pad-x) 1.4rem; }
.quote-workspace__form { padding: 1.3rem var(--qw-pad-x) var(--qw-pad-b); }
.quote-workspace__items { padding: 1.2rem var(--qw-pad-x); }
.quote-workspace__item { grid-template-columns: 58px minmax(0, 1fr); gap: 0.3rem 0.75rem; }
.quote-workspace__item-image, .quote-workspace__item-image img, .quote-workspace__item-placeholder { width: 58px; height: 58px; }
.quote-workspace__text-link { min-height: 2.75rem; padding: 0.5rem 1rem; }
.quote-workspace__remove { min-height: 2.4rem; }
.quote-workspace__quantity button { width: 2.75rem; height: 2.75rem; }
.quote-workspace__form-grid { grid-template-columns: 1fr; }
.quote-workspace__field--full { grid-column: auto; }
.quote-workspace__submit-row { flex-direction: column; align-items: stretch; }
.quote-workspace__submit-actions { width: 100%; }
.quote-workspace__submit-actions > * { flex: 1; }
.quote-workspace__primary { width: 100%; }
.quote-workspace__section-heading { align-items: flex-start; flex-direction: column; gap: 0.5rem; }
.quote-workspace__details div { grid-template-columns: 1fr; gap: 0.05rem; }
.quote-workspace__pdf { height: 52vh; }
}
/* Public header consolidation (final cascade). */
/* The header is global chrome, so it carries its own typeface instead of
inheriting each page's. `body { font-family: 'Inter' }` still governs page
copy on the pages that were built against it, and the reference pages set
Mukta on the body — which meant the identical header markup rendered in two
different fonts and the same "Receive a Quote" button measured 160px on /,
168px on /hardware and 173px on /cart. One stack, declared once, for every
control in the bar. */
.header,
.header a,
.header button,
.header input,
.header select { font-family: var(--ref-sans); }
.public-menu-toggle { display: none; min-width: 44px; min-height: 44px; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; background: transparent; color: #fff; cursor: pointer; }
.header .search-box input,
.header .search-box input:focus { width: 174px; min-width: 0; transition: none; }
.quote-workspace button:focus-visible,
.quote-workspace a:focus-visible,
.public-menu-toggle:focus-visible { outline: 3px solid rgba(242, 198, 37, 0.65); outline-offset: 2px; }
.quote-workspace__primary:focus-visible { outline-color: #2E2A4F; }
/* SNB PDF reference pages: one semantic, responsive layout system. */
:is(body.reference-home, body.reference-commercial, body.reference-cta) {
--reference-purple: #2e2a4f;
--reference-gold: #f2c625;
--reference-deep-navy: #1e1a38;
--reference-badge: #262a4f;
--reference-copy: #575568;
--reference-cta: #191a2e;
--reference-orange: #f97316;
--reference-footer: #10172a;
--reference-cream: #e7e2e1;
--reference-rule: #e4e4e8;
background: #fff;
color: var(--reference-deep-navy);
font-family: var(--ref-sans);
overflow-x: clip;
}
:is(body.reference-home, body.reference-commercial) *,
:is(body.reference-home, body.reference-commercial) *::before,
:is(body.reference-home, body.reference-commercial) *::after {
box-sizing: border-box;
}
/* Lucide inline-sprite icons (replace hand-drawn SVGs) */
body.reference-home .reference-assurances .ref-icon,
body.reference-home .reference-visual-benefits--iconic .ref-icon,
body.reference-home .reference-frame-features .ref-icon {
display: inline-block;
fill: none;
stroke: currentColor;
stroke-width: 2;
}
body.reference-home .reference-assurances .ref-icon {
width: clamp(1.5rem, 2.7vw, 2rem);
height: clamp(1.5rem, 2.7vw, 2rem);
color: var(--reference-gold);
}
body.reference-home .reference-assurances li:last-child .ref-icon { color: #fff; }
body.reference-home .reference-visual-benefits--iconic .ref-icon {
width: clamp(.9rem, 1.85vw, 1.3rem);
height: clamp(.9rem, 1.85vw, 1.3rem);
color: var(--reference-gold);
}
body.reference-home .reference-hardware-benefits .ref-icon { color: var(--reference-deep-navy); }
body.reference-home .reference-frame-features .ref-icon {
grid-row: 1 / 3;
box-sizing: border-box;
width: clamp(1rem, 2.1vw, 1.5rem);
height: clamp(1rem, 2.1vw, 1.5rem);
padding: .18rem;
border-radius: 50%;
background: var(--reference-deep-navy);
color: #fff;
}
:is(body.reference-home, body.reference-commercial) main {
padding-top: var(--header-h);
}
:is(body.reference-home, body.reference-commercial) main > section > .container,
:is(body.reference-home, body.reference-commercial) .reference-products > .container {
width: calc(100% - clamp(2.5rem, 6vw, 8rem));
max-width: none;
margin-inline: auto;
padding-inline: 0;
}
:is(body.reference-home, body.reference-commercial) :is(a, button, input):focus-visible {
outline: 3px solid color-mix(in srgb, var(--reference-gold) 72%, white);
outline-offset: 3px;
}
:is(body.reference-home, body.reference-commercial) .search-dropdown {
top: calc(100% + .5rem);
right: 0;
left: auto;
width: min(24rem, calc(100vw - 2rem));
max-width: none;
}
:is(body.reference-home, body.reference-commercial) .reference-button,
:is(body.reference-home, body.reference-commercial) .solution-btn,
:is(body.reference-home, body.reference-commercial) .cta-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 40px;
border-radius: 4px;
font-size: clamp(.68rem, 1vw, .78rem);
font-weight: 800;
letter-spacing: .02em;
line-height: 1;
text-align: center;
text-decoration: none;
text-transform: uppercase;
transition: transform 180ms ease-out, background-color 180ms ease-out, border-color 180ms ease-out, color 180ms ease-out;
}
:is(body.reference-home, body.reference-commercial) :is(.reference-button, .solution-btn, .cta-button):hover {
transform: translateY(-2px);
}
/* The centring block above is scoped to home/commercial and also targets
.reference-button / .solution-btn, which do not exist on the other pages —
so rather than widen it, the CTA band's button gets just the centring it
needs. Without this the button keeps padding:0 and a fixed height from the
band rules, leaving the label sitting against the top edge instead of
centred. */
body.reference-cta .final-cta .cta-button {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
text-align: center;
text-decoration: none;
transition: transform 180ms ease-out, background-color 180ms ease-out;
}
body.reference-cta .final-cta .cta-button:hover {
transform: translateY(-2px);
}
body.reference-home .reference-home-hero {
position: relative;
display: flex;
min-height: 0;
height: clamp(465px, 50.65vw, 680px);
overflow: clip;
isolation: isolate;
background: #0d1726;
}
body.reference-home .reference-hero-media,
body.reference-home .reference-hero-media img,
body.reference-commercial .reference-banner-media,
body.reference-commercial .reference-banner-media img {
display: block;
width: 100%;
height: 100%;
}
body.reference-home .reference-hero-media,
body.reference-commercial .reference-banner-media {
position: absolute;
inset: 0;
z-index: 0;
}
body.reference-home .reference-hero-media img,
body.reference-commercial .reference-banner-media img {
position: relative;
z-index: 0;
object-fit: cover;
object-position: center;
}
body.reference-home .reference-hero-shade {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(90deg, rgba(4,18,31,.22) 0%, rgba(4,18,31,.14) 35%, rgba(4,18,31,.04) 65%, rgba(4,18,31,0) 100%);
pointer-events: none;
}
body.reference-home .reference-home-hero-content {
position: relative;
z-index: 2;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
min-height: 0;
height: 100%;
width: 100%;
max-width: none;
margin: 0;
padding: clamp(1.7rem, 3.25vw, 3.4rem) clamp(1.25rem, 4vw, 5rem) clamp(1.4rem, 2.4vw, 2.6rem) clamp(1.4rem, 6vw, 8rem);
}
body.reference-home main > .reference-home-hero > .reference-home-hero-content.container {
width: 100%;
max-width: none;
margin: 0;
padding-left: clamp(1.4rem, 6vw, 8rem);
}
body.reference-home .reference-home-hero h1 {
max-width: 22ch;
margin: 0;
color: #fff;
font-family: var(--ref-cond);
font-size: clamp(2.2rem, 4.1vw, 4.25rem);
font-weight: 700;
letter-spacing: -.035em;
line-height: .99;
text-transform: uppercase;
text-wrap: balance;
}
body.reference-home .reference-home-hero h1 span {
color: var(--reference-gold);
}
body.reference-home .reference-home-hero-content > p {
max-width: 39ch;
margin: clamp(.8rem, 1.45vw, 1.25rem) 0 0;
color: rgba(255,255,255,.96);
font-size: clamp(.76rem, 1.25vw, .95rem);
line-height: 1.52;
}
body.reference-home .reference-hero-actions {
display: flex;
flex-wrap: wrap;
gap: .8rem;
margin-top: clamp(.9rem, 1.65vw, 1.45rem);
}
body.reference-home .reference-hero-actions .reference-button {
min-width: clamp(8rem, 15vw, 10rem);
min-height: 36px;
padding: .75rem 1.2rem;
}
body.reference-home .reference-button-gold {
border: 1px solid var(--reference-gold);
background: var(--reference-gold);
color: #17162c;
}
body.reference-home .reference-hero-actions .reference-quote-action.quote-btn {
height: auto;
border: 1px solid rgba(255,255,255,.72);
border-radius: 4px;
background: rgba(9,24,38,.18);
color: #fff;
}
body.reference-home .reference-assurances {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
width: min(100%, 25rem);
margin: clamp(1.35rem, 2.5vw, 2.25rem) 0 0;
padding: 0;
color: #fff;
list-style: none;
}
body.reference-home .reference-assurances li {
display: grid;
justify-items: start;
align-content: start;
gap: .3rem;
min-width: 0;
padding: 0 clamp(.5rem, 1.1vw, .95rem);
border-right: 1px solid rgba(255,255,255,.28);
text-align: left;
}
body.reference-home .reference-assurances li:first-child {
padding-left: 0;
}
body.reference-home .reference-assurances li:last-child {
border-right: 0;
}
body.reference-home .reference-assurances svg {
width: clamp(1.5rem, 2.7vw, 2rem);
height: clamp(1.5rem, 2.7vw, 2rem);
fill: none;
stroke: var(--reference-gold);
color: var(--reference-gold);
}
body.reference-home .reference-assurances li:last-child svg {
stroke: #fff;
color: #fff;
}
body.reference-home .reference-assurances strong {
color: #fff;
font-size: clamp(.52rem, .82vw, .68rem);
line-height: 1.1;
text-transform: uppercase;
}
body.reference-home .reference-assurances span {
color: rgba(255,255,255,.83);
font-size: clamp(.48rem, .72vw, .62rem);
line-height: 1.3;
}
body.reference-home .reference-intro {
display: grid;
place-items: center;
min-height: clamp(105px, 11.44vw, 145px);
background: #fff;
text-align: center;
}
body.reference-home .reference-intro .container {
display: grid;
justify-items: center;
}
body.reference-home .reference-intro h2,
body.reference-commercial .reference-commercial-intro h2 {
margin: 0;
color: var(--reference-deep-navy);
font-family: "Playfair Display", Georgia, serif;
font-size: clamp(1.55rem, 3vw, 2.65rem);
font-weight: 700;
line-height: 1.08;
text-wrap: balance;
}
body.reference-home .reference-intro-rule {
width: 4.3rem;
height: 2px;
margin: .6rem 0 .5rem;
background: #E2E7EF;
}
body.reference-home .reference-intro p {
margin: 0;
color: #949FAF;
font-size: clamp(.66rem, 1.2vw, .82rem);
}
:is(body.reference-home, body.reference-commercial) .reference-products {
background: #fff;
}
:is(body.reference-home, body.reference-commercial) .reference-product {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
align-items: center;
gap: clamp(1.5rem, 3vw, 3.5rem);
min-width: 0;
padding: clamp(1.8rem, 3.65vw, 3.3rem) 0;
border-bottom: 1px solid var(--reference-rule);
}
body.reference-home .reference-product {
padding: clamp(.75rem, 1.3vw, 1.25rem) 0;
}
body.reference-commercial .reference-product {
padding: clamp(1.35rem, 2.6vw, 1.75rem) 0;
}
:is(body.reference-home, body.reference-commercial) .reference-product:last-child {
border-bottom: 0;
}
:is(body.reference-home, body.reference-commercial) .reference-product--visual-first > :last-child,
:is(body.reference-home, body.reference-commercial) .reference-product--visual-last > :last-child {
grid-row: 1;
}
:is(body.reference-home, body.reference-commercial) .reference-product--visual-first > :last-child {
grid-column: 1;
}
:is(body.reference-home, body.reference-commercial) .reference-product--visual-first > .reference-product-copy {
grid-column: 2;
}
:is(body.reference-home, body.reference-commercial) .reference-product--visual-last > .reference-product-copy {
grid-column: 1;
}
:is(body.reference-home, body.reference-commercial) .reference-product--visual-last > :last-child {
grid-column: 2;
}
:is(body.reference-home, body.reference-commercial) .reference-product--visual-first > :is(.reference-visual, .reference-commercial-figure) {
grid-column: 1;
grid-row: 1;
}
:is(body.reference-home, body.reference-commercial) .reference-product--visual-last > :is(.reference-visual, .reference-commercial-figure) {
grid-column: 2;
grid-row: 1;
}
body.reference-home .reference-product-wide {
grid-column: 1 / -1 !important;
grid-row: 2 !important;
margin-top: 0;
}
body.reference-home .reference-product-wide .solution-btn {
margin-top: clamp(1rem, 1.8vw, 2.3rem);
}
:is(body.reference-home, body.reference-commercial) .reference-product-copy {
min-width: 0;
}
:is(body.reference-home, body.reference-commercial) .reference-product-copy h3 {
margin: 0 0 clamp(.9rem, 1.6vw, 1.25rem);
color: var(--reference-deep-navy);
font-family: "Playfair Display", Georgia, serif;
font-size: clamp(1.48rem, 2.65vw, 2.35rem);
font-weight: 700;
line-height: 1.08;
text-wrap: balance;
}
:is(body.reference-home, body.reference-commercial) .reference-product-copy p {
margin: 0 0 .9rem;
color: var(--reference-copy);
font-size: clamp(.68rem, 1.16vw, .84rem);
line-height: 1.56;
text-align: justify;
text-justify: inter-word;
}
:is(body.reference-home, body.reference-commercial) .solution-btn {
min-width: 0;
min-height: 0;
margin-top: .7rem;
padding: .46rem 1.15rem;
border: 1px solid var(--reference-gold);
border-radius: 999px;
background: var(--reference-gold);
color: var(--reference-deep-navy);
font-size: .64rem;
font-weight: 700;
letter-spacing: .01em;
text-transform: none;
}
body.reference-home .reference-list-block {
margin: 1rem 0 .3rem;
}
body.reference-home .reference-list-block h4 {
margin: 0 0 .55rem;
color: var(--reference-deep-navy);
font-size: .78rem;
font-weight: 800;
text-decoration: underline;
text-decoration-thickness: .09em;
text-underline-offset: .22em;
}
body.reference-home .reference-feature-list {
display: grid;
gap: .36rem;
margin: 0;
padding: 0;
color: var(--reference-copy);
font-size: clamp(.6rem, .92vw, .72rem);
line-height: 1.35;
list-style: none;
}
body.reference-home .reference-feature-list--two {
display: block;
columns: 2;
column-gap: 1.4rem;
}
body.reference-home .reference-feature-list--two li {
break-inside: avoid;
margin-bottom: .36rem;
}
body.reference-home .reference-feature-list li {
position: relative;
padding-left: 1.6em;
}
body.reference-home .reference-feature-list li::before {
content: "\203A";
position: absolute;
top: .12em;
left: 0;
display: grid;
place-items: center;
width: 1.08em;
height: 1.08em;
padding-bottom: .08em;
border-radius: 50%;
background: var(--reference-gold);
color: #fff;
font-size: 1em;
font-weight: 700;
line-height: 1;
}
/* Lucide chrome icons (sprite) — sized to match the former glyphs */
.search-box button .ref-icon { display: block; width: .95rem; height: .95rem; }
.public-menu-toggle .ref-icon { display: block; width: 1.15rem; height: 1.15rem; }
.footer-newsletter button .ref-icon { display: block; width: .72rem; height: .72rem; }
.user-menu-btn .ref-icon { display: inline-block; width: .85rem; height: .85rem; vertical-align: -.15em; }
.user-dropdown .ref-icon { display: inline-block; width: .8rem; height: .8rem; margin-right: .25rem; vertical-align: -.12em; }
body.reference-home .reference-visual,
body.reference-commercial .reference-commercial-figure {
position: relative;
min-width: 0;
margin: 0;
overflow: hidden;
border-radius: 2.2rem 0 0;
background: #e7e5df;
isolation: isolate;
}
body.reference-home .reference-visual {
min-height: 0;
}
/* M1 — fixed-aspect fused stage (measured 421x241 @ 918 design canvas) */
body.reference-home .reference-dual-door-visual {
position: relative;
aspect-ratio: 421 / 241;
container-type: inline-size;
background: linear-gradient(160deg, #f4f2ec 0%, #e9e6df 100%);
}
body.reference-home .reference-card-title {
position: absolute;
top: 0.35cqw;
right: 8cqw;
left: 8cqw;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
line-height: 1;
}
body.reference-home .reference-card-eyebrow {
color: #223349;
font-family: var(--ref-sans);
font-size: 1.9cqw;
font-weight: 700;
letter-spacing: .62em;
text-indent: .62em;
text-transform: uppercase;
}
body.reference-home .reference-card-title strong {
margin-top: .06em;
color: #223349;
font-family: var(--ref-cond);
font-size: 5.5cqw;
font-weight: 700;
letter-spacing: .015em;
text-transform: uppercase;
}
body.reference-home .reference-card-title strong .reference-card-accent {
color: #8b6034;
}
body.reference-home .reference-card-title small {
display: flex;
align-items: center;
gap: 1.1cqw;
margin-top: .3cqw;
color: #7c7a8b;
font-family: var(--ref-sans);
font-size: 1.28cqw;
font-weight: 600;
letter-spacing: .08em;
text-transform: uppercase;
}
body.reference-home .reference-card-title small::before,
body.reference-home .reference-card-title small::after {
content: "";
width: 6.2cqw;
height: 1px;
background: #b9b6ad;
}
body.reference-home .reference-m1-bar {
position: absolute;
top: 10.45cqw;
display: grid;
place-items: center;
height: 2.38cqw;
margin: 0;
color: #fff;
font-size: 1.55cqw;
font-weight: 700;
letter-spacing: .1em;
line-height: 1;
text-transform: uppercase;
}
body.reference-home .reference-m1-bar--wood {
left: 15.2cqw;
width: 28.03cqw;
background: linear-gradient(180deg, #7d5b40 0%, #603C1E 100%);
}
body.reference-home .reference-m1-bar--metal {
left: 51.31cqw;
width: 33.96cqw;
background: linear-gradient(180deg, #33415a 0%, #2A3648 100%);
}
body.reference-home .reference-m1-photo {
position: absolute;
top: 12.83cqw;
height: 28.26cqw;
overflow: hidden;
}
body.reference-home .reference-m1-photo--wood {
left: 16.15cqw;
width: 27.32cqw;
}
body.reference-home .reference-m1-photo--metal {
left: 52.02cqw;
width: 23.04cqw;
}
body.reference-home .reference-m1-photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
body.reference-home .reference-m1-list {
position: absolute;
top: 13.57cqw;
bottom: 16.31cqw;
display: flex;
flex-direction: column;
}
body.reference-home .reference-m1-list--wood {
left: 44cqw;
width: 7.8cqw;
}
body.reference-home .reference-m1-list--metal {
left: 75.6cqw;
width: 9.7cqw;
}
body.reference-home .reference-m1-list .reference-door-icon {
flex: 0 0 auto;
align-self: flex-start;
width: 2.9cqw;
height: auto;
margin: 0 0 0.92cqw;
color: #9a7642;
}
body.reference-home .reference-m1-list--metal .reference-door-icon {
color: #3a3e6b;
}
body.reference-home .reference-m1-list ul {
display: grid;
align-content: space-between;
flex: 1;
gap: 0.4cqw;
margin: 0;
padding: 0;
color: #46425f;
font-size: 1.14cqw;
font-weight: 600;
line-height: 1.18;
list-style: none;
}
body.reference-home .reference-m1-list li {
position: relative;
padding-left: 1.7cqw;
}
body.reference-home .reference-m1-list li::before {
content: "";
position: absolute;
top: .35em;
left: 0;
width: .75cqw;
height: .75cqw;
border-radius: 50%;
background: #9a7642;
}
body.reference-home .reference-m1-list--metal li::before {
background: #4a5568;
}
body.reference-home .reference-door-thumbs {
position: absolute;
top: 42.52cqw;
left: 0;
width: 85.51cqw;
height: 11.16cqw;
overflow: hidden;
background: #1B2838;
}
body.reference-home .reference-door-thumbs img {
position: absolute;
top: 10.64%;
display: block;
height: 76.60%;
object-fit: fill;
}
body.reference-home .reference-door-thumb--01 { left: 18.61%; width: 12.19%; }
body.reference-home .reference-door-thumb--02 { left: 33.92%; width: 5.50%; }
body.reference-home .reference-door-thumb--03 { left: 41.81%; width: 8.06%; }
body.reference-home .reference-door-thumb--04 { left: 51.11%; width: 6.36%; }
body.reference-home .reference-door-thumb--05 { left: 60.86%; width: 8.31%; }
body.reference-home .reference-door-thumb--06 { left: 72.50%; width: 4.72%; }
body.reference-home .reference-door-thumb--07 { left: 81.42%; width: 7.75%; }
body.reference-home .reference-door-thumb--08 { left: 92.50%; width: 4.97%; }
body.reference-home .reference-visual-benefits.reference-m1-benefits {
position: absolute;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
gap: 5.4cqw;
height: 3.65cqw;
padding: 0 0 0 7cqw;
border-top: 0;
background: #1C3349;
color: #e8edf2;
font-size: 1.19cqw;
}
body.reference-home .reference-visual-benefits.reference-m1-benefits li {
display: flex;
align-items: center;
gap: .8cqw;
}
body.reference-home .reference-m1-benefits .ref-icon {
width: 2cqw;
height: 2cqw;
color: #e8edf2;
}
body.reference-home .reference-visual-benefits {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
margin: 0;
padding: clamp(.5rem, 1.2vw, .8rem) .1rem 0;
border-top: 1px solid #cbc8c1;
color: var(--reference-deep-navy);
font-size: clamp(.42rem, .72vw, .56rem);
font-weight: 700;
line-height: 1.1;
text-align: center;
text-transform: uppercase;
letter-spacing: .02em;
list-style: none;
}
body.reference-home .reference-visual-benefits--iconic li {
display: grid;
justify-items: center;
gap: .25rem;
}
body.reference-home .reference-visual-benefits--iconic svg {
width: clamp(.85rem, 1.8vw, 1.25rem);
height: clamp(.85rem, 1.8vw, 1.25rem);
fill: var(--reference-gold);
}
body.reference-home .reference-feature-visual {
position: relative;
aspect-ratio: 421 / 239;
container-type: inline-size;
}
body.reference-home [data-reference-product="metal-commercial"] .reference-feature-visual {
aspect-ratio: 421 / 241;
}
body.reference-home [data-reference-product="metal-commercial"] .reference-feature-visual > picture img {
object-position: 38% center;
}
body.reference-home .reference-feature-visual > picture {
position: absolute;
inset: 0 44% 0 0;
min-width: 0;
}
body.reference-home .reference-feature-visual > picture img {
display: block;
width: 100%;
height: 100%;
min-height: 100%;
object-fit: cover;
object-position: 68% center;
}
body.reference-home .reference-feature-panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: flex-start;
width: 52.5%;
min-width: 0;
overflow: hidden;
background: var(--reference-cream);
}
body.reference-home .reference-feature-panel:has(.reference-feature-bar--metal) {
width: 51.5%;
background: linear-gradient(160deg, #cbc7c3 0%, #BEB9B5 100%);
}
body.reference-home .reference-feature-bar {
display: grid;
place-items: center;
height: 3.33cqw;
margin: 0 0 0 8.08cqw;
color: #fff;
font-size: 1.7cqw;
font-weight: 700;
letter-spacing: .1em;
line-height: 1;
text-align: center;
text-transform: uppercase;
white-space: nowrap;
}
body.reference-home .reference-feature-bar--wood {
background: linear-gradient(180deg, #7d5b40 0%, #603C1E 100%);
}
body.reference-home .reference-feature-bar--metal {
height: 4.28cqw;
margin: .71cqw 1.43cqw 0 1.38cqw;
font-size: 1.9cqw;
background: linear-gradient(180deg, #33415a 0%, #2A3648 100%);
}
body.reference-home .reference-feature-body {
display: flex;
flex-direction: column;
flex: 1;
padding: 2.85cqw .8cqw 2cqw 5.2cqw;
}
body.reference-home .reference-feature-panel:has(.reference-feature-bar--metal) .reference-feature-body {
padding-left: 2.85cqw;
}
body.reference-home .reference-door-icon {
flex: 0 0 auto;
align-self: flex-start;
width: 8cqw;
height: auto;
margin: 0 0 2cqw 6.65cqw;
color: #9a7642;
}
body.reference-home .reference-feature-panel:has(.reference-feature-bar--metal) .reference-door-icon {
width: 5.9cqw;
margin-left: 1.2cqw;
color: #3a3e6b;
}
body.reference-home .reference-feature-panel-list {
display: block;
columns: 2;
column-gap: 2.6cqw;
margin: 0;
padding: 0;
color: #55525f;
font-size: 2.02cqw;
font-weight: 600;
line-height: 1.28;
list-style: none;
}
body.reference-home .reference-feature-panel-list li {
position: relative;
break-inside: avoid;
margin-bottom: 1.5cqw;
padding-left: 2.4cqw;
}
body.reference-home .reference-feature-panel-list li:nth-child(3) {
break-after: column;
}
body.reference-home .reference-feature-panel-list li::before {
content: "";
position: absolute;
top: .42em;
left: 0;
width: .95cqw;
height: .95cqw;
border-radius: 50%;
background: #8a6a44;
}
body.reference-home .reference-feature-panel:has(.reference-feature-bar--metal) .reference-feature-panel-list li::before {
background: #3f4a5a;
}
/* M4 — fixed-aspect fused stage (measured 421x241 @ 918 design canvas) */
body.reference-home .reference-frame-visual {
position: relative;
aspect-ratio: 421 / 241;
container-type: inline-size;
background: #fafafa;
}
body.reference-home .reference-frame-photo {
position: absolute;
top: 0;
bottom: 0;
left: 0;
display: block;
width: 43.2cqw;
min-width: 0;
overflow: hidden;
}
body.reference-home .reference-frame-photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 40%;
}
body.reference-home .reference-frame-panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 43.2cqw;
display: flex;
flex-direction: column;
padding: 1cqw 1.4cqw 1.5cqw 2.4cqw;
background: linear-gradient(160deg, #f6f7f7 0%, #fafafa 100%);
}
body.reference-home .reference-frame-head strong {
display: block;
color: #14305a;
font-family: var(--ref-cond);
font-size: 6.9cqw;
font-weight: 700;
letter-spacing: .005em;
line-height: .96;
text-transform: uppercase;
white-space: nowrap;
}
body.reference-home .reference-frame-head > span {
display: flex;
align-items: center;
gap: 1.4cqw;
margin-top: .5cqw;
color: #1c3a5c;
font-size: 1.9cqw;
font-weight: 800;
letter-spacing: .17em;
text-transform: uppercase;
}
body.reference-home .reference-frame-head > span::after {
content: "";
flex: 1;
height: 1px;
background: #b9c2cc;
}
body.reference-home .reference-frame-head p {
margin: 1cqw 0 0;
color: #565b66;
font-size: 1.62cqw;
line-height: 1.35;
}
body.reference-home .reference-frame-cols {
display: grid;
flex: 1;
grid-template-columns: 42fr 58fr;
column-gap: 2.4cqw;
margin-top: 1.4cqw;
min-height: 0;
}
body.reference-home .reference-frame-col {
display: flex;
flex-direction: column;
min-width: 0;
}
body.reference-home .reference-frame-subhead {
margin: 0 0 1.2cqw;
padding-bottom: .55cqw;
border-bottom: 1px solid rgba(31,26,56,.22);
color: #1c3a5c;
font-size: 1.78cqw;
font-weight: 800;
letter-spacing: .06em;
text-transform: uppercase;
}
body.reference-home .reference-frame-subhead--finishes {
margin-top: 1.4cqw;
}
body.reference-home .reference-frame-features {
display: grid;
flex: 1;
align-content: space-between;
gap: 1cqw;
margin: 0;
padding: 0;
list-style: none;
}
body.reference-home .reference-frame-col:last-child .reference-frame-features {
flex: 0 1 auto;
align-content: start;
gap: 1.6cqw;
}
body.reference-home .reference-frame-features li {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
column-gap: 1cqw;
row-gap: .25cqw;
align-content: start;
}
body.reference-home .reference-frame-features svg {
grid-row: 1 / 3;
width: 3.1cqw;
height: 3.1cqw;
padding: .55cqw;
border-radius: 50%;
background: #14305a;
fill: #fff;
}
body.reference-home .reference-frame-features b {
align-self: center;
color: #1c3a5c;
font-size: 1.5cqw;
font-weight: 800;
letter-spacing: .02em;
line-height: 1.05;
text-transform: uppercase;
}
body.reference-home .reference-frame-features em {
grid-column: 2;
color: #6d7280;
font-size: 1.28cqw;
font-style: normal;
line-height: 1.3;
}
body.reference-home .reference-finish-swatches {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: .7cqw;
margin: 0;
padding: 0;
list-style: none;
}
body.reference-home .reference-finish-swatches li {
display: grid;
justify-items: center;
align-content: start;
gap: .5cqw;
color: #6b7078;
font-size: .98cqw;
font-weight: 700;
letter-spacing: .02em;
text-transform: uppercase;
text-align: center;
}
body.reference-home .reference-finish-swatches i {
display: block;
width: 3.1cqw;
aspect-ratio: 1;
border: 1px solid rgba(31,26,56,.18);
border-radius: 50%;
background: #cfccc4;
}
body.reference-home .reference-finish-swatches li:nth-child(2) i { background: #8f9092; }
body.reference-home .reference-finish-swatches li:nth-child(3) i { background: #1c1c1c; }
body.reference-home .reference-finish-swatches li:nth-child(4) i { background: #b7babd; }
body.reference-home .reference-finish-swatches li:nth-child(5) i { background: #fff; }
body.reference-home .reference-finish-swatches i.reference-swatch-custom {
background: conic-gradient(from 0deg, #e23b3b, #e2b93b, #4fe23b, #3bc7e2, #6a3be2, #e23bc0, #e23b3b);
}
/* M5 — fixed-aspect fused stage (measured 421x240 @ 918 design canvas) */
body.reference-home .reference-hardware-visual {
position: relative;
aspect-ratio: 421 / 240;
container-type: inline-size;
background: #fff;
}
body.reference-home .reference-hardware-hero {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 33.28cqw; /* 58.33% of stage height */
overflow: hidden;
isolation: isolate;
}
body.reference-home .reference-hardware-hero picture {
position: absolute;
inset: 0;
display: block;
}
body.reference-home .reference-hardware-hero img {
display: block;
width: 120.5%;
max-width: none;
height: auto;
margin: -8.6cqw 0 0 -20.5%;
}
body.reference-home .reference-hardware-hero figcaption {
position: absolute;
top: 1.4cqw;
left: 52.5cqw;
z-index: 1;
width: 40.4cqw;
text-align: left;
}
body.reference-home .reference-hardware-hero figcaption > strong {
display: block;
color: #012a56;
font-family: var(--ref-cond);
font-size: 5.2cqw;
font-weight: 700;
line-height: .97;
letter-spacing: .005em;
text-transform: uppercase;
}
body.reference-home .reference-hardware-hero figcaption > span {
display: block;
margin-top: .9cqw;
padding-top: 1.15cqw;
border-top: 1px solid #22436b;
color: #33415a;
font-size: 1.55cqw;
font-weight: 700;
letter-spacing: .04em;
white-space: nowrap;
}
body.reference-home .reference-hardware-tiles {
position: absolute;
right: 0;
left: 0;
top: 33.28cqw;
height: 16.19cqw; /* tiles 13.33cqw + label band 2.86cqw */
overflow: hidden;
background: #fff;
}
body.reference-home .reference-hw-tilestrip {
display: flex;
height: 13.33cqw;
margin: 0;
padding: 0;
overflow: hidden;
list-style: none;
background: #fff;
}
body.reference-home .reference-hw-tilestrip li {
position: relative;
flex: 1;
margin-right: .38cqw;
overflow: hidden;
transform: skewX(-14deg);
}
body.reference-home .reference-hw-tilestrip li:first-child { margin-left: -3cqw; }
body.reference-home .reference-hw-tilestrip li:last-child { margin-right: -3cqw; }
body.reference-home .reference-hw-tilestrip li span {
position: absolute;
inset: 0 -3cqw;
display: block;
overflow: hidden;
transform: skewX(14deg);
}
body.reference-home .reference-hw-tilestrip li img {
position: absolute;
display: block;
height: auto;
max-width: none;
}
body.reference-home .reference-hardware-categories {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
height: 2.86cqw;
margin: 0;
padding: 0;
list-style: none;
background: #012C56;
}
body.reference-home .reference-hardware-categories li {
display: grid;
place-items: center;
min-width: 0;
padding: 0 .3cqw;
border-left: 1px solid rgba(255,255,255,.18);
color: #fff;
font-size: 1.19cqw;
font-weight: 700;
line-height: 1.05;
text-align: center;
text-transform: uppercase;
letter-spacing: .05em;
}
body.reference-home .reference-hardware-categories li:first-child {
border-left: 0;
}
body.reference-home .reference-hardware-benefits {
position: absolute;
right: 0;
bottom: 0;
left: 0;
top: 50.3cqw;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border-top: 0;
background: #fff;
color: #4a5164;
}
body.reference-home .reference-hardware-benefits li {
display: grid;
justify-items: center;
align-content: start;
gap: .55cqw;
width: 12.4cqw;
font-size: 1.12cqw;
line-height: 1.15;
}
body.reference-home .reference-hardware-benefits li + li {
border-left: 1px solid #d8dbe0;
}
body.reference-home .reference-hardware-benefits svg {
width: 3.1cqw;
height: 3.1cqw;
fill: #223a5e;
}
body.reference-commercial .reference-commercial-banner {
position: relative;
display: grid;
min-height: clamp(195px, 21.24vw, 270px);
overflow: clip;
isolation: isolate;
background: #333;
}
body.reference-commercial .reference-banner-media img {
object-position: center 58%;
}
body.reference-commercial .reference-banner-shade {
position: absolute;
inset: 0;
z-index: 1;
background: linear-gradient(90deg, rgba(0,0,0,.32), rgba(0,0,0,.05) 50%, rgba(0,0,0,.2));
}
body.reference-commercial .reference-banner-content {
position: relative;
z-index: 2;
display: flex;
align-items: flex-end;
justify-content: flex-end;
min-height: inherit;
padding-bottom: clamp(1.4rem, 4vw, 3rem);
}
body.reference-commercial .reference-commercial-banner h1 {
margin: 0 3% 0 0;
color: #fff;
font-family: "Playfair Display", Georgia, serif;
font-size: clamp(1.5rem, 3.2vw, 2.7rem);
font-style: italic;
font-weight: 700;
line-height: 1;
text-shadow: 0 2px 16px rgba(0,0,0,.45);
}
body.reference-commercial .reference-commercial-intro {
display: grid;
place-items: center;
min-height: clamp(150px, 16.34vw, 205px);
text-align: center;
}
body.reference-commercial .reference-commercial-figure {
aspect-ratio: 1.638 / 1;
}
body.reference-commercial .reference-commercial-figure picture,
body.reference-commercial .reference-commercial-figure picture img {
display: block;
width: 100%;
height: 100%;
}
body.reference-commercial .reference-commercial-figure picture img {
object-fit: cover;
}
body.reference-commercial .reference-commercial-figure figcaption {
position: absolute;
right: 0;
bottom: 0;
display: flex;
flex-direction: column;
justify-content: center;
width: min(37%, 9rem);
min-height: clamp(3.2rem, 6vw, 4.5rem);
padding: .6rem 1rem .65rem;
border-radius: 1.1rem 0 0;
background: var(--reference-badge);
color: #fff;
line-height: 1.02;
text-align: center;
}
body.reference-commercial .reference-commercial-figure figcaption strong {
color: var(--reference-gold);
font-family: "Playfair Display", Georgia, serif;
font-size: clamp(.72rem, 1.32vw, 1.02rem);
font-style: italic;
font-weight: 700;
}
body.reference-commercial .reference-commercial-figure figcaption span {
margin-top: .12rem;
color: #fff;
font-family: "Playfair Display", Georgia, serif;
font-size: clamp(.68rem, 1.24vw, .96rem);
font-style: italic;
font-weight: 700;
text-transform: none;
}
body.reference-commercial .reference-replacement-figure {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.reference-commercial .reference-replacement-figure > div {
position: relative;
min-width: 0;
overflow: hidden;
}
body.reference-commercial .reference-replacement-figure > div:first-child {
border-right: 2px solid #fff;
}
body.reference-commercial .reference-before-after-label {
position: absolute;
top: 0;
left: 0;
padding: .3rem .7rem;
border-radius: 0;
background: #232750;
color: #fff;
font-size: clamp(.5rem, .8vw, .65rem);
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
}
:is(body.reference-home, body.reference-commercial, body.reference-cta) .final-cta {
display: grid;
place-items: center;
min-height: clamp(186px, 20.26vw, 250px);
padding: 0;
background: var(--reference-cta);
color: #fff;
text-align: center;
}
:is(body.reference-home, body.reference-commercial, body.reference-cta) .final-cta .container {
display: grid;
justify-items: center;
}
:is(body.reference-home, body.reference-commercial, body.reference-cta) .final-cta h2 {
margin: 0;
color: #fff;
font-family: "Playfair Display", Georgia, serif;
font-size: clamp(1.45rem, 2.7vw, 2.35rem);
line-height: 1.1;
}
:is(body.reference-home, body.reference-commercial, body.reference-cta) .final-cta p {
max-width: 62ch;
margin: .9rem auto 1.25rem;
color: rgba(255,255,255,.76);
font-size: clamp(.65rem, 1.07vw, .8rem);
line-height: 1.45;
}
:is(body.reference-home, body.reference-commercial, body.reference-cta) .final-cta .cta-button {
min-width: 12rem;
min-height: 38px;
padding: .7rem 1.25rem;
border: 1px solid var(--reference-orange);
border-radius: 2px;
background: var(--reference-orange);
color: #fff;
font-size: .62rem;
letter-spacing: .12em;
opacity: 1;
visibility: visible;
transform: none;
animation: none !important;
opacity: 1 !important;
transform: none !important;
}
@media (min-width: 900px) and (max-width: 1200px) {
body.reference-home .reference-product {
padding-block: calc(clamp(.75rem, 1.3vw, 1.25rem) + clamp(0px, calc((1024px - 100vw) * .03434), 3.64px));
}
body.reference-commercial .reference-product {
padding-block: calc(clamp(1.35rem, 2.6vw, 1.75rem) + clamp(0px, calc((1024px - 100vw) * .04623), 4.9px));
}
body.reference-home .final-cta {
min-height: calc(clamp(186px, 20.26vw, 250px) + clamp(0px, calc((1024px - 100vw) * .36793), 39px));
}
body.reference-commercial .final-cta {
min-height: calc(clamp(186px, 20.26vw, 250px) + clamp(0px, calc((1024px - 100vw) * .33019), 35px));
}
}
@media (min-width: 1201px) {
body.reference-home .reference-intro {
min-height: clamp(145px, 11.44vw, 234px);
}
body.reference-home .reference-intro h2,
body.reference-commercial .reference-commercial-intro h2 {
font-size: clamp(2.65rem, 3vw, 3.9rem);
}
body.reference-home .reference-intro-rule {
width: clamp(4.3rem, 7.5vw, 9.6rem);
height: clamp(3px, .33vw, 7px);
margin: clamp(.7rem, 1.25vw, 1.6rem) 0 clamp(.45rem, .8vw, 1rem);
}
body.reference-home .reference-intro p {
font-size: clamp(.86rem, 1.25vw, 1.6rem);
}
:is(body.reference-home, body.reference-commercial) .reference-product {
gap: clamp(3.5rem, 3vw, 4rem);
}
body.reference-home .reference-product {
--reference-row-growth: clamp(-4.6px, calc((100vw - 90rem) * .04035 - 4.6px), 20px);
padding: calc(clamp(1.25rem, 1.3vw, 1.7rem) + var(--reference-row-growth)) 0;
}
body.reference-commercial .reference-product {
--reference-row-growth: clamp(2.9px, calc((100vw - 90rem) * .0334 + 2.9px), 23.2px);
padding: calc(clamp(1.75rem, 2.6vw, 3.35rem) + var(--reference-row-growth)) 0;
}
:is(body.reference-home, body.reference-commercial) .reference-product-copy h3 {
margin-bottom: clamp(1.25rem, 1.7vw, 2.2rem);
font-size: clamp(2.35rem, 3.05vw, 3.9rem);
}
:is(body.reference-home, body.reference-commercial) .reference-product-copy p {
margin-bottom: clamp(.9rem, 1.45vw, 1.85rem);
font-size: clamp(.84rem, 1.36vw, 1.75rem);
}
:is(body.reference-home, body.reference-commercial) .solution-btn {
min-width: clamp(4.75rem, 8.28vw, 10.6rem);
min-height: clamp(34px, 3.7vw, 76px);
margin-top: clamp(.7rem, 1.3vw, 1.65rem);
padding: clamp(.58rem, 1.1vw, 1.4rem) clamp(1.3rem, 2.8vw, 3.6rem);
font-size: clamp(.66rem, 1.3vw, 1.65rem);
}
body.reference-home .reference-list-block {
margin: clamp(1rem, 2vw, 2.55rem) 0 clamp(.3rem, .7vw, .9rem);
}
body.reference-home .reference-list-block h4 {
margin-bottom: clamp(.55rem, 1vw, 1.3rem);
font-size: clamp(.78rem, 1.3vw, 1.65rem);
}
body.reference-home .reference-feature-list {
gap: clamp(.36rem, .72vw, .9rem);
font-size: clamp(.72rem, .98vw, 1.25rem);
}
body.reference-home .reference-feature-list--two {
column-gap: clamp(1.1rem, 2.4vw, 3rem);
}
body.reference-commercial .reference-commercial-intro {
min-height: clamp(205px, 16.34vw, 335px);
}
body.reference-commercial .reference-commercial-figure figcaption {
width: min(37%, clamp(9rem, 16.34vw, 20.9rem));
min-height: clamp(4.5rem, 7.3vw, 9.35rem);
padding: clamp(.6rem, 1.25vw, 1.6rem) clamp(1rem, 2vw, 2.55rem) clamp(.65rem, 1.4vw, 1.8rem);
border-radius: clamp(1.1rem, 2vw, 2.55rem) 0 0;
}
body.reference-commercial .reference-commercial-figure figcaption strong {
font-size: clamp(.98rem, 1.28vw, 1.64rem);
}
body.reference-commercial .reference-commercial-figure figcaption span {
margin-top: clamp(.18rem, .35vw, .45rem);
font-size: clamp(.62rem, .79vw, 1rem);
}
body.reference-commercial .reference-before-after-label {
top: clamp(.75rem, 1.4vw, 1.8rem);
left: clamp(.75rem, 1.4vw, 1.8rem);
padding: clamp(.28rem, .55vw, .7rem) clamp(.55rem, 1.05vw, 1.35rem);
font-size: clamp(.65rem, .8vw, 1rem);
}
:is(body.reference-home, body.reference-commercial, body.reference-cta) .final-cta {
min-height: clamp(250px, 20.26vw, 415px);
}
:is(body.reference-home, body.reference-commercial, body.reference-cta) .final-cta h2 {
font-size: clamp(2.35rem, 3.05vw, 3.9rem);
}
:is(body.reference-home, body.reference-commercial, body.reference-cta) .final-cta p {
margin: clamp(.9rem, 1.7vw, 2.2rem) auto clamp(1.25rem, 2.3vw, 2.95rem);
font-size: clamp(.8rem, 1.3vw, 1.65rem);
}
:is(body.reference-home, body.reference-commercial, body.reference-cta) .final-cta .cta-button {
min-width: clamp(12rem, 21.35vw, 27.35rem);
min-height: clamp(38px, 4.25vw, 87px);
padding: clamp(.7rem, 1.4vw, 1.8rem) clamp(1.25rem, 2.6vw, 3.35rem);
font-size: clamp(.62rem, 1.09vw, 1.4rem);
}
}
@media (max-width: 899px) {
/* ------------------------------------------------------------------
MOBILE HEADER BEHAVIOUR — every public page, not just two of them.
These rules used to be scoped to `:is(body.reference-home,
body.reference-commercial)`, the only two pages that carry those body
classes. Every other public page (contact, hardware, residential,
resources, cart, account, privacy, terms, commercial-builder) therefore
kept the full desktop header at phone widths: six nav items laid out
from -44px to 447px inside a 390px screen, with the quote button on top
of two of them and the logo overlapping the first.
The fix adds a third `body` arm to the :is() list. `:is()` takes the
specificity of its MOST specific argument, so `:is(.., .., body)` still
weighs (0,1,1) exactly like `:is(body.reference-home, ..)` did — same
specificity, same source position, same declarations. Home and
commercial resolve byte-identically; everyone else now gets the rule.
Only BEHAVIOUR is generalised here. The geometry rules above (87px bar,
83px logo track, main's 87px offset, the container inset) stay scoped:
they are the PDF-locked design of those two pages, and forcing an 87px
bar onto the interior pages would push their page banners, which sit
6px under a 64px header, behind it.
------------------------------------------------------------------ */
:is(body.reference-home, body.reference-commercial, body) .header .main-nav,
:is(body.reference-home, body.reference-commercial, body) .header .header-actions {
display: none !important;
}
:is(body.reference-home, body.reference-commercial, body) .header .public-menu-toggle {
display: inline-grid;
grid-column: 3;
place-items: center;
margin-left: auto;
}
:is(body.reference-home, body.reference-commercial, body) .header.public-menu-open {
height: auto;
max-height: 100dvh;
overflow-y: auto;
}
:is(body.reference-home, body.reference-commercial, body) .header.public-menu-open .main-nav {
display: flex !important;
grid-column: 1 / -1;
grid-row: 2;
width: 100%;
padding: .45rem 0;
border-top: 1px solid rgba(255,255,255,.12);
}
:is(body.reference-home, body.reference-commercial, body) .header.public-menu-open .main-nav ul {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: .15rem .5rem;
}
:is(body.reference-home, body.reference-commercial, body) .header.public-menu-open .main-nav a {
min-height: 44px;
padding: 0 .75rem;
border-radius: .25rem;
}
:is(body.reference-home, body.reference-commercial, body) .header.public-menu-open .main-nav a::after {
display: none;
}
:is(body.reference-home, body.reference-commercial, body) .header.public-menu-open .header-actions {
display: flex !important;
grid-column: 1 / -1;
grid-row: 3;
flex-wrap: wrap;
justify-content: flex-start;
width: 100%;
padding: .65rem 0 1rem;
border-top: 1px solid rgba(255,255,255,.12);
}
:is(body.reference-home, body.reference-commercial, body) .header.public-menu-open .search-box {
flex: 1 1 100%;
width: 100%;
height: 44px;
}
:is(body.reference-home, body.reference-commercial, body) .header.public-menu-open .search-box input,
:is(body.reference-home, body.reference-commercial, body) .header.public-menu-open .search-box input:focus {
height: 42px;
font-size: .85rem;
}
:is(body.reference-home, body.reference-commercial, body) .header.public-menu-open .search-box > button {
top: 4px;
width: 34px;
height: 34px;
}
:is(body.reference-home, body.reference-commercial, body) .header.public-menu-open .auth-buttons,
:is(body.reference-home, body.reference-commercial, body) .header.public-menu-open .auth-logged-out {
display: flex;
flex: 1 1 auto;
flex-wrap: wrap;
}
:is(body.reference-home, body.reference-commercial, body) .header.public-menu-open :is(.login-btn, .register-btn, .quote-btn, .user-menu-btn) {
min-height: 44px;
height: 44px;
padding-inline: 1.1rem;
}
/* The two things the open drawer needs on EVERY page. This pair used to be
scoped with :not(.reference-home):not(.reference-commercial), because those
two pages carried a second, PDF-geometry copy of the header that supplied
both properties itself. That duplicate header is gone — every page now
renders the one shared header — so the :not() would have left home and
commercial with a 24px tap target and no grid to lay the drawer out on.
1. The header row must be a 3-column grid, because the open menu places
the nav and the actions with `grid-column: 1 / -1` and `grid-row: 2/3`.
Without it the row is flex (from the <=1240px block above), where those
properties are inert and the menu would never lay out. The track is
`auto` so each page keeps its own logo size; rows stay implicit so the
closed bar keeps its natural height and nothing shifts behind the
fixed header.
2. `.main-nav a` is a bare inline box, and min-height does nothing to an
inline box — the 44px tap target would silently not apply. */
body .header .header-content {
display: grid;
grid-template-columns: auto minmax(0, 1fr) 44px;
align-items: center;
}
body .header.public-menu-open .main-nav a {
display: flex;
align-items: center;
}
body.reference-home .reference-home-hero-content {
padding-left: 0;
}
:is(body.reference-home, body.reference-commercial) .reference-product {
gap: clamp(1.5rem, 4vw, 2.4rem);
}
}
@media (max-width: 780px) {
:is(body.reference-home, body.reference-commercial) main > section > .container,
:is(body.reference-home, body.reference-commercial) .reference-products > .container {
width: min(calc(100% - 2.5rem), 42rem);
}
body.reference-home .reference-home-hero {
height: auto;
min-height: 43rem;
}
body.reference-home .reference-hero-media img {
object-position: 60% center;
}
body.reference-home .reference-hero-shade {
background: linear-gradient(180deg, rgba(4,18,31,.42) 0%, rgba(4,18,31,.78) 42%, rgba(4,18,31,.97) 100%);
}
body.reference-home .reference-home-hero-content {
justify-content: flex-end;
padding-top: 6rem;
padding-bottom: 2.2rem;
}
body.reference-home main > .reference-home-hero > .reference-home-hero-content.container {
width: min(calc(100% - 2.5rem), 42rem);
padding-left: 0;
}
body.reference-home .reference-home-hero h1 {
max-width: 11ch;
font-size: clamp(2.55rem, 11vw, 4.4rem);
}
body.reference-home .reference-home-hero-content > p {
font-size: .92rem;
}
body.reference-home .reference-hero-actions {
width: 100%;
}
body.reference-home .reference-hero-actions .reference-button {
flex: 1 1 10rem;
min-height: 44px;
}
body.reference-home .reference-assurances {
width: 100%;
grid-template-columns: repeat(2, minmax(0, 1fr));
row-gap: 1.15rem;
margin-top: 2rem;
}
body.reference-home .reference-assurances li:nth-child(2) {
border-right: 0;
}
body.reference-home .reference-assurances :is(strong, span) {
font-size: .66rem;
}
body.reference-home .reference-intro {
min-height: 9rem;
padding-block: 1.5rem;
}
:is(body.reference-home, body.reference-commercial) .reference-product {
grid-template-columns: 1fr;
gap: 1.4rem;
padding: 2.4rem 0;
}
:is(body.reference-home, body.reference-commercial) .reference-product > *,
:is(body.reference-home, body.reference-commercial) .reference-product--visual-first > *,
:is(body.reference-home, body.reference-commercial) .reference-product--visual-last > * {
grid-column: 1 !important;
}
:is(body.reference-home, body.reference-commercial) .reference-product > .reference-product-copy {
grid-row: 1;
}
:is(body.reference-home, body.reference-commercial) .reference-product > :is(.reference-visual, .reference-commercial-figure) {
grid-row: 2;
}
body.reference-home .reference-product > .reference-product-wide {
grid-row: 3 !important;
}
:is(body.reference-home, body.reference-commercial) .reference-product-copy h3 {
font-size: clamp(1.8rem, 7.2vw, 2.4rem);
}
:is(body.reference-home, body.reference-commercial) .reference-product-copy p {
font-size: .9rem;
line-height: 1.62;
}
:is(body.reference-home, body.reference-commercial) .solution-btn {
min-height: 44px;
min-width: 6.8rem;
font-size: .72rem;
}
body.reference-home .reference-visual {
min-height: 21rem;
}
body.reference-home .reference-feature-list {
font-size: .82rem;
}
body.reference-commercial .reference-commercial-banner {
min-height: 15rem;
}
body.reference-commercial .reference-banner-shade {
background: linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.56));
}
body.reference-commercial .reference-banner-content {
align-items: flex-end;
justify-content: flex-start;
padding-bottom: 2rem;
}
body.reference-commercial .reference-commercial-banner h1 {
margin: 0;
font-size: clamp(2.5rem, 12vw, 4rem);
}
body.reference-commercial .reference-commercial-intro {
min-height: 10rem;
}
body.reference-commercial .reference-commercial-figure figcaption {
min-height: 4.2rem;
}
body.reference-commercial .reference-replacement-figure {
width: 100%;
max-width: 100%;
min-height: clamp(15rem, 68vw, 25rem);
aspect-ratio: 1.45 / 1;
}
:is(body.reference-home, body.reference-commercial, body.reference-cta) .final-cta {
min-height: 15rem;
padding-block: 2.3rem;
}
}
@media (max-width: 540px) {
/* Same generalisation as the 899px block: the `body` arm carries the rule to
every public page without changing its specificity. */
:is(body.reference-home, body.reference-commercial, body) .header.public-menu-open .main-nav ul {
grid-template-columns: 1fr;
}
:is(body.reference-home, body.reference-commercial, body) .header.public-menu-open .header-actions > .quote-btn {
flex: 1 1 100%;
}
body.reference-home .reference-home-hero {
min-height: 46rem;
}
body.reference-home .reference-hero-actions {
display: grid;
grid-template-columns: 1fr;
}
body.reference-home .reference-assurances li {
padding-inline: .6rem;
}
body.reference-home .reference-feature-list--two {
grid-template-columns: 1fr;
}
/* Stages revert to stacked static columns on phones. */
body.reference-home :is(.reference-dual-door-visual, .reference-feature-visual, .reference-frame-visual, .reference-hardware-visual) {
position: relative;
display: flex;
flex-direction: column;
aspect-ratio: auto;
container-type: normal;
}
body.reference-home :is(.reference-dual-door-visual, .reference-feature-visual, .reference-frame-visual, .reference-hardware-visual) > * {
position: static;
inset: auto;
width: auto;
height: auto;
}
body.reference-home .reference-card-title { order: 1; padding: 1.1rem 1rem .6rem; }
body.reference-home .reference-card-eyebrow { font-size: .72rem; }
body.reference-home .reference-card-title strong { font-size: 1.6rem; }
body.reference-home .reference-card-title small { font-size: .56rem; margin-top: .3rem; gap: .5rem; }
body.reference-home .reference-card-title small::before,
body.reference-home .reference-card-title small::after { width: 1.4rem; }
body.reference-home .reference-m1-bar {
height: auto;
padding: .5rem;
font-size: .68rem;
margin: 0 1rem;
}
body.reference-home .reference-m1-bar--wood { order: 2; }
body.reference-home .reference-m1-photo--wood { order: 3; }
body.reference-home .reference-m1-list--wood { order: 4; }
body.reference-home .reference-m1-bar--metal { order: 5; margin-top: 1rem; }
body.reference-home .reference-m1-photo--metal { order: 6; }
body.reference-home .reference-m1-list--metal { order: 7; }
body.reference-home .reference-door-thumbs {
position: relative !important;
order: 8;
width: 100% !important;
height: min(13.06vw, 4.5rem) !important;
margin-top: 1rem;
padding: 0;
}
body.reference-home .reference-visual-benefits.reference-m1-benefits { order: 9; height: auto; padding: .6rem .3rem; flex-wrap: wrap; gap: .8rem; font-size: .58rem; }
body.reference-home .reference-visual-benefits.reference-m1-benefits svg { width: .95rem; height: .95rem; }
body.reference-home .reference-m1-photo {
aspect-ratio: 16 / 10;
margin: 0 1rem;
}
body.reference-home .reference-m1-list {
padding: .8rem 1.2rem .2rem;
}
body.reference-home .reference-m1-list .reference-door-icon { width: 1.6rem; margin-bottom: .5rem; }
body.reference-home .reference-m1-list ul { gap: .4rem; font-size: .68rem; }
body.reference-home .reference-m1-list li { padding-left: .85rem; }
body.reference-home .reference-m1-list li::before { width: .3rem; height: .3rem; }
body.reference-home .reference-door-thumbs img {
position: absolute !important;
top: 10.64% !important;
width: var(--door-thumb-width, auto);
height: 76.60% !important;
margin-left: 0;
}
body.reference-home .reference-door-thumb--01 { width: 12.19% !important; }
body.reference-home .reference-door-thumb--02 { width: 5.50% !important; }
body.reference-home .reference-door-thumb--03 { width: 8.06% !important; }
body.reference-home .reference-door-thumb--04 { width: 6.36% !important; }
body.reference-home .reference-door-thumb--05 { width: 8.31% !important; }
body.reference-home .reference-door-thumb--06 { width: 4.72% !important; }
body.reference-home .reference-door-thumb--07 { width: 7.75% !important; }
body.reference-home .reference-door-thumb--08 { width: 4.97% !important; }
body.reference-home .reference-feature-visual > picture {
position: static;
inset: auto;
width: 100%;
aspect-ratio: 16 / 10;
}
body.reference-home .reference-feature-panel {
width: 100%;
}
body.reference-home .reference-feature-panel:has(.reference-feature-bar--metal) {
width: 100%;
}
body.reference-home .reference-feature-bar {
height: auto;
margin: 0;
padding: .5rem;
font-size: .68rem;
}
body.reference-home .reference-feature-body {
padding: 1.2rem;
}
body.reference-home .reference-door-icon { width: 2.2rem; margin: 0 0 .7rem; }
body.reference-home .reference-feature-panel-list { columns: 1; font-size: .7rem; }
body.reference-home .reference-feature-panel-list li:nth-child(3) { break-after: auto; }
body.reference-home .reference-feature-panel-list li { margin-bottom: .45rem; padding-left: .9rem; }
body.reference-home .reference-feature-panel-list li::before { width: .3rem; height: .3rem; }
body.reference-home .reference-frame-photo {
width: 100%;
aspect-ratio: 4 / 3;
background: linear-gradient(160deg, #eeece6 0%, #e2ded5 100%);
}
body.reference-home .reference-frame-photo img {
object-fit: contain;
object-position: center;
}
body.reference-home .reference-frame-panel { padding: 1.2rem; }
body.reference-home .reference-frame-head strong { font-size: 1.5rem; white-space: normal; }
body.reference-home .reference-frame-head > span { font-size: .68rem; }
body.reference-home .reference-frame-head p { font-size: .7rem; margin-top: .4rem; }
body.reference-home .reference-frame-cols { grid-template-columns: 1fr; row-gap: 1rem; margin-top: 1rem; }
body.reference-home .reference-frame-subhead { font-size: .72rem; margin-bottom: .5rem; padding-bottom: .25rem; }
body.reference-home .reference-frame-subhead--finishes { margin-top: .8rem; }
body.reference-home .reference-frame-features { gap: .6rem; }
body.reference-home .reference-frame-features li { column-gap: .5rem; }
body.reference-home .reference-frame-features svg { width: 1.3rem; height: 1.3rem; padding: .22rem; }
body.reference-home .reference-frame-features b { font-size: .62rem; }
body.reference-home .reference-frame-features em { font-size: .58rem; }
body.reference-home .reference-finish-swatches { gap: .4rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.reference-home .reference-finish-swatches li { font-size: .5rem; gap: .25rem; }
body.reference-home .reference-finish-swatches i { width: 1.2rem; }
body.reference-home .reference-hardware-hero {
aspect-ratio: 16 / 10;
overflow: hidden;
}
body.reference-home .reference-hardware-hero img {
width: 100%;
height: 100%;
margin: 0;
object-fit: cover;
object-position: center 30%;
}
body.reference-home .reference-hardware-hero figcaption {
position: absolute;
top: .8rem;
left: 50%;
width: 47%;
}
body.reference-home .reference-hardware-hero figcaption > strong { font-size: 1.15rem; }
body.reference-home .reference-hardware-hero figcaption > span { font-size: .5rem; margin-top: .3rem; padding-top: .25rem; }
body.reference-home .reference-hardware-tiles { height: auto; }
body.reference-home .reference-hardware-tiles > img { height: auto; }
body.reference-home .reference-hardware-categories {
height: auto;
grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.reference-home .reference-hardware-categories li { padding: .35rem .2rem; font-size: .52rem; }
body.reference-home .reference-visual-benefits.reference-hardware-benefits {
flex-wrap: wrap;
gap: .6rem;
padding: .8rem .4rem;
}
body.reference-home .reference-hardware-benefits li { width: 5.2rem; font-size: .52rem; gap: .25rem; }
body.reference-home .reference-hardware-benefits li + li { border-left: 0; }
body.reference-home .reference-hardware-benefits svg { width: 1.15rem; height: 1.15rem; }
}
/* Measured desktop parity with the 918px client references. */
@media (min-width: 781px) and (max-width: 1199px) {
:is(body.reference-home, body.reference-commercial) main > section > .container,
:is(body.reference-home, body.reference-commercial) .reference-products > .container {
width: calc(100% - clamp(2.5rem, 4.36vw, 5.5rem));
}
:is(body.reference-home, body.reference-commercial) .reference-product {
gap: clamp(1.625rem, 3.05vw, 3.9rem);
}
body.reference-home .reference-product--visual-first {
grid-template-columns: minmax(0, 47%) minmax(0, 53%);
}
body.reference-home .reference-product--visual-last {
grid-template-columns: minmax(0, 53%) minmax(0, 47%);
}
body.reference-home .reference-product-copy h3 {
margin-bottom: clamp(.65rem, 1.1vw, .9rem);
font-size: clamp(1.42rem, 2.62vw, 2.1rem);
}
body.reference-home .reference-product-copy p {
margin-bottom: .65rem;
font-size: clamp(.625rem, 1.09vw, .77rem);
line-height: 1.48;
}
body.reference-home .solution-btn {
min-width: 4.75rem;
min-height: 1.75rem;
margin-top: .45rem;
padding: .34rem .95rem;
font-size: .625rem;
}
body.reference-home .reference-product-wide .solution-btn {
margin-top: clamp(.6rem, 1vw, .9rem);
}
}
@media (min-width: 1200px) {
:is(body.reference-home, body.reference-commercial) main > section > .container,
:is(body.reference-home, body.reference-commercial) .reference-products > .container {
width: calc(100% - clamp(2.5rem, 4.36vw, 5.5rem));
}
}
@media (max-width: 360px) {
:is(body.reference-home, body.reference-commercial) main > section > .container,
:is(body.reference-home, body.reference-commercial) .reference-products > .container {
width: calc(100% - 2rem);
}
body.reference-home .reference-home-hero h1 {
font-size: 2.45rem;
}
body.reference-home main > .reference-home-hero > .reference-home-hero-content.container {
width: calc(100% - 2rem);
}
body.reference-home .reference-home-hero-content > p {
font-size: .86rem;
}
}
/* PDF-locked desktop geometry: every value resolves to the 918px source canvas. */
@media (min-width: 781px) and (max-width: 1199px) {
body.reference-home .reference-home-hero-content {
justify-content: flex-start;
padding-top: 54px;
padding-left: 29px;
}
body.reference-home main > .reference-home-hero > .reference-home-hero-content.container {
width: 100%;
margin: 0;
padding-left: 29px;
}
body.reference-home .reference-home-hero h1 {
width: 370px;
max-width: 370px;
font-family: var(--ref-cond);
font-size: 36px;
letter-spacing: -.01em;
line-height: 1.02;
}
body.reference-home .reference-home-hero-content > p {
width: 300px;
margin-top: 14px;
font-size: 14px;
line-height: 20px;
}
body.reference-home .reference-hero-actions {
gap: 14px;
margin-top: 20px;
}
body.reference-home .reference-hero-actions .reference-button {
width: 132px;
min-width: 132px;
height: 30px;
min-height: 30px;
padding: 0;
font-size: 8px;
}
body.reference-home .reference-hero-actions .reference-button-outline {
width: 128px;
min-width: 128px;
}
body.reference-home .reference-assurances {
width: 390px;
margin-top: 30px;
}
body.reference-home .reference-assurances li {
min-height: 80px;
}
body.reference-home .reference-assurances svg { width: 30px; height: 30px; }
body.reference-home .reference-assurances strong { font-size: 10px; }
body.reference-home .reference-assurances span { font-size: 9px; }
body.reference-home .reference-intro h2,
body.reference-commercial .reference-commercial-intro h2 {
font-size: 24px;
}
body.reference-commercial .reference-commercial-intro {
align-items: flex-start;
padding-top: 38px;
}
body.reference-commercial .reference-commercial-intro h2 {
transform: translateY(4px);
}
body.reference-commercial .reference-products {
padding-top: 1px;
}
:is(body.reference-home, body.reference-commercial) .reference-products > .container {
width: calc(100% - 40px);
}
body.reference-home .reference-products > .container {
width: calc(100% - 58px);
}
:is(body.reference-home, body.reference-commercial) .reference-product {
gap: 26px;
padding: 0;
}
body.reference-home .reference-product--visual-first,
body.reference-home .reference-product--visual-last {
gap: 2.56%;
}
body.reference-home .reference-product--visual-first {
grid-template-columns: minmax(0, 48.95fr) minmax(0, 48.49fr);
}
body.reference-home .reference-product--visual-last {
grid-template-columns: minmax(0, 48.49fr) minmax(0, 48.95fr);
}
body.reference-commercial .reference-product--visual-first {
grid-template-columns: minmax(0, 49.3fr) minmax(0, 50.7fr);
}
body.reference-commercial .reference-product--visual-last {
grid-template-columns: minmax(0, 50.7fr) minmax(0, 49.3fr);
}
:is(body.reference-home, body.reference-commercial) .reference-product-copy h3 {
margin-bottom: 12px;
font-size: 24px;
line-height: 1.1;
text-wrap: wrap;
}
:is(body.reference-home, body.reference-commercial) .reference-product-copy p {
margin-bottom: 10px;
font-size: 11px;
line-height: 17px;
}
:is(body.reference-home, body.reference-commercial) .solution-btn {
width: 76px;
min-width: 76px;
height: 29px;
min-height: 29px;
margin-top: 8px;
padding: 0;
font-size: 10px;
}
body.reference-home .reference-product:nth-child(1) { height: 32.35vw; }
body.reference-home .reference-product:nth-child(2) { height: 30.61vw; margin-top: 0; }
body.reference-home .reference-product:nth-child(3) { height: 42.92vw; margin-top: 0; }
body.reference-home .reference-product:nth-child(4) { height: 46.51vw; margin-top: 0; }
body.reference-home .reference-product:nth-child(5) { height: 46.62vw; margin-top: 0; }
body.reference-home .reference-product-wide {
align-self: end;
margin: 0;
}
body.reference-home .reference-product:nth-child(4) {
grid-template-rows: auto minmax(0, 1fr);
align-items: start;
}
body.reference-home .reference-product:nth-child(4) .reference-frame-visual {
width: 100%;
}
body.reference-home .reference-product:nth-child(4) .reference-product-copy {
grid-row: 1;
}
body.reference-home .reference-product:nth-child(2) { align-items: start; }
body.reference-home .reference-product:nth-child(2) .reference-product-copy { margin-top: 5.23vw; padding-left: 13px; }
body.reference-home .reference-product:nth-child(3) { align-items: start; }
body.reference-home .reference-product:nth-child(4) .reference-product-copy { padding-left: 3px; }
body.reference-home .reference-product:nth-child(5) { align-items: start; padding-top: 25px; }
body.reference-home .reference-product:nth-child(5) .solution-btn { margin-top: 17px; }
body.reference-home .reference-product:nth-child(1) { align-items: start; }
body.reference-home .reference-product:nth-child(1) .reference-dual-door-visual { margin-top: 16px; }
body.reference-home .reference-product:nth-child(1) .reference-product-copy { margin-top: 40px; }
body.reference-home .reference-product:nth-child(4) .reference-product-wide { align-self: start; margin-top: 3px; }
body.reference-home .reference-list-block { margin: 8px 0 0; }
body.reference-home .reference-feature-list { font-size: 10px; gap: 4px; }
body.reference-home .reference-product-wide .solution-btn { margin-top: 8px; }
body.reference-commercial .reference-product { align-items: start; }
body.reference-commercial .reference-product-copy {
display: flex;
flex-direction: column;
align-items: flex-start;
height: 248px;
}
body.reference-commercial .reference-product:nth-child(1) .reference-product-copy {
transform: translateY(-11px);
}
body.reference-commercial .reference-product-copy p {
line-height: 18px;
}
body.reference-commercial .reference-product-copy .solution-btn { margin-top: auto; }
body.reference-commercial .reference-product:nth-child(1) { height: 33.22vw; }
body.reference-commercial .reference-product:nth-child(2) { height: 33.66vw; margin-top: 0; padding-top: 0; }
body.reference-commercial .reference-product:nth-child(2) .reference-commercial-figure { margin-top: 14px; }
body.reference-commercial .reference-product:nth-child(3) { height: 34.42vw; margin-top: 0; }
body.reference-commercial .reference-product:nth-child(4) { height: 34.31vw; margin-top: 0; }
body.reference-commercial .reference-commercial-figure {
width: 100%;
height: 27.67vw;
aspect-ratio: auto;
}
:is(body.reference-home, body.reference-commercial, body.reference-cta) .final-cta {
min-height: 25.27vw;
height: 25.27vw;
padding: 0;
}
:is(body.reference-home, body.reference-commercial, body.reference-cta) .final-cta h2 { font-size: 24px; }
:is(body.reference-home, body.reference-commercial, body.reference-cta) .final-cta p { margin: 12px auto 18px; font-size: 12px; line-height: 16px; }
}
@media (prefers-reduced-motion: reduce) {
:is(body.reference-home, body.reference-commercial) *,
:is(body.reference-home, body.reference-commercial) *::before,
:is(body.reference-home, body.reference-commercial) *::after {
scroll-behavior: auto !important;
transition-duration: .01ms !important;
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
}
}
/* Canonical 918px PDF parity corrections (true final cascade). */
body.reference-commercial .reference-replacement-media {
position: absolute;
inset: 0;
z-index: 0;
display: block;
width: 100%;
height: 100%;
overflow: hidden;
border-radius: inherit;
}
body.reference-commercial .reference-replacement-media > img {
width: 100%;
height: 100%;
object-fit: cover;
}
body.reference-commercial .reference-replacement-figure > div {
z-index: 1;
}
@media (min-width: 900px) and (max-width: 940px) {
:is(body.reference-home, body.reference-commercial),
:is(body.reference-home, body.reference-commercial) :is(.reference-product-copy p, .reference-feature-list),
body.reference-home :is(.reference-card-eyebrow, .reference-card-title small) {
font-family: var(--ref-sans);
}
:is(body.reference-home, body.reference-commercial) .reference-product-copy p {
font-size: 10px;
font-weight: 400;
line-height: 17px;
}
body.reference-commercial .reference-product {
position: relative;
border-bottom: 0;
}
body.reference-commercial .reference-product:not(:last-child)::after {
content: "";
position: absolute;
right: 0;
left: 0;
height: 1px;
background: var(--reference-rule);
}
body.reference-commercial .reference-product:nth-child(1)::after,
body.reference-commercial .reference-product:nth-child(2)::after { bottom: 24px; }
body.reference-commercial .reference-product:nth-child(3)::after { bottom: 31px; }
body.reference-commercial .reference-commercial-figure {
width: 379px;
height: 254px;
overflow: visible;
background: transparent;
isolation: auto;
}
body.reference-commercial .reference-product--visual-first .reference-commercial-figure { justify-self: start; }
body.reference-commercial .reference-product--visual-last .reference-commercial-figure {
justify-self: start;
transform: translateX(-16px);
}
body.reference-commercial .reference-commercial-figure > picture {
overflow: hidden;
border-radius: 34px 0 0;
}
body.reference-commercial .reference-replacement-figure > div:first-of-type { border-radius: 34px 0 0; }
body.reference-commercial .reference-commercial-figure figcaption {
right: -40px;
width: 145px;
min-height: 58px;
padding: 8px 10px;
border-radius: 18px 0 18px 0;
}
body.reference-commercial .reference-commercial-figure figcaption strong { font-size: 12px; }
body.reference-commercial .reference-commercial-figure figcaption span { font-size: 11px; }
:is(body.reference-home, body.reference-commercial, body.reference-cta) .final-cta .cta-button {
width: 196px;
min-width: 196px;
height: 39px;
min-height: 39px;
padding: 0;
font-family: var(--ref-sans);
}
}
/* Wide screens: home rows keep the 918-canvas proportions so the page scales 1:1. */
@media (min-width: 1201px) {
body.reference-home .reference-product:nth-child(1) { min-height: 32.35vw; }
body.reference-home .reference-product:nth-child(2) { min-height: 30.61vw; }
body.reference-home .reference-product:nth-child(3) { min-height: 42.92vw; }
body.reference-home .reference-product:nth-child(4) { min-height: 46.51vw; }
body.reference-home .reference-product:nth-child(5) { min-height: 46.62vw; }
}
/* ============================================================
Wide screens (min-width 1200px): the page scales the 918 PDF
canvas 1:1. Every value below is the locked 918 px model
divided by 9.18 (vw). The header intentionally stays compact
(66px) per owner decision.
============================================================ */
@media (min-width: 1200px) {
/* --- Home hero: PDF ratio and content --- */
body.reference-home .reference-home-hero {
height: 50.65vw;
}
body.reference-home .reference-home-hero-content {
justify-content: flex-start;
padding-top: 5.88vw;
padding-left: 3.16vw;
}
body.reference-home main > .reference-home-hero > .reference-home-hero-content.container {
width: 100%;
margin: 0;
padding-left: 3.16vw;
}
body.reference-home .reference-home-hero h1 {
width: 40.3vw;
max-width: 40.3vw;
font-family: var(--ref-cond);
font-size: 3.92vw;
letter-spacing: -.01em;
line-height: 1.02;
}
body.reference-home .reference-home-hero-content > p {
width: 32.7vw;
margin-top: 1.53vw;
font-size: 1.53vw;
line-height: 2.18vw;
}
body.reference-home .reference-hero-actions {
gap: 1.53vw;
margin-top: 2.18vw;
}
body.reference-home .reference-hero-actions .reference-button {
width: 14.38vw;
min-width: 14.38vw;
height: 3.27vw;
min-height: 3.27vw;
padding: 0;
font-size: .87vw;
}
body.reference-home .reference-hero-actions .reference-button-outline {
width: 13.94vw;
min-width: 13.94vw;
}
body.reference-home .reference-assurances {
width: 42.48vw;
margin-top: 3.27vw;
}
body.reference-home .reference-assurances li {
min-height: 8.71vw;
padding-inline: .65vw;
}
body.reference-home .reference-assurances li .ref-icon { width: 3.27vw; height: 3.27vw; }
body.reference-home .reference-assurances strong { font-size: 1.09vw; }
body.reference-home .reference-assurances span { font-size: .98vw; }
/* --- Intro sections --- */
body.reference-home .reference-intro {
min-height: 11.44vw;
}
body.reference-home .reference-intro h2,
body.reference-commercial .reference-commercial-intro h2 {
font-size: 2.61vw;
}
body.reference-home .reference-intro-rule {
width: 7.63vw;
height: .33vw;
margin: 1.2vw 0 .8vw;
}
body.reference-home .reference-intro p {
font-size: 1.31vw;
}
body.reference-commercial .reference-commercial-intro {
/* The band keeps its height; the heading is CENTRED in it again.
`align-items: flex-start` pinned the heading to the top of a 16.34vw
band, so every pixel of slack fell underneath it — 142px of dead
white space at 1512px and ~225px at 2111px, directly below "Built for
Commercial Performance". The base rule already says
`place-items: center`; this override was undoing it only at wide
viewports, which is where the band is tallest and the gap worst. */
align-items: center;
min-height: 16.34vw;
padding-top: 0;
}
/* --- Commercial banner: PDF ratio, uncapped --- */
body.reference-commercial .reference-commercial-banner {
min-height: 21.24vw;
}
body.reference-commercial .reference-commercial-banner h1 {
font-size: 3.2vw;
}
body.reference-commercial .reference-banner-content {
padding-bottom: 4vw;
}
/* --- Copy columns (both pages) --- */
:is(body.reference-home, body.reference-commercial) .reference-product-copy h3 {
margin-bottom: 1.31vw;
font-size: 2.61vw;
line-height: 1.1;
}
:is(body.reference-home, body.reference-commercial) .reference-product-copy p {
margin-bottom: 1.09vw;
font-size: 1.2vw;
line-height: 1.85vw;
}
:is(body.reference-home, body.reference-commercial) .solution-btn {
width: 8.28vw;
min-width: 8.28vw;
height: 3.16vw;
min-height: 3.16vw;
margin-top: .87vw;
padding: 0;
font-size: 1.09vw;
}
body.reference-home .reference-list-block {
margin: .87vw 0 0;
}
body.reference-home .reference-list-block h4 {
margin-bottom: .96vw;
font-size: 1.36vw;
}
body.reference-home .reference-feature-list {
gap: .44vw;
font-size: 1.09vw;
}
body.reference-home .reference-feature-list--two {
column-gap: 3.81vw;
}
/* --- Commercial rows keep the 918 proportions --- */
body.reference-home .reference-product:nth-child(1) .reference-dual-door-visual { margin-top: 1.74vw; }
body.reference-home .reference-product:nth-child(1) .reference-product-copy { margin-top: 4.36vw; }
body.reference-home .reference-product:nth-child(2) .reference-product-copy { margin-top: 5.23vw; padding-left: 1.42vw; }
body.reference-home .reference-product:nth-child(4) .reference-product-copy { padding-left: .33vw; }
body.reference-home .reference-product:nth-child(5) { padding-top: 2.72vw; }
body.reference-home .reference-product:nth-child(5) .solution-btn { margin-top: 1.85vw; }
body.reference-home .reference-product:nth-child(4) .reference-product-wide { margin-top: .33vw; }
body.reference-commercial .reference-product-copy { height: 27.02vw; }
body.reference-commercial .reference-product:nth-child(1) .reference-product-copy { transform: translateY(-1.2vw); }
body.reference-commercial .reference-product:nth-child(2) .reference-commercial-figure { margin-top: 1.53vw; }
body.reference-commercial .reference-product:nth-child(1) { min-height: 33.22vw; }
body.reference-commercial .reference-product:nth-child(2) { min-height: 33.66vw; }
body.reference-commercial .reference-product:nth-child(3) { min-height: 34.42vw; }
body.reference-commercial .reference-product:nth-child(4) { min-height: 34.31vw; }
/* --- Commercial figure badges scale with the figure --- */
body.reference-commercial .reference-commercial-figure figcaption {
width: 15.8vw;
min-height: 6.32vw;
padding: .87vw 1.09vw;
border-radius: 1.96vw 0 1.96vw 0;
}
body.reference-commercial .reference-commercial-figure figcaption strong { font-size: 1.31vw; }
body.reference-commercial .reference-commercial-figure figcaption span { margin-top: .2vw; font-size: 1.2vw; }
body.reference-commercial .reference-before-after-label {
padding: .38vw .89vw;
font-size: .8vw;
}
/* --- CTA + footer --- */
:is(body.reference-home, body.reference-commercial, body.reference-cta) .final-cta {
min-height: 20.26vw;
}
:is(body.reference-home, body.reference-commercial, body.reference-cta) .final-cta h2 {
font-size: 2.61vw;
}
:is(body.reference-home, body.reference-commercial, body.reference-cta) .final-cta p {
margin: 1.09vw auto 1.53vw;
font-size: 1.2vw;
}
:is(body.reference-home, body.reference-commercial, body.reference-cta) .final-cta .cta-button {
width: 21.35vw;
min-width: 21.35vw;
height: 4.25vw;
min-height: 4.25vw;
padding: 0;
font-size: 1.09vw;
}
}
/* ============ Quote Request Modal (public flow) ============ */
button.solution-btn { font-family: inherit; cursor: pointer; }
.quote-request-overlay {
position: fixed;
inset: 0;
z-index: 4000;
display: flex;
align-items: center;
justify-content: center;
padding: 1.25rem;
background: rgba(16, 23, 42, .58);
backdrop-filter: blur(3px);
}
.quote-request-dialog {
position: relative;
width: min(540px, 100%);
max-height: calc(100vh - 2.5rem);
overflow-y: auto;
border-radius: 18px 0 18px 0;
background: #fff;
box-shadow: 0 24px 64px rgba(10, 14, 28, .35);
}
.quote-request-close {
position: absolute;
top: .55rem;
right: .7rem;
z-index: 1;
width: 2rem;
height: 2rem;
border: 0;
border-radius: 50%;
background: transparent;
color: rgba(255, 255, 255, .85);
font-size: 1.4rem;
line-height: 1;
cursor: pointer;
}
.quote-request-close:hover { color: #F2C625; }
.quote-request-head {
padding: 1.4rem 1.6rem 1.15rem;
background: #191A2E;
color: #fff;
}
.quote-request-head h2 {
margin: 0;
font-family: 'Playfair Display', Georgia, serif;
font-size: 1.55rem;
font-weight: 700;
color: #fff;
}
.quote-request-head h2::after {
content: "";
display: block;
width: 44px;
height: 3px;
margin-top: .5rem;
background: #F2C625;
}
.quote-request-head p {
margin: .6rem 0 0;
color: rgba(255, 255, 255, .72);
font-size: .85rem;
}
.quote-request-form[hidden],
.quote-request-success[hidden] { display: none !important; }
.quote-request-form {
display: grid;
gap: .85rem;
padding: 1.3rem 1.6rem 1.5rem;
}
.quote-request-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: .85rem;
}
.quote-request-form label {
display: grid;
gap: .3rem;
color: #1E1A38;
font-size: .74rem;
font-weight: 700;
letter-spacing: .03em;
text-transform: uppercase;
}
.quote-request-form label span { color: #F2C625; margin-left: .15em; }
.quote-request-form input,
.quote-request-form select,
.quote-request-form textarea {
width: 100%;
padding: .6rem .7rem;
border: 1px solid #d9dbe3;
border-radius: 6px;
background: #fff;
color: #1E1A38;
font-family: inherit;
font-size: .9rem;
font-weight: 400;
letter-spacing: normal;
text-transform: none;
}
.quote-request-form input:focus,
.quote-request-form select:focus,
.quote-request-form textarea:focus {
outline: 2px solid #F2C625;
outline-offset: 0;
border-color: #F2C625;
}
.quote-request-form textarea { resize: vertical; min-height: 96px; }
.quote-request-hp {
position: absolute !important;
left: -9999px !important;
width: 1px !important;
height: 1px !important;
opacity: 0;
pointer-events: none;
}
.quote-request-error {
margin: 0;
padding: .55rem .7rem;
border-radius: 6px;
background: #fdecec;
color: #b3261e;
font-size: .82rem;
}
.quote-request-actions {
display: flex;
align-items: center;
gap: .8rem;
margin-top: .2rem;
}
.quote-request-submit {
padding: .7rem 1.7rem;
border: 0;
border-radius: 999px;
background: #F2C625;
color: #191A2E;
font-family: inherit;
font-size: .82rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
cursor: pointer;
transition: transform .15s ease, box-shadow .15s ease;
}
.quote-request-submit:hover { box-shadow: 0 6px 18px rgba(242, 198, 37, .4); transform: translateY(-1px); }
.quote-request-submit:disabled { opacity: .65; cursor: default; transform: none; box-shadow: none; }
.quote-request-cancel {
padding: .7rem .5rem;
border: 0;
background: transparent;
color: #575568;
font-family: inherit;
font-size: .8rem;
cursor: pointer;
}
.quote-request-cancel:hover { color: #1E1A38; text-decoration: underline; }
.quote-request-success {
display: grid;
justify-items: center;
gap: .5rem;
padding: 2.4rem 1.6rem 2.2rem;
text-align: center;
}
.quote-request-success svg {
width: 56px;
height: 56px;
color: #F2C625;
}
.quote-request-success h3 {
margin: .4rem 0 0;
font-family: 'Playfair Display', Georgia, serif;
font-size: 1.3rem;
color: #1E1A38;
}
.quote-request-success p { margin: 0; color: #575568; font-size: .9rem; }
.quote-request-done {
margin-top: .9rem;
padding: .6rem 2.2rem;
border: 0;
border-radius: 999px;
background: #191A2E;
color: #fff;
font-family: inherit;
font-size: .8rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
cursor: pointer;
}
@media (max-width: 540px) {
.quote-request-overlay { padding: 0; align-items: flex-end; }
.quote-request-dialog { max-height: 94vh; border-radius: 16px 16px 0 0; }
.quote-request-grid { grid-template-columns: 1fr; }
}
/* An empty hardware category. The catalogue is the owner's to fill; nothing
is invented to make the grid look populated. */
.hw-empty-category {
grid-column: 1 / -1;
text-align: center;
padding: 3.5rem 1.5rem;
}
.hw-empty-category h3 {
margin: 0 0 .6rem;
font-size: 1.3rem;
color: var(--dark-navy, #1a1f36);
}
.hw-empty-category p {
margin: 0 auto 1.4rem;
max-width: 34rem;
color: var(--text-gray, #667085);
}
/* ── Website Content editor ───────────────────────────────────────────────
The field list is generated from the page markup, so this styling has to
work for a screen with three fields and for one with a hundred and ninety.
Grouping is collapsible and the search filters across the built-in wording,
not just the key, because an owner looks for "Explore Products", not for
home.reference-hero-actions.a. */
.content-editor { padding: 0 1.5rem 2rem; }
.content-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.75rem;
padding: 1rem 0;
position: sticky;
top: 0;
background: var(--admin-bg, #f8fafc);
z-index: 5;
}
.content-toolbar label { font-size: 0.85rem; font-weight: 600; color: #475569; }
.content-toolbar select,
.content-toolbar input[type="search"] {
padding: 0.5rem 0.7rem;
border: 1px solid #cbd5e1;
border-radius: 6px;
font: inherit;
background: #fff;
}
.content-toolbar input[type="search"] { flex: 1 1 16rem; min-width: 12rem; }
.content-changed-only { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; }
.content-preview-link {
margin-left: auto;
font-size: 0.85rem;
font-weight: 600;
color: #2563eb;
text-decoration: none;
white-space: nowrap;
}
.content-preview-link:hover { text-decoration: underline; }
.content-status { margin: 0 0 0.75rem; font-size: 0.85rem; color: #64748b; }
.content-status.warn { color: #b45309; }
.content-loading { color: #64748b; padding: 1.5rem 0; }
.content-group {
border: 1px solid #e2e8f0;
border-radius: 8px;
background: #fff;
margin-bottom: 0.75rem;
}
.content-group > summary {
cursor: pointer;
padding: 0.75rem 1rem;
font-weight: 600;
color: #0f172a;
list-style: none;
display: flex;
align-items: center;
gap: 0.5rem;
}
.content-group > summary::-webkit-details-marker { display: none; }
.content-group > summary::before { content: "▸"; color: #94a3b8; transition: transform 150ms ease-out; }
.content-group[open] > summary::before { transform: rotate(90deg); }
.content-count {
margin-left: auto;
font-size: 0.75rem;
font-weight: 600;
color: #64748b;
background: #f1f5f9;
border-radius: 999px;
padding: 0.1rem 0.5rem;
}
.content-field { padding: 0.75rem 1rem 1rem; border-top: 1px solid #f1f5f9; }
.content-field-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; }
.content-label {
font-size: 0.85rem;
color: #475569;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.content-badge {
font-size: 0.68rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #047857;
background: #d1fae5;
border-radius: 999px;
padding: 0.1rem 0.45rem;
}
.content-reset {
margin-left: auto;
border: 1px solid #e2e8f0;
background: #fff;
color: #64748b;
border-radius: 6px;
padding: 0.2rem 0.55rem;
font-size: 0.75rem;
cursor: pointer;
}
.content-reset:hover { border-color: #cbd5e1; color: #0f172a; }
.content-field input[type="text"],
.content-field textarea {
width: 100%;
padding: 0.55rem 0.7rem;
border: 1px solid #cbd5e1;
border-radius: 6px;
font: inherit;
background: #fff;
resize: vertical;
}
.content-field input:focus-visible,
.content-field textarea:focus-visible { outline: 2px solid #2563eb; outline-offset: 1px; }
/* The placeholder IS the built-in wording, so it has to stay readable. */
.content-field ::placeholder { color: #94a3b8; opacity: 1; }
.content-field.is-changed { background: #f8fffb; }
.content-field.is-dirty input,
.content-field.is-dirty textarea { border-color: #f59e0b; }
.content-image-row { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.5rem; }
.content-image-row img {
width: 84px; height: 56px; object-fit: cover;
border-radius: 6px; border: 1px solid #e2e8f0; background: #f8fafc;
}
.content-upload {
border: 1px solid #cbd5e1; border-radius: 6px;
padding: 0.35rem 0.7rem; font-size: 0.8rem; font-weight: 600;
color: #334155; cursor: pointer; background: #fff;
}
.content-upload:hover { border-color: #94a3b8; }
@media (max-width: 720px) {
.content-editor { padding: 0 0.75rem 1.5rem; }
.content-preview-link { margin-left: 0; }
}
/* ============================================================================
PHONE FIXES — interior pages only (index.html and commercial.html do not
render `.page-banner`, so nothing here can reach them).
============================================================================ */
/* The interior page banner is a nowrap flex row: breadcrumb on the left, a
2.5rem italic Playfair heading on the right, `justify-content: space-between`.
On a 320px screen the word "Commercial" alone is 227px, so the row measured
384px inside a 320px viewport — documentElement.scrollWidth 384, and the last
64px of the heading was cut off the right edge (350px on /residential, 327px
on /resources, 384px at 360px too on /commercial-builder).
Allowing the row to wrap is enough: `space-between` is kept, so where the two
items already fit — 414px and up — the layout is byte-identical and only the
widths that actually overflowed change. The banner is a fixed 180px strip with
bottom-aligned content, and breadcrumb + heading stack to ~71px, so the second
line costs nothing. `overflow-wrap` guards the same row against a longer title
set later from the admin's editable content. */
@media (max-width: 640px) {
.page-banner .banner-content {
flex-wrap: wrap;
row-gap: 0.15rem;
}
.page-banner .banner-content > * {
min-width: 0;
}
.page-banner h1 {
overflow-wrap: break-word;
}
}
/* The commercial builder sets its option grid's column count inline, per
category (`grid-template-columns: repeat(4, 1fr)` on the door-type group).
`1fr` floors each track at min-content, so on a 320px screen the four
tracks measured 64+64+56+69 plus 30px of gaps = 284px inside a 240px grid
and the last card was cut 3.5px off the right edge; at 360 and 390 nothing
was clipped but each option had only ~38px of usable text width, so
"Double Doors and Frame" wrapped to five lines.
`auto-fit` + `minmax` is the same intent expressed responsively: it fits as
many columns as the width honestly allows and never fewer. !important is
required only because the value it replaces is an inline style. Phones only;
481px and up keeps the per-category count the builder asks for. */
@media (max-width: 480px) {
.commercial-config-column .option-grid,
#commercial-config-panel .option-grid,
.commercial-config-col .option-grid {
grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr)) !important;
}
/* A single-line option is 10px + 20px text + 10px = 42px, two pixels short
of the 44px minimum touch target. */
.commercial-config-column .config-option,
#commercial-config-panel .config-option,
.commercial-config-col .config-option {
min-height: 44px;
}
}
/* ============================================================================
TOUCH REACHABILITY AND OVERFLOW - measured fixes, phones and tablets only.
Everything in this section is scoped to `max-width: 899px` (the width below
which the header already collapses to the drawer toggle: measured, the nav is
display:none and `.public-menu-toggle` is 44x44 at 768px and below). Desktop
at 900px and up is untouched, so the approved design is unchanged where it was
designed. Nothing here restyles for taste - every rule below closes a gap that
was measured in a real browser at 320/360/390/414/768.
============================================================================ */
/* ---------------------------------------------------------------------------
1. The home page's "metal-commercial" product image was 40% clipped.
MEASURED: at 320-414px, `figure.reference-visual.reference-feature-visual`
inside [data-reference-product="metal-commercial"] was 587px wide inside a
328px grid column, and `main { overflow: hidden }` cut the right 259px off.
The other three home visuals (dual-door, frame, hardware) measured exactly
328px and were fine - that asymmetry is what proves this is a defect and not
a designed bleed.
ROOT CAUSE is specificity, not layout. The phone rule that flattens these
figures sets `aspect-ratio: auto`:
body.reference-home :is(.reference-dual-door-visual, .reference-feature-visual,
.reference-frame-visual, .reference-hardware-visual)
`:is()` takes the specificity of its most specific argument - a class - so
that selector is (0,2,1). But one variant is pinned separately at line 19412:
body.reference-home [data-reference-product="metal-commercial"] .reference-feature-visual
-> (0,3,1)
(0,3,1) beats (0,2,1), so `aspect-ratio: 421 / 241` survived the phone reset.
Combined with `min-height: 21rem` (336px, from the max-width:780px block) the
ratio then DERIVED the width: 336 x 421/241 = 587px. That is the measured
number exactly, which is what confirms this reading.
The fix restates the reset at matching specificity rather than reaching for
!important, so the desktop rule keeps working at 541px and up.
--------------------------------------------------------------------------- */
@media (max-width: 540px) {
body.reference-home [data-reference-product="metal-commercial"] .reference-feature-visual {
aspect-ratio: auto;
}
}
/* ---------------------------------------------------------------------------
2. The band CTA was 38px tall on every page at every phone width.
MEASURED: `.final-cta .cta-button` was 192x38 at 320/360/390/414 and 768 - on
/, /commercial, /hardware, /resources and /residential alike. The winning rule
is at line 20076 inside `@media (max-width: 640px)`:
:is(body.reference-home, body.reference-commercial, body.reference-cta)
.final-cta .cta-button { min-height: clamp(38px, 4.25vw, 87px); ... }
which floors at 38px, six pixels under the 44px minimum.
Both selectors are listed because the scoped one is (0,3,1) and would win over
a bare `.final-cta .cta-button` (0,2,0); the unscoped one is what reaches the
pages that carry NO reference body class (/cart, /commercial-builder, /privacy,
/terms, /account). Fixing only the scoped form is the "half of it" case - it is
the same control on all of them.
Height only. The 9.92px font-size the same rule computes to is a legibility
defect, but changing it is a restyle of an approved design, so it is reported
rather than silently altered here.
--------------------------------------------------------------------------- */
@media (max-width: 899px) {
.final-cta .cta-button,
:is(body.reference-home, body.reference-commercial, body.reference-cta) .final-cta .cta-button {
min-height: 44px;
}
}
/* ---------------------------------------------------------------------------
3. Footer, breadcrumb and inline contact links were 17-27px tall.
MEASURED at 360px on /resources: footer column links 175x21, 68x21, 178x21;
contact links 107x20 and 115x20; legal links 102x20 and 119x20; the breadcrumb
"Home" 40x23. All are standalone navigation targets, all under 44px.
The column links stack with a measured 10px gap, so growing each to 44px moves
their centres 44px or more apart - the targets cannot overlap and capture each
other's taps, which is the failure mode a padding-only or ::after-overlay fix
would have introduced here.
inline-flex, not block: the contact and legal links sit inside elements
next to other text, and making them block would break those lines.
--------------------------------------------------------------------------- */
@media (max-width: 899px) {
.footer-links ul li a,
.footer-contact-info p a,
.footer-legal a,
.breadcrumb-nav a {
display: inline-flex;
align-items: center;
min-height: 44px;
}
/* The breadcrumb's only link is the word "Home", which measured 40px wide -
four short of the minimum on the horizontal axis as well. */
.breadcrumb-nav a {
min-width: 44px;
justify-content: center;
}
/* The list item carried the vertical rhythm; with the anchor now 44px tall
its own bottom margin would double-count that space. */
.footer-links ul li {
margin-bottom: 0;
}
}
/* ---------------------------------------------------------------------------
4. Form controls: 42px tall and 15.2px text - iOS zooms on focus under 16px.
MEASURED at 320-768px on /contact: #first-name, #last-name, #email, #phone,
#company and #interest were all 226-664 x 42 with font-size 15.2px. Safari on
iOS zooms the viewport whenever a focused control's text is below 16px, and it
does not zoom back out - the user is left scrolled sideways on a form they were
half way through. 16px is the documented threshold, not a preference.
Applied at phone and tablet widths only, so the desktop type scale is unchanged.
--------------------------------------------------------------------------- */
@media (max-width: 899px) {
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
select,
textarea,
/* `.form-group select` (0,2,0) at line 6880 beats a bare `select` (0,0,1),
so the select and textarea have to be named through that class or they
keep the 0.95rem that measured 15.2px. The bare `input` selector above
already wins on its own because the three :not() attribute arguments make
it (0,3,1) - which is exactly why the inputs were fixed by the first pass
and these two were not. */
.form-group select,
.form-group textarea,
.form-group input {
font-size: 16px;
min-height: 44px;
}
textarea,
.form-group textarea {
/* 44px would fight the rows attribute on a 4-row box. */
min-height: 88px;
}
/* A checkbox blown up to 44px looks broken. WCAG 2.5.8 counts the label as
the target when activating the label activates the control, so the ROW is
sized to 44px and the box itself is enlarged to a comfortable 24px. */
input[type="checkbox"],
input[type="radio"] {
width: 24px;
height: 24px;
}
.auth-modal label,
.checkbox-row,
label.checkbox {
min-height: 44px;
display: flex;
align-items: center;
gap: .5rem;
}
}
/* ---------------------------------------------------------------------------
5. Quantity steppers were 36px.
MEASURED at 320-768px on /commercial-builder: `.qty-btn` 36x36 and
`#commercial-quantity` 50x36. `.hw-qty-input` is the same control rendered by
script.js into the hardware pop-ups, so it is sized here too rather than left
for whoever next opens that template.
--------------------------------------------------------------------------- */
@media (max-width: 899px) {
.qty-btn,
.quantity-selector input,
#commercial-quantity,
#residential-quantity,
#quantity,
.hw-qty-input {
min-width: 44px;
min-height: 44px;
}
}
/* ---------------------------------------------------------------------------
6. Auth modal controls.
MEASURED at 320-768px with the login dialog open: `.modal-close-btn` 36x36,
`.auth-tab` 240-324 x 33, `.link-muted` ("Forgot password?") 251x26,
`.primary-btn.full` ("Login") 251x39, and the remember-me checkbox 13x13 at
13.33px. The close button and the tab strip are the two controls a user meets
first on a phone, and both were under the minimum.
--------------------------------------------------------------------------- */
@media (max-width: 899px) {
.modal-close-btn {
min-width: 44px;
min-height: 44px;
}
.auth-tab,
.primary-btn,
.secondary-btn,
.ghost-btn {
min-height: 44px;
}
/* `.link-muted` is "Forgot password?"; the two data-open-* anchors are the
"Sign up" / "Sign in" switches script.js renders inside a sentence. They
are inline, so WCAG 2.5.8's inline exception would forgive them, but they
are also the only way to reach the other auth tab - worth the target.
inline-flex keeps them inside their
without breaking the line. */
.link-muted,
[data-open-register],
[data-open-login] {
display: inline-flex;
align-items: center;
min-height: 44px;
}
}
/* ---------------------------------------------------------------------------
7. Header cart icon.
MEASURED 37-39px wide against a 44px height. Width only - the height passes.
--------------------------------------------------------------------------- */
@media (max-width: 899px) {
.cart-icon {
min-width: 44px;
min-height: 44px;
justify-content: center;
}
}
/* ---------------------------------------------------------------------------
8. Motion.
The stylesheet already carries a global `prefers-reduced-motion` reset that
neutralises animation and transition duration. Nothing in this section
introduces motion, so there is no new guard to add - this note exists so the
next reader does not have to re-derive that.
--------------------------------------------------------------------------- */
/* ===========================================================================
ADAPTIVE HEADER — the "different layout" past the approved five links
===========================================================================
The header menu is owner-editable up to 12 links (lib/site-nav.js) but the
desktop bar was designed for the 5 the site ships with. Everything in this
block is scoped to `.main-nav[data-nav-adaptive]`, an attribute
PublicHeaderMenu sets only when it counts SIX OR MORE items — so with the
shipped menu not one of these declarations matches and the approved header
renders exactly as it does today, at every width, on every page.
Two things change at six items, and both are the point:
1. THE NAV BECOMES THE THING THAT YIELDS. The row's middle track is
`minmax(max-content, 1fr)` by default, which is deliberate: it stops the
nav being squeezed and bleeding into the logo. But that floor is exactly
what turns a sixth link into overflow — the track simply grows, and the
search box (then the quote button) pays for it. Past the threshold the
floor is dropped to `minmax(0, 1fr)` so the nav is bounded by its track,
and `overflow: hidden` on the list makes "does it fit?" a question the
script can answer with scrollWidth vs clientWidth.
2. THE GAP BECOMES FLUID. `clamp(0.7rem, 1.4vw, 1.5rem)` instead of a flat
1.5rem: at 1560px it is still the designed 1.5rem, and it tightens only
as the window narrows. That alone absorbs one to two extra links before
anything has to move into the More panel.
Everything below the mobile breakpoint is untouched — the drawer owns the
menu there, so this whole block sits inside a min-width query and cannot
reach it.
=========================================================================== */
@media (min-width: 900px) {
.header .header-content:has(.main-nav[data-nav-adaptive]) {
grid-template-columns: auto minmax(0, 1fr) auto;
}
.header .main-nav[data-nav-adaptive] {
position: relative; /* the More panel is positioned against this */
}
.header .main-nav[data-nav-adaptive] > ul {
flex-wrap: nowrap;
overflow: hidden;
gap: clamp(0.7rem, 1.4vw, 1.5rem);
}
.header .main-nav[data-nav-adaptive] .nav-more {
display: flex;
align-items: center;
flex: 0 0 auto;
}
/* Reads as one of the links, not as a new kind of control: same size, same
weight, same colour, same underline-on-hover as .main-nav a. */
.header .main-nav .nav-more-btn {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.35rem 0;
border: 0;
background: none;
cursor: pointer;
color: rgba(255, 255, 255, 0.9);
font: inherit;
font-weight: 500;
font-size: 0.9rem;
letter-spacing: 0.02em;
white-space: nowrap;
position: relative;
transition: color 0.2s ease;
}
.header .main-nav .nav-more-btn::after {
content: '';
position: absolute;
left: 0;
bottom: -6px;
width: 100%;
height: 2px;
background: var(--primary-yellow);
transform: scaleX(0);
transform-origin: center;
transition: transform 0.2s ease;
}
.header .main-nav .nav-more-btn:hover,
.header .main-nav .nav-more-btn[aria-expanded="true"],
.header .main-nav .nav-more-btn.has-active {
color: #ffffff;
}
/* `.has-active` is set when the page you are ON was moved into the panel.
Without it the bar would show no current-page marker at all. */
.header .main-nav .nav-more-btn:hover::after,
.header .main-nav .nav-more-btn[aria-expanded="true"]::after,
.header .main-nav .nav-more-btn.has-active::after {
transform: scaleX(1);
}
.header .main-nav .nav-more-btn:focus-visible {
outline: 3px solid rgba(242, 198, 37, 0.65);
outline-offset: 3px;
}
.header .main-nav .nav-more-btn i {
font-size: 0.7em;
transition: transform 0.2s ease;
}
.header .main-nav .nav-more-btn[aria-expanded="true"] i {
transform: rotate(180deg);
}
.header .main-nav .nav-more-panel {
/* display/justify-content/gap/width are RESET, not merely unset: the
reference pages carry `:is(body.reference-home, …) .main-nav ul {
display:flex; justify-content:center; gap:…; width:100% }`, and this
panel is a
inside .main-nav, so without these it lays itself out
as a second horizontal row and runs off the right of the screen. */
display: block;
justify-content: flex-start;
gap: 0;
width: auto;
align-items: stretch;
position: absolute;
top: calc(100% + 0.55rem);
right: 0;
z-index: 60;
min-width: 12rem;
max-width: min(20rem, 80vw);
margin: 0;
padding: 0.35rem 0;
list-style: none;
background: var(--nav-indigo, #2b2350);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 0.5rem;
box-shadow: 0 18px 34px rgba(16, 11, 36, 0.38);
}
.header .main-nav .nav-more-panel li {
display: block;
flex: none;
white-space: normal;
}
.header .main-nav .nav-more-panel a {
display: block;
min-height: 0;
padding: 0.6rem 1rem;
font-size: 0.9rem;
color: rgba(255, 255, 255, 0.92);
white-space: nowrap;
}
.header .main-nav .nav-more-panel a::after {
display: none; /* the sliding underline belongs to the row */
}
.header .main-nav .nav-more-panel a:hover,
.header .main-nav .nav-more-panel a.active {
color: #ffffff;
background: rgba(255, 255, 255, 0.08);
}
}
/* The More control belongs to the desktop row only. Below the breakpoint the
script puts every parked link back into the single list and hides the button,
so the drawer always shows the whole menu — but `[hidden]` loses to the
drawer's `display: grid` on the list, hence the explicit rule. */
.header .main-nav .nav-more[hidden],
.header .main-nav .nav-more-panel[hidden] {
display: none !important;
}
@media (max-width: 899px) {
.header .main-nav[data-nav-adaptive] .nav-more,
.header .main-nav[data-nav-adaptive] .nav-more-panel {
display: none !important;
}
.header .main-nav[data-nav-adaptive] > ul {
overflow: visible;
}
}
/* ===========================================================================
VARIATION POPUP — pager for long option lists
===========================================================================
Only ever present when a grid holds more than 12 options (Wall Thickness
(Stud) holds 54). Restraint is deliberate: the tiles are the content, and a
previous change already had to walk back a hover effect that scaled an option
by 35%. Nothing here animates, nothing here competes.
=========================================================================== */
.popup-option--hidden {
display: none !important;
}
.popup-pager__bar {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: wrap;
padding: 0 0 0.65rem;
border-bottom: 1px solid #eef0f3;
}
.popup-pager__filter {
flex: 1 1 12rem;
min-width: 0;
min-height: 44px;
padding: 0.5rem 0.75rem;
border: 1px solid #d7dbe0;
border-radius: 8px;
/* 16px: anything smaller makes iOS Safari zoom the whole modal on focus. */
font-size: 16px;
color: var(--dark-navy, #12203a);
background: #fff;
}
.popup-pager__filter:focus-visible {
outline: 2px solid var(--primary-yellow);
outline-offset: 1px;
}
.popup-pager__status {
margin: 0;
flex: 0 1 auto;
font-size: 0.85rem;
color: #5b6472;
white-space: nowrap;
}
.popup-pager__nav {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 0.35rem;
padding-top: 0.75rem;
border-top: 1px solid #eef0f3;
}
.popup-pager__pages {
display: flex;
align-items: center;
gap: 0.25rem;
flex-wrap: wrap;
}
.popup-pager__btn {
min-width: 44px;
min-height: 44px;
padding: 0 0.7rem;
border: 1px solid #d7dbe0;
border-radius: 8px;
background: #fff;
color: var(--dark-navy, #12203a);
font: inherit;
font-size: 0.85rem;
font-weight: 600;
cursor: pointer;
transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.popup-pager__btn:hover:not(:disabled) {
border-color: var(--primary-yellow);
background: rgba(247, 213, 66, 0.12);
}
.popup-pager__btn:focus-visible {
outline: 2px solid var(--primary-yellow);
outline-offset: 2px;
}
.popup-pager__btn:disabled {
opacity: 0.45;
cursor: default;
}
.popup-pager__page.is-current {
border-color: var(--primary-yellow);
background: var(--primary-yellow);
color: var(--dark-navy, #12203a);
}
.popup-pager__gap {
padding: 0 0.15rem;
color: #9aa2ad;
}
.popup-pager__selected {
margin-left: 0.35rem;
max-width: 16rem;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
border-style: dashed;
}
@media (max-width: 600px) {
.popup-pager__status { white-space: normal; }
.popup-pager__nav { gap: 0.3rem; }
}
/* ===========================================================================
ACCOUNT — membership tier cards
===========================================================================
The two tiers a customer may ASK for. Every state on them is written by
loadMembership() from /api/customers/:id/membership-request; this file only
describes what those states look like.
=========================================================================== */
.upgrade-options {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
}
.account-type-card.upgrade-card {
margin-bottom: 0;
display: flex;
flex-direction: column;
background: var(--white, #fff);
border-color: #e6e8ec;
}
.account-type-card.upgrade-card.is-pending {
border-color: var(--primary-yellow);
background: rgba(247, 213, 66, 0.07);
}
.account-type-card.upgrade-card.is-rejected {
border-color: #ef4444;
background: rgba(239, 68, 68, 0.05);
}
.account-type-card.upgrade-card.is-current {
border-color: #059669;
background: rgba(5, 150, 105, 0.06);
}
.account-type-card.upgrade-card .upgrade-btn {
margin-top: auto;
min-height: 44px;
justify-content: center;
}
.account-type-card.upgrade-card .upgrade-btn:disabled {
background: #e6e8ec;
color: #5b6472;
cursor: default;
}
.account-type-card.upgrade-card .upgrade-btn:disabled:hover {
background: #e6e8ec;
color: #5b6472;
}
/* Empty until the server has answered, so it must not reserve space or the
cards jump on load. */
.membership-state {
margin: 0.85rem 0 0;
font-size: 0.88rem;
line-height: 1.45;
color: #5b6472;
}
.membership-state:empty {
display: none;
}
.membership-state.is-pending { color: #92400e; }
.membership-state.is-rejected { color: #991b1b; }
.membership-state.is-approved { color: #065f46; }
.membership-cooldown {
display: block;
margin-top: 0.2rem;
color: #5b6472;
}
/* ===========================================================================
REGISTER MODAL — it must always be possible to reach "Create Account"
===========================================================================
`#register-modal .auth-modal-panel` is pinned to `max-height: none !important;
overflow-y: visible !important` a few thousand lines above, under the comment
"wider, no scrollbar". The intent is right — a scrollbar inside a sign-up form
is unpleasant — but the panel is 1040px tall with the default Account Type and
~1135px once a trade tier reveals the Business Number field, and the dialog is
vertically centred. On a 1000px-tall window the panel's top sits at -68px and
the Terms checkbox and the submit button fall below the fold with no way to
scroll to them: the form cannot be completed at all. (Measured, not inferred:
panelTop -68 at 1000px, -168 at 800px.)
So the cap comes back, sized to the viewport rather than to a fixed number. On
a tall window nothing changes and there is still no scrollbar, because the
panel is shorter than 92vh. On a short one the panel scrolls instead of hiding
its own submit button. `!important` is required only to beat the `!important`
it is correcting.
=========================================================================== */
#register-modal .auth-modal-panel {
max-height: min(92vh, calc(100vh - 1.5rem)) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
}
/* ---------------------------------------------------------------------------
...and on a phone the cap above is measured against the WRONG viewport.
`vh` is the LARGE viewport: it ignores the browser's own URL bar, which on
iOS Safari and Chrome Android covers ~90px of what `position: fixed; inset: 0`
still counts as on screen. So a 92vh panel is up to ~90px taller than the
visible area, the overlay centres it, and the overflow splits evenly - the
"CREATE ACCOUNT" eyebrow and part of the heading sit above the fold. That is
the "slightly cut off at the top" report, and it is invisible in a desktop
browser because there vh and dvh are the same number.
Two changes, both needed:
1. dvh (the DYNAMIC viewport) measures what is actually visible, and the cap
also subtracts the overlay's own 2rem/1rem padding so the panel fits INSIDE
the padding box instead of overflowing it by ~13px.
2. The overlay scrolls and the panel is centred with `margin: auto` rather
than by `align-items: center` alone. A centred flex item that is taller
than its container overflows in BOTH directions and the top overflow is
unreachable - no amount of scrolling gets to it. Auto margins centre the
same way while keeping both edges scrollable, so even a viewport shorter
than the form can always reach the top of it.
Scoped to the auth dialogs: they are the only ones tall enough to hit this.
--------------------------------------------------------------------------- */
.modal.auth-modal {
overflow-y: auto;
overscroll-behavior: contain;
}
.modal.auth-modal .auth-modal-panel {
margin: auto;
}
@supports (height: 100dvh) {
.modal.auth-modal {
max-height: 100dvh;
}
.modal .auth-modal-panel,
#register-modal .auth-modal-panel {
max-height: min(92dvh, calc(100dvh - 4rem)) !important;
}
}
/* ===========================================================================
HARDWARE "Add to Cart" — 41px was three pixels short of a tap target
===========================================================================
`.hw-product-card .hw-add-to-cart` computes to 41px tall (0.7rem padding +
0.85rem/600 label), so every Add to Cart on a populated /hardware page failed
the 44x44 minimum at 320, 360, 390, 414 and 768px. It went unnoticed because a
catalogue with no hardware in it renders no such button — the check only has
something to measure once the 15 categories are actually loaded.
min-height, not padding: padding would move the label off its optical centre
in a card whose other rows are already aligned to it.
=========================================================================== */
.hw-product-card .hw-add-to-cart {
min-height: 44px;
}