/* ============================================ SHARED STYLESHEET — m.panda guitar portfolio Pure black & white with warm undertones. Light + Dark mode via [data-theme] on . ============================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; } :root { /* Dark mode (default) — warm off-black + warm off-white */ --bg: #0e0e10; --bg-soft: #16161a; --card: #1a1a1e; --text: #f5f2ec; --text-dim: rgba(245, 242, 236, 0.62); --text-faint: rgba(245, 242, 236, 0.32); --rule: rgba(245, 242, 236, 0.10); --rule-strong: rgba(245, 242, 236, 0.22); --accent: #f5f2ec; --shadow: 0 30px 60px rgba(0,0,0,0.45); --shadow-soft: 0 14px 30px rgba(0,0,0,0.35); --grain-opacity: .035; } :root[data-theme="light"] { --bg: #f5f2ec; --bg-soft: #ebe6dc; --card: #ffffff; --text: #0e0e10; --text-dim: rgba(14, 14, 16, 0.62); --text-faint: rgba(14, 14, 16, 0.32); --rule: rgba(14, 14, 16, 0.10); --rule-strong: rgba(14, 14, 16, 0.22); --accent: #0e0e10; --shadow: 0 30px 60px rgba(40, 30, 20, 0.10); --shadow-soft: 0 14px 30px rgba(40, 30, 20, 0.08); --grain-opacity: .025; } body { background: var(--bg); color: var(--text); font-family: 'Manrope', sans-serif; font-weight: 300; line-height: 1.7; overflow-x: hidden; transition: background-color .35s ease, color .35s ease; position: relative; min-height: 100vh; animation: pageIn .8s ease both; } @keyframes pageIn { from { opacity: 0; } to { opacity: 1; } } /* Subtle paper/grain texture */ body::before { content: ''; position: fixed; inset: 0; background-image: radial-gradient(circle at 25% 30%, rgba(255,255,255,0.02), transparent 40%), radial-gradient(circle at 80% 70%, rgba(255,255,255,0.015), transparent 45%), url("data:image/svg+xml;utf8,"); opacity: var(--grain-opacity); pointer-events: none; z-index: 1; mix-blend-mode: overlay; } h1, h2, h3, h4 { font-family: 'Fraunces', serif; font-weight: 600; line-height: 1.15; letter-spacing: -.01em; } em { font-style: italic; } a { color: var(--text); text-decoration: none; transition: opacity .25s ease, color .25s ease; } ::selection { background: var(--text); color: var(--bg); } img { max-width: 100%; display: block; } /* ============================================ NAVIGATION ============================================ */ nav.top { position: fixed; top: 0; left: 0; right: 0; z-index: 90; display: flex; justify-content: space-between; align-items: center; padding: 1.4rem 2.5rem; background: transparent; transition: background .35s ease, border-color .35s ease, padding .35s ease; border-bottom: 1px solid transparent; } nav.top.scrolled { background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: var(--rule); padding: 1rem 2.5rem; } nav.top .brand { font-family: 'Fraunces', serif; font-style: italic; font-size: 1.05rem; letter-spacing: .04em; color: var(--text); z-index: 90; display: inline-flex; align-items: center; gap: .2rem; } nav.top .brand .brand-string { display: inline-block; width: 30px; height: 10px; margin-left: .45rem; vertical-align: middle; opacity: .85; overflow: visible; } nav.top .brand .brand-string path { stroke: currentColor; } nav.top ul { display: flex; gap: 2rem; list-style: none; align-items: center; } nav.top ul a { color: var(--text-dim); font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; position: relative; padding: .3rem 0; font-weight: 400; } nav.top ul a::after { content: ''; position: absolute; left: 0; bottom: -2px; width: 0; height: 1px; background: var(--text); transition: width .3s ease; } nav.top ul a:hover, nav.top ul a.active { color: var(--text); } nav.top ul a.active::after, nav.top ul a:hover::after { width: 100%; } /* Theme toggle */ .theme-toggle { background: transparent; border: 1px solid var(--rule); width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--text); transition: all .3s ease; margin-left: 1rem; } .theme-toggle:hover { background: var(--text); color: var(--bg); border-color: var(--text); transform: rotate(20deg); } .theme-toggle svg { width: 16px; height: 16px; } .theme-toggle .icon-sun, .theme-toggle .icon-moon { display: none; } :root[data-theme="light"] .theme-toggle .icon-moon { display: block; } :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; } /* Hamburger */ .menu-toggle { display: none; background: none; border: none; cursor: pointer; width: 40px; height: 40px; position: relative; color: var(--text); z-index: 90; } .menu-toggle span { display: block; position: absolute; left: 8px; right: 8px; height: 1.5px; background: var(--text); transition: transform .35s ease, opacity .25s ease, top .35s ease; } .menu-toggle span:nth-child(1) { top: 14px; } .menu-toggle span:nth-child(2) { top: 20px; } .menu-toggle span:nth-child(3) { top: 26px; } .menu-toggle.open span:nth-child(1) { top: 20px; transform: rotate(45deg); } .menu-toggle.open span:nth-child(2) { opacity: 0; } .menu-toggle.open span:nth-child(3) { top: 20px; transform: rotate(-45deg); } /* Sidebar overlay (mobile) */ .nav-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.55); opacity: 0; pointer-events: none; transition: opacity .35s ease; z-index: 70; } .nav-backdrop.open { opacity: 1; pointer-events: auto; } /* ============================================ SECTIONS / TYPOGRAPHY ============================================ */ main { position: relative; z-index: 2; } section { padding: 7rem 1.5rem; position: relative; } .container { max-width: 1180px; margin: 0 auto; position: relative; z-index: 2; } .container.narrow { max-width: 760px; } .container.wide { max-width: 1320px; } .chapter { display: inline-flex; align-items: center; gap: .9rem; font-size: .7rem; letter-spacing: .35em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 1.6rem; font-weight: 500; } .chapter::before { content: ''; width: 1.8rem; height: 1px; background: var(--text-faint); } .chapter .roman { color: var(--text); font-style: italic; font-family: 'Fraunces', serif; font-weight: 600; letter-spacing: .15em; } .section-heading { font-size: clamp(2.2rem, 5vw, 3.8rem); margin-bottom: 1.2rem; } .section-heading em { font-style: italic; font-weight: 400; opacity: .85; } .lede { font-family: 'Fraunces', serif; font-style: italic; font-size: clamp(1.1rem, 1.7vw, 1.35rem); color: var(--text-dim); max-width: 42rem; margin-bottom: 2rem; line-height: 1.55; } /* ============================================ HERO (Home page) ============================================ */ .hero { min-height: 100vh; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 8rem 1.5rem 5rem; overflow: hidden; } .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center, color-mix(in srgb, var(--text) 4%, transparent), transparent 60%); pointer-events: none; } .strings-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .35; } .strings-svg line { stroke: var(--text); stroke-width: 0.4; transform-origin: center; } @keyframes pluck { 0%, 100% { transform: scaleY(1); opacity: .25; } 50% { transform: scaleY(1.7); opacity: .55; } } .strings-svg line:nth-child(1) { animation: pluck 5.2s ease-in-out infinite; } .strings-svg line:nth-child(2) { animation: pluck 6.4s ease-in-out infinite .3s; } .strings-svg line:nth-child(3) { animation: pluck 5.8s ease-in-out infinite .8s; } .strings-svg line:nth-child(4) { animation: pluck 7.1s ease-in-out infinite 1.4s; } .strings-svg line:nth-child(5) { animation: pluck 6.2s ease-in-out infinite 2.1s; } .strings-svg line:nth-child(6) { animation: pluck 5.5s ease-in-out infinite 2.8s; } .hero-eyebrow { letter-spacing: .5em; font-size: .72rem; text-transform: uppercase; margin-bottom: 2.2rem; color: var(--text-dim); opacity: 0; animation: fadeUp 1.2s .3s forwards; } .hero h1 { font-size: clamp(3rem, 9vw, 7.8rem); letter-spacing: -.025em; margin-bottom: 1.6rem; opacity: 0; animation: fadeUp 1.4s .6s forwards; } .hero h1 .accent { font-style: italic; font-weight: 400; } .hero .tagline { font-family: 'Fraunces', serif; font-style: italic; font-size: clamp(1.1rem, 2vw, 1.45rem); color: var(--text-dim); max-width: 38rem; margin: 0 auto 3.5rem; opacity: 0; animation: fadeUp 1.4s 1.1s forwards; line-height: 1.6; } .hero .tagline em { color: var(--text); } .hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; opacity: 0; animation: fadeUp 1.4s 1.5s forwards; } .scroll-cue { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: .7rem; color: var(--text-faint); font-size: .68rem; letter-spacing: .35em; text-transform: uppercase; opacity: 0; animation: fadeUp 1.4s 1.9s forwards; } .scroll-cue .line { width: 1px; height: 44px; background: linear-gradient(to bottom, var(--text), transparent); animation: scrollPulse 2.2s ease-in-out infinite; } @keyframes scrollPulse { 0%, 100% { transform: scaleY(.6); opacity: .4; transform-origin: top; } 50% { transform: scaleY(1); opacity: 1; transform-origin: top; } } @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Buttons */ .btn { display: inline-flex; align-items: center; gap: .65rem; padding: .95rem 1.6rem; border: 1px solid var(--text); color: var(--text); font-family: 'Manrope', sans-serif; font-size: .78rem; letter-spacing: .25em; text-transform: uppercase; font-weight: 500; cursor: pointer; background: transparent; border-radius: 0; transition: all .3s ease; position: relative; overflow: hidden; } .btn::before { content: ''; position: absolute; inset: 0; background: var(--text); z-index: -1; transform: translateY(101%); transition: transform .35s cubic-bezier(.2,.7,.3,1); } .btn:hover { color: var(--bg); } .btn:hover::before { transform: translateY(0); } .btn.solid { background: var(--text); color: var(--bg); } .btn.solid::before { background: var(--bg); } .btn.solid:hover { color: var(--text); } .btn .arrow { transition: transform .3s ease; } .btn:hover .arrow { transform: translateX(4px); } /* ============================================ ABOUT / LETTER ============================================ */ .who { position: relative; background: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%); overflow: hidden; } .staff-lines { position: absolute; top: 8%; left: 0; right: 0; height: 70%; pointer-events: none; opacity: .07; } .staff-lines::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 26px, var(--text) 26px, var(--text) 27px); } .notes-float { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .notes-float span { position: absolute; color: var(--text); opacity: .12; font-size: 1.4rem; animation: float 14s linear infinite; user-select: none; } @keyframes float { 0% { transform: translateY(20vh) translateX(0); opacity: 0; } 10% { opacity: .22; } 90% { opacity: .22; } 100% { transform: translateY(-110vh) translateX(40px); opacity: 0; } } .who-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 5rem; align-items: start; } .who-side { position: sticky; top: 7rem; } .who-side .lede { font-size: 1rem; } .who-side .signature { font-family: 'Reenie Beanie', cursive; font-size: 2.6rem; color: var(--text); margin-top: 1.6rem; transform: rotate(-3deg); display: inline-block; line-height: 1; } .who-side .signature-line { width: 90px; height: 1px; background: var(--text-faint); margin-top: 1.2rem; } .who-letter { font-size: 1.06rem; max-width: 40rem; } .who-letter p { margin-bottom: 1.4rem; color: color-mix(in srgb, var(--text) 84%, transparent); } .who-letter .opener { font-family: 'Fraunces', serif; font-style: italic; font-size: 1.55rem; color: var(--text); margin-bottom: 1.8rem; line-height: 1.4; } .who-letter .opener::first-letter { font-size: 3.4rem; float: left; line-height: .9; margin-right: .65rem; color: var(--text); font-weight: 700; font-style: normal; } .who-letter blockquote { border-left: 2px solid var(--text); padding: .5rem 1.3rem; margin: 2.2rem 0; color: var(--text-dim); font-style: italic; font-family: 'Fraunces', serif; font-size: 1.08rem; } .who-letter h3 { font-style: italic; font-size: 1.6rem; margin: 3rem 0 1rem; } .who-letter h3 small { display: block; font-family: 'Manrope', sans-serif; font-style: normal; font-weight: 400; font-size: .7rem; letter-spacing: .3em; text-transform: uppercase; color: var(--text-faint); margin-bottom: .4rem; } /* ============================================ MUSIC GALLERY — THUMBNAIL CARDS ============================================ */ .gallery-intro { text-align: center; max-width: 44rem; margin: 0 auto 4.5rem; } .group-label { display: flex; align-items: baseline; gap: 1.2rem; margin: 4.5rem 0 2.4rem; font-family: 'Fraunces', serif; font-style: italic; font-size: 1.5rem; color: var(--text); } .group-label::before { content: ''; height: 1px; background: var(--rule); width: 2rem; flex: 0 0 auto; } .group-label::after { content: ''; height: 1px; background: var(--rule); flex: 1; } .group-label .num { color: var(--text-faint); font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; font-style: normal; font-family: 'Manrope', sans-serif; font-weight: 500; } .cassette-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 2rem; } /* Video card with thumbnail + hover overlay */ .video-card { position: relative; aspect-ratio: 16 / 11; cursor: pointer; overflow: hidden; background: var(--card); border: 1px solid var(--rule); transition: transform .5s cubic-bezier(.2,.7,.3,1), border-color .35s ease, box-shadow .4s ease; } .video-card .thumb { position: absolute; inset: 0; background-size: cover; background-position: center; background-color: var(--card); transition: transform .8s cubic-bezier(.2,.7,.3,1), filter .5s ease; filter: saturate(.6) brightness(.92); } .video-card:hover { transform: translateY(-4px); border-color: var(--rule-strong); box-shadow: var(--shadow); } .video-card:hover .thumb { transform: scale(1.06); filter: saturate(.95) brightness(.55); } /* Small persistent corner tag */ .video-card .corner-tag { position: absolute; top: 14px; left: 14px; font-size: .58rem; letter-spacing: .3em; text-transform: uppercase; color: var(--text); font-weight: 500; background: rgba(14,14,16,0.6); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); padding: 5px 9px; border: 1px solid rgba(245,242,236,0.18); z-index: 3; color: #f5f2ec; } /* Overlay — appears on hover */ .video-card .overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.6rem 1.5rem 1.4rem; background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0) 100%); opacity: 0; transition: opacity .4s ease; color: #f5f2ec; z-index: 2; } .video-card:hover .overlay { opacity: 1; } .video-card .overlay .title { font-family: 'Fraunces', serif; font-size: 1.2rem; line-height: 1.2; margin-bottom: .35rem; transform: translateY(10px); transition: transform .45s ease .05s; } .video-card .overlay .meta { font-family: 'Reenie Beanie', cursive; font-size: 1.1rem; opacity: .85; transform: translateY(10px); transition: transform .45s ease .1s; } .video-card:hover .overlay .title, .video-card:hover .overlay .meta { transform: translateY(0); } /* Play icon */ .play-icon { position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,0.95); display: flex; align-items: center; justify-content: center; transform: translate(-50%, -50%) scale(.5); opacity: 0; transition: all .45s cubic-bezier(.2,.7,.3,1); z-index: 3; } .play-icon::before { content: ''; width: 0; height: 0; border-left: 14px solid #0e0e10; border-top: 9px solid transparent; border-bottom: 9px solid transparent; margin-left: 4px; } .video-card:hover .play-icon { opacity: 1; transform: translate(-50%, -50%) scale(1); } /* Vintage cards */ .video-card.vintage { transform: rotate(-1deg); } .video-card.vintage:hover { transform: translateY(-4px) rotate(-1.4deg); } .video-card.vintage .thumb { filter: grayscale(1) sepia(.4) contrast(.95) brightness(.85); } .video-card.vintage:hover .thumb { filter: grayscale(1) sepia(.3) contrast(1) brightness(.55); } .video-card.vintage::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 30%, rgba(0,0,0,0.25) 0%, transparent 25%), radial-gradient(circle at 80% 70%, rgba(0,0,0,0.25) 0%, transparent 30%); pointer-events: none; mix-blend-mode: multiply; z-index: 1; } .video-card .vintage-stamp { position: absolute; top: 12px; right: 12px; transform: rotate(8deg); border: 1.5px solid rgba(245,242,236,0.7); color: rgba(245,242,236,0.85); font-family: 'Manrope', sans-serif; font-size: .55rem; letter-spacing: .3em; padding: 3px 7px; z-index: 4; background: rgba(0,0,0,0.3); backdrop-filter: blur(4px); } /* ============================================ MODAL ============================================ */ .modal { position: fixed; inset: 0; background: rgba(8, 8, 10, 0.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); display: none; align-items: center; justify-content: center; z-index: 200; padding: 2rem; opacity: 0; transition: opacity .3s ease; } .modal.open { display: flex; opacity: 1; } .modal-inner { width: 100%; max-width: 1000px; transform: scale(.92); transition: transform .4s cubic-bezier(.2,.7,.3,1); color: #f5f2ec; } .modal.open .modal-inner { transform: scale(1); } .modal-title { font-family: 'Fraunces', serif; font-size: 1.6rem; margin-bottom: .25rem; color: #f5f2ec; } .modal-sub { color: #f5f2ec; opacity: .55; font-size: .72rem; letter-spacing: .35em; text-transform: uppercase; margin-bottom: 1.5rem; } .modal-frame { width: 100%; aspect-ratio: 16 / 9; background: #000; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,0.7); border: 1px solid rgba(245,242,236,0.15); } .modal-frame iframe { width: 100%; height: 100%; border: 0; } .modal-close { position: absolute; top: 1.6rem; right: 1.8rem; background: rgba(245,242,236,0.05); color: #f5f2ec; border: 1px solid rgba(245,242,236,0.18); width: 44px; height: 44px; border-radius: 50%; cursor: pointer; font-size: 1.1rem; display: flex; align-items: center; justify-content: center; transition: all .25s ease; } .modal-close:hover { background: #f5f2ec; color: #0e0e10; border-color: #f5f2ec; transform: rotate(90deg); } /* ============================================ TEACH PAGE ============================================ */ .teach-intro { max-width: 760px; margin: 0 auto 4rem; text-align: center; } .teach-block { max-width: 720px; margin: 0 auto; } .teach-block p { font-size: 1.08rem; color: color-mix(in srgb, var(--text) 82%, transparent); margin-bottom: 1.5rem; } .teach-block h3 { font-size: 1.8rem; margin: 4rem 0 1.2rem; position: relative; padding-left: 0; } .teach-block h3 .roman { display: block; font-family: 'Manrope', sans-serif; font-style: normal; font-weight: 500; font-size: .7rem; letter-spacing: .35em; text-transform: uppercase; color: var(--text-faint); margin-bottom: .4rem; } .teach-block h3 em { font-style: italic; } .teach-quote { margin: 3rem 0; padding: 2.5rem 2rem; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); text-align: center; } .teach-quote .q { font-family: 'Fraunces', serif; font-style: italic; font-size: 1.7rem; line-height: 1.4; color: var(--text); margin-bottom: 1rem; } .teach-quote .cite { font-family: 'Manrope', sans-serif; font-size: .72rem; letter-spacing: .3em; text-transform: uppercase; color: var(--text-faint); } .teach-block .aside { font-family: 'Reenie Beanie', cursive; font-size: 1.5rem; color: var(--text); margin: 2rem 0; padding-left: 1.5rem; border-left: 2px solid var(--text); line-height: 1.4; } .teach-block .stage-card { border: 1px solid var(--rule); padding: 2rem 2rem 1.6rem; margin: 2rem 0; background: color-mix(in srgb, var(--text) 3%, transparent); } .teach-block .stage-card .stage-num { font-family: 'Fraunces', serif; font-style: italic; font-size: 3.5rem; line-height: 1; color: var(--text); opacity: .25; margin-bottom: .5rem; } .teach-block .stage-card .stage-title { font-family: 'Fraunces', serif; font-size: 1.4rem; margin-bottom: .8rem; } .belief-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; background: var(--rule); margin: 3rem 0; border: 1px solid var(--rule); } .belief { padding: 1.8rem 1.4rem; background: var(--bg); } .belief .num { font-family: 'Fraunces', serif; font-style: italic; font-size: 1.3rem; color: var(--text-faint); margin-bottom: .8rem; } .belief p { font-size: .95rem; color: var(--text-dim); margin: 0; } /* ============================================ GEAR / FRETBOARD ============================================ */ .gear-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; } .gear-text p { color: color-mix(in srgb, var(--text) 80%, transparent); margin-bottom: 1.4rem; font-size: 1.05rem; } .gear-text .pull { font-family: 'Fraunces', serif; font-style: italic; font-size: 1.5rem; color: var(--text); margin: 2.2rem 0; line-height: 1.4; padding-left: 1.5rem; border-left: 2px solid var(--text); } .fretboard { position: relative; background: linear-gradient(180deg, color-mix(in srgb, var(--text) 12%, var(--bg)) 0%, var(--bg) 100%); height: 320px; box-shadow: var(--shadow), inset 0 0 30px rgba(0,0,0,0.25); overflow: hidden; border: 1px solid var(--rule); } :root[data-theme="light"] .fretboard { background: linear-gradient(180deg, #2a2520 0%, #1a1612 100%); } .fret { position: absolute; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, #d4c5a8, #8a7a5e); box-shadow: 0 0 4px rgba(212,197,168,0.3); } .string { position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(to right, transparent, #e8e3d8 5%, #e8e3d8 95%, transparent); } .string.thick { height: 2px; opacity: .85; } .dot { position: absolute; width: 10px; height: 10px; background: #f5f2ec; border-radius: 50%; transform: translate(-50%, -50%); opacity: .75; box-shadow: 0 0 10px rgba(245,242,236,0.3); } .dot.lit { animation: lightDot 3s ease-in-out infinite; } @keyframes lightDot { 0%, 100% { opacity: .8; box-shadow: 0 0 14px rgba(245,242,236,0.5); } 50% { opacity: 1; box-shadow: 0 0 24px rgba(245,242,236,0.85); } } .influences { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); margin-top: 4rem; } .influence { display: grid; grid-template-columns: 160px 1fr; background: var(--bg); padding: 1.4rem 1.6rem; gap: 1.4rem; align-items: baseline; } .influence .name { font-family: 'Fraunces', serif; font-style: italic; font-size: 1.15rem; color: var(--text); } .influence .what { color: var(--text-dim); font-size: .98rem; } /* ============================================ CONNECT / CONTACT ============================================ */ .connect { text-align: center; padding: 8rem 1.5rem 5rem; position: relative; } .connect h2 { font-size: clamp(2rem, 5vw, 3.6rem); margin-bottom: 1.5rem; } .connect h2 em { font-style: italic; } .connect .sub { color: var(--text-dim); max-width: 32rem; margin: 0 auto 3rem; font-size: 1.08rem; } .connect-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-bottom: 3.5rem; } .connect-actions .btn { padding: 1.1rem 1.8rem; } .connect-actions .btn svg { width: 16px; height: 16px; } .connect-note { margin-top: 2rem; font-family: 'Reenie Beanie', cursive; font-size: 1.5rem; color: var(--text-faint); } /* ============================================ FOOTER ============================================ */ footer { border-top: 1px solid var(--rule); padding: 3rem 2rem 2rem; position: relative; z-index: 2; background: var(--bg); } footer .foot-grid { max-width: 1180px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1.5rem; font-size: .76rem; letter-spacing: .25em; text-transform: uppercase; color: var(--text-faint); } footer .foot-grid a { color: var(--text-dim); } footer .foot-grid a:hover { color: var(--text); } footer .foot-grid .nav-foot { display: flex; gap: 1.6rem; flex-wrap: wrap; } /* ============================================ REVEAL ON SCROLL ============================================ */ .reveal { opacity: 0; transform: translateY(40px); transition: opacity .9s ease, transform .9s ease; } .reveal.in { opacity: 1; transform: translateY(0); } .reveal.delay-1 { transition-delay: .1s; } .reveal.delay-2 { transition-delay: .2s; } .reveal.delay-3 { transition-delay: .3s; } /* ============================================ RESPONSIVE ============================================ */ @media (max-width: 980px) { .who-grid, .gear-grid { grid-template-columns: 1fr; gap: 3rem; } .who-side { position: static; } .influence { grid-template-columns: 1fr; gap: .25rem; padding: 1.2rem; } } @media (max-width: 880px) { nav.top { padding: 1.1rem 1.4rem; } nav.top.scrolled { padding: .9rem 1.4rem; } .menu-toggle { display: block; } .theme-toggle { margin-left: 0; } /* sidebar from the right */ nav.top ul { position: fixed; top: 0; right: 0; bottom: 0; width: min(82vw, 320px); background: var(--bg-soft); flex-direction: column; align-items: flex-start; justify-content: flex-start; padding: 6.5rem 2rem 2rem; gap: 1.6rem; transform: translateX(105%); transition: transform .45s cubic-bezier(.2,.7,.3,1); z-index: 80; box-shadow: -30px 0 80px rgba(0,0,0,0.5); border-left: 1px solid var(--rule); } nav.top ul.open { transform: translateX(0); } nav.top ul a { font-size: 1.05rem; letter-spacing: .12em; } nav.top ul li { width: 100%; border-bottom: 1px solid var(--rule); padding-bottom: 1rem; } nav.top ul li:last-child { border-bottom: none; } .nav-right { display: flex; align-items: center; gap: .6rem; z-index: 90; } section { padding: 5rem 1.2rem; } .gallery-intro { margin-bottom: 3rem; } .group-label { font-size: 1.2rem; margin: 3rem 0 1.6rem; } /* Mobile video modal — video first, label/title below, never clipped */ .modal { padding: .75rem; overflow-y: auto; -webkit-overflow-scrolling: touch; } .modal-close { top: .7rem; right: .7rem; width: 38px; height: 38px; z-index: 5; } .modal-inner { display: flex; flex-direction: column; width: 100%; max-width: 100%; text-align: center; } .modal-frame { order: -1; /* push the video to the top */ width: 100%; /* Cap by available viewport height so 16:9 video never clips. vh is the broad fallback; dvh handles mobile browser chrome cleanly. */ max-width: min(100%, calc((100vh - 110px) * 16 / 9)); max-width: min(100%, calc((100dvh - 110px) * 16 / 9)); margin: 0 auto; box-shadow: 0 20px 50px rgba(0,0,0,0.65); } .modal-sub { order: 0; margin: .9rem 0 .15rem; font-size: .6rem; letter-spacing: .3em; text-align: center; } .modal-title { order: 1; margin: 0; font-size: 1.05rem; line-height: 1.25; text-align: center; padding: 0 2.4rem; /* keep title clear of close button */ } .teach-quote { padding: 1.8rem 1rem; } .teach-quote .q { font-size: 1.3rem; } .belief-grid { grid-template-columns: 1fr; } .who-letter .opener { font-size: 1.3rem; } .who-letter .opener::first-letter { font-size: 2.8rem; } } @media (max-width: 520px) { .cassette-grid { grid-template-columns: 1fr; } .hero { padding: 6rem 1rem 4rem; } .hero-actions { flex-direction: column; align-items: stretch; } .hero-actions .btn { justify-content: center; } .connect-actions { flex-direction: column; align-items: stretch; } .gear-text .pull, .who-letter blockquote { padding-left: 1rem; } } /* ============================================ SPLASH SCREEN ============================================ */ .splash { position: fixed; inset: 0; background: var(--bg); z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; text-align: center; opacity: 1; transition: opacity .55s ease; } .splash.hide { opacity: 0; pointer-events: none; } .splash.done { display: none; } .splash-anim { width: 88px; height: 28px; margin-bottom: 1.8rem; color: var(--text); opacity: 0; animation: splashFadeIn .8s ease both .05s; } .splash-anim svg { width: 100%; height: 100%; overflow: visible; } .splash-anim path { stroke: currentColor; } .splash-brand { font-family: 'Fraunces', serif; font-style: italic; font-weight: 400; font-size: 1.05rem; letter-spacing: .35em; text-transform: lowercase; color: var(--text); margin-bottom: 3rem; opacity: 0; animation: splashFadeIn .8s ease both .2s; } .splash-quote { font-family: 'Fraunces', serif; font-style: italic; font-size: clamp(1.05rem, 2.2vw, 1.5rem); line-height: 1.5; color: var(--text); max-width: 34rem; margin-bottom: 1rem; opacity: 0; animation: splashFadeIn 1s ease both .4s; } .splash-cite { font-family: 'Manrope', sans-serif; font-size: .68rem; letter-spacing: .35em; text-transform: uppercase; color: var(--text-faint); opacity: 0; animation: splashFadeIn 1s ease both .55s; } /* Bottom progress hairline */ .splash-line { position: absolute; bottom: 0; left: 0; height: 1px; width: 0; background: var(--text); opacity: .45; animation: splashLine 1.6s ease-in-out forwards .1s; } @keyframes splashLine { to { width: 100%; } } @keyframes splashFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* When the splash is re-shown for navigation, fade everything quickly */ .splash.nav .splash-quote, .splash.nav .splash-cite { animation-duration: .4s; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } body { animation: none; } .splash-line { width: 100%; animation: none; } }