/* ========================================================================== 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; --rust:#8E3B2A; --wa:#25A75A; --wa-dk:#1B8447; /* layout */ --shell:1600px; --pad:clamp(16px,3.4vw,48px); --band:clamp(3.6rem,6vw,6.5rem); --measure:64ch; /* The reading column, in rem rather than ch. ch resolves against whatever font-size the element itself has, so the same "74ch" gave the article column 723px and the prose inside it 701px — a 22px mismatch nobody intended. rem is the same number everywhere. */ --measure-text:44rem; --measure-wide:56rem; /* One gap for every card grid. Grids with the same column count then line up exactly as you scroll from one section to the next; mixed values put their columns 2-4px apart, which reads as a mistake rather than rhythm. */ --gap-card:1.4rem; /* 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,ol{ margin:0; padding:0; list-style:none; } :focus-visible{ outline:3px solid var(--gold); outline-offset:3px; border-radius:var(--r-sm); } /* The hidden attribute has to beat component display rules. Without this a component that sets display:flex stays on screen while marked hidden — the form's success message did exactly that, showing before anything was sent. */ [hidden]{ display:none !important; } /* Inline code, used only inside the notes to the office. Left unstyled it falls back to the browser's default monospace at full size, which reads as a foreign object next to Lora and Mukta. */ code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.86em; background:rgba(10,58,36,.06); border:1px solid var(--line); border-radius:4px; padding:.08em .38em; word-break:break-word; } /* ---------- 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; text-wrap:pretty; } .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); } /* An 18px icon is fractionally taller than the 17px text line box, so a button with an icon came out 1px taller than one without. Same size class, two different heights, side by side in the departure rows. */ .btn{ min-height:51px; } .btn--sm{ min-height:42px; } .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; } /* With nine nav items the numbers only fit from ~1400px up. Below that the gold call button stays and carries the same tel: link. */ @media (max-width:1400px){ .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 a 1280x597 landscape photo. In both the stacked and the split layout the container is narrower than 2.14:1, so the crop is always horizontal — centring on X is what keeps the Green Dome in frame. */ .hero__media{ position:relative; height:clamp(280px,48vw,420px); overflow:hidden; } .hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center center; 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 center; } .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; } /* Stand-in shown only when the page is opened from the file system, where YouTube refuses to embed. See the file:// guard in main.js. */ .vid__poster{ position:absolute; inset:0; display:block; overflow:hidden; text-decoration:none; } .vid__poster img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); } .vid__poster:hover img{ transform:scale(1.05); } .vid__poster::after{ content:""; position:absolute; inset:0; background:rgba(10,58,36,.3); } .vid__posterplay{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:2; width:62px; height:62px; border-radius:50%; background:var(--gold); display:grid; place-items:center; box-shadow:0 10px 26px rgba(10,58,36,.45); transition:transform var(--t-mid) var(--ease); } .vid__poster:hover .vid__posterplay{ transform:translate(-50%,-50%) scale(1.1); } .vid__posterplay svg{ width:23px; height:23px; color:var(--green-900); margin-left:3px; } .vid__posternote{ position:absolute; inset-inline:0; bottom:0; z-index:2; padding:.5rem .8rem; background:rgba(10,58,36,.85); color:var(--on-dark-2); font-size:.72rem; text-align:center; line-height:1.4; } .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:hover{ background:var(--gold-lt); transform:scale(1.2); } .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{display:inline-block} outranks .btn{display:inline-flex}, which left the footer's WhatsApp button 5px taller than every other small button and killed the gap between its icon and its label. */ .footer .btn{ display:inline-flex; } .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; } /* Bottom bar. The three groups are centred on one line rather than top-aligned, and the legal links run horizontally with dot separators — stacked, they dropped four lines below the copyright and left the row looking ragged and accidental. The extra bottom padding keeps the last line clear of the floating call and WhatsApp buttons. */ .footer__bar{ margin-top:3.2rem; border-top:1px solid rgba(224,190,85,.2); padding-block:1.3rem 5.5rem; font-size:.84rem; } /* The floating buttons are fixed to the bottom-right corner and would sit on top of the strap at the foot of the page. Reserving the corner they actually occupy costs one short inset on this row; reserving it with bottom padding instead cost 160px of empty green, which read as a mistake. The buttons fill the gap, so the row still looks deliberate. */ @media (min-width:641px){ .footer__bar{ padding-bottom:1.6rem; } .footer__bar-in{ padding-inline-end:6rem; } } .footer__bar-in{ display:flex; align-items:center; justify-content:space-between; gap:.7rem 1.8rem; flex-wrap:wrap; } .footer__legal{ display:flex; flex-wrap:wrap; align-items:center; gap:.2rem 1.6rem; } .footer__legal li{ position:relative; } .footer__legal li + li::before{ content:""; position:absolute; left:-.87rem; top:50%; width:3px; height:3px; margin-top:-1.5px; border-radius:50%; background:rgba(224,190,85,.5); } .footer__legal a{ font-size:.82rem; } /* On a phone the four links cannot sit on one line, and a separator that is drawn before its item ends up stranded at the start of the wrapped line. Two clean columns instead, with no separators to strand. */ @media (max-width:640px){ .footer__legal{ display:grid; grid-template-columns:repeat(2,auto); justify-content:start; gap:.55rem 1.6rem; } .footer__legal li + li::before{ display:none; } } .footer__bar-tag{ color:var(--gold-lt); letter-spacing:.1em; white-space:nowrap; } /* ---------- 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; } } @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; } } /* ---------- 19. Departure dates ------------------------------------------- One row per group. The date block is the anchor, the seats pill carries the state. Rows reflow to two columns on a phone rather than shrinking. */ .deps{ display:flex; flex-direction:column; gap:.85rem; } .dep{ display:grid; grid-template-columns:auto minmax(0,1fr) auto auto auto; gap:1.4rem; align-items:center; background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); padding:1.05rem 1.4rem; box-shadow:var(--sh-1); transition:box-shadow var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease); } .dep:hover{ box-shadow:var(--sh-2); border-color:rgba(201,162,39,.42); } .dep__when{ display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:78px; padding:.5rem .5rem .45rem; border-radius:var(--r-sm); background:linear-gradient(140deg,var(--green-700),var(--green-900)); color:var(--on-dark); } .dep__when b{ font-family:Lora,Georgia,serif; font-size:1.7rem; font-weight:700; line-height:1; color:var(--gold-lt); font-variant-numeric:tabular-nums; } .dep__when span{ font-size:.68rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase; margin-top:.15rem; } .dep__body b{ display:block; font-size:1.02rem; font-weight:700; line-height:1.35; } .dep__body span{ display:block; font-size:.86rem; color:var(--ink-2); } .dep__price{ font-family:Lora,Georgia,serif; font-size:1.32rem; font-weight:700; color:var(--green-800); font-variant-numeric:tabular-nums; white-space:nowrap; } .dep__seats{ font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; padding:.34rem .85rem; border-radius:var(--r-pill); white-space:nowrap; line-height:1.6; } .dep__seats--open{ background:color-mix(in srgb,var(--green-600) 13%,transparent); color:var(--green-700); } .dep__seats--filling{ background:color-mix(in srgb,var(--gold) 20%,transparent); color:var(--gold-deep); } .dep__seats--closed{ background:color-mix(in srgb,var(--rust) 12%,transparent); color:var(--rust); } @media (max-width:1000px){ .dep{ grid-template-columns:78px minmax(0,1fr); gap:.9rem 1.1rem; } .dep__price{ align-self:center; } .dep__seats{ justify-self:start; align-self:center; } .dep .btn{ grid-column:1 / -1; } } /* ---------- 20. How it works --------------------------------------------- The numbers are real sequence, not decoration — this is the order a booking actually happens in, so they carry information. */ .steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.3rem; } @media (max-width:1050px){ .steps{ grid-template-columns:repeat(2,1fr); gap:1.6rem 1.3rem; } } @media (max-width:560px){ .steps{ grid-template-columns:1fr; gap:1.7rem; } } .step{ position:relative; background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); padding:2.2rem 1.4rem 1.5rem; box-shadow:var(--sh-1); transition:box-shadow var(--t-mid) var(--ease), transform var(--t-mid) var(--ease); } .step:hover{ box-shadow:var(--sh-2); transform:translateY(-4px); } .step__n{ position:absolute; top:-17px; left:1.4rem; width:40px; height:40px; border-radius:50%; background:var(--gold); color:var(--green-900); font-family:Lora,Georgia,serif; font-weight:700; font-size:1.12rem; display:grid; place-items:center; box-shadow:var(--sh-2); } .step__ico{ display:block; width:30px; height:30px; color:var(--green-700); margin-bottom:.85rem; } .step__ico svg{ width:100%; height:100%; } .step h3{ font-size:1.05rem; font-weight:700; margin-bottom:.45rem; } .step p{ font-size:.89rem; color:var(--ink-2); line-height:1.65; margin:0; } /* ---------- 21. FAQ ------------------------------------------------------- Native
, so it opens with JavaScript off and is keyboard-operable without any code from us. */ .faq{ max-width:920px; margin-inline:auto; display:flex; flex-direction:column; gap:.7rem; } .faq__item{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; transition:box-shadow var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease); } .faq__item[open]{ box-shadow:var(--sh-2); border-color:rgba(201,162,39,.42); } .faq__item summary{ display:flex; align-items:center; justify-content:space-between; gap:1.2rem; padding:1.15rem 1.4rem; cursor:pointer; list-style:none; font-family:Lora,Georgia,serif; font-size:1.03rem; font-weight:600; color:var(--ink); transition:color var(--t-fast) var(--ease-soft); } .faq__item summary::-webkit-details-marker{ display:none; } .faq__item summary:hover{ color:var(--green-700); } .faq__item summary svg{ width:19px; height:19px; flex:none; color:var(--gold-deep); transition:transform var(--t-mid) var(--ease); } .faq__item[open] summary svg{ transform:rotate(180deg); } .faq__a{ padding:0 1.4rem 1.35rem; } /* No measure cap here — the .faq container is already held to 920px, so the answer should use the full card width rather than stopping short of it. */ .faq__a p{ margin:0; color:var(--ink-2); font-size:.94rem; line-height:1.72; } .faq__item[open] .faq__a{ animation:faqIn .32s var(--ease); } @keyframes faqIn{ from{ opacity:0; transform:translateY(-7px); } to{ opacity:1; transform:none; } } @media (prefers-reduced-motion: reduce){ .faq__item[open] .faq__a{ animation:none; } } @media (max-width:560px){ .faq__item summary{ font-size:.97rem; padding:1rem 1.1rem; } .faq__a{ padding:0 1.1rem 1.15rem; } } /* ---------- 22. The tour operator ----------------------------------------- Portrait left, credentials right. The photo sticks while the longer column scrolls past it on desktop, so his face stays with the CV. */ .op{ display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(2rem,4vw,4.2rem); align-items:start; } @media (max-width:900px){ .op{ grid-template-columns:1fr; gap:2.2rem; } /* Full width at 3:4 would be nearly 1000px tall on a tablet — cap it. */ .op__media{ max-width:400px; margin-inline:auto; width:100%; } } .op__media{ position:relative; border-radius:var(--r-md); overflow:hidden; box-shadow:var(--sh-3); } @media (min-width:901px){ .op__media{ position:sticky; top:130px; } } .op__media img{ width:100%; height:auto; aspect-ratio:3 / 4; object-fit:cover; object-position:center 18%; } .op__badge{ position:absolute; inset-inline:0; bottom:0; padding:2.2rem 1.4rem 1rem; background:linear-gradient(180deg,transparent,rgba(10,58,36,.94)); color:var(--on-dark); } .op__badge b{ display:block; font-family:Lora,Georgia,serif; font-size:1.28rem; font-weight:700; line-height:1.25; } .op__badge span{ display:block; font-size:.85rem; color:var(--on-dark-2); margin-top:.1rem; } .op__h{ font-family:"Mukta",sans-serif; font-size:.76rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-deep); margin:2rem 0 .9rem; padding-bottom:.5rem; border-bottom:1px solid var(--line); } .op__creds{ display:flex; flex-wrap:wrap; gap:.5rem; } .op__creds li{ font-size:.86rem; font-weight:600; color:var(--green-800); background:var(--green-50); border:1px solid rgba(20,102,60,.16); padding:.36rem .95rem; border-radius:var(--r-pill); } .op__time{ display:flex; flex-direction:column; } .op__time li{ display:grid; grid-template-columns:62px minmax(0,1fr); gap:1rem; padding:.75rem 0; border-bottom:1px solid var(--line-2); align-items:baseline; } .op__time li:last-child{ border-bottom:0; } .op__yrs{ font-family:Lora,Georgia,serif; font-size:.96rem; font-weight:700; color:var(--gold-deep); font-variant-numeric:tabular-nums; white-space:nowrap; } .op__role b{ display:block; font-size:.99rem; font-weight:700; line-height:1.35; } .op__role span{ display:block; font-size:.88rem; color:var(--ink-2); line-height:1.5; } .op__branches{ display:flex; flex-wrap:wrap; gap:.5rem; } .op__branches li{ font-size:.85rem; font-weight:600; color:var(--ink-2); border:1px dashed var(--line); padding:.36rem .95rem; border-radius:var(--r-sm); } .op__acts{ display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.9rem; } @media (max-width:560px){ .op__acts{ flex-direction:column; align-items:stretch; } .op__acts .btn{ width:100%; } .op__time li{ grid-template-columns:54px minmax(0,1fr); gap:.8rem; } } /* ---------- 23. Skip link ------------------------------------------------ */ .skiplink{ position:absolute; left:50%; top:0; transform:translate(-50%,-120%); z-index:200; background:var(--green-800); color:var(--on-dark); padding:.7rem 1.4rem; border-radius:0 0 var(--r-sm) var(--r-sm); font-weight:700; text-decoration:none; transition:transform var(--t-fast) var(--ease); } .skiplink:focus-visible{ transform:translate(-50%,0); } /* ---------- 24. Navigation dropdowns ------------------------------------- Two of the ten top-level items have children. On desktop they open on hover and on keyboard focus (:focus-within), with no JavaScript at all. On a phone they are not dropdowns: parent and children render as one indented list that is always open, so nothing hides behind a second tap — which matters for an audience that is largely older and not fast on a touchscreen. */ .nav__caret{ width:13px; height:13px; margin-inline-start:.3rem; vertical-align:-1px; transition:transform var(--t-mid) var(--ease); } .nav__has > a{ display:inline-flex; align-items:center; } .nav__has:hover > a .nav__caret, .nav__has:focus-within > a .nav__caret{ transform:rotate(180deg); } @media (min-width:1151px){ /* All ten links, not just the two with carets. Giving only the dropdown parents display:inline-flex put them in a different formatting context from the plain inline ones beside them, so "Umrah" and "Gallery" sat 4.4px lower than the rest and their underline 5.6px lower. */ .nav__list a{ display:inline-flex; align-items:center; } .nav__has{ position:relative; } /* Anchored to the parent's text, not centred under it. The offset is the panel's own padding (.55rem) plus each link's padding (.85rem), so the first child label starts at exactly the same x as the parent label and the panel reads as attached rather than floating off to the left. */ .nav__sub{ position:absolute; top:100%; left:-1.4rem; min-width:246px; padding:.55rem; margin-top:.55rem; background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--sh-3); opacity:0; visibility:hidden; transform:translateY(-8px); transition:opacity var(--t-fast) var(--ease-soft), transform var(--t-mid) var(--ease), visibility 0s linear var(--t-mid); } /* Bridges the gap between the parent and the panel so the pointer can travel down without the menu closing under it. */ .nav__sub::before{ content:""; position:absolute; left:0; right:0; top:-.55rem; height:.55rem; } .nav__has:hover > .nav__sub, .nav__has:focus-within > .nav__sub{ opacity:1; visibility:visible; transform:none; transition-delay:0s; } .nav__sub a{ display:block; padding:.6rem .85rem; border-radius:var(--r-sm); font-size:.92rem; font-weight:600; color:var(--ink-2); white-space:nowrap; transition:background var(--t-fast), color var(--t-fast); } .nav__sub a::after{ display:none; } .nav__sub a:hover{ background:var(--green-50); color:var(--green-800); } .nav__sub a[aria-current="page"]{ background:var(--green-50); color:var(--green-800); } } @media (max-width:1150px){ .nav__sub{ display:block; padding:0 0 .4rem .95rem; } .nav__sub a{ font-size:.97rem; padding:.7rem 0; color:var(--ink-2); } .nav__has > a{ font-weight:700; } .nav__caret{ display:none; } /* An is inline by default, so the divider underneath it stopped at the end of the word — a column of ragged part-length lines rather than rules. Blocks make each divider span the panel. */ .nav__list a{ display:block; } .nav__has > a{ display:flex; align-items:center; justify-content:space-between; } /* With ten items and nine sub-items the panel is taller than a phone, so it scrolls rather than running off the bottom of the screen. The subtracted figures are the space the panel is NOT allowed to use. It is absolutely positioned at top:100% of the sticky header, so its own distance from the top of the viewport is the header's height — and CSS cannot read that back to subtract it. The worst case is an unscrolled page, where the announcement bar (42px) still sits above the header (104px): 146px. Round to 160 for the taller of the two nav labels. */ .nav__list.is-open{ max-height:calc(100vh - 160px); max-height:calc(100dvh - 160px); overflow-y:auto; overscroll-behavior:contain; } } /* On a phone the fixed action bar (about 72px) covers the foot of the screen too, so the panel has to stop above it — otherwise the last item is unreachable no matter how far you scroll the panel. */ @media (max-width:640px){ .nav__list.is-open{ max-height:calc(100vh - 232px); max-height:calc(100dvh - 232px); padding-bottom:1.4rem; } } /* ---------- 25. Page hero (inner pages) ---------------------------------- Shorter than the homepage hero on purpose. This is a signpost; the thing the visitor came for is the content underneath it. */ .phero{ position:relative; background:var(--green-900); color:var(--on-dark); overflow:hidden; isolation:isolate; } .phero::after{ content:""; position:absolute; inset:0; background-image:var(--pattern); opacity:.05; pointer-events:none; z-index:-1; } .phero__bg{ position:absolute; inset:0; z-index:-2; } .phero__bg img{ width:100%; height:100%; object-fit:cover; object-position:center 38%; } /* Scrim: strong on the left where the words sit, easing off to the right so the photograph is still legible as a photograph. */ .phero__bg::after{ content:""; position:absolute; inset:0; background:linear-gradient(100deg,rgba(10,58,36,.94) 0%,rgba(10,58,36,.86) 42%,rgba(10,58,36,.62) 100%); } /* Once the text stops sitting in a left-hand column and spans the full width, a left-to-right scrim fades out exactly where the stat figures are — small gold numerals over a bright photograph. Below this width the gradient runs top-to-bottom instead, and is darkest at the foot where those figures land. */ @media (max-width:940px){ .phero__bg::after{ background:linear-gradient(176deg,rgba(10,58,36,.86) 0%,rgba(10,58,36,.79) 34%,rgba(10,58,36,.94) 100%); } .phero__title{ max-width:none; } } .phero__in{ position:relative; z-index:1; padding-block:clamp(2rem,4.2vw,3.6rem) clamp(2.6rem,5vw,4.4rem); } .phero__kick{ color:var(--gold-lt); } .phero__kick.kicker--rule::before{ background:var(--gold-lt); } .phero__title{ font-size:clamp(2rem,4vw,3.35rem); line-height:1.1; color:var(--on-dark); margin:0 0 1rem; max-width:20ch; } .phero__lead{ color:var(--on-dark-2); max-width:60ch; font-size:1.04rem; margin:0; text-wrap:pretty; } .phero__acts{ display:flex; gap:.9rem; flex-wrap:wrap; margin-top:2rem; } .crumbs{ margin-bottom:1.5rem; } .crumbs ol{ display:flex; flex-wrap:wrap; align-items:center; gap:.1rem .55rem; font-size:.8rem; } .crumbs li{ display:flex; align-items:center; gap:.55rem; color:var(--on-dark-2); } .crumbs li + li::before{ content:"/"; color:rgba(224,190,85,.55); } .crumbs a{ color:var(--on-dark-2); text-decoration:none; transition:color var(--t-fast); } .crumbs a:hover{ color:var(--gold-lt); } .crumbs [aria-current="page"]{ color:var(--gold-lt); font-weight:600; } .pstats{ display:flex; flex-wrap:wrap; gap:1.1rem 2.6rem; margin-top:2.1rem; } .pstat b{ display:block; font-family:Lora,Georgia,serif; font-size:1.85rem; font-weight:700; line-height:1.05; color:var(--gold-lt); font-variant-numeric:tabular-nums; } .pstat span{ display:block; font-size:.82rem; color:var(--on-dark-2); } /* ---------- 26. Long-form prose (guides, legal, blog posts) --------------- One column, held to a comfortable measure. Older readers are a large part of this audience, so the body size here is a touch above the site default and the line height is generous. */ .prose{ max-width:var(--measure-text); font-size:1.03rem; } .prose.prose--wide{ max-width:var(--measure-wide); } .prose > * + *{ margin-top:1.1rem; } .prose h2{ font-size:clamp(1.4rem,2.1vw,1.8rem); margin-top:2.8rem; padding-top:1.6rem; border-top:1px solid var(--line); } .prose h2:first-child{ margin-top:0; padding-top:0; border-top:0; } .prose h3{ font-size:1.16rem; margin-top:2rem; } .prose p{ margin-block:0; color:var(--ink-2); line-height:1.78; text-wrap:pretty; } .prose strong,.prose b{ color:var(--ink); font-weight:700; } .prose a{ color:var(--green-700); font-weight:600; } .prose ul,.prose ol{ display:flex; flex-direction:column; gap:.5rem; padding-inline-start:0; } .prose li{ display:flex; gap:.7rem; color:var(--ink-2); line-height:1.7; } .prose ul > li::before{ content:""; flex:none; width:7px; height:7px; margin-top:.62em; background:var(--gold); transform:rotate(45deg); border-radius:1px; } .prose ol{ counter-reset:pr; } .prose ol > li{ counter-increment:pr; } .prose ol > li::before{ content:counter(pr); flex:none; width:24px; height:24px; margin-top:.12em; background:var(--green-50); color:var(--green-800); border-radius:50%; font-size:.78rem; font-weight:700; display:grid; place-items:center; } .prose blockquote{ margin:1.8rem 0; padding:1.2rem 1.5rem; background:var(--cream); border-inline-start:3px solid var(--gold); border-radius:0 var(--r-sm) var(--r-sm) 0; font-family:Lora,Georgia,serif; font-size:1.08rem; color:var(--ink); } .prose blockquote p{ color:inherit; margin:0; } .prose figure{ margin:2rem 0; } .prose figure img{ width:100%; border-radius:var(--r-md); box-shadow:var(--sh-2); } .prose figcaption{ font-size:.84rem; color:var(--ink-3); margin-top:.6rem; text-align:center; } .prose hr{ border:0; border-top:1px solid var(--line); margin-block:2.4rem; } /* Article + sidebar. The sidebar drops under the article on tablet. The article column is sized to the reading measure rather than to the leftover space. Left as 1fr it was 951px wide while the paragraphs inside it capped at 701px — so the meta rule and the lead image overhung the text by 250px, and that 250px sat as dead air inside the column. Now the column IS the measure, everything in it shares one right edge, and the leftover space becomes a single deliberate gutter before the sidebar. */ .artwrap{ display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:clamp(2rem,4vw,4rem); align-items:start; } .artwrap > article{ max-width:var(--measure-text); } @media (min-width:1051px){ .artwrap{ grid-template-columns:minmax(0,var(--measure-text)) 320px; justify-content:space-between; } } @media (max-width:1050px){ .artwrap{ grid-template-columns:1fr; } } .aside{ display:flex; flex-direction:column; gap:1.2rem; } @media (min-width:1051px){ .aside{ position:sticky; top:130px; } } .asidecard{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); padding:1.5rem 1.4rem; box-shadow:var(--sh-1); } .band--cream .asidecard{ background:var(--white); } .asidecard h3{ font-size:1.04rem; margin-bottom:.75rem; } .asidecard p{ font-size:.89rem; color:var(--ink-2); line-height:1.65; margin-bottom:1rem; } .asidecard .btn{ width:100%; } .asidecard .btn + .btn{ margin-top:.55rem; } .asidelinks li{ padding:.34rem 0; border-bottom:1px solid var(--line-2); } .asidelinks li:last-child{ border-bottom:0; } .asidelinks a{ display:flex; align-items:center; justify-content:space-between; gap:.7rem; font-size:.9rem; font-weight:600; color:var(--ink-2); text-decoration:none; transition:color var(--t-fast); } .asidelinks a:hover{ color:var(--green-700); } .asidelinks svg{ width:14px; height:14px; flex:none; color:var(--gold-deep); } /* ---------- 27. Inclusions grid ------------------------------------------ */ .incl{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap-card); } @media (max-width:980px){ .incl{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .incl{ grid-template-columns:1fr; } } .incl__i{ display:flex; gap:1rem; align-items:flex-start; background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); padding:1.25rem 1.3rem; 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); } .incl__i:hover{ box-shadow:var(--sh-2); transform:translateY(-4px); border-color:rgba(201,162,39,.4); } .incl__ico{ width:44px; height:44px; flex:none; border-radius:var(--r-sm); background:linear-gradient(140deg,var(--green-700),var(--green-900)); display:grid; place-items:center; } .incl__ico svg{ width:21px; height:21px; color:var(--gold-lt); } .incl__i b{ display:block; font-size:.99rem; font-weight:700; line-height:1.35; margin-bottom:.2rem; } .incl__i span{ display:block; font-size:.86rem; color:var(--ink-2); line-height:1.55; } /* "What is not included" — deliberately styled as the opposite of the inclusions: rust, dashed, no lift on hover. */ .excl{ display:flex; flex-direction:column; gap:.6rem; } .excl li{ display:flex; gap:.7rem; align-items:flex-start; font-size:.93rem; color:var(--ink-2); line-height:1.6; } .excl svg{ width:17px; height:17px; flex:none; margin-top:4px; color:var(--rust); } /* ---------- 28. Comparison table ----------------------------------------- A real on desktop; on a phone each row becomes its own labelled card, because a five-column table on a 360px screen is unreadable. */ .cmpwrap{ overflow-x:auto; } .cmp{ width:100%; border-collapse:separate; border-spacing:0; background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden; box-shadow:var(--sh-1); } .cmp th,.cmp td{ padding:1rem 1.2rem; text-align:left; border-bottom:1px solid var(--line-2); font-size:.93rem; } .cmp thead th{ background:var(--green-900); color:var(--on-dark); border-bottom:0; font-family:Lora,Georgia,serif; font-size:1rem; font-weight:600; } .cmp thead th:first-child{ color:var(--gold-lt); } .cmp tbody th{ font-weight:700; color:var(--ink); font-size:.93rem; } .cmp tbody tr:last-child th,.cmp tbody tr:last-child td{ border-bottom:0; } .cmp tbody tr:hover td,.cmp tbody tr:hover th{ background:var(--cream); } .cmp td{ color:var(--ink-2); } .cmp .yes{ color:var(--green-600); font-weight:700; } .cmp .no{ color:var(--ink-3); } .cmp__price{ font-family:Lora,Georgia,serif; font-size:1.15rem; font-weight:700; color:var(--green-800); font-variant-numeric:tabular-nums; } @media (max-width:760px){ .cmp,.cmp tbody,.cmp tr,.cmp td,.cmp th{ display:block; } .cmp thead{ display:none; } .cmp{ border:0; box-shadow:none; background:transparent; } .cmp tbody tr{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); margin-bottom:.9rem; box-shadow:var(--sh-1); overflow:hidden; } .cmp tbody th{ background:var(--green-50); border-bottom:1px solid var(--line); } .cmp td{ display:flex; justify-content:space-between; gap:1rem; } .cmp td::before{ content:attr(data-l); font-weight:700; color:var(--ink); flex:none; font-size:.85rem; letter-spacing:.02em; } } /* ---------- 29. Ziyarat site cards --------------------------------------- */ .zc{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap-card); } @media (max-width:1000px){ .zc{ grid-template-columns:repeat(2,1fr); } } @media (max-width:620px){ .zc{ grid-template-columns:1fr; } } .zcard{ position:relative; border-radius:var(--r-md); overflow:hidden; background:var(--white); border:1px solid var(--line); box-shadow:var(--sh-1); display:flex; flex-direction:column; transition:box-shadow var(--t-mid) var(--ease), transform var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease); } .zcard:hover{ box-shadow:var(--sh-3); transform:translateY(-6px); border-color:rgba(201,162,39,.45); } .zcard__img{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--green-900); } .zcard__img img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); } .zcard:hover .zcard__img img{ transform:scale(1.06); } .zcard__tag{ position:absolute; top:.85rem; left:.85rem; z-index:2; font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; background:rgba(10,58,36,.88); color:var(--gold-lt); padding:.32rem .75rem; border-radius:var(--r-pill); } .zcard__b{ padding:1.15rem 1.3rem 1.4rem; flex:1; } .zcard__b h3{ font-size:1.1rem; font-weight:700; margin-bottom:.15rem; } .zcard__sub{ display:block; font-size:.76rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-deep); margin-bottom:.6rem; } .zcard__b p{ font-size:.89rem; color:var(--ink-2); line-height:1.62; margin:0; } /* ---------- 30. International Ziyarat tour cards ------------------------- These carry real prices off the company's own flyer, so the number is the loudest thing in the card after the destination. */ .ztours{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--gap-card); } @media (max-width:900px){ .ztours{ grid-template-columns:1fr; } } .ztour{ display:flex; flex-direction:column; 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), transform var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease); } .ztour:hover{ box-shadow:var(--sh-3); transform:translateY(-6px); border-color:rgba(201,162,39,.45); } .ztour--feature{ border-color:rgba(201,162,39,.5); } .ztour__top{ display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.15rem 1.4rem; position:relative; overflow:hidden; background:linear-gradient(135deg,var(--green-700),var(--green-900)); color:var(--on-dark); } .ztour--feature .ztour__top{ background:linear-gradient(135deg,#8A6D15,var(--green-900)); } .ztour__top::before{ content:""; position:absolute; inset:0; background-image:var(--pattern); opacity:.09; } .ztour__top > *{ position:relative; z-index:1; } .ztour__days b{ display:block; font-family:Lora,Georgia,serif; font-size:2rem; font-weight:700; line-height:1; color:var(--gold-lt); font-variant-numeric:tabular-nums; } .ztour__days span{ font-size:.68rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; } .ztour__price{ text-align:right; } .ztour__price b{ display:block; font-family:Lora,Georgia,serif; font-size:1.5rem; font-weight:700; line-height:1.1; font-variant-numeric:tabular-nums; } .ztour__price span{ font-size:.74rem; color:var(--on-dark-2); } .ztour__b{ padding:1.4rem; flex:1; display:flex; flex-direction:column; } .ztour__b h3{ font-size:1.14rem; font-weight:700; line-height:1.35; margin-bottom:.9rem; } .ztour__places{ display:flex; flex-direction:column; gap:.42rem; flex:1; margin-bottom:1.2rem; } .ztour__places li{ display:flex; gap:.6rem; align-items:flex-start; font-size:.9rem; color:var(--ink-2); } .ztour__places svg{ width:14px; height:14px; flex:none; margin-top:5px; color:var(--gold-deep); } /* Facts rail — group size, dates, airports */ .facts{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--gap-card); } @media (max-width:760px){ .facts{ grid-template-columns:1fr; } } .fact{ transition:box-shadow var(--t-mid) var(--ease), transform var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease); display:flex; gap:.95rem; align-items:center; background:var(--white); border:1px solid var(--line); border-radius:var(--r-md); padding:1.15rem 1.25rem; box-shadow:var(--sh-1); } .fact:hover{ box-shadow:var(--sh-2); transform:translateY(-4px); border-color:rgba(201,162,39,.4); } .fact svg{ width:30px; height:30px; flex:none; color:var(--gold-deep); } .fact b{ display:block; font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--gold-deep); } .fact span{ display:block; font-size:.98rem; font-weight:600; color:var(--ink); line-height:1.4; } /* ---------- 31. Gallery -------------------------------------------------- CSS multi-column masonry, so photographs keep their own proportions instead of all being cropped to one shape. Filtering is a class toggle; with JavaScript off every photo is simply shown. */ .galfilter{ display:flex; flex-wrap:wrap; gap:.55rem; justify-content:center; margin-bottom:2.2rem; } .galfilter button{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-pill); padding:.5rem 1.15rem; font-size:.87rem; font-weight:700; color:var(--ink-2); cursor:pointer; transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast), transform var(--t-fast) var(--ease); } .galfilter button:hover{ border-color:var(--green-800); color:var(--green-800); transform:translateY(-2px); } .galfilter button[aria-pressed="true"]{ background:var(--green-800); border-color:var(--green-800); color:var(--on-dark); } .gal{ columns:4; column-gap:1rem; } @media (max-width:1250px){ .gal{ columns:3; } } @media (max-width:820px){ .gal{ columns:2; } } @media (max-width:460px){ .gal{ columns:1; } } .gal__i{ break-inside:avoid; margin-bottom:1rem; display:block; } .gal__i[hidden]{ display:none; } .gal__b{ display:block; width:100%; padding:0; border:1px solid var(--line); cursor:zoom-in; background:var(--white); border-radius:var(--r-md); overflow:hidden; box-shadow:var(--sh-1); position:relative; transition:box-shadow var(--t-mid) var(--ease), transform var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease); } .gal__b:hover{ box-shadow:var(--sh-3); transform:translateY(-5px); border-color:rgba(201,162,39,.45); } .gal__b img{ width:100%; height:auto; display:block; } .gal__b::after{ content:""; position:absolute; inset:0; background:rgba(10,58,36,0); transition:background var(--t-mid) var(--ease-soft); } .gal__b:hover::after{ background:rgba(10,58,36,.14); } /* Lightbox */ .lbox{ position:fixed; inset:0; z-index:120; display:none; background:rgba(8,26,18,.94); padding:clamp(12px,3vw,40px); align-items:center; justify-content:center; } .lbox.is-on{ display:flex; animation:lboxIn var(--t-mid) var(--ease); } @keyframes lboxIn{ from{ opacity:0; } to{ opacity:1; } } .lbox img{ max-width:100%; max-height:82vh; border-radius:var(--r-sm); box-shadow:var(--sh-3); } .lbox__cap{ position:absolute; inset-inline:0; bottom:clamp(12px,3vw,28px); text-align:center; color:var(--on-dark-2); font-size:.88rem; padding-inline:1.5rem; } .lbox__x,.lbox__p,.lbox__n{ position:absolute; width:46px; height:46px; border-radius:50%; cursor:pointer; background:rgba(250,247,239,.12); border:1px solid rgba(224,190,85,.32); color:var(--on-dark); display:grid; place-items:center; transition:background var(--t-fast), transform var(--t-fast) var(--ease); } .lbox__x:hover,.lbox__p:hover,.lbox__n:hover{ background:var(--gold); color:var(--green-900); transform:scale(1.08); } .lbox__x{ top:clamp(12px,3vw,26px); right:clamp(12px,3vw,26px); } .lbox__p{ left:clamp(8px,2vw,26px); top:50%; margin-top:-23px; } .lbox__n{ right:clamp(8px,2vw,26px); top:50%; margin-top:-23px; } .lbox__x svg,.lbox__p svg,.lbox__n svg{ width:20px; height:20px; } /* ---------- 32. Self-hosted video cards ---------------------------------- preload="none" and no