/* Inara Holidays design system. * * Written as CSS rather than Tailwind utilities, deliberately. Frappe ships * Bootstrap, so Tailwind would have to join the asset pipeline; the CDN build * ships a runtime compiler to every visitor and flashes unstyled content on a * slow connection, which is the opposite of the composure this brand is * selling. The tokens below mirror the requested palette and spacing exactly. */ :root{ /* Deep emerald primary, sand/gold accent, off-white ground. */ --ink:#1c1917; --body:#44403c; --muted:#78716c; --line:#e7e5e4; --line-soft:#f5f5f4; /* Pure white is the thing that makes a page read as a form rather than a brochure. The PAGE is stone-50; white is reserved for cards that need to lift off it, which is what makes the lift read at all. */ --bg:#f5f5f4; /* stone-100 — the page */ --bg-deep:#e7e5e4; /* stone-200 — inputs, recessed areas */ --surface:#fafaf9; /* stone-50 — cards only */ --brand:#064e3b; /* emerald-900 */ --brand-mid:#047857; --brand-soft:#ecfdf5; --gold:#b08d4f; --gold-soft:#fdf8ef; --radius:1rem; /* inputs, rounded-2xl */ --radius-lg:1.5rem; /* rounded-3xl — cards */ --radius-xl:1.75rem; /* the booking sidebar */ /* Shadows tinted with the brand green rather than neutral grey. A grey shadow on a warm off-white reads as dirt; a tinted one reads as depth. */ --shadow-sm:0 8px 30px rgba(6,78,59,.04); --shadow:0 20px 40px -15px rgba(6,78,59,.07); --shadow-lg:0 25px 50px -12px rgba(6,78,59,.11); --serif:"Playfair Display",Georgia,"Times New Roman",serif; --sans:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;font-family:var(--sans);color:var(--body);background:var(--bg); line-height:1.65;-webkit-font-smoothing:antialiased;font-size:16.5px} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} h1,h2,h3,h4{font-family:var(--serif);color:var(--ink);font-weight:600; letter-spacing:-.02em;line-height:1.15;margin:0} .wrap{max-width:1180px;margin:0 auto;padding:0 24px} .section{padding:104px 0} /* macro whitespace */ .section--tight{padding:64px 0} .eyebrow{font-family:var(--sans);font-size:.72rem;font-weight:600;letter-spacing:.16em; text-transform:uppercase;color:var(--gold)} .lede{color:var(--muted);font-size:1.05rem;max-width:62ch;margin:14px 0 0} /* ── Navigation ─────────────────────────────────────────────── */ .nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.88); backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)} .nav .wrap{display:flex;align-items:center;justify-content:space-between;height:76px} .brand{font-family:var(--serif);font-weight:700;font-size:1.4rem;color:var(--ink);letter-spacing:-.02em} .brand span{color:var(--brand-mid)} .nav a.link{font-size:.94rem;font-weight:500;color:var(--body);margin-left:30px; transition:color .2s ease} .nav a.link:hover{color:var(--brand-mid)} /* Five links do not fit beside the brand on a phone: scroll them sideways rather than wrapping the bar to two lines. */ @media(max-width:760px){ .nav .wrap{gap:14px} .nav .wrap>div{display:flex;overflow-x:auto;white-space:nowrap;scrollbar-width:none} .nav a.link{margin-left:18px;font-size:.88rem} } /* ── Buttons ────────────────────────────────────────────────── */ .btn{display:inline-block;font-weight:600;font-size:.95rem;padding:14px 30px; border-radius:999px;border:1px solid transparent;cursor:pointer; transition:background .25s ease,transform .25s ease,box-shadow .25s ease} .btn:hover{transform:translateY(-2px)} .btn--solid{background:linear-gradient(135deg,#064e3b 0%,#065f46 100%);color:#fff; box-shadow:var(--shadow);border-radius:var(--radius)} .btn--solid:hover{transform:translateY(-4px);box-shadow:0 10px 25px -5px rgba(6,78,59,.3)} .btn--light{background:#fff;color:var(--brand)} .btn--light:hover{background:var(--gold-soft)} .btn--ghost{border-color:var(--line);color:var(--ink);background:transparent} .btn--ghost:hover{border-color:var(--brand-mid);color:var(--brand-mid)} .btn--block{display:block;width:100%;text-align:center} /* ── Hero ───────────────────────────────────────────────────── */ .hero{position:relative;min-height:clamp(500px, 74vh, 860px);display:flex;align-items:center; overflow:hidden;background:#04231a} .hero__media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} .hero__scrim{position:absolute;inset:0;z-index:1; background:linear-gradient(105deg,rgba(4,35,26,.94) 0%,rgba(6,78,59,.80) 48%,rgba(4,35,26,.62) 100%)} /* Over a photograph the full scrim above would bury it. Darkest at the left, where the headline sits (white text stays well above 4.5:1 there), clearing toward the right so the picture reads. */ .hero--photo .hero__scrim{ background:linear-gradient(100deg,rgba(4,35,26,.90) 0%,rgba(4,35,26,.72) 42%,rgba(4,35,26,.28) 100%)} .hero__inner{position:relative;z-index:2;width:100%;padding:110px 0} /* width: a flex child shrinks to its text otherwise, and .wrap cannot centre */ .hero h1{color:#fff;font-size:clamp(2.6rem,5.6vw,4.1rem);letter-spacing:-.035em;line-height:1.02} .hero h1 em{font-style:normal;color:#d8c08a} .hero p{color:rgba(255,255,255,.86);font-size:1.12rem;max-width:56ch;margin:22px 0 34px} .hero__cta{display:flex;gap:14px;flex-wrap:wrap} /* ── Brand film beside the "Why Inara" intro ─────────────────── */ .intro{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px;align-items:center} /* Capped near the source's 480px so the film is never shown much larger than it was made; beyond that it softens visibly. */ .film{margin:0;justify-self:end;width:100%;max-width:520px;aspect-ratio:16/9; border-radius:var(--radius-lg);overflow:hidden;background:#04231a;box-shadow:var(--shadow-lg)} .film__video{display:block;width:100%;height:100%;object-fit:cover} @media(max-width:860px){.intro{grid-template-columns:1fr;gap:32px}.film{justify-self:stretch;max-width:none}} /* ── Trust strip ────────────────────────────────────────────── */ .trust{background:var(--bg);border-bottom:1px solid var(--line)} .trust .wrap{display:flex;gap:44px;flex-wrap:wrap;justify-content:center;padding:26px 24px} .trust__item{display:flex;align-items:center;gap:11px;color:var(--body); font-size:.86rem;font-weight:500;transition:transform .3s ease} .trust__item:hover{transform:translateY(-2px)} .trust__item svg{width:20px;height:20px;stroke:var(--brand-mid);flex:none} /* ── Cards ──────────────────────────────────────────────────── */ .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:30px} .card{background:var(--surface);border:1px solid transparent;border-radius:var(--radius-lg); overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-sm); transition:box-shadow .35s ease,transform .35s ease,border-color .35s ease} .card:hover{box-shadow:var(--shadow-lg);transform:translateY(-6px);border-color:transparent} .card__media{position:relative;height:210px;overflow:hidden;background:linear-gradient(135deg,#064e3b,#0f766e)} .card__media img{width:100%;height:100%;object-fit:cover; transition:transform .7s cubic-bezier(.2,.7,.3,1)} .card:hover .card__media img{transform:scale(1.05)} .card__body{padding:26px;display:flex;flex-direction:column;flex:1} .card h3{font-size:1.24rem;margin:12px 0 8px} .card__desc{color:var(--muted);font-size:.93rem;flex:1;margin:0 0 20px} .card__foot{display:flex;justify-content:space-between;align-items:flex-end; border-top:1px solid var(--line-soft);padding-top:18px;margin-top:auto} .price{font-family:var(--serif);font-size:1.6rem;color:var(--brand);font-weight:700;line-height:1;letter-spacing:-0.02em} .price__per{color:var(--muted);font-size:.78rem;margin-top:5px} .pill{display:inline-flex;align-items:center;gap:6px;font-size:.7rem;font-weight:600; letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;border-radius:999px} .pill--brand{color:var(--brand);background:var(--brand-soft)} .pill--gold{color:#7a5f28;background:var(--gold-soft);border:1px solid #efe2c8} .pill--link{color:var(--body);background:var(--bg);border:1px solid var(--line); transition:all .2s ease} .pill--link:hover{color:var(--brand);background:var(--brand-soft);border-color:#a7f3d0} .pill--on{color:#fff;background:var(--brand);border-color:var(--brand)} .scarcity{font-size:.82rem;color:var(--gold);font-weight:600;margin-top:12px} /* ── Detail layout ──────────────────────────────────────────── */ .detail{display:grid;grid-template-columns:minmax(0,1fr) 372px;gap:56px;align-items:start} .aside{position:sticky;top:104px;background:var(--surface); border:1px solid rgba(229,231,235,.5);border-radius:var(--radius-xl); padding:32px;box-shadow:var(--shadow-lg)} /* ── Accordion itinerary ────────────────────────────────────── */ .acc{display:flex;flex-direction:column;gap:12px} .acc__item{background:var(--bg);border:1px solid rgba(231,229,228,.8); border-left:4px solid transparent;border-radius:var(--radius); overflow:hidden;transition:background .3s ease,border-color .3s ease,box-shadow .3s ease} .acc__item:hover{background:var(--bg-deep)} /* A 4px emerald edge anchors the eye to the open day — the one thing on the page that should be obvious at a glance while reading a long itinerary. */ .acc__item[open]{background:var(--surface);border-left-color:var(--brand-mid); box-shadow:var(--shadow-sm)} .acc__head{display:flex;align-items:center;gap:20px;padding:20px 22px;cursor:pointer; list-style:none;user-select:none} .acc__head::-webkit-details-marker{display:none} .acc__day{font-family:var(--serif);font-size:.82rem;font-weight:700;color:var(--brand-mid); letter-spacing:.06em;text-transform:uppercase;flex:none;width:62px} .acc__title{font-family:var(--serif);font-size:1.06rem;color:var(--ink);flex:1} /* A thin chevron that rotates, rather than a plus turning into a minus. The plus reads as "add"; a chevron reads as "there is more below", which is what is actually happening. */ .acc__icon{flex:none;width:18px;height:18px;transition:transform .35s cubic-bezier(.4,0,.2,1)} .acc__icon svg{width:18px;height:18px;stroke:var(--muted);fill:none;stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round} .acc__item[open] .acc__icon{transform:rotate(180deg)} .acc__item[open] .acc__icon svg{stroke:var(--brand-mid)} .acc__body{padding:0 24px 24px 24px;color:var(--muted);font-size:.95rem; animation:accIn .35s cubic-bezier(.2,.7,.3,1)} @keyframes accIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} /* ── Traveller counter ──────────────────────────────────────── */ .count{display:flex;align-items:center;justify-content:space-between;gap:12px; border:1px solid var(--line);border-radius:12px;padding:8px 10px;margin:16px 0} .count__btn{width:34px;height:34px;border-radius:9px;border:1px solid var(--line); background:#fff;font-size:1.15rem;line-height:1;color:var(--brand); cursor:pointer;transition:all .2s ease} .count__btn:hover:not(:disabled){background:var(--brand-soft);border-color:#a7f3d0} .count__btn:disabled{opacity:.35;cursor:not-allowed} .count__n{font-family:var(--serif);font-size:1.18rem;color:var(--ink);min-width:2ch;text-align:center} .rowline{display:flex;justify-content:space-between;align-items:center; padding:11px 0;border-bottom:1px solid var(--line-soft);font-size:.92rem} .rowline:last-child{border-bottom:0} .total{display:flex;justify-content:space-between;align-items:baseline; border-top:2px solid var(--ink);margin-top:14px;padding-top:16px} /* ── Tables, misc ───────────────────────────────────────────── */ .tbl{width:100%;border-collapse:collapse;font-size:.93rem} .tbl th{text-align:left;padding:12px;font-family:var(--sans);font-size:.7rem; text-transform:uppercase;letter-spacing:.09em;color:var(--muted); border-bottom:1px solid var(--line)} .tbl td{padding:14px 12px;border-bottom:1px solid var(--line-soft)} .empty{border:1px dashed var(--line);border-radius:var(--radius);padding:56px; text-align:center;color:var(--muted);background:var(--bg)} .prose h2{font-size:1.4rem;margin:36px 0 10px} .prose p{margin:0 0 16px} .prose ul{margin:0 0 16px;padding-left:20px} /* ── Footer ─────────────────────────────────────────────────── */ .foot{background:#04231a;color:rgba(255,255,255,.62);padding:64px 0 34px;margin-top:96px} .foot__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:44px} .foot h4{color:#fff;font-family:var(--sans);font-size:.74rem;letter-spacing:.14em; text-transform:uppercase;margin:0 0 16px;font-weight:600} .foot a{display:block;padding:5px 0;font-size:.92rem;transition:color .2s ease} .foot a:hover{color:#d8c08a} .foot__brand{font-family:var(--serif);font-size:1.5rem;color:#fff;margin-bottom:12px} .foot__bar{border-top:1px solid rgba(255,255,255,.12);margin-top:44px;padding-top:24px; font-size:.82rem;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap} /* ── Scroll reveal ──────────────────────────────────────────── */ .reveal{opacity:0;transform:translateY(16px); transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)} .reveal.in{opacity:1;transform:none} /* Anyone who has asked their system not to animate gets no animation, and — critically — still sees the content: without this the reveal state would leave every section permanently invisible. */ @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} .reveal{opacity:1;transform:none} html{scroll-behavior:auto} } @media(max-width:960px){ .detail{grid-template-columns:1fr;gap:36px} .aside{position:static} .foot__grid{grid-template-columns:1fr;gap:28px} .section{padding:60px 0} .acc__body{padding-left:22px} } /* ── Concierge form fields ────────────────────────────────────────────────── * Floating labels in pure CSS via :placeholder-shown. No JS, and the label is * a real