/* ===================================================================== FutureWeb - main.css Jasny tech premium. Wszystkie zmienne, layout, typografia, komponenty. Heavy efekty (3D hero, lab) w heavy.css - ladowane warunkowo. ===================================================================== */ /* ---------- Tokens ---------- */ :root { /* Brand */ --fw-bg: #f7f8fa; --fw-bg-soft: #eaf0f6; --fw-surface: #ffffff; --fw-ink: #0b1a33; --fw-ink-muted: #4a5a78; --fw-line: rgba(11, 26, 51, 0.08); --fw-line-strong: rgba(11, 26, 51, 0.16); --fw-primary: #00b7ff; --fw-primary-deep: #1e3a8a; --fw-secondary: #1e3a8a; --fw-accent: #ff2d87; --fw-accent-warm: #e63946; --fw-grad-brand: linear-gradient( 120deg, #00b7ff 0%, #ff2d87 55%, #1e3a8a 100% ); --fw-grad-soft: linear-gradient( 120deg, rgba(0, 183, 255, 0.18) 0%, rgba(255, 45, 135, 0.12) 60%, rgba(30, 58, 138, 0.18) 100% ); --fw-grad-mesh: radial-gradient( 60% 80% at 20% 0%, rgba(0, 183, 255, 0.18) 0%, transparent 60% ), radial-gradient( 50% 60% at 80% 10%, rgba(255, 45, 135, 0.16) 0%, transparent 65% ), radial-gradient( 70% 80% at 50% 100%, rgba(30, 58, 138, 0.16) 0%, transparent 70% ); /* Typografia */ --fw-font-display: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; --fw-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --fw-fs-h1: clamp(2.5rem, 5vw, 4.25rem); --fw-fs-h2: clamp(2rem, 4vw, 3rem); --fw-fs-h3: clamp(1.5rem, 2.6vw, 2rem); --fw-fs-lead: clamp(1.05rem, 1.2vw, 1.25rem); --fw-fs-body: 1rem; --fw-fs-small: 0.875rem; --fw-eyebrow-fs: 0.75rem; --fw-letter-spacing-eyebrow: 0.18em; /* Layout */ --fw-container: 1120px; --fw-container-wide: 1320px; --fw-gutter: clamp(1rem, 3vw, 2rem); --fw-section-y: clamp(4rem, 8vw, 8rem); --fw-radius-sm: 8px; --fw-radius-md: 14px; --fw-radius-lg: 22px; --fw-radius-xl: 32px; /* Cienie */ --fw-shadow-sm: 0 1px 2px rgba(11, 26, 51, 0.04), 0 2px 6px rgba(11, 26, 51, 0.05); --fw-shadow-md: 0 4px 12px rgba(11, 26, 51, 0.06), 0 12px 32px rgba(11, 26, 51, 0.08); --fw-shadow-lg: 0 12px 28px rgba(11, 26, 51, 0.08), 0 32px 64px rgba(11, 26, 51, 0.1); --fw-shadow-glow: 0 0 0 1px rgba(0, 183, 255, 0.18), 0 12px 32px rgba(0, 183, 255, 0.16); /* Easing */ --fw-ease: cubic-bezier(0.22, 1, 0.36, 1); --fw-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --fw-dur-fast: 180ms; --fw-dur-md: 320ms; --fw-dur-slow: 600ms; } /* Tryb ciemny: opt-in przez data-theme="dark" na . */ html[data-theme="dark"] { --fw-bg: #060a14; --fw-bg-soft: #0e152a; --fw-surface: #0f1a33; --fw-ink: #e9effa; --fw-ink-muted: #98a6bd; --fw-line: rgba(233, 239, 250, 0.08); --fw-line-strong: rgba(233, 239, 250, 0.16); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--fw-font-body); font-size: var(--fw-fs-body); line-height: 1.6; color: var(--fw-ink); background: var(--fw-bg); background-image: var(--fw-grad-mesh); background-attachment: fixed; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, video, svg { max-width: 100%; height: auto; display: block; } button { font: inherit; } a { color: inherit; text-decoration: none; } :focus-visible { outline: 3px solid var(--fw-primary); outline-offset: 3px; border-radius: 6px; } /* ---------- Skip link (must-have 12) ---------- */ .fw-skip { position: absolute; left: -9999px; top: 1rem; background: var(--fw-ink); color: var(--fw-bg); padding: 0.75rem 1rem; border-radius: var(--fw-radius-sm); z-index: 999; } .fw-skip:focus { left: 1rem; } /* ---------- Container ---------- */ .fw-container { width: 100%; max-width: var(--fw-container); margin: 0 auto; padding-inline: var(--fw-gutter); } .fw-container--wide { max-width: var(--fw-container-wide); } /* ---------- Typografia ---------- */ .fw-h1, h1.fw-h1 { font-family: var(--fw-font-display); font-size: var(--fw-fs-h1); font-weight: 700; letter-spacing: -0.02em; line-height: 1.05; margin: 0 0 1rem; } .fw-h1--display { font-size: clamp(2.75rem, 6.5vw, 5.5rem); letter-spacing: -0.025em; } .fw-h2 { font-family: var(--fw-font-display); font-size: var(--fw-fs-h2); font-weight: 700; letter-spacing: -0.015em; line-height: 1.1; margin: 0 0 1rem; } .fw-h3 { font-family: var(--fw-font-display); font-size: var(--fw-fs-h3); font-weight: 600; margin: 0 0 0.5rem; } .fw-eyebrow { font-family: var(--fw-font-display); font-weight: 600; font-size: var(--fw-eyebrow-fs); letter-spacing: var(--fw-letter-spacing-eyebrow); text-transform: uppercase; color: var(--fw-ink-muted); margin: 0 0 0.75rem; display: inline-flex; align-items: center; gap: 0.5rem; } .fw-eyebrow::before { content: ""; width: 18px; height: 2px; background: var(--fw-grad-brand); border-radius: 2px; } .fw-lead { font-size: var(--fw-fs-lead); color: var(--fw-ink-muted); max-width: 56ch; line-height: 1.55; } .fw-text-grad { background: var(--fw-grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; } /* ---------- Sections ---------- */ .fw-section { padding-block: var(--fw-section-y); position: relative; } .fw-section--page-hero { padding-block: clamp(5rem, 10vw, 9rem) clamp(2rem, 4vw, 4rem); } .fw-section--prose { padding-block: clamp(2rem, 4vw, 4rem); } .fw-section--split-bg { background: var(--fw-bg-soft); } .fw-section--ink { background: linear-gradient(135deg, #0b1a33 0%, #1e3a8a 100%); color: #f7f8fa; position: relative; isolation: isolate; } .fw-section--ink::before { content: ""; position: absolute; inset: 0; background: var(--fw-grad-mesh); opacity: 0.35; pointer-events: none; z-index: -1; } .fw-section--ink .fw-h2 { color: #ffffff; } .fw-section--ink .fw-eyebrow { color: rgba(255, 255, 255, 0.7); } .fw-section--ink .fw-lead { color: rgba(255, 255, 255, 0.78); } .fw-section__head { max-width: 720px; margin: 0 auto 3rem; text-align: center; } .fw-section__head--left { margin-inline: 0; text-align: left; } /* ---------- Header ---------- */ .fw-header { position: sticky; top: 0; z-index: 200; backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); background: color-mix(in oklab, var(--fw-bg) 75%, transparent); border-bottom: 1px solid var(--fw-line); } .fw-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 72px; } .fw-header__actions { display: flex; align-items: center; gap: 0.5rem; } /* ---------- Logo ---------- */ .fw-logo { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--fw-ink); font-family: var(--fw-font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; transition: transform var(--fw-dur-fast) var(--fw-ease); } .fw-logo:hover { transform: translateY(-1px); } .fw-logo__mark { width: 44px; height: auto; } .fw-logo__mark path { transition: stroke-dashoffset 1.2s var(--fw-ease); } .fw-logo__wordmark { line-height: 1; } .fw-logo--footer .fw-logo__mark { width: 56px; } /* ---------- Nav ---------- */ .fw-nav { display: flex; } .fw-nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.25rem; align-items: center; } .fw-nav__item { position: relative; } .fw-nav__link { display: inline-flex; align-items: center; padding: 0.5rem 0.9rem; border-radius: 999px; font-weight: 500; font-size: 0.95rem; color: var(--fw-ink); transition: background var(--fw-dur-fast) var(--fw-ease), color var(--fw-dur-fast) var(--fw-ease); } .fw-nav__link:hover, .fw-nav__item.is-current .fw-nav__link { background: color-mix(in oklab, var(--fw-primary) 10%, transparent); color: var(--fw-primary-deep); } html[data-theme="dark"] .fw-nav__item.is-current .fw-nav__link { color: var(--fw-primary); } /* ---------- Buttons ---------- */ .fw-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.85rem 1.4rem; border: 1px solid transparent; border-radius: 999px; font-family: var(--fw-font-display); font-weight: 600; font-size: 0.95rem; cursor: pointer; transition: transform var(--fw-dur-fast) var(--fw-ease), box-shadow var(--fw-dur-md) var(--fw-ease), background-position var(--fw-dur-md) var(--fw-ease); background-clip: padding-box; will-change: transform; } .fw-btn--sm { padding: 0.55rem 1rem; font-size: 0.875rem; } .fw-btn--lg { padding: 1.05rem 1.8rem; font-size: 1.05rem; } .fw-btn--primary { color: #fff; background-image: var(--fw-grad-brand); background-size: 200% 100%; background-position: 0% 0%; box-shadow: 0 8px 22px rgba(0, 183, 255, 0.3); } .fw-btn--primary:hover { background-position: 100% 0%; transform: translateY(-2px); box-shadow: 0 14px 32px rgba(255, 45, 135, 0.3); } .fw-btn--ghost { color: var(--fw-ink); background: transparent; border-color: var(--fw-line-strong); } .fw-btn--ghost:hover { background: var(--fw-surface); border-color: var(--fw-primary); color: var(--fw-primary-deep); } .fw-btn:focus-visible { outline-offset: 3px; } .fw-cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; } /* ---------- Theme toggle ---------- */ .fw-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--fw-line-strong); background: transparent; color: var(--fw-ink); cursor: pointer; transition: background var(--fw-dur-fast) var(--fw-ease), color var(--fw-dur-fast) var(--fw-ease), transform var(--fw-dur-fast) var(--fw-ease); } .fw-theme-toggle:hover { background: var(--fw-surface); color: var(--fw-primary-deep); transform: rotate(15deg); } /* ---------- Burger (mobile menu) ---------- */ .fw-burger { display: none; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--fw-line-strong); background: transparent; cursor: pointer; position: relative; } .fw-burger span { position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transform-origin: center; transition: transform var(--fw-dur-md) var(--fw-ease), opacity var(--fw-dur-fast) var(--fw-ease), background var(--fw-dur-fast) var(--fw-ease); } .fw-burger span:nth-child(1) { transform: translate(-50%, -7px); } .fw-burger span:nth-child(2) { transform: translate(-50%, 0); } .fw-burger span:nth-child(3) { transform: translate(-50%, 7px); } .fw-burger[aria-expanded="true"] span:nth-child(1) { transform: translate(-50%, 0) rotate(45deg); } .fw-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .fw-burger[aria-expanded="true"] span:nth-child(3) { transform: translate(-50%, 0) rotate(-45deg); } /* ---------- Hero ---------- */ .fw-hero { position: relative; min-height: clamp(640px, 92vh, 980px); padding-block: clamp(4rem, 7vw, 6rem) clamp(4rem, 8vw, 8rem); overflow: hidden; isolation: isolate; } .fw-hero::before { content: ""; position: absolute; inset: -10% -5% -5%; background: var(--fw-grad-mesh); filter: blur(40px); z-index: -2; opacity: 0.55; pointer-events: none; } /* Canvas wypelnia cale hero jako warstwa za kontentem. */ .fw-hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; cursor: grab; touch-action: none; } .fw-hero__canvas:active { cursor: grabbing; } .fw-hero__fallback { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: -1; } .fw-hero__fallback svg { width: min(60vw, 520px); height: auto; animation: fw-pulse 6s ease-in-out infinite; } @keyframes fw-pulse { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 24px rgba(0, 183, 255, 0.25)); } 50% { transform: scale(1.05); filter: drop-shadow(0 0 36px rgba(255, 45, 135, 0.3)); } } .fw-hero__layout { position: relative; z-index: 1; } .fw-hero__copy { max-width: 38rem; /* Lekkie tlo za tekstem zeby byl czytelny nad scena 3D. */ background: radial-gradient( 120% 100% at 0% 50%, color-mix(in oklab, var(--fw-bg) 72%, transparent) 0%, color-mix(in oklab, var(--fw-bg) 50%, transparent) 50%, transparent 95% ); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); padding: 0.5rem 0; margin-left: -1rem; padding-left: 1rem; border-radius: var(--fw-radius-lg); } .fw-hero__headline { font-size: clamp(2.75rem, 6vw, 5.25rem); font-weight: 700; letter-spacing: -0.025em; line-height: 1.02; margin: 0 0 1.25rem; } .fw-hero__sub { font-size: var(--fw-fs-lead); color: var(--fw-ink-muted); margin-bottom: 2rem; max-width: 36ch; line-height: 1.5; } .fw-hero__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2.5rem; } /* Hint w prawym dolnym rogu sceny - "chwyc i obroc". */ .fw-hero__hint { position: absolute; right: clamp(1rem, 4vw, 3rem); bottom: clamp(1rem, 3vw, 2rem); display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.85rem; border-radius: 999px; font-size: 0.78rem; letter-spacing: 0.04em; color: var(--fw-ink-muted); background: color-mix(in oklab, var(--fw-surface) 60%, transparent); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); border: 1px solid var(--fw-line); z-index: 2; pointer-events: none; opacity: 0; transform: translateY(8px); animation: fw-hint-in 0.6s var(--fw-ease) 1.2s forwards; } .fw-hero__hint svg { flex-shrink: 0; color: var(--fw-primary); } @keyframes fw-hint-in { to { opacity: 1; transform: translateY(0); } } .fw-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.85rem; border: 1px solid var(--fw-line); border-radius: 999px; font-size: 0.825rem; background: color-mix(in oklab, var(--fw-surface) 70%, transparent); color: var(--fw-ink-muted); font-weight: 500; } .fw-chip::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--fw-grad-brand); } /* ---------- Cards / grid ---------- */ .fw-grid { display: grid; gap: 1.5rem; } .fw-grid--cards { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } .fw-grid--features { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .fw-grid--3 { grid-template-columns: repeat(3, 1fr); } @media (max-width: 880px) { .fw-grid--3 { grid-template-columns: 1fr; } } .fw-card { background: var(--fw-surface); border: 1px solid var(--fw-line); border-radius: var(--fw-radius-lg); overflow: hidden; transition: transform var(--fw-dur-md) var(--fw-ease), box-shadow var(--fw-dur-md) var(--fw-ease), border-color var(--fw-dur-md) var(--fw-ease); } .fw-card:hover { transform: translateY(-4px); box-shadow: var(--fw-shadow-md); border-color: color-mix(in oklab, var(--fw-primary) 30%, var(--fw-line)); } .fw-card__media img { width: 100%; height: 220px; object-fit: cover; } .fw-card__body { padding: 1.25rem 1.5rem 1.5rem; } .fw-card__title { font-family: var(--fw-font-display); font-size: 1.2rem; margin: 0 0 0.5rem; } .fw-card__excerpt { color: var(--fw-ink-muted); margin: 0; font-size: 0.95rem; } /* ---------- Feature item ---------- */ .fw-feature { background: var(--fw-surface); border: 1px solid var(--fw-line); border-radius: var(--fw-radius-lg); padding: 1.5rem; transition: transform var(--fw-dur-md) var(--fw-ease), box-shadow var(--fw-dur-md) var(--fw-ease); } .fw-feature:hover { transform: translateY(-3px); box-shadow: var(--fw-shadow-md); } .fw-feature__icon { width: 48px; height: 48px; border-radius: 14px; background: var(--fw-grad-brand); display: grid; place-items: center; color: #fff; margin-bottom: 1rem; box-shadow: 0 8px 18px rgba(0, 183, 255, 0.25); } .fw-feature__icon svg { width: 22px; height: 22px; } .fw-feature__title { font-family: var(--fw-font-display); font-size: 1.1rem; font-weight: 600; margin: 0 0 0.4rem; } .fw-feature__desc { color: var(--fw-ink-muted); margin: 0; font-size: 0.95rem; } /* ---------- Pricing cards ---------- */ .fw-pricing { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; } .fw-pricing__card { position: relative; background: var(--fw-surface); border: 1px solid var(--fw-line); border-radius: var(--fw-radius-lg); padding: 1.75rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; transition: transform var(--fw-dur-md) var(--fw-ease), box-shadow var(--fw-dur-md) var(--fw-ease); } .fw-pricing__card:hover { transform: translateY(-3px); box-shadow: var(--fw-shadow-md); } .fw-pricing__card.is-featured { border-color: transparent; background: linear-gradient(var(--fw-surface), var(--fw-surface)) padding-box, var(--fw-grad-brand) border-box; border-width: 2px; } .fw-pricing__card.is-featured::after { content: "Najczesciej wybierany"; position: absolute; top: -12px; left: 1.5rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; background: var(--fw-grad-brand); color: #fff; padding: 0.35rem 0.75rem; border-radius: 999px; } .fw-pricing__name { font-family: var(--fw-font-display); font-size: 1.1rem; margin: 0; color: var(--fw-ink-muted); font-weight: 600; } .fw-pricing__price { font-family: var(--fw-font-display); font-size: 2.2rem; font-weight: 700; margin: 0; } .fw-pricing__price small { font-size: 0.85rem; color: var(--fw-ink-muted); font-weight: 500; display: block; } .fw-pricing__desc { color: var(--fw-ink-muted); font-size: 0.95rem; margin: 0; min-height: 3.5em; } .fw-pricing__list { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 0.5rem; } .fw-pricing__list li { padding-left: 1.5rem; position: relative; font-size: 0.95rem; } .fw-pricing__list li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 14px; height: 8px; border-left: 2px solid var(--fw-primary); border-bottom: 2px solid var(--fw-primary); transform: rotate(-45deg); } .fw-pricing__cta { margin-top: auto; } /* ---------- Process steps ---------- */ .fw-process { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; counter-reset: step; } .fw-step { position: relative; padding: 1.5rem 1.5rem 1.5rem 1.5rem; background: var(--fw-surface); border: 1px solid var(--fw-line); border-radius: var(--fw-radius-lg); counter-increment: step; } .fw-step::before { content: counter(step, decimal-leading-zero); position: absolute; top: -18px; left: 1.5rem; font-family: var(--fw-font-display); font-size: 1.5rem; font-weight: 700; background: var(--fw-grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; } .fw-step__title { font-family: var(--fw-font-display); font-size: 1.05rem; font-weight: 600; margin: 0.25rem 0 0.4rem; } .fw-step__desc { color: var(--fw-ink-muted); margin: 0; font-size: 0.95rem; } /* ---------- Portfolio teaser cards ---------- */ .fw-portfolio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; } .fw-pcard { border-radius: var(--fw-radius-xl); overflow: hidden; background: var(--fw-surface); border: 1px solid var(--fw-line); position: relative; transition: transform var(--fw-dur-md) var(--fw-ease), box-shadow var(--fw-dur-md) var(--fw-ease); } .fw-pcard:hover { transform: translateY(-6px); box-shadow: var(--fw-shadow-lg); } .fw-pcard__link { display: block; color: inherit; } .fw-pcard__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--fw-bg-soft); } .fw-pcard__img, .fw-pcard__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--fw-dur-slow) var(--fw-ease); } .fw-pcard:hover .fw-pcard__img { transform: scale(1.06); } .fw-pcard__placeholder { position: absolute; inset: 0; background: var(--fw-grad-soft); } .fw-pcard__body { padding: 1.25rem 1.5rem 1.5rem; } .fw-pcard__title { font-family: var(--fw-font-display); font-size: 1.25rem; margin: 0.5rem 0 0.4rem; } .fw-pcard__excerpt { color: var(--fw-ink-muted); margin: 0; font-size: 0.95rem; } /* ---------- Badge ---------- */ .fw-badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.3rem 0.75rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; font-family: var(--fw-font-display); } .fw-badge--concept { background: rgba(255, 45, 135, 0.1); color: var(--fw-accent); border: 1px solid rgba(255, 45, 135, 0.2); } .fw-badge--real { background: rgba(0, 183, 255, 0.1); color: var(--fw-primary-deep); border: 1px solid rgba(0, 183, 255, 0.2); } /* ---------- Project meta dl ---------- */ .fw-project__meta { display: flex; flex-wrap: wrap; gap: 1.5rem; margin: 1.5rem 0; } .fw-project__meta div { display: grid; } .fw-project__meta dt { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--fw-ink-muted); } .fw-project__meta dd { margin: 0; font-weight: 600; } .fw-project__story { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; } @media (max-width: 760px) { .fw-project__story { grid-template-columns: 1fr; } } /* ---------- Prose ---------- */ .fw-prose { max-width: 70ch; } .fw-prose h2 { font-family: var(--fw-font-display); font-size: 1.75rem; margin: 2.5rem 0 1rem; line-height: 1.2; } .fw-prose h3 { font-family: var(--fw-font-display); font-size: 1.35rem; margin: 2rem 0 0.75rem; } .fw-prose p { margin: 0 0 1rem; line-height: 1.7; } .fw-prose ul, .fw-prose ol { margin: 0 0 1.5rem; padding-left: 1.5rem; } .fw-prose li { margin-bottom: 0.5rem; } .fw-prose a { color: var(--fw-primary-deep); text-decoration: underline; text-underline-offset: 3px; } .fw-prose a:hover { color: var(--fw-accent); } .fw-prose blockquote { border-left: 3px solid var(--fw-primary); padding-left: 1.25rem; font-size: 1.125rem; color: var(--fw-ink-muted); margin: 2rem 0; } /* ---------- CTA section ---------- */ .fw-cta { text-align: center; background: var(--fw-grad-brand); color: #fff; border-radius: var(--fw-radius-xl); padding: clamp(2rem, 5vw, 4rem); max-width: 1000px; margin: 0 auto; box-shadow: 0 24px 60px rgba(0, 183, 255, 0.2); } .fw-cta h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.4rem); margin: 0 0 1.5rem; } .fw-cta .fw-btn--primary { background: #fff; color: var(--fw-ink); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15); } .fw-cta .fw-btn--primary:hover { background: var(--fw-bg); transform: translateY(-2px); } /* ---------- Footer ---------- */ .fw-footer { background: linear-gradient(180deg, #0b1a33 0%, #060a14 100%); color: rgba(255, 255, 255, 0.85); padding-block: 4rem 2rem; margin-top: 4rem; position: relative; overflow: hidden; } .fw-footer::before { content: ""; position: absolute; inset: 0; background: var(--fw-grad-mesh); opacity: 0.2; pointer-events: none; } .fw-footer .fw-logo { color: #fff; } .fw-footer__grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2.5rem; position: relative; } @media (max-width: 880px) { .fw-footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 540px) { .fw-footer__grid { grid-template-columns: 1fr; } } .fw-footer__claim { color: rgba(255, 255, 255, 0.7); margin-top: 0.75rem; font-size: 0.95rem; max-width: 28ch; } .fw-footer__heading { font-family: var(--fw-font-display); font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); margin: 0 0 1rem; font-weight: 600; } .fw-footer__menu { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; } .fw-footer__menu a { color: rgba(255, 255, 255, 0.85); transition: color var(--fw-dur-fast) var(--fw-ease); } .fw-footer__menu a:hover { color: var(--fw-primary); } .fw-footer__contact address { font-style: normal; line-height: 1.7; color: rgba(255, 255, 255, 0.85); } .fw-footer__contact a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.3); } .fw-footer__contact a:hover { text-decoration-color: var(--fw-primary); } .fw-footer__cookies-btn { display: inline-flex; margin-top: 0.75rem; background: transparent; color: rgba(255, 255, 255, 0.85); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 999px; padding: 0.45rem 1rem; font-size: 0.875rem; cursor: pointer; transition: background var(--fw-dur-fast) var(--fw-ease), color var(--fw-dur-fast) var(--fw-ease); } .fw-footer__cookies-btn:hover { background: rgba(255, 255, 255, 0.1); color: var(--fw-primary); } .fw-footer__bottom { margin-top: 2.5rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.55); font-size: 0.85rem; } /* ---------- Cookies bar (WildClock-style) ---------- */ .fw-cookies { position: fixed; bottom: 1rem; left: 1rem; right: 1rem; z-index: 300; max-width: 520px; margin-left: auto; background: var(--fw-surface); color: var(--fw-ink); border: 1px solid var(--fw-line-strong); border-radius: var(--fw-radius-lg); box-shadow: var(--fw-shadow-lg); transform: translateY(20px); opacity: 0; transition: transform var(--fw-dur-md) var(--fw-ease), opacity var(--fw-dur-md) var(--fw-ease); } .fw-cookies.is-visible { transform: translateY(0); opacity: 1; } .fw-cookies__inner { padding: 1.25rem 1.5rem; } .fw-cookies__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.5rem; } .fw-cookies__title { font-family: var(--fw-font-display); font-size: 1.05rem; margin: 0; font-weight: 600; } .fw-cookies__customize { display: inline-flex; align-items: center; gap: 0.4rem; background: transparent; border: 1px solid var(--fw-line-strong); color: var(--fw-ink-muted); padding: 0.35rem 0.7rem; border-radius: 999px; font-size: 0.8rem; cursor: pointer; transition: color var(--fw-dur-fast) var(--fw-ease), border-color var(--fw-dur-fast) var(--fw-ease), background var(--fw-dur-fast) var(--fw-ease); } .fw-cookies__customize:hover { color: var(--fw-primary-deep); border-color: var(--fw-primary); background: rgba(0, 183, 255, 0.06); } .fw-cookies__customize-label { font-weight: 600; } .fw-cookies__close { background: transparent; border: 0; color: var(--fw-ink-muted); cursor: pointer; width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center; transition: background var(--fw-dur-fast) var(--fw-ease), color var(--fw-dur-fast) var(--fw-ease); } .fw-cookies__close:hover { background: var(--fw-bg-soft); color: var(--fw-ink); } .fw-cookies__desc { font-size: 0.9rem; color: var(--fw-ink-muted); margin: 0 0 1rem; line-height: 1.55; } .fw-cookies__desc [data-fw-countdown] { font-weight: 700; color: var(--fw-ink); font-variant-numeric: tabular-nums; display: inline-block; min-width: 1.5em; text-align: center; } .fw-cookies__row { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 0.6rem; padding: 0.55rem 0; font-size: 0.9rem; border-top: 1px solid var(--fw-line); } .fw-cookies__row:first-of-type { border-top: 0; } .fw-cookies__row input { margin-top: 4px; } .fw-cookies__row strong { display: block; margin-bottom: 0.15rem; } .fw-cookies__row--locked { color: var(--fw-ink-muted); } .fw-cookies__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; justify-content: flex-end; } .fw-cookies__actions--compact { justify-content: stretch; } .fw-cookies__actions--compact .fw-btn--primary { flex: 1; } .fw-cookies__legal { font-size: 0.78rem; color: var(--fw-ink-muted); margin: 0.85rem 0 0; } .fw-cookies__legal a { color: var(--fw-primary-deep); text-decoration: underline; } /* ---------- Forms ---------- */ .fw-form { display: grid; gap: 1rem; } .fw-form__row { display: grid; gap: 0.4rem; } .fw-form__row--inline { grid-template-columns: 1fr 1fr; gap: 1rem; } @media (max-width: 540px) { .fw-form__row--inline { grid-template-columns: 1fr; } } .fw-form label { font-weight: 600; font-size: 0.9rem; } .fw-form input[type="text"], .fw-form input[type="email"], .fw-form input[type="tel"], .fw-form input[type="url"], .fw-form select, .fw-form textarea { width: 100%; padding: 0.85rem 1rem; border: 1px solid var(--fw-line-strong); border-radius: var(--fw-radius-md); background: var(--fw-surface); color: var(--fw-ink); font: inherit; transition: border-color var(--fw-dur-fast) var(--fw-ease), box-shadow var(--fw-dur-fast) var(--fw-ease); } .fw-form input:focus, .fw-form textarea:focus, .fw-form select:focus { border-color: var(--fw-primary); box-shadow: 0 0 0 3px rgba(0, 183, 255, 0.18); outline: none; } .fw-form textarea { min-height: 140px; resize: vertical; } .fw-form__honeypot { position: absolute; left: -9999px; opacity: 0; pointer-events: none; } .fw-form__hint { font-size: 0.85rem; color: var(--fw-ink-muted); } .fw-form__error { color: var(--fw-accent-warm); font-size: 0.875rem; } .fw-form__success { background: rgba(0, 183, 255, 0.12); border: 1px solid rgba(0, 183, 255, 0.35); color: var(--fw-primary-deep); border-radius: var(--fw-radius-md); padding: 1rem; } .fw-form .fw-checkbox { display: flex; gap: 0.5rem; align-items: flex-start; font-weight: 400; font-size: 0.875rem; } /* ---------- Multistep quote form ---------- */ .fw-quote { max-width: 800px; margin: 0 auto; } .fw-quote__bar { height: 4px; border-radius: 999px; background: var(--fw-line); overflow: hidden; margin-bottom: 2rem; } .fw-quote__bar-fill { display: block; height: 100%; width: 10%; background: var(--fw-grad-brand); transition: width var(--fw-dur-md) var(--fw-ease); } .fw-quote__step { display: none; } .fw-quote__step.is-active { display: block; animation: fw-fade-in 0.4s var(--fw-ease) both; } .fw-quote__nav { display: flex; gap: 0.75rem; justify-content: space-between; margin-top: 2rem; } .fw-quote__opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.75rem; } .fw-quote__opt { border: 1px solid var(--fw-line-strong); border-radius: var(--fw-radius-md); padding: 1rem 1.25rem; cursor: pointer; display: flex; gap: 0.75rem; align-items: flex-start; background: var(--fw-surface); transition: border-color var(--fw-dur-fast) var(--fw-ease), background var(--fw-dur-fast) var(--fw-ease); } .fw-quote__opt:hover { border-color: var(--fw-primary); } .fw-quote__opt input { margin-top: 4px; } .fw-quote__opt strong { font-family: var(--fw-font-display); display: block; } .fw-quote__opt small { color: var(--fw-ink-muted); } .fw-quote__step h2 { margin-bottom: 0.5rem; } .fw-quote__counter { color: var(--fw-ink-muted); font-size: 0.875rem; } @keyframes fw-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ---------- Lab grid ---------- */ .fw-lab-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; } .fw-lab__demo { background: var(--fw-surface); border: 1px solid var(--fw-line); border-radius: var(--fw-radius-lg); overflow: hidden; display: flex; flex-direction: column; } .fw-lab__stage { aspect-ratio: 16 / 10; background: var(--fw-bg-soft); position: relative; overflow: hidden; } .fw-lab__body { padding: 1.25rem 1.5rem 1.5rem; } .fw-lab__title { font-family: var(--fw-font-display); font-size: 1.15rem; margin: 0.5rem 0; } .fw-lab__desc { color: var(--fw-ink-muted); margin: 0; font-size: 0.95rem; } /* ---------- Preloader ---------- */ .fw-preloader { position: fixed; inset: 0; background: linear-gradient(135deg, #060a14 0%, #0b1a33 60%, #1e3a8a 100%); color: #e9effa; z-index: 999; display: grid; place-items: center; padding: 1rem; transition: opacity 0.6s var(--fw-ease), visibility 0s linear 0.6s; overflow: hidden; } .fw-preloader::before { content: ""; position: absolute; inset: -20%; background: var(--fw-grad-mesh); opacity: 0.3; filter: blur(50px); animation: fw-pre-mesh 8s ease-in-out infinite; pointer-events: none; } @keyframes fw-pre-mesh { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(2%, -2%) rotate(2deg); } } .fw-preloader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; } .fw-preloader__inner { position: relative; width: min(420px, 90vw); display: grid; gap: 1.5rem; text-align: center; } .fw-preloader__brand { display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem; font-family: var(--fw-font-display); font-size: 1.4rem; font-weight: 700; letter-spacing: -0.01em; color: #fff; filter: drop-shadow(0 4px 18px rgba(0, 183, 255, 0.3)); } .fw-preloader__mark { width: 56px; height: auto; } .fw-preloader__path { /* Stroke draw effect: rysowanie krzywej od zera. */ stroke-dasharray: 220; stroke-dashoffset: 220; animation: fw-pre-draw 2.4s var(--fw-ease) infinite; } @keyframes fw-pre-draw { 0% { stroke-dashoffset: 220; } 45% { stroke-dashoffset: 0; } 55% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -220; } } .fw-preloader__wordmark { display: inline-block; } .fw-preloader__window { position: relative; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 183, 255, 0.1); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: fw-pre-window-in 0.6s var(--fw-ease) both; } @keyframes fw-pre-window-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: translateY(0) scale(1); } } .fw-preloader__topbar { display: flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.75rem; background: rgba(255, 255, 255, 0.04); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .fw-preloader__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .fw-preloader__dot--r { background: #ff5f57; } .fw-preloader__dot--y { background: #ffbd2e; } .fw-preloader__dot--g { background: #28c840; } .fw-preloader__url { margin-left: auto; margin-right: auto; font-family: var(--fw-font-body); font-size: 0.7rem; color: rgba(233, 239, 250, 0.5); letter-spacing: 0.02em; padding: 0.15rem 0.6rem; background: rgba(255, 255, 255, 0.05); border-radius: 4px; } .fw-preloader__viewport { display: grid; gap: 0.55rem; padding: 0.85rem; min-height: 180px; } .fw-preloader__sk { display: block; border-radius: 6px; background: linear-gradient( 90deg, rgba(255, 255, 255, 0.04) 0%, rgba(0, 183, 255, 0.18) 50%, rgba(255, 255, 255, 0.04) 100% ); background-size: 200% 100%; animation: fw-pre-shimmer 1.6s linear infinite; } @keyframes fw-pre-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .fw-preloader__sk--hero { height: 56px; margin-bottom: 0.4rem; background: linear-gradient( 90deg, rgba(0, 183, 255, 0.15) 0%, rgba(255, 45, 135, 0.2) 50%, rgba(30, 58, 138, 0.15) 100% ); background-size: 200% 100%; animation: fw-pre-shimmer 2.4s linear infinite; } .fw-preloader__sk--title { height: 12px; width: 60%; } .fw-preloader__sk--text { height: 8px; } .fw-preloader__sk--short { width: 75%; } .fw-preloader__cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; margin-top: 0.3rem; } .fw-preloader__sk--card { height: 38px; border-radius: 6px; } .fw-preloader__progress { height: 3px; background: rgba(255, 255, 255, 0.08); position: relative; overflow: hidden; } .fw-preloader__progress-fill { position: absolute; inset: 0; background: linear-gradient(90deg, #00b7ff 0%, #ff2d87 50%, #1e3a8a 100%); transform-origin: left; animation: fw-pre-progress 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite; } @keyframes fw-pre-progress { 0% { transform: translateX(-100%) scaleX(0.4); } 60% { transform: translateX(40%) scaleX(0.7); } 100% { transform: translateX(120%) scaleX(0.4); } } .fw-preloader__caption { margin: 0; font-size: 0.85rem; color: rgba(233, 239, 250, 0.65); letter-spacing: 0.02em; font-family: var(--fw-font-display); font-weight: 500; } /* ---------- Burger / mobile menu ---------- */ @media (max-width: 880px) { .fw-burger { display: inline-flex; } .fw-nav { position: fixed; inset: 72px 0 auto 0; background: var(--fw-bg); border-bottom: 1px solid var(--fw-line); padding: 1rem var(--fw-gutter) 1.5rem; transform: translateY(-110%); transition: transform var(--fw-dur-md) var(--fw-ease); box-shadow: var(--fw-shadow-md); } .fw-nav.is-open { transform: translateY(0); } .fw-nav__list { flex-direction: column; align-items: stretch; gap: 0.25rem; } .fw-nav__link { padding: 0.85rem 1rem; } .fw-hero__layout { grid-template-columns: 1fr; } .fw-hero__copy { background: color-mix(in oklab, var(--fw-bg) 78%, transparent); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } } /* ---------- Reduced motion (must-have 12) ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .fw-hero__fallback svg { animation: none; } .fw-preloader { display: none; } } /* ---------- Article ---------- */ .fw-article__media img { border-radius: var(--fw-radius-lg); margin: 0 auto; max-height: 520px; object-fit: cover; } .fw-search-list { list-style: none; padding: 0; display: grid; gap: 1.25rem; } .fw-search-list h2 { font-size: 1.15rem; margin: 0 0 0.25rem; } .fw-404__inner { text-align: center; max-width: 640px; margin: 0 auto; } .fw-404__num { font-family: var(--fw-font-display); font-size: clamp(6rem, 18vw, 12rem); font-weight: 700; line-height: 1; background: var(--fw-grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 1rem; } /* ---------- Cursor trail (globalny pyl za kursorem) ---------- */ .fw-cursor-trail { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 9999; } @media (prefers-reduced-motion: reduce) { .fw-cursor-trail { display: none; } } @media (pointer: coarse) { .fw-cursor-trail { display: none; } } /* ---------- Single project cover & preview ---------- */ .fw-project__cover { display: block; width: 100%; height: auto; border-radius: var(--fw-radius-xl); box-shadow: var(--fw-shadow-lg); aspect-ratio: 4 / 3; object-fit: cover; } .fw-project__preview { display: block; width: 100%; height: auto; border-radius: var(--fw-radius-xl); box-shadow: var(--fw-shadow-lg); } /* ---------- Single project: koncepty info ---------- */ .fw-project__note { display: inline-flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; padding: 0.85rem 1rem; background: rgba(255, 45, 135, 0.06); border-left: 3px solid var(--fw-accent); border-radius: 8px; font-size: 0.9rem; color: var(--fw-ink-muted); max-width: 60ch; margin: 0; }