/*
THEME: Bingo | Responsive Multipurpose Parallax HTML5 Template
VERSION: 1.0.0
AUTHOR: Themefisher
HOMEPAGE: https://themefisher.com/products/bingo-bootstrap-business-template/
DEMO: https://demo.themefisher.com/themefisher/bingo/
GITHUB: https://github.com/themefisher/Bingo-Bootstrap-Business-Template
WEBSITE: https://themefisher.com
TWITTER: https://twitter.com/themefisher
FACEBOOK: https://www.facebook.com/themefisher
*/
/*=== MEDIA QUERY ===*/
@import url("https://fonts.googleapis.com/css?family=Catamaran:400,500,600,700,700|Source+Sans+Pro:400,600");
body {
line-height: 1.4;
/* font-family: "Source Sans Pro", sans-serif; */
font-family: Rubik, sans-serif !important; /* MAJR - changed font to Rubik */
-webkit-font-smoothing: antialiased;
}
p {
/* font-family: "Source Sans Pro", sans-serif; */
color: #848484;
font-size: 16px;
line-height: 1.65;
}
h1, h2, h3, h4, h5, h6 {
/* font-family: "Catamaran", sans-serif; */
font-weight: 600;
}
.no-padding {
padding: 0 !important;
}
.inline-block {
display: inline-block;
}
ol, ul {
margin: 0;
padding: 0;
list-style: none;
}
figure {
margin: 0;
}
a {
transition: all .3s ease-in 0s;
}
iframe {
border: 0;
}
a, a:focus, a:hover {
text-decoration: none;
outline: 0;
}
a:focus, a:hover {
color: #28ABE3;
}
.btn-main {
background: #28ABE3;
border: 1px solid #28ABE3;
color: #fff;
display: inline-block;
font-size: 14px;
letter-spacing: 1px;
padding: 12px 40px;
text-transform: uppercase;
border-radius: 40px;
}
.btn-main:hover {
color: #fff;
}
.btn-transparent {
color: #fff;
border: 1px solid #fff;
display: inline-block;
font-size: 13px;
letter-spacing: 1px;
padding: 14px 35px;
text-transform: uppercase;
border-radius: 40px;
}
.btn-transparent:hover {
color: #fff;
}
.mt-10 {
margin-top: 10px;
}
.mt-20 {
margin-top: 20px;
}
.mt-30 {
margin-top: 30px;
}
.mt-40 {
margin-top: 40px;
}
.mt-50 {
margin-top: 50px;
}
.section {
padding: 100px 0;
}
.btn:focus {
color: #ddd;
}
#home {
position: relative;
}
.section {
padding: 100px 0;
}
.section-sm {
padding: 70px 0;
}
.section-xs {
padding: 40px 0;
}
#preloader {
background: #fff;
height: 100%;
left: 0;
opacity: 1;
filter: alpha(opacity=100);
position: fixed;
text-align: center;
top: 0;
width: 100%;
z-index: 999999999;
}
.btn.active:focus, .btn:active:focus, .btn:focus {
outline: 0;
}
.parallax-section {
background-attachment: fixed;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
.preloader {
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
position: absolute;
}
.preloader span {
position: absolute;
display: block;
bottom: 0;
width: 9px;
height: 5px;
border-radius: 5px;
background: #fff;
-webkit-animation: preloader 2s infinite ease-in-out;
animation: preloader 2s infinite ease-in-out;
}
.preloader span:nth-child(2) {
left: 11px;
-webkit-animation-delay: 200ms;
animation-delay: 200ms;
}
.preloader span:nth-child(3) {
left: 22px;
-webkit-animation-delay: 400ms;
animation-delay: 400ms;
}
.preloader span:nth-child(4) {
left: 33px;
-webkit-animation-delay: 600ms;
animation-delay: 600ms;
}
.preloader span:nth-child(5) {
left: 44px;
-webkit-animation-delay: 800ms;
animation-delay: 800ms;
}
.preloader span:nth-child(6) {
left: 55px;
-webkit-animation-delay: 1000ms;
animation-delay: 1000ms;
}
@-webkit-keyframes preloader {
0% {
height: 5px;
-webkit-transform: translateY(0);
transform: translateY(0);
background: rgba(0, 0, 0, 0.1);
}
25% {
height: 30px;
-webkit-transform: translateY(15px);
transform: translateY(15px);
background: #28ABE3;
}
50%, 100% {
height: 5px;
-webkit-transform: translateY(0);
transform: translateY(0);
background: rgba(0, 0, 0, 0.1);
}
}
@keyframes preloader {
0% {
height: 5px;
-webkit-transform: translateY(0);
transform: translateY(0);
background: #fff;
}
25% {
height: 30px;
-webkit-transform: translateY(15px);
transform: translateY(15px);
background: #3498db;
}
50%, 100% {
height: 5px;
-webkit-transform: translateY(0);
transform: translateY(0);
background: #fff;
}
}
.title {
padding-bottom: 50px;
overflow: hidden;
}
.title h2 {
font-weight: 600;
font-size: 35px;
color: #232323;
}
.title p {
color: #848484;
margin: 0 auto;
}
.title.title-white h2 {
color: #fff;
}
.border {
height: 2px;
margin: 20px auto 20px;
position: relative;
width: 80px;
background: #28ABE3;
}
.bg-gray {
background: #f9f9f9;
}
.header-bradcrumb {
background: transparent;
}
.header-bradcrumb a, .header-bradcrumb .active {
color: #cfcfcf;
font-weight: 200;
font-family: "Source Sans Pro", sans-serif;
}
.header-bradcrumb a:hover {
color: #28ABE3;
}
.colors-switcher {
width: 100px;
padding: 20px 18px 14px 20px;
position: fixed;
z-index: 1993;
top: 90px;
right: 0;
background-color: #fff;
border-radius: 2px 0 0 2px;
border: 1px solid rgba(0, 0, 0, 0.1);
transition: all .4s ease-in-out;
}
.colors-switcher #show-panel {
position: absolute;
left: -38px;
top: 15px;
width: 38px;
height: 38px;
z-index: 1992;
display: block;
background-color: #fff;
border-radius: 2px 0 0 2px;
border: 1px solid rgba(0, 0, 0, 0.1);
border-right: none;
cursor: pointer;
}
.colors-switcher #show-panel i {
color: #3D3D3D;
font-size: 20px;
line-height: 38px;
margin-left: 10px;
}
.colors-list {
margin: 0;
padding: 0;
}
.colors-list li {
display: inline-block;
margin-bottom: 2px;
margin-right: 4px;
}
.colors-list li a {
text-align: center;
display: inline-block;
width: 24px;
height: 24px;
border-radius: 2px;
transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-webkit-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
cursor: pointer;
}
.colors-switcher .colors-list a.light-red {
background-color: #FF432E;
}
.colors-switcher .colors-list li a:hover {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.4);
}
.colors-switcher .colors-list a.light-red {
background-color: #FF432E;
}
.colors-switcher .colors-list a.blue {
background-color: #28ABE3;
}
.colors-switcher .colors-list a.light-blue {
background-color: #69D2E7;
}
.colors-switcher .colors-list a.green {
background-color: #5BB12F;
}
.colors-switcher .colors-list a.light-green {
background-color: #BCCF02;
}
.colors-switcher .colors-list a.yellow {
background-color: #FED136;
}
.slick-slide {
outline: none;
}
.logo {
display: inline-block;
}
.single-page-header {
background-image: url("../images/about/about-header.jpg");
background-size: cover;
padding: 140px 0 70px;
text-align: center;
color: #fff;
position: relative;
}
.single-page-header:before {
background: rgba(0, 0, 0, 0.8);
position: absolute;
content: '';
top: 0;
right: 0;
left: 0;
bottom: 0;
}
/*=================================================================
Magic defaults like fonts for titles and other elements like hr
==================================================================*/
.mm_title {
font-family: Rubik, sans-serif;
font-size: 32px;
letter-spacing: -0.05px;
margin: 0;
padding: 0;
font-weight: 800;
text-transform: uppercase;
line-height: 1;
color:black;
}
hr {
border: none;
border-top: 1px solid black; /* oder weiß, je nach Kontrast */
margin: 5px 0;
}
/*=================================================================
Navigation
==================================================================*/
.navigation {
transition: .3s all;
}
.navigation .logo-default {
display: none;
}
.navigation .dropdown-toggle::before, .navigation .dropdown-toggle::after {
display: none;
}
.navigation .dropdown-toggle i {
font-size: 10px;
margin-left: 2px;
vertical-align: 2px;
}
.navigation .navbar-light .navbar-nav .nav-item .nav-link {
color: #fff;
font-size: 20px;
line-height: 26px;
padding: 20px 15px;
text-transform: uppercase;
letter-spacing: 1px;
transition: .2s ease-in-out 0s;
}
.navigation .navbar-light .navbar-nav .nav-item .nav-link:hover, .navigation .navbar-light .navbar-nav .nav-item .nav-link:active, .navigation .navbar-light .navbar-nav .nav-item .nav-link:focus {
background: none;
color: #28ABE3;
}
.navigation .navbar-light .navbar-nav .nav-item.active .nav-link {
color: #28ABE3;
}
@media (max-width: 991px) {
.navigation .nav-link {
padding: 6px !important;
}
.navigation .navbar-collapse.show {
overflow-y: auto;
max-height: calc(100vh - 55px);
}
}
.navigation .dropdown-submenu .dropdown-menu {
margin: 0;
background-color: #131313;
}
@media (min-width: 992px) {
.navigation .dropdown-submenu .dropdown-menu {
left: 100%;
top: -5px;
}
.navigation .dropleft .dropdown-menu {
left: auto;
right: 100%;
margin: 0;
top: -5px;
}
.navigation .dropdown-submenu .dropdown-menu {
background-color: #000;
}
}
/** Navigation for model pages with complex table structure **/
.model-nav-table {
width: 100%;
max-width: 1200px;
margin-left: auto; margin-right: 0;
border-collapse: separate;
border-spacing: 0 0.05em;
font-size: 1.3em;
}
.model-nav-table th,
.model-nav-table td {
text-align: center;
padding: 0.1em 0.1em;
color: #fff;
font-size: 1em;
font-weight: normal;
background: none;
border: none;
}
.model-nav-table th {
font-weight: bold;
padding-bottom: 0.1em;
}
.model-nav-table .nav-link {
color: #fff !important;
padding: 0 !important;
font-weight: normal;
background: none;
transition: color .3s;
}
.model-nav-table .nav-link.active,
.model-nav-table .nav-link:focus {
color: #28ABE3 !important; /* Use the theme's ice blue */
}
.model-nav-table .nav-link:hover {
color: #28ABE3 !important; /* Use the theme's ice blue */
}
.model-nav-table .delimiter {
color: #fff;
font-weight: bold;
padding: 0 0.1em;
user-select: none;
}
.navigation .dropdown:hover > .dropdown-menu {
visibility: visible;
opacity: 1;
}
.navigation .dropdown-menu {
border: 0;
border-radius: 0;
top: 80%;
left: 5px;
display: block;
visibility: hidden;
opacity: 0;
padding: 0;
background: #000;
transition: .3s ease;
}
.navigation .dropdown-menu li:first-child {
margin-top: 12px;
}
.navigation .dropdown-menu li:last-child {
margin-bottom: 12px;
}
@media (max-width: 991px) {
.navigation .dropdown-menu {
display: none;
opacity: 1;
visibility: visible;
text-align: center;
transition: 0s;
}
}
@media (max-width: 991px) {
.navigation .dropdown-menu.show {
display: block;
}
.navigation .dropdown-menu {
float: left;
width: 100%;
}
}
.navigation .dropdown-item {
color: rgba(255, 255, 255, 0.8);
transition: .2s ease;
padding: 8px 22px;
}
.navigation .dropdown-item:focus, .navigation .dropdown-item:hover {
color: #fff;
background: transparent;
}
@media (max-width: 991px) {
.navigation {
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.06);
background: #fff;
}
.navigation .navbar-light .navbar-nav .nav-item .nav-link {
color: #000;
}
.navigation .logo-white {
display: none;
}
.navigation .logo-default {
display: block;
}
.navigation .navbar-light .navbar-toggler {
color: rgba(0, 0, 0, 0.5);
border-color: rgba(0, 0, 0, 0.1);
}
}
.sticky-header {
box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.06);
background: #fff !important;
}
.sticky-header .navbar-light .navbar-nav .nav-item .nav-link {
color: #000;
}
.sticky-header .logo-white {
display: none;
}
.sticky-header .logo-default {
display: block;
}
.navbar-brand {
height: auto;
padding: 8px 0;
}
.navbar-brand h1 {
margin: 0;
}
.hero-area {
background-image: url("../images/slider/slider-bg-1.jpg");
background-size: cover;
/*height: 100vh; was original 100% view height*/
height: 860px; /* MAJR - height hero area */
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
/* MAJR - the yellow title floating in the hero area*/
/* Tile overlay (label badge + headline box) is hoisted out of slick's slide
list and anchored to .hero-tile-wrapper so it stays in one spot regardless
of which slide is active. See themes/magic/partials/index/_hero-tile.htm. */
.hero-tile-wrapper {
position: relative;
}
.hero-tile-overlay {
position: absolute;
inset: 0;
pointer-events: none; /* Let clicks pass through to the underlying wrapper. */
}
.hero-floating-title {
position: absolute; /* anchored to .hero-tile-wrapper */
background-color: #ffb900;
width: auto; /* shrink to content + padding so longer labels still fit */
height: 90px;
padding: 0 30px; /* symmetric padding around the text */
display: inline-flex;
align-items: center;
justify-content: flex-start;
top: 430px; /* Position relative to parent */
left: 110px;
font-size: 44px;
font-weight: 800;
font-style: normal;
white-space: nowrap;
color: black !important;
text-align: left;
letter-spacing: -0.19px;
text-transform: uppercase;
}
.hero-floating-box {
background-color: black;
/* Task 33: centered under the (centered) logo, sized to content. Mobile ≤768px
rule is untouched and overrides these (centered + 14px) → mobile pixel-identical. */
width: fit-content; /* shrink to the headline so the box centers cleanly */
max-width: 90%; /* never overflow the half */
height: auto; /* Adjust height automatically based on content */
padding: 20px 30px; /* Adds left padding */
display: flex;
align-items: center; /* Vertically centers content */
justify-content: flex-start; /* Horizontally aligns content to the left */
position: absolute;
top: 550px; /* Positioned relative to the first box */
left: 50%; /* center on the wrapper axis — same as the logo */
transform: translateX(-50%);
font-size: var(--headline-size, 66px); /* editable per tile; default = old 66px */
font-weight: 800;
font-style: normal;
color: white;
text-align: left;
letter-spacing: -0.19px;
white-space: normal; /* Enables line breaks for text */
word-wrap: break-word; /* Ensures long words break appropriately */
text-transform: uppercase;
line-height: 1 !important;
}
.hero-area:before {
content: '';
background: rgba(0, 0, 0, 0.63);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.hero-area .block {
color: #fff;
}
.hero-area .block h1 {
font-size: 60px;
font-weight: 700;
margin-bottom: 20px;
text-transform: uppercase;
}
.hero-area .block p {
color: #fff;
width: 50%;
margin-bottom: 20px;
}
.hero-area .block .btn-main {
margin-right: 8px;
}
.hero-area .block .btn-main:hover {
opacity: .8;
}
.hero-area-video {
height: 100vh;
position: inherit !important;
display: flex;
justify-content: center;
align-items: center;
}
.hero-area-video .block {
color: #fff;
text-align: center;
}
.hero-area-video .block h1 {
font-size: 60px;
font-weight: 700;
margin-bottom: 20px;
}
.hero-area-video .block p {
color: #fff;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 3px;
margin-bottom: 20px;
}
.hero-area-video .block .btn-main {
margin-top: 20px;
}
.dark-bg {
background: rgba(0, 0, 0, 0.7);
height: 100%;
width: 100%;
position: absolute;
z-index: -1;
}
.slider-item {
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
position: relative;
}
.slider-item::before {
position: absolute;
content: "";
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.5);
left: 0;
top: 0;
}
.slider-item .container {
position: absolute;
left: 0;
right: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.slider-item h1 {
color: #fff;
font-size: 60px;
line-height: 70px;
letter-spacing: 2px;
font-weight: 700;
margin-bottom: 20px;
margin-top: 50px;
}
@media (max-width: 768px) {
.slider-item h1 {
font-size: 48px;
line-height: 52px;
}
}
@media (max-width: 480px) {
.slider-item h1 {
font-size: 38px;
line-height: 46px;
}
}
.slider-item p {
color: #fff;
margin-bottom: 20px;
}
/* Task 32 Part A — slideshow images must COVER their slide, not letterbox.
The slideshow ![]()
is Bootstrap .img-fluid (height:auto), so it rendered at
its natural ratio inside the fixed-height .hero-area (860/450px) → grey bars
top/bottom. Force cover-fill at the slide height; neutralise the inner
Bootstrap container/row padding so it's full-bleed (no side gaps) too.
(object-position per image is emitted inline by _hero-tile.htm — Part B.) */
.hero-slider .slider-item img {
width: 100%;
height: 860px; /* match .hero-area desktop height */
object-fit: cover;
display: block;
}
.hero-slider .slider-item .container,
.hero-slider .slider-item .row {
max-width: 100%;
width: 100%;
margin: 0;
padding: 0;
}
@media (max-width: 768px) {
.hero-slider .slider-item img { height: 450px; } /* match .hero-area mobile height */
}
/* MAJR task40 - the two hero tiles must SHRINK to fit the viewport. They were
fixed 950px each (950+950+20gap = exactly 1920); on any effective viewport
narrower than 1920 (e.g. Windows display-scaling makes the CSS viewport
~1280–1536 even at 100% browser zoom) two rigid 950px tiles overflowed the
narrower row, so the hero rendered WIDER than the (viewport-capped) header.
Flexing the tiles to equal, shrinkable halves keeps hero + header the same
width at every viewport. max-width:950 preserves the original size cap so the
desktop ≥1920 look is unchanged. */
.hero-tile-link {
flex: 1 1 0; /* equal halves of .slider-container */
min-width: 0; /* allow shrinking below the 950px content width */
display: block;
}
.hero-slider {
overflow-x: hidden;
width: 100%; /* MAJR task40 - was fixed 950px; now fills its flex half */
max-width: 950px; /* MAJR task40 - keep the original size cap (≥1920 look unchanged) */
}
.hero-slider .prevArrow {
left: -100px;
}
.hero-slider .nextArrow {
right: -100px;
}
@media (max-width: 768px) {
.hero-slider .prevArrow,
.hero-slider .nextArrow {
display: none !important;
}
}
/* MAJR: this was animated before */
/* .hero-slider:hover .prevArrow {
left: 20px;
}
.hero-slider:hover .nextArrow {
right: 20px;
} */
.hero-slider .prevArrow {
left: 20px;
}
.hero-slider .nextArrow {
right: 20px;
}
/* slick style */
.slick-slide {
outline: 0;
}
.slick-slide img {
display: unset;
}
/* slick arrows */
.slick-arrow {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
z-index: 9;
height: 70px;
width: 70px;
/* background: rgba(40, 171, 227, 0.5); MAJR: removed the background color if no hover over arrow*/
background: none;
color: #fff;
border: 0;
line-height: 70px;
font-size: 35px;
transition: .2s ease;
border-radius: 50%;
cursor: pointer;
}
.slick-arrow::before {
position: absolute;
content: '';
height: 10px;
width: 10px;
background: transparent;
top: 50%;
-webkit-transform: translateY(-50%) rotate(-45deg);
transform: translateY(-50%) rotate(-45deg);
transition: .2s ease;
}
.slick-arrow::after {
position: absolute;
content: '';
height: 2px;
width: 25px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
background: #fff;
transition: .2s ease;
}
.slick-arrow:focus {
outline: 0;
}
.slick-arrow:hover {
background: rgba(88, 90, 90, 0.75); /* Semi-transparent background */}
.prevArrow {
left: 0px;
}
.prevArrow::before {
border-left: 2px solid #fff;
border-top: 2px solid #fff;
right: 35px;
}
.prevArrow::after {
right: 20px;
}
.nextArrow {
right: 0px;
}
.nextArrow::before {
border-right: 2px solid #fff;
border-bottom: 2px solid #fff;
left: 35px;
}
.nextArrow::after {
left: 20px;
}
.fixed-top {
background-color: #ffb900;
right: unset !important; /** MAJR - remove right alignment for fixed top - otherwise it will be centered */
position: relative; /* MAJR - changed to absolute to avoid absolute positining and hovering */
max-width: 1920px; /* MAJR - set max width for top to overwrite standard behavior of being an absolute and floating header*/
width: 100%; /* MAJR task40 - fill the centered 1920 wrapper */
margin: 0 auto; /* MAJR task40 - center like .magic-wrapper so header & hero share one origin above 1920px */
}
/* Container for sliders left / right (MAJR) */
/* Existing Slider Container Definition */
.slider-container {
display: flex; /* Enables Flexbox layout */
gap: 20px; /* Adds space between sliders */
width: 100%; /* MAJR task40 - the two hero tiles share the centered 1920 origin */
max-width: 1920px; /* MAJR task40 */
margin: 0 auto; /* MAJR task40 - center the hero row like the header & wrapper */
}
/* MAJR Responsive Styling for Mobile Screens */
@media (max-width: 768px) {
.slider-container {
flex-direction: column; /* Stack sliders vertically */
align-items: stretch; /* Tiles fill the full container width when stacked */
gap: 10px; /* Reduce gap between stacked sliders */
}
/* The two are the direct flex children of
.slider-container. On desktop they're equal halves (flex: 1 1 0). On
mobile, with the column layout above, that basis-0 + content-width sizing
made each tile a thin column. Force them full-width so the stacked Models
and Extras tiles each span the whole viewport. (task 97) */
.hero-tile-link {
flex: 1 1 100%; /* full width when stacked vertically */
width: 100%;
}
.hero-slider {
width: 100%; /* Make sliders take full width of the container */
max-width: 100%; /* Prevent sliders from exceeding container width */
}
.slider-container img {
width: 100%; /* Ensure images scale properly */
height: auto; /* Maintain aspect ratio */
}
/* Match the mobile image height (.hero-slider .slider-item img is 450px at
≤768px, ~line 888) so the area is exactly the height of the visible image
— no giant empty black region below it. (task 97) */
.hero-area {
height: 450px; /* Adjust height for mobile */
}
/* Headline box, centered within the now-full-width tile. The old 14px was
too small for a full-width phone tile; 20px reads well. Position it in the
lower third of the 450px area (task 97). Starting values — Jürgen to tune. */
.hero-floating-box, .hero-floating-title {
bottom: unset; /* Remove bottom positioning */
top: 65%; /* lower third of the 450px mobile area */
left: 50%; /* Center horizontally */
transform: translateX(-50%); /* Center text box */
font-size: 20px; /* readable on a full-width mobile tile */
width: auto; /* shrink to content so the box centers cleanly */
max-width: 90%; /* never overflow the tile */
text-align: center; /* Align text centrally */
}
}
/*=================================================================
used on result page for image overlays
==================================================================*/
.new_model_overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6); /* semi-transparent black */
opacity: 0;
transition: opacity 0.3s ease;
color: white;
padding: 10px;
box-sizing: border-box;
overflow: hidden;
z-index: 2;
}
.modellist_img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain; /* or 'cover' depending on your preference */
}
/*=================================================================
New models slider
==================================================================*/
.new_model {
position: relative;
display: inline-block;
height: 630px;
width: auto;
padding: 0;
margin: 0;
cursor: pointer;
}
.new_model_img {
display: block;
height: 100%;
width: auto; /* 🔹 preserves natural width */
}
/* General Slider Wrapper */
.new_model_slider_wrapper {
position: relative;
width: 100%; /* MAJR task40 - was fixed 1920px (+40px padding = 1960, overflowed the centered wrapper) */
max-width: 1920px; /* MAJR task40 */
margin: 0 auto; /* MAJR task40 - center like the rest of the page */
padding: 0 20px 0 20px;
}
/* Slider Buttons */
.slider-arrow {
background: rgba(31, 30, 30, 0.62);
border: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
color: white;
font-size: 24px;
cursor: pointer;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
}
/* Left Button */
.left-arrow {
left: 30px;
}
/* Right Button */
.right-arrow {
right: 30px;
}
.current-models-banner {
max-width: 500px;
margin-top: 20px;
margin-bottom: 15px;
height: 78px;
background-color: black;
color: white;
display: flex;
align-items: center;
justify-content: center;
}
.banner_span {
color: #ffffff;
font-family: Rubik, sans-serif;
font-size: 35px;
font-style: normal;
font-weight: bold;
text-transform: uppercase;
}
/*=================================================================
New Model Slider Overlay
==================================================================*/
.new_model_overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
max-width: 100%; /* 🔹 prevents overflow */
height: 100%;
background: rgba(20, 20, 20, 0.85);
color: white;
padding: 20px;
box-sizing: border-box;
opacity: 0;
transition: opacity 0.3s ease;
display: flex; /* 🔹 enables flexbox */
flex-direction: column; /* 🔹 stacks children vertically */
justify-content: flex-end; /* 🔹 pushes content to bottom */
}
.new_model_overlay h2 {
margin-top: 0;
font-size: 1.5em;
margin: 0px;
}
.new_model_overlay ul {
list-style: none;
padding: 0;
margin: 0 0 0 0;
}
.new_model_overlay ul li {
margin-bottom: 0;
}
.new_model_overlay a {
color: #00bfff;
text-decoration: underline;
}
.new_model_overlay hr {
border: none;
border-top: 1px solid #ccc; /* oder weiß, je nach Kontrast */
margin: 5px 0;
}
/*=================================================================
About us section
==================================================================*/
/* Welcome Section */
.welcome {
padding: 0 0;
background: #fff;
}
/* General container styling */
.welcome-container {
max-width: 1920px;
margin: 0 auto; /* MAJR task40 - center the layout horizontally (was commented out → diverged above 1920px) */
}
/* Row styling */
.welcome-row {
display: flex; /* Flexbox to keep divs side by side */
justify-content: space-between; /* Ensure spacing between the divs */
gap: 20px; /* Adds space between left and right boxes */
}
/* Left box styles */
.welcome-left {
flex: 8; /* Occupy 8 parts of the available space */
background-color: #e5e5e5; /* Light gray background */
padding: 30px; /* Internal spacing */
box-sizing: border-box; /* Include padding in width calculation */
display: flex; /* Enable Flexbox */
flex-direction: column; /* Stack items vertically */
justify-content: space-between; /* Push buttons to the bottom */
}
/* Content inside the left box */
.welcome-content {
display: flex; /* Align image and text horizontally */
gap: 30px; /* Adds space between image and text */
align-items: center; /* Vertically center the image and text */
}
/* Image styling */
.welcome-image {
width: 446px; /* Image width */
height: auto; /* Maintain aspect ratio */
}
/* Text inside the left box */
.welcome-text {
flex: 1; /* Take the remaining space */
}
.welcome-text h2 {
margin-bottom: 15px;
font-size: 36px;
font-weight: 800;
}
.welcome-text p {
font-size: 24px;
line-height: 1.4;
color: black;
}
/* Buttons Container */
.welcome-buttons {
padding-top:60px;
display: flex; /* Align buttons horizontally */
gap: 20px; /* Space between buttons */
}
/* Button Styling */
.welcome-buttons .btn {
width: 200px; /* Fixed width for buttons */
height: 78px; /* Fixed height for buttons */
font-size: 24px; /* Font size for button text */
font-weight: bold; /* Bold text */
text-align: center;
border-radius: 0px; /* Rounded corners */
border: none; /* No border */
cursor: pointer; /* Pointer cursor on hover */
}
.btn-bewerben {
background-color: #000; /* Black background */
color: #fff; /* White text */
}
.btn-buchen {
background-color: #ffb900; /* Yellow background */
color: #000 !important; /* Black text */
}
/* Email Styling */
.welcome-email {
font-size: 22px; /* Match the font size to the buttons */
color: black; /* Default text color */
margin-left: auto; /* Push the email to the far right */
text-align: right; /* Align the text inside the span to the right */
white-space: nowrap; /* Prevent the email from wrapping */
}
/* Responsive Styling for Smaller Screens */
@media (max-width: 768px) {
.welcome-row {
flex-direction: column; /* Stack the left and right parts vertically */
gap: 10px; /* Reduce the gap between sections */
}
.welcome-left {
flex: none; /* Remove proportional sizing to fit content dynamically */
width: 100%; /* Take full width on mobile */
padding: 20px; /* Adjust padding for compact layout */
height: auto; /* Allow height to fit content */
}
.welcome-content {
flex-direction: column; /* Stack the image and text vertically */
gap: 15px; /* Space between image and text */
align-items: center; /* Center-align content */
text-align: center; /* Center-align text */
}
.welcome-image {
width: 100%; /* Image takes full width on mobile */
max-width: 446px; /* Maintain aspect ratio within limits */
height: auto; /* Adjust height dynamically */
}
.welcome-buttons {
flex-direction: column; /* Stack buttons vertically */
align-items: center; /* Center-align buttons */
gap: 10px; /* Reduce space between buttons */
}
.welcome-right {
flex: none; /* Remove proportional sizing */
width: 100%; /* Take full width on mobile */
padding: 15px; /* Adjust padding for compact layout */
height: auto; /* Allow dynamic height */
text-align: center; /* Center-align content for readability */
}
.welcome-right h3 {
font-size: 18px; /* Adjust heading size for smaller screens */
}
.welcome-right p {
font-size: 14px; /* Adjust paragraph text size */
}
.welcome-email {
text-align: center;
margin: 0;
}
}
/*=================================================================
News Section
==================================================================*/
/* News Section Container */
.news-right {
position: relative;
background-color: #ffb900; /* Yellow background */
padding: 20px;
color: #000; /* Default text color for readability */
flex: 3; /* Occupy 4 parts of the available space */
background-color: #ffb900; /* Yellow background */
height: 655px; /* Fixed height */
padding: 20px;
box-sizing: border-box; /* Includes padding in width/height calculation */
}
/* Black Header Box ("NEWS") */
.news-header {
position: absolute;
top: 0;
left: 0;
width: 350px; /* Fixed width */
height: 78px; /* Fixed height */
background-color: #000; /* Black background */
color: #ffb900; /* Same yellow text color */
display: flex;
align-items: center; /* Center vertically */
justify-content: left; /* Center horizontally */
font-size: 32px; /* Font size for header */
font-weight: 800;
padding: 20px;
}
/* News Entries Container */
.news-entries {
margin-top: 100px; /* Space below the header box */
}
/* Individual News Entry */
.news-entry {
margin-bottom: 20px; /* Space between news entries */
}
/* News Title */
.news-title {
font-size: 26px; /* Bold, larger font for news titles */
font-weight: bold;
line-height: 1.4; /* Adjust line height for multi-line titles */
margin-bottom: 5px; /* Space below the title */
}
/* News Link */
.news-link {
font-size: 14px; /* Smaller, non-bold font for teaser link */
color: #000; /* Black color for contrast */
text-decoration: none; /* Remove underline */
}
.news-link:hover {
text-decoration: underline; /* Add underline on hover for clarity */
}
/** *=================================================================
* Slick Slider Arrows
*==================================================================*/
.modellist-section {
max-width: 1920px;
padding-top: 10px;
}
/* /slick arrows */
/*=================================================================
About us section
==================================================================*/
.about {
padding: 100px 0;
background: #fff;
}
.about .btn-about {
background: #28ABE3;
}
.about h4 {
margin-top: 30px;
}
.about .feature-list {
margin-top: 10px;
}
.about .feature-list li {
width: 48%;
display: inline-block;
color: #666;
font-size: 13px;
font-family: "Catamaran", sans-serif;
margin-bottom: 5px;
font-weight: 600;
}
@media (max-width: 768px) {
.about .feature-list li {
width: auto;
margin-right: 20px;
}
}
.about .feature-list li i {
color: #28ABE3;
margin-right: 8px;
}
/*=================================================================
About us 2 section
==================================================================*/
.about-2 {
background: #F7F7F7;
}
.about-2 .checklist {
padding-left: 30px;
}
.about-2 .checklist li {
position: relative;
margin-bottom: 15px;
font-size: 16px;
color: #777;
font-family: "Source Sans Pro", sans-serif;
}
.about-2 .checklist li:before {
position: absolute;
margin-right: 12px;
margin-left: -45px;
content: "\f375";
font-family: "themefisher-font";
opacity: 1;
border-radius: 50%;
padding: 2px 8px;
font-size: 20px;
}
/*=================================================================
Call To Action 1
==================================================================*/
.call-to-action {
padding: 100px 0;
background: url("../images/call-to-action/call-to-action-bg-2.jpg");
background-size: cover;
color: #fff;
}
.call-to-action h2 {
line-height: 1.5;
}
.call-to-action p {
color: #fff;
}
.call-to-action .btn-main {
margin-top: 20px;
}
/*=================================================================
Call To Action 2
==================================================================*/
.call-to-action-2 {
padding: 100px 0;
background-image: url("../images/call-to-action/call-to-action-bg.jpg");
background-size: cover;
color: #fff;
}
.call-to-action-2 h2 {
line-height: 1.5;
}
.call-to-action-2 p {
color: #fff;
}
.call-to-action-2 .btn-main {
margin-top: 20px;
}
/*=================================================================
Contact
==================================================================*/
.contact-us {
padding: 100px 0 50px 0;
}
.contact-form {
margin-bottom: 40px;
}
.contact-form .form-control {
background-color: transparent;
border: 1px solid #dedede;
box-shadow: none;
height: 45px !important;
color: #0c0c0c;
height: 38px;
font-family: 'Open Sans', sans-serif;
font-size: 14px;
border-radius: 0;
}
.contact-form input:hover,
.contact-form textarea:hover,
.contact-form #contact-submit:hover {
border-color: #28ABE3;
}
.contact-form #contact-submit {
border: none;
padding: 15px 0;
width: 100%;
margin: 0;
background: #28ABE3;
color: #fff;
border-radius: 0;
}
.contact-form textarea.form-control {
padding: 10px;
height: 120px !important;
outline: none;
}
.contact-details .contact-short-info {
margin-top: 15px;
}
.contact-details .contact-short-info li {
margin-bottom: 6px;
}
.social-icon {
margin-top: 20px;
}
.social-icon ul li {
display: inline-block;
margin-right: 10px;
}
.social-icon ul li a {
display: block;
height: 50px;
width: 50px;
border-radius: 50%;
border: 1px solid #dedede;
text-align: center;
}
.social-icon ul li a:hover {
background: #28ABE3;
color: #fff;
border: 1px solid #28ABE3;
}
.social-icon ul li a:hover i {
color: #fff;
}
.social-icon ul li a i {
color: #55606a;
display: inline-block;
font-size: 20px;
line-height: 50px;
margin: 0;
}
.google-map {
position: relative;
}
.google-map .map_canvas {
height: 400px;
color: white;
}
/* De-blue the address link inside the homepage contact columns (task 115).
The address is a CMS-content ; keep it clickable but inherit the black
text colour instead of the default link blue. Underline only on hover.
Scoped to .contact-info so it doesn't affect other CMS-content links. */
.contact-info .cms-rich-content a { color: inherit; text-decoration: none; }
.contact-info .cms-rich-content a:hover { text-decoration: underline; }
/* ──────────────────────────────────────────────────────────────────────
Homepage contact section — mobile tweak (task-99-adjacent, customer
request): hide the Google map on mobile and show a tappable address
that opens Google Maps at our location. Desktop is unchanged — the
partial keeps its inline styles as the desktop default; the classes
below only add hooks the mobile media query overrides.
Breakpoint 768px reused from the recent homepage hero mobile pass.
────────────────────────────────────────────────────────────────────── */
.mobile-map-link {
display: none;
}
@media (max-width: 768px) {
.contact-map {
display: none !important; /* hide the (empty) map column on mobile */
}
.contact-info {
flex-direction: column !important; /* stack the two text columns */
}
.contact-col {
width: 100% !important;
}
.mobile-map-link {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 14px;
font-weight: bold;
color: #000;
text-decoration: none;
}
}
/*=================================================================
Item counter section
==================================================================*/
.counters-item {
padding-bottom: 30px;
color: #444;
position: relative;
}
.counters-item.kill-border:before {
background: none;
}
.counters-item:before {
background: #e5e5e5;
content: "";
margin-top: -27.5px;
height: 55px;
width: 1px;
position: absolute;
right: -15px;
top: 50%;
}
.counters-item > div {
margin: 6px 0;
}
.counters-item span {
display: inline;
font-size: 35px;
font-weight: 700;
line-height: 50px;
}
.counters-item i {
font-size: 40px;
display: inline-block;
color: #28ABE3;
}
.counters-item h3 {
font-size: 18px;
margin: 0;
color: #666;
}
/*=================================================================
Pricing section
==================================================================*/
.pricing-table {
padding: 100px 0;
padding-bottom: 70px;
background: url("../images/pricing-bg.jpg");
background-size: cover;
background-position: center;
position: relative;
}
.pricing-table .title p {
color: #fff;
}
.pricing-table:before {
background: rgba(0, 0, 0, 0.62);
position: absolute;
z-index: 999;
content: '';
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.pricing-table .container {
position: relative;
z-index: 999;
}
.pricing-table .pricing-item {
padding: 40px 55px 65px;
background: #fff;
margin-bottom: 30px;
}
.pricing-table .pricing-item a.btn-main {
text-transform: uppercase;
margin-top: 20px;
}
.pricing-table .pricing-item li {
font-weight: 400;
padding: 10px 0;
color: #666;
}
.pricing-table .pricing-item li i {
margin-right: 6px;
}
.pricing-table .price-title {
padding: 30px 0 20px;
}
.pricing-table .price-title > h3 {
font-weight: 700;
margin: 0 0 5px;
font-size: 15px;
text-transform: uppercase;
}
.pricing-table .price-title > p {
font-size: 14px;
font-weight: 400;
line-height: 18px;
margin-top: 5px;
}
.pricing-table .price-title .value {
color: #28ABE3;
font-size: 50px;
padding: 10px 0;
}
/*=================================================================
Portfolio section
==================================================================*/
.portfolio-filter {
margin-bottom: 40px;
text-align: center;
}
.portfolio-filter button {
cursor: pointer;
display: inline-block;
font-size: 14px;
padding: 8px 20px;
text-transform: uppercase;
background: #28ABE3;
border: none;
color: #fff;
outline: none;
margin: 6px 4px;
}
.portfolio-filter button.active {
background: #28ABE3;
color: #fff;
border-radius: 50px;
}
.portfolio-block {
position: relative;
margin-bottom: 30px;
}
.portfolio-block:before {
transition: all 0.3s ease-in-out;
background: rgba(0, 0, 0, 0.55);
opacity: 0;
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
content: '';
}
.portfolio-block:hover:before {
opacity: 1;
}
.portfolio-block:hover .caption h4 {
top: 45%;
}
.portfolio-block:hover .caption {
opacity: 1;
top: 55%;
}
.portfolio-block .caption {
position: absolute;
top: 50%;
left: 50%;
opacity: 0;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
z-index: 9;
transition: all 0.3s ease-in-out;
text-align: center;
}
.portfolio-block .caption h4 {
font-size: 16px;
}
.portfolio-block .caption h4 a {
color: #fff;
}
.portfolio-block .caption .search-icon {
background: #28ABE3;
color: #fff;
display: inline-block;
height: 45px;
width: 45px;
font-size: 17px;
border-radius: 30px;
margin-bottom: 20px;
text-align: center;
line-height: 47px;
}
/*=================================================================
Services section
==================================================================*/
.services {
padding: 100px 0 130px;
}
.services .service-block.color-bg {
background: #28ABE3;
color: #fff;
}
.services .service-block.color-bg i, .services .service-block.color-bg h3, .services .service-block.color-bg p {
color: #fff;
}
.services .service-block .service-icon {
margin-bottom: 30px;
}
.services .service-block i {
font-size: 75px;
color: #28ABE3;
}
.services .service-block h3 {
color: #333;
font-size: 18px;
text-transform: uppercase;
font-weight: bold;
}
.services .service-block p {
font-size: 14px;
color: #666;
}
/*=================================================================
Services section 2
==================================================================*/
.service-2 .service-item {
border: 1px solid #eee;
margin-bottom: 30px;
padding: 50px 20px;
transition: all 0.3s ease 0s;
}
.service-2 .service-item:hover {
box-shadow: 0 5px 65px 0 rgba(0, 0, 0, 0.15);
-webkit-box-shadow: 0 5px 65px 0 rgba(0, 0, 0, 0.15);
}
.service-2 .service-item:hover i {
background: #fff;
color: #28ABE3;
}
.service-2 .service-item i {
font-size: 30px;
display: inline-block;
background: #28ABE3 none repeat scroll 0 0;
border-radius: 30px;
box-shadow: 0 5px 6px 0 rgba(0, 0, 0, 0.1);
color: #fff;
height: 55px;
line-height: 55px;
margin-bottom: 20px;
width: 55px;
transition: all 0.3s ease 0s;
}
/*=================================================================
Our skills
==================================================================*/
.team-skills .progress-block {
margin-top: 40px;
}
.team-skills .progress-block span {
display: inline-block;
margin-bottom: 5px;
font-size: 14px;
}
.team-skills .progress-block .progress {
box-shadow: none;
border-radius: 0;
height: 10px;
}
.team-skills .progress-block .progress .progress-bar {
background: #28ABE3;
box-shadow: none;
}
.clients-logo-slider {
margin-top: 50px;
}
/*=================================================================
Step section
==================================================================*/
.development-steps .step {
padding: 80px 20px;
}
.development-steps .step h4 {
font-size: 20px;
font-weight: 600;
}
.development-steps .step h4 i {
font-size: 72px;
font-weight: 500;
margin-right: 10px;
}
.development-steps .step p {
color: #cccccc;
font-size: 14px;
line-height: 22px;
}
.development-steps .step-1 {
background-color: #f2f6f8;
}
.development-steps .step-1 h4 {
color: #212121;
}
.development-steps .step-1 p {
color: #838383;
}
.development-steps .step-2 {
background-color: #28ABE3;
}
.development-steps .step-2 h4, .development-steps .step-2 p {
color: #fff;
}
.development-steps .step-3 {
background: #198dbf;
}
.development-steps .step-3 h4, .development-steps .step-3 p {
color: #fff;
}
.development-steps .step-4 {
background: #167da9;
}
.development-steps .step-4 h4, .development-steps .step-4 p {
color: #fff;
}
/*=================================================================
Our Team
==================================================================*/
.team {
padding: 100px 0;
padding-bottom: 70px;
background: #F6F6F6;
}
.team .team-member {
background: #fff;
margin-bottom: 30px;
}
.team .team-member .member-content {
padding: 25px 0;
}
.team .team-member .member-content h3 {
font-size: 20px;
margin: 0 0 5px;
color: #333;
}
.team .team-member .member-content span {
font-size: 14px;
color: #555;
}
.team .team-member .member-content p {
color: #777;
margin-top: 10px;
padding: 0 15px;
}
.team .member-photo {
overflow: hidden;
position: relative;
}
.team .member-photo:hover img {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
.team .member-photo img {
transition: all 0.6s ease 0s;
}
.team .member-photo .mask {
background: rgba(40, 171, 227, 0.7);
position: absolute;
width: 100%;
bottom: 0;
top: auto;
opacity: 0;
filter: alpha(opacity=0);
left: 0;
right: 0;
cursor: pointer;
padding: 0;
height: 80px;
-webkit-transform: translateY(100%);
transform: translateY(100%);
transition: all .3s ease;
}
.team .member-photo .mask ul {
text-align: center;
position: relative;
margin-top: 22px;
}
.team .member-photo .mask ul li {
display: inline-block;
margin-right: 7px;
}
.team .member-photo .mask ul li a {
border: 1px solid #ddd;
border-radius: 4px;
color: #fff;
display: block;
font-size: 20px;
height: 35px;
line-height: 35px;
text-align: center;
width: 35px;
}
.team .member-photo .mask ul li a::hover {
background-color: #6cb670;
border: 1px solid transparent;
}
.team .member-photo:hover .mask {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transform: translateY(0%);
transform: translateY(0%);
}
/*=================================================================
Model images in masonry layout; also used for model results page
==================================================================*/
.modellist-section {
display: flex;
justify-content: flex-start;
gap: 1rem;
align-items: flex-start;
width: 100%;
}
.current-models-banner-left {
width: 500px;
height: 78px;
background-color: black;
color: white;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
margin-top: 20px;
}
.current-models-banner-right {
height: 78px;
background-color: #e6e6e6;
color: black; /* Changed from #fff to black */
display: flex;
align-items: center;
justify-content: center;
flex: 1 1 0;
margin-top: 20px;
}
#masonry-grid {
display: flex;
align-items: flex-start;
gap: 1rem;
width: 100%;
}
.masonry-col {
flex: 1 1 0;
display: flex;
flex-direction: column;
gap: 1rem;
min-width: 0;
}
.grid-item {
position: relative;
width: 100%;
}
.grid-item-inner {
position: relative;
width: 100%;
overflow: hidden;
}
/* Reserve space before image loads using known orientation */
.grid-item[data-orientation="portrait"] .grid-item-inner {
aspect-ratio: 2 / 3;
}
.grid-item[data-orientation="landscape"] .grid-item-inner {
aspect-ratio: 4 / 3;
}
.grid-item img {
width: 100%;
height: auto;
display: block;
}
/* Inside the modellist masonry the inner wrapper defines the aspect-ratio box */
.grid-item-inner img {
height: 100%;
object-fit: cover;
}
/* Detail-page gallery — CSS columns, no JS needed for a fixed image set */
#detail-gallery {
column-count: 4;
column-gap: 1rem;
}
@media (max-width: 1400px) { #detail-gallery { column-count: 3; } }
@media (max-width: 1000px) { #detail-gallery { column-count: 2; } }
@media (max-width: 600px) { #detail-gallery { column-count: 1; } }
#detail-gallery .grid-item {
break-inside: avoid;
margin-bottom: 1rem;
}
/* Mixed-aspect masonry, complete images, no reflow (task 47): each ![]()
carries
real width/height attrs, so the browser auto-derives the tile's true aspect
ratio and reserves its box BEFORE the lazy image loads — no column re-balance.
The shared `.grid-item img { width:100%; height:auto }` keeps the image whole
(no crop) at its natural aspect. (No scoped img rule needed — documented here.) */
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
width: 300px;
font-size: 20px;
padding: 0px;
margin: 0px;
}
.model-action-links {
display: flex;
flex-direction: column;
width: 300px;
height: auto;
gap: 10px;
margin-top: 20px;
}
.action-box {
height: 78px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
}
.action-box.black {
background-color: black;
color: white;
}
.action-box.yellow {
background-color: #ffcc00;
color: black;
}
/*=================================================================
Model detail — responsive layout (task: mobile-readiness #2)
De-inlined from partials/model/detail.htm. Desktop (>=992px)
reproduces the former fixed 1880 / 1482 / 480 px layout via
caps + flex; below 992px the row stacks and everything goes
full-width so the page never forces horizontal scroll.
==================================================================*/
.model-detail-wrap {
/* was inline width:1880px; margin:20px — now capped + fluid, centered */
max-width: 1880px;
width: 100%;
margin: 20px auto;
}
.model-detail-row {
/* was inline display:flex; align-items:stretch; gap:1rem (no-wrap) */
display: flex;
align-items: stretch;
gap: 1rem;
}
.model-detail-hero {
/* was inline width:1482px; height:auto; flex-shrink:0 — now fluid,
fills the row up to the former 1482px, never exceeds the viewport */
flex: 1 1 auto;
min-width: 0;
max-width: 1482px;
height: auto;
}
.model-detail-info {
/* was inline width:480px; font-size:24px — keep ~480px on desktop */
flex: 0 0 480px;
max-width: 480px;
font-size: 24px;
}
@media (max-width: 991.98px) {
.model-detail-wrap {
/* don't waste 20px each side on a phone */
margin: 12px auto;
}
.model-detail-row {
flex-direction: column;
}
.model-detail-hero {
flex: 0 0 auto;
max-width: 100%;
width: 100%;
}
.model-detail-info {
flex: 0 0 auto;
max-width: 100%;
width: 100%;
font-size: 15px;
}
.mm_title {
font-size: 22px;
}
/* header / category banner: 500px fixed -> fluid, let label wrap */
.current-models-banner-left {
width: auto;
flex: 1 1 0;
min-width: 0;
height: auto;
min-height: 78px;
padding: 6px 12px;
text-align: center;
}
.current-models-banner-left .banner_span,
.current-models-banner-right .banner_span {
white-space: normal;
overflow-wrap: anywhere;
font-size: 18px;
}
/* spec grid: 300px fixed -> fluid full width */
.grid-container {
width: 100%;
}
/* action links were a fixed 300px column inside the info box */
.model-action-links {
width: 100%;
}
}
/*=================================================================
Model detail — Videos section (facade → click swaps in live iframe)
Lifted from the deleted partials/model/videos.htm; selectors are
scoped to .mm-video-* so they don't collide with the photo masonry.
==================================================================*/
html { scroll-behavior: smooth; }
.mm-videos-section {
margin-top: 2rem;
padding-top: 1rem;
border-top: 1px solid #e0e0e0;
}
.mm-videos-heading {
font-size: 1.6rem;
font-weight: 600;
margin: 0 0 1rem 0;
letter-spacing: .03em;
}
.mm-video-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
gap: 1.25rem;
padding: 0 0 1.5rem;
}
.mm-video-facade {
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 */
background: #000;
cursor: pointer;
overflow: hidden;
}
.mm-video-facade img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 0.2s;
}
.mm-video-facade:hover img { opacity: 0.75; }
.mm-video-placeholder {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: #1ab7ea; /* Vimeo blue */
color: #fff;
font-size: 1.25rem;
letter-spacing: .1em;
font-weight: 600;
}
.mm-video-facade .mm-play {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
}
.mm-video-facade .mm-play svg {
width: 72px;
height: 72px;
filter: drop-shadow(0 2px 6px rgba(0,0,0,.6));
transition: transform 0.15s;
}
.mm-video-facade:hover .mm-play svg { transform: scale(1.12); }
.mm-video-iframe-wrap {
position: relative;
width: 100%;
padding-top: 56.25%;
background: #000;
}
.mm-video-iframe-wrap iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
border: 0;
}
/*=================================================================
Testimonial section
==================================================================*/
.testimonial {
padding-top: 100px;
background: #28ABE3;
position: relative;
padding-bottom: 0px;
margin-bottom: 80px;
}
.testimonial:before {
content: "";
display: block;
position: absolute;
left: 0%;
right: 0%;
bottom: 0;
height: 145px;
background-color: white;
}
.testimonial .item i {
font-size: 60px;
color: #fff;
margin-bottom: 50px;
display: inline-block;
}
.testimonial .item .client-details {
padding-bottom: 30px;
}
.testimonial .item .client-details p {
font-size: 17px;
color: #fff;
font-weight: 200;
padding: 0 10%;
}
.testimonial .item .client-thumb img {
display: inline-block;
border-radius: 100%;
width: 120px;
height: auto;
margin-bottom: 20px;
}
/*=================================================================
Latest Posts
==================================================================*/
.blog {
padding-bottom: 60px;
padding-top: 80px;
background: #F6F6F6;
}
.posts {
padding-bottom: 40px;
}
.post-item {
background: #fff;
margin-bottom: 30px;
}
.post-item .content {
padding: 20px;
}
.post-item .content h3 a {
color: #000;
}
.post-item .content p {
color: #757575;
margin: 10px 0;
}
.post-item .content .btn-main {
padding: 12px 25px;
margin: 15px 0;
}
/* 8.2.1 Blog Details */
.blog-details h3 {
font-size: 30px;
color: #000;
margin-bottom: 10px;
}
/* 8.2.2 Post Content */
.post-content ul {
margin-bottom: 20px;
}
.post-content ul li {
color: #aaa;
}
.post-content ul li a {
color: #aaa;
}
.post-content p {
margin-bottom: 30px;
}
.post-content blockquote {
border-left: 2px solid #28ABE3;
padding: 40px 35px;
margin-bottom: 30px;
background: #eeeeee;
}
.post-content-share {
margin-bottom: 100px;
}
.post-content-share li a {
height: 45px;
width: 45px;
line-height: 45px;
border: 1px solid #ddd;
text-align: center;
background: #fff;
transition: .3s ease;
margin-right: 10px;
color: #000;
display: inline-block;
}
.post-content-share li a:hover {
background: #28ABE3;
border-color: #28ABE3;
color: #fff;
}
/* 8.2.3 Comment List */
.comment-list {
padding-left: 0;
margin-bottom: 70px;
}
.comment-list-item {
padding: 25px 0;
position: relative;
display: flex;
border-bottom: 1px solid #ddd;
}
.comment-list-item:last-child {
border: 0;
}
.comment-list-item-image {
margin-right: 20px;
}
.comment-list-item-content h5 {
color: #000;
margin-bottom: 5px;
}
.comment-list-item-content h6 {
color: #000;
margin-bottom: 10px;
}
.comment-list-item-content p {
margin-bottom: 5px;
}
.comment-list-item .comment-btn {
position: absolute;
top: 25px;
right: 0;
background: #fff;
padding: 10px 30px;
border: 1px solid #ddd;
text-transform: capitalize;
color: #000;
font-size: 15px;
}
@media (max-width: 575px) {
.comment-list-item .comment-btn {
position: unset;
margin-top: 15px;
display: inline-block;
}
}
.comment-list-item .comment-btn:hover {
background: #28ABE3;
color: #fff;
}
/* 8.2.4 Comment Form */
.comment-form {
margin-top: 40px;
}
.comment-form .form-control {
background-color: transparent;
border: 1px solid #dedede;
box-shadow: none;
height: 45px !important;
color: #0c0c0c;
height: 38px;
font-size: 14px;
border-radius: 0;
margin-bottom: 20px;
}
.comment-form textarea.form-control {
height: 200px !important;
}
.comment-form .btn-primary {
background: #28ABE3;
border-radius: 0;
padding: 10px 20px;
border: 0;
}
/* 8.2.5 Widget Style */
.widget {
margin-bottom: 30px;
}
.widget h2 {
font-size: 24px;
margin-bottom: 20px;
}
.widget-search {
position: relative;
}
.widget-search .form-control {
border: 1px solid #dedede;
border-radius: 0;
height: 50px;
}
.widget-search-btn {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 50px;
background: #28ABE3;
border: 0;
}
.widget-search-btn i {
color: #fff;
}
.widget-categories-list {
padding-left: 0px;
}
.widget-categories-list li {
border-bottom: 1px solid #ddd;
}
.widget-categories-list li:last-child {
border: 0;
}
.widget-categories-list li a {
display: block;
padding: 15px 0;
color: #000;
font-size: 15px;
transition: .3s ease;
}
.widget-categories-list li a i {
font-size: 10px;
margin-right: 10px;
}
.widget-categories-list li a:hover {
background: #28ABE3;
color: #fff;
padding-left: 20px;
}
.widget-post-list {
padding-left: 0;
}
.widget-post-list-item {
padding: 15px 0;
display: flex;
}
.widget-post-image {
margin-right: 10px;
height: 90px;
width: 130px;
overflow: hidden;
}
.widget-post-image img {
height: 90px;
width: auto;
}
.widget-post-content h5 {
font-size: 18px;
margin-bottom: 10px;
transition: .3s ease;
color: #000;
}
.widget-post-content h5:hover {
color: #28ABE3;
}
/*=================================================================
Single Blog Page
==================================================================*/
#blog-banner {
padding-bottom: 100px;
padding-top: 150px;
}
#blog-page {
margin: 0 0 40px;
}
.post-meta {
font-size: 13px;
margin: 20px 0 0;
padding: 0 20px 10px;
}
.post-meta a {
color: #28ABE3;
}
.post-meta > span {
color: #666;
border-right: 1px solid #dedede;
display: inline-block;
font-size: 13px;
margin: 10px 10px 0 0;
padding-right: 10px;
}
.post-meta > span:last-child {
border-right: 0;
}
.post-meta > span i {
margin-right: 5px;
}
.post-excerpt {
padding: 0 20px;
margin-bottom: 60px;
}
.post-excerpt h3 a {
color: #000;
}
.post-excerpt blockquote {
line-height: 22px;
margin: 20px 0;
font-size: 16px;
}
.single-blog {
background-color: #fff;
margin-bottom: 50px;
padding: 20px;
}
.blog-subtitle {
font-size: 15px;
padding-bottom: 10px;
border-bottom: 1px solid #dedede;
margin-bottom: 25px;
text-transform: uppercase;
}
.next-prev {
border-bottom: 1px solid #dedede;
border-top: 1px solid #dedede;
margin: 20px 0;
padding: 25px 0;
}
.next-prev a {
color: #000;
}
.next-prev a:hover {
color: #28ABE3;
}
.next-prev .prev-post i {
margin-right: 10px;
}
.next-prev .next-post i {
margin-left: 10px;
}
.social-profile ul li {
margin: 0 10px 0 0;
display: inline-block;
}
.social-profile ul li a {
color: #4e595f;
display: block;
font-size: 16px;
}
.social-profile ul li a i:hover {
color: #28ABE3;
}
.comments-section {
margin-top: 35px;
}
.author-about {
margin-top: 40px;
}
.post-author {
margin-right: 20px;
}
.post-author > img {
border: 1px solid #dedede;
max-width: 120px;
padding: 5px;
width: 100%;
}
.comment-list ul {
margin-top: 20px;
}
.comment-list ul li {
margin-bottom: 20px;
}
.comment-wrap {
border: 1px solid #dedede;
border-radius: 1px;
margin-left: 20px;
padding: 10px;
position: relative;
}
.comment-wrap .author-avatar {
margin-right: 10px;
}
.comment-wrap .media .media-heading {
font-size: 14px;
margin-bottom: 8px;
}
.comment-wrap .media .media-heading a {
color: #28ABE3;
font-size: 13px;
}
.comment-wrap .media .comment-meta {
font-size: 12px;
color: #888;
}
.comment-wrap .media p {
margin-top: 15px;
}
.comment-reply-form {
margin-top: 80px;
}
.comment-reply-form input, .comment-reply-form textarea {
height: 35px;
border-radius: 0;
box-shadow: none;
}
.comment-reply-form input:focus, .comment-reply-form textarea:focus {
box-shadow: none;
border: 1px solid #28ABE3;
}
.comment-reply-form textarea, .comment-reply-form .btn-main {
height: auto;
}
/*=================================================================
Footer section
==================================================================*/
.footer-bar {
background: #000;
color: #fff;
height: 88px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 40px;
font-size: 22px;
max-width: 1920px;
width: 100%;
box-sizing: border-box;
}
.footer-left {
display: flex;
align-items: center;
gap: 16px;
}
.footer-right a {
color: #fff;
text-decoration: none;
margin-left: 24px;
font-weight: 500;
}
.footer-right a:hover {
color: #28ABE3;
}
/* Mobile styles */
@media (max-width: 600px) {
.footer-bar {
flex-direction: column;
height: auto;
padding: 20px 10px;
font-size: 16px;
align-items: flex-start;
gap: 12px;
}
.footer-left {
flex-direction: column;
align-items: flex-start;
gap: 4px;
}
.footer-right {
width: 100%;
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 8px;
}
.footer-right a {
margin-left: 0;
margin-right: 16px;
}
}
.page-404 {
display: flex;
align-items: center;
height: 100vh;
}
.page-404 h1 {
font-size: 200px;
}
/*============================================================
For Small Desktop
==============================================================*/
@media (min-width: 700px) and (max-width: 1090px) {
.counters-item:before {
display: none;
}
}
@media (min-width: 980px) and (max-width: 1150px) {
/* parallax section */
.parallax-section {
background-position: center top !important;
}
/* about us */
.feature-desc h3 {
margin-top: 0;
}
/* our team */
.team-mate {
margin-bottom: 30px;
}
.mask ul {
top: 85px;
}
.mask ul li {
margin: 0 5px;
}
.team-mate > h4 {
margin-bottom: 10px;
}
.team-mate img {
margin: 0 auto;
}
.member-info ul li {
margin-right: 10px;
}
/* testimonial */
.client-info {
width: 55%;
}
/* blog page */
.tab-post-nav li a {
padding: 15px 8px;
}
/* single blog page */
.author-bio h5 {
margin-left: 70px;
}
}
/*============================================================
Tablet (Portrait) Design for a width of 768px
==============================================================*/
@media (min-width: 768px) and (max-width: 979px) {
.counters-item:before {
display: none;
}
/* parallax section */
.parallax-section {
background-position: center top !important;
}
/* navigation */
.navbar-inverse .navbar-nav li a {
padding: 20px 10px;
}
/* about us */
.wrap-about {
margin: 0 0 75px;
}
.about-content {
margin: 0 auto;
width: 60%;
}
/* fun facts */
#counter {
padding-bottom: 50px;
}
.counters-item {
margin-bottom: 30px;
}
/* our team */
.team-mate {
margin: 0 auto 30px;
width: 280px;
}
/* our skills */
.skill-chart {
margin: 0 auto 40px;
width: 300px;
}
.skill-chart {
margin: 0 auto 40px;
width: 90%;
}
.skill-chart > h3 {
margin: 15px 0;
}
/* pricing table */
.pricing {
margin: 0 auto 30px;
width: 300px;
}
/* testimonial */
.client-info {
width: 75%;
}
/* latest posts */
.note {
margin-bottom: 30px;
}
/* blog page */
.tab-post-nav li a {
padding: 10px;
}
/* singla blog page */
.author-social {
margin-left: 0;
}
}
/*============================================================
Mobile (Portrait) Design for a width of 320px
==============================================================*/
@media only screen and (max-width: 767px) {
.counters-item:before {
display: none;
}
.clients-logo-slider {
text-align: center;
}
/* parallax section */
.parallax-section {
background-position: center top !important;
}
/* h1 font size home slider */
h1 {
font-size: 30px;
}
.wrap-about {
margin: 0 auto 80px;
width: 85%;
}
.feature-desc a {
margin: 5px 5px 5px 0;
}
/* fun facts */
/* services */
#services .title {
padding-bottom: 60px;
}
/* our skills */
.skill-chart {
margin: 0 auto 40px;
width: 280px;
}
/* our team */
.team-mate {
margin: 0 auto 31px;
width: 280px;
}
.team-mate img {
margin: 0 auto;
}
.member-info ul {
text-align: center;
margin-bottom: 10px;
}
/* pricing table */
.pricing {
margin: 0 auto 20px;
width: 280px;
}
/* portfolio */
.portfolio-filter ul li a {
margin: 0 10px 10px 0;
padding: 5px 10px;
}
/* testimonials */
.sub-title h3 {
font-size: 18px;
}
.client-info {
width: 100%;
}
/* latest posts */
.note {
margin-bottom: 30px;
}
.note .excerpt {
padding: 0 20px 20px;
}
.all-post {
margin: 20px 0 30px;
}
/* contact */
.contact-info {
margin: 0 0 30px;
}
#map-canvas {
height: 250px;
}
/* footer */
.social-icon ul li,
.social-icon ul li:first-child {
margin: 15px;
}
.social-icon ul li a {
width: 50px;
height: 50px;
}
.social-icon ul li a i {
font-size: 24px;
line-height: 50px;
}
.blog-title h1 {
font-size: 28px;
}
/* blog page */
#blog-page {
margin: 0;
}
#blog-posts {
margin: 0 0 40px;
}
.post-excerpt h3 {
font-size: 20px;
}
.post-pagination ul li {
margin: 0 10px 10px 0;
}
.tab-post-nav li a {
padding: 8px 5px;
}
/* single blog page */
.author-social {
margin-left: 0;
}
.author-avatar {
margin-right: 10px;
}
}
/*============================================================
Mobile (Landscape) Design for a width of 480px
==============================================================*/
@media only screen and (min-width: 480px) and (max-width: 767px) {
.title h2 {
font-size: 32px;
}
.counter .counter-title h2 {
font-size: 35px;
}
/* about us */
.wrap-about {
margin: 0 auto 75px;
width: 70%;
}
/* our team */
.team-mate {
margin: 0 auto 30px;
width: 280px;
}
.team-mate img {
margin: 0 auto;
}
/* portfolio */
.og-grid li {
width: 245px;
}
/* skills */
.skill-chart {
margin: 0 auto 40px;
width: 300px;
}
/* pricing table */
.pricing {
margin: 0 auto 30px;
width: 350px;
}
/* testimonials */
.client-info {
width: 74%;
}
/* latest posts */
.note {
margin: 0 auto 30px;
width: 75%;
}
/* contact */
.contact-info {
width: 100%;
}
/* blog page */
.tab-post-nav li a {
padding: 10px 15px;
}
}
/** Search form with icon on the right **/
.search-form {
display: flex;
align-items: center;
margin-left: 45px; /* Push to the right */
}
.search-form input {
padding: 6px 15px 6px 10px; /* Extra right padding for icon */
border: none;
border-radius: 4px;
background: url('https://cdn-icons-png.flaticon.com/512/622/622669.png') no-repeat right 10px center;
background-color: rgb(245, 245, 245);
background-size: 18px;
/* Wide enough for the longest placeholder "Search in Best Ager Female"
(task 114 category-label placeholders) + the search icon. Mobile
(<992px) overrides this to width:100% so it just stretches. */
width: 280px;
}
.search-form input:focus {
outline: none; /* Removes the blue outline */
border-color: #333; /* Optional: set your own border color */
box-shadow: none; /* Removes any glow effect */
}
/**
Overall style
*/
.magic-wrapper {
width: 100%; /* Full width on mobile/tablets */
max-width: 1920px; /* The limit you requested */
margin: 0 auto; /* The "Magic" that centers the whole site */
position: relative;
background: #fff; /* Ensures your page background stays solid */
display: flex;
flex-direction: column;
min-height: 100vh; /* Keeps the footer at the bottom on short pages */
}
/** Application Form **/
/* Constrain the SVG checkmark */
.progress-dot svg {
width: 18px; /* Small enough to fit in the dot */
height: 18px;
display: block;
}
/* Ensure the dot itself stays a circle */
.progress-dot {
width: 35px;
height: 35px;
border-radius: 50%;
background: #e9ecef;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 8px;
flex-shrink: 0; /* Prevents the circle from squishing */
}
.step-progress {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 2rem;
}
.progress-item {
text-align: center;
flex: 1;
}
.progress-item.active .progress-dot {
background: #007bff; /* Adjust to match Bingo theme primary color */
color: white;
}
.progress-item.done .progress-dot {
background: #28a745;
color: white;
}
.progress-line {
flex: 1;
height: 2px;
background: #e9ecef;
margin-bottom: 25px; /* Aligns line with dots */
}
.progress-line.done {
background: #28a745;
}
/* Highlights the input red if validation fails */
.request-updated .form-control.is-invalid,
[data-validate-for].text-danger {
border-color: #dc3545;
color: #dc3545;
font-size: 0.85rem;
margin-top: 5px;
display: block;
}
/* Force display when Winter CMS injects text into the validation span */
[data-validate-for]:not(:empty) {
display: block;
color: #dc3545; /* Bootstrap Red */
font-size: 0.875rem;
margin-top: 0.25rem;
}
/* Optional: Highlight the input border red */
.has-error input {
border-color: #dc3545;
}
/* Only show the vertical line on Desktop */
@media (min-width: 992px) {
.border-start-lg {
border-left: 1px solid #dee2e6 !important;
}
}
/* Ensure form controls look good on touch screens */
@media (max-width: 768px) {
.btn-lg {
width: 100%; /* Full width button on mobile */
}
.card-body {
padding: 1.5rem !important;
}
}
/* Fix for the hidden error summary */
[data-validate-error]:not(.d-none) {
display: block !important;
}
/* Hide the actual radio circle */
.btn-check {
position: absolute;
clip: rect(0,0,0,0);
pointer-events: none;
}
/* Ensure the button labels have a consistent width */
.skills-toggle .btn {
width: 60px;
border-color: #dee2e6;
color: #6c757d;
}
/* Active state styling */
.btn-check:checked + .btn-outline-primary {
background-color: #007bff;
color: #fff;
border-color: #007bff;
}
.btn-check:checked + .btn-outline-secondary {
background-color: #6c757d;
color: #fff;
border-color: #6c757d;
}
/**Styles for the inline editor section (static content **/
/* This targets the content coming from the editor */
.cms-rich-content {
color: #000000;
font-family: 'Rubik', sans-serif;
font-size: 20px;
line-height: 1.4;
}
/* Force the editor's paragraphs to look like simple line breaks */
.cms-rich-content p {
margin: 0 0 4px 0; /* Minimal gap between lines */
padding: 0;
}
/* Reset any bold tags the editor might add */
.cms-rich-content b, .cms-rich-content strong {
font-weight: bold;
display: inline-block;
margin-top: 10px; /* Gives "Office Times" and "Landesgericht" a little room */
}
/* First item shouldn't have top margin */
.cms-rich-content b:first-child {
margin-top: 0;
}
/*# sourceMappingURL=style.css.map */
/* ── GDPR Cookie Banner – Magic Models color override ── */
.gdpr-bannerwide {
--color-background: #f0f0f0;
--color-border: #cccccc;
--color-accent: #555555;
--toggle-size: 20px;
font-family: Rubik, sans-serif;
/* Fixed full-screen overlay */
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.55);
overflow-y: auto;
}
/* Prevent page scroll while banner is open */
body:has(.gdpr-bannerwide) {
overflow: hidden;
}
.gdpr-bannerwide__wrapper {
background: #f5f5f5;
border-radius: 0;
border-top: 4px solid #ffb900;
box-shadow: 0 8px 32px rgba(0,0,0,0.2);
display: grid;
gap: 1.25rem;
margin: auto;
max-height: 90vh;
max-width: 760px;
overflow-y: auto;
padding: 2rem 1.5rem;
position: relative;
}
.gdpr-bannerwide__title {
color: #131313;
}
.gdpr-bannerwide__opt-in button {
background-color: #ffb900;
border-color: #ffb900;
border-radius: 0;
color: #000;
font-weight: 700;
padding: .5rem 1.5rem;
}
.gdpr-bannerwide__opt-in button:hover {
background-color: #e6a700;
border-color: #e6a700;
}
.gdpr-bannerwide__opt-out button {
background-color: transparent;
border-color: #aaaaaa;
border-radius: 0;
color: #555;
padding: .5rem 1.25rem;
}
.gdpr-bannerwide__opt-out button:hover {
border-color: #555;
}
.gdpr-bannerwide__opt-selection button {
background-color: transparent;
border-color: #aaaaaa;
border-radius: 0;
color: #555;
padding: .5rem 1.25rem;
}
.gdpr-bannerwide__opt-selection button:hover {
border-color: #555;
}
/* ═══════════════════════════════════════════════════════════════════════
TWO-TIER NAVIGATION (nav.htm)
Tier 1: existing .navigation rules handle the primary navbar.
Tier 2: absolutely positioned just below the header — no height added,
right-aligned to mirror the nav links, transparent background.
═══════════════════════════════════════════════════════════════════════ */
/* ── Tier 1: active-link underline ──────────────────────────────────── */
.navigation .navbar-light .navbar-nav .nav-item.active > .nav-link {
border-bottom: 2px solid #28ABE3;
padding-bottom: 6px;
}
/* ── Tier 2: ribbon — floats directly below the header ──────────────── */
/*
position: absolute; top: 100% puts the ribbon flush under the header's
bottom edge. The header height is unchanged (still logo-driven, ~80px).
The ribbon overlays the top of the page content (the hero image on
model pages), which is intentional — no background strip, no reflow.
*/
.nav-tier2 {
position: absolute;
top: 65%;
left: 0;
right: 0;
z-index: 1000;
background: transparent;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
/* Visible: model pages and extras pages (server-side class). Both ribbons
share the .nav-tier2 base styles but each variant (--models / --extras)
gates its own visibility, so the bars never co-show. */
.nav-tier2--models.is-visible,
.nav-tier2--extras.is-visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* Visible: hovering the matching Tier-1 entry, or hovering the ribbon itself */
.navigation:has(.nav-item-models:hover) .nav-tier2--models,
.navigation:has(.nav-tier2--models:hover) .nav-tier2--models,
.navigation:has(.nav-item-extras:hover) .nav-tier2--extras,
.navigation:has(.nav-tier2--extras:hover) .nav-tier2--extras {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* Mutual exclusion: when actively interacting with one side, hide the other
ribbon — overrides .is-visible from the server-side class. Without this,
landing on /modellist (Models ribbon is .is-visible) and hovering Extras
shows BOTH ribbons stacked. */
.navigation:has(.nav-item-extras:hover) .nav-tier2--models,
.navigation:has(.nav-tier2--extras:hover) .nav-tier2--models,
.navigation:has(.nav-item-models:hover) .nav-tier2--extras,
.navigation:has(.nav-tier2--models:hover) .nav-tier2--extras {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
/* ── Tier 2: pill list — right-aligned to mirror .navbar-nav.ml-auto ── */
.category-pills {
display: flex;
flex-wrap: nowrap;
justify-content: flex-end; /* right-align: mirrors ml-auto on nav links */
list-style: none;
margin: 0;
padding: 6px 0 4px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.category-pills::-webkit-scrollbar { display: none; }
/* ── Tier 2: individual pill ─────────────────────────────────────────── */
.category-pill a {
display: block;
color: rgba(255, 255, 255, 0.75);
font-size: 12px;
font-weight: 500;
letter-spacing: 1px;
text-transform: uppercase;
text-decoration: none;
padding: 4px 14px;
border-bottom: 1px solid transparent;
white-space: nowrap;
transition: color 0.2s ease, border-color 0.2s ease;
}
.category-pill a:hover {
color: #fff;
border-bottom-color: rgba(255, 255, 255, 0.4);
text-decoration: none;
}
/* ── Tier 2: active pill — double highlight (Models in T1 + pill in T2) */
.category-pill.active a,
.category-pill.active a:hover {
color: #28ABE3;
border-bottom-color: #28ABE3;
text-shadow: none;
}
/* ── Mobile: hide the floating tier-2 ribbons entirely ───────────────────
Below the lg breakpoint the hover ribbons are touch-dead "monster
submenus" (discovery: mobile-readiness). The categories are instead
folded into the hamburger collapse (.nav-subcats, below). Desktop
(>=992px) keeps the hover ribbons unchanged. */
@media (max-width: 991.98px) {
.nav-tier2--models,
.nav-tier2--extras {
display: none !important;
}
}
/* ── Mobile category sub-menus inside the hamburger collapse ──────────────
.nav-subcats wraps an inset of .category-pill links under the
Models / Extras tier-1 items. d-lg-none in markup hides them on desktop.
The .category-pill base styles (light text, uppercase) suit the dark
collapse background; here we override layout from the ribbon's
horizontal scroller to a stacked, indented, touch-comfortable list. */
.nav-subcats {
text-align: left;
}
.nav-subcats-list {
list-style: none;
margin: 0 0 4px;
padding: 0;
}
.nav-subcats-list .category-pill {
display: block;
}
.nav-subcats-list .category-pill a {
display: block;
padding: 10px 16px 10px 32px; /* inset left so it reads as a sub-item; tall enough to tap */
font-size: 12px;
letter-spacing: 0.7px;
text-shadow: none;
border-bottom: none; /* the ribbon's underline-on-active reads oddly stacked */
}
.nav-subcats-list .category-pill.active a,
.nav-subcats-list .category-pill.active a:hover {
border-bottom: none;
}
/* ── Mobile caret toggle next to Models / Extras (collapse trigger) ───────
d-lg-none in markup → desktop never shows it (the hover ribbon handles
categories there). Small inline chevron with a tap-comfortable hit area;
tapping expands/collapses the category .collapse without navigating.
Colour inherits the mobile menu text; no underline. */
.nav-cat-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
min-height: 40px;
margin-left: 2px;
padding: 0;
background: none;
border: 0;
color: inherit;
line-height: 1;
cursor: pointer;
text-decoration: none;
vertical-align: middle;
}
.nav-cat-toggle:hover,
.nav-cat-toggle:focus {
color: inherit;
text-decoration: none;
outline: none;
}
.nav-cat-toggle .chevron {
display: inline-block;
font-size: 12px;
transition: transform 0.2s ease;
}
.nav-cat-toggle[aria-expanded="true"] .chevron {
transform: rotate(180deg);
}
/* ─────────────────────────────────────────────────────────────────────────
Listing Hero — task 10
3 images rotate clockwise between three fixed slots via state-class
cycling on the parent (.state-1 / .state-2 / .state-3). Slots are
defined as CSS custom properties on the .listing-hero container; each
state maps each image to one of the three slot definitions.
JS (script.js) just toggles the state class every N ms; CSS transitions
on top/left/width/height handle the visible motion.
Slot proportions match the design mockup:
- big-left: 74.8% wide × 100% tall
- small-top-right: 25.2% wide × ~50% tall (top half of right column)
- small-bottom-: 25.2% wide × ~50% tall (bottom half)
- 16px gap between right-column items
────────────────────────────────────────────────────────────────────── */
.listing-hero {
position: relative;
width: 100%;
max-width: 1895px;
margin: 20px auto;
aspect-ratio: 1895 / 870;
overflow: hidden;
/* Slot definitions: each is `top left width height`. Used by the
state-* rules below to position images. Changing these adjusts
the whole layout without touching the state rules. */
--big-top: 0;
--big-left: 0;
--big-width: 74.8%;
--big-height: 100%;
--top-top: 0;
--top-left: calc(74.8% + 16px);
--top-width: calc(25.2% - 16px);
--top-height: calc(50% - 8px);
--bot-top: calc(50% + 8px);
--bot-left: calc(74.8% + 16px);
--bot-width: calc(25.2% - 16px);
--bot-height: calc(50% - 8px);
}
.listing-hero-image {
position: absolute;
object-fit: cover;
border: 0;
display: block;
}
.listing-hero-placeholder {
background: #eaeaea;
}
/* Static placement since task 15 — the original task-10 design cycled
images through three slots via .state-N class rotation + transitions.
Reverted as visually artificial; images now sit in fixed slots.
The slot custom properties (--big-*, --top-*, --bot-*) defined above
are still the single source of truth for slot geometry — change them
to re-tune the layout. */
.listing-hero-image-1 { top: var(--big-top); left: var(--big-left); width: var(--big-width); height: var(--big-height); }
.listing-hero-image-2 { top: var(--top-top); left: var(--top-left); width: var(--top-width); height: var(--top-height); }
.listing-hero-image-3 { top: var(--bot-top); left: var(--bot-left); width: var(--bot-width); height: var(--bot-height); }
/* Overlay: yellow badge + dark text box, positioned over the big-left
image area. Coordinates from the task 07 hero-tile precedent. */
.listing-hero-overlay {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 2;
}
.listing-hero-badge {
position: absolute;
background-color: #ffb900;
color: #000;
padding: 0 30px;
height: 90px;
display: inline-flex;
align-items: center;
top: 60%;
left: 50px;
font-size: 44px;
font-weight: 800;
letter-spacing: -0.19px;
text-transform: uppercase;
white-space: nowrap;
pointer-events: auto;
}
.listing-hero-text {
position: absolute;
background-color: #000;
color: #fff;
padding: 24px 30px;
width: 558px;
max-width: 60%;
top: calc(60% + 90px);
left: 50px;
font-size: 50px;
font-weight: 800;
letter-spacing: -0.19px;
text-transform: uppercase;
line-height: 1.05;
word-wrap: break-word;
pointer-events: auto;
}
/* Mobile: stack vertically, disable absolute positioning + transitions */
@media (max-width: 768px) {
.listing-hero {
aspect-ratio: auto;
height: auto;
overflow: visible;
}
.listing-hero-image {
position: static;
width: 100% !important;
height: auto !important;
margin-bottom: 12px;
transition: none;
aspect-ratio: 4 / 3;
object-fit: cover;
}
.listing-hero-overlay {
position: static;
margin-top: -12px;
}
.listing-hero-badge {
position: static;
display: inline-flex;
font-size: 22px;
height: auto;
padding: 8px 18px;
margin-bottom: 8px;
}
.listing-hero-text {
position: static;
width: 100%;
max-width: 100%;
font-size: 22px;
padding: 14px 18px;
}
}
/* Drehanfrage response page styles were inlined into
themes/magic/pages/drehanfrage-response.htm (task 20 polish pass) so the
page picks up changes without a style.css cache flush — the theme ships
style.css raw with no cache-busting query param. */
/* ──────────────────────────────────────────────────────────────────────
Mobile header: logo | search | hamburger on ONE row (task 98).
Below the navbar-expand-lg breakpoint (<992px) the brand, search-form
and toggler used to wrap (logo on line 1, search+toggler on line 2).
Here we keep the three on a single tidy row, with search flexing to
fill the middle, while the collapse menu (#nav-main-links) still drops
onto its own line below.
NOTE on flex-wrap: the Bootstrap-4 .navbar is `display:flex; flex-wrap:wrap`
and the .navbar-collapse carries `flex-basis:100%`. We deliberately KEEP
flex-wrap:wrap on the navbar so the collapse can wrap to its own line
when open — setting nowrap on the navbar would force the 100%-basis
collapse to shrink onto the top row instead of dropping below. Instead
we guarantee the one-line top row by sizing the three children so they
fit within 100% (small logo + flexing search + fixed toggler), and we
pin the collapse to width:100% / flex-basis:100% so it always breaks to
the next line. Net effect = nowrap behaviour for the top row, but the
menu still drops below. Desktop (≥992px) is untouched.
────────────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
/* The flex container of brand + search + toggler + collapse.
Keep wrap so the collapse drops below; center the top row. */
.navigation .navbar {
flex-wrap: wrap;
align-items: center;
padding-left: 12px;
padding-right: 12px;
}
/* Shrink the logo to a sensible header height (aspect ratio preserved). */
.navigation .logo-default {
height: 48px;
width: auto;
}
/* Logo doesn't shrink, sits left. */
.navigation .navbar-brand.logo {
flex: 0 0 auto;
}
/* Search fills the middle between logo and hamburger. */
.navigation .search-form {
margin-left: 12px;
margin-right: 12px;
flex: 1 1 0;
min-width: 0;
}
.navigation .search-form input {
width: 100%;
}
/* Hamburger doesn't shrink, sits right. */
.navigation .navbar-toggler {
flex: 0 0 auto;
}
/* Guarantee the collapse menu always wraps to its own line below the
top row (not pulled up next to the toggler). */
.navigation .navbar-collapse {
flex-basis: 100%;
width: 100%;
}
}
/* =========================================================================
Apply-form submit spinner (task 104)
"Bewerbung wird übermittelt …" busy state on #submit-btn during onSubmit.
Self-contained: must render WITHOUT Snowboard/wn-loading CSS (not loaded
on the frontend). White-bordered ring stays neutral on the green
btn-success button. The .apply-submitting span is injected by script.js.
========================================================================= */
@keyframes mm-spin {
to { transform: rotate(360deg); }
}
.apply-submitting {
display: inline-block;
width: 1em;
height: 1em;
margin-right: 0.5em;
vertical-align: -0.125em;
border: 2px solid rgba(255, 255, 255, 0.4);
border-top-color: #fff;
border-radius: 50%;
animation: mm-spin 0.7s linear infinite;
}