/* ============================================================ The Pledge Tree — Landing Page Ultra-modern · minimalist · editorial ============================================================ */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ --bg:#060606; --bg-subtle:#0e0e0e; --text:#f0f0f0; --text-secondary:#a0a0a0; --text-dim:#555; --accent:#3fa85a; --rule:rgba(255,255,255,.06); --font-body:'Space Grotesk',system-ui,sans-serif; --font-mono:'IBM Plex Mono',monospace; --gutter:clamp(24px,5vw,80px); --ease-out:cubic-bezier(0.16,1,0.3,1); --ease-in-out:cubic-bezier(0.65,0,0.35,1); } html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; /* clip horizontal overflow at the root so stays in normal document flow (not its own scroll container) — keeps the window scroll model intact */ overflow-x:hidden; } body{ background:var(--bg); color:var(--text); font-family:var(--font-body); font-size:15px; line-height:1.6; } ::selection{ background:rgba(63,168,90,.2); color:var(--text); } /* ---- NAV ---- */ .nav{ position:fixed; top:0;left:0;right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; padding:24px var(--gutter); mix-blend-mode:difference; transition:background-color .4s var(--ease-out),backdrop-filter .4s var(--ease-out),padding .3s var(--ease-out),border-color .4s var(--ease-out); border-bottom:1px solid transparent; } /* Once scrolled past the hero, become a solid bar so page content no longer collides with the nav (and drop the difference blend for clean legibility). */ .nav.is-scrolled{ mix-blend-mode:normal; background:rgba(6,6,6,.82); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--rule); padding:16px var(--gutter); } .nav-wordmark{ font-size:14px; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--text); text-decoration:none; } .nav-links{ display:flex; align-items:center; gap:36px; } .nav-links a{ font-size:12px; font-weight:400; letter-spacing:.08em; text-transform:uppercase; color:var(--text-secondary); text-decoration:none; transition:color .4s var(--ease-out); } .nav-links a:hover{ color:var(--text); } .nav-admin{ border:1px solid rgba(255,255,255,.2); padding:7px 20px; transition:border-color .4s var(--ease-out),color .4s var(--ease-out); } .nav-admin:hover{ border-color:var(--text); color:var(--text)!important; } /* ---- HERO ---- */ .hero{ position:relative; width:100%; height:100vh; min-height:600px; overflow:hidden; background:var(--bg); } #hero-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:2; } .hero-fallback{ position:absolute; inset:0; background:radial-gradient(ellipse at 50% 55%,#080f0a 0%,var(--bg) 70%); z-index:1; pointer-events:none; } /* Hero text overlay */ .hero-overlay{ position:absolute; bottom:0;left:0; z-index:10; padding:0 var(--gutter) clamp(56px,10vh,120px); max-width:760px; pointer-events:none; } .hero-overlay>*{pointer-events:auto} .hero-eyebrow{ display:flex; align-items:center; gap:16px; font-family:var(--font-mono); font-size:10px; font-weight:400; letter-spacing:.2em; text-transform:uppercase; color:var(--text-dim); margin-bottom:24px; opacity:0; transform:translateY(12px); animation:hero-fade-in .8s var(--ease-out) .6s forwards; } .hero-eyebrow-line{ display:block; width:24px; height:1px; background:var(--accent); } .hero-title{ font-size:clamp(48px,8.5vw,100px); font-weight:300; line-height:1.0; letter-spacing:-.03em; margin-bottom:32px; color:var(--text); } .hero-title-line{ display:block; overflow:hidden; } .hero-title-line:nth-child(1){ opacity:0; transform:translateY(20px); animation:hero-fade-in .9s var(--ease-out) .2s forwards; } .hero-title-line:nth-child(2){ opacity:0; transform:translateY(20px); animation:hero-fade-in .9s var(--ease-out) .35s forwards; } .hero-tagline{ font-size:clamp(14px,1.3vw,16px); font-weight:400; color:var(--text-dim); line-height:1.75; margin-bottom:48px; max-width:400px; opacity:0; transform:translateY(12px); animation:hero-fade-in .8s var(--ease-out) .8s forwards; } .hero-cta{ display:inline-flex; align-items:center; gap:14px; font-size:11px; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:var(--text-secondary); text-decoration:none; transition:color .4s var(--ease-out),gap .5s var(--ease-out); opacity:0; transform:translateY(12px); animation:hero-fade-in .8s var(--ease-out) 1s forwards; } .hero-cta:hover{ color:var(--text); gap:20px; } .cta-line{ display:block; width:32px; height:1px; background:var(--accent); transition:width .5s var(--ease-out); } .hero-cta:hover .cta-line{ width:48px; } /* Scroll indicator */ .hero-scroll{ position:absolute; bottom:clamp(32px,5vh,56px); right:var(--gutter); z-index:10; display:flex; flex-direction:column; align-items:center; gap:10px; pointer-events:none; opacity:0; animation:hero-fade-in .8s var(--ease-out) 1.4s forwards; } .hero-scroll-text{ font-size:9px; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--text-dim); writing-mode:vertical-rl; } .hero-scroll-line{ width:1px; height:40px; background:linear-gradient(to bottom,var(--text-dim),transparent); animation:scroll-pulse 2s var(--ease-in-out) infinite; } @keyframes hero-fade-in{ to{opacity:1;transform:translateY(0)} } @keyframes scroll-pulse{ 0%,100%{opacity:.4;transform:scaleY(1)} 50%{opacity:1;transform:scaleY(.6)} } /* Data overlay */ .hero-data{ position:absolute; top:88px;right:var(--gutter); z-index:10; font-family:var(--font-mono); font-size:9px; color:rgba(63,168,90,.4); line-height:2.2; pointer-events:none; text-align:right; letter-spacing:.05em; opacity:0; animation:hero-fade-in .8s var(--ease-out) 1.2s forwards; } .data-line{ display:flex; justify-content:flex-end; gap:16px; } .data-label{ color:rgba(255,255,255,.15); } .data-val{ min-width:72px; text-align:right; font-variant-numeric:tabular-nums; } /* ---- HERO ATMOSPHERIC OVERLAYS ---- */ .hero-grain, .hero-vignette, .hero-scanlines{ position:absolute; inset:0; pointer-events:none; } .hero-grain{ z-index:5; mix-blend-mode:overlay; opacity:0.03; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); background-size:200px 200px; animation:grain-flicker 0.5s steps(6) infinite; } @keyframes grain-flicker{ 0%,100%{transform:translate(0,0)} 16%{transform:translate(-2px,1px)} 33%{transform:translate(1px,-2px)} 50%{transform:translate(-1px,2px)} 66%{transform:translate(2px,-1px)} 83%{transform:translate(-2px,-1px)} } .hero-vignette{ z-index:6; background:radial-gradient(ellipse at 50% 50%,transparent 35%,rgba(0,0,0,0.75) 100%); } .hero-scanlines{ z-index:7; opacity:0.025; background:repeating-linear-gradient( to bottom, transparent 0px, transparent 2px, rgba(255,255,255,0.06) 2px, rgba(255,255,255,0.06) 4px ); } /* ---- SCROLL REVEAL ---- */ .reveal{ opacity:0; transform:translateY(40px); transition:opacity .9s var(--ease-out),transform .9s var(--ease-out); } .reveal.is-visible{ opacity:1; transform:translateY(0); } .reveal-child{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease-out),transform .7s var(--ease-out); } .reveal.is-visible .reveal-child:nth-child(1){transition-delay:.1s;opacity:1;transform:translateY(0)} .reveal.is-visible .reveal-child:nth-child(2){transition-delay:.2s;opacity:1;transform:translateY(0)} .reveal.is-visible .reveal-child:nth-child(3){transition-delay:.3s;opacity:1;transform:translateY(0)} .reveal.is-visible .reveal-child:nth-child(4){transition-delay:.4s;opacity:1;transform:translateY(0)} .reveal.is-visible .reveal-child:nth-child(5){transition-delay:.5s;opacity:1;transform:translateY(0)} /* ---- CONTENT SECTIONS ---- */ .content-section{ max-width:1080px; margin:0 auto; padding:clamp(100px,14vh,180px) var(--gutter); } /* Section label — small left-aligned marker */ .section-label{ display:flex; align-items:center; gap:12px; margin-bottom:clamp(48px,7vh,80px); } .section-num{ font-family:var(--font-mono); font-size:10px; font-weight:400; letter-spacing:.1em; color:var(--accent); } .section-label-text{ font-size:10px; font-weight:400; letter-spacing:.15em; text-transform:uppercase; color:var(--text-dim); } /* Two-column layout */ .section-grid{ display:grid; grid-template-columns:1fr 1.2fr; gap:clamp(40px,6vw,100px); align-items:start; } /* Left-aligned single-column layout */ .content-section--left{ max-width:640px; margin-left:var(--gutter); margin-right:auto; } .content-section--left .section-title{ margin-bottom:clamp(24px,4vh,40px); } .section-title{ font-size:clamp(28px,3.5vw,42px); font-weight:300; line-height:1.15; letter-spacing:-.02em; color:var(--text); } .section-title--full{ margin-bottom:clamp(40px,6vh,64px); } .section-body p{ color:var(--text-secondary); margin-bottom:24px; font-size:15px; line-height:1.85; font-weight:400; } .section-body p:last-child{ margin-bottom:0; } /* Section CTA */ .section-cta{ display:inline-flex; align-items:center; gap:14px; margin-top:40px; font-size:11px; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:var(--text-secondary); text-decoration:none; transition:color .4s var(--ease-out),gap .5s var(--ease-out); } .section-cta:hover{ color:var(--text); gap:20px; } .section-cta .cta-line{ display:block; width:32px; height:1px; background:var(--accent); transition:width .5s var(--ease-out); } .section-cta:hover .cta-line{ width:48px; } /* ---- FOOTER ---- */ .footer{ border-top:1px solid var(--rule); padding:clamp(48px,7vh,80px) var(--gutter); } .footer-inner{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:32px; } .footer-col{ display:flex; flex-direction:column; gap:6px; font-size:14px; font-weight:400; } .footer-col--end{ margin-left:auto; } .footer-label{ font-size:9px; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:var(--text-dim); } .footer-artist{ display:inline-flex; align-items:center; gap:14px; } .footer-socials{ display:inline-flex; align-items:center; gap:12px; } .footer-social{ display:inline-flex; color:var(--text-dim); transition:color .3s var(--ease-out),transform .3s var(--ease-out); } .footer-social:hover{ color:var(--accent); transform:translateY(-1px); } .footer-social svg{ width:16px; height:16px; display:block; } .footer-copy{ font-size:12px; color:var(--text-dim); } /* ---- RESPONSIVE ---- */ @media(max-width:768px){ .nav{ padding:18px 20px; mix-blend-mode:normal; background:linear-gradient(to bottom,rgba(6,6,6,.95) 0%,transparent 100%); } .nav-links{ gap:16px; } .hero-overlay{ padding:0 24px 48px; } .hero-data, .hero-scroll{ display:none; } .content-section{ padding:72px 24px; } .content-section--left{ margin-left:auto; } .footer-inner{ flex-direction:column; align-items:flex-start; gap:24px; } .footer-col--end{ margin-left:0; } } @media(max-width:480px){ .hero-title{ font-size:42px; } .hero-tagline{ font-size:13px; } .nav-wordmark{ font-size:12px; } .nav-links{ gap:14px; } .nav-links a{ font-size:10px; } .nav-admin{ padding:5px 14px; } } /* ---- ADMIN ACCESS MODAL ---- */ .admin-modal{ position:fixed; inset:0; z-index:1000; display:flex; align-items:center; justify-content:center; padding:24px; opacity:0; visibility:hidden; transition:opacity .4s var(--ease-out),visibility .4s var(--ease-out); } .admin-modal.is-open{ opacity:1; visibility:visible; } .admin-modal-backdrop{ position:absolute; inset:0; background:rgba(3,3,3,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); } .admin-modal-panel{ position:relative; width:100%; max-width:400px; padding:44px 40px 40px; background:var(--bg-subtle); border:1px solid var(--rule); transform:translateY(16px) scale(.98); transition:transform .5s var(--ease-out); } .admin-modal.is-open .admin-modal-panel{ transform:translateY(0) scale(1); } .admin-modal-close{ position:absolute; top:14px; right:16px; width:32px; height:32px; background:none; border:none; color:var(--text-dim); font-size:24px; line-height:1; cursor:pointer; transition:color .3s var(--ease-out); } .admin-modal-close:hover{ color:var(--text); } .admin-modal-eyebrow{ display:block; font-family:var(--font-mono); font-size:10px; font-weight:500; letter-spacing:.28em; text-transform:uppercase; color:var(--accent); margin-bottom:14px; } .admin-modal-title{ font-size:26px; font-weight:500; letter-spacing:-.01em; color:var(--text); margin-bottom:28px; } .admin-modal-form{ display:flex; flex-direction:column; gap:20px; } .admin-modal-input{ width:100%; padding:14px 16px; background:var(--bg); border:1px solid rgba(255,255,255,.14); color:var(--text); font-family:var(--font-mono); font-size:14px; letter-spacing:.04em; transition:border-color .3s var(--ease-out); } .admin-modal-input::placeholder{ color:var(--text-dim); } .admin-modal-input:focus{ outline:none; border-color:var(--accent); } .admin-modal-error{ font-family:var(--font-mono); font-size:11px; letter-spacing:.04em; color:#e0554e; min-height:14px; margin-top:-8px; } .admin-modal-cta{ display:inline-flex; align-items:center; gap:14px; align-self:flex-start; padding:0; background:none; border:none; cursor:pointer; font-family:var(--font-body); font-size:11px; font-weight:500; letter-spacing:.15em; text-transform:uppercase; color:var(--text-secondary); transition:color .4s var(--ease-out),gap .5s var(--ease-out); } .admin-modal-cta:hover{ color:var(--text); gap:20px; } .admin-modal-cta:hover .cta-line{ width:48px; }