/* ============================================================ styles.css — LottoMom.com Shared stylesheet for all ROOT-LEVEL pages (index, about, contact, privacy, terms, etc.) Each game subfolder has its own stylesheet, e.g.: /wi-supercash/sc-styles.css ============================================================ */ /* ── Google Fonts are loaded in each HTML ───────────── font-family: 'Oswald' (headings) + 'Inter' (body) ─────────────────────────────────────────────────────────── */ /* ── CSS Variables ─────────────────────────────────────────── */ :root { --bg: #0a0800; --bg-card: #18120a; --bg-card-feat: linear-gradient(135deg, #1c1200, #110d00); --gold: #d4a017; --gold-dim: rgba(212,160,23,0.45); --gold-bg: rgba(212,160,23,0.08); --gold-text: #e8b82a; --white: #ffffff; --white-low: rgba(255,255,255,0.36); --white-faint: rgba(255,255,255,0.20); --white-border: rgba(255,255,255,0.08); --glow: rgba(160,16,24,0.4); --max-width: 600px; --radius-card: 16px; --radius-pill: 100px; } /* ── Reset ─────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── Base ──────────────────────────────────────────────────── */ html, body { background: var(--bg); color: var(--white); font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; min-height: 100vh; } a { color: var(--gold); text-decoration: none; } a:hover { text-decoration: underline; } /* ── Page Wrapper ──────────────────────────────────────────── */ .lm-wrap { background: var(--bg); min-height: 100vh; width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0; position: relative; } /* ── Background Glow ───────────────────────────────────────── */ .lm-glow { position: fixed; top: -10%; left: 50%; transform: translateX(-50%); width: 320px; height: 320px; background: radial-gradient(circle, var(--glow) 0%, transparent 70%); pointer-events: none; z-index: 0; } /* ── Header ────────────────────────────────────────────────── */ .lm-header { position: relative; z-index: 1; text-align: center; padding: 52px 20px 24px; } .lm-badge { display: inline-block; font-size: 10px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold-dim); padding: 5px 16px; border-radius: var(--radius-pill); margin-bottom: 18px; background: var(--gold-bg); } .lm-header h1 { font-family: 'Oswald', sans-serif; font-size: 46px; font-weight: 700; line-height: 1.0; color: var(--white); letter-spacing: 0.02em; } .lm-header h1 span { color: var(--gold); display: block; } .lm-header p { margin-top: 10px; font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.32); font-weight: 500; } .lm-divider { width: 40px; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent); margin: 18px auto 0; border: none; } /* ── Nav Bar ───────────────────────────────────────────────── */ .lm-nav { position: relative; z-index: 10; display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; padding: 0 16px 20px; } .lm-nav a { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.4); padding: 6px 14px; border-radius: var(--radius-pill); border: 1px solid var(--white-border); transition: all 0.2s; text-decoration: none; } .lm-nav a:hover, .lm-nav a.active { color: var(--gold); border-color: var(--gold-dim); background: var(--gold-bg); text-decoration: none; } /* ── Section Separator ─────────────────────────────────────── */ .lm-sep { display: block; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.2); font-weight: 600; text-align: center; padding: 20px 0 6px; position: relative; z-index: 1; } /* ── Game List ─────────────────────────────────────────────── */ .lm-list { position: relative; z-index: 1; padding: 8px 16px 6px; display: flex; flex-direction: column; gap: 11px; list-style: none; } /* ── Game Card ─────────────────────────────────────────────── */ .lm-card { display: flex; align-items: center; background: var(--bg-card); border-radius: var(--radius-card); border: 1px solid var(--white-border); overflow: hidden; text-decoration: none; color: var(--white); min-height: 90px; -webkit-tap-highlight-color: transparent; transition: opacity 0.15s, border-color 0.2s; } .lm-card:hover { border-color: rgba(255,255,255,0.15); text-decoration: none; color: var(--white); } .lm-card:active { opacity: 0.7; } .lm-card.lm-featured { min-height: 112px; background: var(--bg-card-feat); } /* Accent bar */ .lm-bar { width: 4px; align-self: stretch; flex-shrink: 0; display: block; } /* Icon */ .lm-icon { font-size: 26px; padding: 0 13px; flex-shrink: 0; line-height: 1; } /* Info block */ .lm-info { flex: 1; padding: 14px 0; min-width: 0; } .lm-name { font-family: 'Oswald', sans-serif; font-size: 22px; font-weight: 700; letter-spacing: 0.04em; line-height: 1; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lm-card.lm-featured .lm-name { font-size: 27px; } .lm-sub { font-size: 11px; color: var(--white-low); font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; margin-top: 3px; line-height: 1.3; } /* Pill badge */ .lm-pill { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; padding: 4px 10px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 600; line-height: 1; } .lm-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; display: inline-block; animation: lm-blink 1.8s ease-in-out infinite; } @keyframes lm-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } } /* Arrow */ .lm-arrow { padding: 0 15px; font-size: 22px; color: rgba(255,255,255,0.18); flex-shrink: 0; line-height: 1; } /* ── Content Pages (about, privacy, terms, contact) ────────── */ .lm-content { position: relative; z-index: 1; padding: 0 20px 60px; } .lm-content h2 { font-family: 'Oswald', sans-serif; font-size: 1.6rem; font-weight: 700; color: var(--gold); letter-spacing: 0.04em; margin: 32px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--white-border); } .lm-content h3 { font-family: 'Oswald', sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--white); letter-spacing: 0.04em; margin: 24px 0 8px; } .lm-content p { font-size: 0.92rem; line-height: 1.75; color: rgba(255,255,255,0.65); margin-bottom: 14px; } .lm-content ul, .lm-content ol { padding-left: 20px; margin-bottom: 14px; } .lm-content li { font-size: 0.92rem; line-height: 1.75; color: rgba(255,255,255,0.65); margin-bottom: 4px; } .lm-content a { color: var(--gold); } .lm-content strong { color: var(--white); font-weight: 600; } /* Contact form */ .lm-form { display: flex; flex-direction: column; gap: 14px; margin-top: 16px; } .lm-field label { display: block; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.4); margin-bottom: 6px; } .lm-field input, .lm-field textarea, .lm-field select { width: 100%; background: var(--bg-card); border: 1px solid var(--white-border); border-radius: 10px; padding: 12px 14px; color: var(--white); font-family: 'Inter', sans-serif; font-size: 0.9rem; outline: none; transition: border-color 0.2s; -webkit-appearance: none; } .lm-field input:focus, .lm-field textarea:focus { border-color: var(--gold-dim); } .lm-field textarea { min-height: 120px; resize: vertical; } .lm-submit { padding: 14px; border-radius: 10px; border: none; background: linear-gradient(135deg, var(--gold), #b8860b); color: #0a0800; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.05em; cursor: pointer; transition: opacity 0.15s, transform 0.15s; } .lm-submit:hover { opacity: 0.9; transform: translateY(-1px); } .lm-submit:active { transform: translateY(0); } /* Info box */ .lm-infobox { background: var(--bg-card); border: 1px solid var(--white-border); border-radius: var(--radius-card); padding: 18px 20px; margin: 16px 0; } .lm-infobox.gold { border-color: var(--gold-dim); background: var(--gold-bg); } /* ── Footer ────────────────────────────────────────────────── */ .lm-footer { position: relative; z-index: 1; text-align: center; padding: 24px 20px 52px; margin-top: 16px; border-top: 1px solid var(--white-border); color: rgba(255,255,255,0.22); font-size: 11px; line-height: 1.8; } .lm-footer a { color: var(--gold); text-decoration: none; } .lm-footer .lm-footer-links { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; } .lm-footer .lm-footer-links a { color: rgba(255,255,255,0.35); font-size: 11px; letter-spacing: 0.05em; transition: color 0.15s; } .lm-footer .lm-footer-links a:hover { color: var(--gold); } /* ── Page Title (for inner pages) ──────────────────────────── */ .lm-page-title { position: relative; z-index: 1; padding: 40px 20px 20px; border-bottom: 1px solid var(--white-border); margin-bottom: 8px; } .lm-page-title .lm-back { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; color: rgba(255,255,255,0.35); text-decoration: none; margin-bottom: 12px; transition: color 0.15s; } .lm-page-title .lm-back:hover { color: var(--gold); text-decoration: none; } .lm-page-title h1 { font-family: 'Oswald', sans-serif; font-size: 2rem; font-weight: 700; color: var(--white); letter-spacing: 0.04em; line-height: 1.1; } .lm-page-title p { font-size: 0.85rem; color: rgba(255,255,255,0.35); margin-top: 6px; letter-spacing: 0.05em; }