/*============================================================== Alphacon — warstwa marki na szablonie „Secur" -------------------------------------------------------------- Ładowana JAKO OSTATNIA, po bootstrap.min.css i style.css. Szablon jest sterowany zmiennymi CSS, więc większość retheme'u robi się przez podmianę tokenów — a nie przez walkę z selektorami. Paleta pochodzi ze zdjęcia badge'a w IMSAI 8080: czerwień i błękit przełączników, bursztyn lampek, ciepła szarość obudowy. Czerń jest ciepła, nie niebieskawa — to sama w sobie największa różnica wobec poprzedniej wersji, w której wszystko było przygaszonym błękitem. Kolor niesie znaczenie, nie dekorację: czerwony = ofensywa, niebieski = defensywa, bursztyn = retro Ten sam klucz obowiązuje w kartach, kropkach agendy i chipach. Motyw: data-theme="dark" (domyślny) albo "light" na . Ustawia go skrypt inline w , żeby nie mrugało przy wejściu. ==============================================================*/ /*-------------------------------------------------------------- 1. Tokeny --------------------------------------------------------------*/ /* --- ciemny (domyślny) --- Ten sam blok obsługuje dwie rzeczy: motyw ciemny ORAZ pas odwrócony wewnątrz motywu jasnego. Dzięki temu każda paleta jest zapisana raz. */ :root, [data-theme="dark"], [data-theme="light"] .ac-invert { --ac-bg: #14100d; --ac-surface: #1c1712; --ac-card: #231c17; --ac-line: #3a2f26; --ac-line2: #2b231c; --ac-inputborder: #46392b; --ac-ink: #f7f2ea; --ac-strong: #ddd3c5; --ac-muted: #a89c8c; --ac-faint: #9a8b79; /* akcent tekstowy — bursztyn lampki, ~10:1 na ciepłej czerni */ --ac-acc: #ffab1f; --ac-acc-soft: rgba(255, 171, 31, 0.35); --ac-acc-wash: rgba(255, 171, 31, 0.09); /* przycisk: rozjaśniona czerwień z ciemnym tekstem — jak etykieta ostrzegawcza na sprzęcie. Biały tekst na #e0402f dałby 4,2:1. */ --ac-btn-bg: #ff5c45; --ac-btn-bg-hover: #ff7f6c; --ac-btn-ink: #1a0d09; /* kategorie */ --ac-red: #e0402f; --ac-blue: #3a7bd5; --ac-amber: #ffab1f; --ac-red-text: #ff7a66; --ac-blue-text: #7db0ee; --ac-amber-text: #ffab1f; /* panel IMSAI */ --ac-panel-bg: #0d0a07; --ac-panel-face: #1a140f; --ac-panel-slot: #241c15; --ac-panel-dim: #948674; /* Dioda świeci tym samym kolorem w obu motywach — panel jest sprzętem, a nie elementem interfejsu, więc nie może iść za --ac-amber, które w motywie jasnym robi się ciemnobrązowe. */ --ac-led-on: #ffab1f; --ac-led-off: #33281b; --ac-screw: #3f3427; /* terminal — bursztynowy CRT, ciemny w obu motywach */ --ac-term: #ffb31f; --ac-term-rgb: 255 179 31; --ac-term-dim: #ab7a2b; --ac-term-bg: #120d07; --ac-navbg: rgba(20, 16, 13, 0.86); --ac-shadow: rgba(0, 0, 0, 0.45); --ac-font-display: 'Space Grotesk', system-ui, sans-serif; --ac-font-body: 'IBM Plex Sans', system-ui, sans-serif; --ac-font-mono: 'JetBrains Mono', ui-monospace, monospace; } /* --- jasny — i pas odwrócony wewnątrz motywu ciemnego --- */ [data-theme="light"], [data-theme="dark"] .ac-invert { --ac-bg: #f4eee3; --ac-surface: #eae2d3; --ac-card: #fdfaf4; --ac-line: #d3c7b4; --ac-line2: #ded4c3; --ac-inputborder: #c2b49d; --ac-ink: #17130f; --ac-strong: #332c24; --ac-muted: #5c5449; --ac-faint: #6b6255; --ac-acc: #8f5300; --ac-acc-soft: rgba(143, 83, 0, 0.35); --ac-acc-wash: rgba(143, 83, 0, 0.07); --ac-btn-bg: #c9301f; --ac-btn-bg-hover: #a52618; --ac-btn-ink: #ffffff; --ac-red: #c9301f; --ac-blue: #2f66b5; --ac-amber: #b06a00; --ac-red-text: #b32a1a; --ac-blue-text: #2a5da6; --ac-amber-text: #8f5300; --ac-panel-bg: #17130f; --ac-panel-face: #241c15; --ac-panel-slot: #2e2419; --ac-panel-dim: #9a8b76; --ac-led-on: #ffab1f; --ac-led-off: #3b2f20; --ac-screw: #564835; --ac-navbg: rgba(244, 238, 227, 0.88); --ac-shadow: rgba(60, 45, 25, 0.14); } /* --- mapowanie tokenów szablonu (podąża za motywem samo) --- */ :root { --theme-color: var(--ac-acc); /* theme-color2 był różowy (#E0009B) i napędzał wszystkie gradienty */ --theme-color2: var(--ac-red); --title-color: var(--ac-ink); --body-color: var(--ac-muted); --smoke-color: var(--ac-surface); --black-color2: var(--ac-card); --light-color: var(--ac-faint); --ot-border-color: var(--ac-line); --ot-body-background: var(--ac-bg); --success-color: var(--ac-amber); --title-font: var(--ac-font-display); --body-font: var(--ac-font-body); --main-container: 1180px; --section-space: 84px; --section-space-mobile: 56px; --section-title-space: 34px; } /*-------------------------------------------------------------- 1b. Pas odwrócony Jedno mocne przełamanie w połowie strony robi więcej niż dziesięć niuansów tła. Kolory tej sekcji siedzą w blokach tokenów wyżej — każda paleta jest wpisana raz i obsługuje zarówno swój motyw, jak i pas odwrócony w motywie przeciwnym. Tutaj zostaje sama mechanika. --------------------------------------------------------------*/ .ac-invert { background-color: var(--ac-bg) !important; border-top: 1px solid var(--ac-line2); border-bottom: 1px solid var(--ac-line2); } /*-------------------------------------------------------------- 2. Podstawy --------------------------------------------------------------*/ html { scroll-behavior: smooth; } body { font-family: var(--ac-font-body); font-size: 15.5px; line-height: 1.62; color: var(--ac-muted); background: var(--ac-bg); } ::selection { background: var(--ac-acc); color: #14100d; } a { text-decoration: none; } /* Widoczny focus w obu motywach — szablon nie dawał żadnego */ :focus-visible { outline: 2px solid var(--ac-acc); outline-offset: 2px; border-radius: 2px; } h1, h2, h3, h4, h5, h6, .sec-title, .box-title, .hero-title { font-family: var(--ac-font-display); color: var(--ac-ink); letter-spacing: -0.02em; } .sec-title { font-size: clamp(26px, 3vw, 34px); font-weight: 700; line-height: 1.18; max-width: 640px; } .text-center .sec-title, .ac-center-text { margin-left: auto; margin-right: auto; } .sec-text { font-family: var(--ac-font-body); color: var(--ac-muted); font-size: 15.5px; line-height: 1.62; } /* Globalne `a { text-decoration: none }` (niżej) zrobiłoby z linku w akapicie tekst nie do odróżnienia od reszty. To samo traktowanie co w .ac-mono-note a. */ .sec-text a { color: var(--ac-acc); border-bottom: 1px solid var(--ac-acc-soft); } .ac-center-text { max-width: 560px; } .box-title { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; } .box-text { font-family: var(--ac-font-body); color: var(--ac-muted); font-size: 14.5px; line-height: 1.6; } .bg-smoke { background-color: var(--ac-surface) !important; border-top: 1px solid var(--ac-line2); border-bottom: 1px solid var(--ac-line2); } .shape-mockup.bg-gradient-shape1 { opacity: 0.05; } /*-------------------------------------------------------------- 3. Kicker „// sekcja", numer sekcji, noty mono --------------------------------------------------------------*/ .ac-kicker { font-family: var(--ac-font-mono); font-size: 11.5px; font-weight: 500; color: var(--ac-acc); letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 12px; } .ac-kicker-center { text-align: center; } /* Nagłówek sekcji z numerem w gutterze — zamiast siódmego z rzędu wyśrodkowanego kickera. Numer jest dekoracją, więc siedzi w ::before i nie trafia do drzewa dostępności ani do zaznaczenia. */ .ac-sechead { position: relative; padding-left: 62px; margin-bottom: 34px; max-width: 760px; } .ac-sechead::before { content: attr(data-no); position: absolute; left: 0; top: 1px; font-family: var(--ac-font-mono); font-size: 13px; font-weight: 600; letter-spacing: 0.14em; color: var(--ac-faint); border-top: 2px solid var(--ac-acc); padding-top: 9px; width: 42px; } .ac-sechead .sec-title { max-width: 620px; } .ac-sechead .sec-text { margin-top: 12px; max-width: 620px; } @media (max-width: 575px) { .ac-sechead { padding-left: 0; padding-top: 34px; } .ac-sechead::before { top: 0; } } .ac-mono-note { font-family: var(--ac-font-mono); font-size: 12.5px; line-height: 1.6; color: var(--ac-faint); margin: 26px 0 0; } .ac-mono-note-left { text-align: left; margin-top: 16px; } .ac-mono-note a { color: var(--ac-acc); border-bottom: 1px solid var(--ac-acc-soft); } /* Mono-nota z kilku linii.
dopuszcza tylko jeden
, więc kolejne wiersze podpisu są blokami w środku, nie osobnymi elementami. */ .ac-mono-line { display: block; } .ac-mono-line + .ac-mono-line { margin-top: 6px; } .ac-note { font-family: var(--ac-font-display); font-size: 17px; font-weight: 600; color: var(--ac-strong); } /*-------------------------------------------------------------- 4. Przyciski i linki --------------------------------------------------------------*/ .ot-btn { font-family: var(--ac-font-display) !important; font-size: 15px !important; font-weight: 600 !important; border-radius: 3px !important; background: var(--ac-btn-bg) !important; color: var(--ac-btn-ink) !important; padding: 14px 24px !important; min-height: 48px !important; min-width: 0 !important; text-transform: none !important; transition: background-color .15s ease; } .ot-btn:hover { background: var(--ac-btn-bg-hover) !important; color: var(--ac-btn-ink) !important; } .ot-btn:before, .ot-btn:after { display: none !important; } .ac-ghost-link { font-family: var(--ac-font-mono); font-size: 13.5px; color: var(--ac-strong); border-bottom: 1px solid var(--ac-inputborder); padding-bottom: 3px; transition: border-color .15s, color .15s; } .ac-ghost-link:hover { color: var(--ac-ink); border-color: var(--ac-acc); } .ac-forward-link { display: inline-block; font-family: var(--ac-font-mono); font-size: 13px; color: var(--ac-acc); transition: color .15s; } .ac-forward-link:hover { color: var(--ac-ink); } /*-------------------------------------------------------------- 5. Nagłówek — sticky glass + przełącznik motywu --------------------------------------------------------------*/ .ot-header, .ot-header .menu-area { background: var(--ac-navbg); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--ac-line); } .ot-header .menu-area { padding: 12px 0; } .header-logo img { height: 34px; width: auto; display: block; filter: var(--ac-logofilter, none); } .ac-nav { display: flex; gap: 24px; align-items: center; flex-wrap: wrap; } .ac-nav a { font-family: var(--ac-font-mono); font-size: 13px; color: var(--ac-muted); transition: color .15s; } .ac-nav a:hover { color: var(--ac-acc); } /* Przełącznik motywu. Przytrzymany 1,5 s przełącza skórkę zamiast motywu — pasek postępu rysuje ::after, szerokość animuje --hold-ms z JS. */ .ac-theme { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; overflow: hidden; background: transparent; border: 1px solid var(--ac-line); border-radius: 4px; color: var(--ac-muted); cursor: pointer; flex: 0 0 auto; transition: color .15s, border-color .15s; } .ac-theme:hover { color: var(--ac-acc); border-color: var(--ac-acc); } .ac-theme svg { width: 16px; height: 16px; display: block; } [data-theme="dark"] .ac-theme .ac-ico-moon, [data-theme="light"] .ac-theme .ac-ico-sun { display: none; } .ac-theme::after { content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--ac-acc); } .ac-theme.holding::after { width: 100%; transition: width var(--hold-ms, 1500ms) linear; } /* strona treściowa nie ma nawigacji kotwicowej — przełącznik dosiada się do przycisku powrotu */ .ac-doc-actions { display: flex; align-items: center; gap: 12px; } .ot-header .header-button .ot-btn { display: inline-flex !important; padding: 10px 18px !important; min-height: 40px !important; font-size: 14px !important; white-space: nowrap; } /* Poniżej 992px nawigacja kotwicowa schodzi do drugiego rzędu i scrolluje poziomo — CTA „Dołącz" zostaje widoczne zawsze (w szablonie znikało). Uwaga: order/width trzeba ustawiać na KOLUMNIE (.ac-nav-col), bo to ona jest dzieckiem flexowego .row — nie na samym