/* ============================================================
ARRAY Innovation — Marketing Components
------------------------------------------------------------
This file extends the Updated Design System (Obra shadcn) with
marketing-specific patterns used on the public website but NOT
appropriate for the Spectrum AI product surface.
The DS contract:
• Product surfaces use neutral panels, flat 8px cards,
hairline borders, prism only on AI-affordant components.
• Brand-forward surfaces (login, Suite Control Panel,
splash) may use .mesh-bg and the prism more liberally.
The website sits in a third bucket — marketing-forward but
pre-login — and uses the patterns below. None of these should
leak back into Spectrum AI product chrome.
Load order: colors_and_type.css → styles.css → THIS FILE
(so marketing rules override DS defaults where needed).
============================================================ */
/* ============================================================
M-01 · Atmospheric backdrop
------------------------------------------------------------
Three blurred radial orbs drifting under a masked grid.
A lighter alternative to .mesh-bg — used on the hero only.
Apply by placing inside any position:relative section:
============================================================ */
.mkt-grid-bg,
.hero-grid-bg {
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
background-size: 56px 56px;
mask-image: radial-gradient(ellipse 1100px 700px at 50% 30%, #000 0%, transparent 75%);
-webkit-mask-image: radial-gradient(ellipse 1100px 700px at 50% 30%, #000 0%, transparent 75%);
pointer-events: none;
}
.mkt-orb,
.hero-orb {
position: absolute;
border-radius: 50%;
filter: blur(60px);
opacity: 0.5;
pointer-events: none;
}
.mkt-orb-a, .hero-orb.a {
width: 480px; height: 480px;
background: radial-gradient(circle, rgba(126, 40, 245, 0.5), transparent 65%);
top: -120px; left: -120px;
animation: mkt-drift 18s ease-in-out infinite alternate;
}
.mkt-orb-b, .hero-orb.b {
width: 420px; height: 420px;
background: radial-gradient(circle, rgba(48, 170, 182, 0.4), transparent 65%);
bottom: -80px; right: -100px;
animation: mkt-drift 22s ease-in-out infinite alternate-reverse;
}
.mkt-orb-c, .hero-orb.c {
width: 260px; height: 260px;
background: radial-gradient(circle, rgba(255, 6, 249, 0.35), transparent 65%);
top: 35%; left: 60%;
animation: mkt-drift 14s ease-in-out infinite alternate;
}
@keyframes mkt-drift {
from { transform: translate(0,0) scale(1); }
to { transform: translate(80px, 60px) scale(1.12); }
}
/* ============================================================
M-02 · Lifted-glass panel
------------------------------------------------------------
The recurring marketing card chrome: a faint top-light
gradient fill on a hairline border. Optional radial prism
bloom via .mkt-glass-bloom-{tl,tr,bl,br}. NOT for product —
product cards stay flat (Obra Card).
Component selectors that lean on this pattern:
.quant · .pillars-header · .case · .svc · .tile · .pillar
.rnd · .cta-block · .testimonial · .impact-stat
.researcher · .impact-manifesto · .compute-frame · .sol-panel
They retain their own padding/radius/grid layout; this file
only formalises the surface treatment.
============================================================ */
.mkt-glass {
background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
border: 1px solid var(--border-1);
}
.mkt-glass-strong {
background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015));
border: 1px solid var(--border-1);
}
/* ============================================================
M-03 · Prism headline emphasis
------------------------------------------------------------
Italic prism-clipped word emphasis used inside marketing
headlines (h1/h2). Explicitly NOT for product copy — the DS
forbids gradient text on Spectrum AI surfaces.
Usage: Turn data into unfair advantage.
============================================================ */
.prism-text {
background: var(--prism);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
font-style: italic;
}
/* ============================================================
M-04 · Prism KPI
------------------------------------------------------------
Large display number rendered through the prism gradient.
Reserved for marketing impact statements (case-study results,
local-impact stats, hero readiness score). Do NOT use in
product dashboards — KPIs there stay neutral.
Usage: 73
============================================================ */
.mkt-prism-kpi,
.case-result .kpi,
.impact-stat-num,
.readiness-meter .score {
background: var(--prism);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.mkt-prism-kpi.plain,
.impact-stat-num.plain {
background: none;
-webkit-text-fill-color: var(--fg-1);
color: var(--fg-1);
}
/* ============================================================
M-05 · Marketing display headline
------------------------------------------------------------
Fluid clamp-sized h1/h2 used by section heads. Heavier than
the Obra type ladder by design — marketing pages need scale
that product screens don't.
Usage: …
The site applies this implicitly via .hero h1 and
.section-head h2 / .pillars-header h2 / .cta-block h2.
============================================================ */
.mkt-display-1 {
font-family: var(--font-sans);
font-weight: 700;
font-size: clamp(44px, 6.4vw, 92px);
line-height: 0.98;
letter-spacing: -0.025em;
color: var(--fg-1);
margin: 0;
}
.mkt-display-2 {
font-family: var(--font-sans);
font-weight: 700;
font-size: clamp(36px, 4.4vw, 56px);
line-height: 1.05;
letter-spacing: -0.025em;
color: var(--fg-1);
margin: 0;
}
/* ============================================================
M-06 · Marketing eyebrow pill
------------------------------------------------------------
A bordered round-pill variant of the eyebrow, used as a
standalone tag above hero/CTA copy. Differs from the DS
.eyebrow (which is plain uppercase text + dot).
Usage: ASSEMBLED IN BAHRAIN
============================================================ */
.mkt-eyebrow-pill {
display: inline-flex; align-items: center; gap: 8px;
padding: 6px 14px;
border-radius: var(--r-pill);
border: 1px solid var(--border-1);
background: rgba(255,255,255,0.04);
font-family: var(--font-sans);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--fg-3);
line-height: 1.33;
}
/* ============================================================
M-07 · Mono-arrow list
------------------------------------------------------------
Punchy bullet list for service-card sub-features. Mono face,
prism arrow prefix. Adds rhythm to dense feature copy on
marketing tiles. Don't use in product — Spectrum AI uses
plain Geist bullet lists.
============================================================ */
.mkt-arrow-list,
.svc-list {
list-style: none; padding: 0; margin: 0;
display: grid; gap: 6px;
}
.mkt-arrow-list li,
.svc-list li {
font-family: var(--font-mono), monospace;
font-size: 11px;
color: var(--fg-3);
letter-spacing: 0.02em;
}
.mkt-arrow-list li::before,
.svc-list li::before {
content: "→ ";
color: var(--prism-stop-violet);
margin-right: 4px;
}
/* ============================================================
M-08 · Contact layout — form + direct lines
------------------------------------------------------------
Two-column contact grid used on contact/index.html.
Left: a lifted-glass form card. Right: direct-line routing
rows, an office card and social links. Inputs follow the
Obra field spec (h40, 8px radius, hairline border, prism
focus ring) so they stay consistent with product surfaces.
============================================================ */
.contact-grid {
display: grid;
grid-template-columns: 1.1fr 0.9fr;
gap: 24px;
align-items: start;
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } }
/* --- form card --- */
.contact-card {
background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012));
border: 1px solid var(--border-1);
border-radius: 20px;
padding: 36px;
}
@media (max-width: 540px) { .contact-card { padding: 24px; } }
.contact-card-title {
font-size: 20px; font-weight: 600;
letter-spacing: -0.02em; color: var(--fg-1);
margin: 0 0 4px;
}
.contact-card-sub {
font-family: var(--font-sans);
font-size: 14px; color: var(--fg-3); line-height: 1.5;
margin: 0 0 28px;
}
.contact-form { display: grid; gap: 18px; }
.field { display: grid; gap: 7px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 540px) { .field-row { grid-template-columns: 1fr; } }
.field label {
font-family: var(--font-sans);
font-size: 13px; font-weight: 500;
letter-spacing: -0.01em; color: var(--fg-2);
}
.field label .req { color: var(--prism-stop-violet); margin-left: 2px; }
.field input,
.field select,
.field textarea {
width: 100%;
height: 40px;
padding: 0 14px;
border-radius: var(--r-md);
background: rgba(0,0,0,0.25);
border: 1px solid var(--border-2);
color: var(--fg-1);
font-family: var(--font-sans);
font-size: 14px; letter-spacing: -0.01em;
transition: border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
-webkit-appearance: none; appearance: none;
}
.field textarea {
height: auto; min-height: 132px;
padding: 12px 14px; line-height: 1.55; resize: vertical;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--fg-3); }
.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--fg-3); }
.field input:focus,
.field select:focus,
.field textarea:focus {
outline: none;
border-color: transparent;
box-shadow: 0 0 0 2px var(--focus-ring);
background: rgba(0,0,0,0.35);
}
/* select chevron */
.field-select { position: relative; }
.field-select select { padding-right: 38px; cursor: pointer; }
.field-select .field-chevron {
position: absolute; right: 12px; top: 50%;
transform: translateY(-50%);
pointer-events: none; color: var(--fg-3);
width: 16px; height: 16px;
}
.contact-form .btn { width: 100%; height: 44px; margin-top: 4px; }
.contact-consent {
font-family: var(--font-sans);
font-size: 12px; color: var(--fg-3); line-height: 1.5;
text-align: center;
}
.contact-consent a { color: var(--fg-2); text-decoration: underline; text-underline-offset: 2px; }
/* success state */
.contact-success {
display: none;
flex-direction: column; align-items: center; justify-content: center;
text-align: center; gap: 14px;
min-height: 360px;
}
.contact-success.show { display: flex; }
.contact-success .cs-mark {
width: 64px; height: 64px; border-radius: 99px;
display: grid; place-items: center;
background: rgba(126,40,245,0.14);
border: 1px solid rgba(126,40,245,0.4);
color: var(--prism-stop-violet);
}
.contact-success .cs-mark svg { width: 30px; height: 30px; }
.contact-success h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; color: var(--fg-1); margin: 0; }
.contact-success p { font-family: var(--font-sans); font-size: 14px; color: var(--fg-3); margin: 0; max-width: 38ch; line-height: 1.55; }
/* --- direct lines / info column --- */
.contact-aside { display: grid; gap: 16px; }
.contact-routes {
background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
border: 1px solid var(--border-1);
border-radius: 16px;
padding: 10px;
}
.contact-route {
display: flex; align-items: center; gap: 14px;
padding: 14px 14px;
border-radius: 12px;
text-decoration: none;
transition: background 140ms ease;
}
.contact-route + .contact-route { border-top: 1px solid var(--border-1); border-radius: 0; }
.contact-route:hover { background: rgba(255,255,255,0.03); }
.contact-route-icon {
width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
display: grid; place-items: center;
background: rgba(126,40,245,0.12);
border: 1px solid rgba(126,40,245,0.28);
color: var(--prism-stop-violet);
}
.contact-route-icon svg { width: 18px; height: 18px; }
.contact-route-meta { display: grid; gap: 1px; }
.contact-route-label { font-family: var(--font-sans); font-size: 13px; font-weight: 600; color: var(--fg-1); letter-spacing: -0.01em; }
.contact-route-value { font-family: var(--font-mono), monospace; font-size: 12px; color: var(--fg-3); }
.contact-route-arrow { margin-left: auto; color: var(--fg-3); width: 16px; height: 16px; transition: transform 140ms ease; }
.contact-route:hover .contact-route-arrow { transform: translateX(3px); color: var(--fg-1); }
.contact-office {
background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
border: 1px solid var(--border-1);
border-radius: 16px;
padding: 22px;
}
.contact-office h4 {
display: flex; align-items: center; gap: 8px;
font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
color: var(--fg-1); margin: 0 0 12px;
}
.contact-office h4 svg { width: 16px; height: 16px; color: var(--prism-stop-teal); }
.contact-office address {
font-style: normal;
font-family: var(--font-sans);
font-size: 14px; line-height: 1.6; color: var(--fg-2);
}
.contact-office .office-hours {
margin-top: 14px; padding-top: 14px;
border-top: 1px solid var(--border-1);
font-family: var(--font-sans); font-size: 13px; color: var(--fg-3); line-height: 1.5;
}
.contact-social { display: flex; gap: 10px; }
.contact-social a {
flex: 1;
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
height: 44px; border-radius: var(--r-md);
border: 1px solid var(--border-2);
background: rgba(255,255,255,0.03);
color: var(--fg-2);
font-family: var(--font-sans); font-size: 13px; font-weight: 500; letter-spacing: -0.01em;
text-decoration: none;
transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.contact-social a:hover { background: rgba(126,40,245,0.1); border-color: rgba(126,40,245,0.35); color: var(--fg-1); }
.contact-social a svg { width: 16px; height: 16px; }
/* ============================================================
M-09 · Vision & Mission statement cards
============================================================ */
.vm-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
margin-bottom: 20px;
}
@media (max-width: 760px) { .vm-grid { grid-template-columns: 1fr; } }
.vm-card {
background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.012));
border: 1px solid var(--border-1);
border-radius: 18px;
padding: 32px;
position: relative; overflow: hidden;
}
.vm-card::after {
content: ""; position: absolute; right: -40px; top: -40px;
width: 180px; height: 180px; border-radius: 99px;
background: radial-gradient(circle, rgba(126,40,245,0.16), transparent 70%);
pointer-events: none;
}
.vm-card .eyebrow { margin-bottom: 16px; }
.vm-card h3 {
font-size: 23px; font-weight: 600; letter-spacing: -0.02em;
line-height: 1.28; color: var(--fg-1); margin: 0;
text-wrap: pretty;
}
.vm-gov {
display: flex; align-items: flex-start; gap: 12px;
padding: 18px 20px; border-radius: 14px;
background: rgba(48,170,182,0.07);
border: 1px solid rgba(48,170,182,0.2);
font-family: var(--font-sans);
font-size: 13.5px; line-height: 1.55; color: var(--fg-2);
margin-bottom: 28px;
}
.vm-gov svg { width: 18px; height: 18px; color: var(--prism-stop-teal); flex-shrink: 0; margin-top: 1px; }
.vm-gov strong { color: var(--fg-1); }
/* ============================================================
M-10 · Leadership team grid
============================================================ */
.team-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
@media (max-width: 860px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .team-grid { grid-template-columns: 1fr; } }
.team-card {
background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
border: 1px solid var(--border-1);
border-radius: 16px;
padding: 24px;
transition: border-color 180ms ease, transform 180ms ease;
}
.team-card:hover { border-color: rgba(126,40,245,0.4); transform: translateY(-2px); }
.team-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.team-avatar {
width: 52px; height: 52px; border-radius: 99px; flex-shrink: 0;
display: grid; place-items: center;
background: linear-gradient(140deg, rgba(126,40,245,0.35), rgba(48,170,182,0.3));
border: 1px solid rgba(255,255,255,0.16);
font-family: var(--font-sans); font-weight: 600; font-size: 16px;
letter-spacing: 0.02em; color: #fff;
}
.team-meta { display: grid; gap: 2px; }
.team-name { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--fg-1); }
.team-role { font-family: var(--font-sans); font-size: 12.5px; font-weight: 500; color: var(--prism-stop-teal); }
.team-bio { font-family: var(--font-sans); font-size: 13px; line-height: 1.55; color: var(--fg-3); margin: 0 0 14px; }
.team-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.team-tags span {
font-family: var(--font-sans); font-size: 10.5px; font-weight: 500;
letter-spacing: 0.02em; color: var(--fg-2);
padding: 2px 8px; border-radius: var(--r-pill);
background: rgba(255,255,255,0.04); border: 1px solid var(--border-1);
}
/* ============================================================
M-11 · Culture values + social feed embeds
============================================================ */
.value-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
margin-bottom: 28px;
}
@media (max-width: 760px) { .value-grid { grid-template-columns: 1fr; } }
.value-card {
background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
border: 1px solid var(--border-1);
border-radius: 16px;
padding: 26px;
}
.value-card .value-icon {
width: 40px; height: 40px; border-radius: 11px; margin-bottom: 16px;
display: grid; place-items: center;
background: rgba(126,40,245,0.12); border: 1px solid rgba(126,40,245,0.28);
color: var(--prism-stop-violet);
}
.value-card .value-icon svg { width: 20px; height: 20px; }
.value-card h4 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--fg-1); margin: 0 0 8px; }
.value-card p { font-family: var(--font-sans); font-size: 13.5px; line-height: 1.6; color: var(--fg-3); margin: 0; }
.social-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 760px) { .social-grid { grid-template-columns: 1fr; } }
.social-embed {
background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
border: 1px solid var(--border-1);
border-radius: 16px; overflow: hidden;
display: flex; flex-direction: column;
}
.social-embed-head {
display: flex; align-items: center; gap: 12px;
padding: 18px 20px; border-bottom: 1px solid var(--border-1);
}
.social-embed-icon {
width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
display: grid; place-items: center; color: #fff;
}
.social-embed-icon.li { background: #0A66C2; }
.social-embed-icon.ig { background: linear-gradient(135deg, #F58529, #DD2A7B 55%, #8134AF); }
.social-embed-icon svg { width: 20px; height: 20px; }
.social-embed-meta { display: grid; gap: 1px; }
.social-embed-name { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--fg-1); }
.social-embed-handle { font-family: var(--font-mono), monospace; font-size: 12px; color: var(--fg-3); }
.social-embed-follow {
margin-left: auto;
display: inline-flex; align-items: center; gap: 6px;
height: 32px; padding: 0 14px; border-radius: var(--r-pill);
background: rgba(255,255,255,0.05); border: 1px solid var(--border-2);
color: var(--fg-1); font-family: var(--font-sans); font-size: 12.5px; font-weight: 500;
text-decoration: none; transition: background 140ms ease, border-color 140ms ease;
}
.social-embed-follow:hover { background: rgba(126,40,245,0.12); border-color: rgba(126,40,245,0.35); }
.social-feed { padding: 14px; display: grid; gap: 12px; }
.social-post {
padding: 14px; border-radius: 12px;
background: rgba(255,255,255,0.025); border: 1px solid var(--border-1);
}
.social-post .sp-meta { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.social-post .sp-dot { width: 26px; height: 26px; border-radius: 99px; background: rgba(255,255,255,0.06); border: 1px solid var(--border-2); flex-shrink: 0; display:grid; place-items:center; color: var(--fg-3); }
.social-post .sp-dot svg { width: 13px; height: 13px; }
.social-post .sp-by { font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--fg-2); }
.social-post .sp-time { font-family: var(--font-mono), monospace; font-size: 11px; color: var(--fg-3); margin-left: auto; }
.social-post p { font-family: var(--font-sans); font-size: 13px; line-height: 1.5; color: var(--fg-2); margin: 0; }
.social-post .sp-media {
margin-top: 10px; height: 84px; border-radius: 8px;
background:
radial-gradient(circle at 30% 40%, rgba(126,40,245,0.3), transparent 60%),
radial-gradient(circle at 75% 65%, rgba(48,170,182,0.26), transparent 60%),
#15151a;
}
.social-placeholder-note {
padding: 12px 16px; border-top: 1px solid var(--border-1);
font-family: var(--font-sans); font-size: 11.5px; color: var(--fg-3);
display: flex; align-items: center; gap: 7px;
}
.social-placeholder-note svg { width: 13px; height: 13px; color: var(--prism-stop-teal); }
/* ============================================================
M-12 · Interactive events world map
------------------------------------------------------------
Dotted equirectangular world (land dots generated in build),
glowing event pins + HQ pin, shared hover/tap card. The
detailed .events-list stays below as the accessible fallback.
============================================================ */
.events-map-wrap {
position: relative;
border: 1px solid var(--border-1);
border-radius: 20px;
background:
radial-gradient(ellipse 60% 80% at 60% 35%, rgba(126,40,245,0.08), transparent 70%),
linear-gradient(180deg, rgba(255,255,255,0.035), rgba(255,255,255,0.008));
padding: 20px;
overflow: visible;
margin-bottom: 28px;
}
.events-map { position: relative; width: 100%; }
.events-map svg { width: 100%; height: auto; display: block; overflow: hidden; }
.map-dot { fill: rgba(255,255,255,0.11); }
.evt-pin { cursor: pointer; outline: none; }
.evt-pin .pin-hit { fill: transparent; }
.evt-pin .pin-core {
fill: var(--prism-stop-violet);
stroke: #fff; stroke-width: 1.2;
transition: r 160ms ease;
}
.evt-pin .pin-ring {
fill: none; stroke: var(--prism-stop-violet); stroke-width: 1.5;
transform-box: fill-box; transform-origin: center;
transform-origin: center; opacity: 0.8;
animation: pinPulse 2.6s ease-out infinite;
}
.evt-pin.hq .pin-core { fill: var(--prism-stop-teal); }
.evt-pin.hq .pin-ring { stroke: var(--prism-stop-teal); }
.evt-pin:hover .pin-core,
.evt-pin:focus-visible .pin-core { r: 7; }
.evt-pin:focus-visible .pin-core { stroke: var(--prism-stop-teal); }
@media (prefers-reduced-motion: reduce) { .evt-pin .pin-ring { animation: none; } }
@keyframes pinPulse {
0% { r: 5; opacity: 0.7; }
70% { r: 16; opacity: 0; }
100% { r: 16; opacity: 0; }
}
/* shared hover/tap card */
.map-card {
position: fixed; z-index: 9999;
width: 248px;
background: rgba(20,20,26,0.96);
border: 1px solid rgba(126,40,245,0.4);
border-radius: 14px;
padding: 16px 18px;
box-shadow: 0 18px 50px rgba(0,0,0,0.5);
transform: translate(-50%, calc(-100% - 18px));
opacity: 0; visibility: hidden;
transition: opacity 150ms ease, transform 150ms ease;
pointer-events: none;
backdrop-filter: blur(8px);
}
.map-card.show { opacity: 1; visibility: visible; transform: translate(-50%, calc(-100% - 24px)); }
.map-card.below { transform: translate(-50%, 18px); }
.map-card.below.show { transform: translate(-50%, 24px); }
.map-card.below::after {
top: -7px; bottom: auto;
border: 0;
border-left: 1px solid rgba(126,40,245,0.4);
border-top: 1px solid rgba(126,40,245,0.4);
}
.map-card::after {
content: ""; position: absolute; left: 50%; bottom: -7px;
width: 12px; height: 12px; transform: translateX(-50%) rotate(45deg);
background: rgba(20,20,26,0.96);
border-right: 1px solid rgba(126,40,245,0.4);
border-bottom: 1px solid rgba(126,40,245,0.4);
}
.map-card .mc-img {
width: 100%; height: 130px;
object-fit: cover;
border-radius: 8px;
display: block;
margin-bottom: 10px;
}
.map-card .mc-top { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.map-card .mc-when {
font-family: var(--font-mono), monospace; font-size: 11px;
letter-spacing: 0.06em; color: var(--prism-stop-teal);
}
.map-card .mc-badge {
margin-left: auto; font-family: var(--font-sans);
font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
padding: 2px 7px; border-radius: var(--r-pill);
background: rgba(126,40,245,0.16); color: #c5a8ff;
}
.map-card .mc-name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: var(--fg-1); margin: 0 0 4px; }
.map-card .mc-talk { font-family: var(--font-sans); font-size: 12.5px; line-height: 1.5; color: var(--fg-3); margin: 0 0 8px; }
.map-card .mc-loc { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-sans); font-size: 12px; color: var(--fg-2); }
.map-card .mc-loc svg { width: 13px; height: 13px; color: var(--prism-stop-teal); }
.map-legend {
display: flex; flex-wrap: wrap; gap: 18px;
margin-top: 6px; padding: 0 4px;
font-family: var(--font-sans); font-size: 12px; color: var(--fg-3);
}
.map-legend span { display: inline-flex; align-items: center; gap: 7px; }
.map-legend .lg-dot { width: 9px; height: 9px; border-radius: 99px; }
.map-legend .lg-dot.evt { background: var(--prism-stop-violet); }
.map-legend .lg-dot.hq { background: var(--prism-stop-teal); }
/* map + events list side-by-side */
.events-split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
align-items: start;
}
@media (max-width: 860px) { .events-split { grid-template-columns: 1fr; } }
.events-split .events-map-wrap {
margin-bottom: 0;
position: sticky;
top: 90px;
}
.events-split .events-list {
display: flex;
flex-direction: column;
}
/* ============================================================
M-13 · About sub-section band heading
============================================================ */
.about-band { margin: 44px 0 22px; }
.about-band .eyebrow { margin-bottom: 10px; }
.about-band h3 {
font-size: 26px; font-weight: 600; letter-spacing: -0.02em;
color: var(--fg-1); margin: 0 0 6px; line-height: 1.2;
}
.about-band p {
font-family: var(--font-sans); font-size: 14px; line-height: 1.55;
color: var(--fg-3); margin: 0; max-width: 62ch;
}
/* ============================================================
M-14 · Expanded social post (image + engagement)
------------------------------------------------------------
Used on the Culture page feed — each post carries a photo
placeholder and an engagement row.
============================================================ */
.sp-photo {
margin: 6px 0 12px; height: 188px; border-radius: 10px;
position: relative; overflow: hidden;
display: grid; place-items: center;
color: rgba(255,255,255,0.38);
border: 1px solid var(--border-1);
background:
radial-gradient(circle at 28% 32%, rgba(126,40,245,0.28), transparent 60%),
radial-gradient(circle at 75% 70%, rgba(48,170,182,0.24), transparent 60%),
#15151a;
}
.sp-photo svg { width: 30px; height: 30px; position: relative; }
.sp-photo .sp-photo-tag {
position: absolute; bottom: 8px; left: 8px;
font-family: var(--font-sans); font-size: 10.5px; letter-spacing: 0.02em;
color: rgba(255,255,255,0.6);
background: rgba(0,0,0,0.45); padding: 2px 8px; border-radius: var(--r-pill);
}
.sp-engage {
display: flex; gap: 18px; margin-top: 12px; padding-top: 11px;
border-top: 1px solid var(--border-1);
}
.sp-engage span {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-sans); font-size: 12px; color: var(--fg-3);
}
.sp-engage svg { width: 14px; height: 14px; }
/* ============================================================
M-15 · Investor feature (Mumtalakat)
------------------------------------------------------------
Photo + governance copy, replacing the plain investor strip
in the About section.
============================================================ */
.investor-feature {
display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 0;
border: 1px solid var(--border-1);
border-radius: 18px; overflow: hidden;
background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
margin-bottom: 28px;
}
@media (max-width: 760px) { .investor-feature { grid-template-columns: 1fr; } }
.investor-feature .if-media {
position: relative; min-height: 100%;
border-right: 1px solid var(--border-1);
background: #0d0d12;
}
@media (max-width: 760px) { .investor-feature .if-media { border-right: 0; border-bottom: 1px solid var(--border-1); } }
.investor-feature .if-media img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.investor-feature .if-body {
padding: 32px 34px;
display: flex; flex-direction: column; justify-content: center;
}
.investor-feature .if-body .eyebrow { margin-bottom: 14px; }
.investor-feature .if-body h3 {
font-size: 22px; font-weight: 600; letter-spacing: -0.02em;
line-height: 1.25; color: var(--fg-1); margin: 0 0 12px; text-wrap: pretty;
}
.investor-feature .if-body p {
font-family: var(--font-sans); font-size: 14px; line-height: 1.6;
color: var(--fg-2); margin: 0;
}
.investor-feature .if-body strong { color: var(--fg-1); }