/* SaferICO — SUITE SHELL STYLES Shared chrome for the tool pages added in the market/trade suite: dex.html, swap.html, marketplace.html, builder.html, pay.html. This is the SAME visual layer the older tool pages (distribute, lock, token-suite…) carry inline. Those pages keep their inline copy on purpose — they are live, money-handling pages and rewriting their to chase a shared file buys nothing and risks everything. New pages link this instead, so each one is a few hundred lines of its own logic rather than 1,700 lines of duplicated chrome. Scope is #creator-page, matching the existing pages, so a component copied from either side lands looking identical. */ /* ===== CREATOR PAGE (scoped) ===== */ #creator-page{ --bg:#070B14;--bg2:#0D1220;--bg3:#111827; --primary:#3367E8;--primary-hover:#4475f0; --accent:#5EEAD4;--accent-deep:#2dd4bf; --text:#E8EDF5;--muted:#6B7A94; --border:rgba(255,255,255,0.07);--border-strong:rgba(255,255,255,0.12); --glass:rgba(255,255,255,0.03); --sev-critical:#ef4444;--sev-medium:#eab308; --r-sm:8px;--r-md:12px;--r-lg:16px; --ease:cubic-bezier(.2,.8,.2,1); } /* ⚠️ :where() ON PURPOSE — DO NOT PUT THE ID BACK. This reset used to read `#creator-page *{…}`, specificity (1,0,0), which BEAT every class-only rule in the site's own stylesheets. Measured in Chrome on 2026-08-28: the nav Tools button rendered 160x20 with zero padding, the language switcher 56x15 instead of 78x31, the footer badges and CTA button flush — on every page wrapped in #creator-page, while the identical markup on the homepage (#home-page, no reset) looked right. security-suite.html was the worst case: its whole stylesheet is class-only, so every padding and margin on the page computed to 0. :where() contributes ZERO specificity, so the selector is (0,0,0) — the weakest rule in the cascade, which is what a reset is supposed to be. It still applies only inside #creator-page. scripts/toolsqa.mjs now measures this: any rule a page declares with a non-zero padding or margin that computes to zero is reported as a finding. Browser floor: :where() is Chrome 88 / Safari 14 / Firefox 78 (2021). A browser older than that drops the whole rule and falls back to the UA's default margins rather than to the old behaviour — acceptable, because this site already requires far newer things (optional chaining in scan.html, text-wrap:balance, BigInt). Stated so it is a decision, not an accident. */ :where(#creator-page) *{margin:0;padding:0;box-sizing:border-box} #creator-page{scroll-behavior:smooth} #creator-page{background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;font-size:15px;line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100vh;position:relative;overflow-x:hidden} #creator-page body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(1100px 620px at 82% -12%, rgba(51,103,232,.16), transparent 58%),radial-gradient(820px 520px at -8% 108%, rgba(94,234,212,.08), transparent 55%)} #creator-page body::after{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.55;background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);background-size:54px 54px;mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 35%,transparent 78%);-webkit-mask-image:radial-gradient(ellipse 80% 60% at 50% 0%,#000 35%,transparent 78%)} #creator-page nav, #creator-page .wrap, #creator-page footer{position:relative;z-index:1} #creator-page h1, #creator-page h2, #creator-page h3, #creator-page h4, #creator-page .brand-text{font-family:'Space Grotesk',sans-serif} #creator-page a{text-decoration:none} #creator-page img{max-width:100%;height:auto} #creator-page a:focus-visible, #creator-page button:focus-visible, #creator-page input:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px} #creator-page nav{position:sticky;top:0;z-index:200;background:rgba(7,11,20,0.92);backdrop-filter:blur(24px);border-bottom:1px solid var(--border)} #creator-page .nav-inner{display:flex;align-items:center;justify-content:space-between;height:70px;max-width:1200px;margin:0 auto;padding:0 32px} #creator-page .logo{display:flex;align-items:center;gap:12px} #creator-page .logo-icon{width:44px;height:44px;display:flex;align-items:center;justify-content:center;flex-shrink:0;filter:drop-shadow(0 0 16px rgba(51,103,232,.45))} #creator-page .logo-icon img{width:100%;height:100%;object-fit:contain} #creator-page .logo-text .brand-text{font-size:22px;font-weight:800;color:#fff;letter-spacing:-.5px;line-height:1} #creator-page .logo-text .brand-sub{font-size:11px;color:var(--muted);letter-spacing:.5px;margin-top:2px} #creator-page .nav-right{display:flex;align-items:center;gap:18px} #creator-page .back-link{color:var(--muted);font-size:14px;font-weight:500;transition:color .2s;display:flex;align-items:center;gap:6px} #creator-page .back-link:hover{color:#fff} #creator-page .wbtn{font-family:'Space Grotesk',sans-serif;font-size:13.5px;font-weight:700;border:1px solid var(--border-strong);background:var(--glass);color:var(--text);padding:10px 18px;border-radius:var(--r-sm);cursor:pointer;display:flex;align-items:center;gap:9px;transition:.2s var(--ease)} #creator-page .wbtn:hover{border-color:var(--primary);background:rgba(51,103,232,.08)} #creator-page .dot{width:7px;height:7px;border-radius:50%;background:var(--sev-critical);box-shadow:0 0 8px var(--sev-critical);transition:.2s} #creator-page .dot.on{background:var(--accent);box-shadow:0 0 10px var(--accent)} #creator-page .wrap{max-width:1100px;margin:0 auto;padding:48px 24px 90px} #creator-page .hero{margin-bottom:30px} #creator-page .eyebrow{display:inline-flex;align-items:center;gap:9px;background:rgba(51,103,232,.1);border:1px solid rgba(51,103,232,.3);color:#7ba3f5;padding:7px 16px;border-radius:100px;font-size:12px;font-weight:500;letter-spacing:1px;text-transform:uppercase;margin:0 0 22px} #creator-page .eyebrow .pulse{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent);animation:blink 2s ease-in-out infinite} @keyframes blink{0%,100%{opacity:.5;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}} #creator-page h1{font-size:clamp(32px,5vw,52px);line-height:1.04;margin:0 0 16px;font-weight:800;letter-spacing:-1.5px;color:#fff} #creator-page .hero-text h2{font-family:'Space Grotesk',sans-serif;font-size:clamp(32px,5vw,52px);line-height:1.04;margin:0 0 16px;font-weight:800;letter-spacing:-1.5px;color:#fff} #creator-page .hero-text h2 .hl{background:linear-gradient(90deg,#3367E8,#5EEAD4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} #creator-page h1 .hl{background:linear-gradient(90deg,#3367E8,#5EEAD4);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text} #creator-page .sub{color:var(--muted);max-width:580px;font-size:16px;line-height:1.7;margin:0} #creator-page .sub code{color:var(--text);background:var(--bg2);padding:1px 7px;border-radius:5px;font-size:13px;font-family:'JetBrains Mono',monospace} #creator-page .hero{display:grid;grid-template-columns:1fr 340px;gap:40px;align-items:center;margin-bottom:38px} @media(max-width:880px){#creator-page .hero{grid-template-columns:1fr;gap:28px} #creator-page .wallet-card{max-width:420px}} #creator-page .hero-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px} #creator-page .chip{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--muted);background:var(--glass);border:1px solid var(--border);padding:7px 13px;border-radius:100px} #creator-page .chip-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)} #creator-page .wallet-card{position:relative;background:linear-gradient(165deg,rgba(20,27,45,.9),rgba(10,14,24,.92));border:1px solid var(--border-strong);border-radius:20px;padding:24px;overflow:hidden;box-shadow:0 24px 60px -20px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.05)} #creator-page .wc-glow{position:absolute;top:-60px;right:-60px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(226,118,27,.22),transparent 70%);pointer-events:none} #creator-page .wc-top{display:flex;align-items:center;gap:14px;position:relative} #creator-page .metamask-badge{width:58px;height:58px;border-radius:16px;background:linear-gradient(160deg,#2a2118,#161616);border:1px solid rgba(246,133,27,.25);display:flex;align-items:center;justify-content:center;flex-shrink:0;box-shadow:0 8px 22px -6px rgba(226,118,27,.4)} #creator-page .metamask-badge svg{width:30px;height:30px;display:block} #creator-page .wc-name{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:17px;color:#fff} #creator-page .wc-status{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);margin-top:3px;font-family:'JetBrains Mono',monospace} #creator-page .wc-dot{width:7px;height:7px;border-radius:50%;background:var(--sev-critical);box-shadow:0 0 8px var(--sev-critical);transition:.2s} #creator-page .wc-dot.on{background:var(--accent);box-shadow:0 0 10px var(--accent)} #creator-page .wc-addr{margin:20px 0 16px;font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--text);background:var(--bg);border:1px dashed var(--border-strong);border-radius:10px;padding:13px 14px;text-align:center;word-break:break-all} #creator-page .wc-btn{width:100%;border:none;cursor:pointer;background:linear-gradient(135deg,#F6851B,#E2761B);color:#1a1206;font-weight:800;font-family:'Space Grotesk',sans-serif;font-size:14.5px;padding:14px;border-radius:12px;transition:.2s var(--ease);box-shadow:0 8px 22px -6px rgba(246,133,27,.5)} #creator-page .wc-btn:hover{transform:translateY(-1px);box-shadow:0 14px 30px -8px rgba(246,133,27,.6)} #creator-page .wc-btn.connected{background:linear-gradient(135deg,rgba(94,234,212,.16),rgba(51,103,232,.12));color:var(--accent);box-shadow:none;border:1px solid rgba(94,234,212,.3)} #creator-page .wc-foot{margin-top:14px;text-align:center;font-size:11px;color:var(--muted);line-height:1.5} #creator-page .tabs{display:flex;gap:8px;margin:0 0 28px;border-bottom:1px solid var(--border)} #creator-page .tab{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:700;color:var(--muted);background:none;border:none;border-bottom:2px solid transparent;padding:12px 20px;cursor:pointer;transition:.2s;display:flex;align-items:center;gap:9px;margin-bottom:-1px} #creator-page .tab:hover{color:var(--text)} #creator-page .tab.active{color:#fff;border-bottom-color:var(--primary)} #creator-page .tab .ico{width:18px;height:18px} #creator-page .tab .badge{font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;background:rgba(94,234,212,.12);color:var(--accent);padding:2px 7px;border-radius:20px;letter-spacing:.5px} #creator-page .pane{display:none} #creator-page .pane.active{display:block;animation:fade .25s var(--ease)} @keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}} #creator-page .grid{display:grid;grid-template-columns:1fr 370px;gap:24px;align-items:start} @media(max-width:900px){#creator-page .grid{grid-template-columns:1fr}} #creator-page .panel{position:relative;background:linear-gradient(180deg,var(--bg2),rgba(13,18,32,.6));border:1px solid var(--border);border-radius:var(--r-lg);padding:26px;box-shadow:0 18px 50px -28px rgba(0,0,0,.8)} #creator-page .panel::before{content:"";position:absolute;inset:0;border-radius:var(--r-lg);padding:1px;background:linear-gradient(160deg,rgba(94,234,212,.18),transparent 40%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.7} #creator-page .panel h2{font-size:12px;letter-spacing:2.5px;text-transform:uppercase;color:var(--muted);font-family:'JetBrains Mono',monospace;font-weight:600;margin:0 0 22px;display:flex;align-items:center;gap:10px} #creator-page .panel h2::before{content:"";width:18px;height:1px;background:var(--primary)} #creator-page label{display:block;font-size:13px;color:var(--text);margin:0 0 7px;font-weight:500} #creator-page .hint{color:var(--muted);font-weight:400;font-size:12px;margin-left:6px} #creator-page .field{margin-bottom:18px} #creator-page input[type=text], #creator-page input[type=number]{width:100%;background:var(--bg);border:1px solid var(--border-strong);color:var(--text);border-radius:var(--r-sm);padding:12px 14px;font-size:14px;font-family:'JetBrains Mono',monospace;outline:none;transition:.16s} #creator-page input::placeholder{color:var(--muted)} #creator-page input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(51,103,232,.12)} #creator-page .row{display:grid;grid-template-columns:1fr 1fr;gap:14px} #creator-page .toggles{display:flex;flex-direction:column;gap:10px} #creator-page .toggle{display:flex;align-items:flex-start;gap:12px;padding:13px 14px;border:1px solid var(--border-strong);border-radius:var(--r-md);cursor:pointer;background:var(--bg);transition:.16s} #creator-page .toggle:hover{border-color:rgba(255,255,255,.2)} #creator-page .toggle.on{border-color:var(--primary);background:rgba(51,103,232,.06)} #creator-page .toggle input{display:none} #creator-page .check{width:18px;height:18px;border-radius:6px;border:1.5px solid var(--border-strong);flex:0 0 auto;margin-top:1px;display:grid;place-items:center;transition:.16s} #creator-page .toggle.on .check{background:var(--primary);border-color:var(--primary)} #creator-page .check svg{width:11px;height:11px;opacity:0;transition:.16s} #creator-page .toggle.on .check svg{opacity:1} #creator-page .toggle .t-name{font-size:13.5px;font-weight:600} #creator-page .toggle .t-desc{font-size:12px;color:var(--muted);margin-top:2px;line-height:1.4} #creator-page .deploy{width:100%;margin-top:6px;border:none;cursor:pointer;background:linear-gradient(135deg,var(--primary),#2a52c9);color:#fff;font-weight:700;font-family:'Space Grotesk',sans-serif;font-size:14.5px;letter-spacing:.3px;padding:15px;border-radius:var(--r-md);transition:.2s var(--ease);display:flex;align-items:center;justify-content:center;gap:10px;box-shadow:0 6px 20px rgba(51,103,232,.3)} #creator-page .deploy:hover{background:#4475f0;transform:translateY(-1px);box-shadow:0 12px 30px rgba(51,103,232,.35)} #creator-page .deploy:disabled{background:var(--bg3);color:var(--muted);cursor:not-allowed;box-shadow:none;transform:none} #creator-page .sticky{position:sticky;top:90px} #creator-page .sum-row{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px dashed var(--border)} #creator-page .sum-row:last-of-type{border-bottom:none} #creator-page .sum-k{color:var(--muted);font-size:12.5px} #creator-page .sum-v{font-family:'JetBrains Mono',monospace;font-size:13px;text-align:right;word-break:break-all} #creator-page .sum-v.accent{color:var(--accent)} #creator-page .net-pill{display:inline-flex;align-items:center;gap:7px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--muted);margin-top:14px} #creator-page .log{margin-top:18px;border:1px solid var(--border);border-radius:var(--r-md);background:#05080F;overflow:hidden;display:none} #creator-page .log.show{display:block} #creator-page .log-h{padding:10px 14px;border-bottom:1px solid var(--border);font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:2px;color:var(--muted);text-transform:uppercase} #creator-page .log-body{padding:14px;font-family:'JetBrains Mono',monospace;font-size:12.5px;line-height:1.7;max-height:230px;overflow:auto} #creator-page .ln{display:flex;gap:10px} #creator-page .ln .pre{color:var(--primary);flex:0 0 auto} #creator-page .ln.err .pre{color:var(--sev-critical)} #creator-page .ln.ok .pre{color:var(--accent)} #creator-page .ln a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--accent-deep)} #creator-page .notice{font-size:12px;color:var(--muted);line-height:1.6;margin-top:18px;padding:13px 15px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--bg)} #creator-page .notice b{color:var(--sev-medium)} #creator-page .tg-cta{margin-top:16px;padding:16px;border:1px solid rgba(94,234,212,.25);border-radius:var(--r-md);background:linear-gradient(135deg,rgba(94,234,212,.06),rgba(51,103,232,.04))} #creator-page .tg-cta .tg-h{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:14px;color:#fff;margin-bottom:4px;display:flex;align-items:center;gap:8px} #creator-page .tg-cta p{font-size:12.5px;color:var(--muted);line-height:1.5;margin-bottom:11px} #creator-page .tg-cta a{display:inline-flex;align-items:center;gap:8px;background:rgba(94,234,212,.1);border:1px solid rgba(94,234,212,.35);color:var(--accent);font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:700;padding:9px 16px;border-radius:var(--r-sm);transition:.2s} #creator-page .tg-cta a:hover{background:rgba(94,234,212,.16);border-color:var(--accent)} #creator-page footer{text-align:center;color:var(--muted);font-size:12px;padding:30px;border-top:1px solid var(--border);margin-top:40px} #creator-page .footnote{font-family:'JetBrains Mono',monospace;letter-spacing:1px} /* ════════════════════════════════════════════════════════════════ SAFERICO · AURORA V2 — design overlay Palette · Ink #05070F / Abyss #0A101F / Signal #3B6FF0 Aurora #5EEAD4 / Haze #8B5CF6 / Frost #EAF0FB Signature · the "perimeter scan": a light beam tracing the wallet card's border — the security scanner, made visible. ════════════════════════════════════════════════════════════════ */ /* ---- tokens -------------------------------------------------- */ #home-page,#creator-page{ --bg:#05070F;--bg2:#0A101F;--bg3:#0E1527; --primary:#3B6FF0;--primary-hover:#5483ff; --accent:#5EEAD4;--accent-deep:#2dd4bf;--haze:#8B5CF6; --text:#EAF0FB;--muted:#7686A3; --border:rgba(148,170,220,.10);--border-strong:rgba(148,170,220,.20); --glass:rgba(148,170,220,.05); --sh-glow:0 0 44px rgba(59,111,240,.30); --ease:cubic-bezier(.22,.9,.3,1); } /* ---- atmosphere: ink + aurora mesh --------------------------- */ #home-page,#creator-page{ background: radial-gradient(1050px 680px at 12% -8%, rgba(59,111,240,.17), transparent 62%), radial-gradient(900px 600px at 92% 4%, rgba(139,92,246,.13), transparent 60%), radial-gradient(1200px 800px at 50% 114%, rgba(94,234,212,.09), transparent 62%), #05070F; } ::selection{background:rgba(94,234,212,.28);color:#fff} /* slim aurora scrollbar */ ::-webkit-scrollbar{width:11px} ::-webkit-scrollbar-track{background:#05070F} ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#23335c,#1a2440);border-radius:8px;border:2px solid #05070F} ::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,#3B6FF0,#8B5CF6)} /* ---- nav: deeper glass, gradient hairline -------------------- */ #home-page nav,#creator-page nav{ background:rgba(5,7,15,.78); backdrop-filter:blur(22px) saturate(1.4); border-bottom:1px solid transparent; border-image:linear-gradient(90deg,transparent,rgba(94,234,212,.25),rgba(59,111,240,.25),transparent) 1; } /* ---- typography: the aurora ink ------------------------------ */ @keyframes inkflow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}} #home-page .hero h1{ font-size:clamp(44px,5.8vw,84px); letter-spacing:-.035em;line-height:.98; text-shadow:none; } #home-page .hero h1 .accent, #creator-page h1 .hl{ background:linear-gradient(100deg,#5EEAD4 0%,#3B6FF0 38%,#8B5CF6 70%,#5EEAD4 100%); background-size:240% 100%; -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; animation:inkflow 9s ease-in-out infinite; } #creator-page h1{letter-spacing:-.03em} #home-page .eyebrow,#creator-page .eyebrow{ font-family:'JetBrains Mono',monospace;letter-spacing:.22em;text-transform:uppercase; } /* ---- SIGNATURE · the perimeter scan -------------------------- */ @property --scan{syntax:'';inherits:false;initial-value:0deg} @keyframes scanspin{to{--scan:360deg}} #creator-page .wallet-card{ background:linear-gradient(168deg,rgba(17,24,44,.92),rgba(7,10,19,.95)); border-color:rgba(148,170,220,.16); box-shadow:0 30px 80px -24px rgba(0,0,0,.8), 0 0 60px -30px rgba(59,111,240,.5), inset 0 1px 0 rgba(255,255,255,.06); } #creator-page .wallet-card::after{ content:'';position:absolute;inset:-1px;border-radius:21px;padding:1.5px; background:conic-gradient(from var(--scan), transparent 0deg 270deg, rgba(94,234,212,.0) 286deg, rgba(94,234,212,.95) 318deg, rgba(59,111,240,.9) 342deg, transparent 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude; animation:scanspin 5.5s linear infinite; pointer-events:none; } /* the same beam, slower, on the home hero card */ #home-page .hero-card-wrap{position:relative} #home-page .hero-card-wrap::after{ content:'';position:absolute;inset:-2px;border-radius:22px;padding:1.5px; background:conic-gradient(from var(--scan), transparent 0deg 282deg, rgba(94,234,212,.85) 322deg, rgba(139,92,246,.8) 344deg, transparent 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude; animation:scanspin 8s linear infinite; pointer-events:none;z-index:5; } /* ---- panels: lifted glass, lit from above -------------------- */ #creator-page .panel{ background:linear-gradient(180deg,rgba(148,170,220,.055),rgba(148,170,220,.018) 55%,rgba(8,11,20,.4)); border:1px solid rgba(148,170,220,.13); box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 24px 64px -28px rgba(0,0,0,.7); border-radius:18px; transition:border-color .35s var(--ease),box-shadow .35s var(--ease); } #creator-page .panel:hover{ border-color:rgba(94,234,212,.22); box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 28px 70px -26px rgba(0,0,0,.75),0 0 48px -22px rgba(94,234,212,.35); } /* ---- inputs: deep wells, aurora focus ------------------------ */ #creator-page input[type=text],#creator-page input[type=number],#creator-page select,#creator-page textarea{ background:rgba(4,6,12,.65); border:1px solid rgba(148,170,220,.14); border-radius:11px; transition:border-color .25s,box-shadow .25s,background .25s; } /* A