/* ========================================================================== PRICR Empty Grid, tokenlager ========================================================================== Formspråket kodat som variabler och primitiver. Inga sidspecifika regler. Sidan delas som ett dygn: ett mörkt band överst, ett brett ljust fält i mitten, en smal mörk fog i botten. Delningarna är absoluta. Grönt bor bara i tokens vars namn innehåller "accent". Det används aldrig som bakgrundsyta, aldrig som dekoration, bara där betydelsen skiftar: ett accentord, en fylld rutnätscell, ett nyckeltal. Hårda regler för tryckta dokument: inga rundade hörn, inga skuggor, inga toningar, inga övergångar. De reglerna gäller oförändrat för PDF och kalkylark. För webben har grundaren beslutat ett friare uttryck. Utvidgningen ligger samlad sist i filen, under rubriken "Webbens utvidgning", och lägger till ett djupgrönt band, upphöjda ytor, radie, skugga, rörelse och z-lager. Ingen befintlig färg- eller typtoken ändras av den. ========================================================================== */ :root { /* ── Paletten, råa värden. Används aldrig direkt, bara via rolltokens ── */ --pricr-ink: #1A1D1A; /* bläck, text och mörka band */ --pricr-paper: #F8F7F2; /* papper, det ljusa fältet */ --pricr-paper-tint: color-mix(in srgb, var(--pricr-ink) 2%, var(--pricr-paper)); /* papper en aning nedtonat. Sidans andra ljusa botten, den som växlar mot papper i ljust läge. Blandad ur de två värdena ovan, aldrig skriven som en egen kulör. Skillnaden är avsiktligt liten: uppmätt 0,034 i relativ luminans mot papper */ --pricr-grey: #4A524A; /* sekundär text och konturer, ljus botten */ --pricr-grey-light: #D9DED9; /* sekundär text och konturer, mörk botten */ --pricr-accent-light: #1A7F4B; /* grönt på ljus botten */ --pricr-accent-dark: #60D68A; /* grönt på mörk botten */ --pricr-alert-light: #B03A2E; /* rött på ljus botten */ --pricr-alert-dark: #FF9182; /* rött på mörk botten */ --pricr-ink-deep: #0E100E; /* bläck en nyans djupare, endast för bandseparation i mörkt läge */ --pricr-ink-mid: #2E332E; /* bläck en nyans ljusare, endast för rumsseparation i mörkt läge. Sidan har tre rum i följd; mörkt läge behöver därför tre mörka ytor */ /* ── Tre typografiska register, aldrig blandade ── */ --pricr-font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif; --pricr-font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; --pricr-font-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* ── Skala, sju steg. clamp på de tre största ── */ --pricr-type-1: 11px; /* mono-etikett */ --pricr-type-2: 13px; /* mono-data, fotnot */ --pricr-type-3: 15px; /* brödtext */ --pricr-type-4: 17px; /* ingress */ --pricr-type-5: clamp(21px, 1.6vw, 26px); /* mindre rubrik */ --pricr-type-6: clamp(27px, 3.2vw, 40px); /* avsnittsrubrik */ --pricr-type-7: clamp(33px, 4.9vw, 60px); /* den enda idén */ --pricr-leading-tight: 1.12; --pricr-leading-body: 1.62; /* ── Spärrning, justerad per register ── */ --pricr-track-label: 0.18em; /* mono i versaler */ --pricr-track-wordmark: 0.26em; /* ordmärket PRICR */ --pricr-track-sub: 0.14em; /* DYNAMIC AB under ordmärket */ --pricr-track-display: -0.012em; /* serif i stora grader */ /* ── Modulen. Varje vertikalt avstånd är en multipel av den ── */ --pricr-module: 8px; --pricr-space-1: 8px; --pricr-space-2: 16px; --pricr-space-3: 24px; --pricr-space-4: 32px; --pricr-space-5: 40px; --pricr-space-6: 48px; --pricr-space-7: 56px; --pricr-space-8: 64px; --pricr-space-9: 72px; --pricr-space-10: 80px; --pricr-space-11: 88px; --pricr-space-12: 96px; --pricr-measure: 66ch; /* läsbar radlängd för brödtext */ --pricr-shell: 1120px; /* satsytans bredd */ --pricr-gutter: clamp(20px, 4vw, 64px); --pricr-hairline: 1px; --pricr-cell: 1px; /* ── Rolltokens, ljust läge. Sajtens standardläge ── */ --pricr-band-bg: var(--pricr-ink); --pricr-band-fg: var(--pricr-paper); --pricr-band-fg-dim: var(--pricr-grey-light); --pricr-band-accent: var(--pricr-accent-dark); --pricr-band-rule: var(--pricr-grey); --pricr-field-bg: var(--pricr-paper); --pricr-field-fg: var(--pricr-ink); --pricr-field-fg-dim: var(--pricr-grey); --pricr-field-accent: var(--pricr-accent-light); --pricr-field-alert: var(--pricr-alert-light); --pricr-field-rule: var(--pricr-grey); --pricr-cell-line: var(--pricr-grey); --pricr-cell-filled: var(--pricr-accent-light); --pricr-cell-on-filled: var(--pricr-paper); } /* Mörkt läge. Sajtens konvention: klassen "light" på html betyder ljust läge, ingen klass betyder mörkt. Bandstrukturen består: fältet är bläck, banden ligger en nyans djupare, och varje delning bärs av en hårfin linje. */ :root:not(.light) { --pricr-band-bg: var(--pricr-ink-deep); --pricr-band-fg: var(--pricr-paper); --pricr-band-fg-dim: var(--pricr-grey-light); --pricr-band-accent: var(--pricr-accent-dark); --pricr-band-rule: var(--pricr-grey-light); --pricr-field-bg: var(--pricr-ink); --pricr-field-fg: var(--pricr-paper); --pricr-field-fg-dim: var(--pricr-grey-light); --pricr-field-accent: var(--pricr-accent-dark); --pricr-field-alert: var(--pricr-alert-dark); --pricr-field-rule: var(--pricr-grey-light); --pricr-cell-line: var(--pricr-grey-light); --pricr-cell-filled: var(--pricr-accent-dark); --pricr-cell-on-filled: var(--pricr-ink); } /* ── Primitiver: de tre lagren ─────────────────────────────────────────── */ .pricr-band-dark { background: var(--pricr-band-bg); color: var(--pricr-band-fg); border-bottom: var(--pricr-hairline) solid var(--pricr-band-rule); border-radius: 0; } .pricr-field-light { background: var(--pricr-field-bg); color: var(--pricr-field-fg); border-radius: 0; } .pricr-foot-dark { background: var(--pricr-band-bg); color: var(--pricr-band-fg-dim); border-top: var(--pricr-hairline) solid var(--pricr-band-rule); border-radius: 0; } /* Satsytan. Varje vänsterkant delar en axel. */ .pricr-shell { max-width: var(--pricr-shell); margin: 0 auto; padding-left: var(--pricr-gutter); padding-right: var(--pricr-gutter); } /* ── Primitiv: mono-etiketten ──────────────────────────────────────────── */ /* Spärrade versaler. Överskrider aldrig en rad. */ .pricr-label { display: block; font-family: var(--pricr-font-mono); font-size: var(--pricr-type-1); font-weight: 500; line-height: 1.3; letter-spacing: var(--pricr-track-label); text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--pricr-field-fg-dim); margin: 0; } .pricr-band-dark .pricr-label, .pricr-foot-dark .pricr-label { color: var(--pricr-band-fg-dim); } /* Etiketten bär accentfärgen bara när den markerar ett avsnitt. */ .pricr-label--accent { color: var(--pricr-field-accent); } .pricr-band-dark .pricr-label--accent { color: var(--pricr-band-accent); } /* ── Primitiv: rutnätsmotivet ──────────────────────────────────────────── */ /* Små exakta rektanglar i disciplinerade rader. De flesta som svag kontur, ett fåtal fyllda med accentfärgen. Ögat hittar de fyllda omedelbart. */ .pricr-grid-motif { display: grid; gap: var(--pricr-module); list-style: none; margin: 0; padding: 0; } .pricr-grid-cell { display: block; border: var(--pricr-cell) solid var(--pricr-cell-line); border-radius: 0; background: transparent; min-width: 0; } .pricr-grid-cell--filled { background: var(--pricr-cell-filled); border-color: var(--pricr-cell-filled); } /* Ingen observation. Skiljs genom rum och höjd, aldrig genom en svagare färg, så att tillståndet syns även för den som inte skiljer nyanser. */ .pricr-grid-cell--empty { align-self: end; height: 50%; border-style: solid; background: transparent; } /* ── Primitiv: hårfin linje ────────────────────────────────────────────── */ .pricr-rule { border: 0; border-top: var(--pricr-hairline) solid var(--pricr-field-rule); margin: 0; } .pricr-band-dark .pricr-rule, .pricr-foot-dark .pricr-rule { border-top-color: var(--pricr-band-rule); } /* ── Primitiv: åtgärd ──────────────────────────────────────────────────── */ /* Hierarki genom vikt och rum. Den primära åtgärden markeras med kontur och vikt, aldrig med en grön fylld yta. */ .pricr-action { display: inline-block; font-family: var(--pricr-font-sans); font-size: var(--pricr-type-3); line-height: 1.4; text-decoration: none; background: transparent; border: var(--pricr-hairline) solid currentColor; border-radius: 0; padding: calc(var(--pricr-module) * 1.5) var(--pricr-space-3); cursor: pointer; color: inherit; } .pricr-action--primary { font-weight: 600; border-width: 2px; } .pricr-action--quiet { font-weight: 400; border-color: var(--pricr-field-rule); } .pricr-band-dark .pricr-action--quiet { border-color: var(--pricr-band-rule); } /* ── Fokus. Aldrig outline: none ───────────────────────────────────────── */ a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } /* ========================================================================== Webbens utvidgning ========================================================================== Gäller sajten. Gäller inte PDF och kalkylark, där hårda regler ovan står kvar oförändrade. Grundaren har beslutat att webben får rundade hörn, diskret upphöjda ytor, scrolldriven rörelse och djup. Paletten, de tre typografiska registren, modulen, spärrningen och alla faktakrav är oförändrade. Grönt är fortsatt strängt återhållet och är aldrig en stor bakgrundsyta: den enda gröna ytan på sidan är den primära knappens piller och en fylld rutnätscell. Det djupgröna bandet är härlett ur bläck och grönt, inte ur svart: bläckets ton dragen mot accentens kulör och några steg mörkare. Två upphöjda steg ligger ovanpå det. Kontrasten mot papper, ljusgrått och accentgrönt ligger över 4,5:1 på alla tre ytorna. Mätvärdena står i FRONTEND_EMPTYGRID_REPORT.md. ========================================================================== */ :root { /* ── Det djupgröna bandet och två steg upphöjd yta på det ── */ --pricr-forest: #0C1A12; /* bandets botten */ --pricr-forest-deep: #071009; /* bandets botten, en nyans djupare. Enda bruk: simulatorbandet direkt under heroet, så att två mörka fält i följd inte läses som ett */ --pricr-forest-raise-1: #122419; /* upphöjd yta, steg 1 */ --pricr-forest-raise-2: #17301F; /* upphöjd yta, steg 2 */ --pricr-forest-rule: #24402D; /* kontur mellan upphöjda ytor */ --pricr-forest-veil: rgba(12, 26, 18, 0.72); /* piller-navigationens genomskinliga botten */ /* ── Tematokens för dashboarden ── */ --pricr-sand: #C8D0C8; /* sekundär text på forest — Nigel UX: bump till läsbar kontrast (~#C8D0C8) på forest-botten */ --pricr-mint: var(--pricr-accent-dark); /* accentens namn i dashboarden; samma värde, aldrig ett eget */ /* ── Radie, tre steg plus piller ── */ --pricr-radius-1: 8px; /* etiketter, små rutor */ --pricr-radius-2: 16px; /* kort och figurramar */ --pricr-radius-3: 28px; /* stora upphöjda ytor */ --pricr-radius-pill: 999px; /* knappar och navigationens behållare */ /* ── Skugga, tre nivåer. Bara på ljus botten; på djupgrönt bärs höjden av ytans egen ljushet och en hårfin kontur, aldrig av en svart skugga. ── */ --pricr-shadow-1: 0 1px 2px rgba(26, 29, 26, 0.05), 0 2px 6px rgba(26, 29, 26, 0.05); --pricr-shadow-2: 0 2px 4px rgba(26, 29, 26, 0.05), 0 8px 20px rgba(26, 29, 26, 0.08); --pricr-shadow-3: 0 4px 8px rgba(26, 29, 26, 0.06), 0 18px 44px rgba(26, 29, 26, 0.10); /* ── Rörelse. Tre varaktigheter, en kurva. Ingen varaktighet på sidan får överstiga 600 ms, och ingen kurva får ha översläng. ── */ --pricr-dur-1: 180ms; /* tillstånd: hover, fokus, tema */ --pricr-dur-2: 360ms; /* en cell, en ikon, ett kort */ --pricr-dur-3: 560ms; /* text som kommer in, en kurva som ritas */ --pricr-ease-web: cubic-bezier(0.2, 0.8, 0.2, 1); /* ── Förskjutning mellan syskon ── */ --pricr-step: 60ms; /* kort och rader */ --pricr-step-cell: 14ms; /* rutnätets 24 celler */ /* ── Två undantag från 600 ms-taket, båda beslutade av grundaren ─────── Taket ovan gäller varje tillståndsbyte: något som svarar på en hover, ett klick eller en scroll. Dessa två är ingetdera. 1. Heroets utskrift. Rubriken skrivs ut tecken för tecken vid sidladdning. Under 600 ms läses det inte som en utskrift utan som en glitch, och de tjugonio tecknen hinner inte skiljas åt. Taket är satt till 1800 ms för båda raderna tillsammans, och gäller bara heroets rubrik. Ingen annan text på sidan skrivs ut. 2. Prisdataregnet. Ett värde som faller genom processavsnittet är atmosfär, inte ett tillståndsbyte, och en fallhastighet under 600 ms vore ett flimmer. Regnet står stilla när avsnittet ligger utanför visningsytan. */ --pricr-dur-type-total: 1800ms; /* heroets båda rader tillsammans */ --pricr-dur-caret: 900ms; /* markörens blink, en period */ --pricr-dur-rain: 34s; /* ett värde faller genom avsnittet */ /* ── Inom taket ── */ --pricr-dur-sim: 400ms; /* prissimulatorns värdebyte */ --pricr-dur-count: 560ms; /* prisets uppräkning mellan två lägen. Egen varaktighet, inte samma som värdebytet: räkningen ska hinna läsas som en räkning och ligger därför i överkanten av taket */ /* ── Dragspel och aktivitetsanimationer ──────────────────────────────── Utfällningen ska kännas dragen, inte snärtig, och ligger därför i överkanten av vad ett tillståndsbyte får ta. Aktivitetsslingorna är ambient rörelse på samma grund som regnet: de svarar inte på någon handling och står stilla när kortet ligger utanför vyn. */ --pricr-dur-collapse: 520ms; /* stegens och aktiviteternas utfällning */ --pricr-dur-loop-1: 5s; /* golf, hänglås */ --pricr-dur-loop-2: 6s; /* bowling, padel */ --pricr-dur-loop-3: 7s; /* lasertag, go-kart */ --pricr-dur-timeline: 2200ms; /* pilotens punktförlopp, hela */ /* Punkten mellan stegen ska svepa, inte glida jämnt: den accelererar ur stillastående och bromsar in mot nästa punkt. Kurvan är symmetrisk och har varken studs eller översläng. Varje delsträcka är 36 procent av förloppet, alltså 792 ms, med en paus på 220 ms vid varje punkt. */ --pricr-ease-sweep: cubic-bezier(0.65, 0, 0.35, 1); /* ── Z-lager. Fem steg, inga andra värden i sidorna. ── */ --pricr-z-base: 0; --pricr-z-raised: 10; --pricr-z-figure: 20; --pricr-z-nav: 40; --pricr-z-overlay: 60; }