/* ═══════════════════════════════════════════════════════════════════════ LottoBC Mobile — promo landing Pacific-aurora / cinematic editorial. Near-black canvas, warm ivory type, high-contrast serif numerals, jade + gold accents, hairline rules. Footer is a 1:1 port of lottobcmobile.co (monochrome, zero shadows). ═══════════════════════════════════════════════════════════════════════ */ @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/dm-sans.woff2') format('woff2'); } /* T-05: Instrument Serif is self-hosted — the page used to pull it from fonts.googleapis.com, which sent the visitor's IP to a third party before any consent had been asked for, and forced a loose CSP. */ @font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/instrument-serif.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/instrument-serif-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/instrument-serif-italic.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url('../fonts/instrument-serif-italic-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* canvas */ --ink: #050607; --ink-2: #0a0b0d; --ink-3: #101215; --line: rgba(255,255,255,.09); --line-2: rgba(255,255,255,.16); /* type */ --text: #f1efe9; --muted: #9ba2a8; --slate: #767d88; /* accents */ --jade: #58d3a8; --jade-dim: #1d5f4d; --gold: #e0b368; --gold-dim: #5c421c; --display: 'Instrument Serif', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif; --sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --shell: 1280px; --ease: cubic-bezier(.22,1,.36,1); --ease-out: cubic-bezier(.16,1,.3,1); --fast: 180ms; --base: 380ms; --slow: 900ms; } *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } /* overflow-x on alone does not stop the document scrolling sideways — the overflow propagates to , which still reported a scrollWidth ~50px wider than the viewport between 700px and 1280px, so the page could be dragged horizontally. The decorative layers (aurora blobs, ribbons, light shafts, marquee) all deliberately run past the edge and are clipped by their own containers; this stops the propagation. `clip` rather than `hidden`, which would turn into a scroll container and break sticky. */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; overflow-x: clip; } body { font-family: var(--sans); background: var(--ink); color: var(--text); font-size: 16px; line-height: 1.5; letter-spacing: -0.16px; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; transition: color var(--fast) var(--ease); } ul, ol { list-style: none; padding: 0; } button { font: inherit; cursor: pointer; } :focus-visible { outline: 2px solid var(--jade); outline-offset: 3px; border-radius: 3px; } ::selection { background: rgba(88,211,168,.24); } .shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: clamp(20px, 4.4vw, 44px); } .icon { width: 1.05em; height: 1.05em; flex: none; } .skip-link { position: fixed; top: 8px; left: 8px; z-index: 200; background: var(--text); color: #000; padding: 10px 16px; border-radius: 4px; font-weight: 600; } .skip-link:not(:focus) { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ── Opening curtain (CSS-only, lifts with or without JS) ─────────────── */ .curtain { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; background: var(--ink); animation: curtain-lift 640ms var(--ease-out) 900ms forwards; } .curtain::after { content: ''; position: absolute; inset: 0; background: radial-gradient(60% 40% at 50% 50%, rgba(88,211,168,.14), transparent 70%); } @keyframes curtain-lift { to { transform: translateY(-101%); visibility: hidden; } } .curtain__mark { position: relative; width: 78px; color: var(--text); } .curtain__mark svg { width: 100%; height: auto; overflow: visible; } .curtain__mark .c-sq, .curtain__mark .c-ci, .curtain__mark .c-cr { stroke-dasharray: 200; stroke-dashoffset: 200; animation: mark-draw 900ms var(--ease-out) forwards; } .curtain__mark .c-ci { animation-delay: 130ms } .curtain__mark .c-cr { animation-delay: 260ms } .curtain__mark .c-dt { opacity: 0; animation: mark-dot 420ms var(--ease-out) 460ms forwards } @keyframes mark-draw { to { stroke-dashoffset: 0 } } @keyframes mark-dot { from { opacity: 0; transform: scale(.2); transform-origin: center } to { opacity: 1; transform: scale(1) } } /* D-02: the custom cursor is gone — it never hid the native one, so the page showed two cursors at once. The OS cursor is used as-is. */ /* ── Texture + progress ───────────────────────────────────────────────── */ .grain { position: fixed; inset: -50%; z-index: 100; pointer-events: none; opacity: .22; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); animation: grain-shift 7s steps(6) infinite; mix-blend-mode: overlay; } @keyframes grain-shift { 0%,100% { transform: translate(0,0) } 20% { transform: translate(-2%,1%) } 40% { transform: translate(1%,-2%) } 60% { transform: translate(-1%,-1%) } 80% { transform: translate(2%,1%) } } .scroll-progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 120; pointer-events: none; } .scroll-progress i { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--jade), var(--gold)); } /* ── Buttons ──────────────────────────────────────────────────────────── */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55em; padding: 12px 22px; border: 1px solid transparent; border-radius: 999px; font-size: 14px; font-weight: 600; letter-spacing: -0.1px; white-space: nowrap; overflow: hidden; isolation: isolate; transition: transform var(--fast) var(--ease), border-color var(--fast), color var(--fast), background var(--fast); } .btn::after { content: ''; position: absolute; inset: 0; z-index: -1; transform: translateY(101%); transition: transform 420ms var(--ease-out); } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn--lg { padding: 15px 30px; font-size: 15px; } /* min-height rather than more padding: the button is already an inline-flex centring box, so the label stays put and only the target grows. Was 40px — the last thing on the page under the 44px touch target. */ .btn--sm { padding: 9px 17px; font-size: 13px; min-height: 44px; } .btn--block { display: flex; width: 100%; } .btn--gold { background: var(--gold); color: #17120a; } .btn--gold::after { background: #f3d296; } .btn--gold:hover::after { transform: translateY(0); } .btn--jade { background: var(--jade); color: #05130e; } .btn--jade::after { background: #7ee9c3; } .btn--jade:hover::after { transform: translateY(0); } .btn--ghost { border-color: var(--line-2); color: var(--text); } .btn--ghost::after { background: rgba(255,255,255,.07); } .btn--ghost:hover { border-color: rgba(255,255,255,.4); } .btn--ghost:hover::after { transform: translateY(0); } .link-more { display: inline-flex; align-items: center; gap: .45em; font-size: 14px; font-weight: 600; color: var(--jade); border-bottom: 1px solid transparent; padding-bottom: 2px; } .link-more .icon { transition: transform var(--base) var(--ease); } .link-more:hover { border-bottom-color: currentColor; } .link-more:hover .icon { transform: translateX(5px); } /* ── Top bar ──────────────────────────────────────────────────────────── */ .topbar { position: fixed; inset: 0 0 auto 0; z-index: 90; transition: background var(--base) var(--ease), border-color var(--base), backdrop-filter var(--base); border-bottom: 1px solid transparent; } .topbar.is-stuck { background: rgba(5,6,7,.72); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-bottom-color: var(--line); } .topbar__inner { display: flex; align-items: center; gap: 28px; height: 76px; } /* The brand is the link home and was a 26px-tall target. The image keeps its size; the anchor around it gets the height. */ .topbar__brand { display: inline-flex; align-items: center; min-height: 44px; } .topbar__brand img { height: 26px; width: auto; } .topbar__nav { display: flex; gap: 26px; margin-left: auto; font-size: 14px; color: var(--muted); } /* 4px of padding left these at 29px on desktop. The underline is drawn on ::after at the text baseline, so the extra height is free. */ .topbar__nav a { position: relative; display: inline-flex; align-items: center; min-height: 44px; } .topbar__nav a::after { /* Pinned just under the text rather than to the bottom of the box: the box is now 44px tall for the tap target, and bottom:0 left the rule floating well below the word. */ content: ''; position: absolute; left: 0; bottom: calc(50% - 0.78em); height: 1px; width: 100%; background: var(--jade); transform: scaleX(0); transform-origin: 100% 50%; transition: transform 340ms var(--ease-out); } .topbar__nav a:hover { color: var(--text); } .topbar__nav a:hover::after { transform: scaleX(1); transform-origin: 0 50%; } .topbar__actions { display: flex; align-items: center; gap: 10px; } /* ── Aurora field ─────────────────────────────────────────────────────── */ .aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .aurora::after { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 0%, transparent 30%, var(--ink) 92%); } .aurora__blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; will-change: transform; } .aurora__blob--jade { width: 52vw; height: 52vw; left: -8vw; top: -18vw; background: radial-gradient(circle, rgba(45,180,140,.65), transparent 66%); animation: drift-a 22s var(--ease) infinite alternate; } .aurora__blob--cyan { width: 44vw; height: 44vw; left: 26vw; top: -24vw; background: radial-gradient(circle, rgba(60,150,190,.5), transparent 66%); animation: drift-b 27s var(--ease) infinite alternate; } .aurora__blob--indigo { width: 46vw; height: 46vw; right: -10vw; top: -14vw; background: radial-gradient(circle, rgba(96,86,190,.42), transparent 66%); animation: drift-c 31s var(--ease) infinite alternate; } .aurora__blob--gold { width: 30vw; height: 30vw; right: 8vw; top: 22vw; background: radial-gradient(circle, rgba(224,179,104,.34), transparent 64%); animation: drift-b 24s var(--ease) infinite alternate-reverse; } @keyframes drift-a { to { transform: translate3d(9vw, 6vw, 0) scale(1.16) } } @keyframes drift-b { to { transform: translate3d(-8vw, 9vw, 0) scale(1.1) } } @keyframes drift-c { to { transform: translate3d(-11vw, 4vw, 0) scale(1.2) } } /* Ribbons + light shafts */ .ribbons { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; opacity: .85; mask-image: linear-gradient(180deg, #000 30%, transparent 92%); -webkit-mask-image: linear-gradient(180deg, #000 30%, transparent 92%); } .ribbon { animation: ribbon-drift 18s ease-in-out infinite alternate; transform-origin: 50% 50%; } .ribbon--2 { animation-duration: 24s; animation-delay: -6s; } .ribbon--3 { animation-duration: 30s; animation-delay: -12s; } @keyframes ribbon-drift { from { transform: translate3d(-2%, -1.5%, 0) scaleY(1) } to { transform: translate3d(2%, 2%, 0) scaleY(1.18) } } .hero__shafts { position: absolute; inset: -10% -20% auto; height: 90%; z-index: 1; pointer-events: none; background: repeating-linear-gradient(76deg, transparent 0 90px, rgba(255,255,255,.028) 90px 118px, transparent 118px 220px); mask-image: radial-gradient(60% 70% at 62% 10%, #000, transparent 72%); -webkit-mask-image: radial-gradient(60% 70% at 62% 10%, #000, transparent 72%); animation: shafts 24s var(--ease) infinite alternate; } @keyframes shafts { to { transform: translateX(-70px) } } /* ── Hero ─────────────────────────────────────────────────────────────── */ .hero { position: relative; overflow: hidden; padding-top: clamp(130px, 16vw, 190px); padding-bottom: 64px; } .hero__grid-lines { position: absolute; inset: 0; z-index: 1; pointer-events: none; background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px), linear-gradient(0deg, var(--line) 1px, transparent 1px); background-size: 96px 96px; mask-image: radial-gradient(80% 60% at 50% 20%, #000 0%, transparent 78%); -webkit-mask-image: radial-gradient(80% 60% at 50% 20%, #000 0%, transparent 78%); opacity: .5; } .hero__inner { position: relative; z-index: 2; /* Was 1.15 / .85. The copy column ran to 644px and the board to 476px, so the board sat 330px shorter than the column beside it and hung in open space. Evening the split shortens the copy to a better measure and lets the board grow, which closes most of that gap. */ display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: clamp(24px, 5vw, 64px); align-items: center; } .eyebrow { display: inline-flex; align-items: center; gap: .6em; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line-2); border-radius: 999px; padding: 7px 15px 7px 12px; background: rgba(255,255,255,.03); backdrop-filter: blur(6px); } .eyebrow__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--jade); box-shadow: 0 0 0 0 rgba(88,211,168,.6); animation: pulse 2.6s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(88,211,168,.55) } 70% { box-shadow: 0 0 0 10px rgba(88,211,168,0) } 100% { box-shadow: 0 0 0 0 rgba(88,211,168,0) } } .hero__title { font-family: var(--display); font-weight: 400; /* Ceiling dropped from 92px: the copy column is narrower now, and at 92px the third line broke and left "Columbia." stranded on a fourth. The markup hard-codes three lines, so the type has to fit them. */ font-size: clamp(44px, 6.4vw, 86px); line-height: .98; letter-spacing: -0.02em; margin: 26px 0 0; } .hero__title .line { display: block; overflow: hidden; } .hero__title .line > span { display: block; transform: translateY(105%) rotate(2deg); animation: line-up 1100ms var(--ease-out) forwards; } .hero__title .line:nth-child(1) > span { animation-delay: 120ms } .hero__title .line:nth-child(2) > span { animation-delay: 240ms } .hero__title .line:nth-child(3) > span { animation-delay: 360ms } @keyframes line-up { to { transform: translateY(0) rotate(0) } } .hero__title em { font-style: italic; background: linear-gradient(100deg, var(--gold) 0%, #fff2d4 45%, var(--jade) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* The one element that is deliberately short of the column edge. Everything else in the copy — title, buttons, the RG panel, the trust row — now ends on the same line; before this the column had four different right edges. */ .hero__lede { max-width: 46ch; margin-top: 24px; color: var(--muted); font-size: clamp(15px, 1.25vw, 17.5px); line-height: 1.62; } .hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; } .hero__trust { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 34px; font-size: 13px; color: var(--slate); } .hero__trust li { display: flex; align-items: center; gap: .5em; } .hero__trust .icon { color: var(--jade); width: 15px; height: 15px; } /* Draw board — the field of 49, typeset rather than modelled. It replaced a 3D ring of shaded spheres: the spheres were the one thing on the page pretending to be a photograph of an object, and they read as clip art next to the flat game logotypes and the editorial type. */ .hero__board { display: grid; place-items: center; min-height: 340px; } .board { position: relative; width: min(480px, 100%); padding: 22px 24px 16px; border: 1px solid var(--line-2); border-radius: 20px; background: linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.014)), var(--ink-3); } /* the aurora bloom the drum used to carry, kept so the hero keeps its glow */ .board::before { content: ''; position: absolute; inset: -12%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(88,211,168,.15), transparent 64%); filter: blur(26px); } .board__head { display: flex; justify-content: space-between; align-items: baseline; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--slate); padding-bottom: 14px; border-bottom: 1px solid var(--line); } .board__pick { color: var(--gold); } .board__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; padding: 15px 0 12px; } .cell { aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; font-family: var(--display); font-size: 17px; line-height: 1; font-variant-numeric: tabular-nums; color: var(--slate); } /* Marked numbers sit on a flat disc — gold and jade alternating, so the six read as a drawn line and not as one solid block of colour. */ .cell.is-drawn { background: var(--mark, var(--gold)); color: #0a0c0d; } .cell.is-drawn:nth-child(2n) { --mark: var(--jade); } /* The mark recedes to a plain number and returns, staggered across the six, so the board looks like it is being drawn. Rest — and the frame the reduced-motion rule snaps to — is the marked state at both 0% and 100%. */ @keyframes draw-mark { 0%, 100% { background-color: var(--mark, var(--gold)); color: #0a0c0d; transform: scale(1); } 46% { background-color: transparent; color: var(--slate); transform: scale(.84); } } .cell.is-drawn { animation: draw-mark 7s var(--ease) infinite; animation-delay: calc(var(--k) * .55s); } .board__foot { font-size: 11px; letter-spacing: .04em; color: var(--slate); padding-top: 11px; border-top: 1px solid var(--line); } /* Jackpot bar */ .jackpot { position: relative; z-index: 2; margin-top: clamp(40px, 6vw, 76px); display: grid; grid-template-columns: 1.4fr auto auto; align-items: center; gap: clamp(20px, 3vw, 48px); padding: clamp(22px, 3vw, 34px) clamp(22px, 3.4vw, 40px); border: 1px solid var(--line-2); border-radius: 20px; background: linear-gradient(140deg, rgba(255,255,255,.055), rgba(255,255,255,.015)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); overflow: hidden; } .jackpot::before { content: ''; position: absolute; top: 0; left: -40%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.09), transparent); animation: sweep 6s var(--ease) infinite; animation-delay: 1.6s; } @keyframes sweep { 0% { left: -45% } 55%,100% { left: 130% } } /* slowly orbiting light along the capsule edge */ .jackpot::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--a, 0deg), transparent 0 62%, rgba(224,179,104,.85) 76%, rgba(88,211,168,.85) 84%, transparent 96%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: capsule-orbit 9s linear infinite; pointer-events: none; } @property --a { syntax: ''; initial-value: 0deg; inherits: false; } @keyframes capsule-orbit { to { --a: 360deg } } .jackpot__label { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--slate); } .jackpot__value { font-family: var(--display); font-size: clamp(40px, 6.4vw, 78px); line-height: 1; letter-spacing: -0.03em; margin: 10px 0 8px; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: .04em; } .jackpot__cur { color: var(--gold); font-size: .58em; } /* Rolling-digit odometer: each column slides its 0–9 strip into place */ .odometer { display: inline-flex; align-items: baseline; } .odo-col { display: inline-block; overflow: hidden; height: 1em; line-height: 1; } .odo-col i { display: block; font-style: normal; line-height: 1; transform: translateY(calc(var(--to, 0) * -1em)); transition: transform 1500ms cubic-bezier(.16,1,.3,1) var(--od, 0ms); } .odo-sep { display: inline-block; } .jackpot__note { font-size: 13px; color: var(--muted); } .jackpot__timer { border-left: 1px solid var(--line); padding-left: clamp(20px, 3vw, 40px); } .timer { display: flex; align-items: baseline; gap: 6px; margin-top: 12px; } .timer__unit { display: grid; justify-items: center; min-width: 46px; } .timer__unit b { font-family: var(--display); font-weight: 400; font-size: 34px; line-height: 1; font-variant-numeric: tabular-nums; } .timer__unit small { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--slate); margin-top: 6px; } .timer__sep { font-family: var(--display); color: var(--slate); font-size: 30px; line-height: 1; opacity: .45; } /* ── Marquee ──────────────────────────────────────────────────────────── */ .marquee { border-block: 1px solid var(--line); overflow: hidden; padding: 18px 0; display: grid; gap: 6px; background: var(--ink-2); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee__row { overflow: hidden; } .marquee__track { display: flex; width: max-content; animation: marquee 42s linear infinite; } .marquee__track--rev { animation: marquee-rev 54s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } .marquee__group { display: flex; align-items: center; gap: 30px; padding-right: 30px; } .marquee__group span { font-family: var(--display); font-size: 24px; letter-spacing: -0.01em; color: var(--muted); white-space: nowrap; } .marquee__group i { color: var(--gold); font-style: normal; font-size: 12px; opacity: .8; } /* second row: outlined ghost type running the other way */ .marquee__row--ghost .marquee__group span { color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.22); font-size: 26px; } .marquee__row--ghost .marquee__group i { color: rgba(88,211,168,.5); } @keyframes marquee { to { transform: translateX(-50%) } } @keyframes marquee-rev { from { transform: translateX(-50%) } to { transform: translateX(0) } } /* ── Sections ─────────────────────────────────────────────────────────── */ .section { position: relative; padding: clamp(64px, 8vw, 112px) 0; } .section--band { background: var(--ink-2); border-block: 1px solid var(--line); } .sec-head { position: relative; max-width: 760px; margin-bottom: clamp(36px, 5vw, 60px); } /* oversized ghost numeral behind each section head */ [data-ghost] { position: relative; isolation: isolate; } [data-ghost]::before { content: attr(data-ghost); position: absolute; right: -8%; top: 50%; transform: translateY(-54%); font-family: var(--display); font-size: clamp(120px, 17vw, 240px); line-height: .8; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.07); pointer-events: none; z-index: -1; letter-spacing: -0.04em; } .sec-head--row { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; } .sec-head__aside { font-size: 13.5px; color: var(--slate); max-width: 40ch; line-height: 1.6; } .sec-head__aside a { color: var(--muted); border-bottom: 1px solid var(--line-2); } .sec-head__aside a:hover { color: var(--text); } .sec-head__kicker { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); display: flex; align-items: center; gap: .8em; } .sec-head__kicker::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--gold-dim), transparent); } .sec-head__title { font-family: var(--display); font-weight: 400; font-size: clamp(32px, 4.6vw, 58px); line-height: 1.04; letter-spacing: -0.02em; margin-top: 16px; } .sec-head__sub { margin-top: 16px; color: var(--muted); font-size: 16px; line-height: 1.6; max-width: 58ch; } /* ── Games ────────────────────────────────────────────────────────────── */ /* Three per row on desktop: six games fill two even rows, with no orphan card. */ .games { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; } .game { --mx: 50%; --my: 50%; position: relative; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: var(--ink-3); transition: transform 480ms var(--ease), border-color var(--base); } .game::before { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; background: radial-gradient(360px circle at var(--mx) var(--my), rgba(88,211,168,.16), transparent 62%); transition: opacity var(--base) var(--ease); } .game:hover { transform: translateY(-6px); border-color: transparent; } .game:hover::before { opacity: 1; } /* gold hairline that sweeps around the card on hover */ .game::after { content: ''; position: absolute; inset: 0; z-index: 4; border-radius: inherit; padding: 1px; background: conic-gradient(from var(--a, 0deg), transparent 0 58%, rgba(224,179,104,.9) 72%, rgba(88,211,168,.9) 82%, transparent 94%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity var(--base); pointer-events: none; } .game:hover::after { opacity: 1; animation: capsule-orbit 4s linear infinite; } /* the headline draw gets the gold treatment */ .game--lead { border-color: rgba(224,179,104,.34); } .game--lead .game__jack { color: var(--gold); } /* The field is painted from the two colours the generator hands down, not from a photograph. --c1/--c2 come off the card element itself. */ .game__media { display: grid; place-items: center; position: relative; overflow: hidden; flex: 1; min-height: 220px; padding: 26px 22px 54px; background: linear-gradient(148deg, var(--c1, #15181c), var(--c2, #0a0b0d)); } /* Above ::after — that overlay exists to fade the field into the card body, and it was washing the logotype out to grey. */ .glogo { position: relative; z-index: 3; width: min(100%, 230px); height: auto; transition: transform 700ms var(--ease); } .game:hover .glogo { transform: scale(1.05); } /* ── Logotype motion ────────────────────────────────────────────────────── Each mark loops on one idea drawn from the game itself: the discs behind Lotto Max breathe, the dot in the six of 6/49 pulses like a drawn ball, the Keno balls bob, the two halves of 50/50 trade places. Transform and opacity only, so it composites on the GPU and six cards animating at once cost nothing measurable. Every keyframe both starts and ends at rest. That matters: the global prefers-reduced-motion block below collapses animations to a 0.001ms single iteration, which snaps an element to its 100% frame — so 100% has to be the state the logo is supposed to sit in. */ .glogo [class^="gl-"] { transform-box: fill-box; transform-origin: center; } @keyframes gl-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } @keyframes gl-settle { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.022); } } @keyframes gl-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } } @keyframes gl-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @keyframes gl-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.24); opacity: .8; } } @keyframes gl-sweep { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.94); } } @keyframes gl-rise { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.07); } } /* The halves hand over on opacity, not on offset: moving them vertically broke the wordmark's baseline and read as a typesetting fault rather than motion. */ @keyframes gl-trade { 0%, 100% { opacity: 1; } 50% { opacity: .58; } } .gl-disc { animation: gl-breathe 6s var(--ease) infinite; } /* Negative delays start the run mid-cycle, so the three never pulse in unison. */ .gl-disc:nth-of-type(2) { animation-delay: -2s; } .gl-disc:nth-of-type(3) { animation-delay: -4s; } .gl-float { animation: gl-float 5s var(--ease) infinite; } .gl-swoosh { animation: gl-sweep 5s var(--ease) infinite; } .gl-badge { animation: gl-settle 7s var(--ease) infinite; } .gl-dot { animation: gl-pulse 2.8s var(--ease) infinite; } .gl-ball { animation: gl-bob 3.2s var(--ease) infinite; } .gl-ball:nth-of-type(2) { animation-delay: -1.07s; } .gl-ball:nth-of-type(3) { animation-delay: -2.13s; } .gl-half-a { animation: gl-trade 4.4s var(--ease) infinite; } .gl-half-b { animation: gl-trade 4.4s var(--ease) infinite; animation-delay: -2.2s; } .gl-block { animation: gl-rise 4.6s var(--ease) infinite; } .game__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,6,7,.1) 0%, rgba(5,6,7,.75) 72%, var(--ink-3) 100%); } /* diagonal shine that crosses the art on hover */ .game__media::before { content: ''; position: absolute; top: -60%; left: -80%; width: 55%; height: 220%; z-index: 2; background: linear-gradient(90deg, transparent, rgba(255,255,255,.16), transparent); transform: rotate(18deg); transition: left 900ms var(--ease-out); } .game:hover .game__media::before { left: 140%; } .game__flag { position: absolute; top: 14px; left: 14px; z-index: 4; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: #17120a; background: var(--gold); padding: 5px 10px; border-radius: 999px; } .game__body { position: relative; z-index: 2; padding: 20px 22px 22px; margin-top: -46px; display: grid; gap: 6px; } .game__name { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .game__jack { font-family: var(--display); font-size: clamp(26px, 2.2vw, 32px); line-height: 1.05; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .game__meta { font-size: 13px; color: var(--muted); } .game__sched { font-size: 12px; color: var(--slate); padding-top: 10px; margin-top: 6px; border-top: 1px solid var(--line); } /* ── Quick Pick ───────────────────────────────────────────────────────── */ .qp__slip { perspective: 1200px; } .slip { position: relative; border-radius: 18px; padding: 30px 30px 22px; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 300ms var(--ease); background: linear-gradient(160deg, rgba(255,255,255,.07), rgba(255,255,255,.02)), var(--ink-3); border: 1px solid var(--line-2); box-shadow: 0 40px 90px -50px rgba(0,0,0,.9); } .slip::before { content: ''; position: absolute; inset: 0; border-radius: 18px; pointer-events: none; background: radial-gradient(120% 80% at 20% 0%, rgba(224,179,104,.12), transparent 60%); } .slip__head { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 18px; border-bottom: 1px dashed var(--line-2); } .slip__brand { font-family: var(--display); font-size: 26px; } .slip__id { font-size: 10px; letter-spacing: .2em; color: var(--gold); } .slip__balls { display: flex; flex-wrap: nowrap; gap: 8px; padding: 24px 0; justify-content: center; } .slip .btn--block { margin-bottom: 4px; } .pball { flex: none; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-size: 24px; color: var(--muted); background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.16), transparent 56%), #15181b; border: 1px solid var(--line-2); font-variant-numeric: tabular-nums; transition: color var(--fast); } .pball.is-set { color: #05130e; border-color: transparent; background: radial-gradient(circle at 34% 28%, rgba(255,255,255,.75), transparent 58%), var(--jade); animation: ball-pop 620ms var(--ease-out) backwards; animation-delay: var(--pd, 0ms); } @keyframes ball-pop { 0% { transform: translateY(-26px) scale(.4) rotate(-25deg); opacity: 0 } 55% { transform: translateY(4px) scale(1.12) rotate(6deg); opacity: 1 } 100% { transform: translateY(0) scale(1) rotate(0) } } .slip__foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--slate); padding-top: 18px; border-top: 1px dashed var(--line-2); } /* ── Final CTA ────────────────────────────────────────────────────────── */ .cta { position: relative; padding: clamp(72px, 9vw, 118px) 0; overflow: hidden; border-top: 1px solid var(--line); } .aurora--cta .aurora__blob--jade { width: 66vw; height: 46vw; left: -12vw; top: 6%; opacity: .5; } .aurora--cta .aurora__blob--gold { width: 52vw; height: 38vw; right: -8vw; top: -10%; opacity: .42; } .aurora--cta::after { background: radial-gradient(125% 105% at 50% 50%, transparent 38%, var(--ink) 96%); } .cta__ghost { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--display); font-size: clamp(120px, 21vw, 320px); line-height: .8; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.08); z-index: 1; pointer-events: none; letter-spacing: -0.03em; animation: ghost-slide 26s var(--ease) infinite alternate; } @keyframes ghost-slide { from { transform: translate(-53%, -50%) } to { transform: translate(-47%, -50%) } } .cta__grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 72px); align-items: center; } .cta__title { font-family: var(--display); font-weight: 400; font-size: clamp(44px, 6.4vw, 86px); line-height: .96; letter-spacing: -0.03em; margin-top: 18px; } .cta__sub { margin-top: 20px; max-width: 48ch; color: var(--muted); font-size: 16.5px; line-height: 1.6; } .cta__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .cta__fine { margin-top: 24px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--slate); line-height: 1.8; } .cta__fine a { color: var(--muted); border-bottom: 1px solid var(--line-2); } .cta__fine a:hover { color: var(--text); } /* ═══ Footer — port of lottobcmobile.co ═══════════════════════════════ */ .site-footer { --color-border: #27272a; --color-text: #ffffff; --color-text-muted: #a7a7a7; --color-slate: #767d88; background: #000; border-top: 1px solid var(--color-border); padding-top: 64px; font-family: var(--sans); color: var(--color-text); position: relative; z-index: 2; } .site-footer__inner { display: grid; grid-template-columns: 1.2fr 2fr; gap: 48px; padding-bottom: 48px; } .site-footer__brand-link { display: inline-block; } .site-footer__logo { height: 28px; width: auto; margin-bottom: 16px; } .site-footer__tagline { color: var(--color-text-muted); max-width: 42ch; font-size: 14px; line-height: 1.5; } .site-footer__address { margin-top: 16px; font-style: normal; color: var(--color-text-muted); font-size: 13px; line-height: 1.6; } .site-footer__rg { color: var(--color-text-muted); margin-top: 18px; display: flex; align-items: center; gap: .5em; flex-wrap: wrap; font-size: 13px; } .site-footer__rg .icon { color: var(--color-slate); width: 1em; height: 1em; } .site-footer__rg strong { font-weight: 500; } /* L-02 / L-03: operator support channels, real hours in Pacific Time. */ .site-footer__support { color: var(--color-text-muted); margin-top: 10px; display: flex; align-items: center; gap: .4em; flex-wrap: wrap; font-size: 12.5px; line-height: 1.7; } .site-footer__support .icon { color: var(--color-slate); width: 1em; height: 1em; } .site-footer__support a { color: var(--jade); text-decoration: underline; } /* G-08: the strip shows brand marks; the full list lives on /payments/. */ /* Was 173x17 — a standalone link, not one sitting in a line of prose, so it needs a real target. Inline-flex with vertical padding gets it to 44px without changing where the text sits. */ .payments__more { display: inline-flex; align-items: center; min-height: 44px; padding: 4px 0; font-size: 11px; color: var(--gold); text-decoration: underline; } .site-footer__rg a { color: var(--color-text); font-weight: 500; border-bottom: 1px solid var(--color-border); } .site-footer__rg a:hover { border-bottom-color: var(--color-text); } .site-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 28px; } .site-footer__col-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.35px; color: var(--color-slate); margin-bottom: 14px; font-weight: 450; } .site-footer__col ul { display: grid; gap: 9px; } .site-footer__col a { color: #999999; font-size: 14px; } .site-footer__col a:hover { color: var(--color-text); } .site-footer__compliance { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding: 32px 0; border-top: 1px solid var(--color-border); } .badges { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; } .badge { display: inline-flex; align-items: center; justify-content: center; background: #fff; border-radius: 4px; padding: 8px 12px; min-height: 44px; transition: opacity var(--fast); } .badge:hover { opacity: .82; } .badge__img { height: 28px; width: auto; max-width: 150px; object-fit: contain; } .badge__img[src*="19plus"] { height: 40px; } /* The 19+ mark is a circle, not a wordmark: an even 2px on all four sides makes the chip square so the circle sits dead centre instead of hugging the top. */ .badge--19plus { padding: 2px; } /* GameSense ships as a white logo — give just its chip a dark backing so it reads */ .badge--gamesense { background: #0e0e0e; border: 1px solid var(--color-border); } .payments { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .payments__title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.35px; color: var(--color-slate); } .payments__list { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .payment { height: 30px; width: auto; background: #fff; border-radius: 4px; padding: 3px 5px; } .site-footer__bottom { border-top: 1px solid var(--color-border); padding: 24px 0; } /* Was a flex row with space-between: the legal notice, the licence, the authorization link, the disclaimer and the copyright were five flex items fighting over one row, so they wrapped into a mosaic and the authorization link was stranded in the middle of it. Placed on an explicit grid instead — the statutory block holds the wide column, the licence and the authorization it rests on stack in the narrow one, and the disclaimer and the closing row run the full width. */ .site-footer__bottom .shell { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); column-gap: clamp(28px, 5vw, 72px); align-items: start; } .site-footer__legal { grid-column: 1; grid-row: 1 / span 2; margin-bottom: 0; } .site-footer__licence { grid-column: 2; grid-row: 1; } .site-footer__legal-doc { grid-column: 2; grid-row: 2; } .site-footer__disclaimer { grid-column: 1 / -1; grid-row: 3; color: var(--color-slate); font-size: 12px; max-width: 96ch; line-height: 1.5; margin-top: 24px; } .site-footer__end { grid-column: 1 / -1; grid-row: 4; display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; align-items: center; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); } .site-footer__copyright { color: var(--color-slate); font-size: 12px; } /* ═══ Reveal system ═══════════════════════════════════════════════════ */ .reveal { opacity: 0; transition: opacity 900ms var(--ease-out) var(--d, 0ms), transform 900ms var(--ease-out) var(--d, 0ms); will-change: opacity, transform; } .reveal[data-reveal="up"] { transform: translateY(28px); } .reveal[data-reveal="scale"] { transform: scale(.94) translateY(20px); } .reveal.is-in { opacity: 1; transform: none; } /* ═══ Responsive ══════════════════════════════════════════════════════ */ @media (max-width: 1080px) { .hero__inner { grid-template-columns: 1fr; } .hero__board { order: -1; min-height: 0; margin-bottom: 8px; } .board { width: min(360px, 84vw); } .cell { font-size: 15px; } .jackpot { grid-template-columns: 1fr 1fr; } .jackpot__cta { grid-column: 1 / -1; justify-self: start; } .games { grid-template-columns: repeat(2, 1fr); } .cta__grid { grid-template-columns: 1fr; } .qp__slip { max-width: 460px; } } @media (max-width: 860px) { .topbar__nav { display: none; } .topbar__actions { margin-left: auto; } .hide-sm { display: none; } .site-footer__inner { grid-template-columns: 1fr; gap: 36px; } .site-footer__compliance { flex-direction: column; align-items: flex-start; } /* One column: the explicit placements above have to be released, or the items keep their row numbers and leave gaps. */ .site-footer__bottom .shell { grid-template-columns: 1fr; } .site-footer__legal, .site-footer__licence, .site-footer__legal-doc, .site-footer__disclaimer, .site-footer__end { grid-column: 1; grid-row: auto; } } @media (max-width: 640px) { .jackpot { grid-template-columns: 1fr; } .jackpot__timer { border-left: 0; border-top: 1px solid var(--line); padding-left: 0; padding-top: 20px; } .games { grid-template-columns: 1fr; } .slip { padding: 24px 20px 18px; } .pball { width: 38px; height: 38px; font-size: 17px; } [data-ghost]::before { font-size: 110px; right: -2%; opacity: .8; } .marquee__row--ghost, .cta__ghost { display: none; } .cta__fine { text-transform: none; letter-spacing: 0; font-size: 12.5px; } .timer__unit { min-width: 40px; } .timer__unit b { font-size: 28px; } .marquee__group span { font-size: 19px; } } /* ═══ Reduced motion ══════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } .reveal { opacity: 1 !important; transform: none !important; } .hero__title .line > span { transform: none; } .grain { display: none; } } /* ═══════════════════════════════════════════════════════════════════════ Audit fixes — L-05, L-08, L-10…L-12, A-06, T-03, T-09, D-02 ═══════════════════════════════════════════════════════════════════════ */ /* T-03: the promo had no mobile navigation. Full-screen overlay that scrolls. */ .nav-toggle { display: none; background: transparent; border: 1px solid var(--line-2); border-radius: 4px; color: var(--text); padding: 10px; line-height: 0; } .nav-toggle .icon { width: 22px; height: 22px; } /* The button is the only affordance for closing the panel — Escape needs a keyboard and tapping a link navigates away — so it says which it does. */ .nav-toggle__x { display: none; } .nav-toggle[aria-expanded="true"] .nav-toggle__bars { display: none; } .nav-toggle[aria-expanded="true"] .nav-toggle__x { display: block; } .topbar__nav-cta { color: var(--gold); font-weight: 600; } /* T-09: one visible focus ring everywhere. */ :focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; } /* A-06: responsible-gambling block above the first screen. */ .rg-strip { margin: 28px 0 8px; padding: 18px 20px; border: 1px solid var(--line-2); border-left: 3px solid var(--jade); border-radius: 6px; background: rgba(255,255,255,.02); font-size: 13.5px; line-height: 1.65; color: var(--muted); } .rg-strip p + p { margin-top: 8px; } .rg-strip strong { color: var(--text); } .rg-strip a { color: var(--jade); text-decoration: underline; } /* A-06: the game parameters live on the landing page itself. They used to be a four-column table — correct, and six rows of grey 14px on a page about a lottery. Same facts as cards, each carrying its game's colour. */ .specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 28px 0 34px; } .spec { position: relative; overflow: hidden; isolation: isolate; border: 1px solid var(--line); border-radius: 18px; padding: 22px 22px 24px; background: var(--ink-3); transition: transform 420ms var(--ease), border-color var(--base); } /* The game's colour arrives as a bloom in the top corner, not as a flat fill: six saturated panels side by side would shout, and this section is where a reader goes to check a number. */ .spec::before { content: ''; position: absolute; z-index: -1; inset: -55% -35% auto -10%; height: 130%; background: radial-gradient(closest-side, var(--c1, #2b6cb0), transparent 70%); opacity: .4; transition: opacity var(--base); } /* A lit edge along the top, so each card states its colour crisply instead of relying on the bloom alone — the bloom reads as atmosphere, this reads as identity. */ .spec::after { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px; background: linear-gradient(90deg, var(--c1), var(--c2) 55%, transparent); } .spec:hover { transform: translateY(-4px); border-color: var(--line-2); } .spec:hover::before { opacity: .6; } .spec__head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; } .spec__name { font-family: var(--display); font-size: 22px; font-weight: 400; line-height: 1.15; display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .spec__flag { font-family: var(--font); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: #17120a; background: var(--gold); padding: 3px 8px; border-radius: 999px; } /* The price is what a reader is actually looking for, so it is the figure. */ .spec__price { font-family: var(--display); font-size: 32px; line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums; white-space: nowrap; } .spec__format { display: inline-block; margin-top: 15px; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255,255,255,.035); font-size: 12px; letter-spacing: .03em; color: var(--text); } .spec__note { margin-top: 14px; font-size: 13.5px; line-height: 1.66; color: var(--muted); } /* These have to live here, after the base rule. The responsive block for the rest of the page sits earlier in the file, so overrides written there lost to this declaration on source order and .specs stayed three columns all the way down to 320px, where each card was about 90px wide. */ @media (max-width: 1080px) { .specs { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .specs { grid-template-columns: 1fr; } } .terms-list { display: grid; gap: 10px; color: var(--muted); font-size: 14px; line-height: 1.65; max-width: 82ch; } .terms-list li { padding-left: 18px; position: relative; } .terms-list li::before { content: '—'; position: absolute; left: 0; color: var(--gold); } .terms-list a { color: var(--jade); text-decoration: underline; } /* A-06: FAQ on the landing page. */ .shell--narrow { max-width: 880px; } .faq { display: grid; gap: 2px; } .faq__item { border-bottom: 1px solid var(--line); } .faq__item summary { cursor: pointer; padding: 18px 0; font-size: 17px; color: var(--text); list-style: none; display: flex; justify-content: space-between; gap: 16px; } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary::after { content: '+'; color: var(--gold); font-size: 22px; line-height: 1; } .faq__item[open] summary::after { content: '–'; } .faq__a { padding: 0 0 20px; color: var(--muted); font-size: 14.5px; line-height: 1.7; max-width: 72ch; } .faq__a a { color: var(--jade); text-decoration: underline; } /* L-05: the licensee / authority / data-controller block. */ /* No max-width on either: the grid column above is what bounds the measure now. */ .site-footer__legal { color: var(--muted); font-size: 12px; line-height: 1.7; margin-bottom: 12px; } /* A-02: the licence line — statutory authorisation in place of a licence number. */ .site-footer__licence { color: var(--muted); font-size: 12px; line-height: 1.6; margin-bottom: 12px; } .site-footer__licence strong { color: var(--text); } /* ── Authorization badge ────────────────────────────────────────────────── The shield used to render on its own line above the label: the reset makes every svg display:block, and the link was plain inline text. */ .site-footer__legal-doc { margin: 18px 0 0; } .doc-badge { display: inline-flex; align-items: center; gap: 12px; padding: 11px 13px; border: 1px solid var(--line-2); border-radius: 12px; background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.012)); transition: border-color var(--base), background var(--base); } .doc-badge:hover { border-color: rgba(224,179,104,.45); background: rgba(224,179,104,.06); } .doc-badge__seal { width: 24px; height: 24px; flex: none; color: var(--gold); } .doc-badge__text { display: grid; gap: 2px; } .doc-badge__label { font-size: 13px; color: var(--text); line-height: 1.35; } .doc-badge__meta { font-size: 11px; color: var(--slate); line-height: 1.35; } .doc-badge__tag { flex: none; margin-left: 2px; padding: 4px 8px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 10px; letter-spacing: .1em; color: var(--gold); } .site-footer__cookie-link { margin: 14px 0 0; } .link-button { background: none; border: 0; padding: 0; color: var(--gold); font-size: 12px; text-decoration: underline; cursor: pointer; } .payment--placeholder { display: inline-flex; align-items: center; padding: 6px 10px; border: 1px solid var(--line); border-radius: 4px; color: var(--muted); font-size: 11px; white-space: nowrap; } /* L-08: the promo's own 19+ gate. */ .age-gate { position: fixed; inset: 0; z-index: 300; background: rgba(3,4,5,.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: grid; place-items: center; padding: 20px; } .age-gate[hidden] { display: none; } .age-gate__panel { background: var(--ink-3); border: 1px solid var(--line-2); border-radius: 8px; padding: clamp(28px, 5vw, 48px); text-align: center; max-width: 460px; /* Same guard as the consent banner. It clears a 568px-tall screen today, but a phone held sideways is ~360px tall and this panel is 350px — one extra line of copy and the buttons would be off-screen with no way to scroll. */ max-height: calc(100dvh - 40px); overflow-y: auto; overscroll-behavior: contain; } .age-gate__title { font-family: var(--display); font-size: 30px; margin-bottom: 12px; } .age-gate__text { color: var(--muted); font-size: 14px; line-height: 1.65; margin-bottom: 24px; } .age-gate__actions { display: grid; gap: 10px; } /* L-08 / L-11 / L-12: the promo's own CMP. */ .cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 200; background: var(--ink-3); border: 1px solid var(--line-2); border-radius: 8px; max-width: 760px; margin-inline: auto; /* It is pinned to the bottom and grows upward. With four consent categories and three buttons it stands 558px tall, which on a 568px screen put its top edge at -6px — the heading and the first line of the notice were off the top and unreachable, because nothing here scrolled. Consent has to be fully readable before it is given. */ max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; } .cookie-banner[hidden] { display: none; } .cookie-banner__inner { padding: 22px 24px; display: grid; gap: 14px; } .cookie-banner__title { font-family: var(--display); font-size: 22px; } .cookie-banner__text p { color: var(--muted); font-size: 13px; line-height: 1.6; } .cookie-banner__text a { color: var(--jade); text-decoration: underline; } .cookie-banner__options { display: grid; gap: 12px; padding-top: 12px; border-top: 1px solid var(--line); } .cookie-opt { display: inline-flex; gap: .5em; align-items: center; color: var(--muted); font-size: 13px; } .cookie-opt input { accent-color: var(--gold); } .cookie-banner__actions { display: flex; gap: 10px; flex-wrap: wrap; } .btn--consent { background: transparent; border: 1px solid var(--gold); color: var(--gold); font-weight: 600; flex: 1 1 168px; justify-content: center; min-width: 168px; } .btn--consent:hover { background: rgba(224,179,104,.12); color: var(--gold); } @media (max-width: 860px) { .nav-toggle { display: inline-flex; } /* The panel below is fixed at inset:0 with z-index 190 and covered its own close button, leaving Escape (no keyboard on a phone) or tapping a link (navigates away) as the only exits. The panel is a *child* of .topbar, so raising .topbar lifts both and changes nothing — the button has to be raised inside that same stacking context. The panel's 88px top padding already keeps its links clear of the bar. */ .topbar__actions { position: relative; z-index: 196; } /* T-03: full-screen, self-scrolling panel — nothing can be clipped. */ .topbar__nav { display: flex; position: fixed; inset: 0; width: 100%; height: 100vh; height: 100dvh; max-height: 100dvh; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: 88px 24px calc(32px + env(safe-area-inset-bottom)); background: var(--ink-2); z-index: 190; transform: translateX(100%); transition: transform 320ms var(--ease); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; font-size: 18px; } .topbar__nav.is-open { transform: translateX(0); } .topbar__nav a { padding: 16px 0; border-bottom: 1px solid var(--line); } .topbar__nav a::after { display: none; } }