/* ClawCon Shanghai ยท Bilingual Agenda โ€” styles Mobile-first. Bilingual swap entirely via CSS based on . */ :root { --brand-red: #E64523; --brand-yellow: #F7FAA2; --brand-red-tint: #fff5f0; --cream: #FFF8EC; --bg: #FFFFFF; --text-1: #1A1A1A; --text-2: #555555; --text-3: #888888; --text-4: #aaaaaa; --line: #f3f3f3; --line-2: #f8f8f8; --chip-border: #ffd1bf; --tbd-bg: #fffbe6; --tbd-fg: #b08800; --tbd-border: #ffe58f; --display-font: Georgia, "Playfair Display", "Times New Roman", serif; --body-font: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", system-ui, sans-serif; --mono-font: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; } /* ============= Reset / Base ============= */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text-1); font-family: var(--body-font); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; display: block; } button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; padding: 0; } ul { margin: 0; padding: 0; list-style: none; } /* Page wrapper bounded for desktop */ .page { max-width: 480px; margin: 0 auto; background: var(--bg); position: relative; /* faint shadow on desktop to suggest "phone frame" */ } @media (min-width: 600px) { body { background: #f0eee8; padding: 16px 0; } .page { box-shadow: 0 8px 40px rgba(0,0,0,0.08); border-radius: 8px; overflow: hidden; } } /* ============= Bilingual swap ============= Each pair of [data-lang="zh"] + [data-lang="en"] siblings: the one matching stays primary (defaults from its class), the other becomes a small dim "secondary line" below. Strategy: - Don't restyle the PRIMARY (let class defaults apply, no override). - Style only the SECONDARY language with smaller / dimmer / lower order. */ [data-lang] { display: block; } /* Containers that should swap order use flex-column */ .topic-row, .meta-card .row, .speaker, .body-text, .signin-label, .signin-loc { display: flex; flex-direction: column; } .meta-card .row .label { order: -1; } /* label always first */ /* Secondary language: applied to the [data-lang] that does NOT match */ html[lang="zh"] [data-lang="en"], html[lang="en"] [data-lang="zh"] { font-size: 0.78em; color: var(--text-3); font-weight: 400; margin-top: 2px; letter-spacing: 0.1px; order: 1; } /* Primary language: ensure it appears first (above secondary) */ html[lang="zh"] [data-lang="zh"], html[lang="en"] [data-lang="en"] { order: 0; } /* Hero meta-card override: secondary should be readable white-on-red, not gray */ html[lang="zh"] .meta-card .primary[data-lang="en"], html[lang="en"] .meta-card .primary[data-lang="zh"] { font-size: 10.5px; color: rgba(255, 255, 255, 0.72); margin-top: 3px; } /* Inline contexts (chips, map-caption, venue titles) โ€” show ONLY one language at a time. The .inline-bilingual marker class makes [data-lang] children behave inline-only. */ html[lang="zh"] .inline-bilingual [data-lang="en"], html[lang="en"] .inline-bilingual [data-lang="zh"] { display: none; } html[lang="zh"] .inline-bilingual [data-lang="zh"], html[lang="en"] .inline-bilingual [data-lang="en"] { display: inline; font-size: inherit; color: inherit; font-weight: inherit; margin: 0; letter-spacing: inherit; order: 0; } /* ============= Hero ============= */ .hero { background: var(--brand-red); color: #fff; padding: 56px 22px 28px; position: relative; overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 12px; border: 1px dashed rgba(255,255,255,0.32); border-radius: 4px; pointer-events: none; } .lang-toggle { position: absolute; top: 16px; right: 16px; background: #fff; color: var(--brand-red); border-radius: 999px; padding: 6px 12px; font-size: 11px; font-weight: 700; letter-spacing: 0.5px; z-index: 2; user-select: none; -webkit-tap-highlight-color: transparent; } .lang-toggle .lang-opt { padding: 0; opacity: 0.45; transition: opacity 0.15s; } .lang-toggle .lang-opt.active { opacity: 1; font-weight: 800; } .lang-toggle .lang-sep { margin: 0 5px; opacity: 0.5; } .hero-tag { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; opacity: 0.85; margin-bottom: 8px; position: relative; z-index: 1; } .lockup { font-family: var(--display-font); font-style: italic; font-weight: 400; font-size: 44px; line-height: 0.95; letter-spacing: -1px; text-transform: lowercase; color: var(--brand-yellow); position: relative; z-index: 1; margin: 0; } .meta-card { margin-top: 20px; position: relative; z-index: 1; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.25); border-radius: 8px; padding: 12px 14px; } .meta-card .row { font-size: 11px; line-height: 1.45; color: rgba(255,255,255,0.95); } .meta-card .row + .row { margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(255,255,255,0.25); } .meta-card .label { font-size: 9px; letter-spacing: 1.5px; text-transform: uppercase; opacity: 0.75; margin-bottom: 3px; display: block; } .meta-card .primary { font-size: 13px; font-weight: 500; color: #fff; margin: 0; } .meta-card .secondary { font-size: 10.5px; opacity: 0.85; margin-top: 3px; white-space: pre-line; } /* meta-card uses bilingual swap โ€” secondary white-ish on red bg */ html[lang="zh"] .meta-card .primary[data-lang="en"], html[lang="en"] .meta-card .primary[data-lang="zh"] { font-size: 10.5px; font-weight: 400; color: rgba(255, 255, 255, 0.7); opacity: 1; margin-top: 3px; } /* ============= Sign-in bar (always visible, never collapses) ============= */ .signin { background: var(--brand-red-tint); padding: 14px 22px; border-bottom: 1px solid var(--chip-border); display: flex; gap: 14px; align-items: flex-start; } .signin-time { font-family: var(--mono-font); font-size: 12px; color: var(--brand-red); font-weight: 700; flex-shrink: 0; padding-top: 1px; font-feature-settings: "tnum"; } .signin-body { flex: 1; } .signin-label { font-size: 13px; font-weight: 600; color: var(--text-1); } .signin-loc { font-size: 11px; color: var(--text-3); margin-top: 2px; } /* ============= Section: Map (collapsible) ============= */ .map-section { background: var(--bg); border-bottom: 1px solid var(--line); } .map-section[open] summary .arrow { transform: rotate(180deg); } .map-section summary { list-style: none; padding: 14px 22px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: 600; color: var(--brand-red); -webkit-tap-highlight-color: transparent; } .map-section summary::-webkit-details-marker { display: none; } .map-section .arrow { font-size: 11px; color: var(--brand-red); transition: transform 0.2s; } .map-body { padding: 0 14px 18px; } .map-body img { width: 100%; height: auto; border: 1px solid #eee; border-radius: 6px; } .map-caption { font-size: 11px; color: var(--text-3); margin-top: 8px; line-height: 1.6; } .map-caption strong { color: var(--brand-red); font-weight: 700; } /* ============= Venue (collapsible) ============= */ .venue { border-bottom: 1px solid var(--line); } .venue[open] .venue-arrow { transform: rotate(180deg); } .venue summary { list-style: none; padding: 16px 22px; cursor: pointer; -webkit-tap-highlight-color: transparent; outline: none; } .venue summary::-webkit-details-marker { display: none; } .venue summary:focus-visible .venue-name { outline: 2px solid var(--brand-red); outline-offset: 2px; border-radius: 2px; } .venue-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .venue-head-left { flex: 1; min-width: 0; } .venue-name { font-size: 20px; font-weight: 600; color: var(--brand-red); letter-spacing: -0.3px; line-height: 1.15; margin: 0; } /* venue-name uses inline-bilingual semantics implicitly */ html[lang="zh"] .venue-name [data-lang="en"], html[lang="en"] .venue-name [data-lang="zh"] { display: none; } html[lang="zh"] .venue-name [data-lang="zh"], html[lang="en"] .venue-name [data-lang="en"] { display: inline; font-size: inherit; color: inherit; font-weight: inherit; margin: 0; letter-spacing: inherit; order: 0; } .venue-name .emoji { margin-right: 6px; } .venue-loc-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--brand-red-tint); border: 1px solid var(--chip-border); color: var(--brand-red); font-size: 10px; padding: 3px 8px 3px 4px; border-radius: 999px; font-weight: 600; margin-top: 8px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .venue-loc-chip .dot { width: 16px; height: 16px; background: var(--brand-red); color: #fff; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; flex-shrink: 0; } .venue-loc-chip .loc-name { font-style: normal; } .venue-time { font-size: 11px; color: var(--text-3); margin-top: 4px; font-family: var(--mono-font); font-feature-settings: "tnum"; } .venue-arrow { color: #ccc; font-size: 12px; transition: transform 0.2s; flex-shrink: 0; margin-top: 4px; } .venue-body { padding: 0 22px 18px; } .venue-divider { height: 2px; background: linear-gradient(to right, var(--brand-red) 0, var(--brand-red) 8%, var(--line) 8%, var(--line) 100%); margin-bottom: 6px; } .venue-note { font-size: 11px; color: var(--text-3); margin: 6px 0 8px; font-style: italic; } /* ============= Session row ============= */ .session { display: grid; grid-template-columns: 64px 1fr; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line-2); } .session:last-child { border-bottom: none; } .session-time { font-family: var(--mono-font); font-size: 11px; color: var(--text-3); padding-top: 2px; font-feature-settings: "tnum"; white-space: nowrap; } .session-time .lab-tag { display: inline-block; font-family: var(--body-font); font-size: 11px; font-weight: 600; color: var(--brand-red); } .session-body { min-width: 0; } .topic-row { /* set in bilingual rules above */ } .topic-row .topic-zh, .topic-row .topic-en { display: block; line-height: 1.4; } .topic-zh, .topic-en { font-size: 13.5px; font-weight: 500; } .body-text { display: block; font-size: 12px; color: var(--text-2); margin-top: 3px; line-height: 1.4; } .speaker { font-size: 11px; color: var(--text-2); margin-top: 5px; line-height: 1.45; } .speaker-list { display: inline; } .tbd { display: inline-block; background: var(--tbd-bg); color: var(--tbd-fg); border: 1px solid var(--tbd-border); font-size: 9px; padding: 1px 5px; border-radius: 3px; font-weight: 600; letter-spacing: 0.5px; margin-left: 6px; vertical-align: 1px; } /* AfterParty special-case row styling */ .afterparty-row { background: var(--cream); padding: 14px 16px; border-radius: 8px; border: 1px dashed var(--brand-red); margin-top: 8px; } .afterparty-row .topic-row .topic-zh, .afterparty-row .topic-row .topic-en { color: var(--brand-red); font-weight: 600; } /* ============= Footer note ============= */ .footer-note { padding: 14px 22px; background: #fafafa; font-size: 11px; color: var(--text-3); text-align: center; border-top: 1px solid var(--line); } /* ============= Long poster bottom ============= */ .poster-block { line-height: 0; } .poster-block img { width: 100%; height: auto; display: block; } /* ============= Skip-link / a11y ============= */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Reduce motion for users who prefer it */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; } }