/* Theme Name: Cocolory Theme Author: Grzegorz Babiarz Author URI: https://grzegorzbabiarz.com Description: Jednostronicowy motyw z Tailwind CSS (CDN) i ikonami Lucide (vanilla). Template astra Version: 1.0.0 License: GPL-2.0+ */ /* Płynne przewijanie, z szacunkiem do stałego paska na górze */ html { scroll-behavior: smooth; /* wysokość Twojego navu: dopasuj w razie czego (px) */ scroll-padding-top: 72px; } /* Accessibility: jeśli user woli mniejszy ruch */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* Pola formularza (input, textarea) */ .tw-input, .tw-textarea { width: 100%; padding: 0.75rem 1rem; /* py-3 px-4 */ background-color: #ffffff; /* bg-white */ color: #0f172a; /* slate-900-ish */ border: 1px solid #d1d5db; /* border-gray-300 */ border-radius: 0.5rem; /* rounded-lg */ outline: none; } /* Dark mode warianty (bo masz class="dark" na ) */ html.dark .tw-input, html.dark .tw-textarea { background-color: #0f172a; /* bg-box */ color: #ffffff; /* text-white */ border-color: #4b5563; /* dark:border-gray-600 */ } /* Focus ring */ .tw-input:focus, .tw-textarea:focus { box-shadow: 0 0 0 1px #22c55e; /* focus:ring-1 focus:ring-green-500 */ border-color: #22c55e; } /* Tekstarea bez zmiany rozmiaru */ .tw-textarea { resize: none; } /* Plik (file input) – minimalne, bo natywny kontroler różni się per przeglądarka */ .tw-file { display: block; font-size: 0.875rem; color: #475569; /* text-gray-600 */ } html.dark .tw-file { color: #cbd5e1; } /* Przycisk */ .tw-button { background-color: #22c55e; /* bg-green-500 */ color: #ffffff; padding: 0.75rem 2rem; /* py-3 px-8 */ border-radius: 0.5rem; /* rounded-lg */ font-weight: 600; /* font-semibold */ transition: background-color .2s ease-in-out; border: none; cursor: pointer; } .tw-button:hover { background-color: #16a34a; } /* hover:bg-green-600 */ /* Wiadomości CF7 */ .wpcf7 form .wpcf7-response-output { margin-top: 1rem; border-radius: 0.5rem; border: 1px solid #e5e7eb; padding: 1rem; font-size: 0.875rem; color: #0f172a; background: #fff; } .wpcf7 form.sent .wpcf7-response-output { border-color: #16a34a; color: #16a34a; background: rgba(34, 197, 94, .08); } .wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.failed .wpcf7-response-output { border-color: #dc2626; color: #dc2626; background: rgba(239, 68, 68, .08); } .wpcf7-not-valid-tip { margin-top: 0.25rem; font-size: 0.875rem; color: #dc2626; } .contact-form p:first-child { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 1.5rem; } @media (min-width: 768px) { .contact-form p:first-child { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .contact-form input { margin-top: 5px; } p:has(.tw-button) { display: flex; justify-content: flex-end; } /* FAQ: domyślnie zamknięte */ .faq-answer { display: none; } /* Po otwarciu (na elemencie data-faq-item) pokazujemy odpowiedź */ [data-faq-item].is-open [data-faq-answer] { display: block; } /* (opcjonalnie) animacja strzałki */ [data-faq-item] [data-icon-chevron] { transition: transform .2s ease-in-out; } [data-faq-item].is-open [data-icon-chevron] { transform: rotate(180deg); } /* Ramka na wideo: proporcje 2:3, jak w projekcie (w-64 h-96) */ .video-frame { position: relative; width: 100%; aspect-ratio: 2 / 3; /* portret */ background: #000; } /* Wideo wypełnia ramkę */ .video-el { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* wypełnij bez zniekształceń */ } /* Szanuj szerokie wyrównania bloków */ .alignwide { max-width: min(72rem, 90vw); margin-left: auto; margin-right: auto; } .alignfull { width: 100vw; margin-left: 50%; transform: translateX(-50%); } /* Obrazy/iframes responsywne w typografii */ .prose :where(img, video) { height: auto; } .prose :where(iframe) { width: 100%; aspect-ratio: 16/9; } /* Galerie blokowe – podstawowe odstępy */ .wp-block-gallery { gap: 1rem; } /* Pole wyboru pliku (Contact Form 7: class="tw-file") */ .tw-file { width: 100%; display: block; border: 1px solid #d1d5db; /* gray-300 */ background: #ffffff; /* white */ color: #111827; /* gray-900 */ border-radius: 0.5rem; /* rounded-lg */ padding: 0.5rem 0.75rem; /* px-3 py-2 */ font-size: 0.9375rem; /* ~text-[15px] */ line-height: 1.5rem; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; margin: 10px 0; } .tw-file:hover { border-color: #9ca3af; /* gray-400 */ } .tw-file:focus { outline: none; border-color: #22c55e; /* green-500 */ box-shadow: 0 0 0 3px rgba(34,197,94,.25); /* ring */ } /* Styl samego „przycisku” w polu typu file */ .tw-file::file-selector-button { margin-right: 0.75rem; /* mr-3 */ border: 0; background: #22c55e; /* green-500 */ color: #fff; padding: 0.5rem 1rem; /* py-2 px-4 */ border-radius: 9999px; /* rounded-full */ font-weight: 600; cursor: pointer; transition: background-color .2s ease, transform .06s ease; } .tw-file::file-selector-button:hover { background: #16a34a; /* green-600 */ } .tw-file::file-selector-button:active { transform: translateY(1px); } /* WebKit fallback (Safari starsze wersje) */ .tw-file::-webkit-file-upload-button { margin-right: 0.75rem; border: 0; background: #22c55e; color: #fff; padding: 0.5rem 1rem; border-radius: 9999px; font-weight: 600; cursor: pointer; transition: background-color .2s ease, transform .06s ease; } .tw-file::-webkit-file-upload-button:hover { background: #16a34a; } .tw-file::-webkit-file-upload-button:active { transform: translateY(1px); } /* Dark mode */ .dark .tw-file { background: #0f172a; /* box */ border-color: #334155; /* box-border */ color: #e5e7eb; /* gray-200 */ } .dark .tw-file:hover { border-color: #64748b; /* slate-500 */ } .dark .tw-file:focus { border-color: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.25); } .dark .tw-file::file-selector-button, .dark .tw-file::-webkit-file-upload-button { background: #22c55e; color: #fff; } /* Opcjonalny napis z nazwą wybranego pliku (dodamy JS-em) */ .tw-file-name { display: block; margin-top: 0.5rem; font-size: 0.875rem; /* text-sm */ color: #6b7280; /* gray-500 */ } .dark .tw-file-name { color: #9ca3af; /* gray-400 */ } /* Ukryj spinner, gdy nie jest aktywny */ .wpcf7-spinner { display: none !important; } /* Pokaż spinner tylko podczas wysyłania */ .wpcf7 .submitting .wpcf7-spinner { display: inline-block !important; vertical-align: middle; margin-left: 0.75rem; width: 1.25rem; height: 1.25rem; border: 2px solid rgba(255, 255, 255, 0.5); border-top-color: #fff; border-radius: 50%; animation: spin 0.6s linear infinite; } /* Animacja obracania */ @keyframes spin { to { transform: rotate(360deg); } } .contact-form p:has(textarea), p:has(textarea) { margin-top: 1.5rem; }