/* ============================================================ MAINSTAGE 2026 — THE CROWD BECOMES THE ARCHIVE Standalone gallery stylesheet. Near-black stage darkness, warm off-white type, photography carries the colour. ============================================================ */ :root{ --g-bg:#0d0714; /* near-black with a purple undertone */ --g-bg2:#140b1f; --g-ink:#f2ede4; /* warm off-white, never pure #fff */ --g-ink-dim:rgba(242,237,228,.62); --g-pink:#FF4FA3; /* targeted light hits only */ --g-purple:#8B3DFF; --g-ease:cubic-bezier(.16,1,.3,1); --g-disp:"Anton","Roboto Condensed","Roboto","Helvetica Neue",sans-serif; --g-sans:"Roboto","Helvetica Neue",sans-serif; --g-pad:clamp(16px,3.4vw,44px); } *{box-sizing:border-box} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} } body.gal{ margin:0; background:var(--g-bg); color:var(--g-ink); font-family:var(--g-sans); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{display:block; max-width:100%} button{font-family:inherit; cursor:pointer} a{color:inherit; text-decoration:none} /* neon scroll line: quiet by default, lights up while scrolling (JS toggles .is-scrolling on ) — slim and calm, no fairground */ html:has(body.gal){scrollbar-width:thin; scrollbar-color:rgba(139,61,255,.38) transparent} html:has(body.gal)::-webkit-scrollbar{width:10px} html:has(body.gal)::-webkit-scrollbar-track{background:transparent} html:has(body.gal)::-webkit-scrollbar-thumb{ border-radius:999px; border:3px solid transparent; background-clip:padding-box; background-color:rgba(139,61,255,.36); } html.is-scrolling:has(body.gal)::-webkit-scrollbar-thumb{ background-color:#ff7ac9; background-image:linear-gradient(180deg,#ff8fd0,#9a5cff); box-shadow:0 0 9px rgba(255,79,163,.8), 0 0 20px rgba(139,61,255,.5); } html.is-scrolling:has(body.gal){scrollbar-color:#ff7ac9 transparent} .g-skip{ position:fixed; left:12px; top:-60px; z-index:400; background:var(--g-ink); color:#12081f; font-weight:700; font-size:14px; padding:10px 18px; border-radius:8px; transition:top .2s; } .g-skip:focus-visible{top:12px; outline:3px solid var(--g-pink)} /* ============ top bar ============ */ .g-top{ position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; gap:18px; padding:12px var(--g-pad); background:linear-gradient(180deg, rgba(13,7,20,.92), rgba(13,7,20,0)); transition:background .3s; } .g-top.is-solid{background:rgba(13,7,20,.94); box-shadow:0 1px 0 rgba(242,237,228,.07)} .g-top__logo{display:flex; align-items:center; gap:10px} .g-top__logo img{width:40px; height:40px} .g-top__word{font-weight:700; font-size:14px; letter-spacing:.06em; color:var(--g-ink)} .g-top__word b{font-weight:300; margin-left:5px} .g-top__days{display:flex; gap:6px; margin-left:auto} .g-top__day{ position:relative; -webkit-appearance:none; appearance:none; border:0; background:none; color:rgba(242,237,228,.86); font-family:var(--g-disp); font-weight:400; font-size:15px; letter-spacing:.08em; padding:11px 14px; transition:color .2s; } .g-top__day span{color:var(--g-pink); font-family:var(--g-sans); font-weight:700; font-size:12px; margin-left:6px; letter-spacing:.06em} .g-top__day::after{ content:""; position:absolute; left:14px; right:14px; bottom:4px; height:2px; border-radius:2px; background:linear-gradient(90deg,var(--g-purple),var(--g-pink)); transform:scaleX(0); transform-origin:center; transition:transform .25s var(--g-ease); } .g-top__day:hover{color:var(--g-ink)} .g-top__day:hover::after{transform:scaleX(.6)} .g-top__day.is-on{color:var(--g-ink)} .g-top__day.is-on::after{transform:scaleX(1)} .g-top__day:focus-visible{outline:2px solid var(--g-pink); outline-offset:2px} /* ============ hero ============ */ .g-hero{position:relative; min-height:88svh; display:flex; align-items:flex-end; overflow:hidden} .g-hero__media{position:absolute; inset:0; margin:0; background:var(--g-bg2)} .g-hero__media img{width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .8s var(--g-ease)} .g-hero__media img.is-ready{opacity:1} .g-hero__media::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(13,7,20,.55) 0%, rgba(13,7,20,.08) 34%, rgba(13,7,20,.16) 62%, rgba(13,7,20,.94) 100%); } .g-hero__type{position:relative; z-index:1; padding:0 var(--g-pad) clamp(28px,5vh,58px); max-width:1500px; margin:0 auto; width:100%} .g-eyebrow{ display:inline-flex; align-items:center; margin:0 0 18px; padding:9px 16px; border-radius:999px; background:rgba(13,7,20,.58); border:1px solid rgba(255,124,194,.32); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); font-size:12px; font-weight:800; letter-spacing:.28em; text-indent:.28em; text-transform:uppercase; color:#FF8FCB; } .g-title{ margin:0 0 16px; font-family:var(--g-disp); font-weight:400; font-size:clamp(56px,10.5vw,148px); line-height:.9; letter-spacing:.012em; text-transform:uppercase; color:var(--g-ink); } .g-title__main{ display:inline-block; } /* hover: a wave of stage-light colours rolls through the letters once */ @media (hover:hover) and (prefers-reduced-motion:no-preference){ .g-title:hover .g-title__main, .g-title.is-wave .g-title__main{ background:linear-gradient(104deg, #f2ede4 0%, #f2ede4 16%, #FF4FA3 30%, #b06bff 44%, #8B3DFF 52%, #5BCEFA 64%, #f2ede4 78%, #f2ede4 100%); background-size:280% 100%; -webkit-background-clip:text; background-clip:text; color:transparent; animation:gTitleWave 1.8s cubic-bezier(.3,.7,.3,1) forwards; } } @keyframes gTitleWave{ from{ background-position:115% 0; } to { background-position:-80% 0; } } .g-title__sub{ display:block; margin-top:16px; font-family:var(--g-sans); font-weight:500; font-size:clamp(13px,1.6vw,19px); letter-spacing:.42em; text-transform:uppercase; color:rgba(242,237,228,.88); text-shadow:0 1px 3px rgba(13,7,20,.9), 0 2px 16px rgba(13,7,20,.7); } .g-line{margin:0; font-size:clamp(14px,1.6vw,17px); color:rgba(242,237,228,.8); text-shadow:0 1px 3px rgba(13,7,20,.9)} .g-line__credit{white-space:nowrap} /* staged reveal (JS adds .is-in on load) */ @media (prefers-reduced-motion:no-preference){ .g-hero__type > *{opacity:0; transform:translateY(22px); transition:opacity .7s var(--g-ease), transform .7s var(--g-ease)} .g-home.is-in .g-hero__type > *{opacity:1; transform:none} .g-home.is-in .g-title{transition-delay:.08s} .g-home.is-in .g-line{transition-delay:.16s} } /* ============ day portals ============ */ .g-portals{ display:grid; gap:10px; padding:clamp(18px,3vw,34px) var(--g-pad) clamp(46px,6vw,84px); max-width:1500px; margin:0 auto; } .g-portal{ position:relative; display:block; overflow:hidden; border-radius:14px; background:var(--g-bg2); isolation:isolate; outline-offset:4px; } .g-portal:focus-visible{outline:3px solid var(--g-pink)} .g-portal__strip{display:flex; flex-direction:column; gap:8px; will-change:transform} .g-portal__strip img{width:100%; height:auto; border-radius:6px; opacity:.88} .g-portal__scrim{ position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg, rgba(13,7,20,.24), rgba(13,7,20,.1) 44%, rgba(13,7,20,.9) 88%); transition:background .35s; } .g-portal__label{ position:absolute; left:18px; right:18px; bottom:16px; z-index:2; text-align:left; } .g-portal__day{ display:block; font-family:var(--g-disp); font-weight:400; text-transform:uppercase; font-size:clamp(30px,3.4vw,52px); line-height:.92; letter-spacing:.01em; color:var(--g-ink); } .g-portal__date{ display:inline-block; margin-top:7px; font-size:13px; font-weight:700; letter-spacing:.18em; color:var(--g-pink); } .g-portal__count{ display:inline-block; margin-top:7px; margin-left:12px; font-size:13px; font-weight:500; letter-spacing:.06em; color:var(--g-ink-dim); } .g-portal__go{ position:absolute; top:14px; right:14px; z-index:2; width:40px; height:40px; border-radius:50%; display:grid; place-items:center; border:1px solid rgba(242,237,228,.3); color:var(--g-ink); opacity:0; transform:translateY(6px); transition:opacity .3s, transform .3s var(--g-ease); } .g-portal__go svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round} /* mobile: poster stack */ @media (max-width:899px){ .g-portal{aspect-ratio:16/10} .g-portal__strip{flex-direction:row; height:100%} .g-portal__strip img{width:auto; height:100%; flex:0 0 auto; border-radius:0; opacity:1} .g-portal__cover{position:absolute; inset:0} .g-portal__cover img{width:100%; height:100%; object-fit:cover} } /* desktop: three tall strips */ @media (min-width:900px){ .g-portals{grid-template-columns:1fr 1fr 1fr; gap:12px} .g-portal{height:min(74vh,760px)} .g-portal__cover{display:none} .g-portal:hover .g-portal__go, .g-portal:focus-visible .g-portal__go{opacity:1; transform:none} .g-portal:hover .g-portal__scrim{background:linear-gradient(180deg, rgba(13,7,20,.1), rgba(13,7,20,.02) 44%, rgba(13,7,20,.86) 88%)} @media (prefers-reduced-motion:no-preference){ .g-portals{grid-template-columns:1fr 1fr 1fr} .g-portal{transition:flex-grow .5s var(--g-ease)} .g-portal__strip{animation:gDrift var(--drift,70s) linear infinite} .g-portal:hover .g-portal__strip{animation-play-state:paused} } } @keyframes gDrift{ from{transform:translateY(0)} to{transform:translateY(-50%)} } /* ============ day view ============ */ .g-day{padding:calc(64px + 4vh) 0 40px} .g-day__head{padding:0 var(--g-pad); max-width:1500px; margin:0 auto 8px; width:100%} .g-day__back{ -webkit-appearance:none; appearance:none; border:0; background:none; display:inline-flex; align-items:center; gap:8px; color:var(--g-ink-dim); font-size:13px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; padding:10px 0; margin-bottom:6px; transition:color .2s; } .g-day__back:hover{color:var(--g-ink)} .g-day__back:focus-visible{outline:2px solid var(--g-pink); outline-offset:3px} .g-day__back svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round} .g-day__title{ margin:0; font-family:var(--g-disp); font-weight:400; text-transform:uppercase; font-size:clamp(44px,8vw,110px); line-height:.92; letter-spacing:.012em; color:var(--g-ink); } .g-day__title:focus{outline:none} .g-day__meta{margin:12px 0 0; font-size:14px; color:var(--g-ink-dim); letter-spacing:.04em} /* highlights: art-directed 12-col grid */ .g-high{ display:grid; grid-template-columns:repeat(12,1fr); gap:10px; padding:clamp(22px,3.4vw,44px) var(--g-pad) 0; max-width:1500px; margin:0 auto; } .g-ph{ position:relative; margin:0; overflow:hidden; border-radius:10px; background:var(--ph-c,#1a1026); padding:0; border:0; isolation:isolate; text-align:left; /* modern custom cursor: dark disc + expand arrows with a pink ring */ cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='14.5' fill='rgba(13,7,20,0.82)' stroke='%23FF4FA3' stroke-width='1.5'/%3E%3Cpath d='M18.5 9.5h4v4M22.3 9.7l-5 5M13.5 22.5h-4v-4M9.7 22.3l5-5' fill='none' stroke='%23F2EDE4' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 16 16, pointer; transition:box-shadow .28s var(--g-ease); } /* corner affordance chip, appears on hover/focus */ .g-ph__view{ position:absolute; right:10px; bottom:10px; z-index:2; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:rgba(13,7,20,.62); border:1px solid rgba(242,237,228,.35); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); color:var(--g-ink); opacity:0; transform:translateY(8px) scale(.9); transition:opacity .28s var(--g-ease), transform .28s var(--g-ease), border-color .2s; pointer-events:none; } .g-ph__view svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round} .g-ph img{width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .5s var(--g-ease), transform .7s var(--g-ease)} .g-ph img.is-ready{opacity:1} .g-ph::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, transparent 62%, rgba(13,7,20,.42)); opacity:0; transition:opacity .3s; } @media (hover:hover){ .g-ph:hover img{transform:scale(1.035); filter:brightness(1.06) saturate(1.05)} .g-ph:hover::after{opacity:1} .g-ph:hover{box-shadow:0 0 0 1px rgba(255,79,163,.4), 0 10px 44px rgba(139,61,255,.32)} .g-ph:hover .g-ph__view, .g-ph:focus-visible .g-ph__view{opacity:1; transform:none; border-color:rgba(255,79,163,.6)} } .g-ph:focus-visible{outline:3px solid var(--g-pink); outline-offset:3px} @media (prefers-reduced-motion:reduce){ .g-ph:hover img{transform:none} } /* highlight spans (desktop) */ @media (min-width:900px){ .g-high .h-a{grid-column:span 8; aspect-ratio:16/9} .g-high .h-b{grid-column:span 4; aspect-ratio:4/5} .g-high .h-c{grid-column:span 4; aspect-ratio:4/5} .g-high .h-d{grid-column:span 5; aspect-ratio:3/2} .g-high .h-e{grid-column:span 3; aspect-ratio:4/5} .g-high .h-f{grid-column:span 12; aspect-ratio:21/9} .g-high .h-g{grid-column:span 4; aspect-ratio:3/2} .g-high .h-h{grid-column:span 4; aspect-ratio:4/5} .g-high .h-i{grid-column:span 4; aspect-ratio:3/2} } @media (max-width:899px){ .g-high{grid-template-columns:1fr 1fr; gap:8px} .g-high .h-a, .g-high .h-f{grid-column:span 2; aspect-ratio:16/10} .g-high .h-b,.g-high .h-c,.g-high .h-e,.g-high .h-h{aspect-ratio:4/5} .g-high .h-d,.g-high .h-g,.g-high .h-i{aspect-ratio:3/2} } .g-all-label{ max-width:1500px; margin:clamp(34px,5vw,60px) auto 14px; padding:0 var(--g-pad); font-size:12px; font-weight:700; letter-spacing:.28em; text-transform:uppercase; color:var(--g-ink-dim); } /* justified grid: JS computes row heights; images get explicit px sizes */ .g-grid{max-width:1500px; margin:0 auto; padding:0 var(--g-pad) 20px} .g-grid__row{display:flex; gap:8px; margin-bottom:8px} .g-grid .g-ph{border-radius:8px; flex:0 0 auto} .g-sentinel{height:2px} /* entrance micro-reveal for grid chunks */ @media (prefers-reduced-motion:no-preference){ .g-ph.is-new{opacity:0; transform:translateY(14px)} .g-ph.is-new.is-shown{opacity:1; transform:none; transition:opacity .5s var(--g-ease), transform .5s var(--g-ease)} } /* ============ footer ============ */ .g-foot{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; padding:26px var(--g-pad) max(26px, env(safe-area-inset-bottom)); max-width:1500px; margin:0 auto; color:var(--g-ink-dim); font-size:13.5px; } .g-foot p{margin:0} .g-foot a{color:var(--g-ink-dim); transition:color .2s} .g-foot a:hover{color:var(--g-ink)} .g-foot a:focus-visible{outline:2px solid var(--g-pink); outline-offset:3px} /* ============ lightbox ============ */ .g-lb{ position:fixed; inset:0; z-index:300; background:rgba(8,4,14,.96); opacity:0; visibility:hidden; transition:opacity .3s var(--g-ease), visibility 0s linear .3s; } .g-lb.is-open{opacity:1; visibility:visible; transition:opacity .3s var(--g-ease)} /* reserve room for the top (counter) and bottom (download) bars so tall portrait photos are never covered by the chrome, on any viewport. NB: percentage max-height fails inside the auto grid track (cyclic), so the image is capped against the viewport with the same variables. */ .g-lb{ --lb-top:calc(clamp(60px,9vh,80px) + env(safe-area-inset-top, 0px)); --lb-bot:calc(clamp(76px,11vh,100px) + env(safe-area-inset-bottom, 0px)); --lb-side:clamp(10px,2vw,28px); } .g-lb__stage{position:absolute; inset:0; display:grid; place-items:center; padding:var(--lb-top) var(--lb-side) var(--lb-bot)} .g-lb__img{ max-width:calc(100vw - var(--lb-side)*2); max-height:calc(100vh - var(--lb-top) - var(--lb-bot)); max-height:calc(100dvh - var(--lb-top) - var(--lb-bot)); width:auto; height:auto; border-radius:6px; background:#160d24; /* purple stage-light bloom around the selected photo */ box-shadow:0 24px 80px rgba(0,0,0,.55), 0 0 46px rgba(139,61,255,.5), 0 0 110px rgba(255,79,163,.26); outline:1px solid rgba(242,237,228,.1); outline-offset:-1px; user-select:none; -webkit-user-drag:none; touch-action:pan-y; } .g-lb__img.is-anim{transition:transform .38s var(--g-ease), opacity .38s var(--g-ease)} @media (prefers-reduced-motion:reduce){ .g-lb__img.is-anim{transition:none} } .g-lb__bar{ position:absolute; left:0; right:0; z-index:2; display:flex; align-items:center; gap:16px; padding:14px clamp(14px,2.6vw,28px); transition:opacity .4s, transform .4s var(--g-ease); } .g-lb__bar--top{top:0; padding-top:max(14px, env(safe-area-inset-top)); background:linear-gradient(180deg, rgba(8,4,14,.72), transparent)} .g-lb__bar--bottom{bottom:0; justify-content:center; gap:12px; padding-bottom:max(14px, env(safe-area-inset-bottom)); background:linear-gradient(0deg, rgba(8,4,14,.72), transparent)} .g-lb__count{ font-family:var(--g-sans); font-weight:700; font-size:14px; letter-spacing:.16em; color:var(--g-ink); font-variant-numeric:tabular-nums; } .g-lb__credit{margin-left:auto; margin-right:8px; font-size:12px; letter-spacing:.08em; color:var(--g-ink-dim)} .g-lb__btn{ -webkit-appearance:none; appearance:none; border:1px solid rgba(242,237,228,.25); background:rgba(23,12,38,.5); width:44px; height:44px; border-radius:50%; color:var(--g-ink); display:grid; place-items:center; transition:background .2s, border-color .2s; } .g-lb__btn:hover{background:rgba(242,237,228,.14)} .g-lb__btn:focus-visible{outline:2px solid var(--g-pink); outline-offset:2px} .g-lb__btn svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round} .g-lb__nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:2; -webkit-appearance:none; appearance:none; border:1px solid rgba(242,237,228,.22); background:rgba(13,7,20,.45); color:var(--g-ink); width:52px; height:52px; border-radius:50%; display:grid; place-items:center; transition:background .2s, opacity .4s, border-color .2s; } .g-lb__nav:hover{background:rgba(255,79,163,.22); border-color:rgba(255,79,163,.5)} .g-lb__nav:focus-visible{outline:2px solid var(--g-pink); outline-offset:2px} .g-lb__nav svg{width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round} .g-lb__nav--prev{left:clamp(8px,2vw,24px)} .g-lb__nav--next{right:clamp(8px,2vw,24px)} @media (max-width:720px){ .g-lb__nav{display:none} } /* swipe on mobile */ .g-lb__dl, .g-lb__share{ display:inline-flex; align-items:center; gap:9px; -webkit-appearance:none; appearance:none; border:1px solid rgba(242,237,228,.28); background:rgba(23,12,38,.55); color:var(--g-ink); font-size:13.5px; font-weight:600; letter-spacing:.04em; min-height:44px; padding:0 20px; border-radius:999px; transition:background .2s, border-color .2s, color .2s; } .g-lb__dl:hover, .g-lb__share:hover{background:rgba(255,79,163,.16); border-color:rgba(255,79,163,.5)} .g-lb__dl:focus-visible, .g-lb__share:focus-visible{outline:2px solid var(--g-pink); outline-offset:2px} .g-lb__dl svg, .g-lb__share svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round} .g-lb__share.is-done{border-color:rgba(139,255,193,.55); color:#b8f5d2} /* idle: chrome fades away, photo stays */ .g-lb.is-idle .g-lb__bar, .g-lb.is-idle .g-lb__nav{opacity:0; pointer-events:none} /* view switching */ #view-home[hidden], #view-day[hidden]{display:none} @media (max-width:640px){ .g-top{gap:8px; padding-inline:14px} .g-top__word{display:none} .g-top__days{gap:2px} .g-top__day{padding:8px 7px; font-size:12px} .g-top__day span{display:none} .g-hero{min-height:72svh} .g-eyebrow{font-size:10px; letter-spacing:.18em} .g-title{font-size:clamp(44px,13.5vw,64px); overflow-wrap:anywhere} .g-title__sub{font-size:11px; letter-spacing:.3em} .g-line{font-size:13px} .g-line__credit{white-space:normal} .g-lb__credit{display:none} }