/* --------------------------------------------------------------------------- Strona główna (/). Podpięty globalnie w App.razor, a nie w tej strony. Powód: przy enhanced navigation Blazor podmienia od razu, a nowy dopiero wstawia do - element wstawiony dynamicznie nie blokuje renderowania treści już obecnej w DOM, więc przy przejściu z menu migała strona bez stylów. Wszystko jest zagnieżdżone pod .hp, dzięki czemu obecność arkusza na innych podstronach niczego nie zmienia i nie kłóci się ze stylami MudBlazora. Paleta jest celowo identyczna z landingiem reklamowym (css/offer-landing.css): złoto + krem + brąz. Jeśli zmieniasz markę, zmieniaj oba pliki razem. --------------------------------------------------------------------------- */ .hp { --hp-ink: #2c2c2c; --hp-muted: #5f5750; --hp-cream: #fbf8f5; --hp-cream-dark: #f5efe8; --hp-line: #e8dfd5; --hp-brown: #5d4037; --hp-brown-soft: #8d6e63; --hp-gold: #b0894f; --hp-gold-dark: #96712f; --hp-star: #e0a83c; --hp-wa: #1f9c53; --hp-wa-dark: #157a3f; color: var(--hp-ink); background: #fff; font-size: 1.0625rem; line-height: 1.7; } .hp * { box-sizing: border-box; } .hp img { max-width: 100%; } .hp h1, .hp h2, .hp h3, .hp p, .hp li, .hp a { overflow-wrap: anywhere; } /* :where() zeruje specyficzność, żeby zwykła klasa (.hp-lead itd.) potrafiła ten margines nadpisać - inaczej ".hp p" wygrywa z samą klasą. */ .hp :where(p) { margin: 0 0 1.1em; } .hp :where(p):last-child { margin-bottom: 0; } .hp strong { font-weight: 600; color: var(--hp-brown); } /* MudPaper opakowujący @Body dokłada 2rem odstępu góra/dół. Hero ma być full-bleed, więc na stronie głównej ten odstęp zerujemy. */ .mud-paper.responsive-main:has(> .hp) { padding-top: 0; padding-bottom: 0; } /* --- układ ---------------------------------------------------------------- */ .hp-section { padding: 4.5rem 1.25rem; } .hp-section--cream { background: var(--hp-cream); border-top: 1px solid var(--hp-line); border-bottom: 1px solid var(--hp-line); } .hp-inner { max-width: 1140px; margin: 0 auto; } .hp-inner--narrow { max-width: 820px; margin: 0 auto; } .hp-center { text-align: center; } /* --- typografia ----------------------------------------------------------- */ .hp-eyebrow { display: inline-block; font-size: 0.8125rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--hp-gold-dark); margin: 0 0 0.9rem; } .hp-h1 { font-family: 'Cinzel', serif; font-size: clamp(2.1rem, 5.6vw, 3.75rem); line-height: 1.08; font-weight: 400; margin: 0 0 1rem; } .hp-h2 { font-family: 'Cinzel', serif; font-size: clamp(1.6rem, 3.6vw, 2.4rem); line-height: 1.2; font-weight: 400; margin: 0 0 0.6rem; } .hp-h3 { font-family: 'Cinzel', serif; font-size: 1.3rem; line-height: 1.3; font-weight: 400; margin: 0 0 0.6rem; color: var(--hp-ink); } .hp-sub { font-family: 'Cinzel', serif; font-size: clamp(1.05rem, 2.1vw, 1.35rem); font-weight: 400; line-height: 1.45; color: var(--hp-brown-soft); margin: 0; } .hp-lead { font-size: 1.125rem; line-height: 1.7; color: var(--hp-muted); margin: 0 0 1.5rem; } .hp-rule { width: 60px; height: 2px; background: var(--hp-gold); border: 0; margin: 1.4rem 0 1.75rem; } .hp-center .hp-rule, .hp-rule--center { margin-left: auto; margin-right: auto; } /* --- hero ----------------------------------------------------------------- */ .hp-hero { position: relative; isolation: isolate; min-height: clamp(420px, 62vh, 640px); display: flex; align-items: flex-end; background: var(--hp-cream-dark); } /* Obraz jest osobnym (nie background-image), żeby przeglądarka mogła go pobrać z priorytetem razem z preloadem w - to jest LCP tej strony. */ .hp-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 38%; z-index: -2; } /* Przyciemnienie pod tekstem. Bez niego biała typografia gubi się na jasnych fragmentach zdjęcia i kontrast spada poniżej progu WCAG. */ .hp-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(28, 20, 16, .12) 0%, rgba(28, 20, 16, .38) 45%, rgba(28, 20, 16, .72) 100%); } .hp-hero-content { width: 100%; max-width: 1140px; margin: 0 auto; padding: 3rem 1.25rem 3.25rem; color: #fff; } .hp-hero-content .hp-eyebrow { color: #f0dcb8; } .hp-hero-content .hp-h1 { color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .35); max-width: 16ch; } .hp-hero-content .hp-sub { color: rgba(255, 255, 255, .92); max-width: 42ch; } .hp-hero-content .hp-rule { background: #d9b678; margin-bottom: 2rem; } /* --- przyciski ------------------------------------------------------------ */ .hp-cta { display: flex; flex-wrap: wrap; gap: 0.9rem; } .hp-cta--center { justify-content: center; } .hp-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; /*