/* :root{ --bg:#fff; --fg:#0b1a2b; --muted:#566b85; --primary:#135D76; --line:#e8eef7; --card:#ffffff; --card2:#f7fbff; --shadow:0 12px 28px rgba(17,38,68,.09) } */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Poppins',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;color:var(--fg);background:var(--bg);line-height:1.6}
/* Header */
.header{position:sticky;top:0;z-index:40;background:#e9edf0ee;backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.container{max-width:1200px;margin:0 auto;padding:0 1rem}
.hdr{display:flex;align-items:center;justify-content:space-between;padding:.6rem 0}
.brand{display:flex;align-items:center;gap:.8rem;text-decoration:none;color:inherit}
.logo{height:70px;opacity:.90}.wordmark{height:40px;opacity:.90}
.nav{display:flex;gap:1rem;align-items:center}
.nl{color:#2a3b53;opacity:.85;padding:.4rem .7rem;border-radius:10px;text-decoration:none;transition:.2s}
.nl:hover,.nl.active{opacity:1;background:#f2f7ff}
.main{padding:1.2rem 0}
.btn{display:inline-block;padding:.6rem .9rem;border-radius:12px;border:1px solid #d5e3f5;font-weight:600;text-decoration:none;cursor:pointer}
.btn-primary{background:var(--primary);border-color:var(--primary);color:#fff}
.btn-accent{background:#27a776;border-color:#27a776;color:#fff}
.btn-ghost{background:#fff;color:#0b1a2b;border-color:#e6eef8}
.btn-danger{background:#b12a2a;border-color:#b12a2a;color:#fff}
.kicker{font-weight:800;letter-spacing:.08em;text-transform:uppercase}
/* Footer */
.footer{background:#e0effaee; border-top:1px solid var(--line);padding:1.2rem 0;margin-top:2rem}
.footer .tiny{color:#7b8ea9;font-size:.9rem}
.ft-nav{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:.4rem}
.ft-nav a{color:#51617b;text-decoration:none;padding:.25rem .5rem;border-radius:8px}
.ft-nav a:hover{background:#eef5ff}
/* Search */
.search{display:flex;align-items:center;gap:.4rem;background:#fff;border:1px solid var(--line);border-radius:999px;padding:.35rem .7rem}
.search input, .search select{border:none;outline:none;min-width:0;width:100%;background:#fff}
/* Background video hero */
.bgvideo-hero{padding:0 1rem}
.bgvideo-wrap{position:relative;border-radius:18px;overflow:hidden;box-shadow:var(--shadow);background:linear-gradient(135deg,#eef3ff,#f9fbff);min-height:62vh}
.bgvideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.92}
.bgvideo-overlay{position:relative;z-index:2;display:grid;place-items:center;min-height:80vh;text-align:center;padding:5vh 4vw;color:#fbfdfe}
.bgvideo-overlay .lead{max-width:900px;margin:.6rem auto 1rem;color:#fafcfe}
.bgvideo-overlay .cta-row{display:inline-flex;gap:.6rem;flex-wrap:wrap}
/* Simple staged animations */
.fade-up-1,.fade-up-2,.fade-up-3{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
.show .fade-up-1{opacity:1;transform:translateY(0);transition-delay:.1s}
.show .fade-up-2{opacity:1;transform:translateY(0);transition-delay:.25s}
.show .fade-up-3{opacity:1;transform:translateY(0);transition-delay:.4s}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease}
.reveal.show{opacity:1;transform:translateY(0)}
.kicker.shimmer{
--base1:#F5F8FF;--base2:#C9D4FF;--edge:rgba(253, 255, 254, 0.45);--halo1:rgba(60,241,240,.22);--halo2:rgba(1,1,1,.14);
--shineA:rgba(255,255,255,0);--shineB:rgba(209, 27, 232, 0.28);--shineC:rgba(255,255,255,.92);--speed:3000ms;
background-image:linear-gradient(90deg,var(--base1),var(--base2)),linear-gradient(90deg,var(--shineA) 0%,var(--shineB) 46%,var(--shineC) 50%,var(--shineB) 54%,var(--shineA) 100%);
background-size:100% 100%,200% 100%;background-position:50% 50%,-150% 0%;-webkit-background-clip:text;background-clip:text;color:transparent;
-webkit-text-stroke:.9px var(--edge);text-shadow:0 1px 1px var(--halo1),0 3px 10px var(--halo2);animation:bpTextShimmer var(--speed) cubic-bezier(.22,.61,.36,1) infinite;
}
@keyframes bpTextShimmer{0%{background-position:50% 50%,-150% 0}60%,100%{background-position:50% 50%,150% 0}}
/* Grids */
.section{padding:1.2rem 0}
.section.alt{background:#fbfdff}
.section-head{margin:.4rem auto 1rem;text-align:center}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media (max-width:1200px){ .grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:900px){ .grid,.grid-3{grid-template-columns:repeat(2,1fr)} .grid-2{grid-template-columns:1fr} }
@media (max-width:600px){ .grid{grid-template-columns:1fr} .grid-3{grid-template-columns:1fr} }
/* Cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.card-body{padding:1rem}.card-title{margin:.2rem 0}.card-img{width:100%;height:auto;display:block}
/* Product catalog (sidebar + right column layout on Home) */
.catalog{display:grid;grid-template-columns:300px 1fr;gap:1rem;align-items:start}
.catalog > section{min-width:0} /* allow right col to use full width without overflow */
@media (max-width:1000px){ .catalog{grid-template-columns:1fr} }
.bp-sidebar .sidebar-card{
position:sticky;top:96px;border-radius:14px;padding:16px;background:#fff;box-shadow: var(--shadow);
display:flex;flex-direction:column;gap:8px;max-height:calc(100vh - 120px)
}
.side-scroll{
overflow:auto;max-height:calc(100vh - 220px);padding-right:6px;
-webkit-overflow-scrolling:touch;scrollbar-gutter:stable;
}
.side-scroll::-webkit-scrollbar{width:10px}
.side-scroll::-webkit-scrollbar-track{background:#f1f1f1;border-radius:8px}
.side-scroll::-webkit-scrollbar-thumb{background:#c0c9d2;border-radius:8px}
.side-scroll::-webkit-scrollbar-thumb:hover{background:#a6b2be}
.cat-head{display:flex;justify-content:space-between;align-items:center;font-weight:700;margin-top:.25rem}
.cat-items .list-group-item{padding:.45rem .75rem}
/* Category chips */
.cat-pills{display:flex;gap:.5rem;flex-wrap:wrap;margin:.4rem 0 1rem;justify-content:center}
.chip{border:1px solid var(--line);background:#fff;color:#123;padding:.45rem .8rem;border-radius:999px;cursor:pointer;box-shadow:var(--shadow)}
.chip.is-active{background:var(--primary);color:#fff;border-color:var(--primary)}
/* Product grid (Products page only) */
.prod-img{width:100%;aspect-ratio:4/3;height:auto;object-fit:contain;background:#ffffff;display:block;border-bottom:1px solid var(--line)}
/* Home-only: snug-left sidebar without touching Products page */
@media (min-width:1001px){
.home #product-page.container{ margin-right:auto !important; padding-left:8px !important; padding-right:16px !important; max-width:1200px }
.home .catalog{ grid-template-columns:280px 1fr; gap:.9rem }
.home .bp-sidebar .sidebar-card{ padding:14px; border-top-left-radius:10px; border-bottom-left-radius:10px }
}
/* Mobile keep centered */
@media (max-width:1000px){
.home #product-page.container{ margin-left:auto !important; margin-right:auto !important; padding-left:1rem !important; padding-right:1rem !important }
}
/* Mini hero right panel */
.home-hero.card--tall{
display:grid;grid-template-columns:1.25fr 1fr;gap:1rem;align-items:center;padding:1rem
}
.hh-content{padding:.25rem 0 .25rem .25rem}
.hh-figure{
margin:0;padding:1rem;border-left:1px solid var(--line);
background:linear-gradient(180deg,#f8fbff,#eef5ff);
display:grid;place-items:center;border-radius:14px;min-height:220px
}
.hh-figure img{
display:block;width:100%;max-height:260px;object-fit:contain;border-radius:12px
}
@media (max-width:900px){ .home-hero.card--tall{grid-template-columns:1fr} .hh-figure img{max-height:220px} }
/* Product slider */
.slider-heading{margin:1rem 0 .4rem}
.slider{
overflow:hidden;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);background:#fff;
}
.slider-track{display:flex;gap:.75rem;padding:.8rem;will-change:transform}
.slider-item{flex:0 0 auto;min-width:220px;max-width:220px;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.slider-item .thumb{background:#ffffff;display:grid;place-items:center;padding:.6rem}
.prod-img-sm{width:100%;height:140px;object-fit:contain;display:block}
.slider-item .body{padding:.65rem .8rem}
.slider-item .title{margin:.15rem 0;font-weight:700;font-size:.98rem}
.slider-item .meta{font-size:.88rem;color:var(--muted)}
.slider-item .row{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.5rem}
@media (max-width:600px){ .slider-track{gap:.6rem} .slider-item{min-width:190px;max-width:190px} .prod-img-sm{height:120px} }
/* Auth / RF styles */
.stats-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin:1rem 0}
@media (max-width:900px){.stats-bar{grid-template-columns:1fr}}
.stat{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:1rem}
.stat-title{font-weight:600;color:#425a77;margin:0 0 .25rem}
.stat-value{font-size:28px;font-weight:800;letter-spacing:.5px}
.alert{background:#fff7ec;border:1px solid #ffd7a8;border-radius:16px;padding:1rem;box-shadow:var(--shadow)}
.badge-ok{display:inline-block;padding:.15rem .5rem;border-radius:999px;background:#e8fbef;color:#176b3f;border:1px solid #b8efcc;font-weight:600}
.badge-warn{display:inline-block;padding:.15rem .5rem;border-radius:999px;background:#fff2f2;color:#8a1f11;border:1px solid #f5b5b5;font-weight:600}
.helper{color:#6b7f98;font-size:.95rem}
.info-list{margin:.2rem 0 0;padding:0;list-style:none}
.info-list li{margin:.15rem 0;padding:.15rem 0;border-bottom:1px dashed #e9eff7}
.info-list li:last-child{border-bottom:none}
.rf-domain-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
@media (max-width:900px){ .rf-domain-grid{grid-template-columns:1fr} }
.rf-compare{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;align-items:start}
@media (max-width:900px){ .rf-compare{grid-template-columns:1fr} }
.rf-figure{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:1rem;text-align:center}
.rf-figure img{max-width:100%;height:auto}
.caption{display:block;margin-top:.4rem;color:#566b85;font-weight:600}
.rf-checks{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media (max-width:900px){ .rf-checks{grid-template-columns:1fr} }
/* Auth steps */
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media (max-width:1000px){ .steps-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .steps-grid{grid-template-columns:1fr} }
.step{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden}
.step img{width:100%;display:block;border-bottom:1px solid var(--line)}
.step-body{padding:1rem}
.step-title{font-weight:700;margin-bottom:.25rem}
.code-card{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);padding:1rem}
/* Product detail layout */
.prod-detail{display:grid;grid-template-columns:520px 1fr;gap:1rem}
.detail-media{background:#ffffff;display:grid;place-items:center;border-right:1px solid var(--line)}
.detail-media img{width:100%;max-height:480px;object-fit:contain;border-radius:20px;margin:12px}
.detail-body{padding:1rem}
@media (max-width:1000px){ .prod-detail{grid-template-columns:1fr} .detail-media{border-right:0;border-bottom:1px solid var(--line)} }
/* Hamburger */
.nav-toggle{margin-left:auto;border:0;background:transparent;width:44px;height:38px;display:none;align-items:center;justify-content:center;border-radius:10px;cursor:pointer}
.nav-toggle .line{display:block;width:24px;height:2px;background:#0b1a2b;border-radius:2px;margin:3px 0}
@media (max-width:900px){
.nav-toggle{display:flex}
.header .nav{
position:fixed;top:64px;right:0;width:76%;max-width:340px;height:calc(100vh - 64px);
padding:1rem;background:#fff;border-left:1px solid var(--line);
transform:translateX(100%);transition:transform .25s ease;
display:flex;flex-direction:column;gap:.5rem;z-index:50;
}
.header .nav.open{transform:translateX(0)}
.nav-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.28);backdrop-filter:blur(2px);z-index:45}
body.no-scroll{overflow:hidden}
}
/* Tiny logo spin-in */
.bp-spin-in-LTR{display:inline-block;transform-origin:50% 50%;backface-visibility:hidden;will-change:transform,opacity;animation:bpSpinInLTR 1s cubic-bezier(.2,.8,.2,1) both}
@keyframes bpSpinInLTR{0%{transform:translateX(-40px) rotate(360deg) scale(.92);opacity:0}60%{transform:translateX(3px) rotate(6deg) scale(1.02);opacity:1}100%{transform:translateX(0) rotate(0) scale(1);opacity:1}}
/* ===== Sidebar: chat-list style ===== */
.bp-sidebar .cat-head{
font-size:.95rem; color:#425a77; text-transform:capitalize;
display:flex; justify-content:space-between; align-items:center;
margin:.35rem 0 .25rem;
}
.bp-sidebar .cat-items{ display:grid; gap:.25rem; padding:.25rem 0 .5rem; }
.bp-sidebar .cat-items .list-group-item{ padding:0; border:0; background:none; }
/* Link row */
.bp-sidebar .side-link{
display:flex; align-items:center; gap:.55rem;
padding:.55rem .70rem .55rem .95rem;
border-radius:12px; text-decoration:none; color:#0b1a2b;
position:relative; transition:background .18s ease, transform .18s ease, box-shadow .18s ease;
}
/* left accent bar (animates in) */
.bp-sidebar .side-link::before{
content:""; position:absolute; left:8px; top:8px; bottom:8px; width:4px;
border-radius:3px; background:transparent; transform:scaleX(0); transform-origin:left;
transition:transform .18s ease, background .18s ease;
}
/* chevron on the right (no markup change needed) */
.bp-sidebar .side-link::after{
content:"›"; font-weight:700; margin-left:auto; opacity:.28;
transition:transform .18s ease, opacity .18s ease;
}
/* hover / focus */
.bp-sidebar .side-link:hover,
.bp-sidebar .side-link:focus-visible{
background:linear-gradient(180deg,#f7fbff,#eef5ff);
outline:none; box-shadow:0 6px 14px rgba(17,38,68,.08);
transform:translateX(2px);
}
.bp-sidebar .side-link:hover::before,
.bp-sidebar .side-link:focus-visible::before{
background:var(--primary); transform:scaleX(1);
}
.bp-sidebar .side-link:hover::after,
.bp-sidebar .side-link:focus-visible::after{
transform:translateX(2px); opacity:.55;
}
/* pressed */
.bp-sidebar .side-link:active{ transform:translateX(1px) scale(.997); }
/* strength text */
.bp-sidebar .side-link .muted{ color:var(--muted); font-size:.88rem; }
/* persistent “active” row */
.bp-sidebar .side-link.is-active{
background:#ecf5ff;
box-shadow:inset 0 0 0 1px rgba(19,93,118,.16);
font-weight:600;
}
.bp-sidebar .side-link.is-active::before{ background:var(--primary); transform:scaleX(1); }
/* nicer mobile scrolling feel */
.side-scroll{
-webkit-overflow-scrolling:touch;
scrollbar-gutter:stable both-edges;
min-height:40vh; /* ensures there’s room to scroll on small screens */
}
/* ===== Video section enhancements ===== */
/* Two-column layout */
.video-layout{
display:grid;
grid-template-columns: 2fr 1fr;
gap:1rem;
align-items:start;
}
@media (max-width: 1000px){
.video-layout{ grid-template-columns:1fr; }
}
/* Framed, responsive video */
.video-shell{ margin:0; }
.frame-glow{
position:relative;
padding:.6rem;
border-radius:16px;
background:linear-gradient(180deg,#f8fbff,#eef5ff);
border:1px solid var(--line);
box-shadow:var(--shadow);
}
.video-iframe{
display:block;
width:100%;
aspect-ratio:16/9; /* keeps it responsive while you keep visual size consistent */
border:0;
border-radius:12px;
}
.video-caption{
margin:.45rem .25rem 0;
color:var(--muted);
font-size:.92rem;
}
/* Right panel styling */
.video-side{ border-radius:16px; box-shadow:var(--shadow); }
.video-side .card-body{ padding:1rem; }
.icon-list.check li{ list-style:none; margin:.35rem 0; position:relative; padding-left:1.2rem; }
.icon-list.check li::before{
content:"✓";
position:absolute; left:0; top:0; color:#1c7f58; font-weight:800;
}
/* Chapters pills */
.video-chapters{ margin-top:.9rem; }
.chapters-title{ font-weight:700; color:#425a77; margin-bottom:.35rem; }
.chapters-pills{ display:flex; flex-wrap:wrap; gap:.4rem; }
.chapters-pills .chip{ padding:.4rem .7rem; }
/* Slimmer stats row variant (uses your existing .stat cards) */
.stats-bar--slim{ grid-template-columns:repeat(3,1fr); }
@media (max-width:900px){ .stats-bar--slim{ grid-template-columns:1fr; } }
/* ===== Hero overlay: glass card & extras ===== */
.hero-overlay-card{
/* subtle glass */
background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
border: 1px solid rgba(255,255,255,.25);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-radius: 18px;
padding: clamp(14px, 2.4vw, 28px);
box-shadow: 0 18px 40px rgba(11,26,43,.18);
color: #fbfdfe;
}
.hero-copy{
max-width: 960px;
margin: 0 auto;
text-align: center;
}
.hero-copy .lead{ max-width: 820px; margin: .5rem auto 1rem; color:#f0f6ff; opacity:.95; }
/* Ghost chips sit nicely on video */
.hero-pills{
margin-top: .7rem;
display: flex; gap:.45rem; justify-content:center; flex-wrap:wrap;
}
.chip-ghost{
background: rgba(255,255,255,.06);
color: #fff;
border: 1px solid rgba(255,255,255,.22);
box-shadow: none;
}
.chip-ghost:hover,
.chip-ghost:focus-visible{
background: rgba(255,255,255,.12);
}
/* Trust row on hero */
.hero-trust{
margin-top:.6rem;
display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap;
}
.hero-trust .helper{ color:#e7eefb; }
/* Scroll cue (FIXED) */
.scroll-cue{
position:absolute;
left:50%; bottom:12px; transform:translateX(-50%);
width:26px; height:42px; border-radius:16px;
border:2px solid rgba(255,255,255,.6);
display:grid; place-items:center;
opacity:.9;
}
.scroll-cue span{
display:block; width:4px; height:8px; border-radius:2px;
background:#fff; opacity:.9; transform: translateY(-4px);
animation: cueDrop 1.6s ease-in-out infinite;
}
@keyframes cueDrop{
0% { transform: translateY(-6px); opacity:.0; }
30% { transform: translateY(0); opacity:1; }
70% { transform: translateY(6px); opacity:.2; }
100% { transform: translateY(-6px); opacity:.0; }
}
/* motion safety (FIXED) */
@media (prefers-reduced-motion: reduce){
.scroll-cue span{ animation:none; }
}
/* ---- Auth verify styles ---- */
.bp-verify-card{position:relative;border:1px solid #2a375f;border-radius:14px;padding:16px;background:#0f1630;overflow:hidden;}
.bp-verify--ok{background:#0e2b19;border-color:#1c7a43;color:#c8f3da;}
.bp-verify--fail{background:#3a0f16;border-color:#b23a48;color:#ffd7dd;}
.bp-verify-badge{font-weight:700;display:inline-block;margin-bottom:8px;}
.bp-verify-badge.ok{color:#b7ffd0;}
.bp-verify-badge.fail{color:#ffd1d1;}
.bp-verify-pulse{position:absolute;inset:0;pointer-events:none;opacity:.4;animation:bpPulse 1.2s ease-out 1;}
@keyframes bpPulse{0%{box-shadow:0 0 0 0 rgba(28,122,67,.7);}100%{box-shadow:0 0 0 28px rgba(28,122,67,0);}}
.bp-verify--fail .bp-verify-pulse{animation:bpPulseRed 1.2s ease-out 1;}
@keyframes bpPulseRed{0%{box-shadow:0 0 0 0 rgba(178,58,72,.8);}100%{box-shadow:0 0 0 28px rgba(178,58,72,0);}}
.bp-verify-row{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.bp-verify-img{width:120px;height:120px;object-fit:cover;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:#0b1126;}
.bp-verify-meta{font-size:15px;line-height:1.55;}
.bp-verify-meta b{color:#e6edff;}
/* ---- Admin minimal design ---- */
:root{--bg:#0b1228;--card:#0f1635;--muted:#9fb1d9;--border:#223059;--accent:#5aa0ff;--ok:#1c7a43;--bad:#b23a48;}
.admin-wrap{min-height:100vh;background:var(--bg);color:#e6edff;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,'Noto Sans',sans-serif;}
.admin-header{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid var(--border);background:rgba(15,22,53,.8);position:sticky;top:0;backdrop-filter:blur(6px)}
.admin-title{font-weight:700;letter-spacing:.4px}
.admin-main{display:grid;grid-template-columns:240px 1fr;gap:20px;padding:20px;max-width:1200px;margin:0 auto}
.admin-nav{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:12px}
.admin-nav a{display:block;padding:10px 12px;border-radius:10px;color:#e6edff;text-decoration:none;border:1px solid transparent}
.admin-nav a:hover{border-color:var(--border);background:#101b3f}
.admin-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:16px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.kpi{background:#0f2044;border:1px solid #1e3874;border-radius:12px;padding:14px}
.btn{display:inline-block;background:var(--accent);color:#09112c;text-decoration:none;border:0;border-radius:10px;padding:8px 12px;font-weight:700}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid var(--border);padding:10px;text-align:left}
.small{color:var(--muted);font-size:12px}
.form input,.form textarea,.form select{width:100%;background:#0b1126;color:#e6edff;border:1px solid var(--border);border-radius:10px;padding:8px}
.form label{display:block;margin:10px 0 4px}
.actions a{margin-right:8px}
/* ===========================
LIGHT THEME OVERRIDES (append at end)
=========================== */
/* --- Site base stays light --- */
:root{
--bg:#fff; --fg:#0b1a2b; --muted:#566b85; --primary:#135D76;
--line:#e8eef7; --card:#ffffff; --card2:#f7fbff; --shadow:0 12px 28px rgba(17,38,68,.09);
}
/* --- Admin (Dashboard) to light --- */
.admin-wrap{ background:#fff; color:var(--fg); }
.admin-header{
background:#ffffffee; color:var(--fg);
border-bottom:1px solid var(--line);
backdrop-filter:blur(8px);
}
.admin-title{ color:var(--fg); }
.admin-main{ /* grid setup remains same */ }
.admin-nav{ background:#fff; border:1px solid var(--line); }
.admin-nav a{ color:var(--fg); }
.admin-nav a:hover{ background:#f2f7ff; border-color:var(--line); }
.admin-card{ background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); }
.kpi{ background:#f7fbff; border:1px solid #e6eef8; color:var(--fg); }
.table th,.table td{ border-bottom:1px solid var(--line); color:var(--fg); }
.form input,.form textarea,.form select{
background:#fff; color:var(--fg); border:1px solid var(--line);
}
.btn{ background:var(--primary); color:#fff; }
.btn:hover{ filter:brightness(0.90); }
/* --- Auth (verify) cards to light --- */
.bp-verify-card{
background:#fff; border:1px solid var(--line); color:var(--fg);
border-radius:16px; box-shadow:var(--shadow);
}
.bp-verify--ok{
background:#e8fbef; border-color:#b8efcc; color:#176b3f;
}
.bp-verify--fail{
background:#fff2f2; border-color:#f5b5b5; color:#8a1f11;
}
.bp-verify-badge.ok{ color:#176b3f; }
.bp-verify-badge.fail{ color:#8a1f11; }
.bp-verify-img{ background:#f7fbff; border:1px solid #e6eef8; }
.bp-verify-meta b{ color:#0b1a2b; }
/* light pulse accents */
@keyframes bpPulse{0%{box-shadow:0 0 0 0 rgba(23,107,63,.35);}100%{box-shadow:0 0 0 28px rgba(23,107,63,0);}}
@keyframes bpPulseRed{0%{box-shadow:0 0 0 0 rgba(138,31,17,.35);}100%{box-shadow:0 0 0 28px rgba(138,31,17,0);}}
/* ====== SUCCESS CARD: NO-JS CELEBRATION ====== */
/* Soft green glow around the whole success card */
.bp-verify-card.bp-verify--ok{
position: relative;
overflow: hidden;
}
.bp-verify-card.bp-verify--ok::before{
content:"";
position:absolute; inset:-8px;
border-radius:18px;
box-shadow:
0 0 0 0 rgba(23,107,63,.22),
0 0 28px 8px rgba(23,107,63,.16);
animation: bpGlowLoop 1.8s ease-in-out infinite;
pointer-events:none;
}
/* Headline/badge zoom pop + gentle breathing */
.bp-verify--ok .bp-verify-badge{
display:inline-block;
font-weight:900;
letter-spacing:.2px;
background:linear-gradient(90deg,#0e7a4f,#22b36d);
-webkit-background-clip:text; background-clip:text; color:transparent;
text-shadow:0 2px 10px rgba(19,93,118,.10);
/* entry pop (once) + breathing (loop) */
animation:
bpPopIn .55s cubic-bezier(.2,.9,.2,1) 1,
bpBreath 1.6s ease-in-out .55s infinite;
transform-origin:50% 50%;
}
/* Tiny “spark shimmer” underline using gradient sweep */
.bp-verify--ok .bp-verify-badge{
position:relative;
}
.bp-verify--ok .bp-verify-badge::after{
content:"";
position:absolute; left:0; right:0; bottom:-6px; height:3px;
border-radius:999px;
background:
linear-gradient(90deg, rgba(14,122,79,0) 0%, rgba(52,207,136,.85) 50%, rgba(14,122,79,0) 100%);
filter:blur(.2px);
animation: bpShimmer 2.2s ease-in-out .4s infinite;
}
/* Keyframes */
@keyframes bpPopIn{
0% { transform:scale(.6); opacity:0; filter:brightness(.9) saturate(.9) }
60% { transform:scale(1.08); opacity:1; filter:none }
100% { transform:scale(1) }
}
@keyframes bpBreath{
0%,100% { transform:scale(1) }
50% { transform:scale(1.04) }
}
@keyframes bpGlowLoop{
0%,100% { opacity:.65 }
50% { opacity:.95 }
}
@keyframes bpShimmer{
0% { transform:translateX(-35%) scaleX(.85); opacity:.0 }
20% { opacity:1 }
50% { transform:translateX(35%) scaleX(1); }
80% { opacity:1 }
100% { transform:translateX(60%) scaleX(.9); opacity:0 }
}
/* Motion safety */
@media (prefers-reduced-motion: reduce){
.bp-verify-card.bp-verify--ok::before,
.bp-verify--ok .bp-verify-badge,
.bp-verify--ok .bp-verify-badge::after{
animation:none !important;
}
}
.bp-verify-card.bp-verify--ok .bp-verify-img {
animation:
bpImgPopFix .55s cubic-bezier(.2,.9,.2,1) 1,
bpImgFloatFix 4s ease-in-out .55s infinite !important;
}
@media (max-width:600px){
.bp-verify-card.bp-verify--ok .bp-verify-img{
animation:
bpImgPopFix .45s cubic-bezier(.2,.9,.2,1) 1,
bpImgFloatFix 6s ease-in-out .45s infinite !important; /* slower */
}
}
/* ===== Mobile menu: CSS-only safe toggle ===== */
@media (max-width:900px){
/* ensure header stays on top */
.header{ z-index:60; }
/* closed menu must not block taps */
.header .nav{
pointer-events: none; /* can't block when off-canvas */
transform: translateX(100%); /* (already in your CSS) */
}
.header .nav.open{
pointer-events: auto; /* active only when open */
}
/* backdrop is present but inert when menu closed */
.nav-backdrop{
position: fixed;
inset: 0;
background: rgba(0,0,0,.28);
z-index: 45;
opacity: 0;
pointer-events: none; /* don't block clicks when hidden */
transition: opacity .2s ease;
display: block; /* keep node in DOM safely */
}
/* show backdrop ONLY when nav is open (cover common DOM orders) */
.header .nav.open + .nav-backdrop,
.header .nav.open ~ .nav-backdrop,
body:has(.header .nav.open) .nav-backdrop{ /* :has for modern browsers; harmless elsewhere */
opacity: 1;
pointer-events: auto;
}
}
/* =====================================================
PATCH 2025-10-05 — Mobile Hamburger (.nav-toggle with .line1/.line2/.line3)
===================================================== */
/* Keep button layered above backdrops; do not change layout elsewhere */
.nav-toggle{
position: relative;
z-index: 1001;
width: 44px; height: 38px;
margin-left: auto;
border: 1px solid var(--line, #e8eef7);
border-radius: 10px;
background: rgba(19,93,118,.08);
color: var(--fg, #0b1a2b);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background .25s, box-shadow .25s, border-color .25s, transform .15s;
box-shadow: 0 6px 18px rgba(17,38,68,.08);
}
.nav-toggle:hover{ background: rgba(19,93,118,.12); box-shadow: 0 10px 28px rgba(17,38,68,.12); }
.nav-toggle:active{ transform: translateY(1px) scale(.99); }
.nav-toggle:focus-visible{ outline: 2px dashed var(--primary,#135D76); outline-offset: 3px; }
/* Visible on mobile */
@media (min-width: 901px){ .nav-toggle{ display: none; } }
@media (max-width: 900px){ .nav-toggle{ display: inline-flex; } }
/* Bars (your markup uses .line1 .line2 .line3) */
.nav-toggle .line1,
.nav-toggle .line2,
.nav-toggle .line3{
display:block;
width:22px; height:2px;
background: currentColor;
border-radius:2px;
transition: transform .35s ease, opacity .25s ease, width .35s ease;
will-change: transform, opacity, width;
}
/* Stack spacing + subtle middle-shorter */
.nav-toggle .line2{ margin-top:5px; width:19px; }
.nav-toggle .line3{ margin-top:5px; }
/* X morph using ARIA */
.nav-toggle[aria-expanded="true"]{
background: rgba(19,93,118,.14);
border-color: rgba(19,93,118,.28);
color: var(--primary, #135D76);
}
.nav-toggle[aria-expanded="true"] .line1{ transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .line2{ opacity: 0; transform: scaleX(0); }
.nav-toggle[aria-expanded="true"] .line3{ transform: translateY(-7px) rotate(-45deg); }
/* Optional soft halo */
.nav-toggle::after{
content:""; position:absolute; inset:-6px; border-radius:10px; pointer-events:none;
box-shadow:0 0 0 0 rgba(19,93,118,.22);
animation:navPulse 2.2s ease-out infinite;
}
@keyframes navPulse{
0%{ box-shadow:0 0 0 0 rgba(19,93,118,.22) }
70%{ box-shadow:0 0 0 14px rgba(19,93,118,0) }
100%{ box-shadow:0 0 0 0 rgba(19,93,118,0) }
}
/* Ensure off-canvas nav doesn't block taps when closed */
@media (max-width:900px){
.header{ z-index: 60; }
.header .nav{ pointer-events: none; }
.header .nav.open{ pointer-events: auto; }
/* Backdrop safe defaults (only interactive when nav open) */
.nav-backdrop{
position: fixed; inset: 0;
background: rgba(0,0,0,.28);
backdrop-filter: blur(2px);
z-index: 45;
opacity: 0;
pointer-events: none;
transition: opacity .2s ease;
display: block;
}
.header .nav.open + .nav-backdrop,
.header .nav.open ~ .nav-backdrop{
opacity: 1;
pointer-events: auto;
}
}
/* Shine effect */
.btn-shine{position:relative;overflow:hidden}
.btn-shine::before{content:"";position:absolute;top:-100%;left:-30%;width:40%;height:300%;transform:rotate(25deg);background:linear-gradient( to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 100% );animation:shine 3.5s ease-in-out infinite}
@keyframes shine{0%{left:-30%}100%{left:130%}}
/* @media (max-width:900px){
.hdr{ position: relative; }
.nav-toggle{
position: absolute;
right: calc(env(safe-area-inset-right, 0px) + clamp(12px, 2.5vw, 20px));
top: 50%;
transform: translateY(-50%);
margin-left: 0;
}
} */
@media (max-width:900px){
.nav-toggle{
margin-right: clamp(20px, 3vw, 20px); /* right edge se thoda gap */
}
}
/* === Button hover enhancement (drop-in) === */
.btn{
position: relative; /* for sheen */
overflow: hidden; /* keep sheen inside */
transition: transform .18s ease,
box-shadow .25s ease,
filter .25s ease,
background-color .25s ease;
box-shadow: 0 6px 18px rgba(17,38,68,.08);
}
/* your original rule + lift + deeper shadow */
.btn:hover{
filter: brightness(0.90); /* keep your darken effect */
transform: translateY(-1px);
box-shadow: 0 12px 28px rgba(17,38,68,.16);
}
/* press state */
.btn:active{
transform: translateY(0);
filter: brightness(0.92);
box-shadow: 0 6px 18px rgba(17,38,68,.12);
}
/* accessible focus */
.btn:focus-visible{
outline: 2px dashed var(--primary);
outline-offset: 3px;
}
/* subtle sheen sweep on hover */
.btn::after{
content:"";
position:absolute; inset:0;
background: linear-gradient(
120deg,
transparent 0%,
rgba(255,255,255,.22) 45%,
rgba(255,255,255,.38) 50%,
rgba(255,255,255,.22) 55%,
transparent 100%
);
transform: translateX(-120%);
transition: transform .6s cubic-bezier(.22,.61,.36,1);
pointer-events:none;
}
.btn:hover::after{
transform: translateX(120%);
}
/* motion safety */
@media (prefers-reduced-motion: reduce){
.btn, .btn:hover, .btn:active{ transition:none; transform:none; }
.btn::after{ content:none; }
}
/* Single-result grid sizing (desktop only) */
@media (min-width: 901px){
/* jab #grid me sirf 1 child ho */
#grid:has(> *:only-child){
justify-items: center; /* center the card */
}
#grid:has(> *:only-child) > *{
max-width: 520px; /* card max width */
width: 100%;
}
#grid:has(> *:only-child) .prod-img{
max-height: 360px; /* cap image height */
aspect-ratio: 4 / 3;
object-fit: contain;
}
}
/* === AUTH FORM RESCUE (force visible changes) === */
form#auth-form.code-card{
background:#fff !important;
border:1px solid var(--line, #e8eef7) !important;
border-radius:16px !important;
box-shadow: var(--shadow, 0 12px 28px rgba(17,38,68,.09)) !important;
padding: clamp(14px, 2.4vw, 20px) !important;
}
form#auth-form label[for="auth-code"]{
display:block !important; font-weight:800 !important; color:#223b59 !important; margin-bottom:.35rem !important;
}
form#auth-form .search{
border-radius:14px !important; padding:.4rem .7rem !important; background:#f7fbff !important; border:1px solid #e6eef8 !important;
box-shadow: inset 0 0 0 0 rgba(19,93,118,0) !important; transition: box-shadow .2s, border-color .2s, background-color .2s !important;
}
form#auth-form .search:focus-within{ border-color: var(--primary,#135D76) !important; background:#fff !important; box-shadow: 0 0 0 4px rgba(19,93,118,.08) !important; }
form#auth-form input#auth-code.code-input{
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace !important;
font-weight:800 !important; font-size: clamp(18px, 2.2vw, 22px) !important; letter-spacing:.18em !important;
text-transform: uppercase !important; text-align:center !important; padding:.65rem .2rem !important; width:100% !important;
color:#0b1a2b !important; background:transparent !important; caret-color: var(--primary,#135D76) !important;
}
form#auth-form input#auth-code.code-input::placeholder{ color:#9fb1d9 !important; letter-spacing:.12em !important; text-transform:uppercase !important; }
form#auth-form #codeHelp.helper{ margin:.25rem 0 .45rem !important; color:#6b7f98 !important; font-size:.95rem !important; }
form#auth-form .btn{ border-radius:14px !important; font-weight:800 !important; }
form#auth-form .btn + .btn{ margin-left:.55rem !important; }
form#auth-form #verifyBtn{
min-height:52px !important; padding:.9rem 1.3rem !important; border-radius:14px !important;
font-size: clamp(15px,1.05vw,18px) !important; font-weight:800 !important; letter-spacing:.2px !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 10px 26px rgba(17,38,68,.16) !important;
}
form#auth-form #verifyBtn:hover{ transform: translateY(-1px) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 16px 36px rgba(17,38,68,.22) !important; }
form#auth-form input#auth-code.code-input{
/* background-image: linear-gradient(90deg, transparent 49.8%, rgba(19,93,118,.10) 50%, transparent 50.2%) !important; background-size: 100% 100% !important; */
}
@media (max-width:600px){
form#auth-form .btn, form#auth-form a.btn{ width:100% !important; }
form#auth-form .btn + .btn{ margin-left:0 !important; margin-top:.55rem !important; }
}
/************************************************************
AUTH PAGE ENHANCEMENT PACK (append at end of your CSS)
Scopes to: #auth-form, #verifyBtn, #auth-count, #auth-result,
.bp-verify-card (success/fail cards on auth page)
*************************************************************/
/* ========== 1) Auth Form: premium card + gradient ring ========== */
#auth-form.code-card{
position: relative;
background: linear-gradient(180deg,#ffffff, #f9fbff);
border: 1px solid var(--line);
border-radius: 18px;
box-shadow: 0 18px 40px rgba(17,38,68,.10);
padding: clamp(16px, 2.8vw, 24px);
overflow: hidden;
}
/* subtle gradient border (mask trick) */
#auth-form.code-card::before{
content:"";
position:absolute; inset:0; padding:1px; border-radius:inherit;
background: linear-gradient(135deg, rgba(19,93,118,.25), rgba(39,167,118,.18), rgba(19,93,118,.25));
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events:none;
}
/* header accent sparkle */
#auth-form.code-card::after{
content:"";
position:absolute; top:-40px; right:-40px; width:180px; height:180px;
/* background: radial-gradient(closest-side, rgba(19,93,118,.16), transparent 70%); */
filter: blur(2px);
pointer-events:none;
}
/* Label: crisper */
#auth-form label[for="auth-code"]{
display:block;
font-weight:900;
color:#203954;
margin: 0 0 .4rem;
letter-spacing:.2px;
}
/* Input shell (your .search wrapper) */
#auth-form .search{
border-radius: 14px;
padding: .45rem .75rem;
background:#f7fbff;
border:1px solid #e6eef8;
transition: box-shadow .22s ease, border-color .22s ease, background-color .22s ease, transform .12s ease;
}
#auth-form .search:focus-within{
background:#fff;
border-color: var(--primary);
box-shadow: 0 0 0 4px rgba(19,93,118,.10);
transform: translateY(-1px);
}
/* Code input: bold, centered, segmented cue (single input) */
#auth-form .code-input{
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
font-weight: 900;
font-size: clamp(18px, 2.2vw, 22px);
letter-spacing: .18em;
text-transform: uppercase;
text-align: center;
padding: .7rem .25rem;
width: 100%;
color:#0b1a2b;
background: transparent;
caret-color: var(--primary);
/* 4|4 visual guide */
/* background-image: linear-gradient(90deg, transparent 49.8%, rgba(19,93,118,.10) 50%, transparent 50.2%); */
background-size: 100% 100%;
}
#auth-form .code-input::placeholder{
color:#9fb1d9;
letter-spacing:.12em;
text-transform:uppercase;
}
/* Helper note */
#auth-form #codeHelp.helper{
margin:.3rem 0 .65rem;
color:#5a6f8d;
font-size:.95rem;
}
/* Valid/Invalid states (optional, if you toggle classes or use pattern) */
#auth-form .code-input.is-valid,
#auth-form .code-input:valid{
background: linear-gradient(0deg, rgba(232,251,239,.55), rgba(232,251,239,.55));
border-radius: 10px;
box-shadow: inset 0 0 0 1px #b8efcc;
}
#auth-form .code-input.is-invalid,
#auth-form .code-input:invalid{
background: linear-gradient(0deg, rgba(255,242,242,.55), rgba(255,242,242,.55));
border-radius: 10px;
box-shadow: inset 0 0 0 1px #f5b5b5;
}
/* Button row spacing + hover polish (reuses your .btn rules) */
#auth-form .btn{ border-radius:14px; font-weight:800; }
#auth-form .btn + .btn{ margin-left:.6rem; }
@media (max-width:600px){
#auth-form .btn, #auth-form a.btn{ width:100%; }
#auth-form .btn + .btn{ margin-left:0; margin-top:.6rem; }
}
/* ========== 2) Special Verify Button (hero CTA) ========== */
#verifyBtn{
min-height: 54px;
padding: .95rem 1.35rem;
border-radius: 14px;
border: 0;
font-size: clamp(15px, 1.05vw, 18px);
font-weight: 900;
letter-spacing: .2px;
color:#fff;
background: linear-gradient(135deg, #135D76, #1a8db1 60%, #27a776);
box-shadow: 0 14px 34px rgba(17,38,68,.18), inset 0 1px 0 rgba(255,255,255,.18);
transition: transform .18s ease, box-shadow .25s ease, filter .25s ease, background-position .35s ease;
background-size: 180% 100%;
background-position: 0% 50%;
}
#verifyBtn:hover{
transform: translateY(-1px);
box-shadow: 0 18px 40px rgba(34, 179, 31, 0.24), inset 0 1px 0 rgba(255,255,255,.22);
filter: brightness(.98);
background-position: 100% 50%;
}
#verifyBtn:active{ transform: translateY(0); }
/* Accessible focus */
#verifyBtn:focus-visible{
outline: 2px dashed #1a8db1;
outline-offset: 3px;
}
/* Loading state (use: set attribute data-loading="true") */
#verifyBtn[data-loading="true"]{
position: relative;
cursor: wait;
opacity: .9;
}
#verifyBtn[data-loading="true"]::after{
content:"";
position:absolute; inset:0; margin:auto;
width:18px; height:18px; border-radius:50%;
border: 2px solid rgba(255,255,255,.65);
border-top-color: transparent;
animation: authSpin .8s linear infinite;
}
@keyframes authSpin{ to{ transform: rotate(360deg); } }
/* ========== 3) Counter Card: #auth-count gets a premium look ========== */
#auth-count.stat-value{
font-size: clamp(28px, 3.2vw, 40px);
font-weight: 900;
letter-spacing: .6px;
color:#0d2a41;
text-shadow: 0 1px 0 #fff, 0 10px 18px rgba(17,38,68,.10);
transition: text-shadow .25s ease, transform .12s ease;
}
#auth-count.stat-value:hover{
transform: translateY(-1px);
text-shadow: 0 1px 0 #fff, 0 16px 26px rgba(17,38,68,.16);
}
#auth-count.stat-value::selection{ background: rgba(19,93,118,.15); }
/* optional gentle glow pulse on update (toggle .bump via JS if you want) */
#auth-count.bump{ animation: countGlow 1.2s ease-out 1; }
@keyframes countGlow{
0%{ text-shadow: 0 0 0 rgba(39,167,118,0); }
40%{ text-shadow: 0 0 18px rgba(39,167,118,.45); }
100%{ text-shadow: 0 1px 0 #fff, 0 10px 18px rgba(17,38,68,.10); }
}
/* ========== 4) Verify Result Cards: classy success/fail ========== */
.bp-verify-card{
position: relative;
background: linear-gradient(180deg,#ffffff,#f8fbff);
border: 1px solid var(--line);
border-radius: 18px;
box-shadow: 0 18px 40px rgba(17,38,68,.12);
padding: 16px;
overflow: hidden;
}
.bp-verify-card::before{
content:"";
position:absolute; inset:0; padding:1px; border-radius:inherit;
background: linear-gradient(135deg, rgba(19,93,118,.18), rgba(19,93,118,.04));
-webkit-mask:
linear-gradient(#fff 0 0) content-box,
linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events:none;
}
/* success */
.bp-verify-card.bp-verify--ok{
background: linear-gradient(180deg, #f6fff9, #e8fbef);
border-color: #b8efcc;
box-shadow: 0 18px 40px rgba(23,107,63,.16);
}
.bp-verify-card.bp-verify--ok::before{
background: linear-gradient(135deg, rgba(23,107,63,.25), rgba(23,107,63,.08));
}
/* fail */
.bp-verify-card.bp-verify--fail{
background: linear-gradient(180deg, #fff7f7, #fff2f2);
border-color: #f5b5b5;
box-shadow: 0 18px 40px rgba(178,58,72,.14);
}
.bp-verify-card.bp-verify--fail::before{
background: linear-gradient(135deg, rgba(178,58,72,.25), rgba(178,58,72,.08));
}
/* image + meta spacing */
.bp-verify-row{ display:flex; gap:16px; align-items:flex-start; flex-wrap:wrap; }
.bp-verify-img{
width:120px; height:120px; object-fit:cover;
border-radius:12px;
border:1px solid rgba(0,0,0,.06);
background:#fff;
box-shadow: 0 8px 18px rgba(17,38,68,.10);
}
.bp-verify-meta{ font-size:15px; line-height:1.55; }
/* success badge nicer (inherits your animations if present) */
.bp-verify-badge{
font-weight:800;
margin-bottom:8px;
color:#0b1a2b;
}
.bp-verify--ok .bp-verify-badge{ color:#176b3f; }
.bp-verify--fail .bp-verify-badge{ color:#8a1f11; }
/* ========== 5) Result area spacing ========== */
#auth-result{ margin-top: 1rem; }
#auth-result .card,
#auth-result .bp-verify-card{ margin-top:.6rem; }
/* ========== 6) Motion safety (reduce animations if user prefers) ========== */
@media (prefers-reduced-motion: reduce){
#auth-form .search,
#verifyBtn,
#auth-count.stat-value,
.bp-verify-card{
transition: none !important;
animation: none !important;
}
}
/* ========== 7) Small-screen niceties ========== */
@media (max-width:600px){
#auth-form.code-card{ padding: 14px; }
.bp-verify-img{ width:100px; height:100px; }
#auth-count.stat-value{ font-size: 28px; }
}
/* Ensure danger stays red even if .btn override present later */
.btn.btn-danger{ background:#b12a2a; border-color:#b12a2a; color:#fff; }
/* =========================================================
AUTH OK → Product-detail layout (CSS-only, no HTML change)
Works with: .bp-verify-card.bp-verify--ok, .bp-verify-img, .bp-verify-meta
Paste at end of your CSS.
========================================================= */
/* clean, page-like container */
.bp-verify-card.bp-verify--ok{
background:#fff;
border:1px solid var(--line);
border-radius:18px;
box-shadow: var(--shadow);
padding: clamp(14px, 2.4vw, 20px);
}
/* small verified pill (top) */
.bp-verify-card.bp-verify--ok .bp-verify-badge.ok{
display:inline-flex; align-items:center; gap:.5rem;
padding:.35rem .65rem;
background:#e8fbef; color:#176b3f;
border:1px solid #b8efcc; border-radius:999px;
font-weight:800; font-size:.95rem;
}
/* hero text inside badge */
.bp-verify-card.bp-verify--ok .bp-verify-badge .bp-verify-hero{
font-weight:900;
letter-spacing:.2px;
}
/* desktop: make it a two-column product detail */
@media (min-width: 900px){
.bp-verify-card.bp-verify--ok .bp-verify-row{
display:grid;
grid-template-columns: minmax(300px, 520px) 1fr;
gap: clamp(14px, 2.2vw, 24px);
align-items: start;
}
}
/* image = framed product visual */
.bp-verify-card.bp-verify--ok .bp-verify-img{
width:100%;
height: 320px;
object-fit: contain;
background:#ffffff;
border:1px solid #e6eef8;
border-radius:14px;
padding:12px;
box-shadow: 0 10px 24px rgba(17,38,68,.10);
}
/* details panel (right side) */
.bp-verify-card.bp-verify--ok .bp-verify-meta{
font-size: 15px; line-height:1.6;
color: var(--fg);
}
/* rows with subtle separators */
.bp-verify-card.bp-verify--ok .bp-verify-meta > div{
padding:.42rem 0;
border-bottom:1px dashed #e9eff7;
}
.bp-verify-card.bp-verify--ok .bp-verify-meta > div:last-child{ border-bottom:none; }
/* labels (Product:, Batch:, Mfg:, Exp:) */
.bp-verify-card.bp-verify--ok .bp-verify-meta b{
display:inline-block;
min-width: 120px; /* aligns like a table */
color:#425a77;
}
/* make first row (Product) look like a title line */
.bp-verify-card.bp-verify--ok .bp-verify-meta > div:first-child{
font-size: clamp(1rem, 1.2vw, 1.15rem);
font-weight:800;
}
.bp-verify-card.bp-verify--ok .bp-verify-meta > div:first-child b{
color:#2a3b53;
opacity:.85;
}
/* spacing */
.bp-verify-card.bp-verify--ok .bp-verify-row{ margin-top:.6rem; }
/* ================= OPTIONAL (disable older glow/pulse effects) =================
Agar aap clean page-like look chahte ho, inhein uncomment kar do:
*/
/*
.bp-verify-card.bp-verify--ok .bp-glow,
.bp-verify-card.bp-verify--ok .bp-verify-pulse{ display:none !important; }
*/
/* ================= Motion-safety ================= */
@media (prefers-reduced-motion: reduce){
.bp-verify-card.bp-verify--ok *{ transition:none !important; animation:none !important; }
}
/* jab hum auth-result tak scroll karte hain, sticky header se clip na ho */
#auth-result, .bp-verify-card { scroll-margin-top: 100px; }
.auth-flash { animation: authFlash 1.2s ease-out 1; }
@keyframes authFlash{
0%{ box-shadow: 0 0 0 0 rgba(19,93,118,0); }
35%{ box-shadow: 0 0 0 6px rgba(19,93,118,.18); }
100%{ box-shadow: 0 0 0 0 rgba(19,93,118,0); }
}
.bp-sidebar .cat-head{ padding-right:12px; }
/* === Auth success image: faster + bigger zoom (override) === */
:root{
--bp-breathe-dur: 4.2s; /* smaller = faster */
--bp-breathe-scale: 1.045; /* bigger = more zoom */
--bp-breathe-shift: 3px; /* up/down float */
--bp-pop-overshoot: 1.10; /* entry pop peak */
}
.bp-verify-card.bp-verify--ok .bp-verify-img{
will-change: transform, filter;
transform-origin: 50% 50%;
animation:
bpVerifyPopFast .42s cubic-bezier(.2,.9,.2,1) 1,
bpVerifyBreatheFast var(--bp-breathe-dur) ease-in-out .42s infinite !important;
}
/* Entry pop: bigger & snappier */
@keyframes bpVerifyPopFast{
0% { transform: scale(.88); opacity: 0; filter: saturate(.9) brightness(.98); }
60% { transform: scale(var(--bp-pop-overshoot)); opacity: 1; filter: none; }
84% { transform: scale(1.02); }
100% { transform: scale(1); }
}
/* Breathe: faster loop + higher zoom + slight float */
@keyframes bpVerifyBreatheFast{
0% { transform: translateY(0) scale(1); }
25% { transform: translateY(calc(-1 * var(--bp-breathe-shift))) scale(var(--bp-breathe-scale)); }
50% { transform: translateY(0) scale(1.01); }
75% { transform: translateY(var(--bp-breathe-shift)) scale(var(--bp-breathe-scale)); }
100% { transform: translateY(0) scale(1); }
}
/* Mobile: thoda slow & slightly less zoom for comfort */
@media (max-width:600px){
:root{
--bp-breathe-dur: 5.2s;
--bp-breathe-scale: 1.038;
--bp-breathe-shift: 2px;
}
.bp-verify-card.bp-verify--ok .bp-verify-img{
animation:
bpVerifyPopFast .38s cubic-bezier(.2,.9,.2,1) 1,
bpVerifyBreatheFast var(--bp-breathe-dur) ease-in-out .38s infinite !important;
}
}
/* Motion safety */
@media (prefers-reduced-motion: reduce){
.bp-verify-card.bp-verify--ok .bp-verify-img{ animation: none !important; }
}
/* ===== Enhanced footer layout ===== */
.footer { border-top: 1px solid var(--line); padding: 1.6rem 0; margin-top: 2rem; }
.footer-grid{
display:grid;
grid-template-columns: 1.2fr 1fr 1fr;
gap: 1rem;
align-items: start;
margin-bottom: .8rem;
}
@media (max-width: 900px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .footer-grid{ grid-template-columns: 1fr; } }
.foot-title{
margin: 0 0 .4rem;
font-weight: 800;
font-size: 1.02rem;
color: #223b59;
}
.ft-nav { display:flex; flex-wrap:wrap; gap:.5rem; margin: .25rem 0 0; }
.ft-nav a{
color:#51617b; text-decoration:none;
padding:.3rem .55rem; border-radius:8px;
border:1px solid transparent;
}
.ft-nav a:hover{ background:#eef5ff; border-color: var(--line); }
.foot-list{ list-style:none; margin:.25rem 0 0; padding:0; display:grid; gap:.35rem; }
.foot-list li{
display:flex; align-items:center; gap:.5rem;
color: var(--fg);
}
.foot-list strong{ font-weight:700; color:#2a3b53; }
.foot-list a{ color:#135D76; text-decoration:none; }
.foot-list a:hover{ text-decoration:underline; }
.foot-ico{ display:inline-grid; place-items:center; width:22px; height:22px; color:#135D76; }
.foot-address{ font-style:normal; color:#425a77; line-height:1.5; }
.foot-address strong{ color:#ffffff; }
.foot-note{ border-top:1px dashed var(--line); padding-top:.8rem; }
.foot-note p{ margin:.35rem 0; }
/* Coming Soon card polish */
.comingsoon-card { border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); }
.cs-body { text-align:center; padding:1.2rem; }
.cs-eyebrow { text-transform:uppercase; letter-spacing:.08em; font-weight:800; color:#566b85; }
.cs-title { margin:.2rem 0 .25rem; font-weight:800; }
.cs-lead { font-size:1.05rem; margin:.25rem 0 .25rem; }
.cs-sub { color:#6b7f98; }
#contact-status .ok{background:#e8fbef;border:1px solid #b8efcc;color:#176b3f;border-radius:12px;padding:.75rem}
#contact-status .err{background:#fff2f2;border:1px solid #f5b5b5;color:#8a1f11;border-radius:12px;padding:.75rem}
.contact-form textarea{width:100%;resize:vertical;border:0;outline:0;background:#fff}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.bp-lens{position:relative;display:block;overflow:hidden;border-radius:8px}
.bp-lens-img{
display:block;max-width:100%;height:auto;
/* controls */
--lens-size: 180px; /* lens diameter */
--lens-zoom: 2.2; /* zoom power */
}
.bp-lens-glass{
position:absolute;left:0;top:0;
width:var(--lens-size);height:var(--lens-size);
border-radius:50%;
box-shadow:0 10px 28px rgba(0,0,0,.25),0 0 0 2px #135D76 inset;
background-repeat:no-repeat;background-size:cover;background-position:center;
pointer-events:none;z-index:2;display:none; /* hidden until hover/touch */
}
.bp-lens:hover .bp-lens-glass{display:block}
@media(hover:none){
/* On touch devices, show lens when touching */
.bp-lens.touching .bp-lens-glass{display:block}
}
.bp-alt-names, .bp-seo-only { display:none !important; }
/* 0) Ensure components read these tokens (buttons + badges) */
.btn-primary{ background:var(--primary); border-color:var(--primary); color:#fff }
.btn-danger{ background:var(--danger); border-color:var(--danger); color:#fff }
.badge-ok{ background:#e8fbef; border:1px solid #b8efcc; color:var(--ok,#176b3f); }
.badge-warn{ background:#fff2f2; border:1px solid #f5b5b5; color:var(--danger,#b12a2a); }
/* Optional: hero/sections using gradient from theme */
.theme-gradient{ background:linear-gradient(135deg, color-mix(in srgb, var(--primary) 88%, #fff 12%), var(--card2)); }
/* ===== Mobile full-bleed background video (no layout errors) ===== */
@media (max-width: 700px){
/* Edge-to-edge hero */
.bgvideo-hero{ padding:0; }
.bgvideo-wrap{
border-radius:0;
min-height: 70dvh; /* dynamic viewport height (iOS/Android) */
min-height: 70vh; /* fallback */
}
/* Video always covers, no letterboxing */
.bgvideo{
position:absolute; inset:0;
width:100%; height:35%;
object-fit: cover;
object-position: center center;
/* smooth GPU compositing on some mobiles */
transform: translateZ(0);
-webkit-transform: translateZ(0);
}
/* Content sits on top, bottom-aligned, readable */
.bgvideo-overlay{
position: relative; z-index:2;
min-height: 100dvh;
min-height: 100vh;
display: grid; align-items: end; /* push content to bottom */
text-align: left;
/* padding respects status bar / home indicator */
padding:
max(60px, env(safe-area-inset-top)) /* top (room under sticky header if needed) */
clamp(14px, 4vw, 22px) /* right */
max(24px, env(safe-area-inset-bottom)) /* bottom */
clamp(14px, 4vw, 22px); /* left */
/* legibility scrim that fades upward */
background:
linear-gradient(
to top,
rgba(0,0,0,.48) 0%,
rgba(0,0,0,.28) 28%,
rgba(0,0,0,0) 60%
);
color:#fbfdfe;
}
/* Keep your nice glass look but slightly stronger on video */
.hero-overlay-card{
background: rgba(0,0,0,.22);
border: 1px solid rgba(255,255,255,.18);
box-shadow: 0 16px 38px rgba(0,0,0,.28);
border-radius: 16px;
}
.hero-copy{ max-width: 820px; margin: 0 auto; }
.hero-copy .lead{ color:#f1f6ff; opacity:.96; }
/* Buttons/chips comfortable tap targets on phones */
.bgvideo-overlay .cta-row{ gap:.5rem; }
.bgvideo-overlay .cta-row .btn{ font-size:.85rem; }
.hero-pills{ margin-top:.15rem; gap:.4rem; }
.chip-ghost{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.24); }
/* Remove outer hero shadow on mobile to avoid glow edges */
.bgvideo-wrap{ box-shadow: none; }
/* Header stays above; hero won’t clip under it when scrolled */
.header{ z-index: 60; }
}
/* Optional: tiny polish so first screen looks perfect on very small phones */
@media (max-width: 360px){
.bp-welcome{ font-size: 1.05rem; }
.bgvideo-overlay .cta-row .btn{ padding:.55rem .7rem; }
}
.bgvideo-wrap::before,
.bgvideo-wrap::after{
content:"";
position:absolute; top:0; bottom:0;
width: max(32px, 6vw);
pointer-events:none;
z-index:1; /* above video, below overlay content */
background: linear-gradient(to right, rgba(0,0,0,.35), rgba(0,0,0,0));
}
.bgvideo-wrap::before{ left:0; }
.bgvideo-wrap::after{
right:0; transform: scaleX(-1); /* mirror gradient for right side */
}
/* ===========================================
THEME NAVY (navy + orange) — drop-in pack
Usage:
=========================================== */
.theme-navy{
/* Core palette */
--fg:#0b1324; /* base text (very dark navy) */
--muted:#5d6a86; /* secondary text */
--primary:#0f2a4a; /* NAVY (primary) */
--primary-600:#0c2240;
--primary-700:#081b34;
--accent:#f28c18; /* ORANGE (accent/CTA) */
--accent-600:#d97b14;
--accent-700:#b66610;
--accent-2:#ffd166; /* warm highlight */
--bg:#ffffff;
--card:#ffffff;
--card2:#f6f8fc;
--line:#e6ecf7;
--ok:#1d7a4a;
--danger:#be2e2e;
--shadow:0 16px 36px rgba(15,42,74,.10);
}
/* Header / Footer */
.theme-navy .header{
background:#fffffff2; border-bottom:1px solid var(--line);
box-shadow:0 8px 24px rgba(15,42,74,.06);
}
.theme-navy .footer{
background:#ffffff; border-top:1px solid var(--line);
}
/* Links (subtle underline on hover) */
.theme-navy a{
color: var(--primary);
text-decoration:none;
background-image:linear-gradient(currentColor,currentColor);
background-size:0% 2px; background-position:0 100%; background-repeat:no-repeat;
transition: background-size .22s ease, color .22s ease;
}
.theme-navy a:hover{ color: var(--primary-600); background-size:100% 2px; }
/* Buttons */
.theme-navy .btn-primary{
background: linear-gradient(135deg, var(--primary-700), var(--primary));
border-color: var(--primary-700); color:#fff;
box-shadow:0 12px 28px rgba(15,42,74,.18);
}
.theme-navy .btn-primary:hover{
transform:translateY(-1px);
background: linear-gradient(135deg, var(--primary-700), var(--primary-600));
box-shadow:0 18px 40px rgba(233, 237, 241, 0.24);
}
.theme-navy .btn-accent{
background: linear-gradient(135deg, var(--accent-700), var(--accent));
border-color: var(--accent-700); color:#1a1307;
text-shadow:0 1px 0 rgba(255,255,255,.35);
box-shadow:0 12px 28px rgba(242,140,24,.18);
}
.theme-navy .btn-ghost{
background:#fff; color:var(--primary);
border-color: color-mix(in srgb, var(--primary) 22%, #fff 78%);
}
.theme-navy .btn-ghost:hover{
background: color-mix(in srgb, var(--primary) 6%, #fff 94%);
border-color: color-mix(in srgb, var(--primary) 32%, #fff 68%);
}
/* Hero over video: navy scrim with orange accent glow at bottom */
/* .theme-navy .bgvideo-overlay{
background:
radial-gradient(40% 20% at 50% 100%, rgba(242,140,24,.22) 0%, rgba(242,140,24,0) 70%),
linear-gradient(to top, rgba(15,42,74,.55) 0%, rgba(15,42,74,.24) 28%, rgba(15,42,74,0) 60%); */
}
.theme-navy .hero-overlay-card{
background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06));
border:1px solid rgba(255,255,255,.25);
box-shadow:0 18px 40px rgba(11,19,36,.28);
color:#ffffff;
}
/* Chips / Pills */
.theme-navy .chip{ border:1px solid var(--line); color:var(--fg); }
.theme-navy .chip.is-active{ background:var(--primary); border-color:var(--primary); color:#fff; }
.theme-navy .chip-ghost{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22); color:#fff; }
.theme-navy .chip-ghost:hover{ background:rgba(255,255,255,.14); }
/* Cards */
.theme-navy .card{
background:var(--card); border:1px solid var(--line); border-radius:16px;
box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.theme-navy .card::before{
content:""; position:absolute; inset:0; padding:1px; border-radius:inherit;
background: linear-gradient(135deg, rgba(15,42,74,.18), rgba(242,140,24,.10));
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
/* Sections */
.theme-navy .section.alt{ background:var(--card2); }
/* Navbar links */
.theme-navy .nl{ color:#2b3b56; }
.theme-navy .nl:hover, .theme-navy .nl.active{
background: color-mix(in srgb, var(--primary) 8%, #fff 92%);
}
/* Inputs + focus ring */
.theme-navy .search{ border:1px solid var(--line); background:#fff; }
.theme-navy .search:focus-within{
border-color: var(--accent);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 24%, transparent);
background:#fff;
}
/* Alerts / badges */
.theme-navy .badge-ok{
background: color-mix(in srgb, var(--ok) 10%, #fff 90%);
border:1px solid color-mix(in srgb, var(--ok) 22%, #fff 78%);
color:#176b3f;
}
.theme-navy .badge-warn{
background: color-mix(in srgb, var(--danger) 10%, #fff 90%);
border:1px solid color-mix(in srgb, var(--danger) 22%, #fff 78%);
color:#8a1f11;
}
/* Small utilities (optional) */
.theme-navy .text-accent{ color:var(--accent); }
.theme-navy .badge-accent{
display:inline-block; padding:.18rem .5rem; border-radius:999px;
background: color-mix(in srgb, var(--accent) 16%, #fff 84%);
border:1px solid color-mix(in srgb, var(--accent) 28%, #fff 72%);
color:#7a4600; font-weight:800;
}
/* Motion polish (respects reduced motion) */
@media (prefers-reduced-motion: no-preference){
.theme-navy .btn, .theme-navy .card{
transition: transform .18s ease, box-shadow .25s ease, filter .25s ease;
}
.theme-navy .card:hover{ transform:translateY(-2px); box-shadow:0 18px 44px rgba(15,42,74,.16); }
}
/* ============================
THEME NAVY — Orange Mobile Menu Button
Works with your existing .nav-toggle (bars: .line / .line1/2/3)
============================ */
@media (max-width:900px){
.theme-navy .nav-toggle{
background: color-mix(in srgb, var(--accent) 18%, #fff 82%);
border-color: color-mix(in srgb, var(--accent) 32%, #fff 68%);
color: #7a4600; /* bar color (dark orange/brown) */
box-shadow: 0 10px 24px rgba(242,140,24,.18);
}
.theme-navy .nav-toggle:hover{
background: color-mix(in srgb, var(--accent) 26%, #fff 74%);
box-shadow: 0 14px 32px rgba(242,140,24,.26);
transform: translateY(-1px);
}
.theme-navy .nav-toggle:active{
transform: translateY(0);
filter: brightness(.98);
}
.theme-navy .nav-toggle:focus-visible{
outline: 2px dashed var(--accent);
outline-offset: 3px;
}
/* Bars inside the button (support both class patterns) */
.theme-navy .nav-toggle .line,
.theme-navy .nav-toggle .line1,
.theme-navy .nav-toggle .line2,
.theme-navy .nav-toggle .line3{
background: currentColor;
}
/* Open state (ARIA) — deeper orange + white bars for contrast */
.theme-navy .nav-toggle[aria-expanded="true"]{
background: var(--accent);
border-color: var(--accent-700);
color: #ffffff; /* bars turn white */
}
.theme-navy .nav-toggle[aria-expanded="true"]:hover{
background: var(--accent-600);
}
/* Backdrop tint to match orange vibe a bit warmer */
.theme-navy .nav-backdrop{
background: rgba(242,140,24,.28);
backdrop-filter: blur(2px);
}
}
/* (Optional) tiny bump: keep header slightly clearer so orange pops */
@media (max-width:900px){
.theme-navy .header{
background:#ffffffee;
border-bottom:1px solid var(--line);
}
}
/* =========================================
THEME NAVY — Orange Mobile Hamburger ('.line' spans)
Works with:
========================================= */
@media (max-width:900px){
.theme-navy .nav-toggle{
position: relative;
z-index: 1001;
width: 44px; height: 38px;
display: inline-flex; align-items:center; justify-content:center;
background: color-mix(in srgb, var(--accent) 18%, #fff 82%);
border: 1px solid color-mix(in srgb, var(--accent) 32%, #fff 68%);
border-radius: 10px;
color: #7a4600; /* bar color via currentColor */
box-shadow: 0 10px 24px rgba(242,140,24,.18);
-webkit-tap-highlight-color: transparent;
transition: background .25s, box-shadow .25s, border-color .25s, transform .15s;
}
.theme-navy .nav-toggle:hover{
background: color-mix(in srgb, var(--accent) 26%, #fff 74%);
box-shadow: 0 14px 32px rgba(242,140,24,.26);
transform: translateY(-1px);
}
.theme-navy .nav-toggle:active{ transform: translateY(0); filter: brightness(.98); }
.theme-navy .nav-toggle:focus-visible{ outline: 2px dashed var(--accent); outline-offset: 3px; }
/* Bars */
.theme-navy .nav-toggle .line{
display:block;
width:22px; height:2px;
background: currentColor;
border-radius: 2px;
transition: transform .35s ease, opacity .25s ease, width .35s ease;
}
.theme-navy .nav-toggle .line + .line{ margin-top:5px; }
.theme-navy .nav-toggle .line:nth-child(2){ width:19px; } /* subtle middle shorter */
/* OPEN (X) state using ARIA */
.theme-navy .nav-toggle[aria-expanded="true"]{
background: var(--accent);
border-color: var(--accent-700);
color:#fff; /* bars turn white */
}
.theme-navy .nav-toggle[aria-expanded="true"] .line:nth-child(1){
transform: translateY(7px) rotate(45deg);
}
.theme-navy .nav-toggle[aria-expanded="true"] .line:nth-child(2){
opacity: 0; transform: scaleX(0);
}
.theme-navy .nav-toggle[aria-expanded="true"] .line:nth-child(3){
transform: translateY(-7px) rotate(-45deg);
}
/* Backdrop tint to match orange vibe (if you use .nav-backdrop) */
.theme-navy .nav-backdrop{
background: rgba(242,140,24,.28);
backdrop-filter: blur(2px);
}
/* keep header above video/content so button is always tappable */
.theme-navy .header{ z-index: 60; background:#ffffffee; border-bottom:1px solid var(--line); }
}
/* =========================================================
THEME NAVY — SITE-WIDE POLISH (drop-in, no HTML changes)
Requires:
========================================================= */
.theme-navy{
/* Core palette (from earlier, kept here for safety) */
--fg:#0b1324; --muted:#5d6a86;
--primary:#0f2a4a; --primary-600:#0c2240; --primary-700:#081b34;
--accent:#f28c18; --accent-600:#d97b14; --accent-700:#b66610; --accent-2:#ffd166;
--bg:#ffffff; --card:#ffffff; --card2:#f6f8fc; --line:#e6ecf7;
--ok:#1d7a4a; --danger:#be2e2e;
--shadow:0 16px 36px rgba(15,42,74,.10);
}
/* ===== Header / Navbar ===== */
.theme-navy .header{
background:#fffffff2; border-bottom:1px solid var(--line);
box-shadow:0 8px 20px rgba(15,42,74,.06);
}
.theme-navy .nl{ color:#2b3b56; border-radius:10px; }
.theme-navy .nl:hover,
.theme-navy .nl.active{
background: color-mix(in srgb, var(--primary) 8%, #fff 92%);
color: var(--primary-700);
}
/* ===== Global links (subtle underline on hover) ===== */
.theme-navy a{
color: white;
text-decoration:none;
background-image: linear-gradient(currentColor,currentColor);
background-size: 0% 2px; background-position: 0 100%; background-repeat:no-repeat;
transition: background-size .22s ease, color .22s ease;
}
.theme-navy a:hover{ color: var(--primary-600); background-size: 100% 2px; }
/* ===== Buttons ===== */
.theme-navy .btn{
position:relative; overflow:hidden; font-weight:700;
box-shadow:0 8px 20px rgba(15,42,74,.10);
transition: transform .18s ease, box-shadow .25s ease, filter .25s ease;
}
.theme-navy .btn:hover{ transform:translateY(-1px); box-shadow:0 14px 32px rgba(207, 213, 220, 0.16); }
.theme-navy .btn:active{ transform:none; }
.theme-navy .btn-primary{
background: linear-gradient(135deg, var(--primary-700), var(--primary));
border-color: var(--primary-700); color:#fff;
}
.theme-navy .btn-primary:hover{
background: linear-gradient(135deg, var(--primary-700), var(--primary-600));
}
.theme-navy .btn-accent{
background: linear-gradient(135deg, var(--accent-700), var(--accent));
border-color: var(--accent-700); color:#1a1307; text-shadow:0 1px 0 rgba(255,255,255,.35);
}
.theme-navy .btn-ghost{
background:#fff; color:var(--primary);
border-color: color-mix(in srgb, var(--primary) 22%, #fff 78%);
}
.theme-navy .btn-ghost:hover{
background: color-mix(in srgb, var(--primary) 6%, #fff 94%);
border-color: color-mix(in srgb, var(--primary) 32%, #fff 68%);
}
/* ===== Chips / Pills ===== */
.theme-navy .chip{ border:1px solid var(--line); color:var(--fg); box-shadow:var(--shadow); }
.theme-navy .chip.is-active{ background:var(--primary); border-color:var(--primary); color:#fff; }
.theme-navy .chip-ghost{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.22); color:#fff; }
.theme-navy .chip-ghost:hover{ background:rgba(255,255,255,.14); }
/* ===== Cards / Sections ===== */
.theme-navy .card{
background:var(--card); border:1px solid var(--line);
border-radius:16px; box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.theme-navy .card::before{
content:""; position:absolute; inset:0; padding:1px; border-radius:inherit;
background: linear-gradient(135deg, rgba(15,42,74,.18), rgba(242,140,24,.10));
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none;
}
.theme-navy .section.alt{ background:var(--card2); }
/* ===== Hero overlay on video ===== */
.theme-navy .bgvideo-overlay{
background:
radial-gradient(40% 20% at 50% 100%, rgba(242,140,24,.22) 0%, rgba(242,140,24,0) 70%),
linear-gradient(to top, rgba(15,42,74,.55) 0%, rgba(15,42,74,.24) 28%, rgba(15,42,74,0) 60%);
}
.theme-navy .hero-overlay-card{
background: linear-gradient(180deg, rgba(163, 180, 189, 0.1), rgba(255,255,255,.06));
border:1px solid rgba(255,255,255,.25);
box-shadow:0 18px 40px rgba(11,19,36,.28);
color:#030e2f;
}
/* ===== Sidebar (left catalog) ===== */
.theme-navy .bp-sidebar .sidebar-card{
background:#fff; border:1px solid var(--line); box-shadow:var(--shadow);
}
.theme-navy .bp-sidebar .side-link{
color:#0b1324; border:1px solid transparent;
}
.theme-navy .bp-sidebar .side-link:hover,
.theme-navy .bp-sidebar .side-link:focus-visible{
background:linear-gradient(180deg,#f8fbff,#eef4ff);
box-shadow:0 10px 24px rgba(15,42,74,.10);
}
.theme-navy .bp-sidebar .side-link::before{ background:var(--accent); }
.theme-navy .bp-sidebar .side-link.is-active{
background:#fff7ec; border-color: color-mix(in srgb, var(--accent) 28%, #fff 72%);
}
/* ===== Product grid / cards ===== */
.theme-navy .prod-img{ background:#fff; }
.theme-navy .card.product{
transition: transform .18s ease, box-shadow .25s ease, border-color .25s ease;
}
.theme-navy .card.product:hover{
transform: translateY(-2px);
box-shadow: 0 16px 36px rgba(15,42,74,.14);
border-color: color-mix(in srgb, var(--primary) 18%, var(--line) 82%);
}
.theme-navy .product .title{ color:#0b1324; }
.theme-navy .product .meta{ color:#5d6a86; }
.theme-navy .product .badge-accent{
display:inline-block; padding:.18rem .5rem; border-radius:999px;
background: color-mix(in srgb, var(--accent) 16%, #fff 84%);
border:1px solid color-mix(in srgb, var(--accent) 28%, #fff 72%);
color:#7a4600; font-weight:800;
}
/* ===== Slider (horizontal scroller) ===== */
.theme-navy .slider{ border:1px solid var(--line); background:#fff; box-shadow:var(--shadow); }
.theme-navy .slider-item{ border:1px solid var(--line); box-shadow:var(--shadow); }
.theme-navy .slider-item .title{ color:#0b1324; }
/* ===== Forms / Inputs / Search ===== */
.theme-navy .search{
background:#fff; border:1px solid var(--line); border-radius:999px;
transition: box-shadow .22s, border-color .22s, background-color .22s;
}
.theme-navy .search:focus-within{
border-color: var(--accent);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 24%, transparent);
background:#fff;
}
.theme-navy input, .theme-navy select, .theme-navy textarea{
border-color: var(--line);
}
.theme-navy input:focus, .theme-navy select:focus, .theme-navy textarea:focus{
outline: none;
border-color: var(--primary);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}
/* Auth form card (verify page) */
.theme-navy #auth-form.code-card{
background: linear-gradient(180deg,#ffffff,#f9fbff);
border:1px solid var(--line); border-radius:18px; box-shadow:0 18px 40px rgba(15,42,74,.10);
}
.theme-navy #verifyBtn{
background: linear-gradient(135deg, var(--primary), var(--accent) 60%);
box-shadow: 0 14px 34px rgba(15,42,74,.18), inset 0 1px 0 rgba(255,255,255,.18);
}
/* Verify result badges */
.theme-navy .bp-verify--ok{ background:#e8fbef; border-color:#b8efcc; color:#176b3f; }
.theme-navy .bp-verify--fail{ background:#fff2f2; border-color:#f5b5b5; color:#8a1f11; }
/* ===== Tables (admin or product lists) ===== */
.theme-navy .table{ border-collapse:collapse; width:100%; }
.theme-navy .table th, .theme-navy .table td{
border-bottom:1px solid var(--line); padding:10px; color:var(--fg);
}
.theme-navy .table th{
background: color-mix(in srgb, var(--primary) 6%, #fff 94%);
color:#0b1324; font-weight:800;
}
/* ===== Alerts / badges ===== */
.theme-navy .alert{ background:#fff7ec; border:1px solid color-mix(in srgb, var(--accent) 30%, #fff 70%); }
.theme-navy .badge-ok{
background: color-mix(in srgb, var(--ok) 10%, #fff 90%);
border:1px solid color-mix(in srgb, var(--ok) 22%, #fff 78%);
color:#176b3f;
}
.theme-navy .badge-warn{
background: color-mix(in srgb, var(--danger) 10%, #fff 90%);
border:1px solid color-mix(in srgb, var(--danger) 22%, #fff 78%);
color:#8a1f11;
}
/* ===== Footer polish ===== */
.theme-navy .footer{
background:#ffffff;
border-top:1px solid var(--line);
}
.theme-navy .foot-title{ color:#223b59; }
.theme-navy .foot-address{ color:#425a77; }
/* ===== Small accessibility touches ===== */
.theme-navy .btn:focus-visible,
.theme-navy a:focus-visible,
.theme-navy .side-link:focus-visible{
outline: 2px dashed var(--accent);
outline-offset: 3px;
}
.theme-navy ::selection{ background: color-mix(in srgb, var(--accent) 30%, #fff 70%); }
/* ===== Mobile niceties ===== */
@media (max-width:900px){
.theme-navy .hero-copy .lead{ color:#f1f7ff; }
.theme-navy .bgvideo-wrap{ box-shadow:none; }
/* Orange hamburger from earlier remains active */
}
/* ===== Optional: active states for quick category buttons ===== */
.theme-navy .cat-pills .chip:is(:hover,:focus-visible){ border-color: var(--accent); }
/* ===== Optional: breadcrumb / minor text accents ===== */
.theme-navy .text-accent{ color: var(--accent); }
/* ===== Optional: Coming Soon card ===== */
.theme-navy .comingsoon-card{ background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); }
.theme-navy .cs-eyebrow{ color:#566b85; }
.theme-navy .cs-title{ color:#0b1324; }
.theme-navy .cs-sub{ color:#6b7f98; }
/* === Mobile: fix left-edge cut for logos (no size change) === */
@media (max-width: 900px){
/* container/hdr ko safe padding do (includes iOS notch) */
.header .container,
.hdr{
padding-left: max(16px, env(safe-area-inset-left));
padding-right: max(16px, env(safe-area-inset-right));
}
/* brand ko slight internal cushion, overflow kabhi left se na ho */
.brand{
display:flex; align-items:center; gap:.6rem;
margin-left: 0; /* ensure no negative margin */
padding-left: clamp(2px, 1vw, 6px); /* tiny inner breathing */
min-width: 0; /* safe flex behavior */
overflow: visible; /* don't clip images */
}
/* EXACT SAME SIZES — no shrink on mobile */
.brand .logo{ height:70px; width:auto; flex:0 0 auto; }
.brand .wordmark{ height:40px; width:auto; flex:0 0 auto; }
/* images baseline gap hatane ke liye */
.brand img{ display:block; max-width:none; }
/* hamburger apni jagah rakhe, overlap na kare */
.nav-toggle{ flex:0 0 auto; margin-left:.6rem; }
}
/* =========================================
THEME NAVY — Mobile Hamburger (navy + pill bars)
Markup stays:
========================================= */
@media (max-width:900px){
.theme-navy .nav-toggle{
position:relative; z-index:1001;
width:44px; height:38px;
display:inline-flex; align-items:center; justify-content:center;
background: var(--primary); /* NAVY button */
border:1px solid var(--primary-700);
border-radius:12px;
box-shadow: 0 10px 24px rgba(15,42,74,.20), inset 0 1px 0 rgba(255,255,255,.08);
-webkit-tap-highlight-color:transparent;
transition: background .25s, box-shadow .25s, transform .15s, border-color .25s;
}
.theme-navy .nav-toggle:hover{
background: var(--primary-600);
box-shadow: 0 14px 32px rgba(15,42,74,.26);
transform: translateY(-1px);
}
.theme-navy .nav-toggle:active{ transform:none; filter:brightness(.98); }
.theme-navy .nav-toggle:focus-visible{ outline:2px dashed var(--accent); outline-offset:3px; }
/* --- Pill bars (clean button look) --- */
.theme-navy .nav-toggle .line{
display:block;
width:22px; height:3px; /* pill thickness */
background:#ffffff; /* white bars on navy */
border-radius:999px;
box-shadow: inset 0 -1px 0 rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.28);
transition: transform .35s ease, opacity .25s ease, width .35s ease;
}
.theme-navy .nav-toggle .line + .line{ margin-top:6px; }
/* (Optional aesthetic: stepped widths. uncomment if you like)
.theme-navy .nav-toggle .line:nth-child(1){ width:22px; }
.theme-navy .nav-toggle .line:nth-child(2){ width:18px; }
.theme-navy .nav-toggle .line:nth-child(3){ width:14px; }
*/
/* --- OPEN (X) state via ARIA --- */
.theme-navy .nav-toggle[aria-expanded="true"]{
background: var(--primary-700);
border-color: var(--primary-700);
}
.theme-navy .nav-toggle[aria-expanded="true"] .line:nth-child(1){
transform: translateY(9px) rotate(45deg);
}
.theme-navy .nav-toggle[aria-expanded="true"] .line:nth-child(2){
opacity:0; transform: scaleX(0);
}
.theme-navy .nav-toggle[aria-expanded="true"] .line:nth-child(3){
transform: translateY(-9px) rotate(-45deg);
}
/* Backdrop tint: cool navy (no orange) */
.theme-navy .nav-backdrop{
background: rgba(15,42,74,.35);
backdrop-filter: blur(2px);
}
}
/* ===== Fix: Primary button text stays white on hover/active (theme-navy) ===== */
.theme-navy .btn-primary,
.theme-navy .btn-primary:hover,
.theme-navy .btn-primary:active,
.theme-navy .btn-primary:focus {
color: #fff !important; /* lock white text */
text-shadow: 0 1px 0 rgba(0,0,0,.25); /* subtle stroke for contrast */
}
/* remove global hover darkening specifically for primary */
.theme-navy .btn-primary:hover,
.theme-navy .btn-primary:active {
filter: none !important; /* don't dim whole button (affects text) */
}
/* keep your nice hover background + lift without changing text */
.theme-navy .btn-primary:hover{
background: linear-gradient(135deg, var(--primary-700), var(--primary-600)) !important;
box-shadow: 0 18px 40px rgba(15,42,74,.24);
transform: translateY(-1px);
}
/* focus ring stays visible & clean */
.theme-navy .btn-primary:focus-visible{
outline: 2px dashed var(--accent);
outline-offset: 3px;
}
/* (optional) ensure inner icons also stay white */
.theme-navy .btn-primary svg,
.theme-navy .btn-primary .icon{
fill: currentColor; color:#fff;
}
/* ===== THEME NAVY: details button text stays white ===== */
.theme-navy .details-btn,
.theme-navy .details-btn:hover,
.theme-navy .details-btn:active,
.theme-navy .details-btn:focus {
color: #fff !important; /* lock white text */
text-shadow: 0 1px 0 rgba(0,0,0,.25); /* tiny contrast edge */
filter: none !important; /* stop any global dimming */
}
/* (optional) smoother hover if bg is navy */
.theme-navy .details-btn:hover{
/* keep your existing background; if it's navy, you can use: */
/* background: linear-gradient(135deg, var(--primary-700), var(--primary-600)) !important; */
transform: translateY(-1px);
box-shadow: 0 16px 34px rgba(15,42,74,.24);
}
/* ensure inner icons/spans stay white too */
.theme-navy .details-btn *{
color:#fff !important;
fill: currentColor !important;
}
/* ================================
THEME NAVY — Dark Footer (navy bg + white content)
================================ */
.theme-navy .footer{
background: var(--primary) !important; /* navy */
color: #fff !important;
border-top: 1px solid rgba(255,255,255,.18) !important;
}
/* Headings & text */
.theme-navy .footer .foot-title{ color:#fff !important; }
.theme-navy .footer .foot-address,
.theme-navy .footer .foot-list strong,
.theme-navy .footer .tiny,
.theme-navy .footer .foot-note,
.theme-navy .footer p{ color:#fff !important; opacity: .95; }
/* Links (Quick links + emails) */
.theme-navy .footer a,
.theme-navy .footer a:link,
.theme-navy .footer a:visited{
color:#fff !important;
text-decoration:none;
}
.theme-navy .footer a:hover,
.theme-navy .footer a:focus{
color:#fff !important;
text-decoration: underline; /* clear affordance on dark bg */
text-underline-offset: 2px;
}
/* Quick links chips/pills */
.theme-navy .footer .ft-nav a{
background: transparent !important;
border: 1px solid rgba(255,255,255,.22) !important;
border-radius: 8px;
color:#fff !important;
}
.theme-navy .footer .ft-nav a:hover{
background: rgba(255,255,255,.08) !important;
border-color: rgba(255,255,255,.32) !important;
}
/* Icons (SVG use currentColor → white here) */
.theme-navy .footer .foot-ico{ color:#fff !important; }
/* Divider in note */
.theme-navy .footer .foot-note{ border-top: 1px dashed rgba(255,255,255,.28) !important; }
/* Accessible focus ring (orange accent pops on navy) */
.theme-navy .footer a:focus-visible{
outline: 2px dashed #f28c18; /* your accent orange */
outline-offset: 3px;
}
/* Ensure cards inside footer (if any) don't stay light */
.theme-navy .footer .card{
background: rgba(255,255,255,.04) !important;
border: 1px solid rgba(255,255,255,.18) !important;
color:#fff !important;
}
/* ================================
THEME NAVY — Make the section (that contains #contact-status)
dark navy with white content (no HTML change)
================================ */
/* 1) Section background + base text */
.theme-navy .section:has(#contact-status){
background: var(--primary) !important; /* navy */
color: #fff !important;
padding-top: 1.2rem; padding-bottom: 1.2rem; /* keep spacing nice */
}
/* 2) All links (including emails) inside turn white and visible */
.theme-navy .section:has(#contact-status) a,
.theme-navy .section:has(#contact-status) a:link,
.theme-navy .section:has(#contact-status) a:visited{
color:#fff !important;
text-decoration: none;
}
.theme-navy .section:has(#contact-status) a:hover,
.theme-navy .section:has(#contact-status) a:focus{
color:#fff !important;
text-decoration: underline;
text-underline-offset: 2px;
}
/* 3) Cards inside this section: dark surfaces */
.theme-navy .section:has(#contact-status) .card{
background: rgba(255,255,255,.04) !important;
border: 1px solid rgba(255,255,255,.18) !important;
color:#fff !important;
box-shadow: 0 14px 34px rgba(0,0,0,.18);
}
/* 4) Headings stay bright */
.theme-navy .section:has(#contact-status) .card-title,
.theme-navy .section:has(#contact-status) .foot-title{
color:#fff !important;
}
/* 5) Ghost button readable on dark */
.theme-navy .section:has(#contact-status) .btn-ghost{
background: transparent !important;
border:1px solid rgba(255,255,255,.32) !important;
color:#fff !important;
}
.theme-navy .section:has(#contact-status) .btn-ghost:hover{
background: rgba(255,255,255,.10) !important;
border-color: rgba(255,255,255,.42) !important;
}
/* 6) Icons use currentColor → white here */
.theme-navy .section:has(#contact-status) svg{
color:#fff !important;
stroke: currentColor;
}
/* 7) Accessible focus ring (orange pops on navy) */
.theme-navy .section:has(#contact-status) a:focus-visible,
.theme-navy .section:has(#contact-status) .btn:focus-visible{
outline: 2px dashed #f28c18;
outline-offset: 3px;
}
/* ================================
PRODUCTS PAGE — Uniform card heights + bottom-aligned CTAs
(No HTML change)
================================ */
/* 0) Grid items stretch properly */
.grid-3 > * { align-self: stretch; }
/* 1) Product cards that contain .prod-img → flex column */
.card:has(.prod-img){
display: flex;
flex-direction: column;
height: 100%; /* fill the grid cell */
}
/* 2) Image area stays consistent (already has aspect ratio; ensure block) */
.prod-img{
display:block;
width:100%;
aspect-ratio: 4 / 3; /* already set — keep it */
object-fit: contain;
}
/* 3) Body = flex column so we can push CTAs to bottom */
.card:has(.prod-img) .card-body{
display: flex;
flex-direction: column;
gap: .45rem; /* tidy spacing */
flex: 1 1 auto; /* grow to fill */
}
/* 4) Title: clamp to 2 lines + fixed min-height so rows stay aligned */
.card:has(.prod-img) .card-title{
display: -webkit-box;
-webkit-line-clamp: 2; /* show max 2 lines */
-webkit-box-orient: vertical;
overflow: hidden;
line-height: 1.25;
min-height: calc(1.25em * 2); /* reserve space for two lines */
margin: .15rem 0 .2rem;
font-weight: 800;
}
/* 5) Meta line (e.g., Strength / Category) → single-line clamp + reserve height */
.card:has(.prod-img) .card-meta{
color: var(--muted);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-height: 1.2em; /* keeps row height consistent */
}
/* 6) CTAs row (usually last .row in card-body) sticks to bottom */
.card:has(.prod-img) .card-body .row:last-child{
margin-top: auto; /* pushes buttons down */
display: flex;
gap: .45rem;
flex-wrap: wrap;
}
/* 7) Safety: ensure the whole card can’t overflow its cell */
.card:has(.prod-img){
overflow: hidden;
border-radius: 16px;
}
/* ====== Slider items (if you use product slider) ====== */
.slider-item{
display: flex;
flex-direction: column;
height: 100%;
}
.slider-item .body{
display:flex; flex-direction:column; gap:.35rem; flex:1 1 auto;
}
.slider-item .title{
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
overflow:hidden; line-height:1.22;
min-height: calc(1.22em * 2);
}
.slider-item .meta{ min-height: 1.1em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.slider-item .row{ margin-top:auto; display:flex; gap:.4rem; flex-wrap:wrap; }