/* ========================================================================== Merke — designtokens -------------------------------------------------------------------------- Egen --mk-*-rymd. Vi omdefinierar ALDRIG Bosses --color-foreground / --color-background: cms.css:197 använder dem i inline-editorns input, och cms-page-layout.php laddar variables.css rakt in i admin-UI:t. En omdefiniering ger vit text på vit input när kunden redigerar. Bron till Bosses tokens ligger i overrides.css och är fyra rader. Alla kontrastvärden nedan är uträknade enligt WCAG 2.1, inte uppskattade. ========================================================================== */ :root, [data-theme="dark"] { /* --- Ytor --- */ --mk-bg: #0B0B0C; /* bas */ --mk-bg-2: #111113; /* upphöjd yta, kortbotten */ --mk-bg-deep: #300009; /* Merkes gamla burgundy, sekundär mörk yta */ /* --- Text --- */ --mk-fg: #F2F1EE; /* 17.42:1 AAA */ --mk-fg-mute: #9E9EA4; /* 7.38:1 AAA — sekundär brödtext */ --mk-fg-faint: #6E6E73; /* 3.88:1 — ENDAST dekor, aldrig brödtext */ /* --- Linjer. Referensens #343543 ger bara 1.63:1 mot vår mörkare bas. --- */ --mk-line: rgba(242, 241, 238, .14); --mk-line-strong: rgba(242, 241, 238, .28); /* --- Signatur. #F44B4E är verifierad ur uploads/merke/2025/10/Symbol_Neon.png (100 % av synliga pixlar) och matchar Elementor-kittets uicore_primary. --- */ --mk-accent: #F44B4E; /* 5.59:1 AA */ --mk-accent-hi: #FF7A7C; /* 7.80:1 AAA — inline-länkar i brödtext */ --mk-accent-ink: #0B0B0C; /* text PÅ accentyta: 5.59:1. Vit hade gett 3.52:1 = underkänt. */ --mk-accent-soft: rgba(244, 75, 78, .14); /* --- Grain --- */ --mk-grain-opacity: .055; --mk-grain-speed: .8s; --mk-scheme: dark; --mk-shadow: 0 1px 0 rgba(242, 241, 238, .06); } /* -------------------------------------------------------------------------- Ljust tema — case-sidorna (/arbeten/{slug}), så jobbet får bära färgen. Sätts som data-theme="light" på (propagerar till canvas, så overscroll-området får rätt färg) men fungerar även per sektion. KRITISKT: #F44B4E ger bara 3.12:1 mot ljus bas = underkänt för text. Signaturfärgen BYTS därför här. Ren #F44B4E får finnas kvar som grafik (logotypen, pillen) — icke-text kräver bara 3:1. -------------------------------------------------------------------------- */ [data-theme="light"] { --mk-bg: #F7F6F3; --mk-bg-2: #FFFFFF; --mk-bg-deep: #EAE8E3; --mk-fg: #111112; /* 17.46:1 AAA */ --mk-fg-mute: #55555A; /* 6.86:1 AAA */ --mk-fg-faint: #8A8A8F; /* 3.18:1 — dekor */ --mk-line: rgba(17, 17, 18, .14); --mk-line-strong: rgba(17, 17, 18, .26); --mk-accent: #C41A20; /* 5.53:1 AA */ --mk-accent-hi: #A81419; /* 6.99:1 AAA */ --mk-accent-ink: #FFFFFF; /* vit på #C41A20: 5.97:1 */ --mk-accent-soft: rgba(196, 26, 32, .10); --mk-grain-opacity: .045; --mk-scheme: light; --mk-shadow: 0 1px 0 rgba(17, 17, 18, .06); } :root { /* --- Typsnitt. Definieras i includes/fonts.php. --- */ --mk-font-display: "Archivo Exp", "Archivo Fallback", "Arial Black", "Helvetica Neue", sans-serif; --mk-font-body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif; --mk-font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* --- Typskala. --mk-fs-display är kalibrerad mot den faktiska rubriken: "MERKS DU?" mäter 7,59 em i Archivo Expanded Bold (uppmätt via canvas, inte uppskattat). Tillgänglig innehållsbredd är ~92vw på mobil och max 82,5rem på desktop: 92vw / 7,59 ≈ 12,1vw → 11,5vw med marginal 1320px / 7,59 ≈ 174px → 10,5rem som tak Byts rubriken måste värdet mätas om — en längre rubrik spiller över. --- */ --mk-fs-display: clamp(2.25rem, 11.5vw, 10.5rem); /* h1 och h2 delar skala med flit. Sidrubriker ("Berätta vad ni vill göra.") och avslutande frågor ("Har ni något på gång?") fyller samma roll — ett påstående som bär sin sektion — och såg ojämna ut när de låg på var sin nivå. Hierarkin bärs av heron, som är i en helt egen skala, och nedåt av h3/h4. */ --mk-fs-h1: clamp(2.25rem, 6vw, 4.5rem); --mk-fs-h2: clamp(2.25rem, 6vw, 4.5rem); --mk-fs-h3: clamp(1.625rem, 3.6vw, 2.75rem); --mk-fs-h4: clamp(1.25rem, 2.2vw, 1.75rem); --mk-fs-lead: clamp(1.0625rem, 1.5vw, 1.375rem); --mk-fs-body: 1.0625rem; /* 17px */ --mk-fs-sm: .9375rem; --mk-fs-label: .75rem; --mk-fs-mono: .8125rem; --mk-lh-display: .86; --mk-lh-tight: 1.02; --mk-lh-head: 1.08; --mk-lh-body: 1.6; --mk-ls-display: -.035em; --mk-ls-head: -.025em; --mk-ls-body: -.011em; --mk-ls-label: .16em; /* versaler behöver POSITIV spärr */ /* --- Rumslighet --- */ --mk-s-1: .25rem; --mk-s-2: .5rem; --mk-s-3: .75rem; --mk-s-4: 1rem; --mk-s-5: 1.5rem; --mk-s-6: 2rem; --mk-s-7: 2.5rem; --mk-s-8: 3rem; --mk-s-9: 4rem; --mk-s-10: 5rem; --mk-s-11: 6rem; --mk-s-12: 8rem; --mk-sec: clamp(3.5rem, 6.5vw, 6.5rem); --mk-sec-lg: clamp(5rem, 9vw, 9rem); --mk-gut: clamp(1.25rem, 4vw, 3.75rem); --mk-maxw: 82.5rem; --mk-maxw-text: 46rem; /* --- Radier: skarpt. Identiteten är hairlines, inte rundningar. --- */ --mk-r-0: 0; --mk-r-1: 2px; --mk-r-pill: 999px; /* --- Easing. GSAP-ekvivalenter, så CSS och JS aldrig glider isär. --- */ --mk-ease-quad: cubic-bezier(.25, .46, .45, .94); /* power1.out */ --mk-ease-quart: cubic-bezier(.165, .84, .44, 1); /* power3.out — standard */ --mk-ease-quint: cubic-bezier(.23, 1, .32, 1); /* power4.out — letter-rise */ --mk-ease-expo: cubic-bezier(.16, 1, .3, 1); --mk-ease-inout: cubic-bezier(.65, 0, .35, 1); /* --- Durationer --- */ --mk-d-1: 180ms; --mk-d-2: 320ms; --mk-d-3: 500ms; --mk-d-4: 800ms; --mk-d-5: 1000ms; --mk-swap: 350ms; /* delad hover-timing */ /* --- Z. Tak: Bosses admin-bar 10000, cookie-consent 9999. --- */ --mk-z-sticky: 10; --mk-z-navpanel: 900; --mk-z-nav: 950; --mk-z-grain: 990; } html { color-scheme: var(--mk-scheme); }