/* ---------- basic reset ---------- */
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: "Times New Roman", Times, serif;
color: #000;
background: #fff;
font-size: 15px;
line-height: 1.2;
}
a {
color: inherit;
text-decoration: underline;
}
/* ---------- landing screen (overlay on top of index.html) ---------- */
.landing {
position: fixed;
inset: 0;
background-color: #fff;
background-size: cover;
background-position: center;
z-index: 1000;
clip-path: inset(0 0 0 0);
}
/* added by JS when ENTER is clicked — clips the overlay away
instantly, no animation, so it just snaps open */
.landing.landing--hidden {
clip-path: inset(0 0 100% 0);
pointer-events: none;
}
/* keeps the page underneath from scrolling while the splash is up */
body.landing-visible {
overflow: hidden;
}
/* returning visitors this session skip the splash entirely — this is
set by the inline script at the top of , before the overlay
below even gets parsed, so there's no flash of it appearing */
html.skip-landing .landing {
display: none;
}
.landing .qr {
position: absolute;
top: 20px;
left: 24px;
width: 40px;
height: 40px;
}
.landing-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
}
.landing-text a {
display: block;
color: #2222dd;
font-weight: light;
font-size: 18px;
text-decoration: none;
margin-bottom: 8px;
}
.landing-text a:hover {
text-decoration: underline;
}
.landing-text p {
color: #000;
margin: 0;
font-size: 14px;
}
/* ---------- header ---------- */
.site-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px 10px;
}
.site-header .qr {
width: 40px;
height: 40px;
margin-right: 10px;
}
.header-left {
display: flex;
align-items: center;
flex: 1;
}
.header-left .name {
font-size: 18px;
line-height: 0.95;
letter-spacing: -0.3px;
}
.namebreak {display: none}
.header-center {
flex: 1;
text-align: center;
line-height: 1.3;
}
.header-right {
flex: 1;
text-align: right;
}
.header-right a {
margin-left: 20px;
text-decoration: none;
}
/* current page link */
.header-right a.current {
text-decoration: underline;
}
/* the logo + name in the top left is one big link back to the homepage,
but it should look exactly like plain text — no underline, no color change */
.header-left {
text-decoration: none;
}
/* ---------- marquee ---------- */
.marquee {
overflow: hidden;
white-space: nowrap;
border-top: 1px solid #000;
border-bottom: 1px solid #000;
padding: 6px 0;
}
.marquee-track {
display: inline-flex;
animation: scroll-left 45s linear infinite;
/* starts paused so the CSS timer doesn't begin ticking before JS has
duplicated the track content — JS un-pauses it once setup is done,
avoiding the little jump/hitch that happened when the animation's
-50% endpoint was recalculated mid-run against a suddenly wider track */
animation-play-state: paused;
}
.marquee-track a {
padding: 0 4px;
text-decoration: npone;
text-transform: uppercase;
font-size: 11px;
white-space: nowrap;
pointer-events: none;
}
/* pause the scroll when hovering, so people can actually click it */
.marquee:hover .marquee-track {
animation-play-state: paused;
}
@keyframes scroll-left {
from {
transform: translateX(0);
}
to {
/* track is duplicated in the HTML, so -50% is exactly one full loop */
transform: translateX(-50%);
}
}
/* ---------- page content ---------- */
main {
padding: 24px;
}
main h1 {
font-size: 17px;
font-weight: normal;
text-transform: uppercase;
margin: 20px 0 10px;
}
main p {
max-width:100%;
margin: 0 0 24px;
line-height: 1.1;
}
.project-image {
max-width: 800px;
width: 100%;
display: block;
}
/* ---------- exhibition table ---------- */
.exhibit-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 30px;
}
.exhibit-table th {
text-align: left;
font-weight: bold;
padding: 6px 0px;
}
.exhibit-table th:last-child,
.exhibit-table td:last-child {
text-align: left;
}
/* only the visible summary row's year column should refuse to wrap —
the hidden detail row underneath is a single | holding
a whole paragraph, and it also happens to be a "last-child", so this
rule must NOT apply there or long text gets pushed off-screen instead
of wrapping */
.exhibit-row td:last-child {
white-space: nowrap;
}
.exhibit-table td {
padding: 8px 10px;
}
/* alternating stripes */
.exhibit-table tr:nth-child(even) {
background: #EFEEEE;
}
/* */
.accordion-table {
table-layout: fixed;
}
.accordion-table .col-title {
width: 34%;
}
.accordion-table .col-year {
width: 130px;
}
/* */
.accordion-table tr:nth-child(even) {
background: none;
}
.accordion-table tr.exhibit-row:nth-of-type(4n+1) {
background: #eee;
}
/* */
.exhibit-row td:first-child {
text-transform: uppercase;
font-size: 14px;
}
/* every exhibition row can be clicked to open its detail row below it */
.exhibit-row {
cursor: pointer;
}
.accordion-table tr.exhibit-row:hover {
background: #ddd;
}
/* while a row's detail is open, keep it the same darker grey as the
hover state */
.accordion-table tr.exhibit-row.active {
background: #ddd;
}
/* the hidden row holding the gallery + caption for one exhibition —
stays collapsed until JS adds the "open" class */
.exhibit-detail {
display: none;
}
.exhibit-detail.open {
display: table-row;
}
/* photo grid that sits under an exhibition entry — every image is the
same HEIGHT */
.exhibit-gallery {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 4px 0 16px;
}
.exhibit-gallery img {
height: 440px;
width: auto;
flex: 0 0 auto;
display: block;
}
/* the "Group Show: Downtown Issue III / Title: Settle 2 Belong..." text under a gallery */
.exhibit-caption {
margin: 0 0 24px;
font-size: 15px;
}
.exhibit-caption p {
margin: 2px 0;
}
/* responsive video embed */
.exhibit-video {
position: relative;
width: 100%;
max-width: 800px;
aspect-ratio: 16 / 9;
margin: 4px 0 16px;
}
.exhibit-video iframe {
width: 100%;
height: 100%;
display: block;
border: 0;
}
/* image on the left, text on the right */
.exhibit-side {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 20px;
margin: 4px 0 16px;
}
.exhibit-side img {
width: 280px;
flex-shrink: 0;
display: block;
}
.exhibit-side-text {
margin-left: auto;
text-align: left;
padding-right: 70px;
}
.exhibit-side-text p {
margin: 2px 0;
}
/* Curatorial Works isn't interactive like the exhibition list */
#curatorial-list tr.exhibit-row {
background: #eee;
cursor: default;
}
#curatorial-list tr.exhibit-row:hover {
background: #eee;
}
/* ---------- lightbox (click any artwork photo to see it larger) ---------- */
.exhibit-gallery img,
.exhibit-side img {
cursor: zoom-in;
}
.lightbox {
position: fixed;
inset: 0;
background: rgba(250, 250, 250, 0.9);
z-index: 2000;
display: none;
align-items: center;
justify-content: center;
padding: 40px;
}
.lightbox.open {
display: flex;
}
.lightbox img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
display: block;
}
.lightbox-close {
position: fixed;
top: 10px;
right: 14px;
width: 54px;
height: 54px;
font-family: 'times new roman', serif;
font-size: 40px;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
color: #111;
opacity: 0.8;
cursor: pointer;
padding: 0;
}
/* ---------- footer ---------- */
.site-footer {
border-top: 1px solid #000;
padding: 20px 24px;
font-size: 15px;
}
.site-footer h2 {
font-size: 16px;
margin: 0 0 12px;
}
.site-footer a {
color: #2222dd;
}
.site-footer .fine-print {
margin-top: 16px;
font-size: 12px;
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
}
/* ---------- mobile ---------- */
@media (max-width: 600px) {
.site-header {
align-items: flex-start;
flex-wrap: wrap;
padding: 16px 16px 8px;
font-size: 15px;
}
.landing-text {
top: 50%;
left: 50%;
transform: translateX(-50%);
}
.landing-text p {
font-size: 14px;
}
.landing-text a {
font-size: 20px;
}
.landing .qr {
top: 16px;
left: 16px;
}
.header-left .name {
font-size: 20px;
line-height: 0.9;
}
.namebreak {display:block;}
.header-center {
order: 3;
flex-basis: 100%;
text-align: left;
margin-top: 8px;
}
.header-right a {
margin-left: 12px;
}
main {
padding: 16px;
padding-top: 26px;
font-size: 15px;
}
main p {
font-size: 15px;
line-height: 1.2;
max-width: 100%;
}
.marquee-track {
display: inline-flex;
animation: scroll-left 25s linear infinite;
animation-play-state: paused;
}
.marquee-track a {
pointer-events: auto;
}
/* smaller row height on mobile so more than one image still fits
per row on a narrow screen */
.exhibit-gallery img {
height: 140px;
}
main h1 {
font-size: 15px;
}
.exhibit-gallery img {
max-width: 100%;
flex: 0 0 auto;
display: block;
}
.exhibit-table th {
padding:0px;
padding-bottom: 6px;
}
.exhibit-table td {
display: block;
font-size: 15px;
padding: 8px 0px;
}
.exhibit-table td:last-child {
display: inline;
text-align: left;
font-size: 14px;
margin-left: 0px;
}
/* */
.accordion-table,
.accordion-table thead,
.accordion-table tbody,
.accordion-table thead tr {
display: block;
width: 100%;
}
/* only the first header label ("Exhibition") is real text — the other
two | cells are empty placeholders for the venue/year columns
and don't need to render as anything on mobile */
.accordion-table thead th:nth-child(2),
.accordion-table thead th:nth-child(3) {
display: none;
}
/* the fixed column widths are a desktop-only trick — on mobile the
title needs to use the full row width instead of being squeezed
into its 34% desktop column, or it wraps onto a dozen lines */
.accordion-table {
table-layout: auto;
}
.accordion-table .col-title,
.accordion-table .col-year {
width: auto;
}
/* exhibition list only: drop the venue column entirely on mobile,
so each row is just "TITLE (year)" on a single line */
.accordion-table tr.exhibit-row {
display: block;
width: 100%;
padding: 8px 10px;
}
.accordion-table tr.exhibit-row td {
display: inline;
padding: 0;
}
.accordion-table tr.exhibit-row td:nth-child(2) {
display: none;
}
/* the gallery/caption detail row also needs to drop its table-row
display now that the table itself is no longer a real table on
mobile — otherwise it's a stray table-row with no table to belong to */
.accordion-table .exhibit-detail.open {
display: block;
padding-left: 7px;
padding-right: 7px;
}
.accordion-table .exhibit-detail td {
display: block;
}
.site-footer {
padding: 16px;
}
.exhibit-side img {
width: 100%;
}
.lightbox {
padding: 16px;
}
.lightbox-close {
position: fixed;
top: 14px;
right: 5px;
width: 34px;
height: 34px;
font-family: 'times new roman', serif;
font-size: 33px;
line-height: 1;
display: flex;
color: #111;
opacity: 0.8;
align-items: center;
justify-content: center;
background: none;
border: none;
cursor: pointer;
padding: 0;
}
.exhibit-side {
flex-direction: column;
}
.exhibit-side-text {
margin-left: 0;
text-align: left;
}
}
|