/* ============================================================
InZo — the player-side foundation
WHAT THIS IS
The design system the 21 InZo mockups already agree on, pulled into one
file so the 35 real pages can be converted against it instead of each
one carrying its own copy.
WHY IT IS SAFE TO TRUST
These are not my preferences. Every token below was checked across all
21 mockups: 36 of the 43 custom properties are byte-identical in every
one of them. The design system is coherent — it just was not written
down anywhere.
The seven that differ are almost entirely inzo-landing.html, which runs
a deliberately warmer palette (#0A0B09 ink, #E9A93B gold, Space Grotesk)
because it is a marketing page rather than part of the app. That stays
its own thing; it is not drift to be corrected.
HOW TO USE IT
then delete the page's own copies of anything defined here. A page keeps
only what is genuinely its own. Convert one page at a time and check it
before moving on — this file changing is the one thing that can affect
every page at once.
WHAT IS DELIBERATELY NOT HERE
Components. Across the mockups only 9 component rules are byte-identical
— cards, lists, pills and tables have each drifted per page. Hoisting a
guess at them now would push one page's variant onto 34 others. They get
consolidated as pages convert and the real common shape becomes visible.
============================================================ */
/* ── TOKENS ────────────────────────────────────────────────── */
:root{
/* surfaces, darkest to lightest */
--ink:#0A0E14; /* page background */
--surface:#111720; /* bars and sticky chrome */
--card:#1A2332; /* cards on the page */
--raised:#243040; /* a control on a card */
--input:#161F2B; /* a field you type into */
--line:#2E3D52; /* ordinary divider */
--line2:#3D5268; /* a border meant to be seen*/
--text:#FFFFFF;
--sec:#A8B8CC; /* secondary copy */
--muted:#7F99B1; /* labels, placeholders */
/* was #5C7A96, which measured 3.52:1 on a card
and 2.98:1 on a raised control against a 4.5
floor. Same hue, same saturation, lifted until
it clears on every surface. */
--blue:#1B7AB5; /* the brand blue */
--blue4:#3A9FD8; /* links and active state */
--gold:#C8A84B; /* money, winners, premium */
--green:#22C97A; /* go, open, live */
--amber:#F5A623; /* attention, pending */
--red:#ED6F6F; /* error, closed */
/* was #E84545 — 3.42:1 on a raised control.
Safe to lighten: the only place red is a fill
is the 9px live dot, which carries no text. */
--red-d:#B32E2E; /* red as a FILL, behind white text */
--dot:#E4402C; /* the red spot in the logo */
--disp:'Barlow Condensed','Arial Narrow',sans-serif; /* headings, nav */
--body:'DM Sans',system-ui,sans-serif; /* everything else*/
--logo:'Anton',Impact,sans-serif; /* the wordmark */
color-scheme:dark;
}
/* ── RESET ─────────────────────────────────────────────────── */
*{box-sizing:border-box}
body{
margin:0;
background:var(--ink);
color:var(--text);
font-family:var(--body);
font-size:15px;
line-height:1.6;
-webkit-font-smoothing:antialiased;
}
a{color:var(--blue4);text-decoration:none}
img{max-width:100%}
button{font-family:inherit;font-size:inherit;cursor:pointer}
/* ── PAGE WIDTH ────────────────────────────────────────────── */
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
/* ── TOP BAR ───────────────────────────────────────────────── */
.top{
position:sticky;top:0;z-index:40;
background:var(--surface);
border-bottom:1px solid var(--line);
}
.top-in{
max-width:1120px;margin:0 auto;padding:11px 20px;
display:flex;align-items:center;justify-content:space-between;gap:16px;
}
/* ── THE WORDMARK ──────────────────────────────────────────────
InZ + a cue ball with the red spot. The ball is a real element
rather than an image so it stays crisp at any size and inherits
the font metrics — the .748em and the hairline negative margin
are measured off the Anton glyphs, not eyeballed. Do not round
them to tidier numbers; the ball stops sitting on the baseline.
Markup: InZ
──────────────────────────────────────────────────────────── */
.logo{
display:inline-flex;align-items:baseline;
font-family:var(--logo);font-size:23px;color:#fff;letter-spacing:.01em;
}
.logo .b{
display:inline-block;position:relative;
width:.748em;height:.748em;border-radius:50%;
background:#fff;margin-left:.02em;margin-bottom:-.0078em;
}
.logo .b i{
position:absolute;top:50%;left:50%;
width:26%;height:26%;margin:-13% 0 0 -13%;
border-radius:50%;background:var(--dot);
}
/* ── NAVIGATION ────────────────────────────────────────────────
Two forms of the same thing: a row in the top bar on a laptop,
a fixed tab bar at the bottom on a phone. Both are always in the
markup; the breakpoint decides which one is shown. 860px is the
switch every mockup already uses.
──────────────────────────────────────────────────────────── */
.nav{
display:flex;gap:23px;
font-family:var(--disp);font-size:16px;font-weight:600;
letter-spacing:.07em;text-transform:uppercase;
}
.nav a{color:var(--muted)}
.nav a.on,.nav a:hover{color:#fff}
.tabbar{display:none}
@media (max-width:860px){
.nav{display:none}
/* Clear the fixed bar, plus the home indicator on an iPhone. */
body{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
.tabbar{
display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;
background:rgba(17,23,32,.97);
border-top:1px solid var(--line);
padding:7px 2px calc(7px + env(safe-area-inset-bottom));
backdrop-filter:blur(12px);
}
.tabbar a{
flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
padding:6px 2px;min-height:48px; /* a real thumb target */
color:#86847B;font-size:10px;font-weight:700;
letter-spacing:.07em;text-transform:uppercase;
}
.tabbar a.on{color:var(--blue4)}
.tabbar svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.9}
}
/* ── BUTTONS ───────────────────────────────────────────────────
.btn is the default. The variants are by JOB, not by colour:
.go the thing this screen exists for — start, enter, save
.gold money — pay out, buy, upgrade
.ghost a secondary action that must not compete
One .go per screen. If a screen seems to need two, one of them
is not really the point of the screen.
──────────────────────────────────────────────────────────── */
.btn{
display:inline-flex;align-items:center;gap:7px;
border:1px solid var(--line2);background:var(--raised);color:#fff;
border-radius:9px;padding:11px 17px;
font-size:13.5px;font-weight:500;
}
.btn:hover{border-color:var(--blue4)}
.btn.ghost{background:transparent;color:var(--sec)}
.btn.go{background:var(--green);border-color:var(--green);color:#06130D;font-weight:700}
.btn.go:hover{filter:brightness(1.07)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#17120A;font-weight:700}
.btn.gold:hover{filter:brightness(1.07)}
/* Dark text on the green and gold fills is deliberate — white on
either fails contrast. Keep the dark ink if you restyle them. */
/* ── SECTION HEADING ───────────────────────────────────────────
A small uppercase label with an optional link pushed to the right: