/* ===================================================================== Nutz.travel look — bright, glossy, bubbly, like the logo. Loaded after style.css on pages with . ===================================================================== */ body.nz { --nz-navy: #0B2A5B; --nz-navy-deep: #061A3D; --nz-blue: #1E88FF; --nz-blue-deep: #0057E0; --nz-sky: #35C6FF; --nz-sky-pale: #E4F4FF; --nz-orange: #FF8A00; --nz-orange-hi: #FFC247; --nz-orange-lo: #E86400; --nz-sun: #FFD23F; --nz-mint: #3DD9A4; --nz-pink: #FF5C8A; --nz-page: #F4FAFF; --radius: 26px; --shadow: 0 14px 34px rgba(0, 87, 224, 0.14); background: var(--nz-page); color: #14233F; } body.nz h1, body.nz h2, body.nz h3 { color: var(--nz-navy); letter-spacing: -0.01em; text-wrap: balance; } /* ---------- glossy candy buttons ---------- */ body.nz .btn { border-radius: 999px; font-family: 'Baloo 2', 'Poppins', sans-serif; font-weight: 800; font-size: 1.08rem; letter-spacing: .01em; padding: 13px 30px 11px; } body.nz .btn-primary { color: #fff; background: linear-gradient(180deg, #FFA126 0%, #FF8A00 100%); box-shadow: 0 6px 16px rgba(255,122,0,.28); text-shadow: none; } body.nz .btn-primary:hover { background: linear-gradient(180deg, #FFAE40 0%, #F57F00 100%); transform: translateY(-1px); box-shadow: 0 8px 20px rgba(255,122,0,.34); } body.nz .btn-primary:active { transform: translateY(0); box-shadow: 0 3px 8px rgba(255,122,0,.3); } body.nz .btn-secondary { background: #fff; color: var(--nz-blue-deep); border: 2px solid var(--nz-blue); box-shadow: none; } body.nz .btn-secondary:hover { background: var(--nz-sky-pale); transform: translateY(-1px); } body.nz .btn:focus-visible { outline: 3px solid var(--nz-sun); outline-offset: 3px; } /* ---------- eyebrows: sunny pills ---------- */ body.nz .eyebrow { background: #FFF1C2; color: #9A5A00; border-radius: 999px; font-family: 'Baloo 2', sans-serif; font-weight: 800; letter-spacing: .06em; font-size: .82rem; padding: 5px 16px 3px; } /* ---------- header ---------- */ body.nz header.site-header { background: rgba(255,255,255,.96); border-bottom: 0; box-shadow: 0 6px 20px rgba(0,87,224,.08); } body.nz header.site-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 4px; background: linear-gradient(90deg, var(--nz-orange) 0%, var(--nz-sun) 30%, var(--nz-sky) 65%, var(--nz-blue) 100%); } body.nz .brand img { height: 58px; } body.nz nav.main-nav a { font-family: 'Baloo 2', sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--nz-navy); } body.nz nav.main-nav a:hover, body.nz nav.main-nav a.active { background: var(--nz-sky-pale); color: var(--nz-blue-deep); } body.nz .header-cta .btn { padding: 9px 20px 7px; font-size: .98rem; } body.nz .cur-pick { border: 2px solid #CFE6FF; } @media (max-width: 1180px) { body.nz .brand img { height: 50px; } } @media (max-width: 760px) { body.nz .brand img { height: 42px; } body.nz .nav-toggle { border: 2px solid #CFE6FF; color: var(--nz-blue-deep); } body.nz nav.main-nav a.nav-host { background: linear-gradient(180deg, var(--nz-orange-hi), #FF7A00); } } /* ---------- hero: blue sky, clouds, plane trail ---------- */ body.nz .hero { padding: 70px 0 150px; background: radial-gradient(circle at 85% 12%, rgba(255,226,120,.9) 0 60px, rgba(255,226,120,0) 130px), linear-gradient(180deg, #1C8BFF 0%, #35B8FF 55%, #8FDBFF 100%); color: #fff; } body.nz .hero .wrap { position: relative; z-index: 2; } body.nz .hero .eyebrow { background: var(--nz-sun); color: var(--nz-navy); box-shadow: none; } body.nz .hero h1 { color: #fff; font-size: clamp(2.6rem, 5.4vw, 4.4rem); line-height: 1.02; margin: 6px 0 20px; text-shadow: 0 2px 18px rgba(6,26,61,.22); } body.nz .hero .lead { color: #fff; font-size: 1.15rem; text-shadow: 0 1px 8px rgba(0,60,170,.35); } body.nz .hero .btn-secondary { border-color: #fff; color: var(--nz-blue-deep); box-shadow: 0 8px 20px rgba(0,87,224,.14); } body.nz .hero-media { border-radius: 30px; border: 8px solid #fff; transform: rotate(2.5deg); box-shadow: 0 8px 20px rgba(0,87,224,.14); } body.nz .hero-media img { border-radius: 22px; } .nz-clouds { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; } .nz-cloud { position: absolute; background: #fff; border-radius: 999px; opacity: .7; animation: nzDrift 38s linear infinite alternate; } .nz-cloud::before, .nz-cloud::after { content: ''; position: absolute; background: #fff; border-radius: 50%; } .nz-cloud::before { width: 55%; height: 170%; left: 12%; bottom: 20%; } .nz-cloud::after { width: 40%; height: 130%; right: 12%; bottom: 25%; } .nz-cloud.c1 { width: 120px; height: 32px; top: 14%; left: -40px; } .nz-cloud.c2 { width: 90px; height: 26px; top: 5%; left: 36%; opacity: .5; animation-duration: 46s; } .nz-cloud.c3 { width: 140px; height: 36px; top: 8%; right: 18%; opacity: .55; animation-duration: 54s; } .nz-cloud.c4 { width: 100px; height: 28px; bottom: 26%; right: -30px; } @keyframes nzDrift { from { transform: translateX(-20px); } to { transform: translateX(40px); } } .nz-trail { position: absolute; left: 0; right: 0; bottom: 70px; width: 100%; height: 190px; z-index: 1; pointer-events: none; } .nz-trail path { fill: none; stroke: rgba(255,255,255,.85); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 2 16; } .nz-trail .nz-plane { fill: var(--nz-orange); stroke: #fff; stroke-width: 1.2; } .nz-wave { position: absolute; left: 0; right: 0; bottom: -1px; height: 90px; z-index: 1; display: block; width: 100%; } .nz-wave path { fill: var(--nz-page); } /* search card floats on the wave */ body.nz .search-bar { margin-top: -110px; border-radius: 30px; padding: 12px; border: 4px solid #fff; box-shadow: 0 26px 50px rgba(0,87,224,.22); } body.nz .search-field { border-color: #E1EEFF; } body.nz .search-field label { color: var(--nz-blue); font-family: 'Baloo 2', sans-serif; font-size: .82rem; letter-spacing: .06em; } body.nz .search-submit { font-size: 1.15rem; padding: 14px 34px 12px; } @media (max-width: 900px) { body.nz .hero-media { transform: none; } } @media (max-width: 760px) { body.nz .hero { padding: 34px 0 130px; background: radial-gradient(circle at 88% 8%, rgba(255,226,120,.9) 0 34px, rgba(255,226,120,0) 80px), linear-gradient(180deg, #1C8BFF 0%, #35B8FF 60%, #8FDBFF 100%); } body.nz .hero .eyebrow { background: var(--nz-sun); color: var(--nz-navy); font-size: .7rem; backdrop-filter: none; } body.nz .hero h1 { font-size: 2.2rem; } .nz-trail { bottom: 60px; height: 120px; } .nz-wave { height: 60px; } body.nz .search-bar { margin-top: -96px; border-radius: 24px; padding: 6px; } .nz-cloud.c2, .nz-cloud.c3, .nz-cloud.c4 { display: none; } .nz-cloud.c1 { top: auto; bottom: 16%; left: -60px; width: 150px; height: 40px; } } /* ---------- section headings with the logo swoosh ---------- */ body.nz .section-head h2 { font-size: clamp(1.9rem, 3.4vw, 2.6rem); } body.nz .section-head h2::after { content: ''; display: block; width: 150px; height: 18px; margin: 10px auto 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 150 18'%3E%3Cpath d='M4 5 Q75 24 146 5' fill='none' stroke='%231E88FF' stroke-width='6' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat; } /* ---------- soft wavy sections ---------- */ body.nz section { position: relative; } body.nz section.alt { background: var(--nz-sky-pale); } body.nz section.alt::before, body.nz section.alt::after { content: ''; position: absolute; left: 0; right: 0; height: 40px; background: var(--nz-sky-pale); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40 C200 0 400 0 600 20 C800 40 1000 40 1200 8 L1200 40 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40 C200 0 400 0 600 20 C800 40 1000 40 1200 8 L1200 40 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; } body.nz section.alt::before { top: -39px; } body.nz section.alt::after { bottom: -39px; transform: scaleY(-1); z-index: 1; } /* ---------- category tiles ---------- */ body.nz .cat-card { border-radius: 28px; border: 6px solid #fff; box-shadow: var(--nz-blue)), 0 22px 40px rgba(0,87,224,.18); transition: transform .2s ease; } body.nz .cat-card:nth-child(1) { --tile: var(--nz-orange); } body.nz .cat-card:nth-child(2) { --tile: #F2B500; } body.nz .cat-card:nth-child(3) { --tile: var(--nz-blue); } body.nz .cat-card:nth-child(4) { --tile: var(--nz-mint); } body.nz .cat-card:nth-child(odd):hover { transform: translateY(-8px) rotate(-1.5deg); } body.nz .cat-card:nth-child(even):hover { transform: translateY(-8px) rotate(1.5deg); } body.nz .cat-card::before { background: linear-gradient(180deg, rgba(6,26,61,0) 45%, rgba(6,26,61,.8) 100%); } body.nz .cat-card-body h3 { color: #fff; font-size: 1.55rem; text-shadow: 0 2px 10px rgba(0,0,0,.3); } body.nz .cat-card-body span { display: inline-block; background: var(--tile); color: #fff; border-radius: 999px; padding: 3px 12px; font-size: .8rem; margin-bottom: 8px; width: fit-content; max-width: 100%; text-shadow: none; } /* ---------- feature cards ---------- */ body.nz .feature { border-radius: 28px; padding: 30px; text-align: center; border: 3px solid #fff; box-shadow: #CFE6FF), 0 20px 38px rgba(0,87,224,.12); } body.nz .feature-grid .feature:nth-child(1) { --f: #FFD9A8; --fb: #FFF1DC; } body.nz .feature-grid .feature:nth-child(2) { --f: #BFE0FF; --fb: #E6F3FF; } body.nz .feature-grid .feature:nth-child(3) { --f: #B8F0DA; --fb: #E4FBF2; } body.nz .feature .icon { width: 140px; height: 140px; margin: 0 auto 16px; border-radius: 50%; background: var(--fb, #E6F3FF); display: grid; place-items: center; } body.nz .feature h3 { font-size: 1.4rem; } @media (max-width: 760px) { body.nz .feature { text-align: left; } body.nz .feature .icon { width: 92px; height: 92px; } body.nz .feature .icon .mascot-icon { width: 76px; height: 76px; } } /* ---------- mascot strips ---------- */ body.nz .mascot-strip img { border-radius: 30px; border: 7px solid #fff; transform: rotate(-2deg); box-shadow: 0 22px 44px rgba(0,87,224,.16); } body.nz .mascot-strip > div:first-child + img { transform: rotate(2deg); } /* ---------- enquiry form ---------- */ body.nz .form-card { border-radius: 30px; border: 3px solid #fff; box-shadow: 0 24px 44px rgba(0,87,224,.14); } body.nz .field input, body.nz .field select, body.nz .field textarea { border-radius: 14px; border-color: #D6E8FF; } body.nz .field input:focus, body.nz .field select:focus, body.nz .field textarea:focus { border-color: var(--nz-blue); box-shadow: 0 0 0 4px rgba(30,136,255,.15); } /* ---------- get the app ---------- */ .nz-app { background: linear-gradient(135deg, var(--nz-blue-deep) 0%, var(--nz-blue) 55%, var(--nz-sky) 100%); color: #fff; overflow: hidden; } .nz-app-inner { display: grid; grid-template-columns: auto 1fr; gap: 48px; align-items: center; } .nz-app-icon { width: 180px; height: 180px; border-radius: 22%; object-fit: cover; box-shadow: 0 18px 40px rgba(0,30,100,.35); } body.nz .nz-app h2 { color: #fff; font-size: clamp(1.9rem, 3.4vw, 2.6rem); text-shadow: none; } .nz-app p { color: #E6F3FF; max-width: 52ch; font-size: 1.08rem; } .nz-stores { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 20px; } .nz-store { display: inline-flex; flex-direction: column; background: var(--nz-navy-deep); color: #fff; border-radius: 16px; padding: 9px 20px; line-height: 1.2; box-shadow: 0 8px 20px rgba(0,87,224,.14); } .nz-store small { font-size: .72rem; color: #A9C8F0; } .nz-store b { font-family: 'Baloo 2', sans-serif; font-size: 1.15rem; } @media (max-width: 760px) { .nz-app-inner { grid-template-columns: 1fr; gap: 24px; text-align: center; } .nz-app-icon { width: 120px; height: 120px; margin: 0 auto; } .nz-app p { margin: 0 auto; } .nz-stores { justify-content: center; } } /* ---------- host band, contact strip, footer ---------- */ body.nz .host-band { background: linear-gradient(135deg, #FFB21F 0%, var(--nz-orange) 60%, #FF6A00 100%); } body.nz .host-band .eyebrow { background: #fff; color: var(--nz-orange-lo); } body.nz .host-band h2 { color: #fff; text-shadow: none; } body.nz .host-band p { color: #FFF6E8; } body.nz .host-band .btn-primary { background: #fff; color: var(--nz-orange-lo); text-shadow: none; box-shadow: 0 8px 20px rgba(0,87,224,.14); } body.nz .host-band-link { color: #fff; } body.nz .contact-strip { background: var(--nz-blue); color: #E6F3FF; } body.nz .contact-links a:hover { color: var(--nz-sun); } body.nz footer.site-footer { background: var(--nz-navy-deep); } body.nz .footer-brand img { height: 52px; } body.nz .footer-grid a:hover { color: var(--nz-sun); } @media (prefers-reduced-motion: reduce) { .nz-cloud { animation: none; } body.nz .cat-card, body.nz .btn { transition: none; } } /* ===================================================================== Inner pages - same bright sky look as the homepage. ===================================================================== */ /* Page banners: photo with a blue sky wash instead of a dark overlay, and a wave. */ body.nz .page-banner { padding: 80px 0 110px; overflow: hidden; } body.nz .page-banner::before { background: linear-gradient(180deg, rgba(28,139,255,.55) 0%, rgba(0,87,224,.72) 100%); } body.nz .page-banner::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 70px; z-index: 1; background: var(--nz-page); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 70' preserveAspectRatio='none'%3E%3Cpath d='M0 40 C 220 0, 420 0, 620 30 C 820 60, 1020 60, 1200 20 L1200 70 L0 70 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 70' preserveAspectRatio='none'%3E%3Cpath d='M0 40 C 220 0, 420 0, 620 30 C 820 60, 1020 60, 1200 20 L1200 70 L0 70 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; } body.nz .page-banner h1, body.nz .page-banner h2 { color: #fff; font-size: clamp(2.2rem, 4.4vw, 3.4rem); text-shadow: 0 2px 18px rgba(6,26,61,.3); } body.nz .page-banner .eyebrow { background: var(--nz-sun) !important; color: var(--nz-navy) !important; box-shadow: none; } body.nz .page-banner p { color: #fff; } /* Stay and attraction cards */ body.nz .listing-card { border-radius: 26px; border: 4px solid #fff; box-shadow: 0 20px 38px rgba(0,87,224,.12); transition: transform .2s ease; } body.nz .listing-card:hover { transform: translateY(-5px); } body.nz .listing-card .thumb { border-radius: 20px 20px 0 0; } body.nz .listing-card .loc { color: var(--nz-blue-deep); } body.nz .listing-card h3 { color: var(--nz-navy); } body.nz .listing-card .price { color: var(--nz-orange-lo); font-family: 'Baloo 2', sans-serif; font-size: 1.3rem; } body.nz .badge { background: var(--nz-sky-pale); color: var(--nz-blue-deep); border-radius: 999px; } body.nz .empty-state { border-radius: 26px; } /* Stay page: photo and booking card */ body.nz .detail-gallery { border-radius: 28px; border: 6px solid #fff; box-shadow: 0 24px 44px rgba(0,87,224,.14); } body.nz .booking-card .form-card { border-top: 6px solid var(--nz-orange); } body.nz .booking-card h3 { font-size: 1.6rem; } /* Everyday cards (contact, account, payment) */ body.nz .card, body.nz .feature, body.nz .form-card { border-radius: 26px; } /* Payment and confirmation pages stay calm: no tilts or bounces. */ body.nz .mascot-hero { filter: drop-shadow(0 10px 18px rgba(0,87,224,.18)); } @media (max-width: 760px) { body.nz .page-banner { padding: 50px 0 80px; } body.nz .page-banner::after { height: 44px; } } /* Blue "Ready when you are" bar: centred, with each way to reach us as a tidy button. */ body.nz .contact-strip { padding: 44px 0; text-align: center; } body.nz .contact-strip .wrap { flex-direction: column; justify-content: center; gap: 20px; } body.nz .contact-strip strong { font-family: 'Baloo 2', sans-serif; font-size: 1.6rem !important; } body.nz .contact-links { justify-content: center; gap: 10px; font-size: 0; } body.nz .contact-links [data-contact="phone-list"] { display: contents; font-size: 0; } body.nz .contact-links a { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.16); border: 1.5px solid rgba(255,255,255,.45); color: #fff; font-size: .95rem; font-weight: 700; padding: 9px 16px; border-radius: 999px; text-decoration: none; white-space: nowrap; } body.nz .contact-links a:hover { background: #fff; color: var(--nz-blue-deep); } body.nz .contact-links [data-contact="whatsapp-href"] { background: #25D366; border-color: #25D366; } body.nz .contact-links [data-contact="whatsapp-href"]:hover { background: #1ebd5a; color: #fff; } /* Footer: the contact details live in the blue bar above, so three columns here. */ body.nz .footer-grid { grid-template-columns: 2fr 1fr 1fr; } @media (max-width: 780px) { body.nz .footer-grid { grid-template-columns: 1fr 1fr; } body.nz .footer-grid > div:first-child { grid-column: 1 / -1; } } .ph-label { font-weight: 600; opacity: .8; margin-right: 2px; } body.nz .contact-links .ph-label { font-size: .8rem; } /* Elsewhere (contact page cards) each labelled number on its own line. */ body.nz [data-contact="phone-list"] { font-size: 0; } body.nz [data-contact="phone-list"] a { display: block; font-size: 1rem; margin: 2px 0; } body.nz .contact-links [data-contact="phone-list"] a { display: inline-flex; font-size: .95rem; margin: 0; } /* "New to us?" trust list */ .nz-trust-list { list-style: none; padding: 0; margin: 0 auto; max-width: 980px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .nz-trust-list li { background: #fff; border-radius: 20px; padding: 18px 20px 18px 56px; position: relative; box-shadow: 0 8px 20px rgba(0,87,224,.10); line-height: 1.55; color: #14233F; } .nz-trust-list li::before { content: '✓'; position: absolute; left: 18px; top: 17px; width: 26px; height: 26px; border-radius: 50%; background: #3DD9A4; color: #fff; font-weight: 800; display: grid; place-items: center; font-size: .9rem; } .nz-trust-list b { display: block; color: var(--nz-navy, #0B2A5B); margin-bottom: 2px; } @media (max-width: 760px) { .nz-trust-list { grid-template-columns: 1fr; } } /* Host benefits on the orange band */ .nz-host-points { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 8px; } .nz-host-points li { color: #fff; font-weight: 600; padding-left: 28px; position: relative; } .nz-host-points li::before { content: '✓'; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; background: #fff; color: #E86400; font-size: .75rem; font-weight: 800; display: grid; place-items: center; }