/* ============================================================ Hype & Swagger — shared design system (TRDR-261) One source of truth for the whole site. Loaded on every page. Per-product accent via . ============================================================ */ :root { --ink-900:#0B0B12; --ink-800:#15151F; --ink-700:#1E1E2B; --ink-600:#262633; --text:#EDEDF2; --muted:#9A9AAE; --line:rgba(255,255,255,.08); --violet:#7C5CFF; --pink:#FF4D8D; --grad:linear-gradient(100deg,#7C5CFF 0%,#FF4D8D 100%); --accent:#7C5CFF; /* overridden per product */ --accent-ink:#0B0B12; /* text colour on accent buttons */ --radius:16px; --maxw:1180px; --font-display:'Space Grotesk',system-ui,sans-serif; --font-body:'Inter',system-ui,sans-serif; } body[data-theme="hyper"] { --accent:#FBBF24; --accent-ink:#1B1505; } body[data-theme="trender"] { --accent:#2DD4BF; --accent-ink:#04231E; } body[data-theme="brand"] { --accent:#7C5CFF; --accent-ink:#0B0B12; } * { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior:smooth; } body { font-family:var(--font-body); background:var(--ink-900); color:var(--text); overflow-x:hidden; -webkit-font-smoothing:antialiased; } .font-display { font-family:var(--font-display); } a { color:inherit; text-decoration:none; } img { max-width:100%; display:block; } /* ---- Layout helpers ---- */ .hs-container { max-width:var(--maxw); margin:0 auto; padding:0 24px; } .hs-section { padding:80px 0; position:relative; } .hs-center { text-align:center; } .gradient-text { background:var(--grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; } .accent-text { color:var(--accent); } .hs-eyebrow { display:inline-block; font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); border-radius:999px; padding:6px 16px; } .hs-h1 { font-family:var(--font-display); font-weight:700; font-size:clamp(2.4rem,5vw,3.75rem); line-height:1.05; color:#fff; } .hs-h2 { font-family:var(--font-display); font-weight:700; font-size:clamp(1.8rem,3.5vw,2.5rem); line-height:1.1; color:#fff; } .hs-lead { font-size:1.125rem; color:#cfcfda; max-width:42rem; } .glow { position:absolute; border-radius:9999px; filter:blur(90px); opacity:.30; z-index:0; pointer-events:none; } .hs-relative { position:relative; z-index:1; } /* ---- Buttons ---- */ .hs-btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-weight:600; font-size:.95rem; padding:.7rem 1.4rem; border-radius:10px; cursor:pointer; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease; border:1px solid transparent; white-space:nowrap; } .hs-btn-grad { background:var(--grad); color:#fff; box-shadow:0 8px 30px -10px rgba(124,92,255,.6); } .hs-btn-grad:hover { transform:translateY(-2px); box-shadow:0 12px 36px -8px rgba(255,77,141,.55); } .hs-btn-accent { background:var(--accent); color:var(--accent-ink); box-shadow:0 8px 30px -12px var(--accent); } .hs-btn-accent:hover { transform:translateY(-2px); } .hs-btn-ghost { background:transparent; color:var(--text); border-color:rgba(255,255,255,.16); } .hs-btn-ghost:hover { border-color:rgba(255,255,255,.45); } .hs-btn-lg { padding:.95rem 1.8rem; font-size:1rem; border-radius:12px; } /* ---- Cards ---- */ .hs-card { background:var(--ink-800); border:1px solid var(--line); border-radius:var(--radius); transition:transform .25s ease, border-color .25s ease; } .hs-card-hover:hover { transform:translateY(-4px); border-color:color-mix(in srgb, var(--accent) 45%, transparent); } .hs-card-pad { padding:28px; } /* ============================================================ Header / Nav (injected by hs.js) ============================================================ */ .hs-header { position:fixed; top:0; left:0; right:0; z-index:60; background:rgba(11,11,18,.72); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid rgba(255,255,255,.06); } .hs-nav { max-width:var(--maxw); margin:0 auto; padding:14px 24px; display:flex; align-items:center; justify-content:space-between; gap:16px; } .hs-brand { font-family:var(--font-display); font-weight:700; font-size:1.2rem; letter-spacing:-.01em; color:#fff; } .hs-navlinks { display:flex; align-items:center; gap:28px; } .hs-navlink { color:#cdcdd8; font-size:.9rem; font-weight:500; transition:color .2s ease; } .hs-navlink:hover, .hs-navlink.is-active { color:#fff; } .hs-navlink.is-active { position:relative; } .hs-navlink.is-active::after { content:""; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--grad); border-radius:2px; } .hs-navactions { display:flex; align-items:center; gap:10px; } /* Dropdowns */ .hs-dd { position:relative; } .hs-dd-toggle { display:inline-flex; align-items:center; gap:.4rem; cursor:pointer; } .hs-dd-menu { position:absolute; right:0; top:calc(100% + 10px); min-width:210px; background:var(--ink-800); border:1px solid var(--line); border-radius:12px; padding:8px; box-shadow:0 20px 50px -20px rgba(0,0,0,.7); opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .18s ease, transform .18s ease, visibility .18s; z-index:70; } .hs-dd.open .hs-dd-menu { opacity:1; visibility:visible; transform:translateY(0); } .hs-dd-item { display:flex; align-items:center; gap:.6rem; padding:10px 12px; border-radius:8px; font-size:.9rem; color:#dcdce4; } .hs-dd-item:hover { background:var(--ink-700); color:#fff; } .hs-dd-item .dot { width:8px; height:8px; border-radius:9999px; flex:none; } .dot-hyper { background:#FBBF24; } .dot-trender { background:#2DD4BF; } /* Mobile */ .hs-burger { display:none; background:none; border:0; color:#fff; cursor:pointer; padding:6px; } .hs-mobile { display:none; } @media (max-width:860px) { .hs-navlinks, .hs-navactions { display:none; } .hs-burger { display:inline-flex; } .hs-mobile { display:block; border-top:1px solid var(--line); background:var(--ink-900); padding:14px 24px 22px; } .hs-mobile.open { display:block; } .hs-mobile a { display:block; padding:10px 0; color:#dcdce4; font-size:1rem; } .hs-mobile .mob-head { font-size:.72rem; text-transform:uppercase; letter-spacing:.15em; color:var(--muted); margin-top:14px; } } /* ============================================================ Footer (injected by hs.js) ============================================================ */ .hs-footer { border-top:1px solid rgba(255,255,255,.06); padding:48px 0; margin-top:40px; } .hs-footer-row { max-width:var(--maxw); margin:0 auto; padding:0 24px; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:28px; } .hs-footer-brand { font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:#fff; } .hs-footer-tag { font-size:.8rem; color:var(--muted); margin-top:6px; max-width:18rem; } .hs-footer-links { display:flex; flex-wrap:wrap; gap:10px 26px; } .hs-footer-links a { color:var(--muted); font-size:.875rem; transition:color .2s ease; } .hs-footer-links a:hover { color:#fff; } .hs-footer-copy { width:100%; color:#6b6b7d; font-size:.8rem; border-top:1px solid rgba(255,255,255,.05); margin-top:28px; padding-top:20px; } /* ---- Pricing ---- */ .hs-price { font-family:var(--font-display); font-weight:700; font-size:2rem; color:#fff; } .hs-price small { font-size:.85rem; color:var(--muted); font-weight:400; } .hs-tier-pop { border-color:color-mix(in srgb, var(--accent) 55%, transparent) !important; } .hs-badge { position:absolute; top:-12px; left:50%; transform:translateX(-50%); font-size:11px; font-weight:600; padding:4px 12px; border-radius:999px; background:var(--accent); color:var(--accent-ink); } /* ---- FAQ ---- */ .hs-faq { background:var(--ink-800); border:1px solid var(--line); border-radius:12px; padding:20px; } .hs-faq summary { font-weight:600; color:#fff; cursor:pointer; list-style:none; display:flex; justify-content:space-between; align-items:center; gap:1rem; } .hs-faq summary::-webkit-details-marker { display:none; } .hs-faq summary .chev { color:var(--muted); transition:transform .2s ease; } .hs-faq[open] summary .chev { transform:rotate(180deg); } .hs-faq p { margin-top:12px; color:#bcbcc8; font-size:.9rem; line-height:1.6; } /* ---- Legal prose (privacy / terms) ---- */ .hs-legal h1 { font-family:var(--font-display); font-weight:700; font-size:2rem; color:#fff; margin-bottom:.5rem; } .hs-legal h2 { font-family:var(--font-display); font-weight:700; font-size:1.2rem; color:#fff; margin:1.8rem 0 .5rem; } .hs-legal p, .hs-legal li { color:#bcbcc8; max-width:75ch; line-height:1.7; margin:.4rem 0; } .hs-legal ul, .hs-legal ol { padding-left:1.25rem; margin:.5rem 0; } .hs-legal a { color:var(--violet); } .hs-legal a:hover { text-decoration:underline; } .hs-legal strong { color:#e6e6ee; } .hs-legal hr { border:0; border-top:1px solid var(--line); margin:2rem 0; } /* ---- misc ---- */ .hs-feature-num { font-family:var(--font-display); font-weight:700; font-size:.85rem; color:var(--accent); } .muted { color:var(--muted); } .section-tint { background:rgba(21,21,31,.5); }