/* Font loaded via tags in each page's for performance - see fragments.html note */ :root { /* ===================================================================== BRAND PALETTE - single source of truth, updated to the "YatriSutra — Final Brand & UI Design System" (Sept 2026). Every color anywhere on the site should trace back to one of these values; nothing else should be introduced without updating this block first. Do not hardcode any of these hex values directly in a template or another CSS file - reference the variable instead. --primary-navy/--hero-navy/--secondary-navy were three distinct near-black navy shades before this update (#001B3E/#021D40/#002B5C - already barely distinguishable from each other). The new guideline specifies exactly one navy ("Yatri Navy") for header/headings/nav, so all three now resolve to that single approved value rather than inventing tints the guideline doesn't define. The guideline also splits what used to be one background token into two: Light Blue (#F4F8FC, "Sections, Help area") and Soft Cream (#FFFDF8, "Main background"). --light-bg keeps its existing role (section/help-area backgrounds, ~140 call sites via --parchment) since it's nearly identical to the old value already; --main-bg is new and is what 's background now uses for the page canvas. ---- */ --primary-navy: #062B5C; --hero-navy: #062B5C; --secondary-navy: #062B5C; --brand-gold: #FFB800; --gold-hover: #E6A700; --white: #FFFFFF; --search-bg: #FFFFFF; --light-bg: #F4F8FC; --main-bg: #FFFDF8; --text-dark: #062B5C; --text-secondary: #667085; --border: #E6EAF0; --door-accent: #C83B2D; /* ---- CTA color - the color every call-to-action button/active-state on the site should use ("Sutra Orange", per the design system: CTA, buttons, active states). Every .btn on the site updates from this one place. --cta-secondary (paired secondary button, e.g. "Add to Cart"-style dark button next to a red "Buy Now") isn't part of the new guideline as given, so it's left unchanged rather than guessed at. ---- */ --cta-primary: #F56A00; --cta-secondary: #2B2B2B; /* ---- Legacy variable names, kept only so the ~250 existing var(...) references scattered across every template and CSS file automatically resolve to an official palette value above - nothing to hunt down file by file. New CSS should reference the named variables above directly rather than these aliases. ---- */ --ink: var(--primary-navy); --navy-header: var(--primary-navy); --navy-hero: var(--hero-navy); --parchment: var(--light-bg); --charcoal: var(--text-dark); --line: var(--border); --rust: var(--door-accent); --door-red: var(--door-accent); --gold: var(--brand-gold); /* ---- Not part of the brand guideline as given, and left alone rather than guessed at - see chat. --blue-mid (interactive blue) covers 19 spots including admin-nav active states and focus-visible outlines; --sage (teal) covers "verified" checkmarks/tags. The guideline doesn't specify a replacement for either, and darkening focus outlines or link color site-wide without a live browser to verify contrast is a real accessibility risk, not a safe guess to make silently. ---- */ --blue-mid: #0B72D9; --sage: #00A699; /* ===================================================================== TYPE SCALE - desktop values from the design system. Applied below to the SITE-WIDE BASELINE elements only (plain h1-h4, body, .btn, nav links, search-form inputs) - these are the tags/classes with no more specific styling elsewhere. The site has hundreds of page-specific heading/button classes (.hero h1, .top-dest-title, .sr-title, card titles, per-page buttons, etc.) with their own hardcoded font-sizes; resizing every one of those to this scale is a larger follow-up pass that needs visual QA per page, not a safe blind find-replace, so it hasn't been done here - flagged, not silently skipped. ---- */ --fs-h1: 2.5rem; /* 40px, weight 700 */ --fs-h2: 2rem; /* 32px, weight 700 */ --fs-h3: 1.5rem; /* 24px, weight 600 */ --fs-h4: 1.25rem; /* 20px, weight 600 */ --fs-body: 1rem; /* 16px, weight 400 */ --fs-body-sm: 0.875rem; /* 14px, weight 400 */ --fs-nav: 0.9375rem; /* 15px, weight 500 */ --fs-button: 0.9375rem; /* 15px, weight 600 */ --fs-search: 1rem; /* 16px, weight 400 */ --fs-caption: 0.75rem; /* 12px, weight 400 */ } /* Mobile type scale - same tokens, reassigned inside the breakpoint already used elsewhere in this file (700px) so every baseline element using var(--fs-*) picks up the mobile size automatically with no extra media queries at each call site. */ @media (max-width: 700px) { :root { --fs-h1: 1.75rem; /* 28px */ --fs-h2: 1.5rem; /* 24px */ --fs-h3: 1.25rem; /* 20px */ --fs-body: 0.9375rem; /* 15px */ --fs-body-sm: 0.8125rem; /* 13px */ --fs-nav: 0.875rem; /* 14px */ --fs-button: 0.9375rem; /* 15px */ --fs-search: 0.9375rem; /* 15px */ } } * { box-sizing: border-box; } /* Horizontal-scroll guard lives on html, NOT body. Setting overflow-x on body (even to "clip") forces the browser to also give body a computed overflow-y, which turns body itself into the scrolling container instead of the viewport - and that breaks position:sticky for every descendant (nav, mini search bar, section tabs, booking box). Putting it on html instead uses the browser's normal viewport-overflow-propagation rules, so the viewport stays the scroll container and sticky keeps working. */ html { overflow-x: hidden; } body { margin: 0; background: var(--main-bg); color: var(--charcoal); font-family: 'Inter', 'Noto Sans Devanagari', sans-serif; font-size: var(--fs-body); font-weight: 400; line-height: 1.5; } h1, h2, h3, h4, .display { font-family: 'Inter', 'Noto Sans Devanagari', sans-serif; color: var(--ink); margin: 0 0 0.4em; letter-spacing: -0.01em; } h1, h2, .display { font-weight: 700; } h3, h4 { font-weight: 600; } /* Explicit type scale, matching the approved design system (H1 40/700, H2 32/700, H3 24/600, H4 20/600 desktop; smaller via var(--fs-*) under 700px - see :root). Without this, h1-h4 fall back to raw browser defaults, which reads noticeably thinner/smaller than the bold display headlines used elsewhere on the redesigned pages. Individual pages/components with their own more specific classes (.hero h1, .top-dest-title, .sr-title, card titles, etc.) still override this as before - this only sets the baseline for plain h1-h4 tags that don't have one, e.g. the property name and section headers on the details page. */ h1 { font-size: var(--fs-h1); line-height: 1.2; } h2 { font-size: var(--fs-h2); line-height: 1.25; } h3 { font-size: var(--fs-h3); line-height: 1.3; } h4 { font-size: var(--fs-h4); line-height: 1.3; } .eyebrow { display: inline-block; font-family: 'Inter', 'Noto Sans Devanagari', sans-serif; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--blue-mid); } a { color: inherit; text-decoration: none; } .container { max-width: 1160px; margin: 0 auto; padding: 0 24px; } /* ---- Homepage-only: every section on "/" (hero, offers, destinations, featured, etc. - 17 .container usages in index.html) left-aligns to the exact same x-position as the header logo, rather than the site-wide centered 1160px column above. The header (.nav .container) is deliberately full-width with its own fixed padding (see its comment), not the centered column, so matching that here means overriding centering + max-width, not just padding. Scoped to body.home-page specifically - .container is shared by every other page on the site (search results, city pages, guesthouse detail, articles, etc.), which all keep the centered column above untouched. Mobile drops back to the same 16px both .nav .container and this use at the same 560px breakpoint, so alignment holds at every size. */ body.home-page .container { max-width: none; margin: 0; /* padding-left/right only, NOT the padding shorthand - a few sections on this page (.lp-banner, .purpose-strip, .topcity-wrap) set their own padding-top/bottom for vertical spacing, meant to stack on top of the base .container's padding. The shorthand form here would also set padding-top/bottom to 0 at this rule's higher specificity, silently clobbering those sections' vertical spacing instead of just fixing horizontal alignment. */ padding-left: 70px; padding-right: 70px; } @media (max-width: 560px) { body.home-page .container { padding-left: 16px; padding-right: 16px; } } /* Same full-width treatment as the homepage above, for the city page and everything linked to it (city-cluster/how-to-reach sub-pages, locality pages, tourist place pages, the city map) - city-page.html, city-cluster.html, locality-page.html, tourist-place.html, city-map.html all carry this class on . Longhand padding-left/right only, same reasoning as above - a couple of sections on these pages have their own inline padding-top/padding-bottom (city page's hero, locality page's grid section) that this must not clobber. */ body.city-linked-page .container { max-width: none; margin: 0; padding-left: 70px; padding-right: 70px; } @media (max-width: 560px) { body.city-linked-page .container { padding-left: 16px; padding-right: 16px; } } /* Hero content alignment - do not remove. Several hero sections are flex containers (display:flex; flex-direction:column) so their content can be vertically centred. Their child is a .container, which carries margin:0 auto. In flexbox, an auto margin on the CROSS axis beats align-items:stretch - so instead of filling the hero's width, .container shrink-wraps to its widest line and the auto margins centre that shrunken box. The visible symptom is a hero whose breadcrumb/heading/subtitle all sit in a floating block in the middle of the strip rather than starting at the page's normal left gutter, and it gets worse the wider the screen. This is the same family of bug as the earlier align-items:center regression, but switching to flex-direction:column does NOT fix it on its own, because the auto margins are the actual cause. Giving the container an explicit width restores normal behaviour: width is then min(100%, max-width), the auto margins simply centre that full-width box, and the text inside starts at the usual gutter - identical to how .cp-hero (city page) renders, which is not flex and therefore never had the problem. */ .hero > .container, .ar-hero > .container, .ai-hero > .container, .cc-hero > .container, .dst-hero > .container, .fi-hero > .container, .lp-hero > .container, .sr-hero > .container, .tgi-hero > .container { width: 100%; } /* ---------- Admin left sidebar navigation ---------- */ body:has(.admin-sidebar) { padding-left: 230px; } @media (max-width: 900px) { body:has(.admin-sidebar) { padding-left: 0; } } .admin-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 230px; background: var(--ink); overflow-y: auto; z-index: 50; display: flex; flex-direction: column; } @media (max-width: 900px) { .admin-sidebar { position: static; width: 100%; height: auto; } } .admin-sidebar .brand-row { padding: 18px 18px 14px; background: var(--white); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 8px; } .admin-sidebar .brand-row img { height: 32px; width: 32px; object-fit: contain; object-position: left; } .admin-sidebar .brand-row .brand-text { font-size: 0.95rem; font-weight: 800; color: var(--ink); } .admin-sidebar .brand-row small { font-size: 0.58rem; opacity: 0.75; color: var(--ink); letter-spacing: 1px; border: 1px solid var(--line); padding: 2px 5px; border-radius: 10px; margin-left: auto; } .admin-sidebar .sidebar-links { flex: 1; padding: 10px 0; overflow-y: auto; } .admin-sidebar .group-label { display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-size: 0.66rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #8FC7F5; padding: 12px 18px 8px; } .admin-sidebar .group-label .caret { font-size: 0.6rem; transition: transform 0.15s ease; } .admin-sidebar .nav-group.open .group-label .caret { transform: rotate(180deg); } .admin-sidebar .nav-group .group-links { display: none; } .admin-sidebar .nav-group.open .group-links { display: block; } .admin-sidebar a { display: flex; align-items: center; gap: 10px; padding: 9px 18px; font-size: 0.87rem; font-weight: 500; color: #CFE3F5; border-left: 3px solid transparent; } .admin-sidebar a:hover { background: rgba(255,255,255,0.06); color: #FFFFFF; } .admin-sidebar a.active { background: rgba(255,255,255,0.1); color: #FFFFFF; font-weight: 700; border-left-color: #F2A900; } .admin-sidebar .sidebar-footer { padding: 14px 18px; border-top: 1px solid rgba(255,255,255,0.12); display: flex; flex-direction: column; gap: 8px; } .admin-sidebar .sidebar-footer a { padding: 6px 0; font-size: 0.82rem; } /* ---------- Nav ---------- */ /* position: fixed instead of sticky - sticky can be silently broken by ANY ancestor with a non-visible overflow (a very common real-world gotcha we kept re-hitting); fixed is only affected by an ancestor transform/filter/perspective, none of which exist here, so this is the reliable choice. Since fixed takes it out of normal flow, body gets matching top padding below so content isn't hidden underneath it (scoped to non-admin pages, since admin uses its own fixed sidebar layout instead of this nav). */ .nav { background: var(--main-bg); color: var(--ink); padding: 0; min-height: 70px; display: flex; align-items: stretch; border-bottom: none; position: fixed; top: 0; left: 0; right: 0; z-index: 200; } /* Brand-color accent line, sitting flush under the header (matches the reference design's thin colored bar under the nav bar). A pseudo-element on .nav rather than a separate fixed div, so it always moves and stacks together with the header with no extra positioning code - bottom:-4px places it just outside .nav's own box (nav has no overflow:hidden, so this is visible), and .nav-spacer/.mini-search-bar's top are both bumped by these same 4px below so page content and the sticky mini search bar never sit underneath it. */ .nav::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px; background: linear-gradient(90deg, var(--cta-primary), var(--brand-gold)); } /* Reserves the space nav no longer occupies in normal flow now that it's fixed. Set to .nav's own min-height PLUS the 4px accent line below it (rather than separately-eyeballed numbers) so the two can never drift apart and leave a gap of body background showing through - that gap is what read as a stray white/parchment line between the header and hero. Lives inside the nav fragment itself (see fragments.html) rather than as blanket body padding, so it only affects pages that actually include this nav - the admin login page, for example, uses neither this nav nor the admin sidebar and would otherwise get an unwanted gap. */ .nav-spacer { height: 74px; } @media (max-width: 560px) { .nav { min-height: 50px; } .nav-spacer { height: 54px; } } .nav .container { display: flex; justify-content: flex-start; align-items: stretch; flex-wrap: wrap; row-gap: 10px; /* Full-width header, not the shared 1160px content column - the logo should sit flush against the left edge of the screen and the CTA flush against the right edge, using the whole header bar rather than staying clustered in a centered column on wide screens. width:100% (not just max-width:none) is the part that actually matters here: .container is a flex child of .nav with no explicit width, so without this it keeps shrink-wrapping to its own content and centering via the inherited margin:auto - looking identical to the centered-column layout even after max-width was removed. */ max-width: none; width: 100%; margin: 0; padding: 0 70px; } @media (max-width: 560px) { .nav .container { padding: 0 16px; } } .nav .brand { display: flex; align-items: center; gap: 14px; align-self: center; margin-right: 30px; } /* ---- Logo image badge - the YatriSutra logo file has an opaque near-white/cream background baked in (not transparent). The site header (.nav) is now the same light color, so the badge is invisible there by design - it still matters on the admin login page, which keeps its dark gradient side panel, where dropping the logo directly on top would show as a jarring white rectangle. Kept as one shared class so all three lockups (public nav, seller nav, admin login) stay visually consistent even though only login still needs the contrast. ---- */ .brand-logo-badge { display: inline-flex; align-items: center; background: var(--main-bg); padding: 6px 14px; border-radius: 12px; } .brand-logo-badge img { display: block; height: 52px; width: auto; } @media (max-width: 560px) { .brand-logo-badge img { height: 36px; } .brand-logo-badge { padding: 5px 10px; border-radius: 10px; } } .nav .nav-right { display: flex; align-items: center; gap: 26px; align-self: center; margin-left: auto; } /* ---- Header category tabs (Stays / Planner / Airport Taxi / Car Rental) - relocated here from the homepage's search card, icon-over-label like the reference design, flush against the header's bottom edge so the active underline lands right at the header/accent-line boundary (.nav .container is stretch, so this row fills the full header height). All 4 use "/?tab=X" - same screen, tab panel swap - rather than navigating to a separate page, so clicking a tab never reads as "leaving" the page. "active" comes from currentNavTab (see GlobalModelAttributes) - path-aware, not just ?tab-aware, so it stays correct even for someone who lands directly on /travel-planner or /airport-taxi via another link (e.g. the footer). Hidden below 900px; reachable there via the existing hamburger menu instead (see .nav-mobile-link below), same pattern already used for "List your property" on mobile. */ .nav-tabs { display: flex; align-items: stretch; gap: 2px; align-self: stretch; } .nav-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0 14px; text-decoration: none; color: var(--text-secondary); border-bottom: 3px solid transparent; font-size: 0.78rem; font-weight: 700; white-space: nowrap; } .nav-tab .nav-tab-ico { display: block; flex-shrink: 0; } .nav-tab:hover { color: var(--ink); } .nav-tab.active { color: var(--cta-primary); border-bottom-color: var(--cta-primary); } @media (max-width: 900px) { .nav-tabs { display: none; } } .nav .nav-divider { width: 1px; height: 40px; background: rgba(6,43,92,0.15); } .nav a.navlink { font-size: var(--fs-nav); font-weight: 500; color: var(--ink); opacity: 0.85; margin-left: 0; padding: 8px 4px; border-radius: 20px; transition: background 0.12s ease; } .nav a.navlink:hover { background: rgba(6,43,92,0.08); opacity: 1; } /* "List your property" - the strongest CTA in the header per the brand refresh: filled gold, mini house icon on a navy roundel, two lines of copy (headline + supporting line). Hidden on mobile (see the 560px media query below) - reachable there via the hamburger menu instead, since the full two-line button is too wide for a small header. */ .nav a.nav-cta-btn { display: flex; align-items: center; gap: 12px; background: var(--gold); color: var(--navy-header); opacity: 1; padding: 12px 24px; border-radius: 12px; } .nav .nav-cta-mark { flex-shrink: 0; } .nav .nav-cta-text { display: flex; flex-direction: column; line-height: 1.25; text-align: left; } .nav .nav-cta-title { font-weight: 700; font-size: 1rem; } .nav .nav-cta-sub { font-weight: 500; font-size: 0.74rem; color: #3B4F6B; } .nav a.nav-cta-btn:hover { background: var(--gold-hover); } /* Hamburger toggle - desktop never sees this, mobile-only trigger for .nav-mobile-menu. 44x44 for a comfortable tap target (was 34x34). */ .nav-burger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; background: none; border: none; cursor: pointer; padding: 0; flex-shrink: 0; } .nav-burger span { display: block; width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.18s ease, opacity 0.18s ease; } .nav-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-burger.open span:nth-child(2) { opacity: 0; } .nav-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile dropdown panel - collapsed by default (max-height:0, clipped), expanded via the .open class toggled by fragments.html's inline script. Positioned absolutely against the nav's own bounding box (not left in normal flex flow) so it renders as a proper full-width overlay below the bar - as a plain flex child it was squeezing into the leftover horizontal space next to the logo instead of dropping below it. .nav already has position:fixed above, which (like relative/absolute/sticky) is enough on its own to anchor this - no extra position rule needed on .nav itself. */ .nav-mobile-menu { position: absolute; top: 100%; left: 0; right: 0; max-height: 0; overflow: hidden; background: var(--main-bg); box-shadow: 0 8px 20px rgba(6,43,92,0.15); transition: max-height 0.22s ease; } .nav-mobile-menu.open { max-height: 280px; } .nav-mobile-link { display: flex; align-items: center; gap: 12px; padding: 14px 20px; color: var(--ink); font-family: 'Inter', 'Noto Sans Devanagari', sans-serif; font-size: 0.95rem; font-weight: 600; border-top: 1px solid var(--border); } .nav-mobile-link svg { flex-shrink: 0; opacity: 0.85; } .nav-mobile-link-cta { color: var(--cta-primary); } .nav-mobile-link-cta svg { opacity: 1; } /* ---- Persistent mobile bottom tab bar - app-style primary nav, ≤900px only (see fragments.html for the full rationale/markup). --mobile-bottom-nav-height is the real on-screen height (not counting the safe-area inset below it) - other fixed-bottom elements reference this same variable to sit just above the bar instead of underneath/behind it, rather than each hardcoding a guessed pixel offset that would silently drift out of sync if this bar's height ever changes. Hidden entirely above 900px, same breakpoint where the header's top .nav-tabs takes over instead - the two are mutually exclusive by design, never both visible at once. */ :root { --mobile-bottom-nav-height: 60px; } .mobile-bottom-nav { display: none; } @media (max-width: 900px) { .mobile-bottom-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; height: var(--mobile-bottom-nav-height); padding-bottom: env(safe-area-inset-bottom); background: var(--main-bg); border-top: 1px solid var(--border); box-shadow: 0 -4px 16px rgba(6,43,92,0.08); } /* Room for the fixed bottom bar so it never covers the last bit of real page content (footer links, last card in a list, etc.) - the same problem .nav-spacer already solves for the fixed header, mirrored at the bottom. */ body { padding-bottom: calc(var(--mobile-bottom-nav-height) + env(safe-area-inset-bottom)); } } .mbn-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none; color: var(--text-secondary); font-family: 'Inter', 'Noto Sans Devanagari', sans-serif; font-size: 0.68rem; font-weight: 600; } .mbn-tab span { line-height: 1; } .mbn-tab.active { color: var(--cta-primary); } @media (max-width: 560px) { .nav .nav-divider { display: none; } .nav .nav-right { gap: 10px; } .nav a.navlink { font-size: 0.78rem; padding: 6px 8px; } /* "List your property" no longer shown as the full pill button on mobile - too wide for a small header. Reachable instead through the hamburger menu (.nav-burger, shown below). */ .nav a.nav-cta-btn { display: none; } .nav-desktop-only { display: none !important; } .nav-burger { display: flex; } } /* ---------- Hero + overlapping search widget ---------- */ .hero { background: none; color: var(--ink); padding: 6px 0 16px; } .hero h1 { color: var(--ink); font-size: var(--fs-h1); font-weight: 700; max-width: 640px; margin-bottom: 6px; } .hero p.sub { color: var(--text-secondary); font-size: 0.96rem; max-width: 560px; margin: 0; } .search-form { background: var(--white); border-radius: 10px; padding: 16px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 0.7fr auto; gap: 12px; margin-top: -40px; position: relative; box-shadow: 0 16px 40px rgba(0,27,62,0.28); border: 1px solid var(--line); } @media (max-width: 800px) { .search-form { grid-template-columns: 1fr; margin-top: 24px; } } .search-form label { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--ink); margin-bottom: 6px; } .search-form input, .search-form select { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 6px; font-family: 'Inter', 'Noto Sans Devanagari', sans-serif; font-size: var(--fs-search); font-weight: 400; background: var(--parchment); color: var(--charcoal); } .search-form input:focus, .search-form select:focus { outline: 2px solid var(--blue-mid); outline-offset: 1px; } .btn { display: inline-flex; align-items: center; justify-content: center; background: var(--cta-primary); color: var(--white); border: none; border-radius: 6px; padding: 12px 22px; font-family: 'Inter', 'Noto Sans Devanagari', sans-serif; font-weight: 600; font-size: var(--fs-button); cursor: pointer; transition: filter 0.12s ease; } .btn:hover { filter: brightness(0.94); } .btn.secondary { background: var(--cta-secondary); color: var(--white); border: none; } .btn.danger { background: #7B1E1E; color: var(--white); } .btn.ghost { background: transparent; color: var(--blue-mid); border: 1px solid var(--blue-mid); padding: 7px 14px; font-size: 0.82rem; font-weight: 600; transition: background 0.12s ease; } .btn.ghost:hover { background: rgba(11,114,217,0.08); } /* ---------- Quick filter chips ---------- */ .chip-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0 8px; } .chip { display: inline-flex; align-items: center; gap: 6px; background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: 8px 16px; font-size: 0.85rem; font-weight: 600; color: var(--ink); } /* Areas with no live listings yet - same look as a normal chip, but not a link (see city-page.html's popular-areas section: clicking through used to open a Search Results page with zero results, which is worse than not linking at all). Slightly muted so it still reads as "not clickable" without looking broken or like an error state. */ .chip--plain { opacity: 0.62; cursor: default; } /* ---------- Trust / value row ---------- */ .trust-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 8px 0 12px; } @media (max-width: 700px) { .trust-row { grid-template-columns: 1fr; } } /* ---------- Popular destinations ---------- */ .dest-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; } .dest-card { position: relative; border-radius: 10px; overflow: hidden; height: 150px; display: block; } .dest-card img { width: 100%; height: 100%; object-fit: cover; display: block; } .dest-card .overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,27,62,0) 40%, rgba(0,27,62,0.75) 100%); display: flex; align-items: flex-end; padding: 12px; } .dest-card .overlay span { color: var(--white); font-weight: 700; font-size: 1rem; } /* ---------- Listings grid ---------- */ .section { padding: 30px 0; } .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } @media (max-width: 900px) { .grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 620px) { .grid { grid-template-columns: 1fr; } } /* Horizontal-scrolling version, used for Recommended/Featured/Recently onboarded on the homepage - cards stay in a single row and scroll sideways instead of wrapping to new rows. */ .scroll-grid { display: flex; gap: 18px; overflow-x: auto; padding-bottom: 10px; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; } .scroll-grid .card { flex: 0 0 260px; scroll-snap-align: start; } .scroll-grid::-webkit-scrollbar { height: 8px; } .scroll-grid::-webkit-scrollbar-thumb { background: var(--line); border-radius: 10px; } .scroll-grid::-webkit-scrollbar-track { background: transparent; } @media (max-width: 620px) { .scroll-grid .card { flex-basis: 220px; } } .card { background: var(--white); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; position: relative; box-shadow: 0 1px 3px rgba(0,27,62,0.06); transition: box-shadow 0.15s ease, transform 0.15s ease; } .card:hover { box-shadow: 0 10px 24px rgba(0,27,62,0.16); transform: translateY(-2px); } .card img { width: 100%; height: 148px; object-fit: cover; display: block; } .card .body { padding: 14px 16px; } .card h3 { font-size: 1.05rem; margin-bottom: 4px; } .card .loc { font-size: 0.78rem; color: var(--blue-mid); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; } .card .desc { font-size: 0.87rem; color: #556372; margin: 10px 0; } .rating-line { font-size: 0.82rem; color: var(--charcoal); margin: 4px 0; display: flex; align-items: center; gap: 4px; } .rating-line .star { color: #F2A900; } .rating-line .rc { color: #616C76; font-size: 0.78rem; } .card .price-row { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 12px; } .card .price-row .amt { font-size: 1.15rem; font-weight: 800; color: var(--ink); } .card .price-row .amt small { font-size: 0.75rem; font-weight: 500; color: #616C76; } /* Rating-style badge, top-left corner of card image (OTA convention) */ .stamp { position: absolute; top: 12px; left: 12px; background: var(--sage); color: var(--white); border-radius: 6px; padding: 6px 10px; display: flex; flex-direction: column; align-items: flex-start; line-height: 1.1; font-family: 'Inter', 'Noto Sans Devanagari', sans-serif; box-shadow: 0 2px 6px rgba(0,0,0,0.18); } .stamp .amt { font-size: 0.82rem; font-weight: 800; } .stamp .unit { font-size: 0.6rem; opacity: 0.9; } .badge { display: inline-block; font-family: 'Inter', 'Noto Sans Devanagari', sans-serif; font-size: 0.7rem; font-weight: 700; padding: 4px 10px; border-radius: 4px; text-transform: uppercase; letter-spacing: 0.02em; } .badge.approved { background: #E1F5EE; color: #085041; } .badge.pending { background: #FDF1DA; color: #854F0B; } .badge.rejected { background: #FCEBEB; color: #791F1F; } .badge.confirmed { background: #E1F5EE; color: #085041; } .badge.cancelled { background: #FCEBEB; color: #791F1F; } .badge.checked-in { background: #EFE7FB; color: #5B3499; } .badge.completed { background: #EDEFF2; color: #556372; } /* ---------- Mini "modify search" bar (MakeMyTrip-style), used on detail/search pages ---------- */ .mini-search-bar { background: var(--navy-hero); border-bottom: 1px solid var(--line); box-shadow: 0 2px 10px rgba(0,27,62,0.15); padding: 12px 0; position: sticky; top: 74px; /* sits just below the fixed nav bar above it - matches .nav-spacer */ z-index: 60; } @media (max-width: 560px) { .mini-search-bar { top: 54px; } } .mini-search-form { display: grid; grid-template-columns: 1.5fr 1fr 1fr 0.7fr auto; gap: 10px; align-items: stretch; } .msb-field { background: var(--parchment); border: 1px solid var(--line); border-radius: 8px; padding: 7px 12px; } .msb-field label { display: block; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #616C76; margin-bottom: 2px; } .msb-field select, .msb-field input { width: 100%; border: none; background: transparent; padding: 0; font-family: 'Inter', 'Noto Sans Devanagari', sans-serif; font-size: 0.9rem; font-weight: 700; color: var(--ink); } .msb-field select:focus, .msb-field input:focus { outline: none; } .msb-btn { min-width: 110px; border-radius: 8px; padding: 0 20px; } @media (max-width: 900px) { .mini-search-form { grid-template-columns: repeat(2, 1fr); } .msb-btn { grid-column: span 2; padding: 12px; } } @media (max-width: 560px) { .mini-search-form { grid-template-columns: 1fr; } .msb-btn { grid-column: span 1; } } /* ---------- Detail page ---------- */ .detail-hero img { width: 100%; height: 360px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); } .detail-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 40px; margin-top: 32px; } @media (max-width: 800px) { .detail-grid { grid-template-columns: 1fr; } } .amenity-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .amenity-tags span { font-size: 0.78rem; font-weight: 600; background: #E7F1FB; color: var(--blue-mid); padding: 6px 12px; border-radius: 20px; } .booking-box { background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 22px; position: sticky; top: 196px; box-shadow: 0 4px 16px rgba(0,27,62,0.08); } @media (max-width: 900px) { .booking-box { position: static; } } .booking-box .price { font-size: 1.6rem; font-weight: 800; color: var(--ink); } .booking-box form label { display: block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; margin: 12px 0 5px; color: var(--ink); } .booking-box form input { width: 100%; padding: 10px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--parchment); } /* ---------- Tables (admin) ---------- */ table { width: 100%; border-collapse: collapse; background: var(--white); border-radius: 8px; overflow: hidden; border: 1px solid var(--line); } th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: 0.88rem; } th { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #556372; background: var(--parchment); } tr:last-child td { border-bottom: none; } tbody tr { transition: background 0.1s ease; } tbody tr:hover { background: #F7FAFC; } .actions { display: flex; gap: 8px; flex-wrap: wrap; min-width: 220px; } .actions form { display: inline; } .table-scroll { width: 100%; overflow-x: auto; } .stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-bottom: 32px; } @media (max-width: 700px) { .stat-row { grid-template-columns: repeat(2, 1fr); } } .stat-card { background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 18px; } .stat-card .num { font-size: 2rem; font-weight: 800; color: var(--ink); } .stat-card .label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #616C76; } .form-card { background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 28px; max-width: 640px; } .form-card label { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; margin: 14px 0 5px; color: var(--ink); } .form-card input, .form-card textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--parchment); font-family: 'Inter', 'Noto Sans Devanagari', sans-serif; } .form-card textarea { min-height: 90px; resize: vertical; } .error { color: #C0392B; font-size: 0.8rem; margin-top: 4px; } .admin-nav { display: flex; gap: 2px; margin-bottom: 28px; border-bottom: 1px solid var(--line); position: relative; z-index: 20; } .admin-nav > a, .admin-nav .nav-group > .nav-group-label { padding: 12px 16px; font-size: 0.88rem; font-weight: 600; color: var(--charcoal); border-bottom: 2px solid transparent; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; user-select: none; } .admin-nav > a:hover, .admin-nav .nav-group:hover > .nav-group-label { color: var(--blue-mid); } .admin-nav > a.active, .admin-nav .nav-group.active > .nav-group-label { color: var(--blue-mid); border-bottom-color: var(--blue-mid); } .admin-nav .nav-group { position: relative; } .admin-nav .nav-group-label .caret { font-size: 0.65rem; transition: transform 0.15s ease; opacity: 0.6; } .admin-nav .nav-group.open .nav-group-label .caret { transform: rotate(180deg); } .admin-nav .dropdown-menu { display: none; position: absolute; top: 100%; left: 0; background: var(--white); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,27,62,0.12); min-width: 190px; padding: 6px; margin-top: 2px; } .admin-nav .nav-group.open .dropdown-menu, .admin-nav .nav-group:hover .dropdown-menu { display: block; } .admin-nav .dropdown-menu a { display: block; padding: 9px 12px; font-size: 0.85rem; font-weight: 500; color: var(--charcoal); border-radius: 6px; border-bottom: none; } .admin-nav .dropdown-menu a:hover { background: var(--parchment); color: var(--blue-mid); } .admin-nav .dropdown-menu a.active { background: var(--parchment); color: var(--blue-mid); font-weight: 700; } @media (max-width: 900px) { .admin-nav { flex-wrap: wrap; } .admin-nav .dropdown-menu { position: static; box-shadow: none; border: none; display: none; padding-left: 12px; } .admin-nav .nav-group.open .dropdown-menu { display: block; } } .admin-city-filter { padding: 9px 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--white); font-size: 0.85rem; font-weight: 600; color: var(--ink); min-width: 160px; } .login-wrap { min-height: 80vh; display: flex; align-items: center; justify-content: center; } .login-card { background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 36px; width: 320px; box-shadow: 0 8px 30px rgba(0,27,62,0.12); } .footer { position: relative; background: #0B0E1A; color: #A9C4DC; padding: 0 0 0; margin-top: 60px; overflow: hidden; } .footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(135deg, #9333EA, #EC4899, #FB923C); } .footer-top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; padding: 44px 0 32px; border-bottom: 1px solid rgba(255,255,255,0.08); } .footer-brand { max-width: 320px; } .footer-brand .logo-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; } .footer-brand .logo-row span { font-family: 'Inter', 'Noto Sans Devanagari', sans-serif; font-size: 1.15rem; font-weight: 800; color: #FFFFFF; } .footer-brand p { font-size: 0.85rem; line-height: 1.65; color: #8CA3BE; margin: 0; } .footer-contact { display: flex; flex-direction: column; gap: 10px; font-size: 0.85rem; min-width: 200px; } .footer-contact a { display: flex; align-items: center; gap: 8px; color: #A9C4DC; } .footer-contact a:hover { color: #FFFFFF; } .footer .cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; padding: 36px 0 8px; } @media (max-width: 700px) { .footer .cols { grid-template-columns: repeat(2, 1fr); } .footer-top { flex-direction: column; } } .footer h4 { color: var(--white); font-size: 0.78rem; margin: 0 0 14px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 800; } .footer a { display: block; font-size: 0.85rem; color: #A9C4DC; margin-bottom: 10px; text-decoration: none; } .footer a:hover { color: #FFFFFF; } .footer .bottom { border-top: 1px solid rgba(255,255,255,0.08); padding: 20px 0; font-size: 0.78rem; color: #7FA0C0; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; text-align: left; } .empty { text-align: center; padding: 60px 20px; color: #556372; } .empty .display { color: var(--ink); } /* ---------- Search results: breadcrumb, top filter strip, list cards ---------- */ .breadcrumb { font-size: 0.82rem; color: #556372; margin-bottom: 18px; } .breadcrumb a { color: var(--blue-mid); font-weight: 600; } .breadcrumb span { margin: 0 4px; } .results-layout { padding-bottom: 50px; } .filter-card { background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 16px 20px; margin-bottom: 20px; } .filter-card h4 { margin: 0 0 12px; font-size: 0.85rem; color: var(--ink); text-transform: uppercase; letter-spacing: 0.03em; } .filter-card form { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; } .filter-card form > div { display: flex; flex-direction: column; } .filter-label { display: block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; color: var(--ink); margin-bottom: 6px; } .budget-inputs { display: flex; align-items: center; gap: 8px; } .budget-inputs > div { position: relative; } .budget-inputs input { width: 90px; padding: 9px 10px 9px 22px; border: 1px solid var(--line); border-radius: 6px; background: var(--parchment); font-size: 0.85rem; box-sizing: border-box; } .budget-inputs .rupee-prefix { position: absolute; left: 8px; top: 50%; transform: translateY(-50%); font-size: 0.8rem; color: #616C76; } .budget-inputs .dash { color: #616C76; } .filter-card select { padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--parchment); font-size: 0.85rem; min-width: 140px; } .filter-card .filter-actions { display: flex; flex-direction: column; } @media (max-width: 800px) { .filter-card form { flex-direction: column; align-items: stretch; } .filter-card select, .filter-card .filter-actions { width: 100%; } .filter-card .filter-actions label { display: none; } } .results-header h1 { font-size: 1.4rem; margin-bottom: 18px; } .results-list { display: flex; flex-direction: column; gap: 16px; } .result-card { display: grid; grid-template-columns: 220px 1fr 160px; gap: 18px; background: var(--white); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: 0 1px 3px rgba(0,27,62,0.06); transition: box-shadow 0.15s ease; } .result-card:hover { box-shadow: 0 10px 24px rgba(0,27,62,0.14); } @media (max-width: 700px) { .result-card { grid-template-columns: 1fr; } } .result-img { height: 180px; } @media (max-width: 700px) { .result-img { height: 200px; } } .result-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .result-body { padding: 16px 0; } .result-body .loc { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; color: var(--blue-mid); } .result-body h3 { font-size: 1.1rem; margin: 4px 0 2px; color: var(--ink); } .result-body .desc { font-size: 0.85rem; color: #556372; margin-top: 6px; } .result-price { padding: 16px 16px 16px 0; text-align: right; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; } @media (max-width: 700px) { .result-price { align-items: flex-start; padding: 0 16px 16px; } } .result-price .amt { font-size: 1.3rem; font-weight: 800; color: var(--ink); } .result-price .per-night { font-size: 0.75rem; color: #616C76; } /* Rich text content (from the admin WYSIWYG editor) */ .rich-content p { margin: 0 0 16px; } .rich-content h2 { font-size: 1.25rem; margin: 24px 0 10px; color: var(--ink); } .rich-content h3 { font-size: 1.1rem; margin: 20px 0 8px; color: var(--ink); } .rich-content ul, .rich-content ol { margin: 0 0 16px; padding-left: 22px; } .rich-content li { margin-bottom: 6px; } .rich-content strong { font-weight: 700; } .rich-content a { color: var(--blue-mid); text-decoration: underline; } .rich-content blockquote { border-left: 3px solid var(--line); padding-left: 14px; color: #556372; margin: 0 0 16px; } /* ---------- Mobile-only sticky "Search stays in {city}" bar ---------- */ .mobile-search-cta { display: none; } @media (max-width: 560px) { .mobile-search-cta { display: block; position: fixed; left: 0; right: 0; z-index: 150; /* Sits just above the persistent mobile bottom tab bar (see .mobile-bottom-nav above) rather than under/behind it - bottom:0 would put this directly beneath the nav. */ bottom: var(--mobile-bottom-nav-height); background: var(--navy-header); padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -4px 16px rgba(0,0,0,0.18); } .mobile-search-cta-btn { display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--brand-gold); color: var(--navy-header); font-family: 'Inter', 'Noto Sans Devanagari', sans-serif; font-weight: 700; font-size: 0.95rem; text-decoration: none; padding: 13px 18px; border-radius: 12px; min-height: 46px; } .mobile-search-cta-btn strong { font-weight: 800; } /* Pages with this bar need bottom padding so the fixed bar never covers page content or footer links - each page that includes the fragment must also add class "has-mobile-cta" to its or last section, see individual templates. */ body.has-mobile-cta { padding-bottom: 74px; } }