.rebar-trainer {
--rb-dark: #171717;
--rb-white: #ffffff;
/* Farba textových detailov */
--rb-purple: #D970FF;
/* Samostatne nastaviteľná farba rámika za fotografiou */
--rb-photo-frame: ;
--rb-photo-background: #f5ddff;
--rb-line: rgba(23, 23, 23, 0.15);
width: 100%;
color: var(--rb-dark);
font-family: inherit;
}
/* PROFIL */
.rebar-trainer__profile {
width: 100%;
padding: 75px 30px;
background: var(--rb-white);
}
.rebar-trainer__inner {
width: min(100%, 1120px);
margin: 0 auto;
display: grid;
grid-template-columns: minmax(300px, 440px) minmax(0, 1fr);
align-items: center;
gap: clamp(45px, 7vw, 100px);
}
/* FOTOGRAFIA */
.rebar-trainer__photo-wrap {
position: relative;
padding: 20px 0 0 20px;
}
.rebar-trainer__photo-accent {
position: absolute;
top: 0;
right: 20px;
bottom: 20px;
left: 0;
background: var(--rb-photo-frame);
}
.rebar-trainer__photo {
position: relative;
width: 100%;
aspect-ratio: 4 / 5;
overflow: hidden;
background: var(--rb-photo-background);
}
.rebar-trainer__photo img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: transform 0.7s ease;
}
.rebar-trainer__photo:hover img {
transform: scale(1.015);
}
/* TEXTOVÁ ČASŤ */
.rebar-trainer__content {
display: flex;
flex-direction: column;
justify-content: center;
padding: 20px 0;
}
.rebar-trainer__back {
display: inline-flex;
align-items: center;
align-self: flex-start;
gap: 10px;
margin-bottom: 55px;
color: var(--rb-dark) !important;
font-size: 12px;
font-weight: 500;
line-height: 1;
letter-spacing: 0.05em;
text-decoration: none !important;
text-transform: lowercase;
opacity: 0.6;
transition: opacity 0.25s ease;
}
.rebar-trainer__back::before {
content: "←";
font-size: 16px;
}
.rebar-trainer__back:hover {
opacity: 1;
}
.rebar-trainer__number {
margin: 0 0 16px;
color: var(--rb-purple);
font-size: 12px;
font-weight: 600;
line-height: 1;
letter-spacing: 0.08em;
}
.rebar-trainer__name {
margin: 0;
color: var(--rb-dark);
font-size: clamp(52px, 6vw, 78px);
font-weight: 500;
line-height: 0.95;
letter-spacing: -0.05em;
text-transform: lowercase;
}
.rebar-trainer__programs {
margin: 24px 0 0;
color: var(--rb-purple);
font-size: 14px;
font-weight: 600;
line-height: 1.5;
letter-spacing: 0.04em;
text-transform: lowercase;
}
.rebar-trainer__line {
width: 100%;
height: 1px;
margin: 35px 0;
background: var(--rb-line);
}
.rebar-trainer__description {
max-width: 540px;
margin: 0;
font-size: clamp(16px, 1.25vw, 18px);
font-weight: 400;
line-height: 1.65;
}
/* BOOKING – ČIERNA SEKCIA */
.rebar-trainer__booking {
width: 100%;
background: var(--rb-dark);
color: var(--rb-white);
}
.rebar-trainer__booking-inner {
width: min(100%, 1200px);
margin: 0 auto;
padding: 75px 30px 90px;
}
.rebar-trainer__booking-number {
margin: 0 0 20px;
color: var(--rb-purple);
font-size: 12px;
font-weight: 600;
line-height: 1;
letter-spacing: 0.08em;
}
.rebar-trainer__booking-title {
max-width: 850px;
margin: 0;
color: var(--rb-white);
font-size: clamp(38px, 5vw, 62px);
font-weight: 500;
line-height: 1;
letter-spacing: -0.04em;
text-transform: lowercase;
}
/* MOMENCE ROZVRH */
.rebar-trainer__schedule {
width: 100%;
margin-top: 50px;
overflow: hidden;
background: #F8F8F8;
}
.rebar-trainer__schedule,
.rebar-trainer__schedule * {
box-sizing: border-box;
}
.rebar-trainer__schedule #ribbon-schedule {
width: 100%;
min-height: 300px;
}
/* TABLET */
@media (max-width: 900px) {
.rebar-trainer__profile {
padding: 60px 25px;
}
.rebar-trainer__inner {
grid-template-columns: minmax(260px, 38%) 1fr;
gap: 45px;
}
.rebar-trainer__back {
margin-bottom: 38px;
}
.rebar-trainer__booking-inner {
padding-right: 25px;
padding-left: 25px;
}
}
/* MOBIL */
@media (max-width: 767px) {
.rebar-trainer__profile {
padding: 30px 20px 60px;
}
.rebar-trainer__inner {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 45px;
}
.rebar-trainer__photo-wrap {
width: min(100%, 390px);
margin: 0 auto;
padding: 14px 0 0 14px;
}
.rebar-trainer__photo-accent {
right: 14px;
bottom: 14px;
}
.rebar-trainer__content {
width: 100%;
padding: 0;
}
.rebar-trainer__back {
order: -1;
margin-bottom: 35px;
}
.rebar-trainer__name {
font-size: clamp(50px, 16vw, 68px);
}
.rebar-trainer__programs {
margin-top: 20px;
}
.rebar-trainer__line {
margin: 30px 0;
}
.rebar-trainer__description {
font-size: 16px;
}
.rebar-trainer__booking-inner {
padding: 60px 20px 70px;
}
.rebar-trainer__schedule {
margin-top: 38px;
}
.rebar-trainer__schedule #ribbon-schedule {
min-height: 400px;
}
}
:root {
--momenceColorBackground: #F8F8F8;
--momenceColorPrimary: 217, 112, 255;
--momenceColorBlack: 10, 10, 10;
}