/* ================================================================ MENA Speakers — speakers.css v9 Popup styles are injected by JS directly into so themes cannot interfere. ================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600;700&family=Inter:wght@400;500;600&display=swap'); .menas-speakers-wrap { --mc-primary : #10153d; --mc-cyan : #00c8dc; --mc-glow : rgba(0,200,220,.4); --mc-ease : cubic-bezier(.4,0,.2,1); --mc-spring : cubic-bezier(.34,1.5,.64,1); } /* ══ GRID ═════════════════════════════════════════════════════ */ .menas-speakers-wrap .menas-grid { display: grid; gap: 20px; padding: 4px 0 36px; align-items: start; } .menas-speakers-wrap .menas-cols-1 { grid-template-columns: 1fr; max-width: 300px; margin: 0 auto; } .menas-speakers-wrap .menas-cols-2 { grid-template-columns: repeat(2,1fr); } .menas-speakers-wrap .menas-cols-3 { grid-template-columns: repeat(3,1fr); } .menas-speakers-wrap .menas-cols-4 { grid-template-columns: repeat(4,1fr); } @media (max-width: 1080px) { .menas-speakers-wrap .menas-cols-3, .menas-speakers-wrap .menas-cols-4 { grid-template-columns: repeat(2,1fr); } } @media (max-width: 580px) { .menas-speakers-wrap .menas-cols-2, .menas-speakers-wrap .menas-cols-3, .menas-speakers-wrap .menas-cols-4 { grid-template-columns: repeat(2,1fr); gap: 11px; } } @media (max-width: 380px) { .menas-speakers-wrap .menas-cols-2, .menas-speakers-wrap .menas-cols-3, .menas-speakers-wrap .menas-cols-4 { grid-template-columns: 1fr; } } /* ══ CARD ═════════════════════════════════════════════════════ */ .menas-speakers-wrap .menas-card { position: relative; border-radius: 16px; overflow: hidden; background: var(--mc-primary); aspect-ratio: 7 / 9; box-shadow: 0 4px 20px rgba(16,21,61,.2), 0 10px 32px rgba(16,21,61,.14); transition: transform .4s var(--mc-ease), box-shadow .4s var(--mc-ease); cursor: default; outline: none; -webkit-tap-highlight-color: transparent; } .menas-speakers-wrap .menas-card--popup { cursor: pointer; } .menas-speakers-wrap .menas-card--popup:hover { transform: translateY(-7px) scale(1.013); box-shadow: 0 10px 32px rgba(16,21,61,.28), 0 28px 56px rgba(16,21,61,.22); } .menas-speakers-wrap .menas-card--popup:focus-visible { box-shadow: 0 0 0 3px var(--mc-cyan); } @media (max-width: 580px) { .menas-speakers-wrap .menas-card { aspect-ratio: 6 / 10; } } /* ══ IMAGE ════════════════════════════════════════════════════ */ .menas-speakers-wrap .menas-card__img-wrap { position: absolute; inset: 0; } .menas-speakers-wrap .menas-card__img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: transform .6s var(--mc-ease); } .menas-speakers-wrap .menas-card--popup:hover .menas-card__img { transform: scale(1.06); } .menas-speakers-wrap .menas-card__img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg,#10153d 0%,#1e2860 100%); } .menas-speakers-wrap .menas-card__img-placeholder svg { width: 56px; opacity: .3; } /* ══ OVERLAY ══════════════════════════════════════════════════ */ .menas-speakers-wrap .menas-card__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, transparent 0%, transparent 30%, rgba(16,21,61,.22) 48%, rgba(16,21,61,.74) 66%, rgba(16,21,61,.96) 83%, rgba(16,21,61,1) 100%); } /* ══ FLAG — circular ══════════════════════════════════════════ */ .menas-speakers-wrap .menas-card__flag { position: absolute; top: 11px; right: 11px; z-index: 3; width: 34px; height: 34px; border-radius: 50%; border: 2px solid rgba(255,255,255,.8); overflow: hidden; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.35); display: flex; align-items: center; justify-content: center; transition: transform .3s var(--mc-spring); } .menas-speakers-wrap .menas-card--popup:hover .menas-card__flag { transform: scale(1.12); } /* flag img fills circle — override the width/height attrs */ .menas-speakers-wrap .menas-card__flag .menas-card-flag-img { width: auto !important; height: 120% !important; min-width: 120%; object-fit: cover; display: block; border-radius: 0; } /* ══ BODY ═════════════════════════════════════════════════════ */ .menas-speakers-wrap .menas-card__body { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; padding: 0 13px 13px; } .menas-speakers-wrap .menas-card__accent { width: 22px; height: 2px; background: var(--mc-cyan); border-radius: 2px; margin-bottom: 7px; transition: width .3s var(--mc-ease); } .menas-speakers-wrap .menas-card--popup:hover .menas-card__accent { width: 38px; } .menas-speakers-wrap .menas-card__name { font-family: 'Cormorant Garamond', Georgia, serif; font-size: clamp(.88rem,1.3vw + .3rem,1.12rem); font-weight: 700; color: #fff; margin: 0 0 3px; line-height: 1.2; text-shadow: 0 1px 8px rgba(0,0,0,.5); } .menas-speakers-wrap .menas-card__position { font-family: 'Inter', sans-serif; font-size: .63rem; font-weight: 600; color: var(--mc-cyan); text-transform: uppercase; letter-spacing: .08em; margin: 0 0 7px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .menas-speakers-wrap .menas-card__excerpt { font-family: 'Inter', sans-serif; font-size: .73rem; color: rgba(255,255,255,.68); line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-height: 0; opacity: 0; transition: max-height .38s var(--mc-ease), opacity .3s var(--mc-ease), margin .3s var(--mc-ease); } .menas-speakers-wrap .menas-card--popup:hover .menas-card__excerpt { max-height: 70px; opacity: 1; margin-bottom: 8px; } @media (max-width: 580px) { .menas-speakers-wrap .menas-card--popup:hover .menas-card__excerpt { max-height: 0; opacity: 0; margin-bottom: 0; } } /* ══ FOOTER ═══════════════════════════════════════════════════ */ /* Desktop: row — country left, button right */ .menas-speakers-wrap .menas-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 6px; } /* Mobile: column — country on top, button below, both full width */ @media (max-width: 580px) { .menas-speakers-wrap .menas-card__footer { flex-direction: column; align-items: stretch; gap: 5px; } .menas-speakers-wrap .menas-card__country { width: 100%; } .menas-speakers-wrap .menas-card__readmore { width: 100%; text-align: center; } } /* Country — text only (country is FIRST in DOM = appears first in col on mobile) */ .menas-speakers-wrap .menas-card__country { font-family: 'Inter', sans-serif; font-size: .67rem; color: rgba(255,255,255,.62); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .menas-speakers-wrap .menas-card__country img { display: none !important; } /* Read More — pointer-events:none, card handles click */ .menas-speakers-wrap .menas-card__readmore { font-family: 'Inter', sans-serif; font-size: .69rem; font-weight: 600; letter-spacing: .05em; color: var(--mc-primary); background: var(--mc-cyan); border: none; border-radius: 20px; padding: 6px 13px; box-shadow: 0 2px 10px var(--mc-glow); white-space: nowrap; pointer-events: none; display: inline-block; } .menas-no-speakers { font-family: 'Inter', sans-serif; color: #94a3b8; text-align: center; padding: 48px; }