/* =========================================================================== Elements Ambassadors — publieke kant. Wordt NA app.css geladen en overschrijft kleuren, typografie en vormen. De admin laadt alleen app.css en blijft dus onaangeroerd. --------------------------------------------------------------------------- De grammatica komt uit zes referenties (Ciridae, Active Theory, Hyer, Fluid Dynamics, React Bits). Ze zeggen alle zes hetzelfde: 1. Bijna-zwart doek. Geen gekleurde gloed als achtergrond. 2. Het systeem weigert elevatie. Vlakken worden gedefinieerd door haarlijnen van 1px en toonverschil — niet door schaduw. 3. Kleur is gerantsoeneerd. Het accent verschijnt als lijn en als kleine interpunctie, NOOIT als vlak. 4. Controls zijn ghost-pills die terugtreden, geen gloeiende knoppen. 5. Mono voor technische metadata, condensed caps voor de monumenten. 6. Typografie is de luidste stem. Grote schaal, strakke tracking. Dat is het omgekeerde van de vorige versie, die gradiënt gebruikte als vulling op vijf plekken tegelijk. Vijf keer bijzonder is nul keer bijzonder. --------------------------------------------------------------------------- De spanning met het merk, en hoe die is opgelost. Elements ís die regenbooggradiënt — hem wegrantsoeneren zou het merk wegpoetsen. Dus: de gradiënt blijft, maar alleen in de vorm waarin hij in het logo zelf voorkomt — als een dunne balk ónder iets. Onder het logo, onder het saldo, onder een sectiekop. Nooit meer als vulling van een cijfer, een knop of een balk. Zo wordt het merkelement een terugkerend structureel motief in plaats van een decoratie, en is het meteen ook precies wat de referenties voorschrijven: accent als lijn, niet als vlak. =========================================================================== */ @font-face{ font-family:'Intro Cond'; src:url('fonts/introdemocond-blackcaps.woff2') format('woff2'); font-weight:900; font-style:normal; font-display:swap; } @font-face{ font-family:'Boogaloo'; src:url('fonts/boogaloo.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; } :root{ /* --- merk ------------------------------------------------------------ */ --violet:#6315b3; --magenta:#f8359b; --coral:#fd9253; --yellow:#fffb03; --brand-bar:linear-gradient(90deg, var(--violet) 0%, #ae25a7 13%, var(--magenta) 25%, var(--coral) 38%, var(--yellow) 50%, var(--coral) 63%, var(--magenta) 75%, #b427a6 88%, #801baf 100%); /* Zonder geel, voor lijnen die smaller zijn dan de logobalk — geel is bijna wit en valt op 2px uit elkaar. */ --brand-line:linear-gradient(90deg, #7b2fc9 0%, #d4399f 52%, var(--coral) 100%); /* --- doek en vlakken -------------------------------------------------- */ /* Het doek gaat dieper en de kaarten gaan omhoog. Gemeten was het verschil tussen kaart en doek 1,03 — praktisch nul, en dát is waarom het scherm vlak en flets oogde, niet de tekstkleuren (die haalden 6 tot 17). Bij bijna-zwart zegt de contrastratio weinig meer, maar het waargenomen verschil tussen twee vlakken wel: dit is het punt waarop een paneel als paneel leest zonder dat het grijs wordt. */ --paper:#050507; --paper-deep:#0a0a0e; /* Halftransparant, zodat de atmosferische laag eronderdoor blijft leven — maar véél minder dan eerst. Op .66 boven een aurora van .8 verkleurden de panelen mee naar paars en stond de secundaire tekst effectief op violet: onleesbaar, en het is precies wat de hele pagina goedkoop maakte. De atmosfeer hoort áchter het instrument te blijven, niet erdoorheen. */ /* Violette ondertoon in plaats van neutraal grijs, afgeleid van de pas. Die stond als enige element in merkkleur op een kleurloze pagina, waardoor hij er eerder oplag dan bij hoorde. Panelen zijn nu een rustiger familielid van dezelfde kleur — gemeten: 6,9:1 voor het lichtste label, ruim boven de norm, dus de tint kost geen leesbaarheid. */ --card:rgba(32,24,51,.90); --card-hi:rgba(44,33,68,.94); --ink:#f7f6fa; --ink-soft:#c2bdd0; /* 9,5:1 op --card */ --ink-faint:#a8a2b6; /* 6,8:1 op --card, ruim boven de norm op 11px */ /* Randen waren 1,18 tegen de kaart: aanwezig in de code, onzichtbaar op het scherm. Als de haarlijn alles moet definiëren, moet je hem kunnen zien. */ --rule:#3d3159; /* de haarlijn die alles definieert */ --rule-hi:#544471; --rule-soft:#2c2340; /* Koraal is het enige chromatische accent in de UI. Als lijn en als kleine tekst — op dit doek haalt het ~9:1, dus als tekst is het comfortabel. */ --petrol:var(--coral); --petrol-deep:#ffab74; --petrol-tint:rgba(253,146,83,.10); --on-petrol:#10070a; --ember:var(--magenta); --ok:#57d9a3; --bad:#ff6b81; --warn:#e8c34a; --info:#9b8cf5; --r:10px; /* kaarten — strak, niet zacht */ --r-lg:12px; --pill:999px; /* alleen controls */ /* Het systeem weigert elevatie: geen schaduw, alleen lijn. */ --lift:none; --lift-hi:none; --mono:'JetBrains Mono', ui-monospace, monospace; --t:170ms cubic-bezier(.2,.7,.3,1); /* --- het kader ------------------------------------------------------ Eén platte lijn rondom leest als een wireframe. Een echt kader vangt licht: bovenaan lichter, onderaan wegvallend, met een haarlijntje hooglicht net binnen de rand. Dat is hoe een fysiek paneel eruitziet en het is het verschil tussen "een div met een border" en iets dat gemaakt lijkt. */ /* De gradiënt alleen was te zwak: op een paneel van 1300px breed krijgen de zijranden de middenwaarden (.02) en dan is er visueel geen rand meer — brede panelen zwommen weg in het doek. Nu ligt er een echte haarlijn onder de gradiënt, zodat een kader altijd een kader blijft en het lichtverloop alleen nog het reliëf doet. */ --edge-grad:linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.11) 22%, rgba(255,255,255,.08) 55%, rgba(255,255,255,.1) 100%); --edge-grad-hi:linear-gradient(180deg, rgba(253,146,83,.45) 0%, rgba(255,255,255,.06) 30%, rgba(255,255,255,.02) 70%, rgba(248,53,155,.18) 100%); --inner-hi:inset 0 1px 0 rgba(255,255,255,.09); /* Zachte glans linksboven, waar het licht vandaan komt in de aurora. */ --sheen:radial-gradient(120% 90% at 0% 0%, rgba(190,120,255,.10), rgba(255,255,255,.03) 32%, transparent 58%); } body.fan, body.login-body{ background:var(--paper); color:var(--ink); position:relative; } /* ============================================================= atmosfeer === Wat de referenties high-end maakt is niet minder interface maar een gerenderde wereld áchter de interface: "liquid marble, smoke, fire, set behind type at full-bleed scale". Wij hebben geen festivalbeeld en geen WebGL, dus dit is de CSS-variant: drie enorme, zwaar geblurde vlekken in de merkkleuren die traag om elkaar heen bewegen. Alleen `transform` animeert — dat draait op de compositor en kost geen layout. Blur staat vast, want een animerende filter is wél duur. Op een telefoon in een festivalweide moet dit niet de batterij opeten. */ .aurora{ position:fixed; inset:-25vh -25vw; z-index:-2; pointer-events:none; overflow:hidden; filter:blur(110px) saturate(135%); /* Was .8. Op die sterkte was dit geen achtergrond meer maar de pagina zelf: de kleur kwam door de panelen heen en at de tekst op. Atmosfeer moet je kunnen negeren terwijl je leest — dat is het verschil tussen sfeer en ruis. */ opacity:.42; } .aurora span{ position:absolute; display:block; border-radius:50%; will-change:transform; } .aurora span:nth-child(1){ width:58vw; height:58vw; top:-12vh; left:6vw; background:radial-gradient(circle at 35% 35%, rgba(99,21,179,.95), transparent 68%); animation:drift-a 38s ease-in-out infinite alternate; } .aurora span:nth-child(2){ width:46vw; height:46vw; top:2vh; right:2vw; background:radial-gradient(circle at 60% 40%, rgba(248,53,155,.72), transparent 66%); animation:drift-b 46s ease-in-out infinite alternate; } .aurora span:nth-child(3){ width:40vw; height:40vw; top:26vh; left:22vw; background:radial-gradient(circle at 50% 50%, rgba(253,146,83,.55), transparent 64%); animation:drift-c 54s ease-in-out infinite alternate; } @keyframes drift-a{ from{ transform:translate3d(0,0,0) scale(1) } to { transform:translate3d(9vw,7vh,0) scale(1.18) } } @keyframes drift-b{ from{ transform:translate3d(0,0,0) scale(1.1) } to { transform:translate3d(-11vw,10vh,0) scale(.92) } } @keyframes drift-c{ from{ transform:translate3d(0,0,0) scale(.95) } to { transform:translate3d(13vw,-8vh,0) scale(1.2) } } /* Vignet plus fijne korrel eroverheen. De korrel is wat de gradiënt van "CSS-verloop" naar "gerenderd beeld" duwt — zonder ruis blijft het glad en goedkoop ogen. */ .grain{ position:fixed; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(120% 85% at 50% 0%, rgba(8,8,11,.35) 0%, rgba(8,8,11,.62) 55%, rgba(8,8,11,.9) 85%, var(--paper) 100%), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); background-size:auto, 160px 160px; opacity:.4; /* hoger en de korrel eet de kleur op — dan wordt alles grijs */ } @media (prefers-reduced-motion:reduce){ .aurora span{ animation:none } } h1,h2,h3{ font-family:'Intro Cond','Archivo',sans-serif; font-weight:900; text-transform:uppercase; letter-spacing:.005em; font-variation-settings:normal; } /* Alle labels en metadata in mono. Dit is de grootste enkele verandering in toon: het maakt van een dashboard een instrument. */ .eyebrow,.card-h,th,.mini-h,.balance-h,.field > span,.facts dt,.spark-lab{ font-family:var(--mono); font-size:.66rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); } /* =============================================================== shell === Op desktop een vaste linkerkolom met identiteit en navigatie, daarnaast de inhoud over de volle breedte. Daarvoor stond de hero bovenaan en moest je scrollen voordat je je saldo zag — een mobiele opbouw op een breed scherm. Mobiel valt alles terug op één kolom met de hero bovenaan; zelfde markup, ander raster. */ .top{ display:none } .shell{ min-height:100vh } .rail{ position:relative; padding:2.4rem 1.5rem 0; text-align:center; } .rail-top{ position:relative } .rail-foot{ display:flex; gap:1rem; align-items:center; justify-content:center; margin-top:1.4rem; font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); } .hero-who{ max-width:14rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap } .rail-foot a{ color:var(--ink-faint); text-decoration:none; transition:color var(--t) } .rail-foot a:hover{ color:var(--coral) } .hero-logo{ width:min(190px,44vw); height:auto; display:block; margin:0 auto 1.6rem } .hero-eyebrow{ font-family:var(--mono); font-size:.62rem; font-weight:500; letter-spacing:.26em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 .85rem; } .hero-eyebrow i{ font-style:normal; color:var(--coral); margin:0 .3rem } .rail h1{ font-size:clamp(2rem,7vw,2.9rem); line-height:.88; letter-spacing:-.02em; margin:0 0 1rem; color:var(--ink); } .hero-bar{ height:3px; width:min(220px,50vw); margin:0 auto; background:var(--brand-bar); border-radius:2px; } /* --- tabs ------------------------------------------------------------ Op smalle schermen een raster, geen scrollstrip. Het was een rij pills met `overflow-x:auto`: vijf secties passen daar niet in, dus stond de helft buiten beeld zonder dat iets dat verried — geen schaduw aan de rand, geen halve pil die eruit steekt. Een verborgen menu-item bestaat niet voor de gebruiker. Twee kolommen tonen alles in één oogopslag en geven meteen een fatsoenlijk raakvlak voor een duim. */ .fan-tabs{ display:grid; grid-template-columns:1fr 1fr; gap:.4rem; width:100%; margin:1.8rem 0 0; } /* Vijf items: het laatste vult de rij, anders staat er een gat naast. */ .fan-tabs a:last-child:nth-child(odd){ grid-column:1 / -1 } /* Het label in gewone schrijfwijze en in de UI-letter, niet in mono-kapitalen. Vijf items in wijd gespatieerde caps lezen als een technische opsomming en alles krijgt hetzelfde gewicht; hier is het gewoon navigatie en mag het klinken als iemand die je de weg wijst. Mono blijft voorbehouden aan het nummer — dat is het enige technische eraan. */ .fan-tabs a{ position:relative; display:flex; align-items:center; justify-content:center; min-height:2.75rem; /* raakvlak, niet alleen tekst */ padding:.5rem .8rem; border:1px solid transparent; border-radius:var(--pill); font-family:'Archivo',sans-serif; font-size:.88rem; font-weight:500; letter-spacing:.01em; color:var(--ink-faint); text-decoration:none; white-space:nowrap; transition:color var(--t), border-color var(--t), background var(--t); } .fan-tabs a:hover{ color:var(--ink); border-color:var(--rule) } .fan-tabs a.on{ color:var(--coral); border-color:rgba(253,146,83,.45) } /* ============================================================== layout === Mobiel is één kolom met de kop bovenaan. Vanaf 1100px staat de identiteit links vast en vult de inhoud de rest van het scherm — anders scrol je eerst langs een schermvullende hero voor je je saldo ziet. Binnen de inhoud een raster van twaalf, waarin elke sectie zijn breedte kiest via .col-*. Elke tab telt per rij op tot twaalf, dus geen gaten: home 12 · 4+8 · 12 rewards 5+7 earn 7+5 · 12 activity 4+8 account 5+7 · 12 ------------------------------------------------------------------------ */ .shell{ min-height:100vh } main{ max-width:76rem; padding:2.4rem 1.5rem 4rem; display:grid; gap:1rem; align-items:start; counter-reset:sec; } main > *{ margin:0 } @media (min-width:900px){ main{ grid-template-columns:repeat(12,1fr); gap:1.1rem } main > *{ grid-column:span 12 } .col-4 { grid-column:span 4 } .col-5 { grid-column:span 5 } .col-7 { grid-column:span 7 } .col-8 { grid-column:span 8 } .col-12{ grid-column:span 12 } .col-4,.col-5,.col-7,.col-8{ align-self:stretch } } /* ------------------------------------------------- desktop: zijbalk --- */ @media (min-width:1100px){ .shell{ display:grid; grid-template-columns:clamp(15rem,19vw,17.5rem) minmax(0,1fr); align-items:start; } .rail{ position:sticky; top:0; height:100vh; display:flex; flex-direction:column; padding:2.6rem 1.6rem 1.6rem; text-align:left; border-right:1px solid var(--rule); background:rgba(10,10,14,.5); backdrop-filter:blur(18px); } .rail .hero-logo{ margin:0 0 1.8rem } .rail h1{ font-size:clamp(1.7rem,2.4vw,2.2rem); margin-bottom:.9rem } .rail .hero-bar{ margin:0; width:5rem } /* Verticaal menu: leest als navigatie in plaats van als filterknoppen, en er is geen ruimtegebrek meer dat horizontaal scrollen rechtvaardigt. */ /* Eén kolom. `flex-direction:column` stond hier nog uit de tijd dat dit een flexrij was — op een grid doet die eigenschap niets, dus bleef de zijbalk in twee kolommen staan toen de mobiele weergave een raster werd. */ .fan-tabs{ grid-template-columns:1fr; width:auto; margin:2.2rem 0 0; gap:.15rem; overflow:visible; } .fan-tabs a:last-child:nth-child(odd){ grid-column:auto } .fan-tabs a{ justify-content:flex-start; text-align:left; padding:.62rem .85rem; border-radius:9px; border-color:transparent; overflow:hidden; } /* Een veeg kleur die vanaf links binnenkomt in plaats van een vlakke achtergrond die aan- en uitgaat. De beweging zit in de vulling, dus het item zelf verspringt niet — je oog volgt de kleur, niet de layout. */ .fan-tabs a::after{ content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(253,146,83,.16), rgba(248,53,155,.05) 60%, transparent); transform:translateX(-100%); transition:transform .32s cubic-bezier(.2,.7,.3,1); } .fan-tabs a:hover::after{ transform:translateX(0) } .fan-tabs a:hover{ background:transparent; border-color:transparent; color:var(--ink) } .fan-tabs a.on{ color:var(--ink); background:transparent; border-color:transparent } .fan-tabs a.on::after{ transform:translateX(0) } /* De actieve markering stond als sliver van 3px op de uiterste railrand, waar hij half wegviel tegen de scheidingslijn. Nu staat hij ín het item, naast het nummer, met de volle merkbalk. */ .fan-tabs a.on::before{ content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:3px; height:1.6rem; border-radius:0 3px 3px 0; /* 180deg, niet 90. De merkbalk loopt van links naar rechts, dus in een streep van 3px breed zie je alleen de éérste kleur — donkerviolet op donker, oftewel niets. Over de hoogte laten lopen toont hem wel. Dit staat verderop in dit bestand al genoteerd bij --brand-line; ik ben er alsnog in getrapt. */ background:linear-gradient(180deg,#7b2fc9,#d4399f 50%,var(--coral)); } .fan-tabs a.on .num{ color:var(--coral); opacity:1 } /* Pijl die meeschuift bij hover en op het actieve item blijft staan. */ .fan-tabs a .go{ display:block; margin-left:auto; font-family:var(--mono); font-size:.7rem; opacity:0; transform:translateX(-4px); transition:opacity var(--t), transform var(--t); } .fan-tabs a:hover .go, .fan-tabs a.on .go{ opacity:.55; transform:none } .rail-foot{ margin-top:auto; padding-top:1.4rem; border-top:1px solid var(--rule); justify-content:space-between; gap:.6rem; } .hero-who{ max-width:9rem } main{ max-width:none; width:100%; padding:2.6rem clamp(1.5rem,3vw,3rem) 3rem } /* Het saldo als brede band in plaats van een gecentreerde kolom: het cijfer links als brandpunt, de context rechts. Gecentreerd op 1500px zweeft dat getal in een leeg vlak — dan is groot niet hetzelfde als sterk. */ .balance{ display:flex; align-items:center; gap:clamp(2.5rem,6vw,6rem); text-align:left; padding:1.4rem .5rem 2.2rem; } .balance-figure{ flex:0 0 auto } .balance-n{ font-size:clamp(5rem,11vw,9rem); margin-top:.4rem } .balance-n::after{ margin-left:0; margin-right:auto } .balance-side{ flex:1 1 auto; min-width:0; max-width:34rem; display:grid; gap:1.1rem; } .balance-sub{ margin:0 } .balance-meta{ justify-content:flex-start; margin:0 } .balance-meter{ margin:0; max-width:none } .meter-note{ text-align:left } .fan-foot{ text-align:left; padding-left:clamp(1.5rem,3vw,3rem) } /* De begroeting hoeft niet te krimpen op subtabs: hij staat naast de inhoud en kost daar geen verticale ruimte. */ body.compact .rail h1{ font-size:clamp(1.7rem,2.4vw,2.2rem) } } /* ========================================================== saldokaart === Het cijfer is wit en groot; de gradiënt ligt eronder als lijn — hetzelfde device als de balk onder het ELEMENTS-logo. */ /* Het saldo is géén kaart. Het staat vrij op het doek, zodat de atmosfeer erdoorheen loopt en het cijfer het brandpunt van het scherm is — het "focal object" waar de referenties het over hebben. */ .balance{ position:relative; background:transparent; border:0; border-radius:0; padding:1.2rem .5rem 2rem; text-align:center; } /* Het saldo blijft géén kaart — geen rand, geen vulling. Maar volledig zonder grond stond het cijfer op de lichtste plek van de aurora en werd wit tegen violet grijs. Dit is een donkere poel eronder die naar de randen volledig wegvalt: je ziet geen vlak, alleen dat het midden rustiger is. Zo houdt het cijfer zijn contrast zonder dat het in een doos komt te zitten. */ .balance::before{ content:''; position:absolute; z-index:-1; inset:-30% -10%; background:radial-gradient(60% 70% at 50% 50%, rgba(8,8,11,.72) 0%, rgba(8,8,11,.45) 45%, transparent 72%); pointer-events:none; } .balance-n{ font-family:'Intro Cond','Archivo',sans-serif; font-weight:900; font-size:clamp(5rem,23vw,10.5rem); line-height:.8; letter-spacing:-.035em; color:var(--ink); margin-top:1rem; text-shadow:0 0 90px rgba(248,53,155,.25); } .balance-n::after{ content:''; display:block; width:4.5rem; height:3px; margin:1.4rem auto 0; background:var(--brand-bar); border-radius:2px; } .balance-sub{ font-family:var(--mono); font-size:.86rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--ink); margin-top:1.2rem; } .balance-sub i{ font-style:normal; font-weight:500; color:var(--ink-faint); letter-spacing:.12em; } /* Technische regel onder het saldo: code, verkopen, positie. Mono, klein en met een scheidingsteken ertussen — de metadata-toon uit de referenties, maar met informatie die een ambassador daadwerkelijk wil weten. */ .balance-meta{ display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem .9rem; margin:1.3rem 0 0; font-family:var(--mono); font-size:.66rem; font-weight:500; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-faint); } .balance-meta span + span::before{ content:'/'; margin-right:.9rem; color:var(--rule-hi); } .balance-meter{ margin-top:1.9rem; max-width:34rem; margin-inline:auto } .meter{ height:2px; border-radius:1px; background:var(--rule-hi); overflow:hidden; } /* Een lichtpunt op het einde van de balk: je oog gaat naar waar je staat, niet naar de hele streep. */ .meter-fill{ height:100%; background:var(--brand-line); position:relative; border-radius:1px; } .meter-fill::after{ content:''; position:absolute; right:-1px; top:50%; width:5px; height:5px; margin-top:-2.5px; border-radius:50%; background:var(--coral); box-shadow:0 0 0 2px rgba(253,146,83,.18), 0 0 10px rgba(253,146,83,.7); } .meter-note{ margin-top:.8rem; font-family:var(--mono); font-size:.68rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint); } .meter-note a{ color:var(--coral); text-decoration:none } .meter-note a:hover{ text-decoration:underline } /* --- kengetallen als strip, niet als twee tegels ----------------------- Twee identieke kaartjes naast elkaar is precies de "generic card grid" waar de referenties expliciet tegen waarschuwen. Eén omlijnde strip met een haarlijn ertussen leest als een instrumentenpaneel. */ .fan-pair{ display:grid; gap:0; grid-template-columns:1fr 1fr; border:1px solid var(--rule); border-radius:var(--r); background:var(--card); backdrop-filter:blur(14px); overflow:hidden; } .mini{ background:transparent; border:0; padding:1.35rem 1.4rem } .mini + .mini{ border-left:1px solid var(--rule) } /* Naast de code-kaart staat hij smal, dus dan onder elkaar met een horizontale scheiding in plaats van een verticale. */ @media (min-width:900px){ /* Twee gelijke rijen, zodat de strip exact even hoog wordt als de kaart ernaast in plaats van halfleeg te blijven hangen. */ .fan-pair.col-4{ grid-template-columns:1fr; grid-template-rows:1fr 1fr } .fan-pair.col-4 .mini + .mini{ border-left:0; border-top:1px solid var(--rule) } .fan-pair.col-4 .mini{ padding:1.6rem 1.5rem; display:grid; align-content:center } } .mini-n{ font-family:'Intro Cond','Archivo',sans-serif; font-weight:900; font-size:2.1rem; line-height:1; color:var(--ink); margin-top:.6rem; } /* =============================================================== panel === Halftransparant met blur: de atmosfeer loopt eronderdoor, zodat een paneel op het doek ligt in plaats van erop geplakt. De rand is een gradiënt, geen platte lijn: licht bovenaan waar het licht vandaan komt, wegvallend naar onderen. Dat kan alleen met twee lagen — de vulling geclipt op padding-box, de rand op border-box. */ .panel{ position:relative; border:1px solid transparent; border-radius:var(--r); padding:1.6rem 1.5rem 1.7rem; background: var(--sheen) padding-box, linear-gradient(var(--card), var(--card)) padding-box, var(--edge-grad) border-box; backdrop-filter:blur(14px); box-shadow:var(--inner-hi); transition:background .28s ease, box-shadow var(--t); } .panel:hover{ background: var(--sheen) padding-box, linear-gradient(var(--card-hi), var(--card-hi)) padding-box, var(--edge-grad-hi) border-box; } /* Hoekmarkeringen: twee korte streepjes linksboven en rechtsonder. Genoeg om een vlak te laten lezen als een omkaderd instrument, weinig genoeg om niet decoratief te worden. Alleen op de panelen die ertoe doen. */ .panel.code-panel::before, .panel.code-panel::after{ content:''; position:absolute; width:10px; height:10px; pointer-events:none; border-color:rgba(253,146,83,.5); border-style:solid; border-width:0; } .panel.code-panel::before{ top:9px; left:9px; border-top-width:1px; border-left-width:1px } .panel.code-panel::after{ bottom:9px; right:9px; border-bottom-width:1px; border-right-width:1px } /* Editoriale sectienummering: 01 —— YOUR CODE. Kost geen markup, want de teller loopt over de panelen in main. */ .panel h2{ display:flex; align-items:baseline; gap:.85rem; font-size:.98rem; letter-spacing:.04em; margin-bottom:.4rem; padding-bottom:.85rem; border-bottom:1px solid var(--rule-soft); } /* Het nummer in een eigen vakje in plaats van los ervoor: dat geeft de kop een anker en maakt de mono-cijfers onderdeel van het systeem in plaats van een losse notitie. */ .panel h2::before{ counter-increment:sec; content:counter(sec,decimal-leading-zero); font-family:var(--mono); font-size:.62rem; font-weight:600; letter-spacing:.08em; color:var(--coral); flex:0 0 auto; padding:.22rem .42rem; border:1px solid rgba(253,146,83,.28); border-radius:4px; background:rgba(253,146,83,.07); line-height:1; } /* Lijn die uitdooft in plaats van abrupt eindigt, met een tik koraal aan het begin — hetzelfde device als de merkbalk, maar dan horizontaal doorlopend. */ .panel h2::after{ content:''; flex:1 1 auto; height:1px; background:linear-gradient(90deg, rgba(253,146,83,.35) 0%, var(--rule-hi) 12%, transparent 100%); } .panel h2 + .muted{ margin-top:.75rem } .panel-more{ margin-top:1.1rem; font-family:var(--mono); font-size:.68rem; letter-spacing:.09em; text-transform:uppercase; } .panel-more a{ color:var(--coral); text-decoration:none } .panel-more a:hover{ text-decoration:underline } .campaign{ display:flex; align-items:center; gap:1rem; padding:.9rem 1.1rem; background:var(--card); border:1px solid rgba(248,53,155,.3); border-radius:var(--r); font-size:.86rem; } .campaign-tag{ font-family:'Intro Cond','Archivo',sans-serif; font-size:1.2rem; color:var(--magenta); line-height:1; flex:0 0 auto; } /* ============================================================ controls === Ghost-pills. Het accent is de rand en de tekst, niet het vlak — pas bij hover keert hij om, zodat de bevestiging in de beweging zit. */ button{ position:relative; font-family:var(--mono); height:2.6rem; border-radius:var(--pill); padding:0 1.35rem; font-weight:600; font-size:.72rem; letter-spacing:.11em; text-transform:uppercase; color:var(--coral); border:1px solid transparent; /* Effen rand, geen gradiëntrand. Die truc vult de héle border-box, dus de kleur schemert onder de padding door zolang de vulling niet ondoorzichtig is — en dan wordt koraal op dit doek bruin. Panelen hebben wél een dekkende vulling en gebruiken hem daarom wel; een doorzichtige pil kan dat niet. `border-image` is geen uitweg: dat negeert border-radius. */ background:rgba(255,255,255,.02); border-color:rgba(253,146,83,.55); box-shadow:var(--inner-hi); transition:background .2s ease, color var(--t), box-shadow var(--t), transform .12s ease; } button:hover{ color:var(--on-petrol); background:linear-gradient(180deg, #ffb07f, var(--coral)); border-color:var(--coral); box-shadow:inset 0 1px 0 rgba(255,255,255,.4), 0 6px 18px -8px rgba(253,146,83,.55); } /* Kort indrukken in plaats van niets: op een touchscreen is dat het enige signaal dat je de knop echt geraakt hebt. */ button:active{ transform:translateY(1px); box-shadow:var(--inner-hi) } button:focus-visible{ outline:2px solid var(--magenta); outline-offset:2px } button.ghost{ color:var(--ink-soft); background:rgba(255,255,255,.035); border-color:var(--rule-hi); } button.ghost:hover{ color:var(--ink); background:rgba(255,255,255,.075); border-color:rgba(255,255,255,.22); box-shadow:var(--inner-hi); } button.small{ height:2.25rem; font-size:.68rem; padding:0 1rem } button.copied{ background:transparent; color:var(--ok); border-color:rgba(87,217,163,.5) } input,select{ font-family:var(--mono); font-size:.85rem; height:2.6rem; border-radius:var(--pill); padding:0 1.1rem; color:var(--ink); border:1px solid transparent; background: linear-gradient(180deg, #0a0a0e, #0e0e13) padding-box, var(--edge-grad) border-box; box-shadow:inset 0 1px 2px rgba(0,0,0,.35); transition:background .2s ease, box-shadow var(--t); } input:focus,select:focus{ outline:none; background: linear-gradient(180deg, #0a0a0e, #0e0e13) padding-box, linear-gradient(180deg, rgba(253,146,83,.8), rgba(253,146,83,.3)) border-box; box-shadow:inset 0 1px 2px rgba(0,0,0,.35), 0 0 0 3px rgba(253,146,83,.12); } input::placeholder{ color:var(--ink-faint) } .stack{ display:grid; gap:1.1rem; margin-top:1.3rem } .field{ display:grid; gap:.5rem } .field > span em{ font-style:normal; letter-spacing:.06em; opacity:.6 } .field input{ width:100% } .field-pair{ display:grid; gap:1.1rem; grid-template-columns:1fr 1fr } /* =============================================================== code === Geen gevuld vlak meer maar een omlijnd paneel met de merkbalk als voet. */ .code-box{ position:relative; overflow:hidden; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; background:var(--paper-deep); border:1px solid var(--rule-hi); border-radius:var(--r); padding:1.2rem 1.3rem 1.3rem; margin-top:1.2rem; } .code-box::after{ content:''; position:absolute; inset:auto 0 0 0; height:2px; background:var(--brand-line); } .code-box.slim{ padding:1rem 1.1rem 1.1rem } .code-box .code-value{ font-family:var(--mono); font-weight:600; font-size:1.25rem; letter-spacing:.06em; color:var(--ink); line-height:1; } .code-actions{ display:flex; gap:.5rem; flex-wrap:wrap } /* ================================================================ bars === Rules van 2px in plaats van dikke pillen. De gradiënt loopt over de HÉLE track, niet per balk: daardoor staat kleur voor een waarde en niet voor "een balk". 10000% / --pct is precies de trackbreedte. */ .bars{ display:grid; gap:0; margin-top:1.3rem } .bar-row{ display:grid; grid-template-columns:minmax(6.5rem,1fr) 2.4fr auto; gap:1rem; align-items:center; padding:.7rem 0; border-bottom:1px solid var(--rule-soft); } .bar-row:last-child{ border-bottom:0 } .bar-track{ background:var(--rule-hi); height:2px; border-radius:1px; overflow:hidden } .bar-fill{ height:100%; background-image:var(--brand-line); background-repeat:no-repeat; background-size:calc(10000% / var(--pct,100)) 100%; } .bar-label{ color:var(--ink); font-weight:400; font-size:.88rem } .bar-val{ font-family:var(--mono); font-size:.8rem; font-weight:600; color:var(--coral); min-width:3rem; text-align:right; } /* --- stappen ----------------------------------------------------------- */ .steps{ list-style:none; margin:1.3rem 0 0; padding:0; counter-reset:s; display:grid; gap:1rem } .steps li{ position:relative; padding-left:2.4rem; font-size:.89rem; color:var(--ink-soft); line-height:1.6; } .steps li strong{ color:var(--ink); font-weight:600 } .steps li::before{ counter-increment:s; content:counter(s,decimal-leading-zero); position:absolute; left:0; top:.1rem; font-family:var(--mono); font-size:.68rem; font-weight:600; letter-spacing:.08em; color:var(--coral); } /* --- feed -------------------------------------------------------------- */ .feed{ list-style:none; margin:1.2rem 0 0; padding:0 } .feed li{ /* De omschrijving krijgt een leesbare maat in plaats van de volle paneelbreedte. Op 1300px stond de tekst uiterst links en het bedrag uiterst rechts, met een halve meter niets ertussen — dan lees je een rij niet meer als één regel. De middelste kolom vangt die ruimte op. */ display:grid; grid-template-columns:minmax(0,32rem) 1fr auto auto; gap:1rem; align-items:baseline; padding:.75rem .6rem; margin:0 -.6rem; border-radius:6px; border-bottom:1px solid var(--rule-soft); transition:background .18s ease; } .feed li:hover{ background:rgba(190,120,255,.06) } .feed li:last-child{ border-bottom:0 } .feed-what{ font-size:.88rem; color:var(--ink); grid-column:1 } .feed-when{ grid-column:3 } .feed-pts{ grid-column:4 } .feed-when{ font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint); white-space:nowrap; } .feed-pts{ font-family:var(--mono); font-size:.82rem; font-weight:600; white-space:nowrap; min-width:3.5rem; text-align:right; } /* Een aftrek is informatie, geen storing: leesbaar maar niet alarmerend. Op --ink-faint was hij praktisch onzichtbaar, en juist bij "Redeemed for USD 50.00 / -500" wil je zien wat eraf ging. */ .feed-pts.up{ color:var(--ok) } .feed-pts.down{ color:var(--ink-soft) } /* --- inwisselen -------------------------------------------------------- */ .redeem-head{ margin-top:1.2rem } .redeem-n{ font-family:'Intro Cond','Archivo',sans-serif; font-weight:900; font-size:2.5rem; line-height:1; color:var(--ink); } .redeem-panel .muted{ margin-top:1.2rem } .redeem-form{ display:grid; gap:1rem; margin-top:1.4rem; justify-items:start } /* De spelregels van een kortingscode. Ze stonden eerder als één doorlopende zin in de inleiding, en juist de twee dingen die geld kosten — hij werkt maar één keer en hij verloopt na 30 dagen — verdwenen daarin. Als lijst met vetgezette kern zijn ze scanbaar vóór iemand op Redeem drukt. */ .redeem-terms{ list-style:none; margin:1.1rem 0 0; padding:0; display:grid; gap:.55rem; font-size:.82rem; line-height:1.5; color:var(--ink-soft); } .redeem-terms li{ position:relative; padding-left:1rem } .redeem-terms li::before{ content:''; position:absolute; left:0; top:.55em; width:4px; height:4px; border-radius:50%; background:var(--coral); opacity:.75; } .redeem-terms strong{ color:var(--ink); font-weight:600 } /* Code plus kopieerknop. Een code met de muis selecteren is precies waar het misgaat: één teken te veel en de checkout zegt alleen "code not found". */ .voucher-cell{ display:inline-flex; align-items:center; gap:.5rem } .voucher-cell code{ letter-spacing:.04em } .voucher-cell button{ height:1.8rem; padding:0 .7rem; font-size:.6rem; flex:0 0 auto } /* Legenda bij de statuspillen. Vijf woorden die elk iets anders betekenen voor iemands punten — dan hoort er uitleg bij, niet ernaast. */ .status-key{ margin:1rem 0 0; padding:.95rem 0 0; border-top:1px solid var(--rule-soft); display:grid; gap:.5rem; font-size:.78rem; color:var(--ink-soft); } .status-key > div{ display:grid; grid-template-columns:7.5rem 1fr; gap:.75rem; align-items:baseline } .status-key dt,.status-key dd{ margin:0 } @media (max-width:640px){ .status-key > div{ grid-template-columns:1fr; gap:.2rem } } .redeem-form .field input{ width:10rem } .redeem-worth{ font-family:var(--mono); font-size:.95rem; font-weight:600; letter-spacing:.06em; color:var(--coral); margin:0; } /* --- maandstaafjes ----------------------------------------------------- */ /* Zes maanden waarvan er vijf leeg zijn: dat wás het beeld, en zonder as of spoor leest zo'n grafiek als kapot in plaats van als rustig. Elke maand heeft nu een eigen baan met een grondlijn, zodat een lege maand zichtbaar leeg is en niet zomaar afwezig. Bovendien staat het aantal punten erbij — een balk zonder schaal is een vorm, geen cijfer. */ .spark{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:.55rem; align-items:end; height:8.5rem; margin-top:1.4rem; } .spark-col{ display:grid; grid-template-rows:auto 1fr auto; gap:.45rem; height:100%; text-align:center; } .spark-v{ font-family:var(--mono); font-size:.58rem; letter-spacing:.06em; color:var(--ink-soft); line-height:1; } .spark-v.none{ color:var(--ink-faint); opacity:.55 } /* De baan waarin de balk staat. Zonder deze rest je oog nergens op. */ .spark-track{ position:relative; align-self:stretch; border-radius:3px; background:linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,.045)); box-shadow:inset 0 -1px 0 var(--rule-hi); display:flex; align-items:flex-end; overflow:hidden; } .spark-bar{ width:100%; min-height:3px; border-radius:2px 2px 0 0; background:linear-gradient(180deg, var(--coral), #c8408f); } .spark-bar.zero{ background:var(--rule-hi); min-height:2px; opacity:.55 } .spark-lab{ text-align:center } /* --- feiten ------------------------------------------------------------ */ .facts{ margin:1.3rem 0 0; display:grid; gap:0 } .facts > div{ display:grid; grid-template-columns:11rem 1fr; gap:1rem; align-items:baseline; padding:.75rem 0; border-bottom:1px solid var(--rule-soft); } .facts > div:last-child{ border-bottom:0 } .facts dt{ margin:0 } .facts dd{ margin:0; font-size:.88rem; color:var(--ink) } /* --- tabellen ---------------------------------------------------------- */ .data{ min-width:0 } table{ font-size:.84rem } th{ background:transparent; border-bottom:1px solid var(--rule) } td{ border-bottom:1px solid var(--rule-soft); color:var(--ink-soft) } tbody tr:last-child td{ border-bottom:0 } /* Een streepje links bij hover in plaats van een grijs vlak: het wijst de rij aan zonder de tabel te laten flikkeren bij het scannen. */ tbody tr td:first-child{ position:relative } tbody tr:hover td{ background:rgba(255,255,255,.022) } tbody tr:hover td:first-child::before{ content:''; position:absolute; left:0; top:.35rem; bottom:.35rem; width:2px; border-radius:2px; background:var(--coral); } td.num{ text-align:right; font-family:var(--mono); font-size:.78rem; white-space:nowrap } td.strong{ font-weight:600; color:var(--ink) } td.up{ color:var(--ok); font-family:var(--mono); font-weight:600 } td.down{ color:var(--ink-faint); font-family:var(--mono); font-weight:600 } /* Statussen: gerantsoeneerd tot een gekleurde tekst met haarlijn. */ .pill{ font-family:var(--mono); font-size:.62rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase; background:transparent; border:1px solid var(--rule-hi); color:var(--ink-faint); border-radius:var(--pill); padding:.2rem .6rem; } .pill.g{ color:var(--ok); border-color:rgba(87,217,163,.35) } .pill.r{ color:var(--bad); border-color:rgba(255,107,129,.35) } .pill.y{ color:var(--warn); border-color:rgba(232,195,74,.35) } .pill.b{ color:var(--info); border-color:rgba(155,140,245,.35) } .alert-ok,.alert-err{ border-radius:var(--r); padding:.85rem 1.1rem; font-family:var(--mono); font-size:.74rem; letter-spacing:.05em; background:var(--card); border:1px solid; } .alert-ok{ color:var(--ok); border-color:rgba(87,217,163,.35) } .alert-err{ color:var(--bad); border-color:rgba(255,107,129,.35) } code{ font-family:var(--mono); background:transparent; border:1px solid var(--rule-hi); color:var(--ink-soft); border-radius:4px; } .muted{ color:var(--ink-soft) } .small{ font-size:.78rem } .empty{ color:var(--ink-faint); margin-top:1.2rem; font-family:var(--mono); font-size:.74rem; letter-spacing:.04em; } /* =============================================================== voet === */ .fan-foot{ text-align:center; padding:0 1.25rem 3.5rem; font-family:var(--mono); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-faint); } .foot-mark{ height:1.5rem; width:auto; opacity:.5; margin-bottom:.9rem } .fan-foot p{ margin:0 } /* ============================================================== login === De auth-pagina's spraken een andere taal dan het dashboard: platte kaart, effen rand, geen atmosfeer. Dat is precies de plek waar iemand het merk voor het eerst ziet, dus juist daar mag hij niet armer zijn dan wat erachter zit. Ze delen nu de paneelgrammatica van het dashboard — gelaagde vulling, randgradiënt die licht vangt, hoekmarkeringen — met de merkbalk bovenaan als enige gekleurde vlak. De kaart mag hier iets breder dan de 400px van app.css: registratie heeft naam-, plaats- en geboortedatumvelden in paren, en die worden op 400px onleesbaar smal. */ .login-body{ padding:2.5rem 1.25rem; align-content:center; } .login-shell{ width:min(440px,100%); display:grid; gap:1.1rem; justify-items:center; } .login-card{ position:relative; overflow:hidden; width:100%; padding:2.4rem 2rem 2rem; border:1px solid transparent; border-radius:var(--r-lg); background: var(--sheen) padding-box, linear-gradient(var(--card), var(--card)) padding-box, var(--edge-grad) border-box; backdrop-filter:blur(20px) saturate(120%); /* Hier wél een schaduw, en dat is een bewuste uitzondering op "het systeem weigert elevatie". Die regel geldt voor panelen die op een rustig doek liggen; deze kaart zweeft over een bewegende aurora. Zonder ambient schaduw leest hij als een plaatje dat erop geplakt is in plaats van iets dat ervoor hangt. De schaduw is bijna zwart en heel wijd — je ziet hem niet als schaduw, alleen als diepte. */ box-shadow: var(--inner-hi), 0 1px 2px rgba(0,0,0,.5), 0 24px 70px -20px rgba(0,0,0,.85), 0 60px 120px -60px rgba(99,21,179,.5); display:grid; gap:1rem; text-align:center; } /* De merkbalk. Op het dashboard staat hij onder het logo; hier bovenaan de kaart, want de kaart ís hier het monument. */ .login-card::before{ content:''; position:absolute; inset:0 0 auto 0; height:3px; width:100%; background:var(--brand-bar); opacity:1; border-radius:0; } /* De hoekmarkering van het code-paneel stond hier ook, maar die werkt alleen in een vlak met marge eromheen. Op een auth-kaart eindigt de laatste regel tekst er pal naast en las het streepje als een renderfout. Weggehaald; de merkbalk bovenaan draagt het merk hier al. */ .login-logo{ width:150px; height:auto; margin:.4rem auto 0; opacity:1 } /* Mono-kapitalen boven de kop: dezelfde stem als de sectienummers op het dashboard, zodat de pagina meteen als hetzelfde systeem leest. */ .login-eyebrow{ font-family:var(--mono); font-size:.6rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-faint); margin:0; } .login-card h1{ font-size:clamp(1.5rem, 1.2rem + 1vw, 1.85rem); line-height:1; margin:0; letter-spacing:.01em; } .login-card > p.muted{ margin:0 auto; max-width:30ch; font-size:.86rem; line-height:1.55; color:var(--ink-soft); } /* Haarlijn tussen het verhaal en het formulier. Hij dooft naar de randen uit, zodat hij de kaart niet in twee blokken hakt maar alleen een adempauze markeert — en hij draagt een tik merkkleur in het midden. */ .login-card .login-rule{ height:1px; width:100%; margin:.35rem 0 .15rem; background:linear-gradient(90deg, transparent, var(--rule-hi) 20%, rgba(253,146,83,.4) 50%, var(--rule-hi) 80%, transparent); border:0; } .login-card label{ display:grid; gap:.4rem; text-align:left; font-family:var(--mono); font-size:.6rem; font-weight:600; letter-spacing:.19em; text-transform:uppercase; color:var(--ink-faint); } /* Het label licht mee op zodra je in het veld staat: goedkoop signaal, maar het maakt het formulier levend in plaats van statisch. */ .login-card label:focus-within{ color:var(--coral) } /* Een groep velden onder één kop (geboortedatum): zelfde opmaak als een label, maar geen