/* ===================================================================== branding-override.css — dopasowanie warstwy wizualnej referencyjnego landingu (adlume-landing-preview.pages.dev) do systemu marki, który już działa na blogu adlume.co i w panelu produktu Lumy. Wczytywany jako OSTATNI w index.html, po oryginalnych arkuszach Next.js. Nie zmienia struktury, treści ani interaktywności — wyłącznie kolor/font/promień/cień. Zero edycji plików w _next/static/. ŹRÓDŁO TOKENÓW (jedyne, którego użyto): PROJEKTY/ADLUME_PRZEJECIE/strona_nowa/assets/blog.3b1a4051e7.css Karta: tło linear-gradient(#282828,#1d1d1d), obrys rgba(82,82,82,.7), promień 16px, cień inset 0 1px 0 rgba(255,255,255,.04) + 0 20px 44px -24px rgba(0,0,0,.7) Pasek: tło linear-gradient(rgba(25,25,26,.5),rgba(25,25,26,.8)), obrys rgba(216,216,216,.3), promień 48px Font: 'Outfit', już wgrany lokalnie w /fonts, już zadeklarowany w @font-face oryginalnego CSS-u landingu — tylko nieużywany. METODA: przed napisaniem tego pliku każda z 12 sekcji z briefu została sprawdzona w przeglądarce (computed style: tło, obrys, promień, cień, font) i porównana z tokenami wyżej. Ważne odkrycie z tego sprawdzenia: ten landing i blog dzielą JEDNĄ bazę tokenów CSS (te same zmienne --primary-three:#86ff1d, --primary-three-250:#e4fe3c/-750:#7bfe3c, font-family-sans:"Outfit" — identyczne wartości). Pasek nawigacji, przyciski Login/Get started i karta demo Slacka są już dosłownie bajt-w-bajt zgodne z tokenami bloga i NIE są tu ruszane. Rozjazd, który zgłosił Marek, siedzi w innych, węższych miejscach: część kart używa płaskiego szarego tła i bladego obrysu zamiast gradientu i ciemnego obrysu karty, a cały tekst strony używa domyślnego fontu Tailwind (`ui-sans-serif, system-ui...`) zamiast Outfit, mimo że Outfit jest już wczytany. ===================================================================== */ /* --------------------------------------------------------------------- 0. FONT — globalnie, jedna linia. Strona ma zdefiniowany font-family-sans: "Outfit" i wgrany plik czcionki, ale większość elementów używa klasy Tailwind `font-sans`, która czyta zmienną --font-sans (domyślny stos systemowy), nie --font-family-sans. Podmiana --font-sans na Outfit naprawia typografię na całej stronie w jednym miejscu, bez dotykania pojedynczych elementów — z jednym świadomym wyjątkiem (patrz sekcja 3). --------------------------------------------------------------------- */ :root { --font-sans: 'Outfit', ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } /* --------------------------------------------------------------------- 1. PASEK NAWIGACJI GÓRNEJ — SPRAWDZONE, ZOSTAWIONE BEZ ZMIAN. .navigationRounded_nav__60xng: tło linear-gradient(rgba(25,25,26,.5), rgba(25,25,26,.8)), obrys rgba(216,216,216,.3), promień 48px, cień 4px 4px 10px rgba(21,21,22,.15), blur(20px) — dosłownie identyczne z tokenem paska z bloga. Przycisk Login (.button_outlineGray) ma tło #252527 i obrys rgba(216,216,216,.3) — dokładnie blog .przycisk.pusty. Przycisk Get started ma gradient linear-gradient(90deg,#e4fe3c,#7bfe3c) — dokładnie blog --gradient-akcji. Brak rozjazdu, brak zmian. --------------------------------------------------------------------- */ /* --------------------------------------------------------------------- 2. HERO — nagłówek/akapit dziedziczą globalny font (sekcja 0), kolor już biały. CTA "Get started" już zgodne (patrz sekcja 1). CTA "Talk to sales" (.button_outlineInverse) używał osobnego, "szklanego" stylu (tło białe 4%, obrys białe 22%) zamiast wzorca .przycisk.pusty, mimo że wzorzec ten sam komponent guzika już ma poprawnie wdrożony jako .button_outlineGray (Login). ZMIENIONE: dociągnięte do tego samego, już poprawnego wzorca. Dotyczy też drugiego użycia tego samego przycisku w sekcji 12 (CTA przed stopką) — nie w mockupie Slacka. --------------------------------------------------------------------- */ .button_outlineInverse__oYBKS { background: #252527 !important; border-color: rgba(216, 216, 216, .3) !important; color: #fff !important; } /* --------------------------------------------------------------------- 3. MOCKUP PRODUKTU / OKNO DEMO SLACKA — patrz sekcja 14 niżej. Ta sekcja opisywała stan sprzed przebudowy (gdy okno było jeszcze oryginalnym, niezmienionym mockupem Next.js) — od piątej rundy okno jest w całości podmienianym przez assets/hero-slack-polish.js HTML-em, więc poniższy opis jest już tylko historią decyzji, nie stanem bieżącym. --------------------------------------------------------------------- */ /* --------------------------------------------------------------------- 4. PASEK INTEGRACJI "WORKS WITH" — ŚWIADOMIE ZOSTAWIONE BEZ ZMIAN. Kafelki logo: tło białe 3%, obrys białe 10%, promień 14px. Blog nie ma identycznego komponentu "kafelek loga", najbliższy odpowiednik to .kafelek (obrys pełny #f5f5f5, promień 10px, tło przezroczyste) — ten sam zamysł wizualny (blady, delikatny obrys na przezroczystym tle), tylko wyrażony przez przezroczystość zamiast pełnego jasnego koloru. Zmiana groziłaby wizualną regresją na kafelkach z logotypami partnerów bez realnej korzyści dla spójności marki — zostawione. --------------------------------------------------------------------- */ /* --------------------------------------------------------------------- 5. FIRST VALUE FLOW — pasek postępu już ma wypełnienie w kolorze marki (#e4fe3c). Kafelki wyboru Slack/Teams/Connect i pole na adres używają tego samego "szklanego" wzorca co integracje (białe tło 4-5%, biały obrys 10-12%) — to są elementy funkcjonalne (wybór, pole), nie karty treści, więc świadomie zostawione z tego samego powodu co sekcja 4. --------------------------------------------------------------------- */ /* --------------------------------------------------------------------- 6. WHAT LUMY DOES — SPRAWDZONE: to zwykła siatka 4 kolumn tekstu (.sg-heading / .sg-columns / .sg-column), bez żadnego kontenera karty (tło i obrys przezroczyste na każdym poziomie). Nie ma tu niczego do przebranżowienia poza fontem, który już naprawia sekcja 0. --------------------------------------------------------------------- */ /* --------------------------------------------------------------------- 7. THE HARD PART — porównanie DIY vs Lumy. Karta "Lumy" (.sectionCard_ elevated) ma już tło z odcieniem zielonym rgba(228,254,60,.04) i obrys rgba(228,254,60,.28) — to jest spójne z marką i celowo mocniejsze niż karta DIY, więc zostaje bez zmian. Karta "DIY" (bez modyfikatora elevated) miała płaskie tło #252527 (to jest token --background-card strony, czyli w praktyce kolor przycisku .pusty z bloga, nie kolor karty) i blady obrys rgba(216,216,216,.3) (to jest token paska nawigacji, nie karty). ZMIENIONE: nadpisana lokalnie zmienna --background-card na gradient karty z bloga i obrys na --obrys-karty, tylko dla wariantu bez modyfikatora "elevated". --------------------------------------------------------------------- */ .sectionCard_sectionCard__72U2j.sectionCard_padding-lg__xdJml:not(.sectionCard_elevated__Rkyxu) { --background-card: linear-gradient(#282828, #1d1d1d); border-color: rgba(82, 82, 82, .7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 20px 44px -24px rgba(0, 0, 0, .7); } /* --------------------------------------------------------------------- 8. REFERENCJE / TESTIMONIALE — karty "szklane" (.testimonialCard_glass) mają tło var(--background-card-dark), które po rozwinięciu jest tym samym gradientem co pasek nawigacji z bloga (linear-gradient rgba(25,25,26,.5)/.8) — to JEST już token marki, tylko użyty jako tło karty zamiast paska. Zostaje bez zmian. Obrys był biały 12% (bez odpowiednika w żadnym tokenie); ZMIENIONE tylko to: dociągnięty do tego samego obrysu, z którego już korzysta ten gradient na pasku nawigacji (rgba(216,216,216,.3)), żeby karta i pasek, które dzielą tło, dzieliły też obrys. Promień 24px (szerszy niż karta blogowa 16px) zostawiony — to celowo większe, "unoszące się" karty w karuzeli, nie odpowiednik .karta. --------------------------------------------------------------------- */ .testimonialCard_card__RgWeK.testimonialCard_glass__ZYjHb { border-color: rgba(216, 216, 216, .3); } /* --------------------------------------------------------------------- 9. PASEK STATYSTYK ("10+ years / $30M / 50+") — .sp-card miała płaskie tło #252527 (token --background-card, patrz sekcja 7) i obrys inline rgba(255,255,255,.08) bez odpowiednika w tokenach. ZMIENIONE: tło przez lokalne nadpisanie --background-card na gradient karty, obrys na --obrys-karty (border jest tu ustawiony inline w HTML, stąd !important — jedyny sposób, żeby wygrać z atrybutem style bez ruszania kodu strony). --------------------------------------------------------------------- */ .sp-card { --background-card: linear-gradient(#282828, #1d1d1d); border-color: rgba(82, 82, 82, .7) !important; } /* --------------------------------------------------------------------- 10. BEZPIECZEŃSTWO ("What AdLume touches / What Lumy never does") — .glassCard_glassCard__tGLqQ.glassCard_padding-none miała płaskie tło #252527 (token --background-card). ZMIENIONE: tło na gradient karty, tym samym lokalnym nadpisaniem zmiennej jak w sekcjach 7 i 9, przez selektor ograniczony do wariantu "padding-none" (żeby NIE dotknąć stopki, która współdzieli bazową klasę .glassCard_glassCard__tGLqQ, ale z innymi modyfikatorami i innym, już dobrze dobranym tłem — patrz sekcja 13). Obrys ZOSTAWIONY: karty mają zielonkawy obrys oklch(0.91 0.22 130/.18), czyli odcień z rodziny zielni marki użyty jako subtelna poświata zaufania — to jest już spójne kolorystycznie, nadpisywanie go na szary obrys karty zabrałoby tej sekcji jedyny akcent, jaki ma. --------------------------------------------------------------------- */ .glassCard_glassCard__tGLqQ.glassCard_padding-none__1UYn2 { --background-card: linear-gradient(#282828, #1d1d1d); } /* --------------------------------------------------------------------- 11. CENNIK — trzy karty planów dzielą jedną klasę Tailwind bez żadnej nazwy modułu (.flex.flex-col.rounded-2xl.overflow-hidden — sprawdzone: to JEDYNE 3 wystąpienia tego zestawu klas na całej stronie, wszystkie w sekcji cennika, więc selektor jest bezpieczny). Wszystkie trzy miały płaskie tło #252527 (token --background-card). ZMIENIONE: tło na gradient karty dla wszystkich trzech. Obrys ZMIENIONY tylko na dwóch zwykłych planach (7-Day, Lumy+Operator), na --obrys-karty; plan "Pro" (oznaczony "Most popular") ma inline obrys rgba(228,254,60,.3) i zieloną poświatę — to jest świadome wyróżnienie najważniejszego planu kolorem marki i ZOSTAJE nietknięte (selektor wyklucza go po treści jego inline stylu, żeby nie zgasić wyróżnienia). --------------------------------------------------------------------- */ .flex.flex-col.rounded-2xl.overflow-hidden { --background-card: linear-gradient(#282828, #1d1d1d); } .flex.flex-col.rounded-2xl.overflow-hidden:not([style*="254, 60"]) { border-color: rgba(82, 82, 82, .7) !important; } /* --------------------------------------------------------------------- 12. FAQ — .collapsibleCard_card__V8u4H miała wprost zakodowane płaskie tło #232323 (nie przez zmienną --background-card, tylko literalną wartość w regule klasy) i blady obrys var(--border-common-dark) — to jest token paska nawigacji, nie karty. ZMIENIONE: tło na gradient karty, obrys i cień na dokładne wartości .karta z bloga. Przycisk rozwijania (ikona +, aria-label "Expand"/"Collapse") jest osobnym, już poprawnie wybranionym komponentem .button_outlineGray — nie ruszany, bo już zgodny (patrz sekcja 1). --------------------------------------------------------------------- */ .collapsibleCard_card__V8u4H { background: linear-gradient(#282828, #1d1d1d); border-color: rgba(82, 82, 82, .7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 20px 44px -24px rgba(0, 0, 0, .7); } /* --------------------------------------------------------------------- 13. STOPKA — SPRAWDZONE, ZOSTAWIONE BEZ ZMIAN. .footer_card ma tło linear-gradient(rgba(32,34,29,.45), rgba(21,21,22,.78)) — bardzo bliskie tłu paska nawigacji z bloga, z lekkim ciepłym/zielonym odcieniem, i cień z poświatą rgba(134,255,29,.06), czyli dosłownie --zielen (#86ff1d) z bloga jako blask wokół stopki. Obrys rgba(216,216,216,.14) to ta sama rodzina koloru co obrys paska nawigacji (216,216,216), tylko w niższej sile — świadomie subtelniejsze zamknięcie strony. Już spójne z marką, nic do zmiany. --------------------------------------------------------------------- */ /* --------------------------------------------------------------------- 14. HERO — OKNO DEMO SLACKA, SZÓSTA RUNDA (klasy "bs3-"). Piąta runda (klasy "bs2-") wróciła do prostszego układu kanału, ale zostawiła jeszcze rzeczy, które Marek uznał za zbędne po zobaczeniu tego na żywo: kolumnę z literami workspace'ów (A/L/P/G), nazwę "AdLume" i podtytuł "paid ads team" w panelu, podtytuł "Lumy is monitoring paid ads here" pod nazwą kanału. Ta runda je usuwa — panel zaczyna się od razu od listy kanałów, nagłówek ma tylko "# performance" + "4 members". Przycisk "Ask Lumy" zamieniony na "Decline" (czerwony obrys/tekst) — jedyna świadoma zmiana TREŚCI w tej rundzie, wprost zlecona przez Marka; reszta tekstu wiadomości zostaje nietknięta. Awatar Lumy: prawdziwa ikonka marki (assets/lumy-mark.svg, kopia zatwierdzonego znaku z PROJEKTY/VENTURE-03_CASS/landing/brand/) zamiast litery "L". Awatary ludzi (Alex/Kate): okrągłe, neutralna sylwetka zamiast litery w kwadracie — nie mamy zdjęć do użycia w mockupie marketingowym, to jest placeholder, nie próba podrobienia zdjęcia. Naprawiony bug, DRUGIE PODEJŚCIE (opisane szerzej w assets/hero-slack-polish.js): pierwsza próba (obserwator podpięty pod sam węzeł okna) nie wystarczyła — Marek zgłosił, że stary wygląd nadal wraca po kliknięciu zakładki. Powód: każda zakładka to inny wariant komponentu, więc React przy zmianie zakładki nie czyści dzieci okna, tylko podmienia CAŁY węzeł na nowy — obserwator podpięty pod stary, usunięty już węzeł przestaje działać. Naprawa: obserwator pilnuje całej strony (document.body, subtree), więc łapie też podmianę całego węzła, nie tylko zmiany jego dzieci. Siódma runda: Marek zgłosił też, że wiadomość Lumy nie powinna wyglądać jak osobna, oprawiona w ramkę karta — powinna wyglądać jak zwykła wiadomość na Slacku, tak samo jak wiadomości Alex/Kate. Usunięty kontener .bs3-card (tło/obrys/cień) — tekst, lista i przyciski Approve/Decline są teraz bezpośrednio w treści wiadomości, bez ramki. Kolory z tych samych tokenów co reszta strony (tło #151317/#19171d, marka #E4FE3C, gradient karty --background-card jak w sekcjach 7/9/10/11 wyżej — używany gdzie indziej na stronie, nie w tym oknie od siódmej rundy). Kolor "Decline" (#ef4444) jest jedynym kolorem w tym pliku spoza tokenów bloga — czerwony ostrzegawczy nie ma odpowiednika w palecie marki, bo marka nie ma dotąd stanu "odrzuć/usuń". --------------------------------------------------------------------- */ .brand-app-badge { display: inline-flex; align-items: center; padding: 1px 5px; border-radius: 3px; background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .5); font-size: 9px; font-weight: 700; letter-spacing: .03em; line-height: 1.4; } /* Wysokość znowu na sztywno, ale tym razem policzona z treści, nie zgadnięta — Marek: "żeby ten dashboard zawsze był tej samej wysokości, bo teraz jest z tym różnie". Zmierzone rzeczywiste wysokości wszystkich pięciu scenariuszy (3 albo 4 wiadomości): Insights 506px, Trends 506px, Models 525px, Sources 550px, Metrics 567px (najdłuższy — ma dodatkowe pytanie o dashboard). 580px = najdłuższy scenariusz + margines, więc żaden nie przycina się ani nie scrolluje. Krótsze scenariusze (Insights, Trends) mają teraz PUSTĄ przestrzeń pod treścią zamiast krótszego okna — .bs3-thread dostaje justify-content:center, żeby ich wiadomości przesunęły się w dół, w stronę środka pudełka, zamiast siedzieć samotnie przy górnej krawędzi (dokładnie to, o co Marek poprosił: "przesuń te wiadomości z góry trochę niżej, żeby pasowało wizualnie"). */ .bs3-window { display: flex; width: 100%; height: 580px; color: #fff; } .bs3-panel { display: flex; flex-direction: column; gap: 10px; width: 190px; flex-shrink: 0; height: 100%; background: rgba(255,255,255,.02); border-right: 1px solid rgba(255,255,255,.06); padding: 20px 16px; } .bs3-channels-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; color: rgba(255,255,255,.35); } .bs3-channel-list { display: flex; flex-direction: column; gap: 1px; } .bs3-channel { padding: 6px 8px; border-radius: 6px; font-size: 13px; color: rgba(255,255,255,.55); } .bs3-channel--active { background: rgba(228,254,60,.12); color: #fff; font-weight: 600; } .bs3-main { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; } .bs3-main-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; border-bottom: 1px solid rgba(255,255,255,.07); flex-shrink: 0; } .bs3-main-title { font-size: 16px; font-weight: 700; } .bs3-members { flex-shrink: 0; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); font-size: 11px; color: rgba(255,255,255,.55); } /* Wiadomości w Slacku rosną od dołu do góry — Marek: "wiadomości zawsze powinny być wyrównane do dołu", nie wyśrodkowane. Wolne miejsce (przy krótszych scenariuszach jak Insights/Trends) ląduje więc nad wiadomościami, nie wokół nich. Jedyna zmiana z poprzedniej rundy: center -> flex-end. */ .bs3-thread { flex: 1; padding: 18px 20px; display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; overflow-y: auto; } .bs3-msg { display: flex; gap: 10px; align-items: flex-start; } .bs3-avatar { width: 32px; height: 32px; border-radius: 999px; overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .bs3-avatar svg { width: 100%; height: 100%; display: block; } .bs3-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; } .bs3-avatar--brand { background: #151317; border-radius: 8px; } .bs3-avatar--brand img { width: 100%; height: 100%; display: block; border-radius: 8px; } .bs3-msg-body { flex: 1; min-width: 0; } .bs3-msg-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; } .bs3-msg-name { font-size: 14px; font-weight: 700; color: #fff; } .bs3-msg-time { font-size: 11px; color: rgba(255,255,255,.38); } .bs3-msg-body > p { margin: 0; font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.82); } .bs3-list { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .bs3-list li { display: flex; gap: 6px; font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.75); } .bs3-list li span:first-child { color: rgba(255,255,255,.4); flex-shrink: 0; } .bs3-actions { display: flex; gap: 8px; margin-top: 12px; } .bs3-btn { border-radius: 999px; padding: 6px 14px; font-size: 12px; font-weight: 500; cursor: default; font-family: inherit; } /* Marek: "pamiętaj, żeby przycisk Approve i Decline były w naszym brandingu" — Decline miał czerwony obrys/tekst (#ef4444), kolor spoza palety marki (sam to wcześniej zaznaczyłem w komentarzu wyżej w tym pliku). Zamieniony na dokładnie ten sam "ghost" token, którego blog i ten landing już używają dla drugorzędnych przycisków (Login, dawne "Talk to sales") — #252527 / obrys rgba(216,216,216,.3) / biały tekst — więc oba przyciski są teraz z tej samej, jednej palety marki. */ .bs3-btn--approve { background: #E4FE3C; border: none; color: #151516; } .bs3-btn--decline { background: #252527; border: 1px solid rgba(216,216,216,.3); color: #fff; } .bs3-msg-reactions { display: flex; gap: 6px; margin-top: 10px; } .bs3-reaction { padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; background: rgba(228,254,60,.14); border: 1px solid rgba(228,254,60,.5); color: #E4FE3C; } .bs3-composer { margin: 0 20px 18px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.12); } .bs3-composer-toolbar { display: flex; align-items: center; gap: 14px; padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,.07); color: rgba(255,255,255,.35); } .bs3-toolbar-spacer { flex: 1; } .bs3-composer-input { padding: 10px 12px; font-size: 13px; color: rgba(255,255,255,.3); } .bs3-composer-bottom { display: flex; align-items: center; justify-content: space-between; padding: 4px 10px 10px; } .bs3-composer-icons { display: flex; align-items: center; gap: 12px; color: rgba(255,255,255,.35); } .bs3-composer-send { width: 26px; height: 26px; border-radius: 6px; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.35); } @media (max-width: 767px) { .bs3-panel { display: none; } } /* --------------------------------------------------------------------- 16. PASEK ZAKŁADEK DEMO (Insights/Metrics/Trends/Sources/Models) + OKNO SLACKA JAKO JEDEN BOX. Marek: "ten bar do przeklikiwania się był w jednym boxie i layoucie co slack". W oryginalnym markupie pasek zakładek (.slackShowcase_tabScroll__HJqB_) to osobna, wyśrodkowana pigułka (rounded-full, węższa niż okno), oddzielona od okna odstępem 28px (gap-7 na wspólnym flex-column rodzicu). Dociągnięte tu na sztywno: pasek dostaje szerokość i promienie górnych rogów okna, traci swój własny dolny obrys, okno traci górny obrys i górne promienie — tak, żeby szew między nimi był niewidoczny i całość czytała się jako jeden, ciągły box, tak jak pasek narzędzi w prawdziwym Slacku nad oknem rozmowy, nie jak oddzielny przełącznik nad kartą. Nie nadpisuję samej klasy `.gap-7` (współdzielona z innymi miejscami strony) — zamiast tego okno dostaje ujemny margines górny równy tej przerwie, żeby dotykało paska tylko w tym jednym miejscu. Kolor paska: #19171d, ten sam odcień co dawny wąski rail w oknie (sekcja 14/15, teraz nieużywany) — konsekwentnie ciemniejszy niż tło okna #151317, żeby czytał się jako osobna "belka", a nie zlewał się z treścią. --------------------------------------------------------------------- */ .slackShowcase_tabScroll__HJqB_ { border-radius: 20px 20px 0 0 !important; width: 100%; max-width: 960px; background: #19171d !important; border-color: rgba(255, 255, 255, .1) !important; border-bottom: none !important; padding: 10px 14px !important; } [class*="slackShowcase_window"] { margin-top: -28px; border-top: none !important; border-radius: 0 0 20px 20px !important; } /* Zakładki nieaktywne były bg-transparent — widoczne jako osobne, klikalne przyciski dopiero po najechaniu myszką. Marek: "nie jest tak oczywiste, że one są klikalne". Dopisane tu subtelne, STAŁE tło pigułki (białe 6%), żeby każda zakładka czytała się jako osobny przycisk od razu, nie tylko na hover — ta sama rodzina "cichego tła" (rgba biel na niskiej sile), której strona już używa dla kafelków integracji i pól funkcjonalnych. Aktywna zakładka (zielona) nie jest tu ruszana. */ .slackShowcase_tabScroll__HJqB_ [role="tab"][aria-selected="false"] { background: rgba(255, 255, 255, .06) !important; } /* --------------------------------------------------------------------- 18. SPÓJNOŚĆ CZCIONKI Z RESZTĄ STRONY — Marek: "grubość tych wpisów... nie pokrywa się za bardzo z tym, co jest poza mockupem". Font-family był już wspólny (Outfit, sekcja 0), ale kilka wag w tym pliku przekraczało sufit, którego reszta strony nigdy nie przekracza: H1 i H2 na całej stronie mają najwyżej wagę 700, przyciski (Get started, Talk to sales) mają wagę 500 — sprawdzone bezpośrednio computed style. Poprawione: nagłówek kanału z 800 na 700 (był grubszy niż H1), przyciski Approve/ Decline z 600 na 500 (miały być takie same jak inne przyciski na stronie, nie grubsze). Nazwa nadawcy zostaje na 700 — to już jest sufit strony, nie ponad nim. --------------------------------------------------------------------- */ /* --------------------------------------------------------------------- 17. LINIJKA GWARANCJI POD CTA W HERO — Marek najpierw poprosił o przeniesienie jej pod okno demo (stąd .bs3-guarantee), potem o powrót na pierwotne miejsce, pod przyciskami "Get started"/"Talk to sales". Przeniesienie w DOM zostało cofnięte w assets/hero-slack-polish.js — linijka zostaje w oryginalnym miejscu, tylko z usuniętym "$10 first week. " z początku tekstu. Klasa .bs3-guarantee nie jest już nadawana nigdzie w JS-ie; ta reguła zostaje na wypadek starej wersji w pamięci przeglądarki, ale nic już jej nie używa. --------------------------------------------------------------------- */ .bs3-guarantee { margin-top: 24px !important; }