/* * CSC Booking Engine — Professional UI/UX Redesign v5 * Colombo Swimming Club * * DESIGN PRINCIPLE: Blue is reserved exclusively for action buttons. * All decorative/structural colour uses a refined charcoal + gold palette. * * COLOUR TOKENS * --charcoal-deep #1C1C1E near-black — headings, section bars, navbar mobile, widget bar * --charcoal-mid #2D2D30 dark headings * --charcoal-body #4A4A4A body text * --charcoal-muted #767676 labels, captions, sub-text * --gold #B8963E decorative accents — ribbons, left-borders, underlines * --gold-lt #D4AF57 lighter gold for shimmer / hover * --bg #F7F6F4 warm off-white page background * --card #FFFFFF pure white cards * --border #E2DED8 warm light grey dividers / input borders * --border-focus #B8963E gold focus ring on inputs * * ── BUTTONS ONLY ── * --btn-blue #0068A5 primary CTA (Search, RESERVE, Book Now) * --btn-blue-hover #00527F hover / active * --btn-green #1B7F5E pay-now / proceed-to-payment * --btn-green-h #145F47 hover * --btn-secondary #5A5F6B secondary/back buttons */ /* ============================================================ 0. BOX SIZING ============================================================ */ *, *::before, *::after { box-sizing: border-box; } /* ============================================================ 1. BASE TYPOGRAPHY ============================================================ */ body { background-color: #F7F6F4; color: #4A4A4A; font-family: 'Poppins', 'Roboto', sans-serif !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.75; } h1, h2, h3, h4, h5, h6 { color: #1C1C1E; font-family: 'Italiana', 'Vidaloka', serif !important; line-height: 1.3; margin-bottom: 10px; } h1 { font-size: 2.8rem !important; } h2 { font-size: 2.1rem !important; } h3 { font-size: 1.5rem !important; } h4 { font-size: 1.1rem !important; text-transform: uppercase; letter-spacing: 1.4px; } h5 { font-size: 1rem !important; } p { color: #4A4A4A; font-size: 15px; line-height: 1.8; margin-bottom: 10px; } /* Links */ a { color: #2D2D30; transition: color .2s; } a:hover { color: #B8963E; text-decoration: none; } /* ── All inside the dark navbar strip inherit transparent bg ── */ #header02 img { background: transparent !important; background-color: transparent !important; border: none !important; padding: 0 !important; box-shadow: none !important; /* Prevent HTML width/height attrs from distorting the logo */ width: auto !important; height: auto !important; max-height: 68px !important; max-width: 170px !important; display: block !important; object-fit: contain !important; } .website-header-font-style { font-family: 'Italiana', 'Vidaloka', serif !important; font-weight: 700 !important; color: #1C1C1E; } .website-body-font-style { font-family: 'Poppins', sans-serif !important; font-weight: 400 !important; font-size: 15px !important; color: #4A4A4A; } .font-color-white { color: #ffffff !important; } .font-color-green { color: #1B7F5E !important; } .theme-text-color-01 { color: #1C1C1E !important; } .theme-text-color-02 { color: #1C1C1E !important; } /* ────────────────────────────────────────────────────────── HOME PAGE TITLES — match CTA button blue (#0068A5) ────────────────────────────────────────────────────────── */ /* Section headings on white background (Welcome, Gallery, Gourmet) */ h1.font-color-green, h2.font-color-green, h3.font-color-green { color: #0068A5 !important; } /* Taglines ("Have it your way", "CONFINES TO BEHOLD") */ .tagline { color: #0068A5 !important; font-weight: 700 !important; letter-spacing: 2.5px; } /* ── Hero title — one line, layered eyebrow shadow ── */ .hero-title { color: #ffffff !important; font-weight: 800 !important; white-space: nowrap; /* force single line on desktop */ font-size: 5vw !important; /* overrides style.css 6.333 / 6.5 vw */ line-height: 1.15 !important; /* * Eyebrow shadow: stacked layers build a deep, arched shadow * that lifts the title off the video background — dark → diffuse glow */ text-shadow: 0 2px 4px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.45), 0 8px 24px rgba(0, 0, 0, 0.38), 0 16px 48px rgba(0, 0, 0, 0.28), 0 0 72px rgba(13, 20, 33, 0.35); /* CSC navy ambient glow */ } /* ── Hero eyebrow — sits above the main title ── */ .hotel-text { display: block; font-size: 11px !important; font-family: 'Poppins', sans-serif !important; font-weight: 500 !important; letter-spacing: 6px !important; text-transform: uppercase !important; color: #ffffff !important; text-shadow: 0 1px 6px rgba(0,0,0,.5) !important; margin-bottom: 10px; } .hotel-text::before, .hotel-text::after { content: ''; display: inline-block; width: 28px; height: 1px; background: #ffffff; vertical-align: middle; margin: 0 10px; opacity: .7; } /* ── Hero subtitle — unchanged ── */ .hero-subtitle { color: #ffffff !important; font-weight: 400 !important; text-shadow: 0 1px 10px rgba(0,0,0,.55); } /* ============================================================ 2. NAVBAR — CSC dark navy (makes white logo visible) ============================================================ */ #header02 { background: #0D1421 !important; /* CSC deep navy */ border-bottom: 3px solid #B8963E; /* gold accent stripe */ box-shadow: 0 4px 24px rgba(0,0,0,.45); padding-top: 0 !important; padding-bottom: 0 !important; min-height: 80px !important; } /* Single-row flex — all three columns on one row */ #header02 .custom-margin-header { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; margin: 0 !important; min-height: 80px !important; padding: 8px 0 !important; } /* Override Bootstrap float so flex governs layout */ #header02 .custom-margin-header > [class*="col-"] { float: none !important; display: flex !important; align-items: center !important; } #header02 .custom-margin-header > .col-lg-5 { flex: 0 0 41.6667%; max-width: 41.6667%; } #header02 .custom-margin-header > .col-lg-2 { flex: 0 0 16.6667%; max-width: 16.6667%; justify-content: center; } /* Force nav lists to stay on a single horizontal line */ #header02 .navbar-collapse { padding: 0 !important; } #header02 .header-left, #header02 .header-right { float: none !important; display: flex !important; align-items: center !important; flex-wrap: nowrap !important; list-style: none !important; margin: 0 !important; padding: 0 !important; gap: 2px; } #header02 .header-right { justify-content: flex-end; } #header02 .header-left li, #header02 .header-right li { display: inline-flex !important; align-items: center !important; } /* Nav link style — white on dark */ #header02 .header-top-navigations { color: rgba(255,255,255,.88) !important; font-size: 12.5px !important; font-weight: 600 !important; letter-spacing: 1.3px; text-transform: uppercase; transition: color .2s; padding: 6px 11px !important; display: inline-block; font-family: 'Poppins', sans-serif !important; white-space: nowrap; } #header02 .header-top-navigations:hover { color: #D4AF57 !important; } /* Separator line — subtle gold on dark */ .header_underline { border-bottom: 1px solid rgba(184,150,62,.30) !important; padding-bottom: 0 !important; } /* Social icons — white */ #header02 .fa { color: rgba(255,255,255,.80) !important; font-size: 19px !important; transition: color .2s; } #header02 .fa:hover { color: #D4AF57 !important; } /* ───────────────────────────────────────── LOGO — sized & visible on dark background ───────────────────────────────────────── */ .logo-container { display: flex !important; align-items: center !important; justify-content: center !important; padding: 4px 0 !important; } .logo-container a { display: block; line-height: 0; } /* Strip ALL Bootstrap img-thumbnail chrome and set correct size. The HTML attrs width="828" height="520" are overridden by !important. */ .logo-container img, .logo-container .img_width, .logo-container .logo, .logo-container .img-thumbnail, #header02 .img-thumbnail, .img-thumbnail.logo { display: block !important; width: auto !important; height: auto !important; max-height: 68px !important; max-width: 170px !important; min-height: 0 !important; background: transparent !important; background-color: transparent !important; border: none !important; padding: 0 !important; box-shadow: none !important; border-radius: 0 !important; object-fit: contain; /* Boost visibility: slight brightness if logo looks faded */ filter: brightness(1.05); } /* ── Navbar pill buttons ── */ .btn-header { border-radius: 50px !important; font-size: 12.5px !important; font-weight: 600 !important; padding: 6px 18px !important; line-height: 1.5 !important; transition: all .25s !important; display: inline-block !important; text-transform: uppercase; letter-spacing: .7px; white-space: nowrap; } /* Members — white outline on dark */ .btn-white-outline { color: rgba(255,255,255,.90) !important; background: transparent !important; border: 1.5px solid rgba(255,255,255,.40) !important; } .btn-white-outline:hover { border-color: #D4AF57 !important; color: #D4AF57 !important; background: transparent !important; } /* Book Now — gold CTA on dark navbar */ .btn-white { background: linear-gradient(135deg, #B8963E 0%, #D4AF57 100%) !important; color: #1C1C1E !important; border: none !important; font-weight: 700 !important; box-shadow: 0 3px 12px rgba(184,150,62,.45); } .btn-white:hover { background: linear-gradient(135deg, #D4AF57 0%, #B8963E 100%) !important; box-shadow: 0 6px 20px rgba(184,150,62,.55) !important; transform: translateY(-1px); color: #1C1C1E !important; } /* Mobile menu — same dark navy as desktop */ #mobileMenu { background: #0D1421 !important; border-top: 2px solid #B8963E !important; } #btnMobileMenuOpen { background: transparent !important; border: 1.5px solid rgba(255,255,255,.4) !important; } #btnMobileMenuOpen .fa { color: #fff !important; font-size: 26px !important; } #btnMobileMenuClose .fa { color: #fff !important; font-size: 26px !important; } #btnMobileMenuClose { background: transparent !important; border: 1.5px solid rgba(255,255,255,.3) !important; } /* Mobile logo on dark bg */ .mobile-menu-row .img-thumbnail { background: transparent !important; border: none !important; padding: 0 !important; box-shadow: none !important; max-height: 56px !important; width: auto !important; height: auto !important; } #mobileMenu .img-thumbnail { background: transparent !important; border: none !important; padding: 0 !important; box-shadow: none !important; max-width: 180px !important; width: auto !important; } /* ============================================================ 3. LANDING PAGE HERO (Stay.cshtml) ============================================================ */ .home-hero { min-height: 100vh; position: relative; } .home-hero::before { background: linear-gradient(180deg, rgba(10,10,12,.05) 0%, rgba(10,10,12,.72) 100%); opacity: 1; } .home-hero .stay-landscape, .home-hero .gradientBg, .home-hero .theme-bg-color-1 { background-color: rgba(20,20,22,.92) !important; } .home-hero .well-transparent.stay-landscape { border: 1px solid rgba(184,150,62,.45) !important; border-radius: 8px !important; box-shadow: 0 12px 40px rgba(0,0,0,.45); } /* ============================================================ 4. INNER-PAGE BANNER ============================================================ */ .page-inner-banner-wrap { position: relative; overflow: hidden; } .page-inner-banner-wrap .background-image-booking-common { height: 340px !important; min-height: 340px !important; max-height: 340px !important; background-position: center 40% !important; background-size: cover !important; } .page-inner-banner-wrap .background-image-booking-common::before { background: linear-gradient(160deg, rgba(10,10,12,.55) 0%, rgba(20,18,14,.78) 100%) !important; } .page-inner-banner-wrap .topic-headers { position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding-top: 80px !important; padding-left: 20px; padding-right: 20px; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center; transform: none !important; z-index: 2; } .page-inner-banner-wrap .topic-headers h2 { font-size: 2.5rem !important; color: #ffffff !important; margin: 0 0 12px !important; text-shadow: 0 3px 16px rgba(0,0,0,.65); font-family: 'Italiana', 'Vidaloka', serif !important; letter-spacing: 3px; } .page-inner-banner-wrap .topic-headers span { font-size: 1.0rem !important; color: rgba(255,255,255,.88) !important; text-shadow: 0 1px 6px rgba(0,0,0,.4); max-width: 620px; line-height: 1.6; font-weight: 300; } /* Gold decorative line below banner title */ .page-inner-banner-wrap .topic-headers::after { content: ''; display: block; width: 60px; height: 2px; background: linear-gradient(90deg, #B8963E, #D4AF57); border-radius: 1px; margin-top: 16px; } /* ============================================================ 5. BOOKING WIDGET BAR ============================================================ */ .csc-widget-bar { background: #1C1C1E; padding: 18px 0 14px; border-bottom: 2px solid #B8963E; box-shadow: 0 6px 24px rgba(0,0,0,.45); position: relative; z-index: 100; } .csc-widget-bar .well-transparent.stay-landscape, .csc-widget-bar .gradientBg, .csc-widget-bar .theme-bg-color-1 { background-color: transparent !important; border: none !important; box-shadow: none !important; border-radius: 0 !important; margin-bottom: 0 !important; padding-top: 4px !important; padding-bottom: 0 !important; } .csc-widget-bar > .container > .row > div > .container { padding-left: 0; padding-right: 0; width: 100%; max-width: 100%; } /* Widget labels */ .csc-widget-bar .control-label, .bookingWidget .control-label { color: rgba(255,255,255,0.90) !important; /* high-contrast white on dark bg */ font-size: 13px !important; font-weight: 500 !important; text-transform: none !important; /* mixed-case reads better at 13px */ letter-spacing: 0.3px !important; margin-bottom: 6px !important; font-family: 'Poppins', sans-serif !important; display: block; line-height: 1.3; white-space: nowrap; /* prevent icon + text splitting onto two lines */ } .csc-widget-bar .control-label .lbl-icon, .bookingWidget .control-label .lbl-icon { color: #B8963E !important; /* gold icon, white label text */ margin-right: 5px; font-size: 12px !important; vertical-align: middle; } /* Required asterisk */ .csc-widget-bar .control-label .lbl-req, .bookingWidget .control-label .lbl-req { color: rgba(255,140,140,0.85) !important; font-size: 13px !important; margin-left: 2px; } /* Widget inputs */ .csc-widget-bar .form-control, .csc-widget-bar .well-transparent .form-control, .bookingWidget .form-control { background-color: rgba(255,255,255,.07) !important; border: 1px solid rgba(255,255,255,.18) !important; color: #F2EDE8 !important; border-radius: 5px !important; height: 40px !important; font-size: 13px !important; font-weight: 500 !important; padding: 6px 10px !important; /* tighter side-padding = more text room */ transition: border-color .2s, box-shadow .2s, background .2s; } .csc-widget-bar .form-control:focus, .bookingWidget .form-control:focus { border-color: rgba(184,150,62,.8) !important; box-shadow: 0 0 0 3px rgba(184,150,62,.22) !important; background-color: rgba(255,255,255,.12) !important; outline: none; } .csc-widget-bar .form-control::placeholder { color: rgba(210,200,185,.45) !important; } /* ── BUTTONS (blue) ── */ /* Send PIN */ #btnSendPin { background: #0068A5 !important; border: none !important; color: #fff !important; border-radius: 5px !important; font-size: 14px !important; font-weight: 600 !important; padding: 9px 18px !important; margin-left: 6px; white-space: nowrap; transition: all .2s; box-shadow: 0 3px 10px rgba(0,104,165,.35); } #btnSendPin:hover:not([disabled]) { background: #00527F !important; transform: translateY(-1px); box-shadow: 0 5px 14px rgba(0,104,165,.45); } #btnSendPin:disabled { opacity: .5 !important; } /* Search / Check availability — BLUE button */ .btn-warning { background: #0068A5 !important; border: none !important; color: #fff !important; font-weight: 700 !important; font-size: 15px !important; border-radius: 5px !important; letter-spacing: .5px; transition: all .2s; box-shadow: 0 3px 10px rgba(0,104,165,.3); } .btn-warning:hover { background: #00527F !important; color: #fff !important; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0,104,165,.4); } /* ============================================================ 6. MAIN CONTENT AREA ============================================================ */ .inner-page-container { background-color: #EEF2F7; padding-top: 32px !important; padding-bottom: 80px !important; } /* Section heading bar — CSC navy gradient + gold accent */ .theme-background-color-05 { background: linear-gradient(135deg, #1B2D4E 0%, #243D64 100%) !important; color: #ffffff !important; padding: 14px 24px !important; border-radius: 6px !important; border-left: 5px solid #B8963E; box-shadow: 0 4px 18px rgba(27,45,78,.28); margin-bottom: 24px !important; } .theme-background-color-05 *, .theme-background-color-05.website-header-font-style { color: #ffffff !important; } .theme-background-color-05 hr { border-color: rgba(255,255,255,.15) !important; margin: 8px 0 !important; } .theme-background-color-05 .website-header-font-style { font-size: 0.95rem !important; letter-spacing: 2px; } /* ============================================================ 7. ROOM CARDS ============================================================ */ .single-room-view { background: #ffffff !important; border-radius: 10px !important; border: 1px solid #E2DED8 !important; box-shadow: 0 2px 10px rgba(0,0,0,.06) !important; padding: 0 !important; margin-bottom: 14px; overflow: hidden; transition: box-shadow .3s, transform .25s, border-color .3s; } .single-room-view:hover { box-shadow: 0 6px 22px rgba(0,0,0,.11) !important; transform: translateY(-2px); border-color: #B8963E !important; } /* Inner padding area */ .single-room-view .background-white { background: #fff !important; border-radius: 0 !important; padding: 24px !important; } /* ── Carousel images ── */ .single-room-view .carousel { border-radius: 0; overflow: hidden; } .single-room-view .carousel-inner .item { background: #EAE8E4; line-height: 0; } .single-room-view .carousel-inner .item img { width: 100% !important; height: 270px !important; object-fit: cover !important; border-radius: 0 !important; display: block; } /* Carousel arrows — dark charcoal */ .carousel-arrows { background: rgba(20,20,22,.55) !important; width: 38px !important; height: 38px !important; border-radius: 50%; display: flex !important; align-items: center; justify-content: center; font-size: 22px !important; color: #fff !important; transition: background .2s; } .carousel-arrows:hover { background: rgba(184,150,62,.75) !important; } /* Image counter */ .carousel-image-count { position: absolute; bottom: 10px; right: 12px; background: rgba(20,20,22,.6); color: #fff; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 20px; letter-spacing: .4px; } /* ── Room name row ── */ .single-room-view .data-noof-rooms { text-align: center !important; font-size: 18px !important; font-weight: 700 !important; border: 2px solid #C8C0B6 !important; border-radius: 5px !important; height: 48px !important; color: #1C1C1E !important; background: #F7F6F4 !important; padding: 4px !important; } .single-room-view .data-noof-rooms:focus { border-color: #B8963E !important; box-shadow: 0 0 0 3px rgba(184,150,62,.2) !important; outline: none; } /* Room name H3 */ .single-room-view h3, .single-room-view h3.no-margin-padding-top, .single-room-view .theme-text-color-01.website-header-font-style { font-size: 1.4rem !important; color: #1C1C1E !important; margin-top: 4px !important; margin-bottom: 4px !important; } /* ── Price display (charcoal, not blue) ── */ .single-room-view .roomPrice { color: #1C1C1E !important; font-weight: 800 !important; font-size: 1.25rem !important; } .single-room-view .font-color-green { color: #1B7F5E !important; font-size: 13px !important; font-weight: 500; } .single-room-view p[style*="color:green"] { color: #1B7F5E !important; font-size: 13px !important; } /* Room description */ .single-room-view p.text-justify { font-size: 15px !important; color: #4A4A4A; line-height: 1.8; } /* Meal plan radios */ .radio-btn-container { font-size: 14px !important; font-weight: 500; color: #1C1C1E; cursor: pointer; padding-left: 30px !important; padding-top: 2px !important; line-height: 1.5; } .radio-btn-container input:checked ~ .checkmark { background-color: #B8963E !important; border-color: #B8963E !important; } .radio-btn-container .checkmark { border: 2px solid #C8C0B6 !important; width: 20px; height: 20px; top: 2px; } /* Availability labels */ .room-availability-lable .red { color: #C0392B !important; font-weight: 600; font-size: 14px; } .room-availability-lable .green { color: #1B7F5E !important; font-weight: 600; font-size: 14px; } /* ── Bottom panel: room types + RESERVE ── */ .single-room-view .well.divMainHead { background: #F7F6F4 !important; border: none !important; border-top: 2px solid #E8E4DE !important; border-radius: 0 0 10px 10px !important; box-shadow: none !important; padding: 20px 24px !important; margin-bottom: 0 !important; } /* Room type radio labels — card style */ .single-room-view .divhead .radio-btn-container { font-size: 14px !important; background: #fff; border: 1px solid #E2DED8; border-radius: 7px; padding: 10px 10px 10px 38px !important; display: block; margin-bottom: 6px; transition: border-color .2s, background .2s; } .single-room-view .divhead .radio-btn-container:hover { border-color: #B8963E; background: #FBF9F6; } /* Max adults note */ .single-room-view .font-size-10 { font-size: 12px !important; color: #767676; margin-top: 3px; display: block; } /* Price in bottom panel */ .single-room-view .font-size-18.roomPrice, .single-room-view .bold.roomPrice { font-size: 1.55rem !important; font-weight: 800 !important; color: #1C1C1E !important; display: block; line-height: 1.2; } .single-room-view .font-color-green.font-size-12 { font-size: 13px !important; color: #1B7F5E !important; } /* Cancellation policy link */ .showRoomRestrictions { color: #767676 !important; font-size: 13px !important; font-weight: 600; cursor: pointer; letter-spacing: .3px; text-decoration: underline; text-decoration-color: #C8C0B6; } .showRoomRestrictions:hover { color: #B8963E !important; text-decoration-color: #B8963E; } /* ── RESERVE button — BLUE ── */ .single-room-view button[id="formClick"], .single-room-view .btn-primary { background: #0068A5 !important; border: none !important; color: #fff !important; font-weight: 700 !important; font-size: 15px !important; letter-spacing: .6px; border-radius: 6px !important; height: 48px; transition: all .2s; box-shadow: 0 4px 12px rgba(0,104,165,.28); } .single-room-view button[id="formClick"]:hover:not([disabled]), .single-room-view .btn-primary:hover:not([disabled]) { background: #00527F !important; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,104,165,.38); } .single-room-view .btn-primary:disabled { background: #C8C0B6 !important; border: none !important; cursor: not-allowed; opacity: .8; } /* Promotion ribbon — gold */ .ribbon span { background: linear-gradient(135deg, #B8963E 0%, #D4AF57 100%) !important; color: #1C1C1E !important; font-weight: 700 !important; font-size: 12px !important; } /* ============================================================ 8. SELECTED ROOMS SIDEBAR ============================================================ */ /* ── Selected Rooms outer card ── */ .selectedRoomArea { background: #ffffff; border: 1px solid #C8D6E8; border-radius: 12px; padding: 0; box-shadow: 0 6px 28px rgba(27,45,78,.13); overflow: hidden; } /* Heading strip — navy gradient, gold bottom accent line */ .selectedRoomArea .theme-background-color-05 { background: linear-gradient(135deg, #1B2D4E 0%, #243D64 100%) !important; border-radius: 12px 12px 0 0 !important; margin-bottom: 0 !important; border-bottom: 3px solid #B8963E !important; border-left: 5px solid #B8963E !important; padding: 16px 18px !important; } /* Padding handled by .sr-wrapper */ #selectedRooms, .selectedRoomArea > div:not([class*="theme"]) { padding: 0 !important; } .selectedRoomArea hr { border-color: #DDE6F0 !important; margin: 10px 0 !important; } /* Room name */ .data-room-item .data-h5 { font-size: 13px !important; font-weight: 600 !important; color: #1B2D4E !important; margin-bottom: 4px !important; font-family: 'Poppins', sans-serif !important; text-transform: capitalize; } .data-room-item img { border-radius: 6px !important; object-fit: cover; height: 56px !important; width: 72px !important; max-width: 72px !important; border: 1px solid #DDE6F0 !important; } /* Mini table */ .data-room-item .table, .data-room-item .table-striped { margin-bottom: 4px; font-size: 13px !important; } .data-room-item .table > tbody > tr > td { padding: 6px 8px !important; font-size: 13px !important; color: #4A5568; border-color: #EEF2F7; background: transparent !important; } .data-room-item .table > thead > tr > th, .data-room-item .table > tbody > tr:first-child > td { font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .5px; color: #5A6B80 !important; background: #EEF2F7 !important; border-color: #DDE6F0 !important; padding: 6px 8px !important; } /* Legacy total fallback */ .selectedRoomArea h4.pull-right, .selectedRoomArea h4[style*="float:right"] { font-size: 1.1rem !important; color: #1B2D4E !important; border-bottom: 2px solid #B8963E !important; padding-bottom: 4px; font-family: 'Poppins', sans-serif !important; font-weight: 700 !important; } /* Child rate note */ .selectedRoomArea span[style*="color:#ff0000"] { color: #C0392B !important; font-size: 12px; background: #FFF5F5; border-left: 3px solid #C0392B; border-radius: 0 4px 4px 0; padding: 8px 10px; display: block; margin-top: 8px; } /* Cancellation policy link */ .selectedRoomArea .showRoomRestrictions { color: #1B2D4E !important; cursor: pointer; text-decoration: underline; font-size: 11px; } .selectedRoomArea .showRoomRestrictions:hover { color: #B8963E !important; } /* Trash icon */ .data-delete-room { color: #C0392B !important; font-size: 15px; transition: transform .15s, color .15s; background: none !important; border: none !important; } .data-delete-room:hover { color: #922B21 !important; transform: scale(1.2); } /* ── Proceed to Payment — CSC navy CTA ── */ .data-btn-proceed { background: linear-gradient(135deg, #1B2D4E 0%, #243D64 100%) !important; border: none !important; color: #fff !important; font-weight: 700 !important; font-size: 13px !important; border-radius: 7px !important; padding: 12px 16px !important; box-shadow: 0 4px 14px rgba(27,45,78,.3); transition: all .2s; letter-spacing: .5px; } .data-btn-proceed:hover { background: linear-gradient(135deg, #0D1F3C 0%, #1B2D4E 100%) !important; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(27,45,78,.4); color: #fff !important; } /* Sticky sidebar */ .alwaysOnPageTop { position: -webkit-sticky !important; position: sticky !important; top: 90px !important; transform: none !important; margin-top: 0 !important; } /* ============================================================ 9. CONFIRM PAGE ============================================================ */ /* ── Page layout ── */ .confirm-page-wrap { padding-top: 36px !important; padding-bottom: 80px !important; } .confirm-row { display: flex; flex-wrap: wrap; align-items: flex-start; } .confirm-col { margin-bottom: 28px; } /* ── Unified card (both panels) ── */ .confirm-card { background: #ffffff; border: 1px solid #C8D6E8; border-radius: 12px; overflow: hidden; box-shadow: 0 6px 28px rgba(27,45,78,.11); } /* ── Card header — navy gradient + gold accent (same language as the rest of the app) ── */ .confirm-card-header { display: flex; align-items: center; gap: 10px; background: linear-gradient(135deg, #1B2D4E 0%, #243D64 100%); color: #ffffff; font-family: 'Italiana', serif; font-size: 1rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; padding: 15px 22px; border-bottom: 3px solid #B8963E; border-left: 5px solid #B8963E; } .confirm-card-header .fa, .confirm-card-header .glyphicon { color: #B8963E; font-size: 15px; } /* ── Your Selection panel ── */ .confirm-selection-body { padding: 0; } .confirm-selection-area { border: none !important; border-radius: 0 !important; box-shadow: none !important; background: #ffffff !important; } /* Suppress elements that belong on the rooms page, not the confirm summary */ .confirm-selection-area .sr-proceed-row { display: none !important; } .confirm-selection-area .sr-alert { display: none !important; } .confirm-selection-area .sr-footnotes { display: none !important; } .confirm-selection-area .sr-empty-note { display: none !important; } /* Room items in confirm — cleaner card treatment */ .confirm-selection-area .sr-item { background: #F3F7FC; border: 1px solid #D6E4F0; border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; } .confirm-selection-area .sr-item-name { font-size: 13px !important; font-weight: 600 !important; color: #1B2D4E !important; } .confirm-selection-area .sr-item-amount { font-weight: 700 !important; color: #1B2D4E !important; } /* Total row — aligned with room cards (wrapper already supplies 16px side padding) */ .confirm-selection-area .sr-total-row { background: #EEF2F7; border: 1px solid #C8D6E8; border-radius: 8px; padding: 14px 16px; margin: 14px 0 16px; } .confirm-selection-area .sr-total-label { font-size: 12px; font-weight: 700; color: #5A6B80; text-transform: uppercase; letter-spacing: .8px; } .confirm-selection-area .sr-total-value { font-size: 1.2rem; font-weight: 800; color: #1B2D4E; border-bottom: 2px solid #B8963E; padding-bottom: 2px; } .confirm-loading { padding: 40px 20px; color: #8A9BB0; } .confirm-loading p { font-size: 13px; margin-top: 10px; } /* ── Form — no duplicate card styling (outer .confirm-card handles it) ── */ #frmConfirm { background: transparent; border: none !important; border-radius: 0; box-shadow: none !important; padding: 0 !important; } /* ── Form section divider blocks ── */ .cfs-section { padding: 18px 22px; border-bottom: 1px solid #EEF2F7; } .cfs-section:last-child { border-bottom: none; } /* Section sub-label (Personal Details, Contact, etc.) */ .cfs-section-label { font-size: 11px; font-weight: 700; color: #1B2D4E; text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 14px; display: flex; align-items: center; gap: 6px; } .cfs-section-label .fa { color: #B8963E; font-size: 13px; } .cfs-optional { font-weight: 400; color: #8A9BB0; text-transform: none; letter-spacing: 0; } /* Labels */ #frmConfirm label { font-size: 12px !important; font-weight: 600; color: #4A6080; text-transform: uppercase; letter-spacing: .6px; margin-bottom: 5px; display: block; } /* Inputs */ #frmConfirm .form-control { border: 1.5px solid #C8D6E8; border-radius: 7px !important; height: 42px; font-size: 14px; color: #1B2D4E; background: #F9FBFD; transition: border-color .2s, box-shadow .2s; } #frmConfirm .form-control:focus { border-color: #1B2D4E !important; box-shadow: 0 0 0 3px rgba(27,45,78,.12) !important; background: #ffffff !important; outline: none; } #frmConfirm textarea.form-control { height: auto; min-height: 80px; resize: vertical; } #frmConfirm .form-group { margin-bottom: 0; } #frmConfirm .row { margin-bottom: 10px; } /* ── Payment method section ── */ .cfs-payment-section { background: #F9FBFD; } .cfs-pay-option { display: inline-flex; align-items: center; gap: 0; cursor: pointer; margin: 0; } .cfs-pay-option input[type="radio"] { display: none; } .cfs-pay-inner { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border: 2px solid #1B2D4E; border-radius: 8px; background: #ffffff; box-shadow: 0 2px 8px rgba(27,45,78,.1); transition: all .2s; } .cfs-pay-option input:checked + .cfs-pay-inner { border-color: #B8963E; box-shadow: 0 3px 12px rgba(184,150,62,.2); } .cfs-pay-inner img { height: 26px; width: auto; } .cfs-pay-name { font-size: 13px; font-weight: 600; color: #1B2D4E; white-space: nowrap; } /* ── T&C section ── */ .cfs-tc-section { background: #FDFBF6; } .cfs-tc-label { font-size: 13px !important; font-weight: 500 !important; color: #1B2D4E !important; cursor: pointer; line-height: 1.6; text-transform: none !important; letter-spacing: 0 !important; display: flex !important; align-items: flex-start; gap: 8px; } .cfs-tc-link { color: #1B2D4E; text-decoration: underline; cursor: pointer; font-weight: 700; } .cfs-tc-link:hover { color: #B8963E; } .cfs-otp-note { margin-top: 10px; font-size: 12px; color: #922B21; background: #FFF5F5; border-left: 3px solid #C0392B; border-radius: 0 6px 6px 0; padding: 9px 13px; line-height: 1.5; } .cfs-otp-note .fa { margin-right: 5px; } /* ── Action buttons section ── */ .cfs-actions-section { background: #F3F7FC; } .cfs-btn-row { display: flex; gap: 12px; margin-bottom: 16px; } /* Back — navy outline */ .cfs-btn-back { flex: 1; background: transparent !important; border: 2px solid #1B2D4E !important; color: #1B2D4E !important; font-size: 13px !important; font-weight: 600 !important; border-radius: 7px !important; padding: 10px 14px !important; text-align: center; transition: all .2s; letter-spacing: .3px; } .cfs-btn-back:hover { background: #1B2D4E !important; color: #ffffff !important; transform: translateY(-1px); } /* Pay Now — navy solid (brand CTA, consistent with Proceed to Payment) */ .cfs-btn-pay, #submit_button { flex: 2; background: linear-gradient(135deg, #1B2D4E 0%, #243D64 100%) !important; border: none !important; color: #fff !important; font-weight: 700 !important; font-size: 13px !important; border-radius: 7px !important; padding: 10px 16px !important; box-shadow: 0 4px 14px rgba(27,45,78,.3); transition: all .2s; letter-spacing: .4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cfs-btn-pay:hover:not([disabled]), #submit_button:hover:not([disabled]) { background: linear-gradient(135deg, #0D1F3C 0%, #1B2D4E 100%) !important; transform: translateY(-2px); box-shadow: 0 8px 22px rgba(27,45,78,.4); color: #fff !important; } #submit_button:disabled, .cfs-btn-pay:disabled { background: linear-gradient(135deg, #8A9BB0 0%, #6B7F96 100%) !important; box-shadow: none !important; opacity: .7 !important; cursor: not-allowed; transform: none !important; } /* ── Accept / card logos ── */ .cfs-accept-row { display: flex; align-items: center; gap: 10px; justify-content: flex-end; } .cfs-accept-label { font-size: 11px; color: #8A9BB0; white-space: nowrap; } .cfs-card-logos { max-width: 120px !important; opacity: .8; } /* Terms checkbox (shared) */ .checkbox-container { font-size: 13px !important; font-weight: 500; color: #1B2D4E; cursor: pointer; line-height: 1.6; } .other-pages-checkboxes { padding: 0 !important; } /* ── Responsive ── */ @media (max-width: 767px) { .cfs-btn-row { flex-direction: column; } .cfs-btn-back, .cfs-btn-pay, #submit_button { flex: none; width: 100% !important; } .cfs-accept-row { justify-content: center; margin-top: 12px; } .cfs-section { padding: 14px 16px; } #frmConfirm .row { margin-bottom: 6px; } } /* ============================================================ 10. GLOBAL BUTTONS (blue = action; green = pay) ============================================================ */ .btn { border-radius: 6px !important; font-weight: 600; font-size: 15px; letter-spacing: .4px; transition: all .2s !important; } .btn:hover:not([disabled]) { opacity: 1 !important; transform: translateY(-1px); box-shadow: 0 5px 14px rgba(0,0,0,.16); } .btn:active { transform: translateY(0); } /* Blue primary */ .btn-primary, .btn-success { background: #0068A5 !important; border: none !important; color: #fff !important; box-shadow: 0 3px 10px rgba(0,104,165,.25); } .btn-primary:hover:not([disabled]), .btn-success:hover:not([disabled]) { background: #00527F !important; box-shadow: 0 6px 16px rgba(0,104,165,.35); } /* Default/outline button — no blue */ .btn-default { background: #fff; border: 1.5px solid #D8D3CC !important; color: #4A4A4A; } .btn-default:hover { background: #F7F6F4; border-color: #B8963E !important; color: #B8963E; } /* ============================================================ 11. GLOBAL FORM CONTROLS ============================================================ */ .form-control { border-radius: 6px !important; border-color: #D8D3CC; font-size: 15px; color: #1C1C1E; height: 42px; transition: border-color .2s, box-shadow .2s; } .form-control:focus { border-color: #B8963E !important; box-shadow: 0 0 0 3px rgba(184,150,62,.18) !important; outline: none; } .form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control { background: #F2F0EC !important; border-color: #DDD8D2 !important; color: #767676 !important; cursor: not-allowed; } /* Date-picker */ .daterangepicker td.active, .daterangepicker td.active:hover { background-color: #0068A5 !important; color: #fff !important; } /* ============================================================ 12. TABLES ============================================================ */ .table > thead > tr > th { background: #1C1C1E; color: #fff; font-size: 13px; font-weight: 600; letter-spacing: .6px; text-transform: uppercase; padding: 13px 16px; border: none; } .table > tbody > tr > td { font-size: 14px; padding: 12px 16px; vertical-align: middle; border-color: #EAE6E0; color: #4A4A4A; } .table-striped > tbody > tr:nth-of-type(odd) { background: #F7F6F4; } .table-hover > tbody > tr:hover { background: #F2EFE9; } /* ============================================================ 13. ALERTS ============================================================ */ .alert { border-radius: 7px !important; border-left-width: 4px !important; font-size: 14px; font-weight: 500; } .alert-warning { background: #FFFBEB; border-color: #D4A017; color: #6B4400; } .alert-danger { background: #FEF2F2; border-color: #C0392B; color: #7A1F1F; } .alert-success { background: #F0FBF7; border-color: #1B7F5E; color: #0A3D2B; } /* ============================================================ 14. MODALS ============================================================ */ .modal-content { border-radius: 10px !important; border: none; box-shadow: 0 24px 60px rgba(0,0,0,.28); } .modal-header { background: #1C1C1E; color: #fff; border-radius: 10px 10px 0 0 !important; padding: 16px 24px !important; border-bottom: none; border-left: 4px solid #B8963E; } .modal-header h4, .modal-header .modal-title { color: #fff !important; font-size: 17px; } .modal-header .close { color: #fff !important; opacity: .7; font-size: 24px; } .modal-header .close:hover { opacity: 1; } .modal-body { padding: 24px 28px; font-size: 15px; } .modal-footer { border-top: 1px solid #EAE6E0; padding: 16px 28px; } /* ============================================================ 15. LOADING SPINNER ============================================================ */ #loadingImage1, #loadingImage2 { padding: 48px; background: #fff; border-radius: 10px; border: 1px solid #E2DED8; margin: 24px 0; text-align: center; } #loadingImage1 h5, #loadingImage2 h5 { font-size: 15px; color: #4A4A4A; margin-top: 14px; } /* ============================================================ 16. WELLS / CARDS ============================================================ */ .well { background: #F7F6F4; border-color: #E2DED8; border-radius: 7px !important; } .background-white { background: #fff !important; border-radius: 7px !important; padding: 18px !important; } /* ============================================================ 17. FOOTER ============================================================ */ .main-footer { background: #ffffff; border-top: 2px solid #E2DED8; } .main-footer h4, .main-footer h2 { color: #1C1C1E !important; } .main-footer h2 a { color: #B8963E !important; } .main-footer p[style*="color:#002357"], .main-footer span[style*="color:#002357"], .main-footer a[style*="color:#002357"] { color: #1C1C1E !important; } .footer-grid-item img { border-radius: 10px !important; box-shadow: 0 4px 16px rgba(0,0,0,.1); transition: transform .4s, box-shadow .4s !important; } .footer-grid-item img:hover { transform: translateY(-5px) scale(1.02) !important; box-shadow: 0 14px 32px rgba(0,0,0,.2) !important; } /* ============================================================ 18. PAYMENT FAIL PAGE ============================================================ */ .payment-fail-card { background: #fff; border-radius: 12px; border: 1px solid #F5C6C6; box-shadow: 0 8px 36px rgba(192,57,43,.12); overflow: hidden; max-width: 640px; margin: 40px auto 60px; } .payment-fail-header { background: linear-gradient(135deg, #7A1F1F 0%, #C0392B 100%); padding: 40px; text-align: center; } .payment-fail-header .fa { font-size: 56px; color: #fff; margin-bottom: 16px; display: block; } .payment-fail-header h2 { color: #fff !important; font-size: 1.9rem; margin: 0; } .payment-fail-body { padding: 36px 42px; text-align: center; font-size: 15px; } /* ============================================================ 19. MISC ============================================================ */ hr { border-color: #E2DED8 !important; margin: 16px 0 !important; } .img-thumbnail { border: 1px solid transparent !important; background: transparent !important; } ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: #F7F6F4; } ::-webkit-scrollbar-thumb { background: #B8963E; border-radius: 3px; } /* ============================================================ 20. RESPONSIVE ============================================================ */ @media only screen and (max-width: 1199px) { #header02 .custom-margin-header > .col-lg-5 { flex: 0 0 43%; max-width: 43%; } #header02 .custom-margin-header > .col-lg-2 { flex: 0 0 14%; max-width: 14%; } #header02 .header-top-navigations { padding: 6px 9px !important; font-size: 12px !important; letter-spacing: .9px; } } @media only screen and (min-width: 768px) { #header02 .custom-margin-header { flex-wrap: nowrap !important; } #header02 .custom-margin-header > [class*="col-"] { float: none !important; } } @media only screen and (max-width: 991px) { .page-inner-banner-wrap .background-image-booking-common { height: 275px !important; min-height: 275px !important; max-height: 275px !important; } .page-inner-banner-wrap .topic-headers h2 { font-size: 1.9rem !important; } .alwaysOnPageTop { position: relative !important; top: 0 !important; } .selectedRoomArea { margin-top: 28px; } .single-room-view .carousel-inner .item img { height: 220px !important; } } @media only screen and (max-width: 767px) { body { font-size: 14px !important; } #header02 { min-height: 64px !important; padding: 0 !important; } .page-inner-banner-wrap .background-image-booking-common { height: 235px !important; min-height: 235px !important; max-height: 235px !important; } .page-inner-banner-wrap .topic-headers { padding-top: 72px !important; } .page-inner-banner-wrap .topic-headers h2 { font-size: 1.5rem !important; letter-spacing: 1px; } .page-inner-banner-wrap .topic-headers span { font-size: .9rem !important; } .csc-widget-bar { padding: 12px 0 10px; } .single-room-view .carousel-inner .item img { height: 200px !important; } .single-room-view .background-white { padding: 16px !important; } .theme-background-color-05 { padding: 12px 18px !important; } #frmConfirm .row { padding: 0 14px; } #submit_button, .data-btn-proceed { font-size: 14px !important; padding: 12px !important; } } @media only screen and (max-width: 420px) { .page-inner-banner-wrap .background-image-booking-common { height: 205px !important; min-height: 205px !important; max-height: 205px !important; } .page-inner-banner-wrap .topic-headers h2 { font-size: 1.25rem !important; } } @media print { .no-print, .btn { display: none !important; } body { background: #fff !important; } } /* ============================================================ 21. ROOMS PAGE — SECTION HEADERS & LAYOUT (UPDATED) ============================================================ */ .rooms-main-col { min-height: 500px; } .rooms-sidebar-col { } /* Section header bar above room list */ .rooms-section-header { display: flex; align-items: center; gap: 12px; background: linear-gradient(135deg, #1B2D4E 0%, #243D64 100%); color: #ffffff; padding: 14px 22px; border-radius: 7px; border-left: 5px solid #B8963E; box-shadow: 0 4px 18px rgba(27,45,78,.28); margin-bottom: 28px; } .rooms-section-icon { font-size: 18px; color: #B8963E; } .rooms-section-title { font-size: 0.95rem !important; letter-spacing: 2px; text-transform: uppercase; color: #ffffff !important; } /* Alert inside rooms */ .rooms-alert { margin-bottom: 20px; } /* Loading spinner block */ .rooms-loading { text-align: center; padding: 48px 24px; background: #FAFBFD; border: 1px solid #C8D6E8; border-radius: 10px; margin-bottom: 24px; } .rooms-loading img { width: 72px; margin: 0 auto 14px; display: block; } .rooms-loading p { font-size: 14px; color: #767676; margin: 0; } .rooms-loading--sm { padding: 28px 16px; } .rooms-loading--sm img { width: 48px; margin-bottom: 10px; } .rooms-loading--sm p { font-size: 13px; } /* Sidebar sticky wrapper */ .rooms-sidebar-sticky { position: relative; } /* Sidebar section heading strip */ .rooms-sidebar-header { border-radius: 10px 10px 0 0 !important; margin-bottom: 0 !important; font-size: 0.85rem !important; letter-spacing: 1.8px; text-transform: uppercase; } .rooms-sidebar-header i { color: #B8963E; } /* ============================================================ 22. REDESIGNED ROOM CARD (rc-* prefix) Larger fonts, clearer hierarchy, more breathing room ============================================================ */ /* ── Card body: gallery LEFT + info RIGHT ── */ .rc-body { display: flex; flex-direction: row; align-items: stretch; } /* Gallery column (~28%) — compact */ .rc-gallery { flex: 0 0 28%; max-width: 28%; position: relative; overflow: hidden; min-height: 230px; } .rc-gallery .carousel { height: 100%; min-height: 230px; } .rc-gallery .carousel-inner { height: 100%; } .rc-gallery .carousel-inner .item { height: 100%; background: #EAE8E4; min-height: 230px; } .rc-gallery .carousel-inner .item img { width: 100% !important; height: 230px !important; object-fit: cover !important; border-radius: 0 !important; display: block; } /* Info column (~72%) — compact padding */ .rc-info { flex: 1; padding: 16px 20px; display: flex; flex-direction: column; gap: 8px; min-width: 0; } /* ── Room name + availability badge ── */ .rc-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; } .rc-name { font-size: 1.45rem !important; color: #1C1C1E !important; margin: 0 !important; line-height: 1.2; flex: 1; letter-spacing: 0.5px; } /* Availability badges */ .rc-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; border-radius: 20px; padding: 3px 10px; white-space: nowrap; flex-shrink: 0; margin-top: 4px; } .rc-badge--avail { background: #E0F5EC; color: #155F42; border: 1.5px solid #8ECFB5; } .rc-badge--unavail { background: #FEF0F0; color: #9B2020; border: 1.5px solid #F5AAAA; } /* ── Price block — gold left-border, compact ── */ .rc-price-block { background: #FDFBF7; border-left: 4px solid #B8963E; border-radius: 0 6px 6px 0; padding: 8px 14px; box-shadow: 0 1px 6px rgba(184,150,62,.1); } .rc-price-row { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; } .rc-price-from { font-size: 11px; font-weight: 700; color: #A89880; text-transform: uppercase; letter-spacing: .5px; } .rc-price-value { font-size: 1.65rem !important; font-weight: 800 !important; color: #1C1C1E !important; line-height: 1; font-family: 'Poppins', sans-serif !important; } .rc-price-per { font-size: 13px; color: #767676; font-weight: 500; } .rc-price-incl { font-size: 12px !important; color: #1B7F5E !important; margin: 4px 0 0 !important; font-weight: 600; } /* ── Description — compact, 2-line clamp ── */ .rc-desc { font-size: 12px !important; color: #3D3D3D; line-height: 1.55; margin: 0 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ── Options group (meal plans) ── */ /* ── Inline selections row inside rc-info (Room Type + Meal Plan) ── */ .rc-info-selections { display: flex; flex-wrap: wrap; gap: 16px 24px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #E8E4DE; } .rc-sel-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .rc-options-group { margin-top: 4px; } .rc-option-heading { font-size: 11px; font-weight: 700; color: #5A5A5A; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 6px; display: flex; align-items: center; gap: 5px; } /* Meal plan pills */ .rc-meal-pills { display: flex; flex-wrap: wrap; gap: 6px; } .rc-meal-pill { cursor: pointer; margin: 0 !important; position: relative; display: inline-block; } .rc-meal-pill input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; } .rc-pill-label { display: inline-block; padding: 5px 14px; border: 1.5px solid #D8D3CC; border-radius: 20px; font-size: 12px; font-weight: 600; color: #3D3D3D; background: #fff; transition: all .2s; cursor: pointer; white-space: nowrap; user-select: none; letter-spacing: .2px; } .rc-meal-pill input[type="radio"]:checked + .rc-pill-label { background: #B8963E; border-color: #B8963E; color: #fff; box-shadow: 0 4px 12px rgba(184,150,62,.4); } .rc-meal-pill:hover .rc-pill-label { border-color: #B8963E; color: #B8963E; background: #FBF9F6; } .rc-meal-pill input[type="radio"]:checked + .rc-pill-label:hover { color: #fff; } /* ───────────────────────────────────────────────────────────── FOOTER PANEL ─ ROOM TYPES | PRICE + QTY + RESERVE ───────────────────────────────────────────────────────────── */ /* Slim action bar */ .rc-footer { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; border-top: 2px solid #E8E4DE; background: linear-gradient(180deg, #F9F8F6 0%, #F4F2EE 100%); border-radius: 0 0 12px 12px; padding: 10px 18px; } /* Room types column (left) */ .rc-footer-types { flex: 1; padding: 14px 18px; border-right: 2px solid #E8E4DE; } /* Meal plan column (centre — between room types and CTA) */ .rc-footer-meals { flex: 0 0 auto; min-width: 180px; padding: 14px 18px; border-right: 2px solid #E8E4DE; } .rc-type-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; } /* Room type card */ .rc-type-card { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; padding: 8px 12px 8px 34px !important; background: #fff; border: 1.5px solid #E2DED8; border-radius: 8px; cursor: pointer; position: relative; transition: border-color .2s, background .2s, box-shadow .2s; min-width: 110px; margin: 0 !important; box-shadow: 0 1px 3px rgba(0,0,0,.05); } .rc-type-card input[type="radio"] { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; accent-color: #B8963E; cursor: pointer; } .rc-type-card:hover { border-color: #B8963E; background: #FDFBF7; box-shadow: 0 3px 10px rgba(184,150,62,.18); } .rc-type-card.rc-type-unavail { opacity: .5; cursor: not-allowed; background: #F2F0EC; } .rc-type-name { font-size: 13px; font-weight: 700; color: #1C1C1E; line-height: 1.2; } .rc-type-unavail-note { font-size: 10px; color: #C0392B; font-weight: 600; } .rc-type-pax { font-size: 11px; color: #767676; margin-top: 1px; font-weight: 500; display: flex; align-items: center; gap: 2px; } .rc-type-pax .fa { font-size: 10px; color: #B8963E; } /* Cancellation link */ .rc-cancel-link { font-size: 13px !important; color: #767676 !important; font-weight: 600; text-decoration: underline; text-decoration-color: #C8C0B6; cursor: pointer; display: inline-block; margin-top: 4px; } .rc-cancel-link:hover { color: #B8963E !important; text-decoration-color: #B8963E; } /* CTA column (right) — compact */ /* Inline CTA row: price | qty | reserve */ .rc-footer-cta { flex: 0 0 auto; padding: 0; display: flex; align-items: center; gap: 10px; background: transparent; border-radius: 0; text-align: left; } /* Price in slim CTA bar */ .rc-cta-price { display: flex; align-items: baseline; gap: 4px; } .rc-cta-amount { font-size: 1.1rem !important; font-weight: 800 !important; color: #1C1C1E !important; display: inline; line-height: 1.2; font-family: 'Poppins', sans-serif !important; } .rc-cta-per { font-size: 11px !important; font-weight: 600; color: #1B7F5E !important; display: inline; white-space: nowrap; } .rc-cta-incl { display: none; } /* redundant — already shown in rc-price-block */ /* ── Qty stepper ───────────────────────────────────────────── Pill-shaped [ ROOMS − 1 + ] — all segments 38 px tall ─────────────────────────────────────────────────────────── */ .rc-qty-group { display: flex; align-items: stretch; height: 38px; border: 1.5px solid #C8C0B6; border-radius: 8px; overflow: hidden; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.08); } /* "ROOMS" text — first segment of the pill */ .rc-qty-label { display: flex; align-items: center; padding: 0 11px; font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #1B2D4E; background: #EEF0F5; border-right: 1.5px solid #C8C0B6; white-space: nowrap; user-select: none; } /* − and + buttons */ .rc-qty-btn { width: 32px; border: none; background: #F4F2EE; color: #1B2D4E; font-size: 18px; font-weight: 400; line-height: 1; cursor: pointer; transition: background .15s, color .15s; flex-shrink: 0; padding: 0; display: flex; align-items: center; justify-content: center; user-select: none; } .rc-qty-btn:hover { background: #E4E0D8; color: #B8963E; } .rc-qty-btn:active { background: #D4CFC7; } /* Number input — centre segment */ .rc-qty-input { width: 46px !important; text-align: center !important; border: none !important; border-left: 1.5px solid #C8C0B6 !important; border-right: 1.5px solid #C8C0B6 !important; border-radius: 0 !important; height: 100% !important; font-size: 15px !important; font-weight: 700 !important; color: #1B2D4E !important; background: #fff !important; padding: 0 !important; box-shadow: none !important; outline: none !important; -moz-appearance: textfield !important; } .rc-qty-input::-webkit-outer-spin-button, .rc-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .rc-qty-input:focus { background: #FFFDF7 !important; border-left-color: #B8963E !important; border-right-color: #B8963E !important; } /* ── Reserve button ────────────────────────────────────────── */ .rc-btn-reserve { height: 38px !important; padding: 0 22px !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 1.2px !important; border-radius: 8px !important; background: #1B2D4E !important; /* CSC navy */ border: none !important; color: #fff !important; box-shadow: 0 3px 12px rgba(27,45,78,.30) !important; transition: background .22s, box-shadow .22s, transform .18s !important; text-transform: capitalize; white-space: nowrap; width: auto !important; display: inline-flex !important; align-items: center !important; gap: 6px !important; } .rc-btn-reserve:hover:not([disabled]) { background: #B8963E !important; /* CSC gold on hover */ box-shadow: 0 6px 18px rgba(184,150,62,.40) !important; transform: translateY(-1px) !important; } .rc-btn-reserve:active:not([disabled]) { transform: translateY(0) !important; box-shadow: 0 2px 6px rgba(184,150,62,.35) !important; } .rc-btn-unavail { background: #C8C0B6 !important; cursor: not-allowed; box-shadow: none !important; opacity: .8; } /* Rate detail table */ .rc-rate-table-wrap { padding: 0 16px 14px; } /* Gap between cards */ .rc-card-gap { height: 14px; } /* Promotion card */ .single-room-view.room-card--promotion { border: 2px solid #B8963E !important; box-shadow: 0 6px 28px rgba(184,150,62,.22) !important; } /* ============================================================ 23. SELECTED ROOMS SIDEBAR (sr-* prefix) ============================================================ */ .sr-wrapper { padding: 16px; } /* ── Proceed button ── */ .sr-proceed-row { margin-bottom: 14px; } .sr-proceed-btn { width: 100% !important; text-align: center; display: flex !important; align-items: center; justify-content: center; gap: 8px; font-size: 13px !important; font-weight: 700 !important; padding: 12px 16px !important; letter-spacing: .5px; } /* ── Warning alert ── */ .sr-alert { font-size: 12px; background: #FFF8E6 !important; border: 1px solid #F0C040 !important; color: #7A5800 !important; border-radius: 6px !important; } .sr-alert strong { color: #5C4000 !important; } /* ── Individual room item card ── */ .sr-item { background: #F3F7FC; border: 1px solid #D6E4F0; border-radius: 8px; padding: 10px; margin-bottom: 10px; } .sr-item-row { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; } .sr-item-img { width: 66px !important; height: 52px !important; max-width: 66px !important; object-fit: cover; border-radius: 6px; flex-shrink: 0; border: 1px solid #C8D6E8 !important; } .sr-item-img-wrap { flex-shrink: 0; } .sr-item-meta { flex: 1; display: flex; flex-direction: column; min-width: 0; } .sr-item-name { font-size: 12px !important; font-weight: 600 !important; color: #1B2D4E !important; line-height: 1.4; margin-bottom: 2px !important; text-transform: capitalize; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ── Mini rate table ── */ .sr-item-table { font-size: 11px !important; margin-bottom: 0 !important; } .sr-item-table > thead > tr > th { font-size: 10px !important; font-weight: 700 !important; text-transform: uppercase; letter-spacing: .3px; color: #5A6B80 !important; background: #E8F0FA !important; padding: 5px 6px !important; border-color: #C8D6E8 !important; } .sr-item-table > tbody > tr > td { font-size: 11px !important; padding: 5px 6px !important; color: #4A5568; border-color: #DDE6F0; background: transparent !important; } /* Sub-total per room — navy bold */ .sr-item-amount { font-weight: 700 !important; color: #1B2D4E !important; font-size: 12px !important; } /* ── Remove button ── */ .sr-remove-form { margin: 0; } .sr-remove-btn { background: none !important; border: none !important; color: #C0392B !important; font-size: 13px; padding: 0 !important; margin-left: auto; display: block; transition: transform .15s, color .15s; } .sr-remove-btn:hover { color: #922B21 !important; transform: scale(1.15); } /* ── Dividers ── */ .sr-wrapper hr { border-color: #DDE6F0 !important; margin: 6px 0 !important; } /* ── Total row ── */ .sr-total-row { display: flex; justify-content: space-between; align-items: center; background: #EEF2F7; border-radius: 8px; padding: 12px 14px; margin: 14px 0 12px; border: 1px solid #C8D6E8; } .sr-total-label { font-size: 11px; font-weight: 700; color: #5A6B80; text-transform: uppercase; letter-spacing: .8px; } .sr-total-value { font-size: 1.1rem; font-weight: 800; color: #1B2D4E; border-bottom: 2px solid #B8963E; padding-bottom: 2px; } /* ── Member / promo note ── */ .sr-promo-note { font-size: 11px; color: #1B7F5E; background: #EAFAF3; border-left: 3px solid #1B7F5E; border-radius: 0 4px 4px 0; padding: 5px 8px; margin-bottom: 10px; } /* ── Empty state ── */ .sr-empty-note { font-size: 13px; color: #8A9BB0; line-height: 1.7; padding: 24px 0; text-align: center; } /* ── Footnotes ── */ .sr-footnotes { margin-top: 14px; padding-top: 12px; border-top: 1px solid #DDE6F0; } .sr-child-note { font-size: 11px; color: #922B21; background: #FFF5F5; border-left: 3px solid #C0392B; border-radius: 0 4px 4px 0; padding: 7px 10px; display: block; line-height: 1.5; } .sr-child-note .fa { margin-right: 4px; } /* ============================================================ 24. RESPONSIVE — ROOM CARD ============================================================ */ @media only screen and (max-width: 1199px) { .rc-info { padding: 14px 18px; } } @media only screen and (max-width: 991px) { /* Stack gallery above info */ .rc-body { flex-direction: column; } .rc-gallery, .rc-gallery .carousel, .rc-gallery .carousel-inner, .rc-gallery .carousel-inner .item { flex: none; max-width: 100%; min-height: 200px; } .rc-gallery .carousel-inner .item img { height: 200px !important; } .rc-info { padding: 14px 18px; gap: 8px; } /* Footer slim bar — allow wrap on tablet */ .rc-footer { padding: 10px 14px; } .rc-info-selections { gap: 12px 18px; } } @media only screen and (max-width: 767px) { .rc-gallery .carousel-inner .item img { height: 180px !important; } .rc-info { padding: 12px 14px; gap: 6px; } .rc-name { font-size: 1.25rem !important; } .rc-price-value { font-size: 1.45rem !important; } .rc-footer { padding: 8px 12px; } .rc-info-selections { gap: 10px 14px; } .rc-type-grid { gap: 6px; } .rc-type-card { min-width: 100px; } .rc-cta-amount { font-size: 1rem !important; } } /* ============================================================ 25. FOOTER REDESIGN ============================================================ */ .main-footer { background: #0D1421; color: #ffffff; margin-top: 0; padding: 0; border-top: none; } /* Gold accent stripe at very top */ .footer-accent-bar { height: 4px; background: linear-gradient(90deg, #B8963E 0%, #D4AF57 50%, #B8963E 100%); } /* ── Gallery image strip ── */ .footer-gallery-strip { display: flex; flex-wrap: nowrap; overflow: hidden; width: 100%; } .footer-gallery-item { flex: 1 1 0; position: relative; overflow: hidden; display: block; text-decoration: none !important; min-height: 190px; } .footer-gallery-item img { width: 100%; height: 190px; object-fit: cover; display: block; transition: transform 0.45s ease, filter 0.45s ease; filter: brightness(0.65); } .footer-gallery-item:hover img { transform: scale(1.07); filter: brightness(0.45); } .footer-gallery-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 14px 10px 12px; background: linear-gradient(transparent, rgba(0,0,0,0.72)); text-align: center; pointer-events: none; } .footer-gallery-name { color: #ffffff; font-family: 'Italiana', serif; font-size: 14px; letter-spacing: 1.5px; text-transform: uppercase; display: block; } /* ── Main footer body ── */ .footer-body { padding: 48px 0 36px; border-bottom: 1px solid rgba(184,150,62,0.25); } .footer-columns { display: flex; align-items: flex-start; } /* Column heading */ .footer-col-title { font-family: 'Italiana', serif; color: #B8963E; font-size: 17px; letter-spacing: 2.5px; text-transform: uppercase; margin: 0 0 16px; padding-bottom: 10px; border-bottom: 1px solid rgba(184,150,62,0.35); display: inline-block; } /* Left column — contact */ .footer-col--contact .footer-contact-item { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-family: 'Poppins', sans-serif; font-size: 14px; color: rgba(255,255,255,0.75); } .footer-col--contact .footer-contact-item i { color: #B8963E; width: 16px; flex-shrink: 0; } .footer-col--contact .footer-contact-item a { color: rgba(255,255,255,0.82); text-decoration: none; transition: color 0.2s; } .footer-col--contact .footer-contact-item a:hover { color: #D4AF57; } /* Centre column — logo */ .footer-col--logo { text-align: center; } .footer-logo-img { width: 165px; max-width: 100%; margin-bottom: 14px; display: inline-block; } .footer-logo-tagline { font-family: 'Poppins', sans-serif; font-size: 11.5px; color: rgba(255,255,255,0.45); line-height: 1.65; margin: 0; font-style: italic; letter-spacing: 0.4px; } /* Right column — social */ .footer-col--social { text-align: right; } .footer-social-handle { font-family: 'Italiana', serif; color: rgba(255,255,255,0.65); font-size: 15px; margin-bottom: 18px; letter-spacing: 1px; } .footer-social-icons { display: flex; gap: 12px; justify-content: flex-end; } .footer-social-link { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(184,150,62,0.45); color: rgba(255,255,255,0.75) !important; font-size: 19px; text-decoration: none !important; transition: background 0.25s, border-color 0.25s, color 0.25s; } .footer-social-link:hover { background: #B8963E; border-color: #B8963E; color: #ffffff !important; } /* ── Copyright bar ── */ .footer-copyright { background: rgba(0,0,0,0.45); padding: 13px 0; text-align: center; } .footer-copyright p { font-family: 'Poppins', sans-serif; font-size: 10.5px; color: rgba(255,255,255,0.35); margin: 0; letter-spacing: 0.3px; } .footer-copyright a { color: rgba(184,150,62,0.65); text-decoration: none; transition: color 0.2s; } .footer-copyright a:hover { color: #B8963E; } /* ── Responsive ── */ @media (max-width: 991px) { .footer-gallery-item img { height: 155px; } .footer-gallery-item { min-height: 155px; } } @media (max-width: 767px) { .footer-gallery-strip { flex-wrap: wrap; } .footer-gallery-item { flex: 0 0 50%; max-width: 50%; } .footer-gallery-item img { height: 130px; } .footer-body { padding: 36px 0 24px; } .footer-col--contact, .footer-col--logo, .footer-col--social { text-align: center !important; margin-bottom: 32px; } .footer-col--logo { margin-bottom: 24px; } .footer-social-icons { justify-content: center; } .footer-col-title { display: block; text-align: center; } .footer-col--contact .footer-contact-item { justify-content: center; } } /* ============================================================ LINE / OUTLINE ICON SYSTEM Converts all Font Awesome 4.x and Bootstrap Glyphicons to stroke/line style. Fill is transparent; the 1 px stroke inherits the element's current colour so existing gold, white, and charcoal icon colours all continue to apply automatically. ============================================================ */ .fa, .glyphicon { -webkit-text-fill-color: transparent; /* hides the solid fill */ -webkit-text-stroke: 1px currentColor; /* traces the glyph outline */ } /* ============================================================ 26. FULL MOBILE RESPONSIVENESS ============================================================ */ /* ── Navbar mobile row — align hamburger vertically with logo ── */ .mobile-hamburger-col { display: flex !important; align-items: center; justify-content: flex-end; padding-right: 18px; } .mobile-menu-row { display: flex; align-items: center; min-height: 68px; } /* ── Booking widget — make all col-md-* stack on small screens ── */ @media only screen and (max-width: 991px) { .bookingWidget .col-md-6, .bookingWidget .col-md-3, .bookingWidget .col-md-5, .bookingWidget .col-md-2, .bookingWidget .col-md-4 { width: 50% !important; float: left !important; } .bookingWidget .col-md-12 { width: 100% !important; } } @media only screen and (max-width: 575px) { .bookingWidget .col-md-6, .bookingWidget .col-md-3, .bookingWidget .col-md-5, .bookingWidget .col-md-2, .bookingWidget .col-md-4 { width: 100% !important; float: none !important; } .bookingWidget .controller-container { margin-bottom: 6px; } .bookingWidget .well { padding: 16px !important; } #pinFieldContainer { margin-top: 4px; } } /* ── Widget search button — full width on mobile ── */ @media only screen and (max-width: 575px) { .bookingWidget .btn-block-xs { width: 100% !important; margin-top: 6px; } /* Make the search / check availability button full width */ .bookingWidget .col-md-2.controller-container:last-of-type, .bookingWidget .col-md-3.controller-container:last-of-type { width: 100% !important; } } /* Hero text scaling handled entirely in section 27 below */ /* ── Rooms page — full-width on tablet/mobile ── */ @media only screen and (max-width: 991px) { .rooms-main-col, .rooms-sidebar-col { width: 100% !important; float: none !important; padding: 0 15px !important; } .rooms-sidebar-col { margin-top: 28px; } .alwaysOnPageTop { position: relative !important; top: 0 !important; } .rooms-section-header { margin-bottom: 18px; } } /* ── Rooms page — section header font ── */ @media only screen and (max-width: 575px) { .rooms-section-title { font-size: 0.8rem !important; letter-spacing: 1.5px; } .rooms-section-header { padding: 10px 14px; } } /* ── Confirm page — stack columns on mobile ── */ @media only screen and (max-width: 767px) { .confirm-page-wrap .col-md-5, .confirm-page-wrap .col-md-7 { width: 100% !important; float: none !important; padding: 0 10px !important; } .confirm-page-wrap .col-md-7 { margin-top: 20px; } .confirm-card { margin-bottom: 0; border-radius: 10px; } .confirm-row { margin: 0; } .cfs-section { padding: 14px 16px; } .cfs-btn-row { flex-direction: column; gap: 10px; } .cfs-btn-back, .cfs-btn-pay { width: 100% !important; text-align: center; } .cfs-pay-option { width: 100%; } .inner-page-container.confirm-page-wrap { padding: 16px 10px !important; } } /* ── Confirm page — form fields full width on xs ── */ @media only screen and (max-width: 575px) { .confirm-page-wrap .col-md-2, .confirm-page-wrap .col-md-5, .confirm-page-wrap .col-md-7, .confirm-page-wrap .col-md-6, #frmConfirm .col-md-2, #frmConfirm .col-sm-2, #frmConfirm .col-md-5, #frmConfirm .col-sm-5, #frmConfirm .col-md-7, #frmConfirm .col-sm-7, #frmConfirm .col-md-6, #frmConfirm .col-sm-6 { width: 100% !important; float: none !important; } #frmConfirm .row { margin: 0; } } /* ── Inner page banner — mobile ── */ @media only screen and (max-width: 767px) { .page-inner-banner-wrap { margin-bottom: 0; } .csc-widget-bar { padding: 10px 0 8px; } .csc-widget-bar .well { border-radius: 0 !important; margin-bottom: 0 !important; } .inner-page-container { padding-top: 20px !important; padding-bottom: 20px !important; } } /* ── Landing page welcome + gallery sections ── */ @media only screen and (max-width: 767px) { .welcome-margin { padding-top: 32px !important; } .section_padding { padding: 20px 10px !important; } .gallery .img-w { width: 50% !important; } h1.font-family-01 { font-size: 1.5rem !important; } .tagline { font-size: 1rem !important; } } @media only screen and (max-width: 420px) { .gallery .img-w { width: 100% !important; } h1.font-family-01 { font-size: 1.25rem !important; } } /* ── Desktop welcome grid images — hide on mobile ── */ @media only screen and (max-width: 767px) { .desktop_view { display: none !important; } } /* ── Selected rooms sidebar — compact on mobile ── */ @media only screen and (max-width: 575px) { .sr-wrapper { padding: 10px; } .sr-item { padding: 8px; } .sr-item-img { width: 52px !important; height: 42px !important; max-width: 52px !important; } .sr-total-row { padding: 10px 12px; } .sr-total-value { font-size: 1rem; } .sr-proceed-btn { font-size: 13px !important; padding: 10px 14px !important; } } /* ── Payment fail page — mobile ── */ @media only screen and (max-width: 575px) { .payment-fail-header { padding: 28px 18px; } .payment-fail-body { padding: 24px 18px; font-size: 14px; } } /* ── Modal dialog — mobile ── */ @media only screen and (max-width: 575px) { .modal-dialog { margin: 10px !important; } .modal-body { max-height: 70vh !important; padding: 12px !important; } .modal-title { font-size: 15px; } } /* ── Typography scaling ── */ @media only screen and (max-width: 767px) { .website-header-font-style { letter-spacing: .5px !important; } .website-body-font-style { font-size: 13px !important; line-height: 1.65 !important; } p { font-size: 13px !important; } } /* ── Buttons — comfortable touch targets on mobile ── */ @media only screen and (max-width: 575px) { .btn { min-height: 42px; } #submit_button, .data-btn-proceed, .cfs-btn-pay, .cfs-btn-back { font-size: 13px !important; padding: 11px 16px !important; } } /* ── Booking widget bar on confirm/rooms pages ── */ @media only screen and (max-width: 767px) { .csc-widget-bar .container { padding: 0 8px; } .gradientBg { padding: 14px 10px !important; } .stay-landscape { padding: 14px !important; } } /* ============================================================ 27. LANDING PAGE (STAY) — HERO RESPONSIVE ============================================================ */ /* ── Desktop: restore the original layered overlay positioning ── */ .hero-text-block { margin-top: 100px; margin-bottom: -120px; } .hero-widget-block { margin-top: -100px; margin-bottom: 75px; } /* ── Tablet ≤991px ── */ @media only screen and (max-width: 991px) { .hero-text-block { margin-top: 60px; margin-bottom: -80px; } .hero-widget-block { margin-top: -60px; margin-bottom: 40px; } .home-hero .links { top: 260px !important; } } /* ── Mobile ≤767px: stack video → dark text band → widget ── */ @media only screen and (max-width: 767px) { /* 1. Video — constrained height, no forced 100vh or -150px offset */ section.home-hero video { height: auto !important; min-height: 240px !important; max-height: 48vw !important; /* keeps ~16:9 feel on portrait */ margin-top: 0 !important; object-fit: cover !important; width: 100% !important; display: block !important; } /* 2. Hero wrapper — vertical stack */ section.home-hero { min-height: 0 !important; display: block !important; overflow: hidden !important; } /* 3. Dark gradient overlay — restrict to video portion only */ section.home-hero::before { height: 48vw !important; top: 0 !important; bottom: auto !important; } /* 4. Links panel — leave absolute, become a solid dark band */ .home-hero .links { position: relative !important; top: auto !important; bottom: auto !important; width: 100% !important; background: #0D1421 !important; padding: 22px 0 18px !important; z-index: 2; } /* 5. Slider-text-container — neutralise ALL style.css negative margins */ .slider-text-container, .hero-text-block { margin-top: 0 !important; margin-bottom: 16px !important; padding: 0 20px !important; } /* 6. style.css: .slider-text { top: -150px } — reset it */ .home-hero .slider-text { position: static !important; top: auto !important; text-align: center !important; } /* 7. style.css ≤600px: .title-text { font-size:6em; line-height:0.8em } 6em ≈ 96px with 0.8 line-height = lines physically overlap each other */ .home-hero .title-text, .home-hero .hero-title { font-size: 8vw !important; line-height: 1.25 !important; color: #ffffff !important; margin-top: 0 !important; margin-bottom: 6px !important; white-space: normal !important; /* allow wrapping on narrow screens */ } /* 8. style.css ≤400px: div .mobile_view { margin-top:-200px } — reset */ .home-hero div.mobile_view { margin-top: 0 !important; padding-bottom: 0 !important; } /* 9. Eyebrow and subtitle */ .home-hero .hotel-text { font-size: 2.8vw !important; letter-spacing: 4px !important; color: #ffffff !important; margin-bottom: 8px !important; } .home-hero .hero-subtitle { font-size: 3.5vw !important; color: rgba(255,255,255,.8) !important; margin-top: 4px !important; } /* 10. Widget wrapper — flush margins */ .hero-widget-block { margin-top: 0 !important; margin-bottom: 0 !important; } /* 11. Shadow decorative image not needed when stacked */ .hero-widget-block img[src*="shadow"], .home-hero img[src*="shadow"] { display: none !important; } /* 12. Widget form — light style on dark background */ .home-hero .well, .home-hero .gradientBg { background: transparent !important; border: none !important; box-shadow: none !important; padding-top: 0 !important; padding-bottom: 0 !important; } .home-hero .form-control { background: rgba(255,255,255,.13) !important; border: 1px solid rgba(255,255,255,.28) !important; color: #ffffff !important; } .home-hero .form-control::placeholder { color: rgba(255,255,255,.5) !important; } .home-hero .control-label { color: rgba(255,255,255,.8) !important; } /* 13. Welcome section gap — style.css sets 200px on mobile */ .welcome-margin { margin-top: 0 !important; } } /* ── Small phones ≤480px ── */ @media only screen and (max-width: 480px) { section.home-hero video { min-height: 200px !important; max-height: 56vw !important; } .home-hero .title-text, .home-hero .hero-title { font-size: 7vw !important; } .home-hero .hero-subtitle { font-size: 3.8vw !important; } .home-hero .hotel-text { font-size: 2.5vw !important; } /* Belt-and-braces re-assert the mobile_view reset at ≤400px */ .home-hero div.mobile_view { margin-top: 0 !important; padding-bottom: 0 !important; font-size: 7vw !important; line-height: 1.25 !important; } }