/* ═══════════════════════════════════════════════════════════════════════════ Padma Shree Travels — Master Stylesheet Design system: premium local travel brand, mobile-first, trust-first ═══════════════════════════════════════════════════════════════════════════ */ /* ── Design Tokens ───────────────────────────────────────────────────────── */ :root { /* Colour palette */ --black: #0A0A0A; --white: #ffffff; --g950: #0D0D0D; --g900: #1A1A1A; --g800: #292929; --g700: #3D3D3D; --g500: #6B6B6B; --g400: #909090; --g300: #ADADAD; --g200: #D4D4D4; --g100: #EBEBEB; --g50: #F7F7F7; /* Brand accents */ --accent: #276EF1; --green: #05944F; --wa: #25D366; --red: #D73B00; --gold: #B8943A; --gold-bg: rgba(184,148,58,.08); --gold-border: rgba(184,148,58,.18); /* Typography — Inter loaded via each page's */ --ff: Inter, -apple-system, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif; --ffd: Inter, -apple-system, 'SF Pro Display','Segoe UI', Roboto, sans-serif; /* Layout */ --mw: 1200px; --r: 10px; --r-lg:16px; --rp: 999px; /* Shadows — refined, no heavy blur */ --sm: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04); --md: 0 4px 16px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.04); --lg: 0 10px 36px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.05); /* Transitions */ --t: .18s ease; } /* ── Reset ───────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100% } body { font-family: var(--ff); font-size: 16px; line-height: 1.65; color: var(--g700); background: var(--white); overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; height: auto; display: block } a { text-decoration: none; color: inherit; transition: color var(--t) } ul, ol { list-style: none } button { font-family: inherit; cursor: pointer } /* ── Typography ──────────────────────────────────────────────────────────── */ h1, h2, h3, h4 { font-family: var(--ffd); color: var(--black); line-height: 1.18; font-weight: 700; } h1 { font-size: clamp(1.9rem, 5vw, 3.4rem); letter-spacing: -.028em } h2 { font-size: clamp(1.45rem, 3.5vw, 2.3rem); letter-spacing: -.02em } h3 { font-size: clamp(1.05rem, 2vw, 1.25rem); letter-spacing: -.01em } h4 { font-size: 1rem; letter-spacing: -.005em } p { margin-bottom: .85rem } p:last-child { margin-bottom: 0 } /* ── Layout utilities ────────────────────────────────────────────────────── */ .container { width: 100%; max-width: var(--mw); margin: 0 auto; padding: 0 1.25rem; } .section { padding: 4.5rem 0 } .section--gray { background: var(--g50) } .text-center { text-align: center } /* ── Section labels / badges ─────────────────────────────────────────────── */ .sbadge { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--g500); margin-bottom: .7rem; padding: .3rem .8rem; background: var(--g100); border-radius: var(--rp); } .stitle { margin-bottom: .55rem } .sdesc { color: var(--g500); max-width: 520px; margin: 0 auto 2.5rem; font-size: .97rem; line-height: 1.7; } /* ── Buttons ─────────────────────────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; gap: .5rem; padding: .78rem 1.55rem; border-radius: var(--rp); font-size: .9rem; font-weight: 600; letter-spacing: .01em; border: none; transition: background var(--t), box-shadow var(--t), transform var(--t); white-space: nowrap; cursor: pointer; text-align: center; } .btn:active { transform: scale(.97) } .btn:focus-visible { outline: 2px solid var(--black); outline-offset: 2px } .btn--b { background: var(--black); color: var(--white) } .btn--b:hover { background: var(--g800); box-shadow: 0 4px 12px rgba(0,0,0,.18) } .btn--w { background: var(--white); color: var(--black) } .btn--w:hover { background: var(--g100) } .btn--o { background: transparent; color: var(--black); border: 1.5px solid var(--g200); } .btn--o:hover { border-color: var(--g700); background: var(--g50) } .btn--wa { background: var(--wa); color: var(--white) } .btn--wa:hover { background: #1EB254; box-shadow: 0 4px 14px rgba(37,211,102,.22) } .btn--lg { padding: .95rem 2rem; font-size: .97rem } .btn--sm { padding: .52rem 1.1rem; font-size: .8rem } /* ── Header ──────────────────────────────────────────────────────────────── */ .hdr { position: sticky; top: 0; z-index: 1000; background: var(--white); border-bottom: 1px solid var(--g100); transition: box-shadow var(--t); } .hdr.scrolled { box-shadow: 0 2px 12px rgba(0,0,0,.07) } .hdr__in { display: flex; align-items: center; justify-content: space-between; padding: .7rem 1.25rem; max-width: var(--mw); margin: 0 auto; } /* Logo */ .logo { display: flex; align-items: center; gap: .6rem } .logo__img { height: 34px; width: auto; object-fit: contain } .logo__t { font-family: var(--ffd); font-size: 1rem; font-weight: 700; color: var(--black); line-height: 1.2; } .logo__t small { display: block; font-size: .57rem; font-weight: 500; letter-spacing: .07em; text-transform: uppercase; color: var(--g400); } /* Desktop nav */ .nav { display: none } .nav__l { display: flex; align-items: center; gap: .8rem } .nav__a { font-size: .82rem; font-weight: 500; color: var(--g600, var(--g500)); padding: .3rem 0; position: relative; white-space: nowrap; } .nav__a:hover, .nav__a.on { color: var(--black) } .nav__a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: var(--black); border-radius: 2px; transition: width var(--t); } .nav__a:hover::after, .nav__a.on::after { width: 100% } /* ── Dropdown — hover-stable, keyboard-accessible ───────────────────────── */ .nav__dd { position: relative } .nav__ddm { /* * Use visibility + opacity instead of display:none so we can: * 1. Transition on both open and close * 2. Delay the close (visibility switches after 220ms — the forgiveness window) * * display:block is always set so the element can receive pointer events during * the close delay (visibility:visible is still true during those 220ms). */ display: block; visibility: hidden; opacity: 0; position: absolute; /* * top:100% positions the panel flush against the bottom of the
  • — no gap. * padding-top provides the visual 10px separation WITHOUT creating a dead zone. * Previously: top:calc(100%+12px) created a 12px gap where :hover was lost. */ top: 100%; left: -1.5rem; min-width: 295px; background: var(--white); border-radius: var(--r-lg); box-shadow: var(--lg); border: 1px solid var(--g100); padding: 10px 0 .6rem; /* top padding = visual gap, no DOM gap */ z-index: 100; transform: translateY(-5px); /* * CLOSE: opacity/transform animate over 180ms, then visibility hides after 220ms. * This 220ms window keeps the panel interactive (cursor can re-enter). */ transition: opacity .18s ease, transform .18s ease, visibility 0s linear .22s; } /* Invisible hover bridge — spans upward from panel top, covers any sub-pixel gap */ .nav__ddm::before { content: ''; position: absolute; top: -10px; left: 0; right: 0; height: 10px; } /* * OPEN state: triggered by mouse hover OR keyboard focus-within OR JS class. * Transition overrides remove the close delay — opening is always immediate. */ .nav__dd:hover .nav__ddm, .nav__dd:focus-within .nav__ddm, .nav__dd--open .nav__ddm { visibility: visible; opacity: 1; transform: translateY(0); transition: opacity .15s ease, transform .15s ease, visibility 0s linear 0s; /* no delay on open */ } /* Dropdown links */ .nav__ddm a { display: flex; justify-content: space-between; align-items: center; padding: .6rem 1.2rem; font-size: .83rem; font-weight: 500; color: var(--g700); border-radius: 0; transition: background var(--t), color var(--t); outline-offset: -2px; /* keep focus ring inside the panel */ } .nav__ddm a:hover { background: var(--g50); color: var(--black) } .nav__ddm a:focus-visible { background: var(--g50); color: var(--black); outline: 2px solid var(--black) } .ptag { font-size: .76rem; color: var(--g400); font-weight: 600 } /* Hamburger */ .ham { display: flex; flex-direction: column; gap: 5px; padding: .45rem; background: none; border: none; z-index: 1001; } .ham span { width: 22px; height: 2px; background: var(--black); border-radius: 2px; transition: all var(--t); display: block; } .ham.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px) } .ham.open span:nth-child(2) { opacity: 0 } .ham.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px) } /* Mobile nav overlay */ .mnav { display: none; position: fixed; inset: 0; background: var(--white); z-index: 999; padding: 4.5rem 1.5rem 2rem; overflow-y: auto; } .mnav.open { display: block } .mnav a { display: flex; justify-content: space-between; align-items: center; padding: .85rem .4rem; font-size: .93rem; font-weight: 500; color: var(--g700); border-bottom: 1px solid var(--g100); } .mnav a:hover, .mnav a.on { color: var(--black) } .mnav__cta { display: flex; flex-direction: column; gap: .65rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--g100); } .mnav__cta .btn { justify-content: center } /* ── Hero ────────────────────────────────────────────────────────────────── */ .hero { background: var(--black); color: var(--white); padding: 3.5rem 0 4rem; position: relative; overflow: hidden; } /* Subtle texture overlay */ .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 80% 50%, rgba(255,255,255,.03) 0%, transparent 70%); pointer-events: none; } .hero__in { position: relative; z-index: 2; max-width: 650px } .hero__label { display: inline-flex; align-items: center; gap: .45rem; font-size: .72rem; font-weight: 600; color: var(--g400); margin-bottom: 1.4rem; letter-spacing: .06em; text-transform: uppercase; } .hero__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); animation: pulse 2s infinite; } @keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .35 } } .hero h1 { color: var(--white); margin-bottom: 1rem } .hero__d { font-size: 1.05rem; color: rgba(255,255,255,.6); margin-bottom: 1.9rem; line-height: 1.7; max-width: 560px; } .hero__acts { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 2.5rem; } /* Stats row */ .hero__stats { display: flex; gap: 2.2rem; padding-top: 1.8rem; border-top: 1px solid rgba(255,255,255,.1); } .hero__sv { font-family: var(--ffd); font-size: 1.9rem; font-weight: 700; color: var(--white); letter-spacing: -.025em; line-height: 1; } .hero__sl { font-size: .68rem; color: var(--g500); text-transform: uppercase; letter-spacing: .1em; margin-top: .3rem; } /* ── Trust strip ─────────────────────────────────────────────────────────── */ .trust { border-bottom: 1px solid var(--g100); padding: 1rem 0; background: var(--white); } .trust__in { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .5rem 1.8rem; } .tchip { display: flex; align-items: center; gap: .45rem; font-size: .8rem; font-weight: 600; color: var(--g700); padding: .4rem 0; } .tchip__i { width: 30px; height: 30px; border-radius: 50%; background: var(--gold-bg); border: 1px solid var(--gold-border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* ── Route cards ─────────────────────────────────────────────────────────── */ /* Generic route grid used on homepage for service cards */ .route-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.5rem; } .route-card { background: var(--white); border: 1px solid var(--g100); border-radius: var(--r); padding: 1.5rem; transition: box-shadow var(--t), border-color var(--t); } .route-card:hover { box-shadow: var(--md); border-color: var(--g200) } .route-card h3 { font-size: 1.05rem; margin-bottom: .65rem } .route-card p { font-size: .9rem; color: var(--g500); line-height: 1.7; margin-bottom: 1rem } /* Route cards in grid (rcard) */ .rgrid { display: grid; grid-template-columns: 1fr; gap: 1rem } .rcard { background: var(--white); border-radius: var(--r); border: 1px solid var(--g100); padding: 1.4rem 1.5rem; transition: box-shadow var(--t), border-color var(--t); position: relative; } .rcard:hover { box-shadow: var(--md); border-color: var(--g200) } .rcard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: .5rem; } .rcard__dest { font-family: var(--ffd); font-size: 1rem; color: var(--black); font-weight: 700; line-height: 1.3; } .rcard__price { font-family: var(--ffd); font-size: 1.3rem; font-weight: 700; color: var(--black); white-space: nowrap; text-align: right; } .rcard__price small { display: block; font-size: .62rem; font-weight: 500; color: var(--g400); text-align: right; text-transform: uppercase; letter-spacing: .05em; margin-top: .1rem; } .rcard__meta { display: flex; gap: 1rem; font-size: .78rem; color: var(--g400); margin-bottom: .5rem; align-items: center; } .rcard__desc { font-size: .875rem; color: var(--g500); margin-bottom: 1.1rem; line-height: 1.6; } .rcard__acts { display: flex; flex-wrap: wrap; gap: .4rem } .rcard__pnote { font-size: .72rem; color: var(--g400); margin-top: .3rem; margin-bottom: .75rem; } /* ── Page hero (inner pages) ─────────────────────────────────────────────── */ .phero { background: var(--black); color: var(--white); padding: 2.5rem 0 2.2rem; position: relative; } .phero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 80% at 100% 50%, rgba(255,255,255,.025) 0%, transparent 70%); pointer-events: none; } .phero__in { position: relative; z-index: 2 } .bc { display: flex; align-items: center; gap: .35rem; font-size: .77rem; color: var(--g500); margin-bottom: 1.1rem; flex-wrap: wrap; } .bc a { color: var(--g500) } .bc a:hover { color: rgba(255,255,255,.7) } .phero h1 { color: var(--white); margin-bottom: .65rem } .phero__tag { font-size: .97rem; color: rgba(255,255,255,.55); margin-bottom: 1.5rem; max-width: 560px; line-height: 1.65; } /* Price banner inside page hero */ .pbanner { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); border-radius: var(--r); padding: 1.2rem 1.3rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem; backdrop-filter: blur(4px); } .pbanner__amt { font-family: var(--ffd); font-size: 2.4rem; font-weight: 700; color: var(--white); letter-spacing: -.025em; line-height: 1; } .pbanner__amt small { display: block; font-size: .68rem; font-weight: 500; color: var(--g500); text-transform: uppercase; letter-spacing: .06em; margin-top: .3rem; } .pbanner__meta { display: flex; gap: 1.4rem; font-size: .85rem; color: rgba(255,255,255,.45); align-items: center; } .pbanner__cta { margin-left: auto; display: flex; flex-wrap: wrap; gap: .5rem } /* ── Inclusions / Why Choose Us ──────────────────────────────────────────── */ .incs { display: grid; grid-template-columns: 1fr; gap: .85rem } .inc { display: flex; align-items: flex-start; gap: 1rem; padding: 1.3rem; background: var(--white); border-radius: var(--r); border: 1px solid var(--g100); transition: box-shadow var(--t); } .inc:hover { box-shadow: var(--sm) } .inc__i { width: 44px; height: 44px; border-radius: var(--r); background: var(--gold-bg); border: 1px solid var(--gold-border); color: var(--black); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; flex-shrink: 0; } .inc h3 { font-size: .93rem; margin-bottom: .2rem; color: var(--black) } .inc p { font-size: .84rem; color: var(--g500); line-height: 1.6 } /* ── Timeline ────────────────────────────────────────────────────────────── */ .tl { position: relative; padding-left: 2.2rem; max-width: 640px; margin: 0 auto } .tl::before { content: ''; position: absolute; left: 9px; top: 0; bottom: 0; width: 2px; background: var(--g100); } .tl__i { position: relative; padding-bottom: 1.5rem } .tl__i:last-child { padding-bottom: 0 } .tl__i::before { content: ''; position: absolute; left: -2.2rem; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--white); border: 3px solid var(--black); z-index: 1; } .tl__i:last-child::before { border-color: var(--green) } .tl__i h3 { font-size: .95rem; margin-bottom: .1rem } .tl__i p { font-size: .87rem; color: var(--g500) } /* ── Testimonials ────────────────────────────────────────────────────────── */ .tgrid { display: grid; grid-template-columns: 1fr; gap: 1rem } .tc { background: var(--white); border-radius: var(--r); padding: 1.5rem; border: 1px solid var(--g100); display: flex; flex-direction: column; gap: .85rem; transition: box-shadow var(--t); } .tc:hover { box-shadow: var(--sm) } .tc__s { font-size: .88rem; letter-spacing: 2px; color: var(--gold); /* gold stars */ line-height: 1; } .tc__t { font-size: .9rem; color: var(--g700); line-height: 1.72; flex: 1; font-style: italic; quotes: "\201C" "\201D"; } .tc__t::before { content: open-quote; color: var(--g300); font-size: 1.2em; font-style: normal } .tc__a { display: flex; align-items: center; gap: .65rem } .tc__av { width: 38px; height: 38px; border-radius: 50%; background: var(--g100); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .78rem; color: var(--black); flex-shrink: 0; letter-spacing: .02em; } .tc__n { font-weight: 700; font-size: .83rem; color: var(--black) } .tc__f { font-size: .73rem; color: var(--g400); margin-top: .05rem } /* ── FAQ ─────────────────────────────────────────────────────────────────── */ .flist { max-width: 700px; margin: 0 auto } .fi { border-bottom: 1px solid var(--g100) } .fi__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.15rem 0; background: none; border: none; text-align: left; font-family: var(--ff); font-size: .93rem; font-weight: 600; color: var(--black); line-height: 1.4; cursor: pointer; transition: color var(--t); } .fi__q:hover { color: var(--g800) } .fi__tog { width: 26px; height: 26px; border-radius: 50%; background: var(--g100); display: flex; align-items: center; justify-content: center; font-size: .95rem; color: var(--black); flex-shrink: 0; transition: transform .25s ease, background var(--t), color var(--t); line-height: 1; } .fi.open .fi__tog { transform: rotate(45deg); background: var(--black); color: var(--white); } .fi__a { max-height: 0; overflow: hidden; transition: max-height .32s ease, padding .32s ease; } .fi.open .fi__a { max-height: 400px; padding-bottom: 1.1rem } .fi__a p { font-size: .88rem; color: var(--g500); line-height: 1.8; margin-bottom: 0; } .fi__a a { color: var(--black); font-weight: 500; text-decoration: underline } /* ── Booking form ────────────────────────────────────────────────────────── */ .bform { background: var(--white); border-radius: var(--r-lg); padding: 2rem 1.5rem; border: 1px solid var(--g100); box-shadow: var(--md); } .bform h3 { margin-bottom: 1.2rem } .fgrid { display: grid; grid-template-columns: 1fr; gap: 1rem } .fg label { display: block; font-size: .8rem; font-weight: 600; color: var(--black); margin-bottom: .3rem; letter-spacing: .01em; } .fg label .req { color: var(--red) } .finput { width: 100%; padding: .8rem 1rem; border: 1.5px solid var(--g200); border-radius: var(--r); font-family: var(--ff); font-size: .9rem; color: var(--black); background: var(--g50); transition: border-color var(--t), box-shadow var(--t), background var(--t); appearance: none; } .finput:focus { outline: none; border-color: var(--black); box-shadow: 0 0 0 3px rgba(0,0,0,.07); background: var(--white); } .finput::placeholder { color: var(--g300) } .finput.error { border-color: var(--red) } .ferr { font-size: .74rem; color: var(--red); margin-top: .25rem; display: none } .fg.has-error .ferr { display: block } .fsuccess { display: none; text-align: center; padding: 2.5rem 1rem } .fsuccess__i { width: 60px; height: 60px; border-radius: 50%; background: rgba(5,148,79,.08); color: var(--green); display: flex; align-items: center; justify-content: center; font-size: 1.6rem; margin: 0 auto 1rem; } .fsuccess h3 { color: var(--green); margin-bottom: .3rem } /* ── CTA section ─────────────────────────────────────────────────────────── */ .cta { background: var(--black); color: var(--white); padding: 4rem 0; text-align: center; position: relative; overflow: hidden; } .cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 50% 100%, rgba(255,255,255,.04) 0%, transparent 70%); pointer-events: none; } .cta > .container { position: relative; z-index: 1 } .cta h2 { color: var(--white); margin-bottom: .5rem } .cta p { color: rgba(255,255,255,.5); max-width: 420px; margin: 0 auto 1.75rem; font-size: .95rem } .cta__acts { display: flex; justify-content: center; flex-wrap: wrap; gap: .65rem } /* ── Footer ──────────────────────────────────────────────────────────────── */ .ft { background: var(--g950); color: var(--g500); padding: 3.5rem 0 1.5rem; } .ft__grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: 2.5rem; } .ft__brand p { font-size: .84rem; margin-top: .8rem; color: var(--g500); line-height: 1.7; } .ft .logo__img { filter: brightness(0) invert(1) } .ft__h { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; color: var(--g300); margin-bottom: 1rem; } .ft__links li { margin-bottom: .45rem } .ft__links a { font-size: .84rem; color: var(--g500) } .ft__links a:hover { color: var(--g300) } .ft__cr { display: flex; align-items: flex-start; gap: .7rem; margin-bottom: .75rem; font-size: .84rem; line-height: 1.6; } .ft__ci { width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.06); display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: .05rem; } .ft__bot { border-top: 1px solid rgba(255,255,255,.07); padding-top: 1.2rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; font-size: .74rem; color: var(--g500); } /* Map embed in footer/contact */ .mapbox { width: 100%; height: 200px; border-radius: var(--r); overflow: hidden; border: 1px solid rgba(255,255,255,.08); margin-top: .8rem; } .mapbox iframe { width: 100%; height: 100%; border: 0 } /* ── Floating bar & WhatsApp button ──────────────────────────────────────── */ .scall { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 900; background: var(--black); color: var(--white); align-items: center; justify-content: center; gap: .45rem; padding: .9rem; font-weight: 700; font-size: .9rem; letter-spacing: .01em; border-top: 1px solid rgba(255,255,255,.08); transition: background var(--t); } .scall:hover { background: var(--g800) } .waf { position: fixed; bottom: 68px; right: 1rem; z-index: 900; width: 50px; height: 50px; border-radius: 50%; background: var(--wa); color: var(--white); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 18px rgba(37,211,102,.3); transition: transform var(--t), box-shadow var(--t); } .waf:hover { transform: scale(1.08); box-shadow: 0 6px 24px rgba(37,211,102,.4) } /* ── Responsive breakpoints ──────────────────────────────────────────────── */ @media (min-width: 640px) { .rgrid, .tgrid, .incs { grid-template-columns: repeat(2, 1fr) } .fgrid { grid-template-columns: repeat(2, 1fr) } .ft__grid { grid-template-columns: repeat(2, 1fr) } } @media (min-width: 960px) { .nav { display: block } .ham { display: none } .rgrid { grid-template-columns: repeat(3, 1fr) } .tgrid { grid-template-columns: repeat(3, 1fr) } .ft__grid { grid-template-columns: 1.5fr 1fr 1fr 1.1fr } .scall { display: none } .waf { bottom: 1.5rem } .hero { padding: 5rem 0 5.5rem } .section { padding: 5rem 0 } .container { padding: 0 2rem } } @media (min-width: 1024px) { .incs { grid-template-columns: repeat(3, 1fr) } } @media print { .hdr, .scall, .waf, .cta { display: none } body { color: #000; font-size: 11pt } } /* ── Prose / long-form SEO content ──────────────────────────────────────── */ .prose { max-width: 820px; margin: 0 auto } .prose h2 { font-size: clamp(1.18rem, 2.5vw, 1.4rem); margin: 2.2rem 0 .55rem; color: var(--black); letter-spacing: -.015em; } .prose h3 { font-size: 1.02rem; margin: 1.6rem 0 .4rem; color: var(--g700); font-weight: 700; } .prose p { color: var(--g700); font-size: .92rem; line-height: 1.82; margin-bottom: .9rem; } .prose a { color: var(--accent); font-weight: 500 } .prose a:hover { text-decoration: underline } .prose strong { color: var(--black) } .prose ul { list-style: disc; padding-left: 1.4rem; margin-bottom: .9rem; } .prose ul li { margin-bottom: .35rem; font-size: .92rem; color: var(--g700); line-height: 1.7 } .prose--wide { max-width: none } /* ── Pricing table ───────────────────────────────────────────────────────── */ .ptbl { width: 100%; border-collapse: collapse; margin: 1.5rem 0; border-radius: var(--r); overflow: hidden; border: 1px solid var(--g100); font-size: .87rem; } .ptbl th { background: var(--black); color: var(--white); padding: .85rem 1.1rem; text-align: left; font-size: .75rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } .ptbl td { padding: .8rem 1.1rem; border-bottom: 1px solid var(--g100); color: var(--g700); } .ptbl td:nth-child(2), .ptbl td:nth-child(3) { font-weight: 700; color: var(--black); font-size: .95rem; } .ptbl tr:last-child td { border-bottom: none } .ptbl tr:hover td { background: var(--g50) } .ptbl__note { font-size: .77rem; color: var(--g500); margin-top: .5rem; line-height: 1.6; } /* ── Step-by-step itinerary ──────────────────────────────────────────────── */ .itin { position: relative; padding-left: 3rem; max-width: 680px } .itin::before { content: ''; position: absolute; left: .85rem; top: .9rem; bottom: 0; width: 2px; background: var(--g100); } .itin__step { position: relative; padding-bottom: 1.8rem } .itin__step:last-child { padding-bottom: 0 } .itin__num { position: absolute; left: -3rem; top: 0; width: 1.75rem; height: 1.75rem; background: var(--black); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; z-index: 1; } .itin__time { font-size: .7rem; font-weight: 700; color: var(--accent); text-transform: uppercase; letter-spacing: .06em; margin-bottom: .15rem; } .itin__step h4 { font-size: .95rem; color: var(--black); margin-bottom: .25rem } .itin__step p { font-size: .87rem; color: var(--g500); line-height: 1.65; margin: 0 } /* ── Info highlight block ────────────────────────────────────────────────── */ .hblock { background: var(--g50); border-radius: var(--r); padding: 1.4rem 1.5rem; margin: 1.5rem 0; border-left: 3px solid var(--black); } .hblock h3 { font-size: 1rem; margin-bottom: .6rem; color: var(--black) } .hblock p { font-size: .88rem; color: var(--g700); margin-bottom: .4rem; line-height: 1.7 } .hblock p:last-child { margin-bottom: 0 } .hblock strong { color: var(--black) } /* ── Feature / temple cards ──────────────────────────────────────────────── */ .fcards { display: grid; grid-template-columns: 1fr; gap: .75rem; margin: 1.5rem 0; } .fcard { padding: 1.2rem; background: var(--white); border: 1px solid var(--g100); border-radius: var(--r); transition: box-shadow var(--t); } .fcard:hover { box-shadow: var(--sm) } .fcard h4 { font-size: .9rem; color: var(--black); margin-bottom: .3rem } .fcard p { font-size: .83rem; color: var(--g500); line-height: 1.65; margin: 0 } @media (min-width: 640px) { .fcards { grid-template-columns: repeat(2, 1fr) } } @media (min-width: 960px) { .fcards { grid-template-columns: repeat(3, 1fr) } } /* ── Related route cards ─────────────────────────────────────────────────── */ .rel-grid { display: grid; grid-template-columns: 1fr; gap: .75rem; margin-top: 1.5rem; } .rel-card { display: block; padding: 1.1rem 1.2rem; background: var(--white); border: 1px solid var(--g100); border-radius: var(--r); transition: box-shadow var(--t), border-color var(--t); } .rel-card:hover { border-color: var(--g200); box-shadow: var(--md) } .rel-card h4 { font-size: .87rem; color: var(--black); margin-bottom: .25rem; font-weight: 700 } .rel-card p { font-size: .79rem; color: var(--g500); line-height: 1.55; margin-bottom: .35rem } .rel-card .rp { font-size: .87rem; font-weight: 700; color: var(--black) } @media (min-width: 640px) { .rel-grid { grid-template-columns: repeat(2, 1fr) } } @media (min-width: 960px) { .rel-grid { grid-template-columns: repeat(4, 1fr) } } /* ── Service cards 4-col grid ────────────────────────────────────────────── */ .svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1.5rem; } .svc-grid .route-card { display: flex; flex-direction: column } .svc-grid .route-card p { flex: 1 } @media (min-width: 960px) { .svc-grid { grid-template-columns: repeat(4, 1fr) } } @media (max-width: 400px) { .svc-grid { grid-template-columns: 1fr } } /* ── Dropdown "View All" link ─────────────────────────────────────────────── */ .dd__more { font-size: .78rem !important; font-weight: 700 !important; color: var(--black) !important; border-top: 1px solid var(--g100) !important; margin-top: .25rem; padding-top: .7rem !important; letter-spacing: .01em; } .dd__more:hover { background: var(--g50) !important } /* ── Mobile nav accordion ─────────────────────────────────────────────────── */ .mnav__home { font-weight: 600; color: var(--black) !important; } .mnav__cat { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: .85rem .4rem; font-size: .93rem; font-weight: 600; color: var(--black); background: none; border: none; border-bottom: 1px solid var(--g100); cursor: pointer; text-align: left; font-family: var(--ff); } .mnav__arr { font-size: .7rem; color: var(--g400); transition: transform .2s ease; display: inline-block; } .mnav__cat[aria-expanded="true"] .mnav__arr { transform: rotate(180deg) } .mnav__sub { display: none; background: var(--g50); border-bottom: 1px solid var(--g100); } .mnav__sub.open { display: block } .mnav__sub a { padding-left: 1.4rem !important; font-size: .88rem !important; font-weight: 500 !important; color: var(--g600) !important; border-bottom: 1px solid var(--g100) !important; } .mnav__sub a:last-child { border-bottom: none !important } .mnav__sub a:hover { color: var(--black) !important; background: var(--g100) } /* ── Route category grouping on homepage ─────────────────────────────────── */ .rcat-section { margin-top: 2.5rem } .rcat-section:first-of-type { margin-top: 1.5rem } .rcat-label { display: flex; align-items: center; gap: .5rem; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--g400); margin-bottom: .9rem; padding-bottom: .65rem; border-bottom: 1px solid var(--g100); } /* ── Serve-audience chips ─────────────────────────────────────────────────── */ .serve-strip { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1.5rem } .serve-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .42rem .85rem; border: 1px solid var(--g100); border-radius: var(--rp); font-size: .79rem; font-weight: 500; color: var(--g700); background: var(--white); } /* ── Hero note (small note below CTA group) ──────────────────────────────── */ .hero__note { font-size: .72rem; color: var(--g500); margin-top: .6rem; display: flex; align-items: center; gap: .3rem; } /* ── Premium section divider ─────────────────────────────────────────────── */ .sec-divider { border: none; border-top: 1px solid var(--g100); margin: 0 } /* ══════════════════════════════════════════════════════════════════════════ LUCIDE ICON SYSTEM Primary icon colour: var(--gold) — used for trust/feature contexts only. Buttons / nav / floating elements override with --white or --black. ══════════════════════════════════════════════════════════════════════════ */ /* Base — every Lucide icon inherits this */ .icon, [data-lucide] { display: inline-block; width: 18px; height: 18px; stroke: var(--gold); stroke-width: 1.75; fill: none; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; flex-shrink: 0; transition: stroke var(--t); } /* Size modifiers */ .icon--sm, [data-lucide].icon--sm { width: 15px; height: 15px } .icon--lg, [data-lucide].icon--lg { width: 22px; height: 22px } .icon--xl, [data-lucide].icon--xl { width: 26px; height: 26px } /* Colour modifiers */ .icon--white, [data-lucide].icon--white { stroke: #fff } .icon--black, [data-lucide].icon--black { stroke: var(--black) } .icon--gray, [data-lucide].icon--gray { stroke: var(--g500) } .icon--muted, [data-lucide].icon--muted { stroke: var(--g300) } .icon--green, [data-lucide].icon--green { stroke: var(--green) } .icon--gold, [data-lucide].icon--gold { stroke: var(--gold) } /* Trust chip icons */ .tchip__i [data-lucide], .tchip__i svg { width: 14px; height: 14px; stroke: var(--gold); stroke-width: 2.25; fill: none; stroke-linecap: round; stroke-linejoin: round; } /* Why Choose Us (inc) icons */ .inc__i [data-lucide], .inc__i svg { width: 22px; height: 22px; stroke: var(--gold); stroke-width: 1.75; fill: none; stroke-linecap: round; stroke-linejoin: round; } /* Service card icon wrapper */ .svc-icon { width: 50px; height: 50px; background: var(--gold-bg); border: 1px solid var(--gold-border); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: .9rem; transition: background var(--t); } .svc-icon [data-lucide], .svc-icon svg { width: 22px; height: 22px; stroke: var(--gold); stroke-width: 1.75; fill: none; stroke-linecap: round; stroke-linejoin: round; } .route-card:hover .svc-icon { background: rgba(184,148,58,.14) } /* Footer contact icons */ .ft__ci [data-lucide], .ft__ci svg { width: 13px; height: 13px; stroke: var(--g400); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; } /* Input field icon wrapper */ .field-wrap { position: relative } .field-wrap .field-icon { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); pointer-events: none; display: flex; align-items: center; } .field-wrap .field-icon [data-lucide], .field-wrap .field-icon svg { width: 15px; height: 15px; stroke: var(--g300); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; transition: stroke var(--t); } .field-wrap .finput { padding-left: 2.5rem } .field-wrap:focus-within .field-icon [data-lucide], .field-wrap:focus-within .field-icon svg { stroke: var(--gold) } /* Textarea variant */ .field-wrap--ta .field-icon { top: 1rem; transform: none } .field-wrap--ta .finput { padding-left: 2.5rem; padding-top: .85rem } /* WhatsApp float icon */ .waf [data-lucide], .waf svg { width: 22px; height: 22px; stroke: #fff; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; } /* Route card meta icons (map-pin / clock) */ .rcard__meta [data-lucide], .rcard__meta svg { stroke: var(--g300); stroke-width: 2 } /* Route card call button icon */ .rcard__acts [data-lucide].icon--black { stroke: var(--black) } /* ── Hero stats — visual separators between items ──────────────────────── */ .hero__stats { gap: 0 } .hero__stats > div { padding: 0 2.2rem 0 0; } .hero__stats > div + div { padding: 0 2.2rem; border-left: 1px solid rgba(255,255,255,.12); } .hero__stats > div:last-child { padding-right: 0 } /* ── Section header cluster — tighter on mobile ─────────────────────────── */ .section .text-center .stitle { margin-top: .1rem } .section .text-center + .incs, .section .text-center + .tgrid, .section .text-center + .flist { margin-top: 1.8rem } /* ── Route section category label icon size ─────────────────────────────── */ .rcat-label [data-lucide], .rcat-label svg { stroke: var(--g400); width: 13px; height: 13px; stroke-width: 2 } /* ── Scrollable pricing table on mobile ─────────────────────────────────── */ @media (max-width: 600px) { .ptbl-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--r) } .ptbl { min-width: 480px } } /* ── Better touch targets on mobile ─────────────────────────────────────── */ @media (max-width: 640px) { .btn--lg { padding: .92rem 1.5rem; font-size: .93rem } .hero__acts .btn { flex: 1 1 auto; justify-content: center; min-width: 140px } .cta__acts .btn { flex: 1 1 auto; justify-content: center } .hero__stats { gap: 0 } .hero__stats > div { padding: 0 1.5rem 0 0 } .hero__stats > div + div { padding: 0 1.5rem } .hero__stats > div:last-child { padding-right: 0 } .rcard__acts { gap: .35rem } .mnav__cta .btn { min-height: 48px } } /* ── Mobile CTA bar (3-button sticky bottom) ─────────────────────────────── */ .mcta-bar { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 901; background: var(--white); border-top: 2px solid var(--g200); padding: .5rem .6rem calc(.5rem + env(safe-area-inset-bottom)); gap: .4rem; } .mcta-bar__a { flex: 1; display: flex; align-items: center; justify-content: center; gap: .3rem; padding: .65rem .35rem; border-radius: var(--r); font-size: .78rem; font-weight: 700; text-align: center; text-decoration: none; line-height: 1.1; white-space: nowrap; } .mcta-bar__call { background: var(--black); color: var(--white); } .mcta-bar__wa { background: var(--wa); color: var(--white); } .mcta-bar__book { background: var(--g100); color: var(--black); border: 1px solid var(--g200); } @media (max-width: 959px) { .mcta-bar { display: flex; } .scall { display: none !important; } .waf { display: none !important; } body { padding-bottom: 72px; } }