:root{ --bg:#0a1a10;--bg2:#0F2818;--surface:rgba(255,226,153,0.03);--glass:rgba(255,226,153,0.04); --glass-border:rgba(242,178,51,0.14);--glass-hover:rgba(242,178,51,0.08); --text:#F5EED5;--text2:#D6C9A0;--text3:#7A6E4A; /* Legacy aliases point to new brand colors so old references keep working */ --blue:#F2B233;--blue-dark:#B8791A;--blue-glow:rgba(242,178,51,0.12); --cyan:#3EE68A;--cyan-glow:rgba(62,230,138,0.1); /* Canonical names */ --gold:#F2B233;--gold-light:#FFD866;--gold-pale:#FFE299;--gold-dark:#B8791A; --emerald:#3EE68A;--emerald-dark:#0FAC5C; --green-tag:#0FAC5C;--red-tag:#ef4444;--blue-tag:#FFD866;--purple:#a855f7; --s-color:#F2B233;--a-color:#FFD866;--b-color:#3EE68A;--c-color:#7A6E4A; --emerald-glow:rgba(62,230,138,.12); } *{margin:0;padding:0;box-sizing:border-box} body{font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;transition:background .3s,color .3s;overflow-x:clip;max-width:100vw} /* clip, NOT hidden: overflow-x:hidden makes html a scroll container, which kills position:sticky on the nav in Chrome (it scrolled away on every page). clip still contains the marquee/nav-strip overflow but leaves sticky working. */ html{overflow-x:clip} /* light mode removed -- SweepGrind is dark-only on every page (matches the casino board) */ /* Theme toggle */ .theme-toggle{display:none} /* dark-only site: the light/dark toggle has nothing to switch to */ .theme-toggle--legacy{display:flex;align-items:center;gap:8px;background:transparent;border:none;border-radius:0;padding:5px 4px;cursor:pointer;font-family:'Inter',sans-serif;font-size:.75rem;font-weight:600;color:var(--text2);transition:all .2s;user-select:none} .theme-toggle:hover{color:var(--text)} .toggle-track{width:32px;height:18px;border-radius:10px;background:var(--cyan);position:relative;transition:background .2s;flex-shrink:0} .toggle-knob{width:14px;height:14px;border-radius:50%;background:#fff;position:absolute;top:2px;left:2px;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.3)} .toggle-knob{transform:translateX(14px)} .toggle-label{white-space:nowrap;letter-spacing:.3px} /* SEARCH OVERLAY */ .sg-search-overlay{position:fixed;inset:0;background:rgba(5,8,15,.85);backdrop-filter:blur(14px);z-index:10000;display:none;align-items:flex-start;justify-content:center;padding-top:120px;animation:fadeIn .18s} .sg-search-overlay.open{display:flex} @keyframes fadeIn{from{opacity:0}to{opacity:1}} .sg-search-box{width:min(680px,92vw);background:#0a0f1e;border:1px solid rgba(62,230,138,.3);border-radius:12px;box-shadow:0 30px 100px rgba(0,0,0,.6),0 0 60px rgba(62,230,138,.15);overflow:hidden} .sg-search-header{display:flex;align-items:center;gap:14px;padding:18px 22px;border-bottom:1px solid rgba(62,230,138,.15)} .sg-search-header svg{width:22px;height:22px;color:var(--cyan);flex-shrink:0} .sg-search-header input{flex:1;background:transparent;border:none;outline:none;color:var(--text);font-family:'Inter',sans-serif;font-size:1.15rem;font-weight:500} .sg-search-header input::placeholder{color:var(--text3)} .sg-search-header .sg-kbd{font-family:'JetBrains Mono',monospace;font-size:.7rem;color:var(--text3);padding:4px 8px;border:1px solid var(--glass-border);border-radius:4px;letter-spacing:1px} .sg-search-results{max-height:420px;overflow-y:auto} .sg-search-results::-webkit-scrollbar{width:8px} .sg-search-results::-webkit-scrollbar-thumb{background:rgba(62,230,138,.2);border-radius:4px} .sg-search-result{display:flex;align-items:center;justify-content:space-between;padding:14px 22px;border-bottom:1px solid rgba(255,255,255,.04);color:var(--text);text-decoration:none;transition:background .12s;cursor:pointer} .sg-search-result:hover,.sg-search-result.active{background:rgba(62,230,138,.08)} .sg-search-result-main{display:flex;align-items:center;gap:12px;min-width:0} .sg-search-result-tier{font-family:'Inter',sans-serif;font-size:.7rem;font-weight:900;padding:4px 8px;border-radius:3px;flex-shrink:0} .sg-search-result-tier.t-S{background:#3EE68A;color:#000} .sg-search-result-tier.t-A{background:#F2B233;color:#000} .sg-search-result-tier.t-B{background:#8b5cf6;color:#fff} .sg-search-result-tier.t-C{background:#475569;color:#cbd5e1} .sg-search-result-tier.t-SB{background:#FFD866;color:#000} .sg-search-result-name{font-family:'Inter',sans-serif;font-weight:700;font-size:.95rem} .sg-search-result-type{font-size:.75rem;color:var(--text3);letter-spacing:1px;text-transform:uppercase} .sg-search-result-go{color:var(--cyan);font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:1px;opacity:0;transition:opacity .15s} .sg-search-result:hover .sg-search-result-go,.sg-search-result.active .sg-search-result-go{opacity:1} .sg-search-footer{display:flex;justify-content:space-between;padding:12px 22px;font-size:.72rem;color:var(--text3);border-top:1px solid rgba(62,230,138,.1);background:rgba(255,255,255,.02);font-family:'JetBrains Mono',monospace;letter-spacing:1px} .sg-search-empty{padding:40px 22px;text-align:center;color:var(--text3);font-family:'Inter',sans-serif;font-size:.9rem} a{color:var(--blue);text-decoration:none} /* NAV - brutalist editorial */ nav{position:sticky;top:0;z-index:100;background:rgba(10,26,16,.92);backdrop-filter:blur(20px);border-bottom:1px solid var(--glass-border)} .nav-bar{max-width:1500px;margin:0 auto;padding:0 24px;display:flex;align-items:stretch;justify-content:flex-start;height:108px;gap:24px} .nav-logo{display:flex;align-items:center;padding-right:20px;border-right:1px solid var(--glass-border);height:100%} .nav-logo img{height:100px;width:auto;display:block} .nav-links{display:flex;align-items:stretch;gap:0} .nav-links a{display:flex;align-items:center;padding:0 14px;font-family:'Inter',sans-serif;font-size:.88rem;font-weight:800;color:var(--cyan);transition:all .15s;letter-spacing:-.3px;text-transform:none;position:relative;border:none;white-space:nowrap} .nav-links a:hover{color:#7FF0B5;background:transparent} .nav-links a.active{color:var(--cyan);background:transparent} .nav-links a.active::after{content:"";position:absolute;bottom:0;left:14px;right:14px;height:3px;background:var(--cyan)} .nav-right{display:flex;gap:0;align-items:stretch;border-left:1px solid var(--glass-border);padding:12px 0 12px 6px;margin-left:40px} .nav-right a,.nav-right button{display:flex;align-items:center;justify-content:center;width:38px;background:transparent;border:none;color:#fff;font-size:.9rem;transition:all .15s;cursor:pointer;font-family:'Inter',sans-serif} .nav-right a:hover,.nav-right button:hover{color:var(--cyan)} .nav-right a svg,.nav-right button svg{width:16px;height:16px;display:block} .nav-right a.btn-login{width:auto;padding:0 14px;color:#fff;font-weight:700;font-size:.85rem;letter-spacing:-.2px;text-transform:none;margin-left:6px;white-space:nowrap} .nav-right a.btn-login{display:none} body.sg-auth-on .nav-right a.btn-login{display:inline-flex} .nav-right a.btn-login:hover{color:var(--cyan)} .nav-right a.btn-started{width:auto;padding:0 20px;background:var(--cyan);color:#0a1a10;font-weight:800;font-size:.85rem;letter-spacing:-.2px;text-transform:none;border-radius:6px;margin-left:6px;margin-right:4px;align-self:center;height:36px;white-space:nowrap} .nav-right a.btn-started:hover{background:#7FF0B5;color:#0a1a10} @media(max-width:900px){.nav-logo::after{display:none}.nav-links a{padding:0 12px;font-size:.8rem}.nav-logo{padding-right:16px}.nav-logo img{height:48px}.nav-bar{height:68px}} /* HERO - editorial */ .hero{max-width:1280px;margin:0 auto;padding:48px 20px 36px;text-align:left} .hero-eyebrow{display:flex;align-items:center;gap:10px;font-family:'Inter',sans-serif;font-size:.72rem;letter-spacing:4px;text-transform:uppercase;color:var(--gold);font-weight:700;margin-bottom:16px} .hero-eyebrow-line{width:24px;height:2px;background:var(--gold)} .hero h1{font-family:'Inter',sans-serif;font-size:clamp(2.4rem,4.5vw,3.6rem);font-weight:900;line-height:1.05;margin-bottom:14px;letter-spacing:-.03em;color:var(--text)} .hero h1 em{font-family:'Inter',sans-serif;font-style:normal;color:var(--emerald)} .hero p{color:var(--text2);font-size:1.05rem;line-height:1.6;max-width:640px;margin:0 0 28px} .hero-pills{display:flex;justify-content:center;gap:12px;flex-wrap:wrap} .hero-pill{background:var(--glass);border:1px solid var(--glass-border);backdrop-filter:blur(10px);border-radius:100px;padding:10px 22px;font-size:.9rem;font-weight:600} .hero-pill .num{color:var(--blue)} /* CONTROLS */ .controls{max-width:1280px;margin:0 auto;padding:8px 20px 16px;display:flex;flex-wrap:wrap;align-items:center;gap:10px} .filter-group{display:flex;gap:4px;flex-wrap:wrap} .chip{padding:9px 18px;border-radius:100px;border:1px solid var(--glass-border);background:transparent;color:var(--text2);font-size:.9rem;font-weight:500;cursor:pointer;transition:all .2s} .chip:hover{border-color:var(--blue);color:var(--text)} .chip.on{background:var(--blue-glow);border-color:var(--blue);color:var(--blue)} .view-btns{display:flex;border:1px solid var(--glass-border);border-radius:10px;overflow:hidden} .view-btns button{padding:7px 16px;background:transparent;border:none;color:var(--text2);font-size:.82rem;font-weight:600;cursor:pointer;transition:all .15s} .view-btns button.on{background:var(--blue);color:#0a1a10} .sort-wrap{margin-left:auto;position:relative} .sort-wrap select{padding:8px 30px 8px 14px;border-radius:10px;border:1px solid var(--glass-border);background:var(--glass);color:var(--text);font-size:.85rem;outline:none;cursor:pointer;appearance:none;-webkit-appearance:none;backdrop-filter:blur(10px);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%233ee68a' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center} .sort-wrap select:focus{border-color:var(--cyan)} .sort-wrap select option{background:var(--bg2);color:var(--text)} .search-wrap{position:relative} .search-wrap input{padding:8px 14px 8px 34px;border-radius:10px;border:1px solid var(--glass-border);background:var(--glass);color:var(--text);font-size:.85rem;width:220px;outline:none;backdrop-filter:blur(10px)} .search-wrap input:focus{border-color:var(--blue)} .search-wrap::before{content:"🔍";position:absolute;left:10px;top:50%;transform:translateY(-50%);font-size:.8rem} /* TIER HEADER */ .tier-hdr{max-width:1280px;margin:0 auto;padding:54px 20px 10px;display:flex;align-items:center;gap:14px;flex-wrap:wrap} #cardsView > .tier-hdr:first-child{padding-top:28px} .tier-badge{font-size:1.45rem;font-weight:900;padding:6px 18px;border-radius:8px;letter-spacing:2.5px;text-transform:uppercase;color:var(--cyan);background:rgba(62,230,138,.12);border:1px solid rgba(62,230,138,.35);text-shadow:0 0 16px rgba(62,230,138,.4)} .tier-badge.s,.tier-badge.a,.tier-badge.b,.tier-badge.c{color:var(--cyan);background:rgba(62,230,138,.12);border:1px solid rgba(62,230,138,.35)} .tier-label{color:var(--text2);font-size:.9rem;font-style:italic;font-family:'Inter',sans-serif} /* CARDS */ .card-grid{max-width:1280px;margin:0 auto;padding:8px 20px 32px;display:grid;grid-template-columns:repeat(auto-fill,minmax(400px,1fr));gap:20px} .card{background:var(--glass);backdrop-filter:blur(12px);border:1px solid var(--glass-border);border-radius:16px;padding:26px;transition:all .25s;position:relative} .card:hover{background:var(--glass-hover);border-color:rgba(242,178,51,.2);transform:translateY(-3px)} .card-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px} .card-name{font-size:1.3rem;font-weight:700;letter-spacing:-.3px} .card-daily{font-size:1.1rem;font-weight:800;padding:6px 14px;border-radius:8px} /* provenance of the daily figure: check = claimed on our own account, ~ = community-reported */ .daily-prov{font-family:'JetBrains Mono',monospace;font-size:.7em;opacity:.55;margin-left:4px;cursor:help;vertical-align:super} .daily-prov.own{color:var(--emerald);opacity:.9} .board-prov-note{font-family:'Inter',sans-serif;font-size:.82rem;color:var(--text3);line-height:1.5;margin:0 0 18px} .board-prov-note .k{font-family:'JetBrains Mono',monospace;color:var(--emerald);font-weight:700} .board-prov-note .k2{font-family:'JetBrains Mono',monospace;color:var(--text2);font-weight:700} .card-daily.s{background:rgba(96,165,250,.1);color:var(--s-color)} .card-daily.a{background:var(--blue-glow);color:var(--blue)} .card-daily.b{background:rgba(62,230,138,.1);color:var(--cyan)} .card-daily.c{background:rgba(148,163,184,.08);color:var(--text2)} .card-stars{color:var(--cyan);font-size:.9rem;margin-bottom:8px} .card-desc{font-size:.95rem;color:var(--text2);line-height:1.6;margin-bottom:14px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .card-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--glass-border);border-radius:10px;overflow:hidden;margin-bottom:14px} .card-stat{background:var(--bg2);padding:12px;text-align:center} .card-stat .lbl{font-size:.72rem;color:var(--text3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px} .card-stat .val{font-size:1.05rem;font-weight:700} .card-collect{font-size:.88rem;color:var(--text2);background:var(--surface);border-radius:8px;padding:10px 14px;margin-bottom:10px} .card-collect span{color:var(--blue);font-weight:600} .card-meta{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px} .card-meta .tag{font-size:.78rem;padding:4px 11px;border-radius:6px;font-weight:500} .tag-verified{background:rgba(242,178,51,.1);color:var(--blue);border:1px solid rgba(242,178,51,.2);position:relative;overflow:hidden} .tag-verified::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(105deg,transparent,rgba(255,222,140,.35),transparent);animation:sgShimmer 4.5s ease-in-out infinite} @keyframes sgShimmer{0%,72%{left:-60%}100%{left:130%}} @media(prefers-reduced-motion:reduce){.tag-verified::after{animation:none;display:none}} .tag-payment{background:var(--surface);color:var(--text2);border:1px solid var(--glass-border)} .tag-days{background:rgba(62,230,138,.08);color:var(--cyan);border:1px solid rgba(62,230,138,.15)} .card-promo{background:rgba(255,255,255,.025);border:1px solid var(--glass-border);border-left:3px solid var(--gold);border-radius:10px;padding:9px 14px;margin-bottom:14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;text-decoration:none;transition:all .15s} a.card-promo{cursor:pointer} a.card-promo:hover{background:rgba(242,178,51,.07);border-left-color:var(--gold-light)} .card-promo .promo-label{font-family:'JetBrains Mono',monospace;font-size:.56rem;letter-spacing:1.2px;text-transform:uppercase;color:var(--gold);font-weight:800;flex-shrink:0;white-space:nowrap} .card-promo .promo-txt{font-size:.92rem;font-weight:700;color:var(--text)} .copy-btn{background:var(--blue-glow);border:1px solid rgba(242,178,51,.3);color:var(--blue);padding:5px 12px;border-radius:6px;font-size:.72rem;font-weight:600;cursor:pointer;transition:all .15s} .copy-btn:hover{background:var(--blue);color:#0a1a10} .card-actions{display:flex;gap:8px} .btn-visit{flex:1;padding:13px;background:var(--blue);color:#0a1a10;border:none;border-radius:10px;font-weight:700;font-size:.95rem;cursor:pointer;transition:all .2s;text-align:center;display:block} .btn-visit:hover{background:var(--blue-dark);transform:translateY(-1px)} .btn-review{flex:.55;padding:13px;background:transparent;border:1px solid var(--glass-border);color:var(--text2);border-radius:10px;font-weight:600;font-size:.95rem;cursor:pointer;transition:all .2s;text-align:center;display:block} .btn-review:hover{border-color:var(--text2);color:var(--text)} /* TABLE */ #tableView{display:none;max-width:1280px;margin:0 auto;padding:0 20px 40px;overflow-x:auto} #tableView table{width:100%;border-collapse:separate;border-spacing:0} #tableView th{padding:12px;text-align:left;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--text3);border-bottom:1px solid var(--glass-border);cursor:pointer;white-space:nowrap} #tableView th:hover{color:var(--blue)} #tableView td{padding:12px;font-size:.88rem;border-bottom:1px solid rgba(255,255,255,.03)} #tableView tr:hover{background:rgba(242,178,51,.03)} .tbl-name{font-weight:600} .tbl-tier{font-weight:800;font-size:.78rem;padding:3px 10px;border-radius:6px;display:inline-block} .tbl-verified{color:var(--blue)} .tbl-btn{padding:6px 16px;background:linear-gradient(135deg,var(--blue),var(--cyan));color:#0a1a10;border:none;border-radius:8px;font-weight:600;font-size:.78rem;cursor:pointer} /* FAQ */ .faq-wrap{max-width:800px;margin:0 auto;padding:24px 20px} .faq-search{width:100%;padding:12px 18px;border-radius:12px;border:1px solid var(--glass-border);background:var(--glass);backdrop-filter:blur(10px);color:var(--text);font-size:.95rem;outline:none;margin-bottom:20px} .faq-cat{margin-bottom:32px} .faq-cat-title{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--text3);margin-bottom:10px} .faq-item{background:var(--glass);border:1px solid var(--glass-border);border-radius:12px;margin-bottom:6px;overflow:hidden;transition:all .2s} .faq-item:hover{border-color:rgba(242,178,51,.2)} .faq-q{padding:16px 20px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:.92rem} .faq-q .n{color:var(--blue);font-size:.78rem;font-weight:700;background:var(--blue-glow);padding:2px 8px;border-radius:4px;margin-right:10px} .faq-q .arr{color:var(--text3);transition:transform .2s;font-size:.8rem} .faq-item.open .arr{transform:rotate(180deg)} .faq-a{max-height:0;overflow:hidden;transition:max-height .3s} .faq-a-inner{padding:0 20px 16px;color:var(--text2);font-size:.9rem;line-height:1.75} /* GUIDES */ .guides-grid{max-width:1280px;margin:0 auto;padding:0 20px 40px;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px} .guide-card{background:var(--glass);border:1px solid var(--glass-border);border-radius:16px;padding:28px;transition:all .25s} .guide-card:hover{border-color:var(--blue);transform:translateY(-3px)} .guide-card .emoji{font-size:2rem;margin-bottom:12px} .guide-card h3{font-size:1.05rem;margin-bottom:8px;font-family:'Inter',sans-serif} .guide-card p{color:var(--text2);font-size:.85rem;line-height:1.6} /* COMMUNITY */ .community{max-width:1280px;margin:0 auto;padding:20px} .comm-banner{background:linear-gradient(135deg,rgba(242,178,51,.06),rgba(62,230,138,.04));border:1px solid rgba(242,178,51,.15);border-radius:16px;padding:40px;text-align:center} .comm-banner h3{font-family:'Inter',sans-serif;font-size:1.4rem;margin-bottom:8px;font-weight:400} .comm-banner h3 em{color:var(--blue);font-style:italic} .comm-banner p{color:var(--text2);max-width:550px;margin:0 auto} /* FOOTER */ footer{max-width:1280px;margin:40px auto 0;padding:24px 20px;border-top:1px solid var(--glass-border);text-align:center} footer .f-links{display:flex;justify-content:center;gap:20px;margin-bottom:12px} footer .f-links a{color:var(--text3);font-size:.85rem} footer .f-links a:hover{color:var(--text)} footer .copy{color:var(--text3);font-size:.78rem} footer .disc{color:var(--text3);font-size:.68rem;margin-top:10px;max-width:600px;margin-left:auto;margin-right:auto;line-height:1.5} @media(max-width:768px){ .nav-links{display:flex;order:-1;width:100%;justify-content:center;gap:2px;padding:8px 0} .nav-bar{flex-wrap:wrap} .hamburger{display:none}.hero h1{font-size:1.6rem} .card-grid{grid-template-columns:1fr}.hero-pills{flex-direction:column;align-items:center} .controls{flex-direction:column}.search-wrap{margin-left:0}.search-wrap input{width:100%} } /* ============================================================ DESIGN POLISH (2026-06-02): depth, premium CTAs, motion, a11y Additive layer — enhances existing components, no layout change. ============================================================ */ :root{ --shadow-card:0 2px 6px rgba(0,0,0,.28), 0 1px 2px rgba(0,0,0,.35); --shadow-lift:0 20px 44px -14px rgba(0,0,0,.6), 0 0 30px -10px rgba(242,178,51,.22); --ease:cubic-bezier(.4,0,.2,1); } /* Cards get real depth + a premium lift on hover */ .card,.guide-card,.pk-card,.faq-item{ box-shadow:var(--shadow-card); transition:transform 200ms var(--ease-out-quart),box-shadow 200ms var(--ease-out-quart),border-color 200ms var(--ease-out-quart),background 200ms var(--ease-out-quart); } .card:hover,.guide-card:hover,.pk-card:hover{box-shadow:var(--shadow-lift)} /* Subtle top sheen on glass cards (positioned parents only) */ .card{overflow:hidden} .card::after{content:"";position:absolute;top:0;left:0;right:0;height:60%;pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,.045),transparent)} /* Primary CTAs: gold gradient + glow instead of flat fill */ .btn-visit,.nav-right a.btn-started,.tbl-btn{ background:linear-gradient(135deg,var(--gold-light),var(--gold)); box-shadow:0 4px 14px -4px rgba(242,178,51,.5); } .btn-visit:hover,.nav-right a.btn-started:hover{ background:linear-gradient(135deg,var(--gold-pale),var(--gold-light)); box-shadow:0 9px 24px -4px rgba(242,178,51,.6);transform:translateY(-1px); } /* Hero headline accent glow */ .hero h1 em{text-shadow:0 0 32px rgba(62,230,138,.24)} /* Active chip gets a soft glow ring */ .chip,.hero-pill{transition:transform 160ms var(--ease-out-quart),background 160ms ease,border-color 160ms ease,color 160ms ease,box-shadow 160ms ease} .chip.on{box-shadow:0 2px 12px -2px rgba(242,178,51,.3)} /* Accessible keyboard focus rings (a11y) */ a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--emerald);outline-offset:2px;border-radius:4px} /* Smoother nav CTA + review buttons */ .btn-review:hover{box-shadow:0 4px 14px -6px rgba(0,0,0,.4)} /* ============================================================ HOMEPAGE POLISH (2026-06-11): how-it-works band, footer v2, controls search, ticker hover-pause, gold-CTA contrast. Additive layer. No layout changes to existing components. ============================================================ */ /* Buttons keep dark ink on gold in the hover state too */ .btn-visit:hover,.nav-right a.btn-started:hover{color:#0a1a10} /* Ticker: let people read it */ .ticker-wrap:hover .ticker-inner{animation-play-state:paused} /* HOW THE GRIND WORKS */ .hiw{max-width:1400px;margin:48px auto 0;padding:0 24px} .hiw-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px} .hiw-eyebrow{display:flex;align-items:center;gap:12px;font-family:'Inter',sans-serif;font-size:.85rem;letter-spacing:4px;text-transform:uppercase;color:var(--cyan);font-weight:700} .hiw-eyebrow-line{width:24px;height:2px;background:var(--cyan)} .hiw-link{font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--text2);font-weight:700;transition:color .2s var(--ease)} .hiw-link:hover{color:var(--cyan)} .hiw-steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--glass-border);border-bottom:1px solid var(--glass-border)} .hiw-step{padding:28px 28px 30px 0;border-right:1px solid var(--glass-border);margin-right:28px} .hiw-step:last-child{border-right:none;margin-right:0;padding-right:0} .hiw-num{font-family:'JetBrains Mono',monospace;font-size:.95rem;font-weight:700;color:var(--cyan);letter-spacing:2px;margin-bottom:12px} .hiw-title{font-family:'Inter',sans-serif;font-size:1.5rem;font-weight:800;color:var(--text);letter-spacing:-.02em;margin-bottom:8px} .hiw-txt{color:var(--text2);font-size:1.08rem;line-height:1.7;max-width:40ch} @media(max-width:900px){ .hiw-steps{grid-template-columns:1fr} .hiw-step{border-right:none;margin-right:0;padding:22px 0;border-bottom:1px solid var(--glass-border)} .hiw-step:last-child{border-bottom:none} } /* FOOTER V2 */ footer.f2{max-width:none;margin:72px 0 0;padding:0;border-top:1px solid var(--glass-border);text-align:left;background:linear-gradient(180deg,transparent,rgba(62,230,138,.025))} .f2-grid{max-width:1400px;margin:0 auto;padding:56px 24px 40px;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:48px} .f2-logo{font-family:'Inter',sans-serif;font-weight:900;font-size:1.3rem;letter-spacing:3px;color:var(--text)} .f2-logo-link{display:inline-block;line-height:0;margin-bottom:14px} .f2-logo-img{height:62px;width:auto;display:block} .f2-mantra{display:none} .f2-mantra{font-family:'JetBrains Mono',monospace;font-size:.72rem;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);font-weight:700;margin:10px 0 16px} .f2-line{color:var(--text2);font-size:.88rem;line-height:1.7;max-width:36ch} .f2-col h4{font-family:'Inter',sans-serif;font-size:.7rem;letter-spacing:2.5px;text-transform:uppercase;color:var(--text3);font-weight:800;margin-bottom:16px} .f2-col a{display:block;color:var(--text2);font-size:.88rem;padding:5px 0;transition:color .2s var(--ease)} .f2-col a:hover{color:var(--cyan)} .f2-bottom{border-top:1px solid var(--glass-border)} .f2-bottom > div{max-width:1400px;margin:0 auto;padding:0 24px} .f2-copy{padding-top:20px !important;color:var(--text3);font-size:.78rem;font-weight:600} .f2-disc{padding-top:8px !important;padding-bottom:28px !important;color:var(--text3);font-size:.68rem;line-height:1.6;max-width:760px} @media(max-width:900px){.f2-grid{grid-template-columns:1fr 1fr;gap:32px}.f2-brand{grid-column:1/-1}} @media(max-width:520px){.f2-grid{grid-template-columns:1fr}} /* MOBILE NAV (2026-06-11): the old fixed-height wrap overflowed onto the hero. One scrollable link row, compact actions, height follows content. */ @media(max-width:768px){ .nav-bar{height:auto;flex-wrap:wrap;align-items:center;padding:8px 14px;gap:0} .nav-logo{border-right:none;padding-right:10px;height:auto} .nav-logo img{height:42px} .nav-links{order:2;width:100%;justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:2px 0 8px} .nav-links::-webkit-scrollbar{display:none} .nav-links a{padding:8px 10px;font-size:.84rem;flex-shrink:0} .nav-links a.active::after{left:10px;right:10px} .nav-right{order:1;margin-left:auto;border-left:none;padding:0;align-items:center} .nav-right a[title="Reddit"],.nav-right a[title="X / Twitter"],.nav-right a[title="TikTok"]{display:none} .toggle-label{display:none} .nav-right a.btn-login{padding:0 8px;font-size:.8rem} .nav-right a.btn-started{padding:0 12px;font-size:.8rem;height:32px} } /* ============================================================ VISUAL IDENTITY PASS (2026-06-11 v2): carry the SG/INTEL terminal language through the whole page. Square geometry, hairline borders, mono data, tier-colored hierarchy. ============================================================ */ /* Page texture: flat dark background, no grid */ /* CARDS: glass blobs -> data panels */ .card{border-radius:0;background:linear-gradient(180deg,rgba(5,12,8,.92),rgba(8,18,12,.88));backdrop-filter:none;border:1px solid rgba(242,178,51,.16);padding:24px 26px} .card::after{display:none} .card::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--gold),transparent 65%);opacity:.55;transition:opacity .28s var(--ease)} .card[data-tier="S"]::before{background:linear-gradient(90deg,var(--cyan),transparent 65%)} .card:hover{border-color:rgba(62,230,138,.45);background:linear-gradient(180deg,rgba(5,14,9,.95),rgba(8,20,13,.9));transform:translateY(-4px)} .card:hover::before{opacity:1} .card-name{font-weight:900;letter-spacing:-.02em} .card-daily{border-radius:0;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:.95rem;letter-spacing:-.5px} .card-stars{letter-spacing:2px} .card-stats{border-radius:0;gap:1px} .card-stat{background:rgba(5,10,7,.85)} .card-stat .lbl{font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:1.5px} .card-stat .val{font-family:'JetBrains Mono',monospace;font-size:.95rem;font-variant-numeric:tabular-nums} .card-collect{border-radius:0;border:1px solid rgba(255,255,255,.05);background:rgba(255,255,255,.015);font-size:.84rem} .card-meta .tag{border-radius:0;font-family:'JetBrains Mono',monospace;font-size:.68rem;letter-spacing:.5px;text-transform:uppercase} .card-promo{border-radius:0;border-left:1px solid var(--glass-border)} a.card-promo:hover{border-left-color:var(--glass-border)} .btn-visit{border-radius:0;text-transform:uppercase;letter-spacing:1.5px;font-size:.82rem;font-weight:800} .btn-review{border-radius:0;text-transform:uppercase;letter-spacing:1.5px;font-size:.82rem} /* CONTROLS: pill chips -> command toggles */ .chip{border-radius:0;font-family:'JetBrains Mono',monospace;font-size:.74rem;letter-spacing:1px;text-transform:uppercase;font-weight:700;padding:9px 16px} .chip.on{background:var(--cyan);border-color:var(--cyan);color:#0a1a10;box-shadow:0 0 18px -4px rgba(62,230,138,.55)} .chip:hover{border-color:var(--cyan);color:var(--cyan)} .view-btns{border-radius:0} .view-btns button{font-family:'JetBrains Mono',monospace;font-size:.74rem;letter-spacing:1px;text-transform:uppercase;padding:9px 18px} .view-btns button.on{background:var(--cyan)} .search-wrap input{border-radius:0;font-family:'JetBrains Mono',monospace;font-size:.78rem;width:240px} .search-wrap input:focus{border-color:var(--cyan);box-shadow:0 0 14px -4px rgba(62,230,138,.4)} .search-wrap::before{content:">";color:var(--cyan);font-family:'JetBrains Mono',monospace;font-weight:700;font-size:.85rem} .sort-wrap select{border-radius:0;font-family:'JetBrains Mono',monospace;font-size:.74rem;letter-spacing:.5px} .sort-wrap select:focus{box-shadow:0 0 14px -4px rgba(62,230,138,.4)} /* TIER HEADERS: rule line runs to the edge */ .tier-hdr{position:relative} .tier-hdr::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(62,230,138,.3),transparent);min-width:60px} .tier-badge{border-radius:0} .tier-label{font-style:normal;font-family:'JetBrains Mono',monospace;font-size:.74rem;letter-spacing:.5px;color:var(--text2)} /* TABLE: same geometry */ .tbl-btn{border-radius:0;font-family:'JetBrains Mono',monospace;letter-spacing:1px;text-transform:uppercase} .tbl-tier{border-radius:0;font-family:'JetBrains Mono',monospace} /* HERO: depth field behind the left column */ .hero-brutalist{position:relative} .hero-brutalist::before{display:none} .hero-primary{font-family:'JetBrains Mono',monospace;letter-spacing:2px} .hero-secondary{font-family:'JetBrains Mono',monospace;letter-spacing:2px} /* the mantra sentence gets its own visual weight (same words) */ .hero-mantra{display:block;margin-top:14px;font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--cyan);font-size:.95rem;letter-spacing:.5px} /* nav CTA matches */ .nav-right a.btn-started{border-radius:0;font-family:'JetBrains Mono',monospace;letter-spacing:1px;text-transform:uppercase;font-size:.74rem} /* footer geometry */ .f2-col a{font-size:.86rem} /* ============================================================ MOTION PASS (2026-06-11, Emil framework): transform/opacity only, ease-out custom curves, <300ms, frequency-gated, reduced-motion respected. ============================================================ */ :root{--ease-out-quart:cubic-bezier(0.23,1,0.32,1)} /* Press feedback: every pressable element answers the press (100-160ms) */ .btn-visit:active,.btn-review:active,.chip:active,.view-btns button:active, .hero-primary:active,.hero-secondary:active,.nav-right a.btn-started:active, .tbl-btn:active,.copy-btn:active,.hiw-link:active{transform:scale(0.97)} .btn-visit,.btn-review,.hero-primary,.hero-secondary,.nav-right a.btn-started,.tbl-btn,.copy-btn{ transition:transform 160ms var(--ease-out-quart),background 160ms ease,color 160ms ease,border-color 160ms ease,box-shadow 160ms ease} /* Card hover physics: desktop pointers only, fast settle */ @media (hover:hover) and (pointer:fine){ .card:hover{transform:translateY(-7px)} .card:hover{box-shadow:0 26px 52px -16px rgba(0,0,0,.65),0 0 36px -8px rgba(62,230,138,.3)} } @media (hover:none){ .card:hover{transform:none} } /* Scroll entrance: once, subtle, staggered 40ms within each grid row-batch */ .card-grid .card{opacity:0;transform:translateY(22px) scale(.985)} .card-grid .card.in{opacity:1;transform:translateY(0); transition:opacity 420ms var(--ease-out-quart),transform 420ms var(--ease-out-quart), box-shadow 200ms var(--ease-out-quart),border-color 200ms var(--ease-out-quart),background 200ms var(--ease-out-quart)} .no-io .card-grid .card{opacity:1;transform:none} /* Reduced motion: keep fades, kill movement */ @media (prefers-reduced-motion:reduce){ .card-grid .card{transform:none} .card-grid .card.in{transition:opacity 200ms ease} .card:hover,.guide-card:hover,.pk-card:hover{transform:none} .btn-visit:active,.chip:active,.hero-primary:active{transform:none} .ticker-inner{animation:none} .intel-display::before{animation:none} } /* ATMOSPHERE PASS (2026-06-11): cursor glow + intel boot */ #cursorGlow{position:fixed;top:0;left:0;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(62,230,138,.075),transparent 62%);pointer-events:none;z-index:3;opacity:0;transition:opacity 600ms ease;will-change:transform} @media (hover:none),(prefers-reduced-motion:reduce){#cursorGlow{display:none}} #sparkLine{stroke-dasharray:1;stroke-dashoffset:1;animation:drawSpark 1.2s 150ms var(--ease-out-quart) forwards} #sparkArea{opacity:0;animation:sparkFill 600ms 900ms ease forwards} @keyframes drawSpark{to{stroke-dashoffset:0}} @keyframes sparkFill{to{opacity:1}} @media (prefers-reduced-motion:reduce){ #sparkLine{animation:none;stroke-dashoffset:0} #sparkArea{animation:none;opacity:1} } /* ============================================================================ SHARED SECTION SYSTEM (v19) — one section-intro pattern for every page. Extracted from the homepage "The Rankings" header so all pages match. ========================================================================== */ .section-wrap{max-width:1400px;margin:76px auto 0;padding:0 24px} .section-head{border-top:1px solid var(--glass-border);border-image:linear-gradient(90deg,transparent,rgba(242,178,51,.28),transparent) 1;padding-top:32px;margin-bottom:24px} .section-eyebrow{display:flex;align-items:center;gap:12px;font-family:'Inter',sans-serif;font-size:.72rem;color:var(--cyan);letter-spacing:4px;text-transform:uppercase;font-weight:700;margin-bottom:14px} .section-eyebrow-line{width:28px;height:2px;background:linear-gradient(90deg,var(--cyan),transparent)} .section-title{font-family:'Inter',sans-serif;font-size:2.25rem;font-weight:900;letter-spacing:-.025em;margin:0 0 10px;color:var(--text);line-height:1.06} .section-sub{color:var(--text2);font-size:.96rem;max-width:640px;margin:0;line-height:1.6} @media(max-width:640px){.section-title{font-size:1.7rem}.section-wrap{margin-top:48px}} /* ============================================================================ YIELD CALCULATOR — interactive terminal panel (homepage showpiece) ========================================================================== */ .calc-panel{position:relative;display:grid;grid-template-columns:1fr 1.15fr;gap:0;border:1px solid var(--glass-border);border-radius:14px;background:linear-gradient(135deg,var(--glass),rgba(10,26,16,.6));overflow:hidden} .calc-panel::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 120% at 0% 0%,var(--cyan-glow),transparent 55%);pointer-events:none} .calc-left{padding:30px 30px 34px;border-right:1px solid var(--glass-border);position:relative} .calc-right{padding:30px 30px 34px;position:relative;display:flex;flex-direction:column;justify-content:center;gap:18px} .calc-tag{font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);font-weight:800;margin-bottom:14px;display:flex;align-items:center;gap:8px} .calc-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px var(--cyan)} .calc-q{font-family:'Inter',sans-serif;font-size:1.05rem;font-weight:700;color:var(--text);margin:0 0 22px;line-height:1.3} .calc-sites{font-family:'Inter',sans-serif;font-size:2.6rem;font-weight:900;color:var(--cyan);line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums} .calc-sites .calc-sites-lbl{display:block;font-size:.66rem;letter-spacing:2px;text-transform:uppercase;color:var(--text3);font-weight:700;margin-top:8px} .calc-slider{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:6px;background:var(--glass-border);margin:24px 0 6px;outline:none;cursor:pointer} .calc-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;background:var(--cyan);border:3px solid var(--bg);box-shadow:0 0 0 1px var(--cyan),0 0 14px var(--cyan-glow);cursor:pointer} .calc-slider::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--cyan);border:3px solid var(--bg);box-shadow:0 0 0 1px var(--cyan);cursor:pointer} .calc-scale{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;font-size:.6rem;color:var(--text3);letter-spacing:1px} .calc-readout{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--glass-border)} .calc-readout:last-of-type{border-bottom:none;padding-bottom:0} .calc-readout .calc-rlbl{font-family:'JetBrains Mono',monospace;font-size:.66rem;letter-spacing:2px;text-transform:uppercase;color:var(--text3);font-weight:700} .calc-readout .calc-rval{font-family:'Inter',sans-serif;font-weight:900;letter-spacing:-.03em;font-variant-numeric:tabular-nums} #sgCalcDaily{font-size:2.1rem;color:var(--gold)} #sgCalcMonthly{font-size:1.5rem;color:var(--text)} #sgCalcYearly{font-size:1.5rem;color:var(--text)} .calc-barwrap{height:5px;border-radius:5px;background:var(--glass-border);overflow:hidden;margin-top:2px} #sgCalcBar{height:100%;width:40%;background:linear-gradient(90deg,var(--emerald-dark),var(--cyan));transition:width .25s var(--ease)} .calc-cta{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:6px;background:var(--emerald);color:#0a1a10;font-family:'Inter',sans-serif;font-weight:800;font-size:.92rem;padding:12px 22px;border-radius:10px;text-decoration:none;transition:transform .15s var(--ease),box-shadow .15s var(--ease)} .calc-cta:hover{transform:translateY(-1px);box-shadow:0 8px 24px var(--emerald-glow)} .calc-fine{font-family:'JetBrains Mono',monospace;font-size:.6rem;color:var(--text3);letter-spacing:.5px;margin-top:2px} @media(max-width:760px){.calc-panel{grid-template-columns:1fr}.calc-left{border-right:none;border-bottom:1px solid var(--glass-border)}} /* ============================================================================ PROOF BAND — 4 square terminal cells ========================================================================== */ .proof-band{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:24px} .proof-cell{position:relative;border:1px solid var(--glass-border);border-radius:14px;background:linear-gradient(180deg,rgba(62,230,138,.045),rgba(7,16,11,.55));padding:24px 22px;overflow:hidden;transition:border-color .2s var(--ease),transform .2s var(--ease),box-shadow .2s var(--ease)} .proof-cell:hover{border-color:rgba(62,230,138,.5);transform:translateY(-3px);box-shadow:0 18px 44px -16px rgba(0,0,0,.65),0 0 26px -12px rgba(62,230,138,.3)} .proof-cell:hover .proof-ico{background:rgba(62,230,138,.16);border-color:rgba(62,230,138,.4)} .proof-cell::after{content:"";position:absolute;top:13px;right:13px;width:8px;height:8px;border-top:1.5px solid var(--cyan);border-right:1.5px solid var(--cyan);opacity:.55} .proof-ico{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:11px;background:rgba(62,230,138,.09);border:1px solid rgba(62,230,138,.2);color:var(--cyan);margin-bottom:16px;transition:background .2s var(--ease),border-color .2s var(--ease)} .proof-ico svg{width:24px;height:24px;display:block;filter:drop-shadow(0 0 6px rgba(62,230,138,.4))} .proof-h{font-family:'Inter',sans-serif;font-size:1rem;font-weight:800;color:var(--text);margin:0 0 6px;letter-spacing:-.01em} .proof-p{color:var(--text2);font-size:.83rem;line-height:1.58;margin:0} @media(max-width:860px){.proof-band{grid-template-columns:repeat(2,1fr)}} @media(max-width:460px){.proof-band{grid-template-columns:1fr}} /* ============================================================================ RECENT DROPS strip — live free-SC drops from the feed ========================================================================== */ .rd-head{font-family:'JetBrains Mono',monospace;font-size:.7rem;letter-spacing:2.5px;text-transform:uppercase;color:var(--cyan);font-weight:800;margin-bottom:14px;display:flex;align-items:center;gap:10px} .rd-head .rd-dot{animation:blink 1.2s infinite} .rd-head .rd-sub{color:var(--text3);font-weight:600;letter-spacing:1.5px;text-transform:none;font-size:.66rem} .rd-strip{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin} .rd-card{flex:0 0 auto;min-width:200px;max-width:240px;display:flex;flex-direction:column;gap:3px;border:1px solid rgba(242,178,51,.16);border-radius:0;background:linear-gradient(180deg,rgba(5,12,8,.92),rgba(8,18,12,.88));padding:14px 16px;text-decoration:none;transition:border-color .2s var(--ease),transform .2s var(--ease)} .rd-card:hover{border-color:rgba(62,230,138,.45);transform:translateY(-2px)} .rd-card .rd-head{display:flex;align-items:center;gap:8px;text-transform:none;letter-spacing:0} .rd-card .rd-logo{width:36px;height:36px;object-fit:contain;border-radius:8px;background:rgba(255,255,255,.06);padding:3px;flex:0 0 auto} .rd-card .rd-site{font-family:'Inter',sans-serif;font-weight:800;color:var(--text);font-size:.95rem;letter-spacing:-.01em} .rd-card .rd-status{margin-left:auto;font-family:'JetBrains Mono',monospace;font-size:.56rem;letter-spacing:1px;text-transform:uppercase;color:var(--cyan);border:1px solid rgba(62,230,138,.45);padding:2px 5px} /* an info-only drop (no own-domain claim link) must not wear the same green badge as a one-click claim: the badge is the promise (owner 8/15) */ .rd-card .rd-status-info{color:var(--text2);border-color:rgba(255,255,255,.18)} .rd-card .rd-offer{color:var(--text2);font-size:.8rem;line-height:1.35} .rd-card .rd-code{font-family:'JetBrains Mono',monospace;font-size:.8rem;font-weight:800;letter-spacing:1px;color:var(--text);background:rgba(62,230,138,.12);border:1px dashed rgba(62,230,138,.45);border-radius:6px;padding:4px 8px;margin-top:6px;align-self:flex-start} .rd-card .rd-when{font-family:'JetBrains Mono',monospace;font-size:.62rem;letter-spacing:.5px;color:var(--cyan);font-weight:700;margin-top:4px} .rd-card .rd-vote{margin-top:8px;align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font-family:'JetBrains Mono',monospace;font-size:.66rem;font-weight:700;letter-spacing:.5px;color:var(--text3);background:none;border:1px solid var(--glass-border);border-radius:6px;padding:4px 9px;cursor:pointer;transition:color .15s,border-color .15s} .rd-card .rd-vote:hover{color:var(--cyan);border-color:rgba(62,230,138,.45)} .rd-card .rd-vote.on{color:var(--cyan);border-color:rgba(62,230,138,.45);cursor:default} .rd-card .rd-vote b{font-weight:800} /* ============================================================================ STICKY CTA — reveal on scroll, dismissible ========================================================================== */ #sgSticky{position:fixed;left:0;right:0;bottom:0;z-index:80;display:flex;align-items:center;justify-content:center;gap:18px;padding:13px 20px;background:linear-gradient(90deg,rgba(15,40,24,.97),rgba(10,26,16,.97));border-top:1px solid var(--gold);backdrop-filter:blur(10px);transform:translateY(120%);transition:transform .32s var(--ease);box-shadow:0 -8px 30px rgba(0,0,0,.4)} #sgSticky.on{transform:translateY(0)} .sgst-txt{font-family:'Inter',sans-serif;font-size:.92rem;font-weight:700;color:var(--text)} .sgst-txt b{color:var(--gold)} .sgst-cta{background:var(--emerald);color:#0a1a10;font-family:'Inter',sans-serif;font-weight:800;font-size:.88rem;padding:10px 20px;border-radius:9px;text-decoration:none;white-space:nowrap;transition:transform .15s var(--ease)} .sgst-cta:hover{transform:translateY(-1px)} .sgst-x{background:none;border:none;color:var(--text3);font-size:1.3rem;line-height:1;cursor:pointer;padding:4px 8px;transition:color .15s} .sgst-x:hover{color:var(--text)} @media(max-width:560px){.sgst-txt{font-size:.8rem}#sgSticky{gap:10px;padding:10px 12px}.sgst-cta{padding:9px 14px;font-size:.8rem}} @media (prefers-reduced-motion:reduce){ .calc-cta,.proof-cell,.sgst-cta,#sgSticky,#sgCalcBar{transition:none} .proof-cell:hover,.calc-cta:hover{transform:none} } /* ============================================================================ GRINDBOT — floating chat session wizard (v22) ========================================================================== */ #gwBubble{position:fixed;right:20px;bottom:20px;z-index:90;display:flex;align-items:center;gap:9px;background:linear-gradient(135deg,var(--bg2),var(--bg));color:var(--cyan);border:1px solid var(--cyan);border-radius:999px;padding:13px 20px;font-family:'JetBrains Mono',monospace;font-size:.78rem;font-weight:800;letter-spacing:1.5px;cursor:pointer;box-shadow:0 8px 28px rgba(0,0,0,.5),0 0 18px var(--cyan-glow);transition:transform .15s var(--ease),box-shadow .15s var(--ease)} #gwBubble:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(0,0,0,.55),0 0 26px var(--cyan-glow)} #gwBubble.lift{bottom:78px} /* Ace lives in the nav now (owner 2026-08-19), not as a floating bubble over the copy. Sizing comes from the existing .nav-right button rule; only the spade glyph needs its pill-era right margin removed so it sits centred in the 38px slot. */ #gwNavBtn{width:30px} #gwNavBtn .gw-spade{margin-right:0;background:transparent;color:currentColor;box-shadow:none;width:auto;height:auto;font-size:1.25em} .gw-dot{width:8px;height:8px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan)} .gw-spade{display:inline-flex;align-items:center;justify-content:center;width:1.35em;height:1.35em;background:#fff;color:#000;border-radius:4px;font-size:.92em;line-height:1;font-weight:900;margin-right:5px;flex:0 0 auto;box-shadow:0 1px 4px rgba(0,0,0,.4)} #gwBackdrop{position:fixed;inset:0;z-index:98;background:rgba(0,0,0,.4);backdrop-filter:blur(2px);display:none} #gwBackdrop.on{display:block} #gwPanel{position:fixed;right:20px;bottom:88px;z-index:99;width:min(380px,calc(100vw - 32px));max-height:min(580px,80vh);display:none;flex-direction:column;background:linear-gradient(160deg,var(--bg2),var(--bg));border:1px solid var(--glass-border);border-radius:16px;overflow:hidden;box-shadow:0 24px 64px rgba(0,0,0,.7),0 0 32px rgba(62,230,138,.07);transition:opacity .22s var(--ease);opacity:0} #gwPanel.on{display:flex;opacity:1} #gwPanel[data-view]{height:min(580px,80vh)} #gwPanel .gw-view{display:none;flex-direction:column;flex:1;min-height:0} #gwPanel[data-view="home"] .gw-home,#gwPanel[data-view="chat"] .gw-chatv,#gwPanel[data-view="help"] .gw-helpv{display:flex} .gw-home{overflow-y:auto} .gw-hero{background:linear-gradient(165deg,#10301f,#0a1a10 75%);padding:18px 18px 54px;position:relative;flex:0 0 auto} .gw-hero:after{content:"";position:absolute;inset:0;background:radial-gradient(420px 180px at 85% -20%,rgba(62,230,138,.18),transparent 70%);pointer-events:none} .gw-hero-top{display:flex;align-items:center;justify-content:space-between;position:relative;z-index:1} .gw-hi{position:relative;z-index:1;margin-top:26px;font-family:'Inter',sans-serif;font-weight:900;font-size:1.45rem;line-height:1.25;color:#fff} .gw-hi .gw-wave{font-weight:400} .gw-hcards{display:flex;flex-direction:column;gap:12px;padding:0 14px 16px;margin-top:-34px;position:relative;z-index:2} .gw-hcard{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;width:100%;background:var(--surface);border:1px solid var(--glass-border);border-radius:12px;padding:14px 16px;box-shadow:0 10px 26px rgba(0,0,0,.35);color:var(--text)} button.gw-hcard{cursor:pointer;transition:border-color .15s,transform .12s} button.gw-hcard:hover{border-color:var(--emerald);transform:translateY(-1px)} .gw-hcard-txt{display:flex;flex-direction:column;gap:3px} .gw-hcard-txt b{font-family:'Inter',sans-serif;font-size:.92rem} .gw-hcard-txt small{color:var(--text3);font-size:.75rem} .gw-go{color:var(--emerald);font-size:1rem} .gw-help-card{flex-direction:column;align-items:stretch;padding:10px} .gw-hsearch{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--glass-border);border-radius:9px;padding:8px 12px} .gw-hsearch input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--text);font-family:'Inter',sans-serif;font-size:.85rem} .gw-hsearch input::placeholder{color:var(--text3)} .gw-mag{color:var(--text3);transform:rotate(-45deg);font-size:1.05rem;line-height:1} .gw-hlinks{display:flex;flex-direction:column} .gw-hl{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:11px 6px;color:var(--text2);font-size:.82rem;text-decoration:none;border-bottom:1px solid var(--glass-border)} .gw-hl:last-child{border-bottom:none} .gw-hl:hover{color:var(--text)} .gw-arr{color:var(--text3);font-size:1rem} .gw-hl-none{padding:12px 6px;color:var(--text3);font-size:.8rem} .gw-hfull{overflow-y:auto;padding:6px 14px} .gw-helpv .gw-head{flex:0 0 auto} .gw-tabs{display:flex;border-top:1px solid var(--glass-border);background:rgba(0,0,0,.25);flex:0 0 auto} .gw-tabs button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;background:none;border:none;color:var(--text3);font-family:'Inter',sans-serif;font-size:.68rem;font-weight:700;padding:9px 0 8px;cursor:pointer} .gw-tabs button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .gw-tabs button.on{color:var(--emerald)} .gw-head{display:flex;align-items:baseline;gap:10px;padding:14px 16px;border-bottom:1px solid var(--glass-border);background:rgba(62,230,138,.04)} .gw-title{display:flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;font-size:.78rem;font-weight:800;letter-spacing:2.5px;color:var(--cyan)} .gw-sub{font-family:'JetBrains Mono',monospace;font-size:.6rem;letter-spacing:1.5px;color:var(--text3);text-transform:uppercase} .gw-x{margin-left:auto;background:none;border:none;color:var(--text3);font-size:1.25rem;line-height:1;cursor:pointer;padding:0 2px} .gw-x:hover{color:var(--text)} .gw-msgs{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;min-height:180px} .gw-m{max-width:85%;padding:10px 14px;border-radius:12px;font-size:.88rem;line-height:1.45;font-family:'Inter',sans-serif} .gw-m.bot{align-self:flex-start;background:var(--surface);border:1px solid var(--glass-border);color:var(--text);border-bottom-left-radius:4px} .gw-m.bot b{color:var(--gold)} .gw-m.me{align-self:flex-end;background:var(--emerald);color:#0a1a10;font-weight:700;border-bottom-right-radius:4px} .gw-typing{display:flex;gap:5px;padding:13px 14px} .gw-typing span{width:6px;height:6px;border-radius:50%;background:var(--text3);animation:gwBlink 1s infinite} .gw-typing span:nth-child(2){animation-delay:.18s} .gw-typing span:nth-child(3){animation-delay:.36s} @keyframes gwBlink{0%,80%,100%{opacity:.25}40%{opacity:1}} .gw-replies{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px 16px;border-top:1px solid var(--glass-border)} .gw-replies:empty{display:none} .gw-chip{background:transparent;border:1px solid var(--cyan);color:var(--cyan);border-radius:999px;padding:8px 14px;font-family:'JetBrains Mono',monospace;font-size:.72rem;font-weight:700;letter-spacing:.5px;cursor:pointer;transition:background .15s,color .15s} .gw-chip:hover{background:var(--cyan);color:#0a1a10} .gw-input{display:flex;gap:8px;padding:10px 14px 14px;border-top:1px solid var(--glass-border)} .gw-input input{flex:1;min-width:0;background:var(--surface);border:1px solid var(--glass-border);border-radius:999px;padding:9px 14px;color:var(--text);font-family:'Inter',sans-serif;font-size:.85rem;outline:none} .gw-input input:focus{border-color:var(--emerald)} .gw-input input::placeholder{color:var(--text3)} .gw-send{flex:0 0 38px;width:38px;height:38px;background:var(--emerald);color:#0a1a10;border:none;border-radius:50%;font-size:1.05rem;font-weight:800;cursor:pointer;transition:background .15s,transform .12s} .gw-send:hover{background:#7FF0B5}.gw-send:active{transform:scale(.92)} .gw-key-btn{background:none;border:none;color:var(--text3);cursor:pointer;font-size:.95rem;line-height:1;padding:0 2px;opacity:.7;transition:opacity .15s} .gw-key-btn:hover{opacity:1} .gw-key-ov{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.62);display:flex;align-items:center;justify-content:center;padding:20px} .gw-key-box{background:linear-gradient(160deg,var(--bg2),var(--bg));border:1px solid var(--glass-border);border-radius:14px;padding:22px;max-width:360px;width:100%;box-shadow:0 24px 64px rgba(0,0,0,.7)} .gw-key-h{font-family:'Inter',sans-serif;font-weight:900;font-size:1.05rem;color:var(--text);display:flex;align-items:center;gap:8px;margin-bottom:10px} .gw-key-p{color:var(--text2);font-size:.85rem;line-height:1.5;margin:0 0 12px} .gw-key-p b{color:var(--gold)} .gw-key-in{width:100%;background:var(--surface);border:1px solid var(--glass-border);border-radius:8px;padding:10px 12px;color:var(--text);font-family:'JetBrains Mono',monospace;font-size:.82rem;outline:none;box-sizing:border-box} .gw-key-in:focus{border-color:var(--emerald)} .gw-key-warn{color:var(--text3);font-size:.72rem;line-height:1.45;margin:10px 0 16px} .gw-key-btns{display:flex;gap:8px} .gw-key-btns button{font-family:'Inter',sans-serif;font-weight:800;font-size:.8rem;padding:9px 16px;border-radius:8px;cursor:pointer;border:1px solid var(--glass-border);background:transparent;color:var(--text2);transition:border-color .15s} .gw-key-btns button:hover{border-color:var(--emerald)} .gw-key-save{background:var(--emerald)!important;color:#0a1a10!important;border-color:var(--emerald)!important} .gw-key-msg{color:var(--text2);font-size:.78rem;margin-top:10px;min-height:1em} @media (prefers-reduced-motion:reduce){#gwBubble,.gw-chip{transition:none}.gw-typing span{animation:none;opacity:.6}} @media print{#gwBubble,#gwPanel{display:none!important}} /* ===== Visual Polish Pass 2 (2026-06-18) — focus parity, star crisp, restrained depth ===== */ /* Keyboard parity: cards get the same lift/border as hover on :focus-visible (base a/button/input outline already exists at line ~247). Color is not the only focus signal. */ .card:focus-visible,.proof-cell:focus-visible{outline:2px solid var(--emerald);outline-offset:3px;transform:translateY(-4px);border-color:rgba(62,230,138,.45)} /* Star ratings: filled stay green (quality/proof). Crisp spacing; the hollow empty glyph already reads lighter than the solid one. No SVG, no markup change, no layout shift. */ .card-stars{letter-spacing:2.5px;line-height:1;font-size:.86rem} @media (prefers-reduced-motion:reduce){.card:focus-visible,.proof-cell:focus-visible{transform:none}} /* Mobile cleanup (Jimmy 6/18): collapse the GrindBot bubble to a compact circular icon on small screens so it never covers card copy. Label hidden via font-size:0; the .gw-dot stays visible; .lift (bottom:78px) still clears the sticky CTA. CSS-only, no JS change. */ @media(max-width:560px){ #gwBubble{width:48px;height:48px;padding:0;gap:0;justify-content:center;font-size:0;border-radius:50%} #gwBubble .gw-spade{width:26px;height:26px;font-size:17px;border-radius:5px} } /* Picks email capture — site-wide CTA (single source; picks pages inherit this) */ .pk-email{max-width:920px;margin:44px auto;background:radial-gradient(130% 150% at 50% 0%,rgba(62,230,138,.06),transparent 62%),var(--bg2);border:1px solid var(--glass-border);border-radius:16px;padding:40px 32px;text-align:center} .pk-email h3{font-family:'Inter',sans-serif;font-size:2rem;font-weight:900;margin:0 0 12px;color:#fff;letter-spacing:-.02em;line-height:1.18} .pk-email p{color:var(--text2);margin:0 auto 22px;max-width:520px;font-size:.98rem;line-height:1.5} .pk-email-form{display:flex;gap:10px;max-width:460px;margin:0 auto} .pk-email-form input{flex:1;min-width:0;padding:15px 18px;background:var(--bg);border:1px solid var(--glass-border);border-radius:10px;color:var(--text);font-family:'Inter',sans-serif;font-size:.95rem;outline:none} .pk-email-form input:focus{border-color:var(--gold)} .pk-email-form button{padding:15px 26px;background:var(--gold);color:#0a1a10;border:none;border-radius:10px;font-family:'Inter',sans-serif;font-weight:800;font-size:.9rem;cursor:pointer;letter-spacing:.3px;white-space:nowrap;transition:transform .15s,background .15s;box-shadow:0 10px 26px -10px rgba(242,178,51,.7)} .pk-email-form button:hover{background:var(--gold-light);transform:translateY(-1px)} .pk-email-form button:disabled{opacity:.6;cursor:default;transform:none} #signup{scroll-margin-top:150px} /* the X bio links /picks/#signup; clear the sticky nav */ @media(max-width:520px){.pk-email{padding:32px 20px}.pk-email h3{font-size:1.5rem}.pk-email-form{flex-direction:column}} /* blog post cover image */ .post-cover{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center 22%;border-radius:12px;margin:6px 0 4px;border:1px solid var(--glass-border);display:block} .post-cover-credit{font-family:'JetBrains Mono',monospace;font-size:.6rem;color:var(--text3);letter-spacing:.5px;text-transform:uppercase;margin:0 0 26px} /* landing-page sample video */ .sg-video{max-width:920px;margin:24px 0 0;border:1px solid var(--glass-border);border-radius:14px;overflow:hidden;background:#000;box-shadow:0 18px 50px -22px rgba(0,0,0,.65),0 0 30px -16px var(--emerald-glow)} .sg-video-el{width:100%;display:block;aspect-ratio:16/9;background:#000} /* ============================================================ LAUNCH POLISH (2026-07-01): homepage premium pass. Video composition rail, calculator slider, board hierarchy, equal-height cards, table zebra, sticky-bar clearance, mobile. Additive layer, no structural changes to generated markup. ============================================================ */ /* --- VIDEO SECTION: full-width video, stat rail underneath --- Was a 1.7fr/1fr split that capped the player at ~837px, which made the in-video captions unreadable (they are sized against a 1920 canvas). Full width buys ~61% more display width; the rail drops below and reads as a stat strip. --- */ .sg-video-grid{display:block;margin-top:24px} .sg-video-grid .sg-video{margin:0;max-width:none} .sg-video-rail{display:grid;grid-template-columns:repeat(3,1fr) minmax(220px,.9fr);gap:12px;margin-top:14px} .vr-stat{display:flex;flex-direction:column;justify-content:center;padding:16px 20px;border:1px solid var(--glass-border);border-radius:12px;background:linear-gradient(180deg,rgba(62,230,138,.045),rgba(7,16,11,.55))} .vr-num{font-family:'Inter',sans-serif;font-size:1.9rem;font-weight:900;color:var(--text);letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums} .vr-num .vr-unit{color:var(--cyan);font-weight:700} .vr-cap{font-family:'JetBrains Mono',monospace;font-size:.62rem;color:var(--text3);text-transform:uppercase;letter-spacing:2px;margin-top:7px;font-weight:700} .vr-cta{display:flex;align-items:center;justify-content:center;padding:15px 20px;background:linear-gradient(135deg,var(--gold-light),var(--gold));color:#0a1a10;border-radius:12px;font-family:'Inter',sans-serif;font-weight:800;font-size:.92rem;text-decoration:none;box-shadow:0 4px 14px -4px rgba(242,178,51,.5);transition:transform 160ms var(--ease-out-quart),box-shadow 160ms ease} .vr-cta:hover{transform:translateY(-1px);box-shadow:0 9px 24px -4px rgba(242,178,51,.6);color:#0a1a10} @media(max-width:860px){ /* edge-to-edge: cancels .section-wrap's 24px gutters to buy back every pixel of width for the player. The in-video captions are authored on a 1920 canvas, so display width is the only lever CSS has on their legibility. */ .sg-video-grid .sg-video{margin-left:-24px;margin-right:-24px;width:calc(100% + 48px);border-radius:0;border-left:0;border-right:0} /* 3-across squeezed the captions onto two lines; 2 + 1 full-width breathes */ .sg-video-rail{grid-template-columns:repeat(2,1fr);gap:10px} .vr-stat{padding:14px 16px} .vr-stat:nth-of-type(3){grid-column:1/-1} .vr-num{font-size:1.5rem} .vr-cap{font-size:.56rem;letter-spacing:1.4px} .vr-cta{grid-column:1/-1} } /* --- CALCULATOR: premium slider + panel depth --- */ .calc-panel{box-shadow:0 30px 70px -34px rgba(0,0,0,.7)} .calc-slider{height:8px;background:rgba(255,255,255,.09)} .calc-slider::-webkit-slider-thumb{width:24px;height:24px;box-shadow:0 0 0 1px var(--cyan),0 0 18px rgba(62,230,138,.45),0 3px 8px rgba(0,0,0,.5);transition:transform 140ms var(--ease-out-quart)} .calc-slider::-webkit-slider-thumb:hover{transform:scale(1.12)} .calc-slider:focus-visible{outline:2px solid var(--emerald);outline-offset:4px} .calc-fine{line-height:1.6;max-width:44ch} #sgCalcDaily{text-shadow:0 0 26px rgba(242,178,51,.3)} /* --- BOARD: tier headers carry real hierarchy (Elite reads top-shelf) --- */ .tier-badge{font-size:1.25rem;padding:7px 18px} .tier-badge.s{color:#06170d;background:linear-gradient(135deg,#3EE68A,#5FECA0);border-color:transparent;text-shadow:none;box-shadow:0 0 28px -6px rgba(62,230,138,.55)} .tier-badge.a{color:var(--gold);background:rgba(242,178,51,.1);border-color:rgba(242,178,51,.42);text-shadow:0 0 16px rgba(242,178,51,.35)} .tier-badge.b{color:#7FF0B5;background:rgba(62,230,138,.07);border-color:rgba(62,230,138,.26);text-shadow:none} .tier-badge.c{color:var(--text2);background:rgba(255,255,255,.035);border-color:rgba(255,255,255,.14);text-shadow:none} .tier-hdr#prime::after{background:linear-gradient(90deg,rgba(242,178,51,.32),transparent)} .tier-hdr#core::after{background:linear-gradient(90deg,rgba(62,230,138,.2),transparent)} .tier-hdr#value::after{background:linear-gradient(90deg,rgba(255,255,255,.12),transparent)} /* Elite cards: subtle emerald field so the top shelf reads richer */ .card[data-tier="S"]{border-color:rgba(62,230,138,.26);background:linear-gradient(180deg,rgba(6,18,11,.95),rgba(8,22,14,.9))} .card[data-tier="S"]:hover{border-color:rgba(62,230,138,.55)} .card[data-tier="S"]::before{opacity:.85} /* Equal-height card internals: actions pin to the bottom of every card */ .card{display:flex;flex-direction:column} .card-actions{margin-top:auto;padding-top:2px} .card-daily{white-space:nowrap;flex-shrink:0;margin-left:12px;font-size:.84rem;padding:7px 11px;align-self:flex-start} .card-name{padding-right:2px} @media(max-width:480px){ .card-head{flex-wrap:wrap;gap:6px 8px} .card-daily{margin-left:0} .card-name{font-size:1.18rem} } /* --- TABLE VIEW: hairline frame + zebra + stronger hover --- */ #tableView table{border:1px solid var(--glass-border)} #tableView thead th{background:rgba(62,230,138,.04);font-family:'JetBrains Mono',monospace;letter-spacing:1.2px} #tableView tbody tr:nth-child(even){background:rgba(255,255,255,.015)} #tableView tbody tr:hover{background:rgba(62,230,138,.05)} #tableView td{font-variant-numeric:tabular-nums} /* --- CONTROLS: focus parity for the sort select; search fills its own row --- */ .sort-wrap select:focus-visible{outline:2px solid var(--emerald);outline-offset:2px} @media(min-width:769px){ .controls .search-wrap{flex:1 1 240px;min-width:220px} .controls .search-wrap input{width:100%} } /* --- FEATURED PARTNER banner: stacks cleanly on small screens --- */ @media(max-width:720px){ .feat-banner{flex-direction:column;align-items:stretch!important;gap:14px!important} .feat-banner img{width:100%!important;max-width:100%!important;height:auto} .feat-banner span[style*="flex-shrink"]{text-align:center} } /* --- STICKY CTA: never buries the footer disclaimer; bigger dismiss target --- */ body:has(#sgSticky.on) footer.f2 .f2-disc{padding-bottom:96px!important} /* lift the freebie-drop toast above the sticky CTA bar so they don't overlap on any page */ body:has(#sgSticky.on) #sgFreebie{bottom:84px} .sgst-x{padding:8px 12px;font-size:1.4rem} /* --- SMALL FIXES --- */ .hiw-link{white-space:nowrap} .board-showall:focus-visible{outline:2px solid var(--emerald);outline-offset:3px} #sparkLine{filter:drop-shadow(0 0 6px rgba(62,230,138,.4))} /* tab-hero accent: emerald em on every page h1 (owner rule 7/3) */ .pk-title em,.odds-title em,.blog-title em,.guides-title em,.faq-title em,.bon-title em,.sg-guide-h1 em{font-style:normal;color:var(--emerald)} /* NAV DROPS BELL (2026-07-05): persistent path to /drops/ from every page; emerald dot = unseen drop. Filled gold bell, larger than the social icons, it is a feature entry point not a footnote. */ .nav-right a.nav-bell{position:relative;color:var(--gold);width:auto;padding:0 10px;gap:6px} .nav-bell .nb-label{font-family:'Inter',sans-serif;font-weight:800;font-size:.82rem;letter-spacing:-.2px;white-space:nowrap} @media(max-width:768px){.nav-bell .nb-label{display:none}.nav-right a.nav-bell{width:38px;padding:0}} .nav-right a.nav-bell svg{width:21px;height:21px;filter:drop-shadow(0 0 6px rgba(242,178,51,.45))} .nav-right a.nav-bell:hover{color:var(--gold-light,#FFD866);transform:translateY(-1px)} .nav-bell .nb-dot{position:absolute;top:calc(50% - 13px);right:7px;width:9px;height:9px;border-radius:50%;background:var(--emerald);border:2px solid #0a1a10;box-shadow:0 0 10px var(--emerald)} /* Blog byline. Rendered by scripts/gen-blog-bylines.py from _data/authors.json; lives here rather than in each post's inline