/* Theme Name: SC&H Group Theme URI: https://grafik.agency Description: Default Grafik child theme Author: Grafik Author URI: https://grafik.agency Template: generatepress Version: 1.0.5 */ :root { --black: #000; } /* ---------------------------------------------------------------- */ /* WP Edits */ /* Header and Menu */ .nav-item-emphasize { font-style: normal !important; font-weight: 600 !important; border-bottom: 0 !important; border-radius: 0 !important; } .submenu .submenu .nav-item-emphasize { border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important; } /* Home Page Hero Wrapper */ @media only screen and (min-width: 901px) { .home .hero-wrapper { max-height: 78vh; min-height: 500px; } } @media only screen and (min-width: 768px) and (max-width: 940px) { .home .hero-wrapper { max-height: 72vh; min-height: 450px; } } @media only screen and (max-width: 768px) { .home .hero-wrapper { height: 460px !important; max-height: 70vh; } } /* Flex Styles for horizontal tabs */ @media only screen and (max-width: 768px) { .gb-tabs { position: relative; padding-left: 0 !important; padding-right: 0 !important; } .gb-tabs:after { content: ''; display: block; width: 60px; position: absolute; right: 0; top: -74px; height: 80px; background: rgb(255,255,255); background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%); z-index:99; pointer-events: none; } .gb-tabs__buttons .gb-button-text { text-align: center !important; max-width: 160px; line-height: 1.15; } } /* Updated tombstone spacing */ .tombstrone-card { margin: 8px;} /* ------------------------------------------------- */ /* Cards New Format for Fixed Height Image */ .cards-wrapper .cards.cards--contained { aspect-ratio: 2.8/4; height: auto; min-height: 370px; max-height: 500px; max-width: 372px;} .cards-wrapper .cards.cards--contained .insights-tag-wrap { position: absolute; top: 0; left: 0; z-index: 3; } .cards-wrapper .cards.cards--contained .insights-img-title-wrap { z-index: 2; width: 100%; } .cards-wrapper .cards.cards--contained .insights-img-wrap { width: 100%; height: 344px; position: relative; } .cards-wrapper .cards.cards--contained .insights-img-wrap img { position: relative; width: 100%; } .cards-wrapper .cards.cards--contained .overlay-image { z-index: 1; } .cards-wrapper .cards.cards--contained .insights-titles { background-color: #0079ff; width: 100%; height: 180px; margin: 0; position: absolute; bottom: 0; } /* ------------------------------------------------- */ /* Desktop Menu */ #sch-desktop-menu { display: none; } .site_header .client-login-link { display: none; } .landing_header.sticky { display: none !important; } @media only screen and (min-width: 1024px) { /* Stage */ .site_header { z-index: 100; } .top-menu-wrap, #sch-desktop-menu { flex-grow: 1; } .toggle-menu-btn { display: none !important; } #sch-desktop-menu { display: block; height: 28px; } .site_header .client-login-link { display: inline-block; margin-top: 18px; } .site_header .client-login-link a { color: var(--global-color-1); } .site_header .client-login-link a:hover { color: var(--global-color-2); } .home .site_header .client-login-link a { color: #fff; } .home .site_header .client-login-link a:hover { color: var(--global-color-4); } .home .site_header.sticky .client-login-link a { color: var(--global-color-1); } .home .site_header.sticky .client-login-link a:hover { color: var(--global-color-2); } /* Top Level */ #sch-desktop-menu nav > ul { display: flex; gap: 30px; padding-left: 20px; } #sch-desktop-menu nav > ul li { list-style: none; } #sch-desktop-menu nav > ul li a { color: var(--global-color-1); font-weight: 600; font-size: 18px; line-height: 1.0; } #sch-desktop-menu nav > ul > li > a { white-space: nowrap; } #sch-desktop-menu nav > ul li a:hover { color: var(--global-color-2); transition: all .3s; } #sch-desktop-menu nav > ul li .arrow.down { color: var(--global-color-1); position: relative; top: -4px; margin: 0 0 0 8px; transition: .3s all; } #sch-desktop-menu nav > ul li a:hover .arrow.down { border-color: var(--global-color-2); } /* Mega Menu - Outer */ #sch-desktop-menu nav ul li.has-mega-menu ul .mega-menu { transition: all .3s; } #sch-desktop-menu nav ul li.has-mega-menu.toggled ul .mega-menu { opacity: 1; top: 135px; height: auto; } #sch-desktop-menu nav ul li.has-mega-menu .mega-menu { height: 0; transition: all .3s; opacity: 0; width: 100%; position: absolute; top: 80px; left: 0; color: #fff; background-color: var(--global-color-1); transition: all .3s; box-shadow: 0 16px 16px rgba(0,0,0,.25); max-height: calc(100vh - 91px); overflow: auto; } .site_header.sticky #sch-desktop-menu nav ul li.has-mega-menu.toggled ul .mega-menu { top: 91px; } #sch-desktop-menu nav ul li.has-mega-menu .mega-menu ul li a { color: #fff; } #sch-desktop-menu nav ul li.has-mega-menu .mega-menu ul { margin: 0; padding: 0; } #sch-desktop-menu nav ul li.has-mega-menu .mega-menu ul li { margin: 0; padding: 0; list-style: none; } #sch-desktop-menu nav > ul li.has-mega-menu.toggled > a { color: var(--global-color-2); } #sch-desktop-menu nav > ul li.has-mega-menu.toggled > a .arrow.down { border-color: var(--global-color-2); } /* close */ #sch-desktop-menu .mega-menu-close { position: absolute; right: 16px; top: 16px; width: 30px; height: 25px; opacity: 1 ; } #sch-desktop-menu .mega-menu-close span { width: 0; height: 0; overflow: hidden; display: block; } #sch-desktop-menu .mega-menu-close:hover { opacity: 1; } #sch-desktop-menu .mega-menu-close:hover:before, .mega-menu-close:hover:after { background-color: var(--global-color-2); } #sch-desktop-menu .mega-menu-close:before, .mega-menu-close:after { position: absolute; left: 15px; content: ' '; height: 23px; width: 3px; background-color: var(--global-color-1); transition: background-color .3s; } #sch-desktop-menu .mega-menu-close:before { transform: rotate(45deg); } #sch-desktop-menu .mega-menu-close:after { transform: rotate(-45deg); } /* arrow */ .arrow { border: solid var(--global-color-1); border-width: 0 2px 2px 0; display: inline-block; padding: 2px; } .right { transform: rotate(-45deg); -webkit-transform: rotate(-45deg); } .left { transform: rotate(135deg); -webkit-transform: rotate(135deg); } .up { transform: rotate(-135deg); -webkit-transform: rotate(-135deg); } .down { transform: rotate(45deg); -webkit-transform: rotate(45deg); } /* Mega Menu - Inner */ #sch-desktop-menu .panel-wrap { display: flex; width: 100%; } #sch-desktop-menu .panel-wrap .panel-menu-col { flex-grow: 1; padding: 24px 40px 30px; } #sch-desktop-menu .panel-wrap .panel-menu-col h3 { display: block; color: #fff; padding: 12px 16px; font-size: 16px; font-weight: bold; border-bottom: 1px solid #374681; margin-bottom: 8px; max-width: 100%; } #sch-desktop-menu .panel-wrap .panel-menu-col h3 a { color: #fff; font-size: 16px; } #sch-desktop-menu .panel-wrap .panel-menu-col h3 a:hover { color: var(--global-color-2); } #sch-desktop-menu .panel-wrap .panel-menu-col ul { margin: 0; padding: 0; } #sch-desktop-menu .panel-wrap .panel-menu-col ul li { margin: 0; padding: 0; list-style: none; } #sch-desktop-menu .panel-wrap .panel-menu-col ul li a { display: block; max-width: 390px; padding: 12px 16px; font-size: 16px; font-weight: bold; border-radius: 8px; } #sch-desktop-menu .panel-wrap .panel-menu-col ul li a:hover { color: var(--global-color-2); } #sch-desktop-menu .panel-wrap .panel-menu-col ul li.heading { border-bottom: 1px solid #374681; margin-bottom: 8px; max-width: 100%; } #sch-desktop-menu .panel-wrap .panel-menu-col ul li.sub-heading { margin-top: 20px; border-bottom: 1px solid #374681; margin-bottom: 6px; max-width: 100%; font-weight: normal; font-style: italic; color: #fff; } #sch-desktop-menu .panel-wrap .panel-menu-col ul li.sub-heading a { font-weight: normal; font-style: italic; } /* Variant: Columns */ #sch-desktop-menu .panel-wrap .panel-menu-col.with-columns > ul { columns: 2; } /* Variant: Services Panels */ #sch-desktop-menu .panel-wrap .panel-menu-col ul li.toggled > a { background-color: var(--global-color-4); color: var(--global-color-1); } #sch-desktop-menu .panel-wrap .panel-menu-col ul li.toggled > a .arrow.right { border-color: var(--global-color-1) !important; } #sch-desktop-menu .panel-wrap .panel-menu-col.with-panel .panel-1 { width: 390px; max-width: 50%; padding-right: 40px; border-right: 1px solid #374681; position: relative; } #sch-desktop-menu .panel-wrap .panel-menu-col.with-panel .panel-1 .arrow.right { border-color: #fff; float: right; margin-top: 4px; } #sch-desktop-menu .panel-wrap .panel-menu-col.with-panel .panel-1 a:hover .arrow.right { border-color: var(--global-color-2); } #sch-desktop-menu .panel-wrap .panel-menu-col.with-panel .panel-1 .panel-2 { opacity: 0; pointer-events: none; width: 390px; max-width: 100%; padding-left: 40px; position: absolute; left: calc(100% - 20px); top: 0; transition: .3s all; } #sch-desktop-menu .panel-wrap .panel-menu-col.with-panel .panel-1 .toggled .panel-2 { opacity: 1; pointer-events: all; left: 100%; transition: .3s all; } #sch-desktop-menu .panel-wrap .panel-menu-col.with-panel .panel-1 .panel-2 ul li.heading a { padding: 12px 16px; } #sch-desktop-menu .panel-wrap .panel-menu-col.with-panel .panel-1 .panel-2 ul li a { padding: 10px 16px; } /* Featured Insights Sidebar */ #sch-desktop-menu .panel-wrap .sidebar-body { padding: 40px 80px 40px 30px; background-color: #f2f5f8; margin-left: auto; width: 470px; max-width: 35%; height: 100%; } #sch-desktop-menu .panel-wrap .sidebar-body h2 { font: 700 14px/1.0 'Rubik', sans-serif; text-transform: uppercase; color: var(--global-color-1); margin: 0; padding: 0 0 10px; } #sch-desktop-menu .panel-wrap .sidebar-body .featured-insights { padding: 16px 0; border-top: 1px solid #D5D5D5; line-height: 1.4; } #sch-desktop-menu .panel-wrap .sidebar-body .featured-insights .insight-label { font-weight: bold; font-size: 12px; text-transform: uppercase; display: inline-block; padding: 4px 8px; margin: 4px 0; background: #42EFAF; color: var(--global-color-1); border-radius: 18px; } #sch-desktop-menu .panel-wrap .sidebar-body .featured-insights .insight-date { color: #585858; font-weight: bold; font-size: 12px; text-transform: uppercase; margin: 0; } #sch-desktop-menu .panel-wrap .sidebar-body .featured-insights .insight-date-wrap { margin: 2px 0; } #sch-desktop-menu .panel-wrap .sidebar-body .featured-insights a { font-size: 16px; } /* Home Page Variation */ .home .site_header:not(.sticky) #sch-desktop-menu nav > ul > li > a { color: #fff; } .home .site_header:not(.sticky) #sch-desktop-menu nav > ul > li > a:hover { color: var(--global-color-4); } .home .site_header:not(.sticky) #sch-desktop-menu nav > ul > li > a .arrow.down { border-color: #fff; } .home .site_header:not(.sticky) #sch-desktop-menu nav > ul > li > a:hover .arrow.down { border-color: var(--global-color-4); } .home .site_header:not(.sticky).desktop-menu-activated { background-color: var(--global-color-1); } .home .site_header:not(.sticky) #sch-desktop-menu nav > ul li.has-mega-menu.toggled > a { color: var(--global-color-4); } .home .site_header:not(.sticky) #sch-desktop-menu nav > ul > li.has-mega-menu.toggled > a .arrow.down { border-color: var(--global-color-4); } /* -- hero */ .home .site-main:before { content: ''; display: block; width: 100%; height: 168px; position: absolute; top: 0; left: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0) 100%); z-index: 2; } } /* Extra Wide */ @media only screen and (min-width: 1320px) { /* Top Level */ #sch-desktop-menu nav > ul { gap: 40px; } } /* Short Height */ @media only screen and (min-width: 1024px) and (max-height: 700px) { #sch-desktop-menu .panel-wrap .panel-menu-col.with-panel .panel-1 .panel-2 ul li a { padding: 9px 16px; } } /* Mid Wdith */ @media only screen and (min-width: 1024px) and (max-width: 1200px) { /* Top Level */ .site_header .site-logo img { max-width: 120px; } #sch-desktop-menu nav > ul { display: flex; gap: 16px; padding-left: 0; } #sch-desktop-menu nav > ul li a { font-size: 16px; } } .home .gb-tabs { display: none; } .home .hero-wrapper { margin-bottom: 80px; } /* Added for Magnific Popup */ body .mfp-inline-holder .mfp-content { max-width: 100%; width: 520px; background: #fff; padding: 20px 40px 40px; margin: 0 auto; } body .mfp-close-btn-in .mfp-close { color: rgba(0, 121, 255, 1); opacity: 1; font-size: 2em; } body .mfp-close-btn-in .mfp-close:hover { background: transparent; opacity: .7; }