/* ===================================================================== Travalong — Itinerary page Scope: apply ONLY to the single-itinerary page/template. All selectors are namespaced under .itin so nothing leaks globally. Fonts: Fraunces (display/serif), DM Sans (body/sans), Caveat (accent). Load once in : ===================================================================== */ .itin { /* ---- Design tokens ---- */ --ink: #173F4A; /* headings / primary teal */ --accent: #C0512C; /* terracotta — eyebrows, essences, prices */ --amber: #D59C3C; /* small warm accent */ --included: #5F8A5F; /* green check */ --body: #5C5347; /* body copy */ --muted: #8A938E; /* labels, secondary */ --soft: #8A8270; /* fine-print text */ --hairline: rgba(23,63,74,0.14); --hairline-strong: rgba(23,63,74,0.20); --page: #EEF0EF; /* page behind the card */ --card: #FFFFFF; /* itinerary card */ --serif: 'Fraunces', Georgia, 'Times New Roman', serif; --sans: 'DM Sans', system-ui, -apple-system, sans-serif; --script: 'Caveat', 'Segoe Script', cursive; --maxw: 940px; /* ---- Page frame ---- */ box-sizing: border-box; min-height: 100vh; margin: 0; padding: clamp(16px, 4vw, 46px) clamp(10px, 3vw, 30px) 60px; background: var(--page); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .itin *, .itin *::before, .itin *::after { box-sizing: border-box; } /* ---- Card ---- */ .itin__card { max-width: var(--maxw); margin: 0 auto; background: var(--card); box-shadow: 0 24px 60px -36px rgba(23,63,74,0.5); overflow: hidden; } .itin__padtop { padding: clamp(24px,5vw,48px) clamp(22px,6vw,64px) 0; } .itin__pad { padding: clamp(26px,5vw,56px) clamp(22px,6vw,64px); } /* ---- Masthead ---- */ .itin__masthead { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-bottom: 16px; border-bottom: 1px solid rgba(23,63,74,0.16); } .itin__logo { height: clamp(30px,7vw,44px); width: auto; display: block; } .itin__meta { margin: 0; text-align: right; line-height: 1.8; font-size: 8.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } /* ---- Title block ---- */ .itin__titleblock { text-align: center; padding: clamp(28px,6vw,60px) 0 clamp(16px,4vw,24px); } .itin .eyebrow { margin: 0; font-size: clamp(8px,2vw,10px); letter-spacing: 0.42em; text-transform: uppercase; color: var(--accent); } .itin .display { margin: 12px 0 0; font-family: var(--serif); font-weight: 500; font-size: clamp(40px,11vw,108px); line-height: 0.92; letter-spacing: 0.02em; color: var(--ink); overflow-wrap: break-word; text-wrap: balance; } .itin .rule-label { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 16px 0 0; font-family: var(--serif); font-style: italic; font-size: clamp(15px,3.4vw,18px); color: var(--body); } .itin .rule-label .rule { width: 38px; height: 1px; background: rgba(23,63,74,0.3); } .itin .lede { max-width: 48ch; margin: 18px auto 0; font-family: var(--serif); font-size: clamp(15px,3.6vw,18px); line-height: 1.72; color: var(--body); text-wrap: pretty; } .itin .lede em { color: var(--ink); font-style: italic; } .itin .note { margin: 12px 0 0; font-family: var(--script); font-weight: 600; font-size: clamp(19px,4.4vw,23px); color: var(--accent); transform: rotate(-1.5deg); } /* ---- Hero ---- */ .itin__hero { position: relative; margin: 0; } .itin__hero img { display: block; width: 100%; height: min(440px, 52vw); object-fit: cover; } .itin__hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: linear-gradient(transparent, rgba(23,63,74,0.36)); pointer-events: none; } .itin__hero figcaption { position: absolute; left: clamp(16px,5vw,40px); bottom: 14px; z-index: 1; font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.92); } /* ---- Route ---- */ .route { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 0; margin: clamp(26px,5vw,44px) 0 clamp(30px,5vw,52px); } .route__stop { text-align: center; } .route__city { font-family: var(--serif); font-size: clamp(19px,4.6vw,24px); color: var(--ink); } .route__nights { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); } .route__line { flex: 0 0 auto; width: clamp(30px,7vw,90px); height: 1px; background: rgba(23,63,74,0.28); position: relative; margin: 0 clamp(10px,2vw,16px); } .route__line::before, .route__line::after { content: ""; position: absolute; top: -3px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } .route__line::before { left: -4px; } .route__line::after { right: -4px; } /* ---- Section headings ---- */ .section__head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 6px; } .section__no { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent); } .section__title { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(19px,4.6vw,23px); color: var(--ink); } .section--gap { margin-top: clamp(36px,6vw,60px); } /* ---- Day ---- */ .day { display: grid; grid-template-columns: 168px 1fr; gap: clamp(20px,4vw,48px); padding: clamp(20px,3.5vw,32px) 0; border-top: 1px solid var(--hairline); align-items: center; /* the big day number sits centre-left against the day's text, not top-left */ } .day__num { font-family: var(--serif); font-weight: 500; font-size: clamp(46px,9vw,60px); line-height: 0.82; color: rgba(23,63,74,0.16); } .day__label { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); margin-top: clamp(0px,2vw,12px); } .day__place { font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-top: 4px; } .day__title { margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(21px,5vw,25px); letter-spacing: -0.01em; color: var(--ink); } .day__essence { font-family: var(--serif); font-style: italic; font-size: clamp(15px,3.6vw,17px); color: var(--accent); margin: 2px 0 10px; } .day__text { margin: 0; font-size: clamp(14px,3.6vw,15.5px); line-height: 1.8; color: var(--body); text-wrap: pretty; } /* ---- Packages ---- */ .pkg { display: grid; grid-template-columns: 1fr 1fr auto; gap: 14px 28px; align-items: center; padding: 18px 0; border-top: 1px solid var(--hairline); } .pkg__name { font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } .pkg__tag { font-family: var(--serif); font-style: italic; font-size: clamp(18px,4.4vw,21px); color: var(--ink); } .pkg__hotels { font-size: 13px; line-height: 1.6; color: var(--body); } .pkg__hotels .lbl { font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .pkg__hotels .star { color: var(--accent); } .pkg__price { text-align: right; white-space: nowrap; } .pkg__price .amt { font-family: var(--serif); font-weight: 500; font-size: clamp(26px,6vw,32px); color: var(--accent); } .pkg__price .per { font-size: 8.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .airfare { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 22px; padding: 14px 0 0; border-top: 1px solid var(--hairline); margin-top: 2px; } .airfare__h { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--ink); } .airfare span:not(.airfare__h) { font-size: 12px; color: var(--body); } /* ---- Included / Not included ---- */ .lists { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,4vw,40px); margin-top: clamp(36px,6vw,56px); } .list__head { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); padding-bottom: 10px; border-bottom: 1px solid var(--hairline-strong); margin-bottom: 6px; } .list ul { list-style: none; margin: 0; padding: 0; } .list li { position: relative; padding: 6px 0 6px 22px; font-size: 12.5px; line-height: 1.5; } .list--in li { color: var(--body); } .list--in li::before { content: "✓"; position: absolute; left: 0; top: 6px; color: var(--included); font-weight: 700; } .list--ex li { color: var(--muted); } .list--ex li::before { content: "×"; position: absolute; left: 0; top: 6px; color: #B3A890; } /* ---- Fine print ---- */ .fineprint__head { font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; } .terms { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px,4vw,40px); } .term__title { font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); margin-bottom: 6px; } .term__body { margin: 0; white-space: pre-line; font-size: 11px; line-height: 1.62; color: var(--soft); } /* ---- CTA ---- */ .cta { margin-top: clamp(36px,6vw,56px); text-align: center; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); padding: 30px 16px; } .cta__head { font-family: var(--serif); font-style: italic; font-size: clamp(24px,5.5vw,28px); color: var(--ink); } .cta__note { font-family: var(--script); font-weight: 600; font-size: 21px; color: var(--accent); margin-top: 4px; } .cta__actions { display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; margin-top: 18px; } .btn { text-decoration: none; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; padding: 12px 20px; border: 1px solid var(--ink); color: var(--ink); } .btn--solid { background: var(--ink); color: #fff; border-color: var(--ink); } /* ---- Footer ---- */ .itin__footer { margin-top: 24px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 10px; color: var(--muted); letter-spacing: 0.04em; } .itin__footer .brand { color: var(--ink); } /* ---- Responsive ---- */ @media (max-width: 720px) { .day { grid-template-columns: 1fr; gap: 6px; } .day__num-wrap { display: flex; align-items: center; gap: 16px; } /* "01" and "Day one / Ubud" on one centred line */ .day__num { font-size: clamp(34px,12vw,46px); } .day__label { margin-top: 0; } .pkg { grid-template-columns: 1fr; gap: 6px; } .pkg__price { text-align: left; } .lists, .terms { grid-template-columns: 1fr; gap: 26px; } .route { gap: 6px 0; } .route__line { width: clamp(20px,7vw,44px); margin: 0 9px; } .section--gap { margin-top: clamp(30px,8vw,42px); } } @media (max-width: 420px) { .route__city { font-size: 18px; } .route__line { width: 18px; margin: 0 7px; } } /* ---- Print (A4) ---- */ @media print { @page { size: A4; margin: 14mm; } .itin { background: #fff; padding: 0; } .itin__card { box-shadow: none; max-width: none; } .cta__actions { display: none; } .itin__hero img { height: 80mm; } /* shorter cover on A4 → less white space */ /* atomic blocks never split; day text flows to fill pages (no big gaps) */ .pkg, .term, .list li, .single-price, .airfare, .route { break-inside: avoid; page-break-inside: avoid; } .day { break-inside: auto; page-break-inside: auto; } .section, .lists, .terms { break-inside: auto; } .section__head, .fineprint__head, .day__title { break-after: avoid; page-break-after: avoid; } .day__text, .term__body { orphans: 3; widows: 3; } * { -webkit-print-color-adjust: exact; print-color-adjust: exact; } } /* ===================== web polish (reset for print) ===================== */ .itin .rev{ opacity:0; transform:translateY(20px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); } .itin .rev.in{ opacity:1; transform:none; } .itin__hero img{ transform:scale(1.04); transition:transform 1.3s cubic-bezier(.2,.7,.2,1); } .itin__hero.in img{ transform:scale(1); } .itin .pkg{ transition:background .25s ease, padding-left .25s ease; } .itin .pkg:hover{ background:rgba(23,63,74,0.025); padding-left:8px; } .itin .btn{ transition:transform .18s ease, box-shadow .18s ease; } .itin .btn:hover{ transform:translateY(-2px); box-shadow:0 10px 22px -14px rgba(23,63,74,.5); } @media (prefers-reduced-motion: reduce){ .itin .rev, .itin__hero img{ opacity:1!important; transform:none!important; transition:none!important; } } @media print{ .itin .rev{ opacity:1!important; transform:none!important; } .itin__hero img{ transform:none!important; } } /* reading progress (web only) */ .itin-prog{ position:fixed; top:0; left:0; height:2px; width:0; z-index:60; background:linear-gradient(90deg,var(--accent),var(--amber)); } @media print{ .itin-prog{ display:none!important; } } /* document toolbar (proposal.html only — sits outside the card) */ .itin-bar{ max-width:940px; margin:1.4rem auto 0; display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; padding:0 clamp(10px,3vw,30px); } .itin-bar img{ height:34px; } .itin-bar .b{ font-family:'DM Sans',sans-serif; font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:.7rem 1.1rem; border-radius:9px; text-decoration:none; border:1px solid rgba(23,63,74,.25); color:#173F4A; cursor:pointer; transition:transform .18s, box-shadow .18s; } .itin-bar .b--solid{ background:#173F4A; color:#fff; border-color:#173F4A; } .itin-bar .b:hover{ transform:translateY(-2px); box-shadow:0 10px 22px -14px rgba(23,63,74,.5); } @media print{ .itin-bar{ display:none!important; } } /* single-price block (bank itineraries with no multi-option packages) */ .itin .single-price{ display:flex; align-items:baseline; justify-content:space-between; gap:1rem; padding:18px 0; border-top:1px solid var(--hairline); } .itin .single-price .amt{ font-family:var(--serif); font-weight:500; font-size:clamp(26px,6vw,34px); color:var(--accent); } .itin .single-price .lbl{ font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); } /* gallery (public page) */ .itin .itin-gallery{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } @media(max-width:720px){ .itin .itin-gallery{ grid-template-columns:1fr 1fr; } } .itin .itin-gallery img{ width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:8px; display:block; } @media print{ .itin .itin-gallery{ display:none; } } /* ===== Day jump-rail — vertical dots pinned to the viewport edge ===== */ /* Built in JS (enhanceItin) from the rendered .day blocks; click jumps, scroll highlights. */ .daynav{ position:fixed; right:clamp(10px,1.6vw,26px); top:50%; transform:translateY(-50%); z-index:45; display:flex; flex-direction:column; align-items:center; gap:11px; } .daynav__label{ writing-mode:vertical-rl; text-orientation:mixed; margin-bottom:3px; font-family:var(--sans); font-size:9px; letter-spacing:0.34em; text-transform:uppercase; color:var(--muted); } .daynav__dots{ display:flex; flex-direction:column; gap:8px; } .daynav__dot{ position:relative; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; text-decoration:none; border:1px solid rgba(23,63,74,0.22); color:var(--muted); background:rgba(255,255,255,0.72); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); transition:transform .2s ease, background .2s ease, border-color .2s ease, color .2s ease; } .daynav__n{ font-family:var(--sans); font-size:10px; letter-spacing:0.02em; } .daynav__dot:hover{ border-color:var(--ink); color:var(--ink); } .daynav__dot.is-active{ background:var(--accent); border-color:var(--accent); color:#fff; transform:scale(1.08); } .daynav__tip{ position:absolute; right:calc(100% + 10px); top:50%; transform:translateY(-50%); white-space:nowrap; background:var(--ink); color:#fff; font-family:var(--sans); font-size:11px; letter-spacing:0.01em; padding:5px 10px; border-radius:6px; opacity:0; pointer-events:none; transition:opacity .18s ease; max-width:46vw; overflow:hidden; text-overflow:ellipsis; } .daynav__dot:hover .daynav__tip{ opacity:1; } /* needs side room beside the 940px card — hide where it would crowd the content, and in print */ @media (max-width:1199px){ .daynav{ display:none; } } @media print{ .daynav{ display:none !important; } } /* ===== public website mode — blend into the site, not a document card ===== */ .itin--web{ background:transparent; min-height:0; padding:0; } .itin--web .itin__card{ background:transparent; box-shadow:none; max-width:none; margin:0; overflow:visible; } .itin--web .itin__padtop{ padding-left:0; padding-right:0; } .itin--web .itin__pad{ padding:0; } .itin--web .itin__titleblock{ padding-bottom:clamp(14px,4vw,22px); } .itin--web .itin__hero{ border-radius:12px; overflow:hidden; } @media print{ .itin--web{ } } /* ===== departures (fixed-departure / The Long Table trips) ===== */ .departs{ display:grid; gap:2px; } .depart{ display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; padding:15px 0; border-top:1px solid var(--hairline); } .depart__when{ font-family:var(--serif); font-weight:500; font-size:clamp(18px,4vw,22px); color:var(--ink); } .depart__seats{ font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-left:.8rem; } .depart__wa{ font-family:var(--sans); font-size:10px; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; padding:.65rem 1.05rem; border:1px solid var(--ink); border-radius:8px; color:var(--ink); white-space:nowrap; transition:background .18s, color .18s; } .depart__wa:hover{ background:var(--ink); color:#fff; } @media print{ .depart__wa{ display:none; } .depart{ break-inside:avoid; page-break-inside:avoid; } }