/* ========================================================================== JudiOnline MY — Core stylesheet (performance-first, premium dark + gold) One file. No framework. Critical styles first. ~ inline this for LCP. ========================================================================== */ /* ---- Design tokens ---------------------------------------------------- */ :root{ --bg:#0C0A09; /* near-black base */ --bg-2:#14110F; /* raised surface */ --bg-3:#1C1917; /* cards */ --line:#2A2522; /* hairline borders */ --gold:#CA8A04; /* primary CTA */ --gold-2:#E9B949; /* gold highlight */ --gold-soft:#3a2d09; /* gold tint bg */ --green:#16A34A; /* live / win */ --red:#DC2626; /* hot / down */ --text:#F5F1EA; /* primary text */ --muted:#A89F94; /* secondary text */ --faint:#6B6258; /* tertiary */ --radius:14px; --radius-sm:10px; --maxw:1200px; --shadow:0 10px 30px -12px rgba(0,0,0,.7); --ring:0 0 0 3px rgba(202,138,4,.4); --font:'General Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; --font-head:'Satoshi','General Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; } /* ---- Reset ------------------------------------------------------------ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}} body{ font-family:var(--font);background:var(--bg);color:var(--text); line-height:1.6;font-size:16px;font-weight:400; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; overflow-x:hidden; } img,svg{display:block;max-width:100%;height:auto} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit} input{font-family:inherit} h1,h2,h3,h4{font-family:var(--font-head);font-weight:700;line-height:1.15;letter-spacing:-.02em} :focus-visible{outline:none;box-shadow:var(--ring);border-radius:6px} /* ---- Layout ----------------------------------------------------------- */ .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:20px} .section{padding-block:clamp(48px,8vw,96px)} .eyebrow{font-size:.8rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2)} .h-lead{font-size:clamp(1.6rem,3.4vw,2.4rem);margin:.4em 0 .2em} .sub{color:var(--muted);max-width:62ch} .center{text-align:center;margin-inline:auto} /* ---- Buttons ---------------------------------------------------------- */ .btn{display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:.95rem; padding:.8em 1.4em;border-radius:var(--radius-sm);transition:transform .18s,background .18s,box-shadow .18s;will-change:transform} .btn-gold{background:linear-gradient(180deg,var(--gold-2),var(--gold));color:#1a1303;box-shadow:0 6px 18px -6px rgba(202,138,4,.6)} .btn-gold:hover{transform:translateY(-2px);box-shadow:0 10px 24px -6px rgba(202,138,4,.75)} .btn-ghost{border:1px solid var(--line);background:var(--bg-3);color:var(--text)} .btn-ghost:hover{border-color:var(--gold);color:var(--gold-2)} .btn-sm{padding:.55em 1em;font-size:.85rem} /* ---- Header ----------------------------------------------------------- */ .site-head{position:sticky;top:0;z-index:50;background:rgba(12,10,9,.85);backdrop-filter:blur(8px); border-bottom:1px solid var(--line)} .nav{display:flex;align-items:center;justify-content:space-between;height:64px} .brand{display:flex;align-items:center;gap:.55em;font-family:var(--font-head);font-weight:700;font-size:1.15rem} .brand .mark{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--gold-2),var(--gold)); display:grid;place-items:center;color:#1a1303;font-weight:800;flex:none} .brand b{color:var(--gold-2)} .nav-links{display:flex;gap:1.5rem;align-items:center} .nav-links a{font-size:.92rem;color:var(--muted);transition:color .15s} .nav-links a:hover{color:var(--text)} .nav-cta{display:flex;gap:.6rem;align-items:center} .burger{display:none} @media (max-width:860px){ .nav-links{display:none} .burger{display:grid;place-items:center;width:44px;height:44px} } /* ---- Hero ------------------------------------------------------------- */ .hero{position:relative;padding-block:clamp(48px,9vw,110px);overflow:hidden} .hero::before{content:"";position:absolute;inset:0;z-index:-1; background:radial-gradient(60% 60% at 70% 0%,rgba(202,138,4,.14),transparent 60%), radial-gradient(50% 50% at 0% 100%,rgba(22,163,74,.07),transparent 60%)} .hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center} .hero h1{font-size:clamp(2.1rem,5.2vw,3.6rem)} .hero h1 .g{background:linear-gradient(120deg,var(--gold-2),var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent} .hero p.lede{font-size:clamp(1rem,1.4vw,1.15rem);color:var(--muted);margin:1.2rem 0 1.8rem;max-width:54ch} .hero-cta{display:flex;gap:.8rem;flex-wrap:wrap} .trust-row{display:flex;gap:1.4rem;margin-top:2rem;flex-wrap:wrap;align-items:center} .trust-row .t{display:flex;align-items:center;gap:.5em;font-size:.85rem;color:var(--muted)} .trust-row svg{width:18px;height:18px;color:var(--green);flex:none} @media (max-width:860px){.hero-grid{grid-template-columns:1fr;gap:32px}} /* ---- Cards / grids ---------------------------------------------------- */ .grid{display:grid;gap:18px} .cols-2{grid-template-columns:repeat(2,1fr)} .cols-3{grid-template-columns:repeat(3,1fr)} .cols-4{grid-template-columns:repeat(4,1fr)} @media (max-width:980px){.cols-4{grid-template-columns:repeat(2,1fr)}.cols-3{grid-template-columns:repeat(2,1fr)}} @media (max-width:560px){.cols-4,.cols-3,.cols-2{grid-template-columns:1fr}} .card{background:var(--bg-3);border:1px solid var(--line);border-radius:var(--radius);padding:22px; transition:border-color .2s,transform .2s} .card:hover{border-color:rgba(202,138,4,.5)} /* Operator card */ .op{display:flex;flex-direction:column;gap:14px} .op-top{display:flex;align-items:center;justify-content:space-between} .op-logo{width:54px;height:54px;border-radius:12px;background:var(--bg);border:1px solid var(--line); display:grid;place-items:center;font-family:var(--font-head);font-weight:800;color:var(--gold-2);font-size:.9rem} .badge{font-size:.72rem;font-weight:600;padding:.25em .6em;border-radius:999px;border:1px solid} .badge-gold{color:var(--gold-2);border-color:rgba(202,138,4,.4);background:var(--gold-soft)} .badge-green{color:#4ade80;border-color:rgba(22,163,74,.4);background:rgba(22,163,74,.1)} .op h3{font-size:1.15rem} .op .meta{display:flex;gap:1.2rem;font-size:.82rem;color:var(--muted)} .op .meta b{color:var(--text);display:block;font-size:.95rem} .stars{color:var(--gold-2);font-size:.9rem;letter-spacing:1px} /* Game tile */ .game{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line); background:var(--bg-3);aspect-ratio:3/4;display:flex;flex-direction:column;justify-content:flex-end; transition:transform .2s,border-color .2s} .game:hover{transform:translateY(-4px);border-color:var(--gold)} .game .thumb{position:absolute;inset:0;background:linear-gradient(160deg,#241c10,#0c0a09);z-index:0} .game .thumb span{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--font-head); font-weight:800;font-size:1.5rem;color:rgba(233,185,73,.22)} .game svg.thumb{position:absolute;inset:0;width:100%;height:100%;z-index:0} .game .info{position:relative;z-index:1;padding:12px;background:linear-gradient(180deg,transparent,rgba(12,10,9,.92) 55%)} .game .info h4{font-size:.92rem} .game .info .rtp{font-size:.78rem;color:var(--green);font-weight:600} .game .op-tag{position:absolute;top:8px;left:8px;z-index:1;font-size:.68rem;padding:.2em .55em;border-radius:6px; background:rgba(12,10,9,.7);border:1px solid var(--line);color:var(--muted)} /* ---- RTP tracker tool ------------------------------------------------- */ .tool-bar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:20px} .search{flex:1;min-width:220px;display:flex;align-items:center;gap:.6em;background:var(--bg-3); border:1px solid var(--line);border-radius:var(--radius-sm);padding:.7em 1em} .search input{flex:1;background:none;border:0;color:var(--text);font-size:.95rem;outline:none} .search svg{width:18px;height:18px;color:var(--faint)} .chip{padding:.55em 1em;border-radius:999px;border:1px solid var(--line);background:var(--bg-3); font-size:.85rem;color:var(--muted);transition:.15s} .chip[aria-pressed=true]{background:var(--gold-soft);border-color:var(--gold);color:var(--gold-2)} .chip:hover{color:var(--text)} .rtp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px} .rtp-card{background:var(--bg-3);border:1px solid var(--line);border-radius:var(--radius);padding:16px; display:flex;flex-direction:column;gap:10px} .rtp-card .rc-top{display:flex;align-items:center;gap:10px} .rc-ico{width:42px;height:42px;border-radius:10px;flex:none;display:grid;place-items:center; background:linear-gradient(135deg,#241c10,#0c0a09);font-family:var(--font-head);font-weight:800;color:var(--gold-2);font-size:.8rem} .rc-name{font-weight:600;font-size:.95rem;line-height:1.2} .rc-op{font-size:.74rem;color:var(--faint)} .rc-pct{font-family:var(--font-head);font-weight:800;font-size:1.6rem;line-height:1} .rc-pct.hot{color:#4ade80}.rc-pct.warm{color:var(--gold-2)}.rc-pct.cold{color:var(--muted)} .meter{height:7px;border-radius:999px;background:var(--bg);overflow:hidden} .meter i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--gold),#4ade80);transition:width .6s ease} .rc-foot{display:flex;align-items:center;justify-content:space-between;font-size:.78rem;color:var(--muted)} .live-dot{display:inline-flex;align-items:center;gap:.4em;color:#4ade80;font-weight:600;font-size:.78rem} .live-dot::before{content:"";width:8px;height:8px;border-radius:50%;background:#4ade80;box-shadow:0 0 0 0 rgba(74,222,128,.6);animation:pulse 1.8s infinite} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(74,222,128,.5)}70%{box-shadow:0 0 0 8px rgba(74,222,128,0)}100%{box-shadow:0 0 0 0 rgba(74,222,128,0)}} /* ---- Free credit list ------------------------------------------------- */ .fc{display:flex;align-items:center;gap:16px;background:var(--bg-3);border:1px solid var(--line); border-radius:var(--radius);padding:16px 18px;transition:border-color .2s} .fc:hover{border-color:rgba(202,138,4,.5)} .fc .amt{font-family:var(--font-head);font-weight:800;color:var(--gold-2);font-size:1.25rem;flex:none;min-width:96px} .fc .body{flex:1}.fc .body h4{font-size:1rem}.fc .body p{font-size:.83rem;color:var(--muted)} @media (max-width:560px){.fc{flex-wrap:wrap}.fc .amt{min-width:auto}} /* ---- Section head ----------------------------------------------------- */ .sec-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:28px;flex-wrap:wrap} .sec-head h2{font-size:clamp(1.5rem,3vw,2.1rem)} /* ---- Steps / how it works -------------------------------------------- */ .step{position:relative;padding-left:0} .step .n{width:38px;height:38px;border-radius:10px;background:var(--gold-soft);border:1px solid rgba(202,138,4,.4); color:var(--gold-2);font-family:var(--font-head);font-weight:800;display:grid;place-items:center;margin-bottom:14px} /* ---- FAQ -------------------------------------------------------------- */ .faq details{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--bg-3);margin-bottom:10px;overflow:hidden} .faq summary{cursor:pointer;padding:16px 18px;font-weight:600;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1em} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";color:var(--gold-2);font-size:1.3rem;transition:transform .2s} .faq details[open] summary::after{transform:rotate(45deg)} .faq p{padding:0 18px 16px;color:var(--muted);font-size:.92rem} /* ---- Footer ----------------------------------------------------------- */ .site-foot{border-top:1px solid var(--line);background:var(--bg-2);padding-block:48px 28px;margin-top:40px} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px} .foot-grid h5{font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:14px} .foot-grid a{display:block;color:var(--muted);font-size:.9rem;padding:.25em 0} .foot-grid a:hover{color:var(--gold-2)} .rg{display:flex;align-items:center;gap:.6em;background:var(--bg-3);border:1px solid var(--line); border-radius:var(--radius-sm);padding:12px 16px;font-size:.85rem;color:var(--muted);margin-top:20px} .rg .age{font-family:var(--font-head);font-weight:800;color:var(--red);border:2px solid var(--red);border-radius:50%; width:34px;height:34px;display:grid;place-items:center;flex:none;font-size:.78rem} .foot-bottom{border-top:1px solid var(--line);margin-top:32px;padding-top:20px;display:flex;justify-content:space-between; gap:16px;flex-wrap:wrap;font-size:.82rem;color:var(--faint)} @media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}} @media (max-width:560px){.foot-grid{grid-template-columns:1fr}} /* ---- Marquee payment/trust ------------------------------------------- */ .pay-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center;justify-content:center} .pay{padding:.5em 1em;border:1px solid var(--line);border-radius:8px;background:var(--bg-3);font-size:.8rem;color:var(--muted);font-weight:600} /* ---- Utilities -------------------------------------------------------- */ .mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px} .skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;z-index:99;background:var(--gold);color:#000;padding:.6em 1em;border-radius:8px} /* ==== Phase 2 additions ==== */ /* Mobile nav open */ @media (max-width:860px){ .nav-links.open{display:flex;position:absolute;top:64px;left:0;right:0;flex-direction:column; background:var(--bg-2);padding:16px 20px;border-bottom:1px solid var(--line);gap:.4rem;z-index:60} .nav-links.open a{padding:.6em 0} } /* Scroll reveal */ .reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease} .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}} /* Mobile sticky CTA */ .mcta{position:fixed;left:12px;right:12px;bottom:12px;z-index:80;display:flex;gap:10px; background:rgba(20,17,15,.92);backdrop-filter:blur(10px);border:1px solid var(--line); border-radius:14px;padding:10px;transform:translateY(140%);transition:transform .3s ease;box-shadow:var(--shadow)} .mcta.on{transform:none} @media (min-width:861px){.mcta{display:none}} /* Trust / proof section */ .trust-band{background:var(--bg-2);border-block:1px solid var(--line)} .proof{display:flex;gap:14px;align-items:center;background:var(--bg-3);border:1px solid var(--line);border-radius:var(--radius);padding:16px} .proof .av{width:44px;height:44px;border-radius:50%;flex:none;background:linear-gradient(135deg,var(--gold-2),var(--gold));display:grid;place-items:center;color:#1a1303;font-weight:800;font-family:var(--font-head)} .proof .q{font-size:.9rem}.proof .who{font-size:.78rem;color:var(--faint)} .stat{ text-align:center} .stat .big{font-family:var(--font-head);font-weight:800;font-size:clamp(1.8rem,4vw,2.6rem);color:var(--gold-2)} .stat .lbl{font-size:.82rem;color:var(--muted)} /* 4D results */ .fourd-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px} .fourd-card{padding:0;overflow:hidden} .fourd-head{padding:14px 18px;border-bottom:1px solid var(--line)} .fourd-logo{font-family:var(--font-head);font-weight:800;font-size:1.05rem;color:var(--c,#fff);display:inline-flex;align-items:center;gap:.5em} .fourd-logo::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--c,#fff)} .fourd-top{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:16px 18px;text-align:center} .fourd-top .fp b{display:block;font-size:.72rem;color:var(--faint);text-transform:uppercase;letter-spacing:.05em;margin-bottom:4px} .fourd-top .num{font-family:var(--font-head);font-weight:800;font-size:1.5rem;letter-spacing:.04em} .num.gold{color:var(--gold-2)} .fourd-blk{padding:12px 18px;border-top:1px solid var(--line)} .fourd-blk h4{font-size:.74rem;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px} .numgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px} .numgrid span{font-family:var(--font-head);font-weight:600;font-size:.92rem;text-align:center;padding:.3em 0;background:var(--bg);border-radius:6px;border:1px solid var(--line)} @media (max-width:480px){.numgrid{grid-template-columns:repeat(4,1fr)}} /* Buku mimpi */ .mimpi-card{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 18px} .mimpi-kw strong{font-family:var(--font-head);font-size:1.1rem;text-transform:capitalize} .mimpi-kw .sub{display:block;font-size:.78rem} .mimpi-nums{display:flex;gap:18px;text-align:right} .mimpi-nums .mn b{display:block;font-size:.68rem;color:var(--faint);text-transform:uppercase} .mimpi-nums .num{font-family:var(--font-head);font-weight:800;font-size:1.05rem} @media (max-width:560px){.mimpi-card{flex-direction:column;align-items:flex-start}.mimpi-nums{text-align:left;flex-wrap:wrap}} /* Ramalan balls */ .ball-row{display:flex;gap:10px;flex-wrap:wrap;margin:.4em 0 1.2em} .ball{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;font-family:var(--font-head); font-weight:800;font-size:1.15rem;background:radial-gradient(circle at 35% 30%,#2a2520,#0c0a09); border:1px solid var(--line);color:var(--text)} .ball.top{background:radial-gradient(circle at 35% 30%,var(--gold-2),var(--gold));color:#1a1303;border-color:var(--gold)} .ball.sm{width:46px;height:46px;font-size:1rem} .ram-label{font-size:.74rem;color:var(--faint);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.2em} .ram-input{display:flex;gap:10px;flex-wrap:wrap;margin-top:1em} .ram-input input{flex:1;min-width:200px;background:var(--bg-3);border:1px solid var(--line);border-radius:var(--radius-sm);padding:.8em 1em;color:var(--text);outline:none} .ram-input input:focus{border-color:var(--gold)} /* Quick-answer block (AI Overviews / LLM citable) */ .qa{background:var(--bg-3);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:var(--radius); padding:18px 22px;margin:24px 0} .qa-q{font-size:1.05rem;color:var(--gold-2);margin-bottom:.4em} .qa-a{color:var(--text);font-size:.98rem;line-height:1.7;max-width:70ch} /* Hero artwork banner (game/operator pages) */ .ghero-wrap{position:relative;width:100%;height:clamp(150px,24vw,280px);overflow:hidden;border-bottom:1px solid var(--line)} .ghero{width:100%;height:100%;display:block} .ghero-tag{position:absolute;left:clamp(16px,5vw,40px);bottom:16px;font-size:.78rem;font-weight:600;color:var(--gold-2); background:rgba(12,10,9,.7);border:1px solid var(--line);border-radius:999px;padding:.35em .9em;backdrop-filter:blur(4px)}