/* Art page — hero SVG, grid, lightbox. Base: tokens.css + site.css No site banner strip; art-hero holds the iconic eye SVG. */ .art-tools { position: absolute; top: 0.35rem; right: 0.75rem; z-index: 5; display: flex; align-items: center; gap: 0.5rem; } .page-art .page-wrapper { position: relative; align-items: stretch; } .art-hero { width: 100%; max-width: 100vw; margin: 0 auto 1.25rem; text-align: center; overflow: visible; /* allow scroll-shrink without clipping logo */ } /* Scroll-shrink targets logo media, not the whole hero chrome */ .art-hero .art-hero-img, .art-hero img, .art-hero svg { transform-origin: center top; /* no CSS transition on transform — scale is scroll-driven via rAF in art.js */ } /* Nav sits under the SVG (replaces old intro-text slot) */ .page-art .nav-links { margin: 0.25rem 0 1rem; } /* Higher specificity than body.site button (which was hiding the earth bg) */ body.site button.earth-button, .earth-button { width: 2.75rem; height: 2.75rem; min-width: 2.75rem; min-height: 2.75rem; padding: 0; background: url('/nc_assets/img/earth.png') no-repeat center / cover !important; background-color: transparent !important; border-radius: 50%; border: none !important; box-shadow: none; cursor: pointer; transition: transform 0.3s; will-change: transform; color: transparent; font-size: 0; line-height: 0; overflow: hidden; } body.site button.earth-button:hover, .earth-button:hover { transform: scale(1.1); /* Must restate full background: body.site button:hover uses background shorthand */ background: url('/nc_assets/img/earth.png') no-repeat center / cover !important; color: transparent; } /* Curator overlay — viewport-fixed; art.js may portal to . Prefer visibility/pointer-events over off-screen top so nothing extends scroll. */ #art-curator-popup.popup, .popup#art-curator-popup { position: fixed; inset: 0; width: 100%; height: 100%; max-height: 100vh; max-height: 100dvh; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); background: url('/nc_assets/img/moon.jpg') no-repeat center / cover; display: flex; justify-content: center; align-items: center; z-index: 1000; transform: translateY(-100%); transition: transform 0.6s ease; overflow: hidden; overscroll-behavior: none; box-sizing: border-box; visibility: hidden; pointer-events: none; } #art-curator-popup.popup.active, .popup#art-curator-popup.active { transform: translateY(0); visibility: visible; pointer-events: auto; } /* Lock page scroll while curator overlay is open */ body.site.page-art:has(#art-curator-popup.active), body.site.page-art.curator-open { overflow: hidden !important; } #art-curator-popup .popup-text, .popup#art-curator-popup .popup-text { padding: 0.3125rem; border-radius: 0.3125rem; text-align: center; max-width: 80%; font-size: 1.125rem; display: flex; flex-direction: column; gap: 1.25rem; } /* Beat body.site button border: 1px solid #000 */ body.site button.close-button, .close-button { border: none !important; outline: none; box-shadow: none; width: auto; min-width: 5rem; padding: 0.5rem 1.25rem; cursor: pointer; transition: background-color 0.3s, color 0.3s; background: rgba(255, 255, 255, 0.85); color: #000; } body.site button.close-button:hover, .close-button:hover { background: rgba(255, 255, 255, 0.95); color: #000; border: none !important; } /* Logo: public_html/alteye.svg as-is (size rules; scroll-shrink is JS) */ .art-hero .art-hero-img, .art-hero img { width: 100%; max-width: 100%; height: auto; display: block; margin: 0 auto; } /* Pinterest-style Masonry grid Column widths live on .grid-sizer + .art-item (Masonry columnWidth: '.grid-sizer'). During site unify these media queries were dropped → everything stayed width:100%. */ .page-art { --art-gutter: var(--gutter, 1rem); } .grid-wrapper { max-width: 100%; margin: 0 auto; padding: 0 0.625rem 2rem; overflow: visible; box-sizing: border-box; width: 100%; } .art-grid { position: relative; width: 100%; min-height: 12rem; /* avoid 0-height before Masonry measures images */ height: auto; margin: 0 auto; padding: 0 0.5rem; overflow: visible; /* do not clip absolute-positioned items */ box-sizing: border-box; } /* Mobile: 1 column */ .grid-sizer, .art-item { width: 100%; margin: 0 0 var(--art-gutter) 0; box-sizing: border-box; } .art-item { background-color: #000000; border-radius: 1rem; text-align: center; transition: transform 0.3s, box-shadow 0.3s, opacity 0.3s; will-change: transform; box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1); /* Stay visible even before Masonry positions (no opacity:0) */ opacity: 1; visibility: visible; } .art-item:hover { transform: scale(1.05); box-shadow: 0 0.5rem 1rem rgba(163, 0, 0, 0.3); opacity: 0.95; } .art-item img { width: 100%; max-width: 100%; height: auto; object-fit: cover; margin-bottom: 0.625rem; border-radius: 0.5rem; display: block; /* Override any site-wide image quirks */ opacity: 1; visibility: visible; } .art-item p { margin: 0; font-size: 0.875rem; color: #FFFFFF; } /* phone-up: 2 columns (token phone edge) */ @media (min-width: 481px) { .grid-sizer, .art-item { width: calc(50% - 0.5rem); } .art-grid { padding: 0 calc(var(--art-gutter) / 2); } } /* tablet: 3 columns */ @media (min-width: 769px) { .grid-sizer, .art-item { width: calc(33.333% - 0.75rem); } } /* wide desktop: 4 columns — density needs more than 1025px so columns stay readable */ @media (min-width: 1200px) { .grid-sizer, .art-item { width: calc(25% - 0.85rem); } .art-grid { max-width: 120rem; margin: 0 auto; } } .art-lightbox { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.92); z-index: 2000; display: none; align-items: center; justify-content: center; padding: 1rem; /* Clear fixed radio footer via shared token (not hardcoded 80px) */ padding-bottom: calc(1rem + var(--footer-clearance, 80px)); padding-top: calc(1rem + var(--safe-top, env(safe-area-inset-top, 0px))); cursor: zoom-out; box-sizing: border-box; } .art-lightbox.active { display: flex; } .art-lightbox img { max-width: min(96vw, 1200px); max-height: min( 90vh, calc(100dvh - var(--footer-clearance, 80px) - 3rem - var(--safe-top, 0px)) ); width: auto; height: auto; object-fit: contain; border: 2px solid var(--accent-red, #a30000); } .art-lightbox .lb-caption { position: absolute; bottom: calc(1rem + var(--footer-clearance, 80px)); left: 50%; transform: translateX(-50%); color: #fff; font-family: "Courier New", monospace; background: rgba(0, 0, 0, 0.7); padding: 0.35rem 0.75rem; max-width: calc(100vw - 2rem); text-align: center; box-sizing: border-box; }