/* ========================================================================== Alterity.pl (Microsoft 365) — components (Phase 1 subset) Faithful port of the cyberalterity design language: buttons, sections, eyebrow pills, gradient headline, glass cards, pillar cards, the `\` slash motif and brand ramp. Expanded into the full block library during page build. Depends on tokens.css. ========================================================================== */ /* ---------- Motion keyframes ---------- */ @keyframes fade-up { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes float-soft{ 0%,100% { transform: var(--float-base, none) translateY(0); } 50% { transform: var(--float-base, none) translateY(-8px); } } @keyframes slash-draw { to { stroke-dashoffset: 0; } } @keyframes mesh-shift { 0%, 100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(-6%,0,0); } } /* Reveal motion — content is VISIBLE on first paint (never JS-gated hiding; a slow script must not blank a section). Where the browser supports CSS scroll-driven animations, a subtle fade-up runs as pure progressive enhancement; everywhere else content simply shows. */ [data-reveal] { opacity: 1; transform: none; } @supports (animation-timeline: view()) { [data-reveal] { animation: fade-up var(--dur-slow) var(--ease) both; animation-timeline: view(); animation-range: entry 0% entry 40%; } /* Staggered entrances — grid children cascade in (offset animation ranges by DOM position) instead of fading as one block. Scroll-scrubbed, no JS. */ :is(.pillars__grid, .cards-grid, .ms-products, .sectors-grid, .logos, .testimonials-grid, .outcomes-ed) > * { animation: fade-up var(--dur-slow) var(--ease) both; animation-timeline: view(); animation-range: entry 0% entry 42%; } :is(.pillars__grid, .cards-grid, .ms-products, .sectors-grid, .logos, .testimonials-grid, .outcomes-ed) > :nth-child(4n+2) { animation-range: entry 8% entry 50%; } :is(.pillars__grid, .cards-grid, .ms-products, .sectors-grid, .logos, .testimonials-grid, .outcomes-ed) > :nth-child(4n+3) { animation-range: entry 16% entry 58%; } :is(.pillars__grid, .cards-grid, .ms-products, .sectors-grid, .logos, .testimonials-grid, .outcomes-ed) > :nth-child(4n) { animation-range: entry 24% entry 66%; } } @media (prefers-reduced-motion: reduce) { [data-reveal], :is(.pillars__grid, .cards-grid, .ms-products, .sectors-grid, .logos, .testimonials-grid, .outcomes-ed) > * { animation: none !important; opacity: 1; transform: none; } } /* ========================================================================== Sections — generic vertical rhythm wrappers ========================================================================== */ .section { padding-block: var(--section-pad-standard); } /* Strip tier (audit A5): label bands / one-line statements whose content is a fraction of the standard padding — half rhythm, still breathing. */ .section--strip { padding-block: clamp(var(--space-8), 4vw, var(--space-12)); } /* Compact hero (kontakt): height follows content — no viewport-third void. */ .home-hero.hero-rich--compact { padding-block: clamp(var(--space-12), 7vw, var(--space-20)); min-height: 0; } /* Trust markers as badge pills (replaces the faint grey micro-line). */ .hero-badges { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin: var(--space-6) 0 0; padding: 0; } .hero-badges__item { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 999px; } .hero-badges__check { color: var(--primary); font-weight: 800; } /* ============================================================ Hero visual variants (ported from the reference build): facts — 2×2 icon pills; mosaic — per-page geometric SVG scene. ============================================================ */ .hero-rich__facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-3); width: 100%; } @media (min-width: 600px) { .hero-rich__facts { grid-template-columns: 1fr 1fr; } } .hero-rich__fact { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; overflow-wrap: anywhere; } .hero-rich__fact-icon { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--accent) 12%, var(--bg-card)); color: var(--primary); border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); margin-bottom: var(--space-1); } .hero-rich__fact-icon svg { width: 20px; height: 20px; } .hero-rich__fact-label { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 800; line-height: 1.2; color: var(--text-primary); letter-spacing: -0.005em; } .hero-rich__fact-sub { font-size: var(--text-xs); color: var(--text-secondary); line-height: 1.45; letter-spacing: 0.01em; } .hero-rich__mosaic { width: 100%; max-width: 480px; margin-inline: auto; aspect-ratio: 1; color: var(--text-primary); display: flex; align-items: center; justify-content: center; } .hero-rich__mosaic svg { width: 100%; height: 100%; display: block; } /* Stacked layouts (hero parity 2026-07-21) — the visual column stays VISIBLE. It was previously hidden here, on the reasoning that a decorative mosaic adds nothing once stacked. That held while these heroes collapsed to content height. With the full-viewport reserve restored (see the hero-height parity note further down), hiding the column instead leaves ~550px of dead band under the copy — exactly the empty-square problem the hiding was meant to avoid, one breakpoint over. Constrain the visual instead of removing it, so every page has a hero visual at every breakpoint. */ @media (max-width: 959px) { .hero-rich__mosaic { max-width: 300px; margin-block: var(--space-4); } } /* Product variant (hero parity 2026-07-21) — /microsoft-wdrozenia/* children. The official Microsoft mark on a lifted card, using the same surface language as .hero-stat so a product hero reads as the same family as a stats hero. */ .hero-rich__product { width: 100%; max-width: 480px; margin-inline: auto; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; } .hero-rich__product-mark { display: flex; align-items: center; justify-content: center; width: min(62%, 260px); aspect-ratio: 1; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: 0 30px 60px -20px color-mix(in oklab, var(--brand-navy) 25%, transparent); } /* Override the 44px badge dimensions the helper hard-codes for inline use — here the mark IS the hero visual, so it carries the column. The wrapper must be given an explicit box: .product-badge is content-sized, so a percentage width on the would resolve against the img's own 44px attribute and collapse the mark to a speck inside a large empty card. Absolute sizes here are deterministic regardless of what the helper emits. */ .hero-rich__product-mark .product-badge { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background: none; border: 0; box-shadow: none; padding: 0; } .hero-rich__product-mark .product-badge__img { width: 112px; height: 112px; object-fit: contain; } .hero-rich__product-mark .product-badge--icon svg { width: 104px; height: 104px; } /* Same stacked-layout treatment as the mosaic: kept visible, sized down. */ @media (max-width: 959px) { .hero-rich__product { max-width: 300px; margin-block: var(--space-4); } .hero-rich__product-mark { width: min(70%, 176px); } .hero-rich__product-mark .product-badge__img { width: 84px; height: 84px; } .hero-rich__product-mark .product-badge--icon svg { width: 78px; height: 78px; } } .section--alt { background: var(--bg-elevated); } .section--inset { background: var(--bg-inset); } /* A section whose last element is a short CTA link carries less visual mass — trim its bottom padding so the gap to the next band doesn't read as a hole. */ .section--snug-bottom { padding-bottom: var(--space-10); } .section--snug-bottom .section__actions { margin-top: var(--space-6); } /* Navy band — the page's single dark tonal event (homepage process). */ .section--navy { background: linear-gradient(135deg, #12145A 0%, #0C0D47 88%); } .section--navy .section__title { color: #fff; } .section--navy .section__lead { color: rgba(255, 255, 255, 0.75); } .section--navy .section__eyebrow { color: var(--accent); } /* Collapse the doubled vertical padding when two sections with the SAME background meet. The section renderer forces --alt on stats/testimonials/cta without advancing its alternation toggle, and some pages stack two --alt sections (e.g. the homepage sectors + client wall) — otherwise they merge into one oversized muted band that reads like an accidental empty gap. */ .section--alt + .section--alt, .section--inset + .section--inset, .section:not(.section--alt):not(.section--inset):not(.section--navy) + .section:not(.section--alt):not(.section--inset):not(.section--navy) { padding-top: 0; } .section__header { margin-bottom: var(--space-12); max-width: var(--container-text); } .section__eyebrow { display: inline-block; font-size: var(--text-sm); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--primary); margin-bottom: var(--space-4); } .section__title { font-size: clamp(1.9rem, 1.25rem + 2.7vw, 2.9rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; margin-bottom: var(--space-4); overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; } .section__lead { font-size: var(--text-lg); color: var(--text-secondary); margin: 0; max-width: 60ch; } /* Balanced wraps: no lone orphan words ("365.", "przyczyny.", single-letter Polish conjunctions) at the end of display headings and leads. */ .section__title, .section__lead, .home-hero__title, .home-hero__subtitle, .proof-subtitle { text-wrap: balance; } /* ---------- Eyebrow pill (chip with pulsing dot) ---------- */ .eyebrow-pill { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.45em 1em 0.45em 0.7em; background: color-mix(in oklab, var(--accent) 10%, var(--card)); border: 1px solid color-mix(in oklab, var(--accent) 25%, transparent); border-radius: 999px; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--primary); } .eyebrow-pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 30%, transparent); animation: float-soft 2.4s ease-in-out infinite; } /* ---------- Gradient headline accent (teal → azure) ---------- */ .title-accent { background: linear-gradient(120deg, var(--accent) 0%, var(--primary) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--primary); /* fallback */ } [data-theme="dark"] .title-accent { background: linear-gradient(120deg, var(--accent) 0%, var(--brand-mint) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* ---------- Brand gradient ramp (navy → azure → teal → mint) ---------- */ .brand-ramp { height: 16px; border-radius: 999px; background: linear-gradient(90deg, var(--brand-navy) 0%, var(--brand-azure) 38%, var(--brand-teal) 72%, var(--brand-mint) 100%); } /* ========================================================================== Buttons ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-display); font-weight: 600; font-size: var(--text-base); line-height: 1.2; padding: 0.75em 1.5em; border-radius: var(--radius-md); border: 1px solid transparent; text-decoration: none; cursor: pointer; transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); white-space: nowrap; } @media (max-width: 600px) { body .btn { white-space: normal; overflow-wrap: break-word; max-width: 100%; } } .btn--lg { font-size: var(--text-lg); padding: 0.9em 1.75em; } .btn--sm { font-size: var(--text-sm); padding: 0.55em 1em; } .btn--primary { background: var(--primary); color: var(--primary-foreground); } .btn--primary:hover, .btn--primary:focus-visible { background: var(--primary-hover); color: var(--primary-foreground); box-shadow: var(--shadow-accent); transform: translateY(-1px); } .btn--primary:active { background: var(--primary-active); transform: translateY(0); } .btn--secondary { background: transparent; color: var(--text-primary); border-color: var(--border-strong); } .btn--secondary:hover, .btn--secondary:focus-visible { background: var(--bg-card); border-color: var(--accent); color: var(--primary); } .btn--ghost { background: transparent; color: var(--text-secondary); padding-inline: var(--space-2); } .btn--ghost:hover { color: var(--primary); } .btn__arrow { display: inline-block; margin-left: 0.2em; transition: transform var(--dur-fast) var(--ease); } .btn:hover .btn__arrow, .btn:focus-visible .btn__arrow { transform: translateX(4px); } /* ---------- Soft pill CTA (used on cards) ---------- */ .pill-cta { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.6em 1.15em; border-radius: var(--radius-md); background: var(--primary-soft); color: var(--primary); border: 1px solid transparent; font-weight: 600; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.04em; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .pill-cta::after { content: "→"; display: inline-block; transition: transform var(--dur-fast) var(--ease); } /* ========================================================================== Glass stat card (frosted, accent-bordered) ========================================================================== */ .glass-card { padding: var(--space-6) var(--space-8); background: color-mix(in oklab, var(--card) 70%, transparent); backdrop-filter: blur(20px) saturate(120%); -webkit-backdrop-filter: blur(20px) saturate(120%); border: 1px solid color-mix(in oklab, var(--accent) 22%, var(--border)); border-radius: var(--radius-xl); box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 10px 30px -10px color-mix(in oklab, var(--brand-navy) 30%, transparent), 0 30px 60px -20px color-mix(in oklab, var(--brand-navy) 25%, transparent); display: flex; flex-direction: column; gap: var(--space-2); } [data-theme="dark"] .glass-card { background: color-mix(in oklab, var(--card) 60%, transparent); border-color: color-mix(in oklab, var(--accent) 28%, var(--border)); box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 10px 30px -10px rgba(0,0,0,0.5), 0 30px 60px -20px rgba(0,0,0,0.6); } .glass-card__value { font-family: var(--font-display); font-weight: 800; font-size: var(--text-4xl); line-height: 1; color: var(--foreground); } .glass-card__value .unit { color: var(--primary); } .glass-card__label { font-size: var(--text-sm); color: var(--muted-foreground); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; } /* ========================================================================== Pillar cards (service tiles) ========================================================================== */ .pillars__grid { /* Flexbox (not grid) so an odd count (e.g. 5 services) wraps with the final row's cards centered, instead of left-aligned with an empty cell. */ display: flex; flex-wrap: wrap; gap: var(--space-6); justify-content: center; } .pillars__grid > .pillar { flex: 1 1 20rem; max-width: 24rem; } .pillar { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-8); display: flex; flex-direction: column; gap: var(--space-4); text-decoration: none; color: inherit; transition: transform var(--dur) var(--ease), border-color var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease); } .pillar:hover, .pillar:focus-visible { transform: translateY(-4px); border-color: var(--accent); box-shadow: var(--shadow-elevated); } .pillar__icon { width: 56px; height: 56px; color: var(--primary); padding: var(--space-3); background: var(--primary-soft); border: 1px solid var(--primary-soft); border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; } .pillar__icon svg { width: 100%; height: 100%; } .pillar__title { font-size: var(--text-xl); font-weight: 700; color: var(--text-primary); margin: 0; line-height: 1.25; } .pillar__desc { color: var(--text-secondary); font-size: var(--text-base); line-height: 1.6; margin: 0; flex-grow: 1; } .pillar__cta { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.6em 1.15em; border-radius: var(--radius-md); background: var(--primary-soft); color: var(--primary); border: 1px solid transparent; font-weight: 600; font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.04em; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .pillar:hover .pillar__cta, .pillar:focus-visible .pillar__cta { background: var(--primary); color: var(--primary-foreground); box-shadow: var(--shadow-accent); } .pillar__cta::after { content: "→"; display: inline-block; transition: transform var(--dur-fast) var(--ease); } .pillar:hover .pillar__cta::after { transform: translateX(4px); } /* Flagship pillar — promoted to a full-width featured row (the focal point after the hero). Falls back to the standard card layout on small screens. */ @media (min-width: 760px) { .pillars__grid > .pillar--featured { flex: 1 1 100%; max-width: none; } /* The 4 remaining pillars share one balanced row on wide screens (2×2 on medium) instead of wrapping 3+1 with an orphan. */ .pillars__grid > .pillar:not(.pillar--featured) { flex: 1 1 16rem; max-width: none; } /* Uniform card rhythm: every description clamps to the same 3-line block (full text lives on the service page behind the card). */ .pillars__grid > .pillar:not(.pillar--featured) .pillar__desc { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex-grow: 0; } .pillars__grid > .pillar:not(.pillar--featured) .pillar__title { min-height: 2.5em; /* reserves two title lines so 1-line titles align */ } .pillars__grid > .pillar:not(.pillar--featured) .pillar__cta { margin-top: auto; } .pillar--featured { display: grid; align-items: center; column-gap: var(--space-8); row-gap: var(--space-2); grid-template-columns: auto 1fr auto; grid-template-areas: "icon title cta" "icon desc cta"; border-left: 3px solid var(--accent); } .pillar--featured .pillar__icon { grid-area: icon; width: 64px; height: 64px; } .pillar--featured .pillar__title { grid-area: title; font-size: var(--text-2xl); align-self: end; } .pillar--featured .pillar__desc { grid-area: desc; align-self: start; max-width: 62ch; } .pillar--featured .pillar__cta { grid-area: cta; justify-self: end; } } /* ========================================================================== Sample hero (mesh + slash motif) — for the sign-off preview ========================================================================== */ .demo-hero { position: relative; overflow: hidden; padding-block: clamp(var(--space-16), 9vh, var(--space-32)); background: radial-gradient(60% 80% at 85% 10%, color-mix(in oklab, var(--accent) 14%, transparent) 0%, transparent 60%), radial-gradient(50% 70% at 10% 90%, color-mix(in oklab, var(--primary) 12%, transparent) 0%, transparent 55%), var(--background); } .demo-hero::after { content: ""; position: absolute; top: -20%; right: 8%; width: 3px; height: 140%; background: linear-gradient(to bottom, transparent, var(--accent), transparent); transform: skewX(-14deg); opacity: 0.5; } .demo-hero__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--space-12); align-items: center; } @media (max-width: 959px) { .demo-hero__grid { grid-template-columns: 1fr; } } .demo-hero__title { font-size: clamp(2.5rem, 5.5vw, 4.25rem); line-height: 1.02; letter-spacing: -0.028em; margin-bottom: var(--space-6); } .demo-hero__subtitle { font-size: clamp(var(--text-lg), 1.6vw, var(--text-xl)); line-height: 1.55; color: var(--text-secondary); max-width: 52ch; margin-bottom: var(--space-8); } .demo-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-4); } .demo-hero__stats { display: grid; gap: var(--space-5); } /* ========================================================================== Design-system reference layout (.ds-*) ========================================================================== */ .ds-page { padding-block: var(--space-16); } .ds-page__header { margin-bottom: var(--space-12); } .ds-page__title { font-size: var(--text-5xl); margin-bottom: var(--space-4); } .ds-page__lead { font-size: var(--text-lg); color: var(--text-secondary); max-width: var(--container-text); } .ds-section { padding-block: var(--space-10); border-top: 1px solid var(--border-subtle); } .ds-section:first-of-type { border-top: none; padding-top: 0; } .ds-section__title { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 800; margin: 0 0 var(--space-3); color: var(--foreground); } .ds-section__lead { font-size: var(--text-base); line-height: 1.6; color: var(--text-secondary); max-width: var(--container-text); margin: 0 0 var(--space-6); } .ds-section__lead code, .ds-note code, .ds-notes code { font-family: var(--font-mono); font-size: 0.92em; background: var(--bg-card); padding: 0.1em 0.4em; border-radius: var(--radius-sm); color: var(--accent); } .ds-h3 { margin: var(--space-8) 0 var(--space-4); color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--text-sm); font-weight: 700; } /* Swatches */ .ds-swatch-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } .ds-swatch { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-card); overflow: hidden; } .ds-swatch__chip { height: 80px; width: 100%; } .ds-swatch__meta { padding: var(--space-3); display: flex; flex-direction: column; gap: 2px; } .ds-swatch__name { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--accent); font-weight: 600; } .ds-swatch__label { font-size: var(--text-xs); color: var(--text-secondary); } .ds-swatch__val { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--muted-foreground); } /* Typography table */ .ds-type-table { width: 100%; border-collapse: collapse; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); overflow: hidden; background: var(--bg-card); } .ds-type-table th, .ds-type-table td { padding: var(--space-3) var(--space-4); text-align: left; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; } .ds-type-table th { background: var(--bg-elevated); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-secondary); font-weight: 600; } .ds-type-table tr:last-child td { border-bottom: none; } .ds-type-table code, .ds-type-table__resolved { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--accent); } /* Spacing */ .ds-spacing-grid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; } .ds-spacing { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: var(--space-4); padding: var(--space-2) var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--bg-card); } .ds-spacing__bar { height: 8px; background: var(--accent); border-radius: 999px; } .ds-spacing__name, .ds-spacing__resolved { font-family: var(--font-mono); font-size: var(--text-xs); } .ds-spacing__name { color: var(--accent); } .ds-spacing__resolved { color: var(--text-secondary); } /* Token grid */ .ds-token-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .ds-token { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-card); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); } .ds-token__name { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--accent); font-weight: 600; } .ds-token__label { font-size: var(--text-sm); color: var(--text-secondary); } .ds-token__resolved { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--foreground); word-break: break-all; } .ds-note { margin-top: var(--space-6); padding: var(--space-4); background: color-mix(in oklab, var(--accent) 8%, transparent); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.6; } .ds-note--azure { background: color-mix(in oklab, var(--primary) 8%, transparent); border-left-color: var(--primary); } /* Radius + shadow */ .ds-radius-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } .ds-radius { text-align: center; display: flex; flex-direction: column; gap: var(--space-2); align-items: center; } .ds-radius__chip { width: 100%; aspect-ratio: 1; background: linear-gradient(135deg, var(--accent), var(--primary)); } .ds-radius__name { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--accent); } .ds-radius__resolved { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-secondary); } .ds-shadow-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } .ds-shadow { padding: var(--space-6); background: var(--bg-card); border-radius: var(--radius-md); display: flex; flex-direction: column; gap: var(--space-2); } .ds-shadow__name { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--accent); } .ds-shadow__label { font-size: var(--text-xs); color: var(--text-secondary); } /* Component demo row */ .ds-demo-row { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; padding: var(--space-6); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-card); } .ds-notes { margin: 0; padding-left: var(--space-5); font-size: var(--text-sm); line-height: 1.7; color: var(--text-secondary); } .ds-notes li { margin-bottom: var(--space-2); } /* ========================================================================== Site main, mobile nav drawer, prose, post cards, pagination ========================================================================== */ .site-main { min-height: 50vh; } /* In-page anchors (#booking, #uslugi, the form heading…) land BELOW the sticky header instead of hiding under it. */ [id] { scroll-margin-top: calc(var(--header-h) + 24px); } /* Active trail — the current page (or the dropdown branch containing it) is visibly marked in the primary nav. */ .main-navigation > ul > li.is-active:not(.nav-cta) > a { color: var(--foreground); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 6px; } .main-navigation .sub-menu li.is-active > a { color: var(--primary); font-weight: 700; } .main-navigation .nav-cta.is-active a { box-shadow: inset 0 0 0 2px color-mix(in oklab, var(--accent) 65%, transparent); } /* Primary-nav dropdown (products under "Wdrożenia") — desktop: a 2-column panel on hover/focus-within; in the mobile drawer the items list inline. */ .submenu-toggle { display: none; } /* drawer-only control; hidden on desktop */ @media (min-width: 1024px) { .main-navigation .menu-item-has-children { position: relative; } .main-navigation .menu-item-has-children > a::after { content: "▾"; margin-left: 5px; font-size: 0.72em; opacity: 0.65; } .main-navigation .sub-menu { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); padding: var(--space-4); margin-top: 0; min-width: 17rem; grid-template-columns: 1fr; gap: 2px; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-elevated); z-index: var(--z-sticky); } .main-navigation .sub-menu--products { min-width: 36rem; grid-template-columns: 1fr 1fr; gap: 2px var(--space-4); } .main-navigation li:hover > .sub-menu, .main-navigation li:focus-within > .sub-menu { display: grid; } .main-navigation .sub-menu a { display: block; padding: 8px 12px; border-radius: var(--radius-sm); text-transform: none; letter-spacing: 0; font-size: var(--text-sm); color: var(--text-secondary); white-space: nowrap; } .main-navigation .sub-menu a:hover { background: var(--primary-soft); color: var(--primary); } .main-navigation .sub-menu__lead a, .main-navigation .sub-menu__all a { color: var(--primary); font-weight: 700; } .main-navigation .sub-menu__all { grid-column: 1 / -1; border-top: 1px solid var(--border-subtle); margin-top: var(--space-2); padding-top: var(--space-2); } /* Kontakt as the header CTA — a filled pill closing the nav. */ .main-navigation .nav-cta { margin-left: var(--space-2); } .main-navigation .nav-cta a { display: inline-flex; align-items: center; padding: 0.5em 1.05em; border-radius: var(--radius-md); background: var(--primary); color: var(--primary-foreground); transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); } .main-navigation .nav-cta a:hover { background: var(--primary-hover, var(--primary)); color: var(--primary-foreground); transform: translateY(-1px); } } /* Header site search — a collapsed panel that expands below the header. */ .header-search { position: absolute; top: 100%; left: 0; right: 0; background: var(--card); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-elevated); padding-block: var(--space-4); z-index: var(--z-sticky); } .header-search__form { display: flex; gap: var(--space-3); } .header-search__input { flex: 1 1 auto; min-width: 0; padding: 0.65em 1em; font: inherit; color: var(--foreground); background: var(--bg-elevated); border: 1px solid var(--border-input); border-radius: var(--radius-md); } .header-search__input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); } /* Hamburger — hidden on desktop, shown on mobile */ .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 10px; border: 1px solid var(--border); background: var(--card); border-radius: var(--radius-md); cursor: pointer; } .nav-toggle__bar { display: block; height: 2px; width: 100%; background: var(--foreground); border-radius: 2px; transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); } :root.nav-open .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } :root.nav-open .nav-toggle__bar:nth-child(2) { opacity: 0; } :root.nav-open .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 1023px) { .nav-toggle { display: inline-flex; } /* Drawer: reveal the primary nav as a panel under the sticky header. */ html.nav-open .main-navigation { display: block; position: absolute; top: var(--header-h); left: 0; right: 0; background: var(--card); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-elevated); padding: var(--space-4) var(--space-6); z-index: var(--z-sticky); /* The products submenu makes the drawer taller than a phone screen — cap it to the viewport and let the drawer itself scroll. */ max-height: calc(100dvh - var(--header-h)); overflow-y: auto; } html.nav-open .main-navigation ul { flex-direction: column; gap: 0; align-items: stretch; } html.nav-open .main-navigation li { border-top: 1px solid var(--border-subtle); } html.nav-open .main-navigation li:first-child { border-top: 0; } html.nav-open .main-navigation a { display: flex; align-items: center; min-height: 48px; padding-block: var(--space-2); font-size: var(--text-base); text-transform: none; letter-spacing: 0; } /* Sub-menus are ACCORDIONS in the drawer: collapsed by default, expanded by the injected chevron toggle — the drawer stays a short, calm list. */ html.nav-open .main-navigation .menu-item-has-children { position: relative; } html.nav-open .main-navigation .menu-item-has-children > a { padding-right: 56px; } html.nav-open .main-navigation .submenu-toggle { display: inline-flex; align-items: center; justify-content: center; position: absolute; right: 0; top: 2px; width: 48px; height: 48px; background: none; border: 0; cursor: pointer; color: var(--foreground); } html.nav-open .main-navigation .submenu-toggle__chevron { width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform var(--dur-fast) var(--ease); } html.nav-open .main-navigation li.is-open > .submenu-toggle .submenu-toggle__chevron { transform: rotate(225deg) translateY(-2px); } html.nav-open .main-navigation .sub-menu { display: none; padding-left: var(--space-5); } html.nav-open .main-navigation li.is-open > .sub-menu { display: flex; flex-direction: column; } html.nav-open .main-navigation .sub-menu li { border-top: 0; } html.nav-open .main-navigation .sub-menu a { min-height: 40px; font-size: var(--text-sm); color: var(--muted-foreground); } /* Kontakt CTA: a full-width filled button closing the drawer list. */ html.nav-open .main-navigation .nav-cta { border-top: 0; margin-top: var(--space-3); } html.nav-open .main-navigation .nav-cta a { justify-content: center; min-height: 48px; background: var(--primary); color: var(--primary-foreground); border-radius: var(--radius-md); font-weight: 700; } } /* Mobile nav backdrop — tap anywhere outside the drawer to close it */ .nav-backdrop { display: none; } @media (max-width: 1023px) { html.nav-open .nav-backdrop { display: block; position: fixed; inset: var(--header-h) 0 0 0; background: rgba(0, 0, 0, 0.4); z-index: calc(var(--z-sticky) - 1); animation: nav-backdrop-in var(--dur-fast) var(--ease); } html.nav-open { overflow: hidden; } /* lock page scroll while the menu is open */ } @keyframes nav-backdrop-in { from { opacity: 0; } to { opacity: 1; } } /* Page prose */ .prose { color: var(--foreground); } .prose > * + * { margin-top: var(--space-4); } .prose h2 { font-size: var(--text-3xl); margin-top: var(--space-10); } .prose h3 { font-size: var(--text-2xl); margin-top: var(--space-8); } .prose ul, .prose ol { padding-left: var(--space-6); } .prose li { margin-bottom: var(--space-2); } .prose a { text-decoration: underline; text-underline-offset: 2px; } /* Post list / cards (blog, search, archives) */ .post-list { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); } .post-card { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-6); transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease); } .post-card:hover { border-color: var(--accent); box-shadow: var(--shadow-elevated); } .post-card__title { font-size: var(--text-xl); margin: 0 0 var(--space-3); } .post-card__title a { color: var(--foreground); } .post-card__title a:hover { color: var(--primary); } .post-card__excerpt { color: var(--text-secondary); font-size: var(--text-base); } /* Pagination */ .pagination, .page-links { margin-top: var(--space-12); display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: center; } .pagination .page-numbers, .page-links a, .page-links > span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--foreground); text-decoration: none; font-weight: 600; } .pagination .page-numbers.current { background: var(--primary); color: var(--primary-foreground); border-color: var(--primary); } .pagination a.page-numbers:hover { border-color: var(--primary); color: var(--primary); } .screen-reader-text { position: absolute !important; } /* ========================================================================== CSP-safe layout utilities — the strict style-src has no 'unsafe-inline', so inline style="" attributes are blocked. These replace them. ========================================================================== */ .container--narrow { max-width: var(--container-narrow); } .section--center { text-align: center; } .section--center .section__eyebrow, .section--center .section__title, .section--center .section__lead { margin-inline: auto; } .section__header--full { max-width: none; } /* Action rows hold buttons, not prose — never cap or left-anchor them. The global `p { max-width:70ch }` was pinning CTA buttons ~275px left of the centered heading axis on every centered section (audit: 7 pages). */ .section__actions { margin-top: var(--space-8); max-width: none; } .section--center .section__actions, .section__actions--center { display: flex; justify-content: center; } .search-empty__form { max-width: 480px; margin-top: var(--space-6); } /* Demo hero (front-page scaffold) — staggered glass stat cards */ .demo-hero .eyebrow-pill { margin-bottom: var(--space-6); } .demo-hero__stats .glass-card:nth-child(1) { width: min(100%, 360px); } .demo-hero__stats .glass-card:nth-child(2) { width: min(100%, 340px); margin-left: auto; } .demo-hero__stats .glass-card:nth-child(3) { width: min(100%, 320px); } /* Design-system reference — value classes (replace dynamic inline styles; the token set is fixed, so these are static + CSP-safe). */ .ds-page__header .brand-ramp { max-width: 640px; margin-top: var(--space-6); } .ds-swatch__chip--bordered { border: 1px solid var(--border); } .dsc-brand-navy { background: var(--brand-navy); } .dsc-brand-azure { background: var(--brand-azure); } .dsc-brand-teal { background: var(--brand-teal); } .dsc-brand-mint { background: var(--brand-mint); } .dsc-primary { background: var(--primary); } .dsc-accent { background: var(--accent); } .dsc-success { background: var(--success); } .dsc-warning { background: var(--warning); } .dsc-destructive { background: var(--destructive); } .dsc-background { background: var(--background); } .dsc-muted { background: var(--muted); } .dsc-secondary { background: var(--secondary); } .dsc-foreground { background: var(--foreground); } .dsc-muted-foreground { background: var(--muted-foreground); } .dsr-sm { border-radius: var(--radius-sm); } .dsr-md { border-radius: var(--radius-md); } .dsr-base { border-radius: var(--radius); } .dsr-xl { border-radius: var(--radius-xl); } .dsr-2xl { border-radius: var(--radius-2xl); } .dss-soft { box-shadow: var(--shadow-soft); } .dss-elevated { box-shadow: var(--shadow-elevated); } .dss-accent { box-shadow: var(--shadow-accent); } .dst-sm { font-size: var(--text-sm); } .dst-base { font-size: var(--text-base); } .dst-lg { font-size: var(--text-lg); } .dst-2xl { font-size: var(--text-2xl); font-family: var(--font-display); font-weight: 700; } .dst-4xl { font-size: var(--text-4xl); font-family: var(--font-display); font-weight: 800; line-height: 1.1; } .dst-display { font-size: var(--text-display); font-family: var(--font-display); font-weight: 800; line-height: 1; letter-spacing: -0.025em; } /* ========================================================================== Page hero (generic pages via page.php) ========================================================================== */ .page-hero { padding-block: clamp(var(--space-16), 8vw, var(--space-20)); border-bottom: 1px solid var(--border); background: radial-gradient(55% 80% at 88% 0%, color-mix(in oklab, var(--accent) 10%, transparent) 0%, transparent 60%), var(--bg-inset); } .page-hero__title { font-size: var(--text-5xl); margin: 0 0 var(--space-4); max-width: 22ch; } .page-hero__subtitle { font-size: var(--text-xl); color: var(--text-secondary); max-width: 62ch; margin: 0; line-height: 1.5; } /* ============================================================================ HOME HERO — full block ported from cyberalterity: full-viewport height, animated mesh gradient, slash motif, grid texture, 3D stat stack, scroll cue. ============================================================================ */ .home-hero { position: relative; /* v1.21.40 — fully tokenized responsive sizing. Values defined in tokens.css under "Home hero responsive sizing". Single fluid formula (no media-query tiers between 600px and 4K). See tokens.css for the per-viewport behavior table. */ padding-block: clamp(var(--hero-pad-min), var(--hero-pad-fluid), var(--hero-pad-max)); isolation: isolate; overflow: hidden; min-height: min(var(--hero-min-vh), calc(100dvh - var(--header-h))); display: flex; align-items: center; } /* Failsafe for very short viewports (<600 px tall): split-screen ultrawides, landscape phones with URL bar showing, accessibility zoom users. Let content drive height; minimum padding. The default fluid rule above already handles 600–2000+ px smoothly, so this block only catches the extreme low end. */ @media (max-height: 600px) { .home-hero { min-height: auto; padding-block: clamp( var(--hero-failsafe-pad-min), var(--hero-failsafe-pad-fluid), var(--hero-failsafe-pad-max) ); } } /* ========================================================================== v1.21.73 — Home hero LAPTOP vertical-fit (desktop ≥960px only) -------------------------------------------------------------------------- The hero fills (100dvh − header) and is content-driven. After the 2026-06-01 content edits the left column (eyebrow + H1 + long subtitle + 2 CTAs + trust line) grew to ~792px — taller than a laptop screen — so the secondary CTA + trust line dropped below the fold on EVERY viewport shorter than ~940px (measured: 1366×768 pushed the CTA ~160px below the fold; the 3rd stat card was clipped too). Fix: cap the H1 and subtitle by viewport HEIGHT (min(vw, vh)) and trim the vertical rhythm + padding so the whole hero stays above the fold on laptops, WHILE big monitors keep the full 68px / 20px type (the vh terms hit their max and clamp out). Verified: CTAs + trust line above the fold at 640–1380px tall, both themes. Text is NOT changed — sizing/spacing only. `body ` prefix wins the cascade by SPECIFICITY (0,1,1 > the base 0,1,0) so it holds regardless of clean-css -O2 @media reordering (which silently killed an earlier order-dependent rule — see v1.21.72.1). Mobile (<960px) is untouched (separate code path). */ @media (min-width: 960px) { body .home-hero { padding-block: clamp(1.25rem, 4vh, 5rem); } body .home-hero__eyebrow { margin-bottom: var(--space-4); } body .home-hero__title { font-size: clamp(2.5rem, min(5.5vw, 6.3vh), 4.25rem); margin-bottom: var(--space-4); } body .home-hero__subtitle { font-size: clamp(0.9375rem, min(1.6vw, 2vh), 1.25rem); line-height: 1.45; margin-bottom: var(--space-5); } body .home-hero__ctas { margin-bottom: var(--space-5); } } /* v1.21.73.1 (gate-check) — the right-column 3D stat-card stack is absolutely positioned (~545px tall: offsets 0/180/350 + ~195px cards). When v1.21.73 compressed the hero on laptops the cards KEPT their fixed offsets, so the bottom card ("Maksymalna kara osobista — 300%") was clipped by the hero's overflow:hidden (measured −27 to −77px at 1366–1536 widths). Fix: tighten the offsets + card padding on short viewports so the stack shrinks WITH the hero. NOT a transform:scale on the container — that silently breaks the cards' backdrop-filter (frosted glass renders washed-out). The `.hero-stats ` prefix wins by specificity (0,2,0 > base 0,1,0) so it holds through clean-css -O2 @media reordering. (v1.21.73's visual min-height shrink was removed — it mis-centred the stack and worsened the clip.) */ @media (min-width: 960px) and (max-height: 770px) { .hero-stats .hero-stat { padding: var(--space-4) var(--space-6); } .hero-stats .hero-stat--2 { top: 150px; } .hero-stats .hero-stat--3 { top: 296px; } } @media (min-width: 960px) and (max-height: 670px) { .hero-stats .hero-stat { padding: var(--space-3) var(--space-5); } .hero-stats .hero-stat--2 { top: 124px; } .hero-stats .hero-stat--3 { top: 244px; } } /* Background layers (decorative, behind content) */ .home-hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; } /* v1.21.27 Tier 1 — was background-position animation (paint-bound, ~1.3s mainthread Style+Layout cost per Lighthouse trace). Now the gradients live on a ::before pseudo-element sized 112% (so a 6% transform shift doesn't expose the parent edges), and the animation drives transform: translate3d() which composites on the GPU at zero paint cost. */ .home-hero__mesh { position: absolute; inset: 0; overflow: hidden; } .home-hero__mesh::before { content: ''; position: absolute; top: 0; bottom: 0; left: -6%; right: -6%; /* 112% width so the 6% transform shift never exposes edges */ background-image: radial-gradient(ellipse 60% 50% at 15% 30%, color-mix(in oklab, var(--accent) 18%, transparent) 0%, transparent 60%), radial-gradient(ellipse 60% 60% at 90% 70%, color-mix(in oklab, var(--accent) 12%, transparent) 0%, transparent 60%), radial-gradient(ellipse 80% 50% at 50% 110%, color-mix(in oklab, var(--brand-navy) 8%, transparent) 0%, transparent 60%); background-size: cover; animation: mesh-shift 22s ease-in-out infinite; } [data-theme="dark"] .home-hero__mesh::before { background-image: radial-gradient(ellipse 60% 50% at 15% 30%, color-mix(in oklab, var(--accent) 14%, transparent) 0%, transparent 60%), radial-gradient(ellipse 60% 60% at 90% 70%, color-mix(in oklab, var(--accent) 10%, transparent) 0%, transparent 60%); } /* Phones: the decorative diagonal crosses the centered hero copy and reads like a stray glyph through the words — hide it below tablet width. */ @media (max-width: 560px) { .home-hero__slash { display: none; } } .home-hero__slash { position: absolute; top: 0; right: 6vw; bottom: 0; width: 200px; height: 100%; color: var(--primary); opacity: 0.22; pointer-events: none; } .home-hero__grid-texture { position: absolute; inset: 0; background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 64px 64px; opacity: 0.35; mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%); } [data-theme="dark"] .home-hero__grid-texture { opacity: 0.18; } /* Two-column layout */ .home-hero__inner { position: relative; display: grid; gap: var(--space-12); grid-template-columns: 1fr; align-items: center; } @media (min-width: 960px) { .home-hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-16); } } /* Left: content */ .home-hero__content > * { opacity: 0; animation: fade-up 0.9s var(--ease) forwards; } .home-hero__content > *:nth-child(1) { animation-delay: 0.10s; } .home-hero__content > *:nth-child(2) { animation-delay: 0.25s; } .home-hero__content > *:nth-child(3) { animation-delay: 0.40s; } .home-hero__content > *:nth-child(4) { animation-delay: 0.55s; } .home-hero__content > *:nth-child(5) { animation-delay: 0.70s; } .home-hero__eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.45em 1em 0.45em 0.7em; background: color-mix(in oklab, var(--accent) 10%, var(--card)); border: 1px solid color-mix(in oklab, var(--accent) 25%, transparent); border-radius: 999px; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--primary); margin-bottom: var(--space-6); } [data-theme="dark"] .home-hero__eyebrow { color: var(--primary); } .home-hero__eyebrow-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent) 30%, transparent); animation: float-soft 2.4s ease-in-out infinite; } .home-hero__title { font-family: var(--font-display); font-size: clamp(2.5rem, 5.5vw, 4.25rem); font-weight: 800; line-height: 1.02; letter-spacing: -0.028em; color: var(--foreground); margin: 0 0 var(--space-6); /* W3.1: at <400 px viewport, the 2.5rem (40 px) clamp floor exceeds the content column width for long Polish words like "odpowiedzialność" (16 chars). Without break-word this forced 96 px of horizontal page overflow at 320 px viewport (measured Phase 2.4). break-word only breaks when the word would otherwise overflow — no impact otherwise. v1.21.11.1 gate-check L3 — adds `hyphens: auto` so the browser uses Polish hyphenation rules (honors ) before falling back to overflow-wrap's mid-syllable break. Previously "cyberbezpieczeństwa" (19 chars) on /uslugi/ broke as "cyberbezpieczeń-twa" mid-syllable; with hyphens:auto Chrome / Firefox / Safari split at a syllable boundary ("cyber-bezpieczeństwa" or similar). Side effect: home-hero's H1 also gets better wrapping for "odpowiedzialność" on narrow viewports. Zero effect on pages whose H1 has no long words. */ overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; } .home-hero__title-accent { color: var(--primary); /* Light-mode gradient starts at a darker teal (#0E7C86) so the whole accent phrase clears WCAG 1.4.3 (≥3:1 for large text) on the white hero; the brighter teal is kept for dark mode below. */ background: linear-gradient(120deg, #0E7C86 0%, var(--primary) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; position: relative; white-space: nowrap; } [data-theme="dark"] .home-hero__title-accent { background: linear-gradient(120deg, var(--accent) 0%, #5EEAD4 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .home-hero__subtitle { font-size: clamp(var(--text-lg), 1.6vw, var(--text-xl)); line-height: 1.55; color: var(--text-secondary); margin: 0 0 var(--space-8); max-width: 56ch; } .home-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-8); } .home-hero__meta { display: inline-flex; align-items: center; gap: var(--space-3); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-foreground); font-weight: 600; } .home-hero__meta-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--success); } .btn__arrow { display: inline-block; margin-left: 0.2em; transition: transform var(--dur-fast) var(--ease); } .btn:hover .btn__arrow, .btn:focus-visible .btn__arrow { transform: translateX(4px); } /* Right: 3D stat card stack */ .home-hero__visual { position: relative; perspective: 1400px; min-height: 480px; opacity: 0; animation: fade-in 1s var(--ease) 0.5s forwards; } @media (max-width: 959px) { /* Stacked stat cards self-size (.hero-stats becomes a height:auto flex column below), so the 540px desktop-collage reserve just left a large empty band between the hero and the Usługi section. Fit the content instead. */ .home-hero__visual { min-height: 0; } } .hero-stats { position: relative; height: 100%; width: 100%; } .hero-stat { position: absolute; width: min(100%, 380px); padding: var(--space-6) var(--space-8); background: color-mix(in oklab, var(--card) 70%, transparent); backdrop-filter: blur(20px) saturate(120%); -webkit-backdrop-filter: blur(20px) saturate(120%); border: 1px solid color-mix(in oklab, var(--accent) 22%, var(--border)); border-radius: var(--radius-xl); box-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 10px 30px -10px color-mix(in oklab, var(--brand-navy) 30%, transparent), 0 30px 60px -20px color-mix(in oklab, var(--brand-navy) 25%, transparent); display: flex; flex-direction: column; gap: var(--space-2); transform-style: preserve-3d; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); opacity: 0; animation: fade-up 0.9s var(--ease) forwards; animation-delay: var(--stat-delay, 0.4s); } [data-theme="dark"] .hero-stat { background: color-mix(in oklab, var(--card) 60%, transparent); border-color: color-mix(in oklab, var(--accent) 28%, var(--border)); box-shadow: 0 1px 2px rgba(0,0,0,0.4), 0 10px 30px -10px rgba(0,0,0,0.5), 0 30px 60px -20px rgba(0,0,0,0.6); } /* Stack positions: 1 on top, 2 below-right, 3 below-left/back */ .hero-stat--1 { top: 0; left: 0; z-index: 3; --float-base: rotate(-2.5deg); transform: rotate(-2.5deg); animation-name: fade-up, float-soft; animation-duration: 0.9s, 7s; animation-delay: var(--stat-delay, 0.4s), 1.5s; animation-fill-mode: forwards, both; animation-iteration-count: 1, infinite; animation-timing-function: var(--ease), ease-in-out; } .hero-stat--2 { top: 180px; right: 0; z-index: 2; --float-base: rotate(2deg); transform: rotate(2deg); animation-name: fade-up, float-soft; animation-duration: 0.9s, 8s; animation-delay: var(--stat-delay, 0.6s), 2.2s; animation-fill-mode: forwards, both; animation-iteration-count: 1, infinite; animation-timing-function: var(--ease), ease-in-out; } .hero-stat--3 { top: 350px; left: 20px; z-index: 1; --float-base: rotate(-1deg); transform: rotate(-1deg); animation-name: fade-up, float-soft; animation-duration: 0.9s, 9s; animation-delay: var(--stat-delay, 0.8s), 3s; animation-fill-mode: forwards, both; animation-iteration-count: 1, infinite; animation-timing-function: var(--ease), ease-in-out; } @media (max-width: 959px) { /* W3.4: at <960 px, the parent .home-hero__visual loses its min-height: 540 px (set only @ min-width:960 px below) so .hero-stats { height: 100% } resolves to 0. Children at top 0/200/400 with ~185-198 px heights then overflow document flow (Phase 2.5.1 measured `parentHeight: 0` with cards at y ≈ 798/1002/1209 in the 320 px viewport). Fix: convert parent to column flex on mobile so cards stack naturally + parent height matches sum. The rotation tilts + float-soft idle animation are desktop design touches that cramped small viewports anyway. */ .hero-stats { display: flex; flex-direction: column; gap: var(--space-4); height: auto; align-items: stretch; } .hero-stat, .hero-stat--1, .hero-stat--2, .hero-stat--3 { position: relative; top: auto; left: auto; right: auto; width: 100%; transform: none; animation: fade-up 0.9s var(--ease) forwards; animation-delay: var(--stat-delay, 0.4s); } } /* ========================================================================== v1.21.72 — Hero CTA + accent mobile overflow hardening -------------------------------------------------------------------------- CSS-ONLY responsivity fix. No page content / meta / text is touched — the hero copy (incl. the 2026-06-01 edits) renders from post meta and is left byte-for-byte unchanged. This governs only HOW a long label wraps. Root cause: .btn carries `white-space: nowrap` (good on desktop — short labels never wrap mid-phrase). After the content edits some hero CTA labels grew long (worst: /uslugi/ ≈ 495 px). A nowrap button wraps only BETWEEN flex siblings, never WITHIN itself, so one long label became an un-shrinkable block that pushed .home-hero__content past a ~390 px phone viewport → right-edge clipping (the page has no horizontal scroll). Measured mobile overflow +64…+129 px across the home-hero / hero-rich pages (home, uslugi, regulacje, metodyka, branze + 5 sektor); desktop and tablet were clean. The fix is text-length-AGNOSTIC so future content edits cannot reintroduce it. Desktop (≥960 px) is untouched — rules are mobile-only. Shared by home-hero.php + hero-rich.php (same classes). */ /* <960 px (single-column hero): permit intra-button + accent-span wrap so no single long label can force horizontal overflow. Where the label already fits one line, `normal` changes nothing — it only wraps when the content would otherwise exceed the available width. */ @media (max-width: 959px) { .home-hero__content { min-width: 0; } /* let the column shrink below its content min-content */ .home-hero__ctas .btn { white-space: normal; /* override .btn nowrap — allow the label to wrap */ overflow-wrap: break-word; /* break a pathologically long single token as a last resort */ max-width: 100%; /* never exceed the column width */ } .home-hero__title-accent { white-space: normal; } /* override nowrap on the gradient accent phrase */ } /* <600 px (phones): stack the hero CTAs full-width. Standard enterprise mobile pattern and a hard guarantee of zero overflow at any label length. */ @media (max-width: 600px) { .home-hero__ctas { flex-direction: column; align-items: stretch; } .home-hero__ctas .btn { width: 100%; } } /* v1.21.72 (round 2) — authored CONTENT tables on prose pages (legal / privacy) carry intrinsic multi-column min-widths that can't shrink to a phone, forcing page-wide horizontal overflow — surfaced by the full-site scan: /polityka-cookies/ cookie-inventory table (565 px) → +199 px and /polityka-prywatnosci/ table (432 px) → +66 px on a 390 px viewport. Make prose tables scroll horizontally inside their own block on small screens instead of breaking the page. CSS-only — the table markup, columns and text are untouched; the user just swipes the table. */ @media (max-width: 768px) { .prose table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } } .hero-stat:hover { z-index: 4; transform: perspective(1000px) rotateX(2deg) rotateY(-4deg) translateY(-8px) scale(1.02); } .hero-stat--accent { background: linear-gradient(135deg, color-mix(in oklab, var(--accent) 18%, var(--card)) 0%, color-mix(in oklab, var(--accent) 8%, var(--card)) 100%); border-color: var(--accent); } .hero-stat__corner { position: absolute; top: var(--space-3); right: var(--space-4); font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 800; color: var(--primary); transform: skewX(-10deg); opacity: 0.55; } .hero-stat__label { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-foreground); } .hero-stat__number-wrap { display: flex; align-items: baseline; gap: var(--space-2); margin: var(--space-1) 0 var(--space-2); } .hero-stat__number { font-family: var(--font-display); font-size: clamp(3rem, 5vw, 4.5rem); font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--foreground); font-variant-numeric: tabular-nums; } .hero-stat--accent .hero-stat__number { color: var(--primary); } [data-theme="dark"] .hero-stat--accent .hero-stat__number { color: var(--primary); } .hero-stat__unit { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 700; color: var(--text-secondary); } .hero-stat--accent .hero-stat__unit { color: var(--primary); } [data-theme="dark"] .hero-stat--accent .hero-stat__unit { color: var(--primary); } .hero-stat__prefix { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary); line-height: 1.2; margin-bottom: 2px; } .hero-stat__compare { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.5; } /* ========================================================================== v1.21.97 — Hero right-column "floating collage": 3 stat cards + 3 differentiator cards. Desktop (>=960px) places them as two rails in a REAL CSS grid (not absolute coordinates) so the six cards can never overlap, whatever the text length or viewport — that was the failure mode of the earlier one-screen "ribbon". Left rail = stats (kept), right rail = differentiators, nudged down so the rails stagger like hand-placed cards. Every card keeps its tilt (--float-base) + float-soft idle bob + fade-up reveal; stat numbers keep the count-up. Below 960px the collage collapses to one stacked column (tilt removed), matching the original stat stack. Differentiator copy is the render-layer split of _home_hero_subtitle — stored text untouched. ========================================================================== */ @media (min-width: 960px) { .hero-collage--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; } /* Left rail: stat cards leave the absolute stack for an in-flow column. Position overrides ONLY — the tilt / float / fade-up / delay rules on .hero-stat--1/2/3 still apply unchanged. */ .hero-collage--split .hero-stats { display: flex; flex-direction: column; gap: var(--space-6); height: auto; width: 100%; } /* (0,3,0) specificity — via the .hero-stats parent — so these BEAT the `.hero-stats .hero-stat--2/3 { top: … }` max-height tier rules (0,2,0) regardless of how clean-css -O2 reorders @media blocks in the minified bundle. (Equal specificity would make the winner depend on minified source order — fragile; a future re-minify could silently displace the cards on short-wide laptops.) Position overrides ONLY — the tilt / float / fade-up / delay on .hero-stat--1/2/3 still apply. Tighter padding: collage cards are narrower than the original single stack + it frees width for the number. */ .hero-collage--split .hero-stats .hero-stat { position: relative; top: auto; left: auto; right: auto; width: 100%; padding: var(--space-5) var(--space-6); } /* Right rail: subtle downward offset + a touch more gap so the two rails read as hand-placed. Offset kept modest so the 6-card hero stays as short as the content allows. */ .hero-diffs { gap: var(--space-5); margin-top: var(--space-8); } } /* Right-rail list — reset at ALL widths so the