/* ============================================================ HASAKI — DESIGN TOKENS (single source of truth) Japonské nože · damašková ocel · příslušenství Styl: DARK PREMIUM (hluboká uhlová čerň + ocelová šeď) + jeden ušlechtilý akcent: japonská CINOBROVÁ ČERVENÁ (朱). Struktura inspirovaná dellinger.cz, skin vlastní. NAČÍTAT JAKO PRVNÍ v — před všemi ostatními custom CSS (hasaki-theme.css, hasaki-category.css, hasaki-product.css …). Homepage (hasaki-home.css) je samostatná a tokeny nepotřebuje. ============================================================ */ /* ---- FONTY (display=swap) ---- Cormorant Garamond = editorial serif pro nadpisy (luxus, řez, preciznost) Inter = čisté UI / běžný text / ceny Barlow Condensed = technické "eyebrow" popisky (verzálky, prostrkané) */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@400;500;600;700&family=Barlow+Condensed:wght@400;500;600&display=swap'); :root { /* ================= BARVY: tmavá základna ================= */ --hk-bg: #0B0A09; /* stránka — teplá uhlová čerň */ --hk-bg-2: #110E0C; /* sekce o stupeň světlejší */ --hk-surface: #16120F; /* karty */ --hk-surface-2: #1E1813; /* zvednutý povrch / hover */ --hk-surface-3: #271F18; /* vstupy, jemné panely */ --hk-line: #2A231D; /* běžné linky */ --hk-line-strong: #3A302A; /* výraznější linky / okraje */ /* ================= BARVY: text ================= */ --hk-ink: #F4F0EA; /* primární text na tmavém */ --hk-ink-2: #B6ADA2; /* sekundární */ --hk-ink-3: #847A6F; /* terciární / popisky */ --hk-ink-on-red: #FFFFFF; /* text na červené ploše */ /* ================= AKCENT: japonská červená (朱) ================= */ --hk-red: #D8453B; /* cinobrová — hlavní akcent */ --hk-red-bright: #EA5A4E; /* zjasnější (hover/zář) */ --hk-red-press: #B5362A; /* stisk / tmavší */ --hk-red-soft: rgba(216,69,59,.14); /* jemné pozadí */ --hk-red-line: rgba(216,69,59,.35); /* jemná červená linka */ --hk-red-glow: rgba(216,69,59,.40); /* záře pod tlačítky */ /* ================= NEUTRÁLNÍ AKCENT: ocel (damašek) ================= */ --hk-steel: #9AA7B0; /* studená ocel — velmi střídmě */ --hk-steel-soft: rgba(154,167,176,.12); /* ================= SÉMANTICKÉ ================= */ --hk-success: #4FB286; /* skladem */ --hk-success-soft: rgba(79,178,134,.14); --hk-sale: var(--hk-red); --hk-sale-soft: var(--hk-red-soft); --hk-warn: #D9A441; /* poslední kusy / pozor */ /* ================= TYPOGRAFIE ================= */ --hk-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif; --hk-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --hk-cond: "Barlow Condensed", "Inter", sans-serif; --hk-fs-h1: clamp(2.6rem, 5vw, 4.4rem); --hk-fs-h2: clamp(2rem, 3.4vw, 3rem); --hk-fs-h3: 1.5rem; --hk-fs-lg: 1.25rem; --hk-fs-body: 1rem; --hk-fs-sm: 0.8125rem; --hk-fs-xs: 0.6875rem; --hk-lh-tight: 1.05; --hk-lh-snug: 1.2; --hk-lh-base: 1.65; --hk-eyebrow-ls: 0.28em; /* prostrkání verzálkových popisků */ /* ================= SPACING (8px grid) ================= */ --hk-s1:.25rem; --hk-s2:.5rem; --hk-s3:.75rem; --hk-s4:1rem; --hk-s6:1.5rem; --hk-s8:2rem; --hk-s12:3rem; --hk-s16:4rem; --hk-s24:6rem; /* ================= RADIUS ================= */ --hk-r-sm:6px; --hk-r-md:12px; --hk-r-lg:20px; --hk-r-pill:999px; /* ================= STÍNY / ZÁŘE ================= */ --hk-shadow-sm:0 2px 10px rgba(0,0,0,.35); --hk-shadow-md:0 14px 40px rgba(0,0,0,.45); --hk-shadow-lg:0 30px 70px rgba(0,0,0,.55); --hk-shadow-red:0 10px 30px -8px var(--hk-red-glow); /* ================= LAYOUT / MOTION ================= */ --hk-container:1320px; --hk-gutter:24px; --hk-header-h:120px; --hk-ease:cubic-bezier(.2,.7,.3,1); --hk-ease-lux:cubic-bezier(.22,1,.36,1); --hk-dur-fast:140ms; --hk-dur:260ms; --hk-dur-slow:520ms; /* ============================================================ MOST do adaptované Artnest vrstvy (hasaki-theme/category/product přebírají --color-* jména). Přemapujeme POUZE AKCENTY (bezpečné) — povrchy/ink řeší jednotlivé page CSS explicitně, protože světlé téma nelze invertovat pouhou záměnou --color-ink (slouží i jako pozadí). ============================================================ */ --color-coral: var(--hk-red); --color-coral-press: var(--hk-red-press); --color-coral-soft: var(--hk-red-soft); --color-sale: var(--hk-red); --color-sale-soft: var(--hk-red-soft); --color-amber: var(--hk-warn); --color-amber-soft: rgba(217,164,65,.14); --color-cobalt: var(--hk-steel); --color-cobalt-soft: var(--hk-steel-soft); --color-success: var(--hk-success); --color-success-soft: var(--hk-success-soft); --font-display: var(--hk-serif); --font-body: var(--hk-sans); --font-mono: "JetBrains Mono", ui-monospace, monospace; /* Base povrchy/text v DARK hodnotách (drop-in za Artnest tokens.css). Bezpečné: ve výsledných page CSS jsou pozadí řešena explicitně, takže --color-ink slouží už jen jako SVĚTLÝ text na tmavém. */ --color-bg: #0B0A09; --color-surface: #16120F; --color-surface-2: #1E1813; --color-ink: #F4F0EA; --color-ink-2: #B6ADA2; --color-ink-3: #847A6F; --color-line: #2A231D; --color-line-strong: #3A302A; /* Type scale */ --fs-h1:3.5rem; --fs-h2:2.25rem; --fs-h3:1.5rem; --fs-lg:1.25rem; --fs-body:1rem; --fs-sm:.8125rem; --fs-xs:.6875rem; --lh-tight:1.04; --lh-snug:1.18; --lh-base:1.6; --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; /* Spacing (8px grid) */ --space-1:.25rem; --space-2:.5rem; --space-3:.75rem; --space-4:1rem; --space-6:1.5rem; --space-8:2rem; --space-12:3rem; --space-16:4rem; --space-24:6rem; /* Radius */ --radius-sm:6px; --radius-md:12px; --radius-lg:20px; --radius-pill:999px; /* Stíny — laděné pro tmavé téma */ --shadow-xs:0 1px 2px rgba(0,0,0,.4); --shadow-sm:0 2px 10px rgba(0,0,0,.4); --shadow-md:0 14px 40px rgba(0,0,0,.5); --shadow-lg:0 30px 70px rgba(0,0,0,.6); /* Layout / motion */ --container:1320px; --header-h:120px; --ease:cubic-bezier(.2,.7,.3,1); --dur-fast:140ms; --dur:260ms; --dur-slow:520ms; } @media (max-width:720px){ :root{ --hk-gutter:16px; } } /* ---- Globální drobnosti (bezpečné, neovlivní layout Shoptetu) ---- */ ::selection{ background:var(--hk-red); color:#fff; } /* Jemný damašský "noise" lze přidat per-page; tady jen proměnná. */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important; } }