/* ========================================================================== Travel O Hub — main stylesheet Classic look: cream + deep brown + amber, Oswald uppercase headings, Kaushan Script kickers, Inter body. Sizes are the final (post readability pass) values of the approved design. ========================================================================== */ /* ---------- fonts (self-hosted) ---------- */ @font-face { font-family: "Oswald"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(../fonts/oswald-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Oswald"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(../fonts/oswald-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(../fonts/inter-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url(../fonts/inter-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Kaushan Script"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/kaushan-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Kaushan Script"; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/kaushan-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Manrope"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(../fonts/manrope-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; } /* ---------- tokens ---------- */ :root { --accent: #7c4f05; --deep: color-mix(in oklab, var(--accent) 74%, #140e05); --tint: color-mix(in oklab, var(--accent) 13%, #fffdf6); --script: color-mix(in oklab, var(--accent) 26%, #f6efdd); --amber: color-mix(in oklab, var(--accent) 40%, #ffd66a); --amber2: color-mix(in oklab, var(--accent) 26%, #ffdd85); --amber3: color-mix(in oklab, var(--accent) 14%, #ffe9b4); --veil: color-mix(in srgb, var(--accent) 86%, transparent); --ink: #201a10; --ink-2: #282014; --heading: #231c12; --muted: #3f321e; --faint: #564730; --cream: #fbf7ef; --page: #fdfaf2; --line: #eee5d3; --line-2: #e9dfca; --field: #e6dcc6; --night: #15100a; --display: "Oswald", "Arial Narrow", sans-serif; --script-font: "Kaushan Script", cursive; --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --gutter: 48px; --header-h: 128px; /* aliases used by the ported motion styles */ --toh-accent: var(--accent); --toh-deep: var(--deep); --toh-tint: var(--tint); --toh-amber: var(--amber); --toh-amber2: var(--amber2); --toh-amber3: var(--amber3); --toh-veil: var(--veil); } /* ---------- base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.68; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--deep); } :where(h1, h2, h3, h4) { margin: 0; font-family: var(--display); font-weight: 500; text-transform: uppercase; } :where(p, figure, blockquote, ul, ol) { margin: 0; } :where(button) { font: inherit; } ::selection { background: var(--accent); color: #fff; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .on-dark :focus-visible, .site-footer :focus-visible, .home-hero :focus-visible { outline-color: var(--amber); } .wrap { max-width: 1180px; margin: 0 auto; } .wrap-wide { max-width: 1240px; margin: 0 auto; position: relative; } .sr, .toh-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .skip-link { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 10px 18px; background: var(--deep); color: #fff; } .skip-link:focus { top: 12px; color: #fff; } svg.ic { display: block; width: 100%; height: 100%; } .i { display: inline-flex; flex: 0 0 auto; } /* ---------- buttons ---------- */ .btn { display: inline-block; font-family: var(--display); font-size: 15px; letter-spacing: .2em; text-transform: uppercase; line-height: 1.4; padding: 15px 38px; white-space: nowrap; cursor: pointer; border: 0; border-radius: 0; text-align: center; transition: background-color .25s ease, color .25s ease, transform .15s ease, border-color .25s ease; } .btn:active { transform: scale(.975); } .btn-deep { background: var(--deep); color: #fff; } .btn-deep:hover { background: var(--accent); color: #fff; } .btn-amber { background: var(--amber); color: var(--heading); } .btn-amber:hover { background: #fff; color: var(--heading); } .btn-white { background: #fff; color: var(--deep); } .btn-white:hover { background: var(--amber3); color: var(--deep); } .btn-ghost { color: #fff; border: 2px solid rgba(255,255,255,.8); padding: 13px 34px; } .btn-ghost:hover { background: #fff; color: var(--deep); } .btn-outline { color: var(--deep); border: 2px solid var(--deep); padding: 13px 32px; background: transparent; } .btn-outline:hover { background: var(--deep); color: #fff; } .btn-line { color: var(--heading); border: 2px solid var(--heading); padding: 15px 40px; } .btn-line:hover { background: var(--heading); color: var(--amber); } .btn-block { display: block; width: 100%; } /* ---------- section headings ---------- */ .head { text-align: center; margin-bottom: 52px; } .head--left { text-align: left; } .kicker { margin: 0 0 -26px; font-family: var(--script-font); font-size: 46px; line-height: 1.3; color: var(--script); text-transform: none; } .title { font-size: 44px; font-weight: 500; letter-spacing: .2em; line-height: 1.15; color: var(--heading); } .lede { margin: 20px auto 0; max-width: 600px; font-size: 17.5px; line-height: 1.7; color: var(--muted); } .head--left .lede { margin-left: 0; } .on-dark .kicker { color: rgba(255,255,255,.72); } .on-dark .title { color: #fff; } .on-dark .lede { color: rgba(255,255,255,.9); } .head-split { display: flex; align-items: flex-end; justify-content: space-between; gap: 36px; flex-wrap: wrap; margin-bottom: 46px; } .head-split .head { margin: 0; } .head-split .kicker { font-size: 44px; margin-bottom: -24px; } .head-split .title { font-size: 42px; letter-spacing: .18em; } .head-aside { max-width: 420px; font-size: 17.5px; line-height: 1.75; color: var(--muted); text-wrap: pretty; } .section-note { margin: 30px 0 0; font-size: 15px; color: var(--faint); text-align: center; } /* The home page design inherits a 1.68 line height into its headings and card titles (only buttons reset it), which is what gives the script kicker room above each title. */ .home-main .kicker, .home-main .title, .toh-why-kicker, .home-main h3:not(.j-name):not(.tile-name), .jd-plan .kicker, .jd-plan .title { line-height: 1.68; } .home-main .head { margin-bottom: 52px; } /* Elsewhere titles keep the tighter 1.15 line height, so the same -24px pull cut the script kicker into the title letters. Pull less (same look as the home page), and paint the title over the kicker. Phones have their own values. */ .kicker + .title { position: relative; } @media (min-width: 761px) { .kicker:not(.home-main .kicker, .jd-plan .kicker, .page-hero .kicker) { margin-bottom: -8px; } } /* ========================================================================== Header ========================================================================== */ .site-header { position: relative; z-index: 60; } .topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 9px var(--gutter); background: #2b1f0d; font-size: 14.5px; letter-spacing: .04em; } .topbar-l { display: flex; gap: 26px; flex-wrap: wrap; } .topbar a, .topbar span { color: rgba(255,255,255,.82); display: inline-flex; align-items: center; gap: 7px; } .topbar a:hover { color: #f7d275; } .topbar .i { width: 13px; height: 13px; } .topbar .wa { font-family: var(--display); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: #f7d275; } .topbar .wa:hover { color: #fff; } .nav { display: flex; align-items: center; gap: 34px; padding: 10px var(--gutter); background: #fff; border-bottom: 3px solid var(--accent); position: relative; } .brand { display: flex; align-items: center; gap: 13px; color: inherit; flex: 0 0 auto; } .brand:hover { color: inherit; } .brand-mark { width: 84px; height: 84px; } .brand span { font-family: var(--display); font-weight: 500; font-size: 21px; letter-spacing: .13em; text-transform: uppercase; color: var(--heading); white-space: nowrap; } .links { display: flex; align-items: center; gap: 22px; margin-left: auto; font-family: var(--display); font-size: 15px; letter-spacing: .14em; text-transform: uppercase; } .toh-nl { position: relative; display: block; color: var(--heading); padding-bottom: 3px; white-space: nowrap; } .toh-nl::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .24s cubic-bezier(.16,1,.3,1); } .toh-nl:hover, .dd:hover > .toh-nl { color: var(--accent); } .toh-nl:hover::after, .dd:hover > .toh-nl::after, .toh-nl:focus-visible::after, .toh-nl[aria-current]::after, .dd.is-current > .toh-nl::after { transform: scaleX(1); } .dd-caret { font-size: .8em; } .dd { position: relative; padding-bottom: 32px; margin-bottom: -32px; } .dd--mega { position: static; } .dd-menu { position: absolute; top: 100%; right: -22px; z-index: 60; min-width: 250px; padding: 12px 0; background: #fff; border-top: 3px solid var(--accent); box-shadow: 0 40px 80px -40px rgba(28,20,8,.6); opacity: 0; visibility: hidden; translate: 0 8px; transition: opacity .2s ease, translate .2s ease, visibility 0s linear .2s; } .dd:hover > .dd-menu, .dd:focus-within > .dd-menu, .dd.is-open > .dd-menu { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; } .dd-menu a { display: block; padding: 9px 22px; white-space: nowrap; font-size: 15px; letter-spacing: .12em; color: #3d3325; } .dd-menu a:hover, .dd-menu a[aria-current] { color: var(--accent); background: var(--cream); } .dd-mega { left: var(--gutter); right: var(--gutter); display: grid; grid-template-columns: 1fr 1fr; gap: 34px; padding: 30px 34px 34px; text-align: left; } .dd-h { font-family: var(--display); font-size: 13px; letter-spacing: .24em; text-transform: uppercase; color: var(--accent); padding-bottom: 12px; border-bottom: 1px solid var(--line); margin-bottom: 10px; } .dd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; } .dd-mega .dd-grid a { padding: 7px 0; font-family: var(--sans); font-size: 16px; letter-spacing: 0; text-transform: none; color: var(--heading); white-space: normal; } .dd-mega .dd-grid a:hover { background: none; color: var(--accent); } .dd-mega .dd-grid a.is-soon { color: var(--muted); } .nav-cta { flex: 0 0 auto; padding: 14px 28px; } .nav-toggle { display: none; flex: 0 0 auto; width: 46px; height: 46px; margin-left: 4px; padding: 0; border: 1px solid var(--line); background: #fff; cursor: pointer; } .nav-toggle i, .nav-toggle i::before, .nav-toggle i::after { display: block; width: 20px; height: 2px; margin: 0 auto; background: var(--heading); transition: transform .25s ease, background-color .2s ease; } .nav-toggle i { position: relative; } .nav-toggle i::before, .nav-toggle i::after { content: ""; position: absolute; left: 0; } .nav-toggle i::before { top: -6px; } .nav-toggle i::after { top: 6px; } .nav-toggle[aria-expanded="true"] i { background: transparent; } .nav-toggle[aria-expanded="true"] i::before { transform: translateY(6px) rotate(45deg); } .nav-toggle[aria-expanded="true"] i::after { transform: translateY(-6px) rotate(-45deg); } /* mobile drawer */ .m-drawer { position: absolute; left: 0; right: 0; top: 100%; z-index: 70; max-height: calc(100vh - 80px); overflow-y: auto; background: #fff; border-bottom: 3px solid var(--accent); box-shadow: 0 30px 60px -30px rgba(28,20,8,.6); padding: 8px 20px 24px; } .m-drawer[hidden] { display: none; } .m-nav, .m-nav ul { list-style: none; margin: 0; padding: 0; } .m-nav > li { border-bottom: 1px solid var(--line); } .m-nav > li > a, .m-nav summary { display: flex; justify-content: space-between; align-items: center; padding: 15px 2px; font-family: var(--display); font-size: 17px; letter-spacing: .14em; text-transform: uppercase; color: var(--heading); cursor: pointer; list-style: none; } .m-nav summary::-webkit-details-marker { display: none; } .m-nav summary::after { content: "+"; font-size: 22px; color: var(--accent); } .m-nav details[open] > summary::after { content: "−"; } .m-nav details ul { padding: 0 0 14px; } .m-nav details li > a { display: block; padding: 8px 2px; color: var(--ink); font-size: 16px; } .m-group > span { display: block; margin: 8px 0 4px; font-family: var(--display); font-size: 13px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); } .m-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; } .m-grid a.is-soon { color: var(--muted) !important; } .m-contact { display: grid; gap: 10px; padding-top: 18px; } .m-contact a:not(.btn) { color: var(--ink); } /* ========================================================================== Home: hero ========================================================================== */ .home-hero { position: relative; display: flex; flex-direction: column; min-height: max(460px, calc(100svh - var(--header-h))); overflow: hidden; background: var(--night); color: #fff; } .hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; } .hero-slide.is-on { opacity: 1; } .hero-slide img { width: 100%; height: 100%; object-fit: cover; } @media (prefers-reduced-motion: no-preference) { .hero-slide.is-on img { animation: tohFloat 14s ease-in-out infinite alternate; } } @keyframes tohFloat { from { transform: scale(1.06) translateY(0); } to { transform: scale(1.13) translateY(-1.2%); } } .hero-veil { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(20,14,7,.86) 0%, rgba(20,14,7,.55) 44%, rgba(20,14,7,.22) 72%, rgba(20,14,7,.6) 100%); } .hero-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); } .hero-body { position: relative; z-index: 5; flex: 1 1 auto; display: flex; align-items: center; padding: 16px 0 12px; } .hero-kicker { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; font-family: var(--display); font-size: 14px; letter-spacing: .28em; text-transform: uppercase; color: var(--amber); } .hero-kicker::before { content: ""; flex: 0 0 44px; height: 1px; background: var(--amber); } .hero-copy { min-height: 340px; } .hero-h1 { font-weight: 600; font-size: clamp(38px, 4.3vw, 62px); line-height: .96; letter-spacing: .03em; text-shadow: 0 14px 44px rgba(20,14,6,.45); max-width: 18ch; min-height: 1.92em; } .hero-route { margin: 11px 0 0; font-family: var(--display); font-weight: 400; font-size: clamp(14px, 1.3vw, 17px); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.92); max-width: 40ch; line-height: 1.5; min-height: 3em; } .hero-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: clamp(24px, 9vh - 20px, 72px); } .hero-chips span { padding: 9px 16px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35); font-family: var(--display); font-size: 14px; letter-spacing: .18em; text-transform: uppercase; white-space: nowrap; } .hero-ctas { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 16px; } .home-hero .hero-ctas .btn { font-size: 16px; padding: 12px 30px; } .home-hero .hero-ctas .btn-ghost { padding: 10px 28px; } .toh-hero-note { margin: 20px 0 0; max-width: 90ch; font-size: 14.5px; line-height: 1.55; color: rgba(255,255,255,.92); text-shadow: 0 2px 18px rgba(20,14,6,.55); } /* Short screens (laptops at 125-150% display scaling): tighten the stack so the slide controls stay on screen. */ @media (min-width: 761px) and (max-height: 820px) { .hero-body { padding: 8px 0 6px; } .hero-kicker { margin-bottom: 8px; } .hero-ctas { margin-top: 12px; } .home-hero .hero-controls { padding-bottom: 8px; } .hero-copy { min-height: 0; } .hero-chips { margin-top: 24px; } .toh-hero-note { margin-top: 14px; } .hero-search .hero-search-in { padding-top: 10px; padding-bottom: 10px; } } .hero-controls { position: relative; z-index: 6; flex: 0 0 auto; padding-bottom: 12px; } .hero-controls-in { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-right: 200px; } .hero-nav { display: flex; align-items: center; gap: 14px; } .hero-arrows { display: flex; gap: 8px; } .hero-arrows button { width: 42px; height: 42px; display: grid; place-items: center; padding: 11px; background: rgba(20,14,7,.45); border: 1px solid rgba(255,255,255,.4); color: #fff; cursor: pointer; transition: background-color .24s ease, color .24s ease; } .hero-arrows button:hover { background: #fff; color: var(--deep); } .hero-arrows svg.ic { stroke-width: 2; } .hero-dots { display: flex; gap: 10px; } .hero-dot { width: 16px; height: 4px; padding: 0; border: 0; cursor: pointer; background: rgba(255,255,255,.45); transition: width .32s ease, background-color .32s ease; } .hero-dot.is-on { width: 46px; background: var(--amber); } .hero-chipnav { display: flex; gap: 10px; flex-wrap: wrap; } .hero-chip { font-family: var(--display); font-size: 13px; letter-spacing: .18em; text-transform: uppercase; padding: 9px 16px; cursor: pointer; white-space: nowrap; border: 1px solid rgba(255,255,255,.4); background: rgba(20,14,7,.4); color: #fff; } .hero-chip.is-on { border-color: transparent; background: #fff; color: var(--heading); } .hero-search { position: relative; z-index: 6; flex: 0 0 auto; background: rgba(255,255,255,.96); border-top: 3px solid var(--accent); color: var(--ink); } .hero-search-in { padding-top: 16px; padding-bottom: 16px; padding-right: 200px; display: grid; grid-template-columns: 1.1fr 1fr 1fr auto; gap: 18px; align-items: end; } .hero-search label span { display: block; font-family: var(--display); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; } .hero-search input { width: 100%; padding: 11px 12px; border: 1px solid var(--field); border-radius: 0; background: #fff; font: 16px var(--sans); color: var(--heading); } .hero-search input:focus { outline: none; border-color: var(--accent); } .hero-search .btn { font-size: 15px; padding: 13px 30px; } /* ========================================================================== Home: marquee ========================================================================== */ .toh-marquee { position: relative; overflow: hidden; background: var(--night); padding: 17px 0; border-top: 1px solid rgba(255,255,255,.06); } .toh-marquee::before, .toh-marquee::after { content: ""; position: absolute; top: 0; bottom: 0; width: 9%; z-index: 1; pointer-events: none; } .toh-marquee::before { left: 0; background: linear-gradient(90deg, var(--night), rgba(21,16,10,0)); } .toh-marquee::after { right: 0; background: linear-gradient(270deg, var(--night), rgba(21,16,10,0)); } .toh-mq-track { display: flex; align-items: center; width: max-content; } .toh-mq-track > span { padding: 0 26px; white-space: nowrap; font-family: var(--display); font-size: 15px; letter-spacing: .32em; text-transform: uppercase; color: rgba(255,255,255,.9); } .toh-mq-track > span:nth-of-type(3n+2) { color: rgba(255,255,255,.55); } .toh-mq-track > span:nth-of-type(3n) { color: var(--amber); } .toh-mq-track > i { flex: none; width: 22px; height: 16px; background: var(--plane) center/contain no-repeat; rotate: 18deg; opacity: .9; } @keyframes tohMarq { to { transform: translateX(-50%); } } /* ========================================================================== Home: journeys ========================================================================== */ .journeys { padding: 118px var(--gutter) 130px; background: #fff; } .journeys .head { position: relative; z-index: 1; margin-bottom: 44px; } .toh-loop { position: absolute; left: 0; top: -92px; width: 100%; height: auto; overflow: visible; pointer-events: none; z-index: 0; } .toh-loop-trail { stroke: rgba(150,101,10,.62); } .toh-loop-reveal { stroke-dasharray: 1 0; } html.toh-live .toh-loop-reveal { stroke-dasharray: 2000; stroke-dashoffset: 2000; } .toh-loop-plane { transition: opacity .45s ease; } .j-filters { position: relative; z-index: 1; } .j-tabs { display: flex; justify-content: center; margin-bottom: 46px; } .j-tabs button { font-family: var(--display); font-size: 15px; letter-spacing: .2em; text-transform: uppercase; padding: 14px 34px; cursor: pointer; border: 1px solid var(--field); background: #fff; color: var(--muted); margin-left: -1px; transition: background-color .24s ease, color .24s ease; } .j-tabs button[aria-selected="true"] { background: var(--deep); border-color: var(--deep); color: #fff; } .j-themes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 42px; } .j-themes button { font-family: var(--display); font-size: 14px; letter-spacing: .18em; text-transform: uppercase; padding: 10px 20px; cursor: pointer; white-space: nowrap; border: 1px solid var(--field); background: #fff; color: var(--faint); transition: border-color .24s ease, color .24s ease, background-color .24s ease; } .j-themes button:hover { border-color: var(--accent); color: var(--deep); } .j-themes button[aria-pressed="true"] { border-color: var(--accent); background: var(--tint); color: var(--deep); } .j-empty { margin: 0 0 40px; text-align: center; font-size: 17px; line-height: 1.7; color: var(--faint); } .j-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 26px; perspective: 1300px; } .j-card { position: relative; display: block; background: #fff; color: inherit; border-bottom: 3px solid transparent; box-shadow: 0 16px 40px -32px rgba(40,29,12,.5); transition: box-shadow .28s ease, transform .28s ease, border-color .28s ease; } .j-card[hidden] { display: none; } .j-card:hover { color: inherit; border-bottom-color: var(--accent); box-shadow: 0 30px 60px -34px rgba(40,29,12,.55); transform: translateY(-4px); } .j-img { position: relative; display: block; height: 250px; overflow: hidden; background: var(--night); } .j-photo { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.16,1,.3,1); } .j-card:hover .j-photo { transform: scale(1.05); } .j-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,19,10,0) 40%, rgba(26,19,10,.78)); } .j-cap { position: absolute; left: 22px; bottom: 18px; right: 22px; } .j-name { font-size: 29px; font-weight: 500; letter-spacing: .08em; color: #fff; line-height: 1.25; } .j-route { display: block; margin-top: 4px; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.82); } .j-dur { position: absolute; top: 16px; right: 16px; padding: 7px 12px; background: rgba(255,255,255,.92); font-family: var(--display); font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--deep); } .j-foot { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px 20px; } .j-from { display: block; font-size: 13px; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); } .j-price { display: block; font-family: var(--display); font-size: 24px; color: var(--heading); white-space: nowrap; line-height: 1.35; } .j-view { font-family: var(--display); font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); white-space: nowrap; } .j-card::after, .tile::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: 0; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 40%), rgba(255,236,190,.42), rgba(255,236,190,0) 46%); mix-blend-mode: soft-light; transition: opacity .35s ease; } .j-card.is-tilting::after, .tile.is-tilting::after { opacity: 1; } /* ========================================================================== Home: themes ========================================================================== */ .themes { position: relative; overflow: hidden; padding: 104px var(--gutter) 112px; background: var(--cream); } .themes .head { margin-bottom: 50px; } .tile-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; perspective: 1300px; } .tile { position: relative; display: block; height: 250px; overflow: hidden; background: var(--night); color: #fff; } .tile:hover { color: #fff; } .tile-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); transition: transform .7s cubic-bezier(.16,1,.3,1), filter .4s ease; } .tile:hover .tile-photo { filter: none; transform: scale(1.05); } .tile-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,19,10,.12) 30%, rgba(26,19,10,.86)); } .tile-cap { position: absolute; left: 26px; right: 26px; bottom: 24px; } .tile-name { font-size: 28px; font-weight: 500; letter-spacing: .12em; color: #fff; line-height: 1.3; } .tile-text { display: block; margin-top: 8px; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.88); text-wrap: pretty; } /* ========================================================================== Home: weekend escapes (boarding passes) ========================================================================== */ .weekend { padding: 104px var(--gutter) 112px; background: #fff; } .wk-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 22px; } .wk-card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--line); background: #fff; transition: border-color .24s ease, transform .32s cubic-bezier(.16,1,.3,1), box-shadow .32s ease; } .wk-card:hover { border-color: var(--accent); } .wk-img { height: 190px; overflow: hidden; transform-origin: 0 100%; transition: rotate .6s cubic-bezier(.34,1.56,.64,1), translate .6s cubic-bezier(.34,1.56,.64,1); } .wk-img img { width: 100%; height: 100%; object-fit: cover; } .wk-card:hover .wk-img { rotate: -2.4deg; translate: 0 -4px; } .wk-body { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; padding: 20px 22px 24px; border-top: 2px dashed #e3d4b1; } .wk-body::before, .wk-body::after { content: ""; position: absolute; top: -12px; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 1px solid var(--line); } .wk-body::before { left: -12px; clip-path: inset(0 0 0 50%); } .wk-body::after { right: -12px; clip-path: inset(0 50% 0 0); } .wk-card::after { content: ""; position: absolute; right: 12px; top: 118px; width: 128px; height: 56px; z-index: 2; background: url(../img/stamp-weekend.svg) center/contain no-repeat; pointer-events: none; opacity: 0; scale: 1.7; rotate: -9deg; transition: opacity .18s ease, scale .38s cubic-bezier(.2,.9,.3,1.25); filter: drop-shadow(0 2px 6px rgba(0,0,0,.45)); } .wk-card:hover::after { opacity: 1; scale: 1; } .wk-body h3 { font-size: 22px; font-weight: 500; letter-spacing: .07em; line-height: 1.3; color: var(--heading); text-wrap: pretty; } .wk-body p { margin: 8px 0 18px; font-size: 15px; letter-spacing: .02em; color: var(--faint); } .wk-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: auto; border-top: 1px solid #f0e8d6; padding-top: 16px; } .wk-price { font-family: var(--display); font-size: 22px; color: var(--heading); white-space: nowrap; } .wk-foot a { font-family: var(--display); font-size: 14px; letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; } /* ========================================================================== Home: why book with us (tilted band + comparison) ========================================================================== */ .toh-why-wrap { --tilt: clamp(34px, 5.2vw, 84px); --wedge: 18px; position: relative; z-index: 2; margin: calc(var(--tilt) * -1) 0; } .toh-why-edge { position: absolute; inset: 0; background: var(--amber); pointer-events: none; clip-path: polygon(0 calc(var(--tilt) - var(--wedge)), 100% 0, 100% calc(100% - var(--tilt) + var(--wedge)), 0 100%); } .toh-why { position: relative; overflow: hidden; background: var(--deep); color: #fff; clip-path: polygon(0 var(--tilt), 100% 0, 100% calc(100% - var(--tilt)), 0 100%); padding: calc(var(--tilt) + 92px) var(--gutter) calc(var(--tilt) + 100px); } .toh-why::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(135deg, transparent 0 49.2%, rgba(255,255,255,.045) 49.2% 50.8%, transparent 50.8% 100%); background-size: 64px 64px; } .toh-why-inner { position: relative; max-width: 1040px; margin: 0 auto; } .toh-why-head { text-align: center; margin-bottom: 54px; } .toh-why-kicker { margin: 0 0 -22px; font-family: var(--script-font); font-size: 44px; line-height: 1.3; color: rgba(255,255,255,.7); } .toh-why-title { font-size: 40px; line-height: 1.15; letter-spacing: .14em; color: #fff; } .toh-why-lede { margin: 20px auto 0; max-width: 560px; font-size: 16px; line-height: 1.7; color: rgba(255,255,255,.86); } .toh-why-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 15px; line-height: 1.6; } .toh-why-c0 { width: 23%; } .toh-why-c1 { width: 36%; } .toh-why-c2 { width: 41%; } .toh-why-table thead th { padding: 0 24px 16px; text-align: left; vertical-align: bottom; font-family: var(--display); font-weight: 500; font-size: 14px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.72); } .toh-why-table thead th.toh-why-c2 { position: relative; padding: 20px 28px 18px 40px; background: var(--amber); color: var(--heading); } .toh-why-vs { position: absolute; left: 0; top: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; display: grid; place-items: center; border-radius: 50%; background: var(--night); border: 2px solid var(--amber); color: var(--amber); font-family: var(--script-font); font-size: 21px; letter-spacing: 0; text-transform: none; line-height: 1; } .toh-why-table tbody th { padding: 22px 24px 22px 0; text-align: left; vertical-align: top; border-top: 1px solid rgba(255,255,255,.16); font-family: var(--display); font-weight: 500; font-size: 17px; letter-spacing: .1em; text-transform: uppercase; color: #fff; } .toh-why-table tbody td { padding: 22px 24px; vertical-align: top; border-top: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.72); } .toh-why-table tbody td:last-child { padding: 22px 28px 22px 40px; background: var(--cream); color: #3d3325; border-top-color: var(--line); transition: background-color .25s ease; } .toh-why-table tbody tr:hover td:last-child { background: #fff; } .toh-why-table tbody tr:last-child td:last-child { box-shadow: 0 34px 50px -34px rgba(0,0,0,.65); } .toh-why-cell { display: flex; gap: 12px; align-items: flex-start; } .toh-why-cell svg { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 2px; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .toh-why-tick path { stroke: var(--accent); stroke-dasharray: 24; stroke-dashoffset: 0; } .toh-why-table td:not(:last-child) .toh-why-tick path { stroke: var(--amber); } .toh-why-dash path { stroke: rgba(255,255,255,.38); } .toh-why-table td:last-child .toh-why-dash path { stroke: #bfae8c; } .toh-why-table tr.is-honest td:nth-child(2) { color: #fff; } .toh-why-table tr.is-honest td:last-child { color: #8f7c5c; } .toh-why-tag { display: inline-block; margin-top: 10px; padding: 3px 12px 5px; border: 1px dashed var(--amber); color: var(--amber); font-style: normal; font-family: var(--script-font); font-size: 17px; line-height: 1.3; transform: rotate(-3deg); } .toh-why-cta { margin-top: 52px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 26px; } .toh-why a.toh-why-btn { display: inline-block; padding: 15px 42px; background: var(--amber); color: var(--heading); font-family: var(--display); font-size: 13px; letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; transition: background-color .25s ease; } .toh-why a.toh-why-btn:hover { background: #fff; color: var(--heading); } .toh-why-note { font-size: 14px; color: rgba(255,255,255,.72); } /* ========================================================================== Home: how we build it (amber) + service "how it works" ========================================================================== */ .route, .how { position: relative; overflow: hidden; padding: 96px var(--gutter) 104px; background: linear-gradient(180deg, var(--amber) 0%, var(--amber2) 55%, var(--amber3) 100%); color: var(--heading); } .how { padding: 110px var(--gutter) 104px; } .route-texture { position: absolute; inset: 0; background: center/cover no-repeat; opacity: .16; mix-blend-mode: multiply; } .route-deco { position: absolute; right: 3%; top: 7%; width: 230px; opacity: .6; transform: rotate(-3deg); } .route-in { position: relative; max-width: 1120px; margin: 0 auto; } .route .head { margin-bottom: 56px; } .route .kicker, .how .kicker { color: rgba(32,25,14,.88); } .route .title, .how .title { text-shadow: 0 2px 0 rgba(255,255,255,.3); } .toh-routeline { display: block; width: 100%; height: auto; margin: 0 0 4px; overflow: visible; } .toh-route-track { stroke: rgba(32,25,14,.26); } .toh-route-trail { stroke: var(--heading); } .toh-route-string { stroke: rgba(32,25,14,.42); } .toh-route-dot { fill: var(--heading); stroke: var(--amber2); stroke-width: 3; } .toh-route-plane { fill: var(--heading); } .steps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 46px; } .step { border-top: 1px solid rgba(32,25,14,.3); padding-top: 22px; } .step .i { width: 30px; height: 30px; margin-bottom: 18px; color: var(--heading); } .step .num { font-family: var(--display); font-size: 15px; letter-spacing: .24em; color: rgba(32,25,14,.96); } .step h3 { margin: 14px 0 12px; font-size: 26px; font-weight: 500; letter-spacing: .1em; line-height: 1.25; color: var(--heading); } .step p { font-size: 17.5px; line-height: 1.75; color: rgb(32,25,14); text-wrap: pretty; } .route-cta { text-align: center; margin-top: 58px; } /* ========================================================================== Home: testimonials (passport stamps) ========================================================================== */ .testimonials { position: relative; overflow: hidden; padding: 112px var(--gutter) 120px; background: var(--cream); } .testimonials > .wrap, .themes > .wrap-wide, .faq > .faq-in { position: relative; z-index: 1; } .t-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 26px; } .t-card { position: relative; background: #fff; padding: 36px 34px 32px; border-top: 3px solid var(--accent); box-shadow: 0 26px 54px -44px rgba(40,29,12,.7); } .t-card blockquote p { margin: 0 0 26px; font-size: 18.5px; line-height: 1.8; color: var(--ink-2); text-wrap: pretty; } .t-card figcaption { display: flex; align-items: center; gap: 14px; padding-top: 20px; border-top: 1px solid var(--line); } .t-avatar { width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; } .t-card cite { display: block; font-style: normal; font-family: var(--display); font-size: 17.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--heading); } .t-card small { display: block; margin-top: 4px; font-size: 15px; color: var(--faint); } .t-card::after { content: ""; position: absolute; top: -52px; right: -14px; width: 96px; height: 96px; z-index: 2; background: url(../img/stamp-a.svg) center/contain no-repeat; pointer-events: none; opacity: .8; rotate: -12deg; mix-blend-mode: multiply; } .t-card:nth-child(2n)::after { background-image: url(../img/stamp-b.svg); rotate: 9deg; width: 118px; height: 70px; top: -44px; } html.toh-live .t-card::after { opacity: 0; } html.toh-live .t-card.is-stamped::after { animation: tohStamp .6s cubic-bezier(.2,.9,.3,1.18) forwards; animation-delay: var(--d, 0s); } html.toh-live .t-card:nth-child(2n).is-stamped::after { animation-name: tohStampB; } html.toh-live .t-card.is-stamped { animation: tohThud .26s ease-out; animation-delay: calc(var(--d, 0s) + .36s); } @keyframes tohStamp { 0% { opacity: 0; scale: 2.3; rotate: -34deg; } 70% { opacity: .9; scale: .93; rotate: -10deg; } 100% { opacity: .8; scale: 1; rotate: -12deg; } } @keyframes tohStampB { 0% { opacity: 0; scale: 2.3; rotate: 30deg; } 70% { opacity: .9; scale: .93; rotate: 7deg; } 100% { opacity: .8; scale: 1; rotate: 9deg; } } /* The thud moves `top`, not `translate`: GSAP folds a live `translate` into its own transform when it re-measures, which froze the cards mid rise-in on fast scrolls. */ @keyframes tohThud { 0%, 100% { top: 0; } 45% { top: 3px; } } .avatar { width: 48px; height: 48px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--deep); color: #fff; font-family: var(--display); font-size: 16px; letter-spacing: .08em; object-fit: cover; } /* ========================================================================== Home: numbers, services ========================================================================== */ .stats { background: var(--deep); color: #fff; padding: 64px var(--gutter); } .stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 34px; } .stat { border-top: 1px solid rgba(255,255,255,.28); padding-top: 20px; } .toh-count { font-family: var(--display); font-weight: 500; font-size: 42px; letter-spacing: .02em; color: var(--amber); } .stat-label { margin-top: 8px; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,.86); } .services { padding: 96px var(--gutter) 104px; background: #fff; } .services .head { margin-bottom: 54px; } .svc-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px; background: var(--line); } .svc-card { position: relative; background: #fff; padding: 34px 32px 38px; transition: background-color .24s ease, transform .32s cubic-bezier(.16,1,.3,1), box-shadow .32s ease; } .svc-card:hover { background: #fdf9f0; } .svc-card .i, .card .i { width: 30px; height: 30px; color: var(--accent); margin-bottom: 18px; } .num { font-family: var(--display); font-size: 15px; letter-spacing: .24em; color: var(--accent); } .svc-card h3 { margin: 14px 0 10px; font-size: 23px; font-weight: 500; letter-spacing: .09em; color: var(--heading); } .svc-card p { font-size: 17.5px; line-height: 1.7; color: var(--muted); text-wrap: pretty; } .toh-svc-link { display: inline-block; margin-top: 18px; font-family: var(--display); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); } .toh-svc-link::after { content: ""; position: absolute; inset: 0; } .toh-svc-link span[aria-hidden] { display: inline-block; transition: transform .25s ease; } .svc-card:hover .toh-svc-link span[aria-hidden] { transform: translateX(4px); } /* ========================================================================== Home: gallery ========================================================================== */ .gallery { position: relative; overflow: hidden; padding: 110px var(--gutter) 130px; background: var(--deep); } .gallery-bg { position: absolute; inset: 0; background: center/cover no-repeat; opacity: .22; } .gallery-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,20,6,.86), rgba(30,20,6,.94)); } .gallery-deco { position: absolute; right: -2%; top: 3%; width: 210px; opacity: .85; transform: rotate(4deg); } .gallery .wrap { position: relative; } .gallery .head { margin-bottom: 48px; } .gallery .kicker { color: rgba(255,255,255,.93); } .gallery-text { margin: 22px auto 0; max-width: 720px; font-family: var(--display); font-weight: 400; font-size: 22px; line-height: 1.6; color: rgba(255,255,255,.86); text-wrap: pretty; } .mosaic { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 150px; gap: 14px; } .mosaic img { width: 100%; height: 100%; object-fit: cover; grid-column: span 2; outline: 0 solid var(--cream); outline-offset: -1px; transition: transform .48s cubic-bezier(.16,1,.3,1), rotate .55s cubic-bezier(.34,1.56,.64,1), outline-width .3s ease, box-shadow .4s ease; } .mosaic img:nth-child(8n+1), .mosaic img:nth-child(8n+3) { grid-row: span 2; } .mosaic img:nth-child(8n+4), .mosaic img:nth-child(8n+5) { grid-column: span 1; } .mosaic img:hover { position: relative; z-index: 2; outline-width: 7px; rotate: -1.6deg; transform: scale(1.045); box-shadow: 0 34px 60px -24px rgba(0,0,0,.75); } .mosaic img:nth-child(2n):hover { rotate: 1.8deg; } /* ========================================================================== FAQ (home + service pages) ========================================================================== */ .faq { position: relative; overflow: hidden; padding: 104px var(--gutter) 118px; background: var(--cream); } .faq-in { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: .8fr 1.4fr; gap: 64px; align-items: start; } .faq .head { margin: 0; } .faq .kicker { font-size: 42px; margin-bottom: -24px; } .faq .title { font-size: 40px; letter-spacing: .16em; } .faq .lede { margin: 18px 0 26px; } .faq .btn-outline { font-size: 15px; padding: 14px 32px; } .faq-list { border-top: 1px solid var(--line-2); } .faq details { border-bottom: 1px solid var(--line-2); } .faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font-family: var(--display); font-weight: 400; font-size: 21px; letter-spacing: .04em; text-transform: uppercase; color: var(--heading); transition: color .2s ease; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; flex: 0 0 auto; font-size: 24px; line-height: 1; color: var(--accent); transition: transform .3s ease; } .faq details[open] summary { color: var(--accent); } .faq details[open] summary::after { content: "−"; } .is-service .faq details[open] summary::after { content: "+"; transform: rotate(45deg); } .is-service .faq .btn-outline { background: var(--deep); color: #fff; } .is-service .faq .btn-outline:hover { background: var(--accent); border-color: var(--accent); } .faq-a { max-width: 760px; padding: 0 40px 24px 0; font-size: 17.5px; line-height: 1.75; color: var(--muted); } .faq-a p + p { margin-top: 12px; } .is-service .faq summary { font-size: 19px; text-transform: none; } .is-service .faq-a { font-size: 15px; } /* ========================================================================== Enquiry + contact card (home, service, journey) ========================================================================== */ .enquire { position: relative; overflow: hidden; padding: 120px var(--gutter) 130px; background: var(--deep); color: #fff; } .enquire-bg { position: absolute; inset: 0; background: center/cover no-repeat; opacity: .55; } .enquire-veil { position: absolute; inset: 0; background: linear-gradient(180deg, var(--veil), rgba(53,35,6,.9)); } .enquire-fade { position: absolute; left: 0; right: 0; top: 0; height: 150px; background: linear-gradient(to bottom, var(--cream) 6%, rgba(251,247,239,0)); } .enquire-in { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.15fr .85fr; gap: 70px; align-items: start; } .enquire .head { margin-bottom: 34px; } .enquire .kicker { font-size: 44px; margin-bottom: -24px; } .enquire .title { font-size: 42px; margin-bottom: 18px; } .enquire .lede { margin: 0; max-width: 520px; font-size: 18.5px; } .form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .form label { display: block; min-width: 0; } .form .full { grid-column: 1 / -1; } .form label > span { display: block; margin-bottom: 8px; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.95); } .form label > span i { font-style: normal; color: var(--amber); } .form input, .form select, .form textarea { width: 100%; padding: 15px 16px; border: 1px solid var(--field); border-radius: 0; background: #fff; font: 17px var(--sans); color: var(--heading); } .form select { appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%237c4f05' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 16px center; padding-right: 40px; } .form textarea { resize: vertical; min-height: 120px; } .form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(255,214,106,.35); } .form [aria-invalid="true"] { border-color: #e0524a; box-shadow: 0 0 0 3px rgba(224,82,74,.25); } .form-trap { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 6px; } .form-foot .btn { font-size: 16px; padding: 17px 38px; } .form-foot .btn:disabled { opacity: .7; cursor: progress; } .form-foot small { font-size: 15px; color: rgba(255,255,255,.8); } .form-status { flex: 1 1 100%; min-height: 0; font-size: 16px; } .form-status:empty { display: none; } .form-status.is-ok, .form-notice.is-ok { padding: 14px 18px; background: rgba(255,255,255,.14); border-left: 3px solid var(--amber); color: #fff; } .form-status.is-error, .form-notice.is-error { padding: 14px 18px; background: rgba(224,82,74,.18); border-left: 3px solid #e0524a; color: #fff; } .form-notice { margin: 0 0 20px; } .form.is-sent label, .form.is-sent .form-foot .btn, .form.is-sent .form-foot small { display: none; } .contact { position: relative; background: #fff; color: var(--ink); padding: 40px 38px 44px; border-top: 3px solid var(--accent); } .contact-deco { position: absolute; right: 28px; top: -22px; width: 96px; opacity: .92; transform: rotate(9deg); pointer-events: none; } .contact-brand { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; font-family: var(--display); font-size: 15px; letter-spacing: .22em; text-transform: uppercase; color: var(--heading); } .contact-brand img { width: 120px; height: 120px; flex: 0 0 auto; } .contact hr { border: 0; height: 1px; background: var(--line); margin: 22px 0; } .contact .label { font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; } .contact p { font-size: 17.5px; line-height: 1.7; color: var(--muted); } .contact-list { display: flex; flex-direction: column; gap: 10px; font-size: 17.5px; } .contact-list a, .contact-list span { display: inline-flex; align-items: center; gap: 9px; color: var(--heading); overflow-wrap: anywhere; } .contact-list a:hover { color: var(--accent); } .contact-list .muted { color: var(--muted); } .contact-list .accent { color: var(--accent); } .contact-list .i { width: 14px; height: 14px; color: var(--accent); } .contact-list .muted .i { color: var(--faint); } .contact-h { font-family: var(--display); font-size: 14px; letter-spacing: .22em; text-transform: uppercase; color: var(--heading); margin-bottom: 18px; } .related { list-style: none; margin: 0; padding: 0; } .related a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); color: inherit; } .related b { display: block; font-family: var(--display); font-weight: 400; font-size: 19px; letter-spacing: .08em; text-transform: uppercase; color: var(--heading); } .related a:hover b { color: var(--accent); } .related small { display: block; margin-top: 3px; font-size: 15px; color: var(--faint); } .toh-send-plane { position: fixed; z-index: 130; width: 70px; height: 52px; pointer-events: none; background: url(../img/plane.svg) center/contain no-repeat; filter: drop-shadow(0 6px 10px rgba(0,0,0,.3)); } /* ========================================================================== Home: travel notes + journal cards ========================================================================== */ .notes { padding: 104px var(--gutter) 112px; background: #fff; } .notes .head-split { margin-bottom: 44px; } .post-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 26px; } .post-card { display: block; border: 1px solid var(--line); background: #fff; color: inherit; transition: border-color .24s ease, transform .32s cubic-bezier(.16,1,.3,1), box-shadow .32s ease; } .post-card:hover { color: inherit; border-color: var(--accent); } .post-img { display: block; height: 200px; overflow: hidden; background: var(--tint); } .post-img img { width: 100%; height: 100%; object-fit: cover; } .post-body { display: block; padding: 22px 24px 26px; } .post-meta { display: block; font-size: 14px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); } .post-title { display: block; margin-top: 12px; font-family: var(--display); font-weight: 400; font-size: 23px; line-height: 1.35; letter-spacing: .03em; color: var(--heading); text-wrap: pretty; } /* ========================================================================== Footer + floating WhatsApp ========================================================================== */ .site-footer { position: relative; background: var(--night); color: rgba(255,255,255,.93); padding: 70px var(--gutter) 42px; overflow: hidden; } .site-footer-bg { position: absolute; inset: 0; background: center/cover no-repeat; opacity: .22; } .site-footer::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(21,16,10,.9), rgba(21,16,10,.96)); } .foot, .foot-base { position: relative; z-index: 2; max-width: 1180px; margin: 0 auto; } .foot { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 50px; padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,.14); } .foot-brand { display: flex; align-items: center; gap: 15px; } .foot-brand img { width: 84px; height: 84px; flex: 0 0 auto; } .foot-brand b { display: block; font-family: var(--display); font-weight: 500; font-size: 20px; letter-spacing: .26em; text-transform: uppercase; color: #fff; } .foot-brand small { display: block; margin-top: 5px; font-family: var(--display); font-weight: 400; font-size: 12px; letter-spacing: .28em; text-transform: uppercase; color: var(--amber); } .foot p { margin-top: 16px; max-width: 380px; font-size: 17.5px; line-height: 1.7; text-wrap: pretty; } .social { display: flex; gap: 12px; margin-top: 22px; } .social a { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.72); } .social a:hover { color: #fff; border-color: var(--amber); } .social svg.ic { width: 16px; height: 16px; } .foot-h { margin: 0 0 16px; font-family: var(--display); font-weight: 400; font-size: 14px; letter-spacing: .2em; text-transform: uppercase; color: #fff; } .foot-links { display: flex; flex-direction: column; gap: 10px; font-size: 17.5px; } .foot-links a { color: rgba(255,255,255,.93); } .foot-links a:hover { color: #fff; } .foot-base { padding-top: 24px; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; font-size: 15px; color: rgba(255,255,255,.87); } .foot-base a { color: inherit; text-decoration: underline; text-underline-offset: 3px; } .heart { display: inline-block; vertical-align: -2px; margin: 0 1px; fill: #e0524a; } .toh-fab-wrap { position: fixed; right: 22px; bottom: 22px; z-index: 90; } /* site.js sets --fab-lift while the footer's last row is on screen, so the bubble never covers it */ .toh-fab-wrap { transform: translateY(calc(var(--fab-lift, 0px) * -1)); } .toh-fab { position: relative; display: grid; place-items: center; width: 58px; height: 58px; padding: 14px; border-radius: 50%; background: #25d366; color: #fff; box-shadow: 0 14px 30px -10px rgba(20,14,6,.55); transition: scale .25s cubic-bezier(.34,1.56,.64,1), background-color .2s ease; } .toh-fab:hover { scale: 1.08; background: #1ebe5a; color: #fff; } .toh-fab::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #25d366; z-index: -1; } @media (prefers-reduced-motion: no-preference) { .toh-fab { animation: tohFabIn .45s .55s both; } .toh-fab::before { animation: tohWaPulse 2.6s ease-out infinite; } } @keyframes tohFabIn { from { opacity: 0; transform: translateY(18px) scale(.92); } to { opacity: 1; transform: none; } } @keyframes tohWaPulse { 0% { opacity: .55; scale: 1; } 80%, 100% { opacity: 0; scale: 1.55; } } /* ========================================================================== Service pages ========================================================================== */ .hero { position: relative; min-height: 640px; display: flex; flex-direction: column; background: var(--night); color: #fff; overflow: hidden; } .hero-bg { position: absolute; inset: 0; } .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; } .svc-hero .hero-veil { background: linear-gradient(100deg, rgba(20,14,7,.9) 0%, rgba(20,14,7,.66) 44%, rgba(20,14,7,.28) 74%, rgba(20,14,7,.55) 100%); } .hero-in { position: relative; z-index: 2; flex: 1 1 auto; display: flex; align-items: center; width: 100%; max-width: 1240px; margin: 0 auto; padding: 56px var(--gutter) 64px; } .crumbs { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 26px; padding: 0; list-style: none; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.7); } .crumbs a { color: rgba(255,255,255,.85); } .crumbs a:hover { color: var(--amber); } .crumbs li + li::before { content: "›"; margin-right: 10px; color: var(--amber); } .svc-hero .hero-kicker { font-size: 12px; } .svc-hero h1 { font-weight: 600; font-size: clamp(40px, 4.8vw, 68px); line-height: .98; letter-spacing: .03em; max-width: 16ch; text-shadow: 0 14px 44px rgba(20,14,6,.45); } .hero-answer { margin: 24px 0 0; max-width: 58ch; font-size: 17px; line-height: 1.65; color: rgba(255,255,255,.92); } .svc-hero .hero-ctas { margin-top: 34px; gap: 12px; } .svc-hero .btn { font-size: 13px; } .facts { position: relative; z-index: 3; background: rgba(255,255,255,.97); border-top: 3px solid var(--accent); color: var(--ink); } .facts-in { max-width: 1240px; margin: 0 auto; padding: 18px var(--gutter); display: grid; grid-template-columns: repeat(3, minmax(0,1fr)) auto; gap: 18px 30px; align-items: center; } .fact { display: flex; align-items: center; gap: 14px; } .fact .i { width: 34px; height: 34px; color: var(--accent); } .fact b { display: block; font-family: var(--display); font-weight: 500; font-size: 17px; letter-spacing: .08em; text-transform: uppercase; color: var(--heading); } .fact small { display: block; font-size: 13px; color: #8f7c5c; } .facts .btn { font-size: 13px; } .service .kicker { font-size: 44px; margin-bottom: -24px; } .service .title { font-size: 42px; letter-spacing: .18em; } .service .lede { font-size: 16px; color: #5e503b; } .service .head { margin-bottom: 56px; } .handle { padding: 104px var(--gutter) 110px; background: #fff; } .grid4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); } .card { background: #fff; padding: 36px 30px 40px; transition: background-color .25s ease, transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease; } .card:hover { background: #fdf9f0; transform: translateY(-4px); box-shadow: 0 26px 44px -30px rgba(40,29,12,.5); position: relative; z-index: 1; } .card .i { width: 32px; height: 32px; margin-bottom: 20px; } .card .num { font-size: 13px; } .card h3 { margin: 14px 0 10px; font-size: 21px; letter-spacing: .09em; color: var(--heading); } .card p { font-size: 15px; line-height: 1.7; color: #5e503b; } .tilt { --tilt: clamp(34px, 5.2vw, 84px); --wedge: 18px; position: relative; z-index: 2; margin: calc(var(--tilt) * -1) 0; } .tilt-edge { position: absolute; inset: 0; background: var(--amber); pointer-events: none; clip-path: polygon(0 calc(var(--tilt) - var(--wedge)), 100% 0, 100% calc(100% - var(--tilt) + var(--wedge)), 0 100%); } .band { position: relative; overflow: hidden; background: var(--deep); color: #fff; clip-path: polygon(0 var(--tilt), 100% 0, 100% calc(100% - var(--tilt)), 0 100%); padding: calc(var(--tilt) + 92px) var(--gutter) calc(var(--tilt) + 100px); } .band::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(135deg, transparent 0 49.2%, rgba(255,255,255,.045) 49.2% 50.8%, transparent 50.8% 100%); background-size: 64px 64px; } .band .wrap { position: relative; } .band .kicker { color: rgba(255,255,255,.7); } /* `.service .lede` (dark text for the cream sections) out-ranks `.on-dark .lede`; the band is dark. */ .band .head .lede { color: rgba(255,255,255,.86); } .why-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 38px; } .why-item { border-top: 1px solid rgba(255,255,255,.3); padding-top: 24px; } .why-item .i { width: 30px; height: 30px; color: var(--amber); margin-bottom: 18px; } .why-item h3 { font-size: 22px; letter-spacing: .1em; color: #fff; margin-bottom: 12px; } .why-item p { font-size: 15px; line-height: 1.75; color: rgba(255,255,255,.86); } .band-cta { margin-top: 58px; text-align: center; } .band-cta .btn { font-size: 13px; } .band-note { margin: 38px auto 0; max-width: 640px; text-align: center; font-size: 14px; color: rgba(255,255,255,.72); } .how .step .num { font-size: 13px; color: rgba(32,25,14,.72); } .how .step h3 { font-size: 24px; } .how .step p { font-size: 15px; color: rgba(32,25,14,.82); } .how .kicker { color: rgba(32,25,14,.62); } .dest { padding: 110px var(--gutter) 118px; background: var(--cream); } .dest-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 22px; } .dest-card { position: relative; display: block; height: 320px; overflow: hidden; background: var(--night); color: #fff; } .dest-card:hover { color: #fff; } .dest-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.16,1,.3,1); } .dest-card:hover img { transform: scale(1.06); } .dest-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,19,10,0) 38%, rgba(26,19,10,.84)); } .dest-card > span { position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 1; } .dest-card b { display: block; font-family: var(--display); font-weight: 500; font-size: 26px; letter-spacing: .1em; text-transform: uppercase; } .dest-card small { display: block; margin-top: 4px; font-size: 13px; color: rgba(255,255,255,.82); } .dest-note { margin: 28px 0 0; text-align: center; font-size: 14px; color: #8f7c5c; } .quote { padding: 110px var(--gutter); background: #fff; } .quote figure { position: relative; max-width: 860px; margin: 0 auto; padding: 50px 56px 44px; background: var(--cream); border-top: 3px solid var(--accent); } .quote figure::before { content: "\201C"; position: absolute; top: -34px; left: 40px; font-family: Georgia, serif; font-size: 120px; line-height: 1; color: var(--amber); } .quote blockquote { font-family: var(--display); font-weight: 300; font-size: 26px; line-height: 1.5; color: #3d3325; } .quote figcaption { display: flex; align-items: center; gap: 16px; margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--line); } .quote cite { font-style: normal; font-family: var(--display); font-size: 15px; letter-spacing: .14em; text-transform: uppercase; color: var(--heading); } .quote figcaption small { display: block; margin-top: 3px; font-size: 13px; color: #8f7c5c; } .is-service .enquire .kicker { font-size: 44px; } .is-service .enquire .lede { font-size: 16px; color: rgba(255,255,255,.86); } .is-service .form label > span { font-size: 11px; color: rgba(255,255,255,.78); } .is-service .form input, .is-service .form select, .is-service .form textarea { font-size: 15px; } .is-service .form-foot .btn { font-size: 13px; padding: 15px 38px; } .is-service .form-foot small { font-size: 13px; } .is-service .contact p, .is-service .contact-list { font-size: 15px; } .is-service .contact-brand { font-size: 13px; } .is-service .contact .label { font-size: 11px; color: #8f7c5c; } .is-service .faq .lede { font-size: 16px; } .is-service .faq .btn-outline { font-size: 13px; } .more { padding: 100px var(--gutter) 108px; background: #fff; } .more-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px; } .more-card { display: flex; flex-direction: column; gap: 10px; padding: 30px 30px 28px; border: 1px solid var(--line); color: inherit; transition: border-color .25s ease, transform .3s cubic-bezier(.16,1,.3,1); } .more-card:hover { border-color: var(--accent); transform: translateY(-3px); color: inherit; } .more-card .i { width: 28px; height: 28px; color: var(--accent); } .more-card h3 { font-size: 20px; letter-spacing: .08em; color: var(--heading); margin-top: 8px; } .more-card p { font-size: 15px; line-height: 1.7; color: #5e503b; } .more-card em { margin-top: auto; padding-top: 10px; font-style: normal; font-family: var(--display); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); } .pkgs { padding: 104px var(--gutter) 110px; background: #fff; } .pkg-group { margin: 0 0 22px; font-size: 22px; letter-spacing: .16em; color: var(--accent); } .pkg-group-2 { margin-top: 64px; } .pkg-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 26px; } .pkg-card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--line); scroll-margin-top: 24px; transition: border-color .25s ease, transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease; } .pkg-card:hover { border-color: var(--accent); transform: translateY(-4px); box-shadow: 0 26px 44px -30px rgba(40,29,12,.5); } .pkg-card:target { border-color: var(--accent); box-shadow: 0 0 0 3px var(--amber3); } .pkg-img { position: relative; display: block; height: 230px; overflow: hidden; background: var(--night); } .pkg-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.16,1,.3,1); } .pkg-card:hover .pkg-img img { transform: scale(1.06); } .pkg-dur { position: absolute; top: 14px; right: 14px; padding: 7px 12px; background: rgba(255,255,255,.94); font-family: var(--display); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--deep); } .pkg-body { flex: 1 1 auto; display: flex; flex-direction: column; padding: 22px 24px; } .pkg-name { font-size: 24px; letter-spacing: .08em; } .pkg-name a { color: var(--heading); } .pkg-name a:hover { color: var(--accent); } .pkg-body > p { margin: 6px 0 18px; font-size: 14px; color: #8f7c5c; } .pkg-foot { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); } .pkg-foot > span { font-family: var(--display); font-size: 22px; color: var(--heading); white-space: nowrap; } .pkg-foot small { display: block; font-family: var(--sans); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #8f7c5c; } .pkg-foot a { font-family: var(--display); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; } .pkg-foot a span { display: inline-block; transition: transform .25s ease; } .pkg-card:hover .pkg-foot a span { transform: translateX(4px); } /* ========================================================================== Journey detail ========================================================================== */ .jd-hero { position: relative; height: 78vh; min-height: 560px; display: flex; align-items: flex-end; overflow: hidden; background: var(--night); color: #fff; } .jd-hero-bg { position: absolute; inset: 0; } .jd-hero-bg img { width: 100%; height: 100%; object-fit: cover; } @media (prefers-reduced-motion: no-preference) { .jd-hero-bg img { animation: tohFloat 24s ease-in-out infinite alternate; } } .jd-hero-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(26,19,10,.5) 0%, rgba(26,19,10,.15) 40%, rgba(26,19,10,.82) 100%); } .jd-hero-in { position: relative; width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter) 66px; } .jd-hero .crumbs { margin-bottom: 30px; } .jd-kicker { margin: 0 0 -18px; font-family: var(--script-font); font-size: 40px; color: rgba(255,255,255,.8); } .jd-hero h1 { font-weight: 600; font-size: clamp(48px, 7vw, 104px); line-height: .95; letter-spacing: .04em; } .jd-route { margin-top: 14px; font-family: var(--display); font-weight: 400; font-size: 20px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.9); } .jd-facts { background: var(--deep); color: #fff; } .jd-facts-in { max-width: 1240px; margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: repeat(4, 1fr); } .jd-facts-in > div { padding: 30px 0; } .jd-facts span { display: block; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.9); } .jd-facts b { display: block; margin-top: 6px; font-family: var(--display); font-weight: 400; font-size: 28px; } .jd-facts-cta { display: flex; align-items: center; justify-content: flex-end; } .jd-plan { padding: 96px var(--gutter) 40px; background: var(--cream); } .jd-plan-in { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1.35fr .8fr; gap: 64px; align-items: start; } .jd-plan .head { margin-bottom: 34px; } .jd-plan .kicker { font-size: 38px; margin-bottom: -22px; } .jd-plan .title { font-size: 38px; letter-spacing: .16em; } .jd-intro { margin: -10px 0 30px; font-size: 17.5px; color: var(--muted); } .jd-days { list-style: none; padding: 0; border-top: 1px solid var(--line-2); } .jd-days li { display: grid; grid-template-columns: 86px 1fr; gap: 22px; padding: 22px 0; border-bottom: 1px solid var(--line-2); } .jd-day { font-family: var(--display); font-size: 15px; letter-spacing: .16em; color: var(--accent); padding-top: 4px; } .jd-days h3 { font-size: 21px; font-weight: 400; letter-spacing: .05em; line-height: 1.35; color: var(--heading); } .jd-days p { margin-top: 7px; font-size: 17.5px; line-height: 1.7; color: #4f432f; text-wrap: pretty; } .jd-side { position: sticky; top: 32px; display: flex; flex-direction: column; gap: 26px; } .jd-box { background: #fff; padding: 32px 30px 34px; border-top: 3px solid var(--accent); box-shadow: 0 30px 60px -46px rgba(40,29,12,.7); } .jd-box-h { font-family: var(--display); font-weight: 400; font-size: 14px; letter-spacing: .22em; text-transform: uppercase; color: var(--heading); margin-bottom: 16px; } .jd-box p { margin: 0 0 24px; font-size: 17.5px; line-height: 1.7; color: var(--muted); } .jd-inc { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 28px; } .jd-inc li { padding: 8px 14px; background: var(--tint); font-size: 15px; color: var(--accent); } .jd-box .btn { font-size: 15px; padding: 16px 20px; } .jd-side-photo img { width: 100%; height: 300px; object-fit: cover; box-shadow: 0 30px 60px -46px rgba(40,29,12,.7); } .jd-gallery { padding: 60px var(--gutter) 110px; background: var(--cream); } .jd-gallery-in { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr; grid-auto-rows: 230px; gap: 16px; } .jd-gallery-in img { width: 100%; height: 100%; object-fit: cover; } /* ========================================================================== Ordinary pages, journal, 404 ========================================================================== */ .page-hero { position: relative; overflow: hidden; background: var(--deep); color: #fff; padding: 110px var(--gutter) 80px; text-align: center; } .page-hero.has-photo { padding: 150px var(--gutter) 100px; } .page-hero-bg { position: absolute; inset: 0; opacity: .45; } .page-hero-bg img { width: 100%; height: 100%; object-fit: cover; } .page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(30,20,6,.35), rgba(30,20,6,.75)); } .page-hero-in { position: relative; z-index: 1; max-width: 1000px; margin: 0 auto; } .page-hero .kicker { color: rgba(255,255,255,.8); font-size: 40px; margin-bottom: -20px; } .page-hero .title { color: #fff; font-size: clamp(30px, 4vw, 48px); letter-spacing: .12em; } .prose { max-width: 760px; margin: 0 auto; padding: 72px 24px 96px; font-size: 18px; line-height: 1.75; color: var(--ink); } .prose.center { text-align: center; } .prose > * + * { margin-top: 1.1em; } .prose h2 { margin-top: 1.8em; font-size: 28px; letter-spacing: .1em; color: var(--heading); } .prose h3 { margin-top: 1.6em; font-size: 22px; letter-spacing: .08em; color: var(--heading); } .prose ul, .prose ol { padding-left: 1.3em; } .prose li + li { margin-top: .4em; } .prose a { text-decoration: underline; text-underline-offset: 3px; } .prose img { margin: 1.6em auto; } .prose blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 3px solid var(--accent); font-family: var(--display); font-weight: 300; font-size: 22px; color: var(--ink-2); } .prose .btn { text-decoration: none; margin: 4px; } /* Journal comments: same field style as the enquiry form, on the light page */ .prose-comments { padding-top: 0; border-top: 0; } .prose-comments > .toh-comments { padding-top: 48px; border-top: 1px solid var(--line); } .toh-comments-title { font-size: 26px; letter-spacing: .12em; color: var(--heading); margin: 0 0 10px; } .toh-comments-title small { display: block; margin-top: 8px; font: 14px var(--sans); letter-spacing: 0; } .toh-comments-title small a { color: var(--accent); } .toh-comment-list { list-style: none; margin: 0 0 56px; padding: 0; } .toh-comment-list .children { list-style: none; margin: 18px 0 0 28px; padding: 0 0 0 20px; border-left: 2px solid var(--line); } .toh-comment-list .comment-body { padding: 20px 0; border-bottom: 1px solid var(--line); } .toh-comment-list .comment-author { display: flex; align-items: center; gap: 12px; font-family: var(--display); letter-spacing: .08em; text-transform: uppercase; font-size: 16px; color: var(--heading); } .toh-comment-list .comment-author .avatar { width: 40px; height: 40px; border-radius: 50%; } .toh-comment-list .comment-author .says { display: none; } .toh-comment-list .comment-metadata { margin: 4px 0 0 52px; font-size: 13px; color: var(--faint); } .toh-comment-list .comment-metadata a { text-decoration: none; color: inherit; } .toh-comment-list .comment-content { margin: 10px 0 0 52px; font-size: 16.5px; } .toh-comment-list .reply { margin: 8px 0 0 52px; font-family: var(--display); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; } .toh-comment-list .reply a { color: var(--accent); text-decoration: none; } .toh-comment-note, .logged-in-as, .toh-comments-closed { margin: 0 0 22px; font-size: 15px; color: var(--muted); } .toh-comment-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .toh-comment-form > p { margin: 0; } .toh-comment-form .toh-comment-note, .toh-comment-form .logged-in-as, .toh-comment-form .comment-form-comment, .toh-comment-form .comment-form-url, .toh-comment-form .comment-form-cookies-consent, .toh-comment-form .form-submit { grid-column: 1 / -1; } .toh-comment-form label > span { display: block; margin-bottom: 8px; font-family: var(--display); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--heading); } .toh-comment-form label > span i { font-style: normal; color: var(--accent); } .toh-comment-form input[type="text"], .toh-comment-form input[type="email"], .toh-comment-form input[type="url"], .toh-comment-form textarea { width: 100%; padding: 14px 16px; border: 1px solid var(--field); border-radius: 0; background: #fff; font: 17px var(--sans); color: var(--heading); } .toh-comment-form textarea { resize: vertical; min-height: 150px; } .toh-comment-form input:focus, .toh-comment-form textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124,79,5,.16); } .toh-comment-form .comment-form-cookies-consent { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--muted); } .toh-comment-form .comment-form-cookies-consent input { flex: 0 0 auto; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--deep); } .toh-comment-form .form-submit { margin-top: 6px; } .toh-comment-form .form-submit .btn { margin: 0; font-size: 14px; padding: 14px 34px; } @media (max-width: 760px) { .toh-comment-form { grid-template-columns: 1fr; } .toh-comment-list .children { margin-left: 8px; padding-left: 14px; } } .post-back { margin-top: 3em !important; } .listing { padding: 72px var(--gutter) 96px; } .empty { text-align: center; font-size: 18px; } .nav-links { display: flex; justify-content: center; gap: 8px; margin-top: 48px; } .nav-links .page-numbers { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 12px; border: 1px solid var(--line); font-family: var(--display); color: var(--heading); } .nav-links .page-numbers.current, .nav-links a.page-numbers:hover { background: var(--deep); border-color: var(--deep); color: #fff; } .search-form { display: flex; gap: 8px; justify-content: center; margin-top: 2em; } .search-form input[type="search"] { padding: 12px 14px; border: 1px solid var(--field); font: 16px var(--sans); } .search-form input[type="submit"] { padding: 12px 20px; border: 0; background: var(--deep); color: #fff; font-family: var(--display); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; } /* ========================================================================== Passport loading sheet ========================================================================== */ #toh-board { position: fixed; inset: 0; z-index: 2147483000; overflow: hidden; cursor: pointer; background: radial-gradient(ellipse at 50% 45%, rgba(255,253,246,0) 40%, rgba(150,101,10,.14) 100%), var(--cream); color: var(--heading); font-family: var(--display); animation: tbAuto 0s 3s forwards; transition: transform .7s cubic-bezier(.76,0,.24,1), opacity .7s ease; } @keyframes tbAuto { to { visibility: hidden; opacity: 0; pointer-events: none; } } @media (prefers-reduced-motion: reduce) { #toh-board { display: none; } } html:not(.js) #toh-board { display: none; } #toh-board.is-out { transform: translateY(-100%); } #toh-board::before { content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none; background-image: repeating-linear-gradient(0deg, rgba(120,90,40,.035) 0 1px, transparent 1px 3px); } .tb-compass { position: absolute; right: -90px; bottom: -110px; width: 460px; aspect-ratio: 1; opacity: .09; background: center/contain no-repeat; animation: tbSpin 9s cubic-bezier(.3,0,.2,1) both; } @keyframes tbSpin { from { rotate: -50deg; } to { rotate: 25deg; } } .tb-center { position: absolute; left: 50%; top: 50%; width: min(680px, 92vw); translate: -50% -50%; text-align: center; } .tb-brand { font-size: 15px; font-weight: 500; letter-spacing: .42em; text-transform: uppercase; animation: tbUp .5s 0s cubic-bezier(.16,1,.3,1) both; } .tb-script { margin-top: 8px; font-family: var(--script-font); font-size: clamp(26px, 4.4vw, 40px); color: #96650a; animation: tbUp .55s .08s cubic-bezier(.16,1,.3,1) both; } @keyframes tbUp { from { opacity: 0; translate: 0 16px; } } .tb-route { display: block; width: 100%; height: auto; margin-top: 6px; overflow: visible; } .tb-trail { stroke: #96650a; } .tb-pin { fill: var(--heading); } .tb-pin-ring { fill: none; stroke: #96650a; stroke-width: 1.5; } .tb-label { font-family: var(--display); font-size: 13px; letter-spacing: .3em; fill: #6b5c46; } .tb-end { opacity: 0; transform-box: fill-box; transform-origin: 50% 100%; } .tb-end.is-in { animation: tbPop .35s cubic-bezier(.2,.9,.3,1.4) forwards; } @keyframes tbPop { from { opacity: 0; scale: .3; } to { opacity: 1; scale: 1; } } .tb-stamp { position: absolute; width: clamp(96px, 13vw, 150px); height: auto; opacity: 0; mix-blend-mode: multiply; } .tb-stamp.is-in { animation: tbStamp .4s cubic-bezier(.2,.9,.3,1.2) forwards; } @keyframes tbStamp { 0% { opacity: 0; scale: 2.4; } 70% { opacity: .92; scale: .94; } 100% { opacity: .85; scale: 1; } } .tb-s1 { left: 9%; top: 12%; rotate: -13deg; } .tb-s2 { right: 10%; top: 10%; rotate: 9deg; } .tb-s3 { left: 12%; bottom: 11%; rotate: 7deg; } .tb-s4 { right: 13%; bottom: 14%; rotate: -8deg; } .tb-skip { position: absolute; left: 0; right: 0; bottom: 22px; text-align: center; font-size: 10px; letter-spacing: .32em; text-transform: uppercase; color: rgba(35,28,18,.45); } /* ========================================================================== Motion. Hidden start states apply only when JS has marked the page (html.mo), so without JS or with reduced motion everything is visible. ========================================================================== */ .toh-deco { pointer-events: none; user-select: none; } .toh-live-deco { position: absolute; z-index: 0; pointer-events: none; background: center/contain no-repeat; } .toh-b1 { left: 4%; top: 96px; width: 104px; aspect-ratio: 3/4; } .toh-b2s { right: 6%; top: 118px; width: 60px; aspect-ratio: 3/4; opacity: .9; } .toh-b2 { right: 4%; top: 96px; width: 86px; aspect-ratio: 3/4; } .toh-compass { left: 2%; bottom: 20px; width: 250px; aspect-ratio: 1; opacity: .17; } .toh-cloud { width: 420px; aspect-ratio: 16/9; } .toh-cloud1 { left: -6%; top: 118px; opacity: .15; } .toh-cloud2 { right: -5%; top: 58%; width: 320px; opacity: .1; } .toh-progress { display: none; } /* split-flap hero kicker */ .toh-flap { display: none; } html.toh-live .toh-flap { display: inline-flex; flex-wrap: wrap; gap: 2px; font-family: var(--display); font-weight: 500; font-size: 13.5px; line-height: 1; letter-spacing: 0; color: var(--amber); text-transform: uppercase; } html.toh-live .toh-kick-src { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .toh-flap > span { position: relative; display: inline-block; min-width: 1.08em; padding: .36em .06em; text-align: center; background: rgba(20,14,7,.66); border-radius: 2px; box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 1px 0 rgba(0,0,0,.35); } .toh-flap > span::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(0,0,0,.6); } .toh-flap > span.sp { min-width: .5em; background: none; box-shadow: none; } .toh-flap > span.sp::after { display: none; } @keyframes tohWipe { from { clip-path: inset(-12% 100% -12% -2%); translate: -22px 0; } to { clip-path: inset(-12% -4% -12% -2%); translate: 0 0; } } html.toh-live .hero-h1.is-wiping { animation: tohWipe .95s cubic-bezier(.77,0,.18,1) both; } html.toh-live .hero-h1.is-wiping + p { animation: tohWipe .95s .12s cubic-bezier(.77,0,.18,1) both; } @keyframes tohInk { from { clip-path: inset(-25% 100% -25% -6%); } to { clip-path: inset(-25% -6% -25% -6%); } } @keyframes tohTrack { from { letter-spacing: .36em; } } @media (prefers-reduced-motion: no-preference) { html.mo .toh-reveal { opacity: 0; translate: 0 26px; transition: opacity .6s cubic-bezier(.16,1,.3,1), translate .6s cubic-bezier(.16,1,.3,1); } html.mo .toh-reveal.toh-in { opacity: 1; translate: 0 0; } html.mo .toh-stagger > * { opacity: 0; translate: 0 22px; transition: opacity .48s cubic-bezier(.16,1,.3,1), translate .48s cubic-bezier(.16,1,.3,1), box-shadow .28s ease, transform .28s ease, border-color .28s ease, background-color .24s ease; } html.mo .toh-stagger.toh-in > * { opacity: 1; translate: 0 0; } html.mo .toh-stagger.toh-in > :nth-child(2) { transition-delay: .06s, .06s, 0s, 0s, 0s, 0s; } html.mo .toh-stagger.toh-in > :nth-child(3) { transition-delay: .11s, .11s, 0s, 0s, 0s, 0s; } html.mo .toh-stagger.toh-in > :nth-child(4) { transition-delay: .17s, .17s, 0s, 0s, 0s, 0s; } html.mo .toh-stagger.toh-in > :nth-child(5) { transition-delay: .22s, .22s, 0s, 0s, 0s, 0s; } html.mo .toh-stagger.toh-in > :nth-child(6) { transition-delay: .26s, .26s, 0s, 0s, 0s, 0s; } html.mo .toh-stagger.toh-in > :nth-child(n+7) { transition-delay: .31s, .31s, 0s, 0s, 0s, 0s; } /* GSAP takes over when it loads: step v1 aside so the two never fight. */ html.toh-gsap .toh-reveal, html.toh-gsap .toh-reveal.toh-in, html.toh-gsap .toh-stagger > * { opacity: 1; translate: none; transition: none; } html.toh-gsap .toh-card, html.toh-gsap .j-card, html.toh-gsap .card, html.toh-gsap .pkg-card, html.toh-gsap .post-card { transition: transform .32s cubic-bezier(.16,1,.3,1), box-shadow .32s ease, border-color .24s ease, background-color .24s ease; } .toh-card:hover, .post-card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -30px rgba(40,29,12,.42); } .svc-card:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -30px rgba(40,29,12,.42); position: relative; z-index: 1; } html.toh-live .toh-reveal.toh-ink > .kicker { animation: tohInk 1.15s .08s cubic-bezier(.65,0,.35,1) both; } .toh-why::before, .band::before { animation: tohWhyDrift 24s linear infinite; } @keyframes tohWhyDrift { to { background-position: 128px 0; } } .toh-why-wrap.is-armed .toh-why-edge, .tilt.is-armed .tilt-edge { transition: clip-path 1.1s cubic-bezier(.16,1,.3,1) .15s; } .toh-why-wrap.is-armed:not(.is-in) .toh-why-edge, .tilt.is-armed:not(.is-in) .tilt-edge { clip-path: polygon(0 var(--tilt), 100% 0, 100% calc(100% - var(--tilt)), 0 100%); } .toh-why-table tbody tr:nth-child(1) { --d: .05s; } .toh-why-table tbody tr:nth-child(2) { --d: .14s; } .toh-why-table tbody tr:nth-child(3) { --d: .23s; } .toh-why-table tbody tr:nth-child(4) { --d: .32s; } .toh-why-table tbody tr:nth-child(5) { --d: .41s; } .toh-why-table tbody tr:nth-child(6) { --d: .50s; } .toh-why-table tbody tr:nth-child(n+7) { --d: .62s; } .toh-why-wrap.is-armed .toh-why-table tbody th, .toh-why-wrap.is-armed .toh-why-table tbody td { transition: opacity .6s cubic-bezier(.16,1,.3,1) var(--d), translate .7s cubic-bezier(.16,1,.3,1) var(--d), background-color .25s ease; } .toh-why-wrap.is-armed:not(.is-in) .toh-why-table tbody th { opacity: 0; } .toh-why-wrap.is-armed:not(.is-in) .toh-why-table tbody td:nth-child(2) { opacity: 0; translate: -32px 0; } .toh-why-wrap.is-armed:not(.is-in) .toh-why-table tbody td:last-child { opacity: 0; translate: 32px 0; } .toh-why-wrap.is-armed .toh-why-tick path { transition: stroke-dashoffset .5s ease calc(var(--d) + .45s); } .toh-why-wrap.is-armed:not(.is-in) .toh-why-tick path { stroke-dashoffset: 24; } .toh-why-wrap.is-armed .toh-why-vs { transition: transform .75s cubic-bezier(.34,1.56,.64,1) .3s; } .toh-why-wrap.is-armed:not(.is-in) .toh-why-vs { transform: scale(0) rotate(-140deg); } .toh-why-wrap.is-armed .toh-why-tag { transition: opacity .25s ease calc(var(--d) + .8s), transform .5s cubic-bezier(.34,1.56,.64,1) calc(var(--d) + .8s); } .toh-why-wrap.is-armed:not(.is-in) .toh-why-tag { opacity: 0; transform: scale(1.7) rotate(-12deg); } .toh-marquee .toh-mq-track { animation: tohMarq 52s linear infinite; animation-play-state: paused; } .toh-marquee.is-on .toh-mq-track { animation-play-state: running; } .toh-marquee:hover .toh-mq-track { animation-play-state: paused; } @keyframes tohDrift { from { transform: translate(0,0) rotate(-2.5deg); } to { transform: translate(24px,-34px) rotate(3deg); } } @keyframes tohDrift2 { from { transform: translate(0,0) rotate(2deg); } to { transform: translate(-18px,-26px) rotate(-3deg); } } @keyframes tohCloud { from { transform: translateX(0); } to { transform: translateX(22vw); } } @keyframes tohCloud2 { from { transform: translateX(0); } to { transform: translateX(-16vw); } } @keyframes tohRiseScroll { from { translate: 0 60px; } to { translate: 0 -50px; } } @keyframes tohTurn { from { rotate: -70deg; } to { rotate: 70deg; } } .toh-b1, .toh-b2 { animation: tohDrift 15s ease-in-out infinite alternate; animation-play-state: paused; } .toh-b2s { animation: tohDrift2 11s ease-in-out infinite alternate; animation-play-state: paused; } .toh-cloud1 { animation: tohCloud 60s ease-in-out infinite alternate; animation-play-state: paused; } .toh-cloud2 { animation: tohCloud2 48s ease-in-out infinite alternate; animation-play-state: paused; } .toh-live-deco.is-on { animation-play-state: running; } @supports (animation-timeline: view()) { .toh-b1, .toh-b2 { animation: tohDrift 15s ease-in-out infinite alternate, tohRiseScroll linear both; animation-timeline: auto, view(); animation-play-state: paused, running; } .toh-b2s { animation: tohDrift2 11s ease-in-out infinite alternate, tohRiseScroll linear both; animation-timeline: auto, view(); animation-play-state: paused, running; } .toh-b1.is-on, .toh-b2.is-on, .toh-b2s.is-on { animation-play-state: running, running; } .toh-compass { animation: tohTurn linear both; animation-timeline: view(); } } @supports (animation-timeline: scroll()) { .toh-progress { display: block; position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 120; pointer-events: none; } .toh-progress > i { position: absolute; inset: 0; transform-origin: 0 50%; background: linear-gradient(90deg, var(--accent), #f7d275); animation: tohGrow linear both; animation-timeline: scroll(root); } .toh-progress > b { position: absolute; left: 0; top: -9px; width: 30px; height: 22px; rotate: 20deg; background: url(../img/plane.svg) center/contain no-repeat; filter: drop-shadow(0 2px 3px rgba(0,0,0,.35)); animation: tohFly linear both; animation-timeline: scroll(root); } } @keyframes tohGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes tohFly { from { translate: -34px 0; } to { translate: calc(100vw - 30px) 0; } } /* service page hero entrance */ @keyframes rise { from { opacity: 0; transform: translateY(26px); } } .hero-in > div > * { animation: rise .8s cubic-bezier(.16,1,.3,1) both; } .hero-in > div > :nth-child(2) { animation-delay: .08s; } .hero-in > div > :nth-child(3) { animation-delay: .16s; } .hero-in > div > :nth-child(4) { animation-delay: .24s; } .hero-in > div > :nth-child(5) { animation-delay: .32s; } .facts { animation: rise .8s cubic-bezier(.16,1,.3,1) .4s both; } .hero-bg img { animation: zoom 16s ease-out both; } @keyframes zoom { from { transform: scale(1.1); } } } @media (min-width: 900px) and (prefers-reduced-motion: no-preference) { html.toh-live .toh-reveal.toh-ink .title { animation: tohTrack 1.2s cubic-bezier(.16,1,.3,1) both; } } /* ========================================================================== Responsive ========================================================================== */ @media (max-width: 1180px) { .links { gap: 16px; font-size: 14px; letter-spacing: .1em; } .nav { gap: 22px; } .hero-controls-in, .hero-search-in { padding-right: 96px; } } @media (max-width: 1080px) { :root { --gutter: 32px; } .links, .nav-cta { display: none; } .nav-toggle { display: block; margin-left: auto; } .j-grid, .tile-grid, .svc-grid, .post-grid, .pkg-grid, .more-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .wk-grid, .grid4, .why-grid, .dest-grid, .stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .faq-in, .enquire-in, .jd-plan-in { grid-template-columns: 1fr; gap: 48px; } .jd-side { position: static; } .facts-in { grid-template-columns: 1fr 1fr; } .steps { gap: 32px; } .toh-routeline { display: none; } .hero-search-in { grid-template-columns: 1fr 1fr 1fr; } .hero-search-in .btn { grid-column: 1 / -1; } .foot { grid-template-columns: 1fr 1fr; } .foot > div:first-child { grid-column: 1 / -1; } .toh-deco, .toh-live-deco, .toh-loop { display: none; } } @media (max-width: 760px) { :root { --gutter: 20px; --header-h: 118px; } body { font-size: 16px; } .topbar { justify-content: center; gap: 6px 18px; font-size: 13px; } .topbar-l { gap: 6px 18px; justify-content: center; } .topbar-hours, .topbar .wa { display: none; } .nav { padding-top: 8px; padding-bottom: 8px; } .brand-mark { width: 60px; height: 60px; } /* "Travel O Hub Holidays" scales with the screen and wraps to two lines before it can push the menu button off */ .brand { flex: 0 1 auto; min-width: 0; } .brand span { font-size: clamp(14px, 4.2vw, 18px); letter-spacing: .08em; line-height: 1.15; white-space: normal; } .kicker, .head-split .kicker, .service .kicker, .enquire .kicker, .faq .kicker, .toh-why-kicker { font-size: 34px; margin-bottom: -16px; } .title, .head-split .title, .service .title, .faq .title, .enquire .title, .toh-why-title, .jd-plan .title { font-size: 28px; letter-spacing: .08em; } .head { margin-bottom: 36px; } .journeys, .themes, .weekend, .testimonials, .services, .gallery, .faq, .enquire, .notes, .handle, .dest, .quote, .more, .pkgs, .route, .how, .jd-plan { padding-top: 72px; padding-bottom: 80px; } .toh-why { padding-left: 20px; padding-right: 20px; } .j-grid, .tile-grid, .svc-grid, .post-grid, .pkg-grid, .more-grid, .wk-grid, .grid4, .why-grid, .dest-grid, .steps, .t-grid, .facts-in, .form, .foot { grid-template-columns: 1fr; } .stats-grid { grid-template-columns: 1fr 1fr; } .form .full { grid-column: auto; } .home-hero { min-height: auto; } .hero-body { padding: 48px 0 28px; } .hero-copy { min-height: 0; } /* two lines each from the first paint, so the hero does not grow once fonts load (site.js only tops this up for longer text) */ .hero-h1 { font-size: 38px; min-height: 1.92em; } .hero-route { min-height: 3em; } /* buttons sit at the foot of the (fixed-height) copy block, so they don't jump when a slide's tags wrap to fewer rows */ .hero-copy { display: flex; flex-direction: column; } .hero-copy > .hero-ctas { margin-top: auto; padding-top: 16px; } .hero-chips { margin-top: 28px; } .hero-controls-in { padding-right: 0; } .hero-chipnav { display: none; } .hero-search-in { grid-template-columns: 1fr; padding-right: var(--gutter); } .hero-search-in .btn { grid-column: auto; } .j-tabs button { padding: 12px 20px; font-size: 14px; letter-spacing: .14em; } .j-themes { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; margin: 0 calc(var(--gutter) * -1) 32px; padding: 0 var(--gutter) 6px; scrollbar-width: none; } .j-themes::-webkit-scrollbar { display: none; } .head-split { gap: 18px; } .mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; gap: 10px; } .mosaic img, .mosaic img:nth-child(8n+4), .mosaic img:nth-child(8n+5) { grid-column: span 1; grid-row: span 1; } .mosaic img:nth-child(3n+1) { grid-column: span 2; grid-row: span 2; } .t-card { padding: 30px 22px 26px; } .t-card::after { width: 72px; height: 72px; top: -36px; right: -4px; } .t-card:nth-child(2n)::after { width: 90px; height: 54px; top: -30px; } .contact { padding: 32px 24px 36px; } .contact-list, .contact p { font-size: 16px; } .quote figure { padding: 42px 24px 30px; } .quote blockquote { font-size: 21px; } .svc-hero h1 { font-size: 38px; } .hero-in { padding-top: 40px; padding-bottom: 48px; } .hero { min-height: 0; } .jd-hero { min-height: 460px; height: 70vh; } .jd-facts-in { grid-template-columns: 1fr 1fr; } .jd-facts-in > div { padding: 18px 0; } .jd-facts b { font-size: 22px; } .jd-facts-cta { grid-column: 1 / -1; justify-content: flex-start; padding-top: 0 !important; } .jd-days li { grid-template-columns: 1fr; gap: 4px; } .jd-gallery-in { grid-template-columns: 1fr; grid-auto-rows: 200px; } .foot-base { justify-content: center; text-align: center; } .toh-fab-wrap { right: 14px; bottom: 14px; } .toh-fab { width: 54px; height: 54px; } .tb-s1 { left: 4%; top: 7%; } .tb-s2 { right: 4%; top: 9%; } .tb-s3 { left: 5%; bottom: 9%; } .tb-s4 { right: 5%; bottom: 11%; } .tb-label { font-size: 16px; } .toh-why-table, .toh-why-table tbody, .toh-why-table tr, .toh-why-table th, .toh-why-table td { display: block; width: auto; } .toh-why-table thead { display: none; } .toh-why-table tbody tr { margin-bottom: 16px; border: 1px solid rgba(255,255,255,.18); } .toh-why-table tbody th { padding: 16px 18px 4px; border: 0; } .toh-why-table tbody td { padding: 10px 18px 14px; border: 0; } .toh-why-table tbody td:last-child { padding: 14px 18px 16px; } .toh-why-table tbody td::before { content: attr(data-label); display: block; margin-bottom: 6px; font-family: var(--display); font-size: 11px; letter-spacing: .2em; text-transform: uppercase; opacity: .7; } } @media (max-width: 600px) { html.toh-live .toh-flap { display: none; } html.toh-live .toh-kick-src { position: static !important; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; } } /* ========================================================================== Phones: a shorter page. Long card lists become swipe rails (site.js adds the counter under each), long lists show their first items and a "Show all" button, and journey pages get a price + Enquire bar. ========================================================================== */ .rail-ui, .m-more-btn, .jd-bar { display: none; } @keyframes tohNudge { 0%, 100% { translate: 0 0; } 50% { translate: 5px 0; } } @keyframes tohMoreIn { from { opacity: 0; transform: translateY(18px); } } @media (max-width: 760px) { html { scroll-padding-top: 86px; } /* compact sticky header: the drawer carries phone + email, WhatsApp stays as the bubble */ .topbar { display: none; } .site-header { position: sticky; top: 0; } .nav { padding-top: 8px; padding-bottom: 8px; } .m-drawer { max-height: calc(100svh - 80px); } /* tighter section rhythm */ .journeys, .themes, .weekend, .testimonials, .services, .gallery, .faq, .enquire, .notes, .handle, .dest, .quote, .more, .pkgs, .route, .how, .jd-plan { padding-top: 60px; padding-bottom: 64px; } .head, .home-main .head { margin-bottom: 30px; } .toh-why-kicker { margin-bottom: 0; line-height: 1.3; } .is-service .kicker { margin-bottom: -4px; line-height: 1.25; } /* hero: smaller tags so every slide's facts fit two rows (site.js keeps the height steady) */ .hero-chips span { padding: 8px 12px; font-size: 12px; letter-spacing: .14em; } .hero-chips { min-height: 84px; align-content: flex-start; } /* two rows (37.5px each + 9px gap) reserved from the first paint */ /* hero search: destination on its own row, month + travellers side by side */ .hero-search-in { grid-template-columns: 1fr 1fr; gap: 14px 12px; } .hero-search-in label:first-child, .hero-search-in .btn { grid-column: 1 / -1; } /* swipe rails */ .j-grid, .wk-grid, .t-grid, .post-grid, .pkg-grid, .more-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; gap: 14px; align-items: stretch; overflow-x: auto; overflow-y: hidden; /* cards rise in from below: without this the rail scrolls vertically for a moment and swallows page swipes */ overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding: 6px var(--gutter) 24px; perspective: none; scrollbar-width: none; } .j-grid::-webkit-scrollbar, .wk-grid::-webkit-scrollbar, .t-grid::-webkit-scrollbar, .post-grid::-webkit-scrollbar, .pkg-grid::-webkit-scrollbar, .more-grid::-webkit-scrollbar { display: none; } .j-grid > *, .wk-grid > *, .t-grid > *, .post-grid > *, .pkg-grid > *, .more-grid > * { scroll-snap-align: start; } .js .j-grid > :not(.is-near), .js .wk-grid > :not(.is-near), .js .t-grid > :not(.is-near), .js .post-grid > :not(.is-near), .js .pkg-grid > :not(.is-near) { filter: saturate(.55) brightness(.97); } .t-grid { padding-top: 44px; } /* room for the passport stamps */ .rail-ui { display: flex; align-items: center; gap: 14px; margin-top: 2px; font-family: var(--display); font-size: 13px; letter-spacing: .18em; color: var(--accent); } .rail-ui[hidden] { display: none; } .rail-track { position: relative; flex: 1; height: 2px; background: var(--line); overflow: hidden; } .rail-track i { position: absolute; inset: 0; background: var(--accent); transform-origin: left; transform: scaleX(.1); transition: transform .25s ease-out; } .rail-hint { display: inline-flex; gap: 6px; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); transition: opacity .3s ease; } .rail-hint::after { content: "→"; } .rail-ui.is-moved .rail-hint { opacity: 0; } /* theme tiles: two up, name only */ .tile-grid, .dest-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .tile, .dest-card { height: 168px; } .tile-cap, .dest-card > span { left: 14px; right: 12px; bottom: 12px; } .tile-name, .dest-card b { font-size: 18px; letter-spacing: .1em; } .tile-text, .dest-card small { display: none; } /* services: two up, short */ .svc-grid { grid-template-columns: 1fr 1fr; } .svc-card { padding: 22px 16px 20px; } .svc-card .i { width: 26px; height: 26px; margin-bottom: 8px; } .svc-card .num { display: none; } .svc-card h3 { margin: 4px 0 8px; font-size: 16.5px; letter-spacing: .07em; line-height: 1.35; } .svc-card p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; font-size: 14.5px; line-height: 1.6; } /* service pages: "what we handle" cards and the band's inclusions, two up */ .grid4, .why-grid { grid-template-columns: 1fr 1fr; } .card { padding: 22px 16px 20px; } .card .i { width: 26px; height: 26px; margin-bottom: 8px; } .card .num { display: none; } .card h3 { margin: 4px 0 8px; font-size: 16.5px; letter-spacing: .07em; line-height: 1.35; } .card p { font-size: 14.5px; line-height: 1.6; } .why-grid { gap: 26px 16px; } .why-item { padding-top: 16px; } .why-item .i { width: 26px; height: 26px; margin-bottom: 10px; } .why-item h3 { font-size: 16.5px; letter-spacing: .07em; line-height: 1.35; margin-bottom: 8px; } .why-item p { font-size: 14.5px; line-height: 1.6; } /* how it works: icon beside the text */ .steps { gap: 0; } .step { display: grid; grid-template-columns: 30px 1fr; column-gap: 14px; padding: 20px 0; } .step .i { grid-row: 1 / span 3; width: 26px; height: 26px; margin: 0; } .step > :not(.i) { grid-column: 2; } .step h3 { margin: 6px 0 8px; font-size: 21px; } .step p { font-size: 16px; line-height: 1.65; } /* "show all" lists */ .is-clamped > .m-extra, .is-clamped > tbody > .m-extra { display: none; } .m-more-btn { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin: 6px 0 0; padding: 15px 18px; border: 1px solid currentColor; background: transparent; color: var(--deep); font-family: var(--display); font-size: 14px; letter-spacing: .18em; text-transform: uppercase; text-align: left; cursor: pointer; } .m-more-btn i { font-style: normal; font-size: 22px; line-height: 1; } .toh-why .m-more-btn, .gallery .m-more-btn { color: #fff; border-color: rgba(255,255,255,.5); } .mosaic + .m-more-btn { margin-top: 14px; } /* gallery: one wide photo, then two small, repeating */ .mosaic img:nth-child(n) { grid-column: span 1; grid-row: span 1; } .mosaic img:nth-child(3n+1) { grid-column: span 2; grid-row: span 2; } .gallery-text { font-size: 18px; } .gallery .kicker { font-size: 30px; } /* footer: the two link lists side by side */ .foot { grid-template-columns: 1fr 1fr; gap: 34px 20px; } /* journey page */ .jd-side-photo { display: none; } .jd-gallery-in { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; gap: 8px; } .jd-gallery-in > :first-child, .jd-gallery-in > :nth-child(even):last-child { grid-column: 1 / -1; grid-row: auto; } .jd-bar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 3px solid var(--accent); box-shadow: 0 -18px 40px -24px rgba(28,20,8,.45); transform: translateY(110%); visibility: hidden; transition: transform .35s cubic-bezier(.16,1,.3,1), visibility 0s linear .35s; } .jd-bar.is-on { transform: none; visibility: visible; transition-delay: 0s; } .jd-bar-in { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .jd-bar-meta { min-width: 0; } .jd-bar-meta b { display: block; font-family: var(--display); font-weight: 500; font-size: 21px; color: var(--heading); } .jd-bar-meta small { display: block; overflow: hidden; font-size: 13px; color: var(--muted); white-space: nowrap; text-overflow: ellipsis; } .jd-bar .btn { flex: 0 0 auto; padding: 13px 24px; } .has-jd-bar body { padding-bottom: 72px; } .has-jd-bar .toh-fab-wrap { bottom: 86px; } .toh-fab-wrap { transition: bottom .35s cubic-bezier(.16,1,.3,1); } } @media (max-width: 760px) and (prefers-reduced-motion: no-preference) { .j-grid > *, .wk-grid > *, .t-grid > *, .post-grid > *, .pkg-grid > * { transition: filter .45s ease; } .rail-hint::after { animation: tohNudge 1.4s ease-in-out infinite; } .is-expanded .m-extra { animation: tohMoreIn .6s cubic-bezier(.16,1,.3,1) both; } .is-expanded .m-extra:nth-child(3n+2) { animation-delay: .06s; } .is-expanded .m-extra:nth-child(3n) { animation-delay: .12s; } } @media (min-width: 1081px) { .m-drawer { display: none !important; } } /* ========================================================================== About page (templates/about.php) ========================================================================== */ .ab-story { padding: 110px var(--gutter) 120px; background: var(--page); } .ab-story-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 72px; align-items: center; } .ab-story-in.no-photo { grid-template-columns: minmax(0, 760px); justify-content: center; } .ab-story-copy .head { margin-bottom: 26px; } .ab-story-text p { font-size: 18px; line-height: 1.8; color: var(--muted); } .ab-story-text p + p { margin-top: 1em; } .ab-story-text p:last-child { font-family: var(--script-font); font-size: 28px; line-height: 1.3; color: var(--accent); } .ab-collage { position: relative; padding: 0 0 60px 0; } .ab-collage.has-two { padding: 0 60px 70px 0; } .ab-photo { margin: 0; overflow: hidden; background: var(--tint); box-shadow: 0 40px 70px -40px rgba(28,20,8,.55); } .ab-photo img { display: block; width: 100%; height: 100%; object-fit: cover; } .ab-photo-1 { aspect-ratio: 4 / 3.2; } .ab-photo-2 { position: absolute; right: 0; bottom: 0; width: 46%; aspect-ratio: 1; border: 8px solid var(--page); } .ab-stamp { position: absolute; left: -22px; bottom: 18px; display: grid; place-items: center; width: 132px; height: 132px; padding: 18px; border: 3px solid var(--accent); border-radius: 50%; outline: 1.5px solid var(--accent); outline-offset: -10px; background: rgba(253,250,242,.92); font-family: var(--display); font-size: 13px; line-height: 1.35; letter-spacing: .2em; text-align: center; text-transform: uppercase; color: var(--accent); rotate: -12deg; } .ab-mission { position: relative; overflow: hidden; padding: 110px var(--gutter); background: var(--tint); color: var(--heading); text-align: center; isolation: isolate; } .ab-mission.has-photo { color: #fff; } .ab-mission-bg { position: absolute; inset: 0; z-index: -2; background: center / cover no-repeat; } .ab-mission.has-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(21,16,10,.72), rgba(21,16,10,.82)); } .ab-mission-in { max-width: 920px; margin: 0 auto; } .ab-mission .kicker { margin-bottom: 4px; } .ab-mission.has-photo .kicker { color: var(--amber2); } .ab-mission blockquote { margin: 0; font-family: var(--display); font-weight: 300; font-size: clamp(26px, 3.4vw, 40px); line-height: 1.4; letter-spacing: .02em; } .ab-mission blockquote::before { content: "\201C"; display: block; height: .6em; font-size: 2.6em; line-height: 1; color: var(--accent); } .ab-mission.has-photo blockquote::before { color: var(--amber); } .ab-more { padding: 100px 0 0; background: var(--page); } .ab-more .wrap { padding: 0 var(--gutter); } .ab-prose { padding-top: 20px; } .ab-prose .wp-block-image img, .ab-prose figure img { width: 100%; height: auto; } .ab-prose figcaption { margin-top: 8px; font-size: 14px; color: var(--faint); text-align: center; } .ab-prose .wp-block-gallery { gap: 12px; } .ab-team { padding: 100px var(--gutter) 110px; background: var(--cream); } .ab-team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 40px 30px; } .ab-person { text-align: center; } .ab-person-photo { display: grid; place-items: center; width: 180px; height: 180px; margin: 0 auto 20px; overflow: hidden; border-radius: 50%; border: 6px solid #fff; background: var(--tint); box-shadow: 0 24px 40px -24px rgba(28,20,8,.5); } .ab-person-photo img { width: 100%; height: 100%; object-fit: cover; } .ab-person-photo span { font-family: var(--display); font-size: 48px; letter-spacing: .06em; color: var(--accent); } .ab-person h3 { font-size: 22px; letter-spacing: .1em; color: var(--heading); } .ab-person .ab-role { margin-top: 4px; font-family: var(--display); font-size: 13px; letter-spacing: .24em; text-transform: uppercase; color: var(--accent); } .ab-person p:not(.ab-role) { margin-top: 10px; font-size: 15px; line-height: 1.7; color: var(--muted); } .ab-gallery { padding: 100px var(--gutter) 110px; background: var(--page); } .ab-gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .ab-gallery-grid figure { position: relative; margin: 0; overflow: hidden; aspect-ratio: 3 / 2; background: var(--tint); } .ab-gallery-grid figure:nth-child(6n+1) { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; } .ab-gallery-grid img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.16,1,.3,1); } .ab-gallery-grid figure:hover img { transform: scale(1.04); } .ab-gallery-grid figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 16px 12px; background: linear-gradient(180deg, transparent, rgba(21,16,10,.75)); font-family: var(--display); font-size: 14px; letter-spacing: .16em; text-transform: uppercase; color: #fff; } @media (max-width: 1080px) { .ab-story-in { grid-template-columns: 1fr; gap: 56px; } .ab-collage { max-width: 640px; } } @media (max-width: 760px) { .ab-story, .ab-team, .ab-gallery { padding-top: 64px; padding-bottom: 72px; } .ab-more { padding-top: 64px; } .ab-mission { padding: 80px var(--gutter); } .ab-story-text p { font-size: 16px; } .ab-collage.has-two { padding: 0 28px 48px 0; } .ab-stamp { left: -8px; width: 104px; height: 104px; padding: 14px; font-size: 11px; } .ab-gallery-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .ab-gallery-grid figure:nth-child(6n+1) { grid-column: span 2; grid-row: auto; aspect-ratio: 3 / 2; } .ab-person-photo { width: 150px; height: 150px; } } /* ========================================================================== Enquiry popup: the boarding pass (template-parts/popup.php, assets/js/popup.js) ========================================================================== */ .tp-pop { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 16px; } .tp-pop[hidden] { display: none; } html.tp-lock { overflow: hidden; } .tp-backdrop { position: absolute; inset: 0; background: rgba(21,16,10,.6); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; transition: opacity .4s ease; } .tp-pop.is-open .tp-backdrop { opacity: 1; } .tp-pass { position: relative; display: grid; grid-template-columns: 1fr; width: min(760px, 100%); max-height: calc(100svh - 32px); overflow-y: auto; overscroll-behavior: contain; filter: drop-shadow(0 40px 50px rgba(0,0,0,.45)); opacity: 0; outline: none; scrollbar-width: none; } .tp-pass.has-stub { grid-template-columns: 1fr 210px; } .tp-pop.is-open .tp-pass { opacity: 1; } .tp-main, .tp-stub { position: relative; background: var(--cream); } .tp-main { overflow: hidden; border-radius: 14px; } .has-stub .tp-main { border-radius: 14px 0 0 14px; } .tp-stub { display: flex; flex-direction: column; gap: 12px; padding: 22px 22px 20px; border-left: 2px dashed #cdbd9c; border-radius: 0 14px 14px 0; } /* ticket notches cut out of both halves on the tear line */ .has-stub .tp-main { -webkit-mask: radial-gradient(circle 12px at 100% 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 12px at 100% 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; mask: radial-gradient(circle 12px at 100% 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 12px at 100% 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; } .tp-stub { -webkit-mask: radial-gradient(circle 12px at 0 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 12px at 0 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; mask: radial-gradient(circle 12px at 0 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle 12px at 0 100%, #0000 98%, #000) bottom / 100% 51% no-repeat; } .tp-top { display: flex; align-items: center; gap: 12px; padding: 12px 22px; background: var(--deep); color: var(--amber2); font-family: var(--display); font-size: 13px; letter-spacing: .3em; text-transform: uppercase; } .tp-top img { width: 34px; height: 34px; border: 2px solid rgba(255,255,255,.7); object-fit: cover; } .tp-top em { margin-left: auto; padding-right: 30px; font-style: normal; font-size: 11px; color: rgba(255,255,255,.6); } .has-stub .tp-top em { padding-right: 0; } .tp-body { padding: 18px 26px 24px; } .tp-route { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: 14px; margin-bottom: 16px; } .tp-code { font-family: var(--display); font-weight: 600; font-size: 44px; line-height: 1; letter-spacing: .04em; text-transform: uppercase; color: var(--heading); } .tp-code small { display: block; margin-top: 4px; font-family: var(--sans); font-weight: 400; font-size: 12px; letter-spacing: .04em; text-transform: none; color: var(--faint); } .tp-code.tp-to { text-align: right; color: var(--accent); } .tp-arc { align-self: start; width: 100%; height: 44px; overflow: visible; } .tp-arc path { fill: none; stroke: #b9a77f; stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; } .tp-plane { position: absolute; left: 0; top: 0; width: 22px; height: 22px; fill: var(--accent); offset-rotate: auto; offset-distance: 0%; opacity: 0; } /* the shared enquiry form, restyled as ticket fields */ .tp-pass .form { gap: 14px 24px; } .tp-pass .form label > span { margin-bottom: 0; font-family: var(--display); font-size: 11px; letter-spacing: .22em; color: var(--faint); } .tp-pass .form label > span i { color: #b3402a; } .tp-pass .form input, .tp-pass .form select, .tp-pass .form textarea { padding: 9px 0 7px; border: 0; border-bottom: 1.5px solid var(--field); background-color: transparent; font-size: 15px; box-shadow: none; } .tp-pass .form select { background-position: right 2px center; } .tp-pass .form textarea { min-height: 0; height: 58px; resize: none; line-height: 1.45; } .tp-pass .form input::placeholder, .tp-pass .form textarea::placeholder { color: #a8987c; } .tp-pass .form input:focus, .tp-pass .form select:focus, .tp-pass .form textarea:focus { border-bottom-color: var(--accent); box-shadow: none; } .tp-pass .form [aria-invalid="true"] { border-bottom-color: #e0524a; box-shadow: none; } .tp-pass .form-foot { justify-content: space-between; margin-top: 4px; } .tp-pass .form-foot small { order: -1; flex: 1 1 200px; font-size: 13px; color: var(--faint); } .tp-pass .form-foot .btn { padding: 14px 26px; background: var(--amber); color: var(--heading); font-size: 15px; letter-spacing: .18em; } .tp-pass .form-foot .btn::after { content: "→"; display: inline-block; margin-left: 10px; transition: transform .25s cubic-bezier(.16,1,.3,1); } .tp-pass .form-foot .btn:hover { background: var(--amber2); } .tp-pass .form-foot .btn:hover::after { transform: translateX(4px); } .tp-pass .form-status.is-error { background: rgba(224,82,74,.1); color: #8f2a20; } .tp-stub-row b { display: block; font-family: var(--display); font-weight: 500; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--faint); } .tp-stub-row span { font-family: var(--display); font-size: 20px; letter-spacing: .06em; color: var(--heading); } .tp-barcode { margin-top: auto; height: 54px; background: repeating-linear-gradient(90deg, var(--heading) 0 2px, transparent 2px 4px, var(--heading) 4px 7px, transparent 7px 9px, var(--heading) 9px 10px, transparent 10px 13px); opacity: .85; } .tp-x { position: absolute; top: 9px; right: 12px; z-index: 2; width: 36px; height: 36px; padding: 0; border: 0; background: none; color: var(--amber2); font-size: 28px; line-height: 1; cursor: pointer; opacity: .8; } .has-stub .tp-x { color: var(--accent); } .tp-x:hover, .tp-x:focus-visible { opacity: 1; } .tp-done { position: absolute; inset: 0; display: grid; place-content: center; padding: 30px; text-align: center; background: var(--cream); opacity: 0; visibility: hidden; } .tp-done h2 { margin: 6px 0; font-family: var(--display); font-weight: 500; font-size: 30px; letter-spacing: .08em; text-transform: uppercase; color: var(--heading); } .tp-done p { max-width: 380px; margin: 0 auto; color: var(--muted); } .tp-tick { width: 64px; height: 64px; margin: 0 auto; } .tp-tick circle { fill: none; stroke: var(--accent); stroke-width: 3; stroke-dasharray: 190; stroke-dashoffset: 190; } .tp-tick path { fill: none; stroke: var(--accent); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 50; stroke-dashoffset: 50; } .tp-pop.is-done .tp-done { visibility: visible; opacity: 1; transition: opacity .5s .3s; } .tp-pop.is-done .tp-tick circle, .tp-pop.is-done .tp-tick path { stroke-dashoffset: 0; transition: stroke-dashoffset .7s .6s cubic-bezier(.16,1,.3,1); } .tp-pop.is-done .tp-tick path { transition-delay: 1.15s; transition-duration: .45s; } .tp-pop.is-done .tp-x { color: var(--accent); } .tp-pop.is-done .has-stub .tp-x { right: 222px; } /* keep the ticket its full size behind the "on board" panel once the shared form marks itself sent */ .tp-pass .form.is-sent label { display: block; visibility: hidden; } .tp-pass .form.is-sent .form-foot .btn, .tp-pass .form.is-sent .form-foot small { display: inline-block; visibility: hidden; } .tp-pass .form-status.is-ok { display: none; } .tp-pop.is-closing .tp-backdrop { opacity: 0; } .tp-pop.is-closing .tp-pass { opacity: 0; transform: translateY(24px) scale(.97); transition: opacity .3s ease, transform .3s ease; } @media (prefers-reduced-motion: no-preference) { .tp-pop.is-open .tp-pass { animation: tpDrop 1.1s cubic-bezier(.16,1,.3,1) both; } .tp-pop.is-open .tp-arc path { animation: tpDash 1.6s .9s linear both; } .tp-pop.is-open .tp-plane { animation: tpFly 1.6s .9s cubic-bezier(.45,0,.2,1) both; } .tp-pop.is-open .tp-pass .form > label, .tp-pop.is-open .tp-pass .form-foot { animation: tpField .55s cubic-bezier(.16,1,.3,1) both; } .tp-pop.is-open .tp-pass .form > label:nth-of-type(1) { animation-delay: .75s; } .tp-pop.is-open .tp-pass .form > label:nth-of-type(2) { animation-delay: .83s; } .tp-pop.is-open .tp-pass .form > label:nth-of-type(3) { animation-delay: .91s; } .tp-pop.is-open .tp-pass .form > label:nth-of-type(4) { animation-delay: .99s; } .tp-pop.is-open .tp-pass .form > label:nth-of-type(n+5) { animation-delay: 1.07s; } .tp-pop.is-open .tp-pass .form-foot { animation-delay: 1.18s; } .tp-pop.is-done .tp-stub { animation: tpTear 1s cubic-bezier(.16,1,.3,1) forwards; transform-origin: 0 0; } } @keyframes tpDrop { 0% { transform: translateY(-110vh) rotate(-12deg); } 55% { transform: translateY(18px) rotate(2.5deg); } 75% { transform: translateY(-6px) rotate(-1deg); } 100% { transform: none; } } @keyframes tpDash { from { stroke-dashoffset: 120; } to { stroke-dashoffset: 0; } } @keyframes tpFly { 0% { offset-distance: 0%; opacity: 0; } 10%, 90% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } } @keyframes tpField { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes tpTear { 30% { transform: rotate(4deg); } 100% { transform: translate(60px, 520px) rotate(28deg); opacity: 0; } } @media (max-width: 760px) { .tp-pop { padding: 12px; } .tp-pass, .tp-pass.has-stub { grid-template-columns: 1fr; max-height: calc(100svh - 24px); } .tp-stub { display: none; } .has-stub .tp-main { border-radius: 14px; -webkit-mask: none; mask: none; } .has-stub .tp-x { color: var(--amber2); } .tp-top { padding: 11px 16px; font-size: 12px; letter-spacing: .24em; } .tp-top em { display: none; } .tp-body { padding: 16px 18px 20px; } .tp-code { font-size: 32px; } .tp-route { gap: 10px; margin-bottom: 10px; } .tp-pass .form { grid-template-columns: 1fr; gap: 10px; } .tp-pass .form-foot .btn { width: 100%; } } /* ---------- print ---------- */ @media print { .site-header, .toh-fab-wrap, .toh-progress, #toh-board, .tp-pop, .toh-marquee, .enquire form, .hero-controls, .hero-search { display: none !important; } body { background: #fff; } }