/* ============================================================
PIÄTY DESIGN SYSTEM — Colors & Type
Kannattajakatsomo · KalPa · Olvi Areena · Kuopio
============================================================ */
/* ---------- Web fonts (Google substitutions; see README) -------- */
/* Fontit ladataan jokaisen sivun :ssä -tageilla (preconnect +
stylesheet), EI CSS-@importilla: @import löydetään vasta kun tämä tiedosto
on ladattu ja jäsennetty → sarjallinen vesiputous joka hidastaa
ensimaalausta. :n linkki löytyy heti HTML:ää jäsennettäessä. */
:root {
/* ---------- CORE PALETTE ---------- */
/* Yellow — the supporter's color. Bright, lit, terrace-bright. */
--piaty-yellow: #FFE701; /* primary, the wall of yellow */
--piaty-yellow-deep: #E6D000; /* hover/press, slightly darker */
--piaty-yellow-muted: #BBA900; /* dim background variant */
/* Black — ink, asphalt, the night before puck-drop. */
--piaty-black: #0B0B0B; /* near-black, never #000 */
--piaty-black-soft: #161616; /* cards/panels on black */
--piaty-charcoal: #242424; /* secondary surfaces */
/* Red — drip / accent / heat. Use sparingly. */
--piaty-red: #E1251B; /* accent — KalPa supporter red */
--piaty-red-deep: #B11912; /* pressed/active */
/* Neutrals — paper, concrete, smoke. */
--piaty-bone: #F4EFE4; /* off-white, like printed flyer paper */
--piaty-smoke: #9A9A9A; /* muted text on dark — nostettu #8A→#9A AA-marginaalin vuoksi */
--piaty-line: #2E2E2E; /* hairline borders on dark */
--piaty-line-faint: #1F1F1F; /* almost-invisible divider on black */
/* RGB-komponentit läpinäkyviin sävyihin: rgba(var(--piaty-yellow-rgb), .12).
Aina samasta brändiväristä — ei rinnakkaisia käsin sekoitettuja keltaisia. */
--piaty-yellow-rgb: 255, 231, 1;
--piaty-red-rgb: 225, 37, 27;
--piaty-bone-rgb: 244, 239, 228;
--piaty-smoke-rgb: 154, 154, 154;
/* ---------- TEXTURE ---------- */
/* Valokopio-/riso-rakeisuus jaettuna tokenina: yksi fractalNoise-SVG,
jota .piaty-grain (ja yksittäiset ::before-kerrokset) käyttävät, jottei
samaa pitkää data-URIa toisteta. Käyttö: ::before-kerros keltapinnan
päällä, mix-blend-mode: multiply + matala opacity → painettu paperi. */
--piaty-grain-url: url("data:image/svg+xml;utf8,");
/* ---------- SEMANTIC TOKENS — DARK MODE (default) ---------- */
--bg: var(--piaty-black);
--bg-2: var(--piaty-black-soft);
--bg-3: var(--piaty-charcoal);
--fg: var(--piaty-bone);
--fg-1: var(--piaty-bone);
--fg-2: var(--piaty-smoke);
--fg-on-yellow: var(--piaty-black);
--accent: var(--piaty-yellow);
--accent-hover: var(--piaty-yellow-deep);
--hot: var(--piaty-red);
--line: var(--piaty-line);
/* ---------- TYPE FAMILIES ---------- */
/* `--font-logo` — only for big brand wordmarks. The real Piäty mark
is a custom graffiti drawing, NOT this font. This is a stand-in
for everywhere the logo can't be used as an image. Webfonttia
(Bungee) ei ladata, koska muuttujaa ei käytetä missään — jos
käyttöä tulee, lisää Bungee takaisin sivujen fonts-URLiin. */
--font-logo: 'Impact', sans-serif;
/* `--font-display` — brushed hand-paint, for headlines, posters,
calls-to-action. Big, loud, ALL CAPS. */
--font-display: 'Permanent Marker', 'Marker Felt', 'Brush Script MT', cursive;
/* `--font-sans-condensed` — terrace labels, tags, chrome. */
--font-tag: 'Oswald', 'Impact', 'Arial Narrow', sans-serif;
/* `--font-body` — long copy, news, lineups. */
--font-body: 'Inter', 'Helvetica Neue', system-ui, sans-serif;
/* ---------- TYPE SCALE (1.250 — major third) ---------- */
/* Skaalan alle: Oswald-mikrolabelit (tagit, eyebrowt) käyttävät
tarkoituksella 10–11px kokoja — osa terrace-kromia, ei virhe. */
--t-2xs: 0.625rem; /* 10 — pienin mikrolabel */
--t-tag: 0.6875rem; /* 11 — tagien peruskoko */
--t-xs: 0.75rem; /* 12 */
--t-sm: 0.875rem; /* 14 */
--t-base: 1rem; /* 16 */
--t-md: 1.125rem; /* 18 */
--t-lg: 1.375rem; /* 22 */
--t-xl: 1.75rem; /* 28 */
--t-2xl: 2.25rem; /* 36 */
--t-3xl: 3rem; /* 48 */
--t-4xl: 4rem; /* 64 */
--t-5xl: 5.5rem; /* 88 */
--t-6xl: 7.5rem; /* 120 — banner / tifo */
/* ---------- SPACING (4-px base) ----------
Yhtenäinen 4px-ruudukko. Puoliportaat (_5) täyttävät välit, joita layout
oikeasti käyttää (20/28/40/56), sekä yhden tarkoituksellisen hienoportaan
(6px) tiukkoihin pilleri-gappeihin. KAIKKI marginit/paddingit/gapit
mapataan näihin — ei irrallisia px-arvoja. */
--s-0_5: 2px; /* hiusväli (pilleri-insetit, badge) */
--s-1: 4px;
--s-1_5: 6px; /* tiukka pilleri-gap (segmenttikytkin, alanavi) */
--s-2: 8px;
--s-2_5: 10px; /* etusivun heron ryhmäsisäinen rytmi (pvm↔otsikko, badget) */
--s-3: 12px;
--s-4: 16px;
--s-4_5: 20px;
--s-5: 24px;
--s-5_5: 28px;
--s-6: 32px;
--s-6_5: 40px;
--s-7: 48px;
--s-7_5: 56px;
--s-8: 64px;
--s-9: 96px;
/* ---------- LAYOUT CONTAINERS ----------
Yksi lähde sivun leveyksille ja sivureunukselle, jotta header, sisältö,
otteluohjelma ja footer linjautuvat pystysuunnassa. */
--container: 760px; /* sisältö · otteluohjelma · footer (sama reuna) */
--container-wide: 1240px; /* header (logo + vaakanavigaatio) */
--space-inline: clamp(20px, 4vw, 40px); /* yhtenäinen sivureunus */
/* ---------- RADII (mostly sharp — this is ultras, not fintech) ---------- */
--r-none: 0;
--r-sm: 2px;
--r-md: 4px;
--r-lg: 8px;
--r-pill: 999px;
/* ---------- ELEVATION ---------- */
--shadow-stamp: 0 2px 0 0 var(--piaty-black); /* flat, printed-on-cardboard */
--shadow-poster: 4px 4px 0 0 var(--piaty-black); /* offset, like a riso poster */
--shadow-drip: 0 8px 24px -8px rgba(0,0,0,.6); /* soft, for dark cards */
--shadow-spray: 0 0 0 2px var(--piaty-black),
0 6px 0 -2px var(--piaty-red); /* layered drip */
/* Punainen riso-offset-skaala — koko sivuston nappien, korttien ja
levyjen varjokieli. Lepotila yleensä -2, hover +1 askel, painallus -1. */
--shadow-riso-1: 2px 2px 0 0 var(--piaty-red);
--shadow-riso-2: 4px 4px 0 0 var(--piaty-red);
--shadow-riso-3: 6px 6px 0 0 var(--piaty-red);
--shadow-riso-4: 8px 8px 0 0 var(--piaty-red);
--shadow-riso-5: 10px 10px 0 0 var(--piaty-red);
/* ---------- TRACKING (Oswald-labelien kirjainvälit) ----------
Kolme kanonista pysähdyspistettä; muut arvot ovat tarkoituksellisia
poikkeamia (esim. laskurin .38em-kuiskaus). */
--track-snug: .08em; /* tiiviit segmenttilabelit, pillerinapit */
--track-tag: .14em; /* tagit, napit, chipit */
--track-eyebrow: .22em; /* eyebrow-rivit, dt-labelit */
--track-wide: .26em; /* leveä kromi: kontekstirivit, arkisto-otsikot */
/* ---------- MOTION ---------- */
--ease-snap: cubic-bezier(.2,.9,.2,1); /* quick, terrace energy */
--ease-thud: cubic-bezier(.7,0,.3,1);
--dur-fast: 120ms;
--dur-base: 220ms;
--dur-slow: 420ms;
}
/* ============================================================
SEMANTIC ELEMENT STYLES
============================================================ */
body {
font-family: var(--font-body);
font-size: var(--t-base);
line-height: 1.5;
color: var(--fg);
background: var(--bg);
-webkit-font-smoothing: antialiased;
}
/* ---- Display / headings — brushed marker ---- */
.piaty-h1, h1.piaty {
font-family: var(--font-display);
font-size: var(--t-5xl);
line-height: .9;
text-transform: uppercase;
letter-spacing: .005em;
color: var(--fg);
}
.piaty-h2, h2.piaty {
font-family: var(--font-display);
font-size: var(--t-3xl);
line-height: .95;
text-transform: uppercase;
}
.piaty-h3, h3.piaty {
font-family: var(--font-display);
font-size: var(--t-2xl);
line-height: 1;
}
/* ---- Tag / chrome / labels — condensed bold ---- */
.piaty-tag {
font-family: var(--font-tag);
font-weight: 700;
letter-spacing: var(--track-tag);
text-transform: uppercase;
font-size: var(--t-sm);
}
.piaty-eyebrow {
font-family: var(--font-tag);
font-weight: 600;
letter-spacing: var(--track-eyebrow);
text-transform: uppercase;
font-size: var(--t-xs);
color: var(--fg-2);
}
/* ---- Body ---- */
p.piaty, .piaty-p {
font-family: var(--font-body);
font-size: var(--t-md);
line-height: 1.55;
color: var(--fg-1);
text-wrap: pretty;
max-width: 60ch;
}
small.piaty, .piaty-small {
font-size: var(--t-sm);
color: var(--fg-2);
}
code, .piaty-mono {
font-family: ui-monospace, 'JetBrains Mono', 'Menlo', monospace;
font-size: .92em;
background: var(--bg-3);
padding: 1px 6px;
border-radius: var(--r-sm);
}
/* ---- Link ---- */
a.piaty {
color: var(--accent);
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 3px;
transition: color var(--dur-fast) var(--ease-snap);
}
a.piaty:hover { color: var(--piaty-yellow-deep); }
/* ---- Paper grain — zine/riso-pintautility ----
Lisää valokopiorakeisuuden minkä tahansa (etenkin keltaisen) pinnan
päälle. Host saa position:relative, rae piirtyy ::before-kerroksena
multiply-sekoituksella: musta teksti pysyy mustana, keltainen saa
karhean painojäljen. pointer-events:none → ei estä klikkejä. */
.piaty-grain { position: relative; }
.piaty-grain::before {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background-image: var(--piaty-grain-url);
background-size: 200px 200px;
mix-blend-mode: multiply;
opacity: .55;
}
@media (prefers-reduced-motion: reduce) {
/* Rae on staattinen, mutta pidetään kromi rauhallisena jos käyttäjä
on pyytänyt vähemmän visuaalista kohinaa. */
.piaty-grain::before { opacity: .38; }
}
/* ---- Custom scrollbar (desktop) — terävä keltainen/musta, ei pyöreä
"fintech"-palkki. Kosketuslaitteet jätetään natiiviksi. ---- */
@media (pointer: fine) {
* { scrollbar-width: thin; scrollbar-color: var(--piaty-yellow) var(--piaty-black); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--piaty-black); }
::-webkit-scrollbar-thumb {
background: var(--piaty-yellow);
border: 3px solid var(--piaty-black);
border-radius: 0;
}
::-webkit-scrollbar-thumb:hover { background: var(--piaty-yellow-deep); }
::-webkit-scrollbar-corner { background: var(--piaty-black); }
}