/* ========================================================================== YASHODHAN TRAVELS — NEW THEME (Preview) Design idea: ek yatra ki pehchaan uski DEPARTURE DATE hai. Isliye page ka sabse bada element "Departure Board" hai — railway station ke board jaisa. Baaki sab uske aas-paas shaant rakha hai. ========================================================================== */ /* ========================================================================== YASHODHAN TRAVELS — THEME v2 Colours yahan HARD-CODED NAHI hain. Wo Admin > Appearance se aate hain aur mein :root{--brand:...} ke roop mein inject hote hain (dekho includes/theme.php -> themeCssVars()). Yahan sirf unke fallback aur baaki design hai. Design reference: kesari.in + vihartravels.in White background · near-black text · red primary · orange accent ========================================================================== */ :root { --brand: #ED1C24; --brand-dark: #C4141B; --accent: #F39A2D; --ink: #111111; --mist: #F8F9FA; --line: #E5E7EB; --hero-tint: 17, 17, 17; --ink-soft: #333333; --ink-mute: #666666; --accent-soft:#FFF4E4; --good: #0E7A5F; --paper: #FFFFFF; } /* ---------- Type ------------------------------------------------------- */ :root { /* Body: Aptos (jaisa aapne kaha) + system fallback. Serif kahin nahi. */ --font: 'Aptos', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; /* Data face: departure board, badges, stats — condensed, board jaisa */ --font-board: 'Barlow Condensed', 'Aptos Narrow', 'Segoe UI', Arial, sans-serif; --wrap: 1180px; --r: 10px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--paper); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { margin: 0; line-height: 1.18; letter-spacing: -0.015em; font-weight: 700; } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; } .mist { background: var(--mist); } /* section rhythm — ek hi jagah define, taaki aapas mein na takraye */ .section { padding: 76px 0; } .section-head { margin-bottom: 38px; max-width: 640px; } .eyebrow { font-family: var(--font-board); font-size: 15px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--brand); display: block; margin-bottom: 10px; } .section-head h2 { font-size: 34px; } .section-head p { color: var(--ink-mute); margin: 12px 0 0; font-size: 16.5px; } /* ---------- Buttons ---------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 13px 26px; border-radius: 7px; font-weight: 600; font-size: 15px; border: 1.5px solid transparent; cursor: pointer; transition: .18s ease; font-family: var(--font); } .btn-primary { background: var(--brand); color: #fff; } .btn-primary:hover { background: var(--brand-dark); } .btn-ghost { border-color: var(--line); color: var(--ink); background: #fff; } .btn-ghost:hover { border-color: var(--ink); } .btn-light { background: #fff; color: var(--ink); } .btn-sm { padding: 9px 16px; font-size: 13.5px; } .btn:focus-visible, a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; } /* ========================================================================== TOP BAR + HEADER ========================================================================== */ .topbar { background: var(--ink); color: #CFCFCF; font-size: 13.5px; padding: 9px 0; } .topbar .wrap { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; } .topbar b { color: #fff; } .topbar a { color: #CFCFCF; } .topbar a:hover { color: #fff; } .topbar .sep { opacity: .35; margin: 0 10px; } .site-header { position: sticky; top: 0; z-index: 900; background: #fff; border-bottom: 1px solid var(--line); } .site-header .wrap { display: flex; align-items: center; gap: 28px; height: 78px; } .logo img { height: 46px; width: auto; } .nav { margin-left: auto; display: flex; gap: 30px; } .nav a { font-weight: 600; font-size: 15px; color: var(--ink); padding: 6px 0; border-bottom: 2.5px solid transparent; } .nav a:hover, .nav a.on { color: var(--brand); border-bottom-color: var(--brand); } .header-cta { display: flex; align-items: center; gap: 14px; } .header-phone { font-family: var(--font-board); font-size: 21px; font-weight: 600; letter-spacing: .01em; } .header-phone small { display: block; font-family: var(--font); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); font-weight: 600; } .burger { display: none; background: none; border: 0; font-size: 26px; color: var(--ink); cursor: pointer; } /* ========================================================================== HERO ========================================================================== */ .hero { position: relative; color: #fff; } .hero-bg { position: absolute; inset: 0; overflow: hidden; } .hero-bg img { width: 100%; height: 100%; object-fit: cover; } .hero-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, rgba(var(--hero-tint), .93) 0%, rgba(var(--hero-tint), .78) 45%, rgba(var(--hero-tint), .42) 100%); } .hero-in { position: relative; padding: 84px 0 132px; } .hero-mark { font-family: var(--font-board); letter-spacing: .22em; text-transform: uppercase; font-size: 14px; font-weight: 600; color: var(--accent); margin-bottom: 18px; } .hero h1 { font-size: 50px; max-width: 15ch; letter-spacing: -0.025em; } .hero .marathi { font-size: 21px; color: var(--accent); margin: 18px 0 0; max-width: 34ch; line-height: 1.5; } .hero p.lede { font-size: 17px; color: #E4E4E4; max-width: 46ch; margin: 14px 0 0; } .hero-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; } .hero-badges span { font-family: var(--font-board); font-size: 14.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; padding: 7px 15px; border-radius: 20px; background: rgba(255,255,255,.13); border: 1px solid rgba(255,255,255,.25); } /* search row */ .finder { background: #fff; border-radius: var(--r); padding: 16px; box-shadow: 0 22px 48px -24px rgba(0,0,0,.55); margin-top: 34px; display: grid; grid-template-columns: 1.3fr 1fr 1fr auto; gap: 12px; max-width: 940px; } .finder label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 5px; } .finder select { width: 100%; border: 1px solid var(--line); border-radius: 6px; padding: 11px 12px; font-family: var(--font); font-size: 15px; color: var(--ink); background: #fff; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-mute) 50%), linear-gradient(135deg, var(--ink-mute) 50%, transparent 50%); background-position: calc(100% - 17px) 20px, calc(100% - 12px) 20px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .finder .fld { text-align: left; } .finder .btn { align-self: end; height: 44px; } /* ========================================================================== *** SIGNATURE *** — DEPARTURE BOARD Railway station ke board jaisa. Yatra ki pehchaan uski nikalne ki date hai. ========================================================================== */ .board-holder { margin-top: -76px; position: relative; z-index: 5; } .board { background: #fff; border-radius: var(--r); overflow: hidden; box-shadow: 0 26px 60px -30px rgba(0,0,0,.4); border: 1px solid var(--line); } .board-top { background: var(--ink); color: #fff; padding: 15px 24px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .board-top h2 { font-family: var(--font-board); font-size: 24px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } .board-top .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(240,165,0,.25); } .board-top .note { margin-left: auto; font-size: 13px; color: #BDBDBD; } .board-row { display: grid; grid-template-columns: 92px 1fr 132px 118px auto; gap: 20px; align-items: center; padding: 17px 24px; border-top: 1px solid var(--line); } .board-row:hover { background: var(--mist); } .dep-date { font-family: var(--font-board); text-align: center; line-height: 1; border-right: 2px dashed var(--line); padding-right: 14px; } .dep-date .d { font-size: 34px; font-weight: 700; display: block; } .dep-date .m { font-size: 14px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--brand); display: block; margin-top: 3px; } .dep-date .y { font-size: 12px; color: var(--ink-mute); display: block; } .dep-name { min-width: 0; } .dep-name h3 { font-size: 18px; } .dep-name p { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-mute); } .dep-name .tag { display: inline-block; font-family: var(--font-board); font-size: 13px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-soft); background: var(--mist); border: 1px solid var(--line); padding: 2px 9px; border-radius: 4px; margin-right: 7px; } .dep-meta { font-family: var(--font-board); font-size: 17px; font-weight: 500; letter-spacing: .04em; } .dep-meta small { display: block; font-family: var(--font); font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); font-weight: 700; margin-bottom: 2px; } .seats { color: var(--good); font-weight: 600; } .seats.few { color: var(--brand); } .dep-price { text-align: right; } .dep-price .amt { font-family: var(--font-board); font-size: 27px; font-weight: 700; color: var(--brand); line-height: 1; } .dep-price small { display: block; font-size: 11px; color: var(--ink-mute); margin-top: 3px; } .board-foot { background: var(--mist); padding: 15px 24px; display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; border-top: 1px solid var(--line); font-size: 14px; color: var(--ink-mute); } /* ========================================================================== TOUR CARDS ========================================================================== */ .chips { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 30px; } .chip { font-size: 14.5px; font-weight: 600; padding: 9px 19px; border-radius: 22px; border: 1.5px solid var(--line); background: #fff; color: var(--ink-soft); cursor: pointer; font-family: var(--font); } .chip:hover { border-color: var(--ink-mute); } .chip.on { background: var(--ink); border-color: var(--ink); color: #fff; } .grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease; } .card:hover { transform: translateY(-4px); box-shadow: 0 18px 38px -22px rgba(0,0,0,.35); } .card-pic { position: relative; aspect-ratio: 4/3; overflow: hidden; } .card-pic img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; } .card:hover .card-pic img { transform: scale(1.05); } .off { position: absolute; top: 12px; left: 12px; background: var(--accent); color: #FFFFFF; font-family: var(--font-board); font-size: 14px; font-weight: 700; letter-spacing: .06em; padding: 4px 11px; border-radius: 4px; } .card-type { position: absolute; bottom: 12px; left: 12px; background: rgba(255,255,255,.94); font-family: var(--font-board); font-size: 13.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); padding: 4px 11px; border-radius: 4px; } .card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; } .card-body h3 { font-size: 19px; } .card-route { font-size: 13.5px; color: var(--ink-mute); margin: 7px 0 0; } .card-facts { display: flex; gap: 16px; margin: 13px 0 16px; padding: 11px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-family: var(--font-board); font-size: 16px; letter-spacing: .03em; } .card-facts span { display: flex; align-items: center; gap: 6px; } .card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .price .old { font-size: 13.5px; color: var(--ink-mute); text-decoration: line-through; } .price .now { font-family: var(--font-board); font-size: 26px; font-weight: 700; color: var(--brand); line-height: 1; } .price small { font-size: 11px; color: var(--ink-mute); display: block; } /* ========================================================================== STATS BAND ========================================================================== */ .stats { background: var(--ink); color: #fff; padding: 54px 0; } .stats .grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; text-align: center; } .stat .n { font-family: var(--font-board); font-size: 46px; font-weight: 700; color: var(--accent); line-height: 1; } .stat p { margin: 8px 0 0; font-size: 14.5px; color: #C7C7C7; } /* ========================================================================== WHY US ========================================================================== */ .why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; } .why-item { padding: 26px 22px; background: #fff; border: 1px solid var(--line); border-radius: var(--r); } .why-item .ic { width: 46px; height: 46px; border-radius: 10px; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 15px; } .why-item h3 { font-size: 17px; } .why-item p { margin: 8px 0 0; font-size: 14.5px; color: var(--ink-mute); } /* ========================================================================== DESTINATIONS ========================================================================== */ .dests { display: grid; grid-template-columns: repeat(6, 1fr); gap: 22px; } .dest { text-align: center; } .dest .pic { aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 3px solid #fff; box-shadow: 0 8px 22px -12px rgba(0,0,0,.4); transition: transform .25s ease; } .dest:hover .pic { transform: translateY(-5px); } .dest .pic img { width: 100%; height: 100%; object-fit: cover; } .dest span { display: block; margin-top: 12px; font-size: 14.5px; font-weight: 600; } /* ========================================================================== TESTIMONIALS ========================================================================== */ .says { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .say { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 26px 24px; } .say .stars { color: var(--accent); font-size: 16px; letter-spacing: 3px; } .say p { font-size: 15.5px; color: var(--ink-soft); margin: 12px 0 18px; } .say .who { display: flex; align-items: center; gap: 12px; } .say .av { width: 42px; height: 42px; border-radius: 50%; background: var(--ink); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; } .say .who b { display: block; font-size: 14.5px; } .say .who small { color: var(--ink-mute); font-size: 13px; } /* ========================================================================== CTA + FOOTER ========================================================================== */ .cta { background: var(--brand); color: #fff; padding: 56px 0; } .cta .wrap { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; justify-content: space-between; } .cta h2 { font-size: 30px; } .cta p { margin: 8px 0 0; color: rgba(255,255,255,.88); font-size: 16px; } .site-footer { background: var(--ink); color: #B5B5B5; padding: 60px 0 0; font-size: 14.5px; } .foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.4fr; gap: 40px; } .site-footer h4 { color: #fff; font-family: var(--font-board); font-size: 19px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 18px; } .site-footer ul { list-style: none; padding: 0; margin: 0; } .site-footer li { margin-bottom: 10px; } .site-footer a:hover { color: #fff; } .site-footer .logo-f img { height: 44px; background: #fff; padding: 7px 10px; border-radius: 6px; } .foot-bottom { margin-top: 48px; border-top: 1px solid rgba(255,255,255,.12); padding: 20px 0; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13.5px; } /* ========================================================================== FLOATING WHATSAPP ========================================================================== */ .wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 950; width: 54px; height: 54px; border-radius: 50%; background: #25D366; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 26px; box-shadow: 0 10px 26px -10px rgba(0,0,0,.5); } /* ========================================================================== TOUR DETAIL PAGE ========================================================================== */ .tour-hero { position: relative; color: #fff; } .tour-hero .hero-bg::after { background: linear-gradient(180deg, rgba(var(--hero-tint), .55), rgba(var(--hero-tint), .88)); } .tour-hero-in { position: relative; padding: 74px 0 40px; } .crumb { font-size: 13.5px; color: #DADADA; margin-bottom: 14px; } .crumb a:hover { color: #fff; } .tour-hero h1 { font-size: 42px; max-width: 20ch; } .tour-hero .sub { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; } .tour-hero .sub span { font-family: var(--font-board); font-size: 14.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.26); padding: 5px 13px; border-radius: 20px; } .tabbar { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 78px; z-index: 800; } .tabbar ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 32px; } .tabbar li { padding: 16px 0; font-weight: 600; font-size: 15px; color: var(--ink-mute); border-bottom: 3px solid transparent; cursor: pointer; } .tabbar li:hover { color: var(--ink); } .tabbar li.on { color: var(--brand); border-bottom-color: var(--brand); } .tour-layout { display: grid; grid-template-columns: 1fr 350px; gap: 32px; padding: 40px 0 70px; align-items: start; } .panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 30px; margin-bottom: 26px; } .panel h2 { font-size: 24px; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 22px; } .tabpane { display: none; } .tabpane.on { display: block; } .day { display: grid; grid-template-columns: 74px 1fr; gap: 20px; padding: 20px 0; border-bottom: 1px solid var(--line); } .day:last-child { border-bottom: 0; padding-bottom: 0; } .day-no { font-family: var(--font-board); text-align: center; background: var(--mist); border-radius: 8px; padding: 9px 6px; border: 1px solid var(--line); align-self: start; } .day-no b { display: block; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-mute); } .day-no .dt { display: block; font-size: 17px; font-weight: 600; color: var(--brand); margin-top: 2px; } .day h3 { font-size: 17.5px; } .day p { margin: 7px 0 0; font-size: 15px; color: var(--ink-mute); } .two { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; } .inc-list { list-style: none; padding: 0; margin: 0; } .inc-list li { font-size: 15px; padding: 8px 0 8px 28px; position: relative; color: var(--ink-soft); } .inc-list li::before { position: absolute; left: 0; font-weight: 700; } .yes li::before { content: '✓'; color: var(--good); } .no li::before { content: '✕'; color: var(--brand); } .sticky-side { position: sticky; top: 148px; } .buy { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 24px; margin-bottom: 22px; } .buy .lab { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); font-weight: 700; } .buy .amt { font-family: var(--font-board); font-size: 40px; font-weight: 700; color: var(--brand); line-height: 1.05; } .buy .per { font-size: 13px; color: var(--ink-mute); margin-bottom: 18px; } .buy .acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; } .buy .acts a { text-align: center; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; padding: 10px 4px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink-soft); } .buy .acts a:hover { border-color: var(--ink-mute); color: var(--brand); } .buy .btn { width: 100%; } .side-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 22px 24px; margin-bottom: 22px; } .side-card h4 { font-family: var(--font-board); font-size: 19px; letter-spacing: .1em; text-transform: uppercase; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 16px; } .dates { display: flex; flex-direction: column; gap: 9px; } .date-pill { display: flex; justify-content: space-between; align-items: center; gap: 10px; border: 1.5px solid var(--line); border-radius: 8px; padding: 10px 14px; font-family: var(--font-board); font-size: 16px; letter-spacing: .03em; cursor: pointer; } .date-pill:hover { border-color: var(--accent); background: var(--accent-soft); } .date-pill.on { background: var(--ink); border-color: var(--ink); color: #fff; } .date-pill em { font-style: normal; font-family: var(--font); font-size: 11.5px; color: var(--good); font-weight: 700; } .date-pill.on em { color: var(--accent); } .gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } .gal img { aspect-ratio: 4/3; object-fit: cover; border-radius: 8px; width: 100%; } .mapbox { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; } .mapbox iframe { display: block; width: 100%; height: 340px; border: 0; } /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width: 1000px) { .grid, .why, .says { grid-template-columns: repeat(2, 1fr); } .dests { grid-template-columns: repeat(4, 1fr); } .tour-layout { grid-template-columns: 1fr; } .sticky-side { position: static; } .finder { grid-template-columns: 1fr 1fr; } } @media (max-width: 760px) { .nav, .header-cta .header-phone { display: none; } .burger { display: block; margin-left: auto; } .nav.open { display: flex; flex-direction: column; position: absolute; top: 78px; left: 0; right: 0; background: #fff; padding: 14px 24px 22px; gap: 4px; border-bottom: 1px solid var(--line); box-shadow: 0 16px 30px -18px rgba(0,0,0,.4); } .nav.open a { padding: 11px 0; border-bottom: 1px solid var(--line); } .section { padding: 52px 0; } .hero h1 { font-size: 32px; } .hero .marathi { font-size: 18px; } .hero-in { padding: 54px 0 100px; } .finder { grid-template-columns: 1fr; } .board-row { grid-template-columns: 76px 1fr; row-gap: 12px; } .dep-meta, .dep-price { grid-column: span 1; text-align: left; } .dep-price { text-align: right; } .board-row .btn { grid-column: 1 / -1; } .grid, .why, .says, .two, .gal { grid-template-columns: 1fr; } .dests { grid-template-columns: repeat(3, 1fr); } .stats .grid4 { grid-template-columns: repeat(2, 1fr); gap: 30px; } .section-head h2, .cta h2 { font-size: 26px; } .foot-grid { grid-template-columns: 1fr 1fr; gap: 30px; } .tabbar { top: 0; } .tabbar ul { gap: 20px; overflow-x: auto; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } .card:hover { transform: none; } .card:hover .card-pic img { transform: none; } .dest:hover .pic { transform: none; } } /* ========================================================================== INNER PAGES — banner, tours listing, about, contact, destinations, terms ========================================================================== */ .page-banner { position: relative; color: #fff; background: var(--ink); padding: 62px 0 56px; overflow: hidden; } .page-banner .bg { position: absolute; inset: 0; } .page-banner .bg img { width: 100%; height: 100%; object-fit: cover; } .page-banner .bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(var(--hero-tint), .92), rgba(var(--hero-tint), .62)); } .page-banner .wrap { position: relative; } .page-banner h1 { font-size: 40px; } .page-banner .crumb { margin-bottom: 12px; } /* ---- tours listing: sidebar filter + cards ---- */ .list-layout { display: grid; grid-template-columns: 280px 1fr; gap: 32px; align-items: start; } .filter-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 24px; position: sticky; top: 100px; } .filter-card h4 { font-family: var(--font-board); font-size: 19px; letter-spacing: .1em; text-transform: uppercase; padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 18px; } .filter-card label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-mute); margin: 14px 0 5px; } .filter-card input, .filter-card select { width: 100%; border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; font-family: var(--font); font-size: 15px; color: var(--ink); background: #fff; } .filter-card .btn { width: 100%; margin-top: 16px; } .empty-box { text-align: center; padding: 70px 24px; background: var(--mist); border: 1px dashed var(--line); border-radius: var(--r); color: var(--ink-mute); } .empty-box h3 { font-size: 22px; color: var(--ink); margin-bottom: 10px; } /* pagination */ .pager { display: flex; gap: 8px; justify-content: center; margin-top: 44px; flex-wrap: wrap; } .pager a, .pager span { min-width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); border-radius: 7px; font-weight: 600; font-size: 15px; background: #fff; padding: 0 12px; } .pager a:hover { border-color: var(--ink); } .pager .now { background: var(--brand); border-color: var(--brand); color: #fff; } /* ---- generic content page (about / terms) ---- */ .prose { font-size: 16.5px; line-height: 1.85; color: var(--ink-soft); max-width: 76ch; } .prose p { margin: 0 0 18px; } .prose h2 { font-size: 27px; margin: 34px 0 14px; } .prose h3 { font-size: 21px; margin: 26px 0 10px; } .prose ul { padding-left: 0; list-style: none; margin: 0 0 20px; } .prose ul li { position: relative; padding: 7px 0 7px 28px; } .prose ul li::before { content: '✓'; position: absolute; left: 0; color: var(--good); font-weight: 700; } /* ---- contact ---- */ .contact-grid { display: grid; grid-template-columns: 1fr 380px; gap: 32px; align-items: start; } .contact-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 28px; } .contact-card h3 { font-size: 20px; margin-bottom: 18px; } .contact-line { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 15px; } .contact-line:last-child { border-bottom: 0; } .contact-line .ic { width: 38px; height: 38px; flex: 0 0 38px; border-radius: 9px; background: var(--accent-soft); display: flex; align-items: center; justify-content: center; font-size: 17px; } .contact-line b { display: block; font-size: 13px; color: var(--ink-mute); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 2px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .field { margin-bottom: 16px; } .field label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 6px; } .field input, .field textarea, .field select { width: 100%; border: 1px solid var(--line); border-radius: 7px; padding: 12px 14px; font-family: var(--font); font-size: 15.5px; color: var(--ink); background: #fff; } .field textarea { resize: vertical; min-height: 120px; } .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px rgba(237,28,36,.12); } .note { padding: 14px 18px; border-radius: 8px; font-size: 15px; margin-bottom: 20px; border: 1px solid var(--line); } .note.ok { background: #EAF7F1; border-color: #BFE5D5; color: #0B5F49; } .note.bad { background: #FDECEC; border-color: #F7C9C9; color: #A31B1B; } /* ---- terms page (images) ---- */ .terms-doc { max-width: 1000px; margin: 0 auto; } .terms-image { display: block; width: 100%; height: auto; margin: 0 auto 24px; border: 1px solid var(--line); border-radius: 8px; background: #fff; box-shadow: 0 3px 16px -10px rgba(0,0,0,.3); } .terms-note { max-width: 1000px; margin: 20px auto 0; font-size: 15px; color: var(--ink-mute); text-align: center; line-height: 1.8; } @media (max-width: 1000px) { .list-layout, .contact-grid { grid-template-columns: 1fr; } .filter-card { position: static; } } @media (max-width: 760px) { .page-banner h1 { font-size: 28px; } .form-row { grid-template-columns: 1fr; } } /* ========================================================================== PRINT (tour page ka PRINT button) ========================================================================== */ @media print { .topbar, .site-header, .tabbar, .site-footer, .wa-float, .cta, .buy .acts, .buy .btn, .board-foot { display: none !important; } .tabpane { display: block !important; page-break-inside: avoid; } .panel { border: none; box-shadow: none; padding: 0 0 16px; } .tour-hero { padding: 20px 0; } .tour-hero .hero-bg { display: none; } .tour-hero h1, .crumb, .tour-hero .sub span { color: #000 !important; } body { background: #fff !important; } } /* Footer credit line */ .foot-bottom .credit a { color: #fff; border-bottom: 1px solid rgba(255,255,255,.35); } .foot-bottom .credit a:hover { color: var(--accent); border-bottom-color: var(--accent); } @media (max-width: 760px) { .foot-bottom { flex-direction: column; gap: 8px; text-align: center; } }