/* ===================== FONTS - Kallisto Italic (lokalny) ===================== */ /* Pliki fontu: wgraj do katalogu /fonts/ (kallisto-italic.woff2 + opcjonalnie .woff/.otf) */ @font-face { font-family: 'Kallisto'; src: url('fonts/kallisto-italic.woff2') format('woff2'), url('fonts/kallisto-italic.woff') format('woff'), url('fonts/kallisto-italic.otf') format('opentype'); font-weight: 400; font-style: italic; font-display: swap; } /* ===================== CSS VARIABLES ===================== */ :root { /* Black palette */ --black-deep: #0a0a0a; --black-rich: #111111; --black-soft: #1a1a1a; --black-muted: #222222; --black-light: #2a2a2a; --black-lighter: #333333; /* Gold palette */ --gold-bright: #d4a437; --gold-main: #c9952e; --gold-dark: #a67c24; --gold-deep: #8a6620; --gold-pale: #e6c56e; --gold-glow: rgba(212, 164, 55, 0.15); --gold-glow-strong: rgba(212, 164, 55, 0.3); /* Text */ --text-primary: #f0ece4; --text-secondary: #a8a29e; --text-muted: #6b6560; /* Spacing */ --nav-height: 72px; --section-padding: 100px 0; --container-max: 1200px; --side-margin: clamp(24px, 5vw, 80px); } /* ===================== RESET & BASE ===================== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; /* iOS/Android - usuwa domyślny szary/niebieski "flash" przy tapie */ -webkit-tap-highlight-color: transparent; } /* touch-action: manipulation - usuwa 300ms opóźnienie tapu (browser nie czeka na double-tap-zoom) */ button, a, [role="button"], [data-modal], input, select, textarea { touch-action: manipulation; } html { scroll-behavior: smooth; scroll-padding-top: var(--nav-height); } body { font-family: 'Montserrat', 'Raleway', sans-serif; background-color: var(--black-deep); color: var(--text-primary); line-height: 1.7; overflow-x: hidden; } ::selection { background: var(--gold-main); color: var(--black-deep); } /* ===================== SCROLLBAR ===================== */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--black-rich); } ::-webkit-scrollbar-thumb { background: var(--gold-dark); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--gold-main); } /* ===================== SCROLL PROGRESS BIKE ===================== Rama roweru jako wskaznik postepu przewijania strony. HTML: inline SVG wewnatrz .bike-scroll (patrz index.html po ). Dwie warstwy wskazuja ten sam ksztaltu - spodnia stlumiona, wierzchnia jasnozlota. clip-path na warstwie wierzchniej odslania ja od lewej do prawej w miare przewijania (var --scroll-progress ustawiana w JS). */ .bike-scroll { position: fixed; left: clamp(10px, 1.4vw, 24px); top: 50%; transform: translateY(-50%); width: 200px; height: 120px; z-index: 900; /* pod navbar (1000) i pod modalami */ pointer-events: none; /* dekoracja - nie lapie klikniec */ opacity: 0.9; filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.6)); --scroll-progress: 0; /* wartosc startowa - przed pierwszym scroll */ } .bike-scroll-svg { width: 100%; height: 100%; overflow: visible; /* drop-shadow moze wychodzic poza viewBox */ } /* Warstwa spodnia - stlumione zloto na konturze, widoczne od poczatku. rgba na sztywno (opacity na var(--gold-dark) wymagalby color-mix). */ .bike-scroll-base { stroke: rgba(166, 124, 36, 0.32); fill: none; } /* Warstwa wierzchnia - jasnozlota, odslaniana od lewej do prawej. inset(0 0 0): to procent niepokrytej prawej krawedzi. Przy 0% scroll ucinamy 100% od prawej (nic nie widac), przy 100% - 0%. */ .bike-scroll-fill { stroke: var(--gold-bright); fill: none; filter: drop-shadow(0 0 3px var(--gold-glow-strong)); clip-path: inset(0 calc((1 - var(--scroll-progress)) * 100%) 0 0); -webkit-clip-path: inset(0 calc((1 - var(--scroll-progress)) * 100%) 0 0); transition: clip-path 0.12s linear, -webkit-clip-path 0.12s linear; } /* Mobile - mniejszy rowerek, blizej krawedzi, delikatnie bardziej przezroczysty zeby nie konkurowal wizualnie z tresciami. */ @media (max-width: 768px) { .bike-scroll { left: 8px; width: 116px; height: 70px; opacity: 0.82; } } @media (max-width: 380px) { /* Bardzo waskie ekrany - lekka redukcja zeby nie wchodzil w tresc */ .bike-scroll { width: 92px; height: 56px; opacity: 0.75; } } /* Bez plynnego przejscia gdy uzytkownik prosil o redukcje ruchu. Wypelnianie samo w sobie zostaje - to nie jest "ruch dekoracyjny", tylko informacja o postepie - ale skoki nastepuja natychmiast. */ @media (prefers-reduced-motion: reduce) { .bike-scroll-fill { transition: none; } } /* ===================== CONTAINER ===================== */ .container { max-width: var(--container-max); margin: 0 auto; padding-left: var(--side-margin); padding-right: var(--side-margin); } /* ===================== NAVBAR ===================== */ .navbar { position: fixed; top: 0; left: 0; right: 0; height: var(--nav-height); background: rgba(10, 10, 10, 0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--gold-main); /* złote odcięcie navbara */ z-index: 1000; transition: box-shadow 0.3s ease; } .navbar.scrolled { box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5); } .navbar .container { display: flex; align-items: center; justify-content: space-between; height: 100%; } /* Logo */ .logo { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; /* clip-path: inset(1px); */ } .logo-img { width: 44px; height: 44px; border-radius: 8px; object-fit: contain; transition: all 0.3s ease; } .logo:hover .logo-img { box-shadow: 0 0 20px var(--gold-glow); } .logo-text { font-family: 'Kallisto', 'Playfair Display', serif; font-style: italic; font-size: 1.3rem; font-weight: 700; color: var(--text-primary); letter-spacing: 1px; } .logo-text span { color: var(--gold-main); } /* Wrapper logo - tekst marki + adres jeden pod drugim */ .logo-text-wrap { display: flex; flex-direction: column; line-height: 1.1; } /* Adres pod nazwą marki - ten sam font (Kallisto Italic), mniejszy rozmiar */ .logo-address { font-family: 'Kallisto', 'Playfair Display', serif; font-style: italic; font-size: 0.6rem; font-weight: 400; color: var(--text-muted); letter-spacing: 0.5px; margin-top: 2px; } /* Nav links */ .nav-links { display: flex; align-items: center; gap: 8px; list-style: none; } .nav-links a { text-decoration: none; color: var(--text-secondary); font-size: 0.88rem; font-weight: 500; letter-spacing: 0.8px; text-transform: uppercase; padding: 8px 16px; border-radius: 6px; position: relative; transition: all 0.3s ease; } .nav-links a::after { content: ''; position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); width: 0; height: 2px; background: var(--gold-main); border-radius: 1px; transition: width 0.3s ease; } /* Hover tylko na urządzeniach z prawdziwym kursorem - zapobiega "lepkiemu" hoverowi po tapnięciu */ @media (hover: hover) { .nav-links a:hover { color: var(--gold-pale); } .nav-links a:hover::after { width: 60%; } } /* Brak persystencji focusu po kliknięciu - active sterujemy tylko klasą .active */ .nav-links a:focus { outline: none; } .nav-links a:focus-visible { outline: 2px solid var(--gold-glow-strong); outline-offset: 2px; } .nav-links a.active { color: var(--gold-main); } .nav-links a.active::after { width: 60%; } /* Kontakt w desktopowym navbarze - dwie linie (Kontakt + numer) */ .nav-links a.nav-kontakt-desktop { display: flex; flex-direction: column; align-items: center; line-height: 1.15; padding: 4px 16px; } .nav-links a.nav-kontakt-desktop .nav-kontakt-phone { /* numer telefonu pod etykietą Kontakt */ font-size: 0.7rem; font-weight: 500; letter-spacing: 0.5px; text-transform: none; color: var(--gold-pale); margin-top: 2px; } /* ===================== HERO SECTION ===================== */ .hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; position: relative; background: var(--black-deep); overflow: hidden; padding-top: var(--nav-height); padding-bottom: 120px; /* rezerwuje miejsce na scroll-indicator - CTA "Umów wizytę" go nie zasłania */ } .hero::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(ellipse at 30% 50%, var(--gold-glow) 0%, transparent 50%), radial-gradient(ellipse at 70% 60%, rgba(212, 164, 55, 0.06) 0%, transparent 40%); animation: heroGlow 12s ease-in-out infinite alternate; } @keyframes heroGlow { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-3%, 2%) scale(1.05); } } .hero-content { position: relative; z-index: 2; } .hero-badge { /* Zewnętrzna ramka - tylko styling (border, padding, font). Maskowanie w .hero-badge-window. */ display: inline-block; padding: 7px 22px; border: 1px solid rgba(166, 124, 36, 0.35); /* gold-dark @ 35% */ border-radius: 30px; font-size: clamp(0.6rem, 1.6vw, 0.78rem); font-weight: 500; letter-spacing: clamp(0.5px, 0.3vw, 1.8px); text-transform: uppercase; color: var(--text-muted); margin-bottom: 28px; margin-top: 24px; background: transparent; opacity: 0.7; text-align: center; /* Bezpiecznik - nigdy nie wyjdzie poza viewport */ max-width: calc(100vw - 32px); } /* Okno maski - dokładnie 1 linia wysokości, ukrywa pozostałe LI poza widokiem */ .hero-badge-window { height: 1.4em; line-height: 1.4em; overflow: hidden; } /* Lista pionowa - 4 napisy (3 + dup pierwszego) animowane translateY */ .hero-badge-track { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; /* Cykl 9s, offset 0.5s. Pierwszy napis widoczny 2s przed ruchem (0.5s delay + 1.5s pauza w keyframe). */ animation: heroBadgeScroll 13s ease-in-out 0.5s infinite; } .hero-badge-track li { height: 1.4em; line-height: 1.4em; white-space: nowrap; text-align: center; } /* 9s cykl, 4 pozycje (3 napisy + dup pierwszego dla seamless loop). Pauzy: text 1 = 1.5s (+ 0.5s delay = 2s przed ruchem), text 2 = 2s, text 3 = 2s, dup = 0.5s. Transitions: 1s każde. Razem: 1.5+1+2+1+2+1+0.5 = 9s. Wartości translateY zsynchronizowane z height li (1.4em). */ @keyframes heroBadgeScroll { /* 1. Profesjonalny serwis rowerowy i amortyzacji - pauza 1.5s (0-16.67%) */ 0%, 16.67% { transform: translateY(0); } /* transition 1→2 (16.67-27.78% = 1s) */ /* 2. Fox | RockShox | Öhlins - pauza 2s (27.78-50%) */ 27.78%, 50% { transform: translateY(-1.4em); } /* transition 2→3 (50-61.11% = 1s) */ /* 3. DVO | Cane Creek | Marzocchi - pauza 2s (61.11-83.33%) */ 61.11%, 83.33% { transform: translateY(-2.8em); } /* transition 3→dup (83.33-94.44% = 1s) */ /* Duplikat - pauza 0.5s, łączy się z 1.5s pauzą text 1 = 2s na loopie */ 94.44%, 100% { transform: translateY(-4.2em); } } /* Respektuj preferencje użytkownika - wyłącz animację dla osób z reduced-motion */ @media (prefers-reduced-motion: reduce) { .hero-badge-track { animation: none; } } .hero h1 { font-family: 'Kallisto', 'Playfair Display', serif; font-style: italic; font-size: clamp(2.8rem, 6vw, 5.5rem); font-weight: 900; line-height: 1.1; margin-bottom: 24px; color: var(--text-primary); } .hero h1 .gold { color: var(--gold-main); display: block; } .hero p { font-size: 1.15rem; color: var(--text-secondary); max-width: 520px; margin: 0 auto 48px; font-weight: 300; } .hero-cta { display: inline-flex; align-items: center; gap: 10px; padding: 16px 40px; background: linear-gradient(135deg, var(--gold-main), var(--gold-dark)); color: var(--black-deep); text-decoration: none; font-weight: 700; font-size: 0.9rem; letter-spacing: 1.5px; text-transform: uppercase; border-radius: 6px; border: none; cursor: pointer; transition: all 0.35s ease; box-shadow: 0 4px 20px rgba(212, 164, 55, 0.25); } .hero-cta:hover { transform: translateY(-3px); box-shadow: 0 8px 35px rgba(212, 164, 55, 0.4); background: linear-gradient(135deg, var(--gold-bright), var(--gold-main)); } .hero-cta:active { transform: translateY(-1px); } /* Scroll indicator */ .scroll-indicator { position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--text-muted); font-size: 0.7rem; letter-spacing: 2px; text-transform: uppercase; } .scroll-indicator .line { width: 1px; height: 40px; background: linear-gradient(to bottom, var(--gold-main), transparent); animation: scrollPulse 2s ease-in-out infinite; } @keyframes scrollPulse { 0%, 100% { opacity: 0.3; height: 40px; } 50% { opacity: 1; height: 55px; } } /* ===================== SECTIONS — GENERAL ===================== */ section { padding: var(--section-padding); position: relative; } .section-header { text-align: center; margin-bottom: 64px; } .section-header .label { font-size: 0.75rem; font-weight: 600; letter-spacing: 3px; text-transform: uppercase; color: var(--gold-main); margin-bottom: 16px; display: block; } .section-header h2 { font-family: 'Kallisto', 'Playfair Display', serif; font-style: italic; font-size: clamp(2rem, 4vw, 3rem); font-weight: 700; color: var(--text-primary); margin-bottom: 16px; } .section-header p { color: var(--text-secondary); max-width: 560px; margin: 0 auto; font-weight: 300; } .section-divider { width: 60px; height: 3px; background: linear-gradient(to right, var(--gold-dark), var(--gold-main), var(--gold-dark)); margin: 20px auto 0; border-radius: 2px; } /* ===================== HOME — CONTENT BLOCKS ===================== */ #home { background: var(--black-deep); } .content-block { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; margin-bottom: 100px; opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1); } .content-block.visible { opacity: 1; transform: translateY(0); } .content-block:nth-child(even) { direction: rtl; } .content-block:nth-child(even) > * { direction: ltr; } .content-block:last-child { margin-bottom: 0; } .content-image { width: 100%; aspect-ratio: 4/3; background: var(--black-soft); border: 1px solid var(--black-lighter); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 0.85rem; letter-spacing: 1px; position: relative; overflow: hidden; } .content-image::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--gold-glow) 0%, transparent 60%); opacity: 0; transition: opacity 0.5s ease; } .content-block:hover .content-image::before { opacity: 1; } .content-image .placeholder-icon { font-size: 2.5rem; color: var(--black-lighter); } .content-text h3 { font-family: 'Kallisto', 'Playfair Display', serif; font-style: italic; font-size: 1.6rem; margin-bottom: 16px; color: var(--text-primary); } .content-text h3 span { color: var(--gold-main); } .content-text p { color: var(--text-secondary); font-weight: 300; margin-bottom: 20px; } /* ===================== CAROUSEL ===================== */ .carousel { width: 100%; aspect-ratio: 4/3; border-radius: 12px; overflow: hidden; position: relative; background: var(--black-soft); border: 1px solid var(--black-lighter); } .carousel-track { position: relative; height: 100%; } .carousel-slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-muted); opacity: 0; transition: opacity 0.7s ease; pointer-events: none; } .carousel-slide.active { opacity: 1; pointer-events: auto; } .carousel-slide img { width: 100%; height: 100%; object-fit: cover; display: block; } .carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(10, 10, 10, 0.6); border: 1px solid rgba(212, 164, 55, 0.25); color: var(--gold-main); width: 38px; height: 38px; border-radius: 50%; font-size: 1.4rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; backdrop-filter: blur(8px); opacity: 0; } .carousel:hover .carousel-btn { opacity: 1; } .carousel-btn:hover { background: var(--gold-glow-strong); border-color: var(--gold-main); box-shadow: 0 0 16px var(--gold-glow); } .carousel-prev { left: 10px; } .carousel-next { right: 10px; } .carousel-dots { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; } .carousel-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(212, 164, 55, 0.35); cursor: pointer; transition: all 0.3s ease; } .carousel-dot.active { background: var(--gold-main); transform: scale(1.3); } /* ===================== CENNIK ===================== */ #cennik { background: var(--black-rich); } .cennik-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; } .cennik-card { background: var(--black-soft); border: 1px solid var(--black-lighter); border-radius: 16px; overflow: hidden; cursor: pointer; text-align: left; transition: all 0.4s ease; padding: 0; font-family: inherit; color: inherit; display: flex; flex-direction: column; } .cennik-card:hover { border-color: var(--gold-dark); transform: translateY(-6px); box-shadow: 0 16px 48px rgba(0,0,0,0.4), 0 0 24px var(--gold-glow); } .cennik-card-img { width: 100%; aspect-ratio: 16/9; overflow: hidden; background: var(--black-muted); display: flex; align-items: center; justify-content: center; color: var(--text-muted); } .cennik-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } .cennik-card:hover .cennik-card-img img { transform: scale(1.04); } .cennik-card-img .placeholder-icon { font-size: 4rem; } .cennik-card-body { padding: 32px; display: flex; flex-direction: column; gap: 12px; flex: 1; } .cennik-card-body h3 { font-family: 'Kallisto', 'Playfair Display', serif; font-style: italic; font-size: 1.5rem; color: var(--text-primary); } .cennik-card-body h3 span { color: var(--gold-main); } .cennik-card-body p { color: var(--text-secondary); font-weight: 300; font-size: 0.95rem; flex: 1; } .cennik-card-body .btn-outline { align-self: flex-start; margin-top: 8px; } /* ===================== MODALS ===================== */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.75); backdrop-filter: blur(6px); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .modal-overlay.open { opacity: 1; pointer-events: auto; } .modal { background: var(--black-soft); border: 1px solid var(--black-lighter); border-radius: 16px; padding: 56px 64px; width: 96%; max-width: 1400px; max-height: 92vh; overflow-y: auto; position: relative; transform: translateY(24px); transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .modal-overlay.open .modal { transform: translateY(0); } .modal-close { position: absolute; top: 18px; right: 18px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--black-light); border: 1px solid var(--black-lighter); color: var(--text-primary); font-size: 1.5rem; cursor: pointer; border-radius: 50%; transition: all 0.2s ease; line-height: 1; z-index: 2; } .modal-close:hover { color: var(--gold-main); background: var(--black-lighter); transform: rotate(90deg); } .modal h3 { font-family: 'Kallisto', 'Playfair Display', serif; font-style: italic; font-size: 1.5rem; color: var(--text-primary); margin-bottom: 8px; } .modal-note { color: var(--text-muted); font-size: 0.85rem; font-weight: 300; margin-bottom: 28px; } /* ===================== TIERS GRID (cennik roweru) ===================== */ /* Siatka pakietów - 4 kafle obok siebie aby uniknąć długiego scrolla */ .tiers-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } /* Pojedynczy kafel pakietu */ .tier-card { background: var(--black-rich); border: 1px solid var(--black-light); border-radius: 12px; padding: 18px 16px; display: flex; flex-direction: column; transition: transform 0.2s ease, border-color 0.2s ease; } .tier-card:hover { transform: translateY(-3px); border-color: var(--gold-main); } /* Akcent kolorystyczny dla rangi pakietu */ .tier-silver { border-top: 3px solid #b8b8b8; } .tier-gold { border-top: 3px solid var(--gold-main); } .tier-platinum { border-top: 3px solid #e6c56e; } /* Nagłówek kafla - badge + tytuł + cena */ .tier-head { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--black-light); } .tier-badge { display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; background: var(--black-light); color: var(--text-secondary); margin-bottom: 8px; } .tier-silver .tier-badge { color: #d8d8d8; } .tier-gold .tier-badge { color: var(--gold-main); background: rgba(201, 149, 46, 0.12); } /* Platinum badge - jasny srebrny ton z subtelnym tłem */ .tier-platinum .tier-badge { color: #e8edf2; background: rgba(216, 221, 226, 0.12); } .tier-head h4 { font-family: 'Kallisto', 'Playfair Display', serif; font-style: italic; font-size: 1.2rem; color: var(--text-primary); margin: 4px 0 8px; line-height: 1.25; } .tier-head h4 small { display: block; font-size: 0.7rem; color: var(--text-muted); font-weight: 400; margin-top: 2px; } .tier-price { font-size: 1.15rem; font-weight: 700; color: var(--gold-main); letter-spacing: 0.5px; /* iOS Safari - blokada menu kontekstowego (cena nie ma się zachowywać jak link telefonu) */ -webkit-touch-callout: none; } /* Lista zakresu - kompaktowa, mała czcionka, checkmark */ .tier-features { list-style: none; padding: 0; margin: 0; flex: 1; } .tier-features li { position: relative; padding: 4px 0 4px 18px; font-size: 0.78rem; line-height: 1.45; color: var(--text-secondary); } .tier-features li::before { content: '+'; position: absolute; left: 0; top: 3px; color: var(--gold-main); font-size: 0.95rem; font-weight: 700; line-height: 1; } /* Notka dolna w kaflu (np. "cena zawiera linki") */ .tier-note { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--black-light); font-size: 0.72rem; color: var(--text-muted); font-style: italic; line-height: 1.4; } /* Tablet - 2 kolumny */ @media (max-width: 1100px) { .tiers-grid { grid-template-columns: repeat(2, 1fr); } } /* Mobile - 1 kolumna */ @media (max-width: 600px) { .tiers-grid { grid-template-columns: 1fr; gap: 12px; } .tier-card { padding: 16px 14px; } } .td-group { font-weight: 600; color: var(--gold-main); vertical-align: middle; border-right: 1px solid var(--black-light); } .pricing-table { width: 100%; border-collapse: collapse; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3); } .pricing-table thead { background: linear-gradient(135deg, var(--gold-dark), var(--gold-main)); } .pricing-table th { padding: 18px 28px; text-align: left; font-size: 0.8rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--black-deep); } .pricing-table td { padding: 18px 28px; border-bottom: 1px solid var(--black-light); font-size: 0.95rem; transition: all 0.3s ease; } .pricing-table tbody tr { background: var(--black-soft); transition: all 0.3s ease; } .pricing-table tbody tr:hover { background: var(--black-muted); transform: scale(1.005); } .pricing-table tbody tr:hover td:last-child { color: var(--gold-pale); } .pricing-table td:last-child { font-weight: 700; color: var(--gold-pale); /* jaśniejszy złoty - lepsza czytelność cen na ciemnym tle */ text-align: right; white-space: nowrap; } .pricing-table td:first-child { font-weight: 500; } /* ===== Usługi pojedyncze - kompaktowa tabela pod siatką pakietów ===== */ /* Nagłówek sekcji "Usługi pojedyncze" w obrębie modala */ .modal-subhead { font-family: 'Kallisto', 'Playfair Display', serif; font-style: italic; font-size: 1.15rem; color: var(--text-primary); margin: 32px 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--gold-dark); } /* Wariant kompaktowy pricing-table (mniejsze paddingi/font) */ .services-table th, .services-table td { padding: 10px 14px; font-size: 0.85rem; } .services-table th { letter-spacing: 1px; } /* Siatka dwóch kafli z tabelami - desktop dwie kolumny, mobile jedna */ .services-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; } @media (max-width: 900px) { .services-grid { grid-template-columns: 1fr; } } /* Wiersz kategorii - złota etykieta wyśrodkowana na całą szerokość kafla */ .services-table .services-cat td { background: var(--black-deep); color: var(--gold-main); font-family: 'Kallisto', 'Playfair Display', serif; font-style: italic; font-size: 0.95rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; padding: 14px 14px 6px; border-bottom: 1px solid var(--gold-dark); text-align: center; } /* Druga kolumna (Opis) - dyskretna, mniejsza - TYLKO w cenniku roweru (services-grid), nie w tabelach amortyzacji, gdzie kol. 2 to dane (Tłumik / Cena) */ .services-grid .services-table td:nth-child(2) { color: var(--text-muted); font-size: 0.78rem; font-weight: 300; font-style: italic; } /* Zebra stripes - delikatne tło co drugi wiersz danych (pomija nagłówki kategorii) */ .services-table tbody tr:nth-child(even):not(.services-cat) td { background: rgba(255, 255, 255, 0.025); } /* Hover ma pierwszeństwo nad zebrą - musi być poniżej w źródle */ .services-table tbody tr:not(.services-cat):hover td { background: var(--black-muted); } /* ===================== AMORTYZACJA - siatka dwóch kolumn marek ===================== */ /* Lewa kolumna - Fox, prawa - RockShox; każda zawiera 3 kafle (przednie/tylne/sztyce) */ .amor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; } .amor-column { display: flex; flex-direction: column; gap: 20px; } /* Pojedynczy kafel marki+kategorii (np. Fox - Amortyzatory) */ .amor-card { background: var(--black-rich); border: 1px solid var(--black-light); border-radius: 12px; padding: 16px; } .amor-card-head { margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--gold-dark); } .amor-brand { display: inline-block; font-size: 0.7rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--gold-main); background: var(--gold-glow); padding: 3px 8px; border-radius: 4px; margin-bottom: 6px; } .amor-card-head h4 { font-family: 'Kallisto', 'Playfair Display', serif; font-style: italic; font-size: 1rem; color: var(--text-primary); margin: 0; } /* Wariant "flat" - kafle bezpośrednio w gridzie (bez kolumn marek), 2 w rzędzie */ .amor-grid-flat { margin-top: 20px; } /* Mobile - 1 kolumna (Fox, potem RockShox - jeden pod drugim) */ @media (max-width: 900px) { .amor-grid { grid-template-columns: 1fr; } } /* Mobile - jeszcze mniej oddechu, kolumna opisu pod usługą gdyby było ciasno */ @media (max-width: 600px) { .services-table th, .services-table td { padding: 8px 10px; font-size: 0.8rem; } .services-table td:nth-child(2) { font-size: 0.72rem; } } /* ===================== INSTAGRAM FEED ===================== */ .instagram-feed-section { background: var(--black-rich); } /* Ramka wokół widżetu Elfsight - subtelny złoty akcent + cień */ .instagram-feed-frame { position: relative; padding: 28px; background: var(--black-soft); border: 1px solid var(--black-light); border-radius: 16px; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45); /* Złoty cienki akcent u góry ramki */ border-top: 2px solid var(--gold-dark); overflow: hidden; } /* Subtelna złota poświata w prawym górnym rogu - lekki element kolorystyczny */ .instagram-feed-frame::before { content: ''; position: absolute; top: -120px; right: -120px; width: 280px; height: 280px; background: radial-gradient(circle, var(--gold-glow) 0%, transparent 65%); pointer-events: none; z-index: 0; } .instagram-feed-frame > * { position: relative; z-index: 1; } /* Mobile - mniejszy padding ramki */ @media (max-width: 600px) { .instagram-feed-frame { padding: 16px; border-radius: 12px; } } /* ===================== O MNIE ===================== */ #o-mnie { background: var(--black-deep); } .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; } .about-text p { color: var(--text-secondary); font-weight: 300; margin-bottom: 20px; } /* Śródtytuły w sekcji "O mnie" - dzielą długi tekst na sekcje tematyczne */ .about-text h3 { font-family: 'Kallisto', 'Playfair Display', serif; font-style: italic; font-size: 1.35rem; font-weight: 700; color: var(--gold-main); margin-top: 32px; margin-bottom: 14px; line-height: 1.3; } /* Pierwszy nagłówek bez górnego marginesu - przykleja się do top sekcji */ .about-text h3:first-child { margin-top: 0; } /* Lista usług w "O mnie" - kompaktowa z złotym myślnikiem */ .about-services { list-style: none; padding: 0; margin: 0 0 24px; } .about-services li { position: relative; padding: 6px 0 6px 22px; color: var(--text-secondary); font-weight: 300; line-height: 1.6; } .about-services li::before { content: '+'; position: absolute; left: 0; top: 6px; color: var(--gold-main); font-weight: 700; font-size: 1rem; } .cert-card, .collab-card { background: var(--black-soft); border: 1px solid var(--black-lighter); border-radius: 12px; padding: 28px; margin-bottom: 20px; transition: all 0.3s ease; } .cert-card:hover, .collab-card:hover { border-color: var(--gold-dark); box-shadow: 0 0 20px var(--gold-glow); } .cert-card h4, .collab-card h4 { font-family: 'Kallisto', 'Playfair Display', serif; font-style: italic; color: var(--gold-main); margin-bottom: 8px; font-size: 1.1rem; } .cert-card p, .collab-card p { color: var(--text-muted); font-size: 0.9rem; font-weight: 300; } .cert-card-img, .collab-card-img { width: 100%; aspect-ratio: 4/3; overflow: hidden; border-radius: 12px; border: 1px solid var(--black-lighter); margin-bottom: 20px; } .cert-card-img img, .collab-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; } .cert-card-img:hover img, .collab-card-img:hover img { transform: scale(1.04); } /* ===================== FAQ ===================== */ #faq { background: var(--black-rich); } .faq-list { max-width: 780px; margin: 0 auto; } .faq-item { border-bottom: 1px solid var(--black-light); overflow: hidden; } .faq-question { width: 100%; background: none; border: none; padding: 24px 0; display: flex; align-items: center; justify-content: space-between; cursor: pointer; color: var(--text-primary); font-family: 'Montserrat', 'Raleway', sans-serif; font-size: 1.05rem; font-weight: 500; text-align: left; transition: color 0.3s ease; } .faq-question:hover { color: var(--gold-pale); } .faq-question .icon { font-size: 1.4rem; color: var(--gold-main); transition: transform 0.35s ease; flex-shrink: 0; margin-left: 16px; } .faq-item.open .faq-question .icon { transform: rotate(45deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.4s ease; } .faq-item.open .faq-answer { max-height: 300px; padding-bottom: 24px; } .faq-answer p { color: var(--text-secondary); font-weight: 300; line-height: 1.8; } /* ===================== KONTAKT ===================== */ #kontakt { background: var(--black-deep); } .contact-grid { display: grid; grid-template-columns: repeat(4, 1fr); /* 4 kafle: telefon, email, adres, social */ gap: 32px; text-align: center; } /* Tablet - 4 kafle za ciasne, układaj 2x2 */ @media (max-width: 1000px) { .contact-grid { grid-template-columns: repeat(2, 1fr); } } .contact-card { background: var(--black-soft); border: 1px solid var(--black-lighter); border-radius: 12px; padding: 40px 28px; transition: all 0.4s ease; } .contact-card:hover { border-color: var(--gold-dark); transform: translateY(-6px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 20px var(--gold-glow); } .contact-card .icon-circle { width: 60px; height: 60px; border-radius: 50%; background: var(--gold-glow); border: 1px solid var(--gold-dark); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; font-size: 1.4rem; transition: all 0.3s ease; } .contact-card:hover .icon-circle { background: var(--gold-glow-strong); box-shadow: 0 0 20px var(--gold-glow); } .contact-card h4 { font-family: 'Kallisto', 'Playfair Display', serif; font-style: italic; font-size: 1.1rem; margin-bottom: 8px; color: var(--text-primary); } .contact-card p, .contact-card a { color: var(--text-secondary); font-size: 0.95rem; font-weight: 300; } .contact-card a { text-decoration: none; transition: color 0.3s ease; } .contact-card a:hover { color: var(--gold-pale); } /* Utility - tekst widoczny dla czytników ekranu i crawlerów, ukryty wizualnie */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .social-links { display: flex; justify-content: center; gap: 16px; margin-top: 16px; } .social-link { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1px solid var(--black-lighter); border-radius: 50%; color: var(--text-secondary); text-decoration: none; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.5px; transition: all 0.35s ease; } .social-link:hover { border-color: var(--gold-main); color: var(--gold-main); background: var(--gold-glow); transform: translateY(-3px); box-shadow: 0 6px 20px var(--gold-glow); } /* ===================== FOOTER ===================== */ .footer { background: var(--black-rich); border-top: 1px solid var(--black-light); padding: 48px 0 32px; } /* Górna sekcja stopki - lewa kolumna z marką/adresem, prawa z linkami */ .footer-top { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 32px; padding-bottom: 24px; margin-bottom: 20px; border-bottom: 1px solid var(--black-light); } /* Blok marka + adres */ .footer-info { display: flex; flex-direction: column; gap: 12px; } .footer-brand { font-family: 'Kallisto', 'Playfair Display', serif; font-style: italic; font-size: 1.1rem; color: var(--text-primary); } .footer-brand span { color: var(--gold-main); } /* Adres firmy - NAP w stopce (semantyczny

) */ .footer-address { font-style: normal; /* override domyślnej kursywy

*/ color: var(--text-muted); font-size: 0.85rem; line-height: 1.7; } .footer-address strong { color: var(--text-secondary); font-weight: 600; } .footer-address a { color: var(--text-muted); text-decoration: none; transition: color 0.2s ease; } .footer-address a:hover { color: var(--gold-main); } .footer-copy { color: var(--text-muted); font-size: 0.8rem; font-weight: 300; text-align: center; } /* Dyskretna kropka prowadząca do panelu CMS - prawie niewidoczna */ .admin-link { color: var(--text-muted); text-decoration: none; opacity: 0.25; margin-left: 6px; transition: opacity 0.2s ease; } .admin-link:hover { opacity: 1; color: var(--gold-main); } .footer-links { display: flex; gap: 24px; list-style: none; } .footer-links a { color: var(--text-muted); text-decoration: none; font-size: 0.8rem; transition: color 0.3s ease; } .footer-links a:hover { color: var(--gold-main); } /* ===================== BUTTONS GENERAL ===================== */ .btn-outline { display: inline-block; padding: 12px 28px; border: 1px solid var(--gold-main); color: var(--gold-main); text-decoration: none; font-size: 0.85rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; border-radius: 6px; transition: all 0.35s ease; cursor: pointer; background: transparent; } .btn-outline:hover { background: var(--gold-main); color: var(--black-deep); box-shadow: 0 4px 20px rgba(212, 164, 55, 0.3); transform: translateY(-2px); } .btn-outline:active { transform: translateY(0); } /* ===================== HAMBURGER ===================== */ .nav-mobile-right { display: none; align-items: center; gap: 12px; } .nav-kontakt-mobile { /* przycisk kontakt w pasku mobilnym */ display: flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--gold-main); font-size: 0.82rem; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; padding: 6px 14px; border: 1px solid var(--gold-dark); border-radius: 6px; transition: all 0.3s ease; white-space: nowrap; line-height: 1.15; } .nav-kontakt-label { /* etykieta KONTAKT */ font-size: 0.82rem; letter-spacing: 1px; } .nav-kontakt-phone { /* numer telefonu pod etykietą */ font-size: 0.65rem; font-weight: 500; letter-spacing: 0.5px; text-transform: none; color: var(--gold-pale); margin-top: 2px; } .nav-kontakt-mobile:hover { background: var(--gold-glow); border-color: var(--gold-main); } .hamburger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; background: none; border: none; cursor: pointer; padding: 6px; border-radius: 6px; transition: background 0.3s ease; } .hamburger:hover { background: var(--gold-glow); } .hamburger span { display: block; width: 100%; height: 2px; background: var(--text-primary); border-radius: 2px; transition: transform 0.35s ease, opacity 0.35s ease; transform-origin: center; } .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile dropdown menu - bez własnego border-top żeby nie konkurować z złotą linią navbara */ .mobile-menu { display: none; max-height: 0; overflow: hidden; background: rgba(10, 10, 10, 0.97); transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .mobile-menu.open { max-height: 320px; } .mobile-menu ul { list-style: none; padding: 12px 0 20px; } .mobile-menu ul li a { display: block; padding: 14px var(--side-margin); color: var(--text-secondary); text-decoration: none; font-size: 0.9rem; font-weight: 500; letter-spacing: 0.8px; text-transform: uppercase; transition: color 0.3s ease, background 0.3s ease; border-left: 3px solid transparent; } .mobile-menu ul li a:hover, .mobile-menu ul li a.active { color: var(--gold-main); background: var(--gold-glow); border-left-color: var(--gold-main); } /* ===================== RESPONSIVE ===================== */ @media (max-width: 768px) { .nav-links { display: none; } .nav-mobile-right { display: flex; } .mobile-menu { display: block; } .cennik-grid { grid-template-columns: 1fr; } .modal { padding: 48px 16px 24px; width: 100%; max-height: 95vh; border-radius: 12px; } .modal-close { top: 10px; right: 10px; width: 44px; height: 44px; font-size: 1.35rem; } .modal h3 { font-size: 1.25rem; padding-right: 48px; } .content-block { grid-template-columns: 1fr; gap: 32px; } .content-block:nth-child(even) { direction: ltr; } .about-grid { grid-template-columns: 1fr; } .contact-grid { grid-template-columns: 1fr; } /* Stopka mobile - marka/adres i linki jeden pod drugim, wszystko wyśrodkowane */ .footer-top { flex-direction: column; align-items: center; text-align: center; } .footer-info { align-items: center; } /* Hero - rezerwujemy miejsce na scroll-indicator, żeby treść go nie zasłaniała */ .hero { padding-bottom: 90px; } /* Scroll indicator - mniejszy i bliżej dołu na mobile */ .scroll-indicator { bottom: 18px; gap: 6px; font-size: 0.6rem; letter-spacing: 1.5px; } .scroll-indicator .line { height: 28px; } @keyframes scrollPulse { 0%, 100% { opacity: 0.3; height: 28px; } 50% { opacity: 1; height: 38px; } } }