/* ═══════════════════════════════════════════════════════════════ Thailand Lottery TV — Style Sheet • Background: white / transparent (user supplies BG image via CSS custom property --bg-image on or inline style) • Contact modal: pixel-perfect clone of screenshot • Mobile-first, PWA-ready ═══════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --navy: #0d1550; --modal-bg: #1a2b6e; /* dark navy of the popup card */ --modal-field:#1e3280; /* slightly lighter field row */ --teal: #3a9080; --red: #d44f3d; --charcoal: #3b4650; --gold: #f5c518; --coral: #e84040; /* SUBMIT NOW button */ --text: #1c1c1c; --white: #ffffff; --placeholder:#7b90c8; /* light blue-gray in modal */ --header-h: 60px; --safe-b: env(safe-area-inset-bottom, 0px); } html, body { height: 100%; width: 100%; overflow-x: hidden; font-family: 'Roboto', Arial, sans-serif; /* ── White/neutral base; user can override with BG image ── */ background-color: #ffffff; /* To use a background image, add this to your server config or inline style on : background-image: url('/static/img/background.jpg'); background-size: cover; background-position: center; background-attachment: fixed; */ -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; } /* ── App Shell ────────────────────────────────────────────── */ .app-shell { display: flex; flex-direction: column; min-height: 100dvh; position: relative; overflow: hidden; } /* ── Header ───────────────────────────────────────────────── */ .app-header { position: sticky; top: 0; z-index: 100; background: var(--navy); height: var(--header-h); display: flex; align-items: center; padding: 0 16px 0 12px; gap: 10px; flex-shrink: 0; } .header-logo { width: 44px; height: 44px; flex-shrink: 0; } .header-logo svg { width: 44px; height: 44px; display: block; } .header-title { flex: 1; color: var(--white); font-weight: 700; font-size: 19px; letter-spacing: .15px; white-space: nowrap; } .header-home-btn { background: none; border: none; cursor: pointer; padding: 6px; display: flex; align-items: center; justify-content: center; text-decoration: none; } .header-home-btn svg { width: 28px; height: 28px; fill: var(--white); } /* ── Page Content ─────────────────────────────────────────── */ .page-content { flex: 1; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; background-image: url('/static/img/bg.png'); background-size: cover; background-position: center; background-attachment: fixed; } /* No background triangle layers — clean white background */ /* ── Menu Grid ────────────────────────────────────────────── */ .menu-grid { position: relative; z-index: 1; width: 100%; max-width: 440px; padding: 42px 10px 0; } .menu-row { display: flex; justify-content: space-around; align-items: flex-start; margin-bottom: 30px; } .menu-row.single { justify-content: center; } /* NO card box — transparent floating icon + label only */ .menu-card { display: flex; flex-direction: column; align-items: center; gap: 11px; text-decoration: none; background: transparent; border: none; box-shadow: none; border-radius: 0; padding: 0; width: 155px; cursor: pointer; position: relative; -webkit-user-select: none; user-select: none; transition: opacity .12s; } .menu-card:active { opacity: .72; } .menu-icon { width: 88px; height: 88px; display: flex; align-items: center; justify-content: center; } .menu-icon svg { width: 100%; height: 100%; display: block; } .menu-label { font-size: 13.5px; font-weight: 900; color: var(--text); text-align: center; letter-spacing: .7px; line-height: 1.25; text-transform: uppercase; } /* ── FAB ─────────────────────────────────────────────────── */ .fab { position: fixed; bottom: calc(18px + var(--safe-b)); right: 16px; z-index: 200; width: 58px; height: 58px; background: var(--red); border-radius: 50%; display: flex; align-items: center; justify-content: center; border: none; cursor: pointer; box-shadow: 0 4px 18px rgba(212,79,61,.55); transition: transform .14s; text-decoration: none; } .fab:active { transform: scale(.91); } .fab svg { width: 28px; height: 28px; fill: var(--white); } /* ══════════════════════════════════════════════════════════════ CONTACT MODAL — pixel-perfect clone of screenshot Dark navy card, bottom-border-only fields, coral submit btn ══════════════════════════════════════════════════════════════ */ /* Backdrop */ .modal-backdrop { position: fixed; inset: 0; background: rgba(5, 10, 40, 0.72); z-index: 500; display: flex; align-items: center; justify-content: center; padding: 0 14px; opacity: 0; pointer-events: none; transition: opacity .25s ease; } .modal-backdrop.open { opacity: 1; pointer-events: all; } /* Modal card — square corners, exact clone of screenshot */ .modal-card { background: var(--modal-bg); border-radius: 0; width: 100%; max-width: 380px; padding: 30px 24px 28px; position: relative; transform: translateY(40px) scale(.97); transition: transform .28s cubic-bezier(.22,.68,0,1.2); max-height: 92dvh; overflow-y: auto; } .modal-backdrop.open .modal-card { transform: translateY(0) scale(1); } /* Close button */ .modal-close { position: absolute; top: 16px; right: 18px; background: none; border: none; cursor: pointer; padding: 4px; line-height: 1; color: rgba(255,255,255,.75); font-size: 22px; font-weight: 300; transition: color .15s; } .modal-close:hover { color: var(--white); } .modal-close svg { width: 22px; height: 22px; display: block; } /* Title */ .modal-title { color: var(--white); font-size: 20px; font-weight: 700; text-align: center; margin-bottom: 28px; padding-right: 20px; /* don't overlap X button */ line-height: 1.3; } /* Field wrapper — adds spacing between fields */ .modal-field { margin-bottom: 22px; } /* Input / textarea: no box, only bottom border */ .modal-input, .modal-textarea { width: 100%; background: transparent; border: none; border-bottom: 1.5px solid rgba(100, 140, 220, 0.55); color: var(--white); font-size: 15px; font-family: 'Roboto', Arial, sans-serif; padding: 6px 0 10px; outline: none; caret-color: var(--white); transition: border-color .2s; /* -webkit-appearance: none; */ border-radius: 0; /* no radius — iOS input fix */ } .modal-input::placeholder, .modal-textarea::placeholder { color: var(--placeholder); font-size: 15px; font-weight: 400; } .modal-input:focus, .modal-textarea:focus { border-bottom-color: rgba(160, 190, 255, 0.9); } /* Textarea — tall, no resize handle */ .modal-textarea { resize: none; min-height: 120px; display: block; line-height: 1.5; } /* Error text under field */ .field-error { color: #ff7b7b; font-size: 11.5px; margin-top: 4px; display: none; } .field-error.visible { display: block; } /* Submit button */ .modal-submit { display: block; width: 100%; margin-top: 28px; padding: 17px 10px; background: var(--coral); color: var(--white); font-size: 15px; font-weight: 900; letter-spacing: 1.4px; text-transform: uppercase; border: none; border-radius: 50px; /* full pill */ cursor: pointer; transition: background .18s, transform .14s; /* -webkit-appearance: none; */ } .modal-submit:active { transform: scale(.97); background: #c83030; } .modal-submit:disabled { opacity: .6; cursor: not-allowed; } /* Success / error banner inside modal */ .modal-banner { padding: 12px 16px; border-radius: 8px; font-size: 13.5px; font-weight: 700; text-align: center; margin-top: 16px; display: none; } .modal-banner.success { background: rgba(50,180,100,.25); color: #7eefb0; display: block; } .modal-banner.error { background: rgba(220,60,60,.22); color: #ffaaaa; display: block; } /* ── PWA Install Banner ───────────────────────────────────── */ #install-banner { position: fixed; bottom: calc(88px + var(--safe-b)); right: 12px; z-index: 300; background: var(--navy); color: var(--white); border-radius: 12px; padding: 10px 14px; display: none; align-items: center; gap: 10px; box-shadow: 0 4px 16px rgba(0,0,0,.35); max-width: 260px; } #install-banner.visible { display: flex; animation: slideUp .3s ease; } @keyframes slideUp { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:translateY(0); } } #install-banner p { font-size: 12px; line-height: 1.4; flex: 1; } #install-btn { background: var(--gold); color: #000; border: none; border-radius: 8px; padding: 6px 12px; font-weight: 700; font-size: 12px; cursor: pointer; white-space: nowrap; } #dismiss-btn { background: none; border: none; color: rgba(255,255,255,.55); font-size: 20px; cursor: pointer; padding: 0 2px; line-height: 1; } /* ── Sub-pages ────────────────────────────────────────────── */ .subpage-content { position: relative; z-index: 1; width: 100%; max-width: 420px; padding: 24px 16px; } .placeholder-card { background: rgba(255,255,255,.88); border-radius: 14px; padding: 32px 20px; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,.08); } .placeholder-card h2 { font-size: 18px; font-weight: 900; color: var(--navy); margin-bottom: 10px; } .placeholder-card p { font-size: 14px; color: #555; line-height: 1.6; } /* ── Ripple ───────────────────────────────────────────────── */ .ripple-effect { position: absolute; border-radius: 50%; width: 120px; height: 120px; background: rgba(0,0,0,.1); transform: scale(0); animation: rpl .5s linear; pointer-events: none; } @keyframes rpl { to { transform: scale(4); opacity: 0; } } /* ── Responsive ───────────────────────────────────────────── */ @media (max-width: 360px) { .menu-icon { width: 76px; height: 76px; } .menu-label { font-size: 12px; } .menu-card { width: 130px; } .header-title { font-size: 16px; } .menu-grid { padding-top: 34px; } .modal-card { padding: 26px 18px 22px; border-radius: 0; } .modal-title { font-size: 18px; } } @media (min-width: 430px) { .menu-icon { width: 100px; height: 100px; } .menu-card { width: 170px; } } /* ── Header refresh button (used on GLO + GTF pages) ─────── */ .header-refresh-btn { background: none; border: none; cursor: pointer; padding: 6px; display: flex; align-items: center; justify-content: center; margin-left: 2px; border-radius: 50%; transition: background .15s; } .header-refresh-btn:active { background: rgba(255,255,255,.15); } .header-refresh-btn svg { width: 24px; height: 24px; fill: #ffffff; display: block; } @keyframes hdr-spin { to { transform: rotate(360deg); } } .header-refresh-btn.spinning svg { animation: hdr-spin .6s linear infinite; } /* ── TV sound button (live TV page only) ─────────────────── */ .tv-sound-btn { position: absolute; bottom: 12px; left: 12px; z-index: 15; width: 44px; height: 44px; background: rgba(0,0,0,.62); border: 1.8px solid rgba(255,255,255,.50); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .15s; } .tv-sound-btn:active { background: rgba(0,0,0,.90); } .tv-sound-btn svg { width: 22px; height: 22px; fill: #ffffff; display: block; } /* Shared utility */ .u-hidden { display: none !important; } /* ── Latest Result button (above FAB) ───────────────────── */ .fab-latest { position: fixed; bottom: calc(90px + var(--safe-b)); right: 16px; z-index: 200; background: var(--navy); color: var(--white); border-radius: 50px; display: flex; align-items: center; gap: 7px; padding: 10px 16px 10px 12px; text-decoration: none; box-shadow: 0 4px 16px rgba(13,21,80,.45); transition: transform .14s, opacity .14s; font-size: 13px; font-weight: 700; letter-spacing: .3px; white-space: nowrap; } .fab-latest:active { transform: scale(.94); opacity: .85; } .fab-latest svg { width: 20px; height: 20px; fill: var(--gold); flex-shrink: 0; }