* {
box-sizing: border-box;
}
html,
body {
margin: 0;
padding: 0;
}
body {
min-height: 200vh;
background:
radial-gradient(
ellipse at 50% 0%,
#24282c 0%,
#101214 35%,
#040505 80%
);
color: #205036;
font-family:
Arial,
Helvetica,
sans-serif;
}
/* =========================================================
FIX HÁTTÉRKÉP
========================================================= */
body::before {
content: "";
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background-image:
url("images/ironman-bg.jpg");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
filter:
brightness(.72)
contrast(1.06)
saturate(.90)
hue-rotate(100deg);
}
/* =========================================================
SÖTÉT ÁTLÁTSZÓ RÉTEG
========================================================= */
body::after {
content: "";
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(
circle at center,
rgba(70,210,255,.08),
transparent 22%
),
linear-gradient(
180deg,
rgba(0,0,0,.25),
rgba(0,0,0,.43) 30%,
rgba(0,0,0,.56) 65%,
rgba(0,0,0,.68)
);
}
/* =========================================================
HEADER
========================================================= */
.armor-header {
--red-dark: #052b1a;
--red-mid: #0b6338;
--red-light: #26a65b;
--gold-dark: #4a3000;
--gold-mid: #a4750c;
--gold-light: #e0bb48;
--blue: #64ddff;
--blue-hot: #e9fcff;
position: sticky;
top: 0;
z-index: 1000;
background:
linear-gradient(
180deg,
rgba(0,0,0,.95),
rgba(6,8,10,.82) 55%,
rgba(3,4,5,.68)
);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
box-shadow:
0 14px 45px rgba(0,0,0,.55);
}
/* technikai háttér */
.armor-header::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
opacity: .22;
background:
radial-gradient(
ellipse at 50% 100%,
rgba(75,210,255,.13),
transparent 40%
),
repeating-linear-gradient(
90deg,
transparent 0,
transparent 90px,
rgba(255,255,255,.025) 91px
);
}
/* =========================================================
FELSŐ SÁV
========================================================= */
.armor-bar {
position: relative;
z-index: 20;
min-height: 96px;
display: flex;
align-items: center;
justify-content: center;
padding:
15px
clamp(15px,4vw,50px);
border-bottom:
1px solid rgba(255,255,255,.06);
}
/* =========================================================
LOGÓ
========================================================= */
.brand {
color: white;
text-decoration: none;
text-align: center;
}
.brand-title {
display: block;
font-size:
clamp(23px,3vw,36px);
font-weight: 800;
letter-spacing: .20em;
text-transform: uppercase;
}
.brand-subtitle {
display: block;
margin-top: 5px;
font-size: 8px;
color: #8f9ba1;
letter-spacing: .48em;
text-transform: uppercase;
}
/* =========================================================
HAMBURGER
========================================================= */
.mobile-toggle {
display: none;
position: absolute;
right: 18px;
top: 50%;
width: 48px;
height: 44px;
padding: 0;
transform:
translateY(-50%);
border: 0;
background: transparent;
cursor: pointer;
}
.mobile-toggle span {
position: absolute;
left: 9px;
width: 30px;
height: 2px;
background:
linear-gradient(
90deg,
#9b6707,
#e2bd48,
#0b6338
);
box-shadow:
0 0 5px rgba(86,213,255,.3);
transition:
transform .25s ease,
top .25s ease,
opacity .2s ease;
}
.mobile-toggle span:nth-child(1) {
top: 12px;
}
.mobile-toggle span:nth-child(2) {
top: 21px;
}
.mobile-toggle span:nth-child(3) {
top: 30px;
}
/* hamburger → X */
.armor-header.mobile-open
.mobile-toggle span:nth-child(1) {
top: 21px;
transform:
rotate(45deg);
}
.armor-header.mobile-open
.mobile-toggle span:nth-child(2) {
opacity: 0;
}
.armor-header.mobile-open
.mobile-toggle span:nth-child(3) {
top: 21px;
transform:
rotate(-45deg);
}
/* =========================================================
NAV
========================================================= */
.armor-zone {
position: relative;
max-width: 1500px;
margin: auto;
padding:
3px
clamp(10px,4vw,60px)
20px;
perspective: 1600px;
}
.armor-menu {
--cols: 5;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin: 0;
padding: 0;
list-style: none;
transform-style: preserve-3d;
}
/* =========================================================
FELSŐ MENÜPONT
========================================================= */
.armor-item {
position: relative;
flex:
0
0
calc(100% / var(--cols));
padding: 2px;
transform:
translateY(var(--y,0));
z-index: 1;
}
.armor-item:hover,
.armor-item.submenu-open {
z-index: 50;
}
/* =========================================================
PÁNCÉL EGYSÉG
========================================================= */
.armor-piece {
position: relative;
height: 60px;
transform-style: preserve-3d;
filter:
drop-shadow(
0 8px 8px rgba(0,0,0,.5)
);
transition:
transform .18s ease,
filter .2s ease;
}
/* =========================================================
HÁROM LEMEZ
========================================================= */
.armor-plate {
position: absolute;
pointer-events: none;
opacity: 0;
}
/* ---------------------------------------------------------
hátsó szerkezeti elem
--------------------------------------------------------- */
.plate-back {
inset:
2px
7px
4px
6px;
z-index: 1;
clip-path:
polygon(
6% 0,
94% 0,
100% 20%,
96% 83%,
87% 100%,
9% 94%,
0 74%,
2% 17%
);
border:
1px solid rgba(180,220,230,.18);
background:
linear-gradient(
145deg,
rgba(255,255,255,.13),
transparent 25%
),
linear-gradient(
135deg,
#080a0b,
#2c3235 45%,
#090b0c
);
}
/* ---------------------------------------------------------
középső lemez
--------------------------------------------------------- */
.plate-mid {
inset:
5px
4px
7px
9px;
z-index: 2;
clip-path:
polygon(
3% 11%,
14% 0,
94% 5%,
100% 27%,
93% 100%,
13% 95%,
0 70%
);
border:
1px solid rgba(255,255,255,.10);
}
/* ---------------------------------------------------------
első páncél
--------------------------------------------------------- */
.plate-front {
inset:
8px;
z-index: 3;
clip-path:
polygon(
7% 0,
91% 2%,
100% 21%,
94% 82%,
84% 100%,
14% 96%,
0 75%,
3% 18%
);
border:
1px solid rgba(255,255,255,.17);
}
/* =========================================================
PIROS ÉS ARANY
========================================================= */
.armor-item:nth-child(odd)
.plate-mid {
background:
linear-gradient(
135deg,
var(--red-dark),
var(--red-mid),
#073923
);
}
.armor-item:nth-child(odd)
.plate-front {
background:
linear-gradient(
145deg,
rgba(255,255,255,.18),
transparent 18%,
transparent 58%,
rgba(0,0,0,.32)
),
linear-gradient(
125deg,
var(--red-dark),
var(--red-light) 40%,
var(--red-mid) 63%,
#042719
);
}
.armor-item:nth-child(even)
.plate-mid {
background:
linear-gradient(
135deg,
var(--gold-dark),
var(--gold-mid),
#3c2700
);
}
.armor-item:nth-child(even)
.plate-front {
background:
linear-gradient(
145deg,
rgba(255,255,255,.23),
transparent 18%,
transparent 60%,
rgba(0,0,0,.3)
),
linear-gradient(
125deg,
var(--gold-dark),
var(--gold-light) 40%,
var(--gold-mid) 63%,
#422a00
);
}
/* =========================================================
MENÜ LINK
========================================================= */
.armor-main-link {
position: absolute;
z-index: 10;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
padding:
15px
42px
14px
13px;
color: white;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-size:
clamp(10px,1vw,14px);
font-weight: 800;
letter-spacing: .09em;
opacity: 0;
text-shadow:
0 2px 6px #000;
}
/* nincs dropdown */
.armor-item:not(.has-submenu)
.armor-main-link {
padding-right: 13px;
}
/* =========================================================
KÉK ILLESZTÉSI FÉNY
========================================================= */
.energy-seam {
position: absolute;
z-index: 8;
left: 18%;
right: 18%;
bottom: 18px;
height: 1px;
opacity: 0;
transform:
scaleX(0);
background:
linear-gradient(
90deg,
transparent,
rgba(87,215,255,.5),
var(--blue-hot),
rgba(87,215,255,.5),
transparent
);
box-shadow:
0 0 5px var(--blue),
0 0 12px rgba(80,215,255,.55);
}
/* =========================================================
DROPDOWN GOMB
========================================================= */
.submenu-toggle {
position: absolute;
z-index: 15;
right: 12px;
top: 50%;
width: 30px;
height: 30px;
transform:
translateY(-50%);
padding: 0;
border: 0;
color: white;
background:
rgba(0,0,0,.18);
cursor: pointer;
clip-path:
polygon(
16% 0,
84% 0,
100% 50%,
84% 100%,
16% 100%,
0 50%
);
}
.submenu-toggle::before {
content: "";
position: absolute;
left: 50%;
top: 47%;
width: 8px;
height: 8px;
border-right:
2px solid #c7f6ff;
border-bottom:
2px solid #c7f6ff;
transform:
translate(-50%,-65%)
rotate(45deg);
transition:
transform .25s ease;
}
.submenu-open
.submenu-toggle::before {
transform:
translate(-50%,-20%)
rotate(225deg);
}
/* =========================================================
DROPDOWN - DESKTOP
========================================================= */
.armor-submenu {
position: absolute;
left: 50%;
top: calc(100% - 2px);
z-index: 100;
min-width: 230px;
margin: 0;
padding:
13px
7px
8px;
list-style: none;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform:
translateX(-50%)
translateY(-8px)
scale(.96);
transform-origin:
top center;
transition:
opacity .2s ease,
transform .22s ease,
visibility .2s;
}
@media (hover:hover) {
.armor-item.has-submenu:hover
> .armor-submenu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform:
translateX(-50%)
translateY(0)
scale(1);
}
}
/*
focus-within billentyűzethez
*/
.armor-item.has-submenu:focus-within
> .armor-submenu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform:
translateX(-50%)
translateY(0)
scale(1);
}
/* =========================================================
DROPDOWN PÁNCÉLCSÍKOK
========================================================= */
.armor-submenu li {
position: relative;
margin: 3px 0;
}
.armor-submenu a {
display: block;
padding:9px 14px;
color: #eaf9fc;
text-decoration: none;
font-size: 13px;
letter-spacing: .035em;
background:
linear-gradient(
100deg,
rgba(19,23,25,.97),
rgba(45,49,51,.95),
rgba(13,15,16,.97)
);
border-left:
2px solid rgba(91,220,255,.55);
border-right:
1px solid rgba(255,255,255,.08);
clip-path:
polygon(
4% 0,
100% 0,
96% 100%,
0 100%,
0 18%
);
transition:
padding-left .18s ease,
filter .18s ease,
border-color .18s ease;
}
.armor-submenu li:nth-child(even) a {
background:
linear-gradient(
100deg,
rgba(49,31,2,.97),
rgba(91,62,5,.95),
rgba(25,17,1,.97)
);
}
.armor-submenu li:nth-child(odd) a {
background:
linear-gradient(
100deg,
rgba(5,43,26,.97),
rgba(11,99,56,.95),
rgba(3,30,18,.97)
);
}
.armor-submenu a:hover,
.armor-submenu a:focus-visible {
padding-left: 23px;
border-left-color:
var(--blue-hot);
filter:
brightness(1.25);
}
/* =========================================================
DESKTOP ASSEMBLY
========================================================= */
.armor-item.ready
.plate-back {
animation:
backLock
.55s
calc(var(--delay) + .12s)
cubic-bezier(.2,.8,.2,1)
forwards;
}
.armor-item.ready
.plate-mid {
animation:
midLock
.48s
calc(var(--delay) + .32s)
cubic-bezier(.2,.8,.2,1)
forwards;
}
.armor-item.ready
.plate-front {
animation:
frontLock
.45s
calc(var(--delay) + .50s)
cubic-bezier(.15,.8,.2,1.05)
forwards;
}
.armor-item.ready
.energy-seam {
animation:
seamOn
.5s
calc(var(--delay) + .75s)
ease
forwards;
}
.armor-item.ready
.armor-main-link {
animation:
labelOn
.38s
calc(var(--delay) + .70s)
ease
forwards;
}
/* =========================================================
HOVER
========================================================= */
.armor-item:hover
.armor-piece {
transform:
translateZ(15px)
scale(1.015);
filter:
brightness(1.14)
drop-shadow(
0 8px 11px rgba(0,0,0,.55)
)
drop-shadow(
0 0 6px rgba(81,216,255,.3)
);
}
/* =========================================================
ANIMÁCIÓK
========================================================= */
@keyframes backLock {
0% {
opacity: 0;
transform:
translate3d(
var(--back-x),
-14px,
-50px
)
rotateZ(
var(--back-r)
)
scale(.73);
}
70% {
opacity: 1;
transform:
translate3d(
2px,
0,
-2px
)
scale(1.02);
}
100% {
opacity: 1;
transform:
translate3d(0,0,0)
scale(1);
}
}
@keyframes midLock {
0% {
opacity: 0;
transform:
translate3d(
var(--mid-x),
6px,
-15px
)
rotateZ(
var(--mid-r)
)
scale(.80);
}
100% {
opacity: 1;
transform:
translate3d(0,0,3px)
rotateZ(0)
scale(1);
}
}
@keyframes frontLock {
0% {
opacity: 0;
transform:
translate3d(
var(--front-x),
30px,
25px
)
rotateZ(
var(--front-r)
)
scale(.82);
}
70% {
opacity: 1;
transform:
translate3d(
0,
-2px,
10px
)
scale(1.025);
}
100% {
opacity: 1;
transform:
translate3d(
0,
0,
8px
)
scale(1);
}
}
@keyframes seamOn {
0% {
opacity: 0;
transform:
scaleX(0);
}
60% {
opacity: 1;
transform:
scaleX(1);
}
100% {
opacity: .38;
transform:
scaleX(1);
}
}
@keyframes labelOn {
from {
opacity: 0;
transform:
translateY(6px);
}
to {
opacity: 1;
transform:
translateY(0);
}
}
/* =========================================================
MOBIL
========================================================= */
@media (max-width: 820px) {
.armor-header {
overflow: visible;
}
.armor-bar {
min-height: 70px;
justify-content: flex-start;
padding:
10px
76px
10px
16px;
}
.brand {
text-align: left;
}
.brand-title {
font-size: 19px;
letter-spacing: .13em;
}
.brand-subtitle {
font-size: 6px;
letter-spacing: .25em;
}
.mobile-toggle {
display: block;
}
/* ===============================================
teljes mobil menü overlay
=============================================== */
.armor-zone {
position: absolute;
left: 0;
right: 0;
top: 100%;
max-width: none;
max-height:
calc(100vh - 70px);
overflow-y: auto;
/*
* V1.2 - MOBIL MENÜ SCROLL FIX
*
* A hamburger menü saját scrollja ne adódjon tovább a body/window felé,
* amikor az overlay tetejét vagy alját elérjük. Így a fejléc auto-hide
* logikája nem kap fals görgetési jelet a menü görgetése közben.
*/
overscroll-behavior-y: contain;
-webkit-overflow-scrolling: touch;
touch-action: pan-y;
padding:
14px
8px
25px;
background:
linear-gradient(
180deg,
rgba(3,4,5,.97),
rgba(7,9,11,.96)
);
border-top:
1px solid rgba(255,255,255,.05);
box-shadow:
0 22px 35px rgba(0,0,0,.6);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform:
translateY(-12px);
transition:
opacity .25s ease,
transform .25s ease,
visibility .25s;
}
.armor-header.mobile-open
.armor-zone {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform:
translateY(0);
}
/*
Mobilon nincs grid.
Egy függőleges armor stack.
*/
.armor-menu {
display: block;
}
.armor-item {
width:
min(94vw,540px);
margin:
0 auto 3px;
padding: 0;
transform: none;
opacity: 1;
}
.armor-piece {
height: 66px;
}
/*
Desktop betöltési animáció mobilon
kikapcsolva.
Hamburger nyitásakor épülnek össze.
*/
.armor-item.ready
.plate-back,
.armor-item.ready
.plate-mid,
.armor-item.ready
.plate-front,
.armor-item.ready
.energy-seam,
.armor-item.ready
.armor-main-link {
animation: none;
opacity: 0;
}
.armor-header.mobile-open
.armor-item.ready
.plate-back {
animation:
backLock
.42s
var(--mobile-delay)
ease-out
forwards;
}
.armor-header.mobile-open
.armor-item.ready
.plate-mid {
animation:
midLock
.40s
calc(
var(--mobile-delay) +
100ms
)
ease-out
forwards;
}
.armor-header.mobile-open
.armor-item.ready
.plate-front {
animation:
frontLock
.38s
calc(
var(--mobile-delay) +
190ms
)
ease-out
forwards;
}
.armor-header.mobile-open
.armor-item.ready
.energy-seam {
animation:
seamOn
.35s
calc(
var(--mobile-delay) +
300ms
)
ease-out
forwards;
}
.armor-header.mobile-open
.armor-item.ready
.armor-main-link {
animation:
labelOn
.30s
calc(
var(--mobile-delay) +
250ms
)
ease-out
forwards;
}
.armor-main-link {
justify-content: flex-start;
padding-left: 25px;
font-size: 12px;
letter-spacing: .08em;
}
/* ===============================================
mobil dropdown = accordion
=============================================== */
.armor-submenu {
position: relative;
left: auto;
top: auto;
width:
calc(100% - 26px);
min-width: 0;
margin:
0 auto;
padding:
0 4px;
height: 0;
overflow: hidden;
opacity: 0;
visibility: visible;
pointer-events: none;
transform: none;
transition:
height .28s ease,
opacity .2s ease,
padding .2s ease;
}
.armor-item.submenu-open
> .armor-submenu {
opacity: 1;
pointer-events: auto;
padding:
4px
4px
7px;
}
/*
hover desktop szabályok ne nyissák ki
mobilon
*/
.armor-item.has-submenu:hover
> .armor-submenu {
transform: none;
}
.armor-submenu a {
font-size: 12px;
padding:
11px
16px;
}
}
/* =========================================================
TESZT TÉMA – BOOTSTRAP VÖRÖS ELEMEK ZÖLD HANGOLÁSA
========================================================= */
.bg-danger,
.accordion-button.bg-danger {
background-color: #167747 !important;
color: #f3fff8 !important;
}
.btn-danger {
--bs-btn-color: #f3fff8;
--bs-btn-bg: #0b6338;
--bs-btn-border-color: #16814a;
--bs-btn-hover-color: #ffffff;
--bs-btn-hover-bg: #084c2c;
--bs-btn-hover-border-color: #26a65b;
--bs-btn-focus-shadow-rgb: 38, 166, 91;
--bs-btn-active-color: #ffffff;
--bs-btn-active-bg: #063b23;
--bs-btn-active-border-color: #2dbb68;
--bs-btn-disabled-color: #d8eee2;
--bs-btn-disabled-bg: #315d46;
--bs-btn-disabled-border-color: #416f57;
}
.text-danger,
.error {
color: #63d68f !important;
}
.border-danger {
border-color: #26a65b !important;
}
.alert-danger {
color: #dff8e8;
background-color: #123f29;
border-color: #26744a;
}
.btn-outline-danger {
--bs-btn-color: #63d68f;
--bs-btn-border-color: #26a65b;
--bs-btn-hover-color: #ffffff;
--bs-btn-hover-bg: #0b6338;
--bs-btn-hover-border-color: #26a65b;
--bs-btn-focus-shadow-rgb: 38, 166, 91;
--bs-btn-active-color: #ffffff;
--bs-btn-active-bg: #084c2c;
--bs-btn-active-border-color: #2dbb68;
}
.red,
.status-finished {
color: #e6fff0 !important;
background-color: #0b6338 !important;
}
.btn-delete {
color: #ffffff !important;
background: #0b6338 !important;
border-color: #26a65b !important;
}
.btn-delete:hover {
background: #084c2c !important;
}
.content-section [style*="#ffb4bf"] {
color: #63d68f !important;
}
/* =========================================================
KIS MOBIL
========================================================= */
@media (max-width: 420px) {
.armor-piece {
height: 61px;
}
.armor-main-link {
font-size: 10px;
padding-left: 20px;
}
.submenu-toggle {
right: 9px;
width: 28px;
height: 28px;
}
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration:
.001ms !important;
animation-iteration-count:
1 !important;
scroll-behavior:
auto !important;
}
}
/* =========================================================
DEMO CONTENT
========================================================= */
.content {
max-width: 1100px;
margin: 70px auto;
padding: 25px;
color: #aab0b3;
line-height: 1.7;
}
/*
*
* Content
*
*/
:root {
--bg-dark: #060708;
--glass: rgba(0,0,0,.44);
--glass-strong: rgba(0,0,0,.62);
--red-1: #052b1a;
--red-2: #095531;
--red-3: #208e50;
--gold-1: #4e3300;
--gold-2: #9a6d0b;
--gold-3: #dfb94b;
--blue-1: #63ddff;
--blue-2: #dffbff;
--rail-width: clamp(12px, 1.4vw, 22px);
--dock-height: 110px;
}
* {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
}
body {
min-height: 100vh;
background: var(--bg-dark);
/*color: #fff;*/
font-family: Arial, Helvetica, sans-serif;
overflow-x: hidden;
}
/* =========================================================
FEJLÉC
========================================================= */
.site-header {
position: relative;
z-index: 20;
}
.header-glass {
padding: 22px 24px 14px;
background:
linear-gradient(
180deg,
rgba(0,0,0,.72),
rgba(0,0,0,.38)
);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(255,255,255,.06);
}
.logo-block {
text-align: center;
}
.logo-main {
font-size: clamp(24px, 3vw, 38px);
font-weight: 900;
letter-spacing: .20em;
text-transform: uppercase;
}
.logo-sub {
margin-top: 6px;
font-size: 10px;
letter-spacing: .35em;
text-transform: uppercase;
color: #9ca7ac;
}
.nav-placeholder {
display: flex;
justify-content: center;
gap: 18px;
padding: 12px 16px 18px;
background: rgba(0,0,0,.22);
}
.nav-placeholder a {
color: #fff;
text-decoration: none;
font-size: 14px;
letter-spacing: .08em;
text-transform: uppercase;
}
/* =========================================================
OLDALSÓ PÁNCÉL-RAIL
========================================================= */
.side-rail {
position: fixed;
top: 0;
bottom: 0;
width: var(--rail-width);
z-index: 6;
pointer-events: none;
}
.side-rail-left {
left: 0;
}
.side-rail-right {
right: 0;
}
.rail-piece {
position: absolute;
width: 100%;
opacity: 0;
transform: scaleY(.85) translateX(0);
transition:
opacity .28s ease,
transform .28s ease,
filter .28s ease;
filter:
drop-shadow(0 0 0 rgba(0,0,0,0));
}
.rail-piece.active {
opacity: 1;
transform: scaleY(1) translateX(0);
filter:
drop-shadow(0 0 6px rgba(90,220,255,.22))
drop-shadow(0 0 12px rgba(0,0,0,.32));
}
/* bal oldali formák */
.side-rail-left .rail-piece.red {
background:
linear-gradient(
145deg,
rgba(255,255,255,.14),
transparent 18%,
transparent 55%,
rgba(0,0,0,.28)
),
linear-gradient(
135deg,
var(--red-1),
var(--red-3) 45%,
var(--red-2)
);
}
.side-rail-left .rail-piece.gold {
background:
linear-gradient(
145deg,
rgba(255,255,255,.20),
transparent 18%,
transparent 55%,
rgba(0,0,0,.28)
),
linear-gradient(
135deg,
var(--gold-1),
var(--gold-3) 45%,
var(--gold-2)
);
}
.side-rail-left .shape-a {
clip-path: polygon(0 0, 100% 0, 72% 100%, 0 100%);
}
.side-rail-left .shape-b {
clip-path: polygon(0 0, 82% 0, 100% 36%, 66% 100%, 0 100%);
}
.side-rail-left .shape-c {
clip-path: polygon(0 0, 100% 14%, 78% 100%, 0 100%);
}
/* jobb oldali formák */
.side-rail-right .rail-piece.red {
background:
linear-gradient(
215deg,
rgba(255,255,255,.14),
transparent 18%,
transparent 55%,
rgba(0,0,0,.28)
),
linear-gradient(
225deg,
var(--red-1),
var(--red-3) 45%,
var(--red-2)
);
}
.side-rail-right .rail-piece.gold {
background:
linear-gradient(
215deg,
rgba(255,255,255,.20),
transparent 18%,
transparent 55%,
rgba(0,0,0,.28)
),
linear-gradient(
225deg,
var(--gold-1),
var(--gold-3) 45%,
var(--gold-2)
);
}
.side-rail-right .shape-a {
clip-path: polygon(0 0, 100% 0, 100% 100%, 28% 100%);
}
.side-rail-right .shape-b {
clip-path: polygon(18% 0, 100% 0, 100% 100%, 34% 100%, 0 36%);
}
.side-rail-right .shape-c {
clip-path: polygon(0 14%, 100% 0, 100% 100%, 22% 100%);
}
/* belső fémes él */
.rail-piece::before {
content: "";
position: absolute;
inset: 1px;
clip-path: inherit;
border-left: 1px solid rgba(255,255,255,.12);
border-right: 1px solid rgba(255,255,255,.08);
}
/* kék illesztési fény */
.rail-piece::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -1px;
height: 2px;
opacity: 0;
background:
linear-gradient(
90deg,
transparent,
rgba(95,223,255,.95),
transparent
);
box-shadow:
0 0 6px rgba(95,223,255,.55);
transition: opacity .28s ease;
}
.rail-piece.active::after {
opacity: .70;
}
/* =========================================================
TARTALOM
========================================================= */
.page-main {
position: relative;
z-index: 10;
width: calc(100% - (var(--rail-width) * 2));
max-width: 1600px;
margin: 0 auto;
padding:
24px
clamp(28px, 5vw, 72px)
180px;
}
.glass-panel {
margin: 36px 0;
padding: 34px;
background:
linear-gradient(
180deg,
rgba(0,0,0,.56),
rgba(0,0,0,.40)
);
border: 1px solid rgba(255,255,255,.06);
backdrop-filter: blur(9px);
-webkit-backdrop-filter: blur(9px);
box-shadow:
0 18px 34px rgba(0,0,0,.34);
min-width: 0;
overflow-x: auto;
}
.content-section > .container,
.content-section > .container-fluid {
max-width: 100%;
}
.glass-panel h1,
.glass-panel h2 {
margin-top: 0;
}
.glass-panel p {
max-width: 820px;
/*color: #d8dde0;*/
line-height: 1.75;
}
/* =========================================================
FOOTER DOCK
========================================================= */
.armor-footer-dock {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 30;
pointer-events: none;
transform: translateY(115%);
transition: transform .45s cubic-bezier(.2,.82,.2,1);
}
.armor-footer-dock.live {
transform: translateY(0);
pointer-events: auto;
}
.footer-shell {
position: relative;
width: calc(100% - (var(--rail-width) * 2));
margin: 0 auto;
min-height: var(--dock-height);
padding: 20px 18px 16px;
background:
linear-gradient(
180deg,
rgba(0,0,0,.76),
rgba(0,0,0,.54)
);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-top: 1px solid rgba(255,255,255,.05);
box-shadow:
0 -16px 28px rgba(0,0,0,.42);
overflow: hidden;
}
/* footer darabok */
.footer-piece {
position: absolute;
top: 10px;
bottom: 10px;
pointer-events: none;
opacity: 0;
transform: translateY(28px) scale(.90);
transition:
opacity .35s ease,
transform .35s ease,
filter .35s ease;
}
.armor-footer-dock.live .footer-piece {
opacity: 1;
transform: translateY(0) scale(1);
filter:
drop-shadow(0 0 6px rgba(82,216,255,.18));
}
.fp1, .fp2, .fp3, .fp4, .fp5 {
background-size: cover;
border: 1px solid rgba(255,255,255,.10);
}
.fp1 {
left: 0;
width: 19%;
background:
linear-gradient(145deg, rgba(255,255,255,.14), transparent 18%, transparent 58%, rgba(0,0,0,.28)),
linear-gradient(125deg, var(--red-1), var(--red-3) 40%, var(--red-2));
clip-path: polygon(0 0, 100% 0, 84% 100%, 0 100%);
transition-delay: .02s;
}
.fp2 {
left: 16%;
width: 18%;
background:
linear-gradient(145deg, rgba(255,255,255,.20), transparent 18%, transparent 58%, rgba(0,0,0,.25)),
linear-gradient(125deg, var(--gold-1), var(--gold-3) 40%, var(--gold-2));
clip-path: polygon(10% 0, 100% 0, 100% 74%, 88% 100%, 0 100%, 0 22%);
transition-delay: .08s;
}
.fp3 {
left: 31%;
width: 38%;
background:
linear-gradient(145deg, rgba(255,255,255,.14), transparent 18%, transparent 58%, rgba(0,0,0,.28)),
linear-gradient(125deg, var(--red-1), var(--red-3) 40%, var(--red-2));
clip-path: polygon(4% 0, 96% 0, 100% 22%, 95% 100%, 5% 100%, 0 22%);
transition-delay: .15s;
}
.fp4 {
right: 16%;
width: 18%;
background:
linear-gradient(145deg, rgba(255,255,255,.20), transparent 18%, transparent 58%, rgba(0,0,0,.25)),
linear-gradient(125deg, var(--gold-1), var(--gold-3) 40%, var(--gold-2));
clip-path: polygon(0 0, 90% 0, 100% 22%, 100% 100%, 12% 100%, 0 74%);
transition-delay: .22s;
}
.fp5 {
right: 0;
width: 19%;
background:
linear-gradient(145deg, rgba(255,255,255,.14), transparent 18%, transparent 58%, rgba(0,0,0,.28)),
linear-gradient(125deg, var(--red-1), var(--red-3) 40%, var(--red-2));
clip-path: polygon(0 0, 100% 0, 100% 100%, 16% 100%);
transition-delay: .29s;
}
/* kék élvillódzás */
.footer-piece::after {
content: "";
position: absolute;
left: 6%;
right: 6%;
bottom: 6px;
height: 2px;
background:
linear-gradient(90deg, transparent, var(--blue-1), transparent);
box-shadow:
0 0 6px rgba(99,221,255,.55),
0 0 14px rgba(99,221,255,.25);
opacity: .20;
animation: dockFlicker 3.8s infinite;
}
.footer-label-wrap {
position: relative;
z-index: 10;
min-height: calc(var(--dock-height) - 36px);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 0;
transform: translateY(8px);
transition:
opacity .35s ease .44s,
transform .35s ease .44s;
pointer-events: auto;
}
.footer-label-wrap a {
position: relative;
z-index: 11;
pointer-events: auto;
color: inherit;
text-decoration: none;
}
.armor-footer-dock.live .footer-label-wrap {
opacity: 1;
transform: translateY(0);
}
.footer-label {
font-size: clamp(18px, 2vw, 30px);
font-weight: 900;
letter-spacing: .18em;
text-transform: uppercase;
text-align: center;
color: #f1fbff;
text-shadow:
0 0 10px rgba(91,220,255,.24);
}
.footer-sub {
margin-top: 8px;
font-size: 11px;
letter-spacing: .16em;
text-transform: uppercase;
color: #a5b2b8;
text-align: center;
}
@keyframes dockFlicker {
0%, 72%, 100% {
opacity: .18;
filter: brightness(.95);
}
75% {
opacity: .75;
filter: brightness(1.45);
}
78% {
opacity: .28;
}
81% {
opacity: .62;
}
}
/* =========================================================
MOBIL
========================================================= */
@media (max-width: 820px) {
:root {
--rail-width: 8px;
--dock-height: 92px;
}
.page-main {
padding:
18px
18px
150px;
}
.glass-panel {
padding: 22px 18px;
}
.nav-placeholder {
flex-wrap: wrap;
gap: 10px;
}
.footer-label {
letter-spacing: .08em;
font-size: 16px;
}
.footer-sub {
font-size: 9px;
letter-spacing: .08em;
}
}
/* =========================================================
V0.7 - KESKENY, TÖBBRÉTEGŰ OLDALSÓ ARMOR-RAIL
========================================================= */
/*
A rail keskenyebb lett, de ugyanazt a rétegzett mechanikai logikát
használja, mint a header páncélelemei:
1. sötét gunmetal hordozóváz
2. visszahúzott piros/arany középlemez
3. fényesebb elülső fedőlemez
4. belső kék-fehér energiaél
5. darabok közötti "energiahegesztés"
A JS továbbra is scroll-pozíció alapján, darabonként aktiválja őket.
*/
:root {
--rail-width: clamp(8px, .82vw, 14px);
}
.side-rail {
position: absolute;
top: 0;
bottom: auto;
width: var(--rail-width);
overflow: visible;
contain: layout style;
z-index: 6;
pointer-events: none;
}
.side-rail-left {
left: 0;
}
.side-rail-right {
right: 0;
}
/*
A wrapper maga már nem színes lemez. Csak a három belső réteget
hordozza. Ezzel a rail vizuálisan tömörebb, miközben keskenyebb.
*/
.rail-piece,
.side-rail-left .rail-piece.red,
.side-rail-left .rail-piece.gold,
.side-rail-right .rail-piece.red,
.side-rail-right .rail-piece.gold {
position: absolute;
width: 100%;
opacity: 0;
background: transparent !important;
border: 0;
clip-path: none !important;
transform-origin: 50% 0%;
will-change: transform, opacity, filter;
filter:
brightness(.72)
saturate(.78)
drop-shadow(0 0 0 rgba(120,235,255,0));
transition: none;
isolation: isolate;
}
.side-rail-left .rail-piece {
transform:
translate3d(-8px, 48px, 0)
scaleY(.80)
scaleX(.92);
}
.side-rail-right .rail-piece {
transform:
translate3d(8px, 48px, 0)
scaleY(.80)
scaleX(.92);
}
/* =========================================================
RÉTEGEK
========================================================= */
.rail-layer {
position: absolute;
display: block;
pointer-events: none;
opacity: 0;
will-change: transform, opacity, filter;
}
/* 1. hátsó mechanikai váz */
.rail-back {
inset: 0;
z-index: 1;
clip-path: var(--rail-clip-back);
background:
linear-gradient(
90deg,
#050709 0%,
#252c30 30%,
#4b555a 52%,
#1b2023 72%,
#07090a 100%
);
box-shadow:
inset 0 0 0 1px rgba(205,238,246,.11),
inset 0 0 5px rgba(0,0,0,.72);
}
/* 2. színes középső páncél */
.rail-mid {
top: 3px;
bottom: 3px;
z-index: 2;
clip-path: var(--rail-clip-mid);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.09),
inset 0 0 4px rgba(0,0,0,.48);
}
.side-rail-left .rail-mid {
left: 2px;
right: 0;
}
.side-rail-right .rail-mid {
left: 0;
right: 2px;
}
/* 3. elülső, keskenyebb fémpáncél */
.rail-front {
top: 7px;
bottom: 7px;
z-index: 3;
clip-path: var(--rail-clip-front);
box-shadow:
inset 0 0 0 1px rgba(255,255,255,.14),
inset 0 0 3px rgba(0,0,0,.38);
}
.side-rail-left .rail-front {
left: 4px;
right: 0;
}
.side-rail-right .rail-front {
left: 0;
right: 4px;
}
/* =========================================================
PIROS / ARANY FÉMES RÉTEGEK
========================================================= */
.rail-piece.red .rail-mid {
background:
linear-gradient(
135deg,
rgba(255,255,255,.11),
transparent 18%,
transparent 60%,
rgba(0,0,0,.36)
),
linear-gradient(
90deg,
#042719,
#0a5b34 48%,
#168047 72%,
#052f1d
);
}
.rail-piece.red .rail-front {
background:
linear-gradient(
135deg,
rgba(255,255,255,.31) 0%,
rgba(255,255,255,.05) 15%,
transparent 34%,
rgba(0,0,0,.18) 67%,
rgba(0,0,0,.48) 100%
),
linear-gradient(
90deg,
#074328,
#27a85e 48%,
#0b6338 78%,
#052d1b
);
}
.rail-piece.gold .rail-mid {
background:
linear-gradient(
135deg,
rgba(255,255,255,.15),
transparent 19%,
transparent 60%,
rgba(0,0,0,.34)
),
linear-gradient(
90deg,
#432b00,
#956607 46%,
#b98819 72%,
#4c3000
);
}
.rail-piece.gold .rail-front {
background:
linear-gradient(
135deg,
rgba(255,255,255,.38) 0%,
rgba(255,255,255,.08) 17%,
transparent 35%,
rgba(0,0,0,.16) 67%,
rgba(0,0,0,.42) 100%
),
linear-gradient(
90deg,
#6b4704,
#dfb645 48%,
#a3740e 78%,
#4d3100
);
}
/* =========================================================
MECHANIKAI RÉSZLET + BELSŐ ENERGIAÉL
========================================================= */
.rail-mech-line {
position: absolute;
z-index: 5;
top: 33%;
width: 3px;
height: 24%;
opacity: 0;
pointer-events: none;
background:
linear-gradient(
180deg,
transparent,
rgba(3,6,8,.92) 20%,
rgba(165,229,242,.24) 50%,
rgba(3,6,8,.92) 80%,
transparent
);
box-shadow:
0 0 2px rgba(0,0,0,.85),
inset 0 0 1px rgba(255,255,255,.12);
}
.side-rail-left .rail-mech-line {
right: 1px;
}
.side-rail-right .rail-mech-line {
left: 1px;
}
.rail-edge-glow {
position: absolute;
z-index: 6;
top: 10px;
bottom: 10px;
width: 1px;
opacity: 0;
pointer-events: none;
background:
linear-gradient(
180deg,
transparent,
rgba(235,253,255,.75) 18%,
rgba(104,225,255,.52) 52%,
rgba(235,253,255,.72) 82%,
transparent
);
box-shadow:
0 0 2px rgba(255,255,255,.72),
0 0 5px rgba(154,240,255,.62),
0 0 9px rgba(73,207,255,.32);
}
.side-rail-left .rail-edge-glow {
right: -1px;
}
.side-rail-right .rail-edge-glow {
left: -1px;
}
/* darabok közötti energiahegesztés */
.rail-seam {
position: absolute;
z-index: 8;
left: -45%;
right: -45%;
bottom: -2px;
height: 4px;
opacity: 0;
pointer-events: none;
background:
radial-gradient(
ellipse at center,
rgba(255,255,255,1) 0%,
rgba(211,250,255,.98) 12%,
rgba(123,231,255,.83) 32%,
rgba(68,204,255,.42) 53%,
transparent 76%
);
box-shadow:
0 0 3px rgba(255,255,255,.92),
0 0 7px rgba(165,244,255,.84),
0 0 13px rgba(73,207,255,.58),
0 0 22px rgba(73,207,255,.26);
}
/* =========================================================
RÜCSKÖS, DE FOLYTONOS GEOMETRIA
========================================================= */
/*
A felső és alsó él mindig teljes szélességű, ezért az OVERLAP mellett
a következő elem ténylegesen rá tud záródni az előzőre. Csak a belső
oldal "rücskös". A három réteg kissé eltérő kontúrt kap.
*/
.side-rail-left .shape-a {
--rail-clip-back: polygon(0 0,100% 0,100% 12%,58% 20%,96% 31%,68% 43%,100% 57%,61% 70%,88% 82%,100% 100%,0 100%);
--rail-clip-mid: polygon(0 0,100% 0,100% 15%,51% 23%,92% 34%,63% 45%,100% 59%,56% 72%,83% 84%,100% 100%,0 100%);
--rail-clip-front: polygon(0 0,100% 0,100% 18%,44% 26%,88% 37%,58% 48%,100% 61%,50% 75%,78% 87%,100% 100%,0 100%);
}
.side-rail-left .shape-b {
--rail-clip-back: polygon(0 0,100% 0,74% 13%,100% 27%,62% 39%,94% 53%,55% 66%,100% 81%,76% 100%,0 100%);
--rail-clip-mid: polygon(0 0,100% 0,67% 16%,96% 29%,57% 42%,89% 55%,50% 69%,100% 83%,70% 100%,0 100%);
--rail-clip-front: polygon(0 0,100% 0,60% 19%,91% 32%,52% 45%,84% 58%,45% 72%,96% 86%,64% 100%,0 100%);
}
.side-rail-left .shape-c {
--rail-clip-back: polygon(0 0,100% 0,100% 10%,64% 23%,93% 36%,54% 49%,100% 63%,69% 76%,91% 88%,100% 100%,0 100%);
--rail-clip-mid: polygon(0 0,100% 0,100% 13%,59% 26%,88% 39%,49% 52%,95% 66%,63% 79%,86% 90%,100% 100%,0 100%);
--rail-clip-front: polygon(0 0,100% 0,100% 16%,53% 29%,83% 42%,44% 55%,90% 69%,57% 82%,81% 92%,100% 100%,0 100%);
}
.side-rail-right .shape-a {
--rail-clip-back: polygon(0 0,100% 0,100% 100%,0 100%,12% 82%,39% 70%,0 57%,32% 43%,4% 31%,42% 20%,0 12%);
--rail-clip-mid: polygon(0 0,100% 0,100% 100%,0 100%,17% 84%,44% 72%,0 59%,37% 45%,8% 34%,49% 23%,0 15%);
--rail-clip-front: polygon(0 0,100% 0,100% 100%,0 100%,22% 87%,50% 75%,0 61%,42% 48%,12% 37%,56% 26%,0 18%);
}
.side-rail-right .shape-b {
--rail-clip-back: polygon(0 0,100% 0,100% 100%,24% 100%,0 81%,45% 66%,6% 53%,38% 39%,0 27%,26% 13%);
--rail-clip-mid: polygon(0 0,100% 0,100% 100%,30% 100%,0 83%,50% 69%,11% 55%,43% 42%,4% 29%,33% 16%);
--rail-clip-front: polygon(0 0,100% 0,100% 100%,36% 100%,4% 86%,55% 72%,16% 58%,48% 45%,9% 32%,40% 19%);
}
.side-rail-right .shape-c {
--rail-clip-back: polygon(0 0,100% 0,100% 100%,0 100%,9% 88%,31% 76%,0 63%,46% 49%,7% 36%,36% 23%,0 10%);
--rail-clip-mid: polygon(0 0,100% 0,100% 100%,0 100%,14% 90%,37% 79%,5% 66%,51% 52%,12% 39%,41% 26%,0 13%);
--rail-clip-front: polygon(0 0,100% 0,100% 100%,0 100%,19% 92%,43% 82%,10% 69%,56% 55%,17% 42%,47% 29%,0 16%);
}
/* =========================================================
ÖSSZEÁLLÁS - WRAPPER
========================================================= */
.rail-piece.active {
animation:
railPieceLock .55s var(--rail-delay, 0ms)
cubic-bezier(.16,.84,.24,1.04) forwards,
railArmorGlow 4.9s calc(var(--rail-delay, 0ms) + 900ms)
ease-in-out infinite;
}
/* A három lemez nem egyszerre érkezik. */
.rail-piece.active .rail-back {
animation:
railBackLock .30s calc(var(--rail-delay, 0ms) + 70ms)
cubic-bezier(.20,.82,.25,1) forwards;
}
.rail-piece.active .rail-mid {
animation:
railMidLock .32s calc(var(--rail-delay, 0ms) + 145ms)
cubic-bezier(.18,.84,.24,1) forwards;
}
.rail-piece.active .rail-front {
animation:
railFrontLock .34s calc(var(--rail-delay, 0ms) + 225ms)
cubic-bezier(.15,.84,.22,1.04) forwards;
}
.rail-piece.active .rail-mech-line {
animation:
railDetailOnline .28s calc(var(--rail-delay, 0ms) + 345ms)
ease-out forwards;
}
.rail-piece.active .rail-edge-glow {
animation:
railEdgeIgnition .60s calc(var(--rail-delay, 0ms) + 365ms)
ease-out forwards,
railEdgeFlicker 4.5s calc(var(--rail-delay, 0ms) + 1.2s)
linear infinite;
}
.rail-piece.active .rail-seam {
animation:
railSeamIgnition .72s calc(var(--rail-delay, 0ms) + 390ms)
ease-out forwards,
railSeamFlicker 4.1s calc(var(--rail-delay, 0ms) + 1.25s)
linear infinite;
}
/* =========================================================
VISSZAFELÉ GÖRGETÉS - SZÉTSZERELÉS
========================================================= */
.rail-piece.reversing {
animation:
railPieceUnlock .52s 110ms cubic-bezier(.55,.04,.72,.30) forwards;
}
.rail-piece.reversing .rail-front {
animation:
railFrontUnlock .25s 0ms ease-in forwards;
}
.rail-piece.reversing .rail-mid {
animation:
railMidUnlock .27s 70ms ease-in forwards;
}
.rail-piece.reversing .rail-back {
animation:
railBackUnlock .28s 135ms ease-in forwards;
}
.rail-piece.reversing .rail-mech-line {
animation:
railDetailOffline .18s ease-in forwards;
}
.rail-piece.reversing .rail-edge-glow {
animation:
railEdgeShutdown .28s ease-out forwards;
}
.rail-piece.reversing .rail-seam {
animation:
railSeamShutdown .38s ease-out forwards;
}
/* =========================================================
KEYFRAMES
========================================================= */
@keyframes railPieceLock {
0% {
opacity: 0;
transform:
translate3d(var(--rail-enter-x,0px),48px,0)
scaleY(.80)
scaleX(.92);
filter:
brightness(.66)
saturate(.72)
drop-shadow(0 0 0 rgba(120,235,255,0));
}
68% {
opacity: 1;
transform:
translate3d(0,-2px,0)
scaleY(1.018)
scaleX(1.01);
filter:
brightness(1.12)
saturate(1.05)
drop-shadow(0 0 7px rgba(140,239,255,.38));
}
100% {
opacity: 1;
transform: translate3d(0,0,0) scale(1);
filter:
brightness(1)
saturate(1)
drop-shadow(0 0 5px rgba(111,226,255,.16));
}
}
@keyframes railPieceUnlock {
0% {
opacity: 1;
transform: translate3d(0,0,0) scale(1);
filter:
brightness(1.10)
drop-shadow(0 0 4px rgba(255,255,255,.42))
drop-shadow(0 0 10px rgba(137,235,255,.40));
}
25% {
opacity: 1;
transform: translate3d(0,2px,0) scaleY(1.01);
filter:
brightness(1.17)
drop-shadow(0 0 5px rgba(255,255,255,.58))
drop-shadow(0 0 12px rgba(121,230,255,.50));
}
100% {
opacity: 0;
transform:
translate3d(var(--rail-enter-x,0px),48px,0)
scaleY(.80)
scaleX(.92);
filter:
brightness(.66)
saturate(.72)
drop-shadow(0 0 0 rgba(120,235,255,0));
}
}
@keyframes railBackLock {
from {
opacity: 0;
transform: translate3d(var(--rail-back-x,0px),-7px,-18px) scaleY(.91);
}
72% {
opacity: 1;
transform: translate3d(0,1px,0) scaleY(1.02);
}
to {
opacity: 1;
transform: translate3d(0,0,0) scale(1);
}
}
@keyframes railMidLock {
from {
opacity: 0;
transform: translate3d(var(--rail-mid-x,0px),8px,3px) scaleY(.92);
}
to {
opacity: 1;
transform: translate3d(0,0,3px) scale(1);
}
}
@keyframes railFrontLock {
from {
opacity: 0;
transform: translate3d(var(--rail-front-x,0px),14px,7px) scaleY(.90);
filter: brightness(.75);
}
68% {
opacity: 1;
transform: translate3d(0,-1px,8px) scaleY(1.025);
filter: brightness(1.22);
}
to {
opacity: 1;
transform: translate3d(0,0,7px) scale(1);
filter: brightness(1);
}
}
@keyframes railFrontUnlock {
from { opacity: 1; transform: translate3d(0,0,7px) scale(1); }
to { opacity: 0; transform: translate3d(var(--rail-front-x,0px),14px,7px) scaleY(.90); }
}
@keyframes railMidUnlock {
from { opacity: 1; transform: translate3d(0,0,3px) scale(1); }
to { opacity: 0; transform: translate3d(var(--rail-mid-x,0px),8px,3px) scaleY(.92); }
}
@keyframes railBackUnlock {
from { opacity: 1; transform: translate3d(0,0,0) scale(1); }
to { opacity: 0; transform: translate3d(var(--rail-back-x,0px),-7px,-18px) scaleY(.91); }
}
@keyframes railDetailOnline {
from { opacity: 0; transform: scaleY(.2); }
to { opacity: .72; transform: scaleY(1); }
}
@keyframes railDetailOffline {
from { opacity: .72; transform: scaleY(1); }
to { opacity: 0; transform: scaleY(.2); }
}
@keyframes railEdgeIgnition {
0% { opacity: 0; filter: brightness(.7); }
30% { opacity: 1; filter: brightness(2.2); }
55% { opacity: .35; filter: brightness(.95); }
78% { opacity: .88; filter: brightness(1.5); }
100% { opacity: .34; filter: brightness(1); }
}
@keyframes railEdgeShutdown {
0% { opacity: .70; filter: brightness(1.4); }
38% { opacity: 1; filter: brightness(2); }
100% { opacity: 0; filter: brightness(.7); }
}
@keyframes railEdgeFlicker {
0%, 68%, 100% { opacity: .28; filter: brightness(.9); }
71% { opacity: .75; filter: brightness(1.55); }
73% { opacity: .20; }
76% { opacity: .62; filter: brightness(1.25); }
78% { opacity: .31; }
}
@keyframes railSeamIgnition {
0% {
opacity: 0;
transform: scaleX(.12);
filter: brightness(.7);
}
22% {
opacity: 1;
transform: scaleX(.55);
filter: brightness(2.4);
}
50% {
opacity: .65;
transform: scaleX(1.08);
filter: brightness(1.5);
}
75% {
opacity: 1;
transform: scaleX(.92);
filter: brightness(2);
}
100% {
opacity: .50;
transform: scaleX(1);
filter: brightness(1);
}
}
@keyframes railSeamShutdown {
0% { opacity: .72; transform: scaleX(1); filter: brightness(1.25); }
32% { opacity: 1; transform: scaleX(.82); filter: brightness(1.8); }
100% { opacity: 0; transform: scaleX(.08); filter: brightness(.7); }
}
@keyframes railSeamFlicker {
0%, 65%, 100% { opacity: .38; filter: brightness(.92); }
68% { opacity: .82; filter: brightness(1.65); }
70% { opacity: .25; }
73% { opacity: .70; filter: brightness(1.35); }
76% { opacity: .42; }
}
@keyframes railArmorGlow {
0%, 69%, 100% {
filter:
brightness(1)
saturate(1)
drop-shadow(0 0 4px rgba(105,224,255,.12));
}
72% {
filter:
brightness(1.10)
saturate(1.03)
drop-shadow(0 0 3px rgba(255,255,255,.46))
drop-shadow(0 0 8px rgba(146,239,255,.47))
drop-shadow(0 0 14px rgba(76,208,255,.22));
}
74% {
filter:
brightness(.97)
drop-shadow(0 0 4px rgba(104,222,255,.12));
}
77% {
filter:
brightness(1.06)
drop-shadow(0 0 7px rgba(167,244,255,.34));
}
}
@media (max-width: 820px) {
:root {
/*
Mobilon külön geometriát használunk. 8px még mindig nagyon keskeny,
de elég fizikai pixel marad a három külön páncélréteghez.
*/
--rail-width: 10px;
}
.side-rail {
width: 10px;
overflow: visible;
}
/*
A desktop soktöréses clip-pathja 6-8px szélességen pixelesen szétesik.
Mobilon kevesebb, határozottabb "fog" van, így a három réteg tényleg
külön lemeznek látszik és nem tűnik el a rasterizálásban.
*/
.side-rail-left .shape-a {
--rail-clip-back: polygon(0 0,100% 0,100% 24%,64% 34%,100% 49%,68% 65%,100% 82%,100% 100%,0 100%);
--rail-clip-mid: polygon(0 0,100% 0,100% 26%,55% 36%,94% 50%,59% 66%,94% 82%,100% 100%,0 100%);
--rail-clip-front: polygon(0 0,100% 0,100% 28%,46% 38%,88% 51%,50% 67%,88% 83%,100% 100%,0 100%);
}
.side-rail-left .shape-b {
--rail-clip-back: polygon(0 0,100% 0,70% 20%,100% 37%,62% 52%,96% 69%,70% 84%,100% 100%,0 100%);
--rail-clip-mid: polygon(0 0,100% 0,62% 22%,94% 38%,54% 53%,90% 70%,62% 85%,100% 100%,0 100%);
--rail-clip-front: polygon(0 0,100% 0,54% 24%,88% 40%,46% 54%,84% 71%,54% 86%,100% 100%,0 100%);
}
.side-rail-left .shape-c {
--rail-clip-back: polygon(0 0,100% 0,100% 19%,66% 35%,94% 51%,60% 68%,100% 84%,100% 100%,0 100%);
--rail-clip-mid: polygon(0 0,100% 0,100% 21%,58% 37%,88% 52%,52% 69%,94% 85%,100% 100%,0 100%);
--rail-clip-front: polygon(0 0,100% 0,100% 23%,50% 39%,82% 53%,44% 70%,88% 86%,100% 100%,0 100%);
}
.side-rail-right .shape-a {
--rail-clip-back: polygon(0 0,100% 0,100% 100%,0 100%,0 82%,32% 65%,0 49%,36% 34%,0 24%);
--rail-clip-mid: polygon(0 0,100% 0,100% 100%,0 100%,6% 82%,41% 66%,6% 50%,45% 36%,0 26%);
--rail-clip-front: polygon(0 0,100% 0,100% 100%,0 100%,12% 83%,50% 67%,12% 51%,54% 38%,0 28%);
}
.side-rail-right .shape-b {
--rail-clip-back: polygon(0 0,100% 0,100% 100%,0 100%,30% 84%,4% 69%,38% 52%,0 37%,30% 20%);
--rail-clip-mid: polygon(0 0,100% 0,100% 100%,0 100%,38% 85%,10% 70%,46% 53%,6% 38%,38% 22%);
--rail-clip-front: polygon(0 0,100% 0,100% 100%,0 100%,46% 86%,16% 71%,54% 54%,12% 40%,46% 24%);
}
.side-rail-right .shape-c {
--rail-clip-back: polygon(0 0,100% 0,100% 100%,0 100%,0 84%,40% 68%,6% 51%,34% 35%,0 19%);
--rail-clip-mid: polygon(0 0,100% 0,100% 100%,0 100%,6% 85%,48% 69%,12% 52%,42% 37%,0 21%);
--rail-clip-front: polygon(0 0,100% 0,100% 100%,0 100%,12% 86%,56% 70%,18% 53%,50% 39%,0 23%);
}
/* Hátsó váz teljes szélességben marad. */
.rail-back {
inset: 0;
box-shadow:
inset 0 0 0 1px rgba(205,238,246,.17),
inset 0 0 3px rgba(0,0,0,.72);
}
/* Középlemez: 1px behúzás, így még 7px-ből dolgozik. */
.rail-mid {
top: 2px;
bottom: 2px;
}
.side-rail-left .rail-mid {
left: 1px;
right: 0;
}
.side-rail-right .rail-mid {
left: 0;
right: 1px;
}
/* Elülső lemez: 2px behúzás, de még mindig 6px széles. */
.rail-front {
top: 5px;
bottom: 5px;
}
.side-rail-left .rail-front {
left: 2px;
right: 0;
}
.side-rail-right .rail-front {
left: 0;
right: 2px;
}
.rail-mech-line {
display: block;
width: 1px;
height: 20%;
opacity: 0;
}
.rail-edge-glow {
width: 1px;
top: 8px;
bottom: 8px;
}
.side-rail-left .rail-edge-glow {
right: 0;
}
.side-rail-right .rail-edge-glow {
left: 0;
}
.rail-seam {
left: -65%;
right: -65%;
height: 3px;
bottom: -1px;
}
/* A vékony mobil railen picit kontrasztosabb energiafény kell. */
.rail-piece.active {
filter:
brightness(1.05)
saturate(1.04)
drop-shadow(0 0 2px rgba(255,255,255,.23))
drop-shadow(0 0 5px rgba(102,224,255,.24));
}
.rail-piece.active .rail-edge-glow {
filter: brightness(1.28);
}
}
/* =========================================================
V0.5 - FOOTER: FÉMES FELIRAT + KÉK/FEHÉR ARC-VILLÓDZÁS
========================================================= */
.footer-shell {
isolation: isolate;
}
/* a footer két széle optikailag rákapcsolódik az oldalsó armor-railre */
.footer-shell::before,
.footer-shell::after {
content: "";
position: absolute;
z-index: 3;
top: 4px;
bottom: 4px;
width: clamp(24px, 3.5vw, 58px);
pointer-events: none;
background:
linear-gradient(
180deg,
rgba(255,255,255,.15),
transparent 18%,
transparent 64%,
rgba(0,0,0,.30)
),
linear-gradient(
135deg,
#073923,
#1f914f 48%,
#08472a
);
filter:
drop-shadow(0 0 8px rgba(104,222,255,.20));
}
.footer-shell::before {
left: 0;
clip-path: polygon(0 0, 100% 0, 76% 34%, 100% 63%, 72% 100%, 0 100%);
}
.footer-shell::after {
right: 0;
clip-path: polygon(0 0, 100% 0, 100% 100%, 28% 100%, 0 63%, 24% 34%);
}
.footer-label {
position: relative;
color: transparent;
background:
linear-gradient(
180deg,
#f7fbfc 0%,
#bfc8cd 17%,
#6f7a81 42%,
#e7ecef 57%,
#8c979d 73%,
#eef3f5 100%
);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: none;
filter:
drop-shadow(0 1px 0 rgba(255,255,255,.18))
drop-shadow(0 2px 2px rgba(0,0,0,.88));
animation:
none;
}
.armor-footer-dock.live .footer-label {
animation:
footerMetalTextFlicker 4.35s 1.0s linear infinite;
}
.footer-sub {
color: #aeb9be;
text-shadow:
0 1px 1px rgba(0,0,0,.9);
}
.armor-footer-dock.live .footer-sub {
animation:
footerSubTextFlicker 5.1s 1.35s linear infinite;
}
/* a teljes footer panelkapcsolatok is finoman kék-fehéren "élnek" */
.armor-footer-dock.live .footer-piece {
animation:
footerArmorAmbient 4.8s 1.1s ease-in-out infinite;
}
.footer-piece::after {
height: 3px;
opacity: .22;
background:
radial-gradient(
ellipse at center,
rgba(255,255,255,.98) 0%,
rgba(161,242,255,.92) 20%,
rgba(78,212,255,.52) 47%,
transparent 78%
);
box-shadow:
0 0 3px rgba(255,255,255,.88),
0 0 7px rgba(151,240,255,.72),
0 0 14px rgba(82,214,255,.45);
}
@keyframes footerMetalTextFlicker {
0%, 58%, 64%, 100% {
filter:
drop-shadow(0 1px 0 rgba(255,255,255,.16))
drop-shadow(0 2px 2px rgba(0,0,0,.88))
drop-shadow(0 0 2px rgba(100,219,255,.10));
}
60% {
filter:
brightness(1.18)
drop-shadow(0 0 2px rgba(255,255,255,.95))
drop-shadow(0 0 6px rgba(200,249,255,.92))
drop-shadow(0 0 13px rgba(90,220,255,.72))
drop-shadow(0 0 22px rgba(70,202,255,.32));
}
61% {
filter:
brightness(.82)
drop-shadow(0 0 2px rgba(105,220,255,.20));
}
62% {
filter:
brightness(1.28)
drop-shadow(0 0 3px rgba(255,255,255,.90))
drop-shadow(0 0 9px rgba(137,237,255,.80))
drop-shadow(0 0 17px rgba(75,211,255,.42));
}
63% {
filter:
brightness(1)
drop-shadow(0 0 3px rgba(117,225,255,.18));
}
84% {
filter:
brightness(1.09)
drop-shadow(0 0 2px rgba(255,255,255,.62))
drop-shadow(0 0 8px rgba(118,231,255,.45));
}
}
@keyframes footerSubTextFlicker {
0%, 72%, 100% {
color: #aeb9be;
text-shadow:
0 1px 1px rgba(0,0,0,.9),
0 0 3px rgba(89,215,255,.08);
}
74% {
color: #dce8ec;
text-shadow:
0 0 2px rgba(255,255,255,.72),
0 0 7px rgba(147,239,255,.54),
0 0 14px rgba(70,206,255,.28);
}
76% {
color: #9da9ae;
text-shadow:
0 0 2px rgba(81,205,255,.10);
}
78% {
color: #d2e1e5;
text-shadow:
0 0 5px rgba(133,234,255,.38);
}
}
@keyframes footerArmorAmbient {
0%, 68%, 100% {
filter:
brightness(1)
drop-shadow(0 0 6px rgba(82,216,255,.12));
}
70% {
filter:
brightness(1.10)
drop-shadow(0 0 4px rgba(255,255,255,.42))
drop-shadow(0 0 10px rgba(137,237,255,.40));
}
72% {
filter:
brightness(.96)
drop-shadow(0 0 6px rgba(82,216,255,.10));
}
}
/* mobilon marad keskeny a rail és kisebb a fényudvar */
@media (max-width: 820px) {
.rail-piece.active {
animation:
railPieceLock .54s var(--rail-delay, 0ms)
cubic-bezier(.16,.84,.24,1.04) forwards,
railArmorGlow 4.9s calc(var(--rail-delay, 0ms) + 680ms)
ease-in-out infinite;
}
.rail-piece::after {
left: -60%;
right: -60%;
height: 2px;
}
.footer-shell::before,
.footer-shell::after {
width: 22px;
}
.footer-label {
font-size: clamp(14px, 4vw, 18px);
}
}
/* =========================================================
V0.9 - GÖRGETÉSRE SZÉTSZERELŐDŐ / VISSZAÉPÜLŐ HEADER
========================================================= */
/*
* Desktopon a teljes armor menü ténylegesen összecsukódik,
* tehát nem marad utána üres sticky terület.
*
* Lefelé:
* 1. armor-zone eltűnik
* 2. armor-bar eltűnik
*
* Felfelé:
* 1. armor-bar visszajön
* 2. armor-zone visszaépül
*/
@media (min-width: 821px) {
.armor-bar {
max-height: 126px;
overflow: hidden;
transition:
max-height .32s cubic-bezier(.22,.78,.2,1),
min-height .32s cubic-bezier(.22,.78,.2,1),
padding-top .32s cubic-bezier(.22,.78,.2,1),
padding-bottom .32s cubic-bezier(.22,.78,.2,1),
opacity .22s ease,
transform .32s cubic-bezier(.22,.78,.2,1),
border-color .22s ease;
/* visszaépüléskor a bar jön elő elsőnek */
transition-delay: 0s;
will-change:
max-height,
opacity,
transform;
}
.armor-zone {
max-height:
var(--armor-zone-height, 620px);
transition:
max-height .38s cubic-bezier(.22,.78,.2,1),
padding-top .38s cubic-bezier(.22,.78,.2,1),
padding-bottom .38s cubic-bezier(.22,.78,.2,1),
opacity .24s ease,
transform .38s cubic-bezier(.22,.78,.2,1);
/* visszafelé a bar után épül vissza a menü */
transition-delay: .19s;
will-change:
max-height,
opacity,
transform;
}
/* 1. lépcső lefelé: a páncélmenü összecsukódik */
.armor-header.scroll-hidden
.armor-zone {
max-height: 0;
padding-top: 0;
padding-bottom: 0;
opacity: 0;
overflow: hidden;
pointer-events: none;
transform:
translateY(-16px)
scaleY(.94);
transform-origin:
top center;
/* lefelé ez indul azonnal */
transition-delay: 0s;
}
/* 2. lépcső lefelé: utána eltűnik a felső bar */
.armor-header.scroll-hidden
.armor-bar {
max-height: 0;
min-height: 0;
padding-top: 0;
padding-bottom: 0;
opacity: 0;
overflow: hidden;
pointer-events: none;
transform:
translateY(-18px)
scaleY(.94);
border-bottom-color:
transparent;
/* az armor-zone után indul */
transition-delay: .19s;
}
.armor-header.scroll-hidden {
box-shadow:
0 6px 20px rgba(0,0,0,.22);
}
}
/*
* Mobilon az armor-zone eleve hamburger overlay.
* Lefelé görgetéskor a nyitott hamburger előbb bezáródik,
* majd maga az armor-bar csúszik ki. Felfelé a bar visszajön;
* az overlayt a felhasználó a hamburgerrel nyitja újra.
*/
@media (max-width: 820px) {
.armor-bar {
transition:
transform .30s cubic-bezier(.22,.78,.2,1),
opacity .22s ease,
box-shadow .22s ease;
will-change:
transform,
opacity;
}
.armor-header.scroll-hidden
.armor-bar {
opacity: 0;
pointer-events: none;
transform:
translateY(-105%);
}
.armor-header.scroll-hidden {
pointer-events: none;
box-shadow: none;
}
.armor-header.scroll-hidden
.armor-zone {
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
}