/* Theme Name: Tourist Booklet Theme URI: https://touristbooklet.com/ Author: Tourist Booklet Description: A friendly, animated travel-guide theme for Cebu and the Philippines. Includes a Destinations section with SEO-friendly pages, regions, trip types, quick facts, booking links and structured data. Version: 1.5.0 Requires at least: 6.0 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Text Domain: touristbooklet */ /* ========================================================================== 1. Tokens ========================================================================== */ :root { --ink: #0D3B42; --ink-2: #154A52; --teal: #0F7A71; --teal-2: #138A80; --sea: #5BBFB2; --sky: #BFE7E0; --foam: #E3F3F0; --ground: #F7FBFA; --line: #E1EEEB; --muted: #3B6A70; --mango: #F2A33A; --mango-soft: #F7C46C; --mango-ink: #8A4B05; --mango-tint: #FDEED8; --white: #FFFFFF; --font-display: 'Bricolage Grotesque', 'Trebuchet MS', sans-serif; --font-body: 'DM Sans', 'Segoe UI', system-ui, sans-serif; --wrap: 1240px; --radius-lg: 32px; --radius: 22px; --radius-sm: 14px; --ease: cubic-bezier(.2, .7, .2, 1); --shadow: 0 22px 44px -26px rgba(13, 59, 66, .5); } /* ========================================================================== 2. Base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 96px; } body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: var(--teal); } a:hover { color: var(--ink); } :focus-visible { outline: 3px solid var(--mango); outline-offset: 3px; border-radius: 6px; } /* Form fields: no outline ring. Focus shows as a soft tint or a colored bar instead, so keyboard users still see it. */ input, select, textarea { transition: background-color .2s ease, box-shadow .2s ease; } input:focus, select:focus, textarea:focus, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; } input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):focus-visible, textarea:focus-visible { box-shadow: inset 0 -3px 0 var(--teal); } h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.08; letter-spacing: -0.025em; margin: 0 0 .5em; } p { margin: 0 0 1em; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } .tb-skip { position: absolute; left: 16px; top: -60px; z-index: 1000; background: var(--ink); color: var(--white); padding: 12px 18px; border-radius: 12px; } .tb-skip:focus { top: 16px; } .tb-icon { flex: 0 0 auto; } .tb-wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; } /* Pages and posts share the full column, so titles and text start at the logo; .tb-prose keeps lines readable (760px). */ .tb-wrap--narrow { max-width: var(--wrap); } .tb-h2 { font-size: clamp(32px, 4vw, 52px); font-weight: 800; } .tb-h3 { font-size: 28px; font-weight: 700; } .tb-eyebrow { color: var(--teal); font-weight: 700; font-size: 16px; margin: 0 0 10px; } .tb-eyebrow--mango { color: var(--mango-soft); } /* Buttons and chips */ .tb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border: 0; border-radius: var(--radius-sm); font: inherit; font-weight: 700; font-size: 16px; text-decoration: none; cursor: pointer; background: var(--ground); color: var(--ink); transition: transform .25s var(--ease), background-color .2s ease, box-shadow .25s ease; } .tb-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgba(13, 59, 66, .6); color: inherit; } .tb-btn:active { transform: translateY(0) scale(.98); } .tb-btn--dark { background: var(--ink); color: var(--ground); } .tb-btn--dark:hover { color: var(--ground); background: var(--ink-2); } .tb-btn--teal { background: var(--teal); color: var(--white); } .tb-btn--teal:hover { color: var(--white); background: var(--ink); } .tb-btn--mango { background: var(--mango); color: var(--ink); } .tb-btn--mango:hover { color: var(--ink); background: var(--mango-soft); } .tb-btn--outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); } .tb-btn--block { width: 100%; margin-top: 10px; } .tb-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 999px; margin: 0; } .tb-chip .tb-icon { width: 15px; height: 15px; } .tb-chip--white { background: var(--white); color: var(--ink); } .tb-chip--teal { background: var(--foam); color: var(--teal); } .tb-chip--mango { background: var(--mango-tint); color: var(--mango-ink); } .tb-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: none; min-height: 44px; } .tb-link .tb-icon { transition: transform .25s var(--ease); } .tb-link:hover .tb-icon { transform: translateX(5px); } /* ========================================================================== 3. Header ========================================================================== */ .tb-progress { position: fixed; inset: 0 0 auto; height: 4px; z-index: 200; pointer-events: none; } .tb-progress span { display: block; height: 100%; background: var(--mango); transform: scaleX(0); transform-origin: left; } /* The header floats over the page banner (the banner's colour or photo shows through behind it). Once you scroll it turns into a floating rounded bar. Banners add var(--header-h) of top padding. */ .tb-header { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 100; margin-bottom: calc(-1 * var(--header-h, 82px)); transition: transform .4s var(--ease); } .tb-header.is-hidden { transform: translateY(-120%); } .tb-header__inner { max-width: var(--wrap); margin: 0 auto; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-radius: 0; transition: padding .35s var(--ease), margin .35s var(--ease), background-color .3s ease, box-shadow .3s ease, border-radius .35s var(--ease), max-width .35s var(--ease); } .tb-header.is-scrolled .tb-header__inner { max-width: calc(var(--wrap) - 24px); margin-top: 10px; padding: 8px 10px 8px 18px; border-radius: 999px; background: rgba(247, 251, 250, .9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 16px 34px -22px rgba(13, 59, 66, .65), inset 0 0 0 1px rgba(255, 255, 255, .7); } /* Banners with a dark photo or video: light header text until you scroll */ body.tb-dark-banner:not(.nav-open) .tb-header:not(.is-scrolled) .tb-brand, body.tb-dark-banner:not(.nav-open) .tb-header:not(.is-scrolled) .tb-menu a { color: var(--white); } body.tb-dark-banner:not(.nav-open) .tb-header:not(.is-scrolled) .tb-logo__tag { color: var(--sky); } body.tb-dark-banner:not(.nav-open) .tb-header:not(.is-scrolled) .tb-menu a:hover { color: var(--white); background: rgba(255, 255, 255, .16); } body.tb-dark-banner:not(.nav-open) .tb-header:not(.is-scrolled) .tb-menu .current-menu-item > a, body.tb-dark-banner:not(.nav-open) .tb-header:not(.is-scrolled) .tb-menu .current_page_item > a { color: var(--ink); background: var(--white); } body.tb-dark-banner:not(.nav-open) .tb-header:not(.is-scrolled) .tb-nav__cta { background: var(--mango); color: var(--ink); } body.tb-dark-banner:not(.nav-open) .tb-header:not(.is-scrolled) .tb-nav-toggle { background: rgba(255, 255, 255, .2); color: var(--white); } .tb-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; } .tb-brand:hover { color: var(--ink); } .tb-brand__mark { transition: transform .5s var(--ease); } .tb-brand:hover .tb-brand__mark { transform: rotate(-8deg) scale(1.08); } .tb-brand__logo { width: 44px; height: 44px; object-fit: contain; } .tb-brand__name { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.02em; } .tb-brand--light, .tb-brand--light:hover { color: var(--white); } .tb-nav { display: flex; align-items: center; gap: 28px; } /* Menu: each link is a soft pill. Hover tints it; the current section is a solid dark pill. */ .tb-menu { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; } .tb-menu a { position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; color: var(--ink); text-decoration: none; font-weight: 500; transition: background-color .25s ease, color .25s ease; } .tb-menu a:hover { color: var(--ink); background: rgba(13, 59, 66, .08); } .tb-menu .current-menu-item > a, .tb-menu .current_page_item > a, .tb-menu .current-menu-ancestor > a { color: var(--ground); background: var(--ink); font-weight: 700; } .tb-menu .sub-menu { display: none; } .tb-nav-toggle { display: none; width: 48px; height: 48px; border: 0; border-radius: 14px; background: var(--foam); color: var(--ink); cursor: pointer; align-items: center; justify-content: center; } .tb-nav-toggle__close { display: none; } @media (max-width: 900px) { .tb-nav-toggle { display: inline-flex; } .tb-nav { position: fixed; inset: 0; z-index: -1; flex-direction: column; justify-content: center; gap: 32px; background: var(--ground); clip-path: circle(0 at calc(100% - 48px) 44px); transition: clip-path .7s var(--ease); visibility: hidden; } .nav-open .tb-nav { clip-path: circle(150% at calc(100% - 48px) 44px); visibility: visible; } .tb-menu { flex-direction: column; align-items: center; gap: 18px; } .tb-menu a { font-family: var(--font-display); font-size: 32px; font-weight: 700; } .nav-open .tb-menu li { animation: tbUp .6s var(--ease) both; } .nav-open .tb-menu li:nth-child(2) { animation-delay: .06s; } .nav-open .tb-menu li:nth-child(3) { animation-delay: .12s; } .nav-open .tb-menu li:nth-child(4) { animation-delay: .18s; } .nav-open .tb-menu li:nth-child(5) { animation-delay: .24s; } .nav-open .tb-nav-toggle__open { display: none; } .nav-open .tb-nav-toggle__close { display: inline; } .nav-open { overflow: hidden; } .nav-open .tb-header .tb-header__inner { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--ground); box-shadow: none; } } /* ========================================================================== 4. Hero ========================================================================== */ .tb-hero { --scroll: 0; position: relative; overflow: hidden; isolation: isolate; margin: 0; border-radius: 0; background: var(--sky); min-height: max(620px, calc(100svh - var(--wp-admin--admin-bar--height, 0px))); padding-top: var(--header-h, 82px); display: flex; flex-direction: column; } .tb-hero__sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; } .tb-hero__sun { position: absolute; top: 9%; right: 9%; width: 140px; height: 140px; border-radius: 50%; background: var(--mango); box-shadow: 0 0 0 26px rgba(247, 196, 108, .35), 0 0 0 60px rgba(247, 196, 108, .14); translate: var(--px, 0) var(--py, 0); transition: translate .4s ease-out; animation: tbPulse 6s ease-in-out infinite; } .tb-cloud { position: absolute; fill: #FFFFFF; animation: tbDrift linear infinite; } .tb-cloud--1 { top: 12%; width: 160px; opacity: .85; animation-duration: 70s; } .tb-cloud--2 { top: 26%; width: 110px; opacity: .65; animation-duration: 95s; animation-delay: -40s; } .tb-cloud--3 { top: 6%; width: 90px; opacity: .55; animation-duration: 120s; animation-delay: -80s; } .tb-bird { position: absolute; width: 22px; height: 10px; border: 3px solid var(--ink); border-color: var(--ink) transparent transparent; border-radius: 50% 50% 0 0; opacity: .55; animation: tbFly 26s linear infinite; } .tb-bird::after { content: ''; position: absolute; left: 13px; top: -3px; width: 22px; height: 10px; border: 3px solid var(--ink); border-color: var(--ink) transparent transparent; border-radius: 50% 50% 0 0; } .tb-bird--1 { top: 22%; animation-delay: -6s; } .tb-bird--2 { top: 30%; animation-delay: -15s; transform: scale(.7); } .tb-hero__content { /* Same left edge as the logo (and every .tb-wrap section): centred 1240px column with a 24px gutter */ position: relative; z-index: 3; max-width: none; padding: clamp(28px, 6vh, 88px) max(24px, calc(50% - var(--wrap) / 2 + 24px)) 0; translate: 0 calc(var(--scroll) * -0.18px); opacity: calc(1 - var(--scroll) / 900); } .tb-hero__kicker { display: inline-flex; align-items: center; gap: 8px; background: var(--ground); color: var(--teal); font-weight: 700; padding: 8px 16px; border-radius: 999px; margin: 0 0 18px; } .tb-hero__title { font-size: clamp(40px, min(6.6vw, 8.4vh), 92px); font-weight: 800; line-height: .96; letter-spacing: -0.04em; margin: 0; } .tb-line { display: block; overflow: hidden; padding-bottom: .06em; } .tb-line > .tb-load { display: inline-block; animation-name: tbLineUp; } .tb-hero__lead { font-size: clamp(18px, 1.6vw, 21px); color: #1E4F56; max-width: 560px; margin: 22px 0 0; } .tb-search { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; margin: 32px 0 0; max-width: 680px; padding: 8px 8px 8px 6px; background: var(--white); border-radius: 999px; box-shadow: 0 24px 50px -28px rgba(13, 59, 66, .55); } .tb-search__field { display: flex; flex-direction: column; padding: 4px 18px; font-size: 12px; font-weight: 700; color: var(--muted); min-width: 0; border-radius: 999px; transition: background-color .2s ease, color .2s ease; } .tb-search__field:hover { background-color: var(--ground); } .tb-search__field:focus-within { background-color: var(--foam); color: var(--teal); } .tb-search__field + .tb-search__field { background-image: linear-gradient(var(--line), var(--line)); background-size: 1px 70%; background-position: left center; background-repeat: no-repeat; } .tb-search select { border: 0; background: transparent; font: inherit; font-size: 16px; font-weight: 500; color: var(--ink); padding: 2px 0; min-height: 28px; cursor: pointer; width: 100%; } .tb-search__btn { min-height: 52px; padding: 0 24px; border-radius: 999px; } @media (max-width: 640px) { .tb-search { grid-template-columns: 1fr; border-radius: var(--radius); padding: 8px; } .tb-search__field { padding: 8px 12px; border-radius: var(--radius-sm); } .tb-search__field + .tb-search__field { background-size: calc(100% - 24px) 1px; background-position: center top; } .tb-search__btn { margin-top: 6px; border-radius: var(--radius-sm); } } /* 3D booklet */ .tb-book { position: absolute; z-index: 2; right: max(calc(9% + 230px), calc(50% - 420px)); top: clamp(120px, 18%, 170px); /* between the hero text and the sun (right: 9%, 140px wide) */ width: 200px; height: 330px; perspective: 1100px; transform: translate3d(var(--px, 0), var(--py, 0), 0) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)); transition: transform .35s ease-out; } .tb-book__spin { position: relative; width: 200px; height: 270px; transform-style: preserve-3d; animation: tbSpin 10s ease-in-out infinite; } .tb-book__face { position: absolute; } .tb-book__front { inset: 0; transform: translateZ(18px); background: var(--teal); color: var(--ground); border-radius: 4px 16px 16px 4px; padding: 22px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: inset 8px 0 0 rgba(0, 0, 0, .14); overflow: hidden; } .tb-book__front::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%); transform: translateX(-120%); animation: tbShine 5s ease-in-out infinite; } .tb-book__brand { font-size: 12px; font-weight: 700; color: var(--mango-soft); } .tb-book__title { font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: .95; letter-spacing: -0.02em; } .tb-book__back { inset: 0; transform: rotateY(180deg) translateZ(18px); background: var(--ink); border-radius: 16px 4px 4px 16px; } .tb-book__spine { top: 0; left: 82px; width: 36px; height: 270px; background: #0B5E57; transform: rotateY(-90deg) translateZ(100px); } .tb-book__pages { top: 3px; left: 82px; width: 36px; height: 264px; background: repeating-linear-gradient(90deg, #F7FBFA 0 3px, #DCEBE8 3px 4px); transform: rotateY(90deg) translateZ(97px); } .tb-book__top { top: 117px; left: 0; width: 196px; height: 36px; background: repeating-linear-gradient(0deg, #F7FBFA 0 3px, #DCEBE8 3px 4px); transform: rotateX(90deg) translateZ(133px); } .tb-book__bottom { top: 117px; left: 0; width: 196px; height: 36px; background: #EAF3F1; transform: rotateX(-90deg) translateZ(133px); } .tb-book__shadow { width: 160px; height: 18px; margin: 30px auto 0; border-radius: 50%; background: var(--ink); opacity: .25; animation: tbShadow 10s ease-in-out infinite; } /* Sea, island, boat */ .tb-hero__sea { --band: 72px; position: relative; margin-top: auto; padding-top: clamp(110px, 19vh, 220px); pointer-events: none; } @media (max-height: 820px) and (min-width: 641px) { .tb-hero__kicker { margin-bottom: 12px; } .tb-hero__lead { font-size: 17px; margin-top: 14px; } .tb-search { margin-top: 22px; } .tb-island { width: 280px; } .tb-hero__sea { padding-top: clamp(96px, 15vh, 160px); } } .tb-island { position: absolute; right: 5%; bottom: calc(var(--band) + 74px); width: 340px; translate: var(--px, 0) var(--py, 0); transition: translate .4s ease-out; } .tb-palm { transform-origin: 158px 66px; animation: tbSway 5s ease-in-out infinite; } .tb-boat { position: absolute; left: 44%; bottom: calc(var(--band) + 74px); width: 150px; translate: var(--px, 0) var(--py, 0); transition: translate .4s ease-out; } .tb-boat { animation: tbBob 4.5s ease-in-out infinite; transform-origin: 50% 80%; } .tb-boat__sail { transform-origin: 77px 44px; animation: tbSail 4.5s ease-in-out infinite; } .tb-waves { position: absolute; left: 0; right: 0; bottom: calc(var(--band) - 1px); height: 130px; overflow: hidden; } .tb-waves svg { position: absolute; left: 0; width: 200%; max-width: none; } .tb-waves__back { bottom: 32px; height: 92px; fill: var(--sea); animation: tbWave 18s linear infinite; } .tb-waves__front { bottom: 0; height: 84px; fill: var(--teal-2); animation: tbWave 11s linear infinite reverse; } .tb-bubble { position: absolute; bottom: var(--band); left: var(--x); width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .7); animation: tbBubble var(--t) ease-in infinite; } .tb-bubble:nth-of-type(2n) { width: 7px; height: 7px; animation-delay: -3s; } /* ========================================================================== 5. Marquee and waves ========================================================================== */ .tb-marquee { overflow: hidden; padding: 28px 0; } /* The town strip is the deep water under the front wave: same colour at the top, darker below, with drifting ripples */ .tb-hero__marquee { position: relative; z-index: 1; height: var(--band); padding: 0; display: flex; align-items: center; background: transparent; pointer-events: auto; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); } .tb-hero__marquee .tb-marquee__track { gap: 0; padding: 0; animation-name: tbMarquee4; animation-duration: 70s; } /* four copies of the list, so it loops seamlessly */ .tb-hero__sea::before { content: ''; position: absolute; z-index: 0; left: 0; right: 0; bottom: 0; height: var(--band); pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='28'%3E%3Cpath d='M0 14c20-9 40-9 60 0s40 9 60 0 28-7 40-4' fill='none' stroke='%23ffffff' stroke-opacity='.08' stroke-width='2'/%3E%3C/svg%3E") 0 6px / 160px 28px repeat-x, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='28'%3E%3Cpath d='M0 14c28-9 55-9 83 0s55 9 83 0 38-7 54-4' fill='none' stroke='%23ffffff' stroke-opacity='.06' stroke-width='2'/%3E%3C/svg%3E") 40px 38px / 220px 28px repeat-x, linear-gradient(180deg, var(--teal-2) 0, var(--teal) 28%, #0B5E57 100%); animation: tbSeaDrift 30s linear infinite; } /* Towns: name with its area underneath, a pin, and a small mango dot between towns. Every town looks the same. */ .tb-hero__marquee .tb-town { position: relative; display: inline-grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 9px; align-items: center; margin-right: 56px; color: var(--white); white-space: nowrap; user-select: none; } .tb-hero__marquee .tb-town::after { content: ''; position: absolute; right: -31px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--mango); opacity: .9; } .tb-hero__marquee .tb-town .tb-icon { grid-row: 1 / span 2; width: 22px; height: 22px; max-width: none; color: var(--mango-soft); } .tb-hero__marquee .tb-town .tb-town__name { color: var(--white); font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1.1; letter-spacing: -0.01em; transition: color .25s ease; } .tb-hero__marquee .tb-town .tb-town__area, .tb-hero__marquee .tb-town .tb-town__area:hover { font-family: var(--font-body); font-size: 12px; font-weight: 500; line-height: 1.3; color: #E0F4F1; letter-spacing: .02em; } .tb-hero__marquee .tb-town:hover .tb-town__name { color: var(--mango-soft); } /* Smooth sliding (main.js moves the strip; you can drag or swipe it) */ .tb-hero__marquee.is-smooth { overflow: hidden; cursor: grab; touch-action: pan-y; } .tb-hero__marquee.is-smooth .tb-marquee__track { animation: none; will-change: transform; } .tb-hero__marquee.is-dragging { cursor: grabbing; } .tb-marquee__track { display: flex; align-items: center; gap: 40px; width: max-content; animation: tbMarquee 45s linear infinite; } .tb-marquee:hover .tb-marquee__track { animation-play-state: paused; } .tb-marquee span { font-family: var(--font-display); font-weight: 700; font-size: 28px; color: #8DBDB7; white-space: nowrap; transition: color .2s; } .tb-marquee span:hover { color: var(--teal); } .tb-marquee i { width: 10px; height: 10px; border-radius: 50%; background: var(--mango); } .tb-wave-divider { position: relative; height: 60px; overflow: hidden; margin-top: -1px; } .tb-wave-divider svg { position: absolute; bottom: 0; left: 0; width: 200%; max-width: none; height: 60px; animation: tbWave 22s linear infinite; } .tb-wave-divider.is-flipped { transform: scaleY(-1); margin-top: 0; margin-bottom: -1px; } /* ========================================================================== 6. Sections and grids ========================================================================== */ .tb-section { padding: 96px 0; position: relative; } .tb-section--tight { padding-top: 40px; } .tb-section--tint { background: var(--foam); } .tb-section--dark { background: var(--ink); color: var(--ground); padding: 0; } .tb-section--dark > .tb-wave-divider { background: var(--ground); } .tb-section--dark .tb-wrap { padding-top: 70px; padding-bottom: 80px; } .tb-section__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 44px; } .tb-section__head .tb-h2 { margin: 0; max-width: 620px; } .tb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 28px; } .tb-grid--trips { margin-top: 44px; } .tb-panel__more { margin: 28px 0 0; text-align: right; } /* Tabs with sliding ink */ .tb-tabs { position: relative; display: flex; flex-wrap: wrap; gap: 8px; padding: 6px; background: var(--foam); border-radius: 999px; } .tb-tab { position: relative; z-index: 1; border: 0; background: transparent; cursor: pointer; font: inherit; font-weight: 700; font-size: 15px; color: var(--ink); padding: 0 20px; min-height: 46px; border-radius: 999px; transition: color .3s ease; } .tb-tab[aria-selected="true"] { color: var(--ground); } .tb-tabs__ink { position: absolute; top: 0; left: 0; z-index: 0; border-radius: 999px; background: var(--ink); transition: transform .5s var(--ease), width .5s var(--ease); } .tb-tabs:not(.is-ready) .tb-tab[aria-selected="true"] { background: var(--ink); } /* Scroll reveal (only when JS runs, so content is never hidden without it) */ .js [data-reveal] { opacity: 0; translate: 0 48px; scale: .97; transition: opacity .8s var(--ease), translate .9s var(--ease), scale .9s var(--ease); transition-delay: calc(var(--i, 0) * 110ms); } .js [data-reveal].is-in { opacity: 1; translate: 0 0; scale: 1; } .js .tb-trip[data-reveal], .js .tb-post-card[data-reveal] { transition: transform .6s var(--ease), box-shadow .4s ease, opacity .8s var(--ease), translate .9s var(--ease), scale .9s var(--ease); transition-delay: 0s, 0s, calc(var(--i, 0) * 110ms), calc(var(--i, 0) * 110ms), calc(var(--i, 0) * 110ms); } .js .tb-trip[data-reveal].is-tilting, .js .tb-post-card[data-reveal].is-tilting { transition: transform .15s ease-out, box-shadow .4s ease; } /* ========================================================================== 7. 3D flip cards ========================================================================== */ .tb-card3d { display: flex; perspective: 1400px; } .tb-card3d__inner { --tilt-x: 0deg; --tilt-y: 0deg; --flip: 0deg; --media-h: 250px; position: relative; flex: 1 1 auto; display: grid; transform-style: preserve-3d; transform: rotateX(var(--tilt-x)) rotateY(calc(var(--tilt-y) + var(--flip))); transition: transform .8s var(--ease); } .tb-card3d__inner.is-tilting { transition: transform .15s ease-out; } .tb-card3d.is-flipped .tb-card3d__inner { --flip: 180deg; transition: transform .8s var(--ease); } /* Both faces share one grid cell, so the card is as tall as its content (nothing gets cut off). */ .tb-card3d__face { position: relative; grid-area: 1 / 1; min-width: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 26px; overflow: hidden; } .tb-card3d__front { background: var(--white); border: 1px solid var(--line); padding: 10px; display: flex; flex-direction: column; box-shadow: var(--shadow); } .tb-card3d__front::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .3s; background: radial-gradient(circle at var(--glare-x, 50%) var(--glare-y, 50%), rgba(255, 255, 255, .45), transparent 55%); } .is-tilting .tb-card3d__front::after { opacity: 1; } .tb-card3d__media { position: relative; display: block; height: var(--media-h); flex: 0 0 auto; border-radius: 18px 18px 0 0; overflow: hidden; background: var(--card-color, var(--sky)); } .tb-card3d__media img { width: 100%; height: 100%; object-fit: cover; transition: scale .8s var(--ease); } .tb-card3d:hover .tb-card3d__media img { scale: 1.07; } .tb-card3d__placeholder { position: absolute; inset: auto 0 0; height: 60px; } .tb-card3d__placeholder svg { width: 100%; height: 60px; } .tb-card3d__wave { position: absolute; left: 0; bottom: -1px; width: 100%; height: 28px; fill: var(--white); } .tb-card3d__town { position: absolute; top: 12px; left: 12px; max-width: calc(100% - 24px); box-shadow: 0 6px 14px -8px rgba(13, 59, 66, .6); } .tb-card3d__town .tb-icon { color: var(--teal); } .tb-card3d__flip { position: absolute; z-index: 2; right: 22px; top: calc(10px + var(--media-h) - 46px); display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 700; font-size: 15px; color: var(--ground); background: var(--ink); box-shadow: 0 12px 22px -12px rgba(13, 59, 66, .9); transition: background-color .2s ease, color .2s ease, transform .3s var(--ease); } .tb-card3d__flip:hover { color: var(--ink); background: var(--mango); } .tb-card3d__flip:hover .tb-icon { animation: tbSpinOnce .6s var(--ease); } .tb-card3d__body { padding: 14px 10px 10px; display: flex; flex-direction: column; gap: 12px; flex: 1 1 auto; } .tb-card3d__title { font-size: 26px; font-weight: 700; margin: 0; } .tb-card3d__title a { color: var(--ink); text-decoration: none; background: linear-gradient(var(--mango), var(--mango)) 0 100% / 0 3px no-repeat; transition: background-size .4s var(--ease); } .tb-card3d__title a:hover { background-size: 100% 3px; } .tb-card3d__blurb { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .tb-card3d__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; min-width: 0; margin-top: auto; } .tb-card3d__meta .tb-chip { flex: 0 0 auto; } .tb-card3d__time { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 14px; font-weight: 500; color: var(--muted); } .tb-card3d__time .tb-icon { width: 16px; height: 16px; color: var(--mango-ink); } .tb-card3d__time { line-height: 1.35; } .tb-card3d__back { transform: rotateY(180deg); background: var(--ink); color: var(--ground); padding: 30px; display: flex; flex-direction: column; gap: 14px; } .tb-card3d__eyebrow { color: var(--mango-soft); font-weight: 700; margin: 0; } .tb-card3d__backtitle { font-family: var(--font-display); font-weight: 800; font-size: 30px; line-height: 1.05; margin: 0; } .tb-card3d__excerpt { color: #C9E4E0; font-size: 17px; margin: 0; } .tb-card3d__back .tb-btn { margin-top: auto; align-self: flex-start; } .tb-card3d__unflip { align-self: flex-start; border: 0; background: none; color: #C9E4E0; font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; min-height: 44px; padding: 0; } /* Itinerary cards: pointer-following tilt */ .tb-trip { --tilt-x: 0deg; --tilt-y: 0deg; position: relative; display: flex; flex-direction: column; gap: 14px; padding: 32px; border-radius: 26px; background: var(--ink-2); transform-style: preserve-3d; transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); transition: transform .6s var(--ease), box-shadow .4s ease, opacity .8s var(--ease), translate .9s var(--ease), scale .9s var(--ease); } .tb-trip.is-tilting { transition: transform .15s ease-out, opacity .8s var(--ease), translate .9s var(--ease); box-shadow: 0 34px 60px -30px rgba(0, 0, 0, .6); } .tb-trip > * { transform: translateZ(0); transition: transform .4s var(--ease); } .tb-trip.is-tilting > .tb-trip__title { transform: translateZ(40px); } .tb-trip.is-tilting > .tb-trip__days { transform: translateZ(60px); } .tb-trip p { color: #C9E4E0; margin: 0; } .tb-trip__days { align-self: flex-start; background: var(--mango); color: var(--ink); } .tb-trip__title { font-size: 28px; margin: 0; } .tb-trip__btn { margin-top: auto; align-self: flex-start; } .tb-trip.is-featured { background: var(--mango-soft); color: var(--ink); } .tb-trip.is-featured p { color: #2A4A4F; } .tb-trip.is-featured .tb-trip__days { background: var(--ink); color: var(--ground); } .tb-trip.is-featured .tb-trip__btn { background: var(--ink); color: var(--ground); } /* Fixed hover colours (the default button hover inherits the card's text colour, which hid the label) and no hover lift, so the button doesn't jump under the cursor while the card tilts. */ .tb-trip .tb-trip__btn:hover { color: var(--ink); background: var(--mango); transform: translateZ(0); } .tb-trip.is-featured .tb-trip__btn:hover { color: var(--ground); background: var(--ink-2); } /* Post cards */ .tb-post-card { --tilt-x: 0deg; --tilt-y: 0deg; background: var(--white); border: 1px solid var(--line); border-radius: 26px; overflow: hidden; transform: perspective(1000px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)); transition: transform .6s var(--ease), opacity .8s var(--ease), translate .9s var(--ease), scale .9s var(--ease); } .tb-post-card.is-tilting { transition: transform .15s ease-out, opacity .8s var(--ease), translate .9s var(--ease); } .tb-post-card__media { display: block; aspect-ratio: 16 / 10; background: var(--card-color, var(--sky)); overflow: hidden; } .tb-post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: scale .8s var(--ease); } .tb-post-card:hover .tb-post-card__media img { scale: 1.06; } .tb-post-card__body { padding: 22px 24px 26px; } .tb-post-card__meta { font-size: 14px; color: var(--muted); margin: 0 0 6px; } .tb-post-card__title { font-size: 23px; margin: 0 0 8px; } .tb-post-card__title a { color: var(--ink); text-decoration: none; } .tb-post-card__title a:hover { color: var(--teal); } .tb-post-card__excerpt { color: var(--muted); margin: 0; } /* ========================================================================== 8. Booklet signup with opening cover ========================================================================== */ .tb-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 56px; padding: clamp(32px, 5vw, 60px); border-radius: var(--radius-lg); background: var(--teal-2); color: var(--white); overflow: hidden; } .tb-cta__book { flex: 0 0 auto; width: 210px; height: 280px; perspective: 1300px; cursor: pointer; border-radius: 16px; } .tb-cta__float { width: 100%; height: 100%; animation: tbFloat 6s ease-in-out infinite; } .tb-cta__3d { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(8deg) rotateY(-18deg); transition: transform .8s var(--ease); } .tb-cta__book.is-open .tb-cta__3d { transform: rotateX(4deg) rotateY(-6deg) translateX(40px); } .tb-cta__backcover { position: absolute; inset: 0; transform: translateZ(-16px); background: var(--ink); border-radius: 6px 16px 16px 6px; box-shadow: 20px 24px 34px -12px rgba(0, 0, 0, .4); } .tb-cta__page { position: absolute; inset: 4px 4px 4px 0; background: var(--ground); color: var(--ink); border-radius: 4px 12px 12px 4px; padding: 24px 20px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; } .tb-cta__page strong { font-family: var(--font-display); font-size: 19px; } .tb-cta__page span { opacity: 0; translate: 12px 0; transition: opacity .4s ease, translate .5s var(--ease); } .tb-cta__book.is-open .tb-cta__page span { opacity: 1; translate: 0 0; } .tb-cta__book.is-open .tb-cta__page span:nth-of-type(2) { transition-delay: .25s; } .tb-cta__book.is-open .tb-cta__page span:nth-of-type(3) { transition-delay: .35s; } .tb-cta__book.is-open .tb-cta__page span:nth-of-type(4) { transition-delay: .45s; } .tb-cta__book span:first-of-type { transition-delay: .15s; } .tb-cta__cover { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: left center; transition: transform 1.1s var(--ease); } .tb-cta__book.is-open .tb-cta__cover { transform: rotateY(-105deg); } .tb-cta__coverfront, .tb-cta__coverback { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .tb-cta__coverfront { background: var(--mango-soft); color: var(--ink); border-radius: 4px 16px 16px 4px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: inset 8px 0 0 rgba(0, 0, 0, .1); } .tb-cta__coverback { transform: rotateY(180deg); background: var(--foam); border-radius: 16px 4px 4px 16px; } .tb-cta__brand { font-size: 13px; font-weight: 700; } .tb-cta__title { font-family: var(--font-display); font-weight: 800; font-size: 32px; line-height: .98; } .tb-cta__hint { font-size: 13px; } .tb-cta__text { flex: 1 1 380px; } .tb-cta__text .tb-h2 { font-size: clamp(30px, 3.4vw, 46px); } .tb-cta__text > p { font-size: 18px; color: #E0F4F1; } .tb-newsletter label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; } .tb-newsletter__row { display: flex; flex-wrap: wrap; gap: 12px; } .tb-newsletter input { flex: 1 1 240px; min-height: 52px; padding: 0 16px; border: 0; border-radius: var(--radius-sm); font: inherit; color: var(--ink); } .tb-newsletter input:focus-visible { box-shadow: inset 0 -4px 0 var(--mango); } .tb-admin-note { margin-top: 12px; font-size: 14px; background: rgba(13, 59, 66, .35); padding: 10px 14px; border-radius: 10px; } /* ========================================================================== 9. Page headers, filters, breadcrumbs ========================================================================== */ .tb-pagehead { position: relative; background: var(--sky); padding: calc(48px + var(--header-h, 82px)) 0 0; overflow: hidden; } .tb-pagehead > .tb-wrap { padding-bottom: 28px; } .tb-pagehead__title { font-size: clamp(40px, 5.4vw, 72px); font-weight: 800; letter-spacing: -0.035em; margin: 10px 0 14px; } .tb-pagehead__intro { font-size: 19px; color: #1E4F56; max-width: 640px; } .tb-pagehead .tb-wave-divider { margin-top: 0; } .tb-crumbs ol { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; } .tb-crumbs li + li::before { content: '/'; margin-right: 6px; color: var(--muted); } .tb-crumbs a { color: var(--ink); } .tb-filters { display: flex; flex-direction: column; gap: 14px; margin-top: 22px; } .tb-filters__group { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .tb-filters__label { font-weight: 700; font-size: 14px; min-width: 96px; } .tb-filters ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .tb-pill { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: rgba(255, 255, 255, .7); color: var(--ink); text-decoration: none; font-weight: 500; font-size: 15px; transition: background-color .2s, transform .2s var(--ease); } .tb-pill:hover { background: var(--white); transform: translateY(-2px); color: var(--ink); } .tb-pill.is-active { background: var(--ink); color: var(--ground); } .tb-pagination { margin-top: 48px; } .tb-pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; } .tb-pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; min-height: 46px; padding: 0 14px; border-radius: 14px; background: var(--foam); color: var(--ink); text-decoration: none; font-weight: 700; } .tb-pagination .page-numbers.current { background: var(--ink); color: var(--ground); } .tb-empty { text-align: center; padding: 60px 20px; background: var(--foam); border-radius: var(--radius); } .tb-empty p:last-child { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-bottom: 0; } /* ========================================================================== 10. Destination guide ========================================================================== */ .tb-guide__hero { position: relative; overflow: hidden; background: var(--card-color, var(--sky)); min-height: calc(440px + var(--header-h, 82px)); display: flex; flex-direction: column; justify-content: flex-end; } .tb-guide__img { position: absolute; inset: -30px; translate: var(--px, 0) var(--py, 0); transition: translate .4s ease-out; } .tb-guide__img img { width: 100%; height: 100%; object-fit: cover; animation: tbKen 20s ease-out both; } .tb-guide__img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13, 59, 66, .55) 0, rgba(13, 59, 66, .25) 45%, transparent 70%), linear-gradient(180deg, rgba(13, 59, 66, .6) 0, rgba(13, 59, 66, .12) 34%, rgba(13, 59, 66, .12) 52%, rgba(13, 59, 66, .78) 100%); } .tb-guide__heroinner { position: relative; z-index: 1; padding-top: calc(80px + var(--header-h, 82px)); padding-bottom: 20px; } .has-post-thumbnail .tb-guide__heroinner, .has-post-thumbnail .tb-guide__heroinner .tb-crumbs a, .has-post-thumbnail .tb-guide__heroinner .tb-crumbs li { color: var(--white); } .tb-guide__title { font-size: clamp(44px, 6vw, 84px); font-weight: 800; letter-spacing: -0.04em; margin: 12px 0 10px; } .tb-guide__lead { font-size: 20px; max-width: 640px; } .tb-guide__hero .tb-wave-divider { position: relative; z-index: 1; } /* Looping banner video: fades in over the photo once it actually plays */ .tb-guide__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; } .tb-guide__video.is-playing { opacity: 1; } .tb-guide__img::after { z-index: 1; } .tb-guide__videotoggle { position: absolute; z-index: 2; right: 20px; top: calc(var(--header-h, 82px) + 14px); min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; color: var(--white); background: rgba(13, 59, 66, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background-color .2s ease; } .tb-guide__videotoggle:hover { background: rgba(13, 59, 66, .8); } .tb-guide__videoplay, .tb-guide__videotoggle[aria-pressed="true"] .tb-guide__videopause { display: none; } .tb-guide__videotoggle[aria-pressed="true"] .tb-guide__videoplay { display: inline; } /* Printable booklet offer (sidebar of destination guides) */ .tb-booklet { position: relative; margin-top: 24px; padding: 26px 24px 22px; border-radius: var(--radius); background: var(--ink); color: var(--ground); overflow: hidden; } .tb-booklet::before { content: ''; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(242, 163, 58, .35), transparent 70%); } .tb-booklet__cover { position: relative; width: 104px; height: 140px; margin: 0 0 18px; padding: 12px 10px; border-radius: 4px 12px 12px 4px; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; background: var(--mango-soft); color: var(--ink); box-shadow: inset 6px 0 0 rgba(0, 0, 0, .1), 12px 16px 24px -12px rgba(0, 0, 0, .6); transform: rotate(-6deg); transition: transform .5s var(--ease); } .tb-booklet:hover .tb-booklet__cover { transform: rotate(0deg) translateY(-4px); } .tb-booklet__map { position: absolute; right: -6px; bottom: 4px; width: 62%; height: auto; color: rgba(13, 59, 66, .15); } .tb-booklet__map .tb-map__ferries path { stroke: rgba(13, 59, 66, .3); } .tb-booklet__map .tb-map__pin { stroke: var(--mango-soft); } .tb-booklet__brand { position: relative; font-size: 9px; font-weight: 700; } .tb-booklet__covertitle { position: relative; font-family: var(--font-display); font-weight: 800; font-size: 18px; line-height: 1; } .tb-booklet__eyebrow { position: relative; margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--mango-soft); } .tb-booklet__title { position: relative; font-size: 24px; margin: 0 0 12px; color: var(--white); } .tb-booklet__list { position: relative; list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; font-size: 15px; color: #C9E4E0; } .tb-booklet__list li { display: flex; gap: 8px; } .tb-booklet__list li::before { content: ''; flex: 0 0 auto; width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; background: var(--mango); } .tb-booklet .tb-btn { position: relative; } .tb-booklet__note { position: relative; margin: 10px 0 0; font-size: 13px; color: #9CC5C0; } .tb-guide__layout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 48px; padding-top: 40px; padding-bottom: 60px; } .tb-guide__aside { flex: 1 1 280px; max-width: 340px; position: sticky; top: 96px; display: flex; flex-direction: column; gap: 20px; } .tb-prose { flex: 999 1 560px; min-width: 0; max-width: 760px; font-size: 18px; } .tb-facts { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); } .tb-facts__title, .tb-toc__title { font-size: 20px; margin: 0 0 12px; } .tb-facts dl { margin: 0; } .tb-facts__row { display: flex; flex-direction: column; padding: 10px 0; border-top: 1px solid var(--line); } .tb-facts dt { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); font-weight: 700; } .tb-facts dt .tb-icon { width: 16px; height: 16px; color: var(--teal); } .tb-facts dd { margin: 2px 0 0 24px; font-weight: 500; } .tb-toc { background: var(--foam); border-radius: var(--radius); padding: 22px; } .tb-toc ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; } .tb-toc a { color: var(--ink); text-decoration: none; transition: color .2s, padding .3s var(--ease); } .tb-toc a.is-active { color: var(--teal); font-weight: 700; padding-left: 4px; } .tb-guide__updated { font-size: 14px; color: var(--muted); margin-top: 40px; } .tb-feature { max-width: 960px; margin: 0 0 32px; border-radius: var(--radius); overflow: hidden; } /* Readable article content */ .tb-prose h2 { font-size: clamp(28px, 3vw, 38px); margin: 1.6em 0 .5em; } .tb-prose h3 { font-size: 24px; margin: 1.4em 0 .4em; } .tb-prose a { text-underline-offset: 3px; } .tb-prose ul, .tb-prose ol { padding-left: 1.3em; } .tb-prose li { margin-bottom: .4em; } .tb-prose img { border-radius: var(--radius); height: auto; } .tb-prose blockquote { margin: 1.5em 0; padding: 18px 24px; background: var(--mango-tint); border-radius: var(--radius-sm); } .tb-prose table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 16px; display: block; overflow-x: auto; } .tb-prose th, .tb-prose td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); } .tb-prose th { background: var(--foam); font-weight: 700; } .tb-prose .wp-block-button__link { background: var(--teal); border-radius: var(--radius-sm); font-weight: 700; } .tb-404 { text-align: center; padding: calc(100px + var(--header-h, 82px)) 0 100px; } .tb-404__boat { width: 160px; margin: 0 auto 20px; animation: tbBob 3s ease-in-out infinite; } .search-form { display: flex; gap: 8px; justify-content: center; margin: 20px 0; } .search-field { min-height: 48px; padding: 0 16px; border: 1px solid var(--line); border-radius: 14px; font: inherit; } .search-submit { min-height: 48px; padding: 0 20px; border: 0; border-radius: 14px; background: var(--ink); color: var(--white); font: inherit; font-weight: 700; cursor: pointer; } /* ========================================================================== 11. Footer ========================================================================== */ .tb-footer { background: var(--ink); color: #C9E4E0; margin-top: 60px; } .tb-footer__about .tb-brand { margin-bottom: 16px; } .tb-footer > .tb-wave-divider { background: var(--ground); } .tb-footer__inner { max-width: var(--wrap); margin: 0 auto; padding: 50px 24px 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 36px; } .tb-footer__title { font-family: var(--font-body); font-size: 16px; color: var(--white); letter-spacing: 0; } .tb-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .tb-footer a { color: #C9E4E0; text-decoration: none; } .tb-footer a:hover { color: var(--mango-soft); } .tb-footer__legal { max-width: var(--wrap); margin: 0 auto; padding: 20px 24px 40px; font-size: 14px; color: #9CC5C0; } /* ========================================================================== 11b. Animated logo ========================================================================== */ .tb-logo { display: inline-flex; align-items: center; gap: 12px; } .tb-logo__mark { overflow: visible; border-radius: 18px; box-shadow: 0 10px 20px -12px rgba(13, 59, 66, .7); transition: transform .5s var(--ease); } .tb-logo__mark * { transform-box: fill-box; } .tb-logo__text { display: flex; flex-direction: column; line-height: 1; } .tb-logo__name { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -0.025em; } .tb-logo__tag { font-size: 12px; font-weight: 500; color: var(--muted); margin-top: 4px; letter-spacing: .01em; } .tb-logo--lg { gap: 16px; } .tb-logo--lg .tb-logo__name { font-size: 30px; } .tb-logo--lg .tb-logo__tag { font-size: 14px; color: #9CC5C0; } /* Intro: pages unfold, sun rises, rays fan out, wave draws */ .tb-logo__page { transform-origin: center; animation: tbPageOpen .9s var(--ease) both; } .tb-logo__page--l { transform-origin: right center; } .tb-logo__page--r { transform-origin: left center; animation-delay: .08s; } .tb-logo__sun { transform-origin: center; animation: tbSunRise 1s var(--ease) .35s both, tbSunGlow 4s ease-in-out 1.4s infinite; } .tb-logo__rays { transform-origin: 50% 100%; animation: tbRays 1s var(--ease) .7s both, tbRaysSpin 6s ease-in-out 1.8s infinite; } .tb-logo__wave { stroke-dasharray: 48; stroke-dashoffset: 48; animation: tbDraw 1s var(--ease) .9s forwards, tbWaveLine 3s ease-in-out 2s infinite; } /* Hover: the page flips and the mark tilts */ .tb-brand:hover .tb-logo__mark { transform: rotate(-6deg) scale(1.06); } .tb-brand:hover .tb-logo__page--r { animation: tbPageFlip .9s var(--ease); } /* ========================================================================== 11c. Preloader (shows once per visit, only with JavaScript) ========================================================================== */ .tb-preloader { display: none; } .tb-preload .tb-preloader { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: var(--sky); transition: transform .9s cubic-bezier(.7, 0, .2, 1); } .tb-preload.tb-preload-done .tb-preloader { transform: translateY(-110%); } .tb-preload:not(.tb-preload-done) { overflow: hidden; } .tb-preload:not(.tb-preload-done) .tb-load { animation-play-state: paused; } .tb-preloader__center { display: flex; flex-direction: column; align-items: center; gap: 16px; transition: opacity .4s ease, transform .6s var(--ease); } .tb-preload-done .tb-preloader__center { opacity: 0; transform: translateY(-30px) scale(.95); } .tb-preloader .tb-logo__mark { border-radius: 30px; box-shadow: 0 24px 40px -20px rgba(13, 59, 66, .6); animation: tbFloat 2.4s ease-in-out infinite; } .tb-preloader__name { font-family: var(--font-display); font-weight: 800; font-size: 28px; letter-spacing: -0.02em; color: var(--ink); margin: 6px 0 0; animation: tbUp .8s var(--ease) .5s both; } .tb-preloader__bar { width: 160px; height: 6px; border-radius: 999px; background: rgba(13, 59, 66, .12); overflow: hidden; } .tb-preloader__bar span { display: block; width: 40%; height: 100%; border-radius: inherit; background: var(--mango); animation: tbBar 1.1s ease-in-out infinite; } .tb-preloader__wave { position: absolute; left: 0; bottom: 0; width: 200%; max-width: none; height: 120px; fill: var(--teal-2); animation: tbWave 6s linear infinite; } .tb-preloader__wave + .tb-preloader__wave { display: none; } /* ========================================================================== 11d. Cebu map (tb_cebu_map), map section, travelling book, footer scene ========================================================================== */ .tb-map { display: block; overflow: visible; } .tb-map__main, .tb-map__isles path { fill: currentColor; } .tb-map__routes path { fill: none; stroke: var(--mango); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 2 10; animation: tbRoute 1.4s linear infinite; } .tb-map__ferries path { fill: none; stroke: var(--white); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 9 9; opacity: .85; animation: tbRoute 2.4s linear infinite; } .tb-map__pin { fill: var(--mango); stroke: var(--white); stroke-width: 4; } .tb-map__pulse { fill: var(--mango); transform-box: fill-box; transform-origin: center; animation: tbMapPulse 2.4s ease-out infinite; } /* Map on the hero book cover */ .tb-book__map { position: absolute; z-index: 0; right: -6px; top: 14px; width: 72%; height: auto; color: rgba(191, 231, 224, .26); } .tb-book__map .tb-map__routes path { stroke-width: 6; } .tb-book__map .tb-map__ferries path { stroke: rgba(191, 231, 224, .7); stroke-width: 5; } .tb-book__map .tb-map__pin { stroke: var(--teal); stroke-width: 6; r: 14; } .tb-book__map .tb-map__pulse { r: 16; } .tb-book__brand, .tb-book__title { position: relative; z-index: 1; } /* Maps on the newsletter book */ .tb-cta__covermap { position: absolute; right: -10px; bottom: 6px; width: 64%; height: auto; color: rgba(13, 59, 66, .13); } .tb-cta__covermap .tb-map__ferries path { stroke: rgba(13, 59, 66, .35); } .tb-cta__covermap .tb-map__pin { stroke: var(--mango-soft); } .tb-cta__brand, .tb-cta__title, .tb-cta__hint { position: relative; z-index: 1; } /* Homepage map section */ .tb-mapsec__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 72px); align-items: center; } .tb-mapsec__lead { font-size: 18px; color: var(--muted); max-width: 520px; } .tb-mapsec__regions { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 12px; } .tb-mapsec__regions a { display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; align-items: center; padding: 16px 20px; border-radius: var(--radius); background: var(--white); border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: transform .35s var(--ease), box-shadow .3s ease, border-color .3s ease; } .tb-mapsec__regions strong { font-family: var(--font-display); font-size: 20px; line-height: 1.2; } .tb-mapsec__regions span { grid-column: 1; color: var(--muted); font-size: 15px; } .tb-mapsec__regions .tb-icon { grid-column: 2; grid-row: 1 / span 2; color: var(--teal); transition: transform .3s var(--ease); } .tb-mapsec__regions a:hover { color: var(--ink); transform: translateX(6px); border-color: var(--sea); box-shadow: var(--shadow); } .tb-mapsec__regions a:hover .tb-icon { transform: translateX(4px); } .tb-mapsec__map { position: relative; overflow: hidden; border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: clamp(28px, 4vw, 48px) clamp(48px, 8vw, 110px); background: radial-gradient(circle at 30% 18%, var(--foam), var(--sky) 55%, var(--sea) 140%); } .tb-mapsec__canvas { position: relative; max-width: 320px; margin: 0 auto; aspect-ratio: 400 / 680; } .tb-mapsec__svg { width: 100%; height: 100%; color: #2E8C6F; filter: drop-shadow(0 14px 16px rgba(13, 59, 66, .28)); } .tb-mapsec__compass { position: absolute; top: 18px; right: 18px; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--white); color: var(--ink); box-shadow: var(--shadow); font-family: var(--font-display); font-weight: 800; font-size: 17px; animation: tbFloat 5s ease-in-out infinite; } .tb-mapsec__compass::before { content: ''; position: absolute; top: -7px; border: 7px solid transparent; border-top: 0; border-bottom: 9px solid var(--mango); } .tb-mapsec__ripples { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; fill: none; stroke: rgba(255, 255, 255, .75); stroke-width: 3; stroke-linecap: round; animation: tbRipple 5s ease-in-out infinite; } /* Map pins: real links, the dot sits exactly on the town */ .tb-pin { position: absolute; z-index: 1; left: var(--x); top: var(--y); display: flex; align-items: center; gap: 6px; min-height: 44px; transform: translate(-9px, -50%); color: var(--ink); text-decoration: none; } .tb-pin--left { flex-direction: row-reverse; transform: translate(calc(-100% + 9px), -50%); } .tb-pin__dot { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; background: var(--mango); border: 3px solid var(--white); box-shadow: 0 4px 10px -2px rgba(13, 59, 66, .5); transition: transform .3s var(--ease); } .tb-pin__label { font-size: 13px; font-weight: 700; white-space: nowrap; padding: 3px 10px; border-radius: 999px; background: var(--white); box-shadow: 0 6px 14px -8px rgba(13, 59, 66, .6); transition: background-color .25s ease, color .25s ease; } .tb-pin:hover, .tb-pin:focus-visible { z-index: 2; color: var(--ground); } .tb-pin:hover .tb-pin__dot, .tb-pin:focus-visible .tb-pin__dot { transform: scale(1.3); animation: tbPinDrop .6s var(--ease); } .tb-pin:hover .tb-pin__label, .tb-pin:focus-visible .tb-pin__label { background: var(--ink); color: var(--ground); } .js .tb-mapsec__map .tb-pin { opacity: 0; translate: 0 -16px; transition: opacity .5s ease, translate .7s var(--ease); } .js .tb-mapsec__map.is-in .tb-pin { opacity: 1; translate: 0 0; } .tb-mapsec__map .tb-pin:nth-of-type(2) { transition-delay: .5s; } .tb-mapsec__map .tb-pin:nth-of-type(3) { transition-delay: .6s; } .tb-mapsec__map .tb-pin:nth-of-type(4) { transition-delay: .7s; } .tb-mapsec__map .tb-pin:nth-of-type(5) { transition-delay: .8s; } .tb-mapsec__map .tb-pin:nth-of-type(6) { transition-delay: .9s; } .tb-mapsec__map .tb-pin:nth-of-type(7) { transition-delay: 1s; } .tb-mapsec__map .tb-pin:nth-of-type(8) { transition-delay: 1.1s; } .tb-mapsec__map .tb-pin:nth-of-type(1) { transition-delay: .4s; } @media (max-width: 900px) { .tb-mapsec__inner { grid-template-columns: 1fr; } .tb-mapsec__canvas { max-width: 270px; } } @media (max-width: 600px) { .tb-mapsec__map { padding: 28px 56px; } .tb-pin__label { font-size: 12px; padding: 2px 8px; } } /* Travelling booklet (main.js moves the hero book here on wide screens) */ .tb-book-anchor { position: absolute; z-index: 2; right: max(calc(9% + 230px), calc(50% - 420px)); top: clamp(120px, 18%, 170px); width: 200px; height: 330px; pointer-events: none; } .tb-book-travel { position: fixed; left: 0; top: 0; z-index: 60; width: 200px; height: 330px; transform-origin: 0 0; pointer-events: none; will-change: transform, opacity; } .tb-book-travel .tb-book { position: relative; right: auto; top: auto; } @media (max-width: 1080px) { .tb-book-anchor { right: calc(9% + 150px); } } @media (max-width: 1000px) { .tb-book-anchor { right: calc(9% + 135px); } } @media (max-width: 900px) { .tb-book-travel { display: none; } } /* Footer night-sea scene */ .tb-footer { position: relative; overflow: hidden; isolation: isolate; } .tb-footer__decor { position: absolute; inset: 60px 0 0; z-index: -1; overflow: hidden; pointer-events: none; } .tb-footer__map { position: absolute; top: -50px; right: max(-30px, calc(50% - 700px)); width: clamp(200px, 24vw, 330px); height: auto; color: rgba(91, 191, 178, .08); transform: rotate(8deg); } .tb-footer__map .tb-map__routes path { stroke: rgba(242, 163, 58, .4); } .tb-footer__map .tb-map__ferries path { stroke: rgba(191, 231, 224, .25); } .tb-footer__map .tb-map__pin { stroke: var(--ink); } .tb-footer__star { position: absolute; left: var(--x); top: var(--y); width: 4px; height: 4px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 8px 1px rgba(191, 231, 224, .6); opacity: .15; animation: tbTwinkle 3.6s ease-in-out infinite; animation-delay: var(--d); } .tb-footer__turtle { position: absolute; left: -110px; bottom: 96px; width: 72px; height: auto; fill: rgba(91, 191, 178, .22); animation: tbSwim 48s linear infinite; } .tb-footer__flippers { transform-origin: 40px 30px; animation: tbPaddle 1.8s ease-in-out infinite; } .tb-footer__shell { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; opacity: .55; } .tb-footer__fish { position: absolute; right: -90px; bottom: 170px; width: 64px; height: auto; fill: rgba(191, 231, 224, .16); animation: tbSwimBack 34s linear infinite; animation-delay: -14s; } .tb-footer__sea { position: absolute; left: 0; right: 0; bottom: 0; height: 84px; } .tb-footer__sea svg { position: absolute; left: 0; bottom: 0; width: 200%; max-width: none; } .tb-footer__sea svg:first-child { height: 84px; fill: rgba(19, 138, 128, .16); animation: tbWave 26s linear infinite; } .tb-footer__sea svg:last-child { height: 56px; fill: rgba(19, 138, 128, .26); animation: tbWave 17s linear infinite reverse; } .tb-footer__inner, .tb-footer__legal { position: relative; } /* Custom search dropdowns (main.js builds them; the real