/* ========================================================================= qc-2026.css — Quantum Connect & Beyond: Where AI Meets Quantum (RING-FENCED) ------------------------------------------------------------------------ The event's own brand, from the client-authored production specification v2 of 2026-09-04 (AIMEE_QUANTUM_CONNECT_MICROSITE_SPEC_v2_recv-2026-09-04.md): Tiffany #81D8D0 as the only primary, navy/purple gradient, Montserrat 400–700 only. It is loaded by /quantum-connect/2026/ and by nothing else. It does NOT read css/system/design-tokens.css and must never be merged into it: the microsite is a dated event sub-brand (register OQ-25), not a change to the site brand. A later "brand consistency" pass that makes the two agree would be undoing a client decision. Every value below cites the v2 spec section it comes from. Where the spec is silent, the interim choice is recorded in the project's v2 gap analysis (§6.2) and the design register (OQ-40) as a question for the client — never decided quietly here. ========================================================================= */ /* ---- Font (spec v2 §10): Montserrat, weights 400–700 only. The file Google Fonts serves is a variable font; the declared range EXPOSES exactly 400–700 and nothing lighter or heavier can be synthesised from it. ---- */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/montserrat-normal-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/montserrat-normal-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* ---- Tokens (spec v2 §7–§9) ---- */ :root { --qc-tiffany: #81D8D0; /* v2 §7 the ONLY primary Tiffany Blue */ --qc-tiffany-hover: #A3E3DD; /* v2 §14 button hover */ --qc-tiffany-light: #EAF8F7; /* v2 §7 alternate backgrounds, agenda rows */ --qc-tiffany-ultra: #F5FBFA; /* v2 §7 */ --qc-navy: #12233F; /* v2 §7 primary navy */ --qc-navy-deep: #0B172A; /* v2 §7 */ --qc-purple: #7657C8; /* v2 §7 */ --qc-purple-light: #F5F2FA; /* v2 §7 */ --qc-white: #FFFFFF; --qc-body: #26364A; /* v2 §7 standard body text */ --qc-nav-border: #E7EEEE; /* v2 §15 */ --qc-input-border: #E7EEEE; /* v2 §44 gives no input border colour; the spec's only hairline (§15) is used */ --qc-row-border: #DDE9E8; /* v2 §24 why-attend row border */ --qc-gradient-dark: linear-gradient(120deg, #0B172A 0%, #12233F 38%, #493C78 72%, #7657C8 100%); /* v2 §8 */ --qc-glow: radial-gradient(circle at 78% 38%, rgba(129,216,208,0.24) 0%, rgba(129,216,208,0.08) 28%, rgba(129,216,208,0) 58%); /* v2 §8 */ --qc-gradient-light: linear-gradient(135deg, #EAF8F7 0%, #FFFFFF 55%, #F5F2FA 100%); /* v2 §8 sponsorship only */ --qc-font: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; --qc-max: 1200px; /* v2 §13 */ --qc-pad: 22px; /* v2 §13 mobile; tablet overrides to 40px */ --qc-fast: 180ms ease; /* v2 §14, §48 */ } /* ---- Base ---- */ html { scroll-padding-top: 78px; } body.qc { margin: 0; font-family: var(--qc-font); font-weight: 400; font-size: 17px; /* v2 §11 body */ line-height: 28px; color: var(--qc-body); background: var(--qc-white); -webkit-font-smoothing: antialiased; } .qc *, .qc *::before, .qc *::after { box-sizing: border-box; } /* Zero-specificity reset so every single-class margin the spec names wins over it. */ :where(body.qc) :where(h1, h2, h3, p, ul, ol) { margin: 0; } :where(body.qc) :where(ul, ol) { padding: 0; list-style: none; } .qc img { max-width: 100%; height: auto; display: block; } :where(body.qc) a { color: inherit; } /* zero specificity: a .qc-btn link keeps its navy text on a dark section */ :where(body.qc) :where(button, input, select, textarea) { font-family: inherit; } /* v2 §10: Montserrat everywhere, incl. the modal close glyph and the honeypot */ .qc-skip { position: absolute; left: -999px; top: 0; background: var(--qc-navy); color: var(--qc-white) !important; padding: 8px 12px; z-index: 2000; text-decoration: none; } .qc-skip:focus { left: 8px; top: 8px; } .qc :focus-visible { outline: 2px solid var(--qc-purple); outline-offset: 3px; } .qc-container { max-width: var(--qc-max); margin: 0 auto; padding: 0 var(--qc-pad); } .qc-center { text-align: center; } /* ---- Type (spec v2 §11 desktop; v2 §12 mobile at the bottom) ---- */ .qc-eyebrow { font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 2.2px; text-transform: uppercase; margin-bottom: 18px; } .qc-eyebrow--purple { color: var(--qc-purple); } .qc-eyebrow--tiffany { color: var(--qc-tiffany); } .qc-h2 { font-size: 46px; line-height: 54px; font-weight: 600; letter-spacing: -1px; color: var(--qc-navy); text-transform: uppercase; margin-bottom: 22px; } .qc-h2--white { color: var(--qc-white); } .qc-intro { font-size: 19px; line-height: 31px; font-weight: 400; } .qc-h3 { font-size: 23px; line-height: 30px; font-weight: 600; color: var(--qc-navy); text-transform: uppercase; } .qc-body { font-size: 17px; line-height: 28px; font-weight: 400; } .qc-small { font-size: 13px; line-height: 20px; } /* ---- Buttons (spec v2 §14): 54px, 28px pad, radius 3px, Tiffany / navy, 600 14px 0.7px uppercase; hover #A3E3DD translateY(-1px) 180ms. No pill, no heavy shadow. ---- */ .qc-btn { display: inline-flex; align-items: center; justify-content: center; height: 54px; padding: 0 28px; border: 0; border-radius: 3px; background: var(--qc-tiffany); color: var(--qc-navy); font-family: var(--qc-font); font-weight: 600; font-size: 14px; letter-spacing: 0.7px; text-transform: uppercase; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color var(--qc-fast), transform var(--qc-fast), border-color var(--qc-fast); } .qc-btn:hover { background: var(--qc-tiffany-hover); transform: translateY(-1px); } .qc-btn--outline { background: transparent; color: var(--qc-tiffany); border: 1px solid var(--qc-tiffany); } .qc-btn--outline:hover { background: rgba(129,216,208,.12); } /* A control whose destination the client has not yet supplied: visibly not live, same reading as the labelled photo slots. */ .qc-btn--pending { cursor: not-allowed; opacity: 0.55; } .qc-btn--pending:hover { background: var(--qc-tiffany); transform: none; } .qc-btn__pending-note { display: block; font-size: 13px; line-height: 18px; color: rgba(255,255,255,.75); margin-top: 10px; } .qc-btn--submit { width: 100%; height: 56px; } /* v2 §44 */ /* ---- 01. Sticky nav (spec v2 §15) ---- */ .qc-nav { position: sticky; top: 0; z-index: 1000; height: 78px; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--qc-nav-border); } .qc-nav__inner { max-width: var(--qc-max); height: 100%; margin: 0 auto; padding: 0 var(--qc-pad); display: flex; align-items: center; justify-content: space-between; gap: 27px; } .qc-nav__logo { display: block; max-width: 180px; flex: 0 0 auto; } .qc-nav__logo img { width: 180px; height: auto; } .qc-nav__menu { display: flex; align-items: center; gap: 27px; } .qc-nav__links { display: flex; align-items: center; gap: 27px; } .qc-nav__links a { font-weight: 500; font-size: 12px; letter-spacing: 0.5px; color: var(--qc-navy); text-decoration: none; text-transform: uppercase; transition: color var(--qc-fast); } .qc-nav__links a:hover { color: var(--qc-purple); } /* v2 §48 navy → purple */ .qc-nav__toggle { display: none; } /* ---- Dark sections: the approved gradient + Tiffany glow (spec v2 §8). background-color is the gradient's mid value, a plain fallback for a renderer without gradients and the surface the contrast audit measures. ---- */ .qc-dark { position: relative; background-color: var(--qc-navy); background-image: var(--qc-glow), var(--qc-gradient-dark); color: var(--qc-white); } .qc-navy { background-color: var(--qc-navy); color: var(--qc-white); } /* ---- 02. Hero (spec v2 §16, §17) ---- */ .qc-hero { min-height: 720px; padding: 100px 0 90px; overflow: hidden; } /* v2 §16 */ .qc-hero__inner { position: relative; max-width: var(--qc-max); margin: 0 auto; padding: 0 var(--qc-pad); } .qc-hero__copy { position: relative; z-index: 1; max-width: 760px; text-align: left; } .qc-hero__eyebrow { font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 2.2px; color: var(--qc-tiffany); margin-bottom: 20px; } .qc-hero__title { font-size: 68px; line-height: 69px; font-weight: 600; letter-spacing: -1px; color: var(--qc-white); margin-bottom: 12px; } /* v2 §11: major headings -1px */ .qc-hero__tagline { font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: 1.2px; color: var(--qc-tiffany); margin-bottom: 38px; } /* v2 §16 spacing 38px */ .qc-hero__primary { font-size: 32px; line-height: 40px; font-weight: 500; color: var(--qc-white); margin-bottom: 12px; } /* v2 §11 hero lead */ .qc-hero__statement { font-size: 34px; line-height: 42px; font-weight: 500; color: var(--qc-white); max-width: 760px; margin-bottom: 22px; } /* v2 §11 convergence statement */ .qc-hero__body { font-size: 19px; line-height: 30px; font-weight: 400; color: var(--qc-white); margin-bottom: 34px; } .qc-hero__when { font-size: 15px; line-height: 24px; font-weight: 600; letter-spacing: 1px; color: var(--qc-tiffany); margin-bottom: 14px; } .qc-hero__audience { font-size: 17px; line-height: 28px; color: rgba(255,255,255,.88); margin-bottom: 34px; } .qc-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; } /* v2 §5/§16: the eligibility sentence under every REGISTER HERE. */ .qc-eligibility { font-size: 13px; line-height: 20px; margin-top: 14px; } .qc-dark .qc-eligibility, .qc-hero .qc-eligibility { color: rgba(255,255,255,.75); } .qc-hero__graphic { position: absolute; top: -100px; right: 0; bottom: -90px; width: 38%; opacity: 0.55; pointer-events: none; } /* v2 §17: right 35–40% */ .qc-hero__graphic svg { width: 100%; height: 100%; } /* ---- 03. Statement strip (spec v2 §18) ---- */ .qc-strip { height: 72px; display: flex; align-items: center; justify-content: center; background: var(--qc-tiffany); padding: 0 var(--qc-pad); } .qc-strip__copy { font-size: 15px; line-height: 22px; font-weight: 600; letter-spacing: 1.4px; color: var(--qc-navy); text-align: center; text-transform: uppercase; } /* ---- 04. Event essentials (v2 §19): five columns, thin vertical separators, a short Tiffany line above each, no icons ---- */ .qc-essentials { background: var(--qc-white); padding: 55px 0 60px; } .qc-essentials__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); } .qc-essentials__item { padding: 6px 28px 0; border-left: 1px solid var(--qc-nav-border); } .qc-essentials__item:first-child { padding-left: 0; border-left: 0; } .qc-essentials__item:last-child { padding-right: 0; } /* Scoped above the base .qc-rule reset (declared later, same specificity): the line sat on the titles because that reset zeroed this margin (owner review). */ .qc-essentials__item .qc-rule--tiffany-short { width: 40px; height: 3px; background: var(--qc-tiffany); margin: 0 0 26px; } .qc-essentials__title { font-size: 15px; line-height: 22px; font-weight: 600; letter-spacing: 1.4px; color: var(--qc-navy); margin-bottom: 12px; } .qc-essentials__body { font-size: 15px; line-height: 24px; } .qc-essentials__small { font-size: 13px; line-height: 20px; margin-top: 10px; } /* ---- 05. Overview (v2 §20) ---- */ .qc-overview { background: var(--qc-white); padding: 90px 22px; } /* v2 §20 */ .qc-overview__inner { max-width: 900px; margin: 0 auto; text-align: center; } .qc-overview .qc-h2 { margin-bottom: 28px; } .qc-overview .qc-intro { margin-bottom: 30px; } .qc-overview__statement { font-size: 31px; line-height: 40px; font-weight: 500; color: var(--qc-navy); margin-bottom: 20px; } .qc-overview__line { font-size: 18px; line-height: 29px; margin-bottom: 22px; } .qc-overview__purple { font-size: 15px; line-height: 24px; color: var(--qc-purple); } /* ---- 06. How the room works (spec v2 §21): four columns, no cards ---- */ .qc-participate { background: var(--qc-tiffany-light); padding: 80px 0; } .qc-participate__title { text-align: center; margin-bottom: 55px; } .qc-participate__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; } .qc-num { font-size: 48px; line-height: 52px; font-weight: 600; color: var(--qc-tiffany); margin-bottom: 14px; } /* v2 §21 */ .qc-rule { border: 0; margin: 0; } .qc-rule--purple { width: 42px; height: 3px; background: var(--qc-purple); margin-bottom: 18px; } .qc-rule--tiffany { background: var(--qc-tiffany); } .qc-rule--60 { width: 60px; height: 3px; margin: 34px auto; } .qc-participate__col .qc-h3 { margin-bottom: 12px; } /* ---- 07. The questions have changed (spec v2 §22, §23) ---- */ .qc-questions { padding: 105px 0; } .qc-questions__intro { color: var(--qc-white); max-width: 760px; margin-bottom: 22px; } .qc-questions__statement { font-size: 19px; line-height: 31px; font-weight: 600; color: var(--qc-white); max-width: 760px; margin-bottom: 55px; } .qc-questions__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .qc-qcard { padding: 34px; min-height: 250px; background: rgba(255,255,255,.055); border: 1px solid rgba(129,216,208,.22); border-radius: 2px; transition: border-color var(--qc-fast); } .qc-qcard:hover { border-color: var(--qc-tiffany); } /* v2 §23: hover border only, no movement */ .qc-qcard--wide { grid-column: 1 / -1; } .qc-qcard__label { font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 2.2px; text-transform: uppercase; margin-bottom: 16px; } .qc-qcard__label { color: var(--qc-tiffany); } /* v2 gives the top labels no colour; Tiffany is the interim (register OQ-40) */ .qc-qcard__press-label { font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 2.2px; text-transform: uppercase; color: var(--qc-tiffany); margin: 18px 0 6px; } /* v2 §23 small Tiffany label */ .qc-qcard__press { font-size: 15px; line-height: 24px; color: rgba(255,255,255,.88); } .qc-qcard__title { color: var(--qc-white); margin-bottom: 14px; } .qc-qcard__subline { font-size: 32px; line-height: 39px; font-weight: 600; color: var(--qc-tiffany); text-transform: uppercase; margin: -4px 0 14px; } /* v2 §23 */ .qc-qcard__body { color: rgba(255,255,255,.88); } /* ---- 08. Why be in this room (spec v2 §24): five horizontal numbered rows ---- */ .qc-why { background: var(--qc-white); padding: 105px 0; } .qc-why__inner { max-width: 1050px; margin: 0 auto; padding: 0 var(--qc-pad); } .qc-why .qc-h2 { margin-bottom: 60px; } .qc-why__row { display: grid; grid-template-columns: 110px 1fr; gap: 24px; align-items: start; padding: 30px 0; border-bottom: 1px solid var(--qc-row-border); } /* v2 §24 */ .qc-why__num { font-size: 34px; line-height: 40px; font-weight: 600; color: var(--qc-tiffany); } /* v2 §24: 34px Tiffany (1.66:1 on white — register OQ-39) */ .qc-why__text .qc-h3 { margin-bottom: 10px; } .qc-why__cta { margin-top: 55px; } /* ---- 09. Hospitality + networking (v2 §25): Tiffany band, navy copy ---- */ .qc-hospitality { background: var(--qc-tiffany); color: var(--qc-navy); padding: 65px 0; } .qc-hospitality__inner { max-width: 900px; margin: 0 auto; padding: 0 var(--qc-pad); } .qc-hospitality .qc-intro { color: var(--qc-navy); margin-bottom: 26px; } .qc-hospitality__line { font-size: 15px; line-height: 22px; font-weight: 600; letter-spacing: 1.4px; color: var(--qc-navy); } /* ---- 10. Security Shark Tank® Challenge (v2 §26–§28) ---- */ .qc-shark { padding: 110px 0; } .qc-shark__inner { max-width: 900px; margin: 0 auto; padding: 0 var(--qc-pad); } .qc-shark__intro { color: var(--qc-white); margin: 0 auto 60px; } .qc-shark .qc-h2 { margin-bottom: 26px; } .qc-shark__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; max-width: 900px; margin: 0 auto 60px; } .qc-shark__number { font-size: 72px; line-height: 72px; font-weight: 600; color: var(--qc-tiffany); margin-bottom: 8px; } .qc-shark__stat-unit { font-size: 15px; line-height: 22px; font-weight: 600; letter-spacing: 1.4px; color: var(--qc-tiffany); margin-bottom: 4px; } .qc-shark__stat-label { font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 2.2px; text-transform: uppercase; color: var(--qc-white); } .qc-shark__decides { font-size: 31px; line-height: 40px; font-weight: 500; color: var(--qc-white); margin-bottom: 16px; } .qc-shark__question { font-size: 19px; line-height: 31px; color: var(--qc-white); margin-bottom: 24px; } .qc-shark__choices { display: flex; justify-content: center; gap: 16px; margin-bottom: 44px; } .qc-choice { display: inline-flex; align-items: center; height: 54px; padding: 0 34px; border-radius: 3px; font-weight: 600; font-size: 14px; letter-spacing: 0.7px; } .qc-choice--yes { background: var(--qc-tiffany); color: var(--qc-navy); } .qc-choice--notyet { border: 1px solid var(--qc-white); color: var(--qc-white); background: transparent; } /* v2 §27: transparent / white border */ .qc-shark__verdict-title { font-size: 31px; line-height: 40px; font-weight: 500; color: var(--qc-white); margin-bottom: 14px; } /* v2 §28 */ .qc-shark__verdict { color: rgba(255,255,255,.88); margin: 0 auto 34px; } .qc-shark__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; } /* ---- 11. Full agenda (spec v2 §29–§31) ---- */ .qc-agenda-section { background: var(--qc-white); padding: 105px 0; } .qc-agenda-section__sub { margin-bottom: 12px; } .qc-agenda-section__times { font-size: 15px; line-height: 24px; margin-bottom: 55px; } .qc-agenda { max-width: 1100px; margin: 0 auto; } .qc-agenda__row { display: grid; grid-template-columns: 165px 1fr; gap: 20px; padding: 25px 28px; border-left: 4px solid var(--qc-tiffany); } .qc-agenda__row:nth-child(odd) { background: var(--qc-white); } .qc-agenda__row:nth-child(even) { background: var(--qc-tiffany-ultra); } .qc-agenda__row--shark { border-left-color: var(--qc-purple); } .qc-agenda__time { font-size: 15px; line-height: 22px; font-weight: 600; color: var(--qc-purple); padding-top: 2px; } .qc-agenda__title { font-size: 20px; line-height: 26px; font-weight: 600; color: var(--qc-navy); margin-bottom: 4px; } .qc-agenda__subtitle { font-size: 17px; line-height: 25px; font-weight: 500; color: var(--qc-navy); margin-bottom: 6px; } .qc-agenda__people, .qc-agenda__format { font-size: 15px; line-height: 24px; font-weight: 400; color: var(--qc-body); margin-bottom: 6px; } .qc-agenda__body { font-size: 15px; line-height: 24px; font-weight: 400; color: var(--qc-body); } .qc-agenda__body + .qc-agenda__body { margin-top: 6px; } .qc-agenda__label { font-weight: 600; color: var(--qc-purple); } /* ---- 12. CPE information (v2 §32): immediately after the agenda ---- */ .qc-cpe { background: var(--qc-white); padding: 0 var(--qc-pad) 105px; } .qc-cpe__inner { max-width: 1100px; margin: 0 auto; background: var(--qc-tiffany-light); border-top: 3px solid var(--qc-tiffany); padding: 30px; } .qc-cpe__title { margin-bottom: 10px; } .qc-cpe__body { font-size: 15px; line-height: 24px; } /* ---- 13. Facilitators (v2 §33–§35): `facilitator-card` — never a speaker card ---- */ .qc-facilitators { background: var(--qc-tiffany-ultra); padding: 105px 0; } .qc-facilitators__intro { max-width: 840px; margin-bottom: 55px; } .qc-facilitators__statement { font-size: 31px; line-height: 40px; font-weight: 500; color: var(--qc-navy); margin: 10px 0 22px; } .qc-facilitators__intro .qc-intro + .qc-intro { margin-top: 18px; } .qc-facilitators__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; } .facilitator-card { background: transparent; } .facilitator-card__photo { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; border-radius: 0; filter: none; box-shadow: none; } .facilitator-card__photo--pending { display: flex; align-items: flex-end; background: var(--qc-tiffany-light); border: 1px solid var(--qc-nav-border); padding: 14px; } .facilitator-card__photo-note { font-size: 13px; line-height: 18px; color: var(--qc-body); } .facilitator-card__body { padding-top: 22px; } .facilitator-card__name { font-size: 19px; line-height: 25px; font-weight: 600; color: var(--qc-navy); } .facilitator-card__title { font-size: 14px; line-height: 22px; } .facilitator-card__rule { width: 40px; height: 2px; background: var(--qc-tiffany); margin: 15px 0; } .facilitator-card__session { font-size: 13px; line-height: 19px; font-weight: 600; color: var(--qc-purple); text-transform: uppercase; } .qc-facilitators__footnote { margin-top: 55px; font-size: 15px; line-height: 24px; } /* ---- 14. Who is in the room (spec v2 §36) ---- */ .qc-room { background: var(--qc-purple-light); padding: 95px 0; } .qc-room__grid { display: grid; grid-template-columns: 42fr 58fr; gap: 70px; align-items: start; } .qc-room__left .qc-h2 { margin-bottom: 24px; } .qc-room__right { padding-top: 8px; } .qc-room__labels li { font-size: 15px; line-height: 22px; font-weight: 600; letter-spacing: 1.4px; color: var(--qc-navy); padding: 14px 0; border-bottom: 1px solid rgba(118,87,200,.18); } .qc-room__labels li:first-child { border-top: 1px solid rgba(118,87,200,.18); } .qc-room__count { font-size: 19px; line-height: 31px; margin: 30px 0 24px; } .qc-room__vendors { margin-top: 18px; } /* ---- 15. CISO Choice Awards™ (spec v2 §37) ---- */ .qc-awards { background: var(--qc-white); padding: 85px 0; } .qc-awards__inner { max-width: 820px; margin: 0 auto; padding: 0 var(--qc-pad); } .qc-awards .qc-h2 { margin-bottom: 24px; } .qc-awards__link { color: inherit; text-decoration: none; transition: color var(--qc-fast); } .qc-awards__link:hover { color: var(--qc-purple); } .qc-awards__line { font-size: 15px; line-height: 22px; font-weight: 600; letter-spacing: 1.4px; color: var(--qc-navy); } /* ---- 16. Venue (spec v2 §38) ---- */ .qc-venue { display: grid; grid-template-columns: 1fr 1fr; min-height: 520px; } .qc-venue__media { position: relative; min-height: 520px; } .qc-venue__photo { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; } .qc-venue__photo--pending { display: flex; align-items: flex-end; background: var(--qc-tiffany-light); padding: 22px; } .qc-venue__photo-note { font-size: 13px; line-height: 18px; color: var(--qc-body); } .qc-venue__content { background: var(--qc-navy); color: var(--qc-white); padding: 75px; } .qc-venue__content .qc-h2 { margin-bottom: 26px; } .qc-venue__city, .qc-venue__date { font-size: 15px; line-height: 22px; font-weight: 600; letter-spacing: 1.4px; color: var(--qc-white); } .qc-venue__date { margin: 6px 0 34px; } /* ---- 17. Sponsorship (spec v2 §39): the light gradient, and nothing priced ---- */ .qc-sponsor { background-color: var(--qc-tiffany-light); background-image: var(--qc-gradient-light); padding: 100px 0; } /* v2 §39 */ .qc-sponsor__intro { max-width: 780px; margin: 0 auto 55px; } .qc-sponsor .qc-h2 { margin-bottom: 24px; } .qc-sponsor__status { font-size: 15px; line-height: 22px; font-weight: 600; letter-spacing: 1.4px; color: var(--qc-navy); margin: 30px 0 0; } /* v2 §40–§42 "three premium cards": contents specified, geometry not — the question-card geometry (34px padding, 2px radius, 1px border) on white is the interim (register OQ-40). */ .qc-sponsor__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; } .qc-scard { display: flex; flex-direction: column; background: var(--qc-white); border: 1px solid var(--qc-nav-border); border-radius: 2px; padding: 34px; transition: border-color var(--qc-fast); } .qc-scard:hover { border-color: var(--qc-tiffany); } .qc-scard__label { font-size: 13px; line-height: 18px; font-weight: 600; letter-spacing: 2.2px; color: var(--qc-purple); margin-bottom: 14px; } .qc-scard__title { margin-bottom: 14px; } .qc-scard__body { font-size: 15px; line-height: 24px; margin-bottom: 18px; } .qc-scard__list { margin: 0 0 26px; flex: 1 1 auto; } .qc-scard__list li { font-size: 15px; line-height: 24px; padding: 6px 0 6px 18px; position: relative; border-top: 1px solid var(--qc-nav-border); } .qc-scard__list li::before { content: ""; position: absolute; left: 0; top: 15px; width: 8px; height: 2px; background: var(--qc-tiffany); } .qc-scard__list--caps li { font-size: 13px; line-height: 20px; font-weight: 600; letter-spacing: 1.4px; color: var(--qc-navy); } .qc-scard .qc-btn { width: 100%; margin-top: auto; white-space: normal; height: auto; min-height: 54px; padding: 12px 22px; text-align: center; line-height: 1.3; } /* ---- 18. Final CTA (spec v2 §45) ---- */ .qc-final { min-height: 500px; padding: 100px 22px; } .qc-final .qc-h2 { margin-bottom: 8px; } .qc-final__ask { font-size: 31px; line-height: 40px; font-weight: 500; color: var(--qc-tiffany); margin-bottom: 30px; } .qc-final__name { font-size: 15px; line-height: 24px; font-weight: 600; letter-spacing: 1.4px; color: var(--qc-white); margin-bottom: 30px; } .qc-final__cta .qc-eligibility { margin-top: 18px; } /* ---- 19. Footer (spec v2 §51) ---- */ .qc-footer { background: var(--qc-navy-deep); color: rgba(255,255,255,.75); padding: 55px 0 35px; } .qc-footer__logo { width: 165px; max-width: 165px; height: auto; margin-bottom: 26px; } .qc-footer__name { font-size: 13px; line-height: 20px; font-weight: 600; letter-spacing: 1.4px; color: var(--qc-white); margin-bottom: 26px; } .qc-footer__links { display: flex; flex-wrap: wrap; gap: 26px; margin-bottom: 34px; } .qc-footer__links a { font-size: 13px; line-height: 20px; color: rgba(255,255,255,.75); text-decoration: none; transition: color var(--qc-fast); } .qc-footer__links a:hover { color: var(--qc-white); } .qc-footer__divider { border: 0; height: 1px; background: rgba(255,255,255,.12); margin: 0 0 22px; } .qc-footer__legal { font-size: 13px; line-height: 20px; color: rgba(255,255,255,.75); } /* ---- Mobile sticky CTA (spec v2 §47): desktop hidden; shown below 768px ---- */ .qc-sticky { display: none; } /* ---- Sponsorship inquiry form (v2 §44): a white 620px block inside the sponsorship section; the three card controls anchor to it ---- */ .qc-sponsor__form { max-width: 620px; margin: 55px auto 0; background: var(--qc-white); padding: 45px; border: 1px solid var(--qc-nav-border); } .qc-form__title { font-size: 23px; line-height: 30px; font-weight: 600; color: var(--qc-navy); margin-bottom: 22px; } /* v2 §44 headline at the v2 §15 card-headline size */ .qc-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .qc-field { margin-bottom: 16px; } .qc-field label { display: block; font-weight: 500; font-size: 13px; line-height: 18px; color: var(--qc-navy); margin-bottom: 6px; } .qc-field input, .qc-field select, .qc-field textarea { width: 100%; height: 52px; padding: 0 14px; border: 1px solid var(--qc-input-border); border-radius: 2px; background: var(--qc-white); font-family: var(--qc-font); font-weight: 400; font-size: 15px; color: var(--qc-body); transition: border-color var(--qc-fast); } .qc-field input:focus, .qc-field select:focus, .qc-field textarea:focus { outline: none; border-color: var(--qc-tiffany); } .qc-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; } .cc-form__status { margin-top: 14px; font-size: 14px; line-height: 22px; } .cc-form__status--error { color: var(--qc-purple); font-weight: 600; } /* v2 §7: no colour outside the palette */ .qc-form__success-line { font-size: 17px; line-height: 28px; margin-bottom: 14px; } /* ---- Optional entrance (spec v2 §48): opacity + ≤12px, 450ms, once; off under prefers-reduced-motion. The class is only ever added by qc-2026.js when the viewer allows motion, so a no-JS or reduced-motion visitor sees everything in place from the first paint. ---- */ .qc-enter { opacity: 0; transform: translateY(12px); transition: opacity 450ms ease, transform 450ms ease; } .qc-enter.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .qc-enter { opacity: 1; transform: none; transition: none; } .qc-btn, .qc-qcard, .qc-nav__links a { transition: none; } } /* The entrance is a scroll effect; on paper everything is simply there. */ @media print { .qc-enter { opacity: 1 !important; transform: none !important; transition: none; } .qc-nav, .qc-sticky { display: none !important; } } /* ======================= TABLET 768–1199 (spec v2 §13) ======================= */ @media (min-width: 768px) and (max-width: 1199px) { :root { --qc-pad: 40px; } .qc-participate__grid { grid-template-columns: repeat(2, 1fr); } .qc-facilitators__grid { grid-template-columns: repeat(2, 1fr); } .qc-room__grid { gap: 40px; } .qc-venue__content { padding: 55px 40px; } /* The v2 §15 desktop navigation (180px logo + six items at 27px gaps + the button) needs ~1030px and does not fit any tablet width; v2 §46's hamburger is specified only below 768px. So across 768–1199 the header wraps: logo and button on the first row, the six items on the second, the