/* ========================================================================== Landing "Feedback" (/) Port projektu Claude Design 32dda226-482e-4f52-a82d-dbc6f6e3960c (index.html). Tokeny: static/css/feedback-ds/tokens/*.css (kopia 1:1 — patrz README.md tam). Ta strona NIE dziedziczy po base.html i nie ładuje style.css, więc panel dostępności i klasy a11y są tu odtworzone na tokenach DS. ========================================================================== */ /* --- Układ strony --------------------------------------------------------- Źródło ma .page{height:100vh;overflow:hidden}. Używamy min-height i nie ucinamy przepełnienia: panel dostępności skaluje tekst do 200% (WCAG 1.4.4), a sztywne 100vh + overflow:hidden przycięłoby wtedy treść. Przy domyślnym rozmiarze czcionki render jest identyczny jak w projekcie. */ .page { min-height: 100vh; display: flex; flex-direction: column; } /* Nawigacja górna: static/css/topnav.css (wspólna z podstronami spod base.html) — znaczniki w templates/_topnav.html. Tu tylko zachowanie specyficzne dla landingu (przyklejenie + cień po przewinięciu) — owinięte w .landing-nav-wrap, bo topnav.css jest współdzielony z base.html i nie ma tam być sticky. Klasę .is-stuck dokłada static/js/landing-reveal.js. */ .landing-nav-wrap { position: sticky; top: 0; z-index: 30; background: var(--bg-page); border-bottom: 1px solid transparent; transition: border-color var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard); } .landing-nav-wrap.is-stuck { border-bottom-color: var(--border-subtle); box-shadow: var(--shadow-s); } /* Kotwice z menu górnego (#jak-to-dziala, #cennik) - płynne przewijanie, wyłączone przy prefers-reduced-motion/panelu dostępności (patrz body.reduced-motion niżej), i odstęp pod nagłówkiem sekcji, żeby przyklejony .landing-nav-wrap go nie zasłaniał po skoku z linku. */ html { scroll-behavior: smooth; } body.reduced-motion { scroll-behavior: auto; } #jak-to-dziala, #cennik { scroll-margin-top: 5rem; } /* --- Animacja wejścia przy przewijaniu (static/js/landing-reveal.js) ------ [data-reveal] startuje niewidoczny/przesunięty, JS dokłada .is-visible przy wejściu w viewport (IntersectionObserver, próg 10%, raz na element). Bez JS-a albo gdy JS jeszcze nie wystartował, treść ma być widoczna od razu — stąd reguła bazowa to "widoczne", a "ukryty" włącza dopiero .js-reveal na (dokładane przez sam skrypt zanim oznaczy elementy). Analogiczny wzorzec do .js-nav w nav.js. */ html.js-reveal [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 420ms var(--ease-out), transform 420ms var(--ease-out); will-change: opacity, transform; } html.js-reveal [data-reveal].is-visible { opacity: 1; transform: none; } body.reduced-motion [data-reveal], body.reduced-motion [data-reveal].is-visible { opacity: 1; transform: none; transition: none; } @media (prefers-reduced-motion: reduce) { html.js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } } /* --- Pasek informacyjny nad nawigacją (Issue #110) ------------------------ Tylko landing (znaczniki w templates/index.html). Pełna szerokość, nad nawigacją, żeby był pierwszą rzeczą na stronie. Kolory z tokenów DS — ten sam duet co .eyebrow (rose-700 na rose-100, kontrast 6,18:1), więc tryb wysokiego kontrastu obsługuje go bez osobnej reguły: przemapowanie tokenów niżej w tym pliku podmienia oba kolory. */ .promo-banner { background: var(--rose-100); border-bottom: var(--border-w) solid var(--black); padding: 9px 48px; text-align: center; } .promo-banner__text { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.4; letter-spacing: var(--tracking-wide); color: var(--rose-700); } /* --- Hero ---------------------------------------------------------------- */ .hero { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; padding: 0 48px 20px; max-width: 1400px; margin: 0 auto; width: 100%; } .eyebrow { display: inline-block; background: var(--rose-100); color: var(--rose-700); padding: 5px 14px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wide); margin-bottom: 14px; } .hero h1 { font-family: var(--font-display); font-size: clamp(32px, 4vw, 54px); line-height: 1.04; margin: 0 0 14px; } /* Issue #158: symulacja_live.html loads landing.css just for the pricing cards, but that pulls in the two-column .hero grid meant for the landing page's text+image layout. The trial hero only ever has an H1 in it, so fall back to a centered block instead of leaving it stuck in column 1. */ .hero.hero--trial { display: block; text-align: center; } .sub { font-size: 16px; line-height: 1.5; color: var(--text-secondary); max-width: 460px; margin: 0 0 18px; } /* Lista korzyści w hero, zastępująca dawny akapit .sub (Issue TBD). Ten sam rozmiar/kolor tekstu co .sub, plus ikona check w stylu .value-card__icon (rose-100/rose-700), tylko mniejsza i inline z tekstem. */ .hero-checklist { list-style: none; margin: 0 0 18px; padding: 0; max-width: 480px; display: flex; flex-direction: column; gap: 10px; } .hero-checklist li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; line-height: 1.5; color: var(--text-secondary); } .hero-checklist__icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--rose-100); color: var(--rose-700); } .cta-row { display: flex; gap: 14px; flex-wrap: wrap; } .cta-row .fb-btn { white-space: nowrap; } /* Odsłuchanie przykładowej rozmowy w hero - obraz sam rysuje pigułkę i tekst (jak .how-recording__play niżej w tym pliku), więc bez własnego tła/obrysu. Przycisk (nie link) - odtwarza nagranie inline, patrz how-it-works.js. */ .hero-listen { display: inline-flex; align-items: center; padding: 0; border: none; background: none; cursor: pointer; transition: transform var(--duration-base) var(--ease-standard); } .hero-listen:hover, .hero-listen:focus-visible { transform: scale(1.03); } .hero-listen.is-playing .hero-listen__img { /* Brak osobnej grafiki na stan "pauza" - przygaszenie sygnalizuje, że nagranie właśnie gra (jak .how-recording__play.is-playing). */ opacity: 0.7; } .hero-listen__img { display: block; height: 48px; width: auto; } /* Ikony inline (templates/_icons.html) — 16-20px obok tekstu, dziedziczą kolor z otoczenia (patrz docs/design.md, sekcja 8: "Adopted set: Lucide"). */ .icon { flex-shrink: 0; vertical-align: middle; } /* Plakietki zaufania pod CTA w hero (hero-owner z projektu Design) — krótkie, z ikoną, żeby rozwiać obiekcje ("czy trzeba płacić z góry?", "czy CV zostaje gdzieś zapisane?") tuż przy pierwszym wezwaniu do działania. */ .hero-reassurance { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 4px 0 0; padding: 0; } .hero-reassurance li { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: var(--text-secondary); } .hero-reassurance .icon { color: var(--rose-600); } /* Slot na zdjęcie z projektu. Proporcja dopasowana do hero_main4.jpg (898x1122 = 4:5, portret) - bez sztywnego max-height, żeby object-fit: cover nie musiał obcinać sylwetki, gdy zdjęcie jest wyższe niż szerokie; sekcja .hero (flex:1 w .page bez ograniczenia wysokości) po prostu rośnie o tyle, ile portretowe zdjęcie faktycznie potrzebuje. */ .hero-media { display: flex; align-items: center; justify-content: center; border-radius: var(--radius-l); aspect-ratio: 1 / 1; } .hero-media img { width: 100%; height: 100%; object-fit: contain; display: block; -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .35) 22%, rgba(0, 0, 0, .85) 48%, #000 68%); mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, .35) 22%, rgba(0, 0, 0, .85) 48%, #000 68%); } /* --- Button (port komponentu DS core/Button.jsx, variant="primary") ------- Źródłowy JSX renderuje style inline; tu ten sam zestaw jako klasa, żeby nie ciągnąć React UMD + bundla DS dla jednego przycisku. Rozmiary s/m/l zgodne z obiektem `sizes` w komponencie. */ .fb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-body); font-weight: 700; font-size: var(--text-body-m); line-height: 1; padding: 11px 22px; border-radius: var(--radius-pill); border: var(--border-w) solid transparent; text-decoration: none; cursor: pointer; transition: transform var(--duration-fast) var(--ease-standard), background var(--duration-base) var(--ease-standard); } .fb-btn--s { gap: 6px; font-size: var(--text-body-s); padding: 8px 16px; } .fb-btn--l { gap: 10px; font-size: var(--text-body-l); padding: 15px 28px; } /* Świadomie --brand-primary-hover (rose-600 #C22C4E) zamiast --brand-primary (rose-500 #E23A5F): biały tekst na rose-500 daje 4,20:1, poniżej progu WCAG AA 4,5:1 dla tekstu o normalnej wielkości. rose-600 daje 5,60:1. Ten sam wybór co --color-accent w style.css — obie warstwy mają być zgodne. */ .fb-btn--primary { background: var(--brand-primary-hover); color: var(--white); border-color: var(--brand-primary-hover); } .fb-btn--primary:hover { background: var(--brand-primary-active); border-color: var(--brand-primary-active); color: var(--white); } .fb-btn--secondary { background: var(--white); color: var(--text-primary); border-color: var(--black); } /* Odpowiednik onMouseDown -> scale(0.97) w komponencie. */ .fb-btn:active { transform: scale(0.97); } .fb-btn--primary:active { background: var(--brand-primary-active); border-color: var(--brand-primary-active); } .fb-btn[disabled] { opacity: 0.45; cursor: not-allowed; } /* Hero CTA — nadpisanie rozmiaru z projektu (style={{fontSize:16,padding:'16px 30px'}}). */ .fb-btn--hero { font-size: 16px; padding: 16px 30px; } /* --- Licznik minut platformy (Issue #147) --------------------------------- Pod dwoma CTA w hero, w jednej linii z resztą zdania (issue update - był samodzielnym paskiem między hero a "Jak to działa"). Liczba jest ostylowana jak wyświetlacz stopera (font mono, tabularne cyfry, ciemna "kapsuła") — ma się wyróżniać z reszty zdania, nie chować w zwykłym tekście. Rozmiar liczby w em (nie własny clamp) - kurczy się razem z tekstem, żeby całe zdanie + kapsuła zmieściły się w jednej linii nawet na wąskich ekranach. */ .minutes-counter__text { margin: 20px 0 0; font-size: clamp(12px, 2.6vw, 15px); font-weight: 700; color: var(--text-primary); white-space: nowrap; } .minutes-counter__value { display: inline-block; min-width: 2.4ch; margin-right: 2px; padding: 0.2em 0.6em; background: var(--black); color: var(--white); font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.35em; letter-spacing: 0.5px; line-height: 1.2; border-radius: var(--radius-m); vertical-align: middle; } /* --- Nagłówki sekcji (Issue #156) ------------------------------------------ Wspólny styl dla "Jak to działa", "Cennik" i "Bezpieczeństwo i prywatność" - żeby sekcje strony głównej trzymały jedną hierarchię nagłówków. */ .section-heading { font-family: var(--font-display); font-size: clamp(24px, 3vw, 34px); font-weight: 700; text-align: center; margin: 0 0 12px; color: var(--text-primary); } /* Słowo wyróżnione w nagłówku "Jak to działa? To naprawdę proste" - rose-700 zamiast rose-500/600, żeby tekst na jasnym tle strony (--bg-page) miał pewny kontrast, tak jak .eyebrow i .security-card__cta niżej. */ .section-heading__accent { color: var(--rose-700); } .section-lead { font-size: 16px; line-height: 1.5; color: var(--text-secondary); max-width: 640px; margin: 0 auto 32px; text-align: center; } /* --- Sekcja "Jak to działa" (Issue #156) ----------------------------------- */ .how-section { padding: 56px 48px; max-width: 1400px; margin: 0 auto; width: 100%; } /* Odsłuch nagrania symulacji, osadzony teraz w kroku 2 "Porozmawiaj na głos z asystentem AI" (dawniej osobny blok .how-recording nad krokami - patrz nagłówek templates/index.html). Elementy .how-recording__* zostały tylko tam, gdzie wciąż są używane: przycisk, ikona, podpis i samo