/* * ═══════════════════════════════════════════════════════════════ * highlight2_fj26.css * "#highlight2" — a second, hexagon-mosaic take on the Program & * Highlight content (same 8 activities as #highlight), styled after * a "hexagon campaign banner" layout: bold left-side copy + a * honeycomb of hexagon tiles on the right, dot-grid + outline-hex * decoration, tone kept in the FJ26 electric-blue-nebula palette. * * Reuses --fj26-* tokens (color_fj26_override.css) and the shared * .fj26-eyebrow / .fj26-grad-text / .fj26-more-btn components * (about_fesyar_fj26.css). Loaded LAST in so nothing existing * needs to change. Pairs with /asset_easy/js_town/highlight2_fj26.js * for the scroll-reveal stagger (fully visible with no JS). * ═══════════════════════════════════════════════════════════════ */ #highlight2{ position:relative; overflow:hidden; background: radial-gradient(ellipse 60% 60% at 90% 20%, rgba(30,111,255,0.16), transparent 60%), radial-gradient(ellipse 55% 55% at 10% 85%, rgba(23,201,148,0.12), transparent 60%) !important; } .fj26-hex-section-row{ display:flex; flex-wrap:wrap; align-items:center; } /* ══════════════════════════════════════════════════════ LEFT: bold campaign-style copy ══════════════════════════════════════════════════════ */ .fj26-hex-textcol{ text-align:left; padding:20px 10px; position:relative; z-index:2; } .fj26-hex-title{ font-family:'Exo', sans-serif; font-weight:900; color:var(--fj26-white,#F3F7FF) !important; font-size:clamp(1.9rem, 3.6vw, 2.8rem); line-height:1.16; letter-spacing:0.01em; margin:18px 0 18px; text-transform:uppercase; } .fj26-hex-desc{ color:var(--fj26-muted,rgba(230,240,255,0.68)) !important; font-size:15.5px !important; line-height:1.75 !important; text-align:left !important; margin:0 0 28px !important; font-weight:400 !important; max-width:420px; } /* ══════════════════════════════════════════════════════ RIGHT: hexagon honeycomb + decoration ══════════════════════════════════════════════════════ */ .fj26-hex-visualcol{ position:relative; min-height:420px; display:flex; align-items:center; justify-content:center; padding:40px 10px; } /* dot-grid accents */ .fj26-hex-dots{ position:absolute; width:96px; height:78px; background-image:radial-gradient(rgba(53,225,255,0.4) 1.6px, transparent 1.6px); background-size:14px 14px; opacity:.55; pointer-events:none; z-index:1; } .fj26-hex-dots-a{ top:6px; left:6px; } .fj26-hex-dots-b{ bottom:6px; right:10px; } /* large outline hexagons floating in the background */ .fj26-hex-deco{ position:absolute; clip-path:polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%); border:2px solid rgba(53,225,255,0.18); pointer-events:none; z-index:0; } .fj26-hex-deco-a{ width:150px; height:130px; top:-24px; right:60px; border-color:rgba(30,111,255,0.28); animation:fj26HexDecoFloat 12s ease-in-out infinite; } .fj26-hex-deco-b{ width:110px; height:96px; bottom:-10px; left:20px; border-color:rgba(23,201,148,0.28); animation:fj26HexDecoFloat 15s ease-in-out infinite reverse; } .fj26-hex-deco-c{ width:70px; height:60px; top:40%; right:-10px; border-color:rgba(53,225,255,0.3); animation:fj26HexDecoFloat 9s ease-in-out infinite; } @keyframes fj26HexDecoFloat{ 0%, 100%{ transform:translate(0,0) rotate(0deg); } 50%{ transform:translate(8px,-10px) rotate(6deg); } } /* ── the honeycomb itself: two offset rows of 4 hexagons ── */ .fj26-hex-wrap{ position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; } .fj26-hex-row{ display:flex; gap:14px; } .fj26-hex-row-b{ margin-top:-36px; margin-left:86px; } /* border-ring trick: outer element = gradient hexagon, inner = navy hexagon inset by padding */ .fj26-hex{ --hex-glow: var(--fj26-cyan,#35E1FF); --hex-glow-mult: 1; display:block; width:158px; height:138px; clip-path:polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%); background:linear-gradient(135deg, var(--fj26-blue,#1E6FFF), var(--fj26-cyan,#35E1FF)); padding:2.5px; text-decoration:none !important; cursor:pointer; transition:transform .35s cubic-bezier(.34,1.56,.64,1), --hex-glow-mult .35s ease; animation:fj26HexNeonBreathe 3.6s ease-in-out infinite; } .fj26-hex-row-a > .fj26-hex:nth-child(2), .fj26-hex-row-b > .fj26-hex:nth-child(2){ --hex-glow: var(--fj26-green,#17C994); background:linear-gradient(135deg, var(--fj26-cyan,#35E1FF), var(--fj26-green,#17C994)); } .fj26-hex-row-a > .fj26-hex:nth-child(3), .fj26-hex-row-b > .fj26-hex:nth-child(3){ --hex-glow: var(--fj26-blue,#1E6FFF); background:linear-gradient(135deg, var(--fj26-green,#17C994), var(--fj26-blue,#1E6FFF)); } .fj26-hex-row-a > .fj26-hex:nth-child(4), .fj26-hex-row-b > .fj26-hex:nth-child(4){ --hex-glow: var(--fj26-green,#17C994); background:linear-gradient(135deg, var(--fj26-blue,#1E6FFF), var(--fj26-green,#17C994)); } .fj26-hex-row-a > .fj26-hex:nth-child(1), .fj26-hex-row-b > .fj26-hex:nth-child(1){ animation-delay:0s; } .fj26-hex-row-a > .fj26-hex:nth-child(2), .fj26-hex-row-b > .fj26-hex:nth-child(2){ animation-delay:.6s; } .fj26-hex-row-a > .fj26-hex:nth-child(3), .fj26-hex-row-b > .fj26-hex:nth-child(3){ animation-delay:1.2s; } .fj26-hex-row-a > .fj26-hex:nth-child(4), .fj26-hex-row-b > .fj26-hex:nth-child(4){ animation-delay:1.8s; } @property --hex-glow-mult{ syntax:''; inherits:true; initial-value:1; } @keyframes fj26HexNeonBreathe{ 0%, 100%{ filter:drop-shadow(0 6px 14px rgba(0,0,0,0.35)) drop-shadow(0 0 calc(4px * var(--hex-glow-mult)) var(--hex-glow)); } 50%{ filter:drop-shadow(0 6px 14px rgba(0,0,0,0.35)) drop-shadow(0 0 calc(13px * var(--hex-glow-mult)) var(--hex-glow)); } } /* "arcade card" background: dark glass + faint circuit rings + a soft glow wash pulled from the hex's own accent color */ .fj26-hex-inner{ width:100%; height:100%; clip-path:polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0% 50%); background: repeating-radial-gradient(circle at 82% 18%, rgba(255,255,255,0.09) 0px, rgba(255,255,255,0.09) 1px, transparent 1px, transparent 7px), radial-gradient(ellipse 90% 70% at 50% 15%, color-mix(in srgb, var(--hex-glow) 30%, transparent), transparent 70%), linear-gradient(160deg, #0A1442 0%, #0A2A5E 100%); background-repeat:no-repeat, no-repeat, no-repeat; opacity:0.97; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:14px 16px; text-align:center; transition:background .35s ease; } .fj26-hex-icon{ display:flex; align-items:center; justify-content:center; color:var(--hex-glow); filter:drop-shadow(0 0 6px var(--hex-glow)); transition:transform .4s cubic-bezier(.34,1.56,.64,1), color .35s ease, filter .35s ease; } .fj26-hex-icon svg{ width:26px; height:26px; } .fj26-hex-label{ font-family:'Exo', sans-serif; font-weight:700; font-size:12.5px; line-height:1.3; color:var(--fj26-white,#F3F7FF); letter-spacing:0.01em; } .fj26-hex:hover{ --hex-glow-mult:1.7; transform:translateY(-4px) scale(1.32); z-index:10; } .fj26-hex:hover .fj26-hex-inner{ opacity:1; } .fj26-hex:hover .fj26-hex-icon{ transform:scale(1.15) rotate(-6deg); filter:drop-shadow(0 0 12px var(--hex-glow)); } /* ══════════════════════════════════════════════════════ SCROLL-REVEAL (progressive enhancement) ══════════════════════════════════════════════════════ */ .fj26-hex-textcol.fj26-hex-reveal-init{ opacity:0; transform:translateX(-20px); } .fj26-hex-textcol.fj26-hex-inview{ animation:fj26HexTextRise .7s ease both; } @keyframes fj26HexTextRise{ from{ opacity:0; transform:translateX(-20px); } to{ opacity:1; transform:translateX(0); } } .fj26-hex-wrap.fj26-hex-reveal-init .fj26-hex{ opacity:0; transform:scale(.6); } .fj26-hex-wrap.fj26-hex-inview .fj26-hex{ /* "backwards" only (not "both"): shows the 0% state during the stagger delay, but releases transform/opacity back to normal once the pop-in finishes, so the later :hover scale isn't permanently pinned by this animation's end state. */ animation:fj26HexPop .5s cubic-bezier(.34,1.56,.64,1) backwards; } .fj26-hex-row-a .fj26-hex:nth-child(1){ animation-delay:.05s; } .fj26-hex-row-a .fj26-hex:nth-child(2){ animation-delay:.12s; } .fj26-hex-row-a .fj26-hex:nth-child(3){ animation-delay:.19s; } .fj26-hex-row-a .fj26-hex:nth-child(4){ animation-delay:.26s; } .fj26-hex-row-b .fj26-hex:nth-child(1){ animation-delay:.16s; } .fj26-hex-row-b .fj26-hex:nth-child(2){ animation-delay:.23s; } .fj26-hex-row-b .fj26-hex:nth-child(3){ animation-delay:.3s; } .fj26-hex-row-b .fj26-hex:nth-child(4){ animation-delay:.37s; } @keyframes fj26HexPop{ from{ opacity:0; transform:scale(.6); } to{ opacity:1; transform:scale(1); } } /* ══════════════════════════════════════════════════════ RESPONSIVE ══════════════════════════════════════════════════════ */ @media (max-width:991px){ .fj26-hex-textcol{ text-align:center; padding:10px 15px 20px; } .fj26-hex-desc{ margin-left:auto !important; margin-right:auto !important; text-align:center !important; } } @media (max-width:767px){ .fj26-hex-visualcol{ min-height:0; padding:30px 10px 10px; } .fj26-hex-wrap{ flex-direction:row; flex-wrap:wrap; justify-content:center; gap:14px; max-width:420px; margin:0 auto; } .fj26-hex-row{ display:contents; } .fj26-hex-row-b{ margin-top:0; margin-left:0; } .fj26-hex{ width:130px; height:114px; } .fj26-hex-icon svg{ width:22px; height:22px; } .fj26-hex-label{ font-size:11px; } .fj26-hex-deco, .fj26-hex-dots{ display:none; } } @media (prefers-reduced-motion: reduce){ .fj26-hex-deco{ animation:none !important; } .fj26-hex{ animation:none !important; filter:drop-shadow(0 6px 14px rgba(0,0,0,0.35)) drop-shadow(0 0 4px var(--hex-glow)) !important; } .fj26-hex, .fj26-hex-icon{ transition:none !important; } .fj26-hex-textcol.fj26-hex-inview, .fj26-hex-wrap.fj26-hex-inview .fj26-hex{ animation:none !important; } .fj26-hex-textcol.fj26-hex-reveal-init{ opacity:1 !important; transform:none !important; } .fj26-hex-wrap.fj26-hex-reveal-init .fj26-hex{ opacity:1 !important; transform:none !important; } }