.watchlist-heart,
.boat-request-icon,
.video-icon {
display: flex;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
padding: 0;
border: none;
border-radius: 50%;
background-color: rgba(255, 255, 255, .85);
box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
color: var(--brand-primary);
font-size: 1.1rem;
line-height: 1;
transition: transform .15s ease;
}
.watchlist-heart:hover,
.boat-request-icon:hover,
.video-icon:hover {
transform: scale(1.08);
}
.watchlist-heart {
color: #495057;
transition: transform .15s ease, color .15s ease;
}
.watchlist-heart.is-active {
color: #dc3545;
}
.watchlist-heart span {
display: flex;
}
.watchlist-heart:not(.is-active) .wl-on,
.watchlist-heart.is-active .wl-off {
display: none;
}
.watchlist-heart:disabled {
opacity: .6;
}
.watchlist-heart-card,
.boat-request-icon-card,
.video-icon-gallery,
.video-icon-card {
position: absolute;
z-index: 2;
}
.watchlist-heart-card {
top: .5rem;
right: .5rem;
}
.boat-request-icon-card,
.video-icon-gallery {
bottom: .5rem;
right: .5rem;
}
.video-icon-card {
bottom: .5rem;
left: .5rem;
}
.flag-icon {
display: inline-block;
width: 1.3em;
height: .867em;
border-radius: 2px;
overflow: hidden;
box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
vertical-align: middle;
flex: 0 0 auto;
}
.flag-icon svg {
display: block;
width: 100%;
height: 100%;
}
:root {
--brand-primary-hover-rgb: var(--brand-primary-rgb);
--brand-primary-active: color-mix(in srgb, var(--brand-primary-hover), black 12%);
--brand-primary-focus: color-mix(in srgb, var(--brand-primary), white 55%);
--brand-primary-focus-ring: 0 0 0 .25rem rgba(var(--brand-primary-rgb), .25);
--bs-primary: var(--brand-primary);
--bs-primary-rgb: var(--brand-primary-rgb);
--bs-link-color: var(--brand-primary);
--bs-link-color-rgb: var(--brand-primary-rgb);
--bs-link-hover-color: var(--brand-primary-hover);
--bs-link-hover-color-rgb: var(--brand-primary-hover-rgb);
--bs-focus-ring-color: rgba(var(--brand-primary-rgb), .25);
}
.btn-primary {
--bs-btn-bg: var(--brand-primary);
--bs-btn-border-color: var(--brand-primary);
--bs-btn-hover-bg: var(--brand-primary-hover);
--bs-btn-hover-border-color: var(--brand-primary-hover);
--bs-btn-active-bg: var(--brand-primary-active);
--bs-btn-active-border-color: var(--brand-primary-active);
--bs-btn-disabled-bg: var(--brand-primary);
--bs-btn-disabled-border-color: var(--brand-primary);
--bs-btn-focus-shadow-rgb: var(--brand-primary-rgb);
}
.btn-outline-primary {
--bs-btn-color: var(--brand-primary);
--bs-btn-border-color: var(--brand-primary);
--bs-btn-hover-bg: var(--brand-primary);
--bs-btn-hover-border-color: var(--brand-primary);
--bs-btn-active-bg: var(--brand-primary-active);
--bs-btn-active-border-color: var(--brand-primary-active);
--bs-btn-disabled-color: var(--brand-primary);
--bs-btn-disabled-border-color: var(--brand-primary);
--bs-btn-focus-shadow-rgb: var(--brand-primary-rgb);
}
.btn-link {
--bs-btn-color: var(--brand-primary);
--bs-btn-hover-color: var(--brand-primary-hover);
--bs-btn-active-color: var(--brand-primary-hover);
--bs-btn-focus-shadow-rgb: var(--brand-primary-rgb);
}
.btn-close {
--bs-btn-close-focus-shadow: var(--brand-primary-focus-ring);
}
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
border-color: var(--brand-primary-focus);
box-shadow: var(--brand-primary-focus-ring);
}
.form-check-input:checked {
background-color: var(--brand-primary);
border-color: var(--brand-primary);
}
.dropdown-menu {
--bs-dropdown-link-active-bg: var(--brand-primary);
}
.pagination {
--bs-pagination-hover-color: var(--brand-primary-hover);
--bs-pagination-focus-color: var(--brand-primary-hover);
--bs-pagination-focus-box-shadow: var(--brand-primary-focus-ring);
--bs-pagination-active-bg: var(--brand-primary);
--bs-pagination-active-border-color: var(--brand-primary);
}
.accordion {
--bs-accordion-btn-focus-border-color: var(--brand-primary-focus);
--bs-accordion-btn-focus-box-shadow: var(--brand-primary-focus-ring);
--bs-accordion-active-color: var(--brand-primary-active);
--bs-accordion-active-bg: rgba(var(--brand-primary-rgb), .1);
}
:root {
--line-soft: #e6e9ee;
--text-soft: #6b7280;
--bs-border-radius: 12px;
--bs-border-radius-sm: 12px;
--bs-border-radius-lg: 12px;
}
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
min-height: 100vh;
background-color: #f6f8fa;
}
main {
flex: 1 0 auto;
}
input::placeholder,
.form-control::placeholder {
color: #adb5bd;
font-style: italic;
}
.card {
border: 1px solid var(--line-soft);
}
.navbar {
--bs-navbar-brand-color: var(--brand-primary);
--bs-navbar-brand-hover-color: var(--brand-primary);
}
.nav-icon-link {
display: flex;
align-items: center;
color: var(--bs-body-color);
text-decoration: none;
}
.nav-icon-link:hover {
color: var(--brand-primary);
}
@media (hover: hover) and (pointer: fine) {
.navbar .dropdown:not(.nav-item):hover > .dropdown-menu {
display: block;
}
.navbar .dropdown > .dropdown-menu[data-bs-popper] {
margin-top: 0;
}
.navbar .dropdown:hover > .dropdown-menu-end {
right: 0;
left: auto;
}
}
@media (hover: hover) and (pointer: fine) and (min-width: 992px) {
.navbar-expand-lg .nav-item.dropdown:hover > .dropdown-menu {
display: block;
}
}
@media (hover: hover) and (pointer: fine) and (min-width: 1200px) {
.navbar-expand-xl .nav-item.dropdown:hover > .dropdown-menu {
display: block;
}
}
.navbar-toggler {
border: 0;
padding-right: 0;
}
.navbar-toggler:focus:not(:focus-visible) {
box-shadow: none;
}
.navbar .dropdown-menu {
--bs-dropdown-item-padding-y: .45rem;
}
@media (max-width: 991.98px) {
.navbar-expand-lg .navbar-collapse .dropdown > .dropdown-menu-end {
right: auto;
left: 0;
}
}
@media (max-width: 1199.98px) {
.navbar-expand-xl .navbar-collapse .dropdown > .dropdown-menu-end {
right: auto;
left: 0;
}
}
.boat-price-old {
font-size: 1rem;
color: #9ca3af;
text-decoration: line-through;
}
[data-preview-off] {
opacity: .5;
}
.form-select.is-set {
background-color: rgba(var(--brand-primary-rgb), .14);
border-color: var(--brand-primary);
}
[x-cloak] {
display: none !important;
}
.ci-s {
display: none !important;
}
.wait-layer {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.7);
cursor: progress;
animation: wait-layer-in 0.2s ease 0.15s both;
}
.wait-layer[hidden] {
display: none;
}
.wait-layer-page {
position: fixed;
z-index: 2000;
}
.wait-layer-page .spinner-border,
.wait-layer-tall .spinner-border {
width: 3rem;
height: 3rem;
}
.wait-layer-tall {
align-items: flex-start;
}
.wait-layer-tall .spinner-border {
position: sticky;
top: 45vh;
margin-top: 3rem;
}
@keyframes wait-layer-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.seo-spec {
margin-top: 2.5rem;
}
.seo-spec h2 {
margin: 1.5rem 0 0.75rem;
font-size: 1.35rem;
}
.seo-spec > :first-child {
margin-top: 0;
}
.seo-spec-top {
margin: 0 0 1rem;
}
.seo-spec ul {
margin-bottom: 1rem;
}
.seo-spec .textend {
font-style: italic;
}
.app-badges {
display: inline-flex;
flex-direction: column;
align-items: stretch;
gap: .75rem;
}
.app-badge {
display: flex;
align-items: center;
gap: .75rem;
padding: 14px 16px;
border: 1px solid #2e3447;
border-radius: 12px;
background-color: #191f33;
color: #fff;
text-decoration: none;
transition: background-color .3s ease-in-out, box-shadow .3s ease-in-out;
}
.app-badge:hover,
.app-badge:focus-visible {
background-color: #2e3447;
box-shadow: 0 16px 32px rgba(0, 0, 0, .24);
color: #fff;
}
.app-badge-logo {
flex-shrink: 0;
}
.app-badge-text {
display: flex;
flex-direction: column;
min-width: 0;
}
.app-badge-note {
font-size: 12px;
line-height: 16px;
color: #767e94;
}
.app-badge-store {
font-size: 16px;
font-weight: 600;
line-height: 24px;
white-space: nowrap;
}
@media (max-width: 575.98px) {
.app-badges {
max-width: 100%;
}
.app-badge {
gap: .5rem;
padding: 12px;
}
.app-badge-store {
white-space: normal;
}
}
.boat-type-icon-stroke {
fill: none;
stroke: var(--boat-type-icon-stroke, #464a58);
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
stroke-miterlimit: 10;
}
.page-message {
position: absolute;
top: 100%;
left: 0;
right: 0;
z-index: 990;
padding-top: clamp(1.5rem, 12vh, 8rem);
pointer-events: none;
}
.page-message .alert {
max-width: 720px;
margin: 0 auto;
pointer-events: auto;
}
.page-message .alert-success {
border: 2px solid var(--bs-success);
}
.page-message .alert-danger {
border: 2px solid var(--bs-danger);
}
.page-message-icon {
font-size: 1.25em;
line-height: 1.2;
}
.page-message-leaving {
animation: page-message-out .6s ease forwards;
}
.page-message-leaving:hover,
.page-message-leaving:focus-within {
animation-play-state: paused;
}
@keyframes page-message-out {
to {
opacity: 0;
visibility: hidden;
}
}
.boat-grid-img {
aspect-ratio: 4 / 3;
object-fit: cover;
}
.faded-illustration {
max-width: 546px;
width: 80%;
aspect-ratio: 1 / 1;
margin-left: auto;
margin-right: auto;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
-webkit-mask-image: radial-gradient(ellipse 50% 42% at center, #000 60%, transparent 100%);
mask-image: radial-gradient(ellipse 50% 42% at center, #000 60%, transparent 100%);
-webkit-mask-size: 100% 100%;
mask-size: 100% 100%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
.filter-top-box {
margin-bottom: 1rem;
padding: .5rem;
border-radius: var(--bs-border-radius);
background-color: var(--bs-light);
}
.video-consent {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
width: 100%;
height: 100%;
padding: 1.5rem;
text-align: center;
color: #fff;
}
.video-consent p {
max-width: 32rem;
margin: 0;
}
.trap-link {
position: absolute;
left: -10000px;
top: auto;
width: 1px;
height: 1px;
overflow: hidden;
}
.skip-link:focus {
position: fixed;
top: .5rem;
left: .5rem;
z-index: 2000;
padding: .5rem 1rem;
border-radius: .375rem;
background-color: #fff;
color: var(--bs-body-color);
font-weight: 600;
text-decoration: none;
outline: 2px solid var(--brand-primary);
outline-offset: 2px;
}
#content:focus {
outline: none;
}
@media (hover: hover) and (pointer: fine) {
.navbar .dropdown.hover-dismissed:hover > .dropdown-menu:not(.show) {
display: none;
}
}
button.nav-link.dropdown-toggle,
button.nav-icon-link.dropdown-toggle {
background: none;
border: 0;
text-align: start;
}
button.nav-link.dropdown-toggle {
width: 100%;
}
button.nav-icon-link.dropdown-toggle {
padding: 0;
}
.field-hint {
position: relative;
display: block;
margin: 0;
}
.field-hint-label {
position: absolute;
top: 0;
left: .6rem;
max-width: calc(100% - 1.2rem);
overflow: hidden;
padding: 0 .25rem;
transform: translateY(-50%);
border-radius: .25rem;
background-color: #fff;
color: #6c757d;
font-size: .7rem;
line-height: 1.2;
white-space: nowrap;
text-overflow: ellipsis;
pointer-events: none;
opacity: 0;
}
.field-hint:has(> input:not(:placeholder-shown)) > .field-hint-label {
opacity: 1;
}
.field-hint:has(> textarea:not(:placeholder-shown)) > .field-hint-label {
opacity: 1;
}
.field-hint:has(> select):not(:has(> select option[value=""]:checked)) > .field-hint-label {
opacity: 1;
}
.field-hint:has(> select option[value=""]:checked:empty) > .field-hint-label {
opacity: 1;
}