/* Nox Arcade — paleta i typografia przeniesione 1:1 z projektu. Motyw sterowany atrybutem data-theme na . */ :root { --ink: #221C15; --cream: #ECDFC0; --brick: #7C2A22; --brass: #C68A2E; --alarm: #E2725B; --display: Bungee, "Arial Black", sans-serif; --body: Arvo, Georgia, serif; --utility: "Special Elite", "Courier New", monospace; } html[data-theme="dark"] { --bg: var(--ink); --dot: #ECDFC022; --accent: var(--brass); --banner-bg: var(--brick); --heading: var(--cream); --input-bg: var(--cream); --pill-bg: var(--brick); } html[data-theme="light"] { --bg: var(--cream); --dot: #00000022; --accent: var(--brick); --banner-bg: var(--ink); --heading: var(--ink); --input-bg: #FFF8E6; --pill-bg: var(--ink); } *, *::before, *::after { box-sizing: border-box; } /* Przybliżenie x2 całej strony — odpowiednik Ctrl "+" w przeglądarce. Wszystko poniżej (fonty, odstępy, obramowania) skaluje się proporcjonalnie. */ html { zoom: 2; } body { margin: 0; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--bg); transition: background 200ms ease; } /* --- karta -------------------------------------------------------------- */ .card { position: relative; width: 900px; max-width: 100%; min-height: 600px; padding: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; overflow: hidden; border: 6px solid var(--ink); background: radial-gradient(var(--dot) 1.4px, transparent 1.4px) 0 0 / 14px 14px, var(--bg); box-shadow: 0 20px 60px rgba(0, 0, 0, .35); } /* --- przełącznik motywu -------------------------------------------------- */ .theme-toggle { position: absolute; top: 40px; right: 24px; z-index: 2; display: flex; align-items: center; gap: 8px; padding: 8px 16px; font-family: var(--display); font-size: 12px; color: var(--cream); background: var(--pill-bg); border: 2px solid var(--accent); border-radius: 20px; cursor: pointer; } .theme-toggle:hover { filter: brightness(1.15); } /* --- pasek "już wkrótce" ------------------------------------------------- */ .banner { position: absolute; top: 28px; left: -2%; width: 104%; z-index: 1; padding: 10px 0; background: var(--banner-bg); border-top: 3px solid var(--accent); border-bottom: 3px solid var(--accent); transform: rotate(-2deg); box-shadow: 0 6px 14px rgba(0, 0, 0, .25); overflow: hidden; } .banner__track { display: flex; width: max-content; animation: marquee 26s linear infinite; } .banner__track span { padding-right: 24px; white-space: nowrap; font-family: var(--display); font-size: 15px; letter-spacing: 3px; color: var(--cream); } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* --- treść --------------------------------------------------------------- */ .logo { width: 240px; height: auto; margin: 64px 0 24px; } .logo--small { width: 160px; margin: 0 0 24px; } h1 { margin: 0 0 16px; font-family: var(--display); font-size: 36px; line-height: 1.3; color: var(--heading); } .lede { max-width: 480px; margin: 0 0 36px; font-family: var(--body); font-size: 17px; line-height: 1.6; color: var(--heading); opacity: .85; } /* --- formularz ----------------------------------------------------------- */ .signup { display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 460px; margin-bottom: 16px; } .signup__row { display: flex; align-items: stretch; width: 100%; max-width: 420px; min-height: 52px; border: 3px solid var(--accent); border-radius: 6px; background: var(--input-bg); overflow: hidden; } .signup input[type="email"] { flex: 1; min-width: 0; padding: 16px 18px; border: none; outline: none; background: transparent; font-family: var(--body); font-size: 15px; color: var(--ink); } .signup input::placeholder { color: #221C1580; } .signup button { flex-shrink: 0; padding: 0 24px; border: none; background: var(--brick); font-family: var(--display); font-size: 14px; color: var(--cream); cursor: pointer; } .signup button:hover { filter: brightness(1.15); } .signup button:disabled { opacity: .6; cursor: progress; } .signup.is-invalid .signup__row { border-color: var(--alarm); } /* --- zgoda --------------------------------------------------------------- */ .consent { display: flex; align-items: flex-start; gap: 10px; width: 100%; margin: 16px 0 12px; padding: 12px 14px; border: 2px solid transparent; border-radius: 6px; text-align: left; font-family: var(--body); font-size: 13px; line-height: 1.55; color: var(--heading); opacity: .9; cursor: pointer; } .consent input[type="checkbox"] { flex-shrink: 0; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--brick); cursor: pointer; } .signup.needs-consent .consent { border-color: var(--alarm); background: rgba(226, 114, 91, .12); } .legal { width: 100%; margin: 0; text-align: left; font-family: var(--body); font-size: 11.5px; line-height: 1.65; color: var(--heading); opacity: .68; } .legal a, .page-footer a, .back-link { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; } /* Potwierdzenie zajmuje miejsce formularza po wysłaniu. */ .confirmation { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; max-width: 420px; min-height: 52px; margin-bottom: 16px; padding: 12px 18px; border: 3px solid var(--accent); border-radius: 6px; background: var(--input-bg); font-family: var(--display); font-size: 14px; line-height: 1.4; color: var(--ink); } .status { max-width: 420px; margin: 0 0 12px; font-family: var(--utility); font-size: 13px; line-height: 1.5; color: var(--heading); } .status[hidden] { display: none; } .status.is-error { color: var(--alarm); } /* --- stopka -------------------------------------------------------------- */ .meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; margin: 12px 0 24px; font-family: var(--utility); font-size: 13px; color: var(--accent); } .socials { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; } .pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; border: 2px solid var(--accent); border-radius: 24px; background: var(--pill-bg); font-family: var(--display); font-size: 13px; color: var(--cream); text-decoration: none; } .pill:hover { filter: brightness(1.15); } .page-footer { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 24px; font-family: var(--utility); font-size: 12px; color: var(--heading); opacity: .7; } /* --- strona z komunikatem ------------------------------------------------ */ .card--message { justify-content: center; } .message-heading { margin: 0 0 16px; font-family: var(--display); font-size: 30px; color: var(--heading); } .message-heading.error { color: var(--alarm); } .message-extra { max-width: 460px; margin: -16px 0 28px; font-family: var(--body); font-size: 13.5px; line-height: 1.6; color: var(--heading); opacity: .8; } .message-extra a { color: var(--accent); text-underline-offset: 2px; } /* --- polityka prywatności ------------------------------------------------ */ .card--prose { justify-content: flex-start; align-items: flex-start; text-align: left; padding: 56px 64px 48px; min-height: 0; } .card--prose h1 { font-size: 30px; margin: 24px 0 8px; } .card--prose h2 { margin: 32px 0 10px; font-family: var(--display); font-size: 15px; letter-spacing: 1px; color: var(--accent); } .card--prose p, .card--prose li { font-family: var(--body); font-size: 14.5px; line-height: 1.7; color: var(--heading); opacity: .9; } .card--prose p { margin: 0 0 12px; max-width: 68ch; } .card--prose ul { margin: 0 0 12px; padding-left: 22px; max-width: 68ch; } .card--prose li { margin-bottom: 8px; } .prose-meta { font-family: var(--utility) !important; font-size: 12px !important; color: var(--accent) !important; opacity: 1 !important; } .prose-intro { font-size: 16px !important; } .back-link { font-family: var(--display); font-size: 12px; letter-spacing: 1px; } .card--prose .page-footer { margin-top: 40px; justify-content: flex-start; } /* --- dostępność ---------------------------------------------------------- */ :focus-visible { outline: 3px solid var(--brass); outline-offset: 3px; } .signup__row:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { .banner__track { animation: none; } * { transition: none !important; } } /* --- mniejsze ekrany ------------------------------------------------------ */ /* Próg podniesiony z 720px do 1440px: przy zoom:2 media query widzi efektywną szerokość viewportu podzieloną przez 2, więc żeby breakpoint nadal trafiał w te same fizyczne ekrany, trzeba go podwoić. */ @media (max-width: 1440px) { body { padding: 12px; } .card { min-height: 0; padding: 40px 24px 48px; border-width: 4px; } .card--prose { padding: 32px 22px 40px; } .theme-toggle { top: 16px; right: 16px; } .banner { top: 76px; } .logo { width: 180px; margin: 104px 0 20px; } .logo--small { width: 130px; margin: 0 0 20px; } h1 { font-size: 26px; } .card--prose h1 { font-size: 24px; } .lede { font-size: 15px; margin-bottom: 28px; } .signup__row { flex-direction: column; } .signup button { padding: 14px 24px; } }