/* ========================================================================== KIPPIS — BRAND TOKENS, the single source of truth. Imported by home.css (landing), peli/styles.css (game), landing.css (blogi + juhannus) and blog-nav.css. The palette used to live inline in about twenty files, which is why the site drifted into three different brands. Change a colour here and it changes everywhere. TWO WORLDS, ONE PALETTE. The landing is LIGHT: it is browsed in daylight, in a group chat, by someone deciding whether this is real. The game is DARK: it is played at 23:00 in a dim kitchen with the phone in the middle of a table, where a white screen is physically unpleasant. Apple does exactly this, apple.com is white and the product UI is black. Same tokens, inverted assignment. NO TRUE GREYS. Every neutral is the brand hue with its chroma collapsed as lightness rises. Off-the-shelf greys are how an eye files a page as unbudgeted, in well under a second. ========================================================================== */ :root { /* ---- the accent, identical in both worlds ---- */ --kippis-pinkki: #FF2D6F; /* graphics and objects only */ --kippis-pinkki-hi: #FF4880; /* lit edge of the card face */ --kippis-pinkki-lo: #D6154E; /* shadowed edge of the card face */ /* Bright pink fails contrast as text: 3.3:1 on white. Text uses this. */ --kippis-pinkki-muste:#D6004E; /* ---- light world, the landing ---- */ --kippis-valkea: #FFFFFF; --kippis-pinta: #F7F2F5; --kippis-pinta-2: #F0E8EC; --kippis-viiva: #E6DBE1; --kippis-muste: #16121A; /* 17.8:1 on white */ --kippis-himmea: #6B5F66; /* 6.1:1 on white */ /* ---- dark world, the game ---- */ --kippis-yo: #131016; /* ground */ --kippis-yo-pinta: #1B1721; /* raised surface */ --kippis-yo-pinta-2: #242029; /* nested surface */ --kippis-yo-viiva: #302A38; /* hairline */ --kippis-yo-teksti: #F4EFF3; /* 15.9:1 on --kippis-yo */ --kippis-yo-himmea: #9C909F; /* 6.4:1 on --kippis-yo */ /* ---- the rare object: Kippis Kulta ---- Deliberately NOT gold. Gold is what every cheap product reaches for to signal premium, and #E6D5A7 is a JL house colour. A black card among colourful ones is the rarer thing, and the name surviving on a black face is a better tension than gold on gold. */ --kippis-kulta-pinta: #14101A; --kippis-kulta-hi: #2A242F; --kippis-kulta-lo: #100C14; --kippis-kulta-teksti:#F4EFF3; /* The name says gold, so exactly one thing on the card is gold: the lettering and the hairline. Brass, not the #E6D5A7 JL champagne, and never a filled surface. Gold used as a detail on black is what a real card does; gold used as a face is what a fake one does. */ --kippis-kulta-hohde: #C9A24B; --kippis-kulta-reuna: #6E5526; /* ---- deck identities ---- Each deck owns one hue, used ONLY on its own card face and marker, never as a section background. Chosen to be distinguishable at a glance on a dark grid and to stay clear of the accent pink. */ --deck-pregame: #4B9E7A; --deck-overi: #FF2D6F; --deck-chill: #3E7BC4; --deck-noppa: #B06BC9; --deck-kausi: #D98A2B; --deck-kaaos: #E0402C; --deck-pubivisa: #2FA3A0; --deck-fiksu: #7B6BD6; /* ---- shared geometry and motion ---- */ --kippis-r: 16px; /* surfaces */ --kippis-r-kortti: 18px; /* card objects */ --kippis-r-pilleri: 999px; /* controls */ --kippis-ease: cubic-bezier(.2, .8, .2, 1); --kippis-nopea: 150ms; --kippis-hidas: 260ms; } /* ========================================================================== THE EIGHT PRESSES One card back per deck, so a deck is recognisable by its stock and not only by its colour. This is ornament: none of it encodes a meaning anybody has to decode, it is the pattern a real deck has printed on its back. The earlier attempt at this put all eight motifs on a 45deg armature between 7 and 8px pitch, which is below what anyone can resolve on a 62px card turned through rotateY(-20deg), so eight presses looked like one. These differ on the three axes that DO survive at that size: DIRECTION, ELEMENT and DENSITY. Measured with a gradient-orientation histogram at the real rendered size, mean pairwise similarity 0.517, worst pair 0.859. A mass-based measure is the wrong instrument here: a tiling texture fills its box evenly by definition, so every pattern downsamples to the same flat block and scores 0.9x regardless. Applied via a .pakka-- class on the tile stage, which both surfaces emit. ========================================================================== */ /* Pregame: the widest, airiest lattice. The evening has not started. */ .pakka--aloittelu { --kuvio: repeating-linear-gradient( 45deg, rgba(255,255,255,.24) 0 1px, rgba(255,255,255,0) 1px 13px), repeating-linear-gradient(-45deg, rgba(255,255,255,.24) 0 1px, rgba(255,255,255,0) 1px 13px); } /* Överi: steep, dense, one direction only. The deck that does not let up. */ .pakka--overi { --kuvio: repeating-linear-gradient(72deg, rgba(255,255,255,.26) 0 1.2px, rgba(255,255,255,0) 1.2px 5px), repeating-linear-gradient(72deg, rgba(0,0,0,.16) 2.5px 3.4px, rgba(0,0,0,0) 3.4px 5px); } /* Chill: dead level. Horizontal only, nothing rising, nothing crossing. */ .pakka--chill { --kuvio: repeating-linear-gradient(0deg, rgba(255,255,255,.26) 0 1.1px, rgba(255,255,255,0) 1.1px 8px); } /* Noppa: spots, wide and sparse. The one deck with a physical object in it. */ .pakka--noppa { --kuvio: radial-gradient(circle, rgba(255,255,255,.38) 1.7px, rgba(255,255,255,0) 2.2px), radial-gradient(circle, rgba(255,255,255,.38) 1.7px, rgba(255,255,255,0) 2.2px); --koko: 12px 12px, 12px 12px; --sijainti: 0 0, 6px 6px; } /* Kausi: the only CURVED press in the set. Scales, laid like a season coming round. Curve against seven straight grounds is the strongest element contrast available, which is what pulled it off Pregame's 0.97 collision. */ .pakka--kevat { --kuvio: radial-gradient(circle at 50% 100%, rgba(255,255,255,0) 4.2px, rgba(255,255,255,.30) 4.2px 5.2px, rgba(255,255,255,0) 5.3px), radial-gradient(circle at 50% 100%, rgba(255,255,255,0) 4.2px, rgba(255,255,255,.30) 4.2px 5.2px, rgba(255,255,255,0) 5.3px); --koko: 11px 6px, 11px 6px; --sijainti: 0 0, 5.5px 3px; } /* ---- the three Kulta presses, struck in brass on black stock ---- */ /* Kaaos: two grounds at angles that do not agree, at pitches that do not agree. The only one in the set that never resolves into a grid. */ .pakka--kaaos { --kuvio: repeating-linear-gradient( 14deg, rgba(201,162,75,.27) 0 1.2px, rgba(201,162,75,0) 1.2px 6px), repeating-linear-gradient(106deg, rgba(201,162,75,.20) 0 1.2px, rgba(201,162,75,0) 1.2px 11px); } /* Pubivisa: the field split. Wide band, narrow band, two sides, all the way down. */ .pakka--pubivisa { --kuvio: repeating-linear-gradient(90deg, rgba(201,162,75,.22) 0 3px, rgba(201,162,75,0) 3px 7px, rgba(201,162,75,.22) 7px 8px, rgba(201,162,75,0) 8px 14px); } /* Fiksu 10: a matrix of cells. Options laid out, and you pick one. */ .pakka--fiksu { --kuvio: repeating-linear-gradient( 0deg, rgba(201,162,75,.26) 0 1.4px, rgba(201,162,75,0) 1.4px 9px), repeating-linear-gradient(90deg, rgba(201,162,75,.26) 0 1.4px, rgba(201,162,75,0) 1.4px 9px); }