/* Self-hosted so no request leaves for fonts.gstatic.com — the audience is in Germany. Both faces are SIL OFL 1.1; licences sit next to the files in static/fonts/. ponytail: latin + latin-ext subsets only, CJK keeps falling through to the system stack. */ @font-face { font-family: "Outfit"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("../fonts/outfit-latin.98ccc2b7f189.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: "Outfit"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("../fonts/outfit-latin-ext.e2b64ddcb351.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; } @font-face { font-family: "DM Serif Display"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/dm-serif-display-latin.436ae2f139e0.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: "DM Serif Display"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/dm-serif-display-latin-ext.1711e75caeed.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; } :root { --ink: #363636; --white: #fff; /* 2026 redesign — header/footer chrome + home page */ --accent: #63ae26; --accent-dark: #4f8c1e; --accent-red: #d21018; --dark: #111111; --dim: #666660; --panel: #f2f2f2; --panel-alt: #eeeeee; --border: #dddddd; --border-soft: #e3e3e1; } * { box-sizing: border-box; } html { scroll-behavior: smooth; background: var(--white); } body { margin: 0; min-width: 320px; background: var(--white); color: var(--ink); font-family: var(--font-sans); font-size: 14px; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } button, input, textarea { color: inherit; font: inherit; } img { display: block; max-width: 100%; } /* uppercase German compounds (ORGANISATIONSSTRUKTUR) outrun a 375px column — lets the browser hyphenate */ h1, h2, h3, h4 { overflow-wrap: break-word; hyphens: auto; } /* the second heading line is always the *other* language, so the page dictionary would hyphenate it wrong */ h2 span { hyphens: manual; } ::selection { background: var(--accent); color: var(--white); } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } .nowrap { white-space: nowrap; } .skip-link { position: fixed; z-index: 30; top: 8px; left: 8px; padding: 9px 12px; background: #222; color: #fff; transform: translateY(-150%); } .skip-link:focus { transform: translateY(0); } /* ================================================================ 2026 redesign — site chrome + home page (Figma "DACHINA - 01") ================================================================ */ :root { --panel-soft: #f5f5f3; --mute: #aaaaaa; --shell: 1200px; --gutter: max(24px, calc((100% - var(--shell)) / 2)); /* Figma type system: Outfit for latin, PingFang SC for CJK, DM Serif Display for numerals/display latin */ --font-sans: "Outfit", "PingFang SC", "Noto Sans SC", "Microsoft YaHei", Arial, sans-serif; --font-display: "DM Serif Display", "PingFang SC", "Noto Sans SC", Georgia, serif; } .wrap { width: min(calc(100% - 48px), var(--shell)); margin: 0 auto; } /* ---------- shared atoms ---------- */ .eyebrow { margin: 0 0 24px; color: var(--accent); font-size: 12px; font-weight: 500; line-height: 16px; letter-spacing: .168em; text-transform: uppercase; } .body-lg { margin: 0 0 24px; color: var(--dim); font-size: 16px; line-height: 2; } .body-sm { margin: 0 0 24px; color: var(--dim); font-size: 14px; line-height: 1.86; } .sub-label { margin: 0 0 24px; color: var(--mute); font-size: 12px; font-weight: 500; line-height: 18px; letter-spacing: .14em; text-align: center; text-transform: uppercase; } .sec { padding: 80px 0; background: var(--white); } .sec-head { margin-bottom: 44px; } .sec-head-center { text-align: center; } .sec-head-split { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; } .sec-agenda .sec-head { margin-bottom: 36px; } .sec-organizer .sec-head { margin-bottom: 32px; } .sec-news .sec-head { margin-bottom: 36px; } /* the gap between an eyebrow and what follows is per-block in the Figma */ .sec-qiao .eyebrow, .sec-outcomes .eyebrow, .sec-register .eyebrow, .sec-news .eyebrow { margin-bottom: 12px; } .sec-committee .eyebrow, .venue-banner .eyebrow { margin-bottom: 16px; } .sec-invited .eyebrow { margin-bottom: 36px; } .sec h2, .sec-committee h2 { margin: 0 0 24px; color: var(--dark); font-size: 40px; font-weight: 500; line-height: 44px; letter-spacing: 0; } .sec h2 span, .sec-committee h2 span { display: block; } /* the four "CN + EN" headings: 36px Outfit Medium over a green DM Serif 24px translation, both uppercase */ .sec-about h2, .sec-committee h2, .sec-background h2, .sec-organizer h2 { font-size: 36px; text-transform: uppercase; } .sec-about h2 span, .sec-committee h2 span, .sec-background h2 span, .sec-organizer h2 span { color: var(--accent); font-family: var(--font-display); font-size: 24px; font-weight: 400; line-height: 32px; } .pill { display: inline-block; padding: 2px 8px; border-radius: 3px; background: var(--accent); color: var(--white); font-size: 12px; font-weight: 500; line-height: 14px; letter-spacing: .066em; text-transform: uppercase; } .link-underline { display: inline-block; padding-bottom: 3px; border-bottom: 1px solid var(--accent); color: var(--accent); font-size: 12px; font-weight: 500; line-height: 16px; letter-spacing: .168em; text-transform: uppercase; } .link-underline-lg { font-size: 14px; line-height: 20px; letter-spacing: 0; text-transform: none; } .rule { display: block; width: 40px; height: 4px; margin: 24px 0 32px; background: var(--accent); } .rule-sm { flex: none; width: 24px; height: 1px; background: linear-gradient(90deg, var(--accent), transparent); vertical-align: middle; } .btn { display: inline-flex; align-items: center; justify-content: center; padding: 13px 32px; border: 2px solid transparent; border-radius: 4px; font-size: 15px; font-weight: 600; line-height: 22px; text-align: center; transition: background-color .2s, color .2s, border-color .2s; } .btn-solid { background: var(--accent); color: var(--white); } .btn-solid:hover { background: var(--accent-dark); } .btn-ghost { border-color: rgba(255,255,255,.7); color: var(--white); } .btn-ghost:hover { background: rgba(255,255,255,.14); } .btn-outline { border-color: var(--dark); color: var(--dark); } .btn-outline:hover { background: var(--dark); color: var(--white); } .btn-sm { padding: 8px 16px; border-radius: 6px; font-size: 13px; font-weight: 500; line-height: 20px; } .btn-block { width: 100%; padding: 13px 20px; border-radius: 8px; font-size: 14px; font-weight: 500; line-height: 22px; } /* ---------- Header ---------- */ .sitehead { position: sticky; z-index: 20; top: 0; border-bottom: 1px solid var(--border-soft); background: rgba(255,255,255,.97); } .sitehead-inner { min-height: 64px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; padding: 0 var(--gutter); } .brandmark { display: flex; align-items: center; gap: 6px; width: max-content; } .brandmark strong { color: var(--accent-red); font-size: 24px; font-weight: 800; line-height: 30px; letter-spacing: 0; } .brandmark span { display: flex; flex-direction: column; gap: 2px; color: rgba(102,102,96,.6); font-size: 10px; font-style: normal; line-height: 10px; letter-spacing: .144em; text-transform: uppercase; } .brandmark b, .brandmark i { font-weight: 400; font-style: normal; } .sitenav { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; } .sitenav a { position: relative; padding: 21px 12px; color: #333; font-size: 14px; font-weight: 500; line-height: 20px; } /* 14px below the link box puts the rule right under the label, where the Figma draws it */ .sitenav a::after { content: ""; position: absolute; right: 0; bottom: 14px; left: 0; height: 2px; background: var(--accent); transform: scaleX(0); transition: transform .2s; } .sitenav a:hover { color: var(--accent); } .sitenav a:hover::after { transform: scaleX(1); } /* eight EN/DE labels outrun the 1200px header grid and wrap the nav onto a second row; zh labels are short enough to keep the roomier Figma spacing */ :lang(en) .sitenav, :lang(de) .sitenav { gap: 16px; } :lang(en) .sitenav a, :lang(de) .sitenav a { padding-right: 6px; padding-left: 6px; } .sitehead-right { display: flex; align-items: center; gap: 16px; } .language-switcher { display: flex; align-items: center; gap: 4px; } .language-switcher a { color: var(--dim); font-size: 12px; font-weight: 700; line-height: 18px; letter-spacing: .08em; text-transform: uppercase; } .language-switcher a + a::before { content: "/"; margin-right: 4px; color: var(--border); } .language-switcher a.active, .language-switcher a:hover { color: var(--accent); } .nav-cta { display: inline-flex; align-items: center; justify-content: center; min-width: 88px; height: 36px; padding: 0 18px; border-radius: 8px; background: var(--accent); color: var(--white); font-size: 13px; font-weight: 600; line-height: 19.5px; } .nav-cta:hover { background: var(--accent-dark); } .menu-button { display: none; } /* ---------- Hero ---------- */ .hero { position: relative; display: flex; align-items: flex-end; min-height: min(856px, 88vh); padding: 140px 0 60px; overflow: hidden; background: #0c0c0c; } .hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero-shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,10,10,.51), rgba(10,10,10,.36) 60%, rgba(10,10,10,.18)), linear-gradient(90deg, rgba(0,0,0,.6), transparent); } .hero-shape { position: absolute; border-style: solid; border-radius: 50%; pointer-events: none; } .hero-shape-a { top: 67.3%; left: 65.2%; width: 220px; height: 220px; border-width: 32px; border-color: var(--accent); opacity: .18; } .hero-shape-b { top: 65%; left: 53.7%; width: 180px; height: 180px; border-width: 28px; border-color: var(--white); opacity: .14; } .hero-shape-c { top: 16.4%; left: 62%; width: 160px; height: 160px; border-width: 24px; border-color: var(--accent); opacity: .16; } .hero-content { position: relative; } .hero .eyebrow { margin-bottom: 12px; font-family: var(--font-display); font-weight: 400; line-height: 18px; letter-spacing: .14em; } .hero-content h1 { margin: 0 0 16px; color: var(--white); font-size: clamp(38px, 4.4vw, 66px); font-weight: 600; line-height: 1.45; letter-spacing: 0; } .hero-title-alt { margin: 0 0 24px; color: var(--accent); font-family: var(--font-display); font-size: clamp(16px, 1.6vw, 24px); font-weight: 400; line-height: 36px; letter-spacing: .14em; } .hero-lead { margin: 0 0 4px; max-width: 760px; color: rgba(240,235,224,.75); font-size: 20px; line-height: 32px; } .hero-lead-alt { margin: 0 0 32px; max-width: 760px; color: rgba(240,235,224,.5); font-family: var(--font-display); font-size: 18px; line-height: 28px; } .hero-stats { display: flex; flex-wrap: wrap; gap: 32px; margin: 0 0 40px; } .hero-stats > div { padding-left: 16px; border-left: 1px solid var(--accent); } .hero-stats dt { color: var(--accent); font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: .168em; text-transform: uppercase; } .hero-stats dd { margin: 0; color: var(--panel); font-size: 18px; line-height: 28px; } /* The mascot is the client's own sticker out of the Figma file. Figma has it sitting flat; the float + halo + speech-bubble tail are what stop it reading as a pasted-on screenshot. */ .hero-mascot { position: absolute; right: 120px; bottom: 27px; width: 150px; height: 98px; } .hero-mascot b { position: relative; display: flex; align-items: center; width: 92px; height: 40px; padding: 0 16px; border-radius: 10px; background: var(--white); box-shadow: 0 8px 20px rgba(0, 0, 0, .22); color: var(--dark); font-size: 12px; font-weight: 500; line-height: 18px; animation: mascot-nudge 3.6s ease-in-out infinite; } .hero-mascot b::after { content: ""; position: absolute; right: 16px; bottom: -5px; width: 12px; height: 12px; border-radius: 0 0 2px 0; background: var(--white); transform: rotate(45deg); } .hero-mascot::after { content: ""; position: absolute; top: 37px; left: 89px; width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle, rgba(126,203,255,.6), rgba(126,203,255,0) 70%); filter: blur(5px); animation: mascot-glow 3.6s ease-in-out infinite; } .hero-mascot img { position: absolute; z-index: 1; top: 32px; left: 84px; width: 66px; height: 66px; animation: mascot-float 3.6s ease-in-out infinite; } .hero-mascot:hover img, .hero-mascot:hover::after, .hero-mascot:focus-visible img { animation-duration: 1.2s; } /* the shadow rises and softens with the head — without it the sticker looks glued to the photo */ @keyframes mascot-float { 0%, 100% { transform: translateY(0) rotate(-4deg); filter: drop-shadow(0 5px 7px rgba(0, 0, 0, .5)); } 50% { transform: translateY(-9px) rotate(4deg); filter: drop-shadow(0 14px 15px rgba(0, 0, 0, .32)); } } @keyframes mascot-glow { 0%, 100% { opacity: .4; transform: scale(.88); } 50% { opacity: .85; transform: scale(1.1); } } @keyframes mascot-nudge { 0%, 66%, 84%, 100% { transform: translateY(0) scale(1); } 74% { transform: translateY(-4px) scale(1.05); } } .hero-stats .hero-stat-sub { color: rgba(240,235,224,.55); font-family: var(--font-display); font-size: 12px; line-height: 16px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 20px; margin: 0; } /* ---------- Ticker ---------- */ .ticker { display: flex; align-items: flex-start; height: 44px; padding-top: 12px; border-top: 1px solid var(--accent); background: var(--dark); overflow: hidden; } .ticker-track { display: flex; flex: none; gap: 48px; padding-left: 48px; white-space: nowrap; animation: ticker 60s linear infinite; } .ticker:hover .ticker-track { animation-play-state: paused; } .ticker-track span { color: rgba(255,255,255,.55); font-size: 13px; font-weight: 600; line-height: 19.5px; letter-spacing: .06em; } .ticker-track span::before { content: "✦"; margin-right: 8px; color: var(--accent); } @keyframes ticker { to { transform: translateX(-50%); } } /* ---------- 01 About ---------- */ .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; } .about-note { display: flex; align-items: center; gap: 16px; margin: 40px 0 0; color: var(--dim); font-size: 14px; line-height: 20px; letter-spacing: 0; } .about-figure { position: relative; margin: 0; } .about-figure img { display: block; width: 100%; height: 408px; border: 1px solid var(--border-soft); background: #1d293d; object-fit: cover; } .about-figure img + span { position: absolute; inset: 1px; background: linear-gradient(135deg, rgba(201,168,76,.15), rgba(201,168,76,0) 60%); pointer-events: none; } .about-figure figcaption { position: absolute; bottom: -24px; left: -24px; display: flex; flex-direction: column; width: 165px; height: 135px; padding: 20px 24px; border: 1px solid var(--accent); background: var(--white); } .about-figure figcaption strong { color: var(--accent); font-family: var(--font-display); font-size: 72px; font-weight: 400; line-height: 1; } .about-figure figcaption span { margin-top: 4px; color: var(--accent); font-size: 11.2px; font-weight: 600; line-height: 16.8px; letter-spacing: .18em; text-transform: uppercase; } /* ---------- 02 Key figures ---------- */ .sec-stats { padding: 64px 0; background: rgba(245,245,243,.6); } .stats-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; text-align: center; } .stats-row dd { margin: 0; } .stats-value { color: var(--accent); font-family: var(--font-display); font-size: clamp(40px, 4vw, 66px); font-weight: 400; line-height: 72px; } .stats-row dt { margin: 8px 0 4px; color: var(--dark); font-size: 14px; line-height: 20px; } .stats-sub { color: var(--dim); font-size: 12px; line-height: 16px; } /* ---------- Carousels ---------- */ .carousel { position: relative; } .carousel-track { display: flex; gap: 24px; padding: 0 24px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; } .carousel-track::-webkit-scrollbar { display: none; } .carousel-arrow { position: absolute; top: 50%; z-index: 2; width: 44px; height: 44px; border: 0; background: rgba(255,255,255,.2); backdrop-filter: blur(4px); color: var(--white); font-size: 22px; line-height: 1; cursor: pointer; transform: translateY(-50%); } .carousel-arrow:hover { background: rgba(255,255,255,.35); } .carousel-prev { left: 50px; } .carousel-next { right: 50px; } .carousel-dots { position: absolute; bottom: 60px; left: 50%; display: flex; gap: 6px; transform: translateX(-50%); } .carousel-dots button { width: 16px; height: 2px; padding: 0; border: 0; background: rgba(227,227,225,.6); cursor: pointer; } .carousel-dots button[aria-current="true"] { background: var(--white); } .carousel.is-static .carousel-arrow, .carousel.is-static .carousel-dots { display: none; } .gallery-carousel { background: var(--white); } /* side padding lets slide 1 centre too, so neighbours peek on both edges like the Figma */ .gallery-carousel .carousel-track { padding: 0 calc((100% - min(1200px, 100% - 48px)) / 2); } .carousel-slide { position: relative; flex: none; width: min(1200px, calc(100vw - 48px)); height: 692px; max-height: 68vh; margin: 0; scroll-snap-align: center; } .carousel-slide > img { width: 100%; height: 100%; object-fit: cover; } .carousel-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.4), rgba(0,0,0,0) 50%, rgba(0,0,0,.4)); pointer-events: none; } .carousel-slide figcaption { position: absolute; z-index: 1; top: 60px; right: 24px; left: 24px; text-align: center; } .carousel-slide figcaption strong { display: block; color: var(--white); font-size: 20px; font-weight: 600; line-height: 30px; } .carousel-slide figcaption span { color: rgba(255,255,255,.55); font-size: 16px; font-weight: 400; line-height: 22px; } /* ---------- 04 Agenda ---------- */ .sec-agenda { padding: 64px 0; background: rgba(245,245,243,.6); } .agenda-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px; } .agenda-card { position: relative; padding: 17px 20px 16px 27px; border: 1px solid var(--border-soft); border-radius: 10px; background: var(--white); } .agenda-card::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 6px; border-radius: 10px 0 0 10px; background: var(--accent); } .agenda-grid > .agenda-card:nth-child(2n)::before { background: var(--dark); } .agenda-grid > .agenda-card:nth-child(2n) .pill { background: var(--dark); } .agenda-card-meta { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; } .agenda-card-meta time { color: var(--mute); font-size: 12px; font-weight: 500; line-height: 18px; } .agenda-card h3 { margin: 0 0 6px; color: var(--dark); font-size: 16px; font-weight: 500; line-height: 20px; } .agenda-card ul { margin: 0; padding: 0; color: var(--dim); font-size: 14px; line-height: 26px; list-style: none; } /* ---------- 05 Committee ---------- */ .sec-committee { padding: 80px 0; background: var(--white); } .sec-committee > .sec-head { margin-bottom: 32px; } .committee-carousel .carousel-track { gap: 0; padding: 0; } /* the Figma committee slider steers with arrows only */ .committee-carousel .carousel-dots { display: none; } .committee-slide { position: relative; flex: none; width: min(640px, calc(100vw - 72px)); height: 336px; margin: 0; overflow: hidden; background: var(--dark); scroll-snap-align: center; } .committee-slide > img { width: 100%; height: 100%; object-fit: cover; } .committee-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.4)); pointer-events: none; } .committee-slide-body { position: absolute; z-index: 1; right: 32px; bottom: 32px; left: 32px; } .committee-slide-mark { display: block; margin-bottom: 8px; color: var(--white); font-size: 32px; line-height: 32px; } /* name, role pill and job title share one line in the Figma */ .committee-slide-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; } .committee-slide .pill { letter-spacing: .083em; } .committee-slide h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0; color: var(--white); font-size: 16px; font-weight: 700; line-height: 24px; } .committee-slide-role { margin: 0; color: var(--white); font-size: 12px; line-height: 20px; } .committee-slide-blurb { margin: 8px 0 0; color: var(--white); font-size: 14px; line-height: 26px; } .committee-roster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 48px; } .committee-roster h3 { margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border-soft); color: var(--accent); font-size: 12px; letter-spacing: .14em; } .committee-roster ul { margin: 0; padding: 0; list-style: none; } .committee-roster li { display: flex; flex-direction: column; gap: 2px; padding: 8px 0; } .committee-roster strong { color: var(--dark); font-size: 14px; } .committee-roster span { color: var(--dim); font-size: 12px; line-height: 1.6; } /* ---------- 06 Background ---------- */ .sec-background { padding: 64px 0; } /* ---------- 07 Invited ---------- */ .sec-invited { background: rgba(99,174,38,.9); } .sec-invited .eyebrow { color: var(--white); text-align: center; } .invited-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .invited-card { padding: 24px 20px; border: 1px solid rgba(255,255,255,.2); border-radius: 12px; } .invited-card-head { display: flex; align-items: center; gap: 6px; margin: 0 0 16px; } .invited-card-head span { color: rgba(255,255,255,.6); font-family: var(--font-display); font-size: 28px; font-weight: 400; line-height: 28px; } .invited-card-head strong { color: var(--white); font-size: 16px; font-weight: 600; line-height: 24px; } .invited-card ul { margin: 0; padding: 0; list-style: none; } .invited-card li { padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.78); font-size: 14px; font-weight: 400; line-height: 20px; } .invited-brands { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 20px; margin: 32px 0 0; padding: 32px 0 0; border-top: 1px solid var(--border-soft); list-style: none; } .invited-brands li { color: var(--white); font-size: 14px; font-weight: 800; line-height: 20px; letter-spacing: .04em; } /* ---------- 08 Organizers ---------- */ .sec-organizer { padding: 64px 0; background: rgba(245,245,243,.6); } .holder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 32px; } .holder-card { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 130px; padding: 21px; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--white); text-align: center; } .holder-card span { color: rgba(99,174,38,.6); font-family: var(--font-display); font-size: 35.2px; font-weight: 400; line-height: 34px; } .holder-card strong { margin-top: 12px; color: var(--dark); font-size: 14px; font-weight: 500; line-height: 20px; } .holder-card em { margin-top: 6px; color: var(--mute); font-size: 12px; font-style: normal; font-weight: 400; line-height: 16px; } .logo-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } /* 19.5px keeps five 102px tiles on one 588px row, as the Figma organizer row does. */ .logo-grid { display: flex; flex-wrap: wrap; gap: 20px; } .logo-grid figure { display: flex; flex: 1; align-items: center; justify-content: center; height: 92px; margin: 0; padding: 21px; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--white); } .logo-grid img { max-width: 50px; max-height: 50px; object-fit: contain; } .logo-grid figcaption { color: var(--dim); font-size: 10px; line-height: 1.4; text-align: center; } /* ---------- 09 Qiaojian Rongyao ---------- */ .qiao-top { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; margin-bottom: 36px; } .qiao-figure { margin: 0; } .qiao-figure img { width: 100%; height: 368px; object-fit: cover; } .qiao-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .qiao-card { padding: 21px; border: 1px solid var(--border-soft); border-radius: 16px; background: var(--white); } .qiao-card span { color: rgba(99,174,38,.3); font-family: var(--font-display); font-size: 28px; font-weight: 400; line-height: 28px; } .qiao-card h3 { margin: 12px 0 8px; color: var(--dark); font-size: 16px; font-weight: 500; line-height: 24px; } .qiao-card p { margin: 0; color: var(--dim); font-size: 14px; line-height: 26px; } /* ---------- 10 Outcomes ---------- */ .sec-outcomes { padding: 64px 0; background: var(--dark); } .outcomes-grid { display: grid; grid-template-columns: 282px 1fr; gap: 102px; } .outcomes-aside h2 { margin: 0; color: var(--white); font-size: 40px; font-weight: 500; line-height: 44px; } .outcomes-card { padding: 16px 20px; border-radius: 12px; background: var(--accent); } .outcomes-card p { margin: 0 0 8px; color: rgba(255,255,255,.75); font-size: 12px; line-height: 16px; letter-spacing: .11em; text-transform: uppercase; } .outcomes-card strong { display: block; color: var(--white); font-size: 16px; font-weight: 500; line-height: 24px; } .outcomes-card span { display: block; margin-top: 4px; color: rgba(255,255,255,.7); font-size: 14px; font-weight: 400; line-height: 20px; } .outcomes-list { margin: 0; padding: 0; list-style: none; } .outcomes-list li { display: grid; grid-template-columns: 52px 1fr; gap: 24px; padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,.08); } .outcomes-list li:last-child { border-bottom: 0; } .outcomes-list li > span { color: rgba(99,174,38,.3); font-family: var(--font-display); font-size: 35.2px; font-weight: 400; line-height: 35.2px; text-align: center; } .outcomes-list strong { display: block; color: var(--white); font-size: 16px; font-weight: 500; line-height: 24px; } .outcomes-list em { display: block; margin-top: 6px; color: rgba(255,255,255,.4); font-size: 14px; font-style: normal; font-weight: 400; line-height: 26px; } /* ---------- 11 Venue banner ---------- */ .venue-banner { position: relative; display: flex; align-items: center; justify-content: center; min-height: 408px; padding: 72px 0; overflow: hidden; background: #0a0c14; text-align: center; } .venue-banner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .4; } /* the green sub-line sits at mid luminance, so it needs the photo pushed down under it — a centred scrim instead of a flat one keeps the skyline visible at the edges */ .venue-banner::after { content: ""; position: absolute; inset: 0; background: radial-gradient(62% 72% at 50% 50%, rgba(8,10,16,.58), rgba(8,10,16,0) 100%); } .venue-banner-body { position: relative; z-index: 1; } .venue-banner h2 { margin: 0 0 12px; color: var(--panel); font-family: var(--font-display); font-size: clamp(40px, 5vw, 60px); font-weight: 400; line-height: 1; } .venue-banner-sub { margin: 0 0 8px; color: var(--accent); font-size: 20px; font-weight: 400; line-height: 28px; } .venue-banner-meta { margin: 0; color: rgba(240,235,224,.8); font-size: 14px; font-weight: 400; line-height: 20px; } /* ---------- 12 Registration ---------- */ .sec-register { background: rgba(240,248,232,.9); } .register-grid { display: grid; grid-template-columns: 1fr 486px; gap: 102px; align-items: start; } .sec-register h2 span { color: var(--accent); } .contact-card { position: relative; display: grid; grid-template-columns: 96px 1fr; gap: 22px; margin-top: 32px; padding: 24px; overflow: hidden; border: 1px solid var(--border-soft); border-radius: 16px; background: var(--white); box-shadow: 0 14px 34px rgba(17, 17, 17, .05); } .contact-card::before { content: ""; position: absolute; top: 0; left: 0; width: 4px; height: 100%; background: var(--accent); } .contact-photo { width: 96px; height: 112px; border-radius: 14px; object-fit: cover; background: var(--panel-soft); box-shadow: 0 8px 20px rgba(17, 17, 17, .14); } .contact-id { align-self: center; min-width: 0; } .contact-card h3 { margin: 0; color: var(--dark); font-size: 20px; font-weight: 600; line-height: 30px; } .contact-role { margin: 2px 0 0; color: var(--accent); font-size: 12px; font-weight: 500; line-height: 18px; letter-spacing: .08em; text-transform: uppercase; } .contact-org { margin: 8px 0 0; color: var(--dim); font-size: 14px; line-height: 20px; } .contact-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; grid-column: 1 / -1; margin: 20px 0 0; padding-top: 18px; border-top: 1px solid var(--border-soft); } .contact-email { margin: 0 auto 0 0; color: var(--dim); font-size: 13px; line-height: 20px; transition: color .2s; } .contact-email:hover { color: var(--accent); } .register-form { padding: 21px; border: 1px solid var(--border-soft); border-radius: 16px; background: var(--white); } .register-form h3 { margin: 0 0 20px; color: var(--dark); font-size: 18px; font-weight: 500; line-height: 26px; } .register-form label { display: block; margin-bottom: 12px; } .register-form label > span { display: block; margin-bottom: 6px; color: var(--dim); font-size: 12px; font-weight: 500; line-height: 18px; } .register-form label > span b { color: #ff3b3b; font-weight: inherit; } .register-form input:not([type="checkbox"]), .register-form textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--border-soft); border-radius: 8px; background: var(--white); font-size: 12px; } .register-form input::placeholder, .register-form textarea::placeholder { color: rgba(102,102,96,.5); } .register-form input:focus, .register-form textarea:focus { border-color: var(--accent); outline: none; } .register-form textarea { min-height: 80px; resize: vertical; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .register-form .consent { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 18px; } .register-form .consent input { width: 13px; height: 13px; margin: 4px 0 0; accent-color: var(--accent); } .register-form .consent span { color: var(--dim); font-size: 12px; font-weight: 400; line-height: 20px; } .honeypot { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; } .form-note { margin: 14px 0 0; font-size: 13px; line-height: 20px; } .form-note:empty { display: none; } .form-note.is-busy { color: var(--mute); } .form-note.is-ok { color: var(--accent); font-weight: 500; } .form-note.is-error { color: #c0392b; } /* ---------- 13 News ---------- */ .news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .news-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--border-soft); border-radius: 16px; background: var(--white); transition: border-color .2s, transform .2s; } .news-card:hover { border-color: var(--accent); transform: translateY(-3px); } .news-card-media { display: block; height: 200px; background: var(--panel-alt); } .news-card-media img { width: 100%; height: 100%; object-fit: cover; } .news-card-body { display: flex; flex: 1; flex-direction: column; gap: 12px; padding: 16px 20px; } .news-card-meta { display: flex; align-items: center; gap: 8px; } .news-card-meta em { padding: 3px 9px; border: 1px solid var(--accent); color: var(--accent); font-size: 12px; font-style: normal; font-weight: 500; line-height: 14px; letter-spacing: .083em; text-transform: uppercase; } .news-card-meta time { color: var(--mute); font-size: 12px; font-weight: 400; line-height: 16px; } .news-card strong { color: var(--dark); font-size: 14px; font-weight: 500; line-height: 24px; } .news-card b { margin-top: auto; color: var(--accent); font-size: 12px; font-weight: 500; line-height: 16px; letter-spacing: .168em; text-transform: uppercase; } /* ---------- Footer ---------- */ .sitefoot { border-top: 3px solid var(--accent); background: var(--dark); } .sitefoot-inner { padding: 32px var(--gutter); } .sitefoot-top { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; } .brandmark-light strong { color: var(--accent-red); } .brandmark-light span { color: rgba(255,255,255,.55); } .brandmark-light b { color: var(--white); } .brandmark-light i { color: rgba(255,255,255,.35); } .sitefoot-tagline { margin: 16px 0 0; max-width: 420px; color: rgba(255,255,255,.38); font-size: 13px; line-height: 24.7px; } .sitefoot-tagline span { display: block; } .sitefoot-contact { display: flex; flex-direction: column; margin: 16px 0 0; color: rgba(255,255,255,.3); font-size: 12px; line-height: 22px; } .sitefoot-contact a:hover { color: var(--accent); } .sitefoot-social { display: flex; gap: 8px; margin: 16px 0 0; } .sitefoot-social span { padding: 5px 12px; border: 1px solid rgba(255,255,255,.35); color: rgba(255,255,255,.38); font-size: 12px; } .sitefoot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .sitefoot-col h3 { margin: 0 0 16px; color: var(--white); font-size: 12px; font-weight: 600; line-height: 18px; letter-spacing: .08em; } .sitefoot-col ul { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; } .sitefoot-col a, .sitefoot-col span { color: rgba(255,255,255,.38); font-size: 14px; font-weight: 400; line-height: 20px; } .sitefoot-col a:hover { color: var(--accent); } .sitefoot-partners { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.07); } .sitefoot-partners h3 { margin: 0 0 16px; color: rgba(255,255,255,.25); font-size: 12px; font-weight: 600; line-height: 16px; letter-spacing: .128em; } .sitefoot-partners ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } /* min-height, not height: a full-width pill on a phone wraps to two or three lines */ .sitefoot-partners li { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 12px; border: 1px solid rgba(255,255,255,.35); } .sitefoot-partners em { color: var(--accent); font-size: 10px; font-style: normal; font-weight: 600; line-height: 15px; letter-spacing: .08em; } .sitefoot-partners span { padding-left: 10px; border-left: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.5); font-size: 12px; } .sitefoot-partners i { color: rgba(255,255,255,.25); font-size: 10px; font-style: normal; } .sitefoot-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.07); } .sitefoot-bottom p { margin: 0; color: rgba(255,255,255,.22); font-size: 12px; line-height: 1.7; } .sitefoot-bottom p:last-child { color: rgba(255,255,255,.18); } /* ================================================================ News index + article pages (same atoms as the 2026 home page) ================================================================ */ .page-hero { padding: 64px 0 56px; border-bottom: 1px solid var(--border-soft); background: rgba(245,245,243,.6); } .page-hero h1 { max-width: 900px; margin: 0 0 20px; color: var(--dark); font-size: clamp(32px, 4.2vw, 48px); font-weight: 500; line-height: 1.2; } .page-hero .rule { margin: 0 0 24px; } .page-hero .body-lg { max-width: 680px; margin: 0; } .back-link { display: inline-block; margin: 0 0 32px; color: var(--dim); font-size: 13px; line-height: 20px; transition: color .2s, transform .2s; } .back-link:hover { color: var(--accent); transform: translateX(-3px); } .filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 32px; } .filters a { padding: 7px 16px; border: 1px solid var(--border-soft); border-radius: 999px; color: var(--dim); font-size: 13px; font-weight: 500; line-height: 18px; transition: border-color .2s, background-color .2s, color .2s; } .filters a:hover { border-color: var(--accent); color: var(--accent); } .filters a.is-active { border-color: var(--accent); background: var(--accent); color: var(--white); } .news-empty { margin: 0; color: var(--dim); font-size: 14px; } /* ---------- past editions (list) ---------- */ .sec-editions { background: rgba(245,245,243,.6); } .sec-editions .sec-head .body-lg { max-width: 680px; margin: 16px 0 0; } .edition { padding: 40px 0; border-top: 1px solid var(--border); } .edition-lead { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 40px; align-items: start; } .edition-cover { margin: 0; } .edition-cover img { width: 100%; height: auto; border: 1px solid var(--border-soft); background: var(--white); } .edition-cover figcaption { display: flex; align-items: baseline; gap: 8px; margin-top: 12px; color: var(--accent); } .edition-cover figcaption span { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } .edition-cover figcaption strong { font-family: var(--font-display); font-size: 24px; font-weight: 400; line-height: 1; } .edition-meta { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; color: var(--mute); font-size: 12px; line-height: 18px; } .edition-copy h3 { margin: 0 0 8px; color: var(--dark); font-size: 26px; font-weight: 500; line-height: 34px; } .edition-theme { margin: 0 0 20px; color: var(--accent); font-family: var(--font-display); font-size: 17px; font-weight: 400; line-height: 26px; } .edition-copy .body-sm { margin-bottom: 14px; } .edition-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 24px 0 0; padding-top: 18px; border-top: 1px solid var(--border-soft); } .edition-facts dt { color: var(--mute); font-size: 11px; line-height: 16px; letter-spacing: .1em; text-transform: uppercase; } .edition-facts dd { margin: 6px 0 0; color: var(--dark); font-size: 14px; font-weight: 500; line-height: 20px; } /* topics + outcomes stack on the left so the long guest list gets a column of its own */ .edition-detail { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; margin-top: 36px; } .edition-detail > section:nth-child(2) { grid-row: span 2; } .edition-guests { columns: 2; column-gap: 32px; } .edition-guests li { break-inside: avoid; } .edition-detail h4 { margin: 0 0 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border-soft); color: var(--accent); font-size: 12px; font-weight: 500; line-height: 18px; letter-spacing: .14em; text-transform: uppercase; } .edition-detail ol, .edition-detail ul { margin: 0; padding: 0; list-style: none; } .edition-detail li { padding: 7px 0; color: var(--dim); font-size: 13px; line-height: 22px; } .edition-topics { counter-reset: edition-topic; } .edition-topics li { position: relative; padding-left: 28px; counter-increment: edition-topic; } .edition-topics li::before { content: "0" counter(edition-topic); position: absolute; top: 7px; left: 0; color: rgba(99,174,38,.7); font-family: var(--font-display); font-size: 13px; } .edition-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 32px; } /* ---------- article ---------- */ .article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 20px; } .article-meta em { padding: 3px 9px; border: 1px solid var(--accent); color: var(--accent); font-size: 12px; font-style: normal; font-weight: 500; line-height: 14px; letter-spacing: .083em; text-transform: uppercase; } .article-meta time { color: var(--mute); font-size: 12px; line-height: 16px; } .article-cover { margin: 0; padding-top: 40px; } .article-cover img { width: 100%; height: auto; max-height: 520px; object-fit: cover; } .article-body { max-width: 720px; margin: 0 auto; padding: 56px 0 64px; color: var(--dim); font-size: 15px; line-height: 1.9; } .article-foot { padding: 0 0 72px; } .article-foot .back-link { margin: 0; } .richtext h2, .richtext h3 { color: var(--dark); font-weight: 500; } .richtext h2 { margin: 2em 0 .7em; font-size: 24px; line-height: 1.3; } .richtext h3 { margin: 1.8em 0 .6em; font-size: 18px; line-height: 1.4; } .richtext p { margin: 0 0 1.35em; } .richtext ul, .richtext ol { margin: 0 0 1.35em; padding-left: 1.2em; } .richtext li { margin-bottom: .5em; } .richtext a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .richtext img { display: block; max-width: 100%; height: auto; margin: 1.9em auto; } /* ---------- past edition (detail page) ---------- */ .edition-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: start; } .edition-hero h1 { margin: 0 0 12px; font-size: clamp(30px, 3.8vw, 44px); } .edition-hero .edition-theme { font-size: 19px; line-height: 28px; } .edition-mark { display: flex; align-items: baseline; gap: 12px; margin: 0 0 18px; color: var(--accent); } .edition-mark span { font-size: 12px; font-weight: 600; letter-spacing: .168em; text-transform: uppercase; } .edition-mark strong { font-family: var(--font-display); font-size: 44px; font-weight: 400; line-height: 1; } .edition-hero-cover { margin: 0; } .edition-hero-cover img { width: 100%; height: auto; border: 1px solid var(--border-soft); box-shadow: 0 18px 40px rgba(17,17,17,.12); } .edition-hero-cover figcaption { margin-top: 12px; color: var(--mute); font-size: 12px; line-height: 18px; } .edition-record { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 56px; align-items: start; } .edition-record .article-body { margin: 0; } .edition-aside > div { position: sticky; top: 92px; display: flex; flex-direction: column; align-items: flex-start; margin-top: 56px; padding-top: 20px; border-top: 2px solid var(--accent); } .edition-aside .eyebrow { margin-bottom: 14px; } .edition-aside strong { margin-bottom: 14px; color: var(--dark); font-family: var(--font-display); font-size: 36px; font-weight: 400; line-height: 1; } .edition-aside span { color: var(--dim); font-size: 13px; line-height: 22px; } .edition-aside .btn { margin-top: 20px; } .sec-gallery { padding-top: 0; } .sec-gallery .sec-head { margin-bottom: 20px; } .sec-gallery .eyebrow { margin: 0; } .edition-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; } .edition-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .sec-guest-index { background: rgba(245,245,243,.6); } .sec-guest-index .sec-head { margin-bottom: 24px; } .guest-index { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; margin: 0; padding: 0; list-style: none; } .guest-index li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--border-soft); color: var(--dark); font-size: 13px; line-height: 22px; } .guest-index li span { color: rgba(99,174,38,.7); font-family: var(--font-display); font-size: 13px; } .edition-next { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; padding-top: 32px; border-top: 1px solid var(--border-soft); } .edition-next-other { max-width: 420px; text-align: right; } .edition-next-other span { display: block; margin-bottom: 8px; color: var(--mute); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; } .edition-next-other strong { display: block; color: var(--dark); font-size: 17px; font-weight: 500; line-height: 26px; transition: color .2s, transform .2s; } .edition-next-other:hover strong { color: var(--accent); transform: translateX(4px); } a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid #006da5; outline-offset: 3px; } @media (max-width: 1180px) { .sitehead-inner { gap: 18px; } .sitenav { gap: 14px; } .sitenav a { font-size: 12px; } .outcomes-grid { gap: 48px; } .register-grid { grid-template-columns: 1fr; gap: 48px; } .register-form { max-width: 560px; } } @media (max-width: 980px) { .sitehead-inner { grid-template-columns: auto 1fr; } .sitenav { justify-content: flex-end; } .nav-cta { display: none; } .invited-grid, .qiao-grid, .committee-roster { grid-template-columns: 1fr 1fr; } .stats-row { grid-template-columns: 1fr 1fr; row-gap: 32px; } .news-grid { grid-template-columns: 1fr 1fr; } .logo-groups { grid-template-columns: 1fr; gap: 40px; } .outcomes-grid { grid-template-columns: 1fr; gap: 40px; } .sitefoot-top { grid-template-columns: 1fr; gap: 40px; } .edition-hero-grid { grid-template-columns: 1fr; gap: 36px; } .edition-hero-cover { max-width: 300px; } .edition-record { grid-template-columns: 1fr; gap: 24px; } .edition-aside > div { position: static; } } @media (max-width: 760px) { .sitehead-inner { min-height: 58px; grid-template-columns: 1fr auto auto; gap: 14px; } .brandmark strong { font-size: 20px; } /* padding, not size: these are the two thumb targets in the header and 18px tall is not tappable */ .menu-button { display: block; padding: 12px 0; border: 0; background: transparent; font-size: 12px; font-weight: 700; } .language-switcher a { padding: 11px 2px; } .sitenav { position: absolute; top: 58px; right: 0; left: 0; justify-self: stretch; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 10px 20px 22px; border-bottom: 1px solid var(--border); background: #fff; } .sitenav.is-open { display: flex; } .sitenav a { padding: 12px 0; border-bottom: 1px solid var(--border); font-size: 13px; } .sitenav a::after { display: none; } .sec, .sec-stats, .sec-committee, .sec-background, .sec-organizer, .sec-outcomes { padding: 56px 0; } .sec h2, .sec-committee h2, .outcomes-aside h2 { font-size: 26px; line-height: 1.3; } .sec h2 span, .sec-committee h2 span { font-size: 18px; line-height: 26px; } /* bottom padding leaves the mascot a clear band under the stacked CTA buttons */ .hero { min-height: 640px; padding: 110px 0 128px; } /* the desktop shade fades left-to-right behind copy that only fills the left half; full-width mobile copy needs it top-to-bottom instead or the bright glass roof eats the green */ .hero-shade { background: linear-gradient(180deg, rgba(10,10,10,.8), rgba(10,10,10,.86)); } .hero-stats { gap: 18px 24px; } .hero-lead { font-size: 17px; line-height: 28px; } .hero-lead-alt { margin-bottom: 30px; font-size: 15px; line-height: 24px; } .hero-actions .btn { flex: 1 1 100%; } .hero-shape { display: none; } .about-grid { grid-template-columns: 1fr; gap: 44px; } .about-figure figcaption { left: 0; width: 132px; height: 108px; } .about-figure figcaption strong { font-size: 40px; } .carousel-slide { height: 400px; } /* the caption only clears a bright slide on a phone with a heavier top scrim */ .carousel-slide::after { background: linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.05) 55%, rgba(0,0,0,.45)); } .carousel-slide figcaption span { color: rgba(255,255,255,.8); } .committee-slide { height: 300px; } .carousel-arrow { width: 36px; height: 36px; font-size: 18px; } .carousel-prev { left: 10px; } .carousel-next { right: 10px; } /* a 300px-tall slide puts the vertically-centred arrows straight through the name line */ .committee-carousel .carousel-arrow { top: 12px; transform: none; } .agenda-grid { grid-template-columns: 1fr; } .agenda-grid > .agenda-card:nth-child(2n)::before { background: var(--accent); } .agenda-grid > .agenda-card:nth-child(2n) .pill { background: var(--accent); } /* .stats-row deliberately stays 2-up from the 980px rule — four full-width numbers is dead scroll */ .invited-grid, .qiao-grid, .committee-roster, .holder-grid, .news-grid, .field-row { grid-template-columns: 1fr; } .invited-brands { justify-content: flex-start; } .qiao-top { grid-template-columns: 1fr; gap: 28px; } .qiao-figure img { height: 240px; } /* grid instead of flex so a short last row keeps the same tile width */ .logo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .sec-head-split { flex-direction: column; align-items: flex-start; } .venue-banner { min-height: 320px; } /* the hero's extra bottom padding above is what keeps this off the stacked CTA buttons */ .hero-mascot { right: 12px; transform: scale(.8); transform-origin: bottom right; } .contact-card { grid-template-columns: 76px 1fr; gap: 16px; padding: 20px; } .contact-photo { width: 76px; height: 90px; } .contact-card h3 { font-size: 18px; line-height: 28px; } .contact-email { flex: 1 1 100%; margin: 0; } .contact-actions .btn { flex: 1 1 auto; justify-content: center; } /* anything under 16px makes iOS Safari zoom the whole page the moment a field takes focus */ .register-form input:not([type="checkbox"]), .register-form textarea { padding: 12px; font-size: 16px; } .register-form .consent input { width: 18px; height: 18px; margin-top: 2px; } .sitefoot-cols { grid-template-columns: 1fr 1fr; } .sitefoot-inner { padding-top: 44px; } .page-hero { padding: 48px 0 44px; } .back-link { margin-bottom: 24px; } .edition { padding: 32px 0; } .edition-lead, .edition-hero-grid, .edition-record, .edition-detail { grid-template-columns: 1fr; gap: 28px; } .edition-detail > section:nth-child(2) { grid-row: auto; } .edition-guests { columns: 1; } .edition-cover { max-width: 220px; } .edition-copy h3 { font-size: 22px; line-height: 30px; } .edition-hero .edition-theme { font-size: 17px; line-height: 26px; } .edition-mark strong { font-size: 36px; } .edition-facts { grid-template-columns: 1fr 1fr; } .edition-aside > div { position: static; margin-top: 40px; } .edition-record .article-body { padding-top: 8px; } .article-cover { padding-top: 28px; } .article-body { padding: 36px 0 44px; } .article-foot { padding-bottom: 56px; } /* 27 archive photos one-per-row is ~7000px of scroll on a phone; two up keeps it walkable */ .edition-gallery { grid-template-columns: 1fr 1fr; gap: 8px; } .guest-index { grid-template-columns: 1fr; } .edition-next { align-items: flex-start; flex-direction: column; gap: 28px; } .edition-next-other { text-align: left; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } /* iteration-count too, or an infinite loop (ticker, mascot) just spins at .01ms and flickers */ *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } }