/* --- Volitelný tip do HTML pro rychlejší načtení pozadí:
----------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Open+Sans&display=swap');
:root{
--panel-cis: 800px 600px;
}
/* ===== ZÁKLAD ===== */
body {
margin: 0;
padding: 0;
background-color: #0e0e0e;
background-image: url('obrazky/background.png');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
color: #fff;
font-family: 'Open Sans', sans-serif;
overflow-x: hidden;
}
/* ===== HLAVIČKA A MENU ===== */
header {
display: flex;
justify-content: center;
align-items: center;
padding: 26px 30px;
position: fixed;
width: 100%;
top: 0;
background: transparent;
z-index: 1000;
}
.header-inner { display: flex; align-items: center; gap: 20px; }
header .logo {
font-family: 'Playfair Display', serif;
font-size: 1.8em;
color: #fff;
}
/* Hamburger */
.menu-toggle {
color: #fff !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
-webkit-appearance: none;
appearance: none;
padding: 0;
line-height: 1;
cursor: pointer;
}
/* mobilní menu */
#mobile-menu {
position: fixed;
top: 0;
right: -100%;
width: 100%;
height: 100%;
background: rgba(14, 14, 14, 0.95);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 40px;
transition: right 0.3s ease;
z-index: 1000;
}
#mobile-menu a {
color: #fff;
text-decoration: none;
font-size: 2em;
text-transform: uppercase;
letter-spacing: 1px;
transition: color 0.3s ease;
}
#mobile-menu a:hover { color: #caa06b; }
#mobile-menu.active { right: 0; }
/* Křížek v mobilním menu */
.close-menu {
position: absolute;
top: 20px;
right: 30px;
font-size: 2.5em;
color: #fff !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
-webkit-appearance: none;
appearance: none;
padding: 0;
line-height: 1;
cursor: pointer;
}
/* ===== HERO ===== */
.hero {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
padding: 0 5%;
position: relative;
}
.hero-inner {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
max-width: 1200px;
}
.hero-text { max-width: 50%; }
.hero-text h1 {
font-family: 'Playfair Display', serif;
font-size: 3.8em;
line-height: 1.3;
margin-bottom: 30px;
text-shadow: 2px 2px 8px rgba(0,0,0,0.7);
}
/* Tlačítka v hero */
.hero-buttons {
display: flex;
gap: 15px;
flex-wrap: wrap;
margin-top: -10px;
}
.button {
display: inline-block;
padding: 12px 30px;
border: 2px solid #fff;
color: #fff;
text-decoration: none;
border-radius: 30px;
font-weight: bold;
letter-spacing: 1px;
transition: all 0.3s ease;
}
.button:hover {
background-color: #caa06b;
border-color: #caa06b;
color: #000;
}
/* Obrázky nůžek */
.hero-scissors {
max-width: 30%;
margin-left: -50px;
position: relative;
}
.hero-scissors img {
width: 100%;
height: auto;
display: block;
filter: drop-shadow(0 0 30px rgba(0,0,0,0.7));
}
#stilo-4 {
position: absolute;
right: 10%;
bottom: 30%;
width: 26vw;
max-width: 380px;
height: auto;
transform: rotate(32deg);
transform-origin: 70% 30%;
filter: grayscale(1) brightness(0.85) contrast(1.15);
pointer-events: none;
z-index: 2;
}
/* ===== PANELY (ceník, o mně, kontakt, inovace, keratin) ===== */
#pricing-panel,
#about-panel,
#contact-panel,
#innovation-panel,
#keratin-panel {
position: fixed;
top: 0;
right: -100%;
width: 100%;
height: 100%;
background: rgba(14,14,14,0.95);
color: #fff;
display: none; /* ← panel je defaultně skrytý */
justify-content: center;
align-items: center;
transition: right 0.4s ease;
z-index: 1002;
overflow-y: auto;
pointer-events: none;
content-visibility: auto;
contain-intrinsic-size: var(--panel-cis);
}
#pricing-panel.active,
#about-panel.active,
#contact-panel.active,
#innovation-panel.active,
#keratin-panel.active {
right: 0;
display: flex; /* ← zobrazí se jen pokud je .active */
content-visibility: visible;
z-index: 2000;
pointer-events: auto;
}
/* Křížky v panelech */
.close-pricing,
.close-about,
.close-contact,
.close-innovation,
.close-keratin {
position: absolute;
top: 20px;
right: 30px;
font-size: 2.5em;
color: #fff !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
-webkit-appearance: none;
appearance: none;
padding: 0;
line-height: 1;
cursor: pointer;
}
.pricing,
.about-text,
.contact-text,
.innovation-text,
.keratin {
text-align: center;
padding: 40px 15px;
}
.pricing h2,
.about-text h2,
.contact-text h2,
.innovation-text h2,
.keratin h2 {
font-family: 'Playfair Display', serif;
font-size: 2.5em;
margin-bottom: 10px;
}
.subtitle {
font-size: 1em;
color: #caa06b;
margin-bottom: 30px;
}
.pricing-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
max-width: 1000px;
margin: 0 auto 30px;
}
.card {
background-color: #1a1a1a;
border: 1px solid #333;
border-radius: 15px;
padding: 20px 15px;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
transform: translateY(-10px);
box-shadow: 0 15px 30px rgba(0,0,0,0.6);
}
.card h3 {
font-size: 1.5em;
margin-bottom: 10px;
color: #caa06b;
}
.card .price {
display: block;
font-size: 1.3em;
font-weight: bold;
color: #fff;
}
.about-text p,
.contact-text p,
.innovation-text img {
max-width: 300px;
height: auto;
display: block;
margin: 0 auto;
}
.contact-text p:last-child {
font-weight: bold;
font-size: 1.3em;
color: #caa06b;
}
.buttons {
display: flex;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
}
.button.primary {
background-color: #caa06b;
color: #0e0e0e;
border: none;
padding: 12px 25px;
border-radius: 30px;
font-weight: bold;
text-decoration: none;
transition: background-color 0.3s ease;
}
.button.primary:hover { background-color: #b88c52; }
.button.secondary {
border: 2px solid #caa06b;
color: #caa06b;
padding: 12px 25px;
border-radius: 30px;
font-weight: bold;
text-decoration: none;
transition: background-color 0.3s ease, color 0.3s ease;
}
.button.secondary:hover {
background-color: #caa06b;
color: #0e0e0e;
}
/* Keratin layout */
.keratin-content-grid {
display: grid;
grid-template-columns: minmax(0, 2fr) minmax(0, 1.5fr);
gap: 30px;
align-items: center;
max-width: 1000px;
margin: 40px auto 0;
}
.keratin-text {
text-align: left;
}
.keratin-media img {
width: 100%;
height: auto;
border-radius: 15px;
}
/* ===== ODKAZY V KONTAKTECH ===== */
.contact-text a { color: #ccc; text-decoration: none; }
.contact-text a:hover { color: #caa06b; }
.google-map { margin-top: 20px; }
/* ===== RESPONSIVE ===== */
@media (max-width: 1400px) {
body { background-image: url('obrazky/background-mobile.png'); }
}
@media (max-width: 1200px) {
.hero-inner { flex-direction: column; text-align: center; }
.hero-text { max-width: 100%; }
.hero-text h1 { font-size: 2.5em; }
.hero-scissors { max-width: 80%; margin-left: 0; }
.hero-buttons { justify-content: center; }
body { background-attachment: scroll; }
}
@media (max-width: 900px) {
.keratin-content-grid {
grid-template-columns: 1fr;
}
}
/* ===== PŘÍSTUPNOST ===== */
@media (prefers-reduced-motion: reduce) {
#mobile-menu,
#pricing-panel,
#about-panel,
#contact-panel,
#innovation-panel,
#keratin-panel {
transition: none;
}
}
/* === Anti-jump patch === */
html {
overflow-y: scroll;
scrollbar-gutter: stable both-edges;
}
#mobile-menu,
#pricing-panel,
#about-panel,
#contact-panel,
#innovation-panel,
#keratin-panel {
will-change: right;
backface-visibility: hidden;
transform: translateZ(0);
overscroll-behavior: contain;
}
/* Scroll jen v panelu Inovace */
#innovation-panel {
overflow-y: auto;
-webkit-overflow-scrolling: touch;
align-items: flex-start;
padding: 90px 15px 40px;
}