/*==============================================================
alphacon-skins.css — cztery skórki spod konsoli „/"
--------------------------------------------------------------
Ładowany zwykłym zaraz po alphacon.css. Wcześniej doczytywał się
leniwie, ale domyślnym wyglądem strony jest teraz `phosphor`, więc ten
arkusz niesie to, co widać przy pierwszym malowaniu — leniwe ładowanie
dałoby mignięcie paletą IMSAI przy każdym wejściu.
`klasyk` (brak atrybutu data-skin) to nie „wyłączone skórki", tylko
jedna z opcji: paleta IMSAI z alphacon.css.
Każda skórka ma PEŁNĄ PARĘ palet — jasną i ciemną — i respektuje
przełącznik motywu dokładnie tak jak wygląd domyślny. To dwie
niezależne osie: skórka zmienia charakter (kolor, typografię,
fakturę), motyw zmienia biegunowość. Kombinacji jest dziesięć.
Każda paleta jest zapisana RAZ i obsługuje dwie rzeczy naraz: swój
motyw oraz pas odwrócony (.ac-invert) w motywie przeciwnym. Stąd
sparowane selektory w rodzaju:
html[data-skin="zine"][data-theme="light"],
html[data-skin="zine"][data-theme="dark"] .ac-invert { … }
Panel IMSAI i karta terminala zostają ciemne w obu motywach — to
sprzęt, nie element interfejsu, i tak samo robi wygląd domyślny.
Skórki NIE ładują fontów z zewnątrz. Alphasec.pl ciągnie kroje
skórek z Google Fonts; tutaj wszystko jest self-hostowane i tak
ma zostać (patrz polityka prywatności), więc korzystamy wyłącznie
z tego, co już leży w assets/fonts: VT323, JetBrains Mono,
Space Grotesk, IBM Plex Sans.
Selektory mają przedrostek html. Sam atrybut ma tę samą specyficzność
co [data-theme="…"] i :root z alphacon.css, więc o remisach decydowałaby
kolejność arkuszy. Dziś kolejność jest po naszej stronie, ale przedrostek
zostaje: kosztuje nic, a rozstrzyga sprawę niezależnie od tego, gdzie ten
wyląduje w przyszłości. (Przy leniwym ładowaniu kolejność bywała
odwrotna, niż się wydaje — skrypt startowy siedzi WYŻEJ w niż
do alphacon.css, więc doklejany przez niego arkusz lądował
w kaskadzie PRZED bazą.)
==============================================================*/
/*==============================================================
1. phosphor — bursztynowy CRT / wydruk z drukarki igłowej
==============================================================*/
/* --- ciemny: bursztyn na czerni --- */
html[data-skin="phosphor"][data-theme="dark"],
html[data-skin="phosphor"][data-theme="light"] .ac-invert {
--ac-bg: #0a0a07;
--ac-surface: #12110b;
--ac-card: #16150e;
--ac-line: #33301f;
--ac-line2: #24220f;
--ac-inputborder: #4a4527;
--ac-ink: #ffdca8;
--ac-strong: #f0c98d;
--ac-muted: #bda478;
--ac-faint: #a89268;
--ac-acc: #ffb000;
--ac-acc-soft: rgba(255, 176, 0, 0.4);
--ac-acc-wash: rgba(255, 176, 0, 0.08);
--ac-btn-bg: #ffb000;
--ac-btn-bg-hover: #ffc94d;
--ac-btn-ink: #0a0a07;
--ac-red: #ff7a3d;
--ac-blue: #3bff7a; /* na fosforze „drugi kolor" jest zielony, nie niebieski */
--ac-amber: #ffb000;
--ac-red-text: #ff9c6b;
--ac-blue-text: #5cf894;
--ac-amber-text: #ffb000;
--ac-panel-bg: #06060a;
--ac-panel-face: #12110b;
--ac-panel-slot: #1b1a10;
--ac-panel-dim: #a89268;
--ac-led-on: #ffb000;
--ac-led-off: #2b2712;
--ac-screw: #3d3821;
--ac-term: #ffb000;
--ac-term-rgb: 255 176 0;
--ac-term-dim: #c08c26;
--ac-term-bg: #0a0a07;
--ac-navbg: rgba(10, 10, 7, 0.9);
--ac-shadow: rgba(0, 0, 0, 0.6);
--ac-logofilter: none;
}
/* --- jasny: wydruk z igłówki, ciemny tusz na kremowym papierze --- */
html[data-skin="phosphor"][data-theme="light"],
html[data-skin="phosphor"][data-theme="dark"] .ac-invert {
--ac-bg: #e9e5d6;
--ac-surface: #ded9c6;
--ac-card: #f4f1e6;
--ac-line: #b9b39c;
--ac-line2: #cbc5b0;
--ac-inputborder: #a29b81;
--ac-ink: #14180f;
--ac-strong: #2b3020;
--ac-muted: #4c5140;
--ac-faint: #5c604a;
--ac-acc: #7a4c00;
--ac-acc-soft: rgba(122, 76, 0, 0.4);
--ac-acc-wash: rgba(122, 76, 0, 0.07);
--ac-btn-bg: #7a4c00;
--ac-btn-bg-hover: #5c3900;
--ac-btn-ink: #ffffff;
--ac-red: #8a3200;
--ac-blue: #146638;
--ac-amber: #7a4c00;
--ac-red-text: #8a3200;
--ac-blue-text: #146638;
--ac-amber-text: #7a4c00;
/* panel i terminal zostają ciemne — to sprzęt, nie interfejs */
--ac-panel-bg: #14180f;
--ac-panel-face: #232819;
--ac-panel-slot: #2d3323;
--ac-panel-dim: #a3ab95;
--ac-led-on: #ffb000;
--ac-led-off: #38402c;
--ac-screw: #4d5540;
--ac-term: #ffb000;
--ac-term-rgb: 255 176 0;
--ac-term-dim: #c08c26;
--ac-term-bg: #0a0a07;
--ac-navbg: rgba(233, 229, 214, 0.92);
--ac-shadow: rgba(20, 24, 15, 0.16);
--ac-logofilter: invert(1) brightness(0.2);
}
html[data-skin="phosphor"] *:not(.ac-sw):not(.ac-led):not(.ac-agenda-dot):not(.ac-leds i):not(.ac-agenda-legend i) {
border-radius: 0 !important;
}
html[data-skin="phosphor"] body,
html[data-skin="phosphor"] p,
html[data-skin="phosphor"] li,
html[data-skin="phosphor"] a,
html[data-skin="phosphor"] span,
html[data-skin="phosphor"] label,
html[data-skin="phosphor"] .sec-text,
html[data-skin="phosphor"] .box-text {
font-family: 'JetBrains Mono', ui-monospace, monospace;
}
/* VT323 ma niską wysokość x — bez podbicia rozmiaru nagłówki wyglądałyby
na mniejsze od tekstu, mimo że mają większy font-size. */
html[data-skin="phosphor"] h1,
html[data-skin="phosphor"] h2,
html[data-skin="phosphor"] h3,
html[data-skin="phosphor"] .sec-title,
html[data-skin="phosphor"] .box-title,
html[data-skin="phosphor"] .hero-title .title2,
html[data-skin="phosphor"] .ac-agenda-title,
html[data-skin="phosphor"] .ac-future-title {
font-family: 'VT323', ui-monospace, monospace;
font-weight: 400;
letter-spacing: 0.01em;
text-transform: none;
}
/* VT323 i wersaliki są znacznie szersze od Space Grotesku — przy rozmiarze
dobranym „na oko" nagłówek łamał się na cztery krótkie wiersze wciśnięte
w lewą krawędź, a ostatnim wierszem zostawało samo podświetlone słowo.
Stąd niższa skala i zdjęty limit szerokości: nagłówek ma prawo zająć
całą swoją kolumnę. */
html[data-skin="phosphor"] .hero-title .title2 { font-size: clamp(30px, 3.9vw, 50px); line-height: 1.04; }
html[data-skin="phosphor"] .sec-title { font-size: clamp(34px, 3.9vw, 44px); line-height: 1.06; }
html[data-skin="phosphor"] .box-title,
html[data-skin="phosphor"] .ac-agenda-title { font-size: 25px; }
/* mrugający kursor doklejony do nagłówka sekcji */
html[data-skin="phosphor"] .ac-sechead .sec-title::after {
content: '_';
color: var(--ac-acc);
animation: ac-blink 1s steps(1) infinite;
}
/* Faktura: na ciemnym to skanlinie kineskopu, na jasnym prążkowanie
głowicy igłowej — ten sam zabieg, przeciwna polaryzacja. */
html[data-skin="phosphor"] body::before {
content: '';
position: fixed;
inset: 0;
z-index: 999;
pointer-events: none;
background: repeating-linear-gradient(rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.13) 2px 3px);
}
html[data-skin="phosphor"][data-theme="light"] body::before {
background: repeating-linear-gradient(rgba(0,0,0,0) 0 2px, rgba(20,24,15,0.05) 2px 3px);
}
/* Zdjęcie ma pasować do bursztynu, a nie odcinać się od niego chłodną
czernią i bielą. Pełne sepia z lekkim obrotem w stronę czerwieni daje
ciepły brąz starej odbitki.
Bez grayscale na wejściu — ślad oryginalnego koloru zostaje w cieniach
i zdjęcie ma głębię zamiast płaskiego duotonu. Nasycenie trzeba trzymać
nisko: przy saturate powyżej ~2 brąz ucieka w jaskrawy pomarańcz. */
html[data-skin="phosphor"] .ac-badge-shot img {
filter: sepia(1) saturate(1.4) hue-rotate(-8deg) brightness(0.94) contrast(1.02);
}
/*==============================================================
2. matrix — zielony terminal, klasyka gatunku
Zieleń jest ta sama co na alphasec.pl (#00ff66) — rodzinne DNA.
Od phosphora różni się nie tylko kolorem: tam nagłówki są w VT323
i nie świecą, tutaj wszystko jest w JetBrains Mono i ma poświatę,
więc czyta się jak sesja w terminalu, a nie jak plakat z kineskopu.
==============================================================*/
/* --- ciemny: fosforyzująca zieleń na czerni --- */
html[data-skin="matrix"][data-theme="dark"],
html[data-skin="matrix"][data-theme="light"] .ac-invert {
--ac-bg: #010603;
--ac-surface: #04120a;
--ac-card: #061a0d;
--ac-line: #145c2e;
--ac-line2: #0d3a1d;
--ac-inputborder: #1a7a3d;
--ac-ink: #c4ffd6;
--ac-strong: #8dffb2;
--ac-muted: #5ae695;
--ac-faint: #3fb872;
--ac-acc: #00ff66;
--ac-acc-soft: rgba(0, 255, 102, 0.4);
--ac-acc-wash: rgba(0, 255, 102, 0.07);
--ac-btn-bg: #00ff66;
--ac-btn-bg-hover: #6bffa6;
--ac-btn-ink: #010603;
/* monochrom nie uniósłby trzech kategorii, więc dwa kolory alarmowe
dokładają się do zieleni — tak jak w terminalach z kolorowym ANSI */
--ac-red: #ff4f4f;
--ac-blue: #00e0ff;
--ac-amber: #00ff66;
--ac-red-text: #ff8080;
--ac-blue-text: #4de8ff;
--ac-amber-text: #00ff66;
--ac-panel-bg: #000200;
--ac-panel-face: #04120a;
--ac-panel-slot: #071c0e;
--ac-panel-dim: #3fb872;
--ac-led-on: #00ff66;
--ac-led-off: #0c2d17;
--ac-screw: #164a28;
--ac-term: #00ff66;
--ac-term-rgb: 0 255 102;
--ac-term-dim: #2fae63;
--ac-term-bg: #010603;
--ac-navbg: rgba(1, 6, 3, 0.9);
--ac-shadow: rgba(0, 0, 0, 0.7);
--ac-logofilter: none;
}
/* --- jasny: reverse video, ciemna zieleń na bladym ekranie --- */
html[data-skin="matrix"][data-theme="light"],
html[data-skin="matrix"][data-theme="dark"] .ac-invert {
--ac-bg: #dcf0e2;
--ac-surface: #cbe5d3;
--ac-card: #ecfaef;
--ac-line: #9dc0a8;
--ac-line2: #b6d3be;
--ac-inputborder: #7fae8d;
--ac-ink: #04210f;
--ac-strong: #0b3a1d;
--ac-muted: #1f5533;
--ac-faint: #2c6540;
--ac-acc: #0a6b2f;
--ac-acc-soft: rgba(10, 107, 47, 0.4);
--ac-acc-wash: rgba(10, 107, 47, 0.07);
--ac-btn-bg: #0a6b2f;
--ac-btn-bg-hover: #075122;
--ac-btn-ink: #ffffff;
--ac-red: #a81f1f;
--ac-blue: #0b5f75;
--ac-amber: #0a6b2f;
--ac-red-text: #a81f1f;
--ac-blue-text: #0b5f75;
--ac-amber-text: #0a6b2f;
/* panel i terminal zostają ciemne — to sprzęt, nie interfejs */
--ac-panel-bg: #010603;
--ac-panel-face: #04120a;
--ac-panel-slot: #071c0e;
--ac-panel-dim: #4dcb82;
--ac-led-on: #00ff66;
--ac-led-off: #0c2d17;
--ac-screw: #164a28;
--ac-term: #00ff66;
--ac-term-rgb: 0 255 102;
--ac-term-dim: #2fae63;
--ac-term-bg: #010603;
--ac-navbg: rgba(220, 240, 226, 0.93);
--ac-shadow: rgba(4, 33, 15, 0.16);
--ac-logofilter: invert(1) brightness(0.15);
}
html[data-skin="matrix"] *:not(.ac-sw):not(.ac-led):not(.ac-agenda-dot):not(.ac-leds i):not(.ac-agenda-legend i) {
border-radius: 0 !important;
}
/* Wszystko monospace — to ma być sesja w terminalu, nie strona */
html[data-skin="matrix"] body,
html[data-skin="matrix"] p,
html[data-skin="matrix"] li,
html[data-skin="matrix"] a,
html[data-skin="matrix"] span,
html[data-skin="matrix"] label,
html[data-skin="matrix"] h1,
html[data-skin="matrix"] h2,
html[data-skin="matrix"] h3,
html[data-skin="matrix"] .sec-title,
html[data-skin="matrix"] .box-title,
html[data-skin="matrix"] .sec-text,
html[data-skin="matrix"] .box-text,
html[data-skin="matrix"] .hero-title .title2,
html[data-skin="matrix"] .ac-agenda-title,
html[data-skin="matrix"] .ac-future-title {
font-family: 'JetBrains Mono', ui-monospace, monospace;
}
html[data-skin="matrix"] h1,
html[data-skin="matrix"] h2,
html[data-skin="matrix"] h3,
html[data-skin="matrix"] .sec-title,
html[data-skin="matrix"] .box-title,
html[data-skin="matrix"] .hero-title .title2,
html[data-skin="matrix"] .ac-agenda-title,
html[data-skin="matrix"] .ac-future-title {
font-weight: 700;
text-transform: uppercase;
letter-spacing: -0.01em;
}
html[data-skin="matrix"] .hero-title .title2 { font-size: clamp(24px, 2.9vw, 38px); line-height: 1.14; }
html[data-skin="matrix"] .sec-title { font-size: clamp(23px, 2.6vw, 30px); line-height: 1.2; }
html[data-skin="matrix"] .box-title,
html[data-skin="matrix"] .ac-agenda-title { font-size: 17px; }
/* To, o co w tej skórce chodzi: fosfor świeci. Poświata siedzi na tekście
i na krawędziach; w motywie jasnym gaśnie, bo papier nie świeci. */
html[data-skin="matrix"][data-theme="dark"] body,
html[data-skin="matrix"][data-theme="dark"] .ac-invert .ac-term-body {
text-shadow: 0 0 5px rgba(0, 255, 102, 0.35), 0 0 14px rgba(0, 255, 102, 0.12);
}
html[data-skin="matrix"][data-theme="dark"] .feature-card,
html[data-skin="matrix"][data-theme="dark"] .ac-venue-main,
html[data-skin="matrix"][data-theme="dark"] .ac-venue-side,
html[data-skin="matrix"][data-theme="dark"] .contact-form2,
html[data-skin="matrix"][data-theme="dark"] .ac-people li {
box-shadow: 0 0 14px rgba(0, 255, 102, 0.07);
}
html[data-skin="matrix"][data-theme="dark"] .ot-btn {
box-shadow: 0 0 18px rgba(0, 255, 102, 0.35);
}
/* pas odwrócony w motywie ciemnym jest jasny — tam poświaty nie ma */
html[data-skin="matrix"][data-theme="dark"] .ac-invert,
html[data-skin="matrix"][data-theme="dark"] .ac-invert * { text-shadow: none; }
/* kursor bloku doklejony do nagłówka sekcji */
html[data-skin="matrix"] .ac-sechead .sec-title::after {
content: '';
display: inline-block;
width: 0.5em;
height: 0.85em;
margin-left: 0.18em;
vertical-align: -0.08em;
background: var(--ac-acc);
animation: ac-blink 1s steps(1) infinite;
}
/* skanlinie + winieta kineskopu */
html[data-skin="matrix"][data-theme="dark"] body::before {
content: '';
position: fixed;
inset: 0;
z-index: 999;
pointer-events: none;
background:
repeating-linear-gradient(rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.22) 2px 3px),
radial-gradient(ellipse at center, rgba(0,0,0,0) 55%, rgba(0,0,0,0.45) 100%);
}
html[data-skin="matrix"] .ac-badge-shot img { filter: grayscale(1) sepia(1) hue-rotate(65deg) saturate(2.6) contrast(1.1); }
/*==============================================================
3. zine — plakat konferencyjny, papier albo farba drukarska
==============================================================*/
/* --- jasny: kremowy papier, gorący pomarańcz --- */
html[data-skin="zine"][data-theme="light"],
html[data-skin="zine"][data-theme="dark"] .ac-invert {
--ac-bg: #f2ecdd;
--ac-surface: #e9e1cd;
--ac-card: #f8f3e6;
--ac-line: #171512;
--ac-line2: #b8ae97;
--ac-inputborder: #171512;
--ac-ink: #171512;
--ac-strong: #322d26;
--ac-muted: #4a453c;
--ac-faint: #625b4d;
--ac-acc: #b03e00;
--ac-acc-soft: rgba(176, 62, 0, 0.45);
--ac-acc-wash: rgba(255, 90, 0, 0.09);
/* czarny tekst na gorącym pomarańczu — 6,6:1, i wygląda jak nadruk */
--ac-btn-bg: #ff5a00;
--ac-btn-bg-hover: #e04e00;
--ac-btn-ink: #171512;
--ac-red: #c22b00;
--ac-blue: #1f4f9c;
--ac-amber: #8a5200;
--ac-red-text: #b02700;
--ac-blue-text: #1f4f9c;
--ac-amber-text: #7a4900;
--ac-panel-bg: #171512;
--ac-panel-face: #221e18;
--ac-panel-slot: #2c2720;
--ac-panel-dim: #a89e8d;
--ac-led-on: #ffab1f;
--ac-led-off: #3a352c;
--ac-screw: #554d40;
--ac-term: #ff7a2e;
--ac-term-rgb: 255 122 46;
--ac-term-dim: #e86a1a;
--ac-term-bg: #171512;
--ac-navbg: rgba(242, 236, 221, 0.93);
--ac-shadow: rgba(23, 21, 18, 0.16);
--ac-logofilter: invert(1) brightness(0.12);
}
/* --- ciemny: ta sama kompozycja odbita w farbie drukarskiej --- */
html[data-skin="zine"][data-theme="dark"],
html[data-skin="zine"][data-theme="light"] .ac-invert {
--ac-bg: #171512;
--ac-surface: #201d17;
--ac-card: #24201a;
--ac-line: #f2ecdd;
--ac-line2: #3a352c;
--ac-inputborder: #f2ecdd;
--ac-ink: #f2ecdd;
--ac-strong: #ddd6c4;
--ac-muted: #b3ab99;
--ac-faint: #918a7a;
--ac-acc: #ff7a2e;
--ac-acc-soft: rgba(255, 122, 46, 0.45);
--ac-acc-wash: rgba(255, 122, 46, 0.09);
--ac-btn-bg: #ff5a00;
--ac-btn-bg-hover: #ff7a2e;
--ac-btn-ink: #171512;
--ac-red: #ff7a2e;
--ac-blue: #7ba7e8;
--ac-amber: #ffab1f;
--ac-red-text: #ff8f4d;
--ac-blue-text: #7ba7e8;
--ac-amber-text: #ffab1f;
--ac-panel-bg: #0f0d0b;
--ac-panel-face: #1c1916;
--ac-panel-slot: #262119;
--ac-panel-dim: #a89e8d;
--ac-led-on: #ffab1f;
--ac-led-off: #332e26;
--ac-screw: #4a4237;
--ac-term: #ff7a2e;
--ac-term-rgb: 255 122 46;
--ac-term-dim: #e86a1a;
--ac-term-bg: #0f0d0b;
--ac-navbg: rgba(23, 21, 18, 0.93);
--ac-shadow: rgba(0, 0, 0, 0.5);
--ac-logofilter: none;
}
html[data-skin="zine"] *:not(.ac-sw):not(.ac-led):not(.ac-agenda-dot):not(.ac-leds i):not(.ac-agenda-legend i) {
border-radius: 0 !important;
}
html[data-skin="zine"] h1,
html[data-skin="zine"] h2,
html[data-skin="zine"] h3,
html[data-skin="zine"] .sec-title,
html[data-skin="zine"] .box-title,
html[data-skin="zine"] .hero-title .title2,
html[data-skin="zine"] .ac-agenda-title,
html[data-skin="zine"] .ac-future-title {
font-family: 'Space Grotesk', system-ui, sans-serif;
font-weight: 700;
text-transform: uppercase;
letter-spacing: -0.02em;
}
html[data-skin="zine"] .hero-title .title2 { font-size: clamp(30px, 4.1vw, 54px); line-height: 0.98; }
html[data-skin="zine"] body,
html[data-skin="zine"] p,
html[data-skin="zine"] li,
html[data-skin="zine"] a,
html[data-skin="zine"] label,
html[data-skin="zine"] .sec-text,
html[data-skin="zine"] .box-text {
font-family: 'JetBrains Mono', ui-monospace, monospace;
}
/* Grubsze ramki to sygnatura zine'a; kolor niesie token --ac-line,
więc na papierze są czarne, a w farbie kremowe. */
html[data-skin="zine"] .feature-card,
html[data-skin="zine"] .ac-venue-main,
html[data-skin="zine"] .ac-venue-side,
html[data-skin="zine"] .ac-partner,
html[data-skin="zine"] .contact-form2,
html[data-skin="zine"] .ac-people li,
html[data-skin="zine"] .ac-chip { border-width: 1.5px; }
html[data-skin="zine"] .feature-card { border-top-width: 5px; }
/* Ziarno: na papierze ciemne włókna, w farbie jaśniejsze prześwity */
html[data-skin="zine"] body::before {
content: '';
position: fixed;
inset: 0;
z-index: 999;
pointer-events: none;
opacity: 0.5;
background:
repeating-linear-gradient(48deg, rgba(23,21,18,0.035) 0 1px, rgba(0,0,0,0) 1px 3px),
repeating-linear-gradient(-41deg, rgba(23,21,18,0.03) 0 1px, rgba(0,0,0,0) 1px 4px);
}
html[data-skin="zine"][data-theme="dark"] body::before {
background:
repeating-linear-gradient(48deg, rgba(242,236,221,0.045) 0 1px, rgba(0,0,0,0) 1px 3px),
repeating-linear-gradient(-41deg, rgba(242,236,221,0.035) 0 1px, rgba(0,0,0,0) 1px 4px);
}
html[data-skin="zine"] .ac-badge-shot img { filter: grayscale(1) contrast(1.2); }
/*==============================================================
4. c64 — PETSCII na ekranie albo na wydruku
==============================================================*/
/* --- ciemny: granatowy ekran, jasnofioletowy tekst --- */
html[data-skin="c64"][data-theme="dark"],
html[data-skin="c64"][data-theme="light"] .ac-invert {
--ac-bg: #3c34a8;
--ac-surface: #3a32a0;
--ac-card: #372f9c;
--ac-line: #8b83e0;
--ac-line2: #6a62ce;
--ac-inputborder: #8b83e0;
--ac-ink: #e8e4ff;
--ac-strong: #d8d3ff;
--ac-muted: #c3bcff;
--ac-faint: #b5aeff;
--ac-acc: #9ad0ff;
--ac-acc-soft: rgba(154, 208, 255, 0.5);
--ac-acc-wash: rgba(154, 208, 255, 0.1);
--ac-btn-bg: #c8c0ff;
--ac-btn-bg-hover: #e8e4ff;
--ac-btn-ink: #2f2890;
--ac-red: #ff8a8a;
--ac-blue: #9ad0ff;
--ac-amber: #ffd479;
--ac-red-text: #ff9d9d;
--ac-blue-text: #9ad0ff;
--ac-amber-text: #ffd479;
--ac-panel-bg: #2f2890;
--ac-panel-face: #3a3299;
--ac-panel-slot: #453da8;
--ac-panel-dim: #bdb6ff;
--ac-led-on: #ffd479;
--ac-led-off: #362f8f;
--ac-screw: #5d55c4;
--ac-term: #c8c0ff;
--ac-term-rgb: 200 192 255;
--ac-term-dim: #aaa2f5;
--ac-term-bg: #2f2890;
--ac-navbg: rgba(60, 52, 168, 0.93);
--ac-shadow: rgba(20, 14, 70, 0.5);
--ac-logofilter: none;
}
/* --- jasny: ta sama paleta odwrócona, jak listing na papierze --- */
html[data-skin="c64"][data-theme="light"],
html[data-skin="c64"][data-theme="dark"] .ac-invert {
--ac-bg: #c8c0ff;
--ac-surface: #bcb3fa;
--ac-card: #d6d0ff;
--ac-line: #2f2890;
--ac-line2: #9d94ee;
--ac-inputborder: #2f2890;
--ac-ink: #1d1868;
--ac-strong: #262086;
--ac-muted: #302a92;
--ac-faint: #3e3899;
--ac-acc: #1d1868;
--ac-acc-soft: rgba(29, 24, 104, 0.45);
--ac-acc-wash: rgba(29, 24, 104, 0.07);
--ac-btn-bg: #2f2890;
--ac-btn-bg-hover: #1d1868;
--ac-btn-ink: #e8e4ff;
--ac-red: #a01e1e;
--ac-blue: #1d1868;
--ac-amber: #6b4a00;
--ac-red-text: #9c1c1c;
--ac-blue-text: #1d1868;
--ac-amber-text: #6b4a00;
--ac-panel-bg: #2f2890;
--ac-panel-face: #3a3299;
--ac-panel-slot: #453da8;
--ac-panel-dim: #bdb6ff;
--ac-led-on: #ffd479;
--ac-led-off: #362f8f;
--ac-screw: #5d55c4;
--ac-term: #c8c0ff;
--ac-term-rgb: 200 192 255;
--ac-term-dim: #aaa2f5;
--ac-term-bg: #2f2890;
--ac-navbg: rgba(200, 192, 255, 0.93);
--ac-shadow: rgba(29, 24, 104, 0.18);
--ac-logofilter: invert(1) brightness(0.16);
}
html[data-skin="c64"] *:not(.ac-sw):not(.ac-led):not(.ac-agenda-dot):not(.ac-leds i):not(.ac-agenda-legend i) {
border-radius: 0 !important;
}
html[data-skin="c64"] body,
html[data-skin="c64"] p,
html[data-skin="c64"] li,
html[data-skin="c64"] a,
html[data-skin="c64"] span,
html[data-skin="c64"] label,
html[data-skin="c64"] h1,
html[data-skin="c64"] h2,
html[data-skin="c64"] h3,
html[data-skin="c64"] .sec-title,
html[data-skin="c64"] .box-title,
html[data-skin="c64"] .sec-text,
html[data-skin="c64"] .box-text,
html[data-skin="c64"] .hero-title .title2,
html[data-skin="c64"] .ac-agenda-title,
html[data-skin="c64"] .ac-future-title {
font-family: 'VT323', ui-monospace, monospace;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.02em;
}
/* VT323 jest drobne — cała skala idzie w górę, inaczej strona wygląda na wygaszoną */
html[data-skin="c64"] body { font-size: 19px; line-height: 1.42; }
html[data-skin="c64"] .sec-text, html[data-skin="c64"] .box-text { font-size: 19px; line-height: 1.42; }
html[data-skin="c64"] .hero-title .title2 { font-size: clamp(28px, 3.6vw, 46px); line-height: 1.06; }
html[data-skin="c64"] .sec-title { font-size: clamp(32px, 3.8vw, 42px); line-height: 1.08; }
html[data-skin="c64"] .box-title, html[data-skin="c64"] .ac-agenda-title { font-size: 24px; }
html[data-skin="c64"] .ac-people li { font-size: 21px; }
/* blokowy kursor za nagłówkiem hero */
html[data-skin="c64"] .hero-title .title2::after {
content: '';
display: inline-block;
width: 0.55em;
height: 0.8em;
margin-left: 0.12em;
vertical-align: -0.04em;
background: var(--ac-ink);
animation: ac-blink 1s steps(1) infinite;
}
html[data-skin="c64"] .ac-badge-shot img { filter: saturate(0.6) hue-rotate(200deg) contrast(1.1); }
/*==============================================================
5. Nagłówek hero w skórkach — szerokość
Powyżej 1200px hero jest dwukolumnowe i to siatka wyznacza szerokość
tekstu; bazowy limit 640px byłby wtedy drugim, niepotrzebnym gorsetem
i wpychał szerokie kroje w cztery krótkie wiersze. Poniżej 1200px hero
składa się w jedną kolumnę na całą szerokość i limit musi wrócić,
inaczej wers rozjeżdża się na 900px.
==============================================================*/
@media (min-width: 1200px) {
html[data-skin="phosphor"] .hero-title .title2,
html[data-skin="matrix"] .hero-title .title2,
html[data-skin="zine"] .hero-title .title2,
html[data-skin="c64"] .hero-title .title2 { max-width: none; }
}
/*==============================================================
6. Przyciski w skórkach
.ot-btn ma w alphacon.css font-family z !important (szablon narzucał
swój krój), więc każda skórka musi go przebić tak samo — inaczej
przyciski zostają w Space Grotesku i odstają od reszty kostiumu.
==============================================================*/
html[data-skin="phosphor"] .ot-btn {
font-family: 'JetBrains Mono', ui-monospace, monospace !important;
font-size: 13.5px !important;
letter-spacing: 0.02em;
}
html[data-skin="matrix"] .ot-btn {
font-family: 'JetBrains Mono', ui-monospace, monospace !important;
font-size: 13.5px !important;
text-transform: uppercase !important;
letter-spacing: 0.04em;
}
html[data-skin="zine"] .ot-btn {
font-family: 'Space Grotesk', system-ui, sans-serif !important;
text-transform: uppercase !important;
letter-spacing: 0.01em;
}
html[data-skin="c64"] .ot-btn {
font-family: 'VT323', ui-monospace, monospace !important;
font-size: 21px !important;
text-transform: uppercase !important;
}
@media (prefers-reduced-motion: reduce) {
html[data-skin="phosphor"] .ac-sechead .sec-title::after,
html[data-skin="matrix"] .ac-sechead .sec-title::after,
html[data-skin="c64"] .hero-title .title2::after { animation: none !important; }
}