main content + bottom_page
sidebar
*/
@media (max-width: 767px) {
/*
On mobile, pull the sidebar up so "Quick jump" and
"Ready to play?" sit right after the main results,
not way down at the bottom.
*/
body.lc-home .container > .row {
display: flex;
flex-direction: column;
}
body.lc-home .container > .row > .col-sm-8 {
order: 1;
}
body.lc-home .container > .row > .col-sm-4 {
order: 2;
margin-top: 16px;
}
/* Sidebar cards: tighter on mobile */
.lc-sb-card,
.lc-mini-card {
padding: 14px 16px;
margin-bottom: 8px;
}
.lc-sb-card__title,
.lc-mini-card__title {
font-size: 17px;
margin-bottom: 8px;
}
.lc-sb-card__text {
font-size: 14px;
}
.lc-sb-list a {
font-size: 15px;
padding: 10px 0;
min-height: 44px;
display: flex;
align-items: center;
}
.lc-sb-btn {
padding: 12px 20px;
font-size: 15px;
min-height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
}
.lc-sb-social__link {
padding: 12px 14px;
font-size: 14px;
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
}
/* ── REGIONAL STRIP: cleaner on narrow screens ──────────────── */
@media (max-width: 480px) {
.lc-regional {
padding: 10px 14px;
gap: 4px;
}
.lc-regional__label {
flex-basis: 100%;
margin-bottom: 4px;
}
.lc-regional__link {
font-size: 13px;
padding: 4px 8px;
}
.lc-regional__link + .lc-regional__link::before {
content: none;
}
.lc-regional__link--all {
flex-basis: 100%;
margin-top: 6px;
margin-left: 0;
padding: 10px 0;
}
}
/* ── RESULT CARDS: better padding on mobile ─────────────────── */
@media (max-width: 480px) {
.lc-result {
padding: 16px;
}
.lc-result__head {
margin-bottom: 10px;
}
.lc-result__schedule {
font-size: 10px;
}
.lc-result__foot-value {
font-size: 19px;
}
.lc-result__foot-value--small {
font-size: 13px;
}
.lc-balls__caption {
font-size: 12px;
}
}
/* ── TWO-COLUMN BOTTOM: better vertical rhythm ──────────────── */
@media (max-width: 767px) {
.lc-twocol {
gap: 24px;
}
.lc-sec-head__title {
font-size: 20px;
}
}
/* ── FOOTER: hit-friendly tap targets ───────────────────────── */
@media (max-width: 600px) {
.lc-footer__list a {
font-size: 14px;
padding: 8px 0;
display: inline-block;
min-height: 40px;
}
.lc-footer__heading {
margin-bottom: 8px;
}
}
/* =============================================================
LotteryCanada — Lotto 6/49 page redesign
Append to app/assets/stylesheets/lotcan/redesign.css
Mobile-first: base styles target iPhone (375px).
Media queries scale UP.
Prefix: .lx- (lottery experience) — separate from .lc- homepage
so they don't collide if we iterate on one without the other.
============================================================= */
/* ── PAGE BASE ───────────────────────────────────────────────── */
/* Lottery pages keep the Bootstrap container but tint it warm */
body .container section.lx-hero,
body .container section.lx-checker,
body .container section.lx-next,
body .container section.lx-glance,
body .container section.lx-freq,
body .container section.lx-payouts,
body .container section.lx-provincial,
body .container section.lx-history,
body .container section.lx-about {
/* Scope our vertical rhythm */
}
body .container .lx-hero,
body .container .lx-checker,
body .container .lx-next,
body .container .lx-glance,
body .container .lx-freq,
body .container .lx-payouts,
body .container .lx-provincial,
body .container .lx-history,
body .container .lx-about {
margin-bottom: 20px;
}
/* Apply warm bg to these pages too */
body .container {
background-color: var(--lc-cream);
}
/* ── HERO — THE NUMBERS ──────────────────────────────────────── */
.lx-hero {
padding: 18px 0 20px;
border-bottom: 1px solid var(--lc-line);
}
.lx-hero__eyebrow {
font-family: var(--lc-sans);
font-size: 13px;
font-weight: 500;
color: var(--lc-muted);
margin-bottom: 6px;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 8px;
}
.lx-hero__latest-pill {
display: inline-block;
background: var(--lc-forest);
color: var(--lc-cream);
font-size: 10px;
font-weight: 600;
padding: 3px 8px;
border-radius: 10px;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.lx-hero__title {
font-family: var(--lc-display);
font-size: 26px;
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.5px;
color: var(--lc-ink);
margin: 0 0 18px;
}
/* Balls — big on mobile, tappable-looking */
.lx-hero__balls {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin-bottom: 8px;
}
.lx-ball {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background: #FFFFFF;
border: 2px solid var(--lc-ink);
border-radius: 50%;
font-family: var(--lc-sans);
font-size: 17px;
font-weight: 600;
color: var(--lc-ink);
flex-shrink: 0;
}
.lx-ball--bonus {
background: var(--lc-red);
border-color: var(--lc-red);
color: #FFFFFF;
}
.lx-ball__sep {
width: 1px;
height: 28px;
background: var(--lc-line-med);
margin: 0 4px;
}
.lx-hero__ball-caption {
font-family: var(--lc-sans);
font-size: 12px;
color: var(--lc-muted);
margin-top: 4px;
}
/* Guaranteed Winner Number — 6/49 specific */
.lx-gwn {
margin-top: 18px;
padding: 14px 16px;
background: var(--lc-cream-2);
border: 1px solid rgba(193, 39, 45, 0.15);
border-radius: var(--lc-r-md);
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
.lx-gwn__label {
font-family: var(--lc-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--lc-gold-ink);
flex-basis: 100%;
}
.lx-gwn__value {
font-family: var(--lc-mono, 'Courier New', monospace);
font-size: 18px;
font-weight: 700;
color: var(--lc-ink);
background: #FFFFFF;
padding: 6px 12px;
border-radius: var(--lc-r-sm);
letter-spacing: 0.05em;
}
.lx-gwn__sold {
font-family: var(--lc-sans);
font-size: 13px;
color: var(--lc-ink-soft);
}
/* ── DID YOU WIN? INLINE CHECKER ─────────────────────────────── */
.lx-checker {
background: var(--lc-ink);
color: var(--lc-cream);
border-radius: var(--lc-r-md);
padding: 20px;
}
.lx-checker__head {
margin-bottom: 14px;
}
.lx-checker__title {
font-family: var(--lc-display);
font-size: 22px;
font-weight: 700;
color: var(--lc-cream);
margin: 0 0 4px;
line-height: 1.2;
}
.lx-checker__sub {
font-family: var(--lc-sans);
font-size: 14px;
color: rgba(250, 246, 239, 0.72);
margin: 0;
line-height: 1.4;
}
.lx-checker__inputs {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 6px;
margin-bottom: 12px;
}
.lx-checker__input {
height: 50px;
background: rgba(250, 246, 239, 0.08);
border: 1.5px solid rgba(250, 246, 239, 0.2);
border-radius: var(--lc-r-sm);
color: var(--lc-cream);
font-family: var(--lc-sans);
font-size: 18px;
font-weight: 600;
text-align: center;
-moz-appearance: textfield;
appearance: textfield;
-webkit-appearance: none;
transition: border-color var(--lc-ease), background var(--lc-ease);
min-width: 0;
}
.lx-checker__input::-webkit-outer-spin-button,
.lx-checker__input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.lx-checker__input::placeholder {
color: rgba(250, 246, 239, 0.3);
font-weight: 400;
}
.lx-checker__input:focus {
outline: none;
background: rgba(250, 246, 239, 0.15);
border-color: var(--lc-gold);
}
.lx-checker__submit {
width: 100%;
height: 50px;
background: var(--lc-gold);
color: var(--lc-ink);
border: none;
border-radius: var(--lc-r-sm);
font-family: var(--lc-sans);
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: background var(--lc-ease), transform 0.08s ease;
}
.lx-checker__submit:hover {
background: #c99761;
}
.lx-checker__submit:active {
transform: scale(0.98);
}
.lx-checker__result {
margin-top: 14px;
padding: 14px 16px;
border-radius: var(--lc-r-sm);
font-family: var(--lc-sans);
font-size: 14px;
line-height: 1.5;
}
.lx-checker__result--neutral {
background: rgba(250, 246, 239, 0.1);
color: rgba(250, 246, 239, 0.85);
}
.lx-checker__result--miss {
background: rgba(250, 246, 239, 0.06);
color: rgba(250, 246, 239, 0.7);
border: 1px solid rgba(250, 246, 239, 0.1);
}
.lx-checker__result--win {
background: rgba(45, 106, 79, 0.25);
border: 1px solid var(--lc-forest);
color: #D4EDD1;
}
.lx-checker__result--big,
.lx-checker__result--jackpot {
background: var(--lc-gold);
color: var(--lc-ink);
font-weight: 600;
border: 1px solid var(--lc-gold);
}
.lx-checker__alt {
margin-top: 14px;
text-align: center;
}
.lx-checker__alt-link {
font-family: var(--lc-sans);
font-size: 13px;
color: rgba(250, 246, 239, 0.7);
text-decoration: underline;
text-underline-offset: 2px;
}
.lx-checker__alt-link:hover {
color: var(--lc-cream);
text-decoration: underline;
}
/* ── NEXT DRAW ───────────────────────────────────────────────── */
.lx-next {
background: #FFFFFF;
border: 1px solid var(--lc-line);
border-radius: var(--lc-r-md);
padding: 16px 18px;
}
.lx-next__label {
font-family: var(--lc-sans);
font-size: 10px;
font-weight: 600;
color: var(--lc-muted);
text-transform: uppercase;
letter-spacing: 0.1em;
margin-bottom: 6px;
}
.lx-next__body {
display: flex;
flex-direction: column;
gap: 10px;
}
.lx-next__jackpot {
font-family: var(--lc-display);
font-size: 40px;
font-weight: 700;
line-height: 1;
color: var(--lc-red);
letter-spacing: -1px;
}
.lx-next__meta {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 6px 10px;
padding-top: 10px;
border-top: 1px solid var(--lc-line);
}
.lx-next__date {
font-family: var(--lc-sans);
font-size: 14px;
font-weight: 500;
color: var(--lc-ink);
}
.lx-next__countdown {
font-family: var(--lc-sans);
font-size: 13px;
color: var(--lc-red);
font-weight: 600;
}
.lx-next__countdown-label {
color: var(--lc-muted);
font-weight: 400;
margin-left: 4px;
}
/* ── AT A GLANCE STATS ──────────────────────────────────────── */
.lx-glance {
/* no special container */
}
.lx-glance__title {
font-family: var(--lc-display);
font-size: 22px;
font-weight: 700;
color: var(--lc-ink);
margin: 0 0 14px;
line-height: 1.2;
}
.lx-stat-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.lx-stat {
background: #FFFFFF;
border: 1px solid var(--lc-line);
border-radius: var(--lc-r-md);
padding: 14px 16px;
}
.lx-stat__value {
font-family: var(--lc-display);
font-size: 22px;
font-weight: 700;
color: var(--lc-ink);
line-height: 1.1;
margin-bottom: 2px;
word-break: break-word;
}
.lx-stat__label {
font-family: var(--lc-sans);
font-size: 12px;
color: var(--lc-muted);
}
.lx-stat--up .lx-stat__value { color: var(--lc-forest); }
.lx-stat--down .lx-stat__value { color: var(--lc-red); }
/* ── HOT & COLD (the signature) ─────────────────────────────── */
.lx-freq {
padding: 0;
}
.lx-freq__head {
margin-bottom: 14px;
}
.lx-freq__title {
font-family: var(--lc-display);
font-size: 22px;
font-weight: 700;
color: var(--lc-ink);
margin: 0 0 4px;
line-height: 1.2;
}
.lx-freq__sub {
font-family: var(--lc-sans);
font-size: 13px;
color: var(--lc-muted);
margin: 0;
line-height: 1.4;
}
/* Period tabs */
.lx-freq__tabs {
display: flex;
gap: 6px;
margin-bottom: 14px;
overflow-x: auto;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
padding: 2px 0;
}
.lx-freq__tabs::-webkit-scrollbar { display: none; }
.lx-freq__tab {
flex: 0 0 auto;
min-width: 60px;
min-height: 52px;
background: #FFFFFF;
border: 1px solid var(--lc-line);
border-radius: var(--lc-r-sm);
padding: 8px 10px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1px;
font-family: var(--lc-sans);
font-size: 15px;
font-weight: 700;
color: var(--lc-ink);
cursor: pointer;
transition: background var(--lc-ease), border-color var(--lc-ease), color var(--lc-ease);
}
.lx-freq__tab:hover {
border-color: var(--lc-line-med);
}
.lx-freq__tab.is-active {
background: var(--lc-ink);
border-color: var(--lc-ink);
color: var(--lc-cream);
}
.lx-freq__tab-sub {
font-size: 10px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.08em;
opacity: 0.7;
}
/* Frequency grid — mobile: 7 columns (fits 49 in 7 rows on narrow screens) */
.lx-freq__panel {
display: none;
}
.lx-freq__panel.is-active {
display: block;
}
.lx-freq__grid {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 5px;
margin-bottom: 12px;
}
.lx-freq__cell {
aspect-ratio: 1;
background: #FFFFFF;
border: 1px solid var(--lc-line);
border-radius: var(--lc-r-sm);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
min-height: 42px;
}
.lx-freq__cell-bar {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: var(--lc-red);
opacity: 0.15;
z-index: 0;
transition: height var(--lc-ease);
}
.lx-freq__cell-num {
position: relative;
z-index: 1;
font-family: var(--lc-sans);
font-size: 15px;
font-weight: 700;
color: var(--lc-ink);
line-height: 1;
}
.lx-freq__cell-count {
position: relative;
z-index: 1;
font-family: var(--lc-sans);
font-size: 10px;
font-weight: 500;
color: var(--lc-muted);
margin-top: 1px;
}
/* Temperature states */
.lx-freq__cell--hot { border-color: var(--lc-red); }
.lx-freq__cell--hot .lx-freq__cell-bar { background: var(--lc-red); opacity: 0.25; }
.lx-freq__cell--hot .lx-freq__cell-num { color: var(--lc-red-dark); }
.lx-freq__cell--warm .lx-freq__cell-bar { background: var(--lc-gold); opacity: 0.35; }
.lx-freq__cell--cool .lx-freq__cell-bar { background: var(--lc-line-med); opacity: 0.5; }
.lx-freq__cell--cold {
background: var(--lc-cream-3);
border-color: var(--lc-line);
}
.lx-freq__cell--cold .lx-freq__cell-num { color: var(--lc-muted); }
.lx-freq__cell--cold .lx-freq__cell-count { opacity: 0.5; }
/* Legend */
.lx-freq__legend {
display: flex;
flex-wrap: wrap;
gap: 12px 16px;
padding: 10px 0 4px;
font-family: var(--lc-sans);
font-size: 12px;
color: var(--lc-muted);
}
.lx-freq__legend-item {
display: inline-flex;
align-items: center;
gap: 6px;
}
.lx-freq__swatch {
width: 14px;
height: 14px;
border-radius: 3px;
display: inline-block;
}
.lx-freq__swatch--hot { background: var(--lc-red); }
.lx-freq__swatch--warm { background: var(--lc-gold); }
.lx-freq__swatch--cool { background: var(--lc-line-med); }
.lx-freq__swatch--cold { background: var(--lc-cream-3); border: 1px solid var(--lc-line); }
.lx-freq__cta {
padding-top: 8px;
}
.lx-freq__cta-link {
font-family: var(--lc-sans);
font-size: 13px;
font-weight: 600;
color: var(--lc-red);
text-decoration: none;
}
.lx-freq__cta-link:hover {
color: var(--lc-red-dark);
text-decoration: underline;
}
/* ── PRIZE PAYOUTS ───────────────────────────────────────────── */
.lx-payouts__title {
font-family: var(--lc-display);
font-size: 22px;
font-weight: 700;
color: var(--lc-ink);
margin: 0 0 12px;
line-height: 1.2;
}
.lx-payouts__list {
background: #FFFFFF;
border: 1px solid var(--lc-line);
border-radius: var(--lc-r-md);
overflow: hidden;
}
.lx-payout {
border-bottom: 1px solid var(--lc-line);
}
.lx-payout:last-child {
border-bottom: none;
}
.lx-payout__row {
display: grid;
grid-template-columns: 1fr auto auto auto;
gap: 10px;
align-items: center;
padding: 14px 16px;
cursor: pointer;
list-style: none;
font-family: var(--lc-sans);
min-height: 56px;
}
.lx-payout__row::-webkit-details-marker { display: none; }
.lx-payout__row::marker { content: ''; }
.lx-payout--no-breakdown .lx-payout__row {
cursor: default;
}
.lx-payout__match {
font-size: 14px;
font-weight: 600;
color: var(--lc-ink);
}
.lx-payout__winners {
font-size: 13px;
color: var(--lc-ink-soft);
font-weight: 500;
text-align: right;
}
.lx-payout__winners-label {
color: var(--lc-muted);
font-weight: 400;
font-size: 11px;
margin-left: 2px;
display: none;
}
.lx-payout__prize {
font-family: var(--lc-display);
font-size: 16px;
font-weight: 700;
color: var(--lc-ink);
text-align: right;
min-width: 64px;
}
.lx-payout__caret {
color: var(--lc-muted);
transition: transform var(--lc-ease);
}
.lx-payout[open] .lx-payout__caret {
transform: rotate(180deg);
}
.lx-payout__breakdown {
padding: 0 16px 14px;
background: var(--lc-cream-2);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px 14px;
font-family: var(--lc-sans);
font-size: 13px;
}
.lx-payout__region {
display: flex;
justify-content: space-between;
align-items: center;
padding: 6px 0;
}
.lx-payout__region-name {
color: var(--lc-ink-soft);
}
.lx-payout__region-count {
color: var(--lc-ink);
font-weight: 600;
}
/* ── PROVINCIAL ADD-ONS ─────────────────────────────────────── */
.lx-provincial__title {
font-family: var(--lc-display);
font-size: 22px;
font-weight: 700;
color: var(--lc-ink);
margin: 0 0 4px;
line-height: 1.2;
}
.lx-provincial__sub {
font-family: var(--lc-sans);
font-size: 13px;
color: var(--lc-muted);
margin: 0 0 14px;
line-height: 1.4;
}
.lx-provincial__grid {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}
.lx-provincial__card {
background: #FFFFFF;
border: 1px solid var(--lc-line);
border-radius: var(--lc-r-md);
padding: 14px 16px;
text-decoration: none;
color: var(--lc-ink);
display: flex;
flex-direction: column;
gap: 8px;
transition: border-color var(--lc-ease), transform var(--lc-ease);
}
.lx-provincial__card:hover {
border-color: var(--lc-line-med);
transform: translateY(-1px);
text-decoration: none;
color: var(--lc-ink);
}
.lx-provincial__card-name {
font-family: var(--lc-display);
font-size: 15px;
font-weight: 700;
color: var(--lc-ink);
}
.lx-provincial__card-nums {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.lx-provincial__card--pending {
background: var(--lc-cream-2);
border-style: dashed;
}
.lx-provincial__card--pending .lx-provincial__card-name {
color: var(--lc-muted);
}
.lx-provincial__card-pending {
font-family: var(--lc-sans);
font-size: 13px;
font-weight: 500;
color: var(--lc-muted);
font-style: italic;
}
.lx-provincial__num {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 34px;
height: 34px;
padding: 0 6px;
background: var(--lc-cream-2);
border-radius: var(--lc-r-sm);
font-family: var(--lc-sans);
font-size: 13px;
font-weight: 600;
color: var(--lc-ink);
letter-spacing: 0.02em;
}
.lx-provincial__card-prize {
font-family: var(--lc-sans);
font-size: 12px;
color: var(--lc-muted);
}
/* ── DRAW HISTORY ───────────────────────────────────────────── */
.lx-history__title {
font-family: var(--lc-display);
font-size: 22px;
font-weight: 700;
color: var(--lc-ink);
margin: 0 0 12px;
line-height: 1.2;
}
.lx-history__picker {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 14px;
}
.lx-history__label {
display: flex;
flex-direction: column;
gap: 4px;
font-family: var(--lc-sans);
font-size: 11px;
font-weight: 600;
color: var(--lc-muted);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.lx-history__select {
width: 100%;
height: 48px;
background: #FFFFFF;
border: 1px solid var(--lc-line);
border-radius: var(--lc-r-sm);
padding: 0 12px;
font-family: var(--lc-sans);
font-size: 16px; /* 16px prevents iOS zoom */
font-weight: 500;
color: var(--lc-ink);
appearance: none;
-webkit-appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2378716C' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 32px;
text-transform: none;
letter-spacing: normal;
}
.lx-history__list {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 12px;
}
.lx-history__draw {
background: #FFFFFF;
border: 1px solid var(--lc-line);
border-radius: var(--lc-r-md);
padding: 12px 14px;
text-decoration: none;
color: var(--lc-ink);
display: flex;
align-items: center;
gap: 12px;
min-height: 52px;
transition: border-color var(--lc-ease);
}
.lx-history__draw:hover {
border-color: var(--lc-line-med);
text-decoration: none;
color: var(--lc-ink);
}
.lx-history__draw.is-current {
background: var(--lc-cream-2);
border-color: var(--lc-red);
}
.lx-history__draw-date {
font-family: var(--lc-sans);
font-size: 13px;
font-weight: 600;
color: var(--lc-ink);
flex-shrink: 0;
min-width: 92px;
}
.lx-history__draw-nums {
display: flex;
gap: 4px;
flex-wrap: wrap;
flex: 1;
}
.lx-history__mini-ball {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 26px;
height: 26px;
padding: 0 4px;
background: var(--lc-cream);
border: 1px solid var(--lc-line);
border-radius: 50%;
font-family: var(--lc-sans);
font-size: 11px;
font-weight: 600;
color: var(--lc-ink);
}
.lx-history__empty {
padding: 20px;
text-align: center;
font-family: var(--lc-sans);
font-size: 14px;
color: var(--lc-muted);
background: #FFFFFF;
border: 1px dashed var(--lc-line);
border-radius: var(--lc-r-md);
}
.lx-history__meta {
font-family: var(--lc-sans);
font-size: 12px;
color: var(--lc-muted);
text-align: center;
}
/* ── ABOUT (SEO content) ────────────────────────────────────── */
.lx-about {
padding: 20px 0;
border-top: 1px solid var(--lc-line);
}
.lx-about__title {
font-family: var(--lc-display);
font-size: 22px;
font-weight: 700;
color: var(--lc-ink);
margin: 0 0 14px;
line-height: 1.2;
}
.lx-about__grid {
display: grid;
grid-template-columns: 1fr;
gap: 22px;
}
.lx-about__block {
/* no special container */
}
.lx-about__heading {
font-family: var(--lc-display);
font-size: 16px;
font-weight: 700;
color: var(--lc-ink);
margin: 0 0 8px;
line-height: 1.3;
}
.lx-about__block p {
font-family: var(--lc-sans);
font-size: 14px;
color: var(--lc-ink-soft);
line-height: 1.6;
margin: 0 0 10px;
}
.lx-about__block p:last-child { margin-bottom: 0; }
.lx-about__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.lx-about__list li {
font-family: var(--lc-sans);
font-size: 14px;
color: var(--lc-ink-soft);
padding: 6px 0;
border-bottom: 1px solid var(--lc-line);
}
.lx-about__list li:last-child { border-bottom: none; }
.lx-odds {
background: var(--lc-cream-2);
border-radius: var(--lc-r-md);
padding: 4px 14px;
}
.lx-odds__row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 0;
border-bottom: 1px solid var(--lc-line);
font-family: var(--lc-sans);
font-size: 13px;
color: var(--lc-ink-soft);
}
.lx-odds__row:last-child { border-bottom: none; }
.lx-odds__row--any {
font-weight: 700;
color: var(--lc-ink);
}
/* ── FOOTNOTE ───────────────────────────────────────────────── */
.lx-footnote {
font-family: var(--lc-sans);
font-size: 11px;
color: var(--lc-muted);
text-align: center;
padding: 12px 0 20px;
margin: 0;
}
.lx-cms {
font-family: var(--lc-sans);
font-size: 14px;
color: var(--lc-ink-soft);
line-height: 1.6;
margin: 20px 0;
}
/* ═══════════════════════════════════════════════════════════════
TABLET (sm breakpoint, 576px+)
═══════════════════════════════════════════════════════════════ */
@media (min-width: 576px) {
.lx-hero__title {
font-size: 30px;
}
.lx-ball {
width: 52px;
height: 52px;
font-size: 19px;
}
.lx-checker__inputs {
gap: 8px;
}
.lx-checker__input {
height: 56px;
font-size: 20px;
}
.lx-next__jackpot {
font-size: 48px;
}
.lx-stat-grid {
grid-template-columns: repeat(3, 1fr);
}
.lx-freq__grid {
grid-template-columns: repeat(10, 1fr);
gap: 6px;
}
.lx-provincial__grid {
grid-template-columns: 1fr 1fr;
}
.lx-payout__winners-label { display: inline; }
}
/* ═══════════════════════════════════════════════════════════════
DESKTOP (md breakpoint, 768px+)
═══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
body .container .lx-hero,
body .container .lx-checker,
body .container .lx-next,
body .container .lx-glance,
body .container .lx-freq,
body .container .lx-payouts,
body .container .lx-provincial,
body .container .lx-history,
body .container .lx-about {
margin-bottom: 28px;
}
.lx-hero {
padding: 24px 0;
}
.lx-hero__title {
font-size: 36px;
}
.lx-ball {
width: 56px;
height: 56px;
font-size: 21px;
}
.lx-ball__sep {
height: 32px;
margin: 0 6px;
}
/* Checker: 2-column grid */
.lx-checker {
padding: 28px 32px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
align-items: start;
}
.lx-checker__head {
margin-bottom: 0;
}
.lx-checker__title {
font-size: 26px;
}
.lx-checker__inputs {
grid-template-columns: repeat(6, 1fr);
gap: 8px;
}
/* Next draw: horizontal */
.lx-next {
padding: 20px 24px;
}
.lx-next__body {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.lx-next__jackpot {
font-size: 56px;
}
.lx-next__meta {
padding-top: 0;
border-top: none;
border-left: 1px solid var(--lc-line);
padding-left: 20px;
flex-direction: column;
align-items: flex-end;
text-align: right;
gap: 6px;
}
/* Stats: wider */
.lx-stat-grid {
grid-template-columns: repeat(6, 1fr);
gap: 12px;
}
.lx-stat {
padding: 16px 18px;
}
.lx-stat__value {
font-size: 24px;
}
/* Frequency grid: full row */
.lx-freq__grid {
grid-template-columns: repeat(13, 1fr);
gap: 5px;
}
.lx-freq__cell {
min-height: 48px;
}
.lx-freq__cell-num { font-size: 14px; }
/* Payouts: bigger type */
.lx-payout__row {
padding: 16px 20px;
min-height: 60px;
grid-template-columns: 1.5fr 1fr 1fr auto;
}
.lx-payout__match { font-size: 15px; }
.lx-payout__prize { font-size: 18px; }
.lx-payout__breakdown {
grid-template-columns: repeat(5, 1fr);
padding: 6px 20px 16px;
}
/* Provincial grid */
.lx-provincial__grid {
grid-template-columns: repeat(3, 1fr);
}
/* History: wider draw rows */
.lx-history__list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 8px;
}
.lx-history__picker {
max-width: 400px;
}
/* About: 2-column */
.lx-about__grid {
grid-template-columns: 1fr 1fr;
gap: 30px;
}
.lx-about__title {
font-size: 26px;
}
/* Section titles bigger on desktop */
.lx-glance__title,
.lx-freq__title,
.lx-payouts__title,
.lx-provincial__title,
.lx-history__title {
font-size: 26px;
}
}
/* ═══════════════════════════════════════════════════════════════
LARGE DESKTOP (lg, 992px+)
═══════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
.lx-history__list {
grid-template-columns: repeat(3, 1fr);
}
}
/* =============================================================
Ever Won page — mobile-first warm aesthetic
Append to app/assets/stylesheets/lotcan/redesign.css
Prefix: .ew- (ever-won) to keep it distinct from .lc- and .lx-
============================================================= */
/* ── HEADER ─────────────────────────────────────────────────── */
.ew-head {
padding: 18px 0 4px;
}
.ew-head__eyebrow {
font-family: var(--lc-sans);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--lc-muted);
margin-bottom: 6px;
}
.ew-head__title {
font-family: var(--lc-display);
font-size: 28px;
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.5px;
color: var(--lc-ink);
margin: 0 0 8px;
}
.ew-head__sub {
font-family: var(--lc-sans);
font-size: 14px;
color: var(--lc-ink-soft);
line-height: 1.5;
margin: 0 0 16px;
max-width: 620px;
}
/* ── SEARCH FORM CARD ───────────────────────────────────────── */
.ew-form-card {
background: var(--lc-ink);
color: var(--lc-cream);
border-radius: var(--lc-r-md);
padding: 18px 18px 16px;
margin-bottom: 20px;
}
.ew-form__label {
font-family: var(--lc-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(250, 246, 239, 0.7);
margin-bottom: 10px;
}
.ew-form__hint {
margin-left: 6px;
font-weight: 400;
text-transform: none;
letter-spacing: 0.02em;
color: rgba(250, 246, 239, 0.45);
}
.ew-form__inputs {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 6px;
margin-bottom: 12px;
}
.ew-form__input {
height: 50px;
background: rgba(250, 246, 239, 0.08);
border: 1.5px solid rgba(250, 246, 239, 0.2);
border-radius: var(--lc-r-sm);
color: var(--lc-cream);
font-family: var(--lc-sans);
font-size: 18px;
font-weight: 600;
text-align: center;
-moz-appearance: textfield;
appearance: textfield;
-webkit-appearance: none;
transition: border-color var(--lc-ease), background var(--lc-ease);
min-width: 0;
}
.ew-form__input::-webkit-outer-spin-button,
.ew-form__input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.ew-form__input::placeholder {
color: rgba(250, 246, 239, 0.3);
font-weight: 400;
}
.ew-form__input:focus {
outline: none;
background: rgba(250, 246, 239, 0.15);
border-color: var(--lc-gold);
}
.ew-form__submit {
width: 100%;
height: 50px;
background: var(--lc-gold);
color: var(--lc-ink);
border: none;
border-radius: var(--lc-r-sm);
font-family: var(--lc-sans);
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: background var(--lc-ease), transform 0.08s ease;
}
.ew-form__submit:hover { background: #c99761; }
.ew-form__submit:active { transform: scale(0.98); }
.ew-form__reset {
display: inline-block;
margin-top: 12px;
font-family: var(--lc-sans);
font-size: 13px;
color: rgba(250, 246, 239, 0.7);
text-decoration: underline;
text-underline-offset: 2px;
}
.ew-form__reset:hover { color: var(--lc-cream); text-decoration: underline; }
/* ── SUMMARY HEADLINE ───────────────────────────────────────── */
.ew-summary {
padding: 20px 20px 18px;
border-radius: var(--lc-r-md);
margin-bottom: 16px;
}
.ew-summary--win {
background: var(--lc-forest);
color: var(--lc-cream);
}
.ew-summary--miss {
background: var(--lc-cream-2);
border: 1px solid var(--lc-line);
color: var(--lc-ink);
}
.ew-summary__eyebrow {
font-family: var(--lc-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
opacity: 0.75;
margin-bottom: 8px;
}
.ew-summary__headline {
font-family: var(--lc-display);
font-size: 28px;
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.5px;
margin: 0 0 8px;
}
.ew-summary--win .ew-summary__headline { color: var(--lc-cream); }
.ew-summary--miss .ew-summary__headline { color: var(--lc-ink); }
.ew-summary__sub {
font-family: var(--lc-sans);
font-size: 14px;
line-height: 1.5;
margin: 0;
opacity: 0.85;
}
.ew-summary__sub strong {
opacity: 1;
font-weight: 600;
}
.ew-miss-actions {
display: flex;
flex-wrap: wrap;
gap: 14px;
margin-top: 12px;
}
.ew-miss-actions__link {
font-family: var(--lc-sans);
font-size: 13px;
font-weight: 600;
color: var(--lc-red);
text-decoration: none;
}
.ew-miss-actions__link:hover { color: var(--lc-red-dark); text-decoration: underline; }
/* ── BEST MATCH SPOTLIGHT ───────────────────────────────────── */
.ew-best {
background: var(--lc-gold);
color: var(--lc-ink);
border-radius: var(--lc-r-md);
padding: 18px 20px;
margin-bottom: 20px;
text-align: center;
}
.ew-best__label {
font-family: var(--lc-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: rgba(28, 25, 23, 0.7);
margin-bottom: 4px;
}
.ew-best__prize {
font-family: var(--lc-display);
font-size: 36px;
font-weight: 700;
letter-spacing: -0.5px;
color: var(--lc-ink);
line-height: 1;
margin-bottom: 4px;
}
.ew-best__meta {
font-family: var(--lc-sans);
font-size: 13px;
color: rgba(28, 25, 23, 0.8);
}
/* ── MATCH LIST ─────────────────────────────────────────────── */
.ew-matches__title {
font-family: var(--lc-display);
font-size: 22px;
font-weight: 700;
color: var(--lc-ink);
margin: 0 0 12px;
}
.ew-matches__list {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 20px;
}
.ew-match {
background: #FFFFFF;
border: 1px solid var(--lc-line);
border-radius: var(--lc-r-md);
padding: 14px 16px;
text-decoration: none;
color: var(--lc-ink);
display: flex;
flex-direction: column;
gap: 10px;
transition: border-color var(--lc-ease), transform var(--lc-ease);
}
.ew-match:hover {
border-color: var(--lc-line-med);
transform: translateY(-1px);
text-decoration: none;
color: var(--lc-ink);
}
.ew-match__date {
font-family: var(--lc-sans);
font-size: 13px;
font-weight: 600;
color: var(--lc-ink-soft);
}
.ew-match__numbers {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.ew-match__ball {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
background: var(--lc-cream);
border: 1px solid var(--lc-line-med);
border-radius: 50%;
font-family: var(--lc-sans);
font-size: 13px;
font-weight: 600;
color: var(--lc-muted);
transition: background var(--lc-ease);
}
.ew-match__ball--bonus {
background: rgba(193, 39, 45, 0.08);
border-color: rgba(193, 39, 45, 0.3);
}
.ew-match__ball--hit {
background: var(--lc-forest);
border-color: var(--lc-forest);
color: var(--lc-cream);
}
.ew-match__ball--hit.ew-match__ball--bonus {
background: var(--lc-red);
border-color: var(--lc-red);
color: var(--lc-cream);
}
.ew-match__result {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 10px;
padding-top: 8px;
border-top: 1px solid var(--lc-line);
}
.ew-match__level {
font-family: var(--lc-sans);
font-size: 13px;
font-weight: 600;
color: var(--lc-ink);
}
.ew-match__prize {
font-family: var(--lc-display);
font-size: 18px;
font-weight: 700;
color: var(--lc-ink);
}
.ew-match__prize--none {
font-size: 13px;
font-weight: 500;
color: var(--lc-muted);
font-family: var(--lc-sans);
}
/* ── EMPTY STATE ────────────────────────────────────────────── */
.ew-empty {
background: var(--lc-cream-2);
border: 1px dashed var(--lc-line);
border-radius: var(--lc-r-md);
padding: 32px 24px;
text-align: center;
color: var(--lc-ink-soft);
margin-bottom: 20px;
}
.ew-empty__icon {
color: var(--lc-ink);
margin-bottom: 12px;
}
.ew-empty__title {
font-family: var(--lc-display);
font-size: 20px;
font-weight: 700;
color: var(--lc-ink);
margin: 0 0 12px;
}
.ew-empty__text {
font-family: var(--lc-sans);
font-size: 14px;
line-height: 1.5;
margin: 0 auto 10px;
max-width: 440px;
}
.ew-empty__text:last-child { margin-bottom: 0; }
.ew-empty__text strong { color: var(--lc-ink); font-weight: 600; }
/* ── RELATED LINKS ──────────────────────────────────────────── */
.ew-related {
display: flex;
flex-wrap: wrap;
gap: 10px 16px;
padding: 20px 0;
border-top: 1px solid var(--lc-line);
margin-top: 20px;
}
.ew-related__link {
font-family: var(--lc-sans);
font-size: 13px;
font-weight: 500;
color: var(--lc-red);
text-decoration: none;
}
.ew-related__link:hover { color: var(--lc-red-dark); text-decoration: underline; }
/* ═══════════════════════════════════════════════════════════════
TABLET
═══════════════════════════════════════════════════════════════ */
@media (min-width: 576px) {
.ew-head__title { font-size: 32px; }
.ew-form-card {
padding: 22px 24px 20px;
}
.ew-form__inputs { gap: 8px; }
.ew-form__input {
height: 56px;
font-size: 20px;
}
.ew-summary__headline { font-size: 32px; }
.ew-best__prize { font-size: 44px; }
}
/* ═══════════════════════════════════════════════════════════════
DESKTOP
═══════════════════════════════════════════════════════════════ */
@media (min-width: 768px) {
.ew-head { padding: 24px 0 8px; }
.ew-head__title { font-size: 36px; }
.ew-head__sub { font-size: 15px; }
/* Match rows become 3-column on desktop */
.ew-match {
flex-direction: row;
align-items: center;
gap: 16px;
padding: 14px 20px;
}
.ew-match__date {
flex-shrink: 0;
min-width: 140px;
}
.ew-match__numbers {
flex: 1;
gap: 6px;
}
.ew-match__result {
flex-direction: column;
padding-top: 0;
border-top: none;
border-left: 1px solid var(--lc-line);
padding-left: 16px;
min-width: 130px;
align-items: flex-end;
text-align: right;
gap: 2px;
}
.ew-match__ball { width: 36px; height: 36px; font-size: 14px; }
.ew-summary {
padding: 28px 32px;
}
.ew-summary__headline { font-size: 36px; }
.ew-best {
padding: 24px 28px;
}
.ew-best__prize { font-size: 52px; }
.ew-empty {
padding: 48px 32px;
}
}
/* ═══════════════════════════════════════════════════════════════
DAILY GRAND — additive rules only, no overrides to shared .lx-
Append to the bottom of redesign.css
═══════════════════════════════════════════════════════════════ */
/* Green Grand Number ball — hero and history rows */
.lx-ball--bonus-green {
background: var(--lc-forest);
border-color: var(--lc-forest);
color: #FFFFFF;
}
/* Grand Number mini-ball in draw history list */
.lx-history__mini-ball--grand {
background: var(--lc-forest);
border-color: var(--lc-forest);
color: #FFFFFF;
}
/* Prize payout "for life" annotation */
.lx-payout__prize-note {
font-family: var(--lc-sans);
font-size: 11px;
font-weight: 500;
color: var(--lc-muted);
margin-left: 4px;
}
/* Grand Number ball in ever_won match rows */
.ew-match__ball--grand {
background: rgba(45, 106, 79, 0.10);
border-color: rgba(45, 106, 79, 0.35);
color: var(--lc-forest);
}
.ew-match__ball--hit.ew-match__ball--grand {
background: var(--lc-forest);
border-color: var(--lc-forest);
color: #FFFFFF;
}
/* ============================================================
QUICK PICK PAGES — .qp- prefix
Add this block to app/assets/stylesheets/lotcan/redesign.css
============================================================ */
/* ── Hub index page ─────────────────────────────────────────── */
.qp-hub {
max-width: 720px;
margin: 0 auto;
padding: 32px 16px 64px;
}
.qp-hub__header {
text-align: center;
margin-bottom: 36px;
}
.qp-hub__eyebrow {
font-family: var(--lc-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--lc-red);
margin: 0 0 8px;
}
.qp-hub__title {
font-family: var(--lc-display);
font-size: 36px;
font-weight: 700;
color: var(--lc-ink);
margin: 0 0 12px;
line-height: 1.1;
}
.qp-hub__subtitle {
font-family: var(--lc-sans);
font-size: 15px;
color: var(--lc-ink-soft);
margin: 0;
max-width: 480px;
margin-inline: auto;
line-height: 1.6;
}
@media (min-width: 576px) {
.qp-hub__title { font-size: 44px; }
.qp-hub { padding: 40px 24px 80px; }
}
/* Lottery grid */
.qp-hub__grid {
display: flex;
flex-direction: column;
gap: 12px;
}
.qp-card {
display: flex;
align-items: center;
gap: 16px;
background: var(--lc-cream-2);
border: 1px solid var(--lc-line);
border-radius: var(--lc-r-md);
padding: 16px;
text-decoration: none;
color: inherit;
transition: border-color var(--lc-ease), box-shadow var(--lc-ease), background var(--lc-ease);
min-height: 44px;
}
.qp-card:hover,
.qp-card:focus-visible {
border-color: var(--lc-line-med);
background: var(--lc-cream-3);
box-shadow: 0 2px 12px rgba(28,25,23,0.06);
text-decoration: none;
color: inherit;
}
.qp-card__logo-wrap {
flex-shrink: 0;
width: 64px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
.qp-card__logo {
max-width: 64px;
max-height: 44px;
object-fit: contain;
}
.qp-card__body {
flex: 1;
min-width: 0;
}
.qp-card__name {
font-family: var(--lc-display);
font-size: 17px;
font-weight: 700;
color: var(--lc-ink);
margin: 0 0 2px;
line-height: 1.2;
}
.qp-card__desc {
font-family: var(--lc-sans);
font-size: 13px;
color: var(--lc-muted);
margin: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.qp-card__cta {
flex-shrink: 0;
display: flex;
align-items: center;
gap: 6px;
}
.qp-card__cta-label {
font-family: var(--lc-sans);
font-size: 13px;
font-weight: 600;
color: var(--lc-red);
display: none;
}
.qp-card__arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--lc-red);
color: #fff;
font-size: 14px;
flex-shrink: 0;
}
@media (min-width: 576px) {
.qp-card__cta-label { display: inline; }
.qp-card__logo-wrap { width: 80px; }
.qp-card__logo { max-width: 80px; }
}
/* ── Individual quick pick page ─────────────────────────────── */
.qp-page {
max-width: 640px;
margin: 0 auto;
padding: 32px 16px 64px;
}
/* Breadcrumb */
.qp-breadcrumb {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 4px;
font-family: var(--lc-sans);
font-size: 13px;
color: var(--lc-muted);
margin-bottom: 28px;
}
.qp-breadcrumb a {
color: var(--lc-muted);
text-decoration: none;
}
.qp-breadcrumb a:hover { color: var(--lc-ink-soft); text-decoration: underline; }
.qp-breadcrumb__sep {
color: var(--lc-line-med);
}
/* Header */
.qp-page__header {
text-align: center;
margin-bottom: 32px;
}
.qp-page__logo {
max-height: 52px;
max-width: 160px;
object-fit: contain;
margin-bottom: 12px;
}
.qp-page__title {
font-family: var(--lc-display);
font-size: 28px;
font-weight: 700;
color: var(--lc-ink);
margin: 0;
line-height: 1.2;
}
@media (min-width: 576px) {
.qp-page { padding: 40px 24px 80px; }
.qp-page__title { font-size: 34px; }
}
/* Result card */
.qp-result {
background: var(--lc-cream-2);
border: 1px solid var(--lc-line);
border-radius: var(--lc-r-md);
overflow: hidden;
margin-bottom: 20px;
}
.qp-result__label {
font-family: var(--lc-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--lc-muted);
padding: 14px 20px 0;
}
.qp-result__balls {
display: flex;
flex-wrap: wrap;
gap: 8px;
padding: 12px 20px 20px;
justify-content: center;
}
/* Reuse lx-ball styles — same visual language */
.qp-ball {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
font-family: var(--lc-display);
font-size: 17px;
font-weight: 700;
border: 2px solid var(--lc-ink);
color: var(--lc-ink);
background: transparent;
flex-shrink: 0;
transition: transform 0.15s ease;
}
.qp-ball--animate {
animation: qp-pop 0.3s ease backwards;
}
.qp-result__balls .qp-ball:nth-child(1) { animation-delay: 0.05s; }
.qp-result__balls .qp-ball:nth-child(2) { animation-delay: 0.10s; }
.qp-result__balls .qp-ball:nth-child(3) { animation-delay: 0.15s; }
.qp-result__balls .qp-ball:nth-child(4) { animation-delay: 0.20s; }
.qp-result__balls .qp-ball:nth-child(5) { animation-delay: 0.25s; }
.qp-result__balls .qp-ball:nth-child(6) { animation-delay: 0.30s; }
.qp-result__balls .qp-ball:nth-child(7) { animation-delay: 0.35s; }
@keyframes qp-pop {
from { transform: scale(0.5); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}
@media (min-width: 576px) {
.qp-ball { width: 56px; height: 56px; font-size: 20px; }
}
/* Pick Again button */
.qp-again {
display: flex;
justify-content: center;
padding: 0 20px 20px;
}
.qp-again__btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--lc-red);
color: #fff;
font-family: var(--lc-sans);
font-size: 15px;
font-weight: 600;
border: none;
border-radius: var(--lc-r-sm);
padding: 12px 28px;
min-height: 44px;
cursor: pointer;
text-decoration: none;
transition: background var(--lc-ease);
}
.qp-again__btn:hover,
.qp-again__btn:focus-visible {
background: var(--lc-red-dark);
color: #fff;
text-decoration: none;
}
/* Ever Won section */
.qp-everwon {
background: var(--lc-ink);
border-radius: var(--lc-r-md);
padding: 24px 20px;
color: #fff;
}
.qp-everwon__eyebrow {
font-family: var(--lc-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--lc-gold);
margin: 0 0 6px;
}
.qp-everwon__title {
font-family: var(--lc-display);
font-size: 22px;
font-weight: 700;
color: #fff;
margin: 0 0 6px;
}
.qp-everwon__desc {
font-family: var(--lc-sans);
font-size: 14px;
color: rgba(255,255,255,0.65);
margin: 0 0 20px;
}
.qp-everwon__inputs {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 16px;
}
.qp-everwon__input {
width: 52px;
height: 52px;
text-align: center;
font-family: var(--lc-display);
font-size: 18px;
font-weight: 700;
color: var(--lc-ink);
background: #fff;
border: 2px solid transparent;
border-radius: var(--lc-r-sm);
padding: 0;
/* iOS zoom prevention */
font-size: 16px;
transition: border-color var(--lc-ease);
}
.qp-everwon__input:focus {
outline: none;
border-color: var(--lc-gold);
}
.qp-everwon__submit {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--lc-gold);
color: var(--lc-ink);
font-family: var(--lc-sans);
font-size: 15px;
font-weight: 600;
border: none;
border-radius: var(--lc-r-sm);
padding: 12px 24px;
min-height: 44px;
cursor: pointer;
transition: background var(--lc-ease);
width: 100%;
justify-content: center;
}
.qp-everwon__submit:hover,
.qp-everwon__submit:focus-visible {
background: #c49460;
}
/* ── Logo on lottery show page hero ─────────────────────────── */
/* Add to the lx- section of redesign.css alongside other lx-hero rules */
.lx-hero__logo {
display: block;
max-height: 48px;
max-width: 160px;
object-fit: contain;
margin: 0 auto 12px;
}
@media (min-width: 768px) {
.lx-hero__logo {
max-height: 56px;
max-width: 200px;
}
}
/* ── Logo on homepage result cards ──────────────────────────── */
/* Add to the lc- section of redesign.css alongside other lc-result rules */
.lc-result__logo {
display: block;
max-height: 36px;
max-width: 120px;
object-fit: contain;
margin-bottom: 6px;
}
/* ============================================================
PICKX DISPLAY STYLE — .px- prefix
Add this block to app/assets/stylesheets/lotcan/redesign.css
============================================================ */
/* ── Page layout ────────────────────────────────────────────── */
.px-layout {
display: flex;
flex-direction: column;
gap: 0;
padding: 0 0 64px;
}
@media (min-width: 768px) {
.px-layout {
flex-direction: row;
align-items: flex-start;
gap: 32px;
}
.px-layout__main { flex: 1; min-width: 0; }
.px-layout__side { width: 280px; flex-shrink: 0; }
}
/* ── Hero ───────────────────────────────────────────────────── */
.px-hero {
padding: 28px 0 24px;
text-align: center;
}
.px-hero__logo {
display: block;
max-height: 52px;
max-width: 180px;
object-fit: contain;
margin: 0 auto 14px;
}
.px-hero__eyebrow {
font-family: var(--lc-sans);
font-size: 13px;
color: var(--lc-muted);
margin-bottom: 6px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.px-hero__latest-pill {
display: inline-block;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
background: var(--lc-forest);
color: #fff;
border-radius: 20px;
padding: 2px 8px;
}
.px-hero__title {
font-family: var(--lc-display);
font-size: 26px;
font-weight: 700;
color: var(--lc-ink);
margin: 0 0 20px;
line-height: 1.15;
}
@media (min-width: 576px) {
.px-hero__title { font-size: 32px; }
}
.px-hero__balls {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-bottom: 20px;
}
.px-buy-btn {
display: inline-flex;
align-items: center;
background: var(--lc-red);
color: #fff;
font-family: var(--lc-sans);
font-size: 15px;
font-weight: 600;
border-radius: var(--lc-r-sm);
padding: 12px 28px;
min-height: 44px;
text-decoration: none;
transition: background var(--lc-ease);
}
.px-buy-btn:hover,
.px-buy-btn:focus-visible {
background: var(--lc-red-dark);
color: #fff;
text-decoration: none;
}
/* ── Sections ───────────────────────────────────────────────── */
.px-section {
border-top: 1px solid var(--lc-line);
padding: 24px 0;
}
.px-section__title {
font-family: var(--lc-display);
font-size: 20px;
font-weight: 700;
color: var(--lc-ink);
margin: 0 0 16px;
}
/* ── Prize payouts ──────────────────────────────────────────── */
.px-prizes {
background: var(--lc-cream-2);
border: 1px solid var(--lc-line);
border-radius: var(--lc-r-md);
overflow: hidden;
}
.px-prizes__head {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 0 16px;
padding: 10px 16px;
background: var(--lc-cream-3);
border-bottom: 1px solid var(--lc-line);
font-family: var(--lc-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--lc-muted);
}
.px-prizes__head span:nth-child(2),
.px-prizes__head span:nth-child(3) {
text-align: right;
}
.px-prize-row {
display: grid;
grid-template-columns: 1fr auto auto;
gap: 0 16px;
align-items: center;
padding: 12px 16px;
border-bottom: 1px solid var(--lc-line);
font-family: var(--lc-sans);
font-size: 14px;
}
.px-prize-row:last-child { border-bottom: none; }
.px-prize-row__match {
color: var(--lc-ink-soft);
font-weight: 500;
}
.px-prize-row__winners {
color: var(--lc-muted);
font-size: 13px;
text-align: right;
}
.px-prize-row__prize {
font-family: var(--lc-display);
font-weight: 700;
color: var(--lc-ink);
text-align: right;
white-space: nowrap;
}
.px-prizes--compact .px-prize-row {
padding: 8px 12px;
font-size: 13px;
}
.px-prizes--compact .px-prizes__head {
padding: 6px 12px;
}
/* ── Draw history ───────────────────────────────────────────── */
.px-history {
border: 1px solid var(--lc-line);
border-radius: var(--lc-r-md);
overflow: hidden;
}
.px-history__head {
display: grid;
grid-template-columns: 120px 1fr;
gap: 0 12px;
padding: 10px 16px;
background: var(--lc-cream-3);
border-bottom: 1px solid var(--lc-line);
font-family: var(--lc-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--lc-muted);
}
.px-history__row {
display: grid;
grid-template-columns: 120px 1fr;
gap: 0 12px;
align-items: center;
padding: 10px 16px;
border-bottom: 1px solid var(--lc-line);
background: var(--lc-cream-2);
}
.px-history__payouts {
padding: 0 16px 12px;
background: var(--lc-cream-2);
border-bottom: 1px solid var(--lc-line);
}
.px-history__row:last-of-type,
.px-history__payouts:last-child { border-bottom: none; }
.px-history__date {
font-family: var(--lc-sans);
font-size: 13px;
color: var(--lc-muted);
}
.px-history__date--short { display: inline; }
.px-history__date--long { display: none; }
@media (min-width: 576px) {
.px-history__date--short { display: none; }
.px-history__date--long { display: inline; }
.px-history__head,
.px-history__row { grid-template-columns: 160px 1fr; }
}
.px-history__numbers {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
/* Small ball variant for history rows */
.lx-ball--sm {
width: 30px;
height: 30px;
font-size: 12px;
}
@media (min-width: 576px) {
.lx-ball--sm { width: 34px; height: 34px; font-size: 13px; }
}
/* ── Regions ────────────────────────────────────────────────── */
.px-regions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.px-region-pill {
font-family: var(--lc-sans);
font-size: 13px;
font-weight: 500;
color: var(--lc-ink-soft);
background: var(--lc-cream-2);
border: 1px solid var(--lc-line);
border-radius: 20px;
padding: 6px 14px;
text-decoration: none;
transition: border-color var(--lc-ease), background var(--lc-ease);
min-height: 44px;
display: inline-flex;
align-items: center;
}
.px-region-pill:hover,
.px-region-pill:focus-visible {
border-color: var(--lc-line-med);
background: var(--lc-cream-3);
text-decoration: none;
color: var(--lc-ink);
}
/* ── Video ──────────────────────────────────────────────────── */
.px-video__wrap {
position: relative;
padding-bottom: 56.25%;
height: 0;
border-radius: var(--lc-r-md);
overflow: hidden;
}
.px-video__wrap iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
/* ── CMS content ────────────────────────────────────────────── */
.px-cms { font-family: var(--lc-sans); font-size: 15px; color: var(--lc-ink-soft); }
.px-dev-note {
font-family: var(--lc-sans);
font-size: 12px;
color: var(--lc-muted);
border: 1px dashed var(--lc-line-med);
border-radius: var(--lc-r-sm);
padding: 8px 12px;
}
/* ── Sidebar cards ──────────────────────────────────────────── */
.px-side-card {
background: var(--lc-cream-2);
border: 1px solid var(--lc-line);
border-radius: var(--lc-r-md);
padding: 20px;
margin-bottom: 16px;
}
.px-side-card__title {
font-family: var(--lc-display);
font-size: 17px;
font-weight: 700;
color: var(--lc-ink);
margin: 0 0 14px;
}
.px-side-latest {
display: flex;
flex-direction: column;
gap: 2px;
padding: 12px;
background: var(--lc-cream-3);
border-radius: var(--lc-r-sm);
text-decoration: none;
margin-bottom: 16px;
transition: background var(--lc-ease);
}
.px-side-latest:hover { background: #ede5d8; text-decoration: none; }
.px-side-latest__label {
font-family: var(--lc-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--lc-muted);
}
.px-side-latest__date {
font-family: var(--lc-display);
font-size: 16px;
font-weight: 700;
color: var(--lc-ink);
}
/* Month picker form */
.px-month-form__label {
display: block;
font-family: var(--lc-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--lc-muted);
margin-bottom: 8px;
}
.px-month-form__row {
display: flex;
gap: 6px;
align-items: center;
flex-wrap: wrap;
}
.px-select {
font-family: var(--lc-sans);
font-size: 14px;
color: var(--lc-ink);
background: #fff;
border: 1px solid var(--lc-line-med);
border-radius: var(--lc-r-sm);
padding: 8px 10px;
min-height: 44px;
flex: 1;
}
.px-month-form__btn {
font-family: var(--lc-sans);
font-size: 14px;
font-weight: 600;
color: #fff;
background: var(--lc-red);
border: none;
border-radius: var(--lc-r-sm);
padding: 8px 16px;
min-height: 44px;
cursor: pointer;
transition: background var(--lc-ease);
}
.px-month-form__btn:hover { background: var(--lc-red-dark); }
.px-side-meta {
font-family: var(--lc-sans);
font-size: 12px;
color: var(--lc-muted);
margin: 12px 0 0;
}
.px-side-ad { margin-bottom: 16px; }
/* ── Frequency chart picker — override Bootstrap inside .px-freq-picker ── */
.px-side-card--freq { margin-top: 16px; }
/* Strip the default card/well/panel chrome from the partial */
.px-freq-picker .card,
.px-freq-picker .well,
.px-freq-picker .panel {
background: transparent;
border: none;
box-shadow: none;
padding: 0;
margin: 0;
}
.px-freq-picker .card-header,
.px-freq-picker .card-body,
.px-freq-picker .panel-heading,
.px-freq-picker .panel-body {
background: transparent;
border: none;
padding: 0;
margin: 0;
}
/* Labels inside the picker */
.px-freq-picker label,
.px-freq-picker .control-label {
display: block;
font-family: var(--lc-sans);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--lc-muted);
margin: 12px 0 6px;
}
.px-freq-picker label:first-child,
.px-freq-picker .control-label:first-child {
margin-top: 0;
}
/* Selects inside the picker */
.px-freq-picker select {
width: 100%;
font-family: var(--lc-sans);
font-size: 14px;
color: var(--lc-ink);
background: #fff;
border: 1px solid var(--lc-line-med);
border-radius: var(--lc-r-sm);
padding: 8px 10px;
min-height: 44px;
margin-bottom: 8px;
appearance: auto;
}
/* Go button inside the picker */
.px-freq-picker input[type="submit"],
.px-freq-picker button[type="submit"],
.px-freq-picker .btn {
font-family: var(--lc-sans);
font-size: 14px;
font-weight: 600;
color: #fff;
background: var(--lc-red);
border: none;
border-radius: var(--lc-r-sm);
padding: 8px 20px;
min-height: 44px;
cursor: pointer;
transition: background var(--lc-ease);
width: 100%;
}
.px-freq-picker input[type="submit"]:hover,
.px-freq-picker button[type="submit"]:hover,
.px-freq-picker .btn:hover {
background: var(--lc-red-dark);
}
/* ============================================================
REGIONS PAGES — .rg- prefix
Add this block to app/assets/stylesheets/lotcan/redesign.css
============================================================ */
/* ── Page header ────────────────────────────────────────────── */
.rg-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 24px 0 20px;
flex-wrap: wrap;
}
.rg-header__title {
font-family: var(--lc-display);
font-size: 28px;
font-weight: 700;
color: var(--lc-ink);
margin: 0;
line-height: 1.15;
}
@media (min-width: 576px) {
.rg-header__title { font-size: 34px; }
}
.rg-header__buy {
display: inline-flex;
align-items: center;
background: var(--lc-red);
color: #fff;
font-family: var(--lc-sans);
font-size: 14px;
font-weight: 600;
border-radius: var(--lc-r-sm);
padding: 10px 20px;
min-height: 44px;
text-decoration: none;
white-space: nowrap;
transition: background var(--lc-ease);
flex-shrink: 0;
}
.rg-header__buy:hover,
.rg-header__buy:focus-visible {
background: var(--lc-red-dark);
color: #fff;
text-decoration: none;
}
/* ── Lottery list ───────────────────────────────────────────── */
.rg-list {
display: flex;
flex-direction: column;
gap: 10px;
padding-bottom: 48px;
}
.rg-card {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
gap: 10px 12px;
align-items: center;
background: var(--lc-cream-2);
border: 1px solid var(--lc-line);
border-radius: var(--lc-r-md);
padding: 14px 16px;
text-decoration: none;
color: inherit;
transition: border-color var(--lc-ease), background var(--lc-ease), box-shadow var(--lc-ease);
}
.rg-card:hover,
.rg-card:focus-visible {
border-color: var(--lc-line-med);
background: var(--lc-cream-3);
box-shadow: 0 2px 10px rgba(28,25,23,0.06);
text-decoration: none;
color: inherit;
}
/* Identity: logo + name + date — spans full width on row 1 */
.rg-card__identity {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: 12px;
}
.rg-card__logo {
max-height: 36px;
max-width: 80px;
object-fit: contain;
flex-shrink: 0;
}
.rg-card__name {
font-family: var(--lc-display);
font-size: 16px;
font-weight: 700;
color: var(--lc-ink);
line-height: 1.2;
}
.rg-card__date {
font-family: var(--lc-sans);
font-size: 12px;
color: var(--lc-muted);
margin-top: 2px;
}
/* Balls row */
.rg-card__balls {
display: flex;
flex-wrap: wrap;
gap: 4px;
align-items: center;
}
/* Jackpot — right-aligned on same row as balls */
.rg-card__jackpot {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
}
.rg-card__jackpot-label {
font-family: var(--lc-sans);
font-size: 11px;
color: var(--lc-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
}
.rg-card__jackpot-amount {
font-family: var(--lc-display);
font-size: 16px;
font-weight: 700;
color: var(--lc-forest);
}
/* Arrow — sits at the end of the jackpot column or balls row */
.rg-card__arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--lc-red);
color: #fff;
font-size: 13px;
flex-shrink: 0;
align-self: center;
}
/* On wider screens: two-column within the card */
@media (min-width: 576px) {
.rg-card {
grid-template-columns: 1fr auto auto;
grid-template-rows: auto auto;
}
.rg-card__identity {
grid-column: 1 / -1;
}
.rg-card__balls { grid-column: 1; }
.rg-card__jackpot { grid-column: 2; }
.rg-card__arrow { grid-column: 3; align-self: center; }
}
/* ============================================================
POKER DISPLAY STYLE — .pk- prefix
Add this block to app/assets/stylesheets/lotcan/redesign.css
============================================================ */
/* ── Playing cards in hero ──────────────────────────────────── */
.pk-cards {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 6px;
margin-bottom: 20px;
}
.pk-card {
border-radius: 4px;
box-shadow: 0 2px 6px rgba(28,25,23,0.15);
transition: transform var(--lc-ease);
}
.pk-card:hover { transform: translateY(-3px); }
.pk-card--sm {
border-radius: 3px;
box-shadow: 0 1px 4px rgba(28,25,23,0.12);
}
.pk-cards__sep {
font-family: var(--lc-sans);
font-size: 18px;
font-weight: 600;
color: var(--lc-muted);
padding: 0 4px;
}
/* ── Monthly history rows ───────────────────────────────────── */
.pk-history {
border: 1px solid var(--lc-line);
border-radius: var(--lc-r-md);
overflow: hidden;
}
.pk-history__row {
padding: 14px 16px;
border-bottom: 1px solid var(--lc-line);
background: var(--lc-cream-2);
}
.pk-history__row:last-child { border-bottom: none; }
.pk-history__date {
font-family: var(--lc-sans);
font-size: 13px;
color: var(--lc-muted);
display: block;
margin-bottom: 10px;
}
.pk-history__date--short { display: inline; }
.pk-history__date--long { display: none; }
@media (min-width: 576px) {
.pk-history__date--short { display: none; }
.pk-history__date--long { display: inline; }
}
.pk-history__cards {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
margin-bottom: 12px;
}
.pk-history__prizes { margin-top: 4px; }