/* ============================================ FONTS — Adobe Typekit (loaded in HTML ) ============================================ */ /* ============================================ RESET & TOKENS ============================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { /* Brand color tokens v10 — three colors only */ --bi-dark: #252118; --bi-white: #FFFFFF; --bi-phosphor:#39ff14; /* Aliases for codebase compatibility */ --bg: var(--bi-dark); --text: var(--bi-white); --phosphor: var(--bi-phosphor); /* Brand typography v10 — Typekit kit doc2ohu — NO Goudy */ --font-heading: "sweet-sans-pro", sans-serif; /* Headings: 900 Black, ALL CAPS */ --font-body: "sweet-sans-pro", sans-serif; /* Body: 500 Medium, line-height 1.8 */ --font-label: "moby", sans-serif; /* Labels, nav, eyebrows: 700 Bold */ --font-mono: "moby-monospace", monospace; /* Code / data: 400, Phosphor on dark */ } html { background: var(--bg); color: var(--text); font-family: var(--font-body); font-weight: 500; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { background: var(--bg); overflow-x: hidden; } /* ============================================ PHOSPHOR PULSE — animated green line ============================================ */ @keyframes phosphor-pulse { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } @keyframes phosphor-glow { 0%, 100% { border-color: rgba(57, 255, 20, 0.25); box-shadow: 0 0 8px rgba(57, 255, 20, 0.04), 0 0 24px rgba(57, 255, 20, 0.02), inset 0 0 8px rgba(57, 255, 20, 0.02); } 50% { border-color: rgba(57, 255, 20, 0.5); box-shadow: 0 0 16px rgba(57, 255, 20, 0.12), 0 0 40px rgba(57, 255, 20, 0.06), inset 0 0 16px rgba(57, 255, 20, 0.04); } } /* ============================================ LOADER ============================================ */ #loader { position: fixed; inset: 0; z-index: 9000; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; transition: opacity 0.9s ease, visibility 0.9s ease; } #loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; } .loader-brand { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; } .loader-beautiful { font-family: var(--font-heading); font-weight: 900; font-size: 1.8rem; color: var(--text); letter-spacing: 0.04em; text-transform: uppercase; display: block; line-height: 1.1; } .loader-internet { font-family: var(--font-heading); font-weight: 900; font-size: 1.8rem; color: var(--text); letter-spacing: 0.04em; text-transform: uppercase; display: block; line-height: 1.1; } .loader-bar-wrap { width: 200px; height: 1px; background: rgba(255, 255, 255, 0.08); } #loader-bar { height: 100%; width: 0%; background: var(--phosphor); box-shadow: 0 0 12px rgba(57, 255, 20, 0.6); transition: width 0.12s linear; } #loader-percent { font-family: var(--font-mono); font-size: 0.65rem; color: rgba(255, 255, 255, 0.55); letter-spacing: 0.1em; } /* ============================================ HEADER ============================================ */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 1.5rem 3rem; background: var(--bg); border-bottom: 1px solid rgba(255, 255, 255, 0.06); transition: opacity 0.4s ease, transform 0.4s ease; } .site-header.header-hidden { background: transparent; border-bottom-color: transparent; } .header-inner { display: flex; align-items: center; justify-content: space-between; max-width: 1400px; margin-left: auto; margin-right: auto; } .wordmark { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.05rem; text-decoration: none; } .wm-beautiful, .wm-internet { font-family: var(--font-heading); font-weight: 900; font-size: 0.72rem; color: var(--text); letter-spacing: 0.04em; text-transform: uppercase; display: inline; line-height: 1.1; } .wm-internet { margin-left: 0.25em; } .site-nav { display: flex; align-items: center; gap: 2.5rem; } .nav-link { font-family: var(--font-label); font-size: 0.7rem; color: rgba(255, 255, 255, 0.55); text-decoration: none; letter-spacing: 0.1em; text-transform: uppercase; transition: color 0.2s ease; } .nav-link:hover { color: var(--bi-white); } .nav-cta { font-family: var(--font-mono); font-size: 0.65rem; color: var(--bi-white); text-decoration: none; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid rgba(255, 255, 255, 0.2); padding: 0.55rem 1.25rem; transition: border-color 0.2s ease, color 0.2s ease; } .nav-cta:hover { border-color: var(--bi-phosphor); color: var(--bi-phosphor); } /* ============================================ WORDMARK (shared — header + loader + footer) ============================================ */ .word-beautiful, .word-internet { /* used only in legacy hero — kept for safety, hidden by display:none */ display: none; } /* ============================================ CANVAS ============================================ */ .canvas-wrap { position: fixed; inset: 0; z-index: 1; will-change: transform; } /* ─── Section canvases (like.mp4 right / phone.mp4 left) ─── */ .canvas-section { position: fixed; top: 0; height: 100vh; width: 50vw; z-index: 3; opacity: 0; pointer-events: none; will-change: opacity; display: block; } .canvas-section-right { right: 0; } .canvas-section-left { left: 0; } #canvas { display: block; width: 100%; height: 100%; } /* Radial vignette — blends edges into bg */ .canvas-vignette { position: absolute; inset: 0; background: radial-gradient( ellipse 80% 80% at 50% 50%, transparent 35%, rgba(37, 33, 24, 0.55) 75%, rgba(37, 33, 24, 0.88) 100% ), linear-gradient( to top, rgba(37, 33, 24, 0.82) 0%, rgba(37, 33, 24, 0.3) 35%, transparent 60% ); pointer-events: none; } /* Mask KlingAI watermark — solid at corner, fades out on both edges */ .canvas-corner-mask { position: absolute; bottom: 0; right: 0; width: 500px; height: 120px; background: #252118; pointer-events: none; mask-image: linear-gradient(to bottom right, transparent 0%, #252118 35%); -webkit-mask-image: linear-gradient(to bottom right, transparent 0%, #252118 35%); } /* ============================================ SECTION IMAGE PANELS (fixed, scroll-driven opacity) ============================================ */ .section-img-panel { position: fixed; top: 0; height: 100vh; width: 62vw; z-index: 3; opacity: 0; pointer-events: none; will-change: opacity; display: flex; align-items: center; justify-content: center; overflow: hidden; } .panel-right { right: 0; } .panel-left { left: 0; } .section-img-panel canvas { width: 100%; height: 100%; } /* ============================================ DARK OVERLAY (stats section) ============================================ */ #dark-overlay { position: fixed; inset: 0; z-index: 2; background: rgba(37, 33, 24, 0.86); opacity: 0; pointer-events: none; will-change: opacity; } /* ============================================ SCROLL CONTAINER height covers video phases ============================================ */ /* ============================================ SCROLL CONTAINER ============================================ */ #scroll-container { position: relative; height: 470vh; z-index: 5; } /* ============================================ SCROLL SECTIONS — base ============================================ */ .scroll-section { position: fixed; top: 0; left: 0; width: 100%; display: flex; align-items: center; min-height: 100vh; opacity: 0; pointer-events: none; will-change: opacity; } .scroll-section.active { pointer-events: auto; } /* ─── Alignment zones ─── */ .align-left { justify-content: flex-start; padding-left: 5.5vw; padding-right: 64vw; } .align-right { justify-content: flex-end; padding-left: 64vw; padding-right: 5.5vw; } .section-inner { padding: 3rem 2.5rem; background: rgba(37, 33, 24, 0.72); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); border-left: 2px solid rgba(57, 255, 20, 0.35); animation: phosphor-glow 3s ease-in-out infinite; } /* ─── Typography within sections ─── */ .section-label { display: block; font-family: var(--font-mono); font-size: 0.62rem; color: var(--bi-phosphor); letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 1.25rem; } .section-heading { font-family: var(--font-heading); font-weight: 900; font-size: clamp(2.4rem, 4.5vw, 4.75rem); text-transform: uppercase; letter-spacing: 0.04em; color: var(--bi-white); line-height: 1.0; margin-bottom: 1.4rem; } .section-body { font-family: var(--font-body); font-weight: 500; font-size: 0.9rem; color: var(--bi-white); line-height: 1.8; max-width: 36ch; } /* ─── Blockquote ─── */ .section-quote { font-family: var(--font-body); font-weight: 400; font-style: italic; font-size: clamp(1.15rem, 1.9vw, 1.65rem); color: var(--text); line-height: 1.45; letter-spacing: 0.01em; margin-bottom: 0.8rem; } .section-cite { display: block; font-family: var(--font-mono); font-size: 0.62rem; color: rgba(255, 255, 255, 0.5); letter-spacing: 0.1em; margin-bottom: 1.5rem; } /* ─── Section sub (italic support line) ─── */ .section-sub { font-family: var(--font-body); font-weight: 500; font-size: clamp(0.9rem, 1.2vw, 1.05rem); color: rgba(255, 255, 255, 0.72); line-height: 1.55; max-width: 38ch; margin-top: 1rem; } /* ─── Tagline hero (Eternal Mission. Modern Expression.) ─── */ .tagline-hero { font-family: var(--font-heading); font-weight: 900; font-size: clamp(2.4rem, 4.5vw, 4.2rem); color: var(--phosphor); text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.0; margin-bottom: 2rem; text-shadow: 0 0 30px rgba(57, 255, 20, 0.9), 0 0 60px rgba(57, 255, 20, 0.5), 0 0 120px rgba(57, 255, 20, 0.25); } /* ─── Hero text stack (static) ─── */ #hero-text-stack { position: fixed; bottom: 12vh; left: 0; right: 0; z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 0.15em; pointer-events: none; will-change: transform; } .tl-line { opacity: 1; line-height: 1.0; text-align: center; } .tl-tagline { font-family: var(--font-mono); font-size: clamp(0.7rem, 1.2vw, 1rem); font-weight: 400; color: var(--phosphor); letter-spacing: 0.18em; text-transform: uppercase; text-align: center; opacity: 0.85; } .tl-beautiful { font-family: var(--font-heading); font-weight: 900; font-size: clamp(3rem, 6.2vw, 7rem); letter-spacing: 0.04em; text-transform: uppercase; color: var(--bi-white); } /* ─── Welcome / centered alignment ─── */ .align-center { justify-content: center; padding-left: 5.5vw; padding-right: 5.5vw; } .welcome-inner { text-align: left; max-width: 600px; background: rgba(37, 33, 24, 0.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-left: 2px solid rgba(57, 255, 20, 0.45); border-top: none; border-right: none; border-bottom: none; padding: 3rem 3rem 3.5rem; position: relative; } .welcome-inner::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 90% 70% at 0% 50%, rgba(57, 255, 20, 0.06) 0%, transparent 70%); pointer-events: none; } .welcome-inner .section-body { max-width: none; color: var(--bi-white); } /* ─── CTA ─── */ .section-cta { justify-content: center; } .cta-inner { text-align: center; display: flex; flex-direction: column; align-items: center; padding: 3.5rem 5rem 4rem; border: 1px solid rgba(57, 255, 20, 0.35); background: rgba(37, 33, 24, 0.95); box-shadow: 0 0 12px rgba(57, 255, 20, 0.08), 0 0 32px rgba(57, 255, 20, 0.04), inset 0 0 12px rgba(57, 255, 20, 0.03); } .cta-heading { font-size: clamp(2.8rem, 5.5vw, 5rem); margin-bottom: 1.5rem; } .cta-body { max-width: 40ch; margin: 0 auto 2.5rem; font-size: 0.88rem; text-align: center; color: var(--text); opacity: 0.75; } .cta-button { display: inline-block; font-family: var(--font-mono); font-size: 0.72rem; color: var(--text); text-decoration: none; letter-spacing: 0.1em; text-transform: uppercase; background: transparent; border: 1px solid rgba(255, 255, 255, 0.3); padding: 1rem 2.75rem; margin-bottom: 3.5rem; transition: background 0.2s ease, border-color 0.2s ease; } .cta-button:hover { border-color: var(--bi-phosphor); color: var(--bi-phosphor); } .cta-button:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; } .cta-wordmark { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.05rem; } .cta-wordmark .wm-beautiful, .cta-wordmark .wm-internet { font-size: 0.85rem; color: var(--bi-phosphor); opacity: 0.7; } /* ============================================ PAGE SCULPTURE IMAGES — ghosted atmosphere ============================================ */ .page-hero-sculpture { position: absolute; right: -5%; top: 50%; transform: translateY(-50%); height: 120%; width: auto; opacity: 0.18; pointer-events: none; user-select: none; } .section-sculpture { position: absolute; top: 50%; transform: translateY(-50%); height: 80%; width: auto; opacity: 0.14; pointer-events: none; user-select: none; } .section-sculpture-right { right: 2%; } .section-sculpture-left { left: 2%; } /* ============================================ BELOW-FOLD — Stone row + content splits ============================================ */ .below-fold { position: relative; z-index: 10; background: var(--bg); width: 100%; } /* ─── Partners section ─── */ .partners-section { padding: 1rem 6vw 8rem; border-top: 1px solid rgba(57, 255, 20, 0.15); position: relative; } .partners-header { max-width: 600px; margin-left: auto; margin-right: auto; margin-bottom: 5rem; } .section-eyebrow { display: block; font-family: var(--font-label); font-weight: 700; font-size: 0.62rem; color: var(--bi-phosphor); letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 1.5rem; } .below-heading { font-family: var(--font-heading); font-weight: 900; font-size: clamp(1.75rem, 2.8vw, 2.5rem); letter-spacing: 0.04em; text-transform: uppercase; color: var(--bi-white); line-height: 1.15; } .below-heading em { font-style: normal; } .partners-intro { font-family: var(--font-body); font-weight: 500; font-size: 0.88rem; color: rgba(255, 255, 255, 0.75); line-height: 1.8; margin-top: 1.25rem; max-width: 52ch; } .partners-list { max-width: 900px; margin-left: auto; margin-right: auto; } .partner-row { display: grid; grid-template-columns: 2.5rem 1fr 1fr; gap: 1.5rem 3rem; padding: 2.5rem 0; border-top: 1px solid rgba(57, 255, 20, 0.12); } .partner-row:first-child { border-top: none; align-items: start; } .partner-row:last-child { border-bottom: 1px solid rgba(138, 130, 120, 0.2); } .partner-number { font-family: var(--font-mono); font-size: 0.6rem; color: var(--bi-phosphor); letter-spacing: 0.1em; padding-top: 0.2rem; } .partner-info { display: flex; flex-direction: column; gap: 0.3rem; } .partner-name { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1rem, 1.3vw, 1.2rem); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text); line-height: 1.2; } .partner-location { font-family: var(--font-mono); font-size: 0.58rem; color: rgba(255, 255, 255, 0.6); letter-spacing: 0.1em; } .partner-desc { font-family: var(--font-body); font-weight: 500; font-size: 0.88rem; color: rgba(255, 255, 255, 0.72); line-height: 1.8; } /* ─── Engagement tiers section ─── */ .engagement-section { padding: 8rem 6vw; border-top: none; position: relative; } .engagement-section::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(560px, 80vw); height: 1px; background: linear-gradient(to right, transparent, rgba(57, 255, 20, 0.4), transparent); animation: phosphor-pulse 3s ease-in-out infinite; } /* Arch with flowers — ghosted atmosphere behind tiers */ .arch-sculpture { position: absolute; right: 5%; top: 50%; transform: translateY(-50%); height: 75%; width: auto; mix-blend-mode: screen; opacity: 0.14; pointer-events: none; user-select: none; } .engagement-header { max-width: 600px; margin-left: auto; margin-right: auto; margin-bottom: 5rem; } .tiers-list { max-width: 1080px; margin-left: auto; margin-right: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .tier-row { display: flex; flex-direction: column; gap: 1.25rem; padding: 2.75rem 2.25rem; align-items: flex-start; } .tier-row:last-child { /* glow-box handles borders */ } .tier-number { font-family: var(--font-mono); font-size: 0.6rem; color: var(--bi-phosphor); letter-spacing: 0.1em; padding-top: 0.25rem; } .tier-info { display: flex; flex-direction: column; gap: 0.4rem; } .tier-title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1rem, 1.3vw, 1.2rem); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text); line-height: 1.2; } .tier-commitment { font-family: var(--font-mono); font-size: 0.6rem; color: rgba(255, 255, 255, 0.55); letter-spacing: 0.08em; line-height: 1.6; } .tier-desc { font-family: var(--font-body); font-weight: 500; font-size: 0.88rem; color: rgba(255, 255, 255, 0.72); line-height: 1.8; margin-bottom: 1rem; } .tier-includes { list-style: none; display: flex; flex-direction: column; gap: 0.3rem; } .tier-includes li { font-family: var(--font-mono); font-size: 0.6rem; color: rgba(255, 255, 255, 0.75); letter-spacing: 0.04em; display: flex; align-items: baseline; gap: 0.5rem; } .tier-includes li::before { content: '›'; color: rgba(255, 255, 255, 0.45); flex-shrink: 0; } .tier-price-col { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; margin-top: auto; padding-top: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.07); width: 100%; } .tier-price { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.05rem, 1.4vw, 1.35rem); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text); white-space: nowrap; text-align: left; } .tier-cta { display: inline-block; font-family: var(--font-mono); font-size: 0.6rem; color: rgba(255, 255, 255, 0.65); text-decoration: none; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid rgba(255, 255, 255, 0.2); padding: 0.6rem 1.1rem; white-space: nowrap; transition: border-color 0.2s ease, color 0.2s ease; } .tier-cta:hover { border-color: var(--bi-phosphor); color: var(--bi-phosphor); } .tier-cta:focus-visible { outline: 2px solid var(--bi-phosphor); outline-offset: 3px; } /* ─── About section ─── */ .about-section { padding: 8rem 6vw; border-top: none; position: relative; } .about-section::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(560px, 80vw); height: 1px; background: linear-gradient(to right, transparent, rgba(57, 255, 20, 0.4), transparent); animation: phosphor-pulse 3s ease-in-out infinite; } /* Marble hand with flowers — "back to life" anchor image */ .about-sculpture { position: absolute; right: -4%; bottom: -8%; height: 110%; width: auto; mix-blend-mode: screen; opacity: 0.25; pointer-events: none; user-select: none; } .about-content { max-width: 700px; margin-left: auto; margin-right: auto; position: relative; z-index: 1; } .about-body { font-family: var(--font-body); font-size: clamp(1rem, 1.5vw, 1.18rem); font-weight: 500; color: var(--text); line-height: 1.8; max-width: 60ch; } .about-content > .about-body:first-of-type { margin-top: 2rem; } .glow-box .about-body:first-child { margin-top: 0; } .about-sub { font-family: var(--font-body); font-size: 0.9rem; font-weight: 500; color: rgba(255, 255, 255, 0.65); line-height: 1.8; margin-top: 1.5rem; max-width: 58ch; } /* ─── Glow box — phosphor outline container ─── */ .glow-box { border: 1px solid rgba(57, 255, 20, 0.35); padding: 2rem 2.25rem; position: relative; background: rgba(37, 33, 24, 0.95); box-shadow: 0 0 12px rgba(57, 255, 20, 0.08), 0 0 32px rgba(57, 255, 20, 0.04), inset 0 0 12px rgba(57, 255, 20, 0.03); animation: phosphor-glow 3s ease-in-out infinite; } .about-content .glow-box { margin-top: 2.5rem; } /* ─── Tier card hover — lift + brighten ─── */ .tier-row.glow-box { opacity: 0.75; transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; cursor: pointer; text-decoration: none; color: inherit; display: flex; } .tier-row.glow-box:hover { opacity: 1; transform: scale(1.02); border-color: rgba(57, 255, 20, 0.6); box-shadow: 0 0 20px rgba(57, 255, 20, 0.15), 0 0 48px rgba(57, 255, 20, 0.06), inset 0 0 16px rgba(57, 255, 20, 0.05); } .tier-row.glow-box:focus-visible { outline: 2px solid var(--bi-phosphor); outline-offset: 3px; } .tier-row.glow-box:active { transform: scale(0.99); } .tier-cta-label { font-family: var(--font-mono); font-size: 0.6rem; color: var(--bi-phosphor); letter-spacing: 0.1em; text-transform: uppercase; margin-top: auto; padding-top: 1rem; opacity: 0.6; transition: opacity 0.3s ease; } .tier-row.glow-box:hover .tier-cta-label { opacity: 1; } /* ─── Tier subtitle ─── */ .tier-subtitle { font-family: var(--font-mono); font-size: 0.58rem; color: var(--phosphor); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; margin-bottom: 0.25rem; } /* ─── Tier framing ─── */ .tier-framing { font-family: var(--font-body); font-size: 0.92rem; font-weight: 500; color: rgba(255, 255, 255, 0.72); line-height: 1.8; margin-top: 1.5rem; max-width: 58ch; } /* ─── Logo image ─── */ .logo-img { height: 28px; width: auto; display: block; } .footer-logo-img { height: 24px; width: auto; display: block; opacity: 0.45; } /* ─── Footer ─── */ .site-footer { position: relative; z-index: 10; background: var(--bi-dark); border-top: none; padding: 4rem 6vw; } .site-footer::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(560px, 80vw); height: 1px; background: linear-gradient(to right, transparent, rgba(57, 255, 20, 0.4), transparent); animation: phosphor-pulse 3s ease-in-out infinite; } .footer-inner { display: flex; align-items: center; justify-content: space-between; max-width: 1400px; margin-left: auto; margin-right: auto; } .footer-wordmark { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 0.05rem; } .footer-wordmark .wm-beautiful { font-size: 0.72rem; opacity: 0.5; } .footer-wordmark .wm-internet { font-size: 0.72rem; opacity: 0.4; } .footer-tagline { font-family: var(--font-label); font-weight: 700; font-size: 0.75rem; color: var(--bi-phosphor); letter-spacing: 0.12em; text-transform: uppercase; } .footer-cta { font-family: var(--font-mono); font-size: 0.7rem; color: rgba(255, 255, 255, 0.7); text-decoration: none; letter-spacing: 0.08em; text-transform: uppercase; transition: color 0.2s ease; } .footer-cta:hover { color: var(--phosphor); } /* ============================================ RESPONSIVE ============================================ */ /* ─── Mobile hamburger toggle ─── */ .menu-toggle { display: none; background: none; border: none; cursor: pointer; padding: 0.5rem; z-index: 201; position: relative; } .menu-toggle span { display: block; width: 22px; height: 1.5px; background: var(--text); transition: transform 0.3s ease, opacity 0.3s ease; } .menu-toggle span + span { margin-top: 6px; } .menu-toggle.active span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); } .menu-toggle.active span:nth-child(2) { opacity: 0; } .menu-toggle.active span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); } /* ─── Mobile nav overlay ─── */ .mobile-nav { display: none; } @media (max-width: 768px) { .menu-toggle { display: flex; flex-direction: column; align-items: center; justify-content: center; } .site-nav { display: none; } .mobile-nav { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 199; background: rgba(37, 33, 24, 0.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); flex-direction: column; align-items: center; justify-content: center; gap: 2.5rem; } .mobile-nav.open { display: flex; } .mobile-nav a { font-family: var(--font-heading); font-weight: 900; font-size: 2rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text); text-decoration: none; transition: color 0.2s ease; } .mobile-nav a:hover, .mobile-nav a:focus-visible { color: var(--phosphor); } .mobile-nav a:active { transform: scale(0.98); } .mobile-nav .mobile-nav-cta { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid rgba(255, 255, 255, 0.18); padding: 0.75rem 2rem; margin-top: 1rem; } .mobile-nav .mobile-nav-cta:hover { border-color: var(--phosphor); color: var(--phosphor); box-shadow: 0 0 18px rgba(57, 255, 20, 0.18); } .site-header { padding: 1rem 1.5rem; background: rgba(37, 33, 24, 0.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid rgba(57, 255, 20, 0.08); z-index: 200; } /* ── Hero text stack ── */ #hero-text-stack { bottom: 5vh; gap: 0.08em; } .tl-eternal, .tl-modern { font-size: 7vw; letter-spacing: 0.02em; } .tl-beautiful { font-size: 7.5vw; } /* ── Section canvases: full-width on mobile ── */ .canvas-section, .canvas-section-right, .canvas-section-left { width: 100vw; left: 0; right: auto; } /* ── Scroll sections: centered on mobile ── */ .align-left, .align-right { justify-content: center; align-items: center; padding: 2rem 1.5rem; text-align: center; } .align-left { padding-right: 1.5rem; } .align-right { padding-left: 1.5rem; } .section-inner { max-width: 100%; border-left: none; border-bottom: 2px solid rgba(57, 255, 20, 0.3); text-align: center; } .section-heading { font-size: clamp(2rem, 7vw, 3rem); } .section-body { font-size: 0.85rem; } /* ── Image panels: bigger, lower opacity on mobile ── */ .section-img-panel { width: 100vw; left: 0; right: auto; height: 60vh; top: 0; opacity: 0.35; } .panel-right, .panel-left { left: 0; right: auto; } /* ── CTA ── */ .cta-inner { padding: 2.5rem 1.5rem 3rem; } /* ── Below fold ── */ .partners-section, .engagement-section { padding: 4rem 1.5rem; } .about-section { padding: 4rem 1.5rem; } .partner-row { grid-template-columns: 2rem 1fr; } .partner-desc { grid-column: 1 / -1; } .below-heading { font-size: clamp(1.5rem, 6vw, 2rem); } .tiers-list { grid-template-columns: 1fr; gap: 1.25rem; } .tier-row { padding: 1.75rem 1.5rem; } .tier-title { font-size: 1rem; } .tier-commitment { font-size: 0.65rem; } .tier-desc { font-size: 0.82rem; } .tier-includes { font-size: 0.75rem; } .tier-price-col { flex-direction: row; align-items: center; gap: 1.5rem; } .glow-box { padding: 1.5rem 1.25rem; } .about-body { font-size: 0.9rem; line-height: 1.75; } .tier-framing { font-size: 0.85rem; } .footer-inner { flex-direction: column; gap: 1.5rem; text-align: center; } /* Imagery — mobile */ .about-sculpture { display: none; } .arch-sculpture { opacity: 0.06; height: 40%; } .page-hero-sculpture { display: none; } .section-sculpture { display: none; } /* Page-specific mobile — work + engage hero */ .page-hero { padding: 4rem 1.5rem 3rem; } .page-hero-heading { font-size: clamp(2rem, 8vw, 3.5rem); } .page-hero-body { font-size: 0.88rem; } /* Engage tiers on mobile */ .tiers-section { padding: 4rem 1.5rem; } .tiers-section-header { margin-bottom: 3rem; } .expect-section { padding: 4rem 1.5rem; } .expect-grid { grid-template-columns: 1fr; gap: 2rem; } .expect-header { margin-bottom: 3rem; } .engage-cta { flex-direction: column; align-items: flex-start; padding: 4rem 1.5rem; } /* Work page mobile */ .work-partners { padding: 4rem 1.5rem; } .work-approach { padding: 4rem 1.5rem; } .approach-grid { grid-template-columns: 1fr; gap: 2rem; } } /* ─── Laptop / medium screens (13–14 inch) ─── */ @media (min-width: 769px) and (max-width: 1280px) { .tiers-list { gap: 1rem; } .tier-row { padding: 2rem 1.75rem; } .about-content { max-width: 560px; } .about-sculpture { opacity: 0.18; } } /* ─── 16-inch screens ─── */ @media (min-width: 1281px) and (max-width: 1680px) { .about-content { max-width: 650px; } }