/* ===================================================================== MERK · het enige wisselbestand van selectly.be (merk ronde 3, 28/10) --------------------------------------------------------------------- Elke pagina haalt kleur, letter, logo en de vorm van de scherven-hero UITSLUITEND hier (+ de bestanden in ui/merk/a/ en ui/merk/b/). VARIANT KIEZEN (A "Vijfhoek" of B "Gouden blok"): · standaard = A. Definitief naar B: zet hieronder --merk-variant:b; en draai sh tools/merk-favicon.sh b (zet favicon en app-iconen). · vergelijken zonder iets te wijzigen: open een pagina met ?merk=b (of ?merk=a); de keuze blijft voor die browsersessie. Regels van merk: · goud = Selectly (de assistent), platina = Selectly Studio. · de taakkleuren (smaragd, saffier, koraal) enkel in de interface, nooit in het logo. · het stilstaande logo is altijd strak metaal; de facetten zijn enkel zichtbaar in beweging (ui/scherven.js houdt zich daaraan). ===================================================================== */ @font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap; src:url("/ui/merk/letters/instrument-sans-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap; src:url("/ui/merk/letters/instrument-sans-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Fraunces";font-style:normal;font-weight:300 600;font-display:swap; src:url("/ui/merk/letters/fraunces-latin.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Fraunces";font-style:normal;font-weight:300 600;font-display:swap; src:url("/ui/merk/letters/fraunces-latin-ext.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF} @font-face{font-family:"Instrument Serif";font-style:normal;font-weight:400;font-display:swap; src:url("/ui/merk/letters/instrument-serif-latin.woff2") format("woff2")} @font-face{font-family:"Instrument Serif";font-style:italic;font-weight:400;font-display:swap; src:url("/ui/merk/letters/instrument-serif-italic-latin.woff2") format("woff2")} @font-face{font-family:"Geist Mono";font-style:normal;font-weight:500;font-display:swap; src:url("/ui/merk/letters/geist-mono-500-latin.woff2") format("woff2")} :root{ --merk-variant:a; /* a = Vijfhoek (standaard) · b = Gouden blok */ /* donker = het gezicht: warm zwart, gelaagd, nooit plat #000 */ --zwart-0:#050505; /* diepste vlak, footer */ --zwart-1:#0A0908; /* basis */ --zwart-2:#161513; /* kaarten, menu */ --zwart-3:#1E1C19; /* opgetild, hover */ --spot:rgba(255,244,222,.07); --tekst:#F4F1EA; /* 17,6:1 op zwart */ --tekst-2:#9C978C; /* 6,8:1 op zwart: menu en uitleg */ --tekst-3:#6B675F; /* 3,5:1: enkel labels vanaf 14px of decor */ --haar:rgba(255,255,255,.09); --glas:rgba(10,9,8,.82); /* een zwartfamilie: halfdoorzichtige vlakken */ --glas-2:rgba(10,9,8,.62); /* goud = Selectly, het enige accent: CTA's, haarlijnen, hover */ --goud:#CFAE6A; /* champagne: OKLCH .765/.095/84, 9,4:1 op zwart */ --goud-licht:#EFDCB0; --goud-diep:#846637; --goud-rgb:207,174,106; --goud-op-licht:#7E5C14; /* goud als tekst op papier: 5,4:1 op krijt, 4,9:1 op krijt-2 (kaarten); 28/10 was #8A6418 = 4,27:1 op krijt-2 */ --goud-verloop:linear-gradient(180deg,#DCBE80 0%,#CFAE6A 100%); /* knoppen: leest als vlak, zweem bovenlicht */ --goud-metaal:linear-gradient(135deg,#8A6A35 0%,#CFAE6A 45%,#E5CF9D 58%,#B69255 100%); /* geborsteld, geen folie */ --nadruk:var(--goud-licht); /* cursief woord in koppen: vlak, max een gouden woord per scherm */ --gloed-goud:.10; /* maximum voor elke gouden waas */ /* platina = Selectly Studio (dezelfde vorm, ander metaal) */ --platina:#C9CED4; --platina-licht:#F2F4F6; --platina-diep:#767D86; --platina-op-licht:#5B626B; --platina-metaal:linear-gradient(135deg,#6E747C 0%,#C9CED4 45%,#EEF0F2 58%,#9AA0A8 100%); /* papier = lichte secties (ritme) */ --krijt:#F4F1EA; --krijt-2:#EAE5DA; --inkt:#0A0908; --inkt-2:#161513; /* de drie taken: edelsteentinten, enkel in de interface en de deeltjesbeelden */ --taak-op:#5BC9A3; /* smaragd */ --taak-plan:#8AA2FF; /* saffier */ --taak-volg:#F09379; /* koraal */ --taak-op-licht:#1F7A5C; /* op papier */ --taak-plan-licht:#3E55C8; --taak-volg-licht:#B34A2E; --taak-studio:#C9CED4; /* platina */ /* verbindingstokens voor de componenten */ --merk:var(--goud); --merk-op:#0A0908; --merk-tekst:var(--goud-op-licht); --accent:var(--goud); --accent-rgb:var(--goud-rgb); /* letters: koppen per variant, de interface altijd Instrument Sans */ --font-kop:"Fraunces","Times New Roman",Georgia,serif; --kop-gewicht:380; --kop-spatie:-.025em; --kop-schaal:1; --kop-variatie:"opsz" 144,"SOFT" 0,"WONK" 0; --font-tekst:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --font-menu:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif; --menu-gewicht:400; --font-mono:"Geist Mono",ui-monospace,Menlo,monospace; /* logo (kop/voet), Studio-logo, beeldmerk en de facetten van de scherven-hero */ --logo:url("/ui/merk/a/logo-donker.svg"); --logo-licht:url("/ui/merk/a/logo-licht.svg"); --logo-ratio:3.899; --logo-hoogte:30px; --studio-logo:url("/ui/merk/a/studio-donker.svg"); --studio-ratio:5.388; --beeldmerk:url("/ui/merk/a/beeldmerk.svg"); --beeldmerk-licht:url("/ui/merk/a/beeldmerk-licht.svg"); /* S in inkt, voor lichte vlakken (Studio) */ --scherven-facetten:url("/ui/merk/a/facetten.json"); } /* ---------- Variant B · Gouden blok · Instrument Serif ---------- */ :root[data-merk="b"]{ --merk-variant:b; --font-kop:"Instrument Serif","Times New Roman",Georgia,serif; --kop-gewicht:400; --kop-spatie:-.015em; --kop-schaal:1.06; --kop-variatie:normal; --logo:url("/ui/merk/b/logo-donker.svg"); --logo-licht:url("/ui/merk/b/logo-licht.svg"); --logo-ratio:3.526; --studio-logo:url("/ui/merk/b/studio-donker.svg"); --studio-ratio:5.776; --beeldmerk:url("/ui/merk/b/beeldmerk.svg"); --beeldmerk-licht:url("/ui/merk/b/beeldmerk-licht.svg"); --scherven-facetten:url("/ui/merk/b/facetten.json"); } /* ---------- Logo in kop, voet en kern ---------- De HTML bevat Selectly: de tekst blijft voor schermlezers en zoekmachines, het beeld komt van hierboven. */ .woordmerk{display:inline-block;height:var(--logo-hoogte);aspect-ratio:var(--logo-ratio);background:var(--logo) left center/contain no-repeat;vertical-align:middle} .op-licht .woordmerk,.licht .woordmerk{background-image:var(--logo-licht)} .woordmerk.studio{aspect-ratio:var(--studio-ratio);background-image:var(--studio-logo)} .woordmerk-tekst{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} h1,h2,h3{font-variation-settings:var(--kop-variatie)} /* ---------- Kleurtrappen voor de oudere Tailwind-pagina's ---------- Gegenereerd door tools/merk-schaal.mjs uit --goud en --zwart-1. Niet met de hand aanpassen. Formaat: "R G B" (voor rgb(var() / a)). */ /* >>> SCHAAL */ :root{ --goudt-50:250 247 240;--goudt-100:246 240 228;--goudt-200:238 226 201;--goudt-300:227 208 169;--goudt-400:217 190 136;--goudt-500:207 174 106;--goudt-600:145 122 74;--goudt-700:114 96 58;--goudt-800:91 77 47;--goudt-900:70 59 36; --inkt-500:59 58 57;--inkt-600:39 39 38;--inkt-700:27 26 25;--inkt-800:19 18 17;--inkt-900:10 9 8; --goudlicht:239 220 176; } /* <<< SCHAAL */