/* ============================================================ Echelon Lab Supply — Premium Black/Gold Theme ------------------------------------------------------------ Visual re-skin only. Loaded LAST in so it overrides the legacy blue/silver palette without editing existing CSS or any JavaScript, forms, payment, or markup logic. Matches the approved homepage (index.html) design language. ============================================================ */ :root{ /* Re-map legacy tokens to the gold palette */ --black:#070708; --bg2:#0c0d0f; --graphite:#121316; --charcoal:#17191d; --white:#f6f3ea; --text:#f6f3ea; --gray:#cdc9bd; --muted:#a8a59b; --silver:#d8b25a; /* legacy accent -> gold */ --blue:#d8b25a; /* legacy accent -> gold (flips var(--blue) usages) */ --danger:#e7d6ad; /* New gold tokens (mirrors homepage) */ --gold:#d8b25a; --gold2:#f1d792; --gold-deep:#b88a2e; --line:rgba(201,162,75,.18); --line2:rgba(255,255,255,.08); --radius:22px; --shadow:0 24px 80px rgba(0,0,0,.55); } /* ---------- Base / background ---------- */ body{ background: radial-gradient(circle at 82% -6%,rgba(216,178,90,.14),transparent 38%), radial-gradient(circle at 6% 102%,rgba(216,178,90,.07),transparent 42%), linear-gradient(160deg,#050506 0%,#0b0c0e 55%,#050506 100%) !important; background-attachment:fixed; color:var(--text); -webkit-font-smoothing:antialiased; } /* ---------- Navigation ---------- */ .nav{ background:rgba(7,7,8,.74); backdrop-filter:blur(12px); border-bottom:1px solid var(--line2); } .nav-links{color:#d7d3c7} .nav-links a{transition:color .15s} .nav-links a:hover{color:var(--gold2)} .nav-cta{ border:0; background:linear-gradient(180deg,var(--gold2),var(--gold)); color:#191204 !important; font-weight:800; box-shadow:0 8px 22px rgba(216,178,90,.22); } .nav-cta:hover{color:#191204 !important;transform:translateY(-1px)} .mobile-toggle{border:1px solid var(--line);color:var(--text)} .logo-text{color:var(--text)} /* ---------- Typography accents ---------- */ .eyebrow,.coa-overline,.sub-eyebrow{color:var(--gold)} .lead{color:var(--gray)} .muted,.fine{color:var(--muted)} /* ---------- Buttons ---------- */ .btn{ border:1px solid var(--line); background:rgba(255,255,255,.02); color:var(--text); font-weight:800; transition:transform .12s,box-shadow .15s,border-color .15s,color .15s; } .btn:hover{transform:translateY(-2px);border-color:var(--gold);color:var(--gold2)} .btn-primary,.btn-blue{ border:0; background:linear-gradient(180deg,var(--gold2),var(--gold) 60%,var(--gold-deep)); color:#1a1306 !important; box-shadow:0 12px 30px rgba(216,178,90,.26); } .btn-primary:hover,.btn-blue:hover{ transform:translateY(-2px); box-shadow:0 18px 40px rgba(216,178,90,.38); color:#1a1306 !important; border:0; } .btn-dark{background:#0a0b0d;color:var(--text);border:1px solid var(--line2)} .btn.disabled,.btn:disabled{opacity:.4;filter:grayscale(.4);transform:none} .link-button{color:var(--gold)} /* Age-gate / generic .button variants */ .button.primary,.age-enter{ border:0;border-radius:999px; background:linear-gradient(180deg,var(--gold2),var(--gold) 60%,var(--gold-deep)); color:#1a1306;font-weight:850;padding:15px 22px;cursor:pointer; } .button.ghost,.age-leave{ border:1px solid var(--line);border-radius:999px; background:rgba(255,255,255,.02);color:var(--text);padding:14px 22px;cursor:pointer; } .button.disabled,.button:disabled{opacity:.45;filter:grayscale(.4)} /* ---------- Cards & panels ---------- */ .card,.panel,.notice,.total-box,.cart-summary,.coa-library-card{ background:linear-gradient(180deg,rgba(216,178,90,.06),rgba(255,255,255,.02)) !important; border-color:var(--line) !important; border-radius:20px; } .card{box-shadow:0 18px 60px rgba(0,0,0,.35)} .card:hover{border-color:var(--gold) !important;transform:translateY(-2px);transition:transform .15s,border-color .15s} .panel{border-radius:24px} .summary-box{ border:1px solid var(--line); background:linear-gradient(180deg,rgba(216,178,90,.07),rgba(255,255,255,.02)); border-radius:22px; } .total-box{border:1px solid var(--line)} /* ---------- Badges / pills ---------- */ .badge{border:1px solid var(--line2);color:#e9e6da;background:rgba(255,255,255,.03)} .badge.blue,.margin-pill,.coa-pill{ border-color:var(--line); color:var(--gold2); background:rgba(216,178,90,.06); } /* ---------- Trust bars / darkband ---------- */ .trustbar,.darkband{ border-top:1px solid var(--line2); border-bottom:1px solid var(--line2); background:linear-gradient(180deg,rgba(216,178,90,.05),rgba(255,255,255,.012)); } .trust-item strong{color:var(--text)} /* ---------- Forms ---------- */ .field{ border:1px solid var(--line2); background:rgba(255,255,255,.03); color:var(--text); border-radius:14px; } .field:focus{outline:none;border-color:var(--gold)} .form-card select{border:1px solid var(--line2);background:rgba(255,255,255,.03);color:var(--text)} .form-card select option{background:#15161a;color:var(--text)} .checkbox input,.check input,.age-check input{accent-color:var(--gold)} .age-check{border:1px solid var(--line2);background:rgba(255,255,255,.03)} /* ---------- Product option / quantity selectors ---------- */ .opt{border:1px solid var(--line2);background:rgba(255,255,255,.02);color:var(--text)} .opt.active,.qty-card.active{ border-color:var(--gold) !important; box-shadow:0 0 0 1px rgba(216,178,90,.25),0 0 22px rgba(216,178,90,.12) !important; } .qty-card{ border:1px solid var(--line2); background:linear-gradient(180deg,rgba(216,178,90,.05),rgba(255,255,255,.015)); } /* ---------- Product imagery frames ---------- */ .product-img{ background: radial-gradient(circle at center,rgba(216,178,90,.14),transparent 45%), linear-gradient(145deg,#0c0d10,#16171b) !important; } .product-card-img{border:1px solid var(--line2)} .product-photo-frame.showing-coa{ background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(216,178,90,.04)); } /* ---------- Media gallery (product COA flip) ---------- */ .media-arrow{border:1px solid var(--line);background:rgba(7,7,8,.78);color:var(--text)} .media-arrow:hover{border-color:var(--gold)} .media-status{border:1px solid var(--line);background:rgba(7,7,8,.8);color:var(--text)} .media-open-link{border:1px solid var(--line2);background:rgba(7,7,8,.72);color:var(--text)} .media-open-link:hover{border-color:var(--gold)} /* ---------- Visual vial mock (legacy hero / cards) ---------- */ .vial-visual{ background: radial-gradient(circle at 50% 20%,rgba(216,178,90,.20),transparent 34%), linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.01)) !important; border:1px solid var(--line); } .reflection{background:radial-gradient(ellipse,rgba(216,178,90,.22),transparent 68%)} /* ---------- Popups / toast / overlays ---------- */ .popup-box{border:1px solid var(--line);background:radial-gradient(circle at top right,rgba(216,178,90,.14),transparent 35%),#0b0b0d} .toast{border:1px solid var(--line);background:#0d0d10;color:var(--text)} .cart-summary{border:1px solid var(--line);background:#0b0b0d} .age-gate{background:radial-gradient(circle at top,rgba(216,178,90,.16),transparent 32%),rgba(0,0,0,.86)} .age-gate-card{ border:1px solid var(--line); background:linear-gradient(180deg,rgba(216,178,90,.07),rgba(255,255,255,.025)),#0a0a0c; } .age-gate-mark{border:1px solid var(--line);color:var(--gold2);background:rgba(216,178,90,.08)} /* ---------- Crypto button (keep distinct, gold-edged) ---------- */ .crypto-btn{ background:linear-gradient(135deg,#15161a,#0c0d0f); border:1px solid var(--line); color:var(--text); } .crypto-btn:hover{border-color:var(--gold);color:var(--gold2)} /* ---------- Tables ---------- */ .table td{background:rgba(255,255,255,.03);border-color:var(--line2)} /* ---------- Feedback / research bands ---------- */ .feedback-band{ border-top:1px solid var(--line2);border-bottom:1px solid var(--line2); background: radial-gradient(circle at 50% 0%,rgba(216,178,90,.12),transparent 35%), linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.01)); } .research-snapshot{background:linear-gradient(180deg,rgba(216,178,90,.07),rgba(255,255,255,.03))} /* ---------- Footer ---------- */ .footer{border-top:1px solid var(--line2);background:#050506;color:var(--muted)} .footer a:hover{color:var(--gold2)} .footer-policy-links a:hover{color:var(--gold2)} /* ============================================================ Alt landing pages (research-use-materials / -peptide-supply) Distinct class set: .primary .secondary .kicker .title .item ============================================================ */ .primary,.enter{ background:linear-gradient(180deg,var(--gold2),var(--gold) 60%,var(--gold-deep)) !important; color:#1a1306 !important; border:0 !important; box-shadow:0 12px 30px rgba(216,178,90,.26); } .secondary{border:1px solid var(--line) !important;background:rgba(255,255,255,.02);color:var(--text)} .secondary:hover{border-color:var(--gold) !important;color:var(--gold2)} .kicker{color:var(--gold)} .item{border:1px solid var(--line2);background:rgba(255,255,255,.025)} /* ============================================================ Mobile polish — larger, easier-to-tap controls & spacing ============================================================ */ @media(max-width:760px){ .product-card-img{ background:radial-gradient(circle at center,rgba(216,178,90,.16),transparent 48%),#0a0a0c !important; } .btn,.button.primary,.button.ghost,.primary,.secondary,.enter{ padding-top:16px;padding-bottom:16px; font-size:16px; } .nav-cta{padding:11px 18px} } @media(max-width:520px){ .panel,.card{border-radius:18px} }