/* ══════════════════════════════════════════════════════════════════════ Talk rooms: the hub (talks.html) and one survey page per talk. A dark canvas with slow geometric shapes behind the content. The shapes drift on their own, and on a survey page they also shift a step each time the participant moves to a new question (driven by --step on ). Motion stops for anyone who has asked their system for reduced motion. ══════════════════════════════════════════════════════════════════════ */ :root{ --ink:#0e0c1d; --ink-2:#17142c; --paper:#f6f1e7; --muted:#b9b3cc; --line:rgba(246,241,231,.14); --tangerine:#ff6b35; --gold:#ffc93c; --teal:#2ec4b6; --magenta:#ef476f; --violet:#7b5cff; --accent:var(--tangerine); --ease:cubic-bezier(.22,1,.36,1); /* fast out, soft landing */ --spring:cubic-bezier(.34,1.56,.64,1); /* small overshoot for taps */ --radius:18px; --display:'Fraunces', Georgia, serif; --body:'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; } *{box-sizing:border-box} html,body{margin:0;min-height:100%} body{ background:var(--ink); color:var(--paper); font-family:var(--body); font-size:17px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; --step:0; } a{color:inherit} button{font:inherit;color:inherit} :focus-visible{outline:2px solid var(--gold);outline-offset:3px} /* ── The geometric backdrop ─────────────────────────────────────────── */ .geo{ position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden; background: radial-gradient(60vmax 60vmax at 110% -10%, rgba(123,92,255,.28), transparent 60%), radial-gradient(50vmax 50vmax at -10% 110%, rgba(255,107,53,.22), transparent 60%), var(--ink); } .geo svg{position:absolute;inset:-10%;width:120%;height:120%} .geo .layer{ transform-box:view-box;transform-origin:50% 50%; transition:transform 1.2s var(--ease); } /* Each layer turns and slides a little with every question. */ .geo .l1{transform:rotate(calc(var(--step) * 9deg)) translate(calc(var(--step) * -6px), 0)} .geo .l2{transform:rotate(calc(var(--step) * -6deg)) translate(0, calc(var(--step) * 5px))} .geo .l3{transform:translate(calc(var(--step) * 8px), calc(var(--step) * -4px))} .geo .spin{transform-box:fill-box;transform-origin:center;animation:spin 80s linear infinite} .geo .spin.rev{animation-duration:110s;animation-direction:reverse} .geo .drift{transform-box:fill-box;transform-origin:center;animation:drift 22s var(--ease) infinite alternate} .geo .drift.d2{animation-duration:28s;animation-delay:-8s} .geo .drift.d3{animation-duration:34s;animation-delay:-15s} .geo .pulse{animation:pulse 9s ease-in-out infinite} .geo .dash{stroke-dasharray:6 14;animation:march 40s linear infinite} @keyframes spin{to{transform:rotate(360deg)}} @keyframes drift{ 0%{transform:translate(0,0) rotate(0deg)} 100%{transform:translate(40px,-30px) rotate(18deg)} } @keyframes pulse{0%,100%{opacity:.55}50%{opacity:.95}} @keyframes march{to{stroke-dashoffset:-400}} /* Grain keeps the flat colour from banding and gives it a printed feel. */ .grain{ position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.09;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ── Shared type ─────────────────────────────────────────────────────── */ .kick{ font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase; color:var(--gold);margin:0 0 14px; } .display{ font-family:var(--display);font-weight:600;letter-spacing:-.02em;line-height:1.05;margin:0; font-variation-settings:"SOFT" 100, "WONK" 1; } .display em{font-style:italic;font-weight:400;color:var(--tangerine)} .muted{color:var(--muted)} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; min-height:52px;padding:0 26px;border-radius:999px;border:0;cursor:pointer; background:var(--paper);color:var(--ink);font-weight:700;font-size:16px;text-decoration:none; transition:transform .35s var(--spring), box-shadow .35s var(--ease), background .2s; box-shadow:0 10px 30px -12px rgba(255,107,53,.7); } .btn:hover{transform:translateY(-2px);box-shadow:0 16px 36px -12px rgba(255,107,53,.85)} .btn:active{transform:scale(.97)} .btn[disabled]{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none} .btn svg{width:18px;height:18px;transition:transform .3s var(--ease)} .btn:hover svg{transform:translateX(3px)} .btn--ghost{background:transparent;color:var(--paper);box-shadow:none;border:1px solid var(--line)} .btn--ghost:hover{box-shadow:none;background:rgba(246,241,231,.06)} .brandbar{ position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between; gap:16px;padding:20px clamp(16px,4vw,40px); } .brandbar a{text-decoration:none;font-weight:700;letter-spacing:.02em} .brandbar .small{font-size:13px;color:var(--muted)} /* ── The hub ─────────────────────────────────────────────────────────── */ .hub{position:relative;z-index:2;max-width:1080px;margin:0 auto;padding:6vh clamp(16px,4vw,40px) 80px} .hub__head{max-width:720px;margin-bottom:56px} .hub__head .display{font-size:clamp(44px,8vw,92px)} .hub__head p{font-size:clamp(17px,2vw,20px);color:var(--muted);margin:22px 0 0;max-width:560px} .talks{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))} .talk{ position:relative;display:flex;flex-direction:column;gap:14px; padding:28px;border-radius:var(--radius);text-decoration:none;overflow:hidden; background:linear-gradient(160deg, rgba(246,241,231,.08), rgba(246,241,231,.02)); border:1px solid var(--line); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); opacity:0;transform:translateY(24px); animation:rise .9s var(--ease) forwards; transition:transform .5s var(--ease), border-color .3s; } .talk:nth-child(2){animation-delay:.08s} .talk:nth-child(3){animation-delay:.16s} .talk:nth-child(4){animation-delay:.24s} .talk:hover{transform:translateY(-4px);border-color:rgba(255,201,60,.5)} .talk__art{position:absolute;right:-40px;top:-40px;width:180px;height:180px;opacity:.9;transition:transform .8s var(--ease)} .talk:hover .talk__art{transform:rotate(25deg) scale(1.06)} .talk__status{ align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase; padding:6px 10px;border-radius:999px;background:rgba(46,196,182,.16);color:var(--teal); } .talk__status.done{background:rgba(246,241,231,.08);color:var(--muted)} .talk__title{font-family:var(--display);font-size:28px;line-height:1.1;margin:0;max-width:85%} .talk__meta{font-size:14px;color:var(--muted);margin:0} .talk__go{margin-top:auto;padding-top:10px;font-weight:700;display:inline-flex;align-items:center;gap:8px;color:var(--gold)} .talk__go svg{width:18px;height:18px;transition:transform .3s var(--ease)} .talk:hover .talk__go svg{transform:translateX(4px)} .hub__foot{margin-top:64px;font-size:14px;color:var(--muted)} @keyframes rise{to{opacity:1;transform:none}} /* ── Reduced motion ──────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important} .talk{opacity:1;transform:none} }