/* ============================================================= AURA TRAVEL HUB — Core stylesheet Brand: electric yellow #FEEE04 on black, angular/cut geometry ============================================================= */ /* ---------- 1. Tokens ---------- THEMES. Three colour schemes ship with the site. Switch with the dev panel in the bottom-left, or hard-set one by putting data-theme on : Once you've picked one, see README.md for how to strip the switcher out. Every colour below is a variable — nothing in the rest of this file is hardcoded, so a new theme is just another block of overrides. */ :root, [data-theme="midnight"]{ /* ---- Theme 1: MIDNIGHT — black + electric yellow (the logo, literally) ---- */ --yellow:#FEEE04; --yellow-dim:#c9bd06; --yellow-glow:rgba(254,238,4,.28); --on-yellow:#000000; /* text that sits on a yellow fill */ --black:#000000; /* page background */ --ink:#0a0a0a; /* alternating section background */ --ink-2:#111111; /* card background */ --ink-3:#171717; /* card hover / input background */ --line:rgba(254,238,4,.18); /* accent hairline */ --line-soft:rgba(255,255,255,.10); --grid-line:var(--grid-line); /* faint background grid texture */ --ghost-num:rgba(255,255,255,.06); /* big watermark numerals on cards */ --white:#ffffff; /* headings */ --grey:#b7b7b7; /* body text */ --grey-2:#8a8a8a; /* muted / meta text */ --header-bg:rgba(0,0,0,.86); --header-bg-stuck:rgba(0,0,0,.96); --btn-dark-bg:#000000; --ring:rgba(255,255,255,.28); --map-filter:grayscale(1) invert(.92) contrast(.86); --shadow:0 12px 40px -18px #000; --font-display:'Anton', 'Arial Narrow', Impact, sans-serif; --font-body:'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --wrap:1240px; --cut:18px; --radius:2px; --ease:cubic-bezier(.22,.61,.36,1); } /* ---- Theme 2: IVORY — light, editorial, yellow used sparingly ---- */ [data-theme="ivory"]{ --yellow:#F2CF00; --yellow-dim:#b39a00; --yellow-glow:rgba(242,207,0,.30); --on-yellow:#141414; --black:#FBFAF7; --ink:#F2F0EA; --ink-2:#FFFFFF; --ink-3:#F6F4EE; --line:rgba(20,20,20,.22); --line-soft:rgba(20,20,20,.12); --grid-line:rgba(20,20,20,.035); --ghost-num:rgba(20,20,20,.07); --white:#141414; --grey:#4a4a4a; --grey-2:#767676; --header-bg:rgba(251,250,247,.88); --header-bg-stuck:rgba(251,250,247,.97); --btn-dark-bg:#141414; --ring:rgba(20,20,20,.30); --map-filter:grayscale(.35) contrast(1.02); --shadow:0 12px 40px -18px rgba(20,20,20,.45); } /* ---- Theme 3: SLATE — deep blue-grey, softer than pure black ---- */ [data-theme="slate"]{ --yellow:#FFD84D; --yellow-dim:#c9a92e; --yellow-glow:rgba(255,216,77,.26); --on-yellow:#11161F; --black:#0D1219; --ink:#131A24; --ink-2:#18202C; --ink-3:#1E2735; --line:rgba(255,216,77,.20); --line-soft:rgba(190,210,235,.12); --grid-line:rgba(190,210,235,.035); --ghost-num:rgba(190,210,235,.07); --white:#F2F6FC; --grey:#A8B6C8; --grey-2:#7C8B9E; --header-bg:rgba(13,18,25,.86); --header-bg-stuck:rgba(13,18,25,.97); --btn-dark-bg:#0D1219; --ring:rgba(190,210,235,.30); --map-filter:grayscale(.8) invert(.9) contrast(.85) hue-rotate(180deg); --shadow:0 14px 44px -18px rgba(0,0,0,.85); } /* Angular corner cut — the signature shape, echoes the logo letterforms */ .cut{ clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); } .cut-sm{ --cut:10px; } /* ---------- 2. Reset ---------- */ *,*::before,*::after{box-sizing:border-box;} html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;} body{ margin:0; background:var(--black); color:var(--grey); font-family:var(--font-body); font-size:16.5px; line-height:1.75; overflow-x:hidden; -webkit-font-smoothing:antialiased; } img{max-width:100%; display:block; height:auto;} a{color:inherit; text-decoration:none;} ul{margin:0; padding:0; list-style:none;} button,input,select,textarea{font:inherit; color:inherit;} ::selection{background:var(--yellow); color:var(--on-yellow);} /* ---------- 3. Typography ---------- */ h1,h2,h3,h4,h5{ font-family:var(--font-display); font-weight:400; color:var(--white); margin:0 0 .5em; line-height:1.02; letter-spacing:.5px; text-transform:uppercase; } h1{font-size:clamp(2.6rem,6.2vw,5.1rem);} h2{font-size:clamp(2rem,4.4vw,3.4rem);} h3{font-size:clamp(1.25rem,2vw,1.6rem);} h4{font-size:1.05rem; letter-spacing:1px;} p{margin:0 0 1.1em;} p:last-child{margin-bottom:0;} strong{color:var(--white); font-weight:600;} .hl{color:var(--yellow);} .eyebrow{ display:inline-flex; align-items:center; gap:.6rem; font-family:var(--font-body); font-size:.72rem; font-weight:700; letter-spacing:.28em; text-transform:uppercase; color:var(--yellow); margin-bottom:1.1rem; } .eyebrow::before{ content:""; width:34px; height:2px; background:var(--yellow); flex:none; } .lead{font-size:1.08rem; color:var(--grey);} /* ---------- 4. Layout ---------- */ .wrap{width:min(100% - 2.6rem, var(--wrap)); margin-inline:auto;} .section{padding:clamp(4.5rem,9vw,7.5rem) 0;} .section--tight{padding:clamp(3rem,6vw,4.5rem) 0;} .section--alt{background:var(--ink);} .sec-head{max-width:760px; margin-bottom:3.2rem;} .sec-head--center{margin-inline:auto; text-align:center;} .sec-head--center .eyebrow{justify-content:center;} .sec-head p{color:var(--grey);} .grid{display:grid; gap:1.6rem;} .g-2{grid-template-columns:repeat(2,1fr);} .g-3{grid-template-columns:repeat(3,1fr);} .g-4{grid-template-columns:repeat(4,1fr);} /* Faint grid texture used behind dark sections */ .tex{position:relative;} .tex::before{ content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; background-image:linear-gradient(var(--grid-line) 1px,transparent 1px), linear-gradient(90deg,var(--grid-line) 1px,transparent 1px); background-size:64px 64px; mask-image:radial-gradient(ellipse at 50% 0%,#000 20%,transparent 78%); } .tex > *{position:relative;} /* ---------- 5. Buttons ---------- */ .btn{ --cut:12px; display:inline-flex; align-items:center; justify-content:center; gap:.55rem; padding:.95rem 1.9rem; font-family:var(--font-body); font-weight:800; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; border:0; cursor:pointer; white-space:nowrap; transition:transform .25s var(--ease), background .25s, color .25s, box-shadow .25s; clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); } .btn:hover{transform:translateY(-3px);} .btn--primary{background:var(--yellow); color:var(--on-yellow); box-shadow:0 10px 34px -14px var(--yellow-glow);} .btn--primary:hover{background:var(--btn-dark-bg); color:var(--yellow); box-shadow:0 16px 40px -14px var(--yellow-glow);} .btn--ghost{background:transparent; color:var(--white); box-shadow:inset 0 0 0 2px var(--ring);} .btn--ghost:hover{box-shadow:inset 0 0 0 2px var(--yellow); color:var(--yellow);} .btn--dark{background:var(--btn-dark-bg); color:var(--yellow); box-shadow:inset 0 0 0 2px var(--yellow);} .btn--dark:hover{background:var(--yellow); color:var(--on-yellow);} .btn--sm{padding:.7rem 1.3rem; font-size:.72rem; --cut:9px;} .btn--block{width:100%;} .btn-row{display:flex; flex-wrap:wrap; gap:.9rem;} /* Text link with arrow */ .link-more{ display:inline-flex; align-items:center; gap:.5rem; font-weight:800; font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--yellow); } .link-more svg{transition:transform .25s var(--ease);} .link-more:hover svg{transform:translateX(5px);} /* ---------- 6. Top bar ---------- */ .topbar{ background:var(--ink-2); border-bottom:1px solid var(--line-soft); font-size:.78rem; color:var(--grey-2); } .topbar__inner{display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:42px;} .topbar a:hover{color:var(--yellow);} .topbar__meta{display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap;} .topbar__meta span{display:inline-flex; align-items:center; gap:.45rem;} .topbar__meta svg{width:14px; height:14px; color:var(--yellow); flex:none;} .socials{display:flex; align-items:center; gap:.85rem;} .socials a{display:grid; place-items:center; width:26px; height:26px; transition:color .2s, transform .2s;} .socials a:hover{color:var(--yellow); transform:translateY(-2px);} .socials svg{width:15px; height:15px;} /* ---------- 7. Header / nav ---------- */ .header{ position:sticky; top:0; z-index:90; background:var(--header-bg); backdrop-filter:blur(14px); border-bottom:1px solid var(--line-soft); transition:box-shadow .3s, background .3s; } .header.is-stuck{background:var(--header-bg-stuck); box-shadow:var(--shadow);} .header__inner{display:flex; align-items:center; justify-content:space-between; gap:1.5rem; min-height:82px;} .brand{display:flex; align-items:center; gap:.8rem; flex:none;} .brand img{width:56px; height:56px; object-fit:contain;} .brand__txt{display:flex; flex-direction:column; line-height:1;} .brand__name{font-family:var(--font-display); font-size:1.4rem; color:var(--white); letter-spacing:1.5px;} .brand__sub{font-size:.6rem; font-weight:700; letter-spacing:.34em; color:var(--yellow); margin-top:4px;} .nav{display:flex; align-items:center; gap:.25rem;} .nav__item{position:relative;} .nav__link{ display:flex; align-items:center; gap:.35rem; padding:.7rem .85rem; font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--grey); transition:color .2s; } .nav__link:hover,.nav__item.is-open > .nav__link,.nav__link.is-active{color:var(--yellow);} .nav__link .chev{width:10px; height:10px; transition:transform .25s;} .nav__item.is-open .chev{transform:rotate(180deg);} .drop{ position:absolute; top:calc(100% + 6px); left:0; min-width:250px; padding:.6rem; background:var(--ink-2); border:1px solid var(--line); box-shadow:var(--shadow); opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .22s var(--ease), transform .22s var(--ease), visibility .22s; } .nav__item:hover > .drop,.nav__item.is-open > .drop{opacity:1; visibility:visible; transform:translateY(0);} .drop a{ display:block; padding:.6rem .85rem; font-size:.85rem; font-weight:500; color:var(--grey); border-left:2px solid transparent; transition:.2s; } .drop a:hover{color:var(--yellow); background:rgba(254,238,4,.07); border-left-color:var(--yellow);} .drop__head{ padding:.55rem .85rem .3rem; font-size:.64rem; font-weight:800; letter-spacing:.22em; text-transform:uppercase; color:var(--grey-2); } .drop--wide{min-width:640px; display:grid; grid-template-columns:repeat(3,1fr); gap:.2rem;} .burger{ display:none; width:46px; height:46px; flex:none; background:transparent; border:1px solid var(--line-soft); cursor:pointer; align-items:center; justify-content:center; gap:5px; flex-direction:column; } .burger span{display:block; width:20px; height:2px; background:var(--yellow); transition:.28s var(--ease);} .burger.is-active span:nth-child(1){transform:translateY(7px) rotate(45deg);} .burger.is-active span:nth-child(2){opacity:0;} .burger.is-active span:nth-child(3){transform:translateY(-7px) rotate(-45deg);} /* Mobile drawer */ .mnav{ position:fixed; inset:0 0 0 auto; width:min(88vw,400px); z-index:100; background:var(--ink); border-left:1px solid var(--line); padding:1.4rem 1.4rem 3rem; overflow-y:auto; transform:translateX(100%); transition:transform .38s var(--ease); } .mnav.is-open{transform:translateX(0);} .mnav__top{display:flex; align-items:center; justify-content:space-between; margin-bottom:1.6rem;} .mnav__close{background:none; border:0; color:var(--yellow); font-size:1.9rem; line-height:1; cursor:pointer;} .mnav a{display:block; padding:.72rem 0; border-bottom:1px solid var(--line-soft); color:var(--grey); font-weight:600;} .mnav a:hover{color:var(--yellow);} .mnav__group > button{ width:100%; display:flex; align-items:center; justify-content:space-between; padding:.72rem 0; background:none; border:0; border-bottom:1px solid var(--line-soft); color:var(--white); font-weight:700; text-transform:uppercase; font-size:.85rem; letter-spacing:.08em; cursor:pointer; } .mnav__group > button .chev{width:12px; height:12px; color:var(--yellow); transition:transform .25s;} .mnav__group.is-open > button .chev{transform:rotate(180deg);} .mnav__sub{display:none; padding-left:.9rem; border-left:1px solid var(--line);} .mnav__group.is-open .mnav__sub{display:block;} .mnav__sub a{font-size:.88rem; font-weight:500;} .mnav .btn{margin-top:1.4rem;} .scrim{ position:fixed; inset:0; z-index:99; background:rgba(0,0,0,.72); backdrop-filter:blur(3px); opacity:0; visibility:hidden; transition:.3s; } .scrim.is-open{opacity:1; visibility:visible;} /* ---------- 8. Hero ---------- */ .hero{ position:relative; overflow:hidden; min-height:min(88vh,760px); display:grid; align-items:center; padding:clamp(4rem,9vw,7rem) 0; background: radial-gradient(900px 520px at 78% 18%, rgba(254,238,4,.13), transparent 62%), radial-gradient(700px 420px at 8% 88%, rgba(254,238,4,.07), transparent 60%), var(--black); } .hero__grid{ position:absolute; inset:0; opacity:.55; background-image:linear-gradient(var(--grid-line) 1px,transparent 1px), linear-gradient(90deg,var(--grid-line) 1px,transparent 1px); background-size:70px 70px; mask-image:radial-gradient(ellipse at 50% 40%,#000 12%,transparent 76%); } /* Dotted flight path, straight out of the logo mark */ .hero__path{position:absolute; left:-40px; top:12%; width:340px; opacity:.35; pointer-events:none;} .hero__path path{stroke:var(--yellow); stroke-width:3; stroke-dasharray:10 14; fill:none; stroke-linecap:round;} .hero__inner{position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:3.4rem; align-items:center;} .hero h1{margin-bottom:1.3rem;} .hero h1 .stroke{ -webkit-text-stroke:2px var(--yellow); color:transparent; display:block; } .hero__lead{font-size:1.13rem; max-width:56ch; margin-bottom:2rem;} .hero__marks{display:flex; flex-wrap:wrap; gap:1.4rem 2.2rem; margin-top:2.6rem;} .hero__mark{display:flex; align-items:center; gap:.65rem; font-size:.82rem; font-weight:600; color:var(--grey);} .hero__mark svg{width:20px; height:20px; color:var(--yellow); flex:none;} .hero__badge{ position:relative; display:grid; place-items:center; padding:2rem; background:linear-gradient(150deg,rgba(254,238,4,.12),rgba(255,255,255,.02)); border:1px solid var(--line); --cut:30px; } .hero__badge img{width:min(100%,340px); filter:drop-shadow(0 0 46px rgba(254,238,4,.34));} .hero__badge::after{ content:"EST. TAMIL NADU"; position:absolute; bottom:14px; right:20px; font-size:.6rem; font-weight:800; letter-spacing:.3em; color:var(--yellow); opacity:.55; } /* ---------- 9. Marquee ---------- */ .marquee{ background:var(--yellow); color:var(--on-yellow); overflow:hidden; padding:.85rem 0; border-block:2px solid var(--on-yellow); } .marquee__track{display:flex; gap:2.6rem; width:max-content; animation:slide 32s linear infinite;} .marquee span{ font-family:var(--font-display); font-size:1.05rem; letter-spacing:2px; display:inline-flex; align-items:center; gap:2.6rem; text-transform:uppercase; white-space:nowrap; } .marquee span::after{content:"✦"; font-size:.8rem;} @keyframes slide{to{transform:translateX(-50%);}} @media (prefers-reduced-motion:reduce){.marquee__track{animation:none;}} /* ---------- 10. Stats ---------- */ .stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-soft);} .stat{background:var(--ink); padding:2.4rem 1.6rem; text-align:center; transition:background .3s;} .stat:hover{background:var(--ink-3);} .stat__num{ font-family:var(--font-display); font-size:clamp(2.2rem,4vw,3rem); color:var(--yellow); line-height:1; margin-bottom:.5rem; } .stat__lbl{font-size:.74rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--grey-2);} /* ---------- 11. Destination cards ---------- */ .dest{ position:relative; display:block; overflow:hidden; min-height:340px; padding:1.6rem; display:flex; flex-direction:column; justify-content:flex-end; border:1px solid var(--line-soft); /* Drop in a photo with an inline style on the element: style="background-image:url(assets/img/dest/goa.jpg)" Set background-image directly, NOT --img: a relative url() inside a custom property resolves against this stylesheet folder, not the page. */ background-image:var(--img, linear-gradient(155deg,#1d1d1d,#0a0a0a)); background-size:cover; background-position:center; transition:transform .45s var(--ease), border-color .3s; } .dest::before{ content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.94) 8%,rgba(0,0,0,.42) 52%,rgba(0,0,0,.15)); transition:opacity .35s; } .dest::after{ content:""; position:absolute; inset:0; background:radial-gradient(120% 90% at 50% 120%, var(--yellow-glow), transparent 62%); opacity:0; transition:opacity .4s; } .dest:hover{transform:translateY(-7px); border-color:var(--line);} .dest:hover::after{opacity:1;} .dest > *{position:relative; z-index:1;} .dest__tag{ align-self:flex-start; margin-bottom:auto; padding:.34rem .7rem; background:var(--yellow); color:var(--on-yellow); font-size:.62rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; } .dest__name{font-family:var(--font-display); font-size:1.85rem; color:#fff; line-height:1; margin-bottom:.35rem; text-transform:uppercase;} .dest__meta{font-size:.8rem; color:var(--grey); margin-bottom:.9rem;} .dest__meta b{color:var(--yellow); font-weight:700;} .dest .link-more{font-size:.72rem;} .dest--tall{min-height:480px;} /* Feature grid — big first tile */ .dest-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem;} .dest-grid .dest:first-child{grid-column:span 2; grid-row:span 2; min-height:100%;} .dest-grid .dest:first-child .dest__name{font-size:2.6rem;} /* ---------- 12. Generic cards ---------- */ .card{ position:relative; padding:2.1rem 1.8rem; background:var(--ink-2); border:1px solid var(--line-soft); transition:transform .35s var(--ease), border-color .3s, background .3s; } .card:hover{transform:translateY(-6px); border-color:var(--line); background:var(--ink-3);} .card__ico{ display:grid; place-items:center; width:56px; height:56px; margin-bottom:1.3rem; background:rgba(254,238,4,.11); color:var(--yellow); --cut:11px; } .card__ico svg{width:26px; height:26px;} .card h3{margin-bottom:.6rem; font-size:1.3rem;} .card p{font-size:.95rem;} .card__n{ position:absolute; top:1.2rem; right:1.4rem; font-family:var(--font-display); font-size:2.4rem; color:var(--ghost-num); line-height:1; } .feat{display:flex; gap:1.1rem; align-items:flex-start;} .feat__ico{ display:grid; place-items:center; width:44px; height:44px; flex:none; background:var(--yellow); color:var(--on-yellow); --cut:9px; } .feat__ico svg{width:20px; height:20px;} .feat h4{margin-bottom:.3rem; color:var(--white);} .feat p{font-size:.92rem; margin:0;} /* ---------- 13. Split content ---------- */ .split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.2rem); align-items:center;} .split--rev .split__media{order:2;} .split__media{position:relative;} .split__media img{width:100%; border:1px solid var(--line);} .split__badge{ position:absolute; right:-18px; bottom:-18px; padding:1.3rem 1.6rem; background:var(--yellow); color:var(--on-yellow); text-align:center; --cut:14px; } .split__badge b{display:block; font-family:var(--font-display); font-size:2.2rem; line-height:1;} .split__badge span{font-size:.66rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase;} .ticks{display:grid; gap:.75rem; margin:1.6rem 0 2rem;} .ticks li{display:flex; gap:.7rem; align-items:flex-start; font-size:.96rem;} .ticks svg{width:19px; height:19px; color:var(--yellow); flex:none; margin-top:.3rem;} /* ---------- 14. Testimonials ---------- */ .quote{ padding:2.1rem 1.8rem; background:var(--ink-2); border:1px solid var(--line-soft); border-top:3px solid var(--yellow); } .quote__stars{color:var(--yellow); letter-spacing:3px; margin-bottom:.9rem; font-size:.95rem;} .quote p{font-size:.98rem; color:var(--grey); font-style:italic;} .quote__by{display:flex; align-items:center; gap:.85rem; margin-top:1.4rem;} .quote__av{ display:grid; place-items:center; width:44px; height:44px; flex:none; background:var(--yellow); color:var(--on-yellow); font-family:var(--font-display); font-size:1.15rem; --cut:9px; } .quote__by b{display:block; color:var(--white); font-weight:700; font-size:.94rem; line-height:1.3;} .quote__by span{font-size:.78rem; color:var(--grey-2);} /* ---------- 15. FAQ ---------- */ .faq{border-top:1px solid var(--line-soft);} .faq__item{border-bottom:1px solid var(--line-soft);} .faq__q{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:1.4rem; padding:1.35rem .2rem; background:none; border:0; cursor:pointer; text-align:left; font-family:var(--font-body); font-size:1.02rem; font-weight:700; color:var(--white); transition:color .2s; } .faq__q:hover{color:var(--yellow);} .faq__sign{ position:relative; width:26px; height:26px; flex:none; background:rgba(254,238,4,.12); display:grid; place-items:center; } .faq__sign::before,.faq__sign::after{ content:""; position:absolute; background:var(--yellow); transition:transform .3s var(--ease); } .faq__sign::before{width:11px; height:2px;} .faq__sign::after{width:2px; height:11px;} .faq__item.is-open .faq__sign::after{transform:scaleY(0);} .faq__item.is-open .faq__q{color:var(--yellow);} .faq__a{overflow:hidden; max-height:0; transition:max-height .38s var(--ease);} .faq__a p{padding:0 3rem 1.5rem .2rem; font-size:.97rem;} /* ---------- 16. CTA band ---------- */ .cta{ position:relative; overflow:hidden; text-align:center; padding:clamp(3.4rem,7vw,5.4rem) 1.6rem; background:linear-gradient(120deg,rgba(254,238,4,.13),rgba(255,255,255,.02)); border:1px solid var(--line); --cut:34px; } .cta h2{margin-bottom:.9rem;} .cta p{max-width:60ch; margin-inline:auto; margin-bottom:2rem;} /* ---------- 17. Page hero (inner pages) ---------- */ .phero{ position:relative; padding:clamp(3.4rem,7vw,5.6rem) 0; background: radial-gradient(760px 400px at 76% 10%, rgba(254,238,4,.12), transparent 62%), var(--ink); border-bottom:1px solid var(--line-soft); } .phero h1{font-size:clamp(2.3rem,5.2vw,4rem); margin-bottom:.7rem;} .phero p{max-width:66ch;} .crumb{display:flex; gap:.5rem; align-items:center; font-size:.76rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--grey-2); margin-bottom:1.2rem;} .crumb a:hover{color:var(--yellow);} .crumb span{color:var(--yellow);} /* ---------- 18. Forms ---------- */ .form{display:grid; gap:1.1rem;} .field label{ display:block; margin-bottom:.45rem; font-size:.72rem; font-weight:800; letter-spacing:.15em; text-transform:uppercase; color:var(--grey-2); } .field input,.field select,.field textarea{ width:100%; padding:.85rem 1rem; background:var(--ink-3); border:1px solid var(--line-soft); color:var(--white); font-size:.95rem; transition:border-color .2s, background .2s; } .field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--yellow); background:var(--black); } .field textarea{resize:vertical; min-height:130px;} .field select{appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; background-size:14px; padding-right:2.6rem; } .form__row{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem;} .form__note{font-size:.8rem; color:var(--grey-2);} .form__msg{ display:none; padding:.9rem 1.1rem; font-size:.9rem; font-weight:600; background:rgba(254,238,4,.12); border-left:3px solid var(--yellow); color:var(--yellow); } .form__msg.is-on{display:block;} /* ---------- 19. Contact tiles ---------- */ .ctile{ display:flex; gap:1.1rem; padding:1.6rem; background:var(--ink-2); border:1px solid var(--line-soft); transition:.3s; } .ctile:hover{border-color:var(--line); background:var(--ink-3);} .ctile__ico{display:grid; place-items:center; width:48px; height:48px; flex:none; background:rgba(254,238,4,.12); color:var(--yellow); --cut:10px;} .ctile__ico svg{width:21px; height:21px;} .ctile h4{margin-bottom:.35rem;} .ctile p,.ctile a{font-size:.94rem; margin:0; color:var(--grey);} .ctile a:hover{color:var(--yellow);} .map-frame{border:1px solid var(--line); filter:var(--map-filter); width:100%; height:420px;} /* ---------- 20. Gallery ---------- */ .gal{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem;} .gal__i{ position:relative; min-height:230px; overflow:hidden; background-image:var(--img, linear-gradient(150deg,#1f1f1f,#0b0b0b)); background-size:cover; background-position:center; border:1px solid var(--line-soft); display:flex; align-items:flex-end; padding:1.1rem; transition:transform .4s var(--ease); } .gal__i:hover{transform:scale(1.02); border-color:var(--line);} .gal__i::before{content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.9),transparent 62%);} .gal__i span{position:relative; font-family:var(--font-display); color:#fff; font-size:1.15rem; text-transform:uppercase;} .gal__i--wide{grid-column:span 2;} /* ---------- 21. Footer ---------- */ .footer{background:var(--ink); border-top:1px solid var(--line); padding-top:4.2rem;} .footer__grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:2.6rem; padding-bottom:3rem;} .footer h4{ font-family:var(--font-body); font-size:.76rem; font-weight:800; letter-spacing:.22em; color:var(--yellow); margin-bottom:1.3rem; } .footer__brand img{width:120px; margin-bottom:1.2rem;} .footer__brand p{font-size:.92rem; max-width:38ch;} .footer li{margin-bottom:.6rem;} .footer li a{font-size:.92rem; color:var(--grey); transition:.2s;} .footer li a:hover{color:var(--yellow); padding-left:6px;} .footer address{font-style:normal; font-size:.92rem; line-height:1.85;} .footer address a:hover{color:var(--yellow);} .footer .socials{margin-top:1.4rem;} .footer .socials a{width:36px; height:36px; border:1px solid var(--line-soft);} .footer .socials a:hover{border-color:var(--yellow);} .footer__bar{ border-top:1px solid var(--line-soft); padding:1.5rem 0; display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.83rem; color:var(--grey-2); } .footer__bar a:hover{color:var(--yellow);} .footer__bar nav{display:flex; gap:1.4rem;} /* ---------- 22. Floating actions ---------- */ .fab{ position:fixed; right:20px; z-index:80; display:grid; place-items:center; width:52px; height:52px; box-shadow:0 12px 30px -10px rgba(0,0,0,.7); transition:transform .25s var(--ease); } .fab:hover{transform:translateY(-4px) scale(1.05);} .fab--wa{bottom:20px; background:#25D366; color:#fff; border-radius:50%;} .fab--wa svg{width:27px; height:27px;} .fab--top{ bottom:84px; background:var(--yellow); color:var(--on-yellow); --cut:10px; clip-path:polygon(0 0, calc(100% - var(--cut)) 0, 100% var(--cut), 100% 100%, var(--cut) 100%, 0 calc(100% - var(--cut))); opacity:0; visibility:hidden; } .fab--top.is-on{opacity:1; visibility:visible;} .fab--top svg{width:20px; height:20px;} /* ---------- 23. Reveal on scroll ---------- Scoped to .js (set by an inline script in ) so that if JavaScript is disabled or fails to load, every section stays visible instead of blank. */ .js .rv{opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease), transform .7s var(--ease);} .js .rv.is-in{opacity:1; transform:none;} @media (prefers-reduced-motion:reduce){ .js .rv{opacity:1; transform:none; transition:none;} html{scroll-behavior:auto;} } /* ---------- 24. Responsive ---------- */ @media (max-width:1080px){ .nav,.topbar__meta span.hide-md{display:none;} .burger{display:flex;} .header__inner{min-height:72px;} .hero__inner{grid-template-columns:1fr; gap:2.6rem;} .hero__badge{order:-1; max-width:420px;} .dest-grid{grid-template-columns:repeat(2,1fr);} .dest-grid .dest:first-child{grid-column:span 2; grid-row:auto; min-height:340px;} .footer__grid{grid-template-columns:repeat(2,1fr);} .gal{grid-template-columns:repeat(2,1fr);} } @media (max-width:820px){ .g-3,.g-4{grid-template-columns:repeat(2,1fr);} .stats{grid-template-columns:repeat(2,1fr);} .split{grid-template-columns:1fr;} .split--rev .split__media{order:0;} .topbar__inner{justify-content:center;} .topbar__meta{gap:1rem; justify-content:center;} } @media (max-width:560px){ body{font-size:16px;} .wrap{width:calc(100% - 2rem);} .g-2,.g-3,.g-4,.dest-grid,.gal{grid-template-columns:1fr;} .dest-grid .dest:first-child{grid-column:auto;} .gal__i--wide{grid-column:auto;} .stats{grid-template-columns:1fr 1fr;} .form__row{grid-template-columns:1fr;} .footer__grid{grid-template-columns:1fr;} .btn{width:100%;} .btn-row{flex-direction:column;} .brand img{width:46px; height:46px;} .brand__name{font-size:1.15rem;} .split__badge{right:0; bottom:-14px;} .faq__a p{padding-right:1rem;} } /* ============================================================= 25. Trip cards with day-by-day itineraries ============================================================= */ .trips{display:grid; gap:1.6rem;} .trip{ display:grid; grid-template-columns:340px 1fr; background:var(--ink-2); border:1px solid var(--line-soft); overflow:hidden; transition:border-color .3s; } .trip:hover{border-color:var(--line);} .trip__media{ position:relative; min-height:280px; background-image:var(--img, linear-gradient(155deg,#1d1d1d,#0a0a0a)); background-size:cover; background-position:center; } .trip__media::after{ content:""; position:absolute; inset:0; background:linear-gradient(105deg,transparent 55%,var(--ink-2)); } .trip__badge{ position:absolute; top:1rem; left:1rem; z-index:1; padding:.36rem .75rem; background:var(--yellow); color:var(--on-yellow); font-size:.66rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; } .trip__body{padding:1.9rem;} .trip__body h3{margin-bottom:.35rem;} .trip__route{ display:flex; align-items:center; flex-wrap:wrap; gap:.4rem; font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--yellow); margin-bottom:.9rem; } .trip__route svg{width:13px; height:13px; opacity:.7;} .trip__lede{font-size:.96rem; margin-bottom:1.2rem;} .trip__toggle{ display:inline-flex; align-items:center; gap:.6rem; padding:.6rem 0; background:none; border:0; cursor:pointer; font-family:var(--font-body); font-weight:800; font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--yellow); } .trip__toggle svg{width:14px; height:14px; transition:transform .3s var(--ease);} .trip.is-open .trip__toggle svg{transform:rotate(180deg);} .trip__detail{overflow:hidden; max-height:0; transition:max-height .45s var(--ease);} .trip__inner{padding-top:1.4rem; border-top:1px solid var(--line-soft); margin-top:.6rem;} /* the day timeline */ .days{position:relative; margin:0 0 1.6rem; padding-left:1.9rem;} .days::before{ content:""; position:absolute; left:6px; top:8px; bottom:8px; width:2px; background:linear-gradient(var(--yellow),transparent); } .day{position:relative; padding-bottom:1.4rem;} .day:last-child{padding-bottom:0;} .day::before{ content:""; position:absolute; left:-1.9rem; top:7px; width:14px; height:14px; background:var(--yellow); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); } .day__n{ display:block; font-size:.68rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; color:var(--yellow); margin-bottom:.2rem; } .day h4{margin-bottom:.5rem; font-family:var(--font-body); font-weight:700; font-size:1rem; letter-spacing:0; text-transform:none; color:var(--white);} .stops{display:flex; flex-wrap:wrap; gap:.4rem;} .stops li{ padding:.3rem .7rem; background:var(--ink-3); border:1px solid var(--line-soft); font-size:.82rem; color:var(--grey); } .stops li.is-opt{border-style:dashed; color:var(--grey-2);} /* inclusions / exclusions */ .incl{display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; margin-bottom:1.4rem;} .incl h5{ font-family:var(--font-body); font-size:.68rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; margin-bottom:.6rem; color:var(--white); } .incl ul li{display:flex; gap:.5rem; font-size:.88rem; margin-bottom:.32rem;} .incl ul li::before{font-weight:800; flex:none;} .incl--yes li::before{content:"+"; color:var(--yellow);} .incl--no li::before{content:"–"; color:var(--grey-2);} /* per-person rate ladder */ .rates{margin-bottom:1.3rem;} .rates h5{ font-family:var(--font-body); font-size:.68rem; font-weight:800; letter-spacing:.2em; text-transform:uppercase; margin-bottom:.7rem; color:var(--white); } .rate-row{display:flex; flex-wrap:wrap; gap:.5rem;} .rate{ padding:.5rem .8rem; background:var(--ink-3); border:1px solid var(--line-soft); text-align:center; min-width:92px; } .rate b{display:block; font-family:var(--font-display); font-size:1.15rem; color:var(--yellow); line-height:1.1;} .rate span{font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--grey-2);} .rates .form__note{margin-top:.6rem;} /* ============================================================= 26. Coming soon ============================================================= */ .soon{ position:relative; display:flex; flex-direction:column; justify-content:flex-end; min-height:300px; padding:1.6rem; overflow:hidden; border:1px solid var(--line-soft); background-image:var(--img, linear-gradient(155deg,#1d1d1d,#0a0a0a)); background-size:cover; background-position:center; } .soon::before{ content:""; position:absolute; inset:0; background:linear-gradient(to top,rgba(0,0,0,.94) 10%,rgba(0,0,0,.55) 55%,rgba(0,0,0,.3)); backdrop-filter:grayscale(.85); } .soon > *{position:relative; z-index:1;} .soon__tag{ align-self:flex-start; margin-bottom:auto; padding:.34rem .7rem; background:transparent; color:var(--yellow); box-shadow:inset 0 0 0 1.5px var(--yellow); font-size:.62rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; } .soon__name{ font-family:var(--font-display); font-size:1.85rem; color:#fff; line-height:1; margin-bottom:.3rem; text-transform:uppercase; } .soon__meta{font-size:.8rem; color:#c9c9c9;} .soon__note{ margin-top:.9rem; font-size:.74rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--yellow); } .soon-banner{ display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; padding:1.4rem 1.6rem; margin-bottom:2.6rem; background:rgba(254,238,4,.07); border-left:3px solid var(--yellow); } .soon-banner svg{width:26px; height:26px; color:var(--yellow); flex:none;} .soon-banner p{margin:0; font-size:.96rem;} /* ============================================================= 27. Theme switcher (development only — see README to remove) ============================================================= */ .themebar{ position:fixed; left:16px; bottom:16px; z-index:95; background:var(--ink-2); border:1px solid var(--line); box-shadow:var(--shadow); font-family:var(--font-body); transition:transform .3s var(--ease); } .themebar__head{ display:flex; align-items:center; gap:.5rem; padding:.55rem .8rem; font-size:.6rem; font-weight:800; letter-spacing:.18em; text-transform:uppercase; color:var(--grey-2); border-bottom:1px solid var(--line-soft); } .themebar__head span{width:7px; height:7px; background:var(--yellow); border-radius:50%;} .themebar__opts{display:flex; padding:.5rem; gap:.4rem;} .themebar button{ display:flex; flex-direction:column; align-items:center; gap:.4rem; padding:.5rem .6rem; background:none; border:1px solid transparent; cursor:pointer; color:var(--grey-2); font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; transition:.2s; } .themebar button:hover{color:var(--white); border-color:var(--line-soft);} .themebar button[aria-pressed="true"]{color:var(--yellow); border-color:var(--yellow);} .themebar .sw{display:flex; width:34px; height:20px; border:1px solid var(--line-soft);} .themebar .sw i{flex:1;} .themebar__close{ position:absolute; top:-9px; right:-9px; width:20px; height:20px; display:grid; place-items:center; padding:0; background:var(--yellow); color:var(--on-yellow); border:0; border-radius:50%; font-size:.8rem; line-height:1; cursor:pointer; } @media (max-width:560px){ .themebar{left:10px; bottom:10px; transform:scale(.86); transform-origin:left bottom;} } @media print{ .themebar{display:none;} } /* ============================================================= 28. Trip / soon responsive ============================================================= */ @media (max-width:900px){ .trip{grid-template-columns:1fr;} .trip__media{min-height:200px;} .trip__media::after{background:linear-gradient(to top,var(--ink-2) 2%,transparent 60%);} } @media (max-width:560px){ .trip__body{padding:1.3rem;} .incl{grid-template-columns:1fr; gap:1rem;} .days{padding-left:1.5rem;} .day::before{left:-1.5rem;} }