/* 1kamas — homepage theme applied to the shop, cart, checkout, login/register, account and 404 pages.
Selectors are prefixed with `html` to win over the per-page inlined CSS.
Remove the tag to undo.
Loaded after 1k-site-base.css (shared components) on these 28 pages only (fr, en, es, pt).
Same language as the homepage (1k-home.css, 1k-compact.css, 1k-offers.css): Inter 400/700,
sentence case, flat white panels (1px line, 8px corners, no shadow), plum #1d072a for brand
moments, flat buttons, 6px chips, no gradients, glows, blur or hover movement. Only colors,
borders, radii, type and spacing change: every heading, text, price, link and form field stays.
Each block is scoped to the structure of one page type, so nothing reaches the site header and
footer or the other page types:
shop grid ........ body > .min-h-[60vh] > main > header / .grid (boutique, shop, tienda, comprar)
404 .............. body > .min-h-[60vh] > main.text-center (404, 404.html, en/404.html)
order result ..... body > .min-h-[60vh] > div.bg-canvas (confirmation, annulée and equivalents)
login / register . body > div.min-h-screen > main.container-1k (connexion-inscription, login, ...)
account .......... body > div.min-h-screen > header / content (profile, account, mi-cuenta, conta)
checkout ......... .k4 (checkout-express, en/checkout)
classic checkout . body > div.min-h-screen > main[max-w-[1280px]] (es/pt finalizar-compra)
The cart page (panier) only shows "Redirection…" and forwards to the checkout. The checkout and
account pages render from the browser (cart in localStorage, account behind a login); they were
checked with a seeded cart and the site's own demo account. */
/* =====================================================================================
Shop grid (boutique): plum page hero, then the homepage "Populaires" offer cards
===================================================================================== */
/* Page header (eyebrow, H1, intro): the same flat plum hero as the homepage and the other main
pages (FAQ, delivery, products) instead of a plain title on the page background. It spans the
content column (the 1140px cap stopped it short of the cards' right edge), 8px corners, 32px
padding (24px / 20px on phones), no shadow */
html body > .min-h-\[60vh\] > main.container-1k > header.max-w-content {
max-width: none; padding: 32px; border-radius: 8px; background: #1e1226; box-shadow: none;
}
@media (max-width: 639px) {
html body > .min-h-\[60vh\] > main.container-1k > header.max-w-content { padding: 24px 20px; }
}
/* Eyebrow: lilac on plum (stays the small uppercase label kept above page titles) */
html body > .min-h-\[60vh\] > main.container-1k > header.max-w-content > .eyebrow { color: rgba(220, 210, 246, .86); }
/* Title: white, homepage hero size, 8px under the eyebrow */
html body > .min-h-\[60vh\] > main.container-1k > header.max-w-content > h1.section-title {
margin: 8px 0 0; color: #fff; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1;
}
/* Intro: white 85%, 15px / 24px on phones (was 14px) and 16px / 26px from 640px like the other
heroes, about 70 characters per line */
html body > .min-h-\[60vh\] > main.container-1k > header.max-w-content > p {
max-width: 42rem; margin-top: 12px; color: rgba(255, 255, 255, .85); font-size: 15px; line-height: 24px;
}
@media (min-width: 640px) {
html body > .min-h-\[60vh\] > main.container-1k > header.max-w-content > p { font-size: 16px; line-height: 26px; }
}
/* Dark mode: same plum with the thin light outline of the other heroes, so its edge shows on the
dark page */
html[data-theme="dark"] body > .min-h-\[60vh\] > main.container-1k > header.max-w-content {
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07);
}
/* Grid: 24px under the intro, 16px gaps on phones and 24px from 640px (homepage card row) */
html body > .min-h-\[60vh\] > main.container-1k > .grid:has(> a.card.hp-lift) { margin-top: 24px; gap: 16px; }
@media (min-width: 640px) {
html body > .min-h-\[60vh\] > main.container-1k > .grid:has(> a.card.hp-lift) { gap: 24px; }
}
/* Card: plum like the homepage game cards (the images have the same plum background), 8px
corners, no shadow, no lift. The 1px border matches the card in light mode and becomes a thin
light outline in dark mode, so the card size never changes on hover */
html body > .min-h-\[60vh\] > main.container-1k > .grid > a.card.hp-lift {
background-color: #24182c; background-image: none; border: 1px solid #24182c; border-radius: 8px;
box-shadow: none; transition: none;
}
html[data-theme="dark"] body > .min-h-\[60vh\] > main.container-1k > .grid > a.card.hp-lift { border-color: rgba(255, 255, 255, .08); }
/* Hover (link card): only the border turns purple, as on the homepage blog cards */
html body > .min-h-\[60vh\] > main.container-1k > .grid > a.card.hp-lift:hover,
html[data-theme="dark"] body > .min-h-\[60vh\] > main.container-1k > .grid > a.card.hp-lift:hover {
border-color: rgb(var(--cta) / .6); box-shadow: none;
}
html body > .min-h-\[60vh\] > main.container-1k > .grid > a.card.hp-lift:focus-visible { outline: 2px solid #b8a4ee; outline-offset: 2px; }
/* Image: 16:9 on plum, whole logo visible (the images are 640x364), no zoom on hover */
html body > .min-h-\[60vh\] > main.container-1k > .grid > a.card.hp-lift > div:first-child { aspect-ratio: 16 / 9; background-color: #24182c; }
html body > .min-h-\[60vh\] > main.container-1k > .grid > a.card.hp-lift > div:first-child > img { object-fit: contain; transition: none; mix-blend-mode: lighten; }
/* "Rupture de stock" badge: flat 6px label, readable on the plum image */
html body > .min-h-\[60vh\] > main.container-1k > .grid > a.card.hp-lift > div:first-child > span {
border-radius: 6px; background: #3a2e49; color: #fff; font-weight: 700; font-size: 12px; line-height: 16px; padding: 3px 8px;
}
/* Text block: game name, title, price, then the button (homepage card order and spacing) */
html body > .min-h-\[60vh\] > main.container-1k > .grid > a.card.hp-lift > div:last-child { gap: 4px; padding: 12px 16px 16px; }
html body > .min-h-\[60vh\] > main.container-1k > .grid > a.card.hp-lift .eyebrow {
color: rgba(228, 225, 234, .86); font-size: 13px; line-height: 18px; font-weight: 400;
}
html body > .min-h-\[60vh\] > main.container-1k > .grid > a.card.hp-lift h3 { color: #fff; font-size: 17px; line-height: 24px; font-weight: 700; }
/* Price: "dès 0,54 €" in bold white, "/ M" in light grey. Balanced wrapping, so a long label
("a partir de € 0,54 / M" on 375px phones) breaks into two even lines instead of leaving "M"
alone on the second line */
html body > .min-h-\[60vh\] > main.container-1k > .grid > a.card.hp-lift > div:last-child > p {
padding-top: 4px; color: rgba(228, 225, 234, .86); font-size: 13px; line-height: 20px; text-wrap: balance;
}
html body > .min-h-\[60vh\] > main.container-1k > .grid > a.card.hp-lift > div:last-child > p > span { color: #fff; font-size: 15px; font-weight: 700; }
/* "Voir le produit" becomes the card's button, as "Acheter des Kamas" on the homepage cards:
lilac, dark text, full width, 8px corners. On hover only its color darkens */
html body > .min-h-\[60vh\] > main.container-1k > .grid > a.card.hp-lift > div:last-child > span:last-child {
display: flex; align-items: center; justify-content: center; width: 100%; height: 36px; margin-top: 8px;
border-radius: 8px; background: #b8a4ee; color: #16151c; font-size: 14px; line-height: 20px; font-weight: 700; transition: none;
}
html body > .min-h-\[60vh\] > main.container-1k > .grid > a.card.hp-lift:hover > div:last-child > span:last-child { background: #a68fe6; color: #16151c; }
/* Phones: 2 cards per row, slightly smaller text (homepage mobile cards) */
@media (max-width: 639px) {
html body > .min-h-\[60vh\] > main.container-1k > .grid > a.card.hp-lift > div:last-child { padding: 8px 12px 12px; gap: 2px; }
html body > .min-h-\[60vh\] > main.container-1k > .grid > a.card.hp-lift h3 { font-size: 15px; line-height: 20px; }
html body > .min-h-\[60vh\] > main.container-1k > .grid > a.card.hp-lift .eyebrow { font-size: 12px; line-height: 16px; }
html body > .min-h-\[60vh\] > main.container-1k > .grid > a.card.hp-lift > div:last-child > p > span { font-size: 14px; }
html body > .min-h-\[60vh\] > main.container-1k > .grid > a.card.hp-lift > div:last-child > span:last-child { height: 32px; font-size: 13px; }
html body > .min-h-\[60vh\] > main.container-1k > .grid > a.card.hp-lift > div:first-child > span { top: 6px; left: 6px; font-size: 11px; padding: 2px 6px; }
}
/* =====================================================================================
404: one white panel, left-aligned, the two buttons flat
===================================================================================== */
/* The page's becomes the panel. Its edges line up with the header logo and the
container edges (24px gutters, 16px on phones; 1160px content); 24px under the header as
on the other inner pages (the base leaves this centered page alone) */
html body > .min-h-\[60vh\] > main.container-1k.text-center {
width: auto; max-width: none; margin: 24px max(24px, calc((100% - 1160px) / 2)) 0;
padding: 32px; text-align: left;
background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: 8px;
}
@media (max-width: 639px) {
html body > .min-h-\[60vh\] > main.container-1k.text-center { margin: 24px 16px 0; padding: 24px 20px; }
}
/* Eyebrow (kept uppercase above the H1), title 32px / 40px, text 15px / 24px, all on the left */
html body > .min-h-\[60vh\] > main.container-1k.text-center > .eyebrow { justify-content: flex-start; }
html body > .min-h-\[60vh\] > main.container-1k.text-center > h1 { margin-top: 8px; font-size: 32px; line-height: 40px; font-weight: 700; }
html body > .min-h-\[60vh\] > main.container-1k.text-center > p:not(.eyebrow) {
max-width: 65ch; margin: 8px 0 0; font-size: 15px; line-height: 24px; color: rgb(var(--body));
}
@media (max-width: 639px) {
html body > .min-h-\[60vh\] > main.container-1k.text-center > h1 { font-size: 26px; line-height: 34px; }
}
/* Buttons: left, wrapping on narrow phones; the base already makes them flat. The bordered
"Voir la boutique" gets 9px vertical padding so it is 44px tall like the filled button
(10px + no border) when the two wrap onto separate lines */
html body > .min-h-\[60vh\] > main.container-1k.text-center > div.flex { justify-content: flex-start; flex-wrap: wrap; margin-top: 24px; }
html body > .min-h-\[60vh\] > main.container-1k.text-center > div.flex > .btn-ghost { padding: 9px 16px; }
/* Dark mode: "Retour à l'accueil" is not a purchase button, so the site's dark-mode purple
becomes the muted dark button (#52467A, white text; hover only lightens it) */
html[data-theme="dark"] body > .min-h-\[60vh\] > main.container-1k.text-center > div.flex > .btn-primary { background-color: #52467a; color: #fff; }
html[data-theme="dark"] body > .min-h-\[60vh\] > main.container-1k.text-center > div.flex > .btn-primary:hover { background-color: #605086; color: #fff; }
/* =====================================================================================
Order result (confirmation / payment not completed)
Title row, then a dark plum status block (like the homepage hero), then white panels.
===================================================================================== */
/* Page title: 32px / 40px bold next to the logo mark (was 20px) */
html body > .min-h-\[60vh\] > div.bg-canvas > .container-1k > div.flex.items-center > h1 { font-size: 32px; line-height: 40px; font-weight: 700; }
@media (max-width: 639px) {
html body > .min-h-\[60vh\] > div.bg-canvas > .container-1k > div.flex.items-center > h1 { font-size: 26px; line-height: 34px; }
}
/* Decorative dashed rule under the title: removed (the homepage has no rules between a title and
its content); the content keeps its own 24px top margin */
html body > .min-h-\[60vh\] > div.bg-canvas > .container-1k > div.border-dashed { display: none; }
/* White panels: flat, 8px corners, 32px padding on desktop and 20px on phones */
html body > .min-h-\[60vh\] > div.bg-canvas > .container-1k section.card { padding: 32px; }
@media (max-width: 639px) {
html body > .min-h-\[60vh\] > div.bg-canvas > .container-1k section.card { padding: 20px; }
}
html body > .min-h-\[60vh\] > div.bg-canvas > .container-1k section.card h2 { font-size: 20px; line-height: 28px; font-weight: 700; }
html body > .min-h-\[60vh\] > div.bg-canvas > .container-1k section.card p.text-sm { font-size: 15px; line-height: 24px; }
/* Status block ("Paiement confirmé" / "Votre paiement n'a pas abouti"): plum brand block, white
title, light text, as the homepage hero */
html body > .min-h-\[60vh\] > div.bg-canvas > .container-1k .space-y-6 > section.card:first-child {
background-color: #1e1226; border-width: 0;
}
html body > .min-h-\[60vh\] > div.bg-canvas > .container-1k .space-y-6 > section.card:first-child h2 { color: #fff; font-size: 24px; line-height: 32px; }
html body > .min-h-\[60vh\] > div.bg-canvas > .container-1k .space-y-6 > section.card:first-child p { color: rgba(228, 225, 234, .86); }
html body > .min-h-\[60vh\] > div.bg-canvas > .container-1k .space-y-6 > section.card:first-child p strong { color: #fff; }
@media (max-width: 639px) {
html body > .min-h-\[60vh\] > div.bg-canvas > .container-1k .space-y-6 > section.card:first-child h2 { font-size: 20px; line-height: 28px; }
}
/* Its icon: quiet 40px square instead of a pastel circle; lilac check, light red cross */
html body > .min-h-\[60vh\] > div.bg-canvas > .container-1k .space-y-6 > section.card:first-child span.h-12 {
width: 40px; height: 40px; border-radius: 8px; background: rgba(255, 255, 255, .08); color: #dcd2f6;
}
html body > .min-h-\[60vh\] > div.bg-canvas > .container-1k .space-y-6 > section.card:first-child span.h-12.text-red-600 { color: #f87171; }
/* Dark mode: the plum block is lifted to a 12% purple tint, as the homepage plum panels */
html[data-theme="dark"] body > .min-h-\[60vh\] > div.bg-canvas > .container-1k .space-y-6 > section.card:first-child {
background-color: color-mix(in srgb, rgb(var(--brand)) 12%, rgb(var(--surface)));
box-shadow: inset 0 0 0 1px rgb(var(--brand) / .18);
}
/* Order total: the amount stays in brand purple, the label in bold ink */
html body > .min-h-\[60vh\] > div.bg-canvas > .container-1k section.card span.text-2xl { font-size: 24px; line-height: 32px; }
/* Review box (aside): 24px padding, grey lock in a quiet 32px square instead of a circle */
html body > .min-h-\[60vh\] > div.bg-canvas > .container-1k aside > div.rounded-btn { border-radius: 8px; padding: 24px; }
html body > .min-h-\[60vh\] > div.bg-canvas > .container-1k aside > div.rounded-btn span.h-9.rounded-full {
width: 32px; height: 32px; border-radius: 8px; background: rgb(var(--ink) / .06);
}
/* "Pourquoi ?" and "Comment finaliser" (hard-coded lavender boxes, unreadable in dark mode):
one white panel, like the homepage intro + FAQ panel. The first box loses its bottom edge, the
second its top edge and the 24px gap, so they read as one panel with 32px between the parts */
html body > .min-h-\[60vh\] > div.bg-canvas > .container-1k section[class*="bg-[#ebe3f9]"] {
background-color: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: 8px; padding: 32px;
}
html body > .min-h-\[60vh\] > div.bg-canvas > .container-1k section[class*="bg-[#ebe3f9]"]:has(+ section[class*="bg-[#ebe3f9]"]) {
border-bottom-width: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-bottom: 16px;
}
html body > .min-h-\[60vh\] > div.bg-canvas > .container-1k section[class*="bg-[#ebe3f9]"] + section[class*="bg-[#ebe3f9]"] {
margin-top: 0; border-top-width: 0; border-top-left-radius: 0; border-top-right-radius: 0; padding-top: 16px;
}
html body > .min-h-\[60vh\] > div.bg-canvas > .container-1k section[class*="bg-[#ebe3f9]"] h2 { font-size: 20px; line-height: 28px; font-weight: 700; }
html body > .min-h-\[60vh\] > div.bg-canvas > .container-1k section[class*="bg-[#ebe3f9]"] :is(p, ul) { font-size: 15px; line-height: 24px; }
@media (max-width: 639px) {
html body > .min-h-\[60vh\] > div.bg-canvas > .container-1k section[class*="bg-[#ebe3f9]"] { padding: 20px; }
html body > .min-h-\[60vh\] > div.bg-canvas > .container-1k section[class*="bg-[#ebe3f9]"]:has(+ section[class*="bg-[#ebe3f9]"]) { padding-bottom: 12px; }
html body > .min-h-\[60vh\] > div.bg-canvas > .container-1k section[class*="bg-[#ebe3f9]"] + section[class*="bg-[#ebe3f9]"] { padding-top: 12px; }
}
/* "Notre service client…" note: small white panel instead of a lavender box */
html body > .min-h-\[60vh\] > div.bg-canvas > .container-1k section[class*="bg-brand-soft/60"] {
background-color: rgb(var(--surface)); border-radius: 8px; padding: 16px 20px;
}
/* "Réessayer le paiement" / "Retour à la boutique": the bordered button had 40px side padding and
12px top/bottom (the filled one gets 16px / 10px from 1k-typo.css), so the pair had different
widths of padding and, stacked on phones, heights of 44px and 50px. Same padding now; 9px
because of its 1px border, so both are 44px tall */
html body > .min-h-\[60vh\] > div.bg-canvas > .container-1k a.btn-ghost { padding: 9px 16px; }
/* "Réessayer le paiement" is a pay button: purchase purple in both themes (the site's brand is a
muted violet on this front); hover only darkens it */
html body > .min-h-\[60vh\] > div.bg-canvas > .container-1k a.btn-primary { background-color: #765eb8; color: #fff; }
html body > .min-h-\[60vh\] > div.bg-canvas > .container-1k a.btn-primary:hover { background-color: #6a51ad; color: #fff; }
/* Review box: the locked Trustpilot block was faded to 60% as a whole, which put its label at
2.4:1. The label is readable again (muted grey on the page grey, 4.9:1); only the five stars stay
faded, and the lock line under it still says why it is locked */
html body > .min-h-\[60vh\] > div.bg-canvas > .container-1k aside > div.rounded-btn > div.grayscale { opacity: 1; }
html body > .min-h-\[60vh\] > div.bg-canvas > .container-1k aside > div.rounded-btn > div.grayscale > div { opacity: .55; }
/* =====================================================================================
Login / register: one white panel, neutral social buttons, segmented tabs
===================================================================================== */
/* Panel: flat, 8px corners (the base already removes the 24px corners and the shadow) */
html body > div.min-h-screen > main.container-1k > div > div.hp-card.max-w-md {
background-image: none; border-color: rgb(var(--line)); border-radius: 8px; box-shadow: none;
}
html body > div.min-h-screen > main.container-1k > div > div.hp-card.max-w-md::before { content: none; }
/* Social buttons: Google is a neutral bordered button like Discord and Steam (was a peach fill);
on hover only the border turns purple, nothing moves */
html body > div.min-h-screen > main.container-1k > div > div.hp-card.max-w-md > div.flex > button {
border: 1px solid rgb(var(--line)); border-radius: 8px; background-color: rgb(var(--surface)); color: rgb(var(--ink)); font-weight: 700;
}
html body > div.min-h-screen > main.container-1k > div > div.hp-card.max-w-md > div.flex > button:hover {
background-color: rgb(var(--surface)); border-color: rgb(var(--brand) / .45);
}
/* "OU" divider: quiet lowercase word, regular weight */
html body > div.min-h-screen > main.container-1k > div > div.hp-card.max-w-md > div.my-5.items-center {
text-transform: lowercase; font-size: 13px; line-height: 18px; font-weight: 400;
}
/* Login / sign-up tabs: segmented control (grey track, the active tab a white segment) instead of
a purple underline. Both states have the same size: only colors change */
html body > div.min-h-screen > main.container-1k > div > div.hp-card.max-w-md > div.grid.grid-cols-2 {
gap: 4px; padding: 4px; border: 0; border-radius: 8px; background: rgb(var(--ink) / .06);
}
html body > div.min-h-screen > main.container-1k > div > div.hp-card.max-w-md > div.grid.grid-cols-2 > button {
margin: 0; padding: 8px 12px; border: 1px solid transparent; border-radius: 6px; background: transparent;
color: rgb(var(--body)); font-size: 15px; line-height: 22px; font-weight: 700;
}
html body > div.min-h-screen > main.container-1k > div > div.hp-card.max-w-md > div.grid.grid-cols-2 > button:hover { color: rgb(var(--ink)); }
html body > div.min-h-screen > main.container-1k > div > div.hp-card.max-w-md > div.grid.grid-cols-2 > button.border-brand {
background: rgb(var(--surface)); border-color: rgb(var(--line)); color: rgb(var(--ink));
box-shadow: 0 1px 2px rgb(16 11 26 / .04);
}
/* Dark mode: the active segment halfway between the site's raised fill and a light 12% white
fill, with white text; the other tab's text halfway between ink and the muted grey */
html[data-theme="dark"] body > div.min-h-screen > main.container-1k > div > div.hp-card.max-w-md > div.grid.grid-cols-2 > button { color: color-mix(in srgb, rgb(var(--ink)) 50%, rgb(var(--muted))); }
html[data-theme="dark"] body > div.min-h-screen > main.container-1k > div > div.hp-card.max-w-md > div.grid.grid-cols-2 > button:hover { color: rgb(var(--ink)); }
html[data-theme="dark"] body > div.min-h-screen > main.container-1k > div > div.hp-card.max-w-md > div.grid.grid-cols-2 > button.border-brand {
background: color-mix(in srgb, rgb(var(--surface-2)) 50%, rgba(255, 255, 255, .12)); border-color: transparent; box-shadow: none; color: #fff;
}
/* Sign-up view, desktop: the "Jusqu'a 5% de bonus" column next to the form, straight on the page (no
block) in the theme's own colours, and the two columns centred together with the card's width each */
html body > div.min-h-screen > main.container-1k > div.grid > aside > h2 {
color: rgb(var(--ink)); font-size: clamp(36px, 3.2vw, 40px); line-height: 1.12; font-weight: 700; letter-spacing: -.01em;
}
html body > div.min-h-screen > main.container-1k > div.grid > aside > h2 > span { color: rgb(var(--brand)); }
html body > div.min-h-screen > main.container-1k > div.grid > aside > p { max-width: 420px; margin-top: 16px; color: rgb(var(--body)); font-size: 17px; line-height: 28px; }
html body > div.min-h-screen > main.container-1k > div.grid > aside > ul { margin-top: 32px; }
html body > div.min-h-screen > main.container-1k > div.grid > aside > ul > li { gap: 14px; color: rgb(var(--ink)); font-size: 15px; line-height: 22px; font-weight: 600; }
html body > div.min-h-screen > main.container-1k > div.grid > aside > ul > li > span { width: 36px; height: 36px; flex: none; border-radius: 999px; background: rgb(var(--brand-soft)); color: rgb(var(--brand)); }
@media (min-width: 1024px) {
html body > div.min-h-screen > main.container-1k > div.grid:has(> aside) { max-width: 960px; margin-left: auto; margin-right: auto; }
}
/* Language button (top right; this page has no site header): the same ghost button as in the
site header and the account header (transparent, 1px line border, ink text, 500) instead of a
grey fill with a lavender hover. Size unchanged (36px tall) */
html body > div.min-h-screen > div.inline-flex.antialiased > div > button {
padding: 0 10px; border: 1px solid rgb(var(--line)); background-color: transparent; color: rgb(var(--ink)); font-weight: 500;
}
html body > div.min-h-screen > div.inline-flex.antialiased > div > button:hover { background-color: rgb(var(--ink) / .06); }
/* Secondary buttons in the form ("Se connecter avec un code par e-mail" and the other views'
bordered buttons): white, 8px corners; on hover only the border turns violet */
html body > div.min-h-screen > main.container-1k > div > div.hp-card.max-w-md form > button.border {
border-radius: 8px; background-color: rgb(var(--surface));
}
html body > div.min-h-screen > main.container-1k > div > div.hp-card.max-w-md form > button.border:hover {
background-color: rgb(var(--surface)); border-color: rgb(var(--brand) / .45);
}
/* "Se connecter" / "Créer mon compte" are not purchase buttons: in dark mode the site's purple
becomes the muted dark button (#52467A, white text; hover only lightens it), as the muted
violet fill in light mode */
html[data-theme="dark"] body > div.min-h-screen > main.container-1k > div > div.hp-card.max-w-md .btn-primary { background-color: #52467a; color: #fff; }
html[data-theme="dark"] body > div.min-h-screen > main.container-1k > div > div.hp-card.max-w-md .btn-primary:hover { background-color: #605086; color: #fff; }
/* =====================================================================================
Account (profile / account / mi-cuenta / conta), signed in
Own header, then a nav panel, the content and a side column, all inside the 1208px container.
===================================================================================== */
/* Same 1208px container as the rest of the site (was up to 2200px wide, 40px gutters) */
html body > div.min-h-screen > header > div[class*="max-w-[2200px]"],
html body > div.min-h-screen > div[class*="max-w-[2200px]"] { max-width: 1208px; padding-left: 24px; padding-right: 24px; }
html body > div.min-h-screen > div[class*="max-w-[2200px]"] { padding-top: 24px; padding-bottom: 48px; }
@media (max-width: 639px) {
html body > div.min-h-screen > header > div[class*="max-w-[2200px]"],
html body > div.min-h-screen > div[class*="max-w-[2200px]"] { padding-left: 16px; padding-right: 16px; }
}
/* Header: flat purple button (no gradient or glow), plum avatar without the gradient */
html body > div.min-h-screen > header .btn-primary,
html body > div.min-h-screen > header .btn-primary:hover { background-image: none; box-shadow: none; transform: none; border-radius: 8px; font-weight: 700; }
html body > div.min-h-screen > header .bg-header-plum { background: #1d072a; }
html body > div.min-h-screen > header span.text-ink.font-medium { font-weight: 700; }
/* Fixes for the site-header rules (1k-header.css) that also reach this white header:
- the avatar has the class .bg-header-plum, so it got the plum bar's 52px bottom padding on
phones (a 36x52 tile): back to a 36px square;
- the language button got the plum bar's white text and white border, so "Français" was
invisible in light mode: ink text with a 1px line border, grey fill on hover */
html body > div.min-h-screen > header span.bg-header-plum { padding-bottom: 0; }
/* Logo: same size as in the site header (36px tile, 10px gap, "1Kamas" 20px bold, tight
tracking) instead of a 40-44px tile and a 20-24px semibold, widely spaced word. Also the
classic checkout header (es/pt finalizar-compra), which has the same markup */
html body > div.min-h-screen > header > div > a:first-child { gap: 10px; }
html body > div.min-h-screen > header > div > a:first-child > img { width: 36px; height: 36px; }
html body > div.min-h-screen > header > div > a:first-child > span {
font-size: 20px; line-height: 20px; font-weight: 700; letter-spacing: -0.01em;
}
/* Dark mode: the plum avatars (header and side column) are lifted like the homepage plum panels,
12% purple over the card color with a thin purple outline; plain plum disappeared into the
dark header and panel */
html[data-theme="dark"] body > div.min-h-screen > header span.bg-header-plum,
html[data-theme="dark"] body > div.min-h-screen > div[class*="max-w-[2200px]"] .bg-header-plum {
background: color-mix(in srgb, rgb(var(--brand)) 12%, rgb(var(--surface)));
box-shadow: inset 0 0 0 1px rgb(var(--brand) / .18);
}
html body > div.min-h-screen > header .inline-flex.antialiased > div > button {
background-color: transparent; border: 1px solid rgb(var(--line)); color: rgb(var(--ink));
}
html body > div.min-h-screen > header .inline-flex.antialiased > div > button:hover { background-color: rgb(var(--ink) / .06); }
/* Breadcrumb: 13px grey trail, the current page in body text */
html body > div.min-h-screen > div[class*="max-w-[2200px]"] > p.text-muted { margin-bottom: 16px; font-size: 13px; line-height: 20px; }
html body > div.min-h-screen > div[class*="max-w-[2200px]"] > p.text-muted > span.text-ink { color: rgb(var(--body)); }
/* Panels (nav, content, side column): flat white, 1px line, 8px corners, no shadow, no purple top
line, no hover reaction (they aren't links) */
html body > div.min-h-screen > div[class*="max-w-[2200px]"] .card.hp-card,
html body > div.min-h-screen > div[class*="max-w-[2200px]"] .card.hp-card:hover {
background-image: none; border-color: rgb(var(--line)); border-radius: 8px; box-shadow: none; transform: none;
}
html body > div.min-h-screen > div[class*="max-w-[2200px]"] .card.hp-card::before { content: none; }
html body > div.min-h-screen > div[class*="max-w-[2200px]"] :is(main, aside.space-y-6) > .card.hp-card { padding: 24px; }
@media (max-width: 639px) {
html body > div.min-h-screen > div[class*="max-w-[2200px]"] :is(main, aside.space-y-6) > .card.hp-card { padding: 20px; }
}
/* Panel titles: 18px bold, sentence case (were 16px medium, one uppercase 12px label) */
html body > div.min-h-screen > div[class*="max-w-[2200px]"] .card :is(h2, h3).font-heading { font-size: 18px; line-height: 26px; font-weight: 700; }
html body > div.min-h-screen > div[class*="max-w-[2200px]"] .card h3.uppercase {
text-transform: none; letter-spacing: normal; color: rgb(var(--ink)); font-size: 18px; line-height: 26px; font-weight: 700;
}
html body > div.min-h-screen > div[class*="max-w-[2200px]"] .card p.mt-1.text-sm.text-muted { font-size: 14px; line-height: 22px; color: rgb(var(--body)); }
/* Two weights: medium text becomes regular, the names that read as headings bold */
html body > div.min-h-screen > div[class*="max-w-[2200px]"] .font-medium { font-weight: 400; }
html body > div.min-h-screen > div[class*="max-w-[2200px]"] .card p.font-heading.text-lg,
html body > div.min-h-screen > div[class*="max-w-[2200px]"] .card p.font-medium.text-ink,
html body > div.min-h-screen > div[class*="max-w-[2200px]"] .card .font-heading:is(.text-2xl, .text-3xl),
html body > div.min-h-screen > div[class*="max-w-[2200px]"] main :is(h2, h3).font-heading,
html body > div.min-h-screen > div[class*="max-w-[2200px]"] main dl > div.border-t { font-weight: 700; }
/* Order detail view: its title above the panels at 20px / 28px */
html body > div.min-h-screen > div[class*="max-w-[2200px]"] main > .space-y-6 > div.flex > div > h2.font-heading { font-size: 20px; line-height: 28px; }
/* ---------- Nav panel ---------- */
/* "Mon espace": sentence-case group label (was uppercase, spaced) */
html body > div.min-h-screen > div[class*="max-w-[2200px]"] aside > .card > p.uppercase {
text-transform: none; letter-spacing: normal; font-size: 13px; line-height: 18px; font-weight: 700;
}
/* Rows: plain text, active row on a light purple tint with bold ink text; hover only tints the
row. The 4px purple bar on the left is removed (the tint and the icon mark the active row) */
html body > div.min-h-screen > div[class*="max-w-[2200px]"] aside > .card > nav > button { border-radius: 6px; transition: none; color: rgb(var(--body)); }
html body > div.min-h-screen > div[class*="max-w-[2200px]"] aside > .card > nav > button:hover { background-color: rgb(var(--ink) / .04); color: rgb(var(--ink)); }
html body > div.min-h-screen > div[class*="max-w-[2200px]"] aside > .card > nav > button.bg-brand-tint,
html body > div.min-h-screen > div[class*="max-w-[2200px]"] aside > .card > nav > button.bg-brand-tint:hover {
background-color: rgb(var(--brand) / .08); color: rgb(var(--ink)); font-weight: 700;
}
html body > div.min-h-screen > div[class*="max-w-[2200px]"] aside > .card > nav > button > span.absolute { display: none; }
/* Row icons: quiet 32px squares, grey; purple on the active row (was a plum gradient tile) */
html body > div.min-h-screen > div[class*="max-w-[2200px]"] aside > .card > nav > button > span.grid {
width: 32px; height: 32px; border-radius: 8px; background: rgb(var(--ink) / .05); color: rgb(var(--muted));
}
html body > div.min-h-screen > div[class*="max-w-[2200px]"] aside > .card > nav > button.bg-brand-tint > span.grid {
background: rgb(var(--brand) / .12); color: rgb(var(--brand));
}
/* Log out: theme red (readable in dark mode, was a near-white tile there) */
html body > div.min-h-screen > div[class*="max-w-[2200px]"] aside > .card > nav > button.text-red-600 { color: rgb(var(--danger)); }
html body > div.min-h-screen > div[class*="max-w-[2200px]"] aside > .card > nav > button.text-red-600:hover { background-color: rgb(var(--danger) / .06); color: rgb(var(--danger)); }
html body > div.min-h-screen > div[class*="max-w-[2200px]"] aside > .card > nav > button.text-red-600 > span.grid {
background: rgb(var(--danger) / .10); color: rgb(var(--danger));
}
/* ---------- Side column ---------- */
/* Avatar: flat plum square, 8px corners */
html body > div.min-h-screen > div[class*="max-w-[2200px]"] .bg-header-plum { background: #1e1226; border-radius: 8px; }
/* "Client vérifié": 6px tag in the theme's success colors (was a bright green pill in dark mode) */
html body > div.min-h-screen > div[class*="max-w-[2200px]"] span.bg-green-100 {
border-radius: 6px; background-color: rgb(var(--success-bg)); color: rgb(var(--success-text)); font-weight: 500;
}
/* Progress bar: 4px corners instead of a pill */
html body > div.min-h-screen > div[class*="max-w-[2200px]"] div.h-2.rounded-full,
html body > div.min-h-screen > div[class*="max-w-[2200px]"] div.h-2.rounded-full > div { border-radius: 4px; }
/* "Voir ma fidélité": flat secondary button; on hover only the border turns purple */
html body > div.min-h-screen > div[class*="max-w-[2200px]"] .btn-ghost { border-radius: 8px; font-weight: 700; }
html body > div.min-h-screen > div[class*="max-w-[2200px]"] .btn-ghost:hover { background-color: rgb(var(--surface)); border-color: rgb(var(--brand) / .45); }
/* "Acheter des kamas" links: homepage link list (plain rows, grey chevron, text turns purple on
hover) instead of purple dots */
html body > div.min-h-screen > div[class*="max-w-[2200px]"] .card > ul > li > a {
justify-content: space-between; color: rgb(var(--body)); font-weight: 500; transition: none;
}
html body > div.min-h-screen > div[class*="max-w-[2200px]"] .card > ul > li > a > span.rounded-full { display: none; }
html body > div.min-h-screen > div[class*="max-w-[2200px]"] .card > ul > li > a::after { content: "›"; color: rgb(var(--cta)); font-size: 16px; line-height: 1; }
html body > div.min-h-screen > div[class*="max-w-[2200px]"] .card > ul > li > a:hover,
html body > div.min-h-screen > div[class*="max-w-[2200px]"] .card > ul > li > a:hover::after { color: rgb(var(--cta)); }
/* ---------- Content panels ---------- */
/* Small bordered buttons ("Voir tout", "Détails"): bold, 8px; hover only recolors the border and text */
html body > div.min-h-screen > div[class*="max-w-[2200px]"] main button.rounded-btn.border { border-radius: 8px; font-weight: 700; white-space: nowrap; transition: none; }
html body > div.min-h-screen > div[class*="max-w-[2200px]"] main button.rounded-btn.border:hover { border-color: rgb(var(--brand) / .45); color: rgb(var(--brand)); }
html body > div.min-h-screen > div[class*="max-w-[2200px]"] main a.rounded-btn.bg-brand { border-radius: 8px; font-weight: 700; white-space: nowrap; }
/* Tables: amounts on one line (they broke as "120,00 / €" on phones) */
html body > div.min-h-screen > div[class*="max-w-[2200px]"] main td.text-right { white-space: nowrap; }
/* Orders filter (Toutes / En cours / Terminées): flat 6px chips, the active one purple with white
text (dark text in dark mode), instead of underlined tabs. Same size in both states */
html body > div.min-h-screen > div[class*="max-w-[2200px]"] main .card > div.flex.border-b:has(> button.border-b-2) {
flex-wrap: wrap; gap: 8px; border-bottom-width: 0;
}
html body > div.min-h-screen > div[class*="max-w-[2200px]"] main .card > div.flex.border-b > button.border-b-2 {
margin: 0; padding: 6px 10px; border-width: 0; border-radius: 6px; background: rgb(var(--ink) / .06);
color: rgb(var(--body)); font-size: 13px; line-height: 18px; font-weight: 500; transition: none;
}
html body > div.min-h-screen > div[class*="max-w-[2200px]"] main .card > div.flex.border-b > button.border-b-2:hover { color: rgb(var(--ink)); }
html body > div.min-h-screen > div[class*="max-w-[2200px]"] main .card > div.flex.border-b > button.border-b-2.border-brand,
html body > div.min-h-screen > div[class*="max-w-[2200px]"] main .card > div.flex.border-b > button.border-b-2.border-brand:hover { background: rgb(var(--brand)); color: #fff; }
html[data-theme="dark"] body > div.min-h-screen > div[class*="max-w-[2200px]"] main .card > div.flex.border-b > button.border-b-2.border-brand,
html[data-theme="dark"] body > div.min-h-screen > div[class*="max-w-[2200px]"] main .card > div.flex.border-b > button.border-b-2.border-brand:hover { color: #16151c; }
/* Counts inside the chips */
html body > div.min-h-screen > div[class*="max-w-[2200px]"] main .card > div.flex.border-b > button.border-b-2 > span {
border-radius: 4px; background: rgb(var(--ink) / .08); color: inherit; font-weight: 700;
}
html body > div.min-h-screen > div[class*="max-w-[2200px]"] main .card > div.flex.border-b > button.border-b-2.border-brand > span { background: rgb(0 0 0 / .16); }
/* Order list: rows separated by 1px lines inside the panel instead of separate boxes */
html body > div.min-h-screen > div[class*="max-w-[2200px]"] main .card > ul.space-y-3 > li.rounded-card {
margin: 0; padding: 16px 0; border-width: 0; border-radius: 0;
}
html body > div.min-h-screen > div[class*="max-w-[2200px]"] main .card > ul.space-y-3 > li.rounded-card + li.rounded-card { border-top-width: 1px; }
html body > div.min-h-screen > div[class*="max-w-[2200px]"] main .card > ul.space-y-3 > li.rounded-card:last-child { padding-bottom: 0; }
/* "Transaction réussie": theme success green (green-600 was 3.3:1 on white) */
html body > div.min-h-screen > div[class*="max-w-[2200px]"] main .text-green-600 { color: rgb(var(--success-text)); }
/* Loyalty tiles and the password box: light neutral tint instead of lavender */
html body > div.min-h-screen > div[class*="max-w-[2200px]"] main div.rounded-card.bg-brand-soft { border-radius: 8px; background-color: rgb(var(--ink) / .04); }
/* Current tier row in the tiers table: faint purple tint */
html body > div.min-h-screen > div[class*="max-w-[2200px]"] main tr[class*="bg-brand-tint/40"] { background-color: rgb(var(--brand) / .06); }
/* Form labels: 14px bold ink, as on the login form */
html body > div.min-h-screen > div[class*="max-w-[2200px]"] main form label > span.mb-1 { color: rgb(var(--ink)); font-weight: 700; }
/* =====================================================================================
Checkout (.k4: its own header, form column and summary column, styled by the page script)
Flat 8px panels instead of 13-14px shadowed cards, 8px controls, bold instead of semibold,
a white summary column instead of lavender, no blur.
===================================================================================== */
/* Panels: flat, 1px line, 8px corners, slightly roomier padding (16-20px, was 12-14px) */
html body .k4 .k4-main .k4-card,
html body .k4 .k4-box { border-radius: 8px; box-shadow: none; }
html body .k4 .k4-box { padding: 16px 20px 20px; }
html body .k4 .k4-prod { padding: 12px 20px; }
html body .k4 .k4-char { padding: 8px 20px; }
html body .k4 .k4-noref { padding: 8px 20px 12px; }
@media (max-width: 899px) {
html body .k4 .k4-box { padding: 16px; }
html body .k4 .k4-prod,
html body .k4 .k4-char,
html body .k4 .k4-noref { padding-left: 16px; padding-right: 16px; }
}
/* Product thumbnail: dark plum square under the product picture (which covers it), 8px corners */
html body .k4 .k4-thumb { border-radius: 8px; background: #24182c; }
/* The game picture has a plum background baked in: blended away over the tile */
html body .k4 .k4-thumb > img { mix-blend-mode: lighten; }
/* Language button in the checkout header: 1px line border (the site-header rule in
1k-header.css gave it the plum bar's white border, invisible on this white header) */
html body .k4 .k4-top .inline-flex.antialiased > div > button { border-color: rgb(var(--line)); }
/* Summary column: white panel color instead of the lavender tint */
html body .k4 .k4-side { background: rgb(var(--surface)); }
/* Two weights: semibold labels and titles become bold */
html body .k4 :is(.k4-h2, .k4-sum-h, .k4-pname, .k4-lbl, .k4-pm-l, .k4-row dd, .k4-total b, .k4-sumbar, .k4-hint a,
.k4-hint button, .k4-lvl-g a, .k4-loy-p a, .k4-loy-h, .k4-pt b, .k4-lvl-ul li b, .k4-promo button, .k4-tp-b,
.k4-pick, .k4-sub, .k4-switch button, .k4-tag, .k4-bonus) { font-weight: 700; }
html body .k4 .k4-box > .k4-h2 { font-size: 16px; line-height: 24px; }
html body .k4 .k4-sum-h { font-size: 18px; line-height: 26px; }
/* Controls: 8px corners (were 9px), 6px inside the small switch */
html body .k4 :is(.k4-in, .k4-pm, .k4-oth, .k4-back, .k4-promo button, .k4-note, .k4-loy, .k4-modal-x, .k4-lvl-tip, .k4-switch) { border-radius: 8px; }
html body .k4 .k4-switch button { border-radius: 6px; }
html body .k4 .k4-pay { border-radius: 8px !important; }
/* Selected card brand: faint purple instead of the lavender tint */
html body .k4 .k4-oth[aria-pressed="true"] { background: rgb(var(--brand) / .06); }
/* Bars and skeletons: 4px corners instead of pills */
html body .k4 :is(.k4-skel, .k4-bar, .k4-bar i, .k4-lvl-bar, .k4-lvl-bar i) { border-radius: 4px; }
/* Signed-in loyalty bar ("Cette commande vous fait passer Diamant"): neutral grey track instead
of lavender, as the account page's progress bar; the purple fill and the lighter purple part
for this order stay */
html body .k4 .k4-lvl-bar { background: rgb(var(--ink) / .08); }
/* Guarantee icons (other checkout layout): quiet purple square instead of a gradient tile */
html body .k4 .k4-gi-i { background: rgb(var(--brand) / .10); border-radius: 8px; }
html body .k4 .k4-gi-i svg { stroke: rgb(var(--brand)); }
/* Loyalty bonus ("+2,4 M offerts"): the theme's darker success green (the bright green was
3.8:1 on white) */
html body .k4 .k4-bonus { color: rgb(var(--success-text)); }
/* Secure-payment line: full-strength grey (the 80% opacity put it under 4.5:1) */
html body .k4 .k4-sec-l { opacity: 1; }
/* Hover states: colors only. The pay button kept the site's 2px hover lift */
html body .k4 .k4-modal-x:hover { background: rgb(var(--ink) / .06); }
html body .k4 .k4-pay:hover { transform: none; }
/* Phones (< 900px): summary bar and its drop-down at 8px corners, flat */
html body .k4 .k4-sumbar { border-radius: 8px; box-shadow: none; }
html body .k4[data-k4-sum] .k4-sumbar { border-radius: 8px 8px 0 0; }
html body .k4 .k4-side-in > .k4-link { border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; }
/* Promo-code dialog: no backdrop blur, 8px corners, the light floating-layer shadow */
html body .k4 .k4-modal { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgb(14 11 20 / .5); }
html body .k4 .k4-modal-b { border-radius: 8px; box-shadow: 0 8px 24px rgb(22 21 28 / .18); }
html body .k4 .k4-lvl-tip { box-shadow: 0 8px 24px rgb(22 21 28 / .12); }
/* Dark mode dialog: a 1px line outline so its edge shows over the dimmed page, and "Appliquer"
in the checkout's own dark-mode purple (as "Continuer pour payer"): it was white text on the
light dark-mode purple, 2.4:1; now 5.1:1. Hover only darkens it */
html[data-theme="dark"] body .k4 .k4-modal-b { box-shadow: 0 8px 24px rgb(0 0 0 / .4), inset 0 0 0 1px rgb(var(--line)); }
html[data-theme="dark"] body .k4 .k4-modal .k4-promo button { border-color: #7c5cbf; background: #7c5cbf; color: #fff; }
html[data-theme="dark"] body .k4 .k4-modal .k4-promo button:hover:not(:disabled) { border-color: #6a4aad; background: #6a4aad; color: #fff; }
/* Pay button label: bold like the button (its inner span was semibold) */
html body .k4 .k4-pay > span { font-weight: 700; }
/* Logo: same size as in the site header (36px tile, 10px gap, "1Kamas" 20px bold) at every
width, instead of 42px / 25px on desktop and 30px / 19px on phones */
html body .k4 .k4-logo { gap: 10px; font-size: 20px; letter-spacing: -0.01em; }
html body .k4 .k4-logo img { width: 36px; height: 36px; }
/* Footer at the bottom of the window: the page is a column and the form takes the free height,
so a short checkout (tablets) no longer shows a white band under the plum footer */
html body .k4 { display: flex; flex-direction: column; }
html body .k4 > .k4-grid { flex: 1 0 auto; }
/* Phones and tablets (< 900px): the header was a centered 680px strip while the content ran
edge to edge with 12px gutters, so the logo and the cards didn't line up (52px apart at
768px). Both now use the site's gutters: 24px, 16px below 640px. The 10px gap between the
blocks stays (the open summary rows hook onto the summary bar with a -10px margin) */
@media (max-width: 899px) {
html body .k4 .k4-top-in { max-width: none; margin-left: 0; margin-right: 0; padding: 0 24px; }
html body .k4 .k4-grid { padding: 16px 24px 24px; }
html body .k4 .k4-sticky { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 639px) {
html body .k4 .k4-top-in { padding: 0 16px; }
html body .k4 .k4-grid { padding: 12px 16px 16px; }
html body .k4 .k4-sticky { padding-left: 16px; padding-right: 16px; }
}
/* =====================================================================================
Checkout, classic layout (es/finalizar-compra, pt/finalizar-compra): white header, a form
column and a summary panel, already flattened by the base inside . Same container,
title and tags as the rest of the site.
===================================================================================== */
/* 1208px container with the site's gutters (was 1280px with 32px gutters) */
html body > div.min-h-screen > header > div[class*="max-w-[1280px]"],
html body > div.min-h-screen > main[class*="max-w-[1280px]"] { max-width: 1208px; padding-left: 24px; padding-right: 24px; }
html body > div.min-h-screen > main[class*="max-w-[1280px]"] { padding-top: 24px; padding-bottom: 48px; }
@media (max-width: 639px) {
html body > div.min-h-screen > header > div[class*="max-w-[1280px]"],
html body > div.min-h-screen > main[class*="max-w-[1280px]"] { padding-left: 16px; padding-right: 16px; }
}
/* Page title 32px / 40px bold (26px on phones); the decorative dashed rule under it removed */
html body > div.min-h-screen > main[class*="max-w-[1280px]"] h1.font-heading { font-size: 32px; line-height: 40px; font-weight: 700; }
html body > div.min-h-screen > main[class*="max-w-[1280px]"] h1.font-heading + div.border-dashed { display: none; }
@media (max-width: 639px) {
html body > div.min-h-screen > main[class*="max-w-[1280px]"] h1.font-heading { font-size: 26px; line-height: 34px; }
}
/* Panel titles 20px bold */
html body > div.min-h-screen > main[class*="max-w-[1280px]"] section.card > h2 { font-size: 20px; line-height: 28px; font-weight: 700; }
/* Product thumbnail: plum square (the image's own background) instead of lavender */
html body > div.min-h-screen > main[class*="max-w-[1280px]"] div.rounded-card.bg-brand-soft { border-radius: 8px; background-color: #24182c; }
html body > div.min-h-screen > main[class*="max-w-[1280px]"] div.rounded-card.bg-brand-soft > img { mix-blend-mode: lighten; }
/* Payment method rows: bold names, no hover animation (border color only, as the site sets) */
html body > div.min-h-screen > main[class*="max-w-[1280px]"] section.card button.rounded-btn { transition: none; }
html body > div.min-h-screen > main[class*="max-w-[1280px]"] section.card button.rounded-btn span.font-medium { font-weight: 700; }
/* Trust tags ("Pago seguro", "Cifrado SSL", "Trustpilot 4,6"): neutral 6px tags instead of
lavender pills */
html body > div.min-h-screen > main[class*="max-w-[1280px]"] aside span.rounded-pill {
border-radius: 6px; background-color: rgb(var(--ink) / .06); color: rgb(var(--body)); font-size: 12px; line-height: 16px;
}
/* Payment method radios: the empty circle had the border color (1.3:1 on white, hard to see in
dark mode); now a mid grey (3.5:1 in both themes). The selected one keeps its purple fill */
html body > div.min-h-screen > main[class*="max-w-[1280px]"] section.card button.rounded-btn span.rounded-full.border-line { border-color: rgb(var(--muted) / .7); }
/* Phones: the logos, name, price and radio shared one row, so names broke over three lines
("Binance / Pay / Crypto") and the selected radio pushed 2px past the row's border at 375px.
The name now sits above its logos (as in the other checkout layout), which leaves it the row's
width; the price and radio stay on the right */
@media (max-width: 639px) {
html body > div.min-h-screen > main[class*="max-w-[1280px]"] section.card button.rounded-btn > span:first-child {
flex-direction: column-reverse; align-items: flex-start; gap: 6px; min-width: 0;
}
}
/* Signed-in loyalty bonus ("+2,4 M gratis", "Bonus de fidelidad Émeraude"): the theme's darker
success green, as on the account page and the other checkout layout (green-600 was 3.3:1 on
white) */
html body > div.min-h-screen > main[class*="max-w-[1280px]"] .text-green-600 { color: rgb(var(--success-text)); }
/* Wide screens (1420px of content): the shop's 6 games on one row */
@media (min-width: 1280px) {
html body :is(main, .min-h-\[60vh\]) .grid.xl\:grid-cols-4:has(> :nth-child(6):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* ==========================================================================
Account pages (Mon espace) in the home theme: the home's plum top bar, the 1420px container,
a lavender banner with the player, their loyalty tier and total spent (1k-account.js), a
lighter side menu, status pills, flatter cards and forms. Written over the account rules
above (html:root, so these win); the 1208px container there no longer applies.
========================================================================== */
/* ---------- Top bar: the home's plum bar, 64px ---------- */
html:root body > div.min-h-screen > header:has(+ div[class*="max-w-[2200px]"]) { background: #230a29; border-bottom: 0; }
html:root body > div.min-h-screen > header:has(+ div[class*="max-w-[2200px]"]) > div { max-width: 1468px; height: 64px; padding: 0 24px; gap: 16px; }
html:root body > div.min-h-screen > header:has(+ div[class*="max-w-[2200px]"]) > div > a:first-child { gap: 12px; }
html:root body > div.min-h-screen > header:has(+ div[class*="max-w-[2200px]"]) > div > a:first-child > img { width: 44px; height: 44px; }
html:root body > div.min-h-screen > header:has(+ div[class*="max-w-[2200px]"]) > div > a:first-child > span {
color: #fff; font-family: var(--font-rajdhani), var(--font-inter), system-ui, sans-serif; font-size: 30px; line-height: 1; font-weight: 700; letter-spacing: 0;
}
html:root body > div.min-h-screen > header:has(+ div[class*="max-w-[2200px]"]) > div > div.flex { gap: 12px; }
/* Language: the home's discreet link (globe, name, chevron) */
html:root body > div.min-h-screen > header:has(+ div[class*="max-w-[2200px]"]) .inline-flex.antialiased > div > button {
height: 36px; padding: 0 8px; gap: 6px; border: 0; border-radius: 6px; background: transparent;
color: rgba(255, 255, 255, .72); font-size: 14px; font-weight: 500;
}
html:root body > div.min-h-screen > header:has(+ div[class*="max-w-[2200px]"]) .inline-flex.antialiased > div > button:hover { background: rgba(255, 255, 255, .08); color: #fff; }
html:root body > div.min-h-screen > header:has(+ div[class*="max-w-[2200px]"]) .inline-flex.antialiased > div > button > span:first-child { display: none; }
html:root body > div.min-h-screen > header:has(+ div[class*="max-w-[2200px]"]) .inline-flex.antialiased > div > button::before,
html:root body > div.min-h-screen > header:has(+ div[class*="max-w-[2200px]"]) .inline-flex.antialiased > div > button::after { content: ""; flex: none; background: currentColor; -webkit-mask: var(--k1-icon) center / contain no-repeat; mask: var(--k1-icon) center / contain no-repeat; }
html:root body > div.min-h-screen > header:has(+ div[class*="max-w-[2200px]"]) .inline-flex.antialiased > div > button::before { width: 16px; height: 16px; --k1-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3.6 9h16.8M3.6 15h16.8M11.5 3a17 17 0 0 0 0 18M12.5 3a17 17 0 0 1 0 18'/%3E%3C/svg%3E"); }
html:root body > div.min-h-screen > header:has(+ div[class*="max-w-[2200px]"]) .inline-flex.antialiased > div > button::after { width: 14px; height: 14px; order: 3; --k1-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
/* "Acheter des kamas": the home's purple button, 44px */
html:root body > div.min-h-screen > header:has(+ div[class*="max-w-[2200px]"]) a.btn-primary, html:root body > div.min-h-screen > header:has(+ div[class*="max-w-[2200px]"]) a.btn-primary:hover {
height: 44px; padding: 0 20px; align-items: center; border-radius: 8px; background: #765eb8; background-image: none; box-shadow: none; transform: none;
color: #fff; font-size: 14px; font-weight: 700;
}
html:root body > div.min-h-screen > header:has(+ div[class*="max-w-[2200px]"]) a.btn-primary:hover { background: #6a51ad; }
/* The player: white avatar (like the home's), name and e-mail in white */
html:root body > div.min-h-screen > header:has(+ div[class*="max-w-[2200px]"]) > div > div.flex > div.flex { gap: 10px; padding-left: 4px; }
html:root body > div.min-h-screen > header:has(+ div[class*="max-w-[2200px]"]) span.bg-header-plum { width: 40px; height: 40px; border-radius: 8px; background: #fff; color: #230a29; font-size: 15px; font-weight: 700; }
html:root body > div.min-h-screen > header:has(+ div[class*="max-w-[2200px]"]) span.bg-header-plum + span > span:first-child { color: #fff; font-weight: 600; }
html:root body > div.min-h-screen > header:has(+ div[class*="max-w-[2200px]"]) span.bg-header-plum + span > span:last-child { color: rgba(255, 255, 255, .6); }
/* ---------- Page: 1420px container ---------- */
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] { max-width: 1468px; padding: 16px 24px 56px; }
@media (max-width: 639px) { html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] { padding: 12px 16px 40px; } }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] > p.text-muted { margin-bottom: 12px; font-size: 14px; line-height: 20px; color: rgb(var(--muted)); }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] > p.text-muted > a:hover { color: rgb(var(--brand)); }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] > p.text-muted > span.text-ink { color: rgb(var(--ink)); }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] > div.grid { gap: 24px; }
@media (min-width: 1024px) { html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] > div.grid { grid-template-columns: 248px minmax(0, 1fr); } }
@media (min-width: 1280px) { html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] > div.grid > div.grid { grid-template-columns: minmax(0, 1fr) 320px; } }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] > div.grid > div.grid { gap: 24px; }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main.space-y-6 > * + *, html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] aside.space-y-6 > * + * { margin-top: 24px; }
/* Banner (1k-account.js): the product pages' lavender banner on the game picture */
.k1d-banner {
display: flex; align-items: center; gap: 16px; margin-bottom: 24px; padding: 24px 28px; border-radius: 12px;
background: linear-gradient(90deg, rgba(236, 233, 246, .97) 0%, rgba(236, 233, 246, .9) 55%, rgba(236, 233, 246, .78) 100%), url(/cards/bg-dofus.webp) center 40% / cover no-repeat, #ece9f6;
background-blend-mode: normal, luminosity;
}
html[data-theme="dark"] .k1d-banner {
background: linear-gradient(90deg, rgba(39, 34, 52, .96) 0%, rgba(39, 34, 52, .86) 55%, rgba(39, 34, 52, .7) 100%), url(/cards/bg-dofus.webp) center 40% / cover no-repeat, #272234;
background-blend-mode: normal, luminosity;
}
.k1d-banner__av { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 10px; background: #1e1122; color: #fff; font-size: 22px; font-weight: 700; }
html[data-theme="dark"] .k1d-banner__av { background: #fff; color: #1e1122; }
.k1d-banner__who { min-width: 0; }
.k1d-banner__who h1 { margin: 0; color: color-mix(in srgb, #1d072a 50%, rgb(var(--ink))); font-size: 26px; line-height: 32px; font-weight: 700; }
html[data-theme="dark"] .k1d-banner__who h1 { color: #fff; }
.k1d-banner__who p { margin: 2px 0 0; color: rgb(var(--body)); font-size: 14px; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k1d-banner__stats { display: flex; margin: 0 0 0 auto; }
.k1d-banner__stats > div { padding: 2px 0 2px 24px; margin-left: 24px; border-left: 1px solid rgba(26, 14, 34, .12); }
html[data-theme="dark"] .k1d-banner__stats > div { border-left-color: rgba(255, 255, 255, .12); }
.k1d-banner__stats > div:first-child { border-left: 0; margin-left: 0; padding-left: 0; }
.k1d-banner__stats dt { color: rgb(var(--muted)); font-size: 13px; line-height: 18px; }
.k1d-banner__stats dd { display: flex; align-items: center; gap: 8px; margin: 4px 0 0; color: rgb(var(--ink)); font-size: 20px; line-height: 26px; font-weight: 700; white-space: nowrap; }
.k1d-banner__stats dd img { width: 24px; height: 24px; }
.k1d-banner__stats dd small { color: color-mix(in srgb, #765eb8 50%, rgb(var(--ink))); font-size: 13px; font-weight: 600; }
html[data-theme="dark"] .k1d-banner__stats dd small { color: color-mix(in srgb, #b8a4ee 50%, rgb(var(--ink))); }
@media (max-width: 899px) {
.k1d-banner { flex-wrap: wrap; padding: 20px; }
.k1d-banner__stats { width: 100%; margin: 8px 0 0; }
.k1d-banner__stats > div { flex: 1; min-width: 0; }
.k1d-banner__stats dd { font-size: 17px; }
}
@media (max-width: 599px) { .k1d-banner__stats dd small { display: none; } }
@media (max-width: 479px) { .k1d-banner__stats > div { padding-left: 12px; margin-left: 12px; } .k1d-banner__stats dd { font-size: 15px; gap: 6px; } }
/* The banner shows the player: their card in the right column goes */
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"]:has(> .k1d-banner) aside.space-y-6 > .card.text-center:has(> span.h-16) { display: none; }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"]:has(> .k1d-banner) aside.space-y-6 > .card.text-center:has(> span.h-16) + * { margin-top: 0; }
/* ---------- Cards: flat, 8px corners, 24px inside ---------- */
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] .card.hp-card, html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] .card.hp-card:hover { border: 1px solid rgb(var(--line)); border-radius: 8px; background: rgb(var(--surface)); box-shadow: none; transform: none; }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] :is(main, aside.space-y-6) > .card.hp-card { padding: 24px; }
@media (max-width: 639px) { html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] :is(main, aside.space-y-6) > .card.hp-card { padding: 18px; } }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] .card :is(h2, h3).font-heading { font-size: 18px; line-height: 26px; font-weight: 700; color: rgb(var(--ink)); }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] .card h3.uppercase { text-transform: none; letter-spacing: 0; font-size: 18px; line-height: 26px; font-weight: 700; color: rgb(var(--ink)); }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] .card > p.mt-1.text-sm.text-muted { margin-top: 4px; font-size: 14px; line-height: 20px; color: rgb(var(--muted)); }
/* ---------- Side menu ---------- */
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] aside > .card { padding: 8px; }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] aside > .card > p.uppercase { padding: 8px 12px 6px; text-transform: none; letter-spacing: 0; color: rgb(var(--muted)); font-size: 13px; font-weight: 600; }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] aside > .card > nav { gap: 2px; }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] aside > .card > nav > button { height: 42px; padding: 0 12px; gap: 12px; border-radius: 6px; color: rgb(var(--body)); font-size: 14px; font-weight: 500; transition: none; }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] aside > .card > nav > button:hover { background: rgb(var(--ink) / .04); color: rgb(var(--ink)); }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] aside > .card > nav > button > span.grid { width: 20px; height: 20px; border-radius: 0; background: none; color: rgb(var(--muted)); }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] aside > .card > nav > button > span.grid svg { width: 18px; height: 18px; }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] aside > .card > nav > button.bg-brand-tint, html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] aside > .card > nav > button.bg-brand-tint:hover { background: rgb(var(--brand) / .1); color: rgb(var(--ink)); font-weight: 600; }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] aside > .card > nav > button.bg-brand-tint > span.grid { background: none; color: rgb(var(--brand)); }
html[data-theme="dark"]:root body > div.min-h-screen > div[class*="max-w-[2200px]"] aside > .card > nav > button.bg-brand-tint > span.grid { color: color-mix(in srgb, #b8a4ee 50%, rgb(var(--ink))); }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] aside > .card > nav > button > span.absolute { display: block; top: 10px; bottom: 10px; width: 3px; background: rgb(var(--brand)); }
html[data-theme="dark"]:root body > div.min-h-screen > div[class*="max-w-[2200px]"] aside > .card > nav > button > span.absolute { background: color-mix(in srgb, #b8a4ee 50%, rgb(var(--ink))); }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] aside > .card > nav > div.border-t { margin: 6px 12px; }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] aside > .card > nav > button.text-red-600, html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] aside > .card > nav > button.text-red-600:hover { color: rgb(var(--danger)); }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] aside > .card > nav > button.text-red-600:hover { background: rgb(var(--danger) / .06); }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] aside > .card > nav > button.text-red-600 > span.grid { background: none; color: rgb(var(--danger)); }
/* ---------- Dashboard: order counts ---------- */
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main .card > div.grid.sm\:grid-cols-4 { margin-top: 16px; gap: 0; }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main .card > div.grid.sm\:grid-cols-4 > div { padding: 4px 0 4px 20px; text-align: left; border-left: 1px solid rgb(var(--line)); }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main .card > div.grid.sm\:grid-cols-4 > div:first-child { padding-left: 0; border-left: 0; }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main .card > div.grid.sm\:grid-cols-4 > div > div:first-child { font-size: 30px; line-height: 36px; font-weight: 700; }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main .card > div.grid.sm\:grid-cols-4 > div > div:first-child.text-brand { color: color-mix(in srgb, #765eb8 50%, rgb(var(--ink))); }
html[data-theme="dark"]:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main .card > div.grid.sm\:grid-cols-4 > div > div:first-child.text-brand { color: color-mix(in srgb, #b8a4ee 50%, rgb(var(--ink))); }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main .card > div.grid.sm\:grid-cols-4 > div > div:last-child { margin-top: 2px; color: rgb(var(--muted)); font-size: 13px; line-height: 18px; }
@media (max-width: 639px) {
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main .card > div.grid.sm\:grid-cols-4 { row-gap: 16px; }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main .card > div.grid.sm\:grid-cols-4 > div:nth-child(odd) { padding-left: 0; border-left: 0; }
}
/* ---------- Tables (recent orders, tiers) ---------- */
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main table thead tr { text-transform: none; letter-spacing: 0; }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main table th { padding-bottom: 10px; color: rgb(var(--muted)); font-size: 13px; font-weight: 600; }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main table td { padding-top: 14px; padding-bottom: 14px; }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main table td.font-medium { font-weight: 600; color: rgb(var(--ink)); }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main table td.font-bold { font-weight: 700; }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main tr[class*="bg-brand-tint/40"] { background: rgb(var(--brand) / .07); }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main tr[class*="bg-brand-tint/40"] > td:first-child { box-shadow: inset 3px 0 0 color-mix(in srgb, #765eb8 50%, rgb(var(--ink))); padding-left: 12px; }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main tr > td:first-child { padding-left: 0; }
/* Status: dot + label in a soft pill (amber: waiting / in progress, green: done) */
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main span.inline-flex:has(> span.h-2.w-2.rounded-full) {
padding: 3px 10px 3px 8px; border-radius: 999px; font-size: 13px; line-height: 18px; font-weight: 600;
}
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main span.inline-flex:has(> span.bg-amber-500) { background: rgb(245 158 11 / .12); color: #a35a06; }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main span.inline-flex:has(> span.bg-green-500) { background: rgb(34 197 94 / .12); color: #157a3a; }
html[data-theme="dark"]:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main span.inline-flex:has(> span.bg-amber-500) { background: rgb(245 158 11 / .14); color: #fbbf5a; }
html[data-theme="dark"]:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main span.inline-flex:has(> span.bg-green-500) { background: rgb(34 197 94 / .14); color: #5ee08f; }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main span.inline-flex > span.h-2.w-2.rounded-full { width: 6px; height: 6px; }
/* ---------- Buttons ---------- */
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main button.rounded-btn.border, html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main button.rounded-btn.border:hover {
height: 36px; padding: 0 14px; border-radius: 8px; border-color: rgb(var(--line)); background: rgb(var(--surface)); color: rgb(var(--ink)); font-size: 13px; font-weight: 600; transition: none;
}
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main button.rounded-btn.border:hover { border-color: rgb(var(--brand) / .5); color: color-mix(in srgb, #765eb8 50%, rgb(var(--ink))); }
html[data-theme="dark"]:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main button.rounded-btn.border:hover { color: color-mix(in srgb, #b8a4ee 50%, rgb(var(--ink))); }
/* "Acheter à nouveau": purchase purple (kept) */
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main a.rounded-btn.bg-brand { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 8px; background: #765eb8; color: #fff; font-size: 13px; font-weight: 600; }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main a.rounded-btn.bg-brand:hover { background: #6a51ad; }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] .btn-ghost, html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] .btn-ghost:hover { height: 40px; border-radius: 8px; border-color: rgb(var(--line)); box-shadow: none; transform: none; font-size: 14px; font-weight: 600; }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] .btn-ghost:hover { border-color: rgb(var(--brand) / .5); color: color-mix(in srgb, #765eb8 50%, rgb(var(--ink))); }
/* ---------- Orders ---------- */
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main .card > div.flex.border-b:has(> button.border-b-2) { gap: 8px; margin-top: 16px; padding-bottom: 0; border-bottom: 0; }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main .card > div.flex.border-b > button.border-b-2 {
height: 36px; margin: 0; padding: 0 12px; gap: 8px; border: 1px solid rgb(var(--line)); border-radius: 8px; background: rgb(var(--surface)); color: rgb(var(--body)); font-size: 14px; font-weight: 600;
}
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main .card > div.flex.border-b > button.border-b-2:hover { border-color: rgb(var(--brand) / .5); color: rgb(var(--ink)); }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main .card > div.flex.border-b > button.border-b-2.border-brand, html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main .card > div.flex.border-b > button.border-b-2.border-brand:hover {
border-color: color-mix(in srgb, #765eb8 50%, rgb(var(--ink))); background: rgb(var(--brand) / .1); color: rgb(var(--ink)); box-shadow: inset 0 0 0 1px color-mix(in srgb, #765eb8 50%, rgb(var(--ink)));
}
html[data-theme="dark"]:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main .card > div.flex.border-b > button.border-b-2.border-brand { border-color: color-mix(in srgb, #b8a4ee 50%, rgb(var(--ink))); box-shadow: inset 0 0 0 1px color-mix(in srgb, #b8a4ee 50%, rgb(var(--ink))); color: rgb(var(--ink)); }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main .card > div.flex.border-b > button.border-b-2 > span { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: rgb(var(--ink) / .06); color: rgb(var(--body)); font-size: 12px; line-height: 20px; }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main .card > div.flex.border-b > button.border-b-2.border-brand > span { background: color-mix(in srgb, #765eb8 50%, rgb(var(--ink))); color: color-mix(in srgb, #fff 50%, rgb(var(--surface))); }
html[data-theme="dark"]:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main .card > div.flex.border-b > button.border-b-2.border-brand > span { background: color-mix(in srgb, #b8a4ee 50%, rgb(var(--ink))); color: rgb(var(--surface)); }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main .card > ul.space-y-3 { margin-top: 16px; }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main .card > ul.space-y-3 > li.rounded-card, html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main .card > ul.space-y-3 > li.rounded-card + li.rounded-card {
margin: 0; padding: 16px 20px; border: 1px solid rgb(var(--line)); border-radius: 8px;
}
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main .card > ul.space-y-3 > li.rounded-card + li.rounded-card { margin-top: 12px; }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main .card > ul.space-y-3 > li.rounded-card:last-child { padding-bottom: 16px; }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main .card > ul.space-y-3 > li > div:first-child { font-size: 13px; color: rgb(var(--muted)); }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main .card > ul.space-y-3 > li > div:first-child b { color: rgb(var(--ink)); font-weight: 700; }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main .card > ul.space-y-3 > li img { width: 48px; height: 48px; border-radius: 8px; }
/* Order thumbnails (the purple 1K logo mark): half desaturated and slightly faded, so they don't
compete with the purple "Acheter à nouveau" buttons */
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main .card > ul.space-y-3 > li img[src*="logo-mark"] { filter: grayscale(.5); opacity: .92; }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main .card > ul.space-y-3 > li p.text-sm.text-ink { font-size: 15px; font-weight: 600; }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main .card > ul.space-y-3 > li p.text-xs.text-muted { font-size: 13px; }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main .card > ul.space-y-3 > li div.text-right > p:first-child { text-transform: none; letter-spacing: 0; font-size: 12px; }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main .card > ul.space-y-3 > li div.text-right > p.font-heading { font-size: 18px; line-height: 24px; font-weight: 700; }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main .card > ul.space-y-3 > li > div:last-child { margin-top: 14px; padding-top: 14px; }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main .card > ul.space-y-3 > li > div:last-child > span { font-size: 13px; font-weight: 600; }
/* ---------- Loyalty ---------- */
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main div.rounded-card.bg-brand-soft { border-radius: 8px; background: rgb(var(--brand) / .07); padding: 20px; }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main div.rounded-card.bg-brand-soft > p.uppercase { text-transform: none; letter-spacing: 0; color: rgb(var(--muted)); font-size: 13px; font-weight: 600; }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main div.rounded-card.bg-brand-soft .font-heading { font-weight: 700; }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main div.rounded-card.bg-brand-soft span.text-brand { color: color-mix(in srgb, #765eb8 50%, rgb(var(--ink))); }
html[data-theme="dark"]:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main div.rounded-card.bg-brand-soft span.text-brand { color: color-mix(in srgb, #b8a4ee 50%, rgb(var(--ink))); }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] div.h-2.rounded-full { height: 8px; border-radius: 4px; background: rgb(var(--ink) / .08); }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] div.h-2.rounded-full > div { border-radius: 4px; background: color-mix(in srgb, #765eb8 50%, rgb(var(--ink))); }
html[data-theme="dark"]:root body > div.min-h-screen > div[class*="max-w-[2200px]"] div.h-2.rounded-full > div { background: color-mix(in srgb, #b8a4ee 50%, rgb(var(--ink))); }
/* ---------- Forms (Compte, Facturation) ---------- */
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main form label > span.mb-1 { margin-bottom: 6px; color: rgb(var(--ink)); font-size: 13px; line-height: 18px; font-weight: 600; }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main form input, html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main form select {
height: 44px; padding: 0 14px; border-radius: 8px; border-color: rgb(var(--line)); background: rgb(var(--surface)); color: rgb(var(--ink)); font-size: 15px;
}
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main form :is(input, select):focus { border-color: color-mix(in srgb, #765eb8 50%, rgb(var(--ink))); box-shadow: 0 0 0 3px color-mix(in srgb, rgb(118 94 184 / .18) 50%, rgb(var(--ink) / .12)); }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main form > div.rounded-card.bg-brand-soft { background: rgb(var(--ink) / .03); border: 1px solid rgb(var(--line)); }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main form > button.btn-primary, html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main form > button.btn-primary:hover {
display: flex; width: auto; min-width: 180px; height: 44px; margin-left: auto; padding: 0 24px; border-radius: 8px;
background: rgb(var(--brand)); background-image: none; box-shadow: none; transform: none; color: #fff; font-size: 15px; font-weight: 700;
}
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] main form > button.btn-primary:hover { background: rgb(var(--brand-dark)); }
/* The save button is not a purchase: the muted violet --brand (in dark mode the muted dark
button: #52467A, white text; hover only lightens it) */
html[data-theme="dark"] body > div.min-h-screen > div[class*="max-w-[2200px]"] main form > button.btn-primary { background: #52467a; color: #fff; }
html[data-theme="dark"] body > div.min-h-screen > div[class*="max-w-[2200px]"] main form > button.btn-primary:hover { background: #605086; color: #fff; }
/* ---------- Right column ---------- */
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] aside.space-y-6 .card img.h-8 { width: 32px; height: 32px; }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] aside.space-y-6 .card p.font-medium.text-ink { font-weight: 700; }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] aside.space-y-6 .card > p.text-sm.text-muted { font-size: 13px; line-height: 19px; }
/* "Acheter des kamas": each game with its logo */
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] .card > ul > li > a { gap: 12px; height: 48px; padding: 0 4px 0 0; border-radius: 6px; font-size: 14px; font-weight: 600; }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] .card > ul > li + li > a { border-top: 1px solid rgb(var(--line)); }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] .card > ul > li > a::before { content: ""; flex: none; width: 52px; height: 30px; background: center / contain no-repeat; }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] .card > ul > li > a[href*="kamas-dofus"]::before { background-image: url(/cards/logo-dofus.webp); }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] .card > ul > li > a[href*="kamas-retro"]::before { background-image: url(/cards/logo-dofus-retro.webp); }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] .card > ul > li > a[href*="kamas-touch"]::before { background-image: url(/cards/logo-dofus-touch.webp); }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] .card > ul > li > a[href*="kamas-wakfu"]::before { background-image: url(/cards/logo-wakfu.webp); }
html:root body > div.min-h-screen > div[class*="max-w-[2200px]"] .card > ul > li > a::after { margin-left: auto; }
/* Footer: same container */
html:root body > div.min-h-screen > footer.border-t { padding: 20px 24px; font-size: 13px; }
/* ==========================================================================
Checkout, classic checkout and login in the home theme: the home's plum top bar (logo in
white, the discreet language link), the 1420px container, and on the checkout the form
and the summary side by side as two cards on the page background (was a split screen).
========================================================================== */
/* ---------- Checkout (.k4: checkout-express, en/checkout) ---------- */
html:root body .k4 :is(.k4-pay, .k4-pm.on, .k4-promo) { --brand: 124 92 191; --brand-dark: 106 74 173; --brand-soft: 243 238 251; --brand-tint: 247 244 251; }
html[data-theme="dark"] body .k4 :is(.k4-pay, .k4-pm.on, .k4-promo) { --brand: 184 153 232; --brand-dark: 158 122 216; --brand-soft: 47 36 64; --brand-tint: 41 32 56; }
html:root body .k4 { background: rgb(var(--canvas)); }
html:root body .k4 .k4-top { border-bottom: 0; background: #230a29; }
/* Footer: the site footer's plum, toned down (#1C0D1D, softer lilac text); dark mode keeps the
page's own page-colored footer with its top line */
html:root body .k4 .k4-foot { background: #1c0d1d; }
html:root body .k4 .k4-foot-in { color: rgba(226, 219, 235, .86); }
html[data-theme="dark"] body .k4 .k4-foot { background: rgb(var(--canvas)); }
html[data-theme="dark"] body .k4 .k4-foot-in { color: rgb(var(--muted)); }
html:root body .k4 .k4-top-in { max-width: 1468px; height: 64px; margin: 0 auto; padding: 0 24px; }
html:root body .k4 .k4-logo { gap: 12px; color: #fff; font-family: var(--font-rajdhani), var(--font-inter), system-ui, sans-serif; font-size: 30px; font-weight: 700; letter-spacing: 0; }
html:root body .k4 .k4-logo img { width: 44px; height: 44px; }
html:root body .k4 .k4-top .inline-flex.antialiased > div > button {
height: 36px; padding: 0 8px; gap: 6px; border: 0; border-radius: 6px; background: transparent;
color: rgba(255, 255, 255, .72); font-size: 14px; font-weight: 500;
}
html:root body .k4 .k4-top .inline-flex.antialiased > div > button:hover { background: rgba(255, 255, 255, .08); color: #fff; }
html:root body .k4 .k4-top .inline-flex.antialiased > div > button > span:first-child { display: none; }
html:root body .k4 .k4-top .inline-flex.antialiased > div > button::before, html:root body .k4 .k4-top .inline-flex.antialiased > div > button::after { content: ""; flex: none; background: currentColor; -webkit-mask: var(--k1-icon) center / contain no-repeat; mask: var(--k1-icon) center / contain no-repeat; }
html:root body .k4 .k4-top .inline-flex.antialiased > div > button::before { width: 16px; height: 16px; --k1-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3.6 9h16.8M3.6 15h16.8M11.5 3a17 17 0 0 0 0 18M12.5 3a17 17 0 0 1 0 18'/%3E%3C/svg%3E"); }
html:root body .k4 .k4-top .inline-flex.antialiased > div > button::after { width: 14px; height: 14px; order: 3; --k1-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
/* The page's own style forces the language button white (!important): plum-bar colours win here */
html:root body .k4 .k4-top [data-lang-switcher] button { background: transparent !important; color: rgba(255, 255, 255, .72) !important; }
html:root body .k4 .k4-top [data-lang-switcher] button:hover { background: rgba(255, 255, 255, .08) !important; color: #fff !important; }
html:root body .k4 .k4-foot-in { max-width: 1468px; margin: 0 auto; padding: 16px 24px; }
/* Cards: flat, 8px corners */
html:root body .k4 :is(.k4-card, .k4-box) { border: 1px solid rgb(var(--line)); border-radius: 8px; background: rgb(var(--surface)); box-shadow: none; }
/* Fields: 44px, white, a muted violet ring when focused (a field is not a purchase control) */
html:root body .k4 .k4-in { height: 44px; border-color: rgb(var(--line)); border-radius: 8px; background-color: rgb(var(--surface)); }
html:root body .k4 .k4-in:focus { border-color: color-mix(in srgb, #765eb8 50%, rgb(var(--ink))); box-shadow: 0 0 0 3px color-mix(in srgb, rgb(118 94 184 / .18) 50%, rgb(var(--ink) / .12)); }
html:root body .k4 .k4-in.k4-bad { border-color: #ef4444; }
/* Payment methods: white rows; the chosen one ringed in purchase purple (lilac in dark mode, as
its radio) */
html:root body .k4 .k4-pm { border-radius: 8px; background: rgb(var(--surface)); }
html:root body .k4 .k4-pm.on { border-color: #765eb8; box-shadow: inset 0 0 0 1px #765eb8; background: rgb(var(--brand) / .05); }
html[data-theme="dark"] body .k4 .k4-pm.on { border-color: #b8a4ee; box-shadow: inset 0 0 0 1px #b8a4ee; }
/* Radios of the other methods: the empty circle halfway between the site's lavender (#c9bfdc)
and the line grey; in dark mode halfway to a light outline, where the line grey hardly shows */
html:root body .k4 .k4-pm:not(.on) .k4-radio { border-color: color-mix(in srgb, #c9bfdc 50%, rgb(var(--line))); }
html[data-theme="dark"] body .k4 .k4-pm:not(.on) .k4-radio { border-color: color-mix(in srgb, #c9bfdc 50%, rgba(255, 255, 255, .24)); }
/* Pay button: the buy box's, 52px */
html:root body .k4 .k4-pay, html:root body .k4 .k4-pay:hover { min-height: 52px; background: #765eb8 !important; background-image: none !important; box-shadow: none; font-size: 16px; }
html:root body .k4 .k4-pay:hover { background: #6a51ad !important; }
/* Not purchase controls: the required asterisks, the "Créer mon compte", "Se connecter",
promo-code and terms links keep the checkout's own rgb(var(--brand)), the muted violet here;
the guarantee checkbox too */
html:root body .k4 .k4-row input[type="checkbox"] { accent-color: rgb(var(--brand)); }
/* Trust badges (3-D Secure, SSL 256-bit): their plum ink (#1f1633, set as SVG attributes)
halfway to the muted grey. The badges stay white tiles in dark mode, so there they get a fixed
dark grey-violet (#464054), dark like the card logos next to them */
html:root body .k4 .k4-sec-b svg [fill="#1f1633"] { fill: color-mix(in srgb, #1f1633 50%, rgb(var(--muted))); }
html:root body .k4 .k4-sec-b svg [stroke="#1f1633"] { stroke: color-mix(in srgb, #1f1633 50%, rgb(var(--muted))); }
html[data-theme="dark"] body .k4 .k4-sec-b svg [fill="#1f1633"] { fill: #464054; }
html[data-theme="dark"] body .k4 .k4-sec-b svg [stroke="#1f1633"] { stroke: #464054; }
/* From 900px: form and summary side by side in the 1420px container, the summary a sticky card */
@media (min-width: 900px) {
html:root body .k4 .k4-grid {
grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; align-items: start;
max-width: 1468px; min-height: 0; margin: 0 auto; padding: 24px 24px 48px;
}
html:root body .k4 .k4-main { padding: 0; }
html:root body .k4 .k4-main-in { max-width: none; margin: 0; }
html:root body .k4 .k4-main-in > :first-child { margin-top: 0; }
html:root body .k4 .k4-side { border: 0; background: none; }
html:root body .k4 .k4-side-box { position: sticky; top: 24px; min-height: 0; }
html:root body .k4 .k4-side-in { max-width: none; margin: 0; padding: 24px; border: 1px solid rgb(var(--line)); border-radius: 8px; background: rgb(var(--surface)); }
}
@media (min-width: 900px) and (max-width: 1199px) {
html:root body .k4 .k4-grid { grid-template-columns: minmax(0, 1fr) 360px; }
}
/* Phones and tablets: the plum bar a little lower, the page's own one-column order kept */
@media (max-width: 899px) {
html:root body .k4 .k4-top-in { height: 56px; padding: 0 16px; }
html:root body .k4 .k4-logo { gap: 10px; font-size: 26px; }
html:root body .k4 .k4-logo img { width: 36px; height: 36px; }
html:root body .k4 .k4-foot-in { padding: 12px 16px; }
}
/* ---------- Classic checkout (es/pt finalizar-compra) ---------- */
/* Purple --brand restated only on the purchase controls: the payment method rows (the chosen
one's ring and radio) and the "Pagar" / "Aplicar" buttons, which get the checkout's pay purple
in both themes (hover only darkens it). The rest of the form (the required asterisk, the
"Términos y Condiciones" / "Seguir comprando" links) keeps the site's text-brand, the muted
violet here. The header stays plum */
html:root body > div.min-h-screen:has(> main[class*="max-w-[1280px]"]) > main :is(.btn-primary, section.card button.rounded-btn) { --brand: 124 92 191; --brand-dark: 106 74 173; --brand-soft: 243 238 251; --brand-tint: 247 244 251; }
html[data-theme="dark"] body > div.min-h-screen:has(> main[class*="max-w-[1280px]"]) > main :is(.btn-primary, section.card button.rounded-btn) { --brand: 184 153 232; --brand-dark: 158 122 216; --brand-soft: 47 36 64; --brand-tint: 41 32 56; }
html:root body > div.min-h-screen:has(> main[class*="max-w-[1280px]"]) > main .btn-primary { background-color: #765eb8; background-image: none; color: #fff; }
html:root body > div.min-h-screen:has(> main[class*="max-w-[1280px]"]) > main .btn-primary:hover { background-color: #6a51ad; color: #fff; }
html:root body > div.min-h-screen:has(> main[class*="max-w-[1280px]"]) > header { border-bottom: 0; background: #230a29; }
html:root body > div.min-h-screen:has(> main[class*="max-w-[1280px]"]) > header > div { max-width: 1468px; height: 64px; padding-left: 24px; padding-right: 24px; }
html:root body > div.min-h-screen:has(> main[class*="max-w-[1280px]"]) > header > div > a:first-child { gap: 12px; }
html:root body > div.min-h-screen:has(> main[class*="max-w-[1280px]"]) > header > div > a:first-child > img { width: 44px; height: 44px; }
html:root body > div.min-h-screen:has(> main[class*="max-w-[1280px]"]) > header > div > a:first-child > span { color: #fff; font-family: var(--font-rajdhani), var(--font-inter), system-ui, sans-serif; font-size: 30px; line-height: 1; font-weight: 700; letter-spacing: 0; }
html:root body > div.min-h-screen:has(> main[class*="max-w-[1280px]"]) > header span.text-brand { color: #b8a4ee; }
html:root body > div.min-h-screen:has(> main[class*="max-w-[1280px]"]) > header .inline-flex.antialiased > div > button {
height: 36px; padding: 0 8px; gap: 6px; border: 0; border-radius: 6px; background: transparent;
color: rgba(255, 255, 255, .72); font-size: 14px; font-weight: 500;
}
html:root body > div.min-h-screen:has(> main[class*="max-w-[1280px]"]) > header .inline-flex.antialiased > div > button:hover { background: rgba(255, 255, 255, .08); color: #fff; }
html:root body > div.min-h-screen:has(> main[class*="max-w-[1280px]"]) > header .inline-flex.antialiased > div > button > span:first-child { display: none; }
html:root body > div.min-h-screen:has(> main[class*="max-w-[1280px]"]) > header .inline-flex.antialiased > div > button::before, html:root body > div.min-h-screen:has(> main[class*="max-w-[1280px]"]) > header .inline-flex.antialiased > div > button::after { content: ""; flex: none; background: currentColor; -webkit-mask: var(--k1-icon) center / contain no-repeat; mask: var(--k1-icon) center / contain no-repeat; }
html:root body > div.min-h-screen:has(> main[class*="max-w-[1280px]"]) > header .inline-flex.antialiased > div > button::before { width: 16px; height: 16px; --k1-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3.6 9h16.8M3.6 15h16.8M11.5 3a17 17 0 0 0 0 18M12.5 3a17 17 0 0 1 0 18'/%3E%3C/svg%3E"); }
html:root body > div.min-h-screen:has(> main[class*="max-w-[1280px]"]) > header .inline-flex.antialiased > div > button::after { width: 14px; height: 14px; order: 3; --k1-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
html:root body > div.min-h-screen:has(> main[class*="max-w-[1280px]"]) > main { max-width: 1468px; padding: 24px 24px 48px; }
@media (min-width: 1024px) { html:root body > div.min-h-screen:has(> main[class*="max-w-[1280px]"]) > main > form.grid { grid-template-columns: minmax(0, 1fr) 400px; gap: 24px; } }
@media (max-width: 639px) {
html:root body > div.min-h-screen:has(> main[class*="max-w-[1280px]"]) > header > div { height: 56px; padding-left: 16px; padding-right: 16px; }
html:root body > div.min-h-screen:has(> main[class*="max-w-[1280px]"]) > header > div > a:first-child > img { width: 36px; height: 36px; }
html:root body > div.min-h-screen:has(> main[class*="max-w-[1280px]"]) > header > div > a:first-child > span { font-size: 26px; }
html:root body > div.min-h-screen:has(> main[class*="max-w-[1280px]"]) > main { padding: 16px 16px 40px; }
}
/* ---------- Login / register ---------- */