/* ============================================================ JK GRAM — Theme Enhancement Layer (additive, override-only) Loaded LAST in . Remove the to fully revert. Built on the existing brand identity: emerald green + deep navy. ============================================================ */ :root{ --je-green: #23b183; --je-green-2: #159c8a; /* teal end of gradient */ --je-green-deep: #0e8f6b; --je-navy: #152a49; /* matches footer */ --je-navy-2: #0e1f3a; --je-ink: #1e2a37; --je-muted: #6b7787; --je-bg: #f5f8fb; --je-gold: #f7b500; --je-grad: linear-gradient(135deg, var(--je-green) 0%, var(--je-green-2) 100%); --je-grad-navy: linear-gradient(135deg, var(--je-navy) 0%, var(--je-navy-2) 100%); --je-shadow-sm: 0 4px 14px rgba(20,40,70,.08); --je-shadow-md: 0 12px 30px rgba(20,40,70,.12); --je-shadow-lg: 0 22px 48px rgba(20,40,70,.18); --je-radius: 16px; } body{ background: var(--je-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; color: var(--je-ink); } /* ---------- Header polish ---------- */ .navbar-area#stickymenu, .navbar-area{ box-shadow: 0 6px 24px rgba(20,40,70,.07); } .navbar-area.is-sticky, .navbar-area .is-sticky{ backdrop-filter: saturate(1.2) blur(6px); } /* ---------- Section heading rhythm ---------- */ .heading{ margin-bottom: 42px; } .heading h2{ font-weight: 800; letter-spacing: -.02em; color: var(--je-navy); position: relative; display: inline-block; padding-bottom: 18px; } .heading h2:after{ content:""; position:absolute; left:50%; bottom:0; transform: translateX(-50%); width: 66px; height: 4px; border-radius: 4px; background: var(--je-grad); } .heading h3{ color: var(--je-muted); font-weight: 400; max-width: 620px; margin: 14px auto 0; } /* ============================================================ HERO / SEARCH SECTION ============================================================ */ .search-section{ background-size: cover; background-position: center; position: relative; } .search-section .bg{ background: linear-gradient(180deg, rgba(14,31,58,.62) 0%, rgba(14,31,58,.80) 100%); } .search-section h1{ font-weight: 800; letter-spacing: -.025em; text-shadow: 0 6px 30px rgba(0,0,0,.35); } .search-section > .container p, .search-section p{ font-size: 1.12rem; opacity: .95; } /* floating glass search card */ .search-section .box{ background: rgba(255,255,255,.96); padding: 16px; border-radius: 20px; box-shadow: var(--je-shadow-lg); border: 1px solid rgba(255,255,255,.6); } .search-section .box .input-box{ gap: 12px; margin-bottom: 0 !important; flex-wrap: wrap; } .search-section .box .form-control{ height: 56px; border-radius: 12px !important; border: 1.5px solid #e6ebf1; background: #fbfdff; font-size: 1rem; transition: border-color .2s, box-shadow .2s; } .search-section .box .form-control:focus{ border-color: var(--je-green); box-shadow: 0 0 0 4px rgba(35,177,131,.15); background:#fff; } /* select2 controls in hero -> match inputs */ .search-section .select2-container--default .select2-selection--single{ height: 56px !important; border-radius: 12px !important; border: 1.5px solid #e6ebf1 !important; background:#fbfdff !important; display:flex; align-items:center; } .search-section .select2-container--default .select2-selection--single .select2-selection__rendered{ line-height: 54px !important; color: var(--je-ink); } .search-section .select2-container--default .select2-selection--single .select2-selection__arrow{ height: 54px !important; } /* search button -> gradient pill */ .search-section .input-group-append button{ background: var(--je-grad) !important; border: none; height: 56px; padding: 0 34px; border-radius: 12px !important; font-weight: 700; letter-spacing: .3px; box-shadow: 0 10px 22px rgba(21,156,138,.35); transition: transform .18s, box-shadow .18s, filter .18s; } .search-section .input-group-append button:hover{ transform: translateY(-2px); filter: brightness(1.05); box-shadow: 0 14px 28px rgba(21,156,138,.45); } /* hero stats / trust strip */ .search-section .hero-stats{ display:flex; justify-content:center; align-items:center; gap: 56px; margin-top: 30px; flex-wrap: wrap; } .search-section .hero-stat{ display:flex; flex-direction:column; align-items:center; color:#fff; position:relative; } .search-section .hero-stat:not(:last-child):after{ content:""; position:absolute; right:-28px; top:50%; transform:translateY(-50%); width:1px; height:36px; background:rgba(255,255,255,.28); } .search-section .hero-stat .hs-num{ font-size: 2rem; font-weight:800; line-height:1; letter-spacing:-.02em; text-shadow: 0 4px 18px rgba(0,0,0,.35); } .search-section .hero-stat .hs-label{ margin-top:7px; font-size:.78rem; font-weight:600; text-transform:uppercase; letter-spacing:1.6px; color: rgba(255,255,255,.82); } @media (max-width:767px){ .search-section .hero-stats{ gap:30px; } .search-section .hero-stat:not(:last-child):after{ right:-15px; height:28px; } .search-section .hero-stat .hs-num{ font-size:1.45rem; } } /* ============================================================ CARDS (villages / categories / locations share the polish) ============================================================ */ .hotel .hotel-item, .popular-city .popular-city-item, .popular-category .popular-category-item{ border-radius: var(--je-radius); overflow: hidden; background:#fff; box-shadow: var(--je-shadow-sm); transition: transform .28s ease, box-shadow .28s ease; } .hotel .hotel-item:hover, .popular-city .popular-city-item:hover, .popular-category .popular-category-item:hover{ transform: translateY(-8px); box-shadow: var(--je-shadow-lg); } /* image zoom on hover */ .hotel .hotel-item .photo, .popular-city .popular-city-item .photo{ overflow: hidden; } .hotel .hotel-item .photo img, .popular-city .popular-city-item .photo img{ transition: transform .5s ease; width:100%; } .hotel .hotel-item:hover .photo img, .popular-city .popular-city-item:hover .photo img{ transform: scale(1.07); } /* Featured ribbon refinement */ .hotel .hotel-item .featured-text{ background: var(--je-grad) !important; font-weight: 700; letter-spacing: .4px; box-shadow: 0 6px 16px rgba(21,156,138,.35); } /* category pill */ .hotel .hotel-item .photo .category a{ background: var(--je-grad) !important; border-radius: 30px; font-weight: 600; letter-spacing: .3px; box-shadow: 0 6px 16px rgba(21,156,138,.30); } /* wishlist heart -> clean circular button */ .hotel .hotel-item .photo .wishlist a{ width: 42px; height: 42px; display:flex; align-items:center; justify-content:center; background:#fff; border-radius: 50%; color: var(--je-navy); box-shadow: var(--je-shadow-sm); transition: background .2s, color .2s, transform .2s; } .hotel .hotel-item .photo .wishlist a i{ color: var(--je-navy) !important; } .hotel .hotel-item .photo .wishlist a:hover{ background: var(--je-grad); color:#fff; transform: scale(1.08); } .hotel .hotel-item .photo .wishlist a:hover i{ color:#fff !important; } /* card title + location */ .hotel .hotel-item .text h3 a{ font-weight: 700; color: var(--je-navy); transition: color .2s; } .hotel .hotel-item .text .review .fa-star, .hotel .hotel-item .text .review .fa-star-half-alt{ color: var(--je-gold); } /* category / location overlay tiles */ .popular-category .popular-category-item .bg, .popular-city .popular-city-item .photo:after{ background: linear-gradient(180deg, rgba(14,31,58,.05) 40%, rgba(14,31,58,.78) 100%); } .popular-category .popular-category-item .text h4, .popular-city .popular-city-item .text h4{ font-weight: 700; letter-spacing: -.01em; } /* ---------- Ad banners ---------- */ .ad-section .inner img{ border-radius: 14px; box-shadow: var(--je-shadow-sm); } /* ============================================================ INNER PAGES (detail / search / auth / faq / sidebars) ============================================================ */ .page-banner{ position:relative; } .page-banner .page-banner-bg{ background: linear-gradient(180deg, rgba(14,31,58,.52), rgba(14,31,58,.80)) !important; } .page-banner h1{ font-weight:800; letter-spacing:-.02em; text-shadow:0 6px 26px rgba(0,0,0,.35); } .page-banner .breadcrumb{ background:transparent; } /* white card treatment for sidebars / filters / forms / faq */ .hotel-filter, .hotel-sidebar .ls-widget, .sidebar .widget, .reg-login-form, .faq .panel{ background:#fff; border-radius: var(--je-radius); box-shadow: var(--je-shadow-sm); border:1px solid rgba(20,40,70,.05); } .hotel-filter .lf-heading{ font-weight:700; color:var(--je-navy); } /* inner-page form inputs */ .reg-login-form .form-control, .hotel-page .form-control{ border-radius: 12px; border:1.5px solid #e6ebf1; transition: border-color .2s, box-shadow .2s; } .reg-login-form .form-control:focus, .hotel-page .form-control:focus{ border-color:var(--je-green); box-shadow:0 0 0 4px rgba(35,177,131,.15); } .reg-login-form .btn, .reg-login-form button[type="submit"]{ background:var(--je-grad) !important; border:none !important; border-radius:12px !important; font-weight:700; box-shadow:0 10px 22px rgba(21,156,138,.30); transition: transform .18s, filter .18s; } .reg-login-form .btn:hover, .reg-login-form button[type="submit"]:hover{ transform: translateY(-2px); filter: brightness(1.05); } /* detail-page section headings */ .hotel-page h2{ color:var(--je-navy); font-weight:800; letter-spacing:-.01em; } /* ============================================================ Buttons (site-wide primary treatment) + footer accents ============================================================ */ .filter-button, .reg-login-form .btn, .btn-theme, button.filter-button{ background: var(--je-grad) !important; border: none !important; border-radius: 12px !important; font-weight: 700; box-shadow: 0 10px 22px rgba(21,156,138,.30); transition: transform .18s, filter .18s; } .filter-button:hover, button.filter-button:hover{ transform: translateY(-2px); filter: brightness(1.05); } /* footer: subtle top accent + social hover lift */ .footer-area, footer{ position: relative; } .footer-social-link ul li a{ transition: transform .2s, box-shadow .2s; border-radius: 10px; } .footer-social-link ul li a:hover{ transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0,0,0,.25); } /* back-to-top button */ .scroll-top{ background: var(--je-grad) !important; border-radius: 12px !important; box-shadow: var(--je-shadow-md); } /* ---------- gentle section entrance spacing ---------- */ .popular-category, .hotel, .popular-city{ padding-top: 70px; padding-bottom: 70px; } @media (max-width: 767px){ .search-section .box .input-box{ gap: 10px; } .search-section .box .form-control, .search-section .input-group-append button, .search-section .select2-container--default .select2-selection--single{ height: 50px; } .heading h2{ font-size: 1.6rem; } }