@import url('../fonts/fonts.css'); /* =================================================================== Design tokens One accent, spent sparingly: the primary call to action, the active navigation item, and at most one block per page. Structure comes from hairline borders and a stepped surface stack, not from drop shadows. Written mobile-first, so every wider rule is additive and no later block can silently outrank a media query. =================================================================== */ :root { /* Surface stack, deepest first */ --ink-0: #0b0b0d; --ink-1: #101014; --ink-2: #16161b; --ink-3: #1d1d23; --ink-4: #26262e; /* Hairlines do the structural work */ --line-1: #23232b; --line-2: #2f2f39; --line-3: #3c3c48; /* Warm off-white, never pure white */ --fg: #eceae4; --fg-mute: #a29e96; --fg-faint: #8a877f; /* 4.67:1 on the deepest card, 5.48:1 on ink-0 */ /* The single accent */ --accent: #c8a24a; --accent-warm: #dcbb6b; --accent-deep: #7a5e1e; --accent-wash: rgba(200, 162, 74, 0.10); --accent-line: rgba(200, 162, 74, 0.34); /* Status. Desaturated so they never compete with the accent. */ --danger: #d98d82; --danger-deep: #3a1c19; --danger-line: rgba(217, 141, 130, 0.38); --ok: #93b48d; --ok-deep: #1c2a1b; --ok-line: rgba(147, 180, 141, 0.34); --font-ui: 'Inter Tight', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-prose: 'Source Serif 4', Georgia, 'Times New Roman', serif; --r-sm: 3px; --r-md: 5px; --r-lg: 9px; --container: 1180px; --gutter: 20px; --step: 8px; } /* =================================================================== Reset =================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } body { margin: 0; background: var(--ink-1); color: var(--fg); font-family: var(--font-ui); font-size: 16px; line-height: 1.55; font-weight: 400; letter-spacing: -0.011em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* No overflow-x: hidden here. It was a crutch, and it turns into a scroll container that can break position: sticky. Overflow is measured at 320/390/768/1440 instead, so nothing needs hiding. */ } img, svg, video { max-width: 100%; height: auto; display: block; } button, input, select, textarea { font: inherit; color: inherit; } a { color: var(--fg); text-decoration-color: var(--line-3); text-underline-offset: 3px; } a:hover { text-decoration-color: var(--accent); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } hr { border: 0; border-top: 1px solid var(--line-1); margin: calc(var(--step) * 5) 0; } /* =================================================================== Browser surfaces The parts of the page nobody draws still carry the design: the selection highlight, the caret, the scrollbar, the focus ring. Left alone they ship in colours that belong to no design system, and on a near-black ground the default selection blue is the loudest thing on screen. =================================================================== */ ::selection { background: rgba(200, 162, 74, 0.28); color: var(--fg); text-shadow: none; } ::-moz-selection { background: rgba(200, 162, 74, 0.28); color: var(--fg); } input, textarea, select { caret-color: var(--accent); } /* Firefox */ * { scrollbar-color: var(--line-3) transparent; scrollbar-width: thin; } /* WebKit */ ::-webkit-scrollbar { width: 11px; height: 11px; } ::-webkit-scrollbar-track { background: var(--ink-0); } ::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 999px; border: 3px solid var(--ink-0); } ::-webkit-scrollbar-thumb:hover { background: var(--line-3); } ::-webkit-scrollbar-corner { background: var(--ink-0); } /* Figures, money and phone numbers line up in columns. */ .dtable td, .dtable th, .statline__v, .game__meta, .hero__fact dd, .compliance__phone, .footer a[href^="tel:"] { font-variant-numeric: tabular-nums; } /* The date input's own control is drawn by the browser in light colours. */ input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.55); cursor: pointer; } input[type="date"]::-webkit-calendar-picker-indicator:hover { filter: invert(1) opacity(.9); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .skip-link { position: absolute; top: -200px; left: var(--gutter); z-index: 200; padding: 10px 16px; background: var(--accent); color: var(--ink-0); border-radius: var(--r-sm); font-weight: 600; } .skip-link:focus { top: 12px; } /* =================================================================== Typography =================================================================== */ h1, h2, h3, h4, h5 { font-family: var(--font-ui); font-weight: 600; margin: 0 0 0.5em; color: var(--fg); text-wrap: balance; } h1 { font-size: clamp(2.05rem, 1.35rem + 3.1vw, 3.75rem); line-height: 1.03; letter-spacing: -0.038em; font-weight: 650; } h2 { font-size: clamp(1.55rem, 1.2rem + 1.5vw, 2.3rem); line-height: 1.1; letter-spacing: -0.03em; } h3 { font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem); line-height: 1.22; letter-spacing: -0.02em; } h4 { font-size: 1.08rem; line-height: 1.28; letter-spacing: -0.015em; font-weight: 600; } /* A heading used as a row label: it keeps its level for the document outline and drops the display weight it would carry as a section heading. */ .h-inline { font-size: 0.97rem; line-height: 1.3; letter-spacing: -0.014em; font-weight: 600; margin: 0 0 3px; } .h-inline label { cursor: pointer; } p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; } .lede { font-family: var(--font-prose); font-size: clamp(1.05rem, 1rem + 0.5vw, 1.28rem); line-height: 1.6; letter-spacing: -0.003em; color: var(--fg-mute); max-width: 60ch; } /* The eyebrow is what turns a stack of blocks into a structure. */ .eyebrow { display: block; font-size: 0.72rem; font-weight: 600; line-height: 1; text-transform: uppercase; letter-spacing: 0.2em; color: var(--fg-faint); margin: 0 0 calc(var(--step) * 2); } .eyebrow--accent { color: var(--accent); } .muted { color: var(--fg-mute); } .faint { color: var(--fg-faint); } .nowrap { white-space: nowrap; } /* =================================================================== Layout =================================================================== */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: 760px; } .section { padding-block: calc(var(--step) * 6); } .section--tight { padding-block: calc(var(--step) * 4); } .section--flush { padding-top: 0; } .section + .section { border-top: 1px solid var(--line-1); } .section--sunken { background: var(--ink-0); } .section-head { margin-bottom: calc(var(--step) * 4); } .section-head p { color: var(--fg-mute); max-width: 62ch; margin-bottom: 0; } .stack > * + * { margin-top: calc(var(--step) * 2); } .stack-lg > * + * { margin-top: calc(var(--step) * 4); } .grid { display: grid; gap: calc(var(--step) * 2); } .grid--2, .grid--3, .grid--4, .grid--6 { grid-template-columns: 1fr; } .split { display: grid; gap: calc(var(--step) * 4); } .cluster { display: flex; flex-wrap: wrap; gap: calc(var(--step) * 1.5); align-items: center; } /* =================================================================== Header =================================================================== */ .masthead { position: sticky; top: 0; z-index: 60; background: rgba(11, 11, 13, 0.92); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--line-1); } .masthead__bar { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--step) * 2); min-height: 60px; } .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-width: 0; } .brand__mark { width: 30px; height: 30px; flex: none; } /* =================================================================== Brand mark The mark is a mechanism: the rim and the turret counter-rotate, and the ball orbits, decelerates and rests before going again. Rates are slow and coprime enough that the layers never lock into step, which is what keeps it reading as a mechanism rather than a spinning graphic. transform-box: view-box is what puts the origin at the centre of the 32-unit viewBox rather than at each layer's own bounding box - without it the ball would spin in place instead of orbiting. Browsers that lack it simply show the static mark, which is complete on its own. =================================================================== */ .brand-mark { display: block; } .brand-mark__rim, .brand-mark__turret, .brand-mark__ball { transform-box: view-box; transform-origin: 50% 50%; will-change: transform; } .brand-mark__rim { animation: mark-rim 26s linear infinite; } .brand-mark__turret { animation: mark-turret 17s linear infinite reverse; } .brand-mark__ball { animation: mark-ball 9s cubic-bezier(.17,.78,.28,1) infinite; } @keyframes mark-rim { to { transform: rotate(360deg); } } @keyframes mark-turret { to { transform: rotate(360deg); } } /* Three quick laps against the rim, a long decelerating settle, then rest. */ @keyframes mark-ball { 0% { transform: rotate(0deg); } 58% { transform: rotate(-1100deg); } 100% { transform: rotate(-1100deg); } } /* Hover winds the whole thing up. */ .brand:hover .brand-mark__rim { animation-duration: 7s; } .brand:hover .brand-mark__turret { animation-duration: 4.5s; } .brand:hover .brand-mark__ball { animation-duration: 3.2s; } .brand-mark__rim, .brand-mark__turret, .brand-mark__ball { transition: none; } .brand:hover .brand-mark__rim, .brand:hover .brand-mark__turret, .brand:hover .brand-mark__ball { animation-timing-function: linear; } .brand__age { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; color: var(--accent); border: 1px solid var(--accent-line); border-radius: 2px; padding: 1px 4px; line-height: 1.35; } .nav { display: none; } .nav a { display: block; padding: 7px 0; font-size: 0.9rem; font-weight: 500; color: var(--fg-mute); text-decoration: none; letter-spacing: -0.012em; border-bottom: 1px solid transparent; } .nav a:hover { color: var(--fg); } .nav a[aria-current="page"] { color: var(--fg); border-bottom-color: var(--accent); } .masthead__actions { display: flex; align-items: center; gap: var(--step); flex: none; } /* On a narrow bar there is not room for the secondary action beside the primary one and the menu button. It moves into the drawer instead, where the same links are already listed. */ .masthead__actions [data-auth-open="login"], .masthead__actions [data-logout] { display: none; } .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; background: transparent; color: var(--fg); border: 1px solid var(--line-2); border-radius: var(--r-sm); cursor: pointer; } .nav-toggle:hover { border-color: var(--line-3); } .nav-toggle svg { width: 17px; height: 17px; } .nav-toggle__close { display: none; } .nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; } .nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; } .mobile-nav { border-top: 1px solid var(--line-1); background: var(--ink-0); padding-block: calc(var(--step) * 2); } .mobile-nav[hidden] { display: none; } .mobile-nav a { display: block; padding: 11px 0; color: var(--fg-mute); text-decoration: none; font-size: 0.95rem; font-weight: 500; border-bottom: 1px solid var(--line-1); } .mobile-nav a:last-child { border-bottom: 0; } .mobile-nav a[aria-current="page"] { color: var(--accent); } .mobile-nav__auth { display: flex; gap: 8px; padding-top: calc(var(--step) * 2); margin-top: var(--step); border-top: 1px solid var(--line-1); } .mobile-nav__auth .btn { flex: 1; } @media (min-width: 560px) { .mobile-nav__auth { display: none; } } /* =================================================================== Buttons The filled variant is the only place the accent is allowed to fill an area. Depth is an inset glow, never a cast shadow. =================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; font-size: 0.9rem; font-weight: 600; letter-spacing: -0.012em; line-height: 1.2; border-radius: var(--r-md); border: 1px solid transparent; background: transparent; color: var(--fg); text-decoration: none; cursor: pointer; transition: background-color .16s ease, border-color .16s ease, color .16s ease; white-space: nowrap; } .btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; } .btn--primary { background: linear-gradient(180deg, var(--accent-warm), var(--accent)); color: #1b1406; /* Depth from a lit top edge and a seated base, both with a real offset. The previous zero-offset colour halo was decoration, not lighting. */ box-shadow: inset 0 1px 0 0 rgba(255, 246, 220, .55), inset 0 -1px 0 0 rgba(88, 64, 16, .5), 0 1px 1px 0 rgba(0, 0, 0, .35); font-weight: 650; } .btn--primary:hover { background: linear-gradient(180deg, #e6c680, var(--accent-warm)); } .btn--ghost { border-color: var(--line-2); color: var(--fg); } .btn--ghost:hover { border-color: var(--line-3); background: var(--ink-2); } .btn--quiet { color: var(--fg-mute); padding-inline: 10px; } .btn--quiet:hover { color: var(--fg); } .btn--danger { border-color: var(--danger-line); color: var(--danger); } .btn--danger:hover { background: var(--danger-deep); } .btn--sm { padding: 7px 12px; font-size: 0.82rem; } .btn--lg { padding: 13px 24px; font-size: 0.97rem; } .btn--block { width: 100%; } .btn-row { display: flex; flex-wrap: wrap; gap: var(--step); } /* =================================================================== Cards and panels =================================================================== */ .panel { background: var(--ink-2); border: 1px solid var(--line-1); border-radius: var(--r-lg); padding: calc(var(--step) * 3); } .panel--flat { background: transparent; } .panel--sunken { background: var(--ink-0); } .card { background: var(--ink-2); border: 1px solid var(--line-1); border-radius: var(--r-lg); padding: calc(var(--step) * 3); display: flex; flex-direction: column; gap: 10px; } .card h3 { margin: 0; } .card p { color: var(--fg-mute); font-size: 0.92rem; margin: 0; } .card--step { position: relative; } .card__index { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em; color: var(--accent); text-transform: uppercase; } .tag { display: inline-block; padding: 3px 7px; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--fg-mute); border: 1px solid var(--line-2); border-radius: var(--r-sm); } .tag--accent { color: var(--accent); border-color: var(--accent-line); } /* Status is carried by border and weight, not by a filled hue. */ .notice { border: 1px solid var(--line-2); border-radius: var(--r-md); padding: calc(var(--step) * 2); background: var(--ink-2); font-size: 0.92rem; } /* Status reads from a tinted field and the title's own colour rather than a coloured tab down the edge. */ .notice p:last-child { margin-bottom: 0; } .notice--accent { border-color: var(--accent-line); background: linear-gradient(var(--accent-wash), var(--accent-wash)), var(--ink-2); } .notice--danger { border-color: var(--danger-line); background: linear-gradient(rgba(217,141,130,.07), rgba(217,141,130,.07)), var(--ink-2); } .notice--ok { border-color: var(--ok-line); background: linear-gradient(rgba(147,180,141,.07), rgba(147,180,141,.07)), var(--ink-2); } .notice--accent .notice__title { color: var(--accent-warm); } .notice--danger .notice__title { color: var(--danger); } .notice--ok .notice__title { color: var(--ok); } .notice__title { font-weight: 650; letter-spacing: -0.015em; margin-bottom: 4px; display: block; } /* =================================================================== The 19+ / Ontario compliance strip. This is the one block per page that is allowed to carry the accent as a field. =================================================================== */ .compliance { border: 1px solid var(--accent-line); border-radius: var(--r-lg); background: linear-gradient(180deg, var(--accent-wash), transparent 70%), var(--ink-2); padding: calc(var(--step) * 3); } .compliance__age { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; height: 46px; padding: 0 10px; border: 1px solid var(--accent-line); border-radius: var(--r-md); font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; color: var(--accent); background: rgba(200, 162, 74, .06); flex: none; } .compliance__body { font-size: 0.95rem; } .compliance__body strong { color: var(--fg); } .compliance__help { margin-top: calc(var(--step) * 2); padding-top: calc(var(--step) * 2); border-top: 1px solid var(--line-1); font-size: 0.9rem; color: var(--fg-mute); } .compliance__phone { font-weight: 650; color: var(--fg); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } /* =================================================================== Hero =================================================================== */ .hero { position: relative; border-bottom: 1px solid var(--line-1); background: var(--ink-0); overflow: hidden; } .hero__art { position: absolute; inset: 0; background-image: url('../img/hero.svg'); background-size: cover; background-position: 72% center; opacity: .95; } .hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,11,13,.25) 0%, rgba(11,11,13,.55) 68%, var(--ink-0) 100%), linear-gradient(90deg, rgba(11,11,13,.92) 0%, rgba(11,11,13,.62) 44%, rgba(11,11,13,0) 78%); } .hero__inner { position: relative; padding-block: calc(var(--step) * 7) calc(var(--step) * 6); } .hero h1 { margin-bottom: calc(var(--step) * 2); max-width: 17ch; } .hero .lede { margin-bottom: calc(var(--step) * 3); } .hero__actions { margin-bottom: calc(var(--step) * 3); } .hero__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line-1); border: 1px solid var(--line-1); border-radius: var(--r-md); overflow: hidden; max-width: 520px; } .hero__fact { background: var(--ink-0); padding: 12px 14px; } .hero__fact dt { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--fg-faint); margin-bottom: 3px; } .hero__fact dd { margin: 0; font-size: 0.9rem; font-weight: 600; letter-spacing: -0.015em; } /* =================================================================== Game catalogue =================================================================== */ .filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: calc(var(--step) * 3); } .filters__btn { padding: 7px 13px; font-size: 0.82rem; font-weight: 500; color: var(--fg-mute); background: transparent; border: 1px solid var(--line-1); border-radius: 999px; cursor: pointer; transition: color .15s ease, border-color .15s ease; } .filters__btn:hover { color: var(--fg); border-color: var(--line-3); } .filters__btn[aria-pressed="true"] { color: var(--accent); border-color: var(--accent-line); background: var(--accent-wash); } .games { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } .game { position: relative; display: flex; flex-direction: column; background: var(--ink-2); border: 1px solid var(--line-1); border-radius: var(--r-md); overflow: hidden; text-decoration: none; transition: border-color .16s ease, background-color .16s ease; } .game:hover { border-color: var(--line-3); background: var(--ink-3); } .game__thumb { aspect-ratio: 1 / 1; display: block; position: relative; overflow: hidden; background: var(--ink-3); border-bottom: 1px solid var(--line-1); } .game__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; /* Covers are bright artwork on a dark shell; a touch of restraint keeps the grid from vibrating, and hover returns them to full strength. */ filter: saturate(.92) brightness(.94); transition: filter .18s ease, transform .35s ease; } .game:hover .game__thumb img { filter: none; transform: scale(1.03); } .game__glyph { width: 34px; height: 34px; opacity: .62; } .game__body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; } .game__title { font-size: 0.88rem; font-weight: 600; letter-spacing: -0.018em; line-height: 1.25; } .game__meta { font-size: 0.7rem; color: var(--fg-faint); display: flex; gap: 8px; flex-wrap: wrap; font-variant-numeric: tabular-nums; } .game__flag { position: absolute; top: 7px; right: 7px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; padding: 2px 6px; border-radius: 2px; color: var(--accent); background: rgba(11, 11, 13, .82); border: 1px solid var(--accent-line); } .games__empty { grid-column: 1 / -1; padding: calc(var(--step) * 5) 0; text-align: center; color: var(--fg-mute); } /* =================================================================== Forms =================================================================== */ .field { margin-bottom: calc(var(--step) * 2); } .field > label, .fieldset > legend { display: block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.02em; color: var(--fg-mute); margin-bottom: 6px; } .field__hint { font-size: 0.76rem; color: var(--fg-faint); margin-top: 5px; } .field__error { font-size: 0.78rem; color: var(--danger); margin-top: 5px; display: none; } .field.is-invalid .field__error { display: block; } .field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--danger-line); } input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="tel"], input[type="number"], input[type="search"], select, textarea { width: 100%; padding: 10px 12px; background: var(--ink-1); border: 1px solid var(--line-2); border-radius: var(--r-md); color: var(--fg); font-size: 0.92rem; letter-spacing: -0.01em; transition: border-color .15s ease; } input:hover, select:hover, textarea:hover { border-color: var(--line-3); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-wash); } input::placeholder, textarea::placeholder { color: var(--fg-faint); } textarea { min-height: 130px; resize: vertical; } select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--fg-mute) 50%), linear-gradient(135deg, var(--fg-mute) 50%, transparent 50%); background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 34px; } .checkbox { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; margin-bottom: calc(var(--step) * 1.5); } .checkbox input[type="checkbox"] { width: 17px; height: 17px; margin: 2px 0 0; accent-color: var(--accent); flex: none; } .checkbox label { font-size: 0.86rem; color: var(--fg-mute); line-height: 1.45; } .checkbox label a { color: var(--fg); } .fieldset { border: 1px solid var(--line-1); border-radius: var(--r-md); padding: calc(var(--step) * 2); margin: 0 0 calc(var(--step) * 2); } .form-status { margin-bottom: calc(var(--step) * 2); } .form-status[hidden] { display: none; } .form-grid { display: grid; grid-template-columns: 1fr; gap: 0 calc(var(--step) * 2); } /* =================================================================== Prose for the legal and editorial pages =================================================================== */ .prose { font-family: var(--font-prose); font-size: 1.02rem; line-height: 1.72; letter-spacing: -0.002em; color: #d9d6cf; max-width: 68ch; } .prose h2 { font-family: var(--font-ui); font-size: 1.42rem; line-height: 1.2; letter-spacing: -0.028em; margin: 2.2em 0 0.6em; padding-top: 1.1em; border-top: 1px solid var(--line-1); color: var(--fg); } .prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .prose h3 { font-family: var(--font-ui); font-size: 1.06rem; letter-spacing: -0.018em; margin: 1.8em 0 0.4em; color: var(--fg); } .prose p { margin: 0 0 1.15em; } .prose ul, .prose ol { margin: 0 0 1.15em; padding-left: 1.15em; } .prose li { margin-bottom: 0.45em; } .prose li::marker { color: var(--fg-faint); } .prose strong { color: var(--fg); font-weight: 600; } .prose a { color: var(--fg); text-decoration-color: var(--accent-line); } .prose dl { margin: 0 0 1.15em; } .prose dt { font-weight: 600; color: var(--fg); margin-top: 0.9em; } .prose dd { margin: 0.2em 0 0; padding-left: 1.15em; border-left: 1px solid var(--line-1); } /* Written with the parent in the selector so the section headings inside .prose cannot outrank it on specificity. */ .prose .toc { font-family: var(--font-ui); background: var(--ink-2); border: 1px solid var(--line-1); border-radius: var(--r-lg); padding: calc(var(--step) * 2.5); margin-bottom: calc(var(--step) * 4); max-width: none; } .prose .toc h2 { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--fg-faint); margin: 0 0 calc(var(--step) * 1.5); padding: 0; border: 0; } .prose .toc ol { margin: 0; padding: 0; list-style: none; columns: 1; } .prose .toc li { margin: 0 0 6px; font-size: 0.87rem; } .prose .toc a { color: var(--fg-mute); text-decoration: none; } .prose .toc a:hover { color: var(--accent); } .prose__updated { font-family: var(--font-ui); font-size: 0.76rem; color: var(--fg-faint); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: calc(var(--step) * 4); } /* =================================================================== Definition tables =================================================================== */ .dtable { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .dtable caption { text-align: left; color: var(--fg-faint); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.2em; font-weight: 600; padding-bottom: calc(var(--step) * 1.5); } .dtable th, .dtable td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line-1); vertical-align: top; } .dtable th { font-weight: 600; color: var(--fg); width: 38%; letter-spacing: -0.012em; } .dtable td { color: var(--fg-mute); } .dtable tr:last-child th, .dtable tr:last-child td { border-bottom: 0; } .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* =================================================================== Accordion (FAQ) =================================================================== */ .accordion { border-top: 1px solid var(--line-1); } .accordion__item { border-bottom: 1px solid var(--line-1); } .accordion__q { width: 100%; display: flex; align-items: flex-start; gap: 14px; justify-content: space-between; padding: 16px 0; background: none; border: 0; text-align: left; cursor: pointer; font-size: 0.98rem; font-weight: 600; letter-spacing: -0.018em; color: var(--fg); font-family: var(--font-ui); } .accordion__q:hover { color: var(--accent); } .accordion__sign { flex: none; width: 13px; height: 13px; margin-top: 5px; color: var(--fg-faint); } .accordion__q[aria-expanded="true"] .accordion__sign { transform: rotate(45deg); color: var(--accent); } .accordion__sign { transition: transform .18s ease, color .18s ease; } .accordion__a { font-family: var(--font-prose); padding: 0 0 18px; color: var(--fg-mute); font-size: 0.98rem; line-height: 1.68; max-width: 68ch; } .accordion__a[hidden] { display: none; } /* =================================================================== Steps =================================================================== */ .steps { counter-reset: step; display: grid; gap: 1px; background: var(--line-1); border: 1px solid var(--line-1); border-radius: var(--r-lg); overflow: hidden; } .step-item { counter-increment: step; background: var(--ink-2); padding: calc(var(--step) * 2.5); display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; } .step-item::before { content: counter(step, decimal-leading-zero); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; color: var(--accent); border: 1px solid var(--accent-line); border-radius: var(--r-sm); padding: 4px 7px; line-height: 1; } .step-item h3 { margin: 0 0 4px; font-size: 1rem; } .step-item p { margin: 0; color: var(--fg-mute); font-size: 0.9rem; } /* =================================================================== Payments =================================================================== */ .payments { display: flex; flex-wrap: wrap; gap: 8px; } .payment { display: inline-flex; align-items: center; gap: 9px; padding: 7px 13px 7px 7px; border: 1px solid var(--line-1); border-radius: var(--r-md); background: var(--ink-2); font-size: 0.85rem; font-weight: 500; color: var(--fg-mute); } /* Every one of these marks is drawn for a light ground. A white plate keeps each brand's own colours intact; recolouring them would not. */ /* Logos are set to a common optical height rather than fitted into a fixed box: the lockups here run from square (Interac) to 3.8:1 (PayPal), and a fixed box shrinks the wide ones to an unreadable strip. */ .payment__plate { display: inline-flex; align-items: center; justify-content: center; min-width: 42px; height: 28px; flex: none; background: #fff; border-radius: 3px; padding: 4px 6px; } .payment__plate svg, .payment__plate img { height: 17px; width: auto; max-width: 74px; display: block; } /* Regulator and safer-gambling marks */ .reg-marks { display: flex; flex-wrap: wrap; gap: 8px; } .reg-mark { display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px 9px 10px; border: 1px solid var(--line-1); border-radius: var(--r-md); background: var(--ink-2); color: var(--fg-mute); text-decoration: none; min-width: 0; } a.reg-mark:hover { border-color: var(--line-3); color: var(--fg); } .reg-mark svg { width: 26px; height: 26px; flex: none; } /* Per-asset treatment. The plate exists for marks drawn in dark ink; the bare variant is for assets that are already reversed for a dark ground, where a plate would hide them instead. */ .reg-mark__plate, .reg-mark__bare { display: inline-flex; align-items: center; justify-content: center; height: 30px; flex: none; border-radius: 3px; } .reg-mark__plate { min-width: 54px; background: #fff; padding: 4px 6px; } .reg-mark__bare { min-width: 54px; padding: 0; } /* Same rule as the payment marks: a common height, width follows the lockup. */ .reg-mark__plate img, .reg-mark__bare img { height: 19px; width: auto; max-width: 108px; display: block; } .reg-mark__text { display: flex; flex-direction: column; min-width: 0; } .reg-mark__name { font-size: 0.82rem; font-weight: 600; letter-spacing: -0.014em; color: var(--fg); } .reg-mark__note { font-size: 0.72rem; color: var(--fg-faint); letter-spacing: 0.01em; white-space: nowrap; } .reg-mark--age { border-color: var(--accent-line); } .reg-mark--age .reg-mark__name { color: var(--accent); } /* An unverified regulator mark must never pass for the real thing. */ .reg-mark--placeholder { border-style: dashed; border-color: var(--danger-line); color: var(--fg-faint); } .reg-mark--placeholder .reg-mark__name { color: var(--danger); } /* =================================================================== Footer =================================================================== */ .footer { background: var(--ink-0); border-top: 1px solid var(--line-1); padding-block: calc(var(--step) * 5) calc(var(--step) * 4); font-size: 0.87rem; } .footer__top { display: grid; gap: calc(var(--step) * 4); } .footer__brand { max-width: 34ch; } .footer__brand p { color: var(--fg-mute); font-size: 0.85rem; margin: 10px 0 0; } .footer__reg { margin-top: 12px; font-size: 0.78rem; color: var(--fg-faint); line-height: 1.55; } .footer__reg strong { color: var(--fg-mute); font-weight: 600; } .footer__links { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; } .footer__links a { color: var(--fg-mute); text-decoration: none; font-size: 0.86rem; display: block; padding: 3px 0; } .footer__links a:hover { color: var(--accent); } .footer__rg { margin-top: calc(var(--step) * 4); padding-top: calc(var(--step) * 3); border-top: 1px solid var(--line-1); display: grid; gap: calc(var(--step) * 2); } .footer__rgbadges { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .footer__badge { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 6px 10px; font-size: 0.73rem; font-weight: 600; letter-spacing: 0.05em; color: var(--fg-mute); text-transform: uppercase; text-decoration: none; } .footer__badge:hover { border-color: var(--line-3); color: var(--fg); } .footer__badge--age { color: var(--accent); border-color: var(--accent-line); } .footer__marks { margin-top: calc(var(--step) * 3); padding-top: calc(var(--step) * 3); border-top: 1px solid var(--line-1); } .footer__legal { margin-top: calc(var(--step) * 3); padding-top: calc(var(--step) * 3); border-top: 1px solid var(--line-1); color: var(--fg-faint); font-size: 0.78rem; display: grid; gap: 8px; } .footer a[href^="tel:"] { color: var(--fg); font-weight: 600; white-space: nowrap; } /* =================================================================== Age gate and cookie banner =================================================================== */ .gate { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: var(--gutter); background: rgba(6, 6, 8, .93); backdrop-filter: blur(6px); } .gate[hidden] { display: none; } .gate__panel { width: 100%; max-width: 460px; background: var(--ink-1); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: calc(var(--step) * 4); text-align: center; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .7), 0 2px 6px rgba(0, 0, 0, .4); } .gate__mark { width: 34px; height: 34px; margin: 0 auto calc(var(--step) * 2); } .gate__title { font-size: 1.18rem; font-weight: 650; letter-spacing: -0.026em; line-height: 1.3; margin: 0 0 calc(var(--step) * 2); } .gate__note { font-size: 0.84rem; color: var(--fg-mute); margin: 0 0 calc(var(--step) * 3); } .gate__actions { display: grid; gap: 10px; } .gate__denied { display: none; } .gate.is-denied .gate__ask { display: none; } .gate.is-denied .gate__denied { display: block; } .cookiebar { position: fixed; inset: auto 0 0 0; z-index: 250; background: var(--ink-0); border-top: 1px solid var(--line-2); padding: calc(var(--step) * 2) 0; } .cookiebar[hidden] { display: none; } .cookiebar__inner { display: grid; gap: calc(var(--step) * 2); } .cookiebar p { font-size: 0.85rem; color: var(--fg-mute); margin: 0; max-width: 70ch; } .cookiebar__actions { display: flex; flex-wrap: wrap; gap: 8px; } .cookieprefs { display: grid; gap: calc(var(--step) * 1.5); margin-top: calc(var(--step) * 2); } .cookieprefs[hidden] { display: none; } .cookieprefs__row { display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: calc(var(--step) * 2); border: 1px solid var(--line-1); border-radius: var(--r-md); background: var(--ink-1); } .cookieprefs__row h4 { margin: 0 0 3px; font-size: 0.88rem; } .cookieprefs__row p { font-size: 0.79rem; } /* =================================================================== Modal (sign in / register / reset) =================================================================== */ .modal { position: fixed; inset: 0; z-index: 280; display: grid; place-items: start center; padding: var(--gutter); overflow-y: auto; background: rgba(6, 6, 8, .82); backdrop-filter: blur(4px); } .modal[hidden] { display: none; } .modal__panel { width: 100%; max-width: 470px; margin-block: calc(var(--step) * 4); background: var(--ink-1); border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: calc(var(--step) * 3); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .65), 0 2px 6px rgba(0, 0, 0, .4); } .modal__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--step); margin-bottom: calc(var(--step) * 2); } .modal__head h2 { margin: 0; font-size: 1.28rem; letter-spacing: -0.028em; } .modal__close { background: none; border: 0; color: var(--fg-faint); cursor: pointer; padding: 4px; line-height: 0; border-radius: var(--r-sm); } .modal__close:hover { color: var(--fg); } .modal__close svg { width: 15px; height: 15px; } .modal__foot { margin-top: calc(var(--step) * 2); padding-top: calc(var(--step) * 2); border-top: 1px solid var(--line-1); font-size: 0.85rem; color: var(--fg-mute); } .modal__foot button { background: none; border: 0; padding: 0; cursor: pointer; color: var(--accent); font-weight: 600; font-size: inherit; } .modal__foot button:hover { text-decoration: underline; } .modal__step { display: none; } .modal__step.is-active { display: block; } body.is-locked { overflow: hidden; } /* =================================================================== Deployment warning. Deliberately loud: it must not be mistaken for a design element on a site that is not licensed to take traffic. =================================================================== */ .launch-warning { background: var(--danger-deep); border-bottom: 1px solid var(--danger-line); color: #f3d8d3; font-size: 0.8rem; padding: 9px 0; } .launch-warning strong { color: #fff; } .launch-warning__inner { display: flex; gap: 10px; align-items: flex-start; } .launch-warning svg { width: 15px; height: 15px; flex: none; margin-top: 2px; } /* =================================================================== Account area =================================================================== */ .account-grid { display: grid; gap: calc(var(--step) * 3); } .account-nav { display: flex; flex-wrap: wrap; gap: 6px; } .account-nav a { padding: 7px 12px; font-size: 0.84rem; font-weight: 500; color: var(--fg-mute); text-decoration: none; border: 1px solid var(--line-1); border-radius: 999px; } .account-nav a:hover { color: var(--fg); border-color: var(--line-3); } .account-nav a[aria-current="page"] { color: var(--accent); border-color: var(--accent-line); background: var(--accent-wash); } .statline { display: grid; gap: 1px; background: var(--line-1); border: 1px solid var(--line-1); border-radius: var(--r-lg); overflow: hidden; } .statline__cell { background: var(--ink-2); padding: 14px 16px; } .statline__k { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--fg-faint); margin-bottom: 4px; } .statline__v { font-size: 1.05rem; font-weight: 650; letter-spacing: -0.022em; } .statline__v--ok { color: var(--ok); } .statline__v--pending { color: var(--accent); } .statline__v--off { color: var(--fg-faint); } /* =================================================================== Wider viewports. Everything above is the mobile baseline. =================================================================== */ @media (min-width: 560px) { .masthead__actions [data-auth-open="login"], .masthead__actions [data-logout] { display: inline-flex; } .games { grid-template-columns: repeat(3, 1fr); } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--4 { grid-template-columns: repeat(2, 1fr); } .grid--6 { grid-template-columns: repeat(3, 1fr); } .form-grid--2 { grid-template-columns: 1fr 1fr; } .gate__actions { grid-template-columns: 1fr 1fr; } .statline { grid-template-columns: repeat(2, 1fr); } .footer__links { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 760px) { :root { --gutter: 28px; } .section { padding-block: calc(var(--step) * 9); } .section--tight { padding-block: calc(var(--step) * 6); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--6 { grid-template-columns: repeat(3, 1fr); } .games { grid-template-columns: repeat(4, 1fr); } .hero__inner { padding-block: calc(var(--step) * 12) calc(var(--step) * 9); } .hero__facts { grid-template-columns: repeat(4, 1fr); } .cookiebar__inner { grid-template-columns: 1fr auto; align-items: center; gap: calc(var(--step) * 3); } .footer__top { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } .footer__links { grid-template-columns: repeat(2, 1fr); gap: 8px 32px; } .footer__rg { grid-template-columns: 1fr auto; align-items: center; } .footer__legal { grid-template-columns: 1fr auto; align-items: baseline; } .compliance { display: grid; grid-template-columns: auto 1fr; gap: calc(var(--step) * 2.5); } .compliance__help { grid-column: 1 / -1; } .split--half { grid-template-columns: repeat(2, 1fr); } .split--wide { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } .account-grid { grid-template-columns: minmax(0, 1fr) 300px; } .prose .toc ol { columns: 2; column-gap: 28px; } } @media (min-width: 1000px) { .nav { display: flex; align-items: center; gap: 22px; } .nav-toggle, .mobile-nav { display: none; } .grid--4 { grid-template-columns: repeat(4, 1fr); } .grid--6 { grid-template-columns: repeat(6, 1fr); } .games { grid-template-columns: repeat(5, 1fr); } .statline { grid-template-columns: repeat(4, 1fr); } .steps { grid-template-columns: repeat(3, 1fr); } .footer__top { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.4fr); } .footer__links { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1240px) { .games { grid-template-columns: repeat(6, 1fr); } }