/* ═══════════════════════════════════════════════════
MARS+ — Portfolio Web 2026
Design: Dark Space / Futurism
═══════════════════════════════════════════════════ */
/* ── Custom Properties ──────────────────────────── */
:root {
--bg-main: #04050A;
--bg-section: #1D1814; /* teplý tmavohnědý místo chladné modrofialové */
--bg-divider: #3A1C08; /* spálená hnědá místo modré */
--accent: #CF5520; /* spálená oranžová — Mars */
--accent-hover:#A84218; /* tmavší oranžová */
--accent-soft: rgba(207,85,32,0.12);
--accent-alt: #EE7285;
--text-primary:#F0F2F8;
--text-muted: #7B8AAB;
--text-dim: #4A5570;
--border: rgba(207,85,32,0.15);
--border-soft: rgba(255,255,255,0.06);
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-xl: 32px;
--font-sans: 'Space Grotesk', system-ui, sans-serif;
--font-body: 'Space Grotesk', system-ui, sans-serif;
--font-mono: 'Space Grotesk', system-ui, sans-serif;
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--nav-h: 68px;
--section-gap: clamp(80px, 10vw, 140px);
}
/* ── Typografický systém ────────────────────────── */
/*
DISPLAY — Space Grotesk 300/500/600 → --font-sans
BODY — Inter 400/500 → --font-body
TECHNICAL — JetBrains Mono 400/500 → --font-mono
*/
/*
Přiřazení fontů je řešeno přímo u každého selektoru níže.
Pravidlo: labely/tagy/data → --font-mono, nadpisy/UI → --font-sans, text → --font-body
*/
/* ── Reset ──────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
/* Lenis smooth scroll — prevent native scroll-behavior from conflicting */
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
color: var(--text-primary);
background: var(--bg-main);
overflow-x: hidden;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
input, textarea { font: inherit; }
/* ── Selection ──────────────────────────────────── */
::selection { background: rgba(207,85,32,0.3); color: var(--text-primary); }
/* ── Scrollbar ──────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-main); }
::-webkit-scrollbar-thumb { background: var(--bg-divider); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent-hover); }
/* ── Layout ─────────────────────────────────────── */
.container {
width: 100%;
max-width: 1240px;
margin: 0 auto;
padding: 0 clamp(20px, 5vw, 60px);
}
.section {
padding: var(--section-gap) 0;
position: relative;
}
.section__header {
text-align: center;
max-width: 640px;
margin: 0 auto clamp(48px, 6vw, 80px);
}
.section__label {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 12px;
}
.section__title {
font-family: var(--font-sans);
font-size: clamp(28px, 4vw, 48px);
font-weight: 500;
letter-spacing: -0.025em;
line-height: 1.15;
color: var(--text-primary);
margin-bottom: 16px;
}
.section__desc {
color: var(--text-muted);
font-size: 16px;
line-height: 1.7;
}
.text-accent { color: var(--accent); }
/* ── Buttons ────────────────────────────────────── */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 14px 28px;
border-radius: var(--radius-md);
font-family: var(--font-sans);
font-size: 14px;
font-weight: 500;
letter-spacing: 0.02em;
transition: all 0.25s var(--ease-out);
white-space: nowrap;
}
.btn--primary {
background: var(--accent);
color: var(--bg-main);
}
.btn--primary:hover {
background: #89d8f5;
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(207,85,32,0.35);
}
.btn--primary:active { transform: translateY(0); }
.btn--outline {
border: 1px solid var(--border);
color: var(--text-muted);
background: transparent;
}
.btn--outline:hover {
border-color: var(--accent);
color: var(--accent);
background: var(--accent-soft);
}
/* ═══════════════════════════════════════════════════
NAVIGATION
═══════════════════════════════════════════════════ */
.nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 1000;
height: var(--nav-h);
transition: background 0.4s var(--ease-out), border-color 0.4s;
border-bottom: 1px solid transparent;
}
.nav.nav--scrolled {
background: rgba(4,5,10,0.92);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-color: var(--border-soft);
}
.nav__inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
padding: 0 clamp(20px, 5vw, 60px);
max-width: 1440px;
margin: 0 auto;
}
.nav__logo svg {
height: 22px;
width: auto;
fill: var(--text-primary);
transition: fill 0.2s;
}
.nav__logo:hover svg { fill: var(--accent); }
.nav__links {
display: flex;
align-items: center;
gap: clamp(20px, 3vw, 40px);
}
.nav__link {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-dim);
border: 1px solid transparent;
border-radius: 2px;
padding: 7px 14px;
position: relative;
transition: all 0.2s var(--ease-out);
}
.nav__link::after {
display: none !important;
}
.nav__link:hover {
color: var(--text-primary);
border-color: rgba(207,85,32,0.45);
background: rgba(207,85,32,0.06);
}
.nav__link.active {
color: #CF5520;
border-color: #CF5520;
background: transparent;
box-shadow:
0 0 0 1px rgba(207,85,32,0.2),
0 0 12px rgba(207,85,32,0.25),
inset 0 0 8px rgba(207,85,32,0.06);
}
.nav__link.active::before {
content: '';
position: absolute;
top: -1px; left: -1px;
width: 5px; height: 5px;
border-top: 1.5px solid #CF5520;
border-left: 1.5px solid #CF5520;
pointer-events: none;
}
.nav__link--cta {
padding: 7px 16px;
border: 1px solid #CF5520;
border-radius: 2px;
color: #CF5520;
font-weight: 600;
box-shadow: 0 0 8px rgba(207,85,32,0.2);
}
.nav__link--cta::before { display: none; }
.nav__link--cta::after { display: none !important; }
.nav__link--cta:hover {
color: var(--bg-main);
background: #CF5520;
border-color: #CF5520;
box-shadow: 0 0 16px rgba(207,85,32,0.45);
}
/* Hamburger */
.nav__toggle {
display: none;
flex-direction: column;
gap: 5px;
width: 40px; height: 40px;
align-items: center;
justify-content: center;
border-radius: var(--radius-sm);
transition: background 0.2s;
-webkit-tap-highlight-color: transparent;
}
.nav__toggle span {
display: block;
width: 22px; height: 2px;
background: var(--text-primary);
border-radius: 2px;
transition: all 0.3s var(--ease-out);
transform-origin: center;
}
.nav__toggle:hover { background: var(--accent-soft); }
.nav__toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle.active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav__toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
/* ═══════════════════════════════════════════════════
HERO
═══════════════════════════════════════════════════ */
.hero {
position: relative;
z-index: 10;
min-height: 100svh;
display: flex;
align-items: center;
justify-content: center;
overflow: visible;
padding-bottom: 4vw;
}
.hero::after {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 8vw;
background: transparent;
clip-path: polygon(0 4vw, 100% 0, 100% 100%, 0 100%);
z-index: 2;
pointer-events: none;
}
.hero__video-wrap {
position: absolute;
inset: 0;
z-index: 0;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 4vw));
}
/* 1. Static fallback — solidní bg + atmosférické gradienty.
Zakrývá prázdný stav před načtením videa.
JS přidá .hero__static-bg--hidden až video začne hrát. */
.hero__static-bg {
position: absolute;
inset: 0;
z-index: 0;
background:
radial-gradient(ellipse 80% 55% at 50% 0%, rgba(120,48,12,0.55) 0%, transparent 70%),
radial-gradient(ellipse 50% 40% at 85% 80%, rgba(80,30,6,0.4) 0%, transparent 60%),
radial-gradient(ellipse 40% 35% at 15% 60%, rgba(60,22,4,0.25) 0%, transparent 55%),
var(--bg-main);
transition: opacity 1.2s ease;
}
.hero__static-bg--hidden { opacity: 0; pointer-events: none; }
/* 2. Cinematic overlay — vždy navrchu, čitelnost textu */
.hero__overlay {
position: absolute;
inset: 0;
z-index: 2;
background: linear-gradient(
to bottom,
rgba(4,5,10,0.15) 0%,
rgba(4,5,10,0.0) 45%,
rgba(4,5,10,0.72) 100%
);
}
/* Star canvas — above overlay */
.hero__stars {
position: absolute;
inset: 0;
display: block;
z-index: 3;
pointer-events: none;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 4vw));
}
/* 3D Planet canvas — between stars and text */
.hero__planet {
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%) translateY(40%);
width: min(1035px, 83vw);
aspect-ratio: 1 / 1;
z-index: 4;
pointer-events: none;
display: block;
opacity: 0;
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.4) 14%, black 28%);
mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.4) 14%, black 28%);
}
canvas.hero__planet {
overflow: visible;
}
.hero__content {
position: relative;
z-index: 200;
text-align: center;
max-width: 820px;
padding: 0 clamp(20px, 5vw, 40px);
padding-top: var(--nav-h);
}
.hero__eyebrow {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--accent);
margin-bottom: 24px;
opacity: 0;
}
.hero__headline {
font-family: var(--font-sans);
font-size: clamp(32px, 5.5vw, 72px);
font-weight: 300;
line-height: 1.08;
letter-spacing: -0.03em;
color: var(--text-primary);
margin-bottom: 24px;
opacity: 0;
transform: translateY(30px);
}
.hero__headline-accent {
color: var(--accent);
font-weight: 500;
}
.hero__subtitle {
font-size: clamp(15px, 2vw, 19px);
color: var(--text-muted);
line-height: 1.65;
margin-bottom: 40px;
opacity: 0;
transform: translateY(20px);
}
.hero__cta {
opacity: 0;
transform: translateY(20px);
}
/* Scroll indicator */
.hero__scroll {
position: absolute;
bottom: 72px;
left: 50%;
transform: translateX(-50%);
z-index: 200;
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
opacity: 0;
animation: scrollFadeIn 1s 2s var(--ease-out) forwards;
}
.hero__scroll-line {
width: 1px;
height: 40px;
background: linear-gradient(to bottom, transparent, rgba(255,255,255,0.6));
animation: scrollPulse 2s infinite;
}
.hero__scroll-label {
font-size: 9px;
font-family: var(--font-mono);
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,0.7);
}
@keyframes scrollFadeIn { to { opacity: 1; } }
@keyframes scrollPulse {
0%,100% { opacity: 0.4; transform: scaleY(1); }
50% { opacity: 1; transform: scaleY(1.1); }
}
/* ═══════════════════════════════════════════════════
ROCKET
═══════════════════════════════════════════════════ */
.rocket-track {
position: fixed;
left: 0; /* JS drives left + top every frame */
top: 10vh;
z-index: 50;
pointer-events: none;
/* Center the rocket on both axes so left/top = exact position */
transform: translate(-50%, -50%);
}
.rocket {
width: 43px;
will-change: transform;
filter: drop-shadow(0 0 8px rgba(207,85,32,0.6));
}
.rocket svg { width: 100%; height: auto; }
.rocket__flame {
animation: flameFlicker 0.4s ease-in-out infinite alternate;
transform-origin: center top;
}
@keyframes flameFlicker {
from { transform: scaleY(1) scaleX(1); opacity: 0.8; }
to { transform: scaleY(1.3) scaleX(0.85); opacity: 1; }
}
/* Trail line: absolutely positioned, rotates with the rocket direction */
.rocket-track__line {
position: absolute;
top: 50%;
left: 50%;
width: 1px;
height: 48px;
transform-origin: top center;
background: linear-gradient(to bottom, transparent, var(--accent));
opacity: 0.40;
}
/* ═══════════════════════════════════════════════════
PORTFOLIO
═══════════════════════════════════════════════════ */
.portfolio {
position: relative;
overflow: hidden;
clip-path: polygon(0 0, 100% 4vw, 100% 100%, 0 100%);
margin-top: -4vw;
padding-top: calc(var(--section-gap) + 4vw);
padding-bottom: var(--section-gap);
}
.portfolio::before {
content: '';
position: absolute;
inset: 0;
background: url('../assets/img/povrch.png') center center / cover no-repeat;
background-attachment: fixed;
filter: grayscale(1) brightness(0.35);
z-index: 0;
pointer-events: none;
}
@media (max-width: 768px) {
.portfolio::before {
background: url('../assets/img/povrch.png') center center / cover no-repeat;
background-attachment: scroll;
}
}
.portfolio .container {
position: relative;
z-index: 1;
}
/* Filter buttons */
.portfolio__filters {
position: relative;
z-index: 1;
display: flex;
flex-wrap: wrap;
gap: 8px;
justify-content: center;
margin-bottom: clamp(40px, 5vw, 64px);
}
.filter-btn {
padding: 8px 18px;
border-radius: 2px;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(240,242,248,0.75);
border: 1px solid rgba(255,255,255,0.2);
background: rgba(4,5,10,0.55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: all 0.2s var(--ease-out);
-webkit-tap-highlight-color: transparent;
position: relative;
}
.filter-btn:hover {
color: var(--text-primary);
border-color: rgba(207,85,32,0.55);
background: rgba(4,5,10,0.72);
}
.filter-btn--active {
background: rgba(4,5,10,0.75);
border-color: #CF5520;
color: #CF5520;
font-weight: 600;
box-shadow:
0 0 0 1px rgba(207,85,32,0.2),
0 0 12px rgba(207,85,32,0.25),
inset 0 0 8px rgba(207,85,32,0.06);
}
.filter-btn--active::before,
.filter-btn--active::after {
content: '';
position: absolute;
width: 5px;
height: 5px;
pointer-events: none;
}
.filter-btn--active::before {
top: -1px; left: -1px;
border-top: 1.5px solid #CF5520;
border-left: 1.5px solid #CF5520;
}
.filter-btn--active::after {
bottom: -1px; right: -1px;
border-bottom: 1.5px solid #CF5520;
border-right: 1.5px solid #CF5520;
}
/* Grid */
.portfolio__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(16px, 2vw, 28px);
position: relative;
z-index: 1;
}
/* Card */
.card {
border-radius: 3px;
position: relative;
background: rgba(4,5,10,0.45);
border: 1px solid rgba(207,85,32,0.28);
overflow: hidden;
cursor: pointer;
transition: all 0.35s var(--ease-out);
}
.card:hover {
background: rgba(4,5,10,0.62);
border-color: rgba(207,85,32,0.7);
transform: translateY(-3px);
box-shadow:
0 0 0 1px rgba(207,85,32,0.15),
0 0 24px rgba(207,85,32,0.12),
0 12px 40px rgba(0,0,0,0.4);
}
.card.card--hidden {
opacity: 0;
transform: scale(0.95);
pointer-events: none;
position: absolute;
visibility: hidden;
}
.card__media {
position: relative;
aspect-ratio: 4/3;
overflow: hidden;
border-radius: 3px 3px 0 0;
}
/* Placeholder visuals */
.card__placeholder {
width: 100%; height: 100%;
transition: transform 0.5s var(--ease-out);
}
.card:hover .card__placeholder { transform: scale(1.05); }
.card__placeholder--grafika { background: linear-gradient(135deg, #1a0a04 0%, #3A1C08 55%, #2a1406 100%); }
.card__placeholder--grafika::after {
content: '';
position: absolute;
inset: 20%;
border: 1px solid rgba(207,85,32,0.3);
border-radius: 50%;
box-shadow: 0 0 40px rgba(207,85,32,0.1) inset;
}
.card__placeholder--web { background: linear-gradient(135deg, #040d20 0%, #0f2040 50%, #142850 100%); }
.card__placeholder--web::before {
content: '';
position: absolute;
top: 15%; left: 10%; right: 10%;
height: 8px;
background: rgba(207,85,32,0.2);
border-radius: 4px;
box-shadow: 0 20px 0 rgba(207,85,32,0.1), 0 36px 0 rgba(207,85,32,0.08);
}
.card__placeholder--sound { background: linear-gradient(135deg, #07091a 0%, #13153a 50%, #1c1e52 100%); }
.card__placeholder--sound::after {
content: '';
position: absolute;
top: 30%; bottom: 30%; left: 15%; right: 15%;
background:
repeating-linear-gradient(to right,
rgba(207,85,32,0.15) 0, rgba(207,85,32,0.15) 2px,
transparent 2px, transparent 8px
);
}
.card__placeholder--video { background: linear-gradient(135deg, #0a0612 0%, #1a0d2e 50%, #251040 100%); }
.card__placeholder--video::after {
content: '';
position: absolute;
inset: 0;
background: radial-gradient(circle at 50% 50%, rgba(207,85,32,0.15) 0%, transparent 60%);
}
.card__placeholder--pub { background: linear-gradient(135deg, #040a0a 0%, #0a1a1a 50%, #0f2020 100%); }
.card__placeholder--pub::before {
content: '';
position: absolute;
inset: 15%;
background:
linear-gradient(rgba(207,85,32,0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(207,85,32,0.07) 1px, transparent 1px);
background-size: 100% 18px, 40% 100%;
}
.card__placeholder--web2 { background: linear-gradient(135deg, #060d1f 0%, #0e1e35 50%, #162840 100%); }
.card__placeholder--grafika2 { background: linear-gradient(135deg, #1a0804 0%, #3d1a06 50%, #521e06 100%); }
.card__placeholder--sound2 { background: linear-gradient(135deg, #030b14 0%, #051a24 50%, #083040 100%); }
/* Animated logo card */
.card__placeholder--logo-anim {
background: linear-gradient(135deg, #0e0704 0%, #1e0e04 40%, #2a1406 100%);
display: flex;
align-items: center;
justify-content: center;
}
.card__logo-preview {
width: 55%;
height: 55%;
overflow: visible;
}
/* Ring rotation */
.lp-ring--1 {
transform-origin: 100px 100px;
animation: lpRing1 18s linear infinite;
}
.lp-ring--2 {
transform-origin: 100px 100px;
animation: lpRing2 11s linear infinite reverse;
}
@keyframes lpRing1 { to { transform: rotate(360deg); } }
@keyframes lpRing2 { to { transform: rotate(360deg); } }
/* Orbiting dots — travel along the rings */
.lp-dot--1 {
transform-origin: 100px 100px;
animation: lpOrbit1 18s linear infinite;
}
.lp-dot--2 {
transform-origin: 100px 100px;
animation: lpOrbit2 11s linear infinite reverse;
}
@keyframes lpOrbit1 { to { transform: rotate(360deg); } }
@keyframes lpOrbit2 { to { transform: rotate(360deg); } }
/* Pulse ring */
.lp-pulse {
transform-origin: 100px 100px;
animation: lpPulse 3s ease-out infinite;
}
@keyframes lpPulse {
0% { r: 34; opacity: 0.7; }
100% { r: 60; opacity: 0; }
}
/* Pause animations when card is not hovered (save resources) */
.card:not(:hover) .lp-ring--1,
.card:not(:hover) .lp-ring--2,
.card:not(:hover) .lp-dot--1,
.card:not(:hover) .lp-dot--2 {
animation-play-state: paused;
}
/* Always run pulse for visual interest in resting state */
/* Icon badge */
.card__icon {
position: absolute;
top: 32px; left: 8px;
width: 28px; height: 28px;
display: flex; align-items: center; justify-content: center;
border-radius: 2px;
background: rgba(4,5,10,0.75);
backdrop-filter: blur(8px);
color: #CF5520;
border: 1px solid rgba(207,85,32,0.35);
z-index: 6;
}
/* Hover overlay */
.card__overlay {
position: absolute;
inset: 0;
background: rgba(4,5,10,0.68);
display: flex; align-items: center; justify-content: center;
opacity: 0;
transition: opacity 0.3s;
z-index: 3;
pointer-events: none;
}
.card:hover .card__overlay { opacity: 1; }
.card__open {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 500;
color: var(--accent);
border: 1px solid rgba(207,85,32,0.4);
padding: 8px 18px;
border-radius: 2px;
letter-spacing: 0.08em;
pointer-events: auto;
cursor: pointer;
transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.card:hover .card__open:hover {
background: rgba(207,85,32,0.25);
border-color: #CF5520;
color: #CF5520;
}
/* Card body */
.card__body {
padding: 10px 14px 14px;
border-top: 1px solid rgba(207,85,32,0.14);
background: rgba(4,5,10,0.55);
display: flex;
flex-direction: column;
gap: 3px;
}
.card__tag {
font-family: var(--font-mono);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #CF5520;
}
.card__title {
font-size: 13px;
font-weight: 500;
color: rgba(240,242,248,0.9);
line-height: 1.3;
}
.card__body .card__tag { display: none; }
/* ── Card swiper ─────────────────────────────────── */
.card__swiper {
position: absolute;
inset: 0;
overflow: hidden;
}
.card__swiper .swiper-wrapper,
.card__swiper .swiper-slide {
height: 100%;
}
.card__swiper .swiper-slide .card__placeholder {
width: 100%;
height: 100%;
transition: transform 0.5s var(--ease-out);
}
.card:hover .card__swiper .swiper-slide .card__placeholder {
transform: scale(1.05);
}
/* override the direct-child rule for non-swiper cards only */
.card__swiper ~ * .card__placeholder,
.card:has(.card__swiper):hover > .card__media > .card__placeholder { transform: none; }
/* Image / GIF slides */
.card__slide--media {
background: #04050A;
}
.card__slide--audio.card__slide--media {
height: 100%;
}
.card__slide-img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
transform: scale(0.85);
transition: transform 0.5s var(--ease-out);
}
.card:hover .card__slide-img { transform: scale(0.876); }
.card__slide-img--cover {
object-fit: cover;
transform: scale(1);
}
.card:hover .card__slide-img--cover { transform: scale(1.05); }
.card__slide-img--sm { transform: scale(0.72); }
.card:hover .card__slide-img--sm { transform: scale(0.742); }
/* Nav arrows */
.card__nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 5;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(4,5,10,0.75);
backdrop-filter: blur(8px);
border: 1px solid rgba(207,85,32,0.3);
border-radius: 2px;
color: rgba(255,255,255,0.85);
cursor: pointer;
opacity: 0;
transition: opacity 0.22s ease, background 0.18s ease, border-color 0.18s ease;
pointer-events: auto;
}
.card:hover .card__nav { opacity: 1; }
.card__nav:hover {
background: rgba(207,85,32,0.2);
border-color: rgba(207,85,32,0.6);
}
.card__nav:active { transform: translateY(-50%) scale(0.92); }
.card__nav--prev { left: 10px; }
.card__nav--next { right: 10px; }
/* Pagination dots */
.card__swiper-pagination {
position: absolute;
bottom: 9px;
left: 0;
right: 0;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
pointer-events: none;
}
.card__swiper-pagination .swiper-pagination-bullet {
width: 4px;
height: 4px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.35);
opacity: 1;
margin: 0;
transition: background 0.2s, transform 0.2s;
}
.card__swiper-pagination .swiper-pagination-bullet-active {
background: var(--accent);
transform: scale(1.35);
}
@media (hover: none) {
.card__nav { opacity: 1; }
}
/* ── Card HUD elements ───────────────────────────── */
.card__corner {
position: absolute;
width: 12px; height: 12px;
z-index: 10;
pointer-events: none;
}
.card__corner--tl { top: 0; left: 0; border-top:2px solid #CF5520; border-left:2px solid #CF5520; }
.card__corner--tr { top: 0; right: 0; border-top:2px solid #CF5520; border-right:2px solid #CF5520; }
.card__corner--bl { bottom: 0; left: 0; border-bottom:2px solid #CF5520; border-left:2px solid #CF5520; }
.card__corner--br { bottom: 0; right: 0; border-bottom:2px solid #CF5520; border-right:2px solid #CF5520; }
/* Grid mřížka v pozadí media plochy */
.card__media::before {
content: '';
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(207,85,32,0.045) 1px, transparent 1px),
linear-gradient(90deg, rgba(207,85,32,0.045) 1px, transparent 1px);
background-size: 18px 18px;
z-index: 1;
pointer-events: none;
}
/* Scanlines */
.card__media::after {
content: '';
position: absolute; inset: 0;
background: repeating-linear-gradient(
to bottom,
transparent 0px, transparent 3px,
rgba(0,0,0,0.08) 3px, rgba(0,0,0,0.08) 4px
);
z-index: 4;
pointer-events: none;
}
/* HUD top bar */
.card__hud-bar {
position: absolute;
top: 0; left: 0; right: 0;
height: 24px;
background: rgba(4,5,10,0.72);
border-bottom: 1px solid rgba(207,85,32,0.22);
display: flex;
align-items: center;
padding: 0 10px;
gap: 6px;
z-index: 6;
pointer-events: none;
overflow: hidden;
}
.card__hud-dots { display: flex; gap: 3px; align-items: center; }
.card__hud-dots span {
display: block;
width: 4px; height: 4px;
border-radius: 50%;
animation: hudBlink 2.2s ease-in-out infinite;
}
.card__hud-dots span:nth-child(1) { background: #CF5520; animation-delay: 0s; }
.card__hud-dots span:nth-child(2) { background: rgba(207,85,32,0.45); animation-delay: 0.25s; }
.card__hud-dots span:nth-child(3) { background: rgba(207,85,32,0.2); animation-delay: 0.5s; }
@keyframes hudBlink {
0%,100% { opacity: 1; }
50% { opacity: 0.2; }
}
.card__hud-id {
font-family: var(--font-mono);
font-size: 8px; font-weight: 500;
letter-spacing: 0.18em;
color: rgba(207,85,32,0.6);
margin-left: auto;
}
/* Pulzující čára u spodku card__media */
.card__hud-progress {
position: absolute;
bottom: 0; left: 0;
height: 2px; width: 100%;
background: linear-gradient(to right, transparent, #CF5520 20%, #CF5520 80%, transparent);
z-index: 6;
pointer-events: none;
transform-origin: center;
animation: hudPulse 3s ease-in-out infinite;
}
@keyframes hudPulse {
0%,100% { opacity: 0.85; transform: scaleX(1); }
50% { opacity: 0.2; transform: scaleX(0.45); }
}
/* ── Video card ──────────────────────────────────── */
.card__slide--video {
position: relative;
height: 100%;
background: #04050A;
}
.card__video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.card__video-thumb {
position: absolute;
inset: 0;
background: #04050A;
z-index: 2;
transition: opacity 0.3s;
}
.card__video-thumb.is-hidden {
opacity: 0;
pointer-events: none;
}
.card__video-ui {
position: absolute;
bottom: 0; left: 0; right: 0;
display: none;
align-items: center;
gap: 10px;
padding: 10px 14px 13px;
background: linear-gradient(to top, rgba(4,5,10,0.88) 0%, transparent 100%);
z-index: 7;
pointer-events: none;
}
.card__video-ui.is-active { display: flex; }
.card__video-ui .card__play-btn {
pointer-events: auto;
}
/* ── Sound card audio UI ─────────────────────────── */
.card__slide--audio {
position: relative;
height: 100%;
}
.card__audio-ui {
position: absolute;
bottom: 0; left: 0; right: 0;
display: none;
align-items: center;
gap: 10px;
padding: 10px 14px 13px;
background: linear-gradient(to top, rgba(4,5,10,0.88) 0%, transparent 100%);
z-index: 7;
}
.card__audio-ui.is-active { display: flex; }
.card__play-btn {
flex-shrink: 0;
width: 34px;
height: 34px;
border-radius: 2px;
background: rgba(207,85,32,0.14);
border: 1px solid rgba(207,85,32,0.40);
color: var(--accent);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background 0.18s, border-color 0.18s;
}
.card__play-btn:hover { background: rgba(207,85,32,0.28); }
.card__play-btn.is-playing {
border-color: rgba(108,200,235,0.65);
color: #6CC8EB;
background: rgba(108,200,235,0.10);
}
.card__play-icon { display: block; }
.card__pause-icon { display: none; }
.card__play-btn.is-playing .card__play-icon { display: none; }
.card__play-btn.is-playing .card__pause-icon { display: block; }
/* Modal play button — sound projekty */
.modal__play-btn {
display: inline-flex;
align-items: center;
gap: 12px;
padding: 14px 28px;
border-radius: 2px;
background: rgba(4,5,10,0.82);
border: 1px solid #CF5520;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: #CF5520;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
cursor: pointer;
transition: all 0.2s var(--ease-out);
position: relative;
margin-top: 20px;
box-shadow:
0 0 0 1px rgba(207,85,32,0.2),
0 0 20px rgba(207,85,32,0.35),
inset 0 0 12px rgba(207,85,32,0.08);
}
.modal__play-btn:hover {
background: rgba(207,85,32,0.18);
box-shadow:
0 0 0 1px rgba(207,85,32,0.3),
0 0 32px rgba(207,85,32,0.5),
inset 0 0 16px rgba(207,85,32,0.12);
}
.modal__play-btn.is-playing {
border-color: #6CC8EB;
color: #6CC8EB;
background: rgba(108,200,235,0.08);
box-shadow: 0 0 16px rgba(108,200,235,0.2);
}
.modal__play-btn::before {
content: '';
position: absolute;
top: -1px; left: -1px;
width: 7px; height: 7px;
border-top: 1.5px solid #CF5520;
border-left: 1.5px solid #CF5520;
transition: border-color 0.2s;
}
.modal__play-btn::after {
content: '';
position: absolute;
bottom: -1px; right: -1px;
width: 7px; height: 7px;
border-bottom: 1.5px solid #CF5520;
border-right: 1.5px solid #CF5520;
transition: border-color 0.2s;
}
.modal__play-btn.is-playing::before,
.modal__play-btn.is-playing::after {
border-color: #6CC8EB;
}
.modal__play-icon { display: block; }
.modal__pause-icon { display: none; }
.modal__play-btn.is-playing .modal__play-icon { display: none; }
.modal__play-btn.is-playing .modal__pause-icon { display: block; }
.modal__eq {
display: flex;
align-items: flex-end;
gap: 2px;
height: 16px;
opacity: 0;
transition: opacity 0.25s;
}
.modal__eq.is-active { opacity: 1; }
.modal__eq span {
display: block;
width: 3px;
height: 3px;
background: rgba(108,200,235,0.8);
border-radius: 1px;
}
.modal__eq.is-active span:nth-child(1) { animation: eq-bar 0.72s ease-in-out 0.00s infinite alternate !important; }
.modal__eq.is-active span:nth-child(2) { animation: eq-bar 0.50s ease-in-out 0.10s infinite alternate !important; }
.modal__eq.is-active span:nth-child(3) { animation: eq-bar 0.88s ease-in-out 0.04s infinite alternate !important; }
.modal__eq.is-active span:nth-child(4) { animation: eq-bar 0.62s ease-in-out 0.16s infinite alternate !important; }
.modal__eq.is-active span:nth-child(5) { animation: eq-bar 0.78s ease-in-out 0.08s infinite alternate !important; }
.card__audio-label {
flex: 1;
font-family: var(--font-mono);
font-size: 9px;
letter-spacing: 0.11em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.38);
}
/* Equalizer bars */
.card__eq {
display: flex;
align-items: flex-end;
gap: 2px;
height: 16px;
opacity: 0;
transition: opacity 0.25s;
}
.card__eq.is-active { opacity: 1; }
.card__eq span {
display: block;
width: 3px;
height: 3px;
background: rgba(108, 200, 235, 0.72);
border-radius: 2px;
}
.card__eq.is-active span:nth-child(1) { animation: eq-bar 0.72s ease-in-out 0.00s infinite alternate; }
.card__eq.is-active span:nth-child(2) { animation: eq-bar 0.50s ease-in-out 0.10s infinite alternate; }
.card__eq.is-active span:nth-child(3) { animation: eq-bar 0.88s ease-in-out 0.04s infinite alternate; }
.card__eq.is-active span:nth-child(4) { animation: eq-bar 0.62s ease-in-out 0.16s infinite alternate; }
.card__eq.is-active span:nth-child(5) { animation: eq-bar 0.78s ease-in-out 0.08s infinite alternate; }
@keyframes eq-bar {
from { height: 3px; }
to { height: 15px; }
}
/* ═══════════════════════════════════════════════════
SERVICES
═══════════════════════════════════════════════════ */
.services {
position: relative;
z-index: 3;
background:
radial-gradient(ellipse at 15% 85%, rgba(142,42,27,0.18) 0%, rgba(90,30,20,0.08) 35%, transparent 60%),
radial-gradient(ellipse at 88% 8%, rgba(108,200,235,0.07) 0%, rgba(53,123,191,0.14) 22%, rgba(38,54,132,0.17) 44%, transparent 66%),
radial-gradient(ellipse at 50% 50%, transparent 28%, rgba(4,5,10,0.55) 100%),
#04050A;
clip-path: polygon(0 4vw, 100% 0, 100% 100%, 0 100%);
margin-top: -4vw;
padding-top: calc(var(--section-gap) + 4vw);
}
.services::after {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,");
background-repeat: repeat;
background-size: 180px 180px;
opacity: 0.032;
mix-blend-mode: overlay;
pointer-events: none;
z-index: 0;
}
.services__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: clamp(16px, 2vw, 24px);
}
.service-card {
background: transparent;
border: none;
border-radius: 0;
padding: clamp(24px, 3vw, 36px);
transition: all 0.3s var(--ease-out);
display: flex;
flex-direction: column;
gap: 16px;
position: relative;
}
.service-card::before,
.service-card::after {
display: none;
}
.service-card--wide {
grid-column: 1 / -1;
display: grid;
grid-template-columns: auto 1fr auto;
grid-template-rows: auto auto;
align-items: start;
column-gap: 24px;
row-gap: 8px;
}
.service-card--wide .service-card__icon { grid-row: 1/3; align-self: start; margin-top: 4px; }
.service-card--wide .service-card__title { grid-column: 2; }
.service-card--wide .service-card__desc { grid-column: 2; }
.service-card--wide .service-card__list { grid-column: 3; grid-row: 1/3; align-self: start; min-width: 180px; }
.service-card__icon {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 2px;
background: rgba(4,5,10,0.7);
border: 1px solid rgba(207,85,32,0.35);
color: #CF5520;
flex-shrink: 0;
}
.service-card__title {
font-family: var(--font-sans);
font-size: 16px;
font-weight: 600;
color: var(--text-primary);
line-height: 1.3;
}
.service-card__desc {
font-size: 14px;
color: var(--text-muted);
line-height: 1.65;
}
.service-card__list {
display: flex;
flex-direction: column;
gap: 6px;
}
.service-card__list li {
font-size: 13px;
color: var(--text-dim);
padding-left: 14px;
position: relative;
line-height: 1.5;
}
.service-card__list li::before {
content: '';
position: absolute;
left: 0; top: 8px;
width: 5px; height: 1px;
background: #CF5520;
}
/* sc-corner rohové akcenty */
.sc-corner {
position: absolute;
width: 12px;
height: 12px;
pointer-events: none;
z-index: 2;
transition: border-color 0.3s;
}
.sc-corner--tl { top: 0; left: 0; border-top: 1.5px solid rgba(255,255,255,0.45); border-left: 1.5px solid rgba(255,255,255,0.45); }
.sc-corner--tr { top: 0; right: 0; border-top: 1.5px solid rgba(255,255,255,0.45); border-right: 1.5px solid rgba(255,255,255,0.45); }
.sc-corner--bl { bottom: 0; left: 0; border-bottom: 1.5px solid rgba(255,255,255,0.45); border-left: 1.5px solid rgba(255,255,255,0.45); }
.sc-corner--br { bottom: 0; right: 0; border-bottom: 1.5px solid rgba(255,255,255,0.45); border-right: 1.5px solid rgba(255,255,255,0.45); }
/* ═══════════════════════════════════════════════════
ABOUT
═══════════════════════════════════════════════════ */
.about {
position: relative;
z-index: 4;
background: var(--bg-main);
clip-path: polygon(0 0, 100% 4vw, 100% 100%, 0 100%);
margin-top: -4vw;
padding-top: calc(var(--section-gap) + 4vw);
}
.about__inner {
display: grid;
grid-template-columns: 1fr 1.4fr;
gap: clamp(40px, 6vw, 100px);
align-items: center;
}
.about__visual {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: auto;
}
.about__orb {
width: 180px; height: 180px;
border-radius: 50%;
background: radial-gradient(circle at 35% 35%, #3A1C08, #04050A);
box-shadow:
0 0 60px rgba(100,40,10,0.6),
0 0 120px rgba(207,85,32,0.15),
0 0 200px rgba(80,25,5,0.3);
animation: orbFloat 6s ease-in-out infinite;
}
.about__ring {
position: absolute;
border-radius: 50%;
border: 1px solid rgba(207,85,32,0.15);
animation: ringRotate 20s linear infinite;
}
.about__ring:first-of-type {
width: 260px; height: 260px;
border-style: dashed;
}
.about__ring--2 {
width: 340px; height: 340px;
animation-duration: 35s;
animation-direction: reverse;
border-color: rgba(207,85,32,0.07);
}
@keyframes orbFloat {
0%,100% { transform: translateY(0); }
50% { transform: translateY(-14px); }
}
@keyframes ringRotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.about__content { display: flex; flex-direction: column; gap: 20px; }
.about__text { font-size: 15px; color: var(--text-muted); line-height: 1.75; }
.about__stats {
display: flex;
gap: 32px;
margin-top: 8px;
padding-top: 28px;
border-top: 1px solid var(--border-soft);
}
.about__stat { display: flex; flex-direction: column; gap: 4px; }
.about__stat-num {
font-family: var(--font-sans);
font-size: 32px;
font-weight: 700;
color: var(--accent);
line-height: 1;
}
.about__stat-label {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.1em;
}
/* ═══════════════════════════════════════════════════
CONTACT
═══════════════════════════════════════════════════ */
.contact {
position: relative;
z-index: 5;
background:
radial-gradient(ellipse at 10% 90%, rgba(142,42,27,0.22) 0%, rgba(90,30,20,0.10) 32%, transparent 57%),
radial-gradient(ellipse at 92% 6%, rgba(108,200,235,0.05) 0%, rgba(53,123,191,0.11) 24%, rgba(38,54,132,0.15) 46%, transparent 70%),
radial-gradient(ellipse at 50% 50%, transparent 22%, rgba(4,5,10,0.60) 100%),
#04050A;
clip-path: polygon(0 4vw, 100% 0, 100% 100%, 0 100%);
margin-top: -4vw;
padding-top: calc(var(--section-gap) + 4vw);
}
.contact::after {
content: '';
position: absolute;
inset: 0;
background-image: url("data:image/svg+xml,");
background-repeat: repeat;
background-size: 180px 180px;
opacity: 0.032;
mix-blend-mode: overlay;
pointer-events: none;
z-index: 0;
}
.contact__inner {
display: grid;
grid-template-columns: 1.5fr 1fr;
gap: clamp(40px, 5vw, 80px);
align-items: start;
}
/* Form */
.contact__form {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
.form-group { display: flex; flex-direction: column; gap: 8px; }
.form-group--full { grid-column: 1 / -1; }
.form-group--submit { align-items: flex-start; flex-direction: row; gap: 16px; align-items: center; }
.form-label {
font-size: 13px;
font-weight: 500;
color: var(--text-muted);
letter-spacing: 0.02em;
}
.form-input {
background: rgba(255,255,255,0.04);
border: 1px solid var(--border-soft);
border-radius: var(--radius-md);
padding: 13px 16px;
color: var(--text-primary);
font-size: 14px;
transition: all 0.2s;
outline: none;
width: 100%;
}
.form-input::placeholder { color: var(--text-dim); }
.form-input:focus {
border-color: rgba(207,85,32,0.5);
background: rgba(207,85,32,0.04);
box-shadow: 0 0 0 3px rgba(207,85,32,0.1);
}
.form-input.error { border-color: rgba(238,114,133,0.6); }
.form-textarea { resize: vertical; min-height: 120px; }
.form-error { font-size: 12px; color: var(--accent-alt); min-height: 16px; }
.form-success {
font-size: 13px;
color: var(--accent);
opacity: 0;
transition: opacity 0.3s;
}
.form-success.visible { opacity: 1; }
/* Contact info */
.contact__info {
display: flex;
flex-direction: column;
gap: 28px;
padding-top: 8px;
}
.contact__info-item { display: flex; flex-direction: column; gap: 6px; }
.contact__info-label {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--text-dim);
}
.contact__info-value {
font-size: 15px;
color: var(--text-muted);
transition: color 0.2s;
}
a.contact__info-value:hover { color: var(--accent); }
/* ═══════════════════════════════════════════════════
FOOTER
═══════════════════════════════════════════════════ */
.footer {
background: rgba(0,0,0,0.5);
clip-path: polygon(0 0, 100% 4vw, 100% 100%, 0 100%);
margin-top: -4vw;
padding: calc(clamp(48px, 6vw, 80px) + 4vw) 0 0;
}
.footer__inner {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr;
gap: clamp(32px, 4vw, 60px);
padding-bottom: 48px;
}
.footer__logo svg {
height: 20px;
width: auto;
fill: var(--text-muted);
transition: fill 0.2s;
margin-bottom: 16px;
}
.footer__logo:hover svg { fill: var(--accent); }
.footer__tagline { font-size: 13px; color: var(--text-dim); line-height: 1.6; }
.footer__nav ul {
display: flex;
flex-direction: column;
gap: 12px;
}
.footer__nav a {
font-size: 14px;
color: var(--text-muted);
transition: color 0.2s;
}
.footer__nav a:hover { color: var(--accent); }
.footer__contact {
display: flex;
flex-direction: column;
gap: 16px;
align-items: flex-start;
}
.footer__email {
font-size: 14px;
color: var(--text-muted);
transition: color 0.2s;
}
.footer__email:hover { color: var(--accent); }
.footer__bottom {
border-top: 1px solid var(--border-soft);
padding: 20px 0;
}
.footer__copy { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--text-dim); }
/* ═══════════════════════════════════════════════════
MODAL
═══════════════════════════════════════════════════ */
.modal {
position: fixed;
inset: 0;
z-index: 2000;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
opacity: 0;
}
.modal.modal--open {
pointer-events: auto;
opacity: 1;
}
.modal__backdrop {
position: absolute;
inset: 0;
background: rgba(4,5,10,0.88);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.modal__panel {
position: relative;
z-index: 1;
background: #0a0c1a;
border: 1px solid rgba(207,85,32,0.35);
border-radius: 4px;
width: min(760px, 94vw);
max-height: 88vh;
overflow: hidden;
transform: scale(0.93) translateY(20px);
transition: transform 0.4s var(--ease-spring);
}
.modal__panel-inner {
overflow-y: auto;
max-height: calc(88vh - 30px);
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
}
.modal__panel-inner::-webkit-scrollbar { display: none; }
.modal.modal--open .modal__panel {
transform: scale(1) translateY(0);
}
.modal__close {
position: absolute;
bottom: 12px;
right: 12px;
top: auto;
width: 36px; height: 36px;
border-radius: 2px;
background: rgba(4,5,10,0.75);
border: 1px solid rgba(207,85,32,0.45);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
display: flex; align-items: center; justify-content: center;
color: #CF5520;
cursor: pointer;
z-index: 20;
transition: all 0.2s;
}
.modal__close:hover { background: rgba(207,85,32,0.2); border-color: rgba(207,85,32,0.7); }
.modal__media {
aspect-ratio: 16/9;
background: rgba(100,40,10,0.25);
border-radius: 0;
overflow: hidden;
position: relative;
}
.modal__media::after {
content: '';
position: absolute; inset: 0;
background: repeating-linear-gradient(
to bottom,
transparent 0px, transparent 3px,
rgba(0,0,0,0.06) 3px, rgba(0,0,0,0.06) 4px
);
pointer-events: none;
z-index: 2;
}
.modal__media-inner {
width: 100%; height: 100%;
}
.modal__body { padding: clamp(20px, 3vw, 36px); padding-top: 20px; }
.modal__tag {
font-family: var(--font-mono);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #CF5520;
display: block;
margin-bottom: 8px;
}
.modal__title {
font-family: var(--font-sans);
font-size: clamp(18px, 2.5vw, 26px);
font-weight: 500;
color: #F0F2F8;
line-height: 1.2;
letter-spacing: -0.02em;
margin-bottom: 16px;
}
.modal__meta { display: flex; flex-direction: column; gap: 20px; }
.modal__meta-item { display: flex; flex-direction: column; gap: 6px; }
.modal__meta-label {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--text-dim);
}
.modal__meta-value { font-size: 15px; color: var(--text-muted); line-height: 1.65; }
/* ── Modal HUD elements ─────────────────────────────── */
.modal__corner {
position: absolute;
width: 14px; height: 14px;
z-index: 10;
pointer-events: none;
}
.modal__corner--tl { top:-1px; left:-1px; border-top:2px solid #CF5520; border-left:2px solid #CF5520; }
.modal__corner--tr { top:-1px; right:-1px; border-top:2px solid #CF5520; border-right:2px solid #CF5520; }
.modal__corner--bl { bottom:-1px; left:-1px; border-bottom:2px solid #CF5520; border-left:2px solid #CF5520; }
.modal__corner--br { bottom:-1px; right:-1px; border-bottom:2px solid #CF5520; border-right:2px solid #CF5520; }
.modal__hud-bar {
position: sticky;
top: 0;
height: 30px;
background: rgba(4,5,10,0.88);
border-bottom: 1px solid rgba(207,85,32,0.22);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px 0 14px;
gap: 8px;
z-index: 50;
}
.modal__hud-dots { display: flex; gap: 3px; align-items: center; }
.modal__hud-dots span {
display: block;
width: 4px; height: 4px;
border-radius: 50%;
animation: hudBlink 2.2s ease-in-out infinite;
}
.modal__hud-dots span:nth-child(1) { background: #CF5520; }
.modal__hud-dots span:nth-child(2) { background: rgba(207,85,32,0.45); animation-delay: .25s; }
.modal__hud-dots span:nth-child(3) { background: rgba(207,85,32,0.2); animation-delay: .5s; }
.modal__hud-label {
font-family: var(--font-mono);
font-size: 8px;
letter-spacing: 0.18em;
color: rgba(207,85,32,0.5);
margin-left: auto;
text-transform: uppercase;
}
.modal__media-pulse {
position: absolute;
bottom: 0; left: 0;
height: 2px; width: 100%;
background: linear-gradient(to right, transparent, #CF5520 20%, #CF5520 80%, transparent);
animation: hudPulse 3s ease-in-out infinite;
z-index: 3;
pointer-events: none;
}
.modal__divider {
height: 1px;
background: linear-gradient(to right, rgba(207,85,32,0.4), transparent);
margin: 0 0 20px;
}
/* Desktop: modal vycentrovaný */
@media (min-width: 769px) {
.modal { align-items: center; justify-content: center; padding: 20px; }
.modal__panel { max-height: 90vh; border-radius: 4px !important; }
.modal__panel-inner { max-height: calc(90vh - 30px); }
}
/* ── Modal preview drawer ──────────────────────────── */
.modal__panel--drawer-open { overflow-x: hidden; }
.modal__drawer {
position: absolute;
top: auto;
bottom: 0;
left: 0;
right: 0;
height: 65%;
background: #0c0e1e;
border-radius: var(--radius-xl);
display: flex;
flex-direction: column;
z-index: 10;
opacity: 0;
transform: translateY(16px);
transition: opacity 0.28s var(--ease-out), transform 0.28s var(--ease-out);
pointer-events: none;
}
.modal__drawer--open {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.modal__drawer-bar {
display: flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
border-bottom: 1px solid var(--border-soft);
flex-shrink: 0;
}
.modal__drawer-label {
flex: 1;
font-family: var(--font-mono);
font-size: 11px;
letter-spacing: 0.08em;
color: var(--text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.modal__drawer-external,
.modal__drawer-close {
flex-shrink: 0;
width: 28px; height: 28px;
border-radius: var(--radius-sm);
background: rgba(255,255,255,0.05);
border: 1px solid var(--border-soft);
color: var(--text-muted);
display: flex; align-items: center; justify-content: center;
transition: background 0.18s, color 0.18s, border-color 0.18s;
}
.modal__drawer-external:hover,
.modal__drawer-close:hover {
background: rgba(207,85,32,0.15);
color: var(--accent);
border-color: rgba(207,85,32,0.3);
}
.modal__drawer-body { flex: 1; overflow: hidden; background: #ffffff; }
.modal__drawer-iframe {
width: 100%; height: 100%;
border: none;
display: block;
background: #ffffff;
}
.modal__drawer-blocked {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
gap: 16px;
padding: 32px;
text-align: center;
color: var(--text-muted);
font-size: 14px;
line-height: 1.6;
}
/* ═══════════════════════════════════════════════════
ANIMATIONS — GSAP targets
═══════════════════════════════════════════════════ */
.fade-up {
opacity: 0;
transform: translateY(32px);
}
/* ═══════════════════════════════════════════════════
RESPONSIVE — Tablet (≤ 1024px)
═══════════════════════════════════════════════════ */
@media (max-width: 1024px) {
.services__grid { grid-template-columns: repeat(2, 1fr); }
.service-card--wide {
grid-column: 1 / -1;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto auto;
}
.service-card--wide .service-card__list {
grid-column: 2;
grid-row: auto;
min-width: unset;
}
.about__inner { grid-template-columns: 1fr; gap: 48px; }
.about__visual { height: 240px; }
.about__orb { width: 120px; height: 120px; }
.about__ring:first-of-type { width: 180px; height: 180px; }
.about__ring--2 { width: 240px; height: 240px; }
.portfolio__grid { grid-template-columns: repeat(2, 1fr); }
.contact__inner { grid-template-columns: 1fr; }
.footer__inner { grid-template-columns: 1fr 1fr; }
.footer__brand { grid-column: 1 / -1; }
}
/* ── Mobile (≤ 768px) ──────────────────────────── */
@media (max-width: 768px) {
:root { --nav-h: 60px; }
/* Nav */
.nav__toggle { display: flex; }
.nav__links {
position: fixed;
top: var(--nav-h); left: 0; right: 0;
background: rgba(4,5,10,0.97);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
flex-direction: column;
padding: 24px clamp(20px,5vw,40px) 32px;
gap: 0;
border-bottom: 1px solid var(--border-soft);
transform: translateY(-100%);
opacity: 0;
pointer-events: none;
transition: transform 0.35s var(--ease-out), opacity 0.35s;
}
.nav__links.nav__links--open {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
.nav__link {
padding: 16px 0;
font-size: 16px;
border-bottom: 1px solid var(--border-soft);
width: 100%;
}
.nav__link:last-child { border-bottom: none; }
.nav__link::after { display: none; }
.nav__link--cta { border: none; border-radius: 0; padding: 16px 0; color: var(--accent); }
.nav__link.active {
color: var(--text-muted);
border-color: transparent;
background: transparent;
box-shadow: none;
}
.nav__link.active::before {
display: none;
}
/* Hero — na mobilu planet nenačítáme */
.hero__planet { display: none !important; }
.hero__static-bg { opacity: 1 !important; }
.hero__content { max-width: 100%; }
.hero__scroll { display: none; }
/* Rocket — simplified on mobile */
.rocket-track { display: none; }
/* Portfolio */
.portfolio__grid { grid-template-columns: 1fr; }
.portfolio__filters { gap: 6px; }
.filter-btn { padding: 8px 14px; font-size: 12px; }
/* Services */
.services__grid { grid-template-columns: 1fr; }
.service-card--wide {
grid-template-columns: 1fr;
grid-template-rows: auto;
}
.service-card--wide .service-card__icon { grid-row: auto; }
.service-card--wide .service-card__title { grid-column: 1; }
.service-card--wide .service-card__desc { grid-column: 1; }
.service-card--wide .service-card__list { grid-column: 1; grid-row: auto; }
/* About */
.about__visual { display: flex; }
.about__stats { gap: 20px; }
.about__stat-num { font-size: 26px; }
/* Contact */
.contact__form { grid-template-columns: 1fr; }
.form-group--submit { flex-direction: column; align-items: stretch; }
/* Footer */
.footer__inner { grid-template-columns: 1fr; }
/* Modal — mobilní úpravy */
.modal {
padding: 10px;
align-items: center;
justify-content: center;
}
.modal__panel {
max-height: 94vh;
width: 100%;
max-width: 100%;
margin: 0 auto;
border-radius: 4px;
}
.modal__panel-inner {
max-height: calc(94vh - 30px);
overflow-y: auto;
}
.modal__media { aspect-ratio: 16 / 9; }
.modal__body { padding: 16px 14px 24px; }
.modal__title { font-size: 18px; margin-bottom: 12px; }
.modal__bubble { font-size: 13px; line-height: 1.55; padding: 10px 12px; }
.modal__avatar { width: 26px; height: 26px; font-size: 9px; }
.modal__msg-meta { font-size: 9px; }
.modal__thread { gap: 12px; }
}
/* ── Small mobile (≤ 480px) ────────────────────── */
@media (max-width: 480px) {
.hero__headline { font-size: 28px; }
.section__title { font-size: 24px; }
.about__stats { flex-wrap: wrap; }
}
/* ── Wide screens (≥ 1440px) ───────────────────── */
@media (min-width: 1440px) {
.portfolio__grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}
/* ── Micro UI corner labels ─────────────────────── */
.ui-corners {
position: fixed;
inset: 0;
z-index: 45;
pointer-events: none;
}
.ui-corner {
position: absolute;
display: flex;
flex-direction: column;
gap: 4px;
font-family: ui-monospace, 'Courier New', monospace;
font-size: 9px;
letter-spacing: 0.13em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.26);
line-height: 1.6;
}
.ui-corner--tl { top: 18px; left: 22px; }
.ui-corner--tr { top: 18px; right: 22px; text-align: right; }
.ui-corner--bl { bottom: 18px; left: 22px; }
.ui-corner--br { bottom: 18px; right: 22px; text-align: right; }
@media (max-width: 768px) {
.ui-corner--tl,
.ui-corner--tr { display: none; }
.ui-corner--bl,
.ui-corner--br { opacity: 0.7; }
}
/* ── Reduced motion ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* HUD blink/pulse — functional feedback, not decoration */
@media (prefers-reduced-motion: reduce) {
.card__hud-dots span,
.card__hud-progress { animation: none !important; }
}
.card__hud-dots span { animation-duration: revert !important; animation-iteration-count: revert !important; }
.card__hud-progress { animation-duration: revert !important; animation-iteration-count: revert !important; }
/* Equalizer — functional audio feedback, runs regardless of reduced-motion */
.card__eq.is-active span:nth-child(1) { animation: eq-bar 0.72s ease-in-out 0.00s infinite alternate !important; }
.card__eq.is-active span:nth-child(2) { animation: eq-bar 0.50s ease-in-out 0.10s infinite alternate !important; }
.card__eq.is-active span:nth-child(3) { animation: eq-bar 0.88s ease-in-out 0.04s infinite alternate !important; }
.card__eq.is-active span:nth-child(4) { animation: eq-bar 0.62s ease-in-out 0.16s infinite alternate !important; }
.card__eq.is-active span:nth-child(5) { animation: eq-bar 0.78s ease-in-out 0.08s infinite alternate !important; }
/* ── Modal conversation thread ──────────────────────── */
.modal__thread {
display: flex;
flex-direction: column;
gap: 16px;
}
.modal__msg {
display: flex;
gap: 12px;
align-items: flex-start;
}
.modal__msg--mars { flex-direction: row-reverse; }
.modal__avatar {
width: 30px; height: 30px;
border-radius: 2px;
flex-shrink: 0;
display: flex; align-items: center; justify-content: center;
font-family: var(--font-mono);
font-size: 9px;
font-weight: 500;
letter-spacing: 0.04em;
}
.modal__avatar--client {
background: rgba(108,200,235,0.1);
border: 1px solid rgba(108,200,235,0.25);
color: #6CC8EB;
}
.modal__avatar--mars {
background: rgba(207,85,32,0.1);
border: 1px solid rgba(207,85,32,0.3);
color: #CF5520;
}
.modal__msg-wrap {
display: flex;
flex-direction: column;
gap: 5px;
flex: 1;
}
.modal__msg-wrap--right { align-items: flex-end; }
.modal__msg-meta {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.08em;
color: var(--text-dim);
text-transform: uppercase;
}
.modal__bubble {
padding: 10px 14px;
font-size: 14px;
line-height: 1.65;
color: rgba(200,210,230,0.88);
border: 1px solid;
max-width: 90%;
position: relative;
}
.modal__bubble--client {
background: rgba(108,200,235,0.05);
border-color: rgba(108,200,235,0.18);
border-radius: 2px 10px 10px 10px;
}
.modal__bubble--client::before {
content: '';
position: absolute;
top: -1px; left: -1px;
width: 7px; height: 7px;
border-top: 1.5px solid #6CC8EB;
border-left: 1.5px solid #6CC8EB;
}
.modal__bubble--mars {
background: rgba(207,85,32,0.06);
border-color: rgba(207,85,32,0.2);
border-radius: 10px 2px 10px 10px;
text-align: left;
}
.modal__bubble--mars::before {
content: '';
position: absolute;
top: -1px; right: -1px;
width: 7px; height: 7px;
border-top: 1.5px solid #CF5520;
border-right: 1.5px solid #CF5520;
}
.modal__site-link {
display: inline-flex;
align-items: center;
gap: 6px;
background: rgba(207,85,32,0.1);
border: 1px solid rgba(207,85,32,0.35);
border-radius: 2px;
padding: 4px 10px 4px 8px;
font-family: var(--font-mono);
font-size: 11px;
color: #CF5520;
margin-top: 10px;
margin-right: 6px;
cursor: pointer;
text-decoration: none;
transition: background 0.15s, border-color 0.15s;
}
.modal__site-link::before {
content: '';
display: block;
width: 5px; height: 5px;
border-radius: 50%;
background: #CF5520;
flex-shrink: 0;
}
.modal__site-link:hover {
background: rgba(207,85,32,0.2);
border-color: rgba(207,85,32,0.55);
}
/* ── HUD blink — absolutní override (musí být poslední v souboru) ── */
.card__hud-dots span {
animation: hudBlink 2.2s ease-in-out infinite !important;
}
.card__hud-dots span:nth-child(1) { animation-delay: 0s !important; }
.card__hud-dots span:nth-child(2) { animation-delay: 0.25s !important; }
.card__hud-dots span:nth-child(3) { animation-delay: 0.5s !important; }
@keyframes hudBlink {
0%, 100% { opacity: 1; }
50% { opacity: 0.15; }
}
/* ── HUD pulse — absolutní override (musí být poslední v souboru) ── */
.card__hud-progress {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 2px;
background: linear-gradient(to right, transparent, #CF5520 20%, #CF5520 80%, transparent);
z-index: 6;
pointer-events: none;
transform-origin: center;
animation: hudPulse 3s ease-in-out infinite !important;
}
@keyframes hudPulse {
0%, 100% { opacity: 0.85; transform: scaleX(1); }
50% { opacity: 0.15; transform: scaleX(0.4); }
}
/* Pulzující lišta vždy nad audio/video UI */
.card__hud-progress {
bottom: 0;
z-index: 20;
}
/* Audio a video UI — spodní padding aby lišta byla vidět */
.card__audio-ui {
padding-bottom: 6px;
margin-bottom: 2px;
}
.card__video-ui {
padding-bottom: 6px;
margin-bottom: 2px;
}
/* Modal HUD dots — absolutní override (musí být poslední v souboru) */
.modal__hud-dots span {
animation: hudBlink 2.2s ease-in-out infinite !important;
}
.modal__hud-dots span:nth-child(1) { animation-delay: 0s !important; }
.modal__hud-dots span:nth-child(2) { animation-delay: 0.25s !important; }
.modal__hud-dots span:nth-child(3) { animation-delay: 0.5s !important; }
/* Modal rohové akcenty — absolutní override */
.modal__corner--tl,
.modal__corner--tr,
.modal__corner--bl,
.modal__corner--br {
position: absolute;
width: 14px;
height: 14px;
z-index: 100;
pointer-events: none;
}
.modal__corner--tl { top: 0; left: 0; border-top: 2px solid #CF5520 !important; border-left: 2px solid #CF5520 !important; }
.modal__corner--tr { top: 0; right: 0; border-top: 2px solid #CF5520 !important; border-right: 2px solid #CF5520 !important; }
.modal__corner--bl { bottom: 0; left: 0; border-bottom: 2px solid #CF5520 !important; border-left: 2px solid #CF5520 !important; }
.modal__corner--br { bottom: 0; right: 0; border-bottom: 2px solid #CF5520 !important; border-right: 2px solid #CF5520 !important; }
/* Modal close — absolute v pravém dolním rohu fotografie */
.modal__close {
position: absolute !important;
bottom: 12px !important;
right: 12px !important;
top: auto !important;
}
/* ── Glitch efekt na section__title ─────────────────── */
@keyframes glitchShake {
0%,85%,100% {
transform: translate(0);
text-shadow: none;
opacity: 1;
}
86% {
transform: translate(-4px, 0);
text-shadow:
4px 0 0 rgba(207,85,32,1),
-4px 0 0 rgba(108,200,235,1);
opacity: 0.85;
}
87% {
transform: translate(4px, 0);
text-shadow:
-4px 0 0 rgba(207,85,32,1),
4px 0 0 rgba(108,200,235,1);
opacity: 1;
}
88% {
transform: translate(-2px, 2px);
text-shadow:
2px 0 0 rgba(207,85,32,0.9),
-2px 0 0 rgba(108,200,235,0.9);
opacity: 0.9;
}
89% {
transform: translate(2px, -2px);
text-shadow:
-2px 0 0 rgba(207,85,32,0.8),
2px 0 0 rgba(108,200,235,0.8);
opacity: 1;
}
90% {
transform: translate(-5px, 0);
text-shadow:
5px 0 0 rgba(207,85,32,1),
-5px 0 0 rgba(108,200,235,0.6);
opacity: 0.8;
}
91% {
transform: translate(0);
text-shadow: none;
opacity: 1;
}
}
.portfolio .section__title,
.services .section__title {
animation: glitchShake 5s ease-in-out infinite;
}
.services .section__title {
animation-delay: -2s;
}
/* ── Glitch animace — výjimka z reduced-motion ────── */
.portfolio .section__title,
.services .section__title {
animation: glitchShake 5s ease-in-out infinite !important;
animation-duration: 5s !important;
animation-iteration-count: infinite !important;
}
.portfolio .section__title { animation-delay: 0s !important; }
.services .section__title { animation-delay: -2s !important; }
/* ── Hero "design" glitch ────────────────────────── */
@keyframes designGlitch {
0%,80%,100% {
text-shadow: none;
transform: translate(0);
color: #CF5520;
}
81% {
transform: translate(-3px, 0);
text-shadow:
3px 0 0 rgba(255,255,255,0.9),
-3px 0 0 rgba(108,200,235,0.7);
color: #CF5520;
}
82% {
transform: translate(3px, 0);
text-shadow:
-3px 0 0 rgba(255,255,255,1),
3px 0 0 rgba(108,200,235,0.8);
color: #ff8855;
}
83% {
transform: translate(-2px, 1px);
text-shadow:
2px 0 0 rgba(255,255,255,0.6),
-2px 0 0 rgba(255,255,255,0.4);
color: #CF5520;
}
84% {
transform: translate(4px, -1px);
text-shadow:
-4px 0 0 rgba(255,255,255,0.9),
4px 0 0 rgba(108,200,235,0.5);
color: #ffffff;
}
85% {
transform: translate(-1px, 0);
text-shadow:
1px 0 0 rgba(255,255,255,0.5);
color: #CF5520;
}
86% {
transform: translate(0);
text-shadow: none;
color: #CF5520;
}
}
.hero__design-glitch {
display: inline-block;
color: #CF5520;
animation: designGlitch 6s ease-in-out infinite !important;
animation-duration: 6s !important;
animation-iteration-count: infinite !important;
}
/* ── About video ─────────────────────────────────── */
.about__video-wrap {
position: relative;
width: 100%;
border-radius: 3px;
overflow: hidden;
border: 1px solid rgba(207,85,32,0.22);
}
.about__video {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
.about__video-corner {
position: absolute;
width: 14px;
height: 14px;
z-index: 5;
pointer-events: none;
}
.about__video-corner--tl { top: 0; left: 0; border-top: 2px solid #CF5520; border-left: 2px solid #CF5520; }
.about__video-corner--tr { top: 0; right: 0; border-top: 2px solid #CF5520; border-right: 2px solid #CF5520; }
.about__video-corner--bl { bottom: 0; left: 0; border-bottom: 2px solid #CF5520; border-left: 2px solid #CF5520; }
.about__video-corner--br { bottom: 0; right: 0; border-bottom: 2px solid #CF5520; border-right: 2px solid #CF5520; }
.about__video-pulse {
position: absolute;
bottom: 0; left: 0;
width: 100%;
height: 2px;
background: linear-gradient(to right, transparent, #CF5520 20%, #CF5520 80%, transparent);
animation: hudPulse 3s ease-in-out infinite !important;
animation-duration: 3s !important;
animation-iteration-count: infinite !important;
z-index: 4;
pointer-events: none;
}
@media (max-width: 768px) {
.about__visual {
height: auto;
}
.about__video-wrap {
width: 100%;
max-width: 400px;
margin: 0 auto;
}
}
/* ── About tools belt ────────────────────────────── */
.about__tools {
margin-bottom: 28px;
}
.about__tools-label {
display: block;
font-family: var(--font-mono);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--text-dim);
margin-bottom: 12px;
}
.about__tools-belt {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.about__tool {
display: flex;
align-items: center;
gap: 7px;
padding: 7px 12px;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 3px;
background: rgba(255,255,255,0.03);
transition: border-color 0.2s, background 0.2s;
}
.about__tool:hover {
border-color: rgba(207,85,32,0.35);
background: rgba(207,85,32,0.05);
}
.about__tool-icon {
font-family: var(--font-sans);
font-size: 14px;
font-weight: 700;
font-style: italic;
color: #CF5520;
line-height: 1;
}
.about__tool-icon--code {
font-style: normal;
font-size: 12px;
letter-spacing: 0.04em;
}
.about__tool-icon--php {
font-style: italic;
font-size: 13px;
}
.about__tool-name {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.06em;
color: var(--text-muted);
}
.about__tool-svg {
color: #CF5520;
flex-shrink: 0;
}
.about__tools-divider {
width: 1px;
height: 26px;
background: rgba(255,255,255,0.1);
margin: 0 4px;
flex-shrink: 0;
}
@media (max-width: 768px) {
.about__tools-belt {
gap: 6px;
}
.about__tool {
padding: 6px 10px;
}
}
/* Modal site-link jako CTA tlačítko — lokální náhled */
.modal__site-link[data-url^='assets/'] {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 13px 24px;
border-radius: 2px;
background: rgba(207,85,32,0.10);
border: 1px solid #CF5520;
color: #CF5520;
font-family: var(--font-mono);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
margin-top: 14px;
cursor: pointer;
text-decoration: none;
transition: all 0.2s var(--ease-out);
box-shadow: 0 0 12px rgba(207,85,32,0.15);
position: relative;
}
.modal__site-link[data-url^='assets/']:hover {
background: rgba(207,85,32,0.20);
box-shadow: 0 0 24px rgba(207,85,32,0.3);
}
.modal__site-link[data-url^='assets/']::before {
content: '';
position: absolute;
top: -1px; left: -1px;
width: 7px; height: 7px;
border-top: 1.5px solid #CF5520;
border-left: 1.5px solid #CF5520;
}
.modal__site-link[data-url^='assets/']::after {
content: '';
position: absolute;
bottom: -1px; right: -1px;
width: 7px; height: 7px;
border-bottom: 1.5px solid #CF5520;
border-right: 1.5px solid #CF5520;
}
/* Křížek a preview tlačítko musí být vždy nad iframe drawerem */
.modal__close {
z-index: 200 !important;
}
.modal__preview-btn-wrap {
z-index: 200 !important;
}
.modal__media {
z-index: 5;
position: relative;
}
.modal__drawer {
z-index: 10;
}
/* ── HUD fullscreen preview overlay ─────────────── */
.hud-preview {
position: fixed;
inset: 0;
z-index: 2100;
display: flex;
align-items: center;
justify-content: center;
background: rgba(4,5,10,0.88);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
opacity: 0;
pointer-events: none;
transition: opacity 0.3s var(--ease-out);
}
.hud-preview.is-open {
opacity: 1;
pointer-events: auto;
}
.hud-preview__panel {
position: relative;
width: min(1100px, 96vw);
height: 90vh;
background: rgba(10,12,26,0.97);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border: 1px solid rgba(207,85,32,0.35);
border-radius: 4px;
display: flex;
flex-direction: column;
overflow: hidden;
flex-shrink: 0;
}
.hud-preview__panel::before {
content: '';
position: absolute;
top: -1px; left: -1px;
width: 14px; height: 14px;
border-top: 2px solid #CF5520;
border-left: 2px solid #CF5520;
z-index: 5;
pointer-events: none;
}
.hud-preview__panel::after {
content: '';
position: absolute;
bottom: -1px; right: -1px;
width: 14px; height: 14px;
border-bottom: 2px solid #CF5520;
border-right: 2px solid #CF5520;
z-index: 5;
pointer-events: none;
}
@media (max-width: 768px) {
.hud-preview {
align-items: flex-end;
padding: 0;
}
.hud-preview__panel {
width: 100%;
height: 92vh;
border-radius: 4px 4px 0 0;
}
}
.hud-preview__bar {
display: flex;
align-items: center;
height: 38px;
padding: 0 16px;
gap: 10px;
background: rgba(4,5,10,0.95);
border-bottom: 1px solid rgba(207,85,32,0.25);
flex-shrink: 0;
}
.hud-preview__dots {
display: flex;
gap: 3px;
flex-shrink: 0;
}
.hud-preview__dots span {
width: 4px; height: 4px;
border-radius: 50%;
animation: hudBlink 2.2s ease-in-out infinite !important;
}
.hud-preview__dots span:nth-child(1) { background: #CF5520; }
.hud-preview__dots span:nth-child(2) { background: rgba(207,85,32,0.45); animation-delay: .25s !important; }
.hud-preview__dots span:nth-child(3) { background: rgba(207,85,32,0.2); animation-delay: .5s !important; }
.hud-preview__label {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: 0.14em;
color: rgba(207,85,32,0.6);
text-transform: uppercase;
flex: 1;
}
.hud-preview__actions {
display: flex;
gap: 8px;
align-items: center;
flex-shrink: 0;
}
.hud-preview__btn {
display: flex;
align-items: center;
justify-content: center;
width: 28px; height: 28px;
border-radius: 2px;
border: 1px solid rgba(207,85,32,0.3);
background: rgba(4,5,10,0.8);
color: var(--text-muted);
cursor: pointer;
transition: all 0.15s;
text-decoration: none;
}
.hud-preview__btn:hover {
border-color: #CF5520;
color: #CF5520;
background: rgba(207,85,32,0.1);
}
.hud-preview__iframe {
flex: 1;
min-height: 0;
border: none;
display: block;
width: 100%;
background: #fff;
}
.hud-preview__pulse {
position: absolute;
top: 38px; left: 0; right: 0;
height: 2px;
background: linear-gradient(to right, transparent, #CF5520 20%, #CF5520 80%, transparent);
animation: hudPulse 3s ease-in-out infinite !important;
pointer-events: none;
}
/* ── Skupina site preview tlačítek v modal__media ─── */
.modal__site-btns {
position: absolute;
bottom: 12px;
left: 12px;
display: flex;
flex-direction: column;
gap: 8px;
z-index: 20;
}
@media (min-width: 480px) {
.modal__site-btns {
flex-direction: row;
align-items: center;
}
}
/* ── Planet canvas — overflow fix ───────────────────
overflow-x: clip ořízne scroll bar ale NEOŘEŽE absolutně
pozicované elementy (na rozdíl od overflow-x: hidden). */
html, body {
overflow-x: clip;
}
/* ══ PLANET OVERFLOW — absolutní override ═══════════ */
html {
overflow-x: clip !important;
}
body {
overflow-x: clip !important;
}
.hero__cta.btn--primary {
background: transparent;
border: 1px solid #CF5520;
border-radius: 2px;
color: #CF5520;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
box-shadow: 0 0 12px rgba(207,85,32,0.2);
position: relative;
}
.hero__cta.btn--primary::before {
content: '';
position: absolute;
top: -1px; left: -1px;
width: 7px; height: 7px;
border-top: 1.5px solid #CF5520;
border-left: 1.5px solid #CF5520;
}
.hero__cta.btn--primary::after {
content: '';
position: absolute;
bottom: -1px; right: -1px;
width: 7px; height: 7px;
border-bottom: 1.5px solid #CF5520;
border-right: 1.5px solid #CF5520;
}
.hero__cta.btn--primary:hover {
background: rgba(207,85,32,0.15);
box-shadow: 0 0 24px rgba(207,85,32,0.4);
transform: translateY(-2px);
color: #CF5520;
}
/* ── konec hero__cta styles ── */
html {
overflow-x: clip !important;
}
body {
overflow-x: clip !important;
}
.contact__form .btn--primary {
background: transparent;
border: 1px solid #CF5520;
border-radius: 2px;
color: #CF5520;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
box-shadow: 0 0 12px rgba(207,85,32,0.2);
position: relative;
}
.contact__form .btn--primary::before {
content: '';
position: absolute;
top: -1px; left: -1px;
width: 7px; height: 7px;
border-top: 1.5px solid #CF5520;
border-left: 1.5px solid #CF5520;
}
.contact__form .btn--primary::after {
content: '';
position: absolute;
bottom: -1px; right: -1px;
width: 7px; height: 7px;
border-bottom: 1.5px solid #CF5520;
border-right: 1.5px solid #CF5520;
}
.contact__form .btn--primary:hover {
background: rgba(207,85,32,0.15);
box-shadow: 0 0 24px rgba(207,85,32,0.4);
transform: translateY(-2px);
color: #CF5520;
}
.footer .btn--outline {
border: 1px solid #CF5520;
border-radius: 2px;
color: #CF5520;
font-family: var(--font-mono);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
background: transparent;
box-shadow: 0 0 12px rgba(207,85,32,0.15);
position: relative;
}
.footer .btn--outline::before {
content: '';
position: absolute;
top: -1px; left: -1px;
width: 7px; height: 7px;
border-top: 1.5px solid #CF5520;
border-left: 1.5px solid #CF5520;
}
.footer .btn--outline::after {
content: '';
position: absolute;
bottom: -1px; right: -1px;
width: 7px; height: 7px;
border-bottom: 1.5px solid #CF5520;
border-right: 1.5px solid #CF5520;
}
.footer .btn--outline:hover {
background: rgba(207,85,32,0.15);
box-shadow: 0 0 24px rgba(207,85,32,0.4);
transform: translateY(-2px);
color: #CF5520;
}
/* Glitch na nadpisu kontaktní sekce */
.contact .section__title {
animation: glitchShake 5s ease-in-out infinite !important;
animation-duration: 5s !important;
animation-iteration-count: infinite !important;
animation-delay: -1.5s !important;
}
/* Odstraň předchozí form-group ::before a ::after */
.form-group::before,
.form-group::after {
display: none;
}
/* HUD styl formulářových polí */
.form-input {
border-radius: 2px;
border: 1px solid rgba(207,85,32,0.22);
background: rgba(4,5,10,0.5);
position: relative;
}
.form-input:focus {
border-color: rgba(207,85,32,0.6);
border-radius: 2px;
box-shadow: none;
}
/* Wrapper pro každý input s rohovými akcenty */
.form-group {
position: relative;
}
/* Všechny 4 rohy pomocí box-shadow na pseudo-elementech form-group */
.form-group::before {
content: '';
position: absolute;
top: 28px; left: 0;
width: 8px; height: 8px;
border-top: 1.5px solid rgba(207,85,32,0.5);
border-left: 1.5px solid rgba(207,85,32,0.5);
pointer-events: none;
z-index: 3;
display: block;
}
.form-group::after {
content: '';
position: absolute;
bottom: 0; right: 0;
width: 8px; height: 8px;
border-bottom: 1.5px solid rgba(207,85,32,0.5);
border-right: 1.5px solid rgba(207,85,32,0.5);
pointer-events: none;
z-index: 3;
display: block;
}
/* Pravý horní roh */
.form-input-wrap--tr {
position: absolute;
top: 28px; right: 0;
width: 8px; height: 8px;
border-top: 1.5px solid rgba(207,85,32,0.5);
border-right: 1.5px solid rgba(207,85,32,0.5);
pointer-events: none;
z-index: 3;
}
/* Levý dolní roh */
.form-input-wrap--bl {
position: absolute;
bottom: 0; left: 0;
width: 8px; height: 8px;
border-bottom: 1.5px solid rgba(207,85,32,0.5);
border-left: 1.5px solid rgba(207,85,32,0.5);
pointer-events: none;
z-index: 3;
}
.form-group:focus-within::before,
.form-group:focus-within::after,
.form-group:focus-within .form-input-wrap--tr,
.form-group:focus-within .form-input-wrap--bl {
border-color: #CF5520;
}
/* Odstraň předchozí form-group rohové styly */
.form-group::before,
.form-group::after { display: none !important; }
.form-input-wrap--tr,
.form-input-wrap--bl { display: none !important; }
.hud-input-wrap {
position: relative;
width: 100%;
}
.hud-corner {
position: absolute;
width: 8px; height: 8px;
pointer-events: none;
z-index: 3;
transition: border-color 0.2s;
}
.hud-corner--tl { top: -1px; left: -1px; border-top: 1.5px solid rgba(207,85,32,0.4); border-left: 1.5px solid rgba(207,85,32,0.4); }
.hud-corner--tr { top: -1px; right: -1px; border-top: 1.5px solid rgba(207,85,32,0.4); border-right: 1.5px solid rgba(207,85,32,0.4); }
.hud-corner--bl { bottom: -1px; left: -1px; border-bottom: 1.5px solid rgba(207,85,32,0.4); border-left: 1.5px solid rgba(207,85,32,0.4); }
.hud-corner--br { bottom: -1px; right: -1px; border-bottom: 1.5px solid rgba(207,85,32,0.4); border-right: 1.5px solid rgba(207,85,32,0.4); }
.hud-input-wrap:focus-within .hud-corner {
border-color: #CF5520;
}
/* ── HUD field — formulářová pole ─────────────────── */
.hud-field {
position: relative !important;
border-radius: 3px !important;
background: rgba(4,5,10,0.45) !important;
border: 1px solid rgba(207,85,32,0.28) !important;
overflow: hidden !important;
transition: border-color 0.25s !important;
width: 100% !important;
}
.hud-field:focus-within {
border-color: rgba(207,85,32,0.7) !important;
box-shadow: 0 0 0 1px rgba(207,85,32,0.15), 0 0 16px rgba(207,85,32,0.1) !important;
}
.hud-field__bar {
display: flex !important;
align-items: center !important;
height: 24px !important;
padding: 0 10px !important;
gap: 6px !important;
background: rgba(4,5,10,0.72) !important;
border-bottom: 1px solid rgba(207,85,32,0.18) !important;
}
.hud-field__dots {
display: flex !important;
gap: 3px !important;
align-items: center !important;
}
.hud-field__dots span {
display: block !important;
width: 4px !important;
height: 4px !important;
border-radius: 50% !important;
animation: hudBlink 2.2s ease-in-out infinite !important;
}
.hud-field__dots span:nth-child(1) { background: #CF5520 !important; }
.hud-field__dots span:nth-child(2) { background: rgba(207,85,32,0.45) !important; animation-delay: .25s !important; }
.hud-field__dots span:nth-child(3) { background: rgba(207,85,32,0.2) !important; animation-delay: .5s !important; }
.hud-field__label {
font-family: var(--font-mono) !important;
font-size: 8px !important;
font-weight: 500 !important;
letter-spacing: 0.18em !important;
color: rgba(207,85,32,0.6) !important;
margin-left: auto !important;
text-transform: uppercase !important;
}
.hud-field__body {
position: relative !important;
}
.hud-field .form-input {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
width: 100% !important;
outline: none !important;
}
.hud-field__corner {
position: absolute !important;
width: 10px !important;
height: 10px !important;
z-index: 5 !important;
pointer-events: none !important;
}
.hud-field__corner--tl { top: 0; left: 0; border-top: 1.5px solid #CF5520 !important; border-left: 1.5px solid #CF5520 !important; }
.hud-field__corner--tr { top: 0; right: 0; border-top: 1.5px solid #CF5520 !important; border-right: 1.5px solid #CF5520 !important; }
.hud-field__corner--bl { bottom: 0; left: 0; border-bottom: 1.5px solid #CF5520 !important; border-left: 1.5px solid #CF5520 !important; }
.hud-field__corner--br { bottom: 0; right: 0; border-bottom: 1.5px solid #CF5520 !important; border-right: 1.5px solid #CF5520 !important; }
/* Skryj původní form-label nad polem */
.form-group:has(.hud-field) > .form-label {
display: none !important;
}
/* ── Portfolio alien ───────────────────────────────── */
.portfolio__alien {
aspect-ratio: 4/3;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.portfolio__alien img {
width: 100%;
height: 100%;
object-fit: contain;
}
@media (max-width: 768px) {
.portfolio__alien {
order: 999;
}
}
/* Mobilní CSS planeta — skrytá na desktopu */
.hero__planet-mobile {
display: none;
}
@media (max-width: 768px) {
/* Skryj canvas planety */
.hero__planet {
display: none !important;
}
/* Zobraz CSS planetu */
.hero__planet-mobile {
display: block;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%) translateY(25%) !important;
width: 200vw;
left: 50%;
aspect-ratio: 1 / 1;
z-index: 4;
pointer-events: none;
-webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.4) 14%, black 28%);
mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.4) 14%, black 28%);
animation: mobilePlanetScroll linear;
animation-timeline: scroll();
animation-range: 0% 50%;
}
@keyframes mobilePlanetScroll {
0% { transform: translateX(-50%) translateY(25%); opacity: 1; }
100% { transform: translateX(-50%) translateY(-120%); opacity: 0; }
}
.hero__planet-mobile__glow {
position: absolute;
inset: -15%;
border-radius: 50%;
background: radial-gradient(circle at 50% 50%,
rgba(207,85,32,0.0) 35%,
rgba(207,85,32,0.25) 55%,
rgba(255,70,0,0.18) 70%,
rgba(108,200,235,0.05) 85%,
transparent 100%
);
filter: blur(8px);
}
.hero__planet-mobile__sphere {
position: absolute;
inset: 10%;
border-radius: 50%;
background:
radial-gradient(circle at 35% 30%,
#A84020 0%,
#7A3012 25%,
#5C2210 45%,
#3A1506 65%,
#200A02 100%
);
box-shadow:
inset -20px -15px 40px rgba(0,0,0,0.7),
inset 8px 8px 20px rgba(255,100,30,0.15),
0 0 40px rgba(207,85,32,0.3),
0 0 80px rgba(255,70,0,0.15);
}
.hero__planet-mobile__sphere::before {
content: '';
position: absolute;
inset: 0;
border-radius: 50%;
background:
radial-gradient(circle at 60% 40%, rgba(0,0,0,0.3) 0%, transparent 15%),
radial-gradient(circle at 30% 65%, rgba(0,0,0,0.2) 0%, transparent 12%),
radial-gradient(circle at 75% 70%, rgba(0,0,0,0.25) 0%, transparent 10%),
radial-gradient(circle at 20% 35%, rgba(255,120,40,0.1) 0%, transparent 20%);
}
.hero__planet-mobile__atmosphere {
position: absolute;
inset: 8%;
border-radius: 50%;
box-shadow:
0 0 0 4px rgba(207,85,32,0.12),
0 0 0 8px rgba(255,70,0,0.07),
0 0 0 16px rgba(207,85,32,0.04);
}
/* Zprovozni raketku na mobilu */
.rocket-track {
display: block !important;
}
}
@media (max-width: 768px) {
.hero__planet {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
}
}
@media (max-width: 768px) {
.hero__planet-mobile {
z-index: 1;
}
.portfolio {
position: relative;
z-index: 2;
}
}
@media (max-width: 768px) {
.hero::after {
display: none;
}
.hero {
padding-bottom: 0;
z-index: 1;
}
}
@media (min-width: 769px) {
.hero__planet {
z-index: 4 !important;
}
.portfolio {
z-index: 2 !important;
}
}
@media (min-width: 769px) {
.hero__planet {
z-index: 100 !important;
}
}