website/website-mockups/css/themes.css

/* HarborSmith - Theme Styles */
/* ========================= */

/* Classical Nautical Theme (Default) - Navy & Crimson */
[data-theme="nautical"] {
    --primary: #001f3f;  /* Classic navy blue */
    --accent: #dc143c;   /* Nautical red/crimson */
    --background: #ffffff;
    --surface: #f0f4f8;
    --text: #0a1628;
    --text-secondary: #4a5568;
    --border: #cbd5e0;
    --overlay: rgba(0, 31, 63, 0.7);
    --gradient-start: #001f3f;
    --gradient-end: #003366;
}

/* Gold Theme - Navy with Gold accents */
[data-theme="gold"] {
    --primary: #001f3f;  /* Classic navy blue */
    --accent: #bc970c;   /* Gold */
    --background: #ffffff;
    --surface: #f0f4f8;
    --text: #0a1628;
    --text-secondary: #4a5568;
    --border: #cbd5e0;
    --overlay: rgba(0, 31, 63, 0.7);
    --gradient-start: #001f3f;
    --gradient-end: #003366;
}

/* Coastal Dawn Theme - Soft & Serene Luxury */
[data-theme="coastal-dawn"] {
    --primary: #A9B4C2;  /* Cadet Blue */
    --accent: #D4AF37;   /* Gilded Gold */
    --background: #F8F7F4;  /* Alabaster White */
    --surface: #FFFFFF;
    --text: #333745;  /* Charcoal Slate */
    --text-secondary: #6B7280;
    --border: #E5E7EB;
    --overlay: rgba(169, 180, 194, 0.4);
    --gradient-start: #A9B4C2;
    --gradient-end: #C5D3E0;
}

/* Deep Sea Slate Theme - Modern & Technical */
[data-theme="deep-sea"] {
    --primary: #1E2022;  /* Gunmetal Grey */
    --accent: #00BFFF;   /* Deep Sky Blue */
    --background: #1E2022;  /* Dark background */
    --surface: #2A2D30;
    --text: #E5E4E2;  /* Platinum text */
    --text-secondary: #C0C0C0;  /* Silver */
    --border: #3A3D40;
    --overlay: rgba(30, 32, 34, 0.8);
    --gradient-start: #1E2022;
    --gradient-end: #2A2D30;
}

/* Monaco White Theme - Pristine & Minimalist */
[data-theme="monaco-white"] {
    --primary: #2C3E50;  /* Midnight Blue */
    --accent: #E74C3C;   /* Pomegranate Red */
    --background: #FFFFFF;
    --surface: #F8F9FA;
    --text: #2C3E50;
    --text-secondary: #7F8C8D;
    --border: #ECF0F1;
    --overlay: rgba(44, 62, 80, 0.05);
    --gradient-start: #FFFFFF;
    --gradient-end: #F8F9FA;
}

/* Update hero gradient for all themes */
[data-theme] .hero-background {
    background: linear-gradient(135deg, var(--gradient-start) 0%, var(--gradient-end) 100%);
}

/* Ensure good contrast for nav items */
[data-theme] .nav-link {
    color: var(--text);
    font-weight: 500;
}

[data-theme] .nav-link:hover {
    color: var(--accent);
}

/* Theme switcher button styling */
[data-theme] .theme-switcher {
    background: var(--surface);
    border: 2px solid var(--border);
    color: var(--text);
}

[data-theme] .theme-switcher:hover {
    background: var(--accent);
    color: white;
    border-color: var(--accent);
}

/* Better button contrast */
[data-theme] .btn-primary {
    background: var(--accent);
    color: white;
    border: 2px solid var(--accent);
}

[data-theme] .btn-primary:hover {
    background: var(--primary);
    border-color: var(--primary);
}

/* Schedule Service button - make it filled */
[data-theme] .btn-secondary {
    background: var(--primary);
    color: white;
    border: 2px solid var(--primary);
}

[data-theme] .btn-secondary:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
}

/* Card improvements */
[data-theme] .service-card {
    background: var(--surface);
    border: 1px solid var(--border);
}

[data-theme] .yacht-card {
    background: white;
    border: 1px solid var(--border);
}

/* Stats section contrast */
[data-theme] .stats-section {
    background: var(--surface);
}

/* Footer styling */
[data-theme] footer {
    background: var(--primary);
    color: white;
}

[data-theme] footer a {
    color: rgba(255, 255, 255, 0.8);
}

[data-theme] footer a:hover {
    color: var(--accent);
}

/* Special styling for Classical Nautical theme */
[data-theme="nautical"] .btn-primary {
    background: var(--accent);
    box-shadow: 0 4px 6px rgba(220, 20, 60, 0.2);
}

[data-theme="nautical"] .btn-secondary {
    background: var(--primary);
    box-shadow: 0 4px 6px rgba(0, 31, 63, 0.2);
}

[data-theme="nautical"] .service-card {
    border-color: var(--primary);
}

[data-theme="nautical"] .yacht-card {
    border-top: 3px solid var(--accent);
}