/* ============================================================================= site.css — Marco Produkcja Mebli / kierunek CIEMNY premium offset-card Paleta: tło głęboki grafit #11100F · primary brass #C79A5E · tekst jasny Fraunces (display, serif) + Source Serif 4 (body) Nadpisuje bazę styles.css o charakter premium. Link: tokens.css → styles.css → site.css ============================================================================= */ /* --- Import Google Fonts (Fraunces + Source Serif 4) ----------------------- */ /* Fonty ładowane też inline w każdej podstrony — tutaj fallback */ /* --- Typografia premium (ciemne tło) --------------------------------------- */ h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: 300; letter-spacing: -0.02em; color: var(--text-strong); text-wrap: balance; } h1 { font-weight: 300; font-style: italic; } h2 { font-weight: 400; } strong { font-weight: 700; color: var(--color-accent); } p { color: var(--text-body); } /* Eyebrow brass — cienka linia mosiądzu, symetryczna lub lewostronnie */ .eyebrow--brass { color: var(--color-primary); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: var(--space-5); } .eyebrow--brass::before, .eyebrow--brass::after { content: ""; flex: 0 0 clamp(20px, 5vw, 48px); height: 1px; background: var(--color-primary); opacity: .55; } .eyebrow--brass.left { justify-content: flex-start; margin-bottom: var(--space-4); } .eyebrow--brass.left::before { display: none; } .eyebrow--brass.left::after { display: none; } /* --- Sekcje tła ciemnego --------------------------------------------------- */ .bg-surface { background: var(--color-surface); } .bg-bg { background: var(--color-bg); } .bg-brass { background: var(--color-primary); } /* --- overflow / scrollowanie ----------------------------------------------- */ html { overflow-x: clip; } body { overflow-x: clip; } .container { max-width: 1140px; margin-inline: auto; padding-inline: clamp(16px, 4vw, 40px); } h1, h2, h3 { overflow-wrap: break-word; word-break: break-word; } /* --- Header ciemny premium ------------------------------------------------- */ .site-header { background: color-mix(in srgb, var(--color-bg) 92%, transparent); backdrop-filter: saturate(120%) blur(10px); border-bottom: 1px solid var(--color-border); } .site-header .brand-name { font-family: var(--font-heading); font-size: var(--fs-lg); font-weight: 300; letter-spacing: .04em; color: var(--text-strong); } .site-header .brand-tagline { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--color-primary); } nav[aria-label="Główna"] a { font-size: var(--fs-sm); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); transition: color .2s ease; } nav[aria-label="Główna"] a:hover { color: var(--color-primary); } .header-cta { background: var(--color-primary) !important; color: var(--color-accentText) !important; /* #111 na brass — kontrast >4.5 */ font-size: var(--fs-sm) !important; letter-spacing: .06em; text-transform: uppercase; border-radius: var(--radius-md); padding: 10px 20px !important; min-height: 44px !important; font-weight: 700 !important; } .header-cta:hover { background: var(--color-primary600) !important; color: var(--color-accentText) !important; } /* --- Przyciski (WCAG ciemny motyw) ----------------------------------------- */ .btn-primary { background: var(--color-accent) !important; /* ciepła biel #E8E2D8 */ color: var(--color-accentText) !important; /* #111 — kontrast >12 */ border-color: var(--color-accent) !important; font-weight: 700 !important; } .btn-primary:hover { background: var(--color-accentHover) !important; color: var(--color-accentText) !important; } .btn-ghost { border-color: var(--color-border) !important; color: var(--text-strong) !important; } .btn-ghost:hover { background: var(--color-surface) !important; } /* CTA główne brass z ciemnym tekstem */ .cta-brass { display: inline-flex; align-items: center; justify-content: center; gap: .5em; min-height: 52px; padding: 14px 30px; background: var(--color-primary); color: var(--color-accentText); /* #111 na brass — WCAG AA */ border-radius: var(--radius-md); font-weight: 700; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-accent) 30%, transparent); transition: background .2s ease, transform .2s ease; } .cta-brass:hover { background: var(--color-primary600); color: var(--color-accentText); transform: translateY(-2px); } /* ============================================================================ HERO: offset-card — przesunięta karta treści nachodząca na realne zdjęcie Layout: zdjęcie zajmuje prawą stronę (lub całość na mobile), karta treści offset — wysuwa się ponad/przed zdjęcie. data-hero-archetype="offset-card" ============================================================================ */ .hero-offset { position: relative; display: grid; grid-template-columns: 1fr; min-height: clamp(80vh, 88svh, 960px); overflow: hidden; background: var(--color-bg); } @media (min-width: 900px) { .hero-offset { grid-template-columns: 55% 1fr; } } /* Zdjęcie: prawa kolumna, pełna wysokość */ .hero-offset__image { position: relative; overflow: hidden; min-height: clamp(280px, 50vw, 600px); order: 1; } @media (min-width: 900px) { .hero-offset__image { grid-column: 2; grid-row: 1; min-height: unset; order: unset; } } .hero-offset__image img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } /* Karta offset — na mobile pod zdjęciem, na desktop nasuwa się przed zdjęcie */ .hero-offset__card { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: clamp(36px, 6vw, 80px) clamp(20px, 5vw, 64px); gap: var(--space-5); background: var(--color-bg); order: 2; } @media (min-width: 900px) { .hero-offset__card { grid-column: 1; grid-row: 1; order: unset; /* Offset: karta wysuwa się nad zdjęcie o 48px (cień) */ margin-right: -48px; box-shadow: 8px 0 48px rgba(0,0,0,.55); } } /* Akcent mosiężna linia boczna */ .hero-offset__card::before { content: ""; position: absolute; left: 0; top: 10%; bottom: 10%; width: 3px; background: var(--color-primary); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } /* H1 hero — widoczne od 0. klatki, ZERO reveal/mask (L-040) */ .hero-h1 { font-family: var(--font-heading); font-size: clamp(34px, 6vw, 78px); font-weight: 300; font-style: italic; line-height: 1.05; letter-spacing: -0.025em; color: var(--text-strong); text-wrap: balance; overflow-wrap: break-word; /* ZERO opacity/transform tutaj — L-040 */ } .hero-lead { font-size: clamp(15px, 1.8vw, 19px); color: var(--text-body); max-width: 52ch; line-height: 1.7; font-family: var(--font-body); } .hero-cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-top: var(--space-2); } /* Numer telefonu w hero (duży, klikalny) */ .hero-tel { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-heading); font-size: clamp(18px, 2.5vw, 24px); font-weight: 400; color: var(--color-primary); letter-spacing: .02em; } .hero-tel:hover { color: var(--text-strong); } /* Obszary obsługi pod CTA */ .hero-areas { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--space-2); } /* --- Manifest / benefit ---------------------------------------------------- */ .sec-manifest { padding-block: var(--space-9); text-align: center; background: var(--color-surface); } .manifest-quote { font-family: var(--font-heading); font-size: clamp(20px, 3.5vw, 38px); font-style: italic; font-weight: 300; color: var(--text-strong); max-width: 720px; margin-inline: auto; line-height: 1.3; } .manifest-rule { width: 48px; height: 1px; background: var(--color-primary); margin: var(--space-5) auto; opacity: .7; } /* --- Trust grid ------------------------------------------------------------ */ .trust-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } .trust-item { display: flex; gap: var(--space-3); align-items: flex-start; } .trust-item__icon { flex-shrink: 0; width: 32px; height: 32px; color: var(--color-primary); } .trust-item__text h4 { font-size: var(--fs-base); font-weight: 600; color: var(--text-strong); margin-bottom: 4px; } .trust-item__text p { font-size: var(--fs-sm); color: var(--text-body); } /* --- Karty usług ----------------------------------------------------------- */ .services-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); } .service-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); display: grid; gap: var(--space-3); transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease; } .service-card:hover { box-shadow: 0 8px 40px rgba(0,0,0,.45); transform: translateY(-3px); border-color: var(--color-primary); } .service-card__icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--color-primary) 14%, transparent); color: var(--color-primary); } .service-card h3 { font-size: var(--fs-xl); font-weight: 400; color: var(--text-strong); margin: 0; } .service-card p { font-size: var(--fs-sm); color: var(--text-body); line-height: 1.65; max-width: 38ch; } .service-card .card-link { font-size: var(--fs-sm); letter-spacing: .06em; text-transform: uppercase; color: var(--color-primary); display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-2); transition: gap .2s ease; } .service-card .card-link:hover { gap: 10px; } /* --- Proces (timeline) ----------------------------------------------------- */ .process-list { display: grid; gap: var(--space-6); } @media (min-width: 768px) { .process-list { grid-template-columns: repeat(4, 1fr); } } .process-step { display: grid; gap: var(--space-3); position: relative; } .process-step__num { font-family: var(--font-heading); font-size: clamp(48px, 7vw, 72px); font-weight: 300; font-style: italic; color: color-mix(in srgb, var(--color-primary) 25%, transparent); line-height: 1; margin-bottom: var(--space-2); } .process-step h3 { font-size: var(--fs-lg); font-weight: 600; color: var(--text-strong); margin: 0; } .process-step p { font-size: var(--fs-sm); color: var(--text-body); line-height: 1.65; } /* --- Galeria realizacji ---------------------------------------------------- */ .realizacje-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); grid-auto-flow: dense; } .realizacje-kafel { position: relative; overflow: hidden; border-radius: var(--radius-md); background: var(--color-surface); } .realizacje-kafel img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s var(--motion-ease, ease); } .realizacje-kafel:hover img { transform: scale(1.04); } .realizacje-kafel--hero { grid-column: span 2; grid-row: span 2; } @media (max-width: 599px) { .realizacje-kafel--hero { grid-column: auto; grid-row: auto; } } .realizacje-kafel__podpis { position: absolute; bottom: 0; left: 0; right: 0; padding: 12px 16px 14px; background: linear-gradient(transparent, rgba(5,4,4,.82)); color: var(--text-strong); font-size: var(--fs-sm); font-family: var(--font-body); line-height: 1.35; } /* --- Materiały / marki (tekstowe kafle ciemne) ------------------------------ */ .marki-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); text-align: center; } .marka-kafel { padding: var(--space-5) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); display: grid; gap: var(--space-2); background: var(--color-surface); transition: border-color .2s ease; } .marka-kafel:hover { border-color: var(--color-primary); } .marka-kafel__name { font-family: var(--font-heading); font-size: var(--fs-xl); font-weight: 400; color: var(--color-primary); letter-spacing: .04em; } .marka-kafel__desc { font-size: var(--fs-sm); color: var(--text-muted); line-height: 1.5; } /* --- CTA finalne ----------------------------------------------------------- */ .sec-cta-final { background: var(--color-surface); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); text-align: center; padding-block: var(--space-9); } .sec-cta-final h2 { color: var(--text-strong); font-size: clamp(26px, 4.5vw, 52px); font-style: italic; font-weight: 300; max-width: 600px; margin-inline: auto; } .sec-cta-final .cta-sub { color: var(--text-body); font-size: var(--fs-sm); margin-top: var(--space-2); max-width: 52ch; margin-inline: auto; } .btn-tel { display: inline-flex; align-items: center; gap: var(--space-2); background: var(--color-primary); color: var(--color-accentText); /* #111 na brass — WCAG AA */ font-family: var(--font-heading); font-size: clamp(18px, 2.8vw, 26px); font-weight: 400; font-style: italic; padding: 18px 36px; border-radius: var(--radius-md); transition: background .2s ease, transform .2s ease; min-height: 60px; font-weight: 700; } .btn-tel:hover { background: var(--color-primary600); transform: translateY(-2px); } .btn-sec { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--color-border); color: var(--text-strong); padding: 14px 28px; border-radius: var(--radius-md); font-size: var(--fs-sm); letter-spacing: .06em; text-transform: uppercase; transition: border-color .2s ease, background .2s ease; min-height: 48px; } .btn-sec:hover { border-color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, transparent); } /* --- Zaufanie / O nas ------------------------------------------------------- */ .about-grid { display: grid; gap: var(--space-6); } @media (min-width: 768px) { .about-grid { grid-template-columns: 1fr 1fr; } } .about-quote { font-family: var(--font-heading); font-size: clamp(18px, 2.5vw, 24px); font-style: italic; font-weight: 300; line-height: 1.45; color: var(--color-primary); margin-bottom: var(--space-5); } /* --- Stopka ----------------------------------------------------------------- */ .site-footer { background: var(--color-neutral900); color: color-mix(in srgb, var(--text-muted) 80%, transparent); padding-block: var(--space-8); border-top: 1px solid var(--color-border); } .site-footer a { color: var(--text-muted); transition: color .2s ease; } .site-footer a:hover { color: var(--color-primary); } .footer-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } .footer-brand-name { font-family: var(--font-heading); font-size: var(--fs-xl); font-weight: 300; font-style: italic; color: var(--text-strong); margin-bottom: var(--space-2); } .footer-nap { font-size: var(--fs-sm); line-height: 1.9; font-style: normal; } .footer-nap strong { color: var(--text-strong); font-weight: 600; } .footer-nap a { color: var(--color-primary) !important; } .footer-nav-title { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-primary); margin-bottom: var(--space-3); font-family: var(--font-body); } .footer-links { display: flex; flex-direction: column; gap: var(--space-2); font-size: var(--fs-sm); list-style: none; } .footer-bottom { border-top: 1px solid var(--color-border); margin-top: var(--space-7); padding-top: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: space-between; font-size: 11px; color: color-mix(in srgb, var(--text-muted) 45%, transparent); } /* --- Sticky mobile CTA (telefon) ------------------------------------------- */ .mobile-cta { background: var(--color-bg); border-top: 1px solid var(--color-border); } .mobile-cta .btn-primary { background: var(--color-primary) !important; color: var(--color-accentText) !important; font-weight: 700 !important; letter-spacing: .04em; } .mobile-cta .btn-primary:hover { background: var(--color-primary600) !important; } /* --- Formularz kontaktowy -------------------------------------------------- */ .form-contact { display: grid; gap: var(--space-5); } .field input, .field textarea, .field select { background: var(--color-surface); border-color: var(--color-border); color: var(--text-body); } .field label { color: var(--text-strong); } .rodo-info { font-size: 11px; color: var(--text-muted); line-height: 1.6; } /* --- Podstronicowe hero (prostsze) ----------------------------------------- */ .subpage-hero { padding-block: clamp(40px, 7vw, 80px); border-bottom: 1px solid var(--color-border); background: var(--color-surface); } .subpage-hero h1 { font-size: clamp(28px, 5vw, 56px); font-style: italic; font-weight: 300; color: var(--text-strong); } .breadcrumb { display: flex; gap: 6px; align-items: center; font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--space-4); flex-wrap: wrap; } .breadcrumb a { color: var(--text-muted); } .breadcrumb a:hover { color: var(--color-primary); } .breadcrumb__sep { color: var(--color-border); } /* --- FAQ akordeon ---------------------------------------------------------- */ .faq-list { display: grid; gap: 0; } .faq-item { border-bottom: 1px solid var(--color-border); } .faq-item:first-child { border-top: 1px solid var(--color-border); } .faq-q { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-5) 0; cursor: pointer; list-style: none; font-family: var(--font-heading); font-size: var(--fs-lg); font-weight: 400; color: var(--text-strong); } .faq-q::-webkit-details-marker { display: none; } .faq-q__icon { flex-shrink: 0; width: 24px; height: 24px; display: grid; place-items: center; color: var(--color-primary); transition: transform .3s ease; } details[open] .faq-q__icon { transform: rotate(45deg); } .faq-a { padding: 0 0 var(--space-5); color: var(--text-body); font-size: var(--fs-base); line-height: 1.7; max-width: 70ch; } /* --- Sekcja "Jak wyceniamy" ------------------------------------------------ */ .wycena-etapy { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); } .wycena-etap { display: grid; gap: var(--space-2); padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); } .wycena-etap__n { font-family: var(--font-heading); font-size: var(--fs-3xl); font-style: italic; font-weight: 300; color: color-mix(in srgb, var(--color-primary) 35%, transparent); line-height: 1; } .wycena-etap h3 { font-size: var(--fs-lg); font-weight: 600; color: var(--text-strong); margin: 0; } /* --- Mapa kontakt ---------------------------------------------------------- */ .map-frame { width: 100%; aspect-ratio: 16 / 7; border: 0; border-radius: var(--radius-lg); overflow: hidden; display: block; background: var(--color-surface); } /* --- Link opinie Google ---------------------------------------------------- */ .link-google { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--color-primary); letter-spacing: .05em; text-transform: uppercase; transition: color .2s ease; } .link-google:hover { color: var(--text-strong); } /* --- Skip link ------------------------------------------------------------- */ .skip-link { position: absolute; left: -999px; } .skip-link:focus { left: var(--space-3); top: var(--space-3); z-index: 100; background: var(--color-surface); color: var(--text-strong); padding: var(--space-3); border-radius: var(--radius-md); } /* --- fx-kenburns na hero zdjęciu (NIE na tekście) -------------------------- */ .hero-offset__image img { animation: hero-zoom-dark 20s ease-out forwards; } @keyframes hero-zoom-dark { from { transform: scale(1.0); } to { transform: scale(1.09); } } @media (prefers-reduced-motion: reduce) { .hero-offset__image img { animation: none; } }