/* ===================================================================== THEME 5 — "Soft Beige & Ivory" (LIGHT) A light beige + ivory-white repalette and relayout layered on top of the shared (theme2) markup. Loaded LAST in so it wins the cascade on equal specificity. Content (images / copy) is untouched — only colour and layout change. Key layout differences vs the other (dark) themes: • Game cards: full-width HORIZONTAL list rows (thumb left · info · play button right) — not a vertical/4-col grid. • Category tabs: contained SEGMENTED control inside a card pill (not floating pills / not an underline). • Bottom nav: light floating pill with a soft highlight behind the active item. • me-2: profile sits inside a boxed ivory card; quick-actions are a roomy 2-column tile grid. ===================================================================== */ /* ---- Palette : warm beige + ivory white ---- */ :root { --bg: #f3ece0; /* warm beige page */ --frame: #ffffff; /* ivory-white phone frame */ --card: #fffaf3; /* warm white card surface */ --ink: #3b3026; /* espresso text */ --muted: #9c8e7b; /* warm taupe-grey */ --line: #ece2d2; /* soft beige hairline */ --brand: #bd8a5e; /* caramel */ --brand-2: #9c6b46; /* mocha */ --gold: #c79a3b; /* antique gold */ --green: #5f9460; /* sage (win states) */ --shadow: 0 10px 30px rgba(157, 107, 70, .16), 0 0 0 1px rgba(60, 40, 20, .05); --shadow-sm: 0 4px 14px rgba(157, 107, 70, .12), 0 0 0 1px rgba(60, 40, 20, .04); --radius: 16px; } /* ---- Page background : warm beige radials ---- */ body { background: radial-gradient(900px 500px at 20% -10%, #efe2cd 0%, transparent 60%), radial-gradient(800px 500px at 100% 0%, #f7ecd9 0%, transparent 55%), var(--bg); color: var(--ink); } /* soft separation between ivory phone and beige page */ .phone { box-shadow: 0 0 0 1px var(--line), 0 24px 60px rgba(120, 88, 56, .14); } /* =================== Header =================== */ .hdr { background: linear-gradient(180deg, rgba(255, 255, 255, .96) 0%, rgba(255, 251, 244, .82) 100%); border-bottom: 1px solid var(--line); box-shadow: 0 1px 0 rgba(255, 255, 255, .8), 0 6px 18px rgba(120, 88, 56, .08); } .ico-btn { background: #f3ebdd; color: var(--brand-2); } .btn-ghost { background: #f3ebdd; color: var(--brand-2); } .btn-fill { color: #fff; box-shadow: 0 8px 18px rgba(157, 107, 70, .32); } /* =================== Wallet card =================== */ .wallet { background: linear-gradient(135deg, #cf9c6a 0%, #b07c50 52%, #8a5a3b 100%); color: #fff; box-shadow: 0 16px 30px rgba(140, 92, 56, .34); } .wallet-row a.solid { color: var(--brand-2); } /* =================== Download strip =================== */ .dl { background: linear-gradient(90deg, #fbf2e3, #f6ead4); border: 1px solid #ecdcbe; } .dl .gift { background: var(--gold); color: #fff; } .dl p { color: #8a6a3a; } .dl p b { color: var(--brand-2); } .dl button { background: var(--brand); color: #fff; } /* =================== Banner carousel =================== */ .bn-track img { background: #efe6d6; box-shadow: var(--shadow); } /* =================== Check-in / Cash-rain promo cards =================== The live markup uses Tailwind arbitrary utilities (h-20.5 and the bg-[radial-gradient(...)] / bg-[#18a86b] colours) that aren't present in the compiled pages.css, so the two cards rendered with no height and no background (the empty white gap in the screenshot). Restore them here in the beige theme's caramel tone. */ /* The promo grid sits inside .sec (already an 18px page gutter) yet also carries Tailwind's p-3, double-insetting the cards to ~32px while every other section uses 18px. Drop the extra horizontal padding so the cards line up with the banner / winners / floors above and below. */ [class*="grid-cols-2"][class*="p-3"] { padding-left: 0; padding-right: 0; gap: 10px; } .sec [class*="h-20.5"] { height: 96px; /* taller so the chip clears the bottom edge */ overflow: hidden; border-radius: 14px; padding: 12px 14px; /* even breathing room on every side */ background: linear-gradient(135deg, #cf9c6a 0%, #b07c50 52%, #8a5a3b 100%); box-shadow: 0 8px 18px rgba(140, 92, 56, .26); } /* The inner column was `justify-between`, pinning the chip flush to the padding box; with the taller card give the rows a small, even gap and let the card padding handle the bottom inset so "Claim" / "Get" aren't clipped. */ .sec [class*="h-20.5"] .h-full { justify-content: center; gap: 5px; } /* Check-in art is pinned `absolute right-0 top-0`, so it ignores the card padding and jams into the corner. Inset it from the right edge, centre it vertically and size it to sit neatly inside the card. */ .sec [class*="h-20.5"] [class*="right-0"] { right: 12px; top: 50%; transform: translateY(-50%); width: 64px; height: 64px; } /* Cash-rain art is a flex item whose inner lottie chain (.lf-player-container → #lottie → svg) has indefinite heights, so the 500px SVG renders near its intrinsic size and blows out of the card. Force a definite, contained size down the whole chain. */ .sec [class*="h-20.5"] .size-14, .sec [class*="h-20.5"] .size-14 .lf-player-container, .sec [class*="h-20.5"] .size-14 #lottie { width: 58px !important; height: 58px !important; flex-shrink: 0; overflow: hidden; } .sec [class*="h-20.5"] .size-14 svg { width: 58px !important; height: 58px !important; display: block; } /* "Claim" / "Get" chips (bg-[#18a86b] isn't compiled) → ivory chip */ .sec [class*="bg-[#18a86b]"] { background: #fff; color: var(--brand-2); } /* legacy .pcard design (defined in the page but not used by this markup) */ .pcard { box-shadow: var(--shadow-sm); } .pcard .pbtn { color: var(--brand-2); } /* =================== Winners ticker =================== */ .winners .tag { background: #e8f0e3; color: #3f7a45; } .ticker li { color: var(--muted); } /* =================== Category tabs → contained SEGMENTED control =================== */ .tabs { gap: 6px; margin: 22px 14px 0; padding: 5px; background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); } .tabs button { flex-shrink: 0; border: none; background: transparent; border-radius: 11px; color: var(--muted); padding: 9px 15px; } .tabs button.on { background: linear-gradient(90deg, var(--brand), var(--brand-2)); color: #fff; border-color: transparent; box-shadow: 0 5px 13px rgba(157, 107, 70, .28); } /* =================== Game floors =================== */ .floor { background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-sm); } .floor-hd .badge { background: var(--brand); box-shadow: 0 4px 10px rgba(157, 107, 70, .4); } /* Game cards → full-width HORIZONTAL ROWS: square thumb on the left, title + meta in the middle, price + Play stacked on the right. */ .glist { display: flex; flex-direction: column; gap: 10px; padding: 12px; } .grow { flex-direction: row; align-items: center; text-align: left; gap: 12px; padding: 10px; border-radius: 16px; background: #fffdf8; border: 1px solid var(--line); box-shadow: 0 2px 8px rgba(120, 88, 56, .06); } .grow:active { background: #f7efe2; } .grow .thumb { width: 66px; height: 66px; border-radius: 15px; flex-shrink: 0; object-fit: cover; background: #f1e8d8; } /* wide promo art shown in full (letterboxed) inside a wider tile */ .floor.t-wide .grow .thumb { width: 96px; height: 66px; object-fit: contain; border-radius: 12px; padding: 4px; } .grow .meta { flex: 1; min-width: 0; text-align: left; } .grow .meta h4 { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .grow .meta span { margin-top: 2px; } .grow .meta .cd { background: #f3ebdd; color: var(--brand-2); white-space: nowrap; font-size: 10px; padding: 3px 8px; } .grow .gplay { flex-shrink: 0; width: auto; margin-top: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 5px; text-align: right; } .grow .gplay .price { color: var(--ink); } .grow .gplay .go { display: inline-block; width: auto; margin-top: 0; padding: 8px 14px; color: #fff; } /* =================== Banner floor caption button =================== */ .floor.banner .cap a { color: var(--brand-2); } /* =================== Prize tier chips =================== */ .tiers span { background: linear-gradient(135deg, #fbf2e3, #f5e8d2); border: 1px solid #ecdcbe; color: var(--brand-2); } /* =================== Footer → ivory card, soft top accent =================== */ .foot { background: var(--card); border: 1px solid var(--line); border-top: 2px solid var(--brand); box-shadow: var(--shadow-sm); } .foot .channels a { background: #f3ebdd; color: var(--brand-2); border-radius: 50%; } .foot h4 { color: var(--ink); } .foot .cr { color: var(--muted); border-top-color: var(--line); } /* =================== Bottom nav → light floating pill =================== */ .nav { background: rgba(255, 255, 255, .94); backdrop-filter: blur(18px); border: 1px solid var(--line); box-shadow: 0 12px 28px rgba(120, 88, 56, .20), inset 0 1px 0 rgba(255, 255, 255, .8); } .nav a { color: var(--muted); position: relative; } .nav a.act { color: var(--brand-2); } /* soft caramel highlight behind the active tab */ .nav a.act::before { content: ""; position: absolute; top: -3px; left: 50%; transform: translateX(-50%); width: 46px; height: 30px; border-radius: 12px; background: rgba(189, 138, 94, .16); z-index: -1; } /* ===================================================================== me-2.html ===================================================================== */ .rw-btn.recharge { color: #fff; box-shadow: 0 10px 22px rgba(157, 107, 70, .34); } .rw-btn.withdraw { background: var(--card); color: var(--brand-2); border: 1.5px solid rgba(189, 138, 94, .45); box-shadow: 0 0 0 1px rgba(189, 138, 94, .08), 0 6px 16px rgba(157, 107, 70, .12); } .vip-banner { background: linear-gradient(90deg, #fbf2e3, #f6ead4); border: 1px solid #ecdcbe; } .vip-banner .crown { color: #5a3d1e; } .vip-banner .vb-txt h4 { color: #6f4e22; } .vip-banner .vb-txt p { color: #9a7a45; } .vip-banner .vb-arrow { color: var(--brand); } .m-ico { background: #f3ebdd; color: var(--brand-2); } .m-right svg { color: var(--muted); } .menu.grid .m-row:active { background: #f7efe2; } .switch { background: #e3d8c5; } .switch.on { background: var(--brand); } .logout { background: var(--card); } /* ---- me LAYOUT VARIATION: boxed ivory profile card + roomy 2-up grid ---- */ /* profile becomes a self-contained rounded ivory card */ .me-scroll .profile { margin: 16px 14px 4px; padding: 18px 16px; gap: 14px; background: linear-gradient(160deg, #ffffff, #fbf3e7); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-sm); } .me-scroll .profile .avatar { border-color: #fff; } /* quick-actions become a roomy 2-column tile grid */ .me-scroll .menu.grid { grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 10px; } .me-scroll .menu.grid .m-row { padding: 18px 10px; gap: 10px; } .me-scroll .menu.grid .m-ico { width: 46px; height: 46px; border-radius: 14px; } .me-scroll .menu.grid .m-label { font-size: 13px; } /* ---- me page: gentle staggered fade-up entrance per section ---- */ @keyframes t5RiseIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } } .me-scroll > * { animation: t5RiseIn .5s cubic-bezier(.22, .61, .36, 1) both; } .me-scroll > *:nth-child(1) { animation-delay: .04s; } .me-scroll > *:nth-child(2) { animation-delay: .10s; } .me-scroll > *:nth-child(3) { animation-delay: .16s; } .me-scroll > *:nth-child(4) { animation-delay: .22s; } .me-scroll > *:nth-child(5) { animation-delay: .28s; } .me-scroll > *:nth-child(6) { animation-delay: .34s; } .me-scroll > *:nth-child(7) { animation-delay: .40s; } .me-scroll > *:nth-child(n+8) { animation-delay: .46s; } @media (prefers-reduced-motion: reduce) { .me-scroll > * { animation: none; } } /* ===================================================================== login-2.html / signup-2.html ===================================================================== */ .close-x { background: #f3ebdd; color: var(--brand-2); } .brand-badge { box-shadow: 0 12px 26px rgba(157, 107, 70, .34); } .seg { background: #f1e8d8; } .seg button.on { color: #fff; } .input-wrap { background: #fffdf8; border-color: var(--line); } .input-wrap:focus-within { border-color: var(--brand); box-shadow: 0 0 0 4px rgba(189, 138, 94, .16); } .input-wrap input::placeholder { color: #b3a892; } .otp-btn { background: #f3ebdd; color: var(--brand-2); } .submit { color: #fff; box-shadow: 0 10px 22px rgba(157, 107, 70, .34); } .google { background: var(--card); } .google:active { background: #f7efe2; }