/* DubCandle — токени і база для всіх сайтів. Джерело: claude/design.md «Для імплементації» + дизайн-система https://claude.ai/artifact/9CbzkfnACXVhjnVByMRb1s Шрифти підключаються в кожної сторінки (Prata, Geologica, IBM Plex Mono). */ :root{ --wax:#F3EDE3; --wax-raised:#FBF8F3; --line:#DDD2C1; --line-strong:#8C7B6B; --soot:#1C1A18; --soot-muted:#6B5E52; --chocolate:#4A2E1F; --on-chocolate:#F3EDE3; --mustard:#C9A227; --on-mustard:#1C1A18; --mustard-ink:#7A5F0E; /* лише режим «Товар» */ --signal:#A3321F; /* лише помилки */ --font-display:"Prata",Georgia,serif; --font-sans:"Geologica","Segoe UI",system-ui,sans-serif; --font-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace; --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-6:24px;--space-10:40px;--space-16:64px; --radius-none:0;--radius-sm:2px;--radius-full:9999px; --focus-ring:0 0 0 2px #F3EDE3,0 0 0 4px #4A2E1F; --section-y:64px; /* між секціями: mobile 64, desktop 128 */ --maxw:1120px; } @media (min-width:900px){ :root{ --section-y:128px; } } /* Темна тема «Кіптява» — лише для окремих секцій */ .theme-soot{ --wax:#1C1A18; --wax-raised:#26221F; --line:#3A332D; --soot:#F3EDE3; --soot-muted:#B3A695; --chocolate:#C08A62; --on-chocolate:#1C1A18; --mustard:#D4AE3A; --mustard-ink:#D4AE3A; --signal:#E07A62; --focus-ring:0 0 0 2px #1C1A18,0 0 0 4px #C08A62; background:var(--wax); color:var(--soot); } *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; background:var(--wax); color:var(--soot); font:400 16px/26px var(--font-sans); -webkit-font-smoothing:antialiased; } img{ max-width:100%; display:block; } a{ color:inherit; text-underline-offset:3px; text-decoration-thickness:1px; } p{ margin:0 0 var(--space-4); } /* Типографіка */ .t-display, h1{ font:400 34px/40px var(--font-display); margin:0 0 var(--space-6); } @media (min-width:900px){ .t-display, h1{ font-size:44px; line-height:48px; } } .t-heading, h2{ font:400 28px/34px var(--font-display); margin:0 0 var(--space-6); } h3{ font:500 16px/24px var(--font-sans); margin:0 0 var(--space-2); } .t-lead{ font:300 19px/28px var(--font-sans); } .t-fine{ font:400 13px/18px var(--font-sans); color:var(--soot-muted); } .t-label{ font:500 12px/16px var(--font-mono); text-transform:uppercase; letter-spacing:.08em; } .t-spec{ font:400 13px/20px var(--font-mono); font-variant-numeric:tabular-nums; } .container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--space-4); } @media (min-width:900px){ .container{ padding:0 var(--space-10); } } /* Лого — словесний знак */ .wordmark{ font:400 22px/1 var(--font-display); color:var(--chocolate); text-decoration:none; } /* Кнопки (як dc-btn у дизайн-системі) */ .dc-btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2); font:500 15px/20px var(--font-sans); letter-spacing:.01em; text-decoration:none; cursor:pointer; height:48px; padding:0 var(--space-6); border-radius:var(--radius-none); border:1px solid var(--line-strong); background:transparent; color:var(--soot); transition:background-color .15s, border-color .15s; } .dc-btn:hover{ border-color:var(--soot); } .dc-btn-primary{ background:var(--chocolate); border-color:var(--chocolate); color:var(--on-chocolate); } .dc-btn-primary:hover{ background:color-mix(in srgb, var(--chocolate) 88%, var(--soot)); border-color:transparent; } .dc-btn:focus-visible, a:focus-visible, summary:focus-visible{ outline:2px solid transparent; box-shadow:var(--focus-ring); } /* Плейсхолдер — текст, який ще треба замінити (службова позначка, не частина дизайну) */ .ph{ background:var(--wax-raised); outline:1px dashed var(--line-strong); padding:0 3px; } .dc-btn-primary .ph, .dc-notice .ph, .promo .ph{ background:transparent; outline-color:currentColor; } /* Заглушка під фото, кадр 4:5 */ .photo-ph{ aspect-ratio:4/5; border:1px solid var(--line); background:var(--wax-raised); display:grid; place-items:center; padding:var(--space-4); text-align:center; font:500 12px/16px var(--font-mono); text-transform:uppercase; letter-spacing:.08em; color:var(--soot-muted); } /* ---------- Компоненти режиму «Товар» (з дизайн-системи, components/bundle.css) ---------- */ :root{ --shadow-float:0 8px 24px -6px #1C1A1826; } .theme-soot{ --shadow-float:0 8px 24px -6px #000000b3; } /* Етикетка-паспорт */ .dc-spec{ width:100%; max-width:320px; background:var(--wax-raised); border:1px solid var(--soot); padding:var(--space-4); font-family:var(--font-mono); color:var(--soot); } .dc-spec-head{ display:flex; justify-content:space-between; gap:var(--space-3); font:500 12px/16px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; padding-bottom:var(--space-2); border-bottom:1px solid var(--soot); margin-bottom:var(--space-2); } .dc-spec-name{ font:400 28px/34px var(--font-display); margin:var(--space-2) 0 var(--space-3); } .dc-spec dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:2px var(--space-3); font:400 13px/20px var(--font-mono); } .dc-spec dt{ color:var(--soot-muted); } .dc-spec dd{ margin:0; text-align:right; font-variant-numeric:tabular-nums; } .dc-spec-foot{ margin-top:var(--space-3); padding-top:var(--space-2); border-top:1px solid var(--line); font:400 11px/16px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--soot-muted); } /* Штамп: один на поверхню, −8° */ .dc-stamp{ display:inline-grid; place-items:center; width:132px; height:132px; border-radius:var(--radius-full); border:2px solid var(--chocolate); color:var(--chocolate); transform:rotate(-8deg); font:500 11px/15px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; text-align:center; padding:var(--space-4); box-shadow:inset 0 0 0 4px var(--wax), inset 0 0 0 5px var(--chocolate); background:var(--wax); } .dc-stamp-rect{ display:inline-block; border:2px solid var(--chocolate); color:var(--chocolate); transform:rotate(-8deg); font:500 12px/16px var(--font-mono); letter-spacing:.08em; text-transform:uppercase; padding:var(--space-2) var(--space-3); } /* Поле гірчиці (гучний режим): текст — кіптява, кнопка лишається шоколадною */ .field-mustard{ background:var(--mustard); color:var(--on-mustard); } .field-mustard .eyebrow, .field-mustard .section-lead{ color:var(--on-mustard); } /* Поля форми */ .dc-field{ display:grid; gap:var(--space-2); } .dc-field > label, .dc-legend{ font:500 15px/20px var(--font-sans); } .dc-input{ width:100%; min-height:48px; padding:var(--space-3); font:400 16px/24px var(--font-sans); color:var(--soot); background:var(--wax-raised); border:1px solid var(--line-strong); border-radius:var(--radius-sm); } textarea.dc-input{ min-height:120px; resize:vertical; } .dc-input:focus-visible{ outline:2px solid transparent; box-shadow:var(--focus-ring); } .dc-input[aria-invalid="true"]{ border-color:var(--signal); } .dc-hint{ font:400 13px/18px var(--font-sans); color:var(--soot-muted); margin:0; } .dc-error{ font:400 13px/18px var(--font-sans); color:var(--signal); margin:0; } .dc-error:empty{ display:none; } .dc-check{ display:grid; grid-template-columns:24px 1fr; gap:var(--space-3); align-items:start; cursor:pointer; } .dc-check input{ width:22px; height:22px; margin:2px 0 0; accent-color:var(--chocolate); border-radius:var(--radius-sm); } .dc-check input:focus-visible{ outline:2px solid transparent; box-shadow:var(--focus-ring); } /* Плашка-попередження (інформація, не помилка) — шоколадна */ .dc-notice{ background:var(--chocolate); color:var(--on-chocolate); padding:var(--space-4) var(--space-6); } .dc-notice p{ margin:0; } .dc-notice .t-label{ display:block; margin-bottom:var(--space-2); }