- )
6. "Pourquoi choisir 1Kamas..." title, intro, 2 icon cards (the guarantees)
7. "Autres serveurs Ankama" 5 groups of server links (same component as the homepage)
8. FAQ (
list) + buy button
Every rule starts from that wrapper, so nothing reaches the header, the footer or other page
types. Builds on 1k-site-base.css (flat cards, chips, buttons, FAQ rows, type) and follows the
homepage files (1k-hero.css, 1k-compact.css, 1k-palette.css): plum header block like the
homepage hero, 48px between sections, left-aligned titles, white panels with 1px dividers,
a plum guarantees band, the homepage server list (rows with ›) and the homepage FAQ panel.
Only colors, borders, radii, type, spacing and layout change: every heading, text, link,
price, rating, FAQ entry and button stays in the page. */
/* ---------- Page rhythm ----------
48px above each section on desktop, 32px on phones (was 64px between sections, plus 64px
above the eyebrow); no bottom padding, so the last gap before the footer is the footer's own
48px, as on the homepage. */
html body > .min-h-\[60vh\] > div.bg-canvas > section {
padding-top: clamp(2rem, 4vw, 3rem); padding-bottom: 0;
}
/* Titles and FAQ questions: no single word or lone "?" on the last line when they wrap (the
French texts put a space before "?" and ":", so a question often ended with "?" alone on
its own line). Line breaks only; the text is unchanged */
html body > .min-h-\[60vh\] > div.bg-canvas :is(h2, h3, summary) { text-wrap: pretty; }
/* ---------- Panel sections: the section itself becomes the panel ----------
The header, the "en détail" text and the FAQ have no inner wrapper, so the section box is
narrowed to the content column (the 1468px container minus its 16px / 24px gutters = at most
1420px, centered) and given the panel padding. Same outer edges as the cards and panels of
the other sections. */
html body > .min-h-\[60vh\] > div.bg-canvas > section:first-child,
html body > .min-h-\[60vh\] > div.bg-canvas > section.container-1k:has(> .prose-1k),
html body > .min-h-\[60vh\] > div.bg-canvas > section.container-1k:last-of-type:has(> .divide-y > details) {
width: calc(100% - 32px); max-width: 1420px; margin-left: auto; margin-right: auto;
padding: 24px 20px; border-radius: 8px;
}
@media (min-width: 640px) {
html body > .min-h-\[60vh\] > div.bg-canvas > section:first-child,
html body > .min-h-\[60vh\] > div.bg-canvas > section.container-1k:has(> .prose-1k),
html body > .min-h-\[60vh\] > div.bg-canvas > section.container-1k:last-of-type:has(> .divide-y > details) {
width: calc(100% - 48px); padding: 32px;
}
}
/* ---------- 1. Page header: a plum block like the homepage hero ----------
#1d072a, 8px corners, 32px padding (24px / 20px on phones), 24px under the site header
(16px on phones), left-aligned white H1 at the homepage size (48px / 1.1). The lavender intro
callout becomes the white/85% sentence under the title, the button turns lilac as on the
homepage plum cards, and the 5 stat cards become one flat dark spec box (label left, value
right), placed to the right of the text from 1024px like the homepage hero's guarantee boxes. */
html body > .min-h-\[60vh\] > div.bg-canvas > section:first-child {
margin-top: 16px; background: #1e1226; color: #fff;
}
@media (min-width: 640px) {
html body > .min-h-\[60vh\] > div.bg-canvas > section:first-child { margin-top: 24px; }
}
/* Dark mode: same plum with a thin light outline, as the homepage hero */
html[data-theme="dark"] body > .min-h-\[60vh\] > div.bg-canvas > section:first-child { background: #22162b; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
/* Eyebrow ("Serveur Dofus"): the small uppercase label kept by the owner, in the lilac used on
plum (8.6:1); was the brand purple, 3:1 on plum */
html body > .min-h-\[60vh\] > div.bg-canvas > section:first-child > .eyebrow { color: rgba(220, 210, 246, .86); }
/* H1: white, homepage hero size; was 36px ink. When it wraps, no single word is left alone on
the last line */
html body > .min-h-\[60vh\] > div.bg-canvas > section:first-child > h1 {
margin-top: 8px; color: #fff; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; text-wrap: pretty;
}
/* Rating line: stars unchanged; "4,9/5" white, review count light grey (10:1) */
html body > .min-h-\[60vh\] > div.bg-canvas > section:first-child > div.mt-3 { margin-top: 12px; }
html body > .min-h-\[60vh\] > div.bg-canvas > section:first-child > div.mt-3 > .text-ink { color: #fff; }
html body > .min-h-\[60vh\] > div.bg-canvas > section:first-child > div.mt-3 > .text-muted { color: rgba(228, 225, 234, .86); }
html body > .min-h-\[60vh\] > div.bg-canvas > section:first-child > div.mt-3 svg[class*="fill-[#d9d4e6]"] { fill: rgba(236, 233, 243, .5); }
/* Intro callout → plain sentence under the title (no lavender box, no purple bar). The text is
unchanged */
html body > .min-h-\[60vh\] > div.bg-canvas > section:first-child > div.border-l-4 {
max-width: 680px; margin-top: 16px; padding: 0; border: 0; border-radius: 0; background: transparent;
}
html body > .min-h-\[60vh\] > div.bg-canvas > section:first-child > div.border-l-4 > p {
color: rgba(255, 255, 255, .85); font-size: 16px; line-height: 26px;
}
/* Buy button on plum: lilac with dark text (8.6:1), as on the homepage game cards; flat */
html body > .min-h-\[60vh\] > div.bg-canvas > section:first-child > div.mt-6 { margin-top: 24px; }
html body > .min-h-\[60vh\] > div.bg-canvas > section:first-child .btn-primary { background-color: #b8a4ee; color: #16151c; }
html body > .min-h-\[60vh\] > div.bg-canvas > section:first-child .btn-primary:hover { background-color: #a68fe6; color: #16151c; }
/* Stat cards → one flat dark box of rows, like the homepage hero boxes (dark surface,
8% white border), 1px dividers between rows */
html body > .min-h-\[60vh\] > div.bg-canvas > section:first-child > div.grid {
margin-top: 24px; gap: 0; grid-template-columns: minmax(0, 1fr);
background: rgba(12, 10, 16, .56); border: 1px solid rgba(255, 255, 255, .08); border-radius: 8px; overflow: hidden;
}
html body > .min-h-\[60vh\] > div.bg-canvas > section:first-child > div.grid > .card {
display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 11px 16px;
background: transparent; border: 0 solid rgba(255, 255, 255, .08); border-radius: 0; box-shadow: none;
}
html body > .min-h-\[60vh\] > div.bg-canvas > section:first-child > div.grid > .card + .card { border-top-width: 1px; }
/* Not links: hover keeps the same colors (the base's hover border color would show here) */
html body > .min-h-\[60vh\] > div.bg-canvas > section:first-child > div.grid > .card:hover {
background: transparent; border-color: rgba(255, 255, 255, .08); box-shadow: none;
}
/* Label: light grey 14px (10:1); value: white 15px bold, right-aligned */
html body > .min-h-\[60vh\] > div.bg-canvas > section:first-child > div.grid > .card > .eyebrow {
color: rgba(228, 225, 234, .86); font-size: 14px; line-height: 20px; font-weight: 400;
}
html body > .min-h-\[60vh\] > div.bg-canvas > section:first-child > div.grid > .card > .eyebrow + div {
margin-top: 0; color: #fff; font-size: 15px; line-height: 20px; font-weight: 700; text-align: right;
}
/* Price placeholder while the price loads: a faint white bar instead of a light grey one */
html body > .min-h-\[60vh\] > div.bg-canvas > section:first-child > div.grid .animate-pulse { background-color: rgba(255, 255, 255, .14); }
/* From 1024px: eyebrow and H1 across the whole block (the server titles are long, so the H1
stays on one line at 1280px instead of breaking in a narrow column), then the rating, sentence
and button on the left and the spec box on the right, both starting 16px under the title, as
the homepage hero's text and boxes (1.4fr / 1fr). The last row (1fr) takes any extra height,
so the text lines keep their spacing whichever column is taller */
@media (min-width: 1024px) {
html body > .min-h-\[60vh\] > div.bg-canvas > section:first-child {
display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
grid-template-rows: repeat(5, auto) 1fr; column-gap: 40px; align-items: start;
}
html body > .min-h-\[60vh\] > div.bg-canvas > section:first-child > * { grid-column: 1; }
html body > .min-h-\[60vh\] > div.bg-canvas > section:first-child > :is(.eyebrow, h1) { grid-column: 1 / -1; }
html body > .min-h-\[60vh\] > div.bg-canvas > section:first-child > div.mt-3 { margin-top: 16px; }
html body > .min-h-\[60vh\] > div.bg-canvas > section:first-child > div.grid {
grid-column: 2; grid-row: 3 / -1; margin-top: 16px;
}
}
/* ---------- Section intros ----------
Body-text paragraph under the title at the homepage width (900px, was 1140px); size, color and
spacing come from the base */
html body > .min-h-\[60vh\] > div.bg-canvas > section.container-1k > h2.section-title + p.max-w-content { max-width: 900px; }
/* ---------- 2, 4, 6. Icon cards ("Pourquoi acheter", "Livraison", "Pourquoi choisir") ----------
Like the homepage "why buy" cards: 20px padding, the 32px icon square next to the title,
text below at 14px / 22px (was 14px / 28px). Titles 16px / 24px as in the homepage guarantees
band (4 columns are too narrow for 18px). Gaps stay 16px. Not links: no hover reaction
(base). Section 6 gets its plum colors further down. */
html body > .min-h-\[60vh\] > div.bg-canvas > section.container-1k > div.grid > .hp-card.p-5 {
display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 12px; align-items: center; align-content: start;
padding: 20px;
}
html body > .min-h-\[60vh\] > div.bg-canvas > section.container-1k > div.grid > .hp-card.p-5 > span { width: 32px; height: 32px; margin: 0; }
html body > .min-h-\[60vh\] > div.bg-canvas > section.container-1k > div.grid > .hp-card.p-5 > h3 {
margin: 0; font-size: 16px; line-height: 24px;
}
html body > .min-h-\[60vh\] > div.bg-canvas > section.container-1k > div.grid > .hp-card.p-5 > p {
grid-column: 1 / -1; margin-top: 12px; font-size: 14px; line-height: 22px;
}
/* Cards side by side share their title row (subgrid): a one-line title sits centered in the
height of the longest title next to it, so all the texts of a row start on the same line
(they started 16-24px apart when one title wrapped and the next didn't). Browsers without
subgrid keep the card's own rows */
@supports (grid-template-rows: subgrid) {
html body > .min-h-\[60vh\] > div.bg-canvas > section.container-1k > div.grid > .hp-card.p-5 {
grid-row: span 2; grid-template-rows: subgrid; row-gap: 0;
}
html body > .min-h-\[60vh\] > div.bg-canvas > section.container-1k > div.grid > .hp-card.p-5 > p { align-self: start; }
}
/* ---------- 3. "Le serveur X en détail": one white panel ----------
Like the homepage intro panel: title and text inside a white panel with a 1px border, text
across the panel width; the 4 key points below a 1px divider */
html body > .min-h-\[60vh\] > div.bg-canvas > section.container-1k:has(> .prose-1k) {
margin-top: clamp(2rem, 4vw, 3rem); background: rgb(var(--surface)); border: 1px solid rgb(var(--line));
}
html body > .min-h-\[60vh\] > div.bg-canvas > section.container-1k:has(> .prose-1k) > .prose-1k { max-width: none; }
/* Title flush with the panel's top padding (the long-text style adds 32px above every h2) */
html body > .min-h-\[60vh\] > div.bg-canvas > section.container-1k:has(> .prose-1k) > .prose-1k > h2.section-title { margin-top: 0; }
html body > .min-h-\[60vh\] > div.bg-canvas > section.container-1k:has(> .prose-1k) > .prose-1k > p:last-child { margin-bottom: 0; }
html body > .min-h-\[60vh\] > div.bg-canvas > section.container-1k:has(> .prose-1k) > ul {
max-width: none; margin-top: 20px; padding-top: 20px; border-top: 1px solid rgb(var(--line)); gap: 10px 32px;
}
html body > .min-h-\[60vh\] > div.bg-canvas > section.container-1k:has(> .prose-1k) > ul > li { line-height: 22px; }
html body > .min-h-\[60vh\] > div.bg-canvas > section.container-1k:has(> .prose-1k) > ul > li > svg { margin-top: 2px; }
/* ---------- 5. Steps: one white panel with 1px dividers ----------
The 5 numbered cards become the rows of one panel (columns from 1024px), like the homepage
lists. Number square from the base (8px, purple tint); step text in regular weight */
html body > .min-h-\[60vh\] > div.bg-canvas > section.container-1k > ol.grid {
margin-top: 0; gap: 0; grid-template-columns: minmax(0, 1fr);
background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: 8px; overflow: hidden;
}
html body > .min-h-\[60vh\] > div.bg-canvas > section.container-1k > ol.grid > li.card {
align-items: center; gap: 12px; padding: 14px 20px;
background: transparent; border: 0 solid rgb(var(--line)); border-radius: 0; box-shadow: none;
}
html body > .min-h-\[60vh\] > div.bg-canvas > section.container-1k > ol.grid > li.card + li.card { border-top-width: 1px; }
html body > .min-h-\[60vh\] > div.bg-canvas > section.container-1k > ol.grid > li.card:hover {
background: transparent; border-color: rgb(var(--line)); box-shadow: none;
}
html body > .min-h-\[60vh\] > div.bg-canvas > section.container-1k > ol.grid > li.card > span + span {
padding-top: 0; color: rgb(var(--ink)); font-size: 14px; line-height: 22px; font-weight: 400;
}
@media (min-width: 1024px) {
html body > .min-h-\[60vh\] > div.bg-canvas > section.container-1k > ol.grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
html body > .min-h-\[60vh\] > div.bg-canvas > section.container-1k > ol.grid > li.card { flex-direction: column; align-items: flex-start; padding: 20px; }
html body > .min-h-\[60vh\] > div.bg-canvas > section.container-1k > ol.grid > li.card + li.card { border-top-width: 0; border-left-width: 1px; }
}
/* ---------- 6. "Pourquoi choisir 1Kamas": the plum guarantees band ----------
The section right before "Autres serveurs". Like the homepage guarantees band: one plum
block, the 2 cards as columns split by an 8% white line (stacked below 640px), white titles,
light grey text (9.6:1), the icon in a soft lilac square as in the homepage hero */
html body > .min-h-\[60vh\] > div.bg-canvas > section.container-1k:has(+ section:not(.container-1k)) > div.grid {
gap: 0; background: #1e1226; border-radius: 8px; overflow: hidden;
}
html body > .min-h-\[60vh\] > div.bg-canvas > section.container-1k:has(+ section:not(.container-1k)) > div.grid > .hp-card {
background: transparent; border: 0 solid rgba(255, 255, 255, .08); border-radius: 0; box-shadow: none;
}
html body > .min-h-\[60vh\] > div.bg-canvas > section.container-1k:has(+ section:not(.container-1k)) > div.grid > .hp-card + .hp-card { border-top-width: 1px; }
/* Not links: hover keeps the band's colors (no base hover border) */
html body > .min-h-\[60vh\] > div.bg-canvas > section.container-1k:has(+ section:not(.container-1k)) > div.grid > .hp-card:hover {
background: transparent; border-color: rgba(255, 255, 255, .08); box-shadow: none;
}
@media (min-width: 640px) {
html body > .min-h-\[60vh\] > div.bg-canvas > section.container-1k:has(+ section:not(.container-1k)) > div.grid > .hp-card { padding: 24px; }
html body > .min-h-\[60vh\] > div.bg-canvas > section.container-1k:has(+ section:not(.container-1k)) > div.grid > .hp-card + .hp-card { border-top-width: 0; border-left-width: 1px; }
}
html body > .min-h-\[60vh\] > div.bg-canvas > section.container-1k:has(+ section:not(.container-1k)) > div.grid > .hp-card > span {
background-color: rgba(220, 210, 246, .12); color: #dcd2f6;
}
html body > .min-h-\[60vh\] > div.bg-canvas > section.container-1k:has(+ section:not(.container-1k)) > div.grid > .hp-card > h3 { color: #fff; }
html body > .min-h-\[60vh\] > div.bg-canvas > section.container-1k:has(+ section:not(.container-1k)) > div.grid > .hp-card > p { color: rgba(228, 225, 234, .86); }
/* Dark mode: lifted to a 12% purple tint over the card surface with a faint purple outline,
like the homepage plum panels in 1k-palette.css, so it stands out from the dark page */
html[data-theme="dark"] body > .min-h-\[60vh\] > div.bg-canvas > section.container-1k:has(+ section:not(.container-1k)) > div.grid {
background: color-mix(in srgb, rgb(var(--brand)) 12%, rgb(var(--surface)));
box-shadow: inset 0 0 0 1px rgb(var(--brand) / .18);
}
html[data-theme="dark"] body > .min-h-\[60vh\] > div.bg-canvas > section.container-1k:has(+ section:not(.container-1k)) > div.grid > .hp-card,
html[data-theme="dark"] body > .min-h-\[60vh\] > div.bg-canvas > section.container-1k:has(+ section:not(.container-1k)) > div.grid > .hp-card:hover { border-color: rgb(var(--brand) / .16); }
/* ---------- 7. "Autres serveurs Ankama": the homepage server list ----------
Same component and same treatment as the homepage "Tous nos serveurs" panel (1k-compact.css):
one white panel, 2 columns of games below 1024px and 5 above, a small game logo before each
group name, and each server as a plain link row with a › chevron instead of a lavender tag.
The 22 links and their text are unchanged. */
html body > .min-h-\[60vh\] > div.bg-canvas > section:not(.container-1k) > section > .container-1k > .grid {
gap: 0; grid-template-columns: repeat(2, minmax(0, 1fr));
background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: 8px; overflow: hidden;
}
html body > .min-h-\[60vh\] > div.bg-canvas > section:not(.container-1k) > section > .container-1k > .grid > .card {
padding: 16px 12px; background: transparent; border: 0 solid rgb(var(--line)); border-radius: 0; box-shadow: none; transition: none;
}
/* Hover only cancels the site's hover colors; padding and dividers stay, so nothing shifts */
html body > .min-h-\[60vh\] > div.bg-canvas > section:not(.container-1k) > section > .container-1k > .grid > .card:hover {
background: transparent; border-color: rgb(var(--line)); box-shadow: none;
}
html body > .min-h-\[60vh\] > div.bg-canvas > section:not(.container-1k) > section > .container-1k > .grid > .card:nth-child(even) { border-left-width: 1px; }
html body > .min-h-\[60vh\] > div.bg-canvas > section:not(.container-1k) > section > .container-1k > .grid > .card:nth-child(n+3) { border-top-width: 1px; }
@media (min-width: 640px) {
html body > .min-h-\[60vh\] > div.bg-canvas > section:not(.container-1k) > section > .container-1k > .grid > .card { padding: 20px 16px; }
}
@media (min-width: 1024px) {
html body > .min-h-\[60vh\] > div.bg-canvas > section:not(.container-1k) > section > .container-1k > .grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
html body > .min-h-\[60vh\] > div.bg-canvas > section:not(.container-1k) > section > .container-1k > .grid > .card:nth-child(n) { border-top-width: 0; border-left-width: 0; }
html body > .min-h-\[60vh\] > div.bg-canvas > section:not(.container-1k) > section > .container-1k > .grid > .card + .card { border-left-width: 1px; }
}
/* Group heading: small game logo (the homepage card images, same group order in every
language) + group name in ink, sentence case; fixed height so all the lists start on one line */
html body > .min-h-\[60vh\] > div.bg-canvas > section:not(.container-1k) > section > .container-1k > .grid > .card > h3 {
display: flex; align-items: center; gap: 8px; min-height: 40px; margin: 0 0 10px;
color: rgb(var(--ink)); font-size: 14px; line-height: 18px; font-weight: 700; text-transform: none; letter-spacing: normal;
}
html body > .min-h-\[60vh\] > div.bg-canvas > section:not(.container-1k) > section > .container-1k > .grid > .card > h3::before {
content: ""; flex: none; width: 36px; height: 22px; border-radius: 6px; background: #24182c center / contain no-repeat;
/* The pictures have a plum background baked in: "lighten" over the #24182C tile (every channel
at or above the plum's) turns it into the tile's colour while the logo keeps its colours */
background-blend-mode: lighten;
}
html body > .min-h-\[60vh\] > div.bg-canvas > section:not(.container-1k) > section > .container-1k > .grid > .card:nth-child(1) > h3::before,
html body > .min-h-\[60vh\] > div.bg-canvas > section:not(.container-1k) > section > .container-1k > .grid > .card:nth-child(2) > h3::before { background-image: url(/cards/dofus-unity-kamas.png); }
html body > .min-h-\[60vh\] > div.bg-canvas > section:not(.container-1k) > section > .container-1k > .grid > .card:nth-child(3) > h3::before { background-image: url(/cards/dofus-retro-kamas-v3.webp); }
html body > .min-h-\[60vh\] > div.bg-canvas > section:not(.container-1k) > section > .container-1k > .grid > .card:nth-child(4) > h3::before { background-image: url(/cards/dofus-touch-kamas-v3.webp); }
html body > .min-h-\[60vh\] > div.bg-canvas > section:not(.container-1k) > section > .container-1k > .grid > .card:nth-child(5) > h3::before { background-image: url(/cards/wakfu-kamas-v3.webp); }
@media (min-width: 640px) {
html body > .min-h-\[60vh\] > div.bg-canvas > section:not(.container-1k) > section > .container-1k > .grid > .card > h3 { gap: 10px; font-size: 15px; line-height: 20px; }
html body > .min-h-\[60vh\] > div.bg-canvas > section:not(.container-1k) > section > .container-1k > .grid > .card > h3::before { width: 44px; height: 26px; }
}
/* Headings taller than 40px (es/pt "Dofus 3 Unity (servidores Pioneer)" wraps to 3 lines on
desktop, en/es/pt group names wrap on phones) pushed their list 14-20px below the lists next
to them. Each group now spans two rows of the panel grid (heading, list) and shares them with
the other groups of its row (subgrid): every heading in a row takes the tallest one's height,
logo and name centered in it, and all the lists start on one line. Browsers without subgrid
keep the 40px minimum above. */
@supports (grid-template-rows: subgrid) {
html body > .min-h-\[60vh\] > div.bg-canvas > section:not(.container-1k) > section > .container-1k > .grid > .card {
display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0;
}
}
/* Server links: plain rows with a chevron. On hover only the text and chevron turn purple: no
fill, no animation, nothing moves */
html body > .min-h-\[60vh\] > div.bg-canvas > section:not(.container-1k) > section > .container-1k > .grid > .card > div {
flex-direction: column; flex-wrap: nowrap; gap: 2px;
}
html body > .min-h-\[60vh\] > div.bg-canvas > section:not(.container-1k) > section > .container-1k > .grid > .card a.chip {
display: flex; justify-content: space-between; align-items: center; width: 100%; margin: 0; padding: 4px 8px;
border: 0; border-radius: 6px; background: transparent; color: rgb(var(--body));
font-size: 14px; line-height: 20px; font-weight: 500; transition: none;
}
html body > .min-h-\[60vh\] > div.bg-canvas > section:not(.container-1k) > section > .container-1k > .grid > .card a.chip::after {
content: "›"; color: rgb(var(--muted)); font-size: 16px; line-height: 1;
}
html body > .min-h-\[60vh\] > div.bg-canvas > section:not(.container-1k) > section > .container-1k > .grid > .card a.chip:hover {
background: transparent; color: rgb(var(--brand));
}
html body > .min-h-\[60vh\] > div.bg-canvas > section:not(.container-1k) > section > .container-1k > .grid > .card a.chip:hover::after { color: rgb(var(--brand)); }
/* The page's own server, which the list also links to (Tylezia's page lists Tylezia): marked
as the current page, the way an active filter is, with a light purple row and bold purple
text (darker purple in light mode, 5.5:1; brand purple in dark mode, 6.5:1). Found by matching
the link to the page's canonical URL, one entry per server slug, so it works in all 4
languages. The link and its text are unchanged; it keeps these colors on hover */
html[data-theme="dark"] body > .min-h-\[60vh\] > div.bg-canvas { --k1-current: var(--brand); }
html body > .min-h-\[60vh\] > div.bg-canvas > section:not(.container-1k) > section > .container-1k > .grid > .card a.chip:is(
:root:has(link[rel="canonical"][href$="/allisteria/"]) [href$="/allisteria/"],
:root:has(link[rel="canonical"][href$="/blair/"]) [href$="/blair/"],
:root:has(link[rel="canonical"][href$="/boune/"]) [href$="/boune/"],
:root:has(link[rel="canonical"][href$="/brial/"]) [href$="/brial/"],
:root:has(link[rel="canonical"][href$="/dakal/"]) [href$="/dakal/"],
:root:has(link[rel="canonical"][href$="/draconiros/"]) [href$="/draconiros/"],
:root:has(link[rel="canonical"][href$="/fallanster/"]) [href$="/fallanster/"],
:root:has(link[rel="canonical"][href$="/hellmina/"]) [href$="/hellmina/"],
:root:has(link[rel="canonical"][href$="/imagiro/"]) [href$="/imagiro/"],
:root:has(link[rel="canonical"][href$="/kelerog/"]) [href$="/kelerog/"],
:root:has(link[rel="canonical"][href$="/kourial/"]) [href$="/kourial/"],
:root:has(link[rel="canonical"][href$="/mikhal/"]) [href$="/mikhal/"],
:root:has(link[rel="canonical"][href$="/ogrest/"]) [href$="/ogrest/"],
:root:has(link[rel="canonical"][href$="/ombre/"]) [href$="/ombre/"],
:root:has(link[rel="canonical"][href$="/orukam/"]) [href$="/orukam/"],
:root:has(link[rel="canonical"][href$="/pandora/"]) [href$="/pandora/"],
:root:has(link[rel="canonical"][href$="/rafal/"]) [href$="/rafal/"],
:root:has(link[rel="canonical"][href$="/rubilax/"]) [href$="/rubilax/"],
:root:has(link[rel="canonical"][href$="/salar/"]) [href$="/salar/"],
:root:has(link[rel="canonical"][href$="/tal-kasha/"]) [href$="/tal-kasha/"],
:root:has(link[rel="canonical"][href$="/tiliwan/"]) [href$="/tiliwan/"],
:root:has(link[rel="canonical"][href$="/tylezia/"]) [href$="/tylezia/"]
) {
background: rgb(var(--brand) / .08); color: rgb(var(--k1-current, var(--brand-dark))); font-weight: 700;
}
/* ---------- 8. FAQ: the homepage FAQ panel ----------
Title, questions and the buy button inside one white panel (the homepage puts its FAQ title
inside the panel). The question list itself drops the panel look the base gives it; rows keep
a 1px line under each question, 15px bold questions and 14px / 22px answers (base), two
columns from 1024px with a 32px gap as on the homepage. */
html body > .min-h-\[60vh\] > div.bg-canvas > section.container-1k:last-of-type:has(> .divide-y > details) {
margin-top: clamp(2rem, 4vw, 3rem); background: rgb(var(--surface)); border: 1px solid rgb(var(--line));
}
html body > .min-h-\[60vh\] > div.bg-canvas > section.container-1k:last-of-type > .divide-y.divide-line.border-t.border-line {
margin-top: 0; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; column-gap: 32px;
}
/* Every row: one line underneath (the homepage FAQ has a line under its last rows too) */
html body > .min-h-\[60vh\] > div.bg-canvas > section.container-1k:last-of-type > .divide-y.divide-line.border-t.border-line > details.group {
border-style: solid; border-color: rgb(var(--line)); border-width: 0 0 1px 0;
}
html body > .min-h-\[60vh\] > div.bg-canvas > section.container-1k:last-of-type > .divide-y.divide-line.border-t.border-line > details.group > p { margin-top: 8px; }
/* Buy button under the questions: 24px below (was 32px) */
html body > .min-h-\[60vh\] > div.bg-canvas > section.container-1k:last-of-type > div.mt-8 { margin-top: 24px; }