/* * Lottery Sambad - main stylesheet. * Mobile-first, system-font stack, minimal payload for Core Web Vitals. * Critical above-the-fold rules are inlined in (see inc/enqueue.php). */ :root { --ls-maroon: #8a0303; --ls-maroon-d: #5c0000; --ls-red: #c1121f; --ls-gold: #f5b302; --ls-ink: #1f2430; --ls-muted: #5b6473; --ls-line: #e4e7ee; --ls-bg: #f4f6fb; --ls-card: #ffffff; --ls-green: #0a7d33; --ls-radius: 12px; --ls-shadow: 0 2px 10px rgba(20, 24, 40, .06); --ls-shadow-h: 0 8px 26px rgba(20, 24, 40, .12); --ls-max: 1120px; } *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--ls-ink); background: var(--ls-bg); line-height: 1.55; } img { max-width: 100%; height: auto; display: block; } a { color: var(--ls-red); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { line-height: 1.25; margin: 0 0 .5em; } svg { flex: none; vertical-align: middle; } .ls-container { max-width: var(--ls-max); margin: 0 auto; padding: 0 16px; } .ls-main { display: block; padding-bottom: 40px; } .ls-center { text-align: center; margin-top: 18px; } .ls-skip-link { position: absolute; left: -9999px; top: 0; background: #000; color: #fff; padding: 10px 16px; z-index: 1000; } .ls-skip-link:focus { left: 8px; top: 8px; } /* Header / nav */ .ls-topbar { background: var(--ls-maroon); color: #fff; } .ls-topbar-inner { display: flex; align-items: center; gap: 12px; padding: 14px 16px; position: relative; } .ls-brand { color: #fff; flex: 1; text-align: center; } .ls-brand:hover { text-decoration: none; } .ls-brand h1 { margin: 0; font-size: clamp(20px, 5vw, 34px); font-weight: 800; letter-spacing: .5px; color: #fff; } .ls-menu-toggle { display: inline-flex; background: transparent; border: 0; color: #fff; padding: 6px; cursor: pointer; border-radius: 8px; } .ls-menu-toggle:hover { background: rgba(255, 255, 255, .12); } .ls-header-live { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); } .ls-live-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--ls-green); color: #fff; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 20px; } .ls-live-dot { width: 8px; height: 8px; border-radius: 50%; background: #8dff9e; animation: lspulse 1.4s infinite; } @keyframes lspulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } } .ls-nav { background: #141414; } .ls-nav-list { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; } .ls-nav-list a { display: flex; align-items: center; gap: 6px; color: #fff; padding: 12px 15px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; } .ls-nav-list a:hover { background: var(--ls-maroon); text-decoration: none; } /* Nav dropdown (State Lotteries) */ .ls-has-dropdown { position: relative; } .ls-has-dropdown > a { gap: 4px; } .ls-dropdown { list-style: none; margin: 0; padding: 6px 0; position: absolute; top: 100%; left: 0; min-width: 220px; background: #fff; border: 1px solid var(--ls-line); border-radius: 0 0 10px 10px; box-shadow: var(--ls-shadow-h); display: none; z-index: 60; } .ls-dropdown li { display: block; } .ls-dropdown a { display: block; color: var(--ls-ink) !important; text-transform: none; font-size: 13.5px; padding: 9px 16px; font-weight: 600; } .ls-dropdown a:hover { background: var(--ls-maroon); color: #fff !important; } .ls-has-dropdown:hover .ls-dropdown, .ls-has-dropdown:focus-within .ls-dropdown { display: block; } @media (max-width: 782px) { .ls-nav { max-height: 0; overflow: hidden; transition: max-height .3s ease; } .ls-nav.is-open { max-height: 900px; overflow-y: auto; } .ls-nav-list { flex-direction: column; } .ls-nav-list a { border-bottom: 1px solid rgba(255, 255, 255, .08); } /* On mobile show the submenu inline (no hover needed). */ .ls-dropdown { position: static; display: block; background: rgba(0, 0, 0, .22); border: 0; border-radius: 0; box-shadow: none; padding: 0; } .ls-dropdown a { color: #fff !important; padding-left: 34px; font-size: 12.5px; } .ls-dropdown a:hover { background: var(--ls-maroon); } } @media (min-width: 783px) { .ls-menu-toggle { display: none; } } /* Sections + headings (compact) */ .ls-section { padding: 16px 0; } .ls-section-alt { background: #fff; border-top: 1px solid var(--ls-line); border-bottom: 1px solid var(--ls-line); } .ls-section-head { margin-bottom: 12px; } .ls-section-title { font-size: clamp(19px, 3.2vw, 24px); font-weight: 800; position: relative; padding-left: 12px; } .ls-section-title::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 4px; border-radius: 3px; background: var(--ls-maroon); } .ls-section-sub { color: var(--ls-muted); margin: 3px 0 0; font-size: 14px; } .ls-page-title { font-size: clamp(21px, 3.6vw, 28px); font-weight: 800; margin: 10px 0 12px; } /* Breaking banner */ .ls-breaking { background: #fff8e1; border-left: 5px solid var(--ls-gold); padding: 12px 16px; margin: 16px 0; border-radius: 8px; font-size: 14px; box-shadow: var(--ls-shadow); } .ls-breaking[data-active="1"] { background: #e9f8ee; border-left-color: var(--ls-green); } /* Hero */ .ls-hero { text-align: center; padding: 34px 0 20px; } .ls-hero-title { font-size: clamp(23px, 5vw, 38px); font-weight: 800; } .ls-hero-sub { color: var(--ls-muted); max-width: 640px; margin: 0 auto 12px; } .ls-hero-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } .ls-next-draw { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; background: #fff; border: 1px solid var(--ls-line); padding: 7px 14px; border-radius: 30px; font-size: 13.5px; box-shadow: var(--ls-shadow); } /* Buttons */ .ls-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--ls-maroon); color: #fff; padding: 10px 18px; border-radius: 8px; font-weight: 700; font-size: 14px; border: 2px solid var(--ls-maroon); cursor: pointer; transition: transform .08s ease, background .15s ease; line-height: 1.1; } .ls-btn:hover { background: var(--ls-maroon-d); border-color: var(--ls-maroon-d); color: #fff; text-decoration: none; } .ls-btn:active { transform: translateY(1px); } .ls-btn-outline { background: transparent; color: var(--ls-maroon); } .ls-btn-outline:hover { background: var(--ls-maroon); color: #fff; } .ls-btn-lg { padding: 13px 26px; font-size: 15px; } .ls-btn-sm { padding: 7px 13px; font-size: 13px; } /* Result slots (homepage) */ .ls-results-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; } .ls-result-slot { background: var(--ls-card); border: 1px solid var(--ls-line); border-radius: var(--ls-radius); padding: 14px; box-shadow: var(--ls-shadow); border-top: 4px solid var(--ls-maroon); transition: box-shadow .18s ease; } .ls-result-slot:hover { box-shadow: var(--ls-shadow-h); } .ls-result-slot.awaiting { border-top-color: var(--ls-gold); } .ls-result-slot.ls-flash { animation: lsflash 1.2s ease; } @keyframes lsflash { 0% { background: #fff8e1; } 100% { background: #fff; } } .ls-slot-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .ls-slot-name { font-size: 17px; font-weight: 800; margin: 0; } .ls-slot-time { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ls-muted); font-weight: 700; white-space: nowrap; } .ls-slot-date { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ls-muted); margin: 4px 0 12px; } .ls-slot-body { text-align: center; padding: 6px 0 2px; } .ls-slot-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--ls-muted); font-weight: 700; } .ls-slot-label.ls-await-label { color: var(--ls-gold); } .ls-slot-number { font-size: clamp(21px, 4.6vw, 28px); font-weight: 800; color: var(--ls-maroon); margin: 4px 0 8px; word-break: break-word; } .ls-slot-number.ls-await-number { color: #c9cdd6; letter-spacing: 2px; } .ls-slot-hint { font-size: 12px; color: var(--ls-muted); } /* Cards */ .ls-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 13px; } .ls-card { background: var(--ls-card); border: 1px solid var(--ls-line); border-radius: var(--ls-radius); overflow: hidden; box-shadow: var(--ls-shadow); transition: box-shadow .18s ease, transform .18s ease; } .ls-card:hover { box-shadow: var(--ls-shadow-h); transform: translateY(-2px); } .ls-card-link { color: inherit; display: block; } .ls-card-link:hover { text-decoration: none; } .ls-card-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: #eee; } .ls-card-body { padding: 14px; } .ls-card-tag { font-size: 11.5px; color: var(--ls-muted); font-weight: 700; text-transform: uppercase; letter-spacing: .3px; } .ls-card-title { font-size: 15px; font-weight: 700; margin: 6px 0; color: var(--ls-ink); } .ls-card-prize { font-size: 13px; color: var(--ls-muted); margin: 0; } .ls-card-prize strong { color: var(--ls-maroon); } /* Prose / article (compact) */ .ls-single { background: #fff; margin: 12px auto; padding: 18px; border-radius: var(--ls-radius); box-shadow: var(--ls-shadow); max-width: 900px; } .ls-prose { line-height: 1.65; } .ls-prose h2 { font-size: 20px; margin-top: 1.1em; padding-bottom: 5px; border-bottom: 2px solid var(--ls-line); } .ls-prose h3 { font-size: 17px; margin-top: .9em; } .ls-prose p, .ls-prose ul, .ls-prose ol { margin: 0 0 .8em; } .ls-lead { font-size: 16px; color: var(--ls-ink); } .ls-article-title { font-size: clamp(21px, 3.6vw, 27px); font-weight: 800; margin-bottom: .3em; } .ls-article-meta { display: flex; flex-wrap: wrap; gap: 12px; color: var(--ls-muted); font-size: 13px; margin: 6px 0 10px; } .ls-article-meta span { display: inline-flex; align-items: center; gap: 5px; } .ls-article-figure { margin: 0 0 12px; border-radius: var(--ls-radius); overflow: hidden; } .ls-article-content { line-height: 1.65; } .ls-article-content h2 { font-size: 20px; margin-top: 1.1em; padding-bottom: 5px; border-bottom: 2px solid var(--ls-line); } .ls-article-content h3 { font-size: 17px; } .ls-article-content ul, .ls-article-content ol { padding-left: 22px; } .ls-article-download { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0; padding-top: 14px; border-top: 1px solid var(--ls-line); } /* Tables */ .ls-result-table-wrap { overflow-x: auto; margin: 18px 0; } .ls-result-table { width: 100%; border-collapse: collapse; font-size: 14px; } .ls-result-table caption { caption-side: top; text-align: left; font-weight: 700; color: var(--ls-maroon); padding: 8px 0; } .ls-result-table th, .ls-result-table td { border: 1px solid var(--ls-line); padding: 10px 12px; text-align: left; } .ls-result-table thead th { background: var(--ls-maroon); color: #fff; } .ls-result-table tbody th { background: #faf7f2; font-weight: 700; white-space: nowrap; } .ls-result-table .ls-nums { font-family: "Courier New", monospace; font-weight: 700; letter-spacing: .5px; } .ls-result-table tbody tr:nth-child(even) td { background: #faf9f7; } .ls-kv-table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; } .ls-kv-table th, .ls-kv-table td { border: 1px solid var(--ls-line); padding: 9px 12px; text-align: left; } .ls-kv-table th { background: #faf7f2; width: 44%; } /* Weekly draw-name schedule tables (homepage) */ .ls-schedule-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; } .ls-schedule { background: #fff; border: 1px solid var(--ls-line); border-radius: var(--ls-radius); overflow: hidden; box-shadow: var(--ls-shadow); } .ls-schedule h3 { margin: 0; background: var(--ls-maroon); color: #fff; font-size: 15px; padding: 11px 14px; } .ls-schedule table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .ls-schedule th, .ls-schedule td { padding: 8px 12px; border-bottom: 1px solid var(--ls-line); text-align: left; } .ls-schedule thead th { background: #faf7f2; font-size: 12px; text-transform: uppercase; letter-spacing: .3px; color: var(--ls-muted); } .ls-schedule tbody tr:last-child td { border-bottom: 0; } .ls-schedule .ls-sch-name { font-weight: 700; color: var(--ls-maroon); } /* FAQ */ .ls-faq { border: 1px solid var(--ls-line); border-radius: var(--ls-radius); overflow: hidden; } .ls-faq-item { border-bottom: 1px solid var(--ls-line); } .ls-faq-item:last-child { border-bottom: 0; } .ls-faq-item summary { cursor: pointer; padding: 14px 16px; font-weight: 700; list-style: none; position: relative; padding-right: 42px; background: #fff; } .ls-faq-item summary::-webkit-details-marker { display: none; } .ls-faq-item summary::after { content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--ls-maroon); } .ls-faq-item[open] summary::after { content: "\2212"; } .ls-faq-a { padding: 0 16px 14px; color: var(--ls-muted); } /* Internal links / related */ .ls-internal-links { list-style: none; padding: 0; display: grid; gap: 8px; } .ls-internal-links li a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; } .ls-internal-links li a::before { content: "\203A"; color: var(--ls-maroon); font-weight: 800; } .ls-related { margin-top: 30px; } /* Share */ .ls-share { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--ls-muted); } .ls-share a { color: #fff; padding: 5px 12px; border-radius: 6px; font-weight: 700; font-size: 12px; } .ls-share-wa { background: #25d366; } .ls-share-tg { background: #29a9eb; } .ls-share-tw { background: #111; } .ls-share a:hover { opacity: .9; text-decoration: none; } /* Breadcrumb */ .ls-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; font-size: 13px; color: var(--ls-muted); margin: 12px 0; } .ls-breadcrumb a { color: var(--ls-muted); } .ls-bc-sep { display: inline-flex; color: #b9bfca; } /* Contact */ .ls-contact-section { background: var(--ls-maroon); color: #fff; } .ls-contact-section .ls-section-title, .ls-contact-section .ls-section-sub { color: #fff; } .ls-contact-section .ls-section-title::before { background: var(--ls-gold); } .ls-contact-grid { display: grid; grid-template-columns: 1fr; gap: 22px; } @media (min-width: 720px) { .ls-contact-grid { grid-template-columns: 1fr 1.4fr; } } .ls-ci { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; } .ls-ci a { color: #fff; } .ls-ci-ic { display: inline-flex; background: rgba(255, 255, 255, .15); border-radius: 8px; padding: 8px; } .ls-contact-form { background: #fff; border-radius: var(--ls-radius); padding: 18px; } .ls-field { margin-bottom: 12px; } .ls-field label { display: block; font-size: 13px; font-weight: 700; color: var(--ls-ink); margin-bottom: 4px; } .ls-field input, .ls-field textarea { width: 100%; border: 1px solid var(--ls-line); border-radius: 8px; padding: 10px 12px; font: inherit; color: var(--ls-ink); } .ls-field input:focus, .ls-field textarea:focus { outline: 2px solid var(--ls-maroon); border-color: var(--ls-maroon); } /* Old Result Board */ .ls-board { background: #fff; border: 1px solid var(--ls-line); border-radius: var(--ls-radius); padding: 20px; box-shadow: var(--ls-shadow); } .ls-board-form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--ls-line); } .ls-board-form label { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; } .ls-board-form input[type="date"] { border: 1px solid var(--ls-line); border-radius: 8px; padding: 9px 12px; font: inherit; } .ls-board-status { margin: 16px 0; color: var(--ls-muted); } .ls-board-result { border: 1px solid var(--ls-line); border-radius: var(--ls-radius); margin-bottom: 18px; overflow: hidden; } .ls-board-result-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; background: #faf7f2; padding: 12px 16px; border-bottom: 1px solid var(--ls-line); } .ls-board-result-head h3 { margin: 0; font-size: 17px; } .ls-board-time { color: var(--ls-muted); font-weight: 700; font-size: 14px; } .ls-board-actions { display: flex; gap: 8px; flex-wrap: wrap; } .ls-board-result > div:last-child { padding: 6px 16px 16px; } .ls-board-empty { display: flex; align-items: flex-start; gap: 10px; background: #fff8e1; border: 1px solid var(--ls-gold); border-radius: var(--ls-radius); padding: 16px; color: #7a5c00; } .ls-board.is-loading { opacity: .55; pointer-events: none; } /* Alerts */ .ls-alert { display: flex; align-items: flex-start; gap: 10px; border-radius: 8px; padding: 12px 14px; margin: 14px 0; font-size: 14px; border: 1px solid; } .ls-alert-info { background: #eef5ff; border-color: #b6d4ff; color: #0b4a9c; } .ls-alert-success { background: #e9f8ee; border-color: #a6e3ba; color: #0a5c28; } .ls-alert-warning { background: #fff4e5; border-color: #ffd39b; color: #8a5300; } /* Footer — premium maroon → charcoal gradient */ .ls-footer { background: linear-gradient(165deg, #5c0000 0%, #37110f 45%, #1a1210 100%); color: #e7d8cd; margin-top: 40px; } .ls-footer-grid { display: grid; grid-template-columns: 1fr; gap: 22px 30px; padding: 28px 16px 20px; align-items: start; } @media (min-width: 560px) { .ls-footer-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 900px) { .ls-footer-grid { grid-template-columns: 1.7fr 1fr 1fr 1fr; } } .ls-footer-about p { max-width: 42ch; } .ls-widget-title { color: var(--ls-gold); font-size: 16px; margin-bottom: 14px; position: relative; padding-bottom: 8px; } .ls-widget-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 34px; height: 3px; border-radius: 3px; background: var(--ls-gold); opacity: .8; } .ls-footer-links { list-style: none; padding: 0; margin: 0; } .ls-footer-links li { margin-bottom: 9px; } .ls-footer-links a { color: #e7d8cd; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; } .ls-footer-links a::before { content: "\203A"; color: var(--ls-gold); font-weight: 800; } .ls-footer-links a:hover { color: #fff; text-decoration: none; } .ls-disclaimer-mini { font-size: 12.5px; color: #c4a596; margin-top: 12px; line-height: 1.6; } .ls-footer-bottom { background: rgba(0, 0, 0, .28); text-align: center; padding: 15px; font-size: 13px; color: #d8c3b6; border-top: 1px solid rgba(245, 179, 2, .18); } .ls-footer-bottom p { margin: 0; } /* Pagination */ .ls-pagination { margin-top: 24px; } .ls-pagination .page-numbers { display: inline-block; padding: 8px 13px; border: 1px solid var(--ls-line); border-radius: 8px; margin: 0 3px; background: #fff; color: var(--ls-ink); font-weight: 700; } .ls-pagination .page-numbers.current { background: var(--ls-maroon); color: #fff; border-color: var(--ls-maroon); } /* 404 */ .ls-404 { text-align: center; padding: 40px 16px; } .ls-404-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 20px 0; } .ls-404-search { max-width: 420px; margin: 0 auto; } /* Print (Download PDF via print) */ @media print { .ls-header, .ls-footer, .ls-nav, .ls-board-form, .ls-board-actions, .ls-hero-actions, .ls-share, .ls-article-download, .ls-contact-section, .ls-menu-toggle { display: none !important; } body { background: #fff; } .ls-single, .ls-board, .ls-board-result { box-shadow: none; border: 0; } .ls-result-table th, .ls-result-table td { border: 1px solid #999; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } } /* SEO landing features: chart, archive, timetable, trending */ .ls-chart-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; } .ls-chart-nav strong { font-size: 17px; } .ls-chart-table th[scope="row"] { white-space: nowrap; } .ls-chart-empty { color: #c9cdd6; } .ls-archive-year { margin-bottom: 18px; } .ls-archive-year h3 { margin: 0 0 8px; color: var(--ls-maroon); } .ls-archive-months { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; } .ls-archive-months a { display: inline-block; background: #fff; border: 1px solid var(--ls-line); border-radius: 8px; padding: 7px 13px; font-weight: 600; font-size: 14px; } .ls-archive-months a:hover { background: var(--ls-maroon); color: #fff; text-decoration: none; } .ls-trending { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 0; } .ls-trending-label { font-weight: 700; color: var(--ls-muted); font-size: 13px; text-transform: uppercase; letter-spacing: .4px; } .ls-trending a { background: rgba(138, 3, 3, .06); border: 1px solid var(--ls-line); color: var(--ls-maroon); border-radius: 20px; padding: 5px 13px; font-size: 13px; font-weight: 600; } .ls-trending a:hover { background: var(--ls-maroon); color: #fff; text-decoration: none; } .ls-footer-trending { background: rgba(0, 0, 0, .18); border-top: 1px solid rgba(245, 179, 2, .15); } .ls-footer-trending .ls-trending { padding: 16px; } .ls-footer-trending .ls-trending-label { color: var(--ls-gold); } .ls-footer-trending .ls-trending a { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); color: #f0ddd0; } .ls-footer-trending .ls-trending a:hover { background: var(--ls-gold); border-color: var(--ls-gold); color: #3a2b00; } /* Homepage "Old Result" section */ .ls-old { background: #fff; border: 1px solid var(--ls-line); border-radius: var(--ls-radius); padding: 18px; box-shadow: var(--ls-shadow); } .ls-old-tabs { display: flex; flex-wrap: wrap; gap: 10px; } .ls-old-tab { flex: 1 1 auto; min-width: 110px; background: #faf7f2; border: 2px solid var(--ls-line); color: var(--ls-ink); font-weight: 800; font-size: 16px; padding: 14px 10px; border-radius: 10px; cursor: pointer; transition: all .15s ease; } .ls-old-tab:hover { border-color: var(--ls-maroon); } .ls-old-tab.is-active { background: var(--ls-maroon); border-color: var(--ls-maroon); color: #fff; } .ls-old-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 16px 0; padding-top: 16px; border-top: 1px solid var(--ls-line); } .ls-old-controls label { font-weight: 700; } .ls-old-controls input[type="date"] { border: 1px solid var(--ls-line); border-radius: 8px; padding: 9px 12px; font: inherit; } .ls-old-out:empty { display: none; } .ls-old-loading { color: var(--ls-muted); padding: 10px 0; } /* Latest Result feature (homepage top) */ .ls-latest { display: grid; grid-template-columns: 1fr; gap: 0; background: #fff; border: 1px solid var(--ls-line); border-radius: var(--ls-radius); overflow: hidden; box-shadow: var(--ls-shadow-h); } @media (min-width: 720px) { .ls-latest { grid-template-columns: 1.3fr 1fr; align-items: stretch; } } .ls-latest-thumb { display: block; background: #faf7f2; } .ls-latest-thumb img { width: 100%; height: 100%; max-height: 340px; object-fit: contain; object-position: top; background: #fff; } .ls-latest-body { padding: 22px; display: flex; flex-direction: column; justify-content: center; } .ls-latest-badge { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; background: var(--ls-gold); color: #3a2b00; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; padding: 4px 12px; border-radius: 20px; margin-bottom: 10px; } .ls-latest-title { font-size: clamp(20px, 3.5vw, 27px); font-weight: 800; margin: 0 0 8px; } .ls-latest-title a { color: var(--ls-ink); } .ls-latest-title a:hover { color: var(--ls-maroon); text-decoration: none; } .ls-latest-num { font-size: 18px; margin: 0 0 6px; } .ls-latest-num strong { color: var(--ls-maroon); font-size: 22px; } .ls-latest-updated { display: inline-flex; align-items: center; gap: 6px; color: var(--ls-muted); font-size: 13px; margin: 0 0 16px; } .ls-latest-body .ls-btn { align-self: flex-start; } /* Persistent quick-access + search strip (top of every page) */ .ls-time-strip { background: #fff; border-bottom: 1px solid var(--ls-line); } .ls-time-strip-inner { display: flex; align-items: center; gap: 12px; padding: 10px 16px; max-width: var(--ls-max); margin: 0 auto; flex-wrap: wrap; } .ls-time-qa { flex: 1 1 auto; min-width: 0; } .ls-time-qa .ls-qa-grid { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; padding-bottom: 2px; -webkit-overflow-scrolling: touch; } .ls-time-qa .ls-qa-btn { flex: 0 0 auto; min-width: 92px; padding: 8px 14px; } .ls-time-qa .ls-qa-time { font-size: 15px; } .ls-time-qa .ls-qa-sub { font-size: 10px; } @media (min-width: 900px) { .ls-time-strip { display: none; } } /* desktop uses the menu */ /* Compact search in the footer */ .ls-footer-search { margin-top: 14px; max-width: 320px; } .ls-footer-search .ls-search-form { border-color: rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .06); } .ls-footer-search .ls-search-input { color: #fff; } .ls-footer-search .ls-search-input::placeholder { color: #cbb4a8; } .ls-footer-search .ls-search-btn { background: var(--ls-gold); color: #3a2b00; } .ls-footer-search .ls-search-btn:hover { filter: brightness(1.05); } /* Color-coded quick-access buttons */ .ls-qa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; } .ls-qa-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; text-align: center; color: #fff; font-weight: 800; border-radius: 12px; padding: 14px 12px; line-height: 1.1; box-shadow: 0 3px 10px rgba(20,24,40,.14); transition: transform .1s ease, box-shadow .15s ease, filter .15s ease; } .ls-qa-btn:hover { color: #fff; text-decoration: none; transform: translateY(-2px); box-shadow: var(--ls-shadow-h); filter: brightness(1.05); } .ls-qa-btn:active { transform: translateY(0); } .ls-qa-time { font-size: 19px; font-weight: 900; letter-spacing: .3px; } .ls-qa-sub { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; opacity: .92; } .ls-qa-green { background: linear-gradient(160deg, #16a34a, #0a7d33); } .ls-qa-blue { background: linear-gradient(160deg, #2f7de1, #1e5fbf); } .ls-qa-purple { background: linear-gradient(160deg, #8b5cf6, #6d28d9); } .ls-qa-teal { background: linear-gradient(160deg, #0ea5a5, #0c8181); } .ls-qa-orange { background: linear-gradient(160deg, #f59300, #e07b00); } .ls-qa-maroon { background: linear-gradient(160deg, #b3232a, #8a0303); } /* Bottom quick-access section (end of every page/post) */ .ls-qa-bottom { padding: 16px 0; background: #fff; border-top: 3px solid var(--ls-gold); } .ls-qa-head { text-align: center; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--ls-maroon); margin: 0 0 12px; } .ls-qa-states { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; } .ls-qa-states a { background: #faf7f2; border: 1px solid var(--ls-line); color: var(--ls-maroon); font-weight: 700; font-size: 13px; padding: 7px 14px; border-radius: 20px; } .ls-qa-states a:hover { background: var(--ls-maroon); color: #fff; text-decoration: none; } /* State cards (All State Lotteries hub + [lottery_states]) */ .ls-state-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; margin: 18px 0; } .ls-state-card { display: flex; flex-direction: column; gap: 4px; background: #fff; border: 1px solid var(--ls-line); border-left: 5px solid var(--ls-maroon); border-radius: 10px; padding: 16px; box-shadow: var(--ls-shadow); transition: box-shadow .15s ease, transform .15s ease; } .ls-state-card:hover { box-shadow: var(--ls-shadow-h); transform: translateY(-2px); text-decoration: none; } .ls-state-card-name { font-weight: 800; font-size: 17px; color: var(--ls-ink); } .ls-state-card-go { font-size: 13px; color: var(--ls-maroon); font-weight: 700; } /* Search form */ .ls-search-form { display: flex; align-items: stretch; flex: 0 1 300px; border: 1.5px solid var(--ls-line); border-radius: 8px; overflow: hidden; background: #fff; } .ls-search-input { flex: 1 1 auto; min-width: 0; border: 0; padding: 8px 12px; font: inherit; color: var(--ls-ink); background: transparent; } .ls-search-input:focus { outline: none; } .ls-search-form:focus-within { border-color: var(--ls-maroon); } .ls-search-btn { flex: none; border: 0; background: var(--ls-maroon); color: #fff; padding: 0 14px; cursor: pointer; display: inline-flex; align-items: center; } .ls-search-btn:hover { background: var(--ls-maroon-d); } .ls-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } @media (max-width: 600px) { .ls-search-form { flex: 1 1 100%; order: 2; } .ls-time-btns { order: 1; } } /* Search results */ .ls-search-top { max-width: 520px; margin: 0 0 20px; } .ls-search-count { color: var(--ls-muted); margin: 0 0 14px; } .ls-search-list { display: grid; gap: 14px; } .ls-search-item { display: flex; gap: 14px; background: #fff; border: 1px solid var(--ls-line); border-radius: var(--ls-radius); padding: 14px; box-shadow: var(--ls-shadow); } .ls-search-thumb { flex: none; width: 140px; } .ls-search-thumb img { width: 140px; height: 84px; object-fit: cover; border-radius: 8px; } .ls-search-item-body { min-width: 0; } .ls-search-badge { display: inline-block; background: var(--ls-maroon); color: #fff; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; padding: 2px 8px; border-radius: 4px; margin-bottom: 4px; } .ls-search-item-title { font-size: 17px; margin: 0 0 4px; } .ls-search-item-body p { margin: 0; color: var(--ls-muted); font-size: 14px; } @media (max-width: 520px) { .ls-search-thumb, .ls-search-thumb img { width: 96px; } .ls-search-thumb img { height: 66px; } } /* Featured image at the very top of a single result */ .ls-article-figure-top { margin: 0 0 16px; border: 1px solid var(--ls-line); } .ls-article-figure-top img { width: 100%; height: auto; max-height: 460px; object-fit: contain; object-position: top center; background: #fff; display: block; } /* Popular Searches (keyword internal links) */ .ls-keywords { display: flex; flex-wrap: wrap; gap: 8px; } .ls-keywords a { display: inline-block; background: #fff; border: 1px solid var(--ls-line); color: var(--ls-maroon); font-size: 13px; font-weight: 600; padding: 6px 13px; border-radius: 20px; transition: all .15s ease; } .ls-keywords a:hover { background: var(--ls-maroon); border-color: var(--ls-maroon); color: #fff; text-decoration: none; } /* Result-slot status + action buttons */ .ls-slot-status { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; padding: 3px 10px; border-radius: 20px; margin-bottom: 8px; } .ls-slot-status .ls-dot { width: 7px; height: 7px; border-radius: 50%; } .ls-status-live { background: #e9f8ee; color: var(--ls-green); } .ls-status-live .ls-dot { background: var(--ls-green); animation: lspulse 1.4s infinite; } .ls-status-wait { background: #fff4e5; color: #8a5300; } .ls-status-wait .ls-dot { background: var(--ls-gold); } .ls-slot-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; } .ls-slot-actions .ls-btn-sm { padding: 7px 12px; font-size: 12.5px; } /* Ad slot (labelled, non-intrusive) */ .ls-ad { margin: 18px 0; text-align: center; clear: both; } .ls-ad-label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .6px; color: #a2a9b4; margin-bottom: 4px; } .ls-ad-unit { min-height: 1px; } /* Cookie consent banner (baseline) */ .ls-consent { position: fixed; bottom: 0; left: 0; right: 0; z-index: 999; background: #1a1210; color: #e7d8cd; padding: 12px 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; box-shadow: 0 -4px 20px rgba(0,0,0,.35); } .ls-consent[hidden] { display: none; } /* let the hidden attribute actually hide it (overrides display:flex) */ .ls-consent-text { margin: 0; font-size: 13.5px; max-width: 720px; } .ls-consent-text a { color: var(--ls-gold); } .ls-consent-actions { display: flex; gap: 8px; } .ls-consent .ls-btn-outline { color: #fff; border-color: rgba(255,255,255,.45); } .ls-consent .ls-btn-outline:hover { background: rgba(255,255,255,.12); } /* Author / editorial trust box (E-E-A-T) */ .ls-author-box { display: flex; gap: 14px; align-items: flex-start; background: #faf7f2; border: 1px solid var(--ls-line); border-left: 4px solid var(--ls-maroon); border-radius: var(--ls-radius); padding: 14px 16px; margin: 18px 0; } .ls-author-avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--ls-maroon); color: #fff; display: flex; align-items: center; justify-content: center; } .ls-author-name { margin: 0 0 3px; font-size: 15px; } .ls-author-bio { margin: 0 0 5px; font-size: 13.5px; color: var(--ls-muted); } .ls-author-links { margin: 0; font-size: 13px; } .ls-byline { display: inline-flex; align-items: center; gap: 5px; } /* Footer responsible-play notice */ .ls-footer-notice { font-size: 12px; color: #c4a596; margin: 0 0 6px; }