/* ========================================================================== RED ROUTE USA IMPORT — components.css Nav, footer, buttons, cards, badges, forms, tables, media frames, lightbox ========================================================================== */ /* -------------------------------------------------------------------------- Top bar + navigation -------------------------------------------------------------------------- */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding: 8px var(--gutter); font-size: 0.79rem; letter-spacing: 0.05em; color: var(--muted); background: linear-gradient(90deg, var(--red-deep), #4a0a12 46%, #12151b 100%); border-bottom: 1px solid var(--line); } .topbar strong { color: #fff; } .topbar__list { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; min-width: 0; } /* Etykieta dzialu przed numerem telefonu w pasku gornym */ .topbar__tag { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.62); padding: 2px 7px; border-radius: 5px; background: rgba(255, 255, 255, 0.09); } /* Na telefonie pasek zostawia tylko to, co naprawde potrzebne: status licytacji + kurs po lewej, jeden telefon po prawej. */ @media (max-width: 860px) { .topbar { gap: 6px 14px; font-size: 0.74rem; padding-block: 7px; } .topbar__list { gap: 4px 14px; } .topbar__list li[data-topbar-optional] { display: none; } /* z dwoch linii zostaje ta wlasciwa dla tematu podstrony (o dziale decyduje data-rr-tel na ) */ body[data-rr-tel="import"] .topbar__list li[data-tel-line="warsztat"], body[data-rr-tel="warsztat"] .topbar__list li[data-tel-line="import"] { display: none; } } @media (max-width: 560px) { .topbar { justify-content: center; text-align: center; } } .topbar__list li { display: inline-flex; align-items: center; gap: 7px; } .topbar a:hover { color: #fff; } .live-dot { width: 7px; height: 7px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 3px rgba(61, 220, 132, 0.2); animation: rr-pulse 2.4s ease-in-out infinite; flex: none; } .nav { position: sticky; top: 0; z-index: 90; background: rgba(6, 7, 10, 0.72); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); border-bottom: 1px solid var(--line); transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease); } .nav.is-stuck { background: rgba(6, 7, 10, 0.94); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6); } .nav__inner { height: var(--nav-h); display: flex; align-items: center; gap: clamp(10px, 1.4vw, 20px); max-width: var(--shell-wide); margin-inline: auto; padding-inline: var(--gutter); min-width: 0; } /* -------------------------------------------------------------------------- Logo — sylwetka muscle cara nad napisem RED ROUTE / USA IMPORT -------------------------------------------------------------------------- */ .brand { display: inline-flex; align-items: center; flex: none; } .brand__lockup { display: grid; gap: 1px; justify-items: stretch; } /* Wlasciwe logo firmy (PNG z przezroczystym tlem) */ .brand__logo { width: clamp(124px, 13vw, 170px); height: auto; display: block; filter: drop-shadow(0 2px 12px rgba(224, 27, 45, 0.42)); transition: filter 0.34s var(--ease), transform 0.34s var(--ease); } .brand:hover .brand__logo { filter: drop-shadow(0 3px 20px rgba(224, 27, 45, 0.85)); transform: translateX(3px); } .brand__name { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: clamp(1.18rem, 1.5vw, 1.44rem); line-height: 0.86; letter-spacing: 0.012em; color: #fff; text-transform: uppercase; white-space: nowrap; } .brand__sub { justify-self: end; font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: clamp(0.56rem, 0.62vw, 0.64rem); line-height: 1.1; letter-spacing: 0.3em; text-transform: uppercase; color: #fff; opacity: 0.94; margin-right: -0.3em; white-space: nowrap; } /* wariant w stopce — nieco wieksze */ .brand--lg .brand__logo { width: clamp(168px, 17vw, 228px); } /* Links */ .nav__links { display: flex; align-items: center; gap: 2px; margin-inline: auto; min-width: 0; } .nav__link { position: relative; display: block; padding: 11px clamp(9px, 1vw, 15px); border-radius: 10px; font-size: clamp(0.84rem, 0.62vw + 0.55rem, 0.9rem); font-weight: 500; color: var(--text); white-space: nowrap; } .nav__link::after { content: ""; position: absolute; left: clamp(9px, 1vw, 15px); right: clamp(9px, 1vw, 15px); bottom: 5px; height: 2px; border-radius: 2px; background: var(--red); transform: scaleX(0); transform-origin: left; transition: transform 0.28s var(--ease); } /* Znak graficzny (sama sylwetka) przy pozycji „Start" w menu */ .nav__link--start { display: inline-flex; align-items: center; gap: 9px; } .nav__mark { width: 38px; height: auto; flex: none; opacity: 0.72; transition: opacity 0.24s var(--ease), transform 0.24s var(--ease); } .nav__link--start:hover .nav__mark, .nav__link--start.is-active .nav__mark { opacity: 1; transform: translateX(2px); } .nav__link:hover { color: #fff; background: rgba(255, 255, 255, 0.05); } .nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); } .nav__link.is-active { color: #fff; } .nav__actions { display: flex; align-items: center; gap: 10px; flex: 0 1 auto; min-width: 0; } /* CTA w naglowku nie moze rozepchnac paska — skraca sie zamiast wypychac */ .nav__actions .btn { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* CTA pokazywane tylko w rozwinietym menu mobilnym */ .nav__cta-mobile { display: none; } .nav__phone { display: inline-flex; align-items: center; gap: 9px; flex: none; font-family: var(--font-display); font-size: 1.06rem; font-weight: 600; letter-spacing: 0.04em; color: #fff; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--line); /* numer nigdy nie lamie sie na kilka linii */ white-space: nowrap; } .nav__phone svg { width: 19px; height: 19px; flex: none; } .nav__phone:hover { border-color: var(--red); color: var(--red-2); } .burger { display: none; width: 46px; height: 42px; border: 1px solid var(--line-strong); border-radius: 11px; background: rgba(255, 255, 255, 0.04); cursor: pointer; padding: 0; place-items: center; } .burger span { display: block; width: 20px; height: 2px; margin: 2.5px auto; background: #fff; border-radius: 2px; transition: transform 0.28s var(--ease), opacity 0.2s linear; } .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); } /* Telefon w naglowku wymaga sporo miejsca (9-cyfrowy numer + ikona), a oba numery i tak stoja w pasku nad menu. Pokazujemy go tylko na naprawde szerokich ekranach — inaczej wypychal przycisk CTA za krawedz. */ @media (max-width: 1700px) { .nav__phone { display: none; } } /* 7 pozycji menu + CTA nie miesci sie ponizej ~1180 px -> hamburger */ @media (max-width: 1180px) { .burger { display: grid; } /* menu jest teraz pozycjonowane na stalo, wiec nie rozpycha juz paska — przyciski trzeba dosunac do prawej krawedzi samodzielnie */ .nav__actions { margin-left: auto; } .nav__links { position: fixed; inset: calc(var(--nav-h)) 0 auto 0; flex-direction: column; align-items: stretch; gap: 4px; margin: 0; padding: 16px var(--gutter) 26px; background: rgba(8, 9, 13, 0.985); backdrop-filter: var(--blur); border-bottom: 1px solid var(--line); max-height: calc(100dvh - var(--nav-h)); overflow-y: auto; transform: translateY(-14px); opacity: 0; visibility: hidden; transition: opacity 0.26s var(--ease), transform 0.26s var(--ease), visibility 0.26s; } .nav__links.is-open { transform: none; opacity: 1; visibility: visible; } .nav__link { padding: 15px 16px; font-size: 1.03rem; border-bottom: 1px solid var(--line); border-radius: 0; } .nav__link::after { display: none; } .nav__link.is-active { color: var(--red-2); } .nav__cta-mobile { display: grid; gap: 10px; margin-top: 16px; } .nav__cta-mobile .btn { width: 100%; } } /* Gdy widoczny jest hamburger, CTA jest juz w rozwinietym menu — pokazywanie go rownolegle w pasku dawalo dwa razy ten sam przycisk obok siebie. */ @media (max-width: 1180px) { .nav__actions > .btn { display: none; } } @media (max-width: 700px) { .brand__logo { width: clamp(104px, 27vw, 150px); } } /* W rozwinietym menu znak przy „Start" moze byc troche wiekszy */ @media (max-width: 1180px) { .nav__mark { width: 52px; opacity: 0.85; } } /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 14px 26px; border: 1px solid transparent; border-radius: 12px; font-family: var(--font-display); font-size: 0.98rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; overflow: hidden; /* Dlugie etykiety (np. „Przykladowe wyceny z aukcji") lamia sie na dwie linie zamiast rozpychac layout na waskich ekranach. */ white-space: normal; text-align: center; text-wrap: balance; max-width: 100%; transition: transform 0.22s var(--ease), box-shadow 0.26s var(--ease), background 0.26s var(--ease), border-color 0.26s var(--ease), color 0.26s var(--ease); } .btn svg { width: 17px; height: 17px; flex: none; } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0); } .btn--primary { background: linear-gradient(135deg, var(--red-2), var(--red) 55%, var(--red-deep)); color: #fff; box-shadow: var(--shadow-red); } .btn--primary::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent); animation: rr-sweep 4.5s ease-in-out infinite; } .btn--primary:hover { box-shadow: 0 20px 56px rgba(224, 27, 45, 0.44); } .btn--ghost { background: rgba(255, 255, 255, 0.045); border-color: var(--line-strong); color: #fff; } .btn--ghost:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.34); } .btn--outline { background: transparent; border-color: var(--red); color: var(--red-2); } .btn--outline:hover { background: rgba(224, 27, 45, 0.12); color: #fff; } .btn--sm { padding: 10px 18px; font-size: 0.86rem; } .btn--lg { padding: 17px 34px; font-size: 1.06rem; } .btn--block { width: 100%; } @media (max-width: 560px) { .btn { letter-spacing: 0.06em; padding-inline: 20px; } .btn--lg { padding: 15px 22px; font-size: 1rem; } /* na telefonie przyciski w rzedzie rozciagaja sie na cala szerokosc */ .hero__cta .btn, .cta-band .row .btn { flex: 1 1 100%; } } .link-arrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display); font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; font-size: 0.9rem; color: var(--red-2); } .link-arrow svg { width: 16px; height: 16px; transition: transform 0.24s var(--ease); } .link-arrow:hover { color: #fff; } .link-arrow:hover svg { transform: translateX(5px); } /* -------------------------------------------------------------------------- Badges / pills / chips -------------------------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 99px; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.05); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text); white-space: nowrap; } .badge--red { border-color: rgba(224, 27, 45, 0.5); background: rgba(224, 27, 45, 0.14); color: #ffb9bf; } .badge--gold { border-color: rgba(216, 180, 106, 0.46); background: rgba(216, 180, 106, 0.12); color: var(--gold); } .badge--green { border-color: rgba(61, 220, 132, 0.42); background: rgba(61, 220, 132, 0.12); color: #86f0b4; } .badge--cyan { border-color: rgba(55, 212, 224, 0.42); background: rgba(55, 212, 224, 0.12); color: #9beaf1; } .badge--violet { border-color: rgba(139, 92, 246, 0.42); background: rgba(139, 92, 246, 0.14); color: #c9b6fd; } .chips { display: flex; flex-wrap: wrap; gap: 9px; } .chip { padding: 8px 15px; border-radius: 99px; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.035); font-size: 0.84rem; color: var(--text); cursor: pointer; transition: all 0.22s var(--ease); } .chip:hover { border-color: rgba(255, 255, 255, 0.32); color: #fff; } .chip.is-active { background: linear-gradient(135deg, var(--red-2), var(--red)); border-color: transparent; color: #fff; box-shadow: 0 8px 24px rgba(224, 27, 45, 0.34); } /* -------------------------------------------------------------------------- Cards -------------------------------------------------------------------------- */ .card { position: relative; padding: clamp(22px, 2.4vw, 32px); border: 1px solid var(--line); border-radius: var(--radius-l); background: linear-gradient(160deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012) 42%, transparent 70%), var(--panel); overflow: hidden; transition: transform 0.34s var(--ease), border-color 0.34s var(--ease), box-shadow 0.34s var(--ease); } .card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--red), transparent); opacity: 0; transition: opacity 0.34s var(--ease); } .card:hover { transform: translateY(-6px); border-color: rgba(224, 27, 45, 0.34); box-shadow: var(--shadow); } .card:hover::before { opacity: 1; } .card__icon { width: 54px; height: 54px; border-radius: 15px; display: grid; place-items: center; margin-bottom: 20px; background: linear-gradient(150deg, rgba(224, 27, 45, 0.26), rgba(224, 27, 45, 0.05)); border: 1px solid rgba(224, 27, 45, 0.3); color: var(--red-2); } .card__icon svg { width: 26px; height: 26px; } .card__icon--cyan { background: linear-gradient(150deg, rgba(55,212,224,.22), rgba(55,212,224,.04)); border-color: rgba(55,212,224,.3); color: var(--cyan); } .card__icon--gold { background: linear-gradient(150deg, rgba(216,180,106,.22), rgba(216,180,106,.04)); border-color: rgba(216,180,106,.3); color: var(--gold); } .card__icon--violet { background: linear-gradient(150deg, rgba(139,92,246,.24), rgba(139,92,246,.04)); border-color: rgba(139,92,246,.32); color: #b39bfa; } .card__title { font-family: var(--font-display); font-size: 1.22rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #fff; margin-bottom: 10px; } .card__num { position: absolute; top: 14px; right: 20px; font-family: var(--font-display); font-size: 3.4rem; font-weight: 700; line-height: 1; color: transparent; -webkit-text-stroke: 1.4px rgba(255, 255, 255, 0.11); pointer-events: none; } .card--flat { background: var(--panel); } .card--flat:hover { transform: none; } .card--glass { background: rgba(255, 255, 255, 0.04); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); } .card--feature { border-color: rgba(224, 27, 45, 0.34); background: linear-gradient(160deg, rgba(224, 27, 45, 0.16), transparent 52%), var(--panel-2); } /* Tick list inside cards */ .ticks { display: grid; gap: 11px; } /* Uwaga na przyszlosc: ten element NIE moze byc siatka ani flexem. Tresc punktu to mieszanka znacznika i zwyklego tekstu (Nazwa — opis...). W siatce kazdy z tych kawalkow staje sie osobnym elementem ukladu, wiec opis ladowal w waskiej kolumnie ikony i lamal sie po jednym slowie w linii. Zwykly blok z wcieciem i ikona ustawiona absolutnie trzyma cala tresc w jednym ciagu. */ .ticks li { position: relative; display: block; padding-left: 33px; font-size: 0.94rem; line-height: 1.62; } .ticks li::before { content: ""; position: absolute; left: 0; top: 3px; width: 21px; height: 21px; border-radius: 6px; background: rgba(224, 27, 45, 0.16) center / 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff3b4e' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); border: 1px solid rgba(224, 27, 45, 0.3); flex: none; } .ticks--green li::before { background-color: rgba(61, 220, 132, 0.14); border-color: rgba(61, 220, 132, 0.3); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2386f0b4' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); } .ticks--x li::before { background-color: rgba(255, 255, 255, 0.05); border-color: var(--line-strong); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398a2b3' stroke-width='3.2' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E"); } /* -------------------------------------------------------------------------- Stats -------------------------------------------------------------------------- */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-l); overflow: hidden; } .stat { padding: clamp(20px, 2.4vw, 32px) clamp(16px, 2vw, 26px); background: var(--panel); text-align: center; transition: background 0.3s var(--ease); } .stat:hover { background: var(--panel-2); } .stat__value { font-family: var(--font-display); font-size: clamp(2.1rem, 3.6vw, 3rem); font-weight: 700; line-height: 1; color: #fff; display: flex; align-items: baseline; justify-content: center; gap: 2px; } .stat__value .suffix { color: var(--red-2); } .stat__label { margin-top: 9px; font-size: 0.79rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); } /* -------------------------------------------------------------------------- Media frames (photos / videos, with graceful placeholders) -------------------------------------------------------------------------- */ .frame { position: relative; border-radius: var(--radius-l); overflow: hidden; border: 1px solid var(--line); background: repeating-linear-gradient(135deg, #10131a 0 14px, #131720 14px 28px); isolation: isolate; } .frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 44%, rgba(5, 6, 8, 0.82) 100%); opacity: 0; transition: opacity 0.34s var(--ease); } .frame--shade::after { opacity: 1; } .frame img, .frame video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s var(--ease-out), filter 0.5s var(--ease); } .frame--zoom:hover img { transform: scale(1.06); } .frame__ratio-4-3 { aspect-ratio: 4 / 3; } .frame__ratio-16-9 { aspect-ratio: 16 / 9; } .frame__ratio-3-2 { aspect-ratio: 3 / 2; } .frame__ratio-1-1 { aspect-ratio: 1 / 1; } .frame__ratio-tall { aspect-ratio: 3 / 4; } /* Placeholder shown when no photo is supplied yet */ .slot { position: relative; display: grid; place-items: center; text-align: center; padding: 26px; gap: 12px; color: var(--dim); background: radial-gradient(420px 220px at 50% 0%, rgba(224, 27, 45, 0.13), transparent 70%), repeating-linear-gradient(135deg, #0e1117 0 16px, #12161f 16px 32px); } .slot__icon { width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; border: 1px dashed rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.03); color: var(--red-2); } .slot__icon svg { width: 26px; height: 26px; } .slot__title { font-family: var(--font-display); font-size: 1.02rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); } .slot__hint { font-size: 0.78rem; max-width: 30ch; line-height: 1.55; color: var(--dim); } .slot code { font-family: var(--font-mono); font-size: 0.74rem; padding: 2px 6px; border-radius: 5px; background: rgba(255, 255, 255, 0.07); color: #ffb9bf; } /* Caption bar over media */ .frame__caption { position: absolute; inset-inline: 0; bottom: 0; z-index: 2; padding: 16px 18px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; background: linear-gradient(180deg, transparent, rgba(5, 6, 8, 0.9)); } .frame__caption h4 { margin: 0 0 3px; font-size: 1.02rem; } .frame__caption p { margin: 0; font-size: 0.8rem; color: var(--muted); } .frame__tag { position: absolute; top: 14px; left: 14px; z-index: 2; } .play-btn { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; border: 0; background: transparent; cursor: pointer; } .play-btn i { width: 66px; height: 66px; border-radius: 50%; display: grid; place-items: center; background: rgba(224, 27, 45, 0.9); box-shadow: 0 0 0 12px rgba(224, 27, 45, 0.16), var(--shadow-red); transition: transform 0.26s var(--ease), box-shadow 0.26s var(--ease); } .play-btn i::before { content: ""; width: 0; height: 0; margin-left: 5px; border-left: 17px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent; } .play-btn:hover i { transform: scale(1.09); box-shadow: 0 0 0 18px rgba(224, 27, 45, 0.2), var(--shadow-red); } /* -------------------------------------------------------------------------- Forms -------------------------------------------------------------------------- */ .field { display: grid; gap: 7px; } .field > label, .field-label { font-size: 0.79rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; /* etykieta + plakietka „opcjonalnie" musza moc sie zawinac, inaczej plakietka wychodzila na sasiednia kolumne */ flex-wrap: wrap; gap: 4px 8px; min-width: 0; } .input, .select, .textarea { width: 100%; padding: 13px 15px; border-radius: 11px; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.035); color: #fff; font-size: 0.97rem; transition: border-color 0.22s var(--ease), background 0.22s var(--ease), box-shadow 0.22s var(--ease); appearance: none; } .textarea { min-height: 132px; resize: vertical; line-height: 1.65; } .input:hover, .select:hover, .textarea:hover { border-color: rgba(255, 255, 255, 0.28); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--red); background: rgba(224, 27, 45, 0.07); box-shadow: 0 0 0 4px rgba(224, 27, 45, 0.14); } .input::placeholder, .textarea::placeholder { color: var(--dim); } .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2398a2b3' stroke-width='2.4' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; background-size: 17px; padding-right: 40px; cursor: pointer; } .select option { background: #12151b; color: #fff; } .input-group { position: relative; display: flex; align-items: center; } .input-group .input { padding-right: 62px; } .input-group__unit { position: absolute; right: 13px; font-family: var(--font-mono); font-size: 0.82rem; color: var(--dim); pointer-events: none; } .switch-row { display: flex; align-items: flex-start; gap: 13px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, 0.02); cursor: pointer; transition: border-color 0.22s var(--ease), background 0.22s var(--ease); } .switch-row:hover { border-color: rgba(255, 255, 255, 0.24); } .switch-row:has(input:checked) { border-color: rgba(224, 27, 45, 0.5); background: rgba(224, 27, 45, 0.08); } .switch-row input { appearance: none; width: 20px; height: 20px; flex: none; margin: 2px 0 0; border-radius: 6px; border: 1.5px solid var(--line-strong); background: rgba(255, 255, 255, 0.05); cursor: pointer; transition: all 0.2s var(--ease); } .switch-row input:checked { background: var(--red) center / 13px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); border-color: var(--red); } .switch-row__text { display: grid; gap: 2px; } .switch-row__text b { font-size: 0.94rem; font-weight: 600; } .switch-row__text span { font-size: 0.79rem; color: var(--muted); line-height: 1.5; } .range { appearance: none; width: 100%; height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--red) var(--pct, 40%), rgba(255, 255, 255, 0.12) var(--pct, 40%)); cursor: pointer; } .range::-webkit-slider-thumb { appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 4px solid var(--red); box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5); cursor: grab; } .range::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 4px solid var(--red); cursor: grab; } .form-note { font-size: 0.78rem; color: var(--dim); line-height: 1.6; } .form-status { padding: 13px 16px; border-radius: 11px; font-size: 0.9rem; line-height: 1.6; border: 1px solid rgba(61, 220, 132, 0.4); background: rgba(61, 220, 132, 0.1); color: #a6f5c8; } .form-status.is-error { border-color: rgba(224, 27, 45, 0.5); background: rgba(224, 27, 45, 0.12); color: #ffc0c6; } button[disabled] { opacity: 0.6; cursor: wait; } /* -------------------------------------------------------------------------- Tables -------------------------------------------------------------------------- */ .table-wrap { overflow-x: auto; /* bez tego tabela z min-width rozpychala cala strone na telefonie */ min-width: 0; max-width: 100%; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); -webkit-overflow-scrolling: touch; } table.data { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 0.92rem; } table.data th, table.data td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line); } @media (max-width: 560px) { /* Tabela i tak siedzi w kontenerze przewijanym w poziomie, wiec lepiej dac kolumnom oddychac niz sciskac je do szerokosci ekranu — przy 420 px tresc pierwszej kolumny lamala sie po jednym slowie. */ table.data { min-width: 520px; font-size: 0.86rem; } table.data th, table.data td { padding: 11px 12px; } } table.data thead th { font-family: var(--font-display); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); background: rgba(255, 255, 255, 0.03); white-space: nowrap; } table.data tbody tr:last-child td { border-bottom: 0; } table.data tbody tr:hover td { background: rgba(255, 255, 255, 0.026); } table.data td.num, table.data th.num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; } table.data tr.total td { background: rgba(224, 27, 45, 0.1); border-top: 1px solid rgba(224, 27, 45, 0.36); font-weight: 700; color: #fff; font-size: 1rem; } table.data tr.sub td { background: rgba(255, 255, 255, 0.035); font-weight: 600; color: #fff; } /* -------------------------------------------------------------------------- Accordion -------------------------------------------------------------------------- */ .acc { display: grid; gap: 12px; } .acc details { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; transition: border-color 0.26s var(--ease); } .acc details[open] { border-color: rgba(224, 27, 45, 0.38); } .acc summary { list-style: none; cursor: pointer; padding: 18px 54px 18px 22px; position: relative; font-family: var(--font-display); font-size: 1.08rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: #fff; } .acc summary::-webkit-details-marker { display: none; } .acc summary::after { content: ""; position: absolute; right: 20px; top: 50%; width: 13px; height: 13px; translate: 0 -50%; background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ff3b4e' stroke-width='3' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); transition: rotate 0.26s var(--ease); } .acc details[open] summary::after { rotate: 180deg; } .acc summary:hover { background: rgba(255, 255, 255, 0.03); } .acc__body { padding: 0 22px 20px; color: var(--muted); font-size: 0.94rem; line-height: 1.75; } /* -------------------------------------------------------------------------- Marquee (brand strip) -------------------------------------------------------------------------- */ .marquee { overflow: hidden; border-block: 1px solid var(--line); background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent); padding-block: 20px; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee__track { display: flex; gap: 54px; width: max-content; animation: rr-marquee 34s linear infinite; } .marquee:hover .marquee__track { animation-play-state: paused; } .marquee__item { font-family: var(--font-display); font-size: clamp(1.1rem, 1.7vw, 1.5rem); font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.3); white-space: nowrap; transition: color 0.26s var(--ease); display: inline-flex; align-items: center; gap: 54px; } .marquee__item::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--red); opacity: 0.6; } .marquee__item:hover { color: #fff; } /* -------------------------------------------------------------------------- Lightbox -------------------------------------------------------------------------- */ .lightbox { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: clamp(14px, 3vw, 40px); background: rgba(3, 4, 6, 0.94); backdrop-filter: blur(10px); opacity: 0; visibility: hidden; transition: opacity 0.28s var(--ease), visibility 0.28s; } .lightbox.is-open { opacity: 1; visibility: visible; } .lightbox__stage { max-width: min(1200px, 100%); max-height: 100%; width: 100%; display: grid; gap: 14px; } .lightbox__media { border-radius: var(--radius-l); overflow: hidden; border: 1px solid var(--line-strong); background: #0b0d12; max-height: 78dvh; display: grid; place-items: center; } .lightbox__media img, .lightbox__media video, .lightbox__media iframe { width: 100%; max-height: 78dvh; object-fit: contain; border: 0; display: block; } .lightbox__media iframe { aspect-ratio: 16 / 9; height: auto; } .lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--muted); font-size: 0.9rem; } .lightbox__close, .lightbox__nav { width: 46px; height: 46px; border-radius: 12px; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.06); color: #fff; cursor: pointer; display: grid; place-items: center; transition: all 0.2s var(--ease); } .lightbox__close:hover, .lightbox__nav:hover { background: var(--red); border-color: var(--red); } .lightbox__close { position: absolute; top: clamp(12px, 2vw, 26px); right: clamp(12px, 2vw, 26px); } .lightbox__close svg, .lightbox__nav svg { width: 20px; height: 20px; } /* -------------------------------------------------------------------------- Footer -------------------------------------------------------------------------- */ .footer { position: relative; margin-top: clamp(50px, 6vw, 90px); border-top: 1px solid var(--line); background: linear-gradient(180deg, var(--ink), #06070a); } .footer__glow { position: absolute; top: -1px; left: 50%; translate: -50% 0; width: min(620px, 84%); height: 2px; background: linear-gradient(90deg, transparent, var(--red), transparent); } .footer__grid { display: grid; gap: clamp(28px, 3.4vw, 52px); grid-template-columns: 1.5fr 1fr 1fr 1.2fr; padding-block: clamp(42px, 5vw, 70px); } @media (max-width: 900px) { .footer__grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } } .footer h5 { font-size: 0.83rem; letter-spacing: 0.19em; color: var(--red-2); margin-bottom: 18px; } .footer__links { display: grid; gap: 11px; } .footer__links a { color: var(--muted); font-size: 0.92rem; display: inline-flex; align-items: center; gap: 9px; } .footer__links a::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--red); opacity: 0.55; transition: all 0.22s var(--ease); flex: none; } .footer__links a:hover { color: #fff; } .footer__links a:hover::before { opacity: 1; scale: 1.5; } .footer__contact { display: grid; gap: 14px; } .footer__contact-item { display: grid; grid-template-columns: 38px 1fr; gap: 13px; align-items: start; } .footer__contact-item i { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: rgba(224, 27, 45, 0.14); border: 1px solid rgba(224, 27, 45, 0.28); color: var(--red-2); } .footer__contact-item i svg { width: 17px; height: 17px; } .footer__contact-item b { display: block; font-size: 0.94rem; } .footer__contact-item span { font-size: 0.83rem; color: var(--muted); } .socials { display: flex; gap: 10px; flex-wrap: wrap; } .socials a { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.04); color: var(--text); transition: all 0.24s var(--ease); } .socials a svg { width: 19px; height: 19px; } .socials a:hover { background: var(--red); border-color: var(--red); color: #fff; transform: translateY(-3px); box-shadow: var(--shadow-red); } .footer__bottom { border-top: 1px solid var(--line); padding-block: 20px; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; font-size: 0.8rem; color: var(--dim); } .footer__bottom a:hover { color: var(--red-2); } /* Floating quick-contact bubble */ .fab { position: fixed; right: clamp(14px, 2.4vw, 26px); bottom: clamp(14px, 2.4vw, 26px); z-index: 80; display: flex; flex-direction: column; gap: 10px; align-items: flex-end; } .fab a { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; color: #fff; border: 1px solid rgba(255, 255, 255, 0.14); background: linear-gradient(140deg, #1d222d, #10131a); box-shadow: var(--shadow); transition: all 0.24s var(--ease); } .fab a svg { width: 23px; height: 23px; } .fab a:hover { transform: translateY(-4px) scale(1.05); } .fab a.is-phone { background: linear-gradient(140deg, var(--red-2), var(--red-deep)); border-color: transparent; } .fab a.is-wa { background: linear-gradient(140deg, #34d97b, #128c4a); border-color: transparent; } /* Back-to-top */ .to-top { width: 54px; height: 54px; border-radius: 16px; border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.06); color: #fff; cursor: pointer; display: grid; place-items: center; opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.28s var(--ease); } .to-top.is-shown { opacity: 1; visibility: visible; transform: none; } .to-top:hover { background: var(--red); border-color: var(--red); } .to-top svg { width: 21px; height: 21px; } /* -------------------------------------------------------------------------- Pulapka antyspamowa — ukryta dla ludzi, widoczna dla botow -------------------------------------------------------------------------- */ .rr-trap { position: absolute !important; left: -9999px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; } /* -------------------------------------------------------------------------- Pasek informacyjny o cookies / RODO -------------------------------------------------------------------------- */ .cookiebar { position: fixed; z-index: 150; left: clamp(12px, 2vw, 22px); right: clamp(12px, 2vw, 22px); bottom: clamp(12px, 2vw, 22px); max-width: 720px; margin-inline: auto; padding: 18px 20px; border-radius: var(--radius-l); border: 1px solid rgba(224, 27, 45, 0.34); background: rgba(12, 14, 19, 0.96); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); box-shadow: 0 24px 70px rgba(0, 0, 0, 0.7); display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; transform: translateY(140%); transition: transform 0.45s var(--ease-out); } .cookiebar.is-shown { transform: none; } .cookiebar p { margin: 0; flex: 1 1 320px; font-size: 0.85rem; line-height: 1.6; color: var(--muted); } .cookiebar a { color: var(--red-2); text-decoration: underline; text-underline-offset: 3px; } /* -------------------------------------------------------------------------- Strony tekstowe (polityka prywatnosci, 404, podziekowanie) -------------------------------------------------------------------------- */ .prose { max-width: 78ch; } .prose h2 { margin-top: 2em; font-size: clamp(1.3rem, 2vw, 1.7rem); } .prose h3 { margin-top: 1.6em; font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--red-2); } .prose p, .prose li { color: var(--muted); font-size: 0.95rem; line-height: 1.78; } .prose ul { margin: 0 0 1.2em; display: grid; gap: 8px; } .prose ul li { padding-left: 22px; position: relative; } .prose ul li::before { content: ""; position: absolute; left: 4px; top: 0.72em; width: 6px; height: 6px; border-radius: 50%; background: var(--red); } .prose ol { margin: 0 0 1.2em 22px; list-style: decimal; display: grid; gap: 8px; } .prose strong { color: var(--white); } .prose a { color: var(--red-2); text-decoration: underline; text-underline-offset: 3px; } /* Ekran centralny (404 / dziekujemy) */ .screen { min-height: clamp(520px, 74dvh, 780px); display: grid; place-items: center; text-align: center; padding-block: clamp(50px, 8vw, 100px); } .screen__code { font-family: var(--font-display); font-style: italic; font-weight: 700; font-size: clamp(6rem, 20vw, 15rem); line-height: 0.8; color: transparent; -webkit-text-stroke: 2px rgba(224, 27, 45, 0.55); margin-bottom: 14px; } .screen__tick { width: clamp(84px, 12vw, 118px); height: clamp(84px, 12vw, 118px); margin: 0 auto 26px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(140deg, rgba(61, 220, 132, 0.26), rgba(61, 220, 132, 0.06)); border: 1px solid rgba(61, 220, 132, 0.45); color: #86f0b4; } .screen__tick svg { width: 46%; height: 46%; } /* -------------------------------------------------------------------------- Pasek informacyjny (zmiana przepisow, komunikat) -------------------------------------------------------------------------- */ .notice { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px clamp(14px, 1.8vw, 22px); border-radius: var(--radius-l); border: 1px solid rgba(61, 220, 132, 0.34); background: linear-gradient(120deg, rgba(61, 220, 132, 0.12), transparent 62%), var(--panel); min-width: 0; } /* Zamiast ikony — sama stawka. Nie wymaga tlumaczenia i od razu mowi, o co chodzi w calym komunikacie. */ .notice__badge { flex: none; align-self: center; padding: 4px 12px; border-radius: 10px; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; line-height: 1.15; letter-spacing: 0.01em; color: #86f0b4; background: rgba(61, 220, 132, 0.14); border: 1px solid rgba(61, 220, 132, 0.36); } .notice__text { flex: 1 1 320px; min-width: 0; font-size: 0.88rem; line-height: 1.6; color: var(--muted); } .notice__text b { color: #fff; } .notice__text strong { color: #86f0b4; font-weight: 700; } .notice .btn { flex: none; } @media (max-width: 560px) { .notice .btn { flex: 1 1 100%; } } /* -------------------------------------------------------------------------- Wybor dzialu w formularzu kontaktowym -------------------------------------------------------------------------- */ .dzial { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; } .dzial__legend { padding: 0; margin-bottom: 10px; font-size: 0.79rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .dzial__opcje { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); } .dzial__opcja { cursor: pointer; min-width: 0; } /* Sam przycisk radia jest ukryty wizualnie, ale nadal dostepny z klawiatury i dla czytnikow ekranu — stan pokazuje ramka kafla. */ .dzial__opcja input { position: absolute; opacity: 0; width: 1px; height: 1px; } .dzial__box { display: grid; gap: 4px; height: 100%; padding: 14px 16px; border-radius: var(--radius); border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.03); transition: border-color 0.22s var(--ease), background 0.22s var(--ease); } .dzial__box b { font-size: 0.94rem; line-height: 1.35; color: var(--text); } .dzial__box span { font-size: 0.8rem; line-height: 1.5; color: var(--dim); } .dzial__box em { margin-top: 3px; font-family: var(--font-mono); font-style: normal; font-size: 0.8rem; color: var(--muted); overflow-wrap: anywhere; } .dzial__opcja:hover .dzial__box { border-color: rgba(255, 255, 255, 0.3); } .dzial__opcja input:checked + .dzial__box { border-color: var(--red); background: rgba(224, 27, 45, 0.11); } .dzial__opcja input:checked + .dzial__box b { color: #fff; } .dzial__opcja input:checked + .dzial__box em { color: #ffb9bf; } .dzial__opcja input:focus-visible + .dzial__box { outline: 2px solid var(--red-2); outline-offset: 3px; }