/* ========================================================================== COLORS VR Grey 4 #3e4252 Bu Bgrey #656563 VR Deep Purple #990161 VR Purple light #a93779 FONTS vonRoll-Icons = RheinmetallIcons Roboto Condensed 400 - Buttons Rajdhani 400 - Heidlines - Text 16.07.2025 - Rebranding Shield Tech ralf@ralfspreng.de COLORS Shield Tech Font Dunkelblau: 465191 , over 606aa1 / 878eb7 ========================================================================== */ :root { /* production */ --displayON: block; --displayOFF: none; --opacityOFF: 0; /* var(--opacityOFF); */ } [data-theme="develop"] { --displayON: none; --displayOFF: block; --opacityOFF: 1; /* var(--opacityOFF); */ } /* ========================================================================== CONTAINER ========================================================================== */ .container { position: relative; overflow: hidden; padding-top: 56.25%; } .container .content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } /* ========================================================================== ANIMATION ========================================================================== */ @keyframes fadeInUp { 0% { transform: translateY(0%); opacity: 0; } 100% { transform: translateY(0%); opacity: 1; } } .fadeInUp-animation { animation: 2.0s fadeInUp; } /* ========================================================================== Visuals ========================================================================== */ #sensors, #ecu, #motor, #f_cell, #h_tank { display: none; pointer-events: none; z-index: 100; } /* ========================================================================== Fullscreen Button ========================================================================== */ #fs_button { position: absolute; right: 0; top: 0; margin-top: 10px; margin-right: 10px; width: 40px; height: 40px; display: block; } #fs_icon { width: 40px; height: 40px; } /* ========================================================================== Loader ========================================================================== */ #loader, #keyVisual, #webGLiframe, .Visual { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; border: 0; z-index: 10; } #loader { display: none; background-color: rgba(255, 255, 255, 0.5); } .loaderImage { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 11; } .loaderAnim { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; max-width: 1920px; z-index: 9999; background: url(../images/loading6.gif) center no-repeat; background-size: 20% auto; } #myProgress { position: absolute; left: 0px; top: 0px; width: 100%; background-color: grey; opacity: 0.7; z-index: 12; } #myBar { width: 1%; height: 20px; background-color: #A6CFDF; font-family: "Rajdhani", sans-serif; font-size: 1vw; text-align: center; /* To center it horizontally (if you want) */ line-height: 20px; /* To center it vertically */ color: white; /*animation-duration: 3000ms; animation-name: progressBar;*/ } .fade-in { display: block !important; animation: fadeIn ease 1s; -webkit-animation: fadeIn ease 1s; -moz-animation: fadeIn ease 1s; -o-animation: fadeIn ease 1s; -ms-animation: fadeIn ease 1s; } @keyframes fadeIn { 0% {opacity:0;} 100% {opacity:1;} } .fade-out { animation: fadeOUT ease 1s; -webkit-animation: fadeOUT ease 1s; -moz-animation: fadeOUT ease 1s; -o-animation: fadeOUT ease 1s; -ms-animation: fadeOUT ease 1s; } @keyframes fadeOUT { 0% {opacity:1;} 100% {opacity:0;} } /* ========================================================================== KeyVisual Buttons ========================================================================== */ .startButtonContainer{ position: absolute; width: 15.2%; height: auto; font-family: "Rajdhani", sans-serif; font-weight: 600; font-size: 2.3vw; display: var(--displayON); /*background-color: rgba(255, 255, 128, 0.5);*/ } /* .startButtons{ position: absolute; overflow: hidden; /*width: 4.2%; height: 1.5%;*/ /* font-family: "Rajdhani", sans-serif; font-weight: 400; font-size: 0.9vw; margin-top: 17%; padding: 0.6em 0.9em; padding-right: 1.4em; transition: 0.5s; cursor: pointer; color: #FFFFFF; background-color: #990161; z-index: 24; } .startButtons:before, .txtButtons:before { /* add arrow display: inline-block; font-family: "Vonroll icons"; content: ''; padding-right: 0.8em; } */ #to_1{ top: 13.8%; /* linie +3%*/ left: 6.6%; display: none; /* 16.07.2025 */ } #to_2{ top: 79.1%; left: 6.6%; } #to_3{ top: 69.6%; right: 15.2%; } #to_4{ top: 5.9%; right: 6.4%; display: none; /* 16.07.2025 */ } .right{ float: right; right: 0px; } .inactive { cursor: default; opacity: 0.5; background-color: #3e4252; pointer-events: none; } /* * -- SkewButton -- */ .skewButton { position: absolute; width: 33%; height: 2.4vw; margin-top: 2.7vw; padding-left: 3vw; font-family: "Rajdhani", sans-serif; font-weight: 500; font-size: 1.2vw; color: #FFF; overflow: hidden; border-radius: 10vw 0 0 10vw; z-index: 50; display: flex; align-items: center; cursor: pointer; } .skewButton img{ margin-right: 50px; position:absolute; top: 10%; left: 0.3vw; width: auto; height: 80%; margin-right: 10px; } .skewButton img:hover{ opacity: 0.5; } .skewButton:before { content: ''; position: absolute; top: 0; left: 0px; width: 100%; height: 100%; transform: translateX(-5%) skew(-15deg); background-color: #012d51; z-index: -1; } .skewButton:hover::before { background-color: #8096a8; } /* Button V1 */ .skewed-button-start { border: 0; -webkit-transition: all 250ms; transition: all 250ms; } .skewed-button-start:after { z-index: -1; content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: skewX(-51deg) translate(-124%) scale(1.5, 1); -webkit-transition: all 250ms; transition: all 250ms; background-color: #a93779; } .skewed-button-start:hover:after, .on:after, .onTXT:after { transform: skewX(-51deg) translate(-25%) scale(1.5, 1); } /* ========================================================================== Navi ========================================================================== */ /* 21.07.2025 update nur noch Mica */ /* #poix in ./content/v3D.css zeile 61! */ #bu_12_motor, #bu_17_batt, #bu_18_batt { display: none; } /* 11.04.2025 */ .navi { position: absolute; top: 0; right: 0; width: 20.8%; overflow: hidden; padding-top: 56.25%; margin-top: 2.5%; margin-right: 2.1%; /*border: 3px solid blue;*/ color: #fff; -webkit-transition: all 350ms cubic-bezier(0.6, 0.05, 0.28, 0.91); transition: all 350ms cubic-bezier(0.6, 0.05, 0.28, 0.91); display: var(--displayOFF); /* activate in Verge 3D */ z-index: 25; } .navi-links { position: absolute; left: 6.5%; top: 0%; width: 14%; height: 4.0%; z-index: 900; } .navi-links-fixed { position: fixed; left: 6.5%; top: 0%; width: 14%; height: 4.0%; z-index: 999; } .bg-fixed { position: fixed; left: 30%; top: 28vw; width: 40%; height: auto; opacity: 0.2; pointer-events: none; z-index: 999; } .responsive { width: 100%; height: auto; } #container_navi_battery, #container_navi_ecu, #container_navi_motor, #container_navi_sensors, #container_navi_f_cell, #container_navi_h_tank { pointer-events: all; display: var(--displayOFF); /* activate in Verge 3D */ } #container_navi_battery.active, #container_navi_ecu.active, #container_navi_motor.active, #container_navi_sensors.active, #container_navi_f_cell.active, #container_navi_h_tank.active { display: block !important; opacity: 0.9; } #container_navi_visuals { pointer-events: all; display: block; } .block { display: block !important; } /*Navi-Icons alte Version -> deaktiviert */ #icons { position: absolute; top: 0; width: 100%; height: 7%; /*border: 3px solid green;*/ justify-content: space-between; align-content: space-between; display: flex; flex-wrap: wrap; z-index: 25; } .iconsVisuals { position: absolute; top: 0; width: 100%; height: 7%; /*border: 3px solid green;*/ justify-content: space-between; align-content: space-between; text-align: right; flex-wrap: wrap; z-index: 25; } #iconsVisuals, .icons { position: relative; width: 18%; opacity: 0.8; cursor: pointer; } /*.icons:hover { opacity: 0.4; }*/ #buttons_batt, #buttons_ecu, #buttons_motor { position: absolute; top: 13.4%; height: 50%; width: 100%; } /* #buttons .item, #buttons_batt .item, #buttons_ecu .item, #buttons_motor .item{ position: relative; cursor: pointer; background-color: #3e4252; font-family: "Roboto Condensed", sans-serif; font-weight: 400; font-size: 0.9vw; padding: 0.5em 0.9em; margin-bottom: 3.1em; z-index: 22; } */ /* Button V1 */ /* .skewed-button { background: transparent; border: 0; -webkit-transition: all 250ms; transition: all 250ms; } .skewed-button:after { z-index: -1; content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: skewX(-51deg) translate(-124%) scale(1.5, 1); -webkit-transition: all 250ms; transition: all 250ms; background-color: #a93779; } .skewed-button:hover:after, .on:after { transform: skewX(-51deg) translate(-25%) scale(1.5, 1); } */ .skewed-button { position: relative; width: 100%; height: 2.5vw; margin-bottom: 3vw; padding-left: 3vw; font-family: "Rajdhani", sans-serif; font-weight: 500; font-size: 1.2vw; color: #FFF; overflow: hidden; border-radius: 10vw 0 0 10vw; z-index: 50; display: flex; align-items: center; cursor: pointer; } .skewed-button-klein { position: relative; width: 88%; height: 2.0vw; margin-bottom: 2vw; margin-top: -1vw; padding-left: 3vw; font-family: "Rajdhani", sans-serif; font-weight: 500; font-size: 0.9vw; color: #FFF; overflow: hidden; border-radius: 10vw 0 0 10vw; z-index: 50; display: flex; align-items: center; cursor: pointer; } .skewed-button img, .skewed-button-klein img{ margin-right: 50px; position:absolute; top: 10%; left: 0.25vw; width: auto; height: 80%; margin-right: 10px; } .skewed-button:before, .skewed-button-klein:before { content: ''; position: absolute; top: 0; left: 0px; width: 100%; height: 100%; transform: translateX(-15%) skew(-15deg); background-color: #012d51; z-index: -1; } .skewed-button:hover::before, .skewed-button.on::before, .skewed-button-klein:hover::before, .skewed-button-klein.on::before { background-color: #8096a8; } #bu_18_1 { display: none; } /* #menue { position:absolute; left: 3%; top: 2%; width: 8%; height: 4.0%; opacity: 0; transition: opacity 1s; display: block; z-index: 999; background-color: aqua; } #back { top: 0%; left: 0%; width: 100%; height: 100%; transition: all 0.3s; z-index: 100; background-color:blueviolet; } */ /* ========================================================================== Textboxen ========================================================================== */ #container_Infobox_battery, #container_Infobox_sensors, #container_Infobox_ecu, #container_Infobox_motor, #container_Infobox_h_tank, #container_Infobox_f_cell { /*border: 2px solid red;*/ position: absolute; left: 6.6%; width: 22%; /*17.3%;*/ overflow: visible; padding-top: 56.25%; color: #000; -webkit-transition: all 350ms cubic-bezier(0.6, 0.05, 0.28, 0.91); transition: all 350ms cubic-bezier(0.6, 0.05, 0.28, 0.91); display: var(--displayOFF); z-index: 25; pointer-events: none; } #container_Infobox_battery.active, #container_Infobox_sensors.active, #container_Infobox_ecu.active, #container_Infobox_motor.active, #container_Infobox_h_tank.active, #container_Infobox_f_cell.active { display: block !important; } .txtBox { position: relative; margin-top: 7.0em; padding-top: 1.3em; padding-left: 1.3em; height: auto; width: 93%; font-family: "Rajdhani", sans-serif; font-weight: 500; font-size: 1.2vw; /*padding: 0.25em 0.8em;*/ /*border: 2px solid green;*/ background-color: rgba(255, 255, 255, 0.8); color: #000; opacity: 0.0; } .txtBox-2 { position: relative; padding-top: 1.3em; padding-left: 1.3em; height: auto; width: 93%; font-family: "Rajdhani", sans-serif; font-weight: 400; font-size: 1.0vw; background-color: rgba(255, 255, 255, 0.8); color: #000; opacity: 1; padding-bottom: 0.2em; } .abstand-unten { margin-bottom: 1.3em; } .txtBoxInfobox { position: absolute; top: 0px; margin-top: 3.0em; height: 42%; width: 100%; font-family: "Rajdhani", sans-serif; font-weight: 400; font-size: 1.2vw; will-change: opacity; display: block; color: #000; -webkit-transition: opacity ease 500ms; transition: opacity ease 500ms; opacity: 0.9; pointer-events: all; } hr { /*background: #465191; */ background: #E3324A; background: linear-gradient(90deg,rgba(227, 50, 74, 1) 0%, rgba(1, 45, 81, 1) 100%); width: 93%; margin-left: 0; height: 0.12em; border: none; } hr.oversize { width: 112%; } /* Igel-Lines from headline to Images */ hr.line-h2 { transform:translate(120.5%, -0%) rotate(30deg) scaleX(1.2) ; transform-origin: top left; margin: 0; } hr.line-f { transform:translate(120.5%, 0%) rotate(30deg) scaleX(0.65) ; transform-origin: top left; margin: 0; } hr.line-sensor{ transform:translate(120.5%, 0%) rotate(22deg) scaleX(2.1) ; transform-origin: top left; margin: 0; } #hr_11_ende, #hr_11_ecu_ende, #hr_11_motor_ende, #hr_11_1_ende, #hr_11_2_ende, #hr_11_3_ende, #hr_12_ende, #hr_12_motor_ende, #hr_13_ende, #hr_14_ende, #hr_15_ende, #hr_16_ende, #hr_17_ende, #hr_18_ende { position: relative; left: 111.4%; margin-top: -3.8%; /*-4.5%;*/ background: #012d51; height: 0.15em; width: 0.15em; display: block; } #hr_11_sensor_ende, #hr_11_f_cell_ende, #hr_11_h_tank_ende { position: relative; margin-top: -4.5%; height: 0.15em; display: block; } #hr_11_1_ende, #hr_11_2_ende, #hr_11_3_ende { margin-top: -3.1%; } .pinkBox { width: 92%; height: auto; margin-top: 1.2em; margin-bottom: 1.5em; color: #fff; background-color: #012d51; } .pinkBox p{ hyphens: auto; -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; /* legacy properties */ -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 3; /* current proposal */ -moz-hyphenate-limit-chars: 6 4 3; /* not yet supported */ -webkit-hyphenate-limit-chars: 6 4 3; /* not yet supported */ -ms-hyphenate-limit-chars: 6 4 3; hyphenate-limit-chars: 6 4 3; padding-top: 0.5em; padding-bottom: 0.5em; padding-left: 0.8em; padding-right: 0.5em; } .whiteBox-2 { width: 90%; padding-bottom: 0.1em; padding-left: 0.8em; height: auto; background: rgba(255, 255, 255, 0.8); } .txtBox h1, .txtBoxInfobox h1 { margin: 0; font-family: "Rajdhani", sans-serif; font-weight: 600; font-size: 2.1vw; } .txtBox h2, .txtBoxInfobox h2 { padding-top: 0.5em; font-family: "Rajdhani", sans-serif; font-weight: 700; font-size: 1.2vw; margin: 0; padding-bottom: 0.3em; } .txtBox p { margin-right: 1em; } .whiteBox ul { line-height: 1.1; list-style-type: none; margin: 0; padding: 0; margin-left: 1em; } .whiteBox li { padding-bottom: 0.3em; } .whiteBox ul li::before { display: inline-block; content:"•"; font-size: 1em; margin-right: 0.6em; margin-left: -1em } #txt_11, #txt_11_1, #txt_11_2, #txt_12, #txt_13, #txt_14, #txt_15, #txt_16, #txt_17, #txt_18, #txt_11_motor, #txt_12_motor, #txt_11_ecu, #txt_11_sensor, #txt_11_f_cell, #txt_11_h_tank { position: absolute; top: 0px; will-change: opacity; opacity: var(--opacityOFF); display: var(--displayOFF); -webkit-transition: opacity ease 500ms; transition: opacity ease 500ms; pointer-events: all; } #txt_11_1, #txt_11_2, #txt_11_3 { position: relative; } /* 21.07.2025 update nur noch Mica */ #txt_11_3, #bu_11_3 { display: none; } #txt_11.active, #txt_11_1.active, #txt_11_2.active, #txt_11_3.active, #txt_12.active, #txt_13.active, #txt_14.active, #txt_15.active, #txt_16.active, #txt_17.active, #txt_18.active, #txt_11_motor.active, #txt_12_motor.active, #txt_11_ecu.active, #txt_11_sensor.active, #txt_11_f_cell.active, #txt_11_h_tank.active { display: inline-block; opacity: 1; } #container_txt_11 { position: absolute; top: 0; width: 100%; -webkit-transition: opacity ease 500ms; transition: opacity ease 500ms; } #txt_buttons { /* ButtonContainer in Textbox */ position: relative; display: block; color: #000; pointer-events: all; } #txt_buttons.hide { display: none; } #txt_buttons .item { position: relative; width: 75%; cursor: pointer; background-color: #3e4252; font-family: "Rajdhani", sans-serif; font-weight: 400; font-size: 0.9vw; padding: 0.5em 0.9em; margin-top: 0em; margin-bottom: 1.0em; z-index: 22; } .txtButtons{ position: absolute; overflow: hidden; /*width: 4.2%; height: 1.5%;*/ font-family: "Rajdhani", sans-serif; font-weight: 400; font-size: 0.9vw; margin-top: 17%; padding: 0.6em 0.9em; padding-right: 1.4em; cursor: pointer; color: #FFFFFF; background-color: #465191; z-index: 24; } /* ========================================================================== Annotation Icons ========================================================================== */ .v3d-annotation { } .v3d-annotation-transparent {} .v3d-annotation-dialog {} /* ========================================================================== Media Queries ========================================================================== */ @media screen and (max-width: 767px) { } @media screen and (max-width: 479px) { } /* ========================================================================== V3D Stuff ========================================================================== */