/* Lottózás — minimal, docs-style design. One font (Helvetica), light/dark themes, per-game accent set on (and .game-* wrappers) as --accent / --accent-dark / --accent-soft. */ :root { --bg: #ffffff; --surface: #fafafa; --card: #ffffff; --ink: #171717; --ink-2: #737373; --hairline: #e5e5e5; --hairline-strong: #d4d4d4; --hover: #f5f5f5; --sans: "Helvetica Neue", Helvetica, Arial, sans-serif; } :root[data-theme="dark"] { --bg: #111111; --surface: #191919; --card: #191919; --ink: #ededed; --ink-2: #9c9c9c; --hairline: #2b2b2b; --hairline-strong: #3d3d3d; --hover: #222222; } /* accent alias: resolves per element, switches to the dark variant in dark mode */ * { --ac: var(--accent); --ac-soft: var(--accent-soft); } :root[data-theme="dark"] * { --ac: var(--accent-dark, var(--accent)); --ac-soft: color-mix(in srgb, var(--accent-dark, var(--accent)) 16%, var(--surface)); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 15.5px; line-height: 1.65; } .wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; } a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--hairline-strong); text-underline-offset: 3px; } a:hover { text-decoration-color: var(--ac); color: var(--ac); } h1, h2, h3 { font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; } h1 { font-size: 1.85rem; margin: 1.7rem 0 0.7rem; } h2 { font-size: 1.25rem; margin: 2.3rem 0 0.6rem; } h3 { font-size: 1.02rem; margin: 1.4rem 0 0.4rem; } p { margin: 0.55rem 0 1rem; } .lead { font-size: 1.08rem; color: var(--ink-2); max-width: 46em; } .muted { color: var(--ink-2); font-size: 0.9rem; } code { background: var(--surface); border: 1px solid var(--hairline); padding: 0.08em 0.35em; border-radius: 5px; font-size: 0.88em; } .icon { width: 16px; height: 16px; vertical-align: -3px; flex: none; } /* ------------------------------------------------------------------ header */ .site-header { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 1px solid var(--hairline); } .header-inner { display: flex; align-items: center; gap: 20px; height: 56px; } .wordmark { font-size: 1.12rem; font-weight: 700; letter-spacing: -0.02em; text-decoration: none; margin-right: 4px; } .wordmark:hover { color: var(--ink); } .site-nav { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; flex: 1; } .site-nav::-webkit-scrollbar { display: none; } .site-nav a { text-decoration: none; color: var(--ink-2); font-size: 0.88rem; white-space: nowrap; padding: 6px 10px; border-radius: 6px; } .site-nav a:hover { color: var(--ink); background: var(--hover); } .site-nav a.active { color: var(--ac); font-weight: 600; } .theme-toggle { border: 1px solid var(--hairline); background: transparent; color: var(--ink-2); border-radius: 6px; width: 32px; height: 32px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex: none; } .theme-toggle:hover { color: var(--ink); border-color: var(--hairline-strong); } .theme-toggle .icon { width: 15px; height: 15px; vertical-align: 0; } .tt-sun { display: none; } .tt-moon { display: inline-flex; } :root[data-theme="dark"] .tt-sun { display: inline-flex; } :root[data-theme="dark"] .tt-moon { display: none; } /* ------------------------------------------------------------------ layout */ .layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 48px; align-items: start; } .content { min-width: 0; padding-bottom: 2rem; } .content-single { padding-bottom: 2rem; } .sidebar { position: sticky; top: 72px; max-height: calc(100vh - 88px); overflow-y: auto; padding: 20px 0 24px; } .side-mobile { display: none; } .side-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.95rem; margin: 0 0 0.8rem; } .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: none; } .side-group h3 { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-2); margin: 1.3rem 0 0.3rem; font-weight: 600; } .side-group a { display: flex; align-items: center; gap: 9px; padding: 5px 10px; margin-left: -10px; border-radius: 6px; text-decoration: none; color: var(--ink-2); font-size: 0.88rem; } .side-group a .icon { width: 14.5px; height: 14.5px; opacity: 0.75; } .side-group a:hover { color: var(--ink); background: var(--hover); } .side-group a.active { color: var(--ac); background: var(--ac-soft); font-weight: 600; } .side-group a.active .icon { opacity: 1; } /* ------------------------------------------------------------------ crumbs */ .crumbs { margin: 1.3rem 0 0; font-size: 0.82rem; color: var(--ink-2); } .crumbs a { color: var(--ink-2); text-decoration: none; } .crumbs a:hover { color: var(--ink); } .crumb-sep { margin: 0 7px; color: var(--hairline-strong); } /* ------------------------------------------------------------------- balls */ .balls { display: inline-flex; gap: 8px; flex-wrap: wrap; align-items: center; } .ball { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--card); border: 1.5px solid var(--ac); color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 1rem; } .ball-euro { background: var(--ac); color: var(--bg); border-color: var(--ac); } .ball-bonus { border-style: dashed; color: var(--ink-2); } .balls-lg .ball { width: 54px; height: 54px; font-size: 1.3rem; } .balls-md { gap: 6px; } .balls-md .ball { width: 34px; height: 34px; font-size: 0.9rem; border-width: 1.5px; } .balls-sm { gap: 5px; } .balls-sm .ball { width: 29px; height: 29px; font-size: 0.82rem; border-width: 1.25px; } .game-otos { --accent: #00843D; --accent-soft: #E6F3EC; --accent-dark: #3DBA70; } .game-hatos { --accent: #C8102E; --accent-soft: #FBEAED; --accent-dark: #F0566B; } .game-skandi { --accent: #0060AE; --accent-soft: #E6F0F8; --accent-dark: #58A6E8; } .game-eurojackpot { --accent: #96700A; --accent-soft: #F6F0DF; --accent-dark: #D9B44A; } .draw-sets { margin: 0.8rem 0 1.2rem; display: flex; flex-direction: column; gap: 10px; } .draw-set { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .set-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); min-width: 84px; } .set-plus { color: var(--ink-2); font-size: 1.15rem; } .kicker { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ac); font-weight: 700; margin: 1.7rem 0 0.5rem; } /* ------------------------------------------------------------------ tables */ .table-scroll { overflow-x: auto; margin: 0.8rem 0 1.4rem; border: 1px solid var(--hairline); border-radius: 8px; } table { border-collapse: collapse; width: 100%; font-size: 0.92rem; background: var(--card); } th, td { padding: 9px 14px; border-bottom: 1px solid var(--hairline); text-align: left; vertical-align: middle; } tbody tr:last-child td { border-bottom: none; } thead th { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-2); background: var(--surface); font-weight: 600; } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; } table.compact { font-size: 0.88rem; } table.compact th, table.compact td { padding: 6px 12px; } tbody tr:hover { background: var(--hover); } table.sortable thead th { cursor: pointer; user-select: none; } table.sortable thead th:hover { color: var(--ink); } table.sortable thead th.sorted-asc::after { content: ' ↑'; } table.sortable thead th.sorted-desc::after { content: ' ↓'; } /* ------------------------------------------------------------------ charts */ .chart { width: 100%; height: auto; margin: 0.6rem 0 1rem; } .c-bar { fill: var(--hairline-strong); } .c-bar.c-accent, svg .c-accent { fill: var(--ac); } .chart .c-bar:hover { fill: var(--ac); } .c-lab { font: 11px var(--sans); fill: var(--ink-2); } .c-val { font: 11px var(--sans); fill: var(--ink); font-variant-numeric: tabular-nums; } /* --------------------------------------------------------------- home page */ .hero { display: flex; align-items: center; gap: 40px; padding: 1rem 0 0.4rem; } .hero-text { flex: 1; } .hero-art { flex: none; width: 300px; max-width: 34%; } .hero-art svg { width: 100%; height: auto; } .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 16px; margin: 1.5rem 0; } .game-card { background: var(--card); border: 1px solid var(--hairline); border-radius: 10px; padding: 18px 20px 12px; position: relative; overflow: hidden; display: flex; flex-direction: column; } .game-card .card-jackpot { margin-bottom: 0.9rem; } .game-card .card-links { margin-top: auto; } .game-card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--ac); } .game-card h2 { margin: 0 0 0.15rem; font-size: 1.12rem; } .game-card h2 a { text-decoration: none; } .game-card h2 a:hover { color: var(--ac); } .card-meta { margin: 0 0 0.4rem; font-size: 0.82rem; color: var(--ink-2); } .card-jackpot { font-size: 0.87rem; color: var(--ink-2); margin: 0.2rem 0 0.6rem; } .card-jackpot.won { color: var(--ink); } .card-links { font-size: 0.85rem; margin: 0; padding-top: 0.55rem; border-top: 1px solid var(--hairline); } .card-links a { color: var(--ink-2); text-decoration: none; } .card-links a:hover { color: var(--ac); } .tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 1rem 0 2rem; } .tool { display: block; background: var(--card); border: 1px solid var(--hairline); border-radius: 10px; padding: 15px 17px; text-decoration: none; font-size: 0.88rem; color: var(--ink-2); line-height: 1.55; } .tool:hover { border-color: var(--hairline-strong); color: var(--ink-2); background: var(--surface); } .tool .icon { width: 18px; height: 18px; color: var(--ink); margin-bottom: 8px; display: block; } .tool strong { display: block; color: var(--ink); font-size: 0.97rem; margin-bottom: 2px; } /* ---------------------------------------------------------------- game hub */ .latest-draw { border-bottom: 1px solid var(--hairline); padding-bottom: 0.6rem; } .teaser-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; margin: 1rem 0 1.6rem; } .teaser { background: var(--card); border: 1px solid var(--hairline); border-radius: 10px; padding: 14px 18px; } .teaser h2, .teaser h3 { margin-top: 0.2rem; font-size: 0.99rem; display: flex; align-items: center; gap: 8px; } .teaser h2 .icon, .teaser h3 .icon { color: var(--ac); } .teaser p:last-child { margin-bottom: 0.3rem; } .year-cloud { display: flex; flex-wrap: wrap; gap: 7px; margin: 0.8rem 0 1.6rem; } .year-link { display: inline-block; padding: 4px 11px; background: var(--card); border: 1px solid var(--hairline); border-radius: 6px; text-decoration: none; font-variant-numeric: tabular-nums; font-size: 0.88rem; color: var(--ink-2); } .year-link:hover { border-color: var(--ac); color: var(--ac); } .faq details { border: 1px solid var(--hairline); border-radius: 8px; margin-bottom: 8px; background: var(--card); } .faq summary { padding: 11px 16px; cursor: pointer; font-weight: 600; font-size: 0.95rem; list-style-position: outside; } .faq summary:hover { color: var(--ac); } .faq-a { padding: 0 16px 4px; font-size: 0.93rem; } .pager { display: flex; justify-content: space-between; gap: 12px; margin: 1rem 0; font-size: 0.9rem; } .pager a { color: var(--ink-2); text-decoration: none; } .pager a:hover { color: var(--ac); } /* ------------------------------------------------------------------- stats */ .stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 1.4rem 0; } .stat-card { background: var(--card); border: 1px solid var(--hairline); border-radius: 10px; padding: 16px 18px 12px; } .stat-big { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; color: var(--ac); line-height: 1.1; } .stat-card p { margin: 0.45rem 0; font-size: 0.88rem; color: var(--ink-2); } .stat-card a { font-size: 0.85rem; } .heat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: 6px; margin: 0.8rem 0 0.4rem; } .heat { display: flex; flex-direction: column; align-items: center; padding: 6px 2px 4px; border: 1px solid var(--hairline); border-radius: 7px; background: var(--card); line-height: 1.3; } .heat b { font-size: 0.95rem; font-variant-numeric: tabular-nums; } .heat i { font-style: normal; font-size: 0.66rem; color: var(--ink-2); font-variant-numeric: tabular-nums; } .heat.h1 { background: color-mix(in srgb, var(--ac) 10%, var(--bg)); } .heat.h2 { background: color-mix(in srgb, var(--ac) 24%, var(--bg)); } .heat.h3 { background: color-mix(in srgb, var(--ac) 42%, var(--bg)); } .heat.h4 { background: color-mix(in srgb, var(--ac) 62%, var(--bg)); } .heat.h3 b, .heat.h4 b { color: #fff; } .heat.h3 i, .heat.h4 i { color: rgba(255,255,255,0.85); } :root[data-theme="dark"] .heat.h3 b, :root[data-theme="dark"] .heat.h4 b { color: #111; } :root[data-theme="dark"] .heat.h3 i, :root[data-theme="dark"] .heat.h4 i { color: rgba(0,0,0,0.7); } .heat-legend { margin-bottom: 1.4rem; } .notice { background: var(--surface); border: 1px solid var(--hairline); border-left: 3px solid var(--ac); border-radius: 8px; padding: 4px 20px 8px; margin: 1.6rem 0; } .notice h2 { margin-top: 0.9rem; font-size: 1.05rem; } /* ------------------------------------------------------------- interactive */ .btn { font: 600 0.92rem var(--sans); color: var(--bg); background: var(--ink); border: 1px solid var(--ink); padding: 9px 18px; cursor: pointer; border-radius: 7px; } .btn:hover { opacity: 0.85; } .btn:disabled { opacity: 0.4; cursor: not-allowed; } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--hairline-strong); } .btn-ghost:hover { border-color: var(--ink); opacity: 1; } .pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; margin: 0.6rem 0 1.2rem; max-width: 620px; } .pick { font: 500 0.92rem var(--sans); padding: 9px 0; text-align: center; color: var(--ink); background: var(--card); border: 1px solid var(--hairline); border-radius: 7px; cursor: pointer; font-variant-numeric: tabular-nums; } .pick:hover { border-color: var(--ac); } .pick.on { background: var(--ac); color: var(--bg); border-color: var(--ac); font-weight: 700; } .pick-grid-euro { max-width: 380px; } .checker-actions { display: flex; gap: 10px; flex-wrap: wrap; margin: 1rem 0 1.4rem; } .checker-results { margin: 1rem 0; } .result-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); gap: 10px; margin: 1rem 0; max-width: 620px; } .result-box { background: var(--card); border: 1px solid var(--hairline); border-radius: 8px; padding: 10px 14px; text-align: center; } .result-box b { display: block; font-size: 1.5rem; font-weight: 700; color: var(--ac); } .result-box span { font-size: 0.78rem; color: var(--ink-2); } .tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 1.2rem 0; } .tab { font: 500 0.88rem var(--sans); padding: 7px 13px; cursor: pointer; background: var(--card); border: 1px solid var(--hairline); border-radius: 7px; color: var(--ink-2); } .tab:hover { border-color: var(--ac); color: var(--ink); } .tab.active { background: var(--ac); border-color: var(--ac); color: var(--bg); font-weight: 600; } .gen-controls { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 1rem 0; } .gen-controls select { font: inherit; padding: 6px 8px; border: 1px solid var(--hairline-strong); border-radius: 7px; background: var(--card); color: var(--ink); } .gen-output { display: flex; flex-direction: column; gap: 12px; margin: 1.2rem 0; } .gen-line { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .gen-line .line-no { font-size: 0.78rem; color: var(--ink-2); min-width: 20px; } /* ------------------------------------------------------------------- share */ .share { display: flex; align-items: center; gap: 6px; margin-top: 3rem; padding-top: 0.9rem; border-top: 1px solid var(--hairline); } .share-label { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-2); margin-right: 6px; } .share a, .share .share-copy { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px; color: var(--ink-2); border: none; background: transparent; cursor: pointer; text-decoration: none; padding: 0; } .share a:hover, .share .share-copy:hover { color: var(--ink); background: var(--hover); } .share .icon { width: 15px; height: 15px; vertical-align: 0; } .share .share-copy.copied { color: var(--ac); } /* ---------------------------------------------------------------- tudástár */ .article-list { margin: 1.6rem 0; display: grid; gap: 12px; } .article-card { background: var(--card); border: 1px solid var(--hairline); border-radius: 10px; padding: 6px 22px 10px; } .article-card h2 { font-size: 1.12rem; margin: 0.9rem 0 0.3rem; display: flex; align-items: center; gap: 9px; } .article-card h2 .icon { color: var(--ink-2); } .article-card h2 a { text-decoration: none; } .article-card h2 a:hover { color: var(--ac); } .article-card p { margin: 0.3rem 0; font-size: 0.93rem; } .article { max-width: 45em; } .article-meta { margin-top: -0.3rem; } .article h2 { font-size: 1.28rem; margin-top: 2.1rem; } .article h3 { font-size: 1.05rem; } .article blockquote { border-left: 3px solid var(--ac); margin: 1rem 0; padding: 0.2rem 0 0.2rem 16px; color: var(--ink-2); } .article a[href^="http"]::after { content: '↗'; font-size: 0.75em; margin-left: 2px; color: var(--ink-2); } .related { max-width: 45em; border-top: 1px solid var(--hairline); margin-top: 2rem; } .related ul { padding-left: 1.2em; } .related li { margin: 0.35rem 0; } /* ------------------------------------------------------------------ footer */ .site-footer { margin-top: 2.5rem; background: var(--surface); border-top: 1px solid var(--hairline); } .footer-inner { padding-top: 28px; padding-bottom: 32px; } .footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; } .footer-cols h3 { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-2); margin: 0 0 0.6rem; font-weight: 600; } .footer-cols a { display: block; font-size: 0.85rem; color: var(--ink-2); text-decoration: none; padding: 2.5px 0; } .footer-cols a:hover { color: var(--ink); } .footer-note { font-size: 0.76rem; color: var(--ink-2); border-top: 1px solid var(--hairline); margin-top: 24px; padding-top: 16px; line-height: 1.6; } /* -------------------------------------------------------------- responsive */ @media (max-width: 900px) { .layout { grid-template-columns: 1fr; gap: 0; } .sidebar { position: static; max-height: none; padding: 16px 0 0; } .side-desktop { display: none; } .side-mobile { display: block; border: 1px solid var(--hairline); border-radius: 8px; background: var(--card); } .side-mobile summary { padding: 10px 16px; font-weight: 600; font-size: 0.92rem; cursor: pointer; } .side-mobile .side-body { padding: 4px 16px 14px; } } @media (max-width: 640px) { h1 { font-size: 1.45rem; } .balls-lg .ball { width: 44px; height: 44px; font-size: 1.1rem; } .header-inner { gap: 10px; } .hero { flex-direction: column-reverse; gap: 10px; } .hero-art { width: 200px; max-width: 60%; margin: 0 auto; } .heat-grid { grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); } } @media print { .site-nav, .site-footer, .sidebar, .checker-actions, .share, .theme-toggle { display: none; } }