/* ========================================================= TOXIC SPIRIT — Design System Black base, toxic-green accent, bone-white type. ========================================================= */ /* Fonts are now loaded via a in (see build_site.py's head()) instead of @import, since @import blocks discovery until this file itself has downloaded — a real First Contentful Paint / SEO-relevant performance cost. */ :root{ --black:#000000; --near-black:#0a0a0a; --surface:#111111; --surface-2:#161616; --border:rgba(255,255,255,.09); --border-strong:rgba(255,255,255,.16); --green:#a9c92d; --green-bright:#c6ea3d; --green-dim:#7a9420; --green-glow:rgba(169,201,45,.35); --white:#f5f5f0; --gray:#a8a8a1; --gray-dim:#6f6f68; --font-display:'Anton', 'Arial Narrow', sans-serif; --font-body:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --container: 1240px; --radius: 14px; --radius-sm: 8px; --ease: cubic-bezier(.16,.84,.44,1); } /* ---------- Reset ---------- */ *,*::before,*::after{ box-sizing:border-box; } html{ scroll-behavior:smooth; } body{ margin:0; background:var(--black); color:var(--white); font-family:var(--font-body); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img,video{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } ul{ list-style:none; margin:0; padding:0; } h1,h2,h3,h4,p,figure{ margin:0; } button{ font-family:inherit; cursor:pointer; } input,textarea,select{ font-family:inherit; font-size:1rem; } ::selection{ background:var(--green); color:#000; } /* Focus visibility (accessibility) */ a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{ outline:2px solid var(--green-bright); outline-offset:3px; border-radius:4px; } /* ---------- Layout helpers ---------- */ .container{ max-width:var(--container); margin:0 auto; padding:0 24px; } .section{ padding:110px 0; position:relative; } .section-tight{ padding:70px 0; } @media (max-width:768px){ .section{ padding:72px 0; } .section-tight{ padding:52px 0; } } .eyebrow{ display:inline-flex; align-items:center; gap:10px; font-family:var(--font-body); font-weight:700; font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; color:var(--green); } .eyebrow::before{ content:''; width:26px; height:2px; background:var(--green); display:inline-block; } .section-head{ max-width:720px; margin-bottom:52px; } .section-head.center{ margin-left:auto; margin-right:auto; text-align:center; } h1,h2,h3,h4{ font-family:var(--font-display); font-weight:400; text-transform:uppercase; letter-spacing:.01em; line-height:1.04; } h2{ font-size:clamp(2.1rem,4.2vw,3.4rem); margin-top:14px; } h3{ font-size:clamp(1.35rem,2.2vw,1.8rem); } p{ color:var(--gray); } p.lead{ font-size:1.15rem; color:var(--gray); } .text-green{ color:var(--green); } .text-white{ color:var(--white); } /* ---------- Buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:16px 30px; border-radius:100px; font-weight:700; font-size:.92rem; letter-spacing:.04em; text-transform:uppercase; border:1px solid transparent; transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease); white-space:nowrap; } .btn-primary{ background:var(--green); color:#080a02; box-shadow:0 0 0 0 var(--green-glow); } .btn-primary:hover{ background:var(--green-bright); transform:translateY(-2px); box-shadow:0 10px 30px -8px var(--green-glow); } .btn-ghost{ background:transparent; color:var(--white); border-color:var(--border-strong); } .btn-ghost:hover{ border-color:var(--green); color:var(--green); transform:translateY(-2px); } .btn-block{ width:100%; } .btn-sm{ padding:11px 20px; font-size:.78rem; } /* ========================================================= HEADER / NAV ========================================================= */ .site-header{ position:fixed; inset:0 0 auto 0; z-index:100; height:84px; display:flex; align-items:center; background:linear-gradient(to bottom, rgba(0,0,0,.85), rgba(0,0,0,0)); backdrop-filter:blur(2px); transition:background .3s var(--ease), height .3s var(--ease), border-color .3s var(--ease); border-bottom:1px solid transparent; } .site-header.is-scrolled{ height:70px; background:rgba(0,0,0,.82); border-bottom:1px solid var(--border); backdrop-filter:blur(10px); } .site-header .container{ display:flex; align-items:center; justify-content:space-between; width:100%; } .brand{ display:flex; align-items:center; gap:10px; } .brand img{ height:42px; width:auto; transition:height .3s var(--ease); } .site-header.is-scrolled .brand img{ height:36px; } .brand-word{ height:16px; width:auto; } .nav-links{ display:flex; align-items:center; gap:38px; } .nav-links a{ font-size:.86rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--gray); position:relative; padding:6px 0; } .nav-links a::after{ content:''; position:absolute; left:0; right:100%; bottom:0; height:2px; background:var(--green); transition:right .3s var(--ease); } .nav-links a:hover,.nav-links a.active{ color:var(--white); } .nav-links a:hover::after,.nav-links a.active::after{ right:0; } .nav-cta{ display:flex; align-items:center; gap:22px; } .nav-links .nav-book{ display:none; } /* .nav-links a{color:var(--gray)} is more specific than .btn-primary{color:...} alone (element+class beats class), so without this the mobile "Book Your Event" pill inherited gray text instead of the intended near-black-on-green. Force it back. */ .nav-links a.nav-book, .nav-links a.nav-book:hover, .nav-links a.nav-book:focus-visible{ color:#080a02; } .nav-toggle{ display:none; width:44px; height:44px; border-radius:10px; border:1px solid var(--border-strong); background:transparent; align-items:center; justify-content:center; flex-direction:column; gap:5px; } .nav-toggle span{ width:20px; height:2px; background:var(--white); transition:transform .3s var(--ease), opacity .3s var(--ease); } .nav-toggle.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); } .nav-toggle.is-open span:nth-child(2){ opacity:0; } .nav-toggle.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } @media (max-width:960px){ .nav-links{ position:fixed; inset:70px 0 0 0; height:calc(100dvh - 70px); background:rgba(0,0,0,.98); flex-direction:column; justify-content:flex-start; padding:40px 24px; gap:8px; transform:translateX(100%); transition:transform .4s var(--ease); overflow-y:auto; } .nav-links.is-open{ transform:translateX(0); } .nav-links a{ font-size:1.4rem; width:100%; padding:16px 0; border-bottom:1px solid var(--border); } .nav-links .nav-book{ display:inline-flex; margin-top:20px; } .nav-cta .btn-primary.desktop-only{ display:none; } .nav-toggle{ display:flex; } } /* ========================================================= HERO — 3D parallax ========================================================= */ .hero{ position:relative; min-height:100svh; display:flex; align-items:center; overflow:hidden; background:var(--black); isolation:isolate; --vignette-fade:1; } .hero-canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; z-index:1; pointer-events:none; } .hero-fallback-bg{ position:absolute; inset:-10%; z-index:0; pointer-events:none; background: radial-gradient(ellipse 60% 50% at 50% 38%, var(--green-glow), transparent 60%), radial-gradient(ellipse 45% 40% at 80% 75%, rgba(169,201,45,.12), transparent 65%), radial-gradient(ellipse 45% 40% at 15% 80%, rgba(169,201,45,.1), transparent 65%), #000; animation:hero-drift 18s ease-in-out infinite alternate; } @keyframes hero-drift{ 0%{ transform:scale(1) translate(0,0); } 100%{ transform:scale(1.06) translate(-1%,-1%); } } .hero-vignette{ position:absolute; inset:0; z-index:2; pointer-events:none; opacity:var(--vignette-fade,1); transition:opacity .2s linear; background: radial-gradient(ellipse 70% 60% at 50% 45%, transparent 40%, rgba(0,0,0,.55) 100%), linear-gradient(to bottom, rgba(0,0,0,.35) 0%, transparent 18%, transparent 72%, #000 100%); } .hero-grain{ position:absolute; inset:0; z-index:3; pointer-events:none; opacity:.05; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .hero-scrim{ /* Desktop "two sections" feel: a left-to-right dark scrim so the left side reads as a text panel while the right side stays clear and shows the 3D graphic. Lifts as the text fades on scroll (see --vignette-fade) so the graphic can take over fully. */ position:absolute; inset:0; z-index:2; pointer-events:none; opacity:var(--vignette-fade,1); transition:opacity .2s linear; background:linear-gradient(to right, rgba(0,0,0,.88) 0%, rgba(0,0,0,.6) 36%, rgba(0,0,0,.12) 64%, transparent 80%); } .hero-content{ position:relative; z-index:4; width:100%; padding-top:70px; } .hero-text{ max-width:640px; text-align:left; } .hero-eyebrow{ display:inline-flex; align-items:center; gap:10px; margin-bottom:22px; font-weight:700; font-size:.8rem; letter-spacing:.28em; text-transform:uppercase; color:var(--green); } .hero-eyebrow::before,.hero-eyebrow::after{ content:''; width:30px; height:1px; background:var(--green-dim); } .hero-title{ font-size:clamp(2.9rem,9vw,7.2rem); line-height:.94; margin:0 0 26px; text-shadow:0 0 60px rgba(169,201,45,.25); } .hero-sub{ max-width:560px; margin:0 0 40px; font-size:clamp(1rem,1.4vw,1.15rem); color:var(--gray); } .hero-cta{ display:flex; gap:16px; justify-content:flex-start; flex-wrap:wrap; } .hero-scroll-cue{ position:absolute; left:50%; bottom:34px; transform:translateX(-50%); z-index:4; display:flex; flex-direction:column; align-items:center; gap:8px; font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gray-dim); } .hero-scroll-cue span{ width:1px; height:34px; background:linear-gradient(to bottom, var(--green), transparent); position:relative; overflow:hidden; } .hero-scroll-cue span::after{ content:''; position:absolute; top:-100%; left:0; width:100%; height:100%; background:var(--green-bright); animation:scroll-cue 2.2s ease-in-out infinite; } @keyframes scroll-cue{ 0%{ top:-100%; } 60%{ top:100%; } 100%{ top:100%; } } @media (max-width:860px){ /* Below the 2-column breakpoint the graphic goes back to being a full-bleed background. Kept only lightly dimmed (not blurred) so the mark stays visible behind the text; legibility comes from drop shadows on the text itself plus a lighter, less-blurred card rather than hiding the artwork. */ .hero-scrim{ display:none; } .hero-vignette{ background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(0,0,0,.16), rgba(0,0,0,.56) 100%), linear-gradient(to bottom, rgba(0,0,0,.4) 0%, rgba(0,0,0,.14) 18%, rgba(0,0,0,.14) 72%, #000 100%); } .hero-text{ max-width:none; text-align:center; margin:0 auto; background:rgba(0,0,0,.3); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); border:1px solid rgba(255,255,255,.08); border-radius:22px; padding:36px 22px; box-shadow:0 26px 70px rgba(0,0,0,.5); } .hero-eyebrow{ justify-content:center; text-shadow:0 2px 10px rgba(0,0,0,.95); } .hero-sub{ margin:0 auto 40px; text-shadow:0 2px 16px rgba(0,0,0,.9); } .hero-cta{ justify-content:center; } .hero-title{ text-shadow:0 6px 26px rgba(0,0,0,.95), 0 0 60px rgba(169,201,45,.25); } /* The scroll cue is pinned to the hero's bottom edge; on short mobile viewports the centered text card can grow tall enough to reach it and overlap. It's a decorative hint, not needed here — drop it. */ .hero-scroll-cue{ display:none; } } @media (max-width:640px){ .hero{ min-height:100svh; } .hero-title{ font-size:clamp(2.6rem,12vw,4rem); } .hero-text{ padding:28px 18px; margin:0; } .hero-cta{ flex-direction:column; width:100%; } .hero-cta .btn{ width:100%; } } /* ========================================================= REVEAL ON SCROLL ========================================================= */ .reveal{ opacity:0; transform:translateY(28px); transition:opacity .8s var(--ease), transform .8s var(--ease); } .reveal.is-visible{ opacity:1; transform:translateY(0); } .reveal-stagger > *{ transition-delay:calc(var(--i,0) * 90ms); } /* ========================================================= DIRECT CONTACT STRIP ========================================================= */ .contact-strip{ border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--near-black); } .contact-strip .container{ display:flex; flex-wrap:wrap; gap:22px 56px; justify-content:center; align-items:center; padding:42px 24px; } .contact-strip-item{ display:flex; align-items:center; gap:16px; } .contact-strip-icon{ width:48px; height:48px; border-radius:50%; background:var(--surface); border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center; color:var(--green); flex-shrink:0; } .contact-strip-icon svg{ width:20px; height:20px; } .contact-strip-label{ font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gray-dim); margin-bottom:4px; } .contact-strip-value{ font-weight:700; font-size:.98rem; color:var(--white); line-height:1.3; } .contact-strip-value:hover{ color:var(--green); } .contact-strip .btn{ margin-left:8px; } @media (max-width:700px){ .contact-strip .container{ flex-direction:column; align-items:stretch; gap:0; padding:6px 24px 32px; } .contact-strip-item{ padding:20px 2px; border-bottom:1px solid var(--border); gap:16px; } .contact-strip .btn{ margin:26px 0 0; width:100%; } } /* ========================================================= BRAND INTRO ========================================================= */ .intro-grid{ display:grid; grid-template-columns:1.1fr 1fr; gap:70px; align-items:center; } .intro-mark{ position:relative; display:flex; align-items:center; justify-content:center; aspect-ratio:1; max-width:420px; margin:0 auto; } .intro-mark img{ width:100%; filter:drop-shadow(0 0 60px var(--green-glow)); animation:mark-float 6s ease-in-out infinite; } @keyframes mark-float{ 0%,100%{ transform:translateY(0) rotate(0deg); } 50%{ transform:translateY(-14px) rotate(1.5deg); } } .intro-ring{ position:absolute; inset:0; border:1px solid var(--border); border-radius:50%; animation:spin 40s linear infinite; } .intro-ring::before{ content:''; position:absolute; top:-1px; left:50%; width:6px; height:6px; margin-left:-3px; background:var(--green); border-radius:50%; box-shadow:0 0 14px 3px var(--green-glow); } @keyframes spin{ to{ transform:rotate(360deg); } } .stat-row{ display:flex; gap:36px; margin-top:36px; flex-wrap:wrap; } .stat-row .stat b{ display:block; font-family:var(--font-display); font-size:2rem; color:var(--green); } .stat-row .stat span{ font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gray-dim); } @media (max-width:900px){ .intro-grid{ grid-template-columns:1fr; gap:44px; } .intro-mark{ order:-1; max-width:260px; } } /* ========================================================= EVENT CARDS ========================================================= */ .event-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; } .event-grid.grid-2{ grid-template-columns:repeat(2,1fr); } @media (max-width:980px){ .event-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:640px){ .event-grid, .event-grid.grid-2{ grid-template-columns:1fr; } } .event-card{ position:relative; display:block; border-radius:var(--radius); overflow:hidden; background:var(--surface); border:1px solid var(--border); aspect-ratio:4/5; transition:transform .5s var(--ease), border-color .5s var(--ease); } .event-card:hover{ transform:translateY(-6px); border-color:var(--border-strong); } .event-card .media{ position:absolute; inset:0; } .event-card .media img,.event-card .media video{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease), filter .5s var(--ease); } .event-card:hover .media img,.event-card:hover .media video{ transform:scale(1.08); } .event-card .scrim{ position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.55) 42%, rgba(0,0,0,.05) 75%); } .event-card .badge{ position:absolute; top:16px; left:16px; z-index:2; background:rgba(0,0,0,.6); border:1px solid var(--border-strong); backdrop-filter:blur(6px); padding:6px 12px; border-radius:100px; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--green); } .event-card .badge.status-done{ color:var(--gray); } .event-card .body{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:22px; } .event-card .cat{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--green); margin-bottom:8px; display:block; } .event-card h3{ color:var(--white); margin:0 0 6px; font-size:1.3rem; } .event-card .meta{ font-size:.8rem; color:var(--gray); } .event-card .arrow{ position:absolute; top:16px; right:16px; z-index:2; width:38px; height:38px; border-radius:50%; background:rgba(0,0,0,.55); border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center; transition:background .3s var(--ease), transform .3s var(--ease); } .event-card:hover .arrow{ background:var(--green); transform:rotate(45deg); } .event-card:hover .arrow svg{ stroke:#080a02; } .event-card .arrow svg{ width:16px; height:16px; stroke:var(--white); transition:stroke .3s var(--ease); } .event-card.is-highlight{ aspect-ratio:3/4; } .event-card.is-other{ aspect-ratio:1/1; } /* Coming soon */ .coming-soon-panel{ border:1px dashed var(--border-strong); border-radius:var(--radius); padding:64px 32px; text-align:center; background: radial-gradient(ellipse 60% 100% at 50% 0%, rgba(169,201,45,.06), transparent 70%), var(--near-black); } .coming-soon-panel .tag{ display:inline-block; padding:8px 18px; border-radius:100px; border:1px solid var(--green-dim); color:var(--green); font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; margin-bottom:22px; } .coming-soon-panel h3{ font-size:clamp(1.6rem,3vw,2.3rem); color:var(--white); margin-bottom:14px; } .coming-soon-panel p{ max-width:480px; margin:0 auto; } .pulse-dot{ display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--green); margin-right:8px; animation:pulse 1.8s ease-in-out infinite; } @keyframes pulse{ 0%,100%{ opacity:1; box-shadow:0 0 0 0 var(--green-glow); } 50%{ opacity:.5; box-shadow:0 0 0 8px transparent; } } /* ========================================================= WHY TOXIC SPIRIT ========================================================= */ .why-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; } @media (max-width:980px){ .why-grid{ grid-template-columns:repeat(2,1fr); } } @media (max-width:560px){ .why-grid{ grid-template-columns:1fr; } } .why-card{ padding:32px 26px; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); transition:border-color .4s var(--ease), transform .4s var(--ease), background .4s var(--ease); } .why-card:hover{ border-color:var(--green-dim); transform:translateY(-4px); background:var(--surface-2); } .why-icon{ width:52px; height:52px; border-radius:12px; background:rgba(169,201,45,.1); border:1px solid var(--green-dim); display:flex; align-items:center; justify-content:center; color:var(--green); margin-bottom:20px; } .why-icon svg{ width:24px; height:24px; } .why-card h3{ font-size:1.15rem; color:var(--white); margin-bottom:10px; text-transform:none; font-family:var(--font-body); font-weight:700; } .why-card p{ font-size:.92rem; } /* ========================================================= GALLERY / LIGHTBOX ========================================================= */ .gallery-grid{ columns:4 260px; column-gap:16px; } @media (max-width:900px){ .gallery-grid{ columns:3 200px; } } @media (max-width:560px){ .gallery-grid{ columns:2 140px; } } .gallery-item{ break-inside:avoid; margin-bottom:16px; border-radius:10px; overflow:hidden; position:relative; border:1px solid var(--border); cursor:zoom-in; background:var(--surface); } .gallery-item img{ width:100%; display:block; transition:transform .6s var(--ease); } .gallery-item:hover img{ transform:scale(1.06); } .gallery-item .gi-tag{ position:absolute; left:10px; bottom:10px; font-size:.65rem; letter-spacing:.08em; text-transform:uppercase; background:rgba(0,0,0,.6); border:1px solid var(--border-strong); padding:4px 10px; border-radius:100px; color:var(--green); opacity:0; transition:opacity .3s var(--ease); } .gallery-item:hover .gi-tag{ opacity:1; } .filter-bar{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:40px; } .filter-chip{ padding:9px 18px; border-radius:100px; border:1px solid var(--border-strong); font-size:.78rem; letter-spacing:.05em; text-transform:uppercase; color:var(--gray); background:transparent; transition:all .3s var(--ease); } .filter-chip:hover{ color:var(--white); border-color:var(--green-dim); } .filter-chip.is-active{ background:var(--green); color:#080a02; border-color:var(--green); } .lightbox{ position:fixed; inset:0; z-index:1000; background:rgba(0,0,0,.94); display:none; align-items:center; justify-content:center; padding:40px; backdrop-filter:blur(6px); } .lightbox.is-open{ display:flex; } .lightbox img{ max-width:min(1100px,92vw); max-height:86vh; border-radius:8px; box-shadow:0 30px 90px rgba(0,0,0,.6); } .lightbox-close,.lightbox-prev,.lightbox-next{ position:absolute; background:rgba(255,255,255,.06); border:1px solid var(--border-strong); border-radius:50%; width:48px; height:48px; display:flex; align-items:center; justify-content:center; color:var(--white); transition:background .3s var(--ease), border-color .3s var(--ease); } .lightbox-close:hover,.lightbox-prev:hover,.lightbox-next:hover{ background:var(--green); color:#080a02; border-color:var(--green); } .lightbox-close{ top:24px; right:24px; } .lightbox-prev{ left:24px; top:50%; transform:translateY(-50%); } .lightbox-next{ right:24px; top:50%; transform:translateY(-50%); } @media (max-width:640px){ .lightbox-prev,.lightbox-next{ width:40px; height:40px; } .lightbox{ padding:16px; } } /* ========================================================= EVENT DETAIL PAGE ========================================================= */ .event-hero{ position:relative; min-height:64vh; display:flex; align-items:flex-end; overflow:hidden; margin-top:0; } .event-hero .media{ position:absolute; inset:0; } .event-hero .media img,.event-hero .media video{ width:100%; height:100%; object-fit:cover; } .event-hero .scrim{ position:absolute; inset:0; background:linear-gradient(to top, #000 2%, rgba(0,0,0,.65) 40%, rgba(0,0,0,.35) 70%, rgba(0,0,0,.55) 100%); } .event-hero-content{ position:relative; z-index:2; padding:140px 0 56px; width:100%; } .event-crumb{ font-size:.8rem; color:var(--gray-dim); margin-bottom:18px; } .event-crumb a:hover{ color:var(--green); } .event-tags{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:18px; } .event-tag{ padding:6px 14px; border-radius:100px; background:rgba(0,0,0,.5); border:1px solid var(--border-strong); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--green); } .event-hero h1{ font-size:clamp(2.2rem,5.5vw,4.4rem); color:var(--white); max-width:900px; } .event-meta-bar{ display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:var(--near-black); } .event-meta-bar .m{ padding:24px; border-right:1px solid var(--border); } .event-meta-bar .m:last-child{ border-right:none; } .event-meta-bar .m label{ display:block; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gray-dim); margin-bottom:6px; } .event-meta-bar .m span{ font-weight:700; color:var(--white); font-size:.98rem; } @media (max-width:768px){ .event-meta-bar{ grid-template-columns:repeat(2,1fr); } .event-meta-bar .m:nth-child(2n){ border-right:none; } .event-meta-bar .m{ border-bottom:1px solid var(--border); } } .event-body-grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:64px; } @media (max-width:900px){ .event-body-grid{ grid-template-columns:1fr; } } .highlight-list li{ display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--border); color:var(--gray); } .highlight-list li::before{ content:'▸'; color:var(--green); flex-shrink:0; } .side-card{ border:1px solid var(--border); border-radius:var(--radius); padding:28px; background:var(--surface); position:sticky; top:110px; } .side-card h3{ font-size:1.1rem; text-transform:none; font-family:var(--font-body); font-weight:700; margin-bottom:16px; } .side-card .btn{ margin-top:8px; } .media-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:16px; } .media-grid a{ display:block; border-radius:10px; overflow:hidden; border:1px solid var(--border); aspect-ratio:1; position:relative; } .media-grid a img{ width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease); } .media-grid a:hover img{ transform:scale(1.08); } @media (max-width:640px){ .media-grid{ grid-template-columns:repeat(2,1fr); } } .event-video-wrap{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); margin-top:16px; background:#000; } .event-video-wrap video{ width:100%; display:block; } .event-nav-links{ display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--border); padding-top:32px; margin-top:20px; flex-wrap:wrap; } .event-nav-links a{ font-weight:700; color:var(--gray); } .event-nav-links a:hover{ color:var(--green); } /* ========================================================= CTA BAND ========================================================= */ .cta-band{ position:relative; border-radius:24px; overflow:hidden; padding:80px 40px; text-align:center; background: radial-gradient(ellipse 70% 100% at 50% 0%, rgba(169,201,45,.16), transparent 70%), var(--near-black); border:1px solid var(--border); } .cta-band h2{ margin-bottom:18px; } .cta-band p{ max-width:540px; margin:0 auto 34px; } .cta-band .btn-row{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; } /* ========================================================= FORMS ========================================================= */ .form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; } @media (max-width:640px){ .form-grid{ grid-template-columns:1fr; } } .field{ display:flex; flex-direction:column; gap:8px; } .field.full{ grid-column:1 / -1; } .field label{ font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--gray); } .field label .req{ color:var(--green); } .field input,.field select,.field textarea{ background:var(--surface); border:1px solid var(--border-strong); border-radius:10px; padding:14px 16px; color:var(--white); transition:border-color .3s var(--ease), background .3s var(--ease); } .field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--green); background:var(--surface-2); outline:none; } .field textarea{ resize:vertical; min-height:130px; } .field-hint{ font-size:.76rem; color:var(--gray-dim); } .form-note{ font-size:.8rem; color:var(--gray-dim); margin-top:18px; } .form-status{ margin-top:18px; padding:14px 16px; border-radius:10px; font-size:.9rem; display:none; } .form-status.ok{ display:block; background:rgba(169,201,45,.12); border:1px solid var(--green-dim); color:var(--green-bright); } .form-status.err{ display:block; background:rgba(255,90,90,.1); border:1px solid rgba(255,90,90,.4); color:#ff9b9b; } .contact-page-grid{ display:grid; grid-template-columns:1fr 1.25fr; gap:64px; } @media (max-width:900px){ .contact-page-grid{ grid-template-columns:1fr; } } .contact-info-card{ border:1px solid var(--border); border-radius:var(--radius); padding:32px; background:var(--surface); margin-bottom:20px; } .contact-info-card h3{ font-size:1rem; text-transform:none; font-family:var(--font-body); font-weight:700; margin-bottom:4px; } .contact-info-card a{ color:var(--green); font-weight:600; } .faq-item{ border-bottom:1px solid var(--border); padding:20px 0; } .faq-item h4{ font-size:1rem; color:var(--white); margin-bottom:8px; text-transform:none; font-family:var(--font-body); } .faq-item p{ font-size:.92rem; } /* ========================================================= ABOUT PAGE ========================================================= */ .about-hero{ padding:150px 0 40px; text-align:center; } .owner-card{ display:flex; gap:28px; align-items:center; border:1px solid var(--border); border-radius:var(--radius); padding:30px; background:var(--surface); } .owner-avatar{ width:88px; height:88px; border-radius:50%; background:radial-gradient(circle at 30% 30%, var(--surface-2), #000); border:1px solid var(--green-dim); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-family:var(--font-display); font-size:1.8rem; color:var(--green); } .value-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } @media (max-width:768px){ .value-grid{ grid-template-columns:1fr; } .about-hero{ padding:130px 0 30px; } } /* ========================================================= LEGAL PAGES ========================================================= */ .legal-content{ max-width:820px; margin:0 auto; padding-top:150px; } .legal-content h2{ font-size:1.5rem; margin-top:46px; margin-bottom:14px; text-transform:none; font-family:var(--font-body); font-weight:800; } .legal-content h2:first-child{ margin-top:0; } .legal-content p,.legal-content li{ color:var(--gray); margin-bottom:14px; font-size:.98rem; } .legal-content ul{ padding-left:20px; list-style:disc; } .legal-content .updated{ color:var(--gray-dim); font-size:.85rem; margin-bottom:40px; display:block; } /* ========================================================= PAGE HERO (non-home pages) ========================================================= */ .page-hero{ padding:158px 0 60px; text-align:center; position:relative; overflow:hidden; background:radial-gradient(ellipse 60% 60% at 50% 0%, rgba(169,201,45,.1), transparent 70%); } .page-hero h1{ font-size:clamp(2.4rem,6vw,4.4rem); } .page-hero p{ max-width:560px; margin:16px auto 0; } /* ========================================================= FOOTER ========================================================= */ .site-footer{ border-top:1px solid var(--border); padding:70px 0 30px; background:var(--near-black); } .footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:50px; margin-bottom:50px; } @media (max-width:768px){ .footer-grid{ grid-template-columns:1fr; gap:36px; } } .footer-brand img{ height:40px; margin-bottom:16px; } .footer-brand p{ max-width:320px; font-size:.9rem; } .footer-col h4{ font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--gray-dim); margin-bottom:18px; font-family:var(--font-body); font-weight:700; } .footer-col li{ margin-bottom:12px; } .footer-col a{ color:var(--gray); font-size:.92rem; } .footer-col a:hover{ color:var(--green); } .footer-bottom{ border-top:1px solid var(--border); padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; font-size:.8rem; color:var(--gray-dim); } .footer-bottom a:hover{ color:var(--green); } /* ========================================================= FLOATING WHATSAPP ========================================================= */ .whatsapp-fab{ position:fixed; right:22px; bottom:22px; z-index:200; width:60px; height:60px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 30px -6px rgba(0,0,0,.6); transition:transform .3s var(--ease); animation:wa-pop .5s var(--ease) .6s both; } .whatsapp-fab:hover{ transform:scale(1.08); } .whatsapp-fab::before{ content:''; position:absolute; inset:0; border-radius:50%; background:#25D366; opacity:.5; animation:wa-ring 2.2s ease-out infinite; } .whatsapp-fab svg{ width:30px; height:30px; position:relative; z-index:1; fill:#fff; } @keyframes wa-ring{ 0%{ transform:scale(1); opacity:.5; } 100%{ transform:scale(1.7); opacity:0; } } @keyframes wa-pop{ from{ transform:scale(0); opacity:0; } to{ transform:scale(1); opacity:1; } } @media (max-width:640px){ .whatsapp-fab{ width:52px; height:52px; right:16px; bottom:16px; } .whatsapp-fab svg{ width:26px; height:26px; } } /* ========================================================= SKIP LINK / MISC ========================================================= */ .skip-link{ position:absolute; left:-999px; top:auto; background:var(--green); color:#000; padding:14px 20px; z-index:1000; border-radius:0 0 8px 0; font-weight:700; } .skip-link:focus{ left:0; top:0; } .divider-fade{ height:1px; background:linear-gradient(to right, transparent, var(--border), transparent); } .badge-completed{ display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:100px; border:1px solid var(--border-strong); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--gray); } .badge-completed svg{ width:12px; height:12px; color:var(--green); } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } .reveal{ opacity:1; transform:none; } html{ scroll-behavior:auto; } } /* Utility */ .mt-0{ margin-top:0; } .center-text{ text-align:center; } .flex-between{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:16px; }