/* 7Kingdoms — local overrides on top of the template's site.css.
Kept separate so a re-shipped template can replace site.css without losing
these, and so it is obvious what we changed versus what the designer shipped.
Hero character sizing
---------------------
The template's cutouts were roughly square (e.g. 706x650). The commissioned
art is portrait (780x1040), so at the template's widths every character
rendered 16-106% taller and the composition drifted. These widths restore the
rendered HEIGHT the design was built around — the characters stand on the
hero floor, so height is what the eye reads. Tune freely; nothing else
depends on these numbers. */
.character-home--male { width: 269px; }
.character-home--blonde { width: 253px; }
.character-home--red { width: 177px; }
.character-home--mage { width: 112px; }
@media (max-width: 1280px) {
.character-home--male { width: 224px; }
.character-home--blonde { width: 221px; }
.character-home--red { width: 129px; }
.character-home--mage { width: 78px; }
}
@media (max-width: 1040px) {
.character-home--male { width: 193px; }
.character-home--blonde { width: 179px; }
}
/* The mascot was removed from the hero on 2026-10-11 (the creature did not match the
game's art). assets/characters/mascot-blue.png stays on disk, unreferenced. */
/* Hero character depth
-------------------
site.css gives the characters no z-index, so they stack purely by DOM order
and the red fighter (second in the markup) painted over the boy (first).
Setting it explicitly means the depth is stated rather than implied by the
order of five ![]()
tags, and re-ordering the markup cannot silently change
the composition. Larger = nearer the viewer.
They all sit inside .hero-characters, which is its own stacking context
(position:absolute; z-index:-1), so these values stay local to the hero. */
.character-home--red { z-index: 1; } /* behind the boy */
.character-home--mage { z-index: 1; } /* behind the blonde */
.character-home--male { z-index: 2; }
.character-home--blonde { z-index: 2; }
/* 404 artwork
----------
A full-bleed scene inside the panel. width/height are on the ![]()
too so the
browser reserves the space before it loads and the buttons do not jump. */
.not-found-art{
display:block;
width:100%;
height:auto;
max-width:760px;
margin:0 auto 18px;
border-radius:12px;
}
.not-found{text-align:center}
.not-found-actions{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:14px}
/* Donate: the "I am logged out of the game" confirmation the buyer must tick before
a tier button will submit. Kept visually close to .notice so it reads as part of
the same warning rather than an ordinary form field. */
.donate-confirm{display:flex;gap:10px;align-items:flex-start;margin:18px 0 4px;
padding:13px 16px;border:1px solid #efca81;border-left:5px solid #eba944;
border-radius:10px;background:#fff7db;color:#886123;font-size:13px;line-height:1.55}
.donate-confirm input{margin:2px 0 0;width:17px;height:17px;flex:0 0 17px;accent-color:#b9771c}
.donate-confirm span{min-width:0}
/* Features: the one-line tiles had nowhere to put detail. Two wider cards per row,
left-aligned, icon beside the heading instead of centred above it, so a lead line
and a paragraph or two can sit underneath without the card looking stretched. */
.feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px}
.feature-card{padding:24px 26px;text-align:left}
.feature-head{display:flex;align-items:center;gap:13px;margin-bottom:10px}
.feature-head img{width:44px;height:44px;flex:0 0 44px}
.feature-head h3{margin:0;font-size:18px}
.feature-card .lead{font-size:13.5px;font-weight:800;color:#2d5c96;margin:0 0 9px}
.feature-card .detail{font-size:13px;line-height:1.72;color:#6985a4;margin:0 0 9px}
.feature-card .detail:last-child{margin-bottom:0}
.feature-card .label{margin-bottom:11px}
@media (max-width:860px){.feature-grid{grid-template-columns:1fr}}
/* Community: Top 100 boards + world statistics. Bars are divs rather than a chart
library — the site ships no JS charting, and each bar carries its figure as text so
the numbers read correctly even if the fill does not paint. */
.board-scroll{overflow-x:auto;margin-top:14px}
.board{width:100%;border-collapse:collapse;font-size:13px}
.board th,.board td{padding:9px 12px;text-align:left;border-bottom:1px solid #e1eaf3;white-space:nowrap}
.board th{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:#7187a6;font-weight:900}
.board td.num,.board th.num{text-align:right}
.board td.rank{width:46px;color:#7187a6;font-weight:900}
.board td.who{font-weight:900;color:#17559b}
.board td.strong{font-weight:900;color:#0a418e}
.board tbody tr:hover{background:#f4faff}
.board tr.podium td.rank{color:#b9771c}
.board tr.podium-1 td.rank:before{content:"\1F947 "}
.board tr.podium-2 td.rank:before{content:"\1F948 "}
.board tr.podium-3 td.rank:before{content:"\1F949 "}
.stat-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:14px;margin-top:18px}
.stat-tile{text-align:center;padding:20px 12px}
.stat-figure{display:block;font:900 24px/1.1 Cinzel,Georgia,serif;color:#0a418e}
.stat-label{display:block;margin-top:6px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#7187a6;font-weight:900}
.stat-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px}
.bars{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:9px}
.bars li{display:grid;grid-template-columns:minmax(120px,34%) 1fr auto;align-items:center;gap:11px}
.bar-name{font-size:12.5px;font-weight:800;color:#2d5c96;min-width:0;overflow:hidden;text-overflow:ellipsis}
.bar-name small{display:block;font-size:10.5px;font-weight:700;color:#8fa4bf;text-transform:uppercase;letter-spacing:.06em}
.bar-track{height:12px;border-radius:6px;background:#e8f1fb;overflow:hidden}
.bar-fill{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#2f8ae0,#0b5bb5)}
.bar-fill--alt{background:linear-gradient(90deg,#f0b43c,#c3801b)}
.bar-num{font-size:12.5px;font-weight:900;color:#0a418e;text-align:right;min-width:52px}
@media (max-width:1100px){.stat-row{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.stat-cols{grid-template-columns:1fr}.stat-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Community: filter row above the item bars. Wraps on narrow screens rather than
squeezing the search box down to nothing. */
.item-filter{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:14px 0 10px}
.item-filter input[type=search]{flex:1 1 170px;min-width:0;padding:8px 11px;border:1px solid #c5d9ef;
border-radius:9px;background:#fff;color:#20406d;font-size:13px}
.item-filter select{padding:8px 10px;border:1px solid #c5d9ef;border-radius:9px;background:#fff;
color:#20406d;font-size:13px}
.item-filter .ghost-action{padding:8px 16px;font-size:13px;font-weight:900}
.item-filter input[type=search]:focus,.item-filter select:focus{outline:2px solid #7fb4ea;outline-offset:1px}
/* Donate: currency picker and the indicative price under each tier. The approximation is
deliberately quieter than the AUD figure — it must never be mistaken for the price. */
.cur-picker{display:flex;flex-wrap:wrap;gap:9px;align-items:center;margin:16px 0 0}
.cur-picker label{font-size:12px;font-weight:900;color:#7187a6;text-transform:uppercase;letter-spacing:.07em}
.cur-picker select{padding:8px 10px;border:1px solid #c5d9ef;border-radius:9px;background:#fff;color:#20406d;font-size:13px}
.cur-picker .small-note{flex:1 1 260px;min-width:0}
.tier-approx{display:block;margin-top:2px;font-size:12px;font-weight:800;color:#8fa4bf}
/* Donate: the pre-discount price, struck through beside what you actually pay. */
.tier-was{color:#9fb2c9;font-weight:700;margin-right:5px;text-decoration:line-through}
/* Coupon redeem box, shared by the account and donate pages. */
.redeem-form{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-top:12px}
.redeem-form input[type=text]{flex:1 1 220px;min-width:0;padding:10px 13px;border:1px solid #c5d9ef;
border-radius:9px;background:#fff;color:#20406d;font:700 15px/1.2 ui-monospace,Menlo,Consolas,monospace;
letter-spacing:.09em;text-transform:uppercase}
.redeem-form input[type=text]:focus{outline:2px solid #7fb4ea;outline-offset:1px}
/* Donate: premium perk lists. */
.perk-list{margin:10px 0 0;padding-left:20px;display:grid;gap:7px}
.perk-list li{font-size:13.5px;line-height:1.62;color:#44618a}
.perk-list li strong{color:#20406d}
/* Donate: grouped "what points buy" catalogue. */
.buy-head{margin:18px 0 6px;font-size:13px;letter-spacing:.07em;text-transform:uppercase;color:#b9771c}
.buy-list{margin:0;padding-left:20px;display:grid;gap:6px}
.buy-list li{font-size:13.5px;line-height:1.6;color:#44618a}
.buy-list li strong{color:#20406d}
/* ---- Donate page -------------------------------------------------------------
It had grown into a stack of identical white cards — a newsletter rather than a
store. The hero, the gold premium panel and the three-up catalogue give the page
a shape: who we are, what it costs, what you get, what else is coming. */
/* The standalone intro card was a full-width row holding one collapsed line, directly
above a checkbox saying the same thing. The detail now hangs off that checkbox. */
.donate-howto{margin:6px 0 0 29px}
.donate-howto summary{cursor:pointer;font-size:13px;color:#b9771c;list-style:none}
.donate-howto summary::-webkit-details-marker{display:none}
.donate-howto summary:before{content:"\25B8 ";transition:transform .15s}
.donate-howto[open] summary:before{content:"\25BE "}
.donate-howto p{margin:9px 0 0;font-size:13px;line-height:1.68;color:#6985a4}
/* Premium: gold-edged so it reads as an offer, not another text card. */
.premium-panel{border:1px solid #e8c988;background:
linear-gradient(180deg,#fffaf0 0,#fff 150px);box-shadow:0 12px 30px rgba(185,119,28,.10)}
.premium-panel h2{color:#9a6512}
.premium-panel h3{margin:20px 0 4px;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:#b9771c}
.premium-panel .panel-title{border-bottom-color:#eedcb4}
/* The catalogue: three columns of cards rather than three stacked bullet lists. */
.buy-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}
.buy-card{border:1px solid #d8e6f5;border-radius:13px;background:#fbfdff;padding:17px 19px}
.buy-card .buy-head{margin:0 0 9px}
.buy-card .buy-list{padding-left:18px}
@media (max-width:980px){.buy-grid{grid-template-columns:1fr 1fr}}
@media (max-width:680px){.buy-grid{grid-template-columns:1fr}}
/* Tier cards: lift them off the page so the prices are the focus. */
.tier-grid{margin-top:16px}
.tier-card{transition:transform .15s,box-shadow .15s}
.tier-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(17,86,169,.16)}
.tier-featured{border-color:#e8c988;box-shadow:0 10px 26px rgba(185,119,28,.14)}
/* ---- Donate: two-up layout ---------------------------------------------------
The buying half takes two thirds, premium runs down the last third. The currency
control is a bare select in a slim toolbar — the prices beside it say what it is,
so the label was just noise. */
.donate-toolbar{display:flex;justify-content:flex-end;margin:0 0 12px}
.cur-picker--mini{margin:0;gap:6px}
.cur-picker--mini select{padding:6px 9px;font-size:12.5px;font-weight:800;color:#2d5c96;
border:1px solid #c5d9ef;border-radius:8px;background:#fff}
.donate-cols{display:grid;grid-template-columns:2fr 1fr;gap:18px;align-items:start}
.donate-main,.donate-side{display:grid;gap:18px;align-content:start;min-width:0}
.donate-side .premium-panel{position:sticky;top:16px}
.donate-side .perk-list{padding-left:17px}
.donate-side .perk-list li{font-size:12.5px;line-height:1.55}
.redeem-card{background:#fbfdff}
/* the catalogue sits full width below the columns, so three across is right again */
@media (max-width:1050px){
.donate-cols{grid-template-columns:1fr}
.donate-side .premium-panel{position:static}
}
/* .buy-grid already collapses on its own breakpoints */