/* ========================================================================== SITE-ENHANCE.CSS Replaces premium-polish.css. Link this ONE file last in , after variables.css / style.css / responsive.css and after @stack('styles'). Fixes: navbar mobile behavior, card text/badge overflow on small screens, shared page-header photo treatment, brand-consistent forms & package colors, and general premium polish. ========================================================================== */ :root { --pp-navy: var(--color-navy-900, #071C3F); --pp-royal: var(--color-royal, #0F52BA); --pp-gold: var(--color-gold, #F5B400); --pp-gold-dk: var(--color-gold-dark, #D99900); --pp-emerald: var(--color-emerald, #1F9D6B); --pp-red: var(--color-red, #D64545); --pp-mist: var(--color-mist, #F7F9FC); --pp-slate: var(--color-slate, #5B6B85); --pp-line: var(--color-line, #E2E8F3); --pp-ease: cubic-bezier(.16,1,.3,1); } /* ========================================================================== 1. NAVBAR — forced-responsive, with !important as a safety net regardless of what your base stylesheet currently does at these breakpoints ========================================================================== */ .navbar { transition: background .3s var(--pp-ease), padding .3s var(--pp-ease), box-shadow .3s var(--pp-ease); } .navbar.is-scrolled { box-shadow: 0 10px 40px -18px rgba(5,15,36,.55) !important; } .navbar .container-xl { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 1rem !important; flex-wrap: nowrap !important; } .brand { display: flex !important; align-items: center !important; gap: .7rem !important; min-width: 0; text-decoration: none !important; } /* Logo mark — explicit size on every axis so it can never collapse to 0×0 (which reads as "the logo doesn't show") regardless of what any other stylesheet does to .brand-mark elsewhere. */ .brand-mark { display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; width: 46px !important; height: 46px !important; overflow: visible !important; } .brand-mark img { width: 100% !important; height: 100% !important; object-fit: contain !important; display: block !important; } .brand:hover .brand-mark { transform: scale(1.06) rotate(-2deg); transition: transform .3s var(--pp-ease); } .brand-text { display: block !important; line-height: 1.15; color: #fff; font-weight: 700; white-space: nowrap; } .brand-text small { display: block; font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; opacity: .75; font-weight: 500; white-space: nowrap; } @media (max-width: 991px) { .nav-links { display: none !important; } /* Mobile: logo only, wordmark hidden — this is what makes room for the hamburger without crowding, and matches the "just logo" requirement */ .brand-text { display: none !important; } .brand-mark { width: 40px !important; height: 40px !important; } .nav-toggle { display: inline-flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 5px !important; width: 40px !important; height: 40px !important; min-width: 40px !important; background: none !important; border: none !important; padding: 0 !important; margin: 0 !important; cursor: pointer; position: relative; z-index: 1300; -webkit-appearance: none !important; appearance: none !important; } /* Every bar gets an explicit width/height/background — an unstyled button with empty s is exactly what lets a browser or icon font fall back to showing something unintended in its place. */ .nav-toggle span { display: block !important; width: 24px !important; height: 2px !important; background: #fff !important; border-radius: 2px !important; transition: transform .25s ease, opacity .25s ease; flex-shrink: 0; } .nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.is-active span:nth-child(2) { opacity: 0; } .nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .nav-cta { display: flex !important; align-items: center; gap: .6rem !important; flex-shrink: 0; } .nav-cta .btn-sm { padding: .55rem .9rem !important; font-size: .8rem !important; white-space: nowrap; } } @media (max-width: 480px) { .nav-cta .btn-sm { font-size: 0 !important; padding: .6rem !important; gap: 0 !important; } .nav-cta .btn-sm i { font-size: 1rem !important; } } .mobile-nav { position: fixed !important; inset: 0 !important; background: var(--grad-navy, linear-gradient(160deg,#050f24,#071C3F 45%,#0F52BA)) !important; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; gap: 1.6rem !important; transform: translateX(100%); transition: transform .4s var(--pp-ease) !important; z-index: 1200 !important; padding: 2rem !important; text-align: center; overflow-y: auto; } .mobile-nav.is-open { transform: translateX(0) !important; } .mobile-nav a { color: #fff !important; font-size: 1.3rem !important; font-weight: 700; } .mobile-nav a.active { color: var(--pp-gold) !important; } /* ========================================================================== 2. CARD OVERFLOW FIXES — the actual cause of text spilling out of cards on mobile: fixed-offset ribbon badges + missing word-break on flex/grid children whose parent doesn't allow them to shrink below content size. ========================================================================== */ .card-grid, .dest-grid, .story-grid, .home-dest-grid, .plan-grid, .doc-checklist, .card-grid > *, .dest-grid > *, .story-grid > *, .home-dest-grid > *, .plan-grid > * { min-width: 0; /* the single most common cause of grid-item text overflow */ } .service-card, .dest-card, .package-card, .plan-card, .story-card, .home-dest-card, .testimonial-card, .pricing-card, .gallery-card, .cdetail-stat, .doc-item { min-width: 0; overflow-wrap: break-word; word-break: break-word; } .service-card h4, .dest-card__name, .package-card h4, .plan-card__title, .story-card__name, .home-dest-card__overlay h4, .testimonial-card__quote, .plan-card__amount, .package-card__price { overflow-wrap: break-word; word-break: break-word; hyphens: auto; } /* Route/flag rows (dest-card, story-card, cdetail, plan-card meta) must wrap instead of forcing the card wider than its grid column */ .dest-card__route, .story-card__route, .cdetail-route, .plan-card__meta, .home-dest-card__route, .info-tab, .story-filter { flex-wrap: wrap; row-gap: .3rem; } /* Diagonal ribbon badges — fixed negative offsets (right:-34px etc.) are exactly what pushes content past the card's right edge on narrow cards. Card itself already has overflow:hidden in every case we've seen, so the ribbon clips correctly — but only once we stop it from being wider than its own icon/label at small sizes. */ .package-card__badge, .plan-card__tag, .service-card__badge { max-width: calc(100% + 68px); /* generous, but bounded instead of unbounded */ white-space: nowrap; } @media (max-width: 420px) { .package-card__badge { top: 10px; right: -30px; font-size: .6rem; padding: .25rem 2rem; } .plan-card__tag, .service-card__badge { font-size: .62rem; padding: .3rem 1rem; } } /* Long unbroken strings (emails, long option labels, filenames in file inputs) still shouldn't blow out a card or form column */ .form-control, .form-select, .field input, .field select, .field textarea, .dest-card__meta span, .package-card__desc, .story-card__quote, .plan-card__features li { min-width: 0; overflow-wrap: break-word; } /* ========================================================================== 3. PAGE-HEADER — shared photo treatment. Each page sets its own background-image inline on the
tag; this file only supplies the scrim, breadcrumb, and motion so every page looks consistent without needing a body-class mechanism. ========================================================================== */ .page-header { position: relative; isolation: isolate; overflow: hidden; min-height: 52vh; display: flex; align-items: center; padding-block: clamp(7rem, 14vw, 9rem) clamp(4.5rem, 8vw, 6rem) !important; background-color: var(--pp-navy); background-size: cover; background-position: center; } .page-header::before { content: ""; position: absolute; inset: 0; z-index: 0; background: inherit; background-size: cover; background-position: center; animation: pp-kenburns 18s ease-in-out infinite alternate; } .page-header::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(115deg, rgba(5,15,36,.95) 15%, rgba(7,28,63,.82) 45%, rgba(15,82,186,.5) 100%), radial-gradient(circle at 88% 12%, rgba(245,180,0,.14), transparent 55%); } @keyframes pp-kenburns { from { transform: scale(1); } to { transform: scale(1.1); } } @media (prefers-reduced-motion: reduce) { .page-header::before { animation: none; } } .page-header .container-xl { position: relative; z-index: 2; width: 100%; } .page-header .eyebrow { display: inline-flex; background: rgba(245,180,0,.14); border: 1px solid rgba(245,180,0,.35); padding: .45rem 1.1rem; border-radius: 99px; color: var(--pp-gold) !important; animation: pp-rise .7s var(--pp-ease) both; } .page-header h1 { color: #fff; font-size: clamp(2rem, 4.2vw, 2.9rem); text-shadow: 0 4px 30px rgba(0,0,0,.35); animation: pp-rise .7s var(--pp-ease) .1s both; overflow-wrap: break-word; } .page-header h1::after { content: ""; display: block; width: 56px; height: 3px; margin-top: 1.1rem; background: linear-gradient(90deg, var(--pp-gold), var(--pp-gold-dk)); border-radius: 2px; animation: pp-rise .7s var(--pp-ease) .22s both; } .page-header .eyebrow[style*="center"] ~ h1::after, .page-header p[style*="center"] + h1::after { margin-inline: auto; } .page-header .lede { color: rgba(255,255,255,.8); animation: pp-rise .7s var(--pp-ease) .16s both; } @keyframes pp-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .page-header .eyebrow, .page-header h1, .page-header h1::after, .page-header .lede { animation: none; } } .breadcrumb-row { display: inline-flex; align-items: center; gap: .6rem; flex-wrap: wrap; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); padding: .6rem 1.3rem; border-radius: 14px; backdrop-filter: blur(14px) saturate(160%); box-shadow: 0 20px 50px -18px rgba(0,0,0,.5); position: absolute; left: 50%; bottom: -1.4rem; transform: translateX(-50%); z-index: 4; font-size: .82rem; max-width: calc(100% - 2rem); } .breadcrumb-row a { color: rgba(255,255,255,.85); font-weight: 700; } .breadcrumb-row a:hover { color: var(--pp-gold); } .breadcrumb-row span:not(:last-child) { color: rgba(255,255,255,.35); } .breadcrumb-row span:last-child { color: var(--pp-gold); font-weight: 700; } .page-header + section { margin-top: 1.6rem; } @media (max-width: 768px) { .page-header { min-height: 44vh; } .breadcrumb-row { font-size: .74rem; padding: .5rem 1rem; text-align: center; justify-content: center; } } /* ========================================================================== 4. Buttons, cards, forms — brand consistency + motion (kept from the previous pass, unchanged in intent) ========================================================================== */ .btn { font-weight: 700; letter-spacing: .01em; transition: transform .28s var(--pp-ease), box-shadow .28s var(--pp-ease); } .btn-gold { background: linear-gradient(120deg, #FFD873 0%, var(--pp-gold) 55%, var(--pp-gold-dk) 100%); box-shadow: 0 10px 26px -10px rgba(245,180,0,.55); } .btn-gold:hover { transform: translateY(-3px); } .btn-royal { background: linear-gradient(135deg, var(--pp-royal) 0%, var(--pp-navy) 100%); box-shadow: 0 10px 26px -10px rgba(15,82,186,.5); } .btn-royal:hover { transform: translateY(-3px); } .service-card, .dest-card, .package-card, .gallery-card, .testimonial-card, .home-dest-card, .plan-card, .story-card { transition: transform .4s var(--pp-ease), box-shadow .4s var(--pp-ease); } .service-card:hover { transform: translateY(-8px); box-shadow: 0 24px 50px -20px rgba(7,28,63,.28); } .service-card__icon { transition: transform .35s var(--pp-ease), background .35s ease; } .service-card:hover .service-card__icon { transform: scale(1.08) rotate(-4deg); } /* Package-card off-brand color fix (teal/coral/amber → brand palette) */ .package-card--teal { --pkg-color: var(--pp-royal) !important; --pkg-tint: #eaf1fb !important; } .package-card--coral { --pkg-color: var(--pp-gold-dk) !important; --pkg-tint: #fff8e6 !important; } .package-card--amber { --pkg-color: var(--pp-emerald) !important; --pkg-tint: #e9f7f1 !important; } .package-card--royal { --pkg-color: var(--pp-navy) !important; --pkg-tint: #eef1f6 !important; } /* Brand-consistent form validation (was Bootstrap red/green) */ .form-control.is-invalid, .field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--pp-red) !important; box-shadow: 0 0 0 4px rgba(214,69,69,.1) !important; } .form-control.is-valid { border-color: var(--pp-emerald) !important; box-shadow: 0 0 0 4px rgba(31,157,107,.1) !important; } .error-text, .error-msg { color: var(--pp-red) !important; font-weight: 600; } .form-success, .form-alert--success { background: rgba(31,157,107,.08) !important; border-color: rgba(31,157,107,.25) !important; color: #0d6b45 !important; } .form-success i { color: var(--pp-emerald) !important; } .form-alert--error { background: rgba(214,69,69,.08) !important; border-color: rgba(214,69,69,.25) !important; color: #a33 !important; } .toast-success { background: var(--pp-emerald) !important; } .toast-error { background: var(--pp-red) !important; } @media (prefers-reduced-motion: reduce) { .service-card, .dest-card, .package-card, .gallery-card, .testimonial-card, .home-dest-card, .btn { transition: none !important; } }