@charset "UTF-8"; /* * * Project: * Client: * Directors: * * Build Start Date: * * Initial Launch Date: * * Adaptive site design by fathead design * www.fatheaddesign.com * */ /* @group Baseline */ /* lets do this - bringing in the baseline styles via SASS */ /* Project Fonts */ /* @group Besley, Domine and Merriweather (Google Fonts | used in Admin) */ /* // : Use a value from 400 to 900 // : Use a unique and descriptive class name .besley- { font-family: "Besley", serif; font-optical-sizing: auto; font-weight: ; font-style: normal; } // : Use a value from 400 to 700 // : Use a unique and descriptive class name .domine- { font-family: "Domine", serif; font-optical-sizing: auto; font-weight: ; font-style: normal; } // : Use a value from 300 to 900 // : Use a unique and descriptive class name .merriweather- { font-family: "Merriweather", serif; font-optical-sizing: auto; font-weight: ; font-style: normal; font-variation-settings: "wdth" 100; } // : Use a value from 100 to 900 // : Use a unique and descriptive class name .raleway- { font-family: "Raleway", sans-serif; font-optical-sizing: auto; font-weight: ; font-style: normal; } * */ @import url("https://fonts.googleapis.com/css2?family=Besley:ital,wght@0,400..900;1,400..900&family=Domine:wght@400..700&family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap"); /* @end */ /* @group Arquitecta */ /* ========================================================================== Framework Utility Typeface Arquitecta is retained as the default utility sans-serif for UI elements, forms, helper text, and other framework components. Individual projects may choose not to use it for branded content. All weights and styles are registered under one font family so components can use standard font-weight and font-style values. ========================================================================== */ @font-face { font-family: "Arquitecta"; src: url("../fonts/ArquitectaThin-webfont.eot"); src: url("../fonts/ArquitectaThin-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/ArquitectaThin-webfont.woff") format("woff"), url("../fonts/ArquitectaThin-webfont.ttf") format("truetype"), url("../fonts/ArquitectaThin-webfont.svg#arquitecta_thinthin") format("svg"); font-weight: 100; font-style: normal; font-display: swap; } @font-face { font-family: "Arquitecta"; src: url("../fonts/ArquitectaThin-Italic-webfont.eot"); src: url("../fonts/ArquitectaThin-Italic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/ArquitectaThin-Italic-webfont.woff") format("woff"), url("../fonts/ArquitectaThin-Italic-webfont.ttf") format("truetype"), url("../fonts/ArquitectaThin-Italic-webfont.svg#arquitecta_thinthin_italic") format("svg"); font-weight: 100; font-style: italic; font-display: swap; } @font-face { font-family: "Arquitecta"; src: url("../fonts/ArquitectaLight-webfont.eot"); src: url("../fonts/ArquitectaLight-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/ArquitectaLight-webfont.woff") format("woff"), url("../fonts/ArquitectaLight-webfont.ttf") format("truetype"), url("../fonts/ArquitectaLight-webfont.svg#arquitecta_lightlight") format("svg"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Arquitecta"; src: url("../fonts/ArquitectaLight-Italic-webfont.eot"); src: url("../fonts/ArquitectaLight-Italic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/ArquitectaLight-Italic-webfont.woff") format("woff"), url("../fonts/ArquitectaLight-Italic-webfont.ttf") format("truetype"), url("../fonts/ArquitectaLight-Italic-webfont.svg#arquitecta_lightlight_italic") format("svg"); font-weight: 300; font-style: italic; font-display: swap; } @font-face { font-family: "Arquitecta"; src: url("../fonts/Arquitecta-webfont.eot"); src: url("../fonts/Arquitecta-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/Arquitecta-webfont.woff") format("woff"), url("../fonts/Arquitecta-webfont.ttf") format("truetype"), url("../fonts/Arquitecta-webfont.svg#arquitectaregular") format("svg"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Arquitecta"; src: url("../fonts/Arquitecta-Italic-webfont.eot"); src: url("../fonts/Arquitecta-Italic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/Arquitecta-Italic-webfont.woff") format("woff"), url("../fonts/Arquitecta-Italic-webfont.ttf") format("truetype"), url("../fonts/Arquitecta-Italic-webfont.svg#arquitectaitalic") format("svg"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Arquitecta"; src: url("../fonts/ArquitectaMedium-webfont.eot"); src: url("../fonts/ArquitectaMedium-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/ArquitectaMedium-webfont.woff") format("woff"), url("../fonts/ArquitectaMedium-webfont.ttf") format("truetype"), url("../fonts/ArquitectaMedium-webfont.svg#arquitecta_mediummedium") format("svg"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Arquitecta"; src: url("../fonts/ArquitectaMedium-Italic-webfont.eot"); src: url("../fonts/ArquitectaMedium-Italic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/ArquitectaMedium-Italic-webfont.woff") format("woff"), url("../fonts/ArquitectaMedium-Italic-webfont.ttf") format("truetype"), url("../fonts/ArquitectaMedium-Italic-webfont.svg#arquitecta_mediumMdIt") format("svg"); font-weight: 500; font-style: italic; font-display: swap; } @font-face { font-family: "Arquitecta"; src: url("../fonts/ArquitectaBold-webfont.eot"); src: url("../fonts/ArquitectaBold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/ArquitectaBold-webfont.woff") format("woff"), url("../fonts/ArquitectaBold-webfont.ttf") format("truetype"), url("../fonts/ArquitectaBold-webfont.svg#arquitecta_boldbold") format("svg"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Arquitecta"; src: url("../fonts/ArquitectaBold-Italic-webfont.eot"); src: url("../fonts/ArquitectaBold-Italic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/ArquitectaBold-Italic-webfont.woff") format("woff"), url("../fonts/ArquitectaBold-Italic-webfont.ttf") format("truetype"), url("../fonts/ArquitectaBold-Italic-webfont.svg#arquitecta_boldbold_italic") format("svg"); font-weight: 700; font-style: italic; font-display: swap; } @font-face { font-family: "Arquitecta"; src: url("../fonts/ArquitectaHeavy-webfont.eot"); src: url("../fonts/ArquitectaHeavy-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/ArquitectaHeavy-webfont.woff") format("woff"), url("../fonts/ArquitectaHeavy-webfont.ttf") format("truetype"), url("../fonts/ArquitectaHeavy-webfont.svg#arquitecta_heavyheavy") format("svg"); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: "Arquitecta"; src: url("../fonts/ArquitectaHeavy-Italic-webfont.eot"); src: url("../fonts/ArquitectaHeavy-Italic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/ArquitectaHeavy-Italic-webfont.woff") format("woff"), url("../fonts/ArquitectaHeavy-Italic-webfont.ttf") format("truetype"), url("../fonts/ArquitectaHeavy-Italic-webfont.svg#arquitecta_heavyheavy_italic") format("svg"); font-weight: 800; font-style: italic; font-display: swap; } @font-face { font-family: "Arquitecta"; src: url("../fonts/ArquitectaBlack-webfont.eot"); src: url("../fonts/ArquitectaBlack-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/ArquitectaBlack-webfont.woff") format("woff"), url("../fonts/ArquitectaBlack-webfont.ttf") format("truetype"), url("../fonts/ArquitectaBlack-webfont.svg#arquitecta_blackblack") format("svg"); font-weight: 900; font-style: normal; font-display: swap; } @font-face { font-family: "Arquitecta"; src: url("../fonts/ArquitectaBlack-Italic-webfont.eot"); src: url("../fonts/ArquitectaBlack-Italic-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/ArquitectaBlack-Italic-webfont.woff") format("woff"), url("../fonts/ArquitectaBlack-Italic-webfont.ttf") format("truetype"), url("../fonts/ArquitectaBlack-Italic-webfont.svg#arquitecta_blackblack_italic") format("svg"); font-weight: 900; font-style: italic; font-display: swap; } /* @end */ /* ========================================================================== fhd Hospitality Starter Core Design Configuration This file establishes the visual relationships for a project. Components should never reference project colors or fonts directly. Instead they should consume the semantic variables defined below. Project Identity ---------------- $primary $secondary $tertiary $accent Typography ---------- $bodyFont $headerFont $buttonFont $kickerFont $utilityFont $adminFont $navFont $footerFont ========================================================================== */ /* ====== SASS vars (in SCSS format) ====== */ /* Holdover Colors */ /* fathead Colors */ /* Project Colors */ /* ========================================================================== Semantic Font Assignments Assign framework and project fonts to their semantic roles. Components should consume these variables rather than referencing font families directly. ========================================================================== */ .whiteText { color: #f2f2f2; } .accentText { color: #ff006b; } .redText { color: #ea4436; } .whiteBg { background-color: #f2f2f2; } .eightywhiteBg { background-color: rgba(242, 242, 242, 0.8); } .blackBg { background-color: #231f20; } .transBg { background-color: transparent; } .ltGreyBg { background-color: #bdbbbc; } .xltGreyBg { background-color: #e9e8e8; } .blueBg { background-color: #ffbc00; } .ltBlueBg { background-color: #ffda72; } .primaryBg { background-color: #ffbc00; } .secondaryBg { background-color: #e99a3f; } .tertiaryBg { background-color: #efe3D3; } .bkgd-black { background: #231f20; } .bkgd-white { background: #f2f2f2; } .bkgd-primary { background: #ffbc00; } .bkgd-secondary { background: #e99a3f; } .bkgd-tertiary { background: #efe3D3; } .text-black, .text-black p { color: #231f20 !important; z-index: inherit; } .text-white, .text-white p { color: #f2f2f2 !important; z-index: inherit; } .text-primary, .text-primary p { color: #ffbc00 !important; z-index: inherit; } .text-secondary, .text-secondary p { color: #e99a3f !important; z-index: inherit; } .text-tertiary, .text-tertiary p { color: #efe3D3 !important; z-index: inherit; } ::selection { background-color: #e99a3f; color: #f2f2f2; } /* standard Bootstrap breaks /* xs @media (max-width: 575px) {} /* sm @media (min-width: 576px) {} /* md @media (min-width: 768px) {} /* lg @media (min-width: 992px) {} /* xl @media (min-width: 1200px) {} */ /* outlines everything in orange for visual assistance in build */ /* * * CSS Animations generated using Animista | https://animista.net/ * */ .animista [class*=anim-delay-] { opacity: 0; } .animista.appear [class*=anim-delay-] { -webkit-animation-duration: inherit; animation-duration: inherit; -webkit-animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animista.appear .anim-delay-0 { -webkit-animation-delay: 0s !important; animation-delay: 0s !important; } .animista.appear .anim-delay-1 { -webkit-animation-delay: 1s !important; animation-delay: 1s !important; } .animista.appear .anim-delay-2 { -webkit-animation-delay: 2s !important; animation-delay: 2s !important; } .animista.appear .anim-delay-3 { -webkit-animation-delay: 3s !important; animation-delay: 3s !important; } .animista.appear .anim-delay-4 { -webkit-animation-delay: 4s !important; animation-delay: 4s !important; } .animista.appear .anim-delay-5 { -webkit-animation-delay: 5s !important; animation-delay: 5s !important; } .animista.appear .anim-delay-6 { -webkit-animation-delay: 6s !important; animation-delay: 6s !important; } .animista.appear .anim-delay-7 { -webkit-animation-delay: 7s !important; animation-delay: 7s !important; } /* @group Carnivale Chicago Homepage */ .animista.appear.slide-in-blurred-right { -webkit-animation: slide-in-blurred-right 2s cubic-bezier(0.23, 1, 0.32, 1) both; animation: slide-in-blurred-right 2s cubic-bezier(0.23, 1, 0.32, 1) both; } @-webkit-keyframes slide-in-blurred-right [class*="anim-delay-"] { 0% { -webkit-transform: translateX(1000px) scaleX(2.5) scaleY(0.2); transform: translateX(1000px) scaleX(2.5) scaleY(0.2); -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-filter: blur(40px); filter: blur(40px); opacity: 0; } 100% { -webkit-transform: translateX(0) scaleY(1) scaleX(1); transform: translateX(0) scaleY(1) scaleX(1); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-filter: blur(0); filter: blur(0); opacity: 1; } } @keyframes slide-in-blurred-right { 0% { -webkit-transform: translateX(1000px) scaleX(2.5) scaleY(0.2); transform: translateX(1000px) scaleX(2.5) scaleY(0.2); -webkit-transform-origin: 0% 50%; transform-origin: 0% 50%; -webkit-filter: blur(40px); filter: blur(40px); opacity: 0; } 100% { -webkit-transform: translateX(0) scaleY(1) scaleX(1); transform: translateX(0) scaleY(1) scaleX(1); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-filter: blur(0); filter: blur(0); opacity: 1; } } .animista.appear.slide-in-blurred-tl [class*=anim-delay-] { -webkit-animation: slide-in-blurred-tl 2s cubic-bezier(0.55, 0.085, 0.68, 0.53) both; animation: slide-in-blurred-tl 2s cubic-bezier(0.55, 0.085, 0.68, 0.53) both; } @-webkit-keyframes slide-in-blurred-tl { 0% { -webkit-transform: translate(-1000px, -1000px) skew(80deg, 10deg); transform: translate(-1000px, -1000px) skew(80deg, 10deg); -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; -webkit-filter: blur(40px); filter: blur(40px); opacity: 0; } 100% { -webkit-transform: translate(0, 0) skew(0deg, 0deg); transform: translate(0, 0) skew(0deg, 0deg); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-filter: blur(0); filter: blur(0); opacity: 1; } } @keyframes slide-in-blurred-tl { 0% { -webkit-transform: translate(-1000px, -1000px) skew(80deg, 10deg); transform: translate(-1000px, -1000px) skew(80deg, 10deg); -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; -webkit-filter: blur(40px); filter: blur(40px); opacity: 0; } 100% { -webkit-transform: translate(0, 0) skew(0deg, 0deg); transform: translate(0, 0) skew(0deg, 0deg); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-filter: blur(0); filter: blur(0); opacity: 1; } } .animista.appear.slide-in-blurred-tr [class*=anim-delay-] { -webkit-animation: slide-in-blurred-tr 2s cubic-bezier(0.55, 0.085, 0.68, 0.53) both; animation: slide-in-blurred-tr 2s cubic-bezier(0.55, 0.085, 0.68, 0.53) both; } @-webkit-keyframes slide-in-blurred-tr { 0% { -webkit-transform: translate(1000px, -1000px) skew(-80deg, -10deg); transform: translate(1000px, -1000px) skew(-80deg, -10deg); -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-filter: blur(40px); filter: blur(40px); opacity: 0; } 100% { -webkit-transform: translate(0, 0) skew(0deg, 0deg); transform: translate(0, 0) skew(0deg, 0deg); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-filter: blur(0); filter: blur(0); opacity: 1; } } @keyframes slide-in-blurred-tr { 0% { -webkit-transform: translate(1000px, -1000px) skew(-80deg, -10deg); transform: translate(1000px, -1000px) skew(-80deg, -10deg); -webkit-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-filter: blur(40px); filter: blur(40px); opacity: 0; } 100% { -webkit-transform: translate(0, 0) skew(0deg, 0deg); transform: translate(0, 0) skew(0deg, 0deg); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-filter: blur(0); filter: blur(0); opacity: 1; } } .animista.appear.slide-in-blurred-br [class*=anim-delay-] { -webkit-animation: slide-in-blurred-br 2s cubic-bezier(0.55, 0.085, 0.68, 0.53) both; animation: slide-in-blurred-br 2s cubic-bezier(0.55, 0.085, 0.68, 0.53) both; } @-webkit-keyframes slide-in-blurred-br { 0% { -webkit-transform: translate(1000px, 1000px) skew(80deg, 10deg); transform: translate(1000px, 1000px) skew(80deg, 10deg); -webkit-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-filter: blur(40px); filter: blur(40px); opacity: 0; } 100% { -webkit-transform: translate(0, 0) skew(0deg, 0deg); transform: translate(0, 0) skew(0deg, 0deg); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-filter: blur(0); filter: blur(0); opacity: 1; } } @keyframes slide-in-blurred-br { 0% { -webkit-transform: translate(1000px, 1000px) skew(80deg, 10deg); transform: translate(1000px, 1000px) skew(80deg, 10deg); -webkit-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-filter: blur(40px); filter: blur(40px); opacity: 0; } 100% { -webkit-transform: translate(0, 0) skew(0deg, 0deg); transform: translate(0, 0) skew(0deg, 0deg); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-filter: blur(0); filter: blur(0); opacity: 1; } } .animista.appear.slide-in-blurred-bl [class*=anim-delay-] { -webkit-animation: slide-in-blurred-bl 2s cubic-bezier(0.55, 0.085, 0.68, 0.53) both; animation: slide-in-blurred-bl 2s cubic-bezier(0.55, 0.085, 0.68, 0.53) both; } @-webkit-keyframes slide-in-blurred-bl { 0% { -webkit-transform: translate(-1000px, 1000px) skew(-80deg, -10deg); transform: translate(-1000px, 1000px) skew(-80deg, -10deg); -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-filter: blur(40px); filter: blur(40px); opacity: 0; } 100% { -webkit-transform: translate(0, 0) skew(0deg, 0deg); transform: translate(0, 0) skew(0deg, 0deg); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-filter: blur(0); filter: blur(0); opacity: 1; } } @keyframes slide-in-blurred-bl { 0% { -webkit-transform: translate(-1000px, 1000px) skew(-80deg, -10deg); transform: translate(-1000px, 1000px) skew(-80deg, -10deg); -webkit-transform-origin: 100% 100%; transform-origin: 100% 100%; -webkit-filter: blur(40px); filter: blur(40px); opacity: 0; } 100% { -webkit-transform: translate(0, 0) skew(0deg, 0deg); transform: translate(0, 0) skew(0deg, 0deg); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; -webkit-filter: blur(0); filter: blur(0); opacity: 1; } } /* @end */ /* @group Private Events Page */ .animista.appear.tilt-in-fwd-tr [class*=anim-delay-] { -webkit-animation: tilt-in-fwd-tr 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; animation: tilt-in-fwd-tr 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; } @-webkit-keyframes tilt-in-fwd-tr { 0% { -webkit-transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg); transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg); opacity: 0; } 100% { -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg); transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg); opacity: 1; } } @keyframes tilt-in-fwd-tr { 0% { -webkit-transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg); transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg); opacity: 0; } 100% { -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg); transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg); opacity: 1; } } .animista.appear.tilt-in-fwd-tl [class*=anim-delay-] { -webkit-animation: tilt-in-fwd-tl 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; animation: tilt-in-fwd-tl 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) both; } @-webkit-keyframes tilt-in-fwd-tl { 0% { -webkit-transform: rotateY(-20deg) rotateX(35deg) translate(-300px, -300px) skew(35deg, -10deg); transform: rotateY(-20deg) rotateX(35deg) translate(-300px, -300px) skew(35deg, -10deg); opacity: 0; } 100% { -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg); transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg); opacity: 1; } } @keyframes tilt-in-fwd-tl { 0% { -webkit-transform: rotateY(-20deg) rotateX(35deg) translate(-300px, -300px) skew(35deg, -10deg); transform: rotateY(-20deg) rotateX(35deg) translate(-300px, -300px) skew(35deg, -10deg); opacity: 0; } 100% { -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg); transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg); opacity: 1; } } /* @end */ /* @group Footer */ .animista.appear.fade-in [class*=anim-delay-] { -webkit-animation: fade-in 1s cubic-bezier(0.47, 0, 0.745, 0.715) both; animation: fade-in 1s cubic-bezier(0.47, 0, 0.745, 0.715) both; } /** * ---------------------------------------- * animation fade-in - for footer flourish * ---------------------------------------- */ @-webkit-keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } /* @end */ /* @group Navigation */ /* ========================================================= Global Navigation Nectar & Pollen Custom nav system -- no Bootstrap navbar/dropdown classes. ========================================================= */ :root { --site-nav-height-mobile: 75px; --site-nav-height-desktop: 80px; --site-page-offset-mobile: 75px; --site-page-offset-desktop: 80px; --site-nav-bg: #efe3D3; --site-nav-link: #ffbc00; --site-nav-link-active: #ffda72; --site-nav-dropdown-bg: #efe3D3; --site-nav-dropdown-hover-bg: rgba(0, 45, 67, 0.1); --site-nav-dropdown-shadow: 0 12px 28px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.08); --site-nav-dropdown-radius: 0 0 0.5rem 0.5rem; --site-nav-dropdown-offset: 1.45rem; --site-nav-mobile-panel-bg: #efe3D3; } body { padding-top: var(--site-page-offset-mobile); } @media (min-width: 1200px) { body { padding-top: var(--site-page-offset-desktop); } } /* ========================================================= Fixed Shell + Optional Top Banner ========================================================= */ .siteNavFixed { position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; } .topBar { top: 0; z-index: 2; display: block; width: 100%; height: 40px; } .topBar p { margin-bottom: 0; padding: 0.25rem 0.5rem 0.125rem; color: #231f20; font-family: "Raleway", sans-serif; font-size: 1rem; font-weight: 700; line-height: 1; text-align: center; text-transform: none; } .topBar a { text-decoration: underline; } @media (min-width: 1200px) { .topBar { height: 20px; } .topBar p { padding: 0.125rem 0.5rem; } } /* ========================================================= Main Nav Shell ========================================================= */ .siteNav { width: 100%; min-height: var(--site-nav-height-mobile); background: var(--site-nav-bg); color: var(--site-nav-link); } .siteNav, .siteNav * { font-family: "Raleway", sans-serif !important; } .siteNav-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: var(--site-nav-height-mobile); padding: 0 0.75rem; } .siteNav-brand { display: flex; align-items: center; flex: 0 0 auto; height: var(--site-nav-height-mobile); text-decoration: none; } .svg-mastlogo, .svg-mastlogo-IE { display: block; width: 220px; height: 50px; margin: 0; padding: 0; background-image: none; background-position: left center; background-repeat: no-repeat; background-size: contain; } .siteNav-brandText { display: block; color: #ffbc00; font-family: "Raleway", sans-serif !important; font-size: 1.125rem; font-weight: 700; line-height: 1; white-space: nowrap; } .siteNav-brandText span { font-family: "Raleway", sans-serif !important; font-style: italic; text-transform: none; } @media (min-width: 1200px) { .siteNav { min-height: var(--site-nav-height-desktop); } .siteNav-inner { min-height: var(--site-nav-height-desktop); } .siteNav-brand { height: var(--site-nav-height-desktop); } .svg-mastlogo, .svg-mastlogo-IE { width: 275px; height: 63px; background-size: 100% auto; } .siteNav-brandText { font-size: 1.4rem; } } /* ========================================================= Mobile Toggle ========================================================= */ .siteNav-toggle { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; width: 3.5rem; height: 2.5rem; padding: 0; margin-left: auto; border: 0; background: transparent; cursor: pointer; } .siteNav-toggle:focus, .siteNav-toggle:focus-visible { outline: 2px solid rgba(201, 162, 103, 0.9); outline-offset: 3px; } .siteNav-toggleBar { display: block; width: 2rem; height: 4px; margin: 0; background-color: #ffbc00; border-radius: 4px; transition: transform 220ms ease, opacity 160ms ease; } .siteNav-toggleBar--middle { margin: 0.35rem 0; } .siteNav-toggle.is-open .siteNav-toggleBar--top { transform: rotate(45deg) translateX(0.35rem) translateY(0.5rem); } .siteNav-toggle.is-open .siteNav-toggleBar--middle { opacity: 0; } .siteNav-toggle.is-open .siteNav-toggleBar--bottom { transform: rotate(-45deg) translateX(0.4rem) translateY(-0.5rem); } @media (min-width: 1200px) { .siteNav-toggle { display: none; } } /* ========================================================= Shared List / Link Resets ========================================================= */ .siteNav-list, .siteNav-submenu { margin: 0; padding: 0; list-style: none; } .siteNav-link, .siteNav-submenuToggle, .siteNav-submenu .siteNav-link { color: var(--site-nav-link); text-decoration: none; } .siteNav-link:hover, .siteNav-link:focus, .siteNav-submenuToggle:hover, .siteNav-submenuToggle:focus, .siteNav-item.is-current > .siteNav-itemShell .siteNav-link, .siteNav-item.is-submenu-open > .siteNav-itemShell .siteNav-link, .siteNav-item.is-submenu-open > .siteNav-itemShell .siteNav-submenuToggle { color: var(--site-nav-link-active); text-decoration: none; } .siteNav-link:focus-visible, .siteNav-submenuToggle:focus-visible { outline: 2px solid rgba(201, 162, 103, 0.9); outline-offset: 3px; } /* ========================================================= Mobile Menu ========================================================= */ .siteNav-menu { position: absolute; top: 79%; left: 0; right: 0; z-index: 2; display: none; width: 100%; padding: 0.85rem 1.15rem 1rem; background: var(--site-nav-mobile-panel-bg); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.14); } .siteNav-menu.is-open { display: block; } .siteNav-list { display: flex; flex-direction: column; align-items: stretch; gap: 0.15rem; } .siteNav-itemShell { display: flex; align-items: center; justify-content: flex-end; gap: 0.45rem; width: 100%; } .siteNav-link { display: block; padding: 0.35rem 0; font-size: 1.15rem; font-weight: 700; line-height: 1.15; text-align: right; } .siteNav-submenuToggle { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; padding: 0; border: 0; background: transparent; cursor: pointer; } .siteNav-caret { display: block; width: 0; height: 0; border-left: 0.24rem solid transparent; border-right: 0.24rem solid transparent; border-top: 0.32rem solid currentColor; transition: transform 180ms ease; } .siteNav-item.is-submenu-open > .siteNav-itemShell .siteNav-caret { transform: rotate(180deg); } .siteNav-submenu { display: none; padding: 0.1rem 0 0.35rem; } .siteNav-item.is-submenu-open > .siteNav-submenu { display: block; } .siteNav-submenu .siteNav-itemShell { display: block; } .siteNav-submenu .siteNav-link { padding: 0.34rem 0; font-size: 0.78rem; font-weight: 700; line-height: 1; text-align: right; opacity: 0.92; } .siteNav-submenu .siteNav-link:hover, .siteNav-submenu .siteNav-link:focus, .siteNav-submenu .siteNav-item.is-current > .siteNav-itemShell .siteNav-link { color: var(--site-nav-link-active); opacity: 1; } /* ========================================================= Desktop Menu ========================================================= */ @media (min-width: 1200px) { .siteNav-menu { position: static; display: flex; align-items: center; justify-content: flex-end; width: auto; padding: 0; background: transparent; box-shadow: none; } .siteNav-list { flex-direction: row; align-items: center; justify-content: flex-end; gap: 0; } .siteNav-item { position: relative; padding: 0 0.75rem; } .siteNav-itemShell { display: flex; align-items: center; justify-content: center; gap: 0.35rem; width: auto; } .siteNav-link { padding: 0.5rem 0; font-size: 1rem; font-weight: 700; line-height: 1.125; text-align: right; transition: color 160ms ease; } .siteNav-submenuToggle { width: 0.8rem; height: 0.8rem; transform: none; } .siteNav-caret { border-left-width: 0.2rem; border-right-width: 0.2rem; border-top-width: 0.28rem; } .siteNav-submenu { position: absolute; top: calc(100% + var(--site-nav-dropdown-offset)); left: 20%; z-index: 10; display: block; min-width: 13.5rem; padding: 0.45rem 0; background: var(--site-nav-dropdown-bg); border-radius: var(--site-nav-dropdown-radius); box-shadow: var(--site-nav-dropdown-shadow); text-align: right; visibility: hidden; opacity: 0; transform: translateX(-50%); pointer-events: none; transition: opacity 160ms ease, visibility 0s linear 160ms; } /* Desktop dropdowns are click-only. No hover-open. */ .siteNav-item.is-submenu-open > .siteNav-submenu { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity 160ms ease, visibility 0s linear 0s; } .siteNav-submenu .siteNav-item { padding: 0; } .siteNav-submenu .siteNav-itemShell { display: block; } .siteNav-submenu .siteNav-link { position: relative; z-index: 2; display: block; padding: 0.42rem 0.9rem; color: var(--site-nav-link); background: transparent; font-size: 0.72rem; font-weight: 700; line-height: 0.95; text-align: right; white-space: nowrap; opacity: 1; transition: background-color 160ms ease, color 160ms ease; } .siteNav-submenu .siteNav-link:hover, .siteNav-submenu .siteNav-link:focus, .siteNav-submenu .siteNav-item.is-current > .siteNav-itemShell .siteNav-link { background: var(--site-nav-dropdown-hover-bg); color: var(--site-nav-link); } } .siteNav-submenuLabel { display: inline-flex; align-items: center; justify-content: flex-end; gap: 0.35rem; padding: 0.5rem 0; border: 0; background: transparent; cursor: pointer; } .siteNav-submenuLabel .siteNav-caret { flex: 0 0 auto; } /* ========================================================= Breadcrumb Nav - this plays nicely with _textMenus.seravezza-image-card-buttons.scss and _navigation.custom.scss to equalize the top/bottom spacing around the breadcrumb nav ========================================================= */ .menuBreadcrumbWrap { width: 100%; max-width: 1140px; margin: 0 auto 1rem; padding: 0 1rem; } .menuBreadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin: 0; padding: 0; list-style: none; color: #ffbc00; font-family: "Raleway", sans-serif; font-size: clamp(0.72rem, 0.68rem + 0.15vw, 0.82rem); font-weight: 500; line-height: 1.35; } .menuBreadcrumb-item { color: inherit; font-family: "Raleway", sans-serif; font-size: inherit; font-weight: 500; line-height: inherit; } .menuBreadcrumb-item a { color: inherit; font-family: "Raleway", sans-serif; font-size: inherit; font-weight: 500; line-height: inherit; text-decoration: none; } .menuBreadcrumb-item a:hover, .menuBreadcrumb-item a:focus { color: #efe3D3; text-decoration: none; } .menuBreadcrumb-item::after { content: "»"; margin-left: 0.35rem; color: #efe3D3; opacity: 0.8; } .menuBreadcrumb-item.is-current { opacity: 0.7; } .menuBreadcrumb-item.is-current::after { content: ""; margin: 0; } /* ========================================================= Motion Kill Switch Prevent accidental layout movement from inherited hover rules. Do NOT reset .siteNav-submenu positioning — desktop dropdowns need it. ========================================================= */ .siteNav a, .siteNav button, .siteNav-link, .siteNav-submenuToggle, .siteNav-submenu .siteNav-link { margin: 0 !important; transform: none !important; text-decoration: none !important; } .siteNav-link, .siteNav-link:hover, .siteNav-link:focus, .siteNav-link:active { padding: 0.35rem 0 !important; border: 0 !important; box-shadow: none !important; transform: none !important; position: relative; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; } .siteNav-submenu .siteNav-link, .siteNav-submenu .siteNav-link:hover, .siteNav-submenu .siteNav-link:focus, .siteNav-submenu .siteNav-link:active { padding: 0.34rem 0 !important; border: 0 !important; box-shadow: none !important; transform: none !important; position: relative; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; } @media (min-width: 1200px) { .siteNav-link, .siteNav-link:hover, .siteNav-link:focus, .siteNav-link:active { padding: 0.5rem 0 !important; } .siteNav-submenu .siteNav-link, .siteNav-submenu .siteNav-link:hover, .siteNav-submenu .siteNav-link:focus, .siteNav-submenu .siteNav-link:active { padding: 0.42rem 0.9rem !important; } } /* @end */ /* @group Buttons */ /* @group Buttons */ a.varButton, a.varButton:visited, a.varButton:link, .varButton, .varButton:visited, .varButton:link, a.varBtn, a.varBtn:visited, a.varBtn:link, .varBtn, .varBtn:visited, .varBtn:link { display: inline-block; color: #f2f2f2; border: 0; border-radius: 0; font-size: 2rem; line-height: 2rem; font-family: "Raleway", sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; padding: 0.5rem 1rem 0.5rem 1rem; transition: all 0.5s linear; } a.varButton:hover, a.varButton:focus, .varButton:hover, .varButton:focus, a.varBtn:hover, a.varBtn:focus, .varBtn:hover, .varBtn:focus { opacity: 0.75; text-decoration: none !important; } a.formButton, a.formButton:visited, a.formButton:link, .formButton, .formButto:visited, .formButton:link, a.formBtn, a.formBtn:visited, a.formBtn:link, .formBtn, .formBtn:visited, .formBtn:link { font: 1.25rem/140% "Raleway", sans-serif; font-weight: 800; text-transform: uppercase !important; display: inline-block; color: #231f20 !important; background-color: #ffbc00; border: 0; -webkit-border-radius: 6px !important; -moz-border-radius: 6px !important; border-radius: 6px !important; letter-spacing: 1px; padding: 0.5rem 1rem 0.5rem 1rem; transition: all 0.5s linear; } a.formButton:hover, a.formButton:focus, .formButton:hover, .formButton:focus, a.formBtn:hover, a.formBtn:focus, .formBtn:hover, .formBtn:focus { filter: brightness(70%); text-decoration: none !important; } .cmSignup { margin-bottom: 4rem; } a.button, a.button:visited, a.button:link, .button, .button:visited, .button:link, a.btn, a.btn:visited, a.btn:link, .btn, .btn:visited, .btn:link { padding: 0.75rem 1.125rem; font: 1.25rem/125% "Raleway", sans-serif; font-weight: 800; transition: all 0.5s linear; letter-spacing: 0.1em; text-transform: uppercase; display: inline-block; margin: 1rem 0; text-align: center; color: #ff006b !important; background-color: #ffbc00; border: 2px solid #ff006b; text-decoration: none !important; } a.button:hover, a.button:focus, .button:hover, .button:focus, a.btn:hover, a.btn:focus, .btn:hover, .btn:focus { color: #f2f2f2 !important; text-decoration: none !important; background-color: #ffda72; } .optional-button { min-height: 2.5rem; } .optional-handbook-button { min-height: 2.5rem; margin: 1rem 0 1rem; } .optional-button:has(.linkWrap:empty), .optional-button:has(.linkTitlep:empty) { min-height: 0px !important; display: none !important; } .optional-handbook-button:has(.linkWrap:empty), .optional-handbook-button:has(.linkTitle:empty) { display: none !important; } .linkLogos { display: block; } .linkLogos a, .linkLogos a:visited, .linkLogos a:link { filter: brightness(85%); transition-property: all 0.5s linear 0s; } .linkLogos a:hover, .linkLogos a:focus { filter: brightness(100%); cursor: default !important; } .linkWrap, .linkTitle { position: relative; display: inline-block; z-index: 15; } .linkWrap a, .linkWrap a:link, .linkWrap a:visited { position: relative; padding: 0.5rem 0.75rem 0.5rem 0.75rem; font: 1rem/115% "Raleway", sans-serif; font-weight: 400; transition: all 0.5s linear; letter-spacing: 1px; z-index: 20; text-transform: uppercase; border-radius: 0.25rem; display: flex; margin: 0.5rem auto 0rem; } .linkTitle a, .linkTitle a:link, .linkTitle a:visited { position: relative; padding: 0.5rem 0.75rem 0.5rem 0.75rem; font: 1rem/115% "Raleway", sans-serif; font-weight: 400; transition: all 0.5s linear; letter-spacing: 1px; z-index: 20; text-transform: uppercase; border-radius: 0.25rem; display: flex; margin: 0.5rem auto 0rem; } .linkWrap a:hover, .linkTitle a:hover { filter: brightness(85%); text-decoration: none; } .text-primary .linkWrap a, .text-primary .linkWrap a:link, .text-primary .linkWrap a:visited { color: #f2f2f2 !important; background: #ffbc00; } .text-secondary .linkWrap a, .text-secondary .linkWrap a:link, .text-secondary .linkWrap a:visited { color: #f2f2f2 !important; background: #e99a3f; } .text-black .linkWrap a, .text-black .linkWrap a:link, .text-black .linkWrap a:visited { color: #f2f2f2 !important; background: #231f20; } .text-white .linkWrap a, .text-white .linkWrap a:link, .text-white .linkWrap a:visited { color: #231f20 !important; background: #f2f2f2; } .text-primary .linkWrap a:hover, text-secondary .linkWrap a:hover, .text-black .linkWrap a:hover, .text-white .linkWrap a:hover { filter: brightness(85%) !important; text-decoration: none; } .text-primary .linkTitle a, .text-primary .linkTitle a:link, .text-primary .linkTitle a:visited { color: #e99a3f; } .text-secondary .linkTitle a, .text-secondary .linkTitle a:link, .text-secondary .linkTitle a:visited { color: #ffbc00; } .text-black .linkTitle a, .text-black .linkTitle a:link, .text-black .linkTitle a:visited { color: #f2f2f2; } .text-white .linkTitle a, .text-white .linkTitle a:link, .text-white .linkTitle a:visited { color: #231f20; } .text-primary .linkTitle a:hover, .text-secondary .linkTitle a:hover, .text-black .linkTitle a:hover, .text-white .linkTitle a:hover { filter: brightness(85%) !important; } .multiple-buttons { display: contents; } .logo-buttons { display: block; } .handbook-buttons { display: block; } /* a.variableButton { margin-right: 2rem; } */ .button-preferred { border-radius: 0px; } .button-preferred, .button-preferred:visited { position: relative; display: inline-block; padding: 0.5rem 0.75rem 0.5rem 0.75rem; color: #231f20; background: #F6EC3C; font: 1rem/115% "Raleway", sans-serif; font-weight: 900; transition: all 0.5s linear; letter-spacing: 0rem; z-index: 20; text-transform: none; } .button-preferred:hover, .button-preferred:active { background-color: #F6EC3C; } .button-preferred.show { background-color: #F6EC3C; border: 1px solid #F6EC3C; } .dropdown-menu { border: none; border-radius: 0; --bs-dropdown-padding-y: 0rem; } .dropdown-menu.show { display: contents; } .preferredCopy { margin: -3rem 0rem 0rem 0.5rem; } a.btnSubscribe { margin-left: -0.125rem; } /* md */ @media (min-width: 768px) { a.btnSubscribe { margin: 0.5rem 1rem; } .multiple-buttons { display: inline-flex; } .logo-buttons { display: block; } .linkWrap a, .linkWrap a:link, .linkWrap a:visited, .linkTitle a, .linkTitle a:link, .linkTitle a:visited, .button-preferred, .button-preferred:visited { font: 1.25rem/115% "Raleway", sans-serif; font-weight: 400; padding: 0.5rem 1rem 0.5rem 1rem; letter-spacing: 1px; display: inline-block; margin: 0; } .preferredCopy { margin: -2rem 0rem 0rem 0.5rem; } .featureText .multiple-buttons { margin: 0px 20px !important; } } /* lg */ @media (min-width: 992px) { .preferredCopy { margin: 2rem 0rem 0rem 0rem; } } .splashWrap { display: inline-block; } .greenBtn, .orangeBtn, .blueBtn, .pinkBtn, .whiteBtn, .primaryBtn, .secondaryBtn, .tertiaryBtn, .blackBtn, .disabledBtn, .shareBtn { padding: 1rem; transition: all 0.5s linear; letter-spacing: 0px; z-index: 20; text-transform: lowercase; display: inline-block; margin: 0.5rem 1rem; text-align: center; font: 1.25rem/115% "Raleway", sans-serif; font-weight: 800; color: #231f20; text-transform: lowercase; transition: all 0.5s linear; letter-spacing: 0; text-decoration: none; text-decoration-color: none; width: auto; text-decoration: none !important; background-color: #ffda72; border: 0px solid #ffda72; border-radius: 0.25rem; padding: 0.75rem 1rem 1rem 1rem; } /* .greenBtn { background-color: $green; color: $black !important; } .orangeBtn { background-color: $orange; color: $black !important; } */ .blueBtn { background-color: #ffda72; color: #f2f2f2 !important; } /* .pinkBtn { background-color: $pink-lt; color: $white !important; } */ .whiteBtn { background-color: #f2f2f2; } .primaryBtn { background-color: #ffbc00; } .secondaryBtn { background-color: #e99a3f; } .tertiaryBtn { background-color: #efe3D3; } .blackBtn { background-color: #231f20; } .disabledBtn { background-color: #656262; pointer-events: none !important; } .splashWrapWhite a, .splashWrapWhite a:link, .splashWrapWhite a:visited { color: #f2f2f2 !important; } .splashWrapBlack a, .splashWrapBlack a:link, .splashWrapBlack a:visited { color: #231f20 !important; font-weight: 800; text-decoration: none; } .greenBtn:focus, .orangeBtn:focus, .blueBtn:focus, .pinkBtn:focus, .primaryBtn:focus, .secondaryBtn:focus, .tertiaryBtn:focus, .greenBtn:hover, .orangeBtn:hover, .blueBtn:hover, .pinkBtn:hover, .primaryBtn:hover, .secondaryBtn:hover, .tertiaryBtn:hover { filter: brightness(85%); text-decoration: none; } .primaryBtn a.variableButton { background-color: #ffbc00; } .secondaryBtn a.variableButton { background-color: #e99a3f; } .tertiaryBtn a.variableButton { background-color: #efe3D3; } #featureWidthButtons .primaryBtn, #featureWidthButtons .secondaryBtn, #featureWidthButtons .tertiaryBtn { margin: 0.5rem 2rem 0.5rem 0.25rem; } .bottomMenu { position: fixed; bottom: 100px; right: 60px; z-index: 1; transition: all 0.5s; z-index: 10000; } .hideMenu { opacity: 0; } .showMenu { opacity: 1; } /* html { box-sizing: border-box; } *, *::before, *::after { box-sizing: inherit; padding: 0; margin: 0; } body { font-family: -apple-system,BlinkMacSystemFont,San Francisco,Helvetica Neue,Helvetica,Ubuntu,Roboto,Noto,Segoe UI,Arial,sans-serif; } */ .hidden { display: none; } svg { width: 20px; height: 20px; margin-right: 7px; } img.shareSocial { width: 20px; height: 20px; margin-right: 7px; margin-top: -4px; } /* .button { display: inline-flex; align-items: center; justify-content: center; height: auto; padding-top: 8px; padding-bottom: 8px; color: #777; text-align: center; font-size: 14px; font-weight: 500; line-height: 1.1; letter-spacing: 2px; text-transform: capitalize; text-decoration: none; white-space: nowrap; border-radius: 4px; border: 1px solid #ddd; cursor: pointer; } .button { padding: 1rem; font: .8rem/115% setups.$buttonFont; @include setups.font-weight(extra-bold); transition: all .5s linear; letter-spacing: 1px; z-index: 20; text-transform: uppercase; border-radius: .25rem; //display: inherit; display: inline-block; //margin: .5rem 1rem; text-align: center; background-color: setups.$primary; border: none; } a.button, a.button:visited { margin: .25rem .25rem; display: block; } button:hover, .button:hover { //border-color: #cdd; } */ .share-button { margin-top: 0.7rem; } .copy-link { padding: 1rem 2rem; } .share-dialog { position: relative; width: auto; margin-right: auto; margin-left: auto; margin-top: -25%; } .share-dialog { display: none; width: 95%; max-width: 500px; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); z-index: -1; border: 1px solid #ddd; padding: 20px; border-radius: 0.25rem; background-color: #f2f2f2; } .share-dialog.is-open { display: block; z-index: 2; } header { display: flex; justify-content: space-between; margin-bottom: 20px; } .targets { display: grid; grid-template-rows: 0.125fr 0.125fr; grid-template-columns: 0.125fr 0.125fr; grid-gap: 0; margin-bottom: 1rem; } .close-button { background-color: transparent; border: none; padding: 0; } .close-button svg { margin-right: 0; } .link { display: flex; justify-content: center; align-items: center; padding: 10px; border-radius: 4px; background-color: #eee; } .reference-url { margin-right: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* @end Levy Buttons */ /* @end */ /* @group Videos and Page Headers */ /* ========================================================= Video and Header Styles - Lite Vimeo utility styles - Simplified Seravezza homepage hero carousel - New Seravezza page header system ========================================================= */ /* ========================================================= Lite Vimeo / Video Embed Utilities ========================================================= */ lite-vimeo { font-size: 10px; background-color: #ffffff; position: relative; display: block; contain: content; background-position: center center; background-size: cover; cursor: pointer; } lite-vimeo { background-color: #ffffff !important; } lite-vimeo.testimonialVids { background-color: transparent; border-radius: 0.5rem; } lite-vimeo::after { content: ""; display: block; padding-bottom: 56.25%; } lite-vimeo > iframe { width: 100%; height: auto; position: absolute; top: 0; left: 0; } /* play button */ lite-vimeo > .ltv-playbtn { width: 6.5em; height: 4em; background: rgba(23, 35, 34, 0.75); z-index: 1; opacity: 0.8; border-radius: 0.5em; transition: all 0.2s cubic-bezier(0, 0, 0.2, 1); outline: 0; border: 0; cursor: pointer; display: none !important; } lite-vimeo:hover > .ltv-playbtn { background-color: rgb(0, 173, 239); opacity: 1; display: none !important; } /* play button triangle */ lite-vimeo > .ltv-playbtn::before { content: ""; border-style: solid; border-width: 10px 0 10px 20px; border-color: transparent transparent transparent #fff; display: none !important; } lite-vimeo > .ltv-playbtn, lite-vimeo > .ltv-playbtn::before { position: absolute; top: 50%; left: 50%; transform: translate3d(-50%, -50%, 0); display: none !important; } /* Post-click styles */ lite-vimeo.ltv-activated { cursor: unset; } lite-vimeo.ltv-activated::before, lite-vimeo.ltv-activated > .ltv-playbtn { opacity: 0; pointer-events: none; } .headBlock { margin-top: 2rem; padding: 1rem 1.5rem; text-align: center; display: block; } .ratio-21x9 { --bs-aspect-ratio: 42.8571428571% !important; } /* ========================================================= Shared Seravezza Tagline / Kicker Band - used above homepage hero carousel - used above interior page headers ========================================================= */ .pageTaglineWrap { width: 100%; background-color: #e9e8e8; text-align: center; padding: clamp(0.7rem, 0.6rem + 0.6vw, 1.15rem) clamp(1rem, 0.75rem + 1vw, 2rem); border-bottom: 1px solid rgba(0, 0, 0, 0.04); } .pageTagline { margin: 0; color: #ffbc00; font-family: "Raleway", sans-serif; font-size: clamp(1.15rem, 0.95rem + 1.15vw, 2.35rem); font-weight: 800; line-height: 1.04; letter-spacing: clamp(0.005em, 0.005em + 0.03vw, 0.03em); text-transform: uppercase; padding: 1rem 1rem 0rem; } .pageTagline p { margin: 0; color: inherit; font: inherit; line-height: inherit; letter-spacing: inherit; text-transform: inherit; } .pageTagline em { font-family: "Raleway", sans-serif; font-weight: 400; font-size: 1.48em; line-height: 1; text-transform: lowercase; font-style: italic; letter-spacing: 0.015em; display: inline-block; transform: translateY(-0.06em); } /* ========================================================= Seravezza Homepage Hero Carousel - optional tagline band above carousel - optional logo/graphic over all slides - one homepage H1 over all slides - image-only carousel slides ========================================================= */ #imageFullspan { background-color: #000000; } .heroCarouselContainer { position: relative; width: 100%; background-color: #000; overflow: hidden; } #imageCarousel { position: relative; } .heroCarouselImage { position: relative; width: 100%; overflow: hidden; aspect-ratio: 1/1; background-color: #000; } .heroCarouselImage img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; } .heroCarouselOverlay { position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center; text-align: center; padding: clamp(1rem, 0.8rem + 1vw, 2rem); pointer-events: none; } .heroCarouselOverlayInner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(0.8rem, 0.6rem + 0.6vw, 1.25rem); max-width: min(92vw, 1200px); } .heroCarouselLogo { max-width: clamp(8rem, 6rem + 8vw, 18rem); width: 100%; height: auto; display: block; filter: drop-shadow(0 1px 12px rgba(0, 0, 0, 0.22)); } .heroCarouselHeadline { margin: 0; display: inline-flex; align-items: center; justify-content: center; gap: clamp(0.35rem, 0.25rem + 0.3vw, 0.65rem); max-width: min(92vw, 1100px); color: #f2f2f2; font-family: "Raleway", sans-serif; font-size: clamp(1.85rem, 1.35rem + 2.4vw, 4.4rem); font-weight: 800; line-height: 0.92; letter-spacing: clamp(0.02em, 0.015em + 0.05vw, 0.06em); text-transform: uppercase; text-align: center; text-shadow: 0 1px 14px rgba(0, 0, 0, 0.28); white-space: normal; } .heroCarouselHeadline .highlight { font-family: "Raleway", sans-serif; font-size: clamp(1.7em, 1.58em + 0.3vw, 2.05em); font-weight: 400; letter-spacing: clamp(0.01em, 0.008em + 0.02vw, 0.02em); text-transform: lowercase; display: inline-block; transform: translateY(-0.06em); } .heroCarouselContainer .carousel-control-prev, .heroCarouselContainer .carousel-control-next { z-index: 4; } /* Desktop image ratio */ @media (min-width: 576px) { .heroCarouselImage { aspect-ratio: 12/5; } .pageTagline { padding: 0rem 1rem 0rem; } } @media (max-width: 575.98px) { .heroCarouselHeadline { font-size: clamp(1.65rem, 1.3rem + 1.6vw, 2.35rem); line-height: 0.96; gap: 0.28rem; } .heroCarouselHeadline .highlight { font-size: 1.62em; } .heroCarouselLogo { max-width: clamp(7rem, 5rem + 10vw, 11rem); } } /* ========================================================= New Seravezza Page Header System - optional tagline / kicker - image-integrated white H1 title bar ========================================================= */ .pageHeadContainer { position: relative; width: 100%; background-color: transparent; margin: 0; padding: 0; overflow: hidden; } .pageHeadImage { position: relative; width: 100%; overflow: hidden; aspect-ratio: 1/1; background-color: #000; } .pageHeadImage img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; } .pageHeadTitleBarWrap { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; justify-content: center; pointer-events: none; } .pageHeadTitleBar { margin: 0; display: inline-flex; align-items: center; justify-content: center; gap: clamp(0.35rem, 0.25rem + 0.3vw, 0.65rem); width: 100%; padding: clamp(0.55rem, 0.45rem + 0.25vw, 0.8rem) clamp(1rem, 0.6rem + 2vw, 2.5rem); background-color: rgba(255, 255, 255, 0.75); border-bottom: 3px solid #efe3D3; text-align: center; pointer-events: auto; color: #ffbc00; font-family: "Raleway", sans-serif; font-size: clamp(1.1rem, 1rem + 0.6vw, 1.55rem); font-weight: 800; line-height: 1; letter-spacing: clamp(0.05em, 0.045em + 0.08vw, 0.1em); text-transform: uppercase; white-space: nowrap; } .pageHeadTitleBar .highlight { font-family: "Raleway", sans-serif; font-size: clamp(1.85em, 1.7em + 0.35vw, 2.2em); font-weight: 400; letter-spacing: clamp(0.01em, 0.008em + 0.02vw, 0.02em); text-transform: lowercase; display: inline-block; transform: translateY(-0.1em); } /* Desktop: taller than current Seravezza headers */ @media (min-width: 576px) { .pageHeadImage { aspect-ratio: 12/7; } .pageHeadTitleBar { width: 100%; } } @media (min-width: 1200px) { .pageHeadImage { aspect-ratio: 12/5.5; } } @media (max-width: 575.98px) { .pageHeadTitleBar { width: 100%; padding: 0.55rem 1rem; gap: 0.28rem; white-space: normal; line-height: 1.05; } .pageHeadTitleBar .highlight { font-size: 1.72em; } } /* @end */ /* @group General Use Text Blocks */ /* @group General Use Text Blocks */ /* xs */ /* sm */ @media (min-width: 576px) { .col-onecol { -webkit-column-count: 1; /* Chrome, Safari, Opera */ -moz-column-count: 1; /* Firefox */ column-count: 1; white-space: normal; break-inside: avoid; word-break: keep-all; padding: 0; margin-bottom: 0px; display: block; vertical-align: top; float: none; min-height: 40px; } .col-twocol { -webkit-column-count: 2; /* Chrome, Safari, Opera */ -moz-column-count: 2; /* Firefox */ column-count: 2; white-space: normal; break-inside: avoid; word-break: keep-all; padding: 0; margin-bottom: 0px; display: block; vertical-align: top; float: none; } .col-threecol { -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */ column-count: 3; white-space: normal; break-inside: avoid; word-break: keep-all; padding: 0; margin-bottom: 0px; display: block; vertical-align: top; float: none; } .col-fourcol { -webkit-column-count: 4; /* Chrome, Safari, Opera */ -moz-column-count: 4; /* Firefox */ column-count: 4; white-space: normal; break-inside: avoid; word-break: keep-all; padding: 0px 10px; margin-bottom: 0px; display: block; vertical-align: top; float: none; } .col-fivecol { -webkit-column-count: 5; /* Chrome, Safari, Opera */ -moz-column-count: 5; /* Firefox */ column-count: 5; white-space: normal; break-inside: avoid; word-break: keep-all; padding: 0px 10px; margin-bottom: 0px; display: block; vertical-align: top; float: none; } } /* md */ /* lg */ /* xl */ #generalUse p, #homepageText .leagueUse p { /* font: 1.25rem/125% setups.$bodyFont; @include setups.font-weight(normal); color: inherit; padding: 0px .5rem .5rem; z-index: 2; letter-spacing: .5px; */ padding: 0px 0.5rem 0.5rem; } #generalUse a, #homepageText .leagueUse a { /* font: inherit/inherit setups.$bodyFont; @include setups.font-weight(bold); color: setups.$primary; transition: all .5s linear 0s; */ } #generalUse a:hover, #homepageText .leagueUse a:hover { /* filter: brightness(85%); text-decoration: none; */ } #generalUse blockquote, #generalUse blockquote p, #generalUse bq, #generalUse bq p, #homepageText .leagueUse blockquote, #homepageText .leagueUse blockquote p, #homepageText .leagueUse bq, #homepageText .leagueUse bq p { /* font: 1.75rem/125% setups.$headerFont; @include setups.font-weight(normal); text-transform: uppercase; letter-spacing: 1.75px; */ } #generalUse h1, #generalUse h2, #generalUse h3, #generalUse h4, #generalUse h5, #generalUse h6, #generalUse .h1, #generalUse .h2, #generalUse .h3, #generalUse .h4, #generalUse .h5, #generalUse .h6, #homepageText .leagueUse h1, #homepageText .leagueUse h2, #homepageText .leagueUse h3, #homepageText .leagueUse h4, #homepageText .leagueUse h5, #homepageText .leagueUse h6, #homepageText .leagueUse .h1, #homepageText .leagueUse .h2, #homepageText .leagueUse .h3, #homepageText .leagueUse .h4, #homepageText .leagueUse .h5, #homepageText .leagueUse .h6 { /* font-family: setups.$headerFont; @include setups.font-weight(extra-bold); */ padding: 0px 0.5rem 0.5rem; } #generalUse h3.toggle, #homepageText .leagueUse h3.toggle { /* font: inherit/inherit setups.$bodyFont; @include setups.font-weight(extra-bold); color: setups.$primary; transition: all .5s linear 0s; */ } #generalUse h3.toggle:hover, #homepageText .leagueUse h3.toggle:hover { /* filter: brightness(85%); text-decoration: none; */ } #generalUse .typed, #homepageText .leagueUse .typed { font: 1.25rem/125% "Raleway", sans-serif; font-weight: 500; text-transform: lowercase; letter-spacing: 0.25px; } #generalUse .typed strong, #homepageText .leagueUse .typed strong { font-size: inherit; line-height: inherit; color: #af6406; letter-spacing: 0.5px; } #generalUse .typed-cursor, #homepageText .leagueUse .typed-cursor { font-family: "Raleway", sans-serif; font-weight: 800; font-size: 2.25rem; color: #af6406; line-height: 0; } #generalUse .typed:before, #homepageText .leagueUse .typed:before { content: "…"; position: absolute; margin-left: -1.25rem; } #generalUse .col-onecol, #generalUse .col-twocol, #generalUse .col-threecol, #generalUse .col-fourcol, #generalUse col-fivecol, #homepageText .leagueUse .col-onecol, #homepageText .leagueUse .col-twocol, #homepageText .leagueUse .col-threecol, #homepageText .leagueUse .col-fourcol, #homepageText .leagueUse col-fivecol { -webkit-column-count: 1; /* Chrome, Safari, Opera */ -moz-column-count: 1; /* Firefox */ column-count: 1; white-space: normal; break-inside: avoid; word-break: keep-all; padding: 0; margin-bottom: 0px; display: block; vertical-align: top; float: none; min-height: 40px; } #generalUse .col-onecol p, #generalUse .col-twocol p, #generalUse .col-threecol p, #generalUse .col-fourcol p, #generalUse .col-fivecol p, #homepageText .leagueUse .col-onecol p, #homepageText .leagueUse .col-twocol p, #homepageText .leagueUse .col-threecol p, #homepageText .leagueUse .col-fourcol p, #homepageText .leagueUse .col-fivecol p { display: block; vertical-align: top; white-space: normal; break-inside: avoid; word-break: keep-all; padding: 0; margin: 0; } #generalUse .copyBlock, #homepageText .leagueUse .copyBlock { display: flex; flex-wrap: wrap; width: 100%; } #generalUse .one, #generalUse .two, #generalUse .three, #generalUse .four, #generalUse .five, #homepageText .leagueUse .one, #homepageText .leagueUse .two, #homepageText .leagueUse .three, #homepageText .leagueUse .four, #homepageText .leagueUse .five { display: contents; } #generalUse .one .col-flex, #generalUse .two .col-flex, #generalUse .three .col-flex, #generalUse .four .col-flex, #generalUse .five .col-flex, #homepageText .leagueUse .one .col-flex, #homepageText .leagueUse .two .col-flex, #homepageText .leagueUse .three .col-flex, #homepageText .leagueUse .four .col-flex, #homepageText .leagueUse .five .col-flex { width: 100%; padding-right: calc(var(--bs-gutter-x) * 0.5); padding-left: calc(var(--bs-gutter-x) * 0.5); margin-top: var(--bs-gutter-y); } #generalUse hr.gen-rule, #homepageText .leagueUse hr.gen-rule { border-top: 2px solid #ffbc00; margin: 2rem auto 4rem; width: 60%; } #generalUse .footer-hours, #generalUse .transportDeets, #homepageText .leagueUse .footer-hours, #homepageText .leagueUse .transportDeets { text-align: left; padding: 0rem 0.33rem 0.125rem; margin: 0rem auto 0.25rem; } #generalUse span.toggleKey, #homepageText .leagueUse span.toggleKey { font: italic 0.75rem/70% "Raleway", sans-serif; font-weight: 400; color: inherit; padding: 0px 0.5rem 0.5rem; z-index: 2; letter-spacing: 0.5px; text-transform: uppercase; } #generalUse .text-bump, #homepageText .leagueUse .text-bump { color: #e1318d; } #generalUse, #homepageText .leagueUse { /* xs */ } #generalUse, #homepageText .leagueUse { /* sm */ } @media (min-width: 576px) { #generalUse .typed, #homepageText .leagueUse .typed { font: 1.4rem/125% "Raleway", sans-serif; font-weight: 500; } #generalUse .typed-cursor, #homepageText .leagueUse .typed-cursor { font-size: 2.25rem; line-height: 0; } #generalUse .typed:before, #homepageText .leagueUse .typed:before { margin-left: -1.4rem; } } #generalUse, #homepageText .leagueUse { /* md */ } @media (min-width: 768px) { #generalUse p, #homepageText .leagueUse p { /* font: 1.5rem/140% setups.$bodyFont; @include setups.font-weight(medium); //padding: 0px 2rem 1rem; */ } #generalUse blockquote, #generalUse blockquote p, #generalUse bq, #generalUse bq p, #homepageText .leagueUse blockquote, #homepageText .leagueUse blockquote p, #homepageText .leagueUse bq, #homepageText .leagueUse bq p { /* font: 2.25rem/125% setups.$bodyFont; //letter-spacing: 2.5px; */ } #generalUse .typed, #homepageText .leagueUse .typed { font: 1.8rem/125% "Raleway", sans-serif; font-weight: 500; } #generalUse .typed-cursor, #homepageText .leagueUse .typed-cursor { font-size: 3.6rem; line-height: 0; } #generalUse .typed:before, #homepageText .leagueUse .typed:before { margin-left: -1.8rem; } } @media (min-width: 992px) { #generalUse .one .col-flex, #homepageText .leagueUse .one .col-flex { width: 100%; } #generalUse .two .col-flex, #homepageText .leagueUse .two .col-flex { width: 50%; } #generalUse .three .col-flex, #homepageText .leagueUse .three .col-flex { width: 33%; } #generalUse .four .col-flex, #homepageText .leagueUse .four .col-flex { width: 25%; } #generalUse .five .col-flex, #homepageText .leagueUse .five .col-flex { width: 20%; } #generalUse .typed, #homepageText .leagueUse .typed { font: 2.6rem/125% "Raleway", sans-serif; font-weight: 500; } #generalUse .typed-cursor, #homepageText .leagueUse .typed-cursor { font-size: 3.5rem; line-height: 0; } #generalUse .typed:before, #homepageText .leagueUse .typed:before { margin-left: -2.6rem; } } #generalUse, #homepageText .leagueUse { /* xl */ } @media (min-width: 1200px) { #generalUse .typed, #homepageText .leagueUse .typed { font: 3.1rem/125% "Raleway", sans-serif; font-weight: 500; } #generalUse .typed-cursor, #homepageText .leagueUse .typed-cursor { font-size: 4.2rem; line-height: 0; } #generalUse .typed:before, #homepageText .leagueUse .typed:before { margin-left: -3.1rem; } } #generalUse, #homepageText .leagueUse { /* xxl */ } @media (min-width: 1400px) { #generalUse .typed, #homepageText .leagueUse .typed { font: 3.65rem/125% "Raleway", sans-serif; font-weight: 500; } #generalUse .typed-cursor, #homepageText .leagueUse .typed-cursor { font-size: 5rem; line-height: 0; } } #portfolioUse p { padding: 0px 0.5rem 0.5rem; } #portfolioUse h1, #portfolioUse h2, #portfolioUse h3, #portfolioUse h4, #portfolioUse h5, #portfolioUse h6, #portfolioUse .h1, #portfolioUse .h2, #portfolioUse .h3, #portfolioUse .h4, #portfolioUse .h5, #portfolioUse .h6 { font-family: "Raleway", sans-serif; font-weight: 800; font-style: normal; line-height: 1.1; color: #231f20; padding: 0; margin-bottom: 2rem; } #portfolioUse h1 { font-size: 64px; } #portfolioUse h2 { font-size: 40px; } #portfolioUse h3 { font-size: 28px; } #portfolioUse h4 { font-size: 36px; } #portfolioUse h5 { font-size: 28px; } #portfolioUse h6 { font-size: 20px; } #portfolioUse .typed { font: 1.25rem/125% "Raleway", sans-serif; font-weight: 500; text-transform: lowercase; letter-spacing: 0.25px; } #portfolioUse .typed strong { font-size: inherit; line-height: inherit; color: #e99a3f; letter-spacing: 0.5px; } #portfolioUse .typed-cursor { font-family: "Raleway", sans-serif; font-weight: 800; font-size: 2.25rem; color: #e99a3f; line-height: 0; } #portfolioUse .typed:before { content: "…"; position: absolute; margin-left: -1.25rem; } #portfolioUse .col-onecol, #portfolioUse .col-twocol, #portfolioUse .col-threecol, #portfolioUse .col-fourcol, #portfolioUse col-fivecol { -webkit-column-count: 1; /* Chrome, Safari, Opera */ -moz-column-count: 1; /* Firefox */ column-count: 1; white-space: normal; break-inside: avoid; word-break: keep-all; padding: 0; margin-bottom: 0px; display: block; vertical-align: top; float: none; min-height: 40px; } #portfolioUse .col-onecol p, #portfolioUse .col-twocol p, #portfolioUse .col-threecol p, #portfolioUse .col-fourcol p, #portfolioUse .col-fivecol p { display: block; vertical-align: top; white-space: normal; break-inside: avoid; word-break: keep-all; padding: 0; margin: 0; } #portfolioUse .copyBlock { display: flex; flex-wrap: wrap; width: 100%; } #portfolioUse .one, #portfolioUse .two, #portfolioUse .three, #portfolioUse .four, #portfolioUse .five { display: contents; } #portfolioUse .one .col-flex, #portfolioUse .two .col-flex, #portfolioUse .three .col-flex, #portfolioUse .four .col-flex, #portfolioUse .five .col-flex { width: 100%; padding-right: calc(var(--bs-gutter-x) * 0.5); padding-left: calc(var(--bs-gutter-x) * 0.5); margin-top: var(--bs-gutter-y); } #portfolioUse hr.gen-rule { border-top: 2px solid #ffbc00; margin: 2rem auto 4rem; width: 60%; } #portfolioUse .footer-hours, #portfolioUse .transportDeets { text-align: left; padding: 0rem 0.33rem 0.125rem; margin: 0rem auto 0.25rem; } #portfolioUse span.toggleKey { font: italic 0.75rem/70% "Raleway", sans-serif; font-weight: 400; color: inherit; padding: 0px 0.5rem 0.5rem; z-index: 2; letter-spacing: 0.5px; text-transform: uppercase; } #portfolioUse .text-bump { color: #e1318d; } #portfolioUse { /* xs */ } #portfolioUse { /* sm */ } @media (min-width: 576px) { #portfolioUse .typed { font: 1.4rem/125% "Raleway", sans-serif; font-weight: 500; } #portfolioUse .typed-cursor { font-size: 2.25rem; line-height: 0; } #portfolioUse .typed:before { margin-left: -1.4rem; } } #portfolioUse { /* md */ } @media (min-width: 768px) { #portfolioUse .typed { font: 1.8rem/125% "Raleway", sans-serif; font-weight: 500; } #portfolioUse .typed-cursor { font-size: 3.6rem; line-height: 0; } #portfolioUse .typed:before { margin-left: -1.8rem; } } #portfolioUse { /* lg */ } @media (min-width: 992px) { #portfolioUse h1, #portfolioUse h2, #portfolioUse h3, #portfolioUse h4, #portfolioUse h5, #portfolioUse h6, #portfolioUse .h1, #portfolioUse .h2, #portfolioUse .h3, #portfolioUse .h4, #portfolioUse .h5, #portfolioUse .h6 { margin-bottom: 4rem; } #portfolioUse h1 { font-size: 112px; } #portfolioUse h2 { font-size: 88px; } #portfolioUse h3 { font-size: 64px; } #portfolioUse h4 { font-size: 48px; } #portfolioUse h5 { font-size: 32px; } #portfolioUse h6 { font-size: 24px; } #portfolioUse .one .col-flex { width: 100%; } #portfolioUse .two .col-flex { width: 50%; } #portfolioUse .three .col-flex { width: 33%; } #portfolioUse .four .col-flex { width: 25%; } #portfolioUse .five .col-flex { width: 20%; } #portfolioUse .typed { font: 2.6rem/125% "Raleway", sans-serif; font-weight: 500; } #portfolioUse .typed-cursor { font-size: 3.5rem; line-height: 0; } #portfolioUse .typed:before { margin-left: -2.6rem; } } #portfolioUse { /* xl */ } @media (min-width: 1200px) { #portfolioUse .typed { font: 3.1rem/125% "Raleway", sans-serif; font-weight: 500; } #portfolioUse .typed-cursor { font-size: 4.2rem; line-height: 0; } #portfolioUse .typed:before { margin-left: -3.1rem; } } #portfolioUse { /* xxl */ } @media (min-width: 1400px) { #portfolioUse .typed { font: 3.65rem/125% "Raleway", sans-serif; font-weight: 500; } #portfolioUse .typed-cursor { font-size: 5rem; line-height: 0; } } .homepageText { background: #f2f2f2; margin: 7.5rem auto 2rem; min-height: 6rem; } /* sm */ @media (min-width: 576px) { #generalUse .copyBlock h2 { padding-bottom: 10px; } .homepageText { min-height: 6rem; } } /* md */ @media (min-width: 768px) { .homepageText { min-height: 8rem; margin: 7.875rem auto 3rem; } } /* lg */ @media (min-width: 992px) { .homepageText { min-height: 10rem; margin: 8.25rem auto 4rem; } } /* xl */ @media (min-width: 1200px) { .homepageText { min-height: 14rem; margin: 10rem auto 5rem; } } /* @end */ /* @group Shaded Use Text Blocks */ /* @group Shaded Use Text Blocks */ /* xs */ /* sm */ @media (min-width: 576px) { .col-onecol { -webkit-column-count: 1; /* Chrome, Safari, Opera */ -moz-column-count: 1; /* Firefox */ column-count: 1; white-space: normal; break-inside: avoid; word-break: keep-all; padding: 0; margin-bottom: 0px; display: block; vertical-align: top; float: none; min-height: 40px; } .col-twocol { -webkit-column-count: 2; /* Chrome, Safari, Opera */ -moz-column-count: 2; /* Firefox */ column-count: 2; white-space: normal; break-inside: avoid; word-break: keep-all; padding: 0; margin-bottom: 0px; display: block; vertical-align: top; float: none; } .col-threecol { -webkit-column-count: 3; /* Chrome, Safari, Opera */ -moz-column-count: 3; /* Firefox */ column-count: 3; white-space: normal; break-inside: avoid; word-break: keep-all; padding: 0; margin-bottom: 0px; display: block; vertical-align: top; float: none; } .col-fourcol { -webkit-column-count: 4; /* Chrome, Safari, Opera */ -moz-column-count: 4; /* Firefox */ column-count: 4; white-space: normal; break-inside: avoid; word-break: keep-all; padding: 0px 10px; margin-bottom: 0px; display: block; vertical-align: top; float: none; } .col-fivecol { -webkit-column-count: 5; /* Chrome, Safari, Opera */ -moz-column-count: 5; /* Firefox */ column-count: 5; white-space: normal; break-inside: avoid; word-break: keep-all; padding: 0px 10px; margin-bottom: 0px; display: block; vertical-align: top; float: none; } } /* md */ /* lg */ @media (min-width: 992px) { .one, .two, .three, .four, .five { display: flex; } /* .one .col-flex, .two .col-flex, .three .col-flex, .four .col-flex, .five .col-flex { width: 95%; //padding-right: calc(var(--bs-gutter-x) * .5); //padding-left: calc(var(--bs-gutter-x) * .5); //margin-top: var(--bs-gutter-y); background-color: $grey-xlt; margin: 10px 2.5% 10px; padding: .5rem calc(var(--bs-gutter-x) * .5) .5rem ; min-height: 200px; } .four .col-flex:hover { text-color: $white !important; //text-decoration: none !important; background-color: $red !important; //cursor: pointer; //transition-property: color .5s; } */ /* .four .col-flex.pressLinks { width: 95%; //padding-right: calc(var(--bs-gutter-x) * .5); //padding-left: calc(var(--bs-gutter-x) * .5); //margin-top: var(--bs-gutter-y); background-color: $white; margin: 10px 2.5% 10px; padding: .5rem calc(var(--bs-gutter-x) * .5) .5rem ; min-height: 200px; border-radius: 9px; border: 3px solid #ffffff; } .four .col-flex.pressLinks:hover { //text-color: $white !important; //text-decoration: none !important; background-color: $white !important; //cursor: pointer; //transition-property: color .5s; border: 3px solid $grey-xlt; } */ .four .col-flex.pressLinks { width: 20% !important; margin: 10px 2.5% 10px !important; padding: 1.5rem calc(var(--bs-gutter-x) * 1) 1.5rem; min-height: 200px; } .col-flex.shadeLinks, .col-flex.pressLinks { padding: 30px; } .pressThumb img { width: 100%; height: auto; } .col-flex.display-flex { display: flex; } } /* xl */ #shadedUse p { font-family: "Raleway", sans-serif; font-weight: 500; color: #231f20; line-height: 115%; padding: 0px 0rem 1rem; margin-bottom: 0; } #shadedUse .shadeLinks p { color: #ea4436; } #shadedUse .shadeLinks:hover p, #shadedUse .shadeLinks:hover a { color: #f2f2f2; } #shadedUse .pressLinks p { color: #ffbc00; } #shadedUse .pressLinks:hover p, #shadedUse .pressLinks:hover a { color: #cc9600; } #shadedUse a { text-decoration: none; } #shadedUse strong { color: #ea4436; } #shadedUse blockquote p { font-family: "Raleway", sans-serif; font-weight: 500; color: inherit; font-size: inherit; line-height: inherit; text-transform: uppercase; } #shadedUse .venues p { font-family: "Raleway", sans-serif; font-weight: 500; color: #231f20; text-transform: uppercase; } #shadedUse .pressLinks h4 { font: 1rem/125% "Raleway", sans-serif; font-weight: 500; color: #231f20; letter-spacing: 0; } #shadedUse .pressLinks h3 { font: 0.75rem/125% "Raleway", sans-serif; font-weight: 500; color: #231f20; letter-spacing: 0; padding-top: 0.33rem; } #shadedUse h3, #shadedUse .h3 { font-family: "Raleway", sans-serif; font-weight: 400; text-transform: uppercase; } #shadedUse h3 strong, #shadedUse .h3 strong { font: 2rem/115% "Raleway", sans-serif; font-weight: 400; color: #ea4436; text-transform: uppercase; } #shadedUse h4, #shadedUse .h4 { font: 1.5rem/115% "Raleway", sans-serif; font-weight: 400; text-transform: uppercase; } #shadedUse .col-onecol, #shadedUse .col-twocol, #shadedUse .col-threecol, #shadedUse .col-fourcol, #shadedUse col-fivecol { -webkit-column-count: 1; /* Chrome, Safari, Opera */ -moz-column-count: 1; /* Firefox */ column-count: 1; white-space: normal; break-inside: avoid; word-break: keep-all; padding: 0; margin-bottom: 0px; display: block; vertical-align: top; float: none; min-height: 40px; } #shadedUse .col-onecol p, #shadedUse .col-twocol p, #shadedUse .col-threecol p, #shadedUse .col-fourcol p, #shadedUse .col-fivecol p { display: block; vertical-align: top; white-space: normal; break-inside: avoid; word-break: keep-all; padding: 0; margin: 0; } #shadedUse .copyBlock { display: flex; flex-wrap: wrap; width: 100%; } #shadedUse .one, #shadedUse .two, #shadedUse .three, #shadedUse .four, #shadedUse .five { display: contents; } #shadedUse .one .col-flex, #shadedUse .two .col-flex, #shadedUse .three .col-flex, #shadedUse .four .col-flex, #shadedUse .five .col-flex { width: 95%; margin: 10px 2.5% 10px; padding: 0.5rem calc(var(--bs-gutter-x) * 0.5) 0.5rem; min-height: 200px; } #shadedUse { /* .four .col-flex.pressLinks { width: 23%; //padding-right: calc(var(--bs-gutter-x) * .5); //padding-left: calc(var(--bs-gutter-x) * .5); //margin-top: var(--bs-gutter-y); background-color: $white; margin: 10px 1% 10px; padding: .75rem calc(var(--bs-gutter-x) * .5) .5rem ; min-height: 200px; border-radius: 9px; border: 3px solid #ffffff; } .four .col-flex.pressLinks:hover { //text-color: $white !important; //text-decoration: none !important; background-color: $white !important; //cursor: pointer; //transition-property: color .5s; border: 3px solid $grey-xlt; } */ } #shadedUse .four .col-flex.pressLinks { width: 90%; margin: 10px 5% 10px; padding: 2rem calc(var(--bs-gutter-x) * 1.5) 1rem; min-height: 200px; border-radius: 0.5rem; border: 0.25rem solid #ffbc00; transition: border-color 0.5s ease; } #shadedUse .four .col-flex.pressLinks:hover { background-color: #f2f2f2 !important; border: 0.25rem solid #cc9600; } #shadedUse .col-flex.shadeLinks, #shadedUse .col-flex.pressLinks { padding: 30px; } #shadedUse .pressThumb img { width: 100%; height: auto; } #shadedUse .col-flex.display-flex { display: flex; } #shadedUse .foundHead { width: 15%; } #shadedUse .foundHead h3 { font: 4rem/115% "Raleway", sans-serif; font-weight: 400; color: #ea4436; padding: 0px 0rem 1rem; margin-bottom: 0; } #shadedUse .foundBody { width: 85%; } #shadedUse .foundBody h4 { font: 2.4rem/100% "Raleway", sans-serif; font-weight: 400; color: #231f20; text-transform: uppercase; padding-top: 10px; } #shadedUse .foundHead p, #shadedUse .foundBody p { font: 1em/150% "Raleway", sans-serif; font-weight: 500; color: #231f20; } @media (min-width: 992px) { #shadedUse .one .col-flex { width: 90%; margin: 20px 5% 10px; } #shadedUse .two .col-flex { width: 43%; margin: 20px 3.5% 10px; } #shadedUse .three .col-flex { width: 30%; margin: 20px 1.5% 10px; } #shadedUse .four .col-flex { width: 22%; margin: 20px 1.5% 10px; } #shadedUse .five .col-flex { width: 18%; margin: 20px 1% 10px; } } #shadedUse { background: transparent; margin: 50px auto; } #pressUse p { font-family: "Raleway", sans-serif; font-weight: 500; color: #231f20; line-height: 115%; padding: 0px 0rem 1rem; margin-bottom: 0; } #pressUse .shadeLinks p { color: #ea4436; } #pressUse .shadeLinks:hover p, #pressUse .shadeLinks:hover a { color: #f2f2f2; } #pressUse .pressLinks p { color: #ffbc00; } #pressUse .pressLinks:hover p, #pressUse .pressLinks:hover a { color: #cc9600; } #pressUse a { text-decoration: none; } #pressUse strong { color: #ea4436; } #pressUse blockquote p { font-family: "Raleway", sans-serif; font-weight: 500; color: inherit; font-size: inherit; line-height: inherit; text-transform: uppercase; } #pressUse .venues p { font-family: "Raleway", sans-serif; font-weight: 500; color: #231f20; text-transform: uppercase; } #pressUse .pressLinks h4 { font: 1rem/125% "Raleway", sans-serif; font-weight: 500; color: #231f20; letter-spacing: 0; } #pressUse .pressLinks h3 { font: 0.75rem/125% "Raleway", sans-serif; font-weight: 500; color: #231f20; letter-spacing: 0; padding-top: 0.33rem; } #pressUse h3, #pressUse .h3 { font-family: "Raleway", sans-serif; font-weight: 400; text-transform: uppercase; } #pressUse h3 strong, #pressUse .h3 strong { font: 2rem/115% "Raleway", sans-serif; font-weight: 400; color: #ea4436; text-transform: uppercase; } #pressUse h4, #pressUse .h4 { font: 1.5rem/115% "Raleway", sans-serif; font-weight: 400; text-transform: uppercase; } #pressUse .col-onecol, #pressUse .col-twocol, #pressUse .col-threecol, #pressUse .col-fourcol, #pressUse col-fivecol { -webkit-column-count: 1; /* Chrome, Safari, Opera */ -moz-column-count: 1; /* Firefox */ column-count: 1; white-space: normal; break-inside: avoid; word-break: keep-all; padding: 0; margin-bottom: 0px; display: block; vertical-align: top; float: none; min-height: 40px; } #pressUse .col-onecol p, #pressUse .col-twocol p, #pressUse .col-threecol p, #pressUse .col-fourcol p, #pressUse .col-fivecol p { display: block; vertical-align: top; white-space: normal; break-inside: avoid; word-break: keep-all; padding: 0; margin: 0; } #pressUse .copyBlock { display: flex; flex-wrap: wrap; width: 100%; } #pressUse .one, #pressUse .two, #pressUse .three, #pressUse .four, #pressUse .five { display: contents; } #pressUse .one .col-flex, #pressUse .two .col-flex, #pressUse .three .col-flex, #pressUse .four .col-flex, #pressUse .five .col-flex { width: 95%; margin: 10px 2.5% 10px; padding: 0.5rem calc(var(--bs-gutter-x) * 0.5) 0.5rem; min-height: 200px; } #pressUse { /* .four .col-flex.pressLinks { width: 23%; //padding-right: calc(var(--bs-gutter-x) * .5); //padding-left: calc(var(--bs-gutter-x) * .5); //margin-top: var(--bs-gutter-y); background-color: $white; margin: 10px 1% 10px; padding: .75rem calc(var(--bs-gutter-x) * .5) .5rem ; min-height: 200px; border-radius: 9px; border: 3px solid #ffffff; } .four .col-flex.pressLinks:hover { //text-color: $white !important; //text-decoration: none !important; background-color: $white !important; //cursor: pointer; //transition-property: color .5s; border: 3px solid $grey-xlt; } */ } #pressUse .four .col-flex.pressLinks { width: 90%; margin: 10px 5% 10px; padding: 2rem calc(var(--bs-gutter-x) * 1.5) 1rem; min-height: 200px; border-radius: 0.5rem; border: 0.25rem solid #ffbc00; transition: border-color 0.5s ease; } #pressUse .four .col-flex.pressLinks:hover { background-color: #f2f2f2 !important; border: 0.25rem solid #cc9600; } #pressUse .col-flex.shadeLinks, #pressUse .col-flex.pressLinks { padding: 30px; } #pressUse .pressThumb img { width: 100%; height: auto; } #pressUse .col-flex.display-flex { display: flex; } #pressUse .foundHead { width: 15%; } #pressUse .foundHead h3 { font: 4rem/115% "Raleway", sans-serif; font-weight: 400; color: #ea4436; padding: 0px 0rem 1rem; margin-bottom: 0; } #pressUse .foundBody { width: 85%; } #pressUse .foundBody h4 { font: 2.4rem/100% "Raleway", sans-serif; font-weight: 400; color: #231f20; text-transform: uppercase; padding-top: 10px; } #pressUse .foundHead p, #pressUse .foundBody p { font: 1em/150% "Raleway", sans-serif; font-weight: 500; color: #231f20; } @media (min-width: 992px) { #pressUse .one .col-flex { width: 90%; margin: 20px 5% 10px; } #pressUse .two .col-flex { width: 43%; margin: 20px 3.5% 10px; } #pressUse .three .col-flex { width: 30%; margin: 20px 1.5% 10px; } #pressUse .four .col-flex { width: 22%; margin: 20px 1.5% 10px; } #pressUse .five .col-flex { width: 18%; margin: 20px 1% 10px; } } /* @end */ /* @end */ /* @group New Seravezza Specific Text Blocks */ /* ========================================================= Seravezza Menu System Main import file Replace the old oversized _textMenus.scss with this import chain, then keep the legacy file archived separately. ========================================================= */ /* ========================================================= Seravezza Menu Core Shared UI elements: - icons - panel buttons - local selector - intro panel - page-level wrappers ========================================================= */ .menu-icon { display: inline-block; width: 1.125rem; height: 1.125rem; margin: 0; background-size: 100% 100%; } @media (min-width: 992px) { .menu-icon { width: 1.25rem; height: 1.25rem; } } .menu-icon.gluten-free { background: transparent url("../svg/menu-icon-glutenFree.svg") center center no-repeat; } .menu-icon.dairy-free { background: transparent url("../svg/menu-icon-dairyFree.svg") center center no-repeat; } .menu-icon.vegetarian { background: transparent url("../svg/menu-icon-vegetarian.svg") center center no-repeat; } .menu-icon.vegan { background: transparent url("../svg/menu-icon-vegan.svg") center center no-repeat; } .menu-panel-stack { display: flex; flex-direction: column; align-items: center; gap: clamp(0.9rem, 0.75rem + 0.4vw, 1.2rem); } .menu-panel-stack-inline { flex-direction: row; flex-wrap: wrap; justify-content: center; margin-top: clamp(1rem, 0.8rem + 0.6vw, 1.5rem); } .menu-panel-btn, .menu-panel-btn:link, .menu-panel-btn:visited { --panel-border: rgba(0, 45, 67, 0.9); --panel-text: #ffbc00; --panel-bg: rgba(0, 45, 67, 0.06); --panel-shadow: rgba(0, 0, 0, 0.08); --panel-hover-border: rgba(201, 162, 103, 0.95); --panel-hover-bg: rgba(201, 162, 103, 0.08); --panel-hover-glow: rgba(201, 162, 103, 0.28); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; gap: clamp(0.18rem, 0.16rem + 0.12vw, 0.32rem); width: auto; min-width: 16rem; min-height: clamp(3.45rem, 3.2rem + 0.45vw, 3.9rem); padding: clamp(0.85rem, 0.75rem + 0.25vw, 1rem) clamp(1.25rem, 1rem + 0.8vw, 1.9rem); box-sizing: border-box; vertical-align: middle; background-color: var(--panel-bg); border: 2px solid var(--panel-border); box-shadow: 0 2px 8px var(--panel-shadow), inset 0 0 0 1px rgba(255, 255, 255, 0.08); color: var(--panel-text); text-decoration: none !important; text-align: center; text-transform: uppercase; line-height: 1; white-space: nowrap; font-family: "Besley", serif; font-size: clamp(1.05rem, 0.96rem + 0.28vw, 1.28rem); font-weight: 800; letter-spacing: clamp(0.04em, 0.038em + 0.03vw, 0.065em); transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease; } .menu-panel-btn .label { display: inline-block; position: relative; } .menu-panel-btn .highlight { display: inline-block; font-family: "Raleway", sans-serif; font-size: clamp(1.72em, 1.58em + 0.22vw, 2.02em); font-weight: 400; letter-spacing: clamp(0.008em, 0.006em + 0.02vw, 0.018em); line-height: 1; text-transform: lowercase; transform: translateY(-0.08em); } .menu-panel-btn--sm { min-height: 2.8rem; font-size: 0.9rem; padding: 0.6rem 1.2rem; letter-spacing: 0.05em; } .menu-panel-btn--sm .highlight { font-size: 1.5em; } @media (hover: hover) and (pointer: fine) { .menu-panel-btn:hover { background-color: var(--panel-hover-bg); border-color: var(--panel-hover-border); color: var(--panel-text); text-decoration: none !important; transform: none; box-shadow: 0 0 0 1px rgba(201, 162, 103, 0.16), 0 0 20px 2px var(--panel-hover-glow), 0 2px 8px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.06); } } .menu-panel-btn:active { background-color: rgba(0, 45, 67, 0.08); border-color: var(--panel-hover-border); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.04); transform: none; } .menu-panel-btn:focus, .menu-panel-btn:focus-visible { outline: 2px solid rgba(201, 162, 103, 0.9); outline-offset: 3px; text-decoration: none !important; } .ser-menu-local-nav { width: 100%; max-width: 32rem; margin: clamp(2rem, 1.5rem + 1.5vw, 3rem) auto; padding: 0 1rem; text-align: left; } .ser-menu-local-nav-label { display: block; margin: 0 0 0.4rem; color: #ffbc00; font-family: "Besley", serif; font-size: 0.9rem; font-weight: 800; letter-spacing: 0.08em; line-height: 1; text-transform: uppercase; } .ser-menu-local-nav-select { display: block; width: 100%; min-height: 3rem; padding: 0.7rem 3rem 0.7rem 1rem; border: 2px solid rgba(0, 45, 67, 0.2); border-radius: 0; background-color: rgba(255, 255, 255, 0.55); color: #ffbc00; font-family: "Besley", serif; font-size: 1rem; font-weight: 800; letter-spacing: 0.04em; line-height: 1.2; text-transform: uppercase; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: linear-gradient(45deg, transparent 50%, #ffbc00 50%), linear-gradient(135deg, #ffbc00 50%, transparent 50%); background-position: calc(100% - 1.1rem) calc(50% - 0.15rem), calc(100% - 0.8rem) calc(50% - 0.15rem); background-size: 0.35rem 0.35rem, 0.35rem 0.35rem; background-repeat: no-repeat; } .ser-menu-local-nav-select:focus, .ser-menu-local-nav-select:focus-visible { outline: 2px solid rgba(201, 162, 103, 0.9); outline-offset: 3px; border-color: rgba(201, 162, 103, 0.75); } /* ========================================================= Seravezza Menu Panels ========================================================= */ .menuBlock { display: block; margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); padding-bottom: 0; text-align: center; width: 100%; } .menuBlock > a, .menuBlock > div { display: block; } .menuBlock img { display: block; width: 100%; height: auto; margin: 0 0 clamp(0.75rem, 0.5rem + 0.8vw, 1.25rem); padding: 0; object-fit: cover; } .menuBlock .menu-panel-btn, .menuBlock .menu-panel-btn:link, .menuBlock .menu-panel-btn:visited { width: min(80%, 16rem); margin-left: auto; margin-right: auto; } .menuTitle { margin: 0 0 clamp(1rem, 0.75rem + 0.8vw, 1.5rem); padding: 0; color: #ffbc00; font-family: "Besley", serif; font-size: clamp(1.15rem, 1rem + 0.6vw, 1.6rem); font-weight: 800; letter-spacing: 0.08em; line-height: 1.15; text-transform: uppercase; text-align: center; } .menuBlockWrap, .menuLandingGrid .col, .menuLandingGrid [class*=col-] { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3rem); } @media (min-width: 991px) { .menuBlock .menu-panel-btn, .menuBlock .menu-panel-btn:link, .menuBlock .menu-panel-btn:visited { width: min(60%, 12rem); margin-left: auto; margin-right: auto; } } @media (min-width: 1200px) { .menuBlock img { width: 80%; margin-left: auto; margin-right: auto; } } /* ========================================================= Seravezza Menus Landing Image Cards Used by: _seravezza / Seravezza Menu Blocks.html Notes: - Image is not clickable. - Only the centered overlay button is clickable. - This reuses the homepage .ser-menu-btn button system. - Button is centered horizontally and hangs off the bottom edge of the image, matching the approved visual direction. ========================================================= */ .menuBlock--landing { display: block; width: 100%; margin-bottom: clamp(3rem, 2.5rem + 1.5vw, 4rem); padding-bottom: 0; text-align: center; } .menuBlock--landing .menuBlock-imageWrap { position: relative; display: block; width: min(90%, 36rem); max-width: none; margin: 0 auto; padding: 0; overflow: hidden; border-radius: 0.5rem; } .menuBlock--landing .menuBlock-imageWrap img { display: block; width: 100%; max-width: none; aspect-ratio: 16/9; height: auto; margin: 0; padding: 0; object-fit: cover; } .menuBlock--landing .ser-menu-btn--menuLanding, .menuBlock--landing .ser-menu-btn--menuLanding:link, .menuBlock--landing .ser-menu-btn--menuLanding:visited { position: absolute; left: 50%; top: 50%; z-index: 5; transform: translate(-50%, -50%); min-width: clamp(10.75rem, 9.5rem + 2.25vw, 13.5rem); min-height: clamp(2.55rem, 2.25rem + 0.6vw, 3rem); padding: clamp(0.62rem, 0.54rem + 0.28vw, 0.78rem) clamp(1.05rem, 0.9rem + 0.8vw, 1.65rem); backdrop-filter: blur(4px); background-color: rgba(232, 226, 219, 0.79); border-color: rgba(0, 45, 67, 0.46); color: #ffbc00; font-size: clamp(0.76rem, 0.69rem + 0.24vw, 0.94rem); text-shadow: none; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14), inset 1px 1px 1px rgba(255, 255, 255, 0.32), inset -3px -3px 7px rgba(0, 0, 0, 0.08); } .menuBlock--landing .ser-menu-btn--menuLanding .label, .menuBlock--landing .ser-menu-btn--menuLanding .highlight { color: #ffbc00; } .menuBlock--landing .ser-menu-btn--menuLanding:focus, .menuBlock--landing .ser-menu-btn--menuLanding:focus-visible { outline: 2px solid rgba(201, 162, 103, 0.95); outline-offset: 3px; } @media (hover: hover) and (pointer: fine) { .menuBlock--landing .ser-menu-btn--menuLanding:hover { transform: translate(-50%, -50%); background-color: rgba(232, 226, 219, 0.9); border-color: rgba(0, 45, 67, 0.68); color: #ffbc00; box-shadow: 0 5px 16px rgba(0, 0, 0, 0.18), inset 1px 1px 1px rgba(255, 255, 255, 0.36), inset -2px -2px 5px rgba(0, 0, 0, 0.08); } } @media (min-width: 1200px) { .menuBlock--landing .menuBlock-imageWrap img { width: 100%; margin-left: 0; margin-right: 0; } } @media (max-width: 767.98px) { .menuBlock--landing { margin-bottom: 3.25rem; } .menuBlock--landing .ser-menu-btn--menuLanding, .menuBlock--landing .ser-menu-btn--menuLanding:link, .menuBlock--landing .ser-menu-btn--menuLanding:visited { min-width: 10rem; } } .menuCardSummary { max-width: 32rem; margin: 0 auto clamp(1rem, 0.8rem + 0.5vw, 1.4rem); } .menuCardSummary p { margin: 0; padding: 0; color: #ffbc00; font-family: "Raleway", sans-serif; font-size: clamp(1rem, 0.95rem + 0.2vw, 1.1rem); line-height: 1.55; text-align: center; } #menuPage { margin-top: clamp(2rem, 1.5rem + 1vw, 3rem); margin-bottom: clamp(4rem, 3rem + 2vw, 6rem); margin-left: auto; margin-right: auto; } .menuIntroPanel { max-width: 50rem; margin: clamp(2.25rem, 2rem + 1vw, 3.5rem) auto clamp(3rem, 2.5rem + 1.5vw, 4.5rem); padding: clamp(1.25rem, 1rem + 0.8vw, 1.85rem); background-color: rgba(214, 204, 196, 0.55); border: 1px solid rgba(201, 189, 178, 0.9); box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.2); text-align: center; } .menuIntroPanel-kicker { display: block; margin: 0 0 0.45rem; color: #ffbc00; font-family: "Besley", serif; font-size: clamp(0.78rem, 0.72rem + 0.12vw, 0.9rem); font-weight: 800; letter-spacing: 0.12em; line-height: 1.1; text-transform: uppercase; } .menuIntroPanel-body { max-width: 42rem; margin: 0 auto; color: #ffbc00; font-family: "Raleway", sans-serif; font-size: clamp(1.2rem, 1.05rem + 0.45vw, 1.55rem); font-weight: 400; line-height: 1.35; } .menuIntroPanel-body p { margin: 0; padding: 0; color: inherit; font: inherit; line-height: inherit; } @media (max-width: 575.98px) { .menuIntroPanel { max-width: calc(100% - 2rem); padding: 1rem 0.9rem; margin-top: 1.75rem; margin-bottom: 2.5rem; } .menuIntroPanel-body { font-size: 1.05rem; line-height: 1.32; } .menu-panel-stack-inline { flex-direction: column; } .ser-menu-local-nav-select { font-size: 0.95rem; padding-left: 0.85rem; padding-right: 2.5rem; } } @media (min-width: 768px) { .ser-menu-local-nav { padding: 0; } } /* ========================================================= Seravezza Menu Section Cards Used by: _seravezza / Seravezza Menu Section Card.html Notes: - Image is not clickable. - Only the centered overlay button is clickable. - This is used on /menus/events and /menus/weddings listing pages. - Card titles are rendered as button text, not separate headings, to match the approved image-card direction. ========================================================= */ .menuBlock--sectionCard { display: block; width: 100%; margin-bottom: clamp(3.25rem, 2.65rem + 1.75vw, 4.75rem); padding-bottom: 0; text-align: center; } .menuBlock--sectionCard .menuBlock-imageWrap { position: relative; display: block; width: min(90%, 36rem); max-width: none; margin: 0 auto; padding: 0; overflow: hidden; border-radius: 0.35rem; } .menuBlock--sectionCard .menuBlock-imageWrap img { display: block; width: 100%; max-width: none; aspect-ratio: 16/9; height: auto; margin: 0; padding: 0; object-fit: cover; } .menuBlock--sectionCard .ser-menu-btn--sectionCard, .menuBlock--sectionCard .ser-menu-btn--sectionCard:link, .menuBlock--sectionCard .ser-menu-btn--sectionCard:visited { position: absolute; left: 50%; top: 50%; z-index: 5; transform: translate(-50%, -50%); min-width: clamp(8.5rem, 7.75rem + 1.5vw, 11rem); min-height: clamp(2.15rem, 1.95rem + 0.5vw, 2.55rem); padding: clamp(0.45rem, 0.4rem + 0.22vw, 0.58rem) clamp(0.8rem, 0.65rem + 0.7vw, 1.2rem); background-color: rgba(232, 226, 219, 0.72); border: 2px solid rgba(201, 162, 103, 0.9); border-radius: 0.38rem; color: #ffbc00; font-size: clamp(0.62rem, 0.57rem + 0.18vw, 0.76rem); text-shadow: none; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.13), inset 1px 1px 1px rgba(255, 255, 255, 0.32), inset -2px -2px 6px rgba(0, 0, 0, 0.08); } .menuBlock--sectionCard .ser-menu-btn--sectionCard .label { color: #ffbc00; white-space: nowrap; } .menuBlock--sectionCard .ser-menu-btn--sectionCard .highlight { color: #ffbc00; } .menuBlock--sectionCard .ser-menu-btn--sectionCard:focus, .menuBlock--sectionCard .ser-menu-btn--sectionCard:focus-visible { outline: 2px solid rgba(201, 162, 103, 0.95); outline-offset: 3px; } @media (hover: hover) and (pointer: fine) { .menuBlock--sectionCard .ser-menu-btn--sectionCard:hover { transform: translate(-50%, -50%); background-color: rgba(232, 226, 219, 0.88); border-color: rgb(201, 162, 103); color: #ffbc00; box-shadow: 0 5px 16px rgba(0, 0, 0, 0.18), inset 1px 1px 1px rgba(255, 255, 255, 0.36), inset -2px -2px 5px rgba(0, 0, 0, 0.08); } } @media (min-width: 1200px) { .menuBlock--sectionCard .menuBlock-imageWrap img { width: 100%; margin-left: 0; margin-right: 0; } } @media (max-width: 575.98px) { .menuBlock--sectionCard { margin-bottom: 2.5rem; } .menuBlock--sectionCard .ser-menu-btn--sectionCard, .menuBlock--sectionCard .ser-menu-btn--sectionCard:link, .menuBlock--sectionCard .ser-menu-btn--sectionCard:visited { min-width: 9.25rem; } } /* ========================================================= Seravezza Menu Sections + Offerings ========================================================= */ .menuSectionBlock { margin-bottom: clamp(2rem, 1.5rem + 1.5vw, 3rem); } .menuSectionBlock:last-child { margin-bottom: 0; } .menuSectionBlock-heading { text-align: center; } .menuSectionTitle { margin: 0 0 0.75rem; padding: 0; color: #ffbc00; font-family: "Besley", serif; font-size: clamp(1.7rem, 1.35rem + 1vw, 2.5rem); font-weight: 800; letter-spacing: 0.06em; line-height: 1.05; text-transform: uppercase; } .menuSectionSubheading { max-width: 48rem; margin: 0 auto; } .menuSectionSubheading p { margin-bottom: 0; padding-bottom: 0; text-align: center; } .menuRichText { max-width: 56rem; margin: 0 auto; } .menuRichText p:last-child { margin-bottom: 0; padding-bottom: 0; } .menuSectionBlock-group { padding-top: 0; margin-bottom: clamp(3rem, 2.4rem + 1.7vw, 4.75rem); text-align: center; } .menuSectionHeadingWrap { display: flex; align-items: center; justify-content: center; gap: clamp(0.75rem, 0.6rem + 0.5vw, 1.4rem); margin: 0 auto clamp(1.1rem, 0.95rem + 0.45vw, 1.5rem); max-width: 56rem; } .menuSectionHeadingWrap::before, .menuSectionHeadingWrap::after { content: ""; flex: 0 1 5rem; height: 2px; background-color: rgba(154, 109, 82, 0.9); } .menuGroupTitle { margin: 0; padding: 0; color: #ffbc00; font-family: "Besley", serif; font-size: clamp(1.15rem, 1.02rem + 0.42vw, 1.6rem); font-weight: 800; letter-spacing: 0.045em; line-height: 1.05; text-transform: uppercase; text-align: center; } .menuGroupIntro { max-width: 30rem; margin: 0 auto 1.5rem; text-align: center; } .menuGroupIntro p { margin: 0; padding: 0; color: #ffbc00; font-family: "Besley", serif; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em; line-height: 1.1; text-transform: uppercase; } .menuSectionBlock-group .copyBlock { display: flex; flex-wrap: wrap; width: 100%; max-width: 56rem; margin: 0 auto; row-gap: clamp(1rem, 0.9rem + 0.4vw, 1.4rem); } .menuSectionBlock-group .copyBlock .col-flex { width: 100%; min-width: 0; padding-left: clamp(0.7rem, 0.6rem + 0.4vw, 1.2rem); padding-right: clamp(0.7rem, 0.6rem + 0.4vw, 1.2rem); margin-top: var(--bs-gutter-y); } .menuItemName, .menuItemNote, .menuItemDesc, .menuComponentDesc, .menuItemModifier { margin: 0; padding: 0; min-height: 0 !important; } .menuItemName { line-height: 100%; margin-bottom: 0.5rem; } .menuItemName strong { display: inline; color: #ffbc00; font-family: "Besley", serif; font-size: clamp(0.96rem, 0.92rem + 0.12vw, 1.08rem); font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; } .menuItemDesc, .menuComponentDesc, .menuItemNote, .menuItemModifier { max-width: 18rem; } .menuItemNote { margin-bottom: 0.2rem; color: #ffbc00; font-family: "Raleway", sans-serif; font-size: 0.82rem; line-height: 1.24; font-style: italic; } .menuItemDesc, .menuComponentDesc { margin-top: 0.15rem; margin-bottom: 0; color: #ffbc00; font-family: "Raleway", sans-serif; font-size: 0.88rem; line-height: 1.28; } .menuItemModifier { color: #ffbc00; font-family: "Raleway", sans-serif; font-size: 0.82rem; line-height: 1.24; } .menuItemFlags { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.2rem; margin-left: 0.5rem; vertical-align: middle; transform: translateY(-0.02em); } .menuItemFlags .menu-icon { flex: 0 0 auto; width: 1.125rem; height: 1.125rem; margin: 0; } .menuOfferingHead, .menuOfferingDesc, .menuOfferingModifierWrap, .menuOfferingModifier, .menuComponentDesc { text-align: center; } .menuOfferingHead { max-width: 56rem; margin: 0 auto 1.25rem; } .menuOfferingModifierWrap { margin: 0.35rem auto; } .menuOfferingModifier { margin: 0; padding: 0; color: #ffbc00; font-family: "Besley", serif; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.14em; line-height: 1.2; text-transform: uppercase; } .menuOfferingDesc { max-width: 48rem; margin: 0 auto 1rem; color: #ffbc00; font-family: "Raleway", sans-serif; font-size: 1.25rem; line-height: 1.5; text-transform: none; } .menuOfferingDesc p:last-child { margin-bottom: 0; padding-bottom: 0; } .menuOfferingComponents { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; } .menuOfferingComponents .col-flex { flex: 0 1 calc(50% - 1rem); max-width: calc(50% - 1rem); } @media (max-width: 991.98px) { .menuOfferingComponents .col-flex { flex: 0 1 100%; max-width: 100%; } } .menuOfferingComponents .menuItemName { text-align: center; } .menuComponentDesc { max-width: 26rem; margin: 0.125rem auto 0.75rem; padding: 0; color: #ffbc00; font-family: "Raleway", sans-serif; font-size: 1.125rem; line-height: 1.4; text-align: center; text-transform: none; letter-spacing: 0; } .menuComponentDesc p { margin: 0; padding: 0; color: inherit; font: inherit; line-height: inherit; text-align: inherit; text-transform: inherit; letter-spacing: inherit; } /* ========================================================= Seravezza Menu Option Blocks ========================================================= */ .menuSectionBlock-optionlist { max-width: 56rem; margin: 1.425rem auto 0.425rem; padding: 0.45rem 1rem 0.9rem; background-color: rgba(214, 204, 196, 0.28); border: 1px solid rgba(201, 189, 178, 0.38); } .menuSectionBlock-optionlist + .menuSectionBlock-optionlist { margin-top: 1.425rem; } .menuOptionListTitle { margin: 0 0 0.75rem; color: #ffbc00; font-family: "Besley", serif; font-size: clamp(0.9rem, 0.84rem + 0.22vw, 1.02rem); font-weight: 800; letter-spacing: 0.06em; line-height: 1.4; text-transform: uppercase; text-align: center; } .menuOptionList { display: grid; gap: 0.45rem 1.8rem; margin: 0; padding: 0; list-style: none; text-align: center; justify-content: center; padding-top: 1rem; } .menuOptionList--one { grid-template-columns: 1fr; } .menuOptionList--two { grid-template-columns: 1fr; } .menuOptionList--three { grid-template-columns: 1fr; } .menuOptionList li { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.28rem; margin: 0; padding: 0; min-width: 0; color: #ffbc00; font-family: "Raleway", sans-serif; font-size: 1.1rem; line-height: 1.35; text-align: center; } .menuOptionListText { display: inline-block; text-align: center; } .menuOptionList .menuItemFlags:empty { display: none; } .menuOptionList .menuItemFlags { margin-left: 0.2rem; gap: 0.2rem; } .menuOptionList .menuItemFlags .menu-icon { width: 1.125rem; height: 1.125rem; } /* ========================================================= Policy / Details + Image + Note ========================================================= */ .menuPolicyTitle { margin: 0 0 0.75rem; padding: 0; color: #ffbc00; font-family: "Besley", serif; font-size: clamp(1.15rem, 1.05rem + 0.35vw, 1.45rem); font-weight: 800; letter-spacing: 0.06em; line-height: 1.1; text-transform: uppercase; } .menuPolicyBody { max-width: 62rem; } .menuPolicyBody p:last-child { margin-bottom: 0; padding-bottom: 0; } .menuSectionBlock-image { text-align: center; } .menuSectionBlock-image img { display: block; width: 100%; max-width: 56rem; height: auto; margin: 0 auto; padding: 0; } .menuImageCaption { max-width: 42rem; margin: 0.85rem auto 0; } .menuImageCaption p { margin-bottom: 0; padding-bottom: 0; text-align: center; font-size: 0.95rem; line-height: 1.45; } .menuSectionBlock-note { max-width: 56rem; margin-left: auto; margin-right: auto; padding: clamp(1rem, 0.85rem + 0.5vw, 1.5rem); background-color: rgba(0, 45, 67, 0.04); border-left: 4px solid rgba(201, 162, 103, 0.9); } .menuCalloutTitle { margin: 0 0 0.5rem; padding: 0; color: #ffbc00; font-family: "Besley", serif; font-size: clamp(1rem, 0.95rem + 0.25vw, 1.2rem); font-weight: 800; letter-spacing: 0.05em; line-height: 1.1; text-transform: uppercase; } .menuCalloutBody p:last-child { margin-bottom: 0; padding-bottom: 0; } @media (min-width: 768px) { .menuSectionBlock-group .copyBlock.two .col-flex, .menuSectionBlock-group .copyBlock.three .col-flex, .menuSectionBlock-group .copyBlock.four .col-flex { padding-left: 1rem; padding-right: 1rem; } .menuOptionList--two { grid-template-columns: repeat(2, minmax(0, 1fr)); } .menuOptionList--three { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 992px) { .menuSectionBlock-group .copyBlock.one .col-flex { width: 100%; } .menuSectionBlock-group .copyBlock.two .col-flex { width: 50%; } .menuSectionBlock-group .copyBlock.three .col-flex { width: 33.333%; } .menuSectionBlock-group .copyBlock.four .col-flex { width: 25%; } .menuSectionBlock-group .copyBlock.five .col-flex { width: 20%; } } @media (max-width: 767.98px) { .menuSectionHeadingWrap { gap: 0.65rem; margin-bottom: 1rem; } .menuSectionHeadingWrap::before, .menuSectionHeadingWrap::after { flex-basis: 2.5rem; } .menuSectionBlock-group .copyBlock { max-width: calc(100% - 1rem); } .menuItemDesc, .menuComponentDesc, .menuItemNote, .menuItemModifier { max-width: 100%; } } @media (max-width: 575.98px) { .menuSectionTitle { letter-spacing: 0.04em; } .menuGroupTitle { letter-spacing: 0.045em; } .menuSectionBlock-optionlist { max-width: calc(100% - 2rem); padding: 0.85rem 0.95rem; } .menuOptionList--two, .menuOptionList--three { grid-template-columns: 1fr; } .menuOptionListTitle { margin-bottom: 0.7rem; font-size: 0.98rem; line-height: 1.15; } .menuOptionList li { gap: 0.22rem; line-height: 1.35; } .menuItemFlags { margin-left: 0.25rem; gap: 0.12rem; } .menuItemFlags .menu-icon, .menuOptionList .menuItemFlags .menu-icon { width: 1.125rem; height: 1.125rem; } } /* ========================================================= Seravezza Structured Info Page ========================================================= */ .serInfoSection { margin: 0 auto 2.5rem; max-width: 56rem; text-align: center; } .serInfoSection-inner { margin: 0 auto; } .serInfoSection-title { margin: 0 0 0.35rem; color: #ffbc00; font-family: "Besley", serif; font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem); font-weight: 800; letter-spacing: 0.08em; line-height: 1.1; text-transform: uppercase; } .serInfoSection-modifier { margin: 0 0 0.6rem; color: #ffbc00; font-family: "Raleway", sans-serif; font-size: clamp(1rem, 0.95rem + 0.25vw, 1.2rem); font-weight: 400; line-height: 1.25; } .serInfoSection-body { color: #231f20; font-family: "Raleway", sans-serif; font-size: 0.95rem; line-height: 1.55; } .serInfoSection-body p { margin: 0 0 0.75rem; } .serInfoSection--one .serInfoSection-body, .serInfoSection--two .serInfoSection-body, .serInfoSection--three .serInfoSection-body { column-gap: 2rem; } .serInfoSection--one .serInfoSection-body { column-count: 1; max-width: 42rem; margin: 0 auto; } .serInfoSection--two .serInfoSection-body { column-count: 2; } .serInfoSection--three .serInfoSection-body { column-count: 3; } @media (max-width: 991.98px) { .serInfoSection--three .serInfoSection-body { column-count: 2; } } @media (max-width: 575.98px) { .serInfoSection--two .serInfoSection-body, .serInfoSection--three .serInfoSection-body { column-count: 1; } } /* ========================================================= Shared Wedding Package Details Panel ========================================================= */ .weddingPackageDetailsPanelWrap { margin: clamp(3rem, 2.5rem + 1.5vw, 4.5rem) 0 0; } .weddingPackageDetailsPanel { max-width: 50rem; margin: 0 auto; padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem); background-color: rgba(214, 204, 196, 0.55); border: 1px solid rgba(201, 189, 178, 0.9); box-shadow: inset 0 0 0 6px rgba(255, 255, 255, 0.2); text-align: center; } .weddingPackageDetailsPanel-title { margin: 0 0 0.75rem; color: #ffbc00; font-family: "Raleway", sans-serif; font-size: clamp(1.5rem, 0.25rem + 4vw, 2.25rem); font-weight: 400; line-height: 1.05; } .weddingPackageDetailsPanel-intro { max-width: 38rem; margin: 0 auto clamp(1.5rem, 1.2rem + 0.8vw, 2rem); color: #ffbc00; font-family: "Raleway", sans-serif; font-size: clamp(1.15rem, 1.05rem + 0.3vw, 1.4rem); font-weight: 400; line-height: 1.35; } .weddingPackageDetailsPanel-intro p { margin: 0; padding: 0; color: inherit; font: inherit; line-height: inherit; } .weddingPackageDetailsPanel-sections { margin-top: 0.5rem; } .weddingPackageDetailsSection { margin-bottom: clamp(2rem, 1.7rem + 0.8vw, 2.75rem); } .weddingPackageDetailsSection:last-child { margin-bottom: 0; } .weddingPackageDetailsSection-headingWrap { display: flex; align-items: center; justify-content: center; gap: clamp(0.75rem, 0.6rem + 0.5vw, 1.4rem); margin: 0 auto clamp(0.9rem, 0.8rem + 0.35vw, 1.2rem); max-width: 35rem; } .weddingPackageDetailsSection-headingWrap::before, .weddingPackageDetailsSection-headingWrap::after { content: ""; flex: 0 1 5rem; height: 2px; background-color: rgba(201, 189, 178, 0.95); } .weddingPackageDetailsSection-title { /* margin: 0; color: setups.$primary; font-family: setups.$sectionHeader; font-size: clamp(1.5rem, 1.3rem + 0.5vw, 2rem); @include setups.font-weight(bold); line-height: 1.08; text-transform: uppercase; */ margin: 0; padding: 0; color: #ffbc00; font-family: "Besley", serif; font-size: clamp(1.15rem, 1.02rem + 0.42vw, 1.6rem); font-weight: 800; letter-spacing: 0.045em; line-height: 1.05; text-transform: uppercase; text-align: center; } /* .menuGroupTitle { margin: 0; padding: 0; color: setups.$primary; font-family: setups.$sectionBody; font-size: clamp(1.15rem, 1.02rem + 0.42vw, 1.6rem); @include setups.font-weight(extra-bold); letter-spacing: 0.045em; line-height: 1.05; text-transform: uppercase; text-align: center; } */ .weddingPackageDetailsSection-body { max-width: 35rem; margin: 0 auto; color: #ffbc00; font-family: "Raleway", sans-serif; font-size: clamp(1rem, 0.97rem + 0.1vw, 1.08rem); line-height: 1.45; text-align: center; } .weddingPackageDetailsSection-body p { margin: 0 0 0.8rem; padding: 0; color: inherit; font-family: inherit; font-size: inherit; line-height: inherit; font-weight: inherit; } .weddingPackageDetailsSection-body em { font-style: italic; font-weight: inherit; font-size: inherit; } .weddingPackageDetailsSection-body p:last-child { margin-bottom: 0; } .weddingPackageDetailsSection-body ul { margin: 0; padding-left: 1.1rem; } .weddingPackageDetailsSection-body li { margin-bottom: 0.35rem; } .weddingPackageDetailsPanel-note { margin-top: clamp(2rem, 1.7rem + 0.8vw, 2.5rem); color: rgb(154, 109, 82); font-family: "Raleway", sans-serif; font-size: clamp(1rem, 0.95rem + 0.15vw, 1.15rem); font-weight: 400; line-height: 1.35; text-align: left; } .weddingPackageDetailsPanel-note p { margin: 0; padding: 0; color: inherit; font: inherit; line-height: inherit; } @media (max-width: 575.98px) { .weddingPackageDetailsPanel { max-width: calc(100% - 2rem); padding: 1.1rem 1rem; } .weddingPackageDetailsSection-headingWrap::before, .weddingPackageDetailsSection-headingWrap::after { flex-basis: 2.5rem; } .weddingPackageDetailsSection-body, .weddingPackageDetailsPanel-note { text-align: center; } } /* ========================================================= Seravezza Menu Closer ========================================================= */ #menuCloser { max-width: 62rem; margin: clamp(4rem, 3rem + 2vw, 6rem) auto 0; padding: clamp(2rem, 1.7rem + 1vw, 3rem) 1rem 0; text-align: center; } .menuCloser-buttons { margin: 0 auto clamp(2rem, 1.6rem + 1vw, 2.75rem); } .menuCloser-buttons .menu-panel-stack-inline { margin-top: 0; gap: 0.9rem 1rem; } .menuKeyTitle { margin: 0 0 1rem; color: #ffbc00; font-family: "Besley", serif; font-size: clamp(1rem, 0.94rem + 0.2vw, 1.14rem); font-weight: 800; letter-spacing: 0.08em; line-height: 1.1; text-transform: uppercase; } .menuKey { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.65rem 1.5rem; width: auto; margin: 0 auto clamp(1.2rem, 1rem + 0.7vw, 1.8rem); padding: 0; list-style: none; text-align: center; } .menuKey li { display: inline-flex; align-items: center; width: auto; margin: 0; padding: 0; font-size: 0.75rem; line-height: 1; color: #ffbc00; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; list-style: none; } .menuKey li .menu-icon { vertical-align: middle; } .menu-key-text { padding-left: 0.45rem; } .menuDisclaimer { max-width: 38rem; margin: 0 auto 2rem; color: #ffbc00; font-family: "Raleway", sans-serif; font-size: 0.76rem; line-height: 1.35; opacity: 0.9; } .menuDisclaimer p { margin: 0; padding: 0; color: inherit; font: inherit; line-height: inherit; } @media (max-width: 575.98px) { #menuCloser { padding-left: 1rem; padding-right: 1rem; } .menuKey { gap: 0.55rem 1rem; } .menuKey li { font-size: 0.65rem; } .menuDisclaimer { font-size: 0.72rem; line-height: 1.32; } } /* ========================================================= Persistent Allergen Filter / Menu Guide ========================================================= */ .menu-filter-trigger { position: fixed; top: 6rem; right: 1rem; z-index: 1260; opacity: 0; transform: translateY(-0.4rem); visibility: hidden; transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms; } .menu-filter-trigger.is-visible { opacity: 1; transform: translateY(0); visibility: visible; transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 0s; } .menu-filter-trigger-icon { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 2.35rem; padding: 0.35rem 0.85rem 0.35rem 0.38rem; border: 2px solid #ffbc00; background-color: #ffbc00; color: #f2f2f2; border-radius: 999px; cursor: pointer; pointer-events: auto; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18); transition: transform 180ms ease, box-shadow 180ms ease; } .menu-filter-trigger-icon:hover, .menu-filter-trigger-icon:focus { transform: translateX(-3px); box-shadow: 0 9px 24px rgba(0, 0, 0, 0.2); } .menu-filter-trigger-iconmark { display: inline-flex; align-items: center; justify-content: center; width: 1.65rem; height: 1.65rem; border-radius: 50%; background-color: rgba(255, 255, 255, 0.92); overflow: hidden; flex: 0 0 auto; } .menu-filter-trigger-iconmark img { display: block; width: 1.35rem; height: 1.35rem; } .menu-filter-trigger-text { color: #f2f2f2; font-family: "Besley", serif; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; line-height: 1; text-transform: uppercase; white-space: nowrap; } .menu-filter-drawer { position: fixed; top: 6rem; right: 1rem; z-index: 1270; width: min(19rem, 100vw - 2rem); padding: 1.35rem 1.25rem 1.25rem; background-color: rgba(246, 242, 237, 0.98); border: 2px solid #ffbc00; border-radius: 0.65rem; box-shadow: 0 12px 34px rgba(0, 0, 0, 0.18); visibility: hidden; opacity: 0; pointer-events: none; transform: translateX(calc(100% + 2rem)); transition: transform 220ms ease, opacity 180ms ease, visibility 0s linear 220ms; } .menu-filter-drawer.is-open { visibility: visible; opacity: 1; pointer-events: auto; transform: translateX(0); transition: transform 220ms ease, opacity 180ms ease, visibility 0s linear 0s; } .menu-filter-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 0; margin: 0 0 1.2rem; background: transparent; border: 0; } .menu-filter-drawer-title { margin: 0; color: #ffbc00; font-family: "Besley", serif; font-size: 0.95rem; font-weight: 800; letter-spacing: 0.08em; line-height: 1; text-transform: uppercase; } .menu-filter-drawer-title .highlight { margin-left: 0.2rem; font-family: "Raleway", sans-serif; font-size: 1.45em; font-weight: 400; letter-spacing: 0.01em; text-transform: lowercase; } .menu-filter-close { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; padding: 0; border: 0; background: transparent; color: #ffbc00; font-family: "Besley", serif; font-size: 1.8rem; font-weight: 800; line-height: 0.5; cursor: pointer; } .menu-filter-drawer-body { padding: 0; } .menu-filter-help { margin: 0 0 1rem; color: #ffbc00; font-family: "Raleway", sans-serif; font-size: 1.08rem; font-weight: 400; line-height: 1.2; } .menu-filter-options { display: grid; gap: 0.78rem; } .menu-filter-option { display: flex; align-items: center; gap: 0.65rem; color: #ffbc00; font-family: "Besley", serif; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.045em; line-height: 1; text-transform: uppercase; } .menu-filter-option input[type=checkbox] { width: 0.92rem; height: 0.92rem; margin: 0; accent-color: #ffbc00; } .menu-filter-actions { display: flex; flex-wrap: wrap; gap: 0.65rem; margin-top: 1.25rem; } .menu-filter-clear, .menu-filter-apply { display: inline-flex; align-items: center; justify-content: center; min-height: 2.2rem; padding: 0.5rem 0.85rem; border: 2px solid #ffbc00; background-color: transparent; color: #ffbc00; font-family: "Besley", serif; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.06em; line-height: 1; text-transform: uppercase; cursor: pointer; } .menu-filter-apply { background-color: rgba(0, 45, 67, 0.08); } .menu-filter-backdrop { position: fixed; inset: 0; z-index: 1240; background-color: rgba(0, 0, 0, 0.14); opacity: 0; pointer-events: none; transition: opacity 220ms ease; } .menu-filter-backdrop.is-open { opacity: 1; pointer-events: auto; } @media (max-width: 575.98px) { .menu-filter-trigger { top: 6rem; right: 1rem; } .menu-filter-trigger-icon { min-height: 2.2rem; padding-right: 0.72rem; } .menu-filter-trigger-text { font-size: 0.7rem; } .menu-filter-drawer { top: 6rem; right: 1rem; width: min(19rem, 100vw - 2rem); height: auto; overflow-y: auto; } } /* ========================================================= Seravezza Image Card Button System Used by: - /menus landing cards - /menus/events section cards - /menus/weddings section cards Notes: - Images are not clickable. - Only the centered overlay button is clickable. - Typography uses Gotham-style nav face for the label and Mrs. Eaves-style accent face for the highlight word. ========================================================= */ /* Shared image-card shell ========================================================= */ .menuBlock--landing, .menuBlock--sectionCard { display: block; width: 100%; padding-bottom: 0; text-align: center; } .menuBlock--landing { margin-bottom: clamp(3rem, 2.5rem + 1.5vw, 4rem); } .menuBlock--sectionCard { margin-bottom: clamp(3.25rem, 2.65rem + 1.75vw, 4.75rem); } .menuBlock--landing .menuBlock-imageWrap, .menuBlock--sectionCard .menuBlock-imageWrap { position: relative; display: block; width: 90%; max-width: none; margin: 0 auto; padding: 0; overflow: hidden; border-radius: 0.5rem; } .menuBlock--landing .menuBlock-imageWrap img, .menuBlock--sectionCard .menuBlock-imageWrap img { display: block; width: 100%; max-width: none; aspect-ratio: 16/9; height: auto; margin: 0; padding: 0; object-fit: cover; border-radius: inherit; } /* Shared overlay button ========================================================= */ .ser-menu-btn--imageCard, .ser-menu-btn--imageCard:link, .ser-menu-btn--imageCard:visited, .menuBlock--landing .ser-menu-btn--menuLanding, .menuBlock--landing .ser-menu-btn--menuLanding:link, .menuBlock--landing .ser-menu-btn--menuLanding:visited, .menuBlock--sectionCard .ser-menu-btn--sectionCard, .menuBlock--sectionCard .ser-menu-btn--sectionCard:link, .menuBlock--sectionCard .ser-menu-btn--sectionCard:visited { position: absolute; left: 50%; top: 50%; z-index: 5; display: inline-flex; align-items: center; justify-content: center; gap: 0.22rem; transform: translate(-50%, -50%); min-width: clamp(10.75rem, 9.5rem + 2.25vw, 13.5rem); min-height: clamp(2.55rem, 2.25rem + 0.6vw, 3rem); padding: clamp(0.62rem, 0.54rem + 0.28vw, 0.78rem) clamp(1.05rem, 0.9rem + 0.8vw, 1.65rem); background-color: rgba(232, 226, 219, 0.78); border: 2px solid rgba(201, 162, 103, 0.92); border-radius: 0.72rem; color: #ffbc00; font-family: "Raleway", sans-serif; font-size: clamp(0.76rem, 0.69rem + 0.24vw, 0.94rem); font-weight: 700; letter-spacing: 0.08em; line-height: 1; text-align: center; text-decoration: none !important; text-shadow: none; text-transform: uppercase; white-space: nowrap; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.14), inset 1px 1px 1px rgba(255, 255, 255, 0.34), inset -3px -3px 7px rgba(0, 0, 0, 0.08); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, color 180ms ease; } .ser-menu-btn--imageCard .label, .ser-menu-btn--imageCard .highlight, .menuBlock--landing .ser-menu-btn--menuLanding .label, .menuBlock--landing .ser-menu-btn--menuLanding .highlight, .menuBlock--sectionCard .ser-menu-btn--sectionCard .label, .menuBlock--sectionCard .ser-menu-btn--sectionCard .highlight { display: inline-block; color: #ffbc00; line-height: 1; } .ser-menu-btn--imageCard .label, .menuBlock--landing .ser-menu-btn--menuLanding .label, .menuBlock--sectionCard .ser-menu-btn--sectionCard .label { font-family: "Raleway", sans-serif; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .ser-menu-btn--imageCard .highlight, .menuBlock--landing .ser-menu-btn--menuLanding .highlight, .menuBlock--sectionCard .ser-menu-btn--sectionCard .highlight { position: relative; top: -0.055em; font-family: "Raleway", sans-serif; font-size: 1.48em; font-weight: 400; font-style: italic; letter-spacing: 0.01em; text-transform: lowercase; } /* Section-card buttons are a touch smaller than the top-level /menus cards */ .menuBlock--sectionCard .ser-menu-btn--sectionCard, .menuBlock--sectionCard .ser-menu-btn--sectionCard:link, .menuBlock--sectionCard .ser-menu-btn--sectionCard:visited { min-width: clamp(9.75rem, 8.75rem + 1.75vw, 12.25rem); min-height: clamp(2.35rem, 2.1rem + 0.5vw, 2.75rem); font-size: clamp(0.68rem, 0.62rem + 0.2vw, 0.84rem); } /* Focus + hover ========================================================= */ .ser-menu-btn--imageCard:focus, .ser-menu-btn--imageCard:focus-visible, .menuBlock--landing .ser-menu-btn--menuLanding:focus, .menuBlock--landing .ser-menu-btn--menuLanding:focus-visible, .menuBlock--sectionCard .ser-menu-btn--sectionCard:focus, .menuBlock--sectionCard .ser-menu-btn--sectionCard:focus-visible { outline: 2px solid rgba(201, 162, 103, 0.95); outline-offset: 3px; } @media (hover: hover) and (pointer: fine) { .ser-menu-btn--imageCard:hover, .menuBlock--landing .ser-menu-btn--menuLanding:hover, .menuBlock--sectionCard .ser-menu-btn--sectionCard:hover { transform: translate(-50%, -50%); background-color: rgba(232, 226, 219, 0.9); border-color: rgb(201, 162, 103); color: #ffbc00; box-shadow: 0 5px 16px rgba(0, 0, 0, 0.18), inset 1px 1px 1px rgba(255, 255, 255, 0.38), inset -2px -2px 5px rgba(0, 0, 0, 0.08); } } /* Responsive ========================================================= */ @media (max-width: 575.98px) { .menuBlock--landing, .menuBlock--sectionCard { margin-bottom: 2.75rem; } .menuBlock--landing .menuBlock-imageWrap, .menuBlock--sectionCard .menuBlock-imageWrap { width: 100%; } .menuBlock--landing .ser-menu-btn--menuLanding, .menuBlock--landing .ser-menu-btn--menuLanding:link, .menuBlock--landing .ser-menu-btn--menuLanding:visited, .menuBlock--sectionCard .ser-menu-btn--sectionCard, .menuBlock--sectionCard .ser-menu-btn--sectionCard:link, .menuBlock--sectionCard .ser-menu-btn--sectionCard:visited { min-width: 9.75rem; } } /* Menu section landing page spacing - this equalizes the top/bottom spacing around the breadcrumb nav ========================================================= */ .menuLandingPageContent, .menuPageContent { padding-top: clamp(0.5rem, 0.4rem + 0.2vw, 0.75rem); } .menuLandingPageContent { padding-bottom: clamp(3.5rem, 6vw, 6rem); } .menuPageContent { padding-bottom: clamp(1.75rem, 3vw, 3rem); } /* Wider menu section landing cards ========================================================= */ .menuSectionCardCol { margin-bottom: clamp(3.75rem, 5vw, 5.5rem); } .menuBlock--sectionCard { margin-bottom: 0; } .menuBlock--sectionCard .menuBlock-imageWrap { width: 100%; max-width: none; } .menuBlock--sectionCard .menuBlock-imageWrap img { aspect-ratio: 16/9; height: 100%; object-fit: cover; } .menuCardSummary { max-width: 38rem; margin: clamp(1.1rem, 1.5vw, 1.5rem) auto 0; color: #ffbc00; font-family: "Raleway", sans-serif; font-size: clamp(1rem, 0.96rem + 0.25vw, 1.18rem); line-height: 1.45; text-align: center; } .menuCardSummary p { margin-bottom: 0; } @media (min-width: 992px) { .menuBlock--sectionCard .menuBlock-imageWrap img { aspect-ratio: 2/1; } } .menuSectionLandingCol { margin-bottom: clamp(3.75rem, 5vw, 5.5rem); } .menuBlock--landing .menuBlock-imageWrap img { aspect-ratio: 16/9; height: 100%; object-fit: cover; } @media (min-width: 992px) { .menuBlock--landing .menuBlock-imageWrap img { aspect-ratio: 2/1; } } .menuLandingSummary { max-width: 38rem; margin: clamp(1.1rem, 1.5vw, 1.5rem) auto 0; color: #ffbc00; font-family: "Raleway", sans-serif; font-size: clamp(1rem, 0.96rem + 0.25vw, 1.18rem); line-height: 1.45; text-align: center; } .menuLandingSummary p { margin-bottom: 0; } /* Optional divider between section cards. Uncomment if you want the 60% centered rule. .menuSectionCardCol + .menuSectionCardCol::before { content: ""; display: block; width: 60%; height: 1px; margin: 0 auto clamp(3rem, 5vw, 4.5rem); background-color: rgba(0, 45, 67, 0.22); } */ /* @end */ /* @group Menu Jumper coming in from the side */ /* @group Menu Jumper */ .btn-menuJumper, a.btn-menuJumper { font: 1.25rem/100% "Raleway", sans-serif; font-weight: 600; color: #231f20; background: #ffda72; border-radius: 2rem; padding: 1rem 2.5rem 1rem 0.5rem; transition: all 0.25s ease-in; text-decoration: none !important; text-transform: lowercase; } .btn-menuJumper:hover, a.btn-menuJumper:hover { font: 1.25rem/100% "Raleway", sans-serif; font-weight: 600; color: #231f20; background-color: #ffbc00; transform: scale(1.06); border-radius: 2rem; padding: 1rem 2.5rem 1rem 0.5rem; text-decoration: none !important; cursor: pointer; } .jumperIcon { position: relative; height: 1.5rem; margin-right: 0.5rem; top: -0.125rem; } #jumpItems ul li { font: 1.25rem/135% "Raleway", sans-serif; font-weight: 800; list-style-type: none; margin-left: -1.5rem; color: #231f20; transition: all 0.25s ease-in; } #jumpItems a { color: #231f20; text-transform: lowercase; text-decoration: none !important; transition: all 0.25s ease-in; } #jumpItems a:hover { color: #231f20; transform: scale(1.06); text-decoration: none !important; } a.jumpLinks { font: 1.25rem/135% "Raleway", sans-serif; font-weight: 600; color: #231f20; transition: all 0.25s ease-in; } a.jumpLinks:hover { color: #231f20; transform: scale(1.06); text-decoration: none !important; } h2.offcanvas-title { font: 2rem/100% "Raleway", sans-serif; font-weight: 800; color: #231f20; padding-left: 0.5rem; } .bottomMenu { position: fixed; bottom: 145; right: -10; z-index: 1; transition: all 0.5s; z-index: 3000; } .hideMenu { opacity: 0; } .showMenu { opacity: 1; } .bottomSlideMenu { position: fixed; top: 85px; right: -50px; z-index: 1029; transition: all 1s; } .hideSlide { opacity: 0; right: -100%; } .showSlide { opacity: 1; right: -8.5rem; } .showSlide:hover { opacity: 1; right: -2rem; } .offcanvas, .offcanvas-xxl, .offcanvas-xl, .offcanvas-lg, .offcanvas-md, .offcanvas-sm { --bs-offcanvas-width: 70%; margin-top: 85px; -webkit-border-top-left-radius: 6px; -webkit-border-bottom-left-radius: 6px; -moz-border-radius-topleft: 6px; -moz-border-radius-bottomleft: 6px; border-top-left-radius: 6px; border-bottom-left-radius: 6px; background: #ffbc00; bottom: auto; --bs-offcanvas-zindex: 1045; --bs-offcanvas-height: 30vh; --bs-offcanvas-padding-x: 1rem; --bs-offcanvas-padding-y: 1rem; --bs-offcanvas-color: var(--bs-body-color); --bs-offcanvas-bg: var(--bs-body-bg); --bs-offcanvas-border-width: var(--bs-border-width); --bs-offcanvas-border-color: var(--bs-border-color-translucent); --bs-offcanvas-box-shadow: var(--bs-box-shadow-sm); --bs-offcanvas-transition: transform 0.3s ease-in-out; --bs-offcanvas-title-line-height: 1.5; } .offcanvas-body { flex-grow: 1; padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x); overflow-y: auto; } .offcanvas-header { margin-bottom: -1.5rem; } /* lg */ @media (min-width: 992px) { .bottomSlideMenu { top: 110px; } .offcanvas { --bs-offcanvas-width: 350px; } } /* @end Menu Pages */ /* @end */ /* @group Photo Galleries */ /* ====== gallery styles ====== */ .galleryBlocks { display: block; background-color: #f2f2f2; list-style: none; list-style-type: none; padding: 0; width: 102%; text-align: center; overflow: hidden; margin-bottom: -15px; margin-top: 10px; } .galleryBlocks li { display: inline-block; padding: 0; margin: 0; } .galleryBlocks li:nth-child(1) { width: 65%; float: left; } .galleryBlocks li:nth-child(2) { width: 33%; float: right; } .galleryBlocks li:nth-child(3) { width: 33%; float: right; } .galleryBlocks li:nth-child(4) { width: 49.5%; float: left; margin: 0; } .galleryBlocks li:nth-child(5) { width: 49.5%; float: right; margin: 0; } .galleryBlocks li:nth-child(6) { width: 33%; float: left; } .galleryBlocks li:nth-child(7) { width: 65%; float: right; } .galleryBlocks li:nth-child(8) { width: 33%; float: left; } .galleryBlocks li:nth-child(9) { width: 49.5%; float: left; margin: 0; } .galleryBlocks li:nth-child(10) { width: 49.5%; float: right; margin: 0; } .galleryBlocks img { width: 100%; height: auto; padding: 0.25rem 0.375rem; } .galleryBlocks .clearCell { width: 100%; height: 1px; clear: both; margin: 0; padding: 0; } /* lg */ @media (min-width: 992px) { .galleryBlocks li:nth-child(1) { width: 66%; float: left; } .galleryBlocks li:nth-child(2) { width: 33%; float: right; } .galleryBlocks li:nth-child(3) { width: 33%; float: right; } .galleryBlocks li:nth-child(4) { width: 49.5%; float: left; margin: 0; } .galleryBlocks li:nth-child(5) { width: 49.5%; float: right; margin: 0; } .galleryBlocks li:nth-child(6) { width: 33%; float: left; } .galleryBlocks li:nth-child(7) { width: 66%; float: right; } .galleryBlocks li:nth-child(8) { width: 33%; float: left; } .galleryBlocks li:nth-child(9) { width: 49.5%; float: left; margin: 0; } .galleryBlocks li:nth-child(10) { width: 49.5%; float: right; margin: 0; } .galleryBlocks img { width: 100%; height: auto; padding: 0.25rem 0.375rem 0.5rem; } } /* @end */ /* @end */ /* @group Page Violators */ /* ====== Page Violator Styles ====== */ #pageViolator { /* .violatorWrap, .violatorWrap > div { position:relative; width:100%; padding:0; margin:0; } */ } #pageViolator .violatorWrap { position: relative; z-index: 4; } #pageViolator .img-overlay { position: absolute; top: 0.75rem; right: 0rem; } #pageViolator .img-overlay:before { content: " "; display: block; } #pageViolator .img-overlay img { width: 40%; margin: 0 0 0 60%; } #pageViolator { /* xs */ } #pageViolator { /* sm */ } @media (min-width: 576px) { #pageViolator .img-overlay img { width: 20%; margin: 0 0 0 80%; } #pageViolator .img-overlay { top: 0.25rem; } } #pageViolator { /* md */ } @media (min-width: 768px) { #pageViolator .img-overlay img { width: 25%; margin: 0 0 0 75%; } #pageViolator .img-overlay { top: 5.75rem; } } #pageViolator { /* lg */ } @media (min-width: 992px) { #pageViolator .img-overlay img { width: 33%; margin: 0 0 0 67%; } #pageViolator .img-overlay { top: 6rem; } } #pageViolator { /* xl */ } @media (min-width: 1200px) { #pageViolator .img-overlay img { width: 40%; margin: 0 0 0 60%; } #pageViolator .img-overlay { top: 6.5rem; } } /* @end */ /* @group Happenings Section */ /* @end */ /* @group Downloadable Blocks */ /* @end */ /* @group Rounded Slideshow */ /* @end */ /* @group Slick Slideshow */ /* @end */ /* @group Bleed Image with Text Box */ /* @end */ /* @group Spaces Modals */ /* @group Space Gallery Styles */ #spaceGalleries * { text-align: center; } #spaceGalleries p { font: 1.25rem/125% "Raleway", sans-serif; color: #231f20; padding: 1rem 0.5rem; z-index: 2; letter-spacing: 0.5px; } #spaceGalleries .spaceDetails, #spaceGalleries spaceBullets { margin-bottom: 1rem; } #spaceGalleries .spaceDetails p { color: #231f20; padding: 1rem 0.5rem; z-index: 2; letter-spacing: 0.25px; text-align: left; } #spaceGalleries .spaceBullets p { font: 0.75rem/125% "Raleway", sans-serif; color: #231f20; padding: 0.25rem 0.5rem; z-index: 2; text-align: left; } #spaceGalleries blockquote, #spaceGalleries blockquote p, #spaceGalleries bq, #spaceGalleries bq p { font: 1.25rem/115% "Raleway", sans-serif; letter-spacing: 0.5px; color: #231f20; padding: 1rem 0.25rem 0rem; text-transform: uppercase; } #spaceGalleries h1, #spaceGalleries h2, #spaceGalleries h3, #spaceGalleries h4, #spaceGalleries h5, #spaceGalleries h6, #spaceGalleries .h1, #spaceGalleries .h2, #spaceGalleries .h3, #spaceGalleries .h4, #spaceGalleries .h5, #spaceGalleries .h6 { padding: 0px 0.5rem 0rem; } #spaceGalleries h3, #spaceGalleries .h3 { font: 1.5rem/125% "Raleway", sans-serif; font-weight: 800; text-transform: uppercase; color: #ffbc00; padding: 0.25rem 0.5rem; letter-spacing: 0.1em; } #spaceGalleries img { padding: 0.25rem 0.25rem 0.5rem 0.25rem; margin-bottom: 0; } #spaceGalleries { /* xs */ } #spaceGalleries { /* sm */ } #spaceGalleries { /* md */ } @media (min-width: 768px) { #spaceGalleries p { font: 1.5rem/125% "Raleway", sans-serif; } #spaceGalleries .spaceBullets p { font: 0.9rem/125% "Raleway", sans-serif; } #spaceGalleries blockquote, #spaceGalleries blockquote p, #spaceGalleries bq, #spaceGalleries bq p { font: 1.75rem/115% "Raleway", sans-serif; letter-spacing: 1px; } } #spaceGalleries { /* lg */ } #spaceGalleries { /* xl */ } #spaceGalleries { position: relative; } .carousel-placeholder { background-color: transparent; padding: 15px; width: 98%; margin: 0 1% 10px; text-align: center; } .carousel-placeholder h2, .carousel-shading-modal h4 { font: 1.5rem/2rem "Raleway", sans-serif; font-weight: 800; text-transform: uppercase; color: #ffbc00; padding: 0.5rem 1rem 0.5rem 1rem; letter-spacing: 0.1em; display: inline-block; margin: 1rem 0; } .carousel-placeholder h3, .carousel-shading-modal h5 { font: 1rem/1.5rem "Raleway", sans-serif; font-weight: 400; color: #231f20; text-transform: none; letter-spacing: 0.5px; margin-bottom: 2rem; } .carousel-shading-modal p { font: 1.25rem/1.75rem "Raleway", sans-serif; font-weight: 400; color: #f2f2f2; margin-top: 0; text-align: left; letter-spacing: 0.5px; } .roomInset img { display: block; width: 30%; height: auto; float: right; padding: 0.5rem 0 2rem 0.5rem; } /* img.roomInset:empty { display: none; } */ .roomInset img[src=""] { display: none; } a.sub-item { font: 1.25rem/2rem "Raleway", sans-serif; font-weight: 800; color: #e99a3f; text-transform: uppercase; transition: 0.5s; letter-spacing: 0px; } a:hover.sub-item { color: #ffbc00; } .modal-footer-gallery { display: inline-block; } /* working on the spaces section header sizing */ .spaces-header { text-align: center; } .spaces-header h2 { font: 2rem/2rem "Raleway", sans-serif; font-weight: 800; color: #ffbc00; padding: 0px 15px 0px; text-transform: lowercase; word-break: keep-all !important; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; } .spaces-header img { width: 60%; height: auto; margin: 0px 20% 10px; } .spaces-rule { padding-top: 40px; } .spaces-rule img { width: 60%; height: auto; margin: 0px 20% 10px; } .spacesCopy { background-color: #f2f2f2; border-radius: 0.25rem; width: 86%; margin: 0 7% 1.5rem; } /* lg */ @media (min-width: 992px) { .carousel-placeholder { width: 48%; } .pageheadTitle { bottom: -4rem; width: 70%; margin: 20px 15% 20px; --mask: radial-gradient(15px at 15px 15px,#0000 98%,#000) -15px -15px; } h1.pageheadTitle { font: 3.5rem/3.5rem "Raleway", sans-serif; font-weight: 800; padding: 15px; } .spaces-header h2 { font: 4rem/2rem "Raleway", sans-serif; font-weight: 800; color: #ffbc00; padding: 0px 15px 0px; text-transform: lowercase; word-break: keep-all !important; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; } } /* @group Animated Blocks on Modals */ .animatedImgBlock { position: relative; display: block; width: 100%; border: none; } .animatedImgBlock img { width: 100%; height: auto; } .animatedImgBlock .overlay, .animatedImgBlock h1 { display: none; } /* @end Animated Blocks on Modals */ /* lg */ @media (min-width: 992px) { .animatedImgBlock { position: relative; display: block; width: 100%; height: 260px; overflow: hidden; text-decoration: none; text-align: center; } .animatedImgBlock img { position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: auto; } .animatedImgBlock .overlay { position: absolute; z-index: 1; display: block; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.75); background-size: 100% auto; opacity: 0; transition: opacity 0.5s linear; } .animatedImgBlock:hover .overlay { opacity: 0.8; } .animatedImgBlock h1 { font: 2rem/2.5rem "Raleway", sans-serif; font-weight: 800; color: #f2f2f2; position: absolute; z-index: 2; display: block; width: 100%; text-transform: uppercase; } .animatedImgBlock .line1 { margin-top: 20%; left: 100%; transition: left 0.25s linear; } .animatedImgBlock .line2 { margin-top: 30%; left: -100%; transition: left 0.25s linear; } .animatedImgBlock:hover .line1, .animatedImgBlock:hover .line2 { left: 0; } h1.line1:empty, h1.line2:empty { display: none !important; } } /* xl */ @media (min-width: 1200px) { .animatedImgBlock { height: 340px; } .animatedImgBlock h1 { font-size: 2.75rem; } .spacesCopy { width: 93%; margin: 0 3.5% 1.5rem; } } .spaceImagery { display: none; } .div-active { display: block; } .toggle-item { font: 0.85rem/0.85rem "Raleway", sans-serif; font-weight: 800; padding: 0.5rem 0.75rem 0.625rem 0.75rem; color: #231f20; text-transform: uppercase; transition: 0.5s; letter-spacing: 0px; border-radius: 0.25rem; border: none; } .toggle-item:hover { filter: brightness(85%); text-decoration: none; } section#spaceyModal { display: contents; } @layer demo { section#spaceyModal .compare { display: grid; } section#spaceyModal .compare > * { grid-area: 1/1; } section#spaceyModal .compare > section { display: grid; place-content: center; } section#spaceyModal .compare .before { mask: linear-gradient(to right, #000 0, var(--pos, 50%), rgba(0, 0, 0, 0) 0); } section#spaceyModal .compare .after { mask: linear-gradient(to right, rgba(0, 0, 0, 0) 0, var(--pos, 50%), #000 0); } section#spaceyModal .compare > input[type=range] { z-index: 1; appearance: none; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; } section#spaceyModal .compare > input[type=range]::-webkit-slider-thumb { appearance: none; inline-size: 4px; block-size: 100dvh; background-color: CanvasText; } section#spaceyModal .compare > input[type=range]::-moz-range-thumb { appearance: none; inline-size: 4px; block-size: 100dvh; background-color: CanvasText; } section#spaceyModal img { max-block-size: 80dvh; max-inline-size: 100%; } } /* @end */ /* @end */ /* @group Bootstrap Carousels */ /* @end */ /* @group Bootstrap Modals */ /* * Modals */ /* @group Modals */ #contactModal p, #eventsModal p, #subscribeModal p, #onload p, #teamGalleries p { font: 1rem/125% "Raleway", sans-serif; font-weight: 400; color: #231f20; padding: 0.5rem 0.5rem 0.5rem; margin: 0; } #contactModal a, #eventsModal a, #subscribeModal a, #onload a, #teamGalleries a { text-decoration: none; } #contactModal a:hover, #eventsModal a:hover, #subscribeModal a:hover, #onload a:hover, #teamGalleries a:hover { text-decoration: none; } #contactModal blockquote, #contactModal blockquote p, #contactModal bq, #contactModal bq p, #eventsModal blockquote, #eventsModal blockquote p, #eventsModal bq, #eventsModal bq p, #subscribeModal blockquote, #subscribeModal blockquote p, #subscribeModal bq, #subscribeModal bq p, #onload blockquote, #onload blockquote p, #onload bq, #onload bq p, #teamGalleries blockquote, #teamGalleries blockquote p, #teamGalleries bq, #teamGalleries bq p { font: 1.5rem/115% "Raleway", sans-serif; letter-spacing: 0.5px; color: #ffbc00; padding: 1rem 0rem 1rem; text-transform: uppercase; } #contactModal h1, #contactModal h2, #contactModal h3, #contactModal h4, #contactModal h5, #contactModal h6, #contactModal .h1, #contactModal .h2, #contactModal .h3, #contactModal .h4, #contactModal .h5, #contactModal .h6, #eventsModal h1, #eventsModal h2, #eventsModal h3, #eventsModal h4, #eventsModal h5, #eventsModal h6, #eventsModal .h1, #eventsModal .h2, #eventsModal .h3, #eventsModal .h4, #eventsModal .h5, #eventsModal .h6, #subscribeModal h1, #subscribeModal h2, #subscribeModal h3, #subscribeModal h4, #subscribeModal h5, #subscribeModal h6, #subscribeModal .h1, #subscribeModal .h2, #subscribeModal .h3, #subscribeModal .h4, #subscribeModal .h5, #subscribeModal .h6, #onload h1, #onload h2, #onload h3, #onload h4, #onload h5, #onload h6, #onload .h1, #onload .h2, #onload .h3, #onload .h4, #onload .h5, #onload .h6, #teamGalleries h1, #teamGalleries h2, #teamGalleries h3, #teamGalleries h4, #teamGalleries h5, #teamGalleries h6, #teamGalleries .h1, #teamGalleries .h2, #teamGalleries .h3, #teamGalleries .h4, #teamGalleries .h5, #teamGalleries .h6 { padding: 0px 0.5rem 1rem; } #contactModal .formSuccess, #eventsModal .formSuccess, #subscribeModal .formSuccess, #onload .formSuccess, #teamGalleries .formSuccess { color: #F6EC3C; } #contactModal img, #eventsModal img, #subscribeModal img, #onload img, #teamGalleries img { padding: 0.25rem 0.25rem 0.5rem 0.25rem; margin-bottom: 0; } #contactModal, #eventsModal, #subscribeModal, #onload, #teamGalleries { /* xs */ } #contactModal, #eventsModal, #subscribeModal, #onload, #teamGalleries { /* sm */ } #contactModal, #eventsModal, #subscribeModal, #onload, #teamGalleries { /* md */ } @media (min-width: 768px) { #contactModal p, #eventsModal p, #subscribeModal p, #onload p, #teamGalleries p { font: 1.25rem/125% "Raleway", sans-serif; font-weight: 400; } #contactModal blockquote, #contactModal blockquote p, #contactModal bq, #contactModal bq p, #eventsModal blockquote, #eventsModal blockquote p, #eventsModal bq, #eventsModal bq p, #subscribeModal blockquote, #subscribeModal blockquote p, #subscribeModal bq, #subscribeModal bq p, #onload blockquote, #onload blockquote p, #onload bq, #onload bq p, #teamGalleries blockquote, #teamGalleries blockquote p, #teamGalleries bq, #teamGalleries bq p { font: 2.5rem/115% "Raleway", sans-serif; letter-spacing: 1px; } } #contactModal, #eventsModal, #subscribeModal, #onload, #teamGalleries { /* lg */ } #contactModal, #eventsModal, #subscribeModal, #onload, #teamGalleries { /* xl */ } .modal-content { position: relative; display: flex; flex-direction: column; width: 100%; pointer-events: auto; background-clip: padding-box; background-color: #e9e8e8; border-radius: 0.25rem; } .modal-content-gallery { border: 6px solid rgba(35, 31, 32, 0.3); background-color: #efe3D3; text-align: left; z-index: 3; } .modal-content-team { border: 6px solid rgba(35, 31, 32, 0.3); background-color: #efe3D3; text-align: left; z-index: 3; } .modal-content-bramble { border: 6px solid rgba(35, 31, 32, 0.3); background-color: #efe3D3; text-align: left; z-index: 3; } .modal-hours { background-color: #F6EC3C; } .modal-email { background-color: #F6EC3C; color: #f2f2f2; } .modal-theatre { background-color: #ea4436; color: #231f20; text-align: center; } .modal-theatre p { padding: 10px 20px; } .modal-theatre a, .modal-theatre a:visited, .modal-theatre a:link { font-family: "Raleway", sans-serif; font-weight: 400; color: #231f20; text-decoration: none; cursor: pointer; transition-property: all 0.25s linear 0s; } .modal-theatre a:hover, .modal-theatre a:focus { font-family: "Raleway", sans-serif; font-weight: 400; color: #ea4436; text-decoration: underlinee; } .modal-body .button { margin-top: 1rem; } .modal-body h2 { font: 1.5rem/2rem "Raleway", sans-serif; font-weight: 400; text-transform: uppercase; padding: 0 0.1rem 1rem; } .modal-body img { display: block; width: 100%; margin-top: 0.5rem; margin-bottom: 2rem; } .modal-body img[src=""] { display: none; } .modal-header { background-color: #cc9600; border-top-left-radius: 0.3rem; border-top-right-radius: 0.3rem; border-bottom: 1rem solid #cc9600; } .modal-content-gallery .modal-header { background-color: transparent; border-bottom: 1rem solid transparent; } .modal-header h2 { color: #F6EC3C; padding: 5rem 0 0 0; margin: 0; } .modal-header h3 { padding: 0 1rem 0; margin: 0; } .modal-email h2, .modal-email h3 { color: #f2f2f2; } .modal-theatre h2, .modal-theatre h3 { color: #231f20; } .modal-hours h2, .modal-hours h3 { color: #f2f2f2; } .btn-close { position: absolute; top: 1rem; right: 1rem; width: 1.5rem; height: 0.5rem; background: transparent url("../svg/x-close.svg") center center no-repeat; background-size: 1.5rem 1.5rem; opacity: 1; } .modal-footer { border-top: 0px solid #ea4436; border-bottom-right-radius: calc(0.3rem - 1px); border-bottom-left-radius: calc(0.3rem - 1px); } .btn.emailmodal-button, .btn.emailmodal-button:visited { font-family: "Raleway", sans-serif; font-weight: 400; color: #F6EC3C !important; background: #F6EC3C !important; border: 0px solid #656262; float: right; margin-top: 10px; } .btn.emailmodal-button:hover { color: #F6EC3C !important; background: #ea4436 !important; border: 0px solid #ea4436; } /* @group Executive Styles */ .execModal { padding: 0px; width: 98%; margin: 1rem 1% 1rem; } .execInfo { z-index: 100; padding: 1rem 1rem 0.5rem; background-color: rgb(192, 190, 190); position: relative; } .execModal h2, .execModal h3 { color: #231f20; text-transform: uppercase; letter-spacing: 1px; } .execModal h2 { font: 2.5rem/2rem "Raleway", sans-serif; font-weight: 400; } .execModal h3 { font: 2rem/2rem "Raleway", sans-serif; font-weight: 400; padding: 0rem 1rem 0.5rem; } .leadershipImgBlock { position: relative; display: block; width: 100%; border: none; overflow: hidden; text-decoration: none; text-align: left; } .leadershipImgBlock img { width: 100%; height: auto; } .leadershipImgBlock .overlay { display: none; } a:hover.leadershipImgBlock { text-decoration: none !important; } .leadershipImgBlock .fadeTitle, .leadershipImgBlock .fadeCopy, .leadershipImgBlock .fadeLink { display: none; } .modal-execs { margin-top: 7rem; } .modal-execs p { font: 1.25rem/145% "Raleway", sans-serif; font-weight: 400; color: #231f20; padding: 0.5rem 0px 0px 0px; } .modal-execs img { width: 100%; padding: 0px 15px 15px 0px; } .modal-execs .execName, .modal-execs .execRole { color: #231f20; text-transform: uppercase; letter-spacing: 1px; } .modal-execs .execName { font: 1.75rem/1rem "Raleway", sans-serif; font-weight: 400; } .modal-execs .execRole { font: 1.5rem/1rem "Raleway", sans-serif; font-weight: 400; } /* @group Team Styles */ #teamGalleries { max-width: 100%; overflow-x: hidden; text-align: left; } .team-placeholder { background-color: #efe3D3; padding: 15px; width: 98%; margin: 0 1% 10px; cursor: pointer; } .team-listing { background-color: #efe3D3; padding: 15px; width: auto; margin: 0 1% 10px; cursor: pointer; } /* .preBox { //display: flex; //padding: 40px; align-items: center; justify-content: center; //flex-direction: column; } */ .box { background-color: #fdfbf8; border-radius: 10px; box-shadow: 0.5rem 0.5rem 0.5rem 0rem rgba(17, 12, 46, 0.2); transform: translateX(400%); transition: transform 1s ease; max-width: 100%; overflow-x: hidden; margin-bottom: 3rem; border: 0.375rem solid rgba(6, 80, 89, 0.3); } .box:nth-of-type(even) { transform: translateX(-400%); } .box.show { transform: translateX(0); } .team-placeholder h2, .team-listing h2, .modal-content-team h4 { font: 3rem/100% "Raleway", sans-serif; font-weight: 300; color: #ffbc00; padding: 0.5rem 0.5rem 0.75rem 0.5rem; letter-spacing: 0.0625rem; display: inline-block; margin: 0; padding-bottom: 2rem; } .team-placeholder h3, .team-listing h4, .modal-content-team h5 { font: 1.25rem/100% "Raleway", sans-serif; font-weight: 500; padding: 0.75rem 0.5rem 0.25rem 0.5rem; color: #ffbc00; text-transform: uppercase; letter-spacing: 0.0625rem; } .team-placeholder p, .team-placeholder a, .team-placeholder a:hover, .modal-content-team p { color: #231f20; text-decoration: none; text-align: left; } /* xs */ /* sm */ /* md */ @media (min-width: 768px) { .leadershipImgBlock .fadeTitle, .leadershipImgBlock .fadeCopy, .leadershipImgBlock .fadeLink { display: flow; } .leadershipImgBlock .fadeCopy p, .leadershipImgBlock .fadeCopy a, .leadershipImgBlock .fadeCopy a:hover { font: 1rem/145% "Raleway", sans-serif; font-weight: 400; color: #231f20; padding: 0.5rem 1rem 0.5rem; } .leadershipImgBlock .fadeLink { font-family: "Raleway", sans-serif; font-weight: 400; letter-spacing: 0px; display: inline-block; color: #231f20 !important; background-color: #F6EC3C; border: none; font-size: inherit; line-height: inherit; padding: 0.25rem 0.5rem 0.25rem 0.5rem; transition: all 0.5s linear; margin: -2rem 0.5rem -1rem; } .modal-execs p { padding: 0.5rem 1rem 0.5rem; } .modal-execs img { width: 50%; } } /* lg */ @media (min-width: 992px) { .leadershipImgBlock { height: 365px; } .leadershipImgBlock img { position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: auto; } .leadershipImgBlock .overlay { position: absolute; z-index: 1; display: block; width: 100%; height: 307px; background: rgba(192, 190, 190, 0.8); background-size: 100% auto; opacity: 0; transition: opacity 0.5s linear; } .leadershipImgBlock:hover .overlay { opacity: 1; } .leadershipImgBlock h3 { font: 1.5rem/1.5rem "Raleway", sans-serif; font-weight: 400; color: #231f20; position: absolute; z-index: 2; display: block; width: 100%; text-transform: uppercase; letter-spacing: 1px; } .leadershipImgBlock .fadeCopy p, .leadershipImgBlock .fadeCopy a, .leadershipImgBlock .fadeCopy a:hover { font: 1rem/145% "Raleway", sans-serif; font-weight: 400; color: #231f20; padding: 0.5rem 1rem 0.5rem; } .leadershipImgBlock .fadeTitle { margin-top: 20px; position: relative; z-index: 2; opacity: 0; } .leadershipImgBlock .fadeCopy { margin-top: 80px; position: relative; z-index: 2; opacity: 0; } .leadershipImgBlock .fadeLink { margin-top: 10px; position: relative; z-index: 2; opacity: 0; } .leadershipImgBlock:hover .fadeTitle, .leadershipImgBlock:hover .fadeCopy, .leadershipImgBlock:hover .fadeLink { animation: fadeIn 3s; opacity: 1; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } .execModal { width: 48%; } } /* xl */ @media (min-width: 1200px) { .leadershipImgBlock { height: 365px; } .leadershipImgBlock .overlay { height: 365px; } .leadershipImgBlock h1 { font-size: 2.75rem; } .leadershipImgBlock .fadeCopy p, .leadershipImgBlock .fadeCopy a, .leadershipImgBlock .fadeCopy a:hover { font: 1.25rem/145% "Raleway", sans-serif; font-weight: 400; color: #231f20; padding: 0.5rem 1rem 0.5rem; } } /* xxl */ @media (min-width: 1400px) { .leadershipImgBlock { height: 400px; } .leadershipImgBlock .overlay { height: 400px; } .leadershipImgBlock h1 { font-size: 2.75rem; } } /* @end */ /* @end */ /* @group Promotional Modals */ /* * Promotional Modals */ /* @group Promotional Modal Styles */ .promotional-modal { z-index: 10000; text-align: center; } .promotional-modal-content { border: 0.5rem solid rgba(0, 0, 0, 0.2); -webkit-border-radius: 1rem; -moz-border-radius: 1rem; border-radius: 1rem; background: #ffffff url("../svg/modal-flowers.svg") left top no-repeat; } .promotional-modal-header { background-color: #c3287b; border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; border-bottom: 0rem solid #cc9600; height: 1rem; } .promotional-modal-header h2 { color: #c3287b; padding: 5rem 0 0 0; margin: 0; } .promotional-modal-header h3 { padding: 0 1rem 0; margin: 0; } .promotional-modal-body { background-color: transparent; } .promotional-modal-body h2 { font: 2.5rem/100% "Raleway", sans-serif; font-weight: 400; color: #e1318d; text-transform: uppercase; padding: 0.75rem 0.25rem 0.5rem; } .promotional-modal-body img { display: block; width: 100%; margin-top: 0.5rem; margin-bottom: 0.5rem; } .promotional-modal-body img[src=""] { display: none; } .promotionalText { padding: 0.5rem 0.25rem 0rem; } .promotionalText p { font: 1.255rem/135% "Raleway", sans-serif; font-weight: 400; color: #231f20; } .promotional-modal-body .button { margin-top: 1rem; } .promotional-modal-footer { margin-top: 1rem; border-top: 0px solid #d4b388; background: #d4b388; -webkit-border-bottom-right-radius: 0.5rem; -webkit-border-bottom-left-radius: 0.5rem; -moz-border-radius-bottomright: 0.5rem; -moz-border-radius-bottomleft: 0.5rem; border-bottom-right-radius: 0.5rem; border-bottom-left-radius: 0.5rem; } .promo-btn-dismiss { font: 0.7rem/115% "Raleway", sans-serif; font-weight: 400; color: #231f20; background: #ffbc00; padding: 0.5rem 0.75rem 0.5rem 0.75rem; letter-spacing: 1px; display: inline-block; margin: 0; } .promo-btn-dismiss:hover { background: #ffbc00; filter: brightness(85%); } /* @end */ /* @end */ /* @group Portfolio Modals */ /* @group Portfolio Modals */ #portfolioModals p, #portfolioSort p { color: inherit; padding: 0rem 0.5rem 2rem; } #portfolioModals h1, #portfolioModals h2, #portfolioModals h3, #portfolioModals h4, #portfolioModals h5, #portfolioModals h6, #portfolioModals .h1, #portfolioModals .h2, #portfolioModals .h3, #portfolioModals .h4, #portfolioModals .h5, #portfolioModals .h6, #portfolioSort h1, #portfolioSort h2, #portfolioSort h3, #portfolioSort h4, #portfolioSort h5, #portfolioSort h6, #portfolioSort .h1, #portfolioSort .h2, #portfolioSort .h3, #portfolioSort .h4, #portfolioSort .h5, #portfolioSort .h6 { color: #231f20; padding: 0rem 0.125rem 0.5rem; } #portfolioModals h1, #portfolioModals .h1, #portfolioSort h1, #portfolioSort .h1 { font: 1.5rem/100% "Raleway", sans-serif; font-weight: 800; } #portfolioModals h2, #portfolioModals .h2, #portfolioSort h2, #portfolioSort .h2 { font: 1.25rem/100% "Raleway", sans-serif; font-weight: 800; } #portfolioModals h4, #portfolioModals .h4, #portfolioSort h4, #portfolioSort .h4 { font: 1.1rem/100% "Raleway", sans-serif; font-weight: 800; color: #656262; } #portfolioModals h3, #portfolioModals .h3, #portfolioSort h3, #portfolioSort .h3 { font: 0.875rem/100% "Raleway", sans-serif; font-weight: 300; } #portfolioModals h5, #portfolioModals .h5, #portfolioSort h5, #portfolioSort .h5 { font: 1.375rem/100% "Raleway", sans-serif; font-weight: 800; color: #656262; } #portfolioModals h6, #portfolioModals .h6, #portfolioSort h6, #portfolioSort .h6 { font: 1.75rem/100% "Raleway", sans-serif; font-weight: 800; } #portfolioModals img, #portfolioSort img { padding: 0.25rem 0.25rem 0.5rem 0.25rem; } #portfolioModals .flip-box-back h2, #portfolioSort .flip-box-back h2 { font: 3vw/100% "Raleway", sans-serif; font-weight: 800; margin-top: 35%; padding: 0rem 1.5rem; } #portfolioModals, #portfolioSort { /* @group Homepage Category Nav */ } #portfolioModals #portfolioCats, #portfolioSort #portfolioCats { text-align: left; } #portfolioModals #portfolioCats ul, #portfolioSort #portfolioCats ul { display: inline-block; padding-left: 0; margin: 0 1rem; } #portfolioModals #portfolioCats ul li, #portfolioSort #portfolioCats ul li { display: inline-block; padding: 0.2rem 0.4rem 0.4rem; margin: 0.375rem 0.5rem 0.375rem 0rem; border-radius: 0.25rem; background-color: #ffda72; transition: all 0.2s ease-in-out; text-decoration: none; } #portfolioModals #portfolioCats ul li:hover, #portfolioModals #portfolioCats ul li:focus, #portfolioSort #portfolioCats ul li:hover, #portfolioSort #portfolioCats ul li:focus { text-decoration: none; background-color: #ffbc00; transform: scale(1.06); } #portfolioModals li.project a, #portfolioSort li.project a { font: 1rem/100% "Raleway", sans-serif; font-weight: 600; letter-spacing: 0.0125rem; color: #231f20; text-transform: lowercase; text-decoration: none; } #portfolioModals li.project a:hover, #portfolioModals li.project a:focus, #portfolioSort li.project a:hover, #portfolioSort li.project a:focus { text-decoration: none; } #portfolioModals, #portfolioSort { /* @end Homepage Category Nav */ } #portfolioModals .portfolio-placeholder, #portfolioModals .portfolio-placeholder-disabled, #portfolioSort .portfolio-placeholder, #portfolioSort .portfolio-placeholder-disabled { background-color: transparent; padding: 15px; width: 48%; margin: 0 1% 10px; text-align: center; } #portfolioModals .modal-content-portfolio, #portfolioSort .modal-content-portfolio { border: 6px solid rgba(35, 31, 32, 0.3); background-color: #f2f2f2; text-align: center; } #portfolioModals .carousel-shading-modal p, #portfolioSort .carousel-shading-modal p { font: 1.25rem/1.75rem "Raleway", sans-serif; font-weight: 400; color: #f2f2f2; margin-top: 0; text-align: left; letter-spacing: 0.5px; } #portfolioModals a.sub-item, #portfolioSort a.sub-item { font: 1.25rem/2rem "Raleway", sans-serif; font-weight: 400; color: #e99a3f; text-transform: uppercase; transition: 0.5s; letter-spacing: 0px; } #portfolioModals a:hover.sub-item, #portfolioSort a:hover.sub-item { color: #ffbc00; } #portfolioModals .modal-footer-portfolio, #portfolioSort .modal-footer-portfolio { display: inline-block; margin-bottom: 2rem; } #portfolioModals, #portfolioSort { /* @group flippie fuckers */ /* The flip box container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */ } #portfolioModals .flip-box, #portfolioSort .flip-box { position: relative; display: inline-block; background-color: transparent; width: 150px; height: 150px; perspective: 1000px; /* Remove this if you don't want the 3D effect */ margin: 0 auto; padding: 0.6rem; border-radius: 50%; } #portfolioModals, #portfolioSort { /* This container is needed to position the front and back side */ } #portfolioModals .flip-box-inner, #portfolioSort .flip-box-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; } #portfolioModals, #portfolioSort { /* Do an horizontal flip when you move the mouse over the flip box container */ } #portfolioModals .flip-box:hover .flip-box-inner, #portfolioSort .flip-box:hover .flip-box-inner { transform: rotateY(180deg); } #portfolioModals, #portfolioSort { /* Position the front and back side */ } #portfolioModals .flip-box-front, #portfolioModals .flip-box-back, #portfolioSort .flip-box-front, #portfolioSort .flip-box-back { position: absolute; background-size: cover !important; background-position: center !important; width: 100%; height: 100%; border-radius: 50%; backface-visibility: hidden; } #portfolioModals, #portfolioSort { /* Style the front side (fallback if image is missing) */ } #portfolioModals .flip-box-front, #portfolioSort .flip-box-front { background-color: transparent; color: transparent; -webkit-box-shadow: 0px 0px 12px 3px rgba(35, 31, 32, 0.15); box-shadow: 0px 0px 12px 3px rgba(35, 31, 32, 0.15); } #portfolioModals, #portfolioSort { /* Style the back side */ } #portfolioModals .flip-box-back, #portfolioSort .flip-box-back { background-color: transparent; color: transparent; transform: rotateY(180deg); -webkit-box-shadow: 0px 0px 12px 3px rgba(35, 31, 32, 0.3); box-shadow: 0px 0px 12px 3px rgba(35, 31, 32, 0.3); } #portfolioModals .flip-box-back:hover, #portfolioSort .flip-box-back:hover { filter: brightness(100%); } #portfolioModals, #portfolioSort { /* @end flippie fuckers */ /* @group Animated Blocks on Modals */ } #portfolioModals .portfolioImgBlock, #portfolioSort .portfolioImgBlock { position: relative; display: block; width: 100%; padding-top: 1rem; } #portfolioModals .portfolioImgBlock:hover, #portfolioModals .portfolioImgBlock:focus, #portfolioSort .portfolioImgBlock:hover, #portfolioSort .portfolioImgBlock:focus { padding-top: 1rem; background: transparent !important; } #portfolioModals .portfolioImgBlock img, #portfolioSort .portfolioImgBlock img { width: 100%; height: auto; } #portfolioModals .portfolioImgBlock .overlay, #portfolioModals .portfolioImgBlock h1, #portfolioSort .portfolioImgBlock .overlay, #portfolioSort .portfolioImgBlock h1 { display: none; } #portfolioModals .portfolio-placeholder .portfolioImgBlock, #portfolioSort .portfolio-placeholder .portfolioImgBlock { cursor: pointer; } #portfolioModals .portfolio-placeholder-disabled .portfolioImgBlock, #portfolioSort .portfolio-placeholder-disabled .portfolioImgBlock { cursor: default !important; } #portfolioModals #portfolioModals, #portfolioSort #portfolioModals { text-align: center; padding-top: 50px; } #portfolioModals #portfolioSort, #portfolioSort #portfolioSort { text-align: left; } #portfolioModals, #portfolioSort { /* @end * / /* @group Skinny Modals */ } #portfolioModals img.skinnyLogo, #portfolioSort img.skinnyLogo { width: 70%; margin: -1.5rem 15% -1.5rem; } #portfolioModals .skinnyModal, #portfolioSort .skinnyModal { text-align: center; margin-top: 1.5rem; padding: 0rem 1rem; } #portfolioModals .skinnyModal p, #portfolioSort .skinnyModal p { font: 1.125rem/125% "Raleway", sans-serif; font-weight: 400; margin-left: -0.5rem !important; padding-top: 0.5rem; } #portfolioModals .skinnyModal p strong, #portfolioSort .skinnyModal p strong { font: 1.125rem/125% "Raleway", sans-serif; font-weight: 800; } #portfolioModals .skinnyModal h6, #portfolioSort .skinnyModal h6 { font-size: 2.25rem; } #portfolioModals #serviceCats, #portfolioSort #serviceCats { text-align: center; } #portfolioModals #serviceCats ul, #portfolioSort #serviceCats ul { display: inline-block; padding-left: 0; margin: 0 0.25rem 0.5rem; list-style: none; } #portfolioModals #serviceCats ul li, #portfolioSort #serviceCats ul li { display: inline-block; padding: 0.125rem 0rem 0rem; margin: 0 auto; transition: all 0.2s ease-in-out; text-decoration: none; } #portfolioModals #serviceCats ul li:not(:last-child)::after, #portfolioSort #serviceCats ul li:not(:last-child)::after { content: "•"; /* Unicode for a bullet point */ margin-left: 0.25rem; /* Space between item and bullet */ margin-right: 0rem; /* Space between bullet and next item */ } #portfolioModals li.service, #portfolioSort li.service { font: 0.85rem/80% "Raleway", sans-serif; font-weight: 600; color: #656262; text-decoration: none; } #portfolioModals, #portfolioSort { /* @end */ /* xs */ } #portfolioModals, #portfolioSort { /* sm */ } @media (min-width: 576px) { #portfolioModals .flip-box, #portfolioSort .flip-box { width: 200px; height: 200px; } #portfolioModals .flip-box-back h2, #portfolioSort .flip-box-back h2 { font: 4vw/100% "Raleway", sans-serif; font-weight: 800; margin-top: 35%; padding: 0rem 1.5rem; } } #portfolioModals, #portfolioSort { /* md */ } @media (min-width: 768px) { #portfolioModals h2, #portfolioModals .h2, #portfolioSort h2, #portfolioSort .h2 { font: 1.75rem/100% "Raleway", sans-serif; font-weight: 800; } #portfolioModals h4, #portfolioModals .h4, #portfolioSort h4, #portfolioSort .h4 { font: 1.375rem/100% "Raleway", sans-serif; font-weight: 800; color: #656262; } #portfolioModals h3, #portfolioModals .h3, #portfolioSort h3, #portfolioSort .h3 { font: 0.875rem/100% "Raleway", sans-serif; font-weight: 300; } #portfolioModals h5, #portfolioModals .h5, #portfolioSort h5, #portfolioSort .h5 { font: 1.625rem/100% "Raleway", sans-serif; font-weight: 800; color: #656262; } #portfolioModals h6, #portfolioModals .h6, #portfolioSort h6, #portfolioSort .h6 { font: 2.25rem/100% "Raleway", sans-serif; font-weight: 800; } #portfolioModals .flip-box, #portfolioSort .flip-box { width: 250px; height: 250px; } #portfolioModals .flip-box-back h2, #portfolioSort .flip-box-back h2 { font: 4vw/100% "Raleway", sans-serif; font-weight: 800; margin-top: 35%; padding: 0rem 1.5rem; } #portfolioModals, #portfolioSort { /* @group Skinny Modals */ } #portfolioModals img.skinnyLogo, #portfolioSort img.skinnyLogo { width: 80%; margin: -1rem 10% 0; } #portfolioModals .skinnyModal, #portfolioSort .skinnyModal { text-align: left !important; margin-top: 1.5rem; padding-left: 0.5rem !important; } #portfolioModals .skinnyModal p, #portfolioSort .skinnyModal p { font: 1.25rem/125% "Raleway", sans-serif; font-weight: 400; margin-left: -0.5rem !important; padding-top: 0.5rem; } #portfolioModals .skinnyModal p strong, #portfolioSort .skinnyModal p strong { font: 1.25rem/100% "Raleway", sans-serif; font-weight: 800; } #portfolioModals .skinnyModal h6, #portfolioSort .skinnyModal h6 { font-size: 2.5rem; } #portfolioModals #serviceCats, #portfolioSort #serviceCats { text-align: left; } #portfolioModals #serviceCats ul, #portfolioSort #serviceCats ul { display: inline-block; padding-left: 0; margin: 0 0rem 1.25rem; list-style: none; } #portfolioModals #serviceCats ul li, #portfolioSort #serviceCats ul li { display: inline-block; padding: 0.125rem 0.25rem 0rem 0rem; margin: 0 auto; transition: all 0.2s ease-in-out; text-decoration: none; } #portfolioModals #serviceCats ul li:not(:last-child)::after, #portfolioSort #serviceCats ul li:not(:last-child)::after { content: "•"; /* Unicode for a bullet point */ margin-left: 0.25em; /* Space between item and bullet */ margin-right: 0.125em; /* Space between bullet and next item */ } #portfolioModals li.service, #portfolioSort li.service { font: 1rem/80% "Raleway", sans-serif; font-weight: 600; color: #656262; text-decoration: none; } #portfolioModals, #portfolioSort { /* @end */ } } #portfolioModals, #portfolioSort { /* lg */ } @media (min-width: 992px) { #portfolioModals, #portfolioSort { /* @group Homepage Category Nav */ } #portfolioModals #portfolioCats, #portfolioSort #portfolioCats { text-align: left; } #portfolioModals #portfolioCats ul, #portfolioSort #portfolioCats ul { display: inline-block; padding-left: 0; margin: 0 1rem; } #portfolioModals #portfolioCats ul li, #portfolioSort #portfolioCats ul li { display: inline-block; padding: 0.425rem 0.67rem 0.67rem; margin: 0.5rem 1rem 0.5rem 0rem; border-radius: 0.25rem; background-color: #ffda72; transition: all 0.2s ease-in-out; text-decoration: none; } #portfolioModals #portfolioCats ul li:hover, #portfolioModals #portfolioCats ul li:focus, #portfolioSort #portfolioCats ul li:hover, #portfolioSort #portfolioCats ul li:focus { text-decoration: none; background-color: #ffbc00; transform: scale(1.06); } #portfolioModals li.project a, #portfolioSort li.project a { font: 1.25rem/125% "Raleway", sans-serif; font-weight: 600; letter-spacing: 0.0125rem; color: #231f20; text-transform: lowercase; text-decoration: none; } #portfolioModals li.project a:hover, #portfolioModals li.project a:focus, #portfolioSort li.project a:hover, #portfolioSort li.project a:focus { text-decoration: none; } #portfolioModals, #portfolioSort { /* @end Homepage Category Nav */ } #portfolioModals .flip-box, #portfolioSort .flip-box { width: 180px; height: 180px; } #portfolioModals .flip-box-back h2, #portfolioSort .flip-box-back h2 { font: 2.5vw/100% "Raleway", sans-serif; font-weight: 800; margin-top: 35%; padding: 0rem 1.5rem; } #portfolioModals .portfolio-placeholder, #portfolioModals .portfolio-placeholder-disabled, #portfolioSort .portfolio-placeholder, #portfolioSort .portfolio-placeholder-disabled { width: 23%; } #portfolioModals .pageheadTitle, #portfolioSort .pageheadTitle { bottom: -4rem; width: 70%; margin: 20px 15% 20px; --mask: radial-gradient(15px at 15px 15px,#0000 98%,#000) -15px -15px; } #portfolioModals h1.pageheadTitle, #portfolioSort h1.pageheadTitle { font: 3.5rem/3.5rem "Raleway", sans-serif; font-weight: 400; padding: 15px; } #portfolioModals .spaces-header h2, #portfolioSort .spaces-header h2 { font: 4rem/2rem "Raleway", sans-serif; font-weight: 400; color: #ffbc00; padding: 0px 15px 0px; text-transform: lowercase; word-break: keep-all !important; -webkit-hyphens: none; -moz-hyphens: none; hyphens: none; } #portfolioModals .portfolioImgBlock, #portfolioSort .portfolioImgBlock { position: relative; display: block; width: 100%; height: 260px; overflow: hidden; text-decoration: none; text-align: center; } #portfolioModals .portfolioImgBlock img, #portfolioSort .portfolioImgBlock img { position: absolute; z-index: 0; top: 0; left: 0; width: 100%; height: auto; } #portfolioModals .portfolioImgBlock .overlay, #portfolioSort .portfolioImgBlock .overlay { position: absolute; z-index: 1; display: block; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.75); background-size: 100% auto; opacity: 0; transition: opacity 0.5s linear; } #portfolioModals .portfolioImgBlock:hover .overlay, #portfolioSort .portfolioImgBlock:hover .overlay { opacity: 0.8; } #portfolioModals .portfolioImgBlock h1, #portfolioSort .portfolioImgBlock h1 { font: 2rem/2.5rem "Raleway", sans-serif; font-weight: 400; color: #f2f2f2; position: absolute; z-index: 2; display: block; width: 100%; text-transform: uppercase; } #portfolioModals .portfolioImgBlock .line1, #portfolioSort .portfolioImgBlock .line1 { margin-top: 20%; left: 100%; transition: left 0.25s linear; } #portfolioModals .portfolioImgBlock .line2, #portfolioSort .portfolioImgBlock .line2 { margin-top: 30%; left: -100%; transition: left 0.25s linear; } #portfolioModals .portfolioImgBlock:hover .line1, #portfolioModals .portfolioImgBlock:hover .line2, #portfolioSort .portfolioImgBlock:hover .line1, #portfolioSort .portfolioImgBlock:hover .line2 { left: 0; } #portfolioModals h1.line1:empty, #portfolioModals h1.line2:empty, #portfolioSort h1.line1:empty, #portfolioSort h1.line2:empty { display: none !important; } } #portfolioModals, #portfolioSort { /* xl */ } @media (min-width: 1200px) { #portfolioModals .flip-box, #portfolioSort .flip-box { width: 225px; height: 225px; } #portfolioModals .portfolioImgBlock, #portfolioSort .portfolioImgBlock { height: 280px; } #portfolioModals .portfolioImgBlock h1, #portfolioSort .portfolioImgBlock h1 { font-size: 2.75rem; } } #portfolioModals, #portfolioSort { padding-bottom: 2rem; } /* @end */ /* @end */ /* @group Full Width Images with Text Blocks and Optional Buttons */ /* * Full Span Image Block with Text and Buttons */ #featureWidth p, #featureWidthText p, #featureWidthTextNoZee p, #featureWidthBanner p, #featureWidthMenu p, #featureWidthHappenings p, #featureWidthEvents p, #featureWidthAmp p { color: #ffbc00; padding: 0.25rem 0.5rem 1rem; z-index: 2; } #featureWidth h1, #featureWidth h2, #featureWidth h4, #featureWidth h5, #featureWidth h6, #featureWidth .h1, #featureWidth .h2, #featureWidth .h4, #featureWidth .h5, #featureWidth .h6, #featureWidthText h1, #featureWidthText h2, #featureWidthText h4, #featureWidthText h5, #featureWidthText h6, #featureWidthText .h1, #featureWidthText .h2, #featureWidthText .h4, #featureWidthText .h5, #featureWidthText .h6, #featureWidthTextNoZee h1, #featureWidthTextNoZee h2, #featureWidthTextNoZee h4, #featureWidthTextNoZee h5, #featureWidthTextNoZee h6, #featureWidthTextNoZee .h1, #featureWidthTextNoZee .h2, #featureWidthTextNoZee .h4, #featureWidthTextNoZee .h5, #featureWidthTextNoZee .h6, #featureWidthBanner h1, #featureWidthBanner h2, #featureWidthBanner h4, #featureWidthBanner h5, #featureWidthBanner h6, #featureWidthBanner .h1, #featureWidthBanner .h2, #featureWidthBanner .h4, #featureWidthBanner .h5, #featureWidthBanner .h6, #featureWidthMenu h1, #featureWidthMenu h2, #featureWidthMenu h4, #featureWidthMenu h5, #featureWidthMenu h6, #featureWidthMenu .h1, #featureWidthMenu .h2, #featureWidthMenu .h4, #featureWidthMenu .h5, #featureWidthMenu .h6, #featureWidthHappenings h1, #featureWidthHappenings h2, #featureWidthHappenings h4, #featureWidthHappenings h5, #featureWidthHappenings h6, #featureWidthHappenings .h1, #featureWidthHappenings .h2, #featureWidthHappenings .h4, #featureWidthHappenings .h5, #featureWidthHappenings .h6, #featureWidthEvents h1, #featureWidthEvents h2, #featureWidthEvents h4, #featureWidthEvents h5, #featureWidthEvents h6, #featureWidthEvents .h1, #featureWidthEvents .h2, #featureWidthEvents .h4, #featureWidthEvents .h5, #featureWidthEvents .h6, #featureWidthAmp h1, #featureWidthAmp h2, #featureWidthAmp h4, #featureWidthAmp h5, #featureWidthAmp h6, #featureWidthAmp .h1, #featureWidthAmp .h2, #featureWidthAmp .h4, #featureWidthAmp .h5, #featureWidthAmp .h6 { font-family: "Raleway", sans-serif; font-weight: 800; padding: 0px 0.5rem 0.25rem; } #featureWidth h3, #featureWidth .h3, #featureWidthText h3, #featureWidthText .h3, #featureWidthTextNoZee h3, #featureWidthTextNoZee .h3, #featureWidthBanner h3, #featureWidthBanner .h3, #featureWidthMenu h3, #featureWidthMenu .h3, #featureWidthHappenings h3, #featureWidthHappenings .h3, #featureWidthEvents h3, #featureWidthEvents .h3, #featureWidthAmp h3, #featureWidthAmp .h3 { font-family: "Raleway", sans-serif; padding: 0px 0.5rem 0.25rem; } #featureWidth .introText, #featureWidthText .introText, #featureWidthTextNoZee .introText, #featureWidthBanner .introText, #featureWidthMenu .introText, #featureWidthHappenings .introText, #featureWidthEvents .introText, #featureWidthAmp .introText { padding: 1rem; margin: 2rem auto 0; } #featureWidth .introText p, #featureWidthText .introText p, #featureWidthTextNoZee .introText p, #featureWidthBanner .introText p, #featureWidthMenu .introText p, #featureWidthHappenings .introText p, #featureWidthEvents .introText p, #featureWidthAmp .introText p { padding: 0 0 1rem; line-height: 125%; } #featureWidth span.bwHeader, #featureWidthText span.bwHeader, #featureWidthTextNoZee span.bwHeader, #featureWidthBanner span.bwHeader, #featureWidthMenu span.bwHeader, #featureWidthHappenings span.bwHeader, #featureWidthEvents span.bwHeader, #featureWidthAmp span.bwHeader { font: 0.825rem/100% "Raleway", sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; } #featureWidth span.bwSubHeader, #featureWidthText span.bwSubHeader, #featureWidthTextNoZee span.bwSubHeader, #featureWidthBanner span.bwSubHeader, #featureWidthMenu span.bwSubHeader, #featureWidthHappenings span.bwSubHeader, #featureWidthEvents span.bwSubHeader, #featureWidthAmp span.bwSubHeader { font: 2.25rem/125% "Raleway", sans-serif; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px; } #featureWidth .headlineText, #featureWidth .subheadlineText, #featureWidth .sectionText, #featureWidthText .headlineText, #featureWidthText .subheadlineText, #featureWidthText .sectionText, #featureWidthTextNoZee .headlineText, #featureWidthTextNoZee .subheadlineText, #featureWidthTextNoZee .sectionText, #featureWidthBanner .headlineText, #featureWidthBanner .subheadlineText, #featureWidthBanner .sectionText, #featureWidthMenu .headlineText, #featureWidthMenu .subheadlineText, #featureWidthMenu .sectionText, #featureWidthHappenings .headlineText, #featureWidthHappenings .subheadlineText, #featureWidthHappenings .sectionText, #featureWidthEvents .headlineText, #featureWidthEvents .subheadlineText, #featureWidthEvents .sectionText, #featureWidthAmp .headlineText, #featureWidthAmp .subheadlineText, #featureWidthAmp .sectionText { margin-bottom: 1rem; } #featureWidth .transBg-top, #featureWidthText .transBg-top, #featureWidthTextNoZee .transBg-top, #featureWidthBanner .transBg-top, #featureWidthMenu .transBg-top, #featureWidthHappenings .transBg-top, #featureWidthEvents .transBg-top, #featureWidthAmp .transBg-top { position: absolute; width: 100%; /* height: fit-content; */ background-color: #f2f2f2; /* top: 0; */ /* right: 0; */ height: fit-content; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 6px; } #featureWidth .transBg-bottom, #featureWidthText .transBg-bottom, #featureWidthTextNoZee .transBg-bottom, #featureWidthBanner .transBg-bottom, #featureWidthMenu .transBg-bottom, #featureWidthHappenings .transBg-bottom, #featureWidthEvents .transBg-bottom, #featureWidthAmp .transBg-bottom { position: absolute; width: 100%; /* height: fit-content; */ background-color: #f2f2f2; /* top: 0; */ /* right: 0; */ height: fit-content; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 6px; } #featureWidth .transBg, #featureWidthText .transBg, #featureWidthTextNoZee .transBg, #featureWidthBanner .transBg, #featureWidthMenu .transBg, #featureWidthHappenings .transBg, #featureWidthEvents .transBg, #featureWidthAmp .transBg { position: absolute; width: 100%; background-color: #ffffff; opacity: 1; height: fit-content; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 6px; } #featureWidth .transNoBg, #featureWidthText .transNoBg, #featureWidthTextNoZee .transNoBg, #featureWidthBanner .transNoBg, #featureWidthMenu .transNoBg, #featureWidthHappenings .transNoBg, #featureWidthEvents .transNoBg, #featureWidthAmp .transNoBg { position: absolute; width: 100%; background-color: rgba(1, 1, 1, 0.75); height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); } #featureWidth .transNoBg:hover, #featureWidthText .transNoBg:hover, #featureWidthTextNoZee .transNoBg:hover, #featureWidthBanner .transNoBg:hover, #featureWidthMenu .transNoBg:hover, #featureWidthHappenings .transNoBg:hover, #featureWidthEvents .transNoBg:hover, #featureWidthAmp .transNoBg:hover { background-color: transparent; transition: all 0.5s; } #featureWidth .borderBoxNoText, #featureWidthText .borderBoxNoText, #featureWidthTextNoZee .borderBoxNoText, #featureWidthBanner .borderBoxNoText, #featureWidthMenu .borderBoxNoText, #featureWidthHappenings .borderBoxNoText, #featureWidthEvents .borderBoxNoText, #featureWidthAmp .borderBoxNoText { padding: 4rem; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); } #featureWidth, #featureWidthText, #featureWidthTextNoZee, #featureWidthBanner, #featureWidthMenu, #featureWidthHappenings, #featureWidthEvents, #featureWidthAmp { /* img.noLeft { object-fit: cover; height: auto; min-height: 600px; margin-right: 0; } */ } #featureWidth .transBg-static, #featureWidthText .transBg-static, #featureWidthTextNoZee .transBg-static, #featureWidthBanner .transBg-static, #featureWidthMenu .transBg-static, #featureWidthHappenings .transBg-static, #featureWidthEvents .transBg-static, #featureWidthAmp .transBg-static { position: absolute; /* height: fit-content; */ /* top: 0; */ /* right: 0; */ height: fit-content; top: 50%; left: 12.5%; transform: translate(-8.5%, -50%); z-index: 2; text-align: center; border-radius: 6px; } #featureWidth .right-black, #featureWidth .right-primary, #featureWidth .right-white, #featureWidthText .right-black, #featureWidthText .right-primary, #featureWidthText .right-white, #featureWidthTextNoZee .right-black, #featureWidthTextNoZee .right-primary, #featureWidthTextNoZee .right-white, #featureWidthBanner .right-black, #featureWidthBanner .right-primary, #featureWidthBanner .right-white, #featureWidthMenu .right-black, #featureWidthMenu .right-primary, #featureWidthMenu .right-white, #featureWidthHappenings .right-black, #featureWidthHappenings .right-primary, #featureWidthHappenings .right-white, #featureWidthEvents .right-black, #featureWidthEvents .right-primary, #featureWidthEvents .right-white, #featureWidthAmp .right-black, #featureWidthAmp .right-primary, #featureWidthAmp .right-white { height: 100%; width: 60%; opacity: 1; display: inline-block; position: absolute; margin-left: 55%; } #featureWidth .left-black, #featureWidth .left-primary, #featureWidth .left-white, #featureWidthText .left-black, #featureWidthText .left-primary, #featureWidthText .left-white, #featureWidthTextNoZee .left-black, #featureWidthTextNoZee .left-primary, #featureWidthTextNoZee .left-white, #featureWidthBanner .left-black, #featureWidthBanner .left-primary, #featureWidthBanner .left-white, #featureWidthMenu .left-black, #featureWidthMenu .left-primary, #featureWidthMenu .left-white, #featureWidthHappenings .left-black, #featureWidthHappenings .left-primary, #featureWidthHappenings .left-white, #featureWidthEvents .left-black, #featureWidthEvents .left-primary, #featureWidthEvents .left-white, #featureWidthAmp .left-black, #featureWidthAmp .left-primary, #featureWidthAmp .left-white { height: 100%; width: 45%; opacity: 1; display: inline-block; position: absolute; margin-right: 60%; } #featureWidth .right-black, #featureWidth .left-black, #featureWidthText .right-black, #featureWidthText .left-black, #featureWidthTextNoZee .right-black, #featureWidthTextNoZee .left-black, #featureWidthBanner .right-black, #featureWidthBanner .left-black, #featureWidthMenu .right-black, #featureWidthMenu .left-black, #featureWidthHappenings .right-black, #featureWidthHappenings .left-black, #featureWidthEvents .right-black, #featureWidthEvents .left-black, #featureWidthAmp .right-black, #featureWidthAmp .left-black { background-color: #231f20; } #featureWidth .right-white, #featureWidth .left-white, #featureWidthText .right-white, #featureWidthText .left-white, #featureWidthTextNoZee .right-white, #featureWidthTextNoZee .left-white, #featureWidthBanner .right-white, #featureWidthBanner .left-white, #featureWidthMenu .right-white, #featureWidthMenu .left-white, #featureWidthHappenings .right-white, #featureWidthHappenings .left-white, #featureWidthEvents .right-white, #featureWidthEvents .left-white, #featureWidthAmp .right-white, #featureWidthAmp .left-white { background-color: #f2f2f2; } #featureWidth .right-primary, #featureWidth .left-primary, #featureWidthText .right-primary, #featureWidthText .left-primary, #featureWidthTextNoZee .right-primary, #featureWidthTextNoZee .left-primary, #featureWidthBanner .right-primary, #featureWidthBanner .left-primary, #featureWidthMenu .right-primary, #featureWidthMenu .left-primary, #featureWidthHappenings .right-primary, #featureWidthHappenings .left-primary, #featureWidthEvents .right-primary, #featureWidthEvents .left-primary, #featureWidthAmp .right-primary, #featureWidthAmp .left-primary { background-color: #ffbc00; } #featureWidth .editorialIcons img, #featureWidthText .editorialIcons img, #featureWidthTextNoZee .editorialIcons img, #featureWidthBanner .editorialIcons img, #featureWidthMenu .editorialIcons img, #featureWidthHappenings .editorialIcons img, #featureWidthEvents .editorialIcons img, #featureWidthAmp .editorialIcons img { width: 50%; height: auto; padding: 30px; margin-top: -37.5%; margin-bottom: 5%; } #featureWidth .editorialIcons img[src=""], #featureWidthText .editorialIcons img[src=""], #featureWidthTextNoZee .editorialIcons img[src=""], #featureWidthBanner .editorialIcons img[src=""], #featureWidthMenu .editorialIcons img[src=""], #featureWidthHappenings .editorialIcons img[src=""], #featureWidthEvents .editorialIcons img[src=""], #featureWidthAmp .editorialIcons img[src=""] { display: none; } #featureWidth .locationLogos img, #featureWidthText .locationLogos img, #featureWidthTextNoZee .locationLogos img, #featureWidthBanner .locationLogos img, #featureWidthMenu .locationLogos img, #featureWidthHappenings .locationLogos img, #featureWidthEvents .locationLogos img, #featureWidthAmp .locationLogos img { cursor: default !important; /* width: 50%; height: auto; padding: 30px; margin-top: -37.5%; margin-bottom: 5%; */ } #featureWidth, #featureWidthText, #featureWidthTextNoZee, #featureWidthBanner, #featureWidthMenu, #featureWidthHappenings, #featureWidthEvents, #featureWidthAmp { /* .locationLogos img[src=""] { display: none; } */ } #featureWidth .announcementBar p, #featureWidthText .announcementBar p, #featureWidthTextNoZee .announcementBar p, #featureWidthBanner .announcementBar p, #featureWidthMenu .announcementBar p, #featureWidthHappenings .announcementBar p, #featureWidthEvents .announcementBar p, #featureWidthAmp .announcementBar p { font: 1.25rem/100% "Raleway", sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 0.125rem 0.5rem 0.125rem; color: inherit; text-align: center; } #featureWidth .announcementBar a, #featureWidthText .announcementBar a, #featureWidthTextNoZee .announcementBar a, #featureWidthBanner .announcementBar a, #featureWidthMenu .announcementBar a, #featureWidthHappenings .announcementBar a, #featureWidthEvents .announcementBar a, #featureWidthAmp .announcementBar a { color: inherit; transition: all 0.5s; text-decoration: none !important; } #featureWidth .announcementBar a:hover, #featureWidthText .announcementBar a:hover, #featureWidthTextNoZee .announcementBar a:hover, #featureWidthBanner .announcementBar a:hover, #featureWidthMenu .announcementBar a:hover, #featureWidthHappenings .announcementBar a:hover, #featureWidthEvents .announcementBar a:hover, #featureWidthAmp .announcementBar a:hover { filter: opacity(70%); text-decoration: none !important; } #featureWidth hr.feature-rule, #featureWidthText hr.feature-rule, #featureWidthTextNoZee hr.feature-rule, #featureWidthBanner hr.feature-rule, #featureWidthMenu hr.feature-rule, #featureWidthHappenings hr.feature-rule, #featureWidthEvents hr.feature-rule, #featureWidthAmp hr.feature-rule { border: 1px solid #e99a3f; margin: 1.5rem 20% 1.5rem; width: 60%; opacity: 1; } @media (max-width: 575px) { #featureWidth .right-white, #featureWidth .right-primary, #featureWidth .right-black, #featureWidth .left-white, #featureWidth .left-primary, #featureWidth .left-black, #featureWidthText .right-white, #featureWidthText .right-primary, #featureWidthText .right-black, #featureWidthText .left-white, #featureWidthText .left-primary, #featureWidthText .left-black, #featureWidthTextNoZee .right-white, #featureWidthTextNoZee .right-primary, #featureWidthTextNoZee .right-black, #featureWidthTextNoZee .left-white, #featureWidthTextNoZee .left-primary, #featureWidthTextNoZee .left-black, #featureWidthBanner .right-white, #featureWidthBanner .right-primary, #featureWidthBanner .right-black, #featureWidthBanner .left-white, #featureWidthBanner .left-primary, #featureWidthBanner .left-black, #featureWidthMenu .right-white, #featureWidthMenu .right-primary, #featureWidthMenu .right-black, #featureWidthMenu .left-white, #featureWidthMenu .left-primary, #featureWidthMenu .left-black, #featureWidthHappenings .right-white, #featureWidthHappenings .right-primary, #featureWidthHappenings .right-black, #featureWidthHappenings .left-white, #featureWidthHappenings .left-primary, #featureWidthHappenings .left-black, #featureWidthEvents .right-white, #featureWidthEvents .right-primary, #featureWidthEvents .right-black, #featureWidthEvents .left-white, #featureWidthEvents .left-primary, #featureWidthEvents .left-black, #featureWidthAmp .right-white, #featureWidthAmp .right-primary, #featureWidthAmp .right-black, #featureWidthAmp .left-white, #featureWidthAmp .left-primary, #featureWidthAmp .left-black { width: 80%; height: 80%; margin: 10% 10% 10%; } #featureWidth .text-white .multiple-buttons, #featureWidth .text-primary .multiple-buttons, #featureWidth .text-black .multiple-buttons, #featureWidthText .text-white .multiple-buttons, #featureWidthText .text-primary .multiple-buttons, #featureWidthText .text-black .multiple-buttons, #featureWidthTextNoZee .text-white .multiple-buttons, #featureWidthTextNoZee .text-primary .multiple-buttons, #featureWidthTextNoZee .text-black .multiple-buttons, #featureWidthBanner .text-white .multiple-buttons, #featureWidthBanner .text-primary .multiple-buttons, #featureWidthBanner .text-black .multiple-buttons, #featureWidthMenu .text-white .multiple-buttons, #featureWidthMenu .text-primary .multiple-buttons, #featureWidthMenu .text-black .multiple-buttons, #featureWidthHappenings .text-white .multiple-buttons, #featureWidthHappenings .text-primary .multiple-buttons, #featureWidthHappenings .text-black .multiple-buttons, #featureWidthEvents .text-white .multiple-buttons, #featureWidthEvents .text-primary .multiple-buttons, #featureWidthEvents .text-black .multiple-buttons, #featureWidthAmp .text-white .multiple-buttons, #featureWidthAmp .text-primary .multiple-buttons, #featureWidthAmp .text-black .multiple-buttons { margin-bottom: 3rem; } } #featureWidth, #featureWidthText, #featureWidthTextNoZee, #featureWidthBanner, #featureWidthMenu, #featureWidthHappenings, #featureWidthEvents, #featureWidthAmp { /* sm */ } #featureWidth, #featureWidthText, #featureWidthTextNoZee, #featureWidthBanner, #featureWidthMenu, #featureWidthHappenings, #featureWidthEvents, #featureWidthAmp { /* md */ } @media (min-width: 768px) { #featureWidth p, #featureWidthText p, #featureWidthTextNoZee p, #featureWidthBanner p, #featureWidthMenu p, #featureWidthHappenings p, #featureWidthEvents p, #featureWidthAmp p { font: 1.5rem/125% "Raleway", sans-serif; } #featureWidth .editorialIcons img, #featureWidthText .editorialIcons img, #featureWidthTextNoZee .editorialIcons img, #featureWidthBanner .editorialIcons img, #featureWidthMenu .editorialIcons img, #featureWidthHappenings .editorialIcons img, #featureWidthEvents .editorialIcons img, #featureWidthAmp .editorialIcons img { width: 20%; height: auto; padding: 30px; margin-top: -15%; margin-bottom: 5%; } #featureWidth .editorialIcons img[src=""], #featureWidthText .editorialIcons img[src=""], #featureWidthTextNoZee .editorialIcons img[src=""], #featureWidthBanner .editorialIcons img[src=""], #featureWidthMenu .editorialIcons img[src=""], #featureWidthHappenings .editorialIcons img[src=""], #featureWidthEvents .editorialIcons img[src=""], #featureWidthAmp .editorialIcons img[src=""] { display: none; } #featureWidth .locationLogos img, #featureWidthText .locationLogos img, #featureWidthTextNoZee .locationLogos img, #featureWidthBanner .locationLogos img, #featureWidthMenu .locationLogos img, #featureWidthHappenings .locationLogos img, #featureWidthEvents .locationLogos img, #featureWidthAmp .locationLogos img { width: 50%; height: auto; padding: 0; margin-left: 25%; } #featureWidth .borderBoxNoText, #featureWidthText .borderBoxNoText, #featureWidthTextNoZee .borderBoxNoText, #featureWidthBanner .borderBoxNoText, #featureWidthMenu .borderBoxNoText, #featureWidthHappenings .borderBoxNoText, #featureWidthEvents .borderBoxNoText, #featureWidthAmp .borderBoxNoText { padding: 2rem; } } #featureWidth, #featureWidthText, #featureWidthTextNoZee, #featureWidthBanner, #featureWidthMenu, #featureWidthHappenings, #featureWidthEvents, #featureWidthAmp { /* lg */ } @media (min-width: 992px) { #featureWidth .introText, #featureWidthText .introText, #featureWidthTextNoZee .introText, #featureWidthBanner .introText, #featureWidthMenu .introText, #featureWidthHappenings .introText, #featureWidthEvents .introText, #featureWidthAmp .introText { padding: 1.5rem; margin: 0 auto; } #featureWidth span.bwHeader, #featureWidthText span.bwHeader, #featureWidthTextNoZee span.bwHeader, #featureWidthBanner span.bwHeader, #featureWidthMenu span.bwHeader, #featureWidthHappenings span.bwHeader, #featureWidthEvents span.bwHeader, #featureWidthAmp span.bwHeader { font: 1rem "Raleway", sans-serif; font-weight: 800; } #featureWidth span.bwSubHeader, #featureWidthText span.bwSubHeader, #featureWidthTextNoZee span.bwSubHeader, #featureWidthBanner span.bwSubHeader, #featureWidthMenu span.bwSubHeader, #featureWidthHappenings span.bwSubHeader, #featureWidthEvents span.bwSubHeader, #featureWidthAmp span.bwSubHeader { font: 3rem "Raleway", sans-serif; font-weight: 800; } } #featureWidth, #featureWidthText, #featureWidthTextNoZee, #featureWidthBanner, #featureWidthMenu, #featureWidthHappenings, #featureWidthEvents, #featureWidthAmp { /* xl */ } /* ========================================================= Seravezza Featured Images - Stable aspect-ratio image container - Centered overlay CTA layer - Embossed / frosted button treatment - Clamp-based sizing for cleaner scaling ========================================================= */ .featureImageContainer { position: relative; width: 100%; overflow: hidden; background-color: #000; aspect-ratio: 1/1; } .featureImage { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; } .featureImage img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; margin-top: 0; } .featureTextLayer { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; width: 100%; padding: clamp(1rem, 0.8rem + 1vw, 2rem); text-align: center; } /* ----------------------------------------- Legacy feature button ----------------------------------------- */ .featureButton, .featureButton:link, .featureButton:visited { display: inline-block; font: 1.25rem/1.75rem "Raleway", sans-serif; font-weight: 800; padding: 1rem 1.5rem; letter-spacing: 0.1em; text-transform: uppercase; background-color: #f2f2f2; opacity: 0.75; } .featureButton:focus, .featureButton:hover { padding: 1rem 1.5rem; text-decoration: none; opacity: 0.85; } /* ----------------------------------------- Seravezza CTA Button Clamp rules: - base font-size uses rem clamp - internal highlighted word scales with em clamp - horizontal padding uses rem clamp ----------------------------------------- */ .ser-menu-btn, .ser-menu-btn:link, .ser-menu-btn:visited, .ser-menu-btn:hover, .ser-menu-btn:active, .ser-menu-btn:focus { --btn-radius: 1.15rem; --btn-bg: rgba(255, 255, 255, 0.12); --btn-border: rgba(255, 204, 153, 0.24); --btn-text: rgba(255, 255, 255, 0.96); --btn-hover-text: rgba(255, 204, 153, 0.96); --btn-shadow-dark: rgba(19, 27, 34, 0.16); --btn-shadow-light: rgba(255, 255, 255, 0.34); --btn-hover-shadow: rgba(19, 27, 34, 0.4); position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: clamp(11rem, 10rem + 2vw, 13rem); height: clamp(3.6rem, 3.3rem + 1.1vw, 4rem); padding-inline: clamp(1.75rem, 1.25rem + 1.33vw, 2.5rem); border-radius: var(--btn-radius); border: 1px solid var(--btn-border); background: var(--btn-bg); color: var(--btn-text); text-decoration: none !important; text-transform: uppercase; line-height: 1; overflow: hidden; isolation: isolate; white-space: nowrap; vertical-align: middle; box-sizing: border-box; /* Gotham = OUR */ font-family: "Raleway", sans-serif; font-size: clamp(1.2rem, 1.1rem + 0.66vw, 1.6rem); font-weight: 800; letter-spacing: clamp(0.055em, 0.45em + 0.12vw, 0.12em); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.14); backdrop-filter: blur(10px) saturate(120%); -webkit-backdrop-filter: blur(10px) saturate(120%); /* default embossed / recessed state */ box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.26), inset -3px -3px 7px rgba(0, 0, 0, 0.1), 0 8px 18px rgba(0, 0, 0, 0.08); transition: box-shadow 220ms ease, background-color 220ms ease, border-color 220ms ease, color 220ms ease; } .ser-menu-btn::before, .ser-menu-btn::after, .ser-menu-btn:link::before, .ser-menu-btn:link::after, .ser-menu-btn:visited::before, .ser-menu-btn:visited::after, .ser-menu-btn:hover::before, .ser-menu-btn:hover::after, .ser-menu-btn:active::before, .ser-menu-btn:active::after, .ser-menu-btn:focus::before, .ser-menu-btn:focus::after { content: ""; position: absolute; pointer-events: none; border-radius: inherit; } .ser-menu-btn::before, .ser-menu-btn:link::before, .ser-menu-btn:visited::before, .ser-menu-btn:hover::before, .ser-menu-btn:active::before, .ser-menu-btn:focus::before { inset: 0; z-index: 0; background: linear-gradient(145deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.09) 28%, rgba(255, 255, 255, 0.02) 58%, rgba(255, 255, 255, 0) 100%); } .ser-menu-btn::after, .ser-menu-btn:link::after, .ser-menu-btn:visited::after, .ser-menu-btn:hover::after, .ser-menu-btn:active::after, .ser-menu-btn:focus::after { inset: 1px; z-index: 0; border-radius: calc(var(--btn-radius) - 1px); background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.02) 45%, rgba(0, 0, 0, 0.04) 100%); } .ser-menu-btn, .ser-menu-btn:link, .ser-menu-btn:visited, .ser-menu-btn:hover, .ser-menu-btn:active, .ser-menu-btn:focus { /* Mrs Eaves = MENUS */ } .ser-menu-btn .highlight, .ser-menu-btn:link .highlight, .ser-menu-btn:visited .highlight, .ser-menu-btn:hover .highlight, .ser-menu-btn:active .highlight, .ser-menu-btn:focus .highlight { position: relative; z-index: 1; font-family: "Raleway", sans-serif; font-size: clamp(1.75em, 1.9em + 0.15vw, 2.3em); font-weight: 400; letter-spacing: 0.04em; text-transform: lowercase; display: inline-block; transform: translateY(-0.08em); } @media (hover: hover) and (pointer: fine) { .ser-menu-btn:hover, .ser-menu-btn:link:hover, .ser-menu-btn:visited:hover, .ser-menu-btn:hover:hover, .ser-menu-btn:active:hover, .ser-menu-btn:focus:hover { color: var(--btn-hover-text); text-decoration: none !important; background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.3); box-shadow: inset 1px 1px 1px rgba(255, 255, 255, 0.24), inset -2px -2px 5px rgba(0, 0, 0, 0.08), 0 12px 24px var(--btn-hover-shadow), 0 0 18px rgba(255, 255, 255, 0.1); } } .ser-menu-btn:active, .ser-menu-btn:link:active, .ser-menu-btn:visited:active, .ser-menu-btn:hover:active, .ser-menu-btn:active:active, .ser-menu-btn:focus:active { color: var(--btn-text); text-decoration: none !important; background: rgba(255, 255, 255, 0.1); box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.18), inset -1px -1px 2px rgba(255, 255, 255, 0.16), 0 4px 10px rgba(0, 0, 0, 0.08); } .ser-menu-btn:focus, .ser-menu-btn:focus-visible, .ser-menu-btn:link:focus, .ser-menu-btn:link:focus-visible, .ser-menu-btn:visited:focus, .ser-menu-btn:visited:focus-visible, .ser-menu-btn:hover:focus, .ser-menu-btn:hover:focus-visible, .ser-menu-btn:active:focus, .ser-menu-btn:active:focus-visible, .ser-menu-btn:focus:focus, .ser-menu-btn:focus:focus-visible { color: var(--btn-text); text-decoration: none !important; outline: 2px solid rgba(255, 255, 255, 0.9); outline-offset: 4px; } /* Fallback where backdrop-filter is unsupported */ @supports not ((backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px))) { .ser-menu-btn { background: rgba(255, 255, 255, 0.18); } } /* Desktop image ratio: 2400 x 1000 */ @media (min-width: 768px) { .featureButton, .featureButton:link, .featureButton:visited { font: 2rem/2.5rem "Raleway", sans-serif; font-weight: 800; } .featureImageContainer { aspect-ratio: 12/5; } } #featureWidth { position: relative; width: 100%; min-height: 500px; overflow: hidden; z-index: 1; background-color: #000000; } #featureWidthText { position: relative; width: 100%; padding-top: 50px; padding-bottom: 50px; z-index: 2; text-align: left; } #featureWidthTextNoZee { position: relative; width: 100%; padding-top: 50px; padding-bottom: 50px; z-index: 0; text-align: left; } #featureWidthBanner { position: relative; width: 100%; padding-top: 15px; padding-bottom: 0px; z-index: 1; text-align: left; } .featureBackground { position: absolute; width: 100%; z-index: -1; } .featureBackground-left, .featureBackground-right { position: absolute; width: 100%; z-index: -1; } img.featureBackground-left { object-fit: cover; height: auto; min-height: 600px; margin-right: 0; z-index: 1; } img.featureBackground-right { object-fit: cover; height: auto; min-height: 600px; margin-left: 0; z-index: 1; } .block-featureLeft, .block-featureRight { display: block; position: relative; height: 0px; /*choose your width (x) */ } .border-featureLeft, .border-featureRight { background-color: #ffbc00; } /* @group Image Blocks */ .borderBox { position: relative; width: 100%; margin: 0 auto 3rem; } .introBox { position: relative; width: 100%; margin: 1.5rem auto 0; } .borderBoxText { padding: 1rem; margin: 2rem auto 0; } /* xs */ @media (max-width: 575px) { .featureWidth { height: 600px; } .featureBackground { height: 600px; } img.featureBackground { object-fit: cover; height: 100%; min-height: 600px; } .borderBox { min-height: 400px; } .introBox { min-height: 300px; } .col.featureText { margin: 15%; } } /* sm */ @media (min-width: 576px) { .featureWidth { height: 600px; } .featureBackground { height: 600px; } img.featureBackground { object-fit: cover; height: 100%; min-height: 600px; } .borderBox { min-height: 600px; margin: 0 auto; } .introBox { min-height: 300px; /* margin: 0 auto; */ } .featureText { margin-top: 1.5rem; margin-bottom: 1.5rem; } } /* md */ @media (min-width: 768px) { .borderBoxText { padding: 1.5rem; margin: 0 auto; } .featureBackground-left, .featureBackground-right { position: absolute; width: 50%; z-index: -1; } img.featureBackground-left { object-fit: cover; height: 100%; min-height: 600px; margin-right: 50%; } img.featureBackground-right { object-fit: cover; height: 100%; min-height: 600px; margin-left: 50%; } .featureWidth { height: 450px; } .featureBackground { height: 350px; } img.featureBackground { object-fit: cover; height: 100%; min-height: 350px; } .borderBox { min-height: 300px; } .introBox { min-height: 350px; } .featureLeft { border-right: 0px solid #ffbc00; border-bottom: 0px solid #ffbc00; } .featureRight { border-bottom: 0px solid #ffbc00; } } /* lg */ @media (min-width: 992px) { .featureWidth { height: 550px; } .featureBackground { height: 450px; } img.featureBackground { object-fit: cover; height: 100%; min-height: 450px; } .borderBox { min-height: 450px; } .introBox { min-height: 350px; } } /* xl */ @media (min-width: 1200px) { .featureWidth { height: 700px; } .featureBackground { height: 600px; } img.featureBackground { object-fit: cover; height: 100%; min-height: 600px; } .borderBox { min-height: 600px; } .introBox { min-height: 350px; } .spaceBox { height: 600px; } } /* xxl */ /* @end Image Blocks */ /* ADDED PADDING TO THE CONTAINER FOR SERAVEZZA HEADER + H1 PAGE TITLE BADGE */ /* ========================================================= Seravezza page header badge overlap spacing - this equalizes the top/bottom spacing around the breadcrumb nav ========================================================= */ #pageHeadContainer + #featureWidthText, #pageHeadContainer + #featureWidthTextNoZee { font-size: clamp(1.15rem, 0.95rem + 1.15vw, 2.35rem); line-height: 1.04; } #pageHeadContainer + .container, #pageHeadContainer + .container-fluid, #pageHeadContainer + section:not(.menuLandingPageContent):not(.menuPageContent) { padding-top: clamp(2.5rem, 2rem + 1vw, 3.5rem); } /* @end */ /* @group Leading Image Blocks with Header Links */ /* // Leading Images with Text Blocks and Optional Buttons */ #leadingImages * { text-align: center; } #leadingImages p { color: inherit; padding: 0rem 0.5rem 2rem; letter-spacing: 0.5px; } #leadingImages h1, #leadingImages h2, #leadingImages h3, #leadingImages h4, #leadingImages h5, #leadingImages h6, #leadingImages .h1, #leadingImages .h2, #leadingImages .h3, #leadingImages .h4, #leadingImages .h5, #leadingImages .h6 { padding: 0rem 0.125rem; } #leadingImages h2 strong, #leadingImages .h2 strong { color: #ffbc00; } #leadingImages img { padding: 0.25rem 0.25rem 0.5rem 0.25rem; } #leadingImages { /* xs */ } #leadingImages { /* sm */ } #leadingImages { /* md */ } @media (min-width: 768px) { #leadingImages p { letter-spacing: 1px; } } #leadingImages { /* lg */ } #leadingImages { /* xl */ } /* xs */ /* sm */ /* md */ /* lg */ /* xl */ /* xxl */ /* @end */ /* @group Tables */ .table { --bs-table-bg: transparent; } /* @end */ /* @group Three Angled Images with Text Blocks and Optional Buttons */ /* @end */ /* @group Collapse (these are the complex Levy ones) */ /* * Collapse Styles */ #collapseSideSide p, #collapseTopBottom p { font: 1.25rem/140% "Raleway", sans-serif; font-weight: 500; color: #231f20; padding: 0px 0.5rem 1rem; margin-bottom: 0; } #collapseSideSide a, #collapseTopBottom a { color: #cc9600; text-decoration: none; cursor: pointer; transition-property: all 0.5s linear 0s; } #collapseSideSide a:hover, #collapseTopBottom a:hover { filter: brightness(85%); text-decoration: underline; } #collapseSideSide h1, #collapseSideSide h2, #collapseSideSide h3, #collapseSideSide h4, #collapseSideSide h5, #collapseSideSide h6, #collapseSideSide .h1, #collapseSideSide .h2, #collapseSideSide .h3, #collapseSideSide .h4, #collapseSideSide .h5, #collapseSideSide .h6, #collapseTopBottom h1, #collapseTopBottom h2, #collapseTopBottom h3, #collapseTopBottom h4, #collapseTopBottom h5, #collapseTopBottom h6, #collapseTopBottom .h1, #collapseTopBottom .h2, #collapseTopBottom .h3, #collapseTopBottom .h4, #collapseTopBottom .h5, #collapseTopBottom .h6 { padding: 0px 0.5rem; } #collapseSideSide h2, #collapseSideSide .h2, #collapseTopBottom h2, #collapseTopBottom .h2 { font: 1.75rem/115% "Raleway", sans-serif; letter-spacing: 0.25px; padding-bottom: 20px; } #collapseSideSide h2 strong, #collapseSideSide .h2 strong, #collapseTopBottom h2 strong, #collapseTopBottom .h2 strong { color: #ffbc00; } #collapseSideSide h4, #collapseSideSide .h4, #collapseTopBottom h4, #collapseTopBottom .h4 { font-size: 1.5rem; color: #ea4436; padding-top: 1rem; } #collapseSideSide .headline-class h3, #collapseSideSide .headline-class .h3, #collapseTopBottom .headline-class h3, #collapseTopBottom .headline-class .h3 { font: 1.5rem/100% "Raleway", sans-serif; font-weight: 400; letter-spacing: 0px; line-height: 100%; color: #231f20; text-transform: none; text-align: left; padding: 0 0.5rem 0 0rem; } #collapseSideSide .headline-class-top-bottom h3, #collapseSideSide .headline-class-top-bottom .h3, #collapseTopBottom .headline-class-top-bottom h3, #collapseTopBottom .headline-class-top-bottom .h3 { font: 1.5rem/100% "Raleway", sans-serif; font-weight: 400; letter-spacing: 0px; line-height: 100%; color: #231f20; text-transform: none; text-align: left; padding: 0 0.5rem 0 3rem; } #collapseSideSide, #collapseTopBottom { /* xs */ } #collapseSideSide, #collapseTopBottom { /* sm */ } #collapseSideSide, #collapseTopBottom { /* md */ } #collapseSideSide, #collapseTopBottom { /* lg */ } #collapseSideSide, #collapseTopBottom { /* xl */ } @media (min-width: 1200px) { #collapseSideSide h2, #collapseSideSide .h2, #collapseTopBottom h2, #collapseTopBottom .h2 { font: 2.5rem/115% "Raleway", sans-serif; letter-spacing: 1px; } #collapseSideSide h4, #collapseSideSide .h4, #collapseTopBottom h4, #collapseTopBottom .h4 { font-size: 1.5rem; color: #ea4436; padding-top: 0rem; } #collapseSideSide .headline-class h3, #collapseSideSide .headline-class .h3, #collapseTopBottom .headline-class h3, #collapseTopBottom .headline-class .h3 { font: 2rem/100% "Raleway", sans-serif; font-weight: 400; padding: 0 0rem 0 0.5rem; } #collapseSideSide .headline-class-top-bottom h3, #collapseSideSide .headline-class-top-bottom .h3, #collapseTopBottom .headline-class-top-bottom h3, #collapseTopBottom .headline-class-top-bottom .h3 { font: 2rem/100% "Raleway", sans-serif; font-weight: 400; padding: 0 0.5rem 0 6rem; } } #collapseSideSide, #collapseTopBottom { background: transparent; margin: 50px auto; } #collapseTopBottom .col h4:empty { display: none; } #collapseSideSide .card.card-top-bottom:hover #collapseTopBottom .card.card-top-bottom:hover { transform: none !important; } #collapseSideSide .card-body:hover, #collapseTopBottom .card-body:hover { transform: none !important; } .outerwrapper, .outerwrapper-top-bottom { display: flex; flex-direction: column; gap: 0.5rem; height: auto; } .card.card-vertical, .card.card-top-bottom { display: flex; flex-direction: column; min-width: 0px; border-radius: 0px; border: 0px; } .card-header.card-header-vertical, .card-header.card-header-top-bottom { margin-bottom: 0; background-color: #bdbbbc; border-radius: 0px; } a.introduce .card-header.card-header-vertical, a.introduce .card-header.card-header-top-bottom { background-color: #ffbc00; display: inline-block; } a.collapsed .card-header.card-header-vertical, a:link .card-header.card-header-vertical { background-color: #bdbbbc; display: inline-block; width: 100%; height: 63px; } a.collapsed .card-header.card-header-top-bottom, a:link .card-header.card-header-top-bottom { background-color: #bdbbbc; display: inline-block; width: 100%; height: auto; } [aria-expanded=true] .card-header.card-header-vertical, [aria-expanded=true] .card-header.card-header-top-bottom { margin-bottom: 0; background-color: #ffbc00 !important; -webkit-border-top-left-radius: 6px; -webkit-border-top-right-radius: 6px; -moz-border-radius-topleft: 6px; -moz-border-radius-topright: 6px; border-top-left-radius: 6px; border-top-right-radius: 6px; } [aria-expanded=false] .card-header.card-header-vertical, [aria-expanded=false] .card-header.card-header-top-bottom { margin-bottom: 0; background-color: #bdbbbc !important; border-radius: 0px; } .collapse-vertical { background-color: #f2f2f2; border: thin solid #bdbbbc; -webkit-border-bottom-right-radius: 6px; -webkit-border-bottom-left-radius: 6px; -moz-border-radius-bottomright: 6px; -moz-border-radius-bottomleft: 6px; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px; } .collapsing { width: 100%; height: 0; overflow: hidden; -webkit-transition-delay: 0.25s !important; transition-delay: 0.25s !important; transition: height 0.25s ease !important; opacity: 0.5; } .collapsing.collapse-vertical { width: 100%; height: 0; -webkit-transition-delay: 0.5s !important; transition-delay: 0.5s !important; transition: height 0.5s ease !important; } .headline-div { transform: none; display: flex; flex-direction: column; width: 100%; margin: 0 auto; position: relative; } .headline-div-top-bottom { transform: none; display: flex; flex-direction: row; width: 100%; margin: 0 auto; position: relative; } .headline-class { position: absolute; left: 50px; top: 0.375rem; display: flex; flex-direction: column; width: max-content; } .headline-class-top-bottom { position: absolute; right: -10px; top: 0.375rem; display: contents; width: max-content; } .icon-class, .icon-class-top-bottom { position: absolute; right: 91%; top: -0.25rem; display: flex; flex-direction: column; width: max-content; background-image: url(/assets/svg/plus-horizontal.svg); width: max-content; } .collapse-contents { display: inline-block; } .card-body-vertical, .card-body-top-bottom { padding: 1.5rem !important; } .card-body.card-body-vertical:hover { /* -webkit-transform:translateZ(0) scale(1); // Safari and Chrome -moz-transform:scale(1); // Firefox -ms-transform:scale(1); // IE 9 -o-transform:translatZ(0) scale(1); // Opera * transform:translatZ(0) scale(1); */ transform: none; } .horizontal-icon, .horizontal-icon-top-bottom { background-image: url(/assets/svg/plus-vertical.svg); height: 40px; width: 40px; display: block; display: inline-block; transition: 0.5s ease-in-out; } [aria-expanded=true] .horizontal-icon, [aria-expanded=true] .horizontal-icon-top-bottom { transform: rotate(-90deg); } /* standard Bootstrap breaks */ /* xs */ /* sm */ /* md */ @media (min-width: 768px) { .icon-class, .icon-class-top-bottom { position: absolute; right: 95%; top: -0.25rem; display: flex; flex-direction: column; width: max-content; background-image: url(/assets/svg/plus-horizontal.svg); width: max-content; } } /* lg */ /* xl */ @media (min-width: 1200px) { .outerwrapper { flex-direction: row; gap: 1.25rem; height: 550px; display: flex; } .card.card-vertical { flex-direction: row; min-width: 75px; } a.introduce .card-header.card-header-vertical { background-color: #ffbc00; display: inline-block; width: 82px; height: 100%; } a.collapsed.card-header.card-header-vertical, a:link.card-header.card-header-vertical, a.card-header.card-header-vertical { background-color: #bdbbbc; display: inline-block; width: 82px; height: 100%; } .collapse-horizontal { background-color: #e9e8e8; border-radius: 0px; border: 0px; } .collapsing { width: 0; height: 100%; overflow: hidden; transition: width 0.25s ease !important; } .collapsing.collapse-horizontal { opacity: 0.5; width: 0; height: 100%; -webkit-transition-delay: 0.5s !important; transition-delay: 0.5s !important; transition: width 0.5s ease-in-out !important; } .collapsing .collapse-contents p, .collapsing .collapse-contents h4 { color: #e9e8e8 !important; transition: color 0.125s !important; } .headline-div { transform: rotate(-90deg); width: 50px; } .headline-class { left: -28rem; top: -1.5rem; display: inline-flex; } .headline-class-top-bottom { top: 0rem; } .collapse-contents { display: contents; } .card-body-vertical, .card-body-top-bottom { padding: 3rem !important; } .icon-class { position: absolute; right: 500px; top: -1.25rem; display: inline-flex; background-image: url(/assets/svg/plus-vertical.svg); width: max-content; } .horizontal-icon { background-image: url(/assets/svg/plus-horizontal.svg); } .icon-class-top-bottom { position: absolute; right: 95%; top: 0.125rem; display: flex; flex-direction: column; width: max-content; background-image: url(/assets/svg/plus-horizontal.svg); width: max-content; } .horizontal-icon-top-bottom { background-image: url(/assets/svg/plus-vertical.svg); height: 40px; width: 40px; display: block; display: inline-block; transition: 0.5s ease-in-out; } [aria-expanded=true] .horizontal-icon-top-bottom { transform: rotate(-90deg); } } @media (prefers-reduced-motion: reduce) { .collapsing { transition-property: height, visibility; transition-duration: 0.35s; } } /* @end */ /* @group FAQs */ /* @end */ /* @group Restaurants */ /* @end */ /* @group Blog */ /* @end */ /* @group Events Calendar */ .calendartext p { font: 1rem/125% "Raleway", sans-serif; font-weight: 600; color: #231f20; padding: 0.25rem 0.5rem; z-index: 2; letter-spacing: 0.5px; } .calendartext p.eventDetails { font: 1rem/80% "Raleway", sans-serif; font-weight: 600; color: #231f20; padding: 0.5rem 0.75rem; z-index: 2; letter-spacing: 0.5px; } .calendartext .eventDescription p { font: 1rem/125% "Raleway", sans-serif; font-weight: 600; letter-spacing: 0; } .calendartext .eventDisclaimer p { font: 0.65rem/125% "Raleway", sans-serif; font-weight: 600; letter-spacing: 0; } .calendartext em { font-family: "Raleway", sans-serif; font-weight: 600; font-style: italic; } .calendartext strong { font-family: "Raleway", sans-serif; font-weight: 800; color: inherit; } .calendartext a, .calendartext a:visited, .calendartext a:link { color: #ffbc00; font-family: inherit; text-decoration: none; cursor: pointer; transition: all 0.25s linear 0s; } .calendartext a:hover, .calendartext a:focus { filter: brightness(85%); text-decoration: none; } .calendartext h1, .calendartext h2, .calendartext h3, .calendartext h4, .calendartext h5, .calendartext h6, .calendartext .h1, .calendartext .h2, .calendartext .h3, .calendartext .h4, .calendartext .h5, .calendartext .h6 { font-family: "Raleway", sans-serif; line-height: 100%; font-weight: 400; color: inherit; text-transform: uppercase; letter-spacing: 0.5px; margin: 0; padding: 0rem 0.5rem 0rem; } .calendartext h1 { font-size: 4rem; } .calendartext h2 { font-size: 0.85rem; } .calendartext h3 { font-size: 1.5rem; } .calendartext h4 { font-size: 1.325rem; } .calendartext h5 { font-size: 1.7rem; } .calendartext h6 { font-size: 1.5rem; } .calendartext .detailListItems h2 { font-size: 0.85rem; letter-spacing: 0.5px; } .calendartext blockquote, .calendartext blockquote p, .calendartext bq, .calendartext bq p { font: 1.25rem/115% "Raleway", sans-serif; letter-spacing: 0.5px; color: #231f20; padding: 1rem 0.25rem 0rem; text-transform: uppercase; } .calendartext a.paging-prev, .calendartext a.paging-next { font: 0.75rem/100% "Raleway", sans-serif; letter-spacing: 0.5px; color: #231f20; text-transform: uppercase; padding: 0.375rem 0.5rem 0.25rem; background-color: #f79720; border-radius: 3px; transition: all 0.25s linear 0s; } .calendartext a:hover.paging-prev, .calendartext a:hover.paging-next { filter: brightness(85%); text-decoration: none; } .calendartext a.paging-prev { text-align: left; float: left; } .calendartext a.paging-next { text-align: right; float: right; } .calendartext a.calendarToggle, .calendartext a.calendarToggleActive { font: 0.75rem/100% "Raleway", sans-serif; letter-spacing: 0.5px; color: #231f20; text-transform: uppercase; padding: 0.375rem 0.5rem 0.25rem; border-radius: 3px; transition: all 0.25s linear 0s; } .calendartext a.calendarToggle { background-color: #656262; } .calendartext a.calendarToggleActive { background-color: #e464a0; } .calendartext a:hover.calendarToggle, .calendartext a:hover.calendarToggleActive { filter: brightness(85%); text-decoration: none; } .calendartext span.eventTitle { font: 0.8rem/0.8rem "Raleway", sans-serif; font-weight: 900; color: #231f20; text-transform: uppercase; } .calendartext span.keyTitle { font: 0.7rem/1.25rem "Raleway", sans-serif; font-weight: 900; color: #231f20; text-transform: uppercase; vertical-align: top; } .calendartext span.eventDate { font: 0.65rem/0.5rem "Raleway", sans-serif; font-weight: 600; color: #231f20; } .calendartext span.eventSpace { font: 0.65rem/0.5rem "Raleway", sans-serif; font-weight: 600; color: #231f20; } .calendartext .eventPoster img { width: 100%; height: auto; padding: 0.25rem 0.25rem 0rem 0.25rem; } .calendartext .splashWrapBlack.greenBtn, .calendartext .splashWrapBlack.orangeBtn, .calendartext .splashWrapBlack.blueBtn, .calendartext .splashWrapBlack.pinkBtn { display: block; } .calendartext .nestedEvent h3 { font-size: 1rem; } .calendartext .nestedEvent h4 { font-size: 0.75rem; } .calendartext .eventsCalHeader h2 { font-size: 1.5rem; padding: 0rem 1.25rem; } .calendartext { /* md */ } @media (min-width: 768px) { .calendartext h2 { font-size: 2rem; } .calendartext h3 { font-size: 1.75rem; } .calendartext h4 { font-size: 1.625rem; } .calendartext .nestedEvent h3 { font-size: 1.25rem; } .calendartext .nestedEvent h4 { font-size: 1rem; } .calendartext .eventDescription p { font: 1.25rem/125% "Raleway", sans-serif; font-weight: 600; letter-spacing: 0; } .calendartext .eventDisclaimer p { font: 0.75rem/125% "Raleway", sans-serif; font-weight: 600; } .calendartext .detailListItems h2 { font-size: 1.25rem; line-height: 110%; letter-spacing: 0.5px; } .calendartext .splashWrapBlack.greenBtn, .calendartext .splashWrapBlack.orangeBtn, .calendartext .splashWrapBlack.blueBtn, .calendartext .splashWrapBlack.pinkBtn { display: inline-block; margin-left: 0.25rem; } } .calendartext { margin: 10px 20px; padding-bottom: 20px; } .calendar-toppingtons p { margin: 1em auto 0.25em !important; } .dtstart { font-size: 0.8em; line-height: 120%; } span.value-title { font-size: 0.8em; font-family: "Lato", sans-serif; } span.day { padding-left: 3px; } h4.summary { color: #d49f0f; } /* @group Calendar Navigation */ .calControls { display: inline-flex; text-align: center; flex-direction: row; align-content: center; align-items: center; } ul.calendar-nav { list-style-type: none; margin: 0 auto; padding: 0; width: 100%; } ul.calendar-nav li { display: inline-block; } ul.calendar-nav h2 { margin-top: 1.1em; } ul.calendar-nav h2 a { background: none; padding-left: 0; } ul.calendar-nav li h2 { margin-top: 0; text-align: center; } ul.calendar-nav li:nth-child(3) { margin-right: 0; text-align: right; } ul.calendar-nav li a#next_month { padding-right: 5%; /* 20 / 140 */ padding-left: 0; } /* xs */ /* sm */ /* @end Calendar Navigation */ /* @group Listing View */ ul.calendar { border-top: 1px solid #dee0e0; margin: 0; padding: 0; width: 100%; list-style-type: none; } ul.calendar ul { margin: 0; padding: 0; list-style-type: none; } ul.calendar > li { border-bottom: 1px solid #dee0e0; padding-bottom: 0.8em; } ul.calendar li h3 { background: #f0f0f0; margin-top: 0; margin-bottom: 0; padding: 0.3em 0.8em; } ul.calendar li .vevent { padding: 0.8em; } ul.calendar .vevent:nth-of-type(2n) { border-top: 1px dotted #dee0e0; } ul.calendar .vevent h4 { margin: 0; } ul.calendar .vevent h4 a { font-weight: normal; } /* @end Listing View */ /* @group Calendar Grid */ table.calendar { font-family: "Raleway", sans-serif; font-weight: 400; width: 100%; } table.calendar th { display: table-cell; width: 14.285714286%; font-weight: bold; } table.calendar th abbr { font-weight: bold; letter-spacing: 1px; text-align: center; text-transform: uppercase; } table.calendar tr { display: flex; padding: 1px; } table.calendar td { border: 2px solid #f2f2f2; text-align: left; vertical-align: top; width: 14.285714286%; background: #e9e8e8; min-height: 90px; } td.today { background: #FFF579 !important; } table.calendar td.notinmonth { border: 2px solid #e9e8e8; background: #f2f2f2; margin: 0 auto; width: 14%; height: 88px; } table.calendar .day { font-family: "Raleway", sans-serif; font-weight: 600; color: #231f20; display: block; } table.calendar .has-event a, table.calendar .has-event span.day { font-family: "Raleway", sans-serif; font-weight: 900; color: #231f20; } span.summary.entertainment, span.summary.main-dining, span.summary.recurring-events, span.summary.happy-hour, span.summary.local-events, span.summary.special-events { display: block; } span.summary.entertainment, span.keysummary.entertainment { background-color: #a485b9; } span.summary.main-dining, span.keysummary.main-dining { background-color: #c0af30; } span.summary.recurring-events, span.keysummary.recurring-events { background-color: #e464a0; } span.summary.happy-hour, span.keysummary.happy-hour { background-color: #f79720; } span.summary.local-events, span.keysummary.local-events { background-color: #ffda72; } span.summary.special-events, span.keysummary.special-events { background-color: #f16253; } span.summary.entertainment, span.keysummary.entertainment, span.summary.main-dining, span.keysummary.main-dining, span.summary.recurring-events, span.keysummary.recurring-events, span.summary.happy-hour, span.keysummary.happy-hour, span.summary.local-events, span.keysummary.local-events, span.summary.special-events, span.keysummary.special-events { width: 94%; border-radius: 0; margin: 0 3% 0; } .vevent.event span.summary.entertainment, .vevent.event span.summary.main-dining, .vevent.event span.summary.recurring-events, .vevent.event span.summary.happy-hour, .vevent.event span.summary.local-events, .vevent.event span.summary.special-events { height: 22px; width: 22px; border-radius: 50%; } .keyevent span.keysummary.entertainment, .keyevent span.keysummary.main-dining, .keyevent span.keysummary.recurring-events, .keyevent span.keysummary.happy-hour, .keyevent span.keysummary.local-events, .keyevent span.keysummary.special-events { display: inline-block; height: 16px; width: 16px; border-radius: 50%; margin-right: 0.5rem; } table.calendar .has-event a, table.calendar .has-event span.time { font-family: "Lato", sans-serif; color: #2c2828; display: block; } table.calendar .vevent { display: block; } table.calendar a.vevent abbr { font-weight: bold; margin-right: 0.5em; } /* p.eventTitle { font: .7rem/.7rem $bodyFont; @include font-weight(black); color: $black; text-transform: uppercase; } p.eventDate { font: .5rem/.5rem $bodyFont; @include font-weight(semi-bold); color: $black; } p.eventSpace { font: .5rem/.5rem $bodyFont; @include font-weight(semi-bold); color: $black; } */ table.calendar .has-event { color: #2e2e2e; } table.calendar .has-event a, table.calendar .has-event span { color: #2e2e2e; } table.calendar .has-event a:hover { color: #e8e8e8; } table.calendar tr td .vevent span.summary { margin-top: 3px; } /* .vevent .event span.summary { height: 10px; width: 10px; border-radius: 50%; } */ /* xxs */ /* xs */ /* sm */ /* md */ @media (min-width: 768px) { table th { padding: 10px 8px 10px 8px; } table.calendar thead { /* Reveal table */ display: table-header-group; } table.calendar tbody { /* Reveal table */ display: table-footer-group; } table.calendar:after { content: ""; width: 100%; } table.calendar td { min-height: 120px; } table.calendar td.notinmonth { height: 118px; } table.calendar .has-event a, table.calendar .has-event span { color: #2e2e2e; } /* .vevent.event span.summary.entertainment, .vevent.event span.summary.main-dining, .vevent.event span.summary.recurring-events, .vevent.event span.summary.happy-hour, .vevent.event span.summary.local-events, .vevent.event span.summary.special-events { height: auto; width: 97%; border-radius: 0; margin: 0 1.5% 0; } */ span.summary.entertainment, span.keysummary.entertainment, span.summary.main-dining, span.keysummary.main-dining, span.summary.recurring-events, span.keysummary.recurring-events, span.summary.happy-hour, span.keysummary.happy-hour, span.summary.local-events, span.keysummary.local-events, span.summary.special-events, span.keysummary.special-events { width: 97%; border-radius: 0; margin: 0 1.5% 0; } } /* xl */ @media (min-width: 1200px) { span.summary.entertainment, span.keysummary.entertainment, span.summary.main-dining, span.keysummary.main-dining, span.summary.recurring-events, span.keysummary.recurring-events, span.summary.happy-hour, span.keysummary.happy-hour, span.summary.local-events, span.keysummary.local-events, span.summary.special-events, span.keysummary.special-events { width: 97%; border-radius: 0; margin: 0 1.5% 0; } } /* @end Calendar Grid */ /* @group Copa Events */ #eventCopa { position: relative; width: 100%; min-height: 500px; overflow: hidden; z-index: 1; } .copaBkgd { display: inline; } img.copaTextBk { object-fit: cover; height: auto; height: 600px; margin-right: 0; z-index: -1; position: absolute; padding: 0.25rem; } .copaBox { position: relative; width: 100%; margin: 0; z-index: 1; overflow-y: auto; } .copaTransBg { position: absolute; width: 100%; background-color: #ffffff; opacity: 1; height: fit-content; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 6px; } .copaBoxText { padding: 1.25rem 1.25rem 2rem 1.25rem; } .eventHero { display: contents; list-style: none; list-style-type: none; padding: 0.25rem; width: 100%; text-align: center; overflow: hidden; margin: 0; } .eventHero img { width: 100%; height: auto; } .eventBlocks { display: block; background-color: none; list-style: none; list-style-type: none; padding: 0; width: 100%; text-align: center; overflow: hidden; margin: 0; } .eventBlocks li { display: inline-block; padding: 0.25%; margin: 0; } .eventBlocks li:nth-child(1) { width: 66%; float: left; } .eventBlocks li:nth-child(2) { width: 33%; float: right; } .eventBlocks li:nth-child(3) { width: 33%; float: right; } .eventBlocks li:nth-child(4) { width: 50%; float: left; } .eventBlocks li:nth-child(5) { width: 50%; float: right; } .eventBlocks li:nth-child(6) { width: 33%; float: left; } .eventBlocks li:nth-child(7) { width: 66%; float: right; } .eventBlocks li:nth-child(8) { width: 33%; float: left; } .eventBlocks li:nth-child(9) { width: 50%; float: left; } .eventBlocks li:nth-child(10) { width: 50%; float: right; } .eventBlocks img { width: 100%; height: auto; padding: 0.25rem; } .eventBlocks .clearCell { width: 100%; height: 1px; clear: both; margin: 0; padding: 0; } .noMargin { padding-right: calc(var(--bs-gutter-x) * -0.5); padding-left: calc(var(--bs-gutter-x) * -0.5); } @media (max-width: 575px) { .copaBox { height: 600px; } } @media (min-width: 576px) { .copaBox { height: 600px; } } @media (min-width: 768px) { .copaBox { height: 360px; } } @media (min-width: 992px) { h2 { font-size: 1.75rem; } .copaBox { height: 480px; } img.copaTextBk { object-fit: cover; height: auto; height: 480px; margin-right: 50%; width: 50%; } .copaTransBg { position: absolute; width: 100%; background-color: #ffffff; opacity: 1; height: fit-content; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 6px; } .eventHero img { width: 50%; height: auto; padding: 0.25rem; } .eventBlocks li:nth-child(1) { width: 50%; float: left; } .eventBlocks li:nth-child(2) { width: 25%; float: left; } .eventBlocks li:nth-child(3) { width: 25%; float: left; } .eventBlocks li:nth-child(4) { width: 25%; float: left; } .eventBlocks li:nth-child(5) { width: 25%; float: left; } .eventBlocks li:nth-child(6) { width: 50%; float: right; } .eventBlocks li:nth-child(7) { width: 25%; float: right; } .eventBlocks li:nth-child(8) { width: 25%; float: right; } .eventBlocks li:nth-child(9) { width: 25%; float: right; } .eventBlocks li:nth-child(10) { width: 25%; float: right; } .eventBlocks img { width: 100%; height: auto; } } @media (min-width: 1200px) { .copaBox { height: 580px; } img.copaTextBk { height: 580px; } } @media (min-width: 1400px) { .copaBox { height: 660px; } img.copaTextBk { height: 660px; } } /* @end Copa Events */ #eventsCalendar p { font: 1rem/125% "Raleway", sans-serif; font-weight: 600; color: #231f20; padding: 0.25rem 0.5rem; z-index: 2; letter-spacing: 0.5px; } #eventsCalendar p.eventDetails { font: 1rem/80% "Raleway", sans-serif; font-weight: 600; color: #231f20; padding: 0.5rem 0.75rem; z-index: 2; letter-spacing: 0.5px; } #eventsCalendar .eventDescription p { font: 1rem/125% "Raleway", sans-serif; font-weight: 600; letter-spacing: 0; } #eventsCalendar .eventDisclaimer p { font: 0.65rem/125% "Raleway", sans-serif; font-weight: 600; letter-spacing: 0; } #eventsCalendar em { font-family: "Raleway", sans-serif; font-weight: 600; font-style: italic; } #eventsCalendar strong { font-family: "Raleway", sans-serif; font-weight: 800; color: inherit; } #eventsCalendar a, #eventsCalendar a:visited, #eventsCalendar a:link { color: #ffbc00; font-family: inherit; text-decoration: none; cursor: pointer; transition: all 0.25s linear 0s; } #eventsCalendar a:hover, #eventsCalendar a:focus { filter: brightness(85%); text-decoration: none; } #eventsCalendar h1, #eventsCalendar h2, #eventsCalendar h3, #eventsCalendar h4, #eventsCalendar h5, #eventsCalendar h6, #eventsCalendar .h1, #eventsCalendar .h2, #eventsCalendar .h3, #eventsCalendar .h4, #eventsCalendar .h5, #eventsCalendar .h6 { font-family: "Raleway", sans-serif; line-height: 100%; font-weight: 400; color: inherit; text-transform: uppercase; letter-spacing: 0.5px; margin: 0; padding: 0rem 0.5rem 0rem; } #eventsCalendar h1 { font-size: 4rem; } #eventsCalendar h2 { font-size: 0.85rem; } #eventsCalendar h3 { font-size: 1.5rem; } #eventsCalendar h4 { font-size: 1.325rem; } #eventsCalendar h5 { font-size: 1.7rem; } #eventsCalendar h6 { font-size: 1.5rem; } #eventsCalendar .detailListItems h2 { font-size: 0.85rem; letter-spacing: 0.5px; } #eventsCalendar blockquote, #eventsCalendar blockquote p, #eventsCalendar bq, #eventsCalendar bq p { font: 1.25rem/115% "Raleway", sans-serif; letter-spacing: 0.5px; color: #231f20; padding: 1rem 0.25rem 0rem; text-transform: uppercase; } #eventsCalendar a.paging-prev, #eventsCalendar a.paging-next { font: 0.75rem/100% "Raleway", sans-serif; letter-spacing: 0.5px; color: #231f20; text-transform: uppercase; padding: 0.375rem 0.5rem 0.25rem; background-color: #f79720; border-radius: 3px; transition: all 0.25s linear 0s; } #eventsCalendar a:hover.paging-prev, #eventsCalendar a:hover.paging-next { filter: brightness(85%); text-decoration: none; } #eventsCalendar a.paging-prev { text-align: left; float: left; } #eventsCalendar a.paging-next { text-align: right; float: right; } #eventsCalendar a.calendarToggle, #eventsCalendar a.calendarToggleActive { font: 0.75rem/100% "Raleway", sans-serif; letter-spacing: 0.5px; color: #231f20; text-transform: uppercase; padding: 0.375rem 0.5rem 0.25rem; border-radius: 3px; transition: all 0.25s linear 0s; } #eventsCalendar a.calendarToggle { background-color: #656262; } #eventsCalendar a.calendarToggleActive { background-color: #e464a0; } #eventsCalendar a:hover.calendarToggle, #eventsCalendar a:hover.calendarToggleActive { filter: brightness(85%); text-decoration: none; } #eventsCalendar span.eventTitle { font: 0.8rem/0.8rem "Raleway", sans-serif; font-weight: 900; color: #231f20; text-transform: uppercase; } #eventsCalendar span.keyTitle { font: 0.7rem/1.25rem "Raleway", sans-serif; font-weight: 900; color: #231f20; text-transform: uppercase; vertical-align: top; } #eventsCalendar span.eventDate { font: 0.65rem/0.5rem "Raleway", sans-serif; font-weight: 600; color: #231f20; } #eventsCalendar span.eventSpace { font: 0.65rem/0.5rem "Raleway", sans-serif; font-weight: 600; color: #231f20; } #eventsCalendar .eventPoster img { width: 100%; height: auto; padding: 0.25rem 0.25rem 0rem 0.25rem; } #eventsCalendar .splashWrapBlack.greenBtn, #eventsCalendar .splashWrapBlack.orangeBtn, #eventsCalendar .splashWrapBlack.blueBtn, #eventsCalendar .splashWrapBlack.pinkBtn { display: block; } #eventsCalendar .nestedEvent h3 { font-size: 1rem; } #eventsCalendar .nestedEvent h4 { font-size: 0.75rem; } #eventsCalendar .eventsCalHeader h2 { font-size: 1.5rem; padding: 0rem 1.25rem; } #eventsCalendar { /* md */ } @media (min-width: 768px) { #eventsCalendar h2 { font-size: 2rem; } #eventsCalendar h3 { font-size: 1.75rem; } #eventsCalendar h4 { font-size: 1.625rem; } #eventsCalendar .nestedEvent h3 { font-size: 1.25rem; } #eventsCalendar .nestedEvent h4 { font-size: 1rem; } #eventsCalendar .eventDescription p { font: 1.25rem/125% "Raleway", sans-serif; font-weight: 600; letter-spacing: 0; } #eventsCalendar .eventDisclaimer p { font: 0.75rem/125% "Raleway", sans-serif; font-weight: 600; } #eventsCalendar .detailListItems h2 { font-size: 1.25rem; line-height: 110%; letter-spacing: 0.5px; } #eventsCalendar .splashWrapBlack.greenBtn, #eventsCalendar .splashWrapBlack.orangeBtn, #eventsCalendar .splashWrapBlack.blueBtn, #eventsCalendar .splashWrapBlack.pinkBtn { display: inline-block; margin-left: 0.25rem; } } /* @end */ /* @group Events Modals */ /* @group Space Gallery Styles */ #eventModals * { text-align: left; } #eventModals p { font: 1.25rem/125% "Raleway", sans-serif; font-weight: 600; color: #231f20; padding: 0.25rem 0.5rem; z-index: 2; letter-spacing: 0.5px; } #eventModals a { text-decoration: none !important; } #eventModals a:hover { text-decoration: none !important; } #eventModals h1, #eventModals h2, #eventModals h3, #eventModals h4, #eventModals h5, #eventModals h6, #eventModals .h1, #eventModals .h2, #eventModals .h3, #eventModals .h4, #eventModals .h5, #eventModals .h6 { font-family: "Raleway", sans-serif; font-weight: 400; color: #231f20; padding: 0.25rem 0.5rem; letter-spacing: 0.5px; padding: 0px 0.5rem 0rem; text-transform: uppercase; } #eventModals h2, #eventModals .h2 { font-size: 0.85rem; line-height: 110%; } #eventModals h3, #eventModals .h3 { font-size: 1rem; line-height: 110%; } #eventModals h4, #eventModals .h4 { font-size: 0.7rem; line-height: 110%; } #eventModals img { padding: 0.25rem 0.375rem 0.5rem 0.375rem; margin-bottom: 0; width: 100%; } #eventModals .eventsCalHeader h2 { font-size: 1.5rem; padding: 0rem 1rem; } #eventModals .eventDetails { padding: 0.75rem 0.25rem 0.5rem; margin-top: -0.5rem; } #eventModals { /* xs */ } #eventModals { /* sm */ } #eventModals { /* md */ } #eventModals { /* lg */ } #eventModals { /* xl */ } @media (min-width: 1200px) { #eventModals p { font: 1.5rem/125% "Raleway", sans-serif; font-weight: 600; } #eventModals h2, #eventModals .h2 { font-size: 1rem; line-height: 110%; } #eventModals h3, #eventModals .h3 { font-size: 1.25rem; line-height: 110%; } #eventModals h4, #eventModals .h4 { font-size: 0.8rem; line-height: 110%; } #eventModals .eventDetails { padding: 0.75rem 0.25rem 0.5rem; margin-top: -0.5rem; } } .splashWrapBlack.greenBtn, .splashWrapBlack.orangeBtn, .splashWrapBlack.blueBtn, .splashWrapBlack.pinkBtn { display: inline-block; margin-left: 0.25rem; } .eventTeaser { position: relative; background-color: transparent; padding: 1rem; text-align: left; min-height: 30rem; background: transparent; border-radius: 0.5rem; transition: 0.5s; margin: 0.5rem 0.5% 0.5rem; width: 49%; } .eventTeaser:hover { background: rgb(255, 255, 255); } .eventIntro { position: absolute; display: contents; border: none; } .eventIntro:before { content: " "; display: block; } /* lg */ @media (min-width: 992px) { .eventIntro { position: absolute; text-decoration: none; text-align: center; } .eventIntro .overlay { position: absolute; z-index: 1; background: rgba(0, 0, 0, 0.75); background-size: 100% auto; opacity: 0; transition: opacity 0.5s linear; } .eventIntro:hover .overlay { opacity: 0.8; } } /* xl */ @media (min-width: 1200px) { .eventTeaser { margin: 1rem 0.5% 1rem; width: 32%; } } /* @end */ /* @end */ /* @group Employee Spotlights */ /* @end */ /* @group Handbook */ /* @end */ /* @group Slick Slider Jive - for the Work of Change Videos */ /* @end */ /* @group Form Styles */ /* @group Form Styles */ #formMessages .formSuccess { color: #F6EC3C; } #formMessages img { width: 100%; height: auto; } #formMessages { /* xs */ } #formMessages { /* sm */ } #formMessages { /* md */ } #formMessages { /* lg */ } #formMessages { /* xl */ } #collapsibleForm { display: none; } .showForm { cursor: pointer; } .hideForm { display: none; } .hideForm a, .hideForm a:link, .hideForm a:visited, .hideForm a:not([href]):not([class]) { font: 0.85rem/100% "Raleway", sans-serif; font-weight: 400; color: #ea4436; } .hideForm a:hover, .hideForm a:focus, .hideForm a:not([href]):not([class]):hover { color: #F6EC3C; } .open .hideForm { display: inline; } /* @group General Form Styles */ #contactForm { text-transform: none; background-color: #e9e8e8; padding: 50px auto 50px; } #contactForm p { font: 1.5rem/160% "Raleway", sans-serif; font-weight: 400; color: #231f20; letter-spacing: 0.5px; } .required p, #contactForm .formtitles { font: 0.65rem/110% "Raleway", sans-serif; font-weight: 400; color: #231f20; text-transform: uppercase; letter-spacing: 1px; margin-top: 2rem; } .form-group { padding-bottom: 1.5rem; } .form-group input, .form-group textarea { outline: none; border: none; outline: 2px solid var(--input-border); display: flex; flex: 2 0 100%; padding: 0.85rem 0.85rem; font: 1.25rem/100% "Arquitecta", sans-serif; font-weight: 400; background-color: #f2f2f2; border: none; border-radius: 0.25rem; color: #383536; text-transform: none; vertical-align: text-top !important; text-align: left !important; letter-spacing: 0.5px; } input#fieldEmail { outline: none; border: none; outline: 2px solid var(--input-border); display: flex; flex: 2 0 100%; padding: 0.85rem 0.85rem; font: 1.25rem/100% "Arquitecta", sans-serif; font-weight: 400; background-color: #f2f2f2; border: none; border-radius: 0.25rem; color: #383536; text-transform: none; vertical-align: text-top !important; text-align: left !important; letter-spacing: 0.5px; } .form-group .formtitles { font: 0.85rem/110% "Raleway", sans-serif; font-weight: 400; color: #231f20; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; } .form-group .form-required { font: 0.85rem/110% "Raleway", sans-serif; font-weight: 400; color: #231f20; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px; } .contactform::placeholder { font: 0.85rem/110% "Raleway", sans-serif; font-weight: 400; font-size: 0.875rem; color: #bdbbbc; text-transform: none; padding-left: 10px; letter-spacing: 0.5px; } .form-control:focus { color: #212529; background-color: #fff; border-color: #F6EC3C; outline: 0; box-shadow: 0 0 0 0.25rem rgba(206, 221, 1, 0.25); } select#form1_recipient { color: #383536; font-size: 80%; width: 100%; padding: 6px; text-transform: none; background-color: #e9e8e8; margin-top: 3px; border-style: none; border-width: 0; } select { /* styling */ background-color: white; border: thin solid blue; border-radius: 3px; display: inline-block; font: inherit; line-height: 1.4em; padding: 0.25em 3.5em 0.5em 1em; /* reset */ margin: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-appearance: none; -moz-appearance: none; } select.round { background-image: linear-gradient(45deg, transparent 50%, gray 50%), linear-gradient(135deg, gray 50%, transparent 50%), radial-gradient(#ddd 70%, transparent 72%); background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px), calc(100% - 0.5em) 0.4em; background-size: 5px 5px, 5px 5px, 1.45em 1.45em; background-repeat: no-repeat; } select.round:focus { background-image: linear-gradient(45deg, white 50%, transparent 50%), linear-gradient(135deg, transparent 50%, white 50%), radial-gradient(gray 70%, transparent 72%); background-position: calc(100% - 15px) 1em, calc(100% - 20px) 1em, calc(100% - 0.5em) 0.4em; background-size: 5px 5px, 5px 5px, 1.45em 1.45em; background-repeat: no-repeat; border-color: green; outline: 0; } /* [type=button]:not(:disabled), [type=reset]:not(:disabled), [type=submit]:not(:disabled), button:not(:disabled) { font: 1rem/115% $aktiv; @include font-weight(black); letter-spacing: 0px; display: block; color: $black !important; background-color: $yellow; border: none; font-size: inherit; line-height: inherit; padding: .25rem .5rem .25rem .5rem; transition: all .5s linear; margin: .5rem 0 .5rem; cursor: pointer; width: fit-content; } [type=button]:not(:disabled):hover, [type=reset]:not(:disabled):hover, [type=submit]:not(:disabled):hover, button:not(:disabled):hover, [type=button]:not(:disabled):focus, [type=reset]:not(:disabled):focus, [type=submit]:not(:disabled):focus, button:not(:disabled):focus { color: $black !important; background: $yellow; filter: brightness(85%); text-decoration: none; } */ /* @end General Form Styles */ /* @group Plan Your Event Form Styles */ #planForm { text-transform: none; background-color: #bdbbbc; padding: 2rem 0; } #planForm h2 { font: 1.5rem/2.75rem "Raleway", sans-serif; font-weight: 800; text-transform: uppercase; } #planForm .form-intro { padding: 0.5rem 0.25rem; margin-bottom: 1rem; } #planForm .required p { font: 0.65rem/110% "Arquitecta", sans-serif; font-weight: 400; color: #231f20; text-transform: uppercase; letter-spacing: 1px; margin-top: 4rem; } .plan-form-group { padding-bottom: 15px; } .plan-form-group input, .plan-form-group textarea { font: 1.25rem/150% "Arquitecta", sans-serif; font-weight: 400; background-color: #f2f2f2; border: none; border-radius: 0.25rem; color: #383536; margin-top: 5px; text-transform: none; vertical-align: text-top !important; text-align: left !important; letter-spacing: 0.5px; } input#message { height: 12.5rem; } .plan-form-group #message input[type=textarea]::placeholder { text-align: left !important; } .plan-form-group textarea { height: 14.25rem; } .plan-form-group .formtitles { font: 1rem/110% "Arquitecta", sans-serif; font-weight: 400; color: #231f20; letter-spacing: 1px; margin-bottom: 0.75rem; padding: 0rem 0.25rem; } .form-check { display: inline-flex; min-height: 1rem; padding-left: 1rem; margin-bottom: 0.25rem; margin-top: 0.5rem; } .form-check-input[type=checkbox] { border-radius: 0.25rem; } .form-check .form-check-input { float: left; margin-left: -1rem; margin-right: 0.5rem; } .plan-form-group .form-check-label { font: 0.85rem/110% "Arquitecta", sans-serif; font-weight: 400; color: #231f20; text-transform: uppercase; letter-spacing: 1px; margin-top: 0.5rem; } .rfp-form-control::placeholder { font: 0.7rem/110% "Arquitecta", sans-serif; font-weight: 400; font-size: 0.875rem; color: #656262; text-transform: none; letter-spacing: 0.5px; } .rfp-form-control:focus { color: #212529; background-color: #fff; border-color: #F6EC3C; outline: 0; box-shadow: 0 0 0 0.25rem rgba(206, 221, 1, 0.25); } .inningtons { margin-right: -12px; margin-left: -12px; } .plan-form-group.dater { padding: 0; margin-left: 0; margin-bottom: 1rem; } .plan-form-group.guester { margin-right: 0; } .plan-form-group.checker { margin-left: 0; } .form-check-input:checked { background-color: #f79720; border-color: #f79720; } /* md */ @media (min-width: 768px) { .inningtons { margin-right: 15px; margin-left: 15px; } #planForm h2 { font: 2rem/3rem "Raleway", sans-serif; font-weight: 800; } .plan-form-group .form-check-label { margin-top: 0.25rem; } .plan-form-group.dater { padding: 0px 5px; margin-left: -30px; margin-bottom: 0.9rem; } .plan-form-group.guester { margin-right: -1.5rem; } .plan-form-group.checker { margin-left: 2rem; } } /* @end Plan Your Event Form Styles */ .userID { display: none; } input.button, input.button:visited, input.button:link { font: 1.25rem/100% "Raleway", sans-serif; font-weight: 800; color: #ffbc00 !important; text-transform: uppercase; transition: all 0.5s linear; letter-spacing: 0.1em; float: right; margin: 0 auto; width: auto; text-decoration: none !important; background-color: #bdbbbc; border: 2px solid #ff006b; padding: 0.5rem 1rem; } input.button:hover, input.button:focus { color: #ffda72 !important; text-decoration: none !important; background-color: #bdbbbc; } .form-response p { text-align: left; color: #231f20; } .form-required, .error { color: #231f20; } .required { margin-top: 40px; } span.error { font: 0.85rem/110% "Raleway", sans-serif !important; font-weight: 600 !important; color: #f2f2f2 !important; text-transform: uppercase; letter-spacing: 0.8px; background-color: #b82025; padding: 7px; display: block; } /* IMPORTANT hide the honeypot from human users */ #uid { display: none; } #userID { display: none; } /* alternet honeypot id used in some forms */ .formContainer { width: 90%; max-width: 600px; background-color: #fff; padding: 24px; margin: 36px auto; } #formMessages { font: 1rem/110% "Raleway", sans-serif !important; font-weight: 600 !important; display: block; width: 100%; word-wrap: break-word; margin-bottom: 20px; } /* #reserveForm { padding:24px; } */ .formCopy { padding-bottom: 18px; } .formError { padding: 12px; background-color: #e8e8e8; color: #d4b388; } .formSuccess { padding: 12px; background-color: #e8e8e8; color: #44703c; } .formProcessing { height: 100px; width: 100%; background: transparent url("../img/loader.gif") 0 0 no-repeat; } .submitProcessing { display: none; } .form-group select { display: block; width: 100%; height: 34px; font-size: 14px; line-height: 1.4285; border: 1px solid #ccc; border-radius: 4px; color: #555; padding-left: 9px; } /* @end Forms */ /* @end */ /* @group Map Styles */ /* * Google Maps */ #googleMap { width: 100%; height: 400px; } /* lg */ @media (min-width: 992px) { #googleMap { height: 400px; } } /* @end */ /* @group Instagram & SnapWidget Embed Styles */ /* @end */ /* @group Footer */ /* @end */ footer p { font: 1rem/145% "Raleway", sans-serif; color: #f2f2f2; white-space: normal; -webkit-column-break-inside: avoid; word-break: keep-all; float: none; text-transform: none; letter-spacing: 0.5px; } footer em { font: italic 1rem/145% "Raleway", sans-serif; font-weight: 700; color: #f2f2f2; text-transform: lowercase; } footer a { color: #ff006b; transition-property: color 0.5s linear 0s; -moz-transition: color 0.5s linear 0s; -webkit-transition: color 0.5s linear 0s; -o-transition: color 0.5s linear 0s; } footer ul, footer li, footer li a { font: 1rem/145% "Raleway", sans-serif; font-weight: 500; color: #f2f2f2; white-space: normal; -webkit-column-break-inside: avoid; word-break: keep-all; float: none; text-transform: none; letter-spacing: 0.5px; } footer a:hover, footer a:focus, footer li a:hover, footer li a:focus { color: #ff6eab; text-decoration: none; background-color: none !important; } footer strong { color: #F6EC3C; } footer h1, footer h2, footer h3, footer h4, footer h5, footer h6, footer .h1, footer .h2, footer .h3, footer .h4, footer .h5, footer .h6 { font-family: "Raleway", sans-serif; font-weight: 800; color: #f79720; } footer h2, footer .h2 { font-size: 2rem; line-height: 140%; } footer h3, footer .h3 { font-size: 1.625rem; line-height: 100%; } footer .footer-hours p, footer .footer-address p { font: 1.25rem/2rem "Raleway", sans-serif; white-space: normal; -webkit-column-break-inside: avoid; word-break: keep-all; float: none; text-transform: uppercase; letter-spacing: 0; } footer .footer-hours .toggle:hover { cursor: pointer; } footer .footer-address, footer .footer-hours { text-align: center; margin: 1rem auto 0rem; } footer .cookiealert p, footer p.copyright { font: 0.85rem/1.75rem "Raleway", sans-serif; font-weight: 400; text-align: center; text-transform: none; } footer .text-bump { color: inherit; } footer .collapse:not(.show) { display: none; } footer .collapsing { height: 0; overflow: hidden; transition: height 0.5s; } footer .collapsing.collapse-horizontal { width: 0; height: auto; transition: auto; } footer .footer-subscribe > input:focus { outline: 2px solid var(--primary); } footer .footer-subscribe > input::placeholder { color: var(--text-color); } footer .footer-subscribe > button { cursor: pointer; background: var(--primary); border-radius: 99rem; color: var(--footer-background); font-size: 1.25rem; min-width: 8rem; min-height: 2.25rem; flex: 1 0 4rem; white-space: nowrap; font-weight: 600; padding: 1rem; border: var(--primary); outline-color: var(--primary); transition: all 0.2s ease-in-out; } footer .footer-subscribe > button:hover { background: var(--primary-dark); border: var(--primary-dark); } footer { /*? footer columns */ } footer .footer-columns { /* display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; width: 100%; gap: 1rem; */ padding: 1.5rem 0.5rem 1rem 0.5rem; margin: 0 auto; color: #f2f2f2; z-index: 3; } footer .footer-columns ul { list-style-type: none; padding: 0; margin-bottom: 1rem; } footer .footer-columns ul a { color: #f2f2f2; text-decoration: none; background-color: transparent; } footer .footer-columns ul a:hover { color: #ffda72; filter: opacity(85%); text-decoration: none; background-color: transparent; } footer .footer-columns ul li { margin-bottom: 0.25rem; } footer .footer-logo { display: flex; flex-direction: row; align-items: start; justify-content: start; gap: 1rem; margin: 0.75rem auto 4rem; } footer .footer-logo img { width: 4rem; height: 4rem; margin: 0 auto; } footer { /* xs */ } footer { /* sm */ } @media (min-width: 576px) { footer p { font: 1.125rem/145% "Raleway", sans-serif; letter-spacing: 0.5px; } footer ul, footer li, footer li a { font: 1.125rem/145% "Raleway", sans-serif; letter-spacing: 0.5px; } footer { /* .footer-hours p { font: 1.25rem/135% $footer; @include font-weight(normal); } .footer-hours strong { } .footer-hours em { } */ } footer h2, footer .h2 { font-size: 2.25rem; } footer h3, footer .h3 { font-size: 2rem; padding-bottom: 0; } footer .footer-address { text-align: left; justify-content: flex-start; } footer .footer-hours { text-align: right; justify-content: flex-end; } } footer { /* md */ } @media (min-width: 768px) { footer .footer-logo img { margin: 0; } footer .footer-top { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.5rem; padding: 1rem 0.5rem 2rem 0rem; } footer .footer-subscribe > input { flex: 2 0 300px; } } footer { /* lg */ } footer { /* xl */ } footer { background: #efe3D3; position: relative; padding: 2rem 0; } .footerLogo { display: inline-block; width: 75%; max-width: 360px; } .footerLogo:focus, .footerLogo:hover { background-color: transparent; text-decoration: none; } .footerLogoText { display: inline-block; color: #f2f2f2; font-family: "Raleway", sans-serif; font-size: 1.75rem; font-weight: 700; line-height: 1; letter-spacing: 0.12em; text-transform: uppercase; } .footerLogoText span { font-family: "Raleway", sans-serif; font-style: italic; letter-spacing: 0; text-transform: none; } .footerPartner { margin: 0 auto 1rem; color: #f2f2f2; font-family: "Raleway", sans-serif; font-size: 0.85rem; font-weight: 700; line-height: 1.35; letter-spacing: 0.1em; text-transform: uppercase; } .address-area { padding: 1.25rem 0; } .address-area p { font: 1.25rem/125% "Raleway", sans-serif; color: #f2f2f2; } .address-area a, .address-area a:link, .address-area a:visited { color: #ff006b; } .address-area a:focus, .address-area a:hover { color: #ff6eab; background-color: transparent; text-decoration: none; } .tfiLogo, .tfiLogo:visited, .tfiLogo:link { display: inline-block; height: 5rem; width: 5rem; padding: 0; background-color: #f2f2f2; transition: background-color 0.5s; -webkit-transition: background-color 0.5s; } .tfiLogo:focus, .tfiLogo:hover { background-color: #ff006b; } /* lg */ @media (max-width: 991px) { .tfiLogo { margin: 1rem 0 2rem 0; } } #emailButton { font-size: 1rem; } #planEventButton, #planEventButton:link, #planEventButton:visited { color: #f2f2f2; background-color: #ffda72; padding: 0.75rem 1.25rem; font: 1.25rem/120% "Raleway", sans-serif; font-weight: 800; transition: all 0.5s linear; letter-spacing: 0.1em; text-transform: uppercase; display: inline-block; margin: 1rem 0; text-align: center; background-color: #ffda72; border: 2px solid #ff006b; text-decoration: none !important; } #planEventButton:focus, #planEventButton:hover { color: #ff006b; } /* lg */ @media (min-width: 992px) { #planEventButton, #planEventButton:link, #planEventButton:visited { font: 1.75rem/100% "Raleway", sans-serif; font-weight: 800; } } .legalLinks { list-style: none; list-style-type: none; width: 100%; margin: 1rem 0; padding: 0; text-align: center; } .legalLinks li { display: inline-block; margin: 0.25rem 0; padding: 0 0.5rem; border-left: 1px solid #f2f2f2; color: #f2f2f2; font-size: 0.75rem; } .legalLinks li:first-child { border-left: none; } .legalLinks a, .legalLinks a:link, .legalLinks a:visited { color: #f2f2f2; font-size: 0.75rem; } .legalLinks a:focus, .legalLinks a:hover { color: #f2f2f2; text-decoration: underline; } /* sm */ @media (max-width: 575px) { .legalLinks li { border-left: none; } } /* @group Social Media Button List */ .socialmedia { display: inline-block; list-style: none; list-style-type: none; margin: 1rem 0; padding: 0; width: 100%; text-align: center; } .socialicons { display: inline-block; margin: 0 0.33rem 0 0.33rem; text-align: center; } .socialicons img { height: 100%; width: 100%; } .socialicons .socialicons a, .socialicons a:visited, .socialicons a:link { display: block; height: 2rem; width: 2rem; line-height: 0; padding: 0; background-color: #f2f2f2; transition: background-color 0.5s; -webkit-transition: background-color 0.5s; } .socialicons a:hover, .socialicons a:focus { background-color: #ff006b; } /* @end Social Media Button List */ .modal-links { text-align: center; margin-top: 2.25rem; } .modal-links ul { display: block; list-style-type: none; margin: 1rem 0 0.5rem; align-items: center; padding: 0; } .modal-links li { padding: 0.5rem 0rem 0.5rem 0rem; } .privacy-links { font: 0.8rem/150% "Raleway", sans-serif; font-weight: 900; color: #c0af30; padding: 0rem 1rem 0.5rem; text-align: center; z-index: 20; text-transform: uppercase; } .privacy-links ul { list-style-type: none; padding: 1rem 0rem 0.5rem 0.5rem; margin-bottom: 0rem; } .privacy-links ul a { text-decoration: none; transition: color 0.5s ease-in-out; letter-spacing: 1px; } .privacy-links ul a:hover { filter: brightness(70%); text-decoration: underline; } a.btnFooter, a.btnFooter:visited, a.btnFooter:link, .btnFooter, .btnFooter:visited, .btnFooter:link { font-family: "Raleway", sans-serif; font-weight: 400; letter-spacing: 0px; display: inline-block; color: #231f20 !important; background-color: #e99a3f; border: none; font-size: inherit; line-height: inherit; padding: 0.25rem 0.5rem 0.25rem 0.5rem; transition: all 0.5s linear; margin: 0.5rem 0 -1rem; } a.btnFooter:hover, a.btnFooter:focus, .btnFooter:hover, .btnFooter:focus { color: #231f20 !important; background: #e99a3f; filter: brightness(85%); text-decoration: none; } /* sm */ @media (min-width: 576px) { .footer-logo { width: 80%; margin: 0 10% 2rem; z-index: 2; position: relative; } .privacy-links { font: 1rem/125% "Raleway", sans-serif; font-weight: 900; padding: 0rem 1rem 0.5rem; text-align: center; text-transform: uppercase; } .privacy-links li { padding: 0rem 0.5rem 0.33rem; display: inline-flex; } .socialicons { margin: 0 0.67rem 0 0; } } /* md */ /* Credit bar */ .site-footer__credit { margin-top: 1rem; padding: 0.75rem 0; } .site-footer__container--credit { display: flex; justify-content: center; gap: 8px; font: 0.63rem/136% "Besley", serif; font-weight: 400; color: rgba(255, 255, 255, 0.85); } /* @group Fathead jive */ .fatheadlogo { text-align: center; margin: 20px auto 0px; float: none; cursor: pointer; z-index: 20; position: relative; } .fatheadlogo p, .fatheadlogo p a, .fatheadlogo p a:hover { font: 0.63rem/136% "Besley", serif; font-weight: 400; color: #f2f2f2; padding: 3px 0 0 0; width: 100%; color: #f2f2f2; margin-bottom: 0.125rem; text-transform: uppercase; letter-spacing: 1px; } .fatheadlogo a { color: #f2f2f2 !important; text-decoration: none; } .fatheadlogo a:hover { filter: opacity(70%); text-decoration: none; } a:not([href]):not([class]) { font-weight: 400; color: #f2f2f2; text-decoration: none; text-transform: uppercase; } a:not([href]):not([class]):hover { color: #F6EC3C; } .fatheadlogo img { width: 30px; height: 30px; margin: 0px 10px; padding: 4px; } /* @end */ /* @group To Top */ .cd-top, .js-cd-top { position: absolute; } .cd-top { display: inline-block; height: 40px; width: 40px; position: fixed; bottom: 100px; right: 10px; -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); /* image replacement properties */ overflow: hidden; text-indent: 100%; white-space: nowrap; background: #ba7b32 url(../img/layout/cd-top-arrow.svg) no-repeat center 50%; visibility: hidden; opacity: 0.5; -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s, background-color 0.3s 0s; transition: opacity 0.3s 0s, visibility 0s 0.3s, background-color 0.3s 0s; } .cd-top.cd-top--show, .cd-top.cd-top--fade-out, .cd-top:hover { -webkit-transition: opacity 0.3s 0s, visibility 0s 0s, background-color 0.3s 0s; transition: opacity 0.3s 0s, visibility 0s 0s, background-color 0.3s 0s; } .cd-top.cd-top--show { /* the button becomes visible */ visibility: visible; opacity: 1; z-index: 50; } .cd-top.cd-top--fade-out { /* if the user keeps scrolling down, the button becomes less visible */ opacity: 0.5; } .cd-top:hover { background-color: #ba7b32; opacity: 1; } /* @end */ /* @group Privacy Policy / Tracking Cookies */ .legalese p, .legalese a { font: 0.7rem/110% "Raleway", sans-serif; font-weight: 400; color: #656262; letter-spacing: 1px; text-transform: uppercase !important; } .legalese a:hover { color: #f2f2f2; text-decoration: none; } .privacy-policy p { font: 0.7rem/110% "Raleway", sans-serif; font-weight: 400; color: #231f20; margin-top: 10px; padding: 5px 0px; text-align: center; } .privacy-policy a { font-family: inherit; color: #e99a3f; transition-property: color 0.5s linear 0s; -moz-transition: color 0.5s linear 0s; -webkit-transition: color 0.5s linear 0s; -o-transition: color 0.5s linear 0s; text-decoration: none; } .privacy-policy a:hover, .privacy-policy a:visited { color: #e9e8e8; text-decoration: none; } .cookiealert { position: fixed; bottom: 0; left: 0; width: 100%; margin: 0 auto -0.25rem; z-index: 999; opacity: 0; border-radius: 0; transform: translateY(100%); transition: all 500ms ease-out; background: rgba(0, 0, 0, 0.7); } .cookiealert.show { opacity: 1; transform: translateY(0%); transition-delay: 1000ms; } .cookiealert .acceptcookies { margin: 0 auto; vertical-align: baseline; display: inline-block; } .btn-cookie { padding: 8px 16px; font-size: 100%; line-height: 100%; border-radius: 3px; color: #231f20 !important; background-color: #f79720; border: none; margin-top: 0px !important; } .btn-cookie:focus, .btn-cookie.focus, .btn-cookie:hover, .btn-cookie.hover { color: #231f20 !important; background-color: #f79720; filter: brightness(70%); border: none; padding: 8px 16px; } .otnotice-menu { display: contents; position: absolute !important; color: #231f20; list-style-type: none; } .otnotice-content .otnotice-sections .otnotice-section-content b, .otnotice-content .otnotice-sections .otnotice-section-content strong { font: 1rem/145% "Besley", serif; font-weight: 700; color: #ffbc00; text-decoration: none; text-transform: none; } .otnotice-content .otnotice-sections .otnotice-section-content em { font: italic 1rem/145% "Besley", serif; font-weight: 700; color: #ffbc00; text-decoration: none; } .otnotice-menu a, .otnotice-menu a:hover, .otnotice-menu a:focus, .otnotice-menu a:visited, .otnotice-section a, .otnotice-section a:hover, .otnotice-section a:focus, .otnotice-section a:visited { font: 1rem/145% "Besley", serif; font-weight: 700; color: #ffbc00; text-decoration: underline; text-transform: none; } .otnotice-content .otnotice-sections .otnotice-section-content p { margin: 0 0 1rem; font: 1rem/145% "Besley", serif; font-weight: body; line-height: unset; text-align: left !important; color: #231f20; } span#isPasted { padding: 2px 5px; background-color: #F6EC3C !important; } .otnotice-content .otnotice-sections .otnotice-section-content ol, .otnotice-content .otnotice-sections .otnotice-section-content ul { margin: 0; padding-inline: 2.5rem; text-align: left; } .otnotice-section-content li, .otnotice-content .otnotice-sections .otnotice-section-content blockquote, .otnotice-content .otnotice-sections .otnotice-section-content pre { margin: 0 0 0.5rem; display: list-item; text-align: left; color: #231f20; } .otnotice-sections > .otnotice-section > h2.otnotice-section-header { color: #e9e8e8; font-size: 30px !important; font-weight: bolder; line-height: 135%; margin-left: 0px !important; margin-bottom: 20px; text-align: left !important; } .privacy { display: inline-block; float: left; margin: 0 auto 40px; padding-left: 0px; } @media (max-width: 767px) { .privacy { float: none; } } /* @end */ /* @end */ /* @group Internal Wireframe Kit */ /* ========================================================================== fathead Internal Wireframe Kit Purpose: - Sketch site architecture before brand assets are ready. - Keep wireframes neutral, reusable, and separate from final design. - Give us a shared block vocabulary for fast page planning. ========================================================================== */ /* ========================================================================== Wireframe-only visual tokens These values belong to the CMS-independent wireframe kit. They must not reference project identity variables such as $bodyFont or $primary. ========================================================================== */ :root { --wf-paper: #f4f3ef; --wf-sheet: #ffffff; --wf-ink: #242424; --wf-muted: #767676; --wf-rule: #b8b8b8; --wf-soft: #ededed; --wf-tint: #f8f8f8; --wf-accent: #4b4b4b; --wf-radius: 6px; --wf-max: 1180px; } .wf-shell { margin: 0; background: var(--wf-paper); color: var(--wf-ink); font-family: "League Spartan", Arial, Helvetica, sans-serif; font-size: 1rem; line-height: 1.45; } .wf-shell *, .wf-shell *::before, .wf-shell *::after { box-sizing: border-box; } .wf-shell a { color: inherit; } .wf-type--scribble { font-family: "Redacted Script", cursive; } .wf-type--block { font-family: "Flow Block", Arial, Helvetica, sans-serif; } .wf-topbar { position: sticky; top: 0; z-index: 10; background: rgba(244, 243, 239, 0.96); border-bottom: 1px solid var(--wf-rule); backdrop-filter: blur(8px); } .wf-topbar-inner, .wf-page { width: min(var(--wf-max), 100% - 32px); margin: 0 auto; } .wf-topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 64px; } .wf-brand { font-size: 0.75rem; font-weight: 700; letter-spacing: 0; text-transform: uppercase; } .wf-nav { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; } .wf-nav a { display: inline-flex; align-items: center; min-height: 34px; padding: 6px 10px; border: 1px solid transparent; border-radius: 999px; color: var(--wf-muted); font-size: 0.8125rem; text-decoration: none; } .wf-nav a:hover, .wf-nav a[aria-current=page] { border-color: var(--wf-rule); background: var(--wf-sheet); color: var(--wf-ink); } .wf-site-nav { border: 2px dashed var(--wf-rule); background: var(--wf-sheet); } .wf-site-nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 76px; padding: 14px 18px; } .wf-site-nav__brand { min-width: 150px; font-size: 0.9375rem; font-weight: 700; text-decoration: none; text-transform: uppercase; } .wf-site-nav__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin: 0; padding: 0; list-style: none; } .wf-site-nav__links a { display: inline-flex; align-items: center; min-height: 34px; padding: 5px 0; color: var(--wf-ink); font-size: 0.8125rem; text-decoration: none; } .wf-site-nav__links a:hover, .wf-site-nav__links a[aria-current=page] { text-decoration: underline; text-underline-offset: 4px; } .wf-site-nav__cta { flex: 0 0 auto; min-height: 38px; padding-inline: 13px; border: 1px solid var(--wf-ink); background: var(--wf-sheet); color: var(--wf-ink); font-size: 0.75rem; font-weight: 700; text-decoration: none; text-transform: uppercase; } .wf-site-nav__mobile { display: none; border-top: 1px solid var(--wf-rule); } .wf-site-nav__mobile summary { cursor: pointer; padding: 13px 18px; font-size: 0.8125rem; font-weight: 700; list-style: none; text-transform: uppercase; } .wf-site-nav__mobile summary::-webkit-details-marker { display: none; } .wf-site-nav__mobile summary::after { float: right; content: "+"; font-size: 1.5rem; font-weight: 400; line-height: 1; } .wf-site-nav__mobile[open] summary::after { content: "-"; } .wf-site-nav__mobile ul { display: grid; gap: 2px; margin: 0; padding: 0 18px 14px; list-style: none; } .wf-site-nav__mobile a { display: block; padding: 8px 0; color: var(--wf-ink); text-decoration: none; } .wf-site-nav__mobile a[aria-current=page] { font-weight: 700; } .wf-page { padding: 34px 0 80px; } .wf-page-title { display: grid; gap: 8px; margin-bottom: 22px; } .wf-page-title p { max-width: 780px; margin: 0; color: var(--wf-muted); } .wf-page-title h1 { margin: 0; font-size: 3rem; line-height: 1; letter-spacing: 0; } .wf-canvas { overflow: hidden; background: var(--wf-sheet); border: 1px solid var(--wf-rule); border-radius: var(--wf-radius); box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08); } .wf-section { padding: clamp(32px, 6vw, 76px); border-bottom: 1px solid var(--wf-rule); } .wf-section:last-child { border-bottom: 0; } .wf-section--tight { padding-block: clamp(22px, 4vw, 44px); } .wf-section--band { background: var(--wf-tint); } .wf-section--bleed { padding-inline: 0; } .wf-section--bleed .wf-wire { border-right: 0; border-left: 0; border-radius: 0; } .wf-section-head { display: grid; gap: 8px; max-width: 760px; margin-bottom: 22px; } .wf-section-head h2, .wf-section-head p { margin: 0; } .wf-section-head h2 { font-size: 2rem; line-height: 1.05; } .wf-section-head p, .wf-copy p, .wf-note { color: var(--wf-muted); } .wf-label { display: inline-flex; width: fit-content; align-items: center; min-height: 24px; padding: 3px 8px; border: 1px solid var(--wf-rule); border-radius: 999px; background: var(--wf-sheet); color: var(--wf-muted); font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; } .wf-grid { display: grid; gap: 16px; } .wf-grid--2, .wf-grid--3, .wf-grid--4 { grid-template-columns: 1fr; } .wf-split { display: grid; gap: 24px; align-items: stretch; } .wf-wire, .wf-card, .wf-line, .wf-media, .wf-form-field, .wf-map, .wf-mini { border: 2px dashed var(--wf-rule); background: linear-gradient(135deg, rgba(0, 0, 0, 0.025) 25%, transparent 25%) 0 0/18px 18px, var(--wf-tint); } .wf-wire, .wf-card, .wf-media, .wf-map { border-radius: var(--wf-radius); } .wf-wire, .wf-card { position: relative; min-height: 130px; padding: 16px; } .wf-wire { display: grid; place-items: center; text-align: center; } .wf-wire strong, .wf-card strong { display: block; font-size: 0.875rem; text-transform: uppercase; } .wf-wire span, .wf-card span { display: block; margin-top: 4px; color: var(--wf-muted); font-size: 0.8125rem; } .wf-media { min-height: 260px; } .wf-media--short { min-height: 170px; } .wf-media--hero { min-height: clamp(360px, 54vw, 620px); } .wf-lines { display: grid; gap: 9px; width: 100%; } .wf-intro { width: min(66.666%, 780px); margin: 0 auto; text-align: center; } .wf-intro--large .wf-lines { gap: 13px; } .wf-intro--large h2 { font-size: 3.5rem; line-height: 1; } .wf-intro--large p { font-size: 1.5rem; line-height: 1.2; } .wf-intro--large .wf-line { height: 20px; } .wf-media--wide { aspect-ratio: 21/9; min-height: 0; } .wf-media--header-3-1, .wf-media--header-4-1, .wf-media--header-5-1, .wf-media--header-6-1 { min-height: 0; aspect-ratio: 3/1; } .wf-media--header-4-1 { aspect-ratio: 4/1; } .wf-media--header-5-1 { aspect-ratio: 5/1; } .wf-media--header-6-1 { aspect-ratio: 6/1; } .wf-line { height: 12px; border-width: 1px; border-radius: 999px; } .wf-line--short { width: 62%; } .wf-line--medium { width: 78%; } .wf-hero { display: grid; min-height: clamp(460px, 72vw, 720px); } .wf-hero-copy { display: grid; align-content: center; gap: 18px; padding: clamp(28px, 5vw, 62px); background: var(--wf-sheet); border-top: 1px solid var(--wf-rule); } .wf-hero-copy h2 { margin: 0; font-size: 4rem; line-height: 0.95; } .wf-hero-controls { display: flex; gap: 8px; margin-top: 6px; } .wf-dot, .wf-button { border: 1px solid var(--wf-rule); background: var(--wf-sheet); } .wf-dot { width: 12px; height: 12px; border-radius: 999px; } .wf-button { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 9px 15px; border-radius: var(--wf-radius); font-weight: 700; font-size: 0.8125rem; text-transform: uppercase; } .wf-card { display: grid; align-content: start; gap: 14px; } .wf-card .wf-media { min-height: 150px; margin: -16px -16px 0; border-width: 0 0 2px; border-radius: var(--wf-radius) var(--wf-radius) 0 0; } .wf-stack { display: grid; gap: 16px; } .wf-feature-row { display: grid; gap: 16px; } .wf-testimonial { display: grid; gap: 18px; max-width: 820px; margin: 0 auto; text-align: center; } .wf-quote-mark { width: 52px; height: 52px; margin: 0 auto; border: 2px solid var(--wf-rule); border-radius: 999px; background: var(--wf-sheet); } .wf-form-grid { display: grid; gap: 12px; } .wf-form-field { min-height: 48px; border-width: 1px; border-radius: var(--wf-radius); background-color: var(--wf-sheet); } .wf-form-field--message { min-height: 138px; } .wf-map { min-height: 360px; } .wf-mini-list { display: grid; gap: 8px; } .wf-mini { min-height: 42px; border-width: 1px; border-radius: var(--wf-radius); } .wf-system-note { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--wf-rule); border-radius: var(--wf-radius); background: var(--wf-soft); font-size: 0.8125rem; } .wf-system-note strong { text-transform: uppercase; } .wf-block-code { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 7px; border-radius: 4px; background: var(--wf-ink); color: var(--wf-sheet); font-size: 0.75rem; font-weight: 700; } @media (min-width: 720px) { .wf-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wf-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wf-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wf-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .wf-hero { grid-template-columns: minmax(0, 1.55fr) minmax(330px, 0.75fr); } .wf-hero-copy { border-top: 0; border-left: 1px solid var(--wf-rule); } } @media (min-width: 1020px) { .wf-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 719px) { .wf-topbar-inner { align-items: flex-start; flex-direction: column; padding: 12px 0; } .wf-nav { justify-content: flex-start; } .wf-site-nav__inner { min-height: 66px; } .wf-site-nav__links, .wf-site-nav__cta { display: none; } .wf-site-nav__mobile { display: block; } .wf-intro { width: 100%; } } /* @end */ /* now lets begin */ /* @group Baseline */ html { position: relative; min-height: 100%; } body p, body blockquote, body ul, body ol, body dl { font-family: "Raleway", sans-serif; font-weight: 500; font-style: normal; font-size: 20px; line-height: 1.5; color: #ffbc00; padding: 0; margin: 0; } body strong, body b { font-weight: 800; } body em, body i { font-style: italic; } body del { text-decoration: line-through; } body a { color: #ffbc00; text-decoration: none; cursor: pointer; transition-duration: 0.3s; } body a:hover, body a:focus { color: #ffda72; text-decoration: underline; text-decoration-color: currentColor; } body h1, body .h1, body h2, body .h2, body h3, body .h3, body h4, body .h4, body h5, body .h5, body h6, body .h6 { font-family: "Raleway", sans-serif; font-weight: 800; font-style: normal; line-height: 1.1; color: #ffbc00; padding: 0; margin: 0; } body h1, body .h1 { font-size: 64px; } body h2, body .h2 { font-size: 56px; } body h3, body .h3 { font-size: 48px; } body h4, body .h4 { font-size: 36px; } body h5, body .h5 { font-size: 28px; } body h6, body .h6 { font-size: 20px; } body { /* xs */ } @media (max-width: 575px) { body .mobile-break { display: block; width: 100%; height: 1px; clear: both; font-size: 1px; line-height: 1px; } } body { /* sm */ } body { /* md */ } body { /* lg */ } @media (min-width: 992px) { body p, body blockquote, body ul, body ol, body dl { font-size: 24px; } body h1, body .h1 { font-size: 80px; } body h2, body .h2 { font-size: 64px; } body h3, body .h3 { font-size: 56px; } body h4, body .h4 { font-size: 48px; } body h5, body .h5 { font-size: 32px; } body h6, body .h6 { font-size: 24px; } } body { /* xl */ } body { /* xxl */ } body { background-color: #e9e8e8; } /* @end Baseline */ /* @group Global Jive */ p.small { font: 1rem/125% "Raleway", sans-serif; font-weight: 400; } .all-caps { text-transform: uppercase; } .clearPad p { padding-left: 0 !important; padding-right: 0 !important; } .padNone { padding: 0; } .pad50 { padding: 50px 0px; } .pad100 { padding: 100px 0px; } .pad150 { padding: 150px 0px; } .mB50 { margin-bottom: 50px; } .pushbackBg { z-index: -1; } .pushForward { z-index: 99999; } .fullwidth { position: relative; width: 100%; } #fullwidthImages { background: transparent; margin: 0 auto; } .img-responsive { width: 100%; height: auto; } #mainContent { margin-top: -16px; font-size: inherit; line-height: inherit; } #mainContentScroll { font-size: inherit; line-height: inherit; position: relative; overflow-y: scroll; height: 100%; } .highlight { font: 225%/2.25rem "Raleway", sans-serif; text-transform: lowercase; font-style: italic; } /* lg */ @media (min-width: 992px) { #mainContent { margin-top: 0px; font-size: inherit; line-height: inherit; } #mainContentScroll { font-size: inherit; line-height: inherit; } } /* @end Global Jive */ /* @group Project Specific Overrides */ .slideshowLogo { display: none; } .homeCopy { width: 100%; padding: 2.25rem 1.75rem; } .homeCopy-inline { position: relative; border: 2px solid #ff006b; padding: 2rem; text-align: center; } .squirrels-icon { position: absolute; top: 0; left: 50%; width: 4.5rem; background-color: #e9e8e8; padding: 0 0.25rem; margin: -1.5rem 0 0 -2.25rem; } #elfSight { background-color: #f2c795; padding: 2rem 0.25rem 0.25rem 0.25rem; } #elfSight h2 { font: 2rem/2.5rem "Raleway", sans-serif; font-weight: 800; text-transform: uppercase; padding-bottom: 1rem; } /* lg */ @media (min-width: 992px) { .homeCopy { padding: 3rem 4rem; } .homeCopy-inline { padding: 3rem; } .squirrels-icon { width: 6.5rem; margin: -2rem 0 0 -3.25rem; } } .sectionHeadline { font: 1.5rem/2.5rem "Raleway", sans-serif; font-weight: 800; text-transform: uppercase; padding-bottom: 1rem !important; } /* lg */ @media (min-width: 992px) { .sectionHeadline { font: 2rem/3rem "Raleway", sans-serif; font-weight: 800; adding-bottom: 2rem !important; } } .internal-carousel .carousel-control-prev, .internal-carousel .carousel-control-next { position: relative; display: block; width: 100%; height: 100%; } .internal-carousel .carousel-control-next-icon, .internal-carousel .carousel-control-prev-icon { display: block; width: 100%; height: 20%; padding: 0; } .internal-carousel .carousel-control-next-icon { background: transparent url("../svg/icon-next-blue.svg") center center no-repeat; } .internal-carousel .carousel-control-prev-icon { background: transparent url("../svg/icon-prev-blue.svg") center center no-repeat; } /* lg */ @media (min-width: 992px) { .internal-carousel .carousel-control-prev-icon, .internal-carousel .carousel-control-next-icon { height: 10%; } } #contact { padding: 2rem 0; } .contact-info { text-align: left; } .contact-info h2 { font: 2rem/2.5rem "Raleway", sans-serif; font-weight: 800; text-transform: uppercase; padding-bottom: 1rem; } .contact-info p { padding-bottom: 1rem; } .contact-info a, .contact-info a:link, .contact-info a:visited { font: 1.75rem/2.25rem "Raleway", sans-serif; font-weight: 800; text-transform: uppercase; } .contact-info a:focus, .contact-info a:hover { text-decoration: none; } .contact-info a.button, .contact-info a.button:link, .contact-info a.button:visited { font: 1.25rem/1.75rem "Raleway", sans-serif; font-weight: 800; text-transform: uppercase; color: #ffbc00 !important; border: 2px solid #ffbc00; background-color: transparent; margin: 0 0 2rem 0; } /* xs */ @media (max-width: 575px) { .contact-info { text-align: center; } } /* lg */ @media (min-width: 992px) { #contact { padding: 3rem 0; } } /* @end Project Specific Overrides */ /* xs * / @media (max-width: 575px) {} /* sm * / @media (min-width: 576px) {} /* md * / @media (min-width: 768px) {} /* lg * / @media (min-width: 992px) {} /* xl * / @media (min-width: 1200px) {} */ /*# sourceMappingURL=fhd_hospitality_starter.css.map */