/* ============================================================================
MULTIMALDIVES — Premium Island Transfers
Modern Design System v2.0
============================================================================ */
:root {
--navy: #0f172a;
--navy-light: #1e293b;
--turquoise: #00d2ff;
--turquoise-dark: #0891b2;
--gold: #d4af37;
--accent: #14b8a6;
--boarding: #f59e0b;
--white: #ffffff;
--slate: #f8fafc;
--gray-50: #f9fafb;
--gray-100: #f1f5f9;
--gray-200: #e2e8f0;
--gray-300: #cbd5e1;
--gray-400: #94a3b8;
--gray-500: #64748b;
--gray-600: #475569;
--gray-700: #334155;
--gray-800: #1e293b;
--danger: #ef4444;
--success: #10b981;
--warning: #f59e0b;
--font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
--font-heading: 'Playfair Display', Georgia, serif;
--ease: cubic-bezier(0.4, 0, 0.2, 1);
--transition: all 0.35s var(--ease);
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-xl: 28px;
--radius-full: 9999px;
--shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
--shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04);
--shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
--shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
--shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04);
--shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.15);
}
/* ============================================================================
RESET & BASE
============================================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
font-family: var(--font-body);
background: var(--white);
color: var(--gray-700);
line-height: 1.65;
overflow-x: hidden;
}
a { text-decoration: none; color: inherit; transition: var(--transition); }
img { max-width: 100%; height: auto; display: block; }
button { cursor: pointer; font-family: inherit; border: none; background: none; }
input, select, textarea { font-family: inherit; font-size: 1rem; }
.container { max-width: 1280px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 768px) { .container { padding: 0 40px; } }
@media (min-width: 1200px) { .container { padding: 0 48px; } }
/* ============================================================================
PRELOADER
============================================================================ */
.loader-wrapper {
position: fixed; inset: 0; z-index: 9999;
background: var(--navy);
display: flex; align-items: center; justify-content: center;
transition: opacity 0.6s var(--ease);
}
.boat-loader { animation: float 2s ease-in-out infinite; }
.boat-loader img { width: 100px; height: auto; filter: brightness(10); }
@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-15px); } }
/* ============================================================================
NAVIGATION — Always white, no gap to banner
============================================================================ */
.navbar {
position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
display: flex; align-items: center; justify-content: space-between;
padding: 8px 5%;
background: var(--white);
transition: var(--transition);
}
.navbar.scrolled {
box-shadow: none;
}
.navbar .logo a { display: flex; align-items: center; gap: 10px; }
.navbar .logo-img {
height: 52px; width: auto;
transition: var(--transition);
}
.navbar .logo-white { display: none !important; }
.navbar .logo-dark { display: block !important; }
.navbar.scrolled .logo-img { height: 52px; }
.nav-links {
list-style: none; display: flex; align-items: center; gap: 4px;
}
.nav-links li a {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 16px;
font-size: 0.88rem; font-weight: 600; letter-spacing: 0.3px;
color: var(--gray-600);
border-radius: var(--radius-full);
transition: var(--transition);
text-decoration: none;
border-bottom: 2px solid transparent;
}
.nav-links li a:hover {
color: var(--turquoise-dark);
background: rgba(0,210,255,0.06);
}
.nav-links li a.nav-active {
color: var(--turquoise-dark);
border-bottom-color: var(--turquoise);
border-radius: 20px 20px 0 0;
}
/* Sign In / Portal Button */
.btn-portal {
background: var(--gray-100) !important;
color: var(--navy) !important;
font-weight: 700 !important;
padding: 10px 24px !important;
border-radius: var(--radius-full) !important;
border: 2px solid transparent !important;
}
.btn-portal:hover {
background: rgba(0,210,255,0.1) !important;
color: var(--turquoise-dark) !important;
border-color: var(--turquoise) !important;
}
/* Hamburger */
.hamburger {
display: none;
font-size: 1.5rem; color: var(--navy);
padding: 8px;
}
.mobile-right-group {
display: none;
align-items: center;
gap: 2px;
}
.mobile-login-icon {
display: flex;
background: none;
color: var(--navy);
font-size: 1rem;
align-items: center; justify-content: center;
text-decoration: none;
padding: 8px 4px;
flex-shrink: 0;
}
.mobile-profile-icon {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
border-radius: 50%;
overflow: hidden;
text-decoration: none;
flex-shrink: 0;
border: 2px solid rgba(0,210,255,0.3);
background: linear-gradient(135deg, var(--turquoise, #00d2ff), #0099cc);
transition: border-color 0.3s, box-shadow 0.3s;
}
.mobile-profile-icon:hover {
border-color: var(--turquoise, #00d2ff);
box-shadow: 0 0 0 3px rgba(0,210,255,0.15);
}
.mobile-profile-img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
}
.mobile-profile-initial {
font-size: 0.85rem;
font-weight: 800;
color: #fff;
line-height: 1;
}
.mobile-profile-wrap {
position: relative;
display: flex;
align-items: center;
}
.mobile-profile-icon {
border: none;
cursor: pointer;
padding: 0;
}
.mobile-profile-dropdown {
display: none;
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 200px;
background: #fff;
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.08);
z-index: 9999;
overflow: hidden;
animation: mobileDropFade 0.2s ease;
}
@keyframes mobileDropFade {
from { opacity: 0; transform: translateY(-8px); }
to { opacity: 1; transform: translateY(0); }
}
.mobile-profile-dropdown.show { display: block; }
.mobile-profile-dd-header {
padding: 14px 16px 10px;
border-bottom: 1px solid #f1f5f9;
}
.mobile-profile-dd-name {
display: block;
font-size: 0.88rem;
font-weight: 700;
color: #0f172a;
}
.mobile-profile-dd-email {
display: block;
font-size: 0.72rem;
color: #94a3b8;
margin-top: 1px;
}
.mobile-profile-dropdown a {
display: flex;
align-items: center;
gap: 10px;
padding: 11px 16px;
font-size: 0.85rem;
font-weight: 600;
color: #334155;
text-decoration: none;
transition: background 0.15s;
}
.mobile-profile-dropdown a:hover { background: #f8fafc; }
.mobile-profile-dropdown a i { width: 16px; text-align: center; font-size: 0.82rem; color: #64748b; }
.mobile-profile-dd-divider { height: 1px; background: #f1f5f9; margin: 2px 0; }
.mobile-profile-dd-signout { color: #dc2626 !important; }
.mobile-profile-dd-signout i { color: #dc2626 !important; }
.mobile-profile-dd-signout:hover { background: #fef2f2 !important; }
@media (max-width: 992px) {
.hamburger { display: block; }
.mobile-right-group { display: flex; }
.nav-links {
display: none;
position: absolute; top: 100%; left: 0; right: 0;
flex-direction: column; padding: 20px;
background: var(--white);
box-shadow: var(--shadow-xl);
border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.nav-links.active { display: flex; }
.nav-links li a {
color: var(--gray-700) !important;
padding: 14px 20px;
width: 100%;
border-radius: var(--radius-md);
}
.nav-links li a:hover { background: rgba(0,210,255,0.06) !important; color: var(--turquoise-dark) !important; }
.nav-links li a.nav-active { color: var(--turquoise-dark) !important; border-bottom-color: var(--turquoise); background: rgba(0,210,255,0.04) !important; border-radius: var(--radius-md) !important; }
.btn-portal {
background: var(--gray-100) !important;
color: var(--navy) !important;
text-align: center;
justify-content: center;
}
}
/* Notification Bell */
.nav-notif-wrap { position: relative; }
.nav-notif-bell {
position: relative;
font-size: 1.1rem !important;
padding: 8px 12px !important;
}
.notif-badge {
position: absolute; top: 2px; right: 2px;
background: var(--danger);
color: #fff;
font-size: 0.6rem; font-weight: 800;
min-width: 18px; height: 18px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
line-height: 1;
animation: notifPop 0.3s var(--ease);
}
@keyframes notifPop { 0% { transform: scale(0); } 100% { transform: scale(1); } }
/* Profile dropdown in nav */
.nav-profile-wrap { position: relative; }
.nav-profile-btn {
display: flex; align-items: center; gap: 8px;
background: none; border: 1.5px solid var(--border-light, #e2e8f0);
border-radius: 100px; padding: 5px 14px 5px 5px;
cursor: pointer; font-family: inherit; font-size: 0.85rem;
color: var(--nav-color, #334155); font-weight: 600;
transition: all 0.2s;
}
.nav-profile-btn:hover { background: rgba(0,0,0,0.03); border-color: var(--turquoise, #00bcd4); }
.nav-profile-pic {
width: 30px; height: 30px; border-radius: 50%; object-fit: cover;
border: 2px solid var(--turquoise, #00bcd4);
}
.nav-profile-initial {
width: 30px; height: 30px; border-radius: 50%;
background: linear-gradient(135deg, var(--turquoise, #00bcd4), #0097a7);
color: #fff; font-weight: 800; font-size: 0.8rem;
display: flex; align-items: center; justify-content: center;
}
.nav-profile-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-profile-dropdown {
position: absolute; top: calc(100% + 8px); right: 0;
background: #fff; border-radius: 12px; min-width: 200px;
box-shadow: 0 10px 40px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
border: 1px solid #e2e8f0;
padding: 6px; z-index: 1000;
opacity: 0; visibility: hidden; transform: translateY(-8px);
transition: all 0.2s ease;
}
.nav-profile-dropdown.show { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-profile-dropdown a {
display: flex; align-items: center; gap: 10px;
padding: 10px 14px; border-radius: 8px;
font-size: 0.85rem; font-weight: 600; color: #334155;
text-decoration: none; transition: background 0.15s;
}
.nav-profile-dropdown a:hover { background: #f1f5f9; }
.nav-profile-dropdown a i { width: 16px; text-align: center; font-size: 0.85rem; color: #94a3b8; }
.nav-profile-divider { height: 1px; background: #e2e8f0; margin: 4px 8px; }
.nav-profile-signout { color: #ef4444 !important; }
.nav-profile-signout i { color: #ef4444 !important; }
.nav-profile-signout:hover { background: #fef2f2 !important; }
@media (max-width: 768px) {
.nav-profile-name { display: none; }
.nav-profile-btn { padding: 4px 8px 4px 4px; }
.nav-profile-btn .fa-chevron-down { display: none; }
.nav-profile-dropdown { right: -40px; min-width: 180px; }
}
/* ============================================================================
HERO SECTION — Full width, no side borders, strong bottom curve
============================================================================ */
.hero {
position: relative;
height: 80vh;
min-height: 520px;
max-height: 720px;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
background: var(--navy);
overflow: hidden;
margin-top: 68px;
}
.hero-slider {
position: absolute; inset: 0;
z-index: 1;
}
.hero-slide {
position: absolute; inset: 0;
background-size: cover; background-position: center center;
opacity: 0;
transition: opacity 2.8s ease-in-out;
transform: scale(1);
}
.hero-slide.active {
opacity: 1;
animation: heroZoomIn 9s ease-out forwards;
}
/* Alternate: odd slides zoom in, even slides zoom out */
.hero-slide:nth-child(even) {
transform: scale(1.08);
}
.hero-slide:nth-child(even).active {
animation: heroZoomOut 9s ease-out forwards;
}
@keyframes heroZoomIn {
0% { transform: scale(1); }
100% { transform: scale(1.08); }
}
@keyframes heroZoomOut {
0% { transform: scale(1.08); }
100% { transform: scale(1); }
}
.hero-slide::after {
content: ''; position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(10,15,30,0.45) 0%, rgba(15,23,42,0.1) 35%, rgba(10,15,30,0.5) 100%);
}
/* Big sweeping curve overlay at the bottom */
.hero::after {
content: '';
position: absolute;
bottom: -2px; left: -5%; right: -5%;
height: 100px;
background: var(--white);
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
z-index: 4;
}
/* Hero inner content */
.hero-inner {
position: relative; z-index: 3;
flex: 1;
display: flex; align-items: center; justify-content: flex-start;
width: 100%; max-width: 1400px;
padding: 0 7%;
}
.hero-text {
text-align: left;
max-width: 620px;
transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero-badge {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 20px;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.18);
border-radius: var(--radius-full);
color: var(--turquoise);
font-size: 0.78rem; font-weight: 700;
letter-spacing: 2px; text-transform: uppercase;
margin-bottom: 24px;
backdrop-filter: blur(12px);
}
.hero h1 {
font-family: var(--font-heading);
font-size: clamp(2.4rem, 4vw, 3.4rem);
font-weight: 900;
color: var(--white);
line-height: 1.15;
margin-bottom: 14px;
white-space: nowrap;
}
.hero h1 span { color: var(--turquoise); }
.hero .tagline {
font-size: clamp(0.92rem, 1.3vw, 1.08rem);
color: rgba(255,255,255,0.6);
font-weight: 400;
max-width: 480px;
line-height: 1.7;
}
/* ============================================================================
BOOKING CARD — Below hero, modern input design
============================================================================ */
.booking-section {
position: relative;
z-index: 10;
margin-top: -130px;
padding: 0 3%;
margin-bottom: 16px;
}
.booking-card {
background: rgba(255,255,255,0.72);
backdrop-filter: blur(28px);
-webkit-backdrop-filter: blur(28px);
border: 1px solid rgba(255,255,255,0.35);
border-radius: 18px;
box-shadow: 0 8px 40px rgba(15,23,42,0.10), 0 1px 3px rgba(15,23,42,0.04);
max-width: 1340px;
margin: 0 auto;
overflow: visible;
}
/* Trip type tabs */
.bk-tabs {
display: flex; gap: 0;
padding: 6px 6px 0;
}
.bk-tab {
padding: 13px 28px;
font-size: 0.82rem; font-weight: 700;
color: var(--gray-400);
border-radius: 14px 14px 0 0;
transition: var(--transition);
display: flex; align-items: center; gap: 8px;
letter-spacing: 0.3px;
}
.bk-tab i { font-size: 0.72rem; }
.bk-tab.active {
background: rgba(248,250,252,0.6);
color: var(--navy);
font-weight: 800;
}
.bk-tab:hover:not(.active) { color: var(--navy); }
/* Form */
.bk-form {
padding: 24px 28px 28px;
}
.bk-form-row {
display: flex; align-items: flex-end; gap: 12px;
}
.bk-field { display: flex; flex-direction: column; gap: 7px; }
.bk-flex { flex: 1; min-width: 0; }
.bk-flex-from { flex: 0.85; min-width: 0; }
.bk-flex-to { flex: 1.15; min-width: 0; }
.bk-label {
font-size: 0.72rem; font-weight: 700;
color: var(--gray-500);
letter-spacing: 0.3px;
padding-left: 2px;
}
/* Modern input wrapper with icon inside */
.bk-input-wrap {
position: relative;
display: flex; align-items: center;
}
.bk-input-icon {
position: absolute;
left: 14px;
font-size: 0.82rem;
color: var(--turquoise);
pointer-events: none;
z-index: 1;
}
.bk-icon-img {
width: 22px;
height: 22px;
top: 50%;
transform: translateY(-50%);
}
.bk-input {
width: 100%;
height: 48px;
padding: 0 14px 0 40px;
border: 1.5px solid rgba(226,232,240,0.7);
border-radius: 12px;
font-size: 0.88rem;
font-weight: 600;
color: var(--navy);
background: rgba(255,255,255,0.7);
outline: none;
transition: var(--transition);
appearance: none;
-webkit-appearance: none;
cursor: pointer;
}
.bk-input:focus, .bk-input:active {
border-color: var(--turquoise);
box-shadow: 0 0 0 3px rgba(0,210,255,0.1);
}
.bk-input::placeholder { color: var(--gray-400); font-weight: 500; }
select.bk-input {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8.5L1.5 4h9z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 14px center;
padding-right: 36px;
}
/* ── Custom Dropdown ── */
.bk-dropdown {
position: relative;
width: 100%;
}
.bk-dd-trigger {
display: flex; align-items: center;
width: 100%; height: 48px;
padding: 0 14px 0 40px;
border: 1.5px solid rgba(226,232,240,0.7);
border-radius: 12px;
background: rgba(255,255,255,0.7);
cursor: pointer;
transition: var(--transition);
position: relative;
}
.bk-dd-trigger:hover { border-color: var(--turquoise); }
.bk-dd-trigger .bk-input-icon {
position: absolute; left: 14px;
font-size: 0.82rem; color: var(--turquoise);
pointer-events: none;
}
.bk-dd-text {
flex: 1; min-width: 0;
font-size: 0.88rem; font-weight: 600;
color: var(--navy);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bk-dd-text.placeholder { color: var(--gray-400); font-weight: 500; }
.bk-dd-arrow {
font-size: 0.6rem; color: var(--gray-400);
margin-left: 8px;
transition: transform 0.2s ease;
flex-shrink: 0;
}
.bk-dd-trigger.open .bk-dd-arrow { transform: rotate(180deg); }
.bk-dd-menu {
display: none;
position: absolute;
top: calc(100% + 6px); left: 0; right: 0;
z-index: 100;
background: var(--white);
border: 1.5px solid rgba(0,210,255,0.25);
border-radius: 12px;
box-shadow: 0 12px 32px rgba(15,23,42,0.12);
max-height: 260px;
overflow-y: auto;
padding: 6px 0;
}
.bk-dd-menu.show { display: block; }
.bk-dd-trigger.open {
border-color: var(--turquoise);
box-shadow: 0 0 0 3px rgba(0,210,255,0.1);
border-radius: 12px;
}
.bk-dd-item {
display: flex; align-items: center; gap: 10px;
padding: 12px 16px;
font-size: 0.86rem; font-weight: 600;
color: var(--navy);
cursor: pointer;
transition: background 0.15s ease;
}
.bk-dd-item:hover { background: rgba(0,210,255,0.06); }
.bk-dd-item.selected {
background: rgba(0,210,255,0.08);
color: var(--turquoise-dark);
font-weight: 700;
}
.bk-dd-item i {
font-size: 0.85rem;
color: var(--turquoise);
flex-shrink: 0;
}
.bk-dd-item .dd-route-arrow {
color: var(--turquoise);
font-size: 0.6rem;
width: auto; height: auto;
background: none;
border-radius: 0;
}
.bk-dd-empty {
padding: 14px 16px;
font-size: 0.82rem;
color: var(--gray-400);
font-weight: 500;
text-align: center;
}
/* Scrollbar for dropdown */
.bk-dd-menu::-webkit-scrollbar { width: 5px; }
.bk-dd-menu::-webkit-scrollbar-track { background: transparent; }
.bk-dd-menu::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 10px; }
/* Swap button */
.bk-swap-wrap {
display: flex; align-items: flex-end;
padding-bottom: 6px;
}
.bk-swap-btn {
width: 40px; height: 40px;
border-radius: 50%;
background: var(--gray-50);
border: 1.5px solid var(--gray-200);
display: flex; align-items: center; justify-content: center;
color: var(--turquoise);
font-size: 0.78rem;
transition: var(--transition);
flex-shrink: 0;
}
.bk-swap-btn:hover {
background: rgba(0,210,255,0.08);
border-color: var(--turquoise);
transform: rotate(180deg);
}
/* Passengers */
.bk-pax-field { flex: 0 0 auto; }
.pax-control {
display: flex; align-items: center; gap: 0;
height: 48px;
border: 1.5px solid var(--gray-200);
border-radius: 12px;
overflow: hidden;
background: var(--white);
}
.pax-btn {
width: 42px; height: 100%;
display: flex; align-items: center; justify-content: center;
color: var(--turquoise);
font-size: 0.72rem;
transition: var(--transition);
background: var(--gray-50);
}
.pax-btn:hover { background: rgba(0,210,255,0.08); color: var(--turquoise-dark); }
.pax-num {
width: 40px; height: 100%;
text-align: center;
font-size: 1rem; font-weight: 800;
color: var(--navy);
border: none; outline: none;
background: transparent;
-moz-appearance: textfield;
}
.pax-num::-webkit-inner-spin-button,
.pax-num::-webkit-outer-spin-button { display: none; }
/* Search button — disabled until ready */
.bk-search-field { flex: 0 0 auto; }
.bk-search-btn {
height: 48px;
padding: 0 32px;
background: var(--gray-300);
color: var(--white);
font-size: 0.88rem; font-weight: 800;
border-radius: 12px;
display: flex; align-items: center; gap: 8px;
transition: var(--transition);
white-space: nowrap;
letter-spacing: 0.3px;
cursor: not-allowed;
opacity: 0.7;
}
.bk-search-btn.active {
background: var(--turquoise);
cursor: pointer;
opacity: 1;
}
.bk-search-btn.active:hover {
background: var(--turquoise-dark);
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(0,210,255,0.25);
}
/* Flatpickr theme override — minimal compact style */
.flatpickr-calendar {
border-radius: 10px !important;
box-shadow: 0 8px 28px rgba(15,23,42,0.10) !important;
border: 1px solid var(--gray-200) !important;
font-family: var(--font-body) !important;
width: 320px !important;
padding: 0 !important;
background: var(--white) !important;
box-sizing: border-box !important;
}
.flatpickr-innerContainer {
padding: 4px 10px 10px !important;
box-sizing: border-box !important;
overflow: visible !important;
}
.flatpickr-rContainer {
width: 100% !important;
box-sizing: border-box !important;
}
.flatpickr-days {
width: 100% !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
.dayContainer {
width: 100% !important;
min-width: 0 !important;
max-width: 100% !important;
padding: 0 !important;
display: grid !important;
grid-template-columns: repeat(7, 1fr) !important;
justify-items: center !important;
box-sizing: border-box !important;
}
.flatpickr-day {
max-width: none !important;
width: 36px !important;
height: 36px !important;
line-height: 36px !important;
font-size: 0.82rem !important;
font-weight: 500 !important;
color: var(--navy) !important;
border-radius: 8px !important;
flex-basis: auto !important;
box-sizing: border-box !important;
margin: 1px 0 !important;
}
.flatpickr-day.selected, .flatpickr-day.selected:hover {
background: var(--navy) !important;
border-color: var(--navy) !important;
color: var(--white) !important;
font-weight: 700 !important;
}
.flatpickr-day:hover {
background: var(--gray-100) !important;
border-color: transparent !important;
}
.flatpickr-day.today {
border-color: var(--turquoise) !important;
color: var(--turquoise) !important;
font-weight: 700 !important;
}
.flatpickr-day.today:hover {
background: rgba(0,210,255,0.08) !important;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
color: var(--gray-300) !important;
}
.flatpickr-months {
padding: 8px 4px 4px !important;
}
.flatpickr-months .flatpickr-month {
background: transparent !important;
color: var(--navy) !important;
height: 36px !important;
}
.flatpickr-current-month {
font-size: 0.95rem !important;
padding-top: 4px !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
color: var(--navy) !important;
font-weight: 700 !important;
font-size: 0.95rem !important;
}
.flatpickr-current-month .flatpickr-monthDropdown-months {
appearance: auto !important;
-webkit-appearance: auto !important;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
padding: 2px 4px !important;
cursor: pointer !important;
}
.flatpickr-current-month input.cur-year {
border: none !important;
border-radius: 0 !important;
padding: 2px 4px !important;
cursor: pointer !important;
}
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
fill: var(--gray-500) !important;
color: var(--gray-500) !important;
padding: 6px 8px !important;
}
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
fill: var(--navy) !important;
color: var(--navy) !important;
}
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
width: 12px !important;
height: 12px !important;
}
span.flatpickr-weekday {
color: var(--gray-400) !important;
font-weight: 600 !important;
font-size: 0.7rem !important;
text-transform: capitalize !important;
width: 36px !important;
max-width: none !important;
flex: 0 0 36px !important;
}
.flatpickr-weekdays {
padding: 0 !important;
width: 100% !important;
box-sizing: border-box !important;
}
.flatpickr-weekdaycontainer {
width: 100% !important;
display: grid !important;
grid-template-columns: repeat(7, 1fr) !important;
justify-items: center !important;
}
.flatpickr-weekdaycontainer .flatpickr-weekday {
width: auto !important;
flex: none !important;
}
/* Year & month picker views */
.flatpickr-monthSelect-months,
.flatpickr-calendar .numInputWrapper {
font-family: var(--font-body) !important;
}
.flatpickr-monthSelect-month {
border-radius: 8px !important;
font-size: 0.85rem !important;
font-weight: 500 !important;
}
.flatpickr-monthSelect-month:hover {
background: var(--gray-100) !important;
}
.flatpickr-monthSelect-month.selected {
background: var(--navy) !important;
color: var(--white) !important;
}
/* Mobile — keep the desktop-style calendar but scale it to fit narrow viewports */
@media (max-width: 420px) {
.flatpickr-calendar {
width: calc(100vw - 24px) !important;
max-width: 320px !important;
min-width: 280px !important;
}
.flatpickr-innerContainer {
padding: 4px 6px 8px !important;
}
.flatpickr-day {
width: 34px !important;
height: 34px !important;
line-height: 34px !important;
font-size: 0.8rem !important;
}
span.flatpickr-weekday {
width: 34px !important;
flex: 0 0 34px !important;
font-size: 0.68rem !important;
}
}
/* ============================================================================
TIMES PANEL — Modern cards, full width, half/half for return
============================================================================ */
.bk-times-panel {
/* Removed top divider — booking card looks cleaner without it */
padding: 24px 32px 0;
}
.bk-times-inner {
display: flex; gap: 24px;
}
.bk-times-col {
flex: 1; min-width: 0;
padding: 0;
}
/* Vertical divider between Departure / Return columns removed for a cleaner look */
.bk-times-col:first-child { padding-left: 0; }
.bk-times-col:last-child { padding-right: 0; }
.bk-times-header {
font-size: 0.88rem; font-weight: 800;
color: var(--navy);
margin-bottom: 16px;
display: flex; align-items: center; gap: 8px;
}
.bk-times-header .bk-route-info {
font-weight: 500;
color: var(--gray-400);
font-size: 0.82rem;
margin-left: 4px;
}
/* Speedboat SVG icon */
.bk-boat-icon {
width: 28px; height: 12px;
flex-shrink: 0;
}
.bk-boat-right {
/* Default: facing right for departure */
}
.bk-boat-left {
transform: scaleX(-1);
}
.bk-times-list {
display: flex;
flex-direction: column;
gap: 0;
}
.time-chip {
display: flex; align-items: center; gap: 16px;
padding: 16px 20px;
border: 1.5px solid var(--gray-100);
border-radius: 12px;
cursor: pointer;
transition: var(--transition);
background: var(--white);
margin-bottom: 8px;
}
.time-chip:hover {
border-color: var(--turquoise);
background: rgba(0,210,255,0.03);
}
.time-chip.selected {
border-color: var(--turquoise);
background: rgba(0,210,255,0.04);
box-shadow: 0 0 0 2px rgba(0,210,255,0.12);
}
.time-chip .tc-dep {
font-size: 1rem; font-weight: 800; color: var(--navy);
min-width: 44px;
}
.time-chip .tc-arr {
font-size: 1rem; font-weight: 800; color: var(--navy);
}
.time-chip .tc-info {
display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
}
.time-chip .tc-vessel {
font-size: 0.82rem; color: var(--gray-400); font-weight: 500;
}
.time-chip .tc-seats {
font-size: 0.82rem; color: var(--success); font-weight: 700;
white-space: nowrap;
margin-left: auto;
}
.time-chip.tc-full {
opacity: 0.6;
pointer-events: none;
}
.time-chip.tc-full .tc-seats {
color: var(--danger);
}
.time-chip.tc-departed .tc-departed-label {
color: var(--gray-400);
font-style: italic;
font-weight: 600;
}
.time-chip.tc-departed {
opacity: 0.45;
}
.time-chip.tc-departed .tc-dep,
.time-chip.tc-departed .tc-arr {
text-decoration: line-through;
color: var(--gray-400);
}
.booking-times-loading {
font-size: 0.85rem; color: var(--gray-400); padding: 10px 0;
}
/* Proceed / Cancel buttons */
.bk-times-actions {
display: flex; align-items: center; justify-content: flex-end; gap: 14px;
padding: 20px 0 24px;
}
.bk-cancel-btn {
padding: 14px 28px;
border-radius: 12px;
border: 1.5px solid var(--gray-200);
background: var(--white);
color: var(--gray-500);
font-size: 0.88rem; font-weight: 700;
cursor: pointer;
transition: var(--transition);
display: flex; align-items: center; gap: 6px;
}
.bk-cancel-btn:hover {
border-color: var(--gray-300);
color: var(--navy);
}
.bk-proceed-btn {
padding: 14px 36px;
border-radius: 12px;
border: none;
background: var(--gray-300);
color: var(--white);
font-size: 0.88rem; font-weight: 700;
cursor: default;
transition: var(--transition);
opacity: 0.6;
pointer-events: none;
display: flex; align-items: center; gap: 8px;
}
.bk-proceed-btn.active {
opacity: 1;
pointer-events: auto;
cursor: pointer;
background: linear-gradient(135deg, var(--turquoise-dark) 0%, var(--turquoise) 100%);
box-shadow: 0 4px 16px rgba(0,210,255,0.25);
}
.bk-proceed-btn.active:hover {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(0,210,255,0.35);
}
/* ============================================================================
HERO + BOOKING MOBILE
============================================================================ */
@media (max-width: 992px) {
.hero { height: 60vh; min-height: 380px; max-height: 520px; }
.hero::after { height: 60px; }
.hero-inner { padding: 0 5%; }
.booking-section { margin-top: -110px; padding: 0 3%; }
.booking-card { background: rgba(255,255,255,0.68); backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px); }
.bk-form-row { flex-wrap: wrap; gap: 12px; }
.bk-flex, .bk-flex-from, .bk-flex-to { flex: 1 1 calc(50% - 20px); min-width: 160px; }
.bk-swap-wrap { display: none; }
.bk-times-inner { flex-direction: column; gap: 18px; }
/* No divider between stacked columns on mobile either */
.bk-times-col + .bk-times-col { border: none; padding: 0; margin-top: 0; }
.bk-times-col { padding: 0; }
.bk-times-panel { padding: 20px 20px 0; }
.bk-times-actions { padding: 16px 0 20px; }
}
@media (max-width: 768px) {
.hero { height: 60vh; min-height: 380px; max-height: none; margin-top: 60px; }
.hero::after { height: 30px; }
.hero-inner { padding: 0 5%; align-items: center; }
.hero-slide { background-position: center center; }
.hero h1 { font-size: clamp(1.8rem, 7vw, 2.6rem); white-space: normal; }
.hero .tagline { font-size: 0.88rem; }
.hero-badge { font-size: 0.68rem; padding: 6px 14px; margin-bottom: 12px; }
.booking-section { margin-top: -80px; padding: 0 4%; }
.booking-card { background: rgba(255,255,255,0.68); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(255,255,255,0.30); }
.bk-form { padding: 18px 18px 22px; }
.bk-form-row { gap: 10px; }
.bk-flex, .bk-flex-from, .bk-flex-to { flex: 1 1 100%; }
.bk-tabs { padding: 4px 4px 0; }
.bk-tab { padding: 10px 18px; font-size: 0.78rem; }
.time-chip { padding: 12px 14px; gap: 10px; }
.time-chip .tc-dep, .time-chip .tc-arr { font-size: 0.9rem; }
.time-chip .tc-vessel { font-size: 0.75rem; }
.time-chip .tc-seats { font-size: 0.75rem; }
.bk-times-panel { padding: 16px 16px 0; }
.bk-times-header { font-size: 0.8rem; flex-wrap: wrap; }
.bk-times-header .bk-route-info { font-size: 0.72rem; }
.bk-times-actions { padding: 14px 0 18px; gap: 10px; }
.bk-cancel-btn { padding: 12px 20px; font-size: 0.82rem; }
.bk-proceed-btn { padding: 12px 24px; font-size: 0.82rem; }
/* Page banner mobile — extra bottom padding so the title/subtitle
sit comfortably above the elliptical drop curve. */
.page-banner { padding: 100px 5% 100px; margin-top: 60px; }
.page-banner::before { display: none; }
.page-banner::after { height: 60px; }
.page-banner-title { font-size: clamp(1.6rem, 6vw, 2.4rem); }
.page-banner-subtitle { font-size: 0.92rem; }
}
@media (max-width: 480px) {
.hero { height: 55vh; min-height: 320px; max-height: none; }
.hero::after { height: 20px; }
.hero-inner { padding: 0 4%; }
.hero h1 { font-size: clamp(1.5rem, 6.5vw, 2.2rem); }
.hero .tagline { font-size: 0.82rem; max-width: 90%; }
.hero-badge { font-size: 0.62rem; padding: 5px 12px; margin-bottom: 10px; }
.booking-section { margin-top: -60px; padding: 0 3%; }
.booking-card { background: rgba(255,255,255,0.65); }
.bk-times-actions { flex-direction: column; gap: 8px; }
.bk-cancel-btn, .bk-proceed-btn { width: 100%; justify-content: center; }
/* Page banner mobile small */
.page-banner { padding: 90px 4% 90px; }
.page-banner::after { height: 50px; }
.page-banner-title { font-size: clamp(1.4rem, 5.5vw, 2rem); }
.page-banner-subtitle { font-size: 0.85rem; }
}
/* ============================================================================
SECTION HELPERS
============================================================================ */
.section-label {
display: inline-flex; align-items: center; gap: 8px;
font-size: 0.78rem; font-weight: 800;
letter-spacing: 2.5px; text-transform: uppercase;
color: var(--turquoise);
margin-bottom: 12px;
}
.section-label::before {
content: ''; width: 40px; height: 2px;
background: var(--turquoise);
}
.section-title {
font-family: var(--font-heading);
font-size: clamp(1.8rem, 3.5vw, 2.8rem);
font-weight: 900;
color: var(--navy);
line-height: 1.15;
margin-bottom: 16px;
}
.section-title span { color: var(--turquoise); }
.section-subtitle {
font-size: 1.05rem;
color: var(--gray-500);
max-width: 550px;
line-height: 1.7;
}
/* ============================================================================
LIVE DEPARTURE BOARD
============================================================================ */
.board-section {
padding: 50px 0 80px;
background: linear-gradient(180deg, var(--gray-50) 0%, var(--white) 100%);
}
.board-section .board-top {
display: flex; align-items: flex-end; justify-content: space-between;
flex-wrap: wrap; gap: 16px;
margin-bottom: 40px;
}
.board-section .section-title {
font-size: 2rem;
}
/* LIVE badge next to title */
.live-badge {
display: inline-flex; align-items: center; gap: 6px;
font-size: 0.65rem; font-weight: 800; letter-spacing: 1.5px;
color: #ef4444;
background: rgba(239,68,68,0.08);
padding: 4px 12px 4px 10px;
border-radius: var(--radius-full);
vertical-align: middle;
position: relative;
top: -4px;
}
.live-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: #ef4444;
display: inline-block;
position: relative;
flex-shrink: 0;
}
.live-dot::after {
content: '';
position: absolute; inset: -3px;
border-radius: 50%;
border: 2px solid #ef4444;
animation: live-pulse 1.5s ease-out infinite;
}
@keyframes live-pulse {
0% { transform: scale(0.8); opacity: 1; }
100% { transform: scale(2.2); opacity: 0; }
}
.live-clock-display {
display: inline-flex; align-items: center; gap: 8px;
padding: 8px 18px;
background: var(--gray-100);
border-radius: var(--radius-full);
font-size: 0.85rem; font-weight: 700;
color: var(--navy);
}
.board-date-nav {
display: inline-flex; align-items: center; gap: 8px;
font-size: 0.88rem; font-weight: 700; color: var(--gray-600);
}
.nav-btn-sm, .nav-btn {
width: 32px; height: 32px;
display: inline-flex; align-items: center; justify-content: center;
border-radius: var(--radius-full);
background: var(--gray-100);
color: var(--gray-600);
font-size: 0.7rem;
transition: var(--transition);
}
.nav-btn-sm:hover, .nav-btn:hover {
background: var(--navy); color: var(--white);
}
/* ── Ferry Grid: 3 columns ── */
.ferry-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
}
/* ── Ferry Card ── */
.ferry-card {
display: block;
text-decoration: none;
color: inherit;
background: var(--white);
border-radius: 14px;
padding: 14px 18px;
cursor: pointer;
transition: all 0.25s var(--ease);
border-left: 4px solid var(--gray-200);
border-top: 1px solid var(--gray-100);
border-right: 1px solid var(--gray-100);
border-bottom: 1px solid var(--gray-100);
box-shadow: 0 2px 8px rgba(15,23,42,0.04);
}
.ferry-card:hover:not(.fc-departed) {
box-shadow: 0 4px 16px rgba(0,210,255,0.1);
transform: translateY(-1px);
}
/* Row 1: times + status badge */
.fc-top {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 4px;
}
.fc-times {
display: flex;
align-items: center;
gap: 6px;
}
.fc-dep {
font-family: 'Plus Jakarta Sans', monospace;
font-size: 1.2rem;
font-weight: 900;
color: var(--navy);
line-height: 1;
}
.fc-arrow {
font-size: 0.5rem;
color: var(--gray-300);
}
.fc-arr {
font-family: 'Plus Jakarta Sans', monospace;
font-size: 0.85rem;
font-weight: 700;
color: var(--gray-400);
}
.fc-status {
font-size: 0.62rem;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 1px;
white-space: nowrap;
padding: 3px 10px;
border-radius: var(--radius-full);
}
/* Row 2: route */
.fc-route {
font-size: 0.82rem;
font-weight: 800;
color: var(--navy);
margin-bottom: 8px;
}
.fc-route i { font-size: 0.5rem; color: var(--gray-300); margin: 0 4px; }
/* Row 3: vessel + seats left + book */
.fc-bottom {
display: flex;
align-items: center;
gap: 10px;
}
.fc-vessel {
font-size: 0.72rem;
font-weight: 700;
color: var(--gray-500);
display: flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}
.fc-vessel i { color: var(--turquoise); font-size: 0.6rem; }
.fc-seats {
font-size: 0.7rem;
font-weight: 800;
color: var(--gray-400);
white-space: nowrap;
}
.fc-book-link {
margin-left: auto;
font-size: 0.72rem;
font-weight: 800;
color: var(--turquoise);
display: flex;
align-items: center;
gap: 3px;
transition: all 0.2s;
flex-shrink: 0;
}
.fc-book-link i { font-size: 0.5rem; }
.ferry-card:hover .fc-book-link {
color: #0284c7;
gap: 6px;
}
/* ── DEPARTED — gray, inactive ── */
.fc-departed {
opacity: 0.35;
cursor: default;
pointer-events: none;
border-left-color: var(--gray-300);
}
.fc-departed .fc-dep,
.fc-departed .fc-arr { color: var(--gray-400); }
.fc-departed .fc-route { color: var(--gray-400); }
.fc-departed .fc-status {
color: var(--gray-500);
background: var(--gray-100);
}
.fc-departed .fc-book-link { display: none; }
/* ── NEXT — green line only, badge pulses ── */
.fc-next {
border-left-color: #10b981;
}
.fc-next .fc-status {
color: #fff;
background: #10b981;
animation: badge-pulse 1.8s ease-in-out infinite;
}
/* ── BOARDING — orange line only, badge pulses ── */
.fc-boarding {
border-left-color: #f59e0b;
}
.fc-boarding .fc-status {
color: #fff;
background: #f59e0b;
animation: badge-pulse 1.8s ease-in-out infinite;
}
@keyframes badge-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.65; transform: scale(1.08); }
}
/* ── Tablet: 2 cols ── */
@media (max-width: 900px) {
.ferry-grid { grid-template-columns: 1fr 1fr; }
}
/* ── Mobile: 1 col ── */
@media (max-width: 600px) {
.ferry-grid { grid-template-columns: 1fr; gap: 10px; }
.ferry-card { padding: 12px 14px; }
.fc-dep { font-size: 1.05rem; }
.fc-route { font-size: 0.78rem; }
}
/* ============================================================================
FLEET SECTION
============================================================================ */
.fleet-section {
padding: 80px 0;
background: var(--white);
overflow: hidden;
}
.vessels-carousel {
overflow: hidden;
margin-top: 48px;
position: relative;
}
.vessels-carousel::before,
.vessels-carousel::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
width: 120px;
z-index: 2;
pointer-events: none;
}
.vessels-carousel::before {
left: 0;
background: linear-gradient(to right, var(--white) 0%, transparent 100%);
}
.vessels-carousel::after {
right: 0;
background: linear-gradient(to left, var(--white) 0%, transparent 100%);
}
.vessel-track {
display: flex; gap: 40px;
animation: scrollVessels 30s linear infinite;
width: max-content;
padding: 0 20px;
}
.vessel-track:hover { animation-play-state: paused; }
@keyframes scrollVessels {
0% { transform: translateX(0); }
100% { transform: translateX(-33.333%); }
}
.vessel-card {
flex-shrink: 0; width: 200px;
text-align: center;
display: flex; flex-direction: column; align-items: center;
cursor: pointer;
}
.vessel-img-wrap {
width: 160px; height: 160px;
margin: 0 auto 14px;
border-radius: 50%;
overflow: hidden;
border: 3px solid var(--gray-200);
transition: var(--transition);
}
.vessel-card:hover .vessel-img-wrap {
border-color: var(--turquoise);
box-shadow: 0 0 0 6px rgba(0,210,255,0.12);
}
.vessel-img-wrap img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 0.4s ease;
}
.vessel-card:hover .vessel-img-wrap img {
transform: scale(1.2);
}
.vessel-placeholder {
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(135deg, var(--turquoise), #0099cc);
color: rgba(255,255,255,0.5); font-size: 2.5rem;
}
.vessel-info {
margin-bottom: 6px;
}
.vessel-info h4 {
font-size: 0.95rem; font-weight: 800;
color: var(--navy); margin-bottom: 4px;
}
.vessel-cap {
font-size: 0.8rem; font-weight: 600; color: var(--gray-500);
}
.vessel-track-link {
display: inline-flex; align-items: center; gap: 4px;
font-size: 0.78rem; font-weight: 700;
color: var(--turquoise-dark);
margin-top: 2px;
}
.vessel-track-link:hover { color: var(--turquoise); }
/* ============================================================================
LOYALTY / POINTS SECTION
============================================================================ */
.loyalty-section {
padding: 80px 0;
background: linear-gradient(180deg, var(--gray-50) 0%, #ffffff 100%);
position: relative;
overflow: hidden;
}
.loyalty-section::before {
/* soft floating blob behind the steps for depth */
content: '';
position: absolute;
width: 480px; height: 480px;
border-radius: 50%;
background: radial-gradient(circle, rgba(0,210,255,0.07), transparent 70%);
top: -120px; left: 50%; transform: translateX(-50%);
pointer-events: none;
}
.loyalty-steps {
display: grid; grid-template-columns: repeat(3, 1fr);
gap: 32px;
text-align: center;
max-width: 960px;
margin: 48px auto 0;
position: relative; z-index: 1;
}
/* Each step now sits inside a real card with shadow + lift on hover. */
.loyalty-step {
background: #fff;
padding: 36px 24px 30px;
border-radius: 22px;
box-shadow: 0 6px 24px rgba(15,23,42,0.05);
border: 1px solid rgba(15,23,42,0.04);
transition: transform 0.4s cubic-bezier(0.22,1,0.36,1),
box-shadow 0.4s ease,
border-color 0.3s ease;
}
.loyalty-step:hover {
transform: translateY(-8px);
box-shadow: 0 18px 48px rgba(0,210,255,0.18);
border-color: rgba(0,210,255,0.2);
}
.loyalty-step .step-icon {
width: 84px; height: 84px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 20px;
font-size: 1.7rem; font-weight: 900;
position: relative;
transition: transform 0.4s ease;
}
.loyalty-step:hover .step-icon { transform: scale(1.08) rotate(-4deg); }
/* Glowing pulse halo so the section feels alive. */
.loyalty-step .step-icon::before {
content: '';
position: absolute;
inset: -6px;
border-radius: 50%;
border: 2px solid currentColor;
opacity: 0.2;
animation: loyaltyPulse 2.6s ease-in-out infinite;
}
.loyalty-step:nth-child(2) .step-icon::before { animation-delay: 0.6s; }
.loyalty-step:nth-child(3) .step-icon::before { animation-delay: 1.2s; }
@keyframes loyaltyPulse {
0%, 100% { transform: scale(1); opacity: 0.18; }
50% { transform: scale(1.18); opacity: 0.0; }
}
/* Subtle bounce on the ticket / gift / +N icons. */
.loyalty-step .step-icon i {
animation: loyaltyBounce 3.2s ease-in-out infinite;
}
.loyalty-step:nth-child(2) .step-icon i,
.loyalty-step:nth-child(2) .step-icon { animation-delay: 0.4s; }
.loyalty-step:nth-child(3) .step-icon i { animation-delay: 0.8s; }
@keyframes loyaltyBounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-4px);}
}
.loyalty-step:nth-child(1) .step-icon { background: rgba(0,210,255,0.12); color: var(--turquoise); }
.loyalty-step:nth-child(2) .step-icon { background: rgba(16,185,129,0.12); color: var(--success); }
.loyalty-step:nth-child(3) .step-icon { background: rgba(139,92,246,0.12); color: #8b5cf6; }
.loyalty-step h3 {
font-size: 1.15rem; font-weight: 800; color: var(--navy);
margin-bottom: 8px;
}
.loyalty-step p { font-size: 0.9rem; color: var(--gray-500); }
@media (max-width: 640px) {
.loyalty-steps { grid-template-columns: 1fr; gap: 18px; max-width: 320px; }
.loyalty-step { padding: 28px 22px 24px; }
}
/* ============================================================================
WHY US / FEATURES
============================================================================ */
.features-section {
padding: 80px 0;
background: var(--navy);
position: relative;
overflow: hidden;
}
.features-section::before {
content: '';
position: absolute; top: -2px; left: 0; right: 0; height: 80px;
background: var(--white);
border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.features-section .section-title { color: var(--white); }
.features-section .section-subtitle { color: rgba(255,255,255,0.5); }
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
gap: 24px;
margin-top: 48px;
}
.f-card {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 20px;
padding: 36px 28px 32px;
text-align: center;
transition: transform 0.4s cubic-bezier(0.22,1,0.36,1),
background 0.3s ease,
border-color 0.3s ease,
box-shadow 0.4s ease;
position: relative;
overflow: hidden;
}
/* Soft glow blob behind each card — fades in on hover. */
.f-card-glow {
position: absolute;
width: 240px; height: 240px;
border-radius: 50%;
background: radial-gradient(circle, rgba(0,210,255,0.18), transparent 70%);
top: -120px; left: 50%; transform: translateX(-50%);
opacity: 0; pointer-events: none;
transition: opacity 0.45s ease;
}
.f-card:hover {
background: rgba(255,255,255,0.07);
border-color: rgba(0,210,255,0.35);
transform: translateY(-6px);
box-shadow: 0 18px 48px rgba(0,210,255,0.18);
}
.f-card:hover .f-card-glow { opacity: 1; }
/* Round icon chip with subtle ring + scale-on-hover. */
.f-card-icon-wrap {
width: 62px; height: 62px;
border-radius: 50%;
margin: 0 auto 18px;
display: flex; align-items: center; justify-content: center;
background: rgba(0,210,255,0.12);
border: 1px solid rgba(0,210,255,0.3);
transition: transform 0.35s ease, background 0.3s ease;
position: relative; z-index: 1;
}
.f-card:hover .f-card-icon-wrap { transform: scale(1.1) rotate(-4deg); background: rgba(0,210,255,0.22); }
.f-card i {
font-size: 1.5rem;
color: var(--turquoise);
display: block;
}
.f-card h3 {
font-size: 1.1rem; font-weight: 800;
color: var(--white);
margin-bottom: 10px;
position: relative; z-index: 1;
}
.f-card p {
font-size: 0.9rem; color: rgba(255,255,255,0.6);
line-height: 1.7;
position: relative; z-index: 1;
}
/* The 24/7 charter card gets an "Available now" pulsing badge. */
.f-card-badge {
display: inline-flex; align-items: center; gap: 6px;
margin-top: 14px;
padding: 5px 12px;
background: rgba(16,185,129,0.15);
border: 1px solid rgba(16,185,129,0.45);
color: #6ee7b7;
border-radius: 999px;
font-size: 0.72rem; font-weight: 800;
text-transform: uppercase; letter-spacing: 0.5px;
}
.f-card-pulse {
width: 8px; height: 8px;
border-radius: 50%;
background: #10b981;
box-shadow: 0 0 0 0 rgba(16,185,129,0.7);
animation: fcardPulse 1.6s infinite;
}
@keyframes fcardPulse {
0% { box-shadow: 0 0 0 0 rgba(16,185,129,0.7); }
70% { box-shadow: 0 0 0 10px rgba(16,185,129,0); }
100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); }
}
/* ───────────────────────── PRIVATE CHARTER feature ─────────────────────────
Full-width card under the 3 small "Why MultiMaldives" cards. Dark glass
panel on the left with copy + CTA, vessel photo on the right inside a
circular frame, with a 24/7 badge orbiting at the bottom-right. */
.f-charter {
margin-top: 36px;
background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(0,210,255,0.04) 60%, rgba(255,255,255,0.02) 100%);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 24px;
padding: 40px 44px;
display: grid;
grid-template-columns: 1.1fr minmax(260px, 0.9fr);
align-items: center;
gap: 36px;
position: relative;
overflow: hidden;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
transition: transform 0.5s cubic-bezier(0.22,1,0.36,1), box-shadow 0.5s ease, border-color 0.4s ease;
}
.f-charter:hover {
transform: translateY(-4px);
border-color: rgba(0,210,255,0.4);
box-shadow: 0 28px 60px rgba(0,210,255,0.18);
}
.f-charter-glow {
position: absolute;
width: 520px; height: 520px;
border-radius: 50%;
background: radial-gradient(circle, rgba(0,210,255,0.22), transparent 70%);
top: -240px; right: -120px;
pointer-events: none;
}
.f-charter-text { position: relative; z-index: 1; text-align: left; }
.f-charter-badge {
display: inline-flex; align-items: center; gap: 8px;
background: rgba(0,210,255,0.1);
border: 1px solid rgba(0,210,255,0.35);
color: var(--turquoise);
padding: 7px 14px;
border-radius: 999px;
font-size: 0.74rem;
font-weight: 800;
letter-spacing: 0.5px;
margin-bottom: 18px;
}
.f-charter-badge i { font-size: 0.78rem; }
.f-charter-title {
font-family: var(--font-heading, 'Playfair Display', serif);
font-size: clamp(1.6rem, 3.4vw, 2.6rem);
font-weight: 900;
color: #fff;
line-height: 1.15;
margin: 0 0 16px;
}
.f-charter-title span { color: var(--turquoise); }
.f-charter-desc {
color: rgba(255,255,255,0.7);
font-size: 0.95rem;
line-height: 1.7;
margin: 0 0 22px;
max-width: 540px;
}
.f-charter-bullets {
list-style: none; padding: 0; margin: 0 0 24px;
display: grid; gap: 8px;
}
.f-charter-bullets li {
display: flex; align-items: center; gap: 10px;
color: rgba(255,255,255,0.85);
font-size: 0.92rem;
font-weight: 600;
}
.f-charter-bullets li i {
width: 26px; height: 26px;
border-radius: 50%;
background: rgba(0,210,255,0.15);
color: var(--turquoise);
display: inline-flex; align-items: center; justify-content: center;
font-size: 0.72rem;
flex-shrink: 0;
}
.f-charter-cta {
display: inline-flex; align-items: center; gap: 10px;
padding: 14px 26px;
background: linear-gradient(135deg, #00b4dd, var(--turquoise));
color: #0a2540;
border-radius: 12px;
font-weight: 800;
font-size: 0.95rem;
text-decoration: none;
box-shadow: 0 10px 26px rgba(0,210,255,0.35);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.f-charter-cta:hover {
transform: translateY(-2px);
box-shadow: 0 14px 36px rgba(0,210,255,0.5);
}
.f-charter-cta i { transition: transform 0.25s ease; }
.f-charter-cta:hover i { transform: translateX(4px); }
/* Right-hand media — circular vessel photo with 24/7 badge. */
.f-charter-media {
position: relative; z-index: 1;
display: flex; align-items: center; justify-content: center;
min-height: 280px;
}
.f-charter-image {
width: 100%;
max-width: 360px;
aspect-ratio: 1 / 1;
border-radius: 50%;
background-size: cover; background-position: center;
background-color: #0a1729;
background-image: linear-gradient(135deg, #0a1729 0%, #0c2d48 60%, #0e3756 100%);
box-shadow: 0 22px 50px rgba(0,0,0,0.5),
inset 0 0 0 6px rgba(0,210,255,0.08);
border: 2px solid rgba(0,210,255,0.25);
animation: charterFloat 6s ease-in-out infinite;
}
@keyframes charterFloat {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
}
.f-charter-247 {
position: absolute;
right: -2%;
bottom: 8%;
width: 86px; height: 86px;
border-radius: 50%;
background: rgba(15, 23, 42, 0.85);
border: 2px solid var(--turquoise);
display: flex; align-items: center; justify-content: center;
color: var(--turquoise);
box-shadow: 0 8px 24px rgba(0,210,255,0.35),
0 0 0 8px rgba(0,210,255,0.06);
backdrop-filter: blur(6px);
}
.f-charter-247-num {
font-family: var(--font-heading, 'Playfair Display', serif);
font-size: 1.45rem;
font-weight: 900;
letter-spacing: -0.5px;
}
@media (max-width: 900px) {
.f-charter {
grid-template-columns: 1fr;
padding: 32px 26px;
gap: 24px;
text-align: center;
}
.f-charter-text { text-align: center; }
.f-charter-bullets li { justify-content: center; }
.f-charter-desc { margin-left: auto; margin-right: auto; }
.f-charter-media { min-height: 240px; }
.f-charter-image { max-width: 280px; }
.f-charter-247 { width: 72px; height: 72px; }
.f-charter-247-num { font-size: 1.2rem; }
}
@media (max-width: 480px) {
.f-charter { padding: 26px 18px; border-radius: 18px; }
.f-charter-image { max-width: 220px; }
.f-charter-247 { width: 60px; height: 60px; right: 4%; bottom: 4%; }
.f-charter-247-num { font-size: 1rem; }
}
/* Light variant */
.features-light {
padding: 80px 5%;
background: var(--gray-50);
}
.features-light .f-card {
background: var(--white);
border: 1px solid var(--gray-200);
}
.features-light .f-card:hover {
box-shadow: var(--shadow-xl);
border-color: transparent;
}
.features-light .f-card h3 { color: var(--navy); }
.features-light .f-card p { color: var(--gray-500); }
/* ============================================================================
PAGE BANNER (Sub-pages)
============================================================================ */
.page-banner {
position: relative;
padding: 140px 5% 130px;
background: linear-gradient(165deg, #0a0f1e 0%, #0f172a 40%, #0c2d48 100%);
overflow: hidden;
margin-top: 68px;
/* Deep elliptical "drop curve" along the bottom — matches the
hero on excursion detail pages (.exd-hero) for a consistent
look across destinations / excursions listings / island pages.
The center bottom dips down further than the corners, giving
the modern smooth-curve silhouette. */
clip-path: ellipse(120% 100% at 50% 0%);
-webkit-clip-path: ellipse(120% 100% at 50% 0%);
box-shadow: 0 16px 50px rgba(0,0,0,0.15);
}
/* Disable the previous upward-hill swoosh — clip-path now does the
shaping, and a white ::before would just punch a hole inside the
ellipse. */
.page-banner::before { display: none; }
/* Soft radial glow at the dip + a subtle bottom shade for depth,
mirroring .exd-hero::after. */
.page-banner::after {
content: '';
position: absolute;
display: block;
bottom: 0; left: 0; right: 0;
height: 90px;
background:
radial-gradient(ellipse 200% 100% at 50% 100%, rgba(0,210,255,0.18) 0%, transparent 70%),
linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.35) 100%);
pointer-events: none;
z-index: 1;
}
.page-banner-overlay {
position: absolute; inset: 0;
background: url('data:image/svg+xml,') no-repeat bottom center;
background-size: cover;
}
.page-banner .section-label {
position: relative; z-index: 1;
}
.page-banner-title {
position: relative; z-index: 1;
font-family: var(--font-heading);
font-size: clamp(2.2rem, 5vw, 3.5rem);
font-weight: 900;
color: var(--white);
margin-bottom: 12px;
}
.page-banner-title span { color: var(--turquoise); }
.page-banner-subtitle {
position: relative; z-index: 1;
font-size: 1.1rem;
color: rgba(255,255,255,0.55);
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
/* ============================================================================
CARDS
============================================================================ */
.card {
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: var(--radius-lg);
padding: 28px;
transition: var(--transition);
}
.card:hover { box-shadow: var(--shadow-lg); }
/* ============================================================================
BUTTONS
============================================================================ */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 14px 28px;
font-size: 0.9rem; font-weight: 700;
border-radius: var(--radius-md);
transition: var(--transition);
cursor: pointer;
border: 2px solid transparent;
}
.btn-primary {
background: var(--navy);
color: var(--white);
}
.btn-primary:hover {
background: var(--turquoise);
color: var(--navy);
transform: translateY(-1px);
box-shadow: var(--shadow-lg);
}
.btn-outline {
background: transparent;
color: var(--navy);
border-color: var(--gray-300);
}
.btn-outline:hover {
border-color: var(--navy);
background: var(--navy);
color: var(--white);
}
.btn-turquoise {
background: var(--turquoise);
color: var(--navy);
}
.btn-turquoise:hover {
background: var(--navy);
color: var(--white);
}
.btn-sm { padding: 8px 16px; font-size: 0.8rem; }
.btn-lg { padding: 16px 36px; font-size: 1rem; }
.btn-block { width: 100%; }
/* ============================================================================
FORMS
============================================================================ */
.modern-input, .form-input, .form-select {
width: 100%;
padding: 14px 16px;
border: 2px solid var(--gray-200);
border-radius: var(--radius-md);
font-size: 0.92rem; font-weight: 500;
color: var(--navy);
background: var(--white);
transition: var(--transition);
}
.modern-input:focus, .form-input:focus, .form-select:focus {
border-color: var(--turquoise);
box-shadow: 0 0 0 4px rgba(0,210,255,0.1);
outline: none;
}
.input-group { margin-bottom: 20px; }
.input-label, .form-label {
display: block;
font-size: 0.78rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 1px;
color: var(--gray-500);
margin-bottom: 8px;
}
.row {
display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
@media (max-width: 640px) {
.row { grid-template-columns: 1fr; }
}
/* ============================================================================
BOOKING PAGE
============================================================================ */
.route-hero {
background: linear-gradient(165deg, #0a0f1e, #0f172a);
padding: 140px 5% 60px;
position: relative;
}
.route-hero::after {
content: '';
position: absolute; bottom: -2px; left: 0; right: 0; height: 50px;
background: var(--gray-50);
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.route-visualizer {
display: flex; align-items: center; justify-content: center;
gap: 20px; max-width: 700px; margin: 0 auto;
color: var(--white);
}
.route-visualizer .node { text-align: center; }
.route-visualizer .city {
display: block; font-size: 1.2rem; font-weight: 800;
margin-bottom: 4px;
}
.route-visualizer .time {
display: block; font-size: 0.85rem;
color: rgba(255,255,255,0.5);
}
.route-visualizer .track {
flex: 1; position: relative;
height: 3px; background: rgba(255,255,255,0.15);
border-radius: 3px;
display: flex; align-items: center; justify-content: center;
}
.track-progress {
position: absolute; left: 0; top: 0; bottom: 0;
width: 60%; background: var(--turquoise);
border-radius: 3px;
}
.ship-icon {
position: relative; z-index: 2;
width: 40px; height: 40px;
background: var(--turquoise);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: var(--navy); font-size: 1rem;
box-shadow: 0 0 20px rgba(0,210,255,0.4);
}
.seats-left {
position: absolute; top: 14px;
font-size: 0.68rem; font-weight: 800;
color: var(--turquoise); letter-spacing: 1px;
white-space: nowrap;
}
.content-grid {
display: grid; grid-template-columns: 1fr 380px;
gap: 32px; padding: 40px 5%;
max-width: 1200px; margin: 0 auto;
background: var(--gray-50);
}
@media (max-width: 992px) {
.content-grid { grid-template-columns: 1fr; }
}
.section-title-booking {
font-size: 0.85rem; font-weight: 800;
text-transform: uppercase; letter-spacing: 1.5px;
color: var(--gray-500);
margin-bottom: 20px;
display: flex; align-items: center; gap: 8px;
}
.section-title-booking i { color: var(--turquoise); }
.payment-sidebar .summary-card {
position: sticky; top: 100px;
background: var(--navy);
border-radius: var(--radius-xl);
padding: 32px;
color: var(--white);
}
.summary-header h2 {
font-size: 1.3rem; font-weight: 800; margin-bottom: 4px;
}
.pax-row {
display: flex; justify-content: space-between; align-items: center;
padding: 12px 0;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
.pax-name { display: block; font-weight: 700; font-size: 0.9rem; }
.pax-meta { display: block; font-size: 0.75rem; opacity: 0.5; }
.pax-val { font-weight: 800; font-size: 1rem; color: var(--turquoise); }
.total-box {
display: flex; justify-content: space-between; align-items: center;
padding: 20px 0;
margin-top: 12px;
border-top: 2px solid rgba(255,255,255,0.1);
}
.total-label { font-weight: 700; font-size: 0.9rem; opacity: 0.6; }
.total-amount { font-size: 1.5rem; font-weight: 900; }
.pay-btn {
display: block; width: 100%;
padding: 16px;
background: var(--gray-600);
color: rgba(255,255,255,0.4);
font-size: 0.9rem; font-weight: 800;
border-radius: var(--radius-md);
letter-spacing: 1px;
margin-top: 20px;
transition: var(--transition);
cursor: not-allowed;
}
.pay-btn.active {
background: var(--turquoise);
color: var(--navy);
cursor: pointer;
}
.pay-btn.active:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0,210,255,0.3);
}
.add-pax-btn {
display: flex; align-items: center; justify-content: center; gap: 8px;
width: 100%;
padding: 16px;
border: 2px dashed var(--gray-300);
border-radius: var(--radius-lg);
font-size: 0.85rem; font-weight: 800;
color: var(--gray-500);
letter-spacing: 1px;
transition: var(--transition);
margin-top: 16px;
}
.add-pax-btn:hover {
border-color: var(--turquoise);
color: var(--turquoise);
background: rgba(0,210,255,0.03);
}
/* ============================================================================
BOOKING PAGE — MODERN LIGHT DESIGN
============================================================================ */
/* Hero */
.bk-page-hero {
background: linear-gradient(165deg, #0a0f1e 0%, #0f172a 40%, #0c2d48 100%);
padding: 100px 5% 80px;
position: relative;
overflow: hidden;
}
.bk-page-hero::before {
content: '';
position: absolute;
bottom: -2px; left: -5%; right: -5%;
height: 80px;
background: var(--white);
border-radius: 50% 50% 0 0 / 100% 100% 0 0;
z-index: 2;
}
.bk-back-link {
display: inline-flex; align-items: center; gap: 6px;
color: rgba(255,255,255,0.5); font-size: 0.82rem; font-weight: 600;
text-decoration: none; margin-bottom: 24px;
transition: color 0.2s;
position: relative; z-index: 3;
}
.bk-back-link:hover { color: var(--turquoise); }
/* Route Banner */
.bk-route-banner {
display: flex; align-items: center; justify-content: center;
gap: 0; max-width: 900px; margin: 0 auto;
padding: 10px 0 20px;
position: relative; z-index: 3;
}
.bk-route-from, .bk-route-to {
display: flex; flex-direction: column; align-items: center; gap: 6px;
min-width: 120px;
}
.bk-route-from { align-items: flex-start; }
.bk-route-to { align-items: flex-end; }
.bk-route-name {
font-family: var(--font-heading);
font-size: 1.4rem; font-weight: 900;
color: var(--white); letter-spacing: -0.3px;
}
.bk-route-time {
font-size: 0.85rem; font-weight: 500;
color: rgba(255,255,255,0.45);
}
.bk-route-line {
flex: 1; display: flex; flex-direction: column;
align-items: center; position: relative;
padding: 0 24px; min-width: 180px;
}
.bk-route-line-bar {
width: 100%; height: 2px;
background: rgba(255,255,255,0.15);
position: relative;
overflow: hidden;
}
/* Animated glow moving left → right (departure) */
.bk-route-line-bar::after {
content: '';
position: absolute;
top: -2px; left: -30%;
width: 30%; height: 6px;
background: linear-gradient(90deg, transparent, var(--turquoise), rgba(0,210,255,0.8), var(--turquoise), transparent);
border-radius: 6px;
animation: lineGlowLTR 4.5s ease-in-out infinite;
filter: blur(2px);
box-shadow: 0 0 12px rgba(0,210,255,0.4);
}
@keyframes lineGlowLTR {
0% { left: -30%; opacity: 0; }
5% { opacity: 1; }
95% { opacity: 1; }
100% { left: 100%; opacity: 0; }
}
/* Return banner: same left → right glow, orange color */
.bk-route-banner-return .bk-route-line-bar::after {
background: linear-gradient(90deg, transparent, #f59e0b, rgba(245,158,11,0.8), #f59e0b, transparent);
box-shadow: 0 0 12px rgba(245,158,11,0.4);
}
@keyframes lineGlowRTL {
0% { left: 100%; opacity: 0; }
5% { opacity: 1; }
95% { opacity: 1; }
100% { left: -30%; opacity: 0; }
}
.bk-route-icon {
width: 48px; height: 48px;
background: radial-gradient(circle, rgba(0,210,255,0.25), transparent 70%);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
margin-top: -8px;
}
.bk-route-icon i {
font-size: 1.1rem; color: var(--turquoise);
filter: drop-shadow(0 0 8px rgba(0,210,255,0.5));
}
.bk-route-seats {
font-size: 0.72rem; font-weight: 800;
letter-spacing: 1.5px; color: var(--turquoise);
margin-top: 14px; white-space: nowrap;
}
.bk-route-seats i { margin-right: 4px; }
/* Return Trip Labels */
.bk-route-trip-label {
text-align: center;
font-size: 0.78rem; font-weight: 800;
letter-spacing: 1.5px; color: rgba(255,255,255,0.6);
margin-bottom: 4px; padding-top: 6px;
display: flex; align-items: center; justify-content: center; gap: 8px;
position: relative; z-index: 3;
}
.bk-route-trip-label i { color: var(--turquoise); font-size: 0.85rem; }
.bk-route-trip-return i { color: #f59e0b; }
.bk-route-trip-return { color: rgba(255,255,255,0.5); }
.bk-route-divider {
width: 60px; height: 2px;
background: rgba(255,255,255,0.12);
margin: 16px auto 12px;
border-radius: 2px;
}
.bk-trip-badge-return {
display: inline-flex; align-items: center; gap: 5px;
font-size: 0.68rem; font-weight: 800;
letter-spacing: 0.8px; color: #f59e0b;
background: rgba(245,158,11,0.08);
padding: 4px 12px; border-radius: 20px;
text-transform: uppercase;
}
.bk-trip-label {
font-size: 0.68rem; font-weight: 800;
letter-spacing: 1.5px; color: var(--gray-400);
padding: 12px 24px 4px; text-transform: uppercase;
}
/* Steps Bar */
.bk-steps-bar {
background: var(--white);
border-bottom: 1px solid var(--gray-100);
padding: 0 5%;
}
.bk-steps-inner {
max-width: 480px; margin: 0 auto;
display: flex; align-items: center; gap: 0;
padding: 20px 0;
}
.bk-step {
display: flex; align-items: center; gap: 10px;
white-space: nowrap;
}
.bk-step-num {
width: 32px; height: 32px;
border-radius: 50%; display: flex; align-items: center; justify-content: center;
font-size: 0.82rem; font-weight: 800;
background: var(--gray-100); color: var(--gray-400);
transition: var(--transition);
}
.bk-step.active .bk-step-num {
background: var(--turquoise); color: var(--white);
}
.bk-step-label {
font-size: 0.88rem; font-weight: 700; color: var(--gray-400);
}
.bk-step.active .bk-step-label { color: var(--navy); }
.bk-step-line {
flex: 1; height: 2px;
background: var(--gray-200); margin: 0 20px;
}
/* Page Grid — extra width on desktop so the merged Lead+Pax card has
more horizontal room (cuts vertical height further). */
.bk-page-grid {
display: grid; grid-template-columns: 1fr 340px;
gap: 24px; padding: 28px 4%;
max-width: 1320px; margin: 0 auto;
background: var(--gray-50);
min-height: 60vh;
}
@media (max-width: 992px) {
.bk-page-grid { grid-template-columns: 1fr; }
}
/* Form Cards */
.bk-form-card {
background: var(--white);
border-radius: 16px;
border: 1px solid var(--gray-100);
margin-bottom: 16px;
overflow: visible;
}
/* ── Merged Lead Contact + Primary Passenger card (all screen sizes)
The two cards visually fuse into ONE shorter block: bottom-radius
removed from the top card, top-radius removed from the bottom card,
margin between them collapsed, and a soft dashed divider in place
of the double border. On both desktop and mobile this saves a full
"card gap" of vertical space and reads as one card. */
.bk-form-card.bk-merge-top {
margin-bottom: 0;
border-radius: 16px 16px 0 0;
border-bottom: 0;
}
#passenger-stack > .bk-form-card.bk-merge-bottom {
margin-top: 0;
border-radius: 0 0 16px 16px;
border-top: 1px dashed var(--gray-100);
}
.bk-form-card.bk-merge-bottom .bk-form-header {
border-radius: 0;
}
/* Tightened paddings — both cards lose some vertical bulk. */
.bk-form-card.bk-merge-top .bk-form-body,
.bk-form-card.bk-merge-bottom .bk-form-body {
padding: 14px 22px;
}
.bk-form-card.bk-merge-top .bk-form-header,
.bk-form-card.bk-merge-bottom .bk-form-header {
padding: 11px 22px;
}
.bk-form-card.bk-merge-top .bk-form-group,
.bk-form-card.bk-merge-bottom .bk-form-group {
margin-bottom: 10px;
}
/* Slightly shorter inputs inside the merged card */
.bk-form-card.bk-merge-top .bk-form-input,
.bk-form-card.bk-merge-bottom .bk-form-input,
.bk-form-card.bk-merge-top .bk-dd-trigger-pub,
.bk-form-card.bk-merge-bottom .bk-dd-trigger-pub {
padding-top: 10px;
padding-bottom: 10px;
}
@media (max-width: 600px) {
.bk-form-card.bk-merge-top .bk-form-body,
.bk-form-card.bk-merge-bottom .bk-form-body { padding: 12px 14px; }
.bk-form-card.bk-merge-top .bk-form-header,
.bk-form-card.bk-merge-bottom .bk-form-header { padding: 10px 14px; }
.bk-form-card.bk-merge-top .bk-form-group,
.bk-form-card.bk-merge-bottom .bk-form-group { margin-bottom: 8px; }
}
.bk-form-header {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 24px;
border-bottom: 1px solid var(--gray-100);
font-size: 0.78rem; font-weight: 800;
letter-spacing: 1.2px; color: var(--gray-500);
border-radius: 16px 16px 0 0;
}
.bk-form-header i {
color: var(--turquoise); margin-right: 8px;
font-size: 0.85rem;
}
.bk-pax-header {
background: #F0FBFE;
color: var(--navy);
border-bottom: 1px solid #e0f2fe;
}
.bk-pax-header i {
color: var(--turquoise-dark);
}
.bk-pax-header span {
color: var(--navy);
}
.bk-pax-remove {
background: none; border: none;
color: #ef4444; font-size: 0.75rem;
font-weight: 700; cursor: pointer;
font-family: inherit;
display: flex; align-items: center; gap: 4px;
opacity: 0.7; transition: opacity 0.2s;
}
.bk-pax-remove:hover { opacity: 1; color: #dc2626; }
.bk-pax-adult-warn {
margin: 4px 0 12px;
padding: 10px 16px;
background: #fef3c7;
border: 1px solid #fde68a;
border-radius: 8px;
font-size: 0.75rem;
font-weight: 600;
color: #92400e;
line-height: 1.4;
display: flex;
align-items: center;
gap: 8px;
}
.bk-pax-adult-warn i {
color: #f59e0b;
font-size: 0.85rem;
flex-shrink: 0;
}
/* ── Loyalty Points Hint (guests only) — compact ── */
.bk-loyalty-hint {
display: flex;
align-items: center;
gap: 10px;
margin-top: 8px;
padding: 8px 12px;
background: linear-gradient(135deg, rgba(0,210,255,0.06), rgba(15,23,42,0.04));
border: 1px solid rgba(0,210,255,0.15);
border-radius: 9px;
}
.bk-loyalty-hint-icon {
width: 28px; height: 28px;
background: rgba(0,210,255,0.12);
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.bk-loyalty-hint-icon i {
color: var(--turquoise) !important;
font-size: 0.9rem;
margin: 0 !important;
}
.bk-loyalty-hint-text {
font-size: 0.74rem;
line-height: 1.45;
}
.bk-loyalty-hint-text strong {
display: block;
color: var(--navy);
font-size: 0.78rem;
margin-bottom: 0;
}
.bk-loyalty-hint-text span {
color: var(--gray-500);
}
.bk-loyalty-hint-text a {
color: var(--turquoise-dark);
font-weight: 700;
text-decoration: none;
}
.bk-loyalty-hint-text a:hover {
text-decoration: underline;
}
/* ── Custom Dropdowns (Nationality + Passenger Type) ── */
.bk-dd-wrap {
position: relative;
}
.bk-dd-trigger-pub {
width: 100%; padding: 14px 40px 14px 16px;
border: 1.5px solid var(--gray-200);
border-radius: 12px;
font-size: 0.88rem; font-weight: 500;
color: var(--navy); background: var(--white);
cursor: pointer;
transition: border-color 0.2s;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
display: flex; align-items: center; gap: 6px;
height: 48px; min-height: 48px; max-height: 48px;
box-sizing: border-box;
user-select: none;
}
.bk-dd-trigger-pub:hover { border-color: var(--turquoise); }
.bk-dd-trigger-pub.bk-dd-placeholder { color: var(--gray-300); font-weight: 400; }
.bk-dd-arrow-pub {
position: absolute; right: 14px; top: 50%;
transform: translateY(-50%);
font-size: 0.7rem; color: var(--gray-300);
pointer-events: none;
}
.bk-dd-disabled .bk-dd-trigger-pub {
opacity: 0.45; cursor: not-allowed;
background: var(--gray-50);
}
.bk-dd-disabled .bk-dd-trigger-pub:hover { border-color: var(--gray-200); }
/* Dropdown panel */
.bk-custom-drop {
position: absolute; top: calc(100% + 6px); left: 0; right: 0;
background: var(--white);
border: 1.5px solid var(--gray-200);
border-radius: 14px;
box-shadow: 0 12px 36px rgba(0,0,0,0.14);
z-index: 200;
overflow: hidden;
}
.bk-dd-search-wrap {
padding: 10px 12px;
border-bottom: 1px solid var(--gray-100);
position: relative;
}
.bk-dd-search-icon {
position: absolute; left: 22px; top: 50%;
transform: translateY(-50%);
font-size: 0.75rem; color: var(--gray-300);
}
.bk-dd-search {
width: 100%; padding: 10px 12px 10px 32px;
border: 1.5px solid var(--gray-200);
border-radius: 10px;
font-size: 0.82rem; font-weight: 500;
color: var(--navy); background: var(--gray-50);
font-family: inherit;
transition: border-color 0.2s;
}
.bk-dd-search:focus {
outline: none;
border-color: var(--turquoise);
background: var(--white);
}
.bk-dd-search::placeholder { color: var(--gray-300); }
/* Dropdown list (scrollable) */
.bk-nat-dropdown .bk-dd-opt,
.bk-custom-drop .bk-dd-opt {
padding: 10px 14px;
font-size: 0.85rem; font-weight: 500;
color: var(--navy);
cursor: pointer;
display: flex; align-items: center; gap: 8px;
transition: background 0.12s;
}
.bk-dd-opt:hover { background: rgba(0,210,255,0.06); }
.bk-dd-opt.bk-dd-selected { background: rgba(0,210,255,0.04); font-weight: 600; }
.bk-seat-opt { padding: 8px 14px !important; }
.bk-seat-selected { background: rgba(22,163,106,0.08) !important; }
.bk-seat-selected:hover { background: rgba(22,163,106,0.12) !important; }
.bk-dd-flag { font-size: 1.1rem; flex-shrink: 0; }
.bk-dd-name { flex: 1; }
.bk-dd-empty {
padding: 14px; text-align: center;
font-size: 0.82rem; color: var(--gray-400);
}
/* Make the list area scrollable */
.bk-custom-drop {
max-height: 350px;
}
.bk-dd-list {
max-height: 240px;
overflow-y: auto;
padding: 4px 0;
}
.bk-form-body { padding: 24px; }
.bk-pax-row {
display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.bk-form-group { margin-bottom: 16px; }
.bk-form-group:last-child { margin-bottom: 0; }
.bk-form-full { grid-column: 1 / -1; }
.bk-form-label {
display: block; font-size: 0.72rem; font-weight: 800;
letter-spacing: 1px; color: var(--navy);
margin-bottom: 8px; text-transform: uppercase;
}
.bk-form-input {
width: 100%; padding: 14px 16px;
border: 1.5px solid var(--gray-200);
border-radius: 12px;
font-size: 0.88rem; font-weight: 500;
color: var(--navy); background: var(--white);
font-family: inherit;
transition: border-color 0.2s;
box-sizing: border-box;
-webkit-appearance: none;
}
.bk-form-input:focus {
outline: none;
border-color: var(--turquoise);
box-shadow: 0 0 0 3px rgba(0,210,255,0.08);
}
.bk-form-input::placeholder { color: var(--gray-300); }
.bk-latin-warn {
display: flex; align-items: center; gap: 6px;
font-size: 0.78rem; color: #1d4ed8; margin-top: 5px;
background: #eff6ff; border-radius: 6px; padding: 5px 10px;
animation: bkWarnIn 0.25s ease;
}
.bk-latin-warn i { color: #3b82f6; font-size: 0.8rem; flex-shrink: 0; }
@keyframes bkWarnIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
select.bk-form-input {
appearance: auto;
cursor: pointer;
}
/* Add Passenger Button */
.bk-add-pax-btn {
display: flex; align-items: center; justify-content: center; gap: 8px;
width: 100%; padding: 16px;
border: 2px dashed var(--gray-200);
border-radius: 16px;
font-size: 0.88rem; font-weight: 700;
color: var(--gray-400);
background: var(--white);
cursor: pointer;
transition: var(--transition);
font-family: inherit;
margin-bottom: 24px;
}
.bk-add-pax-btn:hover {
border-color: var(--turquoise);
color: var(--turquoise);
background: rgba(0,210,255,0.02);
}
/* Trip Sidebar */
.bk-trip-sidebar { position: relative; }
.bk-trip-card {
position: sticky; top: 100px;
background: var(--white);
border-radius: 16px;
border: 1px solid var(--gray-100);
overflow: hidden;
}
.bk-trip-header {
padding: 20px 24px;
background: #F0FBFE;
border-bottom: 1px solid #e0f2fe;
}
.bk-trip-header h3 {
font-size: 1.1rem; font-weight: 800;
color: var(--navy); margin: 0;
}
.bk-trip-info { padding: 20px 24px; }
.bk-trip-label {
font-size: 0.68rem; font-weight: 800;
letter-spacing: 1.5px; color: var(--gray-400);
text-transform: uppercase; margin-bottom: 10px;
}
.bk-trip-date-row {
display: flex; justify-content: space-between;
align-items: flex-start; margin-bottom: 4px;
}
.bk-trip-date {
font-size: 1rem; font-weight: 800; color: var(--navy);
}
.bk-trip-seats {
text-align: right; font-size: 0.72rem;
color: var(--gray-400); line-height: 1.4;
}
.bk-trip-seats strong {
color: var(--success); font-weight: 800;
font-size: 0.88rem; display: block;
}
.bk-trip-vessel {
font-size: 0.82rem; color: var(--gray-400);
font-weight: 500; margin-bottom: 20px;
}
/* Horizontal Timeline — dashed track with a circular ferry "medallion"
and a chevron arrow at the destination side. The track must align
horizontally with the centre of the origin/destination DOTS, not
with the centre of the whole stop column (which would push it down
under the city names). We do that by giving the line container the
same height as the dot and using align-items:flex-start. */
.bk-trip-timeline-h {
--tl-accent: var(--turquoise);
--tl-accent-soft: rgba(0, 196, 204, 0.14);
--tl-dot-size: 12px;
display: flex; align-items: flex-start;
gap: 0; padding: 6px 4px 0; margin-bottom: 4px;
}
.bk-trip-timeline-h-return {
--tl-accent: #f59e0b;
--tl-accent-soft: rgba(245, 158, 11, 0.14);
}
.bk-tl-h-stop {
display: flex; flex-direction: column;
align-items: center; text-align: center;
flex-shrink: 0; min-width: 0;
}
.bk-tl-h-dot {
width: var(--tl-dot-size); height: var(--tl-dot-size);
border-radius: 50%;
background: var(--tl-accent);
border: 2px solid var(--white);
box-shadow: 0 0 0 2px var(--tl-accent);
flex-shrink: 0; margin-bottom: 6px;
}
.bk-tl-h-dot-end {
background: var(--white);
border: 2px solid var(--tl-accent);
box-shadow: 0 0 0 2px var(--tl-accent);
}
/* Line container = exact height of a dot so flex-start aligns the
line centre with the dot centre. Medallion + chevron use overflow
above/below this thin strip — that's fine, overflow stays visible. */
.bk-tl-h-line {
position: relative;
flex: 1; min-width: 56px;
height: var(--tl-dot-size);
overflow: visible;
}
.bk-tl-h-line::before {
content: '';
position: absolute;
left: 0; right: 8px; top: 50%;
border-top: 2px dashed var(--tl-accent);
opacity: 0.55;
transform: translateY(-1px);
}
.bk-tl-h-line-ship {
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: 26px; height: 26px;
border-radius: 50%;
background: var(--white);
border: 1.5px solid var(--tl-accent);
color: var(--tl-accent);
display: inline-flex; align-items: center; justify-content: center;
font-size: 11px;
box-shadow: 0 4px 10px var(--tl-accent-soft), 0 0 0 4px var(--white);
z-index: 2;
}
.bk-tl-h-line-arrow {
position: absolute;
right: -2px; top: 50%;
transform: translateY(-50%);
width: 0; height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 8px solid var(--tl-accent);
opacity: 0.85;
}
.bk-tl-h-name {
font-size: 0.72rem; font-weight: 700;
color: var(--navy); line-height: 1.2;
white-space: nowrap;
}
.bk-tl-h-time {
font-size: 0.68rem; color: var(--gray-400);
font-weight: 500; margin-top: 1px;
}
@media (max-width: 480px) {
.bk-trip-timeline-h { --tl-dot-size: 10px; }
.bk-tl-h-name { font-size: 0.65rem; }
.bk-tl-h-time { font-size: 0.6rem; }
.bk-tl-h-line { min-width: 48px; }
.bk-tl-h-line-ship { width: 22px; height: 22px; font-size: 10px; }
}
.bk-trip-divider {
height: 1px; background: var(--gray-100);
margin: 0 24px;
}
/* Fare rows in sidebar */
.bk-fare-row {
display: flex; justify-content: space-between;
align-items: center; padding: 14px 24px;
border-bottom: 1px solid var(--gray-50);
}
.bk-fare-name {
display: block; font-size: 0.88rem;
font-weight: 700; color: var(--navy);
}
.bk-fare-meta {
display: block; font-size: 0.72rem;
color: var(--gray-400); font-weight: 500;
}
.bk-fare-amount {
font-size: 0.95rem; font-weight: 800;
color: var(--turquoise);
white-space: nowrap;
}
/* Total */
.bk-trip-total {
display: flex; justify-content: space-between;
align-items: center; padding: 16px 24px 4px;
}
.bk-trip-total span:first-child {
font-size: 0.88rem; font-weight: 600;
color: var(--gray-500);
}
.bk-trip-total-amount {
font-size: 1.3rem; font-weight: 900;
color: var(--turquoise);
}
.bk-trip-tax-note {
padding: 0 24px 16px;
font-size: 0.72rem; color: var(--gray-300);
margin: 0;
}
/* Loyalty points-to-earn banner — shown above the Confirm button
when the logged-in customer's selected route awards points. */
.bk-loyalty-banner {
display: flex; align-items: center; gap: 12px;
margin: 0 24px 16px;
padding: 12px 14px;
background: linear-gradient(135deg, rgba(245,158,11,0.10), rgba(251,191,36,0.06));
border: 1px solid rgba(245,158,11,0.25);
border-left: 3px solid #f59e0b;
border-radius: 10px;
}
.bk-loyalty-banner .bk-loyalty-icon {
width: 36px; height: 36px; flex-shrink: 0;
border-radius: 50%;
background: linear-gradient(135deg, #fbbf24, #f59e0b);
display: flex; align-items: center; justify-content: center;
box-shadow: 0 4px 10px rgba(245,158,11,0.25);
}
.bk-loyalty-banner .bk-loyalty-icon i {
color: #fff; font-size: 0.9rem;
}
.bk-loyalty-banner .bk-loyalty-text {
display: flex; flex-direction: column; gap: 2px;
font-size: 0.78rem; line-height: 1.3;
}
.bk-loyalty-banner .bk-loyalty-text strong {
color: #92400e; font-weight: 800; font-size: 0.85rem;
}
.bk-loyalty-banner .bk-loyalty-text span {
color: #b45309; font-weight: 500;
}
.bk-loyalty-banner #lp-total {
color: #f59e0b; font-weight: 900;
}
/* Confirm Button */
.bk-confirm-btn {
display: flex; align-items: center; justify-content: center; gap: 8px;
width: calc(100% - 48px);
margin: 0 24px 24px;
padding: 16px;
border: none; border-radius: 12px;
background: var(--gray-300);
color: var(--white);
font-size: 0.92rem; font-weight: 700;
cursor: not-allowed;
transition: var(--transition);
font-family: inherit;
opacity: 0.6;
}
.bk-confirm-btn.active {
background: linear-gradient(135deg, var(--turquoise-dark), var(--turquoise));
color: var(--white);
cursor: pointer;
opacity: 1;
box-shadow: 0 4px 16px rgba(0,210,255,0.25);
}
.bk-confirm-btn.active:hover {
transform: translateY(-1px);
box-shadow: 0 6px 20px rgba(0,210,255,0.35);
}
@media (max-width: 768px) {
.bk-page-hero { padding: 90px 5% 60px; }
.bk-route-name { font-size: 1.05rem; }
.bk-route-time { font-size: 0.75rem; }
.bk-route-line { min-width: 100px; padding: 0 12px; }
.bk-route-seats { font-size: 0.65rem; letter-spacing: 1px; }
.bk-route-trip-label { font-size: 0.7rem; letter-spacing: 1px; }
.bk-route-icon { width: 38px; height: 38px; }
.bk-route-icon i { font-size: 0.9rem; }
.bk-route-from, .bk-route-to { min-width: 90px; }
.bk-pax-row { grid-template-columns: 1fr; gap: 10px; }
.bk-form-body { padding: 16px; }
.bk-form-group { margin-bottom: 10px; }
.bk-form-label { font-size: 0.68rem; margin-bottom: 6px; }
.bk-form-input { padding: 12px 14px; font-size: 0.82rem; height: 44px; }
.bk-dd-trigger-pub { padding: 12px 36px 12px 14px; font-size: 0.82rem; height: 44px; min-height: 44px; max-height: 44px; }
.bk-pax-adult-warn { font-size: 0.72rem; padding: 8px 12px; margin: 2px 0 10px; }
.bk-seat-trigger { font-size: 0.78rem; padding: 10px 12px; }
.bk-steps-inner { gap: 0; }
.bk-step-line { margin: 0 12px; }
}
@media (max-width: 480px) {
.bk-route-name { font-size: 0.88rem; }
.bk-route-time { font-size: 0.68rem; }
.bk-route-line { min-width: 70px; padding: 0 8px; }
.bk-route-seats { font-size: 0.6rem; letter-spacing: 0.8px; margin-top: 10px; }
.bk-route-trip-label { font-size: 0.65rem; letter-spacing: 0.8px; }
.bk-route-banner { padding: 8px 0 14px; }
.bk-route-from, .bk-route-to { min-width: 70px; gap: 4px; }
.bk-route-icon { width: 32px; height: 32px; }
.bk-route-icon i { font-size: 0.8rem; }
}
/* ============================================================================
SCHEDULE TABLE
============================================================================ */
.board-table-wrap { overflow-x: auto; }
.board-table {
width: 100%; border-collapse: collapse;
}
.board-table thead th {
padding: 12px 16px;
font-size: 0.72rem; font-weight: 800;
text-transform: uppercase; letter-spacing: 1.5px;
color: var(--gray-400);
text-align: left;
border-bottom: 2px solid var(--gray-200);
}
.board-table tbody td {
padding: 14px 16px;
font-size: 0.88rem;
border-bottom: 1px solid var(--gray-100);
color: var(--gray-700);
}
.board-table tbody tr:hover { background: var(--gray-50); }
.route-cell { font-weight: 700; color: var(--navy); }
.ferry-badge {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 12px;
background: var(--gray-100);
border-radius: var(--radius-full);
font-size: 0.78rem; font-weight: 700;
color: var(--gray-600);
}
.time-cell { font-weight: 700; color: var(--navy); }
.seat-badge {
display: inline-block; padding: 4px 10px;
border-radius: var(--radius-full);
font-size: 0.78rem; font-weight: 700;
}
.seat-ok { background: rgba(16,185,129,0.1); color: var(--success); }
.seat-med { background: rgba(245,158,11,0.1); color: var(--warning); }
.seat-low { background: rgba(239,68,68,0.1); color: var(--danger); }
.btn-book-sm {
display: inline-block;
padding: 8px 18px;
background: var(--navy);
color: var(--white);
font-size: 0.78rem; font-weight: 800;
border-radius: var(--radius-full);
transition: var(--transition);
}
.btn-book-sm:hover {
background: var(--turquoise);
color: var(--navy);
}
/* ============================================================================
DESTINATIONS PAGE
============================================================================ */
.destinations-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
gap: 24px;
padding: 60px 0;
}
.dest-card {
display: flex;
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: var(--radius-lg);
overflow: hidden;
transition: var(--transition);
}
.dest-card:hover {
box-shadow: var(--shadow-xl);
border-color: transparent;
transform: translateY(-3px);
}
.dest-card-image {
width: 200px; min-height: 180px;
flex-shrink: 0;
background: linear-gradient(135deg, var(--turquoise), #0099cc);
display: flex; align-items: center; justify-content: center;
font-size: 3rem;
}
.dest-card-content {
padding: 24px;
display: flex; flex-direction: column; justify-content: center;
}
.dest-card-content h3 {
font-size: 1.2rem; font-weight: 800;
color: var(--navy); margin-bottom: 8px;
}
.dest-card-content p {
font-size: 0.88rem; color: var(--gray-500);
margin-bottom: 16px; line-height: 1.6;
}
@media (max-width: 480px) {
.dest-card { flex-direction: column; }
.dest-card-image { width: 100%; min-height: 140px; }
}
/* ============================================================================
PRICING PAGE
============================================================================ */
.pricing-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
gap: 24px;
margin-top: 40px;
}
.pricing-card {
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: var(--radius-lg);
padding: 32px;
text-align: center;
transition: var(--transition);
position: relative;
}
.pricing-card:hover {
box-shadow: var(--shadow-xl);
border-color: transparent;
transform: translateY(-4px);
}
.pricing-tag {
position: absolute; top: 16px; right: 16px;
padding: 4px 12px;
background: rgba(0,210,255,0.1);
color: var(--turquoise-dark);
font-size: 0.7rem; font-weight: 800;
border-radius: var(--radius-full);
letter-spacing: 1px;
}
/* ============================================================================
AUTH PAGES
============================================================================ */
.auth-section {
min-height: 100vh;
display: flex; align-items: center; justify-content: center;
background: linear-gradient(165deg, #0a0f1e 0%, #0f172a 50%, #0c2d48 100%);
padding: 40px 20px;
}
.login-card {
width: 100%; max-width: 440px;
background: var(--white);
border-radius: var(--radius-xl);
padding: 48px 40px;
box-shadow: var(--shadow-2xl);
}
.login-card h2 {
font-family: var(--font-heading);
font-size: 1.8rem; font-weight: 900;
color: var(--navy); margin-bottom: 8px;
}
.auth-desc {
color: var(--gray-500); font-size: 0.92rem;
margin-bottom: 32px;
}
.form-group { margin-bottom: 20px; }
.form-group.show { /* shown name field */ }
#nameGroup {
max-height: 0; opacity: 0; overflow: hidden;
transition: all 0.4s var(--ease);
margin-bottom: 0;
}
#nameGroup.show {
max-height: 100px; opacity: 1;
margin-bottom: 20px;
}
.toggle-container {
text-align: center; margin-top: 28px;
font-size: 0.88rem; color: var(--gray-500);
}
.toggle-link {
color: var(--turquoise-dark);
font-weight: 700;
margin-left: 4px;
}
.toggle-link:hover { color: var(--turquoise); }
/* ============================================================================
TABLES (My Bookings)
============================================================================ */
.table-card {
background: var(--white);
border: 1px solid var(--gray-200);
border-radius: var(--radius-lg);
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.table-card table {
width: 100%; min-width: 900px; border-collapse: collapse;
}
.table-card th {
padding: 16px 20px;
font-size: 0.72rem; font-weight: 800;
text-transform: uppercase; letter-spacing: 1.5px;
color: var(--gray-400);
text-align: left;
background: var(--gray-50);
border-bottom: 2px solid var(--gray-200);
}
.table-card td {
padding: 16px 20px;
font-size: 0.88rem;
border-bottom: 1px solid var(--gray-100);
color: var(--gray-700);
}
.table-card tr:hover td { background: var(--gray-50); }
.badge {
display: inline-block; padding: 4px 12px;
border-radius: var(--radius-full);
font-size: 0.75rem; font-weight: 700;
}
.badge-success { background: rgba(16,185,129,0.1); color: var(--success); }
.badge-warning { background: rgba(245,158,11,0.1); color: var(--warning); }
.badge-danger { background: rgba(239,68,68,0.1); color: var(--danger); }
/* ============================================================================
ISLAND FILTER BAR (Schedule page)
============================================================================ */
.island-filter-bar {
display: flex; flex-wrap: wrap; gap: 8px;
justify-content: center;
}
/* ============================================================================
FOOTER
============================================================================ */
.site-footer {
background: var(--navy);
padding: 64px 5% 0;
color: rgba(255,255,255,0.5);
position: relative;
}
.site-footer::before {
content: '';
position: absolute; top: -2px; left: 0; right: 0; height: 60px;
background: var(--white);
border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.footer-grid {
display: grid;
grid-template-columns: 2fr 1fr 1fr 1.5fr;
gap: 48px;
padding-top: 40px;
}
@media (max-width: 992px) {
.footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
.footer-grid { grid-template-columns: 1fr; gap: 32px; }
}
.footer-section h4 {
font-size: 0.78rem; font-weight: 800;
text-transform: uppercase; letter-spacing: 2px;
color: var(--white);
margin-bottom: 20px;
}
.footer-section p {
font-size: 0.88rem; line-height: 1.7;
}
.footer-section ul {
list-style: none;
}
.footer-section ul li { margin-bottom: 10px; }
.footer-section ul li a {
font-size: 0.88rem;
color: rgba(255,255,255,0.5);
transition: var(--transition);
}
.footer-section ul li a:hover {
color: var(--turquoise);
padding-left: 4px;
}
.footer-social {
display: flex; gap: 12px;
margin-top: 20px;
}
.footer-social a {
--brand: var(--turquoise, #00d2ff); /* fallback if PHP didn't set it */
width: 40px; height: 40px;
border-radius: 50%;
background: rgba(255,255,255,0.06);
display: flex; align-items: center; justify-content: center;
color: rgba(255,255,255,0.85);
border: 1px solid rgba(255,255,255,0.08);
transition: background .25s ease, color .25s ease, transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.footer-social a:hover {
/* Light up to the platform's real brand colour set inline as
--brand on each . White icon stays readable on every brand. */
background: var(--brand);
border-color: var(--brand);
color: #fff;
transform: translateY(-2px);
box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 45%, transparent);
}
/* color-mix fallback for older browsers — softer ring without it */
@supports not (color: color-mix(in srgb, red, blue)) {
.footer-social a:hover { box-shadow: 0 6px 16px rgba(0,0,0,0.35); }
}
.copyright {
text-align: center;
padding: 32px 0;
margin-top: 48px;
border-top: 1px solid rgba(255,255,255,0.06);
font-size: 0.82rem;
color: rgba(255,255,255,0.3);
}
/* ============================================================================
TOAST NOTIFICATIONS
============================================================================ */
.toast {
position: fixed; top: 24px; right: 24px; z-index: 10000;
padding: 16px 24px;
border-radius: var(--radius-md);
font-size: 0.88rem; font-weight: 600;
color: var(--white);
box-shadow: var(--shadow-xl);
animation: slideInRight 0.4s var(--ease);
max-width: 400px;
}
.toast-success { background: var(--success); }
.toast-error { background: var(--danger); }
.toast-info { background: var(--navy); }
@keyframes slideInRight {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@keyframes slideOutRight {
from { transform: translateX(0); opacity: 1; }
to { transform: translateX(100%); opacity: 0; }
}
/* ============================================================================
SCROLL REVEAL
============================================================================ */
.reveal {
opacity: 0; transform: translateY(30px);
transition: opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.reveal.visible {
opacity: 1; transform: translateY(0);
}
/* ============================================================================
SECTION (generic)
============================================================================ */
.section { padding: 80px 5%; }
/* Board Empty State */
.board-empty {
text-align: center; padding: 60px 20px;
color: var(--gray-400);
}
.board-empty i { font-size: 2.5rem; display: block; margin-bottom: 16px; opacity: 0.4; }
/* ============================================================================
SCHEDULE PAGE — Route Cards
============================================================================ */
.schedule-section {
padding: 60px 5%;
background: linear-gradient(180deg, var(--gray-50) 0%, var(--white) 100%);
}
.schedule-header {
text-align: center;
margin-bottom: 40px;
}
.schedule-date-nav {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin-bottom: 12px;
}
.schedule-date-nav .nav-btn {
width: 44px;
height: 44px;
border-radius: 50%;
border: 2px solid var(--gray-200);
background: var(--white);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
color: var(--navy);
font-size: 0.9rem;
}
.schedule-date-nav .nav-btn:hover {
background: var(--turquoise);
border-color: var(--turquoise);
color: var(--white);
transform: scale(1.08);
}
.schedule-date-label {
font-family: var(--font-heading);
font-size: 1.8rem;
font-weight: 900;
color: var(--navy);
min-width: 220px;
text-align: center;
}
/* ---- Island Chooser Chips ---- */
.island-chooser {
display: flex;
justify-content: center;
gap: 10px;
flex-wrap: wrap;
margin-bottom: 32px;
}
.isl-chip {
padding: 10px 22px;
border-radius: var(--radius-full);
border: 2px solid var(--gray-200);
background: var(--white);
color: var(--navy);
font-weight: 800;
font-size: 0.88rem;
cursor: pointer;
transition: all 0.3s var(--ease);
display: inline-flex;
align-items: center;
gap: 8px;
}
.isl-chip i { font-size: 0.7rem; color: var(--turquoise); }
.isl-chip:hover {
border-color: var(--turquoise);
background: rgba(0,210,255,0.04);
transform: translateY(-1px);
}
.isl-chip.isl-active {
background: var(--navy);
color: var(--white);
border-color: var(--navy);
box-shadow: 0 4px 15px rgba(15,23,42,0.25);
}
.isl-chip.isl-active i { color: var(--turquoise); }
/* ---- Schedule Grid: full width, stacked cards ---- */
.schedule-grid {
display: flex;
flex-direction: column;
gap: 28px;
max-width: 1100px;
margin: 0 auto;
}
/* ---- Schedule Card (Departure / Return) ---- */
.sch-card {
background: var(--white);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 4px 24px rgba(15,23,42,0.06);
border: 1px solid var(--gray-100);
transition: all 0.3s var(--ease);
}
.sch-card:hover {
box-shadow: 0 8px 35px rgba(15,23,42,0.1);
transform: translateY(-2px);
}
.sch-card-header {
display: flex;
align-items: center;
gap: 14px;
padding: 20px 24px;
position: relative;
}
.sch-dep-header {
background: rgba(14,165,233,0.08);
border-bottom: 1px solid rgba(14,165,233,0.15);
}
.sch-ret-header {
background: rgba(245,158,11,0.08);
border-bottom: 1px solid rgba(245,158,11,0.15);
}
.sch-card-icon {
width: 44px; height: 44px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
flex-shrink: 0;
}
.sch-dep-header .sch-card-icon {
background: rgba(14,165,233,0.12);
color: #0284c7;
}
.sch-ret-header .sch-card-icon {
background: rgba(245,158,11,0.12);
color: #d97706;
}
.sch-boat-icon {
width: 32px; height: 14px;
}
.sch-boat-left {
transform: scaleX(-1);
}
.sch-card-title {
font-family: var(--font-heading);
font-size: 1.15rem;
font-weight: 900;
color: #0f172a;
margin: 0;
line-height: 1.2;
}
.sch-card-sub {
font-size: 0.78rem;
color: #64748b;
margin: 2px 0 0;
font-weight: 600;
}
.sch-trip-count {
margin-left: auto;
font-weight: 900;
font-size: 1.1rem;
width: 36px; height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
}
.sch-dep-header .sch-trip-count {
background: rgba(14,165,233,0.1);
color: #0284c7;
}
.sch-ret-header .sch-trip-count {
background: rgba(245,158,11,0.1);
color: #d97706;
}
.sch-card-body {
padding: 8px 0;
}
.sch-empty {
text-align: center;
padding: 40px 20px;
color: var(--gray-400);
font-size: 0.9rem;
}
/* ---- Trip Row inside Schedule Card ---- */
.trip-row {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 24px;
text-decoration: none;
color: inherit;
transition: background 0.25s var(--ease),
border-left-color 0.25s var(--ease),
transform 0.25s var(--ease),
box-shadow 0.25s var(--ease);
border-left: 3px solid transparent;
position: relative;
}
.trip-row:not(:last-child) {
border-bottom: 1px solid var(--gray-100);
}
.trip-row:hover {
background: linear-gradient(90deg, rgba(0,210,255,0.05), transparent);
border-left-color: var(--turquoise);
/* subtle inset glow on the hovered row */
box-shadow: inset 0 0 0 1px rgba(0,210,255,0.12);
}
/* Time block reads brighter when hovered. */
.trip-row:hover .tr-times { transform: translateX(2px); }
.tr-times { transition: transform 0.25s var(--ease); }
/* Status dot */
.trip-status-dot {
width: 10px; height: 10px; border-radius: 50%;
background: var(--gray-300);
flex-shrink: 0;
position: relative;
}
.trip-status-dot.dot-green { background: #10b981; }
.trip-status-dot.dot-orange { background: #f59e0b; }
.trip-status-dot.dot-gray { background: var(--gray-300); }
.trip-status-dot.dot-pulse::after {
content: '';
position: absolute; inset: -4px;
border-radius: 50%;
border: 2px solid currentColor;
animation: dot-pulse 1.5s ease-out infinite;
}
.trip-status-dot.dot-green.dot-pulse::after { border-color: #10b981; }
.trip-status-dot.dot-orange.dot-pulse::after { border-color: #f59e0b; }
/* Times block */
.tr-times {
display: flex;
align-items: center;
gap: 6px;
min-width: 110px;
}
.tr-dep {
font-family: 'Plus Jakarta Sans', monospace;
font-size: 1.05rem;
font-weight: 900;
color: var(--navy);
}
.tr-arrow {
font-size: 0.55rem;
color: var(--gray-300);
}
.tr-arr {
font-family: 'Plus Jakarta Sans', monospace;
font-size: 0.85rem;
font-weight: 700;
color: var(--gray-400);
}
/* Route label */
.tr-route {
font-size: 0.8rem;
font-weight: 700;
color: var(--navy);
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tr-route i {
font-size: 0.5rem;
color: var(--gray-300);
margin: 0 3px;
}
/* Vessel */
.tr-vessel {
font-size: 0.75rem;
font-weight: 700;
color: var(--gray-500);
display: flex;
align-items: center;
gap: 5px;
min-width: 80px;
}
.tr-vessel i { color: var(--turquoise); font-size: 0.65rem; }
.tr-vessel-thumb {
width: 22px; height: 22px;
border-radius: 5px;
object-fit: cover;
border: 1px solid var(--gray-200);
}
/* Seats */
.tr-seats {
font-weight: 900;
font-size: 0.78rem;
display: flex;
align-items: center;
gap: 4px;
min-width: 55px;
}
.tr-seats i { font-size: 0.6rem; }
.tr-seats.green { color: var(--success); }
.tr-seats.amber { color: var(--warning); }
.tr-seats.red { color: var(--danger); }
/* Pax select + Book button group */
.tr-book-group {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto;
flex-shrink: 0;
}
.tr-pax-input {
width: 56px;
height: 38px;
padding: 6px 4px;
border: 2px solid var(--gray-200);
border-radius: 10px;
font-size: 0.95rem;
font-weight: 800;
color: var(--navy);
background: var(--white);
text-align: center;
transition: border-color 0.2s;
}
.tr-pax-input::-webkit-inner-spin-button,
.tr-pax-input::-webkit-outer-spin-button {
opacity: 1;
height: 28px;
cursor: pointer;
}
.tr-pax-input:focus {
outline: none;
border-color: var(--turquoise);
}
.tr-book-btn {
padding: 9px 22px;
background: linear-gradient(135deg, #00d2ff, #0ea5e9);
color: var(--white);
font-weight: 800;
font-size: 0.8rem;
border-radius: 10px;
text-decoration: none;
transition: all 0.25s var(--ease);
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
box-shadow: 0 3px 10px rgba(0,210,255,0.3);
}
.tr-book-btn:hover {
background: linear-gradient(135deg, #0ea5e9, #0284c7);
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(0,210,255,0.4);
}
.tr-full-badge {
padding: 6px 16px;
background: var(--gray-200);
color: var(--gray-500);
font-weight: 800;
font-size: 0.78rem;
border-radius: 10px;
}
/* ---- Trip Row Status States ---- */
.trip-row.trip-departed {
opacity: 0.4;
pointer-events: none;
}
.trip-row.trip-boarding {
background: rgba(255,237,213,0.5);
border-left-color: #f59e0b;
}
.trip-row.trip-next {
background: rgba(219,245,255,0.45);
border-left-color: #38bdf8;
}
@media (max-width: 768px) {
/* Reclaim horizontal space on phones. Lower side padding,
tighten cards, and stack the trip-row info into 2 clean
lines so the Book button sits flush right with breathing
room. */
.schedule-section { padding: 32px 3%; }
.schedule-grid { gap: 18px; }
.sch-card { border-radius: 16px; box-shadow: 0 8px 24px rgba(15,23,42,0.06); }
.sch-card-header { padding: 14px 14px; gap: 10px; }
.sch-card-body { padding: 4px 8px 10px; }
.schedule-date-label { font-size: 1.3rem; min-width: 160px; }
.island-chooser { gap: 6px; }
.isl-chip { padding: 8px 14px; font-size: 0.78rem; }
/* Trip row laid out as 2 stacked lines:
line 1 — route (full width, smallest)
line 2 — times + vessel + seats (left) | qty + Book (right) */
.trip-row {
flex-wrap: wrap;
gap: 6px 10px;
padding: 14px 14px;
border-left-width: 3px;
}
.tr-route { min-width: 100%; order: -1; font-size: 0.78rem; font-weight: 700; }
.trip-status-dot { display: none; }
.tr-book-group { margin-left: auto; }
.tr-book-group .tr-book-qty { width: 48px; }
.trip-row .tr-vessel-thumb { width: 28px; height: 28px; }
}
@media (max-width: 480px) {
.schedule-section { padding: 24px 2%; }
.sch-card { border-radius: 14px; }
.sch-card-header { padding: 12px 12px; }
.sch-card-body { padding: 4px 6px 8px; }
.trip-row { padding: 12px 10px; gap: 6px 8px; }
.tr-route { font-size: 0.72rem; }
}
/* ============================================================================
RESPONSIVE OVERRIDES
============================================================================ */
@media (max-width: 768px) {
.ferry-grid { grid-template-columns: 1fr; }
.route-visualizer { flex-direction: column; gap: 16px; }
.route-visualizer .track { width: 100%; height: 3px; }
}
/* ============================================================================
MISC UTILITIES
============================================================================ */
.text-center { text-align: center; }
.text-white { color: var(--white); }
.mt-0 { margin-top: 0; }
.mt-4 { margin-top: 1rem; }
.mt-8 { margin-top: 2rem; }
.mb-0 { margin-bottom: 0; }
.mb-4 { margin-bottom: 1rem; }
.mb-8 { margin-bottom: 2rem; }
.pt-8 { padding-top: 2rem; }
.pb-8 { padding-bottom: 2rem; }
.gap-4 { gap: 1rem; }
.gap-6 { gap: 1.5rem; }
/* Legacy / Compat aliases */
.section-header { text-align: center; margin-bottom: 24px; }
.section-header h2 { font-family: var(--font-heading); font-size: 2.2rem; font-weight: 900; color: var(--navy); }
.section-header p { color: var(--gray-500); font-size: 1rem; margin-top: 8px; }
.section1-title h2 { font-family: var(--font-heading); font-size: 2rem; font-weight: 900; color: var(--navy); }
/* Features section alias used by old code */
.features {
padding: 80px 5%;
background: var(--navy);
text-align: center;
}
.features h2 { color: var(--white); }
.features p { color: rgba(255,255,255,0.5); }
/* Live board container alias */
.live-board-container { padding: 60px 5%; }
/* Board header */
.board-header { margin-bottom: 30px; }
/* Flatpickr overrides — uses main theme from booking section */
/* ══════════════════════════════════════════════
Booking Protection — single card per booking
══════════════════════════════════════════════ */
.bp-options {
display: flex;
flex-direction: column;
gap: 10px;
}
.bp-option {
display: flex;
flex-wrap: wrap;
align-items: flex-start;
gap: 10px 14px;
padding: 16px 18px;
border: 2px solid #e2e8f0;
border-radius: 12px;
cursor: pointer;
transition: all 0.2s ease;
background: #fff;
}
.bp-option:hover {
border-color: #cbd5e1;
box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.bp-option.bp-selected {
border-color: #94a3b8;
background: #f8fafc;
}
.bp-option.bp-selected-flexi {
border-color: #6366f1;
background: linear-gradient(135deg, rgba(99,102,241,.02), rgba(99,102,241,.06));
box-shadow: 0 2px 12px rgba(99,102,241,.08);
}
.bp-radio {
width: 22px;
height: 22px;
border-radius: 50%;
border: 2px solid #cbd5e1;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.2s;
margin-top: 2px;
}
.bp-radio-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: transparent;
transition: all 0.2s;
}
.bp-radio-active { border-color: #64748b; }
.bp-radio-active .bp-radio-dot { background: #64748b; }
.bp-radio-flexi { border-color: #6366f1 !important; }
.bp-radio-flexi .bp-radio-dot { background: #6366f1 !important; }
.bp-option-info { flex: 1 1 0%; min-width: 0; }
.bp-option-label {
font-weight: 700;
font-size: 0.95rem;
color: var(--navy);
display: flex;
align-items: center;
gap: 6px;
}
.bp-shield-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
border-radius: 50%;
background: #6366f1;
color: #fff;
font-size: 10px;
}
.bp-option-desc {
font-size: 0.8rem;
font-weight: 600;
margin-top: 0;
width: 100%;
padding-left: 0;
}
.bp-desc-red { color: #ef4444; }
.bp-desc-green { color: #22c55e; }
/* Refund note sits inside the flexi option */
.bp-refund-inline {
margin-top: 4px;
margin-left: 0;
padding: 8px 12px;
background: rgba(99,102,241,.05);
border-radius: 6px;
border-left: 3px solid rgba(99,102,241,.3);
font-size: 0.75rem;
color: #64748b;
line-height: 1.5;
font-weight: 500;
width: 100%;
}
.bp-option-price-wrap {
text-align: right;
flex-shrink: 0;
}
.bp-option-price {
font-weight: 800;
font-size: 0.95rem;
color: var(--navy);
white-space: nowrap;
}
.bp-price-flexi { color: #6366f1; }
.bp-price-detail {
font-size: 0.68rem;
font-weight: 600;
color: #94a3b8;
margin-top: 2px;
white-space: nowrap;
}
.bk-fare-protection {
opacity: 0.9;
}
@media (max-width: 640px) {
.bp-option { padding: 12px 14px; gap: 8px 10px; }
.bp-option-label { font-size: 0.88rem; }
.bp-option-price { font-size: 0.88rem; }
.bp-option-desc { padding-left: 0; }
.bp-refund-inline { margin-left: 0; width: 100%; }
}
/* Work Permit Upload (public booking page) */
.bk-wp-upload {
margin-top: 12px;
}
.bk-wp-upload .bk-form-label {
display: flex; align-items: center; gap: 6px;
color: #ea580c;
}
.bk-wp-dropzone {
border: 2px dashed #e2e8f0;
border-radius: 10px;
padding: 20px 16px;
text-align: center;
cursor: pointer;
transition: all 0.2s;
background: #fafbfc;
}
.bk-wp-dropzone:hover, .bk-wp-dropzone.bk-wp-dragover {
border-color: var(--turquoise);
background: rgba(0, 210, 255, 0.03);
}
.bk-wp-dropzone.bk-wp-uploaded {
border-color: #86efac;
background: #f0fdf4;
}
.bk-wp-dropzone.bk-wp-uploaded:hover {
border-color: #4ade80;
}
.bk-wp-required .bk-wp-dropzone {
border-color: #fca5a5;
background: #fef2f2;
animation: wpPulse 2s ease-in-out infinite;
}
@keyframes wpPulse {
0%, 100% { border-color: #fca5a5; }
50% { border-color: #ef4444; }
}
/* ════════════════════════════════════════════════════════════════════
LIVE DEPARTURE BOARD — Modern 3-card layout (Mahibadhoo / Omadhoo /
Hangnameedhoo). Each card pairs the island with the two hubs
(Airport, Male) and shows four route sections with breathing room.
Design notes
────────────
• Uniform light theme — soft white card with a subtle blue accent
• Time chips are vertical "tickets" with status as a tag ABOVE them
• Click a chip → smooth slide-down detail with a clear Book CTA
• Generous spacing throughout (1rem+ gaps on every level) so the
board never feels cramped, especially on mobile
════════════════════════════════════════════════════════════════════ */
#departure-board {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 12px;
transition: opacity 0.18s ease;
}
/* Used by the JS during silent refreshes to mute the visual swap.
The class is added then immediately removed — the transition
gives a tiny cross-fade without interrupting the user. */
#departure-board.ic-board-refreshing { opacity: 0.85; }
/* ══════════════════════════════════════════════════════════════════
── MODERN LDB ── Freshness pill, hero card, filters, sticky bar
══════════════════════════════════════════════════════════════════ */
/* Freshness pill — sits above the hero card. Subtle, info-only. */
.ldb-freshness {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 12px;
background: #f0fdf4;
border: 1px solid #bbf7d0;
border-radius: 999px;
font-size: 11.5px; font-weight: 700;
color: #15803d;
letter-spacing: 0.4px;
margin-bottom: 16px;
font-feature-settings: "tnum" 1;
}
.ldb-freshness-dot {
width: 8px; height: 8px; border-radius: 50%;
background: #22c55e;
box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
animation: ldbPulseGreen 1.6s ease-in-out infinite;
}
.ldb-freshness-label { font-weight: 800; }
.ldb-freshness-sep { color: #86efac; }
.ldb-freshness-time { font-weight: 600; color: #166534; }
@keyframes ldbPulseGreen {
0% { box-shadow: 0 0 0 0 rgba(34,197,94,0.7); }
70% { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
/* ── Hero "Next Departure" card ───────────────────────────────── */
.ldb-hero {
margin-bottom: 16px;
border-radius: 18px;
overflow: hidden;
position: relative;
box-shadow: 0 4px 16px rgba(15,23,42,0.06);
animation: ldbHeroFadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes ldbHeroFadeIn {
from { opacity: 0; transform: translateY(-6px); }
to { opacity: 1; transform: translateY(0); }
}
.ldb-hero-inner {
--hero-c1: #0ea5e9; --hero-c2: #38bdf8; --hero-c3: #7dd3fc;
--hero-tint: #f0f9ff;
position: relative;
display: grid;
grid-template-columns: 1fr auto;
align-items: center;
gap: 18px;
padding: 14px 20px;
background: linear-gradient(135deg, #ffffff 0%, var(--hero-tint) 100%);
border: 1px solid #e0f2fe;
border-radius: 18px;
overflow: hidden;
}
.ldb-hero-inner[data-island="omadhoo"] {
--hero-c1: #f97316; --hero-c2: #fb923c; --hero-c3: #fdba74;
--hero-tint: #fff7ed;
border-color: #fed7aa;
}
.ldb-hero-inner[data-island="hangnameedhoo"] {
--hero-c1: #10b981; --hero-c2: #34d399; --hero-c3: #6ee7b7;
--hero-tint: #ecfdf5;
border-color: #a7f3d0;
}
/* ── Hero palette fallback ────────────────────────────────────────
data-pal=0..5 is set by JS based on a hash of the destination
island slug — same hash logic as .island-card so the hero
gradient always matches the destination island's card colour.
The named [data-island=...] rules above WIN over these (higher
specificity) so Mahibadhoo / Omadhoo / Hangnameedhoo keep their
identity if explicitly themed, while new islands pick a colour
deterministically from this set. */
.ldb-hero-inner[data-pal="0"] {
--hero-c1: #f43f5e; --hero-c2: #fb7185; --hero-c3: #fda4af;
--hero-tint: #fff1f2;
border-color: #fecdd3;
}
.ldb-hero-inner[data-pal="1"] {
--hero-c1: #8b5cf6; --hero-c2: #a78bfa; --hero-c3: #c4b5fd;
--hero-tint: #f5f3ff;
border-color: #ddd6fe;
}
.ldb-hero-inner[data-pal="2"] {
--hero-c1: #f59e0b; --hero-c2: #fbbf24; --hero-c3: #fcd34d;
--hero-tint: #fffbeb;
border-color: #fde68a;
}
.ldb-hero-inner[data-pal="3"] {
--hero-c1: #14b8a6; --hero-c2: #2dd4bf; --hero-c3: #5eead4;
--hero-tint: #f0fdfa;
border-color: #99f6e4;
}
.ldb-hero-inner[data-pal="4"] {
--hero-c1: #ec4899; --hero-c2: #f472b6; --hero-c3: #f9a8d4;
--hero-tint: #fdf2f8;
border-color: #fbcfe8;
}
.ldb-hero-inner[data-pal="5"] {
--hero-c1: #6366f1; --hero-c2: #818cf8; --hero-c3: #a5b4fc;
--hero-tint: #eef2ff;
border-color: #c7d2fe;
}
.ldb-hero-glow {
position: absolute; inset: 0;
background: radial-gradient(circle at top right, var(--hero-c3) 0%, transparent 60%);
opacity: 0.35;
pointer-events: none;
}
.ldb-hero-inner::before {
content: '';
position: absolute; top: 0; left: 0; right: 0;
height: 5px;
background: linear-gradient(90deg, var(--hero-c1), var(--hero-c2), var(--hero-c3));
z-index: 1;
}
.ldb-hero-left { position: relative; z-index: 2; min-width: 0; }
.ldb-hero-tag {
display: inline-flex; align-items: center; gap: 6px;
font-size: 9.5px; font-weight: 800; letter-spacing: 1.1px;
color: var(--hero-c1);
margin-bottom: 5px;
padding: 3px 9px;
background: rgba(255,255,255,0.7);
border-radius: 999px;
backdrop-filter: blur(4px);
}
.ldb-hero-pulse {
width: 7px; height: 7px; border-radius: 50%;
background: var(--hero-c1);
animation: ldbPulseHero 1.4s ease-in-out infinite;
}
@keyframes ldbPulseHero {
0%, 100% { transform: scale(1); opacity: 1; }
50% { transform: scale(1.4); opacity: 0.6; }
}
.ldb-hero-route {
font-size: 18px; font-weight: 800;
color: #0f172a;
letter-spacing: -0.3px;
line-height: 1.2;
margin-bottom: 4px;
word-break: break-word;
}
.ldb-hero-routeicon {
color: var(--hero-c1);
font-size: 15px;
margin-right: 5px;
}
.ldb-hero-arrow {
font-size: 13px;
color: var(--hero-c1);
margin: 0 3px;
}
.ldb-hero-meta {
display: flex; flex-wrap: wrap; gap: 4px 12px;
font-size: 11.5px; font-weight: 600;
color: #475569;
margin-top: 2px;
}
.ldb-hero-meta > span {
display: inline-flex; align-items: center; gap: 6px;
}
.ldb-hero-vessel i { color: var(--hero-c1); }
.ldb-hero-dep i { color: var(--hero-c1); }
.ldb-hero-seats i { color: #64748b; }
.ldb-hero-seats.seats-low { color: #dc2626; }
.ldb-hero-seats.seats-low i { color: #dc2626; }
.ldb-hero-seats.seats-medium { color: #ea580c; }
.ldb-hero-seats.seats-medium i { color: #ea580c; }
.ldb-hero-right {
position: relative; z-index: 2;
display: flex; align-items: center;
gap: 10px;
min-width: 0;
}
.ldb-hero-countdown {
display: flex; flex-direction: column; align-items: center;
padding: 5px 12px;
background: rgba(255,255,255,0.85);
border: 1px solid var(--hero-c3);
border-radius: 12px;
box-shadow: 0 2px 8px var(--hero-c3);
backdrop-filter: blur(6px);
min-width: 78px;
}
.ldb-hero-cd-num {
font-size: 20px; font-weight: 900;
color: var(--hero-c1);
letter-spacing: -0.5px;
font-feature-settings: "tnum" 1;
line-height: 1;
}
.ldb-hero-cd-unit {
font-size: 8.5px; font-weight: 700;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-top: 2px;
}
.ldb-hero.ldb-hero-soon .ldb-hero-cd-num {
color: #dc2626;
animation: ldbHeroCdPulse 1s ease-in-out infinite;
}
.ldb-hero.ldb-hero-soon .ldb-hero-countdown {
border-color: #fecaca;
box-shadow: 0 4px 18px rgba(220,38,38,0.20);
}
@keyframes ldbHeroCdPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.06); }
}
.ldb-hero.ldb-hero-departing .ldb-hero-cd-num {
color: #f97316;
font-size: 22px;
letter-spacing: 1px;
}
.ldb-hero-book {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 14px;
background: linear-gradient(135deg, var(--hero-c1), var(--hero-c2));
color: #ffffff !important;
text-decoration: none;
font-size: 11.5px; font-weight: 800;
border-radius: 10px;
letter-spacing: 0.2px;
box-shadow: 0 3px 10px var(--hero-c3);
transition: transform 0.15s, box-shadow 0.15s, filter 0.15s;
white-space: nowrap;
}
.ldb-hero-book:hover {
transform: translateY(-1px);
box-shadow: 0 6px 14px var(--hero-c3);
filter: brightness(1.05);
}
.ldb-hero-book i { font-size: 10px; }
/* ── Filter chip bar ──────────────────────────────────────────── */
.ldb-filters {
display: flex; flex-wrap: wrap; gap: 8px;
margin-bottom: 20px;
}
.ldb-filter {
display: inline-flex; align-items: center; gap: 7px;
padding: 8px 14px;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 999px;
color: #475569;
font-size: 12.5px; font-weight: 700;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
letter-spacing: 0.2px;
}
.ldb-filter i { font-size: 11px; opacity: 0.85; }
.ldb-filter:hover {
border-color: #cbd5e1;
background: #f8fafc;
}
.ldb-filter.active {
background: linear-gradient(135deg, #0f172a, #1e293b);
color: #ffffff;
border-color: #0f172a;
box-shadow: 0 4px 10px rgba(15,23,42,0.18);
transform: translateY(-1px);
}
.ldb-filter.active i { color: #38bdf8; opacity: 1; }
/* ── Countdown chip variant — when seats label flips to "in 23m" */
.ic-pill-seats.ic-pill-cd {
color: #0369a1;
background: #e0f2fe;
padding: 1px 7px;
border-radius: 999px;
font-size: 10px;
font-weight: 800;
letter-spacing: 0.3px;
}
.ic-pill-seats.ic-pill-cd-soon {
color: #b91c1c;
background: #fee2e2;
animation: ldbCdSoonPulse 1.2s ease-in-out infinite;
}
@keyframes ldbCdSoonPulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0.5); }
50% { box-shadow: 0 0 0 4px rgba(220,38,38,0); }
}
/* ── Mobile sticky Book CTA ──────────────────────────────────── */
.ldb-sticky-book {
/* Full-width on mobile — when this bar is shown, the chat bubble
lifts above it via body.ldb-sticky-active (see below). */
position: fixed; left: 12px; right: 12px; bottom: 12px;
z-index: 950;
display: none;
align-items: center; gap: 12px;
padding: 12px 14px;
background: rgba(15,23,42,0.96);
color: #ffffff;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(15,23,42,0.30);
backdrop-filter: blur(10px);
animation: ldbStickyIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
/* When the sticky Book bar is visible, lift the live-chat bubble
above it so a phone user can still reach the chat icon. */
body.ldb-sticky-active #liveChatWidget {
bottom: 88px !important;
transition: bottom 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes ldbStickyIn {
from { transform: translateY(80px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.ldb-sticky-info { flex: 1; min-width: 0; }
.ldb-sticky-route {
font-size: 13px; font-weight: 800;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ldb-sticky-meta {
font-size: 11px; font-weight: 600;
color: #cbd5e1;
margin-top: 1px;
}
.ldb-sticky-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 10px 16px;
background: linear-gradient(135deg, #0ea5e9, #38bdf8);
color: #ffffff !important;
text-decoration: none;
font-size: 13px; font-weight: 800;
border-radius: 12px;
flex-shrink: 0;
box-shadow: 0 4px 12px rgba(14,165,233,0.40);
}
.ldb-sticky-btn i { font-size: 11px; }
/* ── Hero responsive — stack on mobile, kept compact ────────── */
@media (max-width: 640px) {
.ldb-hero { margin-bottom: 12px; border-radius: 14px; }
.ldb-hero-inner {
grid-template-columns: 1fr;
gap: 10px;
padding: 11px 14px;
}
.ldb-hero-tag { font-size: 9px; padding: 2px 8px; gap: 5px; margin-bottom: 3px; }
.ldb-hero-route { font-size: 15px; margin-bottom: 2px; }
.ldb-hero-routeicon { font-size: 13px; margin-right: 4px; }
.ldb-hero-arrow { font-size: 11px; }
.ldb-hero-meta { font-size: 10.5px; gap: 2px 10px; margin-top: 1px; }
.ldb-hero-right {
justify-content: space-between;
gap: 8px;
}
.ldb-hero-countdown { padding: 4px 10px; min-width: 70px; border-radius: 10px; }
.ldb-hero-cd-num { font-size: 17px; }
.ldb-hero-cd-unit { font-size: 8px; margin-top: 1px; }
.ldb-hero-book { padding: 7px 12px; font-size: 11px; border-radius: 9px; }
.ldb-hero-book i { font-size: 9px; }
.ldb-filters { gap: 6px; }
.ldb-filter { padding: 7px 12px; font-size: 11.5px; }
}
/* ── Board container — generous gap between cards ─────────────── */
#departure-board {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 24px;
}
/* ── Card ─────────────────────────────────────────────────────── */
.island-card {
--ic-tint: #f0f9ff;
--ic-accent: #0ea5e9;
--ic-icon: #0ea5e9;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 4px 16px rgba(15,23,42,0.04);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.island-card::before {
content: '';
position: absolute; top: 0; left: 0; right: 0;
height: 4px;
background: linear-gradient(90deg, var(--ic-c1, #0ea5e9), var(--ic-c2, #38bdf8), var(--ic-c3, #7dd3fc));
}
.island-card:hover {
transform: translateY(-4px);
box-shadow: 0 14px 32px var(--ic-shadow, rgba(14,165,233,0.10));
}
/* ── Per-island colour themes ─────────────────────────────────── */
/* Mahibadhoo → ocean blue (default) */
.island-card[data-island="mahibadhoo"] {
--ic-c1: #0ea5e9; --ic-c2: #38bdf8; --ic-c3: #7dd3fc;
--ic-tint: #f0f9ff; --ic-accent: #0ea5e9;
--ic-shadow: rgba(14,165,233,0.18);
--ic-pill-bg: #e0f2fe; --ic-pill-fg: #0369a1;
--ic-divider: #e0f2fe;
}
/* Omadhoo → coral sunset */
.island-card[data-island="omadhoo"] {
--ic-c1: #f97316; --ic-c2: #fb923c; --ic-c3: #fdba74;
--ic-tint: #fff7ed; --ic-accent: #f97316;
--ic-shadow: rgba(249,115,22,0.18);
--ic-pill-bg: #ffedd5; --ic-pill-fg: #c2410c;
--ic-divider: #ffedd5;
}
/* Hangnameedhoo → tropical emerald */
.island-card[data-island="hangnameedhoo"] {
--ic-c1: #10b981; --ic-c2: #34d399; --ic-c3: #6ee7b7;
--ic-tint: #ecfdf5; --ic-accent: #10b981;
--ic-shadow: rgba(16,185,129,0.18);
--ic-pill-bg: #d1fae5; --ic-pill-fg: #047857;
--ic-divider: #d1fae5;
}
/* ── Fallback palette for any island NOT explicitly themed above.
data-pal=0..5 is set by JS based on a hash of the island slug, so
each new island the admin adds picks up its own gradient
automatically. The named [data-island=...] rules above WIN over
these (higher specificity) — Mahibadhoo / Omadhoo / Hangnameedhoo
keep their fixed identities. New islands like Dhangethi pick a
colour deterministically from this set. */
.island-card[data-pal="0"] {
--ic-c1: #f43f5e; --ic-c2: #fb7185; --ic-c3: #fda4af;
--ic-tint: #fff1f2; --ic-accent: #f43f5e;
--ic-shadow: rgba(244,63,94,0.18);
--ic-pill-bg: #ffe4e6; --ic-pill-fg: #be123c;
--ic-divider: #ffe4e6;
}
.island-card[data-pal="1"] {
--ic-c1: #8b5cf6; --ic-c2: #a78bfa; --ic-c3: #c4b5fd;
--ic-tint: #f5f3ff; --ic-accent: #8b5cf6;
--ic-shadow: rgba(139,92,246,0.18);
--ic-pill-bg: #ede9fe; --ic-pill-fg: #6d28d9;
--ic-divider: #ede9fe;
}
.island-card[data-pal="2"] {
--ic-c1: #f59e0b; --ic-c2: #fbbf24; --ic-c3: #fcd34d;
--ic-tint: #fffbeb; --ic-accent: #f59e0b;
--ic-shadow: rgba(245,158,11,0.18);
--ic-pill-bg: #fef3c7; --ic-pill-fg: #b45309;
--ic-divider: #fef3c7;
}
.island-card[data-pal="3"] {
--ic-c1: #14b8a6; --ic-c2: #2dd4bf; --ic-c3: #5eead4;
--ic-tint: #f0fdfa; --ic-accent: #14b8a6;
--ic-shadow: rgba(20,184,166,0.18);
--ic-pill-bg: #ccfbf1; --ic-pill-fg: #0f766e;
--ic-divider: #ccfbf1;
}
.island-card[data-pal="4"] {
--ic-c1: #ec4899; --ic-c2: #f472b6; --ic-c3: #f9a8d4;
--ic-tint: #fdf2f8; --ic-accent: #ec4899;
--ic-shadow: rgba(236,72,153,0.18);
--ic-pill-bg: #fce7f3; --ic-pill-fg: #be185d;
--ic-divider: #fce7f3;
}
.island-card[data-pal="5"] {
--ic-c1: #6366f1; --ic-c2: #818cf8; --ic-c3: #a5b4fc;
--ic-tint: #eef2ff; --ic-accent: #6366f1;
--ic-shadow: rgba(99,102,241,0.18);
--ic-pill-bg: #e0e7ff; --ic-pill-fg: #4338ca;
--ic-divider: #e0e7ff;
}
/* Apply themed colours to header / icon / pill / book button */
.island-card .ic-header {
background: linear-gradient(180deg, var(--ic-tint, #f0f9ff) 0%, #ffffff 100%);
}
.island-card .ic-icon {
background: linear-gradient(135deg, var(--ic-c1, #0ea5e9), var(--ic-c2, #38bdf8));
box-shadow: 0 4px 10px var(--ic-shadow, rgba(14,165,233,0.25));
}
.island-card .ic-pill {
background: var(--ic-pill-bg, #e0f2fe);
color: var(--ic-pill-fg, #0369a1);
}
.island-card .ic-detail {
background: linear-gradient(180deg, #ffffff 0%, var(--ic-tint, #f0f9ff) 100%);
border: 1px solid var(--ic-divider, #bae6fd);
box-shadow: 0 4px 12px var(--ic-shadow, rgba(14,165,233,0.10));
}
.island-card .ic-detail-head {
border-bottom: 1px solid var(--ic-divider, #e0f2fe);
}
.island-card .ic-detail-row + .ic-detail-row {
border-top: 1px dashed var(--ic-divider, #e0f2fe);
}
.island-card .ic-detail-seats {
background: var(--ic-pill-bg, #e0f2fe);
color: var(--ic-pill-fg, #0369a1);
}
.island-card .ic-detail-book {
background: linear-gradient(135deg, var(--ic-c1, #0ea5e9), var(--ic-c2, #38bdf8));
box-shadow: 0 4px 10px var(--ic-shadow, rgba(14,165,233,0.30));
}
.island-card .ic-detail-book:hover {
box-shadow: 0 6px 14px var(--ic-shadow, rgba(14,165,233,0.40));
}
.island-card .ic-detail-vessel i { color: var(--ic-accent, #0ea5e9); }
/* ── Card header ──────────────────────────────────────────────── */
.ic-header {
display: flex; align-items: center; gap: 12px;
padding: 22px 22px 14px;
background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 100%);
}
.ic-icon {
width: 40px; height: 40px; border-radius: 12px;
background: linear-gradient(135deg, #0ea5e9, #38bdf8);
color: #ffffff;
display: flex; align-items: center; justify-content: center;
font-size: 17px; flex-shrink: 0;
box-shadow: 0 4px 10px rgba(14,165,233,0.25);
overflow: hidden;
}
/* Photo variant — keeps the same 40x40 circle frame + drop shadow,
but the gradient is hidden behind a cover-fitted island photo. */
.ic-icon-photo { background: #f1f5f9; padding: 0; }
.ic-icon-photo img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.ic-island {
font-size: 19px; font-weight: 800; color: #0f172a;
letter-spacing: -0.3px;
flex: 1; min-width: 0;
text-overflow: ellipsis; overflow: hidden; white-space: nowrap;
}
.ic-pill {
font-size: 11px; font-weight: 700;
min-width: 28px; height: 24px;
padding: 0 10px; border-radius: 12px;
background: #e0f2fe;
color: #0369a1;
display: flex; align-items: center; justify-content: center;
font-feature-settings: "tnum" 1;
}
/* ── Body — vertical stack of route blocks with breathing room ── */
.ic-body {
padding: 8px 22px 24px;
display: flex; flex-direction: column;
gap: 22px;
}
.ic-empty {
font-size: 13px; color: #94a3b8;
padding: 32px 0; text-align: center;
}
/* Each route section ("Mahibadhoo → Airport" or "From Airport") */
.ic-route { display: flex; flex-direction: column; gap: 10px; }
.ic-route-title {
font-size: 12px; font-weight: 700;
color: #64748b;
text-transform: uppercase;
letter-spacing: 0.6px;
display: flex; align-items: center; gap: 8px;
padding: 6px 0 2px;
border-bottom: 1px solid #f1f5f9;
}
.ic-route-title .ic-arrow {
color: #cbd5e1;
font-size: 10px;
}
/* Legacy .ic-sec styling — preserved for any page still using it. */
.ic-sec { padding: 6px 0 4px; }
.ic-sec + .ic-sec { border-top: 1px solid rgba(15,23,42,0.05); padding-top: 7px; }
.ic-sec-head { font-size: 10px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--ic-accent); margin: 0 2px 6px; display: flex; align-items: center; gap: 5px; }
.ic-sec-head i { font-size: 9px; opacity: 0.85; }
.ic-sec-count { margin-left: auto; font-size: 9px; font-weight: 800; background: color-mix(in srgb, var(--ic-accent) 12%, #ffffff); color: var(--ic-accent); padding: 1px 6px; border-radius: 7px; }
/* ── Time chips — vertical tickets, status badge ABOVE the chip ── */
.ic-pills {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(86px, 1fr));
gap: 10px;
}
.ic-pill-btn {
position: relative;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 5px;
background: #ffffff;
border: 1.5px solid #e2e8f0;
border-radius: 12px;
padding: 8px 8px 8px;
min-height: 60px;
cursor: pointer;
transition: transform 0.13s, border-color 0.13s, box-shadow 0.13s, background 0.13s;
font: inherit; line-height: 1.15;
/* Provide vertical room for the status pill that pokes above. */
margin-top: 10px;
}
.ic-pill-btn:hover:not(.ic-departed):not(.ic-closed) {
transform: translateY(-2px);
border-color: #0ea5e9;
box-shadow: 0 6px 16px rgba(14,165,233,0.18);
}
.ic-pill-btn.open {
border-color: #0ea5e9;
background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 100%);
box-shadow: 0 6px 18px rgba(14,165,233,0.22);
}
.ic-pill-clock {
font-size: 16px; font-weight: 800;
color: #0f172a;
font-feature-settings: "tnum" 1;
letter-spacing: -0.4px;
line-height: 1.05;
}
.ic-pill-seats {
font-size: 10.5px; font-weight: 700;
color: #64748b;
margin-top: 4px;
font-feature-settings: "tnum" 1;
transition: color 0.2s;
}
/* Seat-availability warning colours */
.ic-pill-seats.seats-low { color: #dc2626; } /* ≤ 5 left → red, urgent */
.ic-pill-seats.seats-medium { color: #ea580c; } /* 6-15 left → orange, warning */
.ic-pill-seats.seats-soldout { color: #b91c1c; font-weight: 800; }
.ic-pill-btn.ic-closed .ic-pill-seats.seats-low,
.ic-pill-btn.ic-closed .ic-pill-seats.seats-medium { color: #94a3b8; }
/* ── Status badge — separate pill BELOW the chip's top edge ──
Positioned absolutely on the chip so it pokes above the
chip's top border like a sticker. Clean, separate, never
crowds the time / seat info. */
.ic-pill-btn .ic-status {
position: absolute;
top: -10px;
left: 50%;
transform: translateX(-50%);
font-size: 9px; font-weight: 800; letter-spacing: 0.7px;
padding: 3px 9px;
border-radius: 12px;
background: transparent;
line-height: 1.2;
white-space: nowrap;
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
/* Hidden by default; shown when a status class is applied. */
display: none;
}
.ic-pill-btn.ic-next .ic-status,
.ic-pill-btn.ic-boarding .ic-status,
.ic-pill-btn.ic-closed .ic-status,
.ic-pill-btn.ic-departed .ic-status { display: block; }
/* NEXT — green, gentle pulse */
.ic-pill-btn.ic-next { border-color: #bbf7d0; }
.ic-pill-btn.ic-next .ic-status {
background: linear-gradient(135deg, #10b981, #34d399);
color: #fff;
animation: icPulseGreen 1.8s ease-in-out infinite;
}
/* BOARDING — orange, pulsing chip + badge */
.ic-pill-btn.ic-boarding {
border-color: #fed7aa;
background: linear-gradient(180deg, #fff7ed 0%, #ffffff 100%);
animation: icPulseOrange 1.2s ease-in-out infinite;
}
.ic-pill-btn.ic-boarding .ic-status {
background: linear-gradient(135deg, #f97316, #fb923c);
color: #fff;
}
/* CLOSED — booking shut, ferry not boarding yet. Light gray. */
.ic-pill-btn.ic-closed {
background: #f8fafc;
border-color: #e2e8f0;
cursor: not-allowed;
opacity: 0.75;
}
.ic-pill-btn.ic-closed .ic-pill-clock,
.ic-pill-btn.ic-closed .ic-pill-seats { color: #94a3b8; }
.ic-pill-btn.ic-closed .ic-status {
background: #cbd5e1;
color: #475569;
}
/* DEPARTED — past, struck-through, faded. */
.ic-pill-btn.ic-departed {
background: #f1f5f9;
border-color: #e2e8f0;
cursor: not-allowed;
filter: saturate(0.5); opacity: 0.65;
}
.ic-pill-btn.ic-departed .ic-pill-clock {
text-decoration: line-through;
text-decoration-color: rgba(148,163,184,0.6);
color: #94a3b8;
}
.ic-pill-btn.ic-departed .ic-pill-seats { color: #94a3b8; }
.ic-pill-btn.ic-departed .ic-status {
background: #cbd5e1;
color: #475569;
}
/* ── Detail panel — slides smoothly under the chip row ───────── */
.ic-detail {
display: none;
background: linear-gradient(180deg, #ffffff 0%, #f0f9ff 100%);
border: 1px solid #bae6fd;
border-radius: 14px;
margin: 0;
overflow: hidden;
animation: icDetailSlide 0.28s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 4px 12px rgba(14,165,233,0.10);
}
.ic-detail.open { display: block; }
@keyframes icDetailSlide {
from { opacity: 0; transform: translateY(-8px); max-height: 0; }
to { opacity: 1; transform: translateY(0); max-height: 400px; }
}
.ic-detail-head {
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
padding: 14px 18px;
border-bottom: 1px solid #e0f2fe;
}
.ic-detail-time {
font-size: 18px; font-weight: 800;
color: #0f172a;
font-feature-settings: "tnum" 1;
}
.ic-detail-vessel {
font-size: 12px; font-weight: 600; color: #64748b;
display: inline-flex; align-items: center; gap: 6px;
margin-left: auto;
}
.ic-detail-vessel i { color: #0ea5e9; font-size: 12px; }
.ic-detail-list { padding: 8px 12px 12px; }
.ic-detail-row {
display: flex; align-items: center; gap: 12px;
flex-wrap: wrap;
padding: 10px 12px;
border-radius: 10px;
transition: background 0.15s;
}
.ic-detail-row + .ic-detail-row { border-top: 1px dashed #e0f2fe; }
.ic-detail-label {
font-size: 13px; font-weight: 700; color: #0f172a;
flex: 1 1 100%;
min-width: 0;
word-break: break-word;
line-height: 1.35;
}
.ic-detail-seats {
font-size: 11px; font-weight: 700; color: #0369a1;
background: #e0f2fe;
padding: 4px 10px; border-radius: 8px;
flex-shrink: 0;
}
.ic-detail-book { margin-left: auto; }
.ic-detail-book {
display: inline-flex; align-items: center; gap: 6px;
background: linear-gradient(135deg, #0ea5e9, #38bdf8);
color: #fff !important;
text-decoration: none;
font-size: 12px; font-weight: 700;
padding: 9px 16px; border-radius: 10px;
transition: filter 0.15s, transform 0.15s, box-shadow 0.15s;
flex-shrink: 0;
box-shadow: 0 4px 10px rgba(14,165,233,0.30);
}
.ic-detail-book:hover {
filter: brightness(1.05);
transform: translateY(-1px);
box-shadow: 0 6px 14px rgba(14,165,233,0.40);
}
.ic-detail-book i { font-size: 10px; }
.ic-detail-soldout {
font-size: 10px; font-weight: 800; letter-spacing: 0.5px;
color: #b91c1c; background: #fee2e2;
padding: 5px 10px; border-radius: 8px;
flex-shrink: 0;
}
/* Pulse animations — gentler than before. */
@keyframes icPulseGreen {
0%, 100% { box-shadow: 0 2px 6px rgba(16,185,129,0.30); }
50% { box-shadow: 0 2px 12px rgba(16,185,129,0.55); }
}
@keyframes icPulseOrange {
0%, 100% { box-shadow: 0 4px 14px rgba(249,115,22,0.18); }
50% { box-shadow: 0 4px 22px rgba(249,115,22,0.36); }
}
/* ── Mobile (< 600 px) — full-width cards, larger tap targets ── */
@media (max-width: 600px) {
#departure-board { grid-template-columns: 1fr; gap: 16px; }
.ic-header { padding: 18px 18px 12px; }
.ic-island { font-size: 17px; }
.ic-icon { width: 36px; height: 36px; font-size: 15px; }
.ic-body { padding: 6px 16px 20px; gap: 18px; }
.ic-pills { grid-template-columns: repeat(auto-fit, minmax(78px, 1fr)); gap: 8px; }
.ic-pill-btn { min-height: 56px; padding: 7px 6px 7px; margin-top: 9px; gap: 4px; }
.ic-pill-clock { font-size: 15px; }
.ic-pill-seats { font-size: 10px; }
.ic-detail-head { padding: 12px 14px; }
.ic-detail-time { font-size: 16px; }
.ic-detail-list { padding: 6px 8px 10px; }
.ic-detail-row { padding: 8px 10px; gap: 8px; }
.ic-detail-label { font-size: 12.5px; }
.ic-detail-book { padding: 8px 14px; font-size: 11.5px; }
}