/* ================================================================ MENA Speakers — speakers.css v10 Popup styles are injected by JS directly into ================================================================ */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Inter:wght@400;500;600;700&display=swap'); .menas-speakers-wrap { --mc-dark : #0d1117; --mc-navy : #141a2e; --mc-gold : #c9a84c; --mc-gold-lt : #e8c96e; --mc-gold-glow: rgba(201,168,76,.25); --mc-text : #ffffff; --mc-muted : rgba(255,255,255,.55); --mc-ease : cubic-bezier(.4,0,.2,1); --mc-spring : cubic-bezier(.34,1.5,.64,1); } /* ══ CATEGORY SECTION ════════════════════════════════════════════ */ .menas-category-section { margin-bottom: 48px; } .menas-category-section:last-child { margin-bottom: 0; } .menas-category-section[hidden], .menas-category-section--empty { display: none !important; } .menas-category-heading { font-family: 'Inter', sans-serif; font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--mc-gold); margin: 0 0 20px; display: flex; align-items: center; gap: 12px; } .menas-category-heading::after { content: ''; flex: 1; height: 1px; background: linear-gradient(to right, rgba(201,168,76,.3), transparent); } /* ══ GRID ════════════════════════════════════════════════════════ */ .menas-speakers-wrap .menas-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 22px; padding: 4px 0 8px; align-items: start; } /* Card width is driven by --menas-cols set per grid class */ .menas-speakers-wrap .menas-cols-1 .menas-card { width: 100%; max-width: 280px; } .menas-speakers-wrap .menas-cols-2 .menas-card { width: calc((100% - 22px) / 2); } .menas-speakers-wrap .menas-cols-3 .menas-card { width: calc((100% - 44px) / 3); } .menas-speakers-wrap .menas-cols-4 .menas-card { width: calc((100% - 66px) / 4); } @media (max-width: 1080px) { .menas-speakers-wrap .menas-cols-3 .menas-card, .menas-speakers-wrap .menas-cols-4 .menas-card { width: calc((100% - 22px) / 2); } } @media (max-width: 580px) { .menas-speakers-wrap .menas-cols-2 .menas-card, .menas-speakers-wrap .menas-cols-3 .menas-card, .menas-speakers-wrap .menas-cols-4 .menas-card { width: calc((100% - 12px) / 2); } .menas-speakers-wrap .menas-grid { gap: 12px; } } @media (max-width: 380px) { .menas-speakers-wrap .menas-cols-2 .menas-card, .menas-speakers-wrap .menas-cols-3 .menas-card, .menas-speakers-wrap .menas-cols-4 .menas-card { width: 100%; } } /* ══ CARD ════════════════════════════════════════════════════════ */ .menas-speakers-wrap .menas-card { position: relative; border-radius: 4px; overflow: hidden; background: var(--mc-navy); aspect-ratio: 3 / 4; /* Thin gold top border — the signature element */ border-top: 2px solid var(--mc-gold); box-shadow: 0 2px 12px rgba(0,0,0,.35), 0 8px 28px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.04); transition: transform .38s var(--mc-ease), box-shadow .38s 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(-6px); box-shadow: 0 4px 20px rgba(0,0,0,.45), 0 18px 44px rgba(0,0,0,.35), 0 0 0 1px rgba(201,168,76,.3), inset 0 0 0 1px rgba(255,255,255,.06); } .menas-speakers-wrap .menas-card--popup:focus-visible { box-shadow: 0 0 0 3px var(--mc-gold); } @media (max-width: 580px) { .menas-speakers-wrap .menas-card { aspect-ratio: 2 / 3; } } /* ══ 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 .65s var(--mc-ease); /* Slight desaturation by default — color blooms on hover */ filter: saturate(.85) brightness(.92); /* Per-speaker zoom set inline via --menas-img-scale (admin resize slider) */ scale: var(--menas-img-scale, 1); } .menas-speakers-wrap .menas-card--popup:hover .menas-card__img { filter: saturate(1) brightness(.95); } .menas-speakers-wrap .menas-card__img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, #141a2e 0%, #1e2848 100%); } .menas-speakers-wrap .menas-card__img-placeholder svg { width: 52px; opacity: .2; } /* ══ OVERLAY ═════════════════════════════════════════════════════ */ .menas-speakers-wrap .menas-card__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient( to bottom, transparent 0%, transparent 28%, rgba(13,17,23,.15) 45%, rgba(13,17,23,.72) 65%, rgba(13,17,23,.97) 82%, rgba(13,17,23,1) 100% ); } /* ══ FLAG — bottom-right corner ════════════════════════════════ */ .menas-speakers-wrap .menas-card__flag { position: absolute; bottom: 16px; right: 16px; z-index: 3; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 38px; height: 26px; border-radius: 4px; border: 1.5px solid rgba(201,168,76,.6); overflow: hidden; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.5); transition: transform .3s var(--mc-spring), border-color .3s; } .menas-speakers-wrap .menas-card--popup:hover .menas-card__flag { transform: scale(1.1); border-color: var(--mc-gold); } .menas-speakers-wrap .menas-card__flag .menas-card-flag-img { width: 100% !important; height: 100% !important; min-width: 100%; max-width: none; object-fit: cover; object-position: center center; display: block; border-radius: 0; position: static; transform: none; } /* ══ BODY ════════════════════════════════════════════════════════ */ .menas-speakers-wrap .menas-card__body { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; padding: 0 60px 16px 16px; /* right padding leaves room for the flag */ } /* Gold rule — grows on hover */ .menas-speakers-wrap .menas-card__accent { width: 20px; height: 1px; background: var(--mc-gold); margin-bottom: 9px; transition: width .35s var(--mc-ease); opacity: .8; } .menas-speakers-wrap .menas-card--popup:hover .menas-card__accent { width: 36px; opacity: 1; } /* ── Name row: name block (flag is now absolute bottom-right) ── */ .menas-speakers-wrap .menas-card__name-row { margin-bottom: 4px; } .menas-speakers-wrap .menas-card__name { font-family: 'Inter', sans-serif; margin: 0; line-height: 1.15; display: flex; flex-direction: column; align-items: flex-start; } /* First name — small, light weight */ .menas-speakers-wrap .menas-card__name .menas-name__prefix, .menas-speakers-wrap .menas-card__name .menas-name__first { font-size: clamp(.65rem, .9vw + .2rem, .8rem); font-weight: 400; color: var(--mc-text); letter-spacing: .08em; opacity: .85; line-height: 1.3; } /* Last name — large, bold */ .menas-speakers-wrap .menas-card__name .menas-name__last { font-size: clamp(1rem, 1.6vw + .3rem, 1.45rem); font-weight: 800; color: var(--mc-text); letter-spacing: .03em; line-height: 1.1; } .menas-speakers-wrap .menas-card__position { font-family: 'Inter', sans-serif; font-size: .6rem; font-weight: 600; color: var(--mc-gold-lt); text-transform: uppercase; letter-spacing: .1em; margin: 0 0 6px; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; opacity: .9; } .menas-speakers-wrap .menas-card__excerpt { font-family: 'Inter', sans-serif; font-size: .72rem; color: var(--mc-muted); line-height: 1.6; 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 .32s var(--mc-ease), margin .32s var(--mc-ease); } .menas-speakers-wrap .menas-card--popup:hover .menas-card__excerpt { max-height: 72px; opacity: 1; margin-bottom: 9px; } @media (max-width: 580px) { .menas-speakers-wrap .menas-card--popup:hover .menas-card__excerpt { max-height: 0; opacity: 0; margin-bottom: 0; } } /* ══ FOOTER ══════════════════════════════════════════════════════ */ .menas-speakers-wrap .menas-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 6px; } @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; } } .menas-speakers-wrap .menas-card__country { font-family: 'Inter', sans-serif; font-size: .62rem; color: var(--mc-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: .02em; } .menas-speakers-wrap .menas-card__country img { display: none !important; } /* Read More — white pill button */ .menas-speakers-wrap .menas-card__readmore { font-family: 'Inter', sans-serif; font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mc-navy); background: #ffffff; border: none; border-radius: 20px; padding: 6px 14px; white-space: nowrap; pointer-events: none; display: inline-block; box-shadow: 0 2px 10px rgba(0,0,0,.18); transition: background .25s, box-shadow .25s; } .menas-speakers-wrap .menas-card--popup:hover .menas-card__readmore { background: #f0f0f0; box-shadow: 0 4px 16px rgba(0,0,0,.22); } .menas-no-speakers { font-family: 'Inter', sans-serif; color: #94a3b8; text-align: center; padding: 48px; } /* ══════════════════════════════════════════════════════════════ HORIZONTAL CARD LAYOUT (image right, content left) Usage: add layout="horizontal" to the shortcode ══════════════════════════════════════════════════════════════ */ /* Horizontal layout: keep existing grid columns, just adjust gap */ .menas-speakers-wrap.menas-layout-horizontal .menas-grid { gap: 18px; align-items: stretch; } /* The card itself — flex row */ .menas-speakers-wrap.menas-layout-horizontal .menas-card { aspect-ratio: unset !important; height: 200px; /* fixed height so all cards in a row align */ display: flex; flex-direction: row; border-top: none; border-left: 3px solid var(--mc-gold); overflow: hidden; border-radius: 6px; } /* Left: text content */ .menas-speakers-wrap.menas-layout-horizontal .menas-card__body { position: relative; bottom: unset; left: unset; right: unset; flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 16px 14px 14px 16px; z-index: 2; background: var(--mc-navy); } /* Right: image column */ .menas-speakers-wrap.menas-layout-horizontal .menas-card__img-wrap { position: relative; inset: unset; width: 35%; /* relative so it works at any column count */ max-width: 200px; flex-shrink: 0; order: 2; overflow: hidden; } .menas-speakers-wrap.menas-layout-horizontal .menas-card__img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform .55s var(--mc-ease); filter: none; scale: var(--menas-img-scale, 1); } /* Overlay — not needed for horizontal */ .menas-speakers-wrap.menas-layout-horizontal .menas-card__overlay { display: none; } /* Flag moves inside name-row — inline beside name */ .menas-speakers-wrap.menas-layout-horizontal .menas-card__flag { position: static; display: inline-flex; flex-shrink: 0; margin-left: 8px; } /* Excerpt always visible in horizontal mode */ .menas-speakers-wrap.menas-layout-horizontal .menas-card__excerpt { max-height: 60px !important; opacity: 1 !important; margin-bottom: 8px !important; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; font-size: .68rem; } /* Accent bar — left side */ .menas-speakers-wrap.menas-layout-horizontal .menas-card__accent { width: 28px; } .menas-speakers-wrap.menas-layout-horizontal .menas-card--popup:hover .menas-card__accent { width: 44px; } /* Name size tweak */ .menas-speakers-wrap.menas-layout-horizontal .menas-card__name { font-size: clamp(1rem, 1.4vw + .3rem, 1.25rem); margin-bottom: 5px; } /* Read More button — left-aligned */ .menas-speakers-wrap.menas-layout-horizontal .menas-card__footer { margin-top: auto; padding-top: 10px; } /* Responsive: stack at mobile */ @media (max-width: 620px) { .menas-speakers-wrap.menas-layout-horizontal .menas-grid { grid-template-columns: 1fr !important; } .menas-speakers-wrap.menas-layout-horizontal .menas-card { height: auto; min-height: 160px; flex-direction: row; /* keep horizontal even on mobile — just 1 col */ border-left: 3px solid var(--mc-gold); border-top: none; } .menas-speakers-wrap.menas-layout-horizontal .menas-card__img-wrap { width: 40%; max-width: 150px; order: 2; } } /* ══════════════════════════════════════════════════════════════ HIDDEN CATEGORY SECTIONS (toggled via admin) ══════════════════════════════════════════════════════════════ */ .menas-category-section--hidden { display: none !important; } /* ══════════════════════════════════════════════════════════════ POSTER LAYOUT (like the speaker card image: portrait photo, name bold at bottom, italic role, flag badge, animated reveal) Usage: layout="poster" ══════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════ POSTER LAYOUT — exact match to reference design Dark navy bg, photo fades into bg, flag top-right, DR. prefix · firstname bold · lastname heavy · country small Usage: layout="poster" ══════════════════════════════════════════════════════════════ */ .menas-speakers-wrap.menas-layout-poster .menas-grid { gap: 20px; align-items: start; } /* ── Card shell ── */ .menas-speakers-wrap.menas-layout-poster .menas-card { position: relative; border-radius: 6px; overflow: hidden; background: #0f1b3d; /* deep navy — matches reference exactly */ aspect-ratio: 2 / 3; /* taller ratio — full person visible */ border-top: none; border-left: none; box-shadow: 0 6px 28px rgba(0,0,0,.55); cursor: default; outline: none; -webkit-tap-highlight-color: transparent; /* Entry animation */ animation: menas-poster-in .55s cubic-bezier(.4,0,.2,1) both; } .menas-speakers-wrap.menas-layout-poster .menas-card--popup { cursor: pointer; } /* Stagger cards */ .menas-speakers-wrap.menas-layout-poster .menas-grid > .menas-card:nth-child(1) { animation-delay: .04s; } .menas-speakers-wrap.menas-layout-poster .menas-grid > .menas-card:nth-child(2) { animation-delay: .10s; } .menas-speakers-wrap.menas-layout-poster .menas-grid > .menas-card:nth-child(3) { animation-delay: .16s; } .menas-speakers-wrap.menas-layout-poster .menas-grid > .menas-card:nth-child(4) { animation-delay: .22s; } .menas-speakers-wrap.menas-layout-poster .menas-grid > .menas-card:nth-child(5) { animation-delay: .28s; } .menas-speakers-wrap.menas-layout-poster .menas-grid > .menas-card:nth-child(6) { animation-delay: .34s; } .menas-speakers-wrap.menas-layout-poster .menas-grid > .menas-card:nth-child(7) { animation-delay: .40s; } .menas-speakers-wrap.menas-layout-poster .menas-grid > .menas-card:nth-child(8) { animation-delay: .46s; } .menas-speakers-wrap.menas-layout-poster .menas-grid > .menas-card:nth-child(n+9){ animation-delay: .50s; } @keyframes menas-poster-in { from { opacity: 0; transform: translateY(28px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* ── Image: fills ~80% of card height, fades INTO navy background ── */ .menas-speakers-wrap.menas-layout-poster .menas-card__img-wrap { position: absolute; top: 0; left: 0; right: 0; height: 82%; /* tall enough to show full bust/chest */ overflow: hidden; } .menas-speakers-wrap.menas-layout-poster .menas-card__img { width: 100%; height: 100%; object-fit: cover; object-position: center top; /* anchor to top so head is never cut */ display: block; /* Mask fades photo into navy at the bottom — starts fade only at 60% */ -webkit-mask-image: linear-gradient( to bottom, black 0%, black 55%, rgba(0,0,0,.88) 68%, rgba(0,0,0,.45) 80%, rgba(0,0,0,.10) 92%, transparent 100% ); mask-image: linear-gradient( to bottom, black 0%, black 55%, rgba(0,0,0,.88) 68%, rgba(0,0,0,.45) 80%, rgba(0,0,0,.10) 92%, transparent 100% ); /* Subtle zoom on hover */ transition: transform .75s cubic-bezier(.4,0,.2,1); scale: var(--menas-img-scale, 1); } .menas-speakers-wrap.menas-layout-poster .menas-card__img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #0f1b3d; } /* ── No overlay gradient needed — mask does the work ── */ .menas-speakers-wrap.menas-layout-poster .menas-card__overlay { display: none; } /* ── Flag badge — inline beside name in poster layout ── */ .menas-speakers-wrap.menas-layout-poster .menas-card__flag { position: static; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 38px; height: 26px; border-radius: 4px; border: 2px solid rgba(255,255,255,.55); overflow: hidden; background: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.5); margin-left: 9px; vertical-align: middle; animation: menas-flag-pop .4s cubic-bezier(.34,1.5,.64,1) both; animation-delay: .45s; transition: transform .3s cubic-bezier(.34,1.5,.64,1), border-color .25s; } @keyframes menas-flag-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } } .menas-speakers-wrap.menas-layout-poster .menas-card--popup:hover .menas-card__flag { transform: scale(1.1); border-color: rgba(255,255,255,.9); } .menas-speakers-wrap.menas-layout-poster .menas-card__flag .menas-card-flag-img { width: 100% !important; height: 100% !important; min-width: 100%; max-width: none; object-fit: cover; object-position: center; display: block; border-radius: 0; position: static; transform: none; } /* ── Accent line — hide, not in reference ── */ .menas-speakers-wrap.menas-layout-poster .menas-card__accent { display: none; } /* ── Name row in poster: flex to hold name + flag ── */ .menas-speakers-wrap.menas-layout-poster .menas-card__name-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0; margin-bottom: 4px; } /* ── Text body: pinned to bottom of card ── */ .menas-speakers-wrap.menas-layout-poster .menas-card__body { position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; padding: 0 16px 14px 18px; background: transparent; /* Slide up slightly on hover */ transition: transform .38s cubic-bezier(.4,0,.2,1); } .menas-speakers-wrap.menas-layout-poster .menas-card--popup:hover .menas-card__body { transform: translateY(-5px); } /* * Name display — 3-part structure matching the reference: * "DR." → .poster-prefix (tiny, light) * "FAHAD" → .poster-firstname (medium bold) * "ALHELAL" → the main text (huge heavy) * This is done via JS / PHP name splitting. */ .menas-speakers-wrap.menas-layout-poster .menas-card__name { font-family: 'Inter', sans-serif; font-size: clamp(1.15rem, 2.2vw + .2rem, 1.65rem); font-weight: 900; color: #ffffff; margin: 0 0 4px; line-height: 1.05; letter-spacing: -.01em; text-transform: uppercase; } /* "DR." prefix on its own line */ .menas-speakers-wrap.menas-layout-poster .menas-card__name .poster-prefix { display: block; font-size: .52em; font-weight: 400; letter-spacing: .12em; color: rgba(255,255,255,.72); margin-bottom: 1px; line-height: 1.6; } /* First name — slightly smaller, normal bold */ .menas-speakers-wrap.menas-layout-poster .menas-card__name .poster-firstname { display: block; font-size: .68em; font-weight: 600; letter-spacing: .04em; color: rgba(255,255,255,.88); line-height: 1.25; } /* Excerpt — hidden */ .menas-speakers-wrap.menas-layout-poster .menas-card__excerpt { display: none; } /* ── Footer: country text only, small caps ── */ .menas-speakers-wrap.menas-layout-poster .menas-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 7px; padding-top: 0; border-top: none; } .menas-speakers-wrap.menas-layout-poster .menas-card__country { font-family: 'Inter', sans-serif; font-size: .6rem; font-weight: 500; color: rgba(255,255,255,.42); letter-spacing: .12em; text-transform: uppercase; } /* Read More — fades in on hover */ .menas-speakers-wrap.menas-layout-poster .menas-card__readmore { font-family: 'Inter', sans-serif; font-size: .56rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #0f1b3d; background: rgba(255,255,255,.88); border: none; border-radius: 20px; padding: 4px 11px; white-space: nowrap; pointer-events: none; display: inline-block; opacity: 0; transform: translateY(4px); transition: opacity .28s, transform .28s cubic-bezier(.34,1.5,.64,1); } .menas-speakers-wrap.menas-layout-poster .menas-card--popup:hover .menas-card__readmore { opacity: 1; transform: translateY(0); } /* ── Hover border shimmer ── */ .menas-speakers-wrap.menas-layout-poster .menas-card::before { content: ''; position: absolute; inset: 0; border-radius: 6px; border: 1.5px solid transparent; z-index: 4; pointer-events: none; transition: border-color .35s; } .menas-speakers-wrap.menas-layout-poster .menas-card--popup:hover::before { border-color: rgba(255,255,255,.18); } /* ── Responsive ── */ @media (max-width: 580px) { .menas-speakers-wrap.menas-layout-poster .menas-card { aspect-ratio: 2 / 3; } .menas-speakers-wrap.menas-layout-poster .menas-card__img-wrap { height: 80%; } } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .menas-speakers-wrap.menas-layout-poster .menas-card, .menas-speakers-wrap.menas-layout-poster .menas-card__flag { animation: none; } .menas-speakers-wrap.menas-layout-poster .menas-card__img, .menas-speakers-wrap.menas-layout-poster .menas-card__body, .menas-speakers-wrap.menas-layout-poster .menas-card__readmore { transition: none; } }