/* ========================================================= CAMPOUT 2026 — shared styles Campfire-at-dusk aesthetic for Campfire Convention ========================================================= */ :root{ --night:#140d09; --night-2:#1d140d; --night-3:#251a11; --cream:#f6ead6; --cream-dim:#d8c6ab; --ember:#ff8a3a; --flame:#ffc15e; --coal:#e0492a; --sage:#9bb089; --line:rgba(246,234,214,.14); --maxw:1180px; --measure:760px; --ease:cubic-bezier(.22,1,.36,1); } /* ── Day mode ── applied when data-theme="day" is on ──────────────── */ [data-theme="day"]{ --night:#f7f2ea; --night-2:#ede5d8; --night-3:#e4dace; --cream:#2a1a0a; --cream-dim:#5a3e28; --flame:#c44d0a; --coal:#b83d08; --ember:#e05e10; --line:rgba(42,26,10,.14); } /* transition everything smoothly */ html{transition:background .8s ease,color .8s ease} body,header,.hdr,.page-hero .hero-bg,.return,.principles,.cta-band, footer,.p-card,.quote,.qc,.allow-card,.fact,.menu-block,.venue-card, .lu-list li,.lu-music li,.cl-list li,.blend-tags span,.chip, .faq summary,.faq .body,.checklist-grid,.cl-tips{ transition:background .8s ease,color .8s ease,border-color .8s ease,box-shadow .8s ease; } /* day-specific overrides for hardcoded dark values */ [data-theme="day"] body{background:#f7f2ea;color:#2a1a0a} [data-theme="day"] header{background:rgba(247,242,234,.92)!important;border-bottom:1px solid rgba(42,26,10,.12)} [data-theme="day"] .hero-bg{background: radial-gradient(120% 80% at 50% 118%,rgba(255,160,60,.25),transparent 60%), linear-gradient(180deg,rgba(240,232,218,.55) 0%,rgba(232,221,208,.65) 45%,rgba(221,210,192,.75) 100%), url('willow-hero.jpg') center 30% / cover no-repeat!important;} [data-theme="day"] .page-hero{background:linear-gradient(180deg,#e8ddd0,#ddd2c0)!important} [data-theme="day"] .return{background:linear-gradient(180deg,#ddd2c0,#d5c9b5)!important} [data-theme="day"] .principles{background:linear-gradient(180deg,#ece4d5,#e6ddd0)!important} /* cta-band day override moved to bottom */ [data-theme="day"] footer{background:#e4dace!important;border-top:1px solid rgba(42,26,10,.14)} [data-theme="day"] .p-card{background:#ede5d8} [data-theme="day"] .p-card:hover{background:#e4dace} [data-theme="day"] .quote,[data-theme="day"] .qc{background:rgba(42,26,10,.04);border-color:rgba(42,26,10,.12)} [data-theme="day"] .allow-card,[data-theme="day"] .fact,[data-theme="day"] .menu-block{background:rgba(42,26,10,.04);border-color:rgba(42,26,10,.12)} [data-theme="day"] .venue-card{background:rgba(42,26,10,.04);border-color:rgba(42,26,10,.12)} [data-theme="day"] figure{background:#ede5d8;border-color:rgba(42,26,10,.14);box-shadow:0 30px 60px -30px rgba(42,26,10,.15)} [data-theme="day"] .nav-links a{color:#5a3e28} [data-theme="day"] .nav-links a:hover,[data-theme="day"] .nav-links a.active{color:#2a1a0a} [data-theme="day"] .brand{color:#2a1a0a} [data-theme="day"] .hills path{fill:#ddd2c0} [data-theme="day"] .timeline::before{background:linear-gradient(rgba(180,90,20,.5),rgba(42,26,10,.1))} [data-theme="day"] .tl-item .yr{color:var(--coal)} [data-theme="day"] .tl-item h3{color:#1a0e06} [data-theme="day"] .tl-item p{color:#4a2e18} [data-theme="day"] .tl-item p .hl{color:#1a0e06} [data-theme="day"] .faq summary{border-color:rgba(42,26,10,.12);color:#1a0e06} [data-theme="day"] .faq summary:hover{color:var(--coal)} [data-theme="day"] .faq details[open] summary{color:var(--coal)} [data-theme="day"] .faq .body{border-color:rgba(42,26,10,.08);color:#4a2e18} [data-theme="day"] .lu-list li,[data-theme="day"] .lu-music li,[data-theme="day"] .cl-list li{border-bottom-color:rgba(42,26,10,.1)} [data-theme="day"] .cl-tips{background:rgba(196,77,10,.08);border-color:rgba(196,77,10,.2)} [data-theme="day"] .rumi-section{background:rgba(196,77,10,.06);border-color:rgba(196,77,10,.18)} [data-theme="day"] .lineup{background:linear-gradient(180deg,rgba(196,77,10,.05) 0%,transparent 100%)} [data-theme="day"] .crew-voices{background:rgba(42,26,10,.02)} [data-theme="day"] .nav-links{background:rgba(247,242,234,.98)!important} [data-theme="day"] #flames{opacity:.08} [data-theme="day"] #embers{opacity:.25} [data-theme="day"] .hero h1,[data-theme="day"] .inner h1{color:#2a1a0a} [data-theme="day"] .hero .sub,[data-theme="day"] .inner .sub{color:#5a3e28} [data-theme="day"] .hero .meta{color:#5a3e28} [data-theme="day"] .yt-facade{border-color:rgba(42,26,10,.14)} *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{ background:var(--night); color:var(--cream); font-family:"Hanken Grotesk",sans-serif; font-weight:400;line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden;position:relative; } body::after{ content:"";position:fixed;inset:0;pointer-events:none;z-index:9999; opacity:.05;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } ::selection{background:var(--coal);color:var(--cream)} a{color:inherit;text-decoration:none} img{display:block;max-width:100%} h1,h2,h3,h4{font-family:"Fraunces",serif;font-weight:500;line-height:1.05;letter-spacing:-.01em} .serif{font-family:"Fraunces",serif} .italic{font-style:italic} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px} .narrow{max-width:var(--measure);margin-left:auto;margin-right:auto} /* ---------- BUTTONS ---------- */ .btn{ font-family:"Hanken Grotesk",sans-serif;font-weight:600;font-size:.85rem; letter-spacing:.04em;text-transform:uppercase; padding:13px 26px;border-radius:100px; background:linear-gradient(120deg,var(--coal),var(--ember)); color:#fff;box-shadow:0 6px 26px -8px rgba(224,73,42,.8); transition:transform .25s var(--ease),box-shadow .25s; border:none;cursor:pointer;display:inline-block; } .btn:hover{transform:translateY(-2px);box-shadow:0 10px 34px -8px rgba(255,140,58,.9)} .btn.ghost{background:transparent;border:1px solid var(--line);color:var(--cream);box-shadow:none} .btn.ghost:hover{border-color:var(--flame);background:rgba(255,140,58,.08)} .btn.sm{padding:10px 20px;font-size:.78rem} /* ---------- NAV ---------- */ header{ position:fixed;top:0;left:0;right:0;z-index:100; transition:background .4s var(--ease),backdrop-filter .4s,border-color .4s; border-bottom:1px solid transparent; } header.scrolled,header.solid{ background:rgba(20,13,9,.85);backdrop-filter:blur(14px); border-bottom:1px solid var(--line); } .nav{display:flex;align-items:center;justify-content:space-between;height:74px} .brand{display:flex;align-items:center;gap:11px;font-family:"Fraunces",serif;font-size:1.32rem;font-weight:600;letter-spacing:.01em} .brand-tents{ width:26px;height:20px;flex-shrink:0; filter:drop-shadow(0 0 6px rgba(255,140,58,.5)); animation:flick 3s ease-in-out infinite; } @keyframes flick{0%,100%{transform:scale(1);opacity:.92}50%{transform:scale(1.06);opacity:1}} .nav-links{display:flex;align-items:center;gap:28px} .nav-links a{font-size:1rem;letter-spacing:.02em;color:var(--cream-dim);transition:color .25s;position:relative} .nav-links a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-5px;width:0;height:1px;background:var(--flame);transition:width .3s var(--ease)} .nav-links a:not(.btn):hover,.nav-links a.active{color:var(--cream)} .nav-links a.active::after{width:100%} .nav-links a:not(.btn):hover::after{width:100%} .menu-toggle{display:none;background:none;border:none;color:var(--cream);font-size:1.5rem;cursor:pointer} /* ---------- HERO (home) ---------- */ .hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden} .hero-bg{ position:absolute;inset:0;z-index:0; background: radial-gradient(120% 80% at 50% 118%,rgba(255,160,60,.55),rgba(224,73,42,.18) 36%,transparent 60%), radial-gradient(90% 60% at 50% 130%,rgba(255,200,90,.5),transparent 55%), linear-gradient(180deg,#0d0805 0%,#170f09 45%,#241509 100%); } #flames{position:absolute;inset:0;z-index:0;pointer-events:none} #embers{position:absolute;inset:0;z-index:1;pointer-events:none} .hills{position:absolute;left:0;right:0;bottom:0;z-index:1;width:100%;height:auto} .hero-inner{position:relative;z-index:3;width:100%;padding-top:74px} .hero-logo{width:clamp(80px,11vw,112px);height:auto;margin-bottom:30px;border-radius:50%;filter:drop-shadow(0 8px 30px rgba(255,140,58,.5));opacity:0;transform:translateY(20px) scale(.88);animation:rise .9s var(--ease) .05s forwards} .eyebrow{ display:inline-flex;align-items:center;gap:10px;font-size:.8rem;letter-spacing:.32em; text-transform:uppercase;color:var(--flame);margin-bottom:26px; } .eyebrow::before{content:"";width:30px;height:1px;background:var(--flame)} .hero h1{font-size:clamp(3.4rem,13vw,11rem);font-weight:600;letter-spacing:-.03em;line-height:.86;margin-bottom:6px} .hero h1 .yr{font-style:italic;font-weight:300;color:var(--flame)} .hero .lede{font-family:"Fraunces",serif;font-style:italic;font-weight:300;font-size:clamp(1.25rem,3vw,2rem);max-width:30ch;margin:38px 0 6px;line-height:1.25} .hero .meta{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;margin-top:30px;font-size:1.18rem;color:var(--cream-dim)} .hero .meta b{color:var(--cream);font-weight:600} .hero .meta .dot{width:5px;height:5px;border-radius:50%;background:var(--coal)} .hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px} .scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:3;font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;color:var(--cream-dim);display:flex;flex-direction:column;align-items:center;gap:8px} .scroll-hint span{width:1px;height:34px;background:linear-gradient(var(--flame),transparent);animation:drop 1.8s ease-in-out infinite} @keyframes drop{0%{transform:scaleY(.3);transform-origin:top}50%{transform:scaleY(1)}100%{transform:scaleY(.3);transform-origin:bottom}} /* hero entrance */ .hero .eyebrow,.hero h1,.hero .lede,.hero .meta,.hero-cta{opacity:0;transform:translateY(20px)} .hero .eyebrow{animation:rise .9s var(--ease) .15s forwards} .hero h1{animation:rise 1s var(--ease) .28s forwards} .hero .lede{animation:rise 1s var(--ease) .46s forwards} .hero .meta{animation:rise 1s var(--ease) .6s forwards} .hero-cta{animation:rise 1s var(--ease) .72s forwards} .scroll-hint{opacity:0;animation:rise 1s ease 1.4s forwards} @keyframes rise{to{opacity:1;transform:translateY(0)}} /* ---------- PAGE HERO (subpages) ---------- */ .page-hero{position:relative;padding:150px 0 70px;overflow:hidden} .page-hero .hero-bg{background: radial-gradient(120% 90% at 80% 0%,rgba(255,150,55,.28),transparent 55%), linear-gradient(180deg,#0d0805,#1d140d);} .page-hero #embers{opacity:.7} .page-hero .inner{position:relative;z-index:3} .page-hero .hero-logo{width:clamp(64px,8vw,84px);margin-bottom:22px} .crumb{font-size:.78rem;letter-spacing:.28em;text-transform:uppercase;color:var(--flame);margin-bottom:18px;display:flex;align-items:center;gap:10px} .crumb::before{content:"";width:26px;height:1px;background:var(--flame)} .page-hero h1{font-size:clamp(2.6rem,7vw,5.2rem);font-weight:600;letter-spacing:-.025em} .page-hero p.sub{font-family:"Fraunces",serif;font-style:italic;font-weight:300;font-size:clamp(1.15rem,2.4vw,1.7rem);color:var(--cream-dim);margin-top:18px;max-width:46ch} /* ---------- SECTIONS / GENERIC ---------- */ section{position:relative;z-index:2} .pad{padding:clamp(70px,11vw,140px) 0} .pad-sm{padding:clamp(48px,7vw,80px) 0} .section-tag{font-size:.92rem;letter-spacing:.22em;text-transform:uppercase;color:var(--coal);display:flex;align-items:center;gap:12px;margin-bottom:22px;font-weight:700} .section-tag::before{content:"";width:24px;height:1px;background:var(--coal)} .section-tag.center{justify-content:center} h2.big{font-size:clamp(2.6rem,6.5vw,5rem);font-weight:500;letter-spacing:-.02em;line-height:1.02} .reveal{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)} .reveal.in{opacity:1;transform:none} /* prose */ .prose p{font-size:1.1rem;color:var(--cream-dim);margin:0 0 22px;max-width:var(--measure)} .prose p .hl{color:var(--cream);font-family:"Fraunces",serif;font-style:italic} .prose h3{font-size:1.7rem;margin:46px 0 16px;color:var(--cream)} .prose strong,.prose b{color:var(--cream);font-weight:600} .prose a{color:var(--flame);border-bottom:1px solid rgba(255,193,94,.35);transition:border-color .25s} .prose a:hover{border-color:var(--flame)} .lead-p{font-family:"Fraunces",serif;font-size:clamp(1.3rem,3vw,1.9rem);font-weight:300;line-height:1.35;color:var(--cream);max-width:26ch} /* figure / images */ figure{margin:42px 0;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:var(--night-2);box-shadow:0 30px 60px -30px rgba(0,0,0,.7)} figure img{width:100%;height:auto;display:block} figure figcaption{font-size:.85rem;color:var(--cream-dim);padding:14px 18px;letter-spacing:.02em} .img-tall{max-width:520px;margin-left:auto;margin-right:auto} /* click-to-play YouTube facade */ .yt-facade{position:relative;width:100%;aspect-ratio:16/9;border-radius:18px;overflow:hidden;border:1px solid var(--line);background:#000;box-shadow:0 30px 60px -30px rgba(0,0,0,.7);margin:18px 0 0;cursor:pointer} .yt-facade .yt-thumb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform .5s var(--ease),opacity .4s} .yt-facade::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(circle at 50% 45%,rgba(0,0,0,.1),rgba(13,8,5,.55));transition:opacity .3s} .yt-facade:hover .yt-thumb{transform:scale(1.04);opacity:.9} .yt-facade .yt-play{position:absolute;top:50%;left:50%;z-index:2;transform:translate(-50%,-50%);width:76px;height:76px;border-radius:50%;background:rgba(224,73,42,.94);box-shadow:0 10px 34px -6px rgba(224,73,42,.9);transition:transform .3s var(--ease),background .3s} .yt-facade .yt-play::after{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);border-style:solid;border-width:13px 0 13px 22px;border-color:transparent transparent transparent #fff} .yt-facade:hover .yt-play{transform:translate(-50%,-50%) scale(1.1);background:var(--ember)} .yt-facade:focus-visible{outline:2px solid var(--flame);outline-offset:3px} .yt-facade iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:3} .yt-facade.playing::before,.yt-facade.playing .yt-play{display:none} .video-cap{font-size:.85rem;color:var(--cream-dim);margin-top:10px;letter-spacing:.02em;font-style:italic} .video-cap a{color:var(--flame);font-style:normal;border-bottom:1px solid rgba(255,193,94,.35)} .video-cap a:hover{border-color:var(--flame)} /* RETURN / venue */ .return{background:linear-gradient(180deg,#241509,#1a110a)} .return-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center} .return-grid p{font-size:1.12rem;color:var(--cream-dim);margin-top:22px;max-width:52ch} .return-grid p .hl{color:var(--cream);font-style:italic;font-family:"Fraunces",serif} .venue-card{border:1px solid var(--line);border-radius:20px;padding:34px;background:radial-gradient(140% 120% at 100% 0%,rgba(255,140,58,.1),transparent 55%),rgba(255,255,255,.02);backdrop-filter:blur(4px)} .venue-card h3{font-size:1.5rem;margin-bottom:6px} .venue-card .place{color:var(--flame);font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:20px} .venue-card ul{list-style:none;display:flex;flex-direction:column;gap:14px;margin-top:18px} .venue-card li{display:flex;gap:13px;font-size:.98rem;color:var(--cream-dim);align-items:flex-start} .venue-card li::before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:50%;margin-top:9px;background:radial-gradient(circle at 40% 35%,var(--flame),var(--coal))} /* feature image band */ .feature-img{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--line);box-shadow:0 40px 80px -40px rgba(0,0,0,.8)} .feature-img img{width:100%;height:clamp(280px,46vw,560px);object-fit:cover} .feature-img .cap{position:absolute;left:0;right:0;bottom:0;padding:60px 34px 26px;background:linear-gradient(transparent,rgba(13,8,5,.9));font-family:"Fraunces",serif;font-style:italic;font-size:1.2rem} /* THE BLEND */ .blend{text-align:center} .blend .intro{max-width:62ch;margin:0 auto;font-size:1.15rem;color:var(--cream-dim)} .blend-cloud{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:50px} .blend-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:50px} .chip,.blend-tags span{font-family:"Fraunces",serif;font-size:clamp(.88rem,1.7vw,1.25rem);font-weight:400;padding:8px 20px;border-radius:100px;cursor:default;user-select:none;pointer-events:none} .chip:nth-child(7n+1),.blend-tags span:nth-child(7n+1){background:rgba(255,120,40,.18);color:#ffb87a;border:1px solid rgba(255,120,40,.30)} .chip:nth-child(7n+2),.blend-tags span:nth-child(7n+2){background:rgba(255,200,60,.14);color:#ffd97a;border:1px solid rgba(255,200,60,.28)} .chip:nth-child(7n+3),.blend-tags span:nth-child(7n+3){background:rgba(180,120,255,.14);color:#c9a0f5;border:1px solid rgba(180,120,255,.28)} .chip:nth-child(7n+4),.blend-tags span:nth-child(7n+4){background:rgba(80,200,160,.13);color:#7dd9bc;border:1px solid rgba(80,200,160,.26)} .chip:nth-child(7n+5),.blend-tags span:nth-child(7n+5){background:rgba(255,140,58,.18);color:#ffaa70;border:1px solid rgba(255,140,58,.30)} .chip:nth-child(7n+6),.blend-tags span:nth-child(7n+6){background:rgba(100,180,255,.13);color:#90c8f8;border:1px solid rgba(100,180,255,.26)} .chip:nth-child(7n+0),.blend-tags span:nth-child(7n+0){background:rgba(255,160,100,.15);color:#ffc490;border:1px solid rgba(255,160,100,.28)} .blend .closer{margin-top:54px;font-family:"Fraunces",serif;font-style:italic;font-size:clamp(1.4rem,3.4vw,2.3rem);font-weight:300;max-width:24ch;margin:54px auto 0;line-height:1.2;color:var(--cream)} /* PRINCIPLES */ .principles{background:linear-gradient(180deg,#1a110a,#211609)} .p-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:56px;background:var(--line);border:1px solid var(--line);border-radius:18px;overflow:hidden} .p-card{background:var(--night-2);padding:40px 34px;transition:background .4s var(--ease)} .p-card:hover{background:var(--night-3)} .p-card .num{font-family:"Fraunces",serif;font-size:.85rem;color:var(--coal);letter-spacing:.1em} .p-card h3{font-size:1.75rem;margin:14px 0 14px;letter-spacing:.02em} .p-card h3 .ce{color:var(--flame)} .p-card p{font-size:.96rem;color:var(--cream-dim);line-height:1.6} /* THEMES / days */ .themes-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:54px} .day{border-top:2px solid var(--line);padding-top:22px;transition:border-color .4s} .day:hover{border-color:var(--flame)} .day .d{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--flame);margin-bottom:10px} .day h4{font-family:"Fraunces",serif;font-size:1.3rem;font-weight:500;margin-bottom:12px;line-height:1.12} .day p{font-size:.92rem;color:var(--cream-dim)} .day .key{margin-top:14px;font-size:.82rem;color:var(--sage);font-style:italic} /* TESTIMONIALS marquee */ .voices{overflow:hidden} .marquee{display:flex;gap:22px;width:max-content;animation:slide 60s linear infinite} .marquee:hover{animation-play-state:paused} .quote{flex:0 0 auto;width:340px;border:1px solid var(--line);border-radius:18px;padding:30px;background:rgba(255,255,255,.02)} .quote p{font-family:"Fraunces",serif;font-style:italic;font-size:1.15rem;line-height:1.4;color:var(--cream)} .quote .who{margin-top:18px;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;color:var(--flame)} @keyframes slide{to{transform:translateX(-50%)}} /* quote grid (static) */ .quote-grid{columns:3;column-gap:22px;margin-top:46px} .quote-grid .qc{break-inside:avoid;margin-bottom:22px;border:1px solid var(--line);border-radius:16px;padding:26px;background:rgba(255,255,255,.02)} .quote-grid .qc p{font-family:"Fraunces",serif;font-style:italic;font-size:1.05rem;line-height:1.45;color:var(--cream)} .quote-grid .qc .who{margin-top:14px;font-size:.78rem;letter-spacing:.07em;text-transform:uppercase;color:var(--flame)} /* GET INVOLVED */ .involve{background:linear-gradient(180deg,#211609,#160e08)} .involve-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:50px} .inv-card{border:1px solid var(--line);border-radius:20px;padding:42px;background:radial-gradient(130% 130% at 0% 0%,rgba(255,140,58,.08),transparent 50%);transition:transform .4s var(--ease),border-color .4s} .inv-card:hover{transform:translateY(-5px);border-color:rgba(255,140,58,.4)} .inv-card h3{font-size:1.7rem;margin-bottom:14px;color:#f6ead6} .inv-card p{color:#d8c6ab;margin-bottom:26px} /* CTA band */ .cta-band{text-align:center;background:radial-gradient(100% 140% at 50% 100%,rgba(255,150,55,.3),transparent 60%),linear-gradient(180deg,#160e08,#0d0805)} .cta-band h2{font-size:clamp(2.4rem,7vw,5.5rem);font-weight:600;letter-spacing:-.025em;line-height:.95;color:#f6ead6} .cta-band h2 em{font-style:italic;font-weight:300;color:var(--flame)} .cta-band p{font-family:"Fraunces",serif;font-style:italic;font-size:1.3rem;color:#d8c6ab;margin:22px auto 38px;max-width:30ch} .namaste{margin-top:54px;font-size:.85rem;letter-spacing:.1em;color:var(--cream-dim)} .namaste em{font-style:italic;color:var(--flame)} /* TIMELINE (history) */ .timeline{position:relative;margin-top:30px} .timeline::before{content:"";position:absolute;left:11px;top:8px;bottom:0;width:2px;background:linear-gradient(var(--coal),var(--line))} .tl-item{position:relative;padding:0 0 64px 52px} .tl-item::before{content:"";position:absolute;left:3px;top:6px;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 40% 35%,var(--flame),var(--coal));box-shadow:0 0 14px 2px rgba(255,140,58,.6)} .tl-item .yr{font-family:"Fraunces",serif;font-size:1.9rem;font-weight:500;color:var(--flame);line-height:1;margin-bottom:6px} .tl-item h3{font-size:1.45rem;margin:6px 0 14px;color:var(--cream)} .tl-item p{color:var(--cream-dim);margin-bottom:16px;max-width:60ch} .tl-item p .hl{color:var(--cream);font-style:italic;font-family:"Fraunces",serif} /* FAQ accordion */ .faq{border-top:1px solid var(--line)} .faq details{border-bottom:1px solid var(--line)} .faq summary{list-style:none;cursor:pointer;padding:24px 0;display:flex;justify-content:space-between;align-items:center;gap:20px;font-family:"Fraunces",serif;font-size:1.25rem;font-weight:500;color:var(--cream);transition:color .25s} .faq summary::-webkit-details-marker{display:none} .faq summary:hover{color:var(--flame)} .faq summary .plus{flex:0 0 auto;width:26px;height:26px;position:relative;transition:transform .35s var(--ease)} .faq summary .plus::before,.faq summary .plus::after{content:"";position:absolute;background:var(--flame);border-radius:2px} .faq summary .plus::before{left:0;right:0;top:12px;height:2px} .faq summary .plus::after{top:0;bottom:0;left:12px;width:2px;transition:transform .35s var(--ease)} .faq details[open] summary .plus::after{transform:scaleY(0)} .faq details[open] summary{color:var(--flame)} .faq .body{padding:0 0 26px;color:var(--cream-dim);font-size:1rem;max-width:62ch} .faq .body p{margin-bottom:14px} .faq .body strong{color:var(--cream)} .faq .body a{color:var(--flame);border-bottom:1px solid rgba(255,193,94,.35)} .faq .body ul{list-style:none;margin:8px 0 14px;display:flex;flex-direction:column;gap:9px} .faq .body li{padding-left:20px;position:relative} .faq .body li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--coal)} /* allowed / not allowed */ .allow-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:30px} .allow-card{border:1px solid var(--line);border-radius:16px;padding:30px;background:rgba(255,255,255,.02)} .allow-card h4{font-size:1.2rem;margin-bottom:18px;display:flex;align-items:center;gap:10px} .allow-card.yes h4{color:var(--sage)} .allow-card.no h4{color:var(--coal)} .allow-card ul{list-style:none;display:flex;flex-direction:column;gap:11px} .allow-card li{font-size:.96rem;color:var(--cream-dim);padding-left:22px;position:relative} .allow-card.yes li::before{content:"✓";position:absolute;left:0;color:var(--sage)} .allow-card.no li::before{content:"✕";position:absolute;left:0;color:var(--coal)} /* info pills (faq quick facts) */ .facts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:10px} .fact{border:1px solid var(--line);border-radius:14px;padding:22px;background:rgba(255,255,255,.02)} .fact .l{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--flame);margin-bottom:8px} .fact .v{font-family:"Fraunces",serif;font-size:1.15rem;color:var(--cream);line-height:1.25} /* menu (programme) */ .menu-block{border:1px solid var(--line);border-radius:16px;padding:30px;background:rgba(255,255,255,.02);margin-bottom:22px} .menu-block h4{font-size:1.3rem;color:var(--flame);margin-bottom:6px} .menu-block .price{font-size:.85rem;color:var(--cream-dim);letter-spacing:.05em;margin-bottom:16px} .menu-block p{color:var(--cream-dim);margin-bottom:8px;font-size:.98rem} .menu-block p b{color:var(--cream)} /* FOOTER */ footer{background:#0b0705;border-top:1px solid var(--line);padding:62px 0 38px} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px} .foot-grid h4{font-family:"Fraunces",serif;font-size:1.3rem;margin-bottom:8px} .foot-grid p{color:var(--cream-dim);font-size:.92rem;max-width:34ch} .foot-col h5{font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--flame);margin-bottom:16px} .foot-col a{display:block;color:var(--cream-dim);font-size:.95rem;padding:5px 0;transition:color .25s} .foot-col a:hover{color:var(--cream)} .foot-bottom{border-top:1px solid var(--line);margin-top:48px;padding-top:26px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:14px;font-size:.82rem;color:var(--cream-dim)} /* RESPONSIVE */ @media(max-width:900px){ .nav-links{position:fixed;inset:74px 0 auto 0;flex-direction:column;gap:0;background:rgba(16,10,6,.98);backdrop-filter:blur(16px);padding:10px 0;border-bottom:1px solid var(--line);transform:translateY(-130%);transition:transform .45s var(--ease)} .nav-links.open{transform:translateY(0)} .nav-links a{padding:15px 28px;width:100%;font-size:1rem} .nav-links a:not(.btn)::after{display:none} .nav-links .btn{margin:14px 28px;text-align:center} .menu-toggle{display:block} .return-grid,.involve-grid,.allow-grid,.facts{grid-template-columns:1fr;gap:28px} .p-grid{grid-template-columns:1fr} .themes-grid{grid-template-columns:1fr 1fr} .quote-grid{columns:2} .foot-grid{grid-template-columns:1fr;gap:32px} } @media(max-width:560px){ .themes-grid{grid-template-columns:1fr} .quote-grid{columns:1} .hero .meta{gap:8px 16px;font-size:.92rem} .venue-card,.inv-card{padding:28px} } @media(prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} .reveal{opacity:1;transform:none} } /* checklist */ .checklist-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px 48px} .cl-head{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--flame);margin:0 0 12px} .cl-list{list-style:none;padding:0;margin:0} .cl-list li{padding:5px 0 5px 18px;position:relative;color:var(--cream-dim);font-size:.95rem;line-height:1.4;border-bottom:1px solid rgba(255,255,255,.05)} .cl-list li::before{content:'·';position:absolute;left:0;color:var(--flame);font-size:1.2rem;line-height:1.1} .cl-tips{margin-top:36px;padding:24px 28px;background:rgba(255,140,58,.07);border:1px solid rgba(255,140,58,.18);border-radius:10px} @media(max-width:600px){.checklist-grid{grid-template-columns:1fr}} /* full programme soon line */ .prog-soon{text-align:center;font-family:"Fraunces",serif;font-style:italic;font-size:clamp(1rem,2vw,1.35rem);color:var(--cream-dim);margin-top:28px;letter-spacing:.02em;opacity:.85} /* line-up section */ .lineup{background:linear-gradient(180deg,rgba(255,140,58,.04) 0%,transparent 100%)} .lineup-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:48px;align-items:start} .lu-head{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--flame);margin:0 0 16px;padding-bottom:8px;border-bottom:1px solid rgba(255,140,58,.25)} .lu-list{list-style:none;padding:0;margin:0 0 8px} .lu-list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;padding:7px 0;border-bottom:1px solid rgba(255,255,255,.06)} .lu-title{font-family:"Fraunces",serif;font-size:1rem;font-weight:500;color:var(--cream);line-height:1.3} .lu-with{font-size:.85rem;color:var(--cream-dim);font-style:italic} .lu-music{list-style:none;padding:0;margin:0} .lu-music li{font-family:"Fraunces",serif;font-size:1.1rem;font-weight:400;color:var(--cream);padding:6px 0;border-bottom:1px solid rgba(255,255,255,.06)} .lu-note{font-size:.82rem;color:var(--cream-dim);font-style:italic;font-family:"Hanken Grotesk",sans-serif} .lu-more{font-family:"Fraunces",serif;font-style:italic;color:var(--flame);font-size:1rem;margin-top:18px} .lu-right{} @media(max-width:700px){.lineup-grid{grid-template-columns:1fr}} /* homepage teaser link */ .prog-soon-link{color:var(--flame);text-decoration:none;border-bottom:1px solid rgba(255,140,58,.35);transition:border-color .25s} .prog-soon-link:hover{border-color:var(--flame)} /* crew page — rumi */ .rumi-section{background:rgba(255,140,58,.04);border-top:1px solid rgba(255,140,58,.12);border-bottom:1px solid rgba(255,140,58,.12)} .rumi{margin:0;text-align:center} .rumi p{font-family:"Fraunces",serif;font-size:clamp(1.15rem,2.2vw,1.55rem);font-style:italic;color:var(--cream);line-height:1.7;margin:0 0 18px} .rumi cite{font-size:.9rem;color:var(--flame);letter-spacing:.08em;font-style:normal;text-transform:uppercase} /* ── Day mode readability fixes ─────────────────────────────────────────── */ /* 1. Eyebrow ("Campfire's 10th Anniversary") — bigger, bolder */ [data-theme="day"] .eyebrow{ font-size:1rem; font-weight:700; letter-spacing:.18em; color:var(--coal); text-shadow:none; } [data-theme="day"] .eyebrow::before{background:var(--coal)} /* 2. Ghost buttons — dark border + text so readable on light bg */ [data-theme="day"] .btn.ghost{border-color:rgba(42,26,10,.6)!important;color:#2a1a0a!important;box-shadow:none!important} [data-theme="day"] .btn.ghost:hover{border-color:var(--coal)!important;background:rgba(42,26,10,.08)!important} /* 3. CTA band ("CO-CREATE WITH US") — switch to warm light bg in day mode */ [data-theme="day"] .cta-band{background:linear-gradient(180deg,#e8e0d4,#ddd4c4)!important} [data-theme="day"] .cta-band h2{color:#2a1a0a} [data-theme="day"] .cta-band h2 em{color:var(--coal)} [data-theme="day"] .cta-band p{color:#5a3e28} /* 4. Section tags + subheadings — heavier weight in day mode */ [data-theme="day"] .section-tag{ font-weight:700; color:var(--coal); } [data-theme="day"] .section-tag::before{background:var(--coal)} [data-theme="day"] h2,[data-theme="day"] h3,[data-theme="day"] h4{ font-weight:600; } [data-theme="day"] .page-hero p.sub, [data-theme="day"] .hero .lede{ font-weight:400; color:#4a2e18; } [data-theme="day"] .qc p, [data-theme="day"] .quote p{ color:#3a2410; font-weight:400; } /* chip/blend-tag text in day mode - dark and readable */ [data-theme="day"] .chip, [data-theme="day"] .blend-tags span{ color:#3a2010!important; filter:saturate(0.7) brightness(0.55)!important; } /* cta-band full day fix */ [data-theme="day"] .cta-band{background:linear-gradient(180deg,#e8e0d4,#ddd4c4)!important} [data-theme="day"] .cta-band h2{color:#1a0e06!important} [data-theme="day"] .cta-band h2 em{color:#b83d08!important} [data-theme="day"] .cta-band p{color:#4a2e18!important} [data-theme="day"] .inv-card{background:#e4dace!important;border:1px solid rgba(42,26,10,.15)!important} [data-theme="day"] .inv-card h3{color:#1a0e06!important} [data-theme="day"] .inv-card p{color:#4a2e18!important} /* day mode - ensure regular btn text stays white and readable */ [data-theme="day"] .btn:not(.ghost){color:#fff!important} /* programme page blend section bg in day */ [data-theme="day"] .blend{background:rgba(42,26,10,.04)} /* p-card (co-create cards) in day */ [data-theme="day"] .p-card{background:#e4dace!important;color:#1a0e06!important} [data-theme="day"] .p-card:hover{background:#ddd4c4!important} [data-theme="day"] .p-card p,[data-theme="day"] .p-card h3,[data-theme="day"] .p-card .num{color:#1a0e06!important} /* involve section — night mode text brightness fix */ .involve-body{max-width:58ch;margin-top:20px;font-size:1.1rem;color:#d8c6ab} .involve h2.big{color:#f6ead6!important} /* involve section — day mode */ [data-theme="day"] .involve{background:linear-gradient(180deg,#e8e0d4,#ddd4c4)!important} [data-theme="day"] .involve h2.big{color:#1a0e06!important} [data-theme="day"] .involve-body{color:#4a2e18!important} [data-theme="day"] .involve .section-tag{color:var(--coal)!important} [data-theme="day"] .involve .section-tag::before{background:var(--coal)!important} [data-theme="day"] .involve .inv-card{background:rgba(42,26,10,.07)!important;border-color:rgba(42,26,10,.18)!important} [data-theme="day"] .involve .inv-card h3{color:#1a0e06!important} [data-theme="day"] .involve .inv-card p{color:#4a2e18!important} /* ── Remaining day mode fixes ───────────────────────────────────────────── */ /* About page - quotes and prose */ [data-theme="day"] .prose p{color:#4a2e18} [data-theme="day"] .prose h3{color:#1a0e06} [data-theme="day"] .prose strong,[data-theme="day"] .prose b{color:#1a0e06} [data-theme="day"] .lead-p{color:#1a0e06} [data-theme="day"] .who{color:#6b4228} /* Programme lineup day mode */ [data-theme="day"] .lu-title{color:#1a0e06} [data-theme="day"] .lu-with{color:#5a3e28} [data-theme="day"] .lu-head{color:var(--coal)} [data-theme="day"] .lu-music li{color:#1a0e06} [data-theme="day"] .lu-note{color:#6b4228} [data-theme="day"] .lu-more{color:var(--coal)} [data-theme="day"] .lu-list li{border-bottom-color:rgba(42,26,10,.1)} [data-theme="day"] .lu-music li{border-bottom-color:rgba(42,26,10,.1)} /* Return section day mode text */ [data-theme="day"] .return-grid p{color:#4a2e18} [data-theme="day"] .return-grid p .hl{color:#1a0e06} [data-theme="day"] .venue-card .place{color:var(--coal)} [data-theme="day"] .venue-card h3{color:#1a0e06} [data-theme="day"] .venue-card li{color:#4a2e18} /* Principles day mode */ [data-theme="day"] .p-card .num{color:var(--coal)} [data-theme="day"] .p-card h3{color:#1a0e06!important} [data-theme="day"] .p-card p{color:#4a2e18!important} /* Hero meta day mode */ [data-theme="day"] .hero .meta{color:#4a2e18} [data-theme="day"] .hero .meta b{color:#1a0e06} /* Checklist day mode */ [data-theme="day"] .cl-head{color:var(--coal)} [data-theme="day"] .cl-list li{color:#4a2e18} [data-theme="day"] .cl-tips p{color:#3a2010} /* ── Sign Up page ─────────────────────────────────────────────────────────── */ .signup-section{padding-top:60px;padding-bottom:80px} .signup-layout{display:grid;grid-template-columns:1fr 1.1fr;gap:64px;align-items:start} .signup-intro h2{font-size:clamp(2rem,4.5vw,3.4rem);margin:16px 0 20px;line-height:1.05} .signup-intro p{color:var(--cream-dim);font-size:1.05rem;line-height:1.7;margin-bottom:16px;max-width:44ch} .signup-reasons{list-style:none;padding:0;margin:28px 0 0} .signup-reasons li{padding:8px 0 8px 20px;position:relative;color:var(--cream-dim);font-size:.98rem;border-bottom:1px solid rgba(255,255,255,.07)} .signup-reasons li::before{content:'→';position:absolute;left:0;color:var(--flame);font-size:.9rem} .signup-form-wrap{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:16px;padding:40px;min-height:280px} /* Day mode overrides */ [data-theme="day"] .signup-intro p{color:#4a2e18} [data-theme="day"] .signup-intro h2{color:#1a0e06} [data-theme="day"] .signup-reasons li{color:#4a2e18;border-bottom-color:rgba(42,26,10,.1)} [data-theme="day"] .signup-form-wrap{background:rgba(42,26,10,.04);border-color:rgba(42,26,10,.14)} @media(max-width:700px){ .signup-layout{grid-template-columns:1fr} .signup-form-wrap{padding:24px} } /* Flodesk placeholder — hidden once form loads */ .form-placeholder{color:var(--cream-dim);font-size:.9rem;font-style:italic;text-align:center;padding:60px 20px;opacity:.5} .fd-form-container ~ .form-placeholder, .fd-form ~ .form-placeholder{display:none} [data-theme="day"] .form-placeholder{color:#6b4228} /* signup CTA box */ .signup-cta-box{display:flex;flex-direction:column;align-items:center;text-align:center;padding:52px 40px;gap:16px} .signup-logo-circle{ width:96px;height:96px;border-radius:50%; background:#0d1224; display:flex;align-items:center;justify-content:center; margin:0 auto; box-shadow:0 6px 22px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.06); } .signup-tents{width:60px;height:46px} .signup-cta-box h3{font-family:"Fraunces",serif;font-size:1.9rem;font-weight:500;color:var(--cream);margin:0} .signup-cta-box p{color:var(--cream-dim);font-size:1rem;line-height:1.6;max-width:28ch;margin:0} .signup-trigger{font-size:1rem;padding:14px 36px;margin-top:8px;cursor:pointer;border:none} .signup-reassure{font-size:.8rem!important;opacity:.6;margin-top:4px!important} [data-theme="day"] .signup-cta-box h3{color:#1a0e06} [data-theme="day"] .signup-cta-box p{color:#4a2e18}