/* ============================================
TABLE OF CONTENTS
============================================
1. CSS VARIABLES AND GLOBAL SETUP
2. TYPOGRAPHY
3. LAYOUT AND CONTAINERS
4. HEADER STYLES
5. MAIN CONTENT STYLES
6. FOOTER STYLES
7. BUTTONS AND INTERACTIVE ELEMENTS
8. YACHT LISTINGS AND COMPONENTS
9. FORMS AND CONTACT ELEMENTS
10. MEDIA QUERIES
11. UTILITY CLASSES
12. MENU & NAVIGATION
============================================ */
/* ============================================
1. CSS VARIABLES AND GLOBAL SETUP
============================================ */
:root {
--color-primary: #0057a8;
--color-primary-dark: #003d7a;
--color-secondary: #f60;
--color-secondary-dark: #d45500;
--color-text: #333;
--color-text-light: #666;
--color-text-inverted: #fff;
--color-bg: #fff;
--color-white: #fff;
--color-sidebar-bg: #f3f7fa;
--color-light-gray: #f4f4f4;
--color-border: #ddd;
--box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
--font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
--font-size-base: 16px;
--line-height-base: 1.5;
--font-weight-normal: 400;
--font-weight-bold: 700;
--container-width: 1200px;
--container-padding: 15px;
--sidebar-left-width: 200px;
--sidebar-right-width: 300px;
--content-padding: 20px;
--column-gap: 20px;
--transition-standard: all 0.3s ease;
/* Contact Form 7 variables */
--cf7-primary: #0057a8;
--cf7-primary-dark: #004080;
--cf7-secondary: #f60;
--cf7-secondary-dark: #d45500;
--cf7-text: #333;
--cf7-text-light: #666;
--cf7-background: #fff;
--cf7-input-background: #f9f9f9;
--cf7-border: #ddd;
--cf7-border-focus: #0057a8;
--cf7-error: #dc3232;
--cf7-success: #46b450;
--cf7-spacing-xs: 0.25rem;
--cf7-spacing-sm: 0.5rem;
--cf7-spacing-md: 1rem;
--cf7-spacing-lg: 1.5rem;
--cf7-spacing-xl: 2rem;
--cf7-border-radius: 4px;
--cf7-transition: all 0.3s ease;
--color-light-blue: #ebf7ff;
--color-weekday: #f1f8ff;
--color-weekend: #f7f9ff;
--border-radius: 8px;
}
:root {
font-synthesis: none;
}
/* 15. Optimize animation performance */
@media (prefers-reduced-motion: no-preference) {
* {
scroll-behavior: smooth;
}
}
/* 12. Reduce composite layers on mobile */
@media (max-width: 768px) {
.yacht-item,
.footer-link,
.book-button {
transform: none;
will-change: auto;
}
}
li{padding-bottom:4px}
html {
font-size: var(--font-size-base);
line-height: var(--line-height-base);
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
/*body {
font-family: var(--font-primary);
font-size: 1rem;
line-height: var(--line-height-base);
color: var(--color-text);
background-color: var(--color-bg);
overflow-x: hidden;
text-rendering: optimizeSpeed;
}*/
img {
max-width: 100%;
height: auto;
display: block;
vertical-align: middle;
border: 0;
}
/* Accessibility: Screen reader text */
.screen-reader-text {
position: absolute !important;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(100%);
border: 0;
}
.screen-reader-text:focus {
background-color: var(--color-light-gray);
border-radius: 3px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
clip-path: none !important;
color: var(--color-primary);
display: block;
font-size: 14px;
font-weight: 700;
height: auto;
left: 5px;
line-height: normal;
padding: 15px 23px 14px;
text-decoration: none;
top: 5px;
width: auto;
z-index: 100000;
}
/* Skip link */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: var(--color-primary);
color: #fff;
padding: 8px;
z-index: 100;
}
.skip-link:focus {
top: 0;
}
/* ============================================
2. TYPOGRAPHY
============================================ */
h1, h3, h4, h5, h6 {
color: var(--color-primary);
font-weight: var(--font-weight-bold);
/*line-height: 1.2;*/
margin-bottom: 0.5em;
}
h2 {
color: #1a9da8;
font-weight: var(--font-weight-bold);
/*line-height: 1.2;*/
margin-bottom: 0.5em;
}
h1 {
font-size: 1.8rem;
}
h2 {
font-size: 1.2rem;
}
h3 {
font-size: 1.1rem;
}
h4 {
font-size: 1rem;
color: #1a9da8;
}
h5 {
font-size: 0.9rem;
}
h6 {
font-size: 0.8rem;
}
p {
margin-bottom: 1rem;
}
/*a {
color: var(--color-primary);
text-decoration: none;
transition: color 0.2s ease;
}*/
a:hover,
a:focus {
color: var(--color-primary-dark);
text-decoration: underline;
}
a:focus {
outline: var(--focus-outline);
outline-offset: 2px;
}
a:active,
a:hover {
outline: 0;
}
ul {
margin: 0 0 1rem 1.5rem;
padding-left: 1rem;
}
li > ul {
margin-bottom: 0;
}
/* ============================================
3. LAYOUT AND CONTAINERS
============================================ */
.site {
position: relative;
overflow: hidden;
}
/* aizkomentēts 29/05/2025
.site-container {
width: 100%;
max-width: var(--container-width);
margin: 0 auto;
padding: 0 var(--container-padding);
}
*/
.site-content-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
/* aizkomentēts 29/05/2025
margin: 20px -10px;
*/
}
.content-area {
background-color: var(--color-white);
border-radius: 4px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
flex: 1;
min-width: 0;
order: 2;
padding: 15px;
}
.right-sidebar {
background-color: var(--color-sidebar-bg);
border-radius: 4px;
flex: 0 0 var(--sidebar-right-width);
order: 3;
padding: 15px;
}
.archive-content h1 {
font-size: 1.4rem;
}
.archive-content h2 {
font-size: 1.7rem;
}
.archive-content .entry-title {
margin-top: 0;
}
.archive-content. entry-content {
margin-bottom: 0;
}
.archive-post-thumbnail img {
border-radius: 0.5rem;
margin-bottom: 1.5rem
}
.archive-post-divider {
border-top: 1px solid var(--color-border);
margin-bottom: 1.5rem
}
.archive-description {
font-style: italic
}
/* ============================================
4. HEADER STYLES
============================================ */
.site-header {
padding: 20px 0 0;
border-bottom: none;
}
.site-header .site-container {
display: block;
max-width: var(--container-width);
}
/*.site-branding {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.site-title-wrapper {
flex: 1;
}*/
.site-title {
/*font-size: 28px;*/
margin: 0 0 5px;
line-height: 1.2;
}
.site-description {
margin: 0;
font-size: 14px;
color: #666;
}
/*.logo-link {
display: inline-block;
position: relative;
margin-right: 20px;
transition: transform 0.3s ease;
overflow: visible;
}*/
@media (min-width: 769px) {
.logo-link {
padding-left: 50px;
padding-right: 40px
}
}
.logo {
display: block;
max-width: 150px;
width: 100%;
height: auto;
transition: filter 0.4s ease, transform 0.4s ease;
}
.logo-link:hover {
transform: translateY(-2px);
}
.logo-link:hover .logo {
filter: brightness(1.1);
}
.logo-link::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, transparent, rgba(0, 87, 168, 0.3), transparent);
border-radius: 50%;
filter: blur(2px);
opacity: 0;
transform: scaleX(0.8);
transition: opacity 0.4s ease, transform 0.4s ease;
}
.logo-link:hover::after {
opacity: 1;
transform: scaleX(1);
}
.custom-logo {
max-height: 60px;
width: auto;
}
.custom-logo-link {
margin-right: 1rem;
}
.header-phone {
margin-left: 5px;
}
/* ============================================
5. MAIN CONTENT STYLES
============================================ */
/* Post and page styles */
.page_box,
.post_box {
margin-bottom: 1.8rem;
}
.headline_area {
margin-bottom: 1rem;
}
.format_text {
overflow: hidden;
}
.post_image {
border-radius: 0.5rem;
float: left;
margin: 0 1.5rem 1.2rem 0;
max-width: 100%;
overflow: hidden;
}
.post_image img,
.search-post-thumbnail img {
border-radius: 0.5rem;
height: auto;
overflow: hidden;
width: 100%;
}
.entry-content img,
.format_text img {
border-radius: 0.5rem;
}
.wp-post-image {
border-radius: 0.5rem;
}
.post_tags {
color: var(--color-text-light);
font-size: 0.9rem;
margin-top: 1.5rem;
}
.post_tags a {
color: var(--color-primary);
}
.prev_next {
border-top: 1px solid var(--color-border);
margin: 2rem 0;
padding-top: 1rem;
}
.entry-title {
margin-top: -20px;
}
.post-divider {
background-color: #e0e0e0;
clear: both;
height: 1px;
margin: 2rem 0;
width: 100%;
}
.comments-area {
border-top: 1px solid var(--color-border);
margin-top: 2rem;
padding-top: 1rem;
}
/* Background styled post boxes */
.post_box[style*="background"] {
border-radius: 4px;
margin-bottom: 1.5rem;
padding: 1rem;
}
.post_box[style*="background"].format_text {
color: var(--color-white);
}
.post_box[style*="background"] h2 {
color: var(--color-white);
}
.post_box[style*="background"] a {
color: var(--color-white);
text-decoration: underline;
}
/* Search results */
.search-post-thumbnail {
display: block;
float: none;
margin: 0 0 1.2rem;
max-width: 100%;
width: 620px;
}
/* Gallery styling */
.gallery {
display: flex;
flex-wrap: wrap;
margin: -5px;
}
.gallery-item {
padding: 5px;
text-align: center;
}
.gallery-columns-1 .gallery-item {
width: 100%;
}
.gallery-columns-2 .gallery-item {
width: 50%;
}
.gallery-columns-3 .gallery-item {
width: 33.33%;
}
.gallery-columns-4 .gallery-item {
width: 25%;
}
.gallery-columns-5 .gallery-item {
width: 20%;
}
.alignnone {
margin-bottom: 1.5rem;
}
/* Promotional boxes */
.promotional-box {
background: #fc6b03;
}
.promotional-box .promo-link {
color: #266ab0;
}
.promotional-box h2 {
color: #fff;
font-size: 1.6em;
line-height: 1.3em;
margin-left: 1.2em;
margin-right: 0.8em;
}
.promotional-box p {
margin-top: -1.4em;
}
/* ============================================
6. FOOTER STYLES
============================================ */
.site-footer {
background-color: var(--color-bg);
border-top: 4px double var(--color-border);
color: var(--color-text);
font-family: var(--font-primary);
/*font-size: 14px;*/
line-height: 1.4;
margin-top: 2rem;
padding-bottom: 1.5rem;
padding-top: 2rem
}
.home .site-footer:not(.site-footer) {
margin-top: 0;
}
.site-footer h3 {
color: var(--color-primary);
font-size: 1.2rem;
font-weight: 500;
margin-bottom: 12px;
position: relative;
}
.site-footer h3.text-primary-second {
margin-top: 16px;
}
.footer-columns {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: space-between;
}
.footer-column {
flex: 1 1 200px;
margin-bottom: 1rem;
}
.footer-column.footer-yacht-services {
min-width: 120px;
padding-left: 0;
}
.footer-column.footer-additional-services,
.footer-column.footer-contact,
.footer-column.footer-details {
min-width: 200px;
}
.footer-column.footer-logo {
margin-right: -70px;
}
.footer-column ul.space-y-2 {
list-style: none;
margin: 0;
padding: 0;
}
.footer-column ul.space-y-2 li {
margin-bottom: 4px;
}
.footer-link {
color: var(--color-text);
display: inline-block;
font-size: 14px;
padding: 0;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-link:hover {
color: var(--color-primary);
}
.site-footer .logo-container {
display: block;
transition: transform 0.3s ease;
}
.site-footer .logo-container img,
.site-footer .logo-container svg {
display: block;
height: auto;
max-width: 120px;
}
.site-footer .logo-container:hover {
transform: translateY(-5px);
}
.footer-details .space-y-3 {
margin: 0;
padding: 0;
}
.footer-details .space-y-3 p {
margin-bottom: 6px;
}
.contact-row {
margin-bottom: 0.75rem;
}
.contact-row a {
align-items: center;
color: var(--color-text);
display: flex;
text-decoration: none;
transition: color 0.3s ease;
}
.contact-row a:hover {
color: var(--color-primary);
}
.contact-row img {
height: 20px;
margin-right: 10px;
width: 20px;
}
.footer-contact .space-y-4 {
margin-bottom: 1rem;
}
.footer-contact h3 {
display: inline-block;
margin-right: 1rem;
}
.flex .gap-3 {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center
}
.social-icon {
margin-right: 8px;
align-items: center;
border-radius: 50%;
color: var(--color-text);
display: flex;
height: 2rem;
justify-content: center;
transition: transform 0.3s ease, opacity 0.3s ease;
width: 2rem;
}
.social-icon:hover {
color: #fff;
opacity: 0.8;
transform: scale(1.2);
}
.footer-locations {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-bottom: 1.5rem;
margin-top: 1.5rem;
}
.footer-locations h3 {
margin: 0;
margin-right: 0.5rem;
white-space: nowrap;
}
.footer-location-links {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 0.25rem;
}
.location-link {
background-color: var(--color-light-gray);
border-radius: 0.25rem;
color: var(--color-text);
font-size: 13px;
padding: 4px 8px;
text-decoration: none;
transition: background-color 0.3s ease, color 0.3s ease;
}
.location-link:hover {
background-color: var(--color-primary);
color: #fff;
}
.footer-bottom {
border-top: 2px solid var(--color-light-gray);
margin-top: 1rem;
padding-top: 1rem;
text-align: center;
}
.footer-copyright {
color: var(--color-text-light);
font-size: 13px;
margin-bottom: 0.5rem;
text-align: center;
}
.footer-nav-links {
display: block;
text-align: center;
width: 100%;
}
.footer-nav-links a {
color: var(--color-text-light);
font-size: 13px;
text-decoration: none;
transition: color 0.3s ease;
}
.footer-nav-links a:hover {
color: var(--color-primary);
}
/* Back to top button */
.back-to-top {
align-items: center;
background-color: var(--color-primary);
border: none;
border-radius: 9999px;
bottom: 2rem;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
color: #fff;
cursor: pointer;
display: flex;
height: 2.5rem;
justify-content: center;
opacity: 0;
position: fixed;
right: 2rem;
transition: all 0.3s ease;
visibility: hidden;
width: 2.5rem;
z-index: 99;
}
.back-to-top.visible {
opacity: 1;
visibility: visible;
}
.back-to-top:hover {
background-color: var(--color-primary-dark);
}
/* ============================================
7. BUTTONS AND INTERACTIVE ELEMENTS
============================================ */
/*.book-button {
background-color: var(--color-secondary);
border: none;
border-radius: 4px;
color: #fff;
display: inline-block;
font-weight: 600;
padding: 10px 20px;
text-decoration: none;
transition: background-color 0.3s ease;
} */
/*.book-button:hover {
background-color: var(--color-secondary-dark);
color: #fff;
text-decoration: none;
}*/
.details-link {
color: var(--color-text-light);
/*font-size: 0.9rem;*/
text-decoration: underline;
transition: color 0.3s ease;
padding-right: 5px
}
.details-link:hover {
color: var(--color-primary);
text-decoration: none
}
.promo-link {
background-color: #fff;
border-radius: 20px;
color: #266ab0;
display: inline-block;
font-weight: 600;
margin-left: 10px;
padding: 5px 15px;
text-decoration: none;
transition: all 0.3s ease;
}
.promo-link:hover {
background-color: #0057a8;
color: #fff;
text-decoration: none;
}
.search-form-container {
position: relative;
z-index: 2;
}
.search_form .text_input {
border: 1px solid var(--color-border);
border-radius: 4px;
color: #789;
font-size: 0.9rem;
padding: 8px;
width: 100%;
}
.right-sidebar h3,
.widget-title {
/*color: var(--color-primary);*/
color: #1a9da8 !important;
font-size: 1.2rem;
}
.sidebaroffers-title {
color: #1a9da8;
height: 2.7rem;
border-bottom: 1px solid #e0e0e0;
text-align: center;
font-weight: 400
}
.right-sidebar-widget {
border-bottom: 1px solid var(--color-border);
margin-bottom: 1.5rem;
padding-bottom: 1.5rem;
}
/* ============================================
8. YACHT LISTINGS AND COMPONENTS
============================================ */
.yacht-grid {
display: grid;
gap: 30px;
grid-template-columns: 1fr;
margin-bottom: 40px;
}
.yacht-item {
background-color: #fff;
border: 1px solid #e8e8e8;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease
}
.yacht-item:hover {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
transform: translateY(-5px);
}
.yacht-item:hover .yacht-image img {
transform: scale(1.03);
}
.yacht-image {
/*height: 220px; -> aizkomentēts 17.06.25 */
overflow: hidden;
position: relative;
}
.yacht-image img {
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
width: 100%;
}
.yacht-content {
padding: 20px
}
.yacht-title {
color: var(--color-primary);
font-size: 1.3rem;
margin-bottom: 10px;
}
.yacht-title a {
color: var(--color-primary);
text-decoration: none;
transition: color 0.3s ease;
}
.yacht-title a:hover {
color: var(--color-primary-dark);
}
.yacht-description {
color: #333;
font-size: 0.95rem;
margin-bottom: 15px;
}
.yacht-specs {
margin-bottom: 20px;
}
.yacht-specs ul {
list-style: none;
margin: 0;
padding: 0;
}
.yacht-specs li {
/*font-size: 0.9rem;*/
padding: 5px 0 5px 22px;
position: relative;
}
.yacht-specs li:before {
background-color: #0057a8;
border-radius: 50%;
content: '';
display: block;
height: 6px;
left: 8px;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 6px;
}
.yacht-specs a, .entry-content a {
text-decoration: underline
}
.yacht-actions {
align-items: center;
border-top: 1px solid #f0f0f0;
display: flex;
justify-content: space-between;
padding-top: 15px;
}
.yacht-card {
background-color: #fff;
border: 1px solid #e8e8e8;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.yacht-card:hover {
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
transform: translateY(-5px);
}
.yacht-card:hover .yacht-thumbnail {
transform: scale(1.03);
}
.yacht-content {
display: flex;
flex-direction: column;
flex-grow: 1;
padding: 20px;
}
.yacht-thumbnail {
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
width: 100%;
}
.yacht-actions {
align-items: center;
border-top: 1px solid #f0f0f0;
display: flex;
justify-content: space-between;
margin-top: auto;
padding-top: 15px;
}
/* Yacht listing page */
.yacht-listings-container {
margin: 0 auto;
max-width: var(--container-width);
padding: 0 var(--container-padding);
width: 100%;
}
.yacht-listings-content {
background-color: var(--color-white);
padding: 20px 0;
width: 100%;
}
.yacht-page-header {
margin-bottom: 30px;
}
.page-title {
color: var(--color-primary);
font-size: 2rem;
margin-bottom: 0.75rem;
}
.page-description {
color: var(--color-text-light);
font-size: 1.1rem;
margin-bottom: 1.5rem;
}
.yacht-promo-banner {
background-color: #fc6b03;
border-radius: 4px;
color: #fff;
margin-bottom: 30px;
padding: 15px 20px;
text-align: center;
}
.promo-banner{
padding-top: 15px
}
.yacht-promo-banner h2 {
color: #fff;
font-size: 1.3rem;
line-height: 1.4;
margin: 0;
}
/* JNN Yacht widget styles */
.jnn-yacht-widget {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
margin-bottom: 15px;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease;
width: 300px;
}
.jnn-yacht-widget:hover {
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
transform: translateY(-5px);
}
.jnn-yacht-widget:hover .jnn-yacht-image {
transform: scale(1.05);
}
.jnn-yacht-image-wrapper {
height: 180px;
overflow: hidden;
position: relative;
}
.jnn-yacht-image {
display: block;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
width: 100%;
}
.jnn-yacht-header {
background-color: #0057a8;
padding: 15px;
}
.jnn-yacht-title {
color: #fff;
font-family: inherit;
font-size: 1.4rem;
font-weight: 600;
margin: 0;
}
.jnn-yacht-details {
padding: 15px;
}
.jnn-yacht-price-container {
display: inline-flex;
font-size: 1.1rem;
margin-bottom: 15px;
}
.jnn-yacht-price-prefix {
align-self: center;
color: #555;
}
.jnn-yacht-price-value {
color: #0057a8;
font-size: 1.6rem;
font-weight: 700;
margin: 0 5px;
}
.jnn-yacht-price-suffix {
align-self: center;
color: #555;
}
.jnn-yacht-specs-list {
list-style: none;
margin: 0 0 20px;
padding: 0;
}
.jnn-yacht-specs-item {
align-items: center;
color: #333;
display: flex;
margin-bottom: 8px;
}
.jnn-yacht-specs-icon {
color: #0057a8;
margin-right: 10px;
}
.jnn-yacht-widgets-container {
display: flex;
flex-wrap: wrap;
font-family: inherit;
justify-content: space-between;
margin: 0 auto;
max-width: 630px;
}
.jnn-yacht-widgets-container p {
margin-bottom: 0.2rem;
}
.jnn-yacht-cta-button {
background-color: #f60;
border-radius: 5px;
box-sizing: border-box;
color: #fff;
display: inline-block;
font-weight: 600;
padding: 10px 20px;
text-align: center;
text-decoration: none;
transition: background-color 0.3s ease;
width: 100%;
}
.jnn-yacht-cta-button:hover {
background-color: #e65c00;
color: #fff;
text-decoration: none;
}
.entry-content .jnn-yacht-image {
border-radius: 0;
}
/* Yacht CTA component */
.jahtu-cta-container {
background-color: #ebf4ff;
border-radius: 14px;
box-shadow: 0 8px 20px rgba(0, 87, 168, 0.08);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
margin: 30px auto;
max-width: 550px;
overflow: hidden;
padding: 24px;
position: relative;
text-align: center;
}
.jahtu-cta-content {
position: relative;
z-index: 2;
}
.jahtu-cta-title {
color: #0057a8;
font-size: 22px;
font-weight: 700;
margin: 0 0 8px;
text-align: center;
}
.jahtu-cta-divider {
background-color: #f60;
border-radius: 3px;
height: 3px;
margin: 8px auto 24px;
width: 50px;
}
.jahtu-cta-circle-icon {
align-items: center;
background-color: #0057a8;
border-radius: 50%;
box-shadow: 0 4px 12px rgba(0, 87, 168, 0.3);
display: flex;
height: 64px;
justify-content: center;
margin: 0 auto 20px;
transition: transform 0.3s, box-shadow 0.3s;
width: 64px;
}
.jahtu-cta-circle-icon svg {
height: 32px;
width: 32px;
}
.jahtu-cta-circle-icon:hover {
box-shadow: 0 8px 20px rgba(0, 87, 168, 0.4);
transform: translateY(-5px) scale(1.05);
}
.jahtu-cta-info-box {
align-items: center;
background-color: rgba(0, 87, 168, 0.06);
border-radius: 10px;
display: flex;
margin: 0 auto 16px;
max-width: 450px;
padding: 12px 20px;
transition: transform 0.3s, background-color 0.3s;
width: 80%;
}
.jahtu-cta-info-box:hover {
background-color: rgba(0, 87, 168, 0.1);
transform: translateY(-3px);
}
.jahtu-cta-info-icon {
align-items: center;
display: flex;
justify-content: center;
margin-right: 12px;
}
.jahtu-cta-info-icon svg {
height: 20px;
width: 20px;
}
.jahtu-cta-info-content {
text-align: left;
}
.jahtu-cta-phone-number {
color: #0057a8;
font-size: 18px;
font-weight: 600;
transition: color 0.3s;
}
.jahtu-cta-hours {
color: #4a6fa5;
font-size: 12px;
margin-top: 3px;
}
.jahtu-cta-email-link {
color: #0057a8;
font-size: 16px;
font-weight: 500;
text-decoration: none;
transition: color 0.3s;
}
.jahtu-cta-info-box:hover .jahtu-cta-email-link,
.jahtu-cta-info-box:hover .jahtu-cta-phone-number {
color: #004080;
}
.jahtu-cta-buttons {
align-items: center;
display: flex;
flex-direction: column;
gap: 16px;
margin-top: 20px;
}
.jahtu-cta-call-button,
.jahtu-cta-form-button {
border-radius: 30px;
display: flex;
font-size: 14px;
font-weight: 600;
gap: 8px;
max-width: 350px;
padding: 12px 24px;
text-decoration: none;
transition: 0.3s;
width: 80%;
}
.jahtu-cta-call-button {
align-items: center;
background-color: #0057a8;
box-shadow: 0 4px 10px rgba(0, 87, 168, 0.25);
color: #fff;
justify-content: center;
}
.jahtu-cta-call-button:hover {
background-color: #004c95;
box-shadow: 0 6px 15px rgba(0, 87, 168, 0.35);
transform: translateY(-2px);
}
.jahtu-cta-form-button {
align-items: center;
background-color: #fff;
border: 2px solid #0057a8;
color: #0057a8;
justify-content: center;
}
.jahtu-cta-form-button:hover {
background-color: #f0f7ff;
transform: translateY(-2px);
}
.jahtu-cta-call-button svg,
.jahtu-cta-form-button svg {
height: 14px;
width: 14px;
}
.jahtu-cta-yacht-bg {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512' fill='%230057a8' opacity='0.1'%3E%3Cpath d='M352.2 32c-1 .1-1.6.3-2.2.5C347.3 32.2 343.6 32 339.9 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96h307.9c3.7 0 7.4-.2 11-.5c5.2-.5 10.4-1.5 15.4-3.1c16.5-5.2 31.2-15.2 42-28.5c2.6-3.2 4.9-6.6 7-10C421.7 44.8 414.8 37.9 409 33c-10.4-9-23.9-12.8-38.6-12.8c-6.6 0-13.3 .9-19.9 2.8c-6.1 1.8-11.8 4.3-17.2 7.5c-1 .6-2.1 1.2-3.2 1.8c-2.5 1.4-5.1 2.8-7.6 4.5c-1.4 .9-3.8 2.9-7.5 5.2c-2.7 1.7-5.5 3.5-8.7 5.4c-2.8 1.7-5.7 3.4-8.7 5c-16 8.4-22.9 10-26.8 10.1l.7 3.9c.4 2.4 .8 4.7 1.4 7c2.4 .2 5.1 .3 8 .3c8.2 0 18.2-1.1 29.7-5.4c11.1-4.1 21.2-10.3 28.7-15.8c.9-.7 1.7-1.3 2.5-1.9l.1-.1c1.9-1.5 3.5-2.7 4.9-3.7c2.2-1.5 4.4-2.7 6.3-3.8c1.1-.6 2.1-1.2 2.9-1.6c4.8-2.8 9.4-4.7 14.5-6.1c5-1.4 10.2-2.1 15.4-2.1c11.2 0 21.4 2.7 28.8 8.9zm64.8 366.8L512 416V352H324.2c-9.8 0-19.5 1.8-28.7 5.3L240 384v48l52.5-14.3c9.2-2.5 18.7-3.7 28.3-3.7h96.2zM512 224c0-17.7-14.3-32-32-32H345.1c-10.7 0-21.3 2.4-31 7l-15.2 7.2c-25.5 12.1-53 18.8-81 18.8H192v32h32c31.9 0 63.3-8.5 91-24.6l5.6-3.3c4.4-2.5 9.1-4.5 14-5.7c5.5-1.4 11.2-2.4 17-2.4H480c17.7 0 32-14.3 32-32zm-48 72.6c-11.8 6.1-24.8 9.4-38 9.4H384c-17.3 0-34.6-3.2-50.8-9.4l-1-.4c-13.7-5.2-28.3-8.1-43-8.1H0v96c0 17.7 14.3 32 32 32h96v64c0 17.7 14.3 32 32 32H320c17.7 0 32-14.3 32-32V384h96v64c0 17.7 14.3 32 32 32h96c17.7 0 32-14.3 32-32V384h32V304.6l-128-8z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
height: 100px;
opacity: 0.1;
position: absolute;
right: 12px;
top: 12px;
width: 100px;
z-index: 1;
}
.jn-yacht-book {
margin:.5rem 0
}
.jn-yacht-book-link {
/*color:#0057a8;*/
color: #1a9da8;
font-weight:500;
text-decoration:none;
position: relative;
padding-left: 20px; /* Make space for the icon */
display: inline-block; /* Ensure proper positioning */
}
.jn-yacht-book-link::before {
content: '';
position: absolute;
left: 0;
top: 50%; /* Center vertically relative to the text */
transform: translateY(-50%); /* Perfect vertical centering */
width: 14px;
height: 14px;
background-image: url(/wp-content/themes/jahtu-noma/assets/images/chevron-simple.svg);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
opacity: 0.8;
transition: opacity 0.2s ease, transform 0.2s ease; /* Add transform for hover effect */
}
.jn-yacht-book-link:hover::before {
opacity: 1;
transform: translateY(-50%) translateX(3px); /* Move slightly right on hover */
}
.jn-yacht-book-link:hover {
color:#003d7a;
text-decoration:underline
}
.jn-yacht-desc {
color:#333;
font-size:.9rem;
line-height:1.5;
margin-bottom:.5rem
}
.jn-yacht-img {
border-radius:.25rem;
display:block;
height:auto;
width:100%;
aspect-ratio: 257/148;
}
.jn-yacht-img-link {
display:block;
margin-bottom:1rem;
width:100%
}
.jn-yacht-offer {
background-color:#f5f7fa;
margin-bottom:.9rem;
padding:.4rem
}
.jn-yacht-offer:not(:last-child) {
border-bottom:1px solid #e2e8f0
}
.jn-yacht-title {
font-size:1.1rem;
line-height:1.2;
margin:0 0 .8rem;
}
.jn-yacht-title a {
/*color:#0057a8;*/
color: #1a9da8;
font-weight:700;
text-decoration:none;
text-transform:uppercase
}
.jn-yacht-title a:hover {
color:#003d7a
}
/* ============================================
9. FORMS AND CONTACT ELEMENTS
============================================ */
/* Contact Form 7 Styling */
.wpcf7 {
animation: formFadeIn 0.4s ease-out;
font-family: Arial, sans-serif;
max-width: 70%;
}
.wpcf7 form {
margin: 0;
padding: 0;
}
.wpcf7 p {
color: var(--cf7-text);
font-size: 1rem;
font-weight: bolder;
line-height: 1.6;
margin-bottom: var(--cf7-spacing-md);
}
/*.wpcf7 p + p {
margin-top: -0.5rem;
} */
.wpcf7-form p {
/*margin-bottom: 0.2rem;*/
margin-top: 0.3rem;
}
.wpcf7-form-control-wrap {
display: block;
margin-bottom: var(--cf7-spacing-sm);
position: relative;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 textarea,
.wpcf7 select {
-webkit-appearance: none;
appearance: none;
background-color: var(--cf7-input-background);
border: 1px solid var(--cf7-border);
border-radius: var(--cf7-border-radius);
box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.08);
color: #979797;
font-size: 1rem;
line-height: 1.5;
margin: 0;
padding: 0.75rem 1rem;
transition: var(--cf7-transition);
width: 100%;
}
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="url"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 input[type="number"]:focus,
.wpcf7 input[type="date"]:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
background-color: #fff;
border-color: var(--cf7-border-focus);
box-shadow: 0 0 0 3px rgba(0, 87, 168, 0.15);
outline: none;
}
.wpcf7 select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
background-position: right 0.75rem center;
background-repeat: no-repeat;
background-size: 1rem;
padding-right: 2.5rem;
}
.wpcf7 textarea {
min-height: 120px;
resize: vertical;
}
.wpcf7 input[type="submit"] {
-webkit-appearance: none;
appearance: none;
background-color: var(--cf7-secondary);
border: none;
border-radius: var(--cf7-border-radius);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 1rem;
font-weight: 600;
margin-top: var(--cf7-spacing-md);
min-width: 150px;
padding: 0.875rem 1.5rem;
text-align: center;
text-decoration: none;
transition: var(--cf7-transition);
width: auto;
}
.wpcf7 input[type="submit"]:hover {
background-color: var(--cf7-secondary-dark);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}
.wpcf7 input[type="submit"]:focus {
box-shadow: 0 0 0 3px rgba(246, 102, 0, 0.3);
outline: none;
}
.wpcf7 input[type="submit"]:active {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
transform: translateY(0);
}
.wpcf7 .wpcf7-not-valid-tip {
color: var(--cf7-error);
display: block;
font-size: 0.875rem;
margin-top: 0.25rem;
}
.wpcf7 input.wpcf7-not-valid,
.wpcf7 textarea.wpcf7-not-valid,
.wpcf7 select.wpcf7-not-valid {
background-color: rgba(220, 50, 50, 0.03);
border-color: var(--cf7-error);
}
.wpcf7 .wpcf7-response-output {
border: 1px solid #ddd;
border-radius: var(--cf7-border-radius);
color: var(--cf7-text);
font-size: 0.9rem;
margin: var(--cf7-spacing-lg) 0 0;
padding: var(--cf7-spacing-md);
text-align: center;
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output {
background-color: rgba(220, 50, 50, 0.05);
border-color: var(--cf7-error);
}
.wpcf7 form.sent .wpcf7-response-output {
background-color: rgba(70, 180, 80, 0.05);
border-color: var(--cf7-success);
}
.screen-reader-response {
border: 0;
clip-path: inset(100%);
height: 1px;
margin: 0;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.wpcf7 .ajax-loader {
background-color: transparent !important;
background-image: none !important;
height: 20px;
margin-left: 10px;
position: relative;
width: 20px;
}
.wpcf7 .ajax-loader::before {
animation: wpcf7-spin 0.8s infinite linear;
border: 2px solid #ccc;
border-radius: 50%;
border-top-color: var(--cf7-primary);
box-sizing: border-box;
content: '';
height: 20px;
left: 50%;
margin-left: -10px;
margin-top: -10px;
position: absolute;
top: 50%;
width: 20px;
}
@keyframes wpcf7-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes formFadeIn {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ============================================
10. MEDIA QUERIES
============================================ */
/* Extra small devices (phones) */
@media (max-width: 480px) {
:root {
--container-padding: 10px;
}
.logo {
max-width: 100px;
}
.logo-link {
margin-right: 10px;
}
.site-branding {
margin-bottom: 1rem;
}
.site-header .site-container {
flex-direction: column;
text-align: center;
}
.left-menu .current-menu-ancestor::before {
top: 0;
margin-top: 0.95px;
}
}
/* Small devices (landscape phones) */
@media (max-width: 576px) {
.footer-locations {
align-items: flex-start;
flex-direction: column;
gap: 0.5rem;
}
.site-title-wrapper {
padding-right: 5px
}
.footer-locations h3 {
margin-bottom: 0.5rem;
}
.jahtu-cta-call-button,
.jahtu-cta-form-button,
.jahtu-cta-info-box {
width: 90%;
}
.jahtu-cta-container {
margin: 15px 12px;
padding: 20px 12px;
}
.jahtu-cta-title {
font-size: 20px;
}
.wpcf7 {
max-width: 540px;
width: 100%;
}
.wpcf7 input[type="submit"] {
min-width: 180px;
}
}
/* Medium devices (tablets) */
@media (max-width: 767px) {
.post_image {
float: none;
margin: 0 0 1rem;
max-width: 100%;
}
.footer-bottom {
align-items: center;
flex-direction: column;
text-align: center;
}
.footer-column {
flex-basis: 100%;
}
.footer-column.footer-logo {
margin-right: 0;
}
.footer-copyright,
.footer-nav-links {
margin-bottom: 0.5rem;
text-align: center;
}
.jn-yacht-offer {
padding: 1rem;
}
.logo {
max-width: 120px;
}
.logo-link {
margin-right: 15px;
}
.site-footer .logo-container img,
.site-footer .logo-container svg {
width: 100px;
}
.yacht-actions {
flex-direction: column;
gap: 10px;
}
.book-button,
.details-link {
text-align: center;
width: 100%;
}
/*.yacht-image {
height: 180px;
} -> aizkomentēts 17.06.25 */
.yacht-content {
padding: 15px;
}
.yacht-title {
font-size: 1.3rem;
}
.wpcf7 {
max-width: 720px;
}
.wpcf7 .two-columns {
display: flex;
flex-wrap: wrap;
gap: var(--cf7-spacing-md);
}
.wpcf7 .two-columns p {
flex: 0 0 calc(50% - var(--cf7-spacing-md)/2);
}
}
/* Large devices (desktops) */
@media (min-width: 768px) {
.yacht-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Extra large devices (large desktops) */
@media (min-width: 992px) {
.yacht-grid {
grid-template-columns: repeat(3, 1fr);
}
.wpcf7 {
max-width: 960px;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 textarea,
.wpcf7 select {
font-size: 1.05rem;
}
.wpcf7 p {
font-size: 1.05rem;
}
}
/* Special device sizes */
@media (min-width: 768px) and (max-width: 991px) {
.footer-columns {
gap: 8px;
}
.footer-contact div:last-child {
display: flex;
align-items: center;
}
.footer-contact div:last-child h3 {
margin-bottom: 0;
margin-right: 1rem;
}
}
@media (min-width: 769px) and (max-width: 991px) {
.left-sidebar {
flex: 0 0 200px;
}
}
@media (max-width: 900px) {
.content-area,
.left-sidebar,
.right-sidebar {
flex: 0 0 100%;
margin-bottom: 20px;
max-width: 100%;
padding: 15px;
}
.content-area {
order: 2;
}
.left-sidebar {
order: 1;
}
.right-sidebar {
order: 3;
}
.site-content-container {
flex-direction: column;
gap: 0;
}
}
@media (max-width: 1024px) {
:root {
--sidebar-left-width: 180px;
--sidebar-right-width: 250px;
}
.footer-column.footer-logo {
margin-right: -40px;
}
}
@media (min-width: 1200px) {
.site-container {
/* aizkomentēts 29/05/2025
padding-left: 10px;
padding-right: 10px;*/
padding-left: 0px;
padding-right: 0px;
}
.site-footer .logo-container img,
.site-footer .logo-container svg {
width: 120px;
}
.wpcf7 {
max-width: 70%;
}
}
/* Small mobile screens - extra adjustments */
@media (max-width: 350px) {
.jahtu-cta-info-box {
flex-direction: column;
padding: 12px;
text-align: center;
}
.jahtu-cta-info-content {
text-align: center;
}
.jahtu-cta-info-icon {
margin-bottom: 8px;
margin-right: 0;
}
}
@media (max-width: 400px) {
.jnn-yacht-image-wrapper {
height: 160px;
}
.jnn-yacht-price-container {
text-align: center;
}
.jnn-yacht-specs-list {
padding-left: 10px;
}
}
@media (max-width: 629px) {
.jnn-yacht-widget {
max-width: 300px;
width: 100%;
}
.jnn-yacht-widgets-container {
justify-content: center;
}
}
/* Special media queries for specific components */
@media (prefers-reduced-motion: reduce) {
.wpcf7,
.wpcf7 input,
.wpcf7 textarea,
.wpcf7 select,
.wpcf7 .ajax-loader::before {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
.jnn-yacht-widget,
.jnn-yacht-image {
transition: none;
}
}
@media (prefers-color-scheme: dark) {
body.supports-dark-theme .wpcf7 {
--cf7-background: #2a2a2a;
--cf7-border: #444;
--cf7-error: #ff6b6b;
--cf7-input-background: #333;
--cf7-success: #6bff98;
--cf7-text: #e0e0e0;
--cf7-text-light: #aaa;
}
body.supports-dark-theme .wpcf7 input[type="text"],
body.supports-dark-theme .wpcf7 input[type="email"],
body.supports-dark-theme .wpcf7 input[type="url"],
body.supports-dark-theme .wpcf7 input[type="tel"],
body.supports-dark-theme .wpcf7 input[type="number"],
body.supports-dark-theme .wpcf7 input[type="date"],
body.supports-dark-theme .wpcf7 textarea,
body.supports-dark-theme .wpcf7 select {
background-color: var(--cf7-input-background);
box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.3);
color: #e0e0e0;
}
body.supports-dark-theme .wpcf7 select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23aaaaaa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}
}
/* ============================================
11. UTILITY CLASSES
============================================ */
/* Connection status indicator */
.connection-status {
background-color: rgba(255, 0, 0, 0.8);
color: white;
display: none;
font-weight: bold;
left: 0;
padding: 10px;
position: fixed;
right: 0;
text-align: center;
top: 0;
z-index: 9999;
}
/* ============================================
12. MENU & NAVIGATION
============================================ */
/* --------- Base Navigation Elements --------- */
/* Main Navigation - Desktop */
.header-navigation-wrapper {
background-color: transparent;
margin-bottom: 20px;
border-top: none;
margin-top: 0 !important;
min-height: 55px
}
.main-navigation,
.header-navigation {
width: 100%;
margin-bottom: 0;
background-color: transparent;
position: relative;
border-bottom: 1px solid #e0e0e0 /*AZ pievienots 01.04.*/
}
.main-navigation ul,
.header-navigation ul.header-nav-menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.main-navigation li,
.header-navigation li {
position: relative;
}
.main-navigation a,
.header-navigation a {
display: block;
padding: 12px 10px;
color: var(--color-primary, #0057a8);
text-decoration: none;
text-transform: uppercase;
font-weight: 600;
position: relative;
transition: color 0.3s ease;
}
/* Hover effect for navigation links */
.main-navigation a:after,
.header-navigation a:after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 3px;
background-color: var(--color-secondary, #f60);
transition: all 0.3s ease;
transform: translateX(-50%);
}
.main-navigation a:hover:after,
.main-navigation a:focus:after,
.header-navigation a:hover:after,
.header-navigation a:focus:after {
width: 70%;
}
.main-navigation a:hover,
.main-navigation a:focus,
.header-navigation a:hover,
.header-navigation a:focus {
background-color: transparent;
color: var(--color-primary, #0057a8);
text-decoration: none;
}
/* Desktop sub-menu styling */
.main-navigation .sub-menu,
.header-navigation .sub-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #fff;
min-width: 200px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
z-index: 100;
border-radius: 0 0 4px 4px;
}
.main-navigation li:hover > .sub-menu,
.header-navigation li:hover > .sub-menu {
display: block;
}
.main-navigation .sub-menu li,
.header-navigation .sub-menu li {
width: 100%;
border-bottom: 1px solid #f0f0f0;
}
.main-navigation .sub-menu li:last-child,
.header-navigation .sub-menu li:last-child {
border-bottom: none;
}
.main-navigation .sub-menu a,
.header-navigation .sub-menu a {
padding: 10px 15px;
}
.main-navigation .sub-menu a:after,
.header-navigation .sub-menu a:after {
display: none;
}
/* --------- Mobile Menu Toggle Button --------- */
.mobile-menu-toggle {
position: fixed;
top: calc(var(--header-height, 348px) / 2 - 22px);
left: 15px;
z-index: 9999;
width: 44px;
height: 44px;
/*background-color: var(--color-primary, #0057a8);*/
background-color: #ffffff !important; /* White background */
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
display: none;
align-items: center;
justify-content: center;
/*box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);*/
transition: background-color 0.3s ease, transform 0.2s ease, left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important; /* Keep shadow */
border: 1px solid #e0e0e0 !important; /* Light border for definition */
}
.mobile-menu-toggle:hover,
.mobile-menu-toggle:focus {
/*background-color: var(--color-primary-dark, #003d7a);*/
background-color: #f8f8f8 !important;
/*outline: none;*/
}
.mobile-menu-toggle:active {
transform: scale(0.95);
}
.mobile-menu-toggle:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
/* Hamburger icon */
.hamburger-icon {
position: relative;
width: 24px;
height: 2px;
/*background-color: #fff;*/
background-color: var(--color-primary, #0057a8)!important;
display: block;
transition: background-color 0.3s ease;
}
.hamburger-icon:before,
.hamburger-icon:after {
content: '';
position: absolute;
width: 24px;
height: 2px;
/*background-color: #fff;*/
background-color: var(--color-primary, #0057a8)!important;
left: 0;
transition: transform 0.3s ease, top 0.3s ease, bottom 0.3s ease;
}
.hamburger-icon:before {
top: -8px;
}
.hamburger-icon:after {
bottom: -8px;
}
/* X icon when menu is open */
.mobile-menu-toggle.is-active .hamburger-icon {
background-color: transparent !important;
}
.mobile-menu-toggle.is-active .hamburger-icon:before {
top: 0;
transform: rotate(45deg);
background-color: var(--color-primary, #0057a8)!important;
}
.mobile-menu-toggle.is-active .hamburger-icon:after {
bottom: 0;
transform: rotate(-45deg);
background-color: var(--color-primary, #0057a8)!important;
}
/* Position the button to move with the sidebar when open */
.mobile-menu-toggle.is-active {
left: calc(85% - 54px);
/*background-color: transparent;*/
/*box-shadow: none;*/
background-color: #ffffff !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}
/* --------- Left Sidebar Navigation --------- */
.left-sidebar {
background-color: var(--color-sidebar-bg, #f3f7fa);
border-radius: 4px;
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 85%;
max-width: 300px;
padding: 15px;
overflow: hidden;
z-index: 999;
transform: translateX(-100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
-webkit-backface-visibility: hidden;
}
.left-sidebar.is-active {
transform: translateX(0);
box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
}
.left-sidebar-content {
height: 100%;
display: flex;
flex-direction: column;
font-size: 0.9rem;
overflow-y: auto;
scrollbar-width: thin;
scrollbar-color: rgba(0, 87, 168, 0.5) transparent;
transition: transform 0.3s ease;
}
.left-sidebar-content::-webkit-scrollbar {
width: 6px;
}
.left-sidebar-content::-webkit-scrollbar-thumb {
background-color: rgba(0, 87, 168, 0.5);
border-radius: 3px;
}
.left-sidebar-content::-webkit-scrollbar-track {
background: transparent;
}
.left-sidebar-content h3 {
font-size: 1.2rem;
padding-top: 0.8rem;
}
/* Left sidebar menu items */
.left-menu,
.left-sidebar ul {
list-style: none;
margin: 0;
padding: 0;
}
.left-menu li {
position: relative;
margin-bottom: 3px;
padding-left: 14px;
}
.left-menu li::before {
content: '';
position: absolute;
left: 0;
top: 28%;
width: 14px;
height: 14px;
background-image: url(/wp-content/themes/jahtu-noma/assets/images/chevron-simple.svg);
background-position: center;
background-repeat: no-repeat;
background-size: contain;
opacity: 0.8;
transition: opacity 0.2s ease;
}
.left-menu a {
color: var(--color-primary, #0057a8);
display: block;
font-size: 1rem;
padding: 10px 0;
text-decoration: none;
transition: color 0.3s ease;
}
.left-menu a:hover,
.left-menu a:focus {
color: var(--color-secondary, #f60);
text-decoration: none;
}
.left-menu a:focus,
.submenu-toggle:focus {
outline: 2px solid var(--color-primary, #0057a8);
outline-offset: 2px;
}
.left-menu a:focus-visible,
.submenu-toggle:focus-visible {
outline: 3px solid var(--color-secondary, #f60);
outline-offset: 3px;
}
/* Current menu item styling */
.left-menu .current-menu-item > a,
.left-menu .current-menu-ancestor > a {
color: var(--color-secondary, #f60);
font-weight: 700;
}
.left-menu .current-menu-item::before,
.left-menu .current-menu-ancestor::before {
opacity: 1;
}
/* Submenu handling */
.left-menu .menu-item-has-children {
position: relative;
}
.left-menu .menu-item-has-children::before {
top:4% !important
}
.left-menu .menu-item-has-children > a {
display: block;
width: calc(100% - 40px);
padding-right: 40px;
}
.left-menu .sub-menu {
list-style: none;
margin: 0;
display: none;
overflow: hidden;
}
.left-menu .sub-menu li {
/*margin-bottom: 4px;*/
padding-left: 16px;
position: relative;
}
.left-menu .sub-menu li::before {
background-image: url(/wp-content/themes/jahtu-noma/assets/images/chevron-double.svg);
width: 12px;
height: 12px;
left: 0;
top: 18% !important;
position: absolute;
}
/* Submenu toggle button */
.submenu-toggle {
position: absolute;
right: 0;
top: 5px;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
cursor: pointer;
z-index: 2;
}
.submenu-toggle::after {
content: '+';
color: var(--color-primary, #0057a8);
font-size: 20px;
font-weight: 700;
transition: transform 0.3s ease;
will-change: transform;
}
.submenu-toggle[aria-expanded="true"]::after {
content: '−';
}
/* Overlay for mobile menu */
.sidebar-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(2px);
z-index: 998;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
.sidebar-overlay.is-visible {
opacity: 1;
visibility: visible;
}
/* Prevent body scrolling when menu is open */
body.sidebar-open {
overflow: hidden;
}
/* --------- Mobile-Specific Styles --------- */
@media (max-width: 767px) {
/* Header navigation mobile styles */
.header-navigation ul#header-menu,
#site-navigation ul#primary-menu,
.main-navigation ul {
display: none;
flex-direction: column;
position: absolute;
top: 100%;
left: 0;
right: 0;
background-color: #fff;
z-index: 100;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
padding: 10px 0;
border-bottom: 1px solid #e0e0e0;
}
/* Ensure proper contrast on all device sizes */
@media (max-width: 576px) {
.mobile-menu-toggle,
.header-menu-toggle {
border: 1px solid #e5e5e5 !important; /* Slightly more visible border on small screens */
}
}
/* Show menu when toggled */
.header-navigation ul#header-menu.toggled,
#site-navigation ul#primary-menu.toggled,
.main-navigation ul.toggled {
display: flex;
}
/* Style the toggle button */
.header-menu-toggle,
#site-navigation .menu-toggle {
display: block;
background-color: var(--color-primary, #0057a8);
color: #fff;
border: none;
padding: 8px 12px;
border-radius: 4px;
cursor: pointer;
margin-left: auto;
margin-bottom: 10px;
font-size: 16px;
}
.header-toggle-icon,
.menu-toggle-icon {
display: inline-block;
width: 18px;
height: 2px;
/*background-color: #fff;*/
background-color: #0057a8 !important;
position: relative;
vertical-align: middle;
transition: background-color 0.3s ease;
}
.header-toggle-icon:before,
.header-toggle-icon:after,
.menu-toggle-icon:before,
.menu-toggle-icon:after {
content: '';
position: absolute;
left: 0;
width: 100%;
height: 2px;
background-color: #fff;
transition: transform 0.3s ease;
}
.header-toggle-icon:before,
.menu-toggle-icon:before {
top: -6px;
background-color: #0057a8 !important;
}
.header-toggle-icon:after,
.menu-toggle-icon:after {
bottom: -6px;
background-color: #0057a8 !important;
}
/* X icon when menu is open */
.header-menu-toggle[aria-expanded="true"] .header-toggle-icon,
#site-navigation .menu-toggle[aria-expanded="true"] .menu-toggle-icon {
background-color: transparent !important;
}
.header-menu-toggle[aria-expanded="true"] .header-toggle-icon:before,
#site-navigation .menu-toggle[aria-expanded="true"] .menu-toggle-icon:before {
transform: rotate(45deg);
top: 0;
}
.header-menu-toggle[aria-expanded="true"] .header-toggle-icon:after,
#site-navigation .menu-toggle[aria-expanded="true"] .menu-toggle-icon:after {
transform: rotate(-45deg);
bottom: 0;
}
.header-menu-toggle[aria-expanded="true"] .header-toggle-icon:before,
.header-menu-toggle[aria-expanded="true"] .header-toggle-icon:after,
#site-navigation .menu-toggle[aria-expanded="true"] .menu-toggle-icon:before,
#site-navigation .menu-toggle[aria-expanded="true"] .menu-toggle-icon:after {
background-color: #0057a8 !important; /* Keep blue color for X */
}
/* Header menu item styling */
.header-navigation li,
#site-navigation li,
.main-navigation li {
width: 100%;
border-bottom: 1px solid #f0f0f0;
}
.header-navigation li:last-child,
#site-navigation li:last-child,
.main-navigation li:last-child {
border-bottom: none;
}
.header-navigation a,
#site-navigation a,
.main-navigation a {
padding: 12px 20px;
display: block;
width: 100%;
}
/* Header submenu styling */
.header-navigation .sub-menu,
#site-navigation .sub-menu,
.main-navigation .sub-menu {
display: none;
position: static;
width: 100%;
box-shadow: none;
padding-left: 20px;
background-color: #f5f5f5;
border-radius: 0;
}
.header-navigation .sub-menu.toggled,
#site-navigation .sub-menu.toggled,
.main-navigation .sub-menu.toggled {
display: block;
}
.header-submenu-toggle,
#site-navigation .submenu-toggle {
position: absolute;
right: 10px;
top: 8px;
background: transparent;
border: none;
color: var(--color-primary, #0057a8);
font-size: 20px;
padding: 5px 10px;
cursor: pointer;
}
/* Display mobile toggle button */
.mobile-menu-toggle {
display: flex;
}
.header-menu-toggle,
#site-navigation .menu-toggle {
background-color: #ffffff !important; /* White background */
color: #0057a8 !important; /* Blue text color if any */
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important; /* Keep shadow */
border: 1px solid #e0e0e0 !important; /* Light border for definition */
}
/* Left sidebar menu mobile adjustments */
.left-menu li::before {
top: 36%;
}
.left-menu .sub-menu li::before {
top: 48%;
}
.left-menu .current-menu-ancestor::before {
top: 0;
margin-top: 0.2rem;
}
/* Force left sidebar to be fixed position on mobile */
.left-sidebar {
position: fixed !important;
width: 85% !important;
max-width: 300px !important;
will-change: transform;
}
/* Fix for iOS Safari */
#left-sidebar, .left-sidebar {
position: fixed !important;
top: 0 !important;
left: 0 !important;
height: 100% !important;
max-height: -webkit-fill-available !important;
width: 85% !important;
max-width: 300px !important;
transform: translateX(-100%) !important;
-webkit-transform: translateX(-100%) !important;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
background-color: #f3f7fa !important;
z-index: 999 !important;
margin: 0 !important;
visibility: visible !important;
display: block !important;
}
#left-sidebar-content, .left-sidebar-content {
height: auto !important;
min-height: 100% !important;
padding-bottom: 60px !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
#left-sidebar.is-active, .left-sidebar.is-active {
transform: translateX(0) !important;
-webkit-transform: translateX(0) !important;
display: block !important;
visibility: visible !important;
}
/* Force menu items to display properly */
.left-sidebar.is-active .menu-item,
.left-sidebar.is-active li,
.left-sidebar.is-active ul {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: relative !important;
z-index: 3 !important;
}
.left-sidebar.is-active a,
.left-sidebar.is-active button {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
position: relative !important;
z-index: 4 !important;
}
/* Left submenu more visible */
.left-menu .sub-menu {
padding-left: 5px;
margin-left: 0;
}
.left-menu .sub-menu li::before {
top: 1.1rem;
}
}
/* Extra small devices */
@media (max-width: 430px) {
.left-menu .current-menu-ancestor::before {
top: 0;
margin-top: 0.95px;
}
}
/* iOS-specific fixes */
@media screen and (max-width: 767px) {
/* iOS detection classes */
.ios-device #left-sidebar,
.ios-device .left-sidebar {
position: fixed !important;
top: 0 !important;
left: 0 !important;
height: 100% !important;
max-height: -webkit-fill-available !important;
width: 85% !important;
max-width: 300px !important;
transform: translateX(-100%) !important;
-webkit-transform: translateX(-100%) !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
will-change: transform !important;
-webkit-backface-visibility: hidden !important;
}
/* Active state - different approach for iOS */
.ios-device #left-sidebar.is-active,
.ios-device .left-sidebar.is-active {
transform: none !important;
-webkit-transform: none !important;
left: 0 !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Force menu content visibility */
.ios-device .left-sidebar.is-active .left-sidebar-content,
.ios-device .left-sidebar-content.is-active {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
min-height: 100% !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
transform: none !important;
-webkit-transform: none !important;
}
/* Fix hamburger positioning on active state */
.mobile-menu-toggle.is-active {
left: calc(85% - 54px) !important;
right: 10px !important;
}
/* Make sure the toggle is always visible */
#mobile-menu-toggle {
display: flex !important;
visibility: visible !important;
opacity: 1 !important;
position: fixed !important;
z-index: 99999 !important;
width: 44px !important;
height: 44px !important;
transition: left 0.3s ease, right 0.3s ease !important;
}
/* Fix for fixed positioning in iOS */
body.ios-device.sidebar-open {
position: fixed !important;
width: 100% !important;
height: 100% !important;
overflow: hidden !important;
}
/* Fix for Safari viewport height issues */
html.ios-device {
height: -webkit-fill-available !important;
}
body.ios-device {
min-height: 100vh !important;
min-height: -webkit-fill-available !important;
}
/* Ensure the overlay is visible and covers everything */
#sidebar-overlay, .sidebar-overlay {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background-color: rgba(0, 0, 0, 0.5) !important;
backdrop-filter: blur(2px) !important;
-webkit-backdrop-filter: blur(2px) !important;
z-index: 998 !important;
transition: opacity 0.3s ease, visibility 0.3s ease !important;
}
}
/* Desktop styles */
@media (min-width: 768px) {
/* Hide mobile toggle on desktop */
.mobile-menu-toggle {
display: none;
}
/* Position the left sidebar as part of layout on desktop */
.left-sidebar {
flex: 0 0 var(--sidebar-left-width, 200px);
max-width: none;
order: 1;
position: static;
transform: none;
transition: none;
width: auto;
padding: 15px;
}
/* Fix submenu display on desktop */
.left-menu .menu-item-has-children > a {
padding-right: 0;
}
.left-menu .sub-menu {
display: block;
max-height: none;
}
.left-menu a {
font-size: 0.9rem;
padding: 5px 0;
}
.left-sidebar-content {
height: auto;
max-height: none;
transform: none;
}
/* Hide mobile elements on desktop */
.mobile-menu-toggle,
.sidebar-overlay,
.submenu-toggle {
display: none;
}
/* Hide header menu toggles on desktop */
.header-menu-toggle,
#site-navigation .menu-toggle {
display: none;
}
.header-navigation ul#header-menu,
#site-navigation ul#primary-menu {
display: flex;
}
.header-submenu-toggle,
#site-navigation .submenu-toggle {
display: none;
}
}
/* Reduce animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
.left-sidebar,
.left-sidebar-content,
.sidebar-overlay,
.hamburger-icon,
.hamburger-icon:before,
.hamburger-icon:after,
.submenu-toggle::after,
.mobile-menu-toggle,
.header-navigation a:after,
.main-navigation a:after {
transition-duration: 0.1s;
}
}
/* ============================================
COMPACT YACHT PRICING PAGE STYLES
Mobile-first, optimized for Core Web Vitals
============================================ */
/* Container and base layout - more compact */
.ypp-container,
.yacht-listings-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 0px;
/* aizkomentēts 29/05/2025
padding: 0 15px; */
}
.yacht-listings-content {
width: 100%;
padding: 15px 0;
background-color: #fff;
}
/* Page introduction - compact spacing */
.ypp-page-intro {
/*margin: 1.5rem 0 1rem;*/
padding: 1rem;
background-color: var(--color-light-blue, #ebf7ff);
border-radius: var(--border-radius, 8px);
text-align: center;
}
.ypp-page-intro a {
text-decoration: underline
}
.ypp-page-intro h1 {
color: var(--color-primary, #0057a8);
font-size: clamp(1.4rem, 4vw, 1.8rem);
margin-bottom: 0.5rem;
position: relative;
}
.ypp-page-intro h1::after {
content: '';
display: block;
width: 60px;
height: 2px;
background-color: var(--color-secondary, #f60);
margin: 0.5rem auto 0;
}
.ypp-page-intro p {
margin: 0;
font-size: 1rem;
line-height: 1.5;
}
/* Promotional banner - more compact */
.ypp-promo-banner {
background-color: #fc6b03;
color: white;
padding: 12px 20px;
margin: 1rem 0;
border-radius: 4px;
text-align: center;
}
.ypp-promo-content p {
margin: 0;
font-size: 1.1rem;
line-height: 1.3;
}
.ypp-promo-link {
color: #266ab0;
background-color: white;
padding: 4px 12px;
border-radius: 20px;
text-decoration: none;
font-weight: 600;
margin-left: 8px;
display: inline-block;
font-size: 0.95rem;
}
/* Yacht sections - significantly reduced spacing */
.ypp-yacht-section {
margin: 1.5rem 0;
padding: 1.5rem 0;
/*border-bottom: 1px solid #e8e8e8;*/
}
.ypp-yacht-section:last-of-type {
border-bottom: none;
}
.ypp-page-header {
margin: 1rem 0;
position: relative;
}
.ypp-page-header h2 {
color: var(--color-primary, #0057a8);
font-size: clamp(1.3rem, 3.5vw, 1.6rem);
margin-bottom: 0.5rem;
position: relative;
display: inline-block;
}
.ypp-page-header h2::after {
content: '';
display: block;
width: 50%;
height: 2px;
background-color: var(--color-secondary, #f60);
position: absolute;
bottom: -4px;
left: 0;
}
.ypp-booking-link {
color:#C75300;
text-decoration: underline;
font-weight: 600;
margin-left: 8px;
transition: var(--transition-standard, all 0.3s ease);
white-space: nowrap;
font-size: 0.9rem
}
.ypp-booking-link:hover {
color: var(--color-secondary-dark, #d45500);
text-decoration: underline
}
.ypp-yacht-gallery {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 10px;
margin: 1rem 0;
}
.ypp-yacht-gallery img {
width: 100%;
height: auto;
border-radius: var(--border-radius, 8px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
aspect-ratio: 16/9;
object-fit: cover;
}
.ypp-yacht-gallery img:hover {
transform: scale(1.02);
}
/* Yacht description - compact spacing */
.ypp-yacht-description {
margin: 1rem 0;
line-height: 1.6;
font-size: 1rem;
}
.ypp-yacht-description a {
color: var(--color-primary, #0057a8);
text-decoration: none;
font-weight: 600;
transition: var(--transition-standard, all 0.3s ease);
}
.ypp-yacht-description a:hover {
color: var(--color-secondary, #f60);
}
/* Contact info - more compact */
.ypp-contact-info {
background-color: var(--color-light-blue, #ebf7ff);
padding: 1rem;
border-radius: var(--border-radius, 8px);
margin: 1rem 0;
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.3rem 1rem;
}
.ypp-contact-info p {
margin: 0;
font-size: 0.95rem;
}
.ypp-contact-info a {
color: var(--color-primary, #0057a8);
text-decoration: none;
font-weight: 600;
transition: var(--transition-standard, all 0.3s ease);
}
.ypp-contact-info a:hover {
color: var(--color-secondary, #f60);
}
/* Price section - compact spacing */
.ypp-price-section {
margin: 1.5rem 0;
}
.ypp-price-title {
text-align: center;
margin-bottom: 1rem;
color: var(--color-primary, #0057a8);
font-size: clamp(1.2rem, 3vw, 1.4rem);
text-transform: uppercase;
letter-spacing: 0.5px;
position: relative;
}
.ypp-price-title::after {
content: '';
display: block;
width: 60px;
height: 2px;
background-color: var(--color-secondary, #f60);
margin: 0.5rem auto 0;
}
/* Price table - more compact */
.ypp-price-table-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin-bottom: 1rem;
border-radius: var(--border-radius, 8px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.ypp-price-table {
width: 100%;
border-collapse: collapse;
border-radius: var(--border-radius, 8px);
overflow: hidden;
font-size: 0.9rem;
}
.ypp-price-table th,
.ypp-price-table td {
padding: 10px 12px;
text-align: center;
border: 1px solid var(--color-border, #ddd);
}
.ypp-price-table th {
background-color: var(--color-primary, #0057a8);
color: white;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.3px;
font-size: 0.85rem;
white-space: nowrap;
}
.ypp-price-table tr:hover {
background-color: rgba(0, 87, 168, 0.05);
}
.ypp-duration-cell {
font-weight: 600;
background-color: #f8f9fa;
text-align: left;
min-width: 120px;
}
.ypp-price-cell {
font-weight: 600;
color: var(--color-primary, #0057a8);
}
.ypp-weekday {
background-color: var(--color-weekday, #f1f8ff)
}
.ypp-weekend {
background-color: var(--color-weekend, #f7f9ff)
}
.ypp-special {
background-color:#fff3e0;
font-weight:600;
color:#B04A00
}
.ypp-price-note {
margin: 0.5rem 0;
font-style: italic;
color: var(--color-text-light, #666);
line-height: 1.4;
font-size: 0.9rem
}
.ypp-price-note a {
color: var(--color-primary, #0057a8);
text-decoration: underline;
transition: var(--transition-standard, all 0.3s ease)
}
.ypp-price-note a:hover {
color: var(--color-secondary, #f60);
text-decoration: underline;
}
.ypp-cta-buttons {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin: 1.5rem 0;
justify-content: center;
}
.ypp-cta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0.7rem 1.2rem;
background-color: var(--color-primary, #0057a8);
color: white;
text-decoration: none;
border-radius: 25px;
font-weight: 600;
font-size: 0.9rem;
transition: var(--transition-standard, all 0.3s ease);
box-shadow: 0 3px 8px rgba(0, 87, 168, 0.3);
}
.ypp-cta-btn:hover {
background-color: var(--color-primary-dark, #003d7a);
transform: translateY(-1px);
box-shadow: 0 4px 10px rgba(0, 87, 168, 0.4);
color: white;
text-decoration: none;
}
.ypp-cta-btn.ypp-secondary {
background-color:#C75300
}
.ypp-cta-btn.ypp-secondary:hover {
background-color: var(--color-secondary-dark, #d45500);
}
.ypp-general-info {
margin: 2rem 0 1rem;
padding: 1.5rem;
background-color: var(--color-light-gray, #f4f4f4);
border-radius: var(--border-radius, 8px);
}
.ypp-general-info h2 {
color: var(--color-primary, #0057a8);
font-size: 1.4rem;
margin-bottom: 1rem;
text-align: center;
}
.ypp-contact-details {
margin-bottom: 1rem;
text-align: center;
}
.ypp-contact-details p {
margin: 0.3rem 0;
font-size: 0.95rem;
}
.ypp-contact-details a {
color: var(--color-primary, #0057a8);
text-decoration: none;
font-weight: 600;
}
.ypp-contact-details a:hover {
color: var(--color-secondary, #f60);
text-decoration: underline;
}
.ypp-general-notes ul {
list-style: none;
padding: 0;
margin: 0;
}
.ypp-general-notes li {
padding: 0.3rem 0;
padding-left: 1.2rem;
position: relative;
font-size: 0.9rem;
line-height: 1.4;
}
.ypp-general-notes li::before {
content: '→';
position: absolute;
left: 0;
color: var(--color-secondary, #f60);
font-weight: bold;
}
.ypp-general-notes a {
color: var(--color-primary, #0057a8);
text-decoration: none;
font-weight: 600;
}
.ypp-general-notes a:hover {
color: var(--color-secondary, #f60);
text-decoration: underline;
}
/* Divider between yacht sections */
.ypp-divider {
border: none;
border-top: 2px solid #e8e8e8;
margin: 0 0 1.5rem 0;
width: 100%;
}
/* Responsive design - compact breakpoints */
@media (max-width: 576px) {
.ypp-container,
.yacht-listings-container {
padding: 0 10px;
}
.ypp-yacht-section {
margin: 1rem 0;
padding: 1rem 0;
}
.ypp-page-header h2 {
display: block;
margin-bottom: 1rem;
font-size: 1.3rem;
}
.ypp-booking-link {
display: block;
margin: 0.5rem 0 0 0;
font-size: 0.85rem;
}
.ypp-yacht-gallery {
grid-template-columns: 1fr;
gap: 8px;
}
.ypp-price-table th,
.ypp-price-table td {
padding: 8px 6px;
font-size: 0.8rem;
}
.ypp-duration-cell {
min-width: 90px;
}
.ypp-contact-info {
flex-direction: column;
align-items: flex-start;
text-align: left;
padding: 0.8rem;
}
.ypp-cta-buttons {
flex-direction: column;
gap: 8px;
}
.ypp-cta-btn {
width: 100%;
text-align: center;
padding: 0.6rem 1rem;
font-size: 0.85rem;
}
.ypp-general-info {
padding: 1rem;
margin: 1.5rem 0 0.5rem;
}
}
@media (min-width: 577px) and (max-width: 768px) {
.ypp-yacht-gallery {
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
.ypp-price-table th,
.ypp-price-table td {
padding: 9px 8px;
font-size: 0.85rem;
}
.ypp-cta-buttons {
justify-content: center;
}
.ypp-cta-btn {
min-width: 180px;
}
}
@media (min-width: 769px) and (max-width: 992px) {
.ypp-yacht-gallery {
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.ypp-contact-info {
flex-direction: row;
align-items: center;
}
}
@media (min-width: 993px) {
.ypp-yacht-section {
margin: 2rem 0;
padding: 1.5rem 0;
}
.ypp-yacht-gallery {
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.ypp-price-table {
font-size: 0.95rem;
}
.ypp-price-table th,
.ypp-price-table td {
padding: 12px 15px;
}
}
/* Print styles - optimized for compact printing */
@media print {
.ypp-cta-buttons,
.ypp-promo-banner {
display: none;
}
.ypp-yacht-gallery img {
max-width: 25%;
break-inside: avoid;
}
.ypp-yacht-section {
break-inside: avoid;
margin: 1rem 0;
padding: 0.5rem 0;
}
.ypp-price-table {
box-shadow: none;
font-size: 0.8rem;
}
.ypp-price-table th {
background-color: #eee !important;
color: black !important;
}
.ypp-contact-info,
.ypp-general-info {
background-color: transparent;
border: 1px solid #ddd;
padding: 0.5rem;
}
}
/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
.ypp-yacht-gallery img,
.ypp-cta-btn {
transition: none;
}
}
/* Dark mode support */
@media (prefers-color-scheme: dark) {
body.supports-dark-theme .ypp-price-table th {
background-color: #1a365d;
}
body.supports-dark-theme .ypp-contact-info,
body.supports-dark-theme .ypp-general-info {
background-color: #2d3748;
color: #e2e8f0;
}
}
/* ========================
CORPORATE CONTACT STYLES
======================== */
.yev-cta-container {
max-width: 630px;
margin: 30px auto;
background: linear-gradient(135deg, #1e3a8a 0%, #3b82f6 100%);
border-radius: 16px;
padding: 40px 30px;
box-shadow: 0 10px 30px rgba(30, 58, 138, 0.3);
position: relative;
overflow: hidden;
color: white;
font-family: 'Arial', sans-serif;
}
/* Dekoratīvi SVG elementi fonā */
.yev-cta-container::before {
content: '';
position: absolute;
top: -50px;
right: -50px;
width: 200px;
height: 200px;
background: url('data:image/svg+xml;utf8,') no-repeat center;
background-size: contain;
}
.yev-cta-header {
text-align: center;
margin-bottom: 30px;
}
.yev-cta-title {
color: white;
font-size: 28px;
font-weight: bold;
margin-bottom: 10px;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.yev-cta-subtitle {
font-size: 16px;
opacity: 0.9;
line-height: 1.5;
}
.yev-contact-info {
display: flex;
flex-direction: column;
gap: 20px;
margin-top: 25px;
}
.yev-contact-item {
display: flex;
align-items: center;
gap: 15px;
padding: 15px 20px;
background: rgba(255, 255, 255, 0.15);
border-radius: 12px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
transition: all 0.3s ease;
text-decoration: none;
color: white;
}
.yev-contact-item:hover {
background: rgba(255, 255, 255, 0.25);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.yev-contact-icon {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.yev-contact-details {
flex: 1;
}
.yev-contact-label {
font-size: 12px;
opacity: 0.8;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 2px;
}
.yev-contact-value {
font-size: 18px;
font-weight: 600;
}
.yev-wave-decoration {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
background: url('data:image/svg+xml;utf8,') no-repeat center bottom;
background-size: cover;
}
@media (max-width: 480px) {
.yev-cta-container {
margin: 20px;
padding: 30px 20px;
}
.yev-cta-title {
font-size: 24px;
}
.yev-contact-item {
padding: 12px 15px;
}
.yev-contact-value {
font-size: 16px;
}
}
/* ========================
Foto stils in posts
======================== */
/* Post image container styling for optimal display */
.post-image-container {
margin: 1.5rem 0;
text-align: center;
max-width: 100%;
}
.responsive-image {
display: block;
width: 100%;
max-width: 630px;
margin: 0 auto;
}
.wp-image-responsive {
width: 100%;
height: auto;
border-radius: 0.5rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.wp-image-responsive:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.wp-element-caption {
margin-top: 0.5rem;
font-size: 0.9rem;
color: #666;
font-style: italic;
text-align: center;
line-height: 1.4;
}
/* Mobile-first responsive adjustments */
@media (max-width: 575px) {
.post-image-container {
margin: 1rem -15px; /* Extend to screen edges on mobile */
}
.wp-image-responsive {
border-radius: 0; /* Remove border radius on mobile for edge-to-edge */
}
}
@media (min-width: 576px) {
.post-image-container {
margin: 1.5rem 0;
}
}
@media (min-width: 768px) {
.post-image-container {
margin: 2rem 0;
}
.wp-element-caption {
font-size: 1rem;
}
}
/* Print styles for better printing experience */
@media print {
.wp-image-responsive {
border-radius: 0;
box-shadow: none;
max-width: 100%;
page-break-inside: avoid;
}
.wp-element-caption {
font-size: 0.8rem;
color: #000;
}
}
/* High contrast mode support for accessibility */
@media (prefers-contrast: high) {
.wp-image-responsive {
border: 1px solid #000;
}
}
/* Reduced motion support for accessibility */
@media (prefers-reduced-motion: reduce) {
.wp-image-responsive {
transition: none;
}
.wp-image-responsive:hover {
transform: none;
}
}
/* ============================================
CLEAN MINIMAL PAGINATION STYLES
Removed container styling and text buttons
============================================ */
/* Pagination Container - Minimal approach */
.pagination-container,
.custom-pagination {
margin: 2rem 0 1.5rem;
padding: 1rem 0;
text-align: center;
/* Removed: background, borders, and visual container styling */
}
/* Remove the decorative line at top */
.pagination-container::before,
.custom-pagination::before {
display: none;
}
/* Pagination List - Clean flexbox layout */
.pagination-container .page-numbers,
.custom-pagination .page-numbers {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 0.5rem;
}
/* Individual Pagination Items */
.pagination-container .page-numbers li,
.custom-pagination .page-numbers li {
margin: 0;
padding: 0;
}
/* Hide text-based previous/next buttons completely */
.pagination-container .page-numbers .prev,
.pagination-container .page-numbers .next,
.custom-pagination .page-numbers .prev,
.custom-pagination .page-numbers .next {
display: none !important;
}
/* Keep only if they contain just arrows - Target arrow-only navigation */
.pagination-container .page-numbers a[aria-label*="Previous"],
.pagination-container .page-numbers a[aria-label*="Next"],
.custom-pagination .page-numbers a[aria-label*="Previous"],
.custom-pagination .page-numbers a[aria-label*="Next"] {
display: inline-flex !important;
min-width: 40px !important;
background-color: transparent;
border: 1px solid var(--color-border, #ddd);
color: var(--color-primary, #0057a8);
}
/* Pagination Links - Clean minimal styling */
.pagination-container .page-numbers a,
.pagination-container .page-numbers span,
.custom-pagination .page-numbers a,
.custom-pagination .page-numbers span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0.5rem;
margin: 0;
border: 1px solid var(--color-border, #ddd);
border-radius: 6px;
background-color: transparent;
color: var(--color-primary, #0057a8);
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
line-height: 1;
transition: all 0.2s ease;
/* Removed: box-shadow and heavy styling */
}
/* Hover States - Subtle and clean */
.pagination-container .page-numbers a:hover,
.custom-pagination .page-numbers a:hover {
background-color: var(--color-primary, #0057a8);
color: #fff;
border-color: var(--color-primary, #0057a8);
text-decoration: none;
/* Removed: transform and heavy shadows */
}
/* Current Page Styling - Clear but not overwhelming */
.pagination-container .page-numbers .current,
.custom-pagination .page-numbers .current {
background-color: var(--color-secondary, #f60);
color: #fff;
border-color: var(--color-secondary, #f60);
font-weight: 700;
cursor: default;
}
/* Dots/Ellipsis Styling - Minimal treatment */
.pagination-container .page-numbers .dots,
.custom-pagination .page-numbers .dots {
background-color: transparent;
border: none;
color: var(--color-text-light, #666);
cursor: default;
font-weight: bold;
}
/* Focus States for Accessibility - Clean focus treatment */
.pagination-container .page-numbers a:focus,
.custom-pagination .page-numbers a:focus {
outline: 2px solid var(--color-secondary, #f60);
outline-offset: 2px;
background-color: var(--color-primary, #0057a8);
color: #fff;
border-color: var(--color-primary, #0057a8);
}
/* ============================================
RESPONSIVE BREAKPOINTS - MOBILE FIRST
============================================ */
/* Extra Small Devices (< 576px) */
@media (max-width: 575px) {
.pagination-container,
.custom-pagination {
margin: 1.5rem 0 1rem;
padding: 0.75rem 0;
}
.pagination-container .page-numbers,
.custom-pagination .page-numbers {
gap: 0.25rem;
}
.pagination-container .page-numbers a,
.pagination-container .page-numbers span,
.custom-pagination .page-numbers a,
.custom-pagination .page-numbers span {
min-width: 36px;
height: 36px;
font-size: 0.8rem;
}
/* Hide excessive page numbers on mobile */
.pagination-container .page-numbers li:nth-child(n+8),
.custom-pagination .page-numbers li:nth-child(n+8) {
display: none;
}
}
/* Small Devices (≥ 576px) */
@media (min-width: 576px) {
.pagination-container .page-numbers a,
.pagination-container .page-numbers span,
.custom-pagination .page-numbers a,
.custom-pagination .page-numbers span {
min-width: 42px;
height: 42px;
font-size: 0.85rem;
}
}
/* Medium Devices (≥ 768px) */
@media (min-width: 768px) {
.pagination-container,
.custom-pagination {
margin: 2.5rem 0 2rem;
padding: 1rem 0;
}
.pagination-container .page-numbers,
.custom-pagination .page-numbers {
gap: 0.75rem;
}
.pagination-container .page-numbers a,
.pagination-container .page-numbers span,
.custom-pagination .page-numbers a,
.custom-pagination .page-numbers span {
min-width: 44px;
height: 44px;
font-size: 0.9rem;
}
/* Show all page numbers on larger screens */
.pagination-container .page-numbers li,
.custom-pagination .page-numbers li {
display: block;
}
}
/* Large Devices (≥ 992px) */
@media (min-width: 992px) {
.pagination-container .page-numbers,
.custom-pagination .page-numbers {
gap: 1rem;
}
.pagination-container .page-numbers a,
.pagination-container .page-numbers span,
.custom-pagination .page-numbers a,
.custom-pagination .page-numbers span {
min-width: 46px;
height: 46px;
font-size: 1rem;
}
}
/* Extra Large Devices (≥ 1200px) */
@media (min-width: 1200px) {
.pagination-container,
.custom-pagination {
margin: 3rem 0 2.5rem;
padding: 1.25rem 0;
}
.pagination-container .page-numbers a,
.pagination-container .page-numbers span,
.custom-pagination .page-numbers a,
.custom-pagination .page-numbers span {
min-width: 48px;
height: 48px;
}
}
/* ============================================
ACCESSIBILITY FEATURES
============================================ */
/* High Contrast Mode Support */
@media (prefers-contrast: high) {
.pagination-container .page-numbers a,
.pagination-container .page-numbers span,
.custom-pagination .page-numbers a,
.custom-pagination .page-numbers span {
border-width: 2px;
border-color: #000;
}
.pagination-container .page-numbers .current,
.custom-pagination .page-numbers .current {
background-color: #000;
color: #fff;
border-color: #000;
}
}
/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
.pagination-container .page-numbers a,
.pagination-container .page-numbers span,
.custom-pagination .page-numbers a,
.custom-pagination .page-numbers span {
transition: none;
}
}
/* Print Styles */
@media print {
.pagination-container,
.custom-pagination {
display: none;
}
}
/* CORE IMAGE OPTIMIZATION STYLES
These styles prevent layout shift and optimize rendering performance*/
.post-picture {aspect-ratio:630/416}
.post-picture img {aspect-ratio: 630 / 416}
.post-picture-pano {aspect-ratio: 630 / 265}
.post-picture-pano img {aspect-ratio: 630 / 265}