/* ============================================================================ IIABC FORUM 2026 — styles.css · v2 ---------------------------------------------------------------------------- Everything is scoped under #iiabc-forum-app so this file cannot leak into (or be overwritten by) the existing IIABC Laravel site stylesheet. CONTENTS 01 Tokens (colour, type, spacing) 02 Scoped reset 03 Layout primitives 04 Typography 05 Buttons & links 06 Hero 07 Jump bar 08 Premise (stats, figures, chips) 09 About (columns, notes, timeline, quote panel) 10 Welcome letters 11 Programme (tabs, session cards, people chips) 12 Speakers (grid, list) 13 Panels (accordion) 14 Tradeshow, awards, sponsors, members, register 15 Speaker modal 16 Persistent register bar 17 Motion, focus, print, responsive 18 Anchor offset 19 Portrait cards (v2) ========================================================================== */ /* --------------------------------------------------------------------------- 01 · TOKENS Colours come from the IIABC style guide. Two adjustments were made so text passes WCAG AA contrast — see README.md, "Accessibility notes". --------------------------------------------------------------------------- */ #iiabc-forum-app, #iiabc-forum-app .fx-modal-root { /* Brand */ --fx-navy: #262542; /* style guide #262542 */ --fx-navy-deep: #1B1A30; /* darker ground for the hero */ --fx-navy-line: #3B3960; /* hairlines on navy */ --fx-green: #3EB54F; /* style guide green — accents & rules */ --fx-teal: #00B19F; /* style guide teal — accents & rules */ --fx-teal-ink: #0A6F60; /* accessible teal for text on white */ --fx-teal-light: #6FD9C6; /* accessible teal for text on navy */ --fx-gold: #9A7A1E; /* premium-member gold label */ --fx-bronze: #8A6A45; /* Neutrals */ --fx-ink: #212121; /* style guide #212121 */ --fx-ink-soft: #55565C; --fx-ink-faint: #6B6C71; /* darkened from #7A7B80 to pass AA on white */ --fx-paper: #FFFFFF; --fx-sand: #F1F0EA; --fx-grey: #EFEFEF; /* style guide #EFEFEF */ --fx-line: #DEDDD6; /* Type */ --fx-display: "Playfair Display", "Iowan Old Style", "Times New Roman", Georgia, serif; --fx-sans: "Source Sans 3", "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* Rhythm */ --fx-wrap: 1180px; --fx-gutter: clamp(18px, 4vw, 40px); --fx-section-y: clamp(56px, 8vw, 104px); --fx-radius: 3px; /* the prospectus is square — keep it nearly so */ /* If your Laravel layout has a FIXED header, set this to its height so the in-page jump bar parks below it. Default 0 assumes a static header. */ --fx-sticky-top: 0px; } /* --------------------------------------------------------------------------- 02 · SCOPED RESET --------------------------------------------------------------------------- */ #iiabc-forum-app, #iiabc-forum-app *, #iiabc-forum-app *::before, #iiabc-forum-app *::after, #iiabc-forum-app .fx-modal-root, #iiabc-forum-app .fx-modal-root * { box-sizing: border-box; } #iiabc-forum-app { font-family: var(--fx-sans); font-size: 17px; line-height: 1.65; color: var(--fx-ink); background: var(--fx-paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } #iiabc-forum-app h1, #iiabc-forum-app h2, #iiabc-forum-app h3, #iiabc-forum-app h4, #iiabc-forum-app h5, #iiabc-forum-app p, #iiabc-forum-app ul, #iiabc-forum-app ol, #iiabc-forum-app dl, #iiabc-forum-app dd, #iiabc-forum-app figure, #iiabc-forum-app blockquote { margin: 0; } #iiabc-forum-app ul, #iiabc-forum-app ol { padding: 0; list-style: none; } #iiabc-forum-app img { max-width: 100%; height: auto; display: block; } #iiabc-forum-app button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } /* Screen-reader-only helper */ #iiabc-forum-app .fx-sr { 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 */ #iiabc-forum-app .fx-skip { position: absolute; left: -9999px; top: 0; z-index: 60; background: var(--fx-navy); color: #fff; padding: 12px 20px; font-weight: 600; } #iiabc-forum-app .fx-skip:focus { left: 0; } /* --------------------------------------------------------------------------- 03 · LAYOUT PRIMITIVES --------------------------------------------------------------------------- */ #iiabc-forum-app .fx-wrap { width: 100%; max-width: var(--fx-wrap); margin-inline: auto; padding-inline: var(--fx-gutter); } #iiabc-forum-app .fx-section { padding-block: var(--fx-section-y); } #iiabc-forum-app .fx-section--sand { background: var(--fx-sand); } #iiabc-forum-app .fx-section--navy { background: var(--fx-navy); color: #EDEDF2; } #iiabc-forum-app .fx-section--navy p { color: #C9C9D6; } #iiabc-forum-app .fx-section--register { padding-bottom: clamp(72px, 9vw, 120px); } /* --------------------------------------------------------------------------- 04 · TYPOGRAPHY The wide-tracked small-caps eyebrow is the prospectus's signature device; it is used to label every section, session type, and tier. --------------------------------------------------------------------------- */ #iiabc-forum-app .fx-eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fx-teal-ink); margin-bottom: 0.9rem; } #iiabc-forum-app .fx-eyebrow--light { color: var(--fx-teal-light); } #iiabc-forum-app .fx-eyebrow--rule { margin-top: clamp(40px, 6vw, 64px); padding-bottom: 10px; border-bottom: 1px solid var(--fx-line); } #iiabc-forum-app .fx-display { font-family: var(--fx-display); font-weight: 600; line-height: 1.08; letter-spacing: -0.01em; font-size: clamp(1.9rem, 4.2vw, 3rem); color: var(--fx-navy); max-width: 22ch; } #iiabc-forum-app .fx-display--lg { font-size: clamp(2rem, 4.8vw, 3.4rem); max-width: 26ch; } #iiabc-forum-app .fx-display--sm { font-size: clamp(1.4rem, 2.6vw, 2rem); } #iiabc-forum-app .fx-display--light { color: #FFFFFF; } #iiabc-forum-app .fx-display em { display: block; font-style: italic; color: var(--fx-teal-ink); } #iiabc-forum-app .fx-lede { font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--fx-ink-soft); max-width: 68ch; margin-top: 1.4rem; } #iiabc-forum-app .fx-lede--light { color: #C9C9D6; } #iiabc-forum-app .fx-subhead { font-family: var(--fx-display); font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 600; color: var(--fx-navy); margin-top: clamp(40px, 6vw, 64px); margin-bottom: 1.2rem; padding-bottom: 0.6rem; border-bottom: 1px solid var(--fx-line); } #iiabc-forum-app .fx-role { color: var(--fx-ink-soft); font-size: 0.95rem; } #iiabc-forum-app .fx-hint { color: var(--fx-ink-soft); font-size: 0.95rem; margin-bottom: 1.2rem; } #iiabc-forum-app .fx-footnote { margin-top: 2rem; font-size: 0.88rem; color: var(--fx-ink-faint); font-style: italic; max-width: 80ch; } #iiabc-forum-app .fx-footnote--light { color: #9A9AB0; } #iiabc-forum-app .fx-noscript { padding: 24px var(--fx-gutter); background: var(--fx-sand); } #iiabc-forum-app .fx-pullquote { margin-top: clamp(40px, 6vw, 64px); padding: clamp(24px, 4vw, 40px); background: var(--fx-sand); border-left: 4px solid var(--fx-green); font-family: var(--fx-display); font-style: italic; font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.4; color: var(--fx-navy); } /* --------------------------------------------------------------------------- 05 · BUTTONS & LINKS --------------------------------------------------------------------------- */ #iiabc-forum-app a { color: var(--fx-teal-ink); } #iiabc-forum-app .fx-section--navy a { color: var(--fx-teal-light); } #iiabc-forum-app .fx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 26px; border: 2px solid transparent; border-radius: var(--fx-radius); font-size: 0.95rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; text-align: center; transition: background-color .18s ease, color .18s ease, border-color .18s ease; } /* Style-guide button 1: green off-state, teal on-state — darkened for contrast */ #iiabc-forum-app .fx-btn--primary { background: var(--fx-teal-ink); color: #FFFFFF; } #iiabc-forum-app .fx-btn--primary:hover, #iiabc-forum-app .fx-btn--primary:focus-visible { background: var(--fx-navy); color: #FFFFFF; } #iiabc-forum-app .fx-btn--ghost { border-color: currentColor; color: var(--fx-navy); background: transparent; } #iiabc-forum-app .fx-btn--ghost:hover, #iiabc-forum-app .fx-btn--ghost:focus-visible { background: var(--fx-navy); border-color: var(--fx-navy); color: #FFFFFF; } #iiabc-forum-app .fx-btn--onnavy { color: #FFFFFF; } #iiabc-forum-app .fx-btn--onnavy:hover, #iiabc-forum-app .fx-btn--onnavy:focus-visible { background: #FFFFFF; border-color: #FFFFFF; color: var(--fx-navy); } #iiabc-forum-app .fx-btn--small { padding: 9px 18px; font-size: 0.8rem; } #iiabc-forum-app .fx-textbtn { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.04em; color: var(--fx-teal-ink); border-bottom: 2px solid var(--fx-green); } #iiabc-forum-app .fx-textbtn:hover { color: var(--fx-navy); border-bottom-color: var(--fx-navy); } #iiabc-forum-app .fx-textbtn[aria-expanded="true"]::after { content: "—"; } #iiabc-forum-app .fx-textbtn[aria-expanded="false"]::after { content: "+"; } /* --------------------------------------------------------------------------- 06 · HERO The 1979 charter photograph against navy: forty-seven years of standing behind the question, next to the question itself. --------------------------------------------------------------------------- */ #iiabc-forum-app .fx-hero { background: var(--fx-navy-deep); color: #FFFFFF; padding-block: clamp(48px, 8vw, 96px); border-bottom: 4px solid var(--fx-green); } #iiabc-forum-app .fx-hero__inner { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 5vw, 64px); align-items: center; } #iiabc-forum-app .fx-hero__title { font-family: var(--fx-display); font-weight: 600; font-size: clamp(2.4rem, 6vw, 4.4rem); line-height: 1.02; letter-spacing: -0.015em; color: #FFFFFF; } #iiabc-forum-app .fx-hero__lede { font-family: var(--fx-display); font-style: italic; font-size: clamp(1.1rem, 1.9vw, 1.4rem); line-height: 1.45; color: #C9C9D6; margin-top: 1.4rem; max-width: 40ch; } #iiabc-forum-app .fx-hero__facts { display: flex; flex-wrap: wrap; gap: clamp(20px, 4vw, 48px); margin-top: clamp(28px, 4vw, 40px); padding-top: 24px; border-top: 1px solid var(--fx-navy-line); } #iiabc-forum-app .fx-hero__facts dt { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fx-teal-light); margin-bottom: 4px; } #iiabc-forum-app .fx-hero__facts dd { font-weight: 600; color: #FFFFFF; } #iiabc-forum-app .fx-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: clamp(28px, 4vw, 40px); } #iiabc-forum-app .fx-hero__figure { border: 1px solid var(--fx-navy-line); padding: 12px; background: #22213A; } #iiabc-forum-app .fx-hero__figure img { width: 100%; } #iiabc-forum-app .fx-hero__figure figcaption { margin-top: 12px; font-size: 0.82rem; line-height: 1.5; color: #9A9AB0; } /* Hero buttons need to read on the dark ground */ #iiabc-forum-app .fx-hero .fx-btn--ghost { color: #FFFFFF; } #iiabc-forum-app .fx-hero .fx-btn--ghost:hover, #iiabc-forum-app .fx-hero .fx-btn--ghost:focus-visible { background: #FFFFFF; border-color: #FFFFFF; color: var(--fx-navy); } /* --------------------------------------------------------------------------- 07 · JUMP BAR (anchors within this page only — not site navigation) --------------------------------------------------------------------------- */ #iiabc-forum-app .fx-jump { position: sticky; top: var(--fx-sticky-top); z-index: 30; background: rgba(255,255,255,0.96); backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid var(--fx-line); } #iiabc-forum-app .fx-jump__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 58px; } #iiabc-forum-app .fx-jump__list { display: flex; gap: clamp(14px, 2.4vw, 30px); overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } #iiabc-forum-app .fx-jump__list::-webkit-scrollbar { display: none; } #iiabc-forum-app .fx-jump__list a { display: block; padding: 18px 0; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; white-space: nowrap; color: var(--fx-navy); border-bottom: 3px solid transparent; } #iiabc-forum-app .fx-jump__list a:hover, #iiabc-forum-app .fx-jump__list a.is-current { border-bottom-color: var(--fx-green); color: var(--fx-teal-ink); } #iiabc-forum-app .fx-jump__cta { flex: none; } /* --------------------------------------------------------------------------- 08 · PREMISE — stats, figures, topic chips --------------------------------------------------------------------------- */ #iiabc-forum-app .fx-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 3vw, 36px); margin-top: clamp(36px, 5vw, 56px); } #iiabc-forum-app .fx-stats li { border-top: 2px solid var(--fx-navy); padding-top: 14px; } #iiabc-forum-app .fx-stats b { display: block; font-family: var(--fx-display); font-size: clamp(2rem, 3.6vw, 2.8rem); font-weight: 500; line-height: 1; color: var(--fx-navy); margin-bottom: 8px; } #iiabc-forum-app .fx-stats span { font-size: 0.92rem; color: var(--fx-ink-soft); } #iiabc-forum-app .fx-figures { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 28px); margin-top: 24px; } #iiabc-forum-app .fx-figures li { background: var(--fx-sand); padding: clamp(20px, 3vw, 30px); } #iiabc-forum-app .fx-figures b { display: block; font-family: var(--fx-display); font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 500; line-height: 1; color: var(--fx-teal-ink); margin-bottom: 10px; } #iiabc-forum-app .fx-figures p { font-size: 0.98rem; color: var(--fx-ink); } #iiabc-forum-app .fx-figures cite { display: block; margin-top: 12px; font-style: normal; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fx-ink-faint); } #iiabc-forum-app .fx-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; } #iiabc-forum-app .fx-chips li { padding: 10px 18px; border: 1px solid var(--fx-line); font-size: 0.92rem; color: var(--fx-ink-soft); } #iiabc-forum-app .fx-chips li:first-child { background: var(--fx-navy); border-color: var(--fx-navy); color: #FFFFFF; font-weight: 700; } /* --------------------------------------------------------------------------- 09 · ABOUT — columns, notes, timeline, quote panel --------------------------------------------------------------------------- */ #iiabc-forum-app .fx-cols { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(28px, 5vw, 56px); margin-top: clamp(28px, 4vw, 40px); } #iiabc-forum-app .fx-cols__main p + p { margin-top: 1.1rem; } #iiabc-forum-app .fx-cols__side { display: grid; gap: 20px; align-content: start; } #iiabc-forum-app .fx-note { border-left: 3px solid var(--fx-green); padding-left: 18px; } #iiabc-forum-app .fx-note h3 { font-size: 1rem; font-weight: 700; color: var(--fx-navy); margin-bottom: 4px; } #iiabc-forum-app .fx-note p { font-size: 0.94rem; color: var(--fx-ink-soft); } #iiabc-forum-app .fx-note--light { border-left-color: var(--fx-teal); } #iiabc-forum-app .fx-note--light h3 { color: #FFFFFF; } #iiabc-forum-app .fx-timeline { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; margin-top: clamp(40px, 6vw, 64px); border-block: 1px solid var(--fx-line); } #iiabc-forum-app .fx-timeline li { padding: 26px 18px; text-align: center; border-left: 1px solid var(--fx-line); } #iiabc-forum-app .fx-timeline li:first-child { border-left: 0; } #iiabc-forum-app .fx-timeline b { display: block; font-family: var(--fx-display); font-size: clamp(1.3rem, 2.2vw, 1.8rem); font-weight: 500; color: var(--fx-teal-ink); margin-bottom: 6px; } #iiabc-forum-app .fx-timeline span { font-size: 0.86rem; color: var(--fx-ink-soft); } #iiabc-forum-app .fx-quote-panel { margin-top: clamp(40px, 6vw, 64px); background: var(--fx-navy); color: #C9C9D6; padding: clamp(28px, 5vw, 52px); display: grid; grid-template-columns: 1fr 2fr; gap: clamp(20px, 4vw, 48px); align-items: center; } #iiabc-forum-app .fx-quote-panel h3 { color: var(--fx-teal-light); font-style: italic; } /* --------------------------------------------------------------------------- 10 · WELCOME LETTERS --------------------------------------------------------------------------- */ #iiabc-forum-app .fx-letters { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 56px); margin-top: clamp(28px, 4vw, 44px); } #iiabc-forum-app .fx-letter p + p { margin-top: 1rem; } #iiabc-forum-app .fx-letter__head { display: flex; gap: 18px; align-items: center; margin-bottom: 20px; } #iiabc-forum-app .fx-letter__photo { width: 92px; height: 92px; object-fit: cover; flex: none; border: 1px solid var(--fx-line); background: var(--fx-grey); } #iiabc-forum-app .fx-letter__head h3 { font-family: var(--fx-display); font-size: 1.45rem; font-weight: 600; color: var(--fx-navy); } #iiabc-forum-app .fx-letter .fx-textbtn { margin-top: 1rem; } #iiabc-forum-app .fx-letter__more p:first-child { margin-top: 1rem; } #iiabc-forum-app .fx-signature { margin-top: 1.6rem; padding-top: 1rem; border-top: 1px solid var(--fx-line); font-family: var(--fx-display); font-style: italic; font-size: 1.2rem; color: var(--fx-navy); } #iiabc-forum-app .fx-signature span { display: block; font-family: var(--fx-sans); font-style: normal; font-size: 0.85rem; color: var(--fx-ink-soft); margin-top: 4px; } /* --------------------------------------------------------------------------- 11 · PROGRAMME — day tabs and session cards --------------------------------------------------------------------------- */ #iiabc-forum-app .fx-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: clamp(32px, 5vw, 48px); background: var(--fx-navy-line); border: 1px solid var(--fx-navy-line); } #iiabc-forum-app .fx-tab { display: block; width: 100%; text-align: left; padding: 20px clamp(14px, 2vw, 24px); background: var(--fx-navy-deep); color: #C9C9D6; transition: background-color .18s ease, color .18s ease; } #iiabc-forum-app .fx-tab:hover { background: #26254A; color: #FFFFFF; } #iiabc-forum-app .fx-tab[aria-selected="true"] { background: #FFFFFF; color: var(--fx-navy); } #iiabc-forum-app .fx-tab__day { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fx-teal-light); margin-bottom: 6px; } #iiabc-forum-app .fx-tab[aria-selected="true"] .fx-tab__day { color: var(--fx-teal-ink); } #iiabc-forum-app .fx-tab__title { font-family: var(--fx-display); font-size: clamp(1.05rem, 1.8vw, 1.35rem); font-weight: 600; line-height: 1.2; } #iiabc-forum-app .fx-daypanel { padding-top: clamp(28px, 4vw, 40px); } #iiabc-forum-app .fx-daypanel[hidden] { display: none; } #iiabc-forum-app .fx-daypanel__head { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: baseline; padding-bottom: 18px; border-bottom: 1px solid var(--fx-navy-line); } #iiabc-forum-app .fx-daypanel__head h3 { font-family: var(--fx-display); font-size: clamp(1.4rem, 2.6vw, 2rem); font-weight: 600; color: #FFFFFF; } #iiabc-forum-app .fx-daypanel__head p { font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fx-teal-light); } /* --- Session row ------------------------------------------------------- */ #iiabc-forum-app .fx-session { display: grid; grid-template-columns: 132px 1fr; gap: clamp(14px, 2.5vw, 28px); padding: 26px 0; border-bottom: 1px solid var(--fx-navy-line); } #iiabc-forum-app .fx-session__time { padding-top: 2px; } #iiabc-forum-app .fx-session__clock { display: block; font-family: var(--fx-display); font-size: 1.35rem; font-weight: 600; color: #FFFFFF; line-height: 1.1; } #iiabc-forum-app .fx-session__len { display: block; margin-top: 6px; font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: #9C9CB2; } #iiabc-forum-app .fx-session__kind { display: inline-block; margin-bottom: 10px; padding-top: 8px; border-top: 3px solid var(--fx-green); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fx-teal-light); } #iiabc-forum-app .fx-session__title { font-family: var(--fx-display); font-size: clamp(1.15rem, 2vw, 1.5rem); font-weight: 600; line-height: 1.25; color: #FFFFFF; } #iiabc-forum-app .fx-session__sub { font-style: italic; color: #A9A9BE; margin-top: 4px; } #iiabc-forum-app .fx-session__desc { margin-top: 10px; color: #C9C9D6; max-width: 74ch; } #iiabc-forum-app .fx-session__meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: #9C9CB2; } #iiabc-forum-app .fx-session__meta span { display: inline-flex; align-items: center; gap: 6px; } #iiabc-forum-app .fx-session__sponsor { color: var(--fx-teal-light); } #iiabc-forum-app .fx-session__link { margin-top: 12px; } #iiabc-forum-app .fx-session__link .fx-textbtn { color: var(--fx-teal-light); border-bottom-color: var(--fx-teal); } #iiabc-forum-app .fx-session__link .fx-textbtn:hover { color: #FFFFFF; border-bottom-color: #FFFFFF; } /* Tentative / status flag */ #iiabc-forum-app .fx-flag { display: inline-block; margin-left: 10px; padding: 3px 10px; vertical-align: middle; border: 1px solid currentColor; font-family: var(--fx-sans); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; } #iiabc-forum-app .fx-flag--tentative { color: #D8B65A; } #iiabc-forum-app .fx-flag--confirmed { color: var(--fx-teal-light); } /* Breaks, meals, resets — quieter rows */ #iiabc-forum-app .fx-session--break { padding: 14px 0; } #iiabc-forum-app .fx-session--break .fx-session__clock { font-size: 1rem; font-weight: 400; color: #9C9CB2; font-family: var(--fx-sans); } #iiabc-forum-app .fx-session--break .fx-session__title { font-family: var(--fx-sans); font-size: 0.98rem; font-weight: 400; font-style: italic; color: #A9A9BE; } /* People chips inside a session */ #iiabc-forum-app .fx-people { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } #iiabc-forum-app .fx-person { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 7px; border: 1px solid var(--fx-navy-line); border-radius: 999px; background: rgba(255,255,255,0.03); text-align: left; transition: border-color .18s ease, background-color .18s ease; } #iiabc-forum-app .fx-person:hover { border-color: var(--fx-teal); background: rgba(0,177,159,0.10); } #iiabc-forum-app .fx-person__name { display: block; font-size: 0.88rem; font-weight: 600; color: #FFFFFF; line-height: 1.2; } #iiabc-forum-app .fx-person__role { display: block; font-size: 0.72rem; color: #9A9AB0; } #iiabc-forum-app .fx-person--lead .fx-person__name { color: var(--fx-teal-light); } /* Avatar: initials block with the photo layered over it when it loads, so a missing headshot never shows a broken image. */ #iiabc-forum-app .fx-avatar { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--fx-navy-line); color: #FFFFFF; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; overflow: hidden; } #iiabc-forum-app .fx-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s ease; } #iiabc-forum-app .fx-avatar img.is-loaded { opacity: 1; } #iiabc-forum-app .fx-avatar--lg { width: 88px; height: 88px; font-size: 1.1rem; } #iiabc-forum-app .fx-avatar--xl { width: 132px; height: 132px; font-size: 1.6rem; } #iiabc-forum-app .fx-avatar--light { background: var(--fx-grey); color: var(--fx-navy); } #iiabc-forum-app .fx-programme-foot { margin-top: clamp(28px, 4vw, 40px); padding-top: 20px; border-top: 1px solid var(--fx-navy-line); font-size: 0.9rem; } #iiabc-forum-app .fx-session__note { margin-top: 12px; font-size: 0.88rem; font-style: italic; color: #9C9CB2; } /* --------------------------------------------------------------------------- 12 · SPEAKERS --------------------------------------------------------------------------- */ #iiabc-forum-app .fx-speaker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: clamp(18px, 2.6vw, 30px); } #iiabc-forum-app .fx-speaker-card { width: 100%; text-align: left; padding: 22px; border: 1px solid var(--fx-line); background: #FFFFFF; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; } #iiabc-forum-app .fx-speaker-card:hover { border-color: var(--fx-teal); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(38,37,66,0.10); } #iiabc-forum-app .fx-speaker-card .fx-avatar { margin-bottom: 16px; } #iiabc-forum-app .fx-speaker-card h4 { font-family: var(--fx-display); font-size: 1.2rem; font-weight: 600; color: var(--fx-navy); } #iiabc-forum-app .fx-speaker-card .fx-speaker-role { font-size: 0.88rem; color: var(--fx-ink-soft); margin-top: 4px; } #iiabc-forum-app .fx-speaker-card .fx-speaker-org { font-size: 0.88rem; color: var(--fx-teal-ink); font-weight: 600; margin-top: 2px; } #iiabc-forum-app .fx-speaker-card .fx-speaker-slot { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--fx-line); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fx-ink-faint); } #iiabc-forum-app .fx-speaker-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 2px; background: var(--fx-line); border: 1px solid var(--fx-line); } #iiabc-forum-app .fx-speaker-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 12px 16px; background: #FFFFFF; transition: background-color .16s ease; } #iiabc-forum-app .fx-speaker-row:hover { background: var(--fx-sand); } #iiabc-forum-app .fx-speaker-row b { display: block; font-size: 0.95rem; font-weight: 600; color: var(--fx-navy); } #iiabc-forum-app .fx-speaker-row span { display: block; font-size: 0.8rem; color: var(--fx-ink-soft); } /* --------------------------------------------------------------------------- 13 · PANELS (accordion) --------------------------------------------------------------------------- */ #iiabc-forum-app .fx-panel-tools { margin-top: 24px; } #iiabc-forum-app .fx-panels { margin-top: 18px; border-top: 1px solid var(--fx-line); } #iiabc-forum-app .fx-panel { border-bottom: 1px solid var(--fx-line); } #iiabc-forum-app .fx-panel__btn { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: clamp(14px, 2.4vw, 28px); width: 100%; text-align: left; padding: 26px 0; } #iiabc-forum-app .fx-panel__num { font-family: var(--fx-display); font-size: 1.4rem; font-style: italic; color: var(--fx-teal-ink); min-width: 2.6ch; } #iiabc-forum-app .fx-panel__q { display: block; font-family: var(--fx-display); font-size: clamp(1.2rem, 2.2vw, 1.7rem); font-weight: 600; line-height: 1.2; color: var(--fx-navy); } #iiabc-forum-app .fx-panel__when { display: block; margin-top: 8px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fx-ink-faint); } #iiabc-forum-app .fx-panel__sub { display: block; font-style: italic; color: var(--fx-ink-soft); margin-top: 6px; } #iiabc-forum-app .fx-panel__sign { position: relative; width: 24px; height: 24px; margin-top: 6px; flex: none; } #iiabc-forum-app .fx-panel__sign::before, #iiabc-forum-app .fx-panel__sign::after { content: ""; position: absolute; background: var(--fx-navy); transition: transform .22s ease, opacity .22s ease; } #iiabc-forum-app .fx-panel__sign::before { top: 11px; left: 0; width: 24px; height: 2px; } #iiabc-forum-app .fx-panel__sign::after { left: 11px; top: 0; width: 2px; height: 24px; } #iiabc-forum-app .fx-panel__btn[aria-expanded="true"] .fx-panel__sign::after { transform: scaleY(0); opacity: 0; } #iiabc-forum-app .fx-panel__btn:hover .fx-panel__q { color: var(--fx-teal-ink); } #iiabc-forum-app .fx-panel__body { padding: 0 0 34px; } #iiabc-forum-app .fx-panel__body[hidden] { display: none; } #iiabc-forum-app .fx-panel__grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(24px, 4vw, 48px); padding-left: calc(2.6ch + clamp(14px, 2.4vw, 28px)); } #iiabc-forum-app .fx-panel__outcomes { margin-top: 22px; } #iiabc-forum-app .fx-panel__outcomes h4, #iiabc-forum-app .fx-panel__people h4 { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fx-teal-ink); margin-bottom: 12px; } #iiabc-forum-app .fx-panel__outcomes li { position: relative; padding-left: 22px; margin-bottom: 8px; color: var(--fx-ink-soft); } #iiabc-forum-app .fx-panel__outcomes li::before { content: ""; position: absolute; left: 0; top: 11px; width: 12px; height: 2px; background: var(--fx-green); } #iiabc-forum-app .fx-panel__people + .fx-panel__people { margin-top: 22px; } #iiabc-forum-app .fx-panel__people .fx-people { margin-top: 0; } /* On light ground the person chips invert */ #iiabc-forum-app .fx-panel__people .fx-person { border-color: var(--fx-line); background: #FFFFFF; } #iiabc-forum-app .fx-panel__people .fx-person:hover { border-color: var(--fx-teal); background: var(--fx-sand); } #iiabc-forum-app .fx-panel__people .fx-person__name { color: var(--fx-navy); } #iiabc-forum-app .fx-panel__people .fx-person__role { color: var(--fx-ink-soft); } #iiabc-forum-app .fx-panel__people .fx-person--lead .fx-person__name { color: var(--fx-teal-ink); } #iiabc-forum-app .fx-panel__people .fx-avatar { background: var(--fx-grey); color: var(--fx-navy); } #iiabc-forum-app .fx-panel__note { margin-top: 16px; font-size: 0.88rem; font-style: italic; color: var(--fx-ink-faint); } #iiabc-forum-app .fx-panel__sponsor { margin-top: 22px; padding: 16px 18px; background: #FFFFFF; border: 1px solid var(--fx-line); display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; } #iiabc-forum-app .fx-panel__sponsor p { font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fx-ink-faint); } #iiabc-forum-app .fx-panel__sponsor strong { font-size: 0.95rem; color: var(--fx-navy); } /* --------------------------------------------------------------------------- 14 · TRADESHOW / AWARDS / SPONSORS / MEMBERS / REGISTER --------------------------------------------------------------------------- */ #iiabc-forum-app .fx-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(22px, 3.4vw, 40px); margin-top: clamp(32px, 5vw, 48px); } #iiabc-forum-app .fx-feature-grid h3 { font-family: var(--fx-display); font-size: 1.2rem; font-weight: 600; color: var(--fx-navy); margin-bottom: 8px; } #iiabc-forum-app .fx-feature-grid p { font-size: 0.95rem; color: var(--fx-ink-soft); } #iiabc-forum-app .fx-runsheet { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin-top: clamp(32px, 5vw, 48px); border-block: 1px solid var(--fx-navy-line); } #iiabc-forum-app .fx-runsheet li { padding: 24px 16px; text-align: center; border-left: 1px solid var(--fx-navy-line); } #iiabc-forum-app .fx-runsheet li:first-child { border-left: 0; } #iiabc-forum-app .fx-runsheet b { display: block; font-family: var(--fx-display); font-size: 1.5rem; font-weight: 500; color: #FFFFFF; } #iiabc-forum-app .fx-runsheet span { font-size: 0.85rem; color: #9A9AB0; } #iiabc-forum-app .fx-award-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: clamp(28px, 4vw, 40px); } #iiabc-forum-app .fx-award-grid li { padding: 22px; background: rgba(255,255,255,0.05); border-left: 3px solid var(--fx-green); } #iiabc-forum-app .fx-award-grid h3 { font-family: var(--fx-display); font-size: 1.15rem; font-weight: 600; color: #FFFFFF; margin-bottom: 6px; } #iiabc-forum-app .fx-award-grid p { font-size: 0.92rem; } /* Sponsor tiers */ #iiabc-forum-app .fx-tier { margin-top: clamp(32px, 5vw, 48px); } #iiabc-forum-app .fx-tier__label { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fx-ink-faint); padding-bottom: 10px; border-bottom: 1px solid var(--fx-line); margin-bottom: 20px; } #iiabc-forum-app .fx-tier--presenting .fx-tier__label { color: var(--fx-teal-ink); } #iiabc-forum-app .fx-tier--gold .fx-tier__label { color: var(--fx-gold); } #iiabc-forum-app .fx-tier--bronze .fx-tier__label { color: var(--fx-bronze); } #iiabc-forum-app .fx-logo-row { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } #iiabc-forum-app .fx-logo-card { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 18px; border: 1px solid var(--fx-line); background: #FFFFFF; padding: 18px; } #iiabc-forum-app .fx-logo-card--hero { grid-template-columns: 240px 1fr; border: 2px solid var(--fx-teal); padding: clamp(20px, 3vw, 32px); } #iiabc-forum-app .fx-logo-slot { display: grid; place-items: center; min-height: 92px; padding: 12px; border: 1px dashed var(--fx-line); background: var(--fx-sand); text-align: center; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fx-ink-faint); } #iiabc-forum-app .fx-logo-slot img { max-height: 76px; width: auto; object-fit: contain; } #iiabc-forum-app .fx-logo-card h3 { font-family: var(--fx-display); font-size: 1.2rem; font-weight: 600; color: var(--fx-navy); } #iiabc-forum-app .fx-logo-card--hero h3 { font-size: clamp(1.4rem, 2.6vw, 2rem); } #iiabc-forum-app .fx-logo-card p { font-size: 0.9rem; color: var(--fx-ink-soft); margin-top: 6px; } #iiabc-forum-app .fx-logo-card .fx-tba { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fx-ink-faint); } #iiabc-forum-app .fx-oppo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 24px; margin-top: 24px; } #iiabc-forum-app .fx-oppo-grid b { display: block; font-size: 0.98rem; color: var(--fx-navy); } #iiabc-forum-app .fx-oppo-grid span { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fx-ink-faint); } #iiabc-forum-app .fx-join-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: clamp(32px, 5vw, 48px); } #iiabc-forum-app .fx-join-grid li { padding: 24px; border: 1px solid var(--fx-navy-line); } #iiabc-forum-app .fx-join-grid h3 { font-family: var(--fx-display); font-size: 1.25rem; font-weight: 600; color: #FFFFFF; margin-bottom: 8px; } #iiabc-forum-app .fx-join-grid p { font-size: 0.94rem; } #iiabc-forum-app .fx-pricing { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: clamp(32px, 5vw, 44px); } #iiabc-forum-app .fx-pricing li { padding: 16px 18px; border: 1px solid var(--fx-navy-line); } #iiabc-forum-app .fx-pricing b { display: block; color: #FFFFFF; font-size: 0.98rem; } #iiabc-forum-app .fx-pricing span { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: #9C9CB2; } #iiabc-forum-app .fx-contact { display: flex; flex-wrap: wrap; gap: 28px; justify-content: space-between; margin-top: clamp(36px, 5vw, 56px); padding-top: 28px; border-top: 1px solid var(--fx-navy-line); } #iiabc-forum-app .fx-contact strong { color: #FFFFFF; } #iiabc-forum-app .fx-contact__social { text-align: right; } #iiabc-forum-app .fx-hash { font-weight: 700; color: var(--fx-teal-light); letter-spacing: 0.06em; } #iiabc-forum-app .fx-respect { background: var(--fx-sand); padding-block: clamp(32px, 5vw, 48px); } #iiabc-forum-app .fx-respect p:not(.fx-eyebrow) { font-family: var(--fx-display); font-style: italic; font-size: clamp(1rem, 1.6vw, 1.15rem); line-height: 1.6; color: var(--fx-navy); max-width: 90ch; border-left: 3px solid var(--fx-green); padding-left: 20px; } /* --------------------------------------------------------------------------- 15 · SPEAKER MODAL Rendered into a #iiabc-forum-app .fx-modal-root appended to so it is never trapped inside a transformed or overflow-hidden Laravel container. --------------------------------------------------------------------------- */ #iiabc-forum-app .fx-modal-root { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: center; padding: clamp(12px, 4vw, 40px); font-family: var(--fx-sans); box-sizing: border-box; } #iiabc-forum-app .fx-modal-root[hidden] { display: none; } #iiabc-forum-app .fx-modal-root .fx-modal__scrim { position: absolute; inset: 0; background: rgba(20,19,38,0.72); animation: fx-fade .2s ease both; } #iiabc-forum-app .fx-modal-root .fx-modal { position: relative; width: min(720px, 100%); max-height: min(86vh, 900px); overflow-y: auto; background: #FFFFFF; border-top: 5px solid var(--fx-green); padding: clamp(24px, 4vw, 44px); animation: fx-rise .24s ease both; color: var(--fx-ink); line-height: 1.65; } #iiabc-forum-app .fx-modal-root .fx-modal__close { position: absolute; top: 12px; right: 12px; width: 44px; height: 44px; display: grid; place-items: center; font-size: 1.5rem; line-height: 1; color: var(--fx-ink-soft); border: 1px solid transparent; cursor: pointer; background: none; } #iiabc-forum-app .fx-modal-root .fx-modal__close:hover { color: var(--fx-navy); border-color: var(--fx-line); } #iiabc-forum-app .fx-modal-root .fx-modal__head { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; } #iiabc-forum-app .fx-modal-root .fx-modal h3 { font-family: var(--fx-display); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600; color: var(--fx-navy); line-height: 1.15; margin: 0; } #iiabc-forum-app .fx-modal-root .fx-modal__cred { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fx-ink-faint); margin-top: 6px; } #iiabc-forum-app .fx-modal-root .fx-modal__role { margin-top: 8px; color: var(--fx-ink-soft); } #iiabc-forum-app .fx-modal-root .fx-modal__org { font-weight: 600; color: var(--fx-teal-ink); } #iiabc-forum-app .fx-modal-root .fx-modal__bio { margin-top: 22px; } #iiabc-forum-app .fx-modal-root .fx-modal__bio p + p { margin-top: 1rem; } #iiabc-forum-app .fx-modal-root .fx-modal__sessions { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--fx-line); } #iiabc-forum-app .fx-modal-root .fx-modal__sessions h4 { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fx-teal-ink); margin-bottom: 12px; } #iiabc-forum-app .fx-modal-root .fx-modal__sessions li { padding: 10px 0; border-bottom: 1px solid var(--fx-line); } #iiabc-forum-app .fx-modal-root .fx-modal__sessions li:last-child { border-bottom: 0; } #iiabc-forum-app .fx-modal-root .fx-modal__sessions b { display: block; color: var(--fx-navy); font-weight: 600; } #iiabc-forum-app .fx-modal-root .fx-modal__sessions span { font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fx-ink-faint); } #iiabc-forum-app .fx-modal-root .fx-modal__pending { margin-top: 22px; padding: 14px 16px; background: var(--fx-sand); font-size: 0.92rem; color: var(--fx-ink-soft); } @keyframes fx-fade { from { opacity: 0 } to { opacity: 1 } } @keyframes fx-rise { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } } /* Background scroll is locked from JavaScript while the modal is open, because a `body` selector could not be scoped to #iiabc-forum-app. */ /* --------------------------------------------------------------------------- 16 · PERSISTENT REGISTER BAR --------------------------------------------------------------------------- */ #iiabc-forum-app .fx-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--fx-navy); border-top: 3px solid var(--fx-green); transform: translateY(100%); transition: transform .28s ease; } #iiabc-forum-app .fx-sticky.is-visible { transform: none; } #iiabc-forum-app .fx-sticky__inner { max-width: var(--fx-wrap); margin-inline: auto; padding: 12px var(--fx-gutter); display: flex; align-items: center; justify-content: space-between; gap: 16px; } #iiabc-forum-app .fx-sticky__text strong { display: block; color: #FFFFFF; font-size: 0.95rem; } #iiabc-forum-app .fx-sticky__text span { display: block; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: #9A9AB0; } #iiabc-forum-app .fx-sticky__actions { display: flex; gap: 10px; flex: none; } /* --------------------------------------------------------------------------- 17 · MOTION, FOCUS, PRINT, RESPONSIVE --------------------------------------------------------------------------- */ /* Scroll reveal — added by script.js, removed if reduced motion is requested */ #iiabc-forum-app .fx-reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; } #iiabc-forum-app .fx-reveal.is-in { opacity: 1; transform: none; } /* Visible keyboard focus everywhere, including on navy */ #iiabc-forum-app :focus-visible, #iiabc-forum-app .fx-modal-root :focus-visible { outline: 3px solid var(--fx-teal); outline-offset: 3px; border-radius: 2px; } #iiabc-forum-app .fx-section--navy :focus-visible, #iiabc-forum-app .fx-hero :focus-visible { outline-color: #7BE3D2; } @media (prefers-reduced-motion: reduce) { #iiabc-forum-app *, #iiabc-forum-app .fx-modal-root * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } #iiabc-forum-app .fx-reveal { opacity: 1; transform: none; } } @media (prefers-contrast: more) { #iiabc-forum-app { --fx-ink-soft: #3A3B40; --fx-ink-faint: #4A4B50; } } /* ---- Tablet ------------------------------------------------------------- */ @media (max-width: 1024px) { #iiabc-forum-app .fx-hero__inner { grid-template-columns: 1fr; } #iiabc-forum-app .fx-hero__figure { order: -1; } #iiabc-forum-app .fx-stats { grid-template-columns: repeat(2, 1fr); } #iiabc-forum-app .fx-figures { grid-template-columns: 1fr; } #iiabc-forum-app .fx-cols, #iiabc-forum-app .fx-letters, #iiabc-forum-app .fx-quote-panel { grid-template-columns: 1fr; } #iiabc-forum-app .fx-feature-grid { grid-template-columns: repeat(2, 1fr); } #iiabc-forum-app .fx-award-grid { grid-template-columns: repeat(2, 1fr); } #iiabc-forum-app .fx-join-grid { grid-template-columns: repeat(2, 1fr); } #iiabc-forum-app .fx-pricing { grid-template-columns: repeat(2, 1fr); } #iiabc-forum-app .fx-oppo-grid { grid-template-columns: repeat(2, 1fr); } #iiabc-forum-app .fx-panel__grid { grid-template-columns: 1fr; padding-left: 0; } #iiabc-forum-app .fx-timeline, #iiabc-forum-app .fx-runsheet { grid-auto-flow: row; grid-auto-columns: auto; } #iiabc-forum-app .fx-timeline li, #iiabc-forum-app .fx-runsheet li { border-left: 0; border-top: 1px solid var(--fx-line); text-align: left; padding: 16px 0; } #iiabc-forum-app .fx-runsheet li { border-top-color: var(--fx-navy-line); } #iiabc-forum-app .fx-timeline li:first-child, #iiabc-forum-app .fx-runsheet li:first-child { border-top: 0; } #iiabc-forum-app .fx-logo-card--hero { grid-template-columns: 180px 1fr; } } /* ---- Phone -------------------------------------------------------------- */ @media (max-width: 720px) { #iiabc-forum-app { font-size: 16.5px; } #iiabc-forum-app .fx-tabs { grid-template-columns: 1fr; } #iiabc-forum-app .fx-session { grid-template-columns: 1fr; gap: 8px; } #iiabc-forum-app .fx-session__time { display: flex; align-items: baseline; gap: 12px; } #iiabc-forum-app .fx-session__len { margin-top: 0; } #iiabc-forum-app .fx-session--break { padding: 12px 0; } #iiabc-forum-app .fx-feature-grid, #iiabc-forum-app .fx-award-grid, #iiabc-forum-app .fx-join-grid, #iiabc-forum-app .fx-pricing, #iiabc-forum-app .fx-oppo-grid { grid-template-columns: 1fr; } #iiabc-forum-app .fx-logo-card, #iiabc-forum-app .fx-logo-card--hero { grid-template-columns: 1fr; } #iiabc-forum-app .fx-contact__social { text-align: left; } #iiabc-forum-app .fx-jump__cta { display: none; } /* the sticky bar covers this on phones */ #iiabc-forum-app .fx-hero__actions .fx-btn { flex: 1 1 100%; } #iiabc-forum-app .fx-sticky__text span { display: none; } #iiabc-forum-app .fx-panel__btn { grid-template-columns: 1fr auto; } #iiabc-forum-app .fx-panel__num { grid-column: 1 / -1; margin-bottom: -8px; } #iiabc-forum-app .fx-speaker-list { grid-template-columns: 1fr; } } @media (max-width: 420px) { #iiabc-forum-app .fx-stats { grid-template-columns: 1fr; } #iiabc-forum-app .fx-sticky__actions { flex: 1; } #iiabc-forum-app .fx-sticky__actions .fx-btn { flex: 1; } } /* ---- Print: a clean programme handout ----------------------------------- */ @media print { #iiabc-forum-app .fx-jump, #iiabc-forum-app .fx-sticky, #iiabc-forum-app .fx-hero__actions { display: none !important; } #iiabc-forum-app .fx-section--navy, #iiabc-forum-app .fx-hero { background: #FFFFFF !important; color: #000 !important; } #iiabc-forum-app .fx-section--navy *, #iiabc-forum-app .fx-hero * { color: #000 !important; } #iiabc-forum-app .fx-daypanel[hidden] { display: block !important; } /* print all three days */ #iiabc-forum-app .fx-panel__body[hidden] { display: block !important; } #iiabc-forum-app .fx-session { break-inside: avoid; } } /* --------------------------------------------------------------------------- 18 · ANCHOR OFFSET Keeps section headings clear of the sticky jump bar when a link is followed. If your Laravel layout has a fixed header, raise --fx-sticky-top in §01. --------------------------------------------------------------------------- */ #iiabc-forum-app [id] { scroll-margin-top: calc(var(--fx-sticky-top) + 76px); } #iiabc-forum-app .fx-hero { scroll-margin-top: 0; } /* In-page smooth scrolling is handled in JavaScript (scrollIntoView), which keeps every selector in this file scoped to #iiabc-forum-app. */ /* Tier blocks stack with even air whichever renderer runs first */ #iiabc-forum-app .fx-tier:first-child { margin-top: clamp(28px, 4vw, 40px); } /* --------------------------------------------------------------------------- 19 · PORTRAIT CARDS (v2) Supplied headshots range from 148×148 to 2048×2048 and from 0.66 to 2.5 in aspect ratio. Every one is displayed in an identical frame: the image fills the frame with object-fit: cover, and each speaker's own imagePosition value keeps their face in shot. A missing file leaves the initials layer visible, so a broken image can never appear. --------------------------------------------------------------------------- */ #iiabc-forum-app .fx-portrait { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: linear-gradient(150deg, #33325A 0%, var(--fx-navy) 100%); } @supports not (aspect-ratio: 4 / 5) { /* older Safari / Edge */ #iiabc-forum-app .fx-portrait { height: 0; padding-bottom: 125%; } } #iiabc-forum-app .fx-portrait__initials { font-family: var(--fx-display); font-size: clamp(1.7rem, 3.4vw, 2.4rem); font-weight: 600; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.82); } #iiabc-forum-app .fx-portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; /* per-speaker value is set inline */ opacity: 0; transition: opacity .35s ease, transform .5s ease; } #iiabc-forum-app .fx-portrait img.is-loaded { opacity: 1; } /* Speaker gallery card: portrait on top, details beneath */ #iiabc-forum-app .fx-speaker-card { padding: 0; overflow: hidden; } #iiabc-forum-app .fx-speaker-card__body { padding: 18px 20px 22px; } #iiabc-forum-app .fx-speaker-card:hover .fx-portrait img { transform: scale(1.03); } #iiabc-forum-app .fx-speaker-card .fx-speaker-slot { margin-top: 12px; padding-top: 10px; } /* Circular thumbnails (session chips, speaker index) share the focal point */ #iiabc-forum-app .fx-avatar img { object-position: 50% 30%; } /* Modal portrait */ #iiabc-forum-app .fx-modal__portrait { width: 190px; flex: none; } #iiabc-forum-app .fx-modal__portrait .fx-portrait { border: 1px solid var(--fx-line); } /* Welcome-letter portraits use the same treatment at a small size */ #iiabc-forum-app .fx-letter__photo { width: 96px; height: 116px; object-fit: cover; object-position: 50% 30%; } @media (max-width: 720px) { #iiabc-forum-app .fx-modal__portrait { width: 140px; } #iiabc-forum-app .fx-speaker-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } #iiabc-forum-app .fx-speaker-card__body { padding: 14px 14px 18px; } #iiabc-forum-app .fx-speaker-card h4 { font-size: 1.05rem; } } /* Print: portraits waste ink and page space in a handout */ @media print { #iiabc-forum-app .fx-portrait { display: none; } } /* Full-width photograph band (tradeshow section) */ #iiabc-forum-app .fx-figure-band { margin-top: clamp(40px, 6vw, 64px); } #iiabc-forum-app .fx-figure-band img { width: 100%; height: clamp(220px, 34vw, 420px); object-fit: cover; object-position: 50% 58%; } /* ============================================================================ 20 · v3 ADDITIONS Loading and error states, the volunteer-leadership grids, sponsor links, and unavailable buttons. Everything stays scoped to #iiabc-forum-app. ========================================================================== */ /* ---- 20.1 Loading and error states --------------------------------------- Shown before forum-data.json arrives, and if it cannot be loaded at all. --------------------------------------------------------------------------- */ #iiabc-forum-app .fx-boot { padding: clamp(56px, 10vw, 120px) 0; background: var(--fx-navy); color: #FFFFFF; text-align: left; } #iiabc-forum-app .fx-boot[hidden] { display: none; } #iiabc-forum-app .fx-boot__title { font-family: var(--fx-display); font-size: clamp(1.3rem, 3vw, 2rem); font-weight: 600; color: #FFFFFF; } #iiabc-forum-app .fx-boot__text { margin-top: 12px; max-width: 60ch; color: #C9C9D6; } #iiabc-forum-app .fx-boot__text a { color: var(--fx-teal-light); } #iiabc-forum-app .fx-boot--error { border-top: 4px solid var(--fx-green); } /* The loading panel pulses gently; stillness for reduced-motion users. */ #iiabc-forum-app[data-state="loading"] .fx-boot__title { opacity: 0.75; animation: fx-pulse 1.6s ease-in-out infinite; } @keyframes fx-pulse { 0%, 100% { opacity: 0.55 } 50% { opacity: 1 } } @media (prefers-reduced-motion: reduce) { #iiabc-forum-app[data-state="loading"] .fx-boot__title { animation: none; opacity: 1; } } /* ---- 20.2 Volunteer leadership grids -------------------------------------- The Board and Certification Board reuse the speaker card, so the two sections stay visually identical to the rest of the page. --------------------------------------------------------------------------- */ #iiabc-forum-app .fx-people-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: clamp(16px, 2.4vw, 26px); } /* A card for someone with no biography yet: same frame, no hover, no pointer */ #iiabc-forum-app .fx-speaker-card--static { cursor: default; width: 100%; text-align: left; padding: 0; overflow: hidden; border: 1px solid var(--fx-line); background: #FFFFFF; } #iiabc-forum-app .fx-speaker-card--static:hover { transform: none; box-shadow: none; border-color: var(--fx-line); } #iiabc-forum-app .fx-speaker-card--static:hover .fx-portrait img { transform: none; } /* ---- 20.3 Sponsor and member links ---------------------------------------- */ #iiabc-forum-app .fx-sponsor-name { font-weight: 600; color: var(--fx-navy); margin-top: 4px; } #iiabc-forum-app .fx-logo-card h3 a, #iiabc-forum-app .fx-sponsor-name a { color: var(--fx-teal-ink); text-decoration: none; border-bottom: 1px solid currentColor; } #iiabc-forum-app .fx-logo-card h3 a:hover, #iiabc-forum-app .fx-sponsor-name a:hover { color: var(--fx-navy); } #iiabc-forum-app .fx-oppo-grid a { color: var(--fx-teal-ink); } #iiabc-forum-app .fx-session__sponsor a { color: inherit; border-bottom: 1px solid currentColor; text-decoration: none; } /* ---- 20.4 Buttons with no URL yet ------------------------------------------ The button stays in place so the layout is final, but it cannot be followed and announces itself as unavailable to screen readers. --------------------------------------------------------------------------- */ #iiabc-forum-app .fx-btn.is-unavailable { opacity: 0.55; cursor: not-allowed; } #iiabc-forum-app .fx-btn.is-unavailable:hover { background: var(--fx-teal-ink); color: #FFFFFF; } #iiabc-forum-app .fx-btn--ghost.is-unavailable:hover { background: transparent; color: inherit; border-color: currentColor; } /* ---- 20.5 Profile links (LinkedIn / website) -------------------------------- */ #iiabc-forum-app .fx-modal__links { margin-top: 10px; font-size: 0.9rem; font-weight: 600; } #iiabc-forum-app .fx-modal__links a { color: var(--fx-teal-ink); } /* ---- 20.6 Eyebrow rule on the navy sections --------------------------------- */ #iiabc-forum-app .fx-section--navy .fx-eyebrow--rule { border-bottom-color: var(--fx-navy-line); } /* ---- 20.7 Certification designation line ------------------------------------ */ #iiabc-forum-app .fx-people-grid .fx-speaker-slot { font-style: normal; letter-spacing: 0.08em; } @media (max-width: 720px) { #iiabc-forum-app .fx-people-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } }