/* ============================================================ Mankatha — public web pages stylesheet Color palette matches the mobile app's themes. Theme is controlled via `data-theme="dark|light"` on . Defaults to whatever the OS reports via prefers-color-scheme. ============================================================ */ /* Default (dark) — also the fallback if JS hasn't run yet */ :root { --bg: #0A0A0A; --surface: #161616; --surface-2: #1F1F1F; --primary: #FF9933; --secondary: #006D77; --text: #FFFFFF; --text-2: #A3A3A3; --text-3: #737373; --border: #2C2C2C; --header-bg: rgba(10,10,10,.85); --shadow-card: 0 6px 28px rgba(255,153,51,.12); --shadow-logo: 0 12px 40px rgba(255,153,51,.32), 0 2px 12px rgba(0,109,119,.18); --premium-bg: linear-gradient(135deg,#1a0f00 0%,#0a0a0a 60%,#001a1c 100%); } /* Light theme */ :root[data-theme="light"] { --bg: #FFFFFF; --surface: #F5F5F5; --surface-2: #EAEAEA; --primary: #E67A14; /* Slightly darker saffron for AA contrast on white */ --secondary: #006D77; --text: #0A0A0A; --text-2: #525252; --text-3: #737373; --border: #E5E7EB; --header-bg: rgba(255,255,255,.85); --shadow-card: 0 6px 24px rgba(230,122,20,.10); --shadow-logo: 0 8px 28px rgba(230,122,20,.18), 0 2px 8px rgba(0,109,119,.10); --premium-bg: linear-gradient(135deg,#FFF5E6 0%,#FFFFFF 60%,#E6F4F6 100%); } /* Respect OS preference when user hasn't manually picked */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { --bg: #FFFFFF; --surface: #F5F5F5; --surface-2: #EAEAEA; --primary: #E67A14; --secondary: #006D77; --text: #0A0A0A; --text-2: #525252; --text-3: #737373; --border: #E5E7EB; --header-bg: rgba(255,255,255,.85); --shadow-card: 0 6px 24px rgba(230,122,20,.10); --shadow-logo: 0 8px 28px rgba(230,122,20,.18), 0 2px 8px rgba(0,109,119,.10); --premium-bg: linear-gradient(135deg,#FFF5E6 0%,#FFFFFF 60%,#E6F4F6 100%); } } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{ font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Roboto,sans-serif; background:var(--bg);color:var(--text);line-height:1.7;-webkit-font-smoothing:antialiased; min-height:100vh; transition:background-color .25s ease, color .25s ease; } .wrap{max-width:780px;margin:0 auto;padding:0 24px} .wrap-wide{max-width:1100px;margin:0 auto;padding:0 24px} a{color:var(--primary);text-decoration:none} a:hover{opacity:.8} /* Header */ header{padding:18px 0;position:sticky;top:0;background:var(--header-bg);backdrop-filter:blur(20px);z-index:10;border-bottom:1px solid var(--border);transition:background-color .25s ease,border-color .25s ease} .nav{display:flex;justify-content:space-between;align-items:center;max-width:1100px;margin:0 auto;padding:0 24px;gap:16px;flex-wrap:wrap} .logo{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--text)} .logo img{ /* Embedded logo image — NO icon-style chrome (no border-radius, no halo). */ width:auto;height:36px;display:block;max-width:120px;object-fit:contain; } .logo-text{display:none} /* logo PNG already contains the wordmark */ .nav-links{display:flex;gap:24px;font-size:14px;align-items:center;flex-wrap:wrap} .nav-links a{color:var(--text-2)} .lang-switch{display:flex;gap:6px;align-items:center;padding-left:16px;border-left:1px solid var(--border);margin-left:6px} .lang-switch a{color:var(--text-3);font-size:12px;font-weight:600;letter-spacing:.5px} .lang-switch a.lang-active{color:var(--primary)} .lang-switch .lang-sep{color:#333;font-size:12px} /* Legal/Support pages */ main{padding:48px 0} .wrap h1{font-size:clamp(32px,5vw,48px);font-weight:800;letter-spacing:-.02em;margin-bottom:8px;line-height:1.1} .last-updated{color:var(--text-3);font-size:14px;margin-bottom:40px} .wrap h2{font-size:22px;font-weight:700;margin-top:36px;margin-bottom:12px;color:var(--text)} .wrap h3{font-size:17px;font-weight:600;margin-top:20px;margin-bottom:8px;color:var(--primary)} .wrap p{color:#d0d0d0;margin-bottom:14px} .wrap ul{margin:8px 0 16px 22px;color:#d0d0d0} .wrap ul li{margin-bottom:6px} strong{color:var(--text);font-weight:600} hr{border:none;border-top:1px solid var(--border);margin:36px 0} .callout{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:20px 22px;margin:20px 0} .callout p:last-child{margin-bottom:0} /* Landing-page hero */ .hero{padding:40px 0 48px;text-align:center} .hero-logo{ /* Embedded PNG — tightly cropped, no app-icon chrome. */ width:auto;height:180px;max-width:90%;display:block;margin:0 auto 24px; object-fit:contain; } @media (max-width:600px){ .hero{padding:20px 0 32px} .hero-logo{height:200px;margin-bottom:18px} } .hero h1{font-size:clamp(40px,7vw,72px);font-weight:800;line-height:1.05;letter-spacing:-.03em;margin-bottom:20px} .hero h1 .gold{ background:linear-gradient(135deg,#FF9933 0%,#FFB366 100%); -webkit-background-clip:text;background-clip:text;color:transparent; } .hero p.sub{font-size:clamp(17px,2.2vw,22px);color:var(--text-2);max-width:640px;margin:0 auto 36px} .cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .badge{display:inline-flex;align-items:center;gap:8px;padding:14px 22px;background:var(--text);color:var(--bg);border-radius:12px;font-weight:600;font-size:15px;transition:transform .15s} .badge:hover{transform:translateY(-2px)} .badge.coming{background:var(--surface-2);color:var(--text-2);border:1px solid var(--border)} .badge.live{background:var(--primary);color:var(--bg);border:1px solid var(--primary);font-weight:700;box-shadow:0 4px 16px rgba(255,153,51,0.25);transition:transform .15s,box-shadow .2s} .badge.live:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(255,153,51,0.4)} /* Landing sections */ section{padding:64px 0} .section-title{font-size:clamp(28px,4vw,44px);font-weight:700;text-align:center;margin-bottom:48px;letter-spacing:-.02em;color:var(--text)} .games{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px} .game{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:28px;transition:transform .2s,border-color .2s,box-shadow .2s} .game:hover{transform:translateY(-4px);border-color:var(--primary);box-shadow:var(--shadow-card)} .game .ta{font-size:32px;font-weight:800;color:var(--primary);margin-bottom:8px;line-height:1.2} .game h3{font-size:22px;font-weight:700;margin-bottom:8px;color:var(--text)} .game p{color:var(--text-2);font-size:15px;line-height:1.5} .game-tag{display:inline-block;margin-top:14px;padding:5px 12px;background:rgba(255,153,51,.12);color:var(--primary);border:1px solid rgba(255,153,51,.35);border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.3px;text-transform:uppercase} /* Theme toggle button (sun/moon) */ .theme-toggle{ display:inline-flex;align-items:center;justify-content:center; width:38px;height:38px;border-radius:10px; background:var(--surface);border:1px solid var(--border); color:var(--text);cursor:pointer;font-size:18px;line-height:1; transition:background-color .2s,border-color .2s,transform .15s; margin-left:8px; } .theme-toggle:hover{border-color:var(--primary);transform:scale(1.05)} .theme-toggle .sun,.theme-toggle .moon{display:none} :root[data-theme="light"] .theme-toggle .moon{display:inline} :root[data-theme="dark"] .theme-toggle .sun{display:inline} :root:not([data-theme]) .theme-toggle .sun{display:inline} @media (prefers-color-scheme:light){ :root:not([data-theme]) .theme-toggle .sun{display:none} :root:not([data-theme]) .theme-toggle .moon{display:inline} } /* Premium box */ .premium{background:var(--premium-bg);border:1px solid var(--primary);border-radius:24px;padding:48px 32px;text-align:center;box-shadow:inset 0 1px 0 rgba(255,153,51,.18)} .premium h2{font-size:32px;font-weight:800;margin-bottom:12px;color:var(--text)} .premium h2 .gold{ background:linear-gradient(135deg,#FF9933 0%,#FFB366 100%); -webkit-background-clip:text;background-clip:text;color:transparent; } .premium > p{color:var(--text-2);max-width:520px;margin:0 auto 24px} .features{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;text-align:left;max-width:780px;margin:0 auto} .feature{display:flex;gap:12px;align-items:flex-start} .feature .ck{flex-shrink:0;width:24px;height:24px;background:var(--primary);color:var(--bg);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px} /* Footer */ footer{padding:48px 0 64px;border-top:1px solid var(--border);margin-top:48px;text-align:center} footer .foot-social{display:flex;gap:14px;justify-content:center;margin-bottom:18px} footer .foot-social a{ display:inline-flex;align-items:center;justify-content:center; width:40px;height:40px;border-radius:50%; background:var(--surface);border:1px solid var(--border); color:var(--text-2);transition:background .2s,color .2s,border-color .2s,transform .15s } footer .foot-social a:hover{background:var(--primary);color:var(--bg);border-color:var(--primary);transform:translateY(-2px)} footer .foot-links{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-bottom:12px} footer a{color:var(--text-2);font-size:14px} footer .copy{color:var(--text-3);font-size:13px} /* Mobile hamburger button — hidden on desktop, shown inside the max-width:600px media query below. */ .nav-burger{display:none} /* ============================================================ Contact section + modal — uses the same `.badge` design tokens as the App Store / Play Store CTAs so the look is consistent. ============================================================ */ .contact-section{padding:72px 0} .contact-section h2{ font-size:clamp(28px,4vw,40px);font-weight:700;text-align:center; margin-bottom:12px;letter-spacing:-.02em;color:var(--text); } .contact-section .lead{ color:var(--text-2);text-align:center; max-width:520px;margin:0 auto 28px;font-size:15px;line-height:1.55; } .contact-section .cta-row{margin-top:12px} .contact-bg{ position:fixed;inset:0;background:rgba(0,0,0,.7);backdrop-filter:blur(8px); display:flex;align-items:center;justify-content:center; z-index:1000;padding:20px;animation:fadeIn .15s ease-out; } .contact-bg.hidden{display:none} @keyframes fadeIn{from{opacity:0}to{opacity:1}} .contact-card{ background:var(--surface);border:1px solid var(--border);border-radius:20px; width:min(520px,100%);max-height:90vh;overflow-y:auto; padding:28px 26px;box-shadow:0 24px 60px rgba(0,0,0,.5);position:relative; } .contact-card h3{ margin:0 0 4px;color:var(--text);font-size:22px;font-weight:700; letter-spacing:-.01em;padding-right:36px; } .contact-card .form-sub{color:var(--text-2);font-size:14px;margin:0 0 18px} .contact-close{ position:absolute;top:14px;right:14px;width:32px;height:32px; background:var(--surface-2);border:1px solid var(--border); color:var(--text);font-size:18px;line-height:1;cursor:pointer; border-radius:8px;padding:0;display:flex;align-items:center;justify-content:center; transition:background .15s, color .15s; } .contact-close:hover{background:var(--primary);color:var(--bg);border-color:var(--primary)} .contact-label{ display:block;font-size:13px;color:var(--text-2); margin:14px 0 6px;font-weight:600;letter-spacing:.01em; } .contact-card input[type=text], .contact-card input[type=email], .contact-card select, .contact-card textarea{ width:100%;padding:12px 14px;font-size:15px;font-family:inherit; background:var(--bg);border:1px solid var(--border);border-radius:12px;color:var(--text); transition:border-color .15s, box-shadow .15s; } .contact-card input:focus, .contact-card select:focus, .contact-card textarea:focus{ outline:none;border-color:var(--primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent); } .contact-card textarea{resize:vertical;min-height:120px;line-height:1.5} .contact-card select{appearance:none; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat;background-position:right 14px center;padding-right:38px; } .contact-row{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media (max-width:520px){.contact-row{grid-template-columns:1fr;gap:0}} .contact-actions{display:flex;align-items:center;gap:16px;margin-top:22px;flex-wrap:wrap} .contact-status{font-size:14px;color:var(--text-2);transition:color .2s} .contact-status.ok{color:#22c55e;font-weight:600} .contact-status.err{color:#ef4444;font-weight:600} /* Honeypot — visible only to bots, invisible (and unfocusable) to humans. */ .contact-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} /* ============================================================ Mobile (≤ 600 px) — clean hamburger nav + tighter hero ============================================================ */ @media (max-width:600px){ header{padding:10px 0} .nav{ flex-direction:row; align-items:center; justify-content:space-between; gap:10px; flex-wrap:nowrap; } .logo{font-size:18px;flex-shrink:0} .logo img{height:32px;max-width:120px} /* Hamburger button (hidden on desktop via display:none default) */ .nav-burger{ display:inline-flex; align-items:center;justify-content:center; width:40px;height:40px;border-radius:12px; background:var(--surface);border:1px solid var(--border); color:var(--text);cursor:pointer; padding:0;font-size:22px;line-height:1;flex-shrink:0; } /* Collapsed nav — slides down when .open is set on header */ .nav-links{ display:none; flex-direction:column; align-items:stretch; width:100%; gap:0; padding:8px 0 4px; border-top:1px solid var(--border); margin-top:10px; } header.open .nav-links{display:flex} header.open .nav{flex-wrap:wrap} .nav-links a{ padding:12px 4px;font-size:15px; border-bottom:1px solid var(--border); } .nav-links a:last-of-type{border-bottom:none} /* Lang switch row inside hamburger menu */ .lang-switch{ width:100%; padding:14px 0 6px;border-left:none; margin-left:0; border-top:1px solid var(--border); justify-content:center;gap:14px; } .lang-switch a{font-size:14px;padding:4px 6px} /* Theme toggle sits in the top-right alongside the burger on mobile */ .theme-toggle{margin-left:0;width:40px;height:40px;flex-shrink:0} main{padding:32px 0} .wrap h2{font-size:19px} .hero{padding:20px 0 32px} /* (.hero-logo height is defined above; no override here) */ section{padding:48px 0} .premium{padding:36px 20px} }