html { font-size: 62.5%; } /* 1rem = 10px */
/* === STEP 1: base reset to avoid double scrollbars === */
/* === Global base reset === */
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
}
html, body {
margin: 0;
padding: 0;
overflow-x: hidden; /* avoid horizontal scrollbar */
}
/*Main*/
body.main-bg {
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: top center;
background-size: 100% auto; /* fit width, keep full height */
min-height: calc(100vw * 3.4125);/* 6552/1920 = 3.4125 => makes page tall enough to scroll */
/* IMPORTANT: no background-attachment: fixed; */
}
/* Články */
body.clanky-bg {
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: top center;
background-size: 100% auto; /* keep the SVG as a full-page background */
min-height: calc(100vw * 2747/1920);
}
/* Kariéra */
body.kariera-bg {
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: top center;
background-size: 100% auto;
min-height: calc(100vw * 2747/1920);
}
/* Kontakt */
body.kontakt-bg {
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: top center;
background-size: 100% auto;
min-height: calc(100vw * 2747/1920);
}
/* ===== NAVIGATION BAR (compact with stacked SVG logo) ===== */
.main-nav {
position: fixed;
top: 0; left: 0; right: 0;
z-index: 1000;
width: 100%;
background: rgba(11,14,18,0.7);
backdrop-filter: blur(0.6rem);
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 6rem; /* smaller vertical padding */
height: 7.5rem; /* fixed clean height */
}
/* === Brand button (two stacked SVGs) === */
.brand-button {
display: flex;
flex-direction: column;
align-items: flex-start;
text-decoration: none;
margin-right: 2rem;
padding: 0;
line-height: 0;
user-select: none;
-webkit-tap-highlight-color: transparent;
}
.brand-logo-sub {
height: 6.2px; /* reduced from 16px → thinner top line */
width: auto;
margin-bottom: 0.2rem;
}
.brand-logo-main {
height: 26px; /* reduced from 40px → more balanced */
width: auto;
}
.brand-button img {
display: block;
filter: drop-shadow(0 0 1px rgba(0,0,0,0.2));
transition: transform .25s ease, opacity .25s ease;
}
.brand-button:hover img {
transform: translateY(-1px);
opacity: 0.9;
}
/* === Navigation menu === */
.main-nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 6rem; /* slightly narrower gap */
flex: 1;
}
.main-nav ul li { display: inline-block; }
.main-nav ul a {
display: block;
padding: 1rem 0.6rem; /* smaller vertical padding */
color: #ffffff;
text-decoration: none;
font-weight: 600;
font-family: "Open Sans","Segoe UI",sans-serif;
font-size: 1.4rem;
letter-spacing: 0.05rem;
text-transform: capitalize;
transition: color 0.3s ease, transform 0.2s ease;
}
.main-nav ul a:hover {
color: #ede3c8;
transform: scale(1.05);
}
.main-nav ul a.active {
border-bottom: 0.15rem solid #ede3c8;
}
/* ===== CONTENT SPACING (so text doesn’t hide under navbar) ===== */
body > h1,
body > main,
body > section:first-of-type {
padding-top: 10rem; /* adjust to new compact nav height */
}
/* ===== PAGE TRANSITIONS (unchanged) ===== */
html, body { margin: 0; padding: 0; }
.page { padding-top: 10rem; }
:root {
--dur-enter: 280ms;
--dur-exit: 240ms;
--ease: cubic-bezier(.22,.61,.36,1);
}
.fx-enter .page { opacity: 0.01; transform: translateY(0.6rem); }
.fx-enter.fx-enter-active .page {
transition:
opacity var(--dur-enter) var(--ease),
transform var(--dur-enter) var(--ease);
opacity: 1;
transform: translateY(0);
}
.fx-exit .page {
transition:
opacity var(--dur-exit) var(--ease),
transform var(--dur-exit) var(--ease);
opacity: 0;
transform: translateY(-0.4rem);
}
@media (prefers-reduced-motion: reduce) {
.fx-enter .page,
.fx-enter.fx-enter-active .page,
.fx-exit .page {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
}
/* ===== RESPONSIVE ===== */
@media (max-width: 90rem) {
.main-nav { padding: 0.8rem 3rem; height: 6.5rem; }
.brand-logo-sub { height: 8px; }
.brand-logo-main { height: 22px; }
.main-nav ul { gap: 3.5rem; }
}
/* ===== HERO TEXT (Domov) ===== */
.hero-text {
position: relative;
min-height: 100vh; /* same full-screen feel; adjust if you want less */
}
.hero-text {
position: absolute;
top: 90%;
left: 12%;
transform: translateY(-50%);/* perfect vertical centering */
text-align: left;
line-height: 1.1;
font-family: "Cinzel", serif;
font-weight: 400;
font-size: 10rem;
text-transform: uppercase;
opacity: 0;
animation: fadeInHero 1.5s ease forwards 0.3s;
filter: brightness(0.9); /* slight dim overall */
}
/* text lines */
.hero-text .line1 {
font-size: 10rem;
font-weight: 400;
color: #ffffff;
text-transform: uppercase;
opacity: 0.8; /* 80% visible */
}
.hero-text .line2 {
font-size: 10rem;
font-weight: 400;
color: #d7cb4f;
text-transform: uppercase;
opacity: 0.85; /* gold still slightly stronger */
}
/* Subtle fade-in animation */
.hero-text {
opacity: 0;
animation: fadeInHero 1.5s ease forwards 0.3s;
}
@keyframes fadeInHero {
to {
opacity: 1;
}
}
/* Responsiveness */
@media (max-width: 120rem) {
.hero-text .line1,
.hero-text .line2 {
font-size: 7rem;
}
}
@media (max-width: 80rem) {
.hero-text .line1,
.hero-text .line2 {
font-size: 5.2rem;
}
}
.page {
position: relative;
height: 10ovh; /* makes the hero section take full screen height */
padding-top: 0; /* override nav spacing for this layout */
}
/* ===== HERO BUTTON ===== */
.hero-btn {
display: inline-block;
margin-top: 5rem; /* spacing below the text */
padding: 0.8rem 2.8rem;
border-radius: 4rem;
border: 0.2rem solid rgba(254, 255, 245, 0.80);
background: rgba(10, 12, 18, 0.50);
opacity: 0.78;
color: #FEFFF5;
text-align: center;
font-family: "Open Sans", sans-serif;
font-size: 2.1rem;
font-weight: 600;
line-height: normal;
text-decoration: none;
cursor: pointer;
transition:
background 0.35s ease,
color 0.35s ease,
border-color 0.35s ease,
box-shadow 0.35s ease,
transform 0.25s ease;
}
.hero-btn,
.hero-btn:visited {
color: #FEFFF5; /* keep your original text color */
}
/* ===== FADE-IN ANIMATIONS ===== */
/* Hero text fade-in (already exists) */
.hero-text {
opacity: 0;
animation: fadeInHero 1.5s ease forwards 0.3s;
}
@keyframes fadeInHero {
to {
opacity: 1;
}
}
/* Button fades in slightly later */
.hero-btn {
opacity: 0;
animation: fadeInButton 1.3s ease forwards 1s; /* starts after 1.8s delay */
}
@keyframes fadeInButton {
to {
opacity: 1;
}
}
/* Hover & focus effects */
.hero-btn:hover,
.hero-btn:focus {
opacity: 1;
background: rgba(254, 255, 245, 0.85); /* white semi-transparent hover */
color: #0b0e12; /* dark text for contrast */
border-color: rgba(254, 255, 245, 1); /* solid white border */
box-shadow: 0 0 2.5rem rgba(254, 255, 245, 0.25); /* soft white glow */
transform: translateY(-0.2rem);
}
/* Optional subtle shadow for depth (only on hover) */
.hero-btn:hover {
box-shadow: 0 0 2.5rem rgba(254, 255, 245, 0.25);
}
/* Responsiveness */
@media (max-width: 80rem) {
.hero-btn {
font-size: 2.4rem;
padding: 1.4rem 3.6rem;
margin-top: 3rem;
}
}
/* ===== ABOUT SECTION (scroll content) ===== */
/* ===== ABOUT SECTION (Domov) ===== */
/* ABOUT layout */
.about-section {
position: relative;
min-height: 90vh;
display: flex;
align-items: center;
padding: 2rem 12%;
background: transparent;
}
.about-wrap {
max-width: 100rem;
opacity: 0;
transform: translateY(4rem);
transition: opacity 900ms ease, transform 900ms ease;
}
.about-wrap.visible { opacity: 1; transform: translateY(0); }
/* Title split into two lines with a BIG gap below */
.about-title {
margin: 0 0 8rem 0; /* ← big gap after the heading */
line-height: 1.5;
}
.about-title-line1,
.about-title-line2 {
display: block;
font-family: "Cinzel", serif;
font-weight: 400;
font-size: 10rem;
color: rgba(255,255,245,0.92);
text-transform: uppercase;
}
/* (optional) if you want line 2 a bit larger, uncomment next line */
/* .about-title-line2 { font-size: 6rem; } */
/* Lead & sub lines (Cardo) with a generous gap before stats */
.about-lead {
font-family: "Cardo", serif;
font-weight: 400;
font-size: 3rem;
line-height: 1.25;
letter-spacing: 0.06rem;
color: rgba(255, 255, 255, 0.85);
margin: 0 0 2rem 0;
text-transform: uppercase;
}
.about-sub {
font-family: "Cardo", serif;
font-weight: 400; /* Cardo has 400/700 */
font-size: 3rem;
line-height: 1.25;
letter-spacing: 0.02rem;
color: rgba(255, 255, 255, 0.78);
margin: 0 0 2rem 0; /* ← bigger gap before stats */
text-transform: uppercase;
}
/* Stats row with bigger top gap */
.about-stats {
display: flex;
gap: 12rem;
flex-wrap: wrap;
margin-top: 5rem;
}
/* Gradient numbers */
.stat .num {
font-family: "Cardo", serif;
font-weight: 400;
font-size: 7rem;
line-height: 1;
margin-bottom: 0.8rem;
/* gradient text */
background: linear-gradient(106deg, #4E4E48 9.14%, #998937 47.76%);
-webkit-background-clip: text;
background-clip: text;
color: transparent; /* show gradient */
}
/* Labels */
.stat .label {
font-family: "Cardo", sans-serif;
font-weight: 400;
font-size: 1rem;
letter-spacing: 0.1rem;
color: rgba(255, 255, 255, 0.7);
text-transform: uppercase;
}
/* Responsive tweaks */
@media (max-width: 120rem) {
.about-title-line1, .about-title-line2 { font-size: 5.8rem; }
.about-lead { font-size: 2.4rem; }
.about-sub { font-size: 2.4rem; margin-bottom: 4rem; }
}
@media (max-width: 80rem) {
.about-section { padding: 9rem 8%; }
.about-title-line1, .about-title-line2 { font-size: 3.6rem; }
.stat .num { font-size: 4rem; }
}
/* ===== VALUES SECTION ===== */
.values-section {
position: relative;
min-height: 80vh;
padding: 10rem 8%; /* slightly wider horizontal padding */
color: #f1f1f1;
background: transparent;
}
/* Intro paragraph on top */
.values-intro p {
font-family: "Montserrat", sans-serif;
font-weight: 400;
font-size: 2rem;
line-height: 1.8;
color: rgb(234, 237, 243);
text-align: center;
margin-bottom: 15rem;
max-width: 180rem;
margin-left: auto;
margin-right: auto; /* center the long intro block */
}
/* Wider three-column layout */
.values-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20rem; /* more horizontal space between columns */
justify-content: space-between;
max-width: 192rem; /* expands section width nicely */
margin: 0 auto;
}
/* Each block */
.value-item {
display: flex;
align-items: flex-start;
gap: 2rem; /* more spacing between line & text */
}
/* Glass-like hover effect for each value block */
.value-item {
position: relative;
transition: all 0.45s ease;
border-radius: 1.6rem;
padding: 4rem 3rem; /* adds inner space for the glow */
background: rgba(255, 255, 255, 0.02); /* subtle base layer */
backdrop-filter: blur(0.01rem);
-webkit-backdrop-filter: blur(0.01rem);
}
.value-item:hover {
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(1.2rem);
-webkit-backdrop-filter: blur(0.8rem);
box-shadow: 0 0 2.5rem rgba(255, 255, 255, 0.08);
transform: translateY(-0.6rem); /* gentle lift */
}
/* optional: make the vertical line glow softly on hover */
/* vertical line hover: white → gold with glow */
.value-item:hover .vline {
background: linear-gradient(180deg, #d7cb4f 0%, #a89b3d 100%);
box-shadow:
0 0 1.2rem rgba(215, 203, 79, 0.7),
0 0 2.5rem rgba(215, 203, 79, 0.35),
0 0 4rem rgba(215, 203, 79, 0.15);
transition: all 0.6s ease;
}
/* smooth transition for text brightness */
.value-item:hover .value-text h3,
.value-item:hover .value-text p {
color: rgba(255, 255, 255, 0.95);
transition: color 0.3s ease;
}
/* Vertical line */
.vline {
width: 0.2rem;
background: rgba(255, 255, 255, 0.8);
flex-shrink: 0;
height: 100%;
border-radius: 0.1rem;
transition: all 0.6s ease;
}
/* Text content */
.value-text h3 {
font-family: "Cinzel", serif;
font-weight: 600;
font-size: 2.5rem;
color: #ffffff;
margin: 0 0 1rem;
}
.value-text p {
font-family: "Cardo", serif;
font-weight: 300;
font-size: 1.7rem;
line-height: 1.6;
color: rgb(226, 226, 237);
margin: 0;
max-width: 120rem; /* sweet spot for long lines */
letter-spacing: 0.04rem; /* improves readability for large serif text */
}
/* Icon inside value card – fills upper half */
.value-text {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
text-align: center;
height: 100%;
gap: 2rem;
}
.value-icon {
width: auto;
height: 45%; /* ≈ upper half of the card */
max-height: 14rem; /* prevent it from getting too huge */
object-fit: contain;
opacity: 0.95;
filter: drop-shadow(0 6px 18px rgba(0,0,0,0.35));
transition: transform 0.35s ease, opacity 0.35s ease;
}
.value-item:hover .value-icon {
transform: scale(1.05);
opacity: 1;
}
.value-item {
min-height: 36rem; /* adjust as needed for balance */
}
/* Smaller screens */
@media (max-width: 80rem) {
.value-icon {
height: 38%;
max-height: 10rem;
}
}
/* Scroll reveal */
.values-section {
opacity: 0;
transform: translateY(4rem);
transition: opacity 900ms ease, transform 900ms ease;
}
.values-section.visible {
opacity: 1;
transform: translateY(0);
}
/* Responsive tweaks */
@media (max-width: 120rem) {
.values-grid {
gap: 7rem;
grid-template-columns: repeat(auto-fit, minmax((35rem, 1fr)));
}
.value-text h3 { font-size: 1.8rem; }
.value-text p { font-size: 1.8rem; }
}
@media (max-width: 90rem) {
.values-section { padding: 8rem 8%; }
.values-grid { gap: 5rem; }
.value-text h3 { font-size: 1.4rem; }
.value-text p { font-size: 1.4rem; }
}
/* ===== SERVICES ===== */
.services {
padding: 8rem 10% 10rem;
}
/* Title */
.services-title {
color: #C0BECE;
text-align: center;
font-family: "Raleway", sans-serif;
font-size: 7rem;
font-weight: 500;
line-height: 150%; /* 105/10rem */
letter-spacing: -0.154rem;
margin: 0 0 1rem 0;
}
/* Subtext */
.services-sub {
color: #BEC4CE;
text-align: center;
font-family: "Raleway", sans-serif;
font-size: 4rem;
font-weight: 500;
line-height: 150%; /* 6rem */
letter-spacing: -0.088rem;
margin: 0 0 7rem 0;
}
/* Grid: 3 columns, 2 rows */
.services-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 4rem 8rem; /* row gap / col gap */
max-width: 190rem;
margin: 0;
position: relative;
}
/* Vertical dividers between columns (desktop) */
.services-grid::before,
.services-grid::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 0.5rem;
background: rgba(255,255,255,0.18);
}
.services-grid::before { left: calc(33.333%); }
.services-grid::after { left: calc(66.666%); }
/* Card */
.service { padding: 1.8rem 2.4rem; }
/* Headings of 6 elements */
.service h3 {
color: #DAD9ED;
font-family: "Cardo", serif;
font-size: 2.5rem;
font-weight: 700;
line-height: 6rem; /* 171.429% */
letter-spacing: -0.0385rem;
margin: 0 0 0.6rem 0;
}
/* Text of 6 elements */
.service p {
color: #DAD9ED;
font-family: "Cardo", serif;
font-size: 1.5rem;
font-weight: 400;
line-height: 6rem;
letter-spacing: -0.0275rem;
margin: 0;
opacity: 0.92;
}
/* Hover polish: slight glass & lift */
.service {
border-radius: 1.4rem;
transition: background 0.35s ease, transform 0.25s ease, box-shadow 0.35s ease;
}
.service:hover {
background: rgba(255,255,255,0.04);
backdrop-filter: blur(0.6rem);
-webkit-backdrop-filter: blur(0.6rem);
transform: translateY(-0.4rem);
box-shadow: 0 0.6rem 2.4rem rgba(0,0,0,0.25);
}
/* Responsive */
@media (max-width: 140rem) {
.services-title { font-size: 5.8rem; }
.services-sub { font-size: 3.2rem; }
.service h3 { font-size: 2rem; line-height: 5.2rem; }
.service p { font-size: 1.8rem; line-height: 4.4rem; }
}
@media (max-width: 108rem) {
.services-grid {
grid-template-columns: 1fr 1fr 1fr; /* 3 columns */
}
.services-grid::before,
.services-grid::after { display: none; } /* hide desktop vertical lines */
}
@media (max-width: 84rem) {
.services { padding: 9rem 7% 11rem; }
.services-title { font-size: 4rem; line-height: 1.35; letter-spacing: -0.08rem; }
.services-sub { font-size: 2.2rem; line-height: 1.5; letter-spacing: -0.04rem; margin-bottom: 4rem; }
.services-grid { grid-template-columns: 1fr; gap: 3.6rem; }
.service h3 { font-size: 2rem; line-height: 4rem; }
.service p { font-size: 2.4rem; line-height: 3.2rem; }
}
/* === APES – Testimonials === */
:root { --apes-gold: #d7cb4f;}
.apes-testimonials {
padding: 12vh 8vw;
position: relative;
}
.apes-t-title {
font-size: 4.2rem; /* ~42px if 1rem=10px */
line-height: 1.15;
text-align: center;
letter-spacing: 0.02em;
margin: 0 0 4rem 0;
color: rgba(255,255,255,0.92);
text-wrap: balance;
}
.apes-t-carousel {
position: relative;
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 1.6rem;
}
.apes-t-viewport {
overflow: hidden;
border-radius: 2rem;
}
.apes-t-track {
display: flex;
transition: transform 480ms cubic-bezier(.22,.61,.36,1);
will-change: transform;
}
.apes-t-card {
min-width: 100%;
padding: 4rem 4.5rem;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.14);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-radius: 2rem;
box-shadow: 0 10px 30px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(255,255,255,0.04);
}
.apes-t-header {
margin: 0 0 1.6rem 0;
}
.apes-t-ceo {
font-size: 2.2rem;
font-weight: 600;
color: var(--apes-gold);
letter-spacing: 0.01em;
margin: 0;
opacity: 0.7;
}
.apes-t-quote {
font-size: 2.2rem;
line-height: 1.6;
color: rgba(255,255,255,0.88);
margin: 0;
}
/* nav arrows */
.apes-t-nav {
appearance: none;
border: 1px solid rgba(255,255,255,0.18);
background: rgba(255,255,255,0.04);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-radius: 50%;
width: 5.2rem; height: 5.2rem;
font-size: 3.2rem;
line-height: 1;
color: rgba(255,255,255,0.85);
cursor: pointer;
transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.apes-t-nav:hover { transform: translateY(-2px); background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.28); }
.apes-t-prev { justify-self: start; }
.apes-t-next { justify-self: end; }
/* dots */
.apes-t-dots {
grid-column: 1 / -1;
display: flex;
justify-content: center;
gap: 1rem;
margin-top: 1.8rem;
}
.apes-t-dot {
width: 10px; height: 10px;
border-radius: 999px;
border: 1px solid rgba(255,255,255,0.4);
background: rgba(255,255,255,0.15);
cursor: pointer;
transition: transform .2s ease, background .2s ease, width .2s ease, border-color .2s ease;
}
.apes-t-dot[aria-selected="true"] {
width: 26px;
background: var(--apes-gold);
border-color: var(--apes-gold);
}
/* responsive */
@media (max-width: 120rem) {
.apes-t-title { font-size: 3.6rem; }
.apes-t-card { padding: 3.2rem 3.6rem; }
.apes-t-quote { font-size: 2rem; }
.apes-t-ceo { font-size: 2rem; }
}
@media (max-width: 80rem) {
.apes-testimonials { padding: 10vh 6vw; }
.apes-t-title { font-size: 3rem; margin-bottom: 3rem; }
.apes-t-card { padding: 2.6rem 2.8rem; }
.apes-t-quote { font-size: 1.8rem; }
.apes-t-ceo { font-size: 1.8rem; }
.apes-t-nav { width: 4.6rem; height: 4.6rem; font-size: 2.8rem; }
}
/* ===== PHILOSOPHY + JOIN US ===== */
.philosophy {
padding: 12rem 10% 14rem;
text-align: center;
}
/* --- Philosophy --- */
.philo-wrap { max-width: 190rem; margin: 0rem auto 11rem; }
.philo-label {
color: #D7CB4F;
font-family: "Raleway", sans-serif;
font-size: 4.5rem;
font-style: italic;
font-weight: 500;
line-height: 150%; /* 67.5/10rem */
letter-spacing: -0.099rem;
margin-bottom: 2.5rem;
}
.philo-quote {
color: #999AAB;
font-family: "Raleway", sans-serif;
font-size: 6rem;
font-style: italic;
font-weight: 500;
line-height: 150%; /* 9rem */
letter-spacing: -0.132rem;
margin: 0;
}
/* --- Join Us --- */
.join-wrap { max-width: 190rem; margin: 25rem auto 0; }
.join-wrap { margin-bottom: 16rem; }
.join-title {
color: #dfdfe9;
font-family: "Raleway", sans-serif;
font-size: 7rem;
font-weight: 500;
line-height: 150%; /* 12rem */
letter-spacing: 0.176rem;
margin: 0 0 1.6rem 0;
}
.join-sub {
color: #dedce8;
font-family: "Raleway", sans-serif;
font-size: 3rem;
font-weight: 500;
line-height: 150%; /* 6rem */
letter-spacing: -0.088rem;
margin: 0 0 5rem 0;
}
/* Button */
.join-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 1.6rem 3.4rem;
border-radius: 1.6rem;
border: 0.3rem solid #BCC0C9;
background: #1B2328;
text-decoration: none;
/* text */
color: #dce0e8;
font-family: "Poppins", sans-serif;
font-size: 2.1rem;
font-weight: 500;
line-height: normal;
transition: border-color .3s ease, color .3s ease, background .3s ease, transform .2s ease, box-shadow .3s ease;
}
.join-btn:hover,
.join-btn:focus {
background: #222b31;
border-color: #d7cb4f; /* subtle brand hint */
color: #e9ecf3;
transform: translateY(-0.2rem);
box-shadow: 0 0.8rem 2.8rem rgba(0,0,0,.35);
}
/* --- Responsiveness --- */
@media (max-width: 120rem) {
.philo-quote { font-size: 4.8rem; }
.join-title { font-size: 5.4rem; }
.join-sub { font-size: 2rem; }
}
@media (max-width: 82rem) {
.philosophy { padding: 9rem 7% 11rem; }
.philo-label { font-size: 3.4rem; }
.philo-quote { font-size: 3.6rem; line-height: 1.45; letter-spacing: -0.08rem; }
.join-title { font-size: 3.2rem; line-height: 1.3; letter-spacing: -0.1rem; }
.join-sub { font-size: 1.2rem; line-height: 1.6; letter-spacing: -0.04rem; }
.join-btn { font-size: 1.2rem; padding: 1.4rem 2.6rem; }
}
/* Generic default: allow pages to grow and scroll */
.page {
position: relative;
height: auto; /* <- not 100vh */
min-height: auto;
padding-top: 12rem; /* below fixed nav */
}
/* Only the HOME page should be full-viewport */
body.main-bg .page {
height: 100vh;
padding-top: 0;
}
/* Make sure nothing is blocking scroll */
html, body {
overflow-y: auto;
}
/* ===== ČLÁNKY – HERO ===== */
/* ===== ČLÁNKY HERO ===== */
.clanky-hero {
position: relative;
min-height: 100vh; /* same full-screen feel; adjust if you want less */
}
/* Title styled like homepage hero (one line) */
.clanky-title {
position: absolute;
top: 10%;
left: 12%;
transform: translateY(-50%);/* perfect vertical centering */
text-align: left;
line-height: 1.1;
font-family: "Cinzel", serif;
font-weight: 400;
font-size: 10rem;
text-transform: uppercase;
/* fade in like hero */
opacity: 0.85;
animation: fadeInHero 1.5s ease forwards 0.3s;
}
/* split colors */
.clanky-title .white { color: #ffffff; opacity: 0.8; }
.clanky-title .gold { color: #d7cb4f; opacity: 0.85; margin-left: 1.7rem; }
/* Subtext under the title (your spec) */
.clanky-sub {
position: absolute;
top: 12%; /* sits under the title */
left: 12%;
margin: 0;
max-width: 120rem;
color: #BEBECE;
font-family: "Raleway", sans-serif;
font-size: 2.5rem;
font-weight: 400;
line-height: 150%;
letter-spacing: -0.055rem;
opacity: 0;
animation: fadeInHero 1.2s ease forwards 1s;
}
/* reuse your existing keyframes */
@keyframes fadeInHero { to { opacity: 1; } }
/* Responsive tweaks */
@media (max-width: 120rem) {
.clanky-title { font-size: 7.4rem; top: 48%; }
.clanky-sub { font-size: 2.2rem; top: 62%; }
}
@media (max-width: 80rem) {
.clanky-title { font-size: 4.8rem; top: 56%; }
.clanky-sub { font-size: 1.8rem; top: 70%; max-width: 85vw; }
}
/* ===== NOVINKY ===== */
.news-intro {
padding: 10vh 12% 8vh;
text-align: center;
}
.news-title {
color: #E4E4E4;
font-family: "Raleway", sans-serif;
font-size: 7rem;
font-weight: 500;
line-height: 150%; /* 105/10rem */
letter-spacing: 0.154rem;
margin: 0;
}
.news-kicker {
color: #BEBECE;
font-family: "Raleway", sans-serif;
font-size: 2rem;
font-weight: 500;
line-height: 150%; /* 3rem */
letter-spacing: -0.044rem;
margin-top: -0.6rem;
}
.news-underline {
display: inline-block;
width: 14rem;
height: 0.3rem;
background: #D7CB4F;
border-radius: 0.3rem;
margin: 1.4rem auto 3.8rem;
opacity: .85;
}
/* Glass card */
.news-card {
margin: 0 auto;
max-width: 180rem;
padding: 4.4rem 2.8rem 3.6rem;
border-radius: 2.6rem;
border: 0.1rem solid #CFD0DB;
background: rgba(97, 102, 113, 0.274); /* #0A0C12 @ 50% */
backdrop-filter: blur(1rem);
-webkit-backdrop-filter: blur(1rem);
box-shadow: 0 1rem 4rem rgba(0,0,0,.25), inset 0 0.1rem 0 rgba(255,255,255,.04);
transition: transform .35s ease, box-shadow .35s ease, background .35s ease, border-color .35s ease;
}
/* Hover interaction */
.news-card:hover {
transform: translateY(-0.6rem);
background: rgba(10, 12, 18, 0.60);
border-color: #E2E4EE;
box-shadow: 0 1.6rem 5.4rem rgba(0,0,0,.35), 0 0 2.4rem rgba(215,203,79,.08);
}
/* Card typography */
.news-card__title {
color: #BEC1CE;
text-align: center;
font-family: "Raleway", sans-serif;
font-size: 4rem;
font-weight: 500;
line-height: 150%; /* 9rem */
letter-spacing: 0.132rem;
margin: 0 0 1rem;
}
.news-card__sub {
color: #BEBECE;
text-align: center;
font-family: "Raleway", sans-serif;
font-size: 1.5rem;
font-weight: 500;
line-height: 150%; /* 3rem */
letter-spacing: 0.044rem;
margin: 0 0 2.6rem;
opacity: .95;
}
/* Button */
.news-card__btn {
display: inline-block;
padding: 1.4rem 2.8rem;
border-radius: 1.7rem;
border: 0.1rem solid #CFD0DB;
background: rgba(10, 12, 18, 0.50);
color: #E6E8F1;
text-decoration: none;
font-family: "Poppins", sans-serif; /* you already loaded Poppins 500 earlier */
font-size: 2rem;
font-weight: 500;
transition: background .25s ease, border-color .25s ease, color .25s ease, transform .2s ease;
}
.news-card__btn:hover {
background: rgba(10,12,18,0.68);
border-color: #d7cb4f;
color: #fff;
transform: translateY(-0.2rem);
}
/* Reveal */
.news-intro { opacity: 0; transform: translateY(1.8rem); transition: opacity .7s ease, transform .7s ease; }
.news-intro.visible { opacity: 1; transform: translateY(0); }
/* Responsive */
@media (max-width: 120rem) {
.news-title { font-size: 5.8rem; }
.news-card__title { font-size: 3.8rem; }
}
@media (max-width: 82rem) {
.news-intro { padding: 8vh 8% 6vh; }
.news-title { font-size: 4.2rem; letter-spacing: -0.1rem; }
.news-card { padding: 3.6rem 2.4rem; border-radius: 2.4rem; }
.news-card__title { font-size: 3.2rem; line-height: 1.35; }
.news-card__sub { font-size: 1.8rem; }
}
/* ===== OLDER POSTS ===== */
.older-posts {
padding: 12vh 12% 10vh;
max-width: 180rem;
margin: 10rem auto 8rem;
padding: 0 8%;
margin-bottom: 4.8rem !important;
padding-bottom: 0 !important;
}
.older-title {
color: #E4E4E4;
text-align: center;
font-family: "Raleway", sans-serif;
font-size: 6rem;
font-weight: 500;
letter-spacing: -0.012rem;
line-height: 1.3;
margin: 0 0 0.6rem;
}
.older-sub {
color: #BEBECE;
text-align: center;
font-family: "Raleway", sans-serif;
font-size: 1.8rem;
font-weight: 500;
letter-spacing: -0.03rem;
margin: 0 0 3.6rem;
opacity: .9;
}
.posts-grid {
display: grid;
grid-template-columns: repeat(2, minmax((76rem, 1fr))); /* was ~320–40rem */
gap: 4.8rem 4.6rem;
justify-content: center;
}
/* Glassy card */
.post-card {
position: relative;
padding: 3.6rem 4rem;
border-radius: 2.6rem;
border: 0.1rem solid rgba(207,208,219,.65); /* #CFD0DB */
background: rgba(10,12,18,.42);
backdrop-filter: blur(1rem);
-webkit-backdrop-filter: blur(1rem);
box-shadow: 0 1rem 4rem rgba(0,0,0,.18) inset, 0 1rem 3rem rgba(0,0,0,.15);
transition: transform .28s ease, box-shadow .28s ease, background .28s ease, border-color .28s ease;
}
.post-card:hover {
transform: translateY(-0.4rem);
background: rgba(10,12,18,.55);
border-color: #E2E4EE;
box-shadow: 0 0 2.2rem rgba(0,0,0,.28), 0 0 1.8rem rgba(215,203,79,.09);
}
/* Date */
.post-date {
color: rgba(255,255,255,.65);
font-family: "Raleway", sans-serif;
font-size: 1.3rem;
letter-spacing: 0.1rem;
text-transform: uppercase;
margin-bottom: 1rem;
}
/* Title */
.post-title {
margin: 0 0 0.8rem;
font-size: 2.4rem;
line-height: 1.45; /* collapse whitespace for the link */
}
.post-title a {
font-family: "Raleway", sans-serif;
font-weight: 600;
font-size: 2.4rem;
line-height: 1.45;
letter-spacing: -0.02rem;
color: #E6E8F1;
text-decoration: none;
}
.post-title a:hover { color: #FFFFFF; }
/* Tags */
.post-tags {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
padding: 0;
margin: 1rem 0 1.2rem;
}
.post-tags li {
font-family: "Raleway", sans-serif;
font-weight: 600;
font-size: 1.3rem;
letter-spacing: .0.3rem;
color: #DCE0EA;
border: 0.1rem solid rgba(220,224,234,.35);
background: rgba(255,255,255,.04);
padding: 0.6rem 1.2rem;
border-radius: 99.9rem;
}
/* Excerpt */
.post-excerpt {
color: #D0D3DD;
font-family: "Raleway", sans-serif;
font-size: 1.5rem;
line-height: 1.7;
margin: 0 0 1.6rem;
opacity: .95;
}
/* Footer row inside card */
.post-meta {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 1.4rem;
border-top: 0.1rem solid rgba(207,208,219,.35);
}
.post-read {
color: #C9CCDA;
font-size: 1.3rem;
text-decoration: none;
transition: color .2s ease;
}
.post-read:hover { color: #E6E8F1; }
.post-time {
color: rgba(255,255,255,.6);
font-size: 1.2rem;
}
/* Responsive */
@media (max-width: 110rem) {
.older-title { font-size: 4.8rem; }
.posts-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 70rem) {
.older-posts { padding: 8vh 8% 8vh; }
.post-card { padding: 2.2rem 2rem 1.8rem; border-radius: 2.2rem; }
.post-title a { font-size: 2rem; }
.post-excerpt { font-size: 1.4rem; }
}
/* ===== KARIÉRA HERO ===== */
.kariera-hero {
position: relative;
min-height: 100vh; /* same full-screen feel */
}
.kariera-title {
position: absolute;
top: 45%;
left: 12%;
transform: translateY(-50%); /* same vertical centering as Články */
text-align: left;
line-height: 1.1;
font-family: "Cinzel", serif;
font-weight: 400;
font-size: 10rem; /* your spec for Kariéra */
text-transform: uppercase;
letter-spacing: -0.088rem;
opacity: 0.85;
animation: fadeInHero 1.5s ease forwards 0.3s;
}
/* split colors (one word gold) */
.kariera-title .white { color: #ffffff; opacity: 0.8; }
.kariera-title .gold { color: #d7cb4f; opacity: 0.85; }
/* Subtext under the title — same placement rules as Články */
.kariera-sub {
position: absolute;
top: 70%;
left: 12%;
margin: 0;
max-width: 80rem;
color: #BEBECE;
font-family: "Raleway", sans-serif;
font-size: 2.5rem;
font-weight: 400; /* keep same as Články */
line-height: 150%;
letter-spacing: -0.055rem;
opacity: 0;
animation: fadeInHero 1.2s ease forwards 1s;
}
/* reuse fadeInHero keyframes already in your CSS */
/* Responsive tweaks — mirror Články behavior */
@media (max-width: 120rem) {
.kariera-title { font-size: 7.4rem; top: 48%; }
.kariera-sub { font-size: 2.2rem; top: 68%; }
}
@media (max-width: 80rem) {
.kariera-title { font-size: 4.8rem; top: 56%; }
.kariera-sub { font-size: 1.8rem; top: 70%; max-width: 85vw; }
}
/* ===== KARIÉRA – Voľné pozície ===== */
.kariera-positions,
.kariera-positions h2,
.kariera-positions .subtitle,
.kariera-culture {
font-size: 0.85rem;
}
.kariera-positions {
position: relative;
padding: 8vh 6vw 12vh;
}
.kariera-positions .positions-head {
text-align: center;
margin-bottom: 10rem;
}
.kariera-positions h2 {
margin: 0 0 1.5rem;
font-family: "Cinzel", serif;
font-weight: 400;
font-size: 6rem;
letter-spacing: 0.06rem;
color: #E9EDF6;
opacity: 0.9;
}
.kariera-positions .subtitle {
margin: 0 auto;
max-width: 100rem;
color: #BEBECE;
font-family: "Raleway", sans-serif;
font-weight: 400;
font-size: 1.5rem;
letter-spacing: 0.02rem;
opacity: 0.8;
}
/* Grid */
.positions-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2.5rem;
max-width: 190rem;
margin: 2.6rem auto 0;
}
@media (max-width: 110rem) {
.positions-grid { grid-template-columns: 1fr 1fr 1fr; }
}
/* Card */
.k-card {
position: relative;
display: flex; /* make card a column */
flex-direction: column;
background: rgba(12,16,22,0.55);
border: 0.1rem solid rgba(255,255,255,0.08);
border-radius: 1.4rem;
padding: 2rem 1.8rem 1.8rem 2.2rem;
backdrop-filter: blur(0.6rem);
transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease, background .2s ease;
}
/* subtle gold accent line on the left */
.k-card::before{
content:"";
position:absolute;
left:0; top:1.4rem; bottom:1.4rem;
width:0.2rem;
background: linear-gradient(180deg, rgba(215,203,79,0.35), rgba(215,203,79,0.05));
border-radius: 0.2rem;
transition: opacity .2s ease, background .2s ease;
}
/* Whole-card hover feedback */
.k-card:hover,
.k-card:focus-within {
background: rgba(12,16,22,0.70);
border-color: rgba(255,255,255,0.18);
box-shadow: 0 1.4rem 3.6rem rgba(0,0,0,0.35);
transform: translateY(-0.2rem);
cursor: pointer;
}
.k-card:hover::before,
.k-card:focus-within::before {
background: linear-gradient(180deg, rgba(215,203,79,0.70), rgba(215,203,79,0.18));
}
.k-card h3 {
margin: 2.5rem 0 2.5rem;
font-family: "Cinzel", serif;
font-weight: 400;
font-size: 4rem;
color: #EDEFF6;
letter-spacing: 0.02rem;
}
.k-card .meta {
display: flex; align-items: center; gap: 0.8rem;
margin-bottom: 2.5rem;
}
.k-card .meta .meta-accent {
font-family: "Raleway", sans-serif;
font-weight: 500;
font-size: 2.2rem;
letter-spacing: 0.06rem;
color: #D7CB4F;
}
.k-card .meta .dot { color: #A8B0BA; opacity: .5; }
.k-card .lead {
margin: 0 0 2.8rem; /* tightened so list isn’t pushed too far */
color: #C7D0DA;
font-family: "Raleway", sans-serif;
font-weight: 400;
font-size: 2.5rem;
line-height: 1.5;
}
.k-card h4 {
margin: 2.5rem 0 1.2rem;
font-family: "Raleway", sans-serif;
font-weight: 600;
font-size: 2rem;
letter-spacing: 0.05rem;
color: #EDEFF6;
text-transform: uppercase;
opacity: 0.85;
}
.k-list {
margin: 0 0 1.8rem 0; /* consistent spacing before the button row */
padding: 0;
list-style: none;
}
.k-list li {
position: relative;
padding-left: 1.6rem;
margin: 2rem 0;
color: #C6CFD9;
font-family: "Raleway", sans-serif;
font-size: 2.5rem;
line-height: 1.45;
}
.k-list li::before {
content:"–";
position: absolute;
left: 0;
color: #C7A15A; /* subtle gold dash */
}
/* Buttons (unified look + bottom alignment) */
.actions {
margin-top: auto; /* pins button row to the bottom of the card */
display: flex;
justify-content: flex-start;
}
/* === Glassy Neutral Buttons (no underline) === */
.btn,
.btn-gold,
.btn-outline {
background: rgba(200, 205, 220, 0.10);
color: #E9EDF6;
border: 0.1rem solid rgba(200, 205, 220, 0.25);
backdrop-filter: blur(0.8rem);
padding: 1.2rem 1.8rem;
border-radius: 1rem;
font-family: "Raleway", sans-serif;
font-weight: 700;
font-size: 1.5rem;
letter-spacing: 0.04rem;
text-decoration: none; /* ✅ removes underline */
line-height: 1;
transition: all .25s ease;
}
.btn:hover,
.btn:focus-visible {
background: rgba(200, 205, 220, 0.20);
border-color: rgba(200, 205, 220, 0.45);
box-shadow: 0 0.8rem 2.2rem rgba(200,205,220,0.15);
transform: translateY(-0.2rem);
opacity: 0.98;
outline: none;
}
/* === Kariéra – Voľné pozície: responsive type === */
@media (max-width: 120rem) {
.kariera-positions h2 { font-size: 5rem; } /* was 6rem */
.k-card h3 { font-size: 3rem; } /* was 4rem */
.k-card .meta .meta-accent { font-size: 1.2rem; } /* was 2.2rem */
.k-card .lead { font-size: 1.5rem; } /* was 2.5rem */
.k-list li { font-size: 1.2rem; } /* was 2.5rem */
.btn, .btn-gold, .btn-outline { font-size: 1rem; } /* was 1.5rem */
}
@media (max-width: 80rem) {
.kariera-positions { padding: 8vh 6vw 10vh; } /* tighten spacing a bit */
.kariera-positions h2 { font-size: 3.5rem; }
.k-card h3 { font-size: 2rem; }
.k-card .meta .meta-accent { font-size: 1rem; }
.k-card .lead { font-size: 1.5rem; }
.k-list li { font-size: 1.2rem; }
.btn, .btn-gold, .btn-outline { font-size: 1.3rem; }
}
/* ===== KARIÉRA – Naša kultúra ===== */
.kariera-culture {
padding: 6.4rem 6vw 9.6rem; /* gives natural space before footer */
}
.kariera-culture .culture-wrap {
max-width: 180rem;
margin: 0 auto;
}
.kariera-culture h3 {
margin: 0 0 1rem;
font-family: "Cinzel", serif;
font-weight: 400;
font-size: 5rem;
letter-spacing: -0.03rem;
color: #EDEFF6;
opacity: 0.95;
position: relative;
text-align: center;
}
.kariera-culture .culture-lead {
margin: 1rem 0 1rem;
max-width: 190rem;
color: #C6CFD9;
font-family: "Raleway", sans-serif;
font-size: 2rem;
line-height: 1.55;
text-align: center;
opacity: 0.9;
}
/* Grid of value cards */
.culture-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2.5rem;
}
.c-card {
background: rgba(200,205,220,.06); /* glassy neutral (matches your buttons) */
border: 0.1rem solid rgba(200,205,220,.22);
border-radius: 1.4rem;
padding: 1.8rem 1.8rem 1.6rem 1.8rem;
backdrop-filter: blur(0.8rem);
transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease, background .2s ease;
position: relative;
}
.c-card::before {
content:"";
position:absolute; left:1.2rem; top:1.2rem; width:0.8rem; height:0.8rem; border-radius:50%;
}
.c-card h4 {
margin: 0 0 0.8rem 0;
padding-left: 2.6rem; /* space for the gold dot */
font-family: "Cinzel", serif;
font-weight: 400;
font-size: 2rem;
color: #EDEFF6;
}
.c-card p {
margin: 0;
padding-left: 2.6rem;
color: #C7D0DA;
font-family: "Raleway", sans-serif;
font-size: 1.5rem;
line-height: 1.5;
}
/* Hover feedback (whole card) */
.c-card:hover, .c-card:focus-within {
transform: translateY(-0.2rem);
border-color: rgba(200,205,220,.36);
background: rgba(200,205,220,.10);
box-shadow: 0 1.2rem 2.8rem rgba(0,0,0,.28);
}
/* Responsive */
@media (max-width: 98rem) { .culture-grid { grid-template-columns: 1fr 1fr 1fr; } }
/* ===== KONTAKT HERO ===== */
.kontakt-hero {
position: relative;
min-height: 100vh; /* same full-screen feel */
}
.kontakt-title {
position: absolute;
top: 45%;
left: 12%;
transform: translateY(-50%); /* same vertical centering as Články */
text-align: left;
line-height: 1.1;
font-family: "Cinzel", serif;
font-weight: 400;
font-size: 10rem; /* your spec for Kariéra */
text-transform: uppercase;
letter-spacing: -0.088rem;
opacity: 0.85;
animation: fadeInHero 1.5s ease forwards 0.3s;
}
/* split colors (one word gold) */
.kontakt-title .white { color: #ffffff; opacity: 0.8; }
.kontakt-title .gold { color: #d7cb4f; opacity: 0.85; }
/* reuse fadeInHero keyframes already in your CSS */
/* Responsive tweaks — mirror Články behavior */
@media (max-width: 120rem) {
.kontakt-title { font-size: 7.4rem; top: 48%; }
}
@media (max-width: 80rem) {
.kontakt-title { font-size: 4.8rem; top: 46%; }
}
/* ===== KONTAKT – Info Grid ===== */
.kontakt-info {
padding: 10vh 6vw 12vh;
position: relative;
}
.kontakt-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2.5rem;
max-width: 180rem;
margin: 0 auto;
}
@media (max-width: 110rem) {
.kontakt-grid { grid-template-columns: 1fr 1fr 1fr; }
}
.kinfo-card {
background: rgba(200,205,220,0.06);
border: 0.1rem solid rgba(200,205,220,0.20);
border-radius: 1.4rem;
padding: 3rem 2.6rem 2.6rem 2.6rem;
backdrop-filter: blur(0.8rem);
transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease, background .2s ease;
position: relative;
}
.kinfo-card:hover {
background: rgba(200,205,220,0.10);
border-color: rgba(200,205,220,0.36);
box-shadow: 0 1.2rem 2.8rem rgba(0,0,0,0.25);
transform: translateY(-0.2rem);
}
.kinfo-card h3 {
margin: 0 0 1.4rem;
font-family: "Cinzel", serif;
font-weight: 400;
font-size: 4.5rem;
color: #EDEFF6;
opacity: 0.95;
}
.kinfo-card p {
color: #C7D0DA;
font-family: "Raleway", sans-serif;
font-size: 1.5rem;
line-height: 1.6;
margin-bottom: 1.4rem;
}
.kinfo-card a {
color: #E9EDF6;
text-decoration: none;
border-bottom: 0.1rem solid transparent;
transition: border-color .2s ease, color .2s ease;
}
.kinfo-card a:hover {
color: #D7CB4F;
border-color: rgba(215,203,79,0.5);
}
/* map styling */
.map-container {
margin-top: 2rem;
border-radius: 1rem;
overflow: hidden;
border: 0.1rem solid rgba(200,205,220,0.15);
height: 22rem;
}
.map-container iframe {
width: 100%;
height: 100%;
border: none;
filter: grayscale(30%) brightness(90%);
}
/* socials */
.social-links {
display: flex;
flex-direction: column;
gap: 1rem;
margin-top: 2rem;
}
.social-link {
display: flex;
align-items: center;
gap: 1rem;
color: #E9EDF6;
text-decoration: none;
font-family: "Raleway", sans-serif;
font-size: 1.5rem;
transition: color .2s ease, opacity .2s ease;
}
.social-link img {
width: 2.2rem;
height: 2.2rem;
filter: brightness(0) invert(1);
opacity: 0.9;
}
.social-link:hover {
color: #D7CB4F;
opacity: 1;
}
/* button reuse */
.kinfo-card .btn {
background: rgba(200,205,220,0.10);
color: #E9EDF6;
border: 0.1rem solid rgba(200,205,220,0.25);
backdrop-filter: blur(0.8rem);
padding: 1.2rem 1.8rem;
border-radius: 1rem;
font-family: "Raleway", sans-serif;
font-weight: 700;
font-size: 1.5rem;
letter-spacing: 0.04rem;
text-decoration: none;
line-height: 1;
transition: all .25s ease;
}
.kinfo-card .btn:hover {
background: rgba(200,205,220,0.20);
border-color: rgba(200,205,220,0.45);
box-shadow: 0 0.8rem 2.2rem rgba(200,205,220,0.15);
transform: translateY(-0.2rem);
}
/* ===== KONTAKT – Rýchly kontakt ===== */
.kontakt-form {
padding: 10vh 6vw 12vh;
}
.form-wrap {
max-width: 180rem;
margin: 0 auto;
background: rgba(200,205,220,0.06);
border: 0.1rem solid rgba(200,205,220,0.20);
border-radius: 1.4rem;
padding: 4.8rem 4rem 5.4rem;
backdrop-filter: blur(0.8rem);
transition: background .3s ease, border-color .3s ease;
}
.form-wrap:hover {
background: rgba(200,205,220,0.10);
border-color: rgba(200,205,220,0.35);
}
.form-wrap h3 {
margin: 0 0 1rem;
font-family: "Cinzel", serif;
font-weight: 400;
font-size: 4.5rem;
letter-spacing: -0.03rem;
color: #EDEFF6;
opacity: 0.95;
}
.form-lead {
margin: 0 0 4rem;
color: #C6CFD9;
font-family: "Raleway", sans-serif;
font-size: 1.5rem;
line-height: 1.55;
opacity: 0.9;
}
/* Grid layout */
.form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2.4rem;
}
.form-group.full {
grid-column: 1 / -1;
}
/* Labels & inputs */
label {
display: block;
margin-bottom: 0.8rem;
font-family: "Raleway", sans-serif;
font-weight: 600;
font-size: 1rem;
color: #EDEFF6;
opacity: 0.9;
letter-spacing: 0.02rem;
}
input,
textarea {
width: 100%;
border: 0.1rem solid rgba(200,205,220,0.25);
border-radius: 1rem;
background: rgba(200,205,220,0.08);
color: #E9EDF6;
font-family: "Raleway", sans-serif;
font-size: 1rem;
padding: 1.2rem 1.4rem;
transition: border-color .2s ease, background .2s ease;
}
input:focus,
textarea:focus {
outline: none;
border-color: rgba(215,203,79,0.45);
background: rgba(200,205,220,0.12);
}
/* Button reuse */
.kontakt-form .btn {
margin-top: 3.2rem;
background: rgba(200,205,220,0.10);
color: #E9EDF6;
border: 0.1rem solid rgba(200,205,220,0.25);
backdrop-filter: blur(0.8rem);
padding: 1.2rem 2.8rem;
border-radius: 1rem;
font-family: "Raleway", sans-serif;
font-weight: 700;
font-size: 1.5rem;
letter-spacing: 0.04rem;
text-decoration: none;
line-height: 1;
transition: all .25s ease;
cursor: pointer;
}
.kontakt-form .btn:hover {
background: rgba(200,205,220,0.20);
border-color: rgba(200,205,220,0.45);
box-shadow: 0 0.8rem 2.2rem rgba(200,205,220,0.15);
transform: translateY(-0.2rem);
}
/* Responsive */
@media (max-width: 78rem) {
.form-grid { grid-template-columns: 1fr; }
}
/* ===== FOOTER SECTION ===== */
/* ===================== FOOTER ===================== */
.footer {
background: #0b0e12;
color: #ccc;
padding: 5rem 2% 2rem; /* adjust 12% to push columns further right */
margin: 0;
}
/* Layout: left column stretches; SLUŽBY + KONTAKT hug the right */
.footer-container {
display: flex;
justify-content: space-between; /* left block left, group of right blocks right */
align-items: flex-start;
gap: 6rem;
flex-wrap: wrap; /* stays responsive */
}
.footer-about {
flex: 1; /* expands to take left space */
}
.footer-services,
.footer-contact {
flex: 0 0 auto; /* stay compact */
}
.footer p,
.footer li {
margin-bottom: 1rem;
}
/* ---------- Left column ---------- */
.footer-about {
justify-self: start; /* hard-left */
text-align: left;
}
.footer-tags {
color: #D7CB4F;
font-size: 1rem;
letter-spacing: 0.1rem;
line-height: 1.2;
margin-bottom: 0.2rem;
}
.footer-about h2 {
font-family: "Cinzel", serif;
font-size: 3rem;
font-weight: 600;
color: #fff;
line-height: 1.1;
margin: 0 0 0.6rem;
}
.footer-about h2 span {
font-weight: 400;
color: #CFCFCF;
}
.footer-desc {
font-size: 1rem;
line-height: 1.7;
color: rgba(255,255,255,0.8);
margin-bottom: 1rem;
max-width: 48rem;
}
.footer-membership p {
font-family: "Cardo", serif;
font-size: 1rem;
line-height: 1.6;
color: rgba(255,255,255,0.85);
}
/* ---------- Middle (SLUŽBY) ---------- */
.footer-services {
justify-self: end; /* position on right side */
text-align: left; /* keep text left-aligned */
}
.footer-services h3 {
font-family: "Raleway", sans-serif;
font-size: 2rem;
font-weight: 700;
color: #D7CB4F;
letter-spacing: 0.06rem;
margin: 0 0 1rem;
}
.footer-services ul {
list-style: none;
padding: 0;
margin: 0;
}
.footer-services li { margin-bottom: 0.8rem; }
.footer-services a {
color: rgba(255,255,255,0.9);
font-size: 1.1rem;
font-weight: 400;
text-decoration: none;
transition: color .3s ease;
}
.footer-services a:hover { color: #D7CB4F; }
/* ---------- Right (KONTAKT) ---------- */
.footer-contact {
justify-self: end; /* position on right side */
text-align: left; /* keep text left-aligned */
}
.footer-contact h3 {
font-family: "Raleway", sans-serif;
font-size: 2rem;
font-weight: 700;
color: #D7CB4F;
letter-spacing: 0.06rem;
margin: 0 0 0.2rem; /* matches SLUŽBY for baseline alignment */
}
.footer-contact p,
.footer-contact a {
font-size: 1rem;
line-height: 1.8;
}
.footer-contact a {
color: rgba(255,255,255,0.85);
text-decoration: none;
transition: color .3s ease;
}
.footer-contact a:hover { color: #D7CB4F; }
.footer-hours {
margin-top: 2rem;
font-size: 1.1rem;
line-height: 1.6;
}
/* ---------- Bottom line ---------- */
.footer-bottom {
border-top: 0.1rem solid rgba(255,255,255,0.1);
text-align: center;
font-size: 1.3rem;
color: rgba(255,255,255,0.45);
padding: 1.6rem 0 0.8rem;
margin-top: 0.5rem;
}
/* ===================== STICKY FOOTER (no gap below) ===================== */
html, body { height: 100%; margin: 0; }
body { display: flex; flex-direction: column; }
.page { flex: 1 0 auto; margin: 0; padding: 0; }
.footer { flex: 0 0 auto; }
/* ===================== Responsive ===================== */
@media (max-width: 110rem) {
.footer-container {
grid-template-columns: 1fr 1fr 1fr; /* stack columns on tablet/phone */
row-gap: 2.8rem;
justify-content: initial;
}
.footer-about,
.footer-services,
.footer-contact {
justify-self: start;
text-align: left;
}
}
/* Make the whole Staršie články card clickable */
/* Make the whole "Staršie články" card clickable */
.post-card {
position: relative; /* positioning context for the overlay link */
cursor: pointer;
}
.post-card .stretched-link {
position: absolute;
inset: 0; /* cover the entire card */
z-index: 1; /* sits over the card, under inner content */
text-indent: -999.9rem; /* hide any accidental text */
overflow: hidden;
}
/* Keep visible links (title, read-more) above the overlay for focus/hover */
.post-card a,
.post-card .post-title a,
.post-card .post-read {
position: relative;
z-index: 2;
}
/* Keyboard accessibility */
.post-card:focus-within {
outline: 0.2rem solid rgba(215,203,79,.65);
outline-offset: 0.4rem;
}
/* simple sticky-footer layout (one-time) === */
body {
min-height: 100dvh; /* fill at least the viewport height */
display: flex;
flex-direction: column;
}
.page {
flex: 1 0 auto; /* content grows; footer stays at the end */
overflow: visible; /* don't clip your sections */
}
.footer {
flex: 0 0 auto; /* fixed-size footer at the bottom */
margin: 0; /* no accidental outer gaps */
}
/* === Články: kill the second (inner) scrollbar === */
html {
height: auto !important; /* don't force a fixed viewport-height */
overflow-y: auto; /* browser controls the vertical scroll */
}
body {
height: auto !important; /* same: no fixed height */
min-height: 100dvh; /* still fills at least the viewport */
overflow-y: auto !important; /* only ONE vertical scrollbar on body */
overflow-x: hidden; /* keep the SVG from causing horizontal scroll */
}
/* Any wrappers on Články should NOT scroll themselves */
.page,
.older-wrap,
.articles-wrap,
.articles-grid,
.articles-list {
overflow: visible !important;
}