/* =====================================================================
ZKsync Association / ZK Nation — brand.css
Ready-to-link stylesheet: design tokens + base elements + component classes.
Link this after (or instead of) tokens.css to get the full system.
Then use classes: .zk-btn, .zk-btn--ghost, .zk-card, .zk-nav, .zk-label,
.zk-eyebrow, .zk-footer, .zk-hero, .zk-tag, .zk-rule.
===================================================================== */
@import "./tokens.css";
/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--zk-font-sans);
font-size: var(--zk-text-base);
line-height: var(--zk-leading-body);
color: var(--zk-text);
background: var(--zk-surface);
/* intentional type rendering — kerning + ligatures + contextual alternates on, crisp smoothing */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-kerning: normal;
font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
font-optical-sizing: auto;
}
/* tabular, lining figures for data/code/labels so numbers align */
.zk-meta, .zk-label, code, pre, td, th, .role .m, .sw .m { font-variant-numeric: tabular-nums lining-nums; }
h1, h2, h3, h4, h5 {
color: var(--zk-text-accent);
letter-spacing: var(--zk-tracking-title);
line-height: var(--zk-leading-tight);
margin: 0 0 var(--zk-space-4);
text-wrap: balance; /* balanced line breaks — no lonely last word in a headline */
font-feature-settings: "kern" 1, "liga" 1, "calt" 1, "ss01" 1;
}
/* Editorial display (ES Allianz) — Extralight/Light by default, like zknation.io.
Emphasize key words with or a span set to font-weight:700. */
h1, h2 { font-family: var(--zk-font-display); }
/* optical tracking: the larger the type, the tighter it's set */
h1 { font-size: clamp(2.5rem, 6vw, var(--zk-text-5xl)); font-weight: 200; letter-spacing: -0.045em; } /* hero: navy extralight */
h2 { font-size: clamp(2rem, 4.5vw, var(--zk-text-4xl)); font-weight: 400; letter-spacing: -0.03em; /* section headers: vivid */
color: var(--zk-brand-500); }
h1 strong, h2 strong, h1 b, h2 b { font-weight: 700; }
/* Functional sub-heads (Inter) — semibold, gently tightened */
h3, h4, h5 { font-family: var(--zk-font-sans); font-weight: var(--zk-weight-semibold); letter-spacing: -0.02em; }
h3 { font-size: var(--zk-text-3xl); }
h4 { font-size: var(--zk-text-2xl); }
h5 { font-size: var(--zk-text-xl); }
p { margin: 0 0 var(--zk-space-4); max-width: 68ch; text-wrap: pretty; } /* avoid orphans/widows */
a { color: var(--zk-link); text-decoration: none; }
a:hover { color: var(--zk-link-hover); }
hr, .zk-rule { border: 0; border-top: var(--zk-rule); margin: var(--zk-space-8) 0; }
/* ---------- keyboard focus ----------
Always-visible focus ring on interactive elements (WCAG 2.4.7). Brand-500 outline with a
2px offset reads clearly on light, navy, and salmon fills alike. */
:focus-visible { outline: 2px solid var(--zk-brand-500); outline-offset: 2px; }
/* ---------- mono labels ---------- */
.zk-label, .zk-eyebrow, .zk-meta {
font-family: var(--zk-font-mono);
text-transform: uppercase;
letter-spacing: var(--zk-tracking-mono);
font-size: var(--zk-text-sm);
line-height: 1;
}
.zk-eyebrow { font-size: var(--zk-text-xs); color: var(--zk-text-muted); letter-spacing: 0.06em; }
.zk-meta { font-size: var(--zk-text-xs); color: var(--zk-text-muted); }
/* ---------- buttons ----------
Signature ZK Nation CTA (matches zknation.io exactly): a label box + a 26×26 arrow glyph
= a Brand-500 square holding a Brand-300 right-triangle. Sharp corners, Avenue Mono 500,
14px side padding, 24px gap. The arrow SVG is the actual mark from zknation.io. */
.zk-btn {
--zk-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath fill='%230C18EC' d='M0 .015h26v25.97H0z'/%3E%3Cpath fill='%238897F2' d='M0 .361.046 25.61l17.76-12.583L0 .361Z'/%3E%3C/svg%3E");
display: inline-flex; align-items: center; gap: var(--zk-space-6); flex: none;
white-space: nowrap; line-height: 1; vertical-align: middle;
font-family: var(--zk-font-mono); text-transform: uppercase;
letter-spacing: var(--zk-tracking-mono); font-size: var(--zk-text-sm); font-weight: 500;
min-height: 52px; padding: 0 14px;
background: var(--zk-brand-900); color: #fff; border: 0;
border-radius: 0; cursor: pointer; text-decoration: none;
transition: background var(--zk-dur) var(--zk-ease), color var(--zk-dur) var(--zk-ease);
}
.zk-btn::after { /* the 26×26 arrow glyph (brand-500 square + brand-300 ▸) */
content: ""; flex: none; width: 26px; height: 26px;
background: var(--zk-arrow) center / contain no-repeat;
}
.zk-btn:hover { background: var(--zk-brand-800); color: #fff; } /* keep white text (beats base a:hover) */
/* secondary: light-blue fill, brand-500 ink, same arrow glyph */
.zk-btn--ghost { background: var(--zk-brand-100); color: var(--zk-brand-500); }
.zk-btn--ghost:hover { background: var(--zk-brand-200); color: var(--zk-brand-600); }
/* salmon: governance accent. RULE — on salmon, text is navy ink, never white.
Navy #04085F on salmon-100 #EE6D50 = 5.76:1 (passes WCAG AA); white is only ~3.0:1 and fails. */
.zk-btn--salmon { background: var(--zk-salmon-100); color: var(--zk-ink); }
.zk-btn--salmon:hover { background: var(--zk-salmon-50); color: var(--zk-ink); }
/* ---------- card / outlined box ---------- */
.zk-card {
background: var(--zk-surface-raised);
border: var(--zk-rule);
border-radius: 0; /* crisp corners — the brand is sharp, not soft */
padding: var(--zk-space-8);
}
.zk-card--tab { border-left: 4px solid var(--zk-brand-700); }
/* ---------- tags ---------- */
.zk-tag {
display: inline-block; font-family: var(--zk-font-mono); text-transform: uppercase;
letter-spacing: var(--zk-tracking-mono); font-size: var(--zk-text-xs);
padding: 4px 10px; border-radius: var(--zk-radius-pill);
background: var(--zk-brand-50); color: var(--zk-brand-700);
}
/* governance tag: salmon-tinted chip with navy ink. Salmon-100 text on salmon-10 is only ~1.75:1
(fails AA); navy #04085F on salmon-10 #F6B6A6 is ~10:1 — on salmon, text is navy. */
.zk-tag--gov { background: var(--zk-salmon-10); color: var(--zk-ink); }
/* ---------- nav ---------- */
.zk-nav {
display: flex; align-items: center; justify-content: space-between;
gap: var(--zk-space-6); padding: var(--zk-space-4) var(--zk-space-8);
background: var(--zk-surface-raised); border-bottom: var(--zk-rule);
}
.zk-nav__links { display: flex; gap: var(--zk-space-6); list-style: none; margin: 0; padding: 0; }
.zk-nav__links a {
font-family: var(--zk-font-mono); text-transform: uppercase;
letter-spacing: var(--zk-tracking-mono); font-size: var(--zk-text-sm); color: var(--zk-text);
}
.zk-nav__links a:hover { color: var(--zk-brand-700); }
/* ---------- hero ---------- */
.zk-hero {
position: relative; background: var(--zk-gradient-hero);
padding: var(--zk-space-24) var(--zk-space-8); overflow: hidden;
}
.zk-hero__panel {
position: relative; z-index: 1; max-width: 880px; margin: 0 auto;
background: rgba(255,255,255,0.7); border: var(--zk-rule);
border-radius: var(--zk-radius-md); padding: var(--zk-space-12);
backdrop-filter: blur(2px);
}
/* ---------- footer ---------- */
.zk-footer {
border-top: var(--zk-rule); padding: var(--zk-space-12) var(--zk-space-8);
display: grid; gap: var(--zk-space-8);
grid-template-columns: 1.4fr repeat(3, 1fr); background: var(--zk-surface);
}
.zk-footer h6 { font-family: var(--zk-font-mono); text-transform: uppercase;
letter-spacing: var(--zk-tracking-mono); font-size: var(--zk-text-xs);
color: var(--zk-text-muted); margin: 0 0 var(--zk-space-4); }
.zk-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--zk-space-2); }
.zk-footer a { font-family: var(--zk-font-mono); text-transform: uppercase;
letter-spacing: var(--zk-tracking-mono); font-size: var(--zk-text-xs); color: var(--zk-text); }
/* ---------- logo (drop-in REAL mark; never redraw) ----------
.zk-logo = square logomark · .zk-logo--lockup = full ZK Nation wordmark lockup. Both paint the
original artwork from the inlined data-URI tokens, so they work in a single offline file. */
.zk-logo { display:inline-block; width:40px; height:40px; vertical-align:middle;
background:var(--zk-logo-mark) center/contain no-repeat; }
.zk-logo--lockup { width:auto; height:24px; aspect-ratio:213/36; background-image:var(--zk-logo-lockup); }
/* ---------- layout helper ---------- */
.zk-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--zk-space-8); }
@media (max-width: 768px) {
.zk-footer { grid-template-columns: 1fr 1fr; }
.zk-nav { flex-wrap: wrap; }
}