/* ========================================================== AsMediaHub (/blog) — Design tokens Palette matched to main site asmediahub.net accent #5846f9 | headings #2c4964 | light surfaces Layout, fonts and structure unchanged — colours only. ========================================================== */ /* Fonts are loaded from — see includes/header.php */ :root{ --bg:#ffffff; --surface:#ffffff; --surface-2:#f9f8ff; /* main site .light-background */ --border:#e4e1f5; --text:#444444; /* main site --default-color */ --heading:#2c4964; /* main site --heading-color */ --muted:#6b7a8d; --accent:#5846f9; /* main site --accent-color */ --accent-2:#2c4964; --on-accent:#ffffff; /* text on accent fills */ --success:#1f9d6b; --danger:#e03131; --shadow:0 4px 18px rgba(44,73,100,0.08); --radius:10px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{ background:var(--bg); color:var(--text); font-family:'Inter',system-ui,sans-serif; line-height:1.55; -webkit-font-smoothing:antialiased; } h1,h2,h3,h4{ color:var(--heading); font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:-0.01em; line-height:1.15; } a{color:inherit;text-decoration:none} img{max-width:100%;display:block} .container{max-width:1180px;margin:0 auto;padding:0 20px} .mono{font-family:'JetBrains Mono',monospace} /* ---------- Signal bars signature ---------- */ .signal{ display:inline-flex; align-items:flex-end; gap:3px; height:14px; margin-right:8px; } .signal span{ width:4px; background:var(--accent-2); border-radius:1px; display:block; } .signal span:nth-child(1){height:35%} .signal span:nth-child(2){height:60%} .signal span:nth-child(3){height:80%} .signal span:nth-child(4){height:100%} /* ---------- Header ---------- */ .site-header{ position:sticky;top:0;z-index:50; background:rgba(255,255,255,0.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--border); } .header-inner{display:flex;align-items:center;justify-content:space-between;height:68px;gap:24px} .logo{display:flex;align-items:center;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:1.3rem} .logo-mark{ background:var(--accent); color:var(--on-accent); padding:4px 9px; border-radius:6px; margin-right:6px; font-weight:700; } .main-nav{display:flex;gap:28px} .main-nav a{color:var(--muted);font-weight:500;font-size:0.95rem;transition:color .15s} .main-nav a:hover{color:var(--text)} .header-actions{display:flex;align-items:center;gap:18px} .cart-link{ display:flex;align-items:center;gap:6px; font-weight:600;font-size:0.9rem; border:1px solid var(--border);padding:8px 14px;border-radius:999px; } .cart-count{ background:var(--accent);color:var(--on-accent); font-family:'JetBrains Mono',monospace; font-size:0.75rem;font-weight:700; padding:1px 7px;border-radius:999px; } .nav-toggle{display:none;background:none;border:0;color:var(--text);font-size:1.4rem} /* ---------- Currency switcher ---------- */ .cur-switch{display:flex;border:1px solid var(--border);border-radius:999px;overflow:hidden} .cur-switch a{ padding:6px 11px;font-size:0.75rem;font-weight:600; color:var(--muted);font-family:'JetBrains Mono',monospace; transition:background .15s,color .15s; } .cur-switch a:hover{color:var(--text)} .cur-switch a.active{background:var(--accent);color:var(--on-accent)} /* ---------- Hero ---------- */ .hero{ padding:76px 0 64px; border-bottom:1px solid var(--border); position:relative; overflow:hidden; } .hero::before{ content:""; position:absolute;top:-120px;right:-120px; width:420px;height:420px;border-radius:50%; background:radial-gradient(circle, rgba(88,70,249,0.10), transparent 70%); } .hero-inner{max-width:640px;position:relative} .eyebrow{ display:inline-flex;align-items:center; font-family:'JetBrains Mono',monospace; font-size:0.78rem;color:var(--accent-2); text-transform:uppercase;letter-spacing:.08em; margin-bottom:18px; } .hero h1{font-size:2.6rem;margin-bottom:18px} .hero h1 .hl{color:var(--accent)} .hero p{color:var(--muted);font-size:1.08rem;margin-bottom:30px;max-width:520px} .btn{ display:inline-block; padding:13px 26px; border-radius:999px; font-weight:600; font-size:0.95rem; border:0; /*