/*-----Global Styles-----*/ @primary: #1C2C39; @secondary: #00c0f4; @white: #fff; @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: @primary; --mm-cta-request-pricing-shadow: @primary; --mm-cta-request-pricing-bg-hover:darken(@primary, 20%); --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; } .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); } } /*-----Subpage Styles-----*/ .sub-header { .h1-target { span { display: block; &:nth-child(1) { font-size: 2.3rem; padding-bottom: 10px; } &:nth-child(2) { font-size: 1.3rem; } } } } /*-----Nav Styles-----*/ .tm-toolbar { z-index: 9999; background: #787878; .uk-container { max-width: 1400px; .el-item { display: flex; align-items: center; } } } .tm-top { z-index: 9997; position: relative; } .tm-header { z-index: 9999; .uk-navbar-left { position: absolute; left: 0; top: -45px; } .uk-navbar-right { padding-left: 200px; } .uk-navbar-dropdown { .uk-navbar-dropdown-nav { border-top: 3px solid @secondary; background: #333; li { a { color: @white; border-bottom: 1px solid @muted; // Arrow color correcting &:after { color: @white !important; } &:hover { color: @darkGrey; &:after { color: @darkGrey !important; } } } &.uk-active { a { &:after { color: @darkGrey !important; } } } &.uk-parent { position: relative; &:after { content: ">"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: @secondary; } } } .uk-nav-sub { background: #333; li { a { padding: 8px 15px; &:hover { color: @white; background: @primary; } } } } } } } .tm-header-mobile { z-index: 9999; .uk-navbar-left { img { max-width: 115px; } } } .uk-navbar-nav { .uk-navbar-dropdown-nav { border-top: 3px solid @secondary; background: #333; li { a { color: @white; border-bottom: 1px solid @muted; // Arrow color correcting &:after { color: @white !important; } &:hover { &:after { color: @darkGrey !important; } } } &.uk-active { a { &:after { color: @darkGrey !important; } } } &.uk-parent { position: relative; &:after { content: ">"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: @secondary; } } } .uk-nav-sub { background: #333; li { a { padding: 8px 15px; &:hover { color: @white; background: @primary; } } } } } } /*-----Global Section Styles-----*/ .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(); } } } #serviceMap { .leaflet-top { z-index: 400 !important; } } .core-services { .card-target { position: relative; z-index: 1; padding: 14px 20px 6px 20px !important; &:after { content: ""; position: absolute; top: 0; bottom: 0; left: -100px; right: 60px; transform: skewX(225deg); background: rgba(0, 0, 0, .65); border-top: 6px solid @secondary; z-index: -1; } h2 { span { display: block; &:nth-child(1) { font-size: .8rem; } &:nth-child(2) { font-size: 1.6rem; } } } } a { .hover-overlay { opacity: 0; transition: all ease .3s; } &:hover { text-decoration: none; .hover-overlay { opacity: 1; } } } } .children-slider { a { &:hover { .el-title { background: @primary; } } } .el-item { position: relative; canvas { min-height: 200px; } .el-title { position: absolute; bottom: 0; left: 0; right: 0; background: @secondary; color: @white; padding: 10px; transition: all ease .3s; margin-bottom: 0; text-transform: uppercase; font-size: 1rem; } } } #secondaryNav { .uk-nav li>a { padding: 8px; color: @darkGrey; &:hover { background: @secondary; color: @white; } } } .span-flex { &-center { display: flex; align-items: center; justify-content: center; } &-left { display: flex; align-items: center; justify-content: left; } &-right { display: flex; align-items: center; justify-content: right; } } .uk-lightbox .uk-lightbox-button { min-width: 60px; } .gform_wrapper { .spacer.gfield { display: none !important; } } #gform_4 { @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%; } } } } /*-----Service Area Page Styles-----*/ #serviceMap { .leaflet-top { z-index: 400 !important; } } .service-list { a { position: relative; &::after { content: ''; position: absolute; width: 100%; height: 1px; background: @secondary; bottom: 0; left: 0; } &:hover { text-decoration: none; color: @secondary; &::after { background: @secondary; } } } } .first-section { margin-top: 115px; .logo-target { margin-top: -160px; } } .slanted_section { position: relative; z-index: 0; h2 { text-transform: uppercase; } .uk-card-default { padding: 5px; } &-right { &:after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; transform: skewX(340deg); width: 100%; background: rgba(0, 0, 0, .75); z-index: -1; border-right: 6px solid @secondary; @media(max-width:960px) { left: 0; transform: unset; border-right: unset; border-top: 6px solid @secondary; } } } &-left { &:after { content: ""; position: absolute; top: 0; bottom: 0; right: -40%; transform: skewX(20deg); width: 100%; background: rgba(0, 0, 0, .75); z-index: -1; border-left: 6px solid @secondary; @media(max-width:960px) { right: 0; transform: unset; border-left: unset; border-top: 6px solid @secondary; } } } } .shop-brands-section { .uk-slider-items { li { text-align: center; a { &:hover { svg { color: @secondary; } } } } } .button-target { margin-top: 70px; } .uk-position-center-right-out { top: unset; bottom: -120px; left: 50%; } .uk-position-center-left-out { top: unset; bottom: -120px; right: 50%; } } .title-wrapper-target { position: relative; z-index: 1; &:after { content: ""; position: absolute; background: rgba(0, 0, 0, 0.7); transform: perspective(270px) rotateX(316deg); top: -7px; left: 25%; right: 25%; height: 160px; z-index: -1; border-bottom: 10px solid @secondary; @media(max-width:1199px) { top: -9px; height: 130px; } @media(max-width:960px) { top: -9px; height: 125px; } @media(max-width:640px) { left: 8%; right: 8%; } } h2 { margin-top: 10px; font-size: 3rem; @media(max-width:1199px) { font-size: 2.5rem; } @media(max-width:960px) { font-size: 2rem; } } } .shop-boat-types-section { .hover-overlay { opacity: 0; transition: all ease .3s; } a { &:hover { text-decoration: none; .hover-overlay { opacity: 1; } } } .card-target { h2 { position: relative; border-bottom: 6px solid @secondary; padding: 15px 10px; } } canvas { min-height: 200px; } } .boat-inventory { 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; } } .financing-bar { .wrapper-target { border: 1px solid @white; } } .our-resources { .button-wrapper { padding: 15px; } } .brand-h1 { span { display: block; &:nth-child(1) { font-size: 2.5rem; margin-bottom: 10px; } &:nth-child(2) { font-size: 1.8rem; } } } .company-header { .overlay-target { position: relative; z-index: 1; @media(max-width:960px) { padding-left: 30px; padding-right: 30px; } &:after { position: absolute; content: ""; top: -50%; bottom: -50%; left: -30%; right: -100%; transform: skew(46deg); background: rgba(0, 0, 0, .65); z-index: -1; border-left: 8px solid @secondary; @media(max-width:960px) { transform: unset; } } } h1 { font-size: 2rem; span { display: block; &:nth-child(1) { margin-bottom: 10px; font-weight: bold; } &:nth-child(2) { font-size: 1.2rem !important; } } } } /*-----Home Page Styles-----*/ .home-header { position: relative; z-index: 1; &:after { content: ""; background: rgba(0, 0, 0, .65); position: absolute; left: 38%; top: 0; right: -300px; bottom: -1px; transform: skew(-45deg); z-index: -1; @media(max-width:1400px) { left: 35%; } @media(max-width:1200px) { left: 30%; } @media(max-width:960px) { transform: unset; left: 0; right: 0; } } .h1-target { font-weight: bold; text-transform: uppercase; span { display: block; font-size: 2.5rem; @media(max-width:1200px) { font-size: 2.1rem; } @media(max-width:960px) { font-size: 2rem; } &:nth-child(1) { position: relative; &:after { content: ""; position: absolute; bottom: -5px; height: 1px; width: 80%; right: 0; background: @secondary; @media(max-width:960px) { right: unset; left: 50%; transform: translateX(-50%); } } span { display: inline !important; &:after { height: 0; } } } &:nth-child(2) { max-width: 700px; margin-left: auto; font-size: 1.3rem; padding-top: 10px; @media(max-width:960px) { font-size: 1rem; } } } } } /*-----Main Page Styles-----*/ .children-grid { a { &:hover { .el-title { background: @primary; color: @white; } } } .uk-card { position: relative; border-radius: 3px; canvas { min-height: 200px; } .el-title { transition: all ease .3s; position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, .5); color: @white; margin: 0; padding: 15px; font-size: 1.2rem; } } } /*-----Sub Page Styles-----*/ .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; } } } } } /*-----Contact Page Styles-----*/ /*-----About Page Styles-----*/ /*-----Footer Styles-----*/ #footer { a { &:hover { color: @secondary; } } } .uk-position-center-left-out { right: 93%; } .uk-position-center-right-out { left: 93%; } @media (max-width: 1200px) { #secondaryNav .uk-navbar-nav>li>a { font-size: .8rem; padding: 0 10px; } } @media (max-width: 960px) { .uk-position-center-left-out { right: 90%; } .uk-position-center-right-out { left: 90%; } } @media (max-width: 640px) { .h1-target { font-weight: bold; span { display: block; font-size: 1.8rem; &:nth-child(2) { font-size: 1rem; padding-top: 10px; } } } .tm-top { a { padding: 0 10px; } } .uk-button-secondary { padding: 0 5px; } .uk-position-center-left-out { right: 80%; } .uk-position-center-right-out { left: 80%; } } @media (max-width: 425px) { .uk-position-center-left-out { right: 70%; } .uk-position-center-right-out { left: 70%; } .uk-lightbox { .uk-position-center-right { left: 79%; } } } @media (max-width: 320px) { .uk-lightbox { .uk-position-center-right { left: 73%; } } } /*-------------------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; background-repeat: no-repeat; background-position-y: center; background-position-x: right; } .breadcrumb_last { color: @secondary; } } .mm { &.product_single { .el-title { color: @secondary; font-size: 32px; 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; } } } } } #inventory { header { margin-top: 81px } .el-card { overflow: hidden; cursor: pointer; box-shadow: 2px 2px 7px 0 rgba(1, 1, 1, .15); transition: box-shadow .3s cubic-bezier(.64, .04, .35, 1); border-radius: .3125rem; color: @primary; &:hover { box-shadow: 2px 2px 6px 0 rgba(1, 1, 1, .05), 2px 4px 9px 0 rgba(1, 1, 1, .15); } .el-content { padding: 1.25rem; border-radius: .3125rem; position: relative; top: -.3125rem; margin-bottom: -.3125rem; background: #fff; z-index: 1; //box-shadow: 0 -1px 7px 0 rgba(1, 1, 1, .05); } .el-header { .el-title { font-size: 16px; color: @primary; } .el-meta { display: inline-block; text-transform: uppercase; background: #f2f2f2; padding: .0625rem .3125rem; margin-top: .3125rem !important; color: @secondary; font-size: .75rem; line-height: 1.5; } } .el-price-header { .location { display: flex; align-items: center; margin-left: -4px; font-size: 14px; font-weight: 700; .uk-icon { svg { height: 16px; } } } .price { font-weight: 700; color: @primary; font-size: 1.375rem; letter-spacing: .4px; line-height: 1.36; } .stocknumber { font-size: .8rem; opacity: 0.8; } } .el-details { font-size: .75rem; line-height: 1.5; color: #000; letter-spacing: .4px; svg { height: 16px; width: 16px; margin-right: .625rem; } } } #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: 378px; @media(max-width:960px) { max-width: 100%; } border: 1px solid #e5e5e5; box-sizing: border-box; border-radius: 0.3125rem; .filter_panel { .uk-grid { @media(max-width:1200px) { 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); } &_title { margin-top: 10px; font-size: 2rem; span { display: block; &:first-child { font-weight: bold; } } } } #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; } } } .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; } } #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 { &_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 {} } .arrow_wrapper { position: absolute; bottom: 60px; left: 0; right: 0; } .arrow { width: 3vmin; height: 3vmin; box-sizing: border-box; position: absolute; left: 50%; top: 50%; transform: rotate(-225deg); &::before { content: ''; width: 100%; height: 100%; border-width: .8vmin .8vmin 0 0; border-style: solid; border-color: #fafafa; transition: .2s ease; display: block; transform-origin: 100% 0; } &:after { content: ''; float: left; position: relative; top: -100%; width: 100%; height: 100%; border-width: 0 .8vmin 0 0; border-style: solid; border-color: #fafafa; transform-origin: 100% 0; transition: .2s ease; } &:hover::after { transform: rotate(45deg); border-color: @secondary; height: 120%; margin-left: -0.37vmin; } &:hover::before { border-color: @secondary; transform: scale(.9); } } .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%; } } .video-grid .product_youtube_video_container, .video-grid .product_vimeo_video_container { height: 100%; width: 100%; iframe { top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; } } /*-------------------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; // } .uk-navbar-toggle { color: #999 !important; &:hover { color: #666 !important; } } #tm-dialog-mobile { background-color: #f8f8f8; padding: 0px 0px 20px 0px; .uk-nav>li>a { font-size: 1.3rem; } .uk-nav>li.collapsed>a { background-color: rgba(0,0,0,.1); } .uk-nav-default { li { a { color: #313131; &:hover { color: #313131; } } } } .uk-nav-default>li.uk-active>a { position: relative; &:before { content: ''; position: absolute; width: 5px; height: 100%; left: 0; top: 0; background-color: #1c2c39; } } .uk-nav-sub { background-color: rgba(0,0,0,.05); a { padding: 9px 24px; font-size: 1rem; color: #111; &:hover { color: #111 !important; } } li.uk-active { a { color: @secondary; font-size: 1rem; color: #111; } } .toggle_sub { top: 23px !important; } ul { background-color: rgba(0,0,0,.05) } } .uk-nav { &>li { position: relative; &:after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translatex(-50%); width: 95%; border-bottom: 1px solid #CECECE; } &>a { padding: 12px 24px; span { display: none; } } .toggle_sub { right: -5px !important; } } } } .first-with-video .logoDiv { img { width: 330px; height: auto; position: relative; } svg { width: 330px; height: auto; position: relative; } } .boat-inventory { .uk-slidenav { background-color: transparent; } .price { color: white; } .featured-slider { padding: 0px; } } .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; } } } .shop-brands-section { .uk-slidenav { background-color: transparent; padding: 10px } @media(max-width:960px) { .button-target { margin-top: 90px; } } } #inventory { .uk-slidenav { background-color: transparent; padding: 10px } .uk-flex.uk-flex-middle { padding-left: 20px; } .mm-usage { padding-right: 10px; } .uk-slider-items>li>a:hover .mm-usage { color: white; } } #manufacturer-single { .uk-slidenav { background-color: transparent; padding: 10px } .uk-flex.uk-flex-middle { padding-left: 20px; } .mm-usage { padding-right: 10px; } .uk-slider-items>li>a:hover .mm-usage { color: white; } } #brand-archive { .uk-slidenav { background-color: transparent; padding: 10px } .uk-flex.uk-flex-middle { padding-left: 20px; } .mm-usage { padding-right: 10px; } .uk-slider-items>li>a:hover .mm-usage { color: white; } } .by-make-section { .mm_by_make_card { .uk-grid-margin.uk-first-column { border: 1px solid @primary; border-top: none; } } .mm_by_make_card:hover { backgroud-color: @secondary; .mm-usage { color: white; } } .uk-flex.uk-flex-middle { padding-left: 20px; } h4 { padding: 10px 0px; } .mm-usage { padding-right: 10px; transition: .3s ease-in-out all; } .price-span { color: #111; font-weight: 500; } } #root { .ais-ScrollTo { .uk-section-primary { background-color: #f8f8f8; } } } .ais-Panel:nth-child(5) { .ais-Panel-body { padding: 0px 0.7rem; } } .ais-Panel:nth-child(6) { .ais-Panel-body { padding: 0px 0.7rem; } } #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; } } } .breadcrumb_wrapper { p { width: fit-content; } } } // 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 */ // Finance Calculator .financing-calculator { .number-input { position: relative; width: ~"calc(100% - 40px)"; padding: 6px 16px 4px 16px; border: 4px solid transparent; font-size: 16px; -moz-appearance: textfield; -webkit-user-select: none; /* Safari */ -ms-user-select: none; /* IE 10 and IE 11 */ user-select: none; /* Standard syntax */ &::-webkit-outer-spin-button { -webkit-appearance: none; } &::-webkit-inner-spin-button { -webkit-appearance: none; } &:focus { border: @secondary 4px solid; outline: 0 !important; } } .input-container { position: relative; margin-bottom: 10px; .up-down-container { position: absolute; right: 0; top: 22px; -webkit-user-select: none; /* Safari */ -ms-user-select: none; /* IE 10 and IE 11 */ user-select: none; /* Standard syntax */ a { display: block; height: 18px; width: 24px; position: relative; &.up { .uk-icon { position: relative; top: -5px; left: 4px; color: black; } } &.down { .uk-icon { position: relative; top: -5px; left: 4px; color: black; } } } } .form-label { font-size: 14px; } .form-sub-label { font-size: 14px; margin-top: 3px; margin-bottom: 0px; } } .summary-list { p { font-size: 16px; margin: 0px; } } }