/* ============================================================ Red Blue Team - style.css Dark cyberpunk + militarny tech | mobile-first Breakpointy: 480 / 768 / 1024 / 1280 px ============================================================ */ /* ---------------------------------------------------------- PALETA: --cyan = niebieski (Blue Team, struktura: siatka, ramki, linki) --red = czerwony (Red Team, akcent ataku) --green = neonowa zieleń (CTA, highlighty - vibe hakerski, kolor z logo) Motyw przełączany przez [data-theme] na . ---------------------------------------------------------- */ :root, :root[data-theme="dark"] { /* tło / powierzchnie (ciemny motyw) */ --bg: #0a0a0f; --bg-rgb: 10, 10, 15; --bg2: #0d1b2a; --bg2-rgb: 13, 27, 42; --bg-deep: #07070b; --white: #f0f0f0; --muted: #9bb0c1; --glass: rgba(13, 27, 42, 0.55); --glass-border: rgba(var(--cyan-rgb), 0.2); --scan-opacity: 1; /* akcenty - w ciemnym lekko rozjaśnione */ --cyan: #2e8be6; --cyan-rgb: 46, 139, 230; --cyan-contrast: #04222b; --red: #ff3b5c; --red-rgb: 255, 59, 92; --green: #39ff6a; /* neonowa zieleń - CTA / akcent (hacker) */ --green-rgb: 57, 255, 106; --green-contrast: #052b12; --font-head: 'Rajdhani', 'Exo 2', sans-serif; /* Exo 2 = fallback z cyrylicą (Rajdhani jej nie ma) */ --font-mono: 'IBM Plex Mono', monospace; --font-body: 'Inter', system-ui, sans-serif; --nav-h: 64px; --radius: 10px; --transition: 0.25s ease; } /* ---------- JASNY MOTYW ---------- */ :root[data-theme="light"] { --bg: #f4f7fb; --bg-rgb: 244, 247, 251; --bg2: #e9eef5; --bg2-rgb: 233, 238, 245; --bg-deep: #e4eaf2; --white: #11202e; --muted: #5a6b7a; --glass: rgba(255, 255, 255, 0.72); --glass-border: rgba(13, 99, 196, 0.22); --scan-opacity: 0; --cyan: #0d63c4; --cyan-rgb: 13, 99, 196; --cyan-contrast: #ffffff; --red: #d61f43; --red-rgb: 214, 31, 67; --green: #0aa63f; /* neonowa zieleń przyciemniona pod biel (AA) */ --green-rgb: 10, 166, 63; --green-contrast: #ffffff; --grid-alpha: 0.16; } /* ---------- WYSOKI KONTRAST (WCAG 2.1 / dostępność cyfrowa) ---------- Czyste czarne tło, biały tekst, jaskrawe akcenty, pełne ramki. Wszystkie kombinacje tekst/tło przekraczają 7:1 (AAA). */ :root[data-theme="contrast"] { --bg: #000000; --bg-rgb: 0, 0, 0; --bg2: #000000; --bg2-rgb: 0, 0, 0; --bg-deep: #000000; --white: #ffffff; --muted: #f2f2f2; --glass: #000000; /* pełne, nieprzezroczyste */ --glass-border: #ffffff; /* solidna biała ramka */ --scan-opacity: 0; --cyan: #5cc8ff; /* jasny niebieski (kontrast na czerni ~10:1) */ --cyan-rgb: 92, 200, 255; --cyan-contrast: #000000; --red: #ff7a93; /* jasny czerwony */ --red-rgb: 255, 122, 147; --green: #46ff77; /* neon zieleń (kontrast na czerni ~14:1) */ --green-rgb: 70, 255, 119; --green-contrast: #000000; --grid-alpha: 0.10; } /* Wzmocnienia czytelności w trybie wysokiego kontrastu */ :root[data-theme="contrast"] .glass { background: #000; border-color: #fff; } :root[data-theme="contrast"] .form-field input, :root[data-theme="contrast"] .form-field select, :root[data-theme="contrast"] .form-field textarea { background: #000; border-color: #fff; color: #fff; } :root[data-theme="contrast"] .mod__list li, :root[data-theme="contrast"] .price-card__features li, :root[data-theme="contrast"] .mod__scenarios li, :root[data-theme="contrast"] .mod__full, :root[data-theme="contrast"] .mod__meta, :root[data-theme="contrast"] .module__meta { border-color: rgba(255, 255, 255, 0.5); } :root[data-theme="contrast"] .navbar { background: #000; border-bottom-color: #fff; } :root[data-theme="contrast"] .navbar__menu { background: #000; } :root[data-theme="contrast"] :focus-visible { outline-width: 3px; } :root[data-theme="contrast"] .card__text strong { color: var(--green); } /* ---------- Reset / baza ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); } body { background: var(--bg); color: var(--white); font-family: var(--font-body); font-size: 1rem; line-height: 1.65; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: var(--cyan); text-decoration: none; } a:hover { text-decoration: underline; } .link-accent { color: var(--green); } :focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 2px; } ::selection { background: var(--cyan); color: var(--bg); } .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; } .container--narrow { max-width: 820px; } /* ---------- Scan-lines - tylko na tle strony ---------- */ .scanlines { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--scan-opacity); background: repeating-linear-gradient( to bottom, transparent 0px, transparent 3px, rgba(var(--cyan-rgb), 0.045) 3px, rgba(var(--cyan-rgb), 0.045) 4px ); } /* płynne przejście kolorów przy zmianie motywu */ body, .navbar, .glass, .card, .module, .section--alt, .footer, .btn { transition: background-color var(--transition), border-color var(--transition), color var(--transition); } /* ---------- Glassmorphism ---------- */ .glass { background: var(--glass); border: 1px solid var(--glass-border); border-radius: var(--radius); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } /* ---------- Logo (godło graficzne) ---------- */ /* Logo: stały rozmiar (nigdy nie skalowane) + obszar ochronny (clear space) po prawej */ .navbar__logo { display: flex; align-items: center; flex-shrink: 0; padding-right: clamp(1rem, 3vw, 2.25rem); } .navbar__logo:hover { text-decoration: none; } .navbar__logo-img { height: 40px; width: auto; flex-shrink: 0; display: block; transition: filter var(--transition), transform var(--transition); } .navbar__logo:hover .navbar__logo-img { transform: translateY(-1px); filter: drop-shadow(0 0 10px rgba(var(--green-rgb), 0.55)); } /* Poziome logo - wariant wg motywu (biały tekst na ciemnym/kontraście, ciemny na jasnym) */ .logo-h--light { display: none; } [data-theme="light"] .logo-h--white { display: none; } [data-theme="light"] .logo-h--light { display: block; } [data-theme="contrast"] .logo-h--light { display: none; } /* ---------- Przyciski ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0.75rem 1.75rem; font-family: var(--font-head); font-size: 1.05rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 6px; border: 2px solid transparent; cursor: pointer; transition: transform var(--transition), box-shadow var(--transition), background var(--transition), color var(--transition); } .btn:hover { text-decoration: none; transform: translateY(-2px); } /* Primary = pomarańczowy (główne CTA) */ .btn--primary { background: var(--green); color: var(--green-contrast); box-shadow: 0 0 18px rgba(var(--green-rgb), 0.45); } .btn--primary:hover { box-shadow: 0 0 32px rgba(var(--green-rgb), 0.8), 0 0 64px rgba(var(--green-rgb), 0.35); } /* Secondary = niebieski (akcja poboczna) */ .btn--secondary { background: transparent; color: var(--cyan); border-color: var(--cyan); } .btn--secondary:hover { background: rgba(var(--cyan-rgb), 0.08); box-shadow: 0 0 22px rgba(var(--cyan-rgb), 0.45); } .btn--block { width: 100%; } /* ============================================================ NAVBAR ============================================================ */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(var(--bg-rgb), 0.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(var(--cyan-rgb), 0.12); transition: background var(--transition), box-shadow var(--transition); } .navbar.is-scrolled { background: rgba(var(--bg-rgb), 0.92); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6); } .navbar__inner { max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; } .navbar__right { display: flex; align-items: center; gap: 0.25rem; } /* Przełącznik motywu (słońce / księżyc) */ .theme-toggle { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: 0.5rem; background: transparent; border: 1px solid var(--glass-border); border-radius: 8px; color: var(--cyan); cursor: pointer; transition: color var(--transition), border-color var(--transition), box-shadow var(--transition); } .theme-toggle:hover { color: var(--green); border-color: var(--green); box-shadow: 0 0 14px rgba(var(--green-rgb), 0.3); } .theme-toggle svg { width: 22px; height: 22px; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="light"] .theme-toggle .icon-sun { display: block; } [data-theme="light"] .theme-toggle .icon-moon { display: none; } /* Przełącznik wysokiego kontrastu (dostępność) */ .contrast-toggle[aria-pressed="true"], [data-theme="contrast"] .contrast-toggle { color: var(--green); border-color: var(--green); box-shadow: 0 0 14px rgba(var(--green-rgb), 0.4); } /* Hamburger */ .navbar__toggle { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: none; border: none; cursor: pointer; } .hamburger { display: flex; flex-direction: column; gap: 5px; width: 24px; } .hamburger span { height: 2px; width: 100%; background: var(--cyan); transition: transform var(--transition), opacity var(--transition); } .navbar__toggle[aria-expanded="true"] .hamburger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .navbar__toggle[aria-expanded="true"] .hamburger span:nth-child(2) { opacity: 0; } .navbar__toggle[aria-expanded="true"] .hamburger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Menu - mobile-first (rozwijane) */ .navbar__menu { list-style: none; position: absolute; top: var(--nav-h); left: 0; right: 0; background: rgba(var(--bg-rgb), 0.97); border-bottom: 1px solid rgba(var(--cyan-rgb), 0.15); display: flex; flex-direction: column; padding: 0.5rem 0 1rem; transform: translateY(-8px); opacity: 0; visibility: hidden; transition: transform var(--transition), opacity var(--transition), visibility var(--transition); } .navbar__menu.is-open { transform: translateY(0); opacity: 1; visibility: visible; } .navbar__link { display: flex; align-items: center; min-height: 44px; padding: 0.5rem 1.5rem; font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white); position: relative; white-space: nowrap; /* nie łam etykiet menu na 2 linie (dłuższe języki, np. UA) */ transition: color var(--transition); } .navbar__link:hover { color: var(--cyan); text-decoration: none; } .navbar__link.is-active { color: var(--cyan); } .navbar__link.is-active::before { content: ">"; font-family: var(--font-mono); color: var(--green); margin-right: 0.4rem; } .navbar__link--cta { color: var(--green); } /* ============================================================ HERO ============================================================ */ .hero { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; justify-content: center; position: relative; padding: calc(var(--nav-h) + 2rem) 1.25rem 4rem; text-align: center; overflow: hidden; } .hero__bg { position: absolute; inset: 0; z-index: -1; } .hero__grid { position: absolute; inset: -100px; background-image: linear-gradient(rgba(var(--cyan-rgb), var(--grid-alpha, 0.07)) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--cyan-rgb), var(--grid-alpha, 0.07)) 1px, transparent 1px); background-size: 48px 48px; animation: grid-drift 18s linear infinite; mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 45%, #000 30%, transparent 75%); } @keyframes grid-drift { from { transform: translate(0, 0); } to { transform: translate(48px, 48px); } } .hero__dots { position: absolute; inset: 0; background-image: radial-gradient(2px 2px at 12% 28%, rgba(var(--red-rgb), 0.8), transparent), radial-gradient(2px 2px at 78% 18%, rgba(var(--cyan-rgb), 0.9), transparent), radial-gradient(1.5px 1.5px at 35% 72%, rgba(var(--cyan-rgb), 0.7), transparent), radial-gradient(2px 2px at 88% 64%, rgba(var(--red-rgb), 0.6), transparent), radial-gradient(1.5px 1.5px at 55% 38%, rgba(240, 240, 240, 0.5), transparent), radial-gradient(2px 2px at 22% 85%, rgba(var(--cyan-rgb), 0.65), transparent); background-size: 100% 100%; animation: dots-float 12s ease-in-out infinite alternate; } @keyframes dots-float { from { transform: translateY(0) scale(1); opacity: 0.85; } to { transform: translateY(-26px) scale(1.04); opacity: 1; } } .hero__content { max-width: 880px; } .hero__pretitle { font-family: var(--font-mono); color: var(--green); font-size: 0.95rem; letter-spacing: 0.18em; margin-bottom: 1rem; text-transform: lowercase; } .blink { animation: blink 1.1s steps(2) infinite; } @keyframes blink { 50% { opacity: 0; } } .hero__logo { width: auto; height: clamp(170px, 30vw, 290px); margin: 0.75rem auto 0; filter: drop-shadow(0 0 28px rgba(var(--green-rgb), 0.28)); animation: logo-float 6s ease-in-out infinite; } @keyframes logo-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } .hero__tagline { font-size: clamp(1rem, 2.6vw, 1.35rem); font-weight: 400; font-family: var(--font-body); color: var(--muted); margin: 1.5rem auto 0.75rem; max-width: 680px; } .hero__hashtag { font-family: var(--font-mono); color: var(--green); font-size: 1rem; margin-bottom: 2rem; } .hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; } .hero__scroll { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: var(--cyan); } .hero__scroll:hover { text-decoration: none; } .hero__scroll-arrow { animation: scroll-bounce 1.8s ease-in-out infinite; font-size: 1.1rem; } @keyframes scroll-bounce { 0%, 100% { transform: translateY(0); opacity: 0.6; } 50% { transform: translateY(7px); opacity: 1; } } /* ============================================================ STATS ============================================================ */ .stats { border-top: 1px solid rgba(var(--cyan-rgb), 0.12); border-bottom: 1px solid rgba(var(--cyan-rgb), 0.12); background: var(--bg-deep); padding: 2.25rem 0; } .stats__inner { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1rem; text-align: center; } .stat { display: flex; flex-direction: column; gap: 0.3rem; } .stat__num { font-family: var(--font-head); font-weight: 700; font-size: clamp(1.8rem, 6vw, 2.6rem); line-height: 1; color: var(--cyan); text-shadow: 0 0 18px rgba(var(--cyan-rgb), 0.3); } .stat__label { font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); letter-spacing: 0.02em; } /* ============================================================ SEKCJE ============================================================ */ .section { padding: 4.5rem 0; } .section--alt { background: linear-gradient(180deg, var(--bg) 0%, var(--bg2) 50%, var(--bg) 100%); } .section__title { font-family: var(--font-head); font-size: clamp(1.7rem, 5vw, 2.6rem); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 1.25rem; display: flex; align-items: baseline; gap: 0.75rem; } .section__no { font-family: var(--font-mono); font-size: 0.55em; color: var(--green); } .section__title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--cyan), transparent); align-self: center; margin-left: 0.5rem; min-width: 40px; } .section__lead { color: var(--muted); max-width: none; margin-bottom: 2.5rem; } /* ---------- Siatki kart ---------- */ .cards-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; } /* ---------- Karta generyczna ---------- */ .card { padding: 2rem 1.5rem; transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition); } .card:hover { transform: translateY(-4px); border-color: rgba(var(--cyan-rgb), 0.6); box-shadow: 0 0 28px rgba(var(--cyan-rgb), 0.18); } .card__icon { color: var(--cyan); margin-bottom: 1.25rem; } .card--red .card__icon { color: var(--red); } .card--red:hover { border-color: rgba(var(--red-rgb), 0.6); box-shadow: 0 0 28px rgba(var(--red-rgb), 0.18); } .card__title { font-family: var(--font-head); font-size: 1.3rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 0.6rem; } .card__text { color: var(--muted); font-size: 0.97rem; } .card__text strong { color: var(--green); font-weight: 600; } /* Numerowany krok (sekcja Instalacja) */ .card__step { font-family: var(--font-head); font-size: 1.6rem; font-weight: 700; line-height: 1; color: var(--cyan); margin-bottom: 1rem; display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 12px; border: 1px solid rgba(var(--cyan-rgb), 0.35); background: rgba(var(--cyan-rgb), 0.07); } /* Przyciski akcji pod krokami instalacji */ .install-actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.25rem; justify-content: center; } /* Podtytuł w obrębie sekcji (np. mechaniki w sekcji Instalacja) */ .subsection__title { font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; text-align: center; margin: 3.5rem 0 0.75rem; } .section__lead--tight { margin-bottom: 2rem; } /* Lista kroków w kartach mechanik */ .card__meta { font-family: var(--font-mono); font-size: 0.8rem; color: var(--muted); margin-bottom: 1rem; display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; } .ctrl-tag { font-family: var(--font-mono); font-size: 0.72rem; color: var(--cyan); background: rgba(var(--cyan-rgb), 0.1); border: 1px solid rgba(var(--cyan-rgb), 0.3); border-radius: 5px; padding: 0.12rem 0.5rem; } .steps-list { list-style: none; counter-reset: step; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; } .steps-list li { counter-increment: step; position: relative; padding-left: 2.4rem; color: var(--muted); font-size: 0.95rem; line-height: 1.55; } .steps-list li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 1.7rem; height: 1.7rem; display: flex; align-items: center; justify-content: center; font-family: var(--font-head); font-size: 0.85rem; font-weight: 700; color: var(--cyan); background: rgba(var(--cyan-rgb), 0.08); border: 1px solid rgba(var(--cyan-rgb), 0.3); border-radius: 50%; } .steps-list strong { color: var(--green); font-weight: 600; } .install-videos { margin-top: 2rem; } /* ============================================================ PRZEŁĄCZNIK JĘZYKA (pionowy pasek z prawej) ============================================================ */ .lang-switch { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 90; display: flex; flex-direction: column; gap: 2px; padding: 4px; background: rgba(var(--bg-rgb), 0.72); border: 1px solid var(--glass-border); border-right: none; border-radius: 12px 0 0 12px; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: -4px 0 24px rgba(0, 0, 0, 0.25); } .lang-switch__btn { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 8px; padding: 0.4rem 0.55rem; min-width: 40px; text-align: center; cursor: pointer; transition: color 0.2s, background 0.2s, border-color 0.2s; } .lang-switch__btn:hover { color: var(--white); background: rgba(var(--cyan-rgb), 0.08); } .lang-switch__btn.is-active { color: var(--cyan); border-color: rgba(var(--cyan-rgb), 0.4); background: rgba(var(--cyan-rgb), 0.12); } .lang-switch__btn:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; } @media (max-width: 600px) { .lang-switch { gap: 1px; padding: 3px; border-radius: 9px 0 0 9px; } .lang-switch__btn { font-size: 0.66rem; min-width: 34px; padding: 0.32rem 0.4rem; } } /* Hide fixed sidebar on mobile — lang switcher lives in hamburger menu */ @media (max-width: 767px) { .lang-switch { display: none; } } /* Language switcher inside hamburger menu (mobile only) */ .navbar__lang-item { display: flex; align-items: center; gap: 4px; padding: 0.6rem 1.5rem 0.6rem; border-top: 1px dashed rgba(var(--cyan-rgb), 0.2); margin-top: 0.25rem; } .navbar__lang-item .lang-switch__btn { font-size: 0.72rem; min-width: 36px; padding: 0.35rem 0.5rem; } @media (min-width: 768px) { .navbar__lang-item { display: none; } } /* Osadzony film YouTube - responsywna ramka 16:9 */ .video-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 0 0 1.25rem; border: 1px solid var(--glass-border); border-radius: var(--radius); overflow: hidden; background: #000; } .video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } /* ============================================================ MODUŁY (aplikacje) - rozbudowane panele ============================================================ */ .modules-detail { display: flex; flex-direction: column; gap: 1.5rem; } .module__tag { display: inline-block; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan); border: 1px solid rgba(var(--cyan-rgb), 0.4); border-radius: 99px; padding: 0.25rem 0.75rem; } .module__tag--red { color: var(--red); border-color: rgba(var(--red-rgb), 0.5); } .module__tag--blue { color: var(--cyan); border-color: rgba(var(--cyan-rgb), 0.5); } .module__tag--kids { color: var(--green); border-color: rgba(var(--green-rgb), 0.5); } .mod { display: grid; grid-template-columns: 1fr; gap: 1.4rem; padding: 2rem 1.75rem; transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition); } .mod:hover { transform: translateY(-3px); border-color: rgba(var(--cyan-rgb), 0.5); box-shadow: 0 0 28px rgba(var(--cyan-rgb), 0.16); } .mod__head { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; margin-bottom: 0.75rem; } .mod__title { font-family: var(--font-head); font-size: 1.45rem; font-weight: 700; letter-spacing: 0.03em; } .mod__text { color: var(--muted); font-size: 0.97rem; } .mod__note { color: var(--white); font-size: 0.92rem; margin-top: 0.9rem; padding-left: 0.9rem; border-left: 2px solid var(--green); } .mod__aside-title { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan); margin-bottom: 0.75rem; } .mod__list { list-style: none; } .mod__list li { position: relative; padding: 0.4rem 0 0.4rem 1.5rem; color: var(--muted); font-size: 0.92rem; border-bottom: 1px dashed rgba(var(--cyan-rgb), 0.12); } .mod__list li::before { content: ">"; position: absolute; left: 0; font-family: var(--font-mono); color: var(--green); } .mod__specs { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); margin-top: 1rem; } /* wiersz pełnej szerokości w panelu (np. lista 10 scenariuszy) */ .mod__full { grid-column: 1 / -1; padding-top: 1.25rem; border-top: 1px dashed rgba(var(--cyan-rgb), 0.18); } .mod__scenarios { list-style: none; display: grid; grid-template-columns: 1fr; gap: 0.3rem 1.5rem; } .mod__scenarios li { font-size: 0.9rem; color: var(--muted); padding: 0.35rem 0; } .mod__scenarios b { color: var(--white); font-weight: 600; } /* CTA branżowy */ .mod--cta { text-align: center; align-items: center; justify-items: center; border-style: dashed; border-color: rgba(var(--green-rgb), 0.45); background: rgba(var(--green-rgb), 0.04); } .mod--cta .mod__head { justify-content: center; } .mod--cta .mod__title { margin-bottom: 0.6rem; } .mod--cta .mod__text { margin-bottom: 1.4rem; max-width: 640px; } .mod--cta:hover { border-color: var(--green); box-shadow: 0 0 26px rgba(var(--green-rgb), 0.18); } /* ============================================================ DLA KOGO ============================================================ */ .audience { list-style: none; display: grid; grid-template-columns: 1fr; gap: 1rem; } .audience__item { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.3rem; transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition); } .audience__item:hover { transform: translateY(-3px); border-color: rgba(var(--cyan-rgb), 0.55); box-shadow: 0 0 22px rgba(var(--cyan-rgb), 0.15); } .audience__icon { font-size: 1.6rem; line-height: 1; flex-shrink: 0; width: 2.4rem; text-align: center; } .audience__label { font-family: var(--font-head); font-weight: 600; font-size: 1.05rem; letter-spacing: 0.02em; } /* ============================================================ FAQ (native details/summary) ============================================================ */ .faq { display: flex; flex-direction: column; gap: 0.9rem; } .faq__item { padding: 0; overflow: hidden; transition: border-color var(--transition); } .faq__item[open] { border-color: rgba(var(--cyan-rgb), 0.5); } .faq__q { list-style: none; cursor: pointer; padding: 1.1rem 1.3rem; font-family: var(--font-head); font-weight: 600; font-size: 1.1rem; letter-spacing: 0.02em; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .faq__q::-webkit-details-marker { display: none; } .faq__q::after { content: "+"; font-family: var(--font-mono); font-size: 1.5rem; color: var(--green); transition: transform var(--transition); flex-shrink: 0; } .faq__item[open] .faq__q::after { transform: rotate(45deg); } .faq__a { padding: 0 1.3rem 1.2rem; color: var(--muted); font-size: 0.97rem; } /* ============================================================ KONTAKT ============================================================ */ .contact-layout { display: grid; gap: 2rem; grid-template-columns: 1fr; } .contact-info { display: flex; flex-direction: column; gap: 1.25rem; } .contact-card { padding: 1.5rem; } .contact-card__title { font-family: var(--font-head); font-size: 1.1rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan); margin-bottom: 0.5rem; } .contact-card__addr { color: var(--muted); font-family: var(--font-mono); font-size: 0.9rem; } .contact-card__addr a { color: var(--muted); } .contact-card__addr a:hover { color: var(--cyan); } .contact-social .contact-card__title { margin-bottom: 0.75rem; } .social-links { display: flex; flex-wrap: wrap; gap: 0.75rem; } .social-link { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--glass-border); border-radius: 6px; color: var(--muted); transition: color var(--transition), border-color var(--transition), box-shadow var(--transition); } .social-link:hover { color: var(--green); border-color: var(--green); box-shadow: 0 0 16px rgba(var(--green-rgb), 0.35); } .map-placeholder { position: relative; flex: 1; /* wypełnia kolumnę, by jej dół zrównał się z formularzem */ min-height: 220px; overflow: hidden; } .map-placeholder iframe { width: 100%; height: 100%; min-height: 220px; border: 0; display: block; filter: invert(0.88) hue-rotate(180deg) saturate(0.7); } [data-theme="light"] .map-placeholder iframe { filter: none; } /* ---------- Formularz ---------- */ .contact-form { padding: 2rem 1.5rem; } /* honeypot - niewidoczne dla ludzi, dostępne dla botów */ .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-field { margin-bottom: 1.25rem; } .form-field label { display: block; font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan); margin-bottom: 0.4rem; } .form-field input, .form-field select, .form-field textarea { width: 100%; min-height: 48px; padding: 0.7rem 0.9rem; background: rgba(var(--bg-rgb), 0.7); border: 1px solid rgba(var(--cyan-rgb), 0.25); border-radius: 6px; color: var(--white); font-family: var(--font-body); font-size: 1rem; transition: border-color var(--transition), box-shadow var(--transition); } .form-field textarea { resize: vertical; min-height: 120px; } .form-field select { appearance: none; cursor: pointer; } .form-field input::placeholder, .form-field textarea::placeholder { color: rgba(155, 176, 193, 0.55); } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 14px rgba(var(--cyan-rgb), 0.3); } .form-status { margin-top: 0.9rem; font-family: var(--font-mono); font-size: 0.85rem; min-height: 1.4em; color: var(--green); } .form-status.is-error { color: var(--red); } #cfSubmit.is-sending .btn__label::after { content: ""; display: inline-block; width: 1.2em; text-align: left; animation: sending-dots 1s steps(4) infinite; } @keyframes sending-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } } /* ============================================================ FOOTER ============================================================ */ .footer { border-top: 1px solid rgba(var(--cyan-rgb), 0.12); padding: 2rem 0; background: var(--bg-deep); } .footer__inner { display: flex; flex-direction: column; align-items: center; gap: 1.25rem; text-align: center; } .footer__brand { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; } .footer__logo { height: 52px; width: auto; } .footer__copy { color: var(--muted); font-size: 0.85rem; font-family: var(--font-mono); } .footer__nav { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; } .footer__nav a { color: var(--muted); font-family: var(--font-head); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.5rem 0.25rem; } .footer__nav a:hover { color: var(--cyan); text-decoration: none; } /* ============================================================ GALERIA - carousel z efektem centrum ============================================================ */ .gallery-wrap { position: relative; padding: 0.5rem 0 2.5rem; overflow: hidden; } .gallery-stage { position: relative; height: 58vw; max-height: 320px; display: flex; align-items: center; justify-content: center; } .gallery-slide { position: absolute; top: 50%; left: 50%; overflow: hidden; border-radius: var(--radius); border: 1px solid var(--glass-border); transition: all 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* default hidden */ opacity: 0; pointer-events: none; z-index: 1; /* center */ width: min(88vw, 480px); aspect-ratio: 8 / 5; transform: translate(-50%, -50%) scale(0.6); } .gallery-slide { background: var(--bg2); } .gallery-slide img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform 0.4s ease; } .gallery-slide[data-pos="0"] { opacity: 1; pointer-events: auto; z-index: 5; transform: translate(-50%, -50%) scale(1); border-color: rgba(var(--cyan-rgb), 0.45); box-shadow: 0 0 40px rgba(var(--cyan-rgb), 0.2), 0 8px 32px rgba(0,0,0,0.5); } .gallery-slide[data-pos="0"] img:hover { transform: scale(1.03); } .gallery-slide[data-pos="1"] { opacity: 0; z-index: 0; transform: translate(25%, -50%) scale(0.7); } .gallery-slide[data-pos="-1"] { opacity: 0; z-index: 0; transform: translate(-125%, -50%) scale(0.7); } .gallery-slide[data-pos="2"], .gallery-slide[data-pos="-2"] { opacity: 0; pointer-events: none; } /* Gallery controls */ .gallery-ui { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 1.25rem 1rem 0; } .gallery-btn { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex-shrink: 0; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 50%; color: var(--cyan); cursor: pointer; transition: color var(--transition), border-color var(--transition), box-shadow var(--transition), background var(--transition); } .gallery-btn:hover { color: var(--green); border-color: var(--green); box-shadow: 0 0 16px rgba(var(--green-rgb), 0.35); background: rgba(var(--green-rgb), 0.06); } :root[data-theme="contrast"] .gallery-btn { border-color: #fff; } .gallery-caption { font-family: var(--font-head); font-size: 1rem; font-weight: 600; letter-spacing: 0.03em; text-align: center; color: var(--white); flex: 1; min-height: 1.4em; max-width: 600px; transition: opacity 0.3s; } .gallery-dots { display: flex; justify-content: center; gap: 0.55rem; padding-top: 1.1rem; } .gallery-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(var(--cyan-rgb), 0.25); border: 1px solid rgba(var(--cyan-rgb), 0.4); cursor: pointer; padding: 0; transition: background var(--transition), transform var(--transition), border-color var(--transition); } .gallery-dot.is-active { background: var(--cyan); border-color: var(--cyan); transform: scale(1.4); } :root[data-theme="contrast"] .gallery-dot { border-color: #fff; } :root[data-theme="contrast"] .gallery-dot.is-active { background: #fff; border-color: #fff; } /* --- Tablet+ --- */ @media (min-width: 640px) { .gallery-stage { height: 320px; max-height: 360px; } .gallery-slide { width: 500px; } .gallery-slide[data-pos="1"] { opacity: 0.55; pointer-events: auto; z-index: 4; transform: translate(calc(-50% + 400px), -50%) scale(0.72); } .gallery-slide[data-pos="-1"] { opacity: 0.55; pointer-events: auto; z-index: 4; transform: translate(calc(-50% - 400px), -50%) scale(0.72); } .gallery-slide[data-pos="2"] { opacity: 0.25; pointer-events: auto; z-index: 3; transform: translate(calc(-50% + 700px), -50%) scale(0.5); } .gallery-slide[data-pos="-2"] { opacity: 0.25; pointer-events: auto; z-index: 3; transform: translate(calc(-50% - 700px), -50%) scale(0.5); } } /* --- Desktop --- */ @media (min-width: 1024px) { .gallery-stage { height: 400px; max-height: 440px; } .gallery-slide { width: 640px; } .gallery-slide[data-pos="1"] { transform: translate(calc(-50% + 540px), -50%) scale(0.7); } .gallery-slide[data-pos="-1"] { transform: translate(calc(-50% - 540px), -50%) scale(0.7); } .gallery-slide[data-pos="2"] { transform: translate(calc(-50% + 940px), -50%) scale(0.48); opacity: 0.2; } .gallery-slide[data-pos="-2"] { transform: translate(calc(-50% - 940px), -50%) scale(0.48); opacity: 0.2; } } /* ============================================================ SCROLL REVEAL ============================================================ */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.65s ease, transform 0.65s ease; } .reveal.is-visible { opacity: 1; transform: none; } /* ============================================================ PREFERS-REDUCED-MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; } .scanlines { display: none; } .hero__grid, .hero__dots, .hero__logo { animation: none; } .reveal { opacity: 1; transform: none; } } /* ============================================================ BREAKPOINTY ============================================================ */ /* ≥480px */ @media (min-width: 480px) { .stats__inner { gap: 2rem 1.5rem; } } /* ≥768px */ @media (min-width: 768px) { .container { padding: 0 2rem; } .section { padding: 5.5rem 0; } .cards-grid--2 { grid-template-columns: repeat(2, 1fr); } .cards-grid--3 { grid-template-columns: repeat(3, 1fr); } .cards-grid--4 { grid-template-columns: repeat(2, 1fr); } .mod { grid-template-columns: 1.5fr 1fr; gap: 2.5rem; align-items: start; } .mod--cta { grid-template-columns: 1fr; } .mod__scenarios { grid-template-columns: repeat(2, 1fr); } .mod__scenarios li { border-bottom: 1px dashed rgba(var(--cyan-rgb), 0.1); } .stats__inner { grid-template-columns: repeat(4, 1fr); } .audience { grid-template-columns: repeat(2, 1fr); } .contact-layout { grid-template-columns: 1fr 1fr; align-items: stretch; } .footer__inner { flex-direction: row; justify-content: space-between; text-align: left; } .footer__brand { align-items: flex-start; } } /* ≥1024px */ @media (min-width: 1024px) { .cards-grid--4 { grid-template-columns: repeat(4, 1fr); } .audience { grid-template-columns: repeat(3, 1fr); } /* Menu poziome dopiero od 1024px — poniżej zostaje czytelny hamburger, żeby dłuższe języki (np. UA) nie wypychały pozycji poza ekran ani nie zmuszały do skalowania logo. */ .navbar__toggle { display: none; } .navbar__menu { position: static; flex-direction: row; flex-wrap: nowrap; background: none; border: none; padding: 0; transform: none; opacity: 1; visibility: visible; gap: 0.1rem; } .navbar__link { padding: 0.45rem 0.55rem; font-size: 0.9rem; letter-spacing: 0.03em; } } /* ≥1280px */ @media (min-width: 1280px) { .container { max-width: 1240px; } .section { padding: 6.5rem 0; } .navbar__menu { gap: 0.2rem; } .navbar__link { padding: 0.5rem 0.85rem; font-size: 0.95rem; letter-spacing: 0.06em; } } /* ============================================================ DRON - hero showcase ============================================================ */ /* --- Drone showcase section --- */ .drone-section__inner { display: flex; flex-direction: column; align-items: center; gap: 3rem; } .drone-section__text { max-width: 520px; } .drone-section__tag { font-family: var(--font-mono); font-size: 0.82rem; color: var(--green); letter-spacing: 0.15em; margin-bottom: 0.75rem; } .drone-section__title { font-family: var(--font-head); font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.1; margin-bottom: 1rem; } .drone-section__lead { color: var(--muted); font-size: 1.05rem; line-height: 1.75; margin-bottom: 1.5rem; } .text--red { color: var(--red); } .text--blue { color: var(--cyan); } .drone-section__feats { list-style: none; display: flex; flex-direction: column; gap: 0.65rem; } .drone-section__feats li { display: flex; align-items: center; gap: 0.75rem; font-family: var(--font-mono); font-size: 0.88rem; color: var(--muted); } .feat-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .feat-dot--red { background: var(--red); box-shadow: 0 0 8px rgba(var(--red-rgb),0.7); } .feat-dot--blue { background: var(--cyan); box-shadow: 0 0 8px rgba(var(--cyan-rgb),0.7); } .feat-dot--green { background: var(--green); box-shadow: 0 0 8px rgba(var(--green-rgb),0.7); } .feat-dot--cyan { background: var(--cyan); box-shadow: 0 0 8px rgba(var(--cyan-rgb),0.5); } .drone-section__visual { width: 100%; display: flex; justify-content: center; } @media (min-width: 1024px) { .drone-section__inner { flex-direction: row; align-items: center; gap: 4rem; } .drone-section__text { flex: 0 0 42%; max-width: 42%; } .drone-section__visual { flex: 1; } } /* --- Wrapper: kryje ostre białe rogi obrazka, dodaje glow --- */ .drone-wrap { position: relative; width: 100%; max-width: 560px; border-radius: 20px; overflow: hidden; /* glowing cyber ring */ box-shadow: 0 0 0 1px rgba(46,139,230,0.45), 0 0 40px rgba(46,139,230,0.28), 0 0 80px rgba(46,139,230,0.14), 0 0 60px rgba(255,59,92,0.15); animation: drone-ring-pulse 4s ease-in-out infinite; } @keyframes drone-ring-pulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(46,139,230,0.45), 0 0 40px rgba(46,139,230,0.28), 0 0 80px rgba(46,139,230,0.14), 0 0 60px rgba(255,59,92,0.15); } 50% { box-shadow: 0 0 0 1px rgba(46,139,230,0.7), 0 0 60px rgba(46,139,230,0.45), 0 0 120px rgba(46,139,230,0.22), 0 0 80px rgba(255,59,92,0.28); } } /* Inset vignette - ściemnia krawędzie, ukrywa białe tło na bokach */ .drone-wrap::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(ellipse 90% 88% at 50% 46%, transparent 42%, rgba(0,0,12,0.72) 72%, rgba(0,0,12,0.95) 100%); pointer-events: none; z-index: 3; } /* Light theme: białe tło pasuje naturalnie */ [data-theme="light"] .drone-wrap::after { background: radial-gradient(ellipse 90% 88% at 50% 46%, transparent 45%, rgba(200,215,230,0.5) 72%, rgba(200,215,230,0.9) 100%); } [data-theme="light"] .drone-wrap { box-shadow: 0 0 0 1px rgba(13,99,196,0.3), 0 0 30px rgba(13,99,196,0.18), 0 8px 40px rgba(0,0,0,0.15); } /* --- Dron: animacja --- */ .drone-img { display: block; width: 100%; height: auto; position: relative; z-index: 1; transform-origin: center 45%; /* Fly-in + hover w sekwencji */ animation: drone-fly-in 2s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both, drone-hover 5s ease-in-out 2.5s infinite; } /* Start: wlatuje z góry-prawej po skosie */ @keyframes drone-fly-in { 0% { opacity: 0; transform: translate(55px, -70px) rotate(-10deg) scale(0.78); filter: blur(6px) brightness(1.8); } 60% { opacity: 1; filter: blur(0) brightness(1); } 80% { transform: translate(-6px, 5px) rotate(1.5deg) scale(1.015); } 100% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(1); filter: blur(0) brightness(1); } } /* Wieczne unoszenie się + lekki przechył */ @keyframes drone-hover { 0% { transform: translateY(0) rotate(-1.2deg); } 25% { transform: translateY(-10px) rotate(0.4deg); } 50% { transform: translateY(-18px) rotate(1.4deg); } 75% { transform: translateY(-8px) rotate(-0.2deg); } 100% { transform: translateY(0) rotate(-1.2deg); } } /* Cień pod dronem - synchronizowany z hover */ .drone-wrap::before { content: ''; position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%); width: 55%; height: 6%; background: radial-gradient(ellipse, rgba(46,139,230,0.45) 0%, rgba(255,59,92,0.25) 40%, transparent 72%); filter: blur(14px); z-index: 0; animation: drone-shadow 5s ease-in-out 2.5s infinite; } @keyframes drone-shadow { 0% { opacity: 0.7; transform: translateX(-50%) scaleX(1.0); } 50% { opacity: 0.3; transform: translateX(-50%) scaleX(0.75); } 100% { opacity: 0.7; transform: translateX(-50%) scaleX(1.0); } } /* Ukryj cień przed lądowaniem */ .drone-wrap[data-landed="false"]::before { opacity: 0; } /* --- HUD Corners --- */ .drone-hud { position: absolute; inset: 0; z-index: 4; pointer-events: none; } .drone-hud__corner { position: absolute; width: 22px; height: 22px; border-color: var(--cyan); border-style: solid; opacity: 0; transition: opacity 0.4s ease; } .drone-wrap.is-landed .drone-hud__corner { opacity: 1; } .drone-hud__corner--tl { top: 10px; left: 10px; border-width: 2px 0 0 2px; } .drone-hud__corner--tr { top: 10px; right: 10px; border-width: 2px 2px 0 0; border-color: var(--red); } .drone-hud__corner--bl { bottom: 10px; left: 10px; border-width: 0 0 2px 2px; } .drone-hud__corner--br { bottom: 10px; right: 10px; border-width: 0 2px 2px 0; border-color: var(--red); } .drone-hud__label { position: absolute; left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cyan); opacity: 0; white-space: nowrap; transition: opacity 0.6s ease 0.3s; background: rgba(0,0,12,0.55); padding: 0.2em 0.7em; border-radius: 3px; } .drone-wrap.is-landed .drone-hud__label { opacity: 1; } .drone-hud__label--top { top: 14px; } .drone-hud__label--bot { bottom: 14px; color: var(--red); } /* Scanning line (przebiegająca linia skanowania) */ .drone-hud::after { content: ''; position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(46,139,230,0.7), rgba(255,59,92,0.5), transparent); top: 0; opacity: 0; animation: none; } .drone-wrap.is-landed .drone-hud::after { opacity: 1; animation: drone-scan 3.5s ease-in-out infinite 1s; } @keyframes drone-scan { 0% { top: 10%; opacity: 0.8; } 50% { top: 88%; opacity: 0.5; } 100% { top: 10%; opacity: 0.8; } } /* Mobile: mniejszy dron */ @media (max-width: 767px) { .drone-wrap { max-width: 380px; } .drone-hud__label { font-size: 0.55rem; } .drone-hud__corner { width: 16px; height: 16px; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .drone-img { animation: none !important; opacity: 1 !important; transform: none !important; } .drone-wrap, .drone-wrap::before { animation: none !important; } .drone-wrap.is-landed .drone-hud__corner, .drone-wrap.is-landed .drone-hud__label { opacity: 1; } .drone-wrap.is-landed .drone-hud::after { animation: none !important; opacity: 0.5; top: 50%; } }