:root {
--text-color: #0f172a;
--brand-blue: #2B3089;
--selected-scale: 1; }
@media (min-width: 1200px) {
:root {
--selected-scale: 1.2;
}
}
.hero-container {
width: 100%;
height: 576px;
background-image: url(//www.studujenergetiku.sk/wp-content/uploads/2026/03/bg-mobile.webp);
background-repeat: no-repeat;
background-position: top center;
background-size: auto 100%; display: flex;
justify-content: center;
}
.reasons-section {
position: relative;
width: 100%;
height: 650px; perspective: 1000px;
z-index: 1;
transition: height 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.content-bubble {
display: flex;
background-image: url(//www.studujenergetiku.sk/wp-content/uploads/2026/03/bubble-mobile.webp);
background-size: contain;
background-repeat: no-repeat;
text-align: center;
padding-bottom: 30px;
position: absolute;
width: 260px;
height: 139px;
top: 25px;
left: 50%;
transform: translateX(-180px);
justify-content: center;
}
.content-bubble div[role="button"] {
display: none;
}
.bubble-text {
font-family: 'Avalon CE', sans-serif;
font-weight: 600;
color: #ffffff;
font-size: 2.5em;
line-height: 1.0;
white-space: normal;
}
.bubble-description {
font-family: 'Avalon CE', sans-serif;
font-size: 1.35rem;
font-weight: 600;
color: #ffffff;
}
.bubble-center-content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
transition: opacity 0.3s ease-in-out;
opacity: 1;
font-size: 12px;
}
.bubble-label {
font-family: 'Avalon CE', sans-serif;
font-size: 0.95em;
font-weight: 600;
color: #ffffff; opacity: 0.5;
}
.hero-centered-content {
position: relative;
width: 100%;
height: 100%;
padding: 0 40px;
}
.info-box-left {
position: absolute;
left: 20px;
right: 20px;
bottom: 50px;
color: #ffffff;
font-family: 'Avalon CE', sans-serif;
font-size: 24pt;
font-weight: 600;
line-height: 1.13;
text-align: left;
}
.btn-yellow {
text-decoration: none !important;
display: block;
width: 100%;
background-color: #edec66;
color: #1f3c9d;
padding: 16px 30px;
font-family: 'Avalon CE', sans-serif;
font-size: 1.2rem;
line-height: 1;
font-weight: 600;
text-decoration: none;
border: none;
border-radius: 9999px;
cursor: pointer;
margin-top: 25px;
transition: all 0.3s ease;
text-align: center;
}
.btn-yellow:hover {
color: #1f3c9d;
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(28, 28, 1, 0.3);
}
.vyska-link {
display: block;
color: #ffffff;
font-weight: 600;
text-align: center;
margin-top: 20px;
font-size: 1.2rem;
text-decoration: underline;
font-family: 'Avalon CE', sans-serif;
}
.btn-cta-reason {
margin-top: 8px !important;
pointer-events: auto;
text-decoration: none;
width: fit-content;
padding: 4px 8px;
font-size: 0.8rem;
}
.caret {
background: none;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
transition: transform 0.2s ease, opacity 0.2s ease;
opacity: 0.8;
}
.caret:hover {
opacity: 1;
transform: scale(1.1);
}
.caret svg {
width: 30px;
height: 50px;
fill: none;
stroke: #ffffff;
stroke-width: 3;
stroke-linecap: round;
stroke-linejoin: round;
}
.highlight-yellow {
color: #edec66;
}
.reasons-container {
position: relative;
width: 100%;
margin: 0 auto;
height: 100%;
opacity: 0;
transition: opacity 1s ease-in-out;
overflow: hidden;
top: -170px;
}
.reasons-container.ready {
opacity: 1;
}
.sticky-container {
position: sticky;
top: 50%;
z-index: 9999;
width: 100%;
height: 0;
display: flex;
justify-content: center;
pointer-events: none;
opacity: 0;
transition: opacity 1s ease;
margin-top: 170px;
}
.sticky-container .reason {
position: relative;
left: auto;
top: auto;
transform: translateY(-50%) scale(var(--selected-scale));
pointer-events: none;
cursor: default;
transition: opacity 0.4s ease, transform 0.4s ease;
}
.sticky-container .reason .reason-text {
pointer-events: auto;
}
.sticky-container .float-container {
animation: none; 
}
.reasons-actions {
position: absolute;
bottom: 40px;
left: 40px;
right: 40px;
display: flex;
justify-content: center;
align-items: center;
z-index: 3000;
}
.reason {
position: absolute;
transition: opacity 0.4s ease, transform 0.4s ease, z-index 0.4s ease;
color: #636363;
white-space: normal;
padding: 0;
width: 420px;
max-width: 90vw;
height: 250px;
max-height: 53vw;
-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .reason.bg-reason {
pointer-events: none;
}
.reason.bg-reason .reason-text {
pointer-events: auto;
cursor: pointer;
}
.reason-content {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
padding: 10% 10% 25%;
transition: opacity 0.3s ease;
text-align: center;
}
.reason-number {
font-size: 0.65rem;
font-weight: 600;
color: #A6A7AA;
margin-bottom: 5px;
}
.reason-text {
font-size: calc(0.9rem * var(--text-scale, 1));
font-weight: 600;
line-height: 1.2;
}
.reason-description {
font-size: 0.75rem;
line-height: 1.3;
}
.reason-center {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
} .selected .float-container {
background-image: url(https://www.studujenergetiku.sk/wp-content/uploads/2026/03/bublina-fg.png);
}
.float-container {
width: 100%;
height: 100%;
will-change: transform;
background-image: url(https://www.studujenergetiku.sk/wp-content/uploads/2026/03/bublina-bg.png);
background-repeat: no-repeat;
background-size: contain;
}
.floating-animation {
animation: float 6s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translate(0, 0); }
50% { transform: translate(6px, -12px); }
}
@media (min-width: 1200px) {
.hero-centered-content {
width: 1200px;
padding: 0;
}
.content-bubble {
width: 450px;
height: 240px;
top: 152px;
left: 50%;
transform: translateX(110px);
justify-content: space-between;
padding-bottom: 50px;
}
.bubble-center-content {
font-size: 16px;
}
.content-bubble div[role="button"] {
display: flex;
}
.info-box-left {
left: 0;
top: 140px;
bottom: auto;
width: 520px;
font-size: 50px;
text-align: left;
}
.btn-yellow {
display: inline-block;
width: auto;
margin-top: 35px;
font-size: 1.55rem;
padding: 16px 40px;
}
.vyska-link {
text-align: left;
margin-top: 25px;
font-size: 1.3rem;
}
.btn-cta-reason {
margin-top: 16px !important;
font-size: 1rem;
padding: 8px 16px;
} .reason {
width: 762px;
max-width: 80vw;
height: 450px;
}
.reason-content {
padding: 80px 100px 180px;
}
.reason-number {
font-size: 1.44rem;
margin-bottom: 10px;
}
.reason-text {
font-size: calc(2.1rem * var(--text-scale, 1));
}
.reason-description {
font-size: 1.5rem;
}
.hero-container {
background-image: url(//www.studujenergetiku.sk/wp-content/uploads/2026/03/bg-desktop.webp);
}
.content-bubble {
background-image: url(//www.studujenergetiku.sk/wp-content/uploads/2026/03/bubble-desktop.webp);
}
}
.close-reason-btn {
position: absolute;
top: 12%;
right: 14%;
background: transparent;
border: none;
color: #636363;
font-size: 2rem;
font-weight: 300;
cursor: pointer;
z-index: 10000;
line-height: 1;
pointer-events: auto;
opacity: 0.5;
transition: all 0.2s ease;
}
.close-reason-btn:hover {
opacity: 1;
transform: scale(1.1);
}
@media (min-width: 1200px) {
.close-reason-btn {
top: 70px;
right: 110px;
font-size: 2.5rem;
}
}