/* GENERATED from design/colors_and_type.css — не редактировать руками. Обновление: scripts/build-tokens.sh */ /* ===================================================================== KOCEROVA fine arts Design System · Foundations: Color + Typography --------------------------------------------------------------------- Aesthetic: classical Old Masters gallery rendered in a clean, modern black-and-white system with Light / Dark themes. The brand voice is the bold sans of the “KOCEROVA” logo — Lato. English-language. Fonts: · Lato — the single brand typeface (self-hosted). Display uses Black/Bold (echoing the logo); UI/body uses Regular–SemiBold; italics for tombstone-style captions. ===================================================================== */ /* ---- Lato (brand typeface, self-hosted) ---- */ @font-face{font-family:'Lato';src:url('../assets/fonts/Lato-Light.ttf') format('truetype');font-weight:300;font-style:normal;font-display:swap;} @font-face{font-family:'Lato';src:url('../assets/fonts/Lato-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap;} @font-face{font-family:'Lato';src:url('../assets/fonts/Lato-Italic.ttf') format('truetype');font-weight:400;font-style:italic;font-display:swap;} @font-face{font-family:'Lato';src:url('../assets/fonts/Lato-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap;} @font-face{font-family:'Lato';src:url('../assets/fonts/Lato-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap;} @font-face{font-family:'Lato';src:url('../assets/fonts/Lato-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap;} @font-face{font-family:'Lato';src:url('../assets/fonts/Lato-Black.ttf') format('truetype');font-weight:900;font-style:normal;font-display:swap;} :root { /* --------------------------------------------------------------- COLOR — monochrome, LIGHT theme (default). Black & white gallery: pure paper, ink type, grayscale accent. Dark theme overrides live in html[data-theme="dark"] below. --------------------------------------------------------------- */ --paper: #FFFFFF; /* page background — white */ --paper-2: #F4F4F4; /* raised sections, alt rows */ --paper-3: #EAEAEA; /* cards on paper, inset wells */ --canvas: #FFFFFF; /* brightest surface — image mats, modals */ /* INK — neutral darks (text + dark surfaces) */ --ink: #0A0A0A; /* primary text — near-black */ --ink-2: #333333; /* secondary text */ --ink-3: #6E6E6E; /* tertiary text, captions, meta */ --ink-4: #A6A6A6; /* disabled, faint labels */ /* LINES — hairline rules & borders */ --line: #E2E2E2; /* default divider */ --line-strong: #C9C9C9; /* emphasized border, input outline */ --line-faint: #EFEFEF; /* whisper-thin separators */ /* ACCENT — monochrome. The accent is simply maximum contrast ink, expressed through underlines, fine rules and marks (no hue). */ --brass: #0A0A0A; /* links, marks, fine rules */ --brass-deep: #000000; /* hover / pressed */ --brass-soft: #BDBDBD; /* light accent on dark surfaces */ --brass-wash: #F0F0F0; /* faint tint background */ /* EMPHASIS — solid black chip (was claret) */ --claret: #0A0A0A; --claret-deep: #000000; /* DARK SURFACE — footer / immersive sections (always dark) */ --ink-surface: #0A0A0A; /* charcoal/black panel */ --ink-surface-2:#161616; /* raised on dark */ --on-dark: #F5F5F5; /* text on dark surface */ --on-dark-2: #ADADAD; /* secondary text on dark */ --on-dark-line: #2A2A2A; /* hairline on dark */ /* FORM SEMANTICS — quiet, near-monochrome */ --ok: #2E2E2E; --ok-bg: #EFEFEF; --warn: #2E2E2E; --error: #000000; --error-bg: #ECECEC; --focus-ring: rgba(10,10,10,0.32); /* --------------------------------------------------------------- TYPE — families. Lato is the sole brand typeface. --------------------------------------------------------------- */ --font-display: 'Lato', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; --font-serif: 'Lato', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; --font-sans: 'Lato', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif; /* TYPE — scale (desktop ~1440). Use clamp() in layouts for fluidity. */ --t-display: 72px; /* hero — Lato Black */ --t-h1: 50px; --t-h2: 34px; --t-h3: 24px; --t-h4: 20px; --t-body-lg: 19px; --t-body: 17px; --t-small: 15px; --t-caption: 13px; --t-eyebrow: 12px; /* uppercase, tracked */ /* line-heights */ --lh-tight: 1.02; /* @kind other */ --lh-snug: 1.12; /* @kind other */ --lh-body: 1.62; /* @kind other */ --lh-relaxed: 1.75; /* @kind other */ /* tracking */ --tr-eyebrow: 0.22em; /* nav labels, eyebrows — wide gallery tracking */ --tr-caps: 0.14em; --tr-tight: -0.02em; /* tight, like the logo lockup */ /* --------------------------------------------------------------- SPACING — 4px base --------------------------------------------------------------- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px; --sp-11: 160px; /* layout */ --measure: 66ch; /* ideal reading width */ --maxw: 1320px; /* content container */ --maxw-narrow: 860px; /* article / form column */ --gutter: clamp(20px, 5vw, 72px); /* @kind spacing */ /* --------------------------------------------------------------- RADII — crisp; galleries avoid soft bubbles --------------------------------------------------------------- */ --r-xs: 1px; --r-sm: 2px; --r-md: 4px; --r-pill: 999px; /* --------------------------------------------------------------- ELEVATION — restrained. Prefer hairlines; shadow only when floating. --------------------------------------------------------------- */ --sh-hair: 0 0 0 1px var(--line); --sh-1: 0 1px 2px rgba(33,28,24,0.05), 0 1px 1px rgba(33,28,24,0.04); --sh-2: 0 8px 24px -12px rgba(33,28,24,0.18); --sh-float: 0 24px 60px -24px rgba(33,28,24,0.30); /* motion */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* @kind other */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */ --dur-fast: 140ms; /* @kind other */ --dur: 260ms; /* @kind other */ --dur-slow: 520ms; /* @kind other */ } /* ===================================================================== DARK THEME — black background, white type. Set via document.documentElement[data-theme="dark"]. Token names are unchanged so every component flips automatically. ===================================================================== */ html[data-theme="dark"] { color-scheme: dark; --paper: #0A0A0A; --paper-2: #161616; --paper-3: #202020; --canvas: #121212; --ink: #F5F5F5; --ink-2: #CFCFCF; --ink-3: #9A9A9A; --ink-4: #6E6E6E; --line: #2A2A2A; --line-strong: #3C3C3C; --line-faint: #1C1C1C; --brass: #FFFFFF; --brass-deep: #FFFFFF; --brass-soft: #7A7A7A; --brass-wash: #1C1C1C; --claret: #F5F5F5; --claret-deep: #FFFFFF; --ink-surface: #000000; --ink-surface-2:#141414; --on-dark: #F5F5F5; --on-dark-2: #9A9A9A; --on-dark-line: #262626; --ok: #E2E2E2; --ok-bg: #1C1C1C; --warn: #E2E2E2; --error: #FFFFFF; --error-bg: #1C1C1C; --focus-ring: rgba(245,245,245,0.40); } /* ===================================================================== SEMANTIC TYPE CLASSES ===================================================================== */ .ds-eyebrow { font-family: var(--font-sans); font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--ink-3); } .ds-display { font-family: var(--font-display); font-weight: 900; font-size: var(--t-display); line-height: var(--lh-tight); letter-spacing: var(--tr-tight); color: var(--ink); } .ds-h1 { font-family: var(--font-display); font-weight: 800; font-size: var(--t-h1); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); color: var(--ink); } .ds-h2 { font-family: var(--font-display); font-weight: 800; font-size: var(--t-h2); line-height: var(--lh-snug); letter-spacing: var(--tr-tight); color: var(--ink); } .ds-h3 { font-family: var(--font-display); font-weight: 700; font-size: var(--t-h3); line-height: 1.2; color: var(--ink); } .ds-h4 { font-family: var(--font-sans); font-weight: 600; font-size: var(--t-h4); line-height: 1.35; letter-spacing: 0; color: var(--ink); } .ds-lead { font-family: var(--font-serif); font-weight: 400; font-size: var(--t-body-lg); line-height: var(--lh-relaxed); color: var(--ink-2); } .ds-body { font-family: var(--font-sans); font-weight: 400; font-size: var(--t-body); line-height: var(--lh-body); color: var(--ink-2); } .ds-serif-body { font-family: var(--font-serif); font-weight: 400; font-size: var(--t-body); line-height: var(--lh-relaxed); color: var(--ink-2); } .ds-small { font-family: var(--font-sans); font-size: var(--t-small); line-height: 1.5; color: var(--ink-3); } .ds-caption { font-family: var(--font-sans); font-size: var(--t-caption); line-height: 1.45; color: var(--ink-3); } /* Gallery "tombstone" label — for artwork captions */ .ds-tombstone { font-family: var(--font-serif); font-style: italic; font-size: var(--t-small); line-height: 1.5; color: var(--ink-2); } /* Brass link treatment */ .ds-link { color: var(--brass); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--brass) 35%, transparent); transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); } .ds-link:hover { color: var(--brass-deep); border-bottom-color: var(--brass-deep); }