/* Дизайн-система для сайта-резюме · палитры 2026 9 вариантов: 1a–1c (базовые), 2a–2c (тёплые), 3a–3c (синие). Применение: и . Источники цветовых направлений: Pantone Cloud Dancer 11-4201 (COTY 2026), WGSN × Coloro Key Colours S/S 26 — Transformative Teal, Amber Haze, Electric Fuchsia, Blue Aura, Jelly Mint. */ /* --- Общее для всех вариантов: шкала отступов, типографика, брейкпоинты --- */ :root { --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px; --space-24: 96px; --text-display: 60px; --leading-display: 1.05; --tracking-display: -0.03em; --text-h1: 44px; --leading-h1: 1.08; --tracking-h1: -0.03em; --text-h2: 32px; --leading-h2: 1.15; --tracking-h2: -0.02em; --text-h3: 22px; --leading-h3: 1.25; --tracking-h3: -0.01em; --text-body-lg: 18px; --leading-body-lg: 1.6; --text-body: 17px; --leading-body: 1.6; --text-small: 14px; --leading-small: 1.5; --text-label: 12px; --leading-label: 1; --tracking-label: 0.16em; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; /* мобильный веб: display/h1 уменьшаются, остальное сохраняется */ --hit-target: 44px; --page-max: 1180px; --page-pad: 32px; --page-pad-mobile: 20px; } @media (max-width: 640px) { :root { --text-display: 36px; --text-h1: 30px; --text-h2: 24px; --text-h3: 19px; --text-body: 16px; } } /* ===== 1a · Cloud Dancer × Transformative Teal ===== */ [data-palette="1a"] { --font-sans: 'Geist', system-ui, sans-serif; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 18px; --radius-pill: 999px; --elevation-1: 0 1px 2px rgba(20,32,31,.06); --elevation-2: 0 8px 24px -8px rgba(20,32,31,.16); --neutral-00: #FFFFFF; --neutral-05: #F3F2EE; --neutral-10: #E2E0D9; --neutral-20: #C9CCC7; --neutral-40: #9BA5A2; --neutral-60: #5F6B69; --neutral-80: #2C3A38; --neutral-95: #14201F; --color-accent: #0E6E6B; --color-accent-press: #0A5754; --color-accent-tint: #D9E9E7; --color-mint: #A8DBC5; --color-warning: #B8622F; --color-danger: #9B2C2C; --color-bg: #F3F2EE; --color-surface: #FFFFFF; --color-border: #E2E0D9; --color-ink: #14201F; --color-muted: #5F6B69; --color-subtle: #9BA5A2; --color-on-accent: #FFFFFF; } [data-palette="1a"][data-theme="dark"] { --color-bg: #0B1413; --color-surface: #12201F; --color-border: #1F2E2C; --color-ink: #E8EDEB; --color-muted: #94A3A0; --color-subtle: #6B7B78; --color-accent: #4FB3AC; --color-on-accent: #04211F; } /* ===== 1b · Grounded Warmth — walnut & ivory ===== */ [data-palette="1b"] { --font-sans: 'Instrument Sans', system-ui, sans-serif; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-pill: 999px; --elevation-1: 0 1px 2px rgba(36,26,20,.07); --elevation-2: 0 10px 28px -10px rgba(36,26,20,.22); --neutral-00: #FFFDF9; --neutral-05: #F6F1E9; --neutral-10: #E6DCCC; --neutral-20: #D3C5B2; --neutral-40: #A89583; --neutral-60: #6B584C; --neutral-80: #3E2E24; --neutral-95: #241A14; --color-accent: #7A4A2E; --color-accent-press: #5E3721; --color-accent-tint: #EFE0D3; --color-forest: #2C4A3B; --color-amber: #DDA15E; --color-danger: #8E2B20; --color-bg: #F6F1E9; --color-surface: #FFFDF9; --color-border: #E6DCCC; --color-ink: #241A14; --color-muted: #6B584C; --color-subtle: #A89583; --color-on-accent: #FFFDF9; } [data-palette="1b"][data-theme="dark"] { --color-bg: #17110D; --color-surface: #211812; --color-border: #33251C; --color-ink: #F1E7DC; --color-muted: #B3A091; --color-subtle: #8A7767; --color-accent: #C98A5F; --color-on-accent: #231409; } /* ===== 1c · Polarised Signal — deep green & fuchsia ===== */ [data-palette="1c"] { --font-sans: 'Space Grotesk', system-ui, sans-serif; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-pill: 999px; --elevation-1: 0 1px 2px rgba(16,35,28,.06); --elevation-2: 0 12px 32px -12px rgba(16,35,28,.28); --neutral-00: #FFFFFF; --neutral-05: #EDF1EC; --neutral-10: #DCE3DA; --neutral-20: #C1CDC3; --neutral-40: #8CA096; --neutral-60: #4E6259; --neutral-80: #22392F; --neutral-95: #10231C; --color-primary: #14453A; --color-signal: #D6006E; --color-amber: #E8A33D; --color-blue-aura: #7C9BD1; --color-primary-tint: #DFF1E4; --color-danger: #B02020; --color-bg: #EDF1EC; --color-surface: #FFFFFF; --color-border: #DCE3DA; --color-ink: #10231C; --color-muted: #4E6259; --color-subtle: #8CA096; --color-on-accent: #FFFFFF; } [data-palette="1c"][data-theme="dark"] { --color-bg: #08120E; --color-surface: #0F1D17; --color-border: #1C2E26; --color-ink: #E9F1EC; --color-muted: #8CA096; --color-subtle: #6F8279; --color-accent: #6FD3AE; --color-signal: #FF3D93; --color-on-accent: #062018; } /* ===== 2a · Terracotta Clay — глина и крем ===== */ [data-palette="2a"] { --font-sans: 'Geist', system-ui, sans-serif; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 16px; --radius-pill: 999px; --elevation-1: 0 1px 2px rgba(42,31,26,.12); --elevation-2: 0 10px 28px -10px rgba(42,31,26,.26); --neutral-00: #FFFFFF; --neutral-05: #FBF6EF; --neutral-10: #EADFD2; --neutral-20: #D8C7B6; --neutral-40: #A3928A; --neutral-60: #6E5F54; --neutral-80: #443430; --neutral-95: #2A1F1A; --color-accent: #B0552F; --color-accent-press: #8C4224; --color-accent-tint: #F6E2D6; --color-olive: #6B7A4B; --color-honey: #D9A05B; --color-danger: #93332B; --color-bg: #FBF6EF; --color-surface: #FFFFFF; --color-border: #EADFD2; --color-ink: #2A1F1A; --color-muted: #6E5F54; --color-subtle: #A3928A; --color-on-accent: #FFFFFF; } [data-palette="2a"][data-theme="dark"] { --color-bg: #17110E; --color-surface: #211913; --color-border: #33261E; --color-ink: #F5EBE0; --color-muted: #B0A093; --color-subtle: #8C7A6E; --color-accent: #E08A5C; --color-on-accent: #26120A; } /* ===== 2b · Amber & Cream — тихая роскошь ===== */ [data-palette="2b"] { --font-sans: 'Schibsted Grotesk', system-ui, sans-serif; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-pill: 999px; --elevation-1: 0 1px 2px rgba(36,31,23,.12); --elevation-2: 0 10px 28px -10px rgba(36,31,23,.24); --neutral-00: #FFFEFA; --neutral-05: #FAF5EC; --neutral-10: #E9DFCB; --neutral-20: #D8CBB2; --neutral-40: #A2967F; --neutral-60: #6B6152; --neutral-80: #3D3729; --neutral-95: #241F17; --color-accent: #A06A17; --color-accent-press: #7E5211; --color-accent-tint: #F7E9D2; --color-amber: #DDA15E; --color-olive-ink: #4E4636; --color-danger: #93332B; --color-bg: #FAF5EC; --color-surface: #FFFEFA; --color-border: #E9DFCB; --color-ink: #241F17; --color-muted: #6B6152; --color-subtle: #A2967F; --color-on-accent: #FFFEFA; } [data-palette="2b"][data-theme="dark"] { --color-bg: #16130D; --color-surface: #1F1B13; --color-border: #302A20; --color-ink: #F3EDE1; --color-muted: #A99E8B; --color-subtle: #8A7F6B; --color-accent: #E8B872; --color-on-accent: #231903; } /* ===== 2c · Rosewood & Sand — розовое дерево ===== */ [data-palette="2c"] { --font-sans: 'Instrument Sans', system-ui, sans-serif; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 18px; --radius-pill: 999px; --elevation-1: 0 1px 2px rgba(43,29,29,.12); --elevation-2: 0 10px 28px -10px rgba(43,29,29,.24); --neutral-00: #FFFBF8; --neutral-05: #F6EEE8; --neutral-10: #E8D8CE; --neutral-20: #D6BFB6; --neutral-40: #A8918C; --neutral-60: #6E5A57; --neutral-80: #42302E; --neutral-95: #2B1D1D; --color-accent: #9E4B4B; --color-accent-press: #7E3838; --color-accent-tint: #F3DFDC; --color-sand: #C9A87C; --color-sage-ink: #7A6A55; --color-danger: #8E2B20; --color-bg: #F6EEE8; --color-surface: #FFFBF8; --color-border: #E8D8CE; --color-ink: #2B1D1D; --color-muted: #6E5A57; --color-subtle: #A8918C; --color-on-accent: #FFFBF8; } [data-palette="2c"][data-theme="dark"] { --color-bg: #170F0F; --color-surface: #201616; --color-border: #33231F; --color-ink: #F4E9E4; --color-muted: #B39C97; --color-subtle: #8E7873; --color-accent: #D98A7E; --color-on-accent: #2A0F0C; } /* ===== 3a · Blue Aura & Cloud — воздушный синий ===== */ [data-palette="3a"] { --font-sans: 'Geist', system-ui, sans-serif; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-pill: 999px; --elevation-1: 0 1px 2px rgba(20,26,43,.12); --elevation-2: 0 10px 28px -10px rgba(20,26,43,.22); --neutral-00: #FFFFFF; --neutral-05: #F4F6FA; --neutral-10: #E1E4EC; --neutral-20: #C8CDDA; --neutral-40: #98A0B4; --neutral-60: #5D6579; --neutral-80: #2B3450; --neutral-95: #141A2B; --color-accent: #3B5BA9; --color-accent-press: #2C4585; --color-accent-tint: #E4EAF7; --color-blue-aura: #7C9BD1; --color-mint: #A8DBC5; --color-danger: #9B2C2C; --color-bg: #F4F6FA; --color-surface: #FFFFFF; --color-border: #E1E4EC; --color-ink: #141A2B; --color-muted: #5D6579; --color-subtle: #98A0B4; --color-on-accent: #FFFFFF; } [data-palette="3a"][data-theme="dark"] { --color-bg: #0A0E1A; --color-surface: #121826; --color-border: #212A3D; --color-ink: #E7EBF3; --color-muted: #9AA3B7; --color-subtle: #6E7793; --color-accent: #8FAEE4; --color-on-accent: #0A1226; } /* ===== 3b · Ink Navy — чернильный синий ===== */ [data-palette="3b"] { --font-sans: 'Schibsted Grotesk', system-ui, sans-serif; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-pill: 999px; --elevation-1: 0 1px 2px rgba(16,24,39,.12); --elevation-2: 0 10px 28px -10px rgba(16,24,39,.22); --neutral-00: #FFFFFF; --neutral-05: #F5F6F9; --neutral-10: #DFE3EA; --neutral-20: #C5CBD6; --neutral-40: #95A0B2; --neutral-60: #586277; --neutral-80: #26324A; --neutral-95: #101827; --color-accent: #1D3A6E; --color-accent-press: #132A54; --color-accent-tint: #E5EAF3; --color-action-blue: #2F63D8; --color-steel: #6E85A8; --color-danger: #A32222; --color-bg: #F5F6F9; --color-surface: #FFFFFF; --color-border: #DFE3EA; --color-ink: #101827; --color-muted: #586277; --color-subtle: #95A0B2; --color-on-accent: #FFFFFF; } [data-palette="3b"][data-theme="dark"] { --color-bg: #080C14; --color-surface: #101725; --color-border: #1E273A; --color-ink: #E9EDF4; --color-muted: #98A2B5; --color-subtle: #6C7690; --color-accent: #7FA6F0; --color-on-accent: #06101F; } /* ===== 3c · Slate Blue & Sand — синий на тёплой бумаге ===== */ [data-palette="3c"] { --font-sans: 'Instrument Sans', system-ui, sans-serif; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-pill: 999px; --elevation-1: 0 1px 2px rgba(28,36,41,.12); --elevation-2: 0 10px 28px -10px rgba(28,36,41,.22); --neutral-00: #FFFDF8; --neutral-05: #F6F2E9; --neutral-10: #E4DFD3; --neutral-20: #CDC8BA; --neutral-40: #9EA39C; --neutral-60: #5E6A6C; --neutral-80: #33403F; --neutral-95: #1C2429; --color-accent: #3F6280; --color-accent-press: #2C4A63; --color-accent-tint: #E2EAF0; --color-sand: #E8DDC9; --color-clay: #B0714E; --color-danger: #8E3030; --color-bg: #F6F2E9; --color-surface: #FFFDF8; --color-border: #E4DFD3; --color-ink: #1C2429; --color-muted: #5E6A6C; --color-subtle: #9EA39C; --color-on-accent: #FFFDF8; } [data-palette="3c"][data-theme="dark"] { --color-bg: #0C1113; --color-surface: #141B1E; --color-border: #222C2E; --color-ink: #EDEAE2; --color-muted: #9DA7A6; --color-subtle: #77807E; --color-accent: #8FB4CE; --color-on-accent: #08161E; } /* ===== GENERATED by .design-sync/build-ds.mjs — do not edit ===== Default palette for documents that set no data-palette attribute: 1a · Cloud Dancer × Transformative Teal. Declarations copied verbatim from the [data-palette="1a"] rules above, so this block cannot drift from them. Setting data-palette on (or on any wrapper element) overrides it. */ html:not([data-palette]) { --font-sans: 'Geist', system-ui, sans-serif; --radius-sm: 6px; --radius-md: 12px; --radius-lg: 18px; --radius-pill: 999px; --elevation-1: 0 1px 2px rgba(20,32,31,.06); --elevation-2: 0 8px 24px -8px rgba(20,32,31,.16); --neutral-00: #FFFFFF; --neutral-05: #F3F2EE; --neutral-10: #E2E0D9; --neutral-20: #C9CCC7; --neutral-40: #9BA5A2; --neutral-60: #5F6B69; --neutral-80: #2C3A38; --neutral-95: #14201F; --color-accent: #0E6E6B; --color-accent-press: #0A5754; --color-accent-tint: #D9E9E7; --color-mint: #A8DBC5; --color-warning: #B8622F; --color-danger: #9B2C2C; --color-bg: #F3F2EE; --color-surface: #FFFFFF; --color-border: #E2E0D9; --color-ink: #14201F; --color-muted: #5F6B69; --color-subtle: #9BA5A2; --color-on-accent: #FFFFFF; } html:not([data-palette])[data-theme="dark"] { --color-bg: #0B1413; --color-surface: #12201F; --color-border: #1F2E2C; --color-ink: #E8EDEB; --color-muted: #94A3A0; --color-subtle: #6B7B78; --color-accent: #4FB3AC; --color-on-accent: #04211F; }