-ek (nem
pszeudo-elemek), mert a téma máshol is így csinálja, és így nincs
meglepetés a rétegsorrenddel.
*/
/* Sötét alap a látványos szekciókhoz */
.ko-dark {
background-color: #0b1220;
background-image: linear-gradient(160deg, #0f172a 0%, #10254a 45%, #0b1220 100%);
color: #e2e8f0;
}
/* Sodródó színfoltok. Két réteg, eltérő ütemmel, hogy ne legyen gépies. */
.ko-aurora {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.ko-aurora::before,
.ko-aurora::after {
content: "";
position: absolute;
inset: -25%;
/* A blur drága, ha nagy felületen animáljuk, ezért a transform
animálódik (a kompozitor kezeli), a blur pedig fix marad. */
will-change: transform;
}
.ko-aurora::before {
background:
radial-gradient(38% 44% at 18% 22%, rgba(0, 74, 173, .65), transparent 70%),
radial-gradient(34% 40% at 82% 16%, rgba(56, 182, 255, .45), transparent 70%),
radial-gradient(46% 50% at 52% 92%, rgba(76, 60, 190, .45), transparent 72%);
filter: blur(42px);
animation: ko-drift-a 26s ease-in-out infinite alternate;
}
.ko-aurora::after {
background:
radial-gradient(30% 34% at 72% 62%, rgba(255, 87, 87, .20), transparent 70%),
radial-gradient(28% 32% at 26% 74%, rgba(255, 212, 61, .16), transparent 70%);
filter: blur(54px);
animation: ko-drift-b 34s ease-in-out infinite alternate;
}
@keyframes ko-drift-a {
from {
transform: translate3d(-3%, -2%, 0) scale(1);
}
to {
transform: translate3d(4%, 3%, 0) scale(1.12);
}
}
@keyframes ko-drift-b {
from {
transform: translate3d(3%, 2%, 0) scale(1.08);
}
to {
transform: translate3d(-4%, -3%, 0) scale(1);
}
}
/* A .ko-grid rácsminta ELTÁVOLÍTVA (2026-07-29). Éles peremű, ismétlődő
minta volt: a szem az éleket keresi, így a háttér versenyzett a szöveggel
a figyelemért. Helyette .ko-vignette megy — lásd a KO II. szakaszt. */
/* Világos szekciókhoz: lágy, színes "mesh" derengés fehér helyett */
.ko-mesh-light {
background-color: #f8fafc;
background-image:
radial-gradient(42% 46% at 12% 8%, rgba(56, 182, 255, .16), transparent 70%),
radial-gradient(38% 42% at 88% 12%, rgba(0, 74, 173, .12), transparent 70%),
radial-gradient(50% 46% at 50% 100%, rgba(255, 212, 61, .10), transparent 72%);
}
/* Felső/alsó lágy átmenet, hogy a sötét és világos szekciók
ne éles vonallal ütközzenek */
.ko-fade-bottom::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 96px;
pointer-events: none;
z-index: 1;
background: linear-gradient(to bottom, transparent, #f8fafc);
}
/* ============================================================
KO HÁTTÉR-RENDSZER II. — STATIKUS dekorációs rétegek
============================================================
Az első generáció (.ko-aurora) animált, elmosott foltokból áll. Szép,
de a blur() nagy felületen a legdrágább dolog, amit egy szekcióháttér
csinálhat: minden képkockán újrafesti a teljes réteget.
Az itteni rétegek ezért MIND statikusak és blur nélküliek. A
radial-gradient széle önmagában lágy, tehát vizuálisan ugyanazt adja,
futásidejű költség nélkül. Egy oldalon legfeljebb EGY animált
.ko-aurora legyen (a heróban), a többi szekció ezeket használja.
Használat:
Két réteg, mindig ebben a sorrendben: előbb a lágy színfolt, aztán a
vignetta. Rácsot, mintát, körvonalat NE tegyél be — pontosan azért
került ki, mert elvonta a figyelmet a tartalomról.
*/
/* --- Alapok --------------------------------------------------- */
/* Sötét alap meleg, arany tónussal (AI WebExpress arculata).
A korábbi bg-slate-950 (#020617) gyakorlatilag fekete volt; ez
megtartja a mélységet, de van benne kék→barna hőmérséklet-váltás,
amitől nem lapos. */
.ko-dark-warm {
background-color: #141d33;
background-image: linear-gradient(165deg, #1b2745 0%, #24315a 40%, #2b2545 72%, #171f38 100%);
color: #e2e8f0;
}
/* Világos alap: nem tiszta fehér, hanem alig érzékelhető színes derengés. */
.ko-canvas-light {
background-color: #f9fbfe;
}
/*
* FŐOLDAL HERO — a legerősebb felület az oldalon.
*
* Ez az első képernyő, amit egy érkező lát, ezért itt nem visszafogottság
* kell, hanem határozott kontraszt: a fehér főcím mély, sötét alapon ül,
* és a fény a cím köré rendeződik. Három réteg egyetlen background-image-ben
* (nincs külön elem, nincs blur):
* 1. erős cián reflektor jobb felül — a kódablakot emeli ki,
* 2. mély királykék tömeg bal oldalon — ez adja a főcím mögötti súlyt,
* 3. egy csepp márkasárga jobb alul, hogy ne legyen egyhangúan kék.
* Alattuk átlós alapgradiens, hogy a felület sose legyen lapos fekete.
*/
.ko-hero-dark {
background-color: #060b16;
background-image:
radial-gradient(56% 60% at 78% 8%, rgba(56, 182, 255, .34), transparent 72%),
radial-gradient(68% 74% at 8% 30%, rgba(0, 74, 173, .52), transparent 78%),
radial-gradient(42% 44% at 94% 92%, rgba(255, 212, 61, .11), transparent 74%),
linear-gradient(168deg, #0e1a30 0%, #0a1120 56%, #060b16 100%);
color: #e2e8f0;
}
/* --- Statikus fényfoltok -------------------------------------- */
.ko-glow,
.ko-glow-warm,
.ko-glow-hero {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
}
/* Hűvös kék + egy csepp meleg — a téma primary/highlight párosa */
.ko-glow {
background-image:
radial-gradient(64% 68% at 20% 14%, rgba(0, 74, 173, .58), transparent 76%),
radial-gradient(58% 60% at 86% 26%, rgba(56, 182, 255, .26), transparent 74%),
radial-gradient(70% 62% at 56% 106%, rgba(67, 56, 170, .42), transparent 78%);
}
/* Arany/borostyán — az AI WebExpress kiemelőszíne (amber-400) */
.ko-glow-warm {
background-image:
radial-gradient(64% 68% at 16% 10%, rgba(251, 191, 36, .24), transparent 76%),
radial-gradient(58% 60% at 88% 28%, rgba(245, 158, 11, .18), transparent 74%),
radial-gradient(72% 64% at 50% 108%, rgba(180, 83, 9, .32), transparent 78%);
}
/* Világos hero: erős annyira, hogy legyen mit nézni, halvány annyira,
hogy a slate-900 törzsszöveg kontrasztja ne sérüljön. */
.ko-glow-hero {
background-image:
radial-gradient(62% 66% at 88% 2%, rgba(56, 182, 255, .34), transparent 74%),
radial-gradient(56% 54% at 2% 96%, rgba(0, 74, 173, .17), transparent 76%),
radial-gradient(44% 48% at 14% 0%, rgba(255, 212, 61, .20), transparent 72%);
}
/*
* Fénykeret a főoldal hero kódablaka mögé.
*
* A sötét hero-n a kártya (bg-slate-900, #0f172a) majdnem beleolvad az
* alapba (#060b16) — mindkettő nagyon sötét kék, alig van köztük különbség.
* A megoldás NEM a kártya világosítása: az elrontaná a benne lévő
* kódszínek kontrasztját, és a "terminál" jelleg is odaveszne. Helyette
* MÖGÉ teszünk fényt, így a kártya sziluettje válik el a háttértől,
* miközben a tartalma érintetlen marad.
*
* Blur nélkül, radial-gradienttel — a fold fölött ez különösen számít.
*/
.ko-code-halo {
position: absolute;
inset: -22% -20%;
pointer-events: none;
z-index: 0;
/* Explicit méret, nem closest-side: a doboz széles és alacsony, ott a
closest-side a magassághoz igazodik, és a fény túl kicsi marad. */
background-image: radial-gradient(56% 52% at 52% 46%,
rgba(56, 182, 255, .58),
rgba(0, 74, 173, .34) 46%,
transparent 74%);
}
/* --- Vignetta (szél-sötétítés) -------------------------------- */
/*
* MIÉRT NINCS TÖBBÉ RÁCS ÉS KÖRVONAL.
*
* Az első változatban rácsminta (.ko-grid*) és absztrakt körvonalak
* (.ko-shapes) is kerültek a szekciókba. Vizuálisan érdekesek voltak, de
* mindkettő NAGY KONTRASZTÚ, ÉLES peremű elem: a szem az éleket keresi, így
* a dekoráció versenyzett a szöveggel a figyelemért. Egy háttérnek pont az
* ellenkezőjét kell csinálnia.
*
* A vignetta a fordítottja: nincs benne egyetlen él sem, a szélek felé
* halkul, és ezzel BEFELÉ, a tartalom felé tereli a tekintetet. A lágy
* színfoltokkal (.ko-glow*) együtt marad a mélység, de már semmi nem vonja
* el a figyelmet.
*/
.ko-vignette {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background-image: radial-gradient(ellipse 84% 76% at 50% 46%,
transparent 40%,
rgba(2, 6, 23, .50) 100%);
}
/* Világos szekcióhoz — épp csak annyi, hogy a szekció ne "kifusson" */
.ko-vignette-light {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 0;
background-image: radial-gradient(ellipse 88% 80% at 50% 44%,
transparent 52%,
rgba(15, 23, 42, .07) 100%);
}
/* === Mobilon nem mozognak a dekoratív foltok ===
Az .animate-blob 11 helyen szerepel (adatvédelem, impresszum, referenciák,
scan), és a legtöbb helyen HÁRMASÁVAL: három 384 px-es (w-96 h-96) elem,
64 px-re elmosva (blur-3xl), mix-blend-multiply-jal, egyszerre animálva.
Asztalon ez rendben van, telefonon viszont pont az a hardver kapja, ami a
legkevésbé bírja — ráadásul kis kijelzőn a foltok nagy része a viewporton
kívülre esik, tehát a mozgás alig látszik, a festés viszont megvan.
A foltok maguk maradnak (a színes derengés a design része), csak állnak.
Töréspont: a Tailwind `md` alatt, vagyis ahol egyoszlopos a layout. */
@media (max-width: 767px) {
.animate-blob {
animation: none !important;
}
}
/* === Mozgáscsökkentés ===
A háttér-foltok 384px-es, 64px-re elmosott elemek; folyamatos animációjuk
gyenge gépen fölösleges terhelés. Aki rendszerszinten kevesebb mozgást kér,
annál teljesen leállítjuk őket (és a többi dekoratív animációt is). */
@media (prefers-reduced-motion: reduce) {
.animate-blob,
.animate-pulse,
.animate-ping,
.animate-bounce,
.ko-aurora::before,
.ko-aurora::after,
.hover\:animate-slow-scroll:hover>img {
animation: none !important;
}
}