/* ============================================================ SPOTKANIA BRANŻY PALIWOWEJ — brand.css (imsa-multi) Port ze starego szablonu "spotkania" (J3/K2 → J6, natywny news). Bootstrap 5.3 + bootstrap-icons. KOLOR PRZEWODNI sterowany zmienną --kolorspotkania: domyślnie (home / oleje / forum) #F29400 body.cat-biopaliwa #0E8B30 (dawne catid 25) body.cat-oleje #F29400 (dawne catid 26/111) body.cat-lpg #009EE0 (dawne catid 27) Klasę cat-* nadajemy na w index.php (docelowo z routera po kategorii artykułu) — zastępuje to stare PHP z $mycatid i $kolorspotkania. USUNIĘTE DUPLIKATY względem starego style.php: .bd-mode-toggle (2×), .bd-mode-toggle .dropdown-menu .active .bi (2×), [data-bs-theme=dark] .invert (3×), body>main ... p>span>a (2×), .carousel-caption / .carousel-indicators [data-bs-target] w bloku desktop (2×), selektory #spotkanie-slajd / #carouselExampleCaptions scalone w grupy. ============================================================ */ :root { --kolorspotkania: #F29400; } body.cat-biopaliwa { --kolorspotkania: #0E8B30; } body.cat-oleje { --kolorspotkania: #F29400; } body.cat-lpg { --kolorspotkania: #009EE0; } /* ---------- Kolor przewodni ---------- */ h2.text-spotkania, .text-spotkania { color: var(--kolorspotkania) !important; } .btn-primary { --bs-btn-color: #fff; --bs-btn-bg: var(--kolorspotkania); --bs-btn-border-color: var(--kolorspotkania); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--kolorspotkania); --bs-btn-hover-border-color: var(--kolorspotkania); --bs-btn-focus-shadow-rgb: 49,132,253; --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--kolorspotkania); --bs-btn-active-border-color: var(--kolorspotkania); --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125); --bs-btn-disabled-color: #fff; --bs-btn-disabled-bg: var(--kolorspotkania); --bs-btn-disabled-border-color: var(--kolorspotkania); } .btn-bd-primary { --bd-violet-bg: #9C9E9F; --bs-btn-font-weight: 600; --bs-btn-color: var(--bs-white); --bs-btn-bg: var(--bd-violet-bg); --bs-btn-border-color: var(--bd-violet-bg); --bs-btn-hover-color: var(--bs-white); --bs-btn-hover-bg: #9C9E9F; --bs-btn-hover-border-color: #9C9E9F; --bs-btn-active-color: var(--bs-btn-hover-color); --bs-btn-active-bg: #9C9E9F; --bs-btn-active-border-color: #9C9E9F; } p > a { color: var(--kolorspotkania) !important; } .btn .btn-primary { color: #fff !important; } .text-bg-dark { color: #fff !important; background-color: var(--kolorspotkania) !important; } /* ---------- Utilsy / drobiazgi wspólne ---------- */ .bi { vertical-align: -.125em; fill: currentColor; } h2.section-title { text-align: center; padding-top: 2rem; padding-bottom: 1rem; } [data-bs-theme=dark] .invert { -webkit-filter: invert(33%); filter: invert(33%); } [data-bs-theme=dark] .bg-white { background-color: transparent !important; } html { scroll-behavior: smooth; } body > main > div > div > div > div > div > p > span > a { width: 40px; height: 40px; border-radius: 1rem; } /* ---------- Pływające narzędzia (motyw + do góry) ---------- */ .bd-mode-toggle { z-index: 1500; } .bd-mode-toggle .dropdown-menu .active .bi { display: block !important; } .bd-mode-toggle .btn { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; } /* Ikony przełącznika motywu: w trybie jasnym pokazujemy księżyc, w ciemnym — słońce. */ .im-theme-toggle .theme-icon-light { display: none; } [data-bs-theme=dark] .im-theme-toggle .theme-icon-light { display: inline; } [data-bs-theme=dark] .im-theme-toggle .theme-icon-dark { display: none; } /* Back-to-top pojawia się po przewinięciu (klasa .is-visible z JS) */ #backToTop { opacity: 0; visibility: hidden; transition: opacity .3s ease; } #backToTop.is-visible { opacity: 1; visibility: visible; } /* ---------- NAVBAR ---------- */ #navbarNavDropdown > ul { padding: 0; margin: 0; } #navbarNavDropdown > ul > li { list-style-type: none; } #navbarNavDropdown > ul > li.nav-item.dropdown, #navbarNavDropdown > ul > li > a.contact, #navbarNavDropdown > ul > li.nav-item.nav-link.link { padding: 0; background-color: #f2f2f2; transition: .5s; border-radius: .55rem; } #navbarNavDropdown > ul > li.nav-item.dropdown > a, #navbarNavDropdown > ul > li > a.contact, #navbarNavDropdown > ul > li.nav-item.nav-link.link > a { color: #000; text-decoration: none; transition: .5s; padding: 6px 25px 8px 25px; border-radius: .55rem; } [data-bs-theme=dark] #navbarNavDropdown > ul > li.nav-item.dropdown.bg-body-secondary > a, [data-bs-theme=dark] #navbarNavDropdown > ul > li.nav-item.nav-link.link > a { color: #fff; } #navbarNavDropdown > ul > li.nav-item.nav-link.link.active > a:hover, #navbarNavDropdown > ul.navbar-nav > li > a:hover, #navbarNavDropdown > ul > li.nav-item.nav-link.link > a:hover { background-color: #9C9E9F; color: #fff; transition: .5s; border-radius: .55rem; } #navbarNavDropdown > ul > li.nav-item.nav-link.link.active > a { background-color: var(--kolorspotkania); color: #fff; transition: .5s; border-radius: .55rem; } /* Moduł językowy (mod_languages) w navbarze */ #navbarNavDropdown > ul > li > div.mod-languages > ul { list-style-type: none; padding: 0; margin: 0; } #navbarNavDropdown > ul > li > div.mod-languages > ul > li { list-style-type: none; padding: 0; margin: 0; display: inline; } #navbarNavDropdown > ul > li > div > ul > li.lang-active > a > img { border: 2px solid var(--kolorspotkania); padding: 1px; width: 26px; height: auto; } #navbarNavDropdown > ul > li > div > ul > li > a > img { border: 2px solid transparent; padding: 2px; width: 26px; height: auto; border-radius: .2rem; } /* Submenu (kotwice podstron spotkania) */ #znacznikid > li { transition: .5s; } #znacznikid > li > a { color: #9C9E9F; text-decoration: none; } #znacznikid > li:hover { background-color: #9C9E9F; transition: .5s; } #znacznikid > li > a:hover { color: #fff; } #znacznikid > li.current.active { background-color: #FFCA2C; color: #fff; } #znacznikid > li.current.active > a { background-color: #FFCA2C; color: #000; } /* ---------- HERO SPOTKANIA + KARUZELE ---------- */ /* Flagi językowe na slajdzie spotkania */ #spotkanie-slajd > div > div.flaga > div > div > ul > li { list-style-type: none; } #spotkanie-slajd > div > div.flaga > div > div > ul > li > a > img { width: 60px; height: auto; } #spotkanie-slajd > div > div.flaga > div > div > ul > li.lang-active { display: none; } #spotkanie-slajd > div > div.flaga > div > div.mod-languages > ul { padding: 0 !important; margin: 0 !important; } /* ---------- MOBILE ---------- */ @media (max-width: 768px) { .carousel-caption { z-index: 10 !important; right: 0; left: 0; width: 100%; bottom: 13rem !important; } #spotkanie-slajd, #slajdSpotkanie > div.carousel-inner, #carouselExampleCaptions > div.carousel-inner { height: 300px; } #spotkanie-slajd > img, #slajdSpotkanie > div.carousel-inner > a > div > img, #slajdSpotkanie > div.carousel-inner > div > img, #carouselExampleCaptions > div.carousel-inner > a > div > img, #carouselExampleCaptions > div.carousel-inner > div > img { object-fit: cover; height: 300px; width: auto; } #slajdSpotkanie > div.carousel-inner > a > div > div > h5, #carouselExampleCaptions > div.carousel-inner > a > div > div > h5 { color: #fff !important; font-size: 1.4rem !important; } #slajdSpotkanie > div.carousel-inner > a > div > div > p, #carouselExampleCaptions > div.carousel-inner > a > div > div > p { color: #fff !important; font-size: 80% !important; } #spotkanie-slajd > div, #slajdSpotkanie > div.carousel-inner > a > div > div, #carouselExampleCaptions > div.carousel-inner > a > div > div { color: #fff; padding: 2.8rem 2rem !important; background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.5) 30%, rgba(255,255,255,0) 70%); } body > main > div > div.p-md-5.mb-4.bg-body-tertiary.border.rounded-3 > div > div.col-md-8, body > main > div > div.row.align-items-md-stretch > div.col-md-6 > div > div, body > main > div > div.p-md-5.mb-4.bg-body-tertiary.border.rounded-3 > div > p.col-md-8, body > main > div > div.row.align-items-md-stretch > div > div > p { font-size: .95rem !important; } body > main > div > div > div > div > div > p.card-text.intro-text, body > main > div > div > div > div > p.intro-text { font-size: .9rem !important; } .vs-text { font-size: .8rem !important; line-height: 1 !important; } .galeria-kontener { margin: 0; width: 100%; display: block; } .galeria-kontener a:nth-of-type(n+7) { display: none; } .galeria-obrazek { width: 100%; height: 110px; border: 1px; } .fancybox-button { width: 47%; float: left; margin: .2rem; text-align: center; } .fancybox-button img { object-fit: cover; } #spotkanie-slajd > div > div.opisy > h2.card-text.fs-2, #spotkanie-slajd > div > div.opisy > h1 { font-size: 16px !important; } #spotkanie-slajd > div > div.opisy > h2.card-text.fs-3 { font-size: 14px !important; } body > main > div > div > div > div > div > h4 { font-size: 14px; } } /* ---------- DESKTOP ---------- */ @media (min-width: 769px) { #navbarNavDropdown { width: 100%; } #navbarNavDropdown > ul { text-align: right; } #navbarNavDropdown > ul > li { margin-left: 1rem; } #spotkanie-slajd, #slajdSpotkanie > div.carousel-inner, #carouselExampleCaptions > div.carousel-inner { height: 512px; } #spotkanie-slajd > img, #slajdSpotkanie > div.carousel-inner > a > div > img, #slajdSpotkanie > div.carousel-inner > div > img, #carouselExampleCaptions > div.carousel-inner > a > div > img, #carouselExampleCaptions > div.carousel-inner > div > img { object-fit: cover; height: 512px; width: auto; } #spotkanie-slajd > div, #slajdSpotkanie > div.carousel-inner > div > div, #slajdSpotkanie > div.carousel-inner > a > div > div, #carouselExampleCaptions > div.carousel-inner > div > div, #carouselExampleCaptions > div.carousel-inner > a > div > div { color: #fff; padding: 2rem 2rem !important; background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(0,0,0,.5) 30%, rgba(255,255,255,0) 70%); } #slajdSpotkanie > div.carousel-inner > a > div > div > h5, #carouselExampleCaptions > div.carousel-inner > a > div > div > h5 { font-size: 1.9rem; text-align: left; font-weight: 700; } #slajdSpotkanie > div.carousel-inner > a > div > div > p, #carouselExampleCaptions > div.carousel-inner > a > div > div > p { font-size: 1rem; text-align: left; } .carousel-caption { bottom: 0 !important; z-index: 10 !important; right: 0; left: 0; width: 100%; } .carousel-indicators { padding: 0; margin-bottom: -25px; } .carousel-indicators [data-bs-target] { background-color: #000; } #slajdSpotkanie > div.carousel-indicators { border-radius: 0 0 5px 5px; border: 1px solid #DEE2E6; width: 100% !important; position: absolute; right: 0; bottom: 0; left: 0; z-index: 2; display: flex; justify-content: center; padding: 4px 0; margin: 0 0 -32px 0; } body > main > div > div > div > div > img.hotel-img { height: 350px !important; width: 100% !important; object-fit: cover !important; } a.sigProLink > img { width: 24.7%; height: 130px; object-fit: cover; padding-bottom: 4px; } #relacjagaleria > div > div > div > div > a > img { width: 12.17%; height: 100px; object-fit: cover; padding-bottom: 4px; } div.text-md-center { color: #000; } } /* ---------- Sekcje strony spotkania ---------- */ body > main > div > div > div > div > div > div > div > a { color: #000; text-decoration: none; } #infomiejsce > div > div > img { width: 100%; height: auto; object-fit: cover; } #infomiejsce > div.border-bottom > p > img { width: 100%; height: auto; } #infohotel > div > div > img { width: 100%; height: auto; } /* Tabela agendy */ #tabela-agendy > div > p { text-align: center; } @media (max-width: 769px) { #tabela-agendy > div > div > div.text-box > h3 { margin-top: 1.25rem !important; font-size: 2rem !important; } #tabela-agendy > div > div > div.text-box > div { line-height: 1.25; } } @media (min-width: 769px) { #tabela-agendy > div > div > div.time-box::after { content: "↓"; font-size: 2rem; margin: 0 49%; font-weight: bold; } #tabela-agendy > div > div:last-child > div.time-box::after { display: none; } } /* Prelegenci */ #prelegenci > div > div > div > h4 { font-size: 1rem !important; } #prelegenci > div > div > div > div, #prelegenci > div > div > div > div.fst-italic.small { font-size: .75rem !important; } /* Logotypy sponsorów */ #logosysponsorow > div > div.img-fluid > img, #logosysponsorow > div > div > div.img-fluid > img, #logosysponsorow > div > div > div > div.img-fluid > img { width: 100%; height: auto; } /* Mapa */ body > main > div > div > div > div > div > div > iframe { height: 282px !important; width: 100% !important; } /* Expo — akordeon strefy wystawienniczej */ .accordion-button:not(.collapsed) { color: var(--bs-accordion-active-color); background-color: #fff var(--bs-accordion-active-bg); box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color); } .accordion-button::after { display: none !important; } /* Player AV */ .avPlayerWrapper { max-width: 100%; width: 100%; height: auto; } .avPlayerWrapper video { width: 100% !important; height: auto !important; } /* AcyMailing — formularz wypisu */ #acym_wrapper .acym__unsubscribe__list__switch label, #acym_wrapper .acym__unsubscribe__reason__section, #acym_wrapper .acym__unsubscribe__list__description, #acym_wrapper .acym__unsubscribe__actions, #acym_wrapper .acym__unsubscribe__image__container, #acym_wrapper form > fieldset > img { display: none !important; } #acym_wrapper .acym__unsubscribe__list__display__name { margin: 0 !important; } #formSubmit::after { content: 'Aktualizuj'; } /* Kafle-linki na stronie głównej */ main > div > div.row.align-items-md-stretch > div > a { text-decoration: none !important; } main > div > div.row.align-items-md-stretch > div > a > div:hover { transition: .3s; border-color: #0080c0 !important; background-color: #0080c0 !important; } body > main > div > div.row.align-items-md-stretch > div > a:hover p, body > main > div > div.row.align-items-md-stretch > div > a:hover h5 { color: #fff !important; transition: .3s; } body > main > div > div.row.align-items-md-stretch > div > a > div > p, body > main > div > div.row.align-items-md-stretch > div > a > div > h5 { text-decoration: none !important; color: #000; transition: .7s; } /* Karuzela / grafiki różne */ .foto-item { position: relative; display: none; width: 100%; margin-right: -100%; } body > main > div > div > div.mb-2 > div > div > pre > img { width: 100%; height: auto; } /* ======================================================================= NAVBAR v3 — Spotkania Branży Paliwowej (imsa-multi) KOMPLETNA sekcja: podmień nią CAŁY dotychczasowy CSS navbara (pasek, logo, linki, dropdowny, mod_menu, język) w brand.css. Kolory marki: pomarańcz #F7941D, grafit #231F20. Menu: pigułki jak na starej stronie; dropdowny hoverem; PL/EN w kółkach. ======================================================================= */ /* Kolor przewodni navbara - jawnie per kategoria (bez var-w-var) */ body { --im-brand: #F29400; --im-brand-dark: #C47A00; --im-ink: #231F20; } body.cat-biopaliwa { --im-brand: #0E8B30; --im-brand-dark: #0A6B24; } body.cat-lpg { --im-brand: #009EE0; --im-brand-dark: #007BB0; } body.cat-oleje { --im-brand: #F29400; --im-brand-dark: #C47A00; } /* --- Pasek: półprzezroczysty z rozmyciem, subtelna dolna krawędź --- */ .im-navbar { background: color-mix(in srgb, var(--bs-body-bg) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--bs-border-color-translucent); } /* --- Logo --- */ .im-navbar-logo {height: 70px;width: auto;transition: transform .15s ease;} .navbar-brand:hover .im-navbar-logo { transform: scale(1.03); } /* ======================================================================= LISTY MENU (mod_menu przez {module} / pozycję — oba warianty) Do prawej dopycha wrapper w nav.php (ms-lg-auto), nie listy. ======================================================================= */ .im-navbar ul.mod-menu { display: flex; align-items: center; gap: .5rem; list-style: none; margin: 0; padding: 0; } .im-navbar .mod-menu li { position: relative; } /* --- Pozycje jako pigułki --- */ .im-navbar .nav-link { background: var(--bs-secondary-bg); border-radius: .625rem; padding: .5rem 1.1rem; font-weight: 500; color: var(--bs-body-color); transition: background-color .15s ease, color .15s ease; } .im-navbar .nav-link:hover, .im-navbar .nav-link:focus-visible { background: color-mix(in srgb, var(--im-brand) 18%, var(--bs-secondary-bg)); color: var(--im-brand-dark); } [data-bs-theme="dark"] .im-navbar .nav-link:hover, [data-bs-theme="dark"] .im-navbar .nav-link:focus-visible { color: var(--im-brand); } /* Aktywna pozycja: wypełniona brandowym pomarańczem */ .im-navbar .nav-item.active > .nav-link, .im-navbar .nav-item.current > .nav-link { background: var(--im-brand); color: #fff; } /* ======================================================================= DROPDOWN: karta z cieniem, otwierana hoverem/focusem (desktop) Caret rysuje Bootstrap (klasa .dropdown-toggle z layoutu navbar.php). ======================================================================= */ .im-navbar .dropdown-menu, .im-navbar .mod-menu__sub { border: 0; border-radius: .75rem; padding: .5rem; box-shadow: 0 .75rem 2rem rgba(35, 31, 32, .16); background: var(--bs-body-bg); list-style: none; } .im-navbar .dropdown-item, .im-navbar .mod-menu__sub a { display: block; border-radius: .5rem; padding: .5rem .75rem; color: var(--bs-body-color); text-decoration: none; white-space: nowrap; } .im-navbar .dropdown-item:hover, .im-navbar .dropdown-item:focus, .im-navbar .mod-menu__sub a:hover, .im-navbar .mod-menu__sub a:focus { background: color-mix(in srgb, var(--im-brand) 12%, transparent); color: var(--im-brand-dark); } [data-bs-theme="dark"] .im-navbar .dropdown-item:hover, [data-bs-theme="dark"] .im-navbar .mod-menu__sub a:hover { color: var(--im-brand); } @media (min-width: 992px) { /* Podmenu jako wysuwana karta (niska specyficzność - :where) */ .im-navbar :where(li.parent, li.dropdown) > :where(.mod-menu__sub, .dropdown-menu) { position: absolute; top: 100%; left: 0; margin-top: .5rem; /* wizualny odstęp od pigułki... */ min-width: 14rem; display: none; z-index: 1030; } /* ...a niewidzialny mostek wypełnia szczelinę, żeby hover nie gasł */ .im-navbar :where(li.parent, li.dropdown) > :where(.mod-menu__sub, .dropdown-menu)::before { content: ""; position: absolute; top: -.6rem; left: 0; right: 0; height: .6rem; } /* Otwieranie hoverem / focusem (klawiatura) */ .im-navbar li.parent:hover > .mod-menu__sub, .im-navbar li.parent:focus-within > .mod-menu__sub, .im-navbar li.dropdown:hover > .dropdown-menu, .im-navbar li.dropdown:focus-within > .dropdown-menu { display: block; animation: im-drop .18s ease; } /* Ostatnie pozycje (np. Kontakt): podmenu do prawej krawędzi */ .im-navbar ul.mod-menu > li:last-child > :where(.mod-menu__sub, .dropdown-menu) { left: auto; right: 0; } } @keyframes im-drop { from { opacity: 0; transform: translateY(-.35rem); } to { opacity: 1; transform: translateY(0); } } /* ======================================================================= MOBILE (zwinięta belka): pigułki w kolumnie, podmenu rozwinięte z wcięciem ======================================================================= */ @media (max-width: 991.98px) { .im-navbar ul.mod-menu { flex-direction: column; align-items: stretch; gap: .375rem; padding: .5rem 0; } .im-navbar .mod-menu__sub, .im-navbar .dropdown-menu { position: static !important; display: block; box-shadow: none; margin: .25rem 0 .25rem .75rem; padding: 0 0 0 .75rem; border-left: 2px solid color-mix(in srgb, var(--im-brand) 40%, transparent); background: transparent; border-radius: 0; } } /* ======================================================================= PRZEŁĄCZNIK JĘZYKA: okrągłe plakietki PL / EN (jeden wspólny blok dla override'u .im-lang-list i opakowania .im-lang) ======================================================================= */ .im-lang ul, .im-lang-list { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; } .im-lang a, .im-lang-list a { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; padding: 0; font-size: .85rem; font-weight: 700; letter-spacing: .03em; text-decoration: none; color: var(--bs-secondary-color); border: 1px solid var(--bs-border-color); transition: color .15s ease, border-color .15s ease, background-color .15s ease, transform .15s ease; } .im-lang a:hover, .im-lang a:focus-visible, .im-lang-list a:hover, .im-lang-list a:focus-visible { color: var(--im-brand-dark); border-color: var(--im-brand); transform: translateY(-1px); } [data-bs-theme="dark"] .im-lang a:hover, [data-bs-theme="dark"] .im-lang-list a:hover { color: var(--im-brand); } .im-lang .lang-active a, .im-lang-list .lang-active a { color: #fff; background: var(--im-brand); /*border-color: var(--im-brand);*/ pointer-events: none; } @media (min-width: 992px) { /* Belka może się łamać, gdy menu nie mieszczą się w jednym rzędzie */ .im-navbar .navbar-collapse { flex-wrap: wrap; } /* Wrapper menu też zawija zamiast wypychać sąsiadów */ .im-navbar .navbar-collapse > .d-lg-flex { flex-wrap: wrap; min-width: 0; row-gap: .375rem; } .im-navbar ul.mod-menu { flex-wrap: wrap; row-gap: .375rem; } }