/*
Theme Name: MOL Apartmani
Theme URI: https://mol-apartmani.hr
Author: MOL Development Team
Author URI: https://mol-apartmani.hr
Description: Moderna WordPress tema za luksuzni apartman na Murteru. Single-page dizajn sa 9 sekcija, optimizovana za brzinu i SEO.
Version: 1.0.0
License: GPL v2 or later
Text Domain: mol-apartmani
Tags: one-column, custom-header, custom-menu, featured-images, translation-ready
*/
/* ==========================================================================
Reset & Base Styles
========================================================================== */
/* CSS Reset */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* CSS Custom Properties (Brand Colors) */
:root {
/* Brand Colors */
--mol-primary: #33B8E1;
--mol-primary-dark: #2596be;
--mol-primary-light: #5cc5eb;
--mol-accent: #00BCD4;
--mol-accent-dark: #00ACC1;
--mol-dark: #1a1a1a;
--mol-white: #FFFFFF;
--mol-black: #000000;
--mol-gray-dark: #333333;
--mol-gray: #666666;
--mol-gray-light: #999999;
--mol-gray-lighter: #f5f5f5;
--mol-light-gray: #f8f9fa;
--mol-text-secondary: #6c757d;
--mol-secondary: #20c997;
--mol-tirkiz: #1ABC9C;
/* Typography */
--font-primary: 'Poppins', sans-serif;
--font-secondary: 'Open Sans', sans-serif;
/* Spacing */
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 16px;
--spacing-lg: 24px;
--spacing-xl: 32px;
--spacing-xxl: 48px;
--spacing-xxxl: 64px;
/* Container */
--container-max-width: 1200px;
--container-padding: 45px;
/* Sections */
--section-padding: 80px;
/* Header */
--header-height: 90px;
--header-height-mobile: 70px;
/* Transitions */
--transition-fast: 0.2s ease;
--transition-normal: 0.3s ease;
--transition-slow: 0.5s ease;
}
/* Base Typography */
html {
font-size: 16px;
scroll-behavior: smooth;
}
body {
font-family: var(--font-secondary);
font-size: 1rem;
line-height: 1.6;
color: var(--mol-gray-dark);
background-color: var(--mol-white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Headings */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-primary);
font-weight: 600;
line-height: 1.2;
margin-bottom: var(--spacing-md);
color: var(--mol-black);
}
h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1.125rem; }
/* Links */
a {
color: var(--mol-primary);
text-decoration: none;
transition: color var(--transition-fast);
}
a:hover {
color: var(--mol-primary-dark);
opacity: 0.85;
}
/* Images */
img {
max-width: 100%;
height: auto;
display: block;
}
/* Buttons and Interactive Elements */
button {
cursor: pointer;
transition: all var(--transition-fast);
}
button:hover {
opacity: 0.85;
transform: translateY(-1px);
}
/* Subtle hover for all clickable elements */
[class*="__button"]:hover,
[class*="__btn"]:hover,
[class*="__cta"]:hover,
[class*="__link"]:hover {
opacity: 0.85;
transform: translateY(-1px);
}
/* Main Content */
.mol-main {
min-height: calc(100vh - var(--header-height));
position: relative;
}
.mol-main--landing {
padding-top: 0;
}
/* Container */
.mol-container {
max-width: var(--container-max-width);
margin: 0 auto;
padding: 0 var(--container-padding);
}
/* ==========================================================================
Header Styles
========================================================================== */
.mol-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: var(--header-height-mobile);
background-color: var(--mol-white);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1), 0 4px 20px -10px rgba(19, 185, 189, 0.3);
z-index: 1000;
transition: all var(--transition-normal);
}
/* Tirkizni glow na donjem rubu */
.mol-header::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(19, 185, 189, 0.4) 20%,
rgba(19, 185, 189, 0.6) 50%,
rgba(19, 185, 189, 0.4) 80%,
transparent 100%);
box-shadow: 0 0 10px rgba(19, 185, 189, 0.15);
}
@media (min-width: 768px) {
.mol-header {
height: var(--header-height);
}
}
.mol-header--scrolled {
height: calc(var(--header-height) - 10px);
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
}
.mol-header__container {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
padding: 0 20px;
max-width: 100%;
width: 100%;
}
@media (min-width: 768px) {
.mol-header__container {
padding: 0 40px;
}
}
@media (min-width: 1200px) {
.mol-header__container {
padding: 0 80px;
}
}
/* Logo */
.mol-header__logo {
display: flex;
align-items: center;
height: 36px;
}
.mol-header__logo img {
height: 100%;
width: auto;
}
/* Mobile logo override */
@media (max-width: 767px) {
.mol-header__logo {
height: auto !important;
}
.mol-header__logo img {
height: 70px !important;
width: auto !important;
max-width: 300px !important;
}
}
/* Navigation */
.mol-header__nav {
display: none;
}
@media (min-width: 768px) {
.mol-header__nav {
display: block;
}
}
.mol-header__nav-list {
display: flex;
list-style: none;
gap: var(--spacing-xxl);
}
@media (min-width: 1024px) {
.mol-header__nav-list {
gap: 32px;
}
}
@media (min-width: 1200px) {
.mol-header__nav-list {
gap: 40px;
}
}
@media (min-width: 1400px) {
.mol-header__nav-list {
gap: 48px;
}
}
.mol-header__nav-link {
font-family: var(--font-primary);
font-size: 0.8rem;
font-weight: 600;
color: var(--mol-gray-dark);
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
transition: all var(--transition-fast);
position: relative;
text-decoration: none;
padding: 8px 0;
}
.mol-header__nav-link::before {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background: linear-gradient(90deg, var(--mol-primary), var(--mol-accent));
transition: all 0.3s ease;
transform: translateX(-50%);
}
.mol-header__nav-link::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg,
rgba(51, 184, 225, 0.08) 0%,
rgba(0, 188, 212, 0.04) 100%);
border-radius: 6px;
opacity: 0;
transition: opacity 0.3s ease;
z-index: -1;
}
@media (min-width: 1024px) {
.mol-header__nav-link {
font-size: 0.875rem;
}
}
@media (min-width: 1400px) {
.mol-header__nav-link {
font-size: 0.9375rem;
}
}
.mol-header__nav-link:hover {
color: var(--mol-primary);
transform: translateY(-2px);
}
.mol-header__nav-link:hover::before {
width: 100%;
}
.mol-header__nav-link:hover::after {
opacity: 1;
}
.mol-header__nav-link--active {
color: var(--mol-primary);
}
.mol-header__nav-link--active::before {
width: 100%;
}
.mol-header__nav-link:focus {
outline: none;
color: var(--mol-primary);
}
.mol-header__nav-link:focus::before {
width: 100%;
}
/* Header Actions */
.mol-header__actions {
display: flex;
align-items: center;
gap: var(--spacing-lg);
}
@media (min-width: 768px) {
.mol-header__actions {
gap: var(--spacing-xl);
}
}
@media (min-width: 1200px) {
.mol-header__actions {
gap: 32px;
}
}
/* CTA Button */
.mol-header__cta {
display: none;
padding: var(--spacing-sm) var(--spacing-lg);
background-color: var(--mol-primary);
color: var(--mol-white);
font-family: var(--font-primary);
font-weight: 600;
font-size: 0.875rem;
border-radius: 25px;
border: 2px solid var(--mol-primary);
transition: all var(--transition-fast);
text-decoration: none;
}
@media (min-width: 768px) {
.mol-header__cta {
display: inline-block;
}
}
.mol-header__cta:hover {
background-color: var(--mol-white);
color: var(--mol-primary);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(51, 184, 225, 0.25);
}
/* Language Switcher */
.mol-header__lang-switcher {
position: relative;
}
/* Language Dropdown */
.mol-lang-dropdown__trigger {
display: flex;
align-items: center;
gap: var(--spacing-xs);
padding: var(--spacing-xs) var(--spacing-sm);
background: var(--mol-white);
border: 1px solid var(--mol-gray-light);
border-radius: 6px;
font-family: var(--font-primary);
font-size: 0.875rem;
font-weight: 500;
color: var(--mol-gray-dark);
cursor: pointer;
transition: all var(--transition-fast);
}
.mol-lang-dropdown__trigger:hover {
border-color: var(--mol-primary);
color: var(--mol-primary);
}
.mol-lang-dropdown__trigger svg {
transition: transform var(--transition-fast);
}
.mol-lang-dropdown__trigger[aria-expanded="true"] svg {
transform: rotate(180deg);
}
.mol-lang-dropdown__menu {
position: absolute;
top: 100%;
right: 0;
margin-top: var(--spacing-xs);
background: var(--mol-white);
border: 1px solid var(--mol-gray-light);
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
min-width: 180px;
overflow: hidden;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all var(--transition-fast);
z-index: 1001;
}
.mol-lang-dropdown__trigger[aria-expanded="true"] + .mol-lang-dropdown__menu,
.mol-lang-dropdown__menu--active {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.mol-lang-dropdown__item {
display: flex;
align-items: center;
gap: var(--spacing-sm);
padding: var(--spacing-sm) var(--spacing-md);
color: var(--mol-gray-dark);
font-family: var(--font-primary);
font-size: 0.875rem;
transition: background-color var(--transition-fast);
}
.mol-lang-dropdown__item:hover {
background-color: var(--mol-gray-lightest);
}
.mol-lang-dropdown__item--active {
background-color: var(--mol-primary-lightest);
color: var(--mol-primary);
}
.mol-lang-dropdown__flag {
width: 20px;
height: 15px;
object-fit: cover;
border-radius: 2px;
}
/* Hamburger Menu */
.mol-header__menu-toggle {
width: 30px;
height: 24px;
position: relative;
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: space-between;
background: transparent;
border: none;
padding: 0;
}
@media (min-width: 768px) {
.mol-header__menu-toggle {
display: none;
}
}
.mol-header__hamburger-line {
width: 100%;
height: 3px;
background-color: var(--mol-gray-dark);
transition: all var(--transition-fast);
}
.mol-header__hamburger--active .mol-header__hamburger-line:nth-child(1) {
transform: translateY(10.5px) rotate(45deg);
}
.mol-header__hamburger--active .mol-header__hamburger-line:nth-child(2) {
opacity: 0;
}
.mol-header__hamburger--active .mol-header__hamburger-line:nth-child(3) {
transform: translateY(-10.5px) rotate(-45deg);
}
/* Desktop Hamburger Menu */
.mol-header__desktop-hamburger {
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 5px;
background: none;
border: 1px solid rgba(19, 185, 189, 0.2);
border-radius: 8px;
padding: 10px;
cursor: pointer;
width: 44px;
height: 44px;
margin-left: 20px;
transition: all 0.3s ease;
position: relative;
}
@media (min-width: 1024px) {
.mol-header__desktop-hamburger {
display: flex;
}
}
.mol-header__desktop-hamburger .mol-header__hamburger-line {
width: 24px;
height: 3px;
background-color: var(--mol-gray-dark);
transition: all 0.3s ease;
display: block;
}
.mol-header__desktop-hamburger:hover {
background-color: rgba(19, 185, 189, 0.05);
border-color: var(--mol-accent);
}
.mol-header__desktop-hamburger:hover .mol-header__hamburger-line {
background-color: var(--mol-accent);
}
/* Desktop Sidebar */
.mol-desktop-sidebar {
position: fixed;
top: 0;
right: -400px;
width: 400px;
height: 100vh;
background: linear-gradient(135deg, #1a1a1a 0%, #0d0d0d 100%);
box-shadow: -8px 0 32px rgba(0, 0, 0, 0.4);
z-index: 10000;
transition: right 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
overflow-y: auto;
}
/* Custom scrollbar for sidebar */
.mol-desktop-sidebar::-webkit-scrollbar {
width: 8px;
}
.mol-desktop-sidebar::-webkit-scrollbar-track {
background: rgba(255, 255, 255, 0.05);
}
.mol-desktop-sidebar::-webkit-scrollbar-thumb {
background: rgba(19, 185, 189, 0.3);
border-radius: 4px;
}
.mol-desktop-sidebar::-webkit-scrollbar-thumb:hover {
background: rgba(19, 185, 189, 0.5);
}
.mol-desktop-sidebar--active {
right: 0;
}
.mol-desktop-sidebar__container {
padding: 0;
}
/* Sidebar Header */
.mol-desktop-sidebar__header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 30px;
background: linear-gradient(135deg, rgba(19, 185, 189, 0.1) 0%, rgba(19, 185, 189, 0.05) 100%);
border-bottom: 1px solid rgba(19, 185, 189, 0.2);
}
.mol-desktop-sidebar__logo {
height: 60px;
width: auto;
filter: brightness(1.1);
}
.mol-desktop-sidebar__close {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 50%;
transition: all 0.3s ease;
}
.mol-desktop-sidebar__close:hover {
background: var(--mol-accent);
border-color: var(--mol-accent);
transform: rotate(90deg);
}
.mol-desktop-sidebar__close svg {
width: 20px;
height: 20px;
stroke: var(--mol-white);
}
/* Sidebar Language Switcher */
.mol-desktop-sidebar__lang {
padding: 40px 30px;
background: rgba(0, 0, 0, 0.2);
}
.mol-desktop-sidebar__lang-title {
font-size: 14px;
font-weight: 600;
color: var(--mol-accent);
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 2px;
opacity: 0.8;
}
.mol-desktop-sidebar__lang-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.mol-desktop-sidebar__lang-item {
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 16px 12px;
background: rgba(255, 255, 255, 0.05);
border: 2px solid transparent;
border-radius: 12px;
color: var(--mol-white);
text-decoration: none;
transition: all 0.3s ease;
text-align: center;
font-size: 13px;
font-weight: 500;
}
.mol-desktop-sidebar__lang-item:hover {
background: rgba(19, 185, 189, 0.15);
border-color: rgba(19, 185, 189, 0.5);
transform: translateY(-2px);
}
.mol-desktop-sidebar__lang-item--active {
background: rgba(19, 185, 189, 0.25);
border-color: var(--mol-accent);
box-shadow: 0 4px 12px rgba(19, 185, 189, 0.3);
}
.mol-desktop-sidebar__lang-flag {
width: 32px;
height: 24px;
object-fit: cover;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
/* Sidebar Contact */
.mol-desktop-sidebar__contact {
padding: 40px 30px;
}
.mol-desktop-sidebar__contact-title {
font-size: 14px;
font-weight: 600;
color: var(--mol-accent);
margin-bottom: 28px;
text-transform: uppercase;
letter-spacing: 2px;
opacity: 0.8;
}
.mol-desktop-sidebar__contact-item {
display: flex;
gap: 16px;
margin-bottom: 24px;
padding: 16px;
background: rgba(255, 255, 255, 0.03);
border-radius: 12px;
transition: all 0.3s ease;
}
.mol-desktop-sidebar__contact-item:hover {
background: rgba(255, 255, 255, 0.06);
transform: translateX(5px);
}
.mol-desktop-sidebar__contact-item:last-child {
margin-bottom: 0;
}
.mol-desktop-sidebar__contact-icon {
flex-shrink: 0;
width: 24px;
height: 24px;
color: var(--mol-accent);
margin-top: 2px;
}
.mol-desktop-sidebar__contact-item p {
margin: 0;
color: rgba(255, 255, 255, 0.9);
line-height: 1.6;
}
.mol-desktop-sidebar__contact-item strong {
color: var(--mol-white);
font-weight: 600;
}
.mol-desktop-sidebar__contact-item a {
color: var(--mol-white);
text-decoration: none;
transition: color 0.3s ease;
font-weight: 500;
}
.mol-desktop-sidebar__contact-item a:hover {
color: var(--mol-accent);
text-decoration: underline;
}
/* Sidebar Map */
.mol-desktop-sidebar__map {
padding: 40px 30px;
background: rgba(0, 0, 0, 0.2);
}
.mol-desktop-sidebar__map-title {
font-size: 14px;
font-weight: 600;
color: var(--mol-accent);
margin-bottom: 20px;
text-transform: uppercase;
letter-spacing: 2px;
opacity: 0.8;
}
.mol-desktop-sidebar__map-wrapper {
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
border: 2px solid rgba(19, 185, 189, 0.3);
}
.mol-desktop-sidebar__map-wrapper iframe {
width: 100%;
height: 200px;
border: none;
display: block;
filter: brightness(0.9);
transition: filter 0.3s ease;
}
.mol-desktop-sidebar__map-wrapper:hover iframe {
filter: brightness(1);
}
/* Overlay */
.mol-desktop-sidebar__overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0);
visibility: hidden;
transition: all 0.4s ease;
z-index: 9999;
}
.mol-desktop-sidebar__overlay--active {
visibility: visible;
background-color: rgba(0, 0, 0, 0.5);
}
/* Body scroll lock for desktop sidebar */
body.desktop-sidebar-open {
overflow: hidden;
}
/* Mobile Menu */
.mol-mobile-menu {
position: fixed;
top: 0;
right: 0;
width: 100%;
max-width: 420px;
height: 100vh;
background-color: var(--mol-white);
transform: translateX(100%);
transition: transform var(--transition-normal);
overflow-y: auto;
z-index: 1002;
box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
}
.mol-mobile-menu--active {
transform: translateX(0);
}
.mol-mobile-menu__container {
padding: var(--spacing-xl) var(--spacing-lg);
height: 100%;
display: flex;
flex-direction: column;
}
/* Close Button */
.mol-mobile-menu__close {
position: absolute;
top: var(--spacing-lg);
right: var(--spacing-lg);
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
color: var(--mol-gray-dark);
cursor: pointer;
border-radius: 50%;
transition: all var(--transition-fast);
}
.mol-mobile-menu__close:hover {
background-color: var(--mol-gray-lightest);
color: var(--mol-primary);
}
/* Language Switcher */
.mol-mobile-menu__lang {
margin-top: var(--spacing-2xl);
margin-bottom: var(--spacing-xl);
border-bottom: 1px solid var(--mol-gray-lighter);
padding-bottom: var(--spacing-lg);
}
.mol-mobile-menu__lang-title {
font-family: var(--font-primary);
font-size: 0.875rem;
font-weight: 600;
color: var(--mol-gray-dark);
margin-bottom: var(--spacing-sm);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.mol-mobile-menu__lang-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-xs);
}
.mol-mobile-menu__lang-item {
display: flex;
align-items: center;
gap: var(--spacing-xs);
padding: var(--spacing-xs) var(--spacing-sm);
border: 1px solid var(--mol-gray-lighter);
border-radius: 6px;
font-family: var(--font-primary);
font-size: 0.75rem;
color: var(--mol-gray-dark);
transition: all var(--transition-fast);
}
.mol-mobile-menu__lang-item:hover {
border-color: var(--mol-primary);
background-color: var(--mol-primary-lightest);
}
.mol-mobile-menu__lang-item--active {
border-color: var(--mol-primary);
background-color: var(--mol-primary);
color: var(--mol-white);
}
.mol-mobile-menu__lang-flag {
width: 16px;
height: 12px;
object-fit: cover;
border-radius: 2px;
}
/* Navigation */
.mol-mobile-menu__list {
list-style: none;
margin-bottom: var(--spacing-xl);
flex-grow: 1;
}
.mol-mobile-menu__item {
border-bottom: 1px solid var(--mol-gray-lighter);
}
.mol-mobile-menu__item:last-child {
border-bottom: none;
}
.mol-mobile-menu__link {
display: block;
padding: var(--spacing-md) var(--spacing-md);
margin: 0 calc(-1 * var(--spacing-md));
font-family: var(--font-primary);
font-size: 1.125rem;
font-weight: 600;
color: var(--mol-gray-dark);
text-transform: uppercase;
letter-spacing: 0.5px;
text-decoration: none;
border-radius: 8px;
transition: all 0.3s ease;
position: relative;
}
.mol-mobile-menu__link:hover {
color: var(--mol-primary);
background: linear-gradient(135deg,
rgba(51, 184, 225, 0.08) 0%,
rgba(0, 188, 212, 0.04) 100%);
transform: translateX(8px);
}
.mol-mobile-menu__link:hover::before {
content: '';
position: absolute;
left: 0;
top: 50%;
width: 4px;
height: 60%;
background: linear-gradient(180deg, var(--mol-primary), var(--mol-accent));
border-radius: 2px;
transform: translateY(-50%);
}
.mol-mobile-menu__link--active {
color: var(--mol-primary);
}
/* CTA Button */
.mol-mobile-menu__cta {
display: flex;
align-items: center;
justify-content: center;
gap: var(--spacing-sm);
padding: var(--spacing-md) var(--spacing-lg);
background-color: var(--mol-primary);
color: var(--mol-white);
font-family: var(--font-primary);
font-weight: 600;
font-size: 1rem;
border-radius: 12px;
border: 2px solid var(--mol-primary);
transition: all var(--transition-fast);
margin-bottom: var(--spacing-xl);
}
.mol-mobile-menu__cta:hover {
background-color: var(--mol-white);
color: var(--mol-primary);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(51, 184, 225, 0.25);
}
/* Contact Info */
.mol-mobile-menu__contact {
margin-bottom: var(--spacing-xl);
padding: var(--spacing-lg);
background-color: var(--mol-gray-lightest);
border-radius: 12px;
}
.mol-mobile-menu__contact-title {
font-family: var(--font-primary);
font-size: 1rem;
font-weight: 600;
color: var(--mol-gray-dark);
margin-bottom: var(--spacing-md);
}
.mol-mobile-menu__contact-item {
display: flex;
align-items: flex-start;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-sm);
}
.mol-mobile-menu__contact-item:last-child {
margin-bottom: 0;
}
.mol-mobile-menu__contact-item svg {
color: var(--mol-primary);
margin-top: 2px;
flex-shrink: 0;
}
.mol-mobile-menu__contact-item p,
.mol-mobile-menu__contact-item a {
font-family: var(--font-primary);
font-size: 0.875rem;
color: var(--mol-gray-dark);
line-height: 1.4;
margin: 0;
}
.mol-mobile-menu__contact-item a {
color: var(--mol-primary);
transition: color var(--transition-fast);
}
.mol-mobile-menu__contact-item a:hover {
color: var(--mol-primary-dark);
}
/* Social Links */
.mol-mobile-menu__social {
border-top: 1px solid var(--mol-gray-lighter);
padding-top: var(--spacing-lg);
}
.mol-mobile-menu__social-title {
font-family: var(--font-primary);
font-size: 0.875rem;
font-weight: 600;
color: var(--mol-gray-dark);
margin-bottom: var(--spacing-md);
text-transform: uppercase;
letter-spacing: 0.5px;
}
.mol-mobile-menu__social-links {
display: flex;
gap: var(--spacing-md);
}
.mol-mobile-menu__social-link {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background-color: var(--mol-gray-lighter);
color: var(--mol-gray-dark);
border-radius: 50%;
transition: all var(--transition-fast);
}
.mol-mobile-menu__social-link:hover {
background-color: var(--mol-primary);
color: var(--mol-white);
transform: translateY(-2px);
}
/* ==========================================================================
Hero Section - Diagonal Design
========================================================================== */
.mol-hero {
position: relative;
overflow: visible;
height: calc(60vh + var(--header-height-mobile));
min-height: 600px;
margin-top: 0;
padding-top: var(--header-height-mobile);
display: flex;
align-items: stretch;
}
@media (min-width: 768px) {
.mol-hero {
height: calc(60vh + var(--header-height));
padding-top: var(--header-height);
}
}
/* Hero decoration - valovi mora */
.mol-hero::before {
content: '';
position: absolute;
bottom: -50px;
left: 0;
width: 100%;
height: 100px;
background: url('data:image/svg+xml,') no-repeat;
background-size: cover;
z-index: 0;
}
.mol-hero__wrapper {
position: relative;
width: 100%;
height: 100%;
display: flex;
}
/* Content Side (Left) */
.mol-hero__content {
position: relative;
z-index: 1;
width: 42%;
display: flex;
align-items: center;
padding: 0 3% 3% 3%;
background-color: #20201F;
clip-path: polygon(0 0, 100% 0, 85% 100%, 0 100%);
}
/* Background pattern directly on content with diagonal shape */
.mol-hero__content::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 20% 30%, rgba(19, 185, 189, 0.08) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.04) 0%, transparent 40%),
radial-gradient(circle at 60% 20%, rgba(19, 185, 189, 0.05) 0%, transparent 35%),
linear-gradient(45deg, rgba(19, 185, 189, 0.02) 0%, transparent 30%, rgba(255, 255, 255, 0.02) 70%, transparent 100%);
z-index: 0;
pointer-events: none;
}
/* Geometric texture overlay */
.mol-hero__content::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
linear-gradient(120deg, transparent 49%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0.02) 51%, transparent 52%),
linear-gradient(60deg, transparent 49%, rgba(19, 185, 189, 0.015) 50%, rgba(19, 185, 189, 0.015) 51%, transparent 52%);
background-size: 40px 40px, 60px 60px;
z-index: 0;
pointer-events: none;
}
.mol-hero__content-inner {
position: relative;
z-index: 1;
max-width: 550px;
padding-top: 40px;
}
/* Better width for typewriter titles */
.mol-hero__content-inner:has(.typewriter) {
max-width: 600px;
}
.mol-hero__label {
display: inline-block;
font-size: 0.85rem;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--mol-accent);
background-color: rgba(0, 188, 212, 0.1);
padding: 10px 24px;
border-radius: 25px;
margin-bottom: 2rem;
line-height: 1.4;
white-space: nowrap;
}
.mol-hero__title {
font-size: clamp(2.5rem, 5vw, 3.5rem);
font-weight: 700;
line-height: 1.2;
color: var(--mol-white);
margin-bottom: 1.5rem;
position: relative;
overflow: hidden;
max-width: 520px; /* Dovoljno široko za maksimalno 2 reda */
max-height: calc(2 * 1.2em * clamp(2.5rem, 5vw, 3.5rem)); /* Ograniči na točno 2 reda */
}
/* Typewriter effect */
.mol-hero__title.typewriter {
/* Cursor removed per user request */
/* border-right: 3px solid transparent; */
/* transition: border-color 0.3s ease; */
overflow: visible !important; /* Allow text to wrap and not be cut off */
}
.mol-hero__title.typewriter .typewriter-text {
display: inline-block;
white-space: normal; /* Dopusti prelom linija */
max-width: 520px; /* Dovoljno široko za maksimalno 2 reda */
overflow: hidden; /* Sakrij ako prelazi */
word-break: break-word; /* Prelomi dugačke riječi */
line-height: 1.2;
max-height: calc(2 * 1.2 * 1em); /* Maksimalno 2 reda teksta */
}
/* Handle very long words on desktop too */
@media (min-width: 769px) {
.mol-hero__title.typewriter .typewriter-text {
/* If a single word is too long, allow breaking */
word-break: break-word;
overflow-wrap: break-word;
max-width: 520px; /* Konsistentno ograničenje za desktop */
max-height: calc(2 * 1.2 * 1em); /* Maksimalno 2 reda */
}
}
/* Responsive typewriter text for mobile */
@media (max-width: 768px) {
.mol-hero__title.typewriter .typewriter-text {
white-space: normal;
word-break: break-word;
hyphens: auto;
line-height: 1.3;
word-wrap: break-word;
overflow-wrap: break-word;
}
.mol-hero__title.typewriter {
overflow: visible;
height: auto;
min-height: auto;
}
}
/* Blinking cursor animation - removed per user request */
/* @keyframes blink-cursor {
0%, 50% {
border-color: var(--mol-accent);
}
51%, 100% {
border-color: transparent;
}
} */
.mol-hero__subtitle {
font-size: clamp(1.1rem, 2vw, 1.25rem);
line-height: 1.8;
color: rgba(255, 255, 255, 0.8);
margin-bottom: 1.5rem;
}
/* Google Reviews */
.mol-hero__reviews {
margin-bottom: 2rem;
}
.mol-hero__reviews-link {
display: inline-flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1.25rem;
background-color: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
text-decoration: none;
color: var(--mol-white);
transition: all var(--transition-fast);
}
.mol-hero__reviews-link:hover {
background-color: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.25);
transform: translateY(-1px);
opacity: 0.95;
}
.mol-hero__reviews-stars {
display: flex;
align-items: center;
gap: 0.5rem;
}
.mol-hero__google-icon {
width: 20px;
height: 20px;
}
.mol-hero__rating {
font-size: 1.125rem;
font-weight: 600;
color: var(--mol-white);
}
.mol-hero__stars {
display: flex;
gap: 2px;
}
.mol-hero__stars svg {
width: 16px;
height: 16px;
}
.mol-hero__reviews-count {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.9);
}
/* Hero Slider */
.mol-hero__slider {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
}
.mol-hero__slide {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
visibility: hidden;
transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
}
.mol-hero__slide .mol-hero__wrapper {
height: 100%;
}
.mol-hero__slide--active {
opacity: 1;
visibility: visible;
}
/* Slider Navigation */
.mol-hero__nav {
position: absolute;
bottom: 30px;
left: 3%;
display: flex;
gap: 10px;
z-index: 10;
}
.mol-hero__nav-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.4);
border: 2px solid transparent;
cursor: pointer;
transition: all var(--transition-fast);
padding: 0;
}
.mol-hero__nav-dot:hover {
background-color: rgba(255, 255, 255, 0.6);
}
.mol-hero__nav-dot--active {
background-color: var(--mol-white);
transform: scale(1.2);
}
.mol-hero__cta {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 32px;
background-color: var(--mol-accent);
color: var(--mol-white);
text-decoration: none;
font-weight: 600;
border-radius: 50px;
border: 2px solid var(--mol-accent);
transition: all var(--transition-normal);
}
.mol-hero__cta:hover {
background-color: var(--mol-white);
color: var(--mol-accent);
transform: translateX(2px);
}
.mol-hero__cta-arrow {
transition: transform var(--transition-normal);
}
.mol-hero__cta:hover .mol-hero__cta-arrow {
transform: translateX(3px);
}
/* Image Side (Right) */
.mol-hero__image {
position: absolute;
top: 0;
right: 0;
width: 65%;
height: 100%;
overflow: hidden;
}
.mol-hero__image-wrapper {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}
.mol-hero__image img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* ==========================================================================
Gallery Section
========================================================================== */
.mol-gallery {
position: relative;
padding: var(--spacing-xxxl) 0;
background-color: var(--mol-white);
background-image: linear-gradient(180deg, transparent 0%, rgba(51, 184, 225, 0.02) 100%);
}
/* Gallery decoration - foto objektiv */
.mol-gallery::before {
content: '';
position: absolute;
top: 100px;
right: 5%;
width: 120px;
height: 120px;
background: radial-gradient(circle at center, rgba(51, 184, 225, 0.1) 20%, rgba(51, 184, 225, 0.05) 40%, transparent 60%);
border: 2px solid rgba(51, 184, 225, 0.1);
border-radius: 50%;
opacity: 0.3;
}
.mol-gallery::after {
content: '';
position: absolute;
bottom: 150px;
left: 8%;
width: 80px;
height: 80px;
background: radial-gradient(circle at center, rgba(51, 184, 225, 0.08) 30%, transparent 70%);
border: 1px solid rgba(51, 184, 225, 0.1);
border-radius: 20%;
transform: rotate(15deg);
opacity: 0.4;
}
.mol-gallery__header {
text-align: center;
max-width: 700px;
margin: 0 auto var(--spacing-xxl);
}
.mol-gallery__title {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 700;
color: var(--mol-black);
margin-bottom: 1rem;
line-height: 1.2;
}
.mol-gallery__subtitle {
font-size: 1.125rem;
color: var(--mol-gray);
line-height: 1.6;
}
/* Gallery filter */
.mol-gallery__filters {
display: flex;
justify-content: center;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-xxxl);
flex-wrap: wrap;
}
.mol-gallery__filter-btn {
padding: var(--spacing-sm) var(--spacing-lg);
background-color: var(--mol-white);
color: var(--mol-gray-dark);
border: 2px solid var(--mol-gray-lighter);
border-radius: 25px;
font-family: var(--font-primary);
font-weight: 500;
font-size: 0.9375rem;
cursor: pointer;
transition: all var(--transition-fast);
}
.mol-gallery__filter-btn:hover {
background-color: var(--mol-gray-lighter);
border-color: var(--mol-gray-light);
}
.mol-gallery__filter-btn--active {
background-color: var(--mol-primary);
color: var(--mol-white);
border-color: var(--mol-primary);
}
.mol-gallery__filter-btn--active:hover {
background-color: var(--mol-white);
color: var(--mol-primary);
border-color: var(--mol-primary);
}
/* Gallery grid */
.mol-gallery__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--spacing-lg);
margin-bottom: var(--spacing-xxl);
}
.mol-gallery__item {
position: relative;
border-radius: 15px;
overflow: hidden;
background-color: var(--mol-gray-lighter);
aspect-ratio: 4 / 3;
cursor: pointer;
transition: all var(--transition-normal);
}
.mol-gallery__item:hover {
transform: translateY(-5px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}
/* All items same size for consistent grid */
.mol-gallery__item--wide,
.mol-gallery__item--tall {
grid-column: span 1;
grid-row: span 1;
}
/* Gallery image */
.mol-gallery__image {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--transition-slow);
}
.mol-gallery__item:hover .mol-gallery__image {
transform: scale(1.05);
}
/* Gallery overlay */
.mol-gallery__overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity var(--transition-normal);
}
.mol-gallery__item:hover .mol-gallery__overlay {
opacity: 1;
}
.mol-gallery__icon {
width: 50px;
height: 50px;
background-color: var(--mol-white);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transform: scale(0);
transition: transform var(--transition-normal);
}
.mol-gallery__item:hover .mol-gallery__icon {
transform: scale(1);
}
.mol-gallery__icon svg {
width: 24px;
height: 24px;
color: var(--mol-black);
}
/* Gallery hidden items */
.mol-gallery__hidden {
display: none;
}
/* Gallery actions */
.mol-gallery__actions {
text-align: center;
margin-top: 3rem;
}
.mol-gallery__load-more {
display: inline-flex;
align-items: center;
gap: 10px;
padding: var(--spacing-md) var(--spacing-xl);
background-color: var(--mol-white);
color: var(--mol-primary);
border: 2px solid var(--mol-primary);
border-radius: 30px;
font-family: var(--font-primary);
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: all var(--transition-fast);
}
.mol-gallery__load-more:hover {
background-color: var(--mol-primary);
color: var(--mol-white);
transform: translateY(-2px);
box-shadow: 0 5px 20px rgba(51, 184, 225, 0.3);
}
/* Hidden items for load more */
.mol-gallery__item--hidden {
display: none;
}
/* Loaded items animation */
.mol-gallery__item--loaded {
opacity: 0;
transform: scale(0.9);
animation: galleryItemFadeIn 0.5s ease-out forwards;
}
@keyframes galleryItemFadeIn {
to {
opacity: 1;
transform: scale(1);
}
}
/* Lightbox */
.mol-lightbox {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.95);
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: all var(--transition-normal);
}
.mol-lightbox--active {
opacity: 1;
visibility: visible;
}
.mol-lightbox__close {
position: absolute;
top: 20px;
right: 20px;
width: 50px;
height: 50px;
background-color: rgba(255, 255, 255, 0.1);
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all var(--transition-fast);
z-index: 2;
}
.mol-lightbox__close:hover {
background-color: rgba(255, 255, 255, 0.2);
transform: rotate(90deg);
}
.mol-lightbox__close svg {
color: var(--mol-white);
}
/* Lightbox navigation */
.mol-lightbox__prev,
.mol-lightbox__next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 60px;
height: 60px;
background-color: rgba(255, 255, 255, 0.1);
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all var(--transition-fast);
z-index: 2;
}
.mol-lightbox__prev {
left: 20px;
}
.mol-lightbox__next {
right: 20px;
}
.mol-lightbox__prev:hover,
.mol-lightbox__next:hover {
background-color: rgba(255, 255, 255, 0.2);
}
.mol-lightbox__prev svg,
.mol-lightbox__next svg {
color: var(--mol-white);
}
/* Lightbox container */
.mol-lightbox__container {
max-width: 90%;
max-height: 90%;
display: flex;
flex-direction: column;
align-items: center;
}
.mol-lightbox__image {
max-width: 100%;
max-height: 80vh;
object-fit: contain;
border-radius: 10px;
opacity: 0;
transform: scale(0.9);
transition: all var(--transition-normal);
}
.mol-lightbox--active .mol-lightbox__image {
opacity: 1;
transform: scale(1);
}
.mol-lightbox__caption {
margin-top: var(--spacing-lg);
color: var(--mol-white);
font-size: 1.125rem;
text-align: center;
opacity: 0;
transform: translateY(20px);
transition: all var(--transition-normal);
}
.mol-lightbox--active .mol-lightbox__caption {
opacity: 1;
transform: translateY(0);
}
/* Gallery responsive */
@media (max-width: 1024px) {
.mol-gallery__grid {
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-md);
}
}
@media (max-width: 768px) {
.mol-gallery__filter {
gap: var(--spacing-xs);
}
.mol-gallery__filter-btn {
padding: var(--spacing-xs) var(--spacing-md);
font-size: 0.875rem;
}
.mol-gallery__grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-sm);
}
/* Show only first 3 images on mobile initially */
.mol-gallery__item {
display: none;
}
.mol-gallery__item:nth-child(1),
.mol-gallery__item:nth-child(2),
.mol-gallery__item:nth-child(3) {
display: block;
}
/* When gallery is expanded, show all */
.mol-gallery__grid--expanded .mol-gallery__item {
display: block;
}
}
/* Gallery load more button - Mobile only */
.mol-gallery__more {
text-align: center;
display: none;
}
@media (max-width: 768px) {
.mol-gallery__more {
display: block;
margin-top: var(--spacing-lg);
}
/* Hide button when gallery is expanded */
.mol-gallery--expanded .mol-gallery__more {
display: none;
}
}
.mol-gallery__more-btn {
display: inline-block;
padding: 12px 24px;
background-color: var(--mol-primary);
color: var(--mol-white);
border: none;
border-radius: 30px;
font-weight: 600;
font-size: 0.9375rem;
cursor: pointer;
transition: all var(--transition-fast);
box-shadow: 0 5px 15px rgba(51, 184, 225, 0.3);
}
.mol-gallery__more-btn:hover {
background-color: #0a8c8f;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(51, 184, 225, 0.4);
}
.mol-lightbox__prev,
.mol-lightbox__next {
width: 50px;
height: 50px;
}
.mol-lightbox__prev {
left: 10px;
}
.mol-lightbox__next {
right: 10px;
}
}
@media (max-width: 480px) {
.mol-gallery__grid {
grid-template-columns: 1fr;
}
}
/* ==========================================================================
Responsive Styles
========================================================================== */
/* Tablet and up */
@media (min-width: 768px) {
.mol-header {
height: var(--header-height);
}
.mol-header__nav {
display: block;
}
.mol-header__cta {
display: inline-block;
}
.mol-mobile-menu {
display: none;
}
h1 { font-size: 3rem; }
h2 { font-size: 2.5rem; }
h3 { font-size: 2rem; }
}
/* Desktop */
@media (min-width: 1024px) {
.mol-header__hamburger {
display: none;
}
h1 { font-size: 3.5rem; }
}
/* Tablet - Hero adjustments */
@media (max-width: 1024px) {
.mol-hero__content {
width: 50%;
}
.mol-hero__image {
width: 50%;
}
}
/* Mobile specific */
@media (max-width: 767px) {
.mol-header {
height: var(--header-height-mobile);
}
/* Keep dots same as desktop on mobile */
/* Fix room slider dots on mobile */
.mol-room__dots {
gap: 12px;
bottom: -25px; /* Closer to image on mobile */
}
.mol-room__dot {
width: 10px !important;
height: 10px !important;
min-width: 10px !important;
min-height: 10px !important;
max-width: 10px !important;
max-height: 10px !important;
padding: 0 !important;
border: none !important;
display: block !important;
}
/* Reduce section padding on mobile */
.mol-about {
padding: var(--spacing-xl) 0; /* 32px instead of 64px */
padding-bottom: calc(var(--spacing-xl) + 80px); /* Extra padding for floating card */
}
/* Specific padding for intro2 section on mobile */
#intro2.mol-about {
padding-bottom: calc(var(--spacing-xl) + 20px) !important; /* Small extra padding */
}
.mol-features {
padding: var(--spacing-xl) 0;
}
.mol-gallery {
padding: var(--spacing-xl) 0;
}
.mol-apartment-tour {
padding: var(--spacing-xl) 0;
}
.mol-hero {
margin-top: 0; /* Remove gap */
padding-top: var(--header-height-mobile); /* Account for fixed header */
height: auto;
min-height: 100vh;
background: transparent; /* Ensure no background */
}
/* Hide Hero wave decoration on mobile */
.mol-hero::before {
display: none;
}
.mol-hero__slider {
height: auto; /* Allow slider to expand */
}
.mol-hero__slide {
position: relative !important; /* Change from absolute */
height: auto;
opacity: 1 !important;
visibility: visible !important;
}
.mol-hero__wrapper {
flex-direction: column;
height: auto; /* Allow wrapper to expand */
}
.mol-hero__content {
width: 100%;
padding: 3rem 5%;
text-align: center;
clip-path: none;
order: 1; /* Content comes first */
background-color: #20201F; /* Keep dark background */
margin-bottom: 0; /* No gap between content and image */
}
.mol-hero__content-inner {
max-width: 100%;
}
.mol-hero__image {
width: 100%;
height: 50vh;
order: 2; /* Image comes second */
margin-top: 0; /* No gap between content and image */
}
.mol-hero__diagonal {
display: none;
}
/* Mobile Hero specific adjustments */
.mol-hero__content::before,
.mol-hero__content::after {
display: none; /* Remove background patterns on mobile */
}
.mol-hero__label {
font-size: 0.75rem;
margin-bottom: 1rem;
color: var(--mol-primary); /* Ensure visible on dark bg */
}
.mol-hero__title {
font-size: 1.875rem;
margin-bottom: 1rem;
color: var(--mol-white); /* White text on dark bg */
}
.mol-hero__subtitle {
font-size: 1rem;
margin-bottom: 1.5rem;
color: rgba(255, 255, 255, 0.8); /* Slightly transparent white */
}
.mol-hero__reviews {
margin-bottom: 1.5rem;
}
.mol-hero__cta {
font-size: 1.125rem;
font-weight: 600;
padding: 1.125rem 2.5rem;
width: auto;
display: inline-flex;
align-items: center;
gap: 0.75rem;
margin: 0 auto;
background-color: var(--mol-primary);
color: var(--mol-white);
border-radius: 50px;
text-decoration: none;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(51, 184, 225, 0.2);
}
.mol-hero__cta:hover {
background-color: var(--mol-primary-dark);
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(51, 184, 225, 0.3);
}
.mol-hero__cta-arrow {
transition: transform 0.3s ease;
}
.mol-hero__cta:hover .mol-hero__cta-arrow {
transform: translateX(3px);
}
/* Remove clip-path from image on mobile */
.mol-hero__image {
clip-path: none;
position: relative;
z-index: 1;
background: transparent;
}
.mol-hero__image-wrapper {
height: 100%;
position: relative;
}
.mol-hero__image-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
}
/* Show only active slide on mobile */
.mol-hero__slide:not(.mol-hero__slide--active) {
display: none;
}
/* Mobile navigation dots */
.mol-hero__nav {
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
.mol-hero__nav-dot {
width: 10px !important;
height: 10px !important;
min-width: 10px !important;
min-height: 10px !important;
max-width: 10px !important;
max-height: 10px !important;
border: none !important;
background-color: rgba(255, 255, 255, 0.5);
padding: 0 !important;
display: block !important;
}
.mol-hero__nav-dot--active {
background-color: var(--mol-primary);
transform: scale(1.2);
}
.mol-mobile-menu {
top: var(--header-height-mobile);
height: calc(100vh - var(--header-height-mobile));
}
}
/* ==========================================================================
About Section - Prvi red do mora
========================================================================== */
.mol-about {
position: relative;
padding: var(--spacing-xxxl) 0;
padding-bottom: calc(var(--spacing-xxxl) + 100px); /* Extra padding for floating card */
background-color: #f8f9fa;
overflow: hidden;
}
/* Specific padding for intro2 section */
#intro2.mol-about {
padding-bottom: calc(var(--spacing-xxxl) + 20px) !important; /* Small extra padding for intro2 */
}
/* Wave decoration */
.mol-about::before {
content: '';
position: absolute;
top: -50px;
left: 0;
width: 100%;
height: 100px;
background: url('data:image/svg+xml,') no-repeat;
background-size: cover;
}
.mol-about__inner {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-xxxl);
align-items: center;
}
/* Content side */
.mol-about__content {
position: relative;
z-index: 2;
}
.mol-about__eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 0.875rem;
font-weight: 600;
color: var(--mol-primary);
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 1rem;
}
.mol-about__eyebrow::before {
content: '';
width: 40px;
height: 2px;
background-color: var(--mol-primary);
}
.mol-about__title {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 700;
color: var(--mol-black);
margin-bottom: 1.5rem;
line-height: 1.2;
}
.mol-about__title-highlight {
color: var(--mol-primary);
position: relative;
}
.mol-about__title-highlight::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 10px;
background-color: rgba(51, 184, 225, 0.2);
transform: skewY(-2deg);
}
.mol-about__description {
font-size: 1.125rem;
line-height: 1.8;
color: var(--mol-gray);
margin-bottom: 2rem;
}
/* Different title effects for each section */
/* Reviews section - gradient underline effect */
.mol-reviews__title {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 700;
color: var(--mol-black);
margin-bottom: 1rem;
line-height: 1.2;
position: relative;
display: inline-block;
}
.mol-reviews__title-highlight {
color: var(--mol-primary);
position: relative;
}
.mol-reviews__title-highlight::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 8px;
background: linear-gradient(90deg, rgba(51, 184, 225, 0.3) 0%, rgba(51, 184, 225, 0.15) 100%);
transform: skewY(-1deg);
border-radius: 2px;
}
@keyframes slideInWidth {
from {
width: 0;
}
to {
width: 100%;
}
}
/* Features section - side accent effect */
.mol-features__title {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 700;
color: var(--mol-black);
margin-bottom: 1rem;
line-height: 1.2;
position: relative;
padding-left: 20px;
}
.mol-features__title::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 5px;
height: 120%;
background: var(--mol-tirkizna);
border-radius: 3px;
}
.mol-features__title-highlight {
color: var(--mol-primary);
position: relative;
}
/* Gallery section - frame effect */
.mol-gallery__title {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 700;
color: var(--mol-black);
margin-bottom: 1rem;
line-height: 1.2;
position: relative;
display: inline-block;
}
.mol-gallery__title-highlight {
color: var(--mol-primary);
position: relative;
padding: 0 10px;
}
.mol-gallery__title-highlight::before {
content: '';
position: absolute;
top: -5px;
left: -5px;
width: 20px;
height: 20px;
border-top: 3px solid var(--mol-primary);
border-left: 3px solid var(--mol-primary);
}
.mol-gallery__title-highlight::after {
content: '';
position: absolute;
bottom: -5px;
right: -5px;
width: 20px;
height: 20px;
border-bottom: 3px solid var(--mol-primary);
border-right: 3px solid var(--mol-primary);
}
/* Location section - dot pattern effect */
.mol-location__title {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 700;
color: var(--mol-black);
margin-bottom: 1.5rem;
line-height: 1.2;
position: relative;
display: inline-block;
}
.mol-location__title-highlight {
color: var(--mol-primary);
position: relative;
}
.mol-location__title-highlight::before {
content: '';
position: absolute;
top: 50%;
left: -30px;
width: 20px;
height: 20px;
background: var(--mol-primary);
border-radius: 50%;
transform: translateY(-50%);
opacity: 0.2;
}
.mol-location__title-highlight::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
var(--mol-primary) 20%,
var(--mol-primary) 80%,
transparent 100%);
transform: scaleX(0);
transform-origin: center;
animation: expandLine 3s ease-in-out infinite;
}
@keyframes expandLine {
0%, 100% {
transform: scaleX(0);
}
50% {
transform: scaleX(1);
}
}
/* Activities section - wavy underline effect */
.mol-activities__title {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 700;
color: var(--mol-black);
margin-bottom: 1.5rem;
line-height: 1.2;
position: relative;
display: inline-block;
}
.mol-activities__title-highlight {
color: var(--mol-primary);
position: relative;
}
.mol-activities__title-highlight::after {
content: '';
position: absolute;
bottom: -12px;
left: 0;
width: 100%;
height: 20px;
background: linear-gradient(90deg, rgba(51, 184, 225, 0.3) 0%, rgba(51, 184, 225, 0.1) 100%);
transform: skewY(-2deg);
border-radius: 4px;
}
/* Distance counter */
.mol-about__distance {
display: inline-flex;
align-items: center;
gap: 2rem;
padding: 2rem;
background-color: var(--mol-white);
border-radius: 20px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
margin-bottom: 2rem;
}
.mol-about__distance-number {
font-size: 4rem;
font-weight: 700;
color: var(--mol-primary);
line-height: 1;
position: relative;
}
.mol-about__distance-number::after {
content: 'm';
font-size: 2rem;
font-weight: 400;
margin-left: 5px;
}
.mol-about__distance-text {
display: flex;
flex-direction: column;
gap: 5px;
}
.mol-about__distance-label {
font-size: 0.875rem;
color: var(--mol-gray-light);
text-transform: uppercase;
letter-spacing: 1px;
}
.mol-about__distance-value {
font-size: 1.25rem;
font-weight: 600;
color: var(--mol-black);
}
/* Features list */
.mol-about__features {
list-style: none;
display: grid;
gap: 1rem;
}
.mol-about__feature {
display: flex;
align-items: center;
gap: 1rem;
}
.mol-about__feature-icon {
width: 50px;
height: 50px;
background-color: rgba(51, 184, 225, 0.1);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.mol-about__feature-icon svg {
width: 24px;
height: 24px;
color: var(--mol-primary);
}
.mol-about__feature-text {
flex: 1;
}
.mol-about__feature-title {
font-weight: 600;
color: var(--mol-black);
margin-bottom: 0.25rem;
}
.mol-about__feature-desc {
font-size: 0.875rem;
color: var(--mol-gray);
}
/* Visual side */
.mol-about__visual {
position: relative;
height: 600px;
margin-bottom: 80px; /* Space for card that extends outside */
}
.mol-about__image-main {
position: relative;
width: 100%;
height: 100%;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.mol-about__image-main img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: left center;
}
/* Floating card */
.mol-about__card {
position: absolute;
bottom: -90px !important; /* Extends more outside image for cool effect - force with !important */
left: 30px !important; /* Better positioning - force with !important */
background-color: var(--mol-white);
padding: 1.5rem;
border-radius: 16px;
box-shadow:
0 20px 50px rgba(0, 0, 0, 0.15),
0 0 40px rgba(51, 184, 225, 0.08); /* Very subtle turquoise glow */
max-width: 240px;
z-index: 3;
border: 2px solid rgba(51, 184, 225, 0.12); /* Slightly more visible turquoise border */
}
.mol-about__card-icon {
width: 50px;
height: 50px;
background-color: var(--mol-primary);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.75rem;
}
.mol-about__card-icon svg {
width: 24px;
height: 24px;
color: var(--mol-white);
}
.mol-about__card-title {
font-size: 1.125rem;
font-weight: 700;
color: var(--mol-black);
margin-bottom: 0.5rem;
}
.mol-about__card-text {
font-size: 0.813rem;
color: var(--mol-gray);
line-height: 1.6;
}
/* Decorative elements */
.mol-about__decoration {
position: absolute;
top: 50%;
right: -100px;
transform: translateY(-50%);
width: 200px;
height: 200px;
opacity: 0.1;
}
.mol-about__decoration svg {
width: 100%;
height: 100%;
color: var(--mol-primary);
}
/* Responsive */
@media (max-width: 1024px) {
.mol-about__inner {
gap: var(--spacing-xxl);
}
.mol-about__visual {
height: 500px;
}
}
@media (max-width: 768px) {
.mol-about__inner {
grid-template-columns: 1fr;
gap: var(--spacing-xl);
}
.mol-about__content {
text-align: center;
}
.mol-about__eyebrow {
justify-content: center;
}
.mol-about__distance {
margin: 2rem auto;
}
.mol-about__features {
text-align: left;
max-width: 400px;
margin: 0 auto;
}
.mol-about__visual {
height: 400px;
margin: 0 -20px;
}
.mol-about__card {
left: 20px !important;
right: 20px !important;
bottom: -80px !important; /* Extends more outside on mobile too */
max-width: calc(100% - 40px);
padding: 1.25rem; /* Slightly smaller padding on mobile */
}
.mol-about__decoration {
display: none;
}
}
/* ==========================================================================
Features Section
========================================================================== */
.mol-features {
position: relative;
padding: var(--spacing-xxxl) 0;
background-color: var(--mol-white);
}
.mol-features__header {
text-align: center;
max-width: 700px;
margin: 0 auto var(--spacing-xxxl);
display: flex;
flex-direction: column;
align-items: center;
}
.mol-features__title {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 700;
color: var(--mol-black);
margin-bottom: 1rem;
line-height: 1.2;
position: relative;
display: inline-block;
}
.mol-features__title::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 100%;
height: 12px;
background: linear-gradient(90deg, var(--mol-primary) 0%, rgba(51, 184, 225, 0.3) 100%);
transform: skewY(-2deg);
z-index: -1;
}
.mol-features__subtitle {
font-size: 1.125rem;
color: var(--mol-gray);
line-height: 1.6;
}
/* Features grid */
.mol-features__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--spacing-lg);
}
/* Feature card */
.mol-feature {
position: relative;
background-color: var(--mol-white);
border-radius: 20px;
padding: var(--spacing-xl);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
transition: all var(--transition-normal);
overflow: hidden;
}
.mol-feature:hover {
transform: translateY(-2px);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
}
/* Feature icon */
.mol-feature__icon {
width: 80px;
height: 80px;
margin-bottom: var(--spacing-lg);
position: relative;
}
.mol-feature__icon-bg {
position: absolute;
width: 100%;
height: 100%;
background-color: var(--mol-primary);
opacity: 0.1;
border-radius: 20px;
transform: rotate(-5deg);
transition: transform var(--transition-normal);
}
.mol-feature:hover .mol-feature__icon-bg {
transform: rotate(3deg) scale(1.05);
}
.mol-feature__icon-inner {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(51, 184, 225, 0.1);
border-radius: 20px;
}
.mol-feature__icon svg {
width: 40px;
height: 40px;
color: var(--mol-primary);
}
/* Feature content */
.mol-feature__title {
font-size: 1.5rem;
font-weight: 700;
color: var(--mol-black);
margin-bottom: 1rem;
line-height: 1.2;
}
.mol-feature__description {
font-size: 1rem;
color: var(--mol-gray);
line-height: 1.6;
margin-bottom: 1.5rem;
}
/* Feature list */
.mol-feature__list {
list-style: none;
}
.mol-feature__list-item {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 0.75rem;
}
.mol-feature__list-icon {
width: 20px;
height: 20px;
color: var(--mol-accent);
flex-shrink: 0;
margin-top: 2px;
}
.mol-feature__list-text {
font-size: 0.875rem;
color: var(--mol-gray-dark);
line-height: 1.5;
}
/* Feature decoration */
.mol-feature__decoration {
position: absolute;
top: -30px;
right: -30px;
width: 100px;
height: 100px;
opacity: 0.05;
}
.mol-feature__decoration svg {
width: 100%;
height: 100%;
color: var(--mol-primary);
}
/* Feature colors */
.mol-feature--parking .mol-feature__icon-bg,
.mol-feature--parking .mol-feature__icon-inner {
background-color: rgba(255, 152, 0, 0.1);
}
.mol-feature--parking .mol-feature__icon svg {
color: #FF9800;
}
.mol-feature--equipment .mol-feature__icon-bg,
.mol-feature--equipment .mol-feature__icon-inner {
background-color: rgba(76, 175, 80, 0.1);
}
.mol-feature--equipment .mol-feature__icon svg {
color: #4CAF50;
}
.mol-feature--capacity .mol-feature__icon-bg,
.mol-feature--capacity .mol-feature__icon-inner {
background-color: rgba(156, 39, 176, 0.1);
}
.mol-feature--capacity .mol-feature__icon svg {
color: #9C27B0;
}
/* Responsive */
@media (max-width: 1024px) {
.mol-features__grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-lg);
}
}
@media (max-width: 768px) {
.mol-features__grid {
grid-template-columns: 1fr;
gap: var(--spacing-lg);
}
.mol-feature {
text-align: center;
}
.mol-feature__icon {
margin: 0 auto var(--spacing-lg);
}
}
/* ==========================================================================
Apartment Tour Section
========================================================================== */
.mol-apartment-tour {
position: relative;
padding: var(--spacing-xxxl) 0;
background-color: #f8f9fa;
}
.mol-apartment-tour__header {
text-align: center;
max-width: 700px;
margin: 0 auto var(--spacing-xxxl);
display: flex;
flex-direction: column;
align-items: center;
}
.mol-apartment-tour__title {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 700;
color: var(--mol-black);
margin-bottom: 1rem;
line-height: 1.2;
position: relative;
display: inline-block;
}
.mol-apartment-tour__title::after {
content: '';
position: absolute;
bottom: -8px;
left: 0;
width: 100%;
height: 12px;
background: linear-gradient(90deg, var(--mol-primary) 0%, rgba(51, 184, 225, 0.3) 100%);
transform: skewY(-2deg);
z-index: -1;
}
.mol-apartment-tour__subtitle {
font-size: 1.125rem;
color: var(--mol-gray);
line-height: 1.6;
}
/* Room tabs navigation */
.mol-room-tabs {
display: flex;
justify-content: center;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-xxl);
flex-wrap: wrap;
}
.mol-room-tabs__button {
padding: var(--spacing-sm) var(--spacing-lg);
background-color: var(--mol-white);
color: var(--mol-gray-dark);
border: 2px solid transparent;
border-radius: 30px;
font-family: var(--font-primary);
font-weight: 500;
font-size: 0.9375rem;
cursor: pointer;
transition: all var(--transition-fast);
}
.mol-room-tabs__button:hover {
background-color: var(--mol-gray-lighter);
transform: translateY(-1px);
opacity: 0.9;
}
.mol-room-tabs__button--active {
background-color: var(--mol-primary);
color: var(--mol-white);
border-color: var(--mol-primary);
}
.mol-room-tabs__button--active:hover {
background-color: var(--mol-white);
color: var(--mol-primary);
border-color: var(--mol-primary);
}
/* Room content */
.mol-room-content {
display: none;
animation: fadeIn 0.5s ease;
}
.mol-room-content--active {
display: block;
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.mol-room {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--spacing-xxxl);
align-items: center;
}
/* Room image */
.mol-room__image {
position: relative;
margin-bottom: 40px; /* Space for dots */
}
.mol-room__image img {
width: 100%;
height: auto;
display: block;
}
/* Room slider */
.mol-room__slider {
position: relative;
width: 100%;
}
.mol-room__slides {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
background-color: var(--mol-gray-lighter);
}
.mol-room__slide {
position: absolute;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center center !important;
opacity: 0;
transition: opacity 0.5s ease;
display: block !important;
}
.mol-room__slide--active {
opacity: 1;
}
/* Room slider dots */
.mol-room__dots {
position: absolute;
bottom: -35px; /* Position below the slides container */
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 10px;
z-index: 10;
}
.mol-room__dot {
width: 10px !important;
height: 10px !important;
min-width: 10px !important;
min-height: 10px !important;
max-width: 10px !important;
max-height: 10px !important;
border-radius: 50%;
background-color: var(--mol-primary); /* Turquoise color */
opacity: 0.3;
border: none;
cursor: pointer;
transition: all var(--transition-fast);
padding: 0 !important;
margin: 0 !important;
display: block !important;
flex-shrink: 0 !important;
}
.mol-room__dot--active {
background-color: var(--mol-primary);
opacity: 1;
transform: scale(1.2);
}
.mol-room__dot:hover {
opacity: 0.7;
transform: scale(1.1);
}
.mol-room__image-badge {
position: absolute;
top: 20px;
left: 20px;
background-color: var(--mol-primary);
color: var(--mol-white);
padding: 8px 16px;
border-radius: 25px;
font-size: 0.875rem;
font-weight: 600;
}
/* Room info */
.mol-room__info {
padding: 0 var(--spacing-lg);
}
.mol-room__name {
font-size: 2rem;
font-weight: 700;
color: var(--mol-black);
margin-bottom: 1rem;
}
.mol-room__tagline {
font-size: 1.25rem;
font-style: italic;
color: var(--mol-primary);
margin-bottom: 1.5rem;
}
.mol-room__description {
font-size: 1.125rem;
line-height: 1.8;
color: var(--mol-gray);
margin-bottom: 2rem;
}
/* Room features */
.mol-room__features {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
list-style: none;
}
.mol-room__feature {
display: flex;
align-items: center;
gap: 10px;
}
.mol-room__feature-icon {
width: 24px;
height: 24px;
color: var(--mol-accent);
flex-shrink: 0;
}
.mol-room__feature-text {
font-size: 0.9375rem;
color: var(--mol-gray-dark);
}
/* Room alternate layout */
.mol-room--reverse {
direction: rtl;
}
.mol-room--reverse .mol-room__info {
direction: ltr;
}
/* Responsive */
@media (max-width: 1024px) {
.mol-room {
gap: var(--spacing-xxl);
}
}
@media (max-width: 768px) {
.mol-room-tabs {
gap: var(--spacing-xs);
}
.mol-room-tabs__button {
padding: var(--spacing-xs) var(--spacing-md);
font-size: 0.875rem;
}
.mol-room {
grid-template-columns: 1fr;
gap: var(--spacing-xl);
}
.mol-room--reverse {
direction: ltr;
}
.mol-room__image {
order: -1;
}
.mol-room__info {
padding: 0;
text-align: center;
}
.mol-room__features {
grid-template-columns: 1fr;
max-width: 300px;
margin: 0 auto;
text-align: left;
}
}
/* ========================================
Beaches Section
======================================== */
.mol-beaches {
padding: var(--section-padding) 0;
background-color: var(--mol-light-gray);
position: relative;
overflow: hidden;
}
.mol-beaches::before {
content: '';
position: absolute;
top: -50px;
left: 0;
right: 0;
height: 100px;
background: linear-gradient(to bottom right, transparent 49%, var(--mol-light-gray) 50%);
}
/* Beach decoration - sunce i valovi */
.mol-beaches::after {
content: '';
position: absolute;
top: 80px;
right: 10%;
width: 60px;
height: 60px;
background: radial-gradient(circle at center, rgba(255, 193, 7, 0.1) 0%, rgba(255, 193, 7, 0.05) 50%, transparent 100%);
border-radius: 50%;
opacity: 0.6;
box-shadow: 0 0 0 10px rgba(255, 193, 7, 0.03), 0 0 0 20px rgba(255, 193, 7, 0.02);
}
.mol-beaches__header {
text-align: center;
margin-bottom: calc(var(--spacing-xl) * 2);
opacity: 0;
animation: fadeInUp 0.8s ease-out forwards;
}
.mol-beaches__title {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 700;
color: var(--mol-dark);
margin-bottom: var(--spacing-md);
position: relative;
display: inline-block;
}
.mol-beaches__title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: linear-gradient(to right, var(--mol-tirkiz), var(--mol-secondary));
}
.mol-beaches__subtitle {
font-size: 1.125rem;
color: var(--mol-text-secondary);
max-width: 600px;
margin: 0 auto;
}
.mol-beaches__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--spacing-lg);
margin-bottom: var(--spacing-xl);
}
.mol-beach-card {
background: var(--mol-white);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
opacity: 0;
animation: fadeInUp 0.8s ease-out forwards;
animation-delay: var(--animation-delay, 0s);
}
.mol-beach-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
}
.mol-beach-card__image {
position: relative;
height: 200px;
background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%);
overflow: hidden;
}
.mol-beach-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.mol-beach-card:hover .mol-beach-card__image img {
transform: scale(1.05);
}
.mol-beach-card__distance {
position: absolute;
top: 15px;
right: 15px;
background: var(--mol-primary);
color: var(--mol-white);
padding: 8px 16px;
border-radius: 25px;
font-size: 0.875rem;
font-weight: 500;
display: flex;
align-items: center;
gap: 5px;
backdrop-filter: blur(10px);
background: rgba(26, 188, 156, 0.95);
}
.mol-beach-card__distance svg {
width: 16px;
height: 16px;
}
.mol-beach-card__content {
padding: var(--spacing-lg);
}
.mol-beach-card__title {
font-size: 1.5rem;
font-weight: 600;
color: var(--mol-dark);
margin-bottom: var(--spacing-sm);
}
.mol-beach-card__features {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-sm);
margin-bottom: var(--spacing-md);
}
.mol-beach-card__badge {
background: var(--mol-light-gray);
color: var(--mol-text-secondary);
padding: 6px 12px;
border-radius: 20px;
font-size: 0.813rem;
font-weight: 500;
display: flex;
align-items: center;
gap: 5px;
}
.mol-beach-card__badge svg {
width: 14px;
height: 14px;
opacity: 0.7;
}
.mol-beach-card__link {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--mol-primary);
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
}
.mol-beach-card__link:hover {
color: var(--mol-secondary);
gap: 12px;
}
.mol-beach-card__link svg {
width: 20px;
height: 20px;
transition: transform 0.3s ease;
}
.mol-beach-card__link:hover svg {
transform: translateX(3px);
}
.mol-beaches__more {
text-align: center;
margin-top: calc(var(--spacing-xl) * 2);
}
.mol-beaches__more-text {
font-size: 1.125rem;
color: var(--mol-text-secondary);
margin-bottom: var(--spacing-md);
}
.mol-beaches__more-link {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--mol-primary);
text-decoration: none;
font-weight: 600;
font-size: 1.125rem;
transition: all 0.3s ease;
position: relative;
}
.mol-beaches__more-link::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 0;
height: 2px;
background: var(--mol-primary);
transition: width 0.3s ease;
}
.mol-beaches__more-link:hover {
color: var(--mol-secondary);
}
.mol-beaches__more-link:hover::after {
width: 100%;
}
.mol-beaches__more-link svg {
width: 24px;
height: 24px;
transition: transform 0.3s ease;
}
.mol-beaches__more-link:hover svg {
transform: translateX(5px);
}
/* Beaches Section Animations */
@keyframes beachCardSlide {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* Responsive */
@media (max-width: 768px) {
.mol-beaches {
padding: var(--spacing-xl) 0;
}
.mol-beaches__grid {
grid-template-columns: 1fr;
gap: var(--spacing-md);
}
.mol-beach-card__content {
padding: var(--spacing-md);
}
.mol-beach-card__features {
gap: var(--spacing-xs);
}
.mol-beach-card__badge {
font-size: 0.75rem;
padding: 4px 10px;
}
}
/* ========================================
Activities Section
======================================== */
.mol-activities {
padding: var(--section-padding) 0;
background-color: #FAFBFC;
position: relative;
background-image:
radial-gradient(circle at 20% 80%, rgba(51, 184, 225, 0.03) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(51, 184, 225, 0.03) 0%, transparent 50%);
}
.mol-activities__header {
text-align: center;
margin-bottom: calc(var(--spacing-xl) * 2);
}
.mol-activities__subtitle {
font-size: 1.125rem;
color: var(--mol-text-secondary);
max-width: 600px;
margin: 0 auto var(--spacing-md);
}
.mol-activities__description {
font-size: 1rem;
color: var(--mol-text-secondary);
max-width: 800px;
margin: 0 auto var(--spacing-xxl);
line-height: 1.6;
}
/* Activities Grid */
.mol-activities__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: var(--spacing-lg);
margin-bottom: var(--spacing-xxl);
}
/* Activity Item */
.mol-activity-item {
opacity: 0;
animation: fadeInUp 0.6s ease-out forwards;
animation-delay: var(--delay, 0s);
}
.mol-activity-item__link {
display: flex;
align-items: center;
gap: var(--spacing-md);
padding: var(--spacing-lg);
background: var(--mol-white);
border-radius: 16px;
text-decoration: none;
border: 1px solid rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.mol-activity-item__link::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 100%;
background: linear-gradient(90deg,
transparent 0%,
rgba(var(--category-color, 51, 184, 225), 0.05) 100%);
transition: width 0.4s ease;
}
.mol-activity-item__link:hover {
transform: translateY(-3px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
border-color: transparent;
}
.mol-activity-item__link:hover::before {
width: 100%;
}
/* Activity Icon */
.mol-activity-item__icon {
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg,
rgba(var(--category-color, 51, 184, 225), 0.1) 0%,
rgba(var(--category-color, 51, 184, 225), 0.2) 100%);
border-radius: 16px;
flex-shrink: 0;
position: relative;
transition: all 0.3s ease;
}
.mol-activity-item__icon span {
font-size: 1.75rem;
filter: saturate(1.2);
}
.mol-activity-item__link:hover .mol-activity-item__icon {
transform: scale(1.05) rotate(5deg);
background: linear-gradient(135deg,
rgba(var(--category-color, 51, 184, 225), 0.2) 0%,
rgba(var(--category-color, 51, 184, 225), 0.3) 100%);
}
/* Activity Title */
.mol-activity-item__title {
flex: 1;
font-size: 1.125rem;
font-weight: 600;
color: var(--mol-dark);
margin: 0;
line-height: 1.4;
transition: color 0.3s ease;
}
.mol-activity-item__link:hover .mol-activity-item__title {
color: var(--mol-primary);
}
/* Activity Arrow */
.mol-activity-item__arrow {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: var(--mol-light-gray);
border-radius: 50%;
color: var(--mol-primary);
flex-shrink: 0;
transition: all 0.3s ease;
}
.mol-activity-item__arrow svg {
width: 18px;
height: 18px;
transition: transform 0.3s ease;
}
.mol-activity-item__link:hover .mol-activity-item__arrow {
background: var(--mol-primary);
color: var(--mol-white);
}
.mol-activity-item__link:hover .mol-activity-item__arrow svg {
transform: translate(2px, -2px);
}
/* Responsive */
@media (max-width: 768px) {
.mol-activities {
padding: var(--spacing-xl) 0;
}
.mol-activities__grid {
grid-template-columns: 1fr;
gap: var(--spacing-md);
}
.mol-activity-item__link {
padding: var(--spacing-md);
}
.mol-activity-item__icon {
width: 50px;
height: 50px;
}
.mol-activity-item__icon span {
font-size: 1.5rem;
}
.mol-activity-item__title {
font-size: 1rem;
}
.mol-activity-item__arrow {
width: 32px;
height: 32px;
}
}
/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ========================================
Map Marker Styles for Leaflet
======================================== */
.mol-map-marker {
background: transparent;
border: none;
}
.mol-map-marker__pin {
width: 20px;
height: 20px;
background: var(--mol-tirkizna);
border-radius: 50%;
border: 3px solid var(--mol-white);
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
position: relative;
}
.mol-map-marker__pin::after {
content: '';
position: absolute;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-top: 10px solid var(--mol-tirkizna);
bottom: -8px;
left: 50%;
transform: translateX(-50%);
}
/* Map marker with label */
.mol-map-marker-label {
background: transparent;
border: none;
white-space: nowrap;
}
.mol-map-marker-label__content {
display: flex;
align-items: center;
gap: 8px;
background: var(--mol-white);
padding: 6px 12px;
border-radius: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
font-family: var(--mol-font-primary);
font-size: 14px;
font-weight: 600;
color: var(--mol-tamnosiva);
position: relative;
}
.mol-map-marker-label__icon {
width: 24px;
height: 24px;
background: var(--mol-tirkizna);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--mol-white);
font-size: 12px;
}
.mol-map-marker-label--highlight .mol-map-marker-label__content {
background: var(--mol-tirkizna);
color: var(--mol-white);
}
.mol-map-marker-label--highlight .mol-map-marker-label__icon {
background: var(--mol-white);
color: var(--mol-tirkizna);
}
/* Marker hover effects */
.mol-map-marker-label__content:hover {
transform: scale(1.05);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
cursor: pointer;
}
/* Map style improvements */
#mol-map {
background-color: #e5e3df;
}
/* Remove custom map controls since we're using Leaflet defaults */
.mol-location__map-controls {
display: none;
}
.mol-map-marker__pin--highlight {
width: 30px;
height: 30px;
background: var(--mol-tirkizna);
animation: pulse-marker 2s infinite;
}
@keyframes pulse-marker {
0% {
box-shadow: 0 0 0 0 rgba(19, 185, 189, 0.4);
}
70% {
box-shadow: 0 0 0 10px rgba(19, 185, 189, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(19, 185, 189, 0);
}
}
.mol-map-popup {
font-family: var(--mol-font-primary);
}
.mol-map-popup h4 {
margin: 0 0 8px 0;
color: var(--mol-tamnosiva);
font-size: 16px;
font-weight: 600;
}
.mol-map-popup p {
margin: 0;
color: var(--mol-siva);
font-size: 14px;
}
/* Interactive map specific styles */
#mol-map {
width: 100%;
height: 600px;
border-radius: 20px;
}
/* ========================================
Location Section
======================================== */
.mol-location {
padding: var(--section-padding) 0;
background-color: #F8F9FA;
position: relative;
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
/* Location decoration - kompas i mapa */
.mol-location::before {
content: '🧭';
position: absolute;
top: 120px;
left: 5%;
font-size: 32px;
opacity: 0.1;
transform: rotate(-25deg);
}
.mol-location::after {
content: '';
position: absolute;
bottom: 80px;
right: 8%;
width: 100px;
height: 100px;
background: conic-gradient(from 0deg, rgba(51, 184, 225, 0.02), rgba(51, 184, 225, 0.08), rgba(51, 184, 225, 0.02));
border-radius: 50%;
opacity: 0.3;
}
.mol-location__header {
text-align: center;
margin-bottom: calc(var(--spacing-xl) * 2);
}
.mol-location__title {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 700;
color: var(--mol-dark);
margin-bottom: var(--spacing-md);
position: relative;
display: inline-block;
}
.mol-location__subtitle {
font-size: 1.125rem;
color: var(--mol-text-secondary);
max-width: 600px;
margin: 0 auto;
}
.mol-location__content {
display: grid;
gap: calc(var(--spacing-xl) * 2);
}
/* Interactive Map section */
.mol-location__interactive {
display: grid;
grid-template-columns: 400px 1fr;
gap: var(--spacing-xl);
margin-bottom: calc(var(--spacing-xl) * 2);
}
.mol-location__places {
background: var(--mol-white);
border-radius: 20px;
padding: var(--spacing-lg);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
max-height: 600px;
display: flex;
flex-direction: column;
}
.mol-location__places h3 {
font-size: 1.25rem;
font-weight: 600;
color: var(--mol-dark);
margin-bottom: var(--spacing-md);
}
.mol-location__categories {
display: flex;
gap: var(--spacing-xs);
margin-bottom: var(--spacing-md);
flex-wrap: wrap;
}
.mol-location__category {
padding: var(--spacing-xs) var(--spacing-sm);
background: var(--mol-light-gray);
border: none;
border-radius: 25px;
font-size: 0.875rem;
font-weight: 500;
color: var(--mol-text-secondary);
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
gap: 6px;
}
.mol-location__category i {
font-size: 0.875rem;
}
.mol-location__category:hover {
background: var(--mol-primary);
color: var(--mol-white);
transform: translateY(-2px);
}
.mol-location__category--active {
background: var(--mol-primary);
color: var(--mol-white);
}
.mol-location__places-list {
overflow-y: auto !important;
overflow-x: hidden !important;
flex: 1;
padding-right: var(--spacing-sm);
max-height: 400px;
}
.mol-location__places-list::-webkit-scrollbar {
width: 6px;
}
.mol-location__places-list::-webkit-scrollbar-track {
background: var(--mol-light-gray);
border-radius: 3px;
}
.mol-location__places-list::-webkit-scrollbar-thumb {
background: var(--mol-primary);
border-radius: 3px;
}
.mol-location__place {
display: flex;
align-items: center;
gap: var(--spacing-md);
padding: var(--spacing-md);
margin-bottom: 8px;
background: var(--mol-light-gray);
border-radius: 15px;
cursor: pointer;
transition: all 0.3s ease;
}
.mol-location__place:hover {
background: linear-gradient(135deg, var(--mol-primary) 0%, #0a8c8f 100%);
color: var(--mol-white);
transform: translateX(10px);
border: none !important;
outline: none !important;
box-shadow: none !important;
border-bottom: none !important;
text-decoration: none !important;
border-top: none !important;
border-left: none !important;
border-right: none !important;
position: relative !important;
overflow: hidden !important;
}
.mol-location__place:hover::after,
.mol-location__place:hover::before {
display: none !important;
content: none !important;
border: none !important;
opacity: 0 !important;
visibility: hidden !important;
height: 0 !important;
width: 0 !important;
background: none !important;
}
.mol-location__place::after,
.mol-location__place::before {
display: none !important;
content: none !important;
border: none !important;
opacity: 0 !important;
visibility: hidden !important;
height: 0 !important;
width: 0 !important;
background: none !important;
}
/* Ensure all child elements inherit no borders or decorations */
.mol-location__place:hover * {
border: none !important;
outline: none !important;
text-decoration: none !important;
box-shadow: none !important;
}
.mol-location__place:hover .mol-location__place-info,
.mol-location__place:hover .mol-location__place-icon {
border: none !important;
outline: none !important;
text-decoration: none !important;
box-shadow: none !important;
}
/* Additional protection against any decorative elements */
.mol-location__place:hover h4,
.mol-location__place:hover p {
border: none !important;
text-decoration: none !important;
position: relative !important;
}
.mol-location__place:hover h4::after,
.mol-location__place:hover h4::before,
.mol-location__place:hover p::after,
.mol-location__place:hover p::before {
display: none !important;
content: none !important;
}
/* Force remove any possible bottom decoration */
.mol-location__place {
position: relative !important;
overflow: hidden !important;
}
.mol-location__place:hover {
position: relative !important;
overflow: hidden !important;
}
/* Absolutely ensure no decorative elements at bottom */
.mol-location__place:hover:after {
display: none !important;
content: '' !important;
position: absolute !important;
bottom: -100px !important;
left: -100px !important;
right: -100px !important;
height: 0 !important;
border: none !important;
background: none !important;
box-shadow: none !important;
}
/* Remove any focus outline or browser default styles */
.mol-location__place:focus,
.mol-location__place:active,
.mol-location__place:focus-visible {
outline: none !important;
border: none !important;
box-shadow: none !important;
}
/* Force no decoration on all states */
.mol-location__place,
.mol-location__place:hover,
.mol-location__place:focus,
.mol-location__place:active {
text-decoration: none !important;
outline: none !important;
outline-offset: 0 !important;
-webkit-tap-highlight-color: transparent !important;
-webkit-focus-ring-color: transparent !important;
}
/* Remove any box-shadow that might appear */
.mol-location__place {
box-shadow: none !important;
}
.mol-location__place:hover {
box-shadow: none !important;
}
/* Ensure the container doesn't show anything outside */
/* Removed overflow: hidden to allow scrolling */
/* Additional safeguard against browser-specific decorations */
.mol-location__place {
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
background-clip: padding-box !important;
}
/* Fix for the turquoise line issue - ensure clean edges */
.mol-location__place {
isolation: isolate !important;
will-change: transform !important;
-webkit-backface-visibility: hidden !important;
backface-visibility: hidden !important;
}
/* Ensure no visual artifacts on hover */
.mol-location__place:hover {
margin-bottom: var(--spacing-sm) !important;
isolation: isolate !important;
}
/* Clip any overflow that might cause visual artifacts */
/* Removed overflow: hidden and mask-image to allow scrolling */
/* Force GPU acceleration to prevent rendering issues */
.mol-location__place {
transform: translateZ(0) !important;
}
.mol-location__place:hover {
transform: translateX(10px) translateZ(0) !important;
}
/* Final fix for turquoise line - block all possible sources */
.mol-location__place,
.mol-location__place * {
text-decoration: none !important;
border: none !important;
outline: none !important;
}
/* Ensure icons don't have any underlines or borders */
.mol-location__place i,
.mol-location__place-icon,
.mol-location__place-icon * {
text-decoration: none !important;
border: none !important;
outline: none !important;
display: inline-flex !important;
}
/* Force clean rendering on the container */
.mol-location__places-list {
transform: translateZ(0);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Ensure no artifacts from Font Awesome icons */
.mol-location__place .fas,
.mol-location__place .far,
.mol-location__place .fa {
text-decoration: none !important;
border: none !important;
vertical-align: middle !important;
}
/* Ultimate fix for the turquoise line bug */
.mol-location__places-list {
background: var(--mol-white) !important;
}
.mol-location__place {
margin-bottom: var(--spacing-sm) !important;
background: var(--mol-light-gray) !important;
border: 0 !important;
outline: 0 !important;
}
.mol-location__place:last-child {
margin-bottom: 0 !important;
}
/* Prevent any visual glitches between elements */
.mol-location__place + .mol-location__place {
margin-top: 0 !important;
}
/* Force background color to prevent bleed-through */
.mol-location__place:hover {
background: linear-gradient(135deg, var(--mol-primary) 0%, #0a8c8f 100%) !important;
margin-bottom: var(--spacing-sm) !important;
}
/* Hide any potential rendering artifacts */
.mol-location__places {
background: var(--mol-white) !important;
overflow: hidden !important;
}
/* Ensure scrollbar doesn't cause visual issues */
.mol-location__places-list::-webkit-scrollbar-track {
background: var(--mol-light-gray) !important;
}
.mol-location__places-list::-webkit-scrollbar-thumb {
background: var(--mol-primary) !important;
border-radius: 3px !important;
}
/* Final safeguard - removed clip-path to allow scrolling */
.mol-location__place--highlight {
background: linear-gradient(135deg, var(--mol-primary) 0%, #0a8c8f 100%);
color: var(--mol-white);
}
.mol-location__place-icon {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.2);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
}
.mol-location__place:hover .mol-location__place-icon,
.mol-location__place--highlight .mol-location__place-icon {
background: rgba(255, 255, 255, 0.3);
}
.mol-location__place-info h4 {
font-size: 1rem;
font-weight: 600;
margin: 0 0 4px 0;
color: inherit;
}
.mol-location__place-info p {
font-size: 0.875rem;
margin: 0;
opacity: 0.8;
color: inherit;
}
.mol-location__map-container {
position: relative;
}
.mol-location__map-controls {
position: absolute;
top: 20px;
right: 20px;
display: flex;
flex-direction: column;
gap: var(--spacing-sm);
z-index: 10;
}
.mol-location__map-controls button {
width: 40px;
height: 40px;
background: var(--mol-white);
border: none;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.mol-location__map-controls button:hover {
background: var(--mol-primary);
color: var(--mol-white);
transform: scale(1.1);
}
/* Map section */
.mol-location__map-wrapper {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--spacing-xl);
align-items: start;
}
.mol-location__map {
position: relative;
height: 500px;
background: var(--mol-white);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.mol-location__map:hover {
transform: translateY(-5px);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.15);
}
.mol-location__map iframe {
width: 100%;
height: 100%;
display: block;
}
.mol-location__map-placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
color: var(--mol-text-secondary);
}
.mol-location__map-placeholder svg {
width: 64px;
height: 64px;
margin-bottom: var(--spacing-md);
opacity: 0.5;
}
.mol-location__map-placeholder p {
font-size: 1.125rem;
margin: 0;
}
.mol-location__address {
background: linear-gradient(135deg, var(--mol-primary) 0%, #0a8c8f 100%);
padding: calc(var(--spacing-xl) * 1.5);
border-radius: 20px;
box-shadow: 0 20px 60px rgba(19, 185, 189, 0.3);
min-width: 280px;
color: var(--mol-white);
position: relative;
overflow: hidden;
}
.mol-location__address::before {
content: '';
position: absolute;
top: -50%;
right: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
transform: rotate(45deg);
}
.mol-location__address h3 {
font-size: 1.25rem;
font-weight: 600;
color: var(--mol-white);
margin-bottom: var(--spacing-md);
position: relative;
z-index: 1;
}
.mol-location__address p {
font-size: 1rem;
line-height: 1.8;
color: var(--mol-white);
margin-bottom: var(--spacing-lg);
position: relative;
z-index: 1;
opacity: 0.95;
}
.mol-location__directions {
display: inline-flex;
align-items: center;
gap: var(--spacing-sm);
padding: var(--spacing-sm) var(--spacing-md);
background: rgba(255, 255, 255, 0.2);
color: var(--mol-white);
text-decoration: none;
border-radius: 50px;
font-weight: 500;
transition: all 0.3s ease;
position: relative;
z-index: 1;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
}
.mol-location__directions:hover {
background: rgba(255, 255, 255, 0.3);
transform: translateX(5px);
gap: var(--spacing-md);
}
/* Distances section */
.mol-location__distances {
background: var(--mol-white);
padding: calc(var(--spacing-xl) * 1.5);
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.mol-location__distances:hover {
transform: translateY(-5px);
box-shadow: 0 30px 80px rgba(0, 0, 0, 0.12);
}
.mol-location__distances h3 {
font-size: 1.5rem;
font-weight: 600;
color: var(--mol-dark);
margin-bottom: var(--spacing-md);
}
.mol-location__distances-intro {
font-size: 1.125rem;
color: var(--mol-text-secondary);
margin-bottom: var(--spacing-xl);
}
.mol-location__distances-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--spacing-md);
}
.mol-location__distance-item {
display: flex;
align-items: center;
gap: var(--spacing-md);
padding: var(--spacing-md);
background: linear-gradient(135deg, #f8f9fa 0%, #f0f1f3 100%);
border-radius: 15px;
transition: all 0.3s ease;
border: 1px solid rgba(0, 0, 0, 0.05);
}
.mol-location__distance-item:hover {
transform: translateX(10px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
}
.mol-location__distance-icon {
font-size: 2rem;
flex-shrink: 0;
width: 50px;
text-align: center;
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
}
.mol-location__distance-info {
flex: 1;
display: flex;
justify-content: space-between;
align-items: center;
}
.mol-location__distance-label {
font-size: 0.875rem;
color: var(--mol-text-secondary);
}
.mol-location__distance-value {
font-size: 1rem;
font-weight: 600;
color: var(--mol-primary);
}
/* Transport section */
.mol-location__transport {
background: linear-gradient(135deg, #20201F 0%, #2a2a29 100%);
padding: calc(var(--spacing-xl) * 1.5);
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
color: var(--mol-white);
position: relative;
overflow: hidden;
}
.mol-location__transport::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 300px;
height: 300px;
background: radial-gradient(circle, var(--mol-primary) 0%, transparent 70%);
opacity: 0.1;
transform: translate(50%, -50%);
}
.mol-location__transport h3 {
font-size: 1.5rem;
font-weight: 600;
color: var(--mol-white);
margin-bottom: var(--spacing-md);
position: relative;
z-index: 1;
}
.mol-location__transport-intro {
font-size: 1.125rem;
color: var(--mol-white);
margin-bottom: var(--spacing-xl);
opacity: 0.9;
position: relative;
z-index: 1;
}
.mol-location__transport-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: var(--spacing-xl);
}
.mol-location__transport-item {
text-align: center;
background: rgba(255, 255, 255, 0.05);
padding: var(--spacing-lg);
border-radius: 15px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.1);
transition: all 0.3s ease;
position: relative;
z-index: 1;
}
.mol-location__transport-item:hover {
transform: translateY(-10px);
background: rgba(255, 255, 255, 0.1);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
.mol-location__transport-icon {
width: 64px;
height: 64px;
margin: 0 auto var(--spacing-md);
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--mol-primary) 0%, var(--mol-accent) 100%);
border-radius: 16px;
color: var(--mol-white);
}
.mol-location__transport-icon svg {
width: 32px;
height: 32px;
}
.mol-location__transport-item h4 {
font-size: 1.125rem;
font-weight: 600;
color: var(--mol-white);
margin-bottom: var(--spacing-sm);
}
.mol-location__transport-item p {
font-size: 0.875rem;
color: var(--mol-white);
margin-bottom: var(--spacing-sm);
opacity: 0.9;
}
.mol-location__transport-item ul {
list-style: none;
padding: 0;
margin: 0;
}
.mol-location__transport-item li {
font-size: 0.875rem;
color: var(--mol-white);
padding: 4px 0;
opacity: 0.8;
}
/* Responsive */
@media (max-width: 1024px) {
.mol-location__map-wrapper {
grid-template-columns: 1fr;
}
.mol-location__address {
width: 100%;
}
.mol-location__interactive {
grid-template-columns: 350px 1fr;
gap: var(--spacing-lg);
}
}
@media (max-width: 768px) {
.mol-location {
padding: var(--spacing-xl) 0;
}
.mol-location__interactive {
grid-template-columns: 1fr;
gap: var(--spacing-md);
}
.mol-location__places {
max-height: 400px;
margin-bottom: var(--spacing-md);
}
#mol-map {
height: 400px;
}
.mol-location__categories {
justify-content: center;
}
.mol-location__map-controls {
top: 10px;
right: 10px;
}
.mol-location__map-controls button {
width: 35px;
height: 35px;
}
.mol-location__distances-grid {
grid-template-columns: 1fr;
}
.mol-location__transport-grid {
grid-template-columns: 1fr;
}
.mol-location__map {
height: 300px;
}
}
/* Reviews Section
========================================================================== */
.mol-reviews {
padding: var(--section-padding) 0;
background-color: var(--mol-white);
background-image:
linear-gradient(135deg, rgba(51, 184, 225, 0.02) 0%, transparent 40%),
linear-gradient(225deg, rgba(26, 188, 156, 0.02) 10%, transparent 50%);
position: relative;
}
.mol-reviews::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(51, 184, 225, 0.1), transparent);
}
/* Reviews decoration - zvjezdice */
.mol-reviews::after {
content: '⭐';
position: absolute;
top: 120px;
left: 12%;
font-size: 24px;
opacity: 0.1;
transform: rotate(-15deg);
animation: gentleFloat 6s ease-in-out infinite;
}
@keyframes gentleFloat {
0%, 100% { transform: rotate(-15deg) translateY(0px); }
50% { transform: rotate(-15deg) translateY(-10px); }
}
.mol-reviews__container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.mol-reviews__header {
text-align: center;
margin-bottom: 60px;
}
.mol-reviews__title {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 800;
color: var(--mol-dark);
margin-bottom: 20px;
}
.mol-reviews__subtitle {
font-size: 1.2rem;
color: var(--mol-text-secondary);
max-width: 600px;
margin: 0 auto;
}
.mol-reviews__stats {
display: flex;
justify-content: center;
align-items: center;
gap: 40px;
margin-bottom: 60px;
padding: 30px;
background: white;
border-radius: 12px;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
}
.mol-reviews__stat {
text-align: center;
}
.mol-reviews__stat-value {
font-size: 2.5rem;
font-weight: 800;
color: var(--mol-primary);
display: block;
margin-bottom: 5px;
}
.mol-reviews__stat-label {
font-size: 0.9rem;
color: var(--mol-text-secondary);
text-transform: uppercase;
letter-spacing: 1px;
}
.mol-reviews__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 30px;
margin-bottom: 40px;
}
.mol-review {
background: white;
border-radius: 12px;
padding: 30px;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.mol-review:hover {
transform: translateY(-5px);
box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
}
.mol-review__header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.mol-review__author {
display: flex;
align-items: center;
gap: 15px;
}
.mol-review__avatar {
width: 50px;
height: 50px;
border-radius: 50%;
background: var(--mol-primary);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 1.2rem;
}
.mol-review__info {
display: flex;
flex-direction: column;
}
.mol-review__name {
font-weight: 700;
color: var(--mol-dark);
margin-bottom: 2px;
}
.mol-review__date {
font-size: 0.85rem;
color: var(--mol-text-secondary);
}
.mol-review__rating {
display: flex;
gap: 2px;
color: #ffc107;
}
.mol-review__text {
color: var(--mol-text-secondary);
line-height: 1.6;
margin-bottom: 15px;
}
.mol-review__platform {
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 0.85rem;
color: var(--mol-text-secondary);
padding: 5px 10px;
background: #f8f9fa;
border-radius: 20px;
}
.mol-review__platform i {
color: var(--mol-primary);
}
.mol-reviews__load-more {
text-align: center;
}
.mol-reviews__load-more-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 15px 30px;
background: var(--mol-primary);
color: white;
border: 2px solid var(--mol-primary);
border-radius: 30px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.mol-reviews__load-more-btn:hover {
background: var(--mol-white);
color: var(--mol-primary);
transform: translateY(-2px);
box-shadow: 0 5px 20px rgba(51, 184, 225, 0.3);
}
@media (max-width: 768px) {
.mol-reviews__stats {
flex-direction: column;
gap: 20px;
}
.mol-reviews__grid {
grid-template-columns: 1fr;
gap: 20px;
}
.mol-review {
padding: 20px;
}
}
/* FAQ Section
========================================================================== */
.mol-faq {
padding: var(--section-padding) 0;
background-color: white;
position: relative;
}
/* FAQ decoration - upitnik */
.mol-faq::before {
content: '?';
position: absolute;
top: 100px;
right: 8%;
font-size: 120px;
font-weight: bold;
color: rgba(51, 184, 225, 0.04);
font-family: 'Georgia', serif;
transform: rotate(10deg);
z-index: 0;
}
.mol-faq__container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.mol-faq__header {
text-align: center;
margin-bottom: 60px;
}
.mol-faq__title {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 800;
color: var(--mol-dark);
margin-bottom: 20px;
}
.mol-faq__subtitle {
font-size: 1.2rem;
color: var(--mol-text-secondary);
max-width: 600px;
margin: 0 auto;
}
.mol-faq__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
max-width: 1000px;
margin: 0 auto;
}
.mol-faq__item {
background: #f8f9fa;
border-radius: 12px;
overflow: hidden;
transition: all 0.3s ease;
}
.mol-faq__item:hover {
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}
.mol-faq__item--active {
background: white;
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}
.mol-faq__question {
display: flex;
justify-content: space-between;
align-items: center;
padding: 25px 30px;
cursor: pointer;
transition: background-color 0.3s ease;
}
.mol-faq__item--active .mol-faq__question {
background: #f8f9fa;
}
.mol-faq__question-text {
font-size: 1.1rem;
font-weight: 600;
color: var(--mol-dark);
margin-right: 20px;
}
.mol-faq__icon {
min-width: 30px;
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--mol-primary);
color: white;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.3s ease;
}
.mol-faq__icon::after {
content: '+';
font-size: 1.2rem;
font-weight: 700;
line-height: 1;
}
.mol-faq__item--active .mol-faq__icon {
transform: rotate(45deg);
}
.mol-faq__answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}
.mol-faq__item--active .mol-faq__answer {
max-height: 500px;
}
.mol-faq__answer-text {
padding: 0 30px 25px;
color: var(--mol-text-secondary);
line-height: 1.6;
}
.mol-faq__contact {
text-align: center;
margin-top: 60px;
padding: 40px;
background: var(--mol-primary);
background: linear-gradient(135deg, var(--mol-primary) 0%, var(--mol-dark) 100%);
border-radius: 12px;
color: white;
}
.mol-faq__contact-title {
font-size: 1.5rem;
font-weight: 700;
margin-bottom: 15px;
}
.mol-faq__contact-text {
font-size: 1.1rem;
margin-bottom: 25px;
opacity: 0.9;
}
.mol-faq__contact-btn {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 15px 30px;
background: white;
color: var(--mol-primary);
border: none;
border-radius: 30px;
font-size: 1rem;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
}
.mol-faq__contact-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}
@media (max-width: 768px) {
.mol-faq__grid {
grid-template-columns: 1fr;
gap: 20px;
}
.mol-faq__question {
padding: 20px;
}
.mol-faq__answer-text {
padding: 0 20px 20px;
}
.mol-faq__contact {
padding: 30px 20px;
}
}
/* Contact Section
========================================================================== */
.mol-contact {
padding: var(--section-padding) 0;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}
.mol-contact__container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.mol-contact__header {
text-align: center;
margin-bottom: 60px;
}
.mol-contact__title {
font-size: clamp(2rem, 4vw, 3rem);
font-weight: 800;
color: var(--mol-dark);
margin-bottom: 20px;
}
.mol-contact__subtitle {
font-size: 1.2rem;
color: var(--mol-text-secondary);
max-width: 600px;
margin: 0 auto;
}
.mol-contact__content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 60px;
align-items: start;
}
.mol-contact__form {
background: white;
padding: 40px;
border-radius: 12px;
box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
}
.mol-contact__form-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--mol-dark);
margin-bottom: 30px;
}
.mol-contact__form-grid {
display: grid;
gap: 20px;
}
.mol-contact__form-group {
display: flex;
flex-direction: column;
}
.mol-contact__form-group--half {
grid-column: span 1;
}
.mol-contact__form-group--full {
grid-column: 1 / -1;
}
.mol-contact__form-label {
font-size: 0.9rem;
font-weight: 600;
color: var(--mol-dark);
margin-bottom: 8px;
}
.mol-contact__form-input,
.mol-contact__form-textarea {
padding: 15px;
border: 1px solid #e0e0e0;
border-radius: 8px;
font-size: 1rem;
font-family: inherit;
transition: all 0.3s ease;
}
.mol-contact__form-input:focus,
.mol-contact__form-textarea:focus {
outline: none;
border-color: var(--mol-primary);
box-shadow: 0 0 0 3px rgba(79, 172, 254, 0.1);
}
.mol-contact__form-textarea {
min-height: 120px;
resize: vertical;
}
.mol-contact__form-submit {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 15px 30px;
background: var(--mol-primary);
color: white;
border: 2px solid var(--mol-primary);
border-radius: 30px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 10px;
}
.mol-contact__form-submit:hover {
background: var(--mol-white);
color: var(--mol-primary);
transform: translateY(-2px);
box-shadow: 0 5px 20px rgba(51, 184, 225, 0.3);
}
.mol-contact__info {
display: flex;
flex-direction: column;
gap: 30px;
}
.mol-contact__info-card {
background: white;
padding: 30px;
border-radius: 12px;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
}
.mol-contact__info-title {
font-size: 1.3rem;
font-weight: 700;
color: var(--mol-dark);
margin-bottom: 20px;
}
.mol-contact__info-item {
display: flex;
align-items: flex-start;
gap: 15px;
margin-bottom: 20px;
}
.mol-contact__info-item:last-child {
margin-bottom: 0;
}
.mol-contact__info-icon {
min-width: 40px;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--mol-primary);
background: linear-gradient(135deg, var(--mol-primary) 0%, var(--mol-dark) 100%);
color: white;
display: flex;
align-items: center;
justify-content: center;
}
.mol-contact__info-content {
flex: 1;
}
.mol-contact__info-label {
font-size: 0.9rem;
color: var(--mol-text-secondary);
margin-bottom: 5px;
}
.mol-contact__info-value {
font-size: 1.1rem;
font-weight: 600;
color: var(--mol-dark);
}
.mol-contact__info-value a {
color: inherit;
text-decoration: none;
transition: color 0.3s ease;
}
.mol-contact__info-value a:hover {
color: var(--mol-primary);
}
.mol-contact__social {
margin-top: 30px;
}
.mol-contact__social-title {
font-size: 1.1rem;
font-weight: 700;
color: var(--mol-dark);
margin-bottom: 15px;
}
.mol-contact__social-links {
display: flex;
gap: 15px;
}
.mol-contact__social-link {
width: 45px;
height: 45px;
border-radius: 50%;
background: #f8f9fa;
color: var(--mol-dark);
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: all 0.3s ease;
}
.mol-contact__social-link:hover {
background: var(--mol-primary);
color: white;
transform: translateY(-2px);
}
.mol-contact__map {
margin-top: 60px;
height: 400px;
background: #f0f0f0;
border-radius: 12px;
overflow: hidden;
position: relative;
}
.mol-contact__map iframe {
width: 100%;
height: 100%;
border: 0;
}
@media (max-width: 968px) {
.mol-contact__content {
grid-template-columns: 1fr;
gap: 40px;
}
.mol-contact__form {
padding: 30px;
}
.mol-contact__form-grid {
grid-template-columns: 1fr;
}
.mol-contact__form-group--half {
grid-column: 1 / -1;
}
}
@media (max-width: 480px) {
.mol-contact__form {
padding: 20px;
}
.mol-contact__info-card {
padding: 20px;
}
.mol-contact__map {
height: 300px;
}
}
/* Animations & Effects
========================================================================== */
/* Removed opacity: 0 to ensure sections are visible even if JS fails */
.mol-section {
transform: translateY(0);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.mol-section--visible {
opacity: 1;
transform: translateY(0);
}
/* Reveal animation - visible by default for no-JS fallback */
.mol-reveal {
opacity: 1;
transform: translateY(0);
transition: opacity 0.6s ease, transform 0.6s ease;
}
/* Hide only when JS is available */
.js .mol-reveal:not(.mol-reveal--visible) {
opacity: 0;
transform: translateY(30px);
}
.mol-reveal--visible {
opacity: 1 !important;
transform: translateY(0) !important;
}
[data-animate] {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
[data-animate].animate-in {
opacity: 1;
transform: translateY(0);
}
/* Parallax Effects */
.mol-parallax {
position: relative;
overflow: hidden;
}
.mol-parallax__layer {
position: absolute;
top: -20%;
left: 0;
right: 0;
bottom: -20%;
background-size: cover;
background-position: center;
will-change: transform;
}
/* Loading Animation */
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.fa-spin {
animation: spin 1s linear infinite;
}
/* Pulse Animation */
@keyframes pulse {
0% {
transform: scale(1);
opacity: 1;
}
50% {
transform: scale(1.05);
opacity: 0.8;
}
100% {
transform: scale(1);
opacity: 1;
}
}
.mol-pulse {
animation: pulse 2s ease-in-out infinite;
}
/* Fade In Animation */
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.mol-fade-in {
animation: fadeIn 0.8s ease-out forwards;
}
/* Slide In Animations */
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(50px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
.mol-slide-in-left {
animation: slideInLeft 0.8s ease-out forwards;
}
.mol-slide-in-right {
animation: slideInRight 0.8s ease-out forwards;
}
/* Scale In Animation */
@keyframes scaleIn {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
.mol-scale-in {
animation: scaleIn 0.6s ease-out forwards;
}
/* Hover Effects */
.mol-hover-lift {
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.mol-hover-lift:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
/* Text Effects */
.mol-text-gradient {
background: linear-gradient(135deg, var(--mol-primary) 0%, var(--mol-dark) 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* Smooth Scroll */
html {
scroll-behavior: smooth;
}
/* Scroll Progress Indicator */
.mol-scroll-progress {
position: fixed;
top: 0;
left: 0;
width: 0;
height: 3px;
background: var(--mol-primary);
z-index: 9999;
transition: width 0.2s ease;
}
/* Back to Top Button */
.mol-back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background: var(--mol-primary);
color: white;
border-radius: 50%;
border: 2px solid var(--mol-primary);
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
z-index: 999;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}
.mol-back-to-top--visible {
opacity: 1;
visibility: visible;
}
.mol-back-to-top:hover {
background: var(--mol-white);
color: var(--mol-primary);
transform: translateY(-3px);
box-shadow: 0 5px 20px rgba(51, 184, 225, 0.3);
}
@media (max-width: 768px) {
.mol-back-to-top {
bottom: 20px;
right: 20px;
width: 40px;
height: 40px;
}
}
/* Footer
========================================================================== */
.mol-footer {
background: var(--mol-dark);
color: white;
padding: 60px 0 30px;
margin-top: 80px;
}
/* WhatsApp link styling */
.mol-footer__whatsapp-link {
color: var(--mol-tirkiz) !important;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 5px;
font-size: 1rem;
font-weight: 400;
transition: all 0.3s ease;
margin-top: 5px;
}
.mol-footer__whatsapp-link:hover {
color: #16a294 !important;
transform: translateX(5px);
}
.mol-footer__whatsapp-link i {
font-size: 1.1rem;
}
.mol-footer__container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.mol-footer__grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 2fr;
gap: 40px;
margin-bottom: 50px;
}
.mol-footer__title {
font-size: 1.5rem;
font-weight: 800;
margin-bottom: 15px;
color: white;
}
.mol-footer__subtitle {
font-size: 1.1rem;
font-weight: 700;
margin-bottom: 20px;
color: white;
}
.mol-footer__text {
font-size: 0.95rem;
line-height: 1.6;
margin-bottom: 20px;
opacity: 0.8;
}
.mol-footer__social {
display: flex;
gap: 15px;
}
.mol-footer__social-link {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
color: white;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: all 0.3s ease;
}
.mol-footer__social-link:hover {
background: var(--mol-primary);
transform: translateY(-2px);
}
.mol-footer__links,
.mol-footer__info {
list-style: none;
padding: 0;
margin: 0;
}
.mol-footer__links li,
.mol-footer__info li {
margin-bottom: 12px;
}
.mol-footer__links a,
.mol-footer__info a {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
transition: color 0.3s ease;
}
.mol-footer__links a:hover,
.mol-footer__info a:hover {
color: var(--mol-primary);
}
.mol-footer__info li {
display: flex;
align-items: center;
gap: 10px;
}
.mol-footer__info i {
color: var(--mol-primary);
min-width: 20px;
}
.mol-footer__cta {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--mol-primary);
color: var(--mol-white);
padding: 12px 24px;
border-radius: 30px;
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
margin-top: 15px;
}
.mol-footer__cta:hover {
background: #2aa3c9;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(51, 184, 225, 0.3);
color: var(--mol-white);
}
.mol-footer__awards {
margin-top: 20px;
}
.mol-footer__award {
height: 60px;
width: auto;
opacity: 0.8;
filter: brightness(0) invert(1);
}
.mol-footer__newsletter {
display: flex;
margin-top: 15px;
}
.mol-footer__newsletter input {
flex: 1;
padding: 12px 15px;
border: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.1);
color: white;
border-radius: 30px 0 0 30px;
font-size: 0.95rem;
transition: all 0.3s ease;
}
.mol-footer__newsletter input::placeholder {
color: rgba(255, 255, 255, 0.6);
}
.mol-footer__newsletter input:focus {
outline: none;
background: rgba(255, 255, 255, 0.15);
border-color: var(--mol-primary);
}
.mol-footer__newsletter button {
padding: 0 20px;
background: var(--mol-primary);
border: 2px solid var(--mol-primary);
color: white;
border-radius: 0 30px 30px 0;
cursor: pointer;
transition: all 0.3s ease;
}
.mol-footer__newsletter button:hover {
background: var(--mol-white);
color: var(--mol-primary);
}
.mol-footer__bottom {
padding-top: 30px;
border-top: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
.mol-footer__bottom p {
margin: 0;
opacity: 0.8;
}
.mol-footer__legal {
display: flex;
gap: 15px;
align-items: center;
}
.mol-footer__legal a {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
transition: color 0.3s ease;
}
.mol-footer__legal a:hover {
color: var(--mol-primary);
}
.mol-footer__legal span {
opacity: 0.5;
}
@media (max-width: 968px) {
.mol-footer__grid {
grid-template-columns: 1fr 1fr;
gap: 30px;
}
}
@media (max-width: 768px) {
.mol-footer__grid {
text-align: left;
}
.mol-footer__column {
text-align: left !important;
}
.mol-footer__info {
text-align: left !important;
}
.mol-footer__info li {
justify-content: flex-start !important;
text-align: left !important;
}
.mol-footer__social {
justify-content: flex-start;
}
.mol-footer__title,
.mol-footer__subtitle {
text-align: left !important;
}
}
@media (max-width: 576px) {
.mol-footer {
padding: 40px 0 20px;
}
.mol-footer__grid {
grid-template-columns: 1fr;
gap: 25px;
text-align: left; /* Changed from center to left */
}
/* Keep contact info left-aligned */
.mol-footer__column {
text-align: left !important;
}
.mol-footer__info {
text-align: left !important;
}
.mol-footer__info li {
justify-content: flex-start !important;
text-align: left !important;
}
.mol-footer__bottom {
flex-direction: column;
text-align: center;
gap: 20px;
}
.mol-footer__legal {
flex-wrap: wrap;
justify-content: center;
}
.mol-footer__newsletter {
flex-direction: column;
gap: 10px;
}
.mol-footer__newsletter input,
.mol-footer__newsletter button {
width: 100%;
}
.mol-footer__social {
justify-content: flex-start; /* Changed from center to flex-start */
}
}
/* FINAL TURQUOISE LINE FIX - JavaScript inspection needed */
.mol-location__place {
border-bottom: none !important;
box-shadow: none !important;
overflow: hidden !important;
}
.mol-location__place:hover {
border-bottom: none !important;
box-shadow: none !important;
}
/* Check if line comes from gap between elements */
.mol-location__places-list {
background-color: var(--mol-white) !important;
padding: 0 !important;
padding-right: 15px !important;
max-height: 400px !important;
overflow-y: auto !important;
overflow-x: hidden !important;
}
/* Custom scrollbar styling */
.mol-location__places-list::-webkit-scrollbar {
width: 8px;
}
/* ==========================================================================
Back to Top Button
========================================================================== */
.mol-back-to-top {
position: fixed;
bottom: 30px;
right: 30px;
width: 50px;
height: 50px;
background-color: var(--mol-accent);
color: var(--mol-white);
border: none;
border-radius: 50%;
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: all 0.3s ease;
z-index: 999;
box-shadow: 0 4px 12px rgba(19, 185, 189, 0.3);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.mol-back-to-top::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at center, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.3s ease;
}
.mol-back-to-top:hover::before {
opacity: 1;
}
.mol-back-to-top svg {
width: 24px;
height: 24px;
transition: transform 0.3s ease;
position: relative;
z-index: 1;
}
.mol-back-to-top:hover svg {
transform: translateY(-2px);
}
/* Active state with rotation animation */
.mol-back-to-top--visible {
opacity: 1;
visibility: visible;
transform: translateY(0) rotate(0deg);
}
.mol-back-to-top--scrolling {
animation: rotate-up 0.6s ease;
}
@keyframes rotate-up {
0% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-5px) rotate(180deg);
}
100% {
transform: translateY(0) rotate(360deg);
}
}
@media (max-width: 768px) {
.mol-back-to-top {
bottom: 20px;
right: 20px;
width: 45px;
height: 45px;
}
.mol-back-to-top svg {
width: 20px;
height: 20px;
}
}
.mol-location__places-list::-webkit-scrollbar-track {
background: var(--mol-light-gray);
border-radius: 4px;
margin-right: 5px;
}
.mol-location__places-list::-webkit-scrollbar-thumb {
background: var(--mol-primary);
border-radius: 4px;
}
.mol-location__places-list::-webkit-scrollbar-thumb:hover {
background: #0a8c8f;
}
.mol-location__place {
margin-bottom: 8px !important;
margin-right: 10px !important;
background-clip: padding-box !important;
}
.mol-location__place:hover {
transform: translateX(5px) !important;
background: linear-gradient(135deg, var(--mol-primary) 0%, #0a8c8f 100%) !important;
color: white !important;
}
/* Ensure no turquoise line from Font Awesome icons */
.mol-location__place-icon i::before,
.mol-location__place-icon i::after {
border: none !important;
text-decoration: none !important;
box-shadow: none !important;
}
/* ABSOLUTE FINAL FIX - Remove ANY possible turquoise line */
.mol-location__place {
border: 0 solid transparent !important;
border-image: none !important;
background-origin: padding-box !important;
background-clip: padding-box !important;
-webkit-mask-image: none !important;
mask-image: none !important;
}
.mol-location__place:hover {
border: 0 solid transparent !important;
border-image: none !important;
border-bottom-color: transparent !important;
border-bottom-width: 0 !important;
border-bottom-style: none !important;
}
/* Fix potential gradient overflow */
.mol-location__place:hover::after {
position: absolute !important;
bottom: -10px !important;
left: 0 !important;
right: 0 !important;
height: 10px !important;
background: transparent !important;
pointer-events: none !important;
}
/* Ensure parent container clips content */
.mol-location__places {
position: relative !important;
}
.mol-location__places-list {
position: relative !important;
background: var(--mol-white) !important;
}
/* Apply to active state as well */
.mol-location__place--active {
border: 0 solid transparent !important;
border-image: none !important;
background: linear-gradient(135deg, var(--mol-primary) 0%, #0a8c8f 100%) !important;
color: white !important;
}
/* Highlight the main apartment location */
.mol-location__place--highlight {
background: linear-gradient(135deg, var(--mol-primary) 0%, #0a8c8f 100%) !important;
color: var(--mol-white) !important;
border: 2px solid var(--mol-primary) !important;
font-weight: 600;
}
.mol-location__place--highlight .mol-location__place-icon {
background: rgba(255, 255, 255, 0.3) !important;
color: var(--mol-white) !important;
}
.mol-location__place--highlight h4,
.mol-location__place--highlight p {
color: var(--mol-white) !important;
}
/* Location Section Mobile Styles */
@media (max-width: 768px) {
.mol-location__interactive {
grid-template-columns: 1fr !important;
gap: var(--spacing-md);
}
.mol-location__places {
max-height: none !important; /* Remove max height on mobile */
margin-bottom: var(--spacing-md);
padding: var(--spacing-md) !important; /* Smaller padding */
order: 1; /* Places first */
}
/* Show only first 4 locations initially on mobile */
.mol-location__places-list {
max-height: 240px !important; /* Increased height to show 3 full items */
overflow-y: auto !important;
overflow-x: hidden !important;
padding-right: 8px !important;
}
/* Smaller place items on mobile */
.mol-location__place {
padding: 8px 10px !important; /* Even smaller padding */
margin-bottom: 5px !important; /* Smaller gap */
gap: 10px !important;
}
/* Smaller icons on mobile */
.mol-location__place-icon {
width: 35px !important;
height: 35px !important;
font-size: 1rem !important;
flex-shrink: 0;
}
/* Smaller text on mobile */
.mol-location__place-info h4 {
font-size: 0.875rem !important;
margin-bottom: 2px !important;
line-height: 1.2;
}
.mol-location__place-info p {
font-size: 0.75rem !important;
line-height: 1.3;
opacity: 0.7;
}
/* Compact categories on mobile */
.mol-location__categories {
gap: 6px !important;
margin-bottom: 12px !important;
justify-content: flex-start;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 6px;
}
.mol-location__category {
padding: 6px 12px !important;
font-size: 0.75rem !important;
white-space: nowrap;
flex-shrink: 0;
}
.mol-location__category i {
display: none; /* Hide icons in categories on mobile */
}
/* Map container below locations */
.mol-location__map-container {
order: 2; /* Map second */
}
#mol-map {
height: 350px !important;
border-radius: 15px;
}
.mol-location__map-controls {
top: 10px;
right: 10px;
}
.mol-location__map-controls button {
width: 35px;
height: 35px;
font-size: 0.875rem;
}
/* Adjust hover effect for mobile */
.mol-location__place:hover {
transform: translateX(5px) !important;
}
/* Title adjustments */
.mol-location__places h3 {
font-size: 1.125rem !important;
margin-bottom: 12px !important;
}
}
/* Modern Contact Form Redesign
========================================================================== */
.mol-contact {
background: linear-gradient(180deg, #ffffff 0%, #f8fafb 100%) !important;
position: relative;
overflow: hidden;
}
.mol-contact::before {
content: '';
position: absolute;
top: -50%;
right: -10%;
width: 60%;
height: 200%;
background: radial-gradient(circle, rgba(19, 185, 189, 0.03) 0%, transparent 70%);
pointer-events: none;
}
/* Contact decoration - poruka simbol */
.mol-contact::after {
content: '💬';
position: absolute;
bottom: 120px;
left: 8%;
font-size: 28px;
opacity: 0.08;
transform: rotate(15deg);
}
.mol-contact__header {
position: relative;
z-index: 1;
}
.mol-contact__title {
background: linear-gradient(135deg, var(--mol-primary) 0%, #0a8c8f 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
/* Modern Form Design */
.mol-contact__form {
background: rgba(255, 255, 255, 0.95) !important;
backdrop-filter: blur(10px);
border: 1px solid rgba(19, 185, 189, 0.1);
box-shadow: 0 10px 40px rgba(19, 185, 189, 0.08) !important;
position: relative;
overflow: hidden;
}
.mol-contact__form::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, var(--mol-primary) 0%, #0a8c8f 100%);
}
.mol-contact__form-title {
color: var(--mol-primary);
position: relative;
padding-left: 20px;
}
.mol-contact__form-title::before {
content: '';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 24px;
background: var(--mol-primary);
border-radius: 2px;
}
/* Modern Input Styling */
.mol-contact__form-input,
.mol-contact__form-textarea {
background: #f8fafb !important;
border: 2px solid transparent !important;
padding: 16px 20px !important;
font-size: 16px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.mol-contact__form-input:hover,
.mol-contact__form-textarea:hover {
background: #ffffff !important;
border-color: rgba(19, 185, 189, 0.2) !important;
}
.mol-contact__form-input:focus,
.mol-contact__form-textarea:focus {
background: #ffffff !important;
border-color: var(--mol-primary) !important;
box-shadow: 0 0 0 4px rgba(19, 185, 189, 0.1) !important;
transform: translateY(-1px);
}
.mol-contact__form-label {
color: #2c3e50;
font-weight: 500;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Modern Submit Button */
.mol-contact__form-submit {
background: linear-gradient(135deg, var(--mol-primary) 0%, #0a8c8f 100%) !important;
border: none !important;
padding: 18px 40px !important;
font-size: 16px;
font-weight: 600;
letter-spacing: 0.5px;
text-transform: uppercase;
border-radius: 50px !important;
position: relative;
overflow: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.mol-contact__form-submit::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.mol-contact__form-submit:hover::before {
width: 400px;
height: 400px;
}
.mol-contact__form-submit:hover {
transform: translateY(-2px) !important;
box-shadow: 0 10px 30px rgba(19, 185, 189, 0.3) !important;
}
.mol-contact__form-submit.success {
background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%) !important;
}
/* Modern Info Cards */
.mol-contact__info-card {
background: linear-gradient(135deg, #ffffff 0%, #f8fafb 100%) !important;
border: 1px solid rgba(19, 185, 189, 0.1);
position: relative;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.mol-contact__info-card::before {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: linear-gradient(135deg, var(--mol-primary) 0%, #0a8c8f 100%);
border-radius: 12px;
opacity: 0;
z-index: -1;
transition: opacity 0.3s ease;
}
.mol-contact__info-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(19, 185, 189, 0.15) !important;
}
.mol-contact__info-card:hover::before {
opacity: 0.1;
}
.mol-contact__info-icon {
background: linear-gradient(135deg, var(--mol-primary) 0%, #0a8c8f 100%) !important;
color: white !important;
font-size: 20px !important;
box-shadow: 0 4px 15px rgba(19, 185, 189, 0.2);
}
.mol-contact__info-value {
color: #2c3e50;
}
.mol-contact__info-value a:hover {
color: var(--mol-primary) !important;
text-decoration: none;
}
/* Modern Social Links */
.mol-contact__social-link {
background: #f8fafb !important;
color: var(--mol-primary) !important;
border: 2px solid rgba(19, 185, 189, 0.1);
position: relative;
overflow: hidden;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.mol-contact__social-link::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: linear-gradient(135deg, var(--mol-primary) 0%, #0a8c8f 100%);
border-radius: 50%;
transform: translate(-50%, -50%);
transition: all 0.5s ease;
}
.mol-contact__social-link:hover {
color: white !important;
border-color: transparent !important;
transform: translateY(-3px) rotate(360deg) !important;
box-shadow: 0 8px 25px rgba(19, 185, 189, 0.3) !important;
}
.mol-contact__social-link:hover::before {
width: 100px;
height: 100px;
}
.mol-contact__social-link i {
position: relative;
z-index: 1;
}
/* Map Enhancement */
.mol-contact__map {
border-radius: 16px !important;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
border: 3px solid white;
}
/* Responsive Adjustments */
@media (max-width: 968px) {
.mol-contact__form {
margin-bottom: 20px;
}
.mol-contact__form-submit {
width: 100%;
justify-content: center;
}
}
/* Animation on scroll */
.mol-contact__form,
.mol-contact__info-card {
opacity: 0;
transform: translateY(20px);
transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.mol-contact__form.mol-reveal--visible,
.mol-contact__info-card.mol-reveal--visible {
opacity: 1;
transform: translateY(0);
}
.mol-contact__info-card:nth-child(2) {
transition-delay: 0.1s;
}
.mol-contact__info-card:nth-child(3) {
transition-delay: 0.2s;
}
/* Reviews Section Enhancement
========================================================================== */
.mol-reviews__tabs {
display: flex;
justify-content: center;
gap: 15px;
margin-bottom: 40px;
flex-wrap: wrap;
}
.mol-reviews__tab {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 24px;
background: var(--mol-white);
border: 2px solid #e0e0e0;
border-radius: 50px;
font-size: 16px;
font-weight: 500;
color: var(--mol-text);
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.mol-reviews__tab:hover {
border-color: var(--mol-primary);
transform: translateY(-2px);
box-shadow: 0 5px 20px rgba(19, 185, 189, 0.1);
}
.mol-reviews__tab--active {
background: linear-gradient(135deg, var(--mol-primary) 0%, #0a8c8f 100%);
color: white;
border-color: transparent;
}
.mol-reviews__tab--active:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(19, 185, 189, 0.2);
}
.mol-reviews__tab svg {
width: 20px;
height: 20px;
}
.mol-reviews__tab-badge {
background: rgba(255, 255, 255, 0.2);
padding: 2px 8px;
border-radius: 12px;
font-size: 12px;
font-weight: 700;
}
.mol-reviews__tab--active .mol-reviews__tab-badge {
background: rgba(255, 255, 255, 0.3);
}
/* Review Card Source Badges */
/* Review Card Star Rating */
.mol-review-card__rating {
display: flex;
gap: 2px;
margin-bottom: 15px;
}
.mol-review-card__star {
width: 16px;
height: 16px;
color: #FFC107;
fill: #FFC107;
}
/* Review Card Styling */
.mol-review-card {
background: white;
border-radius: 16px;
padding: 30px;
padding-bottom: 70px;
position: relative;
box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.mol-review-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 30px rgba(19, 185, 189, 0.1);
}
.mol-review-card__header {
display: flex;
align-items: flex-start;
gap: 15px;
margin-bottom: 15px;
}
.mol-review-card__avatar {
font-size: 40px;
line-height: 1;
}
.mol-review-card__info {
flex: 1;
}
.mol-review-card__name {
font-size: 18px;
font-weight: 700;
color: var(--mol-dark);
margin-bottom: 4px;
}
.mol-review-card__location {
font-size: 14px;
color: var(--mol-text-secondary);
}
.mol-review-card__date {
font-size: 14px;
color: var(--mol-text-secondary);
margin-left: auto;
}
.mol-review-card__text {
font-size: 16px;
line-height: 1.6;
color: var(--mol-text);
margin-top: 15px;
}
.mol-review-card__footer {
position: absolute;
bottom: 20px;
left: 20px;
right: 20px;
}
.mol-review-card__source {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
border-radius: 20px;
font-size: 12px;
font-weight: 500;
background: #f5f5f5;
}
.mol-review-card__source svg {
width: 16px;
height: 16px;
}
.mol-review-card__source--google {
background: #f8f9fa;
color: #5f6368;
border: 1px solid #e8eaed;
}
.mol-review-card__source--google .fa-check-circle {
color: #1a73e8;
margin-left: 4px;
}
.mol-review-card__source--tripadvisor {
background: #f2faf8;
color: #00735c;
border: 1px solid #00af87;
}
.mol-review-card__helpful {
margin-left: 8px;
padding-left: 8px;
border-left: 1px solid #00af8750;
}
.mol-review-card__helpful i {
margin-right: 4px;
color: #00af87;
}
/* Review filtering animation */
.mol-review-card--hidden {
opacity: 0;
transform: scale(0.9);
position: absolute;
pointer-events: none;
}
/* External Review Links */
.mol-reviews__external-links {
display: flex;
justify-content: center;
gap: 20px;
margin-top: 60px;
flex-wrap: wrap;
}
.mol-reviews__external-link {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 16px 32px;
background: var(--mol-white);
border: 2px solid #e0e0e0;
border-radius: 50px;
font-size: 16px;
font-weight: 600;
color: var(--mol-text);
text-decoration: none;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.mol-reviews__external-link::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
transform: translate(-50%, -50%);
transition: all 0.5s ease;
}
.mol-reviews__external-link:hover {
transform: translateY(-3px);
color: white;
}
.mol-reviews__external-link:hover::before {
width: 400px;
height: 400px;
}
.mol-reviews__external-link--google:hover {
border-color: #4285F4;
box-shadow: 0 8px 30px rgba(66, 133, 244, 0.3);
}
.mol-reviews__external-link--google::before {
background: #4285F4;
}
.mol-reviews__external-link--tripadvisor:hover {
border-color: #00AF87;
box-shadow: 0 8px 30px rgba(0, 175, 135, 0.3);
}
.mol-reviews__external-link--tripadvisor::before {
background: #00AF87;
}
.mol-reviews__external-link svg {
width: 24px;
height: 24px;
position: relative;
z-index: 1;
}
.mol-reviews__external-link span,
.mol-reviews__external-link i {
position: relative;
z-index: 1;
}
.mol-reviews__external-link i {
font-size: 14px;
opacity: 0.7;
}
@media (max-width: 768px) {
.mol-reviews__tabs {
gap: 10px;
}
.mol-reviews__tab {
padding: 10px 20px;
font-size: 14px;
}
.mol-reviews__external-link {
padding: 14px 24px;
font-size: 14px;
}
}
/* ==========================================================================
Comprehensive Mobile Optimizations
========================================================================== */
@media (max-width: 767px) {
/* Global optimizations */
body {
font-size: 0.95rem;
line-height: 1.6;
}
/* Typography optimizations */
h1 {
font-size: 1.75rem !important;
line-height: 1.3;
margin-bottom: 15px;
}
h2 {
font-size: 1.5rem !important;
line-height: 1.3;
margin-bottom: 15px;
}
h3 {
font-size: 1.25rem !important;
line-height: 1.4;
margin-bottom: 12px;
}
h4 {
font-size: 1.1rem !important;
line-height: 1.4;
margin-bottom: 10px;
}
p {
font-size: 0.95rem;
line-height: 1.6;
}
/* Container optimizations */
.mol-container {
padding: 0 20px !important;
max-width: 100%;
}
/* Section spacing optimizations */
.mol-section {
padding: 50px 0 !important;
}
/* Header optimizations */
.mol-header__container {
padding: 0 15px;
}
/* Removed to allow bigger logo on mobile */
.mol-header__actions {
gap: 10px;
}
.mol-header__menu-toggle {
width: 40px;
height: 40px;
}
/* Hero section optimizations */
.mol-hero {
padding-top: 0 !important;
min-height: calc(100vh - var(--header-height-mobile)) !important;
}
.mol-hero__content {
padding: 2rem 20px !important;
text-align: center;
}
.mol-hero__label {
font-size: 0.7rem !important;
padding: 5px 10px;
margin-bottom: 10px;
}
.mol-hero__title {
font-size: 1.5rem !important;
line-height: 1.3;
margin-bottom: 12px;
}
.mol-hero__subtitle {
font-size: 0.9rem !important;
line-height: 1.5;
margin-bottom: 20px;
}
.mol-hero__cta {
padding: 12px 24px !important;
font-size: 0.85rem !important;
min-height: 44px;
}
.mol-hero__reviews {
margin-top: 15px;
}
.mol-hero__reviews-link {
font-size: 0.8rem !important;
padding: 8px 12px;
}
.mol-hero__image {
height: 40vh !important;
}
/* About section optimizations */
.mol-about__eyebrow {
font-size: 0.85rem;
margin-bottom: 10px;
}
.mol-about__title {
font-size: 1.5rem !important;
margin-bottom: 15px;
}
.mol-about__visual {
height: 350px !important;
margin: 0 -20px 20px;
}
.mol-about__card {
left: 15px !important;
right: 15px !important;
bottom: -70px !important; /* Keep it extending outside */
padding: 15px !important;
}
.mol-about__distance-value {
font-size: 1.5rem !important;
}
/* Features section optimizations */
.mol-features__grid {
gap: 20px !important;
}
.mol-feature {
padding: 20px !important;
}
.mol-feature__icon {
width: 50px !important;
height: 50px !important;
margin-bottom: 15px;
}
.mol-feature__title {
font-size: 1.1rem !important;
margin-bottom: 10px;
}
.mol-feature__description {
font-size: 0.9rem;
}
/* Gallery section optimizations */
.mol-gallery__filter {
gap: 8px !important;
margin-bottom: 20px;
flex-wrap: wrap;
}
.mol-gallery__filter-btn {
padding: 8px 16px !important;
font-size: 0.8rem !important;
min-height: 40px;
}
/* Location section optimizations */
.mol-location__map-wrapper {
gap: 20px;
}
#mol-map {
height: 350px !important;
}
.mol-location__places {
max-height: 350px !important;
}
.mol-location__place {
padding: 12px !important;
}
.mol-location__place-title {
font-size: 0.95rem !important;
}
.mol-location__place-distance {
font-size: 0.85rem;
}
/* Activities section optimizations */
.mol-activities__grid {
gap: 15px !important;
}
.mol-activity-item__link {
padding: 15px !important;
min-height: 80px;
}
.mol-activity-item__icon {
width: 45px !important;
height: 45px !important;
}
.mol-activity-item__title {
font-size: 0.95rem !important;
}
/* Reviews section optimizations */
.mol-reviews__tabs {
gap: 8px !important;
margin-bottom: 25px;
}
.mol-reviews__tab {
padding: 10px 15px !important;
font-size: 0.85rem !important;
min-height: 40px;
}
.mol-review {
padding: 20px !important;
}
.mol-review__name {
font-size: 0.95rem !important;
}
.mol-review__text {
font-size: 0.9rem;
line-height: 1.6;
}
/* YouTube section optimizations */
.mol-youtube__video-info {
padding: 15px !important;
}
.mol-youtube__video-title {
font-size: 0.95rem !important;
}
/* Touch targets optimization */
button,
a.mol-btn,
.mol-header__cta,
.mol-gallery__filter-btn,
.mol-reviews__tab,
.mol-activity-item__link {
min-height: 44px;
display: flex;
align-items: center;
justify-content: center;
}
/* Form optimizations */
input,
textarea,
select {
font-size: 16px !important; /* Prevents zoom on iOS */
min-height: 44px;
}
/* Mobile menu optimizations */
.mol-mobile-menu__link {
padding: 15px 20px;
font-size: 1rem;
}
.mol-mobile-menu__lang-item {
padding: 10px 15px;
min-height: 44px;
}
.mol-mobile-menu__cta {
padding: 15px 30px;
font-size: 0.95rem;
min-height: 48px;
}
}
/* Small mobile devices */
@media (max-width: 480px) {
/* Extra small optimizations */
.mol-hero__title {
font-size: 1.35rem !important;
}
.mol-hero__subtitle {
font-size: 0.85rem !important;
}
.mol-section {
padding: 40px 0 !important;
}
.mol-container {
padding: 0 15px !important;
}
.mol-gallery__grid {
grid-template-columns: 1fr !important;
}
.mol-footer__grid {
gap: 20px !important;
}
}
/* ==========================================================================
Mobile Menu Styles
========================================================================== */
.mol-mobile-menu {
position: fixed;
top: var(--header-height-mobile);
right: -100%;
width: 100%;
height: calc(100vh - var(--header-height-mobile));
background: white;
z-index: 9999;
transition: right 0.3s ease;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.mol-mobile-menu--active {
right: 0;
}
.mol-mobile-menu__container {
padding: 20px;
height: 100%;
display: flex;
flex-direction: column;
}
.mol-mobile-menu__close {
position: absolute;
top: 20px;
right: 20px;
width: 40px;
height: 40px;
background: transparent;
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
}
.mol-mobile-menu__list {
list-style: none;
padding: 0;
margin: 40px 0 20px;
}
.mol-mobile-menu__item {
margin-bottom: 5px;
}
.mol-mobile-menu__link {
display: block;
padding: 15px 20px;
font-size: 1.1rem;
font-weight: 500;
color: var(--mol-gray-dark);
text-decoration: none;
transition: all 0.3s ease;
border-radius: 8px;
}
.mol-mobile-menu__link:hover,
.mol-mobile-menu__link:focus {
background: var(--mol-light-gray);
color: var(--mol-primary);
}
.mol-mobile-menu__lang {
margin-bottom: 30px;
padding: 20px 0;
border-top: 1px solid var(--mol-light-gray);
border-bottom: 1px solid var(--mol-light-gray);
}
.mol-mobile-menu__lang-title {
font-size: 0.9rem;
font-weight: 600;
color: var(--mol-gray);
margin-bottom: 15px;
text-transform: uppercase;
}
.mol-mobile-menu__lang-list {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.mol-mobile-menu__lang-item {
display: flex;
align-items: center;
gap: 8px;
padding: 10px 15px;
background: var(--mol-light-gray);
border-radius: 8px;
text-decoration: none;
color: var(--mol-gray-dark);
transition: all 0.3s ease;
min-height: 44px;
}
.mol-mobile-menu__lang-item:hover,
.mol-mobile-menu__lang-item--active {
background: var(--mol-primary);
color: white;
}
.mol-mobile-menu__lang-flag {
width: 20px;
height: 15px;
object-fit: cover;
border-radius: 2px;
}
.mol-mobile-menu__cta {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 15px 30px;
background: var(--mol-primary);
color: white;
text-decoration: none;
font-weight: 600;
border-radius: 8px;
transition: all 0.3s ease;
margin: 20px 0;
min-height: 48px;
}
.mol-mobile-menu__cta:hover {
background: var(--mol-primary-dark);
transform: translateY(-2px);
}
.mol-mobile-menu__contact {
margin-top: auto;
padding-top: 20px;
}
.mol-mobile-menu__contact-title {
font-size: 1rem;
font-weight: 600;
margin-bottom: 15px;
}
.mol-mobile-menu__contact-item {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 15px;
font-size: 0.9rem;
}
.mol-mobile-menu__contact-item svg {
flex-shrink: 0;
color: var(--mol-primary);
}
.mol-mobile-menu__contact-item a {
color: var(--mol-gray-dark);
text-decoration: none;
}
.mol-mobile-menu__contact-item a:hover {
color: var(--mol-primary);
}
.mol-mobile-menu__social {
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid var(--mol-light-gray);
}
.mol-mobile-menu__social-title {
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 15px;
}
.mol-mobile-menu__social-links {
display: flex;
gap: 10px;
}
.mol-mobile-menu__social-link {
width: 40px;
height: 40px;
background: var(--mol-light-gray);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
}
.mol-mobile-menu__social-link:hover {
background: var(--mol-primary);
transform: translateY(-2px);
}
.mol-mobile-menu__social-link svg {
width: 20px;
height: 20px;
}
/* Overlay for mobile menu */
body.menu-open {
overflow: hidden;
}
body.menu-open::after {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 9998;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
body.menu-open::after {
opacity: 1;
visibility: visible;
}
/* ==========================================================================
Language Switcher Styles
========================================================================== */
.mol-header__lang-switcher {
position: relative;
}
.mol-lang-dropdown__trigger {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: transparent;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
font-size: 0.875rem;
font-weight: 600;
color: var(--mol-gray-dark);
}
.mol-lang-dropdown__trigger:hover {
border-color: var(--mol-primary);
background: rgba(51, 184, 225, 0.05);
}
.mol-lang-dropdown__trigger-flag {
width: 20px;
height: 14px;
object-fit: cover;
border-radius: 2px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}
.mol-lang-dropdown__current {
font-size: 0.875rem;
font-weight: 600;
}
.mol-lang-dropdown__menu {
position: absolute;
top: calc(100% + 8px);
right: 0;
background: white;
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
padding: 8px;
min-width: 180px;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
z-index: 1000;
}
.mol-header__lang-switcher:hover .mol-lang-dropdown__menu,
.mol-lang-dropdown__trigger:focus + .mol-lang-dropdown__menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.mol-lang-dropdown__item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 12px;
border-radius: 6px;
text-decoration: none;
color: var(--mol-gray-dark);
font-size: 0.875rem;
font-weight: 500;
transition: all 0.2s ease;
}
.mol-lang-dropdown__item:hover {
background: var(--mol-light-gray);
color: var(--mol-primary);
}
.mol-lang-dropdown__item--active {
background: rgba(51, 184, 225, 0.1);
color: var(--mol-primary);
}
.mol-lang-dropdown__flag {
width: 20px;
height: 14px;
object-fit: cover;
border-radius: 2px;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}
/* Mobile language switcher adjustments */
@media (max-width: 767px) {
.mol-lang-dropdown__trigger {
padding: 6px 12px;
font-size: 0.8rem;
}
.mol-lang-dropdown__trigger-flag {
width: 18px;
height: 12px;
}
.mol-lang-dropdown__menu {
right: -10px;
}
}
/* ==========================================================================
Plugin Rezervacije - Hide Language Switcher
========================================================================== */
/* Hide plugin's language switcher since we use Polylang in header */
.apartman-language-switcher {
display: none !important;
}
/* Ensure form uses full width without language switcher */
.apartman-form-container {
max-width: 100% !important;
}
/* ===== YOUTUBE SECTION ===== */
.mol-youtube {
background: linear-gradient(135deg, #f8feff 0%, #e8f8ff 100%);
position: relative;
overflow: hidden;
padding: var(--section-padding) 0;
}
.mol-youtube::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
pointer-events: none;
}
/* YouTube decoration - play simbol */
.mol-youtube::after {
content: '▶';
position: absolute;
bottom: 100px;
left: 10%;
font-size: 40px;
color: rgba(255, 0, 0, 0.06);
transform: rotate(-20deg);
}
.mol-youtube__header {
text-align: center;
margin-bottom: var(--spacing-xxxl);
}
.mol-youtube__title {
font-size: clamp(2rem, 5vw, 3rem);
font-weight: 700;
line-height: 1.2;
margin-bottom: var(--spacing-md);
color: var(--color-text);
}
.mol-youtube__title-highlight {
color: var(--color-primary);
position: relative;
}
.mol-youtube__title-highlight::after {
content: '';
position: absolute;
bottom: -5px;
left: 0;
width: 100%;
height: 8px;
background: linear-gradient(90deg, rgba(51, 184, 225, 0.3) 0%, rgba(51, 184, 225, 0.15) 100%);
transform: skewY(-1deg);
border-radius: 2px;
}
.mol-youtube__subtitle {
font-size: 1.125rem;
color: var(--color-text-light);
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
.mol-youtube__grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--spacing-xl);
max-width: 1400px;
margin: 0 auto;
}
.mol-youtube__item {
background: white;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
border: 1px solid rgba(19, 185, 189, 0.1);
}
.mol-youtube__item:hover {
transform: translateY(-8px);
box-shadow: 0 12px 40px rgba(19, 185, 189, 0.15);
border-color: rgba(19, 185, 189, 0.2);
}
.mol-youtube__video-wrapper {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
overflow: hidden;
background: #000;
}
.mol-youtube__video-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
border-radius: 0;
}
.mol-youtube__video-info {
padding: var(--spacing-lg);
}
.mol-youtube__video-title {
font-size: 1.25rem;
font-weight: 600;
color: var(--color-text);
margin-bottom: var(--spacing-sm);
line-height: 1.4;
}
.mol-youtube__video-description {
font-size: 0.95rem;
color: var(--color-text-light);
line-height: 1.6;
margin: 0;
}
/* YouTube icon decoration */
.mol-youtube__item::before {
content: '';
position: absolute;
top: 20px;
right: 20px;
width: 32px;
height: 32px;
background: #FF0000;
border-radius: 6px;
z-index: 1;
opacity: 0.9;
background-image: url('data:image/svg+xml,');
background-size: 20px;
background-position: center;
background-repeat: no-repeat;
transition: all 0.3s ease;
}
.mol-youtube__item:hover::before {
transform: scale(1.1);
opacity: 1;
}
/* Responsive adjustments */
@media (max-width: 1024px) {
.mol-youtube__grid {
gap: var(--spacing-lg);
max-width: 100%;
padding: 0 var(--spacing-md);
}
}
@media (max-width: 900px) {
.mol-youtube__grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--spacing-lg);
padding: 0 var(--spacing-md);
}
}
@media (max-width: 600px) {
.mol-youtube {
padding: var(--spacing-lg) 0;
}
.mol-youtube__grid {
grid-template-columns: 1fr;
gap: var(--spacing-lg);
padding: 0 var(--spacing-md);
}
.mol-youtube__item {
border-radius: 12px;
}
.mol-youtube__video-info {
padding: var(--spacing-md);
}
.mol-youtube__video-title {
font-size: 1.125rem;
}
.mol-youtube__video-description {
font-size: 0.9rem;
}
.mol-youtube__title {
font-size: 2rem;
}
.mol-youtube__subtitle {
font-size: 1rem;
padding: 0 var(--spacing-md);
}
}
@media (max-width: 480px) {
.mol-youtube {
padding: var(--spacing-md) 0;
}
.mol-youtube__grid {
gap: var(--spacing-md);
}
.mol-youtube__video-info {
padding: var(--spacing-sm);
}
.mol-youtube__item::before {
width: 28px;
height: 28px;
background-size: 16px;
top: 15px;
right: 15px;
}
}
/* =============================================================================
RESERVATION PAGE STYLES
============================================================================= */
/* Reservation Main */
.mol-main--reservation {
padding-top: var(--header-height);
overflow-x: hidden; /* Prevent horizontal scroll */
width: 100%;
position: relative;
}
/* Ensure body doesn't shift content */
body.page-template-page-rezerviraj {
overflow-x: hidden;
}
/* Reservation Page Header */
.mol-reservation-page-header {
text-align: center;
margin-bottom: 3rem;
padding: 2rem 1rem;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.mol-reservation-page-header__title {
font-size: clamp(2rem, 5vw, 3.5rem);
font-weight: 700;
margin-bottom: 1.5rem;
line-height: 1.2;
color: #333;
max-width: 100%;
padding: 0 1rem;
}
.mol-reservation-page-header__subtitle {
font-size: 1.25rem;
color: #666;
max-width: 800px;
margin: 0 auto;
line-height: 1.6;
padding: 0 1rem;
}
/* Turquoise Highlight Effect */
.mol-text-highlight {
position: relative;
display: inline-block;
color: var(--primary-color);
font-weight: 700;
z-index: 1;
}
.mol-text-highlight::after {
content: '';
position: absolute;
bottom: -2px;
left: -4px;
right: -4px;
height: 12px;
background: linear-gradient(90deg, rgba(0, 159, 161, 0.3) 0%, rgba(0, 159, 161, 0.2) 100%);
transform: skewY(-2deg);
z-index: -1;
transition: all 0.3s ease;
}
.mol-text-highlight:hover::after {
height: 100%;
bottom: 0;
background: linear-gradient(90deg, rgba(0, 159, 161, 0.15) 0%, rgba(0, 159, 161, 0.1) 100%);
}
/* Reservation Form Section */
.mol-reservation-form {
padding: 4rem 0;
background: #f8f9fa;
width: 100%;
}
/* Fix centering by resetting container padding on reservation page */
.mol-main--reservation .mol-container {
padding: 0 20px;
max-width: 1440px;
margin: 0 auto;
position: relative;
}
.mol-reservation-form__wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
max-width: 1200px;
margin: 0 auto;
}
.mol-reservation-form__wrapper--single-column {
grid-template-columns: 1fr;
max-width: 1400px;
margin: 0 auto;
position: relative;
}
/* Override plugin's mobile positioning that causes right shift */
.mol-main--reservation #apartman-rezervacije-wrapper {
position: static !important;
left: auto !important;
right: auto !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;
max-width: 100% !important;
transform: none !important;
box-sizing: border-box !important;
}
/* Ensure all plugin content stays centered */
.mol-main--reservation .apartman-calendar-grid,
.mol-main--reservation #apartman-reservation-form,
.mol-main--reservation .apartman-map-container {
margin-left: auto !important;
margin-right: auto !important;
position: relative !important;
transform: none !important;
}
@media (max-width: 768px) {
.mol-main--reservation #apartman-rezervacije-wrapper {
padding: 15px !important;
margin: 0 !important;
position: static !important;
left: auto !important;
right: auto !important;
width: 100% !important;
max-width: 100% !important;
overflow-x: hidden !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;
max-width: 100% !important;
transform: none !important;
}
}
/* Reservation Info */
.mol-reservation-info__card {
background: white;
border-radius: 12px;
padding: 2rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
height: fit-content;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
align-items: center;
}
.mol-reservation-info__image {
margin-bottom: 0;
border-radius: 8px;
overflow: hidden;
}
.mol-reservation-info__image img {
width: 100%;
height: 350px;
object-fit: cover;
}
.mol-reservation-info__content h2 {
color: var(--primary-color);
margin-bottom: 1.5rem;
font-size: 1.5rem;
}
.mol-reservation-info__features {
margin-bottom: 1.5rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
}
.mol-reservation-info__feature {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 0.75rem;
font-size: 0.95rem;
}
.mol-reservation-info__feature i {
color: var(--primary-color);
width: 16px;
flex-shrink: 0;
}
.mol-reservation-info__location {
display: flex;
align-items: flex-start;
gap: 0.75rem;
padding-top: 1rem;
border-top: 1px solid #eee;
color: #666;
font-size: 0.95rem;
}
.mol-reservation-info__location i {
color: var(--primary-color);
margin-top: 0.25rem;
flex-shrink: 0;
}
.mol-reservation-info__contact {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid #eee;
font-size: 0.95rem;
color: #666;
line-height: 1.6;
}
.mol-reservation-info__contact p {
margin: 0 0 0.5rem 0;
}
.mol-reservation-info__contact p:last-child {
margin-bottom: 0;
}
.mol-reservation-info__contact a {
color: var(--primary-color);
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.mol-reservation-info__contact a:hover {
color: var(--primary-dark);
text-decoration: underline;
}
/* Social Icons in Info Card */
.mol-reservation-info__social {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid #eee;
}
.mol-reservation-info__social p {
margin: 0 0 1rem 0;
color: #666;
font-weight: 600;
}
.mol-reservation-info__social-icons {
display: flex;
gap: 1rem;
align-items: center;
}
.mol-reservation-info__social-icon {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: #f8f9fa;
color: #666;
border-radius: 50%;
text-decoration: none;
transition: all 0.3s ease;
font-size: 1.2rem;
}
.mol-reservation-info__social-icon:hover {
background: #e9ecef;
color: #333;
transform: translateY(-2px);
}
/* Mobile Styles - Reservation Page */
@media (max-width: 768px) {
/* Reservation Page Mobile Optimization */
.mol-main--reservation {
padding: 0;
margin: 0;
}
.mol-reservation-form.mol-section {
padding: 20px 0;
}
.mol-reservation-form__wrapper--single-column {
padding: 0 15px;
}
/* Page Header Mobile */
.mol-reservation-page-header {
padding: 20px 0 30px;
}
.mol-reservation-page-header__title {
font-size: 1.75rem;
line-height: 1.3;
margin-bottom: 15px;
}
.mol-reservation-page-header__subtitle {
font-size: 1rem;
line-height: 1.5;
}
/* Info Card Mobile */
.mol-reservation-info__card {
flex-direction: column;
padding: 0;
margin-bottom: 30px;
border-radius: 12px;
overflow: hidden;
}
.mol-reservation-info__image {
width: 100%;
height: 200px;
margin-bottom: 0;
}
.mol-reservation-info__content {
padding: 20px;
}
.mol-reservation-info__content h2 {
font-size: 1.5rem;
margin-bottom: 15px;
text-align: left;
}
.mol-reservation-info__features {
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 15px;
text-align: left;
}
.mol-reservation-info__feature {
font-size: 0.9rem;
padding: 8px;
display: flex;
align-items: center;
gap: 8px;
text-align: left;
margin: 0;
}
.mol-reservation-info__feature i {
font-size: 1.1rem;
margin-right: 5px;
}
.mol-reservation-info__location,
.mol-reservation-info__contact {
font-size: 0.9rem;
}
/* Social Icons Mobile */
.mol-reservation-info__social {
padding-top: 15px;
margin-top: 15px;
}
.mol-reservation-info__social p {
font-size: 0.9rem;
margin-bottom: 10px;
}
.mol-reservation-info__social-icons {
gap: 10px;
}
.mol-reservation-info__social-icon {
width: 36px;
height: 36px;
font-size: 1.1rem;
}
/* Booking Form Mobile */
.mol-reservation-booking__card {
padding: 20px;
margin-bottom: 30px;
}
.mol-reservation-booking__title {
font-size: 1.25rem;
margin-bottom: 20px;
}
/* Form Fields Mobile */
.mol-form-row {
flex-direction: column;
gap: 15px;
margin-bottom: 20px;
}
.mol-form-field label {
font-size: 0.9rem;
margin-bottom: 5px;
}
.mol-form-field input,
.mol-form-field select,
.mol-form-field textarea {
font-size: 16px; /* Prevents zoom on iOS */
padding: 12px;
border-radius: 8px;
}
.mol-checkbox {
font-size: 0.9rem;
}
.mol-reservation-form__submit {
font-size: 1rem;
padding: 14px;
border-radius: 8px;
}
/* Plugin Form Mobile Styles */
#apartman-rezervacije-wrapper {
padding: 0 15px !important;
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
overflow-x: hidden !important;
}
.apartman-intro {
margin: 0 15px 20px;
padding: 15px;
font-size: 0.9rem;
}
.apartman-info-header {
margin: 0 15px 20px;
padding: 20px;
}
.apartman-title h2 {
font-size: 1.25rem;
}
.apartman-address {
font-size: 0.9rem;
}
.apartman-contact h3 {
font-size: 1rem;
}
.contact-info {
font-size: 0.9rem;
}
.app-badge {
font-size: 11px;
padding: 5px 10px;
}
.reservation-instruction {
font-size: 0.9rem;
padding: 10px 14px;
}
.apartman-social {
margin-top: 15px;
padding-top: 15px;
}
.apartman-social h4 {
font-size: 0.9rem;
}
.social-link {
font-size: 11px;
padding: 6px 10px;
}
/* Calendar Mobile */
.calendar-instructions {
margin: 0 15px 15px;
font-size: 0.85rem;
padding: 10px 14px;
}
#apartman-calendar-container {
margin-bottom: 20px;
}
.apartman-calendar-grid {
padding: 0 5px;
}
.calendar-month {
min-width: 280px;
max-width: 280px;
flex: 0 0 280px;
}
.calendar-header {
padding: 12px;
font-size: 0.9rem;
}
.day-header {
font-size: 11px;
padding: 8px 3px;
}
.calendar-day {
padding: 5px 2px;
min-height: 32px;
font-size: 12px;
}
.day-price {
font-size: 9px;
}
/* Legend Mobile */
.apartman-calendar-legend {
margin: 0 15px 20px;
font-size: 0.85rem;
gap: 10px;
flex-wrap: wrap;
}
.legend-item {
gap: 5px;
}
.legend-color {
width: 14px;
height: 14px;
}
.legend-text {
font-size: 0.85rem;
}
/* Form Mobile */
#apartman-reservation-form {
margin: 20px 15px 0;
padding: 20px;
border-radius: 8px;
}
.form-section {
margin-bottom: 25px;
}
.form-section h3 {
font-size: 1.1rem;
margin-bottom: 15px;
padding-bottom: 8px;
}
.selected-dates {
padding: 15px;
font-size: 0.9rem;
}
.selected-dates p {
font-size: 0.85rem;
margin: 4px 0;
}
.form-group label {
font-size: 0.9rem;
}
.form-group input,
.form-group select,
.form-group textarea {
font-size: 16px; /* Prevents zoom on iOS */
padding: 12px;
}
.form-notice {
font-size: 0.85rem;
padding: 12px;
margin-bottom: 15px;
}
.btn {
font-size: 1rem;
padding: 14px 20px;
}
/* Messages Mobile */
#apartman-message {
font-size: 0.9rem;
padding: 12px;
margin-top: 15px;
}
/* Thank You Message Mobile */
.apartman-thank-you-message {
padding: 20px;
margin: 15px;
}
.apartman-thank-you-message h2 {
font-size: 1.5rem;
margin-bottom: 15px;
}
.apartman-thank-you-message p {
font-size: 0.95rem;
margin: 10px 0;
}
.apartman-thank-you-message li {
font-size: 0.95rem;
margin: 8px 0;
}
}
/* Extra Small Devices */
@media (max-width: 480px) {
.mol-reservation-page-header__title {
font-size: 1.5rem;
}
.mol-reservation-info__features {
grid-template-columns: 1fr;
}
.mol-reservation-info__social-icons {
gap: 8px;
}
.mol-reservation-info__social-icon {
width: 32px;
height: 32px;
font-size: 1rem;
}
.calendar-month {
min-width: 260px;
max-width: 260px;
}
.mol-booking-form-wrapper .apartman-calendar-grid {
display: flex !important;
gap: 15px;
padding: 0 10px;
min-width: 100% !important; /* Override plugin CSS */
}
.calendar-day {
padding: 4px 1px;
min-height: 28px;
font-size: 11px;
}
}
/* Reservation Booking */
.mol-reservation-booking__card {
background: white;
border-radius: 12px;
padding: 2rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
height: fit-content;
}
.mol-reservation-booking__title {
color: var(--primary-color);
margin-bottom: 1.5rem;
font-size: 1.5rem;
text-align: center;
}
/* Form Styles */
.mol-reservation-form__form {
margin-bottom: 2rem;
}
.mol-form-row {
display: flex;
gap: 1rem;
margin-bottom: 1.5rem;
}
.mol-form-field {
flex: 1;
}
.mol-form-field--full {
flex: 1 1 100%;
}
.mol-form-field label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
color: #333;
font-size: 0.95rem;
}
.mol-form-field input,
.mol-form-field select,
.mol-form-field textarea {
width: 100%;
padding: 0.75rem;
border: 2px solid #e9ecef;
border-radius: 6px;
font-size: 1rem;
transition: all 0.3s ease;
background: white;
}
.mol-form-field input:focus,
.mol-form-field select:focus,
.mol-form-field textarea:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(0, 159, 161, 0.1);
}
.mol-form-field textarea {
resize: vertical;
min-height: 100px;
}
/* Checkbox */
.mol-checkbox {
display: flex;
align-items: flex-start;
gap: 0.75rem;
cursor: pointer;
font-size: 0.95rem;
line-height: 1.5;
}
.mol-checkbox input[type="checkbox"] {
display: none;
}
.mol-checkbox__checkmark {
width: 20px;
height: 20px;
border: 2px solid #e9ecef;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
flex-shrink: 0;
margin-top: 0.125rem;
}
.mol-checkbox input[type="checkbox"]:checked + .mol-checkbox__checkmark {
background: var(--primary-color);
border-color: var(--primary-color);
}
.mol-checkbox input[type="checkbox"]:checked + .mol-checkbox__checkmark::after {
content: '✓';
color: white;
font-size: 14px;
font-weight: bold;
}
.mol-checkbox a {
color: var(--primary-color);
text-decoration: none;
}
.mol-checkbox a:hover {
text-decoration: underline;
}
/* Submit Button */
.mol-reservation-form__submit {
width: 100%;
background: var(--primary-color);
color: white;
border: none;
padding: 1rem;
border-radius: 6px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.mol-reservation-form__submit:hover {
background: var(--primary-dark);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 159, 161, 0.3);
}
/* Alternative Options */
.mol-reservation-alternatives {
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid #eee;
}
.mol-reservation-alternatives__divider {
text-align: center;
margin-bottom: 1.5rem;
position: relative;
}
.mol-reservation-alternatives__divider::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: #eee;
z-index: 1;
}
.mol-reservation-alternatives__divider span {
background: white;
padding: 0 1rem;
color: #666;
position: relative;
z-index: 2;
}
.mol-reservation-alternatives__options {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.mol-reservation-alternatives__option--booking {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
border: 2px solid #e9ecef;
border-radius: 6px;
text-decoration: none;
color: #333;
transition: all 0.3s ease;
}
.mol-reservation-alternatives__option--booking:hover {
border-color: #003580;
background: #f5f7fa;
}
.mol-reservation-alternatives__option--booking img {
height: 30px;
}
.mol-reservation-alternatives__contact h4 {
margin-bottom: 1rem;
color: var(--primary-color);
}
.mol-reservation-alternatives__contact-info {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.mol-reservation-alternatives__contact-item {
display: flex;
align-items: flex-start;
gap: 0.75rem;
}
.mol-reservation-alternatives__contact-item i {
color: var(--primary-color);
margin-top: 0.25rem;
width: 16px;
flex-shrink: 0;
}
.mol-reservation-alternatives__contact-item a {
color: var(--primary-color);
text-decoration: none;
}
.mol-reservation-alternatives__contact-item a:hover {
text-decoration: underline;
}
/* Benefits Section */
.mol-reservation-benefits {
padding: 4rem 0;
background: white;
}
.mol-reservation-benefits__title {
text-align: center;
font-size: 2.5rem;
margin-bottom: 3rem;
color: var(--primary-color);
}
.mol-reservation-benefits__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
max-width: 1000px;
margin: 0 auto;
}
.mol-reservation-benefits__item {
text-align: center;
padding: 2rem 1rem;
}
.mol-reservation-benefits__icon {
width: 80px;
height: 80px;
background: var(--primary-color);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1.5rem;
color: white;
font-size: 2rem;
}
.mol-reservation-benefits__item h3 {
margin-bottom: 1rem;
color: var(--primary-color);
font-size: 1.25rem;
}
.mol-reservation-benefits__item p {
color: #666;
line-height: 1.6;
}
/* Responsive Design */
@media (max-width: 768px) {
.mol-reservation-form__wrapper--single-column {
max-width: 100%;
padding: 0 1rem;
gap: 2rem;
overflow: hidden;
}
.mol-section {
overflow-x: hidden;
max-width: 100vw;
}
.mol-form-row {
flex-direction: column;
gap: 0.75rem;
}
.mol-reservation-page-header {
padding: 1.5rem 1rem;
margin-bottom: 2rem;
}
.mol-reservation-page-header__title {
font-size: 2rem;
}
.mol-reservation-page-header__subtitle {
font-size: 1.1rem;
}
.mol-reservation-benefits__title {
font-size: 2rem;
}
.mol-reservation-benefits__grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.mol-reservation-info__card,
.mol-reservation-booking__card {
padding: 1.5rem;
}
.mol-reservation-info__card {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.mol-reservation-info__image {
margin-bottom: 1rem;
}
.mol-reservation-info__image img {
height: 250px;
}
}
/* =============================================================================
RESERVATION CONTACT & SOCIAL SECTION
============================================================================= */
.mol-reservation-contact {
padding: 4rem 0;
background: #f8f9fa;
text-align: center;
}
.mol-reservation-contact__wrapper {
max-width: 800px;
margin: 0 auto;
}
.mol-reservation-contact__title {
font-size: 2.5rem;
color: var(--primary-color);
margin-bottom: 1.5rem;
font-weight: 700;
}
.mol-reservation-contact__subtitle {
font-size: 1.25rem;
color: #666;
margin-bottom: 3rem;
line-height: 1.6;
}
.mol-reservation-contact__subtitle a {
color: var(--primary-color);
text-decoration: none;
font-weight: 600;
transition: all 0.3s ease;
}
.mol-reservation-contact__subtitle a:hover {
color: var(--primary-dark);
text-decoration: underline;
}
/* Social Media Section */
.mol-reservation-social {
margin-top: 3rem;
}
.mol-reservation-social__title {
font-size: 1.25rem;
color: #333;
margin-bottom: 2rem;
font-weight: 600;
}
.mol-reservation-social__buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
margin: 0 auto;
max-width: 600px;
}
/* Social Buttons */
.mol-social-button {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
border-radius: 25px;
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
font-size: 0.95rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.mol-social-button i {
font-size: 1.2rem;
}
.mol-social-button span {
color: white;
}
/* YouTube */
.mol-social-button--youtube {
background: #FF0000;
color: white;
}
.mol-social-button--youtube:hover {
background: #CC0000;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(255, 0, 0, 0.3);
}
/* Facebook */
.mol-social-button--facebook {
background: #1877F2;
color: white;
}
.mol-social-button--facebook:hover {
background: #0C63D4;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(24, 119, 242, 0.3);
}
/* Instagram */
.mol-social-button--instagram {
background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF, #515BD4);
color: white;
}
.mol-social-button--instagram:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(221, 42, 123, 0.3);
filter: brightness(1.1);
}
/* Google */
.mol-social-button--google {
background: #4285F4;
color: white;
}
.mol-social-button--google:hover {
background: #1A73E8;
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(66, 133, 244, 0.3);
}
/* Responsive */
@media (max-width: 768px) {
.mol-reservation-contact {
padding: 3rem 0;
}
.mol-reservation-contact__title {
font-size: 2rem;
}
.mol-reservation-contact__subtitle {
font-size: 1.1rem;
margin-bottom: 2rem;
}
.mol-reservation-social__buttons {
gap: 0.75rem;
}
.mol-social-button {
padding: 0.6rem 1.2rem;
font-size: 0.9rem;
}
.mol-social-button i {
font-size: 1.1rem;
}
}
/* Calendar Spacing Enhancement */
.mol-booking-form-wrapper .apartman-calendar-grid {
gap: 30px;
padding: 0 30px;
grid-template-columns: repeat(4, minmax(300px, 1fr));
}
.mol-booking-form-wrapper #apartman-calendar-container {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* Make calendar months wider */
.mol-booking-form-wrapper .calendar-month {
min-width: 300px;
}
.mol-booking-form-wrapper .calendar-day {
padding: 8px 6px;
min-height: 36px;
font-size: 0.95rem;
}
.mol-booking-form-wrapper .calendar-weekdays th {
padding: 8px 4px;
font-size: 0.9rem;
}
.mol-booking-form-wrapper .calendar-header {
padding: 15px;
}
@media (max-width: 1400px) {
.mol-booking-form-wrapper .apartman-calendar-grid {
grid-template-columns: repeat(4, minmax(280px, 1fr));
}
.mol-booking-form-wrapper .calendar-month {
min-width: 280px;
}
}
@media (max-width: 1200px) {
.mol-booking-form-wrapper .apartman-calendar-grid {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
@media (max-width: 768px) {
.mol-booking-form-wrapper .apartman-calendar-grid {
display: flex !important;
gap: 20px;
padding: 0 15px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
width: 100%;
max-width: 100vw;
}
.mol-booking-form-wrapper #apartman-calendar-container {
margin: 0;
padding: 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
width: 100%;
max-width: 100vw;
}
.mol-booking-form-wrapper .calendar-month {
flex: 0 0 280px;
min-width: 280px;
max-width: 280px;
scroll-snap-align: start;
}
}
/* Mobile overflow fix for reservation page */
@media (max-width: 768px) {
/* Reset html and body for proper centering */
html {
overflow-x: hidden !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
body.page-template-page-rezerviraj {
overflow-x: hidden !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* Main reservation container fixes */
.mol-main--reservation {
overflow-x: hidden !important;
width: 100% !important;
max-width: 100vw !important;
margin: 0 !important;
padding: 0 !important;
padding-top: 90px !important; /* Space for fixed header */
}
/* Force container centering on mobile */
.mol-main--reservation .mol-container {
width: 100% !important;
max-width: 100% !important;
margin: 0 auto !important;
padding: 0 15px !important;
box-sizing: border-box !important;
}
/* Section fixes */
.mol-main--reservation .mol-section {
width: 100% !important;
max-width: 100vw !important;
overflow-x: hidden !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* Ensure reservation wrapper doesn't shift right */
.mol-main--reservation .mol-reservation-form__wrapper,
.mol-main--reservation .mol-reservation-form__wrapper--single-column {
margin: 0 !important;
padding: 0 !important;
width: 100% !important;
max-width: 100% !important;
}
/* Header title spacing fix */
.mol-reservation-page-header {
padding-top: 20px !important;
margin-top: 0 !important;
}
/* Reset any transform or positioning that might cause shift */
.mol-main--reservation #apartman-rezervacije-wrapper,
.mol-main--reservation .apartman-calendar-grid,
.mol-main--reservation .mol-booking-form-wrapper {
transform: none !important;
position: relative !important;
left: 0 !important;
right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
}
.mol-booking-form-wrapper .apartman-calendar-grid::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 3px;
}
.mol-booking-form-wrapper .apartman-calendar-grid::-webkit-scrollbar-thumb {
background: var(--primary-color);
border-radius: 3px;
}
}
/* Override plugin calendar grid min-width at all breakpoints */
@media (max-width: 1199px) {
.mol-booking-form-wrapper .apartman-calendar-grid,
#apartman-rezervacije-wrapper .apartman-calendar-grid {
min-width: 100% !important;
}
}
@media (max-width: 480px) {
.mol-booking-form-wrapper .apartman-calendar-grid,
#apartman-rezervacije-wrapper .apartman-calendar-grid {
min-width: 100% !important;
}
}
/* ==========================================================================
Mobile menu contact and social improvements
========================================================================== */
/* Mobile menu contact phone styling updates */
.mol-mobile-menu__contact-phones {
display: flex;
flex-direction: column;
gap: 15px;
}
.mol-mobile-menu__contact-phone {
display: flex;
flex-direction: column;
gap: 3px;
}
.mol-mobile-menu__contact-phone p {
margin: 0;
font-size: 14px;
}
.mol-mobile-menu__whatsapp-link {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--mol-primary) !important;
font-size: 13px;
text-decoration: none;
margin: 0;
}
.mol-mobile-menu__whatsapp-link i {
font-size: 16px;
}
.mol-mobile-menu__whatsapp-link:hover {
text-decoration: underline;
}
/* Update mobile menu social section for better spacing */
.mol-mobile-menu__social {
border-top: 1px solid var(--mol-gray-lighter);
padding: 25px 20px 30px;
margin: 0 -20px -20px;
background: rgba(51, 184, 225, 0.03);
}
.mol-mobile-menu__social-title {
font-size: 16px;
font-weight: 600;
margin-bottom: 20px;
text-align: center;
}
.mol-mobile-menu__social-links {
display: flex;
justify-content: center;
gap: 15px;
}
.mol-mobile-menu__social-link {
width: 48px;
height: 48px;
background-color: var(--mol-white);
border: 1px solid var(--mol-gray-lighter);
}
/* Update mobile menu CTA button position */
.mol-mobile-menu__cta {
margin: 0 0 25px 0;
}
/* Mobile menu container spacing */
.mol-mobile-menu__lang {
padding-top: 60px;
margin-bottom: 20px;
}
/* Mobile Menu Background Enhancement - Subtle and decent */
.mol-mobile-menu {
background: rgba(248, 249, 250, 0.98) !important; /* Very light gray, almost white */
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
border-left: 1px solid rgba(51, 184, 225, 0.08) !important; /* Very subtle teal border */
}
/* Fix mobile menu contact phone layout - arrange vertically */
.mol-mobile-menu__contact-phones {
gap: 20px !important; /* Increased gap for better vertical spacing */
}
.mol-mobile-menu__contact-phone {
gap: 8px !important; /* Better spacing between phone and additional info */
}
/* Remove duplicate phone icons - HTML already has the main phone SVG */
.mol-mobile-menu__contact-phone p {
margin: 0 !important;
font-size: 14px !important;
line-height: 1.4 !important;
}
/* Enhanced mobile menu contact styling - Subtle and decent */
.mol-mobile-menu__contact {
background: rgba(255, 255, 255, 0.6) !important; /* Very subtle white background */
border: 1px solid rgba(51, 184, 225, 0.08) !important; /* Very subtle teal border */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important; /* Barely visible shadow */
}
.mol-mobile-menu__contact-title {
color: var(--mol-gray-dark) !important; /* Keep original dark text */
}
.mol-mobile-menu__contact-phone p,
.mol-mobile-menu__contact-phone a {
color: var(--mol-gray-dark) !important; /* Keep original dark text */
}
.mol-mobile-menu__contact-item p,
.mol-mobile-menu__contact-item a {
color: var(--mol-gray-dark) !important; /* Keep original dark text */
}
.mol-mobile-menu__contact-item a:hover {
color: var(--mol-primary) !important;
}
/* Enhanced mobile menu styling - Subtle and decent */
.mol-mobile-menu__container {
color: var(--mol-gray-dark) !important; /* Keep original dark text */
}
.mol-mobile-menu__lang-title,
.mol-mobile-menu__social-title {
color: var(--mol-gray-dark) !important; /* Keep original dark text */
}
.mol-mobile-menu__link {
color: var(--mol-gray-dark) !important; /* Keep original dark text */
}
.mol-mobile-menu__link:hover {
color: var(--mol-primary) !important;
}
.mol-mobile-menu__lang-item {
background: rgba(255, 255, 255, 0.8) !important; /* Very subtle white background */
border: 1px solid rgba(51, 184, 225, 0.06) !important; /* Barely visible border */
color: var(--mol-gray-dark) !important;
}
.mol-mobile-menu__lang-item:hover {
background: rgba(51, 184, 225, 0.05) !important; /* Very subtle teal on hover */
color: var(--mol-primary) !important;
}
.mol-mobile-menu__social {
background: rgba(255, 255, 255, 0.4) !important; /* Very subtle white background */
border-top: 1px solid rgba(51, 184, 225, 0.08) !important; /* Barely visible border */
}
.mol-mobile-menu__social-link {
background: rgba(255, 255, 255, 0.9) !important; /* Subtle white background */
border: 1px solid rgba(51, 184, 225, 0.06) !important; /* Barely visible border */
color: var(--mol-gray-dark) !important;
}
.mol-mobile-menu__social-link:hover {
background: rgba(51, 184, 225, 0.05) !important; /* Very subtle teal on hover */
color: var(--mol-primary) !important;
}
.mol-mobile-menu__cta {
background: rgba(255, 255, 255, 0.9) !important; /* Subtle white background */
border: 1px solid rgba(51, 184, 225, 0.1) !important; /* Subtle teal border */
color: var(--mol-primary) !important;
}
.mol-mobile-menu__cta:hover {
background: var(--mol-primary) !important;
color: white !important;
}
/* Hide CTA button and language switcher on mobile */
@media (max-width: 767px) {
.mol-header__cta--desktop-only,
.mol-header__lang-switcher--desktop-only {
display: none !important;
}
/* Additional mobile logo styling */
.mol-header__logo {
flex: 1 1 auto;
max-width: calc(100% - 60px); /* Leave space for hamburger */
}
.mol-header__logo a {
display: inline-block;
}
/* Better header spacing on mobile */
.mol-header {
padding: 15px 0;
height: auto !important;
}
.mol-header__container {
padding: 0 16px;
justify-content: space-between;
align-items: center;
}
/* Ensure nav is hidden on mobile */
.mol-header__nav {
display: none !important;
}
/* Better hamburger menu on mobile */
.mol-header__menu-toggle {
width: 48px;
height: 48px;
padding: 12px;
background: rgba(51, 184, 225, 0.1);
border-radius: 8px;
border: 1px solid rgba(51, 184, 225, 0.2);
transition: all 0.3s ease;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
}
.mol-header__menu-toggle:hover,
.mol-header__menu-toggle:focus {
background: rgba(51, 184, 225, 0.2);
border-color: var(--mol-primary);
transform: scale(1.05);
}
.mol-header__menu-toggle .mol-header__hamburger-line {
display: block !important;
width: 24px !important;
height: 3px !important;
background: var(--mol-primary) !important;
margin: 0 !important;
border-radius: 2px;
transition: all 0.3s ease;
}
/* Animate hamburger lines on hover */
.mol-header__menu-toggle:hover .mol-header__hamburger-line:nth-child(1) {
transform: translateY(-2px);
}
.mol-header__menu-toggle:hover .mol-header__hamburger-line:nth-child(3) {
transform: translateY(2px);
}
/* When menu is active */
.mol-header__menu-toggle.active .mol-header__hamburger-line:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.mol-header__menu-toggle.active .mol-header__hamburger-line:nth-child(2) {
opacity: 0;
}
.mol-header__menu-toggle.active .mol-header__hamburger-line:nth-child(3) {
transform: rotate(-45deg) translate(7px, -6px);
}
/* Alternative hamburger icon style if lines not showing */
.mol-header__menu-toggle::before {
content: "☰";
font-size: 28px;
color: var(--mol-primary);
position: absolute;
display: none;
}
/* If hamburger lines are not visible, show icon */
.mol-header__menu-toggle:not(:has(.mol-header__hamburger-line:visible))::before {
display: block;
}
}
/* ========================================================================
Hero Section Layout Fix - January 2025
======================================================================== */
/* Fix hero content alignment - move content up */
.mol-hero__content {
display: flex;
align-items: flex-start !important; /* Force align to top */
padding: 2% 3% 3% 3% !important; /* Minimal top padding */
justify-content: flex-start !important;
}
.mol-hero__content-inner {
padding-top: 0 !important; /* Remove ALL top padding */
width: 100%;
margin-top: 0 !important; /* Remove ALL top margin */
position: relative;
top: 0; /* Ensure it starts at top */
}
/* Override any existing padding/margin that pushes content down */
.mol-hero__slide .mol-hero__content {
align-items: flex-start !important;
padding-top: 2% !important;
}
/* Remove the 40px padding that was pushing content down */
.mol-hero .mol-hero__content-inner {
padding-top: 0 !important;
}
/* Ensure proper vertical alignment */
.mol-hero__wrapper {
align-items: flex-start !important; /* Change from stretch to flex-start */
}
/* Fix content spacing - reduce all margins */
.mol-hero__label {
margin-bottom: 8px !important;
margin-top: 0 !important;
}
.mol-hero__title {
margin-bottom: 12px !important;
margin-top: 0 !important;
}
.mol-hero__subtitle {
margin-bottom: 20px !important;
margin-top: 0 !important;
}
/* Ensure CTA buttons are properly spaced */
.mol-hero__cta {
margin-top: 8px;
}
/* Desktop specific adjustments */
@media (min-width: 1024px) {
.mol-hero__content {
min-height: 100%;
padding: 3% 5% 3% 5% !important; /* Reduced from 8% to 3% */
align-items: flex-start !important;
display: flex;
flex-direction: column;
justify-content: flex-start !important;
}
.mol-hero__content-inner {
margin-top: 0 !important;
padding-top: 0 !important;
}
}
/* Mobile adjustments - Premium UI/UX */
@media (max-width: 767px) {
/* Premium mobile hero content area */
.mol-hero__content {
padding: 2.5rem 6% 2.5rem 6% !important;
align-items: center !important;
width: 100% !important;
background: linear-gradient(135deg, #1c1c1b 0%, #242423 50%, #1a1a19 100%) !important;
min-height: auto !important;
height: auto !important;
position: relative !important;
overflow: hidden !important;
}
/* Add premium texture overlay */
.mol-hero__content::after {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background: radial-gradient(circle at top right, rgba(51, 184, 225, 0.03) 0%, transparent 50%) !important;
pointer-events: none !important;
}
.mol-hero__content-inner {
padding-top: 0 !important;
margin-top: 0 !important;
max-width: 100% !important;
text-align: center !important;
position: relative !important;
z-index: 1 !important;
}
/* Premium label styling */
.mol-hero__label {
font-size: 0.625rem !important; /* Smaller, more refined */
letter-spacing: 1.5px !important;
margin-bottom: 20px !important;
opacity: 1 !important;
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 5px 14px !important;
background: transparent !important;
border: none !important;
color: var(--mol-primary) !important;
font-weight: 600 !important;
text-transform: uppercase !important;
position: relative !important;
}
/* Add premium dot separator */
.mol-hero__label::before {
content: '●' !important;
color: var(--mol-primary) !important;
font-size: 0.5rem !important;
margin-right: 2px !important;
}
/* Hero title - modern & impactful */
.mol-hero__title {
font-size: 2rem !important; /* Bigger for impact */
line-height: 1.15 !important;
margin-bottom: 12px !important;
font-weight: 800 !important;
letter-spacing: -1px !important;
color: #fff !important;
text-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}
/* Subtitle - refined and readable */
.mol-hero__subtitle {
font-size: 0.95rem !important;
line-height: 1.6 !important;
margin-bottom: 28px !important;
opacity: 0.75 !important;
max-width: 85% !important;
margin-left: auto !important;
margin-right: auto !important;
color: rgba(255, 255, 255, 0.85) !important;
font-weight: 400 !important;
letter-spacing: 0.2px !important;
}
/* Fix hero wrapper on mobile */
.mol-hero__wrapper {
flex-direction: column !important;
align-items: flex-start !important;
}
/* Ensure slider doesn't add extra space */
.mol-hero__slider {
padding-top: 0 !important;
margin-top: 0 !important;
}
/* Fix slide positioning on mobile */
.mol-hero__slide {
position: relative !important;
padding-top: 0 !important;
}
/* Reviews section - minimal & premium */
.mol-hero__reviews {
margin-bottom: 32px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
}
.mol-hero__reviews-link {
display: inline-flex !important;
align-items: center !important;
gap: 10px !important;
padding: 10px 20px !important;
background: rgba(255, 255, 255, 0.03) !important;
border: 1px solid rgba(255, 255, 255, 0.08) !important;
border-radius: 50px !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
backdrop-filter: blur(10px) !important;
}
.mol-hero__reviews-link:hover {
background: rgba(255, 255, 255, 0.06) !important;
border-color: rgba(255, 255, 255, 0.12) !important;
transform: scale(1.02) !important;
}
/* Google icon styling */
.mol-hero__reviews-google {
width: 18px !important;
height: 18px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.mol-hero__reviews-rating {
font-size: 0.95rem !important;
font-weight: 700 !important;
color: #fff !important;
margin-right: 2px !important;
}
.mol-hero__reviews-stars {
color: #ffd700 !important;
font-size: 0.9rem !important;
display: flex !important;
gap: 1px !important;
}
.mol-hero__reviews-count {
font-size: 0.8rem !important;
opacity: 0.6 !important;
font-weight: 500 !important;
color: rgba(255, 255, 255, 0.7) !important;
}
/* CTA button - Airbnb inspired */
.mol-hero__cta {
font-size: 1rem !important;
padding: 16px 36px !important;
margin-bottom: 0.5rem !important;
font-weight: 600 !important;
letter-spacing: 0.3px !important;
border-radius: 12px !important;
background: linear-gradient(135deg, var(--mol-primary) 0%, #3fc5f0 100%) !important;
border: none !important;
box-shadow: 0 8px 24px rgba(51, 184, 225, 0.35) !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
text-transform: none !important;
position: relative !important;
overflow: hidden !important;
color: #fff !important;
}
/* Premium hover effect */
.mol-hero__cta::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: -100% !important;
width: 100% !important;
height: 100% !important;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent) !important;
transition: left 0.5s !important;
}
.mol-hero__cta:hover {
transform: translateY(-1px) !important;
box-shadow: 0 12px 32px rgba(51, 184, 225, 0.45) !important;
color: #fff !important;
}
.mol-hero__cta:hover::before {
left: 100% !important;
}
/* Remove old animation */
.mol-hero__cta {
animation: none !important;
}
/* Add icon to CTA */
.mol-hero__cta::after {
content: '→' !important;
margin-left: 8px !important;
display: inline-block !important;
transition: transform 0.3s ease !important;
}
.mol-hero__cta:hover::after {
transform: translateX(4px) !important;
}
/* Ensure hero section has proper height on mobile */
.mol-hero {
min-height: auto !important;
height: auto !important;
margin-top: var(--header-height-mobile) !important; /* Add space for fixed header */
padding-top: 0 !important; /* Remove extra padding */
}
/* Make sure the dark section only takes needed space */
.mol-hero__slide .mol-hero__content {
min-height: auto !important;
padding: 2.5rem 5% 2rem 5% !important;
}
/* Fix the gap between header and hero on mobile */
.mol-hero__slider {
margin-top: 0 !important;
}
/* Ensure the first slide starts below header */
.mol-hero__slide:first-child {
margin-top: 0 !important;
}
}
/* Small mobile devices - iPhone SE, etc */
@media (max-width: 480px) {
.mol-hero__content {
padding: 2rem 5% 2rem 5% !important;
}
/* Adjust label for small screens */
.mol-hero__label {
font-size: 0.6rem !important;
letter-spacing: 1.2px !important;
margin-bottom: 16px !important;
}
/* Title optimization for small screens */
.mol-hero__title {
font-size: 1.75rem !important;
line-height: 1.2 !important;
margin-bottom: 10px !important;
letter-spacing: -0.5px !important;
}
/* Subtitle for small screens */
.mol-hero__subtitle {
font-size: 0.875rem !important;
line-height: 1.5 !important;
margin-bottom: 24px !important;
max-width: 90% !important;
}
/* Reviews adjustment */
.mol-hero__reviews-link {
padding: 8px 16px !important;
gap: 8px !important;
}
.mol-hero__reviews-rating {
font-size: 0.9rem !important;
}
.mol-hero__reviews-stars {
font-size: 0.85rem !important;
}
.mol-hero__reviews-count {
font-size: 0.75rem !important;
}
/* CTA button for small screens */
.mol-hero__cta {
font-size: 0.95rem !important;
padding: 14px 28px !important;
width: 100% !important;
max-width: 280px !important;
margin: 0 auto 0.5rem auto !important;
}
}
/* Ultra small devices */
@media (max-width: 360px) {
.mol-hero__title {
font-size: 1.6rem !important;
}
.mol-hero__subtitle {
font-size: 0.85rem !important;
}
.mol-hero__cta {
font-size: 0.9rem !important;
padding: 12px 24px !important;
}
}