/* ===================================================================== FLYLAND — REFERENCE-MATCH POLISH (icons + typography + animation detail) Loaded in LAST (after style/refinement/animations/mobile) so it wins. Pairs with assets/js/polish.js (stagger). Presentation only. Gold is driven by the existing --gold token (#EDB81A). ===================================================================== */ /* ---------- PART B: ICONS ---------- */ /* Badge card icon: wrap the Kaaba/cube in a SOLID GOLD FILLED CIRCLE with a dark icon centred (reference shows a filled amber disc, not a bare outline). */ .about-card-top svg { box-sizing: border-box; width: 72px; height: 72px; padding: 18px; background: var(--gold); border-radius: 50%; fill: #000; } /* Eyebrow star-and-crescent: nudge size to match reference (~30px) and keep gold. (Glyph itself fixed in includes/icons.php.) */ .eyebrow svg { width: 28px; height: 28px; flex: 0 0 28px; } /* ---------- PART C: TYPOGRAPHY ---------- */ /* Section headings: match reference letter-spacing (-3px @ desktop). Hero stays -4px (already matches). Accent words already render Playfair Display italic. */ @media (min-width: 1025px) { .sec-title { letter-spacing: -3px; } } /* The newly-accented partners heading uses the same serif-italic accent as the rest of the site (it already has .partners-title .accent styling). */ /* ---------- PART A: ANIMATION DETAIL ---------- */ /* JKit's subtler entrance (30px rise) for eyebrow labels, as the reference does on its small heading labels. Headings keep Elementor's fadeInUp (100%). */ @keyframes jkitFadeInUp { 0% { opacity: 0; transform: translate3d(0, 30px, 0); } 100% { opacity: 1; transform: none; } } .eyebrow.reveal.fadeInUp.animated { animation-name: jkitFadeInUp; } /* Directional reveals on two-column / image+text rows (reference uses fadeInLeft on the left column, fadeInRight on the right column). animations.js already does .about-left/.about-right; extend to the other paired rows here by overriding the animation-name (polish.css loads after animations.css). */ .testi-card.reveal.fadeInUp.animated, .detail-pricecard.reveal.fadeInUp.animated { animation-name: fadeInLeft; } .about-img.reveal.fadeInUp.animated, .testi-right.reveal.fadeInUp.animated, .detail-right.reveal.fadeInUp.animated { animation-name: fadeInRight; } /* prefers-reduced-motion already neutralised by animations.css; jkitFadeInUp is covered there too via the .reveal reset. */ /* ---------- MOBILE TYPE PARITY ---------- */ @media (max-width: 767px) { .eyebrow { font-size: 16px; } /* reference mobile eyebrow = 16px */ .eyebrow svg { width: 24px; height: 24px; flex: 0 0 24px; } .about-card-top svg { width: 62px; height: 62px; padding: 15px; } }