/* ========================================================================= FreshKebab — themes.css 25 elegant restaurant themes driven by CSS custom properties. Activate by setting `data-theme="N"` on the element. ========================================================================= */ /* ---- Generic theme application (consume CSS variables) ---------------- */ html[data-theme] { font-family: var(--body-font, Alegreya, serif); } html[data-theme], html[data-theme] body { background-color: var(--page-bg, #fff); color: var(--page-text, #222); text-transform: var(--body-text-transform, uppercase); letter-spacing: var(--body-letter-spacing, normal); } html[data-theme] .sectionTittle, html[data-theme] .subSectionTitle, html[data-theme] .menu_category .h_category { font-family: var(--heading-font, inherit); color: var(--heading-color, inherit); letter-spacing: var(--heading-letter-spacing, normal); text-transform: var(--heading-text-transform, inherit); } html[data-theme] .sectionTittle { color: var(--section-title-color, var(--heading-color, inherit)); } /* The "Menu" sectionTittle sits INSIDE #menu (on --menu-bg) — unlike other sectionTittles (Co oferujemy, Zamów) which sit on --page-bg. Using the page-context --section-title-color there clashes with --menu-bg in ~22 themes (e.g. Mikołajki: red title on red menu-bg = invisible). --menu-category is already designed to be readable on --menu-bg and matches the visual language of the category headings inside the menu. */ html[data-theme] #menu .sectionTittle { color: var(--menu-section-title-color, var(--menu-category, var(--menu-text, inherit))); } html[data-theme] #menu { background: var(--menu-bg, #212529); color: var(--menu-text, #fff); } html[data-theme] #menu .menu_category .h_category { color: var(--menu-category, var(--accent, #59db6a)); text-decoration-color: var(--menu-category-underline, currentColor); } html[data-theme] #menu .menu_meal { color: var(--menu-meal, var(--menu-text, #fff)); font-family: var(--meal-font, var(--body-font, inherit)); text-transform: var(--meal-text-transform, inherit); } html[data-theme] .menu_meal_description, html[data-theme] .menu_meal_description_with_icon, html[data-theme] #menu .desc { color: var(--menu-desc, #99eb95); } html[data-theme] #menu .border-bottom, html[data-theme] #menu .menu-line { border-color: var(--menu-divider, rgba(160,208,132,0.25)) !important; } html[data-theme] .price-pill { background: var(--pill-bg, rgba(255,255,255,0.08)); border: 1px solid var(--pill-border, rgba(255,255,255,0.9)); color: var(--pill-color, #fff); border-radius: var(--pill-radius, 6px); font-family: var(--pill-font, var(--body-font, inherit)); } html[data-theme] .button { color: var(--top-title-color, #fff); border: 3px solid var(--top-title-color, #fff); background: var(--button-bg, transparent); border-radius: var(--button-radius, 10px); font-family: var(--button-font, var(--body-font, inherit)); transition: background .25s ease, box-shadow .25s ease, transform .15s ease; } /* Hover bezpieczny dla wszystkich 50 motywów: - text i border NIE zmieniają koloru (zawsze widoczne, w kolorze --top-title-color), - tło dostaje 12% przymglenie kolorem tytułu (subtelne, kontrastuje na ciemnym overlayu), - poświata 35% wokół przycisku, żeby było czuć interakcję, - lekki lift dla feedbacku. color-mix gwarantuje, że na dowolnym motywie (także gdy --menu-bg ≈ --top-title-color jak w Theme 22 Marmurowy salon) przycisk pozostanie czytelny. */ html[data-theme] .button:hover { background: color-mix(in srgb, var(--top-title-color, #ffffff) 12%, transparent); box-shadow: 0 6px 18px color-mix(in srgb, var(--top-title-color, #ffffff) 38%, transparent); transform: translateY(-2px); } html[data-theme] .button:active { transform: translateY(0); box-shadow: 0 2px 6px color-mix(in srgb, var(--top-title-color, #ffffff) 25%, transparent); } html[data-theme] button { border: 3px solid var(--accent, #59db6a); border-radius: var(--button-radius, 10px); background: var(--button-bg, transparent); color: var(--page-text, inherit); } html[data-theme] .small-img, html[data-theme] .small-img2 { border: 3px solid var(--accent, #59db6a); border-radius: var(--img-radius, 10px); } html[data-theme] .top-background { background-color: var(--top-overlay-color, rgba(0,0,0,.65)); } html[data-theme] .top-background .container > div > div:first-child { color: var(--top-title-color, #fff) !important; font-family: var(--top-title-font, var(--heading-font, inherit)); letter-spacing: var(--top-title-letter-spacing, normal); } html[data-theme] .popup-content { background: var(--popup-bg, #fff); color: var(--popup-text, #222); border-radius: var(--popup-radius, 4px); } html[data-theme] .popup-content table th { background-color: var(--popup-header-bg, #f9f9f9); color: var(--popup-text, #222); } html[data-theme] footer { color: var(--footer-color, inherit); border-color: var(--footer-border, #e5e5e5); } /* ========================================================================= MODERN FOUNDATION — applies to all 50 themes Design tokens (motion / radius / shadow), accessibility focus rings, layered hero, smooth section bridges, animated underlines, refined scrollbar, prefers-reduced-motion respect, and a customer-friendly print stylesheet for the menu. Each theme can override any token. ========================================================================= */ html[data-theme] { /* Motion */ --duration-fast: 150ms; --duration-normal: 280ms; --duration-slow: 480ms; --ease-out: cubic-bezier(.22, 1, .36, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); /* Radius scale (themes still set --button-radius / --pill-radius / --img-radius) */ --radius-xs: 2px; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 14px; --radius-xl: 22px; /* Theme-tinted depth (uses --accent if defined, falls back to neutral) */ --shadow-color: var(--accent, #1a1a1a); --shadow-sm: 0 1px 2px color-mix(in srgb, var(--shadow-color) 18%, transparent); --shadow-md: 0 6px 16px color-mix(in srgb, var(--shadow-color) 22%, transparent); --shadow-lg: 0 14px 32px color-mix(in srgb, var(--shadow-color) 28%, transparent); --shadow-glow: 0 0 24px color-mix(in srgb, var(--shadow-color) 32%, transparent); scroll-behavior: smooth; } /* ---- Focus ring (a11y) — visible only for keyboard users ------------- */ html[data-theme] :focus-visible { outline: 3px solid color-mix(in srgb, var(--accent, #59db6a) 80%, transparent); outline-offset: 3px; transition: outline-offset var(--duration-fast) var(--ease-out); } html[data-theme] .button:focus-visible, html[data-theme] button:focus-visible, html[data-theme] a:focus-visible { outline-offset: 4px; box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent, #59db6a) 22%, transparent); } /* ---- Hero — subtle vignette + bottom bridge into menu section -------- */ html[data-theme] .top-background { position: relative; isolation: isolate; transition: background-color var(--duration-slow) var(--ease-out); } html[data-theme] .top-background::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 38%, transparent 45%, rgba(0,0,0,.22) 100%), linear-gradient(180deg, transparent 65%, color-mix(in srgb, var(--menu-bg, #000) 70%, transparent) 100%); pointer-events: none; z-index: 0; } html[data-theme] .top-background > * { position: relative; z-index: 1; } /* ---- Smooth section transition between page-bg and menu-bg ----------- */ /* Margins create visual breathing room between the previous/next section and the menu; the gradient pseudo-elements sit inside the BOTTOM half of the margin (closer to the menu), so the surrounding text gets clean page-bg above the gradient — never overlapped by the fade. */ html[data-theme] #menu { position: relative; isolation: isolate; margin-top: 72px; margin-bottom: 72px; } html[data-theme] #menu::before { content: ""; position: absolute; top: -40px; left: 0; right: 0; height: 40px; background: linear-gradient(180deg, transparent 0%, var(--menu-bg, #212529) 100%); pointer-events: none; } html[data-theme] #menu::after { content: ""; position: absolute; bottom: -40px; left: 0; right: 0; height: 40px; background: linear-gradient(0deg, transparent 0%, var(--menu-bg, #212529) 100%); pointer-events: none; } /* Admin can disable the gradient bridge (`data-menu-gradient="off"` set server-side from the persisted RestaurantInfo.ShowMenuGradient flag). Sections meet with a hard edge and the surrounding margin collapses to a smaller gap. */ html[data-theme][data-menu-gradient="off"] #menu { margin-top: 32px; margin-bottom: 32px; } html[data-theme][data-menu-gradient="off"] #menu::before, html[data-theme][data-menu-gradient="off"] #menu::after { display: none; } /* ---- Menu category heading — animated underline ---------------------- */ html[data-theme] .menu_category .h_category { text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: color-mix(in srgb, var(--menu-category, currentColor) 50%, transparent); transition: text-decoration-color var(--duration-normal) var(--ease-out), text-underline-offset var(--duration-normal) var(--ease-out); } html[data-theme] .menu_category:hover .h_category, html[data-theme] .menu_category:focus-within .h_category { text-decoration-color: var(--menu-category, currentColor); text-underline-offset: 8px; } /* ---- Menu row hover — subtle accent wash for scannability ------------ */ html[data-theme] #menu .menu-line { transition: background-color var(--duration-normal) var(--ease-out); border-radius: var(--radius-sm); } html[data-theme] #menu .menu-line:hover { background-color: color-mix(in srgb, var(--accent, #59db6a) 6%, transparent); } /* ---- Price pill — refined hover with theme-tinted glow --------------- */ html[data-theme] .price-pill { transition: transform var(--duration-fast) var(--ease-spring), box-shadow var(--duration-normal) var(--ease-out), background var(--duration-normal) var(--ease-out); } html[data-theme] .price-pill:hover { transform: translateY(-1px) scale(1.02); box-shadow: var(--shadow-md); } /* ---- Modern button feedback — spring press + theme-tinted glow ------- */ html[data-theme] .button { transition: background var(--duration-normal) var(--ease-out), box-shadow var(--duration-normal) var(--ease-out), transform var(--duration-fast) var(--ease-spring); } /* ---- Smooth scrollbar (Firefox + WebKit) ----------------------------- */ html[data-theme] { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--accent, #888) 55%, transparent) transparent; } html[data-theme] body::-webkit-scrollbar { width: 10px; height: 10px; } html[data-theme] body::-webkit-scrollbar-track { background: transparent; } html[data-theme] body::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--accent, #888) 45%, transparent); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; transition: background var(--duration-fast) var(--ease-out); } html[data-theme] body::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--accent, #888) 80%, transparent); background-clip: padding-box; } /* ---- Reduced motion — respect user preference ------------------------ */ @media (prefers-reduced-motion: reduce) { html[data-theme], html[data-theme] *, html[data-theme] *::before, html[data-theme] *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ---- Print — customer-friendly menu printout ------------------------- */ @media print { html[data-theme], html[data-theme] body { background: #fff !important; color: #000 !important; text-transform: none !important; } html[data-theme] .top-background, html[data-theme] .theme-switcher, html[data-theme] footer, html[data-theme] #map, html[data-theme] .button { display: none !important; } html[data-theme] #menu { background: #fff !important; color: #000 !important; } html[data-theme] #menu::before, html[data-theme] #menu::after { display: none !important; } html[data-theme] #menu .menu_category .h_category { color: #000 !important; border-bottom: 2px solid #000 !important; text-decoration: none !important; page-break-after: avoid; } html[data-theme] #menu .menu_meal, html[data-theme] #menu .menu_meal_description, html[data-theme] #menu .menu_meal_description_with_icon, html[data-theme] #menu .desc { color: #000 !important; } html[data-theme] .price-pill { background: #fff !important; border: 1px solid #000 !important; color: #000 !important; box-shadow: none !important; } html[data-theme] .menu_category { page-break-inside: avoid; } } /* ---- Theme 1: Klasyczny zielony (oryginał) --------------------------- */ html[data-theme="1"] { --page-bg: #ffffff; --page-text: #222222; --menu-bg: #212529; --menu-text: #ffffff; --menu-category: #59db6a; --menu-desc: #99eb95; --accent: #59db6a; --pill-bg: rgba(255,255,255,0.08); --pill-border: rgba(255,255,255,0.9); --pill-color: #ffffff; --button-color: #59db6a; --button-border: #59db6a; --top-overlay-color: rgba(0,0,0,.65); --heading-font: 'Alegreya', serif; --body-font: 'Alegreya', serif; } /* ---- Theme 2: Węgiel i złoto ---------------------------------------- */ html[data-theme="2"] { --page-bg: #1a1a1a; --page-text: #f0e5c8; --menu-bg: #0d0d0d; --menu-text: #f0e5c8; --menu-category: #d4af37; --menu-desc: #c9b988; --menu-divider: rgba(212,175,55,0.25); --accent: #d4af37; --pill-bg: rgba(212,175,55,0.08); --pill-border: #d4af37; --pill-color: #f0e5c8; --button-color: #d4af37; --button-border: #d4af37; --button-hover-color: #1a1a1a; --button-hover-bg: #d4af37; --button-hover-border: #d4af37; --top-overlay-color: rgba(0,0,0,.78); --top-title-color: #d4af37; --top-title-letter-spacing: 6px; --heading-font: 'Cinzel', serif; --body-font: 'Merriweather', serif; --heading-letter-spacing: 4px; --section-title-color: #d4af37; } /* ---- Theme 3: Otomański --------------------------------------------- */ html[data-theme="3"] { --page-bg: #fdf6e3; --page-text: #3a1212; --menu-bg: #4a1010; --menu-text: #f5e6c4; --menu-category: #d4a574; --menu-desc: #d8b48a; --menu-divider: rgba(212,165,116,0.3); --accent: #8b1414; --pill-bg: rgba(212,165,116,0.12); --pill-border: #d4a574; --pill-color: #f5e6c4; --button-color: #8b1414; --button-border: #8b1414; --button-hover-color: #fdf6e3; --button-hover-bg: #8b1414; --button-hover-border: #8b1414; --top-overlay-color: rgba(74,16,16,.6); --top-title-color: #f5e6c4; --heading-font: 'Vollkorn', serif; --body-font: 'Merriweather', serif; --section-title-color: #8b1414; --pill-radius: 999px; } /* ---- Theme 4: Marmur i miedź ---------------------------------------- */ html[data-theme="4"] { --page-bg: #f7f3ed; --page-text: #2c2520; --menu-bg: #2a2520; --menu-text: #f0e5d8; --menu-category: #b87333; --menu-desc: #c9a888; --menu-divider: rgba(184,115,51,0.25); --accent: #b87333; --pill-bg: rgba(184,115,51,0.1); --pill-border: #b87333; --pill-color: #f0e5d8; --button-color: #b87333; --button-border: #b87333; --button-hover-color: #fff; --button-hover-bg: #b87333; --button-hover-border: #b87333; --top-overlay-color: rgba(42,37,32,.7); --top-title-color: #f0e5d8; --top-title-letter-spacing: 8px; --heading-font: 'Cinzel', serif; --body-font: 'Vollkorn', serif; --heading-letter-spacing: 3px; --section-title-color: #b87333; --button-radius: 0; --pill-radius: 0; --img-radius: 0; } /* ---- Theme 5: Toskania ---------------------------------------------- */ html[data-theme="5"] { --page-bg: #f5e9d4; --page-text: #4a2818; --menu-bg: #6b3410; --menu-text: #f5e9d4; --menu-category: #a8c074; --menu-desc: #d8c8a8; --menu-divider: rgba(168,192,116,0.3); --accent: #c0633d; --pill-bg: rgba(168,192,116,0.12); --pill-border: #a8c074; --pill-color: #f5e9d4; --button-color: #c0633d; --button-border: #c0633d; --button-hover-color: #f5e9d4; --button-hover-bg: #c0633d; --button-hover-border: #c0633d; --top-overlay-color: rgba(107,52,16,.55); --top-title-color: #f5e9d4; --heading-font: 'Bree Serif', serif; --body-font: 'Vollkorn', serif; --section-title-color: #6b3410; --button-radius: 4px; --pill-radius: 4px; } /* ---- Theme 6: Bistro paryskie --------------------------------------- */ html[data-theme="6"] { --page-bg: #f4ecd6; --page-text: #1a1a1a; --menu-bg: #0a0a0a; --menu-text: #f4ecd6; --menu-category: #c8a661; --menu-desc: #c8b58a; --menu-divider: rgba(200,166,97,0.3); --accent: #c8a661; --pill-bg: transparent; --pill-border: #c8a661; --pill-color: #f4ecd6; --button-color: #1a1a1a; --button-border: #1a1a1a; --button-hover-color: #f4ecd6; --button-hover-bg: #1a1a1a; --button-hover-border: #c8a661; --top-overlay-color: rgba(10,10,10,.7); --top-title-color: #c8a661; --top-title-letter-spacing: 10px; --heading-font: 'Cinzel', serif; --body-font: 'Merriweather', serif; --heading-letter-spacing: 6px; --section-title-color: #1a1a1a; --button-radius: 0; --pill-radius: 0; --img-radius: 0; --body-text-transform: uppercase; } /* ---- Theme 7: Las dębowy -------------------------------------------- */ html[data-theme="7"] { --page-bg: #f0ead2; --page-text: #2e2418; --menu-bg: #1d3a1f; --menu-text: #f0ead2; --menu-category: #c4a069; --menu-desc: #c8c89a; --menu-divider: rgba(196,160,105,0.3); --accent: #4a6741; --pill-bg: rgba(196,160,105,0.12); --pill-border: #c4a069; --pill-color: #f0ead2; --button-color: #4a6741; --button-border: #4a6741; --button-hover-color: #f0ead2; --button-hover-bg: #4a6741; --button-hover-border: #4a6741; --top-overlay-color: rgba(29,58,31,.65); --top-title-color: #f0ead2; --heading-font: 'Vollkorn', serif; --body-font: 'Vollkorn', serif; --section-title-color: #1d3a1f; --button-radius: 6px; --pill-radius: 6px; } /* ---- Theme 8: Vintage retro ----------------------------------------- */ html[data-theme="8"] { --page-bg: #f5ecd7; --page-text: #4a2b18; --menu-bg: #3d2817; --menu-text: #f5ecd7; --menu-category: #d4a02e; --menu-desc: #d8c084; --menu-divider: rgba(212,160,46,0.3); --accent: #c8961e; --pill-bg: rgba(212,160,46,0.12); --pill-border: #d4a02e; --pill-color: #f5ecd7; --button-color: #c8961e; --button-border: #c8961e; --button-hover-color: #3d2817; --button-hover-bg: #d4a02e; --button-hover-border: #d4a02e; --top-overlay-color: rgba(61,40,23,.6); --top-title-color: #d4a02e; --heading-font: 'Bree Serif', serif; --body-font: 'Vollkorn', serif; --section-title-color: #3d2817; --button-radius: 999px; --pill-radius: 999px; } /* ---- Theme 9: Nocny szafir ------------------------------------------ */ html[data-theme="9"] { --page-bg: #f5f3ee; --page-text: #1c2840; --menu-bg: #0e1c3c; --menu-text: #f0e8d1; --menu-category: #e6c068; --menu-desc: #c8c8a8; --menu-divider: rgba(230,192,104,0.25); --accent: #c8a661; --pill-bg: rgba(230,192,104,0.1); --pill-border: #e6c068; --pill-color: #f0e8d1; --button-color: #0e1c3c; --button-border: #c8a661; --button-hover-color: #f5f3ee; --button-hover-bg: #0e1c3c; --button-hover-border: #0e1c3c; --top-overlay-color: rgba(14,28,60,.7); --top-title-color: #e6c068; --top-title-letter-spacing: 5px; --heading-font: 'Cinzel', serif; --body-font: 'Vollkorn', serif; --heading-letter-spacing: 4px; --section-title-color: #0e1c3c; } /* ---- Theme 10: Pustynia --------------------------------------------- */ html[data-theme="10"] { --page-bg: #f4e4c4; --page-text: #4a2d10; --menu-bg: #6b4218; --menu-text: #f4e4c4; --menu-category: #d49533; --menu-desc: #e8c878; --menu-divider: rgba(212,149,51,0.3); --accent: #d49533; --pill-bg: rgba(212,149,51,0.12); --pill-border: #d49533; --pill-color: #f4e4c4; --button-color: #8a4818; --button-border: #8a4818; --button-hover-color: #f4e4c4; --button-hover-bg: #8a4818; --button-hover-border: #8a4818; --top-overlay-color: rgba(107,66,24,.55); --top-title-color: #f4e4c4; --heading-font: 'Bree Serif', serif; --body-font: 'Vollkorn', serif; --section-title-color: #6b4218; --pill-radius: 999px; --button-radius: 999px; } /* ---- Theme 11: Czerwone wino ---------------------------------------- */ html[data-theme="11"] { --page-bg: #f0e5d2; --page-text: #3a1410; --menu-bg: #2a0810; --menu-text: #f0e5d2; --menu-category: #c89048; --menu-desc: #d8b88a; --menu-divider: rgba(200,144,72,0.25); --accent: #7a1822; --pill-bg: rgba(200,144,72,0.12); --pill-border: #c89048; --pill-color: #f0e5d2; --button-color: #7a1822; --button-border: #7a1822; --button-hover-color: #f0e5d2; --button-hover-bg: #7a1822; --button-hover-border: #7a1822; --top-overlay-color: rgba(42,8,16,.7); --top-title-color: #c89048; --top-title-letter-spacing: 4px; --heading-font: 'Vollkorn', serif; --body-font: 'Vollkorn', serif; --section-title-color: #7a1822; --button-radius: 4px; --pill-radius: 4px; } /* ---- Theme 12: Mięta i miedź ---------------------------------------- */ html[data-theme="12"] { --page-bg: #f1faf3; --page-text: #1f3a2a; --menu-bg: #1c3a30; --menu-text: #d8f0e0; --menu-category: #d4865a; --menu-desc: #b8d8c4; --menu-divider: rgba(212,134,90,0.3); --accent: #4a8a6e; --pill-bg: rgba(212,134,90,0.12); --pill-border: #d4865a; --pill-color: #d8f0e0; --button-color: #4a8a6e; --button-border: #4a8a6e; --button-hover-color: #f1faf3; --button-hover-bg: #4a8a6e; --button-hover-border: #4a8a6e; --top-overlay-color: rgba(28,58,48,.65); --top-title-color: #d8f0e0; --heading-font: 'Cinzel', serif; --body-font: 'Vollkorn', serif; --section-title-color: #1c3a30; --heading-letter-spacing: 3px; } /* ---- Theme 13: Anatolijski ------------------------------------------ */ html[data-theme="13"] { --page-bg: #f5ecd6; --page-text: #14323a; --menu-bg: #0c2a32; --menu-text: #f5ecd6; --menu-category: #e8a533; --menu-desc: #d8c898; --menu-divider: rgba(232,165,51,0.3); --accent: #1f5560; --pill-bg: rgba(232,165,51,0.12); --pill-border: #e8a533; --pill-color: #f5ecd6; --button-color: #1f5560; --button-border: #1f5560; --button-hover-color: #f5ecd6; --button-hover-bg: #1f5560; --button-hover-border: #e8a533; --top-overlay-color: rgba(12,42,50,.7); --top-title-color: #e8a533; --top-title-letter-spacing: 6px; --heading-font: 'Vollkorn', serif; --body-font: 'Vollkorn', serif; --section-title-color: #0c2a32; --button-radius: 0; --pill-radius: 0; } /* ---- Theme 14: Czarno-biały minimal --------------------------------- */ html[data-theme="14"] { --page-bg: #ffffff; --page-text: #000000; --menu-bg: #000000; --menu-text: #ffffff; --menu-category: #ffffff; --menu-desc: #b0b0b0; --menu-divider: rgba(255,255,255,0.18); --accent: #000000; --pill-bg: transparent; --pill-border: #ffffff; --pill-color: #ffffff; --button-color: #000000; --button-border: #000000; --button-hover-color: #ffffff; --button-hover-bg: #000000; --button-hover-border: #000000; --top-overlay-color: rgba(0,0,0,.78); --top-title-color: #ffffff; --top-title-letter-spacing: 12px; --heading-font: 'Barlow', system-ui, sans-serif; --body-font: 'Barlow', system-ui, sans-serif; --heading-letter-spacing: 8px; --section-title-color: #000000; --body-text-transform: uppercase; --button-radius: 0; --pill-radius: 0; --img-radius: 0; } /* ---- Theme 15: Granat i mosiądz ------------------------------------- */ html[data-theme="15"] { --page-bg: #f1eee5; --page-text: #1a2030; --menu-bg: #14213a; --menu-text: #f1eee5; --menu-category: #c8a060; --menu-desc: #c8c0a0; --menu-divider: rgba(200,160,96,0.25); --accent: #b08a3e; --pill-bg: rgba(200,160,96,0.1); --pill-border: #c8a060; --pill-color: #f1eee5; --button-color: #14213a; --button-border: #b08a3e; --button-hover-color: #f1eee5; --button-hover-bg: #14213a; --button-hover-border: #14213a; --top-overlay-color: rgba(20,33,58,.7); --top-title-color: #c8a060; --top-title-letter-spacing: 5px; --heading-font: 'Cinzel', serif; --body-font: 'Merriweather', serif; --heading-letter-spacing: 4px; --section-title-color: #14213a; --button-radius: 2px; --pill-radius: 2px; } /* ---- Theme 16: Lawenda i krem --------------------------------------- */ html[data-theme="16"] { --page-bg: #f7f0ec; --page-text: #3a2840; --menu-bg: #3d2a4a; --menu-text: #f5edd6; --menu-category: #d4a85f; --menu-desc: #d8c4d0; --menu-divider: rgba(212,168,95,0.25); --accent: #6e4878; --pill-bg: rgba(212,168,95,0.1); --pill-border: #d4a85f; --pill-color: #f5edd6; --button-color: #6e4878; --button-border: #6e4878; --button-hover-color: #f7f0ec; --button-hover-bg: #6e4878; --button-hover-border: #d4a85f; --top-overlay-color: rgba(61,42,74,.65); --top-title-color: #f5edd6; --heading-font: 'Vollkorn', serif; --body-font: 'Vollkorn', serif; --section-title-color: #3d2a4a; --button-radius: 999px; --pill-radius: 999px; } /* ---- Theme 17: Czekolada -------------------------------------------- */ html[data-theme="17"] { --page-bg: #f4e8d4; --page-text: #2e1a0c; --menu-bg: #2c1810; --menu-text: #f4e8d4; --menu-category: #c89048; --menu-desc: #d8b88a; --menu-divider: rgba(200,144,72,0.3); --accent: #8a4818; --pill-bg: rgba(200,144,72,0.12); --pill-border: #c89048; --pill-color: #f4e8d4; --button-color: #8a4818; --button-border: #8a4818; --button-hover-color: #f4e8d4; --button-hover-bg: #8a4818; --button-hover-border: #8a4818; --top-overlay-color: rgba(44,24,16,.65); --top-title-color: #c89048; --heading-font: 'Bree Serif', serif; --body-font: 'Vollkorn', serif; --section-title-color: #2c1810; --button-radius: 8px; --pill-radius: 8px; } /* ---- Theme 18: Karbon i neon ---------------------------------------- */ html[data-theme="18"] { --page-bg: #0a0a0a; --page-text: #f0f0f0; --menu-bg: #000000; --menu-text: #f0f0f0; --menu-category: #e8ff5e; --menu-desc: #ffd0e8; --menu-divider: rgba(255,46,136,0.4); --accent: #ff2e88; --pill-bg: rgba(232,255,94,0.06); --pill-border: #e8ff5e; --pill-color: #e8ff5e; --button-color: #e8ff5e; --button-border: #ff2e88; --button-hover-color: #0a0a0a; --button-hover-bg: #e8ff5e; --button-hover-border: #e8ff5e; --top-overlay-color: rgba(0,0,0,.78); --top-title-color: #e8ff5e; --top-title-letter-spacing: 6px; --heading-font: 'Barlow', system-ui, sans-serif; --body-font: 'Barlow', system-ui, sans-serif; --heading-letter-spacing: 4px; --section-title-color: #ff2e88; --button-radius: 0; --pill-radius: 0; --footer-color: #f0f0f0; } html[data-theme="18"] .price-pill { box-shadow: 0 0 6px rgba(232,255,94,.35), inset 0 0 4px rgba(232,255,94,.15); } /* ---- Theme 19: Pergamin --------------------------------------------- */ html[data-theme="19"] { --page-bg: #f0e5c4; --page-text: #3a2810; --menu-bg: #4a3520; --menu-text: #f5ead0; --menu-category: #c89048; --menu-desc: #d8c8a0; --menu-divider: rgba(200,144,72,0.3); --accent: #8a5818; --pill-bg: rgba(245,234,208,0.06); --pill-border: #c89048; --pill-color: #f5ead0; --button-color: #8a5818; --button-border: #8a5818; --button-hover-color: #f0e5c4; --button-hover-bg: #8a5818; --button-hover-border: #8a5818; --top-overlay-color: rgba(74,53,32,.62); --top-title-color: #f5ead0; --heading-font: 'Vollkorn', serif; --body-font: 'Vollkorn', serif; --section-title-color: #4a3520; --button-radius: 2px; --pill-radius: 2px; } /* ---- Theme 20: Atelier szefa ---------------------------------------- */ html[data-theme="20"] { --page-bg: #f0ece5; --page-text: #1a1c20; --menu-bg: #1a1c20; --menu-text: #f0e2c8; --menu-category: #f08840; --menu-desc: #d8c8a8; --menu-divider: rgba(240,136,64,0.3); --accent: #d46a28; --pill-bg: rgba(240,136,64,0.1); --pill-border: #f08840; --pill-color: #f0e2c8; --button-color: #d46a28; --button-border: #d46a28; --button-hover-color: #f0ece5; --button-hover-bg: #d46a28; --button-hover-border: #d46a28; --top-overlay-color: rgba(26,28,32,.7); --top-title-color: #f08840; --heading-font: 'Acme', sans-serif; --body-font: 'Barlow', sans-serif; --section-title-color: #1a1c20; --button-radius: 4px; --pill-radius: 4px; } /* ---- Theme 21: Cytrusy ---------------------------------------------- */ html[data-theme="21"] { --page-bg: #fffce8; --page-text: #2a3a1c; --menu-bg: #2c3a10; --menu-text: #fef5b0; --menu-category: #f5d33a; --menu-desc: #d8d890; --menu-divider: rgba(245,211,58,0.3); --accent: #8a9c2c; --pill-bg: rgba(245,211,58,0.12); --pill-border: #f5d33a; --pill-color: #fef5b0; --button-color: #8a9c2c; --button-border: #8a9c2c; --button-hover-color: #fffce8; --button-hover-bg: #8a9c2c; --button-hover-border: #8a9c2c; --top-overlay-color: rgba(44,58,16,.55); --top-title-color: #f5d33a; --heading-font: 'Bree Serif', serif; --body-font: 'Vollkorn', serif; --section-title-color: #2c3a10; --button-radius: 999px; --pill-radius: 999px; } /* ---- Theme 22: Marmurowy salon (jasny) ------------------------------ */ html[data-theme="22"] { --page-bg: #f4f1ec; --page-text: #2a2520; --menu-bg: #ece7df; --menu-text: #2a2520; --menu-category: #a8852a; --menu-desc: #6a5848; --menu-divider: rgba(168,133,42,0.3); --accent: #a8852a; --pill-bg: rgba(168,133,42,0.08); --pill-border: #a8852a; --pill-color: #2a2520; --button-color: #2a2520; --button-border: #a8852a; --button-hover-color: #f4f1ec; --button-hover-bg: #2a2520; --button-hover-border: #2a2520; --top-overlay-color: rgba(42,37,32,.55); --top-title-color: #ece7df; --top-title-letter-spacing: 8px; --heading-font: 'Cinzel', serif; --body-font: 'Merriweather', serif; --heading-letter-spacing: 4px; --section-title-color: #2a2520; --button-radius: 0; --pill-radius: 0; } /* ---- Theme 23: Industrialny ----------------------------------------- */ html[data-theme="23"] { --page-bg: #d8d4ce; --page-text: #1a1c1e; --menu-bg: #2a2e30; --menu-text: #e8e4dc; --menu-category: #e8702a; --menu-desc: #b8b4ac; --menu-divider: rgba(232,112,42,0.3); --accent: #c45a18; --pill-bg: rgba(232,112,42,0.08); --pill-border: #e8702a; --pill-color: #e8e4dc; --button-color: #1a1c1e; --button-border: #c45a18; --button-hover-color: #d8d4ce; --button-hover-bg: #c45a18; --button-hover-border: #c45a18; --top-overlay-color: rgba(42,46,48,.7); --top-title-color: #e8702a; --top-title-letter-spacing: 4px; --heading-font: 'Acme', sans-serif; --body-font: 'Barlow', sans-serif; --section-title-color: #1a1c1e; --button-radius: 0; --pill-radius: 0; --img-radius: 0; } /* ---- Theme 24: Odeon art deco --------------------------------------- */ html[data-theme="24"] { --page-bg: #0e0e0e; --page-text: #ecd980; --menu-bg: #000000; --menu-text: #ecd980; --menu-category: #1a8a5e; --menu-desc: #c8b870; --menu-divider: rgba(212,175,55,0.3); --accent: #d4af37; --pill-bg: rgba(26,138,94,0.08); --pill-border: #1a8a5e; --pill-color: #ecd980; --button-color: #d4af37; --button-border: #d4af37; --button-hover-color: #0e0e0e; --button-hover-bg: #d4af37; --button-hover-border: #d4af37; --top-overlay-color: rgba(0,0,0,.8); --top-title-color: #d4af37; --top-title-letter-spacing: 14px; --heading-font: 'Cinzel', serif; --body-font: 'Cinzel', serif; --heading-letter-spacing: 8px; --section-title-color: #d4af37; --footer-color: #ecd980; --pill-radius: 0; --button-radius: 0; } /* ---- Theme 25: Bohemian --------------------------------------------- */ html[data-theme="25"] { --page-bg: #f5ece4; --page-text: #4a3028; --menu-bg: #6e3a3a; --menu-text: #fdf4ec; --menu-category: #c8d8a8; --menu-desc: #f0d8c8; --menu-divider: rgba(200,216,168,0.3); --accent: #a86060; --pill-bg: rgba(200,216,168,0.12); --pill-border: #c8d8a8; --pill-color: #fdf4ec; --button-color: #a86060; --button-border: #a86060; --button-hover-color: #f5ece4; --button-hover-bg: #a86060; --button-hover-border: #a86060; --top-overlay-color: rgba(110,58,58,.55); --top-title-color: #fdf4ec; --top-title-font: 'Kaushan Script', cursive; --top-title-letter-spacing: 1px; --heading-font: 'Kaushan Script', cursive; --body-font: 'Vollkorn', serif; --section-title-color: #6e3a3a; --button-radius: 999px; --pill-radius: 999px; --heading-text-transform: none; } /* ---- Theme 26: Boże Narodzenie -------------------------------------- */ html[data-theme="26"] { --page-bg: #fbf5ee; --page-text: #1f2a22; --menu-bg: #0e2a1c; --menu-text: #f7ead0; --menu-category: #d4af37; --menu-desc: #e8d8a8; --menu-divider: rgba(212,175,55,0.3); --accent: #b3242b; --pill-bg: rgba(212,175,55,0.1); --pill-border: #d4af37; --pill-color: #f7ead0; --button-color: #b3242b; --button-border: #d4af37; --button-hover-color: #fbf5ee; --button-hover-bg: #b3242b; --button-hover-border: #b3242b; --top-overlay-color: rgba(14,42,28,.7); --top-title-color: #d4af37; --top-title-letter-spacing: 4px; --heading-font: 'Cinzel', serif; --body-font: 'Vollkorn', serif; --section-title-color: #b3242b; --button-radius: 8px; --pill-radius: 8px; } /* ---- Theme 27: Wielkanoc -------------------------------------------- */ html[data-theme="27"] { --page-bg: #fdf8ee; --page-text: #4a3a2a; --menu-bg: #f3e8d4; --menu-text: #4a3a2a; --menu-category: #d68aa6; --menu-desc: #8a6a52; --menu-divider: rgba(214,138,166,0.35); --accent: #c5e0a4; --pill-bg: rgba(197,224,164,0.18); --pill-border: #c5e0a4; --pill-color: #4a3a2a; --button-color: #d68aa6; --button-border: #d68aa6; --button-hover-color: #fdf8ee; --button-hover-bg: #d68aa6; --button-hover-border: #d68aa6; --top-overlay-color: rgba(124,68,90,.6); --top-title-color: #ffffff; --heading-font: 'Bree Serif', serif; --body-font: 'Vollkorn', serif; --section-title-color: #c08a52; --button-radius: 999px; --pill-radius: 999px; } /* ---- Theme 28: Walentynki ------------------------------------------- */ html[data-theme="28"] { --page-bg: #fff0f3; --page-text: #4a1424; --menu-bg: #2a0814; --menu-text: #ffe3ea; --menu-category: #ff6b8a; --menu-desc: #f0bcc8; --menu-divider: rgba(255,107,138,0.3); --accent: #d8264f; --pill-bg: rgba(255,107,138,0.14); --pill-border: #ff6b8a; --pill-color: #ffe3ea; --button-color: #d8264f; --button-border: #d8264f; --button-hover-color: #fff0f3; --button-hover-bg: #d8264f; --button-hover-border: #d8264f; --top-overlay-color: rgba(42,8,20,.65); --top-title-color: #ff6b8a; --top-title-letter-spacing: 3px; --heading-font: 'Kaushan Script', cursive; --body-font: 'Vollkorn', serif; --section-title-color: #d8264f; --button-radius: 999px; --pill-radius: 999px; --heading-text-transform: none; } /* ---- Theme 29: Halloween -------------------------------------------- */ html[data-theme="29"] { --page-bg: #14101a; --page-text: #f0d4a8; --menu-bg: #0a0712; --menu-text: #f5d088; --menu-category: #ff7a18; --menu-desc: #c8a070; --menu-divider: rgba(255,122,24,0.35); --accent: #ff7a18; --pill-bg: rgba(255,122,24,0.1); --pill-border: #ff7a18; --pill-color: #f5d088; --button-color: #ff7a18; --button-border: #ff7a18; --button-hover-color: #0a0712; --button-hover-bg: #ff7a18; --button-hover-border: #ff7a18; --top-overlay-color: rgba(10,7,18,.82); --top-title-color: #ff7a18; --top-title-letter-spacing: 6px; --heading-font: 'Cabin Sketch', cursive; --body-font: 'Barlow', sans-serif; --heading-letter-spacing: 4px; --section-title-color: #ff7a18; --button-radius: 0; --pill-radius: 0; --footer-color: #f0d4a8; } /* ---- Theme 30: Sylwester / Nowy Rok --------------------------------- */ html[data-theme="30"] { --page-bg: #0a0a14; --page-text: #f0e8d0; --menu-bg: #050510; --menu-text: #f4ecd0; --menu-category: #f5d76e; --menu-desc: #d8c8a8; --menu-divider: rgba(245,215,110,0.3); --accent: #f5d76e; --pill-bg: rgba(245,215,110,0.08); --pill-border: #f5d76e; --pill-color: #f4ecd0; --button-color: #f5d76e; --button-border: #f5d76e; --button-hover-color: #050510; --button-hover-bg: #f5d76e; --button-hover-border: #f5d76e; --top-overlay-color: rgba(5,5,16,.82); --top-title-color: #f5d76e; --top-title-letter-spacing: 12px; --heading-font: 'Cinzel', serif; --body-font: 'Barlow', sans-serif; --heading-letter-spacing: 6px; --section-title-color: #f5d76e; --button-radius: 0; --pill-radius: 0; --footer-color: #f0e8d0; } /* ---- Theme 31: Lato (Summer) ---------------------------------------- */ html[data-theme="31"] { --page-bg: #fff8e8; --page-text: #1f3a4a; --menu-bg: #0e7a8a; --menu-text: #fff5d6; --menu-category: #ffd24a; --menu-desc: #ffe9a8; --menu-divider: rgba(255,210,74,0.35); --accent: #ff7a4a; --pill-bg: rgba(255,210,74,0.14); --pill-border: #ffd24a; --pill-color: #fff5d6; --button-color: #ff7a4a; --button-border: #ff7a4a; --button-hover-color: #fff8e8; --button-hover-bg: #ff7a4a; --button-hover-border: #ff7a4a; --top-overlay-color: rgba(14,122,138,.55); --top-title-color: #ffd24a; --top-title-letter-spacing: 3px; --heading-font: 'Acme', sans-serif; --body-font: 'Barlow', sans-serif; --section-title-color: #0e7a8a; --button-radius: 999px; --pill-radius: 999px; } /* ---- Theme 32: Wakacje (Beach) -------------------------------------- */ html[data-theme="32"] { --page-bg: #fef3df; --page-text: #2a3a4a; --menu-bg: #1ea0c4; --menu-text: #fef6e0; --menu-category: #ffe09a; --menu-desc: #d8efff; --menu-divider: rgba(255,224,154,0.4); --accent: #ff9b6a; --pill-bg: rgba(255,224,154,0.16); --pill-border: #ffe09a; --pill-color: #fef6e0; --button-color: #ff9b6a; --button-border: #ff9b6a; --button-hover-color: #fef3df; --button-hover-bg: #ff9b6a; --button-hover-border: #ff9b6a; --top-overlay-color: rgba(30,160,196,.45); --top-title-color: #fef6e0; --top-title-letter-spacing: 4px; --heading-font: 'Acme', sans-serif; --body-font: 'Barlow', sans-serif; --section-title-color: #1ea0c4; --button-radius: 999px; --pill-radius: 999px; } /* ---- Theme 33: Jesień (Autumn) -------------------------------------- */ html[data-theme="33"] { --page-bg: #f6e9d0; --page-text: #3a1f10; --menu-bg: #4a1c0c; --menu-text: #f6e0c0; --menu-category: #e6883a; --menu-desc: #d8b88a; --menu-divider: rgba(230,136,58,0.32); --accent: #b3422a; --pill-bg: rgba(230,136,58,0.12); --pill-border: #e6883a; --pill-color: #f6e0c0; --button-color: #b3422a; --button-border: #b3422a; --button-hover-color: #f6e9d0; --button-hover-bg: #b3422a; --button-hover-border: #b3422a; --top-overlay-color: rgba(74,28,12,.7); --top-title-color: #e6883a; --top-title-letter-spacing: 4px; --heading-font: 'Vollkorn', serif; --body-font: 'Vollkorn', serif; --section-title-color: #4a1c0c; --button-radius: 6px; --pill-radius: 6px; } /* ---- Theme 34: Zima (Winter) ---------------------------------------- */ html[data-theme="34"] { --page-bg: #eef4f9; --page-text: #1a2a44; --menu-bg: #14233f; --menu-text: #e8f1f9; --menu-category: #9ec8e8; --menu-desc: #c4d8ea; --menu-divider: rgba(158,200,232,0.3); --accent: #4a90c8; --pill-bg: rgba(158,200,232,0.1); --pill-border: #9ec8e8; --pill-color: #e8f1f9; --button-color: #4a90c8; --button-border: #4a90c8; --button-hover-color: #eef4f9; --button-hover-bg: #4a90c8; --button-hover-border: #4a90c8; --top-overlay-color: rgba(20,35,63,.65); --top-title-color: #ffffff; --top-title-letter-spacing: 8px; --heading-font: 'Cinzel', serif; --body-font: 'Barlow', sans-serif; --heading-letter-spacing: 4px; --section-title-color: #14233f; --button-radius: 4px; --pill-radius: 4px; } /* ---- Theme 35: Wiosna (Spring) -------------------------------------- */ html[data-theme="35"] { --page-bg: #f4fbed; --page-text: #1f3a1a; --menu-bg: #2a4a28; --menu-text: #f0fae0; --menu-category: #f5c0d8; --menu-desc: #cce8a8; --menu-divider: rgba(245,192,216,0.3); --accent: #87b04a; --pill-bg: rgba(245,192,216,0.14); --pill-border: #f5c0d8; --pill-color: #f0fae0; --button-color: #87b04a; --button-border: #87b04a; --button-hover-color: #f4fbed; --button-hover-bg: #87b04a; --button-hover-border: #87b04a; --top-overlay-color: rgba(42,74,40,.5); --top-title-color: #f5c0d8; --top-title-letter-spacing: 2px; --heading-font: 'Kalam', cursive; --body-font: 'Vollkorn', serif; --section-title-color: #2a4a28; --button-radius: 999px; --pill-radius: 999px; --heading-text-transform: none; } /* ---- Theme 36: Powrót do szkoły ------------------------------------- */ html[data-theme="36"] { --page-bg: #f5efde; --page-text: #1a2a4a; --menu-bg: #14264a; --menu-text: #f5efde; --menu-category: #f5c244; --menu-desc: #d8d0a8; --menu-divider: rgba(245,194,68,0.3); --accent: #d83a3a; --pill-bg: rgba(245,194,68,0.1); --pill-border: #f5c244; --pill-color: #f5efde; --button-color: #d83a3a; --button-border: #d83a3a; --button-hover-color: #f5efde; --button-hover-bg: #d83a3a; --button-hover-border: #d83a3a; --top-overlay-color: rgba(20,38,74,.7); --top-title-color: #f5c244; --top-title-letter-spacing: 4px; --heading-font: 'Acme', sans-serif; --body-font: 'Barlow', sans-serif; --section-title-color: #14264a; --button-radius: 4px; --pill-radius: 4px; } /* ---- Theme 37: Matura (formalna) ------------------------------------ */ html[data-theme="37"] { --page-bg: #ffffff; --page-text: #1a1a1a; --menu-bg: #14213a; --menu-text: #f7f5f0; --menu-category: #c0282d; --menu-desc: #c4cbd6; --menu-divider: rgba(192,40,45,0.3); --accent: #c0282d; --pill-bg: rgba(255,255,255,0.06); --pill-border: #f7f5f0; --pill-color: #f7f5f0; --button-color: #14213a; --button-border: #14213a; --button-hover-color: #ffffff; --button-hover-bg: #14213a; --button-hover-border: #14213a; --top-overlay-color: rgba(20,33,58,.78); --top-title-color: #ffffff; --top-title-letter-spacing: 14px; --heading-font: 'Cinzel', serif; --body-font: 'Merriweather', serif; --heading-letter-spacing: 6px; --section-title-color: #14213a; --button-radius: 0; --pill-radius: 0; } /* ---- Theme 38: Studniówka ------------------------------------------- */ html[data-theme="38"] { --page-bg: #f6f1ee; --page-text: #2a2030; --menu-bg: #1a1424; --menu-text: #f0e6d8; --menu-category: #c8a4d4; --menu-desc: #d8c8d8; --menu-divider: rgba(200,164,212,0.3); --accent: #a07ac0; --pill-bg: rgba(200,164,212,0.1); --pill-border: #c8a4d4; --pill-color: #f0e6d8; --button-color: #a07ac0; --button-border: #c8a4d4; --button-hover-color: #f6f1ee; --button-hover-bg: #a07ac0; --button-hover-border: #a07ac0; --top-overlay-color: rgba(26,20,36,.72); --top-title-color: #c8a4d4; --top-title-letter-spacing: 6px; --heading-font: 'Cinzel', serif; --body-font: 'Vollkorn', serif; --heading-letter-spacing: 4px; --section-title-color: #1a1424; --button-radius: 999px; --pill-radius: 999px; } /* ---- Theme 39: Dzień Kobiet ----------------------------------------- */ html[data-theme="39"] { --page-bg: #fff4f7; --page-text: #4a1a2a; --menu-bg: #4a1c3a; --menu-text: #ffe7ee; --menu-category: #ffb3c8; --menu-desc: #f0c8d8; --menu-divider: rgba(255,179,200,0.3); --accent: #e54b86; --pill-bg: rgba(255,179,200,0.14); --pill-border: #ffb3c8; --pill-color: #ffe7ee; --button-color: #e54b86; --button-border: #e54b86; --button-hover-color: #fff4f7; --button-hover-bg: #e54b86; --button-hover-border: #e54b86; --top-overlay-color: rgba(74,28,58,.55); --top-title-color: #ffb3c8; --top-title-letter-spacing: 3px; --heading-font: 'Kaushan Script', cursive; --body-font: 'Vollkorn', serif; --section-title-color: #e54b86; --button-radius: 999px; --pill-radius: 999px; --heading-text-transform: none; } /* ---- Theme 40: Mikołajki -------------------------------------------- */ html[data-theme="40"] { --page-bg: #ffffff; --page-text: #2a0a0a; --menu-bg: #b3242b; --menu-text: #ffffff; --menu-category: #ffffff; --menu-desc: #ffd4d4; --menu-divider: rgba(255,255,255,0.3); --accent: #b3242b; --pill-bg: rgba(255,255,255,0.08); --pill-border: #ffffff; --pill-color: #ffffff; --button-color: #b3242b; --button-border: #b3242b; --button-hover-color: #ffffff; --button-hover-bg: #b3242b; --button-hover-border: #b3242b; --top-overlay-color: rgba(179,36,43,.68); --top-title-color: #ffffff; --top-title-letter-spacing: 4px; --heading-font: 'Bree Serif', serif; --body-font: 'Vollkorn', serif; --section-title-color: #b3242b; --button-radius: 999px; --pill-radius: 999px; } /* ---- Theme 41: Andrzejki -------------------------------------------- */ html[data-theme="41"] { --page-bg: #1a0e2a; --page-text: #f0e0c0; --menu-bg: #110820; --menu-text: #f0d8a0; --menu-category: #d4af37; --menu-desc: #c8b8a0; --menu-divider: rgba(212,175,55,0.3); --accent: #7a3aa0; --pill-bg: rgba(212,175,55,0.08); --pill-border: #d4af37; --pill-color: #f0d8a0; --button-color: #d4af37; --button-border: #d4af37; --button-hover-color: #110820; --button-hover-bg: #d4af37; --button-hover-border: #d4af37; --top-overlay-color: rgba(17,8,32,.78); --top-title-color: #d4af37; --top-title-letter-spacing: 8px; --heading-font: 'Cinzel', serif; --body-font: 'Vollkorn', serif; --heading-letter-spacing: 4px; --section-title-color: #d4af37; --button-radius: 0; --pill-radius: 0; --footer-color: #f0e0c0; } /* ---- Theme 42: Tłusty czwartek -------------------------------------- */ html[data-theme="42"] { --page-bg: #fff5e6; --page-text: #4a2818; --menu-bg: #6b3a18; --menu-text: #ffe8c8; --menu-category: #f5b85a; --menu-desc: #f0d8a8; --menu-divider: rgba(245,184,90,0.32); --accent: #d44a78; --pill-bg: rgba(245,184,90,0.14); --pill-border: #f5b85a; --pill-color: #ffe8c8; --button-color: #d44a78; --button-border: #d44a78; --button-hover-color: #fff5e6; --button-hover-bg: #d44a78; --button-hover-border: #d44a78; --top-overlay-color: rgba(107,58,24,.55); --top-title-color: #f5b85a; --top-title-letter-spacing: 2px; --heading-font: 'Kaushan Script', cursive; --body-font: 'Vollkorn', serif; --section-title-color: #6b3a18; --button-radius: 999px; --pill-radius: 999px; --heading-text-transform: none; } /* ---- Theme 43: Mundial / boisko ------------------------------------- */ html[data-theme="43"] { --page-bg: #f4f8f0; --page-text: #0a2a14; --menu-bg: #14532d; --menu-text: #f4f8f0; --menu-category: #ffffff; --menu-desc: #c8e0d0; --menu-divider: rgba(255,255,255,0.25); --accent: #d40028; --pill-bg: rgba(255,255,255,0.08); --pill-border: #ffffff; --pill-color: #f4f8f0; --button-color: #d40028; --button-border: #d40028; --button-hover-color: #ffffff; --button-hover-bg: #d40028; --button-hover-border: #d40028; --top-overlay-color: rgba(20,83,45,.65); --top-title-color: #ffffff; --top-title-letter-spacing: 6px; --heading-font: 'Acme', sans-serif; --body-font: 'Barlow', sans-serif; --heading-letter-spacing: 3px; --section-title-color: #14532d; --button-radius: 4px; --pill-radius: 4px; } /* ---- Theme 44: Brutalism -------------------------------------------- */ html[data-theme="44"] { --page-bg: #e9e6df; --page-text: #0a0a0a; --menu-bg: #1a1a1a; --menu-text: #e9e6df; --menu-category: #ffd400; --menu-desc: #c4c0b8; --menu-divider: rgba(255,212,0,0.4); --accent: #ff3b00; --pill-bg: #ffd400; --pill-border: #0a0a0a; --pill-color: #0a0a0a; --button-color: #0a0a0a; --button-border: #0a0a0a; --button-hover-color: #ffd400; --button-hover-bg: #0a0a0a; --button-hover-border: #0a0a0a; --top-overlay-color: rgba(10,10,10,.72); --top-title-color: #ffd400; --top-title-letter-spacing: 0; --heading-font: 'Acme', sans-serif; --body-font: 'Barlow', sans-serif; --heading-letter-spacing: 0; --section-title-color: #0a0a0a; --button-radius: 0; --pill-radius: 0; --img-radius: 0; } /* ---- Theme 45: Glassmorphism ---------------------------------------- */ html[data-theme="45"] { --page-bg: #eaf1fb; --page-text: #1a2a44; --menu-bg: #2a3a6a; --menu-text: #f0f4ff; --menu-category: #a4d8ff; --menu-desc: #c8d0e8; --menu-divider: rgba(164,216,255,0.25); --accent: #6a82ff; --pill-bg: rgba(255,255,255,0.12); --pill-border: rgba(255,255,255,0.45); --pill-color: #f0f4ff; --button-color: #6a82ff; --button-border: rgba(255,255,255,0.6); --button-hover-color: #ffffff; --button-hover-bg: rgba(106,130,255,0.65); --button-hover-border: rgba(255,255,255,0.85); --top-overlay-color: rgba(42,58,106,.45); --top-title-color: #ffffff; --top-title-letter-spacing: 5px; --heading-font: 'Barlow', sans-serif; --body-font: 'Barlow', sans-serif; --section-title-color: #2a3a6a; --button-radius: 18px; --pill-radius: 18px; } html[data-theme="45"] .price-pill { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } /* ---- Theme 46: Y2K -------------------------------------------------- */ html[data-theme="46"] { --page-bg: #f0e8ff; --page-text: #1a0a3a; --menu-bg: #1a0a3a; --menu-text: #f0e8ff; --menu-category: #00e0d8; --menu-desc: #ffb8e8; --menu-divider: rgba(0,224,216,0.4); --accent: #ff3ad8; --pill-bg: rgba(0,224,216,0.1); --pill-border: #00e0d8; --pill-color: #f0e8ff; --button-color: #ff3ad8; --button-border: #00e0d8; --button-hover-color: #1a0a3a; --button-hover-bg: #00e0d8; --button-hover-border: #ff3ad8; --top-overlay-color: rgba(26,10,58,.68); --top-title-color: #00e0d8; --top-title-letter-spacing: 6px; --heading-font: 'Acme', sans-serif; --body-font: 'Barlow', sans-serif; --heading-letter-spacing: 4px; --section-title-color: #ff3ad8; --button-radius: 999px; --pill-radius: 999px; } /* ---- Theme 47: Cyberpunk -------------------------------------------- */ html[data-theme="47"] { --page-bg: #050010; --page-text: #d4f0ff; --menu-bg: #04000c; --menu-text: #d4f0ff; --menu-category: #00f0ff; --menu-desc: #b8a8ff; --menu-divider: rgba(0,240,255,0.4); --accent: #ff0090; --pill-bg: rgba(0,240,255,0.08); --pill-border: #00f0ff; --pill-color: #d4f0ff; --button-color: #ff0090; --button-border: #00f0ff; --button-hover-color: #050010; --button-hover-bg: #ff0090; --button-hover-border: #ff0090; --top-overlay-color: rgba(5,0,16,.85); --top-title-color: #00f0ff; --top-title-letter-spacing: 8px; --heading-font: 'Barlow', sans-serif; --body-font: 'Barlow', sans-serif; --heading-letter-spacing: 5px; --section-title-color: #ff0090; --button-radius: 0; --pill-radius: 0; --footer-color: #d4f0ff; } html[data-theme="47"] .price-pill { box-shadow: 0 0 8px rgba(0,240,255,.5), inset 0 0 4px rgba(0,240,255,.2); } /* ---- Theme 48: Dark mocha ------------------------------------------- */ html[data-theme="48"] { --page-bg: #f3ece2; --page-text: #2a1f18; --menu-bg: #2a1c14; --menu-text: #f0e0c8; --menu-category: #d8b487; --menu-desc: #c8a888; --menu-divider: rgba(216,180,135,0.28); --accent: #8a5a3a; --pill-bg: rgba(216,180,135,0.1); --pill-border: #d8b487; --pill-color: #f0e0c8; --button-color: #8a5a3a; --button-border: #8a5a3a; --button-hover-color: #f3ece2; --button-hover-bg: #8a5a3a; --button-hover-border: #8a5a3a; --top-overlay-color: rgba(42,28,20,.7); --top-title-color: #d8b487; --top-title-letter-spacing: 6px; --heading-font: 'Barlow', sans-serif; --body-font: 'Barlow', sans-serif; --heading-letter-spacing: 3px; --section-title-color: #2a1c14; --button-radius: 12px; --pill-radius: 12px; --body-text-transform: none; } /* ---- Theme 49: Retrofuturism ---------------------------------------- */ html[data-theme="49"] { --page-bg: #1a0a2a; --page-text: #ffe0f4; --menu-bg: #2a0e3a; --menu-text: #ffe0f4; --menu-category: #ffb84a; --menu-desc: #f0a8d8; --menu-divider: rgba(255,184,74,0.35); --accent: #ff5acd; --pill-bg: rgba(255,184,74,0.12); --pill-border: #ffb84a; --pill-color: #ffe0f4; --button-color: #ff5acd; --button-border: #ffb84a; --button-hover-color: #1a0a2a; --button-hover-bg: #ffb84a; --button-hover-border: #ff5acd; --top-overlay-color: rgba(26,10,42,.75); --top-title-color: #ffb84a; --top-title-letter-spacing: 8px; --heading-font: 'Cinzel', serif; --body-font: 'Barlow', sans-serif; --heading-letter-spacing: 5px; --section-title-color: #ff5acd; --button-radius: 4px; --pill-radius: 4px; --footer-color: #ffe0f4; } /* ---- Theme 50: Memphis ---------------------------------------------- */ html[data-theme="50"] { --page-bg: #fdfdf5; --page-text: #0a0a0a; --menu-bg: #0a0a0a; --menu-text: #fdfdf5; --menu-category: #ffd83a; --menu-desc: #c4eaff; --menu-divider: rgba(255,216,58,0.35); --accent: #ff3a78; --pill-bg: rgba(255,58,120,0.12); --pill-border: #ff3a78; --pill-color: #fdfdf5; --button-color: #0a0a0a; --button-border: #ff3a78; --button-hover-color: #fdfdf5; --button-hover-bg: #0a0a0a; --button-hover-border: #ffd83a; --top-overlay-color: rgba(10,10,10,.55); --top-title-color: #ffd83a; --top-title-letter-spacing: 4px; --heading-font: 'Acme', sans-serif; --body-font: 'Barlow', sans-serif; --heading-letter-spacing: 0; --section-title-color: #ff3a78; --button-radius: 0; --pill-radius: 0; } /* ========================================================================= PER-THEME POLISH — era-specific enhancements layered on top of palettes. Adds motifs that match each theme's aesthetic (neon glows, hard offset shadows, gradient mesh, atmospheric backdrops). Keeps each theme visually distinct rather than just "different colors over the same template". ========================================================================= */ /* ---- Theme 18 Karbon i neon — stronger neon presence ---------------- */ html[data-theme="18"] .menu_category .h_category { text-shadow: 0 0 10px color-mix(in srgb, var(--menu-category) 55%, transparent); } html[data-theme="18"] .button { box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 30%, transparent); } html[data-theme="18"] .button:hover { box-shadow: 0 0 22px color-mix(in srgb, var(--accent) 55%, transparent), 0 6px 18px color-mix(in srgb, var(--top-title-color) 38%, transparent); } /* ---- Theme 29 Halloween — pumpkin-orange glow ----------------------- */ html[data-theme="29"] .menu_category .h_category { text-shadow: 0 0 14px color-mix(in srgb, var(--menu-category) 45%, transparent); } html[data-theme="29"] .top-background::before { background: radial-gradient(ellipse at 50% 40%, transparent 25%, rgba(255,122,24,.10) 55%, rgba(0,0,0,.55) 100%), linear-gradient(180deg, transparent 60%, color-mix(in srgb, var(--menu-bg) 78%, transparent) 100%); } /* ---- Theme 30 Sylwester — gold sparkle on accents ------------------- */ html[data-theme="30"] .menu_category .h_category, html[data-theme="30"] .top-background .container > div > div:first-child { text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 40%, transparent); } /* ---- Theme 41 Andrzejki — mystical gold halo ------------------------ */ html[data-theme="41"] .menu_category .h_category { text-shadow: 0 0 12px color-mix(in srgb, var(--menu-category) 35%, transparent); } /* ---- Theme 44 Brutalism — hard offset shadows ----------------------- */ html[data-theme="44"] .button, html[data-theme="44"] .price-pill { box-shadow: 4px 4px 0 #0a0a0a; transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); } html[data-theme="44"] .button:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #0a0a0a; } html[data-theme="44"] .button:active { transform: translate(0, 0); box-shadow: 2px 2px 0 #0a0a0a; } html[data-theme="44"] .small-img, html[data-theme="44"] .small-img2 { box-shadow: 6px 6px 0 #0a0a0a; } /* ---- Theme 45 Glassmorphism — atmospheric mesh + frosted accents ---- */ html[data-theme="45"] body { background-image: radial-gradient(circle at 18% 20%, color-mix(in srgb, var(--accent) 28%, transparent) 0%, transparent 45%), radial-gradient(circle at 82% 65%, color-mix(in srgb, var(--menu-category) 32%, transparent) 0%, transparent 45%), radial-gradient(circle at 45% 95%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 50%); background-attachment: fixed; } html[data-theme="45"] .price-pill, html[data-theme="45"] .button { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* ---- Theme 46 Y2K — chromatic aberration pop ------------------------ */ html[data-theme="46"] body { background-image: radial-gradient(circle at 25% 30%, color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 50%), radial-gradient(circle at 75% 70%, color-mix(in srgb, var(--menu-category) 22%, transparent) 0%, transparent 50%); background-attachment: fixed; } html[data-theme="46"] .menu_category .h_category { text-shadow: 0 0 8px color-mix(in srgb, var(--menu-category) 45%, transparent), -2px 0 0 color-mix(in srgb, var(--accent) 60%, transparent); } /* ---- Theme 47 Cyberpunk — neon mesh + glowing accents --------------- */ html[data-theme="47"] body { background-image: radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--accent) 18%, transparent) 0%, transparent 50%), radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--menu-category) 22%, transparent) 0%, transparent 50%); background-attachment: fixed; } html[data-theme="47"] .menu_category .h_category { text-shadow: 0 0 12px color-mix(in srgb, var(--menu-category) 60%, transparent); } html[data-theme="47"] .button { box-shadow: 0 0 18px color-mix(in srgb, var(--accent) 35%, transparent); } html[data-theme="47"] .button:hover { box-shadow: 0 0 26px color-mix(in srgb, var(--accent) 55%, transparent), 0 6px 18px color-mix(in srgb, var(--menu-category) 35%, transparent); } /* ---- Theme 49 Retrofuturism — bottom sunset glow -------------------- */ html[data-theme="49"] body { background-image: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--accent) 28%, transparent) 0%, transparent 60%); background-attachment: fixed; } html[data-theme="49"] .menu_category .h_category { text-shadow: 0 0 10px color-mix(in srgb, var(--menu-category) 45%, transparent); } /* ---- Theme 50 Memphis — colorful offset shadows --------------------- */ html[data-theme="50"] .button, html[data-theme="50"] .price-pill { box-shadow: 4px 4px 0 var(--accent); transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out); } html[data-theme="50"] .button:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--menu-category); } html[data-theme="50"] .small-img, html[data-theme="50"] .small-img2 { box-shadow: 5px 5px 0 var(--accent); } /* ========================================================================= Theme switcher widget (floating button + side panel) ========================================================================= */ .theme-switcher, .theme-switcher * { box-sizing: border-box; } .theme-switcher { position: fixed; z-index: 99998; top: 16px; left: 16px; right: auto; bottom: auto; font-family: 'Barlow', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; text-transform: none; letter-spacing: normal; color: #1a1a1a; } .theme-switcher__toggle { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border: none; border-radius: 999px; background: #1a1a1a; color: #f0e5c8; cursor: pointer; font: 600 14px/1 'Barlow', system-ui, sans-serif; box-shadow: 0 6px 20px rgba(0,0,0,.35); transition: transform .15s ease, background .15s ease; } .theme-switcher__toggle:hover { transform: translateY(-1px); background: #2a2a2a; } .theme-switcher__toggle::before { content: ""; display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: linear-gradient(135deg, #d4af37 0 50%, #59db6a 50% 100%); box-shadow: 0 0 0 2px rgba(255,255,255,.15); } .theme-switcher__panel { position: fixed; top: 0; left: 0; bottom: 0; right: auto; width: min(420px, 100vw); max-width: 100vw; background: #ffffff; color: #1a1a1a; box-shadow: 8px 0 32px rgba(0,0,0,.25); transform: translateX(-100%); transition: transform .25s ease; display: flex; flex-direction: column; z-index: 99999; } .theme-switcher.is-open .theme-switcher__panel { transform: translateX(0); } .theme-switcher__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 18px 12px; border-bottom: 1px solid #ececec; } .theme-switcher__title { margin: 0; font: 700 18px/1.2 'Barlow', system-ui, sans-serif; letter-spacing: .5px; } .theme-switcher__hint { margin: 6px 0 0; font-size: 12px; color: #666; } .theme-switcher__hint kbd { display: inline-block; padding: 1px 6px; margin: 0 1px; font: 600 11px/1.4 'Barlow', system-ui, monospace; color: #1a1a1a; background: #f1f1f1; border: 1px solid #ccc; border-bottom-width: 2px; border-radius: 4px; } .theme-switcher__close { appearance: none; border: none; background: transparent; color: #1a1a1a; font-size: 22px; line-height: 1; cursor: pointer; padding: 4px 8px; border-radius: 6px; } .theme-switcher__close:hover { background: #f1f1f1; } .theme-switcher__list { list-style: none; margin: 0; padding: 10px 12px 14px; overflow-y: auto; flex: 1 1 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .theme-switcher__item button { width: 100%; text-align: left; background: #fafafa; border: 1px solid #e5e5e5; border-radius: 10px; padding: 10px; cursor: pointer; color: #1a1a1a; display: flex; flex-direction: column; gap: 6px; transition: border-color .15s ease, background .15s ease, transform .1s ease; font-family: inherit; text-transform: none; } .theme-switcher__item button:hover { border-color: #1a1a1a; background: #fff; transform: translateY(-1px); } .theme-switcher__item.is-active button { border-color: #1a1a1a; background: #fff5dc; box-shadow: inset 0 0 0 1px #1a1a1a; } .theme-switcher__item-row { display: flex; align-items: center; gap: 8px; } .theme-switcher__num { font: 700 11px/1 'Barlow', system-ui, sans-serif; background: #1a1a1a; color: #fff; padding: 4px 6px; border-radius: 4px; min-width: 22px; text-align: center; } .theme-switcher__name { font: 600 13px/1.2 'Barlow', system-ui, sans-serif; } .theme-switcher__swatches { display: flex; gap: 4px; } .theme-switcher__swatch { width: 18px; height: 18px; border-radius: 4px; border: 1px solid rgba(0,0,0,.12); } .theme-switcher__footer { padding: 12px 18px 16px; border-top: 1px solid #ececec; display: flex; flex-direction: column; gap: 10px; align-items: stretch; } .theme-switcher__status { display: flex; flex-direction: column; gap: 2px; } .theme-switcher__current { font-size: 12px; color: #555; } .theme-switcher__published { font-size: 12px; color: #1a1a1a; font-weight: 600; } .theme-switcher__actions { display: flex; gap: 8px; justify-content: space-between; align-items: center; } .theme-switcher__reset { appearance: none; border: 1px solid #1a1a1a; background: #fff; color: #1a1a1a; padding: 8px 12px; border-radius: 6px; font: 600 12px/1 'Barlow', system-ui, sans-serif; cursor: pointer; flex: 0 0 auto; } .theme-switcher__reset:hover:not(:disabled) { background: #1a1a1a; color: #fff; } .theme-switcher__reset:disabled { opacity: .45; cursor: not-allowed; } .theme-switcher__publish { appearance: none; border: 1px solid #1a8a4e; background: #1a8a4e; color: #fff; padding: 9px 14px; border-radius: 6px; font: 700 12px/1 'Barlow', system-ui, sans-serif; letter-spacing: .3px; cursor: pointer; flex: 1 1 auto; transition: background .15s ease, transform .1s ease, box-shadow .15s ease; } .theme-switcher__publish:hover:not(:disabled) { background: #14723f; transform: translateY(-1px); } .theme-switcher__publish.is-dirty { box-shadow: 0 0 0 3px rgba(26, 138, 78, .25); } .theme-switcher__publish:disabled { background: #c8e0c8; border-color: #c8e0c8; color: #4a4a4a; cursor: not-allowed; box-shadow: none; transform: none; } .theme-switcher__badge { margin-left: auto; font: 700 9px/1 'Barlow', system-ui, sans-serif; text-transform: uppercase; letter-spacing: .5px; padding: 3px 6px; border-radius: 999px; background: #1a8a4e; color: #fff; align-self: center; } @media (max-width: 480px) { .theme-switcher__list { grid-template-columns: 1fr; } .theme-switcher__panel { width: 100vw; } } /* ========================================================================= THEME-IMMUNITY for the switcher widget ------------------------------------------------------------------------- Globalne reguły motywów (np. `html[data-theme] button { border: 3px solid var(--accent) }`, `html[data-theme] body { text-transform: uppercase }`) miałyby pierwszeństwo nad neutralnymi stylami panelu — dlatego dopisujemy tu reguły z prefiksem `html[data-theme]`, których specyficzność (0,2,1) bije globalne `html[data-theme] button` (0,1,2). Panel zachowuje klasyczny biało-czarny look niezależnie od aktywnego motywu. ========================================================================= */ html[data-theme] .theme-switcher, html[data-theme] .theme-switcher * { font-family: 'Barlow', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; text-transform: none; letter-spacing: normal; } html[data-theme] .theme-switcher { color: #1a1a1a; } html[data-theme] .theme-switcher button, html[data-theme] .theme-switcher input, html[data-theme] .theme-switcher kbd { /* neutralizacja globalnej reguły html[data-theme] button */ box-shadow: none; } /* Toggle */ html[data-theme] .theme-switcher .theme-switcher__toggle { border: none; border-radius: 999px; background: #1a1a1a; color: #f0e5c8; box-shadow: 0 6px 20px rgba(0,0,0,.35); } html[data-theme] .theme-switcher .theme-switcher__toggle:hover { background: #2a2a2a; } /* Close button */ html[data-theme] .theme-switcher .theme-switcher__close { border: none; background: transparent; color: #1a1a1a; border-radius: 6px; } html[data-theme] .theme-switcher .theme-switcher__close:hover { background: #f1f1f1; } /* Theme list items */ html[data-theme] .theme-switcher .theme-switcher__item button { border: 1px solid #e5e5e5; border-radius: 10px; background: #fafafa; color: #1a1a1a; } html[data-theme] .theme-switcher .theme-switcher__item button:hover { border-color: #1a1a1a; background: #fff; } html[data-theme] .theme-switcher .theme-switcher__item.is-active button { border-color: #1a1a1a; background: #fff5dc; box-shadow: inset 0 0 0 1px #1a1a1a; } html[data-theme] .theme-switcher .theme-switcher__num { background: #1a1a1a; color: #fff; border: none; border-radius: 4px; } html[data-theme] .theme-switcher .theme-switcher__name { color: #1a1a1a; } html[data-theme] .theme-switcher .theme-switcher__desc, html[data-theme] .theme-switcher .theme-switcher__current { color: #666; } html[data-theme] .theme-switcher .theme-switcher__published { color: #1a1a1a; } html[data-theme] .theme-switcher .theme-switcher__hint { color: #666; } html[data-theme] .theme-switcher .theme-switcher__hint kbd { background: #f1f1f1; color: #1a1a1a; border: 1px solid #ccc; border-bottom-width: 2px; border-radius: 4px; } /* Panel chrome */ html[data-theme] .theme-switcher .theme-switcher__panel { background: #ffffff; color: #1a1a1a; } html[data-theme] .theme-switcher .theme-switcher__header, html[data-theme] .theme-switcher .theme-switcher__footer { border-color: #ececec; } /* Reset (Cofnij podgląd) */ html[data-theme] .theme-switcher .theme-switcher__reset { border: 1px solid #1a1a1a; background: #fff; color: #1a1a1a; border-radius: 6px; } html[data-theme] .theme-switcher .theme-switcher__reset:hover:not(:disabled) { background: #1a1a1a; color: #fff; } html[data-theme] .theme-switcher .theme-switcher__reset:disabled { opacity: .45; background: #fff; color: #1a1a1a; } /* Publish */ html[data-theme] .theme-switcher .theme-switcher__publish { border: 1px solid #1a8a4e; background: #1a8a4e; color: #fff; border-radius: 6px; } html[data-theme] .theme-switcher .theme-switcher__publish:hover:not(:disabled) { background: #14723f; border-color: #14723f; } html[data-theme] .theme-switcher .theme-switcher__publish:disabled { background: #c8e0c8; border-color: #c8e0c8; color: #4a4a4a; } /* Badge "opublikowany" */ html[data-theme] .theme-switcher .theme-switcher__badge { background: #1a8a4e; color: #fff; border-radius: 999px; } /* Swatches stay theme-immune */ html[data-theme] .theme-switcher .theme-switcher__swatch { border: 1px solid rgba(0,0,0,.12); border-radius: 4px; } /* ========================================================================= THEME-IMMUNITY for Bootstrap modals (gallery + confirmation dialogs) ------------------------------------------------------------------------- Globalna reguła `html[data-theme] button { border: 3px solid var(--accent); color: var(--page-text); border-radius: var(--button-radius); }` przebijała bootstrapowe `btn-outline-light`, `btn-close`, `btn-primary` itd. w popupach ze zdjęciami i modalach potwierdzeń. Specyficzność `html[data-theme] .modal-content button` = (0,2,2) bije globalną `html[data-theme] button` = (0,1,2), więc reguły Bootstrapa wracają na swoje miejsce, niezależnie od aktywnego motywu. WAŻNE: używamy `background-color`, NIE `background`, w resetach — w przeciwnym razie wymazujemy SVG ikon Bootstrapa (krzyżyk btn-close jest tłem `background-image`). Czcionkę dziedziczymy z motywu — popupy mają wyglądać spójnie z resztą strony. ========================================================================= */ /* Reset bazowy dla wszystkich przycisków w modalach — neutralizuje globalny `button`. NIE ruszamy font-family ani text-transform — niech dziedziczy z motywu strony. */ html[data-theme] .modal-content button { border: 1px solid transparent; border-radius: 6px; background-color: transparent; color: inherit; box-shadow: none; font-weight: 500; } /* Bootstrap close button (×) — zachowuje swoje SVG `background-image`, bo używamy tylko `background-color` powyżej. Dodatkowo zapewniamy widoczność białej ikony przez `filter: invert(...)` z btn-close-white (Bootstrap 5 to robi domyślnie). */ html[data-theme] .modal-content .btn-close, html[data-theme] .modal-content .btn-close-white { border: 0; border-radius: .25rem; padding: .25em .25em; background-color: transparent; opacity: .8; } html[data-theme] .modal-content .btn-close:hover, html[data-theme] .modal-content .btn-close-white:hover { opacity: 1; } /* btn-outline-light — białe obrys + tekst (gallery na ciemnym tle) */ html[data-theme] .modal-content .btn-outline-light { border: 1px solid #f8f9fa; background: transparent; color: #f8f9fa; } html[data-theme] .modal-content .btn-outline-light:hover { background: #f8f9fa; color: #1a1a1a; } /* btn-outline-secondary — neutralna szarość */ html[data-theme] .modal-content .btn-outline-secondary { border: 1px solid #6c757d; background: transparent; color: #f0f0f0; } html[data-theme] .modal-content .btn-outline-secondary:hover { background: #6c757d; color: #fff; } /* btn-secondary — wypełnione szare (np. „Anuluj") */ html[data-theme] .modal-content .btn-secondary { border: 1px solid #6c757d; background: #6c757d; color: #fff; } html[data-theme] .modal-content .btn-secondary:hover { background: #5a6268; border-color: #545b62; } /* btn-danger — czerwone (np. „Tak, usuń") */ html[data-theme] .modal-content .btn-danger { border: 1px solid #dc3545; background: #dc3545; color: #fff; } html[data-theme] .modal-content .btn-danger:hover { background: #c82333; border-color: #bd2130; } /* btn-primary — niebieskie CTA (np. „Utwórz i edytuj") */ html[data-theme] .modal-content .btn-primary { border: 1px solid #0d6efd; background: #0d6efd; color: #fff; } html[data-theme] .modal-content .btn-primary:hover { background: #0b5ed7; border-color: #0a58ca; } /* btn-success (np. „Wgraj") */ html[data-theme] .modal-content .btn-success { border: 1px solid #198754; background: #198754; color: #fff; } html[data-theme] .modal-content .btn-success:hover { background: #157347; border-color: #146c43; } /* Disabled state */ html[data-theme] .modal-content button:disabled, html[data-theme] .modal-content button[disabled] { opacity: .55; cursor: not-allowed; } /* Custom popup (delivery zones) — kontener `.popup-content`. Czcionkę dziedziczy z motywu. */ html[data-theme] .popup-content button { border: 1px solid #1a1a1a; border-radius: 6px; background-color: #fff; color: #1a1a1a; font-weight: 500; } html[data-theme] .popup-content button:hover { background-color: #1a1a1a; color: #fff; } html[data-theme] .popup-content .close-button { border: none; background-color: transparent; color: #1a1a1a; font-size: 1.5em; line-height: 1; } /* ========================================================================= Login button — `.login-btn` ma swoje kolory (zielony obrys/tekst), ale globalne `html[data-theme] button` przebija je i zmienia color na page-text. Specyficzność (0,2,1) bije global (0,1,2). Czcionka dziedziczy z motywu. ========================================================================= */ html[data-theme] .login-btn { width: 100%; background-color: transparent; border: 2px solid #a0d084; border-radius: 8px; color: #a0d084; text-transform: uppercase; letter-spacing: 1px; padding: 10px; cursor: pointer; } html[data-theme] .login-btn:hover { background-color: #a0d084; color: #1a1e22; }