/* Theme Name: Progbox Studio Theme URI: http://progboxstudio.com Description: Divi Child Theme Author: Van Kirsch Author URI: http://progboxstudio.com Template: Divi Version: 1.0.0 */ /* ----------- PUT YOUR CUSTOM CSS BELOW THIS LINE -- DO NOT EDIT ABOVE THIS LINE --------------------------- */ /** QUIZ PAGE CSS **/ /*-------------------------------------------------------------- # Global Quiz Styles --------------------------------------------------------------*/ /* Visibility Helper */ .pbs-is-hidden { display: none !important; } /* General transition for smooth appearance of steps */ #quiz-section .et_pb_row { transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out; opacity: 1; transform: translateY(0); } #quiz-section .et_pb_row.pbs-is-hidden { opacity: 0; transform: translateY(20px); position: absolute; /* Prevent layout shifts */ width: 100%; pointer-events: none; } /*-------------------------------------------------------------- # Button & Selection Styles --------------------------------------------------------------*/ /* Default state for all quiz choice buttons */ .quiz-btn { transition: all 0.3s ease; cursor: pointer; } /* Style for selected buttons in single-choice steps */ .quiz-btn.selected { background-color: #667eea !important; color: #ffffff !important; transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.1); } /* Styles for multi-choice checkbox items */ .checkbox-group { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin-bottom: 2rem; } .checkbox-item { display: flex; align-items: center; justify-content: center; padding: 20px; background: #f8f9fa; border: 2px solid #e9ecef; border-radius: 10px; cursor: pointer; transition: all 0.3s ease; text-align: center; } .checkbox-item:hover { transform: translateY(-3px); box-shadow: 0 4px 15px rgba(0,0,0,0.05); } .checkbox-item.selected { background: #667eea; color: white; border-color: #667eea; transform: translateY(-3px); box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3); } /* Submit button disabled state */ #show-results-btn { opacity: 0.5; pointer-events: none; transition: all 0.3s ease; } #show-results-btn.enabled { opacity: 1; pointer-events: auto; cursor: pointer; } /*-------------------------------------------------------------- # Theme-Specific Backgrounds --------------------------------------------------------------*/ /* These styles change the background gradient of the hero and results sections based on the user's first choice. The class is added to the tag by the JavaScript. */ body.musician-theme #hero-section, body.musician-theme #results-section { background: linear-gradient(135deg, #ff6b6b 0%, #ffa726 100%) !important; } body.artist-theme #hero-section, body.artist-theme #results-section { background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%) !important; } body.maker-theme #hero-section, body.maker-theme #results-section { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%) !important; } /*-------------------------------------------------------------- # Results Section --------------------------------------------------------------*/ #result-display ul { list-style: none; padding-left: 0; } #result-display ul li::before { content: '✓'; margin-right: 10px; font-weight: bold; color: #4ade80; } /******* END QUIZ PAGE CSS *****/ /* **** PRELOADER **** */ .preloader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #000; z-index: 100000; height: 100%; width: 100%; overflow: hidden !important; } .preloader .status { width: 80px; height: 80px; position: absolute; left: 50%; top: 50%; background-image: url('https://progboxstudio.com/sites/pbstest/wp-content/uploads/assets/pbspreload.svg'); background-repeat: no-repeat; background-position: center; -webkit-background-size: cover; background-size: cover; margin: -50px 0 0 -50px; } /* ***** BOTTOM FOOTER OFF ******/ #footer-bottom {display: none;} /* *** custom SCROLL BAR *** */ /* width */ ::-webkit-scrollbar { width: 12px; } /* Track */ ::-webkit-scrollbar-track { background: #000; } /* Handle */ ::-webkit-scrollbar-thumb { background: #FC3838; } /* Handle on hover */ ::-webkit-scrollbar-thumb:hover { background: #7944CC; } /* ::::::::: HEADER, LOGO AND MENU :::::::::::*/ /*---------------[LOGO]-------------------*/ @media only screen and (min-width : 981px) { /* logo over top header and reduce logo container width */ #top-header { z-index: 99998!important; } .et_header_style_left .logo_container { width: 100% !important; text-align: center!important; } .et_pb_svg_logo #logo { height: 115% !important; max-height: 115% !important; } #logo.shadow { -webkit-filter: drop-shadow( 0px 0px 3px rgba(0, 0, 0, 0.1)); filter: drop-shadow( 0px 0px 3px rgba(0, 0, 0, 0.1)) /* Similar syntax to box-shadow */ } /* Logo transitions */ #logo { z-index: 9999!important; position: relative; margin-top: 20px; } .et-fixed-header #logo { height: 85% !important; margin-top: 20px; -webkit-transform: translateX(-40vw); -moz-transform: translateX(-40vw); -ms-transform: translateX(-40vw); -o-transform: translateX(-40vw); transform: translateX(-40vw); } } /*--------------------[ END LOGO]----------------------*/ /* .................. MENU FULL SCREEN .................*/ @media all and (min-width: 981px) { body #page-container .et_slide_in_menu_container { padding-top: 0 !important; } .et_header_style_fullscreen .et_toggle_fullscreen_menu { top: -90px; right: -36px; } .et_fullwidth_nav #main-header .container { padding-right: 0; padding-left: 0; width: 90vw !important; } /*adjust position of navigation menu*/ .et_header_style_fullscreen .et_pb_fullscreen_nav_container { width: 50%; } .et_slide_in_menu_container.et_pb_fullscreen_menu_opened.et_pb_fullscreen_menu_animated { padding-top: 0px !important; } /*adjust position of top menu and elements*/ .et_header_style_fullscreen .et_slide_menu_top { width: 50%; text-align: center; display: table !important; vertical-align: middle; position: initial; float: right; height: 100%; } .et_header_style_fullscreen .et_pb_top_menu_inner { display: table-cell !important; position: relative; vertical-align: middle; text-align: left!important; padding: 0 10%; width: 100%; } .et_header_style_fullscreen .et_slide_menu_top ul.et-social-icons { width: 100%; } .et_header_style_fullscreen div#et-info { float: none!important; width: 100%; } .et_header_style_fullscreen div#et-info span { display: block; margin-bottom: 30px; } /*make search bar and icon larger*/ .et_header_style_fullscreen .et_slide_menu_top .et-search-form { margin-top: 30px !important; margin-bottom: 10px; width: 100% !important; max-width: 300px !important; padding: 25px !important; } .et_slide_menu_top button#searchsubmit_header{ width: 50px; height: 41px; } .et_slide_menu_top button#searchsubmit_header:before { font-size: 22px; } /*make menu right aligned*/ .et_header_style_fullscreen ul#mobile_menu_slide { text-align: right; padding: 0 15%; } /*make close menu icon larger*/ .et_pb_fullscreen_menu_animated .mobile_menu_bar:before { font-size: 70px; } .et_slide_in_menu_container #mobile_menu_slide .et_mobile_menu_arrow:before { font-size: 34px; } } /*dark background overlay*/ .et_slide_menu_top { background: none; } /*increase size of down arrow for sub menu items*/ .et_slide_in_menu_container span.et_mobile_menu_arrow { opacity: 1; } /*take out background opacity and change of background color*/ .et_header_style_fullscreen .et_slide_in_menu_container.et_pb_fullscreen_menu_opened { opacity: 0.98; -webkit-animation: colorchange 25s infinite ease-in-out; animation: colorchange 25s infinite ease-in-out; } @-webkit-keyframes colorchange { 0% { background-color: #0B98C8;} 20% { background-color: #cedc1e;} 40% { background-color: #ff5340;} 60% { background-color: #960000;} 80% { background-color: #7944cc;} 100% { background-color: #0B98C8;} } @keyframes colorchange { 0% { background-color: #0B98C8;} 20% { background-color: #cedc1e;} 40% { background-color: #ff5340;} 60% { background-color: #960000;} 80% { background-color: #7944cc;} 100% { background-color: #0B98C8;} } .et_header_style_fullscreen .et_slide_in_menu_container #et-info span, .et_header_style_fullscreen .et_slide_menu_top ul.et-social-icons a, .et_header_style_fullscreen .et_slide_menu_top span { font-size: 24px; } /* .................. END MENU FULL SCREEN .................*/ /* ---- CONTENT HOME PAGE ----*/ @media all and (min-width: 981px) { .passion { height: 72vh !important; max-height: 72vh !important; } }