/* Fonts loaded via in HTML for better performance */
/* Reduce CLS from web font swap by matching fallback metrics */
@font-face {
font-family: 'DM Sans Fallback';
src: local('Arial');
size-adjust: 105%;
ascent-override: 92%;
descent-override: 24%;
line-gap-override: 0%;
}
@font-face {
font-family: 'DM Serif Display Fallback';
src: local('Georgia');
size-adjust: 100%;
ascent-override: 95%;
descent-override: 26%;
}
/* ==========================================
ACCESSIBILITY-OPTIMIZED COLOR OVERRIDES
--orange-text: Stronger orange for text-only use on dark backgrounds
(passes WCAG AA contrast on navy, light gray)
--orange-btn: Slightly darker orange for buttons with white text
(passes WCAG AA at 4.5:1)
========================================== */
:root {
/* === NEW BRAND COLORS — Allied Parts Wholesale === */
--navy: #1A3A6B; /* primary blue from logo */
--navy-dk: #122A50; /* darker navy hover */
--navy-lt: #2E578F; /* lighter navy for accents */
--orange: #FF7A00; /* accent orange from logo */
--orange-dk:#E06D00; /* orange hover */
--orange-lt:#FF9433; /* soft orange hover */
--orange-tint: rgba(255,122,0,0.08);
--orange-tint-2: rgba(255,122,0,0.14);
/* Light backgrounds */
--white: #FFFFFF;
--off-white:#F8F9FB; /* page background for sections */
--cream: #F4F6FA; /* slightly deeper section background */
--soft-gray:#EDF0F5; /* soft bg for cards */
/* Text colors */
--text-primary: #1A3A6B; /* headings / primary text */
--text-body: #334155; /* body text */
--text-muted: #64748B; /* muted gray */
--text-subtle: #94A3B8; /* light muted */
/* Borders */
--border: #E2E8F0;
--border-light: #F1F4F9;
--border-navy: rgba(26,58,107,0.15);
/* Status colors */
--success: #16A34A;
--warn: #D97706;
--danger: #DC2626;
--info: #0284C7;
/* Shadows — keeping it professional */
--shadow-sm: 0 1px 2px rgba(15,23,42,0.04);
--shadow-md: 0 4px 12px rgba(15,23,42,0.06);
--shadow-lg: 0 12px 32px rgba(15,23,42,0.08);
--shadow-xl: 0 20px 48px rgba(15,23,42,0.12);
--shadow-orange: 0 8px 24px rgba(255,122,0,0.25);
--r: 6px; --r-lg: 12px; --r-xl: 18px;
--ease: 0.25s cubic-bezier(0.4,0,0.2,1);
/* Legacy var aliases for any leftover --gold references */
--gold: var(--orange);
--gold-lt: var(--orange-lt);
--gold-dim: var(--orange-tint);
--muted: var(--text-muted);
--muted-lt: var(--text-body);
--slate: var(--soft-gray);
--slate-md: var(--border);
--navy-mid: var(--off-white);
--border-w: var(--border-light);
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body {
font-family:'DM Sans','DM Sans Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;
background:var(--white);
color:var(--text-body);
line-height:1.65;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
h1,h2,h3 { font-family:'DM Serif Display','DM Serif Display Fallback',Georgia,'Times New Roman',serif; font-weight:400; line-height:1.1; color:var(--text-primary) }
h4,h5 { font-family:'DM Sans','DM Sans Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif; font-weight:600; line-height:1.3; color:var(--text-primary) }
h1 { font-size:clamp(2.4rem,5vw,4.4rem) }
h2 { font-size:clamp(1.9rem,3.5vw,3rem) }
h3 { font-size:clamp(1.3rem,2.2vw,1.9rem) }
h4 { font-size:1.05rem }
h5 { font-size:.95rem }
p { color:var(--text-body); line-height:1.78 }
a { text-decoration:none; color:inherit }
.serif-i { font-style:italic; color:var(--orange) }
.container { max-width:1200px; margin:0 auto; padding:0 40px }
.section { padding:100px 0 }
.section-sm { padding:60px 0 }
.text-center { text-align:center }
.text-center p { max-width:580px; margin:0 auto }
.text-gold { color:var(--orange) }
.text-white { color:var(--white)!important }
.text-navy { color:var(--navy)!important }
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}
.mt-32{margin-top:32px}.mt-48{margin-top:48px}.mt-56{margin-top:56px}
.mb-16{margin-bottom:16px}.mb-24{margin-bottom:24px}
/* LABELS / EYEBROW / TAG */
.eyebrow {
display:inline-flex; align-items:center; gap:10px;
font-size:11px; font-weight:600; letter-spacing:.14em;
color:var(--orange); text-transform:uppercase;
border:1px solid var(--orange-tint-2);
background:var(--orange-tint);
padding:7px 16px; border-radius:100px;
margin-bottom:28px;
}
.eyebrow::before {
content:''; width:5px; height:5px; border-radius:50%;
background:var(--orange); flex-shrink:0;
}
.tag {
display:inline-block;
font-size:11px; font-weight:600; letter-spacing:.1em;
text-transform:uppercase; color:var(--orange);
border:1px solid var(--orange-tint-2);
background:var(--orange-tint);
padding:6px 14px; border-radius:100px;
margin-bottom:20px;
}
.divider { width:36px; height:2px; background:var(--orange); margin:20px 0; border-radius:2px }
.divider-c { margin:20px auto }
/* ANIMATIONS */
.fade-up { opacity:0; transform:translate3d(0,22px,0); transition:opacity .65s ease, transform .65s ease; will-change:opacity, transform }
.fade-up.visible { opacity:1; transform:translate3d(0,0,0); will-change:auto }
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}
/* NAV */
nav {
position:fixed; top:0; left:0; right:0; z-index:200;
padding:18px 0; transition:var(--ease);
background:rgba(255,255,255,0.85); backdrop-filter:blur(16px);
border-bottom:1px solid transparent;
}
nav.scrolled {
background:rgba(255,255,255,0.98);
border-bottom:1px solid var(--border);
padding:12px 0;
box-shadow:var(--shadow-sm);
}
.nav-inner { display:flex; align-items:center; justify-content:space-between; gap:20px }
.nav-logo {
display:flex; align-items:center; gap:12px;
font-family:'DM Serif Display','DM Serif Display Fallback',Georgia,'Times New Roman',serif; font-size:1.1rem;
color:var(--navy); font-weight:400;
}
.logo-mark {
width:36px; height:36px; background:var(--navy);
border-radius:50%; display:flex; align-items:center; justify-content:center;
font-family:'DM Sans','DM Sans Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif; font-size:11px; font-weight:700;
color:var(--white); flex-shrink:0; letter-spacing:.03em;
border:2px solid var(--orange);
}
.nav-links { display:flex; align-items:center; gap:28px }
.nav-links a {
font-size:13.5px; color:var(--text-muted); letter-spacing:.02em;
font-weight:500; transition:color var(--ease);
}
.nav-links a:hover, .nav-links a.active { color:var(--navy) }
.nav-cta {
background:#C75200!important; color:var(--white)!important;
padding:10px 22px; border-radius:var(--r);
font-weight:600!important; transition:all var(--ease)!important;
box-shadow:var(--shadow-sm);
}
.nav-cta:hover {
background:#A04200!important;
transform:translateY(-1px);
box-shadow:var(--shadow-orange);
}
.hamburger {
display:none;
cursor:pointer; background:none; border:none;
padding:10px; width:44px; height:44px;
align-items:center; justify-content:center;
position:relative; z-index:201;
color:var(--navy);
-webkit-tap-highlight-color: transparent;
border-radius:8px;
transition: background var(--ease);
}
.hamburger:hover { background: rgba(26,58,107,0.06); }
.hamburger:active { background: rgba(26,58,107,0.12); }
.hamburger-icon {
width:24px; height:24px;
pointer-events:none;
display:block;
position:absolute;
top:50%; left:50%;
transform:translate(-50%,-50%);
transition: opacity 0.18s ease;
}
.hamburger-close { opacity:0; }
.hamburger.open .hamburger-open { opacity:0; }
.hamburger.open .hamburger-close { opacity:1; }
/* BUTTONS */
.btn {
display:inline-flex; align-items:center; gap:8px;
padding:13px 26px; border-radius:var(--r);
font-size:14px; font-weight:600; letter-spacing:.02em;
cursor:pointer; border:none; transition:var(--ease);
font-family:'DM Sans','DM Sans Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif; line-height:1;
}
.btn-primary {
background:#C75200; color:var(--white);
box-shadow:var(--shadow-sm);
}
.btn-primary:hover {
background:#A04200;
transform:translateY(-1px);
box-shadow:var(--shadow-orange);
}
.btn-outline {
background:transparent; color:var(--navy);
border:1.5px solid var(--navy);
}
.btn-outline:hover {
background:var(--navy); color:var(--white);
}
.btn-ghost {
background:transparent; color:var(--text-muted);
border:1px solid var(--border);
}
.btn-ghost:hover { color:var(--navy); border-color:var(--navy) }
.btn-success { background:var(--success); color:#fff; border:none }
.btn-lg { padding:16px 34px; font-size:15px }
.btn-sm { padding:9px 18px; font-size:13px }
.btn:disabled { opacity:.55; cursor:not-allowed; transform:none!important }
.btn svg { width:15px; height:15px; flex-shrink:0 }
/* HERO */
.hero {
min-height:100vh; display:flex; align-items:center;
position:relative; overflow:hidden; padding-top:80px;
background:var(--white);
}
.hero-bg {
position:absolute; inset:0; z-index:0;
background:
radial-gradient(ellipse 60% 50% at 85% 30%, rgba(255,122,0,0.06) 0%, transparent 60%),
radial-gradient(ellipse 50% 50% at 10% 85%, rgba(26,58,107,0.08) 0%, transparent 55%),
linear-gradient(180deg, var(--white) 0%, var(--off-white) 100%);
}
.hero-grid {
position:absolute; inset:0; z-index:0;
background-image:
linear-gradient(rgba(26,58,107,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(26,58,107,0.04) 1px, transparent 1px);
background-size:56px 56px;
mask-image:radial-gradient(ellipse 90% 80% at 50% 40%, black 0%, transparent 100%);
}
.hero-content { position:relative; z-index:1; max-width:820px }
.hero h1 { margin-bottom:24px; letter-spacing:-.015em; color:var(--navy) }
.hero-lead { font-size:1.15rem; max-width:560px; margin-bottom:44px; color:var(--text-body) }
.hero-actions { display:flex; gap:14px; flex-wrap:wrap; align-items:center }
.hero-stats {
display:flex; gap:48px; margin-top:80px;
padding-top:48px; border-top:1px solid var(--border);
flex-wrap:wrap;
}
.hstat .num {
font-family:'DM Serif Display','DM Serif Display Fallback',Georgia,'Times New Roman',serif; font-size:2.6rem; color:var(--navy);
}
.hstat .lbl {
font-size:11px; color:var(--text-muted); letter-spacing:.08em;
text-transform:uppercase; margin-top:6px; font-weight:600;
}
/* TICKER */
.ticker {
border-top:1px solid var(--border);
border-bottom:1px solid var(--border);
padding:15px 0; overflow:hidden;
background:var(--navy);
}
.ticker-track { display:flex; white-space:nowrap; animation:ticker 35s linear infinite; will-change:transform }
.ticker-item {
display:inline-flex; align-items:center; gap:10px;
padding:0 28px; font-size:11px; font-weight:600;
color:rgba(255,255,255,0.85); letter-spacing:.08em; text-transform:uppercase;
}
.ticker-dot { width:5px; height:5px; border-radius:50%; background:var(--orange); flex-shrink:0 }
@keyframes ticker { 0%{transform:translate3d(0,0,0)} 100%{transform:translate3d(-50%,0,0)} }
/* GRIDS */
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center }
.grid-3 { display:grid; grid-template-columns:repeat(3,1fr); gap:2px }
.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:2px }
/* MEMBERSHIP CARDS */
.mem-grid {
display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.mem-card {
background:var(--white); padding:44px 36px;
position:relative; transition:all var(--ease);
border:1px solid var(--border); border-radius:var(--r-lg);
}
.mem-card:hover { border-color:var(--navy); box-shadow:var(--shadow-lg); transform:translateY(-4px) }
.mem-card.featured {
background:var(--white);
border:2px solid var(--orange);
box-shadow:var(--shadow-lg);
transform:scale(1.02);
}
.mem-badge {
display:inline-block; font-size:10px; font-weight:700;
letter-spacing:.1em; text-transform:uppercase;
background:var(--orange); color:var(--white);
padding:5px 14px; border-radius:100px;
margin-bottom:20px;
}
.mem-type {
font-size:11px; color:var(--orange); letter-spacing:.1em;
text-transform:uppercase; margin-bottom:6px; font-weight:700;
}
.mem-card h3 {
color:var(--navy); font-family:'DM Sans','DM Sans Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;
font-weight:600; font-size:1.35rem; margin-bottom:8px;
}
.mem-price { margin:22px 0 }
.mem-price .amount {
font-family:'DM Serif Display','DM Serif Display Fallback',Georgia,'Times New Roman',serif; font-size:3rem; color:var(--navy);
}
.mem-price .period { font-size:14px; color:var(--text-muted) }
.mem-desc { font-size:14px; margin-bottom:26px; color:var(--text-body) }
.mem-features { list-style:none; margin-bottom:30px }
.mem-features li {
display:flex; align-items:flex-start; gap:10px;
font-size:13.5px; color:var(--text-body);
padding:10px 0; border-bottom:1px solid var(--border-light);
}
.mem-features li:last-child { border:none }
.chk {
width:18px; height:18px; border-radius:50%;
background:var(--orange-tint); color:var(--orange);
display:flex; align-items:center; justify-content:center;
font-size:9px; flex-shrink:0; margin-top:2px; font-weight:700;
}
/* FEATURE CARDS */
.feat-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
.feat-card {
background:var(--white); padding:36px 28px;
border:1px solid var(--border); border-radius:var(--r-lg);
border-top:3px solid transparent;
transition:var(--ease);
}
.feat-card:hover {
border-top-color:var(--orange);
box-shadow:var(--shadow-lg);
transform:translateY(-3px);
}
.feat-icon {
width:48px; height:48px; border-radius:var(--r);
background:var(--orange-tint); color:var(--orange);
display:flex; align-items:center; justify-content:center;
margin-bottom:20px; font-size:22px;
}
.feat-card h4 { color:var(--navy); margin-bottom:10px }
/* STEPS */
.steps-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px }
.step-card {
background:var(--white); padding:36px 28px;
border:1px solid var(--border); border-radius:var(--r-lg);
position:relative; overflow:hidden; transition:var(--ease);
}
.step-card:hover { border-color:var(--navy); box-shadow:var(--shadow-md) }
.step-num {
position:absolute; top:12px; right:16px;
font-family:'DM Serif Display','DM Serif Display Fallback',Georgia,'Times New Roman',serif; font-size:5rem;
color:var(--orange-tint); line-height:1; pointer-events:none;
}
.step-icon {
width:48px; height:48px; border-radius:var(--r);
background:var(--navy); color:var(--white);
display:flex; align-items:center; justify-content:center;
margin-bottom:20px; font-size:20px;
}
.step-card h4 { color:var(--navy); margin-bottom:10px; position:relative; z-index:1 }
.step-card p { position:relative; z-index:1 }
/* TESTIMONIALS */
.testi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px }
.testi-card {
background:var(--white); border:1px solid var(--border);
border-radius:var(--r-lg); padding:36px 28px;
transition:var(--ease);
}
.testi-card:hover { box-shadow:var(--shadow-lg); border-color:var(--navy) }
.testi-stars { display:flex; gap:3px; margin-bottom:18px }
.testi-stars span { color:var(--orange); font-size:15px }
.testi-quote {
font-family:'DM Serif Display','DM Serif Display Fallback',Georgia,'Times New Roman',serif; font-size:1.05rem;
color:var(--navy); line-height:1.65; font-style:italic;
margin-bottom:22px;
}
.testi-author { display:flex; align-items:center; gap:12px }
.testi-av {
width:42px; height:42px; border-radius:50%;
background:var(--navy); color:var(--white);
display:flex; align-items:center; justify-content:center;
font-size:13px; font-weight:600; flex-shrink:0;
}
.testi-name { font-size:14px; font-weight:600; color:var(--navy) }
.testi-role { font-size:12px; color:var(--text-muted) }
/* NETWORK SPLIT */
.net-split { display:grid; grid-template-columns:1fr 1fr; gap:20px }
.net-side {
background:var(--navy); color:var(--white);
padding:56px 44px; position:relative; overflow:hidden;
border-radius:var(--r-lg);
}
.net-side::before {
content:''; position:absolute; top:0; left:0; right:0;
height:3px; background:var(--orange);
}
.net-side h3 { color:var(--white)!important }
.net-side p { color:rgba(255,255,255,0.8) }
.net-side .tag {
background:rgba(255,255,255,0.1); color:var(--orange);
border-color:rgba(255,122,0,0.3);
}
.net-stats { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:28px }
.nstat {
background:rgba(255,255,255,0.06);
border:1px solid rgba(255,255,255,0.12);
border-radius:var(--r); padding:16px;
}
.nstat-val {
font-family:'DM Serif Display','DM Serif Display Fallback',Georgia,'Times New Roman',serif; font-size:1.9rem;
color:var(--orange); line-height:1.1;
}
.nstat-lbl {
font-size:11px; color:rgba(255,255,255,0.85);
margin-top:6px; letter-spacing:.05em;
}
/* CTA BANNER */
.cta-banner {
background:var(--navy); color:var(--white);
border-radius:var(--r-xl); padding:80px 60px;
text-align:center; position:relative; overflow:hidden;
}
.cta-banner::before {
content:''; position:absolute; inset:0;
background:radial-gradient(ellipse 60% 70% at 50% 0%, rgba(255,122,0,0.15) 0%, transparent 70%);
pointer-events:none;
}
.cta-banner h2 { color:var(--white)!important }
.cta-banner p { color:rgba(255,255,255,0.85)!important; max-width:480px; margin:16px auto 36px }
.cta-banner h2, .cta-banner p, .cta-acts { position:relative; z-index:1 }
.cta-acts { display:flex; gap:14px; justify-content:center; flex-wrap:wrap }
.cta-banner .btn-outline {
border-color:rgba(255,255,255,0.3); color:var(--white);
}
.cta-banner .btn-outline:hover {
background:var(--white); color:var(--navy);
}
/* FORMS */
.form-group { margin-bottom:18px }
.form-label {
display:block; font-size:11px; font-weight:700;
color:var(--navy); letter-spacing:.07em;
text-transform:uppercase; margin-bottom:8px;
}
.form-input, .form-select, .form-textarea {
width:100%; background:var(--white);
border:1.5px solid var(--border); color:var(--navy);
padding:12px 15px; border-radius:var(--r);
font-size:14px; font-family:'DM Sans','DM Sans Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;
transition:all var(--ease); outline:none;
-webkit-appearance:none;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
border-color:var(--orange);
box-shadow:0 0 0 3px var(--orange-tint);
}
.form-input::placeholder, .form-textarea::placeholder { color:var(--text-subtle) }
.form-select {
cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231A3A6B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 14px center;
padding-right:36px;
}
.form-select option { background:var(--white); color:var(--navy) }
.form-textarea { resize:vertical; min-height:120px; line-height:1.6 }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px }
.form-help { font-size:12px; color:var(--text-muted); margin-top:6px; line-height:1.5 }
.form-divider { border:none; border-top:1px solid var(--border); margin:22px 0 }
.checkbox-row {
display:flex; align-items:flex-start; gap:10px; margin-bottom:12px;
}
.checkbox-row input[type=checkbox] {
width:16px; height:16px; accent-color:var(--orange);
margin-top:3px; flex-shrink:0; cursor:pointer;
}
.checkbox-row label { font-size:13px; color:var(--text-body); line-height:1.5; cursor:pointer }
.checkbox-row a { color:var(--orange); font-weight:600 }
.info-box {
background:var(--orange-tint); border:1px solid var(--orange-tint-2);
border-radius:var(--r); padding:14px 16px;
font-size:13px; color:var(--navy); margin-bottom:20px; line-height:1.6;
}
/* MODALS */
.modal-overlay {
position:fixed; inset:0; z-index:500;
background:rgba(26,58,107,0.55); backdrop-filter:blur(8px);
display:flex; align-items:center; justify-content:center;
padding:20px; opacity:0; pointer-events:none;
transition:opacity var(--ease);
}
.modal-overlay.open { opacity:1; pointer-events:all }
.modal {
background:var(--white); border:1px solid var(--border);
border-radius:var(--r-xl); padding:48px; max-width:580px;
width:100%; position:relative;
transform:translateY(20px); transition:transform var(--ease);
max-height:92vh; overflow-y:auto;
box-shadow:var(--shadow-xl);
}
.modal-overlay.open .modal { transform:translateY(0) }
.modal-close {
position:absolute; top:20px; right:20px;
width:34px; height:34px; border-radius:50%;
background:var(--off-white); border:1px solid var(--border);
cursor:pointer; color:var(--text-muted); font-size:18px;
display:flex; align-items:center; justify-content:center;
transition:var(--ease); line-height:1;
}
.modal-close:hover { background:var(--navy); color:var(--white); border-color:var(--navy) }
.modal-ey {
font-size:11px; color:var(--orange); letter-spacing:.1em;
text-transform:uppercase; margin-bottom:10px; font-weight:700;
}
.modal h3 {
color:var(--navy); font-family:'DM Sans','DM Sans Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;
font-weight:600; font-size:1.5rem; margin-bottom:6px;
}
.modal-sub { font-size:14px; margin-bottom:26px; color:var(--text-body) }
.modal-tabs {
display:flex; gap:4px; background:var(--off-white);
border-radius:var(--r); padding:4px; margin-bottom:26px;
border:1px solid var(--border);
}
.modal-tab {
flex:1; padding:10px; font-size:13px; font-weight:600;
text-align:center; border-radius:var(--r); cursor:pointer;
border:none; background:transparent; color:var(--text-muted);
transition:var(--ease); font-family:'DM Sans','DM Sans Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif;
}
.modal-tab.active { background:var(--orange); color:var(--white); box-shadow:var(--shadow-sm) }
.tab-pane { display:none }
.tab-pane.active { display:block }
.modal-foot { margin-top:22px; text-align:center; font-size:13px; color:var(--text-muted) }
.modal-foot a { color:var(--orange); font-weight:600 }
.success-state { text-align:center; padding:32px 20px }
.success-icon {
width:64px; height:64px; border-radius:50%;
background:rgba(22,163,74,0.12); color:var(--success);
font-size:28px; display:flex; align-items:center; justify-content:center;
margin:0 auto 20px; font-weight:700;
}
.success-state h4 { color:var(--navy); margin-bottom:8px; font-size:1.3rem }
/* PAGE HEADER */
.page-hdr {
padding:160px 0 80px; text-align:center;
position:relative; overflow:hidden;
background:linear-gradient(180deg, var(--off-white) 0%, var(--white) 100%);
border-bottom:1px solid var(--border);
}
.page-hdr::before {
content:''; position:absolute; inset:0;
background:radial-gradient(ellipse 70% 60% at 50% 0%, rgba(255,122,0,0.08) 0%, transparent 70%);
pointer-events:none;
}
.page-hdr-grid {
position:absolute; inset:0;
background-image:
linear-gradient(rgba(26,58,107,0.04) 1px, transparent 1px),
linear-gradient(90deg, rgba(26,58,107,0.04) 1px, transparent 1px);
background-size:56px 56px;
mask-image:radial-gradient(ellipse 80% 100% at 50% 0%, black 0%, transparent 100%);
pointer-events:none;
}
.page-hdr .container { position:relative; z-index:1 }
.page-hdr h1 { color:var(--navy) }
.page-hdr p { font-size:1.15rem; max-width:600px; margin:16px auto 0; color:var(--text-body) }
/* PARTS TABLE */
.catalog-bar { display:flex; gap:14px; margin-bottom:20px; flex-wrap:wrap; align-items:center }
.search-wrap { position:relative; flex:1; min-width:200px }
.search-wrap .form-input { padding-left:40px }
.search-ico { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--text-muted); pointer-events:none }
.cat-filter-row { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:20px }
.cat-pill {
font-size:12px; padding:7px 15px; border-radius:100px;
border:1.5px solid var(--border); color:var(--text-muted);
cursor:pointer; transition:var(--ease); background:var(--white);
font-family:'DM Sans','DM Sans Fallback',-apple-system,BlinkMacSystemFont,'Segoe UI','Helvetica Neue',Arial,sans-serif; font-weight:500;
}
.cat-pill:hover, .cat-pill.active {
border-color:var(--orange); color:var(--orange);
background:var(--orange-tint);
}
.table-wrap {
overflow-x:auto; border:1px solid var(--border);
border-radius:var(--r-lg); background:var(--white);
box-shadow:var(--shadow-sm);
}
.parts-table { width:100%; border-collapse:collapse; font-size:13px; min-width:700px }
.parts-table thead { background:var(--off-white) }
.parts-table th {
padding:14px 16px; text-align:left;
font-size:10.5px; font-weight:700; color:var(--navy);
letter-spacing:.08em; text-transform:uppercase;
white-space:nowrap; border-bottom:1px solid var(--border);
}
.parts-table td {
padding:13px 16px; border-bottom:1px solid var(--border-light);
color:var(--text-body); vertical-align:middle;
}
.parts-table tr:last-child td { border:none }
.parts-table tbody tr:hover td { background:var(--off-white) }
.cell-name { color:var(--navy)!important; font-weight:600; font-size:13px }
.pill {
display:inline-block; font-size:10px; font-weight:700;
padding:4px 10px; border-radius:100px; letter-spacing:.03em;
}
.pill-green { background:rgba(22,163,74,0.12); color:var(--success) }
.pill-amber { background:rgba(217,119,6,0.12); color:var(--warn) }
.pill-red { background:rgba(220,38,38,0.12); color:var(--danger) }
.pill-gold { background:var(--orange-tint); color:var(--orange) }
.pill-blue { background:rgba(2,132,199,0.12); color:var(--info) }
.pill-purple { background:rgba(124,58,237,0.12); color:#7C3AED }
.catalog-count { font-size:13px; color:var(--text-muted); white-space:nowrap; font-weight:500 }
/* ABOUT / ROADMAP */
.stage-row {
display:grid; grid-template-columns:180px 1fr; gap:28px;
padding:32px 0; border-bottom:1px solid var(--border);
}
.stage-row:last-child { border:none }
.stage-num-big {
font-family:'DM Serif Display','DM Serif Display Fallback',Georgia,'Times New Roman',serif; font-size:3rem;
color:var(--orange-tint-2); line-height:1; margin-bottom:4px;
}
.stage-name {
font-size:11px; font-weight:700; color:var(--orange);
letter-spacing:.1em; text-transform:uppercase;
}
.stage-status {
display:inline-block; font-size:10px; padding:4px 10px;
border-radius:100px; margin-top:8px; font-weight:700; letter-spacing:.03em;
}
.s-active { background:rgba(22,163,74,0.12); color:var(--success) }
.s-building { background:var(--orange-tint); color:var(--orange) }
.s-planned { background:var(--off-white); color:var(--text-muted) }
.stage-content h4 { color:var(--navy); margin-bottom:12px; font-size:1.15rem }
.items-2col { display:grid; grid-template-columns:1fr 1fr; gap:0 }
.item-row {
display:flex; align-items:flex-start; gap:8px;
font-size:13.5px; color:var(--text-body);
padding:9px 0; border-bottom:1px solid var(--border-light);
}
.item-row:last-child { border:none }
.item-row::before { content:'→'; color:var(--orange); flex-shrink:0; margin-top:1px; font-weight:700 }
.pos-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:48px }
.pos-card { padding:48px 40px; position:relative; border-radius:var(--r-lg) }
.pos-not { background:rgba(220,38,38,0.04); border:1px solid rgba(220,38,38,0.15) }
.pos-is { background:var(--white); border:2px solid var(--orange) }
.pos-card::before {
content:''; position:absolute; top:0; left:0; right:0;
height:3px; border-radius:var(--r-lg) var(--r-lg) 0 0;
}
.pos-not::before { background:var(--danger) }
.pos-is::before { background:var(--orange) }
.pos-label {
font-size:11px; font-weight:700; letter-spacing:.1em;
text-transform:uppercase; margin-bottom:20px;
}
.pos-not .pos-label { color:var(--danger) }
.pos-is .pos-label { color:var(--orange) }
.pos-item {
font-size:14px; color:var(--text-body);
padding:12px 0; border-bottom:1px solid var(--border-light);
display:flex; align-items:center; gap:12px;
}
.pos-item:last-child { border:none }
.stack-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:16px }
.stack-item {
background:var(--white); border:1px solid var(--border);
border-radius:var(--r); padding:20px;
display:flex; align-items:flex-start; gap:14px;
transition:var(--ease);
}
.stack-item:hover { border-color:var(--orange); box-shadow:var(--shadow-sm) }
.stack-num {
font-family:'DM Serif Display','DM Serif Display Fallback',Georgia,'Times New Roman',serif; font-size:1.7rem;
color:var(--orange); flex-shrink:0; line-height:1; min-width:26px; font-weight:400;
}
.stack-item h4 { color:var(--navy); font-size:13.5px; margin-bottom:4px }
/* SUPPLIER CARDS (Network page) */
.supplier-card {
background:var(--white); border:1px solid var(--border);
border-radius:var(--r-lg); padding:26px; margin-bottom:14px;
display:flex; align-items:flex-start; gap:18px; transition:var(--ease);
}
.supplier-card:hover { border-color:var(--orange); box-shadow:var(--shadow-md) }
.supplier-logo {
width:52px; height:52px; border-radius:var(--r);
background:var(--navy); color:var(--white);
display:flex; align-items:center; justify-content:center;
font-weight:700; font-size:13px; flex-shrink:0;
}
.supplier-info h4 { color:var(--navy); margin-bottom:3px; font-size:1.05rem }
.supplier-tags { display:flex; gap:6px; flex-wrap:wrap; margin-top:12px }
.supplier-tag {
font-size:10.5px; padding:4px 10px; border-radius:100px;
border:1px solid var(--border); color:var(--text-muted);
background:var(--off-white); font-weight:500;
}
.verified-badge {
display:inline-flex; align-items:center; gap:4px;
font-size:11px; color:var(--success); margin-top:6px; font-weight:700;
}
/* DASHBOARD */
.dash-wrap { display:grid; grid-template-columns:240px 1fr; min-height:100vh; background:var(--off-white) }
.dash-sidebar {
background:var(--navy); color:var(--white);
display:flex; flex-direction:column;
}
.dash-logo-wrap { padding:28px 24px; border-bottom:1px solid rgba(255,255,255,0.1) }
.dash-logo-wrap .nav-logo { color:var(--white) }
.dash-logo-wrap .logo-mark { background:var(--orange); border-color:var(--white); color:var(--white) }
.dash-nav { flex:1; padding:16px 0 }
.dash-nav-section {
font-size:10px; font-weight:700; color:rgba(255,255,255,0.72);
letter-spacing:.1em; text-transform:uppercase; padding:16px 24px 6px;
}
.dash-nav-item {
display:flex; align-items:center; gap:12px;
padding:12px 24px; font-size:13.5px; color:rgba(255,255,255,0.85);
cursor:pointer; transition:var(--ease);
border-left:3px solid transparent; text-decoration:none;
}
.dash-nav-item:hover { background:rgba(255,255,255,0.05); color:var(--white) }
.dash-nav-item.active {
color:var(--orange); border-left-color:var(--orange);
background:rgba(255,122,0,0.08);
}
.dash-main { display:flex; flex-direction:column; min-height:100vh }
.dash-topbar {
display:flex; align-items:center; justify-content:space-between;
padding:20px 36px; border-bottom:1px solid var(--border);
background:var(--white);
}
.dash-topbar h4 { color:var(--navy) }
.dash-body { padding:36px; flex:1 }
.dash-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:28px }
.metric-card {
background:var(--white); border:1px solid var(--border);
border-radius:var(--r-lg); padding:22px;
transition:var(--ease);
}
.metric-card:hover { border-color:var(--orange); box-shadow:var(--shadow-sm) }
.metric-val {
font-family:'DM Serif Display','DM Serif Display Fallback',Georgia,'Times New Roman',serif; font-size:2.2rem;
color:var(--navy); line-height:1;
}
.metric-lbl { font-size:12px; color:var(--text-muted); margin-top:6px; font-weight:500 }
.metric-change { font-size:12px; margin-top:8px; font-weight:600 }
.m-up { color:var(--success) }
.m-dn { color:var(--danger) }
.dash-card {
background:var(--white); border:1px solid var(--border);
border-radius:var(--r-lg); margin-bottom:20px;
}
.dash-card-hdr {
display:flex; align-items:center; justify-content:space-between;
padding:18px 22px; border-bottom:1px solid var(--border);
}
.dash-card-hdr h4 { color:var(--navy); font-size:.98rem }
.dash-card-body { padding:22px }
.order-row {
display:flex; align-items:center; gap:14px;
padding:12px 0; border-bottom:1px solid var(--border-light); font-size:13px;
}
.order-row:last-child { border:none }
.order-id { font-weight:700; color:var(--navy); min-width:100px; font-size:12px }
.order-part { flex:1; color:var(--text-body); font-size:12.5px }
.order-status {
display:inline-block; font-size:10px; padding:4px 10px;
border-radius:100px; font-weight:700; white-space:nowrap; letter-spacing:.03em;
}
.os-pending { background:rgba(217,119,6,0.15); color:var(--warn) }
.os-confirmed { background:rgba(22,163,74,0.15); color:var(--success) }
.os-shipped { background:rgba(2,132,199,0.15); color:var(--info) }
.os-delivered { background:var(--off-white); color:var(--text-muted) }
/* RFQ / REQUEST */
.rfq-layout { display:grid; grid-template-columns:1fr 360px; gap:36px; align-items:start }
.rfq-sidebar { position:sticky; top:100px }
.sidebar-card {
background:var(--white); border:1px solid var(--border);
border-radius:var(--r-lg); padding:26px; margin-bottom:14px;
}
.sidebar-card h4 { color:var(--navy); margin-bottom:14px; font-size:1rem }
.sidebar-row {
display:flex; justify-content:space-between; align-items:center;
padding:10px 0; border-bottom:1px solid var(--border-light); font-size:13px;
}
.sidebar-row:last-child { border:none }
.sidebar-row .k { color:var(--text-muted) }
.sidebar-row .v { color:var(--navy); font-weight:600 }
.proc-step { display:flex; gap:14px; margin-bottom:18px; align-items:flex-start }
.proc-num {
width:32px; height:32px; border-radius:50%;
background:var(--orange-tint); border:1.5px solid var(--orange);
color:var(--orange); font-size:13px; font-weight:700;
display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.proc-step h5 { color:var(--navy); font-size:13.5px; margin-bottom:2px }
.urgency-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px }
.urgency-opt {
background:var(--white); border:1.5px solid var(--border);
border-radius:var(--r); padding:14px; cursor:pointer;
transition:var(--ease); text-align:center;
}
.urgency-opt:hover, .urgency-opt.sel {
border-color:var(--orange); background:var(--orange-tint);
}
.urgency-opt.sel .u-label { color:var(--orange) }
.u-label { font-size:13.5px; font-weight:600; color:var(--navy); display:block; margin-bottom:4px }
.u-desc { font-size:11.5px; color:var(--text-muted) }
/* CONTACT */
.contact-grid { display:grid; grid-template-columns:1fr 1.4fr; gap:60px; align-items:start }
.contact-item { display:flex; align-items:flex-start; gap:16px; margin-bottom:28px }
.contact-icon {
width:48px; height:48px; border-radius:var(--r);
background:var(--orange-tint); color:var(--orange);
display:flex; align-items:center; justify-content:center;
font-size:20px; flex-shrink:0;
}
.contact-item h4 { color:var(--navy); margin-bottom:4px; font-size:1.05rem }
/* COMPARE TABLE (Membership) */
.compare-wrap {
overflow-x:auto; border:1px solid var(--border);
border-radius:var(--r-lg); margin-top:56px; background:var(--white);
}
.compare-table { width:100%; border-collapse:collapse; font-size:13.5px; min-width:600px }
.compare-table th {
padding:16px 20px; text-align:left; font-size:10.5px;
font-weight:700; color:var(--navy); letter-spacing:.07em;
text-transform:uppercase; background:var(--off-white);
border-bottom:2px solid var(--border);
}
.compare-table th.hl { color:var(--orange) }
.compare-table td {
padding:14px 20px; border-bottom:1px solid var(--border-light);
color:var(--text-body);
}
.compare-table tr:last-child td { border:none }
.compare-table td:first-child { font-weight:600; color:var(--navy) }
.compare-table td.hl { color:var(--orange); font-weight:700 }
.c-yes { color:var(--success); font-weight:700 }
.c-no { color:var(--text-subtle) }
/* FAQ */
.faq-item { border-bottom:1px solid var(--border); padding:24px 0 }
.faq-q {
font-size:16px; font-weight:600; color:var(--navy);
cursor:pointer; display:flex; justify-content:space-between;
align-items:center; gap:16px;
}
.faq-q::after {
content:'+'; color:var(--orange); font-size:24px;
flex-shrink:0; transition:transform var(--ease); font-weight:400;
}
.faq-item.open .faq-q::after { transform:rotate(45deg) }
.faq-a { display:none; padding-top:14px; font-size:14px; line-height:1.75; color:var(--text-body) }
.faq-item.open .faq-a { display:block }
/* BILLING TOGGLE */
.billing-bar { display:flex; align-items:center; justify-content:center; gap:14px; margin:32px 0 }
.billing-lbl { font-size:14px; color:var(--text-muted); transition:color var(--ease) }
.billing-lbl.on { color:var(--navy); font-weight:600 }
.toggle-wrap {
width:52px; height:28px; background:var(--border);
border-radius:100px; position:relative; cursor:pointer;
transition:background var(--ease);
}
.toggle-wrap.on { background:var(--orange) }
.toggle-knob {
position:absolute; top:3px; left:3px; width:22px; height:22px;
border-radius:50%; background:white; transition:transform var(--ease);
box-shadow:var(--shadow-sm);
}
.toggle-wrap.on .toggle-knob { transform:translateX(24px) }
.save-chip {
background:rgba(22,163,74,0.12); color:var(--success);
font-size:11px; font-weight:700; padding:4px 12px;
border-radius:100px; letter-spacing:.03em;
}
/* SUPPLIER PORTAL */
.portal-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:56px }
.portal-side {
background:var(--white); padding:48px 40px;
border:1px solid var(--border); border-radius:var(--r-lg);
}
.portal-side::before {
content:''; display:block; width:40px; height:3px;
background:var(--orange); margin-bottom:24px; border-radius:2px;
}
/* FOOTER */
footer {
background:var(--navy); color:var(--white);
padding:80px 0 40px;
}
footer h5, footer p, footer a { color:var(--white) }
.footer-grid {
display:grid; grid-template-columns:2fr 1fr 1fr 1fr;
gap:48px; margin-bottom:56px;
}
.footer-brand .nav-logo { color:var(--white) }
.footer-brand .logo-mark { background:var(--orange); border-color:var(--white); color:var(--white) }
.footer-brand p {
font-size:14px; margin-top:16px; max-width:280px;
line-height:1.75; color:rgba(255,255,255,0.85);
}
.footer-col h5,
.footer-col .footer-heading {
font-size:11px; font-weight:700; letter-spacing:.09em;
text-transform:uppercase; color:#FFB266; margin-bottom:16px;
font-family: 'DM Sans', sans-serif; line-height: 1.3;
}
.footer-col a {
display:block; font-size:14px; color:rgba(255,255,255,0.85);
margin-bottom:10px; transition:color var(--ease);
}
.footer-col a:hover { color:var(--orange) }
.footer-bottom {
display:flex; justify-content:space-between; align-items:center;
padding-top:28px; border-top:1px solid rgba(255,255,255,0.1);
font-size:12px; color:rgba(255,255,255,0.78);
flex-wrap:wrap; gap:12px;
}
.footer-legal { display:flex; gap:20px }
.footer-legal a {
font-size:12px; color:rgba(255,255,255,0.78);
transition:color var(--ease);
}
.footer-legal a:hover { color:var(--orange) }
/* NAVY BACKGROUND SECTIONS OVERRIDES */
section[style*="--navy-mid"], section[style*="navy-mid"] {
background:var(--off-white)!important;
border-top:1px solid var(--border)!important;
border-bottom:1px solid var(--border)!important;
}
/* LEGACY COMPATIBILITY */
.mem-card .period { color:var(--text-muted) }
/* RESPONSIVE */
@media(max-width:1024px){
.mem-grid, .feat-grid, .steps-grid, .testi-grid, .net-split,
.grid-2, .grid-3, .grid-4, .pos-grid, .portal-grid,
.contact-grid, .rfq-layout {
grid-template-columns:1fr;
}
.items-2col { grid-template-columns:1fr }
.footer-grid { grid-template-columns:1fr 1fr }
.dash-wrap { grid-template-columns:1fr }
.dash-sidebar { display:none }
.dash-metrics { grid-template-columns:1fr 1fr }
.rfq-sidebar { position:static }
.stage-row { grid-template-columns:1fr }
.stack-grid { grid-template-columns:1fr }
}
@media(max-width:768px){
.container { padding:0 20px }
.section { padding:72px 0 }
h1 { font-size:2.3rem }
h2 { font-size:1.85rem }
.nav-links { display:none }
.hamburger { display:flex }
/* Mobile menu — full-screen overlay */
.nav-links.open {
display:flex !important;
flex-direction:column !important;
position:fixed !important;
top:0; left:0; right:0; bottom:0;
inset:0;
background:#FFFFFF !important;
padding:80px 20px 32px !important;
gap:0 !important;
z-index:198 !important;
overflow-y:auto !important;
align-items:stretch !important;
box-shadow: 0 8px 60px rgba(0,0,0,0.12);
animation: menuSlideIn 0.22s ease-out;
}
@keyframes menuSlideIn {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
.nav-links.open a {
font-size:17px !important;
padding:18px 8px !important;
border-bottom:1px solid var(--border) !important;
color:var(--navy) !important;
font-weight:500 !important;
display:block !important;
width:100% !important;
text-align:left !important;
text-decoration:none !important;
}
.nav-links.open a:hover,
.nav-links.open a:active {
color:var(--orange) !important;
background: rgba(255,122,0,0.04);
}
.nav-links.open .nav-cta {
margin-top:24px !important;
text-align:center !important;
border-radius:8px !important;
padding:18px 24px !important;
border:none !important;
background:#C75200 !important;
color:#FFFFFF !important;
font-weight:700 !important;
font-size:16px !important;
}
.nav-links.open .nav-cta:hover,
.nav-links.open .nav-cta:active {
background:#A04200 !important;
color:#FFFFFF !important;
}
/* Make sure body underneath doesn't show scrollbar */
body.menu-open { overflow:hidden !important; }
.hero-stats { gap:24px }
.form-row { grid-template-columns:1fr }
.cta-banner { padding:48px 24px }
.modal { padding:32px 20px }
.urgency-grid { grid-template-columns:1fr }
}
@media(max-width:480px){
.footer-grid { grid-template-columns:1fr }
.hero-actions { flex-direction:column; align-items:stretch }
.hero-actions .btn { justify-content:center }
.dash-metrics { grid-template-columns:1fr }
}
/* ==========================================
LOGO IMAGE — nav and footer
========================================== */
.logo-img {
height: 44px;
width: 52px;
display: block;
object-fit: contain;
transition: opacity var(--ease);
}
.logo-img:hover { opacity: 0.85 }
nav.scrolled .logo-img { height: 38px; width: 45px }
.logo-img-footer {
height: 51px;
width: 60px;
display: block;
object-fit: contain;
background: white;
padding: 6px 10px;
border-radius: 6px;
box-sizing: content-box;
}
.logo-img-compact {
height: 31px;
width: 36px;
display: block;
object-fit: contain;
background: white;
padding: 4px 6px;
border-radius: 4px;
box-sizing: content-box;
}
.footer-logo {
align-items: center !important;
gap: 0 !important;
}
picture {
display: inline-flex;
line-height: 0;
}
@media (max-width: 768px) {
.logo-img { height: 36px; width: 42px }
nav.scrolled .logo-img { height: 32px; width: 38px }
}
/* ==========================================
PRICE BLUR — members-only pricing gate
Dead-simple approach: actual CSS blur filter on the text.
JS in main.js also replaces the real price with "$●●●" for non-members
so that even if CSS fails, the number is never visible.
========================================== */
/* Non-member state: blur the cell's text visually */
body:not(.member-unlocked) td.price-blur,
body:not(.member-unlocked) .price-blur {
filter: blur(5px);
-webkit-filter: blur(5px);
user-select: none !important;
pointer-events: none;
color: var(--navy) !important;
font-weight: 600;
position: relative;
}
/* Member unlocked: remove blur, restore normal display */
body.member-unlocked td.price-blur,
body.member-unlocked .price-blur {
filter: none !important;
-webkit-filter: none !important;
user-select: auto !important;
pointer-events: auto !important;
color: var(--navy) !important;
}
/* ==========================================
MEMBER GATE BANNER — prompts non-members to join
========================================== */
.member-gate-banner {
display: flex;
align-items: center;
gap: 20px;
background: linear-gradient(135deg, var(--navy) 0%, var(--navy-lt) 100%);
color: var(--white);
border-radius: var(--r-lg);
padding: 22px 28px;
margin-bottom: 24px;
position: relative;
overflow: hidden;
box-shadow: var(--shadow-md);
}
.member-gate-banner::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; height: 3px;
background: var(--orange);
}
.member-gate-banner-icon {
flex-shrink: 0;
width: 52px; height: 52px;
border-radius: 50%;
background: rgba(255, 122, 0, 0.18);
border: 2px solid var(--orange);
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
.member-gate-banner-content { flex: 1 }
.member-gate-banner-content h4 {
color: var(--white) !important;
margin-bottom: 4px;
font-size: 1.05rem;
font-weight: 600;
}
.member-gate-banner-content p {
color: rgba(255, 255, 255, 0.82);
font-size: 13.5px;
margin: 0;
line-height: 1.5;
}
.member-gate-banner .btn {
flex-shrink: 0;
padding: 12px 24px;
font-size: 14px;
}
/* Hide the gate banner when user has unlocked */
body.member-unlocked .member-gate-banner { display: none !important }
/* The "Member pricing unlocked" pill — shown only after unlock */
.unlock-pill {
display: none;
align-items: center;
gap: 8px;
background: rgba(22, 163, 74, 0.12);
color: var(--success);
font-size: 12px;
font-weight: 700;
padding: 8px 16px;
border-radius: 100px;
border: 1px solid rgba(22, 163, 74, 0.3);
margin-bottom: 24px;
letter-spacing: .02em;
}
.unlock-pill::before {
content: '✓';
font-size: 14px;
font-weight: 900;
}
body.member-unlocked .unlock-pill { display: inline-flex }
/* Mobile tweaks */
@media (max-width: 768px) {
.member-gate-banner {
flex-direction: column;
align-items: flex-start;
text-align: left;
gap: 16px;
padding: 20px;
}
.member-gate-banner .btn {
width: 100%;
justify-content: center;
}
}
/* ==========================================
ACCESSIBILITY UTILITIES
========================================== */
.visually-hidden,
.sr-only {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Visible focus outlines for keyboard users */
*:focus-visible {
outline: 3px solid #FF7A00;
outline-offset: 2px;
border-radius: var(--r);
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline-offset: 3px;
}
/* Skip to main content link */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: var(--navy);
color: white;
padding: 10px 16px;
text-decoration: none;
font-weight: 600;
font-size: 14px;
z-index: 1000;
border-radius: 0 0 6px 0;
}
.skip-link:focus {
top: 0;
}
/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
.ticker-track {
animation: none !important;
}
}
/* ==========================================
CONTRAST FIXES FOR DARK BACKGROUNDS
These selectors target sections where dark text was on dark bg
========================================== */
/* About page roadmap — stages on navy-lt background */
section#roadmap .stage-row { color: #FFFFFF !important; }
section#roadmap .stage-num-big { color: rgba(255,178,102,0.55) !important; }
section#roadmap .stage-name { color: #FFB266 !important; font-weight: 700; font-size: 12px; }
section#roadmap .stage-content h4 { color: #FFFFFF !important; font-weight: 600; font-size: 1.3rem; margin-bottom: 16px !important; }
section#roadmap .item-row {
color: #FFFFFF !important;
border-bottom-color: rgba(255,255,255,0.12) !important;
font-weight: 500;
font-size: 14px !important;
}
section#roadmap .item-row::before { color: #FF9433 !important; font-weight: 700; }
section#roadmap .stage-status { font-weight: 700; padding: 4px 10px !important; font-size: 10px !important; }
section#roadmap .s-active { background: #4ADE80 !important; color: #14532D !important; }
section#roadmap .s-building { background: #FFB266 !important; color: #7C2D12 !important; }
section#roadmap .s-planned { background: rgba(255,255,255,0.15) !important; color: #FFFFFF !important; }
section#roadmap .stage-row { border-bottom-color: rgba(255,255,255,0.08) !important; }
/* Network page — supplier directory and grow-your-network sections */
#suppliers .supplier-card { background: rgba(255,255,255,0.06) !important; }
#suppliers .supplier-card h4 { color: #FFFFFF !important; font-weight: 600; }
#suppliers .supplier-card p { color: rgba(255,255,255,0.85) !important; }
#suppliers .supplier-tag {
background: rgba(255,255,255,0.92) !important;
color: #1A3A6B !important;
border-color: transparent !important;
font-weight: 600;
}
#suppliers .verified-badge { color: #4ADE80 !important; font-weight: 700; }
/* The right-side "Grow your dealer network fast" content sits on the off-white section bg.
Force readable navy headings + dark slate body — the inline styles already do this for
feature list cards but the lead h2/p need help. */
#suppliers > .container > .grid-2 > .fade-up.d2 h2 { color: #1A3A6B !important; }
#suppliers > .container > .grid-2 > .fade-up.d2 > p { color: #334155 !important; font-weight: 500; }
#suppliers > .container > .grid-2 > .fade-up.d2 .tag { /* keep default */ }
/* Membership retainer block */
section .container > div[style*="background:var(--navy-lt)"] p,
section .container > div[style*="background: var(--navy-lt)"] p {
color: rgba(255,255,255,0.92) !important;
}
section .container > div[style*="background:var(--navy-lt)"] [style*="color:var(--gold)"],
section .container > div[style*="background: var(--navy-lt)"] [style*="color:var(--gold)"] {
color: #FFB266 !important;
}
section .container > div[style*="background:var(--navy-lt)"] [style*="color:var(--muted)"],
section .container > div[style*="background: var(--navy-lt)"] [style*="color:var(--muted)"] {
color: rgba(255,255,255,0.78) !important;
}
section .container > div[style*="background:var(--navy-lt)"] .btn-ghost,
section .container > div[style*="background: var(--navy-lt)"] .btn-ghost {
color: rgba(255,255,255,0.95) !important;
border-color: rgba(255,255,255,0.4) !important;
}
section .container > div[style*="background:var(--navy-lt)"] .btn-ghost:hover,
section .container > div[style*="background: var(--navy-lt)"] .btn-ghost:hover {
background: rgba(255,255,255,0.1) !important;
border-color: rgba(255,255,255,0.7) !important;
}
/* Inventory page member-gate (the unlock CTA at bottom of catalog) */
.member-gate {
background: linear-gradient(135deg, #1A3A6B 0%, #2E578F 100%);
color: #FFFFFF;
border-radius: var(--r-xl);
padding: 56px 32px;
text-align: center;
margin-top: 32px;
position: relative;
overflow: hidden;
}
.member-gate::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: var(--orange);
}
.member-gate h3 {
color: #FFFFFF !important;
font-family: 'DM Serif Display','DM Serif Display Fallback',Georgia,serif;
font-size: 2rem;
margin-bottom: 12px;
}
.member-gate p {
color: rgba(255,255,255,0.92) !important;
font-size: 1.05rem;
}
/* Contact page - business hours visibility */
.contact-grid .sidebar-row {
padding: 10px 0 !important;
border-bottom: 1px solid var(--border) !important;
}
.contact-grid .sidebar-row .k {
color: var(--text-muted) !important;
font-weight: 500;
}
.contact-grid .sidebar-row .v {
color: var(--navy) !important;
font-weight: 700 !important;
}
/* Contact form area on dark navy-mid background */
.contact-grid > div:nth-child(2) > div[style*="background:var(--navy-mid)"],
.contact-grid > div:nth-child(2) > div[style*="background: var(--navy-mid)"] {
background: var(--off-white) !important;
border-color: var(--border) !important;
}
.contact-grid > div:nth-child(2) > div h3 {
color: var(--navy) !important;
}