/* =========================================================
Prompt Victoria AI Conference — Shared Stylesheet
Design tokens, base styles, and reusable components.
========================================================= */
/* ---------- 1. Design Tokens ---------- */
:root {
/* Brand palette — sampled from the lanyard & logo artwork */
--pv-navy: #2B2D7E; /* Deep purple/navy — primary dark */
--pv-navy-dk: #1E1F5C;
--pv-teal: #00A8B5; /* Signature teal */
--pv-teal-dk: #007F89;
--pv-green: #4FB84D;
--pv-orange: #F58220; /* "AI CONFERENCE" accent */
--pv-orange-dk:#D76A0C;
--pv-gold: #FBB040;
--pv-coral: #E8423A;
/* Neutrals */
--pv-ink: #0F1024; /* Near-black for body text */
--pv-graphite: #3A3C52;
--pv-slate: #6B6E85;
--pv-mute: #9498AE;
--pv-line: #E4E6EF;
--pv-cloud: #EFF1F7;
--pv-canvas: #F7F8FB;
--pv-white: #FFFFFF;
/* Signature gradient — purple → teal → green (from lanyard) */
--pv-gradient: linear-gradient(135deg, #2B2D7E 0%, #00A8B5 55%, #4FB84D 100%);
--pv-gradient-soft: linear-gradient(135deg, rgba(43,45,126,0.08) 0%, rgba(0,168,181,0.08) 55%, rgba(79,184,77,0.08) 100%);
/* Typography */
--pv-font-display: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
--pv-font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
/* Type scale (modular — 1.25 ratio) */
--pv-fs-xs: 0.75rem; /* 12 */
--pv-fs-sm: 0.875rem; /* 14 */
--pv-fs-base: 1rem; /* 16 */
--pv-fs-lg: 1.125rem; /* 18 */
--pv-fs-xl: 1.375rem; /* 22 */
--pv-fs-2xl: 1.75rem; /* 28 */
--pv-fs-3xl: 2.25rem; /* 36 */
--pv-fs-4xl: 3rem; /* 48 */
--pv-fs-5xl: 4rem; /* 64 */
/* Spacing scale */
--pv-s-1: 4px;
--pv-s-2: 8px;
--pv-s-3: 12px;
--pv-s-4: 16px;
--pv-s-5: 24px;
--pv-s-6: 32px;
--pv-s-7: 48px;
--pv-s-8: 64px;
--pv-s-9: 96px;
/* Radius */
--pv-r-sm: 4px;
--pv-r-md: 8px;
--pv-r-lg: 12px;
--pv-r-xl: 20px;
--pv-r-pill: 999px;
/* Elevation */
--pv-shadow-sm: 0 1px 2px rgba(15,16,36,0.06), 0 1px 1px rgba(15,16,36,0.04);
--pv-shadow-md: 0 6px 16px rgba(15,16,36,0.08), 0 2px 4px rgba(15,16,36,0.04);
--pv-shadow-lg: 0 20px 40px rgba(15,16,36,0.12), 0 6px 12px rgba(15,16,36,0.06);
/* Layout */
--pv-container: 1400px;
--pv-gutter: 24px;
/* Motion */
--pv-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
--pv-dur: 200ms;
}
/* ---------- 2. Base reset & body ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: var(--pv-font-body);
font-size: var(--pv-fs-base);
line-height: 1.6;
color: var(--pv-ink);
background: var(--pv-white);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
img, svg { display: block; max-width: 100%; height: auto; }
a {
color: var(--pv-teal-dk);
text-decoration: none;
transition: color var(--pv-dur) var(--pv-ease);
}
a:hover { color: var(--pv-orange); }
a:focus-visible {
outline: 2px solid var(--pv-orange);
outline-offset: 2px;
border-radius: 2px;
}
/* ---------- 3. Typography ---------- */
h1, h2, h3, h4, h5, h6 {
font-family: var(--pv-font-display);
font-weight: 700;
color: var(--pv-ink);
margin: 0 0 var(--pv-s-4);
line-height: 1.15;
letter-spacing: -0.01em;
}
h1 { font-size: clamp(2.25rem, 4vw + 1rem, var(--pv-fs-5xl)); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.75rem, 2.5vw + 1rem, var(--pv-fs-4xl)); }
h3 { font-size: var(--pv-fs-2xl); }
h4 { font-size: var(--pv-fs-xl); }
h5 { font-size: var(--pv-fs-lg); }
h6 { font-size: var(--pv-fs-base); text-transform: uppercase; letter-spacing: 0.08em; }
p { margin: 0 0 var(--pv-s-4); }
.pv-eyebrow {
display: inline-block;
font-family: var(--pv-font-display);
font-size: var(--pv-fs-sm);
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--pv-orange);
margin-bottom: var(--pv-s-3);
}
.pv-lede { font-size: var(--pv-fs-lg); color: var(--pv-graphite); }
.pv-text-gradient {
background: var(--pv-gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* ---------- 4. Layout helpers ---------- */
.pv-container {
width: 100%;
max-width: var(--pv-container);
margin-inline: auto;
padding-inline: var(--pv-gutter);
}
@media (min-width: 960px) {
.pv-container { padding-inline: 48px; }
}
.pv-section { padding-block: clamp(48px, 8vw, 96px); }
.pv-section--tight { padding-block: clamp(32px, 5vw, 64px); }
.pv-grid { display: grid; gap: var(--pv-s-5); }
.pv-stack > * + * { margin-top: var(--pv-s-4); }
.pv-sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Skip link for keyboard users */
.pv-skip-link {
position: absolute; left: -9999px; top: 0;
background: var(--pv-ink); color: var(--pv-white);
padding: var(--pv-s-3) var(--pv-s-5);
font-weight: 600; z-index: 9999;
}
.pv-skip-link:focus { left: 16px; top: 16px; }
/* ---------- 5. Buttons ---------- */
.pv-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--pv-s-2);
font-family: var(--pv-font-display);
font-weight: 600;
font-size: var(--pv-fs-base);
line-height: 1;
padding: 14px 24px;
border: 2px solid transparent;
border-radius: var(--pv-r-pill);
cursor: pointer;
text-decoration: none;
transition: transform var(--pv-dur) var(--pv-ease),
background-color var(--pv-dur) var(--pv-ease),
border-color var(--pv-dur) var(--pv-ease),
color var(--pv-dur) var(--pv-ease),
box-shadow var(--pv-dur) var(--pv-ease);
white-space: nowrap;
}
.pv-btn:hover { transform: translateY(-1px); }
.pv-btn:active { transform: translateY(0); }
.pv-btn:focus-visible {
outline: 3px solid var(--pv-gold);
outline-offset: 2px;
}
/* Primary — the headline action (orange CTA) */
.pv-btn--primary {
background: var(--pv-orange);
color: var(--pv-white);
box-shadow: var(--pv-shadow-sm);
}
.pv-btn--primary:hover { background: var(--pv-orange-dk); color: var(--pv-white); box-shadow: var(--pv-shadow-md); }
/* Secondary — subdued inverse */
.pv-btn--secondary {
background: var(--pv-navy);
color: var(--pv-white);
}
.pv-btn--secondary:hover { background: var(--pv-navy-dk); color: var(--pv-white); }
/* Ghost — outline on light bg */
.pv-btn--ghost {
background: transparent;
color: var(--pv-navy);
border-color: var(--pv-navy);
}
.pv-btn--ghost:hover { background: var(--pv-navy); color: var(--pv-white); }
/* On-dark ghost (for use over gradient / dark sections) */
.pv-btn--ghost-inverse {
background: transparent;
color: var(--pv-white);
border-color: rgba(255,255,255,0.6);
}
.pv-btn--ghost-inverse:hover { background: var(--pv-white); color: var(--pv-navy); border-color: var(--pv-white); }
.pv-btn--sm { padding: 10px 18px; font-size: var(--pv-fs-sm); }
.pv-btn--lg { padding: 18px 32px; font-size: var(--pv-fs-lg); }
/* ---------- 6. Forms ---------- */
.pv-field {
display: block;
width: 100%;
font-family: var(--pv-font-body);
font-size: var(--pv-fs-base);
color: var(--pv-ink);
background: var(--pv-white);
border: 1.5px solid var(--pv-line);
border-radius: var(--pv-r-md);
padding: 12px 16px;
transition: border-color var(--pv-dur) var(--pv-ease), box-shadow var(--pv-dur) var(--pv-ease);
}
.pv-field::placeholder { color: var(--pv-mute); }
.pv-field:focus {
outline: none;
border-color: var(--pv-teal);
box-shadow: 0 0 0 3px rgba(0,168,181,0.18);
}
.pv-label {
display: block;
font-size: var(--pv-fs-sm);
font-weight: 600;
color: var(--pv-graphite);
margin-bottom: var(--pv-s-2);
}
/* ---------- 7. Header / Navigation ---------- */
.pv-header {
position: sticky;
top: 0;
z-index: 50;
background: var(--pv-white);
border-bottom: 1px solid var(--pv-line);
}
.pv-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--pv-s-5);
min-height: 76px;
}
.pv-header__brand {
display: inline-flex;
align-items: center;
gap: var(--pv-s-3);
text-decoration: none;
}
.pv-header__brand img {
height: 100px;
width: auto;
background: transparent;
padding: 0;
margin: 0;
box-shadow: none;
}
@media (min-width: 960px) {
.pv-header__brand img {
height: 200px;
margin-bottom: -100px;
background: white;
padding-left: 15px;
padding-right: 15px;
box-shadow: var(--pv-shadow-md);
}
}
.pv-header__brand-text {
font-family: var(--pv-font-display);
font-weight: 700;
font-size: var(--pv-fs-base);
line-height: 1.1;
color: var(--pv-ink);
}
.pv-header__brand-text span {
display: block;
font-weight: 500;
font-size: var(--pv-fs-xs);
color: var(--pv-slate);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.pv-nav { display: none; }
.pv-nav ul {
display: flex;
align-items: center;
gap: var(--pv-s-5);
list-style: none;
padding: 0;
margin: 0;
}
.pv-nav a {
font-family: var(--pv-font-display);
font-weight: 500;
font-size: var(--pv-fs-base);
color: var(--pv-ink);
padding: var(--pv-s-2) 2px;
position: relative;
}
.pv-nav a::after {
content: "";
position: absolute;
left: 0; right: 0; bottom: -2px;
height: 2px;
background: var(--pv-orange);
transform: scaleX(0);
transform-origin: left center;
transition: transform var(--pv-dur) var(--pv-ease);
}
.pv-nav a:hover { color: var(--pv-navy); }
.pv-nav a:hover::after,
.pv-nav a[aria-current="page"]::after { transform: scaleX(1); }
.pv-nav a[aria-current="page"] { color: var(--pv-navy); font-weight: 600; }
/* Dropdown parent inherits the active state when any child inside is current */
.pv-nav__item--has-dropdown { position: relative; }
.pv-nav__item--has-dropdown > a {
display: inline-flex;
align-items: center;
gap: 4px;
}
.pv-nav__item--has-dropdown > a .pv-nav__caret {
transition: transform var(--pv-dur) var(--pv-ease);
opacity: 0.65;
}
.pv-nav__item--has-dropdown:hover > a .pv-nav__caret,
.pv-nav__item--has-dropdown:focus-within > a .pv-nav__caret {
transform: rotate(180deg);
opacity: 1;
}
.pv-nav__item--has-dropdown:has([aria-current="page"]) > a {
color: var(--pv-navy);
font-weight: 600;
}
.pv-nav__item--has-dropdown:has([aria-current="page"]) > a::after {
transform: scaleX(1);
}
/* Extra-specific selector to override the parent .pv-nav ul flex rules
(which set flex-direction: row, gap: var(--pv-s-5), align-items: center) */
.pv-nav ul.pv-nav__dropdown {
position: absolute;
top: calc(100% + 10px);
left: -12px;
min-width: 220px;
list-style: none;
margin: 0;
padding: var(--pv-s-2);
background: var(--pv-white);
border: 1px solid var(--pv-line);
border-radius: var(--pv-r-md);
box-shadow: var(--pv-shadow-lg);
display: flex;
flex-direction: column;
gap: 0;
align-items: stretch;
opacity: 0;
visibility: hidden;
transform: translateY(-8px);
transition: opacity var(--pv-dur) var(--pv-ease),
transform var(--pv-dur) var(--pv-ease),
visibility var(--pv-dur) var(--pv-ease);
pointer-events: none;
z-index: 60;
}
.pv-nav__item--has-dropdown:hover .pv-nav__dropdown,
.pv-nav__item--has-dropdown:focus-within .pv-nav__dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
pointer-events: auto;
}
.pv-nav__dropdown a {
display: block;
padding: 10px 14px;
font-family: var(--pv-font-display);
font-size: var(--pv-fs-sm);
font-weight: 500;
color: var(--pv-ink);
border-radius: var(--pv-r-sm);
white-space: nowrap;
transition: background var(--pv-dur) var(--pv-ease),
color var(--pv-dur) var(--pv-ease);
}
.pv-nav__dropdown a::after { content: none; }
.pv-nav__dropdown a:hover {
background: var(--pv-canvas);
color: var(--pv-orange);
}
.pv-nav__dropdown a[aria-current="page"] {
background: rgba(245,130,32,0.1);
color: var(--pv-orange-dk);
}
/* Sub-item under a dropdown parent (e.g., Partners > Victoria Data Society) */
.pv-nav__dropdown a.pv-nav__sub {
padding-left: 30px;
font-size: 12.5px;
color: var(--pv-graphite);
}
.pv-nav__dropdown a.pv-nav__sub::before {
content: "";
display: inline-block;
width: 8px;
height: 1px;
background: var(--pv-line);
vertical-align: middle;
margin-right: 8px;
margin-left: -16px;
}
/* ---------- Nav mega menu ---------- */
/* Full-width multi-column dropdown panel. Spans the same max-width
as `.pv-container` (1200px) and aligns to the page grid rather
than dropping under its trigger . Achieved by switching the
parent to `position: static` so the absolute panel anchors
to the next positioned ancestor — `.pv-header` (sticky). */
.pv-nav__item--has-dropdown:has(.pv-nav__dropdown--mega) { position: static; }
.pv-nav ul.pv-nav__dropdown--mega {
top: 100%;
left: 50%;
right: auto;
transform: translateX(-50%) translateY(-8px);
width: calc(100vw - 48px);
min-width: 0;
max-width: 1200px;
margin-top: -26px;
padding: var(--pv-s-5) clamp(24px, 4vw, 48px) var(--pv-s-6);
display: grid;
/* Uniform 4-column grid across all mega menus so columns line up
visually as the user hovers between dropdowns. Menus with fewer
content sections leave empty cells in the middle; promo cards
always dock to the last column via .pv-nav__mega-col--promo. */
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--pv-s-4) var(--pv-s-6);
align-items: start;
border-radius: 0 0 16px 16px;
border-top: 0;
box-shadow: 0 18px 40px -12px rgba(15,16,36,0.22);
}
.pv-nav__item--has-dropdown:hover .pv-nav__dropdown--mega,
.pv-nav__item--has-dropdown:focus-within .pv-nav__dropdown--mega {
transform: translateX(-50%) translateY(0);
}
/* Promo column — docks to the last cell of the 4-col grid. */
.pv-nav__mega-col--promo { grid-column: -2 / -1; }
/* Compact variant — menus with a single content column (Speakers,
Sponsors) keep the full 1200px dropdown width; the promo stretches
across cols 2–4 so no empty cells remain. */
.pv-nav__dropdown--mega-compact .pv-nav__mega-col--promo {
grid-column: 2 / -1;
}
.pv-nav__mega-col {
display: flex;
flex-direction: column;
gap: 2px;
}
/* Section heading — small caps, left-aligned with the menu rows below. */
.pv-nav__mega-section {
display: block;
font-family: var(--pv-font-display);
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--pv-slate);
padding: 0 12px var(--pv-s-2);
margin-bottom: var(--pv-s-1);
}
/* Specificity bumped with `ul.` so this beats `.pv-nav ul` (which
would otherwise force `align-items: center` + a wide gap and make
each row shrink to its content width → visually misaligned). */
.pv-nav ul.pv-nav__mega-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
}
.pv-nav ul.pv-nav__mega-list > li {
width: 100%;
margin: 0;
}
/* Sublist — child pages under a parent nav item (the 3 co-organizer
profiles under "All Partners"). Vertical list, indented so the
parent-child relationship reads at a glance. Each row shows the
partner's actual logo on the left and their name on the right. */
.pv-nav ul.pv-nav__mega-sublist {
list-style: none;
margin: 10px 0 0 44px;
padding: 0 0 0 12px;
display: flex;
flex-direction: column;
gap: 2px;
align-items: stretch;
border-left: 1px solid var(--pv-line);
}
.pv-nav ul.pv-nav__mega-sublist > li {
width: 100%;
margin: 0;
}
.pv-nav__dropdown--mega a.pv-nav__mega-sublink {
display: flex;
align-items: center;
gap: 14px;
padding: 8px 10px;
font-size: 13px;
font-weight: 500;
color: var(--pv-graphite);
background: transparent;
border-radius: 8px;
transition: background var(--pv-dur) var(--pv-ease),
color var(--pv-dur) var(--pv-ease);
}
.pv-nav__dropdown--mega a.pv-nav__mega-sublink:hover {
background: var(--pv-canvas);
color: var(--pv-navy);
}
.pv-nav__mega-sublink-logo {
display: block;
width: 48px;
height: 32px;
object-fit: contain;
flex-shrink: 0;
transition: transform var(--pv-dur) var(--pv-ease);
}
.pv-nav__dropdown--mega a.pv-nav__mega-sublink:hover .pv-nav__mega-sublink-logo {
transform: scale(1.06);
}
/* Cornerstone-style row: icon tile + title + description */
.pv-nav__dropdown--mega a {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 15px;
font-family: var(--pv-font-display);
font-size: var(--pv-fs-sm);
font-weight: 600;
color: var(--pv-ink);
border-radius: 15px;
white-space: normal;
line-height: 1.25;
transition: background var(--pv-dur) var(--pv-ease),
color var(--pv-dur) var(--pv-ease);
}
.pv-nav__dropdown--mega a::after { content: none; }
/* Kill the inherited `.pv-nav__dropdown a:hover` effect on the promo
CTA card only (the whole card is an , so the generic rule would
paint it canvas-white on hover and wipe out the gradient). The
regular mega-menu rows keep their normal hover styling. */
.pv-nav__mega-promo:hover,
.pv-nav__mega-promo:focus,
.pv-nav__mega-promo:focus-visible {
background: var(--pv-gradient) !important;
color: var(--pv-white) !important;
}
/* Force every text element inside the promo body to stay white on
hover too (eyebrow, title, meta), since each span could otherwise
have its own colour cascaded onto it. */
.pv-nav__mega-promo:hover .pv-nav__mega-promo-body,
.pv-nav__mega-promo:hover .pv-nav__mega-promo-eyebrow,
.pv-nav__mega-promo:hover .pv-nav__mega-promo-title,
.pv-nav__mega-promo:hover .pv-nav__mega-promo-meta {
color: var(--pv-white) !important;
}
.pv-nav__dropdown--mega a[aria-current="page"] {
background: rgba(245,130,32,0.08);
color: var(--pv-orange-dk);
}
/* Icon slot — follows the style-guide rule: filled gradient silhouettes
only, no container background. The tile is purely layout (keeps rows
aligned); the gradient lives inside the SVG as fill="url(#pv-grad-nav)". */
.pv-nav__mega-icon {
flex-shrink: 0;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 0;
transition: transform var(--pv-dur) var(--pv-ease);
}
.pv-nav__mega-icon svg {
width: 26px;
height: 26px;
display: block;
}
.pv-nav__mega-text {
flex: 1;
min-width: 0;
}
.pv-nav__mega-desc {
display: block;
margin-top: 3px;
font-family: var(--pv-font-body);
font-size: 11.5px;
font-weight: 400;
color: var(--pv-slate);
line-height: 1.4;
}
/* Featured promo / CTA card — gradient card with an image panel on
top and a clearly-readable text body below. The image and text
share the same inset so their left/right edges line up. */
.pv-nav__mega-promo {
position: relative;
display: flex;
flex-direction: column;
gap: var(--pv-s-4);
padding: 15px;
background: var(--pv-gradient);
color: var(--pv-white) !important;
border-radius: 15px;
text-decoration: none;
margin: 0;
font-family: var(--pv-font-display);
align-self: stretch;
overflow: hidden;
box-shadow: 0 12px 28px -14px rgba(43,45,126,0.55);
transition: transform var(--pv-dur) var(--pv-ease),
box-shadow var(--pv-dur) var(--pv-ease);
}
/* Image panel — framed inside the card padding, rounded. */
.pv-nav__mega-promo-media {
position: relative;
display: block;
overflow: hidden;
border-radius: 6px;
flex-shrink: 0;
}
.pv-nav__mega-promo-image {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16 / 9;
margin: 0;
border-radius: 0;
object-fit: cover;
object-position: center;
filter: saturate(1.05) contrast(1.02);
transition: transform 520ms cubic-bezier(0.2, 0.6, 0.2, 1);
}
/* Text body — sits directly on the gradient card, high contrast. */
.pv-nav__mega-promo-body {
position: relative;
display: flex;
flex-direction: column;
gap: 6px;
padding: 0;
margin: 0;
min-width: 0;
}
.pv-nav__mega-promo-eyebrow {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
opacity: 0.85;
margin: 0;
}
.pv-nav__mega-promo-title {
display: block;
font-size: var(--pv-fs-lg);
font-weight: 700;
line-height: 1.2;
margin: 2px 0 0;
}
.pv-nav__mega-promo-meta {
font-family: var(--pv-font-body);
font-size: 12.5px;
font-weight: 400;
opacity: 0.92;
line-height: 1.55;
margin: 6px 0 0;
}
/* CTA — solid primary-button style (orange) matching .pv-btn--primary
in the style guide. Stretches across the body so the label sits at
the left and the arrow at the right. */
.pv-nav__mega-promo-cta {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
align-self: stretch;
margin-top: var(--pv-s-3);
padding: 12px 20px;
background: var(--pv-orange);
border: 2px solid transparent;
border-radius: var(--pv-r-pill);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--pv-white);
box-shadow: var(--pv-shadow-sm);
transition: background var(--pv-dur) var(--pv-ease),
box-shadow var(--pv-dur) var(--pv-ease);
}
.pv-nav__mega-promo-cta svg {
width: 12px;
height: 12px;
transition: transform var(--pv-dur) var(--pv-ease);
}
.pv-nav__mega-promo:hover .pv-nav__mega-promo-cta {
background: var(--pv-orange-dk);
box-shadow: var(--pv-shadow-md);
}
.pv-nav__mega-promo:hover .pv-nav__mega-promo-cta svg {
transform: translateX(3px);
}
/* Wide-promo variant — horizontal split so the wide card fills its
full width: image on the left, text + CTA on the right. */
.pv-nav__dropdown--mega-compact .pv-nav__mega-promo {
flex-direction: row;
align-items: stretch;
gap: var(--pv-s-5);
}
.pv-nav__dropdown--mega-compact .pv-nav__mega-promo-media {
flex: 0 0 42%;
align-self: stretch;
}
.pv-nav__dropdown--mega-compact .pv-nav__mega-promo-image {
height: auto;
aspect-ratio: 16 / 9;
}
/* Speakers & Sponsors: promo image crops to 3:2 instead of the default 16:9. */
.pv-nav__dropdown--speakers .pv-nav__mega-promo-image,
.pv-nav__dropdown--sponsors .pv-nav__mega-promo-image {
aspect-ratio: 3 / 2;
}
/* Speakers & Sponsors: give the list column half the dropdown width
(2 of 4 grid cols) and lay its items out in a 2-column horizontal
grid. Shrinks the CTA column from 3 cols to 2 cols so the promo
banner reads as a sibling, not the focal point. */
.pv-nav__dropdown--speakers .pv-nav__mega-col:not(.pv-nav__mega-col--promo),
.pv-nav__dropdown--sponsors .pv-nav__mega-col:not(.pv-nav__mega-col--promo) {
grid-column: span 2;
}
.pv-nav__dropdown--speakers .pv-nav__mega-col--promo,
.pv-nav__dropdown--sponsors .pv-nav__mega-col--promo {
grid-column: 3 / -1;
}
.pv-nav ul.pv-nav__dropdown--speakers ul.pv-nav__mega-list,
.pv-nav ul.pv-nav__dropdown--sponsors ul.pv-nav__mega-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 4px 8px;
align-items: start;
}
.pv-nav ul.pv-nav__dropdown--speakers ul.pv-nav__mega-list > li,
.pv-nav ul.pv-nav__dropdown--sponsors ul.pv-nav__mega-list > li {
width: auto;
}
.pv-nav__dropdown--mega-compact .pv-nav__mega-promo-body {
flex: 1 1 auto;
justify-content: center;
}
/* ---------- Mega-menu static previews ---------- */
/* Renders each mega-menu design inline on the page so reviewers don't
have to hover over the header to see a dropdown. Overrides the
hover/focus-dependent positioning so the panel is always visible. */
.pv-nav-preview {
padding: var(--pv-s-8) 0 var(--pv-s-9);
background: var(--pv-canvas);
border-top: 1px solid var(--pv-line);
}
.pv-nav-preview__intro {
max-width: 720px;
margin-bottom: var(--pv-s-6);
}
.pv-nav-preview__item + .pv-nav-preview__item {
margin-top: var(--pv-s-7);
}
.pv-nav-preview__label {
display: inline-flex;
align-items: center;
gap: var(--pv-s-2);
margin-bottom: var(--pv-s-3);
padding: 6px 12px;
background: var(--pv-white);
border: 1px solid var(--pv-line);
border-radius: 999px;
font-family: var(--pv-font-display);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--pv-slate);
}
.pv-nav-preview__label::before {
content: "";
width: 6px;
height: 6px;
border-radius: 999px;
background: var(--pv-gradient);
}
/* Force the preview nav + dropdown to display inline and always-open
regardless of the live hover/focus behavior or media query.
Visuals inherit every base rule (`.pv-nav ul.pv-nav__dropdown--mega`)
so the preview reads identically to the hover state in the header
above. Pointer events are disabled inside the dropdown so no hover
effects (link backgrounds, icon scale, card lift, image zoom, CTA
colour change, arrow nudge) fire during review. */
.pv-nav.pv-nav--preview,
.pv-nav.pv-nav--preview > ul { display: block; }
.pv-nav--preview .pv-nav__item--has-dropdown { position: static; }
.pv-nav--preview ul.pv-nav__dropdown--mega {
position: static;
top: auto;
left: auto;
right: auto;
transform: none;
opacity: 1;
visibility: visible;
width: 100%;
max-width: 1200px;
margin: 0;
pointer-events: none;
}
/* Defensive: if hover still registered anywhere, keep the panel put. */
.pv-nav--preview .pv-nav__item--has-dropdown:hover .pv-nav__dropdown--mega,
.pv-nav--preview .pv-nav__item--has-dropdown:focus-within .pv-nav__dropdown--mega {
transform: none;
}
.pv-header__cta { display: none; }
/* Header actions — wraps the Contact + Notify Me button pair */
.pv-header__actions {
display: none;
align-items: center;
gap: var(--pv-s-3);
}
@media (min-width: 960px) {
.pv-header__actions { display: inline-flex; }
}
.pv-menu-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border: 1.5px solid var(--pv-line);
background: var(--pv-white);
border-radius: var(--pv-r-md);
cursor: pointer;
color: var(--pv-ink);
}
.pv-menu-toggle:hover { border-color: var(--pv-navy); color: var(--pv-navy); }
@media (min-width: 960px) {
.pv-nav { display: block; }
.pv-header__cta { display: inline-flex; }
.pv-menu-toggle { display: none; }
}
/* Mobile drawer — hidden by default, shown when .is-open is added via JS */
.pv-mobile-nav {
display: none !important;
background: var(--pv-white);
border-top: 1px solid var(--pv-line);
padding: var(--pv-s-4) var(--pv-gutter);
}
.pv-mobile-nav.is-open {
display: block !important;
}
.pv-mobile-nav ul {
list-style: none;
padding: 0;
margin: 0 0 var(--pv-s-4);
display: grid;
gap: var(--pv-s-1);
}
.pv-mobile-nav a {
display: block;
font-family: var(--pv-font-display);
font-weight: 500;
font-size: var(--pv-fs-lg);
color: var(--pv-ink);
padding: 12px 4px;
border-bottom: 1px solid var(--pv-line);
}
.pv-mobile-nav a[aria-current="page"] { color: var(--pv-orange); }
/* Mobile sub-list for About children — indented, smaller */
.pv-mobile-nav ul.pv-mobile-nav__sub {
padding: var(--pv-s-2) 0 var(--pv-s-2) var(--pv-s-4);
margin: 0 0 0 var(--pv-s-3);
border-left: 2px solid var(--pv-line);
gap: 0;
}
.pv-mobile-nav__sub a {
font-size: var(--pv-fs-base);
padding: 8px 4px;
color: var(--pv-graphite);
border-bottom: 0;
}
.pv-mobile-nav__sub a:hover { color: var(--pv-orange); }
/* Sub-item under a mobile dropdown parent (Partners > VDS / PlusROI / AI4E) */
.pv-mobile-nav__sub a.pv-mobile-nav__sub-item {
padding-left: 22px;
font-size: var(--pv-fs-sm);
color: var(--pv-slate);
}
.pv-mobile-nav__sub a.pv-mobile-nav__sub-item::before {
content: "";
display: inline-block;
width: 8px;
height: 1px;
background: var(--pv-line);
vertical-align: middle;
margin-right: 8px;
margin-left: -16px;
}
@media (min-width: 960px) { .pv-mobile-nav { display: none; } }
/* ---------- 8. Pre-footer (CTA banner + newsletter) ---------- */
.pv-cta-banner {
position: relative;
overflow: hidden;
background: var(--pv-gradient);
color: var(--pv-white);
padding-block: clamp(56px, 8vw, 96px);
}
.pv-cta-banner::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(ellipse at top right, rgba(255,255,255,0.18), transparent 60%),
radial-gradient(ellipse at bottom left, rgba(15,16,36,0.25), transparent 55%);
pointer-events: none;
}
.pv-cta-banner__inner {
position: relative;
max-width: 820px;
margin-inline: auto;
text-align: center;
}
.pv-cta-banner h2 {
color: var(--pv-white);
margin-bottom: var(--pv-s-3);
}
.pv-cta-banner .pv-lede,
.pv-cta-banner p { color: rgba(255,255,255,0.92); }
.pv-cta-banner__meta {
font-family: var(--pv-font-display);
font-weight: 600;
letter-spacing: 0.04em;
margin-bottom: var(--pv-s-2);
}
.pv-cta-banner__actions {
margin-top: var(--pv-s-5);
display: inline-flex; gap: var(--pv-s-3); flex-wrap: wrap; justify-content: center;
}
/* Newsletter — full-bleed split: content + form on the left, image on the right. */
.pv-newsletter {
position: relative;
background: var(--pv-white);
overflow: hidden;
}
.pv-newsletter__card {
position: relative;
display: grid;
grid-template-columns: 1fr;
background: var(--pv-white);
text-align: left;
}
@media (min-width: 900px) {
.pv-newsletter__card {
grid-template-columns: 1fr 1fr;
align-items: stretch;
min-height: 560px;
}
}
/* Left — content + form.
padding-left is synced to the global container's inner edge so the
content lines up with every other section that uses .pv-container. */
.pv-newsletter__content {
position: relative;
padding-block: clamp(48px, 9vw, 112px);
padding-inline: 24px; /* mobile: matches .pv-container 24px gutter */
display: flex;
flex-direction: column;
justify-content: center;
}
@media (min-width: 960px) {
.pv-newsletter__content {
/* align with .pv-container's left edge: (viewport - 1400) / 2 + 48px,
clamped so it never shrinks below the 48px desktop gutter. */
padding-left: max(48px, calc((100vw - 1400px) / 2 + 48px));
padding-right: clamp(32px, 4vw, 64px);
}
}
.pv-newsletter__content .pv-eyebrow { margin-bottom: var(--pv-s-3); }
.pv-newsletter__content h2 {
font-size: clamp(1.75rem, 1.5vw + 1rem, 2.5rem);
margin-bottom: var(--pv-s-3);
}
.pv-newsletter__content > p {
color: var(--pv-graphite);
font-size: var(--pv-fs-lg);
margin-bottom: var(--pv-s-5);
}
/* Benefit pills — on white, so use brand colours */
.pv-newsletter__benefits {
list-style: none;
padding: 0;
margin: 0 0 var(--pv-s-5);
display: flex;
flex-wrap: wrap;
gap: var(--pv-s-2);
}
.pv-newsletter__benefit {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: var(--pv-cloud);
border: 1px solid var(--pv-line);
border-radius: var(--pv-r-pill);
font-family: var(--pv-font-display);
font-size: var(--pv-fs-xs);
font-weight: 600;
color: var(--pv-graphite);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.pv-newsletter__benefit svg { width: 14px; height: 14px; flex-shrink: 0; }
.pv-newsletter__benefit:nth-child(1) svg { color: var(--pv-teal); }
.pv-newsletter__benefit:nth-child(2) svg { color: var(--pv-navy); }
.pv-newsletter__benefit:nth-child(3) svg { color: var(--pv-orange); }
.pv-newsletter__form {
display: grid;
gap: var(--pv-s-4);
margin-top: 0;
}
.pv-newsletter__form .pv-btn { margin-top: var(--pv-s-2); width: 100%; }
.pv-newsletter__reassure {
display: inline-flex;
align-items: center;
gap: 8px;
margin: var(--pv-s-4) 0 0;
font-size: var(--pv-fs-sm);
color: var(--pv-slate);
}
.pv-newsletter__reassure svg {
width: 16px; height: 16px;
color: var(--pv-green);
flex-shrink: 0;
}
/* Right — visual panel (styled placeholder for now) */
.pv-newsletter__visual {
position: relative;
overflow: hidden;
min-height: 320px;
background: var(--pv-navy);
isolation: isolate;
}
.pv-newsletter__visual::before {
content: "";
position: absolute; inset: 0;
background: var(--pv-gradient);
z-index: -2;
}
.pv-newsletter__visual::after {
content: "";
position: absolute; inset: 0;
background-image:
linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
background-size: 40px 40px;
mask-image: radial-gradient(ellipse 110% 90% at 50% 50%, black 35%, transparent 90%);
-webkit-mask-image: radial-gradient(ellipse 110% 90% at 50% 50%, black 35%, transparent 90%);
z-index: -1;
pointer-events: none;
}
.pv-newsletter__visual img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.pv-newsletter__placeholder {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 14px;
color: rgba(255,255,255,0.9);
text-align: center;
padding: 32px;
}
.pv-newsletter__placeholder svg {
width: 64px; height: 64px;
opacity: 0.75;
stroke-width: 1.4;
}
.pv-newsletter__placeholder-label {
font-family: var(--pv-font-display);
font-weight: 600;
font-size: var(--pv-fs-sm);
letter-spacing: 0.22em;
text-transform: uppercase;
}
.pv-newsletter__placeholder-sub {
font-size: var(--pv-fs-xs);
color: rgba(255,255,255,0.65);
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
/* Corner badge (kept for future use when real image lands) */
.pv-newsletter__badge {
position: absolute;
left: 20px; bottom: 20px;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 14px;
background: rgba(15,16,36,0.72);
color: var(--pv-white);
border: 1px solid rgba(255,255,255,0.18);
border-radius: var(--pv-r-pill);
font-family: var(--pv-font-display);
font-size: var(--pv-fs-xs);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.pv-newsletter__badge-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--pv-orange);
box-shadow: 0 0 0 3px rgba(245,130,32,0.25);
}
@media (min-width: 900px) {
.pv-newsletter__visual { min-height: 0; }
}
/* ---------- 8.4 Sub-page scaffolding ---------- */
/* Breadcrumb — can be used standalone or nested inside a hero.
Default variant is styled for light backgrounds. The nested
.pv-hero .pv-breadcrumb rules override for dark/image heroes. */
.pv-breadcrumb {
font-size: var(--pv-fs-sm);
}
.pv-breadcrumb ol {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
color: var(--pv-slate);
}
.pv-breadcrumb li {
display: inline-flex;
align-items: center;
gap: 6px;
}
.pv-breadcrumb li + li::before {
content: "/";
color: var(--pv-mute);
font-weight: 400;
}
.pv-breadcrumb a {
color: var(--pv-slate);
font-weight: 500;
}
.pv-breadcrumb a:hover { color: var(--pv-orange); }
.pv-breadcrumb [aria-current="page"] {
color: var(--pv-ink);
font-weight: 600;
}
/* Hero-nested variant — transparent, light text for dark/image backgrounds */
.pv-hero .pv-breadcrumb {
margin-bottom: var(--pv-s-4);
}
.pv-hero .pv-breadcrumb ol { color: rgba(255,255,255,0.72); }
.pv-hero .pv-breadcrumb li + li::before { color: rgba(255,255,255,0.45); }
.pv-hero .pv-breadcrumb a { color: rgba(255,255,255,0.85); }
.pv-hero .pv-breadcrumb a:hover { color: var(--pv-gold); }
.pv-hero .pv-breadcrumb [aria-current="page"] { color: var(--pv-white); }
/* Sub-page teaser grid — hub About page links to its children */
.pv-subpage-grid {
display: grid;
gap: var(--pv-s-5);
grid-template-columns: 1fr;
}
@media (min-width: 640px) { .pv-subpage-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .pv-subpage-grid { grid-template-columns: repeat(3, 1fr); } }
.pv-subpage-teaser {
position: relative;
display: flex;
flex-direction: column;
gap: var(--pv-s-3);
padding: var(--pv-s-6) var(--pv-s-5);
background: var(--pv-white);
border: 1px solid var(--pv-line);
border-radius: var(--pv-r-lg);
color: var(--pv-ink);
text-decoration: none;
overflow: hidden;
isolation: isolate;
transition: transform var(--pv-dur) var(--pv-ease),
box-shadow var(--pv-dur) var(--pv-ease),
border-color var(--pv-dur) var(--pv-ease);
}
.pv-subpage-teaser::before {
content: "";
position: absolute;
left: 0; right: 0; top: 0;
height: 3px;
background: var(--pv-gradient);
opacity: 0.5;
transition: opacity var(--pv-dur) var(--pv-ease),
height var(--pv-dur) var(--pv-ease);
}
.pv-subpage-teaser:hover {
transform: translateY(-4px);
box-shadow: var(--pv-shadow-lg);
border-color: transparent;
color: var(--pv-ink);
}
.pv-subpage-teaser:hover::before {
opacity: 1;
height: 4px;
}
.pv-subpage-teaser--soon {
opacity: 0.75;
}
.pv-subpage-teaser--soon::after {
content: "Coming soon";
position: absolute;
top: var(--pv-s-4);
right: var(--pv-s-4);
padding: 4px 10px;
background: rgba(107,110,133,0.1);
color: var(--pv-slate);
border-radius: var(--pv-r-pill);
font-family: var(--pv-font-display);
font-size: var(--pv-fs-xs);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.pv-subpage-teaser__icon {
display: inline-flex;
margin-bottom: var(--pv-s-4);
}
.pv-subpage-teaser__icon svg { width: 56px; height: 56px; display: block; }
.pv-subpage-teaser h3 {
font-size: var(--pv-fs-xl);
margin: 0;
letter-spacing: -0.01em;
}
.pv-subpage-teaser p {
color: var(--pv-graphite);
font-size: var(--pv-fs-sm);
line-height: 1.55;
margin: 0;
flex: 1;
}
.pv-subpage-teaser__cta {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: var(--pv-s-2);
font-family: var(--pv-font-display);
font-size: var(--pv-fs-sm);
font-weight: 600;
color: var(--pv-teal-dk);
transition: color var(--pv-dur) var(--pv-ease);
}
.pv-subpage-teaser__cta::after {
content: "→";
display: inline-block;
transition: transform var(--pv-dur) var(--pv-ease);
}
.pv-subpage-teaser:hover .pv-subpage-teaser__cta { color: var(--pv-orange); }
.pv-subpage-teaser:hover .pv-subpage-teaser__cta::after { transform: translateX(4px); }
/* Article grid — news & post listing */
.pv-article-grid {
display: grid;
gap: var(--pv-s-6);
grid-template-columns: 1fr;
}
@media (min-width: 640px) { .pv-article-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .pv-article-grid { grid-template-columns: repeat(3, 1fr); } }
.pv-article-card {
display: flex;
flex-direction: column;
background: var(--pv-white);
border: 1px solid var(--pv-line);
border-radius: var(--pv-r-lg);
overflow: hidden;
transition: transform var(--pv-dur) var(--pv-ease),
box-shadow var(--pv-dur) var(--pv-ease),
border-color var(--pv-dur) var(--pv-ease);
}
.pv-article-card:hover {
transform: translateY(-4px);
box-shadow: var(--pv-shadow-md);
border-color: transparent;
}
.pv-article-card__media {
display: block;
aspect-ratio: 16 / 10;
overflow: hidden;
background: var(--pv-navy);
}
.pv-article-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform calc(var(--pv-dur) * 2) var(--pv-ease);
}
.pv-article-card:hover .pv-article-card__media img { transform: scale(1.04); }
.pv-article-card__body {
padding: var(--pv-s-5);
display: flex;
flex-direction: column;
gap: var(--pv-s-3);
flex: 1;
}
.pv-article-card__meta {
display: flex;
align-items: center;
gap: var(--pv-s-3);
font-family: var(--pv-font-display);
font-size: var(--pv-fs-xs);
font-weight: 500;
color: var(--pv-slate);
letter-spacing: 0.08em;
text-transform: uppercase;
flex-wrap: wrap;
}
.pv-article-card__meta time { color: var(--pv-slate); }
.pv-article-card__cat {
padding: 3px 10px;
border-radius: var(--pv-r-pill);
background: rgba(0,168,181,0.12);
color: var(--pv-teal-dk);
font-weight: 600;
letter-spacing: 0.1em;
}
.pv-article-card__cat--announcements { background: rgba(43,45,126,0.1); color: var(--pv-navy); }
.pv-article-card__cat--sponsors { background: rgba(245,130,32,0.12); color: var(--pv-orange-dk); }
.pv-article-card__cat--speakers { background: rgba(251,176,64,0.2); color: #8a5a09; }
.pv-article-card__cat--program { background: rgba(0,168,181,0.12); color: var(--pv-teal-dk); }
.pv-article-card__cat--partners { background: rgba(79,184,77,0.18); color: #2a7728; }
.pv-article-card__cat--recap { background: rgba(232,66,58,0.1); color: var(--pv-coral); }
.pv-article-card h3 {
font-size: var(--pv-fs-lg);
line-height: 1.3;
letter-spacing: -0.01em;
margin: 0;
}
.pv-article-card h3 a {
color: var(--pv-ink);
background-image: linear-gradient(currentColor, currentColor);
background-repeat: no-repeat;
background-position: 0 100%;
background-size: 0 1px;
transition: background-size var(--pv-dur) var(--pv-ease), color var(--pv-dur) var(--pv-ease);
}
.pv-article-card h3 a:hover {
color: var(--pv-orange);
background-size: 100% 1px;
}
.pv-article-card p {
color: var(--pv-graphite);
font-size: var(--pv-fs-sm);
line-height: 1.55;
margin: 0;
flex: 1;
}
.pv-article-card__link {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: var(--pv-s-2);
font-family: var(--pv-font-display);
font-size: var(--pv-fs-sm);
font-weight: 600;
color: var(--pv-teal-dk);
transition: color var(--pv-dur) var(--pv-ease);
}
.pv-article-card__link::after {
content: "→";
display: inline-block;
transition: transform var(--pv-dur) var(--pv-ease);
}
.pv-article-card__link:hover { color: var(--pv-orange); }
.pv-article-card__link:hover::after { transform: translateX(4px); }
/* Pagination */
.pv-pagination {
margin-top: var(--pv-s-8);
display: flex;
align-items: center;
justify-content: center;
gap: var(--pv-s-3);
flex-wrap: wrap;
}
.pv-pagination ol {
list-style: none;
padding: 0;
margin: 0;
display: flex;
gap: 4px;
}
.pv-pagination a,
.pv-pagination span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 var(--pv-s-3);
border: 1px solid var(--pv-line);
border-radius: var(--pv-r-md);
font-family: var(--pv-font-display);
font-weight: 500;
color: var(--pv-slate);
background: var(--pv-white);
text-decoration: none;
transition: border-color var(--pv-dur) var(--pv-ease),
color var(--pv-dur) var(--pv-ease),
background var(--pv-dur) var(--pv-ease);
}
.pv-pagination a:hover { border-color: var(--pv-navy); color: var(--pv-navy); }
.pv-pagination [aria-current="page"] {
background: var(--pv-navy);
color: var(--pv-white);
border-color: var(--pv-navy);
}
.pv-pagination [aria-disabled="true"] {
opacity: 0.45;
pointer-events: none;
}
.pv-pagination__ellipsis {
border: 0;
background: transparent;
color: var(--pv-mute);
}
/* Simple "placeholder" block for stub pages (e.g., News) */
.pv-stub {
max-width: 680px;
margin-inline: auto;
text-align: center;
padding-block: var(--pv-s-8);
}
.pv-stub__badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
background: rgba(245,130,32,0.1);
border: 1px solid rgba(245,130,32,0.25);
border-radius: var(--pv-r-pill);
color: var(--pv-orange-dk);
font-family: var(--pv-font-display);
font-size: var(--pv-fs-xs);
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
margin-bottom: var(--pv-s-5);
}
/* ---------- 8.5 About page components ---------- */
/* Compact variant of the hero — used on sub-pages like About.
Double-class specificity so these rules beat the base .pv-hero block
that is defined later in the stylesheet. */
.pv-hero.pv-hero--compact {
padding-block: clamp(64px, 8vw, 120px);
background-image: url("../assets/585824702_1544046587647566_6385549902355475221_n.jpg");
}
.pv-hero.pv-hero--compact h1 { margin-bottom: var(--pv-s-4); }
.pv-hero.pv-hero--compact .pv-hero__supporting { margin-bottom: 0; }
/* Partners — two-tier layout:
- Featured block for VIATEC (Presented By) — dominant, with brand accent
- 3-col grid for co-organizers — equal weight, compact cards */
/* Featured: VIATEC hero block */
.pv-partner-featured {
display: grid;
gap: var(--pv-s-6);
grid-template-columns: 1fr;
align-items: center;
max-width: 1200px;
margin: 0 auto var(--pv-s-8);
padding: clamp(var(--pv-s-6), 4vw, var(--pv-s-8));
position: relative;
background: var(--pv-white);
border: 1px solid var(--pv-line);
border-radius: var(--pv-r-xl);
box-shadow: var(--pv-shadow-md);
overflow: hidden;
isolation: isolate;
}
.pv-partner-featured::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 60% 80% at 0% 0%, rgba(251,176,64,0.1), transparent 55%),
radial-gradient(ellipse 60% 80% at 100% 100%, rgba(0,168,181,0.08), transparent 55%);
z-index: -1;
pointer-events: none;
}
.pv-partner-featured::after {
/* Brand gradient accent stripe on the left edge */
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 6px;
background: var(--pv-gradient);
}
@media (min-width: 768px) {
.pv-partner-featured {
grid-template-columns: 280px 1fr;
gap: var(--pv-s-8);
}
}
.pv-partner-featured__logo {
display: flex;
align-items: center;
justify-content: center;
min-height: 160px;
}
.pv-partner-featured__logo img {
max-height: 160px;
max-width: 100%;
width: auto;
object-fit: contain;
}
.pv-partner-featured__label {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 14px;
background: rgba(245,130,32,0.12);
border: 1px solid rgba(245,130,32,0.25);
border-radius: var(--pv-r-pill);
color: var(--pv-orange-dk);
font-family: var(--pv-font-display);
font-size: var(--pv-fs-xs);
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
margin-bottom: var(--pv-s-4);
}
.pv-partner-featured__label-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: var(--pv-orange);
box-shadow: 0 0 0 3px rgba(245,130,32,0.2);
}
.pv-partner-featured__body h3 {
font-size: clamp(1.75rem, 2vw + 1rem, 2.5rem);
margin-bottom: var(--pv-s-4);
letter-spacing: -0.015em;
}
.pv-partner-featured__body .pv-lede {
margin-bottom: var(--pv-s-4);
}
.pv-partner-featured__body a {
font-family: var(--pv-font-display);
font-weight: 600;
color: var(--pv-teal-dk);
}
.pv-partner-featured__body a:hover { color: var(--pv-orange); }
/* Section label between VIATEC and co-organizers */
.pv-partners-co-label {
display: flex;
align-items: center;
gap: var(--pv-s-4);
max-width: 1200px;
margin: 0 auto var(--pv-s-6);
font-family: var(--pv-font-display);
font-size: var(--pv-fs-sm);
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--pv-slate);
text-align: center;
justify-content: center;
}
.pv-partners-co-label span {
flex: 1;
height: 1px;
background: linear-gradient(90deg, transparent, var(--pv-line), transparent);
max-width: 180px;
}
/* Co-organizers — 3-column equal grid */
.pv-partner-grid {
display: grid;
gap: var(--pv-s-5);
grid-template-columns: 1fr;
max-width: 1200px;
margin-inline: auto;
}
@media (min-width: 768px) {
.pv-partner-grid { grid-template-columns: repeat(3, 1fr); }
}
.pv-partner-card {
position: relative;
display: flex;
flex-direction: column;
gap: var(--pv-s-4);
padding: var(--pv-s-6) var(--pv-s-5);
background: var(--pv-white);
border: 1px solid var(--pv-line);
border-radius: var(--pv-r-lg);
overflow: hidden;
isolation: isolate;
transition: transform var(--pv-dur) var(--pv-ease),
box-shadow var(--pv-dur) var(--pv-ease),
border-color var(--pv-dur) var(--pv-ease);
}
/* Top accent stripe in brand gradient — subtle by default, intensifies on hover */
.pv-partner-card::before {
content: "";
position: absolute;
left: 0; right: 0; top: 0;
height: 3px;
background: var(--pv-gradient);
opacity: 0.5;
transition: opacity var(--pv-dur) var(--pv-ease),
height var(--pv-dur) var(--pv-ease);
}
/* Warm radial glow from top-right corner — reveals on hover */
.pv-partner-card::after {
content: "";
position: absolute;
top: -70px; right: -70px;
width: 200px; height: 200px;
background: radial-gradient(circle, rgba(245,130,32,0.12), transparent 70%);
opacity: 0;
transition: opacity calc(var(--pv-dur) * 2) var(--pv-ease);
pointer-events: none;
z-index: -1;
}
.pv-partner-card:hover {
transform: translateY(-4px);
box-shadow: var(--pv-shadow-lg);
border-color: transparent;
}
.pv-partner-card:hover::before {
opacity: 1;
height: 4px;
}
.pv-partner-card:hover::after { opacity: 1; }
.pv-partner-card__logo {
display: flex;
align-items: center;
justify-content: flex-start;
min-height: 64px;
padding-bottom: var(--pv-s-4);
border-bottom: 1px solid var(--pv-line);
}
.pv-partner-card__logo img {
max-height: 56px;
max-width: 180px;
width: auto;
object-fit: contain;
transition: transform calc(var(--pv-dur) * 2) var(--pv-ease);
}
.pv-partner-card:hover .pv-partner-card__logo img { transform: scale(1.04); }
.pv-partner-card h4 {
font-size: var(--pv-fs-xl);
margin: 0;
letter-spacing: -0.01em;
}
.pv-partner-card p {
color: var(--pv-graphite);
font-size: var(--pv-fs-sm);
line-height: 1.6;
margin: 0;
flex: 1;
}
.pv-partner-card__link {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: auto;
font-family: var(--pv-font-display);
font-size: var(--pv-fs-sm);
font-weight: 600;
color: var(--pv-teal-dk);
transition: color var(--pv-dur) var(--pv-ease);
}
.pv-partner-card__link::after {
content: "→";
display: inline-block;
transition: transform var(--pv-dur) var(--pv-ease);
}
.pv-partner-card__link:hover { color: var(--pv-orange); }
.pv-partner-card__link:hover::after { transform: translateX(4px); }
/* Organizers / team — portrait photo card (matches on-stage speaker card
design from the 2025 event). Photo is a rounded portrait rectangle;
name + role sit below with no container chrome. */
.pv-organizers {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: var(--pv-s-6);
grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) { .pv-organizers { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { .pv-organizers { grid-template-columns: repeat(4, 1fr); } }
.pv-organizer { text-align: center; }
.pv-organizer__photo {
position: relative;
aspect-ratio: 4 / 5;
margin-bottom: var(--pv-s-4);
border-radius: var(--pv-r-lg);
overflow: hidden;
background: var(--pv-gradient);
border: 4px solid var(--pv-orange);
box-shadow: var(--pv-shadow-sm);
display: flex;
align-items: center;
justify-content: center;
transition: transform var(--pv-dur) var(--pv-ease), box-shadow var(--pv-dur) var(--pv-ease);
}
.pv-organizer:hover .pv-organizer__photo {
transform: translateY(-3px);
box-shadow: var(--pv-shadow-md);
}
.pv-organizer__photo img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
}
.pv-organizer__photo-placeholder {
font-family: var(--pv-font-display);
font-size: var(--pv-fs-xs);
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,0.88);
}
.pv-organizer__name {
font-family: var(--pv-font-display);
font-weight: 700;
color: var(--pv-ink);
font-size: var(--pv-fs-lg);
line-height: 1.25;
margin-bottom: 4px;
}
.pv-organizer__role {
font-family: var(--pv-font-display);
font-size: var(--pv-fs-xs);
font-weight: 500;
color: var(--pv-slate);
letter-spacing: 0.14em;
text-transform: uppercase;
}
/* Venue — split with image + fact list */
.pv-venue {
display: grid;
gap: var(--pv-s-6);
grid-template-columns: 1fr;
align-items: start;
}
@media (min-width: 900px) {
.pv-venue { grid-template-columns: 5fr 6fr; }
}
.pv-venue__visual {
position: relative;
overflow: hidden;
border-radius: var(--pv-r-lg);
min-height: 435px;
background: var(--pv-navy);
}
.pv-venue__visual img {
position: absolute;
inset: 0;
width: auto;
height: 100%;
object-fit: cover;
opacity: 0.9;
}
.pv-venue__placeholder-tag {
position: absolute;
left: 14px; bottom: 14px;
padding: 6px 12px;
background: rgba(15,16,36,0.72);
color: var(--pv-white);
border-radius: var(--pv-r-pill);
font-family: var(--pv-font-display);
font-size: var(--pv-fs-xs);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
backdrop-filter: blur(6px);
}
.pv-venue__facts {
display: grid;
gap: var(--pv-s-3);
margin: var(--pv-s-5) 0;
}
.pv-venue__facts > div {
display: grid;
grid-template-columns: 180px 1fr;
gap: var(--pv-s-3);
padding-block: var(--pv-s-3);
border-top: 1px solid var(--pv-line);
}
.pv-venue__facts > div:last-child { border-bottom: 1px solid var(--pv-line); }
.pv-venue__facts dt {
font-family: var(--pv-font-display);
font-weight: 600;
font-size: var(--pv-fs-sm);
color: var(--pv-slate);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.pv-venue__facts dd { margin: 0; color: var(--pv-graphite); }
@media (max-width: 600px) {
.pv-venue__facts > div { grid-template-columns: 1fr; gap: 2px; }
}
/* Gallery slider — single-row, horizontal scroll-snap, no JS */
.pv-gallery {
position: relative;
margin-top: var(--pv-s-6);
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
/* Hide scrollbar across browsers — gallery still scrolls, just no visible bar */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE / old Edge */
padding-block: var(--pv-s-3) var(--pv-s-5);
/* Soft edge fades hint at overflow on both sides */
-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}
.pv-gallery::-webkit-scrollbar { display: none; } /* Chrome / Safari / Edge */
.pv-gallery:focus-visible { outline: 2px solid var(--pv-orange); outline-offset: 4px; border-radius: var(--pv-r-md); }
.pv-gallery__track {
display: flex;
gap: var(--pv-s-4);
list-style: none;
padding: 0 var(--pv-gutter);
margin: 0;
}
@media (min-width: 960px) {
.pv-gallery__track { padding-inline: 48px; }
}
.pv-gallery__slide {
flex: 0 0 auto;
width: clamp(240px, 70vw, 440px);
aspect-ratio: 4 / 3;
margin: 0;
border-radius: var(--pv-r-lg);
overflow: hidden;
scroll-snap-align: center;
box-shadow: var(--pv-shadow-md);
background: var(--pv-graphite);
}
.pv-gallery__slide img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform var(--pv-dur) var(--pv-ease);
}
.pv-gallery__slide:hover img { transform: scale(1.03); }
/* Autoplay status badge — only visible once the JS kicks in */
.pv-gallery__status {
position: absolute;
top: 16px;
right: 20px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
background: rgba(15,16,36,0.72);
color: var(--pv-white);
border: 1px solid rgba(255,255,255,0.18);
border-radius: var(--pv-r-pill);
font-family: var(--pv-font-display);
font-size: var(--pv-fs-xs);
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
pointer-events: none;
}
.pv-gallery__status[hidden] { display: none; }
.pv-gallery__status-dot {
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--pv-green);
box-shadow: 0 0 0 3px rgba(79,184,77,0.25);
animation: pv-gallery-pulse 1.6s ease-in-out infinite;
}
@keyframes pv-gallery-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
/* FAQ — native details/summary, no JS */
.pv-faq {
max-width: 860px;
margin-inline: auto;
display: grid;
gap: var(--pv-s-3);
}
.pv-faq__item {
background: var(--pv-white);
border: 1px solid var(--pv-line);
border-radius: var(--pv-r-lg);
box-shadow: var(--pv-shadow-sm);
overflow: hidden;
}
.pv-faq__item summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--pv-s-4);
padding: var(--pv-s-4) var(--pv-s-5);
font-family: var(--pv-font-display);
font-weight: 600;
font-size: var(--pv-fs-lg);
color: var(--pv-ink);
cursor: pointer;
list-style: none;
transition: background var(--pv-dur) var(--pv-ease);
}
.pv-faq__item summary::-webkit-details-marker { display: none; }
.pv-faq__item summary:hover { background: var(--pv-canvas); }
.pv-faq__item summary::after {
content: "";
flex-shrink: 0;
width: 12px;
height: 12px;
border-right: 2px solid var(--pv-slate);
border-bottom: 2px solid var(--pv-slate);
transform: rotate(45deg) translate(-2px, -2px);
transition: transform var(--pv-dur) var(--pv-ease);
}
.pv-faq__item[open] summary::after {
transform: rotate(-135deg) translate(-2px, -2px);
border-color: var(--pv-orange);
}
.pv-faq__item[open] summary { color: var(--pv-navy); }
.pv-faq__answer {
padding: 0 var(--pv-s-5) var(--pv-s-5);
color: var(--pv-graphite);
}
.pv-faq__answer p { margin: 0; }
.pv-faq__answer p + p { margin-top: var(--pv-s-3); }
/* ---------- 9. Footer ---------- */
.pv-footer {
background: var(--pv-ink);
color: rgba(255,255,255,0.82);
padding-block: var(--pv-s-8) var(--pv-s-5);
font-size: var(--pv-fs-sm);
}
.pv-footer a { color: rgba(255,255,255,0.82); }
.pv-footer a:hover { color: var(--pv-gold); }
.pv-footer__grid {
display: grid;
gap: var(--pv-s-7);
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.pv-footer__grid { grid-template-columns: 2fr 1fr 1fr; gap: var(--pv-s-7); }
}
.pv-footer__brand {
display: flex;
gap: var(--pv-s-5);
align-items: flex-start;
}
.pv-footer__brand img {
height: 176px;
width: auto;
filter: brightness(0) invert(1);
flex-shrink: 0;
}
.pv-footer__brand-content {
flex: 1;
min-width: 0;
}
.pv-footer__tagline {
font-family: var(--pv-font-display);
font-size: var(--pv-fs-lg);
color: var(--pv-white);
margin-bottom: var(--pv-s-2);
}
.pv-footer__meta { color: rgba(255,255,255,0.68); margin-bottom: var(--pv-s-4); }
.pv-footer h4 {
color: var(--pv-white);
font-size: var(--pv-fs-sm);
text-transform: uppercase;
letter-spacing: 0.12em;
margin-bottom: var(--pv-s-4);
}
.pv-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--pv-s-3); }
.pv-footer .pv-social,
ul.pv-social {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: var(--pv-s-2);
margin-top: var(--pv-s-4);
}
.pv-social li { margin: 0; }
.pv-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px; height: 40px;
border-radius: var(--pv-r-pill);
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.14);
color: var(--pv-white);
transition: background var(--pv-dur) var(--pv-ease), transform var(--pv-dur) var(--pv-ease);
}
.pv-social a:hover {
background: var(--pv-orange);
color: var(--pv-white);
transform: translateY(-1px);
}
.pv-social svg { width: 18px; height: 18px; }
.pv-footer__bottom {
margin-top: var(--pv-s-7);
padding-top: var(--pv-s-5);
border-top: 1px solid rgba(255,255,255,0.1);
display: flex;
flex-wrap: wrap;
gap: var(--pv-s-3);
justify-content: space-between;
align-items: center;
color: rgba(255,255,255,0.6);
font-size: var(--pv-fs-xs);
}
/* AI / LLM agent note — takes its own row, centered below copyright + credit */
.pv-footer__ai-note {
flex-basis: 100%;
margin: var(--pv-s-3) 0 0;
padding-top: var(--pv-s-3);
border-top: 1px dashed rgba(255,255,255,0.08);
text-align: center;
display: inline-flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 8px;
color: rgba(255,255,255,0.5);
}
/* Stacked variant — all three lines centered and stacked vertically */
.pv-footer__bottom--stacked {
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--pv-s-2);
text-align: center;
}
.pv-footer__bottom--stacked .pv-footer__ai-note {
flex-basis: auto;
margin: 0;
padding-top: 0;
border-top: 0;
}
.pv-footer__ai-note svg {
color: var(--pv-gold);
flex-shrink: 0;
}
.pv-footer__ai-note a {
color: rgba(255,255,255,0.78);
text-decoration: underline;
text-decoration-color: rgba(255,255,255,0.3);
text-underline-offset: 3px;
transition: color var(--pv-dur) var(--pv-ease),
text-decoration-color var(--pv-dur) var(--pv-ease);
}
.pv-footer__ai-note a:hover {
color: var(--pv-gold);
text-decoration-color: var(--pv-gold);
}
/* ---------- 10. Style guide page scaffolding ---------- */
.sg-hero {
background: var(--pv-gradient);
color: var(--pv-white);
padding-block: clamp(64px, 9vw, 120px);
}
.sg-hero h1 { color: var(--pv-white); }
.sg-hero p { color: rgba(255,255,255,0.9); max-width: 720px; }
.sg-section-title {
display: flex;
align-items: baseline;
gap: var(--pv-s-4);
margin-bottom: var(--pv-s-5);
}
.sg-section-title .n {
font-family: var(--pv-font-display);
font-size: var(--pv-fs-sm);
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--pv-orange);
}
.sg-swatches {
display: grid;
gap: var(--pv-s-4);
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.sg-swatch {
border-radius: var(--pv-r-lg);
overflow: hidden;
border: 1px solid var(--pv-line);
background: var(--pv-white);
}
.sg-swatch__chip { height: 120px; }
.sg-swatch__body { padding: var(--pv-s-4); }
.sg-swatch__name { font-family: var(--pv-font-display); font-weight: 600; margin-bottom: 4px; }
.sg-swatch__code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: var(--pv-fs-sm); color: var(--pv-slate); }
.sg-type-row {
display: grid;
gap: var(--pv-s-3);
grid-template-columns: 160px 1fr;
padding: var(--pv-s-5) 0;
border-bottom: 1px solid var(--pv-line);
align-items: baseline;
}
.sg-type-row:last-child { border-bottom: 0; }
.sg-type-row__meta {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: var(--pv-fs-xs);
color: var(--pv-slate);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.sg-demo {
background: var(--pv-canvas);
border: 1px dashed var(--pv-line);
border-radius: var(--pv-r-lg);
padding: var(--pv-s-5);
display: flex;
flex-wrap: wrap;
gap: var(--pv-s-3);
align-items: center;
}
.sg-demo--dark {
background: var(--pv-navy);
border-color: transparent;
}
.sg-demo--gradient {
background: var(--pv-gradient);
border-color: transparent;
}
.sg-spacing {
display: flex;
align-items: flex-end;
gap: var(--pv-s-3);
flex-wrap: wrap;
}
.sg-spacing__item { text-align: center; }
.sg-spacing__bar {
background: var(--pv-teal);
border-radius: var(--pv-r-sm);
}
.sg-spacing__label {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: var(--pv-fs-xs);
color: var(--pv-slate);
margin-top: var(--pv-s-2);
display: block;
}
.sg-card {
background: var(--pv-white);
border: 1px solid var(--pv-line);
border-radius: var(--pv-r-lg);
padding: var(--pv-s-5);
box-shadow: var(--pv-shadow-sm);
}
.sg-preview-frame {
background: var(--pv-cloud);
border: 1px solid var(--pv-line);
border-radius: var(--pv-r-lg);
padding: 0;
overflow: hidden;
}
.sg-preview-frame__label {
display: block;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: var(--pv-fs-xs);
color: var(--pv-slate);
padding: var(--pv-s-2) var(--pv-s-4);
background: var(--pv-white);
border-bottom: 1px solid var(--pv-line);
}
/* =========================================================
11. Home-page components
========================================================= */
/* ---------- Hero (Section 1) ---------- */
.pv-hero {
position: relative;
overflow: hidden;
color: var(--pv-white);
padding-block: clamp(96px, 14vw, 180px);
background-color: var(--pv-navy);
z-index: 0; /* Create stacking context */
}
.pv-hero:not(.pv-hero--compact) {
min-height: 100vh;
display: flex;
align-items: center;
}
/* Video background layer - sits behind everything */
.pv-hero__video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
z-index: -2;
pointer-events: none;
}
/* Gradient overlay on top of video */
.pv-hero::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
linear-gradient(135deg, rgba(43,45,126,0.82) 0%, rgba(0,127,137,0.68) 55%, rgba(79,184,77,0.5) 100%),
radial-gradient(ellipse 60% 50% at 80% 20%, rgba(251,176,64,0.2), transparent 60%),
radial-gradient(ellipse 60% 50% at 10% 90%, rgba(15,16,36,0.55), transparent 65%);
z-index: -1;
pointer-events: none;
}
.pv-hero__inner {
max-width: 880px;
}
.pv-hero__meta {
display: inline-flex;
align-items: center;
gap: var(--pv-s-3);
font-family: var(--pv-font-display);
font-weight: 600;
font-size: var(--pv-fs-sm);
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(255,255,255,0.95);
background: rgba(255,255,255,0.12);
border: 1px solid rgba(255,255,255,0.24);
padding: 8px 14px;
border-radius: var(--pv-r-pill);
margin-bottom: var(--pv-s-5);
}
.pv-hero__meta-dot {
width: 8px; height: 8px; border-radius: 50%;
background: var(--pv-orange);
box-shadow: 0 0 0 4px rgba(245,130,32,0.25);
}
.pv-hero h1 {
color: var(--pv-white);
margin-bottom: var(--pv-s-5);
text-shadow: 0 2px 24px rgba(15,16,36,0.15);
}
.pv-hero__subhead {
font-family: var(--pv-font-display);
font-weight: 500;
font-size: clamp(1.125rem, 1.5vw + 0.5rem, 1.5rem);
color: rgba(255,255,255,0.95);
margin-bottom: var(--pv-s-4);
}
.pv-hero__supporting {
max-width: 720px;
color: rgba(255,255,255,0.9);
font-size: var(--pv-fs-lg);
margin-bottom: var(--pv-s-6);
}
.pv-hero__actions {
display: flex;
flex-wrap: wrap;
gap: var(--pv-s-3);
}
.pv-hero__actions .pv-btn {
max-width: 100%;
box-sizing: border-box;
}
@media (max-width: 639px) {
.pv-hero__actions {
flex-direction: column;
}
.pv-hero__actions .pv-btn {
width: 100%;
text-align: center;
}
}
/* ---------- Stats & pull quote (Section 2) ---------- */
.pv-stats {
display: grid;
gap: var(--pv-s-5);
grid-template-columns: repeat(2, 1fr);
padding: var(--pv-s-6) 0;
}
@media (min-width: 768px) { .pv-stats { grid-template-columns: repeat(4, 1fr); } }
.pv-stat { text-align: center; padding: var(--pv-s-3); }
.pv-stat__num {
font-family: var(--pv-font-display);
font-weight: 700;
font-size: clamp(2.25rem, 4vw + 1rem, 3.75rem);
line-height: 1;
background: var(--pv-gradient);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
letter-spacing: -0.02em;
margin-bottom: var(--pv-s-2);
}
.pv-stat__label {
font-family: var(--pv-font-display);
font-weight: 500;
color: var(--pv-graphite);
font-size: var(--pv-fs-base);
letter-spacing: 0.02em;
}
.pv-quote {
max-width: 900px;
margin: var(--pv-s-7) auto 0;
padding: var(--pv-s-6) var(--pv-s-5) 0;
text-align: center;
border-top: 1px solid var(--pv-line);
}
.pv-quote blockquote {
margin: 0 0 var(--pv-s-4);
font-family: var(--pv-font-display);
font-weight: 500;
font-size: clamp(1.25rem, 1.2vw + 0.875rem, 1.75rem);
line-height: 1.4;
color: var(--pv-ink);
letter-spacing: -0.005em;
}
.pv-quote blockquote::before { content: "\201C"; color: var(--pv-orange); margin-right: 4px; }
.pv-quote blockquote::after { content: "\201D"; color: var(--pv-orange); margin-left: 4px; }
.pv-quote cite {
display: block;
font-style: normal;
font-size: var(--pv-fs-sm);
color: var(--pv-slate);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.pv-quote__note {
display: inline-block;
margin-top: var(--pv-s-4);
padding: 6px 14px;
border-radius: var(--pv-r-pill);
background: rgba(0,168,181,0.1);
color: var(--pv-teal-dk);
font-size: var(--pv-fs-sm);
font-weight: 600;
}
/* ---------- Section intro (reusable eyebrow + h2 + lede) ---------- */
.pv-intro { max-width: 820px; margin-bottom: var(--pv-s-6); }
.pv-intro--center { margin-inline: auto; text-align: center; }
/* ---------- What Is Prompt Victoria (Section 3) ---------- */
.pv-split {
display: grid;
gap: var(--pv-s-7);
grid-template-columns: 1fr;
}
@media (min-width: 900px) {
.pv-split { grid-template-columns: 5fr 7fr; align-items: start; }
}
.pv-split__heading { position: sticky; top: 100px; }
@media (max-width: 899px) { .pv-split__heading { position: static; } }
/* ---------- Feature grid (Section 4) ---------- */
.pv-features {
display: grid;
gap: var(--pv-s-5);
grid-template-columns: 1fr;
}
@media (min-width: 768px) { .pv-features { grid-template-columns: repeat(3, 1fr); } }
.pv-feature {
background: var(--pv-white);
border: 1px solid var(--pv-line);
border-radius: var(--pv-r-lg);
padding: var(--pv-s-6) var(--pv-s-5);
box-shadow: var(--pv-shadow-sm);
transition: transform var(--pv-dur) var(--pv-ease), box-shadow var(--pv-dur) var(--pv-ease);
}
.pv-feature:hover {
transform: translateY(-4px);
box-shadow: var(--pv-shadow-md);
}
.pv-feature__icon {
display: inline-flex;
margin-bottom: var(--pv-s-4);
}
.pv-feature__icon svg { width: 64px; height: 64px; display: block; }
.pv-feature h3 {
font-size: var(--pv-fs-xl);
margin-bottom: var(--pv-s-3);
}
.pv-feature p { color: var(--pv-graphite); margin: 0; }
/* ---------- Speakers teaser (Section 5) ---------- */
.pv-speakers-teaser {
background: var(--pv-white);
border: 1px solid var(--pv-line);
border-radius: var(--pv-r-xl);
padding: clamp(32px, 5vw, 64px);
text-align: center;
position: relative;
overflow: hidden;
}
.pv-speakers-teaser::before {
content: "";
position: absolute;
inset: 0;
background: var(--pv-gradient-soft);
pointer-events: none;
}
.pv-speakers-teaser > * { position: relative; }
.pv-speakers-teaser__links {
margin-top: var(--pv-s-5);
font-size: var(--pv-fs-sm);
color: var(--pv-slate);
}
.pv-speakers-teaser__links a {
font-weight: 600;
color: var(--pv-teal-dk);
}
/* ---------- Photo mosaic (Section 6) ---------- */
.pv-mosaic {
display: grid;
gap: var(--pv-s-3);
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: 200px;
}
@media (min-width: 768px) {
.pv-mosaic {
grid-template-columns: repeat(6, 1fr);
grid-auto-rows: 220px;
}
}
.pv-mosaic__tile {
border-radius: var(--pv-r-lg);
overflow: hidden;
position: relative;
color: var(--pv-white);
background: var(--pv-navy);
display: flex;
align-items: flex-end;
padding: var(--pv-s-4);
font-size: var(--pv-fs-sm);
line-height: 1.35;
box-shadow: var(--pv-shadow-sm);
transition: transform var(--pv-dur) var(--pv-ease);
}
.pv-mosaic__tile:hover { transform: scale(1.015); }
.pv-mosaic__tile::before {
content: "";
position: absolute; inset: 0;
background-size: cover;
background-position: center;
z-index: 0;
opacity: 0.9;
}
.pv-mosaic__tile::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 40%, rgba(15,16,36,0.75) 100%);
z-index: 1;
}
.pv-mosaic__tile > span { position: relative; z-index: 2; font-weight: 500; }
/* Real 2025 event photos — 8 tiles, varied sizes */
.pv-mosaic__tile--a::before { background-image: url("../assets/586255649_1544048130980745_1826878297993913321_n.jpg"); }
.pv-mosaic__tile--b::before { background-image: url("../assets/585892748_1544047944314097_3296083327512031238_n.jpg"); }
.pv-mosaic__tile--c::before { background-image: url("../assets/586756347_1544045027647722_7604860192891671995_n.jpg"); }
.pv-mosaic__tile--d::before { background-image: url("../assets/585890603_1544046924314199_5762959016833059487_n.jpg"); }
.pv-mosaic__tile--e::before { background-image: url("../assets/585824702_1544046587647566_6385549902355475221_n.jpg"); }
.pv-mosaic__tile--f::before { background-image: url("../assets/585082464_1544048254314066_7776958014471403863_n.jpg"); }
.pv-mosaic__tile--g::before { background-image: url("../assets/585890527_1544044980981060_8410147146597923099_n.jpg"); }
.pv-mosaic__tile--h::before { background-image: url("../assets/586507670_1544044660981092_1221062693720042137_n.jpg"); }
/* Mosaic layout — 8 tiles with varied sizes for organic rhythm.
Row 1-2: a(2×2) + b(2×2) + c(2×2) ← 3 squares top
Row 3: d(3×2 wide feature) + e(2×1) + f(1×1)
Row 4: d continues + g(2×1) + h(1×1) */
@media (min-width: 768px) {
.pv-mosaic__tile--a { grid-column: span 2; grid-row: span 2; }
.pv-mosaic__tile--b { grid-column: span 2; grid-row: span 2; }
.pv-mosaic__tile--c { grid-column: span 2; grid-row: span 2; }
.pv-mosaic__tile--d { grid-column: span 3; grid-row: span 2; }
.pv-mosaic__tile--e { grid-column: span 2; grid-row: span 1; }
.pv-mosaic__tile--f { grid-column: span 1; grid-row: span 1; }
.pv-mosaic__tile--g { grid-column: span 2; grid-row: span 1; }
.pv-mosaic__tile--h { grid-column: span 1; grid-row: span 1; }
}
/* ---------- Agenda preview (Section 7) ---------- */
.pv-tracks {
display: grid;
gap: var(--pv-s-5);
grid-template-columns: 1fr;
}
@media (min-width: 900px) { .pv-tracks { grid-template-columns: repeat(3, 1fr); } }
/* 2-up variant — used on track detail pages for the "Other Tracks" cross-link */
.pv-tracks--two { grid-template-columns: 1fr; }
@media (min-width: 720px) {
.pv-tracks--two { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
.pv-tracks--two { grid-template-columns: repeat(2, 1fr); }
}
.pv-track {
border-radius: var(--pv-r-lg);
padding: var(--pv-s-6) var(--pv-s-5);
background: var(--pv-white);
border: 1px solid var(--pv-line);
position: relative;
overflow: hidden;
transition: transform var(--pv-dur) var(--pv-ease), box-shadow var(--pv-dur) var(--pv-ease);
box-shadow: var(--pv-shadow-sm);
}
.pv-track:hover {
transform: translateY(-4px);
box-shadow: var(--pv-shadow-md);
}
.pv-track::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 6px;
background: var(--pv-gradient);
}
.pv-track__num {
font-family: var(--pv-font-display);
font-weight: 700;
font-size: var(--pv-fs-xs);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--pv-slate);
margin-bottom: var(--pv-s-2);
}
.pv-track h3 {
font-size: var(--pv-fs-xl);
margin-bottom: var(--pv-s-3);
}
.pv-track p { color: var(--pv-graphite); margin: 0; }
/* ---------- Sponsors & partners (Section 8) ---------- */
.pv-partners { text-align: center; }
.pv-partners__tier {
padding-block: var(--pv-s-6);
border-top: 1px dashed var(--pv-line);
}
.pv-partners__tier:first-of-type { border-top: 0; padding-top: 0; }
.pv-partners__label {
font-family: var(--pv-font-display);
font-weight: 600;
font-size: var(--pv-fs-xs);
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--pv-slate);
margin-bottom: var(--pv-s-5);
}
.pv-partner-logos {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: var(--pv-s-5);
}
.pv-partner-logo {
display: inline-flex;
align-items: center;
justify-content: center;
width: 220px; height: 88px;
padding: var(--pv-s-3);
}
.pv-partner-logo img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
display: block;
}
.pv-partner-logo--hero { width: 320px; height: 120px; }
/* Sponsor tier still text placeholders until real logos land */
.pv-partner-logo--sponsor {
width: 180px; height: 72px;
border-radius: var(--pv-r-lg);
background: var(--pv-canvas);
border: 1.5px dashed var(--pv-line);
color: var(--pv-slate);
font-family: var(--pv-font-display);
font-weight: 700;
letter-spacing: 0.04em;
font-size: var(--pv-fs-sm);
text-align: center;
}
/* ---------- Speakers page ---------- */
/* Speaker roster — same portrait card DNA as pv-organizer, with room for
session topic + social links. 3-up on desktop for more breathing room. */
.pv-speakers {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: var(--pv-s-6);
grid-template-columns: repeat(1, 1fr);
}
@media (min-width: 640px) { .pv-speakers { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .pv-speakers { grid-template-columns: repeat(3, 1fr); } }
.pv-speaker { text-align: center; }
.pv-speaker__photo {
position: relative;
aspect-ratio: 4 / 5;
margin-bottom: var(--pv-s-4);
border-radius: var(--pv-r-lg);
overflow: hidden;
background: var(--pv-gradient);
border: 4px solid var(--pv-orange);
box-shadow: var(--pv-shadow-sm);
display: flex;
align-items: center;
justify-content: center;
transition: transform var(--pv-dur) var(--pv-ease), box-shadow var(--pv-dur) var(--pv-ease);
}
.pv-speaker:hover .pv-speaker__photo {
transform: translateY(-3px);
box-shadow: var(--pv-shadow-md);
}
.pv-speaker__photo img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center top;
display: block;
}
.pv-speaker__photo-placeholder {
font-family: var(--pv-font-display);
font-size: var(--pv-fs-xs);
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(255,255,255,0.88);
}
.pv-speaker__name {
font-family: var(--pv-font-display);
font-weight: 700;
color: var(--pv-ink);
font-size: var(--pv-fs-lg);
line-height: 1.25;
margin-bottom: 4px;
}
.pv-speaker__role {
font-family: var(--pv-font-display);
font-size: var(--pv-fs-xs);
font-weight: 500;
color: var(--pv-slate);
letter-spacing: 0.14em;
text-transform: uppercase;
margin-bottom: var(--pv-s-3);
}
.pv-speaker__topic {
font-size: var(--pv-fs-sm);
color: var(--pv-graphite);
line-height: 1.5;
margin: 0 auto var(--pv-s-3);
max-width: 28ch;
}
.pv-speaker__track-tag {
display: inline-block;
font-family: var(--pv-font-display);
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 999px;
background: var(--pv-canvas);
color: var(--pv-teal-dk);
margin-bottom: var(--pv-s-2);
}
.pv-speaker__socials {
display: inline-flex;
gap: var(--pv-s-2);
align-items: center;
justify-content: center;
}
.pv-speaker__socials a {
display: inline-flex;
width: 32px;
height: 32px;
align-items: center;
justify-content: center;
border-radius: 999px;
border: 1px solid var(--pv-line);
color: var(--pv-slate);
transition: color var(--pv-dur) var(--pv-ease),
border-color var(--pv-dur) var(--pv-ease),
background var(--pv-dur) var(--pv-ease);
}
.pv-speaker__socials a:hover {
color: var(--pv-white);
background: var(--pv-teal-dk);
border-color: var(--pv-teal-dk);
}
.pv-speaker__socials svg { width: 14px; height: 14px; display: block; }
/* Coming-soon announcement strip — a gentle callout at the top of the
speakers grid while the 2026 lineup is still being finalized. */
.pv-announce {
display: grid;
gap: var(--pv-s-4);
align-items: center;
grid-template-columns: 1fr;
padding: var(--pv-s-5) var(--pv-s-6);
border-radius: var(--pv-r-lg);
background: var(--pv-canvas);
border: 1px solid var(--pv-line);
margin-bottom: var(--pv-s-7);
}
@media (min-width: 800px) {
.pv-announce { grid-template-columns: 1fr auto; gap: var(--pv-s-6); }
}
.pv-announce__body { display: grid; gap: 6px; }
.pv-announce__eyebrow {
font-family: var(--pv-font-display);
font-size: var(--pv-fs-xs);
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--pv-teal-dk);
display: inline-flex;
align-items: center;
gap: 8px;
}
.pv-announce__eyebrow::before {
content: "";
width: 8px; height: 8px;
border-radius: 999px;
background: var(--pv-orange);
box-shadow: 0 0 0 4px rgba(245,130,32,0.18);
}
.pv-announce__title {
font-family: var(--pv-font-display);
font-size: var(--pv-fs-xl);
font-weight: 700;
color: var(--pv-ink);
margin: 0;
line-height: 1.2;
}
.pv-announce__body p { margin: 0; color: var(--pv-graphite); }
/* ---------- Numbered step badge (Become a Speaker — "How it works") ---------- */
/* Sits inside .pv-feature__icon in place of an SVG. Circular gradient badge
with large display numeral — matches event palette and scale of icon slot. */
.pv-step-badge {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
border-radius: 999px;
background: var(--pv-gradient);
color: var(--pv-white);
font-family: var(--pv-font-display);
font-weight: 700;
font-size: 28px;
line-height: 1;
box-shadow: var(--pv-shadow-sm);
}
/* ---------- Proposal form (Become a Speaker) ---------- */
/* Two-column on desktop, full-width on mobile. Reuses .pv-field / .pv-label
from the shared form styles. .pv-form-row--full forces a field to span
both columns (e.g. long textareas). */
.pv-form {
display: grid;
gap: var(--pv-s-4);
}
.pv-form-row {
display: grid;
gap: var(--pv-s-4);
grid-template-columns: 1fr;
}
@media (min-width: 720px) {
.pv-form-row { grid-template-columns: 1fr 1fr; }
}
.pv-form-row--full { grid-template-columns: 1fr; }
.pv-field--textarea {
min-height: 140px;
resize: vertical;
line-height: 1.5;
font-family: var(--pv-font-body);
}
.pv-radio-group {
display: grid;
gap: var(--pv-s-3);
grid-template-columns: 1fr;
}
@media (min-width: 720px) {
.pv-radio-group { grid-template-columns: repeat(3, 1fr); }
}
.pv-radio-card {
display: flex;
gap: var(--pv-s-3);
align-items: flex-start;
padding: var(--pv-s-2) 0;
cursor: pointer;
}
.pv-radio-card input[type="radio"],
.pv-radio-card input[type="checkbox"] {
margin-top: 2px;
accent-color: var(--pv-teal-dk);
flex-shrink: 0;
width: 16px;
height: 16px;
}
.pv-radio-card__title {
display: block;
font-family: var(--pv-font-display);
font-weight: 700;
color: var(--pv-ink);
font-size: var(--pv-fs-base);
margin-bottom: 2px;
}
.pv-radio-card__desc {
display: block;
font-size: var(--pv-fs-sm);
color: var(--pv-slate);
line-height: 1.45;
}
.pv-form__consent {
display: flex;
gap: var(--pv-s-3);
align-items: flex-start;
font-size: var(--pv-fs-sm);
color: var(--pv-graphite);
line-height: 1.5;
}
.pv-form__consent input[type="checkbox"] {
margin-top: 3px;
accent-color: var(--pv-teal-dk);
flex-shrink: 0;
}
.pv-form__submit {
display: flex;
flex-wrap: wrap;
gap: var(--pv-s-3);
align-items: center;
margin-top: var(--pv-s-3);
}
.pv-form__submit-note {
margin: 0;
font-size: var(--pv-fs-sm);
color: var(--pv-slate);
}
/* ---------- Signup form (notify.html) ---------- */
/* Multi-step signup form: numbered step badges, grouped field sections,
hover/checked states on preference cards. Sits inside a .pv-split
column so no card wrapper or decorative backdrop is needed. */
.pv-signup-section + .pv-signup-section { margin-top: var(--pv-s-6); }
.pv-signup-step {
margin: 0 0 var(--pv-s-3);
padding-bottom: var(--pv-s-3);
border-bottom: 1px solid var(--pv-line);
}
.pv-signup-step__title {
font-family: var(--pv-font-display);
font-weight: 700;
font-size: var(--pv-fs-lg);
margin: 0;
color: var(--pv-ink);
}
.pv-signup-step-hint {
margin: 0 0 var(--pv-s-4);
font-size: var(--pv-fs-sm);
color: var(--pv-slate);
}
/* Preference checkboxes — simple checkbox style for Gravity Forms compatibility */
.pv-signup-cb {
display: flex;
gap: var(--pv-s-3);
align-items: flex-start;
padding: var(--pv-s-2) 0;
cursor: pointer;
}
.pv-signup-cb input[type="checkbox"] {
margin-top: 3px;
accent-color: var(--pv-teal-dk);
flex-shrink: 0;
width: 18px;
height: 18px;
}
.pv-signup-cb__title {
display: block;
font-family: var(--pv-font-display);
font-weight: 600;
color: var(--pv-ink);
margin-bottom: 2px;
}
.pv-signup-cb__desc {
display: block;
font-size: var(--pv-fs-sm);
color: var(--pv-slate);
line-height: 1.5;
}
/* Track interest rows — minimal inline checkboxes with soft hover */
.pv-signup-track {
display: flex;
gap: var(--pv-s-3);
align-items: flex-start;
padding: var(--pv-s-3) var(--pv-s-4);
border-radius: var(--pv-r-md);
transition: background var(--pv-dur) var(--pv-ease);
cursor: pointer;
font-size: var(--pv-fs-base);
color: var(--pv-graphite);
line-height: 1.5;
}
.pv-signup-track:hover { background: var(--pv-canvas); }
.pv-signup-track input[type="checkbox"] {
accent-color: var(--pv-teal-dk);
flex-shrink: 0;
width: 18px;
height: 18px;
margin-top: 3px;
}
.pv-signup-track strong { color: var(--pv-ink); }
.pv-signup-req { color: var(--pv-coral); font-weight: 600; }
.pv-signup-optional {
color: var(--pv-slate);
font-weight: 400;
font-size: 0.9em;
}
.pv-signup-footer {
margin-top: var(--pv-s-6);
padding-top: var(--pv-s-5);
border-top: 1px solid var(--pv-line);
}
.pv-signup-reassure {
display: flex;
align-items: center;
justify-content: center;
gap: var(--pv-s-2);
margin: var(--pv-s-4) 0 0;
font-size: var(--pv-fs-sm);
color: var(--pv-slate);
text-align: center;
}
/* ---------- Past speakers — year grouping ---------- */
.pv-year-group + .pv-year-group { margin-top: var(--pv-s-8); }
.pv-year-header {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--pv-s-4);
padding-bottom: var(--pv-s-4);
margin-bottom: var(--pv-s-6);
border-bottom: 2px solid var(--pv-line);
}
.pv-year-header__title {
font-family: var(--pv-font-display);
font-weight: 700;
font-size: var(--pv-fs-2xl);
line-height: 1.1;
color: var(--pv-ink);
margin: 0;
display: inline-flex;
align-items: center;
gap: var(--pv-s-3);
}
.pv-year-header__badge {
display: inline-flex;
align-items: center;
padding: 4px 12px;
border-radius: 999px;
font-family: var(--pv-font-display);
font-size: var(--pv-fs-xs);
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
background: var(--pv-canvas);
color: var(--pv-teal-dk);
}
.pv-year-header__meta {
color: var(--pv-slate);
font-size: var(--pv-fs-sm);
margin: 0;
}
/* ---------- Agenda page — full-day timetable ---------- */
/* Grid with one time column + three track columns on desktop. Stacks to a
single column on mobile (time becomes a small label above each cell). */
.pv-timetable {
display: grid;
gap: 1px;
background: var(--pv-line);
border: 1px solid var(--pv-line);
border-radius: var(--pv-r-lg);
overflow: hidden;
grid-template-columns: 1fr;
}
@media (min-width: 960px) {
.pv-timetable { grid-template-columns: 140px repeat(3, 1fr); }
}
.pv-timetable__cell {
background: var(--pv-white);
padding: var(--pv-s-4);
font-size: var(--pv-fs-sm);
color: var(--pv-graphite);
display: flex;
flex-direction: column;
gap: 4px;
min-height: 72px;
}
.pv-timetable__cell--head {
background: var(--pv-ink);
color: var(--pv-white);
font-family: var(--pv-font-display);
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
font-size: var(--pv-fs-xs);
justify-content: center;
text-align: center;
min-height: 0;
}
.pv-timetable__cell--head:first-child { text-align: left; justify-content: flex-start; }
.pv-timetable__cell--time {
background: var(--pv-canvas);
color: var(--pv-slate);
font-family: var(--pv-font-display);
font-weight: 600;
font-size: var(--pv-fs-xs);
letter-spacing: 0.08em;
justify-content: center;
min-height: 0;
}
@media (min-width: 960px) {
.pv-timetable__cell--time { justify-content: center; }
}
.pv-timetable__cell--break {
background: linear-gradient(90deg, rgba(43,45,126,0.08), rgba(0,168,181,0.08), rgba(79,184,77,0.08));
color: var(--pv-teal-dk);
font-family: var(--pv-font-display);
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
font-size: var(--pv-fs-xs);
justify-content: center;
align-items: center;
text-align: center;
min-height: 0;
}
@media (min-width: 960px) {
.pv-timetable__cell--break { grid-column: 2 / -1; }
}
.pv-timetable__session-title {
font-family: var(--pv-font-display);
font-weight: 700;
color: var(--pv-ink);
font-size: var(--pv-fs-sm);
line-height: 1.3;
}
.pv-timetable__session-meta {
font-size: var(--pv-fs-xs);
color: var(--pv-slate);
}
/* ---------- Agenda page — per-track session listing ---------- */
.pv-track-section { scroll-margin-top: 100px; }
.pv-track-section__header {
display: grid;
gap: var(--pv-s-2);
padding: var(--pv-s-4) 0 var(--pv-s-4) var(--pv-s-5);
border-left: 4px solid var(--pv-teal);
margin-bottom: var(--pv-s-6);
}
.pv-track-section--1 .pv-track-section__header { border-left-color: var(--pv-teal); }
.pv-track-section--2 .pv-track-section__header { border-left-color: var(--pv-navy); }
.pv-track-section--3 .pv-track-section__header { border-left-color: var(--pv-green); }
.pv-track-section__num {
font-family: var(--pv-font-display);
font-weight: 700;
font-size: var(--pv-fs-xs);
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--pv-slate);
}
.pv-track-section__title {
font-family: var(--pv-font-display);
font-weight: 700;
font-size: var(--pv-fs-2xl);
line-height: 1.15;
color: var(--pv-ink);
margin: 0;
}
.pv-track-section__desc {
color: var(--pv-graphite);
margin: 4px 0 0;
max-width: 60ch;
}
.pv-sessions {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: var(--pv-s-3);
}
.pv-session {
display: grid;
gap: var(--pv-s-3);
grid-template-columns: 1fr;
padding: var(--pv-s-5);
background: var(--pv-white);
border: 1px solid var(--pv-line);
border-radius: var(--pv-r-md);
text-decoration: none;
color: inherit;
transition: border-color var(--pv-dur) var(--pv-ease),
box-shadow var(--pv-dur) var(--pv-ease),
transform var(--pv-dur) var(--pv-ease);
}
@media (min-width: 720px) {
.pv-session { grid-template-columns: 130px 1fr auto; align-items: center; }
}
.pv-session:hover {
border-color: var(--pv-teal);
box-shadow: var(--pv-shadow-sm);
transform: translateY(-1px);
}
.pv-session__time {
font-family: var(--pv-font-display);
font-weight: 600;
color: var(--pv-teal-dk);
font-size: var(--pv-fs-sm);
letter-spacing: 0.04em;
}
.pv-session__body { min-width: 0; }
.pv-session__title {
font-family: var(--pv-font-display);
font-weight: 700;
font-size: var(--pv-fs-lg);
color: var(--pv-ink);
margin: 0 0 4px;
line-height: 1.3;
}
.pv-session__speaker {
font-size: var(--pv-fs-sm);
color: var(--pv-slate);
margin: 0;
}
.pv-session__room {
font-family: var(--pv-font-display);
font-size: var(--pv-fs-xs);
font-weight: 600;
color: var(--pv-slate);
letter-spacing: 0.12em;
text-transform: uppercase;
white-space: nowrap;
}
/* ---------- Sponsorship tiers (Become a Sponsor page) ---------- */
/* 4-tier grid: 1 col mobile, 2 col tablet, 2 col desktop. Each tier card
gets a gradient top-stripe; a --featured modifier uses the orange accent
for the recommended tier. Benefits render as checklist items. */
.pv-tiers {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: var(--pv-s-5);
grid-template-columns: 1fr;
}
@media (min-width: 720px) {
.pv-tiers { grid-template-columns: repeat(2, 1fr); }
}
.pv-tier {
background: var(--pv-white);
border: 1px solid var(--pv-line);
border-radius: var(--pv-r-lg);
padding: var(--pv-s-6) var(--pv-s-5);
display: flex;
flex-direction: column;
gap: var(--pv-s-4);
position: relative;
overflow: hidden;
box-shadow: var(--pv-shadow-sm);
transition: transform var(--pv-dur) var(--pv-ease), box-shadow var(--pv-dur) var(--pv-ease);
}
.pv-tier:hover {
transform: translateY(-4px);
box-shadow: var(--pv-shadow-md);
}
.pv-tier::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 6px;
background: var(--pv-gradient);
}
.pv-tier--featured {
border: 2px solid var(--pv-orange);
}
.pv-tier--featured::before { background: var(--pv-orange); height: 8px; }
.pv-tier__badge {
position: absolute;
top: var(--pv-s-4);
right: var(--pv-s-4);
display: inline-flex;
align-items: center;
padding: 4px 10px;
background: var(--pv-orange);
color: var(--pv-white);
border-radius: 999px;
font-family: var(--pv-font-display);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.pv-tier__head {
padding-bottom: var(--pv-s-4);
border-bottom: 1px solid var(--pv-line);
}
.pv-tier__name {
font-family: var(--pv-font-display);
font-weight: 700;
font-size: var(--pv-fs-2xl);
line-height: 1.1;
color: var(--pv-ink);
margin: 0 0 8px;
}
.pv-tier__price {
font-family: var(--pv-font-display);
font-size: var(--pv-fs-xs);
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--pv-teal-dk);
margin: 0;
}
.pv-tier__benefits {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: var(--pv-s-3);
flex: 1;
}
.pv-tier__benefit {
display: flex;
gap: var(--pv-s-3);
align-items: flex-start;
font-size: var(--pv-fs-sm);
color: var(--pv-graphite);
line-height: 1.5;
}
.pv-tier__benefit svg {
width: 18px;
height: 18px;
flex-shrink: 0;
margin-top: 2px;
color: var(--pv-teal);
}
.pv-tier__benefit--muted { color: var(--pv-mute); }
.pv-tier__benefit--muted svg { color: var(--pv-mute); }
.pv-tier__cta { margin-top: var(--pv-s-3); }
.pv-tier__cta .pv-btn { width: 100%; justify-content: center; }
/* ---------- Section eyebrow — terminal prompt mark ---------- */
/* Body-section counterpart to the hero's ">_" mark. Same chevron + blinking
underscore cursor, placed inline to the left of the eyebrow text. */
.pv-eyebrow--prompt {
display: inline-flex;
align-items: center;
gap: 6px;
}
.pv-eyebrow-prompt-mark {
width: 28px;
height: 16px;
flex-shrink: 0;
display: block;
color: var(--pv-orange);
}
.pv-eyebrow-prompt-mark .pv-eyebrow-prompt-cursor {
animation: pv-eyebrow-prompt-blink 1.4s steps(2, end) infinite;
}
@keyframes pv-eyebrow-prompt-blink {
0%, 55% { opacity: 1; }
60%, 100% { opacity: 0.25; }
}
@media (prefers-reduced-motion: reduce) {
.pv-eyebrow-prompt-mark .pv-eyebrow-prompt-cursor { animation: none !important; }
}
/* ---------- Hero eyebrow — terminal prompt mark ---------- */
/* Chevron + blinking underscore cursor (classic ">_" prompt), placed
inline to the left of the dateline. The chevron stays static; only the
underscore blinks like a terminal cursor. References "Prompt" in the
event name and the developer/AI culture of the audience. */
.pv-hero__eyebrow {
display: inline-flex;
flex-direction: row;
align-items: center;
gap: 6px;
margin-bottom: var(--pv-s-5);
}
.pv-hero__eyebrow-prompt {
width: 28px;
height: 16px;
color: var(--pv-gold);
display: block;
flex-shrink: 0;
}
.pv-hero__eyebrow-prompt-cursor {
animation: pv-prompt-blink 1.4s steps(2, end) infinite;
}
@keyframes pv-prompt-blink {
0%, 55% { opacity: 1; }
60%, 100% { opacity: 0.25; }
}
@media (prefers-reduced-motion: reduce) {
.pv-hero__eyebrow-prompt-cursor { animation: none; }
}
.pv-hero__eyebrow-text {
font-family: var(--pv-font-display);
font-weight: 500;
font-size: var(--pv-fs-sm);
letter-spacing: 0.26em;
text-transform: uppercase;
color: rgba(255, 255, 255, 0.88);
}
/* ---------- Utility ---------- */
.pv-bg-canvas { background: var(--pv-canvas); }
.pv-bg-white { background: var(--pv-white); }
.pv-bg-ink { background: var(--pv-ink); color: var(--pv-white); }
.pv-bg-ink h2, .pv-bg-ink h3 { color: var(--pv-white); }
.pv-bg-ink .pv-lede, .pv-bg-ink p { color: rgba(255,255,255,0.82); }