/* ========================================================================== spreadingabundance.com — Eugene Seah, bilingual keynote speaker Design tokens are the source of truth. Restraint over decoration. ========================================================================== */ /* --- Tokens ------------------------------------------------------------- */ :root { --ink: #16161A; --ink-soft: #3A3A40; --paper: #F7F4EF; --paper-2: #EFEAE1; --night: #0E0E10; --line: #DED6C8; --accent: #B0894F; --accent-deep: #8C6A3C; --accent-ink: #7A5A31; /* small-text-safe accent: 5.4:1 on --paper */ --line-dark: rgba(247, 244, 239, 0.14); --paper-soft: rgba(247, 244, 239, 0.72); --font-display: "Fraunces", Georgia, "Times New Roman", serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --maxw: 1200px; --gutter: clamp(1.25rem, 5vw, 3.5rem); --section-y: clamp(5rem, 10vw, 9rem); --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --dur: 240ms; --z-header: 70; --z-menu: 60; --z-lightbox: 90; } /* Chinese font stacks swap in when carries .lang-zh */ html.lang-zh { --font-display: "Noto Serif SC", "Songti SC", "SimSun", serif; --font-body: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", sans-serif; } /* --- Reset -------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.7; font-weight: 400; overflow-x: hidden; -webkit-font-smoothing: antialiased; } img, video, svg { max-width: 100%; height: auto; display: block; } button, input, select, textarea { font: inherit; color: inherit; } a { color: inherit; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; margin: 0; text-wrap: balance; } html.lang-zh h1, html.lang-zh h2, html.lang-zh h3, html.lang-zh h4 { font-weight: 700; letter-spacing: 0; line-height: 1.28; } p { margin: 0; } /* --- Focus & skip link -------------------------------------------------- */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } .section--dark :focus-visible { outline-color: #D8B274; } .skip-link { position: absolute; left: var(--gutter); top: 0.5rem; transform: translateY(-160%); background: var(--ink); color: var(--paper); padding: 0.65rem 1rem; z-index: 100; text-decoration: none; font-size: 0.85rem; letter-spacing: 0.06em; transition: transform var(--dur) var(--ease); } .skip-link:focus-visible { transform: translateY(0); } /* --- Layout primitives -------------------------------------------------- */ .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); } .container--wide { max-width: 1440px; } .section { padding-block: var(--section-y); position: relative; } .section--dark { background: var(--night); color: var(--paper); } .section--dark h1, .section--dark h2, .section--dark h3 { color: var(--paper); } .section--tint { background: var(--paper-2); } .eyebrow { font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500; color: var(--accent-ink); margin: 0 0 1.25rem; display: block; } .section--dark .eyebrow { color: #C9A468; } html.lang-zh .eyebrow { letter-spacing: 0.1em; } .lead { font-size: clamp(1.02rem, 1.6vw, 1.25rem); line-height: 1.65; color: var(--ink-soft); max-width: 46ch; } .section--dark .lead { color: var(--paper-soft); } .rule { height: 1px; background: var(--line); border: 0; margin: 0; } .section--dark .rule { background: var(--line-dark); } h1 { font-size: clamp(2.15rem, 5.6vw, 5rem); } h2 { font-size: clamp(2rem, 4vw, 3.2rem); } h3 { font-size: clamp(1.35rem, 2.2vw, 1.9rem); } .section-head { max-width: 42rem; margin-bottom: clamp(3rem, 6vw, 4.5rem); } /* --- Buttons ------------------------------------------------------------ */ .btn-primary, .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 48px; padding: 0.9rem 1.7rem; font-size: 0.95rem; font-weight: 500; letter-spacing: 0.02em; text-decoration: none; cursor: pointer; border: 1px solid transparent; border-radius: 2px; transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .btn-primary { background: var(--ink); color: var(--paper); } .btn-primary:hover { background: var(--accent-deep); } .section--dark .btn-primary, .hero .btn-primary { background: var(--paper); color: var(--ink); } .section--dark .btn-primary:hover, .hero .btn-primary:hover { background: var(--accent); color: var(--night); } .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn-ghost:hover { border-color: var(--ink); background: rgba(22, 22, 26, 0.04); } .section--dark .btn-ghost, .hero .btn-ghost { color: var(--paper); border-color: rgba(247, 244, 239, 0.35); } .section--dark .btn-ghost:hover, .hero .btn-ghost:hover { border-color: var(--paper); background: rgba(247, 244, 239, 0.08); } .btn-sm { min-height: 40px; padding: 0.5rem 1.1rem; font-size: 0.85rem; } /* --- Header ------------------------------------------------------------- */ .header { position: fixed; inset: 0 0 auto 0; z-index: var(--z-header); border-bottom: 1px solid transparent; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .header__inner { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); min-height: 74px; } .header.is-stuck { background: rgba(247, 244, 239, 0.94); backdrop-filter: blur(10px); border-bottom-color: var(--line); } .wordmark { /* Brand lockup: the Say Yes To Abundance mark kept as-is, with the wordmark set in live type so it stays crisp at any size and swaps language. */ display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; text-decoration: none; color: var(--paper); transition: color var(--dur) var(--ease); } .wordmark__mark { width: auto; height: 34px; flex: none; display: block; } .wordmark__type { display: flex; flex-direction: column; line-height: 1; } .wordmark__over { font-family: var(--font-body); font-size: 0.56rem; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.28em; } .wordmark__main { font-family: var(--font-display); font-weight: 400; font-size: 1.02rem; letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap; } html.lang-zh .wordmark__over { letter-spacing: 0.2em; font-size: 0.6rem; } html.lang-zh .wordmark__main { letter-spacing: 0.14em; font-weight: 500; } .header.is-stuck .wordmark { color: var(--ink); } /* "Spreading Abundance" is 64px wider than the old wordmark, which pushed the language toggle and burger past the viewport on 320px phones (body has overflow-x:hidden, so they were clipped and unreachable rather than visibly broken). Below 420px it wraps to two lines at a tighter setting. */ @media (max-width: 420px) { .header .wordmark { gap: 0.45rem; } .header .wordmark__mark { height: 27px; } .header .wordmark__over { font-size: 0.5rem; letter-spacing: 0.2em; } .header .wordmark__main { font-size: 0.82rem; letter-spacing: 0.14em; } } .nav { display: none; margin-inline-start: auto; gap: clamp(1.2rem, 2.5vw, 2.2rem); } .nav a { font-size: 0.92rem; text-decoration: none; color: var(--paper); padding-block: 0.4rem; position: relative; transition: color var(--dur) var(--ease); } .header.is-stuck .nav a { color: var(--ink-soft); } .nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease); } .nav a:hover::after { transform: scaleX(1); } .header.is-stuck .nav a:hover { color: var(--ink); } .header__actions { display: flex; align-items: center; gap: 0.75rem; margin-inline-start: auto; } .nav + .header__actions { margin-inline-start: 0; } /* Language toggle */ .lang { display: inline-flex; align-items: center; border: 1px solid rgba(247, 244, 239, 0.35); border-radius: 2px; overflow: hidden; transition: border-color var(--dur) var(--ease); } .header.is-stuck .lang { border-color: var(--line); } .lang button { background: none; border: 0; cursor: pointer; padding: 0.45rem 0.75rem; min-height: 44px; font-size: 0.8rem; letter-spacing: 0.08em; font-weight: 500; color: rgba(247, 244, 239, 0.7); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); } .header.is-stuck .lang button { color: var(--ink-soft); } .lang button[aria-pressed="true"] { background: var(--paper); color: var(--ink); } .header.is-stuck .lang button[aria-pressed="true"] { background: var(--ink); color: var(--paper); } .header__cta { display: none; } /* Hamburger */ .burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 0 10px; background: none; border: 0; cursor: pointer; } .burger span { display: block; height: 1.5px; background: var(--paper); transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), background-color var(--dur) var(--ease); } .header.is-stuck .burger span { background: var(--ink); } .header.is-menu-open .wordmark { color: var(--ink); } .header.is-menu-open .nav a { color: var(--ink-soft); } .header.is-menu-open .lang { border-color: var(--line); } .header.is-menu-open .lang button { color: var(--ink-soft); } .header.is-menu-open .lang button[aria-pressed="true"] { background: var(--ink); color: var(--paper); } .header.is-menu-open .burger span { background: var(--ink); } .burger[aria-expanded="true"] span { background: var(--ink); } .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* Mobile overlay menu */ .menu { position: fixed; inset: 0; z-index: var(--z-menu); background: var(--paper); display: flex; flex-direction: column; justify-content: center; padding: 6rem var(--gutter) 3rem; opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease); } .menu.is-open { opacity: 1; visibility: visible; } .menu a:not(.btn-primary) { font-family: var(--font-display); font-size: clamp(2rem, 8vw, 2.8rem); text-decoration: none; padding-block: 0.5rem; color: var(--ink); } .menu a:not(.btn-primary):hover { color: var(--accent-ink); } .menu .btn-primary { margin-top: 2rem; align-self: flex-start; } @media (min-width: 900px) { .nav { display: flex; } .burger { display: none; } .header__cta { display: inline-flex; } } /* --- Hero --------------------------------------------------------------- */ .hero { position: relative; min-height: 100svh; display: flex; align-items: flex-end; padding-block: clamp(6.5rem, 14vw, 8rem) clamp(2.75rem, 8vw, 5.5rem); color: var(--paper); background: var(--night); overflow: hidden; } .hero__media { position: absolute; inset: 0; } .hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; object-position: center 42%; filter: saturate(0.86) contrast(1.02); animation: kenburns 28s var(--ease) infinite alternate; } /* The footage carries its own motion, so the Ken Burns drift is redundant here and only costs GPU on a full-bleed layer. */ .hero__media video { animation: none; transform: none; } @keyframes kenburns { from { transform: scale(1.03); } to { transform: scale(1.12); } } @media (prefers-reduced-motion: reduce) { .hero__media img, .hero__media video { animation: none; transform: none; } } .hero__scrim { position: absolute; inset: 0; background: linear-gradient(97deg, rgba(14,14,16,0.96) 0%, rgba(14,14,16,0.90) 34%, rgba(14,14,16,0.62) 62%, rgba(14,14,16,0.42) 84%, rgba(14,14,16,0.6) 100%), linear-gradient(to top, rgba(14,14,16,0.9) 0%, rgba(14,14,16,0.1) 60%), rgba(14,14,16,0.18); } .hero__inner { position: relative; width: 100%; } /* Keeps the headline legible over bright LED screens in the plate */ .hero__content > * { text-shadow: 0 1px 24px rgba(14, 14, 16, 0.55); } .hero__content .btn-primary, .hero__content .btn-ghost { text-shadow: none; } .hero__content { max-width: 56rem; } .hero h1 { margin-bottom: 1.6rem; font-weight: 400; } .hero .lead { color: rgba(247, 244, 239, 0.82); max-width: 40ch; } .hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2.4rem; } @media (max-width: 479px) { .hero__actions { display: grid; } .hero__actions .btn-primary, .hero__actions .btn-ghost { width: 100%; } } .hero__trust { margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: 1.5rem; border-top: 1px solid var(--line-dark); font-size: 0.85rem; letter-spacing: 0.04em; color: rgba(247, 244, 239, 0.62); max-width: 52ch; } .hero__eyebrow { color: #C9A468; } /* --- Trusted-by band ---------------------------------------------------- */ .trusted { padding-block: clamp(3.5rem, 7vw, 5.5rem); } .trusted__label { text-align: center; margin-bottom: 2.5rem; } /* Client band: a continuous marquee rather than an 18-cell grid. Half the roster has a usable vector mark and half does not, so everything is rendered greyscale at a matched optical height — a grey logo and a grey wordmark then read as one family instead of a mismatch. */ .marquee { position: relative; overflow: hidden; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee__track { display: flex; width: max-content; animation: marquee 64s linear infinite; } .marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .marquee__set { display: flex; align-items: center; flex: none; list-style: none; margin: 0; padding: 0; gap: clamp(2.25rem, 4.5vw, 4rem); padding-inline-end: clamp(2.25rem, 4.5vw, 4rem); } .marquee__set li { display: flex; align-items: center; flex: none; } .marquee .logo { width: auto; height: var(--h, 22px); filter: grayscale(1) contrast(0.92); opacity: 0.62; transition: filter 320ms var(--ease), opacity 320ms var(--ease); } .marquee li:hover .logo { filter: none; opacity: 1; } .logo--axa { opacity: 0.5; } .marquee .logo-text { font-family: var(--font-body); font-size: clamp(0.85rem, 1.15vw, 1rem); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap; color: var(--ink-soft); opacity: 0.72; transition: opacity var(--dur) var(--ease), color var(--dur) var(--ease); } .marquee li:hover .logo-text { opacity: 1; color: var(--accent-ink); } /* Motion off: park it as a plain scrollable row so nothing moves on its own */ @media (prefers-reduced-motion: reduce) { .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; } .marquee__track { animation: none; } .marquee__set:last-child { display: none; } } .trusted__note { text-align: center; margin-top: 2.75rem; font-size: 0.85rem; color: var(--ink-soft); opacity: 0.82; } /* --- World map ---------------------------------------------------------- */ .worldmap__stage { position: relative; width: 100%; margin-top: clamp(1rem, 2vw, 2rem); } .worldmap__svg { width: 100%; height: auto; display: block; } .worldmap__land { fill: rgba(247, 244, 239, 0.085); stroke: rgba(247, 244, 239, 0.16); stroke-width: 2; vector-effect: non-scaling-stroke; } .worldmap__pins { position: absolute; inset: 0; } .worldmap__pin { position: absolute; transform: translate(-50%, -50%); width: 22px; height: 22px; padding: 0; background: none; border: 0; cursor: pointer; display: grid; place-items: center; } .worldmap__pin::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(176, 137, 79, 0.45); transition: transform 260ms var(--ease), background-color 260ms var(--ease), box-shadow 260ms var(--ease); } .worldmap__pin:hover::before, .worldmap__pin.is-active::before, .worldmap__pin:focus-visible::before { transform: scale(1.5); background: #E4C489; box-shadow: 0 0 0 6px rgba(176, 137, 79, 0.22); } /* Card rides above the pin, only while it is live. Cities with photos get a carousel; the rest just get their name. */ .worldmap__pin.has-photos::after { content: ""; position: absolute; width: 17px; height: 17px; border-radius: 50%; border: 1px solid rgba(176, 137, 79, 0.55); transition: transform 260ms var(--ease), border-color 260ms var(--ease); } .worldmap__pin.has-photos:hover::after, .worldmap__pin.has-photos.is-active::after { transform: scale(1.25); border-color: var(--accent); } .worldmap__card { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px); display: block; width: max-content; max-width: 220px; padding: 0.4rem; text-align: center; background: var(--paper); color: var(--ink); border-radius: 3px; pointer-events: none; box-shadow: 0 14px 40px rgba(14, 14, 16, 0.45); opacity: 0; visibility: hidden; transition: opacity 200ms var(--ease), transform 200ms var(--ease), visibility 200ms var(--ease); z-index: 3; } /* Near an edge the card opens inward instead of overflowing the map */ .worldmap__pin.is-x-left .worldmap__card { left: auto; right: 50%; transform: translate(14px, 4px); } .worldmap__pin.is-x-right .worldmap__card { left: 50%; right: auto; transform: translate(-14px, 4px); } .worldmap__pin.is-y-below .worldmap__card { bottom: auto; top: calc(100% + 8px); } .worldmap__pin:hover .worldmap__card, .worldmap__pin.is-active .worldmap__card, .worldmap__pin:focus-visible .worldmap__card { opacity: 1; visibility: visible; } .worldmap__pin:hover .worldmap__card, .worldmap__pin.is-active .worldmap__card { transform: translate(-50%, 0); } .worldmap__pin.is-x-left:hover .worldmap__card, .worldmap__pin.is-x-left.is-active .worldmap__card { transform: translate(14px, 0); } .worldmap__pin.is-x-right:hover .worldmap__card, .worldmap__pin.is-x-right.is-active .worldmap__card { transform: translate(-14px, 0); } .worldmap__shots { position: relative; display: block; width: 200px; aspect-ratio: 4 / 3; background: var(--night); overflow: hidden; border-radius: 2px; } .worldmap__shots img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 420ms var(--ease); } .worldmap__shots img.is-on { opacity: 1; } .worldmap__dots { display: flex; justify-content: center; gap: 4px; margin-top: 0.4rem; } .worldmap__dots span { width: 14px; height: 2px; background: var(--line); transition: background-color 300ms var(--ease); } .worldmap__dots span.is-on { background: var(--accent); } .worldmap__cardname { display: block; margin-top: 0.4rem; padding: 0 0.2rem 0.15rem; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; white-space: nowrap; } html.lang-zh .worldmap__cardname { letter-spacing: 0.04em; text-transform: none; font-size: 0.8rem; } /* The list is the accessible way in; the pins mirror it */ .worldmap__list { list-style: none; margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; padding: 0; display: grid; gap: 0.15rem 1.5rem; grid-template-columns: repeat(2, 1fr); } @media (min-width: 620px) { .worldmap__list { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 980px) { .worldmap__list { grid-template-columns: repeat(4, 1fr); } } .worldmap__city { background: none; border: 0; padding: 0.5rem 0; cursor: pointer; min-height: 44px; width: 100%; text-align: start; font-family: var(--font-body); font-size: 0.92rem; color: rgba(247, 244, 239, 0.7); border-bottom: 1px solid var(--line-dark); transition: color 200ms var(--ease), border-color 200ms var(--ease); } .worldmap__city:hover, .worldmap__city.is-active, .worldmap__city:focus-visible { color: var(--paper); border-bottom-color: var(--accent); } /* --- Stage marquee ------------------------------------------------------ */ .stages { padding-block: clamp(3rem, 6vw, 4.5rem); overflow: hidden; } .stages__track { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline-start: var(--gutter); padding-inline: var(--gutter); padding-bottom: 1rem; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--line-dark) transparent; } .stages__track::-webkit-scrollbar { height: 4px; } .stages__track::-webkit-scrollbar-thumb { background: var(--line-dark); } .stages figure { margin: 0; flex: 0 0 auto; width: min(72vw, 340px); scroll-snap-align: start; } .stages img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; filter: grayscale(1) contrast(1.05); opacity: 0.72; transition: filter 400ms var(--ease), opacity 400ms var(--ease); } .stages figure:hover img { filter: grayscale(0); opacity: 1; } /* The one tile in this row that plays something shouldn't look identical to the six that don't - it sits first and keeps its colour so the play mark reads as an invitation rather than another still. */ .stages__fig--video img { filter: grayscale(0); opacity: 0.88; } .stages__fig--video:hover img { opacity: 1; } .stages figcaption { margin-top: 0.85rem; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(247, 244, 239, 0.55); } html.lang-zh .stages figcaption { letter-spacing: 0.06em; } /* --- Keynotes ----------------------------------------------------------- */ .keynote { display: grid; gap: clamp(1.75rem, 4vw, 3.5rem); padding-block: clamp(3rem, 7vw, 5rem); border-top: 1px solid var(--line); align-items: center; } .keynote:first-of-type { border-top: 0; padding-top: 0; } .keynote__media { position: relative; } .keynote__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } /* A keynote image that holds a clip becomes the primary target. The text link alone was too small to notice, so the whole still is now clickable - same affordance as .beyond__frame, which already worked this way. */ button.keynote__media { display: block; width: 100%; padding: 0; border: 0; background: var(--night); cursor: pointer; overflow: hidden; text-align: inherit; color: inherit; } button.keynote__media img { opacity: 0.92; transition: transform 600ms var(--ease), opacity 320ms var(--ease); } button.keynote__media:hover img, button.keynote__media:focus-visible img { transform: scale(1.03); opacity: 1; } button.keynote__media:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { button.keynote__media:hover img, button.keynote__media:focus-visible img { transform: none; } } .keynote__play { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; } .keynote__play > span { width: clamp(48px, 5.5vw, 62px); aspect-ratio: 1; border-radius: 50%; border: 1.5px solid rgba(247,244,239,0.92); background: rgba(14,14,16,0.55); /* Keynote stills run brighter than the Beyond ones - the TEDx frame is nearly white - so this badge needs more weight than .beyond__play to stay legible. */ box-shadow: 0 2px 18px rgba(14,14,16,0.45); backdrop-filter: blur(2px); display: grid; place-items: center; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); } button.keynote__media:hover .keynote__play > span, button.keynote__media:focus-visible .keynote__play > span { background: var(--accent); border-color: var(--accent); } .keynote__play svg { width: 16px; height: 16px; fill: var(--paper); margin-inline-start: 3px; } .keynote__num { font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 3.75rem); line-height: 1; color: var(--accent-deep); opacity: 0.85; font-weight: 400; margin-bottom: 0.75rem; display: block; } .keynote h3 { margin-bottom: 0.9rem; } .keynote__promise { color: var(--ink-soft); font-size: 1.08rem; margin-bottom: 1.5rem; max-width: 40ch; } .keynote ul { list-style: none; margin: 0 0 1.75rem; padding: 0; display: grid; gap: 0.7rem; } .keynote li { position: relative; padding-inline-start: 1.4rem; color: var(--ink-soft); font-size: 1rem; } .keynote li::before { content: ""; position: absolute; inset-inline-start: 0; top: 0.72em; width: 0.6rem; height: 1px; background: var(--accent); } .keynote__tag { display: inline-block; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-ink); border: 1px solid var(--line); padding: 0.45rem 0.9rem; border-radius: 2px; } html.lang-zh .keynote__tag { letter-spacing: 0.06em; } @media (min-width: 860px) { .keynote { grid-template-columns: 1fr 1fr; } .keynote--flip .keynote__media { order: 2; } } /* Tag + "watch a clip" sit on one line under each keynote */ .keynote__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.25rem; } .keynote__watch { display: inline-flex; align-items: center; gap: 0.55rem; background: none; border: 0; cursor: pointer; padding: 0.5rem 0; min-height: 44px; color: var(--ink); font-family: var(--font-body); font-size: 0.85rem; letter-spacing: 0.02em; transition: color var(--dur) var(--ease); } .keynote__watch:hover { color: var(--accent-ink); } .keynote__watchmark { width: 26px; height: 26px; flex: none; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); } .keynote__watch:hover .keynote__watchmark { border-color: var(--accent); background: rgba(176,137,79,0.1); } .keynote__watchmark svg { width: 10px; height: 10px; fill: currentColor; margin-inline-start: 2px; } /* A stage tile that also holds a clip */ .stages__play { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; position: relative; } .stages__playmark { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; } .stages__playmark svg { width: 46px; height: 46px; fill: var(--paper); filter: drop-shadow(0 2px 14px rgba(14,14,16,0.6)); opacity: 0.9; transition: transform 320ms var(--ease), opacity 320ms var(--ease); } .stages__play:hover .stages__playmark svg { transform: scale(1.12); opacity: 1; } /* --- Beyond the keynote -------------------------------------------------- */ /* Three parallel offerings, so they get equal weight: same plate, same type, same action line. Only the third leads off-site. */ .beyond__grid { display: grid; gap: clamp(2.25rem, 4vw, 3rem); } @media (min-width: 760px) { .beyond__grid { grid-template-columns: repeat(3, 1fr); gap: clamp(1.75rem, 3vw, 2.5rem); } } .beyond__card { display: flex; flex-direction: column; } .beyond__card h3 { font-size: clamp(1.15rem, 1.8vw, 1.35rem); margin: clamp(1.1rem, 2vw, 1.4rem) 0 0.6rem; } .beyond__card p { color: var(--ink-soft); font-size: 0.98rem; line-height: 1.65; } .beyond__frame { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--night); cursor: pointer; overflow: hidden; text-decoration: none; color: inherit; } .beyond__frame img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; opacity: 0.9; transition: transform 600ms var(--ease), opacity 320ms var(--ease); } .beyond__frame:hover img { transform: scale(1.03); opacity: 1; } @media (prefers-reduced-motion: reduce) { .beyond__frame:hover img { transform: none; } } .beyond__play, .beyond__ext { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; } .beyond__play > span { width: clamp(48px, 5.5vw, 62px); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(247,244,239,0.75); background: rgba(14,14,16,0.35); display: grid; place-items: center; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .beyond__frame:hover .beyond__play > span { background: var(--accent); border-color: var(--accent); } .beyond__play svg { width: 16px; height: 16px; fill: var(--paper); margin-inline-start: 3px; } /* The off-site card gets an arrow, not a play button - the affordance should tell you it leaves the page rather than promising a video. */ .beyond__ext { align-items: start; justify-items: end; padding: 0.75rem; } .beyond__ext svg { width: 34px; height: 34px; padding: 7px; color: var(--paper); background: rgba(14,14,16,0.4); border: 1px solid rgba(247,244,239,0.6); border-radius: 50%; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .beyond__frame:hover .beyond__ext svg { background: var(--accent); border-color: var(--accent); } .beyond__act { margin-top: auto; padding-top: 1rem; font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--accent-ink); } html.lang-zh .beyond__act { letter-spacing: 0.06em; font-size: 0.82rem; } /* --- Quote break -------------------------------------------------------- */ /* One line between chapters, given room to land: a large gold quotation mark sits behind the text as a watermark, the type is set big enough to read as a statement rather than a caption, and the attribution hangs below a hairline. */ .quotebreak { padding-block: clamp(5.5rem, 12vw, 9.5rem); background: var(--paper-2); border-block: 1px solid var(--line); text-align: center; } .quotebreak blockquote { position: relative; margin: 0 auto; max-width: 46rem; padding-top: clamp(2.75rem, 5.5vw, 4rem); } .quotebreak blockquote::before { content: "\201C"; position: absolute; top: 0; left: 50%; transform: translateX(-50%); font-family: var(--font-display); font-weight: 400; font-size: clamp(6rem, 13vw, 10rem); line-height: 0.78; color: var(--accent); opacity: 0.2; pointer-events: none; user-select: none; -webkit-user-select: none; } .quotebreak q { quotes: none; display: block; position: relative; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.85rem, 4.4vw, 3.35rem); line-height: 1.2; letter-spacing: -0.021em; color: var(--ink); text-wrap: balance; } html.lang-zh .quotebreak q { line-height: 1.45; letter-spacing: 0; font-weight: 500; } /* The source line is deliberately quiet. Some reviews name the event and some don't, and a loud caption makes the short ones read as unfinished - held back as metadata, the quote carries the section and caption length stops mattering. */ .quotebreak cite { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; position: relative; font-style: normal; margin-top: clamp(2rem, 4vw, 2.75rem); font-family: var(--font-body); color: var(--ink-soft); opacity: 0.72; } /* Three rows, weighted: who they are, then where, then where it came from. */ .quotebreak .qb__who { font-size: 1rem; letter-spacing: 0.02em; text-transform: none; font-weight: 600; color: var(--ink); opacity: 1; } .quotebreak .qb__where { font-size: 0.86rem; letter-spacing: 0.02em; text-transform: none; } .quotebreak .qb__src { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.75; } .quotebreak--dark .qb__who { color: var(--paper); } .quotebreak cite::before { content: ""; display: block; width: 2rem; height: 1px; background: var(--accent); opacity: 0.85; margin: 0 auto clamp(1.2rem, 2.4vw, 1.6rem); } html.lang-zh .quotebreak .qb__who { letter-spacing: 0.04em; font-size: 1.04rem; } html.lang-zh .quotebreak .qb__src { letter-spacing: 0.08em; font-size: 0.72rem; } .quotebreak--paper { background: var(--paper); } .quotebreak--dark { background: var(--night); border-block-color: var(--line-dark); } .quotebreak--dark q { color: var(--paper); } .quotebreak--dark cite { color: rgba(247, 244, 239, 0.7); opacity: 0.85; } .quotebreak--dark blockquote::before { color: #C9A468; opacity: 0.24; } .quotebreak--dark cite::before { background: #C9A468; opacity: 0.9; } /* --- Reel --------------------------------------------------------------- */ .reel__head { text-align: center; max-width: 44rem; margin: 0 auto clamp(2.5rem, 5vw, 3.5rem); } .reel__head .lead { margin-inline: auto; } .reel__frame { position: relative; width: 100%; max-width: 1080px; margin-inline: auto; aspect-ratio: 16 / 9; overflow: hidden; background: #000; border: 0; padding: 0; cursor: pointer; display: block; } .reel__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease), opacity 400ms var(--ease); opacity: 0.85; } /* One poster per language - the Mandarin reel has its own titled card. */ .reel__poster--zh { display: none; } html.lang-zh .reel__poster--en { display: none; } html.lang-zh .reel__poster--zh { display: block; } .reel__frame:hover img { transform: scale(1.03); opacity: 1; } @media (prefers-reduced-motion: reduce) { .reel__frame:hover img { transform: none; } } .reel__play { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; } .reel__play span { width: clamp(64px, 9vw, 92px); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(247, 244, 239, 0.75); background: rgba(14, 14, 16, 0.35); backdrop-filter: blur(2px); display: grid; place-items: center; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .reel__frame:hover .reel__play span { background: var(--accent); border-color: var(--accent); } .reel__play svg { width: 22px; height: 22px; fill: var(--paper); margin-inline-start: 3px; } .reel__caption { text-align: center; margin-top: 1.75rem; font-size: 0.9rem; color: rgba(247, 244, 239, 0.6); } /* --- Lightbox ----------------------------------------------------------- */ .lightbox { position: fixed; inset: 0; z-index: var(--z-lightbox); background: rgba(8, 8, 9, 0.95); display: grid; place-items: center; padding: 4.5rem var(--gutter) var(--gutter); opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease); } .lightbox.is-open { opacity: 1; visibility: visible; } .lightbox__body { width: min(100%, 1100px); aspect-ratio: 16 / 9; background: #000; position: relative; } /* 9:16 clips get a tall frame sized off the viewport height instead */ .lightbox.is-portrait .lightbox__body { aspect-ratio: 9 / 16; width: auto; height: min(74vh, 820px); max-width: 100%; } .lightbox__body iframe, .lightbox__body video { width: 100%; height: 100%; border: 0; } .lightbox__msg { display: grid; place-items: center; height: 100%; text-align: center; color: var(--paper-soft); padding: 2rem; font-size: 0.98rem; } .lightbox__msg a { color: var(--paper); text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 0.25rem; transition: color var(--dur) var(--ease); } .lightbox__msg a:hover { color: #C9A468; } .lightbox__close { position: absolute; top: -2.9rem; right: 0; background: none; border: 0; color: var(--paper); cursor: pointer; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; min-height: 44px; padding: 0 0.25rem; } .lightbox__close:hover { color: var(--accent); } /* --- About -------------------------------------------------------------- */ .about__grid { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; } .about__portrait img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; object-position: center 18%; } @media (max-width: 899px) { .about__portrait img { aspect-ratio: 4 / 3; object-position: center 22%; } } /* The certificate sits under the portrait as documentary backing for the CSP line in the bio - a claim a buyer can otherwise only take on trust. */ .about__cred-shot { margin: 1rem 0 0; } .about__cred-shot img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .about__cred-shot figcaption { margin-top: 0.7rem; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); opacity: 0.75; } html.lang-zh .about__cred-shot figcaption { letter-spacing: 0.06em; font-size: 0.76rem; } .about__body { display: grid; gap: 0.55rem; margin: 1.75rem 0 0; } .about__body p { font-size: clamp(1.15rem, 1.9vw, 1.45rem); font-family: var(--font-display); font-weight: 400; line-height: 1.45; color: var(--ink); letter-spacing: -0.01em; } html.lang-zh .about__body p { line-height: 1.7; letter-spacing: 0; } .about__creds { margin-top: 2.5rem; padding-top: 1.75rem; border-top: 1px solid var(--line); font-size: 0.88rem; letter-spacing: 0.05em; color: var(--ink-soft); line-height: 2; } @media (min-width: 900px) { .about__grid { grid-template-columns: 0.85fr 1.15fr; gap: clamp(3rem, 6vw, 5.5rem); } } /* --- Why grid ----------------------------------------------------------- */ .why__grid { display: grid; gap: 1px; margin: 0; padding: 0; background: var(--line); border-block: 1px solid var(--line); } .why__grid li { list-style: none; background: var(--paper); padding: clamp(1.75rem, 3vw, 2.5rem); } .why__num { font-size: 0.75rem; letter-spacing: 0.18em; color: var(--accent-ink); display: block; margin-bottom: 1rem; } .why__grid h3 { font-size: clamp(1.1rem, 1.7vw, 1.3rem); margin-bottom: 0.6rem; } .why__grid p { color: var(--ink-soft); font-size: 0.98rem; } @media (min-width: 640px) { .why__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 980px) { .why__grid { grid-template-columns: repeat(3, 1fr); } } /* --- Proof -------------------------------------------------------------- */ .proof { position: relative; overflow: hidden; } .proof__bg { position: absolute; inset: 0; } .proof__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.16; filter: grayscale(1); } .proof__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--night) 0%, rgba(14,14,16,0.72) 40%, var(--night) 100%); } .proof .container { position: relative; } .proof__featured { max-width: 46rem; margin: 0 auto clamp(3rem, 6vw, 4.5rem); text-align: center; } .proof__featured blockquote { margin: 0; } .proof__featured q { font-family: var(--font-display); font-weight: 400; quotes: none; font-size: clamp(1.75rem, 3.6vw, 2.9rem); line-height: 1.25; color: var(--paper); display: block; letter-spacing: -0.015em; } html.lang-zh .proof__featured q { line-height: 1.45; letter-spacing: 0; } .proof__featured cite { display: block; margin-top: 1.75rem; font-style: normal; font-size: 0.85rem; letter-spacing: 0.1em; color: rgba(247, 244, 239, 0.58); } /* Vertical clip: a Short is 9:16, so it gets a small portrait plate rather than a wide frame it would only letterbox into. */ .proof__clip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.25rem, 3vw, 2.25rem); max-width: 36rem; margin: 0 auto clamp(2.75rem, 5vw, 3.75rem); text-align: left; } .proof__clipframe { position: relative; flex: none; width: clamp(112px, 15vw, 148px); padding: 0; border: 1px solid var(--line-dark); background: var(--night); cursor: pointer; overflow: hidden; } .proof__clipframe img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; opacity: 0.85; transition: transform 500ms var(--ease), opacity 320ms var(--ease); } .proof__clipframe:hover img { transform: scale(1.05); opacity: 1; } @media (prefers-reduced-motion: reduce) { .proof__clipframe:hover img { transform: none; } } .proof__clipplay { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; } .proof__clipplay > span { width: 40px; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(247,244,239,0.8); background: rgba(14,14,16,0.4); display: grid; place-items: center; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .proof__clipframe:hover .proof__clipplay > span { background: var(--accent); border-color: var(--accent); } .proof__clipplay svg { width: 13px; height: 13px; fill: var(--paper); margin-inline-start: 2px; } .proof__cliptext { flex: 1 1 14rem; } .proof__cliptext h3 { font-size: clamp(1.1rem, 1.8vw, 1.35rem); color: var(--paper); margin-bottom: 0.5rem; } .proof__cliptext p { font-size: 0.92rem; line-height: 1.6; color: rgba(247,244,239,0.72); } .proof__clipcta { display: inline-block; margin-top: 0.85rem; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: #C9A468; } html.lang-zh .proof__clipcta { letter-spacing: 0.06em; } .proof__grid { display: grid; gap: 1px; margin: 0; padding: 0; background: var(--line-dark); border-block: 1px solid var(--line-dark); } .proof__grid li { list-style: none; background: var(--night); padding: clamp(1.75rem, 3vw, 2.5rem); } .proof__grid q { quotes: none; display: block; color: var(--paper); font-size: 1.02rem; line-height: 1.65; } .proof__grid cite { display: block; margin-top: 1.1rem; font-style: normal; font-size: 0.8rem; letter-spacing: 0.08em; color: rgba(247, 244, 239, 0.5); } @media (min-width: 720px) { /* Vertical clip: a Short is 9:16, so it gets a small portrait plate rather than a wide frame it would only letterbox into. */ .proof__clip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(1.25rem, 3vw, 2.25rem); max-width: 36rem; margin: 0 auto clamp(2.75rem, 5vw, 3.75rem); text-align: left; } .proof__clipframe { position: relative; flex: none; width: clamp(112px, 15vw, 148px); padding: 0; border: 1px solid var(--line-dark); background: var(--night); cursor: pointer; overflow: hidden; } .proof__clipframe img { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; opacity: 0.85; transition: transform 500ms var(--ease), opacity 320ms var(--ease); } .proof__clipframe:hover img { transform: scale(1.05); opacity: 1; } @media (prefers-reduced-motion: reduce) { .proof__clipframe:hover img { transform: none; } } .proof__clipplay { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; } .proof__clipplay > span { width: 40px; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(247,244,239,0.8); background: rgba(14,14,16,0.4); display: grid; place-items: center; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .proof__clipframe:hover .proof__clipplay > span { background: var(--accent); border-color: var(--accent); } .proof__clipplay svg { width: 13px; height: 13px; fill: var(--paper); margin-inline-start: 2px; } .proof__cliptext { flex: 1 1 14rem; } .proof__cliptext h3 { font-size: clamp(1.1rem, 1.8vw, 1.35rem); color: var(--paper); margin-bottom: 0.5rem; } .proof__cliptext p { font-size: 0.92rem; line-height: 1.6; color: rgba(247,244,239,0.72); } .proof__clipcta { display: inline-block; margin-top: 0.85rem; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase; color: #C9A468; } html.lang-zh .proof__clipcta { letter-spacing: 0.06em; } .proof__grid { grid-template-columns: repeat(2, 1fr); } } /* Provenance: these are verifiable public reviews, so say so once, quietly. */ .proof__source { margin-top: 1.75rem; text-align: center; font-size: 0.82rem; letter-spacing: 0.04em; color: rgba(247, 244, 239, 0.55); } /* Media strip */ .media-strip { margin-top: clamp(3.5rem, 7vw, 5rem); } .media-strip__label { text-align: center; } .media-strip__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem clamp(1.5rem, 4vw, 3rem); } .media-strip__list li { font-size: 0.85rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(247, 244, 239, 0.5); transition: color var(--dur) var(--ease); } .media-strip__list li:hover { color: #C9A468; } html.lang-zh .media-strip__list li { letter-spacing: 0.08em; } /* --- Media -------------------------------------------------------------- */ /* An index, not a card grid: outlet, headline, medium. Reads like a press clipping list, which is what it is. */ .media__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); } .media__list li { border-bottom: 1px solid var(--line); } /* The row is the target, not the small label on the right - that was a tiny hit area for the one thing on this list you actually want people to open. */ .media__row { display: grid; gap: 0.25rem 1.5rem; grid-template-columns: 1fr auto; padding: clamp(1.1rem, 2vw, 1.5rem) 0; align-items: baseline; color: inherit; text-decoration: none; } @media (min-width: 780px) { .media__row { grid-template-columns: 15rem 1fr auto; align-items: baseline; } } a.media__row .media__title, a.media__row .media__kind { transition: color var(--dur) var(--ease); } a.media__row:hover .media__title { color: var(--accent-ink); } a.media__row:hover .media__kind { color: var(--accent); } /* Every row links out. Five go straight to the article; three whose original links have rotted (8world, Omny) fall back to Eugene's media index. */ a.media__row .media__kind::after { content: " \2197"; } a.media__row:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; } /* The cutting itself, swapped by language so each audience sees the paper they actually read. */ .media__clip { margin: 0 0 clamp(2.5rem, 5vw, 3.5rem); } .media__clipimg { display: block; width: 100%; max-width: 620px; margin-inline: auto; border: 1px solid var(--line); box-shadow: 0 2px 4px rgba(22, 22, 26, 0.05), 0 18px 44px -28px rgba(22, 22, 26, 0.5); } .media__clipimg--zh { display: none; } html.lang-zh .media__clipimg--en { display: none; } html.lang-zh .media__clipimg--zh { display: block; } .media__clip figcaption { margin-top: 0.9rem; text-align: center; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); opacity: 0.75; } html.lang-zh .media__clip figcaption { letter-spacing: 0.06em; font-size: 0.78rem; } .media__outlet { font-family: var(--font-body); font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-ink); align-self: center; } html.lang-zh .media__outlet { letter-spacing: 0.06em; font-size: 0.82rem; } .media__title { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.02rem, 1.6vw, 1.2rem); line-height: 1.35; color: var(--ink); letter-spacing: -0.01em; } html.lang-zh .media__title { letter-spacing: 0; line-height: 1.55; } .media__kind { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; align-self: center; } html.lang-zh .media__kind { letter-spacing: 0.06em; } .media__all { margin-top: clamp(2rem, 4vw, 2.75rem); } .media__all a { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent-ink); text-decoration: none; border-bottom: 1px solid var(--line); transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); } .media__all a:hover { color: var(--ink); border-bottom-color: var(--accent); } html.lang-zh .media__all a { letter-spacing: 0.06em; } /* --- Enquiry form ------------------------------------------------------- */ .enquiry__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); align-items: start; } @media (min-width: 940px) { .enquiry__grid { grid-template-columns: 0.85fr 1.15fr; gap: clamp(3rem, 6vw, 5rem); } } .enquiry__aside .lead { margin-top: 1.5rem; } .enquiry__cred { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: 0.9rem; color: var(--ink-soft); } .enquiry__scarcity { margin-top: 1rem; font-size: 0.85rem; letter-spacing: 0.04em; color: var(--accent-ink); } .form { display: grid; gap: 1.25rem; } .form__row { display: grid; gap: 1.25rem; } @media (min-width: 560px) { .form__row--2 { grid-template-columns: 1fr 1fr; } } .field { display: grid; gap: 0.45rem; } .field label { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); font-weight: 500; } html.lang-zh .field label { letter-spacing: 0.04em; } .field .req { color: var(--accent-ink); } .field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 0.75rem 0.9rem; background: transparent; color: var(--ink); border: 1px solid var(--line); border-radius: 2px; transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); font-size: 1rem; } .field textarea { min-height: 120px; resize: vertical; line-height: 1.6; } .field select { appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%233A3A40' stroke-width='1.4' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 12px; padding-inline-end: 2.5rem; } .field input:hover, .field select:hover, .field textarea:hover { border-color: #C4B8A4; } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); background: rgba(255, 255, 255, 0.45); } .field input::placeholder, .field textarea::placeholder { color: #6E6455; } .field .error { font-size: 0.8rem; color: #A1322B; letter-spacing: 0.02em; min-height: 1.1em; } .field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: #A1322B; } .form__submit { margin-top: 0.5rem; justify-self: start; } .form__submit[disabled] { opacity: 0.55; cursor: wait; } .form__note { font-size: 0.8rem; color: var(--ink-soft); opacity: 0.8; } .form__success { display: none; padding: clamp(2rem, 4vw, 3rem); border: 1px solid var(--accent); background: rgba(176, 137, 79, 0.06); } .form__success.is-visible { display: block; } .form__success h3 { margin-bottom: 0.75rem; } .form__success p { color: var(--ink-soft); } .form.is-hidden { display: none; } .form__embed:empty { display: none; } /* --- Speaker kit + footer ----------------------------------------------- */ .kit { border-top: 1px solid var(--line); padding-block: clamp(2.5rem, 5vw, 3.5rem); } .kit__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; } .kit p { font-size: 1.05rem; max-width: 40ch; } .footer { background: var(--night); color: var(--paper-soft); padding-block: clamp(3rem, 6vw, 4.5rem) 2.5rem; } .footer__top { display: grid; gap: 2.5rem; } @media (min-width: 780px) { .footer__top { grid-template-columns: 1.2fr 1fr 1fr; } } .footer .wordmark { color: var(--paper); font-size: 1rem; letter-spacing: 0.22em; text-transform: uppercase; font-family: var(--font-body); font-weight: 600; } /* Eugene's personal mark. The name is already in the adjacent wordmark, so this is decorative to a screen reader rather than a third announcement of it. */ /* The anchor must be a block with a real width of its own. As an inline-block it shrank to fit the image, so the image's own percentage max-width resolved against itself and collapsed it. Specificity has to beat `.footer a`. */ .footer .footer__home { display: block; min-height: 0; width: min(280px, 80%); } .footer__logo { display: block; width: 100%; height: auto; margin-bottom: 1.25rem; opacity: 0.92; transition: opacity var(--dur) var(--ease); } .footer .footer__home:hover .footer__logo { opacity: 1; } .footer__tag { margin-top: 0.9rem; font-size: 0.88rem; } /* A link inside a sentence must not inherit the 44px tap sizing that the footer's column links use, or the bullet separator sits on its own line. */ .footer__also { margin-top: 0.6rem; font-size: 0.82rem; opacity: 0.72; } .footer .footer__also a { display: inline; min-height: 0; font-size: inherit; color: #C9A468; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .footer .footer__also a:hover { color: var(--paper); } /* Sits below the submit button so it never competes with the booking CTA — it only catches the visitor who was never going to book a speaker. */ .enquiry__alt { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--line); font-size: 0.88rem; color: var(--ink-soft); } .enquiry__alt a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; } .footer h4 { font-family: var(--font-body); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: #C9A468; margin-bottom: 1.1rem; font-weight: 500; } html.lang-zh .footer h4 { letter-spacing: 0.08em; } .footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.15rem; } .footer a { text-decoration: none; font-size: 0.92rem; display: inline-flex; align-items: center; min-height: 44px; transition: color var(--dur) var(--ease); } .footer a:hover { color: #C9A468; } .footer__bottom { margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 1.75rem; border-top: 1px solid var(--line-dark); display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; font-size: 0.8rem; color: rgba(247, 244, 239, 0.5); } .footer .lang { border-color: var(--line-dark); } .footer .lang button { color: rgba(247, 244, 239, 0.65); } .footer .lang button[aria-pressed="true"] { background: var(--paper); color: var(--ink); } /* --- Reveal animation --------------------------------------------------- */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); } .reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* --- Utility ------------------------------------------------------------ */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } body.is-locked { overflow: hidden; } /* ===== Sub-pages (keynote & service detail) ================================= These have no dark hero, so the header must wear its light treatment from the start rather than waiting for a scroll. Mirrors .is-stuck without depending on JavaScript to apply it. */ .subpage .header { background: rgba(247, 244, 239, 0.94); backdrop-filter: blur(10px); border-bottom-color: var(--line); } .subpage .header .wordmark { color: var(--ink); } .subpage .header .nav a { color: var(--ink-soft); } .subpage .header .nav a:hover { color: var(--ink); } .subpage .header .lang { border-color: var(--line); } .subpage .header .lang button, .subpage .header .lang .lang__link { color: var(--ink-soft); } .subpage .header .lang button[aria-pressed="true"] { background: var(--ink); color: var(--paper); } .subpage .header .burger span { background: var(--ink); } .lang__link { display: inline-flex; align-items: center; padding: 0.45rem 0.75rem; min-height: 44px; font-size: 0.8rem; letter-spacing: 0.08em; font-weight: 500; text-decoration: none; color: rgba(247, 244, 239, 0.7); } .subpage__head { padding-top: calc(var(--header-h, 72px) + clamp(3rem, 7vw, 5rem)); padding-bottom: 0; } .crumbs { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 1.6rem; } .crumbs a { color: var(--accent-ink); text-decoration: none; } .crumbs a:hover { text-decoration: underline; } .crumbs span[aria-hidden] { margin: 0 0.5rem; opacity: 0.5; } .subpage__head h1 { font-size: clamp(2.1rem, 5.2vw, 3.4rem); font-weight: 400; letter-spacing: -0.02em; line-height: 1.08; margin: 0 0 1.1rem; max-width: 20ch; } .subpage__lede { max-width: 46ch; margin-bottom: 1.6rem; } .subpage__grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; } @media (min-width: 900px) { .subpage__grid { grid-template-columns: 0.85fr 1.15fr; } } .subpage__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; } .subpage__frame { position: relative; display: block; width: 100%; padding: 0; border: 0; background: var(--night); cursor: pointer; overflow: hidden; } .subpage__frame img { opacity: 0.92; transition: transform 600ms var(--ease), opacity 320ms var(--ease); } .subpage__frame:hover img, .subpage__frame:focus-visible img { transform: scale(1.03); opacity: 1; } .subpage__frame:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } @media (prefers-reduced-motion: reduce) { .subpage__frame:hover img { transform: none; } } .subpage__caption { margin-top: 0.85rem; font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); } .subpage__body h2 { font-size: clamp(1.25rem, 2.2vw, 1.55rem); font-weight: 400; letter-spacing: -0.01em; margin: 2.2rem 0 0.75rem; } .subpage__body h2:first-child { margin-top: 0; } .subpage__body p { max-width: 62ch; } .subpage__bullets { margin: 0.5rem 0 0; padding: 0; list-style: none; } .subpage__bullets li { position: relative; padding-left: 1.4rem; margin-bottom: 0.6rem; max-width: 60ch; } .subpage__bullets li::before { content: "—"; position: absolute; left: 0; color: var(--accent); } .subpage__ext { font-size: 0.95rem; color: var(--ink-soft); } /* Named testimonial on a subpage. A rule rather than a card, so it reads as part of the argument instead of a separate widget. */ .subpage__quotes { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 2rem; } .subpage__quote { margin: 0; padding-left: 1.4rem; border-left: 2px solid var(--accent); } .subpage__quote q { quotes: none; display: block; font-family: var(--font-display); font-size: 1.06rem; line-height: 1.58; color: var(--ink); } .subpage__quote cite { display: block; margin-top: 0.7rem; font-style: normal; font-size: 0.84rem; letter-spacing: 0.02em; color: var(--ink-soft); } .subpage__note { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--line); font-size: 0.92rem; color: var(--ink-soft); } .subpage__note a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; } .subpage__cta { margin-top: 2.2rem; } .subpage__more h2 { font-size: 1.1rem; letter-spacing: 0.14em; text-transform: uppercase; font-family: var(--font-body); font-weight: 500; color: var(--accent-ink); margin-bottom: 1.2rem; } .subpage__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; border-top: 1px solid var(--line); } .subpage__links li { border-bottom: 1px solid var(--line); } .subpage__links a { display: block; padding: 1.1rem 0; text-decoration: none; color: var(--ink); font-family: var(--font-display); font-size: clamp(1.05rem, 1.8vw, 1.25rem); transition: color var(--dur) var(--ease); } .subpage__links a:hover { color: var(--accent-ink); } .keynote__more, .beyond__more { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-ink); text-decoration: none; border-bottom: 1px solid var(--line); transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .keynote__more { margin-left: 1.1rem; } .beyond__more { margin-top: 0.4rem; } .keynote__more:hover, .beyond__more:hover { color: var(--ink); border-bottom-color: var(--accent); } html.lang-zh .keynote__more, html.lang-zh .beyond__more { letter-spacing: 0.06em; font-size: 0.84rem; } /* ---- Verified client testimonials ------------------------------------- Native scroll-snap does the carousel: swipe and keyboard work with no JS, and every card is real HTML so a crawler still reads all eight. The arrows are the only part JS adds. */ .vouch { position: relative; margin-top: clamp(2rem, 4vw, 3rem); } .vouch__track { display: grid; grid-auto-flow: column; grid-auto-columns: min(88%, 30rem); gap: 1px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; background: var(--line-dark); border-block: 1px solid var(--line-dark); scrollbar-width: none; } .vouch__track::-webkit-scrollbar { display: none; } .vouch__track:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* A floor of 0 let eight columns shrink to fit, so nothing ever overflowed and the carousel had nothing to scroll. Fixed width per card instead. */ @media (min-width: 900px) { .vouch__track { grid-auto-columns: calc((100% - 2px) / 3); } } .vouch__card { scroll-snap-align: start; background: var(--night); padding: clamp(1.75rem, 3vw, 2.5rem); display: flex; flex-direction: column; gap: 1.1rem; } .vouch__card q { quotes: none; display: block; color: var(--paper); font-size: 1rem; line-height: 1.68; } .vouch__meta { display: flex; flex-direction: column; gap: 0.15rem; margin-top: auto; } .vouch__who { color: var(--paper); font-weight: 600; font-size: 0.94rem; } .vouch__org { color: #C9A468; font-size: 0.88rem; } .vouch__ctx { color: var(--paper-soft); opacity: 0.6; font-size: 0.78rem; font-variant-numeric: tabular-nums; } .vouch__verify { color: var(--paper-soft); font-size: 0.8rem; text-decoration: underline; text-underline-offset: 3px; opacity: 0.75; } .vouch__verify:hover { color: #C9A468; opacity: 1; } .vouch__nav { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1.1rem; } .vouch__btn { width: 44px; height: 44px; border-radius: 50%; cursor: pointer; background: transparent; color: var(--paper-soft); border: 1px solid var(--line-dark); font-size: 1rem; line-height: 1; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease); } .vouch__btn:hover { border-color: #C9A468; color: #C9A468; } .vouch__btn[disabled] { opacity: 0.3; cursor: default; } @media (prefers-reduced-motion: reduce) { .vouch__track { scroll-behavior: auto; } } /* Five stars, in the site's gold rather than Google's yellow — same signal, without a foreign brand colour on the page. Only ever shown on quotes that really carry a star rating; LinkedIn recommendations don't have one. */ .stars { display: block; color: var(--accent); letter-spacing: 0.22em; font-size: 0.82rem; line-height: 1; } .quotebreak .stars { margin-bottom: 0.5rem; } .vouch__card .stars { color: #C9A468; font-size: 0.78rem; }