/* ========================================================= Myślenie Systemowe – warstwa modernizująca (2026) Lżejsza kolorystyka, miękkie kształty, typografia: - szeryfowa (Lora) w nagłówkach i tekstach głównych, - bezszeryfowa (Inter) w pozostałych elementach. Obie rodziny obsługują polskie znaki diakrytyczne. Czcionki ładowane są przez w każdej strony. ========================================================= */ :root { --ms-crimson: #e11d48; /* żywa róża/malina */ --ms-crimson-soft: #fb6f8e; --ms-plum: #4c1d6b; /* nasycony fiolet (ciemny pasek nav) */ --ms-violet: #7c3aed; /* żywy fiolet do gradientów */ --ms-accent: #f59e0b; /* bursztyn – akcent, hover w nav */ --ms-accent-bright: #fbbf24; --ms-veil: rgba(76, 29, 107, 0.82); /* jednolity, półprzezroczysty kolor: header + menu */ --ms-ink: #2b2733; --ms-body: #4a4650; --ms-bg: #faf7f3; --ms-bg-soft: #f4efe9; --ms-card: #ffffff; --ms-muted: #726c78; --ms-border: #ece6ee; --ms-serif: 'Lora', Georgia, 'Times New Roman', serif; --ms-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --ms-shadow-sm: 0 6px 18px rgba(43, 39, 51, 0.06); --ms-shadow-md: 0 12px 34px rgba(43, 39, 51, 0.09); --ms-radius: 16px; } html { scroll-behavior: smooth; } /* ---------- Typografia ---------- */ body { font-family: var(--ms-serif); background-color: var(--ms-bg); color: var(--ms-ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-family: var(--ms-serif); letter-spacing: -0.01em; } section p, .card-text, p { color: var(--ms-body); } /* Elementy pomocnicze – krój bezszeryfowy */ .navbar, .navbar-brand, .navbar-subtitle, .nav-link, .btn, button, input, select, textarea, label, footer, small, .small, .footer-links, .footer-legal, .book-more, .case-num, .case-link, .badge, .cookie-consent-content { font-family: var(--ms-sans); } /* ---------- Linki (bez podkreśleń) ---------- */ a { color: var(--ms-crimson); text-decoration: none; } a:hover, a:active, a:focus { color: var(--ms-violet); text-decoration: none; } footer a, .footer-links a, .footer-legal, footer a:hover, .footer-links a:hover, .footer-legal:hover { text-decoration: none; } /* ---------- Sekcje / tła ---------- */ .bg-light { background-color: var(--ms-bg-soft) !important; } section hr, hr { border-bottom-color: rgba(255, 255, 255, 0.6); } /* ---------- Przyciski (miękka pigułka, lekki cień) ---------- */ .btn { border-radius: 999px; font-weight: 600; letter-spacing: 0.2px; } .btn-primary { background-color: var(--ms-crimson); border-color: var(--ms-crimson); color: #fff; padding: 11px 28px; box-shadow: 0 8px 22px rgba(225, 29, 72, 0.28); transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } .btn-primary:active, .btn-primary:focus, .btn-primary:hover { background-color: var(--ms-violet) !important; border-color: var(--ms-violet) !important; color: #fff; transform: translateY(-2px); box-shadow: 0 12px 30px rgba(124, 58, 237, 0.34); } /* ---------- Cienie / karty – lżej i miękko ---------- */ .shadow { box-shadow: var(--ms-shadow-sm) !important; border-radius: var(--ms-radius); } .card { border: 1px solid var(--ms-border); border-radius: var(--ms-radius); overflow: hidden; background: var(--ms-card); } .hop { transition: transform 0.25s ease, box-shadow 0.25s ease; } .hop:hover { transform: translateY(-6px); box-shadow: var(--ms-shadow-md); } /* Kafelki na stronie głównej i publikacjach */ .agenda .shadow, a.agenda .shadow { border-radius: var(--ms-radius); } .agenda .bg-light { background-color: var(--ms-card) !important; } /* ---------- Nagłówek (masthead) – jednolity, półprzezroczysty kolor ---------- */ header.masthead { background-image: linear-gradient(var(--ms-veil), var(--ms-veil)), url(../img/bg5.jpg); } @media (min-width: 768px) { header.masthead { background-image: linear-gradient(var(--ms-veil), var(--ms-veil)), url(../img/bg5.jpg); } } header.masthead h1 { letter-spacing: -0.02em; } /* ---------- Żywy gradient tekstowy (ikony kafelków, akcenty) ---------- */ .text-gradient { background: linear-gradient(135deg, var(--ms-crimson) 0%, var(--ms-violet) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---------- Sekcja CTA „Wydarzenia" ---------- */ .system { background-image: linear-gradient(var(--ms-veil), var(--ms-veil)), url(../img/bg5.jpg); color: #fff; } .system h2, .system p { color: #fff; } .system a.speaker, .system a { color: var(--ms-accent-bright); text-decoration: none; font-weight: 600; } .system a.speaker:hover, .system a:hover { color: #fff; } .system .btn-primary { background-color: #fff; border-color: #fff; color: var(--ms-plum); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18); } .system .btn-primary:hover, .system .btn-primary:focus, .system .btn-primary:active { background-color: var(--ms-plum) !important; border-color: var(--ms-plum) !important; color: #fff; } /* ---------- Nawigacja – przezroczysta u góry, odcień po scrollowaniu ---------- */ #mainNav, #mainNav:hover { background-color: transparent; box-shadow: none; transition: background-color 0.3s ease, box-shadow 0.3s ease; } #mainNav.navbar-shrink, #mainNav.scrolled { background-color: var(--ms-veil); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } @media (min-width: 992px) { #mainNav, #mainNav:hover { background-color: transparent; } #mainNav.navbar-shrink, #mainNav.scrolled { background-color: var(--ms-veil); } } /* Hover / aktywna pozycja menu – bursztyn, widoczny na jasnym i ciemnym pasku. Nadpisuje ciemny kolor z motywu (agency), który znikał po zjechaniu w dół. */ #mainNav .navbar-nav .nav-item .nav-link:hover, #mainNav .navbar-nav .nav-item .nav-link.active, #mainNav.navbar-shrink .navbar-nav .nav-item .nav-link:hover, #mainNav.navbar-shrink .navbar-nav .nav-item .nav-link.active { color: var(--ms-accent) !important; } @media (min-width: 992px) { #mainNav .navbar-nav .nav-item .nav-link:hover, #mainNav .navbar-nav .nav-item .nav-link.active, #mainNav.navbar-shrink .navbar-nav .nav-item .nav-link:hover, #mainNav.navbar-shrink .navbar-nav .nav-item .nav-link.active { color: var(--ms-accent) !important; } } /* ---------- Stopka – ciemny śliwkowy zamiast czerni ---------- */ footer.bg-dark { background-color: #241a2e !important; } /* ---------- Książki jako karty/kafelki ---------- */ .book { border: 1px solid var(--ms-border); border-radius: 8px; } .book-item { margin: 0; height: 100%; align-items: flex-start; /* okładka i tekst wyrównane do góry */ background: var(--ms-card); border: 1px solid var(--ms-border); border-radius: var(--ms-radius); padding: 1.6rem; box-shadow: var(--ms-shadow-sm); transition: transform 0.25s ease, box-shadow 0.25s ease; } .book-item:hover { transform: translateY(-6px); box-shadow: var(--ms-shadow-md); } /* KLUCZOWE: bez min-width:0 długie słowa/tytuły wypychają kolumnę poza kartę (flexbox domyślnie daje min-width:auto). Dzięki temu tekst zawija się w karcie. */ .book-item > .book-cover, .book-item > .book-info { min-width: 0; } .book-item .book-info { overflow-wrap: break-word; word-break: break-word; } .book-item .book-info h5 { color: var(--ms-plum); } /* ---------- Redesign: studium przypadku (bez zdjęć) ---------- */ .case-card { position: relative; height: 100%; background: var(--ms-card); border: 1px solid var(--ms-border); border-radius: 20px; padding: 2.25rem 1.9rem 2rem; overflow: hidden; box-shadow: var(--ms-shadow-sm); transition: transform 0.25s ease, box-shadow 0.25s ease; } .case-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: linear-gradient(180deg, var(--ms-crimson) 0%, var(--ms-plum) 100%); } .case-card:hover { transform: translateY(-6px); box-shadow: var(--ms-shadow-md); } .case-num { display: block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ms-crimson); } .case-company { margin: 0.35rem 0 1rem; font-size: 1.55rem; font-weight: 600; color: var(--ms-plum); } .case-card p { font-size: 1rem; line-height: 1.65; color: var(--ms-body); } .case-link { display: inline-block; margin-top: 0.85rem; font-weight: 600; font-size: 0.95rem; text-decoration: none; } .case-link i { font-size: 0.8rem; margin-left: 0.35rem; } .case-link:hover { color: var(--ms-violet); text-decoration: none; } .case-watermark { position: absolute; right: 1rem; bottom: -0.75rem; font-size: 5.5rem; font-weight: 700; line-height: 1; color: rgba(58, 35, 72, 0.05); pointer-events: none; font-family: var(--ms-sans); } /* ---------- Zaznaczenie tekstu ---------- */ ::selection { background: rgba(225, 29, 72, 0.20); text-shadow: none; }