/* ===================================================================== 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, var(--nz-orange-hi) 0%, #FF9D1C 42%, #FF7A00 100%); box-shadow: inset 0 2px 0 rgba(255,255,255,.6), inset 0 -3px 0 rgba(190,70,0,.28), 0 5px 0 var(--nz-orange-lo), 0 12px 22px rgba(255,122,0,.32); text-shadow: 0 1px 0 rgba(150,55,0,.35); } body.nz .btn-primary:hover { background: linear-gradient(180deg, #FFCD5E 0%, #FFA52B 42%, #FF8200 100%); transform: translateY(-2px); } body.nz .btn-primary:active { transform: translateY(3px); box-shadow: inset 0 2px 0 rgba(255,255,255,.5), 0 2px 0 var(--nz-orange-lo), 0 6px 12px rgba(255,122,0,.3); } body.nz .btn-secondary { background: #fff; color: var(--nz-blue-deep); border: 3px solid var(--nz-blue); box-shadow: 0 5px 0 #B9D8FF, 0 10px 20px rgba(0,87,224,.12); } body.nz .btn-secondary:hover { background: var(--nz-sky-pale); transform: translateY(-2px); } 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: 0 4px 0 #E0A800; } 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 5px 0 rgba(0,70,190,.35), 0 10px 20px rgba(0,60,170,.2); } body.nz .hero-media { border-radius: 30px; border: 8px solid #fff; transform: rotate(2.5deg); box-shadow: 0 10px 0 rgba(0,70,190,.25), 0 26px 50px rgba(6,26,61,.3); } 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 8px 0 #CFE6FF, 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: 0 8px 0 var(--tile, 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 0 rgba(0,0,0,.25); } 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: 0 1px 0 rgba(0,0,0,.2); } /* ---------- feature cards ---------- */ body.nz .feature { border-radius: 28px; padding: 30px; text-align: center; border: 3px solid #fff; box-shadow: 0 7px 0 var(--f, #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 9px 0 #CFE6FF, 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 8px 0 #CFE6FF, 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: 200px; height: 200px; border-radius: 46px; transform: rotate(-6deg); box-shadow: 0 12px 0 rgba(0,40,130,.35), 0 30px 50px rgba(0,30,100,.35); } body.nz .nz-app h2 { color: #fff; font-size: clamp(1.9rem, 3.4vw, 2.6rem); text-shadow: 0 3px 0 rgba(0,50,150,.4); } .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 5px 0 rgba(0,0,0,.3); } .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: 130px; height: 130px; border-radius: 30px; 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: 0 3px 0 rgba(170,60,0,.35); } 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 5px 0 rgba(170,60,0,.35), 0 12px 22px rgba(120,40,0,.2); } 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; } }