/* ========================================================= 420 Plugins — Global Styles Tokens • Base • Header • Footer • Buttons • Utilities ========================================================= */ /* ---------------- Design Tokens ---------------- */ :root{ --bg:#0c0f11; --text:#EEF2F5; --muted:#A7B0B7; --brand:#b14fff; --brand-2:#7d2cf2; /* violet duo */ --price:#2EE870; /* green */ --surface-1:#121217; /* cards/drawers */ --surface-2:#0e0f14; --border-1:rgba(255,255,255,0.08); --border-2:#2a2f34; --danger:#ff5c7a; --radius:16px; --shadow:0 18px 50px rgba(0,0,0,.45); --logo-size:120px; --container-max:1150px; } /* ------------- Base / Reset ------------- */ *{ box-sizing:border-box } html,body{ margin:0; padding:0; background:var(--bg); color:var(--text); font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji"; } img{ max-width:100%; height:auto; display:block } a{ color:inherit; text-decoration:none } .container{ width:min(var(--container-max),92vw); margin-inline:auto } /* ------------- Buttons / Pills ------------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; padding:1rem 1.25rem; border-radius:calc(var(--radius) - 4px); background:var(--brand); color:#fff; font-weight:800; box-shadow:0 0 0 0 rgba(177,79,255,.16); transition:.2s transform,.25s box-shadow,.2s background; text-decoration:none !important; } .btn:hover{ transform:translateY(-1px); box-shadow:0 14px 34px rgba(125,44,242,.30) } .btn.ghost{ background:transparent; border:1px solid var(--brand); color:var(--brand) } .btn.ghost:hover{ background:var(--brand); color:#fff } /* Price pill (only on home) */ .brand-pill{ margin:0; padding:.35rem .7rem; border-radius:999px; font-size:.9rem; font-weight:800; color:var(--price); background:color-mix(in srgb, var(--price) 16%, transparent); border:1px solid color-mix(in srgb, var(--price) 45%, transparent); } body:not(.home) .brand-pill{ display:none !important; } /* ------- Header ------- */ .header{ position:sticky; top:0; z-index:100; isolation:isolate; backdrop-filter:saturate(120%) blur(10px) } .header::before{ content:""; position:absolute; inset:-10px 0 0 0; z-index:0; pointer-events:none; background:linear-gradient(180deg,rgba(12,15,17,.92) 0%,rgba(12,15,17,.76) 38%,rgba(12,15,17,.45) 66%,rgba(12,15,17,0) 100%); } .header-inner{ position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between; padding:14px 0 } .header .brand, .header .logo{ display:flex; align-items:center; gap:12px; flex-wrap:nowrap } .logo-link{ display:inline-flex; align-items:center } .logo-img{ height:var(--logo-size); width:auto; border-radius:6px } /* Hide visual site-title (keep for a11y) */ .header .site-title{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } /* Defensive reset */ .header .wp-block-heading{ background:none !important; min-height:initial; padding-left:0; line-height:inherit; color:inherit } /* Small screens: compact logo */ @media (max-width:520px){ .logo-img, .header .wp-block-site-logo img{ height:90px } } /* ------- Footer ------- */ .footer{ border-top:1px solid #23282d; margin-top:40px; padding:30px 0; color:#93A0AA; text-align:center } .footer p{ margin:0 } .footer a{ color:#c9d3db } footer.footer .container{ width:min(var(--container-max),92vw); margin-inline:auto; display:block } /* ---------------------------- Auth-aware Header Controls ---------------------------- */ /* WP adds `logged-in` to */ body.logged-in .btn-signin{ display:none !important; } body:not(.logged-in) .btn-account{ display:none !important; } /* Hide the Account button specifically on /account */ .is-account .btn-account{ display:none !important; } /* Never show “Start Free Trial” in header */ .header .btn-start-trial, .header a[href="/checkout/"]{ display:none !important; } /* Remove any inline greeting */ .header .is-content-justification-right .muted{ display:none !important; } /* ---------- Utilities ---------- */ .muted{ opacity:.7 }