/* ══════════════════════════════════════════════════════════════════════ BUTIKKENS UDSEENDE — én kilde for butik, admin og kasse To UAFHÆNGIGE akser, begge sat som attributter på : data-theme = FORM (radius, skygge, overskriftsskrift, bevægelse, luft) data-palette = FARVE (flader, tekst, accent) Begge lå indtil august 2026 KUN i assets/shop.css, så butikken kunne skifte udseende mens admin og kassen blev stående i skovgrøn, sans og admins egen radius-skala. De tre flader lignede ikke samme produkt. Filen loades af `partials/chrome.php` (butikken), `admin.html` og `kasse.html` — EFTER deres egen CSS, så blokkene ligger sidst i kaskaden præcis som da de stod i shop.css. ⚠️ Nogle tema-regler peger på klasser der findes BEGGE steder (.card, .btn). Det er med vilje: det er præcis dér de to flader skal ligne hinanden. Regler for rene butiks-klasser (.hero-eyebrow, .product-card …) er inerte i admin og kassen og gør ingen skade. ⚠️ Semantiske farver hører IKKE til her. --green (lykkedes), --red (fejl), --amber (advarsel) og --star skal betyde det samme uanset palet — et "Betalt"-mærke må ikke skifte betydning fordi butikken er blevet brun. ⚠️ ÆNDRER DU DENNE FIL, skal ?v= bumpes i BÅDE admin.html og kasse.html. Butikken cachebuster automatisk med filemtime (chrome.php), men de to er statiske filer der ikke kan køre PHP. ⚠️ Tilføjer du et tema eller en palet, skal den også med i VS_THEMES/ VS_PALETTES (partials/palet.php), applyTheme() (shop.js), admin.html (VS_PALETTER/VS_TEMAER + vælgeren) og kasse.html (PAL/TEM-listerne). ══════════════════════════════════════════════════════════════════════ */ /* ── 0. FORMFELTER OG BROWSERENS EGNE FLADER ────────────────────── `color-scheme` manglede helt — målt: getComputedStyle(html).colorScheme var "normal" på alle tre flader. Uden den regner browseren ALLE sine egne dele ud efter den lyse tilstand, uanset hvad @media (prefers-color-scheme) har gjort ved vores egne farver. Konkret målt i Lager-oversigten i mørk tilstand: tallene i number-felterne stod i rgb(0,0,0) på --bg #131512, altså kontrast 1,05:1 — næsten sorte tal på en næsten sort flade. Det samme rammer talpilene, markøren, autofill, datovælgeren og scrollbaren. Værdien er `light dark`, ikke `dark`. Butikken, admin og kassen er LYSE som udgangspunkt og skifter kun med systemets indstilling — et hårdt `dark` ville give mørke felter, mørk scrollbar og et mørkt lærred på den lyse flade. `light dark` siger "vi understøtter begge", og så følger browserens dele automatisk samme indstilling som vores egne farver. ⚠️ `color` alene er ikke nok i Safari: den maler feltets tekst med -webkit-text-fill-color, som vinder over color. Begge skal sættes, ellers ser det rigtigt ud i Chrome og forkert på iPad'en ved disken. Selektorerne er RENE ELEMENTER (0-0-1). De taber til enhver klasseregel, så et felt der allerede har sin egen farve beholder den — reglen udfylder kun hullerne. `.cost-row input` i admin satte fx baggrund men aldrig farve, og det var netop hullet. */ :root { color-scheme: light dark; } input, select, textarea { color: var(--text); -webkit-text-fill-color: var(--text); } /* Deaktiveret SKAL stadig se deaktiveret ud — ellers ville reglen ovenfor give et låst felt fuld styrke. */ input:disabled, select:disabled, textarea:disabled { color: var(--muted); -webkit-text-fill-color: var(--muted); opacity: 1; /* Safaris egen dæmpning oven i --muted blev grød */ } input::placeholder, textarea::placeholder { color: var(--muted); -webkit-text-fill-color: var(--muted); opacity: 1; /* Firefox dæmper placeholderen med opacity */ } /* Afkrydsningsfelter og radioknapper tegnes af browseren i dens egen blå, uanset palet — samme slags fejl som de sorte tal, bare med en farve i stedet for en tilstand. Kassen satte den allerede på .checkline input; nu gælder den alle tre flader. */ input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: var(--accent); } /* ── 1. TEMAER (form) ───────────────────────────────────────────── Serif-stakken er bevidst system-fonte: butikken må ikke hente flere eksterne filer (CSP + hastighed), og Georgia/Iowan findes overalt. */ :root { --serif: Georgia, 'Iowan Old Style', 'Palatino Linotype', 'Book Antiqua', serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace; } /* Studio — standard: blød, varm, afrundet */ :root[data-theme="studio"] { --radius-xs: 6px; --radius-sm: 8px; --radius: 10px; --radius-lg: 14px; --radius-pill: 50px; --shadow: 0 2px 12px rgba(0,0,0,.08); --shadow-lg: 0 8px 32px rgba(0,0,0,.12); --font-head: 'Hanken Grotesk', system-ui, sans-serif; --dur-fast: .13s; --dur-base: .19s; --dur-slow: .3s; } /* Galleri — editorial: skarpe hjørner, serif, hårfine streger, ingen skygger */ :root[data-theme="galleri"] { --radius-xs: 0px; --radius-sm: 0px; --radius: 2px; --radius-lg: 2px; --radius-pill: 2px; --shadow: 0 1px 0 rgba(0,0,0,.06); --shadow-lg: 0 2px 0 rgba(0,0,0,.08); --font-head: var(--serif); --dur-fast: .16s; --dur-base: .24s; --dur-slow: .36s; } :root[data-theme="galleri"]:not([data-app="admin"]) h1, :root[data-theme="galleri"]:not([data-app="admin"]) h2 { font-weight: 600; letter-spacing: -.015em; } :root[data-theme="galleri"] .card { box-shadow: none; border: 1px solid var(--border); } :root[data-theme="galleri"] { --section-y: clamp(5rem, 10vw, 8.5rem); } /* Atelier — modebutik: rektangulært, versaler med bred sperring, høj kontrast */ :root[data-theme="atelier"] { --radius-xs: 0px; --radius-sm: 0px; --radius: 0px; --radius-lg: 0px; --radius-pill: 0px; --shadow: 0 1px 6px rgba(0,0,0,.07); --shadow-lg: 0 10px 30px rgba(0,0,0,.14); --font-head: 'Hanken Grotesk', system-ui, sans-serif; --dur-fast: .1s; --dur-base: .15s; --dur-slow: .24s; } :root[data-theme="atelier"]:not([data-app="admin"]) h1, :root[data-theme="atelier"]:not([data-app="admin"]) h2 { font-weight: 800; letter-spacing: -.03em; } :root[data-theme="atelier"] .btn, :root[data-theme="atelier"] .checkout-btn, :root[data-theme="atelier"] .vs-ask-btns button, :root[data-theme="atelier"] .add-btn { text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; font-weight: 700; } :root[data-theme="atelier"] .hero-eyebrow { letter-spacing: .22em; } /* h1 med: sektionsoverskriften er h2 på forsiden, men h1 på /kategorier, /kategori/… og /soeg. Uden h1 her fik netop de sider en titel der brød temaets udtryk — samme grund som at .section-header h1 nu deler størrelsesreglen med h2 i shop.css. */ :root[data-theme="atelier"] .section-header h1, :root[data-theme="atelier"] .section-header h2 { text-transform: uppercase; letter-spacing: .06em; } /* Nordisk — minimal: næsten ingen skygge, hårfine streger, meget luft */ :root[data-theme="nordisk"] { --radius-xs: 3px; --radius-sm: 4px; --radius: 5px; --radius-lg: 6px; --radius-pill: 6px; --shadow: 0 1px 3px rgba(0,0,0,.045); --shadow-lg: 0 4px 14px rgba(0,0,0,.07); --font-head: 'Hanken Grotesk', system-ui, sans-serif; --dur-fast: .15s; --dur-base: .22s; --dur-slow: .32s; } :root[data-theme="nordisk"]:not([data-app="admin"]) h1, :root[data-theme="nordisk"]:not([data-app="admin"]) h2 { font-weight: 600; letter-spacing: -.01em; } :root[data-theme="nordisk"] .card { box-shadow: none; border: 1px solid var(--border-soft); } :root[data-theme="nordisk"] { --section-y: clamp(5.5rem, 11vw, 9.5rem); } :root[data-theme="nordisk"] .btn { font-weight: 600; } /* Boutique — luksus: store radier, dybe bløde skygger, serif, generøs luft */ :root[data-theme="boutique"] { --radius-xs: 8px; --radius-sm: 12px; --radius: 16px; --radius-lg: 22px; --radius-pill: 50px; --shadow: 0 4px 18px rgba(30,22,14,.10); --shadow-lg: 0 18px 48px -12px rgba(30,22,14,.24); --font-head: var(--serif); --dur-fast: .16s; --dur-base: .26s; --dur-slow: .4s; } :root[data-theme="boutique"]:not([data-app="admin"]) h1, :root[data-theme="boutique"]:not([data-app="admin"]) h2 { font-weight: 600; letter-spacing: -.02em; } :root[data-theme="boutique"] .btn, :root[data-theme="boutique"] .checkout-btn { padding-block: 1rem; } :root[data-theme="boutique"] { --section-y: clamp(5.5rem, 11vw, 9.5rem); } /* Laboratorium — apotek/laboratorium. Monospace-mærkater, versaler med bred sperring, nul runde hjørner, ingen skygger, hårfine streger. Inspireret af Le Labo. To bevidste afvigelser fra forlægget: (1) BRØDTEKST bliver ikke monospace — handelsbetingelserne er 2.000 ord, og monospace er hårdt at læse i lange afsnit. Monospace bruges hvor det bærer udtrykket: overskrifter, mærkater, knapper, priser, produktnavne. (2) Baggrunden forbliver lys. Le Labos nær-sorte lærred kræver at hele fladen vendes om, og det hører til på palet-aksen, ikke her. */ :root[data-theme="laboratorium"] { --radius-xs: 0px; --radius-sm: 0px; --radius: 0px; --radius-lg: 0px; --radius-pill: 0px; --shadow: none; --shadow-lg: none; --font-head: var(--mono); --dur-fast: .12s; --dur-base: .18s; --dur-slow: .28s; } :root[data-theme="laboratorium"]:not([data-app="admin"]) h1, :root[data-theme="laboratorium"]:not([data-app="admin"]) h2, :root[data-theme="laboratorium"] .section-header h2 { text-transform: uppercase; letter-spacing: .16em; font-weight: 700; font-size: clamp(1rem, 2.6vw, 1.5rem); line-height: 1.35; } :root[data-theme="laboratorium"] .btn, :root[data-theme="laboratorium"] .checkout-btn, :root[data-theme="laboratorium"] .vs-ask-btns button, :root[data-theme="laboratorium"] .add-btn, :root[data-theme="laboratorium"] .filter-btn, :root[data-theme="laboratorium"] .product-cat, :root[data-theme="laboratorium"] .product-badge, :root[data-theme="laboratorium"] .hero-eyebrow, :root[data-theme="laboratorium"] .product-price, :root[data-theme="laboratorium"] .pd-price { font-family: var(--mono); letter-spacing: .12em; text-transform: uppercase; } :root[data-theme="laboratorium"] .btn, :root[data-theme="laboratorium"] .checkout-btn, :root[data-theme="laboratorium"] .add-btn { font-size: .74rem; font-weight: 700; } :root[data-theme="laboratorium"] .product-name { font-family: var(--mono); letter-spacing: .06em; font-size: .84rem; font-weight: 700; } :root[data-theme="laboratorium"] .nav-links a, :root[data-theme="laboratorium"] .footer-links a { font-family: var(--mono); text-transform: uppercase; letter-spacing: .1em; font-size: .74rem; } :root[data-theme="laboratorium"] .product-card, :root[data-theme="laboratorium"] .card { box-shadow: none; border: 1px solid var(--border); } :root[data-theme="laboratorium"] .product-card:hover { box-shadow: none; border-color: var(--accent); } :root[data-theme="laboratorium"] section { padding-block: clamp(3.5rem, 7vw, 6rem); } /* ── Lys tilstand ──────────────────────────────────────────────── */ :root[data-palette="skovgroen"] { --accent: var(--own-lys, #3a6b47); --accent-dark: var(--own-lys-dark, #2c5237); --accent-light: var(--own-lys-light, #e8f2ec); --accent-mid: var(--own-lys-mid, #d4e9db); --accent-ring: var(--own-lys-ring, rgba(58,107,71,.3)); --bg: #f9f7f4; --surface: #ffffff; --surface-2: #faf8f5; --border: #e4dfd8; --border-soft: #efece6; --text: #1a1714; --muted: #6e675e; --clay: #55725c; --clay-light: #e4ecdf; --clay-bg: #f0e0d5; --side-bg: #22261E; /* admins sidebjælke — palettens egen mørke tone */ } :root[data-palette="terrakotta"] { --accent: var(--own-lys, #9C4A22); --accent-dark: var(--own-lys-dark, #7A3818); --accent-light: var(--own-lys-light, #f3e9e4); --accent-mid: var(--own-lys-mid, #e9d7ce); --accent-ring: var(--own-lys-ring, rgba(156,74,34,.3)); --bg: #FAF5F0; --surface: #ffffff; --surface-2: #fcfaf7; --border: #e0dad6; --border-soft: #ede8e3; --text: #1F1815; --muted: #77675A; --clay: #87624f; --clay-light: #efe2dc; --clay-bg: #e7dfd8; --tag-tilbud: #A8253C; --side-bg: #29201B; /* admins sidebjælke — palettens egen mørke tone */ } :root[data-palette="midnat"] { --accent: var(--own-lys, #1E3A5F); --accent-dark: var(--own-lys-dark, #152A46); --accent-light: var(--own-lys-light, #e4e7ec); --accent-mid: var(--own-lys-mid, #ced4dc); --accent-ring: var(--own-lys-ring, rgba(30,58,95,.3)); --bg: #F5F7FA; --surface: #ffffff; --surface-2: #fafbfc; --border: #dadce0; --border-soft: #e7eaed; --text: #131A22; --muted: #616C7A; --clay: #536c8d; --clay-light: #dbdfe5; --clay-bg: #e2e0dd; --tag-tilbud: #c53030; --side-bg: #1D242E; /* admins sidebjælke — palettens egen mørke tone */ } :root[data-palette="messing"] { --accent: var(--own-lys, #7E5F2C); --accent-dark: var(--own-lys-dark, #5F4720); --accent-light: var(--own-lys-light, #f0ece6); --accent-mid: var(--own-lys-mid, #e3dcd1); --accent-ring: var(--own-lys-ring, rgba(126,95,44,.3)); --bg: #F7F5F0; --surface: #ffffff; --surface-2: #fbfaf7; --border: #dcdad6; --border-soft: #eae8e3; --text: #1A1815; --muted: #6F675A; --clay: #78664a; --clay-light: #eae5dd; --clay-bg: #e7e1d8; --tag-tilbud: #c53030; --side-bg: #25231C; /* admins sidebjælke — palettens egen mørke tone */ } :root[data-palette="blomme"] { --accent: var(--own-lys, #63304A); --accent-dark: var(--own-lys-dark, #4A2237); --accent-light: var(--own-lys-light, #ece6e9); --accent-mid: var(--own-lys-mid, #ddd1d7); --accent-ring: var(--own-lys-ring, rgba(99,48,74,.3)); --bg: #FAF6F7; --surface: #ffffff; --surface-2: #fcfafb; --border: #dfdbdc; --border-soft: #ede8ea; --text: #1D1418; --muted: #736069; --clay: #875f73; --clay-light: #e6dee2; --clay-bg: #e7dedb; --tag-tilbud: #B22B2B; --side-bg: #271E23; /* admins sidebjælke — palettens egen mørke tone */ } :root[data-palette="midcentury"] { --accent: var(--own-lys, #0A4544); --accent-dark: var(--own-lys-dark, #083635); --accent-light: var(--own-lys-light, #e6ecec); --accent-mid: var(--own-lys-mid, #cedada); --accent-ring: var(--own-lys-ring, rgba(10,69,68,.3)); --bg: #F8F3F2; --surface: #ffffff; --surface-2: #fbf8f8; --border: #dfd9d8; --border-soft: #ebe6e5; --text: #241B1D; --muted: #716c6c; --clay: #a25524; --clay-light: #f0e4dc; --clay-bg: #e7d3c6; --tag-tilbud: #B0303A; --side-bg: #1F2625; /* admins sidebjælke — palettens egen mørke tone */ } :root[data-palette="klassisk"] { --accent: var(--own-lys, #12401A); --accent-dark: var(--own-lys-dark, #0e3214); --accent-light: var(--own-lys-light, #e7ece8); --accent-mid: var(--own-lys-mid, #d0d9d1); --accent-ring: var(--own-lys-ring, rgba(18,64,26,.3)); --bg: #F5F5FA; --surface: #ffffff; --surface-2: #fafafc; --border: #dbdbe0; --border-soft: #e8e8ed; --text: #1D1D24; --muted: #6f6f74; --clay: #866e32; --clay-light: #f0ece0; --clay-bg: #e7e0cd; --tag-tilbud: #c53030; --side-bg: #212228; /* admins sidebjælke — palettens egen mørke tone */ } :root[data-palette="nude"] { --accent: var(--own-lys, #3A2D28); --accent-dark: var(--own-lys-dark, #2d231f); --accent-light: var(--own-lys-light, #ebeaea); --accent-mid: var(--own-lys-mid, #d8d5d4); --accent-ring: var(--own-lys-ring, rgba(58,45,40,.3)); --bg: #F1EDE6; --surface: #ffffff; --surface-2: #f7f5f1; --border: #d8d4cd; --border-soft: #e5e0da; --text: #241C17; --muted: #6e6a65; --clay: #80665a; --clay-light: #f0ebe9; --clay-bg: #e7dfdb; --tag-tilbud: #B0463A; --side-bg: #26221D; /* admins sidebjælke — palettens egen mørke tone */ } /* ── Mørk tilstand ─────────────────────────────────────────────── */ @media (prefers-color-scheme: dark) { :root[data-palette="skovgroen"] { --accent: var(--own-mrk, #8FC7A1); --accent-dark: var(--own-mrk-dark, #AEDCBD); --accent-light: var(--own-mrk-light, #1E2B22); --accent-mid: var(--own-mrk-mid, #2A3B2F); --accent-ring: var(--own-mrk-ring, rgba(143,199,161,.35)); --bg: #12150F; --surface: #1A1E17; --surface-2: #22261E; --border: #333829; --border-soft: #282D22; --text: #EDEEE6; --muted: #A2A597; --clay: #9DBBA6; --clay-light: #243027; --clay-bg: #2E2822; --on-fill: #0D1710; --invert-bg: #22261E; } :root[data-palette="terrakotta"] { --accent: var(--own-mrk, #E39468); --accent-dark: var(--own-mrk-dark, #EFAE89); --accent-light: var(--own-mrk-light, #2C1D15); --accent-mid: var(--own-mrk-mid, #3D2A1F); --accent-ring: var(--own-mrk-ring, rgba(227,148,104,.35)); --bg: #17110E; --surface: #201814; --surface-2: #29201B; --border: #3B2E27; --border-soft: #2F251F; --text: #F0E9E4; --muted: #AA9A90; --clay: #C79E89; --clay-light: #2E2119; --clay-bg: #31251E; --on-fill: #1A0E07; --invert-bg: #29201B; --tag-tilbud: #EE8496; } :root[data-palette="midnat"] { --accent: var(--own-mrk, #8FB4E0); --accent-dark: var(--own-mrk-dark, #ACC9EC); --accent-light: var(--own-mrk-light, #182430); --accent-mid: var(--own-mrk-mid, #22303F); --accent-ring: var(--own-mrk-ring, rgba(143,180,224,.35)); --bg: #0F1319; --surface: #161B23; --surface-2: #1D242E; --border: #2C3542; --border-soft: #232B36; --text: #E7EBF1; --muted: #98A2B2; --clay: #9FB2CA; --clay-light: #1D2732; --clay-bg: #26292E; --on-fill: #08111C; --invert-bg: #1D242E; --tag-tilbud: #F08C8C; } :root[data-palette="messing"] { --accent: var(--own-mrk, #D6B579); --accent-dark: var(--own-mrk-dark, #E5C994); --accent-light: var(--own-mrk-light, #2A2418); --accent-mid: var(--own-mrk-mid, #3A3223); --accent-ring: var(--own-mrk-ring, rgba(214,181,121,.35)); --bg: #15130F; --surface: #1D1B15; --surface-2: #25231C; --border: #37332A; --border-soft: #2B2822; --text: #EFEBE2; --muted: #A9A08D; --clay: #C0AE8C; --clay-light: #2B2619; --clay-bg: #2F2A20; --on-fill: #171204; --invert-bg: #25231C; --tag-tilbud: #F08C8C; } :root[data-palette="blomme"] { --accent: var(--own-mrk, #D69BB6); --accent-dark: var(--own-mrk-dark, #E5B4CA); --accent-light: var(--own-mrk-light, #2B1B23); --accent-mid: var(--own-mrk-mid, #3B2732); --accent-ring: var(--own-mrk-ring, rgba(214,155,182,.35)); --bg: #160F13; --surface: #1F171B; --surface-2: #271E23; --border: #392E34; --border-soft: #2D242A; --text: #F0E8EC; --muted: #AC98A2; --clay: #C3A3B2; --clay-light: #2C2027; --clay-bg: #2F2325; --on-fill: #1B0B13; --invert-bg: #271E23; --tag-tilbud: #F08C8C; } :root[data-palette="midcentury"] { --accent: var(--own-mrk, #7FC0BD); --accent-dark: var(--own-mrk-dark, #9CD3D0); --accent-light: var(--own-mrk-light, #182524); --accent-mid: var(--own-mrk-mid, #213231); --accent-ring: var(--own-mrk-ring, rgba(127,192,189,.35)); --bg: #101514; --surface: #171D1C; --surface-2: #1F2625; --border: #2F3736; --border-soft: #252C2B; --text: #EBEDEC; --muted: #9BA3A2; --clay: #DB9B6E; --clay-light: #2A2019; --clay-bg: #302520; --on-fill: #041615; --invert-bg: #1F2625; --tag-tilbud: #F08C93; } :root[data-palette="klassisk"] { --accent: var(--own-mrk, #8CC49A); --accent-dark: var(--own-mrk-dark, #A9D6B4); --accent-light: var(--own-mrk-light, #1B241D); --accent-mid: var(--own-mrk-mid, #26332A); --accent-ring: var(--own-mrk-ring, rgba(140,196,154,.35)); --bg: #111214; --surface: #191A1E; --surface-2: #212228; --border: #313340; --border-soft: #272932; --text: #EAEAF0; --muted: #9C9CA6; --clay: #D2BC7C; --clay-light: #282419; --clay-bg: #2D2A21; --on-fill: #0B1610; --invert-bg: #212228; --tag-tilbud: #F08C8C; } :root[data-palette="nude"] { --accent: var(--own-mrk, #D3B7A6); --accent-dark: var(--own-mrk-dark, #E3CBBD); --accent-light: var(--own-mrk-light, #2A211B); --accent-mid: var(--own-mrk-mid, #392E26); --accent-ring: var(--own-mrk-ring, rgba(211,183,166,.35)); --bg: #16120F; --surface: #1E1A16; --surface-2: #26221D; --border: #37312A; --border-soft: #2B2721; --text: #F0EAE3; --muted: #A99E93; --clay: #C0A493; --clay-light: #2B231D; --clay-bg: #2F2721; --on-fill: #190F08; --invert-bg: #26221D; --tag-tilbud: #EE9184; } }