/*-----Global Styles-----*/ @primary: #000; @secondary: #337BB7; @tertiary: #82eafa; @white: #fff; @black: #000; @muted: #D8DBDD; @darkGrey: #333; :root{ --mm-cta-view-boat-bg: @secondary; --mm-cta-view-boat-bg-hover: darken(@secondary, 25%); --mm-cta-view-boat-text: @white; --mm-cta-check-availability-bg: var(--mm-cta-view-boat-bg); --mm-cta-check-availability-bg-hover: var(--mm-cta-view-boat-bg-hover); --mm-cta-check-availability-text: var(--mm-cta-view-boat-text); --mm-usage-badge-bg: rgb(242, 242, 242); --mm-usage-badge-shadow: transparent; --mm-usage-badge-text: lighten(@primary, 10%); --mm-title-link-hover: var(--mm-cta-view-boat-bg); --mm-monthly-payment-link: darken(@primary, 20%); --mm-cta-request-pricing-bg: darken(@primary, 20%); --mm-cta-request-pricing-shadow: @primary; --mm-cta-request-pricing-bg-hover:@secondary; --mm-cta-request-pricing-text: #fff; --mm-featured-bg: @primary; --mm-featured-text: @white; --mm-featured-card-gradient-to-100: @muted; --mm-featured-card-gradient-via-50: @muted; --mm-filter-accent: darken(@primary, 20%); --mm-cta-show-more-bg: @primary; --mm-cta-show-more-bg-hover: darken(@primary, 20%); --mm-cta-show-more-text: @white; } .uk-background-secondary { background-color: @secondary !important; } .black_overlay { &-xlight { background: rgba(0, 0, 0, .3); } &-light { background: rgba(0, 0, 0, .5); } &-medium { background: rgba(0, 0, 0, .65); } &-dark { background: rgba(0, 0, 0, .8); } } .white_overlay { &-xlight { background: rgba(255, 255, 255, .3); } &-light { background: rgba(255, 255, 255, .5); } &-medium { background: rgba(255, 255, 255, .65); } &-dark { background: rgba(255, 255, 255, .8); } } .background { &_black { background-color: @black; } &_tertiary { background-color: @tertiary; } } .border_radius { &-3 { border-radius: 3px; } &-5 { border-radius: 5px; } &-10 { border-radius: 10px; } &-15 { border-radius: 15px; } &-20 { border-radius: 20px; } &-100 { border-radius: 100%; } &-top-3 { border-top-right-radius: 3px; border-top-left-radius: 3px; } &-top-5 { border-top-right-radius: 5px; border-top-left-radius: 5px; } &-top-10 { border-top-right-radius: 10px; border-top-left-radius: 10px; } &-top-15 { border-top-right-radius: 15px; border-top-left-radius: 15px; } &-top-20 { border-top-right-radius: 20px; border-top-left-radius: 20px; } &-bottom-3 { border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; } &-bottom-5 { border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; } &-bottom-10 { border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; } &-bottom-15 { border-bottom-right-radius: 15px; border-bottom-left-radius: 15px; } &-bottom-20 { border-bottom-right-radius: 20px; border-bottom-left-radius: 20px; } } .content-section { p { font-size: 18px; } } .text-tertiary { color: @tertiary; } .bubblegum-sans { font-family: 'Bubblegum Sans', "Helvetica Neue", Helvetica, Arial, sans-serif; transform: skewX(-16deg); } .tm-header .uk-navbar-dropdown { width: 100% !important; max-width: 1600px !important; .uk-list { .el-item { margin-top: 0; } } } /*-----Nav Menu Styles-----*/ .tm-toolbar { z-index: 9999; background: @white; a { color: @secondary; &:hover { color: @secondary; text-decoration: underline; } } .uk-container { max-width: 1400px; } } .tm-toolbar-default .uk-grid-divider>:not(.uk-first-column)::before { border-left-color: rgb(16, 14, 14, .1); } .tm-top { z-index: 9997; position: relative; } .tm-header { z-index: 9999; box-shadow: 0 3px 4px 0 rgba(0, 0, 0, .15); .uk-navbar-left { margin-top: -40px; } } .tm-header-mobile { z-index: 9999; .uk-navbar { min-height: 88px; margin-bottom: 40px; } .uk-logo { img { padding: 10px; max-width: 140px; } } } .uk-navbar-container { .uk-navbar { .uk-navbar-left {} .uk-navbar-right {} } } .uk-lightbox-toolbar-icon { position: absolute; top: 160px; right: 3%; } /*-----Dropdown Styles-----*/ .uk-navbar-dropdown-nav { li { &.uk-active>a { background: @secondary; } } .uk-nav-sub li { &.uk-active { a { background: @secondary; color: @white; } } a { padding: 8px 15px; &:hover { background: @primary; color: @white; } } } } /*-----Mobile Offcanvas Styles-----*/ #custom_html-4 { .uk-slidenav { bottom: -52px; color: white; &:hover { color: white !important; } } } /*-----Frontpage Styles-----*/ .home-header { overflow: hidden; position: relative; .h1-target { margin-bottom: 20px; span { display: block; &:nth-child(1) { font-size: 4.5rem; color: @secondary; transform: skewX(-16deg); } &:nth-child(2) { font-size: 1.5rem; } } } .overlay-target { background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, .8) 65%, rgba(255, 255, 255, 0) 95%); } &-desktop { video { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); } } } #modalOpen { display: none; } #frontpageModal { .uk-modal-dialog { max-width: 700px; } } /*-----Mainpage Styles-----*/ .mainpage-header { .h1-target { span { display: block; &:nth-child(1) { font-size: 2.3rem; padding-bottom: 10px; } &:nth-child(2) { font-size: 1.3rem; } } } } /*-----Subpage Styles-----*/ .subpage-header { .h1-target { span { display: block; &:nth-child(1) { font-size: 2.3rem; padding-bottom: 10px; } &:nth-child(2) { font-size: 1.3rem; } } } } .nr-content { .card-border-target { .uk-card-default { border-bottom: 4px solid @primary; } } .widget-menu { background: @white; .parent-page { h3 { background: @primary; color: @white; margin: 0; padding: 8px 20px; transition: all ease .3s; } &:hover { h3 { background: @secondary !important; } text-decoration: none !important; } } .uk-list { margin-top: 0; border: 1px solid @primary; li { padding: 6px 0 6px 10px; margin-bottom: 10px !important; border-bottom: 1px solid #bbb; a { color: @darkGrey; } } } } } /*-----Company Page Styles-----*/ .company-header { .h1-target { font-size: 2.3rem; } } /*-----Service Area Page Styles-----*/ #serviceMap { .leaflet-top { z-index: 400 !important; } } /*-----Footer Styles-----*/ #footer { a { &:hover { color: @secondary; } } } /*-----Custom Sections-----*/ // Mobile Ctas @media(max-width: 960px) { .mobile-cta { position: fixed; top: 87px; left: 0; border-radius: 0; width: 102%; z-index: 9999; } .mobile-cta a { padding: 0; border-radius: 0; } .mobile-cta a:nth-child(1) { padding: 0; border-radius: 0; border-right: 1px solid @white; } .tm-main { margin-top: 40px; } } // Our Inventory .our-inventory { border-top: 4px solid @secondary; a { .hover-overlay { transition: all ease .3s; opacity: 0; } &:hover { .hover-overlay { opacity: 1; } } } .uk-heading-small { font-size: 4.25rem; @media(max-width:960px) { font-size: 3rem; } } .featured-slider { padding: 0 60px; @media(max-width:960px) { padding: unset; } .uk-position-center-left-out { right: 100%; } .uk-position-center-right-out { left: 100%; } } .featured-boats-title { padding: 10px; position: relative; z-index: 1; &:after { content: ""; position: absolute; top: -49px; transform: perspective(270px) rotateX(-70deg); background: rgba(0, 0, 0, .75); height: 145px; z-index: -1; left: -20px; right: -20px; border-bottom: 40px @secondary solid; } } .new-boats-title { position: relative; z-index: 1; padding: 20px 20px 15px 20px; overflow: hidden; transform: translateX(-20px); &:after { position: absolute; content: ""; z-index: -1; top: 0; bottom: 0; right: 0; left: 0; background: rgba(0, 0, 0, .75); border-top: 6px solid @secondary; transform: skewX(60deg) translateX(-60px); } } .used-boats-title { position: relative; z-index: 1; padding: 20px 20px 15px 20px; overflow: hidden; transform: translateX(20px); &:after { position: absolute; content: ""; z-index: -1; top: 0; bottom: 0; right: 0; left: 0; background: rgba(0, 0, 0, .75); border-top: 6px solid @secondary; transform: skewX(120deg) translateX(60px); } } .little-grid-arrows { .uk-position-center-left-out { right: 90%; svg { padding: 6px; height: 30px; width: 30px; } } .uk-position-center-right-out { left: 90%; svg { padding: 6px; height: 30px; width: 30px; } } } .info-card { padding: 10px; border-top: @secondary solid 2px; } .uk-position-center-left-out { top: 50% !important; transform: translateY(-50%) !important; svg { background: @secondary; padding: 4px; height: 35px; width: 35px; border-radius: 100%; polyline { stroke: @white !important; } } @media (max-width: 640px) { right: 88%; } @media (max-width: 420px) { right: 80%; } } .uk-position-center-right-out { top: 50% !important; transform: translateY(-50%) !important; svg { background: @secondary; padding: 4px; height: 35px; width: 35px; border-radius: 100%; polyline { stroke: @white !important; } } @media (max-width: 640px) { left: 88%; } @media (max-width: 420px) { left: 80%; } } .uk-position-center-right { svg { background: @secondary; padding: 4px; height: 35px; width: 35px; border-radius: 100%; polyline { stroke: @white !important; } } } .uk-position-center-left { svg { background: @secondary; padding: 4px; height: 35px; width: 35px; border-radius: 100%; polyline { stroke: @white !important; } } } } // Meet Our Team .meet-our-team { .flip-card { height: 550px; perspective: 1000px; } .flip-card-inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.6s; transform-style: preserve-3d; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); } .flip-card:hover .flip-card-inner { transform: rotateY(180deg); } .flip-card-front, .flip-card-back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; h2 { z-index: 2; } } .flip-card-front { background-color: #bbb; color: black; .uk-cover-container { height: 100%; } } .flip-card-back { background-color: @secondary; color: white; transform: rotateY(180deg); img { max-height: 150px; width: auto; } } } // Top Brands .top-brands { a { overflow: hidden; transition: all ease .3s; .image-wrap { transition: all ease .3s; transform: translateY(20px); } .el_title { transform: translateX(200px); transition: all ease .3s; } &:hover { .image-wrap { transform: translateY(0); } .el_title { transform: translateX(0); right: 0; } } } } // Content Section .content-section { h2 { font-weight: bold; } p { font-size: 18px; } } // Core Services .core-grid { @media(min-width:960px) { margin-top: -60px; } .title-item { z-index: 0; } .title-item { border-radius: 10px; h2 { color: #337BB7; line-height: 2rem; } } a { &:after { content: ''; position: absolute; bottom: 0; left: 0; width: 0%; height: 100%; background-color: @secondary; transition: all .5s; z-index: -1; border-radius: 10px; } h2 { transition: all ease .6s; } &:hover { &:after { width: 100%; } h2 { color: @white; } } } } // Featured Inventory .featured-inventory { .el-title { transform: skewX(-16deg); } } // Shop By Brand Slider Arrows .shop-by-brand { .slider-arrows() { background: @secondary; color: @white; padding: 8px; border-radius: 100%; height: 40px; width: 40px; } .uk-position-center-left { svg { .slider-arrows(); } &-out { svg { .slider-arrows(); } } } .uk-position-center-right { svg { .slider-arrows(); } &-out { svg { .slider-arrows(); } } } .uk-position-center-left-out { @media (max-width: 1550px) { right: 96%; } @media (max-width: 960px) { right: 95%; } @media (max-width: 640px) { right: 80%; } @media (max-width: 425px) { right: 70%; } } .uk-position-center-right-out { @media (max-width: 1550px) { left: 96%; } @media (max-width: 960px) { left: 95%; } @media (max-width: 640px) { left: 80%; } } } // First Section .first-section { .image-target { img { border-radius: 10px; box-shadow: 0 5px 15px 0 rgba(0, 0, 0, .5); } } } .service-section { .service-grid { a { position: relative; border-radius: 10px; z-index: 0; &:after { content: ''; position: absolute; bottom: 0; left: 0; width: 0%; height: 100%; background-color: @secondary; transition: all .5s; z-index: -1; border-radius: 10px; } h4 { transition: all ease .6s; } &:hover { &:after { width: 100%; } h4 { color: @white; } } } } } /*-----Horizontal Navbar-----*/ .nav-brand-switcher-container { .uk-subnav { a { font-size: 1.2rem; } } .logo-target { border-radius: 8px; max-width: 30px; } .uk-height-small { height: 50px; } .type-target { color: @black; font-size: .75rem; } } .uk-navbar-dropdown-nav { li.uk-active { background-color: @primary; } } .uk-navbar-dropdown-grid-special { width: fit-content; background: white; // margin: 0px auto; box-shadow: 0 5px 12px rgba(0, 0, 0, .15); .uk-first-column { padding: 0px; } .uk-parent-special { padding-top: 10px; font-size: 18px; } } .dropdown-special-overlay {} .uk-navbar-dropdown-nav-special { display: flex; position: relative; flex-flow: row nowrap; padding-top: 0px; .backgroundContainer { // background-image: url(""); background-size: cover; position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 12%; z-index: 1; } .uk-parent>.uk-flex>a { font-size: 18px; font-weight: 600; color: #666; &:hover { text-decoration: none; } } .uk-parent>.uk-flex:hover { .uk-icon { color: @secondary; } } .uk-parent { position: relative; width: 250px; z-index: 2; } .uk-parent:nth-child(2n) { border-radius: 15px; } // .uk-parent:nth-child(n+3) { // &::before { // content: ''; // position: absolute; // left: -1px; // height: calc(100% - 10px); // width: 1px; // background-color: @tertiary; // display: flex; // } // } .children-special { padding-top: 5px; li { color: @primary; padding: 8px 10px; &:hover { background-color: #205294; a { color: white !important; } } } a { color: #999 !important; line-height: 18px; font-weight: 400; font-size: 16px; } a:hover { text-decoration: none; } } } .uk-navbar-dropdown-special { position: absolute; // left: 50% !important; // transform: translate(-50%, 0%); // max-width: 100% !important; width: fit-content !important; // left: 0 !important; background-color: transparent !important; box-shadow: none; padding: 0px; .uk-icon { position: relative; margin: auto 8px auto 10px; svg { height: auto; max-width: 30px; max-height: 27px; } } } .nav-brand-switcher { .uk-slider { img { position: relative; left: 50%; transform: translateX(-50%); } } .uk-slidenav { bottom: -52px; &:hover { color: black !important; } } } /*-----Global Media Queries-----*/ @media (max-width: 1200px) {} @media (max-width: 960px) {} @media (max-width: 640px) { .tm-top { a { padding: 0 10px; } } .uk-button-secondary { padding: 0 5px; } } @media (max-width: 425px) {} /*-------------------Inventory Manager Styles----------------------------*/ .mm { &_by_make { &_grid {} &_card { transition: all ease .3s; h4 { transition: all ease .3s; } .uk-text-secondary { transition: all ease .3s; } &:hover { text-decoration: none; transform: scale(1.01); background: #222; .uk-text-secondary { color: #fff; } h4 { color: #fff; } } .location-span { background: @darkGrey; color: @white; padding: 2px 5px; } .price-span { background: @secondary; color: @white; padding: 2px 5px; } } } } #breadcrumbs { font-size: 12px; text-transform: uppercase; letter-spacing: 1.4px; a { color: #7d868c; margin-right: 5px; margin-left: 5px; } .breadcrumb_last { color: @secondary; margin-left: 5px; } } .mm { &.product_single { .el-title { color: @secondary; font-family: sans-serif; text-transform: uppercase; font-weight: 600; letter-spacing: 1px; margin-bottom: 10px; .usage { font-weight: 200; position: relative; padding-right: 15px; margin-right: 5px; color: @primary; &:after { content: ''; opacity: 1; position: absolute; top: 20%; bottom: 20%; right: 0; border-right: 2px solid @secondary; } } .status { color: @primary; } } .el-location { font-weight: 600; text-transform: uppercase; color: @secondary; letter-spacing: 1.1px; margin: 0 !important; } .details { border-radius: 6px; overflow: hidden; box-shadow: 0 6px 20px 0 rgba(88, 88, 88, .2); .uk-slidenav { background: @secondary; margin: 0 !important; padding: 10px 15px !important; color: #fff; &:hover { background: darken(@secondary, 5); } svg * { stroke-width: 3; } } &_panel { .uk-list { &> :nth-of-type(odd) { border: none !important; } li { &:before { content: none; } display: flex; justify-content: space-between; align-items: center; &>* { width: 50%; } font-size: 90%; .label { font-size: 11px; text-align: left; text-transform: uppercase; color: @secondary; font-weight: 600; letter-spacing: 2px; } .value { text-align: right; color: @primary; font-weight: 300; font-stretch: normal; font-size: 15px; width: 100%; } } } } } .price_header { font-weight: 500; font-size: 26px; letter-spacing: 2px; color: @secondary; &_sold { color: @primary; } } } } .gf_simple_horizontal_wrapper.gf_browser_chrome ul.gform_fields li.gfield span.name_first, .gf_simple_horizontal_wrapper.gf_browser_chrome ul.gform_fields li.gfield span.name_middle, .gf_simple_horizontal_wrapper.gf_browser_chrome ul.gform_fields li.gfield span.name_last { padding-top: 0 !important; } .gf_simple_horizontal_wrapper .field_sublabel_hidden_label .ginput_complex.ginput_container input[type=text], .gf_simple_horizontal_wrapper .field_sublabel_hidden_label .ginput_complex.ginput_container select { margin-bottom: 0 !important; } .gf_simple_horizontal_wrapper li.hidden_label input { margin-top: 0 !important; } body .gf_simple_horizontal_wrapper .top_label div.ginput_container { margin-top: 0 !important; } .gf_simple_horizontal div.gform_footer.top_label { width: auto !important; vertical-align: top !important; } .gf_simple_horizontal div.gform_body { width: auto !important; } .gf_simple_horizontal div.gform_footer.top_label input[type="submit"] { font-size: 16px; display: inline-block; padding: 10px 44px; text-transform: uppercase; letter-spacing: 1px; color: #fff; outline: none; border: none; -webkit-appearance: none; height: 100%; background: @secondary; } .form_simple { .gform_wrapper { form.gf_simple_horizontal div.gform_body { width: 100% !important; max-width: none; input:not([type=radio]):not([type=checkbox]):not([type=submit]):not([type=button]):not([type=image]):not([type=file]) { font-size: 14px; padding: 8px 0 8px 12px; } } ul { &>li.gfield.gf_inline { width: 20% !important; &:first-child { width: 40% !important; } } } } } .in_page_nav { &_section { border: 1px solid transparent; border-top-color: @muted; border-bottom-color: @muted; .nav_item { a { border-top: 2px solid transparent; border-bottom: 2px solid transparent; box-sizing: border-box; padding-left: 40px; padding-right: 40px; color: fade(@primary, 60%); } &.uk-active { a { border-color: @secondary; color: @primary; } } } } } #inventory { .el-card { .el-content { .el-header { .el-title { font-size: .8rem; font-weight: bold; } } .el-price-header { font-size: .8rem; font-weight: bold; } } .el-meta { text-transform: uppercase; background: #f2f2f2; padding: 0.0625rem 0.3125rem; margin-top: 0.3125rem !important; margin-bottom: 0; color: @primary; font-size: .70rem; line-height: 1.5; } .el-details { font-size: .75rem; } } #mm_pagination { .uk-pagination { justify-content: center; &>li { height: 2.25rem; width: 1.75rem; display: -webkit-flex; display: flex; -webkit-align-items: center; align-items: center; -webkit-justify-content: center; justify-content: center; margin: 0 .5rem; &>* { color: #000; border: 0; font-weight: 500; } &.uk-active { box-shadow: inset 0 -3px @secondary; &>* { font-weight: 700; } } } } } .filter { &_wrapper { min-width: 325px; max-width: 390px; border: 1px solid #e5e5e5; box-sizing: border-box; border-radius: 0.3125rem; @media(max-width:960px) { max-width: unset; .usage>.uk-grid { justify-content: center; } } } &_panel { box-shadow: none; padding: 1.25rem; .usage { background: @muted; border-radius: 50px; padding: 4px; .uk-button { border-color: transparent; border-radius: 50px; } } } &_header { padding: 1.25rem; width: 100%; background: none; border-radius: 0; text-align: left; box-sizing: border-box; border-top: 1px solid #e5e5e5; cursor: pointer; display: flex; align-items: center; justify-content: space-between; .uk-icon { transition: .05s; } .el-title { font-size: 1rem; font-weight: 700; text-transform: none; line-height: 1.25; } &+.filter_body { &.padding { &>.uk-panel { padding: 1.25rem 1rem; } } max-height: 0; overflow: hidden; box-shadow: inset 0 6px 6px -4px hsla(0, 0%, 80%, 0); transition: .35s linear; .uk-list { margin-top: 0; } .item { &:active { opacity: 0.8; } label { font-size: 17px; font-weight: 500; color: @primary; cursor: pointer; } input[type="checkbox"] { position: absolute; z-index: -1; opacity: 0; &+.control { display: flex; align-items: center; position: relative; svg { border: 1px solid fade(@primary, 50); border-radius: 2px; margin-right: 16px; } img { height: 16px; &+.title { visibility: hidden; } } } &:checked { &+.control { svg { color: #fff; border-color: transparent; stroke: currentColor; background: @secondary; } } } } svg { stroke: none; fill: none; display: inline-block; vertical-align: middle; } padding: 0 1.25rem; margin-top: 1.25rem; } } &.visible+.filter_body { max-height: 300px; overflow: auto; box-shadow: inset 0 6px 6px -4px hsla(0, 0%, 80%, .5); background: #fcfcfc; } &.visible { .uk-icon { transform: rotate(180deg); } } } } .slot { &.number { .controls { display: none; margin-top: 1px; &>div { background: @secondary; display: flex; align-items: center; justify-content: center; cursor: pointer; &:hover { background: darken(@secondary, 10%); } &:active { background: darken(@secondary, 16%); } span { color: #fff; } &:first-child { border-bottom: 1px solid fade(#fff, 50%); } } } } } } .inventory_archive { &_header { box-shadow: 0 10px 10px -3px rgba(0, 0, 0, 0.05); padding-top: 65px; @media(max-width:960px) { padding-top: 40px; } } &_title { margin-top: 10px; span { display: block; &:first-child { font-size: 1.5rem; font-weight: 500; line-height: 1.3; } &:last-child { font-size: 1.2rem; letter-spacing: 1px; margin-top: 8px; } } } } #product_services { img { width: 90px; } .el-title { font-size: 16px; font-weight: 500; } .uk-card-body { padding-left: 0; } .uk-card { transition: .2s ease; } .hover_active { .uk-card { opacity: 0.6; &.active { opacity: 1; } } } } .sidebar_logo { width: 40px; height: 40px; margin-right: 10px; } .the_content { h2 { font-weight: 500; font-size: 2rem; color: @secondary; } } .location_switcher { .uk-tab { &:before { content: none; } .card { border: 1px solid @primary; padding: 15px; h4 { text-transform: none; font-weight: 500; letter-spacing: 1px; } } .uk-active { .card { border-color: #fff; background: @secondary; h4 { color: #fff; } p { color: #fff; } } } } } .cursor-pointer { cursor: pointer; } .section_accordion { &>li { &:not(:first-child) { border-top: 1px solid fade(@primary, 20); padding-top: 30px; } } } #content_accordion { @media(max-width:960px) { .uk-text-lead { font-size: 1rem; } } } .secondary_overlay { background-color: fade(@secondary, 100); opacity: 0.9; } .filters_grid { white-space: nowrap; overflow: auto; } #nr_1055_sitemap { ul { padding-left: 15px; list-style: none; } li { &>a { font-size: 0.8rem; } &.page_item_has_children { background: #fafafa; padding: 4px 8px; &>a { font-weight: 600; } } } .sitemapParent { &>li { &.page_item_has_children { margin-top: 30px; &>ul.children { margin-top: 0; border-top: 1px solid #cecece; padding-left: 0; ul.children { padding-left: 0px; &>li { position: relative; padding-left: 5px; &:before { content: "\2022"; top: 1px; position: absolute; left: -4px; } &:not(:first-child) { margin-top: 2px; } } } } } } } } @media only screen and (max-width: 640px) { #gform_1 .gfield { width: 100% !important; } } #gform_12 { .spacer.gfield { display: none; } @media (max-width: 960px) { .gfield { display: block; width: 100%; margin-bottom: 4px; padding-right: 0px; } .gform_footer, .gform_body { display: block; width: 100%; max-width: none; input { width: 100%; } } } } .pro-shop-brands { .oneill, .phase-five { padding: 5px; border: 4px solid black; border-radius: 5px; } .hyperlite, .ho { padding: 5px; border: 4px solid black; background-color: @black; border-radius: 5px; } } #equipments_slider { vertical-align: middle; @media (min-width: 968px) { ul { justify-content: center; } li { padding: 30px 15px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; text-align: center; &:not([class*=uk-width]) { width: 20%; } } } .overlay { &_content { transition: .2s ease; background: fade(#000, 50); padding: 15px; } } a { * { pointer-events: none; } } & { .overlay { &_content { top: 15px; left: 15px; right: 15px; bottom: 15px; } } //padding-top: 0; .uk-card { transition: .2s ease; box-shadow: 0 4px 30px 0 fade(@primary, 40); } } h3 { color: #fff; font-size: 1.4em; text-shadow: 1px 1px 10px #000; text-transform: uppercase; font-weight: 500; line-height: 1.2; max-width: 230px; display: block; letter-spacing: 1.2px; } } .new_used { &_card { box-shadow: 0 6px 10px 0 rgba(88, 88, 88, .2); .overlay { background: fade(@primary, 20%); &_content { background: fade(@secondary, 70); left: 30px; right: 30px; top: 30px; bottom: 30px; transition: .2s ease; &:hover { top: 0; left: 0; bottom: 0; right: 0; } } } } } .brand_logo { padding: 20px; background: #fff; display: inline-block; border-radius: 4px; &>* { width: 200px; height: auto; } } .content_panel { &_section { &+& { padding-top: 0; } } &_card { box-shadow: 10px 15px 95px -5px rgba(3, 81, 89, .1); border-radius: 6px; } } .locations_home { h3 { text-shadow: 0 0 5px rgba(0, 0, 0, 0.3); } .uk-tile { address { background: fade(#000, 30%); padding: 10px; border-radius: 4px; &:hover { background: fade(#000, 70%); } } .uk-position-cover { background: linear-gradient(fade(@secondary, 40%) 50px, fade(@primary, 70%)); transition: .3s ease-in-out; } &:hover { .uk-position-cover { background-image: linear-gradient(fade(@secondary, 40%) 50px, fade(@primary, 80%)); background-size: 300%; background-position-y: -220px; } } } } .product_type { &_core_grid { .el-item { .img-wrapper { transition: all ease .3s; } &:hover { .img-wrapper { transform: translateY(-20px); } } } } &_h1 { .h1-target { filter: drop-shadow(2px 4px 3px black); span { display: block; &:nth-child(1) { font-size: 3.3rem; padding-bottom: 10px; transform: skewX(-12deg); } &:nth-child(2) { font-size: 1.2rem; } } } } &_section { .header { text-align: center; margin-bottom: 40px; .el-title { margin-bottom: 0; } .el-meta { margin-top: 8px; color: @secondary; opacity: 0.6; text-transform: uppercase; font-size: 1rem; font-weight: 200; letter-spacing: .1em; } } } &_grid { position: relative; display: table; width: 100%; vertical-align: middle; * { box-sizing: border-box; } } &_block { .uk-button { border: 1px solid #fff; position: relative; &:hover { background: @secondary; border-color: transparent; } } padding: 15px; @media (min-width: 968px) { -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; display: table-cell; width: 100%; width: 20%; padding: 0 15px; } vertical-align: top; margin-bottom: 0; .inner-box { position: relative; display: block; background: #fff; height: 360px; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .caption-box { position: absolute; left: 0; bottom: 30px; width: 100%; padding: 0 20px; font-size: 13px; text-transform: uppercase; color: #ffffff; line-height: 24px; text-align: center; transition: all 0.4s ease; -moz-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; z-index: 1; } .hover-box { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; padding: 20px 30px; font-size: 13px; text-transform: uppercase; color: #ffffff; line-height: 24px; text-align: center; transition: all 0.4s ease; -moz-transition: all 0.4s ease; -webkit-transition: all 0.4s ease; -o-transition: all 0.4s ease; opacity: 0; visibility: hidden; z-index: 2; &:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: fade(@secondary, 50); background: linear-gradient(to top, fade(@secondary, 50), rgba(0, 0, 0, 0.0)); } } .uk-position-cover { background: fade(@primary, 20%); background: linear-gradient(to top, fade(@primary, 50), rgba(0, 0, 0, 0.0)); } .hover-inner { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: table; vertical-align: bottom; padding: 0; transition: all 0.2s ease; -moz-transition: all 0.2s ease; -webkit-transition: all 0.2s ease; -o-transition: all 0.2s ease; -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); opacity: 0; visibility: hidden; } .hover-content { position: relative; width: 100%; display: table-cell; vertical-align: bottom; padding: 30px 15px; } .hover-content .tour-info { position: relative; display: block; margin: 0 0 10px; line-height: 1.5em; font-size: 13px; text-transform: uppercase; } .title { color: #fff; text-transform: none; font-weight: 600; margin: 0 !important; } .hover-content .link-box { position: relative; padding-top: 20px; } .hover-content .link-box:before { content: ''; position: absolute; left: 50%; top: 15px; height: 40px; border-left: 1px solid rgba(255, 255, 255, 0.30); } &:hover { @media (min-width: 968px) { width: 32%; } .caption-box { opacity: 0; visibility: hidden; } .hover-box { opacity: 1; visibility: visible; } .inner-box { box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.50); } .hover-inner { -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); opacity: 1; visibility: visible; -webkit-transition: all 500ms ease 300ms; -moz-transition: all 500ms ease 300ms; -o-transition: all 500ms ease 300ms; transition: all 500ms ease 300ms; } } @media (max-width: 968px) { .caption-box { opacity: 0; visibility: hidden; } .hover-box { opacity: 1; visibility: visible; } .inner-box { box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.50); } .hover-inner { -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); opacity: 1; visibility: visible; -webkit-transition: all 500ms ease 300ms; -moz-transition: all 500ms ease 300ms; -o-transition: all 500ms ease 300ms; transition: all 500ms ease 300ms; } } } } .separator_accent { // background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAAAGCAYAAAB+dujoAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3hpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQyIDc5LjE2MDkyNCwgMjAxNy8wNy8xMy0wMTowNjozOSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpmZWRlYjc1Yi01NjFhLWEzNGItYjM1Yy1iMTk4NWI1MjM2MjMiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzU5MUVCMkIyMjMwMTFFQUJFRjE4QjFEMTkyNkIxQUUiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzU5MUVCMkEyMjMwMTFFQUJFRjE4QjFEMTkyNkIxQUUiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo5OWJiZDU4ZS05OTk5LTQ0YTMtOTM4Ni04MDY1OWFiYTI2NDAiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ZmVkZWI3NWItNTYxYS1hMzRiLWIzNWMtYjE5ODViNTIzNjIzIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+c9ZgfQAAAexJREFUeNqMlE1LVFEch+8EVmpqoH0Cc5NI2SKc1I0v+BrSMiQpW2RYLUxx5UZ3moIgYosSC6yVEdUYaKvQsdVAOLWYZvwAGvQy+dKmngO/C4dhzu0eeC6Xe87/uef+zrknklwZX/I87xKkYBWeQdb7fyuEPuiAs3qWthy/QziKLEelnn21HPshHMVytMvx15rHUzgIKj53dcz7/HLiFLfXNY8q+BghmAQ3F6yxcRiAT0E+eAQNjv5NuA3bAY5qOeod/RtyJAMcNXJEHf0f5PgS4DgPC1BnPUsc49IMF2FQu8a8ZF3p5WvN6jehZOCe6mt1b1brssa0ORyt8F6hpFVXazky6jOOFoejTf1R7bK7qjdzuQ870KgxTQ6H+cY1hZJSBqa+xewYe2A5PIYe+AMzsAw/wWy3a/AATkIMbsBuzssq4AlcgSOYhufwC0osxwl4AzdhL8dxBhahCw7leCFHqeU4Dq+h3+FY0scbx0M5snL0whAUwCu4xW/1zS/ODcbThCeVut+yCsZvC5qY6wwwwU1pFV2OeRgOOAMKFcidAMccjOjDXWfYtI4Gl2MWRgnlyC7MF4zf2rWa5rc4DT9gSyv51gvXOrWrjKNMjrgcsZCOLjmilmNTjtWQjm456uT47jsI5F2+gn8CDAD9aIK2YXPPTgAAAABJRU5ErkJggg=='); // background-position: center center; // background-size: contain; background: @secondary; height: 2px; width: 100px; margin-left: auto; margin-right: auto; &.uk-text-left { margin-left: 0; } } .shop_by_brand { &_bottom_section { margin-top: -200px; } } .brand_card { border: 6px solid #fff; box-shadow: 0 2px 85px -5px fade(@primary, 27); .uk-position-cover { background: fade(@secondary, 40); -webkit-transition: .3s ease-in-out; -o-transition: .3s ease-in-out; transition: .3s ease-in-out; &.uk-background-primary { background: fade(@primary, 50); } } .logo { max-width: 70%; margin: auto; fill: #fff !important; color: #fff; } &:hover { .uk-position-cover:not(.uk-background-primary) { background: fade(@secondary, 60); } } } .wave_card { text-align: center; position: relative; background: #fff; .uk-card-media { box-sizing: border-box; } .uk-position-cover { background: fade(@secondary, 60); } &:hover { .uk-position-cover { background: fade(@secondary, 70); } } h3 { color: #fff; font-weight: 700; text-transform: uppercase; text-shadow: 1px 1px 10px #111111; font-size: 26px; display: flex; align-items: center; } .el-content {} } /*------Product Single Check Price Button Styles-------*/ .check-price-wrapper {} /*------Product Video Styles-------*/ .product_youtube_video_container, .product_vimeo_video_container { height: 100%; width: 100%; iframe { top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; } } /*------Thumbnav Styles-------*/ .product-single-thumbnav { a { max-width: 75px; @media (max-width: 640px) { max-width: unset; } } .uk-slidenav { background: none !important; margin: 0 !important; padding: 5px !important; color: #fff; &:hover { background: darken(@secondary, 5); } svg * { stroke-width: 1; } } .uk-position-center-left-out { top: 50% !important; transform: translateY(-50%) !important; svg { background: #000; padding: 4px; height: 35px; width: 35px; } @media (max-width: 640px) { right: 88%; } @media (max-width: 420px) { right: 80%; } } .uk-position-center-right-out { top: 50% !important; transform: translateY(-50%) !important; svg { background: #000; padding: 4px; height: 35px; width: 35px; } @media (max-width: 640px) { left: 88%; } @media (max-width: 420px) { left: 80%; } } } .product-wishlist-active { --wishlist-active-color: red; svg path { fill: var(--wishlist-active-color); color: var(--wishlist-active-color); } } /*-----Brand Archive Styles-----*/ .brand_archive-heading { font-size: 3rem; font-weight: bold; @media(max-width:960px) { margin-bottom: 30px; } span { display: block; &:nth-child(1) { font-weight: bold; } &:nth-child(2) { font-size: 1.4rem; font-weight: normal; } } } .brand-archive { .uk-text-lead { @media(max-width:960px) { font-size: 1rem !important; } } } /*-----Product Single Banner Styles-----*/ .product-status-banner { position: absolute; top: 0; left: 0; width: 295px; padding: 15px; background-color: @secondary; z-index: 1; text-align: center; transform: rotate(-45deg) translate(-28%, -35%); box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.4); text-transform: uppercase; text-shadow: 0 2px 2px rgba(0, 0, 0, 0.4); opacity: 90%; } /*-------------------END Inventory Manager Styles----------------------------*/ /* Updates 11/16/2023 */ // button.open-button { // border-radius: 500px; // } // .core-grid .uk-card:after { // clip-path: polygon(-1px -1px, calc(100% + 1px) 15%, calc(100% + 1px) calc(100% + 1px), -1px calc(100% + 1px)); // transform-style: preserve-3d; // will-change: transform; // backface-visibility: hidden; // width: 101%; // } // .inv-image { // height: 250px; // min-height: 250px; // } // .inv-image img { // height: 100%; // width: 100%; // object-fit: cover; // } .inventory_archive_title { span { display: block; &:nth-child(1) { font-size: 2.3rem; padding-bottom: 10px; } &:nth-child(2) { font-size: 1.3rem; } } } .brand_archive-heading { font-size: 3rem; font-weight: bold; @media(max-width:960px) { margin-bottom: 30px; } span { display: block; &:nth-child(1) { font-weight: bold; } &:nth-child(2) { font-size: 1.4rem; font-weight: normal; } } } // Inventory Grid Styles .mm_by_make_card .price-span { background: @primary; color: #fff; padding: 2px 5px; } .mm_by_make_card { transition: all ease .3s; } .mm_by_make_card:hover { background-color: @primary; } .mm_by_make_card:hover h4 { color: #fff; } .mm_by_make_card .uk-position-bottom { bottom: -2px !important; } .mm_by_make_card h4 { transition: all ease .3s; } .mm_by_make_card .by-make-title { padding: 10px; } .mm_by_make_card:hover .mm-usage { color: white; } .mm_by_make_card .location-span { background: @secondary; color: #fff; padding: 2px 5px; } #inventory .uk-slidenav { background-color: transparent; margin: 0px; padding: 0px; } #inventory .uk-position-center-left-out { right: 97% !important; background-color: white; padding: 5px 10px; transition: all .3s ease-in-out; &:hover { background-color: black !important; } } #inventory .uk-position-center-right-out { left: 97% !important; background-color: white; padding: 5px 10px; border-radius: 50%; transition: all .3s ease-in-out; &:hover { background-color: black !important; } } #brand-archive .uk-slidenav { background-color: transparent; margin: 0px; padding: 0px; } #brand-archive .uk-position-center-left-out { right: 97% !important; background-color: white; padding: 5px 10px; border-radius: 50%; transition: all .3s ease-in-out; &:hover { background-color: black !important; } } #brand-archive .uk-position-center-right-out { left: 97% !important; background-color: white; padding: 5px 10px; border-radius: 50%; transition: all .3s ease-in-out; &:hover { background-color: black !important; } } #root { .ais-ScrollTo { .uk-section-primary { background-color: #f8f8f8; } } } #infinite_list { .hit:hover { .el-header h3 { color: white !important; } .show-details { color: white; &:hover { color: #2fa1db; } } .hit-category { color: white; transition: all ease-in-out .3s; } } } // Boat Single #boat_single { .specs-box li { display: flex; justify-content: space-between; } .total-views-box { @keyframes pulse-orange { 0% { box-shadow: 0 0 0 0 rgba(0, 207, 255, 1); } 70% { box-shadow: 0 0 0 10px rgba(49, 155, 66, 0); } 100% { box-shadow: 0 0 0 0 rgba(49, 155, 66, 0); } } } .price-header span { border-bottom: 1px solid #fff; } } // Paste the following at the bottom of your less file // Boat Single #boat_single { .specs-box li { display: flex; justify-content: space-between; } .total-views-box { @keyframes pulse-orange { 0% { box-shadow: 0 0 0 0 rgba(0, 207, 255, 1); } 70% { box-shadow: 0 0 0 10px rgba(49, 155, 66, 0); } 100% { box-shadow: 0 0 0 0 rgba(49, 155, 66, 0); } } } .price-header span { border-bottom: 1px solid #fff; } } // Inventory Archive #inventory_archive { .h1-target { margin-top: 10px; span { display: block; &:first-child { font-size: 3rem; font-weight: 500; line-height: 1.3; } &:last-child { font-size: 1.7rem; letter-spacing: 1px; margin-top: 8px; } } } } // Brand Archive #brand_archive { .h1-target { span { display: block; font-weight: bold; &:nth-child(1) { font-size: 2.6rem; margin-bottom: 10px; } &:nth-child(2) { font-size: 1.5rem; } } } .brand-logo { padding: 20px; background: #fff; display: inline-block; border-radius: 4px; max-width: 300px; } .brand-archive-inventory-feed { .mm-inventory-item { border: 1px solid #fff; } } } // Our Inventory .our-inventory { .price { color: white !important; text-align: right; span { width: fit-content; background-color: @primary; padding: 4px; } } } /* End Updates */ #popup-main { .uk-modal-body { height: auto !important; img { width: 100%; height: auto; } } }