/* RPK Events prototype. Theme tokens first; swap with . Default = C "Confluence". */ @font-face{font-family:Fraunces;src:url(/assets/fraunces.7234ed860a.woff2) format('woff2');font-weight:400 600;font-style:normal;font-display:swap} @font-face{font-family:Fraunces;src:url(/assets/fraunces-italic.f51349995e.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap} @font-face{font-family:Manrope;src:url(/assets/manrope.a30ddcd349.woff2) format('woff2');font-weight:400 700;font-display:swap} :root,[data-theme="c"]{--bg:#F5EFE6;--surface:#FFFFFF;--text:#1E2526;--muted:#5A5F5C;--accent:#1F5160;--on-accent:#F5EFE6;--accent2:#A4482B;--tint:#DCE7E6;--tint2:#EFE3D3;--line:#1E252619; --cta:#C2532F;--cta-hover:#A4482B;--line-strong:rgba(30,37,38,.22);--sage:#A9BC97;--sage-deep:#4F6B45;--peach:#EDB49B; --cat-outdoors:#CFDDBF;--cat-music:#F2C7B1;--cat-learning:#BCD6DA;--cat-story:#F3DDA8;--cat-arts:#E8C6CF;--cat-food:#F1D2A2;--cat-animals:#E2D5C4;--cat-sports:#CBD9E5;--cat-holiday:#EAC1B6; --display:'Fraunces',Georgia,serif;--ui:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;--radius:20px;--tone:rgba(245,239,230,.32)} [data-theme="a"]{--bg:#F6F1E9;--text:#26231F;--muted:#5F5A52;--accent:#4E5A44;--on-accent:#F6F1E9;--accent2:#9C5A3C;--tint:#DDE1D3;--tint2:#EEE6DA;--display:'Cormorant Garamond',Georgia,serif;--ui:'DM Sans',system-ui,sans-serif;--tone:rgba(246,241,233,.32)} [data-theme="b"]{--bg:#FBF7F4;--text:#2A1E22;--muted:#6A5A5E;--accent:#6B2737;--on-accent:#FBF7F4;--accent2:#8A6A32;--tint:#F2E3DF;--tint2:#F4ECE4;--display:'Bodoni Moda',Georgia,serif;--ui:'Jost',system-ui,sans-serif;--tone:rgba(251,247,244,.32)} *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.55 var(--ui)} img{max-width:100%;display:block} a{color:var(--accent)} :focus-visible{outline:3px solid var(--accent2);outline-offset:3px;border-radius:6px} .skip{position:absolute;left:-999px;top:8px;background:var(--text);color:var(--bg);padding:10px 14px;border-radius:10px;z-index:50}.skip:focus{left:8px} .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .wrap{max-width:1180px;margin:0 auto;padding:0 20px} /* header */ .top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 94%,transparent);border-bottom:1px solid var(--line);backdrop-filter:saturate(1.2)} .top .wrap{display:flex;align-items:center;gap:12px;height:62px} .brand{display:flex;align-items:center;text-decoration:none;color:var(--text)}.brand svg{height:34px;width:auto} .top nav{margin-left:auto;display:flex;gap:6px;align-items:center} .top nav a{color:var(--text);text-decoration:none;font-weight:600;font-size:14px;padding:8px 10px;border-radius:99px}.top nav a:hover{background:var(--tint)} [hidden]{display:none!important} .badge-sample{display:inline-flex;align-items:center;gap:6px;background:#FFF3C4;color:#5A4300;border:1px solid #E5C766;font-weight:700;font-size:12px;letter-spacing:.02em;padding:4px 10px;border-radius:99px} .badge-sample::before{content:"";width:7px;height:7px;border-radius:50%;background:#B58900} /* type */ h1,h2,h3{font-family:var(--display);font-weight:500;letter-spacing:-.01em;margin:0} .eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} /* hero */ .hero{padding:34px 0 18px} .hero h1{font-size:clamp(36px,9vw,64px);line-height:1.02}.hero h1 i{color:var(--accent2);font-style:italic;font-weight:400} .hero p{color:var(--muted);max-width:560px;margin:12px 0 22px;font-size:17px} .hero-art{display:block;width:100%;height:auto;margin-top:6px;color:var(--accent)} /* search */ .search{background:var(--surface);border-radius:26px;padding:8px;box-shadow:0 1px 2px #0000000f,0 14px 34px -18px #00000040;display:grid;gap:6px} .search label{display:block;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:2px} .search .field{padding:10px 14px;border-radius:18px}.search .field:focus-within{background:var(--tint)} .search input,.search select{width:100%;border:0;background:transparent;font:500 16px var(--ui);color:var(--text);padding:2px 0;min-height:28px} .search input:focus,.search select:focus{outline:none} .btn{appearance:none;border:0;background:var(--accent);color:var(--on-accent);font:700 15px var(--ui);padding:14px 22px;border-radius:99px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px} .btn:hover{filter:brightness(1.08)}.btn.ghost{background:transparent;color:var(--text);border:1.5px solid var(--line)} @media (min-width:760px){.search{grid-template-columns:1.4fr 1fr 1fr auto;align-items:center;border-radius:99px}.search .field{border-radius:99px}} /* chips */ .chips{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}.chips::-webkit-scrollbar{display:none} .chip{flex:none;appearance:none;border:1.5px solid var(--line);background:var(--surface);color:var(--text);font:600 14px var(--ui);padding:9px 14px;border-radius:99px;cursor:pointer;text-decoration:none;min-height:40px;display:inline-flex;align-items:center;gap:6px} .chip[aria-pressed="true"],.chip.on{background:var(--text);color:var(--bg);border-color:var(--text)} .chip:hover{border-color:var(--text)} /* sections */ .sec{padding:26px 0}.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}.sec-h h2{font-size:28px}.sec-h a{font-weight:700;font-size:14px} .rail{display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:14px;overflow-x:auto;padding-bottom:8px;scroll-snap-type:x mandatory}.rail>*{scroll-snap-align:start} @media (min-width:760px){.rail{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);overflow:visible}} .areas{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}@media (min-width:760px){.areas{grid-template-columns:repeat(4,1fr)}} .area{display:block;background:var(--surface);border-radius:18px;padding:16px;text-decoration:none;color:var(--text);border:1px solid var(--line)}.area b{font-family:var(--display);font-weight:500;font-size:21px;display:block}.area span{color:var(--muted);font-size:13px} .area:hover{border-color:var(--accent)} .note{background:var(--tint2);border-radius:18px;padding:16px 18px;color:var(--text);font-size:14px} /* event media: the consistent flyer treatment */ .media{position:relative;overflow:hidden;background:var(--tint);border-radius:var(--radius) var(--radius) 0 0;aspect-ratio:4/3;isolation:isolate} .media img{width:100%;height:100%;object-fit:cover;filter:saturate(.72) contrast(.94) brightness(1.03)} .media::after{content:"";position:absolute;inset:0;background:var(--tone);mix-blend-mode:multiply;pointer-events:none} /* poster mode: portrait/text-heavy flyers are never cropped; shown whole over a blurred, toned copy of themselves */ .media.poster .bg{position:absolute;inset:-20px;width:calc(100% + 40px);height:calc(100% + 40px);object-fit:cover;filter:blur(22px) saturate(.35) brightness(1.15);opacity:.55} .media.poster .fg{position:relative;z-index:1;height:84%;width:auto;margin:6% auto 0;object-fit:contain;border-radius:6px;box-shadow:0 8px 20px -10px #0006;filter:saturate(.6) contrast(.92)} .media.poster::before{content:"";position:absolute;inset:0;background:var(--tint);opacity:.55;z-index:0} .media .illus{position:absolute;inset:0;width:100%;height:100%} .media .tags{position:absolute;left:10px;top:10px;z-index:3;display:flex;gap:6px} .tag{background:#FFFFFFF0;color:var(--text);font-size:12px;font-weight:700;padding:4px 9px;border-radius:99px} /* cards */ .card{background:var(--surface);border-radius:var(--radius);box-shadow:0 1px 2px #0000000d,0 12px 28px -16px #00000038;overflow:hidden;position:relative;display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease} .card:hover{transform:translateY(-2px);box-shadow:0 1px 2px #0000000d,0 18px 34px -16px #00000048} .card .body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:4px;flex:1} .when{color:var(--accent);font-weight:700;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase} .card h3{font-size:21px;line-height:1.18}.card h3 a{color:var(--text);text-decoration:none}.card h3 a::after{content:"";position:absolute;inset:0;z-index:4} .card h3 a:focus-visible{outline:none}.card:has(a:focus-visible){outline:3px solid var(--accent2);outline-offset:3px} .meta{color:var(--muted);font-size:14px}.price{font-weight:700;font-size:14px;margin-top:auto;padding-top:8px} /* results list: horizontal cards on mobile */ .results{display:grid;gap:14px} @media (max-width:759px){.results .card{flex-direction:row;min-height:128px}.results .media{flex:none;width:118px;aspect-ratio:auto;border-radius:var(--radius) 0 0 var(--radius)}.results .media .tags{display:none}.results .card h3{font-size:18px}.results .media.poster .fg{height:80%;margin-top:10%}} @media (min-width:760px){.results{grid-template-columns:repeat(2,1fr)}}@media (min-width:1080px){.results{grid-template-columns:repeat(3,1fr)}} /* results layout */ .filters{position:sticky;top:62px;z-index:15;background:var(--bg);padding:12px 0 2px;border-bottom:1px solid var(--line)} .filters .row{display:flex;gap:8px;align-items:center} .filters input[type=search],.filters input[type=text],.filters select,.filters input[type=date]{font:500 15px var(--ui);color:var(--text);background:var(--surface);border:1.5px solid var(--line);border-radius:99px;padding:10px 14px;min-height:44px} .filters input[type=search],.filters input[type=text]{flex:1;min-width:0} .filters .row+.row{margin-top:8px} .count{font-size:14px;color:var(--muted);margin:14px 0 10px;display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap} .count b{color:var(--text)} .empty{text-align:center;padding:40px 10px}.empty h2{font-size:26px;margin-bottom:6px} .empty-try{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 14px} .linkbtn{background:none;border:0;color:var(--accent);font:700 14px var(--ui);text-decoration:underline;cursor:pointer;padding:4px} /* detail */ .detail .media{border-radius:var(--radius);aspect-ratio:4/3;margin-top:16px} .detail h1{font-size:clamp(32px,8vw,48px);line-height:1.06;margin:18px 0 10px} .facts{display:grid;gap:12px;margin:18px 0;padding:0;list-style:none}.facts li{display:flex;gap:12px;align-items:flex-start;background:var(--surface);border-radius:16px;padding:12px 14px} .facts svg{flex:none;width:22px;height:22px;color:var(--accent);margin-top:2px}.facts b{display:block} .actions{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 18px} .desc{font-size:17px;max-width:640px} .src{font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:14px;margin-top:22px} details.orig{margin-top:12px}details.orig summary{cursor:pointer;font-weight:700;color:var(--accent)}details.orig img{margin-top:10px;border-radius:12px;max-height:80vh;width:auto} @media (min-width:900px){.detail-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:start}.detail .media{position:sticky;top:80px}} footer{margin-top:40px;padding:28px 0 40px;border-top:1px solid var(--line);color:var(--muted);font-size:14px} @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.card:hover{transform:none}} .badge-sample{white-space:nowrap} @media (max-width:520px){.hide-sm{display:none}.top nav a{padding:8px 6px}.brand svg{height:30px}.top .wrap{gap:8px}} .status{align-self:flex-start;font-size:11.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:3px 8px;border-radius:6px;background:#F6E0D8;color:#7A2B14} .status.s-postponed{background:#F3E9C6;color:#5A4300}.status.s-moved{background:var(--tint);color:var(--accent)} .card.is-cancelled h3 a{text-decoration:line-through;text-decoration-thickness:1.5px;color:var(--muted)}.card.is-cancelled .media{opacity:.6} /* v2: fewer words, big photo, bold color */ .hero2{position:relative} .hero-photo{height:min(52vh,460px);overflow:hidden;background:var(--tint)} .hero-photo img{width:100%;height:100%;object-fit:cover;filter:saturate(.85)} .hero-panel{background:var(--accent);color:var(--on-accent);padding:26px 0 26px;margin-top:-1px} .hero-panel h1{font-size:clamp(44px,12vw,92px);line-height:.98;letter-spacing:-.02em;margin:0 0 22px;color:var(--on-accent);font-weight:500} .hero-panel .search{box-shadow:none} @media (min-width:900px){.hero2{display:grid;grid-template-columns:1.25fr 1fr;min-height:600px}.hero-photo{height:auto}.hero-panel{display:flex;align-items:center;margin:0} .hero-panel .wrap{padding:0 48px}.hero-panel .search{grid-template-columns:1fr;border-radius:26px}.hero-panel .search .field{border-radius:18px}} .band{background:var(--accent2);color:#FFF8F1;padding:30px 0 34px;margin-top:20px} .band h2{font-size:30px;margin-bottom:14px;color:#FFF8F1} .band .area{background:#FFF8F1;border:0} .foot{display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between}.foot nav{display:flex;gap:18px;flex-wrap:wrap}.foot a{color:var(--text);font-weight:600} footer{margin-top:0} .narrow{max-width:640px} .page-h1{font-size:clamp(36px,9vw,56px);margin:28px 0 18px}.page-h2{font-size:28px;margin:34px 0 12px} .faq{display:grid;grid-template-columns:1fr;gap:4px 18px;margin:0}.faq dt{font-weight:800;margin-top:12px}.faq dd{margin:0;color:var(--muted)} @media (min-width:600px){.faq{grid-template-columns:180px 1fr}.faq dt{margin-top:0}.faq dt,.faq dd{padding:10px 0;border-bottom:1px solid var(--line)}} .form{display:grid;gap:14px;margin-bottom:30px}.form label{display:grid;gap:6px;font-weight:700;font-size:14px} .form input,.form select,.form textarea{font:500 16px var(--ui);color:var(--text);background:var(--surface);border:1.5px solid #1E252640;border-radius:14px;padding:12px 14px;min-height:48px;width:100%} .form input[type=file]{padding:10px}.form input[readonly]{background:var(--tint)} .form .two{display:grid;grid-template-columns:1fr 1fr;gap:12px} .form fieldset{border:0;padding:0;margin:0}.form legend{font-weight:700;font-size:14px;margin-bottom:8px} .checks{display:flex;flex-wrap:wrap;gap:8px}.checks label{display:flex;flex-direction:row;align-items:center;gap:8px;font-weight:600;background:var(--surface);border:1.5px solid var(--line);border-radius:99px;padding:8px 14px} .checks input{width:18px;height:18px;min-height:0;accent-color:var(--accent)} .opt{font-weight:500;color:var(--muted);font-size:12px} .stub{font-size:13px;color:var(--muted);margin:0}.done{font-weight:800;color:var(--accent);margin:0} .form .btn{justify-self:start} .corr-ev{font-size:18px;margin:-6px 0 14px} .report{font-size:14px;font-weight:700;display:inline-block;min-height:24px;line-height:24px} /* WCAG 2.5.8 on desktop too (was 19px tall, 23.2px from the source link) */ .top nav a{white-space:nowrap} .sec.wrap{padding:26px 20px}.chips.wrap{padding:4px 20px 10px} /* ---------- Plan my day (wildcard, inside Confluence) ---------- */ .plan-entry{display:flex;align-items:center;gap:14px;margin:18px 0 0;background:var(--tint2);border-radius:28px;padding:10px 18px 10px 10px;text-decoration:none;color:var(--text);box-shadow:0 10px 30px -22px #0005} .plan-entry img{width:84px;height:84px;object-fit:cover;border-radius:22px;flex:none} .plan-entry span{display:grid;flex:1}.plan-entry b{font:500 24px/1.1 var(--display)}.plan-entry small{color:var(--muted);font-size:14px;margin-top:2px} .plan-entry svg{width:26px;height:26px;color:var(--accent2);flex:none}.plan-entry:hover{background:var(--tint)} .soft-hero{height:300px;overflow:hidden;border-radius:0 0 48px 48px;background:var(--tint)}.soft-hero img{width:100%;height:100%;object-fit:cover;filter:saturate(.85)} .ask{position:relative;margin-top:-56px;background:var(--surface);border-radius:32px;padding:24px 20px 26px;box-shadow:0 18px 40px -26px #0006;display:grid;gap:18px;margin-bottom:30px} .ask h1{font-size:36px;line-height:1.05;color:var(--accent)} .ask fieldset{border:0;margin:0;padding:0}.ask legend,.ask .from>label{font:500 19px var(--display);margin-bottom:10px;padding:0;color:var(--text);display:block} .pills{display:flex;flex-wrap:wrap;gap:8px}.pills label{position:relative;cursor:pointer} .pills input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer} .pills span{display:inline-flex;align-items:center;min-height:44px;padding:10px 18px;border-radius:99px;background:var(--bg);border:1.5px solid transparent;font-weight:600;font-size:15px;transition:background .2s} .pills input:checked+span{background:var(--tint);border-color:var(--accent);color:var(--accent)} .pills input:focus-visible+span{outline:3px solid var(--accent2);outline-offset:2px} .toggles span::before{content:"";width:16px;height:16px;border-radius:50%;border:1.5px solid var(--muted);margin-right:8px;flex:none} .toggles input:checked+span::before{background:var(--accent);border-color:var(--accent);box-shadow:inset 0 0 0 3px var(--tint)} .from-row{display:flex;gap:8px}.from-row input{flex:1;min-width:0;font:500 16px var(--ui);border:1.5px solid var(--line);background:var(--bg);border-radius:99px;padding:12px 18px;color:var(--text);min-height:48px} .round{width:48px;height:48px;border-radius:50%;border:0;background:var(--bg);color:var(--accent);display:grid;place-items:center;cursor:pointer}.round svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2} .btn.big{min-height:56px;font-size:17px;border-radius:99px;width:100%;background:var(--accent2);color:#FFF8F1} .plan-hero{margin:0}.plan-hero .media{aspect-ratio:auto;height:280px;border-radius:0 0 48px 48px} .plan-head{background:var(--surface);border-radius:28px;padding:18px 22px;margin-top:-44px;position:relative;box-shadow:0 18px 40px -26px #0006} .plan-head h1{font-size:38px;color:var(--accent)}.plan-head p{margin:4px 0 0;color:var(--muted);font-weight:600} .stops{list-style:none;margin:18px 0 0;padding:0} .stop{display:grid;grid-template-columns:62px 1fr;gap:10px;align-items:start} .stop .when span{display:block;font:500 14px/1.25 var(--display);color:var(--accent);padding-top:14px;text-align:right} .scard{background:var(--surface);border-radius:26px;overflow:hidden;box-shadow:0 10px 26px -20px #0005;display:grid;grid-template-columns:96px 1fr} .scard .media{aspect-ratio:auto;height:100%;min-height:118px;border-radius:0} .stop.main .scard{grid-template-columns:1fr}.stop.main .scard .media{height:170px} .sbody{padding:12px 14px 14px}.kind{margin:0;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent2)} .sbody h2{font-size:20px;line-height:1.2;margin:2px 0}.sbody h2 a{color:var(--text);text-decoration-color:var(--accent2);text-underline-offset:3px} .smeta{margin:0;color:var(--muted);font-size:14px} .rchips{list-style:none;padding:0;margin:8px 0 0;display:flex;flex-wrap:wrap;gap:6px} .rchip{display:inline-flex;align-items:center;gap:5px;background:var(--tint);color:var(--accent);font-size:12.5px;font-weight:700;padding:5px 10px 5px 8px;border-radius:99px} .rchip svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .hop{display:grid;grid-template-columns:62px 1fr;gap:10px;margin:0} .hopin{grid-column:2;display:flex;align-items:center;gap:6px;padding:10px 0 10px 30px;position:relative;color:var(--muted);font-size:13px;font-weight:700} .hopin::before{content:"";position:absolute;left:14px;top:0;bottom:0;border-left:2px dotted color-mix(in srgb,var(--accent) 45%,transparent)} .hopin svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .homecard{grid-template-columns:1fr;background:var(--tint2)}.homecard h2{font-size:22px} .plan-actions{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 8px} .alts-h{font-size:26px;margin:22px 0 10px}.fine{font-size:13px;color:var(--muted);margin:16px 0 30px} .plan-empty{padding:40px 20px} @media (min-width:760px){.soft-hero{height:420px}.plan-hero .media{height:420px}.stop{grid-template-columns:80px 1fr}.hop{grid-template-columns:80px 1fr}.scard{grid-template-columns:180px 1fr}.stop.main .scard{grid-template-columns:1fr}} .stop.main .scard{border:1.5px solid color-mix(in srgb,var(--accent2) 35%,transparent)}.stop.main .sbody{padding:16px 18px}.stop.main h2{font-size:24px} /* Real-feed robustness: long titles, long venues, paging */ .card h3{display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere} .card .meta{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere} .detail h1{overflow-wrap:anywhere;hyphens:auto}.detail .desc{overflow-wrap:anywhere;white-space:pre-line} .results .card{content-visibility:auto;contain-intrinsic-size:auto 140px} .more{display:grid;justify-items:center;gap:8px;margin:22px 0 8px}.more .fine{margin:0;color:var(--muted);font-size:13px}.more .btn{min-width:200px} .plan-hero .media img{object-fit:cover;filter:none}.plan-hero .media::after{display:none} /* Art system: our illustrations are the main image everywhere */ .hero-photo svg,.soft-hero svg,.pe-art svg{display:block;width:100%;height:100%} .plan-entry .pe-art{width:84px;height:84px;border-radius:22px;overflow:hidden;flex:none}.plan-entry .pe-art svg{width:100%;height:100%;color:inherit} .media svg.illus{position:absolute;inset:0;width:100%;height:100%}.media::after{display:none} @media (max-width:899px){.hero-photo{height:150px}.hero-panel{padding:16px 0 18px}.hero-panel h1{font-size:38px;margin:0 0 12px} .hero-panel .search{grid-template-columns:1fr 1fr auto;align-items:center;padding:6px;gap:6px}.hero-panel .search .f-more{display:none} .hero-panel .search .f-when{border-left:1px solid var(--line)} .hero-panel .search .field{padding:6px 12px}.hero-panel .search .btn{min-height:48px}.wk-first{margin-top:14px}} .card h3{-webkit-line-clamp:2;line-clamp:2} /* Detail: hero art, title, then a controlled organizer frame */ .detail h1{margin:18px 0 12px} .org-frame{margin:0 0 16px} .org-img{display:block;aspect-ratio:4/3;width:min(100%,266px);max-height:200px;border-radius:16px;background:var(--tint);box-shadow:inset 0 0 0 1px #1E252614;overflow:hidden} .org-img img{display:block;width:100%;height:100%;object-fit:contain;padding:8px} .org-frame figcaption{font-size:13px;color:var(--muted);margin-top:6px}.org-frame figcaption a{color:inherit} .facts .tags{display:block;font-size:14px;color:var(--muted);margin-top:2px} .desc-wrap{margin:18px 0 8px}.desc{margin:0;white-space:normal}.desc.clamp{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden} .desc a{color:var(--accent);overflow-wrap:anywhere} .detail .media{aspect-ratio:4/3} /* --- Engineering audit 2026-10-19 (patch 0005): 44px touch targets, lighter sticky filters on phones, smaller organizer thumbnail --- */ @media (pointer:coarse){ .chip{min-height:44px} .top nav a{min-height:44px;display:inline-flex;align-items:center} .foot nav a,.src a,.report,.linkbtn,.sec-h a{display:inline-flex;align-items:center;min-height:44px} .foot nav{gap:4px 18px} .hero-panel .search input,.hero-panel .search select{min-height:36px} } @media (max-width:520px){ .filters{position:static} /* was sticky: header + filters covered 281 of 844px while scrolling */ .filters .chips{position:sticky;top:62px;z-index:15;background:var(--bg);padding:6px 0} .org-img{width:120px;max-height:90px;border-radius:12px} /* organizer image = small credited thumbnail, never a second hero */ } /* ---- loom-1 (Ben's review #1) ---- */ /* 1. Header: logo far left, nav far right, nav as large as the 62px bar allows */ .top .wrap{max-width:none;padding:0 clamp(14px,2.6vw,40px)} .top nav{gap:2px}.top nav a{font-size:17px;padding:8px 9px} @media (min-width:760px){.top nav{gap:8px}.top nav a{font-size:19px;padding:10px 14px}.brand svg{height:38px}} @media (max-width:520px){.top nav a{font-size:17px;padding:8px 7px}} /* 4. Hero search = Where + When (+ Search) */ @media (min-width:760px){.search{grid-template-columns:1fr 1fr auto}} /* 5. Quick chips spread across the full width */ /* 9. Calm, smaller filter bar on This Week / results */ .filters.calm{padding:10px 0 4px} .filters.calm .row{gap:6px;flex-wrap:nowrap} .filters.calm input[type=search],.filters.calm input[type=text],.filters.calm select,.filters.calm input[type=date]{font:500 14px var(--ui);min-height:40px;padding:8px 12px;border-width:1px;border-radius:12px;background:var(--surface)} .filters.calm .row.sub select{flex:1 1 0;min-width:0;color:var(--muted);background-color:transparent} .filters.calm .row+.row{margin-top:6px} .filters.calm .tool{flex:none;width:40px;height:40px;display:grid;place-items:center;border:1px solid var(--line);border-radius:12px;background:transparent;color:var(--text);cursor:pointer} .filters.calm .chips{padding-top:8px} @media (min-width:900px){.filters.calm{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:6px 10px;align-items:center}.filters.calm .row+.row{margin-top:0}.filters.calm .chips{grid-column:1/-1}} /* 14-18. Plan: filled selected pills (also Engineering P2-03), compact result */ .pills input:checked+span{background:var(--accent);color:var(--on-accent);border-color:var(--accent)} .soft-hero.small{height:180px} @media (min-width:760px){.soft-hero.small{height:240px}} .plan-head{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 14px;max-width:760px}.plan-head h1{font-size:32px}.plan-head .btn{grid-row:1/3;grid-column:2} .plan-group{font-size:22px;margin:26px 0 12px} /* 20-22. Submit: grouped, even fields */ .form.pro{gap:18px} .form.pro .fs{background:var(--surface);border-radius:22px;padding:18px 18px 20px;display:grid;gap:14px;box-shadow:0 1px 2px #0000000a} .form.pro .fs h2{font:500 20px var(--display);margin:0;color:var(--accent)} .form.pro .three{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:10px} .form input,.form select{height:48px;min-height:48px;box-sizing:border-box} .form select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 20px) 21px,calc(100% - 15px) 21px;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px} .form input[type=file]{height:auto} .form.pro .fs input,.form.pro .fs select,.form.pro .fs textarea{background-color:var(--bg)} @media (max-width:420px){.form.pro .three input{padding:12px 8px;font-size:15px}} /* 24. Help: two cards */ .help-cards{display:grid;gap:12px;margin:8px 0 26px} .help-card{display:grid;gap:4px;background:var(--surface);border-radius:22px;padding:18px 20px;text-decoration:none;color:var(--text);box-shadow:0 1px 2px #0000000a} .help-card b{font:500 22px var(--display);color:var(--accent)}.help-card span{color:var(--muted)}.help-card:hover{background:var(--tint)} @media (max-width:520px){.top nav a.hide-sm{display:none}} @media (max-width:759px){ .hero-panel .search{grid-template-columns:1fr 1fr auto}.hero-panel .search .field{padding:6px 10px}.hero-panel .search .btn{padding:0 16px}} .form input[type=checkbox],.form input[type=radio]{height:18px;min-height:0;width:18px} .form.pro .three>label,.form.pro .two>label{min-width:0}.form.pro input{min-width:0} .form.pro .opt{font-weight:500;color:var(--muted);margin-left:4px} .checks label{min-height:44px} .count-tools{display:flex;align-items:center;gap:6px} .count-tools select{font:600 14px var(--ui);color:var(--text);background:transparent;border:0;padding:6px 4px;min-height:40px;cursor:pointer} .plan-head{grid-template-columns:1fr}.plan-head .btn{grid-row:auto;grid-column:auto;justify-self:start;margin-top:8px} /* ---- Map view (Loom #10, map-spec.md) ---- */ .filters.calm .maptool{width:auto;padding:0 14px;gap:6px;display:inline-flex;align-items:center;font:600 14px var(--ui)} .maptool[aria-pressed="true"]{background:var(--text);color:var(--bg);border-color:var(--text)} .nomap-line{margin:4px 0 0;font-size:12px;color:var(--muted)} .map-move{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);cursor:pointer}.map-move input{accent-color:var(--accent)} .map-pane{position:relative;background:#F3ECE1;overflow:hidden} .map{position:absolute;inset:0} .map-pill{position:absolute;z-index:3;border:0;border-radius:99px;background:var(--surface);color:var(--text);font:700 13px var(--ui);padding:9px 14px;min-height:40px;box-shadow:0 6px 18px -8px #0006;cursor:pointer} .map-pill.nomap{top:12px;left:12px}.map-pill.area{top:12px;left:50%;transform:translateX(-50%);background:var(--accent);color:var(--on-accent)} .map-pill.nomap[aria-pressed="true"]{background:var(--text);color:var(--bg)} .map-msg{position:absolute;inset:auto 0 50% 0;text-align:center;color:var(--muted);z-index:2;margin:0} .pin{position:relative;width:30px;height:38px;border:0;padding:0;background:none;cursor:pointer} .pin::before{content:"";position:absolute;left:3px;top:0;width:24px;height:24px;background:var(--accent2);border:3px solid #F5EFE6;border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 3px 8px -3px #0007;transition:transform .15s} .pin span{position:absolute;left:0;right:0;top:4px;text-align:center;color:#FFF8F1;font:800 11px var(--ui)} .pin i{display:none;position:absolute;left:50%;bottom:42px;transform:translateX(-50%);white-space:nowrap;background:var(--surface);color:var(--text);font:600 12px var(--ui);font-style:normal;padding:4px 8px;border-radius:8px;box-shadow:0 4px 12px -6px #0006} .pin:hover i,.pin:focus-visible i,.pin.lbl i,.pin.on i{display:block} .pin.on::before,.pin.hot::before{background:var(--accent);transform:rotate(-45deg) scale(1.25)}.pin.on,.pin.hot{z-index:5} .pin:focus-visible{outline:none}.pin:focus-visible::before{outline:3px solid var(--accent2);outline-offset:2px} .card.pin-hit{outline:3px solid var(--accent);outline-offset:2px} .list-pill{display:none} .sheet{position:absolute;left:0;right:0;bottom:0;z-index:6;background:var(--bg);border-radius:24px 24px 0 0;box-shadow:0 -10px 30px -12px #0006;padding:8px 14px 18px;max-height:62%;overflow:auto} .sheet-grip{width:44px;height:5px;border-radius:9px;background:#1E252633;margin:2px auto 8px} .sheet-h{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px}.sheet-h b{font:500 19px var(--display)} .sheet-cards{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:4px} .sheet-cards .card{flex:0 0 86%;scroll-snap-align:start;flex-direction:row;min-height:118px}.sheet-cards .media{flex:none;width:104px;aspect-ratio:auto}.sheet-cards .media .tags{display:none}.sheet-cards .card h3{font-size:17px} .sheet-cards .card:only-child{flex-basis:100%} @media (min-width:900px){ body.map-open main>.wrap{max-width:none;padding:0 clamp(14px,2.6vw,40px)} body.map-open .res-split{display:grid;grid-template-columns:minmax(0,55fr) minmax(480px,45fr);gap:22px;align-items:start} body.map-open .map-pane{position:sticky;top:var(--maptop,140px);height:calc(100vh - var(--maptop,140px) - 14px);border-radius:var(--radius);margin-top:12px} body.map-open .results{grid-template-columns:1fr} body.map-open .results .card{flex-direction:row;min-height:128px}body.map-open .results .media{flex:none;width:150px;aspect-ratio:auto;border-radius:var(--radius) 0 0 var(--radius)}body.map-open .results .media .tags{display:none} body.map-open .results .card h3{font-size:19px} } @media (max-width:899px){ body.map-open{overflow:hidden} body.map-open .res-col,body.map-open footer,body.map-open .filters .row{display:none} body.map-open .filters{position:sticky;top:62px;z-index:16} body.map-open .map-pane{position:fixed;left:0;right:0;top:var(--maptop,120px);bottom:0;z-index:12} body.map-open .list-pill{display:inline-flex;align-items:center;gap:8px;position:absolute;left:50%;bottom:calc(max(var(--credit,34px),12px) + 10px);transform:translateX(-50%);z-index:5;border:0;border-radius:99px;background:var(--text);color:var(--bg);font:700 15px var(--ui);padding:12px 22px;min-height:48px;box-shadow:0 10px 24px -10px #000a;cursor:pointer} body.map-open .sheet:not([hidden])~.list-pill{display:none} body.map-open .map-pane.sheet-open>.map{height:auto;bottom:var(--sheet-h,0px)} /* credit line stays above the open sheet */ .maplibregl-ctrl-top-right{top:56px} } .map-pane>.map{position:absolute;inset:0;width:100%;height:100%} .map-pane .maplibregl-ctrl-bottom-left,.map-pane .maplibregl-ctrl-bottom-right{z-index:6} /* credit line above pins (a selected pin is z 5) */ /* Plan mini-search (plan-flow-spec.md) */ .plan-res{padding-bottom:30px;max-width:1180px} .plan-count{font:500 24px var(--display);margin:4px 0 8px}.plan-count b{color:var(--accent)} .plan-group{font:500 20px var(--display);margin:22px 0 10px} .plan-empty{text-align:center;padding:16px 8px}.plan-empty h2{font-size:24px;margin:0 0 12px} .plan-unknown{margin:22px 0 0}.plan-unknown summary{cursor:pointer;font-weight:700;color:var(--accent);min-height:44px;display:flex;align-items:center} .plan-unknown .results{margin-top:10px} .plan-all{margin:22px 0 0}.plan-all a{font-weight:700;color:var(--accent)} .pills label[aria-disabled="true"]{opacity:.4}.pills label[aria-disabled="true"] input{cursor:not-allowed} .ask{margin-bottom:18px} .see-pill{display:none} @media (max-width:759px){.see-pill:not([hidden]){display:inline-flex;position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:12;background:var(--text);color:var(--bg);font:700 15px var(--ui);padding:12px 22px;border-radius:99px;min-height:48px;align-items:center;text-decoration:none;box-shadow:0 10px 24px -10px #000a} body.res-seen .see-pill{display:none}} .hero-panel .search .f-date input{min-height:28px} @media (min-width:760px){.search.has-date{grid-template-columns:1fr 1fr 1fr auto}} @media (max-width:759px){.hero-panel .search.has-date{grid-template-columns:1fr 1fr}.hero-panel .search.has-date .btn{grid-column:1/-1}.hero-panel .search.has-date .f-date{grid-column:1/-1}} /* Google adapter cluster bubbles (only used when /config.js picks google) */ .g-cluster{display:grid;place-items:center;border-radius:50%;background:var(--accent);color:#F5EFE6;border:3px solid #F5EFE6;font:800 13px var(--ui);box-sizing:border-box;width:34px;height:34px} .g-cluster.m{width:42px;height:42px}.g-cluster.l{width:52px;height:52px} /* Schedule (schedule[] / series): real dates, never "open every day" */ .sched{margin:18px 0 6px;padding:16px 18px;background:var(--surface);border-radius:18px;border:1px solid color-mix(in srgb,var(--text) 8%,transparent)} .sched h2{font:500 20px var(--display);margin:0 0 10px} .sched-sum{margin:-4px 0 12px;color:var(--muted);font-weight:600} .sched-m{margin:0 0 12px}.sched-m h3{font:700 12px var(--ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 8px} .sched-days{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px} .sched-days li,.sched-days li a{display:inline-flex;align-items:baseline;gap:5px;min-height:40px;min-width:64px;justify-content:center;align-items:center;padding:0 12px;border-radius:12px;background:var(--bg);font:700 15px var(--ui);color:var(--text);text-decoration:none} .sched-days li a{padding:0;min-height:0;min-width:0;background:none} .sched-days li span{font-weight:500;color:var(--muted);font-size:13px} .sched-days li.is-next{background:var(--accent);color:#F5EFE6}.sched-days li.is-next span,.sched-days li.is-next a{color:#F5EFE6} .sched-rows{list-style:none;margin:0;padding:0}.sched-rows li{display:flex;gap:10px;padding:10px 0;border-top:1px solid color-mix(in srgb,var(--text) 8%,transparent)} .sched-rows li:first-child{border-top:0}.sched-rows li b{min-width:110px}.sched-rows li a{display:flex;gap:10px;color:inherit} .sched-rows li.is-next b{color:var(--accent)} .sched-more summary{cursor:pointer;font-weight:700;color:var(--accent);min-height:44px;display:flex;align-items:center} .sched-more[open] summary{margin-bottom:8px} /* review-4d61c12: detail actions as a 2x2 grid on phones (was wrapping 3+1) */ @media (max-width:759px){.detail-grid .actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.detail-grid .actions .btn{width:100%;justify-content:center;text-align:center}} /* P2-02 tap targets: 44x44 CSS px on phones via padding or invisible hit areas (no bulkier visuals). Audit: check_targets.py */ .card{position:relative} .card h3 a::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1} /* whole card is the link's hit area */ .card h3 a:focus-visible{outline:none}.card:has(h3 a:focus-visible){outline:3px solid var(--accent2);outline-offset:3px} .pin::after{content:"";position:absolute;inset:-6px -7px -2px} /* 44x46 around the 30x38 pin */ @media (max-width:759px){ .brand{min-height:44px;padding:0 4px 0 0} .sec-h a{min-width:44px;justify-content:center;padding:0 6px} #back,.plan-all a,.see-all{display:inline-flex;align-items:center;min-height:44px} .linkbtn{min-height:44px;min-width:44px;padding:0 8px} .filters.calm input[type=search],.filters.calm input[type=text],.filters.calm input[type=date],.filters.calm select{min-height:44px} .filters.calm .tool{height:44px;min-width:44px} .hero-panel .search .field{padding-top:4px;padding-bottom:2px} .hero-panel .search input,.hero-panel .search select{min-height:44px} .map-pill{min-height:44px} .sched-days li a{min-height:40px;padding:0 12px;margin:0 -12px;position:relative} .sched-days li a::after{content:"";position:absolute;inset:-2px 0} .org-frame figcaption a,.src a{display:inline-flex;align-items:center;min-height:44px} } @media (pointer:coarse),(max-width:759px){ .map-pane .maplibregl-ctrl-group button{width:44px;height:44px} .maplibregl-ctrl-attrib-button{position:relative} .maplibregl-ctrl-attrib-button::after{content:"";position:absolute;inset:-10px} .maplibregl-ctrl-attrib-inner a{display:inline-block;padding:5px 0} /* attribution text: 24px+ with spacing (WCAG 2.5.8); legally required wording */ } /* P2-04 home chips on phones: home.js balanceChips() breaks the rows evenly (like text-wrap:balance), so no chip is left alone and stretched */ .map-edge{position:absolute;z-index:3;width:34px;height:34px;border-radius:50%;background:#A4482B;color:#F5EFE6;display:grid;place-items:center;box-shadow:0 2px 8px rgba(31,81,96,.25);pointer-events:none;transition:opacity .15s} .map-edge[hidden]{display:none} .g-cluster.hot{box-shadow:0 0 0 4px #A4482B} /* ---- family-first (phase 2) ---- */ /* C6: organizer image is the detail hero. Contained over a blurred copy of itself so any shape sits well. */ .hero-org{position:relative;margin:0;aspect-ratio:4/3;overflow:hidden;border-radius:24px;background:var(--tint)} .hero-org .bg{position:absolute;inset:-24px;width:calc(100% + 48px);height:calc(100% + 48px);object-fit:cover;filter:blur(22px) saturate(1.15);opacity:.65} .hero-org .fg{position:absolute;inset:0;display:block} .hero-org .fg img{width:100%;height:100%;object-fit:contain;display:block} .hero-org figcaption{position:absolute;right:8px;bottom:8px;z-index:2;font-size:13px;background:#1E2526cc;color:#fff;border-radius:999px;padding:0 12px} .hero-org figcaption a{color:inherit;display:inline-flex;align-items:center;min-height:32px} .detail .hero-org{position:sticky;top:80px} .title-row{display:flex;gap:14px;align-items:center}.title-row h1{margin:0} .art-mark{flex:none;width:64px;height:64px;border-radius:18px;overflow:hidden;background:var(--tint)}.art-mark svg{display:block;width:100%;height:100%} /* C5: price and ages first, one clear button */ .lead-facts{font-size:20px;margin:12px 0 0;color:var(--accent2)} .detail-grid .actions .btn.cta{grid-column:1/-1;font-size:18px;min-height:52px} .tags-line{color:var(--muted);font-size:14px} @media (max-width:899px){.hero-photo{height:128px}.detail .hero-org{position:relative;top:0;aspect-ratio:16/10}.art-mark{width:52px;height:52px;border-radius:14px}} /* C1: home rails */ .rail-sec[hidden]{display:none} .sec[hidden],[data-chip][hidden]{display:none!important} /* E1 form states */ .done.is-ok{color:var(--accent);font-weight:600}.done.is-err{color:#B4532F;font-weight:600} [aria-invalid=true]{outline:2px solid #B4532F;outline-offset:1px} .forms-off{font-size:18px;margin:12px 0}.forms-off a{display:inline-flex;align-items:center;min-height:44px} .sec-h a{display:inline-flex;align-items:center;min-height:44px} .today-done{font-size:18px;color:var(--muted);margin-top:18px} .sec.is-done .rail{display:block;overflow:visible} /* Loom #2: category tags on cards and detail (wrap, small, legible; not interactive) */ .ctags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;margin:10px 0 0;padding:0} .ctags li{font-size:13px;line-height:1.25;font-weight:600;color:var(--accent);background:var(--tint);border-radius:999px;padding:3px 10px;white-space:nowrap} /* Loom #2: compact home hero so the first event cards show without scrolling (1280x800, 1440x900) and stay compact on phones */ @media (min-width:900px){ .hero2{grid-template-columns:1fr 1.15fr;min-height:0;height:clamp(250px,34vh,320px)} .hero-photo{height:100%} .hero-panel .wrap{padding:0 40px} .hero-panel h1{font-size:clamp(34px,3.1vw,46px);line-height:1.04;margin:0 0 16px} .hero-panel .search{grid-template-columns:1fr 1fr auto;align-items:center;border-radius:22px;padding:6px;gap:6px} .hero-panel .search .field{border-radius:16px;padding:6px 14px}.hero-panel .search .f-when{border-left:1px solid var(--line)} .hero-panel .search.has-date{grid-template-columns:1fr 1fr 1fr auto} .wk-first{margin-top:4px} } @media (max-width:899px){.hero-photo{height:96px}.hero-panel{padding:14px 0 16px}.hero-panel h1{font-size:28px;line-height:1.08;margin:0 0 12px}} /* Loom #2 (C6 revised): organizer image at native size, never upscaled or cropped, centered on a solid brand tile */ .hero-org{display:flex;align-items:center;justify-content:center;background:var(--tint2);border:2px solid var(--accent);padding:16px;box-sizing:border-box} .hero-org .bg{display:none} .hero-org .fg{position:static;inset:auto;display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-height:0} .hero-org .fg img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain;image-rendering:auto;border-radius:6px} @media (max-width:759px){.wk-first{margin-top:6px}} @media (max-width:899px){.sheet{max-height:46%}} /* Loom #2: taller cards (category tags) must not push the open sheet over the map credit line */ .map-pane .gm-style-cc{z-index:6!important} /* Google credit row above our pins too (a selected pin is z 5) */ /* Loom #2 follow-up: home hero art = the icon arch over a river (two compositions: wide for desktop, strip for phone) */ .hero-arch{background:#EFE3D3}.hero-arch>div{width:100%;height:100%}.hero-arch .ha-m{display:none} @media (max-width:899px){.hero-arch .ha-d{display:none}.hero-arch .ha-m{display:block}} /* Loom #2 follow-up: phones (<=600px): category pills on home, This week/results and Plan "Activity" are ONE horizontally scrollable row (scroll-snap, no scrollbar, right-edge fade until the end). Desktop is unchanged. */ @media (max-width:600px){ .cat-scroll,.pills.cat-scroll{display:flex;flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;gap:8px; scroll-snap-type:x proximity;scroll-padding-inline:16px;padding-inline:16px 24px;scrollbar-width:none;-webkit-overflow-scrolling:touch; -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 44px),transparent)} .cat-scroll::-webkit-scrollbar{display:none} .cat-scroll.at-end{-webkit-mask-image:none;mask-image:none} .cat-scroll:not(.wrap){margin-inline:-20px} .cat-scroll>.chip,.cat-scroll>label{flex:0 0 auto;scroll-snap-align:start;min-height:44px;white-space:nowrap} .cat-scroll>.chip:focus-visible,.cat-scroll input:focus-visible+span{outline-offset:-3px} .filters .chips.cat-scroll{padding-block:6px} } @media (max-width:600px){ .filters .chips.cat-scroll{padding-inline:16px 24px} fieldset:has(> .cat-scroll){min-width:0} } /* ===== Accounts + favorites (accounts-spec.md ยง7). Everything [data-acct] stays hidden until accounts are on. ===== */ html:not(.acct-on) [data-acct]{display:none!important} html:not([data-auth="in"]) [data-auth-show="in"],html:not([data-auth="out"]) [data-auth-show="out"]{display:none!important} /* Heart */ .ico-heart{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round;overflow:visible} [data-fav][aria-pressed="true"] .ico-heart{fill:var(--accent2);stroke:var(--accent2);animation:fav-pop .32s ease-out} @keyframes fav-pop{0%{transform:scale(.7)}60%{transform:scale(1.18)}100%{transform:scale(1)}} .fav{position:absolute;top:6px;right:6px;z-index:6;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;padding:0;cursor:pointer; background:color-mix(in srgb,var(--surface) 92%,transparent);color:var(--text);box-shadow:0 1px 3px #0000002e} .fav:hover{background:var(--surface)}.fav:focus-visible{outline:3px solid var(--accent2);outline-offset:2px;border-radius:50%} .fav-d{padding:0;width:48px}.fav-d .ico-heart{width:22px;height:22px} .fav-d[aria-pressed="true"]{border-color:var(--accent2)} /* Header auth */ .auth{display:flex;align-items:center;margin-left:4px} .auth a{color:var(--text);text-decoration:none;font-weight:600;font-size:17px;min-height:44px;display:inline-flex;align-items:center;gap:6px;padding:8px 9px;border-radius:99px;white-space:nowrap} .auth a:hover{background:var(--tint)} .auth-login{border:1.5px solid var(--text)} .auth-in{display:flex;align-items:center;gap:4px;position:relative} .auth-avatar{width:44px;height:44px;border-radius:50%;border:0;background:var(--accent);color:var(--on-accent);font:700 17px var(--ui);cursor:pointer;display:grid;place-items:center} .auth-menu{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;background:var(--surface);border-radius:18px;padding:8px;box-shadow:0 2px 4px #00000014,0 18px 40px -16px #00000055;display:grid;gap:2px;z-index:30} .auth-menu[hidden]{display:none} .auth-email{font-size:14px;color:var(--muted);padding:10px 12px;overflow-wrap:anywhere} .auth-menu form{margin:0}.auth-menu button{width:100%;text-align:left;min-height:44px;border:0;background:none;font:600 16px var(--ui);color:var(--text);padding:10px 12px;border-radius:12px;cursor:pointer} .auth-menu button:hover{background:var(--tint)} @media (min-width:760px){.auth a{font-size:19px;padding:10px 14px}} /* Phone (<=600px): About moves to the footer only; signed in collapses to the avatar, whose menu carries "Your events". */ /* /login/ */ .acct-page{max-width:420px;padding-bottom:48px} .gsi{display:flex;align-items:center;justify-content:center;gap:12px;min-height:48px;padding:0 16px;background:#FFFFFF;border:1px solid #747775;border-radius:99px; color:#1F1F1F;font:500 16px/20px Roboto,system-ui,Arial,sans-serif;letter-spacing:.25px;text-decoration:none} .gsi:hover{background:#F8F8F8;box-shadow:0 1px 3px #3c40434d}.gsi .g-mark{width:20px;height:20px;flex:none} .or-rule{display:flex;align-items:center;gap:12px;color:var(--muted);margin:22px 0;font-size:14px}.or-rule::before,.or-rule::after{content:"";flex:1;height:1px;background:var(--line)} .seg{display:grid;grid-template-columns:1fr 1fr;background:var(--tint);border-radius:99px;padding:4px;margin-bottom:16px} .seg button{min-height:44px;border:0;border-radius:99px;background:none;font:700 15px var(--ui);color:var(--text);cursor:pointer} .seg button[aria-pressed="true"]{background:var(--surface);box-shadow:0 1px 3px #00000022} .acct-page .form .btn{justify-self:stretch} .acct-err{margin:0;padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--accent2) 12%,var(--surface));color:var(--accent2);font-weight:600} .acct-forgot{margin:0;color:var(--muted);font-size:15px}.acct-forgot a{display:inline-flex;align-items:center;min-height:44px} /* /you/ */ .acct-you{padding-bottom:48px} .acct-you section{margin:20px 0 28px}.acct-you .sec-title{font:500 26px var(--display);margin:0 0 12px;color:var(--accent)} .acct-banner{margin:0 0 16px}.acct-banner a{display:flex;align-items:center;min-height:52px;padding:12px 18px;border-radius:18px;background:var(--tint);color:var(--accent);font-weight:700;text-decoration:none} .acct-empty{display:grid;justify-items:center;gap:6px;padding:48px 0;color:var(--muted);text-align:center}.acct-empty .ico-heart{width:56px;height:56px;color:var(--accent2);stroke-width:1.5} .acct-empty p{font:500 24px var(--display);color:var(--text);margin:0 0 10px} .is-past .card{opacity:.62}.is-past .card:hover{opacity:1} .gone-list{list-style:none;margin:0;padding:0;display:grid;gap:8px} .gone-row{display:flex;align-items:center;gap:12px;padding:10px 10px 10px 18px;border-radius:18px;background:var(--tint2);color:var(--muted)} .gone-row .ico-heart{width:20px;height:20px;flex:none}.gone-row span{flex:1}.gone-row .btn{min-height:44px;padding:8px 16px} /* About: privacy + terms slots (COO wording) */ .about .legal{margin-top:28px}.about .legal h2{font:500 24px var(--display);color:var(--accent);margin:0 0 8px} .about .legal div:empty{min-height:1px} @media (max-width:759px){.results .card .body{padding-right:54px}} /* /you/: removed-event title + delete account (Engineering wiring) */ .gone-title{display:block;font-weight:700;color:var(--text);overflow-wrap:anywhere;text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--muted) 60%,transparent);text-decoration-thickness:1.5px} .gone-row span{min-width:0} .acct-delete{margin:44px 0 0;border-top:1px solid var(--line);padding-top:12px;max-width:520px} .acct-delete[hidden]{display:none} .acct-delete summary{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px;cursor:pointer;color:var(--muted);font-weight:600;list-style:none;border-radius:10px} .acct-delete summary::-webkit-details-marker{display:none} .acct-delete summary::after{content:"";width:8px;height:8px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg) translateY(-2px);transition:transform .2s} .acct-delete[open] summary::after{transform:rotate(-135deg) translateY(-2px)} .acct-delete summary:hover{color:var(--accent2)} .acct-delete .form{margin:10px 0 0;padding:18px;border-radius:18px;background:var(--surface);border:1.5px solid color-mix(in srgb,var(--accent2) 35%,transparent);gap:12px} .acct-delete .form > p:first-child{margin:0;color:var(--muted)} .acct-delete .form .btn{justify-self:start;color:var(--accent2);border-color:var(--accent2);min-height:48px} .acct-delete .form .btn:hover{background:color-mix(in srgb,var(--accent2) 10%,transparent);filter:none} .acct-delete label[hidden]{display:none} /* Legal pages: verbatim prose, readable measure */ .legal-page{max-width:68ch;padding-top:8px;padding-bottom:56px;font-size:17px;line-height:1.65} .legal-page h2{font:500 24px/1.2 var(--display);color:var(--accent);margin:34px 0 8px} .legal-page p{margin:0 0 14px}.legal-page p:first-of-type i{color:var(--muted);font-style:normal;font-size:15px} .legal-page a{display:inline-flex;align-items:center;min-height:44px} .about .legal-links{margin-top:24px}.about .legal-links a{display:inline-flex;align-items:center;min-height:44px} .auth-menu .menu-del{color:var(--accent2);font-weight:600;display:flex;min-height:44px;padding:10px 12px;border-radius:12px;font-size:16px} .acct-delete,.legal-links a,.legal-page h2{scroll-margin-top:80px} /* clear the 62px sticky header on anchor jumps */ /* ===== Header nav v2 (Ben, Oct 19): one even gap on desktop; avatar = logo-icon height; phone = hamburger ===== */ :root{--navpad:9px} /* 18px between nav items (Ben, Oct 19 v3) */ .top nav{gap:0}.top nav a,.auth a{padding:10px var(--navpad);font-size:17px} @media (min-width:760px){.top nav{gap:0}.top nav a,.auth a{font-size:19px;padding:10px var(--navpad)}} .top .auth{margin-left:-12px}.auth-in{gap:0} /* cancel .top .wrap's 12px flex gap: nav->auth spacing = the same 2x--navpad */ .auth-login{border:0;text-decoration:underline!important;text-underline-offset:5px;text-decoration-thickness:1.5px} /* avatar: 44px tap area, visible circle matches the logo icon (svg height) */ .auth-avatar{width:44px;height:44px;padding:0;margin-left:calc(var(--navpad) - 6px);background:none;border-radius:50%;display:grid;place-items:center} .auth-avatar>span{width:29px;height:29px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font:700 15px var(--ui)} @media (min-width:760px){.auth-avatar>span{width:32px;height:32px;font-size:15px}} /* logo icon = 32px at the 38px svg (29px at 34px) */ .auth-avatar:hover>span{filter:brightness(1.12)} /* hamburger */ .nav-btn{display:none;margin-left:auto;width:44px;height:44px;border:0;background:none;color:var(--text);border-radius:12px;cursor:pointer;place-items:center;padding:0} .nav-btn svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round} .nav-btn[aria-expanded="true"]{background:var(--tint)} .site-menu{display:none} @media (max-width:600px){ .top .nav-main,.top .auth{display:none!important} .nav-btn{display:grid} .site-menu:not([hidden]){display:block;position:absolute;left:0;right:0;top:100%;background:var(--bg);border-bottom:1px solid var(--line);box-shadow:0 18px 30px -18px #00000055;padding:8px clamp(14px,2.6vw,40px) 16px;animation:menu-in .18s ease-out} .site-menu nav{display:grid;gap:2px} .site-menu a,.site-menu button{display:flex;align-items:center;min-height:48px;padding:10px 12px;border-radius:12px;color:var(--text);text-decoration:none;font:600 18px var(--ui);background:none;border:0;width:100%;text-align:left;cursor:pointer} .site-menu a:hover,.site-menu button:hover{background:var(--tint)} .site-menu .sm-acct{border-top:1px solid var(--line);margin-top:6px;padding-top:6px;display:grid;gap:2px} .site-menu .auth-email{font-size:15px;padding:10px 12px} .site-menu .menu-del{color:var(--accent2)} .site-menu form{margin:0} .site-menu .auth-login{text-decoration:none!important} } .top{position:sticky}.top .wrap{position:relative} @keyframes menu-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){.site-menu{animation:none!important}} /* ===================== Claude recs 2026-10-19 (Ben): homepage redesign. Values from the approved mockup CSS. ===================== */ /* Step 2: one continuous cream hero (.hero3 = mockup .hero; .hero/.hero-art were already taken by older/detail styles) */ .hero3{position:relative;background:var(--tint2);overflow:hidden} .hero3-inner{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:1.05fr 1fr;align-items:end;gap:24px;padding:56px 32px 0} .hero3-copy{padding-bottom:64px;min-width:0} .hero3 .eyebrow{font:800 12px var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--accent2);margin:0 0 14px} .hero3 h1{font:600 clamp(36px,4.6vw,56px)/1.04 var(--display);color:var(--accent);margin:0 0 14px;letter-spacing:-.01em} .hero3 p.sub{font-size:18px;color:var(--muted);margin:0 0 26px;max-width:30ch} .hero3 .search{display:flex;align-items:center;gap:0;background:var(--surface);border-radius:999px;padding:8px 8px 8px 24px;box-shadow:0 10px 30px rgba(31,81,96,.16),0 1px 0 var(--line-strong);max-width:560px} .hero3 .search .field{flex:1;min-width:0;padding:4px 14px 4px 0;border-radius:0} .hero3 .search .field:focus-within{background:none} .hero3 .search .field + .field{border-left:1px solid var(--line);padding-left:16px} .hero3 .search .f-date[hidden]{display:none} .hero3 .search label{display:block;font:800 11px var(--ui);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin:0} .hero3 .search input,.hero3 .search select{border:0;outline:0;font:500 15px var(--ui);background:transparent;width:100%;color:var(--text);padding:2px 0;min-height:30px} .hero3 .search .field:focus-within label{color:var(--accent2)} .hero3-art{align-self:end;min-width:0}.hero3-art svg{display:block;width:100%;height:auto} .hero3-ground{height:22px;background:var(--sage);margin-top:-1px} @media (max-width:900px){.hero3-inner{grid-template-columns:1fr;padding:36px 16px 0}.hero3-copy{padding-bottom:8px}.hero3-art{max-width:320px;width:100%;margin:0 auto}} @media (max-width:600px){.hero3-inner{padding-top:26px}.hero3 h1{font-size:34px}.hero3 p.sub{font-size:16px;margin-bottom:18px} .hero3 .search{flex-wrap:wrap;border-radius:22px;padding:14px} .hero3 .search .field{flex:1 1 100%;padding:6px 0} .hero3 .search .field + .field{border-left:0;border-top:1px solid var(--line);padding-left:0} .hero3 .search input,.hero3 .search select{min-height:40px} .hero3 .btn-cta{width:100%;margin-top:8px}} /* Step 3: terracotta primary action. Every primary .btn uses it; ghost/secondary buttons stay teal/outline. */ .btn-cta,.btn:not(.ghost){background:var(--cta);color:#fff;border:0;border-radius:999px;font-weight:800;box-shadow:0 4px 12px rgba(194,83,47,.35);transition:background .15s,transform .15s} .btn-cta{font:800 15px var(--ui);padding:14px 26px;min-height:48px;cursor:pointer} .btn-cta:hover,.btn:not(.ghost):hover{background:var(--cta-hover);transform:translateY(-1px);filter:none} /* Step 4: chips with a color dot, stronger border, teal fill on hover/active */ /* Step 5: cards. Category tone on the art (illus vars), white sun, FREE badge, terracotta when-line + section links, 3px lift */ .card[data-tone] .media{--il-sun:#fff} .card[data-tone] .media .ils{opacity:.55} .card[data-tone] .media .ilh1{opacity:.55}.card[data-tone] .media .ilh2{opacity:1} .card[data-tone="story"] .media{--il-bg:var(--cat-story);--il-hill:#E7C985;background:var(--cat-story)} .card[data-tone="music"] .media{--il-bg:var(--cat-music);--il-hill:#E5A98B;background:var(--cat-music)} .card[data-tone="learning"] .media{--il-bg:var(--cat-learning);--il-hill:#99BFC5;background:var(--cat-learning)} .card[data-tone="outdoors"] .media{--il-bg:var(--cat-outdoors);--il-hill:#AFC799;background:var(--cat-outdoors)} .card[data-tone="arts"] .media{--il-bg:var(--cat-arts);--il-hill:#D6A5B2;background:var(--cat-arts)} .card[data-tone="food"] .media{--il-bg:var(--cat-food);--il-hill:#E3B672;background:var(--cat-food)} .card[data-tone="animals"] .media{--il-bg:var(--cat-animals);--il-hill:#C9B59C;background:var(--cat-animals)} .card[data-tone="sports"] .media{--il-bg:var(--cat-sports);--il-hill:#A9BED0;background:var(--cat-sports)} .card[data-tone="holiday"] .media{--il-bg:var(--cat-holiday);--il-hill:#D69F8E;background:var(--cat-holiday)} .badge-free{position:absolute;top:14px;left:14px;z-index:5;background:var(--sage-deep);color:#fff;font:800 12px/1 var(--ui);letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border-radius:999px;pointer-events:none} .card .when{font-weight:800;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent2)} .sec-h a{color:var(--accent2);font-weight:800;text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:2px;min-height:0} @media (max-width:759px){.sec-h a{min-height:44px;border-bottom:0;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}} .card:hover{transform:translateY(-3px);box-shadow:0 1px 0 var(--line),0 14px 28px rgba(30,37,38,.12)} /* Step 6: "Also happening all week" */ .ongoing{display:block;background:var(--surface);border:1.5px dashed var(--line-strong);border-radius:16px;padding:14px 18px;margin:12px 0 0;font-size:14px;line-height:1.7} .ongoing b{color:var(--accent2);font-weight:800}.ongoing a{color:var(--text);font-weight:700} @media (max-width:759px){.ongoing a{display:inline-flex;align-items:center;min-height:44px}} @media (prefers-reduced-motion:reduce){.btn-cta:hover,.btn:not(.ghost):hover,.card:hover{transform:none}} /* Step 7: brand wordmark "RPK Events" + tagline (from brand.json via js/logo.js) */ .brand{gap:10px} .brand svg.brand-icon{height:29px;width:29px;flex:none} @media (min-width:760px){.brand svg.brand-icon{height:32px;width:32px}} .brand-txt{display:flex;flex-direction:column;line-height:1} .brand-name{font:600 21px/1.05 var(--display);color:var(--accent);white-space:nowrap} .brand-name b{font-weight:600;color:var(--accent)}.brand-name i{font-style:italic;font-weight:500;color:var(--accent2)} .brand-tag{font:700 11px/1.2 var(--ui);text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-top:3px;white-space:nowrap} @media (min-width:760px){.brand-name{font-size:23px}} @media (max-width:600px){.brand-tag{display:none}} /* ===== Round 2 (Ben, Oct 19): RPK rainbow badge, pink inner arc, uppercase terracotta nav ===== */ :root{--rainbow-pink:#F2A7BA;--nav-ink:#A4482B} /* --rainbow-pink #F2A7BA confirmed by Ben (official logo, Oct 19) */ .top .nav-main a,.top .auth a,.site-menu nav a{font:800 12px/1.2 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--nav-ink)} @media (min-width:760px){.top .nav-main a,.top .auth a{font-size:12px}} .top .nav-main a:hover,.top .auth a:hover{background:var(--tint2)} .auth-login{text-underline-offset:4px!important} @media (max-width:600px){.site-menu a,.site-menu button{font:800 13px/1.2 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:var(--nav-ink)} .site-menu .menu-del{color:var(--accent2)}.site-menu form button{color:var(--text)}.site-menu .auth-email{text-transform:none;letter-spacing:0}} .top .nav-main a,.top .auth a{min-height:44px;display:inline-flex;align-items:center} /* keep 44px targets at 12px type */ /* Round 2: official lockup (logo-lockup.svg). Badge = full lockup height; avatar circle matches it. */ .brand .brand-lockup{height:40px;width:auto;display:block} .auth-avatar>span,.auth-avatar>span{width:40px;height:40px} @media (min-width:760px){.auth-avatar>span{width:40px;height:40px}} @media (max-width:759px){.brand .brand-lockup{height:36px}.auth-avatar>span{width:36px;height:36px}} @media (max-width:600px){.brand-lockup .lk-tag{display:none}.brand-lockup .lk-word{transform:translate(56px,28px)}} .top .auth{margin-left:-8px} /* prod1: About now sits before the avatar; keep the 18px gap to the avatar circle */ /* ===== Prod 2: shared custom dropdown (js/dropdown.js). Native