.rebar-trainer {
--rb-dark: #171717;
--rb-white: #ffffff;
/* Farba oboch buttonov a farebných textových detailov */
--rb-purple: #D970FF;
/* Samostatne nastaviteľná farba rámika za fotografiou */
--rb-photo-frame: ;
--rb-purple-light: #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-purple-light);
}
.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;
}
.rebar-trainer__button {
display: inline-flex;
align-items: center;
justify-content: center;
align-self: flex-start;
min-height: 50px;
margin-top: 36px;
padding: 14px 27px;
border: 1px solid var(--rb-purple);
border-radius: 100px;
background: var(--rb-purple);
color: var(--rb-dark) !important;
font-size: 13px;
font-weight: 600;
line-height: 1;
text-decoration: none !important;
text-transform: lowercase;
transition:
background-color 0.25s ease,
color 0.25s ease;
}
.rebar-trainer__button:hover {
background: transparent;
color: var(--rb-dark) !important;
}
/* BOOKING – ČIERNA SEKCIA */
.rebar-trainer__booking {
width: 100%;
background: var(--rb-dark);
color: var(--rb-white);
}
.rebar-trainer__booking-inner {
width: min(100%, 1120px);
margin: 0 auto;
padding: 75px 30px 85px;
}
.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;
}
.rebar-trainer__schedule {
width: 100%;
margin-top: 45px;
}
/* DOČASNÝ BOOKING */
.rebar-trainer__placeholder {
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
min-height: 105px;
padding: 25px 0;
border-top: 1px solid rgba(255, 255, 255, 0.25);
border-bottom: 1px solid rgba(255, 255, 255, 0.25);
}
.rebar-trainer__placeholder p {
max-width: 630px;
margin: 0;
color: var(--rb-white);
font-size: 16px;
line-height: 1.55;
opacity: 0.82;
}
.rebar-trainer__booking-button {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 50px;
padding: 14px 27px;
border: 1px solid var(--rb-purple);
border-radius: 100px;
background: var(--rb-purple);
color: var(--rb-dark) !important;
font-size: 13px;
font-weight: 600;
line-height: 1;
text-decoration: none !important;
text-transform: lowercase;
transition:
background-color 0.25s ease,
color 0.25s ease,
border-color 0.25s ease;
}
.rebar-trainer__booking-button:hover {
border-color: var(--rb-white);
background: var(--rb-white);
color: var(--rb-dark) !important;
}
/* 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;
}
}
/* 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__button {
width: 100%;
}
.rebar-trainer__booking-inner {
padding: 60px 20px 70px;
}
.rebar-trainer__schedule {
margin-top: 38px;
}
.rebar-trainer__placeholder {
align-items: flex-start;
flex-direction: column;
padding: 27px 0;
}
.rebar-trainer__booking-button {
width: 100%;
}
}
