/* ECCV 2026 Computer Vision Art Gallery — style after computervisionart.com */ :root{ --fg:#111; --muted:#555; --line:#e6e6e6; --bg:#ffffff; --panel:#f3f3f3; --hi:#fbfbf7; --maxw:1060px; --maxw-read:760px; } /* night: the theme is stamped on before first paint, so there is no flash */ :root[data-theme="night"]{ --fg:#ececec; --muted:#9a9a9a; --line:#2e2e2e; --bg:#121212; --panel:#1d1d1d; --hi:#1c1c1a; } :root[data-theme="night"] img, :root[data-theme="night"] video{filter:brightness(.94)} *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0; background:var(--bg); color:var(--fg); font-family:"Helvetica Neue",Helvetica,Arial,"Segoe UI",Roboto,system-ui,sans-serif; font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; } .container{max-width:var(--maxw);margin:0 auto;padding:40px 20px 80px} a{color:inherit;text-decoration:none} a:hover{text-decoration:underline} /* ---------- header / intro ---------- */ header{text-align:center} header h1{ font-size:2.1rem;font-weight:700;letter-spacing:-.01em;margin:0 0 .15em; } header .subtitle a{text-decoration:none;border-bottom:1px solid var(--line)} header .subtitle a:hover{border-bottom-color:var(--muted)} .subtitle{color:var(--muted);font-style:oblique;margin:0 0 1.4em;font-size:1.05rem} /* statement runs the full container width, justified like a paper's abstract */ .intro{max-width:none;margin-bottom:1.4em;text-align:justify;hyphens:auto} .intro p{margin:0 0 1em} .statement{margin:22px 0 0;padding:16px 0 0;border-top:1px solid var(--line)} /* one line, never wrapping: the label and every gallery share the width, with the slack spread evenly around each · */ .past-in-statement{display:flex;flex-wrap:nowrap;justify-content:space-between; align-items:baseline;gap:0;margin:1.1em 0 0;color:var(--muted);font-size:.9rem; line-height:1.9;overflow-x:auto} .past-in-statement > *{white-space:nowrap;flex:0 0 auto} .past-in-statement strong{color:var(--fg)} .past-in-statement a{text-decoration:underline;text-underline-offset:2px} .past-sep{color:var(--fg)} /* base text colour — white in the night theme */ .past-in-statement strong{color:var(--fg);font-weight:700} .past-in-statement a{text-decoration:underline;text-underline-offset:2px} /* curators set like a paper title block */ header .byline.curators{margin:.7em 0 0;font-size:1.05rem} header .affil-notes{margin:.55em 0 0} header .affil-notes li{display:inline;margin:0 1.1em 0 0} header .affil-notes a{text-decoration:underline;text-underline-offset:2px} /* phone: an affiliation that does not fit in what is left of the line drops to the next one whole, rather than stranding its marker and a word or two behind. inline-block, not flex or block: one still too wide for the phone on its own wraps inside itself. */ @media (max-width:560px){ header .affil-notes li{display:inline-block;margin:0 1.1em 0 0} header .affil-notes li:last-child{margin-right:0} } .intro p:first-child::first-letter{font-size:1.05em} .meta{color:var(--muted);font-size:.92rem;margin:.2em 0} .meta a{color:var(--muted);text-decoration:underline;text-underline-offset:2px} .meta.past{margin-top:.1em} header{border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:18px} .section-h{font-size:1.15rem;font-weight:700;margin:0 0 20px} .section-h .count{color:var(--muted);font-weight:400} /* ---------- grid ---------- */ .grid{ display:grid; /* four across, so 52 works fill 13 complete rows */ grid-template-columns:repeat(4,1fr); gap:30px 26px; } .card{display:flex;flex-direction:column} .card .thumb{ position:relative; display:block;width:100%;aspect-ratio:1/1;overflow:hidden;background:var(--panel); border:1px solid var(--line); } .card .thumb img{width:100%;height:100%;object-fit:cover;display:block; transition:transform .35s ease} .card:hover .thumb img{transform:scale(1.035)} .card:hover{text-decoration:none} .card .noimg{display:flex;align-items:center;justify-content:center;height:100%; color:#aaa;font-size:.8rem;font-style:italic} .artist-name{font-weight:700;margin-top:9px;font-size:.93rem;line-height:1.3} .art-title-year{font-size:.9rem;color:var(--fg);line-height:1.3} .art-title{font-style:oblique} .yr{color:var(--muted)} /* ---------- piece page ---------- */ .piece{position:relative;max-width:var(--maxw-read);margin:0 auto} .piece-header{border:none;margin-bottom:22px;padding-bottom:0} .piece-header .back{font-size:.9rem;color:var(--muted);margin:0 0 18px} .piece-header .back a{color:var(--muted)} .piece-header h1.art-title{font-size:1.7rem;font-style:oblique;font-weight:700;margin:0 0 .12em;line-height:1.2} .piece-header h2.artist-name{font-size:1.05rem;font-weight:700;margin:0;color:var(--fg)} .piece-header .affil{color:var(--muted);font-size:.95rem;margin:.25em 0 0} .media{margin:6px 0 26px} .media img,.media video{max-width:100%;height:auto;display:block;margin:0 auto 14px;border:1px solid var(--line)} .media video{width:100%;background:#000} .video-embed{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin:0 0 14px} .video-embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0} .description{margin:0 0 1.4em} .description p{margin:0 0 1em} .tech{color:var(--fg);font-size:.95rem;border-left:2px solid var(--line);padding-left:14px} .pdf-link a,.source a{text-decoration:underline;text-underline-offset:2px} .source{margin-top:1.2em;font-size:.95rem} .noimg-note{color:var(--muted)} /* ---------- footer ---------- */ footer{margin-top:44px;color:var(--muted);font-size:.88rem} .piece-footer{margin-top:42px;text-align:center} .piece-footer p{font-size:1.05rem;margin:0} .piece-footer a{color:var(--fg);text-decoration:underline;text-underline-offset:4px} .piece-footer a:hover{color:var(--muted)} @media (max-width:820px){ .grid{grid-template-columns:repeat(3,1fr)} } @media (max-width:560px){ .grid{grid-template-columns:repeat(2,1fr);gap:22px 16px} header h1{font-size:1.7rem} } /* ---------- spotlight (hard-coded picks, content/spotlight.json) ---------- */ .spotlight{margin:0 0 46px} .spot-blurb{max-width:var(--maxw-read);color:var(--muted);margin:-8px 0 18px} .grid-spot{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:34px 26px} .spot-card .thumb{aspect-ratio:4/3;border-color:var(--line)} .spot-card .artist-name{font-size:1rem;margin-top:11px} .spot-card .art-title-year{font-size:.97rem} .spot-note{display:block;color:var(--muted);font-size:.88rem;margin-top:4px;line-height:1.4} /* The marker lives in the header row, which every work page has, so a spotlit work does not push its own title down — titles stay put as you move left and right. The letters themselves carry the gradient: gold under the sun, silver under the moon. */ .spot-badge{flex:0 0 auto;margin:0;font-size:.62rem;letter-spacing:.2em; text-transform:uppercase;font-weight:700; background:linear-gradient(100deg,#e0a800 0%,#ffc93c 45%,#f0a500 100%); -webkit-background-clip:text;background-clip:text;color:transparent} :root[data-theme="night"] .spot-badge{ background:linear-gradient(100deg,#ffffff 0%,#dfe4ef 45%,#b9c0d0 100%); -webkit-background-clip:text;background-clip:text} /* on a phone the badge becomes a ring of text turning around the sun / moon */ .spot-ring{display:none;position:absolute;inset:-12px;width:calc(100% + 24px); height:calc(100% + 24px);pointer-events:none;font-size:11px;font-weight:700; animation:spot-spin 14s linear infinite} .spot-ring text{font-family:inherit} :root[data-theme="night"] .spot-ring text{fill:#e9ecf4} @keyframes spot-spin{to{transform:rotate(360deg)}} @media (prefers-reduced-motion: reduce){.spot-ring{animation:none}} @media (max-width:640px){ body.spotlit .spot-ring{display:block} body.spotlit .theme-toggle{overflow:visible} .piece .spot-badge{display:none} /* the ring says it instead */ .container{padding-top:74px} } .meta.nav{margin-top:.5em} .meta.nav a{color:var(--muted);text-decoration:underline;text-underline-offset:2px} /* ---------- captions ---------- */ .media figure{margin:0 0 18px} .media figure img{margin-bottom:6px} .media figcaption{color:var(--muted);font-size:.86rem;line-height:1.45; max-width:var(--maxw-read);margin:0 auto} .caption-loose{color:var(--muted);font-size:.86rem;margin:-10px 0 22px} .vidlink{margin:0 0 16px} .vidlink a{text-decoration:underline;text-underline-offset:2px} .tech-body{font-size:.95rem;color:var(--fg)} /* ---------- byline: academic credit line in the title block ---------- */ .piece-header{text-align:center} .piece-header .back{text-align:left} .byline{margin:.55em 0 0;font-size:1.02rem;line-height:1.7} .byline .sep{color:var(--muted)} .byline-name{font:inherit;font-weight:700;color:var(--fg);background:none;border:0;padding:0; cursor:pointer;border-bottom:1px solid var(--muted)} .byline-name:hover{border-bottom-color:var(--fg)} .byline-name sup{font-weight:400;font-size:.62em;color:var(--muted);margin-left:1px} .byline-role{color:var(--muted);font-size:.8rem;margin-left:.35em;font-style:oblique} .affil-notes{list-style:none;margin:.5em 0 0;padding:0;color:var(--muted);font-size:.86rem; line-height:1.6} .affil-notes li{display:inline;margin:0 .6em 0 0} .affil-notes li sup{margin-right:2px} /* a lone artist's institutions read as a list, not a numbered key, and are held on one line — scrolling sideways beats breaking a long name across two */ .affil-notes.plain{margin:.5em 0 0;white-space:nowrap;overflow:hidden; scrollbar-width:none;font-size:.82rem} .affil-notes.plain::-webkit-scrollbar{display:none} .affil-run{display:inline-block;will-change:transform} /* too wide for the column: roll from end to end and back, pausing at each end */ .affil-notes.rolling .affil-run{ animation:affil-roll var(--roll-time,14s) ease-in-out infinite alternate} .affil-notes.rolling:hover .affil-run{animation-play-state:paused} @keyframes affil-roll{ 0%,14%{transform:translateX(0)} 86%,100%{transform:translateX(var(--roll,0))} } .affil-sep{color:var(--line);margin:0 .15em} /* ---------- profiles (collapsible) ---------- */ .piece .section-h{margin-top:30px} .profiles-details{margin:30px 0 0;border-top:1px solid var(--line);padding-top:14px; text-align:center} .profiles-details > summary{cursor:pointer;list-style:none;display:block} .profiles-details > summary::-webkit-details-marker{display:none} .profiles-details > summary .section-h{display:inline;margin:0} .profiles-details > summary::after{content:' +';color:var(--muted)} .profiles-details[open] > summary::after{content:' –'} .profiles-details > summary:hover .section-h{text-decoration:underline;text-underline-offset:3px} .profile{margin-top:1.2em} .person-card + .person-card{margin-top:1.6em;padding-top:1.4em;border-top:1px solid var(--line)} .person-head{display:flex;gap:16px;align-items:flex-start} .person-id{flex:1;min-width:0} .profile-name{font-weight:700;margin:0} .person-role{color:var(--muted);font-size:.85rem;margin:.1em 0 0;font-style:oblique} .profile-affil{color:var(--muted);font-size:.9rem;margin:.15em 0 0} .profile-bio{margin:.8em 0 0} .profile-bio p{margin:0 0 .8em;font-size:.95rem} .profile-bio.group{color:var(--fg);margin-top:1.2em} .profile-links{font-size:.9rem;margin:.5em 0 0} .profile-links a{color:var(--muted);text-decoration:underline;text-underline-offset:2px} .profile-links a:hover{color:var(--fg)} /* ---------- square portrait ---------- */ .portrait{display:block;width:76px;height:76px;flex:0 0 76px;overflow:hidden; border:1px solid var(--line);background:var(--panel)} .portrait img{width:100%;height:100%;object-fit:cover;display:block} .portrait.no-photo{display:flex;align-items:center;justify-content:center;color:var(--muted); font-size:1.4rem;letter-spacing:.04em;background:var(--panel)} .portrait-btn{padding:0;border:0;background:none;cursor:pointer;display:block;width:100%} .portrait-btn .portrait{width:100%;height:auto;aspect-ratio:1/1;flex:none} .portrait-btn:hover .portrait{border-color:#999} /* ---------- highlight the card opened from the byline ---------- */ .person-card{scroll-margin-top:24px;transition:background .5s ease,box-shadow .5s ease} .person-card.highlight{background:var(--hi);box-shadow:0 0 0 10px var(--hi)} .artist-row{scroll-margin-top:24px} /* ---------- artists.html ---------- */ .artist-list{display:flex;flex-direction:column;gap:34px} .artist-entry{display:grid;grid-template-columns:150px 1fr;gap:22px;align-items:start; border-bottom:1px solid var(--line);padding-bottom:30px} .artist-entry:last-child{border-bottom:none} .artist-thumb .thumb,.artist-thumb img{display:block;width:100%;aspect-ratio:1/1; object-fit:cover;border:1px solid var(--line);background:var(--panel)} .artist-entry .profile-name .byline-name{font-size:1.05rem} .artist-entry .profile-name{font-size:1.05rem;margin:0} .artist-work{margin:.35em 0 0;font-size:.95rem;line-height:1.5} .artist-work a{text-decoration:none} .artist-work a:hover{text-decoration:underline} .artist-entry .profile-bio{margin-top:.6em} .back{font-size:.9rem;color:var(--muted);margin:0 0 14px} .back a{color:var(--muted)} @media (max-width:560px){ .artist-entry{grid-template-columns:90px 1fr;gap:16px} .grid-spot{grid-template-columns:1fr} } /* ---------- day / night toggle ---------- */ .theme-toggle{position:fixed;top:14px;right:16px;z-index:50;width:34px;height:34px; overflow:visible; transition:background .2s ease,border-color .2s ease; border:1px solid var(--line);background:var(--bg);color:var(--fg);border-radius:50%; cursor:pointer;font-size:1rem;line-height:1;display:flex;align-items:center; justify-content:center;padding:0} .theme-toggle:hover{border-color:var(--muted)} /* the icon shows where you are, not where the click would take you */ :root[data-theme="night"] .theme-toggle .theme-day, :root:not([data-theme="night"]) .theme-toggle .theme-night{display:none} /* ---------- supporter banner: large, unboxed, at the end of the page ---------- */ .supporter{margin:64px 0 0;padding:44px 20px 8px;text-align:center;border-top:1px solid var(--line)} .supporter-label{margin:0 0 18px;color:var(--muted);font-size:.76rem;letter-spacing:.16em; text-transform:uppercase;font-weight:400} .supporter-logo{height:76px;width:auto;max-width:min(420px,80%);display:inline-block} .supporter-name{margin:16px 0 0;font-size:.95rem;color:var(--muted)} .supporter-link{display:inline-block} .supporter-link:hover{text-decoration:none;opacity:.72} :root[data-theme="night"] .logo-day, :root:not([data-theme="night"]) .logo-night{display:none} /* ---------- acknowledgements ---------- */ .acknowledgements{margin:56px 0 0;padding-top:22px;border-top:1px solid var(--line); max-width:var(--maxw-read)} .acknowledgements p{margin:.8em 0 0;color:var(--muted)} /* grid: title first, artist underneath */ .card .art-title-year{margin-top:9px;font-weight:700} .card .artist-name{font-weight:400;margin-top:2px;color:var(--muted);font-size:.9rem} /* ---------- conference logo ---------- */ .conf-logo-wrap{margin:0 0 10px;line-height:0} .conf-logo{height:142px;width:auto;max-width:min(520px,88%);display:inline-block} :root[data-theme="night"] .conf-logo{filter:brightness(1.12)} /* ---------- header controls: statement toggle + artist profiles ---------- */ .ctrl-sep{color:var(--muted);margin:0 .55em} .ghost-link{margin-left:1.8em;color:var(--fg);font-weight:700;font-size:1.15rem;cursor:pointer; text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px} .ghost-link:hover{color:var(--muted)} /* ---------- scrollable pop-up ---------- */ body.modal-open{overflow:hidden} .modal[hidden]{display:none} .modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center; padding:24px} .modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)} .modal-box{position:relative;background:var(--bg);border:1px solid var(--line); width:min(760px,100%);max-height:86vh;display:flex;flex-direction:column; box-shadow:0 18px 50px rgba(0,0,0,.3)} .modal-head{display:flex;align-items:center;justify-content:space-between;gap:16px; padding:18px 24px;border-bottom:1px solid var(--line)} .modal-head .section-h{margin:0} .modal-x{background:none;border:0;font-size:1.6rem;line-height:1;color:var(--muted); cursor:pointer;padding:0 4px} .modal-x:hover{color:var(--fg)} .modal-scroll{overflow-y:auto;padding:6px 24px 24px;-webkit-overflow-scrolling:touch} /* artist profiles panel (a tab, not an overlay) */ .artist-panel{max-width:none;margin:0} /* full container width, like the grid */ .artist-row{display:flex;gap:16px;align-items:flex-start;padding:22px 0; border-bottom:1px solid var(--line);text-align:left} .artist-row:last-child{border-bottom:0} .artist-row .portrait{width:70px;height:70px;flex:0 0 70px} .artist-row .profile-name{font-size:1rem} .artist-row .artist-work{margin:.2em 0 0;font-size:.9rem;color:var(--muted)} .artist-row .profile-bio p{font-size:.92rem;margin:.5em 0 0} /* ---------- work tabs: technical description / bio ---------- */ .tabs{margin:34px 0 0;padding-top:6px} .tab-strip{display:flex;justify-content:center;gap:30px;flex-wrap:wrap;text-align:center} .tab{font:inherit;font-size:1.15rem;font-weight:700;background:none;border:0;padding:2px 0 6px; color:var(--muted);cursor:pointer;border-bottom:2px solid transparent} .tab:hover{color:var(--fg)} .tab[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--fg)} .tabs .tab-panel{margin-top:22px;text-align:left} .js-tabs .tab-panel[data-inactive]{display:none} .tabs .profile{margin-top:0} /* ---------- image gallery ---------- */ .gallery{margin:0 0 20px} .gal-stage{position:relative} .gal-slide{margin:0} .gal-slide img{display:block;width:100%;height:auto;border:1px solid var(--line)} .js-gallery .gal-slide[data-inactive]{display:none} .js-gallery .gal-cap{display:none} /* the caption shows under the gallery */ .gal-slide .gal-cap{color:var(--muted);font-size:.86rem;margin:6px 0 14px} .gal-nav{position:absolute;top:50%;transform:translateY(-50%);width:40px;height:56px; border:0;background:rgba(0,0,0,.42);color:#fff;font-size:1.8rem;line-height:1;cursor:pointer; opacity:0;transition:opacity .2s ease} .gal-stage:hover .gal-nav,.gallery:focus-within .gal-nav{opacity:1} .gal-nav:hover{background:rgba(0,0,0,.65)} .gal-prev{left:0} .gal-next{right:0} .js-gallery:not(.js-gallery) .gal-nav{display:none} .gallery:not(.js-gallery) .gal-nav{display:none} .gal-caption{display:block;text-align:center;color:var(--fg);font-size:1.12rem; margin:16px 0 0;line-height:1.5} .gal-caption-text{display:block} .gallery:not(.js-gallery):not(.gal-solo) .gal-caption{display:none} .gal-solo .gal-cap{display:none} .gal-counter{display:block;margin-top:6px;color:var(--muted);font-size:.85rem; font-variant-numeric:tabular-nums} .gal-thumbs{display:flex;justify-content:center;gap:8px;overflow-x:auto; padding:14px 0 2px;scrollbar-width:thin} .gallery:not(.js-gallery) .gal-thumbs{display:none} .gal-thumb{flex:0 0 62px;width:62px;height:62px;padding:0;border:1px solid var(--line); background:var(--panel);cursor:pointer;opacity:.55;transition:opacity .18s ease} .gal-thumb img{width:100%;height:100%;object-fit:cover;display:block} .gal-thumb:hover{opacity:.85} .gal-thumb[data-current]{opacity:1;border-color:var(--fg)} .gal-thumb{position:relative} .gal-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; color:#fff;font-size:.9rem;text-shadow:0 1px 3px rgba(0,0,0,.7);background:rgba(0,0,0,.22)} .gal-thumb-blank{display:block;width:100%;height:100%;background:var(--panel)} .gal-slide .video-embed{margin:0} .gal-slide video{width:100%;display:block;background:#000;border:1px solid var(--line)} .piece-header h1.art-title .yr{color:var(--muted);font-weight:400;font-style:normal} /* ---------- artist search ---------- */ .search{flex:0 1 260px} #artist-search{width:100%;font:inherit;font-size:.92rem;color:var(--fg);background:var(--bg); border:1px solid var(--line);border-radius:0;padding:7px 10px;text-align:center; -webkit-appearance:none} #artist-search:focus{outline:none;border-color:var(--fg)} #artist-search::placeholder{color:var(--muted)} .search-empty{color:var(--muted);margin:0 0 18px} .grid .card[hidden],.artist-row[hidden]{display:none} @media (max-width:520px){.search{flex:1 1 100%}} .index-tabs{margin:0;border:0;padding-top:0} .index-tabs > .tab-strip{margin-bottom:26px} .index-tabs .tab .count{font-weight:400;color:var(--muted)} .index-tabs > .tab-panel{margin-top:0} /* tabs left, artist search right, one row */ .index-tabs > .tab-strip{justify-content:flex-start;align-items:center;gap:30px} .index-tabs > .tab-strip .search{margin-left:auto;flex:0 1 240px} @media (max-width:560px){ .index-tabs > .tab-strip{gap:18px} .index-tabs > .tab-strip .search{margin-left:0;flex:1 1 100%} } .statement .intro{margin-bottom:0} .tab-modal{font:inherit;font-size:1.15rem;font-weight:700;background:none;border:0; padding:2px 0 6px;color:var(--muted);cursor:pointer;text-decoration:none; border-bottom:2px solid transparent} .tab-modal:hover{color:var(--fg)} .tab-modal .count{font-weight:400;color:var(--muted)} /* interactive works embedded from their own URL */ .work-embed{width:100%;height:var(--embed-h,900px);max-height:80vh;background:var(--panel); border:1px solid var(--line)} .work-embed iframe{width:100%;height:100%;border:0;display:block} .gal-live{background:rgba(0,0,0,.35);font-size:.8rem} .art-title-link{text-decoration:none;border-bottom:2px solid var(--line)} .art-title-link:hover{text-decoration:none;border-bottom-color:var(--fg)} /* ---------- previous / next artwork: fixed to the page edges ---------- */ /* Fixed at mid-height, set like a labelled arrow in maths: the annotation sits above the arrow and the work below it. No panel or border, so it reads as page navigation rather than a gallery control. */ .work-nav{position:static} .work-side{position:fixed;top:50%;transform:translateY(-50%);z-index:40; display:flex;flex-direction:column;align-items:center;gap:0;width:132px; color:var(--muted);text-decoration:none;text-align:center; transition:color .15s ease} .work-side:hover{color:var(--fg);text-decoration:none} .work-side.prev{left:max(6px, calc(50% - 600px))} .work-side.next{right:max(6px, calc(50% - 600px))} .work-side-label{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase; font-style:normal;opacity:.75;line-height:1;margin:0} /* the arrow is an SVG, so its box is exactly 24px tall and the 6px above and below it are measurably equal — a text glyph carried its own leading and looked lopsided */ .work-side-arrow{display:block;line-height:0;margin:14px 0} .work-side-arrow svg{display:block;width:72px;height:20px} .work-side-title{font-size:.76rem;font-style:oblique;line-height:1.3;margin:0; display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} @media (max-width:1260px){ .work-side{width:auto} .work-side-arrow svg{width:44px;height:16px} .work-side-label,.work-side-title{display:none} .work-side.prev{left:8px} .work-side.next{right:8px} } @media (max-width:640px){ .work-side{display:none} /* on a touch screen you swipe instead */ } /* touch hint: two chevrons either side of a hand, shown only where the arrows are hidden */ .swipe-hint{display:none;align-items:center;justify-content:center;gap:12px; color:var(--muted);font-size:.78rem;letter-spacing:.06em;margin:26px 0 0} /* bottom hint reads: text, then the hand between the chevron pairs */ .swipe-hint .swipe-word{order:1} .swipe-hint .chev:first-child{order:2} .swipe-hint svg{width:26px;height:26px;flex:0 0 auto;order:3; animation:swipe-nudge 2.4s ease-in-out infinite} .swipe-hint .chev:last-child{order:4} .swipe-hint .chev{font-size:1rem;line-height:1;opacity:.55} @keyframes swipe-nudge{ 0%,100%{transform:translateX(0)} 30%{transform:translateX(-7px)} 60%{transform:translateX(7px)} } @media (prefers-reduced-motion: reduce){.swipe-hint svg{animation:none}} @media (max-width:640px){.swipe-hint{display:flex}} /* back link left, swipe affordance in the right corner on the same line */ .piece-header .back{display:flex;align-items:center;justify-content:space-between;gap:12px; flex-wrap:nowrap;padding-right:6px} .piece-header .back > a{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis; white-space:nowrap} .swipe-hint.top{margin:0 8px 0 0;flex:0 0 auto;gap:5px;font-size:.66rem; letter-spacing:.08em;text-transform:uppercase} .swipe-hint.top svg{width:15px;height:15px} .swipe-hint.top .chev{display:inline;font-size:.8rem} .swipe-hint.top .swipe-word{display:inline} @media (max-width:640px){.swipe-hint.top{display:flex}} /* ---------- sliding transition between artworks (Instagram-style) ---------- */ /* Cross-document view transitions: the browser cross-fades or, here, slides the old page out and the new one in. Browsers without support simply navigate as before. */ @view-transition{navigation:auto} /* a cube-like turn: the outgoing page swings away on its trailing edge while the incoming one swings in, the way a story card rotates */ @keyframes vt-in-right{ from{transform:perspective(1400px) translateX(100%) rotateY(38deg);opacity:.35} to{transform:perspective(1400px) translateX(0) rotateY(0);opacity:1} } @keyframes vt-out-left{ from{transform:perspective(1400px) translateX(0) rotateY(0);opacity:1} to{transform:perspective(1400px) translateX(-100%) rotateY(-38deg);opacity:.35} } @keyframes vt-in-left{ from{transform:perspective(1400px) translateX(-100%) rotateY(-38deg);opacity:.35} to{transform:perspective(1400px) translateX(0) rotateY(0);opacity:1} } @keyframes vt-out-right{ from{transform:perspective(1400px) translateX(0) rotateY(0);opacity:1} to{transform:perspective(1400px) translateX(100%) rotateY(38deg);opacity:.35} } ::view-transition-old(root), ::view-transition-new(root){animation-duration:.42s; animation-timing-function:cubic-bezier(.33,.02,.24,1);mix-blend-mode:normal; backface-visibility:hidden} html[data-nav="next"]::view-transition-old(root){transform-origin:left center} html[data-nav="next"]::view-transition-new(root){transform-origin:right center} html[data-nav="prev"]::view-transition-old(root){transform-origin:right center} html[data-nav="prev"]::view-transition-new(root){transform-origin:left center} @media (prefers-reduced-motion: reduce){ @view-transition{navigation:none} } /* ---------- back links: drawn arrow, centred against the text ---------- */ .back-link{display:inline-flex;align-items:center;gap:.42em;text-decoration:none} .back-link span{text-decoration:underline;text-underline-offset:3px} .back-link:hover{text-decoration:none} .back-arrow{width:.82em;height:.62em;flex:0 0 auto} .piece-footer .back-link{font-size:1.05rem} /* on a phone the corner is where the thumb rests, so the toggle centres at the top */ @media (max-width:640px){ /* enough headroom for the ring around it, which reaches 12px past the button */ .theme-toggle{left:50%;right:auto;transform:translateX(-50%);top:20px; width:36px;height:36px;box-shadow:0 2px 10px rgba(0,0,0,.14)} .container{padding-top:76px} body.spotlit .container{padding-top:92px} } /* ---------- spotlight flag on a grid card ---------- */ /* sunlit gold by day, moonlit silver by night — matching the theme toggle's sun and moon */ .spot-flag{position:absolute;top:0;left:0;z-index:2; padding:4px 10px 5px;font-size:.6rem;letter-spacing:.13em;text-transform:uppercase; font-weight:700;color:#3d2c00; background:linear-gradient(105deg,#ffd75e 0%,#ffc93c 45%,#f0a500 100%); box-shadow:0 1px 6px rgba(0,0,0,.18)} :root[data-theme="night"] .spot-flag{color:#1b1b22; background:linear-gradient(105deg,#ffffff 0%,#e6e9f2 45%,#b9c0d0 100%); box-shadow:0 1px 8px rgba(200,210,230,.22)} .card:hover .spot-flag{opacity:.92} /* ---------- spotlight beam: light thrown from the sun / moon ---------- */ /* A cone drawn behind the toggle, clipped to a wedge and blurred so the edges are soft. It fans down the right margin on a wide screen and straight down on a phone, and takes its colour from whichever body is in the sky. */ body.spotlit .theme-toggle::after{ content:'';position:absolute;left:50%;top:50%; width:520px;height:86vh;pointer-events:none;z-index:-1; transform-origin:top center; transform:translateX(-50%) rotate(var(--beam-angle,42deg)); transition:transform .45s cubic-bezier(.22,.61,.36,1),opacity .45s ease; /* the mouth of the cone is as wide as the disc, so the light wraps the object rather than starting at a point inside it */ clip-path:polygon(46.5% 0,53.5% 0,100% 100%,0 100%); background:linear-gradient(to bottom, rgba(255,201,60,.34) 0%, rgba(255,201,60,.16) 34%, rgba(255,201,60,.05) 68%, rgba(255,201,60,0) 100%); filter:blur(18px); opacity:.92; } :root[data-theme="night"] body.spotlit .theme-toggle::after{ background:linear-gradient(to bottom, rgba(226,233,247,.30) 0%, rgba(205,215,236,.14) 34%, rgba(190,202,228,.045) 68%, rgba(190,202,228,0) 100%); } /* a soft halo on the icon itself, so the beam looks cast rather than pasted on */ body.spotlit .theme-toggle{box-shadow:0 0 22px rgba(255,201,60,.5); background:radial-gradient(circle at 50% 45%,#fff3c9 0%,#ffd75e 55%,#f4b21a 100%); border-color:#e9ae1f;color:#5a4100} :root[data-theme="night"] body.spotlit .theme-toggle{box-shadow:0 0 22px rgba(214,224,245,.4); background:radial-gradient(circle at 50% 45%,#ffffff 0%,#dfe6f5 55%,#b6c0d8 100%); border-color:#c3cbdd;color:#242838} @media (max-width:640px){ body.spotlit .theme-toggle::after{ transform:translateX(-50%) rotate(0deg) !important; /* straight down the page */ width:190px;height:62vh;filter:blur(13px); clip-path:polygon(42% 0,58% 0,100% 100%,0 100%); } } @media (prefers-reduced-motion: no-preference){ body.spotlit .theme-toggle::after{animation:beam-breathe 7s ease-in-out infinite} } @keyframes beam-breathe{ 0%,100%{opacity:.9} 50%{opacity:.62} } /* dimmed once the opening image is behind you (phones only — see site.js) */ @media (max-width:640px){ body.spotlit .theme-toggle::after{transition:opacity .5s ease,height .5s ease} body.spotlit.beam-dim .theme-toggle::after{opacity:.22;height:26vh;animation:none} body.spotlit .theme-toggle{transition:box-shadow .5s ease} body.spotlit.beam-dim .theme-toggle{box-shadow:0 0 10px rgba(255,201,60,.22)} :root[data-theme="night"] body.spotlit.beam-dim .theme-toggle{ box-shadow:0 0 10px rgba(214,224,245,.2)} } /* nothing left to light once the gallery is above the viewport (wide screens only) */ @media (min-width:641px){ body.spotlit.beam-off .theme-toggle::after{opacity:0;animation:none} body.spotlit.beam-off .theme-toggle{box-shadow:0 0 10px rgba(160,160,160,.18)} } /* ---------- schedule ---------- */ /* A nested strip inside the Schedule tab: lighter than the tabs above it, so the two levels never read as one row of equals. */ .sched-tabs{margin:0} .sched-tabs > .tab-strip{justify-content:flex-start;gap:26px;border-bottom:1px solid var(--line); margin-bottom:24px} .sched-tabs > .tab-strip .tab{font-size:.98rem;font-weight:600;letter-spacing:.01em; padding:2px 0 8px;margin-bottom:-1px} .sched-tabs > .tab-panel{margin-top:0;max-width:var(--maxw-read)} .sched-intro{margin:0 0 20px;line-height:1.6} .sched-times{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)} .sched-times li{display:flex;flex-wrap:wrap;gap:0 18px;justify-content:space-between; padding:11px 0;border-bottom:1px solid var(--line)} .sched-day{font-weight:600} .sched-time{color:var(--muted);font-variant-numeric:tabular-nums} .sched-panel + .sched-panel{margin-top:34px;padding-top:30px;border-top:1px solid var(--line)} .sched-when{margin:0 0 8px;font-weight:700;font-size:1.02rem} .sched-people{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 10px} .sched-people li{margin:0} .sched-person{display:inline-block;padding:5px 12px;border:1px solid var(--line); background:var(--panel);font-size:.94rem;text-decoration:none;color:var(--fg)} a.sched-person:hover{border-color:var(--fg)} .sched-works{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)} .sched-works li{display:flex;gap:14px;padding:11px 0;border-bottom:1px solid var(--line)} .sched-n{flex:0 0 1.8em;color:var(--muted);font-variant-numeric:tabular-nums;text-align:right} .sched-work{display:flex;flex-direction:column;gap:2px;min-width:0} .sched-work a{text-decoration:none;color:var(--fg)} .sched-work a:hover .art-title{text-decoration:underline} .sched-work .yr{color:var(--muted)} .sched-work .artist-name{font-weight:400;margin-top:0;color:var(--muted);font-size:.92rem} @media (max-width:560px){ .sched-tabs > .tab-strip{gap:16px} .sched-times li{justify-content:flex-start;gap:0 12px} } /* add-to-calendar: a bare icon beside a time, a labelled chip where there is room */ .sched-cal{display:inline-flex;align-items:center;gap:5px;color:inherit;font-weight:400; white-space:nowrap;text-decoration:underline dotted;text-underline-offset:4px} .sched-cal svg{display:block;opacity:.7} .sched-cal:hover,.sched-cal:focus-visible{color:var(--fg); text-decoration:underline solid;text-decoration-color:currentColor} .sched-cal:hover svg{opacity:1} .sched-hint{margin:-8px 0 20px;color:var(--muted);font-size:.86rem} .sched-cal-chip{flex-direction:row-reverse;margin-left:16px;padding:3px 10px; border:1px solid var(--line);font-size:.8rem;letter-spacing:.01em;color:var(--muted); text-decoration:none} .sched-cal-chip:hover,.sched-cal-chip:focus-visible{border-color:var(--fg); text-decoration:none} .sched-when{display:flex;flex-wrap:wrap;align-items:center} @media (max-width:560px){.sched-cal-chip{margin-left:0;margin-top:8px}} /* a panelist's profile, cloned into the pop-up from the profiles tab */ #artist-pop .modal-box{width:min(620px,100%)} #artist-pop-name{font-size:1.15rem;font-weight:700} #artist-pop-name a{color:inherit;text-decoration:underline;text-underline-offset:3px} #artist-pop-body .artist-row{padding:20px 0 4px;border-bottom:0} #artist-pop-body .artist-row .portrait{width:92px;height:92px;flex:0 0 92px} #artist-pop-body .artist-work{font-size:.95rem} #artist-pop-body .profile-bio p{font-size:.95rem} @media (max-width:560px){ /* a portrait beside text leaves no column */ #artist-pop-body .artist-row{display:block} #artist-pop-body .artist-row .portrait{margin:0 0 14px} }