@font-face{font-family:'UAF Memory';src:url('/assets/fonts/uaf-memory.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;} @import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap'); *,*::before,*::after{margin:0;padding:0;box-sizing:border-box;} :root{ --bg-light:#F2F1ED; --text-main:#F2F1ED; --text-body:#B8B9C9; --accent:#C2A48C; --dark-text:#1A1A1A; --mid-text:#555555; /* Sidebar: text strip + icon strip side by side */ --sb-text-w: 36px; --sb-icon-w: 52px; --sb-total: 88px; /* Background gradient — single source of truth (stage, detail, about). Brighter, bluer center than the original near-black so the gradient reads clearly rather than "very dark and dramatic". */ --bg-gradient: radial-gradient(ellipse at 60% 38%,#222c78 0%,#161a5c 28%,#0c0e44 55%,#070935 80%,#03041d 100%); } html{height:500vh;} body{font-family:'Inter',sans-serif;font-weight:300;background:#04053A;} /* ── Depth-travel mode (opt-in via ?depth=1; see app.js initDepth) ────────── The default reveal is untouched — these rules apply only when the depth engine adds .depth-mode to . The engine sets html height in JS (the journey scales with the layer count), so the fixed 500vh must yield; and the catalog drops mix-blend-mode so overlapping objects don't brighten additively as they pass through each other during the fly-through. */ html.depth-mode{height:auto;} /* Depth-fog: a soft vignette that swallows the edges and far distance into the dark, so the journey feels like moving forward through a dark space. Centre is clear (objects at the front stay crisp); corners fall into black. */ html.depth-mode #stage::after{ content:'';position:absolute;inset:0;z-index:16;pointer-events:none; background:radial-gradient(ellipse at 50% 40%, transparent 34%, rgba(4,5,58,0.16) 66%, rgba(1,1,16,0.6) 100%); } html.depth-mode #catalog{mix-blend-mode:normal;} html.depth-mode .obj-wrap{cursor:default;} html.depth-mode .obj-wrap[style*="pointer-events: auto"]{cursor:pointer;} /* Depth progress: pips (one per layer) + a small readout, right edge. */ #depthProgress{display:none;} html.depth-mode #depthProgress{ position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:600; display:flex;flex-direction:column;align-items:center;gap:8px; opacity:0;transition:opacity 0.5s ease;pointer-events:none; } html.depth-mode #depthProgress.on{opacity:1;} .dp-pips{display:flex;flex-direction:column;gap:9px;align-items:center;} .dp-pip{width:6px;height:6px;border-radius:50%;background:rgba(242,241,237,0.22);transition:background 0.3s ease,transform 0.3s ease;} .dp-pip.on{background:var(--accent);transform:scale(1.6);} .dp-readout{ font-family:'Inter',sans-serif;font-size:9px;font-weight:300;letter-spacing:0.16em; color:var(--text-body);margin-top:4px;font-variant-numeric:tabular-nums; } /* ── Reduced motion: a calm, static, scrollable layout (added by app.js when prefers-reduced-motion is set) — no approach animation, no fly-through, no idle float. Everything flows in the normal document; the two questions become headers and the objects a quiet grid. The right thing for this audience. ── */ html.reduced-motion, html.reduced-motion body { height:auto !important; overflow:visible !important; } html.reduced-motion #stage { position:static !important; height:auto !important; overflow:visible !important; } html.reduced-motion #contentArea { position:static !important; inset:auto !important; left:0 !important; } html.reduced-motion #heroText, html.reduced-motion #secondText { position:relative !important; opacity:1 !important; transform:none !important; min-height:80vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 8%; } html.reduced-motion .scroll-arrow { display:none !important; } html.reduced-motion #frost, html.reduced-motion #galleryNav, html.reduced-motion #exploreHint { display:none !important; } html.reduced-motion #catalog { position:static !important; inset:auto !important; height:auto !important; display:grid !important; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:48px 32px; padding:2vh 8% 16vh; perspective:none !important; mix-blend-mode:normal !important; } html.reduced-motion .obj-wrap { position:static !important; transform:none !important; opacity:1 !important; filter:none !important; width:auto !important; height:auto !important; display:flex !important; flex-direction:column; align-items:center; cursor:pointer; } html.reduced-motion .obj-wrap .obj-lean { transform:none !important; width:100% !important; } html.reduced-motion .obj-wrap .float-wrap { width:100% !important; max-width:210px; margin:0 auto !important; animation:none !important; } html.reduced-motion .obj-wrap .obj-img { transition:none !important; } html.reduced-motion .obj-wrap .obj-label { position:static !important; opacity:1 !important; transform:none !important; margin-top:16px; font-size:10px; } html.reduced-motion .obj-wrap.locked { display:none !important; } /* unpublished ambient objects: hidden in the static view */ /* Neutralise all animation/transition motion when reduced motion is requested. */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after { animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; } } /* ══ STAGE ══ */ #stage{ position:fixed;inset:0;overflow:hidden; background:var(--bg-gradient); } /* ══════════════════════════════════════ LEFT SIDEBAR — two columns side by side: [vertical "One Thing With"] [hamburger + back at top] ══════════════════════════════════════ */ #sidebar{ position:fixed;left:0;top:0;bottom:0; width:var(--sb-total);z-index:620; display:flex;flex-direction:row; } /* Left strip: vertical site name */ #sb-name{ width:var(--sb-text-w); display:flex;align-items:flex-start;justify-content:flex-end; padding-top:29px; } .site-name{ font-family:'UAF Memory',serif; font-size:14px;font-weight:400; letter-spacing:0.18em;text-transform:uppercase; color:rgba(184,185,201,0.40); writing-mode:vertical-rl; transform:rotate(180deg); cursor:pointer; transition:color 0.25s; user-select:none; white-space:nowrap; } .site-name:hover{color:var(--text-main);} /* Right strip: icons column */ #sb-icons{ width:var(--sb-icon-w); display:flex;flex-direction:column; align-items:flex-start; padding-top:16px; gap:0; } .sb-hamburger{ width:44px;height:44px; display:flex;align-items:center;justify-content:center; cursor:pointer;flex-shrink:0; } .sb-hamburger img{ width:32px;height:auto; mix-blend-mode:screen; opacity:0.85;transition:opacity 0.2s; } .sb-hamburger:hover img{opacity:1;} /* ══ MENU OVERLAY ══ */ #menuOverlay{ position:fixed;inset:0;z-index:390; background:rgba(2,3,21,0);pointer-events:none; transition:background 0.38s ease; } #menuOverlay.open{background:rgba(2,3,21,0.38);pointer-events:all;} /* ══ MENU PANEL — 220px, opens from sidebar edge ══ */ #menuPanel{ position:fixed;top:0;bottom:0; left:-240px; width:240px;z-index:650; background:var(--bg-light); transition:left 0.44s cubic-bezier(.4,0,.2,1); display:flex;flex-direction:column; padding:32px 36px 44px; } #menuPanel.open{ left:0; box-shadow:16px 0 56px rgba(2,3,30,0.5); } /* Close icon inside panel */ .menu-close{ position:absolute;top:24px;right:22px; cursor:pointer;border:none;background:none;padding:4px; font-size:20px;color:rgba(85,85,85,0.35); line-height:1;transition:color 0.2s; font-family:'Inter',sans-serif; } .menu-close:hover{color:var(--dark-text);} /* Nav links */ .menu-links{ display:flex;flex-direction:column; gap:28px;flex:1;justify-content:center; } .menu-link{ font-family:'UAF Memory',serif; font-size:28px;font-weight:400; letter-spacing:0.01em;text-transform:lowercase; color:var(--mid-text);cursor:pointer;text-decoration:none; transition:color 0.22s;border:none;background:none;text-align:left; line-height:1.1; } .menu-link:hover{color:var(--dark-text);} /* Social links */ .menu-social{ display:flex;align-items:center;gap:10px; padding-top:24px;margin-top:16px; border-top:1px solid rgba(85,85,85,0.1); } .menu-social img{ width:22px;height:auto; mix-blend-mode:multiply;opacity:0.4; transition:opacity 0.2s;cursor:pointer; } .menu-social img:hover{opacity:0.7;} /* ══ CONTENT AREA ══ */ #contentArea{ position:absolute; left:var(--sb-total);top:0;right:0;bottom:0; } /* ══ HERO ══ */ #heroText{ position:absolute; /* Extend leftward by the sidebar width so the centered text aligns with the viewport's center, not the catalog area's center. */ left:calc(-1 * var(--sb-total));right:0;top:0;bottom:0; z-index:20; display:flex;flex-direction:column; align-items:center;justify-content:center; text-align:center; will-change:opacity,transform; } #heroText h1{ font-family:'UAF Memory',serif; font-size:clamp(28px,4.2vw,60px); font-weight:400;color:var(--text-main); line-height:1.26;letter-spacing:0.01em; } .explore-label{ margin-top:20px;font-family:'Inter',sans-serif; font-size:14px;font-weight:300;letter-spacing:0.44em; color:var(--accent);text-transform:lowercase;cursor:default; } .scroll-arrow{ margin-top:28px; display:flex;flex-direction:column;align-items:center; } .scroll-arrow img{ width:24px;height:auto; mix-blend-mode:screen;opacity:0.55; animation:pulse 2.6s ease-in-out infinite; } @keyframes pulse{0%,100%{opacity:.35;}50%{opacity:.75;}} /* ══ SECOND Q ══ */ #secondText{ position:absolute; left:calc(-1 * var(--sb-total));right:0;top:0;bottom:0; z-index:20; display:flex;align-items:center;justify-content:center; text-align:center;opacity:0;pointer-events:none; } #secondText h2{ font-family:'UAF Memory',serif; font-size:clamp(20px,3.2vw,46px); font-weight:400;color:var(--text-main);line-height:1.32; } /* ══ CATALOG ══ */ #catalog{position:absolute;inset:0;z-index:10;perspective:900px;perspective-origin:center center;mix-blend-mode:screen;} .obj-wrap{ position:absolute;cursor:pointer;transform-origin:center center; transform:rotate(var(--rot)) scale(0.06); opacity:0;filter:blur(30px); will-change:transform,opacity,filter; } .obj-wrap:hover{z-index:50;} .obj-wrap:hover .obj-img{ /* Subtle downward depth shadow only — the radiating gold halo was removed (it made objects look like glowing ghosts). Keeps the gentle scale lift. */ filter:drop-shadow(0 16px 40px rgba(4,5,40,0.55)); transform:scale(1.08); transition:transform 0.28s cubic-bezier(.34,1.4,.64,1),filter 0.22s ease; } .obj-wrap:hover .obj-label{opacity:1;} /* Locked (unpublished) objects — present as ambient depth in the back, but not interactive: no pointer cursor, no hover lift, glow, or label. */ .obj-wrap.locked{cursor:default;} .obj-wrap.locked:hover{z-index:auto;} .obj-wrap.locked:hover .obj-img{filter:none;transform:none;} .obj-wrap.locked:hover .obj-label{opacity:0;} .obj-img{width:100%;height:auto;display:block;transition:filter 0.28s ease;} .float-wrap{display:block;width:100%;} .obj-label{ position:absolute;top:calc(100% + 7px);left:50%; transform:translateX(-50%); font-family:'Inter',sans-serif;font-size:9px;font-weight:300; letter-spacing:0.22em;text-transform:uppercase; color:var(--accent);white-space:nowrap; opacity:0;pointer-events:none;transition:opacity 0.2s; } /* Float keyframes */ /* Catalog floats — vertical only, slow up-and-down drift */ @keyframes floatA{0%,100%{transform:translateY(0);}50%{transform:translateY(-7px);}} @keyframes floatB{0%,100%{transform:translateY(0);}50%{transform:translateY(-5px);}} @keyframes floatC{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}} .obj-wrap.floating .float-wrap.floatA{animation:floatA 16s ease-in-out infinite;} .obj-wrap.floating .float-wrap.floatB{animation:floatB 22s ease-in-out infinite;} .obj-wrap.floating .float-wrap.floatC{animation:floatC 28s ease-in-out infinite;} /* ══ FROST ══ */ #frost{position:absolute;inset:0;z-index:15;pointer-events:none;} /* Mobile swipe-gallery navigation — desktop hides it (constellation has no pager) */ #galleryNav{display:none;} /* ══ EXPLORE HINT ══ */ #exploreHint{ position:fixed;bottom:24px;right:28px;z-index:50; font-family:'Inter',sans-serif;font-size:9px; letter-spacing:0.32em;color:rgba(194,164,140,0.38); font-weight:300;text-transform:lowercase; opacity:0;transition:opacity 0.8s ease;pointer-events:none; } /* ══ DETAIL PANEL ══ */ #detailPanel{ position:fixed; inset:0; z-index:500; background:var(--bg-gradient); opacity:0;pointer-events:none;transition:opacity 0.4s ease; display:flex;align-items:center;justify-content:center; } #detailPanel.open{opacity:1;pointer-events:all;} .detail-inner{ display:flex;align-items:center; width:100%;height:100%;padding:40px 7%;gap:7%; } .detail-img-col{ flex:0 0 38%;display:flex; align-items:center;justify-content:center;height:100%; } .detail-img-col img{ max-height:62vh;max-width:100%;object-fit:contain; filter:drop-shadow(0 24px 64px rgba(4,5,40,0.85)); mix-blend-mode:screen; animation:detailFloat 9s ease-in-out infinite; } /* Detail view — rotation only, slow left-and-right rocking. No vertical drift. */ @keyframes detailFloat{0%,100%{transform:rotate(-2.5deg);}50%{transform:rotate(2.5deg);}} .detail-back-btn{ position:absolute;left:calc(var(--sb-total) + 16px);top:50%;transform:translateY(-50%); background:none;border:none;z-index:510; cursor:pointer;padding:10px;line-height:0; } .detail-back-btn img{ width:40px;height:auto;display:block; mix-blend-mode:screen; opacity:0.8;transition:opacity 0.2s; } .detail-back-btn:hover img{opacity:1;} .detail-text-col{flex:1;display:flex;flex-direction:column;max-width:580px;} .detail-title-row{display:flex;align-items:center;gap:14px;margin-bottom:22px;} .detail-name{ font-family:'UAF Memory',serif; font-size:clamp(32px,4vw,56px); font-weight:700;color:var(--text-main);line-height:1.05; } .detail-desc{ font-family:'Inter',sans-serif;font-size:17px;font-weight:300; line-height:1.85;color:var(--text-body); display:-webkit-box;-webkit-line-clamp:7; -webkit-box-orient:vertical;overflow:hidden; } .detail-desc.expanded{display:block;-webkit-line-clamp:unset;} .learn-more{ margin-top:14px;font-family:'Inter',sans-serif; font-size:16px;font-weight:500;color:var(--accent); cursor:pointer;border:none;background:none;padding:0; text-transform:lowercase;transition:opacity 0.18s;letter-spacing:0; } .learn-more:hover{opacity:0.65;} .detail-note-section{margin-top:18px;} .detail-note-toggle{ font-family:'Inter',sans-serif;font-size:16px;font-weight:500; color:var(--accent);cursor:pointer;border:none;background:none; padding:0;text-transform:lowercase;transition:opacity 0.18s;letter-spacing:0; } .detail-note-toggle:hover{opacity:0.65;} .detail-note-body{ margin-top:12px;font-family:'Inter',sans-serif; font-size:17px;font-weight:300;line-height:1.85;color:var(--text-body); } /* ══════════════════════════════════════ ABOUT OVERLAY ══════════════════════════════════════ */ #aboutPanel{ position:fixed;inset:0; z-index:450; display:flex;flex-direction:column; opacity:0;pointer-events:none; transition:opacity 0.5s ease; overflow:hidden; } #aboutPanel.open{opacity:1;pointer-events:all;} /* ── Supported by header strip ── */ #aboutHeader{ position:relative; flex-shrink:0; background:var(--bg-light); display:flex;align-items:center; gap:36px; padding:0 52px 0 calc(var(--sb-total) + 32px); height:80px; transform:translateY(-100%); transition:transform 0.6s cubic-bezier(0.34,1.2,0.64,1); z-index:2; } #aboutPanel.open #aboutHeader{transform:translateY(0);} .supported-label{ font-family:'Inter',sans-serif;font-size:10px; font-weight:300;letter-spacing:0.22em; color:var(--mid-text);text-transform:lowercase; white-space:nowrap; opacity:0;transition:opacity 0.3s ease 0.5s; } #aboutPanel.open .supported-label{opacity:1;} .sponsor-logo{ height:28px;width:auto;object-fit:contain; opacity:0;transform:translateY(-6px); transition:opacity 0.35s ease, transform 0.35s ease; } #aboutPanel.open .sponsor-logo:nth-child(2){transition-delay:0.55s;} #aboutPanel.open .sponsor-logo:nth-child(3){transition-delay:0.65s;} #aboutPanel.open .sponsor-logo{opacity:1;transform:translateY(0);} /* ── Scrollable body ── */ #aboutScroll{ flex:1;overflow-y:auto; scroll-behavior:smooth; } #aboutScroll::-webkit-scrollbar{width:3px;} #aboutScroll::-webkit-scrollbar-track{background:transparent;} #aboutScroll::-webkit-scrollbar-thumb{background:rgba(194,164,140,0.25);border-radius:2px;} /* ── Dark project description section ── */ #aboutDark{ background:var(--bg-gradient); padding:80px 10% 100px calc(var(--sb-total) + 5%); min-height:calc(100vh - 80px); display:flex;flex-direction:column; justify-content:center; } .about-title{ font-family:'UAF Memory',serif; font-size:clamp(36px,5vw,72px); font-weight:400;color:var(--text-main); text-align:center;margin-bottom:52px; } .about-body{ font-family:'Inter',sans-serif;font-size:15px; font-weight:300;line-height:2;color:var(--text-body); max-width:680px;margin:0 auto; } .about-body p+p{margin-top:28px;} .about-link{ color:var(--accent);text-decoration:none; border-bottom:1px solid rgba(194,164,140,0.4); transition:border-color 0.2s,color 0.2s; } .about-link:hover{color:var(--text-main);border-bottom-color:var(--text-main);} /* ── Footer ── */ #aboutFooter{ background:var(--bg-light); padding:52px 10% 52px calc(var(--sb-total) + 5%); display:grid; grid-template-columns:1fr 1fr 120px; gap:48px;align-items:start; opacity:0;transform:translateY(32px); transition:opacity 0.55s ease, transform 0.55s ease; } #aboutFooter.visible{opacity:1;transform:translateY(0);} .footer-brand{ display:flex;flex-direction:column;gap:18px; } .footer-brand-name{ font-family:'UAF Memory',serif;font-size:17px; font-weight:400;color:var(--dark-text);letter-spacing:0.1em; } .footer-nav{ display:flex;flex-direction:column;gap:10px; } .footer-nav a{ font-family:'Inter',sans-serif;font-size:11px; font-weight:300;letter-spacing:0.2em; color:var(--mid-text);text-decoration:none; text-transform:lowercase;transition:color 0.18s; } .footer-nav a:hover{color:var(--dark-text);} .footer-social{ display:flex;flex-direction:column; align-items:flex-end;gap:14px;padding-top:4px; } .footer-social a{ font-family:'Inter',sans-serif;font-size:10px; font-weight:300;letter-spacing:0.2em; color:var(--mid-text);text-decoration:none; text-transform:uppercase;transition:color 0.18s; } .footer-social a:hover{color:var(--dark-text);} /* Back arrow for about */ #aboutBackBtn{ position:fixed;left:calc(var(--sb-total) + 16px); bottom:32px;z-index:460; background:none;border:none; font-family:'Inter',sans-serif;font-size:11px; font-weight:300;letter-spacing:0.22em; color:rgba(184,185,201,0.35); cursor:pointer;padding:8px; transition:color 0.2s; opacity:0;pointer-events:none; text-transform:lowercase; } #aboutBackBtn.visible{opacity:1;pointer-events:all;} #aboutBackBtn:hover{color:var(--text-main);} /* Mouse lean — applied via CSS vars set by JS */ .float-wrap{ transform-style:preserve-3d; } /* ══════════════════════════════════════ SUBMIT + CONTACT — SHARED CARD STYLES ══════════════════════════════════════ */ .form-overlay{ position:fixed;inset:0; z-index:460; display:flex;align-items:center;justify-content:center; opacity:0;pointer-events:none; transition:opacity 0.35s ease; /* Dark bg visible around card */ background:rgba(4,5,58,0.55); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } .form-overlay.open{opacity:1;pointer-events:all;} /* The flying card */ .form-card{ background:var(--bg-light); width:min(860px, 88%); max-height:88vh; overflow-y:auto; position:relative; padding:52px 56px 48px; box-shadow:0 0 0 rgba(2,3,21,0); transform:perspective(1200px) translateZ(-1800px) rotateX(18deg) scale(0.06); opacity:0; transition: transform 0s, opacity 0s, box-shadow 0.6s ease; } .form-card::-webkit-scrollbar{width:3px;} .form-card::-webkit-scrollbar-thumb{background:rgba(194,164,140,0.3);} .form-overlay.open .form-card{ animation:cardFlyIn 0.85s cubic-bezier(0.22,1,0.36,1) forwards; box-shadow:0 48px 120px rgba(2,3,21,0.72); } @keyframes cardFlyIn{ 0% {transform:perspective(1200px) translateZ(-1800px) rotateX(18deg) rotateY(-4deg) scale(0.06); opacity:0;} 60% {opacity:1;} 88% {transform:perspective(1200px) translateZ(14px) rotateX(-1.5deg) rotateY(0.5deg) scale(1.018);} 100%{transform:perspective(1200px) translateZ(0) rotateX(0deg) rotateY(0deg) scale(1); opacity:1;} } /* Card close × */ .card-close{ position:absolute;top:20px;right:22px; background:none;border:none;cursor:pointer; font-size:16px;color:rgba(85,85,85,0.4); padding:6px;transition:color 0.2s; font-family:'Inter',sans-serif;line-height:1; } .card-close:hover{color:var(--dark-text);} /* Card title */ .card-title{ font-family:'UAF Memory',serif; font-size:clamp(28px,3.8vw,48px); font-weight:400;color:var(--dark-text); text-align:center;margin-bottom:40px; } /* Form fields — dotted accent underline */ .field-group{ display:flex;flex-direction:column;gap:0; margin-bottom:8px; } .field-label{ font-family:'Inter',sans-serif;font-size:12px; font-weight:300;letter-spacing:0.06em; color:var(--mid-text);padding-bottom:6px; border-bottom:1px dashed var(--accent); } .field-group input, .field-group textarea{ background:transparent;border:none; border-bottom:1px dashed var(--accent); font-family:'Inter',sans-serif;font-size:13px; font-weight:300;color:var(--dark-text); padding:10px 0 6px;outline:none;width:100%; resize:none; } .field-group input::placeholder, .field-group textarea::placeholder{ color:rgba(85,85,85,0.35); font-weight:300; } .field-group textarea{min-height:110px;} /* Two-column grid for submit */ .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px 40px; margin-bottom:24px; } .form-col{display:flex;flex-direction:column;gap:16px;} /* Privacy radios */ .privacy-label{ font-family:'Inter',sans-serif;font-size:11px; font-weight:300;letter-spacing:0.06em; color:var(--mid-text);margin-bottom:10px; } .radio-options{display:flex;flex-direction:column;gap:8px;} .radio-opt{ display:flex;align-items:center;gap:10px; font-family:'Inter',sans-serif;font-size:11px; font-weight:300;color:var(--mid-text);cursor:pointer; } .radio-opt input[type=radio]{ accent-color:var(--accent); width:12px;height:12px;cursor:pointer; flex-shrink:0; } /* Photo upload */ .photo-upload{ display:flex;align-items:center;gap:10px; font-family:'Inter',sans-serif;font-size:12px; font-weight:300;letter-spacing:0.08em; color:var(--mid-text);cursor:pointer; border:none;background:none;padding:0; transition:color 0.18s; } .photo-upload:hover{color:var(--dark-text);} .photo-upload span.plus{ font-size:18px;color:var(--accent);line-height:1; } /* Submit/send button */ .card-submit{ background:var(--accent);border:none; font-family:'Inter',sans-serif;font-size:10px; font-weight:300;letter-spacing:0.24em; color:var(--bg-light);text-transform:lowercase; padding:10px 28px;cursor:pointer; transition:opacity 0.2s; display:block;margin-left:auto; } .card-submit:hover{opacity:0.8;} /* Thank-you state */ .card-thankyou{display:none;text-align:left;padding:8px 0;} .card-thankyou.show{display:block;} .thankyou-main{ font-family:'Inter',sans-serif;font-size:16px; font-weight:300;color:var(--dark-text); line-height:1.8;margin-bottom:20px; } .thankyou-note{ font-family:'Inter',sans-serif;font-size:12px; font-weight:300;color:var(--accent); line-height:1.85; } /* Contact subtitle */ .card-subtitle{ font-family:'Inter',sans-serif;font-size:14px; font-weight:300;color:var(--mid-text); line-height:1.7;margin-bottom:32px; text-align:center; } .contact-form{display:flex;flex-direction:column;gap:16px;max-width:520px;margin:0 auto;} .contact-bottom{ display:flex;justify-content:space-between; align-items:center;margin-top:8px; } .contact-social{ font-family:'Inter',sans-serif;font-size:10px; font-weight:300;letter-spacing:0.2em; color:rgba(85,85,85,0.4);text-decoration:none; text-transform:uppercase;transition:color 0.18s; } .contact-social:hover{color:var(--dark-text);} /* Honeypot — visually hidden but not display:none, so bots' DOM scrapers see it */ .honeypot{ position:absolute;left:-9999px;top:auto; width:1px;height:1px;overflow:hidden; opacity:0;pointer-events:none; } /* Filename indicator next to "Add a photo" — appears after a file is selected */ .photo-name{ font-size:11px;color:var(--accent); letter-spacing:0.04em;text-transform:none; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; max-width:240px; } /* Form error region — shown when fetch fails or validation rejects */ .form-error{ font-family:'Inter',sans-serif;font-size:12px; font-weight:300;color:#b04848;line-height:1.5; margin:4px 0 0; } /* ── Mouse lean — separate layer, doesn't conflict with float animation ── */ .obj-lean{ display:block; transform-style:preserve-3d; transition:transform 0.55s cubic-bezier(0.25,0.46,0.45,0.94); } /* Language toggle in sidebar */ .sb-lang{ display:flex;flex-direction:column;align-items:center; gap:2px;margin-top:18px; } .sb-lang-btn{ font-family:'Inter',sans-serif;font-size:9px;font-weight:300; letter-spacing:0.18em;color:var(--text-body);opacity:0.35; cursor:pointer;padding:3px 2px;border:none;background:none; writing-mode:vertical-rl;transform:rotate(180deg); transition:opacity 0.2s;text-transform:uppercase; } .sb-lang-btn.active{opacity:0.85;} .sb-lang-btn:hover{opacity:0.65;} .sb-lang-sep{color:var(--text-body);opacity:0.15;font-size:8px;} /* ══════════════════════════════════════════════════════════════════ RESPONSIVE — VERTICAL ORIENTATIONS (mobile + tablet portrait) ─────────────────────────────────────────────────────────────────── Applies whenever the viewport is portrait-oriented and ≤1024px wide (catches phones in portrait AND tablets in portrait). Landscape tablets and desktops keep the constellation experience. ═══════════════════════════════════════════════════════════════════ */ @media (orientation: portrait) and (max-width: 1024px) { /* ── Document flow: switch from 500vh fixed-shell to natural scroll ── */ html { height: auto !important; } body { min-height: 100dvh; } #stage { position: relative !important; height: auto !important; } #contentArea { position: static !important; left: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important; } /* ── Sidebar → top bar ── */ #sidebar { flex-direction: row; width: 100vw; height: 56px; bottom: auto; background: rgba(2,3,21,0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); z-index: 700; align-items: center; padding: 0 16px; padding-top: env(safe-area-inset-top); padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); } #sb-name { width: auto; flex: 1; padding: 0; justify-content: flex-start; } .site-name { writing-mode: horizontal-tb; transform: none; font-size: 11px; letter-spacing: 0.22em; } #sb-icons { flex-direction: row; width: auto; padding: 0; gap: 12px; } .sb-hamburger { width: 36px; height: 36px; } .sb-hamburger img { width: 22px; } /* ── Hero — text bottom-aligned in its section so it sits CLOSE to the second question that follows. ── */ #heroText { position: relative !important; left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important; height: 60dvh; min-height: 340px; justify-content: flex-end !important; /* text at bottom of section */ padding-bottom: 4dvh; inset: auto !important; opacity: 1 !important; /* override JS scroll-fade */ transform: none !important; /* override JS translateY */ pointer-events: auto !important; } #heroText h1 { font-size: 23px !important; line-height: 1.32 !important; padding: 0 24px; } .explore-label { margin-top: 24px; font-size: 9px; } .scroll-arrow { margin-top: 48px; } /* ── Second question — text top-aligned so it sits CLOSE to the hero ── */ #secondText { position: relative !important; left: 0 !important; right: 0 !important; top: 0 !important; bottom: 0 !important; height: 28dvh; min-height: 180px; align-items: flex-start !important; /* text at top of section */ padding-top: 4dvh; inset: auto !important; opacity: 1 !important; pointer-events: auto !important; } #secondText h2 { font-size: 22px !important; line-height: 1.35 !important; padding: 0 24px; } /* ── Catalog — horizontal swipe gallery (one object per screen) ── */ #catalog { position: static !important; inset: auto !important; perspective: none !important; mix-blend-mode: normal !important; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; gap: 0; padding: 0; height: 62dvh; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; /* Firefox */ } #catalog::-webkit-scrollbar { display: none; } /* WebKit */ .obj-wrap { position: relative !important; left: auto !important; top: auto !important; flex: 0 0 100%; width: 100% !important; max-width: none; height: 100%; margin: 0; display: flex; align-items: center; justify-content: center; scroll-snap-align: center; scroll-snap-stop: always; flex-direction: column; /* image stacked over its name label */ /* Override the desktop initial state (scale 0.06, blur 30, opacity 0) AND the JS-set inline transform/opacity/filter on every scroll tick. */ transform: none !important; opacity: 1 !important; filter: none !important; } .obj-wrap .obj-lean { width: auto; } .obj-wrap .float-wrap { width: 60vw; max-width: 300px; margin: 0 auto; } /* Float animation runs by default on mobile (no scroll-triggered .floating class) */ .obj-wrap .float-wrap.floatA { animation: floatA 16s ease-in-out infinite; } .obj-wrap .float-wrap.floatB { animation: floatB 22s ease-in-out infinite; } .obj-wrap .float-wrap.floatC { animation: floatC 28s ease-in-out infinite; } /* Object name shown under the picture (no hover on touch to reveal it) */ .obj-wrap .obj-label { display: block; position: static; transform: none; opacity: 1; margin-top: 26px; font-size: 11px; letter-spacing: 0.24em; } /* Locked objects show only the "coming soon" tag, not a name */ .obj-wrap.locked .obj-label { display: none; } /* Locked (unpublished) objects — dimmed "coming soon" treatment on mobile too */ .obj-wrap.locked { opacity: 0.4 !important; } .obj-wrap.locked::after { content: 'coming soon'; position: absolute; bottom: 9%; left: 50%; transform: translateX(-50%); font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 300; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(194,164,140,0.8); white-space: nowrap; pointer-events: none; } /* ── Swipe-gallery navigation: dots + arrows ── */ #galleryNav { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 14px 0 7dvh; } .gallery-arrow { background: none; border: none; cursor: pointer; color: rgba(194,164,140,0.75); font-size: 26px; line-height: 1; padding: 2px 10px; font-family: 'UAF Memory', serif; } .gallery-arrow:disabled { opacity: 0.22; cursor: default; } .gallery-dots { display: flex; gap: 8px; align-items: center; } .gallery-dot { width: 7px; height: 7px; border-radius: 50%; padding: 0; border: none; background: rgba(194,164,140,0.28); cursor: pointer; transition: transform 0.25s ease, background 0.25s ease; } .gallery-dot.active { background: var(--accent); transform: scale(1.5); } /* ── Depth-travel mode on mobile: the swipe-gallery layout yields to the depth engine, which absolutely-projects each object with !important inline styles (those beat these rules). Here we only undo the swipe-gallery STRUCTURE. ── */ /* Restore the fixed-viewport window (mobile makes #stage relative / #contentArea static, which collapses the absolute #catalog to the document top). The depth field must be a fixed pane the objects project within. */ html.depth-mode #stage { position: fixed !important; inset: 0 !important; height: auto !important; overflow: hidden !important; } html.depth-mode #contentArea { position: absolute !important; inset: 0 !important; } html.depth-mode #catalog { position: absolute !important; inset: 0 !important; display: block !important; height: auto !important; overflow: visible !important; scroll-snap-type: none !important; perspective: none !important; mix-blend-mode: normal !important; } html.depth-mode .obj-wrap { position: absolute !important; display: block !important; flex: none !important; max-width: none !important; height: auto !important; margin: 0 !important; align-items: initial !important; justify-content: initial !important; } html.depth-mode .obj-wrap .float-wrap { width: 100% !important; max-width: none !important; margin: 0 !important; animation: none !important; } html.depth-mode .obj-wrap .obj-label { display: none !important; } html.depth-mode .obj-wrap.locked { opacity: 1 !important; } html.depth-mode .obj-wrap.locked::after { content: none !important; } html.depth-mode #galleryNav { display: none !important; } /* ── Frost is a desktop-only effect ── */ #frost { display: none !important; } /* ── Depth pips and explore hint hidden on mobile ── */ #exploreHint { display: none !important; } /* ── Detail panel — full-screen stacked layout ── */ #detailPanel { padding-top: 56px; /* clear the top bar */ } .detail-inner { flex-direction: column !important; padding: 16px 24px 32px !important; padding-bottom: max(32px, env(safe-area-inset-bottom)) !important; gap: 20px !important; overflow-y: auto !important; height: 100% !important; align-items: stretch !important; } .detail-img-col { flex: 0 0 auto !important; height: auto !important; width: 100% !important; } .detail-img-col img { max-height: 36vh; width: auto; margin: 0 auto; display: block; } .detail-text-col { flex: 1 1 auto !important; max-width: 100% !important; } .detail-name { font-size: clamp(28px, 7vw, 36px) !important; } .detail-desc { font-size: 14px !important; line-height: 1.75 !important; } /* Back button — larger and more prominent on mobile; inside a subtle pill-shaped tap target (44×44 minimum per HIG) */ .detail-back-btn { left: 8px !important; top: 64px !important; transform: none !important; padding: 10px !important; background: rgba(2,3,21,0.4) !important; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-radius: 999px; } .detail-back-btn img { width: 26px; opacity: 0.85; } .detail-back-btn:hover img { opacity: 1; } /* ── Menu panel — full height, narrower, slides over content ── */ #menuPanel { width: min(280px, 80vw) !important; left: -300px; padding-top: max(40px, env(safe-area-inset-top)); } #menuPanel.open { left: 0; } /* ── About overlay — full width, no left offset ── */ #aboutPanel { z-index: 480; } #aboutHeader { height: 64px !important; padding: 0 16px !important; padding-top: env(safe-area-inset-top) !important; gap: 16px !important; } #aboutHeader .sponsor-logo { height: 22px; } #aboutDark { padding: 56px 24px 80px !important; min-height: calc(100dvh - 64px); } .about-title { font-size: clamp(32px, 8vw, 44px) !important; margin-bottom: 32px; } .about-body { font-size: 14px !important; line-height: 1.85 !important; } #aboutFooter { grid-template-columns: 1fr !important; gap: 32px !important; padding: 40px 24px !important; } .footer-social { align-items: flex-start !important; } /* ── Form overlays — full-screen takeovers ── */ .form-card { width: 92vw !important; max-width: 92vw !important; max-height: 88dvh !important; padding: 40px 20px 32px !important; } .form-grid { grid-template-columns: 1fr !important; gap: 16px !important; } .card-title { font-size: clamp(26px, 7vw, 36px) !important; margin-bottom: 28px !important; } .card-submit { width: 100%; margin-top: 12px; } } /* ══════════════════════════════════════════════════════════════════ RESPONSIVE — MOBILE LANDSCAPE / SHORT VIEWPORTS (height < 600px) Detail panel needs special handling since the image+text stack would overflow on a 375 px-tall viewport. ═══════════════════════════════════════════════════════════════════ */ @media (max-height: 600px) and (orientation: landscape) { .detail-inner { padding: 16px 6% !important; gap: 4% !important; } .detail-img-col { flex: 0 0 38% !important; } .detail-img-col img { max-height: 80vh; } .detail-name { font-size: clamp(22px, 4vw, 32px) !important; margin-bottom: 12px !important; } .detail-desc { font-size: 13px !important; line-height: 1.7 !important; } /* Bigger, more prominent back button on short landscape viewports */ .detail-back-btn { top: 12px !important; left: calc(var(--sb-total) + 8px) !important; transform: none !important; padding: 6px !important; } .detail-back-btn img { width: 26px; opacity: 0.85; } }