/* =========================================================================== Municorn design system · 1 · tokens --------------------------------------------------------------------------- The only file in the repo allowed to contain a colour, face or shadow literal. Every other file references these names. A hex outside this file is a defect. Media queries cannot read custom properties, so the breakpoints are stated here and written verbatim downstream: 560 facts list goes two-column 700 masonry breakpoint — brick tile changes size 860 nav collapses to the menu button 1000 wins grid goes three-column A fifth breakpoint means deleting one. =========================================================================== */ :root{ /* -- channel triplets: every alpha in the system derives from one source -- */ --ink-c:21 18 16; --brick-c:139 58 46; --insufficient-c:107 91 138; --lime-c:237 230 217; --brass-lt-c:216 178 120; --shadow-c:25 12 8; /* -- slabs ------------------------------------------------------------- */ --paper:#FAF8F4; --ink:rgb(var(--ink-c)); --ink-2:#1E1A17; /* footer / closing slab only */ /* -- type on light ----------------------------------------------------- */ --ink-soft:#5C5751; /* secondary copy */ --faint:#8E877F; /* fine print, web only */ --rule:#DAD4C8; /* hairline on light */ /* -- type on dark ------------------------------------------------------ */ --lime-hi:#F3ECDD; /* headings inside a dark slab */ --lime:rgb(var(--lime-c));/* type on dark */ --lime-2:#E5DCCC; /* body copy inside a dark slab */ --lime-3:#D5C9B6; /* copy inside glass, over brick */ --lime-soft:#C0B4A0; /* nav links and muted controls on dark */ --lime-mute:#A79C8C; /* secondary copy on dark */ --lime-faint:#8E8375; /* metadata on dark: ticker, footer bar */ /* -- the wall ---------------------------------------------------------- */ --brick:#8B3A2E; /* single accent inside a light heading (em) */ --mortar:#C9BCA9; /* joints, and the flat wall behind the courses */ --bed:#241B17; /* dark bed the courses are laid onto */ /* Sibling brick tones vary individual bricks inside the tile. Never in UI. A data URI cannot read custom properties, so these five values are repeated inside --brickimg and --soldier below. That duplication is the one place in the system where a literal appears twice; if a brick tone changes, change it in both. */ --brick-lt:#934236; --brick-lt2:#974C3B; --brick-dk:#803329; --brick-dk2:#843729; /* -- verdicts ----------------------------------------------------------- On an index page the state of a check is the primary information and has to be legible at a glance without reading a word. Two of the four are aliases, named for the meaning rather than the colour. */ --closed:#3F6B4A; --failed:var(--brick); --insufficient:#6B5B8A; --inapplicable:var(--faint); /* -- the water balance ledger ------------------------------------------- Segments derive from tokens that already have a role — billed reads as closed, apparent as brass, real as brick, the residual as ink. Only the unbilled-authorized sage has no other job. */ --seg-unbilled:#7C8B6B; --card:#FFFFFF; /* raised surface on --paper: ledger, inputs, chips */ /* -- brass ------------------------------------------------------------- */ --brass:#8A6A34; /* eyebrows, dt labels, underlines on light */ --brass-lt:#D8B278; /* the one bright accent. sparingly */ --brass-hi:#EBCB98; /* button hover only */ --on-brass:#1B1712; /* type on a brass fill */ /* -- joinery: window openings only ------------------------------------- */ --joinery:#F2EEE4; /* casing face */ --joinery-lt:#FBF8F1; /* sash face */ --joinery-edge:#B9AF9B; --joinery-edge-2:#C6BCA8; --sill-hi:#EDE7DA; --sill-lo:#D5CCBA; --sill-edge:#B0A692; --apron:#E4DCCC; --pane-1:#C9CFCB; /* glass, lit edge */ --pane-2:#9FA7A3; --pane-3:#8C948F; /* glass, shaded edge */ /* -- derived surfaces: use these rather than rolling your own rgba ------ */ --glass:rgb(var(--ink-c)/.78); /* the only way text sits on brick */ --glass-blur:blur(7px); --glass-nav:rgb(var(--ink-c)/.9); --glass-nav-blur:blur(9px); --hairline:rgb(var(--lime-c)/.13); /* hairline on dark */ --hairline-lt:rgb(var(--lime-c)/.18); /* border of a glass panel */ --wash:rgb(var(--lime-c)/.035); /* row and menu hover, on dark */ --wash-brick:rgb(var(--brick-c)/.03); /* table row hover, on light */ --tint-failed:rgb(var(--brick-c)/.05); --tint-insufficient:rgb(var(--insufficient-c)/.05); /* the rake draws on a canvas, which cannot read a custom property, so js/rake.js reads these two triplets off :root at startup */ --rake-line-c:233 222 201; --rake-mark-c:200 140 80; /* three shadow depths, no fourth. never black. */ --lift-1:0 3px 8px rgb(var(--shadow-c)/.4); --lift-2:0 10px 26px rgb(var(--shadow-c)/.4); --lift-3:0 14px 30px rgb(var(--shadow-c)/.45); /* -- faces ------------------------------------------------------------- */ --serif:'Crimson Pro',Georgia,serif; /* headings, row titles, nameplates */ --sans:'Public Sans',system-ui,sans-serif; --mono:'IBM Plex Mono',monospace; /* metadata only */ /* -- layout ------------------------------------------------------------ */ --max:78rem; --gut:clamp(1.15rem,4.5vw,4rem); --section:clamp(3rem,6.5vw,5rem); /* slab rhythm */ --head-gap:clamp(2rem,4vw,3rem); /* section header to content */ /* -- motion ------------------------------------------------------------ */ /* Every authored offset is multiplied by --motion, so calm mode zeroes the movement and keeps the sequencing for free. See motion.css. */ --motion:1; --ease-reveal:cubic-bezier(.22,1,.36,1); /* a part arriving */ --ease-set:cubic-bezier(.16,1,.3,1); /* a part snapping into position */ /* -- masonry tiles ----------------------------------------------------- */ --bricksize:128px 64px; --brickimg:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='128'%20height='64'%3E%3Crect%20width='128'%20height='64'%20fill='%23C9BCA9'/%3E%3Crect%20x='2'%20y='2'%20width='60'%20height='28'%20fill='%238B3A2E'/%3E%3Crect%20x='66'%20y='2'%20width='60'%20height='28'%20fill='%23934236'/%3E%3Crect%20x='-30'%20y='34'%20width='60'%20height='28'%20fill='%23803329'/%3E%3Crect%20x='34'%20y='34'%20width='60'%20height='28'%20fill='%238B3A2E'/%3E%3Crect%20x='98'%20y='34'%20width='60'%20height='28'%20fill='%23974C3B'/%3E%3C/svg%3E"); --soldier:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='72'%20height='34'%3E%3Crect%20width='72'%20height='34'%20fill='%23C9BCA9'/%3E%3Crect%20x='2'%20y='2'%20width='14'%20height='30'%20fill='%23803329'/%3E%3Crect%20x='20'%20y='2'%20width='14'%20height='30'%20fill='%238B3A2E'/%3E%3Crect%20x='38'%20y='2'%20width='14'%20height='30'%20fill='%23934236'/%3E%3Crect%20x='56'%20y='2'%20width='14'%20height='30'%20fill='%23843729'/%3E%3C/svg%3E"); } @media(max-width:700px){ :root{--bricksize:106px 53px} }