/* ========================================================================= FITRADE — 01 · DESIGN TOKENEK Forrás: fitrade-tokens.css (a projekt egyetlen token-forrása) Ez a fájl CSAK custom property-ket deklarál. Önmagában SEMMIT nem stílusoz — a téma aktiválásától nem változik az oldal kinézete. ⚠️ KÉT DOLOG SZÁNDÉKOSAN HIÁNYZIK a prototípus-változathoz képest: 1. `html { font-size: 10px }` — a prototípusban 1rem = 10px. WordPressben ez katasztrófa lenne: a Kadence és a WooCommerce minden rem-értéke 16px-es gyökeret feltételez, tehát az egész oldal 62,5%-ra zsugorodna. → A gyökérméret marad böngésző-alapértelmezett; a komponens-réteg (08 · 4.1 lépés) rem helyett px-ben érkezik, 1rem = 10px átváltással. 2. A `body` szín/háttér szabálya — az a 02-base.css-ben van, `.ftr` konténerre szűkítve, hogy a meglévő oldalakat ne írja át. ========================================================================= */ :root { /* --------------------------------------------------------------------- TIPOGRÁFIA A Kadence már tölti a `geom-graphic` családot (címsor + menü fontként be van állítva), tehát a webfont adott — nem kell új licenc. --------------------------------------------------------------------- */ /* CÍMSOROK — Geom Graphic Bold, nagybetűs */ --font-heading-family: "geom-graphic", sans-serif; --font-heading-style: normal; --font-heading-weight: 700; /* BOLD */ --font-heading-letter-spacing: -0.02em; /* a Zap negatív trackingje */ --font-heading-line-height: 1; --font-heading-text-transform: uppercase; /* VÉGIG NAGYBETŰ */ /* TÖRZSSZÖVEG — Geom Graphic Regular (400) Mérés alapján (lásd 07-torzsszoveg-font-meres.md): a Light (300) 1× kijelzőn feketén a szárak 70-80%-át félárnyékban hagyja, szára 1,33 px — törékeny. A Regular mindenhol ≥1,67 px. */ --font-body-family: "geom-graphic", sans-serif; --font-body-style: normal; --font-body-weight: 400; /* Light csak NAGY szövegre: ≥20px világos, ≥24px sötét háttéren. ⚠️ A Light jelenleg NINCS a Typekit kitben — be kell válogatni. */ --font-body-light-weight: 300; --font-body-scale: 1.28; --font-body-line-height: 1.5; --font-body-letter-spacing: 0.0em; /* Cím-szorzók — a Zap arányai (h1 @1360px = 129,6px) */ --font-heading-h0-scale: 1.2; --font-heading-h1-scale: 1.62; --font-heading-h2-scale: 1.4; --font-heading-h3-scale: 1.11; --font-heading-h4-scale: 1.0; --font-heading-h5-scale: 1.0; --font-subtitle-family: "geom-graphic", sans-serif; --font-subtitle-weight: 400; --font-subtitle-text-transform: none; --font-subtitle-scale: 1.5; --font-subtitle-letter-spacing: 0.02em; /* Termékkártya */ --font-heading-card-family: "geom-graphic", sans-serif; --font-heading-card-weight: 700; --font-heading-card-text-transform: uppercase; --font-heading-card-scale: 1.14; --font-text-card-family: "geom-graphic", sans-serif; --font-text-card-weight: 400; --font-text-card-scale: 1.4; --font-price-card-family: "geom-graphic", sans-serif; --font-price-card-weight: 700; --font-price-card-scale: 1.14; /* Badge-ek — a kiajánló pill-jei (MARHA FEHÉRJE IZOLÁTUM, KÁLIUM, …) */ --font-badge-card-family: "geom-graphic", sans-serif; --font-badge-card-weight: 700; --font-badge-text-transform: uppercase; /* a kiajánlóban is nagybetűs */ --font-badge-scale: 1.4; --font-sale-badge-card-family: "geom-graphic", sans-serif; --font-sale-badge-card-weight: 700; --font-sale-badge-text-transform: uppercase; --font-sale-badge-scale: 1.6; /* Gomb — NEM nagybetűs (szándékos kontraszt a kiabáló címekkel) */ --font-button-family: "geom-graphic", sans-serif; --font-button-weight: 700; --font-button-text-transform: none; --font-button-letter-spacing: 0.0em; --font-button-scale: 1.8; /* 18px */ --font-input-family: "geom-graphic", sans-serif; --font-input-weight: 700; --font-input-text-transform: none; --font-input-scale: 1.8; --font-header-menu-family: "geom-graphic", sans-serif; --font-header-menu-weight: 700; --font-header-menu-text-scale: 1.6; --font-header-menu-text-transform: uppercase; --font-announcement-family: "geom-graphic", sans-serif; --font-announcement-weight: 400; --font-announcement-scale: 1.4; --font-announcement-text-transform: none; /* --------------------------------------------------------------------- LAYOUT — változatlan a Zapból --------------------------------------------------------------------- */ --announcement-height: 38px; --header-height: 86px; --spaced-section: 50px; /* LEKEREKÍTÉS — interaktív = pill, tartalmi = lágy */ --border-radius-button: 60px; --border-radius-input: 60px; --border-radius-badge: 100px; --border-radius-sale-badge: 80px; --border-radius-block: 24px; --border-radius-product: 16px; --border-radius-block-small: 16px; /* MOZGÁS */ --duration-short: 100ms; --duration-default: 300ms; --duration-long: 500ms; --hover-opacity: 0.7; --color-shadow: var(--color-foreground); --color-modal-overlay: 0, 0, 0; } @media screen and (min-width: 990px) { :root { --spaced-section: 160px; } } /* ========================================================================= SZÍNSÉMÁK ⚠️ KONTRASZT-SZABÁLY az akcentusra (#E49A00, mért értékek): fekete szöveg narancson ...... 8,92:1 ✓ AAA fehér szöveg narancson ...... 2,35:1 ✗ MEGBUKIK narancs szöveg fehéren ....... 2,35:1 ✗ csak nagy/bold díszszövegre narancs szöveg feketén ....... 8,92:1 ✓ → Narancs felületen MINDIG fekete a szöveg. Fehér soha. → A narancs önmagában nem szövegszín világos háttéren. ========================================================================= */ /* --- 1. séma: FEHÉR — alapértelmezett, ORIGIN LINE és shop ---------------- */ :root, .color-background-1 { --color-background: 255, 255, 255; --color-background-secondary: 244, 244, 244; --color-foreground: 0, 0, 0; --color-foreground-secondary: 19, 17, 13; --overwrite-background: #ffffff; --color-overlay: 0, 0, 0; --color-button: 0, 0, 0; --color-button-text: 255, 255, 255; --color-button-hover: 255, 255, 255; --color-button-text-hover: 0, 0, 0; --color-button-secondary: 228, 154, 0; /* #E49A00 */ --color-button-secondary-text: 0, 0, 0; /* feketével olvasható */ --color-button-secondary-hover: 0, 0, 0; --color-button-secondary-text-hover: 228, 154, 0; --color-button-tertiary-text: 0, 0, 0; --color-background-input: 255, 255, 255; --color-foreground-input: 0, 0, 0; --color-border-input: 0, 0, 0; --color-border-input-focus: 0, 0, 0; --color-border: 0, 0, 0; --color-background-card-small: 255, 255, 255; --color-background-card-small-hover: 243, 243, 243; --sold-out-badge-bg: 210, 209, 205; --sold-out-badge-color: 255, 255, 255; --sale-badge-bg: 228, 154, 0; --sale-badge-color: 0, 0, 0; --custom-badge-bg: 255, 255, 255; --custom-badge-color: 38, 45, 51; --new-badge-bg: 43, 146, 69; --new-badge-color: 255, 255, 255; --color-card-price-regular: 0, 0, 0; --color-card-price-sale: 221, 57, 3; --color-success: 46, 135, 13; --color-error: 235, 0, 0; } /* --- 2. séma: VILÁGOSSZÜRKE — váltakozó szekciók ------------------------- */ .color-background-2 { --color-background: 243, 243, 243; --color-background-secondary: 255, 255, 255; --color-foreground: 0, 0, 0; --color-foreground-secondary: 19, 17, 13; --overwrite-background: #f3f3f3; --color-overlay: 0, 0, 0; --color-button: 0, 0, 0; --color-button-text: 255, 255, 255; --color-button-hover: 255, 255, 255; --color-button-text-hover: 0, 0, 0; --color-button-secondary: 228, 154, 0; --color-button-secondary-text: 0, 0, 0; --color-button-secondary-hover: 0, 0, 0; --color-button-secondary-text-hover: 228, 154, 0; --color-button-tertiary-text: 0, 0, 0; --color-background-input: 255, 255, 255; --color-foreground-input: 0, 0, 0; --color-border-input: 0, 0, 0; --color-border-input-focus: 0, 0, 0; --color-border: 0, 0, 0; --color-background-card-small: 244, 244, 244; --color-background-card-small-hover: 232, 232, 232; --sold-out-badge-bg: 210, 209, 205; --sold-out-badge-color: 255, 255, 255; --sale-badge-bg: 228, 154, 0; --sale-badge-color: 0, 0, 0; --custom-badge-bg: 255, 255, 255; --custom-badge-color: 38, 45, 51; --new-badge-bg: 43, 146, 69; --new-badge-color: 255, 255, 255; --color-card-price-regular: 0, 0, 0; --color-card-price-sale: 221, 57, 3; --color-success: 46, 135, 13; --color-error: 235, 0, 0; } /* --- 3. séma: FITRADE NARANCS — CTA-k, kiemelt szekciók, footer ---------- */ .color-background-3 { --color-background: 228, 154, 0; /* #E49A00 */ --color-background-secondary: 255, 255, 255; --color-foreground: 0, 0, 0; /* KÖTELEZŐEN fekete */ --color-foreground-secondary: 19, 17, 13; --overwrite-background: #e49a00; --color-overlay: 0, 0, 0; --color-button: 0, 0, 0; --color-button-text: 255, 255, 255; --color-button-hover: 255, 255, 255; --color-button-text-hover: 0, 0, 0; /* narancs háttéren a másodlagos gomb FEHÉR — narancs narancson láthatatlan */ --color-button-secondary: 255, 255, 255; --color-button-secondary-text: 0, 0, 0; --color-button-secondary-hover: 0, 0, 0; --color-button-secondary-text-hover: 255, 255, 255; --color-button-tertiary-text: 0, 0, 0; --color-background-input: 255, 255, 255; --color-foreground-input: 0, 0, 0; --color-border-input: 255, 255, 255; --color-border-input-focus: 0, 0, 0; --color-border: 0, 0, 0; --color-background-card-small: 255, 255, 255; --color-background-card-small-hover: 243, 243, 243; --sold-out-badge-bg: 210, 209, 205; --sold-out-badge-color: 255, 255, 255; --sale-badge-bg: 255, 255, 255; /* narancson a narancs badge nem látszik */ --sale-badge-color: 0, 0, 0; --custom-badge-bg: 82, 89, 97; --custom-badge-color: 255, 255, 255; --new-badge-bg: 43, 146, 69; --new-badge-color: 255, 255, 255; --color-card-price-regular: 0, 0, 0; --color-card-price-sale: 0, 0, 0; /* a piros narancson olvashatatlan */ --color-success: 46, 135, 13; --color-error: 235, 0, 0; } /* --- 4. séma: FEKETE — NEW ERA alapértelmezett, header pill, announcement -- */ .color-background-4 { --color-background: 0, 0, 0; --color-background-secondary: 55, 55, 55; --color-foreground: 255, 255, 255; --color-foreground-secondary: 255, 255, 255; --overwrite-background: #000000; --color-overlay: 0, 0, 0; --color-button: 255, 255, 255; --color-button-text: 0, 0, 0; --color-button-hover: 0, 0, 0; --color-button-text-hover: 255, 255, 255; /* feketén a narancs másodlagos gomb 8,92:1 — jól működik */ --color-button-secondary: 228, 154, 0; --color-button-secondary-text: 0, 0, 0; --color-button-secondary-hover: 255, 255, 255; --color-button-secondary-text-hover: 0, 0, 0; --color-button-tertiary-text: 255, 255, 255; --color-background-input: 255, 255, 255; --color-foreground-input: 0, 0, 0; --color-border-input: 255, 255, 255; --color-border-input-focus: 255, 255, 255; --color-border: 255, 255, 255; --color-background-card-small: 60, 60, 60; --color-background-card-small-hover: 44, 44, 44; --sold-out-badge-bg: 82, 89, 97; --sold-out-badge-color: 168, 171, 173; --sale-badge-bg: 228, 154, 0; --sale-badge-color: 0, 0, 0; --custom-badge-bg: 82, 89, 97; --custom-badge-color: 255, 255, 255; --new-badge-bg: 43, 146, 69; --new-badge-color: 255, 255, 255; --color-card-price-regular: 255, 255, 255; --color-card-price-sale: 255, 255, 255; --color-success: 46, 135, 13; --color-error: 235, 0, 0; }