/* ========================================================================== Madni Tour & Travels — Bikaner, Rajasthan Hajj · Umrah · Ziyarat — homepage -------------------------------------------------------------------------- Palette comes from the company emblem: forest green + gold on cream. Gold is used for rules, small caps and accents — never as a large fill. Type: Lora for headings, Mukta for text and UI (Mukta also carries the Devanagari used in the brand lockup and the announcement bar). Motion: everything animates on transform/opacity only, runs on one easing curve, and is fully disabled under prefers-reduced-motion. Reveal states are gated behind .js-anim on , so with JavaScript off every section is simply visible — nothing is ever hidden by a script that failed. Single committed light theme; every colour is painted explicitly. ========================================================================== */ /* ---------- 1. Tokens ---------------------------------------------------- */ :root{ color-scheme: light; /* brand */ --green-900:#0A3A24; --green-800:#0E4A2E; --green-700:#14663C; --green-600:#1B7A49; --green-50:#EAF1EC; --gold:#C9A227; --gold-lt:#E0BE55; --gold-deep:#96771A; /* surfaces */ --cream:#FAF7EF; --cream-2:#F3EDE0; --white:#FFFFFF; /* ink */ --ink:#16211B; --ink-2:#54615A; --ink-3:#87918A; --on-dark:#F4F1E7; --on-dark-2:#BCCAC1; --line:#E5DECB; --line-2:#EFEADC; --wa:#25A75A; --wa-dk:#1B8447; /* layout */ --shell:1600px; --pad:clamp(16px,3.4vw,48px); --band:clamp(3.6rem,6vw,6.5rem); --measure:64ch; /* radius */ --r-sm:8px; --r-md:14px; --r-lg:20px; --r-pill:999px; /* elevation — green-tinted, layered */ --sh-1:0 1px 2px rgba(10,58,36,.05), 0 4px 12px -6px rgba(10,58,36,.12); --sh-2:0 2px 4px rgba(10,58,36,.06), 0 14px 30px -14px rgba(10,58,36,.22); --sh-3:0 4px 8px rgba(10,58,36,.07), 0 28px 56px -22px rgba(10,58,36,.34); --sh-gold:0 14px 34px -14px rgba(201,162,39,.55); /* motion */ --ease:cubic-bezier(.16,1,.3,1); --ease-soft:cubic-bezier(.4,0,.2,1); --t-fast:.22s; --t-mid:.42s; --t-slow:.75s; /* girih-inspired tile, used at low opacity on dark bands */ --pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23E0BE55' stroke-width='1.1'%3E%3Cpath d='M36 1 71 36 36 71 1 36Z'/%3E%3Cpath d='M36 17 55 36 36 55 17 36Z'/%3E%3Cpath d='M1 1 71 71M71 1 1 71' stroke-width='.5'/%3E%3C/g%3E%3C/svg%3E"); } /* ---------- 2. Reset ----------------------------------------------------- */ *,*::before,*::after{ box-sizing:border-box; } html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; } body{ margin:0; background:var(--cream); color:var(--ink); font-family:"Mukta","Noto Sans Devanagari",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; font-size:17px; line-height:1.72; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{ max-width:100%; display:block; } button,input,select,textarea{ font:inherit; color:inherit; } a{ color:var(--green-700); text-underline-offset:3px; } h1,h2,h3,h4{ font-family:Lora,Georgia,"Times New Roman",serif; font-weight:600; line-height:1.2; margin:0; text-wrap:balance; color:var(--ink); letter-spacing:-.012em; } p{ margin:0 0 1rem; } ul{ margin:0; padding:0; list-style:none; } :focus-visible{ outline:3px solid var(--gold); outline-offset:3px; border-radius:var(--r-sm); } /* ---------- 3. Motion system -------------------------------------------- */ /* Reveal states apply only once JS confirms it can run them. */ .js-anim [data-rv]{ opacity:0; transform:translate3d(0,26px,0); transition:opacity var(--t-slow) var(--ease) var(--rv-d,0ms), transform var(--t-slow) var(--ease) var(--rv-d,0ms); will-change:opacity, transform; } .js-anim [data-rv].is-in{ opacity:1; transform:none; will-change:auto; } .js-anim [data-rv="left"]{ transform:translate3d(-30px,0,0); } .js-anim [data-rv="right"]{ transform:translate3d(30px,0,0); } .js-anim [data-rv="zoom"]{ transform:scale(.965); } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } .js-anim [data-rv]{ opacity:1 !important; transform:none !important; } } /* Never let animation state hide content on paper. */ @media print{ .js-anim [data-rv], .js-anim .hero__text > *{ opacity:1 !important; transform:none !important; animation:none !important; } .masthead{ position:static; } .fab{ display:none !important; } } /* ---------- 4. Layout ---------------------------------------------------- */ .shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:var(--pad); } .band{ padding-block:var(--band); position:relative; } .band--cream{ background:var(--cream); } .band--white{ background:var(--white); } .band--dark{ background:var(--green-900); color:var(--on-dark); overflow:hidden; } .band--dark::before{ content:""; position:absolute; inset:0; background-image:var(--pattern); opacity:.05; pointer-events:none; } .band--dark > .shell{ position:relative; z-index:1; } .kicker{ font-size:.74rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-deep); margin:0 0 .85rem; } .band--dark .kicker{ color:var(--gold-lt); } .kicker--rule{ display:flex; align-items:center; gap:.85rem; } .kicker--rule::before{ content:""; width:38px; height:2px; background:var(--gold); flex:none; border-radius:2px; } .band--dark .kicker--rule::before{ background:var(--gold-lt); } .h2{ font-size:clamp(1.85rem,3vw,2.75rem); margin-bottom:.9rem; } .band--dark .h2{ color:var(--on-dark); } .lead{ color:var(--ink-2); max-width:var(--measure); margin:0; } .band--dark .lead{ color:var(--on-dark-2); } .head-center{ text-align:center; max-width:760px; margin:0 auto clamp(2.4rem,4vw,3.4rem); } .head-center .kicker--rule{ justify-content:center; } .head-center .lead{ margin-inline:auto; } /* ---------- 5. Buttons --------------------------------------------------- */ .btn{ position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:.6rem; padding:.95rem 1.75rem; border:1.5px solid transparent; border-radius:var(--r-sm); font-weight:700; font-size:.97rem; line-height:1.2; text-decoration:none; cursor:pointer; text-align:center; transition:background-color var(--t-fast) var(--ease-soft), color var(--t-fast) var(--ease-soft), border-color var(--t-fast) var(--ease-soft), transform var(--t-fast) var(--ease), box-shadow var(--t-mid) var(--ease); } .btn:hover{ transform:translateY(-2px); } .btn:active{ transform:translateY(0); } .btn__ico{ width:18px; height:18px; flex:none; transition:transform var(--t-mid) var(--ease); } .btn:hover .btn__ico{ transform:translateX(4px); } .btn--green{ background:var(--green-800); color:var(--on-dark); } .btn--green:hover{ background:var(--green-700); box-shadow:var(--sh-2); } .btn--outline{ background:transparent; color:var(--green-800); border-color:var(--green-800); } .btn--outline:hover{ background:var(--green-800); color:var(--on-dark); box-shadow:var(--sh-2); } .btn--gold{ background:var(--gold); color:var(--green-900); } .btn--gold:hover{ background:var(--gold-lt); box-shadow:var(--sh-gold); } .btn--wa{ background:var(--wa); color:#fff; } .btn--wa:hover{ background:var(--wa-dk); box-shadow:0 14px 30px -14px rgba(37,167,90,.65); } .btn--ghost-light{ background:transparent; color:var(--on-dark); border-color:rgba(224,190,85,.5); } .btn--ghost-light:hover{ background:var(--gold); color:var(--green-900); border-color:var(--gold); box-shadow:var(--sh-gold); } .btn--block{ width:100%; } .btn--sm{ padding:.68rem 1.25rem; font-size:.89rem; } /* ---------- 6. Announcement bar ----------------------------------------- */ .announce{ background:var(--green-900); color:var(--on-dark-2); font-size:.82rem; position:relative; overflow:hidden; } .announce::before{ content:""; position:absolute; inset:0; background-image:var(--pattern); opacity:.05; } .announce__in{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:42px; flex-wrap:wrap; } .announce__tag{ display:inline-flex; align-items:center; gap:.55rem; color:var(--gold-lt); } .announce__tag svg{ width:14px; height:14px; flex:none; } .announce__pts{ display:flex; gap:1.7rem; flex-wrap:wrap; } .announce__pt{ display:inline-flex; align-items:center; gap:.42rem; } .announce__pt svg{ width:13px; height:13px; color:var(--gold-lt); flex:none; } @media (max-width:900px){ .announce__pts{ display:none; } } /* ---------- 7. Header ---------------------------------------------------- */ .masthead{ background:rgba(250,247,239,.88); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:70; transition:box-shadow var(--t-mid) var(--ease-soft), background var(--t-mid) var(--ease-soft); } .masthead.is-stuck{ background:rgba(250,247,239,.96); box-shadow:0 8px 30px -18px rgba(10,58,36,.5); } .masthead__in{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; min-height:104px; transition:min-height var(--t-mid) var(--ease-soft); } .masthead.is-stuck .masthead__in{ min-height:84px; } .brand{ display:flex; align-items:center; gap:1rem; text-decoration:none; } .brand__mark{ width:78px; height:78px; flex:none; transition:transform var(--t-mid) var(--ease), width var(--t-mid) var(--ease-soft), height var(--t-mid) var(--ease-soft); } .brand:hover .brand__mark{ transform:scale(1.06) rotate(-3deg); } .masthead.is-stuck .brand__mark{ width:62px; height:62px; } .brand__hi{ display:block; font-family:Lora,Georgia,serif; font-weight:700; font-size:1.46rem; line-height:1.18; color:var(--green-800); } .brand__en{ display:block; font-size:.79rem; font-weight:600; letter-spacing:.04em; color:var(--ink-3); line-height:1.4; margin-top:2px; } @media (max-width:520px){ .brand__mark{ width:56px; height:56px; } .masthead.is-stuck .brand__mark{ width:50px; height:50px; } .brand__hi{ font-size:1.12rem; } .brand__en{ font-size:.7rem; } } .nav{ display:flex; align-items:center; gap:2.1rem; } .nav__list{ display:flex; gap:1.7rem; } .nav__list a{ position:relative; text-decoration:none; color:var(--ink-2); font-weight:600; font-size:.95rem; padding-block:.4rem; transition:color var(--t-fast) var(--ease-soft); } .nav__list a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:2px; border-radius:2px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform var(--t-mid) var(--ease); } .nav__list a:hover{ color:var(--green-800); } .nav__list a:hover::after{ transform:scaleX(1); } .nav__list a[aria-current="page"]{ color:var(--green-800); } .nav__list a[aria-current="page"]::after{ background:var(--green-800); transform:scaleX(1); } .headphone{ display:flex; align-items:center; gap:.75rem; text-decoration:none; } .headphone__ico{ width:46px; height:46px; flex:none; border-radius:50%; background:var(--gold); display:grid; place-items:center; color:var(--green-900); transition:transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease); } .headphone:hover .headphone__ico{ transform:scale(1.08); box-shadow:var(--sh-gold); } .headphone__ico svg{ width:20px; height:20px; } .headphone__nums{ font-size:.88rem; font-weight:700; color:var(--green-800); line-height:1.45; } .headphone__nums span{ display:block; } @media (max-width:1250px){ .headphone__nums{ display:none; } } .nav__toggle{ display:none; background:transparent; border:1px solid var(--line); border-radius:var(--r-sm); padding:.55rem .72rem; cursor:pointer; transition:background var(--t-fast), border-color var(--t-fast); } .nav__toggle:hover{ background:var(--white); border-color:var(--green-800); } .nav__toggle svg{ width:22px; height:22px; display:block; color:var(--green-800); } @media (max-width:1150px){ .nav__list{ display:none; position:absolute; inset-inline:0; top:100%; flex-direction:column; gap:0; background:var(--white); border-block:1px solid var(--line); box-shadow:var(--sh-3); padding:.4rem var(--pad) 1.1rem; } .nav__list.is-open{ display:flex; animation:navDrop var(--t-mid) var(--ease); } .nav__list a{ padding:.95rem 0; border-bottom:1px solid var(--line-2); font-size:1.05rem; } .nav__list a::after{ display:none; } .nav__toggle{ display:block; } } @keyframes navDrop{ from{ opacity:0; transform:translateY(-10px); } to{ opacity:1; transform:none; } } /* ---------- 8. Hero ------------------------------------------------------ */ .hero{ position:relative; background:var(--cream); overflow:hidden; } .hero::after{ content:""; position:absolute; left:0; bottom:0; width:min(560px,45%); height:70%; background:radial-gradient(60% 60% at 0% 100%, rgba(20,102,60,.07), transparent 72%); pointer-events:none; } /* The source is portrait, so below the desktop split the panel needs an explicit height — otherwise it renders nearly 1400px tall on a phone. */ .hero__media{ position:relative; height:clamp(300px,54vw,460px); overflow:hidden; } .hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center 26%; animation:heroZoom 12s var(--ease-soft) forwards; } @keyframes heroZoom{ from{ transform:scale(1.07); } to{ transform:scale(1); } } @media (prefers-reduced-motion: reduce){ .hero__media img{ animation:none; } } .hero__badge{ position:absolute; left:0; right:0; bottom:0; background:var(--green-800); color:var(--on-dark); display:flex; align-items:center; gap:1rem; padding:1.05rem 1.5rem; box-shadow:var(--sh-3); } .hero__badge svg{ width:32px; height:32px; color:var(--gold-lt); flex:none; } .hero__badge b{ display:block; font-size:1rem; font-weight:700; line-height:1.35; } .hero__badge span{ display:block; font-size:.84rem; color:var(--on-dark-2); } .hero__text{ padding-block:clamp(2.6rem,5vw,5rem); position:relative; z-index:2; } .hero__pill{ display:inline-block; font-size:.72rem; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-deep); background:var(--white); border:1px solid var(--line); padding:.48rem 1.1rem; border-radius:var(--r-pill); margin-bottom:1.5rem; box-shadow:var(--sh-1); } .hero__title{ font-size:clamp(2.2rem,4.4vw,3.7rem); line-height:1.1; margin-bottom:1.2rem; } .hero__sub{ font-family:Lora,Georgia,serif; font-size:clamp(1.18rem,1.9vw,1.55rem); font-weight:500; color:var(--green-800); padding-top:1.2rem; margin-bottom:1.25rem; position:relative; } .hero__sub::before{ content:""; position:absolute; top:0; left:0; width:64px; height:3px; background:var(--gold); border-radius:3px; } .hero__copy{ color:var(--ink-2); max-width:52ch; margin-bottom:2.1rem; font-size:1.04rem; } /* Four across on one row — icon above label, so they stay on a single line inside the hero column rather than wrapping to two rows. */ .herostats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; margin-bottom:2.2rem; } .herostat{ display:flex; flex-direction:column; align-items:flex-start; gap:.45rem; padding-inline-end:.4rem; } .herostat + .herostat{ border-inline-start:1px solid var(--line); padding-inline-start:1.1rem; } .herostat svg{ width:25px; height:25px; color:var(--green-700); flex:none; } /* --ink-3 on cream is only ~3.2:1, under the 4.5:1 body-text floor, so these labels use --ink-2 (~6.5:1). Readability matters here more than delicacy. */ .herostat b{ display:block; font-family:Lora,Georgia,serif; font-size:1.05rem; font-weight:700; line-height:1.15; color:var(--ink); } .herostat span{ display:block; font-size:.76rem; color:var(--ink-2); line-height:1.35; font-weight:500; } @media (max-width:1240px){ .herostats{ grid-template-columns:repeat(2,1fr); gap:1.3rem; } .herostat:nth-child(2n+1){ border-inline-start:0; padding-inline-start:0; } } .hero__cta{ display:flex; gap:.9rem; flex-wrap:wrap; } @media (min-width:1000px){ .hero__media{ position:absolute; top:0; right:0; bottom:0; width:48%; height:auto; } .hero__media img{ object-position:center 34%; } .hero .shell{ position:relative; z-index:1; } .hero__text{ max-width:640px; padding-block:clamp(4rem,5.5vw,6rem); } .hero__badge{ left:auto; right:0; width:min(460px,100%); border-top-left-radius:var(--r-md); } } /* Entrance sequence, run once on load */ /* Kept deliberately short. The audience is often on a slow phone, and a headline that takes a second to become readable is a cost, not a flourish. This is pure CSS on purpose. An earlier version waited for a JS class before animating, which left the hero blank whenever requestAnimationFrame was throttled — opening the page in a background tab was enough to do it. The hidden state now lives only inside the keyframes, so if animation never runs for any reason the text is simply there. */ .js-anim .hero__text > *{ animation:heroIn .5s var(--ease) both; } .js-anim .hero__pill{ animation-delay:0s; } .js-anim .hero__title{ animation-delay:.06s; } .js-anim .hero__sub{ animation-delay:.12s; } .js-anim .hero__copy{ animation-delay:.18s; } .js-anim .herostats{ animation-delay:.24s; } .js-anim .hero__cta{ animation-delay:.30s; } @keyframes heroIn{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:none; } } @media (prefers-reduced-motion: reduce){ .js-anim .hero__text > *{ opacity:1 !important; transform:none !important; animation:none !important; } } /* ---------- 9. Packages -------------------------------------------------- */ .pkgwrap{ display:grid; grid-template-columns:minmax(0,.78fr) minmax(0,2.15fr); gap:clamp(2rem,3.5vw,4rem); align-items:start; } @media (max-width:1050px){ .pkgwrap{ grid-template-columns:1fr; } } .pkgwrap .lead{ max-width:46ch; } .visabox{ background:linear-gradient(135deg,var(--green-800),var(--green-900)); color:var(--on-dark); padding:1.6rem 1.7rem; margin-top:2.1rem; border-radius:var(--r-md); display:flex; justify-content:space-between; align-items:center; gap:1rem; box-shadow:var(--sh-2); position:relative; overflow:hidden; } .visabox::before{ content:""; position:absolute; inset:0; background-image:var(--pattern); opacity:.07; } .visabox > *{ position:relative; z-index:1; } .visabox__k{ display:block; font-size:.73rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-lt); margin-bottom:.3rem; } .visabox__amt{ display:block; font-family:Lora,Georgia,serif; font-size:2.2rem; font-weight:700; line-height:1.1; font-variant-numeric:tabular-nums; } .visabox__per{ display:block; font-size:.82rem; color:var(--on-dark-2); } .visabox svg{ width:56px; height:56px; color:var(--gold-lt); flex:none; opacity:.85; } /* Sits directly under the visa-only box, in the same column. Dashed border so it reads as an aside rather than another product card. */ .pkgnote{ display:flex; gap:.75rem; align-items:flex-start; margin:1.1rem 0 0; padding:1.05rem 1.15rem; background:var(--white); border:1px dashed var(--line); border-radius:var(--r-sm); font-size:.89rem; color:var(--ink-2); line-height:1.62; } .pkgnote svg{ width:19px; height:19px; color:var(--gold-deep); flex:none; margin-top:3px; } .pkgnote b{ color:var(--ink); font-weight:700; } .pkgs{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; } @media (max-width:900px){ .pkgs{ grid-template-columns:1fr; } } .pkg{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); display:flex; flex-direction:column; overflow:hidden; box-shadow:var(--sh-1); transition:box-shadow var(--t-mid) var(--ease), transform var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease); } .pkg:hover{ box-shadow:var(--sh-3); transform:translateY(-8px); border-color:rgba(201,162,39,.45); } /* Duration is the thing people compare first, so it gets the top of the card at display size rather than a small tab. */ .pkg__days{ background:linear-gradient(135deg,var(--green-700),var(--green-900)); color:var(--on-dark); text-align:center; padding:1.15rem .9rem 1rem; display:flex; flex-direction:column; align-items:center; gap:.15rem; position:relative; overflow:hidden; } .pkg__days::before{ content:""; position:absolute; inset:0; background-image:var(--pattern); opacity:.09; } .pkg__days > *{ position:relative; z-index:1; } .pkg__days b{ font-family:Lora,Georgia,serif; font-size:2.9rem; font-weight:700; line-height:.95; color:var(--gold-lt); font-variant-numeric:tabular-nums; letter-spacing:-.02em; } .pkg__days span{ font-size:.71rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; } .pkg__days--full{ background:linear-gradient(135deg,#8A6D15,var(--green-900)); } .pkg__days--full b{ color:#FFE9A8; } .pkg:hover .pkg__days b{ transform:scale(1.06); } .pkg__days b{ transition:transform var(--t-mid) var(--ease); display:block; } .pkg__body{ padding:1.8rem 1.5rem 1.3rem; text-align:center; flex:1; display:flex; flex-direction:column; } .pkg__ico{ width:48px; height:48px; margin:0 auto 1rem; color:var(--green-700); transition:transform var(--t-mid) var(--ease); } .pkg:hover .pkg__ico{ transform:translateY(-3px) scale(1.06); } .pkg__price{ font-family:Lora,Georgia,serif; font-size:2.25rem; font-weight:700; color:var(--green-800); line-height:1.1; font-variant-numeric:tabular-nums; } .pkg__per{ font-size:.82rem; color:var(--ink-3); } .pkg__orn{ display:flex; align-items:center; justify-content:center; gap:.55rem; margin:1.1rem 0 1rem; } .pkg__orn::before,.pkg__orn::after{ content:""; height:1px; width:42px; background:var(--line); } .pkg__orn i{ width:7px; height:7px; background:var(--gold); transform:rotate(45deg); display:block; } .pkg__list{ text-align:left; flex:1; } .pkg__list li{ display:flex; gap:.6rem; align-items:flex-start; font-size:.92rem; padding:.28rem 0; color:var(--ink-2); } .pkg__list svg{ width:15px; height:15px; color:var(--green-600); flex:none; margin-top:6px; } .pkg__foot{ padding:0 1.5rem 1.5rem; } /* ---------- 10. Info strip ----------------------------------------------- */ .strip{ background:var(--cream-2); border-block:1px solid var(--line); } .strip__grid{ display:grid; grid-template-columns:repeat(3,1fr); } @media (max-width:850px){ .strip__grid{ grid-template-columns:1fr; } } .strip__i{ display:flex; align-items:center; gap:1.1rem; padding:1.7rem 1.3rem; justify-content:center; transition:background var(--t-mid) var(--ease-soft); } .strip__i:hover{ background:rgba(255,255,255,.5); } .strip__i + .strip__i{ border-inline-start:1px solid var(--line); } @media (max-width:850px){ .strip__i + .strip__i{ border-inline-start:0; border-top:1px solid var(--line); } } .strip__i svg{ width:36px; height:36px; color:var(--gold-deep); flex:none; } .strip__k{ font-size:.72rem; font-weight:700; letter-spacing:.17em; text-transform:uppercase; color:var(--gold-deep); display:block; } .strip__v{ font-weight:700; font-size:1.04rem; line-height:1.4; display:block; } .strip__s{ font-size:.84rem; color:var(--ink-3); display:block; } /* ---------- 11. Why us --------------------------------------------------- */ .why{ display:grid; grid-template-columns:repeat(6,1fr); gap:1.2rem; } @media (max-width:1300px){ .why{ grid-template-columns:repeat(3,1fr); } } @media (max-width:660px){ .why{ grid-template-columns:repeat(2,1fr); } } .whyc{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); padding:1.8rem 1.15rem; text-align:center; box-shadow:var(--sh-1); transition:box-shadow var(--t-mid) var(--ease), transform var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease); } .whyc:hover{ box-shadow:var(--sh-2); transform:translateY(-6px); border-color:rgba(201,162,39,.4); } .whyc__ico{ width:58px; height:58px; margin:0 auto 1.05rem; border-radius:50%; background:linear-gradient(140deg,var(--green-700),var(--green-900)); display:grid; place-items:center; box-shadow:0 8px 18px -8px rgba(10,58,36,.5); transition:transform var(--t-mid) var(--ease); } .whyc:hover .whyc__ico{ transform:scale(1.09) rotate(-4deg); } .whyc__ico svg{ width:25px; height:25px; color:var(--gold-lt); } .whyc h3{ font-size:1.02rem; font-weight:700; margin-bottom:.45rem; } .whyc p{ font-size:.85rem; color:var(--ink-3); line-height:1.6; margin:0; } .whyc p b{ color:var(--ink-2); font-weight:700; } /* ---------- 12. Ziyarat -------------------------------------------------- */ .ziy{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(2.2rem,4vw,4.5rem); align-items:center; } @media (max-width:1000px){ .ziy{ grid-template-columns:1fr; } } .ziy__nums{ display:flex; gap:3rem; margin-top:2.3rem; flex-wrap:wrap; } .ziy__n b{ display:block; font-family:Lora,Georgia,serif; font-size:2.6rem; font-weight:700; color:var(--gold-lt); line-height:1.05; font-variant-numeric:tabular-nums; } .ziy__n span{ display:block; font-size:.84rem; color:var(--on-dark-2); } .ziygrid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; } .ziygrid figure{ margin:0; position:relative; overflow:hidden; border-radius:var(--r-md); border:1px solid rgba(224,190,85,.26); box-shadow:var(--sh-2); transition:transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease); } .ziygrid figure:hover{ transform:translateY(-6px); box-shadow:var(--sh-3); } .ziygrid img{ width:100%; height:clamp(180px,17vw,260px); object-fit:cover; transition:transform .7s var(--ease); } .ziygrid figure:hover img{ transform:scale(1.07); } .ziygrid figcaption{ position:absolute; inset-inline:0; bottom:0; padding:2rem .9rem .85rem; background:linear-gradient(180deg,transparent,rgba(10,58,36,.94)); color:var(--on-dark); font-size:.9rem; font-weight:600; text-align:center; } /* ---------- 13. Stats bar ------------------------------------------------ */ .statbar{ background:var(--cream-2); border-block:1px solid var(--line); } .statbar__grid{ display:grid; grid-template-columns:repeat(5,1fr); } @media (max-width:950px){ .statbar__grid{ grid-template-columns:repeat(2,1fr); } } .statbar__i{ text-align:center; padding:1.9rem 1rem; transition:background var(--t-mid) var(--ease-soft); } .statbar__i:hover{ background:rgba(255,255,255,.55); } .statbar__i + .statbar__i{ border-inline-start:1px solid var(--line); } @media (max-width:950px){ .statbar__i:nth-child(2n+1){ border-inline-start:0; } .statbar__i{ border-top:1px solid var(--line); } .statbar__i:nth-child(-n+2){ border-top:0; } .statbar__i:last-child{ grid-column:1 / -1; } } .statbar__ico{ width:28px; height:28px; margin:0 auto .4rem; color:var(--gold-deep); opacity:.65; } .statbar__n{ font-family:Lora,Georgia,serif; font-size:2.1rem; font-weight:700; color:var(--green-800); line-height:1.1; font-variant-numeric:tabular-nums; } .statbar__l{ font-size:.82rem; color:var(--ink-3); display:block; } /* ---------- 14. Videos --------------------------------------------------- The players are embedded directly. No thumbnail, no click-to-play, no fallback link — the card is the video. loading="lazy" keeps the players from loading until they are scrolled near. */ .vids{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; } @media (max-width:950px){ .vids{ grid-template-columns:1fr; max-width:560px; margin-inline:auto; } } .vid{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; box-shadow:var(--sh-1); transition:box-shadow var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease); } .vid:hover{ box-shadow:var(--sh-2); border-color:rgba(201,162,39,.4); } .vid__frame{ position:relative; aspect-ratio:16 / 9; background:var(--green-900); } .vid__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; } .vid__cap{ padding:1.1rem 1.25rem 1.25rem; } .vid__cap h3{ font-size:1.02rem; font-weight:700; line-height:1.4; margin-bottom:.28rem; } .vid__cap > span{ display:block; font-size:.84rem; color:var(--ink-2); } /* ---------- 15. Testimonials --------------------------------------------- */ .tstm{ position:relative; background:var(--white); overflow:hidden; } .tstm__wm{ position:absolute; left:50%; transform:translateX(-50%); bottom:0; width:min(880px,86%); aspect-ratio:240/120; color:var(--green-800); opacity:.055; pointer-events:none; } .tstm__wm svg{ width:100%; height:100%; display:block; } @media (max-width:700px){ .tstm__wm{ display:none; } } .tstm .shell{ position:relative; z-index:1; } .tstms{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; } @media (max-width:980px){ .tstms{ grid-template-columns:repeat(3,minmax(280px,1fr)); overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:.6rem; scrollbar-width:none; } .tstms::-webkit-scrollbar{ display:none; } .tstmc{ scroll-snap-align:center; } } .tstmc{ background:var(--cream); border:1px solid var(--line); border-radius:var(--r-md); padding:1.8rem 1.6rem; display:flex; flex-direction:column; box-shadow:var(--sh-1); transition:box-shadow var(--t-mid) var(--ease), transform var(--t-mid) var(--ease); } .tstmc:hover{ box-shadow:var(--sh-2); transform:translateY(-5px); } .tstmc__stars{ display:flex; gap:3px; margin-bottom:.85rem; } .tstmc__stars svg{ width:17px; height:17px; color:var(--gold); } .tstmc__t{ font-size:.96rem; color:var(--ink-2); line-height:1.75; flex:1; margin-bottom:1.2rem; } .tstmc__who{ display:flex; align-items:center; gap:.8rem; border-top:1px solid var(--line); padding-top:1rem; } .tstmc__av{ width:38px; height:38px; border-radius:50%; background:var(--green-50); display:grid; place-items:center; flex:none; } .tstmc__av svg{ width:18px; height:18px; color:var(--green-700); } .tstmc__who b{ display:block; font-size:.9rem; font-weight:700; } .tstmc__who span{ display:block; font-size:.8rem; color:var(--ink-3); } .tdots{ display:none; justify-content:center; gap:.5rem; margin-top:1.4rem; } @media (max-width:980px){ .tdots{ display:flex; } } .tdots button{ width:9px; height:9px; padding:0; border:0; border-radius:50%; background:var(--line); cursor:pointer; transition:background var(--t-fast), transform var(--t-fast) var(--ease); } .tdots button[aria-current="true"]{ background:var(--gold); transform:scale(1.35); } /* ---------- 16. CTA band ------------------------------------------------- */ .cta{ position:relative; background:linear-gradient(120deg,var(--green-800),var(--green-900) 70%); color:var(--on-dark); overflow:hidden; } .cta::before{ content:""; position:absolute; inset:0; background-image:var(--pattern); opacity:.06; } /* Text starts at the container edge — flush with the footer logo below it — rather than being pushed in by an illustration. */ .cta__art{ position:absolute; right:3%; bottom:-14px; width:clamp(220px,20vw,320px); color:var(--gold-lt); opacity:.13; pointer-events:none; } @media (max-width:1100px){ .cta__art{ display:none; } } .cta__in{ position:relative; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:2.5rem; padding-block:3.6rem; flex-wrap:wrap; } .cta__txt{ flex:1 1 440px; } .cta__txt h2{ color:var(--on-dark); font-size:clamp(1.7rem,2.7vw,2.5rem); margin-bottom:.6rem; } .cta__txt p{ color:var(--on-dark-2); margin:0; max-width:52ch; } .cta__acts{ display:flex; gap:.9rem; flex-wrap:wrap; position:relative; z-index:2; } /* ---------- 17. Footer --------------------------------------------------- */ .footer{ background:var(--green-900); color:var(--on-dark-2); padding-block:4rem 0; font-size:.92rem; position:relative; overflow:hidden; } .footer::before{ content:""; position:absolute; inset:0; background-image:var(--pattern); opacity:.045; } .footer > *{ position:relative; z-index:1; } .footer__grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1.5fr; gap:clamp(2rem,3.5vw,4rem); } @media (max-width:1150px){ .footer__grid{ grid-template-columns:1fr 1fr; } } @media (max-width:640px){ .footer__grid{ grid-template-columns:1fr; gap:2.2rem; } } .footer__brand{ max-width:42ch; } .footer__chips{ display:flex; flex-wrap:wrap; gap:.45rem; margin:0 0 1.3rem; } .footer__chips li{ font-size:.75rem; font-weight:700; letter-spacing:.06em; color:var(--gold-lt); border:1px solid rgba(224,190,85,.34); padding:.28rem .8rem; border-radius:var(--r-pill); } .footer h4{ font-size:1rem; color:var(--gold-lt); margin-bottom:1.1rem; font-family:Lora,Georgia,serif; } .footer a{ color:var(--on-dark-2); text-decoration:none; transition:color var(--t-fast), transform var(--t-fast); display:inline-block; } .footer a:hover{ color:var(--gold-lt); } .footer__links li{ padding:.3rem 0; } .footer__links a:hover{ transform:translateX(4px); } .footer__brand .brand{ margin-bottom:1.1rem; } .footer__brand .brand__hi{ color:var(--on-dark); } .footer__brand .brand__en{ color:var(--on-dark-2); } .footer__tag{ color:var(--on-dark-2); max-width:32ch; margin-bottom:1.2rem; } .social{ display:flex; gap:.6rem; } .social a{ width:38px; height:38px; border-radius:50%; border:1px solid rgba(224,190,85,.32); display:grid; place-items:center; color:var(--on-dark-2); transition:background var(--t-fast), color var(--t-fast), transform var(--t-mid) var(--ease), border-color var(--t-fast); } .social a:hover{ background:var(--gold); color:var(--green-900); border-color:var(--gold); transform:translateY(-3px); } .social svg{ width:16px; height:16px; } .fcontact li{ display:flex; gap:.65rem; padding:.4rem 0; align-items:flex-start; } .fcontact svg{ width:17px; height:17px; color:var(--gold-lt); flex:none; margin-top:5px; } .footer__bar{ margin-top:3.2rem; border-top:1px solid rgba(224,190,85,.2); padding-block:1.2rem; font-size:.84rem; } .footer__bar-in{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; } .footer__bar-tag{ color:var(--gold-lt); letter-spacing:.1em; } /* ---------- 18. Floating call / WhatsApp buttons ------------------------- Present on every screen size, so the two things a pilgrim actually wants to do are always one tap away. Plain links, so they work with JS disabled. */ .fab{ position:fixed; right:clamp(14px,2vw,26px); bottom:clamp(14px,2vw,26px); z-index:85; display:flex; flex-direction:column; gap:.7rem; } .fab__btn{ position:relative; display:flex; align-items:center; justify-content:center; width:58px; height:58px; border-radius:var(--r-pill); text-decoration:none; color:#fff; box-shadow:var(--sh-3); overflow:hidden; transition:width var(--t-mid) var(--ease), transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease), background var(--t-fast); animation:fabIn .55s var(--ease) both; } .fab__btn--call{ background:var(--green-800); animation-delay:.55s; } .fab__btn--call:hover{ background:var(--green-700); } .fab__btn--wa{ background:var(--wa); animation-delay:.68s; } .fab__btn--wa:hover{ background:var(--wa-dk); } .fab__btn:hover{ transform:translateY(-3px); box-shadow:var(--sh-3), 0 0 0 4px rgba(224,190,85,.28); } .fab__ico{ width:25px; height:25px; flex:none; position:relative; z-index:2; } /* label slides out of the pill on hover / keyboard focus */ .fab__label{ position:relative; z-index:2; max-width:0; opacity:0; white-space:nowrap; font-weight:700; font-size:.94rem; overflow:hidden; transition:max-width var(--t-mid) var(--ease), opacity var(--t-fast) var(--ease-soft), margin-inline-start var(--t-mid) var(--ease); } .fab__btn:hover, .fab__btn:focus-visible{ width:186px; } .fab__btn:hover .fab__label, .fab__btn:focus-visible .fab__label{ max-width:130px; opacity:1; margin-inline-start:.6rem; } /* soft outward pulse, so the buttons read as live without being noisy */ .fab__ring{ position:absolute; inset:0; border-radius:inherit; z-index:1; box-shadow:0 0 0 0 currentColor; color:inherit; animation:fabPulse 3s var(--ease-soft) infinite; } .fab__btn--call .fab__ring{ box-shadow:0 0 0 0 rgba(14,74,46,.55); animation-name:fabPulseGreen; } .fab__btn--wa .fab__ring{ box-shadow:0 0 0 0 rgba(37,167,90,.55); animation-name:fabPulseWa; } @keyframes fabPulseGreen{ 0%{ box-shadow:0 0 0 0 rgba(14,74,46,.5); } 70%{ box-shadow:0 0 0 16px rgba(14,74,46,0); } 100%{ box-shadow:0 0 0 0 rgba(14,74,46,0); } } @keyframes fabPulseWa{ 0%{ box-shadow:0 0 0 0 rgba(37,167,90,.5); } 70%{ box-shadow:0 0 0 16px rgba(37,167,90,0); } 100%{ box-shadow:0 0 0 0 rgba(37,167,90,0); } } @keyframes fabIn{ from{ opacity:0; transform:translateY(24px) scale(.8); } to{ opacity:1; transform:none; } } /* Signal arcs on the call button: 1, then 2, then 3, on a loop — the handset stays put so the icon still reads as "phone" at a glance. */ .fab__ico .fw{ opacity:0; animation:fwOn 1.9s var(--ease-soft) infinite; } .fab__ico .fw1{ animation-delay:0s; } .fab__ico .fw2{ animation-delay:.19s; } .fab__ico .fw3{ animation-delay:.38s; } @keyframes fwOn{ 0%{ opacity:0; } 16%{ opacity:1; } 52%{ opacity:1; } 72%,100%{ opacity:0; } } @media (max-width:520px){ .fab__btn{ width:54px; height:54px; } .fab__ico{ width:23px; height:23px; } } @media (prefers-reduced-motion: reduce){ .fab__ring{ animation:none; } .fab__btn{ animation:none; } .fab__ico .fw{ animation:none; opacity:1; } } /* ---------- 19. Phone refinements ---------------------------------------- Placed last so it wins over the component rules above. Everything in this block is mobile-only; nothing here affects tablet or desktop. */ @media (max-width:640px){ /* Logo: drop the Devanagari lockup, promote the Latin line to the name. Two scripts stacked in a 56px header is too much at this width. */ .brand__hi{ display:none; } .brand__en{ font-family:Lora,Georgia,serif; font-size:1.02rem; font-weight:700; color:var(--green-800); letter-spacing:0; margin-top:0; line-height:1.25; } /* Hero copy sits tighter so it lands in three or four lines, not six. */ .hero__copy{ font-size:.93rem; line-height:1.62; margin-bottom:1.8rem; } /* Stats two-up. Column gap is zero and each cell carries its own 1rem of inner padding, so the divider lands exactly halfway between the two columns instead of hugging the right-hand one. */ .herostats{ grid-template-columns:1fr 1fr; column-gap:0; row-gap:1.3rem; } .herostat{ padding-inline:0 1rem; } .herostat:nth-child(2n){ border-inline-start:1px solid var(--line); padding-inline:1rem 0; } .herostat:nth-child(2n+1){ border-inline-start:0; } /* Ziyarat counts across one row rather than wrapping to two. */ .ziy__nums{ display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem; margin-top:2rem; } .ziy__n b{ font-size:1.95rem; } .ziy__n span{ font-size:.72rem; line-height:1.3; } /* Full-width buttons — easier targets, and a tidier column. */ .hero__cta{ flex-direction:column; align-items:stretch; } .hero__cta .btn, .cta__acts .btn{ width:100%; } .cta__acts{ width:100%; flex-direction:column; align-items:stretch; } /* Reviews: snap each card to the content edge instead of centring it, so the first card lines up with everything else on the page. */ /* One review fills the track exactly, so only ever one is on screen — no sliver of the next card showing at the edge. */ .tstms{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:100%; gap:1rem; } .tstmc{ scroll-snap-align:start; } .tstmc__t{ font-size:.92rem; } /* Footer lockup scaled down so the name wraps instead of running into the floating buttons, and clearance underneath so they never cover the copyright line. */ .footer__brand .brand{ gap:.75rem; } .footer__brand .brand__mark{ width:58px; height:58px; } .footer__brand .brand__en{ font-size:.95rem; } .footer__bar{ padding-bottom:5.5rem; } } /* ---------- 20. Utilities ------------------------------------------------ */ .u-center{ text-align:center; } .u-flexcenter{ display:flex; justify-content:center; } .u-mt{ margin-top:1.7rem; } .u-mb0{ margin-bottom:0; } .visually-hidden{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }