/* ═══════════════════════════════════════════════════════════════════════════ MAGICUM · theme-vyshyvanka.css Ukrainian embroidery hero theme — dark background + red vyshyvanka accents Enable: document.body.classList.add('theme-vyshyvanka') Disable: document.body.classList.remove('theme-vyshyvanka') Торкається ТІЛЬКИ: #hero, .hero-*, .btn-hero-cta, .btn-b2b, .btn-shop Основний функціонал сайту не зачіпається. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Кольорові змінні теми ────────────────────────────────────────────────── */ body.theme-vyshyvanka { --vysh-red: #C41E1E; --vysh-red-mid: #a01818; --vysh-red-glow: rgba(196, 30, 30, 0.50); --vysh-red-dim: rgba(196, 30, 30, 0.20); --vysh-red-soft: rgba(196, 30, 30, 0.08); } /* ── Hero overlay: тепліша темрява з червоним відтінком ─────────────────── */ body.theme-vyshyvanka .hero-bg::after { background: linear-gradient(180deg, rgba(20, 4, 4, 0.93) 0%, rgba(20, 4, 4, 0.48) 28%, rgba(20, 4, 4, 0.14) 52%, rgba(20, 4, 4, 0.52) 76%, rgba(20, 4, 4, 0.95) 100%); } /* ── Декоративна рамка: золота → червона ─────────────────────────────────── */ body.theme-vyshyvanka .hero-bg::before { border-color: rgba(196, 30, 30, 0.24); } /* ── Вишивка зверху: геометричний орнамент ───────────────────────────────── */ /* SVG плитка 86×52px: ромби + хрести, повторюється по X */ body.theme-vyshyvanka #hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 52px; z-index: 4; pointer-events: none; background-color: var(--vysh-red-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='86' height='52'%3E%3C!-- top border line --%3E%3Cline x1='0' y1='4' x2='86' y2='4' stroke='%23C41E1E' stroke-width='1.5'/%3E%3C!-- bottom border line --%3E%3Cline x1='0' y1='48' x2='86' y2='48' stroke='%23C41E1E' stroke-width='1.5'/%3E%3C!-- connecting lines left/right --%3E%3Cline x1='0' y1='26' x2='11' y2='26' stroke='%23C41E1E' stroke-width='1' opacity='0.8'/%3E%3Cline x1='75' y1='26' x2='86' y2='26' stroke='%23C41E1E' stroke-width='1' opacity='0.8'/%3E%3C!-- outer diamond --%3E%3Cpolygon points='43,8 75,26 43,44 11,26' fill='%23C41E1E'/%3E%3C!-- inner dark diamond (hollow center) --%3E%3Cpolygon points='43,16 60,26 43,36 26,26' fill='%230e0e0e'/%3E%3C!-- center cross --%3E%3Crect x='41' y='21' width='4' height='10' fill='%23C41E1E'/%3E%3Crect x='36' y='24' width='14' height='4' fill='%23C41E1E'/%3E%3C!-- small diamond top tip --%3E%3Cpolygon points='43,5 47,9 43,13 39,9' fill='%23C41E1E'/%3E%3C!-- small diamond bottom tip --%3E%3Cpolygon points='43,39 47,43 43,47 39,43' fill='%23C41E1E'/%3E%3C!-- half triangles at edges (seamless repeat) --%3E%3Cpolygon points='0,20 7,26 0,32' fill='%23C41E1E' opacity='0.7'/%3E%3Cpolygon points='86,20 79,26 86,32' fill='%23C41E1E' opacity='0.7'/%3E%3C!-- accent dots on border lines --%3E%3Ccircle cx='43' cy='4' r='2.5' fill='%23C41E1E'/%3E%3Ccircle cx='43' cy='48' r='2.5' fill='%23C41E1E'/%3E%3Ccircle cx='11' cy='4' r='1.5' fill='%23C41E1E' opacity='0.6'/%3E%3Ccircle cx='75' cy='4' r='1.5' fill='%23C41E1E' opacity='0.6'/%3E%3Ccircle cx='11' cy='48' r='1.5' fill='%23C41E1E' opacity='0.6'/%3E%3Ccircle cx='75' cy='48' r='1.5' fill='%23C41E1E' opacity='0.6'/%3E%3C/svg%3E"); background-repeat: repeat-x; background-position: center center; } /* ── Вишивка знизу: той самий орнамент ───────────────────────────────────── */ body.theme-vyshyvanka #hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 52px; z-index: 4; pointer-events: none; background-color: var(--vysh-red-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='86' height='52'%3E%3Cline x1='0' y1='4' x2='86' y2='4' stroke='%23C41E1E' stroke-width='1.5'/%3E%3Cline x1='0' y1='48' x2='86' y2='48' stroke='%23C41E1E' stroke-width='1.5'/%3E%3Cline x1='0' y1='26' x2='11' y2='26' stroke='%23C41E1E' stroke-width='1' opacity='0.8'/%3E%3Cline x1='75' y1='26' x2='86' y2='26' stroke='%23C41E1E' stroke-width='1' opacity='0.8'/%3E%3Cpolygon points='43,8 75,26 43,44 11,26' fill='%23C41E1E'/%3E%3Cpolygon points='43,16 60,26 43,36 26,26' fill='%230e0e0e'/%3E%3Crect x='41' y='21' width='4' height='10' fill='%23C41E1E'/%3E%3Crect x='36' y='24' width='14' height='4' fill='%23C41E1E'/%3E%3Cpolygon points='43,5 47,9 43,13 39,9' fill='%23C41E1E'/%3E%3Cpolygon points='43,39 47,43 43,47 39,43' fill='%23C41E1E'/%3E%3Cpolygon points='0,20 7,26 0,32' fill='%23C41E1E' opacity='0.7'/%3E%3Cpolygon points='86,20 79,26 86,32' fill='%23C41E1E' opacity='0.7'/%3E%3Ccircle cx='43' cy='4' r='2.5' fill='%23C41E1E'/%3E%3Ccircle cx='43' cy='48' r='2.5' fill='%23C41E1E'/%3E%3Ccircle cx='11' cy='4' r='1.5' fill='%23C41E1E' opacity='0.6'/%3E%3Ccircle cx='75' cy='4' r='1.5' fill='%23C41E1E' opacity='0.6'/%3E%3Ccircle cx='11' cy='48' r='1.5' fill='%23C41E1E' opacity='0.6'/%3E%3Ccircle cx='75' cy='48' r='1.5' fill='%23C41E1E' opacity='0.6'/%3E%3C/svg%3E"); background-repeat: repeat-x; background-position: center center; } /* ── Eyebrow: золото → червоний ──────────────────────────────────────────── */ body.theme-vyshyvanka .hero-eyebrow { color: var(--vysh-red); } body.theme-vyshyvanka .hero-eyebrow::before, body.theme-vyshyvanka .hero-eyebrow::after { background: linear-gradient(to right, transparent, var(--vysh-red), transparent); } /* ── Заголовок: курсив "Digital Alchemist" — червоний з сяйвом ──────────── */ body.theme-vyshyvanka .hero-title em { color: #e06868; text-shadow: 0 0 30px rgba(196, 30, 30, 0.55), 0 0 60px rgba(196, 30, 30, 0.25); } /* ── Підзаголовок: трохи тепліший ────────────────────────────────────────── */ body.theme-vyshyvanka .hero-sub { color: rgba(240, 218, 200, 0.65); } /* ── Кнопка CTA: золота + червоне сяйво ──────────────────────────────────── */ body.theme-vyshyvanka .btn-hero-cta { box-shadow: 0 0 40px rgba(196, 30, 30, 0.30), 0 0 20px rgba(201, 168, 76, 0.12); } body.theme-vyshyvanka .btn-hero-cta:hover { box-shadow: 0 0 65px rgba(196, 30, 30, 0.60), 0 0 25px rgba(201, 168, 76, 0.20); transform: translateY(-3px); } /* ── Кнопка B2B: червона рамка ───────────────────────────────────────────── */ body.theme-vyshyvanka .btn-b2b { border-color: rgba(196, 30, 30, 0.40); color: rgba(240, 218, 200, 0.55); } body.theme-vyshyvanka .btn-b2b:hover { border-color: var(--vysh-red); color: #e06868; background: rgba(196, 30, 30, 0.08); } /* ── Кнопка магазину (nav): червоний відтінок ───────────────────────────── */ body.theme-vyshyvanka .btn-shop { color: #e06868; } /* ── Nav border: золото → червоне ────────────────────────────────────────── */ body.theme-vyshyvanka nav { border-color: rgba(196, 30, 30, 0.25); } body.theme-vyshyvanka .nav-lang { color: var(--vysh-red); border-left-color: rgba(196, 30, 30, 0.22); } body.theme-vyshyvanka .nav-lang:hover { background: var(--vysh-red); color: #f5edd8; } body.theme-vyshyvanka .nav-google { border-left-color: rgba(196, 30, 30, 0.22); } body.theme-vyshyvanka .nav-google:hover { color: var(--vysh-red); } body.theme-vyshyvanka nav > * { border-left-color: rgba(196, 30, 30, 0.22); } /* ── Scrollbar: червоний ─────────────────────────────────────────────────── */ body.theme-vyshyvanka ::-webkit-scrollbar-thumb { background: var(--vysh-red-mid); }