/* wistrade-modern-override.css Aggressive modern overrides to neutralize legacy gradients/spacing and nav sizing. Place AFTER your old css/wistrade.css in . */ /* ===== Base tokens ===== */ :root{ --bg:#d8ccb8; --panel:#fff; --panel-2:#f6f2ea; --text:#0f141b; --muted:#485768; --header:#989898; --accent:#ff8040; --accent-2:#ffcc00; --border:rgba(0,0,0,.12); --shadow:0 10px 24px rgba(0,0,0,.12); } /* ===== Hard resets to kill old gradients and oversized fonts ===== */ html,body{height:100%} body{ background:var(--bg) !important; color:var(--text) !important; font:16px/1.65 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial !important; margin:0 !important; } header, section, main, footer{background:transparent !important; border:0 !important;} /* clear any background-image/gradient set in older CSS */ header, section, main, .hero, .container, body{ background-image:none !important; } /* ===== Container ===== */ .container{max-width:1120px; margin:0 auto; padding:20px} /* ===== Header + Brand ===== */ .site-header{background:var(--header) !important; position:sticky; top:0; z-index:50; border-bottom:1px solid var(--border)} .topbar{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px 20px} .brand{display:flex; align-items:center; gap:12px; color:#fff; text-decoration:none} .brand img{height:34px !important; width:auto !important} .brand strong{font-size:18px; line-height:1} .tagline{font-size:12px; opacity:.9} /* ===== Nav (force horizontal, compact) ===== */ nav.primary{display:flex !important; align-items:center; justify-content:flex-end} nav.primary .nav-list{display:flex !important; flex-wrap:wrap; gap:6px 10px; list-style:none; margin:0; padding:0} nav.primary .nav-list li{margin:0 !important; padding:0 !important} nav.primary .nav-list a{ display:inline-flex; align-items:center; white-space:nowrap; padding:6px 10px !important; border-radius:8px; color:#fff !important; text-decoration:none; font-weight:700; font-size:15px !important; background:transparent !important; border:0 !important; } nav.primary .nav-list a:hover{background:rgba(255,255,255,.12) !important} @media (max-width:980px){ nav.primary .nav-list a{font-size:14px !important; padding:6px 8px !important} } /* ===== Hero ===== */ .hero{padding:22px 0 8px} .hero-inner{display:grid; grid-template-columns:1.1fr .9fr; gap:16px; align-items:center} .hero h1{font-size:clamp(22px,3.2vw,34px) !important; line-height:1.2; margin:6px 0 8px; font-weight:800} .lead{max-width:70ch; color:var(--muted) !important} .tag{display:inline-flex; gap:8px; align-items:center; font-size:13px; color:var(--muted); padding:6px 10px; border-radius:999px; background:var(--panel); border:1px solid var(--border)} .arch{background:var(--panel); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow); padding:10px} @media (max-width:920px){ .hero-inner{grid-template-columns:1fr}} /* ===== Sections ===== */ .section{padding:18px 0} .section h2{font-size:clamp(20px,2.4vw,26px); margin:0 0 10px} /* ===== Responsive video ===== */ .embed{position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:12px; overflow:hidden; border:1px solid var(--border)} .embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block} /* ===== Cards & lists ===== */ .grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(260px,1fr))} .card{background:var(--panel); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow); overflow:hidden} .card .body{padding:12px 14px} .card h3{margin:.2rem 0 .5rem} .card p{margin:0; color:var(--muted)} .link-list{list-style:none; padding-left:0; margin:0} .link-list li{margin:6px 0} /* ===== Footer ===== */ .site-footer{color:var(--muted); padding:18px 0 28px; border-top:1px solid var(--border); font-size:14px} /* ===== Safety: neutralize any W3/legacy classes that inject heavy colors ===== */ .w3-black, .w3-dark-grey, .w3-grey, .w3-dark-gray, .w3-gray{ background: transparent !important; color: inherit !important; } .w3-container, .w3-padding-64{padding:0 !important}