/* ========================================================= SEA LICENSING — HONDURAS HERO FINAL VISUAL BALANCE ========================================================= */ /* ========================================================= HERO CANVAS ========================================================= */ .hnd2 .hnd2-hero.sl-honduras-hero-final{ position:relative !important; overflow:hidden !important; isolation:isolate !important; min-height:540px !important; background: url('/assets/images/flags/featured/honduras-hero-premium.webp') 50% center / cover no-repeat !important; } /* old nested image layer is not needed */ .hnd2 .hnd2-hero.sl-honduras-hero-final > .hnd2-hero-bg{ display:none !important; } /* ========================================================= SUBTLE LEFT READABILITY WASH Narrower and much weaker than before. ========================================================= */ .hnd2 .hnd2-hero.sl-honduras-hero-final::before{ content:"" !important; position:absolute !important; inset:0 !important; z-index:1 !important; pointer-events:none !important; background: linear-gradient( 90deg, rgba(249,253,255,.72) 0%, rgba(249,253,255,.62) 13%, rgba(246,251,254,.45) 24%, rgba(243,249,252,.23) 35%, rgba(241,248,252,.07) 44%, transparent 53% ) !important; } /* absolutely no second overlay */ .hnd2 .hnd2-hero.sl-honduras-hero-final::after{ content:none !important; display:none !important; } /* ========================================================= MAIN HERO GRID ========================================================= */ .hnd2 .hnd2-hero.sl-honduras-hero-final .hnd2-hero-inner{ position:relative !important; z-index:2 !important; min-height:540px !important; display:grid !important; grid-template-columns: minmax(0,1fr) 385px !important; gap:54px !important; align-items:center !important; } /* ========================================================= LEFT COPY ========================================================= */ .hnd2 .hnd2-hero.sl-honduras-hero-final .hnd2-hero-copy{ position:relative !important; z-index:3 !important; max-width:720px !important; } /* flag + kicker */ .hnd2 .hnd2-hero.sl-honduras-hero-final .hnd2-flagline{ margin-bottom:23px !important; } .hnd2 .hnd2-hero.sl-honduras-hero-final .hnd2-flagline img{ box-shadow: 0 8px 19px rgba(8,75,106,.13) !important; } .hnd2 .hnd2-hero.sl-honduras-hero-final .hnd2-flagline .hnd2-kicker{ color:#289dc6 !important; font-size:9px !important; font-weight:900 !important; letter-spacing:.14em !important; opacity:1 !important; } /* ========================================================= HEADLINE The previous version was too dominant. ========================================================= */ .hnd2 .hnd2-hero.sl-honduras-hero-final h1{ max-width:700px !important; margin:0 !important; color:#082d43 !important; font-size: clamp(48px,4.25vw,68px) !important; line-height:.99 !important; letter-spacing:-.045em !important; text-shadow:none !important; } .hnd2 .hnd2-hero.sl-honduras-hero-final h1 span{ color:inherit !important; } /* ========================================================= DESCRIPTION More readable and better proportioned. ========================================================= */ .hnd2 .hnd2-hero.sl-honduras-hero-final .hnd2-hero-copy > p{ max-width:650px !important; margin: 25px 0 0 !important; color:#34596b !important; font-size:13.5px !important; line-height:1.72 !important; font-weight:500 !important; opacity:1 !important; text-shadow:none !important; } /* ========================================================= CTA ROW ========================================================= */ .hnd2 .hnd2-hero.sl-honduras-hero-final .hnd2-actions{ display:flex !important; align-items:center !important; gap:12px !important; margin-top:28px !important; } /* PRIMARY */ .hnd2 .hnd2-hero.sl-honduras-hero-final .hnd2-btn.primary{ min-height:48px !important; padding: 0 20px !important; border: 1px solid #159dcc !important; border-radius:6px !important; color:#ffffff !important; background: linear-gradient( 135deg, #1599ca, #42bade ) !important; box-shadow: 0 10px 22px rgba(5,110,153,.18) !important; text-decoration:none !important; transition: transform .30s cubic-bezier(.22,1,.36,1), box-shadow .30s ease, background .28s ease !important; } .hnd2 .hnd2-hero.sl-honduras-hero-final .hnd2-btn.primary:hover{ transform: translateY(-3px) !important; background: linear-gradient( 135deg, #087fae, #21b5da ) !important; box-shadow: 0 15px 29px rgba(5,111,153,.23) !important; } /* SECONDARY */ .hnd2 .hnd2-hero.sl-honduras-hero-final .hnd2-btn.ghost{ min-height:48px !important; padding: 0 20px !important; border: 1px solid rgba(9,79,108,.32) !important; border-radius:6px !important; color:#0a4a65 !important; background: rgba(255,255,255,.82) !important; box-shadow: 0 8px 18px rgba(6,69,96,.06) !important; text-decoration:none !important; backdrop-filter: blur(7px) !important; -webkit-backdrop-filter: blur(7px) !important; transition: transform .30s cubic-bezier(.22,1,.36,1), box-shadow .30s ease, border-color .28s ease, background .28s ease !important; } .hnd2 .hnd2-hero.sl-honduras-hero-final .hnd2-btn.ghost:hover{ transform: translateY(-3px) !important; border-color:#159dcc !important; background:#ffffff !important; box-shadow: 0 14px 27px rgba(6,82,111,.13) !important; } /* ========================================================= PATHWAY PANEL Softer than previous almost-black block. ========================================================= */ .hnd2 .hnd2-hero.sl-honduras-hero-final .hnd2-paths{ position:relative !important; z-index:4 !important; width:100% !important; padding: 25px 26px !important; border: 1px solid rgba(118,210,230,.20) !important; border-radius:10px !important; background: linear-gradient( 145deg, rgba(6,48,70,.91), rgba(9,78,101,.87) ) !important; box-shadow: 0 20px 46px rgba(3,36,54,.18) !important; backdrop-filter: blur(8px) !important; -webkit-backdrop-filter: blur(8px) !important; } .hnd2 .hnd2-hero.sl-honduras-hero-final .hnd2-paths > .hnd2-kicker{ color:#70ddf2 !important; } .hnd2 .hnd2-hero.sl-honduras-hero-final .hnd2-paths h2{ margin-top:9px !important; color:#ffffff !important; font-size:24px !important; line-height:1.15 !important; } /* pathway rows */ .hnd2 .hnd2-hero.sl-honduras-hero-final .hnd2-path{ transition: background .28s ease, padding-left .28s ease, border-color .28s ease !important; } .hnd2 .hnd2-hero.sl-honduras-hero-final .hnd2-path:hover{ padding-left:11px !important; background: rgba(255,255,255,.045) !important; } /* ========================================================= TABLET ========================================================= */ @media(max-width:1100px){ .hnd2 .hnd2-hero.sl-honduras-hero-final .hnd2-hero-inner{ grid-template-columns: minmax(0,1fr) 350px !important; gap: 32px !important; } } /* ========================================================= MOBILE ========================================================= */ @media(max-width:800px){ .hnd2 .hnd2-hero.sl-honduras-hero-final{ background-position: 62% center !important; } .hnd2 .hnd2-hero.sl-honduras-hero-final::before{ background: linear-gradient( 90deg, rgba(249,253,255,.86), rgba(249,253,255,.70) 60%, rgba(249,253,255,.28) ) !important; } .hnd2 .hnd2-hero.sl-honduras-hero-final .hnd2-hero-inner{ grid-template-columns: 1fr !important; gap: 30px !important; } .hnd2 .hnd2-hero.sl-honduras-hero-final .hnd2-paths{ max-width:none !important; } } /* ========================================================= HONDURAS HERO — CONTINUOUS KEN BURNS BACKGROUND Photograph moves. Content remains completely stationary. ========================================================= */ /* parent keeps overflow hidden */ .hnd2 .hnd2-hero.sl-honduras-hero-final{ position:relative !important; overflow:hidden !important; /* animated image now comes from .hnd2-hero-bg */ background:#eaf4f8 !important; } /* ========================================================= ANIMATED PHOTOGRAPH LAYER ========================================================= */ .hnd2 .hnd2-hero.sl-honduras-hero-final > .hnd2-hero-bg{ display:block !important; position:absolute !important; /* Slight overscan prevents edges appearing while zooming / panning. */ inset:-5% !important; z-index:0 !important; pointer-events:none !important; background-image: url('/assets/images/flags/featured/honduras-hero-premium.webp') !important; background-repeat:no-repeat !important; background-size:cover !important; background-position:center center !important; transform-origin:center center !important; will-change:transform !important; animation: hondurasHeroKenBurns 24s ease-in-out infinite alternate !important; } /* ========================================================= KEN BURNS MOTION Slow zoom + very subtle horizontal / vertical movement. ========================================================= */ @keyframes hondurasHeroKenBurns{ 0%{ transform: scale(1.02) translate3d(0%,0%,0); } 35%{ transform: scale(1.055) translate3d(-.7%,-.25%,0); } 70%{ transform: scale(1.085) translate3d(-1.35%,-.55%,0); } 100%{ transform: scale(1.105) translate3d(-1.8%,-.75%,0); } } /* ========================================================= LEFT READABILITY GRADIENT REMAINS ABOVE PHOTO ========================================================= */ .hnd2 .hnd2-hero.sl-honduras-hero-final::before{ z-index:1 !important; } /* ========================================================= ALL REAL HERO CONTENT ABOVE MOVING IMAGE ========================================================= */ .hnd2 .hnd2-hero.sl-honduras-hero-final .hnd2-hero-inner{ position:relative !important; z-index:2 !important; } .hnd2 .hnd2-hero.sl-honduras-hero-final .hnd2-hero-copy{ position:relative !important; z-index:3 !important; } .hnd2 .hnd2-hero.sl-honduras-hero-final .hnd2-paths{ position:relative !important; z-index:4 !important; } /* ========================================================= MOBILE — slightly gentler movement ========================================================= */ @media(max-width:700px){ .hnd2 .hnd2-hero.sl-honduras-hero-final > .hnd2-hero-bg{ animation-duration:28s !important; } } /* ========================================================= ACCESSIBILITY Stop continuous animation when user requests reduced motion. ========================================================= */ @media(prefers-reduced-motion:reduce){ .hnd2 .hnd2-hero.sl-honduras-hero-final > .hnd2-hero-bg{ animation:none !important; transform:scale(1.04) !important; } } /* ========================================================= HONDURAS HERO — FINAL PHOTO SHADE Keeps Ken Burns motion + reduces excessive brightness ========================================================= */ .hnd2 .hnd2-hero.sl-honduras-hero-final > .hnd2-hero-bg{ background-image: linear-gradient( 90deg, rgba(5,20,31,.18) 0%, rgba(5,20,31,.15) 22%, rgba(5,20,31,.13) 45%, rgba(5,20,31,.15) 68%, rgba(5,20,31,.20) 100% ), url('/assets/images/flags/featured/honduras-hero-premium.webp') !important; background-size: cover !important; background-repeat: no-repeat !important; background-position: center center !important; } /* --------------------------------------------------------- Softer left readability wash The image remains visible rather than becoming white. --------------------------------------------------------- */ .hnd2 .hnd2-hero.sl-honduras-hero-final::before{ content:"" !important; position:absolute !important; inset:0 !important; z-index:1 !important; display:block !important; pointer-events:none !important; background: linear-gradient( 90deg, rgba(255,255,255,.70) 0%, rgba(255,255,255,.60) 14%, rgba(250,253,255,.43) 27%, rgba(246,251,254,.23) 39%, rgba(242,249,252,.08) 49%, rgba(242,249,252,0) 58% ) !important; } /* no second overlay */ .hnd2 .hnd2-hero.sl-honduras-hero-final::after{ content:none !important; display:none !important; } /* --------------------------------------------------------- Ensure content stays above moving photograph + shade --------------------------------------------------------- */ .hnd2 .hnd2-hero.sl-honduras-hero-final .hnd2-hero-inner{ position:relative !important; z-index:2 !important; } .hnd2 .hnd2-hero.sl-honduras-hero-final .hnd2-hero-copy{ position:relative !important; z-index:3 !important; } .hnd2 .hnd2-hero.sl-honduras-hero-final .hnd2-paths{ position:relative !important; z-index:4 !important; } /* --------------------------------------------------------- Text contrast refinement --------------------------------------------------------- */ .hnd2 .hnd2-hero.sl-honduras-hero-final h1{ color:#072d43 !important; text-shadow:none !important; } .hnd2 .hnd2-hero.sl-honduras-hero-final .hnd2-hero-copy > p{ color:#31576a !important; opacity:1 !important; } /* --------------------------------------------------------- Mobile --------------------------------------------------------- */ @media(max-width:700px){ .hnd2 .hnd2-hero.sl-honduras-hero-final::before{ background: linear-gradient( 90deg, rgba(255,255,255,.80) 0%, rgba(255,255,255,.66) 48%, rgba(255,255,255,.20) 100% ) !important; } }