/* ============================================================
Scuba Travel - homepage polish
Brings the older theme sections into line with the new rs- pages.
HOW TO USE
1. On index.html only, add a class to the body:
2. Link this file AFTER your other stylesheets (so it wins):
Everything below is scoped to .home-page so it can't affect other pages.
============================================================ */
/* 1. ALIGN SIDES -------------------------------------------------
The hero/trust strip use .rs-container (max 1180px, 18px padding).
Pull the older sections to the same width so left/right edges line up. */
.home-page .last-minute-specials > .container,
.home-page .custom-best-sellers > .container,
.home-page .our-team > .container,
.home-page .testimonial > .container {
max-width: 1180px;
padding-left: 18px;
padding-right: 18px;
}
/* The big wrapper
double-wraps the last-minute /
featured / best-seller widgets in an extra .container, which indents them
more than the hero. Let the inner containers control the width instead. */
.home-page > #page-wrapper .section > .container,
.home-page .section > .container {
max-width: none;
padding-left: 0;
padding-right: 0;
}
.home-page .section .block.row {
max-width: 1180px;
margin-left: auto;
margin-right: auto;
padding-left: 18px;
padding-right: 18px;
}
/* 1b. FONT - use the same Lato as the hero across the homepage sections
(your theme defaults the lower sections to a serif; this unifies them). */
.home-page .trending,
.home-page .custom-best-sellers,
.home-page .our-team,
.home-page .testimonial,
.home-page .section-title h2,
.home-page .section-title h4,
.home-page .section-title p,
.home-page .trend-content,
.home-page .trend-content h4,
.home-page .trend-content h6,
.home-page .trend-content h4 a,
.home-page .button.btn-mini {
font-family: Lato, Arial, Helvetica, sans-serif;
}
/* 2. SECTION HEADINGS - match the new pages (navy, bold) ---------- */
.home-page .section-title { max-width: 860px; }
.home-page .section-title h2 {
color: #003366;
font-weight: 800;
font-size: clamp(26px, 3vw, 40px);
letter-spacing: -.01em;
}
.home-page .section-title .theme { color: #01b7f2; } /* blue accent word */
.home-page .section-title .theme1 { color: #fdb714; } /* gold eyebrow line */
.home-page .section-title p { color: #5f6f80; font-size: 16px; line-height: 1.6; }
/* 3. CARDS - rounded, soft shadow, subtle hover like the new pages -- */
.home-page .trend-item {
border-radius: 16px !important;
border: 1px solid #dbe8f5 !important;
box-shadow: 0 8px 24px rgba(0,43,85,.08) !important;
overflow: hidden;
transition: transform .18s ease, box-shadow .18s ease;
}
.home-page .trend-item:hover {
transform: translateY(-3px);
box-shadow: 0 14px 32px rgba(0,43,85,.14) !important;
}
.home-page .trend-content h4 a { color: #003366; }
.home-page .trend-image img { transition: transform .25s ease; }
.home-page .trend-item:hover .trend-image img { transform: scale(1.04); }
/* 4. BUTTONS - gold pill that fits its text (auto width) ---------- */
.home-page .button.btn-mini {
display: inline-block !important;
width: -webkit-max-content !important;
width: max-content !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
background: #fdb714 !important;
color: #17233e !important;
border: 0 !important;
border-radius: 8px !important;
padding: 9px 16px !important;
margin-top: 6px;
font-weight: 700 !important;
font-size: 13px !important;
line-height: 1.25 !important;
white-space: normal;
text-align: center;
box-sizing: border-box !important;
}
.home-page .button.btn-mini:hover { background: #ffca55 !important; color: #17233e !important; }
/* 4b. EQUAL-HEIGHT CARDS + button pinned to the bottom of each card */
.home-page .item-slider2 > .col-lg-3,
.home-page .item-slider2 > .col-md-6,
.home-page .item-slider2 .slick-slide > div { display: flex; }
.home-page .item-slider2 .slick-track { display: flex !important; }
.home-page .item-slider2 .slick-slide { height: auto !important; }
.home-page .item-slider2 .trend-item {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
.home-page .item-slider2 .trend-content {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
.home-page .item-slider2 .trend-content .button.btn-mini {
margin-top: auto;
align-self: flex-start;
}
/* Best-sellers uses a Swiper carousel - equalise those card heights too */
.home-page .best-sellers-swiper .swiper-slide { height: auto; }
.home-page .best-sellers-swiper .trend-item {
height: 100%;
display: flex;
flex-direction: column;
}
.home-page .best-sellers-swiper .trend-content {
display: flex;
flex-direction: column;
flex: 1 1 auto;
}
/* 5. SPACING - tighter, even rhythm between sections -------------- */
.home-page .trending,
.home-page .our-team,
.home-page .testimonial { padding-top: 30px !important; padding-bottom: 30px !important; }
.home-page .section-title { margin-bottom: 22px !important; }
.home-page .section-title p { margin-bottom: 0; }
/* 6. REVIEWS - present the Feefo block as a clean card ------------- */
.home-page .testimonial .container {
background: #fff;
border: 1px solid #dbe8f5;
border-radius: 18px;
box-shadow: 0 10px 34px rgba(0,43,85,.08);
padding: 30px 24px;
}
/* 7. ATOL emphasis - make the first trust item stand out ---------- */
.home-page .rs-trust-strip .rs-trust-item:first-child {
font-weight: 900;
}
.home-page .rs-trust-strip .rs-trust-item:first-child span {
background: #fdb714;
color: #06274a;
}
/* (Reassurance badge band removed - the trust strip already covers it.) */
/* 8. LAST-MINUTE TABS - keep all five on one line (never wrap) ----- */
.home-page .lm-tabs {
display: flex !important;
flex-wrap: nowrap !important;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
margin: 0 0 14px;
padding: 0;
}
.home-page .lm-tabs > li {
float: none !important;
flex: 0 0 auto;
margin: 0;
}
.home-page .lm-tabs > li > a {
padding: 8px 11px !important;
font-size: 13px !important;
letter-spacing: 0 !important;
white-space: nowrap !important;
}
/* 9. FEATURED-TRIP + LAST-MINUTE widgets - use Lato, not serif ----- */
.home-page .featured-trip-widget,
.home-page .featured-trip-empty,
.home-page .lastminute-shell { font-family: Lato, Arial, Helvetica, sans-serif; }
.home-page .featured-trip-title,
.home-page .featured-trip-empty h3,
.home-page .lastminute-main-title {
font-family: Lato, Arial, Helvetica, sans-serif !important;
color: #003366 !important;
font-weight: 800 !important;
}
/* 10. SHARED WIDTH so every section lines up with the hero --------- */
.home-page .container {
max-width: 1180px !important;
padding-left: 18px !important;
padding-right: 18px !important;
}
/* the big wrapper stays full-width so its inner container isn't double-indented */
.home-page .section > .container {
max-width: none !important;
padding-left: 0 !important;
padding-right: 0 !important;
}
/* 11. ALTERNATING SECTION BACKGROUNDS (blue/white, like the new pages) */
.home-page .last-minute-specials { background: #ffffff; } /* Favourite holidays - white */
.home-page .testimonial { background: #f3f8fc; } /* Reviews - pale blue */
.home-page .section { background: #ffffff; } /* Last-minute + featured - white */
.home-page .our-team { /* Meet the team - pale, full width */
background: #f3f8fc;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding-top: 30px;
padding-bottom: 30px;
}
/* Travel-confidence block borrowed from the Red Sea page - trim its big padding */
.home-page #confidence { padding-top: 30px !important; padding-bottom: 30px !important; }
/* Best sellers - pale blue, FULL WIDTH even though it's nested.
The negative margins bleed the band to the viewport edges; the inner
.container keeps the cards centred and aligned with everything else. */
.home-page #best-sellers {
background: #f3f8fc !important; /* override bestsellers.css */
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
padding-top: 30px;
padding-bottom: 30px;
}
/* Team cards: white on the pale band (instead of the dark theme colour) */
.home-page .our-team .trend-content.bg-theme { background: #ffffff !important; }
.home-page .our-team .trend-content .white { color: #5b6675 !important; } /* role / since */
.home-page .our-team .trend-content h4.white { color: #003366 !important; } /* name */
/* 12. EXPLORE-BY-DESTINATION GRID (replaces Favourite Holidays) ---- */
.home-page .destinations-section { background: #ffffff; }
.home-page .dest-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 16px;
}
@media (max-width: 760px) { .home-page .dest-grid { grid-template-columns: repeat(2, 1fr); } }
.home-page .dest-tile {
position: relative;
display: block;
height: 185px;
border-radius: 14px;
overflow: hidden;
text-decoration: none;
color: #fff;
box-shadow: 0 8px 24px rgba(0,43,85,.10);
}
.home-page .dest-tile img {
position: absolute; top: 0; left: 0; right: 0; bottom: 0;
width: 100%; height: 100%; object-fit: cover;
transition: transform .35s ease;
}
.home-page .dest-tile:hover img { transform: scale(1.06); }
.home-page .dest-tile::after {
content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(to top, rgba(0,20,40,.82) 0%, rgba(0,20,40,.30) 45%, rgba(0,20,40,.05) 100%);
}
.home-page .dest-tile .dest-body {
position: absolute; left: 0; right: 0; bottom: 0;
padding: 14px 16px; z-index: 1;
}
.home-page .dest-name { display: block; font-size: 20px; font-weight: 900; line-height: 1.15; color: #fff; }
.home-page .dest-tag { display: block; font-size: 12.5px; color: #dbe9f5; line-height: 1.35; margin-top: 2px; }
.home-page .dest-go { display: inline-block; margin-top: 6px; font-size: 12.5px; font-weight: 800; color: #ffd87a; }
.home-page .dest-tile--all {
display: flex; align-items: center; justify-content: center; text-align: center;
background: linear-gradient(135deg, #003366, #0e72b8);
}
.home-page .dest-tile--all::after { display: none; }
.home-page .dest-tile--all .dest-body { position: static; padding: 0; }