/*
* LES ÎLES CARAÏBES MAGAZINE — CASINO EDITORIAL STYLESHEET
* Language: French (fr-FR)
* Design: European Editorial / Print Journalism
* Source: Google Stitch pass, 2026-07-27. Rolled skin: light · bricolage/inter ·
* normal-geometric · cobalt+crimson+gold · rounded-12 · flat-border ·
* editorial-rows · thin-line · eyebrow-label
* Brief: docs/stitch-prompt.md — ONE Stitch pass per site (stitch-css-redesign rule 5).
* Subsequent CSS changes are made by hand in this file.
*
* Required in (not @imported — keeps render-blocking predictable):
*
*
*
*/
:root {
/* LOCKED PALETTE — do not add a fourth hue */
--bg: #FFFFFF; /* page */
--bg-alt: #F6F3ED; /* warm sand */
--bg-sink: #EFEAE1; /* deepest neutral */
--ink: #10203C; /* body text */
--ink-muted: #55607A; /* secondary text */
--border: #E0DACE; /* 1px rules */
--primary: #0B4FA8; /* French cobalt */
--primary-dark: #073A7E;
--primary-tint: #E7EEF9; /* pale blue fills */
--accent: #D4303D; /* French red */
--accent-dark: #AE2029;
--gold: #C08A22; /* rank borders/ratings */
--gold-light: #F0D07A;
--bonus-from: #FCD34D; /* bonus gradient start */
--bonus-to: #F59E0B; /* bonus gradient end */
--bonus-ink: #78350F; /* bonus text */
--success: #17724E; /* verified ticks */
/* TYPOGRAPHY TOKENS */
--font-display: 'Bricolage Grotesque', sans-serif;
--font-body: 'Inter', sans-serif;
--h1-size: clamp(2rem, 5vw, 3.25rem);
--h2-size: clamp(1.5rem, 3vw, 2.1rem);
--body-size: 1.0625rem;
--body-lh: 1.7;
}
/* --- BASE & UTILITIES --- */
*, *::before, *::after { box-sizing: border-box; }
body {
margin: 0;
padding: 0;
background-color: var(--bg);
color: var(--ink);
font-family: var(--font-body);
font-size: var(--body-size);
line-height: var(--body-lh);
-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 600;
color: var(--ink);
margin-top: 0;
letter-spacing: -0.015em;
line-height: 1.1;
text-transform: none; /* Sentence case enforced */
}
h1 { font-size: var(--h1-size); font-weight: 700; }
h2 { font-size: var(--h2-size); }
p { max-width: 68ch; margin-bottom: 1.5rem; }
.container {
max-width: 1180px;
margin: 0 auto;
padding: 0 24px;
}
/* MAGAZINE EYEBROW KICKER */
.kicker {
display: block;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--accent);
margin-bottom: 0.75rem;
}
/* --- NAV --- */
.nav {
position: sticky;
top: 0;
height: 64px;
background: var(--bg);
border-bottom: 1px solid var(--border);
z-index: 1000;
display: flex;
align-items: center;
}
.nav-wordmark {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.25rem;
color: var(--ink);
text-decoration: none;
}
.nav-links {
display: flex;
gap: 2rem;
margin-left: auto;
}
.nav-link {
font-weight: 500;
color: var(--ink-muted);
text-decoration: none;
font-size: 0.9375rem;
transition: color 0.2s;
position: relative;
}
.nav-link:hover {
color: var(--primary);
}
.nav-link:hover::after {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 100%;
height: 2px;
background: var(--accent);
}
/* PATCH 1 (post-Stitch): hamburger must be hidden on desktop.
Stitch only declared it inside the ≤980px query, so it rendered sitewide. */
.hamburger {
display: none;
align-items: center;
justify-content: center;
background: none;
cursor: pointer;
}
/* --- HERO --- */
.hero {
background-color: var(--bg-alt);
padding: 60px 0;
border-bottom: 1px solid var(--border);
}
.hero-content {
max-width: 720px;
}
.hero-standfirst {
font-size: 1.125rem;
color: var(--ink-muted);
margin: 1.5rem 0 2rem;
}
.cta-primary {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 48px;
padding: 0 32px;
background: linear-gradient(to bottom, var(--accent), var(--accent-dark));
color: #FFFFFF;
font-weight: 600;
text-decoration: none;
border-radius: 12px;
border: none;
cursor: pointer;
transition: opacity 0.2s;
}
.cta-primary:hover {
opacity: 0.9;
}
/* --- TOPLIST --- */
.section-toplist {
padding: 64px 0;
background: var(--bg);
}
.toplist-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border: 1px solid var(--border);
border-radius: 12px;
overflow: hidden;
}
.toplist-table thead {
background: var(--bg-sink);
}
.toplist-table th {
padding: 16px;
text-align: left;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--ink-muted);
border-bottom: 1px solid var(--border);
}
.toplist-table tbody tr {
background: var(--bg);
transition: background 0.2s;
}
.toplist-table tbody tr:hover {
background: var(--primary-tint);
}
.toplist-table td {
padding: 20px 16px;
border-bottom: 1px solid var(--border);
vertical-align: middle;
}
.toplist-table tr:last-child td {
border-bottom: none;
}
.rank-cell {
font-family: var(--font-display);
font-weight: 700;
font-size: 1.25rem;
color: var(--primary);
width: 60px;
}
.logo-cell img {
display: block;
max-width: 120px;
max-height: 60px;
object-fit: contain;
background: #FFF;
border: 1px solid var(--border);
border-radius: 8px;
padding: 8px;
}
.note-cell {
font-family: var(--font-display);
font-weight: 700;
color: var(--gold);
}
.highlight-row {
background-color: var(--bg-alt) !important;
}
/* PATCH 2 (post-Stitch): border-left on a is not painted by browsers.
The gold rank-1 marker has to live on the row's first cell. */
.highlight-row td:first-child {
border-left: 4px solid var(--gold);
}
.highlight-row .rank-cell {
font-size: 1.5rem;
}
/* PATCH 3 (post-Stitch): Stitch scoped .bonus-highlight and .toplist-cta to the
≤768px card only, leaving both unstyled in the desktop table. Desktop styles here;
the mobile query below overrides them for the card. */
.bonus-highlight {
display: inline-block;
padding: 8px 14px;
background: linear-gradient(to right, var(--bonus-from), var(--bonus-to));
color: var(--bonus-ink);
font-family: var(--font-display);
font-weight: 700;
font-size: 0.9375rem;
border-radius: 10px;
text-align: center;
/* Deliberately NOT pill-shaped, no border, no shadow, no hover — this is a
highlighted value, not an affordance (mobile-toplist-card §"Bonus is not a button"). */
}
.toplist-cta {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0 20px;
background: linear-gradient(to bottom, var(--accent), var(--accent-dark));
color: #FFF;
font-weight: 600;
border-radius: 12px;
text-decoration: none;
white-space: nowrap;
}
/* PATCH 5 (post-screenshot): classes the builder emits that Stitch never saw.
Caught by mobile-screenshot-verify at 390×844 — every one of these rendered
as unstyled default markup. */
.brand-cell { text-align: left; }
.brand-name {
display: block;
font-family: var(--font-display);
font-weight: 600;
font-size: 1rem;
color: var(--ink);
text-decoration: none;
}
.brand-name:hover { color: var(--primary); }
.brand-licence {
display: block;
font-size: 0.75rem;
color: var(--ink-muted);
margin-top: 2px;
}
.bonus-extra {
display: block;
font-size: 0.8125rem;
color: var(--ink-muted);
margin-top: 4px;
}
.metric-value {
display: block;
font-family: var(--font-display);
font-weight: 600;
color: var(--ink);
}
.metric-label {
display: block;
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-muted);
}
.review-link {
display: block;
margin-top: 8px;
font-size: 0.8125rem;
color: var(--primary);
text-decoration: none;
border-bottom: 1px solid var(--border);
}
.review-link:hover { color: var(--accent); }
.logo-initials {
display: inline-flex;
align-items: center;
justify-content: center;
width: 88px;
height: 48px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 8px;
font-family: var(--font-display);
font-weight: 700;
color: var(--primary);
}
.content-block { padding: 56px 0; }
.content-block:nth-of-type(even) { background: var(--bg-alt); }
.toplist-lead { color: var(--ink-muted); margin-bottom: 24px; }
.toplist-note { font-size: 0.8125rem; color: var(--ink-muted); margin-top: 16px; }
/* --- COMPARISON TABLE --- */
.comparison-wrapper {
overflow-x: auto;
position: relative;
margin: 40px 0;
-webkit-mask-image: linear-gradient(to right, black 95%, transparent 100%);
mask-image: linear-gradient(to right, black 95%, transparent 100%);
}
.comparison-table {
width: 100%;
border-collapse: collapse;
min-width: 800px;
}
.comparison-table th {
background: var(--bg-sink);
padding: 16px;
border: 1px solid var(--border);
}
.comparison-table td {
padding: 16px;
border: 1px solid var(--border);
background: var(--bg);
}
.comparison-table tr th:first-child,
.comparison-table tr td:first-child {
position: sticky;
left: 0;
z-index: 10;
}
/* --- REVIEWS --- */
.review-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 24px;
padding: 64px 0;
background: var(--bg-alt);
}
.review-card {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 12px;
padding: 24px;
}
.review-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 20px;
}
.verdict-score {
font-family: var(--font-display);
font-weight: 700;
color: var(--gold);
font-size: 1.25rem;
}
.pros-list, .cons-list {
list-style: none;
padding: 0;
font-size: 0.9375rem;
}
.pros-list li::before {
content: '✓';
color: var(--success);
margin-right: 8px;
font-weight: bold;
}
.cons-list li::before {
content: '–';
color: var(--ink-muted);
margin-right: 8px;
}
/* PATCH 8 (post-fingerprint): per-brand review cards. 2 of 3 competitors ship
them on the hub (verslemploi 16 H3 blocks, znaki 4) so they are a MUST under
the ≥2-competitors rule. Icon chips + payout bars also close the image-parity
gap (we were at 15 images against a 55–70 target). */
.review-section { background: var(--bg-alt); }
.review-card { display: flex; flex-direction: column; gap: 16px; }
.rc-id { display: flex; align-items: center; gap: 12px; }
.rc-rank {
font-family: var(--font-display);
font-weight: 700;
font-size: 0.875rem;
color: #FFF;
background: var(--primary);
border-radius: 999px;
padding: 3px 10px;
flex-shrink: 0;
}
.rc-id img { width: 84px; height: 45px; object-fit: contain; flex-shrink: 0; }
.rc-name { margin: 0; font-size: 1.05rem; }
.rc-licence {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 0.75rem;
color: var(--ink-muted);
}
.rc-licence .ico { width: 14px; height: 14px; color: var(--gold); }
.rc-bonus {
display: block;
font-family: var(--font-display);
font-weight: 700;
font-size: 1rem;
color: var(--bonus-ink);
background: linear-gradient(to right, var(--bonus-from), var(--bonus-to));
border-radius: 10px;
padding: 10px 14px;
text-align: center;
}
.rc-bonus .bonus-extra { color: var(--bonus-ink); opacity: .8; }
.card-flag {
display: block;
font-family: var(--font-body);
font-weight: 500;
font-size: 0.6875rem;
text-transform: uppercase;
letter-spacing: .05em;
opacity: .75;
margin-top: 3px;
}
.rc-block .kicker { margin-bottom: 8px; }
.op-shot { margin: 0; }
.op-shot img {
width: 100%;
height: 190px;
object-fit: cover;
object-position: top center;
border: 1px solid var(--border);
border-radius: 10px;
display: block;
}
.op-shot figcaption {
font-size: 0.6875rem;
color: var(--ink-muted);
margin-top: 6px;
}
/* icon chips */
.icon-row { display: flex; flex-wrap: wrap; gap: 6px; }
.icon-chip {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 0.75rem;
color: var(--ink-muted);
background: var(--bg);
border: 1px solid var(--border);
border-radius: 999px;
padding: 4px 10px 4px 7px;
}
.icon-chip .ico { width: 15px; height: 15px; color: var(--primary); }
/* payout data-visual */
.bar-set { display: flex; flex-direction: column; gap: 7px; }
.bar-row {
display: grid;
grid-template-columns: 7.5rem 1fr auto;
align-items: center;
gap: 10px;
font-size: 0.8125rem;
}
.bar-label { color: var(--ink-muted); }
.bar-track {
height: 8px;
background: var(--bg-sink);
border-radius: 999px;
overflow: hidden;
}
.bar-fill {
display: block;
height: 100%;
background: linear-gradient(to right, var(--primary), var(--primary-dark));
border-radius: 999px;
}
.bar-value {
font-family: var(--font-display);
font-weight: 600;
color: var(--ink);
white-space: nowrap;
}
.rc-foot { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }
.rc-foot .toplist-cta { width: 100%; }
.rc-foot .review-link { text-align: center; border-bottom: none; }
/* --- FAQ --- */
.faq-section {
padding: 64px 0;
}
.faq-item {
border-bottom: 1px solid var(--border);
}
.faq-question {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 24px 0;
background: none;
border: none;
cursor: pointer;
text-align: left;
font-family: var(--font-display);
font-weight: 600;
font-size: 1.125rem;
color: var(--ink);
}
.faq-chevron {
color: var(--primary);
font-size: 1.5rem;
transition: transform 0.2s;
}
.faq-answer {
padding-bottom: 24px;
color: var(--ink-muted);
}
/* --- AUTHOR BOX --- */
.author-box {
background-color: var(--bg-alt);
padding: 48px 0;
}
.author-flex {
display: flex;
gap: 24px;
align-items: center;
}
.author-portrait {
width: 72px;
height: 72px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
}
.author-name {
font-family: var(--font-display);
font-weight: 600;
font-size: 1.25rem;
margin: 0;
}
.author-bio {
color: var(--ink-muted);
max-width: 60ch;
margin-top: 8px;
}
/* --- FOOTER --- */
.footer {
background-color: var(--bg-sink);
padding: 64px 0 32px;
}
.footer-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 32px;
margin-bottom: 48px;
}
.footer-link {
display: block;
color: var(--ink-muted);
text-decoration: none;
font-size: 0.9375rem;
margin-bottom: 12px;
}
.footer-link:hover {
color: var(--primary);
}
.footer-bottom {
border-top: 1px solid var(--border);
padding-top: 24px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.8125rem;
color: var(--ink-muted);
}
/* PATCH 4 (post-Stitch): floating CTA is a ≤768px element. Stitch declared it only
inside the mobile query, so on desktop it rendered as an unstyled inline block. */
.floating-cta { display: none; }
/* --- BREAKPOINT 1 (≤980px) --- */
@media (max-width: 980px) {
.nav-links { display: none; }
.hamburger {
display: flex;
width: 44px;
height: 44px;
margin-left: auto;
border: 1px solid var(--border);
border-radius: 8px;
}
}
/* --- BREAKPOINT 2 (≤768px) --- */
@media (max-width: 768px) {
/* PATCH 6 (post-screenshot): the hero pushed the first toplist card off the
mobile fold, which affiliate-list-placement forbids. Tighten the hero and
clamp the standfirst so row 1 sits at the fold edge. */
.hero { padding: 24px 0 20px; }
.hero h1 { font-size: 1.85rem; line-height: 1.12; }
.hero-standfirst {
max-width: 100%;
font-size: 0.9375rem;
line-height: 1.5;
margin: 10px 0 16px;
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
}
.hero .cta-primary { width: 100%; }
.section-toplist { padding: 24px 0 40px; }
.section-toplist h2 { font-size: 1.35rem; }
.toplist-lead {
font-size: 0.9375rem;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.content-block { padding: 40px 0; }
/* Toplist card reflow — same markup, no fork */
.toplist-table thead { display: none; }
.toplist-table, .toplist-table tbody, .toplist-table tr, .toplist-table td {
display: block;
width: 100%;
border: none;
}
.toplist-table tbody tr {
background: var(--bg);
border: 1px solid var(--border);
border-radius: 12px;
padding: 16px;
margin-bottom: 16px;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.toplist-table td { padding: 0; border: none; text-align: center; }
/* PATCH 2 cont.: the gold marker becomes a full top border on the card */
.highlight-row td:first-child { border-left: none; }
.toplist-table tbody tr.highlight-row { border-top: 4px solid var(--gold); }
/* PATCH 7 (post-screenshot): the reflow's `display:block; width:100%` on every
td beat `width:auto`, so the rank rendered as a full-width blue bar instead
of a chip. Needs an explicit inline-flex + auto margins. */
.rank-cell {
display: inline-flex !important;
align-items: center;
justify-content: center;
width: auto !important;
min-width: 34px;
margin: 0 auto;
background: var(--primary);
color: #FFF;
padding: 4px 12px;
border-radius: 999px;
font-size: 0.875rem;
}
.brand-cell { text-align: center; }
.logo-cell img {
max-width: 180px;
margin: 0 auto;
}
.bonus-highlight {
display: block;
width: 100%;
padding: 12px;
font-size: 1.05rem;
}
.toplist-cta {
display: flex;
width: 100%;
min-height: 48px;
padding: 0;
border-radius: 12px;
}
.review-grid { grid-template-columns: 1fr; }
.footer-grid { grid-template-columns: 1fr; }
/* Floating mobile CTA */
.floating-cta {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 72px;
background: var(--bg);
border-top: 1px solid var(--border);
padding: 12px 24px;
box-shadow: 0 -2px 10px rgba(16, 32, 60, 0.05);
z-index: 1100;
display: flex;
}
.floating-cta .cta-primary { width: 100%; }
}
/* PATCH 9: the magazine's own Caribbean library used inside the silo — the one
visual asset no competitor can match (all three use stock/brand images only). */
.mag-shot { margin: 0 0 24px; max-width: 420px; }
.mag-shot--wide { max-width: 643px; }
.mag-shot img {
width: 100%; height: auto; display: block;
border: 1px solid var(--border); border-radius: 12px;
}
.mag-shot figcaption {
font-size: 0.75rem; color: var(--ink-muted); margin-top: 8px;
border-left: 2px solid var(--gold); padding-left: 10px;
}
/* PATCH 10: the 64px sticky nav covers any element jumped to by anchor
(visible in the review-card screenshot). Every id target needs clearance. */
[id] { scroll-margin-top: 80px; }
/* PATCH 11: card brand name + logo link to the review spoke (fingerprint §6).
They must not read as generic body links. */
.rc-name a { color: var(--ink); text-decoration: none; }
.rc-name a:hover { color: var(--primary); }
.rc-logo-link { display: inline-flex; flex-shrink: 0; }
/* PATCH 12: hero byline (author + Last Updated), trust pages, author surface.
Operator standing rule: hero carries author AND last-updated, never a bare headshot. */
.byline {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
margin: 18px 0 22px; padding: 12px 14px;
background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
}
.byline-img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.byline-text { display: flex; flex-direction: column; line-height: 1.3; }
.byline-name {
font-family: var(--font-display); font-weight: 600; font-size: 0.9375rem;
color: var(--ink); text-decoration: none;
}
.byline-name:hover { color: var(--primary); }
.byline-role { font-size: 0.75rem; color: var(--ink-muted); }
.byline-updated {
margin-left: auto; display: flex; flex-direction: column;
align-items: flex-end; line-height: 1.3;
}
.byline-label {
font-size: 0.6875rem; text-transform: uppercase; letter-spacing: .06em;
color: var(--ink-muted);
}
.byline-updated time {
font-family: var(--font-display); font-weight: 600;
font-size: 0.875rem; color: var(--ink);
}
@media (max-width: 560px) {
.byline-updated { margin-left: 0; width: 100%; align-items: flex-start;
border-top: 1px solid var(--border); padding-top: 8px; }
}
.hero--trust .hero-content, .hero--author .container { max-width: 820px; }
.hero--author .author-hero { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.author-portrait--lg { width: 132px; height: 132px; }
.author-role { font-family: var(--font-display); font-weight: 600; margin: 4px 0 2px; }
.author-meta { font-size: 0.875rem; color: var(--ink-muted); margin: 0 0 10px; }
.author-tagline {
font-family: var(--font-display); font-size: 1.05rem; color: var(--ink);
border-left: 3px solid var(--gold); padding-left: 12px; margin: 0;
}
/* responsible-gambling emergency callout — must read as the most important block */
.rg-callout {
background: var(--primary-tint); border: 1px solid var(--primary);
border-left: 5px solid var(--accent); border-radius: 12px;
padding: 16px 18px; font-size: 1.0625rem; max-width: none;
}
.rg-callout strong { font-family: var(--font-display); font-size: 1.15rem; color: var(--primary-dark); }
.stat-strip { display: flex; flex-wrap: wrap; gap: 14px; }
.stat {
flex: 1 1 140px; background: var(--bg); border: 1px solid var(--border);
border-radius: 12px; padding: 14px 16px;
}
.stat-n {
display: block; font-family: var(--font-display); font-weight: 700;
font-size: 1.6rem; color: var(--primary);
}
.stat-l { display: block; font-size: 0.8125rem; color: var(--ink-muted); margin-top: 2px; }
.cred-list { padding-left: 1.1rem; max-width: 68ch; }
.cred-list li { margin-bottom: 8px; }
.author-card p { font-size: 0.9375rem; color: var(--ink-muted); }
/* PATCH 13: logo wordmark replaces the text brand in the nav. */
.nav-wordmark { display: inline-flex; align-items: center; }
.nav-wordmark img { height: 40px; width: auto; display: block; }
@media (max-width: 560px) { .nav-wordmark img { height: 32px; } }
/* PATCH 14: the hero byline pushed the first toplist card to 798px of an 844px
fold — technically above it, practically invisible. Compact the byline and
clamp the standfirst harder on mobile (affiliate-list-placement). */
@media (max-width: 768px) {
.hero-standfirst { -webkit-line-clamp: 3; margin: 8px 0 12px; }
.byline { margin: 12px 0 14px; padding: 8px 10px; gap: 9px; }
.byline-img { width: 36px; height: 36px; }
.byline-name { font-size: 0.875rem; }
.byline-role { font-size: 0.6875rem; }
.byline-updated {
margin-left: auto; width: auto; flex-direction: row; align-items: baseline;
gap: 6px; border-top: none; padding-top: 0;
}
.byline-label { font-size: 0.625rem; }
.byline-updated time { font-size: 0.8125rem; }
.hero .cta-primary { min-height: 44px; }
}
/* PATCH 15: grouped navbar (8 money pages no longer fit a flat list).
/ — works with no JS, keyboard-operable, opens on hover too.
The summary deliberately does NOT carry .nav-link: that class has its own
::after underline, which collided with the chevron's ::after and painted a
stray diagonal. The chevron is now its own element. */
.nav-drop { position: relative; }
.nav-drop-summary {
list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
font-weight: 500; font-size: 0.9375rem; color: var(--ink-muted);
padding: 4px 0; transition: color .2s;
}
.nav-drop-summary::-webkit-details-marker { display: none; }
.nav-drop-summary:hover, .nav-drop[open] > .nav-drop-summary { color: var(--primary); }
.nav-chev {
width: 6px; height: 6px; flex: none; margin-top: -3px;
border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
transform: rotate(45deg); transition: transform .15s;
}
.nav-drop[open] .nav-chev, .nav-drop:hover .nav-chev {
transform: rotate(-135deg); margin-top: 2px;
}
.nav-drop-menu {
display: none;
position: absolute; top: calc(100% + 14px); left: -14px; min-width: 238px;
background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
padding: 8px; box-shadow: 0 10px 28px rgba(16, 32, 60, .12); z-index: 1200;
}
.nav-drop[open] > .nav-drop-menu, .nav-drop:hover > .nav-drop-menu { display: block; }
/* invisible bridge so the menu survives the pointer crossing the gap */
.nav-drop:hover::before {
content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 18px;
}
.nav-drop-link {
display: block; padding: 9px 12px; border-radius: 8px; font-size: 0.9375rem;
color: var(--ink); text-decoration: none; white-space: nowrap;
}
.nav-drop-link:hover { background: var(--primary-tint); color: var(--primary-dark); }
/* mobile: groups stack open in the slide-out panel rather than nesting menus */
@media (max-width: 980px) {
.nav-drop, .nav-drop-menu { position: static; }
.nav-drop-menu {
display: block; border: none; box-shadow: none; padding: 0 0 8px 12px; min-width: 0;
}
.nav-chev { display: none; }
.nav-drop:hover::before { content: none; }
}
/* PATCH 16 — mobile fixes.
(a) Body scrolled horizontally: 390px viewport vs 422px scrollWidth. Cause was
.review-card at 398px — grid items default to min-width:auto and the payout
bar's fixed 7.5rem label column refused to shrink. */
.review-grid { min-width: 0; }
.review-grid > *, .review-card, .rc-block, .bar-set, .bar-row { min-width: 0; }
.rc-id > div, .brand-cell, .icon-chip { min-width: 0; }
.rc-name, .rc-licence, .bar-label, .bar-value { overflow-wrap: anywhere; }
@media (max-width: 768px) {
.bar-row { grid-template-columns: 5.5rem 1fr auto; gap: 8px; font-size: 0.75rem; }
.bar-value { font-size: 0.75rem; }
.icon-chip { font-size: 0.6875rem; padding: 3px 8px 3px 6px; }
.icon-chip .ico { width: 13px; height: 13px; }
.op-shot img { height: 150px; }
}
@media (max-width: 400px) {
.bar-row { grid-template-columns: 4.6rem 1fr auto; }
}
/* (b) A near-white wordmark vanishes on the white logo chip (Rolletto is 85%
near-white). Those get a dark chip instead — class set at build time. */
.logo-on-dark {
background: var(--ink) !important;
border-color: var(--ink) !important;
}
/* (c) Wide comparison tables: keep them scrolling inside their own container
(never the body) and tell the reader they scroll. */
.comparison-wrapper { max-width: 100%; -webkit-overflow-scrolling: touch; }
.comparison-wrapper::-webkit-scrollbar { height: 6px; }
.comparison-wrapper::-webkit-scrollbar-thumb {
background: var(--border); border-radius: 999px;
}
@media (max-width: 768px) {
/* Scale the scroll threshold to column count via :has(). A flat min-width made
3-col tables scroll needlessly; max-content stopped cells wrapping at all and
blew a 3-col table out to 816px. This lets 2–3 cols wrap and fit in 342px,
and only 4+ cols scroll. */
.comparison-table { width: 100%; min-width: 0; font-size: 0.8125rem; table-layout: auto; }
.comparison-table th, .comparison-table td { overflow-wrap: anywhere; hyphens: auto; }
.comparison-table:has(tr > :nth-child(4)) { min-width: 460px; }
.comparison-table:has(tr > :nth-child(5)) { min-width: 580px; }
.comparison-table:has(tr > :nth-child(6)) { min-width: 680px; }
.comparison-table th, .comparison-table td { padding: 10px 12px; }
.comparison-wrapper { position: relative; }
.comparison-wrapper:has(.comparison-table:is(:has(tr > :nth-child(4))))::after {
content: '← faites glisser →';
display: block; text-align: right; font-size: 0.6875rem;
color: var(--ink-muted); padding: 6px 2px 0; position: sticky; left: 0;
}
}
/* (d) Mobile nav panel — the hamburger had no behaviour at all until PATCH 16. */
.hamburger-bars, .hamburger-bars::before, .hamburger-bars::after {
display: block; width: 18px; height: 2px; background: var(--ink);
border-radius: 2px; transition: transform .2s, opacity .2s;
}
.hamburger-bars::before, .hamburger-bars::after { content: ''; position: relative; }
.hamburger-bars::before { top: -6px; }
.hamburger-bars::after { top: 4px; }
body.nav-open .hamburger-bars { background: transparent; }
body.nav-open .hamburger-bars::before { transform: translateY(6px) rotate(45deg); }
body.nav-open .hamburger-bars::after { transform: translateY(-4px) rotate(-45deg); }
.nav-scrim {
position: fixed; inset: 0; background: rgba(16, 32, 60, .45); z-index: 1100;
}
body.nav-open { overflow: hidden; }
@media (max-width: 980px) {
.nav-links {
position: fixed; top: 0; right: 0; bottom: 0; width: min(84vw, 340px);
background: var(--bg); border-left: 1px solid var(--border);
flex-direction: column; align-items: stretch; gap: 0;
padding: 76px 20px 28px; margin: 0; overflow-y: auto;
transform: translateX(100%); transition: transform .22s ease;
z-index: 1150; display: flex;
}
body.nav-open .nav-links { transform: translateX(0); }
.nav-links > .nav-link, .nav-drop-summary {
padding: 12px 4px; border-bottom: 1px solid var(--border);
font-size: 1rem; color: var(--ink);
}
.nav-drop-link { padding: 10px 4px 10px 14px; font-size: 0.9375rem; }
.hamburger { z-index: 1200; position: relative; }
}
/* PATCH 17 — mobile review card + navbar alignment.
(a) .review-header is a space-between flex ROW: .rc-id (rank+logo+name+licence)
against .rc-bonus (the gold badge). At 390px they fight over 342px and the
badge lands on top of the brand name. Stack them, full width each. */
@media (max-width: 768px) {
.review-header {
flex-direction: column;
align-items: stretch;
gap: 14px;
margin-bottom: 16px;
}
.rc-id { gap: 10px; flex-wrap: wrap; }
.rc-id img { width: 72px; height: 38px; }
.rc-name { font-size: 1rem; }
.rc-bonus { width: 100%; font-size: 0.9375rem; padding: 12px 14px; text-align: left; }
.rc-bonus .bonus-extra { display: block; margin-top: 3px; font-size: 0.8125rem; }
.review-card { padding: 18px; gap: 14px; }
}
/* (b) Navbar misalignment: a one-item group renders as a bare
while multi-item groups render as . Two different box
models on the same flex row sit at different heights. Give both the same
line-box. */
.nav-links { align-items: center; }
.nav-links > .nav-link,
.nav-drop > .nav-drop-summary {
display: inline-flex;
align-items: center;
line-height: 1.2;
padding: 6px 0;
margin: 0;
}
.nav-drop { display: flex; align-items: center; }
@media (max-width: 980px) {
.nav-links > .nav-link,
.nav-drop > .nav-drop-summary { padding: 12px 4px; width: 100%; }
.nav-drop { display: block; width: 100%; }
.nav-drop-menu { position: static; box-shadow: none; border: 0; padding: 0 0 6px; }
}
/* PATCH 18 — nav panel stacking + payout label width.
.nav is `position:sticky; z-index:1000`, which makes it a stacking context.
The fixed .nav-links panel is its child, so its z-index:1150 is clamped
INSIDE that context and lost to the scrim's 1100 — the panel rendered dimmed
underneath. Drop the scrim below .nav instead of chasing z-index upward. */
.nav-scrim { z-index: 900; }
body.nav-open .floating-cta { display: none !important; }
@media (max-width: 980px) {
.nav-links { background: var(--bg); box-shadow: -8px 0 24px rgba(16, 32, 60, .12); }
}
/* Payout bar: 4.6rem clipped "Carte bancaire" and "Skrill / Neteller" onto two
lines. 6.4rem holds the longest label on one line and still leaves the bar
~120px, which reads fine. */
@media (max-width: 768px) {
.bar-row { grid-template-columns: 6.4rem 1fr auto; align-items: center; }
.bar-label { white-space: nowrap; }
}
@media (max-width: 400px) {
.bar-row { grid-template-columns: 6.4rem 1fr auto; }
}
/* PATCH 19 — desktop hero card (#1 brand + CTA).
Hidden below 980px on purpose: the mobile fold is already tight (the hero
once pushed the first toplist card off a 844px screen) and mobile is to
stay as-is. Desktop only, so the hero becomes a 2-col grid there. */
.hero-card { display: none; }
@media (min-width: 981px) {
.hero-content {
display: grid;
grid-template-columns: minmax(0, 1fr) 330px;
gap: 48px;
align-items: center;
}
.hero-copy { min-width: 0; }
.hero-card {
display: flex;
flex-direction: column;
gap: 14px;
background: var(--bg);
border: 1px solid var(--border);
border-top: 3px solid var(--primary);
border-radius: 14px;
padding: 22px;
box-shadow: 0 12px 32px rgba(16, 32, 60, .10);
}
.hc-flag {
font-family: var(--font-display);
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: var(--primary);
}
.hc-brand { display: flex; align-items: center; gap: 12px; }
.hc-brand img { width: 84px; height: 45px; object-fit: contain; flex-shrink: 0; }
.hc-brand > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hc-name { font-family: var(--font-display); font-size: 1.0625rem; color: var(--ink); }
.hc-licence { font-size: 0.75rem; color: var(--ink-muted); }
.hc-bonus {
display: block;
font-family: var(--font-display);
font-weight: 700;
font-size: 1.0625rem;
color: var(--bonus-ink);
background: linear-gradient(to right, var(--bonus-from), var(--bonus-to));
border-radius: 10px;
padding: 12px 14px;
}
.hc-bonus .bonus-extra {
display: block;
margin-top: 3px;
font-size: 0.8125rem;
font-weight: 500;
opacity: .85;
}
.hc-cta { width: 100%; text-align: center; }
.hc-terms { font-size: 0.6875rem; color: var(--ink-muted); text-align: center; }
}
/* PATCH 20 — hero grid sizing.
.hero-content is capped at 720px, so the 330px card left the copy column ~342px
and the H1 broke over four lines. Widen the hero when it carries a card, and
top-align: centring on a tall hero pushed the card below the fold. */
@media (min-width: 981px) {
.hero-content { max-width: 1120px; align-items: start; }
.hero-card { position: sticky; top: 84px; }
.hero-copy .hero-standfirst { max-width: 62ch; }
}
@media (min-width: 981px) and (max-width: 1180px) {
.hero-content { grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; }
}