/* ─── Design tokens ───────────────────────────────────────────────── */
/* Fonts loaded via PHP wp_enqueue_scripts (preconnect + ) */
:root {
/* Motion */
--ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
--ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-quint: cubic-bezier(0.64, 0, 0.78, 0);
--dur-xs: 100ms;
--dur-sm: 200ms;
--dur-md: 350ms;
--dur-lg: 600ms;
--dur-xl: 750ms;
/* ── Palette: "Fluorescence" ────────────────────────────────────────
Extracted from real optical microscopy images of the congress.
This is the official visual identity of the project.
─────────────────────────────────────────────────────────────────── */
/* Core surfaces — deep field / dark slide */
--spaom-bg: #050508; /* near-black — page bg, hero, dark sections */
--spaom-surface: #1e0a2a; /* deep purple — alternate sections, cards */
/* Fluorescence signals — neon palette from microscopy images */
--spaom-primary: #e8d000; /* neon yellow — h1, CTAs, active nav */
--spaom-accent: #cc00cc; /* magenta — decorative, card borders, icons */
--spaom-highlight: #00d8f0; /* cyan — dates, labels, links, hero meta */
--spaom-warm: #f0a000; /* amber — hover states, interactive feedback */
--spaom-green: #00e8a0; /* emerald — success states, highlights */
/* Text */
--spaom-text: #ffffff; /* white — primary text on dark surfaces */
--spaom-muted: #6a6a8a; /* muted purple-grey — secondary, captions */
/* ── Legacy variable aliases — cascade most rules automatically ─────
Old variable names remapped to new palette values so existing
CSS declarations keep working without individual edits.
─────────────────────────────────────────────────────────────────── */
--spaom-navy: var(--spaom-bg); /* was dark bg → now bg */
--spaom-navy-mid: var(--spaom-surface); /* was lighter dark → surface */
--spaom-accent-warm: var(--spaom-primary); /* was lime CTA → neon yellow */
--spaom-blue: var(--spaom-highlight); /* was cyan → bright cyan */
--spaom-coral: var(--spaom-accent); /* was magenta → magenta */
--spaom-text-mid: rgba(255,255,255,.72); /* was dark mid → light mid */
--spaom-text-muted: var(--spaom-muted); /* maps to new muted */
--spaom-bg-tinted: var(--spaom-surface); /* was light alt → surface dark */
--spaom-rule: rgba(255,255,255,.10); /* was blue-grey rule → subtle */
--spaom-radius: 4px;
--spaom-font: 'Inter', system-ui, sans-serif; /* body — readable, neutral */
--spaom-font-display: 'Bebas Neue', 'Arial Black', sans-serif; /* h1, section titles — impactful */
--spaom-font-ui: 'Barlow Semi Condensed', system-ui, sans-serif; /* nav, labels, subtitles */
--spaom-font-hero: 'Bebas Neue', 'Arial Black', sans-serif; /* hero headline alias */
/* Legacy alias — kept so any PHP template using --spaom-font-serif still resolves */
--spaom-font-serif: var(--spaom-font-ui);
/* Spacing scale — 4pt base */
--sp-1: 0.25rem; /* 4px */
--sp-2: 0.5rem; /* 8px */
--sp-3: 0.75rem; /* 12px */
--sp-4: 1rem; /* 16px */
--sp-6: 1.5rem; /* 24px */
--sp-8: 2rem; /* 32px */
--sp-10: 2.5rem; /* 40px */
--sp-12: 3rem; /* 48px */
--sp-16: 4rem; /* 64px */
--sp-20: 5rem; /* 80px */
--sp-24: 6rem; /* 96px */
/* Type scale — major third (×1.25) from 1rem base */
--text-xs: 0.6875rem; /* 11px — section labels, captions */
--text-sm: 0.875rem; /* 14px — secondary meta, footer */
--text-base: 1rem; /* 16px — body text */
--text-lead: 1.125rem; /* 18px — lead paragraphs, card titles */
--text-sub: 1.375rem; /* 22px — subheadings */
/* Line-heights */
--lh-display: 1.0; /* Hero title */
--lh-heading: 1.15; /* Section titles */
--lh-sub: 1.28; /* Card/committee titles */
--lh-lead: 1.72; /* Lead/intro paragraphs */
--lh-body: 1.68; /* Standard body */
--lh-caption: 1.42; /* Labels, list items, meta */
/* Letter-spacing */
--ls-display: -0.035em; /* Hero — large display text */
--ls-heading: -0.02em; /* Section titles */
--ls-label: 0.12em; /* Small-caps labels, uppercase tags */
--ls-normal: 0;
/* Section padding — varies by section density */
--section-pad-v: clamp(5rem, 10vw, 8rem);
--section-pad-v-generous: clamp(7rem, 14vw, 11rem);
--section-pad-v-compact: clamp(2.5rem, 5vw, 4rem);
--section-pad-h: clamp(1.5rem, 5vw, 3rem);
/* Legacy aliases kept for PHP templates */
--spaom-blue-dark: var(--spaom-bg);
--spaom-blue-light: var(--spaom-highlight);
--spaom-bg-soft: var(--spaom-surface);
--spaom-border: var(--spaom-rule);
--spaom-shadow: 0 2px 20px rgba(0,0,0,.5);
/* Nav height token — used by hero height calc and sticky venue offset */
--nav-height: 4.5rem; /* 72px — kept in sync with .spaom-nav min-height */
color-scheme: dark;
}
/* ─── Global ──────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
.spaom-onepage {
font-family: var(--spaom-font);
font-size: var(--text-base);
color: var(--spaom-text);
line-height: var(--lh-body);
font-kerning: normal;
overflow-x: clip; /* clip (not hidden) — doesn't create a scroll container, keeps position:sticky working */
background: var(--spaom-bg);
}
/* ─── Nav ─────────────────────────────────────────────────────────── */
.spaom-nav {
position: sticky; top: 0; z-index: 1000;
min-height: var(--nav-height); /* matches --nav-height token used in hero calc */
background: rgba(5,5,8,.92);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
display: flex; align-items: center;
justify-content: space-between;
padding: 1.1rem 2.5rem; gap: 1.25rem;
border-bottom: 1px solid rgba(255,255,255,.08);
}
.spaom-nav__brand {
font-family: var(--spaom-font-ui);
font-weight: 600; font-size: 1.7rem;
color: #fff; text-decoration: none;
white-space: nowrap; letter-spacing: .06em;
text-transform: uppercase;
display: flex; align-items: center; gap: .6rem;
}
.spaom-nav__brand-year {
color: var(--spaom-accent-warm); /* lime accent differentiates the year */
}
/* Circular logo — sized to fit the nav height comfortably */
.spaom-nav__logo {
width: 36px; height: 36px;
border-radius: 50%;
object-fit: cover;
flex-shrink: 0;
display: block;
border: 1.5px solid rgba(255,255,255,.18); /* subtle ring, doesn't compete with content */
}
/* Nav CTAs — compact variant of the standard .spaom-btn */
.spaom-nav__ctas {
display: flex; align-items: center; gap: .5rem;
flex-shrink: 0; /* don't let them get squeezed by the links list */
}
.spaom-nav__ctas .spaom-btn {
padding: .45rem 1rem;
font-size: .95rem;
letter-spacing: .08em;
line-height: 1.4;
white-space: nowrap;
text-transform: uppercase;
}
.spaom-nav__links {
display: flex; gap: 1rem;
list-style: none; margin: 0; padding: 0; flex-wrap: nowrap;
}
.spaom-nav__links a {
font-family: var(--spaom-font-ui);
color: var(--spaom-muted);
text-decoration: none; font-size: 1.05rem;
font-weight: 600; letter-spacing: 0.08em;
text-transform: uppercase;
padding: 0.4rem 0; /* vertical click area without changing visual footprint */
transition: color var(--dur-sm) linear;
white-space: nowrap;
position: relative;
}
.spaom-nav__links a::after {
content: '';
position: absolute; bottom: -3px; left: 0; right: 0;
height: 1px;
background: var(--spaom-accent-warm);
transform: scaleX(0);
transform-origin: left center;
transition: transform var(--dur-md) var(--ease-out-quint);
}
.spaom-nav__links a:hover { color: var(--spaom-primary); }
.spaom-nav__links a:hover::after { transform: scaleX(1); }
.spaom-nav__links a.is-active { color: var(--spaom-primary); }
.spaom-nav__links a.is-active::after { transform: scaleX(1); }
/* Scroll progress bar */
.spaom-progress {
position: fixed; top: 0; left: 0; right: 0;
height: 2px; width: 0%;
background: var(--spaom-accent-warm);
z-index: 1001;
pointer-events: none;
transform-origin: left;
transition: width .08s linear;
}
/* Nav post-hero scroll state */
.spaom-nav--scrolled {
background: rgba(5,5,8,.98);
border-bottom-color: rgba(255,255,255,.12);
box-shadow: 0 1px 24px rgba(13,27,42,.4);
}
.spaom-nav { transition: background var(--dur-md) linear, box-shadow var(--dur-md) linear; }
.spaom-nav__burger {
display: none; flex-direction: column;
gap: 5px; background: none; border: none;
cursor: pointer; padding: 4px;
}
.spaom-nav__burger span {
display: block; width: 22px; height: 1.5px;
background: #fff; transition: transform .25s, opacity .25s;
}
.spaom-nav__burger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.spaom-nav__burger.is-open span:nth-child(2) { opacity: 0; }
.spaom-nav__burger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
/* ── Nav hamburger — móvil + iPad (≤1100px) ── */
@media (max-width: 1380px) {
:root { --nav-height: 3.6rem; }
.spaom-nav { flex-wrap: wrap; padding: .85rem 1.25rem; }
.spaom-nav__burger { display: flex; }
.spaom-nav__ctas { display: none; }
.spaom-nav__links {
display: none; width: 100%;
flex-direction: column; gap: .4rem;
padding: .75rem 0 .25rem;
}
.spaom-nav__links.is-open { display: flex; }
.spaom-nav__links a { font-size: 1.3rem; text-transform: uppercase; letter-spacing: 0.06em; padding: .6rem 0; display: block; }
.spaom-nav__ctas--mobile {
display: none;
width: 100%; flex-direction: column; gap: .75rem;
padding: .75rem 0 1.25rem;
border-top: 1px solid rgba(255,255,255,.1);
margin-top: .25rem;
}
.spaom-nav__ctas--mobile.is-open { display: flex; }
.spaom-nav__ctas--mobile .spaom-btn {
width: auto; align-self: center; text-align: center;
padding: .75rem 2rem; font-size: 1.1rem;
letter-spacing: .08em; text-transform: uppercase;
}
/* Menú expandido: scroll si no cabe en pantalla */
.spaom-nav { max-height: 100svh; overflow-y: auto; }
}
/* Desktop: ocultar siempre el bloque mobile-CTAs */
@media (min-width: 1381px) {
.spaom-nav__ctas--mobile { display: none !important; }
}
/* ── Hero móvil — altura flexible, contenido no clipado ── */
@media (max-width: 768px) {
.spaom-hero {
height: calc(100svh - var(--nav-height));
padding: 2.5rem 1.25rem;
}
.spaom-hero__logo img { height: 2.5rem !important; }
.spaom-hero__logos { gap: 1.25rem; margin-bottom: 0.75rem !important; }
.spaom-hero__bg-slide::after { font-size: 0.48rem !important; max-width: min(140px, 28vw) !important; opacity: 0.55 !important; }
.spaom-hero__eyebrow { font-size: 1.6rem !important; margin-bottom: 0.25rem !important; }
.spaom-hero__subtitle { font-size: 1rem !important; margin-bottom: 0.25rem !important; }
.spaom-hero__title { font-size: clamp(3rem, 18vw, 5rem) !important; margin-bottom: 0.5rem !important; }
.spaom-hero__tagline { font-size: 1.2rem !important; margin-bottom: 0.5rem !important; }
.spaom-hero__meta { font-size: 0.85rem !important; margin-bottom: 1.25rem !important; }
.spaom-hero__ctas { gap: 0.75rem; }
.spaom-hero__ctas .spaom-btn { padding: .7rem 1.4rem !important; font-size: .9rem !important; }
}
/* ── Hero tablet portrait (≤768px y altura ≥900px — iPad mini/Air portrait) ── */
@media (max-width: 768px) and (min-height: 900px) {
.spaom-hero__logo img { height: clamp(3rem, 5vw, 4rem) !important; }
.spaom-hero__logos { margin-bottom: 1rem !important; }
.spaom-hero__eyebrow { font-size: clamp(1.9rem, 3.8vw, 2.6rem) !important; margin-bottom: 0.5rem !important; }
.spaom-hero__subtitle { font-size: clamp(1.3rem, 3vw, 1.8rem) !important; margin-bottom: 0.5rem !important; }
.spaom-hero__title { font-size: clamp(5rem, 18vw, 8rem) !important; margin-bottom: 0.75rem !important; }
.spaom-hero__tagline { font-size: clamp(1.6rem, 4vw, 2.4rem) !important; margin-bottom: 0.75rem !important; }
.spaom-hero__meta { font-size: clamp(1rem, 2.2vw, 1.3rem) !important; margin-bottom: 1.5rem !important; }
.spaom-hero__ctas .spaom-btn { padding: .9rem 2rem !important; font-size: 1rem !important; }
}
/* ── Hero iPad landscape (769–1380px) ── */
@media (max-width: 1380px) and (min-width: 769px) {
.spaom-hero__logo img { height: clamp(2.5rem, min(5vw, 7vh), 4.5rem) !important; }
.spaom-hero__logos { margin-bottom: 0.75rem !important; }
.spaom-hero__eyebrow { font-size: clamp(1.8rem, min(3.6vw, 4.8vh), 2.8rem) !important; margin-bottom: 0.4rem !important; }
.spaom-hero__subtitle { font-size: clamp(1.1rem, min(2.5vw, 3.2vh), 1.8rem) !important; margin-bottom: 0.4rem !important; }
.spaom-hero__title { font-size: clamp(4.5rem, min(16vw, 14vh), 10rem) !important; line-height: 0.9 !important; margin-bottom: 0.6rem !important; }
.spaom-hero__tagline { font-size: clamp(1.4rem, min(4vw, 4.5vh), 2.8rem) !important; margin-bottom: 0.6rem !important; }
.spaom-hero__meta { font-size: clamp(1rem, min(1.8vw, 2.5vh), 1.5rem) !important; margin-bottom: 1.25rem !important; }
.spaom-hero__ctas .spaom-btn { padding: .8rem 1.8rem !important; font-size: 1rem !important; }
}
/* ── Hero compact — resoluciones ≤ 1920×1080 ── */
@media (max-height: 1080px) and (min-width: 1381px) {
.spaom-hero__logo img { height: 4.5rem !important; }
.spaom-hero__logos { margin-bottom: 0.75rem !important; }
.spaom-hero__eyebrow { font-size: 2.2rem !important; margin-bottom: 0.5rem !important; }
.spaom-hero__subtitle { font-size: 1.5rem !important; margin-bottom: 0.5rem !important; }
.spaom-hero__title { font-size: 12rem !important; line-height: 0.9 !important; margin-bottom: 0.75rem !important; }
.spaom-hero__tagline { font-size: 2.2rem !important; margin-bottom: 0.75rem !important; }
.spaom-hero__meta { font-size: 1.2rem !important; margin-bottom: 1.5rem !important; }
.spaom-hero__ctas .spaom-btn { padding: .8rem 2rem !important; font-size: 1rem !important; }
}
/* ─── Section scaffold ────────────────────────────────────────────── */
.spaom-section {
padding: var(--section-pad-v) var(--section-pad-h);
scroll-margin-top: var(--nav-height);
}
.spaom-section--soft { background: var(--spaom-bg-tinted); }
.spaom-section--dark { background: var(--spaom-navy); color: #fff; }
.spaom-container { max-width: 1120px; margin: 0 auto; }
/* Per-section padding rhythm — intentional variety, not uniform */
/* Generous: flagship / needs to breathe */
#about { padding-top: var(--section-pad-v-generous); padding-bottom: var(--section-pad-v-generous); }
#speakers { padding-top: var(--section-pad-v-generous); padding-bottom: var(--section-pad-v-generous); }
#venue { padding-top: var(--section-pad-v-generous); padding-bottom: var(--section-pad-v-generous); }
/* Compact: dense data / closing sections */
#committees { padding-top: var(--section-pad-v-compact); padding-bottom: var(--section-pad-v-compact); }
#sponsors { padding-top: var(--section-pad-v-compact); padding-bottom: var(--section-pad-v-compact); }
#contact { padding-top: var(--section-pad-v-compact); padding-bottom: var(--section-pad-v-compact); }
/* program / location / registration / travel → standard (--section-pad-v) */
/* ── Per-section backgrounds — alternating bg / surface ─────────��───────── */
/* All sections are dark. bg=#050508, surface=#1e0a2a — alternating creates */
/* clear separation while staying within the fluorescence palette. */
#about { background: var(--spaom-surface); }
#program { background: var(--spaom-bg); }
/* #speakers background set below */
#location { background: var(--spaom-surface); }
#venue { background: var(--spaom-bg); }
#registration { background: var(--spaom-surface); }
#travel { background: var(--spaom-bg); }
#committees { background: var(--spaom-surface); }
#sponsors { background: var(--spaom-bg); }
#contact { background: var(--spaom-surface); }
/* ── All sections are now dark — unified text rules ─────────────────────── */
.spaom-section {
color: var(--spaom-text);
}
.spaom-section p,
.spaom-section li,
.spaom-section-label,
.spaom-section-title { color: var(--spaom-text); }
.spaom-section-label { color: var(--spaom-muted); }
/* Contact specific */
#contact .spaom-contact__socials a {
border-color: rgba(255,255,255,.15);
color: var(--spaom-muted);
}
/* ── Container width variations — creates rhythm through density contrast ── */
/* Wide: flagship sections need to breathe and own their space */
#about .spaom-container,
#speakers .spaom-container { max-width: 1320px; }
/* Narrow: focused sections feel intimate, pull the reader in */
#travel .spaom-container { max-width: 960px; }
#contact .spaom-container { max-width: 720px; }
/* ── Venue: 2-column layout via .spaom-venue-layout wrapper ──────── */
/* The wrapper lives inside .spaom-container, below the section label */
.spaom-venue-layout {
display: grid;
grid-template-columns: 48fr 52fr;
column-gap: clamp(var(--sp-10), 5vw, var(--sp-20));
align-items: start;
}
.spaom-venue-content {
/* text column — no extra styles needed, just a flex column */
}
.spaom-venue-layout .spaom-venue-mosaic {
position: sticky;
top: calc(var(--nav-height) + var(--sp-4));
align-self: start; /* don't stretch in the grid cell */
}
/* ── Venue photo mosaic — asymmetric editorial grid ─────────────────
Up to 4 photos with varying sizes. Layout adapts to photo count:
1 → single tall frame
2 → side-by-side 60/40
3 → dominant left (2 rows) + right stack
4 → large + wide top-right + 2 small bottom
─────────────────────────────────────────────────────────────────── */
.spaom-venue-mosaic {
display: grid;
gap: 5px;
border-radius: calc(var(--spaom-radius) + 2px);
overflow: hidden;
}
.spaom-venue-mosaic__item {
overflow: hidden;
position: relative;
min-height: 0;
}
.spaom-venue-mosaic__item img {
width: 100%; height: 100%;
object-fit: cover; display: block;
transition: transform 0.45s var(--ease-out-quint);
}
.spaom-venue-mosaic__item:hover img { transform: scale(1.05); }
/* Subtle dark vignette on hover */
.spaom-venue-mosaic__item::after {
content: '';
position: absolute; inset: 0;
background: rgba(5,5,8,0);
transition: background 0.35s;
pointer-events: none;
}
.spaom-venue-mosaic__item:hover::after { background: rgba(5,5,8,.20); }
/* 1 photo */
.spaom-venue-mosaic--1 {
grid-template-columns: 1fr;
grid-template-rows: 420px;
}
/* 2 photos — 60/40 */
.spaom-venue-mosaic--2 {
grid-template-columns: 3fr 2fr;
grid-template-rows: 360px;
}
/* 3 photos — dominant left + right stack */
.spaom-venue-mosaic--3 {
grid-template-columns: 3fr 2fr;
grid-template-rows: 200px 190px;
}
.spaom-venue-mosaic--3 .spaom-venue-mosaic__item:nth-child(1) {
grid-row: 1 / 3;
}
/* 4 photos — large + wide top-right + 2 small bottom */
.spaom-venue-mosaic--4 {
grid-template-columns: 5fr 3fr 3fr;
grid-template-rows: 215px 175px;
}
.spaom-venue-mosaic--4 .spaom-venue-mosaic__item:nth-child(1) {
grid-column: 1;
grid-row: 1 / 3;
}
.spaom-venue-mosaic--4 .spaom-venue-mosaic__item:nth-child(2) {
grid-column: 2 / 4;
grid-row: 1;
}
.spaom-venue-mosaic--4 .spaom-venue-mosaic__item:nth-child(3) {
grid-column: 2;
grid-row: 2;
}
.spaom-venue-mosaic--4 .spaom-venue-mosaic__item:nth-child(4) {
grid-column: 3;
grid-row: 2;
}
/* Mobile: stack cleanly */
@media (max-width: 860px) {
.spaom-venue-layout { grid-template-columns: 1fr; }
.spaom-venue-layout .spaom-venue-mosaic {
position: static;
order: -1; /* mosaic above text on mobile */
margin-bottom: var(--sp-8);
}
.spaom-venue-mosaic--3,
.spaom-venue-mosaic--4 {
grid-template-columns: 1fr 1fr;
grid-template-rows: 160px 160px;
}
.spaom-venue-mosaic--3 .spaom-venue-mosaic__item:nth-child(1),
.spaom-venue-mosaic--4 .spaom-venue-mosaic__item:nth-child(1) {
grid-column: 1 / 3;
grid-row: 1;
}
.spaom-venue-mosaic--4 .spaom-venue-mosaic__item:nth-child(2) {
grid-column: 1; grid-row: 2;
}
.spaom-venue-mosaic--4 .spaom-venue-mosaic__item:nth-child(3) {
grid-column: 2; grid-row: 2;
}
.spaom-venue-mosaic--4 .spaom-venue-mosaic__item:nth-child(4) {
display: none;
}
}
/* Section label — rule + caps text */
.spaom-section-label {
display: inline-flex; align-items: center; gap: .75rem;
font-family: var(--spaom-font-ui);
text-transform: uppercase; letter-spacing: var(--ls-label);
font-size: var(--text-xs); font-weight: 600;
color: var(--spaom-muted);
margin-bottom: var(--sp-3);
}
.spaom-section-label::before {
content: '';
display: block; width: 52px; height: 3px; /* structural anchor for the huge title below */
background: var(--spaom-coral); /* coral rule — accent 3 is the visual anchor */
flex-shrink: 0;
}
/* Section title — Bebas Neue display */
.spaom-section-title {
font-family: var(--spaom-font-display);
font-size: clamp(2.5rem, 7vw, 5.5rem);
font-weight: 400; /* Bebas Neue only ships in Regular */
text-transform: uppercase;
line-height: 1.0;
letter-spacing: 0.05em;
margin: 0 0 var(--sp-12);
color: var(--spaom-text); /* white on dark sections */
text-wrap: balance;
/* Accent underline detail — magenta bar below title */
padding-bottom: var(--sp-4);
border-bottom: 2px solid var(--spaom-accent);
/*display: inline-block;*/
}
/* Tight: list/data-heavy or compact sections */
#committees .spaom-section-title,
#sponsors .spaom-section-title,
#contact .spaom-section-title { margin-bottom: var(--sp-10); }
/* Generous: flagship sections deserve space between title and content */
#about .spaom-section-title,
#speakers .spaom-section-title,
#venue .spaom-section-title { margin-bottom: var(--sp-16); }
/* ─── Hero background carousel ────────────────────────────────────── */
.spaom-hero__bg {
position: absolute; inset: 0;
pointer-events: none;
}
.spaom-hero__bg-slide {
position: absolute; inset: 0;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
opacity: 0;
transition: opacity 1.4s var(--ease-out-quint);
}
.spaom-hero__bg-slide.is-active { opacity: 1; }
.spaom-hero__bg-slide::after {
content: attr(data-caption);
position: absolute;
top: 1rem; right: 1.25rem;
z-index: 2;
font-family: var(--spaom-font-ui);
font-size: 0.65rem;
font-weight: 400;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255,255,255,0.75);
text-shadow: 0 1px 4px rgba(0,0,0,0.8), 0 0 12px rgba(0,0,0,0.6);
pointer-events: none;
max-width: min(320px, 40vw);
text-align: right;
line-height: 1.4;
}
.spaom-hero__bg-overlay {
position: absolute; inset: 0;
background: none;
}
/* Text legibility over unfiltered background image */
.spaom-hero__eyebrow,
.spaom-hero__subtitle,
.spaom-hero__meta {
text-shadow:
0 0 6px rgba(0,0,0,1),
0 1px 12px rgba(0,0,0,1),
0 2px 32px rgba(0,0,0,.95),
0 4px 48px rgba(0,0,0,.85);
}
.spaom-hero__title {
text-shadow:
0 0 8px rgba(0,0,0,1),
0 2px 16px rgba(0,0,0,1),
0 4px 48px rgba(0,0,0,.95),
0 8px 80px rgba(0,0,0,.9);
}
/* Vignette centrado detrás del bloque de texto */
#hero .spaom-container {
background: radial-gradient(ellipse 80% 90% at 50% 50%, rgba(0,0,0,.45) 0%, transparent 75%);
border-radius: 12px;
}
/* ─── Hero ────────────────────────────────────────────────────────── */
.spaom-hero {
background: var(--spaom-navy);
color: #fff;
height: calc(100vh - var(--nav-height)); /* fallback */
height: calc(100svh - var(--nav-height)); /* iOS-safe */
height: calc(100dvh - var(--nav-height)); /* dynamic — accounts for mobile browser chrome */
min-height: calc(480px - var(--nav-height)); /* safety floor */
padding: 1.5rem clamp(1.5rem, 5vw, 3rem); /* minimal padding — flex centering handles vertical */
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
position: relative;
overflow: hidden;
}
/* Background: deep glow matching fluorescence palette — cyan halo + yellow core */
.spaom-hero::before {
content: '';
position: absolute; inset: 0;
background-image:
radial-gradient(ellipse 90% 55% at 50% 40%, rgba(0,216,240,.14) 0%, transparent 70%),
radial-gradient(ellipse 50% 35% at 50% 42%, rgba(232,208,0,.09) 0%, transparent 55%);
pointer-events: none;
}
/* Hero uses Bebas Neue for high-impact display */
.spaom-hero { font-family: var(--spaom-font-hero); scroll-margin-top: var(--nav-height); }
/* Wide container for the hero — gives the headline maximum room */
#hero .spaom-container { max-width: 1320px; margin-top: auto; margin-bottom: auto; }
/* ── 1 · Logos ─────────────────────────────────────────────────── */
.spaom-hero__logos {
display: flex; justify-content: center;
align-items: center; gap: 2.5rem;
margin-bottom: var(--sp-5);
flex-wrap: wrap;
position: relative;
}
.spaom-hero__logo img {
width: auto; height: clamp(3.75rem, 6vw, 5.25rem); object-fit: contain;
}
/* ── 2 · Edition — Barlow Semi Condensed 600, accent color ─────── */
.spaom-hero__eyebrow {
font-family: var(--spaom-font-ui);
font-size: clamp(2.4rem, 4.5vw, 3.4rem);
font-weight: 600;
letter-spacing: 0.18em;
color: var(--spaom-blue); /* Cian Eléctrico — stands out against dark bg */
margin: 0 auto var(--sp-3);
position: relative;
}
/* ── 3 · Meeting name — Barlow Semi Condensed 600, prominent ────── */
.spaom-hero__subtitle {
font-family: var(--spaom-font-ui);
font-size: clamp(1.4rem, 3.5vw, 2.2rem);
font-weight: 600;
font-style: normal;
color: rgba(255,255,255,.88);
max-width: 52ch;
margin: 0 auto var(--sp-4);
line-height: 1.3;
letter-spacing: 0.02em;
position: relative;
text-wrap: balance;
}
/* ── 4 · Headline — Bebas Neue, brutal scale ─────────────────────── */
.spaom-hero__title {
font-family: var(--spaom-font-display);
font-size: clamp(5rem, 22vw, 16rem);
font-weight: 400; /* Bebas Neue only ships in Regular */
text-transform: uppercase;
letter-spacing: 0.06em;
line-height: 0.92;
margin: 0 0 var(--sp-4);
position: relative;
color: var(--spaom-primary); /* neon yellow — fluorescence signal */
}
/* ── 4b · Workshops tagline — between title and meta ───────────── */
.spaom-hero__tagline {
font-family: var(--spaom-font-ui);
font-size: clamp(2rem, 5.5vw, 4.5rem);
font-weight: 700;
letter-spacing: 0.1em;
color: rgba(255,255,255,.90);
margin: 0 auto var(--sp-4);
line-height: 1.2;
position: relative;
text-wrap: balance;
}
/* ── 5 · Location & dates — Barlow Semi Condensed, readable ─────── */
.spaom-hero__meta {
font-family: var(--spaom-font-ui);
font-size: clamp(1.4rem, 2.5vw, 1.8rem);
font-weight: 600;
color: var(--spaom-highlight); /* cyan — dates/location highlighted per spec */
letter-spacing: 0.06em;
text-transform: uppercase;
margin-bottom: var(--sp-4);
position: relative;
}
/* Visual separator between city and dates */
.spaom-hero__meta span + span::before {
content: ' · ';
color: var(--spaom-accent-warm); /* lime accent makes the separator pop */
letter-spacing: 0;
}
/* ── 6 · CTAs — proportioned to the massive headline ────────────── */
.spaom-hero__ctas {
display: flex; justify-content: center;
gap: 1.25rem; flex-wrap: wrap;
position: relative;
}
.spaom-hero__ctas .spaom-btn {
font-family: var(--spaom-font-ui);
padding: 1.1rem 3rem;
font-size: clamp(1rem, 1.8vw, 1.3rem);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
}
/* ─── Buttons ─────────────────────────────────────────────────────── */
.spaom-btn {
display: inline-block;
padding: 1rem 2.75rem;
border-radius: var(--spaom-radius);
font-weight: 700; font-size: 1.15rem;
letter-spacing: .08em;
text-transform: uppercase;
text-decoration: none;
transition:
transform var(--dur-sm) var(--ease-out-quint),
box-shadow var(--dur-sm) var(--ease-out-quint),
background var(--dur-xs) linear,
opacity var(--dur-sm) linear;
cursor: pointer; border: none; line-height: 1.4;
}
.spaom-btn:active {
transform: scale(0.96) !important;
transition-duration: var(--dur-xs) !important;
}
.spaom-btn--primary {
background: var(--spaom-primary);
color: var(--spaom-bg);
box-shadow: 0 4px 20px rgba(232,208,0,.35);
}
.spaom-btn--primary:hover {
background: var(--spaom-warm);
color: var(--spaom-bg);
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(240,160,0,.45);
}
.spaom-btn--outline {
background: transparent;
color: var(--spaom-highlight);
border: 1.5px solid var(--spaom-highlight);
}
.spaom-btn--outline:hover {
background: rgba(0,216,240,.12);
border-color: var(--spaom-highlight);
transform: translateY(-2px);
color: var(--spaom-highlight);
}
.spaom-btn--blue {
background: var(--spaom-highlight); color: var(--spaom-bg);
}
.spaom-btn--blue:hover {
background: var(--spaom-warm);
transform: translateY(-2px); color: var(--spaom-bg);
}
/* ─── About ───────────────────────────────────────────────────────── */
.spaom-about__intro {
font-size: clamp(1.3rem, 2.8vw, 1.75rem); /* editorial pull-quote scale — sets the tone */
font-weight: 300; /* light weight at large size = maximum contrast vs 800w title */
line-height: 1.62;
max-width: 62ch;
margin-bottom: var(--sp-16);
color: var(--spaom-text-mid);
}
.spaom-highlights {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0;
border-top: 1px solid var(--spaom-rule);
}
.spaom-highlight {
padding: var(--sp-8) var(--sp-6);
display: flex; gap: var(--sp-4); align-items: flex-start;
border-right: 1px solid var(--spaom-rule);
transition: transform 0.22s var(--ease-out-quint);
}
.spaom-highlight:hover { transform: translateY(-2px); }
.spaom-highlight:last-child { border-right: none; }
@media (max-width: 640px) {
.spaom-highlights { grid-template-columns: 1fr; }
.spaom-highlight {
border-right: none;
border-bottom: 1px solid var(--spaom-rule);
padding: var(--sp-6) 0;
}
.spaom-highlight:last-child { border-bottom: none; }
}
.spaom-highlight__icon { flex-shrink: 0; margin-top: var(--sp-1); }
.spaom-highlight__icon svg { stroke: var(--spaom-accent); } /* magenta — per spec */
.spaom-highlight__label {
font-size: var(--text-xs); text-transform: uppercase;
letter-spacing: var(--ls-label); font-weight: 700;
color: var(--spaom-highlight); margin-bottom: var(--sp-1); /* cyan — per spec */
}
.spaom-highlight__value {
font-family: var(--spaom-font-serif);
font-size: clamp(1rem, 1.4vw, 1.2rem);
font-weight: 600;
letter-spacing: 0.02em;
color: var(--spaom-text); margin: 0; /* white — was navy (invisible on dark) */
line-height: var(--lh-caption);
font-variant-numeric: tabular-nums;
}
/* ─── Speakers ────────────────────────────────────────────────────── */
/* Dark section — brutal contrast break between program (soft) and location (soft) */
#speakers {
background: var(--spaom-navy);
}
#speakers .spaom-section-label { color: rgba(255,255,255,.5); }
#speakers .spaom-section-label::before { background: var(--spaom-accent-warm); } /* saffron rule on dark — stronger contrast */
#speakers .spaom-section-title { color: #fff; }
#speakers .spaom-speaker-card__name { color: rgba(253,252,250,.95); }
#speakers .spaom-speaker-card__inst { color: rgba(253,252,250,.55); }
#speakers .spaom-speaker-card__avatar { background: rgba(255,255,255,.07); }
.spaom-speakers-grid {
display: grid;
/* 170px minimum — prevents cramped columns at mid-widths */
grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
gap: var(--sp-12) var(--sp-6);
}
.spaom-speaker-card {
text-align: center;
/* No card border — clean grid */
transition: transform .2s cubic-bezier(.22,1,.36,1);
}
.spaom-speaker-card:hover { transform: translateY(-3px); }
.spaom-speaker-card__avatar {
width: 120px; height: 120px; /* larger — speakers are the focal point */
border-radius: 50%;
background: var(--spaom-bg-tinted);
margin: 0 auto 1rem;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
outline: 3px solid transparent;
outline-offset: 3px;
transition: outline-color .2s;
}
.spaom-speaker-card:hover .spaom-speaker-card__avatar {
outline-color: var(--spaom-accent-warm);
}
.spaom-speaker-card__avatar img {
width: 100%; height: 100%;
object-fit: cover; border-radius: 50%;
}
.spaom-speaker-card__name {
font-weight: 700; font-size: var(--text-base);
margin-bottom: var(--sp-1); color: var(--spaom-navy);
line-height: var(--lh-caption);
}
.spaom-speaker-card__inst {
font-size: var(--text-sm); color: var(--spaom-text-muted);
line-height: var(--lh-caption);
}
/* Default: no custom color selected — underline on the */
.spaom-speaker-card__name a:not(:has(.has-inline-color)) {
color: inherit !important;
text-decoration: underline;
text-decoration-color: rgba(255,255,255,.35);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: text-decoration-color var(--dur-sm);
}
.spaom-speaker-card__name a:not(:has(.has-inline-color)):hover {
text-decoration-color: rgba(255,255,255,.85);
}
/* Custom color selected — underline on the so it matches text color */
.spaom-speaker-card__name a:has(.has-inline-color) {
color: inherit !important;
text-decoration: none;
}
.spaom-speaker-card__name a .has-inline-color {
text-decoration: underline;
text-decoration-color: currentColor;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
opacity: .75;
transition: opacity var(--dur-sm);
}
.spaom-speaker-card__name a:hover .has-inline-color {
opacity: 1;
}
/* ─── Location ────────────────────────────────────────────────────── */
.spaom-location-grid {
display: grid;
grid-template-columns: 1fr 1fr; /* 50/50 — 4 text blocks vs map */
gap: var(--sp-16);
align-items: start;
}
@media (max-width: 860px) { .spaom-location-grid { grid-template-columns: 1fr; gap: var(--sp-10); } }
/* ── Text column — 4 stacked paragraphs ─────────────────────────── */
.spaom-location-text {
display: flex; flex-direction: column; gap: var(--sp-8);
}
.spaom-location-para {
padding-bottom: var(--sp-8);
border-bottom: 1px solid var(--spaom-rule); /* subtle white rule — visible on dark surface */
}
.spaom-location-para:last-child { border-bottom: none; padding-bottom: 0; }
.spaom-location-para__title {
font-family: var(--spaom-font-ui);
font-size: var(--text-lead);
font-weight: 700;
letter-spacing: 0.01em;
color: var(--spaom-primary); /* neon yellow — was navy (invisible on dark) */
margin: 0 0 var(--sp-3);
}
.spaom-location-para__body {
color: var(--spaom-text-mid);
font-size: var(--text-base); line-height: var(--lh-body);
margin: 0;
}
/* ── Map column — sticky so it follows scroll through all 4 blocks ── */
.spaom-map-wrapper {
border-radius: var(--spaom-radius);
overflow: hidden;
aspect-ratio: 3/4; /* taller than before — more vertical room for 4-para scroll */
box-shadow: 0 4px 32px rgba(13,27,42,.16);
position: sticky;
top: calc(var(--nav-height) + var(--sp-6));
}
.spaom-map-wrapper iframe { width: 100%; height: 100%; border: none; display: block; }
/* ─── Location gallery ─────────────────────────────────────────────── */
.spaom-location-gallery {
position: relative;
margin-top: var(--sp-16);
border-radius: var(--spaom-radius);
overflow: hidden;
aspect-ratio: 16 / 6;
background: var(--spaom-navy);
}
.spaom-gallery-track { position: absolute; inset: 0; }
.spaom-gallery-slide {
position: absolute; inset: 0;
opacity: 0;
transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.spaom-gallery-slide.is-active { opacity: 1; }
.spaom-gallery-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.spaom-gallery-btn {
position: absolute; top: 50%; transform: translateY(-50%);
width: 44px; height: 44px; border-radius: 50%;
background: rgba(13,27,42,.55); border: 1.5px solid rgba(255,255,255,.3);
color: #fff; font-size: 1.5rem; line-height: 1;
cursor: pointer; display: flex; align-items: center; justify-content: center;
transition: background 0.18s, border-color 0.18s;
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
z-index: 2;
}
.spaom-gallery-btn:hover { background: rgba(13,27,42,.85); border-color: rgba(255,255,255,.6); }
.spaom-gallery-btn--prev { left: 1rem; }
.spaom-gallery-btn--next { right: 1rem; }
.spaom-gallery-dots {
position: absolute; bottom: .875rem; left: 50%; transform: translateX(-50%);
display: flex; gap: 6px; z-index: 2;
}
.spaom-gallery-dot {
width: 7px; height: 7px; border-radius: 50%;
background: rgba(255,255,255,.4); border: none; padding: 0; cursor: pointer;
transition: background 0.2s, transform 0.2s;
}
.spaom-gallery-dot.is-active { background: #fff; transform: scale(1.25); }
@media (max-width: 600px) {
.spaom-location-gallery { aspect-ratio: 4 / 3; }
.spaom-gallery-btn { width: 44px; height: 44px; font-size: 1.25rem; } /* 44px minimum touch target */
}
/* ─── Venue ───────────────────────────────────────────────────────── */
.spaom-venue__address {
font-size: var(--text-xs); letter-spacing: var(--ls-label);
text-transform: uppercase; font-weight: 600;
color: var(--spaom-blue);
margin-bottom: var(--sp-6);
}
.spaom-venue__desc {
color: var(--spaom-text-mid);
font-size: var(--text-base); line-height: var(--lh-body);
max-width: 68ch; margin-bottom: var(--sp-8);
}
/* ─── Registration ────────────────────────────────────────────────── */
.spaom-reg-note {
text-align: center; font-style: italic;
color: var(--spaom-text-muted);
margin-top: var(--sp-10); font-size: var(--text-base);
}
.spaom-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--sp-6);
border-radius: var(--spaom-radius);
}
.spaom-card {
background: var(--spaom-surface);
border: 1px solid rgba(204,0,204,.20); /* 20% magenta accent border per spec */
border-radius: var(--spaom-radius);
padding: 2.5rem 2rem;
transition: background 0.2s var(--ease-out-quint), border-color 0.2s;
}
.spaom-card:hover {
background: rgba(30,10,42,.85);
border-color: rgba(204,0,204,.40);
}
/* Primary card (Register) gets a yellow top stripe for hierarchy */
.spaom-cards .spaom-card:first-child {
border-top: 3px solid var(--spaom-primary);
}
.spaom-card__title {
font-family: var(--spaom-font-serif);
font-size: var(--text-sub); font-weight: 700;
line-height: var(--lh-sub);
letter-spacing: 0.01em;
color: var(--spaom-text); margin-bottom: var(--sp-3); /* white — was navy (invisible) */
}
.spaom-card__desc {
color: var(--spaom-text-mid);
margin-bottom: var(--sp-8);
font-size: var(--text-base); line-height: var(--lh-body);
}
/* ─── Travel ──────────────────────────────────────────────────────── */
.spaom-travel__subheading {
font-family: var(--spaom-font-ui);
font-size: var(--text-base);
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--spaom-accent);
margin-bottom: var(--sp-6);
}
.spaom-travel-cols {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--sp-8) var(--sp-6);
margin-bottom: var(--sp-16);
}
.spaom-travel-col {
padding-top: var(--sp-6);
border-top: 2px solid var(--spaom-accent);
transition: transform 0.22s var(--ease-out-quint);
}
.spaom-travel-col:hover { transform: translateY(-3px); }
.spaom-travel-col__icon { margin-bottom: var(--sp-4); }
.spaom-travel-col__icon svg { stroke: var(--spaom-accent); }
.spaom-travel-col__title {
font-weight: 700; font-size: var(--text-base);
color: var(--spaom-text); margin-bottom: var(--sp-2);
}
.spaom-travel-col__text { font-size: var(--text-base); color: var(--spaom-text-mid); line-height: var(--lh-body); }
.spaom-travel-col__text strong { color: var(--spaom-text); }
.spaom-travel-col__text em { color: var(--spaom-primary); font-style: normal; font-weight: 600; }
.spaom-travel-col__text a { color: var(--spaom-highlight); }
.spaom-travel-col__text br + br { display: block; content: ''; margin-top: var(--sp-3); }
.spaom-accommodation {
border-top: 2px solid var(--spaom-rule);
padding-top: var(--sp-8);
}
.spaom-accommodation h3 {
font-family: var(--spaom-font-serif);
font-size: var(--text-sub); font-weight: 700;
line-height: var(--lh-sub); letter-spacing: 0.01em;
color: var(--spaom-text); margin-bottom: var(--sp-6);
}
.spaom-accommodation-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--sp-8) var(--sp-6);
align-items: start;
}
@media (max-width: 900px) {
.spaom-accommodation-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
.spaom-accommodation-grid { grid-template-columns: 1fr; }
}
.spaom-accommodation-category {
display: flex;
flex-direction: column;
}
.spaom-accommodation-category h4 {
font-family: var(--spaom-font-ui);
font-size: var(--text-base); font-weight: 700;
color: var(--spaom-text);
min-height: 3.6em;
display: flex; flex-direction: column; justify-content: flex-start;
margin-bottom: var(--sp-3);
padding-bottom: var(--sp-2);
border-bottom: 1px solid var(--spaom-rule);
}
.spaom-accommodation-category h4 span {
font-weight: 400; font-size: var(--text-sm);
color: var(--spaom-text-mid);
display: block;
}
.spaom-accommodation-category ul {
list-style: none; padding: 0; margin: 0;
}
.spaom-accommodation-category li {
color: var(--spaom-text-mid);
font-size: var(--text-base);
line-height: var(--lh-body);
padding: var(--sp-1) 0 var(--sp-1) 1.1em;
text-indent: -1.1em;
border-bottom: 1px solid rgba(255,255,255,.04);
}
.spaom-accommodation-category li::before {
content: '·';
color: var(--spaom-accent);
display: inline-block;
width: 1.1em;
}
.spaom-accommodation-category em { font-style: normal; color: var(--spaom-text-mid); font-size: var(--text-sm); }
/* ─── Committees ──────────────────────────────────────────────────── */
.spaom-committees {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--sp-12) var(--sp-16);
}
@media (max-width: 640px) {
.spaom-committees { grid-template-columns: 1fr; }
}
.spaom-committee__title {
font-family: var(--spaom-font-serif);
font-size: var(--text-lead); font-weight: 700;
line-height: var(--lh-sub);
letter-spacing: 0.01em;
color: var(--spaom-text); /* white — was navy (invisible on dark) */
margin-bottom: var(--sp-6);
padding-bottom: var(--sp-3);
border-bottom: 2px solid var(--spaom-highlight); /* cyan underline — precision science feel */
display: inline-block;
}
.spaom-committee__list { list-style: none; margin: 0; padding: 0; }
.spaom-committee__list li {
padding: var(--sp-2) 0;
border-bottom: 1px solid var(--spaom-rule);
font-size: var(--text-base); color: var(--spaom-text-mid);
line-height: var(--lh-caption);
}
.spaom-committee__list li:last-child { border-bottom: none; }
/* ─── Sponsors ────────────────────────────────────────────────────── */
.spaom-sponsors__logos {
display: flex; flex-wrap: wrap;
gap: var(--sp-8) var(--sp-12);
justify-content: center;
align-items: center; margin-bottom: var(--sp-8);
}
.spaom-sponsors__logos img {
height: 64px; width: auto;
object-fit: contain;
transition: transform .25s ease, box-shadow .25s ease;
}
.spaom-sponsors__logos img:hover {
transform: scale(1.08);
}
.spaom-sponsors__cta {
text-align: center;
color: var(--spaom-text-muted);
font-size: var(--text-base);
line-height: var(--lh-body);
}
/* ─── Institutions ────────────────────────────────────────────────── */
.spaom-institution-groups {
display: flex;
flex-direction: column;
gap: var(--sp-16);
}
.spaom-institution-group {
padding-bottom: var(--sp-20);
}
.spaom-institution-group__title {
font-family: var(--spaom-font-serif);
font-size: var(--text-lead);
font-weight: 700;
color: var(--spaom-text);
margin-bottom: var(--sp-16);
padding-bottom: var(--sp-3);
border-bottom: 2px solid var(--spaom-highlight);
display: block;
text-align: center;
}
.spaom-institution-logos {
display: flex;
flex-wrap: wrap;
gap: var(--sp-16) var(--sp-20);
align-items: center;
justify-content: center;
}
.spaom-institution-logo img {
height: 120px;
width: auto;
max-width: 260px;
object-fit: contain;
transition: transform .25s ease;
}
.spaom-institution-logo img:hover {
transform: scale(1.08);
}
/* ─── Contact ─────────────────────────────────────────────────────── */
/* Label + title follow standard left-aligned section pattern.
Only the email/socials block is centered. */
#contact .spaom-contact__info {
text-align: center;
}
.spaom-contact__info {
display: flex; flex-direction: column;
align-items: center; gap: var(--sp-8);
/* Generous top margin separates info from section title */
margin-top: var(--sp-4);
}
.spaom-contact__email a {
font-family: var(--spaom-font-serif);
font-size: clamp(var(--text-lead), 3vw, 1.75rem);
font-weight: 500;
letter-spacing: 0.02em;
color: var(--spaom-primary); /* neon yellow — was navy (invisible on dark surface) */
text-decoration: none;
border-bottom: 2px solid var(--spaom-primary);
padding-bottom: .15em;
transition: color .2s, border-color .2s;
}
.spaom-contact__email a:hover { color: var(--spaom-warm); border-color: var(--spaom-warm); }
.spaom-contact__socials { display: flex; gap: .875rem; }
.spaom-contact__socials a {
display: flex; align-items: center; justify-content: center;
width: 44px; height: 44px;
background: transparent;
border: 1.5px solid var(--spaom-rule);
border-radius: var(--spaom-radius);
color: var(--spaom-text-muted);
transition: background .2s, color .2s, border-color .2s;
}
.spaom-contact__socials a:hover {
background: var(--spaom-accent-warm);
color: var(--spaom-navy); border-color: var(--spaom-accent-warm);
}
/* ─── Footer ──────────────────────────────────────────────────────── */
.spaom-footer {
background: var(--spaom-navy);
color: rgba(253,252,250,.4);
text-align: center;
padding: var(--sp-6) var(--sp-8);
font-size: var(--text-sm);
letter-spacing: var(--ls-label);
border-top: 1px solid rgba(255,255,255,.06);
/* Break out of section's horizontal padding and flush to the bottom */
margin-top: var(--sp-16);
margin-left: calc(-1 * var(--section-pad-h));
margin-right: calc(-1 * var(--section-pad-h));
margin-bottom: calc(-1 * var(--section-pad-v-compact));
}
/* ═══════════════════════════════════════════════════════════════════════════
* Fluorescence microscopy decorative elements
* Shapes: dendrite, filament, vesicles, network, astrocyte
* Injected via PHP (decorations.php) + JS in render.php
* ═══════════════════════════════════════════════════════════════════════════ */
#hero, #about, #program, #speakers, #location, #venue,
#registration, #travel, #sponsors, #committees, #contact {
position: relative; overflow: hidden;
}
#hero > .spaom-container,
#about > .spaom-container,
#program > .spaom-container,
#speakers > .spaom-container,
#location > .spaom-container,
#venue > .spaom-container,
#registration > .spaom-container,
#travel > .spaom-container,
#sponsors > .spaom-container,
#committees > .spaom-container,
#contact > .spaom-container { position: relative; z-index: 1; }
.spaom-deco {
position: absolute;
pointer-events: none;
z-index: 0;
line-height: 0;
}
.spaom-deco svg { display: block; }
/* ── Positions ── */
.spaom-deco--br { bottom: -30px; right: -30px; }
.spaom-deco--bl { bottom: -30px; left: -30px; }
.spaom-deco--tr { top: -20px; right: -20px; }
.spaom-deco--tl { top: 20px; left: 20px; }
.spaom-deco--mr { right: -30px; top: 50%; transform: translateY(-50%); }
.spaom-deco--ml { left: -30px; top: 50%; transform: translateY(-50%); }
.spaom-deco--center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.spaom-deco--fill { top: 0; left: 0; width: 100%; height: 100%; }
.spaom-deco--fill svg { width: 100%; height: 100%; }
/* ── Sizes ── */
.spaom-deco--400 { width: 400px; height: 400px; }
.spaom-deco--380 { width: 380px; height: 380px; }
.spaom-deco--360 { width: 360px; height: 360px; }
.spaom-deco--340 { width: 340px; height: 340px; }
.spaom-deco--320 { width: 320px; height: 320px; }
.spaom-deco--300 { width: 300px; height: 300px; }
.spaom-deco--280 { width: 280px; height: 280px; }
.spaom-deco--260 { width: 260px; height: 260px; }
.spaom-deco--240 { width: 240px; height: 240px; }
.spaom-deco--220 { width: 220px; height: 220px; }
.spaom-deco--200 { width: 200px; height: 200px; }
@media (max-width: 768px) {
.spaom-deco--br { display: none; }
.spaom-deco--400 { width: 240px; height: 240px; }
.spaom-deco--380 { width: 228px; height: 228px; }
.spaom-deco--360 { width: 216px; height: 216px; }
.spaom-deco--340 { width: 204px; height: 204px; }
.spaom-deco--320 { width: 192px; height: 192px; }
.spaom-deco--300 { width: 180px; height: 180px; }
.spaom-deco--280 { width: 168px; height: 168px; }
.spaom-deco--260 { width: 156px; height: 156px; }
.spaom-deco--240 { width: 144px; height: 144px; }
.spaom-deco--220 { width: 132px; height: 132px; }
.spaom-deco--200 { width: 120px; height: 120px; }
}
/* ─── Animation system ────────────────────────────────────────────── */
/* Hero entrance — initial states (active only when .spaom-anim-ready set by JS) */
.spaom-anim-ready .spaom-hero__logos,
.spaom-anim-ready .spaom-hero__eyebrow,
.spaom-anim-ready .spaom-hero__subtitle,
.spaom-anim-ready .spaom-hero__title,
.spaom-anim-ready .spaom-hero__tagline,
.spaom-anim-ready .spaom-hero__meta,
.spaom-anim-ready .spaom-hero__ctas {
opacity: 0;
transform: translateY(20px);
transition:
opacity var(--dur-xl) var(--ease-out-quint),
transform var(--dur-xl) var(--ease-out-quint);
}
.spaom-anim-ready .spaom-hero__title {
transform: translateY(48px); /* Larger title needs more travel for proportional drama */
}
.spaom-anim-ready .spaom-hero__logos {
transform: translateY(12px); /* Logos settle from slightly above */
}
/* Hero revealed */
.spaom-anim-ready .spaom-hero-visible {
opacity: 1 !important;
transform: none !important;
}
/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
.spaom-anim-ready .spaom-hero__logos,
.spaom-anim-ready .spaom-hero__eyebrow,
.spaom-anim-ready .spaom-hero__subtitle,
.spaom-anim-ready .spaom-hero__title,
.spaom-anim-ready .spaom-hero__tagline,
.spaom-anim-ready .spaom-hero__meta,
.spaom-anim-ready .spaom-hero__ctas {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.spaom-btn:active { transform: none !important; }
.spaom-nav__links a::after { transition: none !important; }
}
/* ─── Skip to content link ────────────────────────────────────────── */
.spaom-skip-link {
position: absolute;
top: -100%;
left: 1rem;
z-index: 2000;
padding: .5rem 1.25rem;
background: var(--spaom-accent-warm);
color: var(--spaom-navy);
font-weight: 700;
font-size: var(--text-sm);
letter-spacing: .03em;
text-decoration: none;
border-radius: var(--spaom-radius);
transition: top var(--dur-sm) var(--ease-out-quint);
white-space: nowrap;
}
.spaom-skip-link:focus {
top: .75rem;
outline: 3px solid var(--spaom-navy);
outline-offset: 2px;
}
/* ─── Focus rings (accessibility) ─────────────────────────────────── */
/* Remove default outline and replace with consistent, branded rings. */
/* Only visible on keyboard navigation (:focus-visible), not on click. */
.spaom-btn:focus-visible {
outline: 3px solid var(--spaom-accent-warm);
outline-offset: 3px;
}
.spaom-nav__brand:focus-visible {
outline: 2px solid var(--spaom-accent-warm);
outline-offset: 4px;
border-radius: 2px;
}
.spaom-nav__links a:focus-visible {
outline: 2px solid var(--spaom-accent-warm);
outline-offset: 4px;
border-radius: 2px;
color: var(--spaom-accent-warm);
}
.spaom-nav__burger:focus-visible {
outline: 2px solid var(--spaom-accent-warm);
outline-offset: 4px;
border-radius: 2px;
}
.spaom-gallery-btn:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
.spaom-gallery-dot:focus-visible {
outline: 2px solid rgba(255,255,255,.9);
outline-offset: 3px;
}
.spaom-contact__socials a:focus-visible {
outline: 2px solid var(--spaom-accent-warm);
outline-offset: 2px;
border-color: var(--spaom-accent-warm);
}
.spaom-contact__email a:focus-visible {
outline: 2px solid var(--spaom-accent-warm);
outline-offset: 4px;
}
.spaom-sponsors__logos a:focus-visible {
outline: 2px solid var(--spaom-accent-warm);
outline-offset: 4px;
}
/* ─── Editor helpers ──────────────────────────────────────────────── */
.spaom-editor-nav-placeholder {
background: var(--spaom-navy);
color: rgba(255,255,255,.5);
font-size: .75rem;
text-align: center;
padding: .6rem 1rem;
font-style: italic;
pointer-events: none;
letter-spacing: .04em;
}
.editor-styles-wrapper .spaom-section,
.editor-styles-wrapper .spaom-hero {
outline: 2px dashed rgba(13,107,71,.25);
outline-offset: -2px;
}
.spaom-avatar-upload-btn {
background: none;
border: 1.5px dashed var(--spaom-rule);
border-radius: 50%;
width: 100px; height: 100px;
display: flex; align-items: center; justify-content: center;
margin: 0 auto 1rem;
overflow: hidden;
cursor: pointer;
}
/* ─── Back-to-top button ──────────────────────────────────────────── */
.spaom-back-top {
position: fixed;
bottom: 2rem;
right: 2rem;
z-index: 999;
width: 48px; height: 48px;
border-radius: 50%;
background: var(--spaom-surface);
border: 1.5px solid rgba(204,0,204,.35); /* magenta accent border */
color: var(--spaom-primary); /* neon yellow arrow */
display: flex; align-items: center; justify-content: center;
cursor: pointer;
box-shadow: 0 4px 20px rgba(0,0,0,.5), 0 0 0 0 rgba(232,208,0,0);
/* hidden by default — JS adds .is-visible */
opacity: 0;
transform: translateY(12px) scale(0.88);
transition:
opacity var(--dur-md) var(--ease-out-quint),
transform var(--dur-md) var(--ease-out-quint),
background var(--dur-xs) linear,
box-shadow var(--dur-sm) linear;
pointer-events: none;
}
.spaom-back-top.is-visible {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: auto;
}
.spaom-back-top:hover {
background: rgba(30,10,42,.95);
border-color: var(--spaom-primary);
box-shadow: 0 6px 24px rgba(0,0,0,.55), 0 0 18px rgba(232,208,0,.20);
transform: translateY(-3px) scale(1);
}
.spaom-back-top:active {
transform: scale(0.92) !important;
transition-duration: var(--dur-xs) !important;
}
.spaom-back-top:focus-visible {
outline: 2px solid var(--spaom-primary);
outline-offset: 3px;
}
/* ─── Page template ────────────────────────────────────────────────── */
.spaom-page-body {
margin: 0; padding: 0;
background: var(--spaom-bg);
color: var(--spaom-text);
font-family: var(--spaom-font-ui);
font-size: var(--text-base);
line-height: var(--lh-body);
}
/* .spaom-onepage-page inherits all .spaom-onepage styles */
.spaom-onepage-page {
background: var(--spaom-bg);
min-height: 100vh;
}
.spaom-page-main {
padding: 4rem clamp(1.5rem, 5vw, 6rem);
background: var(--spaom-surface);
position: relative;
overflow: hidden;
}
.spaom-page-container { max-width: 860px; margin: 0 auto; position: relative; z-index: 1; }
.spaom-page-title {
font-family: var(--spaom-font-display);
font-size: clamp(2.5rem, 6vw, 5rem);
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--spaom-primary);
line-height: 0.95;
margin: 0 0 2rem;
}
.spaom-page-content {
color: var(--spaom-text-mid);
font-size: var(--text-base);
line-height: var(--lh-body);
font-family: var(--spaom-font-ui);
}
.spaom-page-content h2, .spaom-page-content h3 {
font-family: var(--spaom-font-display);
color: var(--spaom-text);
text-transform: uppercase;
letter-spacing: 0.04em;
margin: 2rem 0 1rem;
}
.spaom-page-content a { color: var(--spaom-highlight); }
.spaom-page-content p { margin-bottom: 1rem; }
/* Page decorations — más visibles que en secciones */
.remoa-page-deco { filter: brightness(2.5); }
/* Fix brand alignment on page templates */
.spaom-onepage-page .spaom-nav__brand {
display: flex !important;
align-items: center !important;
gap: .6rem;
line-height: 1;
}
/* Footer standalone — reset negative margins from contact section context */
.spaom-onepage-page .spaom-footer {
margin: 0;
font-family: var(--spaom-font-ui);
font-size: var(--text-sm);
letter-spacing: var(--ls-label);
text-transform: uppercase;
}
/* WP block editor resets for page template */
.spaom-page-body .wp-block-post-title { display: none; }
.spaom-page-body .entry-content,
.spaom-page-body .wp-site-blocks { background: transparent; }
@media (max-width: 480px) {
.spaom-back-top { bottom: 1.25rem; right: 1.25rem; width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
.spaom-back-top { transition: opacity var(--dur-sm) linear; transform: none !important; }
}