@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,600;12..96,700;12..96,800&family=JetBrains+Mono:wght@400;500;700;800&display=swap');
/* NOTE: the shared games/modal mapping layer (_shared/games.css) is loaded as
its OWN right after this file in layouts/shopfront.blade.php, so its
.t-* rules cascade last and win over Tailwind utilities. This file only
supplies the --gt-* / --pk-* token VALUES at :root (below). */
/* ============================================================
ACCUMULATE - Brutalist one-page jackpot theme
Design ref: docs/accumulate-raffle-spec.md + the Claude Design "Accumulate" mock.
SAFETY MODEL (do not "simplify" away):
- All design tokens are prefixed --acc-* and scoped to the block wrapper
(.cms-block--system_raffle_detail) plus .acc-chrome/.acc-scope so they
never leak to :root or override the platform's --accent/--card/--primary.
- All component classes are prefixed .acc-* so they cannot collide with
the platform's .btn/.card/etc.
- The real functional widgets that render INSIDE the block (Livewire
add-to-cart, transparency verification, unrevealed-tickets banner) use
platform classes and read platform tokens — remapped below so they
adopt the brutalist palette without touching their logic.
============================================================ */
.cms-block--system_raffle_detail,
.acc-chrome,
.acc-scope {
--acc-paper: #F2EFE6;
--acc-card: #FFFDF7;
--acc-ink: #0E0E0E;
--acc-ink-soft: #45413A;
--acc-ink-faint: #6B6558;
--acc-hair: #0E0E0E;
--acc-hair-soft: #C0BAAA;
--acc-lime: #C8FF4D;
--acc-lime-ink: #26310A;
--acc-green: #12B76A;
--acc-warn: #B45309;
--acc-danger: #B42318;
--acc-font-display: 'Bricolage Grotesque', system-ui, -apple-system, sans-serif;
--acc-font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
--acc-radius: 0px;
/* ----------------------------------------------------------------
PLATFORM TOKEN MAP — make the core widgets (add-to-cart, transparency,
unrevealed-tickets banner) adopt the brutalist palette. The widgets read
these semantic tokens; remapping them here (scoped to this block) tints
the machinery to the theme without touching its logic. Never leaks to
views outside the themed scope.
---------------------------------------------------------------- */
--background: #F2EFE6;
--foreground: #0E0E0E;
--card: #FFFDF7;
--card-foreground: #0E0E0E;
--popover: #FFFDF7;
--popover-foreground: #0E0E0E;
--primary: #0E0E0E;
--primary-foreground: #F2EFE6;
--secondary: #EBE7DA;
--secondary-foreground: #0E0E0E;
--muted: #EBE7DA;
--muted-foreground: #6B6558;
--accent: #C8FF4D;
--accent-foreground: #0E0E0E;
--border: #0E0E0E;
--input: #C0BAAA;
--ring: #0E0E0E;
--radius: 0px;
--radius-sm: 0px;
--radius-md: 0px;
--radius-lg: 0px;
--radius-xl: 0px;
--radius-2xl: 0px;
--button-radius: 0px;
--card-radius: 0px;
--input-radius: 0px;
--font-family-primary: 'Bricolage Grotesque', system-ui, sans-serif;
--font-family-heading: 'Bricolage Grotesque', system-ui, sans-serif;
--font-sans: 'Bricolage Grotesque', system-ui, sans-serif;
--font-heading: 'Bricolage Grotesque', system-ui, sans-serif;
/* Brutalist headings are 800, not the platform default 700. The base
`.shopfront h1..h6 { font-weight: var(--font-weight-bold) }` rules outrank a
single .acc-h* class, so they were pulling every heading back to 700 - remap
the token in-scope so the platform rule itself resolves to 800. */
--font-weight-bold: 800;
background: var(--acc-paper);
color: var(--acc-ink);
font-family: var(--acc-font-display);
font-size: 16px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.cms-block--system_raffle_detail *, .cms-block--system_raffle_detail *::before, .cms-block--system_raffle_detail *::after,
.acc-chrome *, .acc-chrome *::before, .acc-chrome *::after { box-sizing: border-box; }
.cms-block--system_raffle_detail img, .acc-chrome img { display: block; max-width: 100%; }
:where(.cms-block--system_raffle_detail, .acc-chrome, .acc-scope) p { margin-block: 0; }
.cms-block--system_raffle_detail ::selection, .acc-chrome ::selection { background: var(--acc-lime); color: var(--acc-ink); }
/* — LAYOUT HELPERS — */
.acc-maxw { max-width: 1180px; margin-inline: auto; }
.acc-section { padding-top: 5rem; }
.acc-tabular { font-variant-numeric: tabular-nums; }
/* — HEADER — */
.acc-header { border-bottom: 2px solid var(--acc-ink); background: var(--acc-paper); }
/* flex-wrap on both rows: brand + nav + the utility cluster (favourites / cart /
account) + CTA don't fit one row at narrow widths - wrapping beats the
overflow/clipping that a rigid single row produces. */
.acc-header-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 0; flex-wrap: wrap; row-gap: .75rem; }
.acc-brand { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--acc-ink); }
.acc-brand-mark { height: 1.5rem; width: auto; display: block; flex: none; }
.acc-brand-name { font-weight: 800; font-size: 1.2rem; letter-spacing: -.03em; text-transform: uppercase; }
.acc-nav { display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; row-gap: .6rem; }
.acc-navlink { font-family: var(--acc-font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--acc-ink); text-decoration: none; }
.acc-navlink:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Utility cluster — favourites / cart / account. Reuses the shared Livewire
widgets (cart-count, profile-dropdown), whose trigger is .header-sidebar-icon-btn
and whose badge is .cart-count-badge; restyle both brutalist here. */
.acc-actions { display: inline-flex; align-items: center; gap: .55rem; }
.acc-icon-btn,
.acc-header .header-sidebar-icon-btn {
position: relative; display: inline-flex; align-items: center; justify-content: center;
width: 2.4rem; height: 2.4rem; border: 2px solid var(--acc-ink); background: var(--acc-paper);
color: var(--acc-ink); text-decoration: none; transition: background .12s ease, color .12s ease;
}
.acc-icon-btn:hover,
.acc-header .header-sidebar-icon-btn:hover,
.acc-header .header-sidebar-icon-btn.active { background: var(--acc-ink); color: var(--acc-lime); }
/* Live cart count → brutalist lime chip on the button's ink corner. */
.acc-header .cart-count-badge {
position: absolute; top: -.55rem; right: -.55rem; min-width: 1.15rem; height: 1.15rem;
padding: 0 .28rem; display: inline-flex; align-items: center; justify-content: center;
background: var(--acc-lime); color: var(--acc-ink); border: 2px solid var(--acc-ink); border-radius: 0;
font-family: var(--acc-font-mono); font-size: .66rem; font-weight: 800; line-height: 1;
}
/* Header guest cluster. NOT .acc-auth: that name is the auth-PAGE scope class
(theme_scope_class('auth') -> "acc-scope acc-auth"), and an inline-flex rule on
it collapses the whole /login + /register layout. Namespaced to the header. */
.acc-header-auth { display: inline-flex; align-items: center; gap: .55rem; }
/* Sign-up button matches the 2.4rem icon-box height so the guest cluster lines up
(drop the tall vertical padding of the base .acc-btn; keep it centered). */
.acc-header-auth-btn { font-size: .72rem; height: 2.4rem; padding-block: 0; }
@media (max-width: 480px) {
.acc-nav { gap: .9rem; width: 100%; justify-content: flex-end; }
/* Compact the header CTA on narrow screens so brand + three nav items fit
within the row instead of the button overflowing off the right edge
(which forced a horizontal scroll on the whole page). */
.acc-header .acc-btn { padding: .7em 1.1em; font-size: .72rem; }
}
/* The layout renders a floating "open sidebar drawer" burger
(shopfront/partials/mobile-nav-controls.blade.php) for any theme that
ships its own header.blade.php - winwink/hartwell wire it to their own
sidebar drawer, but Accumulate's one-page anchor-link nav has no drawer to
open. Left alone it's dead on click and floats (position: absolute; top:
1rem; left: 1rem) directly over the brand mark on mobile - not in the
mock either way. Hidden here rather than in the shared layout so no other
theme is affected. */
body:has(.acc-chrome) .mobile-menu-toggle,
body:has(.acc-chrome) .mobile-nav-backdrop { display: none !important; }
/* — FOOTER — */
.acc-foot { border-top: 2px solid var(--acc-ink); background: var(--acc-paper); }
.acc-foot-row { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; justify-content: space-between; }
.acc-foot-links { display: flex; flex-wrap: wrap; gap: 1.25rem; font-family: var(--acc-font-mono); font-size: .72rem; letter-spacing: .06em; }
.acc-foot-warn { max-width: 24rem; font-family: var(--acc-font-mono); font-size: .68rem; letter-spacing: .04em; line-height: 1.6; color: var(--acc-ink-soft); }
.acc-link-u { color: var(--acc-ink); text-decoration: underline; text-underline-offset: 3px; }
.acc-link-u:hover { background: var(--acc-lime); }
/* Regulatory strip: 18+ notice, payment marks, trust badges */
.acc-foot-compliance {
display: flex; flex-wrap: wrap; gap: 1.5rem 2rem; align-items: flex-start; justify-content: space-between;
margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1.5px solid var(--acc-hair-soft);
}
.acc-foot-notice { display: flex; align-items: flex-start; gap: .85rem; flex: 1 1 24rem; }
.acc-age {
flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
width: 2.1rem; height: 2.1rem; border: 2px solid var(--acc-ink); background: var(--acc-paper);
font-family: var(--acc-font-mono); font-weight: 800; font-size: .74rem; letter-spacing: -.02em; color: var(--acc-ink);
}
.acc-foot-compliance .acc-foot-warn { max-width: 46rem; }
.acc-foot-warn b { color: var(--acc-ink); font-weight: 700; }
/* Keep multi-word units (the GamCare phone number) from wrapping mid-value. */
.acc-nowrap { white-space: nowrap; }
.acc-foot-trust { display: flex; flex-direction: column; align-items: flex-end; gap: .85rem; }
.acc-pay-row { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; }
.acc-pay {
font-family: var(--acc-font-mono); font-size: .62rem; font-weight: 700; letter-spacing: .06em;
border: 1.5px solid var(--acc-ink); padding: .32rem .5rem; line-height: 1; color: var(--acc-ink);
}
.acc-badge-row { display: flex; align-items: center; gap: .85rem; flex-wrap: wrap; justify-content: flex-end; }
.acc-verified {
display: inline-flex; align-items: center; gap: .5rem; text-decoration: none;
border: 2px solid var(--acc-ink); background: var(--acc-ink); color: var(--acc-paper);
padding: .45rem .7rem; transition: background .12s ease, color .12s ease;
}
.acc-verified:hover { background: var(--acc-lime); color: var(--acc-ink); }
.acc-verified-ico { display: inline-flex; color: var(--acc-lime); }
.acc-verified:hover .acc-verified-ico { color: var(--acc-ink); }
.acc-verified-txt { font-family: var(--acc-font-mono); font-size: .7rem; font-weight: 800; letter-spacing: .02em; line-height: 1.15; }
.acc-verified-txt small { display: block; font-size: .58rem; font-weight: 500; letter-spacing: .08em; opacity: .8; text-transform: uppercase; }
.acc-sgs-badge { height: 3rem; width: auto; }
.acc-foot-legal {
margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1.5px solid var(--acc-hair-soft);
font-family: var(--acc-font-mono); font-size: .64rem; letter-spacing: .04em; line-height: 1.7; color: var(--acc-ink-faint);
}
.acc-foot-legal a { color: var(--acc-ink-soft); }
/* — TYPE HELPERS — */
.acc-eyebrow { font-family: var(--acc-font-mono); font-size: .8rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--acc-ink-soft); }
.acc-eyebrow-sm { font-family: var(--acc-font-mono); font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--acc-ink-soft); margin-bottom: .6rem; display: block; }
.acc-tagline { font-weight: 800; font-size: clamp(1.6rem, 4vw, 2.1rem); line-height: 1; letter-spacing: -.04em; text-transform: uppercase; margin-top: .5rem; margin-bottom: 2.2rem; }
.acc-label { font-family: var(--acc-font-mono); font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--acc-ink-soft); }
.acc-label-lg { font-size: .78rem; letter-spacing: .3em; margin-bottom: .6rem; }
.acc-dim { color: var(--acc-ink-soft); }
.acc-dim-dk { color: rgba(242,239,230,.6); }
.acc-h2 { font-weight: 800; font-size: clamp(34px, 5vw, 56px); line-height: 1; letter-spacing: -.045em; margin-bottom: 1.2rem; }
.acc-note { margin-top: 1.1rem; color: var(--acc-ink-soft); font-size: .95rem; }
.acc-note a { color: var(--acc-ink); }
/* — HERO — */
/* Own the hero's bottom padding here (the section no longer carries pb-0):
without it the "Enter for £1" CTA sits flush on the divider/next section
whenever the countdown branch isn't rendered for the raffle's current state. */
.acc-hero { text-align: center; padding-bottom: 3.5rem; }
.acc-jackpot {
font-family: var(--acc-font-mono); font-weight: 800;
/* Hero jackpot sized to the design ref: 15.5vw, up to 216px on wide screens.
Mobile floor is 54px, NOT the design's 72px - at 72px a 9-10 digit amount
(the jackpot grows) overflows the ~335px phone column, and since the page is
overflow-x:hidden it clips with no scrollbar. 54px lets the figure scale down
to fit. The 216px desktop cap can still clip a six-figure (11-glyph) amount in
the ~1116px column - revisit if the jackpot approaches £100,000. */
font-size: clamp(54px, 15.5vw, 216px); line-height: .86; letter-spacing: -.06em;
word-break: keep-all;
}
/* The final jackpot+CTA repeat (bottom of page, matching the mock) shows the
same figure smaller than the hero - not a second hero-sized headline. */
.acc-jackpot-sm { font-size: clamp(3.5rem, 11vw, 9.4rem); line-height: .9; }
.acc-growing { display: flex; align-items: center; justify-content: center; gap: .55rem; margin-top: 1.1rem; }
.acc-pulse-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--acc-green); animation: acc-pulse 1.4s ease-in-out infinite; }
@keyframes acc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
.acc-growing span:last-child { font-weight: 700; font-size: 1.1rem; letter-spacing: -.01em; }
.acc-chips { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem; margin-top: 1.4rem; }
.acc-chip { font-family: var(--acc-font-mono); font-size: .74rem; font-weight: 500; border: 1.5px solid var(--acc-ink); padding: .5rem .85rem; }
/* Live-activity pills ("+£X in the last 5 minutes" / "N entries in the last
minute") - only ever rendered when the window has real activity, so the
green marks it as genuinely fresh rather than decorative (basecomp#720). */
.acc-chip-live { border-color: var(--acc-green); color: var(--acc-green); }
.acc-sub { margin: 1.5rem auto 0; max-width: 30rem; font-size: 1.02rem; line-height: 1.5; color: var(--acc-ink-soft); }
.acc-hero-cta { margin-top: 1.8rem; }
/* — BUTTONS — */
.acc-btn {
font-family: var(--acc-font-mono); font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
display: inline-flex; align-items: center; justify-content: center; gap: .6em;
padding: 1em 1.6em; border: 2px solid var(--acc-ink); cursor: pointer; line-height: 1; text-decoration: none;
transition: background .18s ease, color .18s ease;
}
.acc-btn-ink { background: var(--acc-ink); color: var(--acc-paper); }
.acc-btn-ink:hover { background: var(--acc-lime); color: var(--acc-ink); }
.acc-btn-ghost { background: transparent; color: var(--acc-ink); }
.acc-btn-ghost:hover { background: var(--acc-ink); color: var(--acc-lime); }
.acc-btn-xl { font-size: 1.15rem; padding: 1.3em 2.6em; }
/* — COUNTDOWN — */
.acc-countdown-wrap { max-width: 42rem; margin: 3rem auto 0; border-top: 2px solid var(--acc-ink); border-bottom: 2px solid var(--acc-ink); padding: 1.4rem 0 1.5rem; }
.acc-countdown-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; }
/* Single inline row of 4 EQUAL units with colon separators. The separators are
real flex siblings (not a ::before on .acc-count__box) - a pseudo-element
nested inside the box would sit on its own line above the (block-level)
number, pushing every box but the first down and making DAYS look like a
detached, oversized unit. As siblings with align-items:flex-start on the
row, they sit on one shared top edge instead. */
.acc-count { display: flex; align-items: flex-start; justify-content: center; gap: .1rem; }
.acc-count__box { flex: 1; min-width: 0; text-align: center; }
.acc-count__sep { flex: 0 0 auto; font-family: var(--acc-font-mono); font-weight: 800; font-size: clamp(30px, 5vw, 52px); line-height: 1; color: var(--acc-hair-soft); }
.acc-count__num { font-family: var(--acc-font-mono); font-weight: 800; font-size: clamp(38px, 7vw, 68px); line-height: 1; letter-spacing: -.05em; display: block; }
.acc-count__box--accent .acc-count__num { color: var(--acc-green); }
.acc-count__lab { font-family: var(--acc-font-mono); font-size: .62rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--acc-ink-soft); margin-top: .45rem; display: block; }
.acc-draw-date { margin-top: 1rem; font-family: var(--acc-font-mono); font-size: .78rem; font-weight: 500; letter-spacing: .1em; }
.acc-flag { display: inline-flex; align-items: center; gap: .5em; font-family: var(--acc-font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; border: 1.5px solid var(--acc-ink); padding: .5em .8em; }
.acc-flag-live { color: var(--acc-danger); border-color: var(--acc-danger); }
/* — RECENT ENTRIES TICKER (issue #731) — livewire.shopfront.raffle.recent-entries
themed override, resolved via theme_view(). Full-bleed horizontal marquee of
real, masked entrants ("J. Smith · 5 entries"), sitting just below the hero.
Deliberately has no acc-maxw wrapper so it bleeds past the centered column,
like a ticker tape. Two identical passes sit side by side inside
.acc-ticker-track and the track translates by exactly -50%, so the loop is
seamless; the second pass is aria-hidden (screen readers read the list once).
Pauses on hover and under prefers-reduced-motion. */
.acc-ticker { border-top: 2px solid var(--acc-ink); border-bottom: 2px solid var(--acc-ink); background: var(--acc-ink); overflow: hidden; }
.acc-ticker-track { display: flex; width: max-content; animation: acc-ticker-scroll var(--acc-ticker-duration, 32s) linear infinite; }
.acc-ticker:hover .acc-ticker-track { animation-play-state: paused; }
.acc-ticker-set { display: flex; align-items: center; list-style: none; padding: 0; margin: 0; }
.acc-ticker-item { display: flex; align-items: center; gap: .6rem; white-space: nowrap; padding: .9rem 1.6rem; font-family: var(--acc-font-mono); font-size: .78rem; letter-spacing: .04em; }
.acc-ticker-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--acc-lime); flex-shrink: 0; }
.acc-ticker-name { font-weight: 700; color: var(--acc-paper); }
.acc-ticker-sep { color: rgba(242,239,230,.35); }
.acc-ticker-count { color: rgba(242,239,230,.7); }
@keyframes acc-ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .acc-ticker-track { animation: none; } }
/* — CELL GRIDS (how-it-works / the-maths / last-draw) — */
.acc-cellgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2px; background: var(--acc-ink); border: 2px solid var(--acc-ink); }
.acc-cellgrid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.acc-cell { background: var(--acc-paper); padding: 2.2rem 1.8rem; }
.acc-cell-accent { background: var(--acc-lime); }
.acc-cell-ink { background: var(--acc-ink); color: var(--acc-paper); }
.acc-cell-num { font-family: var(--acc-font-mono); font-size: .72rem; font-weight: 700; letter-spacing: .3em; color: var(--acc-ink-soft); }
.acc-cell-ink .acc-cell-num, .acc-cell-accent .acc-cell-num { color: inherit; opacity: .7; }
.acc-cell-copy { margin-top: 1rem; font-weight: 800; font-size: 1.7rem; line-height: 1.08; letter-spacing: -.03em; }
.acc-cell-copy-lg { margin-top: 1.1rem; font-weight: 800; font-size: 1.5rem; line-height: 1.2; letter-spacing: -.02em; }
.acc-cell-eyebrow { font-family: var(--acc-font-mono); font-size: 13px; letter-spacing: .2em; color: var(--acc-ink-faint); }
.acc-cell-eyebrow-dk { color: rgba(242,239,230,.65); }
/* Eyebrow on a dark (ink) tile: ink-soft is near-invisible on black, so use the
light paper tint for a readable label (e.g. "1M ENTRIES"), matching the ref. */
.acc-cell-ink .acc-cell-eyebrow { color: rgba(242,239,230,.65); }
.acc-cell-stat { font-family: var(--acc-font-mono); font-weight: 800; font-size: clamp(40px, 5vw, 58px); letter-spacing: -.05em; margin-top: .6rem; }
.acc-cell-stat-lg { font-size: clamp(56px, 8vw, 92px); }
/* The highlighted maths tile (dark) shows its figure in lime - the standout
jackpot number in the design ref. Scoped to the maths 3-grid so the last-draw
ink tile keeps its paper figure. */
.acc-cellgrid-3 .acc-cell-ink .acc-cell-stat { color: var(--acc-lime); }
/* — ENTRY → SPLIT FLOW DIAGRAM — */
.acc-flow { display: flex; flex-wrap: wrap; align-items: stretch; gap: .9rem; margin-top: 2rem; }
.acc-flow-entry { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border: 2px solid var(--acc-ink); padding: 1.3rem 1.7rem; font-family: var(--acc-font-mono); font-weight: 800; font-size: 1.7rem; letter-spacing: -.03em; }
.acc-flow-arrow { flex: 0 0 auto; display: flex; align-items: center; font-size: 1.7rem; font-weight: 800; }
.acc-flow-split { flex: 1 1 300px; display: flex; min-width: 260px; border: 2px solid var(--acc-ink); }
.acc-flow-split-cell { flex: 1; padding: 1.1rem 1rem; }
.acc-flow-split-cell + .acc-flow-split-cell { border-left: 2px solid var(--acc-ink); }
.acc-flow-split-cell--accent { background: var(--acc-lime); }
.acc-flow-split-val { font-family: var(--acc-font-mono); font-weight: 800; font-size: 1.5rem; letter-spacing: -.03em; }
.acc-flow-split-lab { font-family: var(--acc-font-mono); font-size: .64rem; letter-spacing: .18em; margin-top: .3rem; color: var(--acc-ink-soft); }
.acc-flow-split-cell--accent .acc-flow-split-lab { color: var(--acc-lime-ink); opacity: .75; }
/* — PANEL (enter / bundle picker) — */
.acc-panel { border: 2px solid var(--acc-ink); background: var(--acc-card); }
.acc-panel-head { padding: 2rem 1.8rem 0; text-align: center; }
.acc-panel-sub { margin-top: .7rem; color: var(--acc-ink-soft); font-size: .98rem; }
.acc-panel-body { padding: 1.6rem 1.8rem 1.8rem; }
.acc-panel-foot { border-top: 2px solid var(--acc-ink); margin: 1.8rem -1.8rem -1.8rem; padding: 1rem 1.8rem; display: flex; flex-wrap: wrap; gap: 1rem; font-family: var(--acc-font-mono); font-size: .68rem; letter-spacing: .06em; color: var(--acc-ink-soft); }
/* The free-postal-entry route is a legally-required "no purchase necessary"
option, so it stays a genuine link even though the mock renders this whole
line as plain fine print - it's the only trigger for the postal tab now
that the separate "Prefer not to pay online?" line is gone (see
system_raffle_detail.blade.php's acc-panel-foot). Styled to disappear into
the surrounding fine print: same font/size/color, underline is the only tell. */
.acc-panel-foot-link { font: inherit; letter-spacing: inherit; background: none; border: 0; padding: 0; margin: 0; color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.acc-panel-foot-link:hover { color: var(--acc-ink); }
/* — FREE POSTAL ENTRY TOGGLE — the design has no ONLINE/FREE-ENTRY tab bar (a
postal route is still a legally-required "no purchase necessary" option, so
it isn't removed - it's demoted to a small text toggle under the tiles,
matching the mock's understated fine-print treatment). */
.acc-postal-toggle { display: inline-flex; align-items: center; gap: .4em; font-family: var(--acc-font-mono); font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: none; border: 0; padding: 0; color: var(--acc-ink-soft); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.acc-postal-toggle:hover { color: var(--acc-ink); }
.acc-steps { list-style: decimal; padding-left: 1.2rem; }
.acc-steps li { padding: .15rem 0; color: var(--acc-ink-soft); font-size: .82rem; line-height: 1.55; }
.acc-frame-ink { border: 2px solid var(--acc-ink); padding: 1rem 1.2rem; margin-top: .5rem; }
.acc-addr { font-family: var(--acc-font-mono); font-size: .82rem; line-height: 1.9; }
/* — PURCHASE TILES — themed override of livewire.shopfront.add-to-cart-button
(resources/views/themes/accumulate/livewire/shopfront/add-to-cart-button.blade.php),
resolved via theme_view(). Five equal preset tiles, no slider, no +/- stepper. */
.acc-atc [class*="rounded"] { border-radius: 0 !important; box-shadow: none !important; }
.acc-tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: .6rem; }
@media (max-width: 640px) { .acc-tiles { grid-template-columns: repeat(2, 1fr); } }
.acc-tile { display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; padding: 1.6rem 1.3rem; border: 2px solid var(--acc-ink); background: transparent; color: var(--acc-ink); font-family: var(--acc-font-mono); cursor: pointer; text-align: left; }
.acc-tile:hover:not(.is-active) { background: var(--acc-secondary, rgba(14,14,14,.05)); }
.acc-tile.is-active { background: var(--acc-ink); color: var(--acc-lime); border-color: var(--acc-ink); }
.acc-tile-n { font-weight: 800; font-size: 34px; letter-spacing: -.03em; line-height: 1; }
.acc-tile-lab { font-size: 12px; letter-spacing: .2em; text-transform: uppercase; opacity: .7; }
.acc-tile-price { font-weight: 700; font-size: 15px; margin-top: .15rem; }
/* Slightly more vertical rhythm between the tiles, the CTA row and the
cart/postal rows than Tailwind's space-y-4 (1rem). Two classes so it wins
over `.space-y-4 > * + *` without depending on a specific compiled utility. */
.acc-atc.space-y-4 > * + * { margin-top: 1.5rem; }
.acc-atc-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem; margin-top: 1.6rem; }
.acc-atc-pay-label { font-family: var(--acc-font-mono); font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--acc-ink-faint); margin-bottom: .35rem; }
.acc-atc-pay-amt { font-family: var(--acc-font-mono); font-weight: 800; font-size: 44px; letter-spacing: -.045em; line-height: 1; }
.acc-atc-pay-sub { font-size: 15px; color: var(--acc-ink-soft); margin-top: .35rem; }
.acc-atc-cta { flex: 1 1 280px; font-size: 20px; padding: 24px 32px; }
/* — "WHAT GETS PUBLISHED" LIST (folded into the LAST DRAW cell - the mock has
no standalone transparency section) — */
.acc-fair-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .8rem; font-size: 1.02rem; }
.acc-fair-list-light { color: var(--acc-ink-soft); }
/* A completed draw still needs a real, reachable verification path even
though the mock has no dedicated verify button - kept as a single subtle
link inside the dark LAST DRAW cell instead of a separate prominent section. */
.acc-verify-link { margin-top: 1rem; }
.acc-verify-link a { font-family: var(--acc-font-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(242,239,230,.7); text-decoration: underline; text-underline-offset: 3px; }
.acc-verify-link a:hover { color: var(--acc-lime); }
/* — RULES ("the whole thing, in nine lines") — */
.acc-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 2.5rem; border-top: 2px solid var(--acc-ink); }
.acc-fact { display: flex; gap: 1rem; padding: 1.25rem 0; border-bottom: 1px solid #CFC9BA; }
.acc-fact-n { font-family: var(--acc-font-mono); font-size: .72rem; font-weight: 700; color: var(--acc-ink-faint); padding-top: .25rem; }
.acc-fact-t { font-size: 1.05rem; line-height: 1.4; }
/* — SHARE ROW — */
.acc-share { border: 2px solid var(--acc-ink); background: var(--acc-lime); padding: 2.6rem 1.8rem; text-align: center; }
.acc-share-sub { margin: .9rem auto 0; max-width: 32rem; font-size: 1.05rem; line-height: 1.45; color: var(--acc-lime-ink); }
.acc-share-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: 1.6rem; }
.acc-share .acc-btn-ghost { border-color: var(--acc-ink); }
.acc-share .acc-btn-ghost:hover { background: var(--acc-ink); color: var(--acc-lime); }
/* ============================================================
GAMES + WIN MODAL — Accumulate token VALUES only (Accumulate raffles ship
zero instant wins per docs/accumulate-raffle-spec.md, but the shared
mapping rules in _shared/games.css still read these if ever used).
============================================================ */
:root {
--gt-page: #F2EFE6;
--gt-ink: #0E0E0E;
--gt-ink-soft: #45413A;
--gt-ink-faint: #6B6558;
--gt-board: #0E0E0E;
--gt-board-hi: #1A1A1A;
--gt-board-lo: #000000;
--gt-surface-dark: #1A1A1A;
--gt-text-on-dark: #F2EFE6;
--gt-card: #FFFDF7;
--gt-card-2: #EBE7DA;
--gt-hairline: #0E0E0E;
--gt-hairline-dark: rgba(242,239,230,.18);
--gt-win: #C8FF4D;
--gt-win-soft: #DBFF8A;
--gt-action: #0E0E0E;
--gt-on-action: #F2EFE6;
--gt-loss: #B42318;
--gt-loss-deep: #7A160F;
--gt-title-font: 'Bricolage Grotesque', system-ui, sans-serif;
/* Games layer defaults the daily-game title to italic/500 (editorial); Accumulate
headings are upright and heavy, so override both to match the rest of the theme. */
--gt-title-style: normal;
--gt-title-weight: 800;
--gt-label-font: 'JetBrains Mono', ui-monospace, monospace;
--gt-radius: 0px;
--gt-card-shadow: none;
--wheel-divider: #0E0E0E;
--wheel-label: #F2EFE6;
--wheel-hub: #0E0E0E;
--scratch-0: #C8FF4D;
--scratch-1: #9FE01A;
--scratch-2: #6B9E0E;
--pk-legend-loss: #B42318;
--pk-bg-0: transparent;
--pk-peg: #C0BAAA;
--pk-peg-halo-rgb: 192, 186, 170;
--pk-ball-0: #F2EFE6;
--pk-ball-1: #C8FF4D;
--pk-ball-2: #6B9E0E;
--pk-ball-glow-rgb: 200, 255, 77;
--pk-loss-top: #B42318;
--pk-loss-bottom: #7A160F;
--pk-spark: #C8FF4D;
--pk-spark-soft: #E6FFB0;
--pk-loss-spark: #B42318;
--pk-win-text: #C8FF4D;
--pk-win-text-glow-rgb: 200, 255, 77;
--pk-fallback-0-top: #8A8A72; --pk-fallback-0-bottom: #5D5D4C;
--pk-fallback-1-top: #9FE01A; --pk-fallback-1-bottom: #6B9E0E;
--pk-fallback-2-top: #B42318; --pk-fallback-2-bottom: #7A160F;
}
/* ============================================================
ACCOUNT / AUTH / CHECKOUT / WINNERS / LIVE-DRAW — surface scopes
(theme_scope_class(), config/themes.php). Accumulate has no bespoke
overrides for these Livewire views (same pattern as WinWink); the
platform token remap on .acc-scope above already tints every panel,
input and button on these surfaces to the brutalist palette.
============================================================ */
.acc-account h1, .acc-account h2, .acc-auth h1, .acc-auth h2,
.acc-checkout h1, .acc-checkout h2, .acc-winners h1, .acc-winners h2 {
font-family: var(--acc-font-display); font-weight: 800; letter-spacing: -.03em;
}
.acc-account .card, .acc-account .card-static,
.acc-auth .card, .acc-checkout .card, .acc-checkout .card-static,
.acc-winners .card, .acc-winners .card-static,
.acc-account [class*="rounded"], .acc-auth [class*="rounded"],
.acc-checkout [class*="rounded"], .acc-winners [class*="rounded"] {
border-radius: 0 !important; box-shadow: none !important; border-color: var(--acc-ink);
}
.acc-account .tabular-nums, .acc-checkout .tabular-nums, .acc-winners .tabular-nums,
.acc-account [class*="font-mono"], .acc-checkout [class*="font-mono"], .acc-winners [class*="font-mono"] {
font-family: var(--acc-font-mono);
}
/* Auth pages (login / register - the views that carry theme_scope_class('auth');
the password-reset views don't yet, tracked separately): the shared view root
is min-h-screen + justify-center, which dead-centres a short card in the full
viewport and leaves a sea of paper above and below it on desktop. Drop the
forced full height so the card sits under the header with normal vertical
rhythm, and the footer follows the content instead of being pushed a whole
screen down. */
.acc-auth {
min-height: auto !important;
padding-top: clamp(3rem, 9vh, 6rem) !important;
padding-bottom: clamp(3rem, 9vh, 6rem) !important;
}
/* Checkout header — ink on paper, no gradient band. The shared checkout view
hardcodes white text on a dark .hero-gradient-horizontal band; on the paper
theme we hide the band and recolour to ink so the header reads like the rest
of the theme instead of a heavy full-width bar. Scoped to the header
(a direct child of the scope wrapper) so the cart panel below is untouched. */
.acc-checkout > section .hero-gradient-horizontal { display: none !important; }
.acc-checkout > section :is(h1, [class*="text-white"]) { color: var(--acc-ink) !important; }
/* Breadcrumb: keep the link muted and let the current-page label (the text-white
span, inked by the rule above) stay prominent, preserving the you-are-here
emphasis from the base design. */
.acc-checkout > section nav a[class*="text-white"] { color: var(--acc-ink-soft) !important; }
.acc-checkout > section nav a:hover { color: var(--acc-ink) !important; }
/* Secure / Encrypted chips: hard ink outline on paper, not translucent white. */
.acc-checkout > section [class*="bg-white/"] {
background: transparent !important;
border: 1px solid var(--acc-ink) !important;
color: var(--acc-ink) !important;
}
/* ============================================================
COOKIE CONSENT BANNER — brutalist restyle.
theme.css only loads on themed pages, so these only apply there.
============================================================ */
.bc-consent .bc-consent__panel { background: var(--acc-card); border: 2px solid var(--acc-ink); border-radius: 0; box-shadow: none; }
.bc-consent .bc-consent__text { font-family: var(--acc-font-display); color: var(--acc-ink-soft); }
.bc-consent .bc-consent__link { color: var(--acc-ink); text-decoration: underline; text-underline-offset: 2px; }
.bc-consent .bc-consent__btn { font-family: var(--acc-font-mono); border-radius: 0; letter-spacing: .04em; }
.bc-consent .bc-consent__btn--primary { background: var(--acc-ink); color: var(--acc-paper); border-color: var(--acc-ink); }
.bc-consent .bc-consent__btn--primary:hover { background: var(--acc-lime); color: var(--acc-ink); }
.bc-consent .bc-consent__btn--solid { background: var(--acc-ink); color: var(--acc-paper); border-color: var(--acc-ink); }
.bc-consent .bc-consent__btn--link { color: var(--acc-ink-soft); }
.bc-consent .bc-consent__btn--link:hover { color: var(--acc-ink); }