@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:wght@300;400&display=swap"); /* ===== Cube Gallery Section ===== */ /* * Fixed overlay elements (.cg-scene, .cg-hud, etc.) are moved to * by JS to avoid ScrollSmoother's transform breaking position:fixed. * So these selectors are NOT scoped under .cube-gallery-section. */ /* --- Reset (scoped to content inside section) --- */ .cube-gallery-section *, .cube-gallery-section *::before, .cube-gallery-section *::after { box-sizing: border-box; margin: 0; padding: 0; } /* --- Tokens --- */ .cube-gallery-section, .cg-scene, .cg-hud, .cg-scene-strip, .cg-theme-toggle, .cg-face-caption, .cg-credit { --cg-dark-bg: #1c1814; --cg-dark-fg: #ede8df; --cg-dark-muted: #8a7b6e; --cg-light-bg: #f0ece3; --cg-light-fg: #0d0d14; --cg-light-muted: #9a9aaa; --cg-accent-dark: #d4a84b; --cg-accent-light: #3a6e00; --cg-bg: var(--cg-dark-bg); --cg-fg: var(--cg-dark-fg); --cg-muted: var(--cg-dark-muted); --cg-accent: var(--cg-accent-dark); --cg-font-display: "Bebas Neue", sans-serif; --cg-font-mono: "DM Mono", monospace; --cg-hairline: 0.0625rem; --cg-ui-inset: 2rem; --cg-card-bg: rgba(28, 24, 20, 0.82); --cg-card-border: rgba(212, 168, 75, 0.2); --cg-nav-x: calc(var(--cg-ui-inset) + 0.125rem); --cg-reveal-offset: 0.625rem; --cg-reveal-duration: 0.5s; --cg-z-ui: 10; } /* --- Base --- */ .cube-gallery-section { position: relative; background: transparent; color: var(--cg-fg); font-family: var(--cg-font-mono); overflow-x: hidden; transition: color 0.3s ease; } /* ============================ FIXED OVERLAY ELEMENTS (These live in , not in .cube-gallery-section) ============================ */ /* --- Scene (3D Cube Container) --- */ .cg-scene { position: fixed; inset: 0; z-index: -1; display: flex; align-items: center; justify-content: center; perspective: 1100px; pointer-events: none; opacity: 0; visibility: hidden; background: var(--cg-bg); transition: background 0.3s ease, opacity 0.4s ease, visibility 0.4s ease; } /* --- Scroll Container --- */ .cube-gallery-section .cg-scroll-container { position: relative; z-index: 1; max-width: 1320px; margin-left: auto; margin-right: auto; padding-left: 15px; padding-right: 15px; } .cube-gallery-section .cg-scroll-container section { min-height: 100vh; display: flex; align-items: center; padding: 6rem 2rem; } /* --- Cube --- */ .cg-cube { --s: min(50vw, 50vh, 360px); width: var(--s); height: var(--s); position: relative; transform-style: preserve-3d; transform: rotateX(90deg) rotateY(0deg); will-change: transform; } .cg-face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; background: repeating-linear-gradient( 0deg, rgba(255, 255, 255, 0.02) 0, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 48px ), repeating-linear-gradient( 90deg, rgba(255, 255, 255, 0.02) 0, rgba(255, 255, 255, 0.02) 1px, transparent 1px, transparent 48px ), #14100d; } .cg-face img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .cg-face:has(img) .cg-face-ph { display: none; } .cg-face-ph { position: absolute; bottom: 1.5rem; left: 1.75rem; font-family: "Bebas Neue", sans-serif; font-size: clamp(2rem, 8vw, 5rem); letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.06); pointer-events: none; user-select: none; } .cg-face[data-face="front"] { transform: translateZ(calc(var(--s) / 2)); } .cg-face[data-face="back"] { transform: rotateY(180deg) translateZ(calc(var(--s) / 2)); } .cg-face[data-face="right"] { transform: rotateY(90deg) translateZ(calc(var(--s) / 2)); } .cg-face[data-face="left"] { transform: rotateY(-90deg) translateZ(calc(var(--s) / 2)); } .cg-face[data-face="top"] { transform: rotateX(-90deg) translateZ(calc(var(--s) / 2)); } .cg-face[data-face="bottom"] { transform: rotateX(90deg) translateZ(calc(var(--s) / 2)); } /* --- HUD (top-right) --- */ .cg-hud { position: fixed; top: 2rem; right: 2rem; z-index: 10; text-align: right; font-family: "DM Mono", monospace; font-size: 0.65rem; letter-spacing: 0.15em; color: #8a7b6e; text-transform: uppercase; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease; } .cg-progress-bar { width: 7.5rem; height: 0.0625rem; background: #8a7b6e; margin-block-start: 0.5rem; margin-inline-start: auto; position: relative; overflow: hidden; } .cg-progress-fill { position: absolute; inset-block: 0; inset-inline-start: 0; width: 0%; background: #d4a84b; transition: width 0.1s linear; } .cg-scene-label { font-size: 0.6rem; color: #d4a84b; margin-block-start: 0.4rem; } /* --- Scene Strip (left nav dots) --- */ .cg-scene-strip { position: fixed; left: calc(2rem + 0.125rem); top: 50%; translate: -50% -50%; z-index: 10; display: flex; flex-direction: column; gap: 0.75rem; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease; } .cg-scene-dot { position: relative; display: block; width: 0.25rem; height: 0.25rem; border-radius: 50%; background: #8a7b6e; transition: background 0.3s, scale 0.3s; cursor: pointer; text-decoration: none; } .cg-scene-dot::before { content: ""; position: absolute; inset: -0.2rem; } .cg-scene-dot.active { background: #d4a84b; scale: 1.8; } /* --- Theme Toggle (bottom-left) --- */ .cg-theme-toggle { position: fixed; bottom: 2rem; left: calc(2rem + 0.125rem); translate: -50% 0; z-index: 10; width: 2rem; height: 2rem; border: none; background: rgba(138, 123, 110, 0.35); border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.3s, opacity 0.4s ease, visibility 0.4s ease; opacity: 0; visibility: hidden; } .cg-theme-toggle:hover { background: rgba(138, 123, 110, 0.55); } .cg-theme-toggle svg { width: 0.875rem; height: 0.875rem; position: absolute; transition: opacity 0.3s ease, rotate 0.3s ease; color: #d4a84b; } .cg-theme-toggle .cg-icon-sun { opacity: 1; rotate: 0deg; } .cg-theme-toggle .cg-icon-moon { opacity: 0; rotate: 90deg; } /* --- Face Caption (bottom-center) --- */ .cg-face-caption { position: fixed; bottom: 2rem; left: 50%; translate: -50% 0; z-index: 10; text-align: center; pointer-events: none; user-select: none; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease; } .cg-face-caption-num { font-family: "DM Mono", monospace; font-size: 0.58rem; letter-spacing: 0.28em; color: #d4a84b; text-transform: uppercase; margin-block-end: 0.15rem; } .cg-face-caption-name { font-family: "Bebas Neue", sans-serif; font-size: clamp(1.8rem, 5vw, 3.5rem); letter-spacing: 0.08em; color: #8a7b6e; opacity: 0.5; line-height: 1; } /* --- Credit (right side, rotated) --- */ .cg-credit { position: fixed; right: 2rem; top: 50%; transform: translateY(-50%) rotate(-90deg); transform-origin: right center; z-index: 10; font-family: "DM Mono", monospace; font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease; } .cg-credit a { color: #8a7b6e; text-decoration: none; } /* ============================ CARDS (stay inside .cube-gallery-section) ============================ */ .cube-gallery-section .cg-text-card { max-width: 23.75rem; padding: 2.25rem 2rem; background: var(--cg-card-bg); border-left: var(--cg-hairline) solid var(--cg-card-border); backdrop-filter: blur(6px) saturate(120%); -webkit-backdrop-filter: blur(6px) saturate(120%); overflow: hidden; transition: background 0.3s ease, border-color 0.3s ease; } .cube-gallery-section .cg-text-card.right { margin-inline-start: auto; border-left: none; border-right: var(--cg-hairline) solid var(--cg-card-border); text-align: right; } .cube-gallery-section .cg-text-card.right .cg-h-line { transform-origin: right; margin-inline-start: auto; } .cube-gallery-section .cg-text-card.center { margin-inline: auto; border-left: none; border-top: var(--cg-hairline) solid var(--cg-card-border); text-align: center; max-width: 28.75rem; } .cube-gallery-section .cg-text-card.center .cg-h-line { transform-origin: center; margin-inline: auto; } .cube-gallery-section .cg-tag { font-size: 0.6rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--cg-accent); margin-block-end: 1.1rem; } .cube-gallery-section h1, .cube-gallery-section h2 { font-family: var(--cg-font-display); font-weight: 400; letter-spacing: 0.03em; line-height: 0.92; color: var(--cg-fg); } .cube-gallery-section h1 { font-size: clamp(3rem, 8vw, 6.5rem); } .cube-gallery-section h2 { font-size: clamp(2.2rem, 5vw, 4rem); } .cube-gallery-section .cg-body-text { font-size: 0.78rem; line-height: 1.8; color: color-mix(in srgb, var(--cg-fg) 55%, transparent); margin-block-start: 1.25rem; } .cube-gallery-section .cg-stat-row { display: flex; gap: 2.5rem; margin-block-start: 2rem; flex-wrap: wrap; } .cube-gallery-section .cg-stat { display: flex; flex-direction: column; gap: 0.15rem; } .cube-gallery-section .cg-stat-num { font-family: var(--cg-font-display); font-size: 2.2rem; color: var(--cg-accent); line-height: 1; } .cube-gallery-section .cg-stat-label { font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cg-muted); } .cube-gallery-section .cg-h-line { width: 3.125rem; height: var(--cg-hairline); background: var(--cg-accent); margin-block-end: 1.2rem; transform-origin: left; } .cube-gallery-section .cg-cta-row { display: flex; align-items: center; justify-content: flex-start; gap: 0.75rem; margin-block-start: 1.75rem; } .cube-gallery-section .cg-text-card.right .cg-cta-row { justify-content: flex-end; } .cube-gallery-section .cg-cta { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.6rem 1.25rem; border: var(--cg-hairline) solid var(--cg-accent); color: var(--cg-accent); font-family: var(--cg-font-mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: background 0.2s, color 0.2s; } .cube-gallery-section .cg-cta:hover { background: var(--cg-accent); color: var(--cg-bg); } .cube-gallery-section .cg-cta svg { width: 0.6875rem; height: 0.6875rem; } .cube-gallery-section .cg-cta-back { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.6rem 1.25rem; border: 0.0625rem solid rgba(138, 123, 110, 0.45); color: var(--cg-muted); font-family: var(--cg-font-mono); font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; transition: background 0.2s, color 0.2s, border-color 0.2s; } .cube-gallery-section .cg-cta-back:hover { background: rgba(138, 123, 110, 0.12); border-color: var(--cg-muted); color: var(--cg-fg); } .cube-gallery-section .cg-cta-back svg { width: 0.6875rem; height: 0.6875rem; } /* --- Reveal Animations --- */ .cube-gallery-section :is(.cg-tag, .cg-body-text, .cg-stat-row, .cg-cta, .cg-cta-back) { opacity: 0; translate: 0 var(--cg-reveal-offset); } .cube-gallery-section h1, .cube-gallery-section h2 { opacity: 0; translate: 0 1.125rem; transition: opacity var(--cg-reveal-duration) ease 0.08s, translate var(--cg-reveal-duration) ease 0.08s; } .cube-gallery-section .cg-tag { transition: opacity var(--cg-reveal-duration) ease, translate var(--cg-reveal-duration) ease; } .cube-gallery-section .cg-body-text { transition: opacity var(--cg-reveal-duration) ease 0.2s, translate var(--cg-reveal-duration) ease 0.2s; } .cube-gallery-section .cg-stat-row { transition: opacity var(--cg-reveal-duration) ease 0.3s, translate var(--cg-reveal-duration) ease 0.3s; } .cube-gallery-section :is(.cg-cta, .cg-cta-back) { transition: opacity var(--cg-reveal-duration) ease 0.35s, translate var(--cg-reveal-duration) ease 0.35s, background 0.2s, color 0.2s, border-color 0.2s; } .cube-gallery-section .cg-h-line { opacity: 0; scale: 0 1; transition: opacity 0.4s ease, scale 0.4s ease; } .cube-gallery-section :is(.cg-tag, .cg-body-text, .cg-stat-row, .cg-cta, .cg-cta-back).cg-visible { opacity: 1; translate: 0 0; } .cube-gallery-section h1.cg-visible, .cube-gallery-section h2.cg-visible { opacity: 1; translate: 0 0; } .cube-gallery-section .cg-h-line.cg-visible { opacity: 1; scale: 1 1; } /* --- Light Theme (section content and detached scene) --- */ .cube-gallery-section[data-cg-theme="light"], .cg-scene[data-cg-theme="light"] { --cg-bg: var(--cg-light-bg); --cg-fg: var(--cg-light-fg); --cg-muted: var(--cg-light-muted); --cg-accent: var(--cg-accent-light); --cg-card-bg: rgba(240, 236, 227, 0.08); --cg-card-border: rgba(58, 110, 0, 0.14); } /* --- Light Theme (fixed overlays — in ) --- */ .cg-scene[data-cg-theme="light"] .cg-face { background: repeating-linear-gradient( 0deg, rgba(0, 0, 0, 0.05) 0, rgba(0, 0, 0, 0.05) 1px, transparent 1px, transparent 48px ), repeating-linear-gradient( 90deg, rgba(0, 0, 0, 0.05) 0, rgba(0, 0, 0, 0.05) 1px, transparent 1px, transparent 48px ), #ddd8cf; } .cg-scene[data-cg-theme="light"] .cg-face-ph { color: rgba(0, 0, 0, 0.07); } /* --- Responsive: Tablet & Mobile (≤ 900px) --- */ @media (max-width: 56.25em) { /* -- HUD: tighter inset -- */ .cg-hud { top: 1rem; right: 1rem; } /* -- Hide side nav dots -- */ .cg-scene-strip { display: none; } /* -- Theme toggle: reposition -- */ .cg-theme-toggle { bottom: 1rem; left: 1.25rem; translate: 0 0; } /* -- Face caption: tighter bottom -- */ .cg-face-caption { bottom: 1rem; } /* -- Sections: centered over the cube with background overlay -- */ .cube-gallery-section .cg-scroll-container section { min-height: 100vh; align-items: center; padding: 5rem 1.5rem; } /* -- First section (hero): normal height, centered -- */ .cube-gallery-section .cg-scroll-container section:first-child { min-height: 100vh; align-items: center; padding: 5rem 1.5rem; } /* -- Cards: full width on mobile -- */ .cube-gallery-section .cg-text-card, .cube-gallery-section .cg-text-card.right, .cube-gallery-section .cg-text-card.center { width: 100%; max-width: 100%; padding: 2rem 1.5rem; } /* -- Body text -- */ .cube-gallery-section .cg-body-text { line-height: 1.55; } /* -- Stats -- */ .cube-gallery-section .cg-stat-row { gap: 1.5rem; margin-block-start: 1.25rem; } /* -- CTAs -- */ .cube-gallery-section .cg-cta-row { margin-block-start: 1.25rem; } }