/* ========================================================================== LOYOLA – DZIEŁA JEZUICKIE — style własne Kolejność ładowania w : 1. Google Fonts (Open Sans) 2. css/bootstrap.custom.min.css (Bootstrap zbudowany z scss/_variables.scss) 3. Font Awesome (CDN) 4. ten plik (css/style.css) ========================================================================== */ /* -------------------------------------------------------------------------- 1. FONTY Helvetica jest fontem licencjonowanym — pliki dokłada się lokalnie w katalogu /fonts (patrz README.md). Dopóki plików nie ma, przeglądarka automatycznie spadnie na Open Sans (Google Fonts), który pełni rolę fontu zastępczego / uzupełniającego w całym stosie font-family. -------------------------------------------------------------------------- */ @font-face { font-family: "Helvetica"; src: url("../fonts/HelveticaNeueBold.otf") format("opentype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Helvetica"; src: url("../fonts/HelveticaNeueBold.otf") format("opentype"); font-weight: 700; font-style: normal; font-display: swap; } :root { --font-heading: "Helvetica", "Open Sans", Arial, sans-serif; --font-body: "Open Sans", Arial, sans-serif; /* Kolory marki — zgodne z scss/_variables.scss, do użytku poza klasami Bootstrapa */ --color-primary: #bad808; --color-secondary: #242424; --color-ink: #5a5a5a; --color-light: #fffbf3; --header-height: 64px; } body { font-family: var(--font-body); color: var(--color-ink); background-color: var(--color-light); scroll-behavior: smooth; } h1, h2, h3, h4, h5, h6, .navbar, .font-heading { font-family: var(--font-heading); } .font-heading-light { color: var(--color-primary); } h1, h2, h3 { letter-spacing: 0.01em; } ::selection { background-color: var(--color-primary); color: var(--color-secondary); } a { transition: color 0.2s ease; } :focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* -------------------------------------------------------------------------- 2. PASEK JĘZYKOWY / TOP BAR -------------------------------------------------------------------------- */ .lang-switch a { font-size: 1.1rem; opacity: 0.55; transition: opacity 0.2s ease, transform 0.2s ease; } .lang-switch a:hover, .lang-switch a.active { opacity: 1; transform: translateY(-1px); } .brand-logo-img { width: 100%; max-width: 220px; height: auto; display: block; } .hero-tagline { font-family: var(--font-heading); font-weight: 700; line-height: 1.12; color: var(--color-secondary); text-transform: uppercase; } .hero-tagline .accent { color: var(--color-primary); } /* -------------------------------------------------------------------------- 3. PASEK CTA "PRZEKAŻ 1,5% PODATKU" -------------------------------------------------------------------------- */ .cta-bar { background-color: var(--color-primary); } .cta-bar .cta-link { color: var(--color-secondary); font-family: var(--font-heading); font-weight: 700; letter-spacing: 0.04em; text-decoration: none; } .cta-bar .cta-link:hover { color: #fff; } /* Krążek z ikoną strzałki — powtarzalny element wizualny (CTA, przyciski, linki) */ .icon-circle { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border: 1.5px solid currentColor; border-radius: 50%; flex: 0 0 auto; transition: background-color 0.25s ease, transform 0.25s ease, color 0.25s ease; } .cta-link:hover .icon-circle, .btn:hover .icon-circle, .link-more:hover .icon-circle { transform: translateY(2px); } /* -------------------------------------------------------------------------- 4. NAWIGACJA — sticky + animowany dropdown, hover: primary -------------------------------------------------------------------------- */ .site-nav { position: sticky; top: 0; z-index: 1030; background-color: var(--color-light); border-bottom: 1px solid rgba(17, 17, 17, 0.08); transition: box-shadow 0.25s ease, padding 0.25s ease; } .site-nav.is-scrolled { box-shadow: 0 6px 18px rgba(17, 17, 17, 0.08); opacity: 0.9; } .site-nav .nav-link { color: var(--color-secondary); font-family: var(--font-heading); font-weight: 700; font-size: 0.92rem; letter-spacing: 0.04em; text-transform: uppercase; padding-top: 1.1rem; padding-bottom: 1.1rem; position: relative; } .site-nav .nav-link::after { content: ""; position: absolute; left: 1rem; right: 1rem; bottom: 0.5rem; height: 2px; background-color: var(--color-primary); transform: scaleX(0); transform-origin: left; transition: transform 0.25s ease; } .site-nav .nav-link:hover, .site-nav .nav-link:focus-visible, .site-nav .nav-link.active { color: var(--color-primary); } .site-nav .nav-link:hover::after, .site-nav .nav-link.active::after { transform: scaleX(1); } .site-nav .nav-home { color: var(--color-secondary); font-size: 1.05rem; } .site-nav .nav-home:hover { color: var(--color-primary); } /* Animowany dropdown — otwierany po najechaniu na desktopie */ .site-nav .dropdown-menu { display: block; margin-top: 0; border: 0; border-radius: 0 0 0.5rem 0.5rem; box-shadow: 0 14px 30px rgba(17, 17, 17, 0.12); background-color: #fff; opacity: 0.9; visibility: hidden; pointer-events: none; transform: translateY(8px); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease; } @media (min-width: 992px) { .site-nav .nav-item.dropdown:hover > .dropdown-menu, .site-nav .nav-item.dropdown > .dropdown-menu.show { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } } .site-nav .dropdown-item { font-weight: 600; padding: 0.55rem 1.25rem; color: var(--color-ink); } .site-nav .dropdown-item:hover, .site-nav .dropdown-item:focus { background-color: var(--color-primary); color: var(--color-secondary); } .site-nav .dropdown-toggle::after { vertical-align: 0.1em; } /* -------------------------------------------------------------------------- 5. HERO -------------------------------------------------------------------------- */ .hero-media { background: url(../img/header.png) no-repeat center center/cover; width: 100%; height: clamp(220px, 32vw, 420px); object-fit: cover; display: flex; align-items: flex-end; } .quote-bar { width: 100%; padding: 1rem 0 0.9rem; color: var(--color-light); background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8)); } .quote-bar p { text-align: center; } /* -------------------------------------------------------------------------- 6. SEKCJE / ODSTĘPY -------------------------------------------------------------------------- */ .section { padding-top: clamp(2.5rem, 5vw, 5rem); padding-bottom: clamp(2.5rem, 5vw, 5rem); } .section-title { color: var(--color-primary); font-weight: 800; text-transform: uppercase; margin-bottom: 1.75rem; } .lead-strong { color: var(--color-secondary); font-weight: 700; text-transform: uppercase; font-size: 0.95rem; letter-spacing: 0.01em; } /* -------------------------------------------------------------------------- 7. PRZYCISKI -------------------------------------------------------------------------- */ .btn-brand { display: inline-flex; align-items: center; gap: 0.75rem; background-color: var(--color-primary); color: var(--color-secondary); font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; border: 0; } .btn-brand:hover { background-color: var(--color-secondary); color: #fff; } .link-more { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 700; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.03em; color: var(--color-secondary); } .link-more:hover { color: var(--color-primary); } /* -------------------------------------------------------------------------- 8. TŁO STAŁE (fixed) — newsletter, "Dzieła które wspieramy", footer Na urządzeniach dotykowych background-attachment: fixed bywa niewspierane / powoduje problemy z wydajnością — dlatego wyłączamy je poniżej 992px. -------------------------------------------------------------------------- */ .bg-fixed-media { position: relative; background: url(../img/tlo.png); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; color: #fff; } .bg-fixed-media::before { content: ""; position: absolute; inset: 0; background-color: rgba(17, 17, 17, 0.82); } .bg-fixed-media > .container, .bg-fixed-media > .row { position: relative; z-index: 1; } @media (max-width: 991.98px) { .bg-fixed-media { background-attachment: scroll; } } .newsletter-section .form-control { background-color: transparent; border: 1px solid var(--color-primary); color: #fff; border-radius: 0; } .newsletter-section .form-control::placeholder { color: rgba(255, 255, 255, 0.55); } .newsletter-section .form-control:focus { box-shadow: 0 0 0 0.2rem rgba(186, 216, 8, 0.25); background-color: transparent; color: #fff; } /* -------------------------------------------------------------------------- 9. AKTUALNOŚCI -------------------------------------------------------------------------- */ .news-card { position: relative; overflow: hidden; border-radius: 0.5rem; } .news-card img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; display: block; } .news-card .news-caption { position: absolute; left: 0; right: 0; bottom: 0; background-color: rgba(17, 17, 17, 0.78); color: #fff; padding: 1.25rem 1.5rem; } .news-card .news-caption h3 { font-size: 1.05rem; } .news-card .news-caption .link-more { color: #fff; } .news-list-item img { width: 100%; height: 100px; object-fit: cover; border-radius: 0.35rem; } .news-list-item h3 { font-size: 0.95rem; } /* -------------------------------------------------------------------------- 10. DZIEŁA, KTÓRE WSPIERAMY -------------------------------------------------------------------------- */ .dzielo-card img { width: 100%; height: 190px; object-fit: cover; border-radius: 0.5rem; } .dzielo-card h3 { color: #fff; font-size: 1rem; margin-top: 1rem; } .dzielo-card p { color: rgba(255, 255, 255, 0.75); font-size: 0.9rem; } .dzielo-card a.link-more { color: var(--color-primary); } .scroll-more { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.6); color: #fff; } /* -------------------------------------------------------------------------- 11. WESPRZYJ NAS — lista korzyści -------------------------------------------------------------------------- */ .benefit-list { list-style: none; padding-left: 0; } .benefit-list li { position: relative; padding-left: 1.75rem; margin-bottom: 0.6rem; } .benefit-list li::before { content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--color-primary); position: absolute; left: 0; top: 0.15rem; font-size: 0.8rem; } .krs-number { color: var(--color-primary); font-weight: 800; } /* -------------------------------------------------------------------------- 12. PARTNERZY -------------------------------------------------------------------------- */ .partner-logo { filter: grayscale(1); opacity: 0.65; transition: filter 0.25s ease, opacity 0.25s ease; } .partner-logo:hover { filter: grayscale(0); opacity: 1; } /* -------------------------------------------------------------------------- 13. FOOTER -------------------------------------------------------------------------- */ .site-footer a { color: rgba(255, 255, 255, 0.8); } .site-footer a:hover { color: var(--color-primary); } .site-footer .footer-cta { border-left: 3px solid var(--color-primary); padding-left: 1rem; } .site-footer .footer-cta .cta-headline { color: var(--color-primary); font-weight: 800; text-transform: uppercase; line-height: 1.15; } .site-footer h3 { font-size: 0.8rem; letter-spacing: 0.05em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); margin-bottom: 1rem; } .site-footer .form-control { background-color: transparent; border: 1px solid var(--color-primary); color: #fff; border-radius: 0; } .site-footer .form-control::placeholder { color: rgba(255, 255, 255, 0.55); } .site-footer hr { border-color: rgba(255, 255, 255, 0.15); }