/* ============================================================================ Isometricland — website design system ("skeuo.css") Ported straight from the game's own palette (src/Isometricland.App/App.axaml) and the beveled-button recipe (Styles/Skeuo.axaml). Wood + brass + embossed cream, on a deep espresso cabinet. "RCT2 / Locomotion / SimCity 4 era." NOTE: all page COPY is placeholder — the owner writes every word himself. ============================================================================ */ :root { /* Wood-toned palette stops */ --wood-highlight:#C39668; --wood-light:#9B6A3E; --wood-mid:#7B4F2A; --wood-dark:#5A3818; --wood-shadow:#33200E; --wood-line:#1C0F05; /* Brass / gold trim */ --brass-highlight:#FFE9A8; --brass-light:#F5C25A; --brass-mid:#C99230; --brass-dark:#7E5A12; /* Text */ --label:#F4E8D2; --label-hi:#FFF7DD; --label-dim:#A89880; --emboss-dark:#1C0F05; --title-gold:#F4D49B; /* Cabinet */ --bg:#1A0E04; --bg-2:#241505; --panel-line:#80522A; /* Themed-park category accents (saturated, RCT-vibe) */ --cat-rides:#C9532A; --cat-shops:#D9A640; --cat-decor:#3F9C7E; --cat-build:#5C7589; --cat-paths:#7E6240; --cat-terrain:#7B5832; --cat-view:#4B6B9E; --cat-time:#8B4FA8; --cat-foliage:#4E8F2C; --cat-people:#B66A2E; /* The game's checkered grass */ --grass-lt:#73B353; --grass-dk:#629F46; --grass-tile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='32'%3E%3Crect width='64' height='32' fill='%23629F46'/%3E%3Cpath d='M32 0 L64 16 L32 32 L0 16 Z' fill='%2373B353'/%3E%3Cg stroke='%234E8A38' stroke-width='1' stroke-linecap='round' opacity='.5'%3E%3Cpath d='M13 19 l1.6 -3.2'/%3E%3Cpath d='M45 9 l1.6 -3.2'/%3E%3Cpath d='M30 26 l1.3 -2.7'/%3E%3Cpath d='M57 24 l1.3 -2.7'/%3E%3C/g%3E%3Cg opacity='.45'%3E%3Ccircle cx='51' cy='21' r='.85' fill='%238CC46A'/%3E%3Ccircle cx='9' cy='7' r='.85' fill='%238CC46A'/%3E%3Ccircle cx='38' cy='28' r='.7' fill='%23E8E2A8'/%3E%3C/g%3E%3C/svg%3E"); --shadow-drop:0 3px 4px rgba(0,0,0,.55); --shadow-deep:0 6px 18px rgba(0,0,0,.55); --font-display:"Trebuchet MS", "Segoe UI", system-ui, sans-serif; /* friendly, period-honest (1996) */ --font-body:"Segoe UI", system-ui, -apple-system, Roboto, sans-serif; --font-mono:"Consolas", "Menlo", monospace; } /* ---- The display face ------------------------------------------------------- Rye: a revival of 1880s-90s American wood type — the Main Street / travelling show voice, and the same face the mark uses, so a headline set in it reads as the park's own signage rather than a web font. Declared HERE, in the system every page loads, because more than one page wants the signage voice now. A font is only fetched when something actually sets it, so pages that don't use Rye pay nothing for this. */ @font-face { font-family:"Rye"; /* WOFF2 first, TTF kept behind it: same glyph data, ~66% smaller over the wire (Rye: 179 KB -> 46 KB). A browser takes the first format it understands, so the .ttf costs nobody a byte and still covers anything that predates WOFF2. Rebuild with `python tools/make_woff2.py` after replacing a .ttf -- a stale .woff2 beside a fresh .ttf is a face whose metrics silently no longer match the one this stylesheet measured. */ src:url("../assets/fonts/Rye.woff2") format("woff2"), url("../assets/fonts/Rye.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; } * { box-sizing:border-box; } html { scroll-behavior:smooth; } /* The page sits on the game's own ground: 2:1 isometric grass diamonds in the exact two greens the renderer uses (#73B353 / #629F46), with a few blades and clover flecks per tile so it reads as turf rather than a checkerboard. */ body { margin:0; font-family:var(--font-body); color:var(--label); background-color:var(--grass-dk); background-image:var(--grass-tile); background-size:64px 32px; background-attachment:fixed; line-height:1.6; -webkit-font-smoothing:antialiased; } .grass-bg{ background-color:var(--grass-dk); background-image:var(--grass-tile); background-size:64px 32px; } a { color:var(--brass-light); text-decoration:none; } a:hover { color:var(--brass-highlight); } img { max-width:100%; display:block; } /* ---- Wood-grain surface (header / footer / toolbars) ------------------------ A faithful port of the game's toolbar: WoodToolbarBrush (a 5-stop vertical gradient) with WoodGrainOverlay laid over it at 85% opacity. The grain is ONE soft gradient spanning the full width with irregular bands at 5/20/40/60/85% — it is NOT planked, and it has no repeating edges. (App.axaml lines 44-67.) Alphas below are the game's #1B/#19/#15 black multiplied by that 0.85. */ .wood { background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.090) 5%, rgba(0,0,0,0) 10%, rgba(0,0,0,.090) 20%, rgba(0,0,0,0) 30%, rgba(0,0,0,.083) 40%, rgba(0,0,0,0) 50%, rgba(0,0,0,.090) 60%, rgba(0,0,0,0) 70%, rgba(0,0,0,.070) 85%, rgba(0,0,0,0) 100%), linear-gradient(180deg, var(--wood-highlight) 0%, var(--wood-light) 18%, var(--wood-mid) 55%, var(--wood-dark) 95%, var(--wood-shadow) 100%); border-bottom:2px solid var(--wood-line); box-shadow:var(--shadow-drop); } .wood--footer { border-bottom:none; border-top:2px solid var(--wood-line); } /* ---- Brass-rimmed bezel panel (game's Border.Bezel) ------------------------- */ .bezel { background:linear-gradient(180deg, #2F2114 0%, #1B1108 100%); border:1px solid var(--brass-mid); border-radius:10px; box-shadow:0 0 4px 1px rgba(0,0,0,.5) inset, var(--shadow-drop); padding:22px; } /* ---- Embossed nameplate — the in-world "WOODEN COASTER" plaque motif -------- */ .nameplate { display:inline-block; background:linear-gradient(180deg,#3a2410 0%, #25160a 100%); border:2px solid var(--brass-mid); border-radius:9px; padding:8px 22px; color:var(--label-hi); font-family:var(--font-display); font-weight:700; letter-spacing:.14em; text-transform:uppercase; text-shadow:0 -1px 0 #000, 0 1px 0 rgba(255,233,168,.18); box-shadow:0 3px 5px rgba(0,0,0,.55), inset 0 0 9px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,233,168,.20); } /* ---- Skeuomorphic button — the Skeuo.axaml bevel stack in one element ------- drop shadow -> dark outline -> brass bevel -> gradient plate -> embossed text */ .btn { --plate-a:#A06E40; --plate-b:#8D5B2E; --plate-c:#6E4422; --plate-d:#5A371A; display:inline-flex; align-items:center; justify-content:center; gap:.5em; font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--label); cursor:pointer; user-select:none; padding:12px 22px; min-height:42px; border:none; border-radius:8px; background: linear-gradient(180deg, var(--plate-a) 0%, var(--plate-b) 35%, var(--plate-c) 85%, var(--plate-d) 100%); box-shadow: 0 3px 4px rgba(0,0,0,.6), /* drop shadow */ 0 0 0 1px var(--wood-line), /* dark outline */ 0 0 0 2px var(--brass-mid), /* brass bevel */ inset 1px 1px 0 rgba(255,233,168,.55), /* top-left highlight */ inset -1px -1px 0 rgba(0,0,0,.35); text-shadow:0 1px 0 var(--emboss-dark); transition:filter .12s ease, transform .06s ease; } .btn:hover { filter:brightness(1.12); box-shadow: 0 3px 4px rgba(0,0,0,.6), 0 0 0 1px var(--wood-line), 0 0 0 2px var(--brass-light), 0 0 10px rgba(255,208,106,.35), inset 1px 1px 0 rgba(255,247,221,.7), inset -1px -1px 0 rgba(0,0,0,.35); } .btn:active { transform:translateY(1px); filter:brightness(.92); } /* category-tinted plates (top-tab gradients from App.axaml) */ .btn--rides { --plate-a:#E27040; --plate-b:#BE3F1E; --plate-c:#a5300f; --plate-d:#841C0C; } .btn--donate { --plate-a:#F1C658; --plate-b:#C68A20; --plate-c:#9a6a12; --plate-d:#82570B; color:#2a1806; text-shadow:0 1px 0 rgba(255,247,221,.4); } .btn--build { --plate-a:#8FA6B8; --plate-b:#5C7589; --plate-c:#465c6e; --plate-d:#34485A; } .btn--decor { --plate-a:#62C09E; --plate-b:#2F8A6E; --plate-c:#20735a; --plate-d:#16553F; } .btn--ghost { background:transparent; box-shadow:0 0 0 1px var(--brass-mid); color:var(--label); text-shadow:0 1px 0 #000; } .btn--lg { font-size:17px; padding:15px 30px; min-height:52px; } /* ---- Category tab (top nav) — the ToggleButton.Top look --------------------- */ .tab { font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:.02em; color:var(--label); padding:9px 16px; border-radius:7px; cursor:pointer; background:linear-gradient(180deg,#5a3a1e,#3d2712); box-shadow:0 0 0 1px var(--wood-line), 0 0 0 2px var(--brass-dark), inset 1px 1px 0 rgba(255,233,168,.25); text-shadow:0 1px 0 var(--emboss-dark); } .tab:hover { box-shadow:0 0 0 1px var(--wood-line), 0 0 0 2px var(--brass-light), inset 1px 1px 0 rgba(255,247,221,.5); } .tab--active { box-shadow:0 0 0 1px var(--wood-line), 0 0 0 2px var(--brass-highlight), 0 0 9px rgba(255,208,106,.4), inset 1px 1px 0 rgba(255,247,221,.6); } /* ---- Ride tile — the game's brass-rimmed palette thumbnail ------------------ */ .ride-tile { background:linear-gradient(180deg,#2a1a0c,#180d05); border-radius:12px; padding:8px 8px 4px; overflow:hidden; box-shadow:0 0 0 1px var(--wood-line), 0 0 0 2px var(--brass-mid), var(--shadow-drop); transition:transform .14s ease, box-shadow .14s ease; } .ride-tile:hover { transform:translateY(-4px); box-shadow:0 0 0 1px var(--wood-line), 0 0 0 2px var(--brass-highlight), 0 10px 22px rgba(0,0,0,.5); } .ride-tile__art { border-radius:7px; overflow:hidden; aspect-ratio:3/2; display:flex; align-items:center; justify-content:center; background: conic-gradient(from 0deg at 50% 50%, var(--grass-lt) 0 25%, var(--grass-dk) 0 50%, var(--grass-lt) 0 75%, var(--grass-dk) 0) ; background-size:34px 17px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.35); } .ride-tile__art img { width:100%; height:100%; object-fit:cover; } .ride-tile__name { text-align:center; padding:9px 4px 6px; } /* ---- Section headers -------------------------------------------------------- */ .section { max-width:1160px; margin:0 auto; padding:64px 24px; } .section__eyebrow { color:var(--brass-light); font-family:var(--font-display); font-weight:700; letter-spacing:.22em; text-transform:uppercase; font-size:12px; } h1,h2,h3 { font-family:var(--font-display); color:var(--title-gold); margin:.2em 0 .4em; text-shadow:0 2px 0 var(--emboss-dark), 0 3px 6px rgba(0,0,0,.5); line-height:1.12; } h1 { font-size:clamp(34px, 5.4vw, 60px); } h2 { font-size:clamp(26px, 3.6vw, 40px); } h3 { font-size:20px; color:var(--label-hi); } /* ---- Placeholder "slot" — makes it unmistakable the words aren't final ------ */ .slot { color:var(--label-dim); font-style:italic; border-bottom:1px dashed rgba(201,146,48,.55); } .lorem { color:#b8a888; } .slot-note { font-family:var(--font-mono); font-size:12.5px; color:#e9c98a; background:rgba(20,10,3,.7); border:1px dashed var(--brass-mid); border-radius:8px; padding:8px 14px; display:flex; gap:10px; align-items:center; justify-content:center; } /* ---- Grass strip accent ----------------------------------------------------- */ .grass-strip { height:26px; background: conic-gradient(from 0deg at 50% 50%, var(--grass-lt) 0 25%, var(--grass-dk) 0 50%, var(--grass-lt) 0 75%, var(--grass-dk) 0); background-size:44px 22px; border-top:2px solid var(--wood-line); border-bottom:2px solid var(--wood-line); box-shadow:inset 0 3px 6px rgba(0,0,0,.35); } /* ---- Utility --------------------------------------------------------------- */ .grid { display:grid; gap:20px; } .cols-3 { grid-template-columns:repeat(3, 1fr); } .cols-4 { grid-template-columns:repeat(4, 1fr); } .center { text-align:center; } .muted { color:var(--label-dim); } .stack > * + * { margin-top:14px; } /* A line carried for screen readers only — used wherever the visible version of a sentence is decoration (per-letter spans, a price split into parts). */ .sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; } @media (max-width:900px){ .cols-3,.cols-4 { grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .cols-3,.cols-4 { grid-template-columns:1fr; } } /* ── The empty canvas: the game's ground, waiting to be built on ─────────── */ .canvas{ min-height:calc(100vh - 118px); display:block; } /* ══ THE SITE FOOTER ═══════════════════════════════════════════════════════ Added 2026-08-21. Until now NO page on this site had a footer at all — the only route to the fine print was a link the donate page and the buy page each carried in their own body copy, which meant /index, /about, /board and /thanks had no route to it whatsoever. A site that takes money must put its terms one click from every page, so this strip is stamped onto all of them by tools/stamp_footer.py. ⚑ IT IS DELIBERATELY SMALL (owner: "not big — of course, nobody generally cares about that"). Small is not the same as hidden: it is real text at a readable size, in the document's normal flow at the end of the page, which is exactly where a person goes looking for it. What it must NOT be is a second attraction competing with the midway above it. It lives in skeuo.css rather than pay.css because skeuo.css is the one stylesheet EVERY page loads (index takes blocks/hero/pitch, about takes about.css, the money pages take pay.css — only this file is common to all eight). A footer in pay.css would have been unstyled on /index and /about. ⛔⛔ IT HAS TO BE ON SOMETHING, AND THE FIRST DRAFT WASN'T — WHICH IS THE THIRD TIME THIS SITE HAS LEARNED THE SAME LESSON. pay.css writes the rule down twice already, for .pay__eyebrow and again for .fineway: dim or accent-coloured type set LOOSE on the bright grass tile "is legible as a shape and not as words". This footer sits at the very bottom of , which on every page is the grass — and the first cut set the copyright line in --label-dim (#A89880) directly on it. ⭐ MEASURED, NOT EYEBALLED: tools/contrast_probe.py against the rendered page returned p05 CONTRAST 1.04:1 with a worst ink pixel of 1.03, against that tool's stated 3.0:1 bar for text this size. 1.04 is not "a bit low", it is the same colour. So the row gets its own dark ground — the same rgba(20,10,3) brass-lipped chip as .gv-smallprint and .pay__stamp, the cheapest object in this cabinet that puts a readable field under a sentence. ⚠ THE PLATE GOES ON .sitefoot__in, NOT ON .sitefoot. The outer element is full-bleed; painting it there would draw a dark band the whole width of the viewport, which is a footer BAR — a much louder object than the owner asked for. The inner row is fit-content, so the ground is exactly as wide as the words and the strip still reads as a quiet line on the lawn. ══ */ .sitefoot{ margin-top:60px; padding:18px 20px 26px; font-size:13px; line-height:1.7; text-align:center; } .sitefoot__in{ /* fit-content + auto margins: the plate is the size of the sentence. */ width:fit-content; max-width:calc(100% - 40px); margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px 14px; padding:9px 20px; border-radius:20px; background:rgba(20,10,3,.78); box-shadow:0 0 0 1px rgba(126,90,18,.55), var(--shadow-drop); color:var(--label); } /* The separators are drawn by CSS rather than typed as "·" between the links, so a wrap never strands a lone middot at the start of a line and a screen reader never announces one. */ .sitefoot__in > * + *::before{ content:"·"; margin-right:14px; color:var(--brass-mid); opacity:.9; } .sitefoot a{ color:var(--brass-light); text-decoration:underline; text-underline-offset:3px; } .sitefoot a:hover{ color:var(--brass-highlight); } /* --label, not --label-dim. On the dark plate the dim tone is readable, but this line names the person you are contracting with — it is not a decoration to be pushed toward the background. */ .sitefoot__legal{ color:var(--label); } @media (max-width:560px){ /* Below the wrap point the row becomes a column, and a leading "·" on a line of its own is noise — so the separator goes with the layout that needed it. */ .sitefoot__in{ flex-direction:column; gap:5px; padding:11px 20px; } .sitefoot__in > * + *::before{ content:none; margin-right:0; } }