/* =====================================================================
Serenity Journeys - Bhutan theme override
Load AFTER css/style.css (and after css/footer.css if you want it
to reach the footer too):
Palette
cream #FAF6EF page background
sand #ECE8E0 alternating sections
maroon #7A1E2C primary (monastery walls, robes)
saffron #D9822B accent (flag, robes)
forest #2F4A3A deep band (Packages, About page)
ink #2B2B2B body text
===================================================================== */
/* ---------- 1. Tokens ---------- */
:root {
--cream: #FAF6EF;
--sand: #ECE8E0;
--maroon: #7A1E2C;
--maroon-dark: #5E1722;
--saffron: #D9822B;
--saffron-dark: #A85A14; /* use for buttons with WHITE text (5:1 contrast) */
--forest: #2F4A3A;
--forest-dark: #1F3A2D;
--ink: #2B2B2B;
/* existing variables, re-pointed */
--background-light: var(--cream);
--text-color-light: var(--ink);
--primary: var(--maroon);
--primary-color: var(--maroon);
--primary-dark: var(--maroon-dark);
--accent-color: var(--saffron);
/* variables your CSS uses but never defined (they silently failed) */
--radius: 12px;
--radius-md: 10px;
--text: var(--ink);
--text-primary: var(--ink);
--text-secondary: #555;
--text-muted: #777;
--background-card: #fff;
--spacing-1: 0.25rem;
--spacing-3: 0.75rem;
}
/* ---------- 2. Page background ---------- */
body::before { display: none; } /* removes pink/blue wash + invalid z-index */
html, body { background-color: var(--cream); color: var(--ink); }
#loading-screen { background: var(--cream); }
/* Alternate cream / sand down the home page:
blog(cream) > about(sand) > destinations(cream) > packages(forest)
> attractions(cream) > booking(sand) > FAQ(cream) > gallery(sand)
> testimonials(cream) > brands(sand) */
.about { background: var(--sand); }
.destinations { background: var(--cream); }
.booking-procedure { background: var(--sand); }
.FAQs,
.FAQs .box-list { background-color: var(--cream); } /* also fixes the mobile #ece8e0 */
.gallery { background: var(--sand); }
#testimonials { background: var(--cream); }
.testimonials-container { background: transparent; }
.brand-container { background: var(--sand); }
#festival-dates { background: var(--cream); }
/* ---------- 3. Bug fixes ---------- */
.about .content p { color: #3b3b3b; } /* was #f8f8f8 on #f8f8f8 = invisible */
.slide-content h1 { font-size: clamp(1.7rem, 4vw, 3rem); } /* "clam" typo */
.booking-procedure .booking-steps .steps {
background: #fff;
box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.12); /* was rgba(0,0,0,5) = solid black */
}
.news-container ul li::after { width: 1px; } /* "1pax" typo */
/* ---------- 4. Hero ---------- */
.slide::before { /* keeps white text readable on bright photos */
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to bottom, rgba(0,0,0,.18), rgba(0,0,0,.38));
}
.cta.primary {
background-image: linear-gradient(135deg, #E8963F, #D9822B);
color: #1F2A22;
}
.cta.primary:hover { background-image: linear-gradient(135deg, #D9822B, #E8963F); }
/* ---------- 5. News ticker ---------- */
.news-container { background: #fff; }
.news-container .title { background: var(--maroon); }
/* ---------- 6. Section headings ---------- */
.heading {
background-image: linear-gradient(90deg, #3B1218 0%, #7A1E2C 55%, #B8691F 100%);
-webkit-background-clip: text;
background-clip: text;
filter: none;
}
.heading::after {
background: linear-gradient(90deg, var(--saffron), var(--maroon));
box-shadow: none;
}
.FAQs span,
.booking-procedure .procedure .wrapper span,
#booking-procedure .procedure .wrapper span { color: var(--maroon); }
/* ---------- 7. Blog ---------- */
.blog-article::after {
background: linear-gradient(to bottom, rgba(122,30,44,.04), rgba(122,30,44,.16));
}
.blog-preview .btn { box-shadow: 0 5px 15px rgba(122,30,44,.3); }
/* ---------- 8. Buttons (load more, explore, about) ---------- */
.loadmore-container button { background: var(--maroon); color: #fff; }
.loadmore-container button:hover { background: var(--maroon-dark); }
.explore-more button { background: var(--maroon); color: #fff; }
.explore-more button:hover { background: var(--maroon-dark); }
.about button { color: #fff; }
.btn-primary { background: var(--maroon); }
.btn-primary:hover { background: var(--maroon-dark); }
#load-more-btn { background: var(--maroon); }
/* ---------- 9. Packages band: purple -> forest green ---------- */
.packages {
background-image: linear-gradient(135deg, #1F3A2D 0%, #2F4A3A 55%, #3B5A47 100%);
}
.packages::before {
background:
radial-gradient(circle at 20% 80%, rgba(217,130,43,.18) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(255,255,255,.08) 0%, transparent 55%);
}
.package-box h2::after { background: linear-gradient(90deg, #E8963F, #D9822B); }
.package-box .btn {
background: var(--saffron);
color: #1F2A22;
box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.package-box .btn:hover { background: #E8963F; box-shadow: 0 6px 18px rgba(0,0,0,.4); }
.package-box ul li::before { color: #F2B36B; }
/* About-page packages band (same purple recipe) */
.about-packages-section {
background-image: linear-gradient(135deg, #1F3A2D 0%, #2F4A3A 55%, #3B5A47 100%);
}
.about-packages-section::before {
background:
radial-gradient(circle at 20% 80%, rgba(217,130,43,.20) 0%, transparent 45%),
radial-gradient(circle at 80% 20%, rgba(255,255,255,.08) 0%, transparent 50%);
}
.package-box-card .package-actions .btn-primary { background: var(--saffron); color: #1F2A22; }
.package-box-card .package-actions .btn-primary:hover { background: #E8963F; color: #1F2A22; }
.about-closing { background: linear-gradient(135deg, var(--maroon), var(--maroon-dark)); }
/* ---------- 10. Top attractions swiper ---------- */
.swiper-button-next, .swiper-button-prev { color: var(--maroon); }
.swiper-button-next:hover, .swiper-button-prev:hover { background: var(--maroon); color: #fff; }
.Top-Attraction-Places .swiper-pagination-bullet-active { background: var(--saffron); }
.Top-Attraction-Places .thumbnail.active { border-color: var(--saffron); }
/* ---------- 11. Testimonials ---------- */
.testimonial { background: #fff; border: 1px solid rgba(0,0,0,.06); }
.testimonial h4 { color: var(--maroon); }
/* ---------- 12. Floating widgets ---------- */
.chat-message.user { background-color: var(--maroon); }
.brochure-tab { background: linear-gradient(135deg, #D9822B, #E8963F); }
.brochure-tab:hover { background: linear-gradient(135deg, #E8963F, #D9822B); }
.brochure-content { border-right-color: var(--saffron); }
.download-btn-pulse { background: linear-gradient(135deg, #7A1E2C, #9A2A3B); color: #fff; }
.download-btn-pulse:hover { background: linear-gradient(135deg, #9A2A3B, #7A1E2C); }
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(122,30,44,.55); }
70% { box-shadow: 0 0 0 10px rgba(122,30,44,0); }
100% { box-shadow: 0 0 0 0 rgba(122,30,44,0); }
}
/* =====================================================================
Sub-pages (payment, visa, cancellation, get-into-bhutan, info, etc.)
===================================================================== */
/* Headings that were hard-coded indigo #4f46e5 */
.payment h1, .payment h2,
.wire h1, .wire h3,
.general-info h2, .contact-info h2,
#cancellation-policy .card-header h2,
.policy-section h3,
#get-into-bhutan .section-title,
#get-into-bhutan .card h3 { color: var(--maroon); }
/* Indigo/violet underline gradients */
.wire h1::after,
.general-info h2::after,
.contact-info h2::after { background: linear-gradient(90deg, var(--maroon), var(--saffron)); }
/* Coral #ff6b6b accents */
.section-title::after { background: var(--saffron); }
.card-icon,
.card-body ul.feature-list li i { color: var(--maroon); }
.card.text-center .number { color: #fff; }
.cta-section { background: linear-gradient(135deg, var(--maroon), var(--maroon-dark)); }
.cta-section .btn { background: var(--saffron); color: #1F2A22; }
.cta-section .btn:hover { background: #E8963F; }
/* Policy pages */
.policy-section h2 { border-bottom-color: var(--saffron); }
.policy-section ul.feature-list li::before { color: var(--saffron); }
.text-accent { color: var(--maroon); }
/* Numbered circles (booking process) */
.number { background: linear-gradient(135deg, var(--maroon), #B8691F); box-shadow: 0 10px 20px rgba(122,30,44,.25); }
/* Festival table + search */
.search-bar1:focus { border-color: var(--maroon); box-shadow: 0 4px 12px rgba(122,30,44,.2); }
#festivalTable tbody tr:hover { background-color: #F3E3D6; }
/* Package cards (listing pages) */
.package-details .season { color: var(--saffron-dark); }
.package-details .price { color: var(--forest); }
/* Mission & vision icons */
.mv-icon { background: linear-gradient(135deg, var(--maroon), var(--saffron)); box-shadow: 0 8px 22px rgba(122,30,44,.2); }
.mv-card h1::after { background: linear-gradient(90deg, var(--saffron), #fff); }
/* Gallery links */
.gallery a { color: var(--maroon); }
.about .stat-item .number {
width: auto; height: auto;
background: none; box-shadow: none; border-radius: 0;
display: block; margin: 0;
color: var(--maroon);
}