/* ============================================================ Hybrid Platform Conference · Shared Stylesheet Used by: index.html · virtual.html · physical.html Design tokens mirror the HyPlaCon Design System. ============================================================ */ :root { /* —— Palette ————————————————————————— */ --navy-900: #04122A; --navy-800: #071E3C; --navy-700: #0A2A4D; --teal-700: #074A51; --green-teal-500: #06856D; --mint-500: #20F5CE; --mint-300: #79F9E2; --mint-100: #A6FBEB; --blue-500: #3985E8; --blue-400: #5AA0F5; --white: #FFFFFF; --ink-100: rgba(255,255,255,0.96); --ink-200: rgba(255,255,255,0.86); --ink-300: rgba(255,255,255,0.62); --ink-400: rgba(255,255,255,0.40); --hairline: rgba(255,255,255,0.10); --hairline-2: rgba(255,255,255,0.18); --radius: 16px; --radius-pill: 999px; --radius-lg: 16px; --radius-md: 10px; --radius-sm: 6px; /* —— Event accent (overridden per page on ) —— */ --event-accent: var(--mint-500); --event-accent-soft: rgba(32,245,206,0.12); --event-accent-ink: #062019; --event-accent-name: "Both events"; } /* Virtual = mint */ html[data-event="virtual"] { --event-accent: #20F5CE; --event-accent-soft: rgba(32,245,206,0.12); --event-accent-ink: #062019; --event-accent-name: "Virtual event"; } /* Physical = electric blue */ html[data-event="physical"] { --event-accent: #3985E8; --event-accent-soft: rgba(57,133,232,0.14); --event-accent-ink: #FFFFFF; --event-accent-name: "Physical event"; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: 'Geist', system-ui, sans-serif; color: var(--white); background: var(--navy-900); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv11"; } a { color: inherit; text-decoration: none; } /* —— Signature background ————————————————————————— */ .bg-cdai { position: relative; background: radial-gradient(900px 600px at 18% 38%, rgba(32,245,206,0.04), transparent 60%), linear-gradient(135deg, #071E3C 0%, #071E3C 22%, #074A51 64%, #06856D 91%, rgba(6,133,109,0.78) 100%); overflow: hidden; } .bg-cdai .hex-layer { position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='208' viewBox='0 0 240 208'%3E%3Cg fill='none' stroke='%2320F5CE' stroke-opacity='0.18' stroke-width='1'%3E%3Cpolygon points='60,4 116,36 116,100 60,132 4,100 4,36'/%3E%3Cpolygon points='180,4 236,36 236,100 180,132 124,100 124,36'/%3E%3Cpolygon points='120,108 176,140 176,204 120,236 64,204 64,140'/%3E%3C/g%3E%3C/svg%3E"); background-size: 520px 450px; opacity: 0.55; mix-blend-mode: screen; } .bg-cdai .glow-layer { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(3px 3px at 78% 22%, #A6FBEB 0%, rgba(166,251,235,0) 70%), radial-gradient(2px 2px at 62% 70%, #79F9E2 0%, rgba(121,249,226,0) 70%), radial-gradient(2px 2px at 88% 58%, #20F5CE 0%, rgba(32,245,206,0) 70%), radial-gradient(2px 2px at 32% 86%, #A6FBEB 0%, rgba(166,251,235,0) 70%), radial-gradient(3px 3px at 70% 8%, #79F9E2 0%, rgba(121,249,226,0) 70%); filter: blur(0.4px); } /* —— Event banner (top of every page) — prominent, two-tone ————————————————————————— */ .event-strip-prompt { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 13px 20px; font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-200); background: rgba(4,18,42,0.65); border-bottom: 1px solid var(--hairline); text-align: center; } .event-strip-prompt strong { color: var(--white); font-weight: 600; } .event-strip-prompt .esp-dots { display: inline-flex; gap: 5px; flex: none; } .event-strip-prompt .esp-dots i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; } .event-strip-prompt .esp-dots .m { background: var(--mint-500); } .event-strip-prompt .esp-dots .b { background: var(--blue-500); } @media (max-width: 600px) { .event-strip-prompt { font-size: 9.5px; letter-spacing: 0.1em; gap: 9px; padding: 11px 16px; } } .event-strip { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; position: relative; background: #0A2A4D; /* lighter than page so it sits forward */ border-bottom: 1px solid var(--hairline-2); box-shadow: 0 1px 0 rgba(0,0,0,0.4); } /* Mint+blue split top accent */ .event-strip::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; pointer-events: none; z-index: 2; background: linear-gradient(90deg, var(--blue-500) 0%, var(--blue-500) 50%, var(--mint-500) 50%, var(--mint-500) 100%); } .event-strip a { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 22px 32px; color: var(--ink-100); text-decoration: none; transition: background .25s ease, color .25s ease; border-right: 1px solid var(--hairline-2); overflow: hidden; } .event-strip a:last-child { border-right: none; } /* Default per-side tint */ .event-strip a.virtual { background: linear-gradient(135deg, rgba(32,245,206,0.10) 0%, rgba(32,245,206,0.02) 100%); padding-left: 72px; /* right-hand card — keep clear of the centre hex medallion */ } .event-strip a.physical { background: linear-gradient(135deg, rgba(57,133,232,0.10) 0%, rgba(57,133,232,0.02) 100%); padding-right: 72px; /* left-hand card — keep clear of the centre hex medallion */ } .event-strip a.virtual:hover { background: linear-gradient(135deg, rgba(32,245,206,0.18) 0%, rgba(32,245,206,0.05) 100%); } .event-strip a.physical:hover { background: linear-gradient(135deg, rgba(57,133,232,0.18) 0%, rgba(57,133,232,0.05) 100%); } .event-strip a .es-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 1px solid var(--hairline-2); background: rgba(7,30,60,0.55); transition: background .25s ease, border-color .25s ease, color .25s ease; } .event-strip a .es-icon svg { width: 22px; height: 22px; } .event-strip a.virtual .es-icon { color: var(--mint-500); border-color: rgba(32,245,206,0.35); } .event-strip a.physical .es-icon { color: var(--blue-400); border-color: rgba(57,133,232,0.40); } .event-strip a.virtual:hover .es-icon { background: rgba(32,245,206,0.18); border-color: var(--mint-500); } .event-strip a.physical:hover .es-icon { background: rgba(57,133,232,0.20); border-color: var(--blue-500); } .event-strip a .es-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; overflow: hidden; } .event-strip a .es-eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: 'Geist Mono', monospace; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-200); } .event-strip a .es-eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; animation: es-dot-pulse 2.2s ease-in-out infinite; } .event-strip a.virtual .es-eyebrow .dot { background: var(--mint-500); color: rgba(32,245,206,0.55); } .event-strip a.physical .es-eyebrow .dot { background: var(--blue-500); color: rgba(57,133,232,0.55); animation-delay: 1.1s; } @keyframes es-dot-pulse { 0%, 100% { box-shadow: 0 0 0 0 currentColor; } 50% { box-shadow: 0 0 0 5px transparent; } } @media (prefers-reduced-motion: reduce) { .event-strip a .es-eyebrow .dot { animation: none; box-shadow: 0 0 0 3px currentColor; } } .event-strip a .es-title { font-family: 'Geist', sans-serif; font-size: 18px; font-weight: 700; color: var(--white); letter-spacing: -0.005em; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .event-strip a .es-meta { font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--ink-200); letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .event-strip a .es-meta strong { font-weight: 600; } .event-strip a.virtual .es-meta strong { color: var(--mint-300); } .event-strip a.physical .es-meta strong { color: var(--blue-400); } .event-strip a .es-cta { display: inline-flex; align-items: center; gap: 8px; font-family: 'Geist Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--hairline-2); background: rgba(7,30,60,0.45); color: var(--white); transition: border-color .25s ease, color .25s ease, background .25s ease; flex-shrink: 0; } .event-strip a.virtual:hover .es-cta { border-color: var(--mint-500); color: var(--mint-300); background: rgba(32,245,206,0.12); } .event-strip a.physical:hover .es-cta { border-color: var(--blue-500); color: var(--blue-400); background: rgba(57,133,232,0.14); } .event-strip a .es-cta svg { width: 12px; height: 12px; } /* Active state — strong, unmissable */ .event-strip a.active { color: var(--white); cursor: default; } .event-strip a.virtual.active { background: linear-gradient(180deg, rgba(32,245,206,0.22) 0%, rgba(32,245,206,0.06) 100%); box-shadow: inset 0 3px 0 var(--mint-500); } .event-strip a.physical.active { background: linear-gradient(180deg, rgba(57,133,232,0.24) 0%, rgba(57,133,232,0.06) 100%); box-shadow: inset 0 3px 0 var(--blue-500); } .event-strip a.virtual.active .es-icon { background: rgba(32,245,206,0.20); border-color: var(--mint-500); } .event-strip a.physical.active .es-icon { background: rgba(57,133,232,0.22); border-color: var(--blue-500); } .event-strip a.virtual.active .es-cta { border-color: var(--mint-500); color: var(--mint-300); background: rgba(32,245,206,0.14); } .event-strip a.physical.active .es-cta { border-color: var(--blue-500); color: var(--blue-400); background: rgba(57,133,232,0.16); } /* The chosen event stays bright; the other fades back until hovered, so the current selection is unmistakable without needing a "you are here" label. */ .event-strip:has(a.active) a:not(.active) { opacity: 0.42; filter: saturate(0.6); transition: opacity .25s ease, filter .25s ease, background .25s ease; } .event-strip:has(a.active) a:not(.active):hover { opacity: 1; filter: none; } /* Solid "Selected" badge replaces the old pulsing "you are here" CTA */ .event-strip a.active .es-cta { cursor: default; font-weight: 600; } .event-strip a.virtual.active .es-cta { background: var(--mint-500); color: #062019; border-color: var(--mint-500); } .event-strip a.physical.active .es-cta { background: var(--blue-500); color: #ffffff; border-color: var(--blue-500); } .event-strip a.active .es-cta svg { width: 13px; height: 13px; } /* Ticket availability banner */ .tickets-avail { display: inline-flex; align-items: center; gap: 11px; margin: 0 auto 32px; padding: 11px 22px; border-radius: 999px; border: 1px solid var(--mint-500); background: rgba(32,245,206,0.10); font-family: 'Geist Mono', monospace; font-size: 12.5px; letter-spacing: 0.03em; color: var(--ink-100); } .tickets-avail strong { color: var(--mint-300); font-weight: 600; } .tickets-avail .ta-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--mint-500); color: var(--mint-500); animation: es-dot-pulse 2.2s ease-in-out infinite; } /* —— "Choose" hex medallion sitting between the two event cards —————————————————————— */ .event-strip { position: relative; } .es-chooser { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 88px; height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 3; pointer-events: none; filter: drop-shadow(0 10px 24px rgba(0,0,0,0.55)) drop-shadow(0 0 22px rgba(32,245,206,0.16)); } .es-chooser .es-chooser-hex { position: absolute; inset: 0; width: 100%; height: 100%; } .es-chooser .es-chooser-or { position: relative; font-family: 'Geist Mono', monospace; font-size: 20px; font-weight: 600; letter-spacing: 0.06em; color: var(--white); line-height: 1; } .es-chooser .es-chooser-label { position: relative; margin-top: 5px; font-family: 'Geist Mono', monospace; font-size: 8.5px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mint-300); line-height: 1; } /* —— Page chrome ————————————————————————— */ .page { max-width: 1280px; width: 100%; margin: 0 auto; background: var(--navy-900); overflow-x: hidden; } /* —— Nav ————————————————————————— */ .nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 18px 56px; background: rgba(4,18,42,0.78); backdrop-filter: blur(14px) saturate(130%); border-bottom: 1px solid var(--hairline); } .nav .brand { display: flex; align-items: center; gap: 12px; } .nav .brand .mark { width: 32px; height: 32px; } .nav .brand .name { font-weight: 700; letter-spacing: 0.01em; font-size: 16px; } .nav .brand .name small { display: block; font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--mint-300); letter-spacing: 0.18em; text-transform: uppercase; margin-top: 2px; font-weight: 400; } /* Event indicator inside nav — shows which page you're on */ .nav-event-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: var(--radius-pill); background: var(--event-accent-soft); border: 1px solid var(--event-accent); font-family: 'Geist Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--event-accent); margin-left: 14px; } .nav-event-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--event-accent); } html[data-event="physical"] .nav-event-badge { color: var(--blue-400); } .nav .links { display: flex; align-items: center; gap: 28px; font-size: 14px; color: var(--ink-200); } .nav .links a { transition: color .15s ease; padding: 6px 0; } .nav .links a:hover { color: var(--mint-300); } .nav .links a.active { color: var(--white); } .nav .actions { display: flex; gap: 12px; align-items: center; } /* —— Buttons ————————————————————————— */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: var(--radius-pill); font-family: 'Geist', sans-serif; font-weight: 500; font-size: 14px; line-height: 1; text-decoration: none; transition: transform .2s ease, background .2s ease, color .2s ease; cursor: pointer; border: 1px solid transparent; } .btn-primary { background: var(--mint-500); color: #062019; } .btn-primary:hover { background: #44F8D8; transform: translateY(-1px); } .btn-blue { background: var(--blue-500); color: white; } .btn-blue:hover { background: #4f95ed; transform: translateY(-1px); } .btn-event { background: var(--event-accent); color: var(--event-accent-ink); } .btn-event:hover { transform: translateY(-1px); filter: brightness(1.05); } .btn-ghost { background: rgba(255,255,255,0.04); border-color: var(--mint-500); color: var(--mint-300); } .btn-ghost:hover { background: rgba(32,245,206,0.08); color: var(--mint-100); } .btn-ghost-blue { background: rgba(255,255,255,0.04); border-color: var(--blue-500); color: var(--blue-400); } .btn-ghost-blue:hover { background: rgba(57,133,232,0.1); color: var(--white); } .btn-lg { padding: 16px 28px; font-size: 15px; } /* —— Eyebrow ————————————————————————— */ .eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: 'Geist Mono', monospace; text-transform: uppercase; letter-spacing: 0.18em; font-size: 11px; color: var(--mint-300); } .eyebrow-rule { width: 56px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--blue-500), var(--mint-500)); } .eyebrow.virtual { color: var(--mint-300); } .eyebrow.physical { color: var(--blue-400); } .eyebrow.virtual .eyebrow-rule { background: var(--mint-500); } .eyebrow.physical .eyebrow-rule { background: var(--blue-500); } /* —— Headings ————————————————————————— */ h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: -0.01em; } .h-display { font-size: 80px; line-height: 1.02; letter-spacing: -0.025em; font-weight: 800; } .h-section { font-size: 44px; line-height: 1.08; letter-spacing: -0.02em; } .h-card { font-size: 22px; line-height: 1.3; } p { margin: 0; line-height: 1.6; color: var(--ink-200); font-size: 16px; } p.lead { font-size: 18px; color: var(--ink-200); max-width: 60ch; } .kw { color: var(--blue-500); font-weight: 600; } .kw-mint { color: var(--mint-500); font-weight: 600; } .kw-event { color: var(--event-accent); font-weight: 600; } .kicker { color: var(--ink-300); font-family: 'Geist Mono', monospace; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; } /* —— Layout ————————————————————————— */ section { position: relative; } .wrap { padding: 96px 80px; position: relative; } .wrap-tight { padding: 64px 80px; } .container { position: relative; z-index: 2; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .grid-6 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; } /* —— Hero ————————————————————————— */ .hero { padding: 56px 80px 80px; } .hero .container { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 56px; align-items: center; } .hero-headline { font-size: 84px; line-height: 1.0; letter-spacing: -0.03em; font-weight: 800; } .hero-headline .accent { color: var(--event-accent); } .hero-headline .accent-blue { color: var(--blue-500); } .hero-sub { font-size: 18px; color: var(--ink-200); margin-top: 24px; max-width: 50ch; line-height: 1.55; } .hero-ctas { display: flex; gap: 14px; align-items: center; margin-top: 36px; flex-wrap: wrap; } .hero-meta { display: flex; gap: 12px; margin-top: 36px; flex-wrap: wrap; } .hero-meta .pill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--radius-pill); background: rgba(7,30,60,0.55); border: 1px solid var(--hairline-2); font-size: 13px; font-family: 'Geist Mono', monospace; letter-spacing: 0.06em; } .hero-meta .pill svg { color: var(--event-accent); } /* Hero "you're viewing" tag — only on event pages */ .event-tag { display: inline-flex; align-items: center; gap: 12px; padding: 10px 18px 10px 14px; border-radius: var(--radius-pill); background: var(--event-accent-soft); border: 1px solid var(--event-accent); font-family: 'Geist Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--event-accent); } html[data-event="physical"] .event-tag { color: var(--blue-400); } .event-tag .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--event-accent); box-shadow: 0 0 0 4px var(--event-accent-soft); } .hero-image { position: relative; aspect-ratio: 4/5; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--hairline-2); } /* —— Placeholder image ————————————————————————— */ .ph { background: repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 8px, rgba(255,255,255,0.02) 8px 16px), linear-gradient(135deg, #0A2A4D, #074A51); display: flex; align-items: center; justify-content: center; color: var(--ink-300); font-family: 'Geist Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.18em; text-align: center; padding: 12px; } .ph .ph-inner { display: flex; flex-direction: column; gap: 6px; align-items: center; } .ph .ph-tag { border: 1px solid var(--hairline-2); padding: 4px 10px; border-radius: 4px; background: rgba(0,0,0,0.2); } /* —— Section header ————————————————————————— */ .sec-head { margin-bottom: 48px; display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; } .sec-head .left { max-width: 720px; } .sec-head .eyebrow { margin-bottom: 16px; } .sec-head h2 { margin-bottom: 12px; } .sec-head .right { flex-shrink: 0; } /* ============================================================ THE EVENT CHOOSER — two big cards on the home hero ============================================================ */ .event-choose-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 48px; } .event-choose { position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: 36px 32px 32px; background: rgba(7,30,60,0.60); border: 1px solid var(--hairline-2); display: flex; flex-direction: column; transition: transform .25s ease, border-color .25s ease, background .25s ease; text-decoration: none; color: inherit; } .event-choose.physical { order: -1; } .event-choose:hover { transform: translateY(-4px); } .event-choose.virtual:hover { border-color: var(--mint-500); background: rgba(7,60,55,0.72); } .event-choose.physical:hover { border-color: var(--blue-500); background: rgba(14,44,82,0.72); } .event-choose .ec-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; } .event-choose .ec-badge { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: var(--radius-pill); font-family: 'Geist Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.16em; } .event-choose.virtual .ec-badge { background: rgba(32,245,206,0.12); border: 1px solid var(--mint-500); color: var(--mint-300); } .event-choose.physical .ec-badge { background: rgba(57,133,232,0.14); border: 1px solid var(--blue-500); color: var(--blue-400); } .event-choose .ec-badge .dot { width: 7px; height: 7px; border-radius: 50%; } .event-choose.virtual .ec-badge .dot { background: var(--mint-500); } .event-choose.physical .ec-badge .dot { background: var(--blue-500); } .event-choose .ec-price { font-family: 'Geist Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-300); } .event-choose .ec-price strong { color: var(--white); } .event-choose.virtual .ec-price strong { color: var(--mint-500); } .event-choose.physical .ec-price strong { color: var(--blue-400); } .event-choose .ec-title { font-size: 40px; line-height: 1.05; font-weight: 800; letter-spacing: -0.02em; margin-top: 28px; } .event-choose.virtual .ec-title .accent { color: var(--mint-500); } .event-choose.physical .ec-title .accent { color: var(--blue-500); } .event-choose .ec-meta { display: flex; flex-direction: column; gap: 6px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--hairline); font-family: 'Geist Mono', monospace; font-size: 12px; letter-spacing: 0.06em; color: var(--ink-200); } .event-choose .ec-meta .row { display: grid; grid-template-columns: 90px 1fr; gap: 12px; } .event-choose .ec-meta .row .lbl { color: var(--ink-300); text-transform: uppercase; letter-spacing: 0.14em; font-size: 10px; padding-top: 1px; } .event-choose .ec-desc { margin-top: 20px; font-size: 15px; color: var(--ink-200); line-height: 1.55; } .event-choose .ec-cta { margin-top: 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .event-choose .ec-cta .label { font-family: 'Geist Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-300); } .event-choose .ec-cta .go { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; } .event-choose.virtual .ec-cta .go { color: var(--mint-500); } .event-choose.physical .ec-cta .go { color: var(--blue-400); } /* Decorative hex motif inside each card */ .event-choose::after { content: ""; position: absolute; top: -40px; right: -60px; width: 240px; height: 240px; background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,5 90,28 90,72 50,95 10,72 10,28' fill='none' stroke='%2320F5CE' stroke-width='1' stroke-opacity='0.3'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat; opacity: 0.5; pointer-events: none; } .event-choose.physical::after { background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpolygon points='50,5 90,28 90,72 50,95 10,72 10,28' fill='none' stroke='%233985E8' stroke-width='1' stroke-opacity='0.3'/%3E%3C/svg%3E"); } /* —— Speakers ————————————————————————— */ .speaker-card { position: relative; aspect-ratio: 3/4; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--hairline-2); transition: transform .25s ease, border-color .25s ease; } .speaker-card:hover { transform: translateY(-4px); border-color: var(--event-accent); } .speaker-card .ph { position: absolute; inset: 0; } .speaker-card .meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 18px 18px; background: linear-gradient(180deg, transparent, rgba(4,18,42,0.92) 60%); } .speaker-card .meta .session { font-weight: 700; font-size: 15px; line-height: 1.25; color: #fff; letter-spacing: -0.005em; } .speaker-card .meta .name { font-family: 'Geist Mono', monospace; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--mint-300); margin-top: 8px; } html[data-event="physical"] .speaker-card .meta .name { color: var(--blue-400); } .speaker-card .meta .role { font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--ink-300); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 3px; } html[data-event="physical"] .speaker-card .meta .role { color: var(--ink-300); } .speaker-card .meta .session.tba { color: var(--ink-300); font-weight: 600; } /* —— Keynote feature (Impact block) ————————————————————————— */ .impact-speakers { grid-column: 1 / -1; margin-top: 8px; padding-top: 48px; border-top: 1px solid var(--hairline-2); } .keynote-feature { display: grid; grid-template-columns: 240px 1fr; gap: 32px; align-items: stretch; margin-top: 24px; padding: 20px; border-radius: var(--radius-lg); border: 1px solid var(--blue-500); background: linear-gradient(135deg, rgba(57,133,232,0.14) 0%, rgba(57,133,232,0.04) 100%); } .keynote-feature .kf-photo { position: relative; aspect-ratio: 1/1; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--hairline-2); } .keynote-feature .kf-body { display: flex; flex-direction: column; justify-content: center; } .keynote-feature .kf-tag { align-self: flex-start; font-family: 'Geist Mono', monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.16em; color: #fff; background: var(--blue-500); border-radius: 999px; padding: 5px 12px; } .keynote-feature .kf-title { font-size: 28px; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; margin-top: 16px; } .keynote-feature .kf-desc { color: var(--ink-300); font-size: 14px; line-height: 1.55; margin-top: 10px; max-width: 56ch; } .keynote-feature .kf-meta { display: flex; align-items: baseline; gap: 12px; margin-top: 18px; } .keynote-feature .kf-name { font-weight: 700; font-size: 16px; } .keynote-feature .kf-role { font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--blue-400); text-transform: uppercase; letter-spacing: 0.14em; } .impact-speakers .kf-sub { font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--ink-300); text-transform: uppercase; letter-spacing: 0.16em; margin: 36px 0 16px; } @media (max-width: 1023px) { .keynote-feature { grid-template-columns: 160px 1fr; gap: 24px; } } @media (max-width: 720px) { .keynote-feature { grid-template-columns: 1fr; } .keynote-feature .kf-photo { aspect-ratio: 16/10; } .keynote-feature .kf-title { font-size: 24px; } } /* —— Stats / impact ————————————————————————— */ .impact { background: var(--navy-900); padding: 96px 80px; } .impact .container { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; } .impact .photo { aspect-ratio: 4/5; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--hairline-2); } .stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--hairline-2); } .stat .num { font-size: 56px; font-weight: 800; line-height: 1; letter-spacing: -0.03em; color: var(--event-accent); } .stat .num .plus { font-size: 36px; vertical-align: top; opacity: 0.7; } .stat .label { font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--ink-300); text-transform: uppercase; letter-spacing: 0.14em; margin-top: 14px; line-height: 1.5; } /* —— Agenda / journey ————————————————————————— */ .agenda-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .agenda-card { border-radius: var(--radius-lg); padding: 24px; background: rgba(255,255,255,0.03); border: 1px solid var(--hairline-2); display: flex; flex-direction: column; justify-content: space-between; min-height: 200px; transition: border-color .2s ease, transform .2s ease; } .agenda-card:hover { border-color: var(--event-accent); transform: translateY(-3px); } .agenda-card .time { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; } .agenda-card .name { font-weight: 700; font-size: 18px; margin-top: 8px; } .agenda-card .desc { color: var(--ink-300); font-size: 13px; margin-top: 6px; line-height: 1.5; } .agenda-card.featured { background: var(--event-accent); border-color: var(--event-accent); color: var(--event-accent-ink); } html[data-event="virtual"] .agenda-card.featured, .agenda-card.featured.virtual { color: #062019; } html[data-event="virtual"] .agenda-card.featured .desc, .agenda-card.featured.virtual .desc { color: rgba(6,32,25,0.78); } html[data-event="physical"] .agenda-card.featured, .agenda-card.featured.physical { color: #FFFFFF; } html[data-event="physical"] .agenda-card.featured .desc, .agenda-card.featured.physical .desc { color: rgba(255,255,255,0.86); } .agenda-card.featured .tag { font-family: 'Geist Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; } /* —— Snapshot / topics ————————————————————————— */ .snapshot { background: var(--navy-900); padding: 96px 80px; } .snapshot .container { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: center; } .snapshot .photo { aspect-ratio: 4/5; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--hairline-2); } .topic-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .topic { padding: 22px; border-radius: var(--radius-md); background: rgba(255,255,255,0.03); border: 1px solid var(--hairline-2); transition: border-color .2s ease; } .topic:hover { border-color: var(--event-accent); } .topic .ico { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--event-accent-soft); color: var(--event-accent); } .topic .ico svg { width: 18px; height: 18px; } .topic .name { font-weight: 700; font-size: 16px; margin-top: 14px; } .topic .desc { font-size: 13px; color: var(--ink-300); margin-top: 6px; line-height: 1.55; } /* —— Quote ————————————————————————— */ .quote-wrap { padding: 120px 80px; background: var(--navy-900); } .quote { max-width: 880px; margin: 0 auto; text-align: center; } .quote .qm { font-family: 'Geist', sans-serif; font-size: 96px; line-height: 0.6; color: var(--event-accent); font-weight: 800; letter-spacing: -0.04em; height: 40px; display: block; } .quote blockquote { margin: 24px 0 0; padding: 0; font-size: 32px; line-height: 1.35; font-weight: 500; color: var(--white); letter-spacing: -0.01em; } .quote blockquote em { color: var(--blue-500); font-style: normal; font-weight: 600; } .quote .attr { display: flex; gap: 14px; align-items: center; justify-content: center; margin-top: 32px; } .quote .attr .avatar { width: 40px; height: 40px; border-radius: 50%; } .quote .attr .who { font-weight: 600; font-size: 14px; } .quote .attr .role { font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--ink-300); text-transform: uppercase; letter-spacing: 0.14em; margin-top: 2px; } .quote .nav-dots { display: flex; justify-content: center; gap: 10px; margin-top: 40px; } .quote .nav-dots .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--hairline-2); } .quote .nav-dots .dot.on { background: var(--event-accent); width: 24px; border-radius: 4px; } /* —— Mid CTA banner ————————————————————————— */ .banner { position: relative; min-height: 320px; padding: 96px 80px; display: flex; align-items: center; justify-content: center; text-align: center; } .banner .container { max-width: 720px; } .banner h2 { font-size: 56px; line-height: 1.05; font-weight: 800; letter-spacing: -0.02em; } .banner h2 .accent { color: var(--event-accent); } .banner h2 .accent-blue { color: var(--blue-500); } .banner p { margin: 16px auto 28px; max-width: 50ch; } .banner-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; } /* —— Connect ————————————————————————— */ .connect { background: var(--navy-900); padding: 120px 80px 96px; position: relative; overflow: hidden; } .connect::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 100%; background: radial-gradient(600px 400px at 80% 30%, rgba(32,245,206,0.06), transparent 60%), radial-gradient(500px 400px at 10% 80%, rgba(57,133,232,0.06), transparent 60%); pointer-events: none; } .connect .container { position: relative; } .connect .word { font-size: 200px; line-height: 0.9; font-weight: 800; letter-spacing: -0.04em; text-align: center; color: var(--white); background: linear-gradient(180deg, rgba(255,255,255,1), rgba(255,255,255,0.7)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .connect .form-row { display: grid; grid-template-columns: 1fr 1.2fr; gap: 32px; margin-top: 64px; } .connect-info { background: rgba(255,255,255,0.02); border: 1px solid var(--hairline-2); border-radius: var(--radius-lg); padding: 32px; } .connect-info h3 { font-size: 20px; font-weight: 700; margin-bottom: 12px; } .connect-info p { font-size: 14px; color: var(--ink-300); } .connect-info .info-list { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 14px; } .connect-info .info-list li { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: center; padding: 14px; border-radius: var(--radius-md); border: 1px solid var(--hairline); background: rgba(255,255,255,0.02); } .connect-info .info-list .ico { width: 36px; height: 36px; border-radius: 8px; background: var(--event-accent-soft); display: flex; align-items: center; justify-content: center; color: var(--event-accent); } .connect-info .info-list .lbl { font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--ink-300); text-transform: uppercase; letter-spacing: 0.14em; } .connect-info .info-list .val { font-size: 14px; font-weight: 500; margin-top: 2px; } .form-card { background: rgba(255,255,255,0.02); border: 1px solid var(--hairline-2); border-radius: var(--radius-lg); padding: 32px; display: flex; flex-direction: column; gap: 16px; } .form-card label { font-family: 'Geist Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-300); display: block; margin-bottom: 6px; } .form-card input, .form-card textarea, .form-card select { width: 100%; background: rgba(7,30,60,0.4); border: 1px solid var(--hairline-2); color: var(--white); font-family: 'Geist', sans-serif; font-size: 15px; padding: 14px 16px; border-radius: var(--radius-md); outline: none; transition: border-color .2s ease; } .form-card input:focus, .form-card textarea:focus, .form-card select:focus { border-color: var(--event-accent); } .form-card textarea { resize: vertical; min-height: 120px; } .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } /* —— Footer ————————————————————————— */ .foot { padding: 56px 80px 40px; border-top: 1px solid var(--hairline); display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; align-items: start; } .foot .brand-block { display: flex; gap: 14px; align-items: center; } .foot .brand-block .mark { width: 40px; height: 40px; } .foot .brand-block .name { font-weight: 700; font-size: 18px; } .foot .brand-block .name small { display: block; font-family: 'Geist Mono', monospace; font-size: 10px; color: var(--mint-300); letter-spacing: 0.18em; text-transform: uppercase; margin-top: 2px; font-weight: 400; } .foot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .foot ul li a { font-size: 14px; color: var(--ink-300); transition: color .2s ease; } .foot ul li a:hover { color: var(--mint-300); } .foot .col-title { font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--ink-300); text-transform: uppercase; letter-spacing: 0.18em; margin-bottom: 16px; } .foot-bottom { padding: 24px 80px 40px; display: flex; align-items: center; justify-content: space-between; font-family: 'Geist Mono', monospace; font-size: 11px; color: var(--ink-300); text-transform: uppercase; letter-spacing: 0.14em; border-top: 1px solid var(--hairline); } /* —— Hex mark (reusable) ————————————————————————— */ .hex-mark { display: block; } /* —— Misc ————————————————————————— */ .alt-bg { background: var(--navy-900); } /* Hide hamburger by default (visible on mobile) */ .nav-toggle { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; background: rgba(255,255,255,0.04); border: 1px solid var(--hairline-2); color: var(--white); border-radius: var(--radius-md); cursor: pointer; } /* ============================================================ RESPONSIVE - Tablet: ≤ 1023px - Mobile: ≤ 639px ============================================================ */ @media (max-width: 1023px) { .nav { padding: 14px 24px; gap: 12px; flex-wrap: nowrap; } .nav .links { display: none; } .nav-event-badge { margin-left: 8px; padding: 5px 10px 5px 7px; font-size: 9px; } .nav-toggle { display: inline-flex; } .nav.open { flex-wrap: wrap; row-gap: 14px; } .nav.open .links { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; order: 99; padding-top: 14px; border-top: 1px solid var(--hairline); } .nav.open .links a { padding: 10px 0; font-size: 16px; width: 100%; } .event-strip a { padding: 16px 18px; gap: 12px; grid-template-columns: auto 1fr; } .event-strip a.virtual { padding-right: 56px; } .event-strip a.physical { padding-left: 56px; } .event-strip a .es-icon { width: 38px; height: 38px; border-radius: 10px; } .event-strip a .es-icon svg { width: 18px; height: 18px; } .event-strip a .es-title { font-size: 15px; } .event-strip a .es-meta { font-size: 11px; } .event-strip a .es-cta { display: none; } .es-chooser { width: 68px; height: 76px; } .es-chooser .es-chooser-or { font-size: 16px; } .es-chooser .es-chooser-label { font-size: 7.5px; margin-top: 4px; } .wrap { padding: 64px 32px; } .wrap-tight { padding: 48px 32px; } .hero { padding: 40px 32px 64px; } .hero .container { grid-template-columns: 1fr; gap: 40px; } .hero-headline { font-size: 60px; line-height: 1.02; } .hero-image { aspect-ratio: 16/10; } .h-display { font-size: 56px; } .h-section { font-size: 36px; } .sec-head { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 36px; } .sec-head .right { align-self: flex-start; } .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-6 { grid-template-columns: repeat(3, 1fr); } .grid-2 { grid-template-columns: 1fr; } .event-choose-grid { grid-template-columns: 1fr; gap: 16px; } .event-choose .ec-title { font-size: 34px; } .agenda-grid { grid-template-columns: repeat(2, 1fr); } .topic-grid { grid-template-columns: repeat(2, 1fr); } .impact { padding: 64px 32px; } .impact .container { grid-template-columns: 1fr; gap: 40px; } .impact .photo { aspect-ratio: 16/10; max-width: 560px; } .stat-row { gap: 24px; } .snapshot { padding: 64px 32px; } .snapshot .container { grid-template-columns: 1fr; gap: 40px; } .snapshot .photo { aspect-ratio: 16/10; max-width: 560px; } .quote-wrap { padding: 80px 32px; } .quote blockquote { font-size: 26px; } .banner { padding: 80px 32px; min-height: 0; } .banner h2 { font-size: 44px; } .connect { padding: 80px 32px 64px; } .connect .word { font-size: 140px; } .connect .form-row { grid-template-columns: 1fr; gap: 24px; margin-top: 40px; } .foot { padding: 48px 32px 32px; grid-template-columns: 1fr 1fr; gap: 32px; } .foot-bottom { padding: 20px 32px 32px; flex-direction: column; gap: 12px; align-items: flex-start; } } @media (max-width: 639px) { .nav { padding: 12px 18px; } .nav .brand .name { font-size: 14px; } .nav .brand .name small { font-size: 9px; } .nav .brand .mark { width: 28px; height: 28px; } .nav .actions { gap: 8px; } .nav .actions .btn { padding: 10px 14px; font-size: 13px; } .nav-event-badge { display: none; } .event-strip { grid-template-columns: 1fr; } .event-strip a { border-bottom: 1px solid var(--hairline); border-right: none; padding: 14px 18px; } .event-strip a.virtual, .event-strip a.physical { padding-right: 18px; padding-left: 18px; } .event-strip a:last-child { border-bottom: none; } .event-strip a .es-icon { width: 36px; height: 36px; } .es-chooser { display: none; } .wrap { padding: 56px 20px; } .wrap-tight { padding: 40px 20px; } .hero { padding: 32px 20px 56px; } .hero-headline { font-size: 44px; letter-spacing: -0.02em; } .hero-sub { font-size: 16px; margin-top: 18px; } .hero-ctas { gap: 10px; margin-top: 28px; } .hero-ctas .btn { flex: 1; justify-content: center; } .hero-meta .pill { font-size: 11px; padding: 8px 12px; } .eyebrow { font-size: 10px; letter-spacing: 0.16em; } .h-display { font-size: 40px; } .h-section { font-size: 28px; } .h-card { font-size: 18px; } p { font-size: 15px; } p.lead { font-size: 15px; } .event-choose { padding: 24px 20px; } .event-choose .ec-title { font-size: 28px; } .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; gap: 16px; } .grid-6 { grid-template-columns: repeat(2, 1fr); } .agenda-grid { grid-template-columns: 1fr; } .topic-grid { grid-template-columns: 1fr; } .speaker-card { aspect-ratio: 4/5; } .impact { padding: 56px 20px; } .impact .container { gap: 32px; } .stat-row { grid-template-columns: 1fr; gap: 20px; padding-top: 24px; margin-top: 28px; text-align: left; } .stat { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; } .stat .num { font-size: 44px; } .stat .label { margin-top: 0; } .snapshot { padding: 56px 20px; } .quote-wrap { padding: 64px 20px; } .quote blockquote { font-size: 20px; } .quote .qm { font-size: 64px; height: 28px; } .banner { padding: 64px 20px; } .banner h2 { font-size: 32px; } .banner p { font-size: 15px; } .banner-actions { flex-direction: column; } .banner-actions .btn { width: 100%; justify-content: center; } .connect { padding: 64px 20px 48px; } .connect .word { font-size: min(80px, 20vw); } .connect-info, .form-card { padding: 22px; } .form-row-2 { grid-template-columns: 1fr; } .foot { grid-template-columns: 1fr; gap: 32px; padding: 40px 20px 24px; } .foot-bottom { padding: 18px 20px 32px; } } /* —— Programme timeline (physical page) ————————————————————————— */ .timeline { display: flex; flex-direction: column; gap: 12px; } .tl-row { display: grid; grid-template-columns: 160px 1fr 260px; gap: 28px; padding: 22px 26px; border-radius: var(--radius-lg); border: 1px solid var(--hairline-2); background: rgba(255,255,255,0.03); align-items: center; transition: border-color .2s ease, transform .2s ease, background .2s ease; } .tl-row:hover { border-color: var(--blue-500); transform: translateX(4px); } .tl-time { font-family: 'Geist Mono', monospace; font-size: 17px; font-weight: 600; color: var(--white); letter-spacing: 0.02em; line-height: 1.25; } .tl-time small { display: block; margin-top: 6px; font-size: 10px; color: var(--ink-300); font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; } .tl-tag { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 999px; font-family: 'Geist Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; background: rgba(57,133,232,0.14); color: var(--blue-400); border: 1px solid rgba(57,133,232,0.32); } .tl-title { font-size: 20px; font-weight: 700; line-height: 1.3; margin-top: 8px; letter-spacing: -0.005em; } .tl-desc { color: var(--ink-300); font-size: 13.5px; line-height: 1.55; margin-top: 6px; max-width: 56ch; } .tl-speaker { display: flex; align-items: center; gap: 12px; } .tl-speaker .tl-avatar { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--hairline-2); flex-shrink: 0; overflow: hidden; } .tl-speaker .tl-name { font-weight: 600; font-size: 15px; line-height: 1.2; } .tl-speaker .tl-role { font-family: 'Geist Mono', monospace; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--blue-400); margin-top: 4px; } /* Break rows — doors / lunch / coffee / drinks */ .tl-row.tl-break { background: rgba(255,255,255,0.015); border-style: dashed; border-color: var(--hairline); grid-template-columns: 160px 1fr auto; } .tl-row.tl-break:hover { border-color: var(--hairline-2); transform: none; } .tl-row.tl-break .tl-title { font-weight: 500; color: var(--ink-200); font-size: 16px; margin-top: 0; } .tl-row.tl-break .tl-meta { font-family: 'Geist Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-300); } .tl-row.tl-break .tl-ico { width: 32px; height: 32px; border-radius: 8px; background: rgba(255,255,255,0.04); color: var(--ink-200); display: inline-flex; align-items: center; justify-content: center; margin-right: 12px; flex-shrink: 0; } .tl-row.tl-break .tl-break-row { display: flex; align-items: center; } /* Keynote highlight */ .tl-row.tl-keynote { background: linear-gradient(135deg, rgba(57,133,232,0.14) 0%, rgba(57,133,232,0.04) 100%); border-color: var(--blue-500); } .tl-row.tl-keynote .tl-tag { background: var(--blue-500); color: #fff; border-color: var(--blue-500); } @media (max-width: 1023px) { .tl-row { grid-template-columns: 120px 1fr; gap: 20px; padding: 18px 22px; } .tl-speaker { grid-column: 1 / -1; padding-top: 14px; margin-top: 6px; border-top: 1px solid var(--hairline); } .tl-row.tl-break { grid-template-columns: 120px 1fr auto; } } @media (max-width: 639px) { .tl-row { grid-template-columns: 1fr; gap: 12px; padding: 18px; } .tl-time { font-size: 15px; } .tl-title { font-size: 17px; } .tl-speaker { padding-top: 12px; margin-top: 4px; border-top: 1px solid var(--hairline); } .tl-row.tl-break { grid-template-columns: 1fr; } } /* —— Skip to content (a11y) ————————————————————————— */ .skip-link { position: absolute; left: 16px; top: 16px; z-index: 9999; padding: 10px 18px; background: var(--navy-800); color: var(--mint-500); border: 1.5px solid var(--mint-500); border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; transform: translateY(-120%); transition: transform .15s ease; } .skip-link:focus { transform: translateY(0); outline: none; } /* —— Virtual "lineup coming" speaker placeholder ————————————————————————— */ .spk-teaser { position: absolute; inset: 0; background: linear-gradient(145deg, rgba(7,74,81,0.35) 0%, rgba(4,18,42,0.65) 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; } .spk-teaser .st-icon { color: var(--mint-300); opacity: 0.3; } .spk-teaser .st-label { font-family: 'Geist Mono', monospace; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-300); } /* —— "Coming soon" image teaser (virtual section images) ————————————————————————— */ .img-teaser { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding: 32px 24px; background: linear-gradient(145deg, rgba(7,74,81,0.4) 0%, rgba(4,18,42,0.7) 100%); border: 1px dashed rgba(32,245,206,0.2); border-radius: var(--radius-lg); } .img-teaser .it-icon { width: 48px; height: 48px; border-radius: 12px; background: rgba(32,245,206,0.07); border: 1px solid rgba(32,245,206,0.18); display: flex; align-items: center; justify-content: center; color: var(--mint-300); } .img-teaser .it-label { font-family: 'Geist Mono', monospace; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--mint-300); } .img-teaser .it-sub { font-size: 13px; color: var(--ink-400); } /* —— Notify-me inline form (virtual register section) ————————————————————————— */ .form-card.notify-form { background: none; border: none; padding: 0; gap: 0; margin-top: 28px; } .notify-row { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; } .notify-row input { flex: 1; min-width: 160px; max-width: 220px; width: auto; } @media (max-width: 600px) { .notify-row { flex-direction: column; align-items: stretch; } .notify-row input { max-width: none; } }